/* ============================================================
   YAVAWE 공식 홈페이지 (yavawe.com) — 2026-08-07
   ⚠️ 게임 화면(720×1280)과 달리 **PC·모바일 반응형** 이다.
   ⚠️ 색·둥근 모서리는 게임 안 파스텔 톤과 맞췄다.
   ============================================================ */

/* 🔤 웹폰트 — tools/fetch_webfonts.py 가 만든다(우리 서버에 두므로 방문자 정보가 안 나감).
   ⚠️ 여기 한 줄이라 generated 페이지(privacy.html)도 자동으로 따라온다. */
@import url("/fonts.css");

:root {
  --bg: #f4f5f8;
  --card: #ffffff;
  --line: #e6e8ee;
  --ink: #1b2430;
  --ink-soft: #5d6a7a;
  --ink-faint: #97a2b0;
  --pink: #ff7aa8;
  --blue: #4aa8ff;
  --yellow: #ffc44d;
  --green: #43d9a3;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(20, 32, 50, .06);
}

* { box-sizing: border-box; }

/* 🔤 글씨체 — 게임과 같은 방식으로 **영문·숫자와 한글을 나눠 쓴다**.
   ⚠️ Cherry Bomb One 에는 **한글이 없다**(구글 폰트 공식 subsets 에 korean 없음 · 실측 확인).
      그래서 앞에 두면 영문·숫자만 가져가고 한글은 자동으로 다음 폰트(Jua)가 그린다.
      게임의 Coiny + Jua 조합과 똑같은 구조라 앱과 톤이 맞는다. */
:root {
  --font-brand: "Cherry Bomb One", "Jua", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  /* 약관·방침 본문용 — 긴 글은 기기에 있는 읽기용 글씨체가 가장 편하다(내려받을 것도 없다) */
  --font-read: "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard", system-ui, sans-serif;
}

/* 🇨🇳 중국어일 때는 **한자를 우리 폰트로 그리지 않는다**.
   🚨 Cherry Bomb One 은 일본어 폰트라 한자를 일부만 갖고 있어서, 그대로 두면
      한 문장 안에서 **일부 글자만 다른 글씨체**로 나온다(실측: 간체 392자 중 141자).
      같은 한자라도 일본어 자형은 중국어와 모양이 달라 어색하기도 하다.
   → 라틴만 담은 별칭(`YAVAWE Latin`)을 쓰고 한자는 기기 중국어 폰트에 맡긴다. */
