/* ★ 2026-10-21 (사용자 요청): 아이폰·안드로이드 같은 글꼴 — Pretendard(쓰는 글자만 내려받음) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
/* 마이티 게임 방법 가이드 공통 스타일 — 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: 'Pretendard Variable', 'Pretendard', -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);
    word-break: keep-all; overflow-wrap: break-word;   /* 한글을 글자 중간이 아니라 단어 사이에서 줄바꿈 */
}
/* 2열 표(항목명 | 설명)의 첫 칸이 긴 설명 칸에 밀려 좁아지지 않도록 최소 폭 확보 */
.article td:first-child:nth-last-child(2), .article th:first-child:nth-last-child(2) { min-width: 7em; }
/* 태블릿·데스크탑은 폭이 넉넉하니 첫 칸을 한 줄로 */
@media (min-width: 641px) {
    .article td:first-child:nth-last-child(2), .article th:first-child:nth-last-child(2) { white-space: nowrap; }
}
.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; }
/* ★ 2026-10-02 (사용자 신고, 영문 가이드): 비활성 탭이 배경·테두리 투명이라 글자로만 보여
   클릭할 메뉴로 인식되지 않았다(폰은 hover 도 없음) → 옅은 배경·테두리로 버튼 모양을 준다. */
.topnav-item {
    padding: 7px 15px; border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #d5dbe7;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
    transition: .16s ease;
}
.topnav-item:hover {
    background: rgba(255, 255, 255, .10); color: #fff;
    border-color: rgba(212, 168, 71, .45);
}
.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; }
/* 폰은 좌우 여백을 줄여 좁은 칸의 글자 폭을 확보 (2026-10-01 사용자 요청: 첫 칸이 여러 줄로 쪼개짐) */
@media (max-width: 640px) { .article th, .article td { padding: 8px 7px; } }

/* ── 모바일 상단바 압축 (2026-09-22 사용자 요청) ──
   제목·English·로비로·메뉴 2줄로 4줄(180px, 화면의 27%)을 차지하며 늘 떠 있어 본문이 답답했다.
   → 1행: ← 로비로 · 제목(말줄임) · Eng / 2행: 메뉴 3칸×2줄(전부 한눈에). 내릴 땐 숨기고 올리면 다시 보인다(howto-hdr.js). */
@media (max-width: 820px) {
    .hdr { padding: 8px 12px 6px; gap: 6px; flex-wrap: wrap; transition: transform .22s ease; }
    .hdr .brand { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hdr .back { flex: 0 0 auto; padding: 4px 9px; font-size: .74rem; }
    .topnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
    /* ★ 2026-10-02 (사용자 신고, 영문 가이드): 영어 메뉴명이 길어 nowrap 칸을 넘쳐 옆 칸과 겹쳤다
       (360px 에서 1칸, 기기 글꼴 130% 면 5칸) → 칸 안 2줄 허용 + 세로 가운데 정렬. */
    .topnav-item {
        min-width: 0; white-space: normal; line-height: 1.15; min-height: 36px;
        padding: 4px 4px; font-size: .78rem; text-align: center; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
    }
    .hdr.hdr-hide { transform: translateY(-100%); }
}
/* ← 로비로 는 맨 왼쪽(앱의 뒤로가기 자리), 제목이 가운데를 채우고 언어 전환은 오른쪽 — 전 폭 공통 */
.hdr .home-back { order: 0; }
.hdr .brand { flex: 1 1 0; min-width: 0; }   /* basis 0 — 좁은 폰에서 버튼을 밀어내지 않고 제목이 먼저 말줄임 */

/* ── 모바일 가이드 홈을 스크롤 없이 한 화면에 (2026-09-22 사용자 요청) ──
   카드 4장이 한 줄에 하나씩(각 ~200px) 쌓여 1,170px(화면 1.8개)였다 → 2×2 격자 + 글씨 축소.
   '데스크탑 권장' 안내는 복기를 처음 열 때 한 번 뜨는 안내와 같은 내용이라 모바일 홈에선 숨김. */
@media (max-width: 820px) {
    .panel[data-panel="home"] .home-hero { margin-bottom: 10px; }
    .panel[data-panel="home"] .lead { font-size: .8rem; line-height: 1.55; margin-bottom: 0; }
    .panel[data-panel="home"] .howto-note { display: none; }
    .home-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .home-card { padding: 10px 10px 11px; }
    .home-card .hc-ico { font-size: 1.35rem; margin-bottom: 3px; }
    .home-card h3 { font-size: .9rem; margin-bottom: 4px; }
    .home-card p { font-size: .7rem; line-height: 1.45; }
}

/* ── 모바일 하단 탭바 (2026-09-22 사용자 요청) ──
   로비의 가이드 탭은 이 페이지로 이동하는데, 탭바가 로비에만 있어 여기선 사라져 보였다.
   로비와 같은 모양으로 붙이고 가이드 칸을 선택 상태로. 헤더의 '← 로비로'는 탭바 '홈'과 겹쳐 모바일에선 숨김.
   복기 뷰어(theater)는 화면 전체를 써야 해서 탭바를 숨긴다. */
.howto-tabbar { display: none; }
@media (max-width: 820px) {
    .howto-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: rgba(9, 12, 28, .96);
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 215, 0, .18);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .45);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .howto-tabbar a {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
        color: rgba(255, 255, 255, .45); text-decoration: none; padding: 4px 0 2px;
        -webkit-tap-highlight-color: transparent;
    }
    .howto-tabbar a i    { font-style: normal; font-size: 1.2rem; line-height: 1; filter: grayscale(.85) opacity(.7); }
    .howto-tabbar a span { font-size: clamp(.58rem, 2.9vw, .66rem); font-weight: 700; white-space: nowrap; }
    .howto-tabbar a.on   { color: #ffd97a; }
    .howto-tabbar a.on i { filter: none; }
    body:not(.theater) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    body.theater .howto-tabbar { display: none; }
    .hdr .home-back { display: none; }
}

