/* 춘장게임즈 — 짜장면 색: 춘장 갈색 바탕, 면 색 글자, 단무지 노랑, 중국집 간판 빨강 */
:root{
  --sauce:#24160d;      /* 바탕 */
  --sauce-2:#33210f;    /* 카드 */
  --sauce-3:#4d3420;    /* 테두리 */
  --noodle:#f3e3b3;     /* 글자 */
  --noodle-dim:#cdbb90; /* 작은 글자 */
  --danmuji:#f5d33f;    /* 강조 */
  --sign:#b5241c;       /* 간판 */
  --onion:#fffaf0;      /* 제목 */
  --cucumber:#a9d46a;
  --display:'Black Han Sans','Malgun Gothic',sans-serif;
  --body:'Gowun Dodum','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sauce);color:var(--noodle);font:16px/1.7 var(--body);word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
:focus-visible{outline:3px solid var(--danmuji);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

/* ── 간판 ── */
.sign{margin:20px 0 0;background:var(--sign);border-radius:10px;padding:18px 22px;display:flex;align-items:center;gap:18px;
  box-shadow:inset 0 0 0 4px #8e1a14,inset 0 0 0 7px #e2b64a,inset 0 0 0 9px #8e1a14;text-decoration:none}
.sign .bowl{width:104px;height:auto;flex:none}
.sign h1{margin:0;font:400 clamp(44px,9vw,96px)/1 var(--display);color:var(--danmuji);letter-spacing:.02em;
  text-shadow:3px 3px 0 #5c120d,6px 6px 0 rgba(60,8,4,.45)}
.sign p{margin:8px 0 0;color:var(--onion);font-size:clamp(14px,2.2vw,18px)}
@media (prefers-reduced-motion:no-preference){
  .sign h1{animation:lightup .9s steps(1,end) .15s both}
  @keyframes lightup{0%{opacity:.25}20%{opacity:1}30%{opacity:.4}45%{opacity:1}55%{opacity:.6}70%,100%{opacity:1}}
}
@media (max-width:560px){
  .sign{padding:14px 14px;gap:12px}
  .sign .bowl{width:64px}
}

/* ── 위쪽 길 안내 ── */
.nav{display:flex;gap:6px;margin:14px 0 0;flex-wrap:wrap}
.nav a{font:400 19px/1 var(--display);text-decoration:none;padding:12px 16px 10px;border-radius:8px;color:var(--noodle-dim)}
.nav a:hover{color:var(--onion)}
.nav a[aria-current="page"]{color:var(--sauce);background:var(--danmuji)}
.nav{align-items:center}
.visits{margin:0 0 0 auto;display:flex;gap:14px;font-size:15px;color:var(--noodle-dim)}
.visits[hidden]{display:none}
.visits b{font:400 18px/1 var(--display);color:var(--danmuji);margin:0 2px}
@media (max-width:560px){.visits{margin-left:16px;width:100%}}

/* ── 랭킹 ── */
.mine{max-width:640px;margin:20px 0 0;background:var(--sauce-2);border-radius:12px;padding:14px 18px;font-size:17px}
.mine b{font-family:var(--display);font-weight:400;color:var(--danmuji)}
.rank{list-style:none;padding:0;margin:20px 0 10px;max-width:640px;display:grid;gap:8px}
.rank .row{display:flex;align-items:center;gap:14px;background:var(--sauce-2);border-radius:12px;padding:10px 16px}
.rank .place{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font:400 18px/1 var(--display);color:var(--noodle-dim);border:2px solid var(--sauce-3)}
.rank .top1 .place{background:var(--danmuji);border-color:var(--danmuji);color:var(--sauce)}
.rank .top2 .place{background:#cfd3d8;border-color:#cfd3d8;color:var(--sauce)}
.rank .top3 .place{background:#c98b4a;border-color:#c98b4a;color:var(--sauce)}
.rank .who{flex:1;font:400 20px/1.2 var(--display);color:var(--onion)}
.rank .who em{font-style:normal;font-size:14px;background:var(--sign);color:var(--onion);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}
.rank .time{font:400 19px/1 var(--display);color:var(--danmuji);white-space:nowrap}
.rank .me{outline:2px solid var(--danmuji)}
.rank .empty{color:var(--noodle-dim)}
.updated{max-width:640px;margin:0 0 64px;color:var(--noodle-dim);font-size:14.5px}

.lead{margin:22px 0 0;font-size:18px;max-width:40em;color:var(--noodle)}

/* ── 주제 고르기 ── */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.filters button{font:inherit;font-size:16px;color:var(--noodle);background:transparent;border:2px solid var(--sauce-3);
  border-radius:999px;padding:5px 14px;cursor:pointer;min-height:40px}
.filters button:hover{border-color:var(--noodle-dim)}
.filters button[aria-pressed="true"]{background:var(--noodle);border-color:var(--noodle);color:var(--sauce)}
.filters b{font-weight:400;opacity:.65;margin-left:4px}

/* ── 게임 카드 ── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px;margin-bottom:56px}
.tile{display:flex;flex-direction:column;background:var(--sauce-2);border-radius:16px;padding:10px 10px 18px;
  text-decoration:none;color:inherit;outline:2px solid transparent;outline-offset:0}
.tile:hover{outline-color:var(--danmuji)}
.tile:focus-visible{outline:3px solid var(--danmuji);outline-offset:2px}
.tile[hidden]{display:none}
.shot{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.no{position:absolute;left:8px;top:8px;min-width:32px;height:32px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  background:var(--danmuji);color:var(--sauce);font:400 16px/1 var(--display)}
.tile h2{margin:14px 6px 4px;font:400 23px/1.25 var(--display);color:var(--onion)}
.tile p{margin:0 6px;color:var(--noodle-dim);font-size:15.5px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 6px 0}
.tag{font-size:13.5px;line-height:1;padding:6px 10px;border-radius:999px;border:1px solid var(--sauce-3);color:var(--noodle-dim)}
.tag.phone{border-color:#5e7f33;color:var(--cucumber)}

/* ── 역사관 ── */
.hist-head h2{margin:26px 0 0;font:400 40px/1.1 var(--display);color:var(--onion)}
.timeline{position:relative;padding-left:76px;margin:24px 0 64px}
.timeline::before{content:"";position:absolute;left:22px;top:6px;bottom:0;width:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 56'%3E%3Cpath d='M12 0C24 14 24 14 12 28S0 42 12 56' fill='none' stroke='%23d9b24a' stroke-width='3.4'/%3E%3Cpath d='M16 0C28 14 28 14 16 28S4 42 16 56' fill='none' stroke='%23f2d36b' stroke-width='3.4'/%3E%3C/svg%3E") repeat-y;
  background-size:28px 56px}
.month{position:relative;margin:36px 0 18px;font:400 30px/1 var(--display);color:var(--danmuji)}
.month:first-child{margin-top:8px}
.entry{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px;align-items:start;
  background:var(--sauce-2);border-radius:16px;padding:14px;margin:0 0 18px}
.node{position:absolute;left:-76px;top:14px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--danmuji);color:var(--sauce);font:400 17px/1 var(--display);box-shadow:0 0 0 5px var(--sauce)}
.entry .shot{border-radius:10px}
.entry h3{margin:2px 0 6px;font:400 26px/1.25 var(--display);color:var(--onion)}
.entry h3 .eno{color:var(--danmuji);margin-right:6px}
.entry p{margin:0 0 10px;max-width:44em}
.order{margin:4px 0 12px;max-width:34em;background:#fbf7ee;color:#3a2a1c;border-radius:4px;padding:10px 14px 10px;
  border-top:6px solid var(--sign);font-size:16px}
.order span{display:block;font:400 14px/1 var(--display);color:var(--sign);margin-bottom:6px}
.play{display:inline-block;font:400 18px/1 var(--display);text-decoration:none;background:var(--danmuji);color:var(--sauce);
  padding:11px 18px 9px;border-radius:8px}
.play:hover{background:var(--onion)}
.entry.opened{grid-template-columns:minmax(0,1fr);background:transparent;border:3px dashed var(--sign)}
.entry.opened .node{background:var(--sign);color:var(--onion)}
@media (max-width:700px){
  .timeline{padding-left:58px}
  .timeline::before{left:12px}
  .node{left:-58px;width:48px;height:48px;font-size:15px}
  .entry{grid-template-columns:minmax(0,1fr);gap:12px}
  .entry h3{font-size:23px}
}

footer{border-top:1px solid var(--sauce-3);padding:22px 0 40px;color:var(--noodle-dim);font-size:14.5px}
footer p{margin:0 0 4px}