/* shelf.css — 입구 정리 (2026-10-01)
   첫 화면 세 갈래 문(.sh-doors) · /play/ · /watch/ 가 함께 쓴다.
   색은 science.css 의 토큰만 쓴다. 갈래 색은 --bc 로 받는다. */

/* ── 영상 칸 ─────────────────────────────── */
.sh-play{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:#000}
.sh-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,opacity .3s}
.sh-play:hover img{transform:scale(1.03);opacity:.9}
.sh-tri{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:rgba(12,21,38,.72);border:1.5px solid var(--brass)}
.sh-tri::after{content:"";position:absolute;left:23px;top:18px;border-style:solid;border-width:11px 0 11px 17px;border-color:transparent transparent transparent var(--brass)}
.sh-len{position:absolute;right:10px;bottom:10px;font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:4px;background:rgba(12,21,38,.8);color:var(--chalk)}
.sh-play:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.sh-frame{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.sh-frame iframe,.sh-frame video{width:100%;height:100%;border:0;display:block}

/* ── 첫 화면 세 갈래 문 ───────────────────── */
.sh-doors{padding-top:40px;padding-bottom:40px}
.sh-doors-h{font-family:var(--disp);font-weight:700;font-size:26px;margin-bottom:6px}
.sh-doors-sub{color:var(--chalk-dim);font-size:15px;margin-bottom:26px}
.sh-door-row{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3)}
.sh-door{padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.sh-door + .sh-door{border-left:1px solid var(--ink-3)}
.sh-door:first-child{padding-left:0}
.sh-door:last-child{padding-right:0}
.sh-cost{font-size:13px;color:var(--brass);letter-spacing:.02em}
.sh-door h3{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1;margin-top:-6px}
.sh-door h3 a:hover{color:var(--brass-soft)}
.sh-lede{font-size:14.5px;color:var(--chalk-dim);line-height:1.7}
.sh-vt{font-size:14px;color:var(--chalk-dim);line-height:1.7}
.sh-vt b{color:var(--chalk);font-weight:500;margin-right:4px}
.sh-dl{list-style:none;display:flex;flex-direction:column}
.sh-dl li + li{border-top:1px solid var(--ink-3)}
.sh-dl a{display:block;padding:11px 0}
.sh-dl b{display:block;font-weight:500;font-size:15px;line-height:1.45}
.sh-dl span{display:block;font-size:13px;color:var(--chalk-dim);margin-top:2px;line-height:1.55}
.sh-dl a:hover b{color:var(--brass-soft)}
.sh-dl-play a{display:grid;grid-template-columns:10px 1fr;column-gap:12px;align-items:baseline}
.sh-dl-play i{width:8px;height:8px;border-radius:50%;background:var(--bc);transform:translateY(-1px)}
.sh-dl-play span{grid-column:2}
.sh-dl-read b{font-family:var(--disp);font-weight:700;font-size:16.5px}
.sh-all{margin-top:auto;font-size:14px;color:var(--cyan);padding-top:6px}
.sh-all:hover{color:var(--chalk)}

@media (max-width:900px){
  .sh-door-row{grid-template-columns:1fr;border-bottom:0}
  .sh-door{padding:24px 0}
  .sh-door + .sh-door{border-left:0;border-top:1px solid var(--ink-3)}
  .sh-door h3{font-size:34px}
}

/* ── /play/ · /watch/ 공통 ───────────────── */
.sh-wrap{max-width:1120px;margin:0 auto;padding:34px 24px 80px}
.sh-switch{display:flex;gap:6px;margin-bottom:34px}
.sh-switch a{font-family:var(--disp);font-weight:700;font-size:15px;padding:7px 16px;border:1px solid var(--ink-3);border-radius:999px;color:var(--chalk-dim)}
.sh-switch a:hover{color:var(--chalk);border-color:var(--chalk-dim)}
.sh-switch a[aria-current="page"]{color:var(--ink);background:var(--brass);border-color:var(--brass)}
.sh-head{margin-bottom:40px;max-width:680px}
.sh-head h1{font-family:var(--disp);font-weight:700;font-size:52px;line-height:1.05;margin-bottom:14px}
.sh-head p{color:var(--chalk-dim);font-size:16px;line-height:1.8}
.sh-group{margin-top:52px}
.sh-group h2,.sh-first h2{font-family:var(--disp);font-weight:700;font-size:22px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.sh-group h2 i{width:10px;height:10px;border-radius:50%;background:var(--bc)}
.sh-group h2 span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--chalk-dim)}

/* 건너뛰기 줄 */
.sh-jump{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:44px;padding:14px 0;border-top:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);font-size:14px;color:var(--chalk-dim)}
.sh-jump a{display:inline-flex;align-items:center;gap:7px}
.sh-jump a:hover{color:var(--chalk)}
.sh-jump i{width:7px;height:7px;border-radius:50%;background:var(--bc)}

/* 도구 타일 */
.sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.sh-grid-big{grid-template-columns:repeat(3,1fr)}
.sh-tool{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--radius);overflow:hidden}
.sh-tool:hover{border-color:color-mix(in srgb,var(--bc) 60%,var(--ink-3))}
.sh-tool:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.sh-pic{display:block;aspect-ratio:16/10;background:var(--ink-3);overflow:hidden}
.sh-pic img{width:100%;height:100%;object-fit:cover;display:block}
.sh-pic.is-empty{display:flex;align-items:flex-end;padding:16px;aspect-ratio:16/7;
  background:linear-gradient(160deg,color-mix(in srgb,var(--bc) 22%,var(--ink-2)),var(--ink-2) 75%);
  border-bottom:1px solid color-mix(in srgb,var(--bc) 35%,transparent)}
.sh-pic.is-empty em{font-style:normal;font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.25;color:color-mix(in srgb,var(--bc) 70%,var(--chalk))}
.sh-tool.is-big .sh-pic.is-empty{aspect-ratio:16/9}
.sh-tool.is-big .sh-pic.is-empty em{font-size:28px}
.sh-tbody{display:flex;flex-direction:column;gap:5px;padding:14px 16px 18px}
.sh-tmeta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--chalk-dim)}
.sh-tmeta i{width:7px;height:7px;border-radius:50%;background:var(--bc)}
.sh-hasv{margin-left:auto;color:var(--brass);border:1px solid color-mix(in srgb,var(--brass) 50%,transparent);border-radius:4px;padding:1px 6px;font-size:11px}
.sh-tool b{font-weight:600;font-size:16px;line-height:1.4}
.sh-pic.is-empty + .sh-tbody b{display:none}
.sh-q{font-family:var(--disp);font-size:15px;line-height:1.5;color:var(--chalk)}
.sh-one{font-size:13.5px;color:var(--chalk-dim);line-height:1.6}

/* 지도 */
.sh-mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;border-top:1px solid var(--ink-3)}
.sh-map{display:block;padding:16px 18px 16px 0;border-bottom:1px solid var(--ink-3)}
.sh-map b{display:block;font-family:var(--disp);font-size:17px;margin-bottom:4px}
.sh-map span{font-size:13.5px;color:var(--chalk-dim);line-height:1.6}
.sh-map:hover b{color:var(--brass-soft)}

/* 영상 목록 */
.sh-vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:30px 26px}
.sh-video h3{font-family:var(--disp);font-weight:700;font-size:20px;margin:14px 0 6px}
.sh-video p{font-size:14.5px;color:var(--chalk-dim);line-height:1.75}
.sh-next{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13.5px}
.sh-next span{color:var(--chalk-dim);width:100%;font-size:12px}
.sh-next a{color:var(--cyan)}
.sh-next a:hover{color:var(--chalk)}
.sh-note{margin-top:56px;font-size:14px;color:var(--chalk-dim);max-width:640px;line-height:1.8}

@media (max-width:760px){
  .sh-wrap{padding:24px 18px 64px}
  .sh-head h1{font-size:40px}
  .sh-grid-big{grid-template-columns:1fr}
  .sh-vgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.sh-play img{transition:none}}
.sh-kind{margin-top:14px;font-size:12.5px;color:var(--brass)!important}
.sh-kind + h3{margin-top:2px}