/*
 * onetable.sw4u.kr — 사이트 공통 스타일
 *
 * 색·폰트·간격은 전부 /assets/tokens.css (.design/tokens.css) 의 변수를 통해서만 쓴다.
 * 여기에 hex 값이나 px 폰트크기를 직접 적지 않는다 (아래 임시 브랜드 블록만 예외).
 */

/* ══════════════════════════════════════════════════════════════════════════
 * BEGIN 임시 브랜드 블록 — tokens.css 이관 예정 (designer 검토 전 초안)
 *
 * tokens.css 는 designer 소유라 여기서 의미변수 값만 재정의한다. 새 의미변수는 만들지 않는다.
 * 다크 블록은 라이트 블록의 변수를 빠짐없이 다시 선언한다.
 * 콘셉트: "한 테이블" — 따뜻한 나무(앰버) 위에 모이는 여러 언어(틸).
 * ══════════════════════════════════════════════════════════════════════════ */
[data-brand="onetable"] {
    --color-primary: #0f766e;        /* 흰 배경 위 5.47:1 */
    --color-primary-hover: #115e59;
    --color-primary-active: #134e4a;
    --color-primary-fg: #ffffff;
    --color-primary-soft: #e6f4f1;
    --color-primary-soft-fg: #115e59;

    --color-accent: #b45309;         /* 흰 배경 위 5.02:1 */
    --color-accent-hover: #92400e;
    --color-accent-fg: #ffffff;
    --color-accent-soft: #fef3e2;
    --color-accent-soft-fg: #7c3a0b;

    --gradient-hero: linear-gradient(160deg, #0b3d3a 0%, #0f5c56 55%, #1a7a6f 100%);
    --shadow-focus: 0 0 0 3px rgb(15 118 110 / 0.28);

    /* 게시판답게: 둥근 모서리 없이 각지게, 여백은 촘촘하게 (2026-10-08 사용자 요청) */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;
    --radius-full: 0;
}

[data-theme="dark"][data-brand="onetable"] {
    --color-primary: #2dd4bf;
    --color-primary-hover: #5eead4;
    --color-primary-active: #99f6e4;
    --color-primary-fg: #06231f;
    --color-primary-soft: #0d2f2c;
    --color-primary-soft-fg: #99f6e4;

    --color-accent: #f0b46a;
    --color-accent-hover: #f8cf9a;
    --color-accent-fg: #0b0e1a;
    --color-accent-soft: #2a1a10;
    --color-accent-soft-fg: #f8cf9a;

    --gradient-hero: linear-gradient(160deg, #04191c 0%, #08302e 55%, #0d423d 100%);
    --shadow-focus: 0 0 0 3px rgb(45 212 191 / 0.45);
}
/* ══════════════ END 임시 브랜드 블록 ══════════════ */

/* ── 링크 기본색 ──
 * 지정이 없으면 브라우저 기본 파랑·보라(방문)가 나와 다크 스킨에서 읽히지 않는다(2026-10-08).
 * 스킨별 primary 토큰을 쓰고, 목록 안 링크는 본문색으로 둔다. */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }

/* ── 레이아웃 ── */
.container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    background: var(--color-primary);
    color: var(--color-primary-fg);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    z-index: var(--z-toast);
}
.skip-link:focus { left: var(--space-2); }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: var(--header-height);
}
.brand {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    color: var(--color-fg);
    text-decoration: none;
    letter-spacing: var(--letter-tight);
}
.brand span { color: var(--color-primary); }
.brand__image { position: relative; display: block; }
.brand__logo { display: block; height: 32px; width: auto; }

/* 원본(288×96)의 One만 덮는다. e와 T가 겹치는 x좌표는 T 아래부터 포함한다. */
[data-theme="dark"] .brand__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-fg);
    -webkit-mask: var(--brand-logo-url) center / 100% 100% no-repeat;
    mask: var(--brand-logo-url) center / 100% 100% no-repeat;
    clip-path: polygon(30% 0, 57.3% 0, 57.3% 41.7%, 59.4% 41.7%, 59.4% 100%, 30% 100%);
    pointer-events: none;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
}
.site-nav a:not(.btn) {
    color: var(--color-fg-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
}
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--color-fg); }

