/* Pixel Rune - base stylesheet.
   Minimal foundation styling; expanded in the frontend wave. */

:root {
    --bg: #10121a;
    --surface: #191c27;
    --surface-2: #212536;
    --text: #e8eaf2;
    --muted: #9aa1b8;
    --accent: #6ea8fe;
    --border: #2b3043;
    --success: #4ec98a;
    --error: #f2666f;
    --warning: #e6b566;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.site-header {
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.brand {
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--text);
}

.site-nav a {
    margin-left: 1rem;
    text-decoration: none;
}

main.container { padding: 2rem 0 3rem; }

.hero h1 { margin: 0 0 .5rem; font-size: 2rem; }
.lead { color: var(--muted); margin: 0; }

.panel {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.panel h2 { margin-top: 0; font-size: 1.1rem; }

.status-list { margin: 0; padding-left: 1.1rem; color: var(--muted); }

.error-panel { text-align: center; padding: 3rem 1.5rem; }
.error-panel h1 { font-size: 3rem; margin: 0 0 .5rem; }

.flash-stack { margin-bottom: 1.5rem; display: grid; gap: .5rem; }

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.flash-success { border-color: var(--success); }
.flash-error   { border-color: var(--error); }
.flash-warning { border-color: var(--warning); }

.flash-close {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    color: var(--muted);
    font-size: .9rem;
}

/* --- Wave 3: authentication, dashboard, admin ---------------------------- */

.nav-user { color: var(--muted); margin-left: 1rem; }

.inline-form { display: inline; margin-left: 1rem; }

.link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.form-panel { max-width: 26rem; margin-inline: auto; }
.form-panel h1 { margin-top: 0; font-size: 1.4rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .9rem; }

.field input {
    width: 100%;
    padding: .6rem .75rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.field-error { color: var(--error); font-size: .85rem; margin: .35rem 0 0; }

.btn {
    display: inline-block;
    padding: .6rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary { background: var(--accent); border-color: var(--accent); color: #0d1220; font-weight: 600; }

.detail-list { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

.stat { font-size: 1.5rem; margin: 0 0 1rem; }

.badge {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .4rem;
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent);
    vertical-align: middle;
}

.admin-header { border-bottom-color: var(--accent); }

/* Wide tables scroll inside their own container, never the page body. */
.table-scroll { overflow-x: auto; }

.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th,
.data-table td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.data-table th { color: var(--muted); font-weight: 600; }
.data-table td:last-child { white-space: normal; word-break: break-word; }

/* --- Wave 4-1: game form controls --------------------------------------- */

.field select,
.field textarea {
    width: 100%;
    padding: .6rem .75rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}

.field textarea { resize: vertical; min-height: 6rem; }

.field select:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.field-hint { margin: 0 0 .4rem; color: var(--muted); font-size: .8rem; }
.field-hint code, .data-table code { font-size: .85em; color: var(--text); }

.req { color: var(--error); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }

.form-panel-wide { max-width: 40rem; }

.toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.empty-state { color: var(--muted); margin: 0; }

.tag {
    display: inline-block;
    padding: .1rem .45rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.tag-published { border-color: var(--success); color: var(--success); }
.tag-draft     { border-color: var(--muted);   color: var(--muted); }
.tag-archived  { border-color: var(--warning); color: var(--warning); }

/* --- Wave 4-2: public game detail --------------------------------------- */

.breadcrumb {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--muted);
    font-size: .9rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.game-detail {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 44rem) {
    .game-detail { grid-template-columns: 1fr; gap: 1.25rem; }
}

.game-media { min-width: 0; }

.game-thumb {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.game-thumb-empty {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    color: var(--muted);
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.game-summary { min-width: 0; }
.game-summary h1 { margin: .25rem 0 .5rem; font-size: 1.9rem; }

.game-category {
    margin: 0;
    color: var(--accent);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.game-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .4rem 1.5rem;
    margin: 1.5rem 0;
    font-size: .95rem;
}
.game-meta dt { color: var(--muted); }
.game-meta dd { margin: 0; }

.game-action {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.game-action .btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

.game-action-note { margin: .5rem 0 0; color: var(--muted); font-size: .85rem; }

.game-description { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

.btn-small { padding: .3rem .7rem; font-size: .85rem; }

/* --- Wave 4-3: game play page ------------------------------------------- */

.game-play { max-width: 100%; }

.game-play-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.game-play-header h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.game-play-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.game-play-back { flex-shrink: 0; }

/*
 * The stage never exceeds its container, whatever resolution a game declares,
 * so a large game cannot make the page scroll sideways. Real scaling of a
 * game canvas is a later concern.
 */
.game-stage {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    overflow: hidden;
}

@media (min-width: 60rem) {
    .game-stage { aspect-ratio: 16 / 10; }
}

.game-stage-placeholder { text-align: center; padding: 1.5rem; }

.game-stage-title {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.game-stage-note { margin: 0; color: var(--muted); font-size: .9rem; }

.game-play-note { margin: 1rem 0 0; color: var(--muted); font-size: .85rem; }

.row-actions { display: flex; gap: .4rem; white-space: nowrap; }

.btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

/*
 * Game frame.
 *
 * The bundle sizes its own canvas to the space it is given, so the frame just
 * fills the stage; .game-stage already clips and centres it. A border would
 * double up with the one the stage draws.
 */
.game-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Title landing page ------------------------------------------------------- *
 * The page a store listing links to (TitleController). No inline styles: the
 * CSP sets style-src 'self'.
 */
.lang-nav {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-bottom: 1.25rem; font-size: .9rem;
}
.lang-nav .lang-current { color: var(--text); font-weight: 600; }

.title-hero { margin-bottom: 1.5rem; }
.title-hero h1 { margin-bottom: .2rem; }
.title-subtitle { color: var(--muted); margin: 0 0 .75rem; font-size: 1.05rem; }
.title-store { margin-top: 1.1rem; }

.title-features {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.title-feature {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem;
}
.title-feature h3 { margin: 0 0 .35rem; font-size: 1rem; }
.title-feature p { margin: 0; color: var(--muted); }

.title-facts { display: grid; grid-template-columns: 10rem 1fr; gap: .35rem 1rem; margin: 0; }
.title-facts dt { color: var(--muted); }
.title-facts dd { margin: 0; }

.title-shots { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.title-shots img {
    width: 100%; height: auto; display: block;
    border: 1px solid var(--border); border-radius: var(--radius);
    image-rendering: pixelated;
}

.title-links { margin-top: 1.1rem; font-size: .95rem; }
.footer-links { margin: .35rem 0 0; }

@media (max-width: 40rem) {
    .title-facts { grid-template-columns: 1fr; gap: 0; }
    .title-facts dd { margin-bottom: .6rem; }
}

/* --- Title landing page (2026-09-21) ------------------------------------
 * Scoped to body.title-page so the portal is untouched. The palette is the
 * game's own: night-sky navy from the title art, plaster #E7D5B3 and lantern
 * gold from the town palette (EXTRACTION 111 / title menu), black outlines.
 * Why a separate palette at all: the visitor is judging "is this a real game
 * from a real studio" in the first seconds (Fogg 2003 - design look 46%), and
 * a generic SaaS blue reads as a template. No inline styles: CSP style-src
 * 'self'. */
/* 2026-09-21 사용자 선택 b: ★순백 바탕★. 흰 바탕은 회사·스토어 페이지의 학습된 모양이고
 * 그림·스크린샷이 액자처럼 도드라집니다. 검정 외곽선·회벽색 배지·등불 금색 단추는 그대로라
 * 게임 화풍은 남습니다. (어두운 판은 notes/site_backup_2026-09-21/ 과 bg.html 시안에 있음) */
body.title-page {
    --tp-bg: #ffffff;
    --tp-surface: #ffffff;
    --tp-surface-2: #f6f6f8;
    --tp-border: #e4e4ea;
    --tp-text: #1c1c24;
    --tp-muted: #5f5f6b;
    --tp-gold: #e0b04c;
    --tp-gold-ink: #1a1408;
    --tp-plaster: #f3ead4;
    --tp-roof: #a53030;
    --tp-outline: #1c1c24;
    --tp-link: #8a5a12;
    background: var(--tp-bg);
    color: var(--tp-text);
}
body.title-page a { color: var(--tp-link); }

.t-header { background: var(--tp-surface); border-bottom: 2px solid var(--tp-outline); }
.t-header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .8rem 0;
}
.t-brand {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--tp-text); text-decoration: none; font-weight: 700; font-size: 1.1rem;
}
.t-brand-icon {
    width: 36px; height: 36px; border-radius: 8px;
    border: 2px solid var(--tp-outline); image-rendering: pixelated; background: #000;
}
.t-nav { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .92rem; }
.t-nav a { text-decoration: none; color: var(--tp-muted); }
.t-nav .t-nav-sep { color: var(--tp-border); }
.t-nav a:hover { color: var(--tp-link); }
.t-lang-current { color: var(--tp-text); font-weight: 600; }

.t-main { padding: 1.6rem 0 3rem; }

/* Hero: the art first, then the name over a plaster-coloured band. */
.t-hero {
    border: 2px solid var(--tp-outline); border-radius: 14px; overflow: hidden;
    background: var(--tp-surface); margin-bottom: 1.6rem;
}
.t-hero-art {
    display: block; width: 100%; height: auto; image-rendering: pixelated;
    /* 1280×800 첫 화면에 이름·한 줄·단추까지 들어오게 높이를 누릅니다(로고는 세로 가운데라 잘리지 않음) */
    max-height: 420px; object-fit: cover; object-position: center;
}
.t-hero-text { padding: 1.3rem 1.5rem 1.5rem; border-top: 2px solid var(--tp-outline); }
.t-name { margin: 0; font-size: 2.1rem; line-height: 1.15; letter-spacing: -.01em; }
.t-subtitle { margin: .25rem 0 .9rem; color: var(--tp-muted); font-size: 1.05rem; }
.t-lead { margin: 0 0 1.1rem; font-size: 1.05rem; max-width: 60ch; }
.t-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 0; }

.t-btn {
    display: inline-block; padding: .62rem 1.15rem; border-radius: 9px;
    border: 2px solid var(--tp-outline); background: var(--tp-surface-2);
    color: var(--tp-text); text-decoration: none; font-weight: 600;
    box-shadow: 0 2px 0 var(--tp-outline);
}
.t-btn:hover { background: var(--tp-surface-2); color: var(--tp-text); }
.t-btn-primary { background: var(--tp-gold); color: var(--tp-gold-ink); }
.t-btn-primary:hover { background: #ecbd5c; color: var(--tp-gold-ink); }
.t-badge {
    display: inline-block; padding: .55rem 1rem; border-radius: 9px;
    border: 2px solid var(--tp-outline); background: var(--tp-plaster); color: var(--tp-text);
    font-weight: 600;
}

.t-panel {
    background: var(--tp-surface); border: 2px solid var(--tp-outline);
    border-radius: 14px; padding: 1.25rem 1.5rem; margin-bottom: 1.4rem;
}
.t-panel h2 {
    margin: 0 0 .9rem; font-size: 1.2rem;
    padding-bottom: .5rem; border-bottom: 1px solid var(--tp-border);
}
.t-video {
    display: block; width: 100%; max-width: 996px; height: auto; margin: 0 auto;
    border: 2px solid var(--tp-outline); border-radius: 10px; background: #000;
    image-rendering: pixelated;
}
.t-caption { margin: .6rem 0 0; color: var(--tp-muted); font-size: .92rem; text-align: center; }

.t-shots { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.t-shot { margin: 0; }
.t-shot img {
    width: 100%; height: auto; display: block;
    border: 2px solid var(--tp-outline); border-radius: 10px; image-rendering: pixelated;
}
.t-shot figcaption { margin: .4rem .2rem 0; color: var(--tp-muted); font-size: .9rem; }

.t-features { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.t-feature {
    background: var(--tp-surface-2); border: 1px solid var(--tp-border);
    border-radius: 10px; padding: .9rem 1rem;
}
.t-feature h3 { margin: 0 0 .35rem; font-size: 1rem; color: var(--tp-text); }
.t-feature p { margin: 0; color: var(--tp-muted); }

.t-prose p { margin: 0 0 .8rem; max-width: 72ch; }
.t-prose p:last-child { margin-bottom: 0; }

.t-facts { display: grid; grid-template-columns: 9rem 1fr; gap: .35rem 1rem; margin: 0; }
.t-facts dt { color: var(--tp-muted); }
.t-facts dd { margin: 0; }

.t-studio p { margin: 0 0 .9rem; max-width: 72ch; }
.t-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }

.t-footer { border-top: 2px solid var(--tp-outline); background: var(--tp-surface); }
.t-footer-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem 1.2rem; padding: 1rem 0; font-size: .92rem; color: var(--tp-muted);
}
.t-footer-inner p { margin: 0; }
.t-footer-links a { margin-right: 1rem; text-decoration: none; }
.t-footer-links a:last-child { margin-right: 0; }

@media (max-width: 40rem) {
    .t-name { font-size: 1.6rem; }
    .t-hero-text { padding: 1rem 1.1rem 1.2rem; }
    .t-panel { padding: 1rem 1.1rem; }
    .t-facts { grid-template-columns: 1fr; gap: 0; }
    .t-facts dd { margin-bottom: .6rem; }
    .t-header-inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}