/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-text: #212529;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    /* DINK 로고 확정 색(올리브그린) - 버튼/활성 탭/채팅위젯 헤더 등 사이트 전반에 이 색 하나로
       퍼진다. (이전엔 로고 확정 전 임시로 코랄오렌지를 썼었음) */
    --color-primary: #556B2F;
    --color-primary-hover: #445826;
    --color-accent: #4f7cff;
    --color-danger: #e74c3c;
    --radius: 8px;
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 24px;
    --spacing-5: 32px;
    --max-width: 1080px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    /* Safety net: vertical scrolling is fine, but nothing should ever be able to push the
       page itself wider than the viewport - any element that would have now just clips/
       scrolls locally instead (tables already do this via .table-wrapper).
       "clip" (not "hidden") specifically because overflow:hidden turns body into a scroll
       container, which silently breaks position:sticky for every descendant (the header). */
    overflow-x: clip;
}

a { color: inherit; }

img { max-width: 100%; display: block; }

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-4) var(--spacing-3);
}

.site-main {
    min-height: calc(100vh - 60px);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    /* 블라인드/당근마켓 카페처럼 어두운 바 대신 흰 배경 + 옅은 하단 경계선으로 밝게 - 예전엔
       --color-primary(진영 테마색) 배경에 흰 글자였다. */
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.site-nav a, .site-nav .nav-btn {
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.site-nav a:hover, .site-nav .nav-btn:hover { text-decoration: underline; }

.site-nav .brand {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 17px;
    margin-right: var(--spacing-2);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/* SVG 워드마크 원본 비율(410:84 근방)을 유지한 채 헤더 높이에 맞춘다 - width는 auto로 비율 유지. */
.brand-logo { height: 28px; width: auto; display: block; }

.nav-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.site-nav .spacer { flex: 1; }

.site-nav .nav-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

/* 자유게시판/뉴스/재산공개 메뉴 - 클릭 타겟이 작아 보인다는 피드백으로 글자를 키우고
   항목 사이 간격도 계정 메뉴보다 넉넉하게 벌린다. */
.site-nav .nav-group-primary {
    gap: var(--spacing-5);
}
.site-nav .nav-group-primary a {
    font-size: 17px;
}
/* 좁은 화면에서 .site-nav가 줄바꿈될 때 닉네임/로그아웃(또는 로그인/회원가입) 쪽이 자기
   줄에서 기본값(왼쪽 정렬)으로 떨어지는 대신 오른쪽에 붙게 - 이게 항상 nav의 마지막 그룹이다. */
.site-nav .nav-group:last-child {
    margin-left: auto;
}

/* "자유게시판/뉴스/재산공개" 등 주 메뉴는 넓은 화면에서만 브랜드/계정 영역 폭과 무관하게 nav
   정중앙에 오도록 flex 흐름에서 빼서 절대 위치로 고정한다 (.site-nav가 position: sticky라 이
   absolute의 기준이 된다). 링크가 1개(게시판)였을 때는 폭이 좁아도 문제없었지만, 3개로 늘어난
   뒤로는 좁은 화면에서 이 절대 위치 그룹이 계정 정보(관리자/닉네임/로그아웃)와 겹치는 문제가
   생겨서, 그 폭 밑에서는 아예 원래 flex 흐름으로 돌려보낸다 - 그러면 .site-nav의 flex-wrap이
   알아서 계정 정보를 다음 줄로 내려준다(겹칠 자리가 없으면 자연스럽게 줄바꿈됨). */
@media (min-width: 901px) {
    .site-nav .nav-group-primary {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* 당근마켓 카페 스타일 2-depth 드롭다운 - 트리거에 마우스를 올리면 메뉴가 뜨는 방식. 모바일은
   호버가 없어서 대신 탭(터치)이 그대로 "누르기"로 동작해 첫 탭에 메뉴가 열린다(별도 JS 없이도
   동작하지만, 완전한 터치 UX를 원하면 나중에 클릭 토글 JS를 추가할 수 있다). */
.nav-dropdown {
    position: relative;
}
.nav-dropdown-trigger {
    font-size: 17px;
    cursor: pointer;
    color: var(--color-text);
}
.nav-dropdown:hover .nav-dropdown-trigger { color: var(--color-primary); }

/* 드롭다운 없이 바로 이동하는 1depth 링크(동네 번개) - 트리거랑 같은 크기로 맞춘다(밑줄 hover는
   .site-nav a:hover 공통 규칙을 그대로 물려받아 다른 메뉴 링크들과 일관됨). */
.nav-standalone-link { font-size: 17px; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 200px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: var(--spacing-2) 0;
    flex-direction: column;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
}
.nav-dropdown-menu a {
    padding: 6px 16px;
    font-size: 15px;
    white-space: nowrap;
}

/* 헤더 쪽지함 아이콘의 안 읽은 쪽지 배지 - 빨간 점 하나만, 개수는 안 보여준다(쪽지함 들어가면 바로 확인 가능). */
.nav-message-link {
    position: relative;
    font-size: 18px;
}
.nav-badge-dot {
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-danger);
}

/* Nickname/logout stay on their existing single line; 후원하기 sits on its own row right
   below so it reads as a distinct action, not just another nav link. */
.nav-group-account {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.nav-group-account-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}
.nav-donate-btn {
    display: inline-block;
    background: #fff;
    color: var(--color-primary);
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.nav-donate-btn:hover { background: #f0f0f0; }

/* ==========================================================================
   Buttons / Forms
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 1.5s ease, border-color 1.5s ease;
}

.btn:hover { background: var(--color-primary-hover); }
.btn:disabled, .form-control:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
    background: transparent;
    color: var(--color-primary);
}

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    width: 100%;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: #fff;
    font-size: 14px;
    text-decoration: none;
    color: var(--color-text);
}

.btn-social.google { border-color: #dadce0; }
.btn-social.naver { background: #03c75a; color: #fff; border-color: #03c75a; }
/* 카카오 공식 로그인 버튼 가이드 색상(#FEE500 배경 + 어두운 텍스트). */
.btn-social.kakao { background: #FEE500; color: #191919; border-color: #FEE500; }

.form-group {
    margin-bottom: var(--spacing-3);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-1);
    font-size: 14px;
    color: var(--color-muted);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: inherit;
}

.form-control.input-error {
    border-color: var(--color-danger);
    background: #fff5f5;
}

.field-error {
    color: var(--color-danger);
    font-size: 12px;
    margin: 4px 0 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: auto; flex-shrink: 0; }
.checkbox-label a { color: var(--color-accent); text-decoration: underline; }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing-4);
}

/* 마이페이지의 4개 목록(내 글/내 댓글/좋아요한 글/좋아요한 댓글)이 그냥 이어붙어서 어디부터
   어디까지가 한 섹션인지 흐릿하다는 피드백 - 카드마다 위쪽에 진한 강조선을 얹어서 확실히
   구분되는 블록으로 보이게 한다. */
.mypage-section {
    margin-top: 20px;
    border-top: 3px solid var(--color-primary);
}

/* 파일 첨부 + "선택 취소" 버튼이 나란히 붙는 자리 - 게시글/댓글 작성/수정/답글 폼 전부 공용
   (동작은 footer.jsp의 전역 change/click 위임 스크립트 하나로 처리됨). */
.file-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.file-input-row .form-control { flex: 1 1 auto; }

/* 게시글 작성 - "뉴스 링크로 채우기"가 그냥 다른 입력칸들 사이에 묻히지 않고 눈에 띄는
   별도 유틸리티 영역으로 보이게. 노란(3초요약/법적고지)과 헷갈리지 않게 파란 계열로. */
.link-preview-section {
    background: #EFF6FF;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 12px 14px;
}

/* 게시글 작성 - "가져오기" 버튼으로 뉴스 링크 OG 정보를 긁어온 결과 미리보기 카드 */
.link-preview-card {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}
.link-preview-card img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.link-preview-title { font-weight: 700; margin-bottom: 4px; }

.form-card {
    max-width: 420px;
    margin: var(--spacing-5) auto;
}

/* 이용약관/개인정보처리방침 - 좁은 .form-card 기본폭(420px)은 긴 문단을 읽기 힘드니 넓힌다. */
.legal-doc {
    max-width: 720px;
    line-height: 1.7;
}
.legal-doc h3 { margin-top: 28px; margin-bottom: 6px; }
.legal-doc ul { padding-left: 20px; margin: 6px 0; }
.legal-doc li { margin-bottom: 4px; }
.legal-disclaimer {
    background: #FFF6DA;
    border: 1px solid #F5C518;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
}

.form-actions { margin-top: var(--spacing-3); }

.text-muted { color: var(--color-muted); font-size: 13px; }
.text-danger { color: var(--color-danger); font-size: 13px; }

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-muted);
    font-size: 12px;
    margin: var(--spacing-3) 0;
}
.divider::before, .divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}
.divider span { padding: 0 var(--spacing-2); }

/* ==========================================================================
   Table (board list) - horizontally scrollable on narrow screens
   ========================================================================== */
.table-wrapper {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

table.data-table {
    /* No forced min-width: the table must always fit inside the viewport (title column just
       shrinks/ellipsizes) rather than triggering horizontal scroll - see .col-narrow below. */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.data-table th, table.data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.data-table th {
    color: var(--color-muted);
    font-weight: 600;
    background: #fafafa;
}

/* Title gets most of the row's width; every other column is squeezed down to just-visible. */
table.data-table .col-xnarrow { width: 64px; }
table.data-table .col-narrow { width: 90px; }
table.data-table .col-medium { width: 160px; }
/* "yyyy-MM-dd HH:mm" 형식(16자)이 .col-narrow(90px)에서 잘려 보인다는 피드백을 받아서 만든
   전용 폭 - 작성일 컬럼에만 쓴다. */
table.data-table .col-date { width: 128px; white-space: nowrap; }
table.data-table .col-title { width: auto; }

@media (max-width: 600px) {
    table.data-table th, table.data-table td { padding: 8px 6px; font-size: 13px; }
    table.data-table .col-medium { width: 110px; }
    table.data-table .col-narrow { width: 56px; }
    table.data-table .col-xnarrow { width: 40px; }
    table.data-table .col-date { width: 96px; }
}

.title-link {
    display: block;
    padding: 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.title-link:hover { color: var(--color-accent); text-decoration: underline; }

/* 게시판 목록 - 뉴스 링크로 채운 글의 og:image 썸네일 (BoardController.list()가 imageUrl을 채워줌) */
.board-list-title { display: flex; align-items: center; gap: 8px; white-space: normal; }
.board-list-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.board-list-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }

/* ==========================================================================
   List search box (board list, mypage sections)
   ========================================================================== */
.list-search-form {
    display: flex;
    gap: 8px;
    margin-bottom: var(--spacing-3);
}
.list-search-form .form-control { flex: 1 1 auto; }

/* ==========================================================================
   Pagination (board list)
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: var(--spacing-4) 0;
}
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    font-size: 14px;
}
.pagination a:hover { background: #f5f6f8; }
.pagination a.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

table.data-table tr.clickable-row { cursor: pointer; }
table.data-table tr.clickable-row:hover { background: #f5f6f8; }

/* ==========================================================================
   Home page "최근 게시글" row - narrowed list + static (non-floating) rank column
   ========================================================================== */
.recent-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.recent-row-main { flex: 2; min-width: 0; }

.recent-row-side {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.recent-side-card { padding: var(--spacing-3); }
.recent-side-card h4 { margin: 0 0 8px; font-size: 13px; color: var(--color-muted); }

@media (max-width: 900px) {
    /* align-items:flex-start above is what keeps .recent-row-main/.recent-row-side from being
       stretched to equal height side by side - but in column mode that same "flex-start" applies
       to the (now horizontal) cross axis too, shrinking each stacked item down to its content
       width instead of filling the row. Override back to stretch once we're stacked. */
    .recent-row { flex-direction: column; align-items: stretch; }
    .recent-row-side { min-width: 0; }
}

/* ==========================================================================
   Hero / Home page
   ========================================================================== */
.hero {
    background: linear-gradient(135deg, var(--color-primary), #3B4A22);
    color: #fff;
    border-radius: var(--radius);
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-4);
}

.hero h1 { margin: 0 0 var(--spacing-2); font-size: 28px; }
.hero p { margin: 0 0 var(--spacing-4); color: #e2e8f0; }
.hero .hero-actions { display: flex; gap: var(--spacing-3); flex-wrap: wrap; }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.feature-grid .card h3 { margin-top: 0; }

.section-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--spacing-2);
}

/* "글쓰기" etc. - keep it modest-sized so it doesn't dominate the header row, especially on phones. */
.section-title .btn {
    padding: 6px 14px;
    font-size: 13px;
}

@media (max-width: 480px) {
    .section-title .btn { padding: 5px 10px; font-size: 12px; }
}

/* ==========================================================================
   Tabs (home page TOP10) + ranking list
   ========================================================================== */
.tab-buttons {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

.tab-btn {
    display: inline-block;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 4px;
    margin-bottom: -1px;
    font-size: 15px;
    color: var(--color-muted);
    text-decoration: none;
    cursor: pointer;
}
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.tab-btn.passed.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tab-btn.rejected.active { color: var(--color-danger); border-bottom-color: var(--color-danger); }

.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li {
    border-bottom: 1px solid var(--color-border);
}
.rank-list li:last-child { border-bottom: none; }

.rank-list a, .rank-list .rank-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 10px 4px;
    text-decoration: none;
    color: var(--color-text);
}

.rank-empty { padding: 10px 4px; }

.rank-no {
    flex: 0 0 24px;
    font-weight: 700;
    color: var(--color-primary);
}

.rank-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-writer { flex: 0 0 auto; font-size: 13px; }
.rank-like { flex: 0 0 auto; color: var(--color-danger); font-size: 13px; white-space: nowrap; }

@media (max-width: 480px) {
    .rank-writer { display: none; }
    /* Same idea as .recent-row on the "최근 게시글" table: drop the padding so the row's
       content (rank number + title + count) uses the full card width edge-to-edge. */
    .recent-side-card { padding: 12px; }
    .rank-list a, .rank-list .rank-row { padding: 8px 2px; gap: var(--spacing-2); }
    .rank-no { flex-basis: 18px; font-size: 13px; }
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comment-list { list-style: none; padding-left: 0; margin: 0; }

.comment-item {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-2) 0;
}

.comment-writer { font-weight: 600; }
.comment-meta { font-size: 12px; color: var(--color-muted); }
.comment-meta a { margin-left: var(--spacing-2); }

/* ==========================================================================
   Attached images (board post / comment)
   ========================================================================== */
.attachment-image {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    border-radius: var(--radius);
    margin-top: var(--spacing-3);
    border: 1px solid var(--color-border);
}

.attachment-image-comment {
    max-height: 240px;
    margin-top: var(--spacing-2);
}

/* ==========================================================================
   Like buttons (board detail + comments)
   ========================================================================== */
.btn-like {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 14px;
}
.btn-like .like-icon { color: var(--color-danger); }
.btn-like.liked { border-color: var(--color-danger); background: #fff5f5; }
.btn-like.liked-display { cursor: default; color: var(--color-muted); }

.comment-like-btn {
    text-decoration: none;
    color: var(--color-muted);
    margin-left: var(--spacing-2);
}
.comment-like-btn .comment-like-icon { color: var(--color-danger); }
.comment-like-btn.liked { color: var(--color-danger); }
.comment-like-btn.liked-display { cursor: default; }

/* ==========================================================================
   Left rail (ad slot) - fixed so it follows scroll on every page, like the chat widget.
   ========================================================================== */
.left-rail {
    /* top+bottom (no explicit height) on a fixed element stretches it to fill the space
       between them, so the slot tracks the viewport height instead of a fixed min-height. */
    position: fixed;
    left: 20px;
    top: 76px;
    bottom: 20px;
    z-index: 1000;
}

.ad-slot {
    width: 160px;
    height: 100%;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ad-slot-label {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
}
.ad-slot-placeholder { margin: 0; font-size: 12px; }

/* In-content horizontal banner ad slot (board list/detail, etc.) */
.ad-banner {
    min-height: 90px;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-4) 0;
    color: var(--color-muted);
    font-size: 13px;
}

/* Compact, non-floating rank list - reused in the home page's "최근 게시글" row (see .recent-row) */
.mini-rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}
.mini-rank-list li {
    padding: 3px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-rank-list a { color: var(--color-text); text-decoration: none; }
.mini-rank-list a:hover { text-decoration: underline; }

/* 명예훼손/권리침해 신고 접수처 - 매 페이지 하단, 후원 탭 등 fixed 위젯들과 안 겹치게 콘텐츠
   흐름 안에 그냥 얹는다(fixed 아님). */
.report-contact-notice {
    max-width: 900px;
    /* bottom margin cleared to fit the fixed footer-donate-tab-wrap (tab + disclosure line)
       sitting on top of the page at the very bottom, so scrolling to the end doesn't show
       this text overlapping with it. */
    margin: 32px auto 90px;
    padding: 10px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--color-muted);
    border-top: 1px solid var(--color-border);
}
.report-contact-notice a { color: var(--color-muted); text-decoration: underline; }

/* ==========================================================================
   Footer donate tab (bottom-center, always visible - subtle pull-tab look,
   independent of the camp/chat widgets which live bottom-right)
   ========================================================================== */
.footer-donate-tab-wrap {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-donate-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--color-muted);
    font-size: 16px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s;
}
.footer-donate-tab:hover { opacity: 1; }
/* 쿠팡파트너스 약관상 필수 고지 문구 - 어떤 화면 크기에서도 항상 눈에 띄어야 해서(컴플라이언스
   요건), 좁은 화면이라고 숨기지 않고 글자 크기만 살짝 줄인다. */
.footer-donate-disclosure {
    margin: 0;
    padding: 3px 10px;
    /* Fluid instead of fixed - this line must stay on one row at every width (compliance text
       can't be allowed to wrap and push up into whatever sits above it), so its font shrinks
       with the viewport instead of hitting a fixed size that overflows on narrow screens. */
    font-size: clamp(8px, 2.3vw, 11px);
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    opacity: 0.85;
}
.footer-donate-tab-dash {
    width: 28px;
    height: 1px;
    background: var(--color-muted);
}

/* ==========================================================================
   Donate modal (triggered by .donate-trigger anywhere - header button)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3);
}
.modal-box {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: var(--spacing-4);
    width: min(400px, 100%);
    max-height: 90vh;
    overflow-y: auto;
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--color-muted);
}

@media (max-width: 900px) {
    /* Chat widget stays exactly as-is (bottom-right, untouched). The ad becomes a slim
       horizontal bar fixed along the very bottom edge of the screen - lower z-index than the
       chat widget so chat still renders in front of/above it in the corner where they'd overlap. */
    .left-rail {
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        transform: none;
        z-index: 999;
    }
    .ad-slot {
        width: 100%;
        height: 52px;
        flex-direction: row;
        border-radius: 0;
        border-width: 1px 0 0;
        gap: 8px;
    }
    .ad-slot-label { font-size: 10px; }
    .ad-slot-placeholder { display: inline; margin: 0; font-size: 12px; }
    .site-main { padding-bottom: 120px; }

    /* Ad bar's position/height never changes regardless of chat being logged in, minimized,
       or maximized - it's the chat widget (below) that shifts up out of its way instead, since
       "bottom" is a fixed anchor point that stays put whether the widget's body is open or not. */
    .chat-widget { bottom: 62px; }
}

/* ==========================================================================
   Floating chat widget (bottom-right, all pages except login/join)
   ========================================================================== */
.chat-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* Roughly a third of the viewport on tablet/laptop screens, capped so it never gets
       oversized on large monitors. */
    width: min(340px, 33vw, 90vw);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 1000;
    overflow: hidden;
}

.chat-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-primary);
    color: #fff;
    padding: 10px 14px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: background-color 1.5s ease;
}

.chat-widget-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.chat-room-label { font-size: 11px; font-weight: 400; opacity: 0.85; }

.chat-widget-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.chat-room-panel {
    border-bottom: 1px solid var(--color-border);
    background: #fafafa;
    max-height: 220px;
    overflow-y: auto;
}

.chat-room-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}
.chat-room-panel-header .chat-widget-toggle-btn { color: var(--color-muted); }

.chat-room-list { list-style: none; margin: 0; padding: 0; }

.chat-room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}
.chat-room-item:last-child { border-bottom: none; }
.chat-room-item:hover { background: #f0f1f3; }
.chat-room-item.current { background: #eef2ff; cursor: default; font-weight: 600; }
.chat-room-item.full { opacity: 0.5; cursor: not-allowed; }

.chat-widget-body {
    display: none;
    flex-direction: column;
    height: min(60vh, 420px);
}

.chat-widget.open .chat-widget-body { display: flex; }

.chat-widget-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-3);
}

/* A long unbroken run of characters (URL, spam string, long word) with no natural break point
   was overflowing the widget's fixed width and forcing a horizontal scrollbar. break-word only
   breaks a word mid-character as a last resort - it tries to keep the whole word intact first,
   which is why a long English run got shoved entirely onto its own new line (nothing left of it
   to share the line with) while Korean, whose characters are line-breakable one-by-one by
   default regardless of this property, just flowed normally after "닉네임 : ". break-all makes
   every script wrap character-by-character the same way, so the two no longer behave differently.
   overflow: hidden contains the floated timestamp below (see .chat-message-time) so this box's
   height still grows to fit it. */
