:root{
  --ground:#FAF8F5; --panel:#FFF; --panel-2:#F3F0EB; --line:#E3DDD3;
  --ink:#1A1714; --ink-2:#544E47; --ink-3:#8C857B;
  --accent:#B3650A; --accent-soft:#F7E9D4;
  --ko:#166B52; --ko-soft:#DCEFE7; --no:#8C857B;
  --ps:#2B62CC; --xb:#0F7A17; --ns:#CE1220; --pc:#4A6C8C;
}
@media (prefers-color-scheme:dark){:root{
  --ground:#141210; --panel:#1D1A16; --panel-2:#252119; --line:#302B23;
  --ink:#F2EDE5; --ink-2:#BAB2A6; --ink-3:#867E72;
  --accent:#EDA843; --accent-soft:#2E2313;
  --ko:#5DC79E; --ko-soft:#0F2C22; --no:#867E72;
  --ps:#5E93F0; --xb:#4FBB56; --ns:#F4636D; --pc:#89ADCB;
}}
*{box-sizing:border-box;}
body{margin:0;background:var(--ground);color:var(--ink);line-height:1.72;
  font-family:"Gothic A1","Apple SD Gothic Neo",system-ui,sans-serif;word-break:keep-all;
  -webkit-font-smoothing:antialiased;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

header.site{max-width:820px;margin:0 auto;padding:20px 18px 14px;
  display:flex;align-items:center;gap:16px;}
.brand{text-decoration:none;color:var(--ink);display:flex;align-items:baseline;gap:6px;}
.brand b{font-size:20px;font-weight:900;letter-spacing:-.03em;}
.brand span{font-family:Archivo,sans-serif;font-size:9px;font-weight:600;letter-spacing:.16em;
  color:var(--accent);border:1px solid var(--accent);border-radius:2px;padding:1px 4px;}
header.site nav{margin-left:auto;display:flex;gap:2px;font-size:13.5px;}
header.site nav a{text-decoration:none;color:var(--ink-2);font-weight:600;
  padding:6px 11px;border-radius:8px;white-space:nowrap;
  transition:color .12s,background .12s;}
header.site nav a:hover{color:var(--ink);background:var(--panel-2);}
header.site nav a[aria-current="page"]{color:var(--ink);background:var(--panel-2);}
footer.site{max-width:820px;margin:60px auto 0;padding:18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);}
main{max-width:820px;margin:0 auto;padding:14px 18px 40px;}

/* ── 히어로: 표지 + 답 ─────────────────────── */
.hero{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap;}
.coverwrap{position:relative;flex-shrink:0;width:186px;}
.cover{width:186px;height:248px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 14px 30px -18px rgba(0,0,0,.5);}
.cover.noimg{display:flex;align-items:center;justify-content:center;background:var(--panel-2);
  font-family:Archivo,sans-serif;font-size:52px;font-weight:700;color:var(--ink-3);}
.kocover{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;font-weight:700;
  text-align:center;padding:5px;background:var(--ko);color:var(--ground);border-radius:0 0 10px 10px;}
.head{flex:1;min-width:260px;}
h1{font-size:clamp(24px,4.2vw,33px);line-height:1.25;margin:0 0 4px;
  font-weight:900;letter-spacing:-.02em;text-wrap:balance;}
.alt{font-family:Archivo,sans-serif;font-size:14.5px;color:var(--ink-3);margin:0 0 16px;}

/* 답 블록 — 페이지에서 가장 강한 요소 */
.answer{display:flex;flex-direction:column;gap:3px;
  padding:14px 18px;border-radius:10px;margin:0 0 10px;
  background:var(--ko-soft);border:1px solid transparent;}
.answer strong{font-size:19px;font-weight:900;color:var(--ko);letter-spacing:-.02em;line-height:1.35;}
.answer .ev{font-size:12px;color:var(--ink-3);font-weight:500;}
.answer.sub{background:transparent;border-color:var(--ko);}
.answer.none,.answer.na{background:var(--panel-2);}
.answer.none strong,.answer.na strong{color:var(--no);}
.answer.likely{background:var(--accent-soft);}
.answer.likely strong{color:var(--accent);}
p.note{font-size:13px;color:var(--ink-3);margin:0 0 16px;padding-left:2px;}