.lang-picker { position: relative; font-size: var(--fs-xs); }
.lang-picker__btn { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border: 1px solid var(--color-border); color: var(--color-fg-muted); white-space: nowrap; }
.lang-picker__btn::-webkit-details-marker { display: none; }
.lang-picker__btn:hover, .lang-picker[open] .lang-picker__btn { color: var(--color-fg); border-color: var(--color-border-strong); }
.lang-picker__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lang-picker__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: var(--z-dropdown, 50); width: min(280px, calc(100vw - 2rem)); background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); padding: var(--space-2); }
.lang-picker__input { width: 100%; font: inherit; font-size: var(--fs-sm); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-input); background: var(--color-surface); color: var(--color-fg); }
.lang-picker__input:focus { outline: none; box-shadow: var(--shadow-focus); }
.lang-picker__list { list-style: none; margin: var(--space-1) 0 0; padding: 0; max-height: min(60vh, 360px); overflow-y: auto; }
.lang-picker__list a { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); color: var(--color-fg); text-decoration: none; font-size: var(--fs-sm); }
.lang-picker__list small { color: var(--color-fg-subtle); }
.lang-picker__list li.is-active a, .lang-picker__list a:hover { background: var(--color-surface-2); }
.lang-picker__list a[aria-current="true"] { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-weight: var(--fw-medium); }
.lang-picker__empty { margin: var(--space-2) 0 0; color: var(--color-fg-subtle); }

.site-main { padding-block: var(--space-4); min-height: 60vh; }

.site-footer {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-4);
    color: var(--color-fg-subtle);
    font-size: var(--fs-xs);
}

.inline { display: inline; }

/* ── 버튼·폼 ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-sm);
    line-height: var(--line-tight);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font: inherit;
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn--primary, .btn--primary:visited, .btn--primary:hover { color: var(--color-primary-fg); }
.btn--primary { background: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--ghost, .btn--ghost:visited { background: transparent; color: var(--color-fg-muted); }
.btn--ghost:hover { color: var(--color-fg); background: var(--color-surface-2); }
.btn--accent, .btn--accent:visited, .btn--accent:hover { background: var(--color-accent); color: var(--color-accent-fg); }

.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field input, .field select, .field textarea {
    font: inherit;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: var(--shadow-focus); }
.field .error { color: var(--color-danger); font-size: var(--fs-xs); }

.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}
.flash--ok { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.flash--err { background: var(--color-danger-soft); color: var(--color-danger); }

/* ── 히어로(랜딩) ── */
.hero {
    background: var(--gradient-hero);
    color: var(--color-on-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-6);
}
.hero h1 { font-size: var(--fs-3xl); line-height: var(--line-tight); margin: 0 0 var(--space-3); }
.hero p { color: var(--color-on-dark-muted); max-width: 60ch; }

/* ── 카드·배지 ── */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
}
.badge--auto { background: var(--color-accent-soft); color: var(--color-accent-soft-fg); }

@media (max-width: 640px) {
    .site-header__inner { min-height: var(--header-height-mobile); flex-wrap: wrap; }
    .lang-picker { order: 3; margin-inline-start: auto; padding-bottom: var(--space-2); }
    .hero { padding: var(--space-8) var(--space-4); }
    .hero h1 { font-size: var(--fs-2xl); }
}

/* ── 페이지 공통 ── */
.narrow { max-width: var(--container-sm); margin-inline: auto; }
.narrow--wide { max-width: var(--container-md); }
.muted { color: var(--color-fg-muted); }
.empty { color: var(--color-fg-subtle); padding: var(--space-8) 0; text-align: center; }
.crumbs { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0 0 var(--space-2); }
.crumbs a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plain-list a { color: var(--color-fg); text-decoration: none; }
.plain-list a:hover { color: var(--color-primary); text-decoration: underline; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-sm); }
.check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--fs-sm); }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-fg-subtle); font-size: var(--fs-xs); margin: var(--space-4) 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }
.btn--google { width: 100%; justify-content: center; background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
.btn--google:hover { background: var(--color-surface-2); }
.btn--sm { padding: 2px var(--space-2); font-size: var(--fs-xs); }
.form-actions { display: flex; gap: var(--space-2); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; font-size: var(--fs-xl); }
.page-head p { margin: 0; font-size: var(--fs-sm); }
.filter-bar { margin: 0; }
.filter-bar select { font: inherit; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-fg); }

/* ── 홈 ── */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-4); margin-top: 0; }
/* 안쪽 그리드의 칸을 minmax(0,1fr) 로 고정해야 줄바꿈 없는 긴 제목이 칸을 늘려 오른쪽 상자를 덮지 않는다 (2026-10-08) */
.home-grid > *, .home-section { min-width: 0; }
.home-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-content: start; }
.home-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-content: start; }
.side-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--color-border); font-size: var(--fs-xs); }
.home-side h2 { font-size: var(--fs-sm); margin: 0 0 var(--space-1); padding-bottom: var(--space-1); border-bottom: 1px solid var(--color-border); }

