/* teach.css — 강의·시험·캡스톤 공용 스타일 (단일 소스, 5~10년) */
:root{--bg:#06080d;--bg2:#0b0f18;--txt:#eef1f7;--txt2:#94a0b8;--line:rgba(255,255,255,.08);
 --a:#2dd4bf;--b:#818cf8;--ok:#34d399;--no:#fb7185;--am:#fbbf24}


*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);overflow-x:hidden;
 font-family:-apple-system,BlinkMacSystemFont,'Pretendard','Segoe UI',sans-serif;
 -webkit-font-smoothing:antialiased}

/* ══ 데크 ══ */
.deck{position:relative;height:calc(100dvh - 64px);overflow:hidden;touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .65s cubic-bezier(.77,0,.18,1);will-change:transform}
.sl{flex:0 0 100%;height:100%;display:grid;grid-template-columns:1.2fr 1fr;position:relative}
.sl:nth-child(even){grid-template-columns:1fr 1.2fr}
.sl:nth-child(even) .im{order:2}

.im{position:relative;overflow:hidden;background:#0b0f18}
.im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 filter:brightness(.92);transform:scale(1.06);transition:transform 6s ease-out}
.sl.on .im img{transform:scale(1.0)}
.im::after{content:'';position:absolute;inset:0;
 background:linear-gradient(90deg,transparent 55%,var(--bg) 100%)}
.sl:nth-child(even) .im::after{background:linear-gradient(270deg,transparent 55%,var(--bg) 100%)}
.ghost{position:absolute;bottom:-2%;left:2%;font-size:clamp(6rem,16vw,13rem);font-weight:900;
 color:rgba(255,255,255,.04);line-height:1;user-select:none}

.tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.6rem,4.5vw,4rem);z-index:2}
.eb{font-size:.68rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
 color:var(--b);margin-bottom:1rem}
.tx h2 em{font-style:normal;color:var(--a)}
.tx h2{font-size:clamp(1.7rem,3.4vw,2.9rem);font-weight:850;letter-spacing:-.025em;
 line-height:1.16;margin-bottom:1rem;text-wrap:balance}
.tx p{color:var(--txt2);max-width:30rem;font-size:.98rem;line-height:1.7;text-wrap:pretty}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.chips span{font-size:.7rem;font-weight:650;letter-spacing:.05em;padding:.34rem .8rem;
 border-radius:999px;border:1px solid color-mix(in oklab,var(--a) 35%,transparent);
 color:color-mix(in oklab,var(--a) 80%,white);background:color-mix(in oklab,var(--a) 8%,transparent)}

