/* 디자인 토큰 — 디자인 교체 시 이 블록만 바꾸면 전체 색·폰트가 바뀐다 */
:root {
  --bg: #f7f1dc; --panel: #fffbec; --panel2: #f2eacb; --line: #e2d6aa;
  --fg: #5b4632; --muted: #8f7d5f;
  --acc: #79c57f; --acc-d: #3f8a4b; --acc-ink: #1f4a2a;
  --sun: #f7d25a; --sun-d: #d9ae2c; --sun-ink: #5a4300;
  --stage-bg: #bfe3f2;
  --font-body: "Gowun Dodum", "Noto Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-display: "Jua", "Noto Sans KR", sans-serif;
  --font-read: "Noto Serif KR", "Batang", serif;
  --shadow: 0 3px 0 rgba(120, 90, 50, .16);
  --sa-t: env(safe-area-inset-top, 0px); --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--fg); font-family: var(--font-body);
  padding: var(--sa-t) calc(14px + var(--sa-r)) var(--sa-b) calc(14px + var(--sa-l));
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--fg); }

/* 헤더 */
#hdr { display: flex; align-items: center; gap: 8px; padding: 8px 0; flex: 0 0 auto; }
#hdr h1 { margin: 0; font: 400 19px var(--font-display); color: var(--acc-d); white-space: nowrap; }
#stat { flex: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr { display: flex; gap: 6px; }
.gpill { background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; }
.gpill.icon { padding: 4px 9px; }
.gpill:active, .main:active, .cta:active { transform: translateY(2px); box-shadow: none; }

/* 공통 버튼 */
.main { border-radius: 14px; border: 2px solid var(--line); background: var(--panel); padding: 11px 10px; font: 400 17px var(--font-display); box-shadow: var(--shadow); }
.main.g { background: var(--acc); border-color: var(--acc-d); color: var(--acc-ink); }
.main.y { background: var(--sun); border-color: var(--sun-d); color: var(--sun-ink); }
.main.w { background: var(--panel); }
.main[aria-pressed="true"] { background: var(--acc); border-color: var(--acc-d); color: var(--acc-ink); }
.main:disabled { opacity: .55; }
.call { animation: call 1.6s ease-in-out infinite; }
@keyframes call { 50% { box-shadow: 0 0 0 6px rgba(121, 197, 127, .35); } }
.hl { outline: 4px solid var(--sun); outline-offset: 2px; animation: hl 1s steps(2) infinite; }
@keyframes hl { 50% { outline-color: transparent; } }

/* 푸터 */
#ftr { flex: 0 0 auto; padding: 8px 0 10px; display: flex; flex-direction: column; gap: 8px; }
#acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
#acts:empty { display: none; }
#acts button { height: 42px; border-radius: 14px; border: 2px solid var(--sun-d); background: var(--sun); color: var(--sun-ink); font: 400 16px var(--font-display); box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; }
.mains { display: flex; gap: 8px; }
.mains .main { flex: 1; }
.mains .main.wide { flex: 1.3; }
.mains .dots { flex: 0 0 56px; }
.badge { display: inline-block; min-width: 22px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #fffbec; color: var(--acc-ink); font: 400 13px var(--font-body); }

/* 토스트 */
#toast { position: fixed; left: 50%; bottom: calc(122px + var(--sa-b)); transform: translateX(-50%); z-index: 80; background: var(--panel); border: 2px solid var(--acc-d); border-radius: 999px; padding: 6px 14px; font-size: 12px; opacity: .94; max-width: 90vw; text-align: center; }

/* 입장 */
#enter { position: fixed; inset: 0; z-index: 90; background: rgba(247, 241, 220, .96); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#enter h2 { font: 400 38px var(--font-display); color: var(--acc-d); margin: 0 0 14px; }
#enter p { line-height: 1.75; margin: 0 0 22px; }
#enter .main { padding: 12px 28px; }

@media (max-width: 520px) { #hdr h1 { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }