:root {
  font-family: 'Noto Sans KR', sans-serif; color: #171717; background: #fafafa;
  --blue: #3e5aff; --red: #ef4260; --green: #22a76b;
  --ink: #171717; --muted: #6b6b68; --faint: #9a9a95; --line: #e3e3df; --paper: #fff; --bg: #fafafa;
  --display: 'Barlow Condensed', Impact, sans-serif;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--bg) }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px }
[hidden] { display: none !important }
svg { display: block }

/* ── Header ───────────────────────────────────────── */
header { position: fixed; top: 0; left: 0; right: 0; height: 84px; z-index: 10; display: flex; align-items: center; gap: 28px; padding: 0 4%; background: #fafafae8; backdrop-filter: blur(10px) }
.brand { font-family: var(--display); font-weight: 900; font-size: 32px; display: flex; align-items: baseline; gap: 4px; padding: 0 }
.brand span { width: 6px; height: 6px; background: var(--blue) }
.site-nav { display: flex; gap: 4px; margin-left: auto }
.site-nav button { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 1.2px; padding: 8px 12px; color: var(--faint); position: relative; transition: color .2s }
.site-nav button::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--axis); transform: scaleX(0); transform-origin: left; transition: transform .25s }
.site-nav button:hover { color: var(--ink) }
.site-nav button[aria-current] { color: var(--axis) }
.site-nav button[aria-current]::after { transform: none }
.motion-button { margin-left: auto; width: 34px; height: 34px; border: 1px solid #ddd; border-radius: 50%; display: grid; place-items: center; color: #555; flex: none; transition: border-color .2s, color .2s }
.motion-button:hover { border-color: #aaa; color: var(--ink) }
.site-nav:not([hidden]) + .motion-button { margin-left: 0 }
.motion-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.motion-button .icon-play { display: none; fill: currentColor; stroke: none }
.motion-button[aria-pressed=true] .icon-play { display: block }
.motion-button[aria-pressed=true] .icon-pause { display: none }

/* ── Home: 세 축 ──────────────────────────────────── */
.screen { min-height: 100svh; position: relative }
.home { height: 100svh; min-height: 580px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center, #fff 0%, #fafafa 70%) }
#home:focus { outline: none }
.axis-map { width: min(1050px, 94vw, calc((100svh - 140px) * 1.428)); aspect-ratio: 10/7; position: relative; transition: transform .5s cubic-bezier(.2,.7,.2,1) }
.axis-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.axis { fill: none; stroke-width: 7; stroke-linecap: butt }
.z { stroke: var(--blue) } .x { stroke: var(--red) } .y { stroke: var(--green) }
.flow { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 50; animation: axis-flow 2.5s linear infinite; opacity: .65 }
.axis-hit { fill: none; stroke: transparent; stroke-width: 42; pointer-events: stroke; cursor: pointer }
.axis-hit:hover { stroke: #99999912 }
.front-logo { position: absolute; left: 16%; top: 32%; width: 68%; height: auto; pointer-events: none; user-select: none }
.axis-link { position: absolute; display: flex; align-items: center; gap: 10px; padding: 14px 18px; white-space: nowrap; font-family: var(--display); font-weight: 600; letter-spacing: 1.4px; font-size: 18px; border-radius: 3px; transition: background .25s, letter-spacing .3s }
.axis-link:hover { background: #e9e9e680; letter-spacing: 2.5px }
.axis-letter { font-family: monospace; font-size: 12px; opacity: .65 }
.north { left: 54%; top: 10%; transform: translateY(-50%); color: var(--blue) }
.southwest { left: 16%; top: 88%; transform: translateX(-50%); color: var(--red) }
.southeast { left: 84%; top: 88%; transform: translateX(-50%); color: var(--green) }
.gesture-hint { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #999; font-size: 12px; margin: 0; letter-spacing: .3px; pointer-events: none }
.direction-status { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden }

/* ── 축 여행 (화면 전환) ───────────────────────────── */
#axis-guide { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible }
#guide-line { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round }
#guide-head { fill: currentColor }
#guide-glow { fill: none; stroke: currentColor; stroke-width: 20; stroke-linecap: round; filter: blur(9px); opacity: 0 }
#guide-pulse { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .07 .93; opacity: 0 }
.axis-return { position: fixed; left: 13px; top: 105px; width: 50px; min-height: 68px; z-index: 8; background: var(--bg); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0; font-size: 11px }
.return-axis { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-family: monospace; font-size: 14px; transition: transform .3s, background .3s }
.axis-return:hover .return-axis { transform: translateY(-4px); background: #ececE8 }
.axis-return.arrived { animation: return-land .4s cubic-bezier(.2,.8,.2,1) }
.axis-travelling .axis-link, .axis-travelling .gesture-hint { opacity: 0; transition: opacity .18s; pointer-events: none }
.axis-travelling .axis-hit { pointer-events: none }
.axis-travelling .flow { opacity: 0 }
.axis-travelling .axis-map { transition: none }
.axis-travelling .screen { animation: none !important }
.axis-travelling [data-journey-item] { will-change: transform, opacity }
.axis-travelling[data-travel-axis=games] :is(.axis.x, .axis.y), .axis-travelling[data-travel-axis=club] :is(.axis.z, .axis.y), .axis-travelling[data-travel-axis=history] :is(.axis.x, .axis.z) { opacity: .13; transition: opacity .25s }
.axis-travelling[data-travel-axis=games] .axis.z, .axis-travelling[data-travel-axis=club] .axis.x, .axis-travelling[data-travel-axis=history] .axis.y { opacity: 0 }

/* ── 도착 화면 공통 ───────────────────────────────── */
.destination { padding: 132px max(95px, 8%) 96px; overflow-x: clip }
.destination > * { max-width: 1120px }
.page-heading { margin-bottom: 48px }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 2px; color: var(--axis) }
.eyebrow span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; font-family: monospace; font-size: 11px; letter-spacing: 0 }
h1 { font-size: clamp(30px, 4.2vw, 48px); line-height: 1.25; letter-spacing: -1.2px; font-weight: 800; margin: 0 }
h1:focus { outline: none }
.lead { margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 640px }
.lead strong { color: var(--axis); font-weight: 700 }

/* ── GAMES ─────────────────────────────────────── */
.game-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px }
.game-card { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s }
.game-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px #0003; border-color: color-mix(in srgb, var(--game) 35%, var(--line)) }
.game-card:has(.card-open:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px }
.card-media, .detail-media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: color-mix(in srgb, var(--game) 10%, #fff); display: grid; place-items: center }
.card-media::before, .detail-media::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--game) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--game) 9%, transparent) 1px, transparent 1px); background-size: 20px 20px }
.media-index { position: relative; font-family: var(--display); font-weight: 700; font-size: 52px; line-height: 1; color: color-mix(in srgb, var(--game) 55%, #fff) }
.card-media img, .detail-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.has-image .media-index { visibility: hidden }
.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.card-title { margin: 0; font-size: 17px; line-height: 1.4; letter-spacing: -.3px; font-weight: 700 }
.card-open { text-align: left; padding: 0; font-weight: inherit; letter-spacing: inherit }
.card-open::after { content: ''; position: absolute; inset: 0; z-index: 1 }
.card-open:focus-visible { outline: none }
.card-meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--muted) }
.card-summary { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted) }
.card-team { margin: auto 0 0; padding-top: 4px; font-size: 13px; color: var(--faint) }
.status { display: inline-block; font-size: 12px; line-height: 1; padding: 5px 8px; border-radius: 99px; background: #eef0fb; color: #3d4ea6; white-space: nowrap }
.status[data-state="개발 중"] { background: #e7f6ee; color: #187a4d }
.status[data-state="기획 중"] { background: #fbf4df; color: #8a6a12 }
.status[data-state="개발 중단"] { background: #f0f0ee; color: #77776f }

/* ── ABOUT ─────────────────────────────────────── */
.stats { margin: 0 0 40px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.stats div { padding: 26px 22px; display: flex; flex-direction: column-reverse; gap: 6px }
.stats div + div { border-left: 1px solid var(--line) }
.stats dd { margin: 0; font-family: var(--display); font-weight: 700; font-size: 40px; line-height: 1 }
.stats dt { color: var(--muted); font-size: 13px }
.link-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px }
.link-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s, transform .25s }
.link-card:hover { border-color: var(--axis); transform: translateY(-2px) }
.link-axis { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--axis); color: var(--axis); font-family: monospace; font-size: 13px }
.link-text { display: flex; flex-direction: column; gap: 3px }
.link-text strong { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 1px; color: var(--axis) }
.link-text small { font-size: 13px; color: var(--muted) }

/* ── HISTORY ───────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 820px }
.timeline > li { display: grid; grid-template-columns: 120px 1fr; gap: 0 28px; padding-bottom: 36px }
.year { margin: 0; font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: #c2c2bd; letter-spacing: 0 }
.timeline > li.latest .year { color: var(--green) }
.year-events { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 1px solid var(--line) }
.year-events > li { position: relative; display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 6px 0 14px }
.year-events > li::before { content: ''; position: absolute; left: -31px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #c8c8c3; box-shadow: 0 0 0 4px var(--bg) }
.year-events > li.club-event::before { background: var(--green) }
.event-month { font-size: 13px; color: var(--faint) }
.event-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15px }
.event-text strong { font-size: 18px }
.event-text span { color: var(--muted); font-size: 14px }
.event-open { padding: 0; font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--game) 45%, transparent); text-underline-offset: 4px; text-decoration-thickness: 2px; transition: text-decoration-color .2s }
.event-open:hover { text-decoration-color: var(--game) }

/* ── 상세창 ─────────────────────────────────────── */
dialog { border: 0; padding: 0; background: var(--paper); width: min(640px, 92vw); max-height: 88svh; overflow: auto; border-radius: 12px; box-shadow: 0 30px 80px -30px #0004 }
dialog::backdrop { background: #f5f5f3c0; backdrop-filter: blur(10px) }
dialog[open] { animation: dialog-in .25s ease-out }
.dialog-close { position: sticky; float: right; top: 12px; margin: 12px 12px -48px 0; width: 36px; height: 36px; border-radius: 50%; background: #ffffffe6; display: grid; place-items: center; z-index: 2; box-shadow: 0 2px 8px #0000001a }
.dialog-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round }
.detail-media { aspect-ratio: 3/1 }
.detail-media .media-index { font-size: 64px }
.dialog-copy { padding: 26px 32px 32px }
.detail-index { margin: 0; font-family: monospace; font-size: 12px; letter-spacing: 1px; color: var(--faint) }
.dialog-copy h2 { font-size: 26px; line-height: 1.35; letter-spacing: -.6px; margin: 8px 0 20px }
.facts { margin: 0; display: grid; gap: 10px }
.facts > div { display: flex; gap: 20px; font-size: 14px }
.facts dt { color: var(--faint); width: 64px; flex: none }
.facts dd { margin: 0 }
#game-description { border-top: 1px solid var(--line); padding-top: 20px; margin: 22px 0 0; white-space: pre-line; font-size: 15px; color: var(--muted); line-height: 1.85 }
#game-gallery { display: grid; gap: 12px; margin-top: 22px }
#game-gallery:empty { display: none }
#game-gallery img { width: 100%; height: auto; display: block; border-radius: 6px }

/* ── 애니메이션 ─────────────────────────────────── */
@keyframes axis-flow { to { stroke-dashoffset: -108 } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes return-land { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.motion-paused * { animation: none !important; transition: none !important }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* ── 작은 화면 ──────────────────────────────────── */
@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr) }
  .stats div:nth-child(3) { border-left: 0 }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line) }
}
@media (max-width: 700px) {
  header { height: 64px; padding: 0 16px; gap: 10px }
  .brand { font-size: 26px }
  .site-nav { gap: 0 }
  .site-nav button { font-size: 15px; letter-spacing: .6px; padding: 8px 7px }
  .site-nav button::after { left: 7px; right: 7px }
  .motion-button { width: 30px; height: 30px }
  .home { min-height: 480px }
  .axis-map { width: 94vw; aspect-ratio: 1/1.15 }
  .front-logo { width: 86%; left: 7%; top: 36% }
  .north { left: 56%; top: 26% }
  .southwest, .southeast { top: 76% }
  .axis-link { font-size: 16px; gap: 6px; padding: 14px 8px }
  .gesture-hint { font-size: 11px; bottom: 35px }
  .axis-return { left: 2px; width: 44px; top: 88px }
  .destination { padding: 100px 18px 72px 62px }
  .page-heading { margin-bottom: 32px }
  .lead { font-size: 15px }
  .lead br { display: none }
  .game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px }
  .card-body { padding: 12px 12px 14px; gap: 6px }
  .card-title { font-size: 15px }
  .card-meta, .card-team { font-size: 12px }
  .media-index { font-size: 38px }
  .stats div { padding: 18px 14px }
  .stats dd { font-size: 32px }
  .link-cards { grid-template-columns: 1fr }
  .timeline > li { grid-template-columns: 1fr; gap: 12px }
  .year { font-size: 36px }
  .year-events { padding-left: 20px }
  .year-events > li::before { left: -25px }
  .dialog-copy { padding: 20px 20px 26px }
  .dialog-copy h2 { font-size: 22px }
}
@media (max-width: 360px) {
  .site-nav button { font-size: 13px; padding: 8px 5px }
  .game-grid { grid-template-columns: 1fr }
}