/* Mona Sans (MonaS zip — SIL OFL), 한글 글리프: MonaS12TextKR */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

@font-face {
    font-family: 'Mona Sans';
    src: url('fonts/MonaS12.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans';
    src: url('fonts/MonaS12-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Mona Sans Text KR';
    src: url('fonts/MonaS12TextKR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 상소문 인트로 단계 (#home data-plaza-phase) — .hidden 과 충돌하는 html 부트 클래스 없음 */
#home[data-plaza-phase="drum"] .shingungo-container,
#home[data-plaza-phase="drum"] .quest-info {
    display: block !important;
}

#home[data-plaza-phase="drum"] #npc-section,
#home[data-plaza-phase="drum"] #sangso-scroll-wrap,
#home[data-plaza-phase="drum"] #plaza-narration {
    display: none !important;
}

#home[data-plaza-phase="narration"] .shingungo-container,
#home[data-plaza-phase="narration"] .quest-info,
#home[data-plaza-phase="narration"] #npc-section,
#home[data-plaza-phase="narration"] #sangso-scroll-wrap {
    display: none !important;
}

#home[data-plaza-phase="narration"] #plaza-narration {
    display: block !important;
}

#home[data-plaza-phase="npc"] .shingungo-container,
#home[data-plaza-phase="npc"] .quest-info,
#home[data-plaza-phase="npc"] #plaza-narration {
    display: none !important;
}

#home[data-plaza-phase="npc"] #npc-section {
    display: flex !important;
}

#home[data-plaza-phase="npc"] #sangso-scroll-wrap {
    display: none !important;
}

#home[data-plaza-phase="scroll"] .shingungo-container,
#home[data-plaza-phase="scroll"] .quest-info,
#home[data-plaza-phase="scroll"] #plaza-narration {
    display: none !important;
}

#home[data-plaza-phase="scroll"] #npc-section {
    display: flex !important;
}

#home[data-plaza-phase="scroll"] #sangso-scroll-wrap {
    display: block !important;
}

:root {
    /* 더불어민주당 로고 CMYK(100,95,0,0) 기준 디지털 블루 */
    --pixel-primary: #00479E;
    --pixel-primary-dark: #003471;
    --pixel-primary-muted: #3d6fa8;
    --pixel-secondary: #c5dcf5;
    --pixel-secondary-strong: #7eb3e8;
    /* 한성부 제목 네모 */
    --hanseongbu-box-bg: #cad9db;
    --hanseongbu-box-text: var(--nav-chrome-teal);
    /* 헤더·푸터 배경 = 한성부 네모 톤, 글자 = 진한 청록 */
    --nav-chrome-bg: var(--hanseongbu-box-bg);
    --nav-chrome-teal: #1e524f;
    --nav-dancheong-bg: var(--nav-chrome-bg);
    --nav-dancheong-ink: var(--nav-chrome-teal);
    --nav-dancheong-teal: #6d8a8a;
    --nav-teal-dark: #4a6363;
    --nav-chrome-text: var(--nav-chrome-teal);
    --mobile-mint: var(--nav-chrome-bg);
    --mobile-inner-bg: #ffffff;
    --nav-header-bg: var(--nav-chrome-bg);
    --nav-pill-bg: #ffffff;
    --nav-pill-bg-hover: #ffffff;
    --nav-pill-border: transparent;
    --nav-pill-text: var(--nav-chrome-teal);
    --pixel-accent: #e8ecf3;
    --pixel-surface: #e3f0fc;
    --pixel-dark: #212121;
    --pixel-white: #ffffff;
    --font-retro: 'Mona Sans', 'Mona Sans Text KR', 'Noto Sans KR', sans-serif;
    --font-korean: 'Mona Sans', 'Mona Sans Text KR', 'Noto Sans KR', sans-serif;
    --pixel-size: 4px;
    --stroke-subtle: 1px solid rgba(15, 26, 42, 0.14);
    --shadow-soft: 0 2px 10px rgba(0, 71, 158, 0.1);
    --shadow-soft-dark: 0 2px 12px rgba(0, 0, 0, 0.08);
    --btn-radius: 4px;
    --jumak-roof-h: clamp(48px, 11vw, 72px);
    --jumak-btn-light: #f2ddb0;
    --jumak-btn-mid: #d4a862;
    --jumak-btn-deep: #b88956;
    --jumak-btn-border: #5f3d1d;
    --jumak-btn-shadow: #4a3018;
    --jumak-btn-ink: #3b2510;
    /* 상소 족자(양피지) 팔레트 */
    --sangso-parchment: #f4ecdc;
    --sangso-parchment-mid: #ebe3d2;
    --sangso-parchment-deep: #e8dcc4;
    --sangso-parchment-highlight: #e8d4a8;
    --sangso-parchment-paper: #fff9f0;
    --sangso-parchment-ink: #3b2510;
    --sangso-parchment-ink-muted: #5b3d1e;
    --sangso-parchment-border: #5c4320;
    --sangso-parchment-border-dark: #3d2a14;
    /* 상소문 게시판 — paper_4 청록 족자 */
    --board-scroll-teal: #8ca8a8;
    --board-scroll-teal-mid: #9eb8b8;
    --board-scroll-teal-deep: #6d8a8a;
    --board-scroll-teal-dark: #4a6363;
    --board-scroll-paper: #f2efe1;
    --board-scroll-paper-bright: #faf8f0;
    --board-scroll-highlight: var(--hanseongbu-box-bg);
    --board-scroll-ink: #2c3a38;
    --board-scroll-ink-muted: #4a5c5a;
    --board-scroll-border: #5a7575;
    --board-box-stroke: rgba(90, 117, 117, 0.26);
    --board-box-stroke-light: rgba(90, 117, 117, 0.18);
    --board-box-panel-bg: rgba(242, 242, 232, 0.68);
    --board-box-tile-bg: rgba(252, 251, 246, 0.94);
    --board-head-teal-bg: rgba(197, 217, 217, 0.35);
    --board-head-teal-hover: rgba(197, 217, 217, 0.5);
    --board-letter-spacing: -0.02em;
    /* 서울광장 — 옅은 테두리·배경 */
    --plaza-stroke: rgba(15, 26, 42, 0.1);
    --plaza-stroke-parchment: rgba(92, 67, 32, 0.22);
    --plaza-jokja-border: rgba(92, 67, 32, 0.42);
    --plaza-jokja-border-strong: rgba(61, 42, 20, 0.55);
    --plaza-panel-bg: rgba(255, 255, 255, 0.9);
    --plaza-shadow: 0 2px 8px rgba(0, 71, 158, 0.06);
    --plaza-shadow-scene: 0 2px 10px rgba(0, 0, 0, 0.05);
    --app-nav-h: clamp(52px, 9vh, 70px);
    --app-footer-h: clamp(40px, 6.5vh, 68px);
    --footer-font-size: clamp(7px, 1.05vw, 9px);
    --app-main-h: calc(100dvh - var(--app-nav-h) - var(--app-footer-h));
    /* 모바일 족자 paper_4-mobile.png (562×1024, 문양 헤더+양피지 PNG) */
    --jokja-src-w: 562;
    --jokja-src-h: 1024;
    /* 족자 — 뷰포트 안 비율 유지(contain), 가로·세로 최대 */
    --jokja-safe-inline: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px) + 4px);
    --jokja-safe-block: 2px;
    --jokja-layout-max-w: calc(100vw - var(--jokja-safe-inline));
    --jokja-layout-max-h: calc(var(--app-main-h) - var(--jokja-safe-block));
    --jokja-width: min(
        var(--jokja-layout-max-w),
        calc(var(--jokja-layout-max-h) * var(--jokja-src-w) / var(--jokja-src-h))
    );
    --jokja-fixed-h: calc(var(--jokja-width) * var(--jokja-src-h) / var(--jokja-src-w));
    --jokja-max-width: var(--jokja-width);
    --jokja-fluid-base: var(--jokja-width);
    /* 모바일 족자 — 롤러·양피지 본문 여백 */
    --jokja-layer-margin: 17% 9.5% 6.5% 9.5%;
    --jokja-layer-margin-landscape: 10.5% 18% 10.5% 7%;
    --jokja-parchment-inset-top: 17%;
    --jokja-parchment-inset-right: 9.5%;
    --jokja-parchment-inset-bottom: 6.5%;
    --jokja-parchment-inset-left: 9.5%;
    /* 웹 -90° 배치: 세로 족자 여백 → 화면 좌·우·상·하 inset */
    --jokja-web-inset-left: var(--jokja-parchment-inset-top);
    --jokja-web-inset-right: var(--jokja-parchment-inset-bottom);
    --jokja-web-inset-top: var(--jokja-parchment-inset-right);
    --jokja-web-inset-bottom: var(--jokja-parchment-inset-left);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
}

body {
    background-color: var(--pixel-dark);
    font-family: var(--font-korean);
    color: var(--pixel-dark);
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.pixel-root {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-top: var(--app-nav-h);
    background: var(--pixel-white);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* VHS/Retro Effect */
.vhs-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(0, 71, 158, 0.04), rgba(0, 40, 90, 0.02), rgba(0, 71, 158, 0.03));
    background-size: 100% 3px, 3px 100%;
    opacity: 0.2;
}

/* Navigation */
.pixel-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--app-nav-h);
    background-color: var(--nav-header-bg);
    background-image: none;
    border-bottom: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(12px, 3vw, 40px);
    z-index: 100;
}

/* 헤더 부제 띠 */

.logo {
    font-family: var(--font-korean);
    font-size: clamp(14px, 2.2vw, 20px);
    font-weight: 700;
    color: var(--nav-chrome-text);
    text-shadow: none;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    cursor: pointer;
}

.logo-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.logo-subtitle {
    font-size: clamp(11px, 1.7vw, 15px);
    font-weight: 700;
    color: var(--nav-chrome-text);
    opacity: 0.92;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
    padding-left: 2px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
}

.nav-links li {
    display: flex;
    align-items: center;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-korean);
    font-size: clamp(10px, 1.3vw, 12px);
    font-weight: 700;
    background: var(--nav-pill-bg);
    color: var(--nav-pill-text);
    padding: clamp(6px, 1vh, 9px) clamp(10px, 1.5vw, 14px);
    min-height: clamp(32px, 5vh, 38px);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: none;
    transition: background 0.15s, color 0.15s;
    touch-action: manipulation;
    white-space: nowrap;
    line-height: 1.2;
}

.nav-btn:hover, .nav-btn.active {
    background: var(--nav-pill-bg-hover);
    color: var(--nav-dancheong-ink);
    border: none;
    box-shadow: none;
}

/* Main Layout — 세로 뷰포트 고정, 가로만 확장 */
#main-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 16px clamp(12px, 2vw, 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page {
    display: none;
}

.page.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fadeIn 0.15s ease-out;
}

/* 족자 화면 — 서울광장(상소 작성)·상소문 동일 가로·세로 중앙 (각 페이지 활성 시에만) */
#main-content:has(#board.page.active),
#main-content:has(#jangwon.page.active),
#main-content:has(#home.page.active[data-plaza-phase="drum"]),
#main-content:has(#home.page.active .npc-section--sangso),
#main-content:has(#home.page.active #npc-section:not(.hidden):not(.npc-section--sangso)) {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
}

/*
 * 컨테이너 쿼리(100cqw)는 홈 족자만 적용.
 * 한성부(#board)까지 묶으면 일부 환경에서 cqw 순환 계산으로 폭이 0이 되어 게시판이 보이지 않을 수 있음.
 */
#main-content:has(#home.page.active .npc-section--sangso),
#main-content:has(#home.page.active #npc-section:not(.hidden):not(.npc-section--sangso)) {
    container-type: inline-size;
    container-name: jokja-main;
}

#board.page.active,
#jangwon.page.active {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    container-type: inline-size;
    container-name: board-jokja;
}

#home.page.active:has(.npc-section--sangso),
#home.page.active:has(#npc-section:not(.hidden):not(.npc-section--sangso)) {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#home.page.active:has(.npc-section--sangso) .ulrim-madang,
#home.page.active:has(#npc-section:not(.hidden):not(.npc-section--sangso)) .ulrim-madang {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#home.page.active:has(.npc-section--sangso) .npc-container {
    margin: 0 auto;
    flex: 0 0 auto;
    gap: 10px;
}

/* 족자 — 모바일: 가로세로 비율 무시, 화면 전체 채우기 */
@supports (width: 1cqw) {
    @media (max-width: 900px) {
        #main-content:has(#home.page.active .npc-section--sangso) .sangso-scroll-wrap.board-scroll-wrap {
            --jokja-eff-w: 100cqw;
            width: var(--jokja-eff-w) !important;
            max-width: none;
            --jokja-width: var(--jokja-eff-w);
            --jokja-fixed-h: var(--app-main-h);
            --jokja-fluid-base: var(--jokja-eff-w);
        }

        #main-content:has(#home.page.active .npc-section--sangso)
            .sangso-scroll-wrap.board-scroll-wrap
            .board-scroll-frame {
            height: var(--app-main-h);
            min-height: var(--app-main-h);
            max-height: var(--app-main-h);
        }
    }

    @media (min-width: 901px) {
        #main-content:has(#home.page.active .npc-section--sangso) .sangso-scroll-wrap.board-scroll-wrap {
            --jokja-scaled-vis-w: min(
                100cqw,
                calc((var(--app-main-h) - var(--jokja-safe-block)) * var(--jokja-src-h) / var(--jokja-src-w))
            );
            --jokja-vis-w: var(--jokja-scaled-vis-w);
            --jokja-vis-h: calc(var(--jokja-scaled-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
            --jokja-frame-w: calc(var(--jokja-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
            --jokja-frame-h: var(--jokja-vis-w);
            --jokja-fluid-base: var(--jokja-scaled-vis-w);
            width: var(--jokja-scaled-vis-w) !important;
            max-width: none !important;
            height: var(--jokja-vis-h);
            min-height: var(--jokja-vis-h);
            max-height: calc(var(--app-main-h) - var(--jokja-safe-block));
        }
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Pixel Box Style */
.pixel-box {
    background: var(--pixel-white);
    border: var(--pixel-size) solid var(--pixel-dark);
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 6px 6px 0 0 rgba(0,0,0,0.1);
    position: relative;
}

/* 서울시민고 메인 · 북 영역 */
.ulrim-madang {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

#home .quest-info,
#home .quest-info.pixel-box {
    width: 100%;
    max-width: min(560px, 92vw);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-align: center;
    background: var(--plaza-panel-bg);
    border: 1px solid var(--plaza-stroke);
    box-shadow: var(--plaza-shadow);
    padding: 16px 18px;
    flex-shrink: 0;
    overflow: visible;
    box-sizing: border-box;
}

#home .quest-info p,
#home .plaza-quest-text {
    text-align: center;
    margin: 0 auto;
    font-family: var(--font-korean);
    font-size: clamp(13px, 3.2vw, 18px);
    font-weight: 700;
    line-height: 1.7;
    color: var(--board-scroll-ink);
    word-break: keep-all;
    overflow-wrap: break-word;
}

#home .plaza-quest-line {
    display: block;
}

#home.page.active[data-plaza-phase="drum"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#home[data-plaza-phase="drum"] .ulrim-madang {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 20px);
    padding: clamp(8px, 2vh, 16px) clamp(6px, 2vw, 14px);
    margin: auto;
    overflow: visible;
    box-sizing: border-box;
}

#home[data-plaza-phase="drum"] .quest-info {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
}

/* ── 인트로 이전/다음/SKIP 버튼 ───────────────────────────── */
.plaza-intro-controls {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    /* 모든 인트로 단계에서 우하단 고정 */
    position: fixed;
    bottom: calc(var(--app-footer-h) + 16px);
    right: clamp(14px, 4vw, 44px);
    z-index: 300;
}

#home[data-plaza-phase="drum"] .plaza-intro-controls,
#home[data-plaza-phase="narration"] .plaza-intro-controls,
#home[data-plaza-phase="npc"] .plaza-intro-controls {
    display: flex;
}

/* 드럼 단계: 이전 숨김 */
#home[data-plaza-phase="drum"] #plaza-prev-btn {
    visibility: hidden;
    pointer-events: none;
}

/* 족자 단계: 이전/다음 숨김 */
#home[data-plaza-phase="scroll"] #plaza-prev-btn,
#home[data-plaza-phase="scroll"] #plaza-next-btn {
    display: none;
}

/* ── 인트로 이전/다음/SKIP — 헤더 .nav-btn과 동일 톤 ─────── */
.plaza-intro-btn {
    font-family: var(--font-korean);
    font-size: clamp(10px, 1.3vw, 12px);
    font-weight: 700;
    padding: clamp(6px, 1vh, 9px) clamp(10px, 1.5vw, 14px);
    min-height: clamp(32px, 5vh, 38px);
    background: var(--nav-pill-bg);
    color: var(--nav-pill-text);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: none;
    white-space: nowrap;
    line-height: 1.2;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 0.15s, color 0.15s;
}

.plaza-intro-btn:hover,
.plaza-intro-btn:active {
    background: var(--nav-pill-bg-hover);
    color: var(--nav-dancheong-ink);
    border: none;
    box-shadow: none;
    transform: none;
}

#home[data-plaza-phase="drum"] .plaza-quest-text,
#home[data-plaza-phase="drum"] .plaza-quest-line {
    overflow: visible;
    height: auto;
}

#home[data-plaza-phase="drum"] .plaza-drum-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
}

#home[data-plaza-phase="npc"] .plaza-drum-stage,
#home[data-plaza-phase="scroll"] .plaza-drum-stage,
#home[data-plaza-phase="narration"] .plaza-drum-stage {
    display: none;
}

#home .plaza-narration {
    width: 100%;
    max-width: min(640px, 94vw);
    margin: 24px auto;
    padding: 20px 22px;
    text-align: center;
    background: var(--plaza-panel-bg);
    border: 1px solid var(--plaza-stroke);
    box-shadow: var(--plaza-shadow);
}

#home .narration-text-line {
    margin: 0;
    font-family: var(--font-korean);
    font-size: clamp(13px, 3.2vw, 18px);
    font-weight: 700;
    line-height: 1.85;
    color: var(--board-scroll-ink);
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-align: center;
}

#home .narration-text-line.is-typing::after {
    content: '▌';
    animation: npcCursorBlink 0.85s step-end infinite;
    margin-left: 2px;
    opacity: 0.85;
}

.shingungo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--jokja-width);
    margin: 16px auto;
    cursor: pointer;
    position: relative;
    user-select: none;
}

#home[data-plaza-phase="drum"] .shingungo-container {
    width: min(
        96vw,
        calc((var(--app-main-h) - 11rem) * 480 / 270),
        920px
    );
    max-width: 96vw;
    margin: 0 auto;
    flex: 0 0 auto;
    min-height: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

