/*
 * 못버티냥 웹사이트.
 *
 * 색·폰트·패널 모양은 앱(`jipjungnyang/src/index.css`, `App.css`)에서 그대로 가져왔어요.
 * 앱을 써본 사람이 여기 왔을 때 같은 서비스로 읽혀야 하니까요.
 *
 * **다만 레이아웃은 앱을 따라 하지 않습니다.** 처음엔 앱처럼 480px 한 칸으로 만들었는데,
 * 그러면 PC에서 폰 화면을 확대해 놓은 것처럼 보여요. 웹은 넓은 화면에서 열리는 매체라
 * 가로를 쓸 줄 알아야 합니다. 그래서 소개는 넓게 펼치고(글 옆에 실제 앱 화면),
 * 약관처럼 **읽는** 페이지만 좁게 잡았어요(긴 글은 한 줄이 길면 못 읽습니다).
 *
 * 픽셀 폰트 규칙 두 가지는 그대로 지킵니다.
 *   1) 글자 크기는 설계 크기(9px)의 정수배로만 — 아니면 획이 잘려서 깨져 보여요
 *   2) 굵게는 합성 볼드 대신 text-shadow로 획을 1px 더 그려요(도트가 안 뭉개져요)
 */
@font-face {
  font-family: 'Galmuri9';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/Galmuri9.woff2') format('woff2');
}

:root {
  /*
   * 구간 배경은 **두 가지뿐**이고 번갈아 갑니다.
   *
   * 처음엔 네 단계로 폈는데, 단계가 많으니 어떤 경계는 색이 확 바뀌고 어떤 경계는
   * 거의 안 바뀌어서 오히려 들쭉날쭉해 보였어요. 둘로 줄이면 규칙이 눈에 보입니다.
   *
   * 더 어두워지진 않습니다 — band-b보다 진해지면 주황 눈썹말이 대비 4.5:1 밑으로
   * 떨어져요(여기서 4.7:1로 이미 아슬아슬합니다).
   */
  --band-a: #f7ecd2;
  --band-b: #e6d0a6;

  --bg: #f2e2c0;
  --bg-deep: #e6d0a6;
  --surface: #fff9ec;
  --surface-alt: #f0dfbe;
  --outline: #3b2a1e;
  --text-h: #3b2a1e;
  /* 본문 색. 앱에서는 #8a7259였는데 웹에서는 한 단계 더 진하게 씁니다.
     폰 화면과 달리 PC는 멀리서 크게 보는 매체라, 1px 획짜리 픽셀 폰트가 연한 색이면
     그냥 안 읽혀요. #8a7259는 히어로 배경(#e6d0a6) 위에서 대비가 3.0:1로,
     WCAG 최소 기준 4.5:1에 못 미쳤습니다. 이 값은 4.7:1이에요. */
  --text: #6b543c;
  --primary: #ee8b3d;
  /* 글자로 쓰는 주황. 원래 #c0651f였는데 배경(#e6d0a6)이 밝은 모래색이라 대비가 3.2:1밖에
     안 나왔어요 — 구간 이름표(눈썹말)와 링크가 전부 이 색이라 제일 많이 걸립니다.
     이 값은 4.7:1이에요. 주황기는 남기고 명도만 내렸습니다. */
  --primary-dark: #8f4310;
  --gold: #f0c04a;
  --teal: #64b2a6;
  --border-soft: #d9c9a8;

  --rarity-common: #ddd3c2;
  --rarity-rare: #8fc4e8;
  --rarity-epic: #c9a3e8;
  --rarity-legendary: #f0c04a;
  --rarity-common-line: #b9a98f;
  --rarity-rare-line: #4f9de0;
  --rarity-epic-line: #a95ce0;
  --rarity-legendary-line: #d9a01f;

  color-scheme: light;
  font-family: 'Galmuri9', 'Apple SD Gothic Neo', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-h);
  -webkit-font-smoothing: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
}

p {
  margin: 0;
  word-break: keep-all;
}

/* keep-all이 없으면 브라우저가 한글을 아무 글자에서나 끊어요 — "마리씩"이 "마리 / 씩"이
   되는 식으로. 낱말 단위로만 넘기게 합니다. 본문(p)에는 이미 걸려 있어요. */
h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  word-break: keep-all;
}

a {
  color: var(--primary-dark);
  text-underline-offset: 3px;
}

b,
strong,
.nav-brand,
.hero-title,
.section-title,
.feature-title,
.cat-name,
.doc-heading,
.panel-title,
.stat-value {
  text-shadow: 1px 0 0 currentColor;
}

/* ── 픽셀 패널: 모서리가 잘린 8비트 창 ───────── */
.panel {
  position: relative;
  background: var(--surface);
  padding: 20px;
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline),
    0 8px 0 0 rgba(59, 42, 30, 0.18);
}

/* ── 상단 바 ────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-h);
  text-decoration: none;
  font-size: 18px;
}

.nav-brand img {
  image-rendering: pixelated;
  width: 36px;
  height: 36px;
}

.nav-links {
  display: flex;
  gap: 18px;
  font-size: 18px;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--primary-dark);
}

/* 좁은 화면에서는 약관 링크를 접어요. 네 개가 한 줄에 안 들어가서 글자가 세로로 쪼개지는데,
   그러면 제일 중요한 브랜드까지 같이 뭉개집니다. 약관은 꼬리말에 그대로 있어요. */
