/* ═══ 미용편 공통 — 토큰 · 상단바 · 버튼 · 카드 · 문 · 푸터 · 토스트 ═══
   색의 규칙: 보라 하나만 UI 색이다. 초록은 「무료」, 빨강은 「하지 마세요」에만.
   아이콘 타일의 알록달록은 그림이지 UI 색이 아니다. */
:root{
  --bg:#FFFFFF; --soft:#F5F5F7; --soft2:#EDEBF3; --card:#FFFFFF;
  --line:#E7E7EC; --line2:#DAD7E4;
  --ink:#1A1626; --ink2:#453E58; --sub:#6B6480; --faint:#847DA0;
  --pri:#7C5CFF; --pri-d:#5C3CDB; --pri-l:#A48BFF; --wash:#F0EBFF;
  --free:#0E8A5F; --free-w:#E5F6EF;
  --no:#C43A3A; --no-w:#FDECEC;
  --sh-s:0 1px 2px rgba(30,26,48,.05), 0 4px 12px rgba(30,26,48,.06);
  --sh-m:0 2px 6px rgba(30,26,48,.06), 0 14px 32px rgba(30,26,48,.09);
  --sh-l:0 4px 10px rgba(30,26,48,.08), 0 28px 56px rgba(30,26,48,.13);
  --e:cubic-bezier(.22,.61,.36,1);
  /* 레일 — 조회수 등급 · 구조 다섯 줄 */
  /* 조회수 등급 = «열기» 한 줄. 파랑(10만) → 청록 → 초록 → 앰버 → 주황 → 장미(500만).
     전부 흰 알약 위에서 읽히는 명도로 맞췄다. 탁한 올리브·갈색은 걷어냈다. */
  --t1:#2166B8; --t2:#0B7C88; --t3:#10814A; --t4:#A06A00; --t5:#C2410C; --t6:#B93D5C;
  --r1:#C43A3A; --r2:#3E68C7; --r3:#8B6A16; --r4:#5F751A; --r5:#11824A;
  --W:960px;
  /* 어두운 덩어리 — 밝은 바탕에서는 진보라, 다크모드에서는 더 깊게 */
  --band:#231D3C; --band-card:#2E2650; --band-line:#3B3266;
  --band-ink:#F3F0FF; --band-ink2:#CFC7EE; --band-sub:#9C93BE; --band-eb:#C0AEFF;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0; background:var(--bg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.6;
  letter-spacing:-.01em; overflow-x:hidden;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
a{color:inherit; text-decoration:none}
input,textarea,select{font:inherit}
:focus-visible{outline:2px solid var(--pri-d); outline-offset:2px; border-radius:8px}
img{max-width:100%; display:block}
.wrap{max-width:var(--W); margin:0 auto; padding:0 clamp(16px,4vw,28px)}

/* ── 상단바 ── */
.bar{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line)}
.bar-in{max-width:var(--W); margin:0 auto; padding:0 clamp(14px,4vw,28px);
  height:56px; display:flex; align-items:center; gap:8px}
.lg{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; letter-spacing:-.03em; flex:0 0 auto}
.lg img{width:28px; height:28px; border-radius:9px}
.lg em{font-style:normal; color:var(--pri-d)}
.nv{display:flex; gap:2px; margin-left:8px; overflow-x:auto; scrollbar-width:none}
/* 스킬 규칙: 메뉴는 가운데. 단 좁은 화면에선 풀어준다 (absolute 는 폰에서 깨진다) */
@media (min-width:720px){ .nv.mid{position:absolute; left:50%; transform:translateX(-50%); margin-left:0} }
.bar-in{position:relative}
.nv::-webkit-scrollbar{display:none}
.nv a,.nv button{font-size:12.5px; font-weight:700; color:var(--sub); padding:7px 10px;
  border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px;
  transition:background .18s, color .18s}
.nv a:hover{background:var(--soft); color:var(--ink)}
.nv a.on{background:var(--wash); color:var(--pri-d)}
.nv button small{font-size:9.5px; font-weight:800; color:var(--faint); background:var(--soft);
  padding:2px 6px; border-radius:5px; letter-spacing:.03em}
.sp{flex:1}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 15px; border-radius:999px; font-size:12.5px; font-weight:700;
  border:1px solid var(--line2); background:var(--card); color:var(--ink);
  transition:transform .16s var(--e), box-shadow .16s, border-color .16s, background .16s}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sh-s); border-color:var(--pri-l)}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--pri-d); color:#fff; border-color:var(--pri-d)}
