/* ═══════════════════════════════════════════════════════════════════════════
   킥캣 공식 사이트 — 홈 전용 스타일 (site.css 뒤에 홈에서만 로드)
   목업 정본: mock/Main.dc.html(1440) · mock/Mobile.dc.html(390)

   ⚠️토큰(--amber --dusk --cream … --wrap --radius --touch --font-display)은
     site.css 가 단일 출처다. 여기서 :root 를 다시 선언하지 말 것.
   ⚠️모션은 전부 두 스위치를 통과해야 한다 — html[data-fx="off"] 와
     prefers-reduced-motion. 새 애니메이션을 넣으면 파일 끝의 "모션 차단" 절에도 적을 것.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 홈 골격 ───────────────────────────────────────────────────────────────
   섹션이 저마다 배경·패딩을 가지므로 main 의 공용 여백을 0 으로 되돌린다.
   폭 제한은 각 섹션 안의 .wrap 이 맡는다. */
main.home { padding-block: 0; }
.home h1, .home h2, .home h3 { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1.22; text-wrap: balance; }
.home p { margin: 0; text-wrap: pretty; }
.home section { position: relative; }

/* 본문 건너뛰기 — 화면 밖에 두었다가 탭 포커스에서만 나온다 */
.skip-link {
  position: absolute; left: -9999px; top: auto;
  padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--amber); color: var(--ink);
  font-family: var(--font-display); text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; z-index: 100; }

/* 단독 문단 링크("스토리 더 보기" · "전체 랭킹 보기")는 ★문장 속 인라인 링크가 아니다★ —
   WCAG 2.5.8 의 인라인 예외를 못 받는다. 줄 높이만으로는 22px 라 375px 실측에서 24px 미만으로 잡혔다.
   글자 크기는 그대로 두고 세로 여백으로만 표적을 키운다(inline 이면 padding 이 높이에 안 잡힌다). */
.story-text > p > a, .rank-intro > p > a { display: inline-block; padding-block: 3px; }

/* 눈썹 문구 — 섹션 제목 위 작은 라벨 */
.eyebrow {
  display: block;
  font-family: var(--font-display); font-size: .94rem;
  letter-spacing: .06em; color: var(--amber);
}

/* 태그 배지는 site.css 의 .badge / .badge--sage / .badge--clay 를 그대로 쓴다(중복 선언 금지).
   ⚠️크림 카드 위 배지는 글자색만 뒤집는다 — 흰 글자가 --gold 에서 2.65:1, --sage 에서 2.80:1 로
     4.5:1 에 크게 미달한다. ink 로 바꾸면 각각 5.21:1 · 4.94:1 (실측).
     🚨--clay 는 예외다 — ink 가 3.08:1 로 오히려 나빠진다. 흰 글자를 유지하되 ★배경을 어둡게★ 한다:
       --clay(#C0564A) 위 흰 글자는 실측 ★4.496:1 로 4.5:1 미달★ 이다(구 주석의 "4.50:1" 은
       반올림이 만든 착시였다 — 그 0.004 때문에 AA 를 못 넘는다). 여기서만 #B5503F 로 눌러 5.02:1.
       🚫site.css 의 --clay 토큰은 건드리지 말 것 — 다른 면(어두운 배경)에서 쓰는 색이다. */
