@font-face{
  font-family:"KoPubDotum"; font-style:normal; font-weight:300;
  src:url("fonts/KoPubDotum-Light.woff2") format("woff2"); font-display:swap;
  unicode-range:
    U+1100-11FF,U+2015,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2103,U+2109,
    U+2160-2169,U+2190-2193,U+2260,U+2264-2265,U+2460-2469,U+2500,U+25A0-25A1,
    U+25B2-25B3,U+25C6-25C7,U+25CB,U+25CF,U+2605-2606,U+3000-303F,U+3130-318F,
    U+321C,U+338E-338F,U+3396,U+339C-339E,U+33A1,U+A960-A97F,U+AC00-D7A3,
    U+D7B0-D7FF,U+FF01-FF60;
}
@font-face{
  font-family:"KoPubDotum"; font-style:normal; font-weight:400 500;
  src:url("fonts/KoPubDotum-Medium.woff2") format("woff2"); font-display:swap;
  unicode-range:
    U+1100-11FF,U+2015,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2103,U+2109,
    U+2160-2169,U+2190-2193,U+2260,U+2264-2265,U+2460-2469,U+2500,U+25A0-25A1,
    U+25B2-25B3,U+25C6-25C7,U+25CB,U+25CF,U+2605-2606,U+3000-303F,U+3130-318F,
    U+321C,U+338E-338F,U+3396,U+339C-339E,U+33A1,U+A960-A97F,U+AC00-D7A3,
    U+D7B0-D7FF,U+FF01-FF60;
}
@font-face{
  font-family:"KoPubDotum"; font-style:normal; font-weight:600 700;
  src:url("fonts/KoPubDotum-Bold.woff2") format("woff2"); font-display:swap;
  unicode-range:
    U+1100-11FF,U+2015,U+2018-2019,U+201C-201D,U+2026,U+203B,U+2103,U+2109,
    U+2160-2169,U+2190-2193,U+2260,U+2264-2265,U+2460-2469,U+2500,U+25A0-25A1,
    U+25B2-25B3,U+25C6-25C7,U+25CB,U+25CF,U+2605-2606,U+3000-303F,U+3130-318F,
    U+321C,U+338E-338F,U+3396,U+339C-339E,U+33A1,U+A960-A97F,U+AC00-D7A3,
    U+D7B0-D7FF,U+FF01-FF60;
}

:root{
  
  color-scheme: light;
  color-scheme: only light;

  --paper:   #ffffff;
  --paper-2: #f4f4f1;
  --paper-3: #e9e9e4;
  --ink:     #101014;
  --ink-2:   #4b4b55;
  --ink-3:   #75757f;
  --rule:    #dcdcd6;
  --rule-2:  #b4b4ac;

  --ci-blue:     #005aa8;
  --ci-blue-d:   #00437d;
  --ci-gold:     #8e6808;
  --ci-gold-raw: #ba8a12;

  --inv-bg:    #0e0e12;
  --inv-ink:   #ededea;
  --inv-ink-1: #ffffff;
  --inv-ink-3: #9ea0a8;
  --inv-rule:  #33333c;
  --inv-blue:  #5fa9e8;
  --inv-gold:  #e0a93a;

  
  --wash-blue: rgba(0,90,168,.10);
  --wash-gold: rgba(186,138,18,.13);

  --kor:  "KoPubDotum","Inter Tight",-apple-system,BlinkMacSystemFont,sans-serif;
  --lat:  "Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  
  --u: 0.25rem;

  
  --measure-max: 100%;
  --measure: min(100%, var(--measure-max));

  --rail:   clamp(196px, 15vw, 264px);
  --gutter: clamp(16px, 2.6vw, 48px);
  --shell-max: 1760px;

  --tr-kor-body:  -0.002em;
  --tr-kor-label:  0.04em;
  --tr-lat-label:  0.12em;

  --topbar-h: 46px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  
  font-size:clamp(15px, calc(13.6px + 0.36vw), 20px);
}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--kor); font-weight:400;
  font-size:1rem; line-height:1.82;
  letter-spacing:var(--tr-kor-body);
  word-break:keep-all; overflow-wrap:break-word; text-align:left;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}

:focus-visible{outline:2px solid var(--ci-blue); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

img{max-width:100%; height:auto}
table{width:100%; border-collapse:collapse}

[hidden]{display:none !important}

.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--paper); border-bottom:1px solid var(--ink);
  padding-top:env(safe-area-inset-top);
}

.topbar__inner,
.top .wrap{
  max-width:var(--shell-max); margin:0 auto;
  padding:0 var(--gutter);
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:calc(var(--u)*3);
}
.topbar__inner::before,
.top .wrap::before{                 
  content:""; order:-2; flex:none; width:26px; height:26px;
  background:url("ci/ci-emblem.png") center/contain no-repeat;
}
.topbar__inner::after,
.top .wrap::after{                  
  content:""; order:-1; width:1px; height:18px; background:var(--rule-2); flex:none;
}

.top{background:var(--paper); border-bottom:1px solid var(--ink); padding-top:env(safe-area-inset-top)}

.mark{
  font-family:var(--lat); font-weight:600; font-size:0.8125rem;
  letter-spacing:0.06em; text-transform:uppercase;
  display:flex; align-items:center; gap:calc(var(--u)*1.5);
  min-width:0; overflow:visible;
}
.mark__home,
.mark b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.mark__home{
  display:flex; align-items:center; min-height:44px;
  color:var(--ink); text-decoration:none;
}
.mark__home:hover{color:var(--ci-blue)}
.mark b{
  font-family:var(--kor); font-weight:700; color:var(--ci-blue);
  text-transform:none; letter-spacing:var(--tr-kor-label);
}
.topbar__spacer{flex:1 1 auto; min-width:0}

.mapbtn{
  display:flex; align-items:center; gap:calc(var(--u)*1.5); flex:none;
  min-height:44px; padding:0 calc(var(--u)*2.5);
  background:none; border:1px solid var(--rule); color:var(--ink-2);
  font:inherit; font-size:0.7188rem; letter-spacing:var(--tr-kor-label);
  cursor:pointer;
}
.mapbtn:hover{border-color:var(--ci-blue); color:var(--ci-blue)}
.mapbtn[aria-expanded="true"]{border-color:var(--ci-blue); color:var(--ci-blue); background:var(--paper-2)}

.top{position:relative}
.mappanel{
  position:absolute; left:0; right:0; top:100%;
  
  background:var(--paper); border-bottom:3px solid var(--ink);
  max-height:min(70vh, 560px); overflow-y:auto;
  padding:calc(var(--u)*4) var(--gutter) calc(var(--u)*6);
}

.mappanel .map{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:calc(var(--u)*2)}
.mappanel .mapcard{padding:calc(var(--u)*3) calc(var(--u)*3.5)}
.mappanel .mapcard__hd{font-size:0.8125rem}
.mappanel .mapcard__steps{margin-top:calc(var(--u)*2)}
.counter{font-size:0.75rem; letter-spacing:var(--tr-kor-label); color:var(--ink-3); white-space:nowrap; flex:none}
.counter b{font-family:var(--mono); font-weight:600; color:var(--ink); letter-spacing:0}

.lprog{display:flex; align-items:center; gap:calc(var(--u)*2); white-space:nowrap; flex:none}
.lprog__n{font-family:var(--mono); font-size:0.75rem; font-weight:600; color:var(--ci-gold); letter-spacing:0}
.lprog__t{font-size:0.6875rem; color:var(--ink-3)}
.lprog__bar{display:block; width:4.5rem; height:3px; background:var(--paper-3); overflow:hidden}
.lprog__bar i{display:block; height:100%; background:var(--ci-gold-raw); transition:width .3s}

.shell{
  max-width:var(--shell-max); margin:0 auto;
  display:grid; grid-template-columns:var(--rail) minmax(0,1fr);
}
.wrap{max-width:var(--shell-max); margin:0 auto; padding:0 var(--gutter)}

.side{
  border-right:1px solid var(--rule);
  padding:calc(var(--u)*8) calc(var(--u)*4) calc(var(--u)*12) var(--gutter);
  position:sticky; align-self:start; overflow-y:auto;
  top:calc(var(--topbar-h) + 1px);
  top:calc(var(--topbar-h) + 1px + env(safe-area-inset-top));
  max-height:calc(100vh - var(--topbar-h) - 1px);
  max-height:calc(100dvh - var(--topbar-h) - 1px
                  - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  scrollbar-width:thin;
}
.main{
  padding:calc(var(--u)*8) var(--gutter) calc(var(--u)*24) calc(var(--u)*6);
  min-width:0;
}
.shell > .main:only-child{grid-column:1 / -1; padding-left:var(--gutter)}

.sec,[id]{scroll-margin-top:calc(var(--topbar-h) + env(safe-area-inset-top) + var(--u)*4)}

.side > [data-nav="sidebar"]{display:contents}

.side__label{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ink-3); margin-bottom:calc(var(--u)*2);
}
.side a{
  display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:calc(var(--u)*2);
  align-items:baseline; min-height:44px;               
  padding:calc(var(--u)*2) 0 calc(var(--u)*2) calc(var(--u)*2);
  margin-left:calc(var(--u)*-2); border-left:2px solid transparent;
  border-top:1px solid var(--rule);
  color:var(--ink-2); text-decoration:none;
  font-size:0.8438rem; line-height:1.5; letter-spacing:0;
}
.side a:hover{color:var(--ink); background:var(--paper-2)}
.side__n{
  font-family:var(--mono); font-size:0.6875rem; font-weight:500;
  color:var(--ink-3); letter-spacing:0; text-align:right;
  font-variant-numeric:tabular-nums;
}
.side a.on,
.side a[aria-current="page"]{color:var(--ink); font-weight:700; border-left-color:var(--ci-blue)}
.side a.on .side__n,
.side a[aria-current="page"] .side__n{color:var(--ci-blue)}

.side__steps{margin-left:calc(var(--u)*4); border-left:1px solid var(--rule)}
.side__steps a{
  border-top:0; min-height:36px; font-size:0.7813rem;
  padding-top:calc(var(--u)*1); padding-bottom:calc(var(--u)*1);
  grid-template-columns:1.6rem minmax(0,1fr);
}
.side__steps a.on,
.side__steps a[aria-current="page"]{border-left-color:var(--ci-gold-raw)}
.side__steps a.on .side__n,
.side__steps a[aria-current="page"] .side__n{color:var(--ci-gold)}

.side__mode{margin-left:calc(var(--u)*1.5); white-space:nowrap}

