/**
 * FPV DRONE KOREA - 메인 스타일시트
 * Design: Warm Indigo + Terracotta (v5)
 */

/* ===== Google Fonts ===== */
/* Loaded via <link> in header.php for better performance */

/* ===== CSS Variables ===== */
:root {
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-alt: #F8F8FA;
    --border: #EBEBEB;
    --text: #1A1A1A;
    --text-sub: #555;
    --text-cap: #999;

    --indigo: #2B1E54;
    --indigo-ink: #2B1E54;   /* 텍스트 전용 인디고 — 다크에서 밝게 리맵(배경용 --indigo는 불변) */
    --indigo-fill: #2B1E54;  /* 채움 인디고(그래프 막대·선택 칩·탭 밑줄) — 다크에서 톤다운한 밝은 보라(2026-10-08) */
    --surface-chip: #FFFFFF; /* 흰 칩·블록(기간 단추·오늘 처리) — 다크에서 카드보다 한 단 위 회보라 */
    --amber-bg: #FBF1E0; --amber-ink: #9A6B15;   /* 예약·대기 배지 */
    --red-bg: #FBE9E9; --red-ink: #C0392B;       /* 반려·정지·삭제 배지 */
    --indigo-mid: #4A3D73;
    --indigo-soft: #7B71A0;
    --indigo-pale: #EFEDF5;

    --terra: #C4573A;
    --terra-hover: #B04D33;
    --terra-soft: #E8A08A;
    --terra-light: #e8836e;
    --terra-bg: #FBEEEA;
    --green-bg: #E6F5EC;
    --green-ink: #2D8A56;
    --text-muted: #999;
    --text-light: #999;
    --bg-light: #F5F5F5;
    --white: #FFFFFF;
    --indigo-hover: #3d2d6b;
    --indigo-light: #EFEDF5;
    --text-main: #1A1A1A;

    --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --max-w: 1120px;
    --radius: 8px;

    /* Spacing */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* 스크린리더 전용 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip; /* hidden→clip: 가로 스크롤은 막되 스크롤 컨테이너를 만들지 않아 position:sticky 유지 */
    scrollbar-gutter: stable; /* 스크롤바 유무와 무관하게 게터 항상 예약 → 페이지 간 가로 틀어짐 방지 */
}

body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-x: clip; /* hidden→clip: position:sticky 유지 (sticky를 깨던 원인) */
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}

a, button, input, select, textarea, [role="button"] {
    touch-action: manipulation;
}

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* ===== Container ===== */
.wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Header ===== */
.header {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
}
.logo .logo-dk { display: none; }   /* 다크 로고 — 아래 다크모드 구획에서 바꿔 끼운다(2026-10-08) */

/* Category Tabs (Main Nav) */
.cat-tabs {
    display: flex;
    gap: 0;
    align-items: center;
}

.cat-tab {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    position: relative;
    transition: color 0.15s;
    white-space: nowrap;
}

.cat-tab:hover {
    color: var(--text);
}

.cat-tab.on {
    color: var(--indigo-ink);
    font-weight: 600;
}

.cat-tab.on::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--indigo-fill);
}

/* Header Right */
.h-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.h-right a {
    font-size: 15px;
    color: var(--text-sub);
    transition: color 0.15s;
}

.h-right a:hover {
    color: var(--terra);
}

.btn-join {
    padding: 7px 16px;
    background: var(--terra);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    transition: background 0.15s;
    display: inline-block;
}

.btn-join:hover {
    background: var(--terra-hover);
}

/* Header Write Button & Profile */
.h-write-wrap {
    position: relative;
}
.h-write-btn {
    padding: 7px 16px;
    background: var(--terra);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font);
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.h-write-btn:hover {
    background: var(--terra-hover);
}
.h-write-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    overflow: hidden;
}
.h-write-dropdown.show {
    display: block;
}
.h-write-dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text) !important;
    transition: background 0.15s;
}
.h-write-dropdown a:hover {
    background: var(--surface-alt);
    color: var(--terra) !important;
}
.h-write-dropdown a + a {
    border-top: 1px solid var(--border);
}

.h-profile-wrap {
    position: relative;
}
.h-profile {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.h-profile-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
/* 프로필 이미지 아바타 — 컨테이너를 꽉 채우고 원형 유지(이니셜/IMG 폴백은 그대로) */
.h-profile-img img,
.my-nav-avatar img,
.my-profile-avatar img,
.exp-card-avatar img,
.profile-page-avatar img,
.side-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.h-profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    overflow: hidden;
}
.h-profile-dropdown.show {
    display: block;
}
.h-profile-info {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.h-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.h-profile-dropdown a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text) !important;
    transition: background 0.15s;
}
.h-profile-dropdown a:hover {
    background: var(--surface-alt);
    color: var(--terra) !important;
}
.h-profile-dropdown a + a {
    border-top: 1px solid var(--border);
}

/* 알림 벨 */
.h-bell-wrap {
    position: relative;
}
.h-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.h-bell:hover {
    background: var(--surface-alt);
    color: var(--indigo-ink);
}
.h-bell-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--terra);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.h-bell-badge[hidden] {
    display: none;
}
.h-bell-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 100;
    overflow: hidden;
}
.h-bell-dropdown.show {
    display: block;
}
.h-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}
.h-bell-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.h-bell-readall {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    font-family: var(--font);
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.15s;
}
.h-bell-readall:hover {
    color: var(--terra);
}
.h-bell-list {
    max-height: 360px;
    overflow-y: auto;
}
.h-bell-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text-cap);
}
.h-bell-item {
    display: block;
    padding: 12px 16px;
    color: var(--text) !important;
    transition: background 0.15s;
}
.h-bell-item + .h-bell-item {
    border-top: 1px solid var(--border);
}
.h-bell-item:hover {
    background: var(--surface-alt);
}
.h-bell-item.unread {
    background: var(--surface-alt);
}
.h-bell-item.unread .h-bell-item-title {
    font-weight: 600;
}
.h-bell-item-title {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}
.h-bell-item-date {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-cap);
}

/* 모바일 m-nav 알림 */
.m-nav-bell-badge {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 8px;
    background: var(--terra);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.m-nav-bell-badge[hidden] {
    display: none;
}
.m-nav-bell-list .h-bell-item {
    padding: 10px 0;
}

/* Hamburger */
.ham {
    display: none;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* 내부 선은 중앙 22x16 영역에 배치 */
}

.ham span {
    position: absolute;
    left: 11px;
    width: 22px;
    height: 2px;
    background: var(--indigo-ink);   /* 아이콘 선 = 글자처럼 — 다크에서 밝게 */
    border-radius: 1px;
    transition: all 0.25s;
}

.ham span:nth-child(1) { top: 14px; }
.ham span:nth-child(2) { top: 21px; }
.ham span:nth-child(3) { top: 28px; }
.ham.on span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.ham.on span:nth-child(2) { opacity: 0; }
.ham.on span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Mobile Nav (header 바깥, backdrop-filter containing block 회피) */
.m-nav {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 16px 20px;
    z-index: 101;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0.3s;
    visibility: hidden;
}

.m-nav.on {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                visibility 0s linear 0s;
}

.m-nav a {
    display: flex;
    align-items: center;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 500;
    min-height: 48px;
    border-bottom: 1px solid var(--border);
    -webkit-tap-highlight-color: transparent;
}

.m-nav a:last-child {
    border-bottom: none;
}

.m-nav a:active {
    color: var(--terra);
}

/* ===== Hero Slider ===== */
.hero-sec {
    margin-bottom: 20px;
}

.hero-slider {
    position: relative;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    overflow: hidden;
    margin-bottom: 0;
}

.hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hero-slide {
    min-width: 100%;
    position: relative;
    cursor: pointer;
}

.hero-slide-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.hero-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slide-img .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.3);
    font-size: 14px;
    letter-spacing: 0.1em;
}

.hero-slide:nth-child(1)  .ph { background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-mid) 60%, var(--terra) 100%); }
.hero-slide:nth-child(2)  .ph { background: linear-gradient(135deg, #1a3a2a 0%, #2d6b4e 60%, #4a9e6f 100%); }
.hero-slide:nth-child(3)  .ph { background: linear-gradient(135deg, #3a1a1a 0%, #6b2d2d 60%, #9e4a4a 100%); }
.hero-slide:nth-child(4)  .ph { background: linear-gradient(135deg, #1a2a3a 0%, #2d4e6b 60%, #4a6f9e 100%); }
.hero-slide:nth-child(5)  .ph { background: linear-gradient(135deg, #2a1a3a 0%, #5a3d73 60%, #8a6faa 100%); }
.hero-slide:nth-child(6)  .ph { background: linear-gradient(135deg, #1a2a2a 0%, #2d5e5e 60%, #4a8e8e 100%); }
.hero-slide:nth-child(7)  .ph { background: linear-gradient(135deg, #3a2a1a 0%, #6b5e2d 60%, #9e8e4a 100%); }
.hero-slide:nth-child(8)  .ph { background: linear-gradient(135deg, var(--indigo) 0%, #3D2D6B 60%, #6B4A9E 100%); }
.hero-slide:nth-child(9)  .ph { background: linear-gradient(135deg, #3a1a2a 0%, #6b2d4e 60%, #9e4a6f 100%); }
.hero-slide:nth-child(10) .ph { background: linear-gradient(135deg, #1a3a3a 0%, #2d6b6b 60%, #4a9e9e 100%); }

.hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.15) 82%, transparent 100%);
    padding: 72px 32px 28px;
}

.hero-cat {
    font-size: 14px;
    font-weight: 600;
    color: var(--terra-soft);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.hero-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.hero-desc {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-meta {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

.hero-meta strong {
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

/* Slider Arrows */
.hero-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.hero-arr:hover {
    background: rgba(255,255,255,0.3);
}

.hero-arr.prev { left: 12px; }
.hero-arr.next { right: 12px; }

/* ===== Hero Thumbnail Strip ===== */
.hero-thumbs {
    display: flex;
    background: var(--surface-alt);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--border);
    border-top: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

.hero-thumbs::-webkit-scrollbar {
    display: none;
}

.hero-thumb {
    display: block;
    padding: 10px 12px;
    width: calc(100% / 5);
    min-width: calc(100% / 5);
    flex-shrink: 0;
    cursor: pointer;
    background: var(--surface-alt);
    border: none;
    border-right: 1px solid var(--border);
    text-align: left;
    font-family: inherit;
    transition: background 0.2s;
    position: relative;
    overflow: hidden;
}

.hero-thumb:last-child {
    border-right: none;
}

.hero-thumb:hover {
    background: var(--indigo-pale);
}

.hero-thumb.on {
    background: var(--indigo-pale);
}

.hero-thumb-img {
    display: none;
}

.hero-thumb-body {
    min-width: 0;
    height: 52px;
    overflow: hidden;
}

.hero-thumb-cat {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--terra);
    margin-bottom: 2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-thumb-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-sub);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
}

.hero-thumb.on .hero-thumb-title {
    color: var(--indigo-ink);
    font-weight: 600;
}

/* Progress bar */
.hero-thumb-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--terra);
}

.hero-thumb.on .hero-thumb-progress {
    animation: thumbProgress 5s linear forwards;
}

@keyframes thumbProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* ===== 2-Column Layout ===== */
.page-body {
    padding: 24px 0 48px;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
    align-items: start;
}

.left-col,
.main-col {
    min-width: 0;
}

/* ===== Section Common ===== */
.sec {
    margin-bottom: 32px;
}

.sec:last-child {
    margin-bottom: 0;
}

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.sec-t {
    font-size: 20px;
    font-weight: 600;
    color: var(--indigo-ink);
}

.sec-more {
    font-size: 14px;
    color: var(--text-cap);
    transition: color 0.15s;
}

.sec-more:hover {
    color: var(--terra);
}

/* ===== Column Tabs ===== */
.col-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.col-tab {
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-cap);
    border-radius: 16px;
    transition: all 0.15s;
}

.col-tab:hover {
    color: var(--text);
    background: var(--surface-alt);
}

.col-tab.on {
    color: #fff;
    background: var(--indigo);
}

/* ===== Column List Items ===== */
.col-item {
    display: flex;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    text-decoration: none;
    color: var(--text);
}

.col-item + .col-item {
    border-top: 1px solid var(--border);
}

.col-thumb {
    width: 200px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 6px;
    overflow: hidden;
}

.col-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.col-thumb .ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--indigo-pale) 0%, #E0DDD6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-cap);
    font-size: 11px;
}

.col-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.col-body > .badge-sm {
    align-self: flex-start;
    margin-bottom: 6px;
}

.col-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    margin-bottom: 6px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.col-excerpt {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.5;
    min-height: calc(14px * 1.5 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.col-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.col-author {
    font-size: 13.5px;
    color: var(--text-sub);
}

.col-stats {
    font-size: 13px;
    color: var(--text-cap);
}

/* ===== Right Column ===== */
.right-col,
.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 68px;
}

.r-box {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.r-box:last-child {
    margin-bottom: 0;
}

.r-box-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.r-box-t {
    font-size: 16px;
    font-weight: 600;
    color: var(--indigo-ink);
}

.r-box-more {
    font-size: 13px;
    color: var(--text-cap);
    transition: color 0.15s;
}

.r-box-more:hover {
    color: var(--terra);
}

/* Hot Items (Sidebar) */
.r-hot-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: var(--text);
    transition: opacity 0.15s;
    min-width: 0;
}
.r-hot-item:hover {
    opacity: 0.7;
}
.r-hot-item + .r-hot-item {
    border-top: 1px solid var(--border);
}
.r-hot-num {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--terra);
    min-width: 16px;
}
.r-hot-title {
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 칼럼 사이드바 CTA 버튼 */
/* 칼럼 페이지 사이드바 — 인기칼럼 헤더를 좌측 col-main-head와 수평 정렬 */
#columnPage .right-col .r-box {
    padding-top: 0;
    background: transparent;
}
#columnPage .right-col .r-box-head {
    padding-top: 0;
    margin-top: 0;
}

.col-cta-btn {
    display: block;
    text-align: center;
    padding: 12px;
    margin-top: 16px;
    background: var(--indigo);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s;
}
.col-cta-btn:hover {
    background: var(--indigo-mid);
}

/* News List (Right) */
.r-news {
    display: block;
    padding: 8px 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.r-news:hover {
    opacity: 0.7;
}

.r-news + .r-news {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

/* 커뮤니티 빈 상태 (홈 우측 — 글 없을 때 가입/글쓰기 유도) */
.r-community-empty { padding: 20px 8px 8px; text-align: center; }
.r-ce-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.r-ce-desc { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; margin: 0 0 14px; }
.r-community-empty .btn { width: 100%; }
.r-ce-login { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--text-cap); text-decoration: none; }
.r-ce-login:hover { color: var(--indigo-ink); text-decoration: underline; }

.r-news-cat {
    font-size: 13px;
    font-weight: 600;
    color: var(--terra);
    margin-bottom: 2px;
}

.r-news-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.r-news-meta {
    font-size: 13px;
    color: var(--text-cap);
}

.r-news-meta span + span::before {
    content: '·';
    margin: 0 4px;
}

/* Event List (Right) */
.r-evt {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    transition: opacity 0.15s;
    color: inherit;
    text-decoration: none;
}

.r-evt:hover {
    opacity: 0.7;
}

.r-evt + .r-evt {
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.r-evt-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.r-evt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r-evt-thumb .ph {
    width: 100%;
    height: 100%;
    background: var(--indigo-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-cap);
}

.r-evt-body {
    flex: 1;
    min-width: 0;
}

.r-evt-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.r-evt-date {
    font-size: 13px;
    color: var(--text-cap);
}

.r-evt-date em {
    font-style: normal;
    color: var(--terra);
    font-weight: 500;
}

/* Ranking (Right) */
.r-rank {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
}

.r-rank + .r-rank {
    border-top: 1px solid var(--border);
    padding-top: 7px;
}

.r-rank-num {
    width: 22px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-cap);
}

.r-rank:nth-child(-n+3) .r-rank-num {
    color: var(--terra);
}

.r-rank-info {
    flex: 1;
}

.r-rank-name {
    font-size: 15px;
    font-weight: 500;
}

.r-rank-detail {
    font-size: 13px;
    color: var(--text-cap);
}

.r-rank-pts {
    font-size: 15px;
    font-weight: 600;
    color: var(--indigo-ink);
}

/* ===== Footer ===== */
.footer {
    border-top: 1px solid var(--border);
    padding: 32px 0;
    background: var(--surface-alt);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.f-brand {
    font-size: 17px;
    font-weight: 700;
    color: var(--indigo-ink);
    margin-bottom: 6px;
}

.f-brand b {
    color: var(--terra);
}

.f-desc {
    font-size: 14px;
    color: var(--text-cap);
    line-height: 1.6;
    max-width: 260px;
}

.f-links {
    display: flex;
    gap: 40px;
}

.f-group h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.f-group li + li {
    margin-top: 5px;
}

.f-group a {
    font-size: 14px;
    color: var(--text-cap);
    transition: color 0.15s;
}

.f-group a:hover {
    color: var(--terra);
}

.f-bottom {
    padding-top: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-cap);
}

.f-social {
    display: flex;
    gap: 12px;
}

.f-social a {
    color: var(--text-cap);
    transition: color 0.15s;
}

.f-social a:hover {
    color: var(--terra);
}

/* ===== Form Elements ===== */
.form-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 14.5px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s;
}

.form-input:focus {
    outline: none;
    border-color: var(--indigo-fill);
}

.form-input::placeholder {
    color: var(--text-cap);
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all 0.15s;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--terra);
    color: #fff;
}

.btn-primary:hover {
    background: var(--terra-hover);
}

.btn-secondary {
    background: var(--indigo-pale);
    color: var(--indigo-ink);
}

.btn-secondary:hover {
    background: #E0DCF0;
}

.btn-white {
    background: #fff;
    color: var(--indigo-ink);
}
.btn-white:hover {
    background: rgba(255,255,255,0.9);
}

/* ===== Page Header (Sub Pages) ===== */
.page-head {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    padding: 28px 0;
    margin-bottom: 24px;
}

.page-head-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--indigo-ink);
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.page-head-desc {
    font-size: 15px;
    color: var(--text-sub);
}

.page-head--slim {
    padding: 20px 0 16px;
    margin-bottom: 0;
    border-bottom: none;
}

/* ===== Pick Slider (추천 칼럼 / 인기 뉴스 공용) ===== */
.pick-slider-sec {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    padding: 0 0 24px;
    margin-bottom: 24px;
}
.pick-slider-head {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 0 12px;
}
.pick-sort-tabs {
    display: flex;
    gap: 6px;
}
.pick-sort-tab {
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}
.pick-sort-tab:hover {
    background: var(--indigo-pale);
    color: var(--indigo-ink);
}
.pick-sort-tab.on {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}
.pick-slider {
    position: relative;
}
.pick-viewport {
    overflow: hidden;
}
.pick-track {
    display: flex;
    gap: 16px;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pick-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.pick-card:hover {
    box-shadow: 0 4px 16px rgba(43,30,84,0.1);
    transform: translateY(-2px);
}
.pick-card-img {
    width: 100%;
    height: 140px;
    background: var(--surface-alt);
    overflow: hidden;
}
.pick-card-img .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-muted);
    background: #e8e4f0;
}
.pick-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.pick-card-body .badge-sm {
    align-self: flex-start;
}
.pick-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pick-card-excerpt {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.pick-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.pick-card-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pick-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
}

/* 뉴스 오버레이 카드 */
.pick-card--overlay {
    position: relative;
    border: none;
    background: #1a1a2e;
}
.pick-card-img--tall {
    height: 100%;
    position: absolute;
    inset: 0;
}
.pick-card-img--tall .ph {
    background: linear-gradient(135deg, var(--indigo) 0%, #1a1a2e 100%);
    color: rgba(255,255,255,0.3);
}
.pick-card--overlay {
    min-height: 280px;
}
.pick-card-overlay {
    position: relative;
    z-index: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);
}
.pick-card-overlay-cat {
    font-size: 12px;
    font-weight: 600;
    color: var(--terra-light, #e8836e);
    margin-bottom: 6px;
}
.pick-card-overlay-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.pick-card-overlay-excerpt {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}
.pick-card-overlay-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
}

/* 슬라이더 화살표 */
.pick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.95);
    font-size: 22px;
    line-height: 1;
    color: var(--text-sub);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pick-arrow:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    color: var(--indigo-ink);
}
.pick-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.pick-prev { left: -18px; }
.pick-next { right: -18px; }

/* 반응형 */
@media (max-width: 1024px) {
    .pick-card {
        flex: 0 0 calc((100% - 32px) / 3);
    }
    .pick-prev { left: -12px; }
    .pick-next { right: -12px; }
}
@media (max-width: 768px) {
    .pick-card {
        flex: 0 0 calc((100% - 16px) / 2);
    }
    .pick-card--overlay { min-height: 240px; }
    .pick-arrow { width: 30px; height: 30px; font-size: 17px; }
    .pick-prev { left: -6px; }
    .pick-next { right: -6px; }
}
@media (max-width: 480px) {
    .pick-card {
        flex: 0 0 calc(100% - 32px);
    }
    .pick-card--overlay { min-height: 220px; }
}

/* 중형 — 상단 3개, 카드형 */
.bento-md {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
}

/* 소형 — 하단 3개, 압축형 */
.bento-sm {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, background 0.15s;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}
@keyframes bentoIn {
    to { opacity: 1; transform: translateY(0); }
}

/* 반응형 */
@media (max-width: 768px) {
    .news-bento {
        grid-template-columns: 1fr 1fr;
    }
    .bento-md:last-of-type {
        grid-column: 1 / -1;
    }
    .bento-sm:last-of-type {
        grid-column: 1 / -1;
    }
}

/* ===== News Submit Widget (사이드바) ===== */
.news-submit-body {
    margin-bottom: 12px;
}
.news-submit-desc {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 12px;
}
.news-submit-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.news-submit-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: var(--font);
    transition: border-color 0.15s;
}
.news-submit-input:focus {
    border-color: var(--indigo-soft);
}
.news-submit-btn {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--terra);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font);
    transition: background 0.15s;
}
.news-submit-btn:hover {
    background: var(--terra-hover);
}
.news-submit-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.news-submit-note {
    font-size: 11px;
    color: var(--text-cap);
    line-height: 1.5;
    margin-top: 8px;
}

/* Sidebar Ad Banner */
.r-ad-banner {
    margin-bottom: 16px;
}
.r-ad-link {
    display: block;
    text-decoration: none;
    border-radius: var(--radius);
    overflow: hidden;
}
.r-ad-placeholder {
    width: 100%;
    height: 250px;
    background: var(--surface-alt);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-cap);
    letter-spacing: 2px;
}

/* ===== Events Hero Slider ===== */
.evt-hero {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    max-width: 100%;
}
.evt-hero-slider {
    overflow: hidden;
    width: 100%;
}
.evt-hero-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.evt-hero-slide {
    min-width: 100%;
    display: flex;
}
.evt-hero-img {
    flex-shrink: 0;
    aspect-ratio: 3 / 4.2;
    height: 380px;
    overflow: hidden;
    border-radius: var(--radius);
}
.evt-hero-img .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.25);
    font-size: 14px;
    letter-spacing: 0.1em;
}
.evt-hero-slide:nth-child(1) .ph { background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-mid) 60%, var(--terra) 100%); }
.evt-hero-slide:nth-child(2) .ph { background: linear-gradient(135deg, #1a2a3a 0%, #2d4e6b 60%, #4a6f9e 100%); }
.evt-hero-slide:nth-child(3) .ph { background: linear-gradient(135deg, #2a1a3a 0%, #5a3d73 60%, #8a6faa 100%); }
.evt-hero-slide:nth-child(4) .ph { background: linear-gradient(135deg, #3a2a1a 0%, #6b5e2d 60%, #9e8e4a 100%); }
.evt-hero-slide:nth-child(5) .ph { background: linear-gradient(135deg, #3a1a2a 0%, #6b2d4e 60%, #9e4a6f 100%); }

/* 우측 정보 영역 */
.evt-hero-info {
    flex: 1;
    min-width: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.evt-hero-info-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.evt-hero-img { display: block; }
.evt-hero-title-link { text-decoration: none; display: block; margin-bottom: 14px; }
.evt-hero-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color 0.15s;
}
.evt-hero-title-link:hover .evt-hero-title { color: var(--indigo-ink); }
.evt-hero-dl {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.evt-hero-dl-row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.evt-hero-dl-row dt {
    flex-shrink: 0;
    width: 36px;
    color: var(--text-sub);
    font-weight: 500;
}
.evt-hero-dl-row dd {
    color: var(--text);
}
.evt-hero-desc {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.evt-hero-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    gap: 12px;
}
.evt-hero-date-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.evt-hero-date-label {
    color: var(--text-sub);
    font-weight: 500;
}
.evt-hero-date-value {
    color: var(--text);
}
.evt-hero-dday {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 6px 14px;
    background: var(--terra);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: -0.02em;
}
.evt-hero-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: calc(380px * 3 / 4.2);
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.evt-hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.evt-hero-dot.on {
    background: var(--indigo);
    transform: scale(1.25);
}
.r-box--flush .r-box-head {
    padding: 12px 16px 10px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .evt-hero-slide { flex-direction: column; }
    /* 히어로 포스터: 모바일에서도 세로형(3/4.2) 유지, 중앙 정렬·폭 제한 */
    .evt-hero-img { height: auto; width: 100%; max-width: 220px; margin: 0 auto; aspect-ratio: 3 / 4.2; }
    .evt-hero-title { font-size: 18px; }
    .evt-hero-info { padding: 20px; }
    .evt-hero-dday { font-size: 13px; padding: 5px 10px; min-width: 48px; }
}

/* ===== Sidebar Schedule List ===== */
.r-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.r-schedule-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
}
.r-schedule-item:hover .r-schedule-title { color: var(--terra); }
.r-schedule-title { transition: color 0.15s; }
.r-schedule-item + .r-schedule-item {
    border-top: 1px solid var(--border);
}
.r-schedule-left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 52px;
}
.r-schedule-left .badge-sm {
    font-size: 11px;
    padding: 1px 6px;
}
.r-schedule-dday {
    font-size: 14px;
    font-weight: 700;
    color: var(--terra);
}

.r-schedule-filter {
    display: flex;
    gap: 2px;
}

.r-schedule-filter-btn {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-cap);
    background: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.r-schedule-filter-btn:hover {
    color: var(--text);
    border-color: var(--text-cap);
}

.r-schedule-filter-btn.on {
    color: #fff;
    background: var(--indigo);
    border-color: var(--indigo);
}
.r-schedule-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.r-schedule-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-schedule-meta {
    font-size: 12px;
    color: var(--text-cap);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.r-rank-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    flex-shrink: 0;
}
.r-rank-num.top {
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
}
.r-rank-info {
    flex: 1;
    min-width: 0;
}
.r-rank-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: block;
}
.r-rank-pts {
    font-size: 14px;
    font-weight: 700;
    color: var(--terra);
    flex-shrink: 0;
}

/* ===== Community v9: Trending Bar (탭 아래 하위 필터) ===== */
.cm-trending {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-md);
}
.cm-trending-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--terra);
    white-space: nowrap;
    flex-shrink: 0;
}
.cm-trending-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cm-trending-chips::-webkit-scrollbar { display: none; }
.cm-tag-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    background: var(--indigo-pale);
    color: var(--indigo-ink);
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cm-tag-chip:hover {
    background: var(--indigo);
    color: #fff;
}
.cm-tag-chip.on {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}

/* ===== Community v6: HOT Section ===== */
.hot-label {
    display: inline-block;
    background: var(--terra);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}
.hot-desc {
    font-size: 14px;
    color: var(--text-sub);
    font-weight: 500;
}
/* ===== Community v8: Board Type Tabs ===== */
.cm-board-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cm-board-tabs::-webkit-scrollbar { display: none; }
.cm-board-tab {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
}
.cm-board-tab:hover { color: var(--text); }
.cm-board-tab.on {
    color: var(--indigo-ink);
    border-bottom-color: var(--indigo);
    font-weight: 600;
}

/* Board label in card title */
.cm-board-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 6px;
    letter-spacing: -0.02em;
}
/* 축적형 — indigo 계열 */
.cm-board-label--qna { background: #ede9f6; color: var(--indigo-ink); }
.cm-board-label--review { background: #e8f5e9; color: #2e7d32; }
.cm-board-label--tip { background: #fff3e0; color: #e65100; }
.cm-board-label--video { background: #e3f2fd; color: #1565c0; }
/* 휘발형 — gray 계열 */
.cm-board-label--free { background: var(--bg-light); color: var(--text-light); }
.cm-board-label--meetup { background: #fce4ec; color: #c62828; }
.cm-board-label--market { background: #f3e5f5; color: #7b1fa2; }

/* ===== Community v9: Toolbar (탭 + 검색/정렬/글쓰기) ===== */
.cm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
}
.cm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
/* 검색 토글 (오버레이 방식) */
.cm-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cm-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s, color .15s;
    z-index: 2;
}
.cm-search-toggle:hover { background: var(--bg-light); color: var(--text); }
.cm-search-input {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    padding: 0;
    border: none;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text);
    background: var(--surface);
    overflow: hidden;
    opacity: 0;
    transition: width .2s, padding .2s, border .2s, opacity .2s;
    z-index: 1;
}
.cm-search-input.open {
    width: 200px;
    padding: 6px 10px 6px 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    opacity: 1;
}
.cm-search-input.open:focus { width: 240px; border-color: var(--indigo-fill); outline: none; }
/* 글쓰기 버튼 */
.cm-write-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: #fff;
    background: var(--indigo);
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
}
.cm-write-btn:hover { background: var(--indigo-hover); }
/* 정렬 드롭다운 */
.cm-sort-select {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-sub);
    background: var(--surface);
    cursor: pointer;
}

/* ===== Community v6: Feed Cards ===== */
.cm-feed {
    margin-bottom: var(--sp-lg);
}
.cm-card {
    display: flex;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.cm-card:first-child { padding-top: 0; }

/* 좋아요 버튼 */
.cm-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-cap);
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    transition: color 0.15s;
    margin-left: auto;
}
.cm-like-btn:hover { color: var(--terra); }
.cm-like-btn.liked { color: var(--terra); }
.cm-like-btn.liked svg { fill: var(--terra); }
.cm-like-count {
    font-weight: 600;
}

/* 카드 본문 */
.cm-card-body {
    flex: 1;
    min-width: 0;
}
.cm-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.cm-card-tag {
    font-size: 11px;
    font-family: var(--font);
    padding: 2px 8px;
    border-radius: 4px;
    border: none;
    background: var(--indigo-pale);
    color: var(--indigo-ink);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.cm-card-tag:hover { background: var(--indigo); color: #fff; }
.cm-card-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
}
.cm-card-title a { color: var(--text); text-decoration: none; }
.cm-card-title a:hover { color: var(--terra); }
.cm-card-comment-count {
    color: var(--terra);
    font-size: 13px;
    font-weight: 500;
    margin-left: 4px;
}
.cm-card-excerpt {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 8px;
}

/* 카드 메타 */
.cm-card-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-cap);
    align-items: center;
}
.cm-card-author {
    font-weight: 500;
    color: var(--text);
}
.cm-card-sep {
    width: 1px;
    height: 12px;
    background: var(--border);
}

/* ===== Community v7: Mobile FAB ===== */
.cm-fab {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--terra);
    color: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(196, 87, 58, 0.4);
    z-index: 90;
    text-decoration: none;
}