#home[data-plaza-phase="drum"] .plaza-drum-stage {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* 서울광장 픽셀아트 배경 + 투명 북 오버레이 */
#home .shingungo-scene {
    position: relative;
    display: block;
    width: min(100%, var(--jokja-width));
    max-width: 98vw;
    margin: 0 auto;
    line-height: 0;
    border: 1px solid var(--plaza-stroke);
    border-radius: var(--btn-radius);
    box-shadow: var(--plaza-shadow-scene);
    background: transparent;
    overflow: hidden;
}

#home[data-plaza-phase="drum"] .shingungo-scene {
    width: 100%;
    max-width: 100%;
    max-height: min(calc(var(--app-main-h) - 11rem), 72vh);
    aspect-ratio: 480 / 270;
    height: auto;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    background: transparent;
    outline: none;
}

.shingungo-plaza-bg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.shingungo-drum-wrap {
    position: absolute;
    left: 50%;
    bottom: 26%;
    transform: translateX(-50%);
    width: min(32%, 240px);
    pointer-events: none;
}

#home[data-plaza-phase="drum"] .shingungo-drum-wrap {
    width: min(48%, min(46vmin, 420px));
    bottom: 22%;
    pointer-events: auto;
    cursor: pointer;
}

.shingungo-drum-wrap img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: pixelated;
    pointer-events: auto;
    cursor: pointer;
}

#shingungo-drum {
    transition: transform 0.05s;
}

#shingungo-drum:active {
    transform: scale(0.95);
}

.pulsate-slow {
    animation: pulsate 2s infinite ease-in-out;
}

@keyframes pulsate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Three-beat animation for Single Click */
.dung-dung-dung {
    animation: dung3 1.2s ease-in-out forwards;
}

@keyframes dung3 {
    0% { transform: scale(1); }
    15% { transform: scale(1.15); filter: brightness(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); filter: brightness(1.3); }
    60% { transform: scale(1); }
    75% { transform: scale(1.25); filter: brightness(1.5); }
    100% { transform: scale(1); }
}

/* Screen transition effect */
.screen-flash {
    animation: flashTransition 1s ease-out;
}

@keyframes flashTransition {
    0% { background: transparent; }
    30% { background: white; }
    100% { background: transparent; }
}

/* Gauge Area */
.hit-gauge-wrapper {
    width: 100%;
    height: 30px;
    background: #e0e0e0;
    border: var(--pixel-size) solid var(--pixel-dark);
    margin-top: 20px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    background: var(--pixel-primary);
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* NPC Section */
.npc-container {
    width: 100%;
    max-width: 100%;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: npcAppear 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
}

#home:has(#npc-section:not(.hidden):not(.npc-section--sangso)) {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

#home:has(#npc-section:not(.hidden):not(.npc-section--sangso)) .npc-container {
    margin: 0;
}

#main-content:has(#npc-section:not(.hidden):not(.npc-section--sangso)) {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

@keyframes npcAppear {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#npc-section:not(.npc-section--sangso) {
    --npc-avail-h: calc(var(--app-main-h) - 100px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--app-main-h);
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

#npc-section:not(.npc-section--sangso) .npc-present {
    flex: 1;
    width: 100%;
    max-width: 100%;
    min-height: var(--app-main-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px max(12px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px))
        max(12px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}

#npc-section:not(.npc-section--sangso) .npc-sprite {
    width: min(100vw, calc(var(--npc-avail-h) * 480 / 720), 7800px);
    height: auto;
    max-width: min(7800px, 100vw);
    max-height: min(12300px, var(--npc-avail-h));
    object-fit: contain;
    object-position: center center;
    flex: 0 1 auto;
    min-height: 0;
    flex-shrink: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    margin: 0 auto;
    align-self: center;
}

#npc-section:not(.npc-section--sangso) .speech-bubble {
    flex-shrink: 0;
    align-self: center;
    margin: 0 auto;
    width: fit-content;
    min-width: min(280px, 88vw);
    max-width: min(520px, 92vw);
    text-align: center;
    z-index: 2;
}

#npc-section:not(.npc-section--sangso) .speech-bubble p,
#npc-section:not(.npc-section--sangso) .npc-text-line {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.speech-bubble {
    background: #fff;
    border: var(--pixel-size) solid var(--pixel-dark);
    padding: 15px;
    position: relative;
    font-weight: bold;
    min-width: 0;
    width: min(100%, 480px);
    max-width: min(480px, 92vw);
    box-sizing: border-box;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 12px solid var(--pixel-dark);
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

/* 정원오 대사 말풍선 — 얇은 스트로크 */
#npc-section:not(.npc-section--sangso) .speech-bubble {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 26, 42, 0.11);
    box-shadow: 0 2px 14px rgba(0, 71, 158, 0.07);
    font-weight: 600;
}

#npc-section:not(.npc-section--sangso) .speech-bubble::after {
    bottom: -7px;
    border-top: 7px solid rgba(15, 26, 42, 0.11);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.npc-present {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.npc-present.npc-present--hide {
    display: none;
}

.sangso-form-message {
    width: 100%;
    max-width: min(900px, 98vw);
    margin: 0 auto 12px;
    padding: 12px 14px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2f4c;
    background: rgba(227, 240, 252, 0.95);
    border: 2px solid var(--pixel-primary);
    box-sizing: border-box;
}

.npc-text-line {
    min-height: 3.2em;
    line-height: 1.65;
    text-align: center;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
    max-width: min(520px, 92vw);
    margin: 0 auto;
}

.npc-text-line.is-typing::after {
    content: '▌';
    display: inline-block;
    margin-left: 2px;
    color: var(--pixel-primary);
    animation: npc-cursor-blink 0.55s step-end infinite;
}

@keyframes npc-cursor-blink {
    50% { opacity: 0; }
}

.sangso-scroll-wrap.sangso-reveal {
    animation: sangso-scroll-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes sangso-scroll-reveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sangso-scroll-wrap.sangso-reveal {
        animation: none;
    }

    .npc-text-line.is-typing::after {
        display: none;
    }
}


/* 상소문 전용 화면: 스크롤 없이 한 화면에 들어오는 크기 (서울광장 활성 시만) */
#home.page.active .npc-section--sangso {
    --sangso-form-scale: 1.3; /* 모바일·기본; 웹(901+)은 jokja-ui-blocks 고정 px */
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#home.page.active .npc-section--sangso .sangso-form-message {
    max-width: var(--jokja-max-width);
    margin: 0 auto 10px;
    border: 1px solid var(--board-box-stroke);
    background: var(--board-box-panel-bg);
    color: var(--board-scroll-ink);
}

#home.page.active .npc-section--sangso .sangso-scroll-wrap {
    width: var(--jokja-width);
    max-width: min(100vw, var(--jokja-layout-max-w));
    margin: 0 auto;
    flex: 0 0 auto;
}

#home.page.active .npc-section--sangso .sangso-scroll-wrap .board-scroll-frame {
    width: 100%;
    height: var(--jokja-fixed-h);
    min-height: var(--jokja-fixed-h);
    max-height: var(--jokja-fixed-h);
    overflow: hidden;
}

#home.page.active .npc-section--sangso .sangso-form-layer.board-scroll-layer {
    /* 하네스: 양피지 내부에 절대 바인딩 (상소 폼 전용 좌우 여백 10%) */
    position: absolute;
    top: var(--jokja-parchment-inset-top);
    right: 10%;
    bottom: var(--jokja-parchment-inset-bottom);
    left: 10%;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px 20px calc(8px * var(--sangso-form-scale, 1.3));
    gap: calc(4px * var(--sangso-form-scale, 1.3));
    box-sizing: border-box;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

#home.page.active .npc-section--sangso .sangso-field-input,
#home.page.active .npc-section--sangso .sangso-field-textarea,
#home.page.active .npc-section--sangso .sangso-form-layer .sangso-type-selector {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#home.page.active .npc-section--sangso .sangso-field-textarea {
    flex: 1 1 0;
    min-height: 60px;
    max-height: min(55vh, calc(var(--jokja-fixed-h, 500px) * 0.60));
    height: auto;
    padding: calc(8px * var(--sangso-form-scale, 1.3)) calc(10px * var(--sangso-form-scale, 1.3));
    font-size: clamp(14px, calc(var(--jokja-fluid-base, 320px) * 0.0377), 18px);
    line-height: 1.45;
}

#home.page.active .npc-section--sangso .sangso-field-input,
#home.page.active .npc-section--sangso .sangso-field-textarea {
    border: 1px solid var(--board-box-stroke);
    background: var(--board-scroll-paper-bright);
    color: var(--board-scroll-ink);
    letter-spacing: var(--board-letter-spacing);
}

#home.page.active .npc-section--sangso .sangso-form-layer .sangso-type-selector,
#home.page.active .npc-section--sangso .sangso-form-layer .radio-label {
    letter-spacing: var(--board-letter-spacing);
}

#home.page.active .npc-section--sangso .sangso-field-input::placeholder,
#home.page.active .npc-section--sangso .sangso-field-textarea::placeholder {
    color: var(--board-scroll-ink-muted);
    opacity: 0.85;
}

#home.page.active .npc-section--sangso .sangso-submit-btn {
    color: var(--board-scroll-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(
        180deg,
        var(--board-scroll-paper-bright) 0%,
        var(--board-scroll-paper) 42%,
        var(--board-scroll-highlight) 100%
    );
    border: 1px solid var(--board-scroll-border);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(90, 117, 117, 0.25);
}

#home.page.active .npc-section--sangso .sangso-submit-btn:hover {
    background: linear-gradient(
        180deg,
        #fffefb 0%,
        var(--board-scroll-paper) 100%
    );
}

#home.page.active .npc-section--sangso .sangso-submit-btn:active {
    transform: translate(1px, 1px);
    background: var(--board-scroll-teal-mid);
    box-shadow: inset 0 1px 2px rgba(90, 117, 117, 0.25);
}

.sangso-form-layer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    box-sizing: border-box;
    line-height: normal;
}

.sangso-field-input,
.sangso-field-textarea {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    padding: 10px 12px;
    background: #f4ecdc;
    border: 2px solid #5c4320;
    border-radius: var(--btn-radius);
    color: #1a1106;
}

.sangso-field-input,
.sangso-form-layer .sangso-type-selector {
    flex-shrink: 0;
}

.sangso-field-input {
    margin-top: 22px;
    padding: 8px 10px;
    font-size: 13px;
}

.citizen-identity-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-top: 22px;
    box-sizing: border-box;
}

.citizen-identity-block .sangso-field-input {
    margin-top: 0;
}

.citizen-identity-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: #2d5a54;
}

.citizen-logout-btn {
    align-self: flex-start;
    margin-top: 2px;
    padding: 6px 12px;
    font-size: 12px;
    font-family: inherit;
    color: #1e524f;
    background: #fff;
    border: 2px solid #1e524f;
    border-radius: var(--btn-radius);
    cursor: pointer;
}

.citizen-logout-btn:hover {
    background: var(--hanseongbu-box-bg);
}

.jumak-identity-hint {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.45;
    color: #2d5a54;
}

#home.page.active .npc-section--sangso .sangso-form-layer .citizen-identity-block {
    margin-top: 2px;
    gap: calc(4px * var(--sangso-form-scale, 1.3));
}

#home.page.active .npc-section--sangso .sangso-form-layer .citizen-identity-hint {
    font-size: clamp(11px, calc(var(--jokja-fluid-base, 320px) * 0.031), 13px);
}

#home.page.active .npc-section--sangso .sangso-form-layer .sangso-field-input {
    margin-top: 2px;
    padding: calc(6px * var(--sangso-form-scale, 1.3)) calc(8px * var(--sangso-form-scale, 1.3));
    font-size: clamp(14px, calc(var(--jokja-fluid-base, 320px) * 0.0377), 18px);
    line-height: 1.35;
}

#home.page.active .npc-section--sangso .sangso-form-layer .board-header {
    gap: 0;
    margin-bottom: 4px;
}

#home.page.active .npc-section--sangso .sangso-form-layer .board-scroll-title,
#home.page.active .npc-section--sangso .sangso-form-layer .board-header .pixel-subtitle {
    font-size: clamp(17px, calc(var(--jokja-fluid-base, 320px) * 0.0442), 22px);
    padding: calc(6px * var(--sangso-form-scale, 1.3)) calc(10px * var(--sangso-form-scale, 1.3));
    line-height: 1.25;
}

#home.page.active .npc-section--sangso .sangso-submit-btn {
    margin-top: calc(4px * var(--sangso-form-scale, 1.3));
    padding: calc(8px * var(--sangso-form-scale, 1.3)) calc(20px * var(--sangso-form-scale, 1.3));
    font-size: clamp(14px, calc(var(--jokja-fluid-base, 320px) * 0.0377), 18px);
    line-height: 1.2;
}

#home.page.active .npc-section--sangso .sangso-form-layer {
    gap: calc(4px * var(--sangso-form-scale, 1.3));
}

.sangso-field-input::placeholder,
.sangso-field-textarea::placeholder {
    color: rgba(42, 26, 8, 0.55);
}

.sangso-field-textarea {
    flex: 1 1 auto;
    min-height: clamp(260px, 42vh, 440px);
    resize: none;
    margin-top: 0;
    margin-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 14px;
    line-height: 1.55;
}

.sangso-form-layer .sangso-type-selector {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px 8px;
    background: #ebe3d2;
    border: 2px solid #5c4320;
    border-radius: var(--btn-radius);
    font-size: 12px;
}