/* ★ 2026-09-30 (사용자 신고): 복기(theater) 보는 중 화면을 아래로 쓸면 브라우저가 당겨서 새로고침를 해
   명경기·기초게임 목록으로 튕겼다. 복기 중에만 막는다(새로고침돼도 주소로 같은 게임을 다시 연다). */
html:has(body.theater), body.theater { overscroll-behavior-y: none; }

/* ★ 2026-10-05: 게임 중 가이드 오버레이(?embed=1) — 로비로 나가는 링크는 숨겨 iframe 안에서 로비가 열리지 않게 */
html.embed .home-back, html.embed .howto-tabbar { display: none !important; }
html.embed body { padding-bottom: 0 !important; }
/* ★ 2026-10-05: 게임 중 ? 링크 등 섹션 안 앵커로 바로 갈 때 제목이 고정 헤더(데스크탑 ~106px)에 가리지 않게.
   폰은 내려가는 스크롤에 헤더가 숨으므로 여백만 조금. */
#rules-bidding, #rules-friend, #strategy-terms, #strategy-map { scroll-margin-top: 10px; }
@media (min-width: 821px) { #rules-bidding, #rules-friend, #strategy-terms, #strategy-map { scroll-margin-top: 118px; } }

/* 트릭 승자 맞히기 — 큰 화면 연습 창 열기 버튼·오버레이 */
.tq-open{display:block;width:100%;margin:10px 0 12px;padding:12px 16px;border:0;border-radius:12px;background:linear-gradient(135deg,#e8c46a,#d4a843);color:#1d1400;font-weight:900;font-size:1rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tq-open:hover{filter:brightness(1.06)}
.tqx{position:fixed;inset:0;z-index:10000;background:rgba(3,6,16,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.tqx-box{position:relative;width:min(820px,100%);height:min(900px,100%);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#0b1022}
.tqx-box iframe{width:100%;height:100%;border:0;display:block}
.tqx-x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer;z-index:2}
@media (max-width:600px){.tqx{padding:0}.tqx-box{width:100%;height:100%;border-radius:0}}
.tq-frame{height:clamp(540px,78vh,680px);margin-top:10px;border-radius:16px;overflow:hidden;border:1px solid rgba(232,196,106,.3);background:#0b1022;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tq-frame iframe{width:100%;height:100%;border:0;display:block}

/* ★ 2026-10-16: 기초규칙·기초전략 영상 — 첫 화면 2칸 + 각 탭 맨 위 1칸. 누르면 그 자리에서 재생 */
.hv-section { margin: 0 0 18px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(212,168,71,0.14), rgba(88,166,255,0.08)); border: 1px solid rgba(212,168,71,0.55); }
.hv-head { margin: 0 0 10px; font-size: 1.05rem; font-weight: 800; color: var(--gold); }
.hv-head span { font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); }
.hv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 860px; }
.hv-card { cursor: pointer; border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); transition: transform .12s, border-color .12s; }
.hv-card:hover, .hv-card:focus-visible { border-color: var(--gold); transform: translateY(-1px); outline: none; }
.hv-thumb { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
.hv-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 44px; border-radius: 12px; background: rgba(230,33,23,0.92); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
.hv-meta { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px 11px; }
.hv-ep { font-size: 0.78rem; font-weight: 800; color: var(--gold); }
.hv-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.hv-inline { max-width: 560px; margin: 0 0 16px; border-color: rgba(212,168,71,0.55); }

/* ── 가이드 첫 화면 데스크탑 개편 (2026-10-23 사용자 요청 '세련되지 못해', 시안대로) ──
   1,549px 전체에 깔리고 내용은 왼쪽 860~950px 에만 몰려 오른쪽이 비던 배치 → 가운데 1,120px 묶음.
   큰 제목·버튼, '배우는 순서' 4단계 카드 한 줄, 영상은 카드 아래로(HTML 순서는 그대로 두고 order 로만),
   맨 아래 링크 줄. 폰(≤820px)은 .hx-* 를 숨기고 종전 배치 그대로. */
.hx-hero, .hx-head, .hx-step, .hx-go, .hx-links { display: none; }
@media (min-width: 821px) {
    .panel[data-panel="home"].active { display: flex; flex-direction: column; max-width: 1120px; margin: 0 auto; }
    .panel[data-panel="home"] .home-hero { display: none; }
    .panel[data-panel="home"] .hx-hero { order: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px;
        padding: 28px; margin: 8px 0 22px; border-radius: 16px;
        background: linear-gradient(135deg, rgba(14,95,58,0.55), rgba(14,95,58,0.15)); border: 1px solid rgba(212,168,71,0.28); }
    .hx-hero h1 { margin: 0 0 8px; font-size: 2rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.5px; }
    .hx-hero p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text-secondary); }
    .hx-chip { display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 99px; font-size: 0.8rem;
        color: var(--text-secondary); background: rgba(255,255,255,0.06); }
    .hx-cta { display: flex; gap: 10px; flex-shrink: 0; }
    .hx-cta button { padding: 12px 20px; border-radius: 10px; font: inherit; font-size: 0.98rem; font-weight: 700; cursor: pointer; transition: 0.15s; }
    .hx-pri { background: var(--gold); color: #1a1a1a; border: 1px solid var(--gold); }
    .hx-pri:hover { filter: brightness(1.08); }
    .hx-sec { background: transparent; color: var(--text-primary); border: 1px solid rgba(255,255,255,0.25); }
    .hx-sec:hover { border-color: var(--gold); color: var(--gold); }
    .panel[data-panel="home"] .hx-head { order: 1; display: block; margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--gold); }
    .panel[data-panel="home"] .home-grid { order: 2; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: none; }
    .panel[data-panel="home"] .home-card { position: relative; padding: 20px 18px 52px; }
    .panel[data-panel="home"] .home-card:hover { transform: translateY(-3px); }
    .hx-step { display: block !important; position: absolute; top: 16px; right: 16px; padding: 3px 9px; border-radius: 99px;
        font-size: 0.75rem; font-weight: 800; color: var(--gold); background: rgba(212,168,71,0.14); }
    .hx-go { display: block !important; position: absolute; left: 18px; bottom: 16px; font-size: 0.85rem; font-weight: 700; color: var(--gold); }
    .panel[data-panel="home"] .hv-section { order: 3; margin: 30px 0 0; padding: 0; background: none; border: none; scroll-margin-top: 90px; }
    .panel[data-panel="home"] .hv-head { margin: 0 0 12px; font-size: 1.15rem; }
    .panel[data-panel="home"] .hv-grid { grid-template-columns: 1fr 1fr; gap: 14px; max-width: none; }
    .panel[data-panel="home"] .hx-links { order: 4; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 40px; }
    .hx-links button, .hx-links a { padding: 10px 16px; border-radius: 10px; font: inherit; font-size: 0.92rem; cursor: pointer;
        background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-primary); text-decoration: none; transition: 0.15s; }
    .hx-links button:hover, .hx-links a:hover { border-color: var(--gold); color: var(--gold); }
}
/* 태블릿 폭(821~1099px): 제목·버튼을 위아래로 쌓고 카드는 2×2 — 한 줄에 넣으면 제목이 세 줄로 눌린다 */
@media (min-width: 821px) and (max-width: 1099px) {
    .panel[data-panel="home"] .hx-hero { flex-direction: column; align-items: flex-start; gap: 18px; }
    .panel[data-panel="home"] .home-grid { grid-template-columns: 1fr 1fr; }
}

