/* 마이티 게임 방법 가이드 공통 스타일 — ko/en 두 페이지가 함께 사용한다.
   2026-09-20: 두 HTML 에 각각 인라인으로 중복돼 있던 것을 추출.
   번역이 필요한 규칙(::after content 등)만 각 HTML 에서 인라인 오버라이드한다. */
:root {
    --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-card: #1c2128;
    --bg-hover: #252c35; --border: #30363d;
    --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681;
    --gold: #d4a847; --green: #3fb950; --blue: #58a6ff; --purple: #ce93d8; --red: #f85149;
    --radius: 8px; --radius-lg: 12px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: radial-gradient(ellipse at 50% 0%, #161b2e 0%, #0d1117 55%, #08090d 100%);
    color: var(--text-primary); font-family: -apple-system, 'Noto Sans KR', sans-serif;
    min-height: 100vh; min-height: 100dvh; /* ★ iOS Safari 동적 툴바 대응 */
}
/* ── 상단 헤더 ── */
/* ★ 2026-07-17: 데스크톱도 모바일과 동일한 2행 구조 —
   1행: 🎓 마이티 게임 방법 가이드(좌) + ← 로비로(우) / 2행: 하위메뉴(전체폭) */
.hdr {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    padding: 14px 24px; border-bottom: 1px solid var(--border);
    /* 불투명 배경 — sticky 헤더 뒤로 스크롤 내용이 비쳐 보이지 않도록 (2026-07-18) */
    background: #0e1220; position: sticky; top: 0; z-index: 10;
}
.hdr .brand { order: 1; }
.hdr .back { order: 2; }
.hdr .brand { font-size: 1.15rem; font-weight: 800; color: var(--gold); letter-spacing: 0.3px; }
.hdr .brand span { font-size: 0.78rem; color: var(--text-secondary); font-weight: 500; margin-left: 8px; }
.hdr .back {
    font-size: 0.82rem; padding: 6px 14px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary);
    cursor: pointer; font-family: inherit;
}
.hdr .back:hover { background: var(--bg-hover); }

/* ── 2단 레이아웃 (내비는 화면 맨 좌측, 콘텐츠는 전체 폭 사용) ── */
.layout { display: flex; width: 100%; min-height: calc(100vh - 60px); }
.nav { width: 184px; flex-shrink: 0; padding: 16px 8px; border-right: 1px solid var(--border); }
.content { flex: 1; min-width: 0; padding: 14px 18px; }

/* ── 코스 내비 ── */
.lv-group { margin-bottom: 13px; }
.lv-label {
    font-size: 0.66rem; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.8px; text-transform: uppercase; margin: 0 6px 5px;
}
.course-btn {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 8px 9px; margin-bottom: 3px; border-radius: var(--radius);
    border: 1px solid transparent; background: transparent; color: var(--text-primary);
    cursor: pointer; font-family: inherit; font-size: 0.84rem; transition: 0.15s;
}
.course-btn:hover { background: var(--bg-card); }
.course-btn.active { background: var(--bg-card); border-color: var(--gold); }
.course-btn .ico { font-size: 1rem; flex-shrink: 0; }
.course-btn .txt { flex: 1; line-height: 1.25; }
.course-btn .txt small { display: block; font-size: 0.68rem; color: var(--text-secondary); margin-top: 1px; }
.course-btn.locked { color: var(--text-muted); cursor: default; }
.course-btn.locked:hover { background: transparent; }
.course-btn .lock { font-size: 0.75rem; color: var(--text-muted); }

/* ── 콘텐츠 패널 ── */
.panel { display: none; }
.panel.active { display: block; animation: fade 0.2s; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.panel .lead { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin-bottom: 18px; }
.frame-wrap {
    border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    background: #000; height: calc(100vh - 220px); min-height: 460px;
}
.frame-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── 시어터 모드 (2026-07-11 사용자 요청): 복기 열면 상단바·내비·제목 숨겨 공간 최대화 ── */
body.theater .hdr { display: none; }
body.theater .nav { display: none; }
body.theater .layout { min-height: 100vh; min-height: 100dvh; }
body.theater .content { padding: 0; }
body.theater .panel .lead { display: none; }
body.theater .frame-wrap { height: calc(100vh - 40px); min-height: 0; border: 0; border-radius: 0; }
body.theater .back { margin: 7px 0 3px 10px; }

.soon {
    border: 1px dashed var(--border); border-radius: var(--radius-lg);
    padding: 44px 26px; text-align: center; color: var(--text-secondary);
}
.soon .big { font-size: 2.4rem; margin-bottom: 12px; }
.soon h3 { color: var(--text-primary); font-size: 1.05rem; margin-bottom: 8px; }
.soon p { font-size: 0.86rem; line-height: 1.6; }

/* 명경기 목록 2열 — 좌: 최근순 / 우: 좋아요순(좋아요 있을 때만) */
.gal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.gal-cols.single { grid-template-columns: 1fr; max-width: 680px; }
.gal-col > h3 { font-size: 0.92rem; font-weight: 800; color: var(--gold); margin-bottom: 3px; }
.gal-col > .gal-sub { font-size: 0.74rem; color: var(--text-secondary); margin-bottom: 9px; }
.gal-col .gal-count { color: var(--text-muted); }
/* 페이지네이션 (10건 단위) */
.gal-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.gal-pg {
    padding: 5px 12px; border-radius: var(--radius); cursor: pointer; font-family: inherit;
    font-size: 0.76rem; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
}
.gal-pg:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: var(--bg-hover); }
.gal-pg:disabled { opacity: 0.35; cursor: default; }
.gal-pg-now { font-size: 0.76rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* 본 게임 표시 + '안 본 것만' 필터 (2026-07-17) */
.gal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.gal-progress { font-size: 0.78rem; color: var(--text-secondary); }
.gal-filter {
    padding: 5px 12px; border-radius: var(--radius); cursor: pointer; font-family: inherit;
    font-size: 0.76rem; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
}
.gal-filter:hover { border-color: var(--gold); color: var(--gold); }
.gal-filter.on { border-color: var(--green); color: var(--green); background: rgba(63,185,80,0.12); }
.gal-row.seen { opacity: 0.55; }
.gal-row.seen .t { font-weight: 400; }
.gal-row .seen-mark { color: var(--green); margin-right: 4px; font-weight: 700; }
.gal-empty { font-size: 0.76rem; color: var(--text-secondary); padding: 10px 2px; }
.gal-col .gal-list { display: flex; flex-direction: column; gap: 4px; }
/* 명경기 1건 = 한 줄: 일자 · 제목 · 올린이 · 좋아요/싫어요 */
.gal-row {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 0.78rem; transition: 0.15s;
}
.gal-row:hover { border-color: var(--gold); background: var(--bg-hover); }
/* 일자·올린이·좋아요는 위쪽 라인에 맞춰 고정, 제목은 남는 폭을 먹고 길면 여러 줄로 개행 */
.gal-row .d { color: var(--text-secondary); font-size: 0.7rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; line-height: 1.5; }
.gal-row .t { color: var(--text-primary); font-weight: 600; flex: 1 1 auto; min-width: 0;
    white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
.gal-row .a { color: var(--text-secondary); font-size: 0.7rem; flex: 0 0 auto; line-height: 1.5; }
.gal-row .v { color: var(--text-secondary); font-size: 0.7rem; flex: 0 0 auto; white-space: nowrap; line-height: 1.5; }
.gal-row .v b { font-weight: 400; }
.gal-row .v b.hot { color: var(--green); font-weight: 700; }
@media (max-width: 720px) { .gal-cols { grid-template-columns: 1fr; gap: 20px; } }

/* ── 규칙 아티클 ── */
.article { max-width: 760px; line-height: 1.7; }
.article h2 {
    font-size: 1.15rem; margin: 26px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid var(--border); color: var(--gold);
}
.article h2:first-child { margin-top: 4px; }
.article h3 { font-size: 0.98rem; margin: 18px 0 6px; color: var(--text-primary); }
.article p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 10px; }
.article ul { list-style: none; margin: 0 0 12px; padding: 0; }
.article li {
    color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 6px; padding-left: 16px; position: relative;
}
.article li::before { content: '·'; position: absolute; left: 4px; color: var(--gold); font-weight: 700; }
.article ol { margin: 0 0 12px 18px; }
.article ol li { padding-left: 4px; }
.article ol li::before { content: none; }
.article strong { color: var(--text-primary); font-weight: 700; }
.article .note {
    border-left: 3px solid var(--gold); background: rgba(212,168,71,0.08);
    padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0;
    font-size: 0.85rem; color: var(--text-secondary);
}
.article pre {
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 8px;
    padding: 12px 14px; margin: 10px 0; overflow-x: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--text-primary);
}
.article table {
    width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.84rem;
}
.article th, .article td {
    border: 1px solid var(--border); padding: 7px 10px; text-align: left; color: var(--text-secondary);
}
.article th { background: var(--bg-card); color: var(--text-primary); font-weight: 700; }
.article .cta-play {
    display: inline-block; margin-top: 18px; padding: 11px 20px; border-radius: 8px;
    background: rgba(212,168,71,0.15); border: 1px solid var(--gold); color: var(--gold);
    font-weight: 700; font-size: 0.92rem; cursor: pointer; font-family: inherit;
}
.article .cta-play:hover { background: rgba(212,168,71,0.25); }

/* ── 상단 메뉴바 (2026-07-13 재편: 제목 좌 · 메뉴 우) ── */
.hdr-right { display: contents; } /* 자식(topnav/back)이 .hdr의 직접 flex 아이템이 되도록 */
.topnav { display: flex; gap: 4px; flex-wrap: wrap; order: 3; flex-basis: 100%; }
.topnav-item {
    padding: 8px 16px; border-radius: var(--radius); border: 1px solid transparent;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    font-family: inherit; font-size: 0.92rem; font-weight: 700; transition: 0.15s;
}
.topnav-item:hover { background: var(--bg-card); color: var(--text-primary); }
.topnav-item.active { background: var(--bg-card); border-color: var(--gold); color: var(--gold); }
/* 홈 소개 */
.home-hero { margin-bottom: 22px; }
/* 권장 환경 안내 (2026-07-17) — 모바일에선 복기 뷰어가 불편함을 미리 알림 */
.howto-note {
    display: flex; align-items: flex-start; gap: 10px; max-width: 760px;
    border: 1px solid var(--gold); border-left-width: 3px;
    background: rgba(212,168,71,0.10); border-radius: 0 var(--radius) var(--radius) 0;
    padding: 12px 14px; margin-top: 14px;
}
.howto-note .sn-ico { font-size: 1.1rem; line-height: 1.5; flex-shrink: 0; }
.howto-note p { font-size: 0.86rem; line-height: 1.6; color: var(--text-primary); }
@media (max-width: 640px) {
    .howto-note { padding: 10px 12px; gap: 8px; }
    .howto-note p { font-size: 0.8rem; }
}
/* ★ 2026-09-17: 모바일 복기 차단 안내 모달 */
.do-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.72);
    display: flex; align-items: center; justify-content: center; padding: 22px; }
.do-box { background: #141a2e; border: 1px solid var(--gold); border-radius: 14px;
    padding: 24px 20px; max-width: 340px; width: 100%; text-align: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6); }
.do-ico { font-size: 2.2rem; line-height: 1; margin-bottom: 10px; }
.do-box h3 { color: var(--gold); font-size: 1rem; font-weight: 800; margin: 0 0 10px; }
.do-box p { font-size: 0.86rem; line-height: 1.7; color: var(--text-primary); margin: 0; }
.do-btn { margin-top: 18px; width: 100%; padding: 11px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--gold); background: rgba(212,168,71,0.16); color: var(--gold);
    font-size: 0.9rem; font-weight: 800; font-family: inherit; }