.btn.pri:hover{background:#4E31C4; border-color:#4E31C4}
.btn.lg2{font-size:14px; padding:13px 24px}
.btn.sm{font-size:12px; padding:8px 13px}
.btn.done{background:var(--free); border-color:var(--free); color:#fff}
@media (max-width:640px){ .bar .btn{display:none} .lg span{display:none} .nv{margin-left:2px} .nv a,.nv button{padding:7px 9px} }

/* ── 섹션 머리 ── */
.sec{padding:32px 0 0}
.sec .eb{font-size:10.5px; font-weight:800; letter-spacing:.1em; color:var(--pri-d); margin-bottom:5px}
.sec h2{margin:0 0 3px; font-size:19px; font-weight:800; letter-spacing:-.03em}
.sec .d{font-size:12.5px; color:var(--faint); margin-bottom:15px}
.sec .d a{color:var(--pri-d); font-weight:700}

/* ── 자료 카드 = «행» ─────────────────────────────
   아이콘이 작으니 격자가 아니라 행이 맞다. 격자로 두면
   제목 길이마다 높이가 달라지고 오른쪽이 휑해진다. */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px}
.it{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:12px 14px 12px 12px; box-shadow:var(--sh-s);
  transition:transform .16s var(--e), box-shadow .16s, border-color .16s}
.it:hover{transform:translateY(-2px); box-shadow:var(--sh-m); border-color:var(--pri-l)}
.it:active{transform:scale(.985)}
.it .th{width:60px; height:60px; flex:0 0 auto; border-radius:17px; overflow:hidden;
  border:1px solid var(--line)}
.it .tx{flex:1; min-width:0}
.it .t{font-size:13.5px; font-weight:700; line-height:1.42; letter-spacing:-.02em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.it .m{margin-top:6px; display:flex; gap:5px; align-items:center; white-space:nowrap;
  overflow:hidden}
.it .m span{font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:6px;
  color:var(--sub); background:var(--soft); flex:0 0 auto}
.it .m span.free{color:var(--free); background:var(--free-w)}
.it .m span.say{color:var(--pri-d); background:var(--wash)}
.it .bd{font-size:10.5px; font-weight:800; color:var(--faint); flex:0 0 auto}
@media (max-width:560px){ .grid{grid-template-columns:1fr} }

/* ── 오늘 하나 (C안) ── */
.today{border-radius:22px; padding:22px 22px 20px; max-width:680px; color:#fff; position:relative; overflow:hidden;
  background:linear-gradient(152deg,#6B49F0,#8F6BFF 52%,#B98CFF)}
.today .k{font-size:10.5px; font-weight:800; letter-spacing:.1em; opacity:.85; margin-bottom:10px}
.today .row{display:flex; gap:16px; align-items:flex-start}
.today img{width:52px; height:52px; border-radius:16px; flex:0 0 auto; border:1px solid rgba(255,255,255,.35)}
.today h3{margin:0 0 6px; font-size:clamp(18px,3.4vw,23px); font-weight:800; line-height:1.36;
  letter-spacing:-.035em; text-wrap:balance}
.today p{margin:0; font-size:13.5px; line-height:1.7; color:rgba(255,255,255,.9)}
.today .hwl{margin-top:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22);
  font-size:13px; color:rgba(255,255,255,.92)}
.today .hwl b{font-weight:800; color:#fff}
.today .acts{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.today .acts a{display:inline-block; background:#fff; color:#4E31C4; font-weight:800;
  font-size:13px; padding:11px 19px; border-radius:999px}
.today .acts button{background:rgba(255,255,255,.18); color:#fff; font-weight:800; font-size:13px;
  padding:11px 17px; border-radius:999px; border:1px solid rgba(255,255,255,.4);
  transition:transform .14s var(--e), background .2s}
.today .acts button:active{transform:scale(.96)}
.today .acts button.done{background:#fff; color:var(--free); border-color:#fff}
.today.skel{background:var(--soft); color:var(--faint); min-height:150px}

/* ── 강의로 가는 문 ── */
.door{margin:28px 0 0; border-radius:20px; padding:24px 22px; color:#fff;
  background:linear-gradient(150deg,#5C3CDB,#8F6BFF)}
.door .k{font-size:10.5px; font-weight:800; letter-spacing:.08em; opacity:.82; margin-bottom:8px}
.door h3{margin:0 0 9px; font-size:20px; font-weight:800; line-height:1.42; letter-spacing:-.03em; text-wrap:balance}
.door p{margin:0 0 17px; font-size:13px; line-height:1.7; color:rgba(255,255,255,.87)}
.door a{display:inline-block; background:#fff; color:#4E31C4; font-weight:800; font-size:13px; padding:11px 21px; border-radius:999px}

/* ── 푸터 ── */
.foot{margin-top:46px; border-top:1px solid var(--line); padding:26px 0 50px;
  font-size:11.5px; color:var(--faint); line-height:1.85}
.foot b{color:var(--ink2); font-weight:700}
.foot a{text-decoration:underline; text-underline-offset:2px}
.foot .links{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}

/* ── 토스트 ── */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  background:var(--ink); color:#fff; padding:12px 21px; border-radius:999px;
  font-size:12.5px; font-weight:700; z-index:120; opacity:0; pointer-events:none;
  box-shadow:var(--sh-l); transition:opacity .22s, transform .22s var(--e)}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

/* ═══ 레일 — 첫 화면 가치 입증 (컨마 공개 레일 이식, 토큰만 우리 것) ═══ */
.rstage{margin:0 0 4px; padding:14px 0 16px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent)}
.rflow{display:flex; gap:14px; width:max-content; animation:rslide 58s linear infinite}
.rstage:hover .rflow, .rstage:focus-within .rflow{animation-play-state:paused}
@keyframes rslide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.rpos{display:flex; align-items:center; gap:14px}
.rtrack{flex:1; height:3px; border-radius:2px; background:var(--line); overflow:hidden}
.rtrack i{display:block; width:34%; height:100%; border-radius:2px; background:var(--pri);
  animation:rpos 58s linear infinite}
.rstage:hover ~ .rpos .rtrack i{animation-play-state:paused}
@keyframes rpos{from{transform:translateX(0)} to{transform:translateX(194%)}}
.rcnt{font-size:11.5px; color:var(--faint); white-space:nowrap; font-weight:600}
.rcnt b{color:var(--pri-d); font-weight:800}

.rc{width:172px; flex:0 0 auto; background:var(--card); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:var(--sh-s); text-align:left;
  transition:transform .2s var(--e), box-shadow .2s, border-color .2s}
.rc:hover{transform:translateY(-6px); box-shadow:var(--sh-l); border-color:var(--tc)}
.rc-th{aspect-ratio:3/4; overflow:hidden; position:relative; background-size:cover; background-position:center}
.rc-ic{position:absolute; left:50%; top:40%; width:96%; transform:translate(-50%,-50%);
  opacity:.42; filter:saturate(.9) blur(.2px); mix-blend-mode:multiply; pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000 38%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 46%, #000 38%, transparent 72%)}
/* 🚨 그늘은 «위»에 깐다. 썸네일 아래쪽에 후킹 문구가 박혀 있어서,
      아래를 덮으면 제목을 지우는 꼴이 된다. */
.rc-th u{position:absolute; left:0; right:0; top:0; height:46%;
  background:linear-gradient(180deg,rgba(14,9,28,.62),rgba(16,10,32,.22) 52%,transparent)}
/* 조회수 = 이 카드의 «유일한» 주인공.
   제목은 썸네일 안에 이미 박혀 있으므로 카드에는 숫자만 둔다.
   사진이 밝든 어둡든 읽히도록 흰 알약 위에 등급색(--tc)으로 찍는다. */
.rc-v{position:absolute; left:9px; top:9px; z-index:2;
  display:inline-flex; align-items:baseline; gap:4px;
  background:#fff; color:var(--tc); border-radius:999px;
  padding:7px 14px 8px 11px; font-size:27px; font-weight:800;
  letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums;
  box-shadow:0 2px 10px rgba(16,10,32,.3), 0 0 0 1px rgba(255,255,255,.7)}
.rc-v b{font-size:.46em; line-height:1; transform:translateY(-3px); opacity:.9}
.rc-v small{font-size:.52em; font-weight:800; margin-left:-1px; opacity:.9}
.rc-open{position:absolute; right:8px; bottom:8px; z-index:2; font-size:9.5px; font-weight:800;
  color:var(--pri-d); background:#fff; padding:3px 8px; border-radius:999px;
  box-shadow:0 1px 6px rgba(30,26,48,.22)}

/* 구조 보기 시트 */
.ov{position:fixed; inset:0; z-index:100; display:none; background:rgba(22,18,36,.42);
  backdrop-filter:blur(3px); animation:fade .2s ease}
.ov.on{display:flex; align-items:center; justify-content:center; padding:20px}
@keyframes fade{from{opacity:0}}
.sheet{width:min(540px,100%); max-height:86vh; overflow:auto; background:var(--card);
  border-radius:20px; box-shadow:var(--sh-l); animation:rise .26s var(--e)}
@keyframes rise{from{opacity:0; transform:scale(.965) translateY(14px)}}
.sh-h{position:sticky; top:0; background:rgba(255,255,255,.95); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:16px 19px 13px; display:flex;
  align-items:flex-start; gap:12px; z-index:2}
.sh-h .x{margin-left:auto; width:30px; height:30px; border-radius:50%; background:var(--soft);
  font-size:14px; color:var(--sub); flex:0 0 auto; display:grid; place-items:center}
.sh-t{font-size:14.5px; font-weight:800; letter-spacing:-.02em; line-height:1.45; margin:0 0 5px}
.sh-m{font-size:11.5px; color:var(--faint)}
.sh-m b{color:var(--pri-d); font-weight:800}
.sh-b{padding:17px 19px 21px}
.hw2{display:flex; gap:12px; padding:11px 0; align-items:flex-start}
.hw2-t{flex:0 0 40px; font-size:11px; font-weight:800; color:var(--faint);
  font-variant-numeric:tabular-nums; padding-top:2px}
.hw2-bar{flex:0 0 3px; align-self:stretch; border-radius:2px; background:var(--sc); min-height:26px}
.hw2-k{font-size:10.5px; font-weight:800; color:var(--sc); letter-spacing:.02em; margin-bottom:3px}
.hw2-x{font-size:13px; line-height:1.65; color:var(--ink)}
.wall{position:relative; margin-top:2px}
.wall-blur{filter:blur(4px); opacity:.5; pointer-events:none; user-select:none}
.wall-cap{margin-top:-58px; position:relative; z-index:2; padding:66px 4px 2px; text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--card) 42%)}
.wall-cap .k{font-size:13.5px; font-weight:800; letter-spacing:-.02em; margin-bottom:7px}
.wall-cap .k em{font-style:normal; background:var(--pri-d); color:#fff; border-radius:6px; padding:0 7px 2px}
.wall-cap .d{font-size:12px; color:var(--sub); line-height:1.7; margin-bottom:15px}
.wall-cap .d b{color:var(--ink2); font-weight:700}
.wall-btns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.opened{margin-top:15px; padding:13px 15px; border-radius:12px; background:var(--wash);
  font-size:12px; line-height:1.7; color:var(--ink2)}
.opened b{color:var(--pri-d); font-weight:800}


/* ══════ C안 (2026-09-15 픽) — 어두운 덩어리 · 숫자 · 이런 분께 · 1층 FAQ ══════
   스킬 「기본홈페이지」에서 세 개만 가져왔다: 숫자 독립 · 밝→어둡→밝 리듬 · FAQ를 1층으로.
   히어로 사진과 후기는 재료가 없어서 «가져오지 않는다». */

/* 어두운 덩어리 — 화면 끝까지 꽉 차야 «다른 장»으로 읽힌다 */
.band{background:var(--band); padding:34px 0 38px; margin-top:38px}
.band .wrap{max-width:var(--W); margin:0 auto; padding:0 clamp(16px,4vw,28px)}
.band .eb{color:var(--band-eb)}
.band h2{color:var(--band-ink)}
.band .d{color:var(--band-sub)}

/* 숫자 3칸 — 증거는 위에 */
.nums{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px}
.nums div{border:1px solid var(--line); border-radius:16px; padding:15px 12px; text-align:center;
  background:var(--card); box-shadow:var(--sh-s)}
.nums b{display:block; font-size:clamp(19px,4vw,25px); font-weight:800; letter-spacing:-.04em;
  color:var(--pri-d); font-variant-numeric:tabular-nums; line-height:1.15}
.nums span{display:block; font-size:11px; color:var(--faint); font-weight:600; margin-top:5px; line-height:1.4}
@media (max-width:420px){ .nums{gap:7px} .nums div{padding:13px 6px; border-radius:13px} .nums span{font-size:10px} }

/* 이런 분께 — 체크 목록 */
.chk{display:grid; grid-template-columns:1fr 1fr; gap:9px 16px; margin-top:6px}
.chk div{display:flex; gap:9px; align-items:flex-start; font-size:13.5px; line-height:1.6;
  color:var(--band-ink2)}
.chk div span b{color:var(--band-ink); font-weight:700}
.chk div > b{flex:0 0 19px; height:19px; border-radius:6px; background:var(--pri-d); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:2px}
@media (max-width:560px){ .chk{grid-template-columns:1fr} }

/* 1층 FAQ */
.hfaq{margin-top:8px; border:1px solid var(--band-line); border-radius:16px; overflow:hidden;
  background:var(--band-card)}
.hfq{border-top:1px solid var(--band-line)}
.hfq:first-child{border-top:0}
.hfq summary{list-style:none; cursor:pointer; padding:14px 15px; display:flex; gap:11px;
  align-items:flex-start; font-size:14px; font-weight:700; line-height:1.5; color:var(--band-ink)}
.hfq summary::-webkit-details-marker{display:none}
.hfq summary .q{flex:0 0 21px; height:21px; border-radius:7px; background:var(--pri-d); color:#fff;
  font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:1px}
.hfq summary .ar{margin-left:auto; color:var(--band-sub); flex:0 0 auto; transition:transform .2s var(--e)}
.hfq[open] summary .ar{transform:rotate(180deg)}
.hfq .a{padding:0 15px 15px 47px; font-size:13px; line-height:1.75; color:var(--band-ink2)}
.hfq .a b{color:var(--band-ink); font-weight:700}
.hfq .a a{color:var(--pri-l); font-weight:700; text-decoration:underline; text-underline-offset:2px}

/* 어두운 덩어리 안의 «누가 만드나요» */
.band .who{background:var(--band-card); border-color:var(--band-line)}
.band .who .nm{color:var(--band-ink)}
.band .who .rl{color:var(--band-sub)}
.band .who .q{color:var(--band-ink2)}
.band .who img{border-color:rgba(255,255,255,.14)}

/* 마무리 — 다시 밝게 */
.close{margin-top:34px; text-align:center; padding:6px 0 0}
.close h2{margin:0 0 8px}
.close p{margin:0 auto 18px; max-width:44ch; font-size:14px; line-height:1.75; color:var(--ink2)}


/* ══════ 🧱 성과 벽 — 수강생이 직접 만든 숫자 (2026-09-16) ══════
   고객관점 랜딩의 «숫자 벽» 재료를 우리 톤으로 옮겼다.
   두 줄이 반대로 흐른다 — 한 줄이면 흐르는 게 아니라 «지나가는» 것으로 보인다. */
.wall{margin-top:16px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.wall + .wall{margin-top:9px}
.wflow{display:flex; gap:9px; width:max-content}
.wflow.l{animation:wallL 64s linear infinite}
.wflow.r{animation:wallR 72s linear infinite}
.wall:hover .wflow{animation-play-state:paused}
@keyframes wallL{from{transform:translateX(0)}   to{transform:translateX(-50%)}}
@keyframes wallR{from{transform:translateX(-50%)} to{transform:translateX(0)}}
.wflow img{width:104px; aspect-ratio:9/16; object-fit:cover; border-radius:11px;
  border:1px solid var(--line); background:var(--soft); flex:0 0 auto; box-shadow:var(--sh-s)}
@media (max-width:520px){ .wflow img{width:88px} }
.wcap{margin-top:12px; font-size:12px; color:var(--faint); line-height:1.65; text-align:center}
.wcap b{color:var(--pri-d); font-weight:800}
/* 출처는 «있되 안 튀게» — 없으면 남의 것처럼 보이고, 크면 본문을 가린다 */
.wcap .src{display:block; margin-top:5px; font-size:10.5px; color:var(--faint); opacity:.8}
.wcap .src b{color:var(--faint); font-weight:700}
@media (prefers-reduced-motion:reduce){ .wflow{animation:none} .wall{overflow-x:auto} }


/* ══════ 모션 기본 셋 (2026-09-16 사장님: 전 페이지 기본 적용) ══════
   ① 스크롤 등장  ② 숫자 카운트업  ③ 부드러운 앵커 이동(html{scroll-behavior} 이미 있음) */
.js .rv{opacity:0; transform:translateY(16px)}
.rv{transition:opacity .58s var(--e), transform .58s var(--e)}
.rv.in{opacity:1; transform:none}
/* 줄줄이 늘어선 것들은 한 박자씩 — 한꺼번에 뜨면 «떠오른다»가 아니라 «깜빡인다» */
.rv.in .stag>*{animation:stagIn .5s var(--e) both}
@keyframes stagIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1; transform:none}
  .rv, .rv.in .stag>*{transition:none; animation:none}
}


/* ══ 구조를 아직 못 받은 편 — 빈 화면 대신 «정리 중»을 정직하게 ══ */
.soonwrap{padding:6px 2px 4px;text-align:center}
.soon-k{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  color:var(--pri-d);background:var(--wash);padding:5px 12px;border-radius:999px}
.soon-t{margin-top:14px;font-size:16px;font-weight:800;letter-spacing:-.03em;line-height:1.5}
.soon-t b{color:var(--pri-d)}
.soon-d{margin-top:9px;font-size:12.5px;line-height:1.75;color:var(--sub)}
.soon-d b{color:var(--ink2);font-weight:700}
.soon-b{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:18px}