.chat-widget-messages .chat-message {
    margin-bottom: 6px;
    font-size: 14px;
    overflow: hidden;
    word-break: break-all;
}

/* Trails the end of the message's last line, pinned to the right edge - since it's the final
   child in the DOM (see appendMessage()/history rendering), the float just settles wherever the
   text flow ends instead of needing a fixed position that would ignore how many lines wrapped. */
.chat-message-time {
    float: right;
    margin-left: 6px;
    font-size: 11px;
}

.chat-widget-form {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-2);
    padding: var(--spacing-2);
    border-top: 1px solid var(--color-border);
}

/* min-width: 0 overrides the flex-item default (min-width: auto), which otherwise stops an
   <input> from shrinking below its intrinsic content width and starves the button's space. */
.chat-input-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.chat-widget-form input {
    width: 100%;
    padding: 8px 50px 8px 10px;
}
.chat-byte-counter {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--color-muted);
    pointer-events: none;
}
.chat-byte-counter.at-limit { color: var(--color-danger); }

.chat-widget-form .btn {
    flex: 0 0 auto;
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */
@media (max-width: 768px) {
    .feature-grid { grid-template-columns: 1fr; }
    .site-nav { padding: var(--spacing-2) var(--spacing-3); }
    .hero { padding: var(--spacing-4); }
    .hero h1 { font-size: 22px; }

    /* 32px 좌우 패딩 + 12px 갭 + 양쪽 28px 대시가 좁은 화면에서는 다 더하면 폭이 넘쳐서
       텍스트가 2줄로 밀렸다 - 장식용 대시부터 줄이고, 패딩/글자 크기도 함께 낮춘다. */
    .footer-donate-tab {
        gap: 8px;
        padding: 10px 18px;
        font-size: 14px;
    }
    .footer-donate-tab-dash {
        width: 16px;
    }
}

@media (max-width: 480px) {
    .container { padding: var(--spacing-3) var(--spacing-2); }
    .site-nav .nav-group { gap: var(--spacing-2); }

    /* 아주 좁은 화면에서는 장식용 대시를 아예 없애고(폭 확보) 패딩/글자도 한 번 더 줄인다.
       고지 문구는 숨기지 않고 글자만 더 줄인다(컴플라이언스상 항상 보여야 함). */
    .footer-donate-tab {
        gap: 6px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .footer-donate-tab-dash {
        display: none;
    }
    .footer-donate-disclosure {
        padding: 2px 8px;
    }
    /* Secondary nav (게시판/결제 - both reachable from the home page anyway) makes way so the
       logged-in state (avatar + nickname + logout) has room to stay on one line like the
       logged-out state (로그인/회원가입) already does. */
    .nav-group-primary { display: none; }
    .nav-avatar { width: 20px; height: 20px; }
    .btn { width: 100%; }
    .hero .hero-actions .btn { width: auto; flex: 1; }
    /* "글쓰기" etc. stay an inline, right-aligned pill instead of stretching full width. */
    .section-title .btn { width: auto; }

    /* Stays a corner widget (not a full-bleed sheet) - just a bit wider than the desktop
       33vw cap so the input/button remain usable on a narrow phone screen. bottom matches the
       max-width:900px override above (clears the fixed ad bar) - repeated here because this
       block comes later in the cascade and would otherwise win it back down to 10px. */
    .chat-widget {
        right: 10px;
        bottom: 62px;
        width: min(78vw, 300px);
    }
    .chat-widget-body { height: min(50vh, 380px); }
}