.sangso-form-layer .radio-label {
    flex: 1;
    justify-content: center;
    padding: 5px 8px;
    background: #fff9f0;
    border: 2px solid #5c4320;
    border-radius: var(--btn-radius);
    color: #1a1106;
    font-weight: 700;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sangso-form-layer .radio-label:has(input:checked) {
    background: #e8d4a8;
    border-color: #3d2a14;
    color: #140c04;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 0 2px rgba(92, 67, 32, 0.35);
}

.sangso-submit-btn {
    align-self: center;
    margin-top: auto;
    flex-shrink: 0;
    font-family: var(--font-retro);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 12px 26px;
    cursor: pointer;
    color: var(--sangso-parchment-ink, #3b2510);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(
        180deg,
        #faf4e8 0%,
        var(--sangso-parchment, #f4ecdc) 42%,
        var(--sangso-parchment-deep, #e8dcc4) 100%
    );
    border: 2px solid var(--sangso-parchment-border, #5c4320);
    border-radius: var(--btn-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(92, 67, 32, 0.2);
}

.sangso-submit-btn:hover {
    background: linear-gradient(180deg, #fff9f0 0%, #f0e6d4 100%);
}

.sangso-submit-btn:active {
    transform: translate(1px, 1px);
    background: var(--sangso-parchment-mid, #ebe3d2);
    box-shadow: inset 0 1px 2px rgba(92, 67, 32, 0.2);
}

.citizen-id-input {
    margin-bottom: 0;
}

.board-form {
    width: 100%;
    max-width: 500px;
    margin-bottom: 30px;
}

.pixel-textarea {
    width: 100%;
    height: 120px;
    border: 3px solid var(--pixel-dark);
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    margin-bottom: 15px;
    resize: none;
}

.pixel-btn {
    font-family: var(--font-retro);
    font-size: 12px;
    background: var(--pixel-primary);
    color: #fff;
    border: 2px solid var(--pixel-primary-dark);
    border-radius: var(--btn-radius);
    padding: 12px 24px;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--pixel-primary-dark);
    touch-action: manipulation;
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}

.pixel-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--pixel-primary-dark);
}

.plaza-intro-controls .pixel-btn.plaza-intro-btn {
    font-family: var(--font-korean);
    font-size: clamp(10px, 1.3vw, 12px);
    font-weight: 700;
    padding: clamp(6px, 1vh, 9px) clamp(10px, 1.5vw, 14px);
    min-height: clamp(32px, 5vh, 38px);
    background: var(--nav-pill-bg);
    color: var(--nav-pill-text);
    border: none;
    border-radius: var(--btn-radius);
    box-shadow: none;
    transition: background 0.15s, color 0.15s;
}

.plaza-intro-controls .pixel-btn.plaza-intro-btn:hover,
.plaza-intro-controls .pixel-btn.plaza-intro-btn:active {
    background: var(--nav-pill-bg-hover);
    color: var(--nav-dancheong-ink);
    border: none;
    box-shadow: none;
    transform: none;
}

.pixel-btn.small {
    border-radius: var(--btn-radius);
}

/* 버튼·입력 공통 둥근 모서리 */
button,
.pixel-input,
.pixel-textarea,
.sangso-submit-btn,
.sangso-field-input,
.sangso-field-textarea,
.radio-label,
.board-title-item,
.jumak-title-item,
.jumak-like-btn,
.jumak-comment-toggle-btn,
.jumak-comment-like-btn,
.jumak-reply-toggle-btn,
.jumak-reply-like-btn,
.jumak-comment-edit-btn,
.jumak-comment-delete-btn,
.jumak-reply-edit-btn,
.jumak-reply-delete-btn,
.vote-btn,
.comment-toggle-btn,
.scroll-board-container .board-tab-btn,
.scroll-board-container .sub-nav-btn,
.scroll-board-container .pixel-btn,
.scroll-board-container .scroll-ui,
.scroll-board-container .board-title-item,
.scroll-board-container .board-top-list,
.scroll-board-container .board-top-item,
.scroll-board-container .board-empty,
.scroll-board-container .board-detail,
.scroll-board-container .board-header .pixel-subtitle,
#archive .sahun-container,
#archive .status-card,
#archive .v-step,
#archive .pixel-subtitle,
.jumak-top-list,
.jumak-board,
.jumak-header .pixel-subtitle,
.jumak-title-item,
.jumak-detail,
.jumak-top-list .board-top-item {
    border-radius: var(--btn-radius);
}

.jumak-inner {
    border-radius: 0 0 var(--btn-radius) var(--btn-radius);
}

/* 상소문 게시판·서울광장 — paper_4 청록 족자 (동일 규격) */
.scroll-board-container,
.board-scroll-wrap,
.sangso-scroll-wrap.board-scroll-wrap {
    width: var(--jokja-width);
    max-width: min(100vw, var(--jokja-layout-max-w));
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    align-self: center;
    filter: none;
    box-shadow: none;
}

.board-scroll-frame {
    position: relative;
    display: grid;
    /* 하네스: 컨테이너 경계 — 자손의 cqw/cqh 기준점 */
    container-type: size;
    container-name: jokja-frame;
    width: 100%;
    height: var(--jokja-fixed-h);
    min-height: var(--jokja-fixed-h);
    max-height: var(--jokja-fixed-h);
    overflow: hidden;
    background: var(--pixel-white);
    filter: none;
    box-shadow: none;
}

.board-scroll-frame > * {
    grid-area: 1 / 1;
}

.board-scroll-picture {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    z-index: 0;
    pointer-events: none;
    line-height: 0;
    filter: none;
    box-shadow: none;
}

.board-scroll-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: fill;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    filter: none;
    box-shadow: none;
}

.board-scroll-layer {
    /* ━━ 하네스 L2: scrollport — inset만으로 양피지 영역 바인딩 ━━ */
    position: absolute;
    top: var(--jokja-parchment-inset-top);
    right: var(--jokja-parchment-inset-right);
    bottom: var(--jokja-parchment-inset-bottom);
    left: var(--jokja-parchment-inset-left);
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 6px 12px;
    align-items: stretch;
    color: var(--board-scroll-ink);
    min-height: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* ━━ 하네스 L3~L4: layer → shell → child 클립 체인 ━━ */
.board-scroll-frame > .board-scroll-layer > *,
.board-scroll-frame > .sangso-form-layer.board-scroll-layer > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.board-scroll-layer .board-header {
    flex: 0 0 auto;
}

.board-scroll-layer #board-list-view,
.board-scroll-layer #board-detail-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.board-scroll-layer .scroll-ui {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.board-scroll-layer .board-pagination {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

.board-scroll-layer .board-detail,
.board-scroll-layer .board-detail-post {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.sangso-form-layer.board-scroll-layer .sangso-field-input,
.sangso-form-layer.board-scroll-layer .sangso-field-textarea,
.sangso-form-layer.board-scroll-layer .sangso-submit-btn {
    min-width: 0;
    max-width: 100%;
}

/* 족자 안에서는 목록·상세가 넘칠 때 이 레이어에서만 스크롤 */
.scroll-board-container #board-list-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.scroll-board-container #board-detail-view {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-board-container:has(#board-detail-view:not(.hidden)) .board-header {
    margin-bottom: 0;
}

.scroll-board-container:has(#board-detail-view:not(.hidden)) .board-scroll-title,
.scroll-board-container:has(#board-detail-view:not(.hidden)) .board-header .pixel-subtitle {
    padding: 6px var(--board-row-pad-x);
    font-size: var(--board-font-scroll-title);
}

@media (min-width: 901px) {
    .scroll-board-container:has(#board-detail-view:not(.hidden)) .board-scroll-title,
    .scroll-board-container:has(#board-detail-view:not(.hidden)) .board-header .pixel-subtitle {
        font-size: var(--board-block-font-scroll-title);
    }

    /* 한성부 세부글 — 웹에서 전체 글씨 확대 */
    .jokja-ui-blocks .board-detail-title {
        font-size: 22px;
        line-height: 1.35;
    }

    .jokja-ui-blocks .board-detail-body {
        font-size: 16px;
        line-height: 1.65;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .jokja-ui-blocks .board-detail-author .board-author-name {
        font-size: 15px;
    }

    .jokja-ui-blocks .board-detail-header-utils .board-detail-datetime {
        font-size: 13px;
    }

    .jokja-ui-blocks .board-stat-btn .board-stat-label,
    .jokja-ui-blocks .board-stat-btn .board-stat-count {
        font-size: 14px;
    }

    .jokja-ui-blocks .board-comment-sort-btn,
    .jokja-ui-blocks .board-comment-user,
    .jokja-ui-blocks .board-comment-text {
        font-size: 14px;
    }

    .jokja-ui-blocks .board-nav-btn {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* 목록 페이지네이션: 게시판 바로 아래 */
    .jokja-ui-blocks .scroll-ui > .board-pagination {
        margin-top: 2px;
        padding-top: 2px;
        justify-content: center;
    }

}

/* 한성부: 상세 블록이 족자 밖으로 밀어내지 않게 */
.scroll-board-container .board-detail {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.82);
    border-radius: var(--btn-radius);
    padding: 10px 12px;
    box-sizing: border-box;
}

/* 상소문 게시판 본문 — 서울광장 상소 폼과 분리 */
#board.page.active .board-scroll-layer:not(.sangso-form-layer),
#jangwon.page.active .board-scroll-layer:not(.sangso-form-layer) {
    width: auto;
    flex: unset;
}

#home.page.active .sangso-form-layer.board-scroll-layer {
    color: var(--board-scroll-ink);
    letter-spacing: var(--board-letter-spacing);
}

.scroll-board-container {
    --board-row-pad-x: clamp(10px, calc(var(--jokja-fluid-base) * 0.022), 16px);
    --board-prefix-w: clamp(52px, calc(var(--jokja-fluid-base) * 0.075), 64px);
    --board-prefix-gap: clamp(6px, calc(var(--jokja-fluid-base) * 0.014), 14px);
    --board-col-author: clamp(76px, calc(var(--jokja-fluid-base) * 0.16), 120px);
    --board-col-date: clamp(72px, calc(var(--jokja-fluid-base) * 0.14), 100px);
    --board-col-comments: clamp(48px, calc(var(--jokja-fluid-base) * 0.1), 64px);
    --board-col-likes: clamp(44px, calc(var(--jokja-fluid-base) * 0.09), 58px);
    --board-font-head: clamp(14px, calc(var(--jokja-fluid-base) * 0.039), 24px);
    --board-font-scroll-title: 18px;
    --board-font-pagination: var(--board-font-scroll-title);
    --board-font-row: clamp(13px, calc(var(--jokja-fluid-base) * 0.036), 22px);
    --board-font-title: clamp(14px, calc(var(--jokja-fluid-base) * 0.038), 23px);
    --board-font-meta: clamp(12px, calc(var(--jokja-fluid-base) * 0.032), 18px);
    --board-font-lead: clamp(15px, calc(var(--jokja-fluid-base) * 0.041), 25px);
}

/* ━━ 모바일만: frame 기준 cqw 유동 스케일 (901px 미만) ━━ */
@media (max-width: 900px) {
    @container jokja-frame (min-width: 0px) {
        .board-scroll-layer {
            --board-font-scroll-title: clamp(11px, 3.8cqw, 22px);
            --board-font-pagination:   clamp(11px, 3.8cqw, 22px);
            --board-font-head:         clamp(11px, 3.9cqw, 24px);
            --board-font-row:          clamp(11px, 3.6cqw, 22px);
            --board-font-title:        clamp(12px, 3.8cqw, 23px);
            --board-font-meta:         clamp(10px, 3.2cqw, 18px);
            --board-font-lead:         clamp(11px, 4.1cqw, 25px);
            --board-row-pad-x:         clamp(6px,  2.2cqw, 16px);
            --board-prefix-w:          clamp(28px, 6.5cqw, 60px);
            --board-prefix-gap:        clamp(4px,  1.4cqw, 14px);
            --board-col-author:        clamp(52px, 16cqw,  120px);
            --board-col-date:          clamp(50px, 14cqw,  100px);
            --board-col-comments:      clamp(40px, 10cqw,   58px);
            --board-col-likes:         clamp(32px,  9cqw,   58px);
        }

        .sangso-form-layer.board-scroll-layer .sangso-field-input,
        .sangso-form-layer.board-scroll-layer .sangso-field-textarea {
            font-size: clamp(12px, 3.77cqw, 18px);
        }

        .sangso-form-layer.board-scroll-layer .sangso-submit-btn {
            font-size: clamp(12px, 3.77cqw, 18px);
        }

        .sangso-form-layer.board-scroll-layer .board-scroll-title,
        .sangso-form-layer.board-scroll-layer .board-header .pixel-subtitle {
            font-size: clamp(13px, 4.42cqw, 22px);
        }
    }
}

.scroll-board-container .scroll-ui {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.scroll-board-container .scroll-ui .board-table {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll-board-container .scroll-ui > .board-pagination {
    flex: 0 0 auto;
    margin-top: 4px;
    margin-bottom: 0;
    padding-top: 4px;
}

.scroll-board-container .board-form {
    max-width: 100%;
    background: var(--board-scroll-paper);
    border: 2px solid var(--board-scroll-border);
    box-shadow: none;
    padding: 16px;
}

.complaint-list {
    width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scroll-board-container .board-table {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: visible;
}

.board-search-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 8px 0 10px;
}

.board-search-input {
    flex: 1 1 260px;
    min-width: 0;
}

.board-search-btn,
.board-search-reset-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.scroll-board-container .board-scroll-layer {
    letter-spacing: var(--board-letter-spacing);
}

.scroll-board-container .board-table-head,
.scroll-board-container .board-table-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--board-col-author)) minmax(0, var(--board-col-date)) minmax(0, var(--board-col-comments)) minmax(0, var(--board-col-likes));
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.scroll-board-container .board-table-head {
    padding: 10px var(--board-row-pad-x);
    font-family: var(--font-korean);
    font-size: var(--board-font-head);
    font-weight: 700;
    color: var(--board-scroll-ink);
    background: rgba(197, 217, 217, 0.35);
    border-bottom: 1px solid var(--board-box-stroke);
    text-align: center;
}

.scroll-board-container .board-table-head > span {
    white-space: nowrap;
    min-width: 0;
}

.scroll-board-container .board-table-head .col-title {
    text-align: center;
}

.scroll-board-container .board-table-body.complaint-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.scroll-board-container .board-table-row {
    text-align: center;
    font-family: var(--font-korean);
    font-size: var(--board-font-row);
    font-weight: 500;
    color: var(--board-scroll-ink);
    background: var(--board-box-tile-bg);
    border: none;
    border-bottom: 1px solid var(--board-box-stroke-light, rgba(90, 117, 117, 0.2));
    padding: 12px var(--board-row-pad-x);
    cursor: pointer;
    transition: background 0.12s;
}

.scroll-board-container .board-table-body .board-table-row:last-child {
    border-bottom: none;
}

.scroll-board-container .board-table-row .col-title {
    display: grid;
    grid-template-columns: var(--board-prefix-w) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--board-prefix-gap);
    min-width: 0;
    text-align: left;
    font-weight: 700;
    font-size: var(--board-font-title);
}

.scroll-board-container .board-title-prefix {
    grid-column: 1;
    width: 100%;
    max-width: var(--board-prefix-w);
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.scroll-board-container .board-list-num {
    width: 100%;
    font-size: var(--board-font-meta);
    font-weight: 700;
    color: var(--board-scroll-ink-muted);
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scroll-board-container .board-table-row .board-title-text {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
    text-align: left;
    justify-self: stretch;
}

.scroll-board-container .board-table-row .col-author {
    font-size: calc(var(--board-font-meta) + 1px);
    font-weight: 500;
    color: var(--board-scroll-ink-muted);
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    text-align: center;
    min-width: 0;
}

.scroll-board-container .board-table-row .col-date,
.scroll-board-container .board-table-row .col-comments,
.scroll-board-container .board-table-row .col-likes {
    font-size: calc(var(--board-font-meta) + 1px);
    font-weight: 500;
    color: var(--board-scroll-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.scroll-board-container .board-table-head .col-comments,
.scroll-board-container .board-table-head .col-likes {
    text-align: center;
    font-weight: 700;
}

.scroll-board-container .board-table-head .col-comments {
    color: #5a6a7a;
}

.scroll-board-container .board-table-head .col-likes {
    color: var(--board-scroll-teal-dark, #2a6b6b);
}

.scroll-board-container .board-table-row .board-list-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
    min-width: 0;
    padding: 0 2px;
}

.scroll-board-container .board-table-row .board-list-stat-label {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: -0.02em;
    opacity: 0.9;
}

.scroll-board-container .board-table-row .board-list-stat-count {
    font-size: 1em;
    font-weight: 700;
}

.scroll-board-container .board-table-row .board-list-stat--comments {
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .board-table-row .board-list-stat--comments .board-list-stat-label {
    color: #5a6a7a;
}

.scroll-board-container .board-table-row .board-list-stat--likes {
    color: var(--board-scroll-teal-dark, #2a6b6b);
}

.scroll-board-container .board-table-row .board-list-stat--likes .board-list-stat-label {
    color: var(--board-scroll-teal-dark, #2a6b6b);
}

.scroll-board-container .board-table-row .col-likes {
    font-weight: 700;
    color: var(--board-scroll-teal-dark, #2a6b6b);
}

.scroll-board-container .board-comment-meta button[data-action] {
    border: 0;
    background: transparent;
    color: #214d6d;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0 2px;
}

.scroll-board-container .board-comment-meta button[data-action]:hover {
    text-decoration: underline;
}

/* 좋소 상위 3 — 메달 뱃지 */
.scroll-board-container .board-title-item--top {
    background: rgba(255, 215, 0, 0.08);
}

.scroll-board-container .board-title-item--top .board-title-text {
    color: var(--board-scroll-ink);
    font-weight: 700;
}

.scroll-board-container .board-top-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 1.8vw, 16px);
    line-height: 1;
    min-width: 1.4em;
}

.scroll-board-container .board-table-row.active,
.scroll-board-container .board-title-item.active {
    background: rgba(197, 217, 217, 0.45);
}

.scroll-board-container .board-table-row:hover {
    background: rgba(197, 217, 217, 0.22);
}

.board-detail {
    width: 100%;
    min-height: 0;
    margin-top: 10px;
}

.scroll-board-container .board-detail .board-detail-title {
    margin: 0 0 14px;
}

.scroll-board-container .board-empty {
    padding: 18px;
    border: 2px dashed rgba(90, 117, 117, 0.5);
    border-radius: var(--btn-radius);
    color: var(--board-scroll-ink-muted);
    background: var(--board-scroll-paper-bright);
}

.scroll-board-container .board-header,
#home.page.active .npc-section--sangso .sangso-form-layer .board-header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.board-header--split {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}


#board-list-title[hidden] {
    display: none !important;
}

/* 한성부 제목 네모 → 안내 문구 바로 아래 */
#board.page.active .board-scroll-layer.jokja-ui-blocks,
#jangwon.page.active .board-scroll-layer.jokja-ui-blocks {
    gap: 4px;
}

.board-scroll-layer > .board-header + .board-list-intro {
    margin-top: 0;
    padding: 2px var(--board-row-pad-x) 6px;
}

.jokja-ui-blocks > .board-header:has(+ .board-list-intro) {
    margin-bottom: 0;
}

.scroll-board-container:has(#board-detail-view:not(.hidden)) .board-list-intro,
.scroll-board-container:has(#jangwon-detail-view:not(.hidden)) .board-list-intro {
    display: none;
}

.scroll-board-container .board-scroll-title,
.scroll-board-container .board-header .pixel-subtitle {
    margin: 0;
    margin-bottom: 0;
    font-size: var(--board-font-scroll-title, 18px);
    background: var(--hanseongbu-box-bg);
    border: 1px solid var(--board-box-stroke);
    color: var(--hanseongbu-box-text);
    border-radius: var(--btn-radius);
}

#home.page.active .npc-section--sangso .sangso-form-layer .board-scroll-title,
#home.page.active .npc-section--sangso .sangso-form-layer .board-header .pixel-subtitle {
    margin: 0;
    margin-bottom: 0;
    background: var(--hanseongbu-box-bg);
    border: 1px solid var(--board-box-stroke);
    color: var(--hanseongbu-box-text);
    border-radius: var(--btn-radius);
}

.scroll-board-container .board-scroll-title-btn[hidden] {
    display: none !important;
}
.scroll-board-container .board-scroll-title-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.scroll-board-container .board-scroll-title-btn .board-scroll-title {
    display: inline-block;
}

.scroll-board-container .board-scroll-title-btn:hover .board-scroll-title {
    filter: brightness(0.95);
}

.scroll-board-container .board-detail-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--board-box-stroke-light, rgba(90, 117, 117, 0.2));
}

.scroll-board-container .board-detail-crumb-btn--bottom {
    font-family: var(--font-korean);
    font-size: 14px;
    font-weight: 700;
}

.scroll-board-container .board-table-lead {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px var(--board-row-pad-x);
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--board-box-stroke-light, rgba(90, 117, 117, 0.2));
    background: transparent;
    cursor: default;
    text-align: left;
}

.scroll-board-container .board-table-lead .board-desc-text {
    display: block;
    font-family: var(--font-korean);
    font-size: var(--board-font-lead);
    font-weight: 700;
    line-height: 1.5;
    color: var(--hanseongbu-box-text);
    min-width: 0;
    max-width: 100%;
    text-align: left;
}

.board-top-list,
.jumak-top-list {
    margin-bottom: 12px;
    padding: 10px;
    border: 2px solid rgba(92, 67, 32, 0.4);
    border-radius: var(--btn-radius);
    background: rgba(255, 249, 240, 0.82);
}

.scroll-board-container .board-top-list {
    border: 1px solid var(--board-box-stroke);
    background: var(--board-box-panel-bg);
    border-radius: var(--btn-radius);
}

.scroll-board-container .board-top-title {
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 12px;
    color: var(--board-scroll-ink);
    margin-bottom: 8px;
}

.scroll-board-container .board-list-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--board-box-stroke-light);
}

.scroll-board-container .board-list-tabs--only-filters {
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 4px;
}

.scroll-board-container .board-list-tabs-btns--end {
    margin-left: auto;
}

.scroll-board-container .board-list-tabs-label {
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 12px;
    color: var(--board-scroll-ink);
    flex-shrink: 0;
    white-space: nowrap;
}

.scroll-board-container .board-list-tabs-btns {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.scroll-board-container .board-tab-btn {
    font-family: var(--font-korean);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.1;
    width: auto;
    min-width: 36px;
    height: 32px;
    padding: 0 8px;
    cursor: pointer;
    border: 1px solid var(--board-box-stroke);
    border-radius: var(--btn-radius);
    background: var(--board-box-tile-bg);
    color: var(--board-scroll-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s, border-color 0.1s, transform 0.1s;
    touch-action: manipulation;
}

.scroll-board-container .board-tab-btn:hover {
    background: rgba(197, 217, 217, 0.4);
    border-color: rgba(90, 117, 117, 0.32);
    transform: scale(1.04);
}

.scroll-board-container .board-tab-btn.active {
    background: linear-gradient(180deg, rgba(109, 138, 138, 0.88) 0%, rgba(74, 99, 99, 0.92) 100%);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    text-shadow: none;
    transform: scale(1.04);
    box-shadow: 0 0 0 1px rgba(140, 168, 168, 0.22);
}

.brush-down-icon {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
    margin-right: 2px;
}

.board-top5 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

/* 장원급제 — 아래 상소문 목록과 동일한 세로 나열 */
.scroll-board-container .board-top5 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-template-columns: unset;
}

.scroll-board-container .board-top-item {
    width: 100%;
    text-align: left;
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4;
    color: var(--board-scroll-ink);
    background: var(--board-box-tile-bg);
    border: 1px solid var(--board-box-stroke);
    border-radius: var(--btn-radius);
    padding: 10px;
    cursor: pointer;
    box-sizing: border-box;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

.scroll-board-container .board-top-item:hover {
    background: rgba(197, 217, 217, 0.35);
    border-color: rgba(90, 117, 117, 0.35);
}

.scroll-board-container .board-top-empty {
    font-size: 12px;
    color: var(--board-scroll-ink-muted);
}

.jumak-top-list .board-top-item {
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 10px;
    text-align: left;
    width: 100%;
    background: rgba(255, 252, 242, 0.95);
    border: 2px solid rgba(107, 70, 31, 0.45);
    border-radius: var(--btn-radius);
    color: #432a12;
    padding: 7px 8px;
    cursor: pointer;
}

.board-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 14px 0 0 auto;
    width: 100%;
}

.scroll-board-container .sub-nav-btn {
    font-family: var(--font-retro);
    font-size: 8px;
    background: linear-gradient(180deg, var(--board-scroll-teal-deep) 0%, var(--board-scroll-teal-dark) 100%);
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
    border-radius: var(--btn-radius);
}

.scroll-board-container .sub-nav-btn.active {
    background: linear-gradient(180deg, var(--board-scroll-border) 0%, var(--board-scroll-teal-dark) 100%);
    color: #fff;
    transform: translateY(2px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
}

.board-pagination {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-shrink: 0;
}

.scroll-board-container .sub-nav-btn.status-btn {
    border-color: var(--board-scroll-teal-dark);
}

.type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    background: var(--sangso-parchment-mid);
    border: 2px solid var(--sangso-parchment-border);
    border-radius: var(--btn-radius);
    padding: 10px;
}

.radio-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: var(--btn-radius);
    border: 2px solid var(--sangso-parchment-border);
    background: var(--sangso-parchment-paper);
    color: var(--sangso-parchment-ink);
    cursor: pointer;
    user-select: none;
}

.radio-label:has(input:checked) {
    background: var(--sangso-parchment-highlight);
    border-color: var(--sangso-parchment-border-dark);
}

.scroll-board-container .ssangsomun-item {
    border-bottom-color: rgba(90, 117, 117, 0.45);
}

.scroll-board-container .item-meta .author {
    color: var(--board-scroll-teal-dark);
}

.scroll-board-container .item-meta .category {
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .item-content {
    color: var(--board-scroll-ink);
}

.scroll-board-container .vote-btn:not(.board-stat-btn),
.scroll-board-container .comment-toggle-btn,
.scroll-board-container .pixel-btn {
    color: var(--board-scroll-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    background: linear-gradient(
        180deg,
        var(--board-scroll-paper-bright) 0%,
        var(--board-scroll-paper) 42%,
        var(--board-scroll-highlight) 100%
    );
    border: 2px solid var(--board-scroll-border);
    border-radius: var(--btn-radius);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 2px 0 rgba(90, 117, 117, 0.25);
}

.scroll-board-container .pixel-btn:active,
.scroll-board-container .vote-btn:not(.board-stat-btn):active,
.scroll-board-container .comment-toggle-btn:active {
    transform: translate(1px, 1px);
    background: var(--board-scroll-teal-mid);
    box-shadow: inset 0 1px 2px rgba(90, 117, 117, 0.25);
}

.scroll-board-container .comment-section {
    background: rgba(140, 168, 168, 0.12);
    border-top-color: rgba(90, 117, 117, 0.4);
}

.scroll-board-container .comment-item {
    border-left-color: var(--board-scroll-teal-deep);
}

.scroll-board-container .comment-user {
    color: var(--board-scroll-teal-dark);
}

/* 한성부 페이지네이션 = 제목(.board-scroll-title)과 동일 글자 크기 (.small 8px !important 무시) */
.scroll-board-container .board-pagination .board-pagination-btn,
.scroll-board-container .board-pagination .board-pagination-info,
.scroll-board-container .board-pagination .pixel-btn,
.scroll-board-container .board-pagination #board-page-info {
    font-family: var(--font-korean) !important;
    font-weight: 700 !important;
    font-size: var(--board-font-scroll-title, 18px) !important;
    line-height: 1.25 !important;
    letter-spacing: var(--board-letter-spacing);
}

.scroll-board-container .board-pagination #board-page-info,
.scroll-board-container .board-pagination .board-pagination-info {
    color: var(--board-scroll-ink);
    text-shadow: none;
    font-variant-numeric: tabular-nums;
    min-width: 4em;
    text-align: center;
    padding: 6px 10px !important;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
}

.scroll-board-container .board-pagination .board-pagination-btn,
.scroll-board-container .board-pagination .pixel-btn {
    min-height: unset;
    min-width: 4.5em;
    padding: 6px clamp(14px, calc(var(--jokja-fluid-base, 320px) * 0.05), 24px) !important;
    color: var(--board-scroll-ink);
    text-shadow: none;
    background: var(--board-box-tile-bg);
    border: 1px solid var(--board-box-stroke);
    border-radius: var(--btn-radius);
    box-shadow: none;
}

.scroll-board-container .board-pagination .pixel-btn:hover:not(:disabled) {
    background: rgba(197, 217, 217, 0.4);
    border-color: rgba(90, 117, 117, 0.32);
}

.scroll-board-container .board-pagination .pixel-btn:active:not(:disabled) {
    background: rgba(197, 217, 217, 0.45);
    transform: translate(1px, 1px);
    box-shadow: none;
}

.scroll-board-container .board-pagination .pixel-btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.scroll-board-container .board-detail {
    background: rgba(255, 255, 255, 0.88);
    border: none;
    border-radius: 3px;
    padding: 8px 10px 8px;
    box-sizing: border-box;
    box-shadow: none;
}

.scroll-board-container .board-detail-post {
    padding: 0;
    border-bottom: none;
}

.scroll-board-container .board-detail-crumb {
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 700;
    color: var(--board-scroll-ink-muted);
}

.board-detail-nav--footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(90, 117, 117, 0.2);
}

.scroll-board-container .board-detail-top {
    display: none;
}

.scroll-board-container .board-detail-crumb {
    margin: 0;
    flex: 1;
    min-width: 0;
}

.scroll-board-container .board-detail-crumb-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.scroll-board-container .board-detail-crumb-btn:hover .board-detail-crumb-main {
    text-decoration: underline;
}

.scroll-board-container .board-detail-crumb-main {
    color: var(--board-scroll-teal-deep);
}

.scroll-board-container .board-detail-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
}

.scroll-board-container .board-nav-btn {
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    padding: 7px 10px;
    border: 1px solid rgba(90, 117, 117, 0.35);
    border-radius: 6px;
    background: rgba(250, 250, 244, 0.95);
    color: var(--board-scroll-ink);
    cursor: pointer;
    white-space: nowrap;
}

.scroll-board-container .board-nav-btn:hover:not(:disabled) {
    background: var(--board-scroll-highlight);
    border-color: var(--board-scroll-teal-mid);
}

.scroll-board-container .board-nav-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.scroll-board-container .board-nav-icon {
    display: inline-block;
    margin-right: 2px;
    font-size: 11px;
    color: var(--board-scroll-teal-deep);
}

#board-detail-view > #board-back-to-list {
    display: none;
}

.scroll-board-container .board-detail-title {
    margin: 0 0 14px;
    font-family: var(--font-korean);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--board-scroll-ink);
    word-break: break-word;
    overflow-wrap: break-word;
}