/* ── 첫 화면: 분류별 2열 목록, 우측 게시판 상자는 높이 고정 + 스크롤 (2026-10-09) ── */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); align-items: start; }
.cat-block .home-section__head { font-size: var(--fs-sm); }
.cat-rows { list-style: none; margin: 0; padding: 0; }
.cat-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 2px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-xs); line-height: var(--line-tight); }
.cat-row__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-fg); text-decoration: none; }
.cat-row__title:hover { color: var(--color-primary); text-decoration: underline; }
.cat-row__time { flex: none; color: var(--color-fg-muted); white-space: nowrap; }
.board-scroll { height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: var(--space-1); }

/* ── 법적 문서 ── */
.legal { max-width: 72ch; }
.legal h1 { font-size: var(--fs-2xl); margin: 0 0 var(--space-1); }
.legal__note { padding: var(--space-2) var(--space-3); background: var(--color-surface-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.legal__intro { font-size: var(--fs-md); line-height: var(--line-loose); }
.legal h2 { font-size: var(--fs-lg); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { line-height: var(--line-loose); }
.legal__list { padding-inline-start: var(--space-5); }
.legal__contact { margin-top: var(--space-8); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.site-footer__links { display: flex; gap: var(--space-4); font-size: var(--fs-xs); }
.site-footer__links a { color: var(--color-fg-muted); }

/* ── 첫 화면: 게시판형 목록 (히어로 없음) ── */
.home-section__head { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--fs-md); margin: 0; padding-bottom: var(--space-1); border-bottom: 2px solid var(--color-fg); }
.home-section__head a { color: var(--color-fg); text-decoration: none; }
.home-section__more { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-fg-muted) !important; }
.post-rows { list-style: none; margin: 0; padding: 0; }
.post-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); line-height: var(--line-tight); }
.post-row__main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
.post-row__board { flex: none; font-size: var(--fs-xs); color: var(--color-primary-soft-fg); background: var(--color-primary-soft); padding: 0 var(--space-2); border-radius: var(--radius-full); text-decoration: none; }
.post-row__title { color: var(--color-fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.post-row__title:hover { color: var(--color-primary); text-decoration: underline; }
.post-row__comments { flex: none; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--color-primary); }
.post-row__comments::before { content: '['; } .post-row__comments::after { content: ']'; }
.post-row__cross, .post-row__img { flex: none; font-size: var(--fs-xs); }
.post-row__auto { flex: none; font-size: 10px; color: var(--color-fg-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 4px; }
.post-row__meta { flex: none; display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); white-space: nowrap; }
.post-row__author { color: var(--color-fg); }
.rank-list { list-style: decimal inside; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); line-height: var(--line-tight); }
.rank-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-list a { color: var(--color-fg); text-decoration: none; }
.rank-list a:hover { color: var(--color-primary); }

/* ── 피드 글 카드 (Reddit 식: 본문 전문 + 반응 줄) ── */
.write-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); margin-bottom: var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface); text-decoration: none; color: inherit; }
.write-bar:hover { border-color: var(--color-primary); }
.write-bar__input { flex: 1; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-input); background: var(--color-surface-2); color: var(--color-fg-subtle); font-size: var(--fs-sm); }
.post-list { display: grid; gap: var(--space-2); }
.post-card { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); transition: border-color var(--duration-fast) var(--ease-out); }
.post-card:hover { border-color: var(--color-border-strong); }
.post-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.post-card__author { font-weight: var(--fw-medium); color: var(--color-fg); }
.post-card__board { color: var(--color-primary-soft-fg); background: var(--color-primary-soft); padding: 0 var(--space-2); text-decoration: none; font-weight: var(--fw-medium); }
.post-card__title { margin: var(--space-1) 0; font-size: var(--fs-md); line-height: var(--line-tight); }
.post-card__title a { color: var(--color-fg); text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }
.post-card__body { font-size: var(--fs-sm); line-height: var(--line-base); overflow-wrap: anywhere; }
.post-card__images { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.post-card__images img { height: 140px; width: auto; max-width: 100%; display: block; border: 1px solid var(--color-border); }
.post-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.post-card__stats .btn--sm { padding: 2px var(--space-2); }
.post-card__stats .is-on { color: var(--color-rose); }
.post-card__cross { color: var(--color-accent-soft-fg); padding-inline: var(--space-2); }
.badge--country { background: var(--color-surface-2); font-weight: var(--fw-medium); }

/* ── 글 상세 ── */
.post__title { font-size: var(--fs-xl); line-height: var(--line-tight); margin: 0 0 var(--space-1); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.post__images { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-1); margin: var(--space-3) 0; }
.post__images img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.post__body { font-size: var(--fs-base); line-height: var(--line-base); padding: var(--space-3) 0; overflow-wrap: anywhere; }
.post__body.is-original { color: var(--color-fg-muted); }
.post__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-fg-subtle); font-size: var(--fs-sm); }
.comments { margin-top: var(--space-4); }
.comments h2 { font-size: var(--fs-md); margin: 0 0 var(--space-2); }