/* ★ 2026-09-17: '마이티란?' 소개 탭 */
.about-doc { max-width: 820px; }
.about-doc h3 { color: var(--gold); font-size: 1rem; font-weight: 800; margin: 20px 0 8px; }
.about-doc h3:first-child { margin-top: 0; }
.about-doc p { font-size: 0.9rem; line-height: 1.8; color: var(--text-primary); margin: 0 0 8px; }
.about-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 7px; }
.about-list li { font-size: 0.9rem; line-height: 1.7; color: var(--text-primary); }
.about-tag { margin-top: 20px !important; text-align: center; font-style: italic; opacity: 0.75; }
/* 시스템 사용법 — 게임 화면 스크린샷 */
.shot { margin: 12px 0 18px; }
.shot img { display: block; width: 100%; max-width: 360px; margin: 0 auto; border: 1px solid var(--border); border-radius: 12px; }
.shot.wide img { max-width: 100%; border-radius: 8px; }
.shot figcaption { margin-top: 8px; max-width: 520px; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 640px) {
    .about-doc p, .about-list li { font-size: 0.84rem; line-height: 1.7; }
    .about-doc h3 { font-size: 0.94rem; }
}
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 940px; }
.home-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 22px 20px; cursor: pointer; transition: 0.15s;
}
.home-card:hover { border-color: var(--gold); background: var(--bg-hover); transform: translateY(-2px); }
.home-card .hc-ico { font-size: 2rem; margin-bottom: 10px; }
.home-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); }
.home-card p { font-size: 0.86rem; color: var(--text-secondary); line-height: 1.6; }
/* 기초게임복기 12버튼 */
/* 기초게임복기 표 — 행=역할, 열=기루다 여부 */
.basic-table { width: 100%; max-width: 740px; border-collapse: collapse; margin: 14px 0; }
.basic-table th, .basic-table td { border: 1px solid var(--border); padding: 9px 10px; vertical-align: top; }
.basic-table thead th { background: var(--bg-card); color: var(--gold); font-weight: 800; font-size: 0.9rem; text-align: left; }
.basic-table thead th .bt-desc { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 400; color: var(--text-secondary); }
.basic-table tbody th { background: var(--bg-card); color: var(--text-primary); font-weight: 700; font-size: 0.88rem;
    text-align: left; white-space: nowrap; width: 1%; }
.basic-table td .game-btn-grid { grid-template-columns: 1fr; gap: 6px; max-width: none; }
/* 게임 1건 = [타이틀 버튼] + (관리자만) ✏️ 수정 */
.bt-item { display: flex; align-items: stretch; gap: 4px; }
.bt-item .game-btn { flex: 1 1 auto; min-width: 0; }
.bt-item .game-btn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bt-edit {
    flex: 0 0 auto; padding: 0 8px; border-radius: var(--radius); cursor: pointer; font-family: inherit;
    background: var(--bg-card); border: 1px solid var(--border); font-size: 0.8rem;
}
.bt-edit:hover { border-color: var(--gold); background: var(--bg-hover); }
.basic-table .bt-empty { font-size: 0.76rem; color: var(--text-secondary); }
/* 모바일 — 2열 표는 좌우로 넘치므로 한 열로 펼친다(역할 제목 → 기루다 라벨 → 게임). */
@media (max-width: 640px) {
    .basic-table, .basic-table tbody, .basic-table tr, .basic-table th, .basic-table td {
        display: block; width: auto; max-width: none; border: 0; padding: 0;
    }
    .basic-table thead { display: none; }
    .basic-table tr + tr { margin-top: 18px; }
    .basic-table tbody th {
        width: auto; font-size: 0.95rem; color: var(--gold); background: none; white-space: normal;
        padding: 0 0 2px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
    }
    .basic-table td { margin-bottom: 10px; }
    .basic-table td:empty { display: none; }
    .basic-table td::before {
        content: attr(data-gir); display: block; font-size: 0.76rem; font-weight: 700;
        color: var(--text-secondary); margin-bottom: 5px;
    }
    .basic-table .game-btn { padding: 8px 10px; }
    .basic-table .game-btn b { font-size: 0.84rem; white-space: normal; overflow: visible; line-height: 1.45; }
}
.game-btn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; max-width: 740px; }
.game-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 14px 16px; border-radius: var(--radius-lg); cursor: pointer; font-family: inherit;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); transition: 0.15s;
}
.game-btn:hover { border-color: var(--gold); background: var(--bg-hover); }
.game-btn b { font-size: 0.95rem; }