/* ===== Community v9: Responsive 768px ===== */
@media (max-width: 768px) {
    .cm-toolbar { flex-wrap: wrap; gap: 4px; }
    .cm-board-tabs { width: 100%; }
    .cm-board-tab { padding: 8px 12px; font-size: 13px; min-height: 40px; }
    .cm-write-btn { display: none; }
    .cm-toolbar-right { width: 100%; justify-content: flex-end; padding-bottom: 8px; }
    .cm-search-input.open { width: 160px; }
    .cm-search-input.open:focus { width: 180px; }
    .cm-trending { padding: 8px 0; }
    .cm-card { flex-wrap: wrap; gap: var(--sp-sm); }
    .cm-card-body { width: 100%; }
    .cm-card-excerpt { -webkit-line-clamp: 2; }
    .cm-card-meta { flex-wrap: wrap; }
    .cm-fab { display: flex; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    .cm-tag-chip { padding: 6px 14px; min-height: 36px; display: inline-flex; align-items: center; }
}

/* ===== Community v9: Responsive 480px ===== */
@media (max-width: 480px) {
    .cm-trending-label { font-size: 11px; }
    .cm-tag-chip { font-size: 12px; padding: 4px 10px; }
    .cm-board-tab { padding: 6px 10px; font-size: 12px; }
    .cm-sort-select { font-size: 12px; padding: 4px 8px; }
    .cm-board-label { font-size: 10px; padding: 1px 5px; }
    .cm-card { gap: var(--sp-xs); padding: var(--sp-sm) 0; }
    .cm-card-title { font-size: 15px; }
    .cm-card-excerpt { font-size: 13px; -webkit-line-clamp: 2; margin-bottom: 6px; }
    .cm-card-tags { gap: 3px; }
    .cm-card-tag { font-size: 11px; padding: 2px 6px; }
    .cm-card-meta { font-size: 11px; gap: 6px; }
    .cm-fab { width: 50px; height: 50px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
}

/* ===== Ad Banners (Sidebar) ===== */
.ad-box {
    margin-bottom: 16px;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Premium Ad (slider) */
.ad-box--premium {
    position: relative;
}
.ad-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.ad-slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.ad-slide {
    min-width: 100%;
    box-sizing: border-box;
}
.ad-slide--premium {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 180px;
    color: #fff;
}
.ad-slide-content {
    flex: 1;
}
.ad-slide-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
}
.ad-slide-desc {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0;
}
.ad-slide-link {
    align-self: flex-start;
    display: inline-block;
    margin-top: auto;
    padding: 7px 16px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s;
}
.ad-slide-link:hover {
    background: rgba(255,255,255,0.35);
}
.ad-slider-dots {
    position: absolute;
    bottom: 12px;
    right: 16px;
    display: flex;
    gap: 5px;
}
.ad-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.ad-slider-dot.on {
    background: #fff;
}

/* Standard Ad (fixed banner) */
.ad-box--standard {
    border: 1px solid var(--border);
}
.ad-banner-standard {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.ad-banner-img {
    aspect-ratio: 32/9;
    overflow: hidden;
}
.ad-banner-img .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-alt);
    color: var(--text-cap);
    font-size: 12px;
    letter-spacing: 0.1em;
}
.ad-banner-title {
    display: block;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* Basic Ad (text links) */
.ad-box--basic {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.ad-basic-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.ad-basic-label {
    font-size: 12px;
    color: var(--text-cap);
    font-weight: 500;
}
.ad-basic-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ad-basic-item {
    display: block;
    padding: 7px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    text-decoration: none;
    transition: color 0.15s;
}
.ad-basic-item:hover {
    color: var(--indigo-ink);
}
.ad-basic-item + .ad-basic-item {
    border-top: 1px solid var(--border);
}

/* ===== Education Tags Bar ===== */
/* ===== Education v2: Hero ===== */
/* ===== Education v5: Top Block (3D 캐러셀 + 인기 리스트) ===== */
.edu-top-block {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
}
/* 좌: 캐러셀 (평면 우→좌 순환) */
.edu-top-left {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.edu-carousel {
    position: relative;
    padding: 20px 0;
    overflow: hidden;
}
.edu-carousel-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: eduScroll 30s linear infinite;
    --scroll-w: 0px;
}
@keyframes eduScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(var(--scroll-w) * -1)); }
}
.edu-carousel-card {
    flex: 0 0 240px;
    text-decoration: none;
    color: inherit;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.25s;
}
.edu-carousel-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}
/* 썸네일 */
.edu-carousel-card-thumb {
    position: relative;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edu-carousel-card-thumb .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: rgba(255,255,255,0.4);
}
.edu-carousel-card:nth-child(1) .ph { background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-mid) 60%, var(--terra) 100%); }
.edu-carousel-card:nth-child(2) .ph { background: linear-gradient(135deg, #1a2a3a 0%, #2d4e6b 60%, #4a6f9e 100%); }
.edu-carousel-card:nth-child(3) .ph { background: linear-gradient(135deg, #2a1a3a 0%, #5a3d73 60%, #8a6faa 100%); }
.edu-carousel-card:nth-child(4) .ph { background: linear-gradient(135deg, #3a2a1a 0%, #6b5e2d 60%, #9e8e4a 100%); }
.edu-carousel-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #2e7d32;
    border-radius: 4px;
}
/* 본문 */
.edu-carousel-card-body {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.edu-carousel-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--terra);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
.edu-carousel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-carousel-desc {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}
.edu-carousel-instructor {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-sub);
    margin-top: auto;
}
.edu-carousel-instructor strong {
    color: var(--text);
    font-weight: 600;
}
/* 하단 */
.edu-carousel-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    font-size: 12px;
    color: var(--text-cap);
}
.edu-carousel-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.edu-carousel-price--free {
    color: #2e7d32;
}
/* hover 시 일시정지 시각 피드백 */
.edu-carousel:hover .edu-carousel-track {
    animation-play-state: paused;
}

/* 우: 인기 과정 리스트 */
.edu-top-right {
    flex-shrink: 0;
    width: 280px;
    border-left: 1px solid var(--border);
    background: var(--white);
    display: flex;
    flex-direction: column;
}
.edu-top-right-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    padding: 14px 18px 0;
}
.edu-top-popular {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 18px 14px;
}
.edu-top-popular-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}
.edu-top-popular-item:last-child { border-bottom: none; }
.edu-top-popular-item:hover { opacity: 0.75; }
.edu-top-popular-rank {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--indigo-ink);
    background: var(--indigo-pale);
    border-radius: 50%;
}
.edu-top-popular-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.edu-top-popular-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.edu-top-popular-meta {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--text-sub);
}

/* (pill tabs removed — category filter moved to right sidebar) */

/* ===== Education v5: Result Bar ===== */
.edu-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.edu-result-count {
    font-size: 14px;
    color: var(--text-sub);
    font-weight: 500;
}
.edu-sort-select {
    padding: 5px 10px;
    font-size: 13px;
    font-family: var(--font);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    background: var(--surface);
    cursor: pointer;
}

/* ===== Education v5: Card Grid ===== */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.edu-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.edu-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.edu-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
.edu-card-thumb {
    height: 140px;
    background: var(--surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.edu-card-body {
    padding: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.edu-card-badges {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}
.edu-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
    color: var(--text);
}
.edu-card-outcome {
    font-size: 12px;
    color: var(--terra);
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
}
.edu-card-instructor {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-sub);
    margin-top: auto;
}
.edu-card-inst-name {
    font-weight: 600;
    color: var(--text);
}
.edu-card-inst-title {
    color: var(--text-cap);
}
.edu-role-icon {
    flex-shrink: 0;
    color: var(--indigo-ink);
}
.edu-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
}
.edu-card-meta {
    font-size: 12px;
    color: var(--text-cap);
}
.edu-card-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.edu-card-price--free {
    color: #2e7d32;
}

.edu-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-cap);
    font-size: 15px;
}

/* ===== Education v5: CTA Banner ===== */
.edu-cta {
    margin: 48px 0 32px;
}
.edu-cta-inner {
    background: linear-gradient(135deg, var(--indigo) 0%, #4A3D73 100%);
    border-radius: 12px;
    padding: 36px 40px;
    text-align: center;
    color: #fff;
}
.edu-cta-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.edu-cta-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}
.edu-cta-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--terra);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s;
}
.edu-cta-btn:hover { background: var(--terra-hover); }

/* ===== Education v5: Right Sidebar Widgets ===== */
.edu-r-cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.edu-r-cat-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font);
    color: var(--text-sub);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}
.edu-r-cat-btn:hover {
    background: var(--surface-alt);
    color: var(--text);
}
.edu-r-cat-btn.on {
    background: var(--indigo-pale);
    color: var(--indigo-ink);
    font-weight: 600;
}
.edu-r-cat-name {
    font-size: 13px;
}
.edu-r-cat-count {
    font-size: 12px;
    color: var(--text-cap);
    flex-shrink: 0;
}
.edu-r-cat-btn.on .edu-r-cat-count { color: var(--indigo-ink); }

.edu-r-instructor-cta {
    padding: 4px 0;
}
.edu-r-instructor-cta p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: 12px;
}
.edu-r-instructor-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--indigo-ink);
    background: var(--indigo-pale);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.15s;
}
.edu-r-instructor-btn:hover { background: #e0d8f0; }

/* ===== Education v5: Responsive ===== */
@media (max-width: 960px) {
    .edu-top-right { width: 240px; }
    .edu-carousel-card { flex: 0 0 210px; }
}
@media (max-width: 768px) {
    .edu-top-block { flex-direction: column; }
    .edu-carousel-card { flex: 0 0 200px; }
    .edu-top-right { width: 100%; border-left: none; border-top: 1px solid var(--border); }
    .edu-top-popular { flex-direction: row; overflow-x: auto; gap: 0; padding: 8px 18px; scrollbar-width: none; }
    .edu-top-popular::-webkit-scrollbar { display: none; }
    .edu-top-popular-item { flex-shrink: 0; min-width: 200px; border-bottom: none; border-right: 1px solid var(--border); padding: 8px 14px 8px 0; margin-right: 14px; }
    .edu-top-popular-item:last-child { border-right: none; }
    .edu-grid { grid-template-columns: 1fr 1fr; }
    .edu-cta-inner { padding: 28px 20px; }
}
@media (max-width: 480px) {
    .edu-carousel-card { flex: 0 0 180px; }
    .edu-carousel-card-thumb { height: 90px; }
    .edu-grid { grid-template-columns: 1fr; }
}

/* ===== Filter Tabs ===== */
/* ===== Page Tabs (대형 탭 내비) ===== */
.page-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border);
}

.page-tab {
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-sub);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.page-tab:hover {
    color: var(--indigo-ink);
}

.page-tab.on {
    color: var(--indigo-ink);
    font-weight: 700;
    border-bottom-color: var(--terra);
}

.filter-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-cap);
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all 0.15s;
    display: inline-block;
}

.filter-tab:hover {
    color: var(--text);
    border-color: var(--text-cap);
}

.filter-tab.on {
    color: #fff;
    background: var(--indigo-fill);
    border-color: var(--indigo-fill);
}

/* ===== Event Row List (좌 포스터 + 우 내용) ===== */
.evt-row-list {
    display: flex;
    flex-direction: column;
}

.evt-row {
    display: flex;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    text-decoration: none;
    color: var(--text);
}

.evt-row + .evt-row {
    border-top: 1px solid var(--border);
}

.evt-row-poster {
    width: 180px;
    flex-shrink: 0;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-alt);
}

.evt-row-poster .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-cap);
    background: linear-gradient(135deg, var(--indigo-pale) 0%, #E0DDD6 100%);
}

.evt-row-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evt-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.evt-row-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.evt-row-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.evt-row-desc {
    font-size: 13.5px;
    color: var(--text-sub);
    line-height: 1.5;
    min-height: calc(13.5px * 1.5 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.evt-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.evt-row-dday {
    font-size: 13px;
    font-weight: 700;
    color: var(--terra);
    flex-shrink: 0;
}

.evt-row-info {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}

.evt-row-info > div {
    display: flex;
    gap: 6px;
}

.evt-row-info dt {
    flex-shrink: 0;
    width: 32px;
    color: var(--text-cap);
    font-weight: 500;
}

.evt-row-info dd {
    color: var(--text-sub);
}

/* 종료된 이벤트 */
.evt-row--ended {
    opacity: 0.45;
}

.evt-row--ended:hover {
    opacity: 0.65;
}

/* 주최·주관 링크 */
.evt-org-link {
    color: var(--indigo-ink);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.15s;
}

.evt-row:hover .evt-org-link {
    text-decoration-color: var(--indigo);
}

/* 정렬 바 */
.evt-sort-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--sp-md);
}

/* 전문단체 건물 아이콘 */
.org-icon {
    vertical-align: -3px;
    margin-left: 4px;
}

@media (max-width: 768px) {
    .evt-row-poster {
        width: 120px;
    }

    /* 히어로 하단: 날짜+D-day 줄바꿈 허용 */
    .evt-hero-bottom {
        flex-wrap: wrap;
    }
    .evt-hero-date-value {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* 이벤트 행 정보 텍스트 줄바꿈 */
    .evt-row-info dd {
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
    }

    /* 대회 결과 테이블 모바일: 소속 숨김 + 컬럼 축소 */
    .comp-result-table .col-rank { width: 44px; }
    .comp-result-table .col-lap { width: 80px; }
}

@media (max-width: 480px) {
    /* 이벤트 행: 포스터 세로형(3/4) 유지 + 가로 배치(좌 포스터 / 우 정보) 유지 */
    .evt-row {
        flex-direction: row;
        gap: 12px;
    }
    .evt-row-poster {
        width: 96px;
        aspect-ratio: 3 / 4;
    }

    /* 대회 결과 테이블: 소속 컬럼 숨김 */
    .comp-result-table .col-team { display: none; }
    .comp-result-table .col-rank { width: 36px; padding: 8px 6px; }
    .comp-result-table .col-lap { width: auto; padding: 8px 6px; }
}

/* ===== List Card ===== */
.list-card {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    cursor: pointer;
    transition: opacity 0.15s;
}

.list-card:hover {
    opacity: 0.75;
}

.list-card + .list-card {
    border-top: 1px solid var(--border);
}

.list-card-thumb {
    width: 140px;
    height: 96px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
}

.list-card-thumb .ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--indigo-pale) 0%, #E0DDD6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-cap);
    font-size: 12px;
}

.list-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.list-card-cat {
    font-size: 13px;
    font-weight: 600;
    color: var(--terra);
    margin-bottom: 4px;
}

.list-card-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-card-excerpt {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.5;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-card-meta {
    font-size: 13px;
    color: var(--text-cap);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.list-card-meta strong {
    font-weight: 500;
    color: var(--text-sub);
}

.list-card-meta span + span::before {
    content: '·';
    margin-right: 8px;
}

.grid-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
}

.grid-card:hover {
    border-color: var(--indigo-soft);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.grid-card-thumb .ph {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--indigo-pale) 0%, #E0DDD6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-cap);
    font-size: 12px;
}

.badge-sm {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.badge-indigo {
    background: var(--indigo-pale);
    color: var(--indigo-ink);
}

.badge-terra {
    background: var(--terra-bg);
    color: var(--terra);
}

.badge-green {
    background: var(--green-bg);
    color: var(--green-ink);
}

.badge-gray {
    background: var(--surface-alt);
    color: var(--text-sub);
}

.grid-card-footer .price {
    font-weight: 600;
    color: var(--indigo-ink);
}

.grid-card-footer .rating {
    color: var(--terra);
    font-weight: 500;
}

/* ===== Table ===== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.data-table th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-sub);
    text-align: left;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
}

.data-table td {
    padding: 12px 16px;
    font-size: 15px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--surface-alt);
}

.rank-num {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-cap);
    width: 30px;
    text-align: center;
    display: inline-block;
}

.rank-num.top { color: var(--terra); }

.player-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--indigo-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--indigo-ink);
}

.player-name-main {
    font-weight: 500;
}

.player-name-sub {
    font-size: 13px;
    color: var(--text-cap);
}

/* ===== 대회 기록 카드 ===== */
.comp-results-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comp-result-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.comp-result-head {
    padding: 16px 20px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.comp-result-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp-result-title h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.comp-result-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-cap);
    flex-shrink: 0;
}

.comp-result-body {
    padding: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.comp-result-table {
    margin: 0;
    border-radius: 0;
}

/* 대회 결과 테이블 컬럼 */
.comp-result-table .col-rank {
    width: 60px;
    text-align: center;
}
.comp-result-table .col-lap {
    width: 100px;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.comp-result-table .col-team {
    color: var(--text-sub);
}

.comp-result-table thead th {
    background: var(--surface);
}

.comp-result-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-cap);
    font-size: 14px;
}

/* 사이드바 최근 대회 결과 */
.r-comp-recent {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.r-comp-item {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.r-comp-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.r-comp-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.r-comp-winners {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.r-comp-winner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.r-comp-winner-name {
    flex: 1;
    color: var(--text-sub);
}

.r-comp-winner-lap {
    color: var(--text-cap);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

@media (max-width: 768px) {
    .comp-result-head {
        flex-direction: column;
        gap: 6px;
    }
    .comp-result-meta {
        flex-direction: column;
        gap: 2px;
    }
}

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 28px;
}

.pg-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-sub);
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    transition: all 0.15s;
}

.pg-btn:hover:not(:disabled):not(.on) {
    border-color: var(--indigo);
    color: var(--indigo-ink);
}

.pg-btn.on {
    background: var(--indigo-fill);
    border-color: var(--indigo-fill);
    color: #fff;
}

.pg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== CTA Banner ===== */
.cta-banner {
    background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-mid) 100%);
    border-radius: var(--radius);
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}

.cta-banner-text h3 {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.cta-banner-text p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
}

.cta-banner .btn {
    flex-shrink: 0;
}

/* ===== Info Box ===== */
.info-box {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-top: 24px;
}

.info-box h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--indigo-ink);
    margin-bottom: 12px;
}

.info-box-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.info-box-grid dt {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.info-box-grid dd {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.6;
}

/* ===== Table Wrapper (모바일 가로 스크롤) ===== */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Sidebar Tab Menu ===== */
.r-tab-menu {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin: -4px -4px 12px;
}

.r-tab-btn {
    flex: 1;
    padding: 10px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-cap);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.r-tab-btn:hover {
    color: var(--text);
}

.r-tab-btn.on {
    color: var(--indigo-ink);
    font-weight: 600;
    border-bottom-color: var(--indigo);
}

.r-tab-panel {
    display: none;
}

.r-tab-panel.on {
    display: block;
}

/* ===== Checkbox Touch Area ===== */
.form-opts label {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.form-opts input[type="checkbox"],
.form-agree input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ===== Animation ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease forwards;
}

/* ===== Toast ===== */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--indigo);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast button {
    color: rgba(255,255,255,0.6);
    font-size: 20px;
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .hero-track {
        transition: none !important;
    }
}

/* =========================================
   RESPONSIVE — 1024px → 768px → 480px
   ========================================= */

@media (max-width: 1024px) {
    .cat-tabs,
    .h-right {
        display: none;
    }

    .ham {
        display: block;
    }

    .two-col {
        grid-template-columns: 1fr 280px;
        gap: 20px;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .wrap {
        padding: 0 16px;
    }

    /* Layout */
    .two-col {
        grid-template-columns: 1fr;
    }

    /* 홈 모바일 블록 재배치는 JS(DOM 이동)로 처리 — display:contents 는 히어로·카드를
       flex 아이템화해 폭 규격을 틀어놓으므로 사용하지 않음. 컬럼은 아래 표준 grid 1fr 유지. */

    .right-col,
    .sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .r-box {
        margin-bottom: 0;
    }

    .list-card-thumb {
        width: 100px;
        height: 68px;
    }

    .list-card-title {
        font-size: 16px;
    }

    .list-card-excerpt {
        display: none;
    }

    .col-thumb {
        width: 110px;
        height: 76px;
    }

    /* Hero Slider */
    .hero-slide-img {
        aspect-ratio: 16 / 9;
    }

    .hero-title {
        font-size: 22px;
    }

    .hero-overlay {
        padding: 28px 20px 20px;
    }

    /* Hero Thumbnails — 태블릿: 5개 보임 */
    .hero-thumb {
        width: calc(100% / 5);
        min-width: calc(100% / 5);
        padding: 8px 10px;
    }

    /* Filter & Tabs — 가로 스크롤 */
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }

    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Touch Targets 44px */
    .filter-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
    }

    .col-tab {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .pg-btn {
        min-width: 44px;
        height: 44px;
    }

    /* CTA & Info */
    .cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 24px;
    }

    .info-box-grid {
        grid-template-columns: 1fr;
    }

    /* Table */
    .data-table {
        font-size: 14px;
    }
    .data-table th,
    .data-table td {
        padding: 10px 12px;
    }

    /* Footer */
    .footer-top {
        flex-direction: column;
        gap: 20px;
    }

    .f-bottom {
        flex-direction: column;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .wrap {
        padding: 0 14px;
    }

    .header-top {
        height: 48px;
    }

    .m-nav {
        top: 48px;
    }

    /* Page Head */
    .page-head-title {
        font-size: 22px;
    }

    /* Filter Tabs */
    .filter-tabs {
        gap: 6px;
    }

    .filter-tab {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Thumbnails */
    .col-thumb {
        width: 80px;
        height: 56px;
    }

    .list-card-thumb {
        width: 90px;
        height: 62px;
    }

    .list-card {
        gap: 12px;
    }

    /* Hero */
    .hero-slide-img {
        aspect-ratio: 4 / 3;
    }

    .hero-title {
        font-size: 20px;
    }

    .hero-overlay {
        padding: 20px 16px 16px;
    }

    .hero-desc {
        display: none;
    }

    /* Hero Thumbnails — 모바일: 3개 보임 */
    .hero-thumb {
        width: calc(100% / 3);
        min-width: calc(100% / 3);
        padding: 8px 8px;
    }

    .hero-arr {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    /* Auth Pages */
    .auth-wrap {
        padding: 24px 0;
    }

    .auth-box {
        padding: 20px;
        border: none;
        border-radius: 0;
    }

    /* Footer */
    .f-links {
        flex-wrap: wrap;
        gap: 24px;
    }
}

/* ===== Article Detail ===== */
.article-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 24px;
}

.article-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin: 12px 0;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 15px;
    color: var(--text-sub);
}

.article-thumb {
    margin-bottom: 32px;
    border-radius: var(--radius);
    overflow: hidden;
}
/* 대표 이미지(커버) 실제 업로드분: placeholder(.ph)와 동일한 16:9 비율로 채움 */
.article-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.article-content {
    font-size: 17px;
    line-height: 1.9;
    color: var(--text);
}

.article-content h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 36px 0 16px;
    color: var(--indigo-ink);
}

.article-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 12px;
}

.article-content p {
    margin-bottom: 16px;
}

.article-content ul,
.article-content ol {
    margin: 12px 0 16px 24px;
}

.article-content li {
    margin-bottom: 6px;
}

.article-content blockquote {
    border-left: 3px solid var(--terra);
    padding: 12px 20px;
    margin: 20px 0;
    background: var(--surface-alt);
    color: var(--text-sub);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.article-actions {
    display: flex;
    flex-wrap: wrap;   /* (10-08 사용자 점검) 390 폭에서 추천·공유·저장·수정·삭제가 한 줄을 넘쳐 [삭제]가 잘렸다 */
    gap: 12px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
/* 뉴스 상세: 메타(출처·날짜·조회)와 액션(북마크·수정·삭제)을 한 줄 좌우 배치 */
.article-meta { justify-content: space-between; align-items: center; }
.article-meta-info { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.article-actions--inline { margin-top: 0; padding-top: 0; border-top: none; gap: 8px; align-items: center; flex-shrink: 0; }

.related-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-item {
    display: flex;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}

.related-item:hover .related-title {
    color: var(--terra);
}

.related-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}

.related-title {
    font-size: 16px;
    font-weight: 500;
    margin: 4px 0 2px;
    transition: color 0.2s;
}

.related-author {
    font-size: 14px;
    color: var(--text-sub);
}

/* Buttons for articles */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--terra);
    color: #fff;
}

.btn-primary:hover {
    background: var(--terra-hover);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-sub);
}

.btn-outline:hover {
    border-color: var(--terra);
    color: var(--terra);
}

@media (max-width: 480px) {
    .article-title {
        font-size: 24px;
    }

    .article-content {
        font-size: 16px;
    }
}

/* --- Sidebar (좌측, 슬림) --- */
.col-sidebar {
    position: sticky;
    top: 68px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
}

/* --- Highlight Section (메인 상단, 추천 고정 6개) --- */
.col-highlight-sec {
    margin-bottom: var(--sp-xl);
}
.col-highlight-card-img .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-muted);
    background: #e8e4f0;
}
.col-highlight-card-body .badge-sm {
    align-self: flex-start;
}

/* --- Field Pills (분야 필터, 메인 영역) --- */
.col-field-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: var(--sp-lg);
}
.col-field-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-sub);
    transition: all 0.15s;
    cursor: pointer;
}
.col-field-pill:hover {
    background: var(--indigo-pale);
    color: var(--indigo-ink);
}
.col-field-pill.on {
    background: var(--indigo);
    color: #fff;
    border-color: var(--indigo);
}
.col-field-pill .col-cat-count {
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,0.08);
    min-width: 20px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 5px;
}
.col-field-pill.on .col-cat-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* Sidebar CTA */
.col-sidebar-cta {
    background: var(--surface-alt);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
}
.col-sidebar-cta h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--indigo-ink);
    margin: 0 0 8px;
    line-height: 1.4;
}
.col-sidebar-cta p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    margin: 0 0 14px;
}
.col-sidebar-cta-btn {
    display: block;
    background: var(--terra);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 0;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s;
}
.col-sidebar-cta-btn:hover {
    background: var(--terra-dark, #a84530);
}

/* View Switcher (칼럼/전문가, 사이드바 세로형) */
.col-view-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
}

.col-view-item.on {
    color: #fff;
    background: var(--indigo);
}

.col-view-item.on .col-view-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.col-cat-item.on {
    background: var(--indigo);
    color: #fff;
}

.col-cat-name {
    font-size: 14.5px;
    font-weight: 600;
}

.col-cat-item.on .col-cat-desc {
    color: rgba(255,255,255,0.7);
}

.col-cat-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-cap);
    background: var(--surface-alt);
    min-width: 26px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    flex-shrink: 0;
    margin-left: 8px;
}

.col-cat-item.on .col-cat-count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* --- Main Content --- */
.col-main {
    min-width: 0;
    overflow: hidden;
}

.col-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-lg);
}

.col-main-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--indigo-ink);
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm);
}

.col-main-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-cap);
}

.col-sort {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-sub);
    background: var(--surface);
    cursor: pointer;
    font-family: var(--font);
}

/* Article List */
.col-article-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    min-width: 0;
}

.col-article {
    display: flex;
    gap: var(--sp-md);
    padding: var(--sp-md) 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
}

.col-article:last-child {
    border-bottom: none;
}

.col-article-thumb {
    width: 240px;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 6px;
    overflow: hidden;
    background: var(--surface-alt);
}

.col-article-thumb .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-cap);
    background: var(--surface-alt);
}

.col-article-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.col-article-body > .badge-sm {
    align-self: flex-start;
    margin-bottom: 6px;
}

.col-article-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text);
    margin-bottom: 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.col-article-excerpt {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.5;
    min-height: calc(14px * 1.5 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.col-article-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.col-article-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-sub);
}

.col-article-stats {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: var(--text-cap);
}