@media (max-width: 640px) {
  .nav-links a:not(.nav-keep) {
    display: none;
  }
}

/* ── 공통 폭 ────────────────────────────── */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 약관처럼 **읽는** 페이지. 한 줄이 길면 눈이 다음 줄을 못 찾아요. */
.wrap--doc {
  max-width: 720px;
}

/* 구간 사이 숨. 좁으면 여러 이야기가 한 덩어리로 읽혀요.
   좁은 화면에서는 같은 값이 과해서 조금 줄입니다. */
section {
  padding: 64px 0;
}

@media (min-width: 760px) {
  section {
    padding: 104px 0;
  }
}

/* 도감·약관처럼 **한 구간뿐인 쪽**은 위 여백을 줄여요. 104px은 구간과 구간을 갈라주는
   숨인데, 여기는 가를 구간이 없어서 그냥 빈 화면을 스크롤하게 됩니다. */
.page {
  padding-top: 32px;
}

@media (min-width: 760px) {
  .page {
    padding-top: 40px;
  }
}

/* ── 히어로 ─────────────────────────────── */
.hero {
  padding: 64px 0 64px;
}

@media (min-width: 760px) {
  .hero {
    padding: 104px 0 96px;
  }
}

.hero-inner {
  display: grid;
  gap: 32px;
  align-items: center;
}

/* 두 칸으로 갈라지는 지점을 760px에 맞춰요. 창을 반만 쓰는 노트북이 딱 이 사이(760~900)에
   들어오는데, 여기서 한 칸으로 떨어지면 데스크톱에서 모바일 화면을 보는 꼴이 됩니다.
   오른쪽 칸은 고정폭 대신 minmax라, 좁을 땐 알아서 줄고 넓을 때만 380px까지 벌어져요. */
@media (min-width: 760px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
  }
}

/* 넓어지는 만큼 고양이 자리를 조금씩 돌려줘요. 오른쪽을 먼저 키우면 왼쪽 제목이 쪼개집니다. */
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 320px;
  }
}

@media (min-width: 1000px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 48px;
  }
}

.speech-bubble {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: var(--surface);
  font-size: 18px;
  box-shadow:
    0 -3px 0 0 var(--outline),
    0 3px 0 0 var(--outline),
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline);
  animation: bubblePop 0.32s steps(3, end) 1;
}

.speech-bubble::after {
  content: '';
  position: absolute;
  left: 28px;
  bottom: -9px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  box-shadow:
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline),
    0 3px 0 0 var(--outline);
}

@keyframes bubblePop {
  0% {
    transform: translateY(6px) scale(0.9);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.hero-title {
  font-size: 36px;
  line-height: 1.4;
}

/* 큰 글씨는 왼쪽 칸이 한 줄을 감당할 때부터. 54px짜리 "고양이가 한 마리씩"은 540px쯤
   먹는데, 그만한 자리는 창이 1000px은 돼야 나와요. 그 전에 키우면 제목이 세 줄이 됩니다. */
@media (min-width: 1000px) {
  .hero-title {
    font-size: 54px;
  }
}

.hero-note,
.closing-note {
  margin-top: 14px;
  color: var(--text);
  font-size: 18px;
}

/* PC에서 토스 버튼을 눌렀을 때 안내로 바뀌는 자리예요(랜딩 맨 아래 스크립트).
   그냥 글자를 바꾸기만 하면 원래 있던 안내문과 구분이 안 돼서, 눌러서 나온 말이라는 걸
   진하기로 표시합니다. */
.note--warn {
  color: var(--text-h);
}

.closing-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  justify-content: center;
}

/* 제목 바로 아래에 버튼이 옵니다(사이 문장을 뺐어요). 28px이면 제목의 마지막 줄에
   붙어 보여서, 54px짜리 글자 크기에 맞게 숨을 더 줍니다. */
.hero-actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
}

.hero-shot {
  justify-self: center;
}

