/* ==========================================================================
   경기중부노회 디자인 시스템 — design.md 기준 토큰 + 컴포넌트 스타일
   ========================================================================== */

:root {
    /* Kosin Blue */
    --kosin-blue-050: #EAF3FB;
    --kosin-blue-100: #E1EEF9;
    --kosin-blue-200: #BEDBF2;
    --kosin-blue-300: #8FC0E8;
    --kosin-blue-400: #4FA0DA;
    --kosin-blue-500: #1D7EC4;
    --kosin-blue-600: #005DA1;
    --kosin-blue-700: #014E8E;
    --kosin-blue-800: #013F7C;
    --kosin-blue-900: #012C57;

    /* Ink (near-black -> white) */
    --ink-000: #FFFFFF;
    --ink-050: #F7F8FB;
    --ink-100: #EEF1F6;
    --ink-200: #DDE3EE;
    --ink-300: #C7D0DE;
    --ink-400: #A6B3C6;
    --ink-500: #6C819E;
    --ink-600: #4E6280;
    --ink-700: #314765;
    --ink-800: #1D2C42;
    --ink-900: #121B2B;
    --ink-1000: #0B1220;

    /* Accents */
    --gold-100: #F3E7CF;
    --gold-500: #C79A44;
    --gold-600: #B48A3A;
    --crimson-100: #F6DCE1;
    --crimson-600: #B8324A;
    --moss-100: #DCEADD;
    --moss-700: #2F5D3A;

    /* Semantic colors */
    --color-bg: var(--ink-000);
    --color-bg-brand: var(--kosin-blue-600);
    --color-bg-brand-soft: var(--kosin-blue-100);
    --color-bg-muted: var(--ink-050);
    --color-bg-subtle: var(--ink-100);
    --color-border: var(--ink-200);
    --color-border-brand: var(--kosin-blue-600);
    --color-border-strong: var(--ink-1000);
    --color-fg: var(--ink-1000);
    --color-fg-link: var(--kosin-blue-600);
    --color-fg-link-hover: var(--kosin-blue-800);
    --color-fg-muted: var(--ink-600); /* WCAG AA 대비 확보(2026-07-15) — ink-500(3.98:1)은 본문 기준(4.5:1) 미달 */
    --color-fg-onbrand: var(--ink-000);
    --color-fg-subtle: var(--ink-700);
    --color-honor: var(--gold-600);
    --color-notice: var(--crimson-600);
    --color-rule: var(--ink-1000);
    --color-success: var(--moss-700);

    /* Type */
    --font-sans: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --font-serif: "Noto Serif KR", serif;
    --font-mono: "SFMono-Regular", Consolas, monospace;

    --fs-display-2xl: 64px; --lh-display-2xl: 1.12;
    --fs-display-xl: 48px;  --lh-display-xl: 1.16;
    --fs-display-lg: 42px;  --lh-display-lg: 1.2;
    --fs-h1: 32px; --lh-h1: 1.3;
    --fs-h2: 26px; --lh-h2: 1.36;
    --fs-h3: 22px; --lh-h3: 1.4;
    --fs-h4: 19px; --lh-h4: 1.45;
    --fs-body-lg: 19px; --lh-body-lg: 1.7;
    --fs-body: 17px; --lh-body: 1.75;
    --fs-body-sm: 16px; --lh-body-sm: 1.65;
    --fs-caption: 15px; --lh-caption: 1.6;
    --fs-micro: 13.5px; --lh-micro: 1.5;

    --fw-thin: 100; --fw-light: 300; --fw-regular: 400;
    --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900;

    --ls-display: -0.02em;
    --ls-heading: -0.01em;
    --ls-body: 0;
    --ls-caption: 0.01em;
    --ls-eyebrow: 0.16em;

    /* Space (4px modular) */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
    --space-9: 36px; --space-10: 40px; --space-11: 44px; --space-12: 48px;

    --container-max: 1200px;
    --container-narrow: 880px;
    --gutter: 24px;

    /* Radius */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    /* Shadow (cool gray, never blue-tinted) */
    --shadow-xs: 0 1px 2px rgba(11, 18, 32, .06);
    --shadow-sm: 0 2px 4px rgba(11, 18, 32, .08);
    --shadow-md: 0 4px 10px rgba(11, 18, 32, .10);
    --shadow-lg: 0 12px 24px rgba(11, 18, 32, .16);
    --shadow-inset: inset 0 1px 2px rgba(11, 18, 32, .08);

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --ease-std: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--color-fg);
    background: var(--color-bg);
    word-break: keep-all;
}

a { color: var(--color-fg-link); text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--kosin-blue-400);
    outline-offset: 2px;
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
    background: var(--color-bg);
    color: var(--color-fg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: border-color var(--dur-base) var(--ease-std);
}
.site-header.is-scrolled { border-bottom: 2px solid var(--color-rule); }

.site-header a { color: var(--color-fg); text-decoration: none; }

