/* bytekr.com — "장난감 상자" 디자인 (2026-10-03~)
 *
 * 아이들이 좋아할 만한 쪽으로 사이트 껍데기를 바꾼다. 원칙은 셋이다.
 *   1. 굵은 검은 테두리 + 각진(번지지 않는) 그림자 — 스티커·장난감처럼 손에 잡히는 느낌
 *   2. 카드마다 다른 채도 높은 색 — 목록이 길어도 구분된다
 *   3. 눌리는 손맛 — 누르면 그림자 쪽으로 쏙 들어간다
 * 예전 site.css 의 클래스 이름(.site-header, .game-card …)을 그대로 쓰므로
 * 페이지는 이 파일로 바꿔 끼우기만 하면 된다.
 */

:root {
  --ink: #1B1B1F;
  --paper: #FFFFFF;
  --cream: #FFF8E7;
  --sun: #FFD84D;
  --sun-2: #FFCF26;
  --pink: #FF8FC7;
  --text: #1B1B1F;
  --text-dim: #4A4A55;
  --line: 3px solid var(--ink);
  --pop: 5px 5px 0 var(--ink);
  --pop-hover: 7px 8px 0 var(--ink);
  --pop-press: 1px 1px 0 var(--ink);
  --radius: 18px;
  --maxw: 1080px;
  --font-fun: "Jua", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

  /* 예전 site.css 변수 이름 — 기록·업적·404 의 인라인 스타일이 이 이름을 쓴다 */
  --bg-card: #FFFFFF; --bg-card-hover: #FFF8E7; --border: #1B1B1F;
  --accent: #E0402C; --muted: #5A5A66;

  /* 카드 색: 순서대로 돌려 쓴다 */
  --c1: #7BE0C3; --c2: #FF8A80; --c3: #7CC8FF; --c4: #B9A5FF;
  --c5: #FFB65C; --c6: #FF9ECF; --c7: #C6EF6B;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--sun);
  background-image: repeating-linear-gradient(-45deg, var(--sun) 0 22px, var(--sun-2) 22px 44px);
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }

/* ── 머리글: 흰 막대 위에 알약 버튼 ─────────────────────────── */
.site-header { padding: 14px 16px 6px; }   /* 막대가 화면 끝에 붙으면 그림자가 잘린다 */
.site-header .wrap {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border: var(--line); border-radius: 999px;
  box-shadow: var(--pop);
  padding: 8px 10px 8px 18px;
  max-width: calc(var(--maxw) - 32px);
}
.logo {
  font-family: var(--font-fun); font-size: 26px; line-height: 1;
  white-space: nowrap; flex: none;
}
.logo span { color: #F0503C; }
.site-nav {
  display: flex; gap: 6px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;   /* 폰에서는 옆으로 밀어서 본다 — 글자가 세로로 쪼개지지 않게 */
  -webkit-overflow-scrolling: touch;
}
.site-nav::-webkit-scrollbar { display: none; }
@media (max-width: 560px) {   /* 여섯 개는 한 줄에 안 들어가 끝이 잘린다. 소개·문의는 바닥글에도 있다 */
  .site-nav a[href="/about/"], .site-nav a[href="/contact/"] { display: none; }
  .site-nav a { padding: 6px 10px; font-size: 16px; }
  .logo { font-size: 23px; }
}
.site-nav a {
  flex: none; white-space: nowrap;
  font-family: var(--font-fun); font-size: 17px;
  padding: 6px 14px; border-radius: 999px; border: 2px solid transparent;
  transition: background .12s, border-color .12s;
}
.site-nav a:hover { background: var(--cream); border-color: var(--ink); }
.site-nav a[aria-current="page"] { background: var(--sun); border-color: var(--ink); }

/* ── 첫 화면: 여우와 말풍선 ─────────────────────────────────── */
.hero { padding-block: 34px 14px; text-align: center; }
.hero.home {
  display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left;
}
.hero:not(.home) h1 { text-shadow: 3px 3px 0 #fff; }
.hero:not(.home) p { color: var(--ink); max-width: 36em; margin: 0 auto; font-weight: 500; }
.hero-fox { width: 120px; flex: none; filter: drop-shadow(4px 4px 0 rgba(27,27,31,0.25)); }
.hero-bubble {
  position: relative; background: var(--paper); border: var(--line); border-radius: 24px;
  box-shadow: var(--pop); padding: 18px 22px; max-width: 34em;
}
.hero-bubble::before {   /* 말풍선 꼬리 */
  content: ""; position: absolute; left: -16px; top: 42%;
  width: 24px; height: 24px; background: var(--paper);
  border-left: var(--line); border-bottom: var(--line);
  transform: rotate(45deg);
}
.hero h1 {
  margin: 0 0 6px; font-family: var(--font-fun); font-weight: 400;
  font-size: clamp(28px, 6vw, 44px); line-height: 1.15;
}
.hero h1 em { font-style: normal; color: #F0503C; }
.hero p { margin: 0; color: var(--text-dim); font-size: clamp(14px, 2.5vw, 16px); word-break: keep-all; }

@media (max-width: 560px) {
  .hero.home { flex-direction: column; text-align: center; gap: 4px; }
  .hero-fox { width: 96px; }
  .hero-bubble::before { left: 50%; top: -15px; margin-left: -12px; transform: rotate(135deg); }
}

/* ── 구역 제목: 비스듬히 붙인 스티커 ─────────────────────────── */
.section-title {
  display: inline-block; margin: 30px 0 4px;
  font-family: var(--font-fun); font-weight: 400; font-size: 22px; line-height: 1.2;
  background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: var(--pop);
  padding: 8px 16px; transform: rotate(-1.5deg);
}
.section-title.alt { background: var(--pink); transform: rotate(1.2deg); }
.section-desc {
  word-break: keep-all; margin: 12px 0 0; max-width: 48em;
  color: var(--ink); font-size: 14px; font-weight: 500;
}
.section-desc a { text-decoration: underline; text-underline-offset: 3px; }

/* ── 게임 카드 ─────────────────────────────────────────────── */
.games {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 18px; padding: 16px 0 30px;
}
.game-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: var(--line); border-radius: var(--radius);
  box-shadow: var(--pop); overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.game-card:hover, .game-card:focus-visible { transform: translate(-2px, -3px); box-shadow: var(--pop-hover); }
.game-card:active { transform: translate(4px, 4px); box-shadow: var(--pop-press); }
.game-card:focus-visible { outline: 3px solid #F0503C; outline-offset: 4px; }

.game-thumb {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; border-bottom: var(--line);
  font-family: var(--font-fun); font-size: 46px; line-height: 1; color: var(--ink);
  background-color: var(--c1);
  background-image: radial-gradient(rgba(255,255,255,0.35) 2px, transparent 2.5px);
  background-size: 16px 16px;
}
.games .game-card:nth-child(7n+1) .game-thumb { background-color: var(--c1); }
.games .game-card:nth-child(7n+2) .game-thumb { background-color: var(--c2); }
.games .game-card:nth-child(7n+3) .game-thumb { background-color: var(--c3); }
.games .game-card:nth-child(7n+4) .game-thumb { background-color: var(--c4); }
.games .game-card:nth-child(7n+5) .game-thumb { background-color: var(--c5); }
.games .game-card:nth-child(7n+6) .game-thumb { background-color: var(--c6); }
.games .game-card:nth-child(7n+7) .game-thumb { background-color: var(--c7); }
.game-thumb .emo { font-size: 60px; transition: transform .2s cubic-bezier(.3,1.6,.5,1); }
.game-card:hover .game-thumb .emo { transform: scale(1.12) rotate(-6deg); }

.game-body { padding: 10px 12px 14px; }
.game-body h2 {
  margin: 0 0 2px; font-family: var(--font-fun); font-weight: 400;
  font-size: 19px; line-height: 1.25; word-break: keep-all;
}
.game-body p { margin: 0; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; word-break: keep-all; }

.badge {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  font-family: var(--font-fun); font-size: 14px; line-height: 1;
  background: #F0503C; color: #fff; border: 2px solid var(--ink); border-radius: 999px;
  padding: 5px 9px; transform: rotate(8deg); box-shadow: 2px 2px 0 var(--ink);
}

/* 학습 가이드 카드는 크림색 한 가지로 — 게임과 구분 */
.games.guides .game-thumb { background-color: var(--cream) !important; font-size: 34px; }

/* ── 글 페이지(소개·문의·방침·학습 가이드): 노랑 바탕 위 흰 종이 ── */
.prose {
  max-width: 46em; margin: 18px auto 40px; padding: 28px 24px 30px;
  background: var(--paper); border: var(--line); border-radius: 22px; box-shadow: var(--pop);
}
.prose h1 { margin: 0 0 10px; font-family: var(--font-fun); font-weight: 400; font-size: clamp(28px, 5vw, 38px); line-height: 1.2; }
.prose .lead { margin: 0 0 26px; color: var(--text-dim); font-size: 16px; }
.prose h2 {
  margin: 32px 0 10px; font-family: var(--font-fun); font-weight: 400; font-size: 23px; line-height: 1.3;
}
.prose h3 { font-family: var(--font-fun); font-weight: 400; font-size: 19px; }
.prose p, .prose ul, .prose ol { color: #33333B; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 62%, #FFE38A 62%); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.prose th, .prose td { border: 2px solid var(--ink); padding: 6px 10px; text-align: left; word-break: keep-all; }
.prose th { background: var(--sun); font-family: var(--font-fun); font-weight: 400; }
/* 가이드 안의 판 모양 그림(지뢰찾기 패턴, 2048 배치, 세로셈) */
.prose pre {
  margin: 0 0 16px; padding: 12px 16px; overflow-x: auto; background: #fff; border: 2px solid var(--ink); border-radius: 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; line-height: 1.55; color: var(--ink);
}
.prose .updated { margin-top: 30px; padding-top: 14px; border-top: 2px dashed var(--ink); font-size: 13px; color: var(--text-dim); }
@media (max-width: 480px) { .prose { padding: 22px 18px 24px; border-radius: 18px; } }

/* ── 기록·업적·404 의 카드들: 인라인 스타일보다 이기도록 body 를 붙인다 ── */
body .board, body .acorn-bar, body .ach-card, body .why, body .pick {
  border: var(--line); box-shadow: var(--pop); border-radius: var(--radius);
}
body .board h2, body .ach-card h2 { font-family: var(--font-fun); font-weight: 400; font-size: 20px; }
body .board li { border-top-color: rgba(0,0,0,0.08); }
body .board li.top1 .vl { color: #D98A00; }
body .pick { transition: transform .12s, box-shadow .12s; }
body .pick:hover { transform: translate(-2px, -3px); box-shadow: var(--pop-hover); border-color: var(--ink); }
body .pick .nm { font-family: var(--font-fun); font-weight: 400; font-size: 16px; }
body .tabs button, body .lvs button { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
body .tabs button { font-family: var(--font-fun); font-weight: 400; font-size: 17px; box-shadow: 3px 3px 0 var(--ink); }
body .tabs button[aria-selected="true"], body .lvs button[aria-pressed="true"] { background: var(--sun); color: var(--ink); border-color: var(--ink); }
body .acorn-bar .big { color: #B86E00; font-family: var(--font-fun); font-weight: 400; }
body .track { background: #EFE7D6; border: 2px solid var(--ink); }
body .friend { background: var(--paper); border: 2px solid var(--ink); color: var(--text-dim); }
body .friend.open { background: #E3F8EE; border-color: var(--ink); color: var(--ink); }
body .friend.shut canvas { filter: grayscale(1) brightness(0.85) opacity(.5); }
body .friend .need, body .ach-card li .ac { color: #B86E00; }
body .ach-card li { border-top-color: rgba(0,0,0,0.08); }
body .ach-card li.shut .mk { color: rgba(0,0,0,0.2); }
body .ach-card li.shut .ac { color: rgba(184,110,0,0.45); }
body .hero p.big { font-family: var(--font-fun); font-weight: 400; color: #E0402C; text-shadow: 4px 4px 0 var(--ink); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-fun); font-size: 16px;
}
.back-link:hover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--ink); }

/* ── 바닥글 ────────────────────────────────────────────────── */
.site-footer { margin-top: 20px; background: var(--ink); color: #fff; padding: 22px 0 30px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.site-footer a { opacity: .85; }
.site-footer a:hover { opacity: 1; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-thumb .emo, .site-nav a { transition: none; }
  .game-card:hover, .game-card:focus-visible, .game-card:hover .game-thumb .emo { transform: none; }
}