/* ★ 2026-10-24 (사용자 요청): 가이드 첫 화면 맨 아래 '🏠 홈으로' — 모든 화면 크기. 데스크탑은 링크 줄 다음(order 5) */
.hx-homeback { display: flex; justify-content: center; margin: 18px 0 28px; }
.hx-homeback a { padding: 10px 28px; border-radius: 10px; font-size: 0.95rem; font-weight: 700; text-decoration: none;
    color: var(--text-primary); background: rgba(255,255,255,0.06); border: 1px solid var(--border); transition: 0.15s; }
.hx-homeback a:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 821px) { .panel[data-panel="home"] .hx-homeback { order: 5; margin-top: 0; } }

/* ── 가이드 메뉴 화면 데스크탑 틀 (2026-10-26 사용자 요청 '메뉴로 들어가면 다시 엉성해진다', 시안대로) ──
   howto-sections.js 가 메뉴마다 머리 상자(.sx-head)·목차(.sx-toc, 장 4개 이상)·이전/다음 카드(.sx-nav)를 붙인다.
   첫 화면과 같은 가운데 1,120px. 원래 안내 문단·영상 카드·끝의 '다음으로' 버튼은 데스크탑에서만 숨긴다(폰은 종전 그대로).
   복기 뷰어(theater)를 연 동안은 적용하지 않는다. */