.feature-card .badge { align-self: flex-start; color: var(--ink); }
.feature-card .badge--clay { background: #B5503F; color: #fff; }

/* 효과 토글(.fx-toggle)은 R1 부터 ★전 페이지 공용 크롬★ 이라 site.css 가 소유한다. */

/* ═══ 히어로 ══════════════════════════════════════════════════════════════ */
.hero {
  position: relative; overflow: hidden;
  min-height: 720px; display: flex; align-items: center;
  /* 🚨아래 여백은 ★골목 바닥(.alley)의 자리★ 다. min-height 안에서는 본문만 올라가고, 본문이
     490px(720−230)을 넘으면 히어로가 ★커져서★ 여백을 지킨다. 지우면 고양이가 CTA 뒤로 들어간다. */
  padding-bottom: 230px;
  background: linear-gradient(180deg, #2E1C19 0%, #7A3A22 42%, #D98A3A 70%, #F2B85C 100%);
}
/* 시차 레이어. fx.js 가 data-depth 를 읽어 translate3d 를 준다 —
   기본값이 없어야(=transform 미지정) 자바스크립트가 꺼져도 제자리에 있는다. */
.hero-layer { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.hero-layer--stars {
  background-image:
    radial-gradient(circle, rgba(255,225,160,.9) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255,225,160,.6) 0 1px, transparent 1.5px);
  background-size: 260px 180px, 140px 120px;
  background-position: 20px 30px, 90px 60px;
  opacity: .7;
}
/* 히어로 사진 — 오른쪽에 붙이고 왼쪽으로 페이드아웃시킨다 */
.hero-art { position: absolute; right: 0; top: 0; width: 62.5%; height: 100%; overflow: hidden; }
/* 🚨키아트 레이어는 .hero-layer 도 겸한다 — 그 inset:0 이 left/bottom 을 0 으로 못박아
   left+width+right 3중 지정이 되고, 그러면 CSS 는 ★right 를 버린다★(=사진이 왼쪽으로 붙어
   텍스트 컬럼과 겹친다). 여기서 되돌려야 오른쪽 정렬이 산다. */
.hero-layer.hero-art { left: auto; bottom: auto; }
/* <picture> 는 inline 이라 안쪽 img 의 100% 가 0 이 된다 — 블록으로 펴 준다 */
.hero-art picture { display: block; width: 100%; height: 100%; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* 아래쪽 페이드 — ⚠️불투명 --dusk 로 닫지 말 것. 고양이가 서는 바닥이 통짜 어두운 띠가 되어
   돌바닥이 사라진다. .55 까지만. 대비는 안전: 문안은 .hero-copy 스크림 안, 밖의 .hero-meta 도
   .hero-overlay(α≈.72)와 곱해 실측 7.7:1. */
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,36,32,0) 55%, rgba(43,36,32,.55) 100%);
}
/* 🚨텍스트 뒤 상시 오버레이 — 그라디언트 밝은 구간(#D98A3A)에서 크림 텍스트가 2.5:1 밖에 안 나온다.
   이 오버레이가 7:1 을 만든다. "깔끔해 보인다"고 지우면 대비 미달로 돌아간다.
   ⚠️폭을 % 로 자르지 말 것 — .wrap(1080px)이 가운데 정렬이라 뷰포트가 넓어지면 텍스트 컬럼이
     오버레이 밖으로 밀려 나간다(1440 에서는 맞고 1920 에서는 어긋난다). 100% 로 덮고
     그라디언트로 오른쪽만 비운다. */
.hero-overlay {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(43,36,32,.82) 0,
    rgba(43,36,32,.70) 45%,
    rgba(43,36,32,.62) 62%,
    rgba(43,36,32,0) 100%);
}
.hero > .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 20px; padding-block: 56px; }
/* 텍스트 컬럼 자체의 스크림 — 오버레이(≥.62)와 곱해져 실효 알파 ≥ .83 이 된다.
   최악 지점(그라디언트 최명부 #F2B85C)에서도 크림 8.96:1 (실측). 이 한 겹을 빼면 5.36:1 로 떨어진다. */