dl.quick{display:flex;flex-wrap:wrap;gap:0 30px;margin:16px 0 14px;}
dl.quick div{display:flex;flex-direction:column;gap:1px;}
dl.quick dt{font-size:11.5px;color:var(--ink-3);font-family:Archivo,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;}
dl.quick dd{margin:0;font-size:15px;font-weight:700;display:flex;align-items:baseline;gap:7px;}
.dd{font-style:normal;font-family:Archivo,sans-serif;font-size:12px;font-weight:700;
  color:var(--accent);background:var(--accent-soft);padding:2px 6px;border-radius:4px;}

.plats{display:flex;gap:5px;flex-wrap:wrap;}
.chip{font-family:Archivo,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 7px;border-radius:4px;border:1px solid currentColor;color:var(--ink-3);}
.chip.ps{color:var(--ps);} .chip.xb{color:var(--xb);}
.chip.ns{color:var(--ns);} .chip.pc{color:var(--pc);}

/* ── 본문 ──────────────────────────────────── */
.body{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
h2{font-size:17px;margin:24px 0 7px;font-weight:700;}
.body h2:first-child{margin-top:0;}
p{margin:0 0 13px;color:var(--ink-2);}
p strong{color:var(--ink);}

/* ── 관련 게임 ─────────────────────────────── */
.related{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);}
ul.mini{list-style:none;margin:12px 0 0;padding:0;
  display:grid;gap:7px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
ul.mini a{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px;}
ul.mini a:hover{border-color:var(--ink-3);}
ul.mini img,ul.mini .noimg{width:44px;height:59px;object-fit:cover;border-radius:4px;flex-shrink:0;}
ul.mini .noimg{display:flex;align-items:center;justify-content:center;background:var(--panel-2);color:var(--ink-3);}
ul.mini span{display:flex;flex-direction:column;min-width:0;}
ul.mini b{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
ul.mini em{font-style:normal;font-size:11.5px;color:var(--ink-3);}
.links{margin-top:28px;font-size:14px;}

/* ── 목록 페이지 ───────────────────────────── */
.intro{margin-bottom:20px;}
ul.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
ul.cards a{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px;}
ul.cards a:hover{border-color:var(--ink-3);}
ul.cards img,ul.cards .noimg{width:54px;height:72px;object-fit:cover;border-radius:5px;flex-shrink:0;}
ul.cards .noimg{display:flex;align-items:center;justify-content:center;background:var(--panel-2);
  font-family:Archivo,sans-serif;font-weight:700;color:var(--ink-3);}
ul.cards .t{display:flex;flex-direction:column;gap:2px;min-width:0;}
ul.cards b{font-size:14.5px;font-weight:700;}
ul.cards em{font-style:normal;font-size:12.5px;color:var(--ink-3);}
.kob{align-self:flex-start;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:var(--ko-soft);color:var(--ko);margin-top:2px;}
.kob.sub{background:transparent;border:1px solid var(--ko);}
.kob.none,.kob.na{background:var(--panel-2);color:var(--ink-3);}
.kob.likely{background:var(--accent-soft);color:var(--accent);}

/* 한글 지원 3단 타일 — 음성 / 자막 / 인터페이스 */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 12px;}
.tile{display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;
  padding:10px 6px;border-radius:8px;border:1px solid var(--line);background:var(--panel);text-align:center;}
.tile .tl{font-size:11px;color:var(--ink-3);letter-spacing:-.01em;}
.tile .tv{font-size:14px;font-weight:900;letter-spacing:-.02em;}
.tile.yes{background:var(--ko-soft);border-color:transparent;}
.tile.yes .tv{color:var(--ko);}
.tile.no .tv{color:var(--ink-3);}
.tile.unsure{background:var(--panel-2);border-color:transparent;}
.tile.unsure .tv{color:var(--ink-3);font-weight:700;}

/* ── 홈 ─────────────────────────────────────── */
main.homeb{max-width:820px;}
/* 홈 상단. 캘린더가 첫 화면 안에 들어와야 하므로 최대한 낮게 유지한다.
   가운데 정렬 히어로는 화면 하나를 통째로 먹어서 걷어냈다. */
.hometop h1{font-size:clamp(23px,3.6vw,30px);font-weight:900;letter-spacing:-.03em;
  margin:0 0 6px;line-height:1.28;}
.hometop .intro{margin:0 0 13px;}
.searchbox{position:relative;margin:0;}
.searchbox input{width:100%;font:inherit;font-size:15px;padding:11px 14px 11px 40px;
  border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);}
