/* ===================================================================
   WUAZEN — 프리미엄 레이어 v3 (2026-07-25)
   대표님 지적: "정리는 됐지만 프리미엄은 아니다 / 시각자산 0 / 같은 패턴 반복 /
   여백 균일 / 타이포 평평 / 모션 fade-up 하나".
   → 이 파일은 style.css '뒤에' 로드되어 메인 페이지만 덮어쓴다.
     클래스는 전부 pr- 접두어(하위 페이지 무영향), 기존 토큰(--navy/--gold/--ivory) 사용.
   =================================================================== */

/* ── 0. 타이포·여백 강약 ─────────────────────────────────────── */
:root {
  --pr-gutter: clamp(20px, 5vw, 72px);
  --pr-rhythm-key: clamp(120px, 13vw, 200px);   /* 강조 섹션 */
  --pr-rhythm-sub: clamp(88px, 9vw, 128px);     /* 보조 섹션 */
  --pr-line: rgba(201, 168, 76, 0.22);
}
.pr-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pr-gutter); }
.pr-sec { position: relative; padding-top: var(--pr-rhythm-sub); padding-bottom: var(--pr-rhythm-sub); }
.pr-sec--key { padding-top: var(--pr-rhythm-key); padding-bottom: var(--pr-rhythm-key); }
.pr-navy { background: var(--navy); color: var(--text-light); }
.pr-ivory { background: var(--ivory); color: var(--text-dark); }
.pr-ink { background: #08131F; color: var(--text-light); }   /* 가장 어두운 강조 밴드 */

.pr-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-ink);
}
.pr-navy .pr-eyebrow, .pr-ink .pr-eyebrow { color: var(--gold); }
.pr-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.7; }

.pr-h2 {
  margin-top: 22px;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  font-weight: 800; line-height: 1.16; letter-spacing: -0.035em;
}
.pr-lead {
  margin-top: 22px; max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.85; color: var(--text-muted);
}
.pr-navy .pr-lead, .pr-ink .pr-lead { color: rgba(247, 246, 241, 0.72); }

/* ── 1. 스크롤 진행 표시 ─────────────────────────────────────── */
.pr-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, rgba(201,168,76,0.25), var(--gold));
  z-index: 200; pointer-events: none;
}

/* ── 2. 히어로: 비대칭 2단 + 워크플로우 도식 ─────────────────── */
.pr-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--text-light);
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px)); padding-bottom: clamp(64px, 8vw, 120px); }
.pr-hero::before {   /* 골드 헤어라인 그리드 */
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(var(--pr-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--pr-line) 1px, transparent 1px);
  background-size: 88px 88px; opacity: 0.5;
  mask-image: radial-gradient(120% 90% at 78% 22%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 22%, #000 20%, transparent 72%);
}
.pr-hero-grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.pr-hero-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.24em; color: var(--gold); text-transform: uppercase; }
.pr-hero h1 {
  margin-top: 26px;
  font-size: clamp(2.6rem, 6.2vw, 5.1rem); font-weight: 800; line-height: 1.08;
  letter-spacing: -0.045em; color: #FCFBF7;
}
.pr-hero h1 em { font-style: normal; color: var(--gold); }
.pr-hero-sub {
  margin-top: 30px; max-width: 34ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem); line-height: 1.7; color: rgba(247,246,241,0.86); font-weight: 500;
}
.pr-hero-note { margin-top: 14px; max-width: 40ch; font-size: 0.9375rem; line-height: 1.75; color: rgba(247,246,241,0.6); }
.pr-hero-cta { margin-top: clamp(30px, 4vw, 46px); display: flex; flex-wrap: wrap; gap: 14px; }
.pr-hero-meta {
  margin-top: clamp(34px, 4.5vw, 54px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.09);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 46px);
}
.pr-hero-meta div { min-width: 92px; }
.pr-hero-meta b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--gold); letter-spacing: -0.02em; }
.pr-hero-meta span { display: block; margin-top: 6px; font-size: 0.8125rem; color: rgba(247,246,241,0.6); line-height: 1.45; }

/* 워크플로우 도식 */
.pr-flow { position: relative; }
.pr-flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.pr-flow-cap { margin-top: 18px; font-size: 0.8125rem; color: rgba(247,246,241,0.55); letter-spacing: 0.02em; }
.pr-flow .node rect { fill: rgba(255,255,255,0.045); stroke: rgba(201,168,76,0.5); }
.pr-flow .node.on rect { fill: rgba(201,168,76,0.16); stroke: var(--gold); }
.pr-flow .node text { fill: #EDEAE1; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.pr-flow .wire { stroke: rgba(201,168,76,0.42); stroke-width: 1.4; fill: none; }
.pr-flow .spark { stroke: var(--gold); stroke-width: 2; fill: none; stroke-dasharray: 26 320; stroke-linecap: round;
  animation: prSpark 5.2s linear infinite; }
@keyframes prSpark { from { stroke-dashoffset: 346; } to { stroke-dashoffset: 0; } }
.pr-flow .tick { fill: var(--gold); opacity: 0.85; }

/* ── 3. 지그재그 서비스 행 ───────────────────────────────────── */
.pr-rows { margin-top: clamp(48px, 6vw, 84px); border-top: 1px solid var(--border-light); }
.pr-navy .pr-rows, .pr-ink .pr-rows { border-color: rgba(255,255,255,0.1); }
.pr-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(20px, 3.4vw, 56px); align-items: start;
  padding: clamp(38px, 4.6vw, 66px) 0; border-bottom: 1px solid var(--border-light);
  transition: background 380ms var(--ease-lux);
}
.pr-navy .pr-row, .pr-ink .pr-row { border-color: rgba(255,255,255,0.1); }
.pr-row:hover { background: rgba(201,168,76,0.045); }
.pr-row-no { font-size: 1rem; font-weight: 800; color: var(--gold-ink); letter-spacing: 0.06em; padding-top: 8px; font-feature-settings: 'tnum'; }
.pr-navy .pr-row-no { color: var(--gold); }
.pr-row h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.28; }
.pr-row h3 small { display: block; margin-top: 12px; font-size: 0.9375rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.pr-navy .pr-row h3 small { color: rgba(247,246,241,0.66); }
.pr-row-side { padding-top: 6px; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip {
  font-size: 0.8125rem; font-weight: 600; color: var(--navy);
  border: 1px solid var(--pr-line); border-radius: 999px; padding: 7px 14px; background: rgba(255,255,255,0.6);
}
.pr-navy .pr-chip, .pr-ink .pr-chip { color: var(--ivory); background: rgba(255,255,255,0.04); }
.pr-row-link { margin-top: 18px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 0.9375rem; font-weight: 700; color: var(--gold-ink); transition: gap 200ms ease-out; }
.pr-navy .pr-row-link { color: var(--gold); }
.pr-row-link:hover { gap: 12px; }

/* ── 4. 실적 밴드(큰 숫자) ───────────────────────────────────── */
.pr-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.1); }
.pr-band > div { background: var(--navy); padding: clamp(30px, 3.6vw, 52px) clamp(18px, 2vw, 30px); }
.pr-ink .pr-band > div { background: #08131F; }
.pr-band b {
  display: block; font-size: clamp(2.4rem, 5.2vw, 4.25rem); font-weight: 800; color: var(--gold);
  line-height: 0.95; letter-spacing: -0.05em; font-feature-settings: 'tnum';
}
.pr-band span { display: block; margin-top: 16px; font-size: 0.875rem; line-height: 1.55; color: rgba(247,246,241,0.66); }

/* ── 5. 프로세스 타임라인 ────────────────────────────────────── */
.pr-time { position: relative; margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 34px); }
.pr-time::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--pr-line); }
.pr-step { position: relative; padding-top: 34px; }
.pr-step::before {
  content: ''; position: absolute; top: 2px; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ivory); border: 2px solid var(--gold); transition: transform 320ms var(--ease-lux), box-shadow 320ms ease-out;
}
.pr-navy .pr-step::before, .pr-ink .pr-step::before { background: var(--navy); }
.pr-step:hover::before { transform: scale(1.45); box-shadow: 0 0 0 7px rgba(201,168,76,0.14); }
.pr-step-no { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; color: var(--gold-ink); }
.pr-navy .pr-step-no { color: var(--gold); }
.pr-step h3 { margin-top: 10px; font-size: clamp(1.25rem, 1.9vw, 1.625rem); font-weight: 800; letter-spacing: -0.025em; }
.pr-step p { margin-top: 12px; font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); }
.pr-navy .pr-step p { color: rgba(247,246,241,0.66); }
.pr-out {
  margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--pr-line);
  font-size: 0.875rem; font-weight: 700; color: var(--navy);
}
.pr-navy .pr-out, .pr-ink .pr-out { color: var(--ivory); }
.pr-out span { display: block; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; color: var(--gold-ink); margin-bottom: 5px; }
.pr-navy .pr-out span, .pr-ink .pr-out span { color: var(--gold); }

