/* ──────────────────────────────────────────────────────────────
   MRC 보장분석 도구 — 공용 마감 스타일
   세 시트(보장분석·리모델링·연금)의 인라인 <style> 뒤에 읽혀서 겉모습만 통일합니다.
   표 계산·입력 동작(JS)은 건드리지 않습니다. 화면 폭·스티키 위치처럼 동작과 얽힌 값은
   여기서 함께 맞춥니다 (헤더 높이 56px ↔ .cond top:56px).
   ────────────────────────────────────────────────────────────── */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  --ink:#0F1922; --ink-2:#182531; --ink-3:#22303D;
  --paper:#FFFFFF; --field:#F3F5F8; --rule:#DFE5EC; --rule-strong:#B9C4D0;
  --blue:#0B75BE; --blue-deep:#085B94; --blue-dim:#E8F2FA;
  --amber:#F6AD48; --amber-deep:#8A5A0B; --amber-dim:#FDF3E2;
  --muted:#65727F; --red:#C0392B; --red-dim:#FDECEA; --green:#15795A; --green-dim:#E4F3EC;
  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shadow-1:0 1px 2px rgba(15,25,34,.06), 0 1px 1px rgba(15,25,34,.04);
  --shadow-2:0 12px 32px -20px rgba(15,25,34,.35), 0 2px 6px -2px rgba(15,25,34,.08);
  --head-h:56px;
}

html{scrollbar-color:#B9C4D0 transparent}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,'Segoe UI','Malgun Gothic',sans-serif;
  background:var(--field);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:rgba(11,117,190,.22); color:var(--ink)}
*:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
*::-webkit-scrollbar{width:10px; height:10px}
*::-webkit-scrollbar-thumb{background:#C4CDD7; border:3px solid var(--field); border-radius:99px}
*::-webkit-scrollbar-thumb:hover{background:#9FADBB}
.sheetwrap::-webkit-scrollbar-thumb{border-color:#fff}

/* ── 상단 헤더 ── */
header{
  background:linear-gradient(180deg,var(--ink-2),var(--ink)) !important;
  border-bottom:1px solid var(--ink-3);
  padding:0 20px !important; min-height:var(--head-h); gap:14px !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -18px rgba(0,0,0,.6);
}
header h1{
  display:flex; align-items:center; gap:10px;
  font-size:15px !important; font-weight:800 !important; letter-spacing:-.02em; margin:0 !important;
  white-space:nowrap;
}
header h1::before{
  content:""; width:28px; height:28px; flex:none;
  background:url(/logo.png) center/contain no-repeat;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
header h1 span{display:none !important}          /* 로고가 브랜드를 대신합니다 */
.nav{gap:2px !important; margin-left:2px !important; padding-left:14px !important; border-left:1px solid var(--ink-3) !important}
.nav a{
  color:#AEBBC8 !important; font-size:12.5px !important; font-weight:700 !important;
  padding:6px 11px !important; border-radius:var(--r-sm) !important; border:none !important;
  position:relative; transition:color .15s, background .15s;
}
.nav a:hover{background:rgba(255,255,255,.06) !important; color:#fff !important}
.nav a.on{background:transparent !important; color:#fff !important}
.nav a.on::after{
  content:""; position:absolute; left:11px; right:11px; bottom:-1px; height:2px;
  background:var(--amber); border-radius:2px;
}
.tabs{
  margin-left:auto !important; gap:2px !important;
  background:rgba(255,255,255,.06); border:1px solid var(--ink-3); border-radius:var(--r-md); padding:3px;
}
.tabs button{
  border:none !important; border-radius:var(--r-sm) !important; padding:6px 14px !important;
  font-size:12.5px !important; font-weight:700 !important; color:#AEBBC8 !important;
  transition:background .15s, color .15s;
}
.tabs button:hover{color:#fff !important}
.tabs button.on{background:#fff !important; color:var(--ink) !important; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tabs button:focus-visible{outline-color:var(--amber) !important}

/* ── 조건 바 ── */
.cond{
  top:var(--head-h) !important; padding:10px 20px !important; gap:16px !important;
  background:rgba(255,255,255,.92) !important; backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--rule) !important;
}
.f label{font-size:10.5px !important; letter-spacing:.04em !important; color:var(--muted) !important}
.f input,.f select{
  border-radius:var(--r-sm) !important; border-color:var(--rule) !important; background:#fff !important;
  padding:6px 9px !important; height:32px; transition:border-color .12s, box-shadow .12s;
}
.f input:hover,.f select:hover{border-color:var(--rule-strong) !important}
.f input:focus,.f select:focus{outline:none !important; border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(11,117,190,.18)}
.f input::placeholder{color:#B4BFCA}

/* ── 버튼 ── */
.btn{
  height:32px; padding:0 12px !important; border-radius:var(--r-sm) !important;
  border:1px solid var(--rule-strong) !important; background:#fff !important; color:var(--ink) !important;
  font-size:12.5px !important; font-weight:700 !important; box-shadow:var(--shadow-1);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .12s, border-color .12s, transform .08s, box-shadow .12s;
}
.btn:hover{background:var(--field) !important; border-color:#A7B4C2 !important}
.btn:active{transform:translateY(1px); box-shadow:none}
.btn.pri{background:var(--blue) !important; border-color:var(--blue) !important; color:#fff !important; box-shadow:0 1px 2px rgba(11,117,190,.35)}
.btn.pri:hover{background:var(--blue-deep) !important; border-color:var(--blue-deep) !important}
.btn.new{border-color:#9FCBEA !important; color:var(--blue) !important; background:var(--blue-dim) !important}
.btn.new:hover{background:#D9EAF6 !important}
.btn.old{color:var(--muted) !important}
.btn[style*="--amber"]{box-shadow:0 1px 2px rgba(246,173,72,.4)}
.btn:focus-visible{outline-color:var(--amber) !important}
.btn:disabled{opacity:.6; cursor:progress}

/* ── 본문 ── */
main{padding:18px 20px 72px !important}
.warn{
  border:1px solid #F1C4BD !important; border-left-width:1px !important; border-radius:var(--r-md) !important;
  background:var(--red-dim) !important; padding:10px 14px 10px 36px !important; position:relative;
}
.warn::before{content:""; position:absolute; left:14px; top:13px; width:12px; height:12px; border-radius:50%; background:var(--red); box-shadow:0 0 0 3px #F8D5D0}
.hint{
  border:1px solid var(--rule) !important; border-left-width:1px !important; border-radius:var(--r-md) !important;
  background:#fff !important; padding:11px 14px 11px 34px !important; position:relative; margin-top:12px !important;
  box-shadow:var(--shadow-1);
}
.hint::before{content:""; position:absolute; left:14px; top:16px; width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px var(--amber-dim)}
.memobox{border-radius:var(--r-md) !important; box-shadow:var(--shadow-1)}
textarea{border-radius:var(--r-sm) !important}
textarea:focus{outline:none !important; border-color:var(--blue) !important; box-shadow:0 0 0 3px rgba(11,117,190,.18)}

/* ── 시트(표) ── */
.sheetwrap{
  border-radius:var(--r-lg) !important; border-color:var(--rule) !important;
  box-shadow:var(--shadow-2);
}
table{font-variant-numeric:tabular-nums}
thead th{font-size:10.5px !important; letter-spacing:.04em !important; color:var(--muted) !important}
.co-head{background:#FAFBFC !important}
.co-head input{border-radius:4px !important}
.co-meta input{border-radius:4px !important; border-color:var(--rule) !important}
.co-meta input:focus, .co-head input:focus, .co-head .pname:focus, .rowhead input:focus, .rowhead .iname:focus, .pol input:focus{
  outline:none !important; box-shadow:0 0 0 2px var(--blue) inset; background:var(--blue-dim) !important;
}
.cell input:focus, td.cell input:focus, .meta input:focus{outline:none !important; box-shadow:0 0 0 2px var(--blue) inset; background:var(--blue-dim) !important}
tr.cat td, tr.sec td{
  background:linear-gradient(180deg,var(--ink-2),var(--ink)) !important;
  font-size:11px !important; letter-spacing:.08em !important; padding:8px 12px !important;
}
tr.sec.calc td{background:var(--ink-3) !important}
tr.cat td .add, tr.cat td .add.ghost{border-radius:5px !important; padding:3px 9px !important}
tr.item .rowhead{transition:background .1s}
tr.item:hover .rowhead{background:var(--blue-dim) !important}
tr.item:hover td.cell{background:#FBFCFD}
.rowhead .rm{border-radius:4px; transition:color .1s, background .1s}
.rowhead .rm:hover{background:var(--red-dim)}
tr.sum td{background:#F5F7FA !important}
tr.sum td.rowhead{background:#F5F7FA !important}
tr.total td, tr.big td, tr.grand td{background:linear-gradient(180deg,var(--ink-2),var(--ink)) !important}
tr.total td.rowhead, tr.big td.rowhead, tr.grand td.rowhead{background:var(--ink-2) !important}
.sumcol{background:var(--amber-dim) !important}
td.eff.best, td.out.best{background:var(--amber-dim) !important}
.rnw, tr.metarow .rnw, .pol .cancel-btn{border-radius:5px !important; transition:background .12s, color .12s}
.grp{letter-spacing:.12em !important}
.grp.d{background:var(--ink-2) !important}

/* ── 리포트 ── */
.report, .cover-page, .needs-page{border-radius:var(--r-lg) !important; box-shadow:var(--shadow-2); border-color:var(--rule) !important}
.kpi, .nc-stat, .nc-card{border-radius:var(--r-md) !important}
.bar .track{border-radius:4px !important}
.bar .fill{border-radius:4px !important}
.memo{border-left-width:1px !important; border:1px solid var(--rule); border-radius:var(--r-md); background:#F7F9FB}
.nc-memo{border-left-width:1px !important; border:1px solid #F0D5A6; border-radius:var(--r-md)}

/* ── 창(PDF 확인 등) 안의 버튼도 같은 모양 ── */
.btn.pri[style]{color:#fff !important}

@media (max-width:760px){
  header{padding:0 14px !important}
  header h1{font-size:14px !important}
  .nav{padding-left:8px !important}
  .nav a{padding:6px 8px !important; font-size:12px !important}
  .cond{padding:10px 14px !important; gap:10px !important}
  main{padding:14px 12px 60px !important}
}
@media print{
  header, .cond{display:none !important}
  .sheetwrap, .report, .cover-page, .needs-page{box-shadow:none !important; border-radius:0 !important}
}