/* =====================================================
   VioletGames 공통 화면 — baseWeb(C:\ai-profile\dev\trunkWithAi\web\baseWeb\wwwroot\css\)의 색·글꼴·패널·폰 서랍·아래 막대를 참고해 새로 쓴 것.
   틀 : 제목줄(흰색, 로고) + 남색 메뉴 막대(PC) / 폰(768px 이하)은 서랍 메뉴 + 아래 막대.
   baseWeb의 iframe 여러 탭 워크벤치는 쓰지 않는다 (게임은 새 페이지로 연다 — 지침서 VG-Q004).
   ===================================================== */
:root {
    --vg-accent: #2d78b8;      /* baseWeb 로고 파랑 */
    --vg-accent-2: #43b7a5;    /* baseWeb 로고 민트 */
    --vg-active: #5795c8;      /* baseWeb 선택 탭 */
    --vg-navy: #2c3e50;        /* baseWeb 탭 막대 */
    --vg-ink: #263746;
    --vg-dim: #7f8c8d;
    --vg-faint: #9aa7b0;
    --vg-line: #d9dee3;
    --vg-line-soft: #e1e7ec;
    --vg-bg: #f5f5f5;
    --vg-panel: #fff;
    --vg-panel-head: #f6f8fa;
    --vg-link: #2f6a8f;
    --vg-title-h: 56px;
    --vg-nav-h: 44px;
    --vg-drawer-w: min(85vw, 300px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--vg-bg);
    color: var(--vg-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", "맑은 고딕", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}
a { color: var(--vg-link); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid rgba(45, 120, 184, .55); outline-offset: 2px; }

.vg-skip { position: fixed; z-index: 30; top: -40px; left: 12px; padding: 8px 12px; color: #fff; background: var(--vg-navy); border-radius: 0 0 4px 4px; }
.vg-skip:focus { top: 0; }

/* ---------- 제목줄 ---------- */
/* 붙어 있기(sticky)는 바깥 #vg-header에 건다 — 안쪽 줄에 걸면 header 높이 안에서만 붙어 있어 스크롤하면 사라진다 */
#vg-header { position: sticky; top: 0; z-index: 10; }
.vg-titlebar {
    display: flex; align-items: center; gap: 10px;
    height: var(--vg-title-h); padding: 0 16px;
    background: var(--vg-panel); border-bottom: 1px solid var(--vg-line);
}
.vg-menu-toggle { display: none; width: 44px; height: 44px; flex: 0 0 44px; border: 0; background: none; color: var(--vg-navy); font-size: 22px; cursor: pointer; }
.vg-logo { display: inline-flex; align-items: baseline; gap: 8px; color: var(--vg-navy); text-decoration: none; }
.vg-logo-mark { font-size: 19px; font-weight: 700; color: var(--vg-accent); letter-spacing: 0; }
.vg-logo-mark span { color: var(--vg-accent-2); }
.vg-logo-sub { font-size: 12px; color: var(--vg-dim); }
.vg-title-spacer { flex: 1; }
.vg-title-note { font-size: 12px; color: #8493a1; }

/* ---------- 남색 메뉴 막대 (PC) — baseWeb 탭 막대 모양 ---------- */
.vg-nav {
    display: flex; align-items: flex-end; gap: 4px;
    height: var(--vg-nav-h); padding: 0 16px;
    background: var(--vg-navy);
}
.vg-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 4px 4px 0 0;
    background: rgba(255, 255, 255, .12); color: #ecf0f1;
    font-size: 13px; text-decoration: none; white-space: nowrap;
}
.vg-nav a:hover { background: rgba(255, 255, 255, .22); }
.vg-nav a.active { background: var(--vg-active); color: #fff; font-weight: 600; }

/* ---------- 서랍 메뉴 (폰) ---------- */
.vg-drawer, .vg-backdrop, .vg-bottom { display: none; }

/* ---------- 본문 ---------- */
.vg-main { flex: 1 0 auto; width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 16px 28px; }
.vg-page-title { margin: 4px 0 2px; font-size: 20px; font-weight: 700; color: var(--vg-navy); }
.vg-page-sub { margin: 0 0 16px; color: var(--vg-dim); font-size: 13px; }

.vg-panel { margin-bottom: 14px; border: 1px solid var(--vg-line-soft); border-radius: 6px; background: var(--vg-panel); }
.vg-panel > h2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 9px 14px; font-size: 14px; font-weight: 700; color: var(--vg-navy); background: var(--vg-panel-head); border-bottom: 1px solid var(--vg-line-soft); border-radius: 6px 6px 0 0; }
.vg-panel > .inner { padding: 14px; }
.vg-more { font-size: 12px; font-weight: 400; color: var(--vg-link); text-decoration: none; }
.vg-more:hover { text-decoration: underline; }
.vg-empty { padding: 20px; text-align: center; color: var(--vg-faint); }
.vg-noscript { margin: 12px 0; padding: 10px 12px; border: 1px solid #f0d9a4; border-radius: 4px; background: #fff8e8; color: #6b4a0b; }

/* 홈 머리 */
.vg-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--vg-line-soft); border-radius: 8px; background: #fff; }
.vg-hero-ico { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; background: #e3f1f3; box-shadow: 0 10px 24px rgba(45, 120, 184, .12); display: grid; place-items: center; color: #2d9b9d; font-size: 32px; }
.vg-hero h1 { margin: 0 0 4px; font-size: 22px; color: var(--vg-navy); }
.vg-hero p { margin: 0; color: #607788; }

/* 게임 카드 */
.vg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 14px; }
.vg-card { display: flex; flex-direction: column; border: 1px solid var(--vg-line-soft); border-radius: 8px; background: #fff; overflow: hidden; }
.vg-card-art { position: relative; height: 150px; background: var(--art, #1a1c2c); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.vg-card-art::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: var(--ground, rgba(0, 0, 0, .25)); }
.vg-card-art .moon { position: absolute; top: 16px; right: 22px; width: 30px; height: 30px; border-radius: 50%; background: var(--moon, #f4f1c9); opacity: .9; }
.vg-sprite { position: relative; width: 128px; height: 128px; margin-bottom: 4px; background-repeat: no-repeat; image-rendering: auto; }
.vg-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.vg-card-body h3 { margin: 0; font-size: 16px; color: var(--vg-navy); }
.vg-card-body h3 small { margin-left: 4px; font-size: 12px; font-weight: 400; color: var(--vg-dim); }
.vg-card-body p { margin: 0; color: #4d6070; font-size: 13px; }
.vg-card-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.vg-card-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }

.vg-badge { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; background: #edf1f4; color: #527086; }
.vg-badge.ok { background: #e6f6ef; color: #1d6b4f; }
.vg-badge.wip { background: #fff3e0; color: #8a5300; }
.vg-badge.local { background: #eef0fb; color: #3c3489; }

.vg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid #b9c7d1; border-radius: 4px; background: #fff; color: var(--vg-ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.vg-btn:hover { background: #f1f5f8; }
.vg-btn.primary { background: var(--vg-link); border-color: var(--vg-link); color: #fff; font-weight: 600; }
.vg-btn.primary:hover { background: #285a7a; }
.vg-btn[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }
.vg-btn.big { min-height: 44px; padding: 0 22px; font-size: 15px; }

/* 공지 목록 — baseWeb 홈 카드 글 목록 모양 */
.vg-posts { list-style: none; margin: 0; padding: 4px 14px 8px; }
.vg-posts li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f3f5; }
.vg-posts li:last-child { border-bottom: none; }
.vg-posts .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vg-ink); text-decoration: none; }
.vg-posts a.t:hover { text-decoration: underline; }
.vg-posts li.pin .t { font-weight: 700; }
.vg-posts .d { color: var(--vg-faint); font-size: 12px; white-space: nowrap; }
.vg-pin { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 9px; background: #fdebd0; color: #8a5300; font-size: 11px; font-weight: 700; }
.vg-new { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #e2574c; color: #fff; font-size: 9px; font-weight: 700; }

/* 공지 전체 (펼침) */
.vg-notice { padding: 12px 14px; border-bottom: 1px solid #edf1f4; scroll-margin-top: calc(var(--vg-title-h) + var(--vg-nav-h) + 12px); }
.vg-notice:last-child { border-bottom: 0; }
.vg-notice.pin { background: #fffaf0; }
.vg-notice h3 { margin: 0 0 2px; font-size: 15px; }
.vg-notice .d { color: var(--vg-faint); font-size: 12px; }
.vg-notice p { margin: 6px 0 0; color: #4d6070; }
.vg-notice:target { outline: 2px solid #9cc3dd; outline-offset: -2px; }

/* 바로가기 타일 */
.vg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; padding: 12px; }
.vg-tile { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--vg-line-soft); border-radius: 6px; background: #fbfcfd; color: var(--vg-ink); text-decoration: none; }
.vg-tile:hover { border-color: #9cc3dd; background: #f3f8fc; }
.vg-tile .i { font-size: 20px; width: 26px; text-align: center; }
.vg-tile b { display: block; font-size: 13px; }
.vg-tile small { display: block; color: var(--vg-dim); font-size: 11px; }

/* 게임 소개 페이지 */
.vg-game-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0; margin-bottom: 14px; border: 1px solid var(--vg-line-soft); border-radius: 8px; background: #fff; overflow: hidden; }
.vg-game-head .vg-card-art { height: 100%; min-height: 200px; }
.vg-game-info { padding: 16px 18px; }
.vg-game-info h1 { margin: 0; font-size: 22px; color: var(--vg-navy); }
.vg-game-info .ko { margin: 0 0 8px; color: var(--vg-dim); }
.vg-game-info .tag { margin: 8px 0 12px; color: #4d6070; }
.vg-play-note { margin-top: 8px; color: var(--vg-dim); font-size: 12px; }
.vg-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.vg-list { margin: 0; padding-left: 20px; }
.vg-list li + li { margin-top: 4px; }
.vg-kv { width: 100%; border-collapse: collapse; }
.vg-kv th, .vg-kv td { padding: 7px 8px; border-bottom: 1px solid #edf1f4; text-align: left; vertical-align: top; }
.vg-kv th { width: 70px; color: #527086; font-weight: 600; background: #f9fbfc; white-space: nowrap; }
.vg-kv tr:last-child th, .vg-kv tr:last-child td { border-bottom: 0; }

/* 글 페이지 (소개) */
.vg-prose p { margin: 0 0 10px; }
.vg-prose h3 { margin: 16px 0 6px; font-size: 15px; color: var(--vg-navy); }
.vg-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vg-table th, .vg-table td { padding: 7px 8px; border-bottom: 1px solid #edf1f4; text-align: left; vertical-align: top; }
.vg-table th { font-weight: 600; color: #527086; background: #f9fbfc; white-space: nowrap; }
.vg-table a { color: var(--vg-link); word-break: break-all; }

.vg-footer { flex: 0 0 auto; padding: 14px 16px 18px; border-top: 1px solid var(--vg-line); background: #fff; color: var(--vg-faint); font-size: 12px; text-align: center; }
.vg-footer a { color: var(--vg-dim); }

/* 그리드 칸 최소 폭이 '안쪽 내용 폭'이면 줄바꿈 안 하는 글이 칸(→ 화면)을 넓힌다 — 0으로 푼다 (baseWeb baseweb_ui.css와 같은 함정) */
.vg-split > *, .vg-cards > *, .vg-game-head > * { min-width: 0; }
.vg-posts.wrap .t { white-space: normal; }

@media (max-width: 900px) {
    .vg-split { grid-template-columns: minmax(0, 1fr); }
    .vg-game-head { grid-template-columns: minmax(0, 1fr); }
    .vg-game-head .vg-card-art { min-height: 170px; }
}

/* ---------- 폰 (768px 이하) — baseWeb 설계_모바일·외부접속 3장 모양 ---------- */
@media (max-width: 768px) {
    :root { --vg-title-h: 52px; }
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .vg-titlebar { padding: 0 8px 0 4px; gap: 4px; }
    .vg-menu-toggle { display: block; }
    .vg-logo-sub, .vg-title-note { display: none; }
    .vg-nav { display: none; }
    .vg-main { padding: 14px 12px 22px; }

    .vg-drawer {
        display: block; position: fixed; z-index: 21; top: 0; bottom: 0;
        left: calc(var(--vg-drawer-w) * -1); width: var(--vg-drawer-w);
        overflow-y: auto; padding: 0 0 20px;
        background: #f4f6f8; border-right: 1px solid var(--vg-line);
        box-shadow: 5px 0 18px rgba(26, 45, 63, .16);
        transition: left .2s ease; visibility: hidden;
    }
    .vg-drawer.open { left: 0; visibility: visible; }
    .vg-backdrop { position: fixed; z-index: 20; inset: 0; background: rgba(26, 45, 63, .28); }
    .vg-drawer.open + .vg-backdrop { display: block; }
    .vg-drawer-head { display: flex; flex-direction: column; gap: 3px; padding: 18px 18px 10px; font-size: 14px; font-weight: 700; }
    .vg-drawer-head small { color: #98a5b0; font-size: 10px; font-weight: 400; letter-spacing: 1.4px; }
    .vg-drawer-group { padding: 10px 18px 6px; font-size: 12px; font-weight: 600; color: var(--vg-dim); }
    .vg-drawer a { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-left: 3px solid transparent; color: var(--vg-navy); font-size: 14px; text-decoration: none; }
    .vg-drawer a:hover { background: #e8eef4; border-left-color: var(--vg-active); }
    .vg-drawer a.active { background: #e2f0fa; border-left-color: var(--vg-accent); color: #176297; font-weight: 600; }

    .vg-bottom {
        display: flex; position: fixed; z-index: 15; left: 0; right: 0; bottom: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #fff; border-top: 1px solid var(--vg-line);
    }
    .vg-bottom a, .vg-bottom button { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; border: 0; background: none; color: #607788; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
    .vg-bottom .active { color: #176297; font-weight: 600; }

    .vg-hero { padding: 14px; gap: 12px; }
    .vg-hero-ico { flex-basis: 48px; width: 48px; height: 48px; border-radius: 14px; font-size: 24px; }
    .vg-hero h1 { font-size: 18px; }
    .vg-posts li { padding: 10px 0; }
    .vg-btn { min-height: 44px; font-size: 14px; }
    .vg-card-actions .vg-btn { flex: 1; }
    .vg-tile { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .vg-drawer { transition: none; }
}