.header-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 36px;
    padding: 0 var(--gutter);
    border-bottom: 1px solid var(--color-border);
}
.site-brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.site-emblem { display: flex; align-items: center; }
.site-emblem img { display: block; width: 64px; height: 64px; }
.site-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.site-title-sub {
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-caption);
    color: var(--color-fg-muted);
}
.site-title-main {
    font-family: var(--font-sans);
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    color: var(--kosin-blue-600);
}

.header-utility {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    font-size: var(--fs-micro);
    color: var(--color-fg-subtle);
}
.header-utility a { color: var(--color-fg-subtle); }
.header-utility a:hover { color: var(--color-fg-link-hover); }

.site-nav {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--space-3) var(--gutter);
    background: var(--color-bg-muted);
    gap: var(--space-6);
}
.site-nav > ul { list-style: none; display: flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: var(--space-10); margin: 0; padding: 0; position: relative; height: 100%; }
@media (min-width: 861px) {
    .site-nav > ul { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; }
}
.site-nav > ul > li {
    position: relative;
    cursor: pointer;
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-subtle);
    padding: var(--space-2) 0;
}
.site-nav > ul > li > a { color: var(--color-fg-subtle); }
.site-nav > ul > li:hover,
.site-nav > ul > li:hover > a { color: var(--color-fg-link-hover); }

.submenu {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    list-style: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -4px);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-sm);
    min-width: 108px;
    z-index: 10;
    padding: var(--space-1) 0;
    margin: 0;
    transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), visibility var(--dur-fast) var(--ease-std);
}
@media (min-width: 861px) {
    .site-nav > ul > li:hover .submenu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}
.submenu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: var(--space-2);
    margin-left: auto;
}
.submenu-toggle svg { display: block; transition: transform var(--dur-fast) var(--ease-std); }
.submenu li { padding: 0; }
.submenu a {
    display: block;
    padding: 7px var(--space-3);
    font-size: var(--fs-micro);
    font-weight: var(--fw-regular);
    letter-spacing: -.01em;
    color: var(--color-fg-subtle);
    text-align: center;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.submenu a.active, .submenu a:hover { background: var(--color-bg-brand-soft); color: var(--kosin-blue-800); }

/* ==========================================================================
   Layout
   ========================================================================== */

.site-main {
    max-width: var(--container-max);
    margin: var(--space-12) auto;
    padding: 0 var(--gutter);
}

/* ==========================================================================
   Static pages
   ========================================================================== */

.static-page h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-heading);
    color: var(--color-fg);
    border-bottom: 2px solid var(--color-rule);
    padding-bottom: var(--space-3);
}
.static-content {
    line-height: var(--lh-body);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-8);
}

/* ==========================================================================
   관리자 화면 공통 테이블 (admin_*.php, roster.php)
   ========================================================================== */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--color-bg); }
.admin-table th, .admin-table td { padding: var(--space-2); text-align: left; }
.admin-table tr:first-child { border-bottom: 2px solid var(--kosin-blue-800); }
.admin-table tr:not(:first-child) { border-bottom: 1px solid var(--color-border); }

/* --------------------------------------------------------------------------
   관리자 화면 공통 유틸리티 (admin_*.php)

   2026-08-29: 그동안 각 admin 화면에 인라인 style 속성으로 흩어져 있던 반복 패턴
   40건을 여기로 모은 것. 색상 값은 접근성 교체분(아래) 외에는 기존 인라인 값을
   그대로 옮겨 화면 외관을 유지했다.

   2026-08-29(접근성): WCAG AA 본문 기준(4.5:1) 미달이던 #999(2.85:1)·#888(3.54:1)을
   --ink-600(#4E6280, 흰 배경 대비 6.2:1)으로 교체. design.md의 --ink-500 폐기와 같은
   사유이며, 적용 대상은 4곳이다 — admin/index.php(준비중 표시),
   admin_materials.php·admin_spam_filter.php의 빈 목록 안내 셀 3건.

   > [!확인필요] 나머지 --admin-* 색상값은 design.md의 디자인 토큰과 다른 별도 팔레트다.
   > (예: 오류 #c0392b vs --crimson-600 #B8324A, 제목 #1f3a5f vs --kosin-blue-600 #005DA1)
   > 토큰으로 통일하면 관리자 화면 외관이 바뀌므로 별도 작업으로 분리해두었다.
   > 전환 시에는 아래 변수값만 토큰 참조로 바꾸면 전 화면에 반영된다.
   -------------------------------------------------------------------------- */
:root {
    --admin-fg-error: #c0392b;
    --admin-fg-ok: #1f7a3d;
    --admin-fg-heading: #1f3a5f;
    --admin-fg-muted: #666;
    --admin-fg-faint: var(--ink-600);
    --admin-fg-empty: var(--ink-600);
    --admin-bg-card: #fff;
    --admin-bg-hint: #f7f7f7;
    --admin-bg-thumb: #eef1f6;
}

/* 상태 메시지 */
.admin-msg-error { color: var(--admin-fg-error); }
.admin-msg-ok { color: var(--admin-fg-ok); }
.admin-msg-ok--strong { font-weight: bold; }

/* 보조 설명 텍스트 */
.admin-desc { color: var(--admin-fg-muted); }
.admin-faint { color: var(--admin-fg-faint); }
.admin-empty-cell { color: var(--admin-fg-empty); }
/* 표 안의 빈 상태 셀은 .admin-table td(특이도 0,1,1)의 padding을 이겨야 하므로
   후손 선택자(0,2,0)로 올려둔다 — 인라인 style일 때와 같은 1rem을 유지하기 위함. */
.admin-table .admin-empty-cell { padding: 1rem; }

/* 섹션 제목 (h2) — --spaced는 위 여백이 필요한 경우에만 함께 사용 */
.admin-section-title { color: var(--admin-fg-heading); }
.admin-section-title--spaced { margin-top: 2rem; }

/* 입력 폼 카드 — 여백/폭은 화면마다 달라 수식어로 분리 */
.admin-form-card { background: var(--admin-bg-card); padding: 1.5rem; border-radius: 6px; }
.admin-form-card--mb-lg { margin-bottom: 2rem; }
.admin-form-card--mb-md { margin-bottom: 1.5rem; }
.admin-form-card--narrow { max-width: 480px; }

/* 안내 박스 (admin_clergy.php) */
.admin-hint-box { background: var(--admin-bg-hint); padding: 0.75rem; border-radius: 4px; }

/* 임원 선택 행의 썸네일 자리 (admin_officers.php — JS 훅으로도 쓰이는 기존 클래스) */
.officer-pick-photo {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--admin-bg-thumb);
    flex-shrink: 0;
}

/* ==========================================================================
   일정(Schedule) — 구글 캘린더 임베드
   구글 캘린더는 별도 출처(iframe)라 내부 버튼·아이콘 색상은 CSS로 바꿀 수 없음.
   대신 카드 프레임과 상단 룰을 사이트 톤에 맞춰 테두리 역할만 담당.
   ========================================================================== */
.schedule-embed {
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.schedule-embed iframe { display: block; }

/* ==========================================================================
   Home slider
   ========================================================================== */

.home-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    max-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    margin-top: var(--space-8);
}
.home-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-std);
}
.home-slide.is-active { opacity: 1; }
.home-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-4);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}
.home-slider-dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    padding: 0;
}
.home-slider-dots button.is-active { background: var(--ink-000); }
.home-hero {
    text-align: center;
    padding: var(--space-11) var(--space-6);
    margin-top: var(--space-8);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--kosin-blue-700), var(--kosin-blue-500));
    color: var(--ink-000);
}
.home-hero h1 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-serif);
    font-size: var(--fs-display-lg);
    letter-spacing: var(--ls-heading);
}
.home-hero p { margin: 0; font-size: var(--fs-body-lg); color: var(--kosin-blue-100); }

/* ==========================================================================
   Home notice panels
   ========================================================================== */

.home-notice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-10);
}
.notice-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.notice-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
}
.notice-panel-head h3 {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--ink-000);
}
.notice-panel-more {
    color: var(--ink-000);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    line-height: 1;
    opacity: .85;
}
.notice-panel-more:hover { opacity: 1; }
.panel-notice { background: var(--kosin-blue-700); }
.panel-data { background: var(--kosin-blue-500); }
.panel-share { background: var(--moss-700); }

.notice-panel-list { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-4); }
.notice-panel-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-body-sm);
}
.notice-panel-list li:first-child { border-top: none; }
.notice-panel-list a {
    color: var(--color-fg-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notice-panel-list a:hover { color: var(--color-fg-link-hover); }
.notice-date { color: var(--color-fg-muted); font-size: var(--fs-micro); white-space: nowrap; }
.notice-empty { color: var(--color-fg-muted); font-size: var(--fs-body-sm); }

@media (max-width: 900px) {
    .home-notice-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Partner strip
   ========================================================================== */

.partner-strip {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-10) 0 0;
    padding: var(--space-6);
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
}
.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.partner-logo:hover { box-shadow: var(--shadow-sm); border-color: var(--kosin-blue-400); }
@media (max-width: 860px) {
    .partner-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .partner-strip { grid-template-columns: 1fr; }
    .partner-logo { height: 44px; }
}
.partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-logo-text {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--color-fg-subtle);
    text-align: center;
    line-height: 1.3;
}

/* ==========================================================================
   Forms / Buttons (board write, login, register 공통)
   ========================================================================== */

.form-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    max-width: 640px;
}
.field { margin-bottom: var(--space-5); }
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.field-row .field { margin-bottom: 0; }
@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; }
}
.field label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="date"],
.field input[type="number"],
.field input[type="search"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    font: inherit;
    font-size: var(--fs-body);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-fg);
}
.field textarea { resize: vertical; }
.field-check { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-regular); }
.field-hint { color: var(--color-fg-muted); font-size: var(--fs-caption); margin-top: var(--space-2); }
.form-error { color: var(--crimson-600); font-size: var(--fs-body-sm); margin-bottom: var(--space-3); }

/* ==========================================================================
   Warm horizontal form card (정보수정 등, 가로형·따뜻한 톤)
   ========================================================================== */

