
/* 화면 표기 약속 (시안 2026-10-18) */
.gl{position:relative;display:inline}
.gl__w{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline dotted var(--gray-600);text-underline-offset:4px}
.gl__w:hover,.gl.is-open .gl__w{text-decoration-color:var(--green-700);color:var(--green-700)}
.gl__p{position:absolute;left:0;top:calc(100% + 8px);z-index:20;width:max-content;max-width:280px;padding:12px 14px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.55;box-shadow:var(--float-sh);opacity:0;transform:translateY(-4px) scale(.96);pointer-events:none;transition:opacity 160ms ease-out,transform 420ms var(--jelly)}
.gl.is-open .gl__p,.gl__w:focus-visible+.gl__p{opacity:1;transform:none;pointer-events:auto}
.co{border-radius:24px;padding:22px 26px;display:flex;flex-direction:column;gap:8px;background:var(--white);box-shadow:inset 0 0 0 1px var(--gray-100)}
.co p{margin:0}.co__t{font-size:17px;line-height:1.7;color:var(--gray-800)}
.co--요점{background:transparent;box-shadow:none;padding:0 0 4px}.co--요점 .co__t{font-size:22px;line-height:1.55;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.co--숫자 .co__t b{display:block;font-size:48px;line-height:1.1;font-weight:600;letter-spacing:-.03em;color:var(--ink);margin-bottom:4px}
.co--확인{background:var(--success-tint);box-shadow:none}.co--확인 .co__k{color:var(--success)}
.co--바로잡기{background:var(--notice-tint);box-shadow:none}.co--바로잡기 .co__k{color:var(--notice)}
.co--알림{background:var(--gray-100);box-shadow:none}
.co--인용 .co__t{font-size:20px;font-weight:600}
.tl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tl li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--gray-100);font-size:15px;line-height:1.6;color:var(--gray-800)}
.tl__y{font-family:var(--mono);font-size:13px;color:var(--ink)}
.hs{margin:8px 0;display:flex;flex-direction:column;gap:12px}
.hs__box{position:relative;border-radius:16px;overflow:hidden;background:var(--gray-100)}.hs__box img{width:100%}
.hs__dot{position:absolute;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:999px;border:0;cursor:pointer;font-family:var(--mono);font-size:13px;font-weight:500;background:var(--ink);color:var(--paper);box-shadow:0 0 0 3px rgba(255,255,255,.85),var(--float-sh);transition:transform 420ms var(--jelly),background var(--snappy)}
.hs__dot:hover,.hs__dot.is-on{background:var(--green);color:var(--ink);transform:translate(-50%,-50%) scale(1.15)}
.hs__leg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hs__leg li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:14px;font-size:15px;line-height:1.6;color:var(--gray-800);transition:background var(--snappy)}
.hs__leg li b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--gray-600)}.hs__leg li.is-on{background:var(--green-50)}
.cmp{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.cmp__box{position:relative;border-radius:16px;overflow:hidden;background:var(--gray-100);--p:50%;aspect-ratio:4/3}
.cmp__box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cmp__top{position:absolute;inset:0;background:var(--gray-100);clip-path:inset(0 calc(100% - var(--p)) 0 0)}.cmp__top img{width:100%;height:100%;object-fit:contain}
.cmp__bar{position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:var(--green);box-shadow:0 0 0 1px rgba(14,14,14,.2)}
.cmp__l,.cmp__r{position:absolute;top:12px;padding:4px 10px;border-radius:999px;background:rgba(14,14,14,.6);color:var(--paper)}.cmp__l{left:12px}.cmp__r{right:12px}
.cmp__ctl{display:flex;align-items:center;gap:12px}.cmp__ctl input{flex:1;accent-color:var(--ink);height:44px}
.zm{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.zm__box{border-radius:16px;overflow:hidden;background:var(--gray-100);cursor:zoom-in}
.zm__box img{width:100%;transition:transform 600ms var(--expo)}
.zm.is-on .zm__box{cursor:zoom-out}
.zm__ctl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.qz{border-radius:24px;padding:24px 26px;background:var(--white);box-shadow:inset 0 0 0 1px var(--gray-300);display:flex;flex-direction:column;gap:12px}
.qz p{margin:0}.qz__q{font-size:20px;font-weight:600;line-height:1.5;letter-spacing:-.01em}
.qz__os{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qz__o{min-height:52px;padding:10px 18px;border-radius:999px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--ink);font-size:15px;font-weight:500;cursor:pointer;text-align:center;transition:background var(--snappy),color var(--snappy),transform 420ms var(--jelly)}
.qz__o:hover{background:var(--gray-100)}.qz__o:active{transform:scale(.96)}
.qz__o.is-ok{background:var(--green);box-shadow:none;color:var(--ink)}.qz__o.is-no{background:var(--gray-100);color:var(--gray-400);box-shadow:none}
.qz__a{font-size:16px;line-height:1.7;color:var(--gray-800);padding-top:4px;border-top:1px solid var(--gray-100)}
.bw__box img{width:100%;border-radius:16px;transition:filter 400ms ease}.bw.is-on img{filter:grayscale(1)}
@media (max-width:767px){.hs__dot{width:24px;height:24px;font-size:11px}.tbl{min-width:640px}.tl li{grid-template-columns:96px minmax(0,1fr)}.qz__os{grid-template-columns:1fr}.co--숫자 .co__t b{font-size:40px}.gl__p{max-width:240px}}
.wrap{max-width:var(--max)}
/* 화면 표기 약속 v2 (시안) — 시험본 v3 */
mark{background:linear-gradient(transparent 55%,var(--green-50,#e6f6d9) 55%);color:inherit;padding:0 1px}
u{text-decoration-color:var(--green-700,#3a7a1a);text-decoration-thickness:2px;text-underline-offset:4px}
.tl--h{flex-direction:row;overflow-x:auto;gap:0;padding-bottom:6px;scroll-snap-type:x mandatory}
.tl--h li{display:flex;flex-direction:column;min-width:200px;max-width:220px;gap:6px;border-top:0;border-left:1px solid var(--gray-100);padding:6px 16px;scroll-snap-align:start}
.sl,.cx,.tp,.ms,.hd{margin:8px 0;display:flex;flex-direction:column;gap:10px}
.sl__box img,.cx img,.tp__box img,.ms__box img,.hd__box img{width:100%;border-radius:16px;display:block}
.sl__labs{display:flex;gap:8px;flex-wrap:wrap}.sl__labs span{font-size:13px;padding:4px 10px;border-radius:999px;color:var(--gray-600)}.sl__labs span.is-on{background:var(--ink);color:var(--paper)}
.ord__os,.mt__c{display:flex;flex-wrap:wrap;gap:8px}.ord__o,.mt__l,.mt__r{min-height:44px;padding:8px 14px;border-radius:14px;border:0;background:transparent;box-shadow:inset 0 0 0 1px var(--gray-300);font-size:14px;line-height:1.5;text-align:left;cursor:pointer}
.ord__o[disabled]{opacity:.35}.ord__pick{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px;line-height:1.6}
.ord__pick li.ok{color:var(--success)}.ord__pick li.no{color:var(--notice)}
.mt__g{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mt__c{flex-direction:column}
.mt__l.is-sel{box-shadow:inset 0 0 0 2px var(--ink)}.mt .is-ok{background:var(--green);box-shadow:none}.mt .is-bad{background:var(--notice-tint)}
.cx__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}.cx__l li{display:flex;gap:10px;align-items:center}.cx__l code{font-family:var(--mono);font-size:12px;color:var(--gray-600)}
.sw{width:32px;height:32px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex-shrink:0}
.tp__box{position:relative;border-radius:16px;overflow:hidden}.tp__ov{position:absolute;inset:0;mix-blend-mode:color;opacity:0;pointer-events:none}
.ms__box,.hd__box{position:relative}.ms__box svg{position:absolute;inset:0;width:100%;height:100%}.ms__box line{stroke:var(--green,#7bd34a);stroke-width:.6;vector-effect:non-scaling-stroke;stroke-width:3}
.ms__leg{margin:0;padding-left:20px;font-size:14px;color:var(--gray-800)}
.hd__cv{position:absolute;border:0;border-radius:8px;background:var(--ink);color:var(--paper);font-size:20px;cursor:pointer;transition:opacity 300ms}.hd__cv.is-open{opacity:0;pointer-events:none}
.fc{display:grid;width:100%;min-height:120px;border:0;padding:0;background:none;cursor:pointer;text-align:left;perspective:1000px}
.fc__f,.fc__b{grid-area:1/1;border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:8px;backface-visibility:hidden;transition:transform 500ms var(--expo,ease);font-size:16px;line-height:1.6}
.fc__f{background:var(--white);box-shadow:inset 0 0 0 1px var(--gray-300)}.fc__f b{font-size:18px}
.fc__b{background:var(--ink);color:var(--paper);transform:rotateY(180deg)}
.fc.is-on .fc__f{transform:rotateY(180deg)}.fc.is-on .fc__b{transform:none}
.rd{gap:10px}.rd .btn{align-self:flex-start}
.sref{font-family:var(--mono);font-size:10px;color:var(--gray-400);margin-left:1px}
.tlink{text-decoration-color:var(--green);text-decoration-thickness:2px}
.pending{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--notice-tint);color:var(--notice);font-family:var(--mono);font-size:11px;vertical-align:middle}
.hdr-bar{position:sticky;top:0;z-index:30;background:rgba(250,250,250,.86);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:inset 0 -1px 0 var(--gray-100)}
.hdr{background:transparent;box-shadow:none;max-width:var(--max);margin:0 auto;padding:0 var(--margin)}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}.brand b{font-size:17px;letter-spacing:-.02em}
.switch{display:flex;align-items:center;gap:8px;max-width:var(--max);margin:0 auto;padding:10px var(--margin) 12px;overflow-x:auto}
.switch .chip{text-decoration:none;white-space:nowrap;gap:8px;color:var(--ink)}.switch .chip .label{font-size:11px}
.switch .chip[aria-current]{background:var(--ink);color:var(--paper);box-shadow:none}.switch .chip[aria-current] .label{color:var(--gray-400)}
.switch__sp{flex:1}
.hero{position:relative;height:640px;background:var(--gray-100);overflow:hidden}
.hero__imgs{display:grid;grid-template-columns:repeat(var(--n,2),1fr);height:100%}.hero__imgs img{width:100%;height:100%;object-fit:cover}
.hero__card{position:absolute;left:max(var(--margin),calc((100vw - var(--max))/2 + var(--margin)));bottom:40px;max-width:600px;border-radius:28px;padding:28px 32px;display:flex;flex-direction:column;gap:14px}
.hero__card p.t-body-l{margin:0}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.core{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:96px 0 64px;align-items:start}
.core__col{display:flex;flex-direction:column;gap:36px}
.sec-h{display:flex;gap:12px;align-items:baseline;margin:0 0 14px}.sec-h .label{font-size:12px}
.blk{display:flex;flex-direction:column;gap:16px}
.blk p{margin:0}
.fig{margin:8px 0;display:grid;gap:12px;align-items:center}.fig--2{grid-template-columns:1fr 1fr}.fig--3{grid-template-columns:repeat(3,1fr)}
.fig img{width:100%;border-radius:16px;background:var(--gray-100)}
.cap{display:flex;flex-direction:column;gap:6px;margin-top:-8px}.cap p{margin:0}
.cap__credit{margin:0;line-height:1.6}
.list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:1.7;color:var(--gray-800)}
.tbl-wrap{overflow-x:auto}.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;color:var(--gray-800)}
.tbl th{text-align:left;padding:10px 12px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--gray-600);border-bottom:1px solid var(--gray-300)}
.tbl td{padding:12px;vertical-align:top;border-bottom:1px solid var(--gray-100)}
.summary{border-radius:28px;padding:36px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;gap:14px}
.summary p{margin:0;font-size:20px;line-height:1.7}.summary .tlink{color:var(--paper)}.summary .summary__label{color:var(--green);font-size:12px}
.more{display:grid;grid-template-columns:260px minmax(0,760px);gap:64px;padding:64px 0;border-top:1px solid var(--gray-100);align-items:start}
.toc{position:sticky;top:150px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.toc a{text-decoration:none;padding:10px 14px;border-radius:999px;color:var(--gray-800);transition:background var(--snappy),color var(--snappy)}
.toc a:hover{background:var(--gray-100)}.toc a.is-on{background:var(--ink);color:var(--paper)}.toc a .label{font-size:11px;margin-right:8px;color:inherit;opacity:.6}
details.dsec{border-top:1px solid var(--gray-100);padding-top:28px;scroll-margin-top:150px}
details.dsec summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:14px;padding-bottom:20px}
details.dsec summary::-webkit-details-marker{display:none}
details.dsec summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--gray-400);font-size:20px}
details.dsec[open] summary::after{content:"–"}
details.dsec .blk{padding-bottom:40px;gap:20px}
.sub{margin:20px 0 0;font-size:22px}
.tail{display:flex;flex-direction:column;gap:48px;padding:64px 0 96px;border-top:1px solid var(--gray-100)}
.pager2{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 0 96px}
.pcard{display:flex;flex-direction:column;gap:6px;padding:24px 28px;border-radius:24px;text-decoration:none;box-shadow:inset 0 0 0 1px var(--gray-300);transition:box-shadow var(--snappy),background var(--snappy)}
.pcard:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}.pcard--next{text-align:right}
.pcard b{font-size:24px;font-weight:600;letter-spacing:-.01em}
/* index */
.lib-hero{padding:96px 0 48px;display:flex;flex-direction:column;gap:20px;max-width:820px}
.lib-hero p{margin:0}
.axis-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:40px 0;border-top:1px solid var(--gray-100);align-items:start}
.axis-row__h{display:flex;flex-direction:column;gap:6px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--white);text-decoration:none;box-shadow:inset 0 0 0 1px var(--gray-100);transition:box-shadow var(--snappy),transform 520ms var(--jelly)}
.tcard:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.tcard img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--gray-100)}
.tcard__b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}.tcard__b p{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tcard--empty{box-shadow:inset 0 0 0 1px dashed;border:1px dashed var(--gray-300);background:transparent;padding:24px;justify-content:center;color:var(--gray-600);font-size:14px;min-height:120px}
@media (min-width:768px) and (max-width:1199px){.core{gap:40px}.more{grid-template-columns:200px minmax(0,1fr);gap:40px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
.switch .btn{display:none}

html,body{overflow-x:hidden}
.hdr{height:56px;gap:12px}.hdr__menu{display:none}.brand .label{display:none}
.switch{gap:8px;padding:8px var(--margin);scrollbar-width:none}.switch::-webkit-scrollbar{display:none}
.switch .chip{min-height:44px;flex-shrink:0}
.switch__sp{display:none}
.switch .btn--s{--h:44px;min-width:44px;padding:0;flex-shrink:0;position:sticky;right:0;background:var(--paper)!important;color:var(--ink)!important}
.switch .btn--s:nth-last-child(2){right:52px}
.btn--s{--h:44px}
.hero{height:min(100svh,720px)}
.hero__imgs{grid-template-columns:1fr;grid-template-rows:repeat(var(--n,2),1fr)}
.hero__card{left:12px;right:12px;bottom:12px;max-width:none;padding:22px 20px;border-radius:24px;gap:12px}
.hero__card h1{font-size:44px}
.hero__card .btns{flex-direction:column}.hero__card .btn{width:100%}
.core{grid-template-columns:minmax(0,1fr);gap:40px;padding:48px 0}
.summary{padding:24px}.summary p{font-size:18px}
.more{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 48px}
.toc{position:sticky;top:116px;z-index:20;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;margin:0 calc(var(--margin)*-1);padding:8px var(--margin);background:rgba(250,250,250,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--gray-100);scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc>.label{display:none}
.toc a{flex-shrink:0;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;box-shadow:inset 0 0 0 1px var(--gray-300)}
article{padding-top:24px}
details.dsec{scroll-margin-top:170px}
details.dsec summary{min-height:44px}details.dsec summary .label{white-space:nowrap}details.dsec summary .t-h2{font-size:26px}
.sub{font-size:20px}
.fig{gap:8px}
.tail{padding:48px 0 64px;gap:40px}
.pager2{grid-template-columns:1fr;padding-bottom:64px}.pcard--next{text-align:left}
.lib-hero{padding:48px 0 32px}.lib-hero .t-display{font-size:38px}
.axis-row{grid-template-columns:1fr;gap:16px;padding:32px 0}
.axis-row__h{flex-direction:row;align-items:baseline;gap:10px}
.cards{grid-template-columns:1fr}
.lib-hero .btn{width:100%}
}