.hero-copy {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 560px;
  padding: 20px 24px; border-radius: 16px;
  background: rgba(43,36,32,.55);
}
.hero h1 { font-size: 3.6rem; line-height: 1.12; color: #FFF3DC; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.hero .sign { align-self: flex-start; font-size: 1.35rem; }
.hero-lead { font-size: 1.16rem; color: #F0DDBF; max-width: 34em; }
/* 🚨--muted-on-dark 를 쓰지 말 것 — .hero-copy 스크림 밖(오버레이만 있는 자리)에서 3.31:1 이다.
   크림이면 5.36:1 (실측). 13px 고정 = 소형 텍스트이므로 4.5:1 기준이 적용된다. */
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--cream); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* 🚫.hero-cat 에 히어로용 절대 배치를 되살리지 말 것 — 히어로 키아트에 이미 고양이가 그려져 있어
   <img> 를 겹치면 고양이가 두 마리가 된다(Task 5 리뷰). 지금 .hero-cat 은 스토리 섹션 고양이에
   붙은 ★fx.js 선택자 전용 클래스★ 이며 배치는 .story-art 가 맡는다(커서도 바꾸지 않는다 —
   누를 수 있는 것처럼 보이지만 링크가 아니다). */

/* 어두운 면 위의 칩 — site.css 의 아이템 칩(.chip: 크림 배경·ink 글자)과 이름이 같다.
   🚨래퍼(.chips / .rank-tabs)를 ★두 선택자 목록 모두에★ 넣어야 한다. 하나라도 빠지면 그 칩은
     site.css 로 떨어져 어두운 배경 위 ink 글자 = 1.20:1 이 된다(실측). 고쳐 놓으면 9.90:1. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .chip, .rank-tabs .chip {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(245,237,224,.1);
  border: 1px solid rgba(201,150,63,.4);
  color: var(--cream); font-size: .8rem;
}
/* 🚨히어로 칩만은 ★어두운 스크림★ — 밝아진 키아트 위에서 rgba(245,237,224,.1) 은 씻긴다.
   좁은 화면은 .hero-overlay 가 아래 62% 만 덮어 칩이 그 ★밖★ 이다. 실측 대비: #F2B85C 위
   6.50:1, 순백 위 5.26:1(크림 글자). */
.hero .chips .chip { background: rgba(43,36,32,.72); border-color: rgba(201,150,63,.5); }
.chips .chip[aria-current], .chips .chip[aria-selected="true"], .chips .chip.is-on,
.rank-tabs .chip[aria-current], .rank-tabs .chip[aria-selected="true"], .rank-tabs .chip.is-on {
  background: var(--amber); border-color: var(--amber); color: var(--ink);
}

/* ═══ 골목 바닥 — 살아 있는 고양이·공·개 ══════════════════════════════════
   키아트(hero_bg_*)에는 고양이가 없다. 여기 <img> 한 마리가 그 고양이다.
   ⚠️자리는 .hero 의 padding-bottom 이 낸다. 좌표 정본은 아래 두 변수뿐(카운터도 이걸로 계산). */
.alley {
  /* 🚨40vw = 키아트 왼쪽 경계(37.5%) 바로 오른쪽 — 고양이를 ★돌바닥 위★ 에 세운다. 왼쪽 어두운
     면에 세우면 빈 갈색 블록에 떠 보인다. 상한을 두면 ~1387px 부터 다시 왼쪽으로 내려앉으므로
     clamp 가 아니라 max(). 좁은 화면은 키아트가 위쪽 전폭이라 미디어 쿼리가 왼쪽으로 돌린다. */
  --cat-x: max(12px, 40vw);
  --cat-w: clamp(110px, 20vw, 200px);
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  /* 🚨z-index 1 — 마크업이 .wrap ★뒤★ 다(장난감이 H1·CTA 보다 앞설 수 없다). DOM 이 뒤라
     같은 1 인 .hero-overlay 를 덮고, 2 인 .wrap 이 골목을 덮는다. 2 로 올리면 본문을 가린다. */
  z-index: 1; pointer-events: none;      /* 버튼만 auto — 본문·CTA 를 가리지 않는다 */
}
/* 🚨site.css 의 img{display:block} 이 UA 의 [hidden]{display:none} 을 ★이긴다★ — 이 줄이 없으면
   숨긴 개 2마리·공·충격별이 전부 겹쳐 보인다(.lang-pop·.install-bar 가 이미 밟은 함정). */
.alley img[hidden] { display: none; }
/* 아래 10px 이 물리 지면선(fx.js ground = 높이−10). 위 그라디언트는 좌우 면을 한 바닥으로 잇는다. */
.alley-ground { position: absolute; inset: auto 0 0 0; height: 46px; background: linear-gradient(180deg, rgba(20,12,8,0), rgba(20,12,8,.42)); }
.alley-cat {
  position: absolute; left: var(--cat-x); bottom: 8px;
  width: var(--cat-w); aspect-ratio: 1;
  padding: 0; border: 0; background: transparent; cursor: pointer; pointer-events: auto;
}
.alley-cat:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 50%; }
/* 기울기는 fx.js 가 transform 으로 준다 — 전환은 CSS 가, 값은 JS 가 소유한다 */
.alley-cat-tilt { display: block; transform-origin: 50% 85%; transition: transform .12s linear; }
.alley-cat-breathe { display: block; transform-origin: 50% 100%; animation: kc-breathe 2.6s ease-in-out infinite; }
.alley-cat img { width: 100%; height: auto; display: block; }
/* 🚨숨쉬기는 ★등비 확대★ 다 — scale(1.02,.98) 스쿼시는 <img> 상자 비율을 4% 비틀어 프로브
   distortedImgs 에 24/24 FAIL 로 잡혔다. 발밑 고정은 transform-origin·translateY 로. */
@keyframes kc-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.5px) scale(1.015); } }
/* 🚨물리 좌표는 ★공의 중심★ — 마진으로 반지름(24px)만큼 당긴다. 빼면 공이 바닥에 반쯤 잠긴다. */
.alley-ball { position: absolute; left: 0; top: 0; margin: -24px 0 0 -24px; width: 48px; height: 48px; will-change: transform; }
/* 🚨원본(Particle_KickShock.png)은 ★남보라 한색★ 이라 노을골목 팔레트에서 혼자 찬 색으로 튄다.
   게임 에셋은 인게임 정본이라 건드리지 않고 여기서 앰버화한다(sepia 로 색을 모은 뒤 앰버로 민다). */
.alley-shock { position: absolute; width: 96px; height: 96px; pointer-events: none;
  filter: sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.05); }