/* ── 히어로의 말하는 고양이 ─────────────────── */
.hero-cat {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

/* 두 칸이 막 갈라진 구간(760~900)에서는 고양이를 조금 접어요. 오른쪽이 320px을 다 가져가면
   왼쪽에 제목 한 줄이 안 들어가서 큰 글씨가 서너 줄로 쪼개집니다. */
@media (min-width: 760px) and (max-width: 899px) {
  .hero-cat {
    max-width: 260px;
  }

  .hero-cat-art {
    width: 168px;
  }
}

.hero-cat .speech-bubble {
  margin-bottom: 0;
  max-width: 100%;
  text-align: center;
}

/* 말풍선 꼬리는 가운데 아래로 — 고양이가 바로 밑에 있어서 그쪽을 가리켜야 해요. */
.hero-cat .speech-bubble::after {
  left: 50%;
  margin-left: -4px;
}

/* 고양이는 눌러서 말을 거는 자리예요. 버튼이라 키보드로도 닿습니다. */
.hero-cat-art {
  width: 200px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-cat-art:hover {
  transform: translateY(-2px);
}

.hero-candidate {
  display: block;
}

/* display 를 지정한 요소에는 [hidden] 이 안 먹어요(브라우저 기본 규칙보다 이 규칙이 세서).
   숨김을 다시 명시해 줍니다 — 안 하면 후보 고양이가 전부 세로로 쌓입니다. */
.hero-candidate[hidden],
.story-card[hidden] {
  display: none;
}

/* ── 소개 구간의 앱 조각 ────────────────────
   앱 화면을 여기서 다시 그린 것이에요. 축소한 캡처는 픽셀 글씨가 안 읽혀서,
   같은 색·같은 도트맵으로 크게 그립니다. */
.mock {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 24px;
  text-align: center;
}

.m-title {
  font-size: 18px;
  text-shadow: 1px 0 0 currentColor;
  align-self: flex-start;
}

/* 집중 */
.m-timer {
  font-size: 54px;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.m-memo {
  font-size: 18px;
}

.m-chip {
  background: var(--surface-alt);
  padding: 2px 8px;
  margin-right: 6px;
  color: var(--text-h);
}

.m-caption {
  color: var(--primary-dark);
  font-size: 18px;
}

/* 집중: 고양이 혼자 둠칫둠칫. 앱 홈과 같은 150px — 이 장면의 주인공이에요. */
.m-solo {
  width: 150px;
}

/* 시계 옆에 고양이. 글은 왼쪽 정렬로 돌려요 — 가운데 정렬이면 두 덩어리 사이 축이
   흔들려서 나란히 앉은 것처럼 안 보입니다. */
/* 고양이가 왼쪽, 시계가 오른쪽. 가운데로 모읍니다 — 글자칸을 늘리면(flex: 1) 둘이
   액자 양 끝으로 밀려나서 가운데가 텅 빕니다. 줄어들기만 하고 늘어나진 않게 둬요. */
.m-beside {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.m-beside-text {
  flex: 0 1 auto;
  min-width: 0;
  text-align: left;
}

/* 시계가 글자칸을 꽉 채우고 있어서 고양이와 붙어 보였어요. 고양이를 줄여 자리를 내줍니다. */
.m-beside .m-solo {
  flex: none;
  width: 86px;
}

.m-beside .m-memo {
  margin-top: 8px;
}

/* 뽑기: 생선 → 새 친구 */
.m-trade {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 8px 0;
}

.m-fish-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.m-fish-item {
  width: 42px;
  display: block;
  /* 생선도 조금씩 어긋나게 흔들려요. 딱 멈춰 있으면 그림이 아니라 아이콘으로 읽혀요. */
  animation: catBob 0.72s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * 120ms);
}

/* 화살표는 장식이 아니라 "이게 저게 된다"를 나르는 기호예요. 밝은 주황은 모래색
   바탕에서 1.7:1까지 떨어져서 안 보입니다. 글자에 쓰는 진한 주황으로 씁니다. */
.m-arrow {
  font-size: 36px;
  color: var(--primary-dark);
}

.m-prize {
  position: relative;
  width: 132px;
}

.m-new {
  position: absolute;
  top: -6px;
  right: -8px;
  z-index: 1;
  background: var(--primary);
  color: var(--text-h);
  font-size: 18px;
  padding: 1px 8px;
  text-shadow: 1px 0 0 currentColor;
  box-shadow:
    0 -3px 0 0 var(--outline),
    0 3px 0 0 var(--outline),
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline);
}

/* 뽑기 반짝임 — 앱의 공개 연출에 뜨는 그 ✦ 이에요. 새 친구가 나오는 순간이라는 표시. */
.m-spark {
  position: absolute;
  font-size: 18px;
  color: var(--rarity-legendary-line);
  opacity: 0;
  animation: sparkBlink 1.4s steps(1, end) infinite;
}

.m-spark--1 { top: -10px; left: -14px; }
.m-spark--2 { top: 14px; right: -16px; animation-delay: 0.35s; }
.m-spark--3 { bottom: 10px; left: -16px; animation-delay: 0.7s; }
.m-spark--4 { bottom: -6px; right: -10px; animation-delay: 1.05s; }

@keyframes sparkBlink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* 함께: 넷이 같은 방에서 */
.m-timer--small {
  font-size: 36px;
}

.m-members {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: 10px;
  width: 100%;
}

/* 한 줄에 셋. 칸이 좁아지니 고양이도 같이 줄여요 — 안 그러면 이름이 칸 밖으로 나갑니다. */
.m-members--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
}

.m-members--grid .m-member-art {
  width: 100%;
  max-width: 84px;
}

/* 카드 틀 없이 고양이만. 틀을 두르니 그 안의 고양이가 우표만 해졌어요 —
   이 그림의 주인공은 칸이 아니라 고양이입니다. */
.m-member {
  padding: 0;
}

.m-member-art {
  display: block;
  width: 104px;
  margin: 0 auto;
}

.m-member-name {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  color: var(--text);
}

/* 도감 */
.m-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.m-tile {
  padding: 8px 4px;
  background: var(--surface-alt);
  box-shadow:
    0 -3px 0 0 var(--tile-line),
    0 3px 0 0 var(--tile-line),
    -3px 0 0 0 var(--tile-line),
    3px 0 0 0 var(--tile-line);
}

.m-tile--common { --tile-line: var(--rarity-common-line); }
.m-tile--rare { --tile-line: var(--rarity-rare-line); }
.m-tile--epic { --tile-line: var(--rarity-epic-line); }
.m-tile--legendary { --tile-line: var(--rarity-legendary-line); }

.m-tile .cat-sprite {
  width: 52px;
  margin: 0 auto;
}

.m-tile-name {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  word-break: keep-all;
}

/* 아직 못 만난 칸. 앱에서도 물음표로 남아요. */
.m-tile--locked {
  --tile-line: var(--border-soft);
  color: var(--text);
}

/* 혼자 서는 실루엣. **칸 테두리는 안 둘러요** — 옆에 비교할 칸이 없으니 테두리가
   구분이 아니라 그냥 빈 액자로 보입니다. 조각 자체가 이미 액자예요.
   대신 고양이를 크게 세워 자리를 채웁니다. */
.m-lone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 액자 높이(236px) 안에 들어가는 최대 크기. 더 키우면 이 조각만 액자가 늘어나서
   카드 넷의 액자 크기가 어긋납니다. */
.m-lone .cat-sprite {
  width: 132px;
}

.m-lone-name {
  font-size: 27px;
  color: var(--text);
  text-shadow: 1px 0 0 currentColor;
}

/* 아직 못 만난 고양이는 실루엣으로 서 있어요. 앱 도감과 같은 방식 —
   윤곽은 보여서 "누굴까"가 되고, 색은 안 보여서 뽑을 이유가 됩니다. */
.m-tile--locked .cat-sprite {
  width: 52px;
  margin: 0 auto;
}

/* ── 버튼 ──────────────────────────────── */
/* 주황 버튼의 글자는 흰색이 아니라 진한 갈색이에요. 흰 글자를 얹으면 2.5:1까지 떨어져서
   버튼 안 글씨가 제일 안 읽히는 글자가 됩니다. 진한 글자면 5.5:1이고, 밝은 바탕에
   어두운 글자를 얹는 건 8비트 UI에서 흔한 배색이라 결도 맞아요. */
.btn {
  display: inline-block;
  padding: 13px 36px;
  background: var(--primary);
  color: var(--text-h);
  font-family: inherit;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 0 0 currentColor;
  border: 0;
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline),
    0 8px 0 0 var(--primary-dark);
}