/* --- Column Page Responsive --- */
@media (max-width: 768px) {
    .col-page-layout {
        grid-template-columns: 1fr;
    }

    .col-sidebar {
        position: static;
        flex-direction: row;
        align-items: stretch;
        gap: var(--sp-md);
    }

    .col-sidebar .col-view-nav {
        flex-direction: row;
    }

    .col-sidebar .col-sidebar-cta {
        display: none;
    }

    .col-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .col-field-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: 100%;
    }

    .col-field-pills::-webkit-scrollbar {
        display: none;
    }

    .col-field-pill {
        flex-shrink: 0;
    }

    .col-article-thumb {
        width: 120px;
        height: 90px;
    }
}

@media (max-width: 480px) {

    .col-article {
        flex-direction: column;
    }

    .col-article-thumb {
        width: 100%;
        height: 180px;
    }

    .col-article-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ===== 전문가 네트워크 페이지 (v5 리디자인) ===== */

/* 결과 없음 (공통) */
.col-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-cap);
    font-size: 15px;
}

/* 타입 탭 (전문가·파일럿 / 전문단체) */
.exp-type-tabs {
    display: flex;
    gap: 0;
    margin-bottom: var(--sp-lg);
    border-bottom: 2px solid var(--border);
}
.exp-type-tab {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-cap);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.exp-type-tab:hover { color: var(--text-sub); }
.exp-type-tab.on {
    color: var(--indigo-ink);
    border-bottom-color: var(--indigo);
    font-weight: 600;
}
.exp-type-count {
    font-size: 12px;
    color: var(--text-cap);
    margin-left: 4px;
}
.exp-type-tab.on .exp-type-count { color: var(--indigo-soft); }

/* 검색바 */
.exp-search-bar {
    margin-bottom: 16px;
}
.exp-search-bar .form-input {
    width: 100%;
    font-size: 15px;
    padding: 12px 16px;
}

/* 필터탭 카운트 */
.filter-tab-count {
    font-size: 12px;
    color: var(--text-cap);
    margin-left: 4px;
}
.filter-tab.on .filter-tab-count {
    color: rgba(255,255,255,0.8);
}

/* 4열 카드 그리드 */
.exp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-md);
    margin-bottom: var(--sp-xl);
}

/* 간결화된 카드 */
.exp-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    background: var(--surface);
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.2s;
}
.exp-card:hover {
    border-color: var(--indigo-soft);
    box-shadow: 0 4px 16px rgba(43,30,84,0.08);
}
.exp-card:focus-visible {
    outline: 2px solid var(--indigo-fill);
    outline-offset: 2px;
}

.exp-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.exp-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.pilot-icon,
.org-icon {
    vertical-align: middle;
    flex-shrink: 0;
    opacity: 0.85;
}

.exp-card .badge-sm {
    margin-bottom: 8px;
}

.exp-card-title {
    font-size: 13px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.exp-card-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-cap);
    padding-top: 10px;
    border-top: 1px solid var(--border);
    min-height: 32px;
}
.exp-stat-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-cap);
    flex-shrink: 0;
}

/* 하단 CTA */
.exp-cta-bottom {
    margin-top: var(--sp-lg);
    margin-bottom: var(--sp-xl);
}

/* ── 프로필 모달 (데스크톱/태블릿) ── */
.exp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.exp-modal-overlay.on { opacity: 1; }

.exp-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 201;
    background: var(--surface);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.exp-modal.on {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* 모달 헤더 (indigo 그라데이션) */
.exp-modal-header {
    position: relative;
    background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-mid) 100%);
    padding: 44px 20px 28px;
    text-align: center;
}
.exp-modal-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--indigo-pale);
    color: var(--indigo-ink);
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* 모달 닫기/공유 버튼 */
.exp-modal-close,
.exp-modal-share {
    position: absolute;
    top: 12px;
    background: rgba(255,255,255,0.15);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.exp-modal-close { right: 12px; font-size: 20px; }
.exp-modal-share { right: 56px; }
.exp-modal-close:hover,
.exp-modal-share:hover {
    background: rgba(255,255,255,0.28);
}

/* 모달 본문 */
.exp-modal-body {
    padding: 20px 24px 24px;
    text-align: center;
}
.exp-modal-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.exp-modal-slug {
    font-size: 13px;
    color: var(--text-cap);
    margin-bottom: 10px;
}
.exp-modal-badge {
    margin-bottom: 8px;
}
.exp-modal-title {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 12px;
}
.exp-modal-bio {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: left;
}

/* 모달 통계 */
.exp-modal-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.exp-modal-stats span {
    font-size: 13px;
    color: var(--text-sub);
    white-space: nowrap;
}
.exp-modal-stats strong {
    color: var(--indigo-ink);
    font-weight: 700;
}

/* 모달 탭 */
.exp-modal-tabs {
    display: flex;
    background: var(--surface-alt);
    border-radius: 0;
}
.exp-modal-tab {
    flex: 1;
    text-align: center;
    padding: 11px 0;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-cap);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.exp-modal-tab:hover { color: var(--text-sub); }
.exp-modal-tab.on {
    color: var(--indigo-ink);
    border-bottom-color: var(--indigo);
    font-weight: 600;
    background: var(--surface);
}

/* 모달 탭 콘텐츠 */
.exp-modal-content {
    padding: 16px 0;
    min-height: 60px;
}
.em-tab-panel {
    animation: emFadeIn 0.25s ease;
}
@keyframes emFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.em-placeholder {
    font-size: 13px;
    color: var(--text-cap);
    text-align: center;
    padding: 16px 0;
    line-height: 1.5;
}
.em-link {
    display: inline-block;
    font-size: 13px;
    color: #fff;
    background: var(--terra);
    font-weight: 500;
    padding: 7px 18px;
    border-radius: 5px;
    margin-top: 8px;
    transition: background 0.15s;
    text-decoration: none;
}
.em-link:hover { background: var(--terra-hover); }

/* 모달 URL 표시 */
.exp-modal-url {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 16px;
}
.exp-modal-url-text {
    font-size: 13px;
    color: var(--text-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.exp-modal-url-copy {
    background: var(--indigo);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    transition: background 0.15s;
}
.exp-modal-url-copy:hover { background: var(--indigo-hover); }

/* ── 바텀시트 (모바일 프로필) ── */
.exp-bottomsheet-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.exp-bottomsheet-overlay.on { opacity: 1; }

.exp-bottomsheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    background: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow: hidden;
    will-change: transform;
}
.exp-bottomsheet.on { transform: translateY(0); }

.exp-bs-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    cursor: grab;
    touch-action: none;
}
.exp-bs-handle::after {
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
}
.exp-bs-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: var(--surface-alt);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    color: var(--text-sub);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.exp-bs-close:hover { background: var(--border); color: var(--text); }

.exp-bs-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 96px);
    max-height: calc(100dvh - 96px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* 바텀시트 내부 모달 스타일 재사용 */
.exp-bs-body .exp-modal-header { padding: 20px 20px 24px; }
.exp-bs-body .exp-modal-avatar { width: 64px; height: 64px; font-size: 24px; }
.exp-bs-body .exp-modal-body { padding: 16px 20px 20px; }

/* ── 전문가 페이지 반응형 ── */
@media (max-width: 1024px) {
    .exp-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .exp-grid { grid-template-columns: repeat(2, 1fr); }

    /* 데스크톱 모달 숨김, 바텀시트로 대체 */
    .exp-modal,
    .exp-modal-overlay { display: none !important; }

    .exp-search-bar .form-input {
        min-height: 44px;
        font-size: 16px;
    }
    .exp-type-tab {
        padding: 10px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .exp-grid { grid-template-columns: repeat(2, 1fr); }

    .exp-card {
        padding: 14px 10px;
    }
    .exp-card-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
        margin-bottom: 8px;
    }
    .exp-card-name { font-size: 14px; }
    .exp-card-title { font-size: 12px; }
    .exp-card-stats { font-size: 11px; }
    .exp-type-tab { padding: 10px 12px; }

    .filter-tab { min-height: 44px; }
}

/* ===================================================
   프로필 페이지 (/@slug)
   =================================================== */
.profile-page {
    max-width: 600px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.profile-page-header {
    position: relative;
    background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-mid) 100%);
    padding: 48px 20px 32px;
    text-align: center;
}
.profile-page-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--indigo-pale);
    color: var(--indigo-ink);
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 3px solid #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.profile-share-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255,255,255,0.15);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.profile-share-btn:hover { background: rgba(255,255,255,0.28); }

.profile-page-body {
    padding: 24px 28px 28px;
    text-align: center;
}
.profile-page-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.profile-page-slug {
    font-size: 14px;
    color: var(--text-cap);
    margin-bottom: 12px;
}
.profile-page-body .badge-sm { margin-bottom: 10px; }
.profile-page-title {
    font-size: 15px;
    color: var(--text-sub);
    margin-bottom: 14px;
}
.profile-page-bio {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 1.65;
    margin-bottom: 20px;
    text-align: left;
}
.profile-page-stats {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
}
.profile-page-stats span {
    font-size: 14px;
    color: var(--text-sub);
}
.profile-page-stats strong {
    color: var(--indigo-ink);
    font-weight: 700;
}
.profile-page-tabs {
    display: flex;
    background: var(--surface-alt);
}
.profile-page-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-cap);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.profile-page-tab:hover { color: var(--text-sub); }
.profile-page-tab.on {
    color: var(--indigo-ink);
    border-bottom-color: var(--indigo);
    font-weight: 600;
    background: var(--surface);
}
.profile-page-content {
    padding: 20px 0;
    min-height: 80px;
}
.profile-tab-panel {
    animation: emFadeIn 0.25s ease;
}
.profile-page .exp-modal-url {
    margin-top: 20px;
}

@media (max-width: 480px) {
    .profile-page-body { padding: 20px 16px; }
    .profile-page-name { font-size: 20px; }
    .profile-page-avatar { width: 64px; height: 64px; font-size: 26px; }
    .profile-page-header { padding: 36px 16px 24px; }
    .profile-page-stats { gap: 10px; flex-wrap: wrap; }
}

/* ===================================================
   HOME: 교육 과정 가로 스크롤 (edu-flow)
   =================================================== */
.edu-flow {
    overflow: hidden;
    position: relative;
}
.edu-flow-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.edu-flow-track::-webkit-scrollbar {
    display: none;
}
.edu-flow-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.edu-flow-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.edu-flow-thumb {
    height: 120px;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.edu-flow-thumb .ph {
    font-size: 12px;
    color: var(--text-cap);
}
.edu-flow-body {
    padding: 12px;
}
.edu-flow-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 6px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.edu-flow-meta {
    font-size: 12px;
    color: var(--text-cap);
    margin-bottom: 4px;
}
.edu-flow-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--terra);
}

/* ===================================================
   HOME: 전문가 티커 (우→좌 자동 스크롤)
   =================================================== */
.r-expert-ticker-box {
    overflow: hidden;
}
.r-expert-ticker {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.r-expert-ticker-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: expertScroll 25s linear infinite;
}
.r-expert-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes expertScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.r-expert-chip {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: none;
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    background: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.r-expert-chip:hover {
    background: var(--surface-alt);
}

.r-expert-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--indigo-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.r-expert-avatar .ph {
    font-size: 11px;
    color: var(--indigo-ink);
    font-weight: 600;
}

.r-expert-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.r-expert-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.r-expert-field {
    font-size: 11px;
    color: var(--text-cap);
}

/* 768px 이하 교육 카드 축소 */
@media (max-width: 768px) {
    .edu-flow-card {
        flex: 0 0 180px;
    }
    .edu-flow-thumb {
        height: 90px;
    }
    .edu-flow-body {
        padding: 10px;
    }
    .edu-flow-title {
        font-size: 13px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Auth Pages (Login / Register)
   ═══════════════════════════════════════════════════════════ */
.auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 16px;
}
.auth-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 32px;
}
.auth-logo {
    text-align: center;
    margin-bottom: 24px;
}
.auth-logo-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--indigo-ink);
}
.auth-logo-text b { color: var(--terra); }
.auth-desc {
    text-align: center;
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 24px;
}
.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.form-label .req { color: var(--terra); }
.form-hint {
    font-size: 12px;
    color: var(--text-cap);
    margin-top: 4px;
}
.form-label .form-hint { font-weight: 400; margin-top: 0; }
.form-mono { font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; font-size: 13px; line-height: 1.65; }
/* 뉴스 수정: 대표 이미지 클릭 업로드(WebP 변환) */
.news-cover { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.news-cover-preview { width: 240px; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.news-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-cover-ph { font-size: 13px; color: var(--text-cap); }
.news-cover-controls { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.news-cover-status { font-size: 12px; color: var(--text-sub); margin: 0; }

/* 예약 발행 미니 캘린더 (작성폼 발행 설정 — 뉴스 큐와 동일 인터페이스, 리브레토 벤치마킹) */
.sched-picker { display: flex; gap: 12px; margin: 6px 0 10px; }
.sched-date { flex: 1.5; }
.sched-time { flex: 1; }
.sched-warn { margin-bottom: 12px; padding: 10px 12px; background: var(--terra-bg); border-left: 3px solid var(--terra); border-radius: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.sched-warn strong { color: var(--terra); }
.sched-warn-list { margin-top: 6px; }
.sched-cal-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-sub); margin-bottom: 6px; }
.sched-cal-scope { font-size: 11px; color: var(--text-cap); }
.sched-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 11px; }
.sched-cal-dow { text-align: center; color: var(--text-cap); font-weight: 600; padding: 4px 0; }
.sched-cal-day { position: relative; padding: 6px 2px; text-align: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; color: var(--text); }
.sched-cal-day:hover { border-color: var(--indigo-soft); }
.sched-c1 { background: var(--indigo-pale); }
.sched-c2 { background: var(--indigo-soft); }
.sched-c3 { background: var(--indigo); color: #fff; }
.sched-sel { border: 2px solid var(--terra); font-weight: 700; }
.sched-past { opacity: .35; cursor: not-allowed; }
.sched-past:hover { border-color: transparent; }
.sched-badge { position: absolute; top: -2px; right: -2px; background: var(--terra); color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 8px; font-weight: 600; }
.sched-cal-legend { font-size: 11px; color: var(--text-cap); margin: 8px 0 0; }
.sched-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 2px 0 8px; }
.sched-sw1 { background: var(--indigo-pale); }
.sched-sw2 { background: var(--indigo-soft); }
.sched-sw3 { background: var(--indigo); }
.sched-detail { margin-top: 12px; }
.sched-sd-head { font-size: 12px; color: var(--text-sub); font-weight: 600; margin-bottom: 4px; }
.sched-sd-item { padding: 6px 10px; background: var(--surface); border-radius: 4px; margin-bottom: 3px; font-size: 12px; line-height: 1.4; }
.sched-sd-time { display: inline-block; min-width: 42px; color: var(--terra); font-weight: 600; }
/* 예약 발행 모달 (작성폼 '예약 발행' 선택 시 팝업) */
.sched-picked { margin: 10px 0 0; font-size: 13px; color: var(--text-sub); }
.sched-picked-txt { color: var(--terra); font-weight: 600; }
.sched-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; }
.sched-modal-overlay[hidden] { display: none; }
.sched-modal { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.sched-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sched-modal-title { margin: 0; font-size: 16px; }
.sched-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-sub); padding: 0; }
.sched-modal-body { padding: 16px 18px; }
.sched-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
/* 예약 캘린더 다크·모바일 보완 (감사 P3) */
.sched-c2, .nq-cal-c2 { color: #201C2E; }           /* 중간 보라 셀 위 어두운 글자 — 양 테마 판독 */
.sched-sw1, .nq-cal-sw1 { border: 1px solid var(--border); box-sizing: border-box; }
@media (max-width: 480px) {
  .sched-cal-grid, .nq-cal-grid { font-size: 12px; gap: 4px; }
  .sched-cal-day, .nq-cal-day { padding: 9px 2px; }
  .sched-modal-body .sched-date, .sched-modal-body .sched-time { font-size: 16px; }  /* iOS 포커스 줌 방지 */
}
.form-opts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 20px;
}
.form-opts label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-sub);
    cursor: pointer;
}
.form-opts a { color: var(--terra); }
.form-agree {
    font-size: 13px;
    color: var(--text-sub);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}
.form-agree a { color: var(--terra); }
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 15px;
}
.auth-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}
.auth-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
}
.auth-divider span {
    position: relative;
    background: var(--surface);
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-cap);
}
.social-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-social {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
}
.btn-social:hover { background: var(--surface-alt); }
.auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-sub);
}
.auth-footer a { color: var(--terra); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   모바일 반응형 보완 (버그 수정)
   ═══════════════════════════════════════════════════════════ */

/* 모바일 nav 구분선 */
.m-nav-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 16px;
}

/* 본문 이미지 오버플로우 방지 */
.article-content img {
    max-width: 100%;
    height: auto;
}

/* page-tabs 모바일 가로 스크롤 */
@media (max-width: 768px) {
    .page-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .page-tabs::-webkit-scrollbar { display: none; }
    .page-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* col-tabs 모바일 가로 스크롤 */
    .col-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .col-tabs::-webkit-scrollbar { display: none; }
    .col-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* f-links 모바일 래핑 */
    .f-links {
        flex-wrap: wrap;
        gap: 24px;
    }

    /* evt-hero-dots 모바일 폭 대응 */
    .evt-hero-dots {
        width: 100%;
    }

    /* iOS 자동 줌 방지 (font-size < 16px인 input) */
    .news-submit-input,
    .cm-search-input,
    .cm-sort-select,
    .edu-sort-select,
    .col-sort {
        font-size: 16px;
    }

    /* exp-type-tabs 모바일 스크롤 */
    .exp-type-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .exp-type-tabs::-webkit-scrollbar { display: none; }
    .exp-type-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 히어로 썸네일 오버플로우 방지 */
    .hero-thumbs {
        overflow: hidden;
    }

    /* 이벤트 행 제목 줄바꿈 */
    .evt-row-title {
        font-size: 15px;
    }

    /* 데이터 테이블 모바일 스크롤 */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 토스트 알림 모바일 폭 제한 */
    .toast {
        max-width: calc(100vw - 32px);
        left: 16px;
        right: 16px;
        transform: translateY(20px);
    }
    .toast.show {
        transform: translateY(0);
    }

    /* .bento-meta-inline 모바일 축소 허용 */
    .bento-meta-inline {
        flex-shrink: 1;
        min-width: 0;
    }

    /* 전체 컨테이너 오버플로우 안전장치 (hidden→clip: 스크롤 컨테이너 생성 안 함 → 내부 브레드크럼 sticky 유지) */
    main {
        overflow-x: clip;
    }

    /* 사이드바 r-box 모바일 패딩 축소 */
    .r-box {
        min-width: 0;
    }

    /* comp-result-meta 모바일 축소 허용 */
    .comp-result-meta {
        flex-shrink: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   480px 이하 추가 모바일 보완
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* 이벤트 행 제목 더 작게 */
    .evt-row-title {
        font-size: 15px;
    }

    /* evt-hero 제목 축소 */
    .evt-hero-title {
        font-size: 16px;
    }

    /* evt-hero 정보 패딩 축소 */
    .evt-hero-info {
        padding: 16px;
    }

    /* 사이드바 패딩 축소 */
    .r-box {
        padding: 12px;
    }

    /* 이벤트 히어로 날짜 행 세로 배치 */
    .evt-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* 교육 그리드 1열 (이미 정의됨, 확인용) */

    /* 커뮤니티 카드 제목 */
    .cm-card-title {
        font-size: 15px;
    }

    /* 대회 결과 헤더 축소 */
    .comp-result-head {
        padding: 12px 14px;
    }

    /* pick 카드 오버플로우 방지 */
    .pick-card {
        min-width: 0;
    }
}

/* ===== 작성/수정 폼 유틸 (P1) ===== */
.form-alert {
    background: var(--terra-bg);
    color: var(--terra);
    border: 1px solid var(--terra-soft);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
}
.form-alert p { margin: 2px 0; }

.form-notice {
    background: var(--green-bg);
    color: var(--green-ink);
    border: 1px solid var(--green-ink);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}
.form-notice strong { font-weight: 700; }
.form-notice p { margin: 2px 0; }

select.form-input {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

textarea.form-input {
    min-height: 200px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.form-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.form-row .form-group { flex: 1; min-width: 160px; }

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
}
.form-check input { width: 16px; height: 16px; cursor: pointer; }

.form-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.form-radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.form-radio-pill:has(input:checked) {
    border-color: var(--indigo);
    color: var(--indigo-ink);
    font-weight: 600;
}
.form-radio-pill input { position: absolute; opacity: 0; pointer-events: none; }

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}
.form-actions .btn { flex: 0 0 auto; }

.form-gate-note {
    font-size: 13px;
    color: var(--text-cap);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 20px;
}

/* ===== 칼럼 상세 사이드바: 목차(TOC) + 관련 칼럼 (libretto 참조) ===== */
/* 좌/우 스크롤 분리: 우측 사이드 '한 세트'를 헤더 아래에 통째로 sticky 고정.
   본문(좌)이 스크롤되는 동안 목차·관련·인기·글쓴이 세트가 함께 우측 상단에 붙어있고,
   본문 끝에 도달하면 세트도 함께 스크롤됨.
   고정 구간 = 본문높이 − 사이드바높이 → 사이드바가 뷰포트보다 낮으면 본문 내내 고정 유지.
   (.two-col align-items:start 로 우측 컬럼 높이=콘텐츠 높이 전제) */
@media (min-width: 769px) {
    .two-col--sticky-aside .right-col {
        position: -webkit-sticky;
        position: sticky;
        top: 108px; /* 헤더(56) + sticky 브레드크럼(~44) 아래 */
        align-self: start;
    }
}

/* 헤더+브레드크럼에 가리지 않도록 목차 클릭 시 이동 지점 오프셋 */
.article-content h2,
.article-content h3 { scroll-margin-top: 108px; }

/* 스크롤 시 상단 고정 브레드크럼 + 제목 노출 (col-detail) */
.page-head--crumb {
    position: -webkit-sticky;
    position: sticky;
    top: 56px; /* 헤더(56px) 바로 아래에 붙음 */
    z-index: 90; /* 헤더(100)보다 아래, 본문보다 위 */
    padding: 12px 0; /* 기본 page-head(28px)보다 슬림하게 */
    margin-bottom: 0; /* 기본 page-head(24px) 제거 — 브레드크럼 주변 여백 축소 */
}
/* 대표 이미지: 고정 height 대신 비율 고정(16:9) — PC(≈712×400)와 동일 비율, 모바일 비례 축소 */
.article-thumb .ph {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 0;
}
/* 모바일: 브레드크럼 슬림 + 상단 여백 축소 */
@media (max-width: 768px) {
    .page-head--crumb { padding: 8px 0; }
    .page-body { padding-top: 14px; }
}
/* 폰: 헤더 높이가 56→48px로 줄어드므로 sticky 브레드크럼 top도 48px로 맞춰 헤더-브레드크럼 빈틈 제거 */
@media (max-width: 480px) {
    .page-head--crumb { top: 48px; }
    .article-content h2,
    .article-content h3 { scroll-margin-top: 92px; } /* 헤더(48)+브레드크럼(~36)+여유 */
}
.page-head--crumb .page-head-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crumb-title { display: none; }
.crumb-title.show { display: inline; }

.toc-list { list-style: none; margin: 0; padding: 6px 0; }
.toc-item { margin: 0; }
.toc-link {
    display: block;
    padding: 7px 12px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-sub);
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}
.toc-link:hover { color: var(--indigo-ink); background: var(--indigo-pale); }
.toc-link.active { color: var(--indigo-ink); background: var(--indigo-pale); font-weight: 600; }
.toc-item--sub .toc-link { padding-left: 24px; font-size: 12.5px; }

.side-related-item {
    display: block;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.side-related-item:first-child { border-top: none; padding-top: 2px; }
.side-related-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 3px;
    transition: color 0.15s;
}
.side-related-item:hover .side-related-title { color: var(--terra); }
.side-related-author { font-size: 12px; color: var(--text-cap); margin: 0; }

/* ===== 칼럼 상세 사이드바: 글쓴이 소개 (좌 썸네일 + 우 이름/타이틀/설명) ===== */
.side-author-body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 2px 0;
}
.side-author-avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}
.side-author-avatar .ph { width: 48px; height: 48px; }
.side-author-text { flex: 1; min-width: 0; }
.side-author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.side-author-name span {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-cap);
    margin-top: 2px;
}
.side-author-bio {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-sub);
    margin: 0;
}

/* ===== 칼럼 상세 하단: 관련 칼럼 좌우 슬라이더 ===== */
.rel-sec { margin-top: 40px; }
.rel-sec-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.rel-sec-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.rel-nav { display: flex; gap: 8px; }
.rel-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-sub);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.rel-nav-btn:hover { border-color: var(--indigo); color: var(--indigo-ink); }
.rel-nav-btn:disabled { opacity: 0.35; cursor: default; }
.rel-slider {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.rel-slider::-webkit-scrollbar { display: none; }
.rel-track { display: flex; gap: 16px; }
.rel-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
    display: block;
}
.rel-card-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius);
    overflow: hidden;
}
.rel-card-thumb .ph { width: 100%; height: 100%; }
.rel-card-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(43, 30, 84, 0.82); /* --indigo 반투명 */
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}
.rel-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin: 10px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.rel-card:hover .rel-card-title { color: var(--terra); }
@media (max-width: 768px) {
    .rel-card { flex-basis: 65%; }
}

/* ===== 이미지 placeholder 베이스 (이미지 미표시 자리를 색 블록으로 — 구획 표시) ===== */
/* 컨텍스트별 .X .ph 규칙(그라데이션 등)이 더 구체적이라 그대로 우선 적용됨. 없던 자리들만 채움. */
.ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 40px;
    background: linear-gradient(135deg, var(--indigo-pale) 0%, #E0DDD6 100%);
    color: var(--text-cap);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}

/* ===== 상세 사이드바: 정보 리스트 (뉴스/이벤트/게시판 정보) ===== */
.side-info { margin: 0; }
.side-info > div {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.side-info > div:last-child { border-bottom: 0; }
.side-info dt {
    flex: none;
    width: 52px;
    color: var(--text-cap);
    font-weight: 500;
}
.side-info dd { margin: 0; flex: 1; min-width: 0; color: var(--text); }
.side-info-em { color: var(--terra); font-weight: 700; }

/* 사이드 CTA */
.side-cta-group { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.btn-block { display: flex; width: 100%; justify-content: center; }

/* ===== 커뮤니티 상세: 댓글 ===== */
.cmt-sec { margin-top: 40px; }
.cmt-sec-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.cmt-sec-title span { color: var(--terra); }
.cmt-form { margin-bottom: 24px; }
.cmt-form textarea { width: 100%; resize: vertical; }
.cmt-form-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.cmt-login-note {
    padding: 16px;
    background: var(--surface-alt);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--text-sub);
    margin-bottom: 24px;
    text-align: center;
}
.cmt-login-note a { color: var(--indigo-ink); font-weight: 600; }
.cmt-list { list-style: none; margin: 0; padding: 0; }
.cmt-item { display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.cmt-item:first-child { border-top: 0; }
.cmt-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-head { margin: 0 0 4px; font-size: 13px; }
.cmt-head strong { color: var(--text); font-weight: 700; }
.cmt-head span { color: var(--text-cap); margin-left: 6px; font-size: 12px; }
.cmt-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-sub); }