.scroll-board-container .board-detail-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.scroll-board-container .board-detail-author {
    font-family: var(--font-korean);
    font-size: 14px;
    font-weight: 700;
    color: var(--board-scroll-ink);
    min-width: 0;
}

.scroll-board-container .board-author-with-avatar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.scroll-board-container .board-author-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--board-scroll-border);
    border-radius: 50%;
    object-fit: cover;
    background: var(--board-scroll-paper-bright);
    image-rendering: auto;
}

.scroll-board-container .board-author-avatar--xs {
    width: 18px;
    height: 18px;
}

.scroll-board-container .board-author-avatar--sm {
    width: 22px;
    height: 22px;
}

.scroll-board-container .board-author-avatar--md {
    width: 32px;
    height: 32px;
}

.scroll-board-container .board-author-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.scroll-board-container .board-comment-user {
    margin-bottom: 6px;
}

.scroll-board-container .board-comment-user .board-author-name {
    font-size: 13px;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-detail-author .board-author-name {
    font-size: 14px;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-detail-header-utils {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    justify-content: flex-end;
}

.scroll-board-container .board-detail-header-utils .board-detail-datetime {
    margin: 0;
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 500;
    color: var(--board-scroll-ink-muted);
    white-space: nowrap;
}

.scroll-board-container .board-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.scroll-board-container .board-edit-btn {
    background: #fff;
    color: var(--main-dark);
    border: 2px solid rgba(46, 111, 145, 0.35);
}

.scroll-board-container .board-detail-edit-form {
    display: grid;
    gap: 12px;
    margin: 12px 0 16px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 2px solid rgba(46, 111, 145, 0.2);
    text-align: left;
}

.scroll-board-container .board-detail-edit-form .pixel-textarea {
    min-height: 140px;
}

.scroll-board-container .board-edit-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.scroll-board-container .board-edit-save-btn {
    background: linear-gradient(180deg, #3d8fb8 0%, #2e6f91 100%);
    color: #fff;
}

.scroll-board-container .board-delete-btn {
    font-family: var(--font-korean);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    min-height: unset;
    line-height: 1.3;
    color: #5a2020;
    background: rgba(255, 240, 240, 0.92);
    border: 1px solid rgba(120, 40, 40, 0.35);
}

.scroll-board-container .board-detail-header-utils .board-comment-stat-link,
.scroll-board-container .board-url-copy-btn {
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 700;
    color: var(--board-scroll-ink-muted);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.scroll-board-container .board-detail-header-utils .board-comment-stat-link strong {
    font-weight: 700;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-detail-post > .board-detail-datetime {
    display: none;
}

.scroll-board-container .board-detail-datetime {
    margin: 0;
    font-family: var(--font-korean);
    font-size: 12px;
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .board-detail-body {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(90, 117, 117, 0.2);
    line-height: 1.65;
    font-size: clamp(14px, calc(var(--jokja-fluid-base) * 0.036), 16px);
    white-space: pre-wrap;
    color: var(--board-scroll-ink);
    letter-spacing: var(--board-letter-spacing);
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

.scroll-board-container .board-detail-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(90, 117, 117, 0.2);
    font-family: var(--font-korean);
}

.scroll-board-container .board-detail-stats-left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.scroll-board-container .board-detail-stats-left .board-stat-btn {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    line-height: 1;
}

.scroll-board-container .board-detail-stats-left .board-stat-icon {
    width: 22px;
    height: 22px;
    line-height: 0;
}

.scroll-board-container .board-detail-stats-left .board-stat-text,
.scroll-board-container .board-detail-stats-left .board-stat-label,
.scroll-board-container .board-detail-stats-left .board-stat-count {
    font-size: 14px;
    line-height: 1.2;
    margin: 0;
}

.scroll-board-container .board-detail-stats-share {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
}

.scroll-board-container .board-share-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 148px;
    padding: 6px 0;
    border: 1px solid rgba(90, 117, 117, 0.28);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 6px 18px rgba(40, 55, 55, 0.14);
}

.scroll-board-container .board-share-menu.hidden {
    display: none;
}

.scroll-board-container .board-share-menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: var(--font-korean);
    font-size: 13px;
    font-weight: 600;
    color: var(--board-scroll-ink);
    cursor: pointer;
}

.scroll-board-container .board-share-menu button:hover,
.scroll-board-container .board-share-menu button:focus-visible {
    background: rgba(90, 117, 117, 0.1);
    outline: none;
}

.scroll-board-container .board-stat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--board-scroll-ink);
    font-family: inherit;
}

.scroll-board-container .board-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-stat-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.scroll-board-container .board-stat-label {
    font-weight: 700;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-stat-count {
    font-weight: 700;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-like-btn.vote-btn--voted,
.scroll-board-container .board-like-btn.vote-btn:disabled {
    cursor: not-allowed;
    opacity: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

.scroll-board-container .board-like-btn.vote-btn--voted:active,
.scroll-board-container .board-like-btn.vote-btn:disabled:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.scroll-board-container .board-stat-svg {
    display: block;
}

.scroll-board-container .board-stat-svg--sm {
    width: 20px;
    height: 20px;
}

.scroll-board-container .board-comment-section {
    padding-top: 0;
}

.scroll-board-container .board-comment-sort-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(90, 117, 117, 0.25);
}

.scroll-board-container .board-comment-sort-btn {
    font-family: var(--font-korean);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 14px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--board-scroll-ink-muted);
    cursor: pointer;
}

.scroll-board-container .board-comment-sort-btn.is-active {
    color: var(--board-scroll-ink);
    border-bottom-color: var(--board-scroll-teal-deep);
}

.scroll-board-container .board-comment-list {
    margin-bottom: 12px;
}

.scroll-board-container .board-comment-list > .board-comment-item {
    padding: 10px 0;
    margin: 0;
    border-bottom: 1px solid rgba(90, 117, 117, 0.22);
}

.scroll-board-container .board-comment-list > .board-comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.scroll-board-container .board-comment-empty {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .board-comment-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.scroll-board-container .board-comment-main {
    flex: 1;
    min-width: 0;
}

.scroll-board-container .board-comment-like-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
    min-width: 36px;
}

.scroll-board-container .board-reply-item {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: none;
}

.scroll-board-container .board-reply-item:last-child {
    margin-bottom: 0;
}

.scroll-board-container .board-comment-user {
    margin-bottom: 6px;
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 13px;
    color: var(--board-scroll-ink);
}

.scroll-board-container .board-comment-body {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--board-scroll-ink);
    white-space: pre-wrap;
}

.scroll-board-container .board-comment-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .board-comment-date {
    font-size: 12px;
    color: var(--board-scroll-ink-muted);
    white-space: nowrap;
}

.scroll-board-container .board-reply-toggle-btn {
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--board-scroll-teal-dark);
    cursor: pointer;
}

.scroll-board-container .board-comment-like-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-family: var(--font-korean);
    padding: 4px 6px;
    border: none;
    background: transparent;
    color: var(--board-scroll-ink-muted);
    cursor: pointer;
}

.scroll-board-container .board-comment-like-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--board-scroll-ink-muted);
}

.scroll-board-container .board-comment-like-btn--liked .board-comment-like-count {
    color: #e74c5c;
}

.scroll-board-container .board-comment-like-btn--liked,
.scroll-board-container .board-comment-like-btn:disabled {
    cursor: not-allowed;
}

.scroll-board-container .board-comment-like-btn:disabled {
    opacity: 0.75;
}

.scroll-board-container .board-reply-list {
    margin: 8px 0 0 12px;
    padding-left: 10px;
    border-left: 2px solid rgba(90, 117, 117, 0.25);
}

.scroll-board-container .board-reply-compose,
.scroll-board-container .board-comment-compose {
    display: flex;
    gap: 6px;
    align-items: center;
}

.scroll-board-container .board-comment-compose--inline {
    flex-direction: column;
    align-items: stretch;
}

.scroll-board-container .board-comment-compose--inline .board-comment-input {
    width: 100%;
    resize: vertical;
    min-height: 44px;
    font-size: 13px;
    line-height: 1.4;
}

.scroll-board-container .board-comment-auth-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.scroll-board-container .board-comment-auth-row.hidden {
    display: none;
}

.scroll-board-container .board-comment-auth-row .board-comment-id-input,
.scroll-board-container .board-comment-auth-row .board-comment-pw-input,
.scroll-board-container .board-comment-auth-row .board-comment-pw-confirm-input {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    font-size: 12px;
    padding: 4px 6px;
}

.scroll-board-container .board-comment-auth-row .board-comment-pw-confirm-input:not(.hidden) {
    flex: 1 1 100%;
}

.scroll-board-container .board-reply-compose.board-comment-compose--inline {
    flex-direction: column;
    align-items: stretch;
    margin-top: 8px;
}

.scroll-board-container .board-reply-compose.board-comment-compose--inline .board-reply-input {
    width: 100%;
    resize: vertical;
    min-height: 40px;
    font-size: 13px;
    line-height: 1.4;
}

.scroll-board-container .board-reply-compose.board-comment-compose--inline .board-reply-send-btn {
    align-self: flex-end;
}

.scroll-board-container .board-comment-compose--inline .board-comment-send-btn {
    align-self: flex-end;
}

.scroll-board-container .board-reply-compose {
    margin-top: 8px;
}

.scroll-board-container .board-reply-compose.hidden {
    display: none;
}

.scroll-board-container .board-comment-input,
.scroll-board-container .board-reply-input {
    flex: 1;
    min-width: 0;
}

.board-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(12px);
    z-index: 9999;
    padding: 10px 16px;
    border: 2px solid var(--board-scroll-border);
    border-radius: var(--btn-radius);
    background: rgba(250, 250, 244, 0.96);
    color: var(--board-scroll-ink);
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.board-toast.board-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.scroll-board-container .pixel-textarea,
.scroll-board-container .comment-input {
    background: var(--board-scroll-paper-bright);
    border-color: var(--board-scroll-border);
    color: var(--board-scroll-ink);
}

.pixel-subtitle {
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
    background: var(--pixel-surface);
    display: inline-block;
    padding: 5px 10px;
    border: 2px solid var(--pixel-dark);
}

.ssangsomun-item {
    padding: 20px 0;
    border-bottom: 1px dashed rgba(97, 70, 37, 0.5);
    text-align: left;
    width: 100%;
}