/* ── 6. 교육 비대칭 2단 ──────────────────────────────────────── */
.pr-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.pr-card {
  position: relative; background: var(--white); border: 1px solid var(--border-light);
  border-radius: 10px; padding: clamp(28px, 3vw, 42px); overflow: hidden;
  transition: transform 520ms var(--ease-lux), box-shadow 520ms var(--ease-lux), border-color 200ms ease-out;
}
.pr-card::after { content: ''; position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); transition: width 520ms var(--ease-lux); }
.pr-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 30px 60px -34px rgba(13,27,42,0.45); }
.pr-card:hover::after { width: 100%; }
.pr-card + .pr-card { margin-top: 20px; }
.pr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-card h3 { font-size: 1.3125rem; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; }
.pr-card p { margin-top: 14px; font-size: 0.9375rem; line-height: 1.8; color: var(--text-muted); }
.pr-ul { margin-top: 20px; display: grid; gap: 10px; }
.pr-ul li { position: relative; padding-left: 20px; font-size: 0.9375rem; color: var(--text-dark); line-height: 1.6; }
.pr-ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ── 7. 진단 밴드 ────────────────────────────────────────────── */
.pr-diag { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pr-qs { display: grid; gap: 1px; background: rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; }
.pr-q { background: rgba(255,255,255,0.035); padding: 20px 24px; display: flex; gap: 16px; align-items: baseline; }
.pr-q b { font-size: 0.8125rem; font-weight: 800; color: var(--gold); letter-spacing: 0.1em; min-width: 26px; }
.pr-q span { font-size: 1rem; color: rgba(247,246,241,0.9); line-height: 1.5; }
.pr-diag-foot { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 26px; font-size: 0.875rem; color: rgba(247,246,241,0.6); }

/* ── 8. 마감 CTA ─────────────────────────────────────────────── */
.pr-end { text-align: center; }
.pr-end h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 800; line-height: 1.24; letter-spacing: -0.035em; color: var(--ivory); }
.pr-end p { margin: 22px auto 0; max-width: 40ch; font-size: 1.0625rem; line-height: 1.8; color: rgba(247,246,241,0.68); }
.pr-end .btn { margin-top: clamp(30px, 4vw, 44px); }

/* ── 9. 연락처 행 ────────────────────────────────────────────── */
.pr-contact { margin-top: clamp(40px, 5vw, 72px); padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 32px; }
.pr-contact dt { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; color: var(--gold); text-transform: uppercase; }
.pr-contact dd { margin-top: 9px; font-size: 1rem; color: rgba(247,246,241,0.9); line-height: 1.6; }
.pr-contact dd a { color: inherit; }
.pr-contact dd a:hover { color: var(--gold); }

/* ── 10. 등장 모션(방향 다양화) ──────────────────────────────── */
.pr-rise { opacity: 0; transform: translateY(30px); transition: opacity 760ms var(--ease-lux), transform 760ms var(--ease-lux); }
.pr-left { opacity: 0; transform: translateX(-26px); transition: opacity 760ms var(--ease-lux), transform 760ms var(--ease-lux); }
.pr-right { opacity: 0; transform: translateX(26px); transition: opacity 760ms var(--ease-lux), transform 760ms var(--ease-lux); }
.pr-scale { opacity: 0; transform: scale(0.965); transition: opacity 760ms var(--ease-lux), transform 760ms var(--ease-lux); }
.pr-in { opacity: 1 !important; transform: none !important; }

/* ── 11. 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pr-hero-grid, .pr-split, .pr-diag { grid-template-columns: 1fr; }
  .pr-hero-sub, .pr-lead { max-width: none; }
  .pr-time { grid-template-columns: repeat(2, 1fr); row-gap: clamp(34px, 5vw, 48px); }
  .pr-time::before { display: none; }
  .pr-step { padding-top: 30px; }
  .pr-band { grid-template-columns: repeat(2, 1fr); }
  .pr-row { grid-template-columns: 56px minmax(0, 1fr); }
  .pr-row-side { grid-column: 2; padding-top: 0; }
}
@media (max-width: 599px) {
  .pr-time { grid-template-columns: 1fr; }
  .pr-band { grid-template-columns: 1fr; }
  .pr-q { padding: 17px 18px; }
  .pr-hero-meta { gap: 18px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-rise, .pr-left, .pr-right, .pr-scale { opacity: 1; transform: none; transition: none; }
  .pr-flow .spark { animation: none; }
}

/* ── 12. pr-ink(가장 어두운 밴드) 대비 보정 ────────────────────
   실측 6건 미달: .pr-row-no 3.71 / h3 small 3.24 — .pr-navy만 밝게 처리하고
   .pr-ink를 빼먹어 밝은배경용 골드(#8A6A20)·회색이 어두운 밴드에 그대로 적용됐다. */