/* ===== 이벤트 상세: 세로형 포스터 히어로 (목록 카드 evt-row-poster 3/4 와 동일 비율) ===== */
.evt-detail-hero {
    display: flex;
    align-items: flex-start; /* 포스터 3/4 비율 유지 (stretch 방지) */
    gap: 24px;
    margin-bottom: 28px;
}
.evt-detail-poster {
    flex: none;
    width: 240px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
}
.evt-detail-head {
    flex: 1;
    min-width: 0;
}
.evt-detail-head .article-title { margin-top: 0; }
.evt-detail-sub {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-sub);
    margin: 12px 0 0;
}
/* 히어로 head: 제목·해설 아래 이벤트 정보 + CTA */
.evt-hero-info { margin-top: 16px; }
.evt-hero-cta { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
/* 사이드: 다른 이벤트·대회 (세로 포스터 + 제목 + D데이) */
.side-evt-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.side-evt-item:first-child { border-top: 0; padding-top: 4px; }
.side-evt-poster {
    flex: none;
    width: 56px;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
}
.side-evt-body { flex: 1; min-width: 0; }
.side-evt-item .badge-sm { display: inline-block; margin-bottom: 5px; }
.side-evt-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.side-evt-item:hover .side-evt-title { color: var(--terra); }
.side-evt-date { font-size: 12px; color: var(--text-cap); margin: 0; }
@media (max-width: 768px) {
    .evt-detail-hero { flex-direction: column; gap: 16px; }
    .evt-detail-poster { width: 100%; max-width: 260px; }
}

/* ===== 이벤트 신청 카드 (접수·일정·상금·정원현황 + 참가신청) ===== */
.evt-reg-card {
    margin-top: 20px;
    padding: 18px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.evt-reg-row {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}
.evt-reg-row:first-child { padding-top: 0; }
.evt-reg-label { flex: none; width: 44px; color: var(--text-cap); font-weight: 500; }
.evt-reg-value { flex: 1; min-width: 0; color: var(--text); }
.evt-reg-value em { color: var(--text-cap); font-style: normal; font-size: 12.5px; }
.evt-reg-value.em { color: var(--terra); font-weight: 700; }
.evt-reg-cap { padding: 12px 0 2px; }
.evt-reg-cap-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.evt-reg-cap-nums { font-size: 13px; color: var(--text-sub); }
.evt-reg-cap-nums strong { color: var(--indigo-ink); font-size: 15px; }
.evt-reg-cap-nums em { color: var(--text-cap); font-style: normal; }
.evt-reg-cap-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.evt-reg-cap-bar span { display: block; height: 100%; background: var(--indigo); border-radius: 4px; }
.evt-reg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* 주최·주관 → 전문가 네트워크 프로필 링크 */
.org-link { color: var(--indigo-ink); font-weight: 600; }
.org-link:hover { color: var(--terra); text-decoration: underline; }

/* ===== 모바일 하단 목차 (bottom sheet, libretto 패턴) — 칼럼 상세 ===== */
.toc-fab, .toc-sheet, .toc-sheet-overlay { display: none; }

@media (max-width: 768px) {
    /* 사이드 목차 박스는 하단 바로 대체 */
    .two-col--sticky-aside .toc-box { display: none; }
    /* 하단 고정 바가 본문/푸터를 가리지 않도록 여백 */
    .col-detail-body { padding-bottom: 76px; } /* toc-fab(하단 목차 바) 있는 칼럼 상세 한정 */

    /* 하단 고정 목차 바 */
    .toc-fab:not([hidden]) {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90; /* 헤더(100)/모바일드로어(101)보다 아래 */
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
    }
    .toc-fab-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
    }
    .toc-fab-ico { flex: none; color: var(--indigo-ink); }
    .toc-fab-label {
        flex: 1;
        min-width: 0;
        text-align: left;
        font-weight: 500;
        color: var(--text-sub);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .toc-fab-label b { color: var(--text); font-weight: 700; }
    .toc-fab-chev { flex: none; color: var(--text-cap); }

    /* 오버레이 */
    .toc-sheet-overlay {
        display: block;
        position: fixed; inset: 0;
        z-index: 130;
        background: rgba(0, 0, 0, 0.42);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease;
    }
    .toc-sheet-overlay.open { opacity: 1; visibility: visible; }

    /* 바텀시트 */
    .toc-sheet {
        display: block;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 131;
        background: var(--surface);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.14);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        max-height: 62vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }
    .toc-sheet.open { transform: translateY(0); visibility: visible; }
    .toc-sheet-handle {
        width: 40px; height: 4px;
        border-radius: 2px;
        background: var(--border);
        margin: 10px auto 2px;
    }
    .toc-sheet-head {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 18px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }
    .toc-sheet-title { font-size: 15px; font-weight: 700; color: var(--text); }
    .toc-sheet-close {
        width: 32px; height: 32px;
        border: none;
        background: transparent;
        color: var(--text-cap);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .toc-sheet-list { padding: 8px 10px; }
}

/* ===== 이벤트 신청 카드: 히어로 하단 전체 폭 변형 (좌 정보 / 우 버튼) ===== */
.evt-reg-card--full {
    margin-top: 0;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
}
.evt-reg-card--full .evt-reg-info { flex: 1; min-width: 0; }
.evt-reg-card--full .evt-reg-info > div:last-child { border-bottom: 0; }
.evt-reg-card--full .evt-reg-actions { flex: none; width: 180px; margin-top: 0; }
@media (max-width: 640px) {
    .evt-reg-card--full { flex-direction: column; align-items: stretch; gap: 16px; }
    .evt-reg-card--full .evt-reg-actions { width: 100%; }
}

/* ===== 이벤트 상세: 히어로 CTA + 정보 카드 + 모바일 중앙정렬 ===== */
.evt-detail-cta { margin-top: 18px; }
.evt-detail-cta .btn { min-width: 180px; }
.evt-info-card { margin-top: 0; margin-bottom: 28px; }
.side-info-sub { font-style: normal; color: var(--text-cap); }
@media (max-width: 768px) {
    .evt-detail-hero { flex-direction: column; align-items: center; gap: 18px; }
    .evt-detail-poster { width: 100%; max-width: 220px; }
    .evt-detail-head { width: 100%; text-align: center; }
    .evt-detail-cta .btn { width: 100%; }
}

/* ===== 이벤트 문의·댓글: 주최자 답변 스레드 ===== */
.cmt-sec-note {
    font-size: 13px;
    color: var(--text-sub);
    margin: 0 0 18px;
    padding: 11px 14px;
    background: var(--surface-alt);
    border-radius: var(--radius);
    line-height: 1.6;
}
.cmt-sec-note strong { color: var(--indigo-ink); }
.cmt-reply {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--surface-alt);
    border-left: 3px solid var(--indigo);
    border-radius: 0 8px 8px 0;
}
.cmt-host-badge {
    display: inline-block;
    background: var(--indigo);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 20px;
    margin: 0 4px;
    vertical-align: middle;
}
.cmt-reply-toggle {
    margin-top: 10px;
    background: none;
    border: none;
    color: var(--indigo-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.cmt-reply-toggle:hover { text-decoration: underline; }
.cmt-reply-form { display: none; margin-top: 10px; }
.cmt-reply-form.open { display: block; }
.cmt-reply-form .btn { font-size: 13px; padding: 7px 16px; }

/* ===== 이벤트 상세: 종료 표시 + 모바일 하단 스티키 신청 바 ===== */
.evt-detail-poster { position: relative; }
.evt-poster-ended {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 26, 0.52);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 6px;
    text-indent: 6px;
}
.evt-detail-hero.is-ended .evt-detail-poster .ph { filter: grayscale(0.4); }
.evt-status-tag {
    display: inline-block;
    background: var(--text-cap);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* 모바일 하단 스티키 신청 바 (데스크톱 숨김) */
.evt-apply-bar { display: none; }
@media (max-width: 768px) {
    .evt-detail-cta { display: none; }          /* 히어로 CTA → 하단 바로 대체 */
    .evt-detail-body { padding-bottom: 84px; }  /* 하단 바에 콘텐츠가 가리지 않도록 */

    .evt-apply-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 95;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
    }
    .evt-apply-bar-cap { flex: none; font-size: 12.5px; color: var(--text-sub); white-space: nowrap; }
    .evt-apply-bar-cap strong { color: var(--indigo-ink); font-size: 14px; }
    .evt-apply-bar .btn { flex: 1; }
}

/* ===== 이벤트 상세 레이아웃: 제목(top) → 정보박스(포스터+정보) → 설명 ===== */
.evt-detail-header { margin-bottom: 20px; }
.evt-detail-maintitle { margin: 0; }
.evt-info-box {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 28px;
}
.evt-info-poster {
    position: relative;
    flex: none;
    width: 200px;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius);
    overflow: hidden;
}
/* 대표 포스터 실제 업로드분: 컨테이너(3/4)를 꽉 채움 */
.evt-info-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.evt-info-box.is-ended .evt-info-poster .ph { filter: grayscale(0.4); }
.evt-info-main { flex: 1; min-width: 0; }
.evt-info-main .evt-detail-cta { margin-top: 16px; }
@media (max-width: 768px) {
    .evt-info-box { flex-direction: column; align-items: center; }
    .evt-info-poster { width: 100%; max-width: 200px; }
    .evt-info-main { width: 100%; }
    .evt-detail-header { text-align: center; }
}

/* 공통 댓글: 더보기 버튼 */
.cmt-more {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 11px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cmt-more:hover { border-color: var(--indigo); color: var(--indigo-ink); }
.cmt-more[hidden] { display: none; } /* display:block이 hidden 속성을 이기던 버그 수정 — 댓글 없으면 미노출 */

/* 감사 A8: 카드 썸네일에 실제 <img> 투입 시 crop 제어 (박스 규격 불변, Phase3 대비) */
.pick-card-img img,
.col-highlight-card-img img,
.edu-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 교육 상세: 강사·수강정보 (데스크톱 사이드 / 모바일 하단 롤업 푸터) ===== */
.edu-side-bar { display: none; }
@media (max-width: 768px) {
    /* 사이드를 화면 하단 고정 롤업으로 (패널 위 · 바 아래) */
    .edu-side {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 95;
        display: flex;
        flex-direction: column;
        margin: 0;
        gap: 0;
    }
    .edu-detail-body { padding-bottom: 66px; } /* 접힌 바 높이만큼 (교육 상세 한정) */

    .edu-side-panel {
        max-height: 0;
        overflow-y: auto;
        background: var(--surface);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
        padding: 0 16px;
        transition: max-height 0.32s ease, padding 0.32s ease;
    }
    .edu-side.open .edu-side-panel { max-height: 66vh; padding: 14px 16px 6px; }
    .edu-side-panel .r-box { margin-bottom: 12px; }

    .edu-side-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border: none;
        border-top: 1px solid var(--border);
        cursor: pointer;
        font-size: 14px;
    }
    .edu-side-bar-price { font-weight: 800; color: var(--terra); flex: none; }
    .edu-side-bar-txt { flex: 1; text-align: left; color: var(--text-sub); font-weight: 600; }
    .edu-side-bar-chev { flex: none; color: var(--text-cap); transition: transform 0.3s; }
    .edu-side.open .edu-side-bar-chev { transform: rotate(180deg); }
}

/* ===== FAQ 아코디언 (static/faq) ===== */
.faq-group { margin-bottom: 32px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title { font-size: 15px; font-weight: 700; color: var(--indigo-ink); margin: 0 0 12px; letter-spacing: -0.01em; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--surface); overflow: hidden; }
.faq-q { list-style: none; cursor: pointer; padding: 15px 46px 15px 18px; font-size: 15px; font-weight: 600; color: var(--text); position: relative; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--text-cap); }
.faq-item[open] .faq-q::after { content: "\2212"; }
.faq-a { padding: 0 18px 16px; }
.faq-a p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.faq-a a { color: var(--terra); }

/* ===== 사이트맵 (static/sitemap) ===== */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px 24px; }
.sitemap-h { font-size: 13px; font-weight: 700; color: var(--indigo-ink); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.sitemap-list { list-style: none; margin: 0; padding: 0; }
.sitemap-list li { margin-bottom: 8px; }
.sitemap-list a { color: var(--text-sub); font-size: 14px; }
.sitemap-list a:hover { color: var(--terra); }

/* (마이페이지 구 .mypage-* 스타일 제거 — 좌사이드/우패널 재설계로 .my-* 로 대체됨) */

/* ===== 좁은 인증 폼 (비밀번호 찾기 등) ===== */
.auth-narrow { max-width: 420px; margin: 0 auto; }
.auth-narrow-alt { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--text-cap); }
.auth-narrow-alt a { color: var(--indigo-ink); font-weight: 600; }

/* ===== 관리자 콘솔 (admin/*) ===== */
/* ⭐**내비가 두 층이다**(주인님 2026-08-17) — 왼쪽은 그룹 여섯, 하위는 본문 위 가로 줄.
   ⚠하위 줄을 `.admin-main` 안에 넣으려면 45개 화면을 다 고쳐야 한다. 그래서 격자로 자리를 준다:
   마크업 차례는 aside · 하위줄 · 본문이지만 화면에는 하위줄이 본문 위에 온다.
   ⚠줄 간격(row-gap)을 0 으로 두는 까닭 — 하위가 없는 화면(대시보드)에서 빈 줄만큼
   본문이 내려앉는 것을 막는다. 간격은 하위 줄이 제 아래여백으로 만든다. */
.admin-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr);
    grid-template-areas: "nav sub" "nav main"; column-gap: 24px; row-gap: 0; align-items: start; }
.admin-nav { grid-area: nav; }
.admin-subnav { grid-area: sub; }
.admin-nav { flex: none; width: 200px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: sticky; top: 72px; }
.admin-nav-brand { font-size: 13px; font-weight: 700; color: var(--indigo-ink); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px; }
.admin-nav nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-link { display: block; padding: 9px 12px; border-radius: 8px; color: var(--text-sub); font-size: 14px; font-weight: 500; }
.admin-nav-link:hover { background: var(--surface); color: var(--text); }
.admin-nav-link.on { background: var(--indigo-pale); color: var(--indigo-ink); border: 1px solid var(--indigo-soft); font-weight: 700; }
.admin-nav-back { display: block; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-cap); }
/* 관리자 내비 그룹·하위 항목 (2026-07-24 정돈) */
.admin-nav-group { margin: 14px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 700; color: var(--text-cap); text-transform: uppercase; letter-spacing: 0.06em; }
.admin-nav nav > .admin-nav-group:first-child { margin-top: 0; }
.admin-nav-sub { padding-left: 24px; font-size: 13px; font-weight: 400; }
.admin-main { grid-area: main; min-width: 0; }
.admin-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.admin-head h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.admin-head-count { font-size: 13px; color: var(--text-cap); }
/* 화면 설명 = 머리줄의 [안내] 하나(10-08 주인님 «페이지별 레이아웃 규정에 통일감») — 종전에는 위·사이·아래로 흩어져 있었다.
   화면 파일은 설명 문단에 .admin-about 만 붙이고, admin_nav.php 가 그 문단들을 여기로 옮긴다(스크립트 없으면 제자리) */
.admin-help { position: relative; align-self: center; }
.admin-help > summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--text-sub); padding: 2px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); }
.admin-help > summary::-webkit-details-marker { display: none; }
.admin-help[open] > summary, .admin-help > summary:hover { color: var(--indigo-ink); border-color: var(--indigo-soft); }
.admin-help-in { position: absolute; left: 0; top: calc(100% + 6px); z-index: 25; width: min(560px, 80vw); padding: 12px 14px; background: var(--surface); border: 1px solid var(--indigo-soft); border-radius: var(--radius); }
.admin-help-in .admin-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-sub); }
.admin-help-in .admin-note + .admin-note { margin-top: 8px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.admin-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
a.admin-stat { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.admin-stat:hover { border-color: var(--indigo-ink); box-shadow: 0 2px 10px rgba(43,30,84,0.08); }
a.admin-stat.on { border-color: var(--indigo-ink); background: var(--surface-alt); }
.admin-stat-label { font-size: 12.5px; color: var(--text-cap); margin: 0 0 8px; }
.admin-stat-value { font-size: 26px; font-weight: 800; color: var(--indigo-ink); margin: 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.admin-stat-delta { font-size: 12px; color: var(--terra); margin: 6px 0 0; font-weight: 600; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; overflow-x: auto; }
.admin-card-head { margin-bottom: 12px; }
.admin-card-head h2 { font-size: 16px; font-weight: 700; margin: 0; }
.admin-col-r { text-align: right; color: var(--text-cap); white-space: nowrap; }
.admin-note { font-size: 12.5px; color: var(--text-cap); margin-top: 8px; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.admin-cols .admin-card { margin-bottom: 0; }
.data-table tr.clickable { cursor: pointer; }
.admin-empty { padding: 22px 4px; text-align: center; color: var(--text-cap); font-size: 13.5px; }
@media (max-width: 768px) {
    .admin-wrap { grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "nav" "sub" "main"; row-gap: 0; }
    .admin-nav { width: 100%; position: static; margin-bottom: 14px; }
    .admin-nav nav { flex-direction: row; flex-wrap: wrap; }
    .admin-nav-link { flex: 1 1 auto; text-align: center; }
    .admin-nav-group { flex-basis: 100%; margin: 10px 0 2px; }
    .admin-nav-sub { padding-left: 12px; }
    .admin-nav-back { margin-top: 12px; }
    .admin-cols { grid-template-columns: 1fr; }
}

/* 전문가 모달: 프로필 전체보기 CTA (/@slug 도달 경로 · 감사 라우팅-2) */
.exp-modal-profile-link { display:block; text-align:center; margin-top:12px; padding:11px 16px;
    background:var(--indigo); color:#fff; border-radius:var(--radius); font-size:14px; font-weight:700; transition:background .15s; }
.exp-modal-profile-link:hover { background:var(--indigo-mid); text-decoration:none; color:#fff; }

/* ===== 버튼 소형 변형 ===== */
.btn-sm { padding: 6px 13px; font-size: 13px; }

/* ===== 마이페이지 (좌측 사이드 메뉴 + 우측 전환 패널) ===== */
.my-layout { display: flex; gap: 24px; align-items: flex-start; }

/* 좌측 사이드 */
.my-nav { flex: none; width: 220px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: sticky; top: 72px; }
.my-nav-user { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.my-nav-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; }
.my-nav-id { min-width: 0; }
.my-nav-name { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 0 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-nav-menu { display: flex; flex-direction: column; gap: 2px; }
.my-nav-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: none; border-radius: 8px; color: var(--text-sub); font-size: 14px; font-weight: 500; cursor: pointer; font-family: inherit; }
.my-nav-item:hover { background: var(--surface); color: var(--text); }
.my-nav-item.on { background: var(--indigo); color: #fff; font-weight: 700; }
.my-nav-logout { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-cap); }
.my-nav-logout:hover { color: var(--terra); }

/* 우측 메인 */
.my-main { flex: 1; min-width: 0; }
.my-panel[hidden] { display: none; }
.my-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.my-panel-head h2 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }

/* 프로필 카드 */
.my-profile-card { display: flex; align-items: center; gap: 18px; padding: 20px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 16px; }
.my-profile-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; }
.my-profile-name { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.my-profile-email { font-size: 13.5px; color: var(--text-cap); margin: 0; }

/* 스탯 */
.my-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
.my-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; }
.my-stat-n { display: block; font-size: 24px; font-weight: 800; color: var(--indigo-ink); font-variant-numeric: tabular-nums; line-height: 1; }
.my-stat-l { display: block; font-size: 12.5px; color: var(--text-cap); margin-top: 7px; }
.my-note { font-size: 12.5px; color: var(--text-cap); margin: 14px 0 0; }

/* 빈 상태 */
.my-empty { text-align: center; padding: 48px 20px; background: var(--surface-alt); border: 1px dashed var(--border); border-radius: var(--radius); }
.my-empty-t { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.my-empty-d { font-size: 13.5px; color: var(--text-sub); margin: 0 0 18px; }

/* 내 글 목록 */
.my-post-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.my-post-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--surface-alt); }
.my-post-item:last-child { border-bottom: none; }
.my-post-main { min-width: 0; flex: 1; }
.my-post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.my-post-title { font-size: 15px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.my-post-title:hover { color: var(--indigo-ink); }
.my-post-meta { font-size: 12.5px; color: var(--text-cap); margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.my-post-sep { color: var(--border); }
.my-post-sched { color: var(--terra); font-weight: 600; }
.my-post-actions { flex: none; display: flex; gap: 8px; }
@media (max-width: 480px) {
    .my-post-item { flex-direction: column; align-items: stretch; }
    .my-post-actions { justify-content: flex-end; }
}

/* 설정 그룹 */
.my-set-group { border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.my-set-t { font-size: 14px; font-weight: 700; color: var(--indigo-ink); margin: 0 0 12px; }
.my-set-list { margin: 0 0 14px; }
.my-set-list > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--surface-alt); font-size: 14px; }
.my-set-list > div:last-child { border-bottom: none; }
.my-set-list dt { flex: none; width: 80px; color: var(--text-cap); }
.my-set-list dd { margin: 0; color: var(--text); }
.my-set-toggle { display: flex; align-items: center; gap: 9px; padding: 7px 0; font-size: 14px; color: var(--text); cursor: pointer; }

@media (max-width: 768px) {
    .my-layout { flex-direction: column; }
    .my-nav { width: 100%; position: static; }
    .my-nav-menu { flex-direction: row; flex-wrap: wrap; gap: 4px; }   /* (10-08 사용자 점검) 가로 스크롤 대신 줄바꿈 — 계정 설정 탭이 화면 밖에 숨었다 */
    .my-nav-item { white-space: nowrap; width: auto; }
    .my-nav-logout { margin-top: 12px; }
}

/* ===== 스크롤바 시각 정돈 + 창 스크롤바 자동 숨김 =====
   창(루트) 스크롤바는 유휴 시 투명 → 스크롤 중(.is-scrolling)에만 노출 후 페이드아웃.
   내부 스크롤러(테이블·캐러셀 등)는 은은하게 상시 노출. 기존 scrollbar-width:none 스크롤러는 그대로 숨김 유지. */
/* Firefox — 창 스크롤바 */
html { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html.is-scrolling { scrollbar-color: rgba(43, 30, 84, 0.35) transparent; }

/* WebKit/Blink — 전역 얇은 오버레이형 */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgba(43, 30, 84, 0.22);
    border-radius: 10px;
    border: 3px solid transparent;       /* content-box 클립으로 얇아 보이게 */
    background-clip: content-box;
    transition: background-color 0.35s ease;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(43, 30, 84, 0.42); }
::-webkit-scrollbar-corner { background: transparent; }
/* 창(루트) 스크롤바: 유휴 시 투명, 스크롤 중에만 노출 */
html:not(.is-scrolling)::-webkit-scrollbar-thumb { background-color: transparent; }

/* ===== 작성자 프로필 링크 ===== */
.author-link { color: inherit; }
.author-link:hover { color: var(--indigo-ink); text-decoration: underline; }

/* ===== 회원 프로필 폴백 — 작성 글 목록 ===== */
.profile-member-posts { margin-top: 26px; text-align: left; }
.pm-list-h { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.pm-post { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.pm-post:hover { border-color: var(--indigo); }
.pm-board { flex: none; font-size: 12px; font-weight: 700; color: var(--indigo-ink); background: var(--surface-alt); padding: 2px 9px; border-radius: 5px; }
.pm-post-title { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-post-date { flex: none; font-size: 12.5px; color: var(--text-cap); }

/* ===== 전문가 프로필 좌/우 레이아웃 (PC: 좌 프로필 sticky / 우 탭콘텐츠) ===== */
.profile-layout { display: flex; gap: 28px; align-items: flex-start; max-width: 980px; margin: 0 auto; }
.profile-side { flex: none; width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06); position: sticky; top: 84px; }
.profile-side .profile-page-body { padding-bottom: 22px; }
.profile-side .exp-modal-url { margin-top: 18px; }
.profile-main { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.profile-main .profile-page-content { padding: 28px 24px; min-height: 220px; }
@media (max-width: 768px) {
    .profile-layout { flex-direction: column; max-width: 600px; }
    .profile-side { width: 100%; position: static; }
}

/* ===== 아바타/썸네일 프로필 링크 ===== */
.author-avatar-link { display: block; text-decoration: none; }
.author-avatar-link:hover { opacity: 0.88; }
/* 댓글: 아바타 링크는 flex none·block, 이름 링크는 인라인(.author-link 상속) */
.cmt-item > .cmt-author-link { flex: none; display: block; }
.cmt-author-link { text-decoration: none; }

/* ===== 프로필 탭: 실제 콘텐츠 목록 (칼럼·교육·이벤트) ===== */
.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); }
.pf-item:hover { border-color: var(--indigo); background: var(--surface-alt); }
.pf-item-cat { flex: none; font-size: 11.5px; font-weight: 700; color: var(--indigo-ink); background: var(--surface-alt); padding: 2px 8px; border-radius: 5px; }
.pf-item:hover .pf-item-cat { background: var(--surface); }
.pf-item-title { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-item-meta { flex: none; font-size: 12.5px; color: var(--text-cap); }

/* ===== 프로필 이벤트 카드 (개최일·주최/주관·정원 신청현황) ===== */
.pf-event { display: flex; flex-direction: column; gap: 5px; padding: 15px 16px; border: 1px solid var(--border); border-radius: var(--radius); }
.pf-event:hover { border-color: var(--indigo); background: var(--surface-alt); }
.pf-event-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-event-status { flex: none; font-size: 12px; font-weight: 700; }
.pf-event-status--upcoming { color: var(--indigo-ink); }
.pf-event-status--ongoing { color: var(--green-ink); }
.pf-event-status--ended { color: var(--text-cap); }
.pf-event-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 0 1px; line-height: 1.35; }
.pf-event-line { font-size: 13px; color: var(--text-sub); margin: 0; }
.pf-event-org { color: var(--text-cap); font-size: 12.5px; }
.pf-event-cap { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pf-cap-bar { flex: 1; height: 6px; background: var(--surface-alt); border-radius: 3px; overflow: hidden; }
.pf-cap-bar span { display: block; height: 100%; background: var(--indigo); border-radius: 3px; }
.pf-cap-txt { flex: none; font-size: 12px; color: var(--text-sub); font-variant-numeric: tabular-nums; }

/* 교육 상세 사이드: 학습 성과 카드 */
.edu-outcome { font-size: 14px; color: var(--text-sub); line-height: 1.65; margin: 0; }

/* 교육 상세 수강정보 카드 내 학습 성과 */
.side-outcome { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.side-outcome-label { font-size: 12.5px; font-weight: 700; color: var(--indigo-ink); margin: 0 0 6px; }

/* ===== 글쓰기 에디터 셸 (.fw-editor · 리브레토 인사이트 에디터 참조, fpvdrone 토큰) ===== */
.fw-editor { max-width: 900px; margin: 0 auto; padding-bottom: 40px; }
.fw-editor .form-alert { margin-bottom: 18px; }

/* 히어로: 좌 커버 / 우 분야·제목·부제 */
.fw-hero { display: flex; gap: 22px; align-items: stretch; margin-bottom: 24px; }
.fw-cover { flex: none; width: 220px; min-height: 150px; border: 1.5px dashed var(--border); border-radius: var(--radius); background: var(--surface-alt); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, background .15s; background-size: cover; background-position: center; }
.fw-cover:hover { border-color: var(--indigo); }
.fw-cover.has-image { border-style: solid; border-color: var(--border); }
.fw-cover.has-image .fw-cover-ph { display: none; }
.fw-cover-ph { text-align: center; color: var(--text-cap); font-size: 13px; padding: 18px; line-height: 1.5; }
.fw-cover-ph svg { width: 32px; height: 32px; margin-bottom: 8px; color: var(--text-cap); }
.fw-cover-ph small { font-size: 11.5px; }
.fw-hero-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.fw-category { align-self: flex-start; max-width: 190px; margin-bottom: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); color: var(--indigo-ink); font-weight: 700; font-size: 13px; font-family: inherit; }
.fw-title-input, .fw-subtitle-input, .fw-body-input { display: block; width: 100%; border: none; background: transparent; font-family: inherit; color: var(--text); resize: none; outline: none; overflow: hidden; }
.fw-title-input { font-size: 27px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; padding: 2px 0; }
.fw-title-input::placeholder { color: var(--text-cap); font-weight: 800; }
.fw-subtitle-input { font-size: 15.5px; color: var(--text-sub); line-height: 1.5; padding: 3px 0; margin-top: 3px; }
.fw-subtitle-input::placeholder { color: var(--text-cap); }
.fw-hero-date { font-size: 13px; color: var(--text-cap); margin: 10px 0 0; }

/* 본문 + 툴바 */
.fw-body { border-top: 1px solid var(--border); }
.fw-toolbar { display: flex; gap: 4px; padding: 9px 0 11px; position: sticky; top: 56px; background: var(--surface); z-index: 6; margin-bottom: 8px; }
.fw-tool { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-sub); font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fw-tool:hover { border-color: var(--indigo); color: var(--indigo-ink); background: var(--surface-alt); }
.fw-body-input { min-height: 340px; font-size: 16px; line-height: 1.8; color: var(--text); }
.fw-gate-note { font-size: 12.5px; color: var(--text-cap); margin: 18px 0 0; }

/* 하단바: 편집창 하단(흐름 배치) — 글자수·저장상태·발행 */
.fw-bottombar { margin-top: 28px; border-top: 1px solid var(--border); }
.fw-bottombar-inner { padding: 14px 0 0; display: flex; align-items: center; gap: 16px; }
.fw-stats { font-size: 12.5px; color: var(--text-cap); font-variant-numeric: tabular-nums; }
.fw-save-status { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-cap); padding-left: 16px; border-left: 1px solid var(--border); }
.fw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .2s; }
.fw-save-status.saving .fw-dot { background: var(--terra); animation: fwPulse 1.2s infinite; }
.fw-save-status.saved .fw-dot { background: var(--green-ink); }
@keyframes fwPulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.fw-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
@media (max-width: 768px) {
    .fw-hero { flex-direction: column; }
    .fw-cover { width: 100%; height: 150px; min-height: 0; }
    .fw-title-input { font-size: 22px; }
    .fw-bottombar-inner { gap: 10px; }
    .fw-save-status { display: none; }
}
@media (max-width: 480px) {
    .fw-toolbar { top: 48px; }   /* 헤더가 480↓에서 48px로 줄어드는 것과 정합 */
}

/* 프로필 수정 — 섹션 구분 + 비밀번호 변경 */
.form-divider { border: none; border-top: 1px solid var(--border); margin: 34px 0 22px; }
.form-section-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 18px; }
.my-set-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 글쓰기 에디터 — 본문(contenteditable) + 편집형 아웃라인 목차 */
.fw-body-wrap { display: flex; gap: 28px; align-items: flex-start; border-top: 1px solid var(--border); }
.fw-body-wrap .fw-body { flex: 1; min-width: 0; border-top: none; }

/* contenteditable 본문 내부 요소 */
.fw-body-input:empty::before { content: attr(data-placeholder); color: var(--text-cap); }
.fw-body-input:focus { outline: none; }
.fw-body-input h2 { font-size: 21px; font-weight: 800; line-height: 1.35; margin: 1.5em 0 .5em; color: var(--text); scroll-margin-top: 80px; }
.fw-body-input h2:first-child { margin-top: .2em; }
.fw-body-input h3 { font-size: 17px; font-weight: 700; line-height: 1.4; margin: 1.2em 0 .4em; color: var(--indigo-ink); scroll-margin-top: 80px; }
.fw-body-input p { margin: 0 0 1em; }
.fw-body-input blockquote { margin: 1.4em 0; padding: 10px 18px; border-left: 3px solid var(--terra); background: var(--surface-alt); color: var(--text-sub); }
.fw-body-input ul, .fw-body-input ol { margin: 0 0 1em; padding-left: 22px; }
.fw-body-input li { margin: 0 0 .3em; }
.fw-body-input .highlight { background: rgba(196,87,58,.15); padding: 0 2px; }

/* 툴바 확장 */
.fw-tool-sep { width: 1px; align-self: stretch; background: var(--border); margin: 4px 2px; }

/* 목차 아웃라인 패널 */
.fw-toc { flex: none; width: 216px; position: sticky; top: 72px; align-self: flex-start; padding-top: 12px; }
.fw-toc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fw-toc-title { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-cap); margin: 0; }
.fw-toc-add { width: 22px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--indigo-ink); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.fw-toc-add:hover { background: var(--surface-alt); border-color: var(--indigo); }
.fw-toc-list { display: flex; flex-direction: column; gap: 1px; }
.fw-toc-item { display: flex; align-items: center; gap: 4px; border-radius: 6px; padding: 1px 2px; }
.fw-toc-item:hover { background: var(--surface-alt); }
.fw-toc-item.dragging { opacity: .45; }
.fw-toc-item[data-level="h3"] { margin-left: 16px; }
.fw-toc-row { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.fw-toc-drag { cursor: grab; color: var(--text-cap); font-size: 12px; user-select: none; opacity: 0; transition: opacity .12s; }
.fw-toc-item:hover .fw-toc-drag { opacity: 1; }
.fw-toc-marker { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.fw-toc-item[data-level="h2"] .fw-toc-marker { background: var(--indigo); }
.fw-toc-text { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-sub); outline: none; padding: 4px 0; overflow-wrap: anywhere; }
.fw-toc-item[data-level="h2"] .fw-toc-text { font-weight: 600; color: var(--text); font-size: 13px; }
.fw-toc-text:empty::before { content: attr(data-placeholder); color: var(--text-cap); }
.fw-toc-text:focus { color: var(--indigo-ink); }
.fw-toc-tools { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s; }
.fw-toc-item:hover .fw-toc-tools { opacity: 1; }
.fw-toc-lvl { width: 20px; height: 20px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-cap); font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 0; }
.fw-toc-lvl.on { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.fw-toc-del { width: 20px; height: 20px; border: none; background: none; color: var(--text-cap); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.fw-toc-del:hover { color: var(--terra); }
.fw-toc-empty { font-size: 12px; line-height: 1.5; color: var(--text-cap); margin: 0; padding-left: 4px; }
@media (max-width: 900px) {
    .fw-body-wrap { display: block; border-top: none; }
    .fw-body-wrap .fw-body { border-top: 1px solid var(--border); }
    .fw-toc { display: none; }
}

/* 커버 업로드 진행 표시 */
.fw-cover { position: relative; }
.fw-cover-spin { display: none; }
.fw-cover.uploading::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); border-radius: inherit; }
.fw-cover.uploading .fw-cover-spin { display: block; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(255,255,255,.55); border-top-color: #fff; border-radius: 50%; animation: fwSpin .7s linear infinite; z-index: 1; }
@keyframes fwSpin { to { transform: rotate(360deg); } }

/* 본문 인라인 이미지 */
.fw-body-input img, .fw-body-img { display: block; max-width: 100%; height: auto; margin: 1.3em auto; border-radius: 8px; }

/* 에디터 세부 정보 섹션 (뉴스 출처·교육·이벤트 등 구조화 필드) */
.fw-meta { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.fw-meta-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.fw-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.fw-meta .form-group { margin: 0; }

/* 커뮤니티 글쓰기: 목차 없는 전체폭 본문 */
.fw-body--full { width: 100%; border-top: 1px solid var(--border); }

/* 글쓰기 정보 사이드바 (상세 페이지 구성 반영 — 이벤트·교육) */
.fw-body-wrap .fw-info { flex: none; width: 264px; position: sticky; top: 72px; align-self: flex-start; }
.fw-info-box { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.fw-info-title { font-size: 13px; font-weight: 700; color: var(--indigo-ink); margin: 0 0 14px; }
.fw-info-field { margin-bottom: 12px; }
.fw-info-field:last-child { margin-bottom: 0; }
.fw-info-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.fw-info-input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface); }
.fw-info-input:focus { outline: none; border-color: var(--indigo-fill); }
@media (max-width: 900px) { .fw-body-wrap .fw-info { width: 100%; position: static; margin-top: 20px; } }
.fw-info-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; color: var(--text-sub); cursor: pointer; }
textarea.fw-info-input { min-height: 64px; resize: vertical; line-height: 1.5; }

/* 이벤트 등록 — 장소 주소검색 행 + 주최·주관 전문가 자동완성 드롭다운 */
.fw-loc-row { display: flex; gap: 6px; }
.fw-loc-row .fw-info-input { flex: 1; min-width: 0; }
.fw-addr-btn { flex: none; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-alt); font-size: 12.5px; font-family: inherit; color: var(--text-sub); cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.fw-addr-btn:hover { border-color: var(--indigo); color: var(--indigo-ink); }
.fw-suggest-wrap { position: relative; }
.fw-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); max-height: 220px; overflow-y: auto; }
.fw-suggest-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; font-size: 13px; font-family: inherit; color: var(--text); cursor: pointer; }
.fw-suggest-item:hover { background: var(--surface-alt); }