.btn--ghost {
  background: var(--surface);
  color: var(--text-h);
  text-shadow: none;
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline),
    0 8px 0 0 rgba(59, 42, 30, 0.18);
}

/* ── 문제 + 만든 사람 (한 구간) ──────────── */

/* 이 구간만 가운데로 세워요. 나머지가 전부 왼쪽 정렬이라, 여기가 "읽는 이야기"라는 게
   배치만으로 구분됩니다. 다만 만든 사람 카드 본문은 왼쪽으로 되돌려요 — 여러 줄짜리
   문단을 가운데 정렬하면 줄 시작점이 매번 달라져서 읽기가 나빠집니다. */
.story-band .section-eyebrow,
.story-band .section-title {
  text-align: center;
}

/* 장면 넷은 말풍선이에요. 목록 항목으로 두면 점검표처럼 읽혀서 자기 얘기가 안 됩니다.
   좌우로 어긋나게 놓아요 — 나란히 세우면 결국 다시 목록이 됩니다. */
.confess-list {
  list-style: none;
  margin: 44px auto 0;
  padding: 0;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.confess {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding: 12px 18px;
  background: var(--surface);
  font-size: 18px;
  word-break: keep-all;
  box-shadow:
    0 -3px 0 0 var(--outline),
    0 3px 0 0 var(--outline),
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline);
}

/* 짝수 번째만 오른쪽으로. 개수가 바뀌어도 좌우가 번갈아 갑니다. */
.confess:nth-child(even) {
  align-self: flex-end;
}

/* 말풍선 꼬리. 히어로 고양이 말풍선과 같은 모양이라 같은 세계로 읽혀요. */
.confess::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: -9px;
  width: 8px;
  height: 8px;
  background: var(--surface);
  box-shadow:
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline),
    0 3px 0 0 var(--outline);
}

.confess:nth-child(even)::after {
  left: auto;
  right: 24px;
}

/* 말풍선 + 그 밑의 로고 고양이. 꼬리가 고양이 머리 위로 떨어지게 자리를 맞춰요 —
   꼬리가 가리키는 데 아무도 없으면 말풍선이 아니라 그냥 테두리 친 상자입니다. */
.maker {
  max-width: 640px;
  margin: 56px auto 0;
}

/* 꼬리가 카드 밖으로 12px 나와 있어서, 여백을 그만큼은 넘겨야 고양이가 꼬리에 안 닿아요. */
.maker-cat {
  width: 104px;
  margin: 28px auto 0;
}

.maker-card {
  position: relative;
  padding: 32px 30px;
  text-align: left;
  /* 패널의 아래 드리운 그림자를 뺍니다 — 꼬리가 나올 자리라 겹쳐요. */
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline);
}

