* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    color: #2b2b2b;
    background: #fafaf6;
    line-height: 1.7;
    font-size: 16px;
}
header, main, footer { max-width: 880px; margin: 0 auto; padding: 1rem 1.2rem; }
header {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #e9e2d2;
    padding-top: 1.2rem; padding-bottom: 0.8rem;
    margin-bottom: 0.5rem;
}
header h1 { margin: 0; font-size: 1.4rem; letter-spacing: 0.05em; font-weight: 700; }
header h1 a { color: #8b4513; text-decoration: none; }
nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nav-menu, .nav-user { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }
nav a, nav .who { padding: 0.35rem 0.75rem; color: #666; text-decoration: none; border-radius: 6px; font-size: 0.92rem; }
nav a:hover { background: #f3ede0; color: #8b4513; }
nav .icon-link {
    padding: 0.4rem 0.55rem; line-height: 1;
    display: inline-flex; align-items: center; gap: 0.15rem;
}
nav .icon-link .ic { font-size: 1.15rem; }
nav .who { color: #888; }
nav .logout-form { display: inline; margin: 0; padding: 0; }
nav button.navlink {
    margin-left: 0.4rem; padding: 0.35rem 0.75rem;
    background: none; border: none; color: #666;
    cursor: pointer; font: inherit; font-size: 0.92rem;
    border-radius: 6px;
}
nav button.navlink:hover { background: #f3ede0; color: #8b4513; }

footer { color: #aaa; font-size: 0.85rem; text-align: center; margin-top: 1rem; }

a { color: #8b4513; }

.btn {
    display: inline-block; padding: 0.55rem 1.2rem;
    background: #8b4513; color: white !important;
    text-decoration: none; border: none; border-radius: 6px;
    cursor: pointer; font-size: 0.95rem;
    transition: background 0.15s ease;
}
.btn:hover { background: #6f3710; }
.btn-ghost { background: #ede7d8; color: #555 !important; }
.btn-ghost:hover { background: #ddd5c2; }
.btn-danger { background: #b14a4a; padding: 0.4rem 0.9rem; font-size: 0.88rem; }
.btn-danger:hover { background: #9a3a3a; }

.actions { display: flex; justify-content: flex-end; margin-bottom: 0.8rem; }

.top-bar {
    display: flex; gap: .5rem; margin-bottom: .8rem; align-items: stretch;
}
.top-bar .search-bar { flex: 1; margin-bottom: 0; }
.top-bar > .btn { white-space: nowrap; }

.search-bar { display: flex; gap: .5rem; margin-bottom: .8rem; }
.search-bar input[type="search"] {
    flex: 1; padding: .55rem .9rem;
    border: 1px solid #d8cfb8; border-radius: 6px;
    font-family: inherit; font-size: .95rem; background: white;
}
.search-bar input[type="search"]:focus { outline: none; border-color: #8b4513; }

.filter-info {
    display: flex; justify-content: space-between; align-items: center;
    gap: .8rem; flex-wrap: wrap;
    background: #faf3e8; border: 1px solid #ead8b8;
    padding: .65rem 1rem; border-radius: 6px;
    margin-bottom: .8rem;
    font-size: .92rem;
}
.filter-info .btn { padding: .35rem .8rem; font-size: .85rem; }

.author-link { text-decoration: none; }
.author-link:hover { text-decoration: underline; }
.center { text-align: center; padding: 4rem 0; }
.muted { color: #999; font-weight: 400; }
.info { background: #fff8dc; border-left: 4px solid #d4a017; padding: 0.8rem 1.1rem; border-radius: 0 6px 6px 0; }
.err  { background: #fdecea; border-left: 4px solid #b14a4a; padding: 0.8rem 1.1rem; border-radius: 0 6px 6px 0; }

.stack > * { display: block; width: 100%; margin: 0.5rem 0; }
.stack input, .stack textarea, .stack select {
    padding: 0.7rem 0.9rem; border: 1px solid #d8cfb8; border-radius: 6px;
    font-family: inherit; font-size: 1rem; background: white;
    transition: border-color 0.15s ease;
}
.stack input:focus, .stack textarea:focus, .stack select:focus {
    outline: none; border-color: #8b4513;
}
.stack textarea { resize: vertical; min-height: 200px; }
.row-end { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }

table.posts {
    width: 100%; border-collapse: collapse; background: white;
    border: 1px solid #ece5d2; border-radius: 8px; overflow: hidden;
}
table.posts th, table.posts td {
    padding: 0.75rem 0.9rem; border-bottom: 1px solid #f3ede0; text-align: left;
}
table.posts tbody tr:last-child td { border-bottom: none; }
table.posts th { background: #faf6ed; font-weight: 600; color: #8b4513; font-size: 0.9rem; }
table.posts a { text-decoration: none; }
table.posts a:hover { text-decoration: underline; }
table.posts tbody tr:hover { background: #fdfaf0; }

.col-id, .col-author, .col-date, .col-cat { width: 1%; white-space: nowrap; color: #888; font-size: 0.9rem; }
.col-id { text-align: center; }
.cnt { color: #b14a4a; margin-left: 0.4rem; font-size: 0.85rem; font-weight: 500; }
.pinned { background: #fffaef; }
.empty { text-align: center; color: #aaa; padding: 2.5rem !important; }

article.post {
    background: white; padding: 1.8rem;
    border: 1px solid #ece5d2; border-radius: 8px;
}
article.post h2 { margin-top: 0; line-height: 1.5; }
article.post .body, .comment .body {
    white-space: pre-wrap; word-break: break-word; padding: 1rem 0;
}

/* 마크다운 렌더링 본문 */
.markdown-body {
    padding: 1.2rem 0; line-height: 1.75; word-break: break-word;
}
.markdown-body p { margin: 0 0 0.85em; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin: 1.6em 0 0.6em; line-height: 1.3; color: #6f3710;
}
.markdown-body h1 { font-size: 1.5em; }
.markdown-body h2 { font-size: 1.3em; }
.markdown-body h3 { font-size: 1.15em; }
.markdown-body ul, .markdown-body ol { padding-left: 1.6em; margin: 0.5em 0 1em; }
.markdown-body li { margin: 0.2em 0; }
.markdown-body code {
    background: #f3ede0; padding: 0.1em 0.4em;
    border-radius: 3px; font-size: 0.92em;
    font-family: "SFMono-Regular", "Consolas", "D2Coding", monospace;
}
.markdown-body pre {
    background: #f5efe2; padding: 1em; border-radius: 6px;
    overflow-x: auto; margin: 1em 0;
    border: 1px solid #ece5d2;
}
.markdown-body pre code { background: none; padding: 0; font-size: 0.9em; }
.markdown-body blockquote {
    border-left: 4px solid #c9a974;
    padding: 0.3em 1em; margin: 1em 0;
    color: #666; background: #faf6ed;
}
.markdown-body img { max-width: 100%; height: auto; border-radius: 6px; margin: 0.5em 0; }
.markdown-body a { color: #8b4513; word-break: break-all; }
.markdown-body table { border-collapse: collapse; margin: 1em 0; }
.markdown-body table th, .markdown-body table td {
    border: 1px solid #d8cfb8; padding: 0.4em 0.7em;
}
.markdown-body table th { background: #faf6ed; }
.markdown-body hr { border: none; border-top: 1px solid #ece5d2; margin: 1.5em 0; }

/* 첨부 파일 박스 */
.attachment-box {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: #faf3e8;
    border: 1px solid #ead8b8;
    border-radius: 6px;
    font-size: 0.95rem;
}
.attachment-box a {
    color: #8b4513; font-weight: 600; text-decoration: none;
    margin-left: 0.3rem;
}
.attachment-box a:hover { text-decoration: underline; }
.attachment-list { list-style: none; padding: 0; margin: 0.4rem 0 0 0; }
.attachment-list li { padding: 0.2rem 0; }

input[type="file"] {
    padding: 0.4rem; border: 1px solid #d8cfb8;
    border-radius: 6px; background: white; font-family: inherit;
    width: 100%; font-size: 0.9rem;
}

/* 마크다운 가이드 (글쓰기 폼) */
.md-help { margin: 0 0 .5rem; font-size: .87rem; color: #666; }
.md-help summary { cursor: pointer; padding: .3rem 0; user-select: none; color: #8b4513; }
.md-help ul { margin: .3rem 0 .3rem 0; padding-left: 1.5em; }
.md-help li { margin: .15rem 0; }
.md-help code {
    background: #f3ede0; padding: .05em .35em;
    border-radius: 3px; font-size: .92em;
}

.actions-bottom { margin: 1.2rem 0 0.6rem; }
.search-bar-bottom { margin-top: 0.4rem; }

nav.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: .25rem; flex-wrap: wrap;
    margin: 1.5rem 0 .5rem;
}
nav.pagination a, nav.pagination span {
    padding: .4rem .75rem; min-width: 2rem; text-align: center;
    border-radius: 6px; text-decoration: none;
    font-size: .92rem; color: #555;
}
nav.pagination a { background: white; border: 1px solid #ece5d2; }
nav.pagination a:hover { background: #faf3e8; color: #8b4513; border-color: #c9a974; }
nav.pagination span.active { background: #8b4513; color: white; font-weight: 600; }
nav.pagination span.disabled { color: #ccc; cursor: not-allowed; }
nav.pagination span.dots { color: #aaa; padding: .4rem .25rem; }
.meta { color: #999; font-size: 0.88rem; }
.badge { background: #d4a017; color: white; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; vertical-align: middle; }

/* 카테고리 한자 글리프 + 알약 뱃지 */
.cat-glyph {
    font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
    font-weight: 600; color: #8b4513;
    margin-right: 0.25rem;
}
.cat-glyph-lg { font-size: 1.6rem; }
.cat-pill {
    display: inline-flex; align-items: center; gap: 0.1rem;
    background: #faf3e8; color: #8b4513;
    border: 1px solid #ead8b8;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem; font-weight: 500;
    vertical-align: middle;
}
.cat-pill .cat-glyph { color: inherit; }
.pill {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 500;
    border: 1px solid transparent;
    vertical-align: middle;
}
.pill-approved { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.pill-pending  { background: #fff8dc; color: #a87800; border-color: #e8d4a0; }
.pill-new      {
    background: #b14a4a; color: #fff !important; border-color: #b14a4a;
    font-weight: 700; letter-spacing: 0.05em;
    animation: pulse-dot 1.6s ease-in-out infinite;
}

/* 카테고리 카드 그리드 (글쓰기 폼) */
.cat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.6rem; border: none; padding: 0; margin: 0 0 0.6rem 0;
}
.cat-grid legend {
    color: #888; font-size: 0.85rem; padding: 0; margin-bottom: 0.4rem;
}
.cat-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem; padding: 1rem 0.6rem;
    background: white; border: 2px solid #ece5d2; border-radius: 8px;
    cursor: pointer; transition: all 0.15s ease;
    text-align: center;
}
.cat-card:hover { border-color: #c9a974; background: #fdfaf0; }
.cat-card input { position: absolute; opacity: 0; pointer-events: none; }
.cat-card:has(input:checked) {
    border-color: #8b4513; background: #faf3e8;
    box-shadow: 0 1px 4px rgba(139,69,19,0.12);
}
.cat-card .icon {
    font-family: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
    font-size: 2rem; font-weight: 700; color: #8b4513; line-height: 1;
}
.cat-card .name { font-size: 0.95rem; color: #555; }
.cat-card:has(input:checked) .name { color: #8b4513; font-weight: 600; }

.notice-toggle {
    margin: 0.3rem 0 0.6rem;
    padding: 0.6rem 0.9rem;
    background: #fff8dc; border: 1px solid #ead;
    border-radius: 6px;
    display: flex; align-items: center; gap: 0.5rem;
}

/* 카테고리 탭 (목록 상단) */
nav.cats {
    display: flex; gap: 0.2rem; flex-wrap: wrap;
    background: white; padding: 0.4rem;
    border: 1px solid #ece5d2; border-radius: 8px;
    margin-bottom: 0.8rem;
}
nav.cats a {
    padding: 0.45rem 0.95rem; text-decoration: none; color: #666;
    border-radius: 6px; font-size: 0.93rem;
}
nav.cats a:hover { background: #faf3e8; color: #8b4513; }
nav.cats a.active { background: #8b4513; color: white; }
nav.cats a.active .cat-glyph { color: white; }

/* 관리 탭 */
nav.admin-tabs {
    display: flex; gap: 0.2rem;
    margin-bottom: 1.4rem; padding-bottom: 0.3rem;
    border-bottom: 2px solid #8b4513;
}
nav.admin-tabs a {
    padding: 0.55rem 1.3rem; text-decoration: none; color: #777;
    border-radius: 6px 6px 0 0; font-weight: 600;
}
nav.admin-tabs a:hover:not(.active) { background: #f3ede0; }
nav.admin-tabs a.active { background: #8b4513; color: white; }

/* 도감 탭 */
nav.items-tabs {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    margin-bottom: 1rem; padding-bottom: 0.3rem;
    border-bottom: 2px solid #8b4513;
}
nav.items-tabs a {
    padding: 0.5rem 1rem; text-decoration: none; color: #777;
    border-radius: 6px 6px 0 0; font-weight: 600;
}
nav.items-tabs a:hover:not(.active) { background: #f3ede0; }
nav.items-tabs a.active { background: #8b4513; color: white; }
nav.items-tabs a.active .muted { color: #f0d8b0 !important; }

.items-search {
    display: flex; gap: 0.4rem; margin: 0 0 1rem;
}
.items-search input[type=text] {
    flex: 1; padding: 0.55rem 0.85rem;
    border: 1px solid #d8cfb8; border-radius: 6px; font-size: 0.95rem;
}
.items-search input[type=text]:focus { outline: none; border-color: #8b4513; }

.items-table th, .items-table td { padding: 0.5rem 0.6rem; }
.bonus-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem; margin: 0.1rem 0.15rem 0.1rem 0;
    background: #faf3e8; border: 1px solid #ead8b8; border-radius: 4px;
    font-size: 0.82rem; color: #6d3c0e;
}

/* 폼 컨트롤 일반 */
select { padding: 0.55rem 0.7rem; border: 1px solid #d8cfb8; border-radius: 6px; font-family: inherit; font-size: 0.95rem; background: white; }
input[type="color"] {
    width: 2.4rem; height: 2rem;
    padding: 0.1rem; border: 1px solid #d8cfb8; border-radius: 6px;
    background: white; cursor: pointer;
    vertical-align: middle;
}
.check { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; }
.check input { width: auto; }

.comments { margin-top: 2rem; }
.comment {
    background: white;
    padding: 0.45rem 0.85rem;
    border: 1px solid #ece5d2;
    border-radius: 5px;
    margin: 0.25rem 0;
}
.comment .body {
    padding: 0.1rem 0 0;
    line-height: 1.5;
    font-size: 0.95rem;
}
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.comment-header .meta {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem;
}
.comment-actions {
    margin-top: 0;
    text-align: right;
    font-size: 0.78rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.btn-link { padding: 0.05rem 0.15rem; }
.btn-link {
    background: none; border: none; color: #999;
    padding: 0; margin-left: 0.7rem;
    cursor: pointer; text-decoration: none;
    font: inherit; font-size: inherit;
}
.btn-link:hover { color: #8b4513; text-decoration: underline; }
.btn-link-danger:hover { color: #b14a4a; }

.comment-edit { padding-top: 0.5rem; }
.comment-edit textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d8cfb8; border-radius: 6px;
    font-family: inherit; font-size: 1rem; background: white;
    resize: vertical;
}
.comment-edit textarea:focus { outline: none; border-color: #8b4513; }

.mention {
    background: #faf3e8; color: #8b4513; font-weight: 500;
    padding: 0.05em 0.45em; border-radius: 999px;
    font-size: 0.92em;
    border: 1px solid #ead8b8;
}

/* 헤더 알림 뱃지 */
.notif-link { position: relative; }
.notif-count {
    background: #b14a4a; color: white !important;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem; font-weight: 600;
    margin-left: 0.15rem;
    vertical-align: middle;
}
/* 새 콘텐츠 알림: 메뉴 아이콘 자체를 깜빡이게 */
.icon-link.has-new .ic {
    animation: pulse-icon 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(177, 74, 74, 0.8));
}
@keyframes pulse-icon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.85); }
}
/* 호환용 — 기존에 사용 중일 수 있는 .new-dot 은 표시 안 함 */
.new-dot { display: none; }

/* 알림 페이지 */
.notif-list { list-style: none; padding: 0; margin: 1rem 0; }
.notif-item {
    background: white;
    border: 1px solid #ece5d2;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: background 0.15s ease;
}
.notif-item a {
    display: block;
    padding: 0.85rem 1.1rem;
    text-decoration: none;
    color: #333;
}
.notif-item:hover { background: #fdfaf0; }
.notif-item.unread {
    background: #faf3e8;
    border-color: #ead8b8;
    border-left: 4px solid #8b4513;
}
.notif-item.unread a { font-weight: 500; }
.notif-item .notif-text { line-height: 1.5; }
.notif-item .notif-post {
    color: #8b4513; margin-top: 0.3rem; font-size: 0.95rem;
}
.notif-item .notif-meta {
    color: #999; font-size: 0.82rem; margin-top: 0.3rem;
}

/* ========== 쪽지(DM) ========== */
.dm-list { list-style: none; padding: 0; margin: 1rem 0; }
.dm-item {
    background: white;
    border: 1px solid #ece5d2;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}
.dm-item a {
    display: block; padding: 0.8rem 1rem;
    text-decoration: none; color: #333;
}
.dm-item:hover { background: #fdfaf0; }
.dm-item.unread { background: #faf3e8; border-left: 4px solid #8b4513; }
.dm-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.dm-row strong { color: #8b4513; }
.dm-time { margin-left: auto; color: #999; font-size: 0.8rem; }
.dm-preview { color: #666; font-size: 0.9rem; }

.dm-thread {
    display: flex; flex-direction: column;
    gap: 0.4rem; padding: 0.8rem;
    background: #f7f3ea;
    border: 1px solid #ece5d2; border-radius: 8px;
    max-height: 60vh; overflow-y: auto;
}
.dm-msg { display: flex; flex-direction: column; max-width: 85%; }
.dm-msg.is-mine  { align-self: flex-end; align-items: flex-end; }
.dm-msg.is-other { align-self: flex-start; align-items: flex-start; }
.dm-bubble {
    padding: 0.4rem 0.8rem; border-radius: 12px;
    border: 1px solid #d8c9a8; background: white;
    line-height: 1.4; word-break: break-word;
    white-space: pre-wrap;
}
.dm-msg.is-mine .dm-bubble { background: #faf0d8; }
.dm-meta { font-size: 0.72rem; color: #999; margin-top: 0.15rem; }

/* 비밀댓글 */
.comment.is-secret { background: #fdf6e3; border-left: 3px solid #c4a777; padding-left: 0.8rem; }
.secret-badge { color: #b14a4a; font-size: 0.95rem; }

/* 프로필 말풍선 색상 선택 */
.color-form { margin-top: 0.5rem; }
.bubble-preview-row {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.8rem; font-size: 0.9rem; color: #777;
    flex-wrap: wrap;
}
.bubble-preview {
    display: inline-block; padding: 0.3rem 0.8rem;
    border: 1px solid #d8c9a8; border-radius: 12px;
    font-size: 0.95rem;
}
.hue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 0.35rem;
}
.hue-swatch {
    cursor: pointer;
    height: 34px; border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0;
    transition: transform 0.1s ease;
}
.hue-swatch:hover { transform: scale(1.08); }
.color-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.color-row label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.92rem; color: #444;
}
.color-row input[type=color] {
    width: 50px; height: 36px; padding: 0;
    border: 1px solid #d8c9a8; border-radius: 6px;
    background: white; cursor: pointer;
}
.hex-value {
    font-family: ui-monospace, monospace;
    font-size: 0.85rem; color: #888;
}

/* ========== 실시간 채팅 (말풍선 스타일) ========== */
/* 채팅 페이지 — 게시판과 동일한 일반 block 레이아웃 사용
   (메시지 영역만 자체적으로 max-height + scroll) */

.chat-wrap {
    /* 일반 block 레이아웃 — 다른 페이지와 동일 */
}
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.chat-header h2 { margin: 0; font-size: 1.2rem; }

.chat-messages {
    /* 헤더/메뉴/입력창/상태/푸터 등 고정 영역 제외, 한 화면 내로 */
    height: calc(100vh - 240px);
    height: calc(100dvh - 240px);
    min-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;   /* absolute 시간/긴 풍선이 좌우 스크롤 만들지 않게 */
    background: #f7f3ea;
    border: 1px solid #ece5d2; border-radius: 8px;
    padding: 0.8rem 0.9rem 0.5rem;
    display: flex; flex-direction: column;
}

.chat-load-more {
    text-align: center; padding: 0.3rem 0 0.5rem;
}
.chat-load-more .btn { font-size: 0.85rem; padding: 0.35rem 0.8rem; }

/* 메시지 — 말풍선 스타일 (컴팩트) */
.chat-msg {
    display: flex; flex-direction: column;
    margin-top: 0.4rem;
    max-width: 85%;
}
.chat-msg.is-consecutive { margin-top: 0; }  /* 간격 제거 — 붙은 한 덩어리 */

.chat-msg.is-other { align-self: flex-start; align-items: flex-start; }
.chat-msg.is-mine  { align-self: flex-end;   align-items: flex-end; }

.chat-author {
    font-size: 0.78rem; color: #6f3710; font-weight: 600;
    margin: 0 0.4rem 0.1rem;
}
.chat-author a { color: inherit; text-decoration: none; }
.chat-msg.is-consecutive .chat-author { display: none; }

/* 같은 줄 — 말풍선 + 시간 inline. 시간은 absolute로 빠지므로 폭에 영향 없음 */
.chat-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    position: relative;
}
.is-mine .chat-row { flex-direction: row-reverse; }

.chat-bubble {
    padding: 0.3rem 0.7rem;
    border-radius: 14px;
    line-height: 1.3;
    font-size: 0.92rem;
    word-break: break-word;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.is-other .chat-bubble {
    border: 1px solid;
    color: #2b2b2b;
    border-top-left-radius: 4px;
}
.is-mine .chat-bubble {
    border: 1px solid;
    color: #2b2b2b;
    border-top-right-radius: 4px;
}
/* 1분 이내 연속 묶음: 간격·테두리 제거 → 한 덩어리로 보이게 */
.is-other.is-consecutive .chat-bubble,
.is-mine.is-consecutive  .chat-bubble {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
}
/* 다음이 연속이면 현재 말풍선 아랫 모서리도 평평·테두리 제거 */
.chat-msg:has(+ .chat-msg.is-consecutive) .chat-bubble {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.chat-body { white-space: pre-wrap; }
.chat-body a { color: #1e6091; }
.is-mine .chat-body { text-align: right; }
.is-mine .chat-body a { color: #6f3710; }

.chat-time {
    font-size: 0.7rem; color: #aaa;
    flex-shrink: 0;
    align-items: center; gap: 0.2rem;
    display: none;          /* 기본 숨김 */
    /* 풍선 폭에 영향주지 않도록 absolute로 분리 */
    position: absolute; bottom: 0;
    white-space: nowrap;
}
/* is-mine: 풍선 좌측에 시간 / is-other: 풍선 우측에 시간 */
.is-mine  .chat-time { right: 100%; margin-right: 0.4rem; }
.is-other .chat-time { left: 100%;  margin-left: 0.4rem; }
/* 그룹의 마지막 메시지에만 시간/삭제버튼 표시 */
.chat-msg:last-child .chat-time,
.chat-msg:has(+ .chat-msg:not(.is-consecutive)) .chat-time {
    display: inline-flex;
}

.chat-delete {
    background: none; border: none; cursor: pointer;
    color: #ccc; font-size: 0.85rem; line-height: 1;
    padding: 0.1rem 0.35rem; border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.chat-delete:hover { color: #b14a4a; background: #fdecea; }

/* 선택 모드 */
.chat-header-actions { display: flex; gap: 0.4rem; }
.chat-select-bar {
    display: none;
    align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: #fff8dc;
    border: 1px solid #e8d4a0;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.chat-select-bar .btn { padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.chat-select-bar .btn-link { color: #8b4513; }
.chat-select-cb {
    cursor: pointer;
    width: 20px; height: 20px;
    accent-color: #8b4513;
}
.select-mode .chat-msg { position: relative; }
.select-mode .chat-msg.is-other { padding-left: 32px; }
.select-mode .chat-msg.is-mine  { padding-right: 32px; }
.select-mode .chat-select-cb {
    position: absolute; top: 12px;
    left: 4px;
}
.select-mode .chat-msg.is-mine .chat-select-cb {
    left: auto; right: 4px;
}
.select-mode .chat-delete { display: none; }
.select-mode .chat-msg.has-cb-selected .chat-bubble {
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.35);
}

/* ===== 리더보드 ===== */
nav.lb-tabs {
    display: flex; gap: 0.2rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #8b4513;
    padding-bottom: 0.3rem;
    flex-wrap: wrap;
}
nav.lb-tabs a {
    padding: 0.5rem 1.1rem;
    text-decoration: none; color: #777;
    border-radius: 6px 6px 0 0;
    font-weight: 600; font-size: 0.92rem;
}
nav.lb-tabs a:hover:not(.active) { background: #f3ede0; }
nav.lb-tabs a.active { background: #8b4513; color: white; }

.lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-active { background: #fdf6e3; color: #8b4513; font-weight: 600; }
.lb-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    font-weight: 700; color: white;
}
.lb-rank-1 { background: #d4a017; }  /* 금 */
.lb-rank-2 { background: #a0a0a0; }  /* 은 */
.lb-rank-3 { background: #b87333; }  /* 동 */

.pill-outsider {
    background: #f3e9e9; color: #a33; border-color: #e0c0c0;
    margin-left: 0.4rem;
}
.pill-member {
    background: linear-gradient(135deg, #fdf0c4, #f4d35e);
    color: #6f3710; border-color: #d4a017;
    margin-left: 0.4rem; font-weight: 600;
    box-shadow: 0 1px 2px rgba(212, 160, 23, 0.2);
}
.lb-crown {
    color: #d4a017; font-size: 1.1em;
    margin-right: 0.25rem;
    text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* 문파원 행 강조 (데스크톱) */
table.posts tr.is-member {
    background: linear-gradient(to right, #fdf6e3 0%, white 35%);
}
table.posts tr.is-member:hover {
    background: linear-gradient(to right, #faf0d6 0%, #fffaf0 35%);
}
table.posts tr.is-member td:first-child {
    border-left: 3px solid #d4a017;
}

/* ===== 모바일 ≤640px: 리더보드 카드 + 선택툴바 정리 ===== */
@media (max-width: 640px) {
    /* 리더보드 탭 */
    nav.lb-tabs {
        gap: 0.1rem; padding-bottom: 0.2rem;
        overflow-x: auto; flex-wrap: nowrap;
    }
    nav.lb-tabs a {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* 리더보드 표 → 카드 레이아웃 */
    nav.lb-tabs ~ table.posts {
        display: block;
        background: transparent;
        border: none;
        max-width: 100%;
        overflow-x: visible;
        white-space: normal;
    }
    nav.lb-tabs ~ table.posts thead { display: none; }
    nav.lb-tabs ~ table.posts tbody,
    nav.lb-tabs ~ table.posts tr {
        display: block;
        width: 100%;
    }
    nav.lb-tabs ~ table.posts tr {
        background: white;
        border: 1px solid #ece5d2;
        border-radius: 8px;
        padding: 0.7rem 0.9rem;
        margin-bottom: 0.5rem;
        position: relative;
    }
    nav.lb-tabs ~ table.posts tbody tr:hover { background: white; }
    /* 모바일: 문파원 카드 강조 */
    nav.lb-tabs ~ table.posts tr.is-member {
        background: linear-gradient(to bottom right, #fdf6e3, white 60%);
        border-color: #d4a017;
        border-left-width: 4px;
    }
    nav.lb-tabs ~ table.posts tr.is-member:hover {
        background: linear-gradient(to bottom right, #faf0d6, #fffaf0 60%);
    }
    nav.lb-tabs ~ table.posts td {
        display: block;
        width: auto !important;
        padding: 0.2rem 0 !important;
        border: none;
        text-align: left;
        white-space: normal;
        font-size: 0.92rem;
        color: #333;
    }
    nav.lb-tabs ~ table.posts td[data-label]::before {
        content: attr(data-label) ": ";
        color: #999; font-size: 0.78rem; font-weight: 600;
        margin-right: 0.4rem;
    }
    /* 순위·캐릭명 강조 (label 숨기고 크게) */
    nav.lb-tabs ~ table.posts td[data-label="순위"] {
        position: absolute; top: 0.7rem; right: 0.9rem;
        padding: 0 !important;
    }
    nav.lb-tabs ~ table.posts td[data-label="순위"]::before { content: ""; }
    nav.lb-tabs ~ table.posts td[data-label="캐릭명"] {
        font-size: 1.05rem; font-weight: 600;
        margin-bottom: 0.3rem;
        padding-right: 2.5rem !important;
    }
    nav.lb-tabs ~ table.posts td[data-label="캐릭명"]::before { content: ""; }

    /* lb-active 컬럼은 더 강조 */
    nav.lb-tabs ~ table.posts td.lb-active {
        background: #fdf6e3; padding: 0.35rem 0.5rem !important;
        border-radius: 4px; margin: 0.2rem 0;
    }
    nav.lb-tabs ~ table.posts td.lb-num {
        text-align: left; font-variant-numeric: tabular-nums;
    }

    /* 채팅 선택 툴바 — 좁은 화면에서 줄바꿈 */
    .chat-select-bar {
        flex-wrap: wrap; gap: 0.4rem;
        font-size: 0.85rem;
    }
    .chat-select-bar .btn {
        padding: 0.3rem 0.65rem; font-size: 0.8rem;
    }
    .chat-header h2 { font-size: 1rem; }
    .chat-header-actions { gap: 0.25rem; }
    .chat-header-actions .btn { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
}
/* 마지막 메시지(같은 그룹 끝)에서는 시간 표시. 단순화 위해 모든 비연속 마지막 표시 */

.chat-input-row {
    display: flex; gap: 0.4rem; margin-top: 0.6rem;
}
.chat-input-row input {
    flex: 1; padding: 0.65rem 1rem;
    border: 1px solid #d8cfb8; border-radius: 999px;
    font-family: inherit; font-size: 0.95rem; background: white;
}
.chat-input-row input:focus { outline: none; border-color: #8b4513; }
.chat-input-row .btn { border-radius: 999px; padding: 0.55rem 1.2rem; }

.chat-status {
    text-align: center; font-size: 0.8rem; margin: 0.3rem 0 0; color: #aaa;
}
.chat-status-error { color: #b14a4a; }

.chat-aside {
    background: white; border: 1px solid #ece5d2; border-radius: 8px;
    padding: 0.8rem; overflow-y: auto;
    /* 평소(모바일·작은 PC) 숨김, [접속자] 토글로 popup */
    display: none;
}
.chat-aside.chat-aside-open {
    display: block;
    position: fixed;
    top: 70px; right: 1rem;
    width: 220px; max-height: 60vh;
    z-index: 100;
    box-shadow: -2px 4px 16px rgba(0,0,0,0.2);
}

/* PC 와이드(≥1366px): 모든 페이지에서 사이드바 우측 고정 */
@media (min-width: 1366px) {
    .chat-aside {
        display: block !important;
        position: fixed;
        top: 110px;
        left: 50%;
        transform: translateX(456px);
        width: 220px;
        max-height: calc(100vh - 130px);
        z-index: 10;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    /* PC에서 항상 보이므로 토글·✕ 버튼 숨김 */
    #chat-online-toggle { display: none !important; }
    .chat-aside-close { display: none; }
}
.chat-aside h3 {
    margin: 0 0 0.5rem; font-size: 0.95rem; color: #8b4513;
    border-bottom: 1px solid #ece5d2; padding-bottom: 0.4rem;
    display: flex; justify-content: space-between; align-items: center;
}
.chat-aside-close {
    background: none; border: none;
    color: #999; cursor: pointer;
    font-size: 1.1rem; line-height: 1;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
.chat-aside-close:hover { color: #b14a4a; background: #fdecea; }
.online-list { list-style: none; padding: 0; margin: 0; }
.online-list li {
    padding: 0.35rem 0.5rem;
    font-size: 0.9rem; color: #555;
    border-radius: 4px;
}
.online-list li::before {
    content: "●";
    color: #4caf50;
    margin-right: 0.4rem;
    font-size: 0.7em;
    vertical-align: middle;
}
.online-list li.me { font-weight: 600; color: #8b4513; cursor: default; }
.online-list li.clickable { cursor: pointer; }
.online-list li.clickable:hover { background: #faf3e8; color: #8b4513; }

@media (max-width: 700px) {
    .chat-main { width: 100%; }
    .chat-messages {
        padding: 0.6rem 0.7rem;
        /* 모바일은 헤더 2줄 메뉴 영역으로 예약값 조금 더 큼 */
        height: calc(100vh - 280px);
        height: calc(100dvh - 280px);
        min-height: 200px;
    }
    .chat-msg { max-width: 88%; }
    .chat-input-row {
        padding: 0;
    }
    /* 모바일: 시간을 absolute 대신 풍선 아래 inline 으로 (좌우 오버플로 방지) */
    .chat-time {
        position: static;
        margin: 0.1rem 0.2rem 0;
    }
    .is-mine  .chat-time { right: auto; align-self: flex-end; margin-right: 0; }
    .is-other .chat-time { left: auto;  align-self: flex-start; margin-left: 0; }
}

/* =============== 모바일 (≤640px) =============== */
@media (max-width: 640px) {
    body { font-size: 15px; }
    header, main, footer { padding: 0.7rem 0.8rem; }

    /* 헤더: 좌측 타이틀 / 우측 메뉴 2줄 */
    header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        padding-top: 0.8rem;
    }
    header h1 { font-size: 1.15rem; flex-shrink: 0; }
    header nav {
        flex: 1;
        min-width: 0;
        display: flex; flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }
    .nav-menu, .nav-user {
        display: flex; gap: 0.15rem;
        flex-wrap: wrap; align-items: center;
        justify-content: flex-end;
    }
    .nav-menu a,
    .nav-user a,
    .nav-user .who,
    .nav-user button.navlink {
        padding: 0.25rem 0.45rem;
        font-size: 0.8rem;
    }

    /* 상단바: 세로 스택 */
    .top-bar { flex-direction: column; gap: 0.4rem; }
    .top-bar > .btn { width: 100%; text-align: center; padding: 0.6rem; }

    /* 카테고리 탭: 작게, 가로 스크롤 가능 */
    nav.cats {
        padding: 0.3rem;
        gap: 0.15rem;
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    nav.cats a { padding: 0.4rem 0.7rem; font-size: 0.85rem; white-space: nowrap; }

    /* 게시판 표: 번호·작성일 숨김, 분류는 작게 */
    table.posts .col-id,
    table.posts .col-date {
        display: none;
    }
    table.posts th, table.posts td {
        padding: 0.55rem 0.4rem; font-size: 0.92rem;
    }
    .col-cat { font-size: 0.78rem; }
    .cat-pill {
        padding: 0.05rem 0.45rem; font-size: 0.78rem;
    }
    .cat-glyph { font-size: 0.95em; }
    .cnt { font-size: 0.78rem; margin-left: 0.2rem; }

    /* 검색·필터 안내 */
    .filter-info { padding: 0.5rem 0.7rem; font-size: 0.85rem; gap: 0.4rem; }

    /* 글 보기 */
    article.post { padding: 1rem; }
    article.post h2 { font-size: 1.15rem; line-height: 1.4; }
    article.post .meta { font-size: 0.82rem; }

    /* 마크다운 본문: 표는 스크롤, 코드 작게 */
    .markdown-body { padding: 0.8rem 0; font-size: 0.96rem; }
    .markdown-body h1 { font-size: 1.3em; }
    .markdown-body h2 { font-size: 1.18em; }
    .markdown-body h3 { font-size: 1.08em; }
    .markdown-body table {
        display: block; overflow-x: auto; max-width: 100%;
        font-size: 0.85em;
    }
    .markdown-body pre { font-size: 0.82em; padding: 0.7rem; }

    /* 카테고리 카드 그리드 (글쓰기) */
    .cat-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.4rem; }
    .cat-card { padding: 0.7rem 0.4rem; }
    .cat-card .icon { font-size: 1.5rem; }
    .cat-card .name { font-size: 0.85rem; }

    /* 댓글 영역 */
    .comment { padding: 0.7rem 0.85rem; }
    .comment-actions { font-size: 0.78rem; }

    /* 페이지네이션 작게 */
    nav.pagination a, nav.pagination span {
        padding: 0.35rem 0.55rem; min-width: 1.7rem; font-size: 0.85rem;
    }

    /* 관리 페이지 탭 */
    nav.admin-tabs { gap: 0.1rem; padding-bottom: 0.2rem; }
    nav.admin-tabs a { padding: 0.45rem 0.8rem; font-size: 0.88rem; }

    /* 관리 페이지 표 → 카드 레이아웃 */
    nav.admin-tabs ~ table.posts {
        display: block;
        background: transparent;
        border: none;
        max-width: 100%;
        overflow-x: visible;
        white-space: normal;
    }
    nav.admin-tabs ~ table.posts thead { display: none; }
    nav.admin-tabs ~ table.posts tbody,
    nav.admin-tabs ~ table.posts tr {
        display: block;
        width: 100%;
    }
    nav.admin-tabs ~ table.posts tr {
        background: white;
        border: 1px solid #ece5d2;
        border-radius: 8px;
        padding: 0.7rem 0.9rem;
        margin-bottom: 0.6rem;
    }
    nav.admin-tabs ~ table.posts tbody tr:hover { background: white; }
    nav.admin-tabs ~ table.posts td {
        display: block;
        width: auto !important;
        padding: 0.2rem 0 !important;
        border: none;
        text-align: left;
        white-space: normal;
        color: #333;
        font-size: 0.92rem;
    }
    /* 라벨 prefix (data-label 있는 td만) */
    nav.admin-tabs ~ table.posts td[data-label]::before {
        content: attr(data-label) ": ";
        color: #999;
        font-size: 0.78rem;
        font-weight: 600;
        margin-right: 0.4rem;
    }
    /* 액션 셀 (data-label 없음) — 카드 하단 분리선 */
    nav.admin-tabs ~ table.posts td:not([data-label]) {
        padding-top: 0.55rem !important;
        border-top: 1px solid #f3ede0;
        margin-top: 0.4rem;
    }
    /* 연속된 액션 셀 — 한 줄로 묶음 */
    nav.admin-tabs ~ table.posts td:not([data-label]) + td:not([data-label]) {
        border-top: none;
        margin-top: 0;
        padding-top: 0.3rem !important;
    }
    nav.admin-tabs ~ table.posts td:not([data-label]) form,
    nav.admin-tabs ~ table.posts td:not([data-label]) .btn {
        margin-right: 0.4rem; margin-bottom: 0.3rem;
    }
    /* 빈 td (caption/empty 메시지) */
    nav.admin-tabs ~ table.posts td.empty {
        text-align: center; border: none; padding: 1.5rem 0;
    }

    /* 인증 카드 */
    .auth-card { margin: 2rem auto; padding: 0 0.5rem; }

    /* 푸터 */
    footer { margin-top: 0.6rem; }

    /* 폼 입력 패딩 */
    .stack input, .stack textarea, .stack select { padding: 0.6rem 0.7rem; font-size: 1rem; }
}

/* 더 좁은 화면 (≤380px) — 작성자도 숨김 */
@media (max-width: 380px) {
    table.posts .col-author { display: none; }
    .col-cat { display: none; }
    nav.cats a { padding: 0.35rem 0.55rem; font-size: 0.8rem; }
}

/* 인증 카드 */
.auth-card { max-width: 380px; margin: 4rem auto; text-align: center; }
.auth-card h2 { margin-top: 0; color: #8b4513; }
.auth-card form { text-align: left; }
.auth-card .btn { width: 100%; }
.auth-card .muted { margin-top: 1.5rem; font-size: 0.9rem; }