/* 게임 팩토리 공통 디자인 시스템 v1 (2026-10-04)
   원칙(NYT Games·WaPo·Puzzmo 공통 패턴): 크롬은 종이+먹 한 벌, 색은 게임마다 하나(--gc/--gc2).
   모든 규칙은 html.gf 아래에서만 — gf.js가 붙인다. 게임 고유 CSS는 그대로 두고 메뉴·결과 화면 껍데기만 통일.
   ⚠️ display 속성은 절대 건드리지 않는다(게임 JS가 style.display로 버튼을 켜고 끈다). */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --gf-paper:#f4f1e8; --gf-paper2:#ebe6d8; --gf-card:#fffdf7;
  --gf-ink:#17151f; --gf-ink2:#4b4759; --gf-mute:#7c7789; --gf-hair:rgba(23,21,31,.12);
  --gf-ok:#16a34a; --gf-fire:#ea580c; --gf-ad:#ff8a3d;
  --gf-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  --gc:#6d5dfc; --gc2:#1e1b4b;
}

html.gf body { font-family:var(--gf-font); background:var(--gf-paper); color:var(--gf-ink); }
html.gf button, html.gf input { font-family:var(--gf-font); }

/* ── 플레이 화면 머리(제목·HUD) ── */
html.gf #wrap > h1 { font-weight:900; letter-spacing:-.8px; color:var(--gf-ink); display:flex; align-items:center; justify-content:center; gap:7px; }
html.gf #wrap > h1::before { content:""; width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,var(--gc),var(--gc2)); flex:none; }
html.gf #wrap > .sub { color:var(--gf-mute); font-weight:600; }
html.gf #hud .stat { color:var(--gf-mute); font-weight:700; }
html.gf #hud .stat b { color:var(--gf-ink); font-weight:900; letter-spacing:-.5px; }
html.gf canvas { box-shadow:0 0 0 1.5px var(--gf-hair), 0 10px 28px -14px rgba(23,21,31,.35); }
html.gf #exitBtn { background:var(--gf-card); color:var(--gf-ink); border:1.5px solid var(--gf-ink); box-shadow:0 2px 0 var(--gf-ink); }

/* ── 오버레이(시작·결과·랭킹·일시정지·광고) ── */
html.gf .screen {
  background:
    radial-gradient(120% 55% at 50% -10%, color-mix(in srgb, var(--gc) 24%, transparent), transparent 70%),
    color-mix(in srgb, var(--gf-paper) 96%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--gf-ink);
}
html.gf .screen h2 { font-weight:900; letter-spacing:-1.4px; color:var(--gf-ink); font-size:32px; line-height:1.1; }
html.gf .screen p { color:var(--gf-ink2); }
html.gf .screen .big { color:var(--gf-ink); font-weight:900; font-size:56px; letter-spacing:-2px; line-height:1;
  text-shadow:3px 3px 0 color-mix(in srgb, var(--gc) 45%, transparent); }
html.gf .screen .tip { color:var(--gf-mute); }
html.gf .screen a.tip { color:var(--gf-ink2); font-weight:700; }