.form-card--warm {
    max-width: 880px;
    background: linear-gradient(180deg, var(--gold-100) 0%, var(--color-bg) 140px);
    border: 1px solid var(--gold-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) var(--space-9);
}
.form-card--warm .form-intro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-7);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gold-100);
}
.form-card--warm .form-intro .emoji { font-size: 28px; line-height: 1; }
.form-card--warm .form-intro h2 { font-size: var(--fs-h4); margin: 0 0 var(--space-1); color: var(--ink-900); }
.form-card--warm .form-intro p { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-body-sm); }

.field-grid-h {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-8);
    margin-bottom: var(--space-6);
}
@media (max-width: 700px) {
    .field-grid-h { grid-template-columns: 1fr; }
}
.field-h {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px dashed var(--ink-100);
}
.field-h label {
    flex: 0 0 108px;
    font-weight: var(--fw-semibold);
    color: var(--gold-600);
    font-size: var(--fs-body-sm);
}
.field-h input {
    flex: 1;
    font: inherit;
    font-size: var(--fs-body-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-fg);
    transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.field-h input:focus {
    outline: none;
    border-color: var(--gold-500);
    background: var(--color-bg);
}
.field-h input:disabled { color: var(--color-fg-muted); }
.field-h--wide { grid-column: 1 / -1; }
/* 글쓰기 제목·첨부파일 칸: 배경만 있는 기본 칸은 잘 안 보여서 같은 테두리 상자로 통일 */
.field-h--boxed input,
.field-h.field-h--boxed input[type="file"] {
    font-size: var(--fs-body-sm);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}
.field-h--boxed input::placeholder { color: var(--ink-400); }
.field-h.field-h--boxed input[type="file"] { color: var(--ink-400); }
.field-h--boxed input:focus { border-color: var(--gold-500); box-shadow: 0 0 0 3px var(--gold-100); }
.field-h.field-h--boxed input[type="file"]::file-selector-button {
    font: inherit;
    margin-right: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--ink-400);
    cursor: pointer;
}
.field-h input[type="file"] {
    border: 1px dashed var(--color-border);
    background: var(--color-bg);
    padding: var(--space-2);
    font-size: var(--fs-caption);
}

.editor-field { margin-top: var(--space-2); }
.editor-field > label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: var(--fw-semibold);
    color: var(--gold-600);
    font-size: var(--fs-body-sm);
}
.editor-field .editor-toolbar { border-color: var(--gold-100); }
.editor-field .editor-body { border-color: var(--gold-100); }

.field-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}
.field-switch-row .switch-label { font-weight: var(--fw-semibold); color: var(--ink-900); }
.field-switch-row .author-select {
    flex-shrink: 0;
    max-width: 55%;
    font: inherit;
    font-size: var(--fs-body-sm);
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--ink-300);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-fg);
}
.field-switch-row .switch-hint { display: block; font-weight: var(--fw-regular); color: var(--color-fg-muted); font-size: var(--fs-caption); margin-top: 2px; }
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .switch-track {
    position: absolute;
    inset: 0;
    background: var(--ink-300);
    border-radius: var(--radius-pill);
    transition: background var(--dur-base) var(--ease-std);
    cursor: pointer;
}
.switch .switch-track::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: var(--ink-000);
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-std);
}
.switch input:checked + .switch-track { background: var(--gold-500); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    border: 1px solid var(--kosin-blue-600);
    background: var(--kosin-blue-600);
    color: var(--color-fg-onbrand);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-std);
}
.btn:hover { background: var(--kosin-blue-800); border-color: var(--kosin-blue-800); color: var(--color-fg-onbrand); }
.btn-ghost {
    background: var(--color-bg);
    color: var(--kosin-blue-600);
}
.btn-ghost:hover { background: var(--color-bg-brand-soft); color: var(--kosin-blue-800); }

/* ==========================================================================
   Board list
   ========================================================================== */

.board-current-title { font-size: var(--fs-h3); color: var(--color-fg); margin: 0 0 var(--space-4); }
.board-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.board-search { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.board-search select,
.board-search input[type="text"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body-sm);
    color: var(--color-fg-subtle);
}
.board-search input[type="text"] { min-width: 220px; }
.board-search button {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-fg-subtle);
    font-size: var(--fs-body-sm);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.board-search button:hover { background: var(--kosin-blue-600); border-color: var(--kosin-blue-600); color: var(--color-fg-onbrand); }
.board-search-result { color: var(--color-fg-muted); font-size: var(--fs-body-sm); margin: 0 0 var(--space-3); }
.board-table { width: 100%; border-collapse: collapse; background: var(--color-bg); }
.board-table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-top: 2px solid var(--color-rule);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-muted);
    font-weight: var(--fw-semibold);
}
.board-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.board-table tbody tr:hover { background: var(--color-bg-brand-soft); }
.board-table .col-num { width: 4rem; text-align: center; color: var(--color-fg-muted); }
.board-table .col-author { width: 8rem; }
.board-table .col-date { width: 8rem; color: var(--color-fg-muted); }
.board-table .col-views { width: 4rem; text-align: center; color: var(--color-fg-muted); }
.board-table .empty-row td { text-align: center; color: var(--color-fg-muted); padding: var(--space-8); }
.board-notice-badge {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    color: var(--color-fg-onbrand);
    background: var(--kosin-blue-600);
    border-radius: var(--radius-md);
    padding: 1px var(--space-2);
}

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); justify-content: center; }
.pagination a, .pagination strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-fg-subtle);
}
.pagination strong { background: var(--kosin-blue-600); color: var(--color-fg-onbrand); }
.pagination a:hover { background: var(--color-bg-brand-soft); }
.pagination-edge { font-size: var(--fs-caption); color: var(--color-fg-muted); }