.pr-ink .pr-row-no,
.pr-ink .pr-row-link,
.pr-ink .pr-step-no,
.pr-ink .pr-out span { color: var(--gold); }
.pr-ink .pr-row h3 small,
.pr-ink .pr-step p { color: rgba(247, 246, 241, 0.72); }
.pr-navy .pr-step-no { color: var(--gold); }
.pr-navy .pr-step p { color: rgba(247, 246, 241, 0.72); }

/* ── 13. 모바일: 좌우 등장 모션 → 위아래로 ──────────────────────
   ★실측(390px): .pr-right의 translateX(26px)가 등장 애니메이션 '중'에
   문서 폭을 396px로 늘려 순간적으로 가로 스크롤이 생겼다(scrollWidth 396).
   좁은 화면에서는 가로 이동을 쓰지 않는다. */
@media (max-width: 1023px) {
  .pr-left, .pr-right { transform: translateY(24px); }
}

/* ── 14. 한글 줄바꿈·크기 보정 (스크린샷 육안 확인 결과) ────────
   ★"일의 무게를 줄이 / 고," 처럼 낱말 중간에서 끊겼다. 한글은 기본 규칙이
   음절 단위 줄바꿈이라 word-break: keep-all 이 필수다. 히어로 최대크기도
   2단 컬럼 폭에 맞춰 내린다(81.6px → 68px). */
.pr-hero h1, .pr-h2, .pr-row h3, .pr-step h3, .pr-card h3, .pr-end h2, .pr-q span {
  word-break: keep-all; overflow-wrap: break-word;
}
.pr-hero h1 { font-size: clamp(2.35rem, 4.7vw, 4.25rem); }
.pr-hero-meta b { white-space: nowrap; }
.pr-hero-meta b span { display: inline; font-size: 1.05rem; vertical-align: 1px; margin: 0; }
/* ★'1,500'과 '+'가 갈라진 원인: .pr-hero-meta span 이 display:block 이라 b 안의 +도 블록이 됐다. */
.pr-h2 { font-size: clamp(2rem, 3.9vw, 3.15rem); }


/* ===================================================================
   프리미엄 등급 레이어 v5 (2026-07-26)
   대표님: "프리미엄으로 수주했다면 이 수준은 아마추어다."
   → 스탠다드와 프리미엄을 가르는 요소를 넣는다:
     진입 전환 · 레이어드 히어로(마우스 반응) · 스크롤 고정 스토리텔링
     · 자석 버튼/호버 스윕 · 초대형 섹션 인덱스 · 키워드 마퀴 · 커스텀 스크롤바
   =================================================================== */

/* ── A. 진입 전환(커튼) ─────────────────────────────────────── */
.pr-curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: transform 900ms cubic-bezier(0.76, 0, 0.24, 1), opacity 500ms ease-out 400ms;
}
.pr-curtain span {
  font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.42em; color: var(--gold);
  opacity: 0; animation: prCurtainIn 620ms ease-out forwards;
}
@keyframes prCurtainIn { from { opacity: 0; letter-spacing: 0.62em; } to { opacity: 1; letter-spacing: 0.42em; } }
.pr-curtain.up { transform: translateY(-101%); opacity: 0; pointer-events: none; }

/* ── B. 히어로 레이어(깊이) ─────────────────────────────────── */
.pr-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  will-change: transform;
}
.pr-orb-1 { width: 640px; height: 640px; right: -6%; top: -18%;
  background: radial-gradient(circle at 40% 40%, rgba(201,168,76,0.16), rgba(201,168,76,0) 62%); }
.pr-orb-2 { width: 420px; height: 420px; left: -10%; bottom: -22%;
  background: radial-gradient(circle at 50% 50%, rgba(90,130,170,0.14), rgba(90,130,170,0) 66%); }
.pr-hero-grid { z-index: 2; }