/* 꼬리. 칸이 크니 3px(고백 말풍선)이 아니라 4px로 키웁니다.
   고양이가 가운데 서 있으니 꼬리도 가운데에서 떨어져요. */
.maker-card::after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -6px;
  bottom: -12px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  box-shadow:
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline),
    0 4px 0 0 var(--outline);
}

.maker-title {
  font-size: 27px;
  line-height: 1.45;
  text-shadow: 1px 0 0 currentColor;
}

.maker-body {
  margin-top: 20px;
  font-size: 18px;
  color: var(--text);
}

/* ── 서비스 한 바퀴 ─────────────────────── */

/* 네 걸음과 고양이 띠가 한 구간이에요. 띠가 쓰던 배경·테두리를 이 구간이 이어받습니다.
   띠가 구간 끝에 오니 아래 여백은 줄입니다. 안 그러면 띠 밑에 빈 띠가 하나 더 생겨요. */
.flow-section {
  padding-bottom: 40px;
}

/* 네 걸음과 띠 사이. 띠는 화면 끝까지 흐르는 그림이라 .wrap 바깥에 있어서,
   구간 안쪽 여백이 아니라 여기서 직접 숨을 줍니다. */
.flow-section .marquee {
  margin-top: 72px;
}

.flow {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  justify-items: center;
}

@media (min-width: 760px) {
  .flow {
    /* 네 걸음을 구간 폭에 고르게 펴요. 가운데로 몰면 이 구간만 좁아 보여서,
       위아래 구간과 왼쪽 선이 안 맞습니다. */
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
    gap: 0;
  }
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 180px;
}

/* 걸음과 걸음 사이 화살표. 좁은 화면에서는 아래를 가리켜요 — 세로로 쌓이니까요. */
.flow-step:not(:last-child)::after {
  content: '↓';
  color: var(--primary-dark);
  font-size: 27px;
  line-height: 1;
  margin-top: 4px;
}

@media (min-width: 760px) {
  .flow-step {
    position: relative;
    max-width: none;
    padding: 0 12px;
  }
  /* 화살표는 칸과 칸 사이(오른쪽 경계)에 걸쳐요. */
  .flow-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 22px;
    right: -12px;
    margin: 0;
  }
}