/* 쓰레기통 뒤에서 개가 고개를 내민다(코기 → 시바 → 시추 순환). 개는 이 셋뿐이다. */
.alley-dogs { position: absolute; right: clamp(8px, 6vw, 90px); bottom: 6px; width: 150px; height: 150px; }
.alley-trash { position: absolute; right: 0; bottom: 0; width: 96px; height: auto; z-index: 2; }
.alley-dog { position: absolute; right: 30px; bottom: 10px; width: 120px; height: 120px; z-index: 1; transform: translateX(40px); animation: kc-peek 8s ease-in-out infinite; }
@keyframes kc-peek { 0%, 70%, 100% { transform: translateX(40px); } 80%, 90% { transform: translateX(-10px); } }
/* 헬멧(용기 모드)을 쓰면 개가 물러난다 */
.alley[data-brave="on"] .alley-dog { animation: none; transform: translateX(70px); opacity: .6; }
.alley-dog.is-fled { animation: kc-flee .8s ease-in forwards; }
@keyframes kc-flee { 0% { transform: translateX(-10px) scaleY(1); } 30% { transform: translateX(-20px) scaleY(.7); } 100% { transform: translateX(180px) scaleY(1); opacity: 0; } }
/* 킥 카운터 — 고양이 오른쪽 발치. 숫자는 fx.js 가 채운다 */
.alley-counter {
  position: absolute; left: calc(var(--cat-x) + var(--cat-w) + 10px); bottom: 18px;
  margin: 0; padding: 2px 10px; border-radius: 999px;
  background: rgba(43,36,32,.72); color: var(--cream); font-size: .8rem;
}
html:not(.js) .alley-counter { display: none; }   /* 채울 주체가 없으면 "0" 만 남는다 */

