/* ssamlab — 공통 스타일
   제도(製圖) 도면에서 가져온 어휘: 얇은 괘선, 등폭 숫자, 치수선. */

:root{
  --paper:#EFF2F3; --panel:#F7F9FA; --ink:#17222B; --ink2:#556673; --ink3:#7D8D99;
  --rule:#C9D3D9; --rule-2:#DDE4E8; --accent:#1E5F86; --accent-soft:#DCE8F0;
  --flag:#A83A25; --flag-soft:#F4E2DD;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --measure:68ch;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#121A20; --panel:#18222A; --ink:#E3EAEE; --ink2:#9DACB7; --ink3:#77868F;
    --rule:#2B3841; --rule-2:#222D35; --accent:#74B6DC; --accent-soft:#1B3547;
    --flag:#E58269; --flag-soft:#3B241E;
  }
}
:root[data-theme="dark"]{
  --paper:#121A20; --panel:#18222A; --ink:#E3EAEE; --ink2:#9DACB7; --ink3:#77868F;
  --rule:#2B3841; --rule-2:#222D35; --accent:#74B6DC; --accent-soft:#1B3547;
  --flag:#E58269; --flag-soft:#3B241E;
}
:root[data-theme="light"]{
  --paper:#EFF2F3; --panel:#F7F9FA; --ink:#17222B; --ink2:#556673; --ink3:#7D8D99;
  --rule:#C9D3D9; --rule-2:#DDE4E8; --accent:#1E5F86; --accent-soft:#DCE8F0;
  --flag:#A83A25; --flag-soft:#F4E2DD;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
.sheet{max-width:1060px; margin:0 auto; padding:0 24px 96px}
.sheet.narrow{max-width:780px}

/* ---- 상단 항법 ---- */
.nav{
  display:flex; align-items:baseline; gap:26px; flex-wrap:wrap;
  padding:22px 0 18px; border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em;
}
.nav .brand{font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.nav a{color:var(--ink3); text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav .sp{margin-left:auto}

/* ---- 공통 타이포 ---- */
.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); margin:0 0 18px;
}
h1{font-size:clamp(30px,5vw,50px); line-height:1.14; letter-spacing:-.022em; font-weight:800;
   margin:0 0 18px; text-wrap:balance; max-width:20ch}
h2{font-size:clamp(20px,2.6vw,26px); font-weight:700; letter-spacing:-.015em; margin:0; text-wrap:balance}
h3{font-size:17px; font-weight:700; margin:34px 0 10px; letter-spacing:-.008em; text-wrap:balance}
p{max-width:var(--measure); margin:0 0 16px}
.standfirst{font-size:17px; color:var(--ink2); max-width:var(--measure)}
.lede{font-size:17px}
strong{font-weight:700}
em{font-style:normal; background:var(--accent-soft); padding:.08em .3em; border-radius:2px}
a{color:var(--accent)}
a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.mast{padding:52px 0 28px; border-bottom:2px solid var(--ink)}
.meta{display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:26px;
      font-family:var(--mono); font-size:12px; color:var(--ink3)}
.meta b{color:var(--ink2); font-weight:500}

section{padding-top:60px}
.shead{display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--ink);
       padding-bottom:9px; margin-bottom:26px}
.snum{font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.06em}

/* ---- 카드 격자 ---- */
.grid{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
      background:var(--rule); border:1px solid var(--rule)}
.card{background:var(--panel); padding:24px 22px 26px; text-decoration:none; color:inherit; display:block}
a.card:hover{background:var(--accent-soft)}
.card .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--accent); text-transform:uppercase}
.card .n{font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.15;
         margin:10px 0 6px; font-variant-numeric:tabular-nums}
.card h3{font-size:18px; margin:10px 0 6px}
.card p{margin:0; font-size:14px; color:var(--ink2); line-height:1.65; max-width:none}

/* ---- 표 ---- */
.tw{overflow-x:auto; margin:0 0 22px; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule)}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:14.5px}
th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
   color:var(--ink3); font-weight:500; text-align:left; padding:11px 14px 11px 0;
   border-bottom:1px solid var(--rule); white-space:nowrap}
td{padding:12px 14px 12px 0; border-bottom:1px solid var(--rule-2); vertical-align:top; line-height:1.55}
tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.yr{font-family:var(--mono); color:var(--ink2); white-space:nowrap}
.gap{font-family:var(--mono); font-weight:700; color:var(--flag); white-space:nowrap}

/* ---- 안내 상자 ---- */
.call{border-left:3px solid var(--accent); background:var(--panel); padding:16px 20px;
      margin:0 0 22px; max-width:var(--measure)}
.call.warn{border-left-color:var(--flag); background:var(--flag-soft)}
.call p{margin:0; max-width:none} .call p + p{margin-top:9px}
.call .tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
           color:var(--accent); display:block; margin-bottom:6px}
.call.warn .tag{color:var(--flag)}

ul{max-width:var(--measure); padding-left:1.1em; margin:0 0 18px}
li{margin-bottom:7px}
li::marker{color:var(--ink3)}

.chain{font-family:var(--mono); font-size:13px; color:var(--ink2); background:var(--panel);
       padding:12px 16px; border:1px solid var(--rule-2); overflow-x:auto;
       white-space:nowrap; margin:0 0 18px}
.chain b{color:var(--ink); font-weight:700}

/* ---- 배분 막대 ---- */
.alloc{display:flex; flex-direction:column; gap:2px; margin:4px 0 20px}
.row{display:grid; grid-template-columns:minmax(140px,1.1fr) minmax(90px,3fr) 46px;
     align-items:center; gap:14px; padding:5px 0}
.row .nm{font-size:14.5px; line-height:1.35}
.track{height:14px; background:var(--rule-2); border-radius:0 3px 3px 0}
.fill{height:14px; background:var(--accent); border-radius:0 3px 3px 0}
.fill.zero{background:var(--flag); width:3px !important; border-radius:0}
.row .pc{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums;
         text-align:right; color:var(--ink2)}
.row.drop .nm{color:var(--ink3); text-decoration:line-through; text-decoration-thickness:1px}
.row.drop .pc{color:var(--flag)}

/* ---- 치수선 형태의 연표 ---- */
.tl{margin:6px 0 30px; overflow-x:auto; padding-bottom:6px}
.tl-inner{min-width:640px; position:relative; padding:52px 0 8px}
.tl-rule{position:relative; height:1px; background:var(--rule); margin:0 8px}
.tl-tick{position:absolute; top:-5px; width:1px; height:11px; background:var(--rule)}
.tl-tick.major{top:-11px; height:23px; background:var(--accent); width:2px}
.tl-lab{position:absolute; top:16px; transform:translateX(-50%);
        font-family:var(--mono); font-size:11px; color:var(--ink3)}
.tl-note{position:absolute; transform:translateX(-50%); text-align:center; width:180px; top:-44px}
.tl-note b{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--accent)}
.tl-note span{font-size:12px; color:var(--ink2); line-height:1.4; display:block; margin-top:2px}
.tl-band{position:absolute; height:5px; background:var(--accent); opacity:.16; top:-2px}
.tl-band.solid{opacity:.5}

.foot{margin-top:64px; padding-top:20px; border-top:1px solid var(--rule);
      font-size:13px; color:var(--ink3); max-width:var(--measure)}
.foot p{font-size:13px; margin-bottom:9px; max-width:none}

@media (prefers-reduced-motion:no-preference){.fill{transition:width .5s ease}}
@media (max-width:600px){
  .row{grid-template-columns:1fr 44px; gap:6px 12px}
  .track{grid-column:1/-1}
  .mast{padding-top:36px}
}