/* ===== 관리자 P1 공용 컴포넌트 (모달·툴바·탭·뱃지 확장) ===== */
/* 기존 .admin-* / .badge-sm 톤 유지: 헤어라인 테두리 + 절제된 톤, 신규 root 토큰 없음 */

/* 상태 뱃지 확장 (badge-sm 팔레트 확충) — amber/red는 기존 팔레트에 대응 토큰이 없어
   green-bg/green-ink 패턴(pale bg + 짙은 ink)으로만 최소 정의 */
.badge-amber { background: var(--amber-bg); color: var(--amber-ink); }  /* 예약/대기 */
.badge-red   { background: var(--red-bg); color: var(--red-ink); }  /* 반려/정지/삭제 */

/* 툴바: 검색 input + select 필터 */
.admin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.admin-toolbar input[type="search"],
.admin-toolbar input[type="text"],
.admin-toolbar select {
    padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
    font-size: 13.5px; font-family: inherit; color: var(--text); background: var(--surface);
}
.admin-toolbar input[type="search"],
.admin-toolbar input[type="text"] { flex: 1 1 200px; min-width: 140px; }
.admin-toolbar select { flex: none; cursor: pointer; }
.admin-toolbar input:focus,
.admin-toolbar select:focus { outline: none; border-color: var(--indigo-fill); }
.admin-toolbar-spacer { flex: 1 1 auto; }
/* 고정 명령 줄 = 하나(10-08 레이아웃 규정) — 뉴스 큐 nq-cmd · 트렌딩 tr-cmd · 공고·콘텐츠 인라인 sticky 세 벌이 여백만 달랐다 */
.admin-cmd { position: sticky; top: var(--admin-stick); z-index: 6; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 0; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
@media (max-width: 768px) {
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-toolbar select { width: 100%; }
    .admin-toolbar input[type="search"], .admin-toolbar input[type="text"] { flex: none; }   /* 10-08: 세로로 쌓이면 flex-basis 200 이 높이가 돼 검색 칸이 200px 였다 */
}

/* 밑줄 탭 */
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-tab {
    padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text-sub);
    border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; white-space: nowrap;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.on { color: var(--indigo-ink); border-bottom-color: var(--indigo-fill); font-weight: 700; }

/* 중앙 모달 (오버레이 + 카드) — 열림/닫힘·ESC·바깥클릭은 페이지 JS가 .active 토글 */
.admin-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(26, 26, 26, 0.5); padding: 20px;
    align-items: center; justify-content: center;
}
.admin-modal-overlay.active { display: flex; }
.admin-modal {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    width: 100%; max-width: 520px; max-height: 90vh; display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(26, 26, 26, 0.18);
}
.admin-modal__header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.admin-modal__header h2 { font-size: 16px; font-weight: 700; margin: 0; }
.admin-modal__close {
    flex: none; width: 30px; height: 30px; border: none; background: none; cursor: pointer;
    font-size: 20px; line-height: 1; color: var(--text-cap); border-radius: 6px;
}
.admin-modal__close:hover { background: var(--surface-alt); color: var(--text); }
.admin-modal__body { padding: 20px; overflow-y: auto; }
.admin-modal__footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 14px 20px; border-top: 1px solid var(--border);
}