/* ==========================================================================
   Post detail
   ========================================================================== */

.post-meta { color: var(--color-fg-muted); font-size: var(--fs-body-sm); margin-top: var(--space-2); }
.post-actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); align-items: center; }
.post-attachments {
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    list-style: none;
}
.post-attachments li::before { content: "\1F4CE  "; }

.post-attachments-media {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.attachment-photo img {
    max-width: 100%;
    border-radius: var(--radius-sm);
    display: block;
}
.attachment-video { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; }
.attachment-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius-sm); }
.attachment-file {
    display: inline-block;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    width: fit-content;
}
.attachment-file::before { content: "\1F4CE  "; }

/* Rich text editor (Quill) */
.editor-toolbar { border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-bg-muted); }
.editor-body {
    min-height: 320px;
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: var(--fs-body);
    background: var(--color-bg);
}
.ql-editor { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }

/* ==========================================================================
   Officers
   ========================================================================== */

.officer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.officer-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    transition: box-shadow var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}
.officer-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--kosin-blue-100); }
.officer-blank { background: none; border-color: transparent; }
.officer-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-4);
    box-shadow: inset 0 0 0 1px rgba(11, 18, 32, .04);
}
.officer-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.officer-title {
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    color: var(--kosin-blue-600);
}
.officer-name { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); margin-top: var(--space-1); color: var(--color-fg); }
.officer-church { color: var(--color-fg-muted); font-size: var(--fs-caption); margin-top: 2px; }
@media (max-width: 640px) {
    .officer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Popup
   ========================================================================== */

.popup-window {
    position: fixed;
    z-index: 1000;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-width: 320px;
}
.popup-window img { display: block; max-width: 100%; height: auto; }
.popup-title-only { padding: var(--space-6); font-weight: var(--fw-bold); }
.popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-muted);
    font-size: var(--fs-caption);
}
.popup-footer button {
    background: var(--kosin-blue-600);
    color: var(--color-fg-onbrand);
    border: none;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.popup-footer button:hover { background: var(--kosin-blue-800); }
.popup-footer button:active { transform: translateY(2px); box-shadow: none; }

/* ==========================================================================
   Admin
   ========================================================================== */

.admin-menu { list-style: none; padding: 0; }
.admin-menu li {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}
.admin-menu a { color: var(--kosin-blue-600); font-weight: var(--fw-bold); text-decoration: none; }
.admin-menu a:hover { color: var(--kosin-blue-800); text-decoration: underline; }

/* ==========================================================================
   Districts / Tables
   ========================================================================== */

.district-block { margin-bottom: var(--space-12); }
.district-head { display: flex; align-items: baseline; gap: var(--space-2); }
.district-head h2 {
    font-size: var(--fs-h2);
    letter-spacing: var(--ls-heading);
    margin: 0 0 var(--space-2);
    color: var(--color-fg);
}
.district-head .count { font-weight: var(--fw-regular); color: var(--color-fg-muted); font-size: var(--fs-caption); }
.district-leaders {
    margin: 0 0 var(--space-4);
    color: var(--color-fg-subtle);
    font-size: var(--fs-body-sm);
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.district-leaders b { color: var(--color-fg); }

.table-scroll {
    overflow-x: auto;
    border-top: 2px solid var(--color-rule);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    -webkit-overflow-scrolling: touch;
    /* 표가 화면보다 넓을 때 오른쪽에 흐릿한 그림자를 줘서 "옆으로 더 있음"을 시각적으로 알려줌 */
    background:
        linear-gradient(var(--color-bg) 0 0) 0 0 / 20px 100% no-repeat local,
        linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)) 0 0 / 20px 100% no-repeat scroll,
        linear-gradient(var(--color-bg) 0 0) 100% 0 / 20px 100% no-repeat local,
        linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0)) 100% 0 / 20px 100% no-repeat scroll;
}
table.district-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    font-size: var(--fs-body-sm);
    min-width: 640px;
}
.district-table thead th {
    background: var(--kosin-blue-600);
    color: var(--color-fg-onbrand);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    white-space: nowrap;
    font-weight: var(--fw-semibold);
}
.district-table tbody td {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
    white-space: nowrap;
}
.district-table tbody td.addr { white-space: normal; min-width: 220px; }
.district-table tbody tr:nth-child(even) { background: var(--color-bg-muted); }
.district-table tbody tr:hover { background: var(--color-bg-brand-soft); }