@media (max-width: 860px) {
    .home-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: minmax(0, 1fr); }
    .post-row { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
    .post-row__main { flex-basis: 100%; }
    .post-row__title { white-space: normal; }
    .page-head { flex-direction: column; }
}

/* ── 댓글 스레드 (Reddit 식: 왼쪽 선으로 부모-자식 묶음) ── */
.comment-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.comment { padding-block: var(--space-1); padding-inline: var(--space-3) 0; border-inline-start: 2px solid var(--color-border); margin-bottom: var(--space-1); }
.comment:hover { border-inline-start-color: var(--color-border-strong); }
.comment--cross { border-inline-start-color: var(--color-accent); }
.comment-list--nested { margin: var(--space-1) 0 0; padding-inline-start: var(--space-2); }
.comment-list--flat { padding-inline-start: 0; }
.comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.comment__author { font-weight: var(--fw-medium); color: var(--color-fg); }
.comment__body { margin: 2px 0; font-size: var(--fs-sm); line-height: var(--line-base); overflow-wrap: anywhere; }
.comment__body.is-original { color: var(--color-fg-muted); }
.comment__actions { display: flex; flex-wrap: wrap; gap: 0; }
.comment__actions .btn--sm { padding: 0 var(--space-2); }
.comment-form { margin-top: var(--space-3); }
.comment-form--inline { margin: var(--space-2) 0; padding: var(--space-2); background: var(--color-surface-2); }
.comment-form .field { margin-bottom: var(--space-2); }
.btn.is-on { color: var(--color-rose); }

/* ── 알림 ── */
.notif { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.notif--unread { border-color: var(--color-primary); background: var(--color-primary-soft); }
.notif a { color: inherit; text-decoration: none; display: block; }
.notif p { margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
@media (max-width: 640px) { .comment { padding-inline-start: var(--space-2); } .comment-list--nested { padding-inline-start: var(--space-1); } }

/* ── 운영 ── */
.admin-nav { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.admin-nav a { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-fg); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: var(--space-3); }
.table th, .table td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
meter { width: 100%; height: 10px; }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }
.waitlist { margin-top: var(--space-8); }

/* 봇 글 이미지 출처 줄(저작권자 · 라이선스) — 2026-10-08 */
.post__figure { margin: 0; }
.image-credit { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); line-height: 1.4; }
.image-credit a { color: inherit; text-decoration: underline; }
.post__body a, .post-card__body a { overflow-wrap: anywhere; }

/* ── 게시판 전체보기·관리자 선거 (2026-10-08) ── */
.board-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); align-items: start; }
.board-dir__group { min-width: 0; }
.board-dir__list { list-style: none; margin: 0; padding: 0; }
.board-dir__item { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.board-dir__name { font-weight: var(--fw-bold); color: var(--color-fg); text-decoration: none; }
.board-dir__name:hover { color: var(--color-primary); text-decoration: underline; }
.board-dir__count { margin-inline-start: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.board-dir__desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--line-tight); }
.board-dir__mod { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.board-mod { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--color-fg-muted); }
.board-req__head { margin-top: var(--space-6); }
.election-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-accent-soft); color: var(--color-accent-soft-fg); font-size: var(--fs-sm); }
.election__rules { font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--line-base); }
.election__head { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.election__list { list-style: none; margin: var(--space-2) 0; padding: 0; }
.election__cand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.election__cand label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); cursor: pointer; }
.election__cand.is-winner { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.election__votes { margin-inline-start: auto; font-weight: var(--fw-bold); }

/* ── 운영: 번역 오류 신고 수작업 ── */
.tr-review__reporters { margin: 0 0 var(--space-2); padding-inline-start: var(--space-4); font-size: var(--fs-xs); }
.tr-review__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tr-review__original { padding: var(--space-2); background: var(--color-surface-2); font-size: var(--fs-sm); line-height: var(--line-base); max-height: 20rem; overflow: auto; overflow-wrap: anywhere; }
.tr-review textarea { width: 100%; font-size: var(--fs-sm); }
@media (max-width: 860px) { .tr-review__pair { grid-template-columns: 1fr; } }