/* 회원 관리: 사용자 셀 · 모달 액션 섹션 · 페이지네이션 · 플래시 */
.admin-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-user__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--indigo); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; overflow: hidden; }
.admin-user__avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-user__meta { min-width: 0; }
.admin-user__nick { font-weight: 700; color: var(--text); }
.admin-user__email { font-size: 12px; color: var(--text-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-modal__section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.admin-modal__section h3 { font-size: 12px; font-weight: 700; color: var(--text-cap); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; }
.admin-modal__row { display: flex; gap: 8px; align-items: center; }
.admin-modal__row .form-input { flex: 1; min-width: 0; }
.admin-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.admin-pagination a, .admin-pagination span { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-sub); }
.admin-pagination a:hover { border-color: var(--indigo); color: var(--indigo-ink); }
.admin-pagination .on { background: var(--indigo-fill); border-color: var(--indigo-fill); color: #fff; font-weight: 700; }
.admin-empty { text-align: center; padding: 48px 20px; color: var(--text-cap); font-size: 14px; }
.admin-flash { padding: 11px 16px; border-radius: var(--radius); font-size: 13.5px; margin-bottom: 16px; }
.admin-flash.ok { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.admin-flash.err { background: var(--surface); color: var(--terra); border: 1px solid var(--terra); }

/* 모달 내 정의목록 (dt/dd) */
.admin-modal__dl { display: grid; grid-template-columns: 100px 1fr; gap: 8px 14px; margin: 0; font-size: 13.5px; }
.admin-modal__dl dt { color: var(--text-cap); font-weight: 600; }
.admin-modal__dl dd { margin: 0; color: var(--text); word-break: break-word; }

.btn.is-liked { background: var(--terra); color: #fff; border-color: var(--terra); }
.btn.is-bookmarked { background: var(--indigo); color: #fff; border-color: var(--indigo); }

/* 목록/카드/슬라이더/홈 썸네일 이미지 — 컨테이너 채우기(업로드 썸네일 표시) */
.col-article-thumb img, .list-card-thumb img, .edu-card-thumb img, .edu-carousel-card-thumb img,
.evt-row-poster img, .evt-hero-img img, .side-evt-poster img, .rel-card-thumb img,
.col-thumb img, .edu-flow-thumb img, .r-evt-thumb img,
.hero-slide-img img, .hero-thumb-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ===================== 다크모드 =====================
   브랜드색(--indigo/--terra)은 유지, 배경·텍스트·보더·강조배경만 반전.
   명시 토글: :root[data-theme="dark"] / 시스템 선호: @media(라이트 명시 아닐 때) */
:root[data-theme="dark"],
:root:not([data-theme="light"]) {
    /* placeholder — 실제 값은 아래 두 규칙에서 */
}
:root[data-theme="dark"] {
    --bg: #15131C; --surface: #1D1A27; --surface-alt: #262231;
    --border: #332E42; --text: #ECEAF2; --text-sub: #ADA6BE; --text-cap: #837C93;
    --indigo-pale: #2A2440; --indigo-light: #2A2440; --indigo-soft: #9A90BF; --indigo-ink: #B7ABDE; --indigo-fill: #6B5FA5; --surface-chip: #262231;
    --amber-bg: #3A2F1C; --amber-ink: #D9B26A; --red-bg: #3B2125; --red-ink: #EE8F86;
    --terra-bg: #38231D; --green-bg: #1B3226; --green-ink: #6FC896;
    --bg-light: #201C2A; --white: #1D1A27;
    --text-muted: #837C93; --text-light: #837C93; --text-main: #ECEAF2;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #15131C; --surface: #1D1A27; --surface-alt: #262231;
        --border: #332E42; --text: #ECEAF2; --text-sub: #ADA6BE; --text-cap: #837C93;
        --indigo-pale: #2A2440; --indigo-light: #2A2440; --indigo-soft: #9A90BF; --indigo-ink: #B7ABDE; --indigo-fill: #6B5FA5; --surface-chip: #262231;
        --amber-bg: #3A2F1C; --amber-ink: #D9B26A; --red-bg: #3B2125; --red-ink: #EE8F86;
        --terra-bg: #38231D; --green-bg: #1B3226; --green-ink: #6FC896;
        --bg-light: #201C2A; --white: #1D1A27;
        --text-muted: #837C93; --text-light: #837C93; --text-main: #ECEAF2;
        color-scheme: dark;
    }
}
/* 테마 토글 버튼 (헤더) */
.h-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; background: transparent; color: var(--text-sub); cursor: pointer; border-radius: var(--radius); flex-shrink: 0; }
.h-theme-toggle:hover { background: var(--surface-alt); color: var(--text); }
.h-theme-toggle .ic-sun { display: none; }
.h-theme-toggle .ic-moon { display: block; }
:root[data-theme="dark"] .h-theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .h-theme-toggle .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .h-theme-toggle .ic-sun { display: block; }
    :root:not([data-theme="light"]) .h-theme-toggle .ic-moon { display: none; }
}

/* ── 다크모드 보정 (2026-07-14) — 하드코딩 밝은 배경이 안 뒤집혀 반전된 글씨가 묻히는 지점 ──
   · .header: rgba(255,…) 고정 → 다크 서피스 기반 반투명으로
   · .m-nav(모바일 메뉴): #fff 고정 → var(--surface)
   · .pick-arrow: 흰 원 고정 → 서피스
   · 본문 텍스트는 살짝 낮춘 밝기(#E4E1EC)로 — 반전하되 도드라지지 않게 */
:root[data-theme="dark"] .header { background: rgba(29, 26, 39, 0.97); }
:root[data-theme="dark"] .m-nav { background: var(--surface); }
:root[data-theme="dark"] .pick-arrow { background: var(--surface); }
:root[data-theme="dark"] .logo .logo-lt { display: none; }
:root[data-theme="dark"] .logo .logo-dk { display: block; }
:root[data-theme="dark"] .pick-arrow:hover { background: var(--surface-alt); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] { --text: #E4E1EC; --text-main: #E4E1EC; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .header { background: rgba(29, 26, 39, 0.97); }
    :root:not([data-theme="light"]) .m-nav { background: var(--surface); }
    :root:not([data-theme="light"]) .pick-arrow { background: var(--surface); }
    :root:not([data-theme="light"]) .logo .logo-lt { display: none; }
    :root:not([data-theme="light"]) .logo .logo-dk { display: block; }
    :root:not([data-theme="light"]) .pick-arrow:hover { background: var(--surface-alt); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
    :root:not([data-theme="light"]) { --text: #E4E1EC; --text-main: #E4E1EC; }
}

/* 뉴스 본문 유튜브 임베드 (워커 자동 삽입 — sanitizeHtml 조건부 허용 태그) */
.video-embed { margin: 20px 0; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; background: #000; }

/* ── 버튼 링크 색 방어 (2026-07-15) — 스코프 링크 색 규칙(.auth-footer a 등, 특이성 0,1,1)이
   a.btn-*(0,1,0)의 글씨색을 덮어 "terra 배경+terra 글씨"로 안 보이던 버그. 파일 끝 배치로 우선 적용. ── */
a.btn-primary, a.btn-primary:visited, a.btn-primary:hover { color: #fff; }
a.btn-secondary, a.btn-secondary:visited { color: var(--indigo-ink); }
a.btn-outline, a.btn-outline:visited { color: var(--text-sub); }
a.btn-white, a.btn-white:visited { color: var(--indigo-ink); }

/* 전문가 신청 폼 — 섹션 구획 + 2열 그리드 (서체 위계: 섹션 제목 15/700 > 라벨 13.5/600 > 입력 14.5) */
.ea-sec { margin-bottom: 26px; padding-bottom: 4px; }
.ea-sec-t { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.ea-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ea-row .form-group { margin-bottom: 0; }
.ea-row + .form-group, .ea-row + .ea-row { margin-top: 16px; }
@media (max-width: 640px) { .ea-row { grid-template-columns: 1fr; gap: 16px; } }

/* 전문가 티커 — 인원이 적으면(복제 미사용) 흐르는 애니메이션 대신 정적 나열 */
.r-expert-ticker-track.is-static { animation: none; width: auto; flex-wrap: wrap; }

/* 뉴스 번역·재구성 고지 (본문 상단) */
.news-origin-note { margin: 28px 0 0; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.news-origin-note p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-sub); }
.news-origin-note a { color: var(--indigo-ink); font-weight: 600; }
.news-origin-note .news-origin-link { margin-top: 12px; }
.news-origin-note .news-origin-link a.btn { color: var(--indigo-ink); }

/* 에디터 인사이트 — 뉴스 본문 서두, 우리 관점 요약(본문과 구분되는 배경) */
.editor-insight { margin: 0 0 24px; padding: 18px 20px; background: var(--indigo-pale); border-radius: var(--radius); border: 1px solid var(--indigo-soft); }
.editor-insight-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--indigo-ink); text-transform: none; display: inline-flex; align-items: center; gap: 6px; }
.editor-insight-label::before { content: ""; width: 4px; height: 14px; background: var(--indigo); border-radius: 2px; }
.editor-insight-body { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); font-weight: 500; }

/* ── 공고: PC 2열 그리드·정사각 포스터·상세 정보 2열 (주인님 2026-07-17 #3) ── */
.notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.notice-grid .evt-row { margin: 0; }
.notice-grid .evt-row-poster { width: 150px; aspect-ratio: 1 / 1; }
.notice-hero .evt-hero-img { aspect-ratio: 1 / 1; height: 320px; }
.notice-info-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
@media (max-width: 1024px) {
    .notice-grid { grid-template-columns: 1fr; }
    .notice-info-2col { grid-template-columns: 1fr; }
}

/* ── 공고 v3.1 보정 (2026-07-17 #4): 포스터 정사각 강제(flex stretch 차단)·D-day 뱃지 인접·라벨 줄바꿈 방지 ── */
.notice-grid .evt-row { align-items: flex-start; }
.notice-grid .evt-row-poster { width: 150px; height: 150px; }
.notice-hero .evt-hero-info-top { justify-content: flex-start; }
.notice-hero .evt-hero-dl-row dt { width: 76px; white-space: nowrap; }
.notice-info-2col dt { width: 76px; white-space: nowrap; }
@media (max-width: 480px) {
    .notice-grid .evt-row-poster { width: 96px; height: 96px; }
}

/* ── 공고 카드 v4 (2026-07-17 #5): 좌=포스터+핵심정보 스택 / 우=뱃지·제목·AI 요약 ── */
.ntc-card { display: flex; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; text-decoration: none; color: var(--text); background: var(--surface); }
.ntc-card:hover .ntc-title { text-decoration: underline; text-underline-offset: 3px; }
.ntc-card--ended { opacity: .55; }
.ntc-left { width: 150px; flex-shrink: 0; }
.ntc-poster { width: 150px; height: 150px; border-radius: 6px; overflow: hidden; background: var(--surface-alt); }
.ntc-poster img { width: 100%; height: 100%; object-fit: cover; }
.ntc-poster .ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--text-cap); }
.ntc-facts { margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.ntc-facts > div { display: flex; gap: 6px; min-width: 0; }
.ntc-facts dt { flex-shrink: 0; width: 28px; color: var(--text-cap); font-weight: 500; }
.ntc-facts dd { margin: 0; color: var(--text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntc-body { flex: 1; min-width: 0; }
.ntc-top { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.ntc-title { margin: 0 0 8px; font-size: 16px; line-height: 1.45; font-weight: 700; }
.ntc-summary { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ntc-overview { margin: 0 0 14px; font-size: 15px; line-height: 1.7; color: var(--text); }
.ntc-overview-meta { margin: 0 0 6px; font-size: 13px; color: var(--text-sub); }
@media (max-width: 480px) { .ntc-left { width: 110px; } .ntc-poster { width: 110px; height: 110px; } }

/* 공고 첨부문서 목록 (2026-07-17 #7) */
.ntc-docs { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ntc-docs a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-sub); text-decoration: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; word-break: break-all; }
.ntc-docs a:hover { color: var(--indigo-ink); border-color: var(--indigo); }
.ntc-docs svg { flex-shrink: 0; }

/* 공고문 모달 뷰어 (2026-07-17 #8) */
.ntc-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 15, 40, .62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.ntc-modal-box { width: min(960px, 100%); height: min(88vh, 1100px); background: var(--surface); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.ntc-modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ntc-modal-title { flex: 1; min-width: 0; margin: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ntc-modal iframe { flex: 1; width: 100%; border: 0; }
.ntc-docs .badge-sm { flex-shrink: 0; }
@media (max-width: 640px) { .ntc-modal { padding: 0; } .ntc-modal-box { height: 100%; border-radius: 0; } }

/* ⛔ hidden 무력화 방지 병기 (cmt-more 실사고 교훈) — display:flex가 [hidden]을 덮는 문제 */
.ntc-modal[hidden] { display: none; }

/* 전문칼럼 하위: 전문가 네트워크 진입 링크 (2026-07-17 #11) */
.col-experts-link { margin-left: auto; align-self: center; flex-shrink: 0; font-size: 13.5px; font-weight: 600; color: var(--text-sub); text-decoration: none; padding: 8px 12px; }
.col-experts-link:hover { color: var(--indigo-ink); }

/* 마감 공고 썸네일 흐림 — 종료 상태가 한눈에 느껴지게 (주인님 2026-07-17 #13) */
.ntc-card--ended { opacity: 1; }
.ntc-card--ended .ntc-poster img, .ntc-img--ended img { filter: grayscale(1) brightness(1.08); opacity: .5; }
.ntc-card--ended .ntc-title, .ntc-card--ended .ntc-summary { color: var(--text-cap); }

/* 공고 툴바 — 탭 좌측 + 기간/검색 우측 정렬 (2026-07-17 #14) */
.ntc-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ntc-filter { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ntc-search { width: 210px; max-width: 100%; }
@media (max-width: 768px) { .ntc-filter { margin-left: 0; width: 100%; } .ntc-search { flex: 1; width: auto; } }

/* ── 공고 타이포 = 뉴스와 동일 규격 (주인님 2026-07-17 #15: 일관성) ──
   목록: 제목 17/1.4·요약 14/1.5·메타 13 (list-card와 동일) / 상세: 제목 26·본문 17/1.9 (article-content와 동일)
   ⚠ notice 스코프로만 — 이벤트 화면 영향 금지 */
.ntc-title { font-size: 17px; line-height: 1.4; }
.ntc-summary { font-size: 14px; line-height: 1.5; }
.ntc-facts { font-size: 13px; }
.notice-hero .evt-hero-title { font-size: 26px; line-height: 1.35; }
.notice-hero .evt-hero-dl-row, .notice-hero .evt-hero-desc { font-size: 14.5px; }
.ntc-overview { font-size: 17px; line-height: 1.9; }
.ntc-overview-meta { font-size: 14px; }
.notice-info-2col { font-size: 14px; }
.notice-info-2col dt, .notice-info-2col dd { font-size: 14px; }
.ntc-docs a { font-size: 14.5px; }

/* ── 공고 히어로 썸네일: 모바일 정사각 보정 (2026-07-18) ──
   이벤트 포스터(3/4.2 세로)와 달리 공고 썸네일은 정사각. 데스크톱 규칙(.notice-hero .evt-hero-img{height:320px})이
   모바일까지 새어 220×320 세로 직사각형이 되던 것을 보정. height 해제로 aspect-ratio 1/1 을 되살리고,
   파일 최후미 배치로 전역 데스크톱 규칙(소스순서 앞)을 확실히 덮는다. */
@media (max-width: 768px) {
    .notice-hero .evt-hero-img { height: auto; width: 100%; max-width: 260px; margin: 0 auto; aspect-ratio: 1 / 1; }
}

/* ── 관리자 접속 통계 (2026-07-18) ── */
.av-card { margin-bottom: 20px; }
.av-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.av-metrics { display: flex; gap: 26px; flex-wrap: wrap; }
.av-metric { display: flex; flex-direction: column; }
.av-metric-v { font-size: 26px; font-weight: 700; color: var(--indigo-ink); line-height: 1.1; }
.av-metric-l { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.av-tabs { display: flex; gap: 4px; }
.av-tabs button { font-size: 13px; padding: 5px 12px; border: 1px solid var(--border); background: var(--surface-chip); border-radius: 16px; cursor: pointer; color: var(--text-sub); }
.av-tabs button.on { background: var(--indigo-fill); border-color: var(--indigo-fill); color: #fff; font-weight: 600; }
.av-legend { display: flex; align-items: center; gap: 16px; margin: 14px 0 8px; font-size: 12px; color: var(--text-sub); flex-wrap: wrap; }
.av-sw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.av-sw-pv { background: var(--indigo-fill); }
.av-sw-uv { background: var(--terra); border-radius: 50%; }
.av-hint { margin-left: auto; color: var(--text-cap); }
.av-chart-wrap { position: relative; }
.av-tip { position: absolute; background: var(--indigo); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 6px; pointer-events: none; white-space: nowrap; z-index: 5; line-height: 1.5; }
.av-empty { text-align: center; color: var(--text-cap); padding: 20px 0; font-size: 13px; }

/* 일자 상세 모달 */
.av-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20,15,40,.62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.av-modal[hidden] { display: none; }
.av-modal-box { width: min(720px, 100%); max-height: 88vh; background: var(--surface); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.av-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.av-modal-head h2 { margin: 0; font-size: 17px; }
.av-modal-body { padding: 20px; overflow-y: auto; }
.av-loading, .av-none { color: var(--text-cap); font-size: 13px; padding: 10px 0; }
.av-sum { display: flex; gap: 28px; margin-bottom: 8px; }
.av-sum > div { display: flex; flex-direction: column; }
.av-sum-v { font-size: 24px; font-weight: 700; color: var(--indigo-ink); }
.av-sum > div > span:last-child { font-size: 12px; color: var(--text-sub); }
.av-h3 { font-size: 13px; font-weight: 700; color: var(--indigo-ink); margin: 22px 0 10px; }
.av-hours { display: flex; align-items: flex-end; gap: 3px; height: 90px; }
.av-hbar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.av-hbar > i { width: 100%; background: var(--indigo-soft, #C9C2E0); min-height: 1px; border-radius: 2px 2px 0 0; }
.av-hbar > span { font-size: 9px; color: var(--text-cap); margin-top: 3px; height: 12px; }
.av-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.av-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.av-row-l { flex: 0 0 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-sub); }
.av-row-bar { flex: 1; height: 8px; background: var(--surface-alt, #F2F0EB); border-radius: 4px; overflow: hidden; }
.av-row-bar > i { display: block; height: 100%; background: var(--indigo-fill); border-radius: 4px; }
.av-row-v { flex-shrink: 0; font-weight: 600; min-width: 34px; text-align: right; }
@media (max-width: 640px) { .av-two { grid-template-columns: 1fr; } .av-hint { display: none; } .av-metrics { gap: 18px; } }

/* ── 대시보드 집중 패널 (2026-07-18) ── */
.af-todo-card { margin-bottom: 20px; }
.af-todo-total { font-size: 13px; color: var(--terra); font-weight: 700; }
.af-allclear { color: var(--text-sub); font-size: 13.5px; padding: 6px 0 2px; }
.af-todos { display: flex; gap: 12px; flex-wrap: wrap; }
.af-todo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--surface-chip); transition: border-color .12s; }
.af-todo:hover { border-color: var(--terra); }
.af-todo-count { font-size: 22px; font-weight: 700; color: var(--terra); line-height: 1; }
.af-todo-label { font-size: 13.5px; color: var(--text-sub); }
.af-row { margin-bottom: 20px; }
.af-more { font-size: 12.5px; color: var(--text-sub); text-decoration: none; }
.af-more:hover { color: var(--indigo-ink); }
.af-signup-nums { display: flex; gap: 22px; margin-bottom: 16px; flex-wrap: wrap; }
.af-signup-nums > div { display: flex; flex-direction: column; }
.af-num { font-size: 22px; font-weight: 700; color: var(--indigo-ink); line-height: 1.1; }
.af-signup-nums > div > span:last-child { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.af-spark { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.af-spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.af-spark-col > i { width: 100%; max-width: 26px; background: var(--indigo-fill); min-height: 2px; border-radius: 3px 3px 0 0; opacity: .85; }
.af-spark-col > span { font-size: 10px; color: var(--text-cap); margin-top: 4px; }
.af-activity td { padding: 9px 4px; }
.af-activity tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.af-week { color: var(--text-cap); font-weight: 400; font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════════════════
   트렌딩 (유튜브·SNS 개인 크리에이터) — 주인님 2026-07-24
   목록은 3열 카드 그리드(임베드는 상세에서만 — 목록에 N개 깔면 외부 요청이 그만큼 늘고
   방문자 데이터가 플랫폼으로 샌다). 카드 이미지는 브랜드 썸네일이지 원본 복제가 아니다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 상단 툴바 ── */
.tr-toolbar { align-items: center; }
.tr-tab-n { font-size: 11px; color: var(--text-cap); margin-left: 3px; }
.filter-tab.on .tr-tab-n { color: inherit; opacity: .75; }
/* 상단 툴바 인라인 제보 (검색 자리 대체 — 주인님 2026-07-24) */
.tr-submit-inline { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tr-submit-inline .tr-submit-input { height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13.5px; min-width: 240px; background: var(--surface); color: var(--text); }
.tr-submit-inline .tr-submit-input:focus { outline: none; border-color: var(--indigo-soft); }
.tr-submit-inline .tr-submit-btn { height: 34px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tr-submit-inline .tr-submit-btn:hover { background: var(--indigo-mid); }
.tr-submit-inline .tr-submit-btn:disabled { opacity: .6; cursor: default; }

/* ── 제보 바 ── */
.tr-submit { margin: 18px 0 26px; padding: 20px 22px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 10px; }
.tr-submit-head { margin-bottom: 12px; }
.tr-submit-t { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.tr-submit-desc { font-size: 13.5px; color: var(--text-sub); margin: 0; }
.tr-submit-form { display: flex; gap: 8px; }
.tr-submit-input { flex: 1; height: 40px; padding: 0 13px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; background: var(--surface); color: var(--text); min-width: 0; }
.tr-submit-input:focus { outline: none; border-color: var(--indigo-soft); }
.tr-submit-btn { height: 40px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tr-submit-btn:hover { background: var(--indigo-mid); }
.tr-submit-btn:disabled { opacity: .6; cursor: default; }
.tr-submit-note { margin: 10px 0 0; font-size: 12.5px; color: var(--text-cap); }
.tr-submit-note a { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; }

/* ── 3열 카드 그리드 ── */
.tr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tr-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tr-card:hover { border-color: var(--indigo-soft); transform: translateY(-2px); }
.tr-card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-light); overflow: hidden; }
.tr-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-card-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-cap); }
.tr-badge { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0,0,0,.62); letter-spacing: -.2px; }
.tr-badge-youtube { background: #C4302B; }
.tr-badge-instagram { background: #C13584; }
.tr-badge-tiktok { background: #111; }
.tr-badge-x { background: #111; }
.tr-badge-threads { background: #111; }
.tr-badge--inline { position: static; display: inline-block; }
/* 재생 글리프 — 순수 CSS 삼각형(이미지·아이콘 폰트 미사용) */
.tr-play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0,0,0,.5); }
.tr-play::after { content: ""; position: absolute; left: 18px; top: 14px; width: 0; height: 0; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tr-card:hover .tr-play { background: rgba(0,0,0,.68); }
.tr-card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tr-card-title { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-card-sum { font-size: 13px; line-height: 1.6; color: var(--text-sub); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-card-meta { margin: auto 0 0; padding-top: 6px; font-size: 12px; color: var(--text-cap); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tr-card-handle { color: var(--indigo-ink); font-weight: 600; }

/* ── 상세 임베드 ── */
.tr-embed { margin: 22px 0; }
.tr-embed iframe { width: 100%; border: 0; border-radius: var(--radius); display: block; }
.tr-embed-yt iframe { aspect-ratio: 16 / 9; background: #000; }
/* 인스타는 세로(9:16)+캡션이라 비율이 다르고, embed.js(외부 스크립트)를 안 써서 높이 자동조절이
   없다 → 고정 높이. width/height 를 함께 주면 aspect-ratio 가 무시되므로 여기선 쓰지 않는다. */
.tr-embed-ig { display: flex; justify-content: center; }
.tr-embed-ig iframe { max-width: 540px; height: 760px; background: var(--surface); }

@media (max-width: 1024px) {
    .tr-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 768px) {
    .tr-grid { grid-template-columns: 1fr; gap: 16px; }
    .tr-search { margin-left: 0; width: 100%; }
    .tr-search-input { flex: 1; min-width: 0; }
    .tr-submit { padding: 16px 15px; }
    .tr-submit-form { flex-direction: column; }
    .tr-submit-btn { width: 100%; }
    .tr-embed-ig iframe { height: 700px; }
}

/* ── 트렌딩 관리 화면 (수집 현황·소스 설정·검수) — 2026-07-24 ── */
.tr-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 4px 0 12px; }
.tr-stat { display: flex; flex-direction: column; gap: 4px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: inherit; }
.tr-stat:hover { border-color: var(--indigo-soft); }
.tr-stat--on { border-color: var(--terra); background: var(--terra-bg); }
.tr-stat-n { font-size: 22px; font-weight: 700; color: var(--indigo-ink); line-height: 1.1; }
.tr-stat--on .tr-stat-n { color: var(--terra); }
.tr-stat-l { font-size: 12.5px; color: var(--text-sub); }
.tr-stat-l em { font-style: normal; color: var(--green-ink); font-weight: 600; }

.tr-panel { margin: 14px 0 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.tr-panel > summary { padding: 12px 15px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
.tr-panel-body { padding: 0 15px 16px; }
.tr-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-src-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-src-table th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); color: var(--text-cap); font-weight: 600; font-size: 12px; }
.tr-src-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tr-src-table tr.is-off { opacity: .5; }
.tr-src-url { color: var(--text-cap); word-break: break-all; max-width: 320px; }
.tr-src-add { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tr-src-add .form-input { flex: 1; min-width: 200px; }

.tr-editor { margin: 20px 0; padding: 20px 22px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.tr-editor-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-card--admin { cursor: default; }
.tr-card--admin:hover { transform: none; }
.tr-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

@media (max-width: 1024px) { .tr-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .tr-stats { grid-template-columns: repeat(2, 1fr); } .tr-src-add .form-input { min-width: 0; } }

/* 트렌딩 상단 인라인 제보 — 모바일 (2026-07-24) */
@media (max-width: 768px) {
    .tr-submit-inline { margin-left: 0; width: 100%; margin-top: 8px; }
    .tr-submit-inline .tr-submit-input { flex: 1; min-width: 0; }
}

/* ── 트렌딩 태그 모아보기 (주인님 2026-07-24) ── */
.tr-tagbar { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 10px; overflow: hidden; transition: max-height .22s ease; }
.tr-tags-morewrap { text-align: center; }
.tr-tags-more { display: none; margin-bottom: 14px; padding: 4px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--indigo-ink); font-size: 12.5px; cursor: pointer; }
.tr-tags-more:hover { background: var(--indigo-pale); border-color: var(--indigo-soft); }
.tr-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-sub); font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.tr-tag:hover { border-color: var(--indigo-soft); color: var(--indigo-ink); }
.tr-tag.on { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.tr-tag-n { font-size: 11px; opacity: .7; }
.tr-active-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-sub); margin: 0 0 16px; }
.tr-active-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: var(--indigo); color: #fff; font-size: 12.5px; text-decoration: none; }
.tr-active-chip span { opacity: .8; }
.tr-active-chip:hover { background: var(--terra); }
.tr-active-note { font-size: 12px; color: var(--text-cap); }
.tr-active-clear { color: var(--terra); text-decoration: underline; text-underline-offset: 2px; font-size: 12.5px; }
.tr-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.tr-card-tag { font-size: 11.5px; color: var(--indigo-soft); background: var(--indigo-pale); border-radius: 4px; padding: 2px 7px; }
.tr-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.tr-card-tag--link { text-decoration: none; }
.tr-card-tag--link:hover { background: var(--indigo-soft); color: #fff; }

/* ── 트렌딩 상단(플랫폼 탭 폐지 후) + 제보 버튼 호버 툴팁 (주인님 2026-07-24) ── */
.tr-head { display: flex; justify-content: flex-end; margin: 4px 0 16px; }
.tr-submit-inline { position: relative; }   /* 툴팁 기준점 */
/* 버튼 호버 시 안내 문구 — 네이티브 title 대신 즉시 뜨는 CSS 말풍선 */
.tr-submit-inline .tr-submit-btn[data-tip] { position: relative; }
.tr-submit-inline .tr-submit-btn::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
    width: max-content; max-width: 300px;
    padding: 9px 12px; border-radius: 8px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border);
    font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
    opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .12s, transform .12s;
    box-shadow: 0 6px 20px rgba(43,30,84,.14); pointer-events: none;
}
.tr-submit-inline .tr-submit-btn:hover::after { opacity: 1; visibility: visible; transform: translateY(0); }
@media (max-width: 768px) {
    .tr-head { justify-content: stretch; }
    .tr-submit-inline .tr-submit-btn::after { right: auto; left: 0; max-width: 82vw; }
}

/* ── 관리자 내비 대기 배지 (2026-07-28) ─────────────────────────────
   큐를 옮길 때 대시보드를 경유하지 않게 하는 장치. 옅은 면 + 진한 텍스트 + 보더
   (어두운 면 채움 금지). 숫자는 tabular-nums 로 자리 흔들림을 막는다. */
.admin-nav-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-nav-badge {
    flex: none; min-width: 20px; padding: 1px 6px; border-radius: 9px;
    background: var(--terra-bg); color: var(--terra); border: 1px solid var(--terra-soft, var(--terra));
    font-size: 11.5px; font-weight: 700; line-height: 1.5; text-align: center;
    font-variant-numeric: tabular-nums;
}
.admin-nav-link.on .admin-nav-badge { background: var(--surface); }
/* 다크 — --terra(#C4573A) 는 다크 리맵 대상이 아니라 --terra-bg(#38231D) 위에서 약 2.8:1 로 AA 미달이다.
   토글(data-theme)과 시스템 선호 양쪽을 같은 규칙으로 덮는다. */
/* 그룹 합계 — 접힌 채로도 "저 안에 일이 있다"가 보이게 (2026-08-06 IA 재편) */
.admin-nav-gsum { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--terra);
                  letter-spacing: 0; text-transform: none; }
/* 집계 실패는 0 과 구분한다 — 크론이 죽은 날과 할 일이 없는 날이 같아 보이면 안 된다 */
.admin-nav-badge-err { color: var(--text-cap); border-color: var(--border); font-size: 10px; }

:root[data-theme="dark"] .admin-nav-badge { color: var(--terra-soft); border-color: #7A4A3C; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .admin-nav-badge { color: var(--terra-soft); border-color: #7A4A3C; }
}

/* ── 회원 전용 게이트 화면 (2026-08-02) ─────────────────────────────
   로그인 폼으로 곧장 던지지 않고 "안에 무엇이 있는지"를 먼저 보여 준다.
   박스in박스 금지 — 카드로 감싸지 않고 여백과 hairline 만으로 위계를 만든다. */
.gate { max-width: 560px; margin: 0 auto; padding: 72px 0 96px; text-align: center; }
.gate-eyebrow {
    margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--terra);
}
.gate-title { margin: 0 0 14px; font-size: 30px; font-weight: 800; line-height: 1.3; color: var(--text); }
.gate-desc { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: var(--text-sub); }
.gate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gate-note { margin: 14px 0 0; font-size: 13px; color: var(--text-cap); }
.gate-open { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border); }
.gate-open-t { margin: 0 0 10px; font-size: 13px; color: var(--text-cap); }
.gate-open-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.gate-open-links a { font-size: 14.5px; font-weight: 600; color: var(--indigo-ink); }
.gate-open-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 768px) {
    .gate { padding: 48px 0 64px; }
    .gate-title { font-size: 24px; }
    .gate-actions .btn { flex: 1 1 100%; }
}

/* ── 칼럼 부분 공개 (2026-08-02) ────────────────────────────────
   본문 아래쪽을 그라데이션으로 서서히 가리고 그 아래 가입 유도를 둔다.
   ⚠overflow:hidden 으로 잘라내는 대신 페이드만 씌운다 — 남은 분량이 있다는 사실 자체가
   읽는 이에게 보여야 가입 동기가 생긴다. */
.article-preview.is-gated { position: relative; padding-bottom: 96px; }
.article-preview.is-gated::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--surface) 78%);
    pointer-events: none;
}
.gate-inline {
    margin: -40px 0 40px; padding: 28px 24px 32px; text-align: center;
    border-top: 1px solid var(--border); position: relative;
}
.gate-inline-t { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.gate-inline-d { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--text-sub); }
.gate-inline-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
    .gate-inline { padding: 24px 4px 28px; }
    .gate-inline-actions .btn { flex: 1 1 100%; }
}
/* 다크 — 페이드 끝색을 표면색에 맞춘다(라이트 흰색 하드코딩 금지) */
:root[data-theme="dark"] .article-preview.is-gated::after {
    background: linear-gradient(to bottom, rgba(29,26,39,0) 0%, var(--surface) 78%);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .article-preview.is-gated::after {
        background: linear-gradient(to bottom, rgba(29,26,39,0) 0%, var(--surface) 78%);
    }
}

/* ── 접속 통계 필터 내역 (2026-08-02) ───────────────────────────
   숫자만 크게 띄우면 봇 트래픽이 실적으로 읽힌다. 무엇을 뺐는지 같이 보여 준다.
   박스in박스 금지 — 카드 안이라 테두리 없이 hairline 하나로만 나눈다. */
.av-filter { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.av-filter-t { margin: 0 0 10px; font-size: 13px; color: var(--text-sub); }
.av-filter-list { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0 0 10px; padding: 0; }
.av-filter-list li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--text-cap); }
.av-filter-list li strong { font-size: 14.5px; font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.av-filter-keep span { color: var(--text); font-weight: 600; }
.av-filter-keep strong { color: var(--indigo-ink); }
.av-filter-n { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text-cap); }
.av-filter-n strong { color: var(--terra); font-weight: 700; }

/* ── 관리자 메일함 (2026-08-02) ─────────────────────────────────
   본문은 남이 보낸 HTML 이라 폭·색이 제멋대로다. 컨테이너에서 강제로 잡는다. */
.mb-meta { margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--border); }
.mb-meta > div { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.9; }
.mb-meta dt { flex: 0 0 68px; color: var(--text-cap); }
.mb-meta dd { margin: 0; color: var(--text); word-break: break-all; }
.mb-body { font-size: 14.5px; line-height: 1.75; color: var(--text); overflow-x: auto; }
.mb-plain { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 14.5px; line-height: 1.8; }
.mb-html { max-width: 100%; }
.mb-html img, .mb-html table { max-width: 100% !important; height: auto; }
.mb-html a { color: var(--indigo-ink); text-decoration: underline; text-underline-offset: 2px; }
.mb-imgblock { display: inline-block; padding: 2px 8px; border: 1px dashed var(--border); border-radius: 4px; font-size: 12px; color: var(--text-cap); }
.mb-unseen td { font-weight: 600; }

/* ── 대시보드 상단 히어로 (2026-08-06 재배치) ──────────────────────────
   ⭐맨 위는 트래픽. 그 옆에 '오늘 처리'를 붙여 보는 것과 할 것을 한 화면에 둔다.
   여백 과다를 줄이려고 카드 안쪽 패딩과 블록 간격을 함께 조인다. */
.af-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; margin-bottom: 14px; align-items: start; }
.af-hero > .admin-card { margin-bottom: 0; }
.af-hero-chart { padding: 14px 16px 12px; }
.af-hero-todo  { padding: 14px 16px; }

/* 지표 4개를 한 줄로 촘촘히 */
.af-hero-chart .av-head { gap: 10px; align-items: center; margin-bottom: 10px; }
.af-hero-chart .av-metrics { gap: 18px; }
.af-hero-chart .av-legend { margin: 8px 0 6px; }
.af-hero-chart .av-chart-wrap { margin-top: 2px; }

/* 오늘 처리 — 좁은 칸이라 가로 나열 대신 세로 목록으로 */
.af-hero-todo .af-todos { flex-direction: column; gap: 2px; }
.af-hero-todo .af-todo { display: flex; align-items: baseline; gap: 9px; width: 100%;
                         padding: 6px 0; border-bottom: 1px solid var(--border); }
.af-hero-todo .af-todo:last-child { border-bottom: 0; }
.af-hero-todo .af-todo-count { min-width: 30px; text-align: right; font-size: 17px; }
.af-hero-todo .af-todo-label { font-size: 13px; }

/* 봇 제외 내역 — 길고 부차적이라 접는다. 펼치기 전에도 요지가 한 줄로 보인다. */
.av-filter[open] .av-filter-sum { margin-bottom: 12px; }
.av-filter-sum { cursor: pointer; font-size: 12.5px; color: var(--text-cap); line-height: 1.6; list-style: none; }
.av-filter-sum::-webkit-details-marker { display: none; }
.av-filter-sum::before { content: '내역'; display: inline-block; margin-right: 7px; padding: 1px 7px;
                         border: 1px solid var(--border); border-radius: 3px; font-size: 11px; color: var(--text-sub); }
.av-filter-sum strong { color: var(--text-sub); font-variant-numeric: tabular-nums; }
details.av-filter { margin-top: 12px; padding-top: 12px; }

/* 여백 조이기 — 블록이 많아 기본 간격이 누적되면 화면이 성기게 보인다 */
.admin-main .admin-stats { gap: 10px; margin-bottom: 14px; }
.admin-main .admin-stat { padding: 12px 14px; }
.admin-main .admin-cols { margin-bottom: 14px; }
.admin-main .admin-cols .admin-card,
.admin-main > .admin-card { padding: 16px; }
.admin-main > .admin-card { margin-bottom: 14px; }
.af-todo-card { margin-bottom: 14px; }
.admin-card-head { margin-bottom: 10px; }

@media (max-width: 1000px) { .af-hero { grid-template-columns: 1fr; } }

/* ── 페이지네이션 (2026-08-06) — 화살표 기호 없이 낱말로 ────────────── */
.pg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      margin: 26px 0 8px; padding-top: 18px; border-top: 1px solid var(--border); }
.pg a, .pg span { font-size: 13px; line-height: 1; text-decoration: none; }
.pg-n, .pg-step { display: inline-flex; align-items: center; justify-content: center;
                  min-width: 32px; height: 32px; padding: 0 9px; border-radius: 5px;
                  border: 1px solid var(--border); color: var(--text-sub);
                  font-variant-numeric: tabular-nums; }
.pg a.pg-n:hover, .pg a.pg-step:hover { border-color: var(--text-sub); color: var(--text); }
.pg .pg-on { border-color: var(--text-sub); color: var(--text); font-weight: 700; }
.pg .pg-off { color: var(--text-cap); border-color: var(--border); opacity: .55; }
.pg-gap { padding: 0 2px; color: var(--text-cap); }
.pg-sum { margin-left: auto; color: var(--text-cap); font-size: 12.5px; }
@media (max-width: 560px) {
    .pg-sum { margin-left: 0; width: 100%; padding-top: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   모바일 개선 (2026-08-06, 주인님 지시)
   근거는 전부 `python3 tools/mobile_audit.py` 실측이다. 추측으로 고치지 않았다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 트렌딩 제보 ──────────────────────────────────────────
   ⛔**안내 창이 터치에서 영영 안 열렸다.** `:hover::after` 가 유일한 여는 길인데
     터치에는 호버가 없다. 모바일용 위치 조정 규칙(max-width:82vw)까지 있었으니
     의도는 있었으나, 열 방법이 없어 한 번도 뜨지 못했다.
   → 모바일에서는 **감추지 않고 그냥 보여 준다.** 세로로는 자리가 있고,
     도움말을 상호작용 뒤에 숨기는 것이 애초에 문제였다. 데스크톱은 호버를 유지한다.
   ⛔**가로로 넘쳤다.** min-width:240px 입력 + 줄바꿈 없는 버튼 ≈ 336px 인데
     `.tr-submit-inline` 에 좁은 폭 규칙이 하나도 없었다. */
.tr-submit-tip { display: none; }

@media (max-width: 768px) {
    .tr-head { display: block; }
    .tr-submit-inline { flex-direction: column; align-items: stretch; gap: 8px; margin-left: 0; width: 100%; }
    .tr-submit-inline .tr-submit-input { width: 100%; min-width: 0; height: 44px; font-size: 16px; }
    .tr-submit-inline .tr-submit-btn { width: 100%; height: 44px; font-size: 15px; }
    /* 호버로만 열리던 안내를 붙박이로 보여 준다 */
    .tr-submit-inline .tr-submit-btn::after { display: none; }
    .tr-submit-tip { display: block; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-cap); }
}

/* ⚠입력 글자를 16px 로 두는 이유: iOS 사파리는 16px 미만 입력에 초점이 가면
   화면을 확대해 버리고, 확대된 화면은 사용자가 손으로 되돌려야 한다. */

/* 말풍선의 어두운 면 채움은 원본 규칙(위쪽)에서 직접 걷어냈다 — 같은 규칙을 두 군데 두지 않는다. */

/* ── 2. 관리자 표 ────────────────────────────────────────────
   ⛔16개 화면이 `.data-table` 을 쓰는데 **가로 스크롤 자리가 없었다.**
     이벤트 표는 8열이라 375px 화면에서 표가 페이지 자체를 밀어낸다.
   ⭐표를 블록으로 만들면 안쪽에 익명 표 상자가 생기고, 그 상자는 최소 내용 폭 아래로는
     줄지 않으므로 **넘치는 만큼 표 안에서만 가로로 스크롤된다.** 페이지는 안 밀린다.
   ⚠`white-space: nowrap` 은 넣지 않는다. 넣으면 모든 표가 무조건 넓어져서
     스크롤이 필요 없던 표까지 스크롤하게 된다. */
@media (max-width: 768px) {
    .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-main { min-width: 0; }
}

/* ── 3. 관리자 내비 ──────────────────────────────────────────
   6그룹 19링크로 늘면서 모바일에서 본문 앞에 열 줄 넘게 쌓였다.
   ⭐한 줄짜리 가로 띠로 바꾼다. 그룹 이름은 줄을 차지하지 않고 사이에 낀다.
   ⚠가로 스크롤은 안에 더 있다는 것을 보여야 한다 — 오른쪽 끝을 흐리게 하지 않고
     띠 자체를 화면 폭까지 늘려 잘린 항목이 눈에 걸리게 둔다. */
@media (max-width: 768px) {
    .admin-nav { padding: 10px 12px; }
    .admin-nav-brand { display: none; }
    .admin-nav nav {
        flex-direction: row; flex-wrap: nowrap;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        gap: 4px; padding-bottom: 2px;
    }
    .admin-nav-group {
        flex: none; flex-basis: auto; margin: 0; padding: 0 6px 0 10px;
        align-self: center; white-space: nowrap;
    }
    .admin-nav nav > .admin-nav-group:first-child { padding-left: 0; }
    .admin-nav-link {
        flex: none; white-space: nowrap;
        min-height: 40px; display: flex; align-items: center; gap: 6px;
        padding: 8px 12px;
    }
    .admin-nav-back { margin-top: 10px; padding-top: 8px; }
}

/* ── 4. 손가락 크기에 못 미치던 조작 대상 ─────────────────── */
@media (max-width: 768px) {
    .cm-search-toggle { height: 40px; }
    .rel-nav-btn { height: 40px; min-width: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   지식베이스 공개 화면 (2026-08-08)
   ⚠처음부터 좁은 폭을 함께 짠다. 나중에 붙이면 그때 이미 넘쳐 있다.
   ═══════════════════════════════════════════════════════════════ */
.kb-head { margin: 8px 0 22px; }
.kb-head h1 { font-size: 26px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
.kb-lead { font-size: 14.5px; color: var(--text-sub); margin: 0 0 14px; line-height: 1.6; }
.kb-search { display: flex; gap: 8px; }
.kb-search input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; font-size: 16px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.kb-search input:focus { outline: none; border-color: var(--indigo-soft); }
.kb-search button { height: 46px; padding: 0 20px; border: 0; border-radius: 8px;
    background: var(--indigo); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.kb-search button:hover { background: var(--indigo-mid); }

.kb-hubs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px; margin-bottom: 26px; }
.kb-hub { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); text-decoration: none; color: inherit; }
.kb-hub:hover { border-color: var(--indigo-soft); }
.kb-hub.on { border-color: var(--indigo); background: var(--indigo-pale); }
.kb-hub-t { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.kb-hub-d { display: block; font-size: 12.5px; color: var(--text-sub); margin-top: 3px; line-height: 1.5; }
.kb-hub-n { display: block; font-size: 12px; color: var(--text-cap); margin-top: 6px; }

.kb-h2 { font-size: 17px; font-weight: 700; margin: 26px 0 12px; }
.kb-h2-n { font-size: 13px; font-weight: 400; color: var(--text-cap); margin-left: 6px; }
.kb-meta { font-size: 13px; color: var(--text-cap); margin: 0 0 12px; }
.kb-empty { font-size: 14.5px; color: var(--text-sub); padding: 30px 0; line-height: 1.7; }

.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.kb-card { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); text-decoration: none; color: inherit; }
.kb-card:hover { border-color: var(--indigo-soft); }
.kb-card--lock { background: var(--surface-alt); }
.kb-card-t { display: block; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45; }
.kb-card-s { display: block; font-size: 13px; color: var(--text-sub); margin-top: 5px; line-height: 1.55; }
.kb-card-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    font-size: 11.5px; color: var(--text-cap); margin-top: 9px; }
.kb-jur { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px;
    border: 1px solid var(--indigo-soft); background: var(--indigo-pale); color: var(--indigo-ink); }
.kb-lock { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px;
    border: 1px solid var(--terra); background: var(--terra-bg); color: var(--terra); }

.kb-note { max-width: 760px; }
.kb-crumb { font-size: 12.5px; color: var(--text-cap); margin: 4px 0 10px; }
.kb-note h1 { font-size: 25px; font-weight: 800; margin: 0 0 10px; line-height: 1.35; letter-spacing: -0.02em; }
.kb-sum { font-size: 16px; color: var(--text-sub); margin: 0 0 10px; line-height: 1.65; }
.kb-tags { display: flex; gap: 6px; margin: 0 0 16px; }
.kb-unver { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px;
    border: 1px solid var(--terra); background: var(--terra-bg); color: var(--terra); }
/* ⛔법령 고지 — 옅은 면에 테두리. 어두운 면 채움을 쓰지 않는다. */
.kb-legal { font-size: 12.5px; line-height: 1.6; color: var(--text-sub);
    border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; margin: 0 0 18px;
    background: var(--surface-alt); }
.kb-body p { font-size: 16.5px; line-height: 1.85; color: var(--text); margin: 0 0 18px; }
.kb-krnote { font-size: 14px; line-height: 1.7; color: var(--text); background: var(--surface-alt);
    border: 1px solid var(--border); border-radius: 8px; padding: 13px 15px; margin: 18px 0; }
.kb-links, .kb-src { margin: 0; padding-left: 18px; }
.kb-links li, .kb-src li { font-size: 14.5px; line-height: 1.9; }
.kb-rel { font-size: 11.5px; color: var(--text-cap); margin-left: 6px; }
.kb-gate { border: 1px solid var(--indigo-soft); border-radius: 10px; padding: 22px 20px;
    background: var(--indigo-pale); margin: 18px 0; }
.kb-gate-t { font-size: 16px; font-weight: 700; margin: 0 0 5px; color: var(--indigo-ink); }
.kb-gate-d { font-size: 14px; color: var(--text-sub); margin: 0 0 14px; }
.kb-gate-b { display: inline-block; height: 44px; line-height: 44px; padding: 0 20px;
    border-radius: 8px; background: var(--indigo); color: #fff; font-size: 15px; font-weight: 600;
    text-decoration: none; margin-right: 8px; }
.kb-gate-b--alt { background: var(--surface); color: var(--indigo-ink); border: 1px solid var(--indigo-soft); }

@media (max-width: 768px) {
    .kb-head h1 { font-size: 22px; }
    .kb-hubs { grid-template-columns: 1fr 1fr; }
    .kb-grid { grid-template-columns: 1fr; }
    .kb-note h1 { font-size: 21px; }
    .kb-body p { font-size: 16px; line-height: 1.8; }
    .kb-gate-b { display: block; margin: 0 0 8px; text-align: center; }
}
@media (max-width: 480px) {
    .kb-hubs { grid-template-columns: 1fr; }
}

/* ── 물어보기 /kb/ask (2026-08-09) ───────────────────────────────
   ⭐답이 없어도 근거는 보인다. AI 가 꺼져 있어도 화면이 쓸모를 잃지 않게. */
.kb-ask-hint { margin: 6px 0 0; }
.kb-ask-hint > p { font-size: 14px; color: var(--text-sub); margin: 0 0 10px; }
.kb-samples { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.kb-samples a { display: inline-block; padding: 9px 14px; border: 1px solid var(--border);
    border-radius: 99px; background: var(--surface); color: var(--text-sub);
    font-size: 13.5px; text-decoration: none; }
.kb-samples a:hover { border-color: var(--indigo-soft); color: var(--indigo-ink); }

.kb-answer { padding: 18px 20px; border: 1px solid var(--indigo-soft); border-radius: 10px;
    background: var(--indigo-pale); margin: 4px 0 22px; }
.kb-answer p { font-size: 15.5px; line-height: 1.85; color: var(--text); margin: 0 0 12px; }
.kb-answer p:last-child { margin-bottom: 0; }
.kb-cite { display: inline-block; min-width: 20px; padding: 0 5px; margin: 0 1px;
    border-radius: 4px; background: var(--surface); color: var(--indigo-ink);
    font-size: 12px; font-weight: 700; text-decoration: none; vertical-align: 1px; }
.kb-cite:hover { background: var(--indigo); color: #fff; }
.kb-noai { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-alt); margin: 4px 0 20px; }

.kb-ev-title { font-size: 15px; font-weight: 700; color: var(--text-sub); margin: 22px 0 12px; }
.kb-evidence { list-style: none; counter-reset: ev; padding: 0; margin: 0; display: grid; gap: 12px; }
.kb-evidence > li { counter-increment: ev; position: relative; padding: 15px 16px 15px 46px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.kb-evidence > li::before { content: counter(ev); position: absolute; left: 15px; top: 15px;
    width: 21px; height: 21px; line-height: 21px; text-align: center; border-radius: 5px;
    background: var(--indigo-pale); color: var(--indigo-ink); font-size: 12px; font-weight: 700; }
.kb-evidence > li:target { border-color: var(--indigo); }
.kb-ev-head { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 7px; }
.kb-ev-head a { font-size: 14.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.kb-ev-head a:hover { color: var(--indigo-ink); }
.kb-ev-book, .kb-ev-conf { display: inline-block; font-size: 11px; padding: 1px 7px;
    border-radius: 99px; border: 1px solid var(--border); background: var(--surface-alt);
    color: var(--text-cap); }
.kb-ev-text { font-size: 13.5px; line-height: 1.75; color: var(--text-sub); margin: 0; }
.kb-ev-src { font-size: 11.5px; color: var(--text-cap); margin: 9px 0 0; }
.kb-ev-src a { color: var(--text-cap); margin-left: 5px; }

@media (max-width: 768px) {
    .kb-answer { padding: 15px 16px; }
    .kb-answer p { font-size: 15px; }
    .kb-evidence > li { padding: 14px 14px 14px 42px; }
    .kb-samples a { font-size: 13px; padding: 10px 13px; }
}

/* ⛔원고 근거는 본문 대신 위치만 보인다 (2026-08-10) */
.kb-ev-hidden { color: var(--text-cap); font-style: normal; }

/* ── 배우기 /learn (2026-08-11) ───────────────────────────────
   ⭐순서가 보이는 것이 이 화면의 전부다. 번호와 목표로 단계를 가른다. */
.kbl-notice { padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-alt); margin: 0 0 20px; }
.kbl-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; counter-reset: st; }
.kbl-stage { border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    padding: 18px 20px; }
.kbl-stage-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.kbl-stage-n { flex: none; width: 30px; height: 30px; line-height: 30px; text-align: center;
    border-radius: 8px; background: var(--indigo-pale); color: var(--indigo-ink);
    font-size: 14px; font-weight: 800; }
.kbl-stage-h h2 { font-size: 17px; font-weight: 800; margin: 3px 0 5px; letter-spacing: -0.01em; }
.kbl-goal { font-size: 14px; color: var(--text-sub); margin: 0 0 6px; line-height: 1.65; }
.kbl-stage-m { font-size: 12px; color: var(--text-cap); margin: 0; }
.kbl-mods { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.kbl-mods a { display: flex; gap: 10px; align-items: center; padding: 11px 13px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt);
    text-decoration: none; color: inherit; }
.kbl-mods a:hover { border-color: var(--indigo-soft); background: var(--surface); }
.kbl-mod-c { flex: none; font-size: 11.5px; font-weight: 700; color: var(--text-cap);
    min-width: 34px; }
.kbl-mod-t { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.kbl-mod-n { flex: none; font-size: 11.5px; color: var(--text-cap); }
.kbl-foot { margin-top: 22px; line-height: 1.7; }

/* 모듈 화면 */
.kbl-crumb { font-size: 12.5px; color: var(--text-cap); margin: 4px 0 14px; }
.kbl-crumb a { color: var(--text-sub); }
.kbl-crumb span::before { content: "· "; color: var(--text-cap); }
.kbl-seq { font-size: 12px; color: var(--text-cap); margin: 0 0 4px; font-weight: 700; }
.kbl-outcome { padding: 15px 18px; border: 1px solid var(--indigo-soft); border-radius: 10px;
    background: var(--indigo-pale); margin: 0 0 22px; }
.kbl-outcome b { display: block; font-size: 12px; color: var(--indigo-ink); margin-bottom: 5px; }
.kbl-outcome p { font-size: 15.5px; line-height: 1.7; color: var(--text); margin: 0; font-weight: 600; }
.kbl-list { display: grid; gap: 8px; margin: 12px 0 24px; }
.kbl-row { display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; align-items: baseline;
    padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); text-decoration: none; color: inherit; }
.kbl-row:hover { border-color: var(--indigo-soft); }
.kbl-row--off { background: var(--surface-alt); }
.kbl-n { grid-row: span 3; font-size: 12.5px; font-weight: 700; color: var(--text-cap);
    text-align: center; padding-top: 2px; }
.kbl-t { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.45; }
.kbl-row--off .kbl-t { color: var(--text-sub); }
.kbl-s { font-size: 13px; color: var(--text-sub); line-height: 1.6; }
.kbl-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.kbl-m:empty { display: none; }
.kbl-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px;
    border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-cap); }
.kbl-badge--lock { border-color: var(--indigo-soft); color: var(--indigo-ink); }
.kbl-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.kbl-nav-a { display: block; padding: 14px 16px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); text-decoration: none; color: inherit; }
.kbl-nav-a:hover { border-color: var(--indigo-soft); }
.kbl-nav-a span { display: block; font-size: 11.5px; color: var(--text-cap); margin-bottom: 3px; }
.kbl-nav-a b { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; }
.kbl-nav-a--next { text-align: right; }
.kbl-nav-a--off { background: var(--surface-alt); }

@media (max-width: 768px) {
    .kbl-stage { padding: 15px 16px; }
    .kbl-stage-h h2 { font-size: 16px; }
    .kbl-nav { grid-template-columns: 1fr; }
    .kbl-nav-a--next { text-align: left; }
    .kbl-row { grid-template-columns: 26px 1fr; padding: 12px 13px; }
}

/* 참고 단계 — 순서 밖이라는 것을 라벨로 알린다 (2026-08-11) */
.kbl-opt { display:inline-block; margin-left:9px; font-size:11px; font-weight:600;
    padding:2px 9px; border-radius:99px; border:1px solid var(--border);
    background:var(--surface-alt); color:var(--text-cap); vertical-align:2px; }
.kbl-stage--opt .kbl-stage-n { background:var(--surface-alt); color:var(--text-cap); }

/* ── 교육훈련 /admin-training (2026-08-12) ─────────────────────
   ⭐쓴 것과 연 것을 갈라 보이는 것이 이 화면의 전부다. */
.kbt-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 18px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); overflow: hidden; }
.kbt-f { flex: 1 1 96px; padding: 13px 16px; border-right: 1px solid var(--border); }
.kbt-f:last-child { border-right: 0; }
.kbt-f b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums; }
.kbt-f span { display: block; font-size: 11.5px; color: var(--text-cap); margin-top: 2px; }
.kbt-f--warn b { color: var(--indigo-ink); }

.kbt-notice { padding: 12px 15px; border: 1px solid var(--indigo-soft); border-radius: 9px;
    background: var(--indigo-pale); font-size: 13.5px; line-height: 1.7; margin: 0 0 18px; }

.kbt-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px;
    border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.kbt-tabs a { padding: 8px 14px; border: 1px solid var(--border); border-radius: 99px;
    background: var(--surface); color: var(--text-sub); font-size: 13.5px;
    text-decoration: none; font-weight: 600; }
.kbt-tabs a:hover { border-color: var(--indigo-soft); }
.kbt-tabs a.on { background: var(--indigo-pale); border-color: var(--indigo-soft);
    color: var(--indigo-ink); }

.kbt-lead { font-size: 14px; color: var(--text-sub); line-height: 1.75; margin: 0 0 18px;
    max-width: 78ch; }
.kbt-warn { color: var(--indigo-ink); font-weight: 600; }
.kbt-empty { padding: 22px; text-align: center; color: var(--text-cap);
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface-alt); }

.kbt-stage { border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    margin-bottom: 14px; overflow: hidden; }
.kbt-stage-h { display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px;
    border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.kbt-code { flex: none; font-size: 12px; font-weight: 800; color: var(--indigo-ink);
    background: var(--indigo-pale); border-radius: 6px; padding: 4px 9px;
    font-variant-numeric: tabular-nums; }
.kbt-stage--opt .kbt-code { background: var(--surface); color: var(--text-cap); }
.kbt-stage-t { flex: 1; min-width: 0; }
.kbt-stage-t h2 { font-size: 16px; font-weight: 750; margin: 0 0 4px; letter-spacing: -0.01em; }
.kbt-stage-t p { font-size: 13px; color: var(--text-sub); margin: 0; line-height: 1.6; }
.kbt-opt { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 600;
    padding: 1px 8px; border-radius: 99px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-cap); vertical-align: 2px; }
.kbt-stage-n { flex: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-end;
    font-size: 11.5px; color: var(--text-cap); font-variant-numeric: tabular-nums; }
.kbt-miss { color: var(--indigo-ink); font-weight: 700; }
.kbt-open { font-weight: 700; }

.kbt-mods { padding: 4px 18px 16px; }
.kbt-mod { padding: 13px 0; border-bottom: 1px solid var(--border); }
.kbt-mod:last-child { border-bottom: 0; padding-bottom: 2px; }
.kbt-mod-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.kbt-mcode { font-size: 11.5px; color: var(--text-cap); font-weight: 700; min-width: 38px; }
.kbt-mod-h b { font-size: 14.5px; font-weight: 700; }
.kbt-media { font-size: 11px; padding: 1px 8px; border-radius: 99px;
    border: 1px solid var(--indigo-soft); color: var(--indigo-ink); }
.kbt-see { margin-left: auto; font-size: 12px; color: var(--text-cap); text-decoration: none; }
.kbt-see:hover { color: var(--indigo-ink); }
.kbt-out { font-size: 13px; color: var(--text-sub); margin: 5px 0 8px 46px; line-height: 1.6; }
.kbt-notes { list-style: none; padding: 0; margin: 0 0 0 46px; display: grid; gap: 4px; }
/* 과정 짜임새 — 모듈 접기(10-08 4단계). 접힌 줄에 편수·목표, 눌러서 노트 목록 */
details.kbt-mod > summary { list-style: none; cursor: pointer; }
details.kbt-mod > summary::-webkit-details-marker { display: none; }
details.kbt-mod > summary:hover b { color: var(--indigo-ink); }
.kbt-mod-n { margin-left: auto; font-size: 12px; color: var(--text-cap); }
.kbt-modw { position: relative; }
.kbt-modw > .kbt-see { position: absolute; top: 13px; right: 0; }
details.kbt-mod > summary { padding-right: 72px; }
.kbt-modw:last-child > .kbt-mod { border-bottom: 0; padding-bottom: 2px; }
details.kbt-mod > summary .kbt-out { flex-basis: 100%; margin: 3px 0 0 46px; }
details.kbt-mod[open] > .kbt-notes { margin-top: 8px; }
.kbt-allbtn { margin: 0 0 14px; }
.kbt-note { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12.5px; }
.kbt-note code { font-size: 11.5px; color: var(--text-sub); }
.kbt-note a { text-decoration: none; }
.kbt-note a:hover code { color: var(--indigo-ink); }
.kbt-note--missing code { color: var(--text-cap); }
.kbt-anch { font-size: 11px; color: var(--text-cap); }
.kbt-b { font-size: 10.5px; padding: 1px 7px; border-radius: 99px; border: 1px solid var(--border);
    color: var(--text-cap); background: var(--surface-alt); white-space: nowrap; }
.kbt-b--open { border-color: var(--indigo-soft); color: var(--indigo-ink);
    background: var(--indigo-pale); }
.kbt-b--no { border-style: dashed; }

.kbt-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); }
.kbt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kbt-table th, .kbt-table td { text-align: left; padding: 9px 13px;
    border-bottom: 1px solid var(--border); }
.kbt-table th { font-size: 11.5px; color: var(--text-cap); font-weight: 700;
    background: var(--surface-alt); white-space: nowrap; }
.kbt-table code { font-size: 11px; color: var(--text-cap); margin-right: 4px; }
.kbt-num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-sub); }
.kbt-dim { color: var(--text-cap); font-size: 12px; }
.kbt-r-empty { background: var(--surface-alt); }
.kbt-zero { color: var(--text-cap); }

