/* Arcadewonder 공용 스타일
   뼈대는 C안(요즘 매거진), 본문 읽기는 B안(넓은 줄간격·큰 글자).
   **바탕은 다크다**(대표님 지시 2026-09-12 11:55) — 오락실은 어두운 방이었다.
   색은 게임 화면에서 가져온 원색만 쓴다. 사진은 자유 라이선스만 쓰고 면마다 표기한다.

   색은 전부 아래 토큰으로만 쓴다. 규칙에 색값을 직접 박으면 테마를 한 번 더 바꿀 때
   빠뜨린 자리가 조용히 남는다(9/12 라이트 -> 다크 전환에서 실제로 여섯 자리가 그랬다). */

:root{
  --bg:#0e0e10;        /* 바탕 */
  --bg-2:#17171b;      /* 상자·사실 상자·꼬리말 */
  --band:#1c1c21;      /* 어두운 띠 — 바탕과 구별되게 한 단 밝다 */
  --ink:#f3f2ee;       /* 제목·강한 글자 */
  --ink-2:#b6b5ad;     /* 본문 보조 */
  --ink-3:#83827b;     /* 날짜·표기줄 */
  --read-ink:#e8e7e0;  /* 긴 본문 — 순백보다 한 단 낮춰 눈을 덜 때린다 */
  --line:#2b2b30;
  --hot:#ff5a2b;       /* 강조 — 어두운 바탕에서 더 밝게 */
  --cool:#6f9bff;      /* 태그·링크 — 어두운 바탕 대비 확보 */
  --on-ink:#0e0e10;    /* 밝은 면 위에 올리는 글자 */
  --w:1180px;
  --read:40rem;
  color-scheme:dark;   /* 스크롤바·기본 컨트롤까지 어둡게 */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--cool);outline-offset:2px;border-radius:3px}

/* 머리말 */
.head{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20}
.head-in{max-width:var(--w);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:32px}
.logo{font-weight:900;font-size:22px;letter-spacing:-.035em}
.gnb{display:flex;gap:22px;font-size:15px;font-weight:500;color:var(--ink-2);margin-left:auto}
.gnb a:hover,.gnb a[aria-current]{color:var(--hot)}
.lang{margin-left:auto;display:flex;gap:4px;font-size:13px;font-weight:500;color:var(--ink-3)}
.lang a{padding:5px 11px;border-radius:999px}
.lang a[aria-current]{background:var(--ink);color:var(--on-ink)}
.menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:none;
  border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;cursor:pointer}

/* 히어로 — 오늘의 이야기 한 편 */
.hero{max-width:var(--w);margin:0 auto;padding:52px 24px 54px;
  display:grid;grid-template-columns:1.55fr 1fr;gap:52px;align-items:end;
  border-bottom:1px solid var(--line)}
.kicker{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.1em;color:var(--hot);margin:0 0 18px}
.kicker b{background:var(--hot);color:var(--on-ink);padding:4px 9px;border-radius:4px}
.hero h1{font-weight:900;font-size:clamp(34px,5.6vw,70px);line-height:1.08;
  letter-spacing:-.045em;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--hot)}
/* 제목 자체가 링크여야 한다(대표님 지시 11:55) — 버튼만 눌리는 첫 화면은 안 된다 */
.hero h1 a{color:inherit;display:inline-block}
.hero h1 a:hover{color:var(--hot)}
.hero h1 a:hover em{color:var(--ink)}
.lede{font-size:18px;line-height:1.9;color:var(--ink-2);max-width:46ch;margin:0 0 26px}
.hero-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn{background:var(--ink);color:var(--on-ink);padding:14px 28px;border-radius:999px;
  font-size:15px;font-weight:700;display:inline-block;transition:background .2s}
.btn:hover{background:var(--hot);color:var(--on-ink)}
.dateline{font-size:14px;color:var(--ink-3);font-weight:500}

/* 우리가 만든 픽셀 색면 (게임 화면을 쓰지 않는다) */
.px{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;aspect-ratio:1/.82}
.px i{border-radius:3px;background:var(--bg-2)}

/* 첫 화면의 캐비닛 사진 — 저작자 표기를 사진 바로 밑에 둔다.
   ⚠ 세로로 긴 캐비닛 사진을 그대로 두면 첫 화면을 사진이 다 먹는다(대표님 지적 11:55).
   폭을 묶고 가로로 눕혀서 글이 주인공이 되게 한다. */
.hero-photo{margin:0;max-width:380px;width:100%;justify-self:end}
.hero-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--bg-2)}
.hero-photo figcaption{font-size:12px;color:var(--ink-3);margin-top:9px;line-height:1.65}
.hero-photo figcaption a{text-decoration:underline;text-underline-offset:2px}