/* 노회원 > 교회별 총대 명부(4열: 교회/담임목사/부목사/장로) — 시찰별로 열 너비가 제각각이던 것을 통일 */
table.district-table.roster-table {
    table-layout: fixed;
    min-width: 560px;
}
.roster-table th:nth-child(1), .roster-table td:nth-child(1) { width: 20%; } /* 교회 */
.roster-table th:nth-child(2), .roster-table td:nth-child(2) { width: 14%; } /* 담임목사 — 항상 1명이라 좁게 */
.roster-table th:nth-child(3), .roster-table td:nth-child(3) { width: 33%; } /* 부목사 — 여러 명일 수 있어 넓게 */
.roster-table th:nth-child(4), .roster-table td:nth-child(4) { width: 33%; } /* 장로(총대) */
.roster-table tbody td { white-space: normal; }
.roster-table th:nth-child(3), .roster-table td:nth-child(3),
.roster-table th:nth-child(4), .roster-table td:nth-child(4) { text-align: center; }

.site-link {
    display: inline-block;
    font-size: var(--fs-caption);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--kosin-blue-600);
    color: var(--kosin-blue-600);
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.site-link:hover { background: var(--kosin-blue-600); color: var(--color-fg-onbrand); }
.site-link.none { border-color: var(--color-border); color: var(--color-fg-muted); }

/* ==========================================================================
   Committees
   ========================================================================== */

.committee-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.committee-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-5) var(--space-6) var(--space-6);
    transition: box-shadow var(--dur-base) var(--ease-std);
}
.committee-card:hover { box-shadow: var(--shadow-sm); }
.committee-card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); color: var(--color-fg); }
.committee-leaders {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-body-sm);
    color: var(--color-fg-subtle);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-3);
}
.committee-leaders b { color: var(--color-fg); }
.committee-terms .term-row { margin-bottom: var(--space-2); }
.committee-terms .term-row:last-child { margin-bottom: 0; }
.term-label {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    color: var(--color-fg-onbrand);
    background: var(--kosin-blue-600);
    border-radius: var(--radius-md);
    padding: 1px var(--space-2);
    margin-right: var(--space-2);
    vertical-align: middle;
}
.term-names { font-size: var(--fs-body-sm); }
.term-names .role { color: var(--color-fg-muted); font-size: var(--fs-micro); }
.committee-card.simple p { font-size: var(--fs-body-sm); color: var(--color-fg-muted); margin: 0; }
@media (max-width: 640px) {
    .district-leaders { flex-direction: column; gap: var(--space-1); }
}

/* ==========================================================================
   Status accents
   ========================================================================== */

.tag-honor { color: var(--color-honor); }
.tag-notice { color: var(--color-notice); }
.tag-success { color: var(--color-success); }

/* ==========================================================================
   Rules (규칙) 페이지 — 가독성 개선
   ========================================================================== */

.rule-chapter { margin-bottom: var(--space-9); }
.rule-chapter h2 {
    font-size: var(--fs-h2);
    color: var(--kosin-blue-700);
    border-bottom: 2px solid var(--color-rule);
    padding-bottom: var(--space-2);
    margin: 0 0 var(--space-5);
}
.rule-chapter h3 {
    font-size: var(--fs-h4);
    color: var(--color-fg);
    margin: var(--space-6) 0 var(--space-2);
}
.rule-num {
    display: inline-block;
    color: var(--color-fg-onbrand);
    background: var(--kosin-blue-600);
    border-radius: var(--radius-sm);
    font-size: var(--fs-micro);
    font-weight: var(--fw-bold);
    padding: 2px var(--space-2);
    margin-right: var(--space-2);
    vertical-align: middle;
}
.static-content p { font-size: var(--fs-body-lg); line-height: 1.9; margin: 0 0 var(--space-3); color: var(--color-fg-subtle); }

/* ==========================================================================
   History (연혁) 페이지
   ========================================================================== */

.history-intro { color: var(--color-fg-subtle); margin-bottom: var(--space-8); }
.history-term { margin-bottom: var(--space-9); }
table.history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    font-size: var(--fs-body-sm);
    min-width: 560px;
}
.history-table thead th {
    background: var(--kosin-blue-600);
    color: var(--color-fg-onbrand);
    padding: var(--space-3) var(--space-4);
    font-weight: var(--fw-semibold);
    text-align: center;
}
.history-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.history-table tbody td.ggb { font-weight: var(--fw-bold); color: var(--kosin-blue-700); }
table.history-officers {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    margin-top: var(--space-2);
    font-size: var(--fs-caption);
    border: 1px solid var(--color-border);
    border-top: none;
}
.history-officers th {
    background: var(--color-bg-muted);
    padding: var(--space-2) var(--space-4);
    width: 12%;
    text-align: center;
    color: var(--color-fg-subtle);
    border-top: 1px solid var(--color-border);
}
.history-officers td {
    padding: var(--space-2) var(--space-4);
    width: 38%;
    border-top: 1px solid var(--color-border);
}
/* 회기표 바로 아래 임원표: .table-scroll의 2px 진한 상단선 대신 연한 구분선 */
.history-term .table-scroll + .table-scroll { border-top: 1px solid var(--color-border); }