.u-hide{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip{
  position:fixed; top:0; left:0; z-index:60;
  width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip:focus{
  width:auto; height:auto; margin:0; overflow:visible; clip-path:none;
  top:calc(env(safe-area-inset-top) + var(--u)*2);
  left:calc(env(safe-area-inset-left) + var(--u)*2);
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 calc(var(--u)*4);
  background:var(--paper); border:2px solid var(--ci-blue);
  font-family:var(--kor); font-size:0.8125rem; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); text-decoration:none;
}

.side .ltoc{
  margin-top:calc(var(--u)*6); padding-top:calc(var(--u)*4);
  border-top:1px solid var(--rule-2);
}
.side .ltoc__label{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ink-3); margin-bottom:calc(var(--u)*2);
}
.side .ltoc a{
  display:block; border:0; margin:0; min-height:0;
  padding:calc(var(--u)*1.5) 0; background:none;
  font-size:0.75rem; line-height:1.5; color:var(--ink-3); text-decoration:none;
}
.side .ltoc a:hover{color:var(--ci-blue); background:none}

.side .ltoc a.ltoc__top{
  display:flex; gap:calc(var(--u)*2); font-weight:700; color:var(--ink-2);
}

.side .ltoc__n,
.side .ltoc__hn{
  font-family:var(--mono); font-size:0.625rem; font-weight:500;
  color:var(--ink-3); letter-spacing:0; flex:none;
}
.side .ltoc__hn{margin-right:calc(var(--u)*1.5)}
.side .ltoc__subs{
  padding-left:calc(var(--u)*4); border-left:1px solid var(--rule);
  margin:calc(var(--u)*0.5) 0 calc(var(--u)*1.5);
}
.side .ltoc__subs a{font-size:0.6875rem; padding:calc(var(--u)*0.75) 0}
.side .ltoc a.on{color:var(--ci-blue); font-weight:700}
.side .ltoc a.on .ltoc__n,
.side .ltoc a.on .ltoc__hn{color:var(--ci-blue)}

.hero{
  position:relative; overflow:hidden; border-bottom:3px solid var(--ink);
  padding:calc(var(--u)*6) 0 calc(var(--u)*7); margin-bottom:calc(var(--u)*12);
}

.hero[data-n]::after{
  content:attr(data-n); position:absolute; right:0; top:calc(var(--u)*2);
  font-family:var(--mono); font-weight:500;
  font-size:clamp(64px, 10vw, 152px); line-height:.8;
  color:var(--paper-3); letter-spacing:-0.04em; pointer-events:none; user-select:none;
}
.hero > *{position:relative; z-index:1}
.eyebrow{
  font-size:0.7813rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); margin-bottom:calc(var(--u)*4);
}
.hero h1{
  font-size:clamp(1.75rem, 1.2rem + 2.1vw, 3rem); line-height:1.22;
  font-weight:700; letter-spacing:-0.022em; margin:0 0 calc(var(--u)*2); max-width:20ch;
}
.hero__en{font-family:var(--lat); font-size:0.9375rem; letter-spacing:0.01em; color:var(--ink-2); margin:0 0 calc(var(--u)*5)}
.lede,.hero__lead{
  font-size:1.0625rem; line-height:1.78; color:var(--ink-2);
  margin:calc(var(--u)*2) 0 calc(var(--u)*5); max-width:var(--measure);
}
.hero__meta{display:flex; flex-wrap:wrap; gap:calc(var(--u)*2)}
.chip{
  font-size:0.75rem; letter-spacing:0.01em; line-height:1.5;
  padding:calc(var(--u)*1) calc(var(--u)*2.5);
  border:1px solid var(--rule-2); color:var(--ink-2);
  min-width:0; overflow-wrap:break-word;
}

.chip--todo{border-style:dashed; border-color:var(--ci-gold-raw); color:var(--ci-gold)}

.sec{
  border-top:1px solid var(--rule); padding-top:calc(var(--u)*6); margin-bottom:calc(var(--u)*16);
  display:grid; grid-template-columns:56px minmax(0,1fr); gap:0 calc(var(--u)*6);
}
.sec--stage   {border-top-width:3px; border-top-color:var(--ink)}
.sec--concept {border-top-width:1px; border-top-color:var(--ink)}
.sec--practice{border-top-width:3px; border-top-color:var(--ci-gold-raw)}
.sec--ref     {border-top-style:dashed; border-top-color:var(--rule-2)}

.sec__n{
  grid-row:1/999; font-family:var(--mono); font-size:0.8125rem; font-weight:600;
  letter-spacing:0.06em; color:var(--ci-blue);
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(var(--u)*2);
  position:sticky; top:calc(var(--topbar-h) + var(--u)*7); align-self:start;
  user-select:none;
}
.sec--practice .sec__n{color:var(--ci-gold)}
.sec--ref .sec__n{color:var(--ink-3)}

.sec > *{min-width:0}
.sec > *:not(.sec__n){grid-column:2}
.sec h2{font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem); font-weight:700; letter-spacing:-0.018em; line-height:1.4; margin:0 0 calc(var(--u)*6)}
.sec--ref > h2{font-size:clamp(1.0625rem,.95rem + .4vw,1.25rem); color:var(--ink-2)}
.sec h3{
  font-size:1rem; font-weight:700; letter-spacing:-0.012em;
  margin:calc(var(--u)*11) 0 calc(var(--u)*4);
  padding-top:calc(var(--u)*3); border-top:1px solid var(--rule);
  display:flex; align-items:baseline; gap:calc(var(--u)*3); flex-wrap:wrap;
}

.hn{
  font-family:var(--mono); font-style:normal; font-weight:500; font-size:0.6875rem;
  letter-spacing:0.08em; color:var(--ci-blue); flex:none; min-width:2.6rem;
}
.sec h4{font-size:0.9063rem; font-weight:700; margin:calc(var(--u)*6) 0 calc(var(--u)*2)}
.sec p{margin:0 0 calc(var(--u)*4); max-width:var(--measure)}
.sec > ul,.sec > ol{margin:0 0 calc(var(--u)*5); padding-left:0; list-style:none; max-width:var(--measure)}
.sec > ul > li,.sec > ol > li{position:relative; padding-left:calc(var(--u)*5); margin-bottom:calc(var(--u)*2)}
.sec > ul > li::before{content:""; position:absolute; left:0; top:.82em; width:calc(var(--u)*3); height:1px; background:var(--ink-3)}
.sec > ol{counter-reset:oli}
.sec > ol > li{counter-increment:oli}
.sec > ol > li::before{
  content:counter(oli); position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:0.6875rem; font-weight:500; color:var(--ci-blue);
}

mark{background:none; color:inherit; font-weight:700; box-shadow:inset 0 -0.4em 0 var(--wash-gold); padding:0 .08em}

em{font-family:var(--kor); font-style:normal; font-size:.88em; letter-spacing:0.02em}
b,strong{font-weight:700}
sup{font-family:var(--mono); font-size:.6em; vertical-align:super; color:var(--ci-blue)}

code{font-family:var(--mono); font-size:.88em; background:var(--paper-2); padding:0 .3em; letter-spacing:0; word-break:break-all}
a{color:var(--ci-blue)}
a:hover{color:var(--ci-blue-d)}

.kp{
  position:relative; list-style:none; margin:0 0 calc(var(--u)*2);
  padding:calc(var(--u)*2) 0 calc(var(--u)*2) calc(var(--u)*7); max-width:var(--measure);
}
.kp::before{content:""; position:absolute; left:calc(var(--u)*2); top:0; bottom:0; width:1px; background:var(--rule)}
.kp li{position:relative; margin-bottom:calc(var(--u)*1.5)}
.kp li::before{content:""; position:absolute; top:.85em; height:1px}
.kp li[data-l="0"]{font-size:0.9688rem; font-weight:500; margin-top:calc(var(--u)*3)}
.kp li[data-l="0"]::before{left:calc(var(--u)*-5); width:calc(var(--u)*3.5); height:2px; background:var(--ink)}
.kp li[data-l="1"]{font-size:0.9063rem; font-weight:400; padding-left:calc(var(--u)*4)}
.kp li[data-l="1"]::before{left:calc(var(--u)*-3); width:calc(var(--u)*5); background:var(--rule-2)}

.kp li[data-l="2"]{font-size:0.875rem; font-weight:300; padding-left:calc(var(--u)*8); color:var(--ink-2); line-height:1.75}
.kp li[data-l="2"]::before{left:calc(var(--u)*1); width:calc(var(--u)*5); background:var(--rule)}
.kp li[data-l="0"]:first-child{margin-top:0}
.kp li b{font-weight:700; color:var(--ink)}
.kp li[data-l="0"] b{color:var(--ci-blue)}
.kp li em{color:var(--ci-gold); font-weight:500}

.kp__src{
  font-size:0.7188rem; letter-spacing:0; color:var(--ink-3);
  margin:0 0 calc(var(--u)*8) calc(var(--u)*7)!important;
  padding-top:calc(var(--u)*1.5); border-top:1px solid var(--rule); max-width:var(--measure);
}

.pit{
  border-left:3px solid var(--ci-gold-raw); background:var(--paper-2);
  padding:calc(var(--u)*4) calc(var(--u)*5); margin:calc(var(--u)*5) 0; max-width:var(--measure);
}
.pit b{font-weight:700}
.pit > b:first-child{
  display:block; font-size:0.75rem; letter-spacing:var(--tr-kor-label);
  color:var(--ci-gold); margin-bottom:calc(var(--u)*2);
}
.pit p{margin:0 0 calc(var(--u)*1.5)!important; font-size:0.9063rem; line-height:1.78; max-width:none}
.pit p:last-child{margin-bottom:0!important}

.sr{border:1px solid var(--ink); margin:calc(var(--u)*5) 0 calc(var(--u)*8); max-width:var(--measure)}
.sr__hd{
  font-size:0.7813rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  background:var(--ink); color:var(--paper); padding:calc(var(--u)*2.5) calc(var(--u)*4);
}
.sr ul{margin:0; padding:calc(var(--u)*4) calc(var(--u)*5) calc(var(--u)*4) calc(var(--u)*9); list-style:none}
.sr li{position:relative; margin-bottom:calc(var(--u)*2.5); font-size:0.9063rem}
.sr li:last-child{margin-bottom:0}
.sr li::before{content:""; position:absolute; left:calc(var(--u)*-4); top:.85em; width:calc(var(--u)*2.5); height:2px; background:var(--ci-gold)}