.kbt-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.kbt-box { border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    padding: 15px 17px; }
.kbt-box h3 { font-size: 13.5px; font-weight: 750; margin: 0 0 10px; }
.kbt-kv { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.kbt-kv li { display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; gap: 12px; }
.kbt-kv span { color: var(--text-sub); }
.kbt-kv b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kbt-hint { font-size: 11.5px; color: var(--text-cap); margin: 10px 0 0; line-height: 1.55; }

.kbt-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kbt-rule { border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    padding: 16px 18px; }
.kbt-rule h3 { font-size: 14.5px; font-weight: 750; margin: 0 0 8px; letter-spacing: -0.01em; }
.kbt-rule p { font-size: 13px; color: var(--text-sub); margin: 0; line-height: 1.75; }
.kbt-rule code { font-size: 11.5px; }

@media (max-width: 900px) {
    .kbt-cols, .kbt-rules { grid-template-columns: 1fr; }
    .kbt-stage-h { flex-wrap: wrap; }
    .kbt-stage-n { flex-direction: row; gap: 9px; width: 100%; justify-content: flex-start; }
    .kbt-out, .kbt-notes { margin-left: 0; }
    .kbt-f { flex: 1 1 76px; padding: 11px 12px; }
    .kbt-f b { font-size: 18px; }
}

.kbt-subnote { font-size: 12px; color: var(--text-cap); margin: -8px 0 18px; line-height: 1.6; }

/* 교육훈련 — 머리 설명 (2026-08-12) */
.kbt-desc { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin: -6px 0 16px; }

/* ── 교육훈련 · 교재 읽기 (2026-08-12) ────────────────────────
   ⭐이 화면의 몸통은 글이다. 읽는 폭을 좁게 잡고 줄간격을 넉넉히 준다. */
.kbt-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.kbt-steps a { display: block; padding: 9px 13px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); text-decoration: none; color: inherit; min-width: 0; }
.kbt-steps a:hover { border-color: var(--indigo-soft); }
.kbt-steps a.on { background: var(--indigo-pale); border-color: var(--indigo-soft); }
.kbt-steps span { display: block; font-size: 10.5px; font-weight: 700; color: var(--text-cap);
    letter-spacing: 0.04em; }
.kbt-steps a.on span { color: var(--indigo-ink); }
.kbt-steps b { display: block; font-size: 13px; font-weight: 700; margin: 1px 0; }
.kbt-steps em { display: block; font-style: normal; font-size: 10.5px; color: var(--text-cap); }

.kbt-read { max-width: 72ch; }
.kbt-read-h { padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.kbt-read-c { font-size: 11.5px; font-weight: 700; color: var(--indigo-ink); margin: 0 0 5px;
    letter-spacing: 0.05em; }
.kbt-read-h h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 7px; }
.kbt-read-g { font-size: 14.5px; color: var(--text-sub); margin: 0; line-height: 1.7; }

.kbt-rm { margin-bottom: 34px; }
.kbt-rm h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.015em; margin: 0 0 9px;
    display: flex; gap: 10px; align-items: baseline; }
.kbt-rm h3 span { font-size: 11.5px; font-weight: 700; color: var(--text-cap); }
.kbt-rm-out { font-size: 13.5px; color: var(--text-sub); margin: 0 0 6px; line-height: 1.7;
    padding: 10px 14px; border: 1px solid var(--indigo-soft); border-radius: 8px;
    background: var(--indigo-pale); }
.kbt-rm-out b { color: var(--indigo-ink); font-size: 12px; }
.kbt-rm-media { font-size: 12.5px; color: var(--text-cap); margin: 0 0 12px; }

.kbt-art { padding: 18px 0; border-bottom: 1px solid var(--border); }
.kbt-art:last-child { border-bottom: 0; }
.kbt-art--miss { color: var(--text-cap); font-size: 13px; }
.kbt-art-h { display: flex; flex-wrap: wrap; gap: 9px; align-items: baseline; margin-bottom: 7px; }
.kbt-art-n { flex: none; font-size: 11.5px; font-weight: 700; color: var(--text-cap);
    min-width: 16px; font-variant-numeric: tabular-nums; }
.kbt-art-h h4 { font-size: 16px; font-weight: 750; margin: 0; letter-spacing: -0.012em;
    flex: 1; min-width: 0; line-height: 1.45; }
.kbt-art-m { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.kbt-art-s { font-size: 13.5px; color: var(--text-sub); margin: 0 0 12px 25px; line-height: 1.7; }
.kbt-art-b { margin-left: 25px; }
.kbt-art-b p { font-size: 15px; line-height: 1.95; margin: 0 0 13px; }
.kbt-art-b p:last-child { margin-bottom: 0; }
.kbt-art-b ul { margin: 0 0 13px; padding-left: 19px; }
.kbt-art-b li { font-size: 15px; line-height: 1.9; margin-bottom: 5px; }
.kbt-art-b pre { font-size: 13px; line-height: 1.75; padding: 12px 14px; margin: 0 0 13px;
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: 8px;
    overflow-x: auto; white-space: pre; }
.kbt-art-b code { font-size: 13px; padding: 1px 5px; border-radius: 4px;
    background: var(--surface-alt); }
.kbt-art-b b { font-weight: 700; }
.kbt-art-kr { font-size: 13.5px; line-height: 1.75; margin: 12px 0 0 25px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); }
.kbt-art-kr b { font-size: 12px; color: var(--text-cap); }
.kbt-art-f { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
    font-size: 11.5px; color: var(--text-cap); margin: 12px 0 0 25px; }
.kbt-art-f code { font-size: 11px; }
.kbt-art-f a { color: var(--text-cap); text-decoration: none; }
.kbt-art-f a:hover { color: var(--indigo-ink); }

.kbt-rnav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px;
    padding-top: 20px; border-top: 1px solid var(--border); }
.kbt-rnav a { display: block; padding: 13px 16px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); text-decoration: none; color: inherit; }
.kbt-rnav a:hover { border-color: var(--indigo-soft); }
.kbt-rnav span { display: block; font-size: 11px; color: var(--text-cap); margin-bottom: 2px; }
.kbt-rnav b { font-size: 13.5px; font-weight: 700; }
.kbt-rnav-n { text-align: right; }

@media (max-width: 768px) {
    .kbt-read-h h2 { font-size: 20px; }
    .kbt-art-s, .kbt-art-b, .kbt-art-kr, .kbt-art-f { margin-left: 0; }
    .kbt-art-b p, .kbt-art-b li { font-size: 15.5px; }
    .kbt-rnav { grid-template-columns: 1fr; }
    .kbt-rnav-n { text-align: left; }
    .kbt-steps a { flex: 1 1 130px; }
}

/* ── 사진 찾기 (2026-08-15) ───────────────────────────────────
   ⭐고르기 전에 크게 보여야 한다. 촬영 드론과 FPV 는 작게 보면 구별이 안 된다. */
.nf-photo { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface-alt); }
.nf-photo-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nf-photo-bar input[type=search] { flex: 1; min-width: 180px; height: 38px; padding: 0 12px;
    font-size: 14px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--text); }
.nf-photo-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.nf-photo-tag { padding: 5px 10px; border: 1px solid var(--border); border-radius: 99px;
    background: var(--surface); color: var(--text-sub); font-size: 11.5px; cursor: pointer; }
.nf-photo-tag:hover { border-color: var(--indigo-soft); color: var(--indigo-ink); }
.nf-photo-note { font-size: 12px; color: var(--text-sub); line-height: 1.7; margin: 12px 0 0;
    padding: 10px 13px; border: 1px solid var(--indigo-soft); border-radius: 8px;
    background: var(--indigo-pale); }
.nf-photo-note b { color: var(--indigo-ink); }
.nf-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.nf-photo-grid:empty { display: none; }
.nf-photo-c { border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    overflow: hidden; cursor: pointer; }
.nf-photo-c:hover { border-color: var(--indigo-soft); }
.nf-photo-c.on { border-color: var(--indigo); }
.nf-photo-c--low { opacity: 0.62; }
.nf-photo-c--low:hover { opacity: 1; }
.nf-photo-c img { width: 100%; height: 108px; object-fit: cover; display: block;
    background: var(--surface-alt); }
.nf-photo-m { padding: 7px 9px; font-size: 11px; color: var(--text-sub); line-height: 1.5; }
.nf-photo-by { display: block; color: var(--text-cap); margin-top: 3px; font-size: 10.5px; }
.nf-photo-status { font-size: 12.5px; color: var(--text-sub); margin: 10px 0 0; }

@media (max-width: 768px) {
    .nf-photo-grid { grid-template-columns: repeat(2, 1fr); }
    .nf-photo-c img { height: 96px; }
}

/* ── 부품 도해 /parts (2026-08-17) ────────────────────────────
   ⭐그림이 몸통이다. 넉넉히 두고 설명은 곁에 붙인다. */
.kbp-eyebrow { font-size: 11.5px; font-weight: 700; color: var(--indigo-ink);
    letter-spacing: 0.05em; margin: 0 0 6px; }
.kbp-fig { margin: 24px 0 0; padding: 22px; border: 1px solid var(--border);
    border-radius: 12px; background: var(--surface); }
.kbp-fig svg { display: block; max-width: 100%; height: auto; margin: 0 auto;
    color: var(--text); }
.kbp-fig figcaption { font-size: 12.5px; color: var(--text-cap); line-height: 1.7;
    margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }

.kbp-group { margin-top: 38px; }
.kbp-group-h { display: flex; align-items: baseline; gap: 12px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.kbp-group-h h2 { font-size: 19px; font-weight: 750; margin: 0; letter-spacing: -0.015em; }
.kbp-group-h span { font-size: 11.5px; color: var(--text-cap); margin-left: auto; }
.kbp-lede { font-size: 14px; color: var(--text-sub); line-height: 1.7; margin: 12px 0 16px; }
.kbp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kbp-card { display: block; padding: 15px 17px; border: 1px solid var(--border);
    border-radius: 10px; background: var(--surface); text-decoration: none; color: inherit; }
.kbp-card:hover { border-color: var(--indigo-soft); }
.kbp-card-n { display: block; font-size: 15.5px; font-weight: 750; letter-spacing: -0.012em; }
.kbp-card-r { display: block; font-size: 13px; color: var(--text-sub); line-height: 1.65;
    margin: 5px 0 8px; }
.kbp-card-m { display: block; font-size: 11.5px; color: var(--text-cap); }
.kbp-card-m b { color: var(--indigo-ink); font-weight: 600; }

.kbp-crumb { font-size: 12.5px; color: var(--text-cap); margin: 4px 0 16px; }
.kbp-crumb a { color: var(--text-sub); }
.kbp-crumb span::before { content: "· "; }
.kbp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.kbp-fig--side { margin: 0; padding: 16px; }
.kbp-seq { font-size: 11.5px; font-weight: 700; color: var(--text-cap); margin: 0 0 4px;
    letter-spacing: 0.04em; }
.kbp-body h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.022em; margin: 0 0 9px; }
.kbp-role { font-size: 16px; font-weight: 650; color: var(--text); line-height: 1.7;
    margin: 0 0 12px; }
.kbp-detail { font-size: 15px; color: var(--text-sub); line-height: 1.9; margin: 0; }
.kbp-specs { display: grid; gap: 1px; margin: 18px 0 0; background: var(--border);
    border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.kbp-specs > div { display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 14px; background: var(--surface); }
.kbp-specs dt { font-size: 12.5px; color: var(--text-cap); margin: 0; }
.kbp-specs dd { font-size: 13px; font-weight: 650; margin: 0; }

.kbp-calc { margin-top: 30px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface); overflow: hidden; }
.kbp-calc-h { padding: 14px 18px; border-bottom: 1px solid var(--border);
    background: var(--surface-alt); }
.kbp-calc-h h2 { font-size: 16px; font-weight: 750; margin: 0 0 3px; }
.kbp-calc-h span { font-size: 12.5px; color: var(--text-sub); }
.kbp-calc-b { padding: 18px; }
.kbp-calc-f { padding: 11px 18px; border-top: 1px solid var(--border);
    background: var(--surface-alt); font-size: 11.5px; color: var(--text-cap); margin: 0; }
.kbp-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.kbp-f label { display: block; font-size: 11.5px; color: var(--text-cap); margin-bottom: 4px; }
.kbp-in { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px;
    border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.kbp-in input { flex: 1; min-width: 0; border: 0; background: none; color: var(--text);
    font-size: 14px; font-weight: 650; padding: 0; }
.kbp-in input:focus { outline: none; }
.kbp-in:focus-within { border-color: var(--indigo-fill); }
.kbp-u { font-size: 11px; color: var(--text-cap); }
.kbp-out { margin-top: 16px; }
.kbp-out-box { padding: 15px 17px; border-radius: 9px; border: 1px solid var(--indigo-soft);
    background: var(--indigo-pale); }
.kbp-out-box--bad { border-color: var(--border); background: var(--surface-alt); }
.kbp-out-v { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--indigo-ink); }
.kbp-out-box--bad .kbp-out-v { color: var(--text); }
.kbp-out-t { font-size: 13.5px; color: var(--text-sub); line-height: 1.7; margin: 6px 0 0; }
.kbp-steps { margin-top: 13px; padding: 12px 15px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface-alt); font-size: 12.5px;
    color: var(--text-sub); line-height: 2; }
.kbp-tail { font-size: 12px; color: var(--text-cap); line-height: 1.7; margin: 11px 0 0; }

.kbp-notes { margin-top: 30px; }
.kbp-notes h2 { font-size: 17px; font-weight: 750; margin: 0 0 13px;
    padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.kbp-nlist { display: grid; gap: 8px; }
.kbp-note { display: block; padding: 13px 15px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); text-decoration: none; color: inherit; }
.kbp-note:hover { border-color: var(--indigo-soft); }
.kbp-note--off { background: var(--surface-alt); }
.kbp-note b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.kbp-note em { font-style: normal; font-size: 10.5px; font-weight: 600; margin-left: 7px;
    padding: 1px 7px; border-radius: 99px; border: 1px solid var(--border);
    color: var(--text-cap); vertical-align: 2px; }
.kbp-note span { display: block; font-size: 13px; color: var(--text-sub); line-height: 1.6;
    margin-top: 4px; }

.kbp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px;
    padding-top: 20px; border-top: 1px solid var(--border); }
.kbp-nav a { display: block; padding: 13px 16px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); text-decoration: none; color: inherit; }
.kbp-nav a:hover { border-color: var(--indigo-soft); }
.kbp-nav span { display: block; font-size: 11px; color: var(--text-cap); margin-bottom: 2px; }
.kbp-nav b { font-size: 14px; font-weight: 700; }
.kbp-nav-n { text-align: right; }

@media (max-width: 860px) {
    .kbp-grid { grid-template-columns: 1fr 1fr; }
    .kbp-two { grid-template-columns: 1fr; }
    .kbp-fields { grid-template-columns: 1fr 1fr; }
    .kbp-body h1 { font-size: 22px; }
    .kbp-nav { grid-template-columns: 1fr; }
    .kbp-nav-n { text-align: left; }
}
@media (max-width: 560px) {
    .kbp-grid { grid-template-columns: 1fr; }
}

/* ── 부품 알아보기 · 좌측 목차 + 상단 고정 도식 (2026-08-17) ──
   ⭐도식은 늘 같은 자리에 있고 도드라진 부품만 바뀐다.
     그래야 "지금 보는 것이 기체 어디인가" 를 잃지 않는다. */
.kbp-stage { border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    padding: 18px 20px 14px; margin-bottom: 20px; }
.kbp-stage .kbp-fig { margin: 0; padding: 0; border: 0; background: none; }
.kbp-stage svg { display: block; max-width: 480px; width: 100%; height: auto;
    margin: 0 auto; color: var(--text); }
.kbp-stage figcaption { font-size: 12.5px; color: var(--text-cap); line-height: 1.7;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
    text-align: center; }
.kbp-stage figcaption b { color: var(--text); }
.kbp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    margin-top: 10px; font-size: 11.5px; color: var(--text-cap); }
.kbp-i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid;
    vertical-align: 3px; margin-right: 5px; }