/* 바탕과 구별되는 띠 */
.band{background:var(--band);color:var(--ink);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-in{max-width:var(--w);margin:0 auto;padding:52px 24px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.band h2{font-size:clamp(24px,3.4vw,32px);font-weight:900;letter-spacing:-.035em;
  margin:0 0 12px;line-height:1.28}
.band p{color:var(--ink-2);line-height:1.85;margin:0;font-size:16px}
.band .btn{margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips i{font-style:normal;font-size:14px;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:8px 15px}

/* 목록 */
.sec{max-width:var(--w);margin:0 auto;padding:58px 24px 10px}
.sec-head{display:flex;align-items:center;gap:14px;margin:0 0 28px}
.sec-head h1,.sec-head h2{font-size:20px;font-weight:900;letter-spacing:-.03em;margin:0}
.sec-head hr{flex:1;border:0;border-top:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
/* 글이 한두 편일 때 카드가 화면 폭만큼 늘어나지 않게 */
.cards.few{grid-template-columns:repeat(auto-fit,minmax(300px,420px))}
/* 목록 면의 섬네일 사진 표기 — 자유 라이선스라도 저작자·라이선스·출처를 적는다 */
.credits{font-size:12px;color:var(--ink-3);line-height:1.8;margin:26px 0 0}
.credits a{text-decoration:underline;text-underline-offset:2px}
.card .thumb{aspect-ratio:16/10;border-radius:10px;margin-bottom:15px;overflow:hidden;
  display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:15px}
.card .thumb i{border-radius:2px}
.tag{font-size:12px;font-weight:700;letter-spacing:.07em;color:var(--cool)}
.card h3{font-size:20px;font-weight:700;line-height:1.45;margin:8px 0 9px;letter-spacing:-.025em}
.card p{font-size:15px;color:var(--ink-2);line-height:1.8;margin:0}
.card:hover h3{color:var(--hot)}

/* 독자 사연 */
.voice{max-width:var(--w);margin:0 auto;padding:52px 24px 78px}
.quote{background:var(--bg-2);border-radius:16px;padding:46px 42px 38px}
.quote p{font-size:clamp(20px,2.6vw,26px);line-height:1.65;margin:0 0 18px;
  font-weight:700;letter-spacing:-.03em;max-width:26ch}
.quote cite{font-style:normal;font-size:14px;color:var(--ink-3);font-weight:500}

/* 글 한 편 — B안의 읽기 방식 */
.article{max-width:var(--read);margin:0 auto;padding:44px 24px 20px}
.article .tag{display:inline-block;margin-bottom:14px}
.article h1{font-weight:900;font-size:clamp(30px,4.6vw,44px);line-height:1.25;
  letter-spacing:-.04em;margin:0 0 16px}
.byline{font-size:14px;color:var(--ink-3);margin:0 0 30px;font-weight:500}
/* 글 안의 사진 — 읽기 칸 폭에 맞춘다.
   화면 폭만큼 늘리면 세로로 긴 캐비닛 사진을 심하게 잘라야 하고, 그만큼 큰 파일도 있어야 한다.
   읽기 칸에 맞추면 760px 짜리 한 장으로 충분하다(대표님 지적 12:20). */
.figure{max-width:var(--read);margin:0 auto 34px;padding:0 24px}
.figure .px{aspect-ratio:3/2;grid-template-columns:repeat(12,1fr)}
.figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--bg-2)}
.figure figcaption{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.6}
.figure figcaption a{text-decoration:underline;text-underline-offset:2px}

/* 리뷰 머리 — 한 줄 평과 기본 정보 */
.verdict{max-width:var(--read);margin:0 auto;padding:0 24px}
.verdict p{font-size:22px;font-weight:700;line-height:1.55;letter-spacing:-.03em;margin:0 0 22px}
.spec{max-width:var(--read);margin:0 auto 30px;padding:0 24px}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:15px}
.spec dt{color:var(--ink-3);font-weight:500}
.spec dd{margin:0}
.card .thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.card .thumb.photo{display:block;padding:0}
.body{font-family:'Noto Serif KR',Georgia,serif;font-size:19px;line-height:2.05;color:var(--read-ink)}
.body p{margin:0 0 1.5em}
.body h2{font-family:'Noto Sans KR',system-ui,sans-serif;font-size:24px;font-weight:900;
  letter-spacing:-.03em;line-height:1.4;margin:2.4em 0 .8em}
.body blockquote{margin:2em 0;padding:0;border:0;font-size:22px;font-weight:700;
  line-height:1.6;letter-spacing:-.025em;font-family:'Noto Sans KR',system-ui,sans-serif}
.body .note{background:var(--bg-2);border-radius:12px;padding:22px 24px;font-size:16px;
  line-height:1.8;font-family:'Noto Sans KR',system-ui,sans-serif;color:var(--ink-2)}
.body .note b{color:var(--ink)}
.ask-end{max-width:var(--read);margin:0 auto;padding:6px 24px 10px;
  font-size:19px;font-weight:700;letter-spacing:-.02em}
.pnav{max-width:var(--read);margin:0 auto;padding:30px 24px 76px;
  display:flex;gap:16px;justify-content:space-between;font-size:15px;font-weight:500;
  border-top:1px solid var(--line);margin-top:34px}
.pnav a:hover{color:var(--hot)}

/* 꼬리말 */
.foot{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-in{max-width:var(--w);margin:0 auto;padding:30px 24px;display:flex;gap:18px;
  flex-wrap:wrap;align-items:center;font-size:13px;color:var(--ink-3)}
.foot-in .logo{font-size:17px;color:var(--ink)}
.foot-in .sp{margin-left:auto}

@media (max-width:900px){
  .hero,.band-in{grid-template-columns:1fr;gap:30px}
  .hero-photo{justify-self:start;max-width:440px}
  .gnb{display:none}
  .gnb.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 24px 14px}
  .gnb.open a{padding:12px 0;border-top:1px solid var(--line);font-size:17px}
  .menu-btn{display:block}
  .lang{margin-left:14px}
  .head-in{position:relative;gap:14px}
  body{font-size:16px}
  .body{font-size:18px;line-height:2}
  .quote{padding:32px 24px 28px}
}
@media (max-width:560px){
  .hero{padding:34px 20px 36px}
  .sec,.voice,.article,.figure,.pnav,.ask-end{padding-left:20px;padding-right:20px}
  .px{grid-template-columns:repeat(6,1fr)}
  .figure .px{grid-template-columns:repeat(10,1fr);aspect-ratio:16/9}
}