.item-meta {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-tag {
    font-size: 10px;
    padding: 2px 6px;
    border: 1px solid var(--pixel-dark);
}

.status-tag.done {
    background: #c8e6c9;
    color: #2e7d32;
}

.status-tag.pending {
    background: #fff9c4;
    color: #fbc02d;
}

.item-meta .author {
    font-weight: bold;
    color: var(--pixel-primary);
    font-size: 14px;
}

.item-meta .category {
    font-size: 12px;
    margin-left: 10px;
}

.item-content {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 본문·댓글에 이미지가 있을 때 레이아웃이 밀리지 않도록 작게 표시 */
.item-content img,
.comment-item img {
    max-width: min(100%, 240px);
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

.vote-btn, .comment-toggle-btn {
    background: var(--pixel-secondary-strong);
    border: 2px solid var(--pixel-dark);
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
}

.vote-btn--voted,
.vote-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    background: #c5d4e8;
}

.item-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

/* Comment Section Styles */
.comment-section {
    background: rgba(0, 0, 0, 0.03);
    border-top: 2px dashed #ccc;
    padding: 15px 0;
    margin-top: 10px;
}

.comment-list {
    margin-bottom: 15px;
}

.comment-item {
    font-size: 13px;
    margin-bottom: 8px;
    padding-left: 10px;
    border-left: 3px solid var(--pixel-primary-muted);
}

.comment-user {
    font-weight: bold;
    color: var(--pixel-primary-dark);
}

.comment-input-area {
    display: flex;
    gap: 5px;
}

.comment-input {
    flex: 1;
    font-size: 12px !important;
    padding: 5px !important;
}

.small {
    padding: 5px 10px !important;
    font-size: 8px !important;
}

/* 포도청 상황실 (Archive) */
.sahun-container {
    background:
        radial-gradient(circle at 12% 14%, rgba(188, 209, 242, 0.18) 0%, transparent 34%),
        radial-gradient(circle at 88% 84%, rgba(139, 165, 205, 0.14) 0%, transparent 36%),
        linear-gradient(180deg, #eff4fd 0%, #dde7f7 52%, #cfdbf0 100%);
    border: 3px solid #2f4468;
    border-radius: var(--btn-radius);
    box-shadow:
        0 8px 0 #243550,
        0 16px 24px rgba(0, 0, 0, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.sahun-container .pixel-subtitle {
    background: #f5f8ff;
    border-color: #2f4468;
    color: #1f2f4c;
    border-radius: var(--btn-radius);
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.status-card {
    background: #eceff1;
    border: 3px solid var(--pixel-dark);
    border-radius: var(--btn-radius);
    text-align: center;
    padding: 15px;
}

.sahun-container .status-card {
    background: #eef3fb;
    border-color: #2f4468;
    color: #1f2f4c;
    border-radius: var(--btn-radius);
}

.archive-filter-card {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.archive-filter-card:hover,
.archive-filter-card:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}

.status-card.highlight {
    background: var(--pixel-secondary-strong);
}

.sahun-container .status-card.highlight {
    background: #c9daf5;
}

.status-card .count {
    font-family: var(--font-retro);
    font-size: 24px;
    margin-bottom: 10px;
}

.process-viz {
    margin-top: 40px;
    padding-top: 20px;
}

.sahun-container .process-viz {
    border-top: 2px dashed rgba(47, 68, 104, 0.35);
}

.viz-track {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.viz-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--pixel-dark);
    transform: translateY(-50%);
    z-index: 0;
}

.sahun-container .viz-track::before {
    background: #2f4468;
}

.v-step {
    background: #fff;
    border: 3px solid var(--pixel-dark);
    border-radius: var(--btn-radius);
    padding: 5px 15px;
    font-size: 12px;
    z-index: 1;
}

.sahun-container .v-step {
    background: #f8fbff;
    border-color: #2f4468;
    color: #1f2f4c;
    border-radius: var(--btn-radius);
}

.v-step.active {
    background: var(--pixel-secondary-strong);
}

.sahun-container .v-step.active {
    background: #d6e4fb;
}

.v-step.processing {
    background: #fff;
    animation: flash 1s infinite alternate;
}

@keyframes flash {
    from { opacity: 1; border-color: var(--pixel-primary); }
    to { opacity: 0.5; border-color: var(--pixel-dark); }
}

/* 주막 (Talk) */
.jumak-desc {
    margin-bottom: 14px;
    color: #f2dfc0;
}

.pixel-svg {
    image-rendering: pixelated;
    shape-rendering: crispEdges;
}

/* ===================================================
   주막 (Jumak) 영역
   =================================================== */

.jumak-container {
    /* 지붕은 곡선만 보이게 — 상단·좌우 직사각 테두리/배경 없음 */
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
    /* 초롱이 위로 삐져나가므로 visible 유지 (hidden 시 상단 잘림) */
    overflow: visible;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

/* pixel-box와 동시 지정 시 남는 흰 박스/테두리 제거 */
.jumak-container.pixel-box {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}

.tavern-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.game-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible;
}

.jumak-container.game-container {
    overflow: visible;
}

.jumak-container::before,
.jumak-container::after {
    content: none;
}

/* --- 주막: 사랑방 패널과 한 덩어리인 지붕(별도 박스 없음) --- */
/* 지붕 뒤에는 별도 색 박스 없음 — 페이지(또는 상위) 배경만 비침 */
.jumak-roof-canopy {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: visible;
    background: transparent;
}

/* (구) roof-strip 복구 시에도 직사각 배경 없음 */
.jumak-roof-strip {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* 초가 지붕 — 곡선에 맞는 외곽만(직각 border 제거) */
.jumak-roof {
    position: relative;
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    height: var(--jumak-roof-h);
    border-radius: 50% 50% 0 0 / 78% 78% 0 0;
    border: none;
    border-bottom: 4px solid #1a0e08;
    overflow: hidden;
    background:
        repeating-linear-gradient(
            90deg,
            #6b4a28 0 3px,
            #8a6238 3px 7px,
            #7a5430 7px 11px,
            #5c3c20 11px 14px
        ),
        linear-gradient(180deg, #9a7248 0%, #7a5230 55%, #4e3018 100%);
    box-shadow:
        0 0 0 2px #2a1810,
        0 0 0 3px rgba(74, 50, 32, 0.35),
        inset 0 -3px rgba(0, 0, 0, 0.22);
}

/* 청사초롱: 지붕·사랑방 경계에 겹침 */
.jumak-chorong-float {
    position: absolute;
    right: clamp(6px, 2.5vw, 20px);
    top: calc(var(--jumak-roof-h) - 14px);
    z-index: 8;
    pointer-events: none;
}

.jumak-cheongsachorong {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    isolation: isolate;
    filter:
        drop-shadow(0 0 14px rgba(255, 200, 80, 0.75))
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}

.jumak-chorong-chain {
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, #3d3d3d, #1a1a1a);
    border: 1px solid #0d0d0d;
}

.jumak-chorong-cap {
    width: 22px;
    height: 8px;
    background: linear-gradient(180deg, #5c4030, #3d2818);
    border: 2px solid #2a1810;
    border-radius: 2px 2px 0 0;
}

.jumak-chorong-ring {
    width: 26px;
    height: 5px;
    background: linear-gradient(180deg, #1a5c3a, #0f3d28);
    border: 1px solid #0a2818;
}

.jumak-chorong-lantern {
    position: relative;
    width: 34px;
    padding: 2px 0;
    background: #6b1414;
    border: 3px solid #4a0e0e;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px #8b2222;
}

.jumak-chorong-bar {
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #0d4d32, #1a6b45, #0d4d32);
    border: 1px solid #062818;
}

.jumak-chorong-bar-t {
    margin-bottom: 2px;
}

.jumak-chorong-bar-b {
    margin-top: 2px;
}

.jumak-chorong-paper {
    position: relative;
    min-height: 36px;
    margin: 0 2px;
    background: linear-gradient(180deg, #fffce8 0%, #ffe8a8 40%, #ffc850 100%);
    border: 2px solid #8b6914;
    box-shadow:
        inset 0 0 14px rgba(255, 235, 160, 1),
        inset 0 0 22px rgba(255, 190, 60, 0.55);
    overflow: hidden;
    animation: jumak-chorong-paper-shimmer 1.35s ease-in-out infinite;
}

.jumak-chorong-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 8px #fff,
        0 0 16px #fff4a0,
        0 0 22px rgba(255, 200, 60, 0.9);
    pointer-events: none;
}

.jumak-chorong-spark-a {
    left: 18%;
    top: 24%;
    animation: jumak-chorong-twinkle 1.35s ease-in-out infinite;
}

.jumak-chorong-spark-b {
    left: 48%;
    top: 58%;
    animation: jumak-chorong-twinkle 1.1s ease-in-out infinite 0.25s;
}

.jumak-chorong-spark-c {
    left: 78%;
    top: 30%;
    animation: jumak-chorong-twinkle 1.5s ease-in-out infinite 0.5s;
}

.jumak-chorong-spark-d {
    left: 35%;
    top: 70%;
    animation: jumak-chorong-twinkle 1.2s ease-in-out infinite 0.15s;
}

.jumak-chorong-spark-e {
    left: 62%;
    top: 18%;
    animation: jumak-chorong-twinkle 1.65s ease-in-out infinite 0.65s;
}

.jumak-chorong-finial {
    width: 8px;
    height: 10px;
    margin-top: 1px;
    background: linear-gradient(180deg, #5c4030, #2a1810);
    border: 2px solid #1a0e08;
    border-radius: 0 0 40% 40%;
}

.jumak-chorong-glow {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle,
        rgba(255, 248, 200, 0.85) 0%,
        rgba(255, 210, 90, 0.5) 35%,
        rgba(255, 160, 40, 0.2) 55%,
        transparent 72%
    );
    z-index: -1;
    animation: jumak-chorong-glow-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes jumak-chorong-twinkle {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.5);
    }
    40% {
        opacity: 1;
        transform: scale(1.35);
    }
    70% {
        opacity: 0.95;
        transform: scale(1);
    }
}

@keyframes jumak-chorong-glow-pulse {
    0%, 100% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(0.88);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
    }
}

@keyframes jumak-chorong-paper-shimmer {
    0%, 100% {
        filter: brightness(1);
        box-shadow:
            inset 0 0 14px rgba(255, 235, 160, 1),
            inset 0 0 22px rgba(255, 190, 60, 0.55);
    }
    50% {
        filter: brightness(1.28);
        box-shadow:
            inset 0 0 22px rgba(255, 255, 220, 1),
            inset 0 0 32px rgba(255, 210, 100, 0.85);
    }
}

@media (prefers-reduced-motion: reduce) {
    .jumak-chorong-spark-a,
    .jumak-chorong-spark-b,
    .jumak-chorong-spark-c,
    .jumak-chorong-spark-d,
    .jumak-chorong-spark-e,
    .jumak-chorong-glow,
    .jumak-chorong-paper {
        animation: none;
    }

    .jumak-chorong-spark {
        opacity: 0.9;
        transform: scale(1);
    }

    .jumak-chorong-glow {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }

    .jumak-chorong-paper {
        filter: none;
    }
}

.jumak-ui {
    position: relative;
    width: 100%;
    z-index: 2;
    padding: 0;
    overflow: visible;
    /* 그라데이션은 지붕 아래 .jumak-inner에만 — 지붕 뒤 직사각 박스 제거 */
    background: transparent;
    border-top: none;
}

.jumak-inner {
    position: relative;
    z-index: 1;
    margin-top: -3px;
    padding: 14px clamp(12px, 3vw, 22px) 18px;
    border-left: 3px solid #4a3c30;
    border-right: 3px solid #4a3c30;
    border-bottom: 3px solid #4a3c30;
    border-radius: 0 0 var(--btn-radius) var(--btn-radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(60, 38, 22, 0.07) 0 2px,
            transparent 2px 7px
        ),
        linear-gradient(
            180deg,
            #7a6a5a 0%,
            #9a8a78 6%,
            #c8b89a 14%,
            #e0d0b8 20%,
            #ecd4aa 28%,
            #d4b080 48%,
            #b88956 100%
        );
}

.jumak-inner .jumak-header {
    position: relative;
    z-index: 1;
    padding-right: clamp(52px, 18vw, 104px);
}

.top-label {
    position: static;
    width: 100%;
    margin-bottom: 8px;
}

.content-wrapper {
    position: static;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topic-box,
.chat-box {
    width: 100%;
    box-sizing: border-box;
}

.chat-box {
    overflow: visible;
    margin-top: 4px;
}

/* foreignObject 안의 내부 컨테이너 */
.tavern-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-size: clamp(12px, 1.1vw, 16px);
    line-height: 1.3;
    color: #2f1d0f;
    text-rendering: geometricPrecision;
}

/* 텍스트 크기: vw 기반 (주막 UI) */
.tavern-inner .pixel-input,
.tavern-inner .pixel-textarea,
.tavern-inner .pixel-btn,
.tavern-inner .board-top-title,
.tavern-inner .jumak-list-head,
.tavern-inner .jumak-title-item,
.tavern-inner .jumak-desc,
.tavern-inner .jumak-empty {
    font-size: inherit;
    line-height: 1.3;
    font-weight: 600;
}

.tavern-inner .jumak-list-head strong,
.tavern-inner #jumak-page-info,
.tavern-inner .jumak-title-text,
.tavern-inner .jumak-post-meta,
.tavern-inner .jumak-desc {
    color: #2f1d0f;
    font-weight: 800;
}


.jumak-header .pixel-subtitle {
    background: rgba(255, 226, 172, 0.96);
    border-color: #3b230f;
    color: #3b2510;
    border-radius: var(--btn-radius);
    font-family: 'DotGothic16', var(--font-korean);
    letter-spacing: 0.02em;
    margin-top: 0;
    position: relative;
    z-index: 5;
}

.jumak-makgeolli-icon {
    display: inline-block;
    vertical-align: -4px;
    margin-right: 6px;
}

.jumak-top-list .board-top-title,
.jumak-list-head strong,
#jumak-open-write,
#jumak-prev-page,
#jumak-next-page {
    font-family: 'DotGothic16', var(--font-korean);
    letter-spacing: 0.02em;
}

.jumak-top-list,
.jumak-board {
    border-radius: var(--btn-radius);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    padding: clamp(4px, 0.8vw, 12px);
}

.jumak-header .jumak-desc {
    width: 100%;
    margin: 0;
}

.jumak-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.jumak-textarea {
    min-height: 140px;
}

.jumak-board {
    position: relative;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(138, 99, 52, 0.1) 0px,
            rgba(138, 99, 52, 0.1) 2px,
            rgba(255, 246, 225, 0.08) 2px,
            rgba(255, 246, 225, 0.08) 8px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(115, 78, 42, 0.07) 0px,
            rgba(115, 78, 42, 0.07) 1px,
            rgba(255, 246, 225, 0.1) 1px,
            rgba(255, 246, 225, 0.1) 5px
        ),
        rgba(255, 245, 219, 0.92);
    border: 2px solid #6b461f;
    padding: clamp(4px, 0.8vw, 12px);
    max-height: 360px;
    overflow-y: auto;
    border-radius: var(--btn-radius);
}

.jumak-list-head {
    position: relative;
    display: block;
    min-height: 30px;
    margin-bottom: 8px;
    padding-right: 64px;
    font-size: 12px;
    color: #4a3116;
}

.jumak-list-head strong {
    display: inline-block;
    padding-top: 5px;
}

#jumak-open-write,
#jumak-prev-page,
#jumak-next-page {
    background: linear-gradient(
        180deg,
        var(--jumak-btn-light) 0%,
        var(--jumak-btn-mid) 52%,
        var(--jumak-btn-deep) 100%
    );
    border: 2px solid var(--jumak-btn-border);
    color: var(--jumak-btn-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 0 var(--jumak-btn-shadow);
    transition: background 0.1s, transform 0.1s, box-shadow 0.1s;
}

#jumak-open-write:hover,
#jumak-prev-page:hover:not(:disabled),
#jumak-next-page:hover:not(:disabled) {
    background: linear-gradient(180deg, #f8e8c4 0%, #e0bc78 52%, #c89860 100%);
}

#jumak-open-write:active,
#jumak-prev-page:active:not(:disabled),
#jumak-next-page:active:not(:disabled) {
    transform: translateY(2px);
    background: linear-gradient(180deg, #e8c888 0%, #c89850 100%);
    box-shadow:
        inset 0 1px 2px rgba(74, 48, 24, 0.25),
        0 1px 0 var(--jumak-btn-shadow);
}

#jumak-prev-page:disabled,
#jumak-next-page:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#jumak-open-write {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    font-size: 8px;
    font-weight: 700;
    padding: 5px 9px;
    min-height: 0;
    line-height: 1.2;
    border-radius: var(--btn-radius);
}

#jumak-prev-page,
#jumak-next-page {
    font-size: 8px;
    font-weight: 700;
    padding: 6px 12px;
    min-height: 0;
    line-height: 1.2;
}

.jumak-pagination #jumak-page-info {
    color: #5c3d20;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.jumak-list-head strong::before {
    content: "🎃 ";
}

#jumak-detail-view {
    margin-top: 8px;
}

.scroll-board-container #board-detail-view {
    margin-top: 0;
}

.jumak-form-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jumak-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.jumak-title-item {
    text-align: left;
    width: 100%;
    background: rgba(255, 252, 242, 0.95);
    border: 1px solid #7a542a;
    border-radius: var(--btn-radius);
    padding: clamp(4px, 0.8vw, 12px);
    cursor: pointer;
    display: block;
}

.jumak-title-item.active {
    background: rgba(235, 204, 153, 0.86);
    border-color: #5b3816;
}

.jumak-title-text {
    font-family: var(--font-korean);
    font-weight: 700;
    color: #432a12;
}

.jumak-detail {
    background: rgba(255, 252, 244, 0.95);
    border: 2px solid #6b461f;
    padding: clamp(4px, 0.8vw, 12px);
    min-height: 120px;
    border-radius: var(--btn-radius);
}

.jumak-empty {
    color: #666;
    font-size: 13px;
}