html[lang="zh-Hans"] {
  --font-brand: "YAVAWE Latin", "PingFang SC", "Hiragino Sans GB",
                "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --font-read: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}
html[lang="zh-Hant"] {
  --font-brand: "YAVAWE Latin", "PingFang TC", "Microsoft JhengHei",
                "Noto Sans CJK TC", sans-serif;
  --font-read: "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}
/* 🇯🇵 일본어는 반대다 — Cherry Bomb One 이 **원래 일본어 폰트**라 자형이 정확하다. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-brand);
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ── 헤더 ────────────────────────────────────────────── */
.top {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 22px 0 0;
}
.top-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
/* ⚠️ 세로 flex 안의 자식은 기본 min-width:auto 라 내용보다 안 줄어든다.
   그대로 두면 좁은 폰에서 내비게이션이 화면을 넘겨 **가로 스크롤**이 생긴다. */
.top-inner > * { max-width: 100%; min-width: 0; }

/* 🌐 언어 고르기 — 맨 위 오른쪽 */
.lang-bar { width: 100%; display: flex; justify-content: flex-end; margin-top: -8px; }
.lang-bar select {
  font-family: inherit; font-size: 13px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; background: #fff; cursor: pointer;
}
.lang-bar select:hover { border-color: var(--pink); }

/* 🎲 로고 — 주사위 마크 + 파스텔 워드마크
   ⚠️ 워드마크를 SVG 가 아니라 **HTML 글자**로 두는 이유: <img> 로 넣은 SVG 는
      페이지에 로드된 웹폰트를 못 쓴다. 글자로 두면 Cherry Bomb One 이 그대로 적용되고
      확대해도 안 깨지며 화면 낭독기도 읽는다. */
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.logo:hover { text-decoration: none; }
.logo .mark { display: block; width: 76px; height: 76px; }
.logo .mark.small { width: 46px; height: 46px; }

.wordmark {
  font-family: var(--font-brand);
  font-size: 30px; line-height: 1;
  letter-spacing: .5px;
  display: inline-flex;
}
.logo .mark.small + .wordmark { font-size: 21px; }
.wordmark i { font-style: normal; }
/* 로고 3색 — 앱 아이콘·파비콘과 같은 값을 씁니다 */
.wordmark .p1 { color: #f2b8c6; }   /* 분홍 */
.wordmark .p2 { color: #b9a5dc; }   /* 보라 */
.wordmark .p3 { color: #b3d8ea; }   /* 하늘 */

.search {
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--pink);
  border-radius: 999px;
  padding: 10px 18px;
  background: #fff;
}
.search input {
  flex: 1; border: 0; outline: 0; font-size: 15px; background: transparent; color: var(--ink);
}
.search input::placeholder { color: var(--ink-faint); }
.search button {
  border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--pink);
  line-height: 1; padding: 0 2px;
}

/* ── 내비게이션 ──────────────────────────────────────── */
.nav { margin-top: 18px; border-top: 1px solid var(--line); width: 100%; }
.nav ul {
  display: flex; gap: 6px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; min-width: 0;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px; font-weight: 700; font-size: 15px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--pink); border-bottom-color: var(--pink); text-decoration: none; }

/* ── 본문 레이아웃 ───────────────────────────────────── */
.main { display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 22px 0 40px; }
@media (max-width: 900px) { .main { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
  margin-bottom: 18px;
}
.card h2 {
  margin: 0 0 14px; font-size: 17px; display: flex; align-items: center; gap: 8px;
}
.card h2 .more { margin-left: auto; font-size: 13px; font-weight: 500; color: var(--ink-faint); }
.card .lead { color: var(--ink-soft); font-size: 14px; }
.card .lead:first-of-type { margin-top: 0; }
.card .fine { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; }
/* ⚠️ 인라인 style 대신 클래스 — CSP 를 'unsafe-inline' 없이 걸기 위함 */
.card .lead.flush { margin: 0; }
.card .lead.tight { margin: 0 0 12px; }

/* 바로가기 아이콘 */
.quick { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; text-align: center; }
@media (max-width: 700px) { .quick { grid-template-columns: repeat(5, 1fr); } }
.quick a { display: block; padding: 10px 2px; border-radius: 10px; font-size: 12px; color: var(--ink-soft); }
.quick a:hover { background: #f7f8fb; text-decoration: none; color: var(--pink); }
.quick .ico { display: block; font-size: 22px; margin-bottom: 4px; }

/* 소식 목록 */
.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.news li:last-child { border-bottom: 0; }
.news .tag {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; margin-right: 8px; color: #fff; background: var(--blue);
}
.news .tag.event { background: var(--pink); }
.news .tag.update { background: var(--green); }
.news .date { float: right; color: var(--ink-faint); font-size: 12px; }

/* 미니게임 소개 */
.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .games { grid-template-columns: repeat(2, 1fr); } }
.game {
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center;
  background: #fbfcfe;
}
.game .emo { font-size: 30px; display: block; margin-bottom: 6px; }
.game b { display: block; font-size: 14px; }
.game span { font-size: 12px; color: var(--ink-soft); }

/* 사이드바 */
.side .btn {
  display: block; width: 100%; text-align: center; padding: 13px;
  border-radius: 10px; font-weight: 800; font-size: 15px; margin-bottom: 9px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
}
.side .btn:hover { text-decoration: none; filter: brightness(.97); }
.btn-primary { background: linear-gradient(90deg, #ff9bb9, #ffb98a); color: #fff; border: 0; }
.btn-google { color: #35414f; }
.btn-kakao { background: #fee500; border: 0; color: #3a2c00; }

.side .links { display: flex; justify-content: center; gap: 10px; font-size: 12px; color: var(--ink-faint); }

.promo { border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.promo h3 { margin: 0 0 6px; font-size: 16px; }
.promo p { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.promo.cream { background: #f7f1e8; border: 1px solid #eadfd0; }
.promo.mint { background: #dcf7ea; border: 1px solid #bfeeda; }
.promo .go {
  display: inline-block; background: #232b36; color: #fff; padding: 8px 16px;
  border-radius: 999px; font-size: 13px; font-weight: 700;
}
.promo .go:hover { text-decoration: none; }

/* 검색을 눌렀을 때 뜨는 "준비 중" — 한 번 깜빡여 눈에 띄게 */
.soon.blink { animation: soonPop .5s ease; }
@keyframes soonPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* 준비 중 표시 */
.soon {
  display: inline-block; font-size: 11px; font-weight: 700; color: #8a6a00;
  background: #fff3cd; border: 1px solid #ffe08a; border-radius: 999px;
  padding: 1px 8px; margin-left: 6px; vertical-align: middle;
}

/* ── 푸터 ────────────────────────────────────────────── */
footer {
  background: var(--card); border-top: 1px solid var(--line);
  padding: 26px 0; text-align: center; font-size: 13px; color: var(--ink-soft);
}
footer nav { margin-bottom: 10px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
footer nav a { font-weight: 600; }
footer .copy { color: var(--ink-faint); font-size: 12px; }
footer .biz { color: var(--ink-faint); font-size: 12px; margin-top: 6px; }

/* ── 문서 페이지(약관·방침) ──────────────────────────── */
.doc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; margin: 22px 0 40px; box-shadow: var(--shadow); }
.doc { overflow-wrap: anywhere; }   /* 긴 메일주소·URL 이 좁은 폰에서 화면을 밀지 않게 */
/* ⚠️ 약관·방침은 **읽는 문서**다. 제목은 브랜드 글씨체를 쓰되 본문·표는 읽기 좋은 쪽으로 둔다
   (Cherry Bomb One 은 장식용이라 긴 문장·숫자에 쓰면 눈이 피로하다). */
.doc p, .doc li, .doc td, .doc th { font-family: var(--font-read); }
.doc code { font-family: "Consolas", "D2Coding", ui-monospace, monospace; }
.doc h1 { font-size: 24px; margin-top: 0; }
@media (max-width: 700px) { .doc { padding: 20px 16px; } }
.doc h2 { font-size: 18px; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc h3 { font-size: 15px; margin-top: 18px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.doc th { background: #f7f8fb; }
.doc code { background: #f2f4f8; padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.doc .fill {
  background: #fff3cd; border: 1px dashed #e0a800; border-radius: 4px;
  padding: 1px 6px; font-weight: 700; color: #7a5c00;
}
.doc .notice {
  background: #eef6ff; border: 1px solid #cfe4ff; border-radius: 10px;
  padding: 14px 16px; font-size: 14px; margin-bottom: 22px;
}

/* ── 404 ─────────────────────────────────────────────── */
.notfound { text-align: center; padding: 54px 24px; }
.notfound .nf-emo { font-size: 62px; line-height: 1; margin-bottom: 10px; }
.notfound h1 { border: 0; }
.notfound p { color: var(--ink-soft); font-family: var(--font-read); }
.notfound .nf-btn { display: inline-block; width: auto; padding: 12px 26px; }
.notfound .nf-links { font-size: 13px; color: var(--ink-faint); }

/* 👤 내 게임 계정 카드 */
.acc-name { font-size: 18px; margin-bottom: 10px; }
.acc-stats { margin-bottom: 10px; }
.acc-row {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 14px; padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.acc-row:last-child { border-bottom: 0; }
.acc-row span { color: var(--ink-soft); }
.acc-mail { font-size: 12px; color: var(--ink-faint); margin-bottom: 10px; word-break: break-all; }
.side .fine { font-size: 12px; color: var(--ink-faint); margin: 8px 0 0; }
.acc-err { color: #c0392b; }