.flow-art {
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 첫 걸음은 그림 대신 시계 숫자예요. 타이머를 거는 일이라 숫자가 제일 정확한 그림입니다. */
.flow-art[data-text] {
  font-size: 27px;
  color: var(--text-h);
  text-shadow: 1px 0 0 currentColor;
}

/* 고양이와 생선 더미는 도트판이 32×32로 같아서, 칸을 꽉 채우면 점 크기가 저절로 맞아요.
   (판 크기가 갈리면 한쪽 점만 커집니다 — build.mjs 의 renderFishPile 주석 참고) */
.flow-art .cat-sprite,
.flow-art .pixel-fish-pile {
  width: 100%;
}

/* 네 걸음 중 고양이만 움직이고 생선·상자는 멈춰 있었어요. 한 줄에 선 넷 중 둘만
   움직이면 나머지가 로딩이 덜 된 것처럼 보입니다. 고양이와 같은 박자로, 대신
   조금 작게 흔들어요 — 주인공은 고양이니까요. */
.flow-art .pixel-fish-pile,
.flow-art .gacha-box {
  animation: flowBob 0.72s steps(1, end) infinite;
}

.flow-art .pixel-fish-pile {
  animation-delay: 180ms;
}

.flow-art .gacha-box {
  animation-delay: 270ms;
}

@keyframes flowBob {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(0, -3px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(0, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 앱 가챠 화면의 상자(`App.css`의 `.gacha-box`)를 그대로 옮긴 것.
   흔들리는 건 뽑는 중일 때 이야기라 여기서는 가만히 서 있습니다. */
.gacha-box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline),
    /* 앱은 92px 박스에 6px 띠(6.5%)예요. 여기는 58px이라 6px을 그대로 쓰면 10%가 돼서
       아래만 두꺼워지고 정사각형이 눌려 보입니다. 비율을 맞춘 값이에요. */
    inset 0 -4px 0 0 var(--primary-dark);
}

.gacha-box-star {
  font-size: 27px;
  color: var(--gold);
  text-shadow: 0 3px 0 var(--outline);
}

.flow-title {
  font-size: 18px;
  text-align: center;
  text-shadow: 1px 0 0 currentColor;
  /* span이라 h1~h3·p에 건 keep-all이 안 닿아요. 없으면 "타이 / 머를"처럼 낱말이 잘립니다. */
  word-break: keep-all;
}



/* ── 소개 구간: 글 + 실제 앱 화면 ───────────── */
/* ── 소개 카드 넷 ───────────────────────── */

/* 넷을 한 구간에 나란히. 구간을 갈라 하나씩 세우면 스크롤을 네 번 해야 전부 모여요.
   좁은 화면에서는 한 줄에 하나씩 쌓입니다. */
.feature-grid {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .feature-grid {
    /* minmax(0, ...)이 없으면 안에 든 조각의 최소 너비가 칸을 밀어서 좌우 폭이 달라져요. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--surface);
  box-shadow:
    0 -4px 0 0 var(--outline),
    0 4px 0 0 var(--outline),
    -4px 0 0 0 var(--outline),
    4px 0 0 0 var(--outline);
}

.feature-title {
  font-size: 27px;
  line-height: 1.45;
  text-shadow: 1px 0 0 currentColor;
}

/* 그림은 카드 아래쪽에 붙여요. 카드마다 제목 줄 수가 달라도 그림 높이는 맞습니다 —
   margin-top: auto가 남는 자리를 전부 위로 밀어줘요. */
.feature-shot {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  justify-content: center;
}

/* 카드가 흰 바탕이라 조각도 흰색이면 테두리만 남고 덩어리가 안 보여요.
   조각 바탕을 한 톤 눌러서 "카드 위에 놓인 화면"으로 읽히게 합니다.
   **네 조각의 틀은 크기가 같아야 해요** — 안에 든 그림은 저마다 다르지만 액자가
   들쭉날쭉하면 카드 넷이 같은 급으로 안 읽힙니다. 폭은 카드에 꽉, 높이는 제일 큰 것에 맞춰요. */
.feature-shot .mock {
  width: 100%;
  max-width: none;
  min-height: 236px;
  justify-content: center;
  background: var(--bg-deep);
}

/* 액자가 좁아졌으니 큰 시계는 한 단계 줄여요. 54px이면 옆 고양이를 밀어냅니다.
   방 조각의 시계(36px)와도 이제 크기가 같아요. */
.feature-shot .m-timer {
  font-size: 36px;
}

/* 구간 이름표. 제목 위에 붙는 작은 글자라 획을 한 겹 더 그려요 — 안 그러면
   제일 먼저 눈에 들어와야 할 자리가 제일 흐리게 보입니다. */
.section-eyebrow {
  color: var(--primary-dark);
  text-shadow: 1px 0 0 currentColor;
  font-size: 18px;
  margin-bottom: 8px;
}

.section-title {
  font-size: 27px;
  line-height: 1.45;
}

@media (min-width: 900px) {
  .section-title {
    font-size: 36px;
  }
}

.section-body {
  margin-top: 16px;
  color: var(--text);
  font-size: 18px;
}

/*
 * ── 구간 배경과 구분선 ───────────────────
 *
 * **두 색이 번갈아 가고, 모든 경계에 같은 선이 놓입니다.**
 *
 * 전에는 네 단계를 섞어 쓰고 선도 어떤 구간에만 있었는데, 그러면 규칙이 안 보여서
 * 그냥 제각각으로 보여요. 둘이 번갈아 가면 "아, 이렇게 갈리는구나"가 한눈에 잡힙니다.
 *
 *   히어로 a · 문제 b · 한 바퀴 a · 소개 b · 사연 a · 한정 b · 마무리 a
 *
 * 선은 각 구간의 **아래쪽에만** 답니다. 위아래 둘 다 달면 맞닿은 자리에서 8px이 돼요.
 */
.hero,
.flow-section,
.stories,
.closing {
  background: var(--band-a);
}

.story-band,
.features,
.limited {
  background: var(--band-b);
}

.nav,
.hero,
.story-band,
.flow-section,
.features,
.stories,
.limited,
.closing {
  border-bottom: 4px solid var(--outline);
}

/* ── 고양이 ─────────────────────────────── */
.cat-sprite {
  width: 100%;
  height: auto;
  display: block;
}

/* 둠칫둠칫: 앱과 같은 리듬으로, 부드럽게 말고 프레임 단위로 툭툭 끊기게.
   다 같이 같은 박자면 기계처럼 보여서 마리마다 조금씩 어긋나게 시작해요. */
.cat-sprite--animated {
  animation: catBob 0.72s steps(1, end) infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes catBob {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-2px, -4px);
  }
  50% {
    transform: translate(0, 0);
  }
  75% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ── 고양이 띠 (로고 캐러셀처럼) ───────────── */
/* 고양이 띠는 **자기 구간**으로 둡니다. 히어로 안에 넣었더니 제목·버튼과 한 덩어리로
   읽혀서 산만했어요. 위아래로 숨을 주면 "잠깐 구경하는 자리"가 됩니다. */
/* 윗구간이 이미 아래쪽에 선을 그었으면 이쪽 위 선은 지워요. 안 그러면 4px 두 개가
   맞닿아 8px짜리 띠가 되는데, 반대쪽 끝은 4px이라 위아래가 안 맞아 보입니다. */
.hero + .story-band,
.story-band + .flow-section {
  border-top: 0;
}

.marquee {
  overflow: hidden;
  /* 양 끝을 흐리게 지워요. 화면 밖으로 뚝 잘려나가면 띠가 아니라 잘린 그림으로 보여요. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marquee 60s linear infinite;
}

.strip-cat {
  width: 64px;
  flex: none;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  /* 목록을 두 벌 이어 붙였으니 절반만 움직이면 처음과 똑같은 자리예요. */
  to {
    transform: translateX(-50%);
  }
}

/* ── 사연 ──────────────────────────────── */
.story-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 28px;
}

/* 카드가 button이라(누르면 팝업) 브라우저 기본 꼴을 걷어내요. */
.story-card {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: center;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.story-art {
  width: 96px;
}

.story-name {
  font-size: 18px;
  text-shadow: 1px 0 0 currentColor;
}

/* 사연은 큰따옴표로 감싸요. 설명이 아니라 그 고양이가 하는 말처럼 읽혀야 해서요. */
.story-quote {
  color: var(--text);
  font-size: 18px;
}

.story-quote::before {
  content: '\201C';
}

.story-quote::after {
  content: '\201D';
}

.story-more {
  margin-top: 24px;
  text-align: center;
}

/* ── 기간 한정 ──────────────────────────── */
.limited {
}

/* 세트는 여러 개가 될 수 있어요. 편성이 늘면 이 액자가 그대로 아래로 쌓입니다
   (마감 임박순). 배경은 패널 기본값(흰색)을 그대로 써서 진한 구간 위에 뜨게 둡니다. */
.limited-set {
  margin-top: 28px;
  text-align: center;
}

.limited-label {
  font-size: 27px;
  text-shadow: 1px 0 0 currentColor;
}

.limited-until {
  margin-top: 4px;
  color: var(--primary-dark);
  font-size: 18px;
}

.limited-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 44px;
  margin-top: 32px;
}

/* 칸은 이름이 **두 줄**로 떨어지는 폭에 맞췄어요. 104px일 때는 이름이 석 줄로 쪼개져서
   고양이보다 글자가 더 큰 덩어리가 됐습니다. 그림은 그대로 104px로 두고 글자 자리만 넓혀요. */
.limited-cat {
  margin: 0;
  width: 152px;
}

.limited-cat .cat-sprite {
  width: 104px;
  margin: 0 auto;
}

.limited-cat figcaption {
  margin-top: 6px;
  color: var(--text);
  font-size: 18px;
  word-break: keep-all;
}

.closing {
  text-align: center;
}

/* 한정 세트 남은 시간. 시계는 자릿수가 흔들리면 눈이 따라가느라 못 읽어요 —
   숫자 폭을 고정합니다. */
.limited-timer {
  margin-top: 6px;
  font-size: 27px;
  /* 마감일 줄과 같은 색. 둘이 같은 이야기(언제까지)라 색이 갈리면 다른 정보로 읽혀요. */
  color: var(--primary-dark);
  text-shadow: 1px 0 0 currentColor;
  font-variant-numeric: tabular-nums;
}

.closing .btn {
  margin-top: 24px;
}

/* ── 도감 ─────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 8px;
}

.chip {
  font-family: inherit;
  font-size: 18px;
  padding: 6px 14px;
  background: var(--surface);
  color: var(--text);
  border: 0;
  cursor: pointer;
  box-shadow:
    0 -3px 0 0 var(--border-soft),
    0 3px 0 0 var(--border-soft),
    -3px 0 0 0 var(--border-soft),
    3px 0 0 0 var(--border-soft);
}

.chip--on {
  color: var(--primary-dark);
  text-shadow: 1px 0 0 currentColor;
  box-shadow:
    0 -3px 0 0 var(--primary),
    0 3px 0 0 var(--primary),
    -3px 0 0 0 var(--primary),
    3px 0 0 0 var(--primary);
}

/* 한 줄에 넷. 150px로 잡았을 때는 여섯 칸이 들어갔는데, 칸이 좁아지니 그 안의 고양이가
   같이 작아져서 얼굴이 안 보였어요. 도감은 얼굴을 보는 곳입니다. */
.cat-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: 20px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 16px 12px;
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

.cat-card[hidden] {
  display: none;
}

.cat-card:hover .cat-stage {
  transform: translateY(-3px);
}

.cat-stage {
  width: 132px;
}

.cat-name {
  font-size: 18px;
  word-break: keep-all;
}

/* 뱃지가 둘이면 6px로는 한 덩어리로 붙어 보여요. 칸이 넓어졌으니 사이를 벌립니다. */
.cat-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 2px;
}

/* 기간 한정 표시. 등급 뱃지와 나란히 서지만 색을 달리해서, 등급을 하나 더 만든 게
   아니라 "지금만"이라는 다른 종류의 정보라는 게 읽히게 했어요. */
.tag-limited {
  display: inline-block;
  font-size: 18px;
  padding: 2px 10px;
  background: var(--primary);
  /* 주황 위 흰 글자는 대비가 2.5:1이라 뱃지 안 글씨가 제일 안 읽혀요. 버튼과 같은 처리. */
  color: var(--text-h);
  text-shadow: 1px 0 0 currentColor;
  box-shadow:
    0 -3px 0 0 var(--outline),
    0 3px 0 0 var(--outline),
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline);
}


.rarity {
  display: inline-block;
  font-size: 18px;
  padding: 2px 10px;
  color: var(--outline);
  box-shadow:
    0 -3px 0 0 var(--outline),
    0 3px 0 0 var(--outline),
    -3px 0 0 0 var(--outline),
    3px 0 0 0 var(--outline);
}

.rarity--common {
  background: var(--rarity-common);
}
.rarity--rare {
  background: var(--rarity-rare);
}
.rarity--epic {
  background: var(--rarity-epic);
}
.rarity--legendary {
  background: var(--rarity-legendary);
}

/* ── 도감 팝업 ──────────────────────────── */
.cat-dialog {
  width: min(520px, calc(100vw - 32px));
  /* dvh는 폰 주소창이 접혔다 펴지는 만큼을 빼 줘요. vh만 쓰면 주소창에 가려서
     닫기 버튼이 화면 밖으로 내려갑니다. 옛 브라우저는 위 줄로 떨어져요. */
  max-height: 88vh;
  max-height: 88dvh;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--text-h);
  font: inherit;
  box-shadow: 0 0 0 5px var(--outline);
}