/* ==========================================================================
   노회원(Roster summary) 페이지
   ========================================================================== */

.roster-intro { color: var(--color-fg-subtle); margin-bottom: var(--space-8); }
.roster-block { margin-bottom: var(--space-9); }
.roster-block > h2 {
    font-size: var(--fs-h2);
    color: var(--color-fg);
    margin: 0 0 var(--space-5);
}
.roster-block > h2 .count { font-weight: var(--fw-regular); color: var(--color-fg-muted); font-size: var(--fs-caption); margin-left: var(--space-2); }
.roster-cats { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.roster-cat {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4) var(--space-5);
}
.roster-cat h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-body);
    color: var(--kosin-blue-600);
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}
.roster-cat h3 .count { font-weight: var(--fw-regular); color: var(--color-fg-muted); font-size: var(--fs-caption); }
.roster-names { margin: 0; font-size: var(--fs-body-sm); color: var(--color-fg-subtle); line-height: 1.8; }

/* ==========================================================================
   서브페이지 히어로 배너
   ========================================================================== */

.page-hero {
    background: var(--kosin-blue-050);
    border-bottom: 3px solid var(--gold-500);
    color: var(--ink-900);
    text-align: center;
    padding: var(--space-7) var(--space-6);
    margin: 0 calc(50% - 50vw) var(--space-10);
    width: 100vw;
}
.page-hero h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-display-lg);
    letter-spacing: .40em;
    color: var(--kosin-blue-800);
    border: none;
    padding: 0;
}
.page-hero p { margin: var(--space-2) 0 0; color: var(--color-fg-muted); font-size: var(--fs-body); }

/* ==========================================================================
   Board tabs (게시판 바로가기)
   ========================================================================== */

.board-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    padding: var(--space-3);
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.board-tabs a {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: .02em;
    color: var(--color-fg-subtle);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.board-tabs a:hover { background: var(--color-bg); border-color: var(--color-border); color: var(--kosin-blue-800); }
.board-tabs a.active { background: var(--kosin-blue-600); border-color: var(--kosin-blue-600); color: var(--color-fg-onbrand); }

/* ==========================================================================
   Boards accordion (게시판 목록)
   ========================================================================== */

.board-list { list-style: none; margin: 0; padding: 0; }
.board-list-item {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.board-list-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    font: inherit;
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--color-fg);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
}
.board-list-toggle .board-desc { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--color-fg-muted); margin-left: var(--space-3); }
.board-list-toggle .chevron { transition: transform var(--dur-base) var(--ease-std); color: var(--color-fg-muted); }
.board-list-item.is-open .board-list-toggle .chevron { transform: rotate(180deg); }
.board-list-panel {
    display: none;
    border-top: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-5) var(--space-4);
}
.board-list-item.is-open .board-list-panel { display: block; }
.board-list-panel ul { list-style: none; margin: 0; padding: 0; }
.board-list-panel li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--fs-body-sm);
}
.board-list-panel li:first-child { border-top: none; }
.board-list-panel a { color: var(--color-fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list-panel a:hover { color: var(--color-fg-link-hover); }
.board-list-panel .empty { color: var(--color-fg-muted); padding: var(--space-2) 0; }
.board-list-more { display: inline-block; margin-top: var(--space-3); font-size: var(--fs-caption); }

/* ==========================================================================
   Responsive header / nav
   ========================================================================== */

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    color: var(--color-fg);
}
.nav-toggle svg { display: block; }

@media (max-width: 860px) {
    .header-top { height: auto; padding: var(--space-2) var(--space-4); }
    .site-emblem img { width: 48px; height: 48px; }
    .site-title-main { font-size: var(--fs-h4); }
    .header-utility { width: 100%; gap: var(--space-1) var(--space-4); row-gap: var(--space-1); font-size: var(--fs-micro); flex-wrap: wrap; }
    .nav-toggle { display: inline-flex; }
    .site-nav { flex-wrap: wrap; justify-content: space-between; padding: var(--space-3) var(--space-4); }
    .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; display: none; width: 100%; order: 3; }
    .site-nav.is-open > ul { display: flex; }
    .site-nav > ul > li { width: 100%; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; flex-wrap: wrap; align-items: center; }
    .site-nav > ul > li > a { flex: 1 1 auto; }
    .submenu-toggle { display: inline-flex; }
    .site-nav > ul > li.is-expanded .submenu-toggle svg { transform: rotate(180deg); }
    .submenu { position: static; display: block !important; visibility: visible; opacity: 1; pointer-events: auto; transform: none; box-shadow: none; border: none; padding: var(--space-1) 0 0 var(--space-3); width: 100%; }
    .submenu a { text-align: left; }
    .site-nav > ul > li .submenu { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-std); }
    .site-nav > ul > li.is-expanded .submenu { max-height: 400px; }
    .page-hero { padding: var(--space-6) var(--space-4); }
    .page-hero h1 { font-size: var(--fs-h1); }
    .officer-grid { grid-template-columns: repeat(2, 1fr); }
    /* 게시판 11개가 좁은 화면에서 여러 줄로 밀리던 것 → 한 줄로 옆으로 스크롤 */
    .board-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
    .board-tabs a { flex: 0 0 auto; }
}

