/* ==========================================================
   독존(dokjon) 공통 스타일 — 다크 "배틀 아레나" 테마
   - 모바일 퍼스트: 작은 화면 스타일을 기본으로 작성하고,
     화면이 커지면(min-width) 스타일을 덧붙이는 방식입니다.
   - 브랜드 컬러: 레드(보수) + 블루(민주), 어두운 배경 위에 네온처럼 표현
   - 2026-09-23: 사용자가 참고 이미지(정치 배틀 아레나 스타일)를 주면서
     메인 디자인 변경을 요청, 화이트 테마(2026-09-22)에서 다시 다크 테마로
     되돌렸습니다. 아래 :root 색상 변수만 바뀌면 전체 화면이 같이 바뀝니다.
   ========================================================== */

:root {
    --color-red: #ef233c;
    --color-red-dark: #b8192c;
    --color-blue: #2f6fed;
    --color-blue-dark: #1d4fc0;
    --color-purple: #8b5cf6;
    --color-teal: #14b8a6;
    --color-gold: #eab308;

    --color-bg: #06070a;
    --color-bg-elevated: #12151c;
    --color-bg-card: #161a23;
    --color-border: #262b36;

    --color-text: #f4f5f7;
    --color-text-muted: #9aa1ad;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    --radius: 10px;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    /* 모바일 기준 본문 크기 (PC 축소판이 아니라 모바일에 맞춘 값) */
    font-size: 16px;
    line-height: 1.6;
}

a { color: inherit; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--color-blue);
    color: #fff;
    padding: var(--space-2) var(--space-3);
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------- HEADER (TOP + GNB, 같은 배경으로 한 덩어리처럼) ---------------- */
.site-header {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    max-width: 1280px;
    margin: 0 auto;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.logo-image {
    height: 32px;
    width: auto;
    display: block;
}
.logo-tagline {
    display: none;
    margin-left: var(--space-2);
    padding-left: var(--space-2);
    border-left: 1px solid var(--color-border);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* 2026-09-24: 로그인 후 [등급] 닉네임 | 마이페이지 | 로그아웃 */
.top-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.top-nickname {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.top-sep {
    font-size: 0.75rem;
    color: var(--color-border);
}

.top-link {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.top-link:hover,
.top-link:focus { color: var(--color-text); }
.top-logout-form { margin: 0; display: inline; }
.top-link-icon { display: none; width: 20px; height: 20px; }
.top-link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}
/* 폰 화면(햄버거 메뉴가 보이는 767px 이하): 상단을 항상 한 줄로 유지.
   공간이 모자라면 줄바꿈 대신 닉네임이 "…"으로 줄어듭니다. (2026-09-24) */
@media (max-width: 767px) {
    .top-inner { flex-wrap: nowrap; gap: 6px; padding-left: 12px; padding-right: 8px; }
    .logo { flex-shrink: 0; }
    .logo-image { height: 28px; }
    .top-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; gap: 8px; }
    .top-sep { display: none; }
    .top-user { flex: 0 1 auto; min-width: 0; gap: 3px; }
    .top-nickname { flex: 0 1 auto; min-width: 0; max-width: 8em; }
    /* 마이페이지/로그아웃: 폰에서는 아이콘만 (글자는 title과 화면낭독기용으로 유지) */
    .top-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 36px; }
    .top-link-icon { display: block; }
    .top-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .top-user .rank-chip, .top-user .party-badge, .top-link, .top-logout-form, .gnb-toggle { flex-shrink: 0; }
    .top-nickname, .top-link, .top-link-button { font-size: 0.78rem; }
    .gnb-toggle { width: 40px; }
    /* 폰에서는 상단 진영 뱃지를 방패 아이콘만 (보수=빨강/진보=파랑) */
    .top-user .party-badge { padding: 3px 4px; }
    .top-user .party-badge-text { display: none; }  /* 글자는 title 속성(마우스 올리면 표시)으로 남아 있음 */
    .top-user .party-badge-icon { width: 12px; height: 12px; }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn-ghost {
    color: var(--color-text);
    border-color: var(--color-border);
    background: transparent;
}
.btn-ghost:hover {
    border-color: var(--color-text-muted);
}
/* 특정 진영 색(빨강/파랑)을 섞지 않은, 평범한 단색 버튼 */
.btn-primary {
    background: var(--color-text);
    color: var(--color-bg);
}
.btn-primary:hover {
    background: #ffffff;
}

/* 모바일 GNB 토글 버튼: 태블릿 이상에서는 숨김 */
.gnb-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.gnb-toggle-bar,
.gnb-toggle-bar::before,
.gnb-toggle-bar::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    position: relative;
}
.gnb-toggle-bar::before { top: -7px; }
.gnb-toggle-bar::after { top: 5px; }

/* ---------------- GNB ---------------- */
.gnb-list {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-3) var(--space-2);
    max-width: 1280px;
    margin: 0 auto;
    display: none;
    flex-direction: column;
}
.gnb-list.is-open { display: flex; }

.gnb-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
}
.gnb-link:hover, .gnb-link:focus { color: var(--color-text); }
.gnb-conservative:hover { color: var(--color-red); }
.gnb-democrat:hover { color: var(--color-blue); }
.gnb-ilgito:hover { color: var(--color-purple); }
.gnb-finance:hover { color: var(--color-gold); }
.gnb-free:hover { color: var(--color-teal); }