.jumak-pagination {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jumak-post {
    padding: 14px 0;
    border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
}

.jumak-post:first-child {
    padding-top: 0;
}

.jumak-post:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.jumak-post-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.jumak-post-author {
    font-weight: 700;
    color: #523317;
}

.jumak-post-time {
    color: #6b6b6b;
    font-size: 12px;
}

.jumak-post-body {
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
}

.jumak-post-title {
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 18px;
    margin: 4px 0 10px;
    color: #432a12;
}

.jumak-post-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.jumak-like-btn,
.jumak-comment-toggle-btn {
    background: linear-gradient(180deg, #efcf96 0%, #d0a45d 100%);
    border: 2px solid #5f3d1d;
    color: #3b2510;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.jumak-comment-section {
    background: rgba(101, 65, 29, 0.06);
    border-top: 2px dashed rgba(100, 66, 31, 0.35);
    padding-top: 10px;
}

.jumak-comment-list {
    margin-bottom: 10px;
}

.jumak-comment-item {
    font-size: 13px;
    margin-bottom: 6px;
    border-left: 3px solid #ba9055;
    padding-left: 8px;
}

.jumak-comment-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.jumak-comment-like-btn,
.jumak-reply-toggle-btn,
.jumak-reply-like-btn {
    background: #ddeeff;
    border: 1px solid var(--pixel-primary-muted);
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}

.jumak-comment-edit-btn,
.jumak-comment-delete-btn,
.jumak-reply-edit-btn,
.jumak-reply-delete-btn {
    background: #f2f2f2;
    border: 1px solid #8a7a6a;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
}

.jumak-comment-author {
    font-weight: 700;
    color: var(--pixel-primary-dark);
}

.jumak-comment-meta,
.jumak-reply-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.jumak-comment-time {
    color: #6b6b6b;
    font-size: 11px;
    white-space: nowrap;
}

.jumak-reply-list {
    margin-top: 8px;
    margin-left: 8px;
}

.jumak-reply-item {
    font-size: 12px;
    margin-bottom: 6px;
    padding-left: 8px;
    border-left: 2px solid #9fbbe0;
}

.jumak-reply-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.jumak-reply-empty {
    color: #777;
    font-size: 12px;
}

.jumak-reply-input-area {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    margin-left: 8px;
}

.jumak-reply-author-input {
    max-width: 100px;
}

.jumak-reply-input {
    flex: 1;
}

.jumak-comment-empty {
    color: #666;
    font-size: 13px;
}

.jumak-comment-input-area {
    display: flex;
    gap: 6px;
}

.jumak-comment-author-input {
    max-width: 110px;
}

.jumak-comment-input {
    flex: 1;
}

#jumak-author[readonly] {
    background: #eef3f9;
}

/* ===================================================
   반응형 (데스크톱 · 넓은 화면)
   =================================================== */

@media (min-width: 901px) {
    :root {
        /* PC 족자 paper_4-desktop.png (512×1024, 흰 배경 PNG) */
        --jokja-src-w: 512;
        --jokja-src-h: 1024;
        --jokja-layer-margin: 9.5% 16% 7.5% 8.5%;
        --jokja-parchment-inset-top: 9.5%;
        --jokja-parchment-inset-right: 16%;
        --jokja-parchment-inset-bottom: 7.5%;
        --jokja-parchment-inset-left: 8.5%;
        --jokja-safe-block: 2px;
        /* 웹 설계 고정 — 중앙·오프셋 (반응형 시에도 동일 px) */
        --jokja-web-content-shift-x: 0;
        --jokja-web-content-shift-y: 0;
        --jokja-parchment-inset-top: 0;
        --jokja-parchment-inset-right: 0;
        --jokja-parchment-inset-bottom: 0;
        --jokja-parchment-inset-left: 0;
        --jokja-web-layer-pad: 2px 1px 6px;
        --jokja-web-layer-gap: 3px;
        /* 웹 UI 블록 고정 크기 (족자만 줄어들고 블록 px는 불변) */
        --board-block-font-scroll-title: 18px;
        --board-block-font-pagination: 18px;
        --board-block-font-head: 16px;
        --board-block-font-row: 14px;
        --board-block-font-title: 15px;
        --board-block-font-meta: 13px;
        --board-block-font-lead: 15px;
        --board-block-row-pad-x: 12px;
        --board-block-prefix-w: 52px;
        --board-block-prefix-gap: 8px;
        --board-block-col-gap: 16px;
        --board-block-col-author: 108px;
        --board-block-col-date: 100px;
        --board-block-col-comments: 52px;
        --board-block-col-likes: 56px;
        --board-block-head-pad-y: 10px;
        --board-block-row-pad-y: 12px;
        --sangso-block-title: 20px;
        --sangso-block-input-font: 14px;
        --sangso-block-textarea-font: 14px;
        --sangso-block-submit-font: 14px;
        --sangso-block-input-pad: 8px 10px;
        --sangso-block-textarea-pad: 10px 12px;
        --sangso-block-submit-pad: 10px 20px;
        --sangso-block-gap: 6px;
        --sangso-block-header-mb: 4px;
        /* 메인 영역 안에서 족자 비율 유지 + 가로·세로에 맞춰 최대 확대(contain, 잘림 없음) */
        --jokja-max-w: var(--jokja-layout-max-w);
        --jokja-max-h: calc(var(--app-main-h) - var(--jokja-safe-block));
        --jokja-scaled-vis-w: min(
            var(--jokja-max-w),
            calc(var(--jokja-max-h) * var(--jokja-src-h) / var(--jokja-src-w))
        );
        --jokja-scaled-vis-h: calc(var(--jokja-scaled-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
        /* 프레임 논리 크기 = 화면에 맞춘 최종 크기(scale 1과 동등) */
        --jokja-vis-w: var(--jokja-scaled-vis-w);
        --jokja-vis-h: var(--jokja-scaled-vis-h);
        --jokja-frame-w: calc(var(--jokja-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
        --jokja-frame-h: var(--jokja-vis-w);
        --jokja-web-scale: 1;
        --jokja-fluid-base: var(--jokja-scaled-vis-w);
        --sangso-form-scale: 1;
    }

    /* 한성부/장원: 가로를 메인 영역 실폭까지 쓰고, 세로는 넘치지 않게 맞춤 */
    @supports (width: 1cqw) {
        #board.page.active .scroll-board-container.board-scroll-wrap,
        #jangwon.page.active .scroll-board-container.board-scroll-wrap {
            --jokja-scaled-vis-w: min(
                100cqw,
                calc((var(--app-main-h) - var(--jokja-safe-block)) * var(--jokja-src-h) / var(--jokja-src-w))
            );
            --jokja-vis-w: var(--jokja-scaled-vis-w);
            --jokja-vis-h: calc(var(--jokja-scaled-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
            --jokja-frame-w: calc(var(--jokja-vis-w) * var(--jokja-src-w) / var(--jokja-src-h));
            --jokja-frame-h: var(--jokja-vis-w);
            --jokja-fluid-base: var(--jokja-scaled-vis-w);
            width: var(--jokja-scaled-vis-w) !important;
            max-width: none !important;
            height: var(--jokja-vis-h);
            min-height: var(--jokja-vis-h);
            max-height: calc(var(--app-main-h) - var(--jokja-safe-block));
        }
    }

    /* 상소문 족자 — 웹: 배경만 -90°, 본문은 가로 족자 안쪽에 배치 */
    .scroll-board-container.board-scroll-wrap,
    .sangso-scroll-wrap.board-scroll-wrap,
    #home.page.active .npc-section--sangso .sangso-scroll-wrap {
        width: var(--jokja-scaled-vis-w) !important;
        max-width: var(--jokja-max-w);
        height: var(--jokja-scaled-vis-h);
        min-height: var(--jokja-scaled-vis-h);
        max-height: var(--jokja-max-h);
        position: relative;
        overflow: visible;
        flex: 0 0 auto;
    }

    .board-scroll-frame {
        display: block;
        width: var(--jokja-vis-w) !important;
        min-width: var(--jokja-vis-w);
        max-width: var(--jokja-vis-w);
        height: var(--jokja-vis-h) !important;
        min-height: var(--jokja-vis-h);
        max-height: var(--jokja-vis-h);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(var(--jokja-web-scale));
        transform-origin: center center;
        overflow: hidden;
    }

    .board-scroll-frame > * {
        grid-area: unset;
    }

    .board-scroll-frame .board-scroll-picture,
    .board-scroll-frame .board-scroll-img {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--jokja-frame-w);
        height: var(--jokja-frame-h);
        min-height: unset;
        max-width: none;
        max-height: none;
        transform: translate(-50%, -50%) rotate(-90deg);
        transform-origin: center center;
        z-index: 0;
    }

    .board-scroll-frame .board-scroll-picture .board-scroll-img {
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: 100%;
        transform: none;
    }

    /* 웹: 상소·한성부 동일 inset + 고정 오프셋 (설계값) */
    .board-scroll-frame > .board-scroll-layer.jokja-ui-blocks,
    .board-scroll-frame > .sangso-form-layer.board-scroll-layer.jokja-ui-blocks {
        position: absolute;
        top: var(--jokja-web-inset-top);
        right: var(--jokja-web-inset-right);
        bottom: var(--jokja-web-inset-bottom);
        left: var(--jokja-web-inset-left);
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        padding: var(--jokja-web-layer-pad);
        gap: var(--jokja-web-layer-gap);
        transform: translate(var(--jokja-web-content-shift-x), var(--jokja-web-content-shift-y));
        transform-origin: center center;
        box-sizing: border-box;
        min-height: 0;
        min-width: 0;
        overflow-x: clip;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        z-index: 1;
        flex: none;
    }

    /* 웹 고정 블록 토큰 → CSS 변수에 매핑 (cqw/유동 무시) */
    .scroll-board-container {
        --board-font-scroll-title: var(--board-block-font-scroll-title);
        --board-font-pagination: var(--board-block-font-pagination);
        --board-font-head: var(--board-block-font-head);
        --board-font-row: var(--board-block-font-row);
        --board-font-title: var(--board-block-font-title);
        --board-font-meta: var(--board-block-font-meta);
        --board-font-lead: var(--board-block-font-lead);
        --board-row-pad-x: var(--board-block-row-pad-x);
        --board-prefix-w: var(--board-block-prefix-w);
        --board-prefix-gap: var(--board-block-prefix-gap);
        --board-col-author: var(--board-block-col-author);
        --board-col-date: var(--board-block-col-date);
        --board-col-comments: var(--board-block-col-comments);
        --board-col-likes: var(--board-block-col-likes);
    }

    /* 블록 요소: flex로 눌리지 않게, 고정 font-size */
    .jokja-ui-blocks > .board-header {
        flex: 0 0 auto;
        margin-bottom: var(--sangso-block-header-mb);
    }

    .jokja-ui-blocks > #board-list-view,
    .jokja-ui-blocks > #board-detail-view {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
    }

    .jokja-ui-blocks .board-scroll-title,
    .jokja-ui-blocks .board-header .pixel-subtitle {
        font-size: var(--board-block-font-scroll-title) !important;
        line-height: 1.25;
        padding: 6px var(--board-block-row-pad-x);
    }

    .jokja-ui-blocks .board-table-head,
    .jokja-ui-blocks .board-table-row {
        column-gap: var(--board-block-col-gap);
    }

    .jokja-ui-blocks .board-table-head {
        padding: var(--board-block-head-pad-y) var(--board-block-row-pad-x);
        font-size: var(--board-block-font-head);
    }

    .jokja-ui-blocks .board-table-row {
        padding: var(--board-block-row-pad-y) var(--board-block-row-pad-x);
        font-size: var(--board-block-font-row);
    }

    .jokja-ui-blocks .board-table-row .col-title,
    .jokja-ui-blocks .board-title-text {
        font-size: var(--board-block-font-title);
    }

    .jokja-ui-blocks .board-table-row .col-author,
    .jokja-ui-blocks .board-table-row .col-date,
    .jokja-ui-blocks .board-table-row .col-comments,
    .jokja-ui-blocks .board-table-row .col-likes {
        font-size: var(--board-block-font-meta);
    }

    .jokja-ui-blocks .board-table-row .col-title {
        grid-template-columns: var(--board-block-prefix-w) minmax(0, 1fr);
        column-gap: var(--board-block-prefix-gap);
    }

    .jokja-ui-blocks .board-title-prefix {
        max-width: var(--board-block-prefix-w);
    }

    .jokja-ui-blocks .board-table-row .board-title-text {
        text-align: left;
    }

    .jokja-ui-blocks .board-table-lead .board-desc-text {
        font-size: var(--board-block-font-lead);
    }

    .jokja-ui-blocks .board-pagination .board-pagination-btn,
    .jokja-ui-blocks .board-pagination .board-pagination-info,
    .jokja-ui-blocks .board-pagination #board-page-info {
        font-size: var(--board-block-font-pagination) !important;
    }

    /* 상소문 웹: 한성부와 동일 inset, 고정 블록 크기 */
    #home.page.active .board-scroll-frame > .sangso-form-layer.jokja-ui-blocks {
        top: var(--jokja-web-inset-top);
        right: var(--jokja-web-inset-right);
        bottom: var(--jokja-web-inset-bottom);
        left: var(--jokja-web-inset-left);
        padding: var(--jokja-web-layer-pad);
        gap: var(--sangso-block-gap);
        transform: translate(var(--jokja-web-content-shift-x), var(--jokja-web-content-shift-y));
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .board-scroll-title,
    #home.page.active .sangso-form-layer.jokja-ui-blocks .board-header .pixel-subtitle {
        font-size: var(--sangso-block-title) !important;
        padding: 6px var(--board-block-row-pad-x);
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .sangso-field-input {
        margin-top: 2px;
        padding: var(--sangso-block-input-pad);
        font-size: var(--sangso-block-input-font) !important;
        line-height: 1.35;
        flex: 0 0 auto;
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .sangso-title-input {
        padding: var(--sangso-block-input-pad);
        font-size: var(--sangso-block-input-font) !important;
        line-height: 1.35;
        flex: 0 0 auto;
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .sangso-field-textarea {
        padding: var(--sangso-block-textarea-pad);
        font-size: var(--sangso-block-textarea-font) !important;
        line-height: 1.45;
        flex: 1 1 0;
        min-height: 52px;
        max-height: calc(100% - 20px);
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .sangso-submit-btn {
        margin-top: 2px;
        padding: var(--sangso-block-submit-pad);
        font-size: var(--sangso-block-submit-font) !important;
        line-height: 1.2;
        flex: 0 0 auto;
    }

    .board-scroll-frame > .board-scroll-layer > *,
    .board-scroll-frame > .sangso-form-layer.board-scroll-layer > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .scroll-board-container .board-scroll-layer .scroll-ui,
    .scroll-board-container .board-scroll-layer .board-header,
    .scroll-board-container .board-scroll-layer #board-list-view,
    .scroll-board-container .board-scroll-layer #board-detail-view,
    .scroll-board-container .board-scroll-layer .board-detail-post,
    .scroll-board-container .board-scroll-layer .board-form,
    .scroll-board-container .board-scroll-layer .board-table,
    .scroll-board-container .board-scroll-layer .complaint-list,
    #home.page.active .sangso-form-layer.board-scroll-layer .board-header,
    #home.page.active .sangso-form-layer.board-scroll-layer .sangso-field-input,
    #home.page.active .sangso-form-layer.board-scroll-layer .sangso-field-textarea,
    #home.page.active .sangso-form-layer.board-scroll-layer .sangso-submit-btn {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .scroll-board-container .board-scroll-layer .scroll-ui {
        padding-left: 0;
        padding-right: 0;
    }

    #home.page.active .npc-section--sangso .sangso-scroll-wrap .board-scroll-frame {
        width: var(--jokja-vis-w) !important;
        height: var(--jokja-vis-h) !important;
        min-height: var(--jokja-vis-h);
        max-height: var(--jokja-vis-h);
        overflow: hidden;
        transform: translate(-50%, -50%) scale(var(--jokja-web-scale));
    }

    .logo {
        font-size: 22px;
    }

    .nav-btn {
        font-size: 13px;
        padding: 10px 18px;
        min-height: 42px;
    }

    #main-content {
        padding: 20px clamp(20px, 3vw, 56px);
    }

    #home .quest-info {
        max-width: min(720px, var(--jokja-width));
    }

    #home .quest-info p {
        font-size: 16px;
        line-height: 1.65;
    }

    #npc-section:not(.npc-section--sangso) {
        --npc-avail-h: calc(var(--app-main-h) - 72px);
    }

    #npc-section:not(.npc-section--sangso) .speech-bubble {
        min-width: min(320px, 48vw);
        max-width: min(640px, 52vw);
        padding: 18px 22px;
        font-size: 16px;
    }

    #npc-section:not(.npc-section--sangso) .npc-text-line {
        font-size: 16px;
        max-width: 100%;
    }

    #npc-section:not(.npc-section--sangso) .npc-sprite {
        width: min(88vw, calc(var(--npc-avail-h) * 500 / 720), 880px);
        max-height: min(calc(var(--npc-avail-h) * 0.92), 920px);
    }

    /* (웹) scroll-board-container 타이포는 상단 --board-block-* 매핑 사용 */
    .scroll-board-container .board-scroll-title,
    .scroll-board-container .board-header .pixel-subtitle {
        font-size: var(--board-block-font-scroll-title);
    }

    .scroll-board-container .board-pagination .board-pagination-btn,
    .scroll-board-container .board-pagination .board-pagination-info,
    .scroll-board-container .board-pagination .pixel-btn,
    .scroll-board-container .board-pagination #board-page-info {
        font-size: var(--board-font-scroll-title) !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .scroll-board-container .board-desc,
    .scroll-board-container .board-table-lead .board-desc-text {
        font-size: var(--board-block-font-lead);
    }

    .scroll-board-container .board-top-title,
    .scroll-board-container .board-list-tabs-label {
        font-size: clamp(11px, calc(var(--jokja-fluid-base) * 0.026), 15px);
    }

    .scroll-board-container .board-tab-btn {
        font-size: clamp(8px, calc(var(--jokja-fluid-base) * 0.018), 11px);
        min-width: clamp(36px, calc(var(--jokja-fluid-base) * 0.052), 48px);
        height: clamp(28px, calc(var(--jokja-fluid-base) * 0.048), 38px);
    }

    .scroll-board-container .board-title-item,
    .scroll-board-container .board-top-item {
        font-size: clamp(11px, calc(var(--jokja-fluid-base) * 0.026), 15px);
    }

    #home.page.active .npc-section--sangso {
        --sangso-form-scale: 1.0;
    }

    #home.page.active .npc-section--sangso .sangso-field-input,
    #home.page.active .npc-section--sangso .sangso-field-textarea {
        font-size: clamp(13px, calc(var(--jokja-fluid-base) * 0.036), 17px);
    }

    #home.page.active .npc-section--sangso .sangso-form-layer .board-header {
        gap: 0;
        margin-bottom: 1px;
    }

    #home.page.active .npc-section--sangso .sangso-form-layer .board-scroll-title,
    #home.page.active .npc-section--sangso .sangso-form-layer .board-header .pixel-subtitle {
        font-size: clamp(13px, calc(var(--jokja-fluid-base) * 0.036), 18px);
        padding: 4px 8px;
        line-height: 1.2;
    }

    #home.page.active .npc-section--sangso .sangso-field-textarea {
        flex: 1 1 0;
        min-height: 80px;
        max-height: min(58vh, calc(var(--jokja-fixed-h, 500px) * 0.62));
    }

    #home.page.active .npc-section--sangso .sangso-submit-btn {
        font-size: clamp(13px, calc(var(--jokja-fluid-base) * 0.036), 17px);
        padding: 6px 16px;
        margin-top: 2px;
    }

    /* ━━ 웹: 모바일과 동일 게시판·흰 배경, 족자 밖 overflow 차단 ━━ */
    #main-content:has(#board.page.active),
    #main-content:has(#jangwon.page.active),
    #main-content:has(#home.page.active .npc-section--sangso) {
        padding: 0;
    }

    #board.page.active,
    #jangwon.page.active {
        align-items: stretch;
        justify-content: flex-start;
    }

    #home.page.active:has(.npc-section--sangso) {
        align-items: stretch;
        justify-content: flex-start;
    }

    #home.page.active:has(.npc-section--sangso) .ulrim-madang,
    #home.page.active:has(.npc-section--sangso) .npc-section--sangso {
        width: 100%;
        max-width: 100%;
    }

    #home.page.active .npc-section--sangso {
        align-items: stretch;
        justify-content: flex-start;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    #home.page.active .npc-section--sangso .sangso-scroll-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0;
        flex: 1 1 auto;
        min-height: 0;
    }

    .board-scroll-picture {
        display: none !important;
    }

    .scroll-board-container.board-scroll-wrap,
    #home.page.active .npc-section--sangso .sangso-scroll-wrap.board-scroll-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--app-main-h);
        min-height: var(--app-main-h);
        max-height: var(--app-main-h);
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    @supports (width: 1cqw) {
        #board.page.active .scroll-board-container.board-scroll-wrap,
        #jangwon.page.active .scroll-board-container.board-scroll-wrap {
            width: 100% !important;
            max-width: 100% !important;
            --jokja-fluid-base: 100cqw;
        }
    }

    .board-scroll-frame,
    #home.page.active .npc-section--sangso .sangso-scroll-wrap .board-scroll-frame {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        background: var(--mobile-inner-bg);
        overflow: hidden;
        display: grid;
    }

    .board-scroll-frame > * {
        grid-area: 1 / 1;
    }

    .board-scroll-frame > .board-scroll-layer.jokja-ui-blocks,
    .board-scroll-frame > .sangso-form-layer.board-scroll-layer.jokja-ui-blocks,
    #home.page.active .board-scroll-frame > .sangso-form-layer.jokja-ui-blocks {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 10px 12px 12px !important;
        gap: 6px !important;
        transform: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box;
    }

    #home.page.active .sangso-form-layer.jokja-ui-blocks .sangso-field-textarea {
        flex: 1 1 0;
        min-height: 52px;
        max-height: none;
    }

    .scroll-board-container .board-scroll-layer .scroll-ui,
    .scroll-board-container .board-scroll-layer .board-table,
    .scroll-board-container .board-scroll-layer .complaint-list {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

}