.cat-dialog[open] {
  display: flex;
  flex-direction: column;
}

.cat-dialog::backdrop {
  background: rgba(24, 16, 10, 0.62);
}

/* 팝업에서 **스크롤되는 건 여기 하나**예요. 그림·이름·사연이 한 덩어리로 같이 움직입니다.
   min-height:0 이 없으면 flex 자식이 내용만큼 부풀어서 스크롤이 안 걸려요. */
.d-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* 팝업 끝까지 내린 뒤에도 계속 쓸면 뒤 페이지가 따라 움직여요. 여기서 끊습니다. */
  overscroll-behavior: contain;
}

.d-head {
  padding: 24px 20px 18px;
  background: var(--surface-alt);
  border-bottom: 5px solid var(--outline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.d-art {
  width: 132px;
}

.d-name {
  font-size: 27px;
}

.d-flavor {
  color: var(--primary-dark);
}

.d-limited {
  color: var(--text);
  font-size: 18px;
}

/* 팝업 안은 **읽는 자리**예요. 20px로는 글이 테두리에 닿아서 답답합니다.
   아래쪽을 더 준 건 마지막 줄이 닫기 버튼에 바로 붙어 잘린 것처럼 보였기 때문이에요. */
.d-body {
  padding: 28px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* 팝업 안의 덩어리도 <section>이라, 랜딩용 전역 규칙(104px)이 여기까지 닿았어요.
   덩어리마다 위아래 100px씩 빈 자리가 생겨서 팝업이 세 배로 길어졌습니다.
   사이 간격은 .d-body의 gap이 이미 주고 있어요. */
.d-body section {
  padding: 0;
}

.d-section {
  font-size: 18px;
  margin-bottom: 8px;
  text-shadow: 1px 0 0 currentColor;
}

.d-profile {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
}

.d-profile dt {
  color: var(--text);
}

.d-profile dd {
  margin: 0;
}

.d-lines {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.d-close {
  flex: none;
  margin: 8px 28px 28px;
}

/* 화면이 짧은 폰에서는 머리 부분이 자리를 너무 많이 먹어요. 스크롤로도 읽을 수는 있지만,
   한 번에 보이는 사연이 두어 줄뿐이면 읽기가 고됩니다. 그림과 글자를 줄여서 자리를 냅니다. */
@media (max-height: 720px) {
  .d-art {
    width: 92px;
  }

  .d-head {
    padding: 16px 20px 12px;
    gap: 6px;
  }

  .d-name {
    font-size: 22px;
  }

  .d-body {
    padding: 20px 24px 16px;
    gap: 16px;
  }

  .d-close {
    margin: 8px 24px 20px;
  }
}

/* ── 정책 문서 ─────────────────────────── */
.doc-title {
  font-size: 36px;
}

.doc-meta {
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
}

.doc-section {
  margin-top: 20px;
}

.doc-heading {
  font-size: 18px;
  margin-bottom: 10px;
}

.doc-body {
  color: var(--text);
  font-size: 18px;
}

.doc-body + .doc-body {
  margin-top: 10px;
}

/* 표는 좁은 화면에서 줄이 넘칠 수밖에 없어요. 글자를 줄이는 대신 가로로 밀어 보게 둡니다. */
.table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 380px;
  font-size: 18px;
}

th,
td {
  border: 2px solid var(--border-soft);
  padding: 8px 10px;
  text-align: left;
  color: var(--text);
  vertical-align: top;
  word-break: keep-all;
}

th {
  background: var(--surface-alt);
  color: var(--text-h);
  text-shadow: 1px 0 0 currentColor;
  white-space: nowrap;
}

.back-link {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--text);
  text-decoration: none;
  font-size: 18px;
}

.back-link:hover {
  color: var(--primary-dark);
}

/* ── 꼬리말 ─────────────────────────────── */
/* 위 선은 안 그려요 — 앞 구간(마무리)이 이미 아래쪽에 그었습니다. */
.footer {
  background: var(--surface);
  padding: 32px 0 calc(32px + env(safe-area-inset-bottom));
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--text);
  font-size: 18px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.footer-operator {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

/* 움직임을 줄이겠다고 설정한 사람에게는 아무것도 움직이지 않아요. */
@media (prefers-reduced-motion: reduce) {
  .cat-sprite--animated,
  .speech-bubble,
  .marquee-track,
  .m-fish-item,
  .m-spark,
  .flow-art .pixel-fish-pile,
  .flow-art .gacha-box {
    animation: none;
  }
}