/* 슬라이드 입장 모션 */
.sl .eb,.sl h2,.sl p,.sl .chips{opacity:0;transform:translateY(18px);
 transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.sl.on .eb{opacity:1;transform:none;transition-delay:.15s}
.sl.on h2{opacity:1;transform:none;transition-delay:.24s}
.sl.on p{opacity:1;transform:none;transition-delay:.33s}
.sl.on .chips{opacity:1;transform:none;transition-delay:.42s}

/* ══ 컨트롤 ══ */
.hud{position:absolute;left:0;right:0;bottom:0;z-index:20;
 display:flex;align-items:center;gap:1rem;padding:1rem clamp(1.2rem,3vw,2.4rem)}
.pager{font-variant-numeric:tabular-nums;font-weight:800;font-size:.85rem;letter-spacing:.08em}
.pager small{color:var(--txt2);font-weight:600}
.rail{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.rail i{display:block;height:100%;width:0;border-radius:2px;
 background:linear-gradient(90deg,var(--a),var(--b));transition:width .5s cubic-bezier(.77,0,.18,1)}
.navs{display:flex;gap:.5rem}
.navs button{width:42px;height:42px;border-radius:12px;font-size:1.05rem;cursor:pointer;
 color:var(--txt);background:rgba(255,255,255,.05);border:1px solid var(--line);transition:.2s}
.navs button:hover{border-color:var(--a);color:var(--a);background:color-mix(in oklab,var(--a) 10%,transparent)}
.dots{position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);z-index:20;
 display:flex;flex-direction:column;gap:.55rem}
.dots button{width:8px;height:8px;border-radius:50%;border:none;cursor:pointer;
 background:rgba(255,255,255,.2);transition:.25s;position:relative}
.dots button.on{background:var(--b);transform:scale(1.45)}
.dots button:hover::after{content:attr(data-t);position:absolute;right:16px;top:50%;
 transform:translateY(-50%);white-space:nowrap;font-size:.68rem;color:var(--txt2);
 background:rgba(10,14,20,.92);border:1px solid var(--line);border-radius:7px;padding:.25rem .6rem}
.hint{position:absolute;top:1rem;right:1.4rem;z-index:20;font-size:.66rem;letter-spacing:.12em;
 color:var(--txt2);opacity:.55}
.crumb{position:absolute;top:1rem;left:1.4rem;z-index:20;font-size:.74rem;color:var(--txt2)}
.crumb a{color:var(--b);text-decoration:none} .crumb a:hover{text-decoration:underline}

@media (prefers-reduced-motion: reduce){
 .track{transition:none} .im img{transition:none;transform:none}
 .sl .eb,.sl h2,.sl p,.sl .chips{transition:none;opacity:1;transform:none}
}
@media(max-width:860px){
 .sl,.sl:nth-child(even){grid-template-columns:1fr;grid-template-rows:52% 48%}
 .sl:nth-child(even) .im{order:0}
 .im::after{background:linear-gradient(180deg,transparent 55%,var(--bg) 100%) !important}
 .dots{display:none} .hint{display:none}
 .tx{justify-content:flex-start;padding-top:1.1rem}
}
.exlinks{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.exlinks a{padding:.65rem 1.3rem;border-radius:12px;font-weight:800;font-size:.86rem;
 text-decoration:none;color:var(--a);border:1px solid color-mix(in oklab,var(--a) 40%,transparent);
 background:color-mix(in oklab,var(--a) 8%,transparent);transition:.2s}
.exlinks a:hover{background:var(--a);color:#06080d}

/* ── 코스 맵: 어디서든 전체 이동 ── */
.cmap{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.cmap a{font-size:.76rem;font-weight:800;padding:.5rem .95rem;border-radius:10px;text-decoration:none;
 border:1px solid transparent;transition:.18s;color:#07090f}
.cmap a:hover{filter:brightness(1.15);transform:translateY(-2px)}
.cmap .m-gray{background:none;color:#94a0b8;border-color:rgba(255,255,255,.16)}
.cmap .m-gray:hover{color:#eef1f7;border-color:#94a0b8}
.cmap .m-ct{background:#22d3ee}.cmap .m-ec{background:#a78bfa}.cmap .m-ac{background:#2dd4bf}
.cmap .m-dc{background:#818cf8}.cmap .m-rf{background:#fbbf24}
.cmap .m-mid{background:#f59e0b}.cmap .m-fin{background:#fb7185}



*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--txt);line-height:1.65;-webkit-font-smoothing:antialiased;
 font-family:-apple-system,BlinkMacSystemFont,'Pretendard','Segoe UI',sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:0 1.5rem}
a{color:inherit;text-decoration:none}
.crumb{padding:calc(64px + 1.6rem) 0 0;font-size:.8rem;color:var(--txt2)}
.crumb a{color:var(--a)} .crumb a:hover{text-decoration:underline}
.hero{padding:2.6rem 0 1.8rem;text-align:center}
.hero .badge{display:inline-block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
 color:var(--a);border:1px solid color-mix(in oklab,var(--a) 35%,transparent);border-radius:999px;
 padding:.35rem 1rem;font-weight:700;margin-bottom:1rem}
.hero h1{font-size:clamp(1.9rem,4.5vw,2.9rem);font-weight:900;letter-spacing:-.03em}
.hero p{color:var(--txt2);margin-top:.7rem}
.tabs{display:flex;justify-content:center;gap:.6rem;margin:1.4rem 0 2rem}
.tabs button{font:inherit;font-weight:700;font-size:.9rem;color:var(--txt2);cursor:pointer;
 background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.5rem;transition:.2s}
.tabs button.on{color:#07090f;background:var(--a);border-color:var(--a)}
.exam{display:none}.exam.on{display:block}

/* 점수판 */
.board{position:sticky;top:64px;z-index:30;display:flex;gap:.8rem;align-items:center;
 background:rgba(13,17,26,.93);backdrop-filter:blur(10px);
 border:1px solid var(--line);border-radius:14px;padding:.75rem 1.1rem;margin-bottom:1.5rem}
.board .t{font-size:.78rem;color:var(--txt2);white-space:nowrap}
.board b{font-variant-numeric:tabular-nums;font-size:1.05rem}
.bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .4s}
.board button{font:inherit;font-size:.72rem;font-weight:700;color:var(--txt2);cursor:pointer;
 background:none;border:1px solid var(--line);border-radius:8px;padding:.35rem .8rem}
.board button:hover{color:var(--a);border-color:var(--a)}

/* 문항 */
.q{border:1px solid var(--line);border-radius:16px;margin-bottom:.9rem;overflow:hidden;
 background:linear-gradient(170deg,rgba(26,35,50,.5),rgba(12,16,23,.85))}
.q.right{border-color:color-mix(in oklab,var(--ok) 40%,transparent)}
.q.wrong{border-color:color-mix(in oklab,var(--no) 45%,transparent)}
.q .head{display:flex;align-items:center;gap:.9rem;padding:1rem 1.25rem}
.q .head .no{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
 font-size:.8rem;font-weight:800;background:color-mix(in oklab,var(--a) 13%,transparent);
 color:var(--a);border:1px solid color-mix(in oklab,var(--a) 28%,transparent)}
.q.wrong .head .no{background:color-mix(in oklab,var(--no) 14%,transparent);color:var(--no);
 border-color:color-mix(in oklab,var(--no) 30%,transparent)}
.q .ttl{flex:1;font-weight:700;font-size:.96rem}
.q .ttl small{display:block;font-weight:500;font-size:.73rem;color:var(--txt2);margin-top:.1rem}
.q .pts{font-size:.76rem;font-weight:800;color:var(--am)}
.q .bd{padding:0 1.25rem 1.2rem}
.q .prob{font-size:.93rem;margin-bottom:.4rem}
.q img{max-width:100%;border-radius:10px;border:1px solid var(--line);margin:.4rem 0 .6rem}
.given{font-family:ui-monospace,Menlo,monospace;font-size:.86rem;font-weight:700;color:var(--a);
 background:color-mix(in oklab,var(--a) 7%,transparent);border:1px solid color-mix(in oklab,var(--a) 35%,transparent);
 border-left:3px solid var(--a);border-radius:10px;
 padding:.65rem .95rem;margin:.4rem 0 .8rem}
.opts{display:grid;gap:.5rem}
.opts button{font:inherit;text-align:left;white-space:normal;line-height:1.5;width:100%;font-size:.88rem;color:var(--txt);cursor:pointer;
 background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;
 padding:.68rem 1rem;transition:.15s}
.opts button:hover:not(:disabled){border-color:color-mix(in oklab,var(--a) 45%,transparent)}
.opts button.ok{border-color:var(--ok);background:color-mix(in oklab,var(--ok) 10%,transparent)}
.opts button.bad{border-color:var(--no);background:color-mix(in oklab,var(--no) 9%,transparent)}
.opts button:disabled{cursor:default;opacity:.9}
/* 해설: 답 가림 → 채점 후 열림 */
.sol{display:none;margin-top:.7rem;border-left:3px solid var(--b);
 background:color-mix(in oklab,var(--b) 7%,transparent);border-radius:0 10px 10px 0;
 padding:.85rem 1rem;font-size:.85rem}
.sol.on{display:block}
.sol b{color:var(--b)}

/* 결과 패널 */
.result{display:none;border:1px solid var(--line);border-radius:20px;padding:2rem;text-align:center;
 background:linear-gradient(170deg,rgba(26,35,50,.6),rgba(12,16,23,.9));margin:1.8rem 0}
.result.on{display:block}
.result .big{font-size:3rem;font-weight:900;font-variant-numeric:tabular-nums}
.result .big small{font-size:1.1rem;color:var(--txt2);font-weight:600}
.result p{color:var(--txt2);margin:.5rem 0 1.2rem}
.result .pass{color:var(--ok)} .result .fail{color:var(--no)}
.result button{font:inherit;font-weight:800;font-size:.92rem;cursor:pointer;border-radius:12px;
 padding:.75rem 1.6rem;margin:0 .3rem;transition:.2s}
.rv{color:#07090f;background:var(--a);border:1px solid var(--a)}
.rv:hover{filter:brightness(1.12)}
.rs{color:var(--txt2);background:none;border:1px solid var(--line)}
.rs:hover{color:var(--a);border-color:var(--a)}
.foot{padding:2.5rem 0 5rem;text-align:center;color:var(--txt2);font-size:.85rem}
.foot a{color:var(--a)}
@media(max-width:640px){.q .pts{display:none}}
/* ── 코스 맵: 어디서든 전체 이동 ── */
.cmap{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.cmap a{font-size:.76rem;font-weight:800;padding:.5rem .95rem;border-radius:10px;text-decoration:none;
 border:1px solid transparent;transition:.18s;color:#07090f}
.cmap a:hover{filter:brightness(1.15);transform:translateY(-2px)}
.cmap .m-gray{background:none;color:#94a0b8;border-color:rgba(255,255,255,.16)}
.cmap .m-gray:hover{color:#eef1f7;border-color:#94a0b8}
.cmap .m-ct{background:#22d3ee}.cmap .m-ec{background:#a78bfa}.cmap .m-ac{background:#2dd4bf}
.cmap .m-dc{background:#818cf8}.cmap .m-rf{background:#fbbf24}
.cmap .m-mid{background:#f59e0b}.cmap .m-fin{background:#fb7185}
.result .cmap{justify-content:center}





a{color:inherit;text-decoration:none}
.wrap{max-width:860px;margin:0 auto;padding:0 1.5rem}
.hero{padding:calc(64px + 3rem) 0 2.2rem;text-align:center}
.badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
 color:var(--a);border:1px solid color-mix(in oklab,var(--a) 35%,transparent);border-radius:999px;padding:.4rem 1.05rem;margin-bottom:1rem}
.hero h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:900;letter-spacing:-.03em}
.hero p{color:var(--txt2);margin-top:.6rem}
.stage{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:1rem;
 border:1px solid var(--line);border-radius:16px;padding:.85rem 1.1rem;margin-bottom:.55rem;
 background:linear-gradient(170deg,rgba(26,35,50,.42),rgba(10,14,21,.82));transition:.25s}
.stage:hover{transform:translateX(6px);border-color:color-mix(in oklab,var(--a) 50%,transparent)}
.stage .num{font-family:ui-monospace,Menlo,monospace;font-size:1.15rem;font-weight:800;
 color:color-mix(in oklab,var(--a) 80%,white)}
.stage .num small{display:block;font-size:.58rem;letter-spacing:.12em;color:var(--txt2)}
.stage .tx b{display:block;font-size:.98rem;font-weight:750}
.stage .tx span{font-size:.78rem;color:var(--txt2)}
.stage .arr{color:var(--txt2);font-weight:800} .stage:hover .arr{color:var(--a)}








/* ══ 슬라이드 스타일 변주 — body[data-style] 로 학기마다 교체 ══
   1(기본): 좌우 분할 교차   2: 풀블리드 포스터   3: 상단 이미지 카드 */
body[data-style="2"] .sl{grid-template-columns:1fr !important}
body[data-style="2"] .im{position:absolute;inset:0}
body[data-style="2"] .im::after{background:linear-gradient(180deg,transparent 30%,rgba(6,8,13,.55) 62%,var(--bg) 100%) !important}
body[data-style="2"] .tx{position:relative;justify-content:flex-end;padding-bottom:8rem;max-width:820px}
body[data-style="2"] .ghost{font-size:clamp(9rem,24vw,20rem);left:auto;right:2%}
body[data-style="3"] .sl{grid-template-columns:1fr !important;grid-template-rows:56% 44%}
body[data-style="3"] .sl:nth-child(even) .im{order:0}
body[data-style="3"] .im::after{background:linear-gradient(180deg,transparent 60%,var(--bg) 100%) !important}
body[data-style="3"] .tx{align-items:center;text-align:center;justify-content:flex-start;padding-top:1.4rem}
body[data-style="3"] .chips,body[data-style="3"] .cmap{justify-content:center}

/* ══ 캡스톤 토픽 페이지 ══ */
.cap-hero{max-width:900px;margin:0 auto;padding:calc(64px + 3rem) 1.5rem 2rem}
.cap-hero .field{font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--a)}
.cap-hero h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:900;letter-spacing:-.03em;margin:.5rem 0;text-wrap:balance}
.cap-hero h1 em{font-style:normal;color:var(--a)}
.cap-hero p{color:var(--txt2);max-width:640px;text-wrap:pretty}
.prereq{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1.1rem}
.prereq span{font-size:.7rem;font-weight:800;padding:.32rem .7rem;border-radius:999px;color:#07090d}
.prereq .p-ct{background:#22d3ee}.prereq .p-ec{background:#a78bfa}.prereq .p-ac{background:#2dd4bf}
.prereq .p-dc{background:#818cf8}.prereq .p-rf{background:#fbbf24}
.prereq .p-note{background:none;color:var(--txt2);border:1px solid var(--line)}
.cap-wrap{max-width:900px;margin:0 auto;padding:1rem 1.5rem 4rem}
.cap-sec{border:1px solid var(--line);border-radius:18px;margin-bottom:1rem;overflow:hidden;
 background:linear-gradient(170deg,rgba(26,35,50,.45),rgba(10,14,21,.85))}
.cap-sec>h2{display:flex;align-items:baseline;gap:.7rem;padding:1rem 1.3rem;font-size:1rem;font-weight:800;
 border-bottom:1px solid var(--line)}
.cap-sec>h2::before{content:attr(data-n);font-family:ui-monospace,Menlo,monospace;font-size:.76rem;color:var(--a)}
.cap-sec>h2 .en{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--txt2);text-transform:uppercase}
.cap-sec .bd{padding:1rem 1.3rem 1.2rem;font-size:.9rem;color:var(--txt2)}
.cap-sec .bd b{color:var(--txt)}
.tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.tools span{font-size:.72rem;font-weight:700;padding:.34rem .8rem;border-radius:9px;
 border:1px solid color-mix(in oklab,var(--a) 35%,transparent);color:color-mix(in oklab,var(--a) 85%,white)}
.paper{display:flex;gap:1rem;align-items:center;padding:1rem 1.3rem;margin:0 1.3rem 1.2rem;border-radius:12px;
 border:1px dashed color-mix(in oklab,var(--a) 40%,transparent);
 background:color-mix(in oklab,var(--a) 6%,transparent)}
.paper .ic{font-size:1.6rem}
.paper .t b{display:block;font-size:.9rem}
.paper .t span{font-size:.76rem;color:var(--txt2)}

/* ══ 랩 작업대 (lab_work.js) ══ */
.wtabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.wtabs button{font-size:.84rem;font-weight:800;padding:.6rem 1.1rem;border-radius:11px;cursor:pointer;
 background:none;color:var(--txt2);border:1px solid var(--line);transition:.18s}
.wtabs button:hover{color:var(--txt)}
.wtabs button.on{background:var(--a);color:#07090d;border-color:var(--a)}
.pane .bd{border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.3rem;
 background:linear-gradient(170deg,rgba(26,35,50,.45),rgba(10,14,21,.85));font-size:.9rem;color:var(--txt2)}
.pane .sm{font-size:.78rem;margin-top:.6rem;color:var(--txt2)}
.spec,.lotto{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.5rem}
.spec th,.spec td,.lotto th,.lotto td{border:1px solid var(--line);padding:.5rem .75rem;text-align:left}
.spec th,.lotto th{color:var(--a);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.02)}
.lotto td{text-align:center}.lotto td:first-child{font-weight:900;color:var(--a)}
.spec td:first-child{color:var(--txt);font-weight:700;white-space:nowrap}
.btn{display:inline-block;font-weight:800;font-size:.84rem;padding:.6rem 1.1rem;border-radius:11px;
 background:var(--a);color:#07090d}
.btn:hover{filter:brightness(1.12)}
.sub{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem;margin-bottom:.8rem}
.sub .s{border:1px solid var(--line);border-radius:12px;padding:.75rem .95rem;font-size:.82rem}
.sub .s b{display:block;color:var(--txt);margin:.2rem 0}
.sub .s .n{font-family:ui-monospace,Menlo,monospace;font-size:.64rem;color:var(--a);letter-spacing:.1em}
.faq details{border-bottom:1px solid var(--line);padding:.6rem .1rem}
.faq summary{cursor:pointer;font-weight:700;font-size:.87rem;color:var(--txt)}
.faq p{font-size:.83rem;color:var(--txt2);margin:.45rem 0 0}
.notice{border:1px solid color-mix(in oklab,#fb7185 45%,transparent);background:color-mix(in oklab,#fb7185 7%,transparent);
 border-left:3px solid #fb7185;border-radius:10px;padding:.7rem 1rem;margin:.8rem 0;font-size:.85rem;color:var(--txt2)}
.notice b{color:#fb7185}


/* ══════════════════════════════════════════════
   모바일 공통 가드 (단일 소스) — 가로 스크롤 금지 + 요소 겹침 방지
   ══════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{min-width:0}
img,svg,video,table{max-width:100%}

@media(max-width:860px){
  /* 데크: 세로 분할 + 하단 HUD 자리 확보 */
  .sl,.sl:nth-child(even){grid-template-columns:1fr !important;grid-template-rows:46% 54%}
  .sl:nth-child(even) .im{order:0}
  .tx{padding:1.1rem 1.15rem 5.6rem;justify-content:flex-start}
  .tx h2{font-size:clamp(1.45rem,6.4vw,2rem);line-height:1.22}
  .tx p{font-size:.9rem}
  .eb{font-size:.6rem}
  .ghost{display:none}
  .dots,.hint{display:none}

  /* 크럼: 절대배치 → 한 줄 말줄임 (다음/이전 버튼과 겹침 방지) */
  .crumb{left:1rem;right:5.5rem;top:.7rem;font-size:.68rem;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}

  /* HUD: 좁게, 페이저 축소 */
  .hud{gap:.6rem;padding:.7rem .9rem}
  .hud .pager{font-size:.8rem}
  .navs button{width:38px;height:38px}

  /* 칩·코스맵: 줄바꿈 + 축소 (가로 넘침의 주범) */
  .chips{gap:.35rem;margin-top:.9rem}
  .chips span{font-size:.66rem;padding:.28rem .6rem}
  .cmap{gap:.35rem;margin-top:.9rem}
  .cmap a{font-size:.68rem;padding:.42rem .7rem;border-radius:9px}

  /* 표: 좌우 스와이프 */
  .spec,.lotto,.sec table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

  /* 벤토 타일 1열 */
  .bento{grid-template-columns:1fr !important}
  .hero.s6,.wk.s3,.wtabs,.pane,.faqbox,.notice{grid-column:1/-1 !important}
  .hero h1{font-size:clamp(1.6rem,7vw,2.3rem)}
  .nav{flex-wrap:wrap;gap:.4rem}
  .nav a{font-size:.76rem;padding:.5rem .8rem}

  /* 작업대 탭 */
  .wtabs{gap:.35rem}
  .wtabs button{font-size:.76rem;padding:.5rem .8rem;flex:1 1 auto}
  .pane .bd{padding:1rem 1.05rem;border-radius:16px}
  .sub{grid-template-columns:1fr}

  /* 보고서 */
  .rwrap{padding-left:1rem;padding-right:1rem}
  .meta{grid-template-columns:1fr 1fr}
  .rbar{gap:.4rem;padding:.7rem 0 1.4rem}
  .rbar button{font-size:.76rem;padding:.55rem .85rem}
  .rbar .st{flex:1 1 100%;margin:0 0 .3rem}
  .who{font-size:.78rem;gap:.3rem .7rem;padding:.5rem .8rem}
}

@media(max-width:480px){
  .tx{padding-bottom:5.2rem}
  .tx h2{font-size:clamp(1.3rem,7vw,1.8rem)}
  .cmap a{font-size:.64rem;padding:.38rem .6rem}
  .meta{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
}