@media (min-width: 1200px) {
    #home .quest-info {
        max-width: min(820px, var(--jokja-width));
    }

    #home .quest-info p {
        font-size: 17px;
    }

    #npc-section:not(.npc-section--sangso) .speech-bubble {
        max-width: min(700px, 48vw);
        font-size: 17px;
    }

    #npc-section:not(.npc-section--sangso) .npc-text-line {
        font-size: 17px;
    }
}

@media (min-width: 1600px) {
    #home .quest-info {
        max-width: min(900px, var(--jokja-width));
    }
}

/* ===================================================
   반응형 (태블릿 · 모바일)
   =================================================== */

@media (max-width: 900px) {
    :root {
        --app-nav-h: calc(clamp(56px, 8vh, 72px) + env(safe-area-inset-top, 0px));
        --app-footer-h: clamp(52px, 11vw, 72px);
        --footer-font-size: clamp(6px, 1.65vw, 7px);
        --jokja-safe-block: 0px;
        --jokja-safe-inline: calc(env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
        /* 모바일: 족자 PNG 없이 전면 흰색 */
        --jokja-parchment-inset-top: 0;
        --jokja-parchment-inset-right: 0;
        --jokja-parchment-inset-bottom: 0;
        --jokja-parchment-inset-left: 0;
    }

    .pixel-nav {
        background-color: var(--nav-header-bg);
        background-image: none;
        border-bottom: none;
        box-shadow: none;
        height: auto;
        min-height: 56px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px));
        padding-top: max(6px, env(safe-area-inset-top, 0px));
    }

    .logo {
        font-size: 14px;
        flex-shrink: 1;
        min-width: 0;
        gap: 2px;
    }

    .logo-subtitle {
        font-size: 9px;
    }

    .nav-links {
        display: flex;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        min-width: 0;
        list-style: none;
    }

    .nav-links::-webkit-scrollbar {
        display: none;
    }

    .nav-links li {
        flex: 0 0 auto;
        min-width: 0;
    }

    .nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        text-align: center;
        min-height: 30px;
        line-height: 1.2;
        padding: 6px 10px;
        font-size: 10px;
        white-space: nowrap;
    }

    .pixel-root {
        padding-top: var(--app-nav-h);
        background: var(--mobile-inner-bg);
    }

    #main-content {
        padding: 12px max(10px, env(safe-area-inset-left, 0px)) 12px max(10px, env(safe-area-inset-right, 0px));
        background: var(--mobile-inner-bg);
    }

    .pixel-footer {
        background: var(--mobile-mint);
        border-top: none;
        color: var(--nav-chrome-text);
        padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px));
        font-size: clamp(6px, 1.65vw, 7px);
        line-height: 1.35;
    }

    .pixel-footer-line {
        white-space: normal;
        font-size: inherit;
        line-height: inherit;
        color: var(--nav-chrome-text);
        overflow-x: visible;
        overflow-y: visible;
    }

    .pixel-footer-line a {
        color: var(--nav-chrome-text);
    }

    /* 모바일: 족자 PNG 미사용 — 흰색 단색 프레임 */
    .board-scroll-picture {
        display: none !important;
    }

    .board-scroll-frame {
        background: var(--mobile-inner-bg);
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 족자가 표시되는 구간에서는 패딩 제거 → 족자 최대 크기 */
    #main-content:has(#home.page.active .npc-section--sangso),
    #main-content:has(#board.page.active),
    #main-content:has(#jangwon.page.active) {
        padding: 0;
    }

    .pixel-box {
        padding: 14px;
    }

    .quest-info p {
        font-size: 14px;
        line-height: 1.55;
    }

    .shingungo-container {
        margin: 24px auto;
        width: 100%;
        max-width: 100%;
    }

    #home .quest-info {
        max-width: min(520px, 94vw);
    }

    .shingungo-scene {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    #home[data-plaza-phase="drum"] .shingungo-scene {
        border: none !important;
        box-shadow: none !important;
    }

    .scroll-board-container,
    .board-scroll-wrap,
    .sangso-scroll-wrap.board-scroll-wrap {
        width: var(--jokja-width);
        max-width: min(100vw, var(--jokja-layout-max-w));
        padding: 0;
    }

    #board.page.active,
    #jangwon.page.active {
        align-items: stretch;
        justify-content: flex-start;
    }

    /* 한성부/장원 모바일: 비율 유지 + cover 스케일 (잘려도 최대 크기) */
    #board.page.active .scroll-board-container.board-scroll-wrap,
    #jangwon.page.active .scroll-board-container.board-scroll-wrap {
        width: 100% !important;
        max-width: 100vw;
        height: var(--app-main-h);
        min-height: var(--app-main-h);
        margin: 0;
        overflow: hidden;
        position: relative;
        --jokja-cover-w: max(100vw, calc(var(--app-main-h) * var(--jokja-src-w) / var(--jokja-src-h)));
        --jokja-cover-h: calc(var(--jokja-cover-w) * var(--jokja-src-h) / var(--jokja-src-w));
        --jokja-fluid-base: var(--jokja-cover-w);
    }

    #board.page.active .scroll-board-container .board-scroll-frame,
    #jangwon.page.active .scroll-board-container .board-scroll-frame {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100% !important;
        height: 100% !important;
        min-height: var(--app-main-h);
        max-height: none;
        overflow: hidden;
    }

    @supports (width: 1cqw) {
        #board.page.active .scroll-board-container.board-scroll-wrap,
        #jangwon.page.active .scroll-board-container.board-scroll-wrap {
            --jokja-cover-w: max(100cqw, calc(var(--app-main-h) * var(--jokja-src-w) / var(--jokja-src-h)));
            --jokja-fluid-base: var(--jokja-cover-w);
        }
    }

    /* 상소문 모바일: 한성부와 동일 cover·중앙 배치 */
    #home.page.active .npc-section--sangso .sangso-scroll-wrap.board-scroll-wrap {
        width: 100% !important;
        max-width: 100vw;
        height: var(--app-main-h);
        min-height: var(--app-main-h);
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    #home.page.active .npc-section--sangso .sangso-scroll-wrap .board-scroll-frame {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100% !important;
        height: 100% !important;
        min-height: var(--app-main-h);
        max-height: none;
        overflow: hidden;
    }

    /* 모바일 하네스: position:absolute 상속, padding/gap만 소형화 */
    .board-scroll-layer {
        padding: 2px 4px 8px;
        gap: 8px;
    }

    #home.page.active .npc-section--sangso .sangso-form-layer.board-scroll-layer {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 10px 12px 12px;
        gap: 6px;
    }

    /* 모바일 상소: textarea를 가용 공간 전부 채우도록 */
    #home.page.active .npc-section--sangso .sangso-field-textarea {
        flex: 1 1 0;
        max-height: none;
        min-height: 80px;
    }

    /* 모바일 상소: 헤더/ID입력/버튼 간소화 */
    #home.page.active .npc-section--sangso .sangso-form-layer .board-header {
        margin-bottom: 2px;
    }

    #home.page.active .npc-section--sangso .sangso-field-input {
        padding: 4px 8px;
        font-size: 12px;
    }

    #home.page.active .npc-section--sangso .sangso-submit-btn {
        padding: 6px 10px;
        font-size: 12px;
        margin-top: 2px;
    }

    #board.page.active .scroll-board-container .board-scroll-layer:not(.sangso-form-layer),
    #jangwon.page.active .scroll-board-container .board-scroll-layer:not(.sangso-form-layer) {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 8px 10px 10px;
        transform: none;
        gap: 6px;
    }

    /* 모바일 한성부/장원: @container 내 폰트 상한선 강제 축소 */
    @container jokja-frame (min-width: 0px) {
        #board.page.active .board-scroll-layer,
        #jangwon.page.active .board-scroll-layer {
            --board-font-scroll-title: clamp(9px, 3cqw, 13px);
            --board-font-pagination:   clamp(9px, 3cqw, 13px);
            --board-font-head:         clamp(9px, 3cqw, 13px);
            --board-font-row:          clamp(9px, 2.8cqw, 12px);
            --board-font-title:        clamp(9px, 3cqw, 13px);
            --board-font-meta:         clamp(8px, 2.5cqw, 11px);
            --board-font-lead:         clamp(9px, 3cqw, 13px);
            --board-row-pad-x:         clamp(4px, 1.5cqw,  8px);
            --board-prefix-w:          clamp(20px, 5.5cqw, 36px);
            --board-prefix-gap:        clamp(3px,  1.2cqw,  8px);
            --board-col-comments:      clamp(36px,  9cqw,  52px);
            --board-col-likes:         clamp(26px,  8cqw,  40px);
        }

        #board.page.active .board-top-badge {
            font-size: clamp(10px, 2.5cqw, 14px);
        }
    }

    /* 테이블 셀 텍스트 오버플로우 강제 차단 */
    #board.page.active .board-table-row .board-title-text,
    #board.page.active .board-table-row .col-likes,
    #jangwon.page.active .board-table-row .board-title-text,
    #jangwon.page.active .board-table-row .col-likes {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
        max-width: 100%;
    }

    /* 세부글 내용 가로 넘침 차단 */
    #board.page.active .board-detail-title,
    #board.page.active .board-detail-body,
    #board.page.active .board-detail-post,
    #jangwon.page.active .board-detail-title,
    #jangwon.page.active .board-detail-body,
    #jangwon.page.active .board-detail-post {
        word-break: break-all;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    /* 모바일: 한성부/장원 목록 — 제목 + 댓글 + 좋소 */
    #board.page.active .scroll-board-container .board-table-head,
    #board.page.active .scroll-board-container .board-table-row,
    #jangwon.page.active .scroll-board-container .board-table-head,
    #jangwon.page.active .scroll-board-container .board-table-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--board-col-comments)) minmax(0, var(--board-col-likes));
        column-gap: clamp(4px, 1.2cqw, 8px);
    }

    #board.page.active .scroll-board-container .board-table-head .col-author,
    #board.page.active .scroll-board-container .board-table-head .col-date,
    #board.page.active .scroll-board-container .board-table-row .col-author,
    #board.page.active .scroll-board-container .board-table-row .col-date,
    #jangwon.page.active .scroll-board-container .board-table-head .col-author,
    #jangwon.page.active .scroll-board-container .board-table-head .col-date,
    #jangwon.page.active .scroll-board-container .board-table-row .col-author,
    #jangwon.page.active .scroll-board-container .board-table-row .col-date {
        display: none;
    }

    #board.page.active .scroll-board-container .board-table-head .col-comments,
    #board.page.active .scroll-board-container .board-table-row .col-comments,
    #board.page.active .scroll-board-container .board-table-head .col-likes,
    #board.page.active .scroll-board-container .board-table-row .col-likes,
    #jangwon.page.active .scroll-board-container .board-table-head .col-likes,
    #jangwon.page.active .scroll-board-container .board-table-row .col-likes {
        display: block;
    }

    .jumak-top-list .board-top5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scroll-board-container .board-tab-btn {
        min-width: clamp(28px, calc(var(--jokja-fluid-base) * 0.045), 40px);
        height: clamp(26px, calc(var(--jokja-fluid-base) * 0.042), 34px);
        padding: 0 clamp(5px, calc(var(--jokja-fluid-base) * 0.014), 10px);
        font-size: clamp(7px, calc(var(--jokja-fluid-base) * 0.017), 10px);
    }

    .board-pagination,
    .jumak-pagination {
        flex-wrap: wrap;
        gap: 14px;
    }

    .scroll-board-container .board-pagination .board-pagination-btn,
    .scroll-board-container .board-pagination .pixel-btn {
        min-height: unset;
        padding: 6px clamp(14px, calc(var(--jokja-fluid-base) * 0.05), 24px) !important;
        font-size: var(--board-font-scroll-title) !important;
    }

    .scroll-board-container .board-pagination .board-pagination-info,
    .scroll-board-container .board-pagination #board-page-info {
        font-size: var(--board-font-scroll-title) !important;
        padding: 6px 10px !important;
        background: transparent;
        border: none;
    }

    .status-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .status-card .count {
        font-size: 20px;
    }

    .viz-track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        row-gap: 12px;
    }

    .viz-track::before {
        display: none;
    }

    .v-step {
        flex: 1 1 calc(50% - 8px);
        min-width: 72px;
        text-align: center;
        font-size: 11px;
        padding: 8px 10px;
    }

    #npc-section:not(.npc-section--sangso) {
        --npc-bubble-space: 72px;
        --npc-avail-h: calc(var(--app-main-h) - var(--npc-bubble-space));
        width: 100vw;
        max-width: 100vw;
        min-height: var(--app-main-h);
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    #npc-section:not(.npc-section--sangso) .npc-present {
        width: 100%;
        min-height: var(--app-main-h);
        padding:
            max(12px, env(safe-area-inset-top, 0px))
            max(8px, env(safe-area-inset-right, 0px))
            max(12px, env(safe-area-inset-bottom, 0px))
            max(8px, env(safe-area-inset-left, 0px));
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    #npc-section:not(.npc-section--sangso) .speech-bubble {
        margin: 0 auto;
    }

    #npc-section:not(.npc-section--sangso) .npc-sprite {
        width: min(100vw, calc(var(--npc-avail-h) * 480 / 720));
        max-width: 100vw;
        height: auto;
        max-height: var(--npc-avail-h);
        object-fit: contain;
        object-position: center center;
        margin: 0 auto;
        flex: 0 1 auto;
        align-self: center;
    }

    #home.page.active .npc-section--sangso .sangso-scroll-wrap,
    #home.page.active .npc-section--sangso .sangso-form-message {
        width: var(--jokja-width);
        max-width: 98vw;
    }

    .jumak-inner .jumak-header {
        padding-right: clamp(44px, 14vw, 72px);
    }

    .jumak-board {
        max-height: min(360px, 55vh);
    }

    .jumak-comment-input-area,
    .jumak-reply-input-area {
        flex-wrap: wrap;
    }

    .jumak-comment-author-input,
    .jumak-reply-author-input {
        max-width: 100%;
        flex: 1 1 120px;
    }

    .item-meta {
        flex-wrap: wrap;
    }

    .item-meta .category {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .pixel-nav {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
    }

    .logo {
        font-size: 15px;
    }

    .logo .pixel-icon {
        font-size: 1em;
    }

    .nav-links {
        gap: 5px;
    }

    .nav-btn {
        font-size: 10px;
        padding: 7px 10px;
        min-height: 34px;
    }

    .pixel-subtitle {
        font-size: 12px;
    }

    .jumak-desc {
        font-size: 13px;
        line-height: 1.5;
    }

    .scroll-board-container .board-desc,
    .scroll-board-container .board-table-lead .board-desc-text {
        font-size: var(--board-font-lead);
        line-height: 1.5;
    }

    .scroll-board-container .board-top-item,
    .board-title-item {
        font-size: 13px;
        padding: 12px 10px;
    }

    .type-selector:not(.sangso-type-selector) {
        flex-direction: column;
        align-items: stretch;
    }

    .sangso-form-layer .sangso-type-selector {
        flex-direction: row;
        align-items: stretch;
        padding: 4px 6px;
        gap: 6px;
    }

    .sangso-form-layer .radio-label {
        width: auto;
        flex: 1;
        justify-content: center;
        padding: calc(5px * var(--sangso-form-scale, 1.3)) calc(6px * var(--sangso-form-scale, 1.3));
        font-size: clamp(14px, calc(var(--jokja-fluid-base, 300px) * 0.039), 18px);
    }

    #home.page.active .npc-section--sangso .sangso-field-input,
    #home.page.active .npc-section--sangso .sangso-field-textarea,
    #home.page.active .npc-section--sangso .sangso-form-layer .sangso-type-selector {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    #home.page.active .npc-section--sangso .sangso-scroll-wrap,
    #home.page.active .npc-section--sangso .sangso-form-message {
        width: var(--jokja-width);
        max-width: 98vw;
    }

    #home.page.active .npc-section--sangso .sangso-form-layer.board-scroll-layer {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2px 4px 8px;
        padding-left: calc(4px + 10px);
        margin: 17% 9% 6.5% 9%;
    }

    .sangso-field-input {
        margin-top: 2px;
        font-size: clamp(14px, calc(var(--jokja-fluid-base, 300px) * 0.039), 18px);
        padding: calc(6px * var(--sangso-form-scale, 1.3)) calc(8px * var(--sangso-form-scale, 1.3));
    }

    #home.page.active .npc-section--sangso .sangso-field-textarea {
        font-size: clamp(14px, calc(var(--jokja-fluid-base, 300px) * 0.039), 18px);
        min-height: 0;
        max-height: min(41.6vh, calc(var(--jokja-fixed-h, 480px) * 0.494));
        flex: 1 1 auto;
    }

    .sangso-field-textarea {
        font-size: clamp(14px, calc(var(--jokja-fluid-base, 300px) * 0.039), 18px);
        min-height: 0;
        max-height: min(41.6vh, calc(var(--jokja-fixed-h, 480px) * 0.494));
        flex: 1 1 auto;
        padding: calc(8px * var(--sangso-form-scale, 1.3)) calc(10px * var(--sangso-form-scale, 1.3));
    }

    #home.page.active .npc-section--sangso .sangso-submit-btn {
        font-size: clamp(14px, calc(var(--jokja-fluid-base, 300px) * 0.039), 18px);
        padding: calc(8px * var(--sangso-form-scale, 1.3)) calc(16px * var(--sangso-form-scale, 1.3));
        min-height: 36px;
        width: 100%;
        max-width: none;
        margin-top: 4px;
        flex-shrink: 0;
    }

    .sangso-submit-btn {
        position: sticky;
        bottom: 2px;
        z-index: 2;
    }

    .speech-bubble {
        padding: 12px;
        font-size: 14px;
    }

    .speech-bubble p {
        line-height: 1.5;
    }

    #npc-section:not(.npc-section--sangso) {
        --npc-bubble-space: 56px;
    }

    #npc-section:not(.npc-section--sangso) .speech-bubble {
        min-width: min(240px, 94vw);
        max-width: 94vw;
    }

    .pixel-btn {
        min-height: 44px;
        padding: 12px 18px;
    }

    .pixel-btn.small {
        min-height: 36px;
    }

    .scroll-board-container .scroll-ui {
        padding: 8px 10px;
    }

    .scroll-board-container .board-list-tabs {
        flex-wrap: wrap;
        gap: 6px;
    }

    .scroll-board-container .board-tab-btn {
        min-width: 30px;
        height: 28px;
        padding: 0 5px;
        font-size: 7px;
    }

    .viz-track {
        flex-direction: column;
        align-items: stretch;
    }

    .v-step {
        flex: 1 1 auto;
        width: 100%;
    }

    .item-actions,
    .jumak-post-actions,
    .jumak-comment-actions,
    .jumak-reply-actions {
        flex-wrap: wrap;
    }

    .jumak-list-head {
        flex-wrap: wrap;
        gap: 8px;
    }

    #jumak-open-write {
        width: auto;
        min-height: 0;
        font-size: 8px;
        padding: 5px 8px;
    }

    .jumak-list-head {
        padding-right: 58px;
    }

    .jumak-title-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tavern-inner {
        font-size: 14px;
    }

    .jumak-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .vote-btn,
    .comment-toggle-btn,
    .jumak-like-btn,
    .jumak-comment-toggle-btn {
        font-size: 11px;
        padding: 8px 10px;
        min-height: 36px;
    }

    .jumak-comment-like-btn,
    .jumak-reply-toggle-btn,
    .jumak-reply-like-btn,
    .jumak-comment-edit-btn,
    .jumak-comment-delete-btn,
    .jumak-reply-edit-btn,
    .jumak-reply-delete-btn {
        font-size: 10px;
        padding: 6px 8px;
    }

    .comment-input-area,
    .jumak-comment-input-area {
        flex-direction: column;
        align-items: stretch;
    }

    .comment-input-area .pixel-btn,
    .jumak-comment-input-area .pixel-btn {
        width: 100%;
    }

    .pixel-footer {
        padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px));
        font-size: clamp(6px, 1.7vw, 7px);
    }

    .pixel-footer-line {
        font-size: inherit;
        white-space: normal;
    }

    .item-content,
    .jumak-post-body {
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .logo {
        font-size: 13px;
    }

    .nav-btn {
        font-size: 9px;
        padding: 6px 7px;
        min-height: 30px;
    }
}