.kbp-i--p { border-color: #B45309; }
.kbp-i--s { border-color: #1D4ED8; }
.kbp-i--v { border-color: #6B7280; }

/* 도식 안의 링크 — 누를 수 있다는 것이 보여야 한다 */
.kbp-svg a { cursor: pointer; }
.kbp-svg a rect, .kbp-svg a circle, .kbp-svg a ellipse, .kbp-svg a text { transition: opacity .12s; }
.kbp-svg a:hover g { opacity: 1 !important; }
.kbp-svg a:hover rect { stroke-width: 2.2; }
.kbp-svg a:focus-visible g { opacity: 1 !important; }
.kbp-svg a:focus-visible rect { stroke-width: 2.6; }

.kbp-layout { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
.kbp-side { position: sticky; top: 16px; }
.kbp-side-top { display: block; padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 8px; background: var(--surface); font-size: 13px; font-weight: 700;
    text-decoration: none; color: var(--text-sub); margin-bottom: 14px; }
.kbp-side-top:hover, .kbp-side-a:hover { border-color: var(--indigo-soft); }
.kbp-side-top.on { background: var(--indigo-pale); border-color: var(--indigo-soft);
    color: var(--indigo-ink); }
.kbp-side-g { font-size: 11px; font-weight: 700; color: var(--text-cap);
    letter-spacing: 0.04em; margin: 14px 0 6px; }
.kbp-side-a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    padding: 8px 11px; border: 1px solid transparent; border-radius: 7px;
    text-decoration: none; color: inherit; margin-bottom: 2px; }
.kbp-side-a span { font-size: 13.5px; font-weight: 600; }
.kbp-side-a em { font-style: normal; font-size: 10.5px; color: var(--text-cap); }
.kbp-side-a.on { background: var(--indigo-pale); border-color: var(--indigo-soft); }
.kbp-side-a.on span { color: var(--indigo-ink); font-weight: 700; }

.kbp-main { min-width: 0; }
.kbp-intro { font-size: 14.5px; color: var(--text-sub); line-height: 1.8; margin: 10px 0 0;
    max-width: 68ch; }

@media (max-width: 900px) {
    .kbp-layout { grid-template-columns: 1fr; gap: 20px; }
    .kbp-side { position: static; display: flex; flex-wrap: wrap; gap: 6px; }
    .kbp-side-top { margin-bottom: 0; }
    .kbp-side-g { width: 100%; margin: 6px 0 2px; }
    .kbp-side-a { border-color: var(--border); background: var(--surface); }
    .kbp-side-a em { display: none; }
}

/* 도식 안 링크는 클래스로 잡는다 — 선택자와 마크업이 서로를 가리켜야 다음 사람이 찾는다 */
.kbp-hit { cursor: pointer; }
.kbp-hit:hover g { opacity: 1 !important; }
.kbp-hit:hover rect { stroke-width: 2.2; }
.kbp-hit:focus-visible g { opacity: 1 !important; }
.kbp-hit:focus-visible rect { stroke-width: 2.6; }

/* ══ 교육 콘텐츠 통합 · /contents (2026-08-17) ══════════════════════════
   ⭐그릇은 하나이고 갈래가 셋이다 — 부품 · 과정 · 살펴보기.
     틀(도식 · 좌측 목차 · 본문)은 `kbp-` 것을 그대로 쓰고,
     여기에는 **갈래를 갈아 끼우는 자리**와 **검수 손잡이**만 더한다.
     새 골격을 짓지 않는 까닭은 두 벌이 되면 한쪽만 고쳐지기 때문이다. */

/* 갈래 전환 — 좌측 목차 맨 위 */
.kbc-axis { display: grid; grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    background: var(--surface); }
.kbc-axis a { padding: 8px 2px; text-align: center; font-size: 12.5px; font-weight: 700;
    text-decoration: none; color: var(--text-cap); border-right: 1px solid var(--border); }
.kbc-axis a:last-child { border-right: 0; }
.kbc-axis a:hover { color: var(--text); }
.kbc-axis a.on { background: var(--indigo-pale); color: var(--indigo-ink); }
.kbc-axis-d { font-size: 11px; color: var(--text-cap); text-align: center;
    margin: 7px 0 16px; line-height: 1.5; }

/* 결정을 남긴 뒤의 알림 */
.kbc-flash { font-size: 13.5px; padding: 11px 15px; border-radius: 9px;
    border: 1px solid var(--border); background: var(--surface); margin: 0 0 16px; }
.kbc-flash--ok { border-color: var(--indigo-soft); background: var(--indigo-pale);
    color: var(--indigo-ink); }
.kbc-flash--err { border-color: #D97706; color: #92400E; background: #FFFBEB; }

/* 갈래끼리 건너가는 줄 — 같은 글에 문이 둘이라는 것을 여기서 보인다 */
.kbc-xref { font-size: 13px; color: var(--text-sub); line-height: 1.7;
    margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); }
.kbc-xref b { color: var(--text); font-weight: 700; margin-right: 4px; }

/* 노트 한 줄 + 손잡이 */
.kbc-nrow { padding: 14px 0; border-bottom: 1px solid var(--border); }
.kbc-nrow:last-child { border-bottom: 0; }
.kbc-nrow-t b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
    margin-right: 7px; }
.kbc-nrow-t b a { text-decoration: none; color: inherit; }
.kbc-nrow-t b a:hover { color: var(--indigo-ink); }
.kbc-nrow-t span { display: block; font-size: 13px; color: var(--text-cap);
    line-height: 1.65; margin-top: 4px; }

/* ── 검수 손잡이.
   ⭐이유가 필요 없는 둘만 바로 눌리고, 나머지 셋은 이유 칸과 함께 접혀 있다.
   ⚠누른 뒤 화면에서 바뀌는 것이 없다(반영은 bk2 가 한다). 그래서 '남겨 두었습니다' 가
     그 자리를 메운다 — 이것이 없으면 눌러도 아무 일도 안 일어난 것처럼 보인다. */
.kbc-rev { margin-top: 10px; }
.kbc-rev-wait { font-size: 12.5px; color: var(--indigo-ink); background: var(--indigo-pale);
    border: 1px solid var(--indigo-soft); border-radius: 8px;
    padding: 8px 12px; margin: 0 0 8px; line-height: 1.6; }
.kbc-rev-wait em { font-style: normal; color: var(--text-sub); }
.kbc-rev-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kbc-rev-t { font-size: 11px; font-weight: 700; color: var(--text-cap);
    letter-spacing: 0.04em; margin-right: 3px; }
.kbc-rev button { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 4px 12px; border: 1px solid var(--border); border-radius: 7px;
    background: var(--surface); color: var(--text-sub); }
.kbc-rev button:hover { border-color: var(--indigo-soft); color: var(--indigo-ink); }
.kbc-rev-more { margin-top: 7px; }
.kbc-rev-more summary { font-size: 12px; color: var(--text-cap); cursor: pointer;
    list-style: none; display: inline-block; padding: 2px 0; }
.kbc-rev-more summary::-webkit-details-marker { display: none; }
.kbc-rev-more summary:hover { color: var(--text-sub); }
.kbc-rev-more[open] summary { color: var(--text-sub); margin-bottom: 7px; }
.kbc-rev-more textarea { display: block; width: 100%; max-width: 560px; font: inherit;
    font-size: 13px; line-height: 1.6; padding: 8px 11px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    resize: vertical; }
.kbc-rev-btns { display: flex; gap: 6px; margin-top: 7px; }

@media (max-width: 900px) {
    .kbc-axis a { font-size: 12px; padding: 8px 1px; }
    .kbc-rev-more textarea { max-width: 100%; }
}

/* ══ 관리자 하위 메뉴 — 고른 그룹의 항목이 본문 위에 가로로 붙는다 (2026-08-17) ══
   ⭐**세로로 21개를 늘어놓으면 위계가 안 보인다.** 들여쓰기도 소제목도 결국 한 기둥이라
     전부 같은 깊이로 읽힌다. 축을 꺾어야 층이 생긴다 — 왼쪽은 묶음, 위는 그 안의 갈래. */
.admin-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.admin-subnav-g { font-size: 11px; font-weight: 700; color: var(--text-cap);
    text-transform: uppercase; letter-spacing: 0.06em; margin-right: 10px; }
.admin-subnav-a { display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 8px; border: 1px solid transparent;
    font-size: 13.5px; font-weight: 500; color: var(--text-sub); }
.admin-subnav-a:hover { background: var(--surface-alt); color: var(--text); }
.admin-subnav-a.on { background: var(--indigo-pale); border-color: var(--indigo-soft);
    color: var(--indigo-ink); font-weight: 700; }
.admin-subnav-a .admin-nav-badge { margin-left: 0; }

/* 사이드바 없이 가로 줄만 얹는 전폭 화면(로드맵·의사결정·교육 콘텐츠).
   ⭐사이드바가 유일한 이동 수단이 된 뒤로는, 내비 없는 화면이 관리자 안의 섬이 된다. */
.admin-subnav--solo { margin-top: 2px; }
.admin-subnav-home { display: inline-flex; align-items: center; padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 8px; margin-right: 8px;
    font-size: 12.5px; font-weight: 600; color: var(--text-cap); }
.admin-subnav-home:hover { color: var(--indigo-ink); border-color: var(--indigo-soft); }

@media (max-width: 768px) {
    .admin-subnav { gap: 3px; margin-bottom: 14px; }
    .admin-subnav-g { flex-basis: 100%; margin: 0 0 4px; }
    .admin-subnav-a { padding: 5px 10px; font-size: 13px; }
}

/* ══ 검수 갈래 — 옛 /admin-kb 를 옮겨 옴 (2026-08-17) ══
   ⭐**색을 박아 쓰지 않는다.** 옛 화면은 인라인 <style> 에 #dfe3e9 같은 값을 서른 몇 개
     박아 두어 어두운 바탕에서 글씨가 묻혔다. 전부 토큰으로 바꾼다. */
.kbc-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 18px 0 16px; }
.kbc-bar select, .kbc-bar input { font: inherit; font-size: 13px; padding: 7px 10px;
    border: 1px solid var(--border); border-radius: 7px; background: var(--surface);
    color: var(--text); min-height: 38px; }
.kbc-bar input[type=search] { min-width: 200px; flex: 1 1 200px; }
.kbc-btn { font: inherit; font-size: 13px; padding: 7px 14px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-sub); border-radius: 7px; cursor: pointer;
    min-height: 38px; display: inline-flex; align-items: center; }
.kbc-btn:hover { border-color: var(--indigo-soft); color: var(--indigo-ink); }
.kbc-btn--go { background: var(--indigo-ink); border-color: var(--indigo-ink); color: #fff; font-weight: 600; }
.kbc-btn--go:hover { color: #fff; }

.kbc-list { border-top: 1px solid var(--border); }
.kbc-row { padding: 15px 0; border-bottom: 1px solid var(--border); }
.kbc-row--wait { background: var(--indigo-pale); padding-left: 14px; padding-right: 14px;
    border-radius: 9px; border-bottom-color: transparent; margin-bottom: 1px; }
.kbc-row h3 { font-size: 15px; font-weight: 700; margin: 0 0 5px; letter-spacing: -0.01em; }
.kbc-row h3 a { color: inherit; text-decoration: none; }
.kbc-row h3 a:hover { color: var(--indigo-ink); }
.kbc-row-s { font-size: 13px; color: var(--text-sub); line-height: 1.6; margin: 0 0 8px; }
.kbc-row-m { display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
    font-size: 11.5px; color: var(--text-cap); }
.kbc-row-p { font-size: 12.5px; color: var(--indigo-ink); margin: 8px 0 0; }
.kbc-warn { color: var(--terra); font-weight: 700; }
.kbc-tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 99px;
    border: 1px solid var(--border); color: var(--text-cap); }
.kbc-tag--vpublic, .kbc-tag--cconfirmed { border-color: #3F8459; color: #3F8459; }
.kbc-tag--vmembers { border-color: #A97A1F; color: #A97A1F; }
.kbc-tag--cunverified { border-color: var(--terra); color: var(--terra); }
.kbc-tag--clikely, .kbc-tag--jur { border-color: var(--indigo-soft); color: var(--indigo-ink); }

.kbc-det { border: 1px solid var(--indigo-soft); border-radius: 11px; padding: 18px 20px;
    margin-bottom: 18px; background: var(--surface); }
/* 검수 2단(10-08) — 왼쪽 목록 · 오른쪽 상세(화면 고정·자체 스크롤). 행 전체를 누르면 그 노트 */
.kbc-cnt { display: flex; align-items: center; gap: 8px; margin: -6px 0 12px; font-size: 12.5px; color: var(--text-cap); }
.kbc-cnt span { margin-right: auto; }
.kbc-split { --adm-list-w: 400px; display: grid; grid-template-columns: var(--adm-list-w) minmax(0, 1fr); gap: 18px; align-items: start; }   /* 10-08 폭 검수: 목록 1fr | 상세 46% → 목록 고정 | 상세(공용 틀과 같은 방향) */
.kbc-split > .kbc-list { order: 1; min-width: 0; }
.kbc-split > .kbc-det { order: 2; position: sticky; top: var(--admin-stick, 16px); margin: 0;
    max-height: calc(100vh - var(--admin-stick, 16px) - 16px); overflow: auto; }
.kbc-split .kbc-row { padding: 10px 10px; cursor: pointer; border-radius: 7px; scroll-margin-top: calc(var(--admin-stick, 16px) + 8px); }
.kbc-split .kbc-row:hover { background: var(--surface-alt); }
.kbc-split .kbc-row h3 { font-size: 14px; margin-bottom: 3px; }
.kbc-split .kbc-row-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
.kbc-row--on, .kbc-split .kbc-row--on:hover { background: var(--indigo-pale); }
.kbc-row--on h3 a { color: var(--indigo-ink); }
@media (max-width: 1359px) { .kbc-split { --adm-list-w: 320px; } }
@media (max-width: 1000px) {
    .kbc-split { grid-template-columns: 1fr; }
    .kbc-split > .kbc-det { order: 0; position: static; max-height: none; }
}
.kbc-det h2 { font-size: 17px; font-weight: 750; margin: 0 0 6px; letter-spacing: -0.015em; }
.kbc-det-s { font-size: 13.5px; color: var(--text-sub); line-height: 1.65; margin: 0 0 10px; }
.kbc-det-b { font-size: 14px; line-height: 1.8; color: var(--text); white-space: pre-wrap;
    margin: 12px 0; max-height: 340px; overflow-y: auto; }
.kbc-det-dl { margin: 0; font-size: 12.5px; }
.kbc-det-dl dt { color: var(--text-cap); margin-top: 9px; font-weight: 600; }
.kbc-det-dl dd { margin: 2px 0 0; color: var(--text-sub); line-height: 1.65; }
.kbc-det-f { margin: 12px 0 0; font-size: 12.5px; }
.kbc-legal { font-size: 12.5px; line-height: 1.6; border: 1px solid #A97A1F; color: #8A6414;
    background: #FFFDF7; padding: 9px 12px; border-radius: 7px; margin: 0 0 10px; }

.kbc-pg { display: flex; gap: 6px; align-items: center; margin-top: 16px; font-size: 13px; }
.kbc-pg a, .kbc-pg span { padding: 6px 11px; border: 1px solid var(--border); border-radius: 7px;
    text-decoration: none; color: var(--text-sub); }
.kbc-pg .on { background: var(--indigo-pale); border-color: var(--indigo-soft);
    color: var(--indigo-ink); font-weight: 700; }
.kbc-pg em { font-style: normal; color: var(--text-cap); font-size: 12px; margin-left: 4px; }

/* 갈래가 넷이 되어 한 줄에 못 들어간다 — 두 칸씩 두 줄로 */
.kbc-axis { grid-template-columns: 1fr 1fr; }
.kbc-axis a:nth-child(2) { border-right: 0; }
.kbc-axis a:nth-child(-n+2) { border-bottom: 1px solid var(--border); }

@media (max-width: 768px) {
    .kbc-bar select, .kbc-bar input, .kbc-btn { min-height: 44px; }
    .kbc-bar input[type=search] { flex-basis: 100%; }
    .kbc-det-b { max-height: none; }
}

/* ══ 관리자 공통 틀 v3 — 창 폭 전체 · 왼쪽 고정 메뉴 한 줄기 (주인님 2026-10-07) ══
   «관리자 화면은 창의 좌우폭을 모두 활용 · 좌측 메뉴 정돈 · 좌측 메뉴와 화면 안 탭이 겹치고 의미 없는 클릭».
   ⭐메뉴는 창 왼쪽 끝 고정 칸(레일) 하나 — 모든 관리 화면이 같다(옛 «전폭 화면 위쪽 가로 줄» 없앰).
     메뉴는 파셜이 어디서 include 되든 position:fixed 라 화면 파일을 고치지 않고 같은 자리에 선다.
   ⭐본문은 레일 오른쪽 창 폭 전체. 공개 사이트 틀(1120)은 관리자에서 풀고, 헤더도 같이 편다(로고·메뉴 줄 맞춤).
   ⚠08-17 에 세로 목록을 버린 까닭(«위계가 안 보인다») — 그룹 머리말 진하게(링크 아님) · 항목 들여쓰기 · 그룹 사이 선.
     박스 안 박스·좌측 막대 없음(디자인 표준 v2). 고정 위치는 --admin-stick 하나(헤더 57 아래). */
:root { --admin-rail: 232px; --admin-top: 57px; --admin-stick: 73px; }
body:has(.admin-nav) .header .wrap { max-width: none; padding: 0 24px; }
body:has(.admin-nav) .wrap:not(.header-top) { max-width: none; padding-left: calc(var(--admin-rail) + 28px); padding-right: 28px; }
/* 폭을 정해 둔 화면(뉴스 수정 820px 등 인라인 max-width)은 그 폭을 지키고 메뉴 오른쪽에 선다 — 종전 !important 가 폭을 풀어 입력 폼이 창 폭으로 늘었다(10-07 적대 검증) */
body:has(.admin-nav) .wrap[style*="max-width"]:not(.header-top) { margin-left: calc(var(--admin-rail) + 28px); margin-right: auto; padding-left: 0; padding-right: 0; }
.admin-wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sub" "main"; column-gap: 0; }
.admin-nav { position: fixed; top: var(--admin-top); left: 0; bottom: 0; width: var(--admin-rail); z-index: 30;
    max-height: none; padding: 14px 12px 28px; border: 0; border-right: 1px solid var(--border); border-radius: 0;
    background: var(--surface-alt); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.admin-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.admin-nav-top .admin-nav-brand { display: block; margin: 0; padding: 2px 8px; text-decoration: none; }
.admin-nav-more { display: none; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600;
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-sub); cursor: pointer; }
.admin-nav .admin-nav-tree { display: flex; flex-direction: column; gap: 0; }
.admin-nav-row { display: flex; align-items: center; gap: 6px; padding-right: 6px; border-radius: 6px; }
.admin-nav-row:hover { background: var(--surface); }
.admin-nav-row.on { background: var(--indigo-pale); }
.admin-nav-item { flex: 1; min-width: 0; display: block; padding: 5px 8px 5px 16px; font-size: 13.5px; line-height: 1.4;
    color: var(--text-sub); text-decoration: none; }
.admin-nav-row:hover .admin-nav-item { color: var(--text); }
.admin-nav-row.on .admin-nav-item { color: var(--indigo-ink); font-weight: 700; }
.admin-nav-item--top { padding-left: 8px; font-size: 14px; }
.admin-nav-grp { display: flex; flex-direction: column; gap: 0; margin-top: 6px; padding: 8px 0 4px; border-top: 1px solid var(--border); }
.admin-nav-gl { margin: 0 0 3px; padding: 0 8px; font-size: 12px; line-height: 1.5; font-weight: 800; color: var(--text); letter-spacing: 0.04em; }
.admin-nav-grp.cur .admin-nav-gl { color: var(--indigo-ink); }
a.admin-nav-badge { text-decoration: none; }
a.admin-nav-badge:hover { background: var(--terra); border-color: var(--terra); color: var(--white); }
.admin-nav-row.on .admin-nav-badge { background: var(--surface); }

/* 화면 안 고정 요소는 헤더 바로 아래로(종전 16px·86px 는 헤더 밑으로 숨었다) */
.admin-wrap .cn2-rail, .admin-wrap .cn2-stage, .admin-wrap .cn2-jobs,
body:has(.admin-nav) .kbp-side, body:has(.admin-nav) .rm-toc { top: var(--admin-stick); }
/* 전폭 화면의 자체 틀(로드맵 1120)도 창 폭에 맞춘다 */
body:has(.admin-nav) .rm-page { max-width: none; }
body:has(.admin-nav) .fw-editor { margin-left: 0; }   /* 10-08 관리 틀 안 공개 편집기(이벤트 등록·수정)는 머리줄과 같은 왼쪽 선 — 가운데 정렬이면 제목만 왼쪽에 떠 보였다 */

/* 관리자 화면에는 공개 사이트 푸터를 두지 않는다 — 화면마다 약 0.5화면이 푸터였다(10-07 실측) */
body:has(.admin-nav) footer.footer { display: none; }

/* 의사결정 «선행·차단» 표시가 공용 .gate(가입 문 화면 72px·96px 여백)를 물려받아 줄마다 빈 띠가 생겼다 */
.dc-kind.gate { max-width: none; margin: 0; padding: 0; text-align: inherit; }

/* 수정 화면 5종의 빵부스러기 줄(sticky·z 90)이 메뉴(z 30) 위를 덮어 «관리자 콘솔»이 안 눌렸다 — 메뉴 아래로(10-07 적대 검증) */
body:has(.admin-nav) .page-head--crumb { z-index: 20; }
/* :has() 를 모르는 브라우저는 본문을 비키지 않으므로 메뉴도 고정하지 않는다(본문 위 칸) */
@supports not selector(:has(a)) { .admin-nav { position: static; width: auto; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; } }
/* 인쇄(신청 명단 등)에는 메뉴를 빼고 본문을 왼쪽 끝으로 — 가로 인쇄에서 쪽마다 메뉴가 찍혔다 */
@media print {
    .admin-nav { display: none; }
    body:has(.admin-nav) .wrap:not(.header-top), body:has(.admin-nav) .wrap[style*="max-width"]:not(.header-top) { margin-left: 0; padding-left: 0; padding-right: 0; }
}

/* ── 3단계(10-08): 편집·설정 — 저장 단추는 늘 화면 안 · 설정 2열 · 대시보드 세 줄 ── */
/* 폼이 화면보다 길면 저장 줄(.form-actions)이 화면 아래에 붙는다(sticky bottom). 짧은 폼은 제자리 그대로.
   ⚠.admin-card 는 overflow-x:auto 라 그 안의 sticky 는 화면이 아니라 카드에 걸린다 → 폼을 품은 카드는 overflow 를 푼다 */
body:has(.admin-nav) form .form-actions { position: sticky; bottom: 0; z-index: 4; background: var(--bg); padding-block: 10px; border-top: 1px solid var(--border); }
/* ⚠폼이 카드를 감싸는 화면(AI로 만들기: form{display:contents} 안에 카드)도 있다 — 조상 «form» 을 가정하지 않는다(10-08 적대검증) */
body:has(.admin-nav) .admin-card .form-actions { background: var(--surface); }
body:has(.admin-nav) .admin-card:has(.form-actions) { overflow: visible; }
/* 인쇄에는 붙이지 않는다 — 저장 줄이 폼 중간에 찍혀 표·입력칸을 덮었다(10-08 적대검증) */
@media print { body:has(.admin-nav) form .form-actions, body:has(.admin-nav) .fw-bottombar { position: static; } body:has(.admin-nav) .st-toc { position: static; } }
/* 공개 틀 편집기(이벤트 개설·수정 등)의 저장 줄 .fw-bottombar 도 관리자 화면에서는 아래에 붙인다 */
body:has(.admin-nav) .fw-bottombar { position: sticky; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--border); }
body:has(.admin-nav) .fw-bottombar-inner { padding-bottom: 12px; }

/* 설정 — 절 다섯을 2열 + 고정 목차(종전 한 줄로 5.3화면) */
.st-toc { position: sticky; top: var(--admin-stick); z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 14px; padding: 8px 14px;
    background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; }
.st-toc a { color: var(--text-sub); text-decoration: none; }
.st-toc a:hover { color: var(--indigo-ink); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.st-stack { display: grid; gap: 16px; align-content: start; }
.st-grid .admin-card { margin-bottom: 0; scroll-margin-top: calc(var(--admin-stick) + 56px); }
.st-privacy form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.st-privacy form > :not(.form-group), .st-privacy form > .form-group:has(.form-agree) { grid-column: 1 / -1; }   /* 체크 칸이 한 칸을 먹어 짝이 틀어졌다 */

/* 대시보드 — 1줄 트래픽 | 오늘 처리+자동 파이프라인 · 2줄 가입 동향 | 활동 요약 | 숫자 · 3줄 최근 콘텐츠 | 최근 회원 */
body:has(.admin-nav) .af-hero { grid-template-columns: minmax(0, 1fr) 380px; }
.af-hero-side { display: grid; gap: 14px; align-content: start; }
.af-hero-side > .admin-card { margin-bottom: 0; }
.af-hero-side .af-todos { flex-direction: column; gap: 8px; }
.af-hero-side .af-hero-todo .af-todo:last-child { border-bottom: 1px solid var(--border); }   /* 상자로 떨어졌으니 마지막 상자도 테두리(옛 «줄» 모양의 :last-child 규칙이 아래선을 지웠다) */
.af-mid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 380px; gap: 14px; align-items: start; margin-bottom: 14px; }
.af-mid > .admin-card { margin-bottom: 0; }
.af-mid .admin-stats { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.af-mid .admin-stat { padding: 10px 16px; }
.af-low { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.af-low > .admin-card { margin-bottom: 0; }
@media (max-width: 1200px) {
    .st-grid { grid-template-columns: 1fr; }
    body:has(.admin-nav) .af-hero, .af-mid, .af-low { grid-template-columns: 1fr; }
    .af-mid .admin-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }   /* 한 열일 때 숫자 셋은 다시 한 줄 */
}

@media (max-width: 768px) {
    body:has(.admin-nav) .wrap:not(.header-top) { padding-left: 16px; padding-right: 16px; }
    body:has(.admin-nav) .header .wrap { padding: 0 16px; }
    body:has(.admin-nav) .wrap[style*="max-width"]:not(.header-top) { margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }
    .st-privacy form { grid-template-columns: 1fr; }
    .st-toc { position: static; }
    .admin-wrap { grid-template-areas: "nav" "sub" "main"; }
    .admin-nav { position: static; width: auto; max-height: none; overflow: visible; padding: 10px 12px; margin-bottom: 14px;
        border: 1px solid var(--border); border-radius: var(--radius); }
    .admin-nav-more { display: inline-flex; }
    /* 좁은 화면: 지금 그룹의 항목만 한 줄로, [전체 메뉴]를 누르면 모두 */
    .admin-nav .admin-nav-tree > .admin-nav-row:not(.on), .admin-nav .admin-nav-grp:not(.cur) { display: none; }
    .admin-nav .admin-nav-grp.cur { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-top: 0; padding: 4px 0 0; border-top: 0; }
    .admin-nav .admin-nav-grp.cur .admin-nav-gl { display: none; }
    .admin-nav .admin-nav-grp.cur .admin-nav-item { padding: 5px 10px; }
    .admin-nav.open .admin-nav-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
    .admin-nav.open .admin-nav-tree > .admin-nav-row { display: flex; grid-column: 1 / -1; }
    .admin-nav.open .admin-nav-grp, .admin-nav.open .admin-nav-grp.cur { display: flex; flex-direction: column; gap: 0;
        margin-top: 6px; padding: 8px 0 4px; border-top: 1px solid var(--border); }
    .admin-nav.open .admin-nav-grp.cur .admin-nav-gl { display: block; }
    .admin-nav.open .admin-nav-grp.cur .admin-nav-item { padding: 5px 8px 5px 16px; }
    :root { --admin-stick: 57px; }   /* 10-08: 헤더(57)는 모바일에서도 위에 붙어 있다 — 16 이면 고정 줄이 헤더 밑에 숨었다 */
}
@media (max-width: 480px) { :root { --admin-stick: 49px; } }   /* 480 아래 헤더 49 */

/* ── 공개 목록 화면(10-08): 카테고리 줄(하위 메뉴)은 스크롤해도 헤더 아래에 붙는다 — 주인님 기본기 «서브 메뉴는 상단 스티키».
   데스크톱만(모바일은 줄이 여러 줄로 감겨 화면을 가린다). 관리자 화면은 자체 명령 줄이 있어 제외. ── */
@media (min-width: 769px) {
    body:not(:has(.admin-nav)) .page-body .filter-tabs,
    body:not(:has(.admin-nav)) .page-body .col-field-pills { position: sticky; top: 56px; z-index: 20; background: var(--bg); padding-block: 8px; margin-top: -8px; }
}

/* ══ 목록 + 상세 공용 틀 (주인님 10-08: 폭을 다 써버리지 말고, 좌측 목록 폭을 줄이고 클릭하면 오른쪽에 미리) ══
   목록 = 고정 폭(360 · 1359px 아래 300) · 상세 = 남은 폭, 명령 줄 아래에 붙고 자체 스크롤 · 1000px 아래 한 단(상세가 위).
   쓰는 곳: 공고 큐 · 문의 · 회원 · 전문가 · 콘텐츠 · 뉴스 큐 · 메일함. 트렌딩은 3단이라 자체 틀(tr-split).
   화면마다 다른 것(표 열 숨기기·모달 붙이기 세부)은 그 화면 안 <style> 에 둔다. */
.adm-split { --adm-list-w: 360px; display: grid; grid-template-columns: var(--adm-list-w) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-list { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.adm-det { position: sticky; top: calc(var(--admin-stick) + 60px); max-height: calc(100vh - var(--admin-stick) - 80px); overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.adm-det-box { padding: 18px 20px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }   /* 10-08 모서리 하나(8) */
.adm-det-in { max-width: 880px; }
.adm-row { position: relative; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); scroll-margin-top: calc(var(--admin-stick) + 64px); }
.adm-row:hover { background: var(--surface-alt); }
.adm-row.on { border-color: var(--indigo-soft); background: var(--indigo-pale); }
.adm-row-t { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-row-t::after { content: ""; position: absolute; inset: 0; }
.adm-row :is(form, button, .adm-row-act) { position: relative; z-index: 1; }
.adm-row-m { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--text-cap); font-variant-numeric: tabular-nums; }
.adm-form2 { display: grid; grid-template-columns: minmax(0, 900px) 320px; gap: 20px; align-items: start; }
.adm-form2 > .adm-side { position: sticky; top: calc(var(--admin-stick) + 16px); }
.adm-det [hidden] { display: none !important; }   /* 단추·격자의 display 가 hidden 속성을 이긴다(W2) */
/* 모달을 오른쪽 칸(.adm-det)에 붙일 때 — 회원·전문가·문의가 화면마다 따로 짜던 세 벌을 하나로(10-08).
   두 클래스로 쓴다: .admin-modal-overlay.active(display:flex)를 이겨야 한다. 닫기 단추뿐인 바닥 줄은 --bare 로 숨긴다. */
.admin-modal-overlay.adm-docked { position: static; inset: auto; z-index: auto; display: block; background: none; padding: 0; }
.adm-docked .admin-modal { max-width: 880px; max-height: none; box-shadow: none; }
.adm-docked .admin-modal__body { overflow: visible; }
.adm-docked .js-modal-close, .adm-docked--bare .admin-modal__footer { display: none; }
@media (max-width: 1359px) { .adm-split { --adm-list-w: 300px; } }
@media (max-width: 1000px) {
    .adm-split, .adm-form2 { grid-template-columns: minmax(0, 1fr); }
    .adm-det { position: static; max-height: none; overflow: visible; order: -1; scroll-margin-top: calc(var(--admin-stick) + 8px); }
    .adm-form2 > .adm-side { position: static; }
    .adm-row { scroll-margin-top: calc(var(--admin-stick) + 120px); }
}

/* (10-08 사용자 점검) 본인 댓글 [삭제] — 답변 단추(.cmt-reply-toggle)와 같은 글자 단추 */
.cmt-head .cmt-del { margin-left: 6px; background: none; border: none; padding: 0; color: var(--text-cap); font-size: 12px; font-family: inherit; cursor: pointer; }
.cmt-head .cmt-del:hover { color: var(--terra); text-decoration: underline; }
/* (10-08) 마이페이지 활동 수치 4칸 — 390 폭에서 3+1 로 하나만 남던 줄을 2×2 로 */
@media (max-width: 480px) { .my-stat-row { grid-template-columns: repeat(2, 1fr); } }