/* 지금 보고 있는 게시판/페이지는 진하게 + 브랜드 컬러 밑줄로 강조 */
.gnb-link.is-active { color: var(--color-text); }
.gnb-home.is-active { color: var(--color-blue); }
.gnb-conservative.is-active { color: var(--color-red); }
.gnb-democrat.is-active { color: var(--color-blue); }
.gnb-ilgito.is-active { color: var(--color-purple); }
.gnb-finance.is-active { color: var(--color-gold); }
.gnb-free.is-active { color: var(--color-teal); }

/* 일기토(1:1 끝장토론)는 실시간 느낌을 주려고 번개 아이콘 + 보라색 강조 */
.gnb-live { color: var(--color-purple); }

/* GNB 하위 메뉴 드롭다운 (일반>자유, 금융>주식 등).
   모바일(GNB가 세로 목록일 때)에는 그냥 부모 아래에 들여쓴 목록으로 항상 보이고,
   PC(768px~)에서는 마우스를 올리거나(hover) 키보드 포커스 시에만 나타납니다. */
.gnb-item { position: relative; }
.gnb-dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gnb-dropdown-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-2) 0 var(--space-4);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
}
.gnb-dropdown-link:hover, .gnb-dropdown-link:focus { color: var(--color-text); }

/* ---------------- 본문 레이아웃 ---------------- */
.layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.site-main {
    min-width: 0;
    /* .layout이 가로(flex-row)로 바뀌는 화면에서 남은 공간을 다 차지하도록.
       이게 없으면 내용 크기만큼만 좁게 잡혀서 안의 auth-card가 화면 왼쪽에
       붙어 보이는 문제가 생깁니다. */
    flex: 1 1 auto;
    width: 100%;
}

/* ---------------- 히어로(메인 배너) ---------------- */
/* 요청대로 원래 크기의 3/4로 축소 (가로폭을 줄이고 가운데 정렬) */
.hero {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    max-width: 75%;
    margin: 0 auto;
}
.hero-image {
    width: 100%;
    display: block;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}
/* "SEASON 2026 LIVE ARENA" 배지: 히어로 이미지 위 왼쪽 위에 얹음 */
.hero-badge {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(6, 7, 10, 0.75);
    color: var(--color-text);
    border: 1px solid rgba(244, 245, 247, 0.2);
    border-radius: 999px;
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-red);
    animation: hero-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes hero-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ---------------- 가입자 진영 비율 바 ---------------- */
.party-ratio {
    margin-top: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.party-ratio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.party-ratio-side {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.8rem;
    font-weight: 700;
    flex-wrap: wrap;
}
.party-ratio-side-right { justify-content: flex-end; text-align: right; }
.party-ratio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.party-ratio-dot-conservative { background: var(--color-red); }
.party-ratio-dot-democrat { background: var(--color-blue); }
.party-ratio-num-conservative { color: var(--color-red); }
.party-ratio-num-democrat { color: var(--color-blue); }
.party-ratio-vs {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--color-text-muted);
}

.party-ratio-bar {
    display: flex;
    width: 100%;
    height: 20px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-bg-elevated);
}
.party-ratio-fill {
    /* 페이지 로드 시 0% → 실제 값까지 채워지는 애니메이션 (main.js가 width를 바꿔줌) */
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.party-ratio-fill-conservative { background: var(--color-red); }
.party-ratio-fill-democrat { background: var(--color-blue); }
.party-ratio-note {
    margin: var(--space-2) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ---------------- 바로가기(Quick Menu) 카드 — 현재 화면에서 숨김(주석 처리) ---------------- */
.quick-menu {
    margin-top: var(--space-4);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}
.quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius);
    text-decoration: none;
    color: #fff;
    /* 터치 영역 확보 */
    min-height: 96px;
    justify-content: center;
}
.quick-icon { font-size: 1.4rem; }
.quick-title { font-weight: 700; font-size: 0.95rem; }
.quick-desc { font-size: 0.75rem; opacity: 0.85; }