/* 버튼: 먹선 2px + 아래로 3px 눌림 (손에 잡히는 버튼) */
html.gf .screen button {
  border:2px solid var(--gf-ink); background:var(--gf-ink); color:var(--gf-paper);
  box-shadow:0 4px 0 var(--gf-ink); border-radius:14px; font-weight:800; letter-spacing:-.3px;
  transition:transform .08s, box-shadow .08s, background .15s;
}
html.gf .screen button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--gf-ink); }
html.gf .screen button:focus-visible { outline:3px solid var(--gc); outline-offset:3px; }
html.gf .screen button:disabled { opacity:.4; transform:none; box-shadow:0 4px 0 var(--gf-ink); }
html.gf .screen button.daily { background:var(--gc2); color:#fff; }
html.gf .screen button.ad { background:var(--gf-ad); color:var(--gf-ink); }
html.gf .screen button.mini { background:var(--gf-card); color:var(--gf-ink); box-shadow:0 3px 0 var(--gf-ink); border-radius:12px; }
html.gf .screen button.mini:active { box-shadow:0 0 0 var(--gf-ink); }
html.gf .screen button.mini.on { background:var(--gf-ink); color:var(--gf-paper); }
html.gf .screen button.ghost { background:transparent; color:var(--gf-ink2); border-color:transparent; box-shadow:none; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
html.gf .screen button.ghost:active { transform:none; color:var(--gf-ink); }

/* 결과 요소 */
html.gf #gradeLine { background:var(--gf-card); color:var(--gf-ink); border:2px solid var(--gf-ink); box-shadow:0 3px 0 var(--gf-ink); border-radius:999px; }
html.gf #gradeSub, html.gf #rankMeta { color:var(--gf-mute); }
html.gf #cardBox { background:var(--gf-card); border:1.5px dashed color-mix(in srgb, var(--gf-ink) 45%, transparent); box-shadow:none; border-radius:12px; }
html.gf #chalBanner { background:var(--gf-card); color:var(--gf-ink); border:2px solid var(--gc2); box-shadow:0 3px 0 var(--gc2); }
html.gf #nickInput { border:2px solid var(--gf-ink); background:var(--gf-card); color:var(--gf-ink); border-radius:12px; }
html.gf #nickInput:focus { border-color:var(--gc2); outline:3px solid color-mix(in srgb, var(--gc) 40%, transparent); }
html.gf #rankList { background:var(--gf-card); border:2px solid var(--gf-ink); box-shadow:0 4px 0 var(--gf-ink); border-radius:16px; padding:4px 0; }
html.gf .rrow { border-bottom:1px solid var(--gf-hair); }
html.gf .rrow:last-child { border-bottom:0; }
html.gf .rrow.me { background:color-mix(in srgb, var(--gc) 18%, var(--gf-card)); color:var(--gf-ink); }
html.gf #toast { background:var(--gf-ink); color:var(--gf-paper); font-weight:700; }

/* ── gf.js가 넣는 요소 ── */
.gf-top { position:absolute; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 10px); display:flex; justify-content:space-between; align-items:center; padding:0 14px; pointer-events:none; }
.gf-top a, .gf-top span { pointer-events:auto; font-size:12.5px; font-weight:800; color:var(--gf-ink); text-decoration:none; padding:7px 12px; border-radius:999px; background:var(--gf-card); border:1.5px solid var(--gf-ink); box-shadow:0 2px 0 var(--gf-ink); white-space:nowrap; }
.gf-top span { background:transparent; border-color:transparent; box-shadow:none; color:var(--gf-mute); letter-spacing:.6px; }
html.gf #overlay > .gf-top + * { margin-top:auto; }
html.gf #overlay { padding-top:calc(env(safe-area-inset-top,0px) + 62px); }
.gf-badge { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:2px; }
.gf-badge i { font-style:normal; width:76px; height:76px; border-radius:22px; display:grid; place-items:center; font-size:40px;
  background:linear-gradient(135deg,var(--gc),var(--gc2)); border:2px solid var(--gf-ink); box-shadow:4px 4px 0 var(--gf-ink); transform:rotate(-4deg); }
.gf-badge b { font-size:11.5px; font-weight:800; letter-spacing:1.4px; color:var(--gf-mute); }
.gf-cd { font-size:12.5px; font-weight:700; color:var(--gf-mute); font-variant-numeric:tabular-nums; margin-top:-2px; }
.gf-cd b { color:var(--gf-ink); font-weight:900; }
html.gf .screen > .gf-cd { flex-shrink:0; }
@media (max-height:640px) { .gf-badge i { width:56px; height:56px; font-size:30px; border-radius:16px; } .gf-badge b { display:none; } }
@media (prefers-reduced-motion:reduce) { html.gf .screen button { transition:none; } }