img{height:auto}
/* UnitX 톤앤매너(대표님 캡처 기준): #08080a 바탕, 큰 라운드 카드(#141417), 그 안의 더 어두운 카드(#0c0c0e), 흰 굵은 제목 + 회색 둘째 줄, 영문 아이브로우, 라임 포인트는 진행바·점에만. 한 가지 어두운 화면으로 고정 */
:root{
--bg:#08080a;--card:#141417;--inner:#0c0c0e;--fg:#f2f2f3;--sub:#8e8e97;--muted:#9a9aa2;--faint:#5d5d66;--line:#26262b;--line2:#34343a;
--lime:#d6f24c;--lime-ink:#0b0b0c;
--bad:#ff6a5c;--bad-bg:rgba(255,106,92,.1);--good:#4fd18b;--good-bg:rgba(79,209,139,.09);--caution:#f5a524;--caution-bg:rgba(245,165,36,.09);
--todo-bg:#3b3410;--add-bg:#173d27;--add-fg:#8fe0b0;--chg-bg:#1c2f4d;--chg-fg:#a9c8f5;--todo-fg:#f3dc7a;
--sans:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
--latin:"Inter","Noto Sans KR",system-ui,sans-serif;color-scheme:dark}
html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.8;word-break:keep-all;-webkit-font-smoothing:antialiased}
.layout{display:grid;grid-template-columns:228px minmax(0,1fr);gap:40px;max-width:1280px;margin:0 auto;padding-inline:16px;padding-block:28px 120px}
nav.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 24px);align-self:start;max-height:calc(100vh - 48px);overflow:auto;font-size:14px;display:flex;flex-direction:column;gap:2px;scrollbar-width:thin}
.toc .brand{font-family:var(--latin);font-weight:700;font-size:20px;letter-spacing:-.02em;padding:2px 12px 18px;display:flex;align-items:baseline;gap:8px}
.toc .brand small{font-weight:400;font-size:12px;color:var(--sub);letter-spacing:0}
.tph{font-family:var(--latin);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:20px 0 6px;padding-left:12px;display:flex;gap:8px;align-items:baseline}
.tph b{font-family:var(--sans);font-weight:500;letter-spacing:0;text-transform:none;color:var(--sub)}
nav.toc a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:999px;display:flex;gap:10px;align-items:baseline;transition:background .15s,color .15s}
nav.toc a:hover,nav.toc a:focus-visible{background:var(--card);color:var(--fg);outline:none}
.tn{font-family:var(--latin);font-size:12px;color:var(--faint);min-width:24px;font-variant-numeric:tabular-nums}
main{display:flex;flex-direction:column;gap:28px;min-width:0}
/* hero */
.cover{position:relative;overflow:hidden;padding:96px 8px 40px;display:flex;flex-direction:column;gap:26px}
.cover::before{content:"";position:absolute;right:-80px;top:40px;width:620px;height:420px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;transform:perspective(700px) rotateX(58deg) rotateZ(-32deg);opacity:.55;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.cover>*{position:relative}
.cover .k{font-family:var(--latin);font-size:15px;color:var(--muted)}
.cover h1{font-weight:700;font-size:clamp(34px,5.6vw,64px);line-height:1.16;letter-spacing:-.035em;margin:0;text-wrap:balance}
.cover h1 span{color:var(--sub)}
.cover p{margin:0;max-width:46ch;color:var(--muted);font-size:18px;line-height:1.75}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--line2);border-radius:999px;padding:10px 12px 10px 22px;color:var(--fg);text-decoration:none;font-weight:500;font-size:15px}
.pill i{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-style:normal;font-weight:700}
.pill.ghost{padding:10px 22px}
.pill:hover,.pill:focus-visible{border-color:var(--muted);outline:none}
.phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.phases a{color:inherit;text-decoration:none;background:var(--card);border-radius:28px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:8px;border:1px solid transparent;transition:border-color .2s}
.phases a:hover,.phases a:focus-visible{border-color:var(--line2);outline:none}
.bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px;max-width:260px}
.bars i{height:3px;border-radius:2px;background:var(--line2);display:block}.bars i.on{background:var(--lime)}
.phases b{font-family:var(--latin);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.phases span{font-size:22px;font-weight:700;letter-spacing:-.02em}
.phases small{font-size:13.5px;color:var(--sub);line-height:1.65}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;font-size:14px;color:var(--muted);background:var(--card);border-radius:999px;padding:14px 26px}
.legend b{font-family:var(--latin);font-size:13px;color:var(--fg);font-weight:500;display:flex;align-items:center;gap:8px}
.legend b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.lg{display:inline-flex;align-items:center;gap:8px}.lg i{width:9px;height:9px;border-radius:50%;display:block}
/* chapter */
article.ch{background:var(--card);border-radius:36px;scroll-margin-top:24px;overflow:hidden;margin-top:28px}
.op{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:56px 56px 44px}
.opl{display:flex;flex-direction:column;gap:12px;min-width:0}
.phase-tag{font-family:var(--latin);font-size:15px;color:var(--muted)}
h2.ct{font-weight:700;font-size:clamp(36px,5.4vw,60px);line-height:1.12;letter-spacing:-.035em;margin:0;text-wrap:balance}
.big{font-family:var(--latin);font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:8px 16px;font-variant-numeric:tabular-nums;align-self:flex-start}
.big::before{content:"PROCESS ";color:var(--faint)}
.stats{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);margin-top:6px}
.stats div{display:flex;align-items:baseline;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:4px 14px}
.stats b{font-family:var(--latin);font-weight:600;font-size:14px;color:var(--fg)}
.stats div:nth-child(1) b{color:var(--bad)}.stats div:nth-child(2) b{color:var(--good)}.stats div:nth-child(3) b{color:var(--caution)}
.body{padding:0 56px 56px;display:flex;flex-direction:column}
.body>p,.bb>p,.sub>p{max-width:68ch;color:#d4d4d8}
.body li{color:#d4d4d8}
/* sections */
section.blk{padding-top:52px;margin-top:8px;border-top:1px solid var(--line)}
.eb{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.eb span:first-child{font-family:var(--latin);font-size:15px;color:var(--muted)}
.sn{font-family:var(--latin);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:.08em}
h2.sec{font-size:30px;font-weight:700;line-height:1.35;letter-spacing:-.03em;margin:0 0 22px;text-wrap:balance}
.bb{display:flex;flex-direction:column;gap:8px}
.sub{margin:16px 0 4px;min-width:0}
.sub h3{display:flex;align-items:center;gap:14px;font-size:19px;font-weight:700;margin:0 0 8px;line-height:1.45;letter-spacing:-.01em}
.stepn{font-family:var(--latin);font-weight:600;font-size:13px;width:40px;height:40px;border-radius:14px;background:var(--inner);color:var(--fg);display:grid;place-items:center;flex:none}
.ico{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none;background:var(--inner)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:8px 0}
.pair .sub{margin:0;background:var(--inner);border-radius:24px;padding:26px 28px}
.pair .sub h3{font-size:16px}
.pair ol,.pair ul{padding-left:20px;margin:0;font-size:15px}
.sub.time,.sub.team,.sub.order{background:var(--inner);border-radius:24px;padding:24px 28px}
.sub.time h3,.sub.team h3,.sub.order h3{font-size:15px;color:var(--muted)}
.sub.warn{background:var(--caution-bg);border-radius:24px;padding:26px 30px 20px}
.sub.warn .ico{background:var(--caution);color:var(--lime-ink)}.sub.warn h3{color:var(--caution)}
.sub.warn ul{padding-left:20px;margin:0}.sub.warn li{margin:6px 0}
.sub.check{background:var(--inner);border-radius:24px;padding:26px 30px}
.sub.check .ico{background:var(--lime);color:var(--lime-ink)}
.sub.check ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 26px}
li.cb{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)}
li.cb::before{content:"";width:16px;height:16px;border:1.5px solid var(--faint);border-radius:5px;flex:none;margin-top:6px}
.sub.defect h3{color:var(--bad)}.sub.defect .ico{background:var(--bad);color:var(--lime-ink)}
.sub.g1,.sub.g2,.sub.g3{padding:22px 28px;border-radius:24px;background:var(--inner)}
.bb ol,.sub ol{padding-left:22px}
.bb ol>li::marker,.sub ol>li::marker{font-family:var(--latin);font-weight:600;color:var(--sub)}
.body li{margin:5px 0}
.body li,.body p{overflow-wrap:anywhere}
.body p strong,.body li strong{font-weight:700;color:var(--fg)}
.body a{color:var(--fg)}
blockquote.note{margin:12px 0;padding:18px 22px;background:var(--inner);border-radius:20px;font-size:14.5px;color:var(--muted);display:flex;gap:14px;align-items:flex-start}
blockquote.note p{margin:0;color:var(--muted)}
.nl{font-family:var(--latin);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);border:1px dashed var(--line2);border-radius:999px;padding:3px 10px;flex:none}
details.src{margin:10px 0;font-size:13.5px;color:var(--muted)}details.src summary{cursor:pointer;font-weight:500;padding:6px 0}details.src summary .stepn,details.src summary .ico{display:none}details.src ul{padding-left:18px}details.src li{color:var(--muted)}
.body table{border-collapse:collapse;width:100%;font-size:14.5px;margin:12px 0;display:block;overflow-x:auto}
.body th,.body td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);color:#d4d4d8}
.body thead th{font-size:13px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line2)}
.body td:first-child{font-weight:600;white-space:nowrap;color:var(--fg)}
.body code{font-family:var(--latin);font-size:13px;background:var(--inner);padding:2px 8px;border-radius:999px;color:var(--muted)}
mark.add{background:var(--add-bg);color:var(--add-fg);font-weight:700;padding:1px 6px;border-radius:3px;font-size:.8em;margin-right:4px}mark.chg{background:var(--chg-bg);color:var(--chg-fg);font-weight:700;padding:1px 6px;border-radius:3px;font-size:.8em;margin-right:4px}.chip.add{background:var(--add-bg);color:var(--add-fg);border-color:transparent}
mark.todo{background:var(--todo-bg);color:var(--todo-fg);font-weight:600;padding:1px 9px;font-size:.8em;border-radius:999px}
/* photos: never cropped */
.inlph{margin:16px 0 22px;padding:22px;background:var(--inner);border-radius:28px}
.inl{margin:0 0 18px}.inl:last-child{margin-bottom:0}
.inl-h{font-size:13.5px;font-weight:500;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:8px}
.inl-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.phgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
figure.ph{margin:0;background:var(--card);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}
figure.ph .badge{position:absolute;top:12px;left:12px;font-size:0;padding:5px 12px;border-radius:999px;background:rgba(8,8,10,.78);color:var(--fg);z-index:1;display:flex;align-items:center;gap:6px;backdrop-filter:blur(6px)}
figure.ph .badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--muted)}
figure.ph.bad .badge::before{background:var(--bad)}figure.ph.good .badge::before{background:var(--good)}figure.ph.caution .badge::before{background:var(--caution)}
figure.ph.bad .badge::after{content:"잘못된 예";font-size:12px;font-weight:600}
figure.ph.good .badge::after{content:"잘된 예";font-size:12px;font-weight:600}
figure.ph.caution .badge::after{content:"주의 확인";font-size:12px;font-weight:600}
figure.ph.check .badge::after{content:"확인 필요";font-size:12px;font-weight:600}
figure.ph img{width:100%;max-width:100%;aspect-ratio:4/3;object-fit:contain;display:block;background:var(--inner)}
figure.ph figcaption{padding:14px 16px 18px;font-size:14px;display:flex;flex-direction:column;gap:2px;line-height:1.55;border-top:2px solid var(--line2)}
figure.ph.bad figcaption{border-top-color:var(--bad)}figure.ph.good figcaption{border-top-color:var(--good)}figure.ph.caution figcaption{border-top-color:var(--caution)}
.pn{font-family:var(--latin);font-size:11px;color:var(--faint);letter-spacing:.06em}
figure.ph figcaption p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.rgrid.open{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
figure.r{margin:0;min-width:0}
figure.r img{width:100%;max-width:100%;height:260px;object-fit:contain;display:block;background:var(--card);border-radius:16px}
.rgrid:not(.open) figure.r img{height:150px}
figure.r figcaption{font-size:12.5px;color:var(--muted);line-height:1.45;padding-top:8px}
figure.r b{font-family:var(--latin);font-weight:500;color:var(--faint)}
.inl-note{font-size:13px;color:var(--muted);margin:8px 0 0}
figure.dg{margin:20px 0 28px;max-width:820px}figure.dg img{width:100%;max-width:100%;display:block;background:#fff;border-radius:20px}
figure.dg figcaption{font-size:13px;color:var(--muted);padding-top:10px}figure.dg.missing{border:1px dashed var(--line2);border-radius:20px;padding:22px;text-align:center}
section.photos{margin-top:8px;padding-top:52px;border-top:1px solid var(--line)}
h4.ph-h{margin:20px 0 12px;font-size:15px;display:flex;gap:8px;align-items:center}
h4.ph-h span{font-family:var(--latin);color:var(--faint);font-weight:500;font-size:13px}
h4.bad{color:var(--bad)}h4.good{color:var(--good)}h4.caution{color:var(--caution)}
details.refs{margin-top:20px;background:var(--inner);border-radius:24px}
details.refs summary{cursor:pointer;padding:16px 24px;font-weight:500;font-size:14px;color:var(--muted)}
details.refs summary:focus-visible{outline:2px solid var(--lime);border-radius:24px}
details.refs .rgrid{padding:0 22px 22px}
figure img{cursor:zoom-in}
#lb[hidden]{display:none}
#lb{position:fixed;inset:0;background:rgba(8,8,10,.94);display:grid;place-items:center;padding:24px;z-index:50}
#lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;cursor:zoom-out}
:focus-visible{outline-color:var(--lime)}
@media (max-width:860px){.layout{grid-template-columns:minmax(0,1fr);gap:20px}nav.toc{position:static;max-height:300px;background:var(--card);border-radius:24px;padding:14px}.op{padding:40px 24px 30px;flex-direction:column;align-items:flex-start}.body{padding:0 22px 40px}.cover{padding:48px 4px 24px}.phases{grid-template-columns:repeat(2,minmax(0,1fr))}.pair{grid-template-columns:minmax(0,1fr)}article.ch{border-radius:28px}.legend{border-radius:24px}.inlph{padding:16px;border-radius:22px}}
@media (max-width:480px){.phases{grid-template-columns:minmax(0,1fr)}}
img.tbimg{width:128px;max-width:none;height:auto;display:block;border-radius:8px}
.rvb{display:inline-block;background:#D6F24C;color:#1B1B1F;font-weight:700;font-size:12px;padding:2px 8px;border-radius:10px;margin-right:4px}figure.dg.rv img{outline:3px solid #D6F24C;outline-offset:2px}
.rgrid:not(.open) figure.r img{height:150px}
.phgrid.n1{grid-template-columns:1fr}.phgrid.n1 figure.ph img{aspect-ratio:var(--ar,auto);max-height:620px}
.phgrid.n2{grid-template-columns:1fr 1fr}
.rgrid.open.n1{grid-template-columns:1fr}.rgrid.open.n1 figure.r img{height:auto;max-height:620px}
.rgrid.open.n2{grid-template-columns:1fr 1fr}.rgrid.open.n2 figure.r img{height:340px}
@media(max-width:600px){.rgrid.open.n2 figure.r img{height:200px}}
.phgrid.n4{grid-template-columns:1fr 1fr}.rgrid.open.n4{grid-template-columns:1fr 1fr}.rgrid.open.n4 figure.r img{height:300px}@media(max-width:600px){.rgrid.open.n4 figure.r img{height:180px}}

/* 2026-10-18 묶음별 사진 크기 통일: 같은 묶음은 같은 비율 상자(비율 변경 · 자르기 없음) */
.phgrid.r43:not(.n1) figure.ph img,.rgrid.open.r43:not(.n1) figure.r img{aspect-ratio:4/3;height:auto}
.phgrid.r34:not(.n1) figure.ph img,.rgrid.open.r34:not(.n1) figure.r img{aspect-ratio:3/4;height:auto}
.phgrid.r11:not(.n1) figure.ph img,.rgrid.open.r11:not(.n1) figure.r img{aspect-ratio:1/1;height:auto}
.phgrid.r34:not(.n1),.rgrid.open.r34:not(.n1){max-width:760px}
.phgrid.n1.r34 figure.ph img,.rgrid.open.n1.r34 figure.r img{max-height:620px;width:auto;max-width:100%;margin:0 auto}

/* 2026-10-19 사진 표시: 글자 없이 O / X / ! */
figure.ph .badge{font-size:0!important;width:34px!important;height:34px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.28);backdrop-filter:none!important}
figure.ph .badge::before{content:none!important;display:none!important}
figure.ph .badge::after{font:800 17px/1 Inter,'Noto Sans KR',sans-serif!important;color:#fff}
figure.ph.bad .badge{background:#D93A2B!important}figure.ph.bad .badge::after{content:"X"!important}
figure.ph.good .badge{background:#2E8B57!important}figure.ph.good .badge::after{content:"O"!important}
figure.ph.caution .badge{background:#E5A100!important}figure.ph.caution .badge::after{content:"!"!important}
figure.ph.check .badge{background:#6B7280!important}figure.ph.check .badge::after{content:"?"!important}

/* ---- 웹사이트용 추가 (2026-11-03) ---- */
html,body{margin:0}
body{padding-top:calc(60px + env(safe-area-inset-top,0px))}
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;height:60px;padding:env(safe-area-inset-top,0px) 16px 0;display:flex;align-items:center;gap:14px;background:rgba(8,8,10,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--latin);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--fg);text-decoration:none;white-space:nowrap}
.logo small{font-weight:400;font-size:12px;color:var(--sub);margin-left:4px}
.sbox{margin-left:auto;flex:0 1 340px;min-width:0}
.sbox input,.bigsearch input{width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line2);color:var(--fg);border-radius:999px;padding:9px 18px;font:inherit;font-size:14px;outline:none}
.sbox input:focus,.bigsearch input:focus{border-color:var(--lime)}
.bigsearch{max-width:640px}.bigsearch input{padding:15px 24px;font-size:16px}
.menu{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.menu span{display:block;width:22px;height:2px;background:var(--fg);border-radius:2px}
nav.toc{top:84px;max-height:calc(100vh - 108px)}
nav.toc a[aria-current]{background:var(--card);color:var(--fg)}
nav.toc a[aria-current] .tn{color:var(--lime)}
nav.toc .home{margin-bottom:6px}
.layout{padding-top:24px}
h1.ct{font-weight:700;font-size:clamp(32px,5.4vw,60px);line-height:1.12;letter-spacing:-.035em;margin:0;text-wrap:balance}
article.ch{margin-top:0}
.cover{padding:56px 8px 24px}
#results{display:flex;flex-direction:column;gap:10px;max-width:820px}
#results .rh{font-size:14px;color:var(--muted)}
#results a{display:block;background:var(--card);border-radius:20px;padding:16px 20px;color:var(--fg);text-decoration:none;border:1px solid transparent}
#results a:hover,#results a:focus-visible{border-color:var(--line2);outline:none}
#results small{font-family:var(--latin);font-size:12px;color:var(--sub);display:block}
#results b{font-size:16px;display:block;margin:2px 0 4px}
#results p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
#results mark{background:var(--lime);color:var(--lime-ink);border-radius:4px;padding:0 3px}
.bx{width:22px!important;height:22px!important;border-radius:50%;display:grid!important;place-items:center;font:800 12px/1 Inter,sans-serif;font-style:normal;color:#fff}
.bx.b{background:#D93A2B}.bx.g{background:#2E8B57}.bx.c{background:#E5A100}
.pgrp{background:var(--card);border-radius:32px;padding:28px}
.pgh{display:flex;flex-direction:column;gap:4px;margin-bottom:18px}
.pgh b{font-family:var(--latin);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--muted)}
.pgh span{font-size:24px;font-weight:700;letter-spacing:-.02em}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.cc{display:flex;flex-direction:column;gap:2px;background:var(--inner);border-radius:20px;padding:16px 18px;color:var(--fg);text-decoration:none;border:1px solid transparent;transition:border-color .15s}
.cc:hover,.cc:focus-visible{border-color:var(--line2);outline:none}
.cc .tn{font-size:13px}.cc b{font-size:17px;font-weight:700}.cc small{font-size:12px;color:var(--faint)}
.phome .cc{background:var(--card);border-radius:24px;padding:20px 24px}
.intoc{margin:0 56px 8px;background:var(--inner);border-radius:24px}
.intoc summary{cursor:pointer;padding:16px 24px;font-size:14px;color:var(--muted);font-weight:500}
.intoc-l{display:flex;flex-direction:column;padding:0 14px 16px}
.intoc-l a{color:var(--muted);text-decoration:none;padding:7px 10px;border-radius:12px;font-size:14.5px}
.intoc-l a:hover{background:var(--card);color:var(--fg)}
section.blk{scroll-margin-top:84px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.pager a{background:var(--card);border-radius:24px;padding:18px 22px;color:var(--fg);text-decoration:none;font-weight:600;display:flex;flex-direction:column;border:1px solid transparent}
.pager a:hover{border-color:var(--line2)}
.pager .nx{text-align:right}
.pager small{font-weight:400;font-size:12px;color:var(--sub)}
#lb{padding:56px 12px 40px;flex-direction:column}
#lb:not([hidden]){display:flex;align-items:center;justify-content:center}
#lb img{max-width:100%;max-height:calc(100% - 40px);touch-action:pinch-zoom}
#lb .lbx{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lbc{color:var(--muted);font-size:14px;margin:12px 0 0;text-align:center;max-width:800px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:30}
@media (max-width:860px){
 .menu{display:flex}
 .logo small{display:none}
 .sbox{flex:1 1 auto}
 nav.toc{position:fixed;top:60px;left:0;bottom:0;width:min(300px,84vw);max-height:none;z-index:35;border-radius:0 24px 24px 0;transform:translateX(-105%);transition:transform .2s;padding:16px 10px calc(16px + env(safe-area-inset-bottom,0px));overflow:auto}
 body.nav-open nav.toc{transform:none}
 .intoc{margin:0 22px 8px}
 .layout{padding-top:12px}
 .pgrp{padding:20px;border-radius:26px}
 .cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pager{grid-template-columns:1fr}
 .pager .nx{text-align:left}
 .phgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (max-width:420px){.phgrid.n2,.phgrid.n4,.rgrid.open.n2,.rgrid.open.n4{grid-template-columns:1fr 1fr;gap:8px}figure.ph figcaption{padding:10px 12px 12px;font-size:13px}}
body.searching .cover .k,body.searching .cover h1,body.searching .cover>p,body.searching .legend,body.searching .pgrp,body.searching .phome{display:none}
body.searching .cover{padding-top:24px}
@media (max-width:860px){.body{padding:0 18px 36px}.op{padding:32px 20px 24px}.big{display:none}.intoc{margin:0 14px 8px}.body ol,.body ul{padding-left:20px}article.ch{border-radius:22px}}
/* 2026-11-03 휴대폰 상단바(노치·상태표시줄 포함 높이)에 메뉴 첫 줄이 가리던 문제 */
.topbar{box-sizing:border-box;height:calc(60px + env(safe-area-inset-top,0px))}
@media (max-width:860px){nav.toc{top:calc(60px + env(safe-area-inset-top,0px));padding-top:20px}}
/* 2026-11-03 휴대폰 메뉴: 15번 아래로 스크롤 안 되던 문제 */
@media (max-width:860px){
 nav.toc{display:block;bottom:auto;height:calc(100dvh - 60px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;box-sizing:border-box;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
 nav.toc a{display:flex}
 body.nav-open{overflow:hidden}
}