/* ============================================================
   Game Box — 통합 런처 (launcher/style.css)
   DESIGN.md 토큰 준수: 탐험 일지 방향·캔디 청킹 버튼·3px 잉크
   ============================================================ */

:root {
    --paper: #FFF9EE;
    --paper-deep: #FFF1D6;
    --card: #FFFFFF;
    --ink: #4A3B2A;
    --ink-soft: #8A7A66;
    --sky-1: #BDE7FF;
    --sky-2: #EAF8FF;
    --orange-1: #FFB13D; --orange-2: #FF8A1E; --orange-3: #D96C00;
    --green-1: #7ED67E;  --green-2: #4CBB5A;  --green-3: #2F9440;
    --blue-1: #6FC7F5;   --blue-2: #3AA7E8;   --blue-3: #1F7FBE;
    --purple-1: #C79BF2; --purple-2: #A66BE8; --purple-3: #7E44C9;
    --gold-1: #FFD75E;   --gold-2: #F5B914;   --gold-3: #C78F00;
    --red-1: #FF9C8F;    --red-2: #E04F3F;
    --shadow-soft: 0 6px 16px rgba(74,59,42,.14);
    --outline: rgba(74,59,42,.85);
    --r-card: 22px; --r-chip: 999px;
    --ease-pop: cubic-bezier(.34,1.56,.64,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { touch-action: manipulation; }
body {
    font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    color: var(--ink); line-height: 1.55;
    background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 340px, var(--paper) 680px);
    min-height: 100vh; overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
}

#app {
    max-width: 960px; margin: 0 auto; padding: 0 20px 60px;
}

/* ---------------- 히어로 ---------------- */
.hero { text-align:center; padding: 56px 0 32px; }
.hero-flag { font-size: 72px; animation: float 3s ease-in-out infinite; }
.hero-title { font-size: clamp(30px, 7vw, 44px); font-weight: 900; margin: 12px 0 4px; letter-spacing: -1px; }
.hero-subtitle { font-size: 17px; font-weight: 700; color: var(--ink-soft); }
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }

/* ---------------- 게임 그리드 ---------------- */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.game-card {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 3px solid var(--outline);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-soft);
    padding: 24px 20px 20px;
    text-decoration: none; color: var(--ink);
    transition: transform .15s var(--ease-pop), box-shadow .15s ease;
    position: relative; overflow: hidden;
}
.game-card::before {
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(160deg, rgba(255,255,255,.5), transparent 50%);
    pointer-events:none;
}
.game-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(74,59,42,.18); }
.game-card:active { transform: translateY(0) scale(.98); }

.game-card[data-game="korea"]    { border-top: 6px solid var(--orange-2); }
.game-card[data-game="world"]    { border-top: 6px solid var(--blue-2); }
.game-card[data-game="monster"]  { border-top: 6px solid var(--green-2); }
.game-card[data-game="beyblade"] { border-top: 6px solid var(--purple-2); }
.game-card[data-game="juice"]    { border-top: 6px solid var(--red-2); }

.gc-icon {
    font-size: 52px; margin-bottom: 12px;
    animation: float 4s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
.game-card:nth-child(1) .gc-icon { --d: 0s; }
.game-card:nth-child(2) .gc-icon { --d: .5s; }
.game-card:nth-child(3) .gc-icon { --d: 1s; }
.game-card:nth-child(4) .gc-icon { --d: 1.5s; }
.game-card:nth-child(5) .gc-icon { --d: 2s; }

.gc-name { font-size: 20px; font-weight: 900; margin-bottom: 4px; line-height: 1.3; }
.gc-tag { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin-bottom: 8px; }
.gc-desc { font-size: 14px; font-weight: 600; flex: 1; margin-bottom: 14px; line-height: 1.5; }

.gc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; font-size: 12px; font-weight: 800;
    background: var(--paper-deep); border: 2px solid var(--outline);
    border-radius: var(--r-chip);
}
.chip.hot {
    background: linear-gradient(160deg, var(--gold-1), var(--gold-2));
    color: var(--ink);
}

/* ---------------- 푸터 ---------------- */
.footer {
    text-align: center; margin-top: 48px; padding-top: 20px;
    border-top: 3px dashed var(--outline);
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
}

/* ---------------- 반응형 ---------------- */
@media (max-width: 600px) {
    .game-grid { grid-template-columns: 1fr; }
    .hero-flag { font-size: 56px; }
    .hero { padding: 40px 0 24px; }
}

/* ---------------- 접근성 ---------------- */
.game-card:focus-visible {
    outline: 4px solid var(--gold-2);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}