.sec--practice .sr{background:var(--inv-bg); border-color:var(--inv-bg); color:var(--inv-ink)}
.sec--practice .sr .sr__hd{background:none; color:var(--inv-gold); border-bottom:1px solid var(--inv-rule); padding-bottom:calc(var(--u)*3)}
.sec--practice .sr li{color:var(--inv-ink); font-weight:400; line-height:1.88}
.sec--practice .sr li b{color:var(--inv-ink-1); font-weight:700}
.sec--practice .sr li::before{background:var(--inv-gold)}
.sec--practice .sr a{color:var(--inv-blue)}
.sec--practice .sr code{background:var(--inv-rule); color:var(--inv-ink-1)}

.sec--practice .sr ~ .sr{background:var(--paper); border-color:var(--ink); color:var(--ink)}
.sec--practice .sr ~ .sr .sr__hd{background:var(--ink); color:var(--paper); border-bottom:0; padding-bottom:calc(var(--u)*2.5)}
.sec--practice .sr ~ .sr li{color:var(--ink); line-height:1.82}
.sec--practice .sr ~ .sr li b{color:var(--ink)}
.sec--practice .sr ~ .sr li::before{background:var(--ci-gold)}
.sec--practice .sr ~ .sr a{color:var(--ci-blue)}
.sec--practice .sr ~ .sr code{background:var(--paper-2); color:var(--ink-2)}

.fig{margin:calc(var(--u)*6) 0; max-width:100%}
.fig img{width:100%; height:auto; display:block; border:1px solid var(--rule)}

.fig figcaption,.fig__cap{
  font-size:0.7188rem; line-height:1.75; letter-spacing:0; color:var(--ink-3);
  margin:calc(var(--u)*2) 0 0; padding-top:calc(var(--u)*1.5); border-top:1px solid var(--rule);
  max-width:none;
}

.sec > p.fig__cap{margin:0 0 calc(var(--u)*5); border-top:0; padding-top:0; border-left:2px solid var(--rule); padding-left:calc(var(--u)*3)}
.sec > p.fig__cap b{font-family:var(--mono); font-size:0.625rem; font-weight:600; letter-spacing:0.06em; color:var(--ci-gold)}
.sec > p.fig__none{font-family:var(--mono); font-size:0.6875rem; color:var(--ink-3); margin:0 0 calc(var(--u)*5)}

.fig__ph{border:1px dashed var(--rule-2); background:var(--paper-2); min-height:6rem; display:grid; place-items:center; color:var(--ink-3); font-size:0.75rem}

.figtext{
  max-width:var(--measure); overflow-x:auto;
  font-family:var(--mono); font-size:0.7813rem; line-height:1.75; color:var(--ink-2);
  background:var(--paper-2); border-left:3px solid var(--ci-blue);
  padding:calc(var(--u)*4); margin:0 0 calc(var(--u)*5);
}

.note{
  border-left:2px solid var(--ci-blue); padding:calc(var(--u)*0.5) 0 calc(var(--u)*0.5) calc(var(--u)*4);
  margin:calc(var(--u)*4) 0; color:var(--ink-2); font-size:0.9063rem; max-width:var(--measure);
}
.quote{
  border-left:3px solid var(--ci-gold-raw); padding:calc(var(--u)*1) 0 calc(var(--u)*1) calc(var(--u)*4.5);
  margin:calc(var(--u)*5) 0; color:var(--ink); font-size:1.0625rem; line-height:1.85; max-width:var(--measure);
}
.notes{margin:0; padding-left:calc(var(--u)*5); max-width:var(--measure)}
.notes li{font-size:0.7813rem; line-height:1.75; color:var(--ink-3); margin-bottom:calc(var(--u)*1)}

.cover{
  display:block; width:100%; max-width:200px; margin:0;
  text-decoration:none; color:var(--ink-3);
}
.cover img{display:block; width:100%; height:auto; border:1px solid var(--rule)}

.cover__cap{
  display:block; margin-top:calc(var(--u)*2);
  font-size:0.7188rem; line-height:1.75; letter-spacing:0; color:var(--ink-3);
  word-break:keep-all; text-align:left;
}

a.cover .cover__cap{color:var(--ci-blue)}
a.cover:hover .cover__cap{text-decoration:underline}

.hero--book{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(96px,22%,200px);
  gap:calc(var(--u)*6) calc(var(--u)*8); align-items:start;
}
.hero--book .cover{max-width:none}
.hero__text{min-width:0}

.ct__study{border-top:1px solid var(--rule); padding-top:calc(var(--u)*4); margin-bottom:calc(var(--u)*8); max-width:var(--measure)}
.ct__study h4{font-size:1rem; font-weight:700; margin:0 0 calc(var(--u)*3)}
.ct__meta{font-family:var(--mono); font-size:0.6875rem; letter-spacing:var(--tr-lat-label); color:var(--ci-blue); margin-bottom:calc(var(--u)*3)}

.ct__fig,.ct__src{font-size:0.7188rem; color:var(--ink-3); letter-spacing:0; line-height:1.75}
.ct__fig{border-left:2px solid var(--rule); padding-left:calc(var(--u)*3)}
.ct__src{word-break:break-all}
.sec > p.ct__src{font-size:0.7188rem; color:var(--ink-3)}

.pill{
  display:inline-flex; align-items:baseline; gap:calc(var(--u)*2);
  border:1px solid var(--rule-2); padding:calc(var(--u)*1.5) calc(var(--u)*3);
  margin:0 calc(var(--u)*1.5) calc(var(--u)*1.5) 0;
  text-decoration:none; color:var(--ink); font-size:0.8125rem; font-weight:400;
  max-width:100%;
}
a.pill:hover{border-color:var(--ci-blue); color:var(--ci-blue); background:var(--paper-2)}

.pill b{font-family:var(--kor); font-size:0.6875rem; letter-spacing:var(--tr-kor-label); font-weight:600; color:var(--ci-blue); flex:none}
.pill small{color:var(--ink-3); font-size:0.6875rem}

.kobox{
  background:var(--paper); border:1px solid var(--ink); border-left:4px solid var(--ci-gold-raw);
  padding:0; margin:calc(var(--u)*8) 0; max-width:var(--measure);
}
.kobox__hd{
  background:var(--inv-bg); color:var(--inv-ink-1);
  font-size:0.8125rem; font-weight:700; letter-spacing:0.02em;
  padding:calc(var(--u)*3) calc(var(--u)*5);
}
.kobox p{color:var(--ink); font-size:0.9063rem; line-height:1.88; margin:0 calc(var(--u)*5) calc(var(--u)*4); max-width:none}
.kobox p:first-of-type{margin-top:calc(var(--u)*5)}

.kobox__src{
  font-size:0.7188rem!important; letter-spacing:0!important; color:var(--ink-2)!important;
  margin:0!important; padding:calc(var(--u)*3) calc(var(--u)*5)!important;
  border-top:1px solid var(--rule); background:var(--paper-2);
}

.kobox__src .exlink{font-size:inherit; word-break:break-all}

.kobox__src .exlink__tag{color:var(--ink-2); word-break:keep-all}

.full{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin:calc(var(--u)*6) 0; max-width:var(--measure)}
.full>summary{
  cursor:pointer; list-style:none; font-size:0.7813rem; font-weight:700;
  letter-spacing:var(--tr-kor-label); padding:calc(var(--u)*3.5) 0; color:var(--ink-2);
  display:flex; justify-content:space-between; align-items:center; min-height:44px;
}
.full>summary::-webkit-details-marker{display:none}
.full>summary::after{content:"＋"; color:var(--ci-blue); font-size:0.875rem}
.full[open]>summary::after{content:"−"}
.full>summary:hover{color:var(--ink)}
.full[open]>summary{border-bottom:1px solid var(--rule); margin-bottom:calc(var(--u)*5)}
.full p{font-size:0.9063rem; font-weight:300; color:var(--ink-2); max-width:none}
.full h3{font-size:0.9063rem; border-top:0; padding-top:0; margin-top:calc(var(--u)*7)}
.full .fig{max-width:none}

.cases{display:grid; gap:calc(var(--u)*3); margin:calc(var(--u)*5) 0 calc(var(--u)*2); max-width:var(--measure)}
.case{border:1px solid var(--rule); background:var(--paper)}
.case[open]{border-color:var(--rule-2)}
.case__btn{
  cursor:pointer; list-style:none; font:inherit; color:inherit;
  padding:calc(var(--u)*4) calc(var(--u)*5); min-height:44px;
  display:flex; gap:calc(var(--u)*4); align-items:flex-start;
}
.case__btn::-webkit-details-marker{display:none}
.case__btn:hover{background:var(--paper-2)}
.case__tag{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  border:1px solid var(--rule-2); color:var(--ink-3);
  padding:0 calc(var(--u)*1.5); flex:none; margin-top:.2em; white-space:nowrap;
}
.case__tag.a{border-color:var(--ci-gold-raw); color:var(--ci-gold)}
.case__t{flex:1 1 auto; min-width:0}
.case__t strong{display:block; font-weight:700; font-size:0.9688rem; line-height:1.5}
.case__t span{display:block; font-size:0.8125rem; color:var(--ink-3); line-height:1.6}
.case__x{font-family:var(--mono); color:var(--ink-3); flex:none; transition:transform .3s}
.case[open] .case__x{transform:rotate(45deg); color:var(--ci-gold)}
.case__body{padding:0 calc(var(--u)*5) calc(var(--u)*5); border-top:1px solid var(--rule)}
.case__body dl{margin:calc(var(--u)*4) 0 calc(var(--u)*4); font-size:0.875rem}
.case__body dt{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); margin-top:calc(var(--u)*3);
}
.case__body dd{margin:calc(var(--u)*0.5) 0 0}
.case__body .slot{margin-top:calc(var(--u)*4)}

.slot{
  border:1px dashed var(--rule-2); padding:calc(var(--u)*4);
  font-size:0.8125rem; line-height:1.75; color:var(--ink-2); max-width:var(--measure);
}

.warn{
  border-left:2px solid var(--ci-gold-raw); padding-left:calc(var(--u)*4);
  margin:calc(var(--u)*4) 0 0; max-width:var(--measure);
  font-size:0.8125rem; line-height:1.75; color:var(--ink-2);
}
.empty{color:var(--ink-3); font-size:0.875rem; margin:0}

.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-top:calc(var(--u)*12);
}
.pager a{
  background:var(--paper); padding:calc(var(--u)*5); text-decoration:none;
  color:var(--ink); display:block; min-height:44px;
  font-size:0.9375rem; letter-spacing:-0.012em;
}
.pager a:hover{background:var(--paper-2)}
.pager a:last-child{text-align:right}
.pager span{display:block; background:var(--paper)}

.pager b{
  font-family:var(--kor); font-size:0.6875rem; font-weight:600;
  letter-spacing:var(--tr-kor-label); color:var(--ci-blue); margin:0 calc(var(--u)*2);
}