@media (max-width: 480px) {
    :root { --gutter: 16px; }
    .roster-cats { grid-template-columns: 1fr; }
    .board-list-toggle { font-size: var(--fs-body); padding: var(--space-3) var(--space-4); }
    .board-search input[type="text"] { min-width: 0; flex: 1 1 100%; }
    .pagination { gap: var(--space-1); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    border-top: 2px solid var(--color-rule);
    background: var(--color-bg-muted);
    color: var(--color-fg-subtle);
    font-size: var(--fs-caption);
}
.site-footer a { color: var(--kosin-blue-600); text-decoration: none; }
.site-footer a:hover { color: var(--kosin-blue-800); text-decoration: underline; }

/* ==========================================================================
   예결산 장부 (임원 전용) — 고령 사용자·모바일 입력을 고려해 글자와 터치 영역을 크게
   ========================================================================== */

.ledger-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
}
.ledger-links a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-pill);
    color: var(--color-fg-link);
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
}
.ledger-links a:hover { background: var(--color-bg-brand-soft); }

.ledger-form {
    background: var(--admin-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: 560px;
    margin-bottom: var(--space-8);
}
.ledger-form-title {
    margin: 0 0 var(--space-5);
    font-size: var(--fs-h3);
    color: var(--admin-fg-heading);
}
.ledger-field { margin-bottom: var(--space-5); }
.ledger-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
}
.ledger-input {
    width: 100%;
    padding: var(--space-3);
    font-family: inherit;
    font-size: var(--fs-body-lg);
    line-height: 1.4;
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.ledger-input--amount { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-hint {
    margin: var(--space-2) 0 0;
    font-size: var(--fs-caption);
    color: var(--color-fg-muted);
}

.ledger-choice { display: flex; gap: var(--space-3); }
.ledger-choice-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-3);
    font-size: var(--fs-body-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.ledger-choice-item:has(input:checked) {
    border-color: var(--color-border-brand);
    background: var(--color-bg-brand-soft);
    font-weight: var(--fw-bold);
}
.ledger-choice-item input { width: 20px; height: 20px; }

.ledger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}
.ledger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 var(--space-6);
    font-family: inherit;
    font-size: var(--fs-body-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-fg-link);
    background: var(--color-bg);
    border: 1px solid var(--color-border-brand);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.ledger-btn--primary {
    color: var(--color-fg-onbrand);
    background: var(--color-bg-brand);
    border-color: var(--color-bg-brand);
}
.ledger-btn--primary:hover { background: var(--kosin-blue-800); }

/* 표 안에서 링크처럼 보여야 하는 버튼(삭제 등) */
.ledger-linkbtn {
    padding: 0;
    margin-left: var(--space-2);
    font: inherit;
    color: var(--admin-fg-error);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}
.ledger-hidden-form { display: none; }

.ledger-filelist { list-style: none; margin: 0; padding: 0; }
.ledger-filelist li { padding: var(--space-1) 0; }

.ledger-yearform {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.ledger-yearform select {
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-body);
}

.ledger-num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-manage { width: 6.5rem; text-align: center; white-space: nowrap; }

/* 예산 편성 화면의 계정과목 추가 줄 */
.ledger-addform {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.ledger-addform label { font-weight: var(--fw-semibold); }
.ledger-addform select,
.ledger-add-name {
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.ledger-add-name { flex: 1 1 12rem; min-width: 10rem; }

/* 상회비 표 안에서 시찰을 옮길 때 쓰는 선택 상자 */
.ledger-district-select {
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.ledger-indent { display: inline-block; padding-left: var(--space-5); }
.ledger-row-group { background: var(--color-bg-muted); font-weight: var(--fw-semibold); }
.ledger-row-total {
    background: var(--color-bg-subtle);
    font-weight: var(--fw-bold);
    border-top: 2px solid var(--kosin-blue-800);
}
.ledger-diff {
    margin: var(--space-6) 0 0;
    font-size: var(--fs-body-lg);
}

.ledger-name-input {
    width: 100%;
    min-width: 8rem;
    padding: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-body-sm);
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.ledger-name-input:hover, .ledger-name-input:focus { border-color: var(--color-border); }
.ledger-amount-input {
    width: 9rem;
    padding: var(--space-2);
    font-family: inherit;
    font-size: var(--fs-body);
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-fg);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    .ledger-form { padding: var(--space-4); }
    .ledger-links a { flex: 1 1 100%; text-align: center; }
}

/* 상회비 관리·결산 목록에서 쓰는 보조 표기 */
.ledger-optional { font-weight: var(--fw-regular); color: var(--color-fg-muted); font-size: var(--fs-caption); }
.ledger-faint { color: var(--color-fg-muted); font-size: var(--fs-caption); }
.ledger-unpaid { color: var(--color-notice); font-weight: var(--fw-semibold); }