/* 전구 시각 — 방문자의 시계로 켠다(fx.js initDaytime 이 data-hour 를 준다) */
html[data-hour="day"] .bulb { animation: none; opacity: .35; }
html[data-hour="night"] .bulb { filter: drop-shadow(0 0 6px #FFD27A); }

/* 시간대 — 스크롤이 내려갈수록 밤. 🚨본문 ★뒤★ 다(z-index:0) — 본문 위에 덮으면 대비가 무너진다.
   스크롤 타임라인이 있으면 CSS 가 연속으로, 없으면 fx.js 가 data-sky 로 계단 전환한다. */
.sky-night { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, #221C19, #2B2420); opacity: 0; }
@supports (animation-timeline: scroll()) {
  .sky-night { animation: kc-night linear both; animation-timeline: scroll(root); }
  @keyframes kc-night { 0% { opacity: 0; } 55% { opacity: 0; } 100% { opacity: .55; } }
}
html[data-sky="night"] .sky-night { opacity: .55; transition: opacity .8s; }

/* 전구 줄 — 히어로 상단의 골목 전등 */
.bulb { animation: kc-blink 2.4s ease-in-out infinite; }
.bulb:nth-child(2n) { animation-delay: .8s; }
.bulb:nth-child(3n) { animation-delay: 1.5s; }
@keyframes kc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* 아래로 유도 화살표 */
.bounce { animation: kc-bounce 1.8s ease-in-out infinite; }
@keyframes kc-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* 🚨히어로 아래쪽은 그라디언트가 가장 밝은 구간(#F2B85C)이다 — 여기에 muted 글자를 얹으면 1.41:1.
   알약 모양 어두운 스크림을 깔아야 읽힌다. */
/* 🚨가운데는 이제 고양이 자리 — z-index 3 이라 두면 발 위에 알약이 얹힌다. 왼쪽으로 옮긴다.
   ⚠️선언은 .alley 절이 아니라 ★여기★ — 같은 특이도라 뒤가 이긴다. */
.hero-scroll {
  position: absolute; left: 24px; bottom: 20px; transform: none; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(43,36,32,.72); color: var(--cream);
  font-size: .75rem;
}

/* ═══ 마퀴 띠 ═════════════════════════════════════════════════════════════
   ul 을 통째로 −50% 이동시킨다 → 마크업에서 항목을 ★두 벌★ 넣어야 이음매가 없다. */
.marquee {
  height: 44px; overflow: hidden;
  background: var(--amber); color: var(--ink);
  border-top: 3px solid #B87A1F; border-bottom: 3px solid #B87A1F;
}
.marquee ul {
  display: flex; align-items: center; gap: 40px;
  height: 100%; margin: 0; padding: 0 0 0 30px; list-style: none;
  white-space: nowrap; width: max-content;
  font-family: var(--font-display); font-size: 1.05rem;
  animation: kc-marquee 34s linear infinite;
}
.marquee li { flex: none; }
@keyframes kc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══ 스토리 ══════════════════════════════════════════════════════════════ */
.story { background: linear-gradient(180deg, var(--dusk-2), var(--dusk)); padding-block: 72px; }
.story > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px; align-items: center; }
.story-text { display: flex; flex-direction: column; gap: 14px; }
/* 제목 옆 헬멧 데모 버튼(.helmet-btn 모양은 site.css 소유) */
.story-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.story h2 { font-size: 2.3rem; color: #FFF3DC; }
.story-text > p { color: #F0DDBF; font-size: 1.06rem; }
.story-text > p + p { color: var(--muted-on-dark); font-size: 1rem; }
.story-art { display: flex; justify-content: center; }
.story-art img { filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); }

.story-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.story-cards > * {
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: #3A2B22; border: 1px solid rgba(201,150,63,.3);
  color: var(--cream); text-decoration: none;
}
.story-cards figure { margin: 0; }
.story-thumb {
  height: 120px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 70%, #7A3A22, #2B1A14);
}
.story-thumb img { height: 104px; width: auto; object-fit: contain; }
.story-cap { padding: 10px 12px; display: flex; flex-direction: column; }
.story-cap span { font-size: .7rem; color: var(--amber); font-weight: 700; }
.story-cap b { font-family: var(--font-display); font-weight: 400; font-size: .95rem; }

/* 잠긴 챕터 — 결말은 게임에서. 점선 테두리가 "여긴 비어 있다"의 신호다 */
.lock-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 14px; text-align: center;
  background: #1A1512; border: 1px dashed rgba(201,150,63,.4); border-radius: var(--radius);
  color: var(--muted-on-dark); font-size: .8rem;
}
.lock-card b { font-family: var(--font-display); font-weight: 400; font-size: .95rem; color: var(--cream); }

/* ═══ 기능 3종 ════════════════════════════════════════════════════════════ */
.features { padding-block: 76px 60px; }
.features > .wrap { display: flex; flex-direction: column; gap: 34px; }
.features h2 { font-size: 2.3rem; color: #FFF3DC; }
.features-head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.features-head p { color: var(--muted-on-dark); font-size: 1.04rem; max-width: 40em; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.feature-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  color: var(--ink); border: 1px solid var(--line);
}
.feature-shot {
  position: relative; height: 300px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(180deg, #F6D8A8, var(--cream-2));
}
.feature-card:nth-child(2) .feature-shot { background: linear-gradient(180deg, #D8E3C4, var(--cream-2)); }
.feature-card:nth-child(3) .feature-shot { background: linear-gradient(180deg, #F0C9B8, var(--cream-2)); }
.feature-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.feature-body h3 { font-size: 1.34rem; color: var(--ink); }
.feature-body p { color: var(--ink-2); }

/* 폰 프레임 — 스크린샷을 기기 안에 넣는다 */
.phone {
  position: relative; width: 200px; height: 400px; flex: none;
  margin-bottom: -120px;
  border-radius: 26px; overflow: hidden;
  background: #0d0a09; border: 6px solid #2a201b;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ 공 등급 ═════════════════════════════════════════════════════════════
   🚨등급색은 ★테두리와 점★에만 쓴다. 흰 글자를 등급색 배경에 얹으면 6종 중 5종이
     4.5:1 에 미달한다(실측). 배경으로 되돌리지 말 것. */
.grades { background: var(--dusk-2); padding-block: 62px; }
.grades > .wrap { display: flex; flex-direction: column; gap: 24px; }
.grades h2 { font-size: 2.1rem; color: #FFF3DC; }
.grades-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.grades-head p { color: var(--muted-on-dark); }
.grade-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }

.grade-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px; border-radius: var(--radius);
  background: rgba(245,237,224,.05);
  border: 1px solid var(--grade, var(--line));
  color: var(--cream); font-size: .78rem; font-weight: 700; letter-spacing: .05em;
  text-align: center; text-decoration: none;
}
.grade-card img, .grade-orb { width: 84px; height: 84px; object-fit: contain; }
.grade-orb { border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), var(--grade, var(--muted))); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grade, var(--muted)); margin-right: 6px; vertical-align: middle; }

/* 등급 6종 — 값은 게임 데이터 정본과 같다 */
.grade-card[data-grade="C"]   { --grade: #8A7B6B; }
.grade-card[data-grade="B"]   { --grade: #5C87A8; }
.grade-card[data-grade="A"]   { --grade: #7A5EA8; }
.grade-card[data-grade="S"]   { --grade: #C9963F; }
.grade-card[data-grade="SS"]  { --grade: #C0564A; }
/* SSS 는 색이 배경과 가까워 테두리만으로는 보이지 않는다 → 앰버 링을 하나 더 두른다 */
.grade-card[data-grade="SSS"] { --grade: #3E2723; box-shadow: 0 0 0 3px rgba(255,181,71,.35); }

/* ═══ 랭킹 위젯 ═══════════════════════════════════════════════════════════ */
.rank-widget { padding-block: 72px; }
.rank-widget > .wrap { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 44px; align-items: center; }
.rank-widget h2 { font-size: 2.1rem; color: #FFF3DC; }
.rank-intro { display: flex; flex-direction: column; gap: 14px; }
.rank-intro p { color: var(--muted-on-dark); }
.rank-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
/* <button> 이므로 폰트를 상속시켜야 한다. min-height 44px 은 ★손가락 표적★ 이다 —
   .chip 의 padding 만으로는 29px 라 좁은 화면에서 옆 탭을 누르게 된다. */
.rank-tabs .chip { cursor: pointer; font-family: inherit; min-height: 44px; }
/* 크림 카드 표면 — .card 를 쓰지 않는 경우에도 시상대가 어두운 배경 위에 떠 있지 않게 한다 */
.rank-board {
  position: relative;              /* 컨페티 캔버스의 좌표 기준 */
  padding: 24px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--cream), var(--cream-2));
  color: var(--ink); border: 1px solid var(--line);
}
/* 컨페티 — 시상대에 처음 닿을 때 1.5초. 🚨#podium 안에 두지 말 것(renderRank 가 지운다). */
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.rank-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 12px;
  font-size: .76rem; color: var(--muted);
}

/* 시상대 — 2·1·3 순서로 놓는다(1위가 가운데) */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 18px; min-height: 220px; margin-bottom: 16px; }
/* tabindex="0" 인 탭 패널이라 초점이 실제로 온다. 크림 카드 위 앰버 링은 안 보인다(위와 같은 이유). */
#podium:focus-visible { outline-color: var(--ink); }
/* 불러오는 중·빈 순위·오류 문구. .podium 이 align-items:flex-end 라 그냥 두면 바닥에 붙는다. */
.podium > p { align-self: center; text-align: center; margin: 0; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; min-width: 0; }
.pod img { width: 76px; height: 76px; object-fit: contain; border-radius: 50%; background: #F6E7CF; border: 3px solid var(--rank-2); }
.pod b { font-size: .88rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pod span { font-size: .75rem; color: var(--muted); }
.pod .step {
  width: 100%; height: 70px; border-radius: 10px 10px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--rank-2), #8C7562);
  color: #fff; font-family: var(--font-display); font-size: 1.6rem;
}
.pod[data-rank="1"] { width: 170px; }
.pod[data-rank="1"] img { width: 92px; height: 92px; border-width: 4px; border-color: var(--rank-1); background: #FFF1CF; }
.pod[data-rank="1"] .step { height: 96px; background: linear-gradient(180deg, var(--rank-1-hi), var(--rank-1)); color: var(--ink); font-size: 2rem; }
.pod[data-rank="3"] img { border-color: var(--rank-3); }
.pod[data-rank="3"] .step { height: 54px; background: linear-gradient(180deg, var(--rank-3), #9C6B40); }

/* 1위 아바타를 도는 링 */
.pod .ring {
  position: absolute; inset: -8px; border-radius: 50%;
  border: 2px dashed rgba(240,195,60,.7);
  animation: kc-ring 12s linear infinite;
}
.pod .avatar { position: relative; display: inline-block; }
@keyframes kc-ring { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ═══ 다운로드 밴드 ═══════════════════════════════════════════════════════ */
.dl-band {
  overflow: hidden;
  background: linear-gradient(180deg, #F2B85C, var(--amber));
  padding-block: 62px;
}
.dl-band > .wrap { position: relative; display: flex; flex-direction: column; gap: 20px; }
.dl-band h2 { font-size: 2.6rem; color: var(--ink); max-width: 20em; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* 🚨앰버 밴드 위의 앰버 버튼(.btn 기본색)은 배경에 묻혀 버튼으로 안 보인다 — 여기서만 어둡게 뒤집는다 */
.dl-band .btn { background: var(--ink); color: var(--cream); box-shadow: 0 4px 0 rgba(0,0,0,.28); }
/* 🚨포커스 링도 같은 이유로 뒤집는다 — 공용 앰버 링은 앰버 밴드 위에서 1.0~1.5:1 로 안 보인다. */
.dl-band .btn:focus-visible { outline-color: var(--ink); }
/* 밴드 고양이 — 걸어 들어와 마지막에 킥 포즈가 된다(fx.js initBand 가 is-walk 를 붙인다).
   ⚠️구 .dl-cat 을 ★대체★ 한 것이다 — 둘을 함께 두면 밴드에 고양이가 두 마리가 된다. */
.band-cat { position: absolute; right: 60px; bottom: -30px; width: clamp(120px, 20vw, 200px); height: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); pointer-events: none; }
.band-cat.is-walk { animation: kc-bandwalk .9s ease-out both; }
@keyframes kc-bandwalk { from { transform: translateX(-70px); } to { transform: translateX(0); } }
/* 상표 고지 — 앰버 위라 ink-2 로 써야 읽힌다(muted 는 대비가 얕다) */
.dl-legal { font-size: .74rem; color: var(--ink-2); max-width: 46em; }
/* 배지 이미지(playBadges 켰을 때만) — 원본 646×250 을 버튼 높이에 맞춘다 */
.badge-img { width: auto; height: 52px; }

/* QR — PC 방문자를 폰으로 넘긴다. 이미지가 없으면 마크업에서 통째로 뺀다(hasQr) */
.qr {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 8px; border-radius: 12px;
  background: rgba(62,39,35,.12); color: var(--ink); font-size: .8rem; line-height: 1.4;
}
.qr img { width: 64px; height: 64px; border-radius: 8px; background: #fff; }

/* ═══ FAQ ═════════════════════════════════════════════════════════════════
   질문은 h3 — 스크린리더의 헤딩 탐색 대상이다. FAQPage 스키마는 넣지 않는다(리치결과 종료). */
.faq-section { padding-block: 72px 60px; }
.faq-section > .wrap { display: flex; flex-direction: column; gap: 18px; }
.faq-section h2 { font-size: 2rem; color: #FFF3DC; }
.faq { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid rgba(201,150,63,.3); }
.faq h3 { flex: 0 0 360px; font-size: 1.1rem; color: var(--amber); line-height: 1.35; }
.faq p { color: var(--muted-on-dark); }

/* ═══ 이어 보기 카드 ══════════════════════════════════════════════════════ */
.dest { padding-block: 0 72px; }
.dest > .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.dest h2 { font-size: 1.6rem; color: #FFF3DC; margin-bottom: 14px; }
.dest .dest-go { color: var(--amber); font-size: .78rem; }
.dest a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: var(--radius);
  background: rgba(245,237,224,.05); border: 1px solid rgba(201,150,63,.3);
  color: var(--cream); text-decoration: none;
}
.dest a:hover { background: rgba(245,237,224,.1); text-decoration: none; }
.dest b { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: var(--amber); }
.dest span { font-size: .84rem; color: var(--muted-on-dark); }

/* ═══ 모바일 설치 바 ══════════════════════════════════════════════════════
   ≤700px 에서만 존재한다. 기본은 hidden — fx.js 가 히어로 CTA 를 지나면 올린다. */
.install-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: 76px; align-items: center; gap: 12px; padding: 0 16px;
  background: rgba(34,28,25,.96);
  border-top: 1px solid rgba(201,150,63,.4);
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
  transform: translateY(100%); transition: transform .28s ease;
}
.install-bar[hidden] { display: none; }
.install-bar.is-up { transform: translateY(0); }
.install-bar img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install-bar .txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.install-bar b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-bar span { font-size: .75rem; color: var(--muted-on-dark); }
.install-bar .btn { margin-left: auto; flex: none; }

/* ═══ 스크롤 리빌 ═════════════════════════════════════════════════════════
   ⚠️js 가 없으면(=클래스 js 미부착) 절대 감추지 않는다. 감췄다가 되돌릴 주체가 없어
     페이지 전체가 빈 화면이 된다. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal, html[data-fx="off"] .reveal { opacity: 1; transform: none; }

/* ═══ 모션 차단 — 두 스위치 ═══════════════════════════════════════════════ */
html[data-fx="off"] .marquee ul,
html[data-fx="off"] .bulb,
html[data-fx="off"] .ring,
html[data-fx="off"] .bounce,
html[data-fx="off"] .alley-cat-breathe,
html[data-fx="off"] .alley-dog,
html[data-fx="off"] .alley-dog.is-fled,
html[data-fx="off"] .band-cat,
html[data-fx="off"] .sky-night { animation: none; }
/* 공 물리(rAF)와 컨페티는 CSS 로 못 끈다 — fx.js setEnabled(false) 가 끊는다 */
html[data-fx="off"] .alley-cat-tilt { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .marquee ul, .bulb, .ring, .bounce,
  .alley-cat-breathe, .alley-dog, .band-cat, .sky-night { animation: none; }
  /* .alley-dog.is-fled 는 특이도가 더 높아 이름을 다시 적어야 꺼진다(data-fx 쪽도 같은 선택자). */
  .alley-dog.is-fled { animation: none; }
  .alley-cat-tilt { transition: none; }
  .reveal { opacity: 1; transform: none; }
  .install-bar { transition: none; }
}

/* ═══ 좁은 화면 (≤700px) ══════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 전부 단일 컬럼 */
  .story > .wrap, .rank-widget > .wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .story-art { display: none; }             /* 히어로에 이미 같은 고양이가 있다 */
  .feature-list, .story-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .hero { min-height: 740px; align-items: flex-end; padding-bottom: 170px; }   /* 아래 170px = 골목 바닥 */
  .hero > .wrap { padding-block: 28px 40px; gap: 12px; }
  /* 좁은 화면의 골목 — 고양이·개를 줄인다.
     🚨카운터는 고양이 ★위★ 로 올린다 — 옆에 두면 320~375px 에서 쓰레기통·개와 겹친다(폭이 없다). */
  .alley { --cat-x: clamp(8px, 4vw, 24px); --cat-w: clamp(96px, 30vw, 130px); height: 170px; }
  .alley-dogs { width: 110px; height: 110px; }
  .alley-dog { width: 90px; height: 90px; right: 24px; }
  .alley-trash { width: 72px; }
  .alley-counter { left: var(--cat-x); bottom: calc(var(--cat-w) + 8px); font-size: .72rem; }
  .hero h1 { font-size: 2.25rem; }
  .hero-lead { font-size: .95rem; }
  .hero-art { width: 100%; height: 45%; top: 56px; }
  .hero-overlay {
    width: 100%; top: auto; bottom: 0; height: 62%;
    background: linear-gradient(180deg, rgba(43,36,32,0), rgba(43,36,32,.72) 18%, rgba(43,36,32,.9));
  }
  .hero-scroll { display: none; }

  .marquee { height: 36px; }
  .marquee ul { gap: 22px; padding-left: 16px; font-size: .94rem; }

  .story, .grades, .rank-widget { padding-block: 40px; }
  .features { padding-block: 40px 28px; }
  .faq-section { padding-block: 36px 30px; }
  .dest { padding-block: 0 36px; }
  .story h2, .features h2, .grades h2, .rank-widget h2 { font-size: 1.75rem; }
  .dl-band h2 { font-size: 1.75rem; }
  .band-cat { position: static; width: 150px; align-self: flex-end; margin: -10px -6px 0 0; }

  /* 기능 카드는 가로 배치 — 폰 프레임을 96×150 으로 줄인다 */
  .feature-card { flex-direction: row; align-items: center; gap: 14px; padding: 14px; }
  .feature-shot { height: auto; background: none; flex: 0 0 96px; }
  .feature-body { padding: 0; gap: 5px; }
  .feature-body h3 { font-size: 1.1rem; }
  .feature-body p { font-size: .86rem; }
  .phone { width: 96px; height: 150px; margin-bottom: 0; border-width: 4px; border-radius: 14px; box-shadow: none; }

  /* 등급 카드는 가로 스크롤 — 6열을 390px 에 밀어 넣으면 글자가 세로로 쪼개진다 */
  .grades .grade-list {
    display: flex; grid-template-columns: none;
    gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; padding-bottom: 4px;
  }
  .grade-card { flex: 0 0 112px; padding: 12px; scroll-snap-align: start; }
  .grade-card img, .grade-orb { width: 64px; height: 64px; }

  /* 시상대는 세로 목록이 읽기 쉽다 */
  .podium { flex-direction: column; align-items: stretch; min-height: 0; gap: 10px; }
  .pod, .pod[data-rank="1"] { flex-direction: row; align-items: center; gap: 12px; width: 100%; }
  .pod img, .pod[data-rank="1"] img { width: 44px; height: 44px; }
  /* 🚨순위 숫자에 등급색을 쓰지 말 것 — 크림 카드 위에서 --rank-1 은 1.67:1, --rank-3 은 3.13:1 이다.
     세 순위 모두 ink 로 쓰고(11.90:1 실측), 색 구분은 ★아바타 테두리★가 계속 맡는다. */
  .pod .step, .pod[data-rank="1"] .step, .pod[data-rank="3"] .step {
    order: -1; width: 30px; height: auto; flex: none;
    background: none; border-radius: 0; color: var(--ink); font-size: 1.25rem;
  }
  .pod .ring { display: none; }

  .faq { flex-direction: column; gap: 6px; padding: 14px 0; }
  .faq h3 { flex: none; font-size: 1rem; }
  .faq p { font-size: .88rem; }

  /* 설치 바가 76px 을 가리므로 푸터 아래에 그만큼 여유를 준다 */
  .install-bar { display: flex; }
  .site-footer { padding-bottom: 96px; }
}