/* ── C. 스크롤 고정 스토리텔링 ──────────────────────────────── */
.pr-stick-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.pr-stick-left { position: sticky; top: calc(var(--header-h) + 56px); }
.pr-rail { margin-top: clamp(28px, 3.4vw, 44px); display: grid; gap: 2px; }
.pr-rail button {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px;
  padding: 13px 0; text-align: left; background: none; border: 0; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: var(--text-muted);
  border-top: 1px solid var(--border-light); transition: color 260ms ease-out;
  min-height: 44px;
}
.pr-navy .pr-rail button, .pr-ink .pr-rail button { border-color: rgba(255,255,255,0.1); color: rgba(247,246,241,0.5); }
.pr-rail button i { font-style: normal; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; opacity: 0.65; }
.pr-rail button.on { color: var(--navy); }
.pr-navy .pr-rail button.on, .pr-ink .pr-rail button.on { color: var(--ivory); }
.pr-rail button.on i { color: var(--gold-ink); opacity: 1; }
.pr-navy .pr-rail button.on i, .pr-ink .pr-rail button.on i { color: var(--gold); }
.pr-rail button::after {
  content: ''; grid-column: 1 / -1; height: 2px; width: 0; background: var(--gold);
  transition: width 520ms var(--ease-lux);
}
.pr-rail button.on::after { width: 100%; }

.pr-panels { display: grid; gap: clamp(20px, 2.6vw, 34px); }
.pr-panel {
  position: relative; padding: clamp(30px, 3.4vw, 48px);
  border: 1px solid var(--border-light); border-radius: 12px; background: var(--white);
  transition: border-color 320ms ease-out, box-shadow 520ms var(--ease-lux), transform 520ms var(--ease-lux), opacity 420ms ease-out;
  opacity: 0.55;
}
.pr-navy .pr-panel, .pr-ink .pr-panel { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.1); }
.pr-panel.on { opacity: 1; border-color: rgba(201,168,76,0.7); box-shadow: 0 34px 70px -44px rgba(13,27,42,0.5); transform: translateY(-2px); }
.pr-panel-no { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.18em; color: var(--gold-ink); }
.pr-navy .pr-panel-no, .pr-ink .pr-panel-no { color: var(--gold); }
.pr-panel h3 { margin-top: 12px; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -0.028em; }
.pr-panel p { margin-top: 14px; font-size: 0.9375rem; line-height: 1.8; color: var(--text-muted); }
.pr-navy .pr-panel p, .pr-ink .pr-panel p { color: rgba(247,246,241,0.72); }

/* ── D. 자석 버튼 · 호버 스윕 ───────────────────────────────── */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,0.34) 50%, transparent 68%);
  transform: translateX(-120%); transition: transform 780ms var(--ease-lux);
}
.btn:hover::after { transform: translateX(120%); }

/* ── E. 초대형 섹션 인덱스 ──────────────────────────────────── */
.pr-idx {
  position: absolute; top: clamp(24px, 3vw, 52px); right: var(--pr-gutter);
  font-size: clamp(5rem, 13vw, 12rem); font-weight: 800; line-height: 0.8;
  letter-spacing: -0.06em; color: rgba(13, 27, 42, 0.045); pointer-events: none; user-select: none;
  font-feature-settings: 'tnum';
}
.pr-navy .pr-idx, .pr-ink .pr-idx { color: rgba(247, 246, 241, 0.045); }

/* ── F. 키워드 마퀴 ─────────────────────────────────────────── */
.pr-marquee { overflow: hidden; border-top: 1px solid var(--pr-line); border-bottom: 1px solid var(--pr-line); background: var(--navy); }
.pr-marquee-track { display: flex; width: max-content; animation: prMarquee 34s linear infinite; }
.pr-marquee-track:hover { animation-play-state: paused; }
.pr-marquee span {
  display: inline-flex; align-items: center; gap: 26px; padding: 18px 26px;
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; color: rgba(247,246,241,0.62); white-space: nowrap;
}
.pr-marquee span::after { content: '●'; font-size: 0.4rem; color: var(--gold); }
@keyframes prMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── G. 마감 디테일 ─────────────────────────────────────────── */
::selection { background: rgba(201,168,76,0.28); color: inherit; }
html { scrollbar-color: rgba(201,168,76,0.55) rgba(13,27,42,0.08); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(13,27,42,0.06); }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.5); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.8); background-clip: content-box; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ── H. 반응형 ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .pr-stick-grid { grid-template-columns: 1fr; }
  .pr-stick-left { position: static; }
  .pr-rail { display: none; }              /* 모바일은 고정 레일 대신 패널만 순차 노출 */
  .pr-panel { opacity: 1; }
  .pr-orb-1 { width: 380px; height: 380px; }
  .pr-orb-2 { display: none; }
  .pr-idx { font-size: clamp(3.4rem, 17vw, 6rem); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-curtain { display: none; }
  .pr-marquee-track { animation: none; }
  .btn::after { display: none; }
  .pr-panel { opacity: 1; }
}