.quick-conservative { background: linear-gradient(135deg, var(--color-red), var(--color-red-dark)); }
.quick-democrat { background: linear-gradient(135deg, var(--color-blue), var(--color-blue-dark)); }
.quick-ilgito { background: linear-gradient(135deg, var(--color-purple), #5b21b6); }
.quick-general { background: linear-gradient(135deg, var(--color-teal), #0f766e); }
.quick-finance { background: linear-gradient(135deg, var(--color-gold), #15803d); }

/* ---------------- 메인 화면 콘텐츠 (보수/일기토/민주, 랭킹, 준비중 카드들) ---------------- */
.arena-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.main-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.main-card-wide { margin-top: var(--space-3); }
.main-card h2 {
    margin: 0 0 var(--space-2);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.dot-red { background: var(--color-red); }
.dot-blue { background: var(--color-blue); }
.dot-gold { background: var(--color-gold); }
.dot-purple { background: var(--color-purple); }
.dot-teal { background: var(--color-teal); }

/* 아직 안 만든 기능(일기토 실시간 투표, 명예의 전당, 팩트체크, 여론조사) 카드 */
.main-card-soon { border-style: dashed; }
.main-card-soon-badge {
    display: inline-block;
    margin: 0 0 var(--space-2);
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
}

.main-card-empty,
.ranking-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.ranking-list { list-style: none; margin: 0; padding: 0; }
.ranking-list li {
    padding: var(--space-1) 0;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}
.ranking-list li:last-child { border-bottom: none; }
.ranking-list li a {
    color: var(--color-text);
    text-decoration: none;
    display: block;
    min-height: 32px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ranking-list li a:hover { text-decoration: underline; }

/* 실시간 통합 랭킹: 순번 + 제목 + 게시판/조회수 */
.ranking-list-numbered li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
}
.ranking-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.ranking-list-numbered li a {
    flex: 1 1 auto;
    min-width: 0;
}
.ranking-meta {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---------------- 로그인/회원가입 폼 ---------------- */
/* 화면 가운데 배치를 위한 래퍼 */
.auth-page {
    display: flex;
    justify-content: center;
    padding: var(--space-5) 0;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.auth-card h1 {
    font-size: 1.2rem;
    margin-top: 0;
}
.form-field { margin-bottom: var(--space-3); }
.form-field label {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.form-field input,
.form-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-2);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-size: 0.95rem;
}
/* div로 렌더링(부모가 <p>면 안의 <ul>이 잘못 튀어나가 폰트 크기가 커집니다) */
.form-help {
    margin: var(--space-1) 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.form-help ul {
    margin: var(--space-1) 0 0;
    padding-left: 1.1em;
}
.form-help li {
    margin-bottom: 2px;
}

.form-field-title {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.terms-box {
    height: 140px;
    overflow-y: auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-2);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.terms-box p { margin: 0 0 var(--space-2); }
.terms-box p:last-child { margin-bottom: 0; }

.checkbox-label {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-2);
    font-size: 0.8rem;
    /* 터치 영역 확보 */
    min-height: 44px;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
    width: 18px;
    height: 18px;
    /* .form-field input의 min-height(44px)가 체크박스/라디오에도 걸려서
       글자와 한 줄로 안 맞던 문제 수정 (2026-09-24) */
    min-height: 0;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

/* 회원가입: 성별(남성/여성) 라디오 버튼 - 한 줄에 나란히 */
.gender-choices {
    display: flex;
    gap: var(--space-3);
}
.gender-choices .checkbox-label {
    /* .form-field label(display:block)이 덮어쓰던 것을 다시 flex로 (라디오+글자 세로 가운데 정렬) */
    display: flex;
    margin-bottom: 0;
    flex: 1;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-elevated);
}
.gender-choices .checkbox-label:has(input:checked) {
    border-color: var(--color-blue);
    color: var(--color-text);
}
.checkbox-label span {
    /* 체크박스와 한 줄로 정확히 맞추기 (줄바꿈 없이) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 생년월일 (년/월/일 select 3개) */
.birth-date-selects {
    display: flex;
    gap: var(--space-2);
}
.birth-date-selects select { flex: 1; }
.form-error {
    margin: var(--space-1) 0 0;
    font-size: 0.8rem;
    color: var(--color-red);
}
.btn-block {
    width: 100%;
    margin-top: var(--space-2);
}
.auth-links {
    margin-top: var(--space-3);
    font-size: 0.85rem;
    text-align: center;
    color: var(--color-text-muted);
}
.auth-links a { color: var(--color-blue); text-decoration: none; }

/* ---------------- 알림 메시지 (글 등록/수정/삭제 성공·실패 등) ---------------- */
.messages {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}
.message {
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: var(--space-2);
}
.message-success {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.message-error {
    background: rgba(239, 35, 60, 0.12);
    color: var(--color-red);
    border: 1px solid rgba(239, 35, 60, 0.3);
}
.message-warning {
    background: rgba(234, 179, 8, 0.12);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* ---------------- 게시판 (글 목록) ---------------- */
.board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.board-title {
    font-size: 1.2rem;
    margin: 0;
}
.board-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: var(--space-5) 0;
    text-align: center;
}

.post-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.post-table th {
    text-align: left;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.post-table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    /* 터치 영역 확보를 위해 행 자체를 넉넉하게 */
    min-height: 44px;
}
.post-table-title-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
}
.post-table-title-link:hover span { text-decoration: underline; }
.post-table-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--color-bg-elevated);
}
.post-table-meta {
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: center;
}
/* 모바일에서는 글쓴이/조회수를 숨기고 제목/날짜 위주로 (가로 스크롤 방지) */
.post-table-meta:nth-child(2) { display: none; }

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    font-size: 0.9rem;
}
.page-link {
    color: var(--color-text);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
}
.page-current { color: var(--color-text-muted); }

/* ---------------- 게시글 상세 ---------------- */
.post-detail-header { margin-bottom: var(--space-3); }
.post-detail-board {
    margin: 0 0 var(--space-1);
    font-size: 0.85rem;
}
.post-detail-board a { color: var(--color-text-muted); text-decoration: none; }
.post-detail-title {
    font-size: 1.3rem;
    margin: 0 0 var(--space-2);
    word-break: break-word;
}
.post-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
/* 첨부 이미지 (게시글 상세) */
.post-detail-images {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.post-detail-images img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}

/* 글쓰기/수정 폼의 파일 입력 */
.form-field input[type="file"] {
    width: 100%;
    padding: var(--space-2) 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* 글수정 화면: 기존 첨부 이미지 관리(삭제 체크) */
.image-manage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}
.image-manage-item {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-elevated);
    cursor: pointer;
}
.image-manage-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.image-manage-delete {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: center;
    /* 터치 영역 확보 */
    min-height: 40px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: var(--color-bg-card);
}
.image-manage-delete input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.post-detail-content {
    padding: var(--space-4) 0;
    font-size: 0.95rem;
    line-height: 1.8;
    word-break: break-word;
    border-bottom: 1px solid var(--color-border);
}
/* 에디터(Quill)가 만든 HTML(문단/목록/인용/이미지 등)을 본문에서 자연스럽게 보이도록 */
.post-detail-content p { margin: 0 0 var(--space-3); }
.post-detail-content p:last-child { margin-bottom: 0; }
.post-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin: var(--space-2) 0;
}
.post-detail-content a { color: var(--color-blue); }
.post-detail-content ul,
.post-detail-content ol {
    margin: 0 0 var(--space-3);
    padding-left: 1.4em;
}
.post-detail-content blockquote {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-border);
    color: var(--color-text-muted);
}
.post-detail-content h1,
.post-detail-content h2,
.post-detail-content h3 {
    margin: var(--space-4) 0 var(--space-2);
    line-height: 1.4;
}
.post-detail-content pre,
.post-detail-content code {
    background: var(--color-bg-elevated);
    border-radius: 6px;
    padding: 0 4px;
    font-size: 0.85em;
}
.post-detail-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-3);
}

/* ---------------- 글쓰기/글수정 폼 ---------------- */
.post-form-page h1 {
    font-size: 1.2rem;
    margin-top: 0;
}
.form-field textarea {
    width: 100%;
    min-height: 240px;
    padding: var(--space-2);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
}
.post-form-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Quill 에디터를 사이트 다크 테마에 맞춰 재색칠 (기본은 흰 배경/검은 글씨) */
.quill-editor .ql-toolbar.ql-snow {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    border-radius: 8px 8px 0 0;
}
.quill-editor .ql-container.ql-snow {
    border-color: var(--color-border);
    border-radius: 0 0 8px 8px;
    background: var(--color-bg-elevated);
    font-size: 0.95rem;
    font-family: inherit;
}
.quill-editor .ql-editor {
    min-height: 260px;
    color: var(--color-text);
}
.quill-editor .ql-editor.ql-blank::before {
    color: var(--color-text-muted);
    font-style: normal;
}
.quill-editor .ql-stroke { stroke: var(--color-text-muted); }
.quill-editor .ql-fill { fill: var(--color-text-muted); }
.quill-editor .ql-picker { color: var(--color-text-muted); }
.quill-editor button:hover .ql-stroke,
.quill-editor button.ql-active .ql-stroke { stroke: var(--color-text); }
.quill-editor button:hover .ql-fill,
.quill-editor button.ql-active .ql-fill { fill: var(--color-text); }
.quill-editor .ql-picker-options {
    background: var(--color-bg-card);
    border-color: var(--color-border) !important;
}
.quill-editor .ql-tooltip {
    background: var(--color-bg-card);
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: none;
}
.quill-editor .ql-tooltip input[type="text"] {
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* ---------------- FOOTER ---------------- */
.site-footer {
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    margin-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.85rem;
}
.footer-inner nav a {
    color: var(--color-text-muted);
    margin-right: var(--space-3);
    text-decoration: none;
}
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.footer-logo {
    font-weight: 800;
    color: var(--color-text);
    font-size: 1rem;
}
.footer-logo-en {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}
.footer-tagline { margin: 0; font-size: 0.8rem; }
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
}
.footer-links a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
.footer-copyright { margin: 0; font-size: 0.75rem; }

/* ==========================================================
   태블릿 이상 (768px~)
   ========================================================== */
@media (min-width: 768px) {
    .gnb-toggle { display: none; }

    .gnb-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        padding: var(--space-2) var(--space-3);
    }
    /* "일기토 (1:1 끝장토론)"처럼 긴 메뉴 이름도 줄바꿈 없이 한 줄로 */
    .gnb-link { white-space: nowrap; }

    .layout { flex-direction: row; align-items: flex-start; }

    /* GNB 드롭다운: PC에서는 평소엔 숨겨뒀다가, 부모 메뉴에 마우스를 올리거나
       (키보드 이용자를 위해) 포커스가 들어가면 아래로 펼쳐지도록 */
    .gnb-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 140px;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        padding: var(--space-1) 0;
        margin-top: var(--space-1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(4px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 60;
    }
    .gnb-item.has-children:hover .gnb-dropdown,
    .gnb-item.has-children:focus-within .gnb-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .gnb-dropdown-link { padding-left: var(--space-3); }

    .quick-menu { grid-template-columns: repeat(5, 1fr); }
    .arena-grid { grid-template-columns: repeat(3, 1fr); }

    /* 화면이 넓어지면 글쓴이 컬럼도 다시 보여줌 */
    .post-table-meta:nth-child(2) { display: table-cell; }

    .image-manage-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .top-inner { padding: var(--space-3) var(--space-4); }
    .logo-tagline { display: inline; }
}

/* ---------------- 게시판 목록 카드형 UI (9단계: 참고 목업 반영) ---------------- */
.post-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.post-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.post-card-link {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    min-height: 44px;
}
.post-card-link:hover .post-card-title { text-decoration: underline; }
.post-card-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--color-bg-elevated);
}
.post-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.post-card-title {
    font-size: 0.98rem;
    margin: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.post-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.post-card-date { white-space: nowrap; }
.post-card-stats {
    display: flex;
    gap: var(--space-3);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.post-card-stat { display: inline-flex; align-items: center; gap: 4px; }
.post-card-stat-comment { color: var(--color-blue); }
.post-card-stat-like { color: var(--color-red); }

/* 작성자 등급/전적 뱃지 (post_list, post_detail, duel 공용) */
.author-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text);
    font-weight: 500;
}
.rank-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-1);
    border-radius: 999px;
    background: rgba(234, 179, 8, 0.14);
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.record-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--space-1);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: var(--color-purple);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------------- 추천(화력) 버튼 ---------------- */
.post-detail-like { margin: var(--space-3) 0; }
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.like-btn.is-liked {
    background: rgba(239, 35, 60, 0.16);
    border-color: var(--color-red);
    color: var(--color-red);
}
.like-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------- 댓글 ---------------- */
.post-comments { margin-top: var(--space-4); }
.post-comments-heading { font-size: 1rem; margin: 0 0 var(--space-2); }
.comment-form {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    align-items: flex-start;
}
.comment-form textarea {
    flex: 1;
    min-height: 44px;
    padding: var(--space-2);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
}
.comment-login-notice {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
}
.comment-login-notice a { color: var(--color-blue); }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.comment-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.8rem;
    margin-bottom: var(--space-1);
}
.comment-item-date { color: var(--color-text-muted); }
.comment-item-content {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    word-break: break-word;
}
.comment-item-delete { margin-top: var(--space-1); }
.link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    text-decoration: underline;
    cursor: pointer;
}
.comment-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: var(--space-3) 0;
}