/* ===================================================
   세로 높이가 좁을 때 (가로 모드 / 작은 태블릿)
   =================================================== */
@media (max-height: 600px) {
    :root {
        --app-nav-h: clamp(44px, 8vh, 56px);
        --app-footer-h: clamp(44px, 10vh, 56px);
    }

    @media (max-width: 900px) {
        .pixel-nav {
            background-image: none;
            background-color: var(--nav-header-bg);
        }

        .pixel-footer {
            background: var(--mobile-mint);
            font-size: clamp(6px, 1.6vw, 7px);
        }

        .pixel-footer-line {
            white-space: normal;
        }
    }

    .pixel-nav {
        height: var(--app-nav-h);
        min-height: var(--app-nav-h);
    }

    .logo {
        font-size: clamp(13px, 2.4vw, 18px);
    }

    .nav-btn {
        min-height: clamp(28px, 4.5vh, 36px);
        padding: 5px clamp(8px, 1.4vw, 14px);
        font-size: clamp(9px, 1.2vw, 11px);
    }

    .pixel-footer {
        padding: 5px 8px max(5px, env(safe-area-inset-bottom, 0px));
        font-size: clamp(6px, 1.5vw, 7px);
        line-height: 1.3;
    }

    .pixel-footer-line {
        white-space: normal;
    }

    #main-content {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* 북 화면 — 세로가 짧으면 quest 안내 박스 축소 */
    .quest-info {
        padding: 8px 14px;
    }

    .quest-info p, .plaza-quest-text {
        font-size: clamp(11px, 1.8vh, 14px) !important;
        line-height: 1.4;
    }

    /* 정원오 말풍선 */
    .speech-bubble {
        padding: 8px 12px;
        font-size: clamp(11px, 1.8vh, 14px);
    }

    .npc-text-line {
        font-size: clamp(11px, 1.8vh, 14px) !important;
        min-height: 2.4em;
    }
}

@media (max-height: 420px) {
    :root {
        --app-nav-h: 42px;
        --app-footer-h: clamp(40px, 14vh, 52px);
    }

    .pixel-nav {
        height: 42px;
        min-height: 42px;
        padding: 0 10px;
    }

    .logo { font-size: 13px; }

    .nav-btn {
        font-size: 9px;
        padding: 4px 8px;
        min-height: 28px;
    }

    .pixel-footer {
        padding: 4px 6px max(4px, env(safe-area-inset-bottom, 0px));
        font-size: 6px;
        line-height: 1.3;
    }

    .pixel-footer-line {
        white-space: normal;
        font-size: inherit;
    }
}

.pixel-input {
    flex: 1;
    border: 3px solid var(--pixel-dark);
    padding: 10px;
}

/* Generic Utility */
.hidden { display: none !important; }

.pixel-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
    background: transparent;
}

.flash {
    animation: flashEffect 0.8s ease-out;
}

@keyframes flashEffect {
    0% { background: rgba(255, 255, 255, 0); }
    30% { background: rgba(255, 255, 255, 0.95); }
    100% { background: rgba(255, 255, 255, 0); }
}

.pixel-footer {
    flex-shrink: 0;
    background: var(--mobile-mint);
    color: var(--nav-chrome-text);
    text-align: center;
    padding: clamp(5px, 1vh, 8px) clamp(8px, 2vw, 14px) max(clamp(5px, 1vh, 8px), env(safe-area-inset-bottom, 0px));
    font-family: var(--font-korean);
    font-size: var(--footer-font-size);
    line-height: 1.35;
    border-top: none;
    box-sizing: border-box;
    max-width: 100%;
}

.pixel-footer-line {
    margin: 0;
    white-space: normal;
    overflow: visible;
    color: var(--nav-chrome-text);
    font-size: inherit;
    line-height: inherit;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.pixel-footer-line::-webkit-scrollbar {
    display: none;
}

.pixel-footer-line a {
    color: var(--nav-chrome-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pixel-footer-line a:hover {
    color: var(--nav-dancheong-ink);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   장원 카드형 레이아웃
   ═══════════════════════════════════════════════════════════ */
#jangwon.page.active {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px;
    box-sizing: border-box;
}

.jangwon-container {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 20px 0 40px;
}

.jangwon-header {
    text-align: center;
    margin-bottom: 24px;
}

.jangwon-title {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: clamp(14px, 3.5vw, 20px);
    color: #c8860a;
    text-shadow: 1px 1px 0 #4a3000, 2px 2px 0 rgba(0,0,0,0.15);
    margin: 0 0 6px;
}

.jangwon-subtitle {
    font-family: var(--font-korean);
    font-size: clamp(11px, 2.5vw, 14px);
    color: #5c4a2a;
    margin: 0;
    opacity: 0.85;
}

.jangwon-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jangwon-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: 3px solid #d4c9a8;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffef8 0%, #f9f5e8 100%);
    text-align: left;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    font-family: var(--font-korean);
}

.jangwon-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.jangwon-card:active {
    transform: translateY(0);
}

/* 크기 변형 */
.jangwon-card--lg {
    padding: 20px;
    gap: 10px;
}

.jangwon-card--lg .jangwon-card-title {
    font-size: clamp(14px, 3vw, 18px);
}

.jangwon-card--lg .jangwon-card-preview {
    font-size: clamp(12px, 2.5vw, 14px);
    -webkit-line-clamp: 4;
}

.jangwon-card--md .jangwon-card-title {
    font-size: clamp(12px, 2.5vw, 15px);
}

.jangwon-card--md .jangwon-card-preview {
    -webkit-line-clamp: 2;
}

.jangwon-card--sm {
    padding: 12px 16px;
    gap: 6px;
}

.jangwon-card--sm .jangwon-card-title {
    font-size: clamp(11px, 2.2vw, 13px);
}

.jangwon-card--sm .jangwon-card-preview {
    -webkit-line-clamp: 1;
    font-size: 12px;
}

.jangwon-card--sm .jangwon-card-rank {
    font-size: 11px;
}

/* 금/은/동 색상 */
.jangwon-card--gold {
    border-color: #d4a017;
    background: linear-gradient(135deg, #fffde0 0%, #fff3b0 30%, #fffef0 100%);
    box-shadow: 0 2px 12px rgba(212,160,23,0.2);
}

.jangwon-card--gold:hover {
    box-shadow: 0 4px 18px rgba(212,160,23,0.3);
    border-color: #b8860b;
}

.jangwon-card--silver {
    border-color: #a8a8b0;
    background: linear-gradient(135deg, #fafafa 0%, #e8e8f0 30%, #f5f5f8 100%);
    box-shadow: 0 2px 8px rgba(100,100,120,0.12);
}

.jangwon-card--silver:hover {
    box-shadow: 0 4px 14px rgba(100,100,120,0.2);
    border-color: #808090;
}

.jangwon-card--bronze {
    border-color: #b87333;
    background: linear-gradient(135deg, #fff8f0 0%, #fde8d0 30%, #fff5ea 100%);
    box-shadow: 0 2px 8px rgba(184,115,51,0.12);
}

.jangwon-card--bronze:hover {
    box-shadow: 0 4px 14px rgba(184,115,51,0.2);
    border-color: #a0622a;
}

/* 카드 내부 요소 */
.jangwon-card-rank {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 12px;
    font-weight: 700;
    color: #7a5c00;
}

.jangwon-card--silver .jangwon-card-rank { color: #555560; }
.jangwon-card--bronze .jangwon-card-rank { color: #8a5520; }

.jangwon-card-body {
    flex: 1;
}

.jangwon-card-title {
    font-size: clamp(12px, 2.5vw, 15px);
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 4px;
    line-height: 1.4;
    word-break: break-word;
}

.jangwon-card-preview {
    font-size: 13px;
    color: #5a5a5a;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.jangwon-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.jangwon-card-author {
    font-size: 11px;
    color: #666;
    font-weight: 600;
}

.jangwon-card-stats {
    font-size: 11px;
    color: #888;
    font-family: var(--font-korean);
}

/* 빈 상태 */
.jangwon-empty {
    text-align: center;
    padding: 40px 20px;
}

.jangwon-empty-icon {
    font-size: 40px;
    margin: 0 0 12px;
}

.jangwon-empty-text {
    font-family: var(--font-korean);
    font-size: 14px;
    font-weight: 700;
    color: #5c4a2a;
    margin: 0 0 6px;
}

.jangwon-empty-hint {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* 장원 상세 */
.jangwon-back-btn {
    margin-bottom: 12px;
}

.jangwon-detail-content {
    width: 100%;
}

.jangwon-detail-card {
    padding: 20px;
    border: 3px solid #d4c9a8;
    border-radius: 8px;
    background: #fffef8;
}

.jangwon-detail-card.jangwon-card--gold {
    border-color: #d4a017;
    background: linear-gradient(135deg, #fffde0, #fff8d0);
}
.jangwon-detail-card.jangwon-card--silver {
    border-color: #a8a8b0;
    background: linear-gradient(135deg, #fafafa, #f0f0f5);
}
.jangwon-detail-card.jangwon-card--bronze {
    border-color: #b87333;
    background: linear-gradient(135deg, #fff8f0, #fef0e0);
}

.jangwon-detail-rank {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 13px;
    color: #7a5c00;
    margin-bottom: 8px;
}

.jangwon-detail-card.jangwon-card--silver .jangwon-detail-rank { color: #555560; }
.jangwon-detail-card.jangwon-card--bronze .jangwon-detail-rank { color: #8a5520; }

.jangwon-detail-title {
    font-family: var(--font-korean);
    font-size: clamp(15px, 3.5vw, 20px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 10px;
    line-height: 1.4;
    word-break: break-word;
}

.jangwon-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #666;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.jangwon-detail-body {
    font-family: var(--font-korean);
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 장원 공유 섹션 */
.jangwon-share-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 2px solid rgba(0,0,0,0.06);
}

.jangwon-share-label {
    font-family: var(--font-korean);
    font-size: 11px;
    color: #888;
    margin: 0 0 8px;
}

.jangwon-share-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.jangwon-share-btn {
    flex: 1;
    min-width: 70px;
    padding: 8px 12px;
    border: 2px solid #d4c9a8;
    border-radius: 6px;
    background: #fff;
    font-family: var(--font-korean);
    font-size: 12px;
    font-weight: 600;
    color: #5c4a2a;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, transform 0.1s;
}

.jangwon-share-btn:hover {
    background: #fffef0;
    border-color: #d4a017;
    transform: translateY(-1px);
}

.jangwon-share-btn:active {
    transform: translateY(0);
}

.jangwon-share-btn[data-share="kakao"] { border-color: #fee500; background: #fff9c4; color: #3c1e1e; }
.jangwon-share-btn[data-share="kakao"]:hover { background: #fee500; }
.jangwon-share-btn[data-share="x"] { border-color: #1da1f2; background: #e8f5fe; color: #0c7abf; }
.jangwon-share-btn[data-share="x"]:hover { background: #d0ecfb; }

/* 관의 회답 (공식 답변) */
.board-official-reply {
    border: 2px solid #d4a017;
    border-radius: 6px;
    background: linear-gradient(135deg, #fffde0, #fff8d0);
    padding: 10px 12px;
    margin: 4px 0;
}

.board-official-reply-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.board-official-reply-badge {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 9px;
    color: #7a5c00;
    background: #fff3a0;
    border: 1px solid #d4a017;
    border-radius: 3px;
    padding: 2px 6px;
}

.board-official-reply-author {
    font-family: var(--font-korean);
    font-size: 11px;
    font-weight: 700;
    color: #5c4a00;
}

.board-official-reply-body {
    font-family: var(--font-korean);
    font-size: 13px;
    color: #3a3000;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.board-official-reply-date {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    color: #8a7a40;
}

/* 장원 달성 축하 오버레이 */
.jangwon-achievement-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    animation: jangwon-ach-fadein 0.3s ease;
    padding: 20px;
}

@keyframes jangwon-ach-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.jangwon-achievement-card {
    background: linear-gradient(135deg, #fffde0, #fff3b0);
    border: 4px solid #d4a017;
    border-radius: 12px;
    padding: 28px 24px;
    text-align: center;
    max-width: 320px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(212, 160, 23, 0.4);
    animation: jangwon-ach-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes jangwon-ach-pop {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.jangwon-achievement-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.jangwon-achievement-title {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 18px;
    color: #7a5c00;
    margin: 0 0 12px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}

.jangwon-achievement-desc {
    font-family: var(--font-korean);
    font-size: 13px;
    color: #5c4a2a;
    line-height: 1.6;
    margin: 0 0 18px;
    word-break: break-word;
}

.jangwon-achievement-btn {
    margin-bottom: 8px;
    display: block;
    width: 100%;
}

.jangwon-achievement-close {
    background: none;
    border: none;
    font-family: var(--font-korean);
    font-size: 12px;
    color: #888;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jangwon-achievement-close:hover {
    color: #555;
}

/* 한성부 장원 프로그레스 바 */
.board-jangwon-progress {
    margin: 8px 0;
    padding: 8px 12px;
    border: 2px solid #e8dcc0;
    border-radius: 6px;
    background: linear-gradient(135deg, #fffef8, #f9f5e8);
}

.board-jangwon-progress--done {
    border-color: #d4a017;
    background: linear-gradient(135deg, #fffde0, #fff3b0);
    text-align: center;
    padding: 10px 12px;
}

.board-jangwon-progress--done .board-jangwon-progress-label {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 11px;
    color: #7a5c00;
}

.board-jangwon-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.board-jangwon-progress-label {
    font-family: var(--font-korean);
    font-size: 11px;
    color: #5c4a2a;
}

.board-jangwon-progress-label strong {
    color: #b8860b;
}

.board-jangwon-progress-pct {
    font-family: var(--font-pixel, 'Press Start 2P', monospace);
    font-size: 9px;
    color: #b8860b;
}

.board-jangwon-progress-bar {
    height: 8px;
    border-radius: 4px;
    background: #e8e0d0;
    overflow: hidden;
}

.board-jangwon-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #ffd700, #d4a017);
    transition: width 0.4s ease;
}

/* 한성부 장원 배너 */
.board-jangwon-banner {
    width: 100%;
    padding: 0 var(--board-row-pad-x, 10px);
    box-sizing: border-box;
}

.board-jangwon-banner.hidden {
    display: none;
}

.board-jangwon-banner-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: 2px solid #d4a017;
    border-radius: 6px;
    background: linear-gradient(90deg, #fffde0, #fff8c0);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    font-family: var(--font-korean);
    font-size: clamp(10px, 2.5cqw, 13px);
    color: #5c4a00;
    text-align: left;
}

.board-jangwon-banner-btn:hover {
    background: linear-gradient(90deg, #fff8c0, #ffefa0);
    transform: translateY(-1px);
}

.board-jangwon-banner-icon {
    flex-shrink: 0;
    font-size: 1.1em;
}

.board-jangwon-banner-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-jangwon-banner-votes {
    color: #b8860b;
    font-weight: 600;
}

.board-jangwon-banner-arrow {
    flex-shrink: 0;
    font-weight: 700;
    color: #b8860b;
}

/* 장원 축하 파티클 */
.jangwon-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.jangwon-particle {
    position: absolute;
    top: -20px;
    animation: jangwon-fall linear forwards;
    opacity: 0;
}

@keyframes jangwon-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(calc(var(--app-main-h, 500px) * 0.7)) rotate(360deg) scale(0.4);
    }
}