/* ===== sat/settle.css — S1 정산(s1.html) · KK 정산(kk.html) 공통 — 끝의 .kkrow·.kkhint·textarea.paste 는 KK 만 씀 스타일 (㊿+154: 페이지 안 <style> 에서 파일로) ===== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root{ --gg:#1fb53a; --bd:rgba(11,11,11,.12); --muted:#52514e; --bg:#f9f9f7; --warn:#c0392b; --ok:#1e8e3e; }
*{box-sizing:border-box}
body{font-family:'Noto Sans KR',sans-serif;background:var(--bg);margin:0;padding:16px;color:#222;font-size:13px}
.wrap{max-width:1280px;margin:0 auto}
.card{background:#fff;border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:12px}
h2{font-size:15px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
h3{font-size:13px;margin:0 0 8px}
.cap{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.55}
.btn{padding:8px 13px;font-weight:700;border-radius:9px;cursor:pointer;border:none;color:#fff;font-size:12px;background:#333;white-space:nowrap}
.btn.green{background:var(--gg)} .btn.line{background:#fff;color:#333;border:1px solid var(--bd)} .btn.gray{background:#6c757d}
.btn:disabled{opacity:.45;cursor:default}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tab{padding:9px 16px;border:1px solid var(--bd);background:#fff;border-radius:999px;cursor:pointer;font-weight:600;font-size:12.5px}
.tab.on{background:var(--gg);color:#fff;border-color:var(--gg)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.drop{flex:1;min-width:240px;border:1.5px dashed #c9cfd5;border-radius:10px;padding:12px;background:#fcfcfb;text-align:center;cursor:pointer}
.drop.has{border-color:var(--gg);background:#f4fbf5}
.drop b{display:block;font-size:12.5px;margin-bottom:3px}
.drop span{font-size:11.5px;color:var(--muted)}
input[type=file]{display:none}
label.f{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
input[type=month],input[type=text],input[type=number],select{border:1px solid #ccd2d8;border-radius:7px;padding:6px 8px;font-size:12px;font-family:inherit;background:#fff}
.tiles{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.tile{flex:1;min-width:132px;border:1px solid var(--bd);border-radius:10px;padding:10px 12px;background:#fcfcfb}
.tile .t{font-size:11px;color:var(--muted)} .tile .v{font-size:17px;font-weight:700;margin-top:2px}
.tile.ok .v{color:var(--ok)} .tile.bad .v{color:var(--warn)}
.cnts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
.cnts label{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.cnts input{width:64px;text-align:right}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #eef0f2;padding:6px 7px;text-align:left;font-size:12px;vertical-align:middle}
th{background:#f5f6f7;position:sticky;top:0;z-index:2;font-weight:600;white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.scroll{max-height:62vh;overflow:auto;border:1px solid var(--bd);border-radius:10px}
tr.st-auto td{background:#fff} tr.st-map td{background:#f4fbf5} tr.st-need td{background:#fff8e1} tr.st-diff td{background:#fdecea}
.tag{display:inline-block;font-size:10.5px;padding:1px 7px;border-radius:999px;background:#eef3f8;color:#345;white-space:nowrap}
.tag.map{background:#e3f6e6;color:#1e8e3e} .tag.amt{background:#e8f0fe;color:#1a56b8} .tag.need{background:#fff3cd;color:#7a5c00}
.tag.diff{background:#fdecea;color:#c0392b} .tag.new{background:#fff9c4;color:#7a5c00} .tag.end{background:#fdecea;color:#c0392b}
.tag.ext{background:#ede7f6;color:#5e35b1}
.more{position:relative;display:inline-block}
.moremenu{display:none;position:absolute;right:0;bottom:calc(100% + 6px);background:#fff;border:1px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;min-width:186px;z-index:60}
.moremenu.on{display:block}
.moremenu button{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 10px;border-radius:7px;font-size:12px;cursor:pointer;font-family:inherit;color:#333;white-space:nowrap}
.moremenu button:hover{background:#f3f5f7}
.moremenu button.red{color:#c0392b}
.setmon{display:flex;align-items:baseline;gap:8px;margin:12px 0 5px;padding-bottom:4px;border-bottom:1px solid #eef0f2}
.setmon .ym{font-weight:700;font-size:13px}
.setmon .sum{font-size:11.5px;color:var(--muted)}
.setrow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;font-size:12px}
.setrow:hover{background:#f7f9fa}
.setrow .kind{flex:0 0 52px;text-align:center;border-radius:999px;padding:2px 0;font-size:11px;font-weight:600}
.setrow .kind.u{background:#e8f0fe;color:#1a56b8} .setrow .kind.i{background:#e3f6e6;color:#1e8e3e}
.setrow .amt{flex:0 0 110px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.setrow .diff{flex:0 0 92px;font-size:11px}
.setrow .diff.ok{color:var(--ok)} .setrow .diff.bad{color:var(--warn)}
.setrow .cnt{flex:1;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.setrow .who{flex:0 0 auto;color:#98a2ab;font-size:11px}
.setrow .acts{flex:0 0 auto;display:flex;gap:4px;opacity:.72}   /* ㊿+176 .4 → .72(글자 대비 4.5 이상) · 키보드로 들어와도 또렷하게 */
.setrow:hover .acts,.setrow:focus-within .acts{opacity:1}
.rest{max-width:1280px;margin:0 auto 10px;background:#eef6ff;border:1px solid #cfe3fb;color:#1a56b8;border-radius:10px;padding:8px 12px;display:flex;align-items:center;gap:10px;font-size:12px}
.rest span{flex:1}
.ovl{position:fixed;inset:0;background:rgba(15,20,25,.38);z-index:500;display:none;align-items:flex-start;justify-content:center;padding:52px 16px 24px;overflow:auto}
.ovl.show{display:flex}
.pan{background:#fff;border:1px solid var(--bd);border-radius:14px;width:820px;max-width:100%;padding:16px 18px 14px;box-shadow:0 18px 50px rgba(0,0,0,.22)}
.pan h3{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;margin:0 0 6px}
.rowbtn{border:1px solid var(--bd);background:#fff;border-radius:7px;padding:3px 9px;cursor:pointer;font-size:11.5px;font-family:inherit;color:#333}
.rowbtn:hover{border-color:var(--gg);color:var(--gg)}
.rowbtn.red{color:#c0392b;border-color:#e6b0aa}
.st{font-size:11.5px;color:var(--muted);line-height:1.55;margin:0 0 8px}
.st.bad{color:var(--warn)} .st.ok{color:var(--ok)}
select.pick{max-width:270px;font-size:11.5px}
.msg{font-size:12px;margin:6px 0;min-height:16px}
.msg.bad{color:var(--warn)} .msg.ok{color:var(--ok)}
.foot{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hidden{display:none!important}
.mini{font-size:11px;color:var(--muted)}
.lnk{color:#1a56b8;cursor:pointer;text-decoration:underline}
#loginOverlay{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center}

.kkrow td{font-size:12px}
.kkhint{font-size:11.5px;color:var(--muted)}
textarea.paste{width:100%;min-height:110px;border:1px solid #ccd2d8;border-radius:9px;padding:9px 11px;font-family:inherit;font-size:12px;line-height:1.5;resize:vertical}
/* ㊿+176 월 마감 · 발행 잠금 · 이력 */
.cls-lock{font-size:11px;color:#8a5200;background:#fff4d6;border:1px solid #e3c06b;border-radius:6px;padding:1px 6px;margin-left:6px}
.setmon .rowbtn{margin-left:4px}

/* ㊿+188 포탈(지니언스) 안에 들어갔을 때(html[data-embed="gn"] · sat/common.js) — 포탈과 같은 초록 · 진한 선택 탭 · 모서리 · 여백(바깥 카드가 이미 여백을 줌) */
html[data-embed="gn"]{--gg:#3F7A0C;--bd:rgba(28,30,32,.12);--bg:#fff}
html[data-embed="gn"] body{padding:4px 2px 12px}
html[data-embed="gn"] .card{border-radius:14px}
html[data-embed="gn"] .tab{border-radius:8px;font-size:13px;padding:8px 14px}
html[data-embed="gn"] .tab.on{background:#1C1E20;border-color:#1C1E20}
html[data-embed="gn"] .btn{border-radius:8px}
html[data-embed="gn"] .btn.green{background:#1C1E20}
html[data-embed="gn"] input[type=month],html[data-embed="gn"] input[type=text],html[data-embed="gn"] input[type=number],html[data-embed="gn"] select{border-radius:8px}