/* 🚪 학습하기 첫 화면 = 해부자료집 · 동작자료집 고르기 (js/entry-pick.js) */
.entry-pick { display: none; }

html.is-entry-pick .entry-pick { display: block; }
/* 고르는 동안엔 사이드바·목차 버튼·그리드·목록을 숨긴다(드로어 모드에선 사이드바가 body 로 옮겨지므로 범위 없이) */
html.is-entry-pick .video-toc-panel,
html.is-entry-pick .video-toc-toggle,
html.is-entry-pick .video-toc-overlay,
html.is-entry-pick .mobile-menu-btn { display: none !important; }
html.is-entry-pick .video-content-panel > :not(#entryPick) { display: none !important; }

/* 유리 선반 위 두 자료집(기획 tools/planning/mvbvklw2.html 시안 D v.2) — 표지 뒤로 안의 자료가 삐져나오고, 마우스를 올리면 세 장이 같이 재생된다 */
/* 배경은 화면 끝까지(흰 테두리 없음) · 넓은 화면일수록 표지가 커진다 · 묶음은 세로 가운데 */
html.is-entry-pick .video-content-panel { padding: 0 !important; }
/* 아이폰 사파리는 주소창 뒤(화면 맨 아래)를 html·body 바탕색으로 칠한다 — 흰색으로 남지 않게 배경 끝 색과 맞춘다 */
html.is-entry-pick { background: #ddd5ce; }
html.is-entry-pick body { background: #ddd5ce radial-gradient(120% 90% at 50% 0%, #f1ece7 0%, #e4ddd6 70%, #ddd5ce 100%) no-repeat; }
html.is-entry-pick .entry-pick { display: flex; }
/* 첫 화면엔 헤더를 안 보인다(요청됨 2026-10-17) — 고르면 다시 나온다 */
html.is-entry-pick .header { display: none !important; }
html.is-entry-pick .main-container, html.is-entry-pick .video-content-panel { background: transparent !important; }
.entry-pick {
    --ep-w: clamp(224px, 15.5vw, 320px);
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(28px, 5vh, 64px) 16px clamp(40px, 7vh, 80px);
    background: transparent;
    color: var(--h8-color-text, #2d2a29);
}
.ep-title { margin: 0 0 6px; text-align: center; font-size: clamp(20px, 1.7vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
.ep-sub { margin: 0; text-align: center; font-size: clamp(14px, .85vw, 16px); color: #6b6562; }
.ep-scene { display: flex; width: 100%; max-width: calc(var(--ep-w) * 3.85); margin: 0 auto; padding-top: clamp(56px, 7vh, 90px); }
.ep-row { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ep-row > .ep-shelf { align-self: stretch; }

/* 표지 */
.ep-sl { position: relative; z-index: 2; display: block; width: var(--ep-w); -webkit-tap-highlight-color: transparent; }
.ep-cv { position: relative; z-index: 5; display: block; width: 100%; aspect-ratio: 720 / 947; background: #fff; overflow: hidden;
         border-radius: 2px 5px 5px 2px; transition: transform .3s cubic-bezier(.2,.8,.2,1);
         box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 14px 18px -12px rgba(30,25,20,.5); }
.ep-cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-cv::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
        background: linear-gradient(122deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.22) 33%, rgba(60,45,35,.07) 33.4%, rgba(60,45,35,.03) 70%, rgba(255,255,255,.12) 100%), radial-gradient(130% 90% at 50% 40%, rgba(0,0,0,0) 60%, rgba(40,30,25,.08) 100%);
        box-shadow: inset 0 0 0 1px rgba(40,30,25,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -16px 22px -14px rgba(30,20,15,.22); }

/* 삐져나온 자료 — 정사각 안에 그림 그대로, 기울기·높이는 들쭉날쭉, 첫 장은 조금 크게 */
.ep-pk { position: absolute; top: var(--t); left: var(--x); width: 80%; aspect-ratio: 1 / 1; background: #fff; border-radius: 7px; overflow: hidden;
         box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 18px -6px rgba(30,25,20,.22);
         --rr: var(--r); transform: rotate(var(--rr)) scale(var(--sc));
         transition: transform .5s cubic-bezier(.2,.8,.2,1), left .5s cubic-bezier(.2,.8,.2,1), right .5s cubic-bezier(.2,.8,.2,1); }
.ep-k1 { z-index: 4; --t: 18%; --x: -21%; --r: -5deg;  --rh: -8deg;  --sc: 1.1; --xh: -31%; }
.ep-k2 { z-index: 3; --t: 28%; --x: -33%; --r: 4deg;   --rh: 7deg;   --sc: .91; --xh: -51%; }
.ep-k3 { z-index: 2; --t: 17%; --x: -45%; --r: -11deg; --rh: -15deg; --sc: .86; --xh: -68%; }
.ep-pk img, .ep-pk video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ep-pk video { opacity: 0; transition: opacity .3s; }
.ep-sl.play .ep-pk video { opacity: 1; }
/* 넓은 화면: 해부는 왼쪽, 동작은 오른쪽으로 삐져나온다 */
.ep-m2 .ep-pk { left: auto; right: var(--x); transform: rotate(calc(var(--rr) * -1)) scale(var(--sc)); }
@media (hover: hover) and (pointer: fine) {
    .ep-sl:hover .ep-pk { --rr: var(--rh); }
    .ep-m1:hover .ep-pk { left: var(--xh); }
    .ep-m2:hover .ep-pk { right: var(--xh); }
    .ep-sl:hover .ep-cv { transform: translateY(-6px); }
    .ep-lab:hover .ep-name { color: var(--h8-color-primary, #bb5d5d); }
}
.ep-sl:focus-visible, .ep-lab:focus-visible { outline: 2px solid var(--h8-color-primary, #bb5d5d); outline-offset: 4px; }

/* 유리 선반 — 넓은 화면에선 두 줄이 붙어 한 장, 받침은 양 끝에 하나씩 */
.ep-shelf { position: relative; z-index: 3; height: 16px; margin-top: -2px; border-radius: 2px;
            background: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(214,226,224,.55) 45%, rgba(170,195,190,.55) 100%);
            border-top: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 -2px 0 rgba(120,160,152,.55), 0 22px 26px -16px rgba(40,35,30,.35); }
.ep-r1 .ep-shelf { margin-left: 20px; border-radius: 2px 0 0 2px; }
.ep-r2 .ep-shelf { margin-right: 20px; border-radius: 0 2px 2px 0; }
.ep-shelf::before { content: ''; position: absolute; top: 4px; width: 26px; height: 20px; border-radius: 0 0 4px 4px; background: linear-gradient(#9a948e, #6f6a65); }
.ep-r1 .ep-shelf::before { left: 60px; }
.ep-r2 .ep-shelf::before { right: 60px; }

/* 꼬리표 + 이름 */
.ep-lab { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: calc(var(--ep-w) * 1.35); padding: 0 8px; text-align: center; color: inherit; text-decoration: none; }
.ep-tag { position: relative; margin-top: 4px; padding: 5px 12px 6px; border-radius: 3px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #fff; background: #c0392b;
          box-shadow: 0 6px 10px -6px rgba(0,0,0,.4); transform: rotate(-2deg); }
.ep-tag::before { content: ''; position: absolute; left: 50%; top: -9px; width: 1px; height: 9px; background: #8d8781; }
.ep-tag.ep-dk { background: #2d2a29; transform: rotate(2deg); }
.ep-name { margin-top: 18px; font-size: clamp(20px, 1.3vw, 24px); font-weight: 700; transition: color .18s ease; }
.ep-desc { margin-top: 4px; font-size: clamp(13px, .8vw, 15px); line-height: 1.55; color: #6b6562; word-break: keep-all; }
.ep-note { margin-top: 6px; font-size: 12px; color: #a0805a; }
.ep-note[hidden] { display: none; }

/* 폰·아이패드 세로 = 한 줄에 하나씩, 자료는 둘 다 왼쪽으로, 선반 받침 없음 */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait) {
    .ep-scene { flex-direction: column; padding-top: 40px; max-width: 560px; }
    .ep-row { margin-bottom: 40px; }
    .ep-m1 .ep-pk, .ep-m2 .ep-pk { right: auto; left: var(--x); transform: rotate(var(--rr)) scale(var(--sc)); }
    .ep-m1:hover .ep-pk, .ep-m2:hover .ep-pk { right: auto; left: var(--xh); }
    .ep-r1 .ep-shelf, .ep-r2 .ep-shelf { margin: -2px 6% 0; border-radius: 2px; }
    .ep-shelf::before { display: none; }
}
@media (max-width: 1024px) and (orientation: portrait) and (min-width: 641px) {
    .entry-pick { --ep-w: 250px; }
}
@media (max-width: 640px) {
    .entry-pick { --ep-w: 168px; padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
    .ep-scene { padding-top: 30px; }
    .ep-row { margin-bottom: 30px; }
    .ep-shelf { height: 11px; }
    .ep-tag { font-size: 11px; padding: 4px 9px 5px; }
    .ep-name { margin-top: 12px; font-size: 16px; }
    .ep-desc { font-size: 12px; }
}