.foot{border-top:1px solid var(--ink); margin-top:calc(var(--u)*12); padding-bottom:env(safe-area-inset-bottom)}
.foot__inner{
  max-width:var(--shell-max); margin:0 auto;
  padding:calc(var(--u)*9) var(--gutter) calc(var(--u)*12);
  display:grid; gap:calc(var(--u)*2); font-size:0.8125rem; color:var(--ink-2);
}
.foot__inner::before{
  content:""; display:block; width:180px; height:38px; margin-bottom:calc(var(--u)*5);
  background:url("ci/ci-full.png") left center/contain no-repeat;
}
.foot p{margin:0}
.foot__id{display:flex; gap:calc(var(--u)*3); align-items:baseline; flex-wrap:wrap}
.foot__id b{font-family:var(--lat); font-size:0.8125rem; letter-spacing:0.04em; color:var(--ink); font-weight:600}

.foot__id span{font-family:var(--kor); font-size:0.7188rem; color:var(--ink-3); letter-spacing:0}
.foot__note{font-size:0.7188rem; letter-spacing:0; color:var(--ink-3); max-width:var(--measure)}
.foot__asan{font-size:0.7188rem; letter-spacing:0; color:var(--ink-3); max-width:var(--measure)}

.foot__about{
  display:inline-flex; align-items:center; min-height:44px; justify-self:start;
  font-size:0.8125rem; color:var(--ci-blue);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}

.exlink{font-family:inherit; font-size:0.9375rem; text-decoration:none; border-bottom:1px solid var(--ci-blue)}
.exlink__tag{
  display:inline-block; margin-left:calc(var(--u)*2);
  font-size:0.6875rem; letter-spacing:var(--tr-kor-label); color:var(--ink-3);
  border:1px solid var(--rule); padding:0 calc(var(--u)*1.5); vertical-align:1px;
}

.wk + .wk{border-top:1px solid var(--rule); margin-top:calc(var(--u)*5); padding-top:calc(var(--u)*4)}
.wk .wk__hd{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:calc(var(--u)*0.5) calc(var(--u)*3);
  margin:0 0 calc(var(--u)*2.5); border-top:0; padding-top:0;
}
.wk .wk__hd a{color:var(--ink); text-decoration:none}
.wk .wk__hd a:hover{color:var(--ci-blue)}

.wk .wk__hd b{
  font-family:var(--kor); font-size:0.7813rem; font-weight:600; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); margin-right:calc(var(--u)*2.5);
}

.wk__mode{font-family:var(--kor); font-size:0.7188rem; color:var(--ink-3); white-space:nowrap}
.wk .wk__guest{
  margin:calc(var(--u)*2.5) 0 0; font-size:0.7813rem; line-height:1.65; color:var(--ink-3);
  border-left:1px solid var(--rule); padding-left:calc(var(--u)*3);
}
.wk .wk__guest b{font-family:var(--kor); font-size:0.7188rem; font-weight:700; color:var(--ci-blue); margin-right:calc(var(--u)*2)}

.wk .wk__guest i{font-style:normal; font-family:var(--kor); font-size:0.7188rem; margin-left:calc(var(--u)*2)}
.wk .empty{margin:0}
.wk__steps{display:flex; flex-wrap:wrap; gap:0; margin-top:calc(var(--u)*1)}

.pill__req{
  font-style:normal; font-family:var(--kor); font-size:0.6875rem; font-weight:700;
  letter-spacing:var(--tr-kor-label); color:var(--ci-gold);
  border:1px solid var(--ci-gold-raw); padding:0 calc(var(--u)*1.25);
  margin-left:calc(var(--u)*2); vertical-align:1px; white-space:nowrap;
}
.sec > .wk__legend{
  margin:0 0 calc(var(--u)*5); font-size:0.7813rem; line-height:1.9;
  color:var(--ink-3); max-width:var(--measure);
}
.sec > .wk__legend b{font-weight:700; color:var(--ink-2)}
.sec > .wk__legend .pill__req{margin-left:0; margin-right:calc(var(--u)*0.5)}

.ops{
  display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  max-width:var(--measure); margin:0 0 calc(var(--u)*4);
}
.ops > div{background:var(--paper); padding:calc(var(--u)*3) calc(var(--u)*3.5)}
.ops i{
  display:block; font-style:normal; font-size:0.6875rem;
  letter-spacing:var(--tr-kor-label); color:var(--ink-3); margin-bottom:calc(var(--u)*1);
}
.ops b{font-size:0.9375rem; font-weight:700; color:var(--ink)}

.todo{max-width:var(--measure); margin:0 0 calc(var(--u)*3); padding:0; list-style:none}
.todo li{
  font-size:0.75rem; color:var(--ink-3); position:relative;
  padding:calc(var(--u)*1.75) 0 calc(var(--u)*1.75) calc(var(--u)*4.5);
  border-bottom:1px dashed var(--rule);
}
.todo li::before{content:"□"; position:absolute; left:0; color:var(--ink-3)}

.toc{max-width:var(--measure); margin:0 0 calc(var(--u)*5); padding-left:0; list-style:none; counter-reset:toci}
.toc li{
  position:relative; counter-increment:toci;
  padding-left:calc(var(--u)*6); margin-bottom:calc(var(--u)*1);
  font-size:0.875rem; line-height:1.7; color:var(--ink-2);
}
.toc li::before{
  content:counter(toci); position:absolute; left:0; top:.1em;
  font-family:var(--mono); font-size:0.6875rem; font-weight:500; color:var(--ci-blue);
}
.more{max-width:var(--measure); margin:calc(var(--u)*5) 0 0; padding-top:calc(var(--u)*3); border-top:1px solid var(--rule)}
.more a{font-size:0.8438rem; font-weight:700}

.map{display:grid; gap:calc(var(--u)*3); grid-template-columns:repeat(auto-fill,minmax(20rem,1fr))}
.mapcard{border:1px solid var(--rule); background:var(--paper); padding:calc(var(--u)*4) calc(var(--u)*4.5)}
.mapcard:hover{border-color:var(--rule-2)}
.mapcard__hd{display:block; font-size:0.9375rem; font-weight:700; line-height:1.45; color:var(--ink); text-decoration:none}

.mapcard__hd b{
  display:block; font-family:var(--kor); font-size:0.6875rem; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); font-weight:600; margin-bottom:calc(var(--u)*1);
}
.mapcard__hd:hover{color:var(--ci-blue)}
.mapcard__meta{font-size:0.7188rem; color:var(--ink-3); margin-top:calc(var(--u)*2)}
.mapcard__steps{display:flex; flex-wrap:wrap; margin-top:calc(var(--u)*3)}

[data-check]{margin:calc(var(--u)*5) 0}
.lcheck{
  display:inline-flex; align-items:center; gap:calc(var(--u)*2); cursor:pointer;
  font-size:0.7813rem; color:var(--ink-3); min-height:44px;
  border:1px solid var(--rule); padding:calc(var(--u)*1.5) calc(var(--u)*3.5);
}
.lcheck input{width:15px; height:15px; accent-color:var(--ci-blue); cursor:pointer}
[data-check].on .lcheck{border-color:var(--ci-blue); color:var(--ci-blue); background:var(--paper-2)}

header.h{padding:calc(var(--u)*10) 0 calc(var(--u)*5)}
.eb{
  font-size:0.7813rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); margin-bottom:calc(var(--u)*4);
}
header.h h1{
  font-size:clamp(1.75rem,1.2rem + 2.1vw,3rem); line-height:1.22; font-weight:700;
  letter-spacing:-0.022em; margin:0 0 calc(var(--u)*4);
}
p.l{max-width:var(--measure); margin:0 0 calc(var(--u)*3); color:var(--ink-2)}

.legend{display:flex; flex-wrap:wrap; gap:calc(var(--u)*4); margin-top:calc(var(--u)*5); font-size:0.8125rem; color:var(--ink-3); align-items:center}
.lg{display:flex; gap:calc(var(--u)*2); align-items:center}
.sw{
  width:19px; height:19px; flex:none; display:grid; place-items:center;
  font-family:var(--mono); font-size:0.625rem; font-weight:600; letter-spacing:0;
}
.sw.a{background:var(--ci-gold-raw); color:var(--ink)}
.sw.b{background:var(--wash-blue); color:var(--ink)}
.sw.c{background:var(--paper-3); color:var(--ink-2)}   
.sw.x{background:var(--paper); border:1px solid var(--rule)}

.scroll{overflow-x:auto; padding-bottom:calc(var(--u)*1.5); border-top:1px solid var(--ink); margin-top:calc(var(--u)*6)}
.scroll table{border-collapse:separate; border-spacing:0; font-size:0.8125rem; width:auto; min-width:100%}
.scroll th,.scroll td{padding:0}

.scroll .rh{
  position:sticky; left:0; background:var(--paper); z-index:2; text-align:left; min-width:14rem;
  padding:calc(var(--u)*1.5) calc(var(--u)*3.5) calc(var(--u)*1.5) 0;
  border-bottom:1px solid var(--rule); vertical-align:middle;
}
.scroll .rh b{display:block; font-weight:700; font-size:0.8438rem; line-height:1.35}

.scroll .rh b i{
  font-style:normal; font-family:var(--kor); font-size:0.5938rem; letter-spacing:var(--tr-kor-label);
  color:var(--ink-3); border:1px solid var(--rule); padding:1px calc(var(--u)*1);
  margin-left:calc(var(--u)*1.5); vertical-align:1px;
}
.scroll .rh span{display:block; font-size:0.7188rem; color:var(--ink-3); line-height:1.4}

.scroll tr.band .rh{background:var(--paper-3); border-top:2px solid var(--ink); border-bottom:1px solid var(--rule-2); padding:calc(var(--u)*2.5) calc(var(--u)*3.5) calc(var(--u)*2.5) calc(var(--u)*3)}
.scroll tr.band .rh b{font-size:0.75rem; letter-spacing:var(--tr-kor-label)}
.scroll tr.band .rh span{color:var(--ink-2); font-size:0.6875rem}  
.scroll tr.band td{background:var(--paper-3); border-top:2px solid var(--ink); border-bottom:1px solid var(--rule-2)}

.scroll .wh{
  font-family:var(--kor); font-size:0.625rem; font-weight:500; color:var(--ink-3); letter-spacing:0;
  padding:calc(var(--u)*2) 0 calc(var(--u)*1.25);
  border-bottom:1px solid var(--rule); border-left:1px solid var(--rule);
}
.scroll .sh{
  font-family:var(--mono); font-size:0.6875rem; color:var(--ink-3); font-weight:400; letter-spacing:0;
  padding:calc(var(--u)*1.25) 0 calc(var(--u)*2);
  border-bottom:1px solid var(--ink); width:31px;
}

