/* v3 guide: token-based, typography cells, zero video-dependent navigation. */
[hidden] { display: none !important; }
.mto { --t-body: 18px; --t-small: 16px; --t-mono: 16px; min-height: 100dvh; line-height: 1.65; }
.wrap { width: min(100%, 1280px); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { width: min(100%, 820px); margin-inline: auto; padding-inline: var(--pad); }
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 5; padding: 10px 14px; background: var(--accent); color: var(--on-accent); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-head { position: relative; z-index: 2; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; }
.nav a[aria-current] { color: var(--accent); }
.label { color: var(--ink-dim); font: 500 var(--t-small)/1.5 var(--font-mono); }
.finder { padding-block: clamp(2rem, 5vw, 5rem) 2rem; }
.finder h1 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: -.05em; line-height: 1.08; font-weight: 900; }
.finder__lede { margin-top: 1.5rem; max-width: 60ch; }
.draft-note { margin-block: 1.5rem; max-width: 80ch; }
.search-label { display: block; margin-bottom: .5rem; color: var(--ink-dim); font-size: var(--t-small); }
.finder__box { display: flex; align-items: center; background: var(--bg-raised); border: var(--rule); }
.finder__box:focus-within { border-color: var(--accent); }
.finder__box input { width: 100%; min-width: 0; padding: 1rem; border: 0; background: none; color: var(--ink); font: inherit; }
.finder__box input::placeholder { color: var(--ink-dim); }
.finder__box input::-webkit-search-cancel-button { display: none; }
.finder__box button { min-height: 48px; padding-inline: .75rem; flex-shrink: 0; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.chip { min-height: 44px; padding: .5rem .85rem; box-shadow: inset 0 0 0 1px var(--rule-color); }
.chip.is-on { background: var(--accent); color: var(--on-accent); }
.chip:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.grid__status { margin-bottom: 1rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule); margin-bottom: 3rem; }
.tile { min-width: 0; min-height: 210px; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: var(--pad); border-right: var(--rule); border-bottom: var(--rule); background: var(--bg); transition: background-color var(--dur) var(--ease); }
.tile h2 { font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }
.tile > span:last-child { margin-top: auto; font-size: var(--t-small); color: var(--accent); }
.tile:hover { background: var(--bg-raised); }
.tile:active { background: var(--bg-band); }
.grid__empty { padding-block: 2rem 4rem; }
.grid__empty .btn { margin-top: 1rem; }
.guide__body { padding-block: 2rem 4rem; }
.guide__body > .label { margin-top: 2rem; }
.guide__title { font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -.045em; line-height: 1.15; margin-block: .75rem; }
.guide__en { font-family: var(--font-mono); color: var(--ink-dim); }
.back { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.media-wait { display: grid; justify-items: start; gap: .6rem; padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem; border: var(--rule); color: var(--ink-dim); }
.media-wait__title { font: 800 clamp(1.5rem, 5vw, 2rem)/1.15 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.media-wait p { margin: 0 0 .6rem; }
.section-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: 1rem; }
.section-nav a { display: inline-flex; align-items: center; padding: .5rem .85rem; min-height: 44px; border: var(--rule); }
.section-nav a:hover { color: var(--accent); }
.block { margin-block: clamp(2.5rem, 6vw, 4rem); scroll-margin-top: 1rem; }
.block h2 { font-size: var(--t-h4); line-height: 1.25; letter-spacing: -.03em; margin-block: .5rem 1.5rem; }
.steps li { display: grid; grid-template-columns: 3ch minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: var(--rule); }
.step__no { color: var(--accent); font-family: var(--font-mono); white-space: nowrap; align-self: start; }
.rows .row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: var(--rule); }
.rows dt { color: var(--ink-dim); }
.rows dd p + p { margin-top: .65rem; }
.mgroup { margin-block: 1.5rem; }
.mgroup h3 { color: var(--ink-dim); font-size: var(--t-small); font-weight: 500; margin-bottom: .5rem; }
.mchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.mchip { padding: .4rem .75rem; background: var(--bg-raised); }
.mchip--primary { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.mchip--stabilizer { background: var(--bg); border: var(--rule); }
.mbasis { color: var(--ink-dim); border-left: 2px solid var(--rule-color); padding-left: 1rem; }
.warnings li { border-top: var(--rule); padding: 1rem 0 1rem 1rem; border-left: 2px solid var(--accent); }
.stage { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; margin-block: 1.5rem; }
.stage video, .stage__frame { width: min(100%, 360px); aspect-ratio: 9 / 16; background: var(--bg-band); }
.stage__frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 1rem; border: var(--rule); }
.stage__play { color: var(--accent); font-size: 3rem; }
.stage__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.site-foot { min-height: 0; gap: 1rem; border-top: var(--rule); }
.site-foot .draft-note { margin-block: 0; }
@container (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { min-height: 190px; } }
@container (max-width: 460px) { .rows .row { grid-template-columns: minmax(0, 1fr); gap: .5rem; } .tile { padding: .85rem; } }
/* ==========================================================================
   상세 영상 — 2칼럼 썸네일(기본 사용법 | SPT와 따라하기) + 라이트박스 (2026-09-30)
   모바일에서도 2칼럼. 한 영상만 있으면 가운데 하나.
   ========================================================================== */