.searchbox input:focus{outline:none;border-color:var(--accent);}
.searchbox svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--ink-3);fill:none;stroke-width:2;}
.results{margin-top:24px;}
.results h2{font-size:13px;color:var(--ink-3);font-weight:700;margin:0 0 10px;}
.rgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.rgrid a{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px;}
.rgrid a:hover{border-color:var(--accent);}
.rgrid img,.rgrid .ph{width:46px;height:61px;border-radius:5px;object-fit:cover;flex-shrink:0;
  background:var(--panel-2);}
.rgrid .tx{min-width:0;display:flex;flex-direction:column;gap:3px;}
.rgrid b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rgrid .sub{font-family:Archivo,sans-serif;font-size:11px;color:var(--ink-3);}

/* ── 월별 캘린더 ────────────────────────────── */
main.cal{max-width:820px;}
.months{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0 26px;
  padding-bottom:16px;border-bottom:1px solid var(--line);}
.months a{font-family:Archivo,sans-serif;font-size:12.5px;font-weight:600;
  padding:6px 11px;border-radius:100px;border:1px solid var(--line);
  color:var(--ink-3);background:var(--panel);text-decoration:none;white-space:nowrap;}
.months a span{opacity:.55;}
.months a.on{background:var(--ink);color:var(--ground);border-color:var(--ink);}
.cal .day{display:flex;}
.cal .rail{width:58px;flex-shrink:0;position:relative;padding-top:18px;}
.cal .rail::after{content:"";position:absolute;left:6px;top:48px;bottom:0;width:1px;background:var(--line);}
.cal .day:last-child .rail::after{display:none;}
.cal .dd{font-family:Archivo,sans-serif;font-size:25px;font-weight:700;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.cal .dw{font-size:11px;color:var(--ink-3);margin-top:4px;display:block;}
.cal .cards{flex:1;min-width:0;padding:12px 0 8px;display:flex;flex-direction:column;gap:6px;}
.cal .card{display:flex;gap:11px;align-items:flex-start;text-decoration:none;color:inherit;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px;}
.cal .card:hover{border-color:var(--ink-3);}
.cal .cthumb{width:54px;height:72px;flex-shrink:0;border-radius:5px;overflow:hidden;
  background:var(--panel-2);display:block;}
.cal .cthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cal .cinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.cal .ctit{font-size:14px;font-weight:700;line-height:1.35;}
.cal .cmeta{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.cal .cprice{font-family:Archivo,sans-serif;font-size:11.5px;color:var(--ink-2);}

/* ── 문서 페이지 ────────────────────────────── */
main.doc{max-width:680px;}
main.doc h2{font-size:16px;margin:30px 0 8px;}
main.doc ul{color:var(--ink-2);padding-left:20px;font-size:15px;}
main.doc li{margin-bottom:8px;}
main.doc .mail{font-size:17px;font-weight:700;margin:14px 0 24px;}
footer.site .fnav{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:10px;font-size:13px;}
footer.site .fnav a{text-decoration:none;color:var(--ink-3);transition:color .12s;}
footer.site .fnav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
footer.site p{margin:0;font-size:12.5px;color:var(--ink-3);}

/* 접힌 나머지 게임 — 하루에 수십 종 쏟아지는 날의 첫인상을 지킨다 */
.cal details.dmore{margin-top:2px;}
.cal details.dmore[open]{display:flex;flex-direction:column;gap:6px;}
.cal details.dmore summary{list-style:none;cursor:pointer;
  font-family:Archivo,sans-serif;font-size:12px;font-weight:600;color:var(--ink-3);
  padding:8px 12px;border:1px dashed var(--line);border-radius:8px;
  transition:color .12s,border-color .12s;}
.cal details.dmore summary::-webkit-details-marker{display:none;}
.cal details.dmore summary::marker{content:"";}
.cal details.dmore summary:hover{color:var(--ink);border-color:var(--ink-3);}
.cal details.dmore[open] summary{border-style:solid;}

/* 홈에서는 캘린더 위에 마스트헤드가 온다 */
main.cal.homeb{max-width:820px;}
main.cal.homeb .months{margin-top:0;}