@media (max-width: 820px) {
    /* 2행 구조는 전역 — 모바일은 크기만 축소(하위메뉴 3개가 한 줄에 들어가도록) */
    .content { padding: 12px; }
    .hdr { padding: 14px 12px; }
    .hdr .back { padding: 5px 9px; font-size: 0.78rem; }
    .topnav { gap: 2px; }
    .topnav-item { padding: 5px 7px; font-size: 0.8rem; }
    .frame-wrap { height: 74vh; }
}
/* ===== 트릭 승자 맞히기 위젯 (.tq-) — 기초규칙 실습 ===== */
.trick-quiz{margin:20px 0 6px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 16px 18px;}
.tq-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px;flex-wrap:wrap;}
.tq-title{font-size:1rem;font-weight:800;color:var(--gold);}
.tq-title small{font-weight:500;color:var(--text-secondary);font-size:.76rem;margin-left:6px;}
.tq-meta{display:flex;gap:10px;align-items:center;font-size:.76rem;color:var(--text-secondary);}
.tq-meta b{color:var(--text-primary);font-variant-numeric:tabular-nums;}
.tq-level{padding:2px 9px;border:1px solid var(--border);border-radius:20px;background:var(--bg-card);font-size:.72rem;font-weight:700;color:var(--blue);}
.tq-urge{margin:10px 0 2px;padding:10px 12px;border:1px solid rgba(212,168,71,.45);border-left:3px solid var(--gold);border-radius:var(--radius);background:rgba(212,168,71,.08);font-size:.85rem;line-height:1.6;color:var(--text-secondary);}
.tq-urge b{color:var(--text-primary);}
.tq-table{position:relative;width:100%;max-width:360px;margin:14px auto 4px;aspect-ratio:1/1;}
.tq-felt{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#1a1f3a 0%,#0b0e1f 62%,#070910 100%);border:1px solid #2a3350;box-shadow:inset 0 2px 24px rgba(0,0,0,.6);}
.tq-felt::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 46%,rgba(255,215,0,.05) 0%,transparent 60%);}
.tq-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;z-index:1;}
.tq-giruda{font-size:3rem;line-height:1;opacity:.92;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));}
.tq-giruda.red{color:#ff5252;} .tq-giruda.blk{color:#eef2f7;}
.tq-giruda.nt{font-size:1.7rem;font-weight:800;color:#9e9e9e;letter-spacing:.04em;}
.tq-gcap{font-size:.58rem;letter-spacing:.12em;color:var(--text-muted);margin-top:3px;text-transform:uppercase;}
/* 마지막 트릭(조커 무력) 문제 — 기루다 문양 위에 표시 (실제 게임의 라운드 표시처럼) */
.tq-lasttrick{display:inline-block;font-size:.6rem;font-weight:800;color:#ff5252;background:rgba(244,67,54,.16);border:1px solid rgba(244,67,54,.5);border-radius:20px;padding:2px 9px;margin-bottom:5px;white-space:nowrap;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
.tq-jokercall{display:inline-block;font-size:.6rem;font-weight:800;color:#ce93d8;background:rgba(206,147,216,.16);border:1px solid rgba(206,147,216,.5);border-radius:20px;padding:2px 9px;margin-bottom:5px;white-space:nowrap;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));}
.tq-seat{position:absolute;width:24%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2;}
.tq-slabel{font-size:.62rem;color:var(--text-muted);display:flex;align-items:center;gap:4px;height:14px;}
.tq-lead{color:#0d1117;background:var(--gold);font-weight:800;border-radius:4px;padding:0 5px;font-size:.6rem;}
/* 카드 = 실제 게임 스프라이트(/card-assets.js) 재사용 → 게임과 동일한 카드 비주얼 */
.tq-card{width:100%;max-width:58px;aspect-ratio:86/116;position:relative;opacity:0;transform:scale(.7) translateY(6px);transition:opacity .22s,transform .22s;}
.tq-card.shown{opacity:1;transform:none;}
.tq-card .card{width:100%;height:100%;border-radius:5px;position:relative;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);transition:box-shadow .2s;}
.tq-card .card-sprite{width:100%;height:100%;background-size:1300% 400%;background-repeat:no-repeat;border-radius:4px;}
.tq-card .card-full-img{width:100%;height:100%;object-fit:contain;border-radius:4px;display:block;background:#fff;padding:1px;box-sizing:border-box;}
.tq-card .card-suit-badge{position:absolute;top:1px;right:2px;background:rgba(255,255,255,.85);border-radius:3px;padding:0 2px;font-size:.62rem;font-weight:900;line-height:1.1;z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none;}
.tq-card .card-suit-badge[data-suit="SPADE"],.tq-card .card-suit-badge[data-suit="CLUB"]{color:#111;}
.tq-card .card-suit-badge[data-suit="HEART"],.tq-card .card-suit-badge[data-suit="DIAMOND"]{color:#cc0000;}
.tq-card.clickable{cursor:pointer;}
.tq-card.clickable:hover{transform:translateY(-5px);}
.tq-card.clickable:hover .card{box-shadow:0 0 0 2px var(--gold),0 10px 18px rgba(0,0,0,.6);}
.tq-card.clickable:focus-visible{outline:none;}
.tq-card.clickable:focus-visible .card{outline:2px solid var(--gold);outline-offset:2px;}
.tq-card.win .card{outline:3px solid #00E676;outline-offset:-3px;box-shadow:0 0 20px rgba(0,230,118,.9),0 0 40px rgba(0,180,80,.6);}
.tq-card.bad{animation:tqshake .35s;}
.tq-card.bad .card{outline:3px solid var(--red);outline-offset:-3px;}
@keyframes tqshake{0%,100%{transform:translateX(0);}20%{transform:translateX(-6px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(4px);}}
.tq-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1rem;font-weight:900;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.9),-1px -1px 2px rgba(0,0,0,.95),1px 1px 2px rgba(0,0,0,.95);z-index:20;pointer-events:none;white-space:nowrap;}
.tq-cap{margin:14px 2px 0;min-height:56px;border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--radius);background:var(--bg-card);padding:11px 13px;font-size:.9rem;line-height:1.55;color:var(--text-secondary);}
.tq-cap .verdict{font-weight:800;margin-right:6px;}
.tq-cap.ok{border-left-color:var(--green);} .tq-cap.ok .verdict{color:var(--green);}
.tq-cap.no{border-left-color:var(--red);} .tq-cap.no .verdict{color:var(--red);}
.tq-cap.ask{border-left-color:var(--gold);color:var(--text-primary);}
.tq-cap b{color:var(--text-primary);}
.tq-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:10px;}
.tq-btns{display:flex;gap:8px;}
.tq-hint{font-size:.74rem;color:var(--text-muted);}
.tq-btn{font-family:inherit;font-size:.86rem;font-weight:700;padding:8px 16px;border-radius:var(--radius);border:1px solid var(--gold);background:rgba(212,168,71,.12);color:var(--gold);cursor:pointer;}
.tq-btn:hover{background:rgba(212,168,71,.22);}
.tq-btn:disabled{opacity:.4;cursor:default;}
.tq-btn.ghost{border-color:var(--border);background:var(--bg-card);color:var(--text-secondary);}
.tq-done{text-align:center;padding:20px 8px;}
.tq-done .big{font-size:2rem;font-weight:800;color:var(--gold);}
.tq-done p{color:var(--text-secondary);margin:6px 0 14px;}
@media (max-width:420px){ .tq-table{max-width:300px;} .tq-card{max-width:50px;} .tq-giruda{font-size:2.4rem;} }
@media (prefers-reduced-motion:reduce){ .tq-card{transition:none;} .tq-card.bad{animation:none;} }

/* ===== 진행 순서 스크린샷 스텝퍼 (.pw-) ===== */
.phone-walk{margin:18px 0 8px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;}
.pw-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap;}
.pw-title{font-size:1rem;font-weight:800;color:var(--gold);}
.pw-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px 14px;}
.pw-item{display:flex;flex-direction:column;gap:9px;}
.pw-phone{width:100%;max-width:264px;margin:0 auto;border:8px solid #12151f;border-radius:28px;background:#000;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);}
.pw-shot{position:relative;background:#0b0e17;min-height:120px;}
.pw-img{display:block;width:100%;height:auto;}
.pw-shot.empty{aspect-ratio:9/18;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);text-align:center;padding:16px;}
.pw-shot.empty::before{content:'📷';font-size:2rem;opacity:.6;}
.pw-shot.empty::after{content:'화면 준비 중';font-size:.8rem;letter-spacing:.02em;}
.pw-step{display:flex;gap:10px;align-items:flex-start;margin:0 2px;}
.pw-badge{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#0d1117;font-weight:800;font-size:.8rem;display:flex;align-items:center;justify-content:center;}
.pw-label{font-weight:700;color:var(--text-primary);font-size:.95rem;margin-bottom:2px;}
.pw-cap{font-size:.86rem;line-height:1.5;color:var(--text-secondary);}
@media (max-width:420px){ .pw-phone{max-width:216px;} }

/* ===== 기초전략 탭 (.st-) ===== */
.st-intro{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:15px 17px;margin:6px 0 20px;}
.st-intro p{margin:0;color:var(--text-secondary);line-height:1.65;}
.st-intro p.st-bridge{margin:13px 0 0;padding-top:11px;border-top:1px dashed var(--border);color:var(--text-primary);font-size:.9rem;}
.st-3q{display:flex;gap:10px;margin-top:13px;flex-wrap:wrap;}
.st-q{flex:1;min-width:150px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;line-height:1.5;}
.st-q .n{display:inline-block;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#0d1117;font-weight:800;font-size:.72rem;text-align:center;line-height:20px;margin-right:6px;}
.st-q b{color:var(--text-primary);font-size:.92rem;}
.st-q span{color:var(--text-secondary);font-size:.82rem;}
/* 용어 */
.st-terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:12px 0 8px;}
.st-term{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:11px 12px;display:flex;gap:11px;align-items:flex-start;}
.st-ticon{flex:none;width:34px;}
.st-ticon .card{width:34px;height:46px;border-radius:4px;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4);position:relative;}
.st-ticon .card-sprite{width:100%;height:100%;background-size:1300% 400%;background-repeat:no-repeat;border-radius:4px;}
.st-ticon .card-suit-badge{position:absolute;top:1px;right:2px;background:rgba(255,255,255,.85);border-radius:2px;padding:0 1px;font-size:.5rem;font-weight:900;z-index:2;}
.st-ticon .card-suit-badge[data-suit="SPADE"],.st-ticon .card-suit-badge[data-suit="CLUB"]{color:#111;}
.st-ticon .card-suit-badge[data-suit="HEART"],.st-ticon .card-suit-badge[data-suit="DIAMOND"]{color:#cc0000;}
.st-tname{font-weight:800;color:var(--text-primary);font-size:.9rem;}
.st-talias{color:var(--text-muted);font-weight:500;font-size:.75rem;}
.st-tdesc{color:var(--text-secondary);font-size:.82rem;line-height:1.45;margin-top:2px;}
.st-ttag{display:inline-block;margin-top:6px;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:20px;}
.st-ttag.gov{color:var(--gold);border:1px solid rgba(212,168,71,.5);background:rgba(212,168,71,.1);}
.st-ttag.opp{color:var(--red);border:1px solid rgba(248,81,73,.5);background:rgba(248,81,73,.1);}
/* 전략맵 */
.st-mapwrap{margin:12px 0 6px;overflow-x:auto;}
.st-next{margin:22px 0 6px;padding:16px 17px;background:var(--bg-secondary);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius-lg);}
.st-next-t{font-weight:800;color:var(--gold);font-size:1rem;margin-bottom:6px;}
.st-next p{margin:0 0 12px;color:var(--text-secondary);line-height:1.65;font-size:.9rem;}
.st-next-btn{font-family:inherit;font-size:.92rem;font-weight:700;padding:10px 16px;border-radius:var(--radius);cursor:pointer;background:var(--gold);color:#0d1117;border:none;}
.st-next-btn:hover{filter:brightness(1.08);}
.st-note{font-size:.76rem;color:var(--text-muted);margin:2px 0 8px;}
.st-grid{display:grid;grid-template-columns:96px repeat(3,minmax(150px,1fr));gap:6px;min-width:640px;}
.st-rowlabel{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:.76rem;color:var(--text-secondary);padding:6px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);}
.st-colhead{font-weight:800;text-align:center;padding:8px;border-radius:var(--radius);font-size:.9rem;border:1px solid var(--border);}
.st-colhead.master{color:var(--gold);background:rgba(212,168,71,.08);}
.st-colhead.friend{color:var(--blue);background:rgba(88,166,255,.08);}
.st-colhead.opp{color:var(--red);background:rgba(248,81,73,.08);}
.st-cell{background:var(--bg-card);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:7px;}
.st-cell.master{border-left-color:var(--gold);}
.st-cell.friend{border-left-color:var(--blue);}
.st-cell.opp{border-left-color:var(--red);}
.st-cell ul{margin:0;padding:0;list-style:none;}
.st-strat{font-size:.77rem;line-height:1.4;color:var(--text-secondary);margin:2px 0;padding:5px 7px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;gap:6px;cursor:pointer;transition:background .12s;}
.st-strat:hover{background:var(--bg-hover);}
.st-strat.has{color:var(--text-primary);font-weight:500;}
.st-strat.sel{background:rgba(212,168,71,.14);box-shadow:inset 0 0 0 1px rgba(212,168,71,.55);}
.st-go{color:var(--green);font-size:.64rem;font-weight:800;flex:none;}
/* MECE 전략맵 (그룹→열→카드) */
.st-group{margin:16px 0;}
.st-ghead{font-weight:800;color:var(--text-primary);font-size:.98rem;margin:0 0 9px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.st-gsub{font-weight:500;font-size:.77rem;color:var(--text-muted);}
.st-gcols{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.st-gcol{min-width:0;}
@media (max-width:600px){ .st-gcols{grid-template-columns:1fr !important;} }
.st-colhead{font-weight:800;text-align:center;padding:7px;border-radius:var(--radius);font-size:.86rem;border:1px solid var(--border);margin-bottom:7px;}
.st-colhead.master{color:var(--gold);background:rgba(212,168,71,.08);}
.st-colhead.friend{color:#56cfe1;background:rgba(86,207,225,.08);}
.st-colhead.opp{color:var(--red);background:rgba(248,81,73,.08);}
.st-colhead.win{color:var(--green);background:rgba(63,185,80,.08);}
.st-colhead.lose{color:var(--blue);background:rgba(88,166,255,.08);}
.st-colhead.common{color:var(--purple);background:rgba(206,147,216,.08);}
.st-card{background:var(--bg-card);border:1px solid var(--border);border-left-width:3px;border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;}
.st-cardname{font-weight:800;color:var(--text-primary);font-size:.92rem;}
.st-card .st-desc{margin:7px 0 0;padding:9px 11px;font-size:.85rem;line-height:1.6;}
.st-card.master{border-left-color:var(--gold);}
.st-card.friend{border-left-color:#56cfe1;}
.st-card.opp{border-left-color:var(--red);}
.st-card.win{border-left-color:var(--green);}
.st-card.lose{border-left-color:var(--blue);}
.st-card.common{border-left-color:var(--purple);}
.st-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);}
.st-cardtop{display:flex;justify-content:space-between;align-items:center;gap:6px;}
.st-cardtop b{color:var(--text-primary);font-size:.9rem;}
.st-card50{font-size:.8rem;line-height:1.45;color:var(--text-secondary);margin-top:4px;}
.st-cardbody{display:none;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
.st-card.open{background:var(--bg-hover);border-color:var(--gold);}
.st-card.open .st-cardbody{display:block;}
.st-cardbody .st-drole{display:inline-block;margin-bottom:8px;}
.st-cardbody .st-desc{margin:0 0 10px;}
.st-cardbody .st-playbtn{width:100%;}
.st-drole.win{color:var(--green);border:1px solid rgba(63,185,80,.5);}
.st-drole.lose{color:var(--blue);border:1px solid rgba(88,166,255,.5);}
.st-drole.common{color:var(--purple);border:1px solid rgba(206,147,216,.5);}
@media (max-width:560px){ .st-gcols{grid-template-columns:1fr;} }
.st-desc{background:var(--bg-card);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:var(--radius);padding:11px 13px;font-size:.9rem;line-height:1.65;color:var(--text-secondary);margin:6px 0 12px;}
.st-desc b{color:var(--text-primary);}
.st-exlabel{font-size:.78rem;font-weight:800;color:var(--gold);margin:10px 0 6px;letter-spacing:.02em;}
.st-plead{font-size:.85rem;color:var(--text-secondary);line-height:1.55;margin:2px 0 11px;}
.st-cinehead{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:7px 11px;margin:0 10px 5px;}
.st-cinetop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.st-cinetop b{color:var(--text-primary);font-size:.92rem;}
.st-cinedesc{font-size:.78rem;line-height:1.45;color:var(--text-secondary);margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
body.theater .st-cine .frame-wrap{height:calc(100dvh - 112px);}
body.theater .st-cine .back{margin:5px 0 4px 10px;}
/* 상세 데모 */
.st-detail{margin-top:16px;scroll-margin-top:12px;}
.st-demo{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;}
.st-dhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.st-drole{font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:20px;}
.st-drole.master{color:var(--gold);border:1px solid rgba(212,168,71,.5);}
.st-drole.friend{color:var(--blue);border:1px solid rgba(88,166,255,.5);}
.st-drole.opp{color:var(--red);border:1px solid rgba(248,81,73,.5);}
.st-dgir{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text-secondary);border:1px solid var(--border);border-radius:20px;padding:1px 9px;}
.st-dgir .sym{font-size:1rem;} .st-dgir .sym.red{color:#ff5252;} .st-dgir .sym.blk{color:#eef2f7;}
.st-dtitle{font-weight:800;color:var(--text-primary);font-size:1rem;}
.st-dsitu{color:var(--text-secondary);font-size:.85rem;margin:3px 0 8px;line-height:1.5;}
.st-trick{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin:8px 0;}
.st-trick .lab{font-size:.72rem;color:var(--text-muted);margin-bottom:6px;}
.st-cardrow{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;}
.st-pc{width:46px;} .st-pc .st-pcl{font-size:.6rem;color:var(--text-muted);text-align:center;margin-bottom:2px;height:12px;}
.st-pc .card{width:100%;aspect-ratio:86/116;border-radius:5px;background:#fff;box-shadow:0 3px 7px rgba(0,0,0,.5);position:relative;}
.st-pc .card-sprite,.st-hc .card-sprite{width:100%;height:100%;background-size:1300% 400%;background-repeat:no-repeat;border-radius:4px;}
.st-pc .card-suit-badge,.st-hc .card-suit-badge{position:absolute;top:1px;right:2px;background:rgba(255,255,255,.85);border-radius:2px;padding:0 2px;font-size:.56rem;font-weight:900;z-index:2;}
.st-pc .card-suit-badge[data-suit="SPADE"],.st-pc .card-suit-badge[data-suit="CLUB"],.st-hc .card-suit-badge[data-suit="SPADE"],.st-hc .card-suit-badge[data-suit="CLUB"]{color:#111;}
.st-pc .card-suit-badge[data-suit="HEART"],.st-pc .card-suit-badge[data-suit="DIAMOND"],.st-hc .card-suit-badge[data-suit="HEART"],.st-hc .card-suit-badge[data-suit="DIAMOND"]{color:#cc0000;}
.st-tnote{font-size:.76rem;color:var(--gold);margin-top:7px;}
.st-ask{font-weight:700;color:var(--text-primary);font-size:.92rem;margin:11px 0 7px;line-height:1.5;}
.st-hand{display:flex;gap:8px;flex-wrap:wrap;}
.st-hc{width:54px;cursor:pointer;transition:transform .12s;position:relative;}
.st-hc:hover{transform:translateY(-5px);}
.st-hc .card{width:100%;aspect-ratio:86/116;border-radius:5px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.5);position:relative;transition:box-shadow .15s;}
.st-hc:hover .card{box-shadow:0 0 0 2px var(--gold),0 8px 16px rgba(0,0,0,.6);}
.st-hc:focus-visible{outline:none;} .st-hc:focus-visible .card{outline:2px solid var(--gold);outline-offset:2px;}
.st-hc.good .card{outline:3px solid #00E676;outline-offset:-3px;box-shadow:0 0 18px rgba(0,230,118,.85);}
.st-hc.bad .card{outline:3px solid var(--red);outline-offset:-3px;animation:tqshake .35s;}
.st-pick{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.82rem;font-weight:900;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.9),1px 1px 2px rgba(0,0,0,.95);z-index:5;pointer-events:none;white-space:nowrap;}
.st-dcap{margin-top:12px;border:1px solid var(--border);border-left:3px solid var(--blue);border-radius:var(--radius);background:var(--bg-card);padding:11px 13px;font-size:.88rem;line-height:1.6;color:var(--text-secondary);min-height:44px;}
.st-dcap.ok{border-left-color:var(--green);} .st-dcap.no{border-left-color:var(--red);}
.st-dcap .v{font-weight:800;margin-right:6px;} .st-dcap.ok .v{color:var(--green);} .st-dcap.no .v{color:var(--red);}
.st-dcap b{color:var(--text-primary);}
.st-dfoot{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.st-soon{color:var(--text-muted);font-size:.86rem;padding:14px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);line-height:1.6;}
@media (max-width:520px){ .st-terms{grid-template-columns:1fr;} }

/* ── 기초게임복기 카드 (2026-09-20) ────────────────────────────────────
   기존: 역할×기루다 6칸 표 + 제목만 적힌 버튼.
   노기루다가 역할당 1개뿐이라 오른쪽 컬럼이 늘 비어 보였고,
   API 가 주는 공약·기루다·시청여부를 화면에서 버리고 있었다.
   → 역할별 섹션 + 카드 그리드. 기루다는 컬럼이 아니라 카드 안 뱃지로. */
.bg-role { margin-top: 26px; }
.bg-role:first-child { margin-top: 4px; }
.bg-role-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.bg-role-title { font-size: 1rem; font-weight: 800; color: var(--gold); letter-spacing: .3px; }
.bg-role-desc  { font-size: .78rem; color: var(--text-secondary); }
.bg-role-count { margin-left: auto; font-size: .74rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.bg-item { position: relative; }

.bg-card {
    display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid var(--border);
    border-left: 3px solid var(--gir-color, #8b949e);
    border-radius: 10px; padding: 11px 12px 12px;
    transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease;
}
.bg-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212,168,71,.45); border-left-color: var(--gir-color, #8b949e);
    box-shadow: 0 6px 18px rgba(0,0,0,.42);
}
.bg-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.bg-gir { font-size: 1.05rem; line-height: 1; font-weight: 700; color: var(--gir-color, #e6edf3); }
.bg-gir.nt {
    font-size: .7rem; font-weight: 800; letter-spacing: .5px; color: #8b949e;
    border: 1px solid rgba(139,148,158,.45); border-radius: 4px; padding: 2px 5px;
}
.bg-bid { font-size: .78rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.bg-no  { margin-left: auto; font-size: .72rem; color: rgba(139,148,158,.65); font-variant-numeric: tabular-nums; }
.bg-title { font-size: .95rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.bg-sub   { margin-top: 3px; font-size: .77rem; color: var(--text-secondary); line-height: 1.45; }

/* 기루다 무늬 색 — 하트·다이아는 붉게, 스페이드·클럽은 밝게 */
.bg-card[data-gir="HEART"], .bg-card[data-gir="DIAMOND"] { --gir-color: #e5534b; }
.bg-card[data-gir="SPADE"], .bg-card[data-gir="CLUB"]    { --gir-color: #c9d1d9; }
.bg-card[data-gir="NT"]                                   { --gir-color: #6e7681; }

/* 이미 본 게임 — 진도 파악용 */
.bg-card.viewed { opacity: .5; }
.bg-card.viewed .bg-title::after { content: ' ✓'; color: #81C784; font-size: .82rem; }

.bg-edit {
    position: absolute; top: 7px; right: 7px; z-index: 2;
    background: rgba(0,0,0,.35); border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 5px; font-size: .72rem; cursor: pointer; line-height: 1; opacity: .5;
}
.bg-edit:hover { opacity: 1; }
.bg-empty { font-size: .8rem; color: var(--text-secondary); padding: 14px 2px; }

@media (max-width: 480px) {
    .bg-grid { grid-template-columns: 1fr; }
    .bg-role-count { margin-left: 0; }
}

/* ── 명경기 복기 카드 (2026-09-20) ─────────────────────────────────────
   기존: 날짜·제목·추천인·좋아요만 있는 가로줄 → 관리자 표처럼 보였고
   '왜 명경기인지' 를 알 수 없었다. 서버가 brief(기루다·공약·성패·런/백런/배판)를
   내려주도록 하고, 카드에서 그걸 보여준다. */
.gal-col .gal-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 9px;
}
.gal-card {
    position: relative; cursor: pointer;
    background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    border: 1px solid var(--border);
    border-left: 3px solid var(--gir-color, #8b949e);
    border-radius: 10px; padding: 10px 11px 11px;
    transition: transform .13s ease, border-color .13s ease, box-shadow .13s ease;
}
.gal-card:hover {
    transform: translateY(-2px);
    border-color: rgba(212,168,71,.45);
    box-shadow: 0 6px 18px rgba(0,0,0,.42);
}
.gal-ctop { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; flex-wrap: wrap; }
.gal-gir { font-size: 1.02rem; line-height: 1; font-weight: 700; color: var(--gir-color, #e6edf3); }
.gal-gir.nt {
    font-size: .68rem; font-weight: 800; letter-spacing: .5px; color: #8b949e;
    border: 1px solid rgba(139,148,158,.45); border-radius: 4px; padding: 2px 5px;
}
.gal-bid { font-size: .76rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
/* 런·백런·배판 — 이 판이 왜 볼 만한지를 한 단어로 */
.gal-flag {
    margin-left: auto; font-size: .68rem; font-weight: 800; letter-spacing: .3px;
    border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.gal-flag.run  { color: #ffd479; background: rgba(212,168,71,.16); border: 1px solid rgba(212,168,71,.45); }
.gal-flag.back { color: #e5a0ff; background: rgba(190,120,255,.14); border: 1px solid rgba(190,120,255,.42); }
.gal-flag.dbl  { color: #ff9d7a; background: rgba(255,120,60,.13);  border: 1px solid rgba(255,120,60,.40); }
.gal-flag + .gal-flag { margin-left: 4px; }

.gal-ctag  { font-size: .93rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.gal-cmeta { margin-top: 4px; font-size: .72rem; color: var(--text-secondary); line-height: 1.5; }
.gal-clike { margin-top: 6px; font-size: .72rem; color: #ff8a9a; font-variant-numeric: tabular-nums; }

.gal-card[data-gir="HEART"], .gal-card[data-gir="DIAMOND"] { --gir-color: #e5534b; }
.gal-card[data-gir="SPADE"], .gal-card[data-gir="CLUB"]    { --gir-color: #c9d1d9; }
.gal-card[data-gir="NT"]                                    { --gir-color: #6e7681; }

.gal-card.seen { opacity: .5; }
.gal-card.seen .gal-ctag::after { content: ' ✓'; color: #81C784; font-size: .8rem; }

@media (max-width: 720px) {
    .gal-col .gal-list { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   전체 톤 다듬기 (2026-09-20) — 헤더·탭·여백 리듬·로딩
   기존은 얇은 줄 하나짜리 헤더 + 평범한 텍스트 탭이라 '문서' 처럼 보였다.
   구조는 그대로 두고 표면만 손본다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 헤더 — 깊이와 브랜드감 ── */
.hdr {
    background: linear-gradient(180deg, #141a33 0%, #0e1220 100%);
    border-bottom: 1px solid rgba(212, 168, 71, .20);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}
/* 하단에 은은한 골드 라인 — 헤더와 본문을 분리해 준다 */
.hdr::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 71, .5), transparent);
    pointer-events: none;
}
.hdr .brand { text-shadow: 0 0 18px rgba(212, 168, 71, .28); }

/* ── 탭 — pill 형태 + 활성 강조 ── */
.topnav { gap: 5px; }
.topnav-item {
    padding: 7px 15px; border-radius: 999px;
    border: 1px solid transparent; transition: .16s ease;
}
.topnav-item:hover {
    background: rgba(255, 255, 255, .06); color: var(--text-primary);
    border-color: rgba(255, 255, 255, .10);
}
.topnav-item.active {
    background: linear-gradient(135deg, rgba(212, 168, 71, .24), rgba(212, 168, 71, .09));
    border-color: rgba(212, 168, 71, .6); color: #ffd97a;
    box-shadow: 0 2px 12px rgba(212, 168, 71, .18);
}

/* ── 여백 리듬 — 큰 제목 앞에 숨 쉴 자리 ── */
.article h2 { margin-top: 38px; padding-bottom: 8px; letter-spacing: .2px; }
.article h2:first-child { margin-top: 6px; }
.article h3 { margin-top: 24px; }
.article h3:first-child { margin-top: 4px; }
.panel .lead { font-size: .94rem; line-height: 1.7; margin-bottom: 22px; }

/* ── 로딩 스켈레톤 — 빈 화면 대신 자리를 먼저 잡아 준다 ── */
.hw-skel { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 9px; }
.hw-skel-card {
    height: 92px; border-radius: 10px; border: 1px solid var(--border);
    background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 70%);
    background-size: 220% 100%; animation: hwShimmer 1.25s linear infinite;
}
@keyframes hwShimmer { from { background-position: 180% 0; } to { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) {
    .hw-skel-card { animation: none; }
    .bg-card, .gal-card { transition: none; }
    .bg-card:hover, .gal-card:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   텍스트 강조 체계 (2026-09-20)
   이전에는 같은 <strong> 이 위치에 따라 흰색·골드·초록으로, <b> 는 회색으로도
   그려져 "굵으면 중요하다" 를 학습할 수 없었다. 두 단계로 고정한다.

     본문 강조  <strong>        흰색 700 — 어디에 있든 항상 같은 모양
     라벨·구조  <strong class="label">  골드 700 — 항목 제목·표의 항목명 전용
     인용·예시  <em>            칩 형태 — 강조가 아니라 'UI 문구 인용' 임을 표시

   🔴 컨텍스트별 색 덮어쓰기 규칙을 새로 만들지 말 것. 골드는 라벨 전용이다.
   ══════════════════════════════════════════════════════════════════════ */
.panel strong, .panel b { color: var(--text-primary); font-weight: 700; }

/* 라벨 — 구조를 나타낼 때만 골드 */
.panel .label,
.panel td > strong:only-child { color: var(--gold); font-weight: 700; }

/* 인용·예시 — 강조가 아니라 'UI 에 이렇게 쓰여 있다' 는 표시 */
.panel em {
    font-style: normal; color: var(--text-primary);
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px; padding: 1px 5px; font-size: .94em;
}

/* ══════════════════════════════════════════════════════════════════════
   기초규칙 가독성 (2026-09-20)
   내용은 이미 목록으로 잘 쪼개져 있었지만(목록 16개), 제목이 작고 항목 간격이
   촘촘해 전체가 한 덩어리로 보였다. 구조를 바꾸지 않고 위계와 호흡만 준다.
   ══════════════════════════════════════════════════════════════════════ */

/* 대제목 — 얇은 밑줄 대신 왼쪽 골드 악센트. 섹션의 시작이 분명해진다 */
.article h2 {
    font-size: 1.22rem; font-weight: 800;
    border-bottom: none; padding: 4px 0 4px 13px;
    border-left: 3px solid var(--gold);
    background: linear-gradient(90deg, rgba(212, 168, 71, .10), transparent 62%);
    border-radius: 0 6px 6px 0;
}

/* 중제목 — 앞에 작은 마커를 붙여 목록 항목과 구분 */
.article h3 {
    font-weight: 700; color: var(--text-primary);
    padding-left: 11px; position: relative;
}
.article h3::before {
    /* 줄 높이 기준 수직 중앙 — em 으로 잡으면 글자 위로 떠 보인다 */
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: .75;
}

/* 목록 — 항목 사이를 벌리고 행간을 키워 읽는 속도를 늦춘다 */
.article li { margin-bottom: 9px; line-height: 1.68; padding-left: 18px; }
.article li:last-child { margin-bottom: 0; }
.article ul, .article ol { margin-bottom: 16px; }
.article li::before { left: 5px; top: -.02em; }

/* 문단 — 본문 행간도 함께 */
.article p { line-height: 1.75; margin-bottom: 12px; }

/* 강조 박스 — 본문과 확실히 떨어뜨린다 */
.article .note { margin: 16px 0; padding: 12px 15px; line-height: 1.7; }

/* 표 — 셀 여백을 키워 숨통을 튼다 */
.article th, .article td { padding: 9px 11px; line-height: 1.6; }