.sx-head, .sx-toc, .sx-nav { display: none; }
@media (min-width: 821px) {
    body:not(.theater) .panel.active:not([data-panel="home"]) { max-width: 1120px; margin: 0 auto; }
    body:not(.theater) .panel:not([data-panel="home"]) > .lead,
    body:not(.theater) .panel:not([data-panel="home"]) > .hv-inline,
    body:not(.theater) .panel[data-panel="about"] > .home-hero,
    body:not(.theater) .panel:not([data-panel="home"]) .cta-play { display: none; }
    body:not(.theater) .sx-head { display: flex; align-items: center; justify-content: space-between; gap: 22px;
        padding: 22px 24px; margin: 8px 0 22px; border-radius: 16px;
        background: linear-gradient(135deg, rgba(14,95,58,0.5), rgba(14,95,58,0.12)); border: 1px solid rgba(212,168,71,0.28); }
    .sx-head h1 { margin: 0 0 8px; font-size: 1.7rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.4px; }
    .sx-head .sx-lead { margin: 0; max-width: 640px; }
    .sx-step { display: inline-block; margin-bottom: 8px; padding: 3px 9px; border-radius: 99px; font-size: 0.75rem; font-weight: 800;
        color: var(--gold); background: rgba(212,168,71,0.14); }
    .sx-head .sx-video { width: 300px; flex-shrink: 0; margin: 0; }
    .sx-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 34px; align-items: start; }
    .sx-body .article { max-width: none; }
    .sx-body .article h2 { scroll-margin-top: 110px; }
    body:not(.theater) .sx-toc { display: block; position: sticky; top: 100px; padding: 14px; border-radius: 12px;
        background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
    .sx-toc b { display: block; margin-bottom: 8px; font-size: 0.78rem; color: var(--text-secondary); }
    .sx-toc a { display: block; padding: 6px 8px; border-radius: 7px; font-size: 0.86rem; color: var(--text-secondary); text-decoration: none; transition: 0.12s; }
    .sx-toc a:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
    .sx-toc a.on { color: var(--gold); font-weight: 700; background: rgba(212,168,71,0.12); }
    .panel[data-panel="about"] .about-doc { margin: 0 auto; }
    .panel[data-panel="basics"] .basic-table { max-width: none; }
    .panel[data-panel="masters"] .gal-cols.single { max-width: none; }
    body:not(.theater) .sx-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 30px 0 40px; }
    .sx-nav a { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.04);
        color: var(--text-primary); text-decoration: none; font-weight: 700; transition: 0.15s; }
    .sx-nav a small { display: block; margin-bottom: 4px; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
    .sx-nav a:hover { border-color: var(--gold); }
    .sx-nav .sx-next { text-align: right; border-color: rgba(212,168,71,0.5); }
}
/* 태블릿 폭(821~1099px): 머리 상자는 세로로, 목차는 위로 */
@media (min-width: 821px) and (max-width: 1099px) {
    body:not(.theater) .sx-head { flex-direction: column; align-items: flex-start; }
    .sx-head .sx-video { width: 100%; max-width: 420px; }
    .sx-body { grid-template-columns: 1fr; gap: 16px; }
    body:not(.theater) .sx-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
    .sx-toc b { width: 100%; }
}