/* 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:30px;line-height:1.3;margin-bottom:8px}
.sh-doors-sub{color:var(--chalk-dim);font-size:16.5px;font-weight:400;margin-bottom:28px}
.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:15px;font-weight:500;color:var(--brass);letter-spacing:0}
/* 2026-10-02: 문 이름은 바탕체 대신 굵은 고딕 — 얇은 바탕체는 큰 글자에서 힘이 없고 영상 그림 옆에서 밀렸다.
   목록 글자도 세 문 모두 같은 고딕으로 맞추고, 본문 기본 굵기 300 대신 400 을 쓴다. */
.sh-door h3{font-family:var(--body);font-weight:600;font-size:42px;line-height:1.1;letter-spacing:-.035em;margin-top:-6px}
.sh-door h3 a:hover{color:var(--brass-soft)}
.sh-lede{font-size:16px;font-weight:400;color:var(--chalk-dim);line-height:1.7}
.sh-vt{font-size:15.5px;font-weight:400;color:var(--chalk-dim);line-height:1.7}
.sh-vt b{color:var(--chalk);font-weight:600;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:13px 0}
.sh-dl b{display:block;font-weight:600;font-size:17.5px;line-height:1.45;letter-spacing:-.02em}
.sh-dl span{display:block;font-size:14.5px;font-weight:400;color:var(--chalk-dim);margin-top:3px;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:9px;height:9px;border-radius:50%;background:var(--bc);transform:translateY(-2px)}
.sh-dl-play span{grid-column:2}
/* 영상 목록 — 작은 그림 + 제목 */
.sh-dl-watch a{display:grid;grid-template-columns:104px 1fr;column-gap:14px;align-items:center;align-content:center}
.sh-dl-watch img{grid-row:1 / span 2;width:104px;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.sh-dl-watch b{align-self:end}
.sh-dl-watch span{align-self:start}
.sh-all{margin-top:auto;font-size:15.5px;font-weight:500;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:38px}
  .sh-doors-h{font-size:26px}
}

/* ── /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(--body);font-weight:600;font-size:16px;padding:8px 18px;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(--body);font-weight:600;font-size:50px;line-height:1.1;letter-spacing:-.035em;margin-bottom:14px}
.sh-head p{color:var(--chalk-dim);font-size:17px;font-weight:400;line-height:1.8}
.sh-group{margin-top:52px}
.sh-group h2,.sh-first h2{font-family:var(--body);font-weight:600;font-size:23px;letter-spacing:-.02em;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:13px;font-weight:400;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:17.5px;line-height:1.4;letter-spacing:-.02em}
.sh-pic.is-empty + .sh-tbody b{display:none}
.sh-q{font-size:15.5px;font-weight:400;line-height:1.5;color:var(--chalk)}
.sh-one{font-size:14.5px;font-weight:400;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-weight:600;font-size:17.5px;letter-spacing:-.02em;margin-bottom:4px}
.sh-map span{font-size:14.5px;font-weight:400;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(--body);font-weight:600;font-size:21px;line-height:1.4;letter-spacing:-.02em;margin:14px 0 6px}
.sh-video p{font-size:15.5px;font-weight:400;color:var(--chalk-dim);line-height:1.75}
.sh-next{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:14.5px}
.sh-next span{color:var(--chalk-dim);width:100%;font-size:13px}
.sh-next a{color:var(--cyan)}
.sh-next a:hover{color:var(--chalk)}
.sh-note{margin-top:56px;font-size:15px;font-weight:400;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-dl-watch a{grid-template-columns:112px 1fr}
  .sh-dl-watch img{width:112px}
  .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:14px!important;font-weight:500!important;color:var(--brass)!important}
.sh-kind + h3{margin-top:2px}

/* 세로로 긴 도판(인체 아틀라스)은 위쪽을 보여 준다 */
.sh-pic img[src*="/images/body/"]{object-position:50% 18%}

/* 낱말 가운데서 줄이 끊기지 않게 (2026-10-02) */
.sh-doors,.sh-wrap{word-break:keep-all;overflow-wrap:anywhere}

/* 윗줄 메뉴 — 「어린이」「중학교」 두 단추가 있는 쪽 (2026-10-05).
   /play/ · /watch/ 는 today.css 를 안 읽어서 css/today.css 의 같은 규칙을 여기에도 둔다. 고칠 때는 두 곳을 같이 */
@media (max-width:740px){.topnav:has(.tn-kids) .tn-today{display:none}}
@media (max-width:1460px){.topnav:has(.tn-mid) a[href="/people/"],.topnav:has(.tn-mid) a[href="/glossary/"]{display:none}}
@media (max-width:1000px){.topnav:has(.tn-mid) a[href="/library/"],.topnav:has(.tn-mid) a[href="/map"]{display:none}}
@media (max-width:860px){.topnav:has(.tn-mid) .tn-today{display:none}}
@media (max-width:520px){.topnav:has(.tn-mid) .tn-kids{padding:3px 9px;font-size:12.5px}.topnav:has(.tn-mid) .tn-x{display:none}}
@media (max-width:430px){.topbar:has(.tn-mid) .brand-mk{display:none}}
/* 중학 수학 알약 — /play/ · /watch/ 는 today.css 를 안 읽어서 css/today.css 의 같은 규칙을 여기에도 둔다(20261006c). 고칠 때는 두 곳을 같이 */
/* 중학교 수학 바로 가기 — 보라 알약 (2026-10-06). 「중학 과학」「중학 수학」은 폰에서도 줄이지 않는다 */
.tn-math{color:var(--d-math);border-color:var(--d-math)}
.tn-math:hover{background:var(--d-math);color:var(--ink)}
/* 알약이 셋이라 넓은 화면에서도 조금 빠듯하다 — 간격을 좁히고, 본문에도 있는 #지도·#카드 링크를 먼저 접는다 */
@media (max-width:1400px){.topnav:has(.tn-math){gap:13px}.topnav:has(.tn-math) a[href^="#"]{display:none}}
@media (max-width:900px){.topnav:has(.tn-math) .tn-kids{padding:4px 9px}}
/* 휴대폰·좁은 태블릿: 알약 셋은 둘째 줄로 내린다. 첫 줄은 이름 · 검색 · 낮밤 · EN, 둘째 줄은 어린이 과학 · 중학 과학 · 중학 수학.
   520px 에서 내리면 521~720px 이 넘쳐서(첫 화면 최대 41px) 760px 로 올림 (20261006c) */
@media (max-width:760px){
  .topnav:has(.tn-math){flex-wrap:wrap;justify-content:flex-end;row-gap:7px;gap:6px;flex:1 1 0;min-width:0}
  .topnav:has(.tn-math)>*{order:1}
  .topnav:has(.tn-math)::before{content:"";order:2;flex-basis:100%;height:0}
  .topnav:has(.tn-math) .tn-kids{order:3;display:inline-block;padding:3px 9px;font-size:12.5px}
}