.scroll .c{
  width:31px; height:30px; text-align:center;
  font-family:var(--mono); font-size:0.6875rem; font-weight:600; letter-spacing:0;
  border-bottom:1px solid var(--paper-2); border-right:1px solid var(--paper-2);
}
.scroll .c-a{background:var(--ci-gold-raw); color:var(--ink)}
.scroll .c-b{background:var(--wash-blue); color:var(--ink)}
.scroll .c-c{background:var(--paper-3); color:var(--ink-3)}
.scroll .c-x{background:var(--paper); color:transparent}
.scroll tbody tr:not(.band){cursor:pointer}
.scroll tbody tr:not(.band):hover .c-x{background:var(--paper-2)}
.scroll tbody tr:not(.band):hover .rh{color:var(--ci-blue)}
.scroll .sc{
  font-family:var(--mono); font-size:0.8125rem; font-weight:600; color:var(--ci-gold);
  text-align:center; padding-left:calc(var(--u)*3);
  border-bottom:1px solid var(--paper-2); min-width:2.6rem;
}

.det{
  background:var(--paper); border:1px solid var(--ink);
  padding:calc(var(--u)*6); margin:calc(var(--u)*7) 0 calc(var(--u)*15); min-height:7rem;
}
.det h2{margin:0 0 calc(var(--u)*1); font-size:1.25rem; font-weight:700; letter-spacing:-0.018em}
.det .d{color:var(--ink-3); font-size:0.8438rem; margin-bottom:calc(var(--u)*4)}
.grp{margin-bottom:calc(var(--u)*4)}
.gl{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ci-gold); margin-bottom:calc(var(--u)*2);
}
.det .warn{margin-top:calc(var(--u)*4)}

.ico{
  display:inline-block; flex:none; vertical-align:-.15em;
  width:15px; height:15px;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--sec{width:18px; height:18px; opacity:.75}
.ico--btn{width:13px; height:13px; vertical-align:baseline}
.ico--stat{width:13px; height:13px; color:var(--ink-3)}
.ico--tag{width:11px; height:11px; margin-right:calc(var(--u)*1); vertical-align:-.1em}
.ico--mode{width:13px; height:13px; margin-right:calc(var(--u)*1)}
.wk__mode .ico--mode:last-of-type{margin-right:calc(var(--u)*1.5)}
.side__mode .ico{width:12px; height:12px; margin-right:3px}
.side__mode .ico:last-of-type{margin-right:0}

.w1__btn{
  font:inherit; font-family:var(--kor); font-size:0.7188rem; font-weight:500;
  letter-spacing:var(--tr-kor-label); line-height:1.4;
  background:var(--paper); border:1px solid var(--rule-2); color:var(--ink-2);
  padding:calc(var(--u)*1.5) calc(var(--u)*3); cursor:pointer; min-height:28px;
  max-width:100%;
}
.w1__btn:hover{border-color:var(--ci-blue); color:var(--ci-blue)}
.w1__btn.done{border-color:var(--ci-gold-raw); color:var(--ci-gold)}
.w1__btn[disabled]{opacity:.4; cursor:default}

.btn__t{white-space:normal; min-width:0}

.copy{
  font:inherit; font-family:var(--kor); font-size:0.6875rem; font-weight:600;
  letter-spacing:var(--tr-kor-label);
  background:none; border:1px solid var(--rule-2); color:var(--ink-2);
  padding:calc(var(--u)*1) calc(var(--u)*3); cursor:pointer;
}
.copy:hover{border-color:var(--ci-blue); color:var(--ci-blue)}
.copy.done{border-color:var(--ci-gold-raw); color:var(--ci-gold)}
.copy[disabled]{opacity:.35; cursor:default}

textarea,input[type=text],input[type=number]{font-family:var(--kor); letter-spacing:var(--tr-kor-body)}
::placeholder{color:var(--ink-3); opacity:1}

input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:2px; background:var(--rule-2)}
input[type=range]::-moz-range-track{height:2px; background:var(--rule-2)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; border-radius:50%;
  background:var(--ci-blue); margin-top:-6.5px; border:none;
}
input[type=range]::-moz-range-thumb{width:15px; height:15px; border-radius:50%; background:var(--ci-blue); border:none}

[data-widget],[data-anim]{max-width:var(--measure)}

.anim{border:1px solid var(--rule); background:var(--paper); margin:calc(var(--u)*5) 0}
.anim__hd{
  display:flex; align-items:baseline; gap:calc(var(--u)*2.5); flex-wrap:wrap;
  padding:calc(var(--u)*3) calc(var(--u)*4);
  border-bottom:1px solid var(--rule); background:var(--paper-2);
}
.anim__hd b{font-size:0.8438rem; font-weight:700; color:var(--ink)}

.anim__hd i{font-style:normal; font-size:0.6875rem; color:var(--ink-2)}
.anim__stage{padding:calc(var(--u)*4); display:flex; flex-direction:column; gap:calc(var(--u)*1.5); min-height:9rem}
.anim--steps .anim__stage{gap:calc(var(--u)*2)}

.anode{
  opacity:0; transform:translateY(6px);
  border-left:2px solid var(--rule); padding:calc(var(--u)*1.75) calc(var(--u)*3);
  background:var(--paper-2);
}
.anode.on{opacity:1; transform:none; transition:opacity .35s ease,transform .35s ease}
.anode.new{border-left-color:var(--ci-gold-raw); background:var(--wash-gold)}

.anode i{
  display:block; font-style:normal; font-family:var(--kor); font-size:0.5938rem;
  letter-spacing:var(--tr-kor-label); color:var(--ci-blue); margin-bottom:calc(var(--u)*0.5);
}

.anode b{display:block; font-size:0.8438rem; font-weight:700; line-height:1.5; color:var(--ink)}
.anode span{display:block; font-size:0.75rem; line-height:1.75; color:var(--ink-2); margin-top:calc(var(--u)*0.75)}

.anode--l1{margin-left:1.1rem}
.anode--l2{margin-left:2.2rem}
.anode--l3{margin-left:3.3rem}
.anode--l4{margin-left:4.4rem}
.anode--l5{margin-left:5.5rem}

.anim--chart .anim__stage{display:block; padding:calc(var(--u)*3.5) calc(var(--u)*2.5) calc(var(--u)*1.5); overflow-x:auto}
.achart__svg{display:block; width:100%; height:auto; overflow:visible}
.anim--chart .achart__svg{min-width:560px}
.achart__grid{stroke:var(--rule); stroke-width:1}
.achart__tick{font-family:var(--mono); font-size:10.5px; fill:var(--ink-3); text-anchor:middle}
.achart__tick--y{text-anchor:end}

.achart__axlabel{
  font-family:var(--kor); font-size:10px; letter-spacing:var(--tr-kor-label);
  fill:var(--ink-3); text-anchor:middle; text-transform:uppercase;
}
.achart__baseline line{stroke:var(--ink); stroke-width:1.6}

.achart__baseline text{font-family:var(--kor); font-size:10px; fill:var(--ink-2); text-anchor:middle}
.achart__baselabel--h{text-anchor:end}

.achart__row{opacity:0; transition:opacity .3s ease,transform .5s cubic-bezier(.22,.61,.36,1)}
.achart__row.on{opacity:1}
.achart__name{font-size:12px; font-weight:700; fill:var(--ink); text-anchor:end}
.achart__name--curve{text-anchor:start; font-size:11.5px; fill:var(--ink-2)}

.achart__note{font-family:var(--mono); font-size:10px; font-weight:600; fill:var(--ink-2)}
.achart__note--lo{text-anchor:start}
.achart__note--hi{text-anchor:end}
.achart__val{font-family:var(--mono); font-size:11px; fill:var(--ink-2)}
.achart__val--lo{text-anchor:end}
.achart__val--hi{text-anchor:start}

.achart__base{font-family:var(--mono); font-size:10.5px; font-weight:600; fill:var(--ink); text-anchor:start}