/* ---------------- 1:1 일기토 듀얼 위젯 ---------------- */
.duel-widget {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.duel-widget-live { border-color: rgba(139, 92, 246, 0.4); }
.duel-widget-compact {
    background: none;
    border: none;
    padding: 0;
    margin-bottom: 0;
}
.duel-widget-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: rgba(139, 92, 246, 0.14);
    color: var(--color-purple);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.duel-widget-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-purple);
    animation: pulse-dot 1.6s infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.duel-widget-topic { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.duel-widget-topic a { color: var(--color-text); text-decoration: none; }
.duel-widget-sides {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.duel-side {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.duel-side-opponent { justify-content: flex-end; text-align: right; }
.duel-side-name { font-weight: 700; }
.duel-side-percent { font-weight: 700; font-size: 1.1rem; }
.duel-side-challenger .duel-side-percent { color: var(--color-red); }
.duel-side-opponent .duel-side-percent { color: var(--color-blue); }
.duel-widget-vs {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}
.duel-widget-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--color-bg-elevated);
    margin-bottom: var(--space-2);
}
.duel-widget-bar-fill-challenger { background: var(--color-red); }
.duel-widget-bar-fill-opponent { background: var(--color-blue); }
.duel-widget-countdown {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin: 0 0 var(--space-3);
}
.duel-widget-countdown strong { color: var(--color-text); }
.duel-widget-vote-btn { display: flex; width: 100%; justify-content: center; }
.duel-history-table { margin-top: var(--space-3); }
.duel-detail-desc { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 var(--space-2); }
.duel-vote-form { display: flex; gap: var(--space-2); margin: var(--space-3) 0; flex-wrap: wrap; }
.duel-vote-form .btn { flex: 1; min-width: 140px; justify-content: center; }
.duel-result {
    text-align: center;
    font-weight: 600;
    padding: var(--space-2) 0 var(--space-3);
}

@media (min-width: 768px) {
    .post-card-thumb { width: 88px; height: 88px; }
    .post-card-title { font-size: 1.05rem; }
}


/* ---------------- 마이페이지 / 내 정보 변경 (2026-09-24) ---------------- */
.mypage-card { max-width: 520px; }
.mypage-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.mypage-stat {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-2);
    text-align: center;
}
.mypage-stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}
.mypage-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}
.mypage-next-rank {
    margin: 0 0 var(--space-4);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.mypage-next-rank strong { color: var(--color-gold); }
.mypage-section-title {
    font-size: 0.95rem;
    margin: var(--space-4) 0 var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mypage-section-title:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
/* 변경 불가 항목: 입력칸처럼 보이지만 흐리게 + 안내 */
.form-field input[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}
.readonly-badge {
    margin-left: var(--space-1);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0 6px;
}
.mypage-links {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.mypage-links .btn { flex: 1; }


/* ---------------- 진영 뱃지 (2026-09-24): 보수=빨강, 진보=파랑, 방패 아이콘 ---------------- */
.party-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px 2px 5px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.party-badge-icon { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.9; }
.party-badge-conservative { background: linear-gradient(180deg, #ff4058, var(--color-red-dark)); }
.party-badge-democrat { background: linear-gradient(180deg, #4b86ff, var(--color-blue-dark)); }

/* ---------------- 글 쓰기/삭제 포인트 안내 (2026-09-24) ---------------- */
.point-hint {
    margin: 0 0 var(--space-3);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}
.point-hint strong { color: var(--color-gold); }
.point-warning {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: 8px;
    border: 1px solid rgba(239, 35, 60, 0.45);
    background: rgba(239, 35, 60, 0.1);
    color: var(--color-text);
    font-size: 0.85rem;
}
.point-warning strong { color: var(--color-red); }


/* ---------------- 1:1 일기토 신청 + 상세 개편 (2026-09-24) ---------------- */
/* 도전자/상대 순서가 아니라 각자의 진영 색을 따르도록 (민주 회원이 도전자일 수도 있으므로) */
.duel-side.party-conservative .duel-side-percent { color: var(--color-red); }
.duel-side.party-democrat .duel-side-percent { color: var(--color-blue); }
.duel-widget-bar-fill.party-conservative { background: var(--color-red); }
.duel-widget-bar-fill.party-democrat { background: var(--color-blue); }

/* 게시글 상세의 신청 박스 */
.duel-challenge-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid rgba(139, 92, 246, 0.45);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0.04));
}
.duel-challenge-text {
    margin: 0;
    flex: 1 1 260px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
.duel-challenge-text strong { color: var(--color-text); }
.duel-challenge-btn {
    background: var(--color-purple);
    color: #fff;
}
.duel-challenge-btn:hover { background: #7c4ef0; }

/* 상태 표시 */
.duel-status { font-weight: 700; }
.duel-status-active { color: var(--color-purple); }

/* 원본글 */
.duel-source {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.duel-source-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.duel-source-label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.duel-source-link { font-size: 0.78rem; color: var(--color-blue); text-decoration: none; white-space: nowrap; }
.duel-source-title { margin: 0 0 var(--space-1); font-size: 1.05rem; font-weight: 700; }
.duel-source-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    font-size: 0.82rem;
}
.duel-source-date { color: var(--color-text-muted); }
.duel-source-content { max-height: 480px; overflow-y: auto; }

/* 투표판: 양쪽 닉네임 크게 */
.duel-board {
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: var(--color-bg-card);
}
.duel-board-sides {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.duel-board-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    text-align: center;
}
.duel-board-side.party-conservative { border-color: rgba(239, 35, 60, 0.5); background: linear-gradient(180deg, rgba(239, 35, 60, 0.12), transparent 70%), var(--color-bg-elevated); }
.duel-board-side.party-democrat { border-color: rgba(47, 111, 237, 0.55); background: linear-gradient(180deg, rgba(47, 111, 237, 0.14), transparent 70%), var(--color-bg-elevated); }
.duel-board-side.is-winner { box-shadow: 0 0 0 2px var(--color-gold); }
.duel-board-role { font-size: 0.7rem; color: var(--color-text-muted); }
.duel-board-nick {
    max-width: 100%;
    font-size: 1.25rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.duel-board-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.duel-board-votes { font-size: 0.85rem; color: var(--color-text-muted); }
.duel-board-votes b { font-size: 1.5rem; color: var(--color-text); }
.party-conservative .duel-board-votes b { color: var(--color-red); }
.party-democrat .duel-board-votes b { color: var(--color-blue); }
.duel-board-vs {
    align-self: center;
    font-size: 0.9rem;
    font-weight: 900;
    color: var(--color-purple);
}
.duel-vote-btn {
    margin-top: 4px;
    min-height: 40px;
    max-width: 100%;
    white-space: normal;
    color: #fff;
}
.party-conservative .duel-vote-btn { background: var(--color-red); }
.party-conservative .duel-vote-btn:hover { background: var(--color-red-dark); }
.party-democrat .duel-vote-btn { background: var(--color-blue); }
.party-democrat .duel-vote-btn:hover { background: var(--color-blue-dark); }
.duel-board-myvote { font-size: 0.78rem; font-weight: 700; color: var(--color-gold); }
.duel-board-notice { text-align: center; margin: 0; }
.duel-result { text-align: center; font-weight: 700; margin: 0; }

/* 당사자 토론: 진영 색 왼쪽 선으로 누가 쓴 글인지 한눈에 */
.duel-debate-item { padding-left: var(--space-2); border-left: 3px solid var(--color-border); }
.duel-debate-item.party-conservative { border-left-color: var(--color-red); }
.duel-debate-item.party-democrat { border-left-color: var(--color-blue); }
.duel-debate-role { font-size: 0.7rem; color: var(--color-text-muted); font-weight: 400; }

@media (max-width: 480px) {
    .duel-board-sides { gap: 6px; }
    .duel-board-side { padding: var(--space-2) 6px; }
    .duel-board-nick { font-size: 1.05rem; }
    .duel-board-vs { font-size: 0.75rem; }
    .duel-vote-btn { padding: 0 10px; font-size: 0.78rem; }
}

/* ---------------- 성별·나이대 칩 (보수/민주 아레나 글쓴이, 2026-09-24) ---------------- */
.demo-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}
.demo-chip-gender { font-weight: 800; }
.demo-chip-male { color: #60a5fa; }
.demo-chip-female { color: #f472b6; }
.demo-chip-sep { opacity: 0.6; }

/* ---------------- 게시판 목록 맨 위 "화력 BEST 10" (2026-09-24) ---------------- */
.hot-board {
    position: relative;
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid rgba(249, 115, 22, 0.55);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(239, 35, 60, 0.18), transparent 60%),
        radial-gradient(90% 80% at 100% 0%, rgba(234, 179, 8, 0.14), transparent 60%),
        var(--color-bg-card);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.12), 0 10px 30px -18px rgba(239, 35, 60, 0.7);
}
.hot-board-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
    font-weight: 800;
    background: linear-gradient(90deg, #ff6b3d, var(--color-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hot-board-flame { -webkit-text-fill-color: initial; color: initial; }
.hot-list { list-style: none; margin: 0; padding: 0; }
.hot-item + .hot-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.hot-item-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 4px;
    min-height: 48px;
    color: var(--color-text);
    text-decoration: none;
}
.hot-item-link:hover .hot-item-title { text-decoration: underline; }
.hot-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}
/* 1~3위는 금/은/동 */
.hot-rank-1 { background: linear-gradient(135deg, #fde047, #eab308); color: #1a1300; }
.hot-rank-2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #111; }
.hot-rank-3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #1a0a00; }
.hot-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hot-item-title {
    font-size: 0.92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-item-top .hot-item-title { font-weight: 800; }
.hot-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--color-text-muted);
}
.hot-item-author { color: var(--color-text); font-weight: 600; }
.hot-item-fire {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(239, 35, 60, 0.16);
    color: #ff6b6b;
    font-size: 0.85rem;
    font-weight: 800;
}
.hot-item-top .hot-item-fire { background: linear-gradient(90deg, #ef233c, #f97316); color: #fff; }
.board-section-title {
    margin: 0 0 var(--space-2);
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* ---------------- 메인: 보수/민주 최신글 (2026-09-24) ---------------- */
.arena-post-list { list-style: none; margin: 0; padding: 0; }
.arena-post-list li + li { border-top: 1px solid var(--color-border); }
.arena-post-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 0;
    color: var(--color-text);
    text-decoration: none;
}
.arena-post-link:hover .arena-post-title { text-decoration: underline; }
.arena-post-title {
    font-size: 0.88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arena-post-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    min-width: 0;
}
.arena-post-author { color: var(--color-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arena-post-stats { margin-left: auto; display: inline-flex; gap: 8px; flex-shrink: 0; }
.arena-post-fire { color: #ff6b6b; font-weight: 700; }
.arena-post-comments { color: var(--color-blue); }

/* ---------------- 메인: 화력 TOP 5 (2026-09-24) ---------------- */
.fire-top-card { border-color: rgba(239, 35, 60, 0.4); }
.fire-top-list { list-style: none; margin: 0; padding: 0; }
.fire-top-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 0;
}
.fire-top-item + .fire-top-item { border-top: 1px solid var(--color-border); }
.fire-top-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--color-text); text-decoration: none; }
.fire-top-link:hover .fire-top-title { text-decoration: underline; }
.fire-top-title { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fire-top-meta { font-size: 0.72rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fire-top-count { flex-shrink: 0; font-size: 0.82rem; font-weight: 800; color: #ff6b6b; }

/* ---------------- 메인: 독존의 전당 (최고 등급 회원, 2026-09-24) ---------------- */
.dokjon-hall {
    position: relative;
    overflow: hidden;
    border-color: rgba(234, 179, 8, 0.55);
    background:
        radial-gradient(100% 70% at 50% -10%, rgba(234, 179, 8, 0.28), transparent 65%),
        linear-gradient(180deg, #1c1708, var(--color-bg-card) 60%);
}
.dokjon-hall::after {
    /* 은은하게 지나가는 금빛 광택 */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 236, 153, 0.10) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: dokjon-shine 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes dokjon-shine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .dokjon-hall::after { animation: none; display: none; } }
.main-card h2.dokjon-hall-title {
    margin-bottom: 2px;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #fff4c2, var(--color-gold) 45%, #b8860b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dokjon-hall-crown { -webkit-text-fill-color: initial; color: initial; filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.7)); }
.dokjon-hall-sub { margin: 0 0 var(--space-3); font-size: 0.75rem; color: var(--color-text-muted); }
.dokjon-hall-sub strong { color: var(--color-gold); }
.dokjon-hall-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: var(--space-2);
}
.dokjon-medal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
}
.dokjon-medal-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from 200deg, #fff4c2, #eab308, #8a6400, #eab308, #fff4c2);
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.45);
}
.dokjon-medal-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #14110a;
    color: #fff4c2;
    font-size: 1.3rem;
    font-weight: 900;
}
.dokjon-medal.party-conservative .dokjon-medal-initial { background: radial-gradient(circle at 50% 35%, #5a1420, #14110a 75%); }
.dokjon-medal.party-democrat .dokjon-medal-initial { background: radial-gradient(circle at 50% 35%, #15306a, #14110a 75%); }
.dokjon-medal-name {
    max-width: 100%;
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff4c2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dokjon-medal-meta { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px; }
.dokjon-medal-points { font-size: 0.7rem; font-weight: 700; color: var(--color-gold); }
.dokjon-hall-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) 0;
    text-align: center;
}
.dokjon-hall-empty-seat { font-size: 2rem; opacity: 0.35; filter: grayscale(0.4); }
.dokjon-hall-empty p { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.6; }

/* "최근 7일" 기간 표시 (2026-09-24) */
.hot-board-period,
.card-period {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    -webkit-text-fill-color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* ---------------- 약관/방침/가이드라인/일기토 규칙 페이지 (2026-09-24) ---------------- */
.policy-page {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-3) 0 var(--space-5);
    line-height: 1.75;
    font-size: 0.93rem;
}
.policy-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}
.policy-kicker { margin: 0 0 4px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--color-gold); }
.policy-header h1 { margin: 0; font-size: 1.6rem; line-height: 1.3; }
.policy-meta { margin: 6px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
.policy-lead {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.policy-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--space-4);
}
.policy-toc a {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}
.policy-toc a:hover { color: var(--color-text); border-color: var(--color-text-muted); }
.policy-page section { margin-bottom: var(--space-4); scroll-margin-top: 90px; }
.policy-page h2 {
    margin: 0 0 var(--space-2);
    font-size: 1.08rem;
    padding-left: 10px;
    border-left: 3px solid var(--color-gold);
}
.policy-page ol,
.policy-page ul { margin: 0 0 var(--space-2); padding-left: 1.3em; }
.policy-page li { margin-bottom: 6px; color: #d6d9df; }
.policy-page p { margin: 0 0 var(--space-2); color: #d6d9df; }
.policy-page a { color: #7aa7ff; }
.policy-page strong { color: var(--color-text); }
.policy-note { font-size: 0.8rem; color: var(--color-text-muted) !important; }
.policy-note-inline { font-size: 0.75rem; color: var(--color-text-muted); }
.policy-table-wrap { overflow-x: auto; margin: 0 0 var(--space-2); -webkit-overflow-scrolling: touch; }
.policy-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.84rem;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}
.policy-table-compact { min-width: 0; }
.policy-table th,
.policy-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}
.policy-table thead th { background: var(--color-bg-elevated); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; }
.policy-table tbody th { white-space: nowrap; font-weight: 700; }
.policy-table .nowrap { white-space: nowrap; }
.policy-table tr:last-child td,
.policy-table tr:last-child th { border-bottom: none; }
.pt-plus { color: #4ade80; font-weight: 800; white-space: nowrap; }
.pt-minus { color: #ff6b6b; font-weight: 800; white-space: nowrap; }
.party-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
.party-dot-red { background: var(--color-red); }
.party-dot-blue { background: var(--color-blue); }
.party-dot-purple { background: var(--color-purple); }
.party-dot-teal { background: var(--color-teal); }

/* 가이드라인 상단 3대 원칙 */
.policy-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}
.policy-callout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid rgba(234, 179, 8, 0.35);
    background: linear-gradient(180deg, rgba(234, 179, 8, 0.1), transparent), var(--color-bg-card);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}
.policy-callout strong { font-size: 0.98rem; }
.policy-callout-icon { font-size: 1.3rem; }

/* 등급 사다리 */
.policy-page ol.rank-ladder {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
}
.rank-ladder-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin: 0 !important;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}
.rank-ladder-pt { font-size: 0.75rem; color: var(--color-text-muted); }
.rank-ladder-top { border-color: rgba(234, 179, 8, 0.7); box-shadow: 0 0 12px rgba(234, 179, 8, 0.25); }

/* 일기토 규칙 진행 순서 */
.policy-page ol.duel-flow {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.duel-flow li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0 !important;
    padding: var(--space-2) 6px;
    border-radius: var(--radius);
    border: 1px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), transparent), var(--color-bg-card);
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.duel-flow li strong { font-size: 0.92rem; }
.duel-flow-num {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-purple);
    color: #fff;
    font-weight: 800;
    font-size: 0.78rem;
}
.policy-cta { text-align: center; margin-top: var(--space-4); }
.policy-cta .btn { text-decoration: none; }

/* 문의하기 */
.contact-card { max-width: 560px; }
.contact-lead { margin: 0 0 var(--space-3); font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.6; }
.contact-card .form-field textarea { min-height: 180px; font-family: inherit; font-size: 0.92rem; color: var(--color-text); resize: vertical; }
.contact-type-choices .checkbox-label span { white-space: nowrap; }
.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-done { text-align: center; }
.contact-done-icon { font-size: 2.4rem; margin: 0; }

/* 가입폼·문의폼의 긴 동의 문구는 줄바꿈 허용 */
.terms-field .checkbox-label { display: flex; gap: 8px; margin-bottom: 0; align-items: flex-start; padding: 8px 0; min-height: 0; }
.terms-field .checkbox-label input[type="checkbox"] { margin-top: 2px; }
.terms-field .checkbox-label span { white-space: normal; overflow: visible; line-height: 1.5; }
.terms-box a { color: #7aa7ff; }
.terms-box-sensitive { border-color: rgba(234, 179, 8, 0.45); }

/* 푸터 연락처 */
.footer-contact { margin: 0 0 6px; font-size: 0.75rem; color: var(--color-text-muted); }
.footer-contact a { color: var(--color-text-muted); }
.footer-link-strong { font-weight: 800; color: var(--color-text) !important; }

@media (max-width: 480px) {
    .policy-header h1 { font-size: 1.35rem; }
    .policy-page { font-size: 0.9rem; }
    .policy-page ol.duel-flow { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- 회원 등급 페이지 (2026-09-24) ---------------- */
.rank-me {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 1px solid rgba(234, 179, 8, 0.5);
    background: radial-gradient(100% 120% at 0% 0%, rgba(234, 179, 8, 0.16), transparent 60%), var(--color-bg-card);
}
.rank-me-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-2); }
.rank-me-label { font-size: 0.75rem; color: var(--color-text-muted); }
.rank-me-name { font-size: 1.5rem; font-weight: 900; color: var(--color-gold); line-height: 1.2; }
.rank-me-points { margin-left: auto; font-size: 1rem; font-weight: 800; color: var(--color-text); }
.rank-me-bar { height: 10px; border-radius: 999px; background: var(--color-bg-elevated); overflow: hidden; }
.rank-me-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b8860b, var(--color-gold), #fff4c2); }
.policy-page .rank-me-next { margin: 8px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.rank-me-next strong { color: var(--color-gold); }

/* 등급 탑: 최고 등급이 맨 위 */
.policy-page ol.rank-tower { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rank-tier {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 !important;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}
.rank-tier-level {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}
.rank-tier-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rank-tier-name { display: flex; align-items: center; gap: 6px; font-size: 0.98rem; font-weight: 800; color: var(--color-text); }
.rank-tier-range { font-size: 0.75rem; color: var(--color-text-muted); }
.rank-tier-count { flex-shrink: 0; font-size: 0.8rem; color: var(--color-text-muted); }
/* 내가 이미 지나온 등급: 금색 번호 */
.rank-tier.is-reached .rank-tier-level { background: rgba(234, 179, 8, 0.18); color: var(--color-gold); }
/* 지금 내 등급: 금색 테두리로 강조 */
.rank-tier.is-current {
    border-color: var(--color-gold);
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.16), transparent 70%), var(--color-bg-card);
    box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.4), 0 6px 20px -12px rgba(234, 179, 8, 0.8);
}
.rank-tier.is-current .rank-tier-level { background: var(--color-gold); color: #1a1300; }
.rank-tier-you {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--color-gold);
    color: #1a1300;
    font-size: 0.66rem;
    font-weight: 800;
}
/* 최고 등급 독존 */
.rank-tier-top {
    border-color: rgba(234, 179, 8, 0.6);
    background: linear-gradient(90deg, #2a2108, var(--color-bg-card) 80%);
}
.rank-tier-top .rank-tier-name {
    background: linear-gradient(90deg, #fff4c2, var(--color-gold) 60%, #b8860b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}