.stage--duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; justify-items: stretch; max-width: 560px; margin-inline: auto; }
.stage--solo { max-width: 300px; margin-inline: auto; justify-items: stretch; }
.vtile { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; padding: 0; border: var(--rule); border-radius: 8px; overflow: hidden; background: var(--bg-band); cursor: pointer; color: #fff; container-type: inline-size; text-align: left; font: inherit; }
.vtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1); }
/* 위·아래 글자 자리를 어둡게 덮는다 — 따라하기 프레임에 구워진 윗줄 제목·아래 카운터도 함께 가려진다 */
.vtile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .95) 0%, rgb(0 0 0 / .85) 24%, rgb(0 0 0 / .1) 44%, rgb(0 0 0 / .1) 56%, rgb(0 0 0 / .86) 70%, rgb(0 0 0 / .97) 84%); }
.vtile img.vtile__bg--soft { filter: blur(5px) brightness(.85) saturate(1.1); transform: scale(1.08); }
.vtile__play { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding-left: 4px; border-radius: 50%; background: rgb(0 0 0 / .55); box-shadow: inset 0 0 0 2px #fff; font-size: 1.1rem; transition: transform .2s ease, background-color .2s ease; }
/* 썸네일 글자 (2026-10-01) — 위: 종류 + 운동명(크게) / 가운데: 재생 / 아래: 안내 */
.vtile__top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: grid; justify-items: start; gap: 0.45em; padding: 7cqi 7cqi 0; }
.vtile__kind { padding: 0.35em 0.6em; border-radius: 5px; background: rgb(255 255 255 / .16); font-size: clamp(0.72rem, 6.4cqi, 0.95rem); font-weight: 800; line-height: 1; }
.vtile__kind--accent { background: var(--accent); color: var(--on-accent); }
.vtile__name { font-family: var(--font-display); font-size: clamp(1.15rem, 12.5cqi, 2.1rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; word-break: keep-all; overflow-wrap: anywhere; }
.vtile__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 7cqi 7cqi; font-size: clamp(0.72rem, 6.6cqi, 1rem); font-weight: 700; line-height: 1.35; color: rgb(255 255 255 / .88); word-break: keep-all; }
.vtile--wide .vtile__top { padding: 4.5cqi 5cqi 0; }
.vtile--wide .vtile__name { font-size: clamp(1.15rem, 6.5cqi, 2rem); }
.vtile--wide .vtile__kind { font-size: clamp(0.72rem, 3.4cqi, 0.95rem); }
.vtile--wide .vtile__cap { padding: 0 5cqi 4.5cqi; font-size: clamp(0.72rem, 3.4cqi, 1rem); }
.vtile--wide::after { background: linear-gradient(to bottom, rgb(0 0 0 / .9), rgb(0 0 0 / .2) 45%, rgb(0 0 0 / .2) 60%, rgb(0 0 0 / .9)); }
.vtile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vtile:active .vtile__play { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .vtile:hover img { transform: scale(1.04); }
  .vtile:hover img.vtile__bg--soft { transform: scale(1.12); }
  .vtile:hover .vtile__play { background: var(--accent); color: var(--on-accent); box-shadow: none; }
}
.stage__hint { max-width: 560px; margin: -0.75rem auto 1.5rem; text-align: center; font-size: 0.875rem; color: var(--ink-dim); }

.vbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgb(0 0 0 / .94); color: #fff; }
.vbox::backdrop { background: rgb(0 0 0 / .85); }
.vbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px 14px; }
.vbox__title { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbox__close { flex-shrink: 0; min-height: 40px; padding: 0 14px; border-radius: 7px; background: #fff; color: #111; font-weight: 700; cursor: pointer; }
.vbox__stage { display: grid; place-items: center; min-height: 0; padding: 0 10px 14px; }
.vbox__stage video, .vbox__stage iframe { height: 100%; max-height: 100%; max-width: 100%; aspect-ratio: 9 / 16; border: 0; border-radius: 8px; background: #000; }
@media (prefers-reduced-motion: reduce) { .vtile img, .vtile__play { transition: none; } }

/* 준비운동·정리 5분 — 가로로 넓은 버튼형 썸네일 하나 (2026-09-30) */
.stage--routine { max-width: 560px; margin-inline: auto; justify-items: stretch; }
.vtile--wide { aspect-ratio: 16 / 9; }
.vtile--wide img { object-position: center 30%; }

/* ==========================================================================
   덜어내기 (2026-09-30) — 상세: 제목 → 처방 한 줄 → 영상 → 접힌 글. 목록: 검색이 맨 위, 사진 달린 줄.
   ========================================================================== */
.guide__rx { margin: 0.4rem 0 0; font-size: 1.05rem; color: var(--ink-dim); }
.guide__rx strong { color: var(--accent); font-size: 1.2rem; }
.fold-sec { border-top: var(--rule); padding: 0; }
.fold-sec > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 2px; font-size: 1.125rem; font-weight: 800; cursor: pointer; list-style: none; }
.fold-sec > summary::-webkit-details-marker { display: none; }
.fold-sec > summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); }
.fold-sec[open] > summary::after { content: "−"; }
.fold-sec > :not(summary) { margin-bottom: 1.25rem; }
.vbox__close { min-height: 48px; }

.finder { padding-block: 1.25rem 1rem; }
.finder .finder__h { margin: 0 0 0.75rem; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: -.04em; line-height: 1.1; font-weight: 900; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; }
.tile__img { flex: none; width: 88px; height: 88px; border-radius: 8px; object-fit: cover; object-position: center; background: var(--bg-band); }
.tile__img--none { display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-dim); }
.tile__text { display: grid; gap: 2px; min-width: 0; }
.tile h2 { font-size: 1.05rem; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.tile .label { font-size: 0.75rem; }
@container (max-width: 560px) { .tiles { grid-template-columns: minmax(0, 1fr); } }

/* 유산소 풍경 영상 (2026-10-02) — 달리기·타기 화면을 큰 가로 팝업으로 */
.vbox__stage iframe.is-wide { aspect-ratio: 16 / 9; width: min(100%, calc((100dvh - 84px) * 16 / 9)); height: auto; max-height: 100%; }
.scenes__title { scroll-margin-top: 96px; margin: 0 0 .35rem; font: 800 clamp(1.25rem, 4vw, 1.6rem)/1.2 var(--font-display); letter-spacing: -0.02em; }
.scenes__intro { margin: 0 0 1.25rem; color: var(--ink-dim); }
.scenes__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px 12px; }
.scene { display: grid; gap: .35rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.scene__shot { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: var(--rule); border-radius: 8px; background: var(--bg-band); }
.scene__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1); }
.scene__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin: -24px 0 0 -24px; padding-left: 3px; border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; font-size: 1.1rem; transition: background .2s ease, color .2s ease; }
.scene__len { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / .78); color: #fff; font-size: .75rem; font-weight: 700; }
.scene__name { margin-top: .25rem; font-weight: 800; font-size: .95rem; line-height: 1.3; letter-spacing: -0.01em; }
.scene__note { color: var(--ink-dim); font-size: .8125rem; line-height: 1.35; }
.scene:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.scene:active .scene__play { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .scene:hover .scene__shot img { transform: scale(1.04); }
  .scene:hover .scene__play { background: var(--accent); color: var(--on-accent); }
}
.scenes__credit { margin: 1rem 0 0; color: var(--ink-dim); font-size: .8125rem; }
@media (prefers-reduced-motion: reduce) { .scene__shot img, .scene__play { transition: none; } }

/* 목록 사진은 동작이 보이는 크기로, 작은 화면에서도 제목과 함께 표시한다. */
@media (max-width: 560px) { .tile__img { width: 80px; height: 80px; } .tile h2 { overflow-wrap: anywhere; } }