/* 테마: 시안 3 「아침 신문 퍼즐면」 — 흰 바탕 · 굵은 명조 제목 · 9칸 격자 (2026-10-04 · 회장 미선택 → 끌로 추천)
   다른 시안(1 탐정 수첩 · 2 밤의 취조실)으로 바꿀 땐 이 파일만 갈아 끼운다. 쓰는 이름(class)은 index.html·app.js 에 있다.
   글자: 폰 17px · 넓은 화면(맥 14인치) 21px = 125% (회장 맥 14인치 · 글자 125% 기본 · 09-17) */
:root {
  --bg: #ffffff;
  --ink: #121212;
  --soft: #6b6b6b;
  --rule: #121212;
  --hair: #d6d6d6;
  --tint: #f1f1ee;
  --mark: #fff1a8;
  --wrong: #b3261e;
  --wrongbg: #f7d9d6;
  --fs: 17px;
}
@media (min-width: 700px) { :root { --fs: 21px; } .wrap { max-width: 680px; } .c { min-height: 6.4em !important; } }

body { background: var(--bg); color: var(--ink); font: var(--fs)/1.5 "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; }
.mast { text-align: center; border-bottom: 3px double var(--rule); padding-bottom: 8px; }
.mast h1 { font-family: "Noto Serif KR", "AppleMyungjo", serif; font-weight: 900; font-size: 2.05em; margin: 0; letter-spacing: -.04em; line-height: 1.15; }
.dateline { font-size: .78em; color: var(--soft); border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 5px; }

.banner { margin: 12px 0 0; padding: 10px 12px; border: 2px solid var(--ink); background: var(--mark); font-weight: 500; font-size: .92em; }
.banner button { margin-left: 6px; }

.rules { margin: 12px 0 0; border-bottom: 1px solid var(--hair); font-size: .86em; }
.rules summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.rules ul { margin: 4px 0 10px; padding-left: 1.1em; color: var(--soft); }
.rules li { margin: 0 0 5px; }
.rules b { color: var(--ink); }
.rules .btn { margin: 0 0 12px; }

.lede { margin: 14px 0 4px; font-weight: 700; font-size: 1.08em; line-height: 1.4; }
.sub { margin: 0 0 8px; color: var(--soft); font-size: .92em; }
.sub b { color: var(--ink); }

.grid { border-top: 2px solid var(--rule); border-left: 2px solid var(--rule); }
.c { min-height: 8.6em; padding: 9px 8px 10px; border: 0; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); border-radius: 0; background: var(--bg); }
.c .n { font-weight: 700; font-size: .98em; }
.c .s { margin-top: 4px; font-size: .9em; line-height: 1.42; }
.c .lab { position: absolute; top: 9px; right: 8px; font-size: .68em; font-weight: 700; letter-spacing: .06em; }
.c.sel { box-shadow: inset 0 0 0 3px var(--ink); }
.c.use { background: var(--mark); }
.c.aim { outline: 3px dashed var(--ink); outline-offset: -7px; }
.c.aim .lab { background: var(--ink); color: #fff; padding: 1px 5px; }
.c.honest { background: var(--tint); cursor: default; }
.c.honest .s { color: var(--soft); }
.c.liar { background: var(--ink); color: #fff; cursor: default; }
.c.liar .s { color: #cfcfcf; }
.c.pop { animation: pop .22s ease-out; }
@keyframes pop { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
.c.no { animation: no .3s linear; }
@keyframes no { 25%, 75% { background: var(--wrongbg); } 50% { background: var(--bg); } }
.c:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.grid.list .c { min-height: 0; padding: 10px 10px; }

.judge { margin-top: 14px; border: 2px solid var(--rule); padding: 12px; }
.judge .q { font-weight: 500; margin-bottom: 10px; }
.judge .q b { font-weight: 700; }
.btn { font: inherit; font-weight: 700; padding: 13px 8px; border: 2px solid var(--ink); background: var(--bg); color: var(--ink); cursor: pointer; border-radius: 0; }
.btn.dark { background: var(--ink); color: #fff; }
.btn.small { padding: 8px 12px; font-size: .88em; }
.btn:disabled { opacity: .3; cursor: default; }
.line { margin-top: 12px; font-size: .88em; color: var(--soft); }
.dots i { width: .7em; height: .7em; border: 1.5px solid var(--ink); display: block; }
.dots i.f { background: var(--ink); }
.link { background: none; border: 0; font: inherit; font-size: .88em; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 0; }
.line .link { font-size: 1em; }
.msg { min-height: 1.5em; margin-top: 10px; font-size: .92em; }
.msg.bad { color: var(--wrong); }

.end { margin-top: 14px; border: 3px double var(--rule); padding: 14px; text-align: center; }
.end h2 { font-family: "Noto Serif KR", "AppleMyungjo", serif; font-weight: 900; margin: 0; font-size: 1.4em; }
.end pre { font: 1.08em/1.5 "Noto Sans KR", sans-serif; margin: 12px auto; display: inline-block; text-align: left; }
.stats { margin-top: 14px; border-top: 1px solid var(--hair); padding-top: 10px; }
.stats div { font-size: .74em; color: var(--soft); }
.stats b { display: block; font-size: 1.7em; color: var(--ink); font-family: "Noto Serif KR", serif; font-weight: 900; }
.next { margin-top: 10px; font-size: .88em; color: var(--soft); }

.sync { margin-top: 18px; border-top: 1px solid var(--hair); padding-top: 4px; font-size: .9em; }
.sync summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.sync .code { font-size: 1.2em; letter-spacing: .08em; }
.soft { color: var(--soft); font-size: .92em; }
.linkform label { display: block; font-weight: 500; margin: 10px 0 4px; }
.linkform input { font: inherit; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 0; text-transform: uppercase; letter-spacing: .06em; background: var(--bg); color: var(--ink); }
.foot { margin-top: 22px; font-size: .74em; color: var(--soft); text-align: center; }

@media (prefers-reduced-motion: reduce) { .c.pop, .c.no { animation: none; } }