.achart__bar{fill:var(--ci-gold-raw)}
.achart__grow{transform:scaleX(0); transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.achart__row.on .achart__grow{transform:scaleX(1)}
.achart__row.new .achart__bar{fill:var(--ci-gold)}

.achart__row.new .achart__base{fill:var(--paper)}

.achart__row.new .achart__base--out{fill:var(--ink)}
.achart__path{
  fill:none; stroke:var(--ci-blue); stroke-width:2.2;
  stroke-linejoin:round; stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.achart__row.new .achart__path{stroke:var(--ci-gold)}
.achart__cross circle{fill:var(--ci-gold-raw); stroke:var(--paper); stroke-width:1.5}

.anim__say{
  min-height:3.2em; margin:0; padding:0 calc(var(--u)*4) calc(var(--u)*3);
  font-size:0.8438rem; line-height:1.75; color:var(--ink-2);
}
.anim__bar{
  display:flex; align-items:center; gap:calc(var(--u)*2); flex-wrap:wrap;
  padding:calc(var(--u)*3) calc(var(--u)*4);
  border-top:1px solid var(--rule); background:var(--paper-2);
}
.anim__at{font-family:var(--mono); font-size:0.7188rem; color:var(--ink-2); letter-spacing:0; margin-left:auto}
.anim__bar button[disabled]{opacity:.4; cursor:default}

.anim__bar [data-a="play"]{min-width:11.5em; justify-content:center}
.anim__bar .w1__btn,.sim__go{display:inline-flex; align-items:center; justify-content:center; gap:calc(var(--u)*1.5)}

[data-a="play"] .ico--pause{display:none}
[data-a="play"].is-playing .ico--play{display:none}
[data-a="play"].is-playing .ico--pause{display:inline-block}

.sim{border:1px solid var(--rule); background:var(--paper-2); margin:0 0 calc(var(--u)*4); max-width:var(--measure)}
.sim--live{border-color:var(--ci-blue)}
.sim .anim__bar [data-a="play"]{min-width:9em}
.sim__pick{display:flex; align-items:center; gap:calc(var(--u)*2.5); flex-wrap:wrap; padding:calc(var(--u)*3.5) calc(var(--u)*4)}

.sim__lead{margin:0; font-size:0.8125rem; color:var(--ink-2); flex:1 1 16rem}
.sim__go{white-space:normal}
.sim__hd{margin:0; padding:calc(var(--u)*3) calc(var(--u)*4) 0; display:flex; align-items:baseline; gap:calc(var(--u)*2.5); flex-wrap:wrap}
.sim__hd b{font-size:0.8438rem; font-weight:700; color:var(--ink)}
.sim__hd i{font-style:normal; font-size:0.7188rem; color:var(--ink-2); flex:1 1 14rem}
.sim__intro{margin:calc(var(--u)*2) 0 0; padding:0 calc(var(--u)*4); font-size:0.8125rem; color:var(--ink-2)}
.sim .anim__say{padding-top:calc(var(--u)*2.5)}
.sim__src{margin:0; padding:0 calc(var(--u)*4) calc(var(--u)*2.5); font-family:var(--mono); font-size:0.6875rem; color:var(--ink-2); letter-spacing:0}

.sim__done{
  margin:0; padding:calc(var(--u)*2.5) calc(var(--u)*4);
  border-top:1px solid var(--rule); font-size:0.7188rem; color:var(--ci-blue);
}
.sim__done--none{color:var(--ink-2)}

.sim-at{
  outline:2px solid var(--ci-gold-raw); outline-offset:1px; background:var(--wash-gold);
  transition:outline-color .25s ease,background .25s ease;
}

.w1__bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:calc(var(--u)*2);
  padding:calc(var(--u)*3) 0; border-bottom:1px solid var(--ink); margin-bottom:calc(var(--u)*0.5);
}
.w1__title{font-size:0.8125rem; font-weight:700; color:var(--ink)}

.w1__title i{font-style:normal; font-family:var(--kor); font-size:0.6875rem; letter-spacing:0; color:var(--ink-3); font-weight:400; margin-left:calc(var(--u)*1.5)}
.w1__spacer{flex:1 1 auto; min-width:0}
.w1__acts{display:flex; flex-wrap:wrap; gap:calc(var(--u)*2)}

.w1__saved,.w2__done,.anim__at,.sim__done{font-size:0.7188rem; font-weight:400}
.w1__saved,.w2__done{color:var(--ink-3)}
.w1__saved{white-space:nowrap}
.w2__done{white-space:nowrap; margin-right:calc(var(--u)*1)}
.w2__done--wait{white-space:normal; color:var(--ink-3); font-weight:400}

.w2__done--ok,.w1__demo{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  line-height:1.6; padding:calc(var(--u)*0.5) calc(var(--u)*2);
}
.w2__done--ok{background:var(--ci-blue); color:var(--paper); white-space:nowrap}
.w1__demo{background:var(--ci-gold-raw); color:var(--ink)}

.w1__bar:has(.w1__saved:empty) .ico--save{display:none}

.prompt{border:1px solid var(--rule); background:var(--paper-2); margin:calc(var(--u)*6) 0 calc(var(--u)*2); max-width:var(--measure)}
.prompt__hd{
  display:flex; justify-content:space-between; align-items:center; gap:calc(var(--u)*3);
  padding:calc(var(--u)*2.5) calc(var(--u)*4); border-bottom:1px solid var(--rule);
  font-size:0.7188rem; font-weight:700; letter-spacing:var(--tr-kor-label); color:var(--ink-2);
}

.prompt pre{
  margin:0; padding:calc(var(--u)*4); font-family:var(--kor); font-size:0.8125rem;
  line-height:1.75; white-space:pre-wrap; word-break:break-word; letter-spacing:0;
  color:var(--ink-2);
}
.prompt__hint{margin:0; padding:calc(var(--u)*4); font-size:0.8125rem; line-height:1.75; color:var(--ink-2)}
.prompt pre .pl{display:block}
.prompt pre .pl:empty::after{content:'\200B'}          
.prompt pre .pl--new{animation:pl-new .4s ease-out}
@keyframes pl-new{
  from{background:var(--wash-gold)}
  to{background:transparent}
}

[data-widget].is-sim textarea[readonly],
[data-widget].is-sim input[readonly]{background:var(--paper-2); cursor:default}

[data-widget].is-sim textarea[readonly]::placeholder,
[data-widget].is-sim input[readonly]::placeholder{color:var(--ink-2)}
[data-widget].is-sim button[disabled]{opacity:.45; cursor:default}

[data-widget] h3{
  font-size:0.875rem; font-weight:700; color:var(--ink-2);
  border-top:0; padding-top:0; margin:calc(var(--u)*6) 0 calc(var(--u)*2); display:block;
}
[data-widget] h4{font-size:0.8125rem; font-weight:700; margin:calc(var(--u)*4) 0 calc(var(--u)*1.5)}
[data-widget] .empty{font-size:0.8125rem; color:var(--ink-3); margin:calc(var(--u)*3) 0}
[data-widget] .warn{font-size:0.7813rem}

.w1__scroll{overflow-x:auto; padding-bottom:calc(var(--u)*1)}
.w1__grid{display:grid; grid-auto-flow:column; grid-template-columns:15rem; grid-auto-columns:16rem}
.w1__col{display:grid; grid-row:1/-1; grid-template-rows:subgrid; min-width:0}
.w1__side{position:sticky; left:0; z-index:3; background:var(--paper); order:0}
.w1__addcol{order:999; align-content:start}

.w1__cellhd{
  border-bottom:1px solid var(--ink); padding:calc(var(--u)*2) calc(var(--u)*2.5) calc(var(--u)*2) 0;
  display:flex; align-items:center; gap:calc(var(--u)*1.5);
}
.w1__corner{flex-direction:column; align-items:flex-start; gap:calc(var(--u)*0.5)}
.w1__corner b,.w1__totlbl{display:block; font-size:0.7813rem; font-weight:700}
.w1__corner span,.w1__totlbl span{display:block; font-size:0.6875rem; color:var(--ink-3); font-weight:400}
.w1__totlbl{border-bottom:1px solid var(--rule)}

.w1__name{border-left:1px solid var(--rule); padding-left:calc(var(--u)*2.5)}
.w1__name input{
  flex:1 1 auto; min-width:0; font:inherit; font-family:var(--kor);
  font-size:0.8438rem; font-weight:700; color:var(--ink);
  border:0; border-bottom:1px solid var(--rule); background:none; padding:calc(var(--u)*1) 0;
}
.w1__name input:focus{border-bottom-color:var(--ci-gold-raw)}
.w1__name input::placeholder{font-weight:400}

.w1__name--grp{flex-wrap:wrap; align-items:flex-start; padding-top:calc(var(--u)*1.5)}

.w1__grp{flex:0 0 100%; font-style:normal; font-family:var(--kor); font-size:0.625rem; letter-spacing:var(--tr-kor-label); color:var(--ci-blue)}

.w1__name--fix{flex-direction:column; align-items:flex-start; gap:calc(var(--u)*0.75)}
.w1__name--fix b{font-family:var(--mono); font-size:0.6875rem; color:var(--ci-gold)}
.w1__name--fix span{font-size:0.75rem; font-weight:700; line-height:1.45; color:var(--ink)}

.w1__x{
  flex:none; border:0; background:none; cursor:pointer; color:var(--ink-3);
  font:inherit; font-size:1rem; line-height:1; padding:calc(var(--u)*0.5) calc(var(--u)*1);
  min-width:24px; min-height:24px;                     
}
.w1__x:hover{color:var(--ci-gold)}
.w1__score{
  font-family:var(--mono); font-size:1.375rem; font-weight:600; color:var(--ci-gold);
  border-left:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:calc(var(--u)*1.5) calc(var(--u)*2.5); display:flex; align-items:center;
}
.w1__crit{padding:calc(var(--u)*3) calc(var(--u)*3.5) calc(var(--u)*3) 0; border-bottom:1px solid var(--paper-2)}

.w1__crit b{display:block; font-size:0.8125rem; font-weight:700; line-height:1.4}
.w1__crit span{display:block; font-size:0.7188rem; color:var(--ink-3); line-height:1.75; margin-top:calc(var(--u)*0.75)}
.w1__w{display:flex; align-items:center; gap:calc(var(--u)*2); margin-top:calc(var(--u)*1.5)}
.w1__w input[type=range]{height:16px}
.w1__w output{font-family:var(--mono); font-size:0.75rem; font-weight:600; color:var(--ci-blue); min-width:1ch}

.w1__cell{
  border-left:1px solid var(--rule); border-bottom:1px solid var(--paper-2);
  padding:calc(var(--u)*2) calc(var(--u)*2.5); background:var(--paper);
  display:flex; flex-direction:column; gap:calc(var(--u)*1.5);
}
.w1__cell textarea{
  width:100%; font:inherit; font-family:var(--kor); font-size:0.8125rem; line-height:1.55;
  color:var(--ink); border:0; background:none; resize:vertical; padding:0; min-height:2.8em;
}
.w1__rate{display:flex; align-items:center; gap:2px}

.w1__rate button:not(.w1__clr){
  appearance:none; -webkit-appearance:none; font:inherit; padding:0; margin:0;
  border-radius:0;
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-family:var(--mono); font-size:0.625rem; border:1px solid var(--rule);
  color:var(--ink-3); background:var(--paper); user-select:none;
}
.w1__rate button:not(.w1__clr):hover{border-color:var(--ci-blue)}
.w1__rate button:not(.w1__clr).on{background:var(--ci-blue); border-color:var(--ci-blue); color:var(--paper)}

.w1__clr{
  border:0; background:none; cursor:pointer; font:inherit; font-family:var(--kor);
  font-size:0.625rem; color:var(--ink-3); padding:0 calc(var(--u)*1); margin-left:calc(var(--u)*0.5);
  min-width:24px; min-height:24px;                     
}
.w1__clr:hover{color:var(--ci-gold)}
.w1__add{
  width:100%; font:inherit; font-family:var(--kor); font-size:0.7188rem;
  border:1px dashed var(--rule-2); background:none; cursor:pointer;
  color:var(--ink-3); padding:calc(var(--u)*2.5) calc(var(--u)*2); margin-left:calc(var(--u)*2.5);
}
.w1__add:hover{border-color:var(--ci-gold-raw); color:var(--ci-gold)}

.w1--demo .w1__grid{grid-template-columns:17rem; grid-auto-columns:19rem}
.w1--demo .w1__crit b{font-size:0.9375rem}
.w1--demo .w1__crit span{font-size:0.8125rem}
.w1--demo .w1__cell textarea{font-size:0.9375rem; line-height:1.6}
.w1--demo .w1__name input{font-size:0.9688rem}
.w1--demo .w1__score{font-size:1.625rem}

.w1--demo .w1__rate button:not(.w1__clr){font-size:0.6875rem}

.w2__src{font-size:0.75rem; color:var(--ink-3); margin:calc(var(--u)*2.5) 0 0; border-left:2px solid var(--rule); padding-left:calc(var(--u)*2.5)}
.w2__list{margin-top:calc(var(--u)*1.5)}
.w2__group{
  font-size:0.75rem; font-weight:700; letter-spacing:var(--tr-kor-label); color:var(--ci-gold);
  margin:calc(var(--u)*7) 0 calc(var(--u)*2.5);
  padding-bottom:calc(var(--u)*1.5); border-bottom:1px solid var(--rule);
}
.w2__list .w2__group:first-child{margin-top:calc(var(--u)*3.5)}
.w2__item{border:1px solid var(--rule); background:var(--paper); padding:calc(var(--u)*3.5) calc(var(--u)*4); margin-bottom:calc(var(--u)*2.5)}

.w2__item.on{box-shadow:inset 3px 0 0 var(--ci-blue)}

.w2__label{display:block; font-size:0.875rem; font-weight:700; line-height:1.5}
.w2__hint{font-size:0.7813rem; color:var(--ink-3); line-height:1.75; margin:calc(var(--u)*1) 0 0}

.w2__hint code{font-family:var(--kor); color:var(--ink-2)}
.w2__item textarea{
  width:100%; margin-top:calc(var(--u)*2); font:inherit; font-family:var(--kor);
  font-size:0.875rem; line-height:1.65; color:var(--ink);
  border:0; border-top:1px solid var(--paper-2); background:none; resize:vertical;
  padding:calc(var(--u)*2) 0 0; min-height:3.2em;
}
.w2__item textarea:focus{border-top-color:var(--ci-gold-raw)}
.w2--demo .w2__label{font-size:1rem}
.w2--demo .w2__hint{font-size:0.875rem}
.w2--demo .w2__item textarea{font-size:1rem}

.w3__cards{display:grid; gap:calc(var(--u)*3); margin:calc(var(--u)*4.5) 0}
.w3__card{display:flex; flex-direction:column; gap:calc(var(--u)*2.5)}
.w3__wrap{margin:calc(var(--u)*4.5) 0 calc(var(--u)*2)}
.dmu__cell{border:1px solid var(--rule); background:var(--paper); padding:calc(var(--u)*3.5) calc(var(--u)*4)}
.dmu__cell.filled,.w3__card.filled{border-color:var(--ci-blue); box-shadow:inset 3px 0 0 var(--ci-blue)}
.dmu__role{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label);
  color:var(--ci-blue); margin-bottom:calc(var(--u)*0.75);
}

.dmu__hint{font-size:0.7813rem; color:var(--ink-3); margin-bottom:calc(var(--u)*2.5); line-height:1.75}
.w3__row{display:block}
.w3__lbl{display:block; font-size:0.7813rem; font-weight:700; color:var(--ink-2); line-height:1.45; margin-bottom:calc(var(--u)*0.75)}

.w3__lbl i{font-style:normal; font-family:var(--kor); font-size:0.625rem; color:var(--ci-gold); margin-left:calc(var(--u)*1.25); font-weight:400}
.w3__card textarea,.w3__wrap textarea{
  width:100%; font:inherit; font-family:var(--kor); font-size:0.875rem; line-height:1.6;
  color:var(--ink); border:0; border-bottom:1px solid var(--rule); background:none;
  resize:vertical; padding:calc(var(--u)*1) 0;
}
.w3__card textarea:focus,.w3__wrap textarea:focus{border-bottom-color:var(--ci-gold-raw)}
.w3--demo .dmu__role{font-size:0.75rem}
.w3--demo .w3__lbl{font-size:0.875rem}
.w3--demo .w3__card textarea,.w3--demo .w3__wrap textarea{font-size:1rem}

.w4__scroll{overflow-x:auto; margin:calc(var(--u)*2.5) 0 calc(var(--u)*1.5)}
.w4__t{border-collapse:separate; border-spacing:0; font-size:0.8125rem; width:100%}
.w4__t th,.w4__t td{padding:0; border-bottom:1px solid var(--paper-2); vertical-align:top}
.w4__t thead th{
  font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label); color:var(--ink-3);
  text-align:left; padding:calc(var(--u)*1.5) calc(var(--u)*2);
  border-bottom:1px solid var(--ink); white-space:nowrap;
}

.w4__t thead th i{font-style:normal; font-family:var(--kor); color:var(--ink-3); letter-spacing:0}
.w4__rh{text-align:left; min-width:8.25rem; padding:calc(var(--u)*2) calc(var(--u)*2.5) calc(var(--u)*2) 0; background:var(--paper)}

.w4__rh b{display:block; font-size:0.7813rem; font-weight:700; line-height:1.4}
.w4__rh span{display:block; font-size:0.6875rem; color:var(--ink-3); line-height:1.75; margin-top:calc(var(--u)*0.5)}
.w4__t input,.w4__t textarea{
  width:100%; min-width:5.5rem; font:inherit; font-family:var(--kor); font-size:0.8125rem;
  color:var(--ink); border:0; border-bottom:1px solid var(--rule); background:var(--paper);
  padding:calc(var(--u)*1.5) calc(var(--u)*2); resize:vertical;
}
.w4__t input:focus,.w4__t textarea:focus{border-bottom-color:var(--ci-gold-raw)}

.w4__calc{font-family:var(--mono); font-size:0.7813rem; letter-spacing:0; color:var(--ink-2); padding:calc(var(--u)*2); text-align:right; white-space:nowrap}
.w4__span{color:var(--ci-gold); font-weight:600}
.w4__sum th,.w4__sum td{border-top:1px solid var(--rule); border-bottom:0; background:var(--paper-2)}

.w4__sum .w4__rh{font-family:var(--kor); font-size:0.6875rem; letter-spacing:0; color:var(--ink-2); background:var(--paper-2)}

.w4__chart{overflow-x:auto; margin:calc(var(--u)*3.5) 0 calc(var(--u)*2)}
.w4__chart svg{display:block; min-width:35rem; font-family:var(--kor)}
.w4__chart g.w4__bar rect{fill:var(--ci-gold-raw)}

.w4__barval{font-family:var(--mono); font-size:10.5px; fill:var(--ink)}

.w4__totals{display:flex; flex-wrap:wrap; gap:calc(var(--u)*5.5); margin:calc(var(--u)*3) 0 calc(var(--u)*1); font-size:0.8125rem}
.w4__totals b{font-family:var(--mono); font-size:0.9375rem; letter-spacing:0; color:var(--ink); margin-left:calc(var(--u)*1.5)}
.w4__years{display:inline-flex; align-items:center; gap:calc(var(--u)*2); font-size:0.8125rem; margin:calc(var(--u)*1.5) 0}
.w4__years input{width:4.5rem; font:inherit; border:1px solid var(--rule); padding:calc(var(--u)*1.25) calc(var(--u)*2)}
.w4__wacc{display:flex; flex-wrap:wrap; gap:calc(var(--u)*4.5); font-size:0.8438rem; margin:calc(var(--u)*2) 0}
.w4__grid4{display:grid; gap:calc(var(--u)*3); grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.w4__f{display:block; font-size:0.7813rem; color:var(--ink-2)}
.w4__f input{
  display:block; width:100%; margin-top:calc(var(--u)*1); font:inherit; font-size:0.875rem;
  border:0; border-bottom:1px solid var(--rule); background:none; padding:calc(var(--u)*1.25) 0;
}
.w4__f input:focus{border-bottom-color:var(--ci-gold-raw)}

.w4__verdict{border:1px solid var(--rule); border-left:3px solid var(--rule-2); background:var(--paper); padding:calc(var(--u)*4) calc(var(--u)*4.5); margin:calc(var(--u)*4) 0 calc(var(--u)*1.5)}
.w4__verdict.ok{border-left-color:var(--ci-blue)}
.w4__verdict.bad{border-left-color:var(--ci-gold-raw); background:var(--paper-2)}
.w4__verdict p{margin:calc(var(--u)*2.5) 0 0; font-size:0.8438rem; line-height:1.75; max-width:var(--measure)}
.w4__nums{display:flex; flex-wrap:wrap; gap:calc(var(--u)*8)}
.w4__nums span{display:flex; flex-direction:column; gap:calc(var(--u)*0.5)}
.w4__nums i{font-style:normal; font-size:0.6875rem; font-weight:700; letter-spacing:var(--tr-kor-label); color:var(--ink-3)}
.w4__nums b{font-family:var(--mono); font-size:1.625rem; font-weight:600; line-height:1; letter-spacing:0; color:var(--ink)}
.w4__verdict.ok .w4__nums b:first-of-type{color:var(--ci-blue)}
.w4__verdict.bad .w4__nums b:first-of-type{color:var(--ci-gold)}

.w6__steps{list-style:none; margin:calc(var(--u)*2.5) 0 calc(var(--u)*1.5); padding:0}
.w6__steps li{display:flex; align-items:baseline; gap:calc(var(--u)*3); flex-wrap:wrap; padding:calc(var(--u)*2) 0; border-bottom:1px solid var(--paper-2)}
.w6__steps li:last-child{border-bottom:0}
.w6__steps span{font-size:0.7813rem; color:var(--ink-2); min-width:8.5rem}
.w6__steps code{font-family:var(--mono); font-size:0.7813rem; color:var(--ink-3); background:none; flex:1 1 11rem; word-break:break-word}
.w6__steps b{font-family:var(--mono); font-size:0.9375rem; font-weight:600; letter-spacing:0; color:var(--ink)}
.w6__src{font-size:0.7188rem; color:var(--ink-3); line-height:1.75; margin:calc(var(--u)*2.5) 0 0}
.w6__src code{font-family:var(--mono); font-size:0.7188rem; color:var(--ci-blue); background:none}
.w6--demo .w4__t input,.w6--demo .w4__t textarea{font-size:0.9063rem}
.w6--demo .w6__steps b{font-size:1.0625rem}

.w5__block{margin:calc(var(--u)*4.5) 0 calc(var(--u)*2)}
.w5__block + .w5__block{border-top:1px solid var(--rule); padding-top:calc(var(--u)*4)}

.w5__btitle{font-size:0.875rem; font-weight:700; line-height:1.5; margin:0 0 calc(var(--u)*1)}
.w5__note{font-size:0.7813rem; color:var(--ink-3); line-height:1.75; margin:0 0 calc(var(--u)*2)}
.w5__ends{display:flex; align-items:center; gap:calc(var(--u)*2); margin:0 0 calc(var(--u)*2); font-size:0.6875rem; letter-spacing:var(--tr-kor-label); color:var(--ink-3)}
.w5__ends b{color:var(--ci-blue); font-weight:700}
.w5__ends i{font-style:normal; flex:1 1 auto; border-top:1px dashed var(--rule); height:0}

.w5__scroll{overflow-x:auto; padding-bottom:calc(var(--u)*1)}
.w5__grid{display:grid; gap:0; min-width:min-content}
.w5__row{display:contents}
.w5__hd{
  font-size:0.7188rem; font-weight:700; line-height:1.4; color:var(--ink-2);
  border-bottom:1px solid var(--ink); padding:calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*1.5) 0; align-self:end;
}
.w5__rk{
  font-family:var(--mono); font-size:0.75rem; letter-spacing:0; color:var(--ink-3);
  border-bottom:1px solid var(--paper-2); padding:calc(var(--u)*2.5) calc(var(--u)*1.5) 0 0; text-align:right;
}
.w5__head .w5__rk{border-bottom-color:var(--ink)}
.w5__lab{border-bottom:1px solid var(--paper-2); padding:calc(var(--u)*2.5) calc(var(--u)*3) calc(var(--u)*2.5) 0}
.w5__lab b{display:block; font-size:0.8125rem; font-weight:700; line-height:1.4}
.w5__lab span{display:block; font-size:0.7188rem; color:var(--ink-3); line-height:1.75; margin-top:calc(var(--u)*0.75)}
.w5__cell{border-bottom:1px solid var(--paper-2); padding:calc(var(--u)*1.5) calc(var(--u)*2) calc(var(--u)*1.5) 0}
.w5__cell input[type=text],.w5__cell textarea{
  width:100%; font:inherit; font-family:var(--kor); font-size:0.8125rem; color:var(--ink);
  border:1px solid var(--rule); background:var(--paper); padding:calc(var(--u)*1.25) calc(var(--u)*1.75);
}
.w5__cell textarea{resize:vertical; line-height:1.55; min-height:2.6em}
.w5__cell input[type=text]:focus,.w5__cell textarea:focus{border-color:var(--ci-gold-raw)}
.w5__chk{display:flex; justify-content:center; padding-top:calc(var(--u)*1.5)}
.w5__chk input{width:17px; height:17px; accent-color:var(--ci-blue)}
.w5__rm{border-bottom:1px solid var(--paper-2); display:flex; align-items:center}
.w5__x{border:0; background:none; cursor:pointer; color:var(--ink-3); font:inherit; font-size:1rem; line-height:1; padding:calc(var(--u)*0.5) calc(var(--u)*1); min-width:24px; min-height:24px}
.w5__x:hover{color:var(--ci-gold)}
.w5__add{
  border:1px dashed var(--rule-2); background:none; cursor:pointer; color:var(--ink-3);
  font:inherit; font-family:var(--kor); font-size:0.7813rem;
  padding:calc(var(--u)*1.5) calc(var(--u)*3); margin-top:calc(var(--u)*2);
}
.w5__add:hover{border-color:var(--ci-blue); color:var(--ci-blue)}
.w5__extra{margin-top:calc(var(--u)*5); border-top:1px solid var(--rule); padding-top:calc(var(--u)*1.5)}
.w5--demo .w5__cell input[type=text],.w5--demo .w5__cell textarea{font-size:0.9063rem}
.w5--demo .w5__hd{font-size:0.7813rem}
.w5--demo .w5__lab b{font-size:0.875rem}

.rise{opacity:0; transform:translateY(14px)}
.rise.in{
  opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.2,.7,.3,1),
             transform .5s cubic-bezier(.2,.7,.3,1);
}

.anim--still .achart__row,
.anim--still .achart__grow,
.anim--still .achart__path{transition:none}
.anim--still .achart__row.on .achart__grow{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .rise,.rise.in{opacity:1; transform:none}
  .anode,.anode.on{opacity:1; transform:none}
  .achart__row,.achart__grow,.achart__path{transition:none}
  .achart__row.on .achart__grow{transform:scaleX(1)}
  .prompt pre .pl--new{animation:none}
}

.gloss{max-width:var(--measure); margin:0}
.gloss > div{padding:calc(var(--u)*5) 0; border-top:1px solid var(--rule)}
.gloss > div:first-child{border-top:0; padding-top:0}
.gloss dt{
  font-weight:700; color:var(--ink); font-size:0.9375rem; line-height:1.6;
  letter-spacing:var(--tr-kor-label);
}
.gloss dd{margin:calc(var(--u)*2) 0 0; color:var(--ink-2); line-height:1.82}

@media (max-width:1180px){
  .main{padding-left:calc(var(--u)*5)}
  .sec{grid-template-columns:44px minmax(0,1fr); gap:0 calc(var(--u)*4)}
}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  
  .side{
    position:sticky; z-index:40;
    top:var(--topbar-h);
    top:calc(var(--topbar-h) + env(safe-area-inset-top));
    max-height:none; overflow-x:auto; overflow-y:hidden;
    border-right:0; border-bottom:1px solid var(--rule); background:var(--paper);
    padding:calc(var(--u)*2) var(--gutter);
    display:flex; align-items:center; gap:calc(var(--u)*2);
    -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  }
  .side::-webkit-scrollbar{display:none}
  .side__label{
    margin:0; padding:0 calc(var(--u)*2) 0 0; white-space:nowrap; flex:none;
    border-right:1px solid var(--rule); align-self:stretch; display:flex; align-items:center;
  }
  .side a{
    display:inline-flex; align-items:center; gap:calc(var(--u)*1.5);
    flex:none; white-space:nowrap; scroll-snap-align:start;
    margin:0; padding:calc(var(--u)*2) calc(var(--u)*3);
    border-left:0; border-top:0; border-bottom:2px solid transparent; min-height:44px;
  }
  .side a.on,
  .side a[aria-current="page"]{border-left:0; border-bottom-color:var(--ci-blue); background:var(--paper-2)}
  .side__steps{display:contents}
  .side__steps a{min-height:44px; border-left:0}
  .side__steps a.on,
  .side__steps a[aria-current="page"]{border-bottom-color:var(--ci-gold-raw)}
  .side .ltoc{display:none}

  
  .sec,[id]{scroll-margin-top:calc(var(--topbar-h) + env(safe-area-inset-top) + 45px + var(--u)*8)}

  .main{padding:calc(var(--u)*6) var(--gutter) calc(var(--u)*16)}
  
  .sec{grid-template-columns:minmax(0,1fr); gap:calc(var(--u)*4)}
  .sec__n{position:static; flex-direction:row; align-items:center; grid-row:auto}
  .sec > *:not(.sec__n){grid-column:1}
  .hero[data-n]::after{opacity:.55}
  .pager{grid-template-columns:1fr}
  .pager a:last-child{text-align:left}
  .counter{display:none}
  
  .mapbtn span{
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
  .mapbtn{padding:0 calc(var(--u)*3)}
  .lprog__t,.lprog__bar{display:none}
  .map{grid-template-columns:1fr}

  
  .pill{min-height:44px; align-items:center}
  .w1__btn,.copy,.w5__add,.w1__add{min-height:44px}
  
  .copy{min-width:44px}
  
  .mapbtn{min-width:44px; justify-content:center}

  
  
  .lcheck input,.w5__chk input,
  input[type=checkbox],input[type=radio]{width:24px; height:24px; flex:none}
  input[type=range],.w1__w input[type=range]{height:24px}
}

@media (max-width:560px){
  :root{--measure-max:100%}
  .mark{font-size:0.6875rem; letter-spacing:0.04em}
  .topbar__inner::before,.top .wrap::before{width:22px; height:22px}
  .hero{padding-top:calc(var(--u)*4)}
  .hero[data-n]::after{font-size:clamp(52px,17vw,80px); opacity:.4}
  .hero h1{max-width:none}
  .sr ul{padding:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*7)}
  .kobox p{margin-left:calc(var(--u)*4); margin-right:calc(var(--u)*4)}
  .kobox__hd{margin:0; padding:calc(var(--u)*3) calc(var(--u)*4)}
  .kobox__src{padding:calc(var(--u)*3) calc(var(--u)*4)!important}
  .foot__inner::before{width:150px; height:32px}
  
  .fig{margin-left:calc(var(--gutter)*-1); margin-right:calc(var(--gutter)*-1); max-width:none}
  .fig img{border-left:0; border-right:0}
  .fig figcaption,.fig__cap{margin-left:var(--gutter); margin-right:var(--gutter)}
  
  .hero--book{grid-template-columns:1fr}
  .hero--book .cover{max-width:160px}
  .ops{grid-template-columns:repeat(2,1fr)}
  .w1__grid{grid-template-columns:11rem; grid-auto-columns:14rem}
  .w1--demo .w1__grid{grid-template-columns:12rem; grid-auto-columns:16rem}
  .anode--l3{margin-left:2.2rem}
  .anode--l4{margin-left:2.6rem}
  .anode--l5{margin-left:3rem}
  .w4__nums{gap:calc(var(--u)*4)}
  .w4__nums b{font-size:1.25rem}
}

@media print{
  .topbar,.top,.side,.pager,.anim__bar,.w1__acts,.sim__pick,.skip{display:none}
  
  .copy,.w1__btn,.w1__clr,.w1__add,.w1__x,.w5__add,.w5__x,.sim__go{display:none}
  
  .cover{display:none}
  .shell{display:block; max-width:none}
  .main{padding:0}
  :root{--measure-max:100%}
  .full[open]>summary::after,.full>summary::after{content:""}
  .sec{page-break-inside:avoid; display:block}
  .sec__n{position:static; flex-direction:row; margin-bottom:calc(var(--u)*2)}
  
  figure.fig,.kobox,.sr,.w2__item,.w1__cell,.anim,.prompt,tr{break-inside:avoid}
  h1,h2,h3,.sec__n{break-after:avoid}

  
  .sr__hd,
  .sec--practice .sr .sr__hd,
  .sec--practice .sr ~ .sr .sr__hd{
    background:none; color:var(--ci-gold);
    border-bottom:1px solid var(--rule); padding-bottom:calc(var(--u)*3);
  }
  .sec--practice .sr{background:none; color:var(--ink); border-color:var(--ink)}
  .sec--practice .sr li{color:var(--ink)}
  .sec--practice .sr li b{color:var(--ink)}
  .sec--practice .sr li::before{background:var(--ci-gold)}
  
  .kobox__hd{background:none; color:var(--ink); border-bottom:1px solid var(--ink)}

  
  textarea{field-sizing:content; max-height:none}

  
  .w1__rate button:not(.w1__clr).on{background:none; color:var(--ci-blue); font-weight:700; border:2px solid var(--ci-blue)}
  .w2__done--ok{background:none; color:var(--ci-blue); border:1px solid var(--ci-blue)}

  .rise,.rise.in{opacity:1; transform:none}
}