/* ══════════════════════════════════════════
   하힘 웹 포털 — 다크 테마 (데스크톱 앱과 동일 팔레트)
   ══════════════════════════════════════════ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background-color: #1e1e1e;
    color: #e0e0e0;
    font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
    font-size: 14px;
}
a { color: #4fc1ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── 상단 바 ── */
.topbar {
    display: flex; align-items: center; gap: 14px;
    background-color: #252526; border-bottom: 1px solid #3e3e42;
    padding: 0 18px; height: 52px;
    position: sticky; top: 0; z-index: 50;
}
.topbar .brand {
    font-size: 17px; font-weight: bold; color: #fff; text-decoration: none;
    letter-spacing: 0.5px;
}
.topbar .spacer { flex: 1; }
.topbar nav { display: flex; align-items: center; gap: 12px; }
.topbar nav a { color: #bbb; font-size: 13px; }
.topbar nav a:hover { color: #fff; text-decoration: none; }

/* 모듈 바로가기 메뉴바 (브랜드 오른쪽) — 좁은 화면에선 한 줄 유지하고 가로 스크롤(스와이프) */
.topbar .topnav {
    gap: 4px; margin-left: 10px; padding-left: 12px;
    border-left: 1px solid #3e3e42;
    flex-wrap: nowrap; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;                  /* Firefox: 스크롤바 숨김 */
    -webkit-overflow-scrolling: touch;      /* iOS 관성 스크롤 */
    overscroll-behavior-x: contain;
}
.topbar .topnav::-webkit-scrollbar { display: none; }  /* Chrome/Edge: 스크롤바 숨김 */
.topbar .topnav a {
    color: #cfcfcf; font-size: 14px; font-weight: bold; padding: 7px 12px;
    border-radius: 6px; white-space: nowrap; flex: 0 0 auto;
}
.topbar .topnav a:hover { background-color: #2f2f33; color: #fff; text-decoration: none; }
.topbar .topnav a.active { background-color: #007acc; color: #fff; }
.topbar .username { color: #e0e0e0; font-weight: bold; }
.role-badge {
    background-color: #007acc; color: #fff; font-size: 11px; font-weight: bold;
    padding: 2px 8px; border-radius: 10px; margin-left: 4px;
}
.role-badge.admin { background-color: #d83b01; }
.role-badge.student { background-color: #2ea043; }
.role-badge.leader { background-color: #6a1b9a; }

/* ── 컨테이너 ── */
main.container { max-width: 1100px; margin: 0 auto; padding: 24px 18px; }
main.full { padding: 0; }

/* ── 알림/플래시 ── */
.flash { padding: 10px 16px; border-radius: 5px; margin: 10px 18px; font-weight: bold; }
.flash.ok  { background-color: #15391f; color: #5ddb84; border: 1px solid #2ea043; }
.flash.err { background-color: #44211b; color: #ff8a73; border: 1px solid #d83b01; }
.banner-warn {
    background-color: #4a3a10; color: #ffd56b; border-bottom: 1px solid #e6a817;
    padding: 8px 18px; font-size: 13px; font-weight: bold;
}
.banner-warn a { color: #ffe9ad; text-decoration: underline; }
.banner-view {
    background-color: #0e3a5c; color: #9fd6ff; border-bottom: 2px solid #007acc;
    padding: 8px 18px; font-size: 13px; font-weight: bold;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.nav-badge {
    background-color: #d83b01; color: #fff; border-radius: 10px;
    padding: 1px 7px; font-size: 11px; font-weight: bold; vertical-align: middle;
}

/* ── 버튼 ── */
.btn {
    display: inline-block; padding: 7px 13px; border-radius: 4px; border: none;
    background-color: #3e3e42; color: #fff; font-weight: bold; font-size: 13px;
    cursor: pointer; font-family: inherit; text-decoration: none; line-height: 1.3;
}
.btn:hover { background-color: #4e4e52; text-decoration: none; }
.btn.primary { background-color: #007acc; } .btn.primary:hover { background-color: #1a8ad6; }
.btn.green   { background-color: #2ea043; } .btn.green:hover   { background-color: #3cb853; }
.btn.red     { background-color: #d83b01; } .btn.red:hover     { background-color: #f04b0e; }
.btn.purple  { background-color: #6a1b9a; } .btn.purple:hover  { background-color: #7d2cb0; }
.btn.teal    { background-color: #17a2b8; } .btn.teal:hover    { background-color: #1fb6cd; }
.btn.sm { padding: 4px 9px; font-size: 12px; }
.btn.wide { width: 100%; padding: 10px; margin-top: 10px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── 입력 ── */
input[type=text], input[type=password], input[type=number], select, textarea {
    background-color: #252526; color: #fff; border: 1px solid #3e3e42;
    border-radius: 4px; padding: 8px; font-family: inherit; font-size: 13px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: #007acc; }
label.chk { display: flex; align-items: center; gap: 8px; cursor: pointer; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: #007acc; }

/* ── 로그인 ── */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
}
.login-card {
    background-color: #252526; border: 1px solid #3e3e42; border-radius: 10px;
    padding: 36px 32px; width: 360px; display: flex; flex-direction: column; gap: 10px;
}
.login-card h1 { margin: 0 0 4px 0; font-size: 22px; color: #fff; text-align: center; }
.login-card .sub { color: #888; font-size: 12px; text-align: center; margin-bottom: 14px; }
.login-card input { padding: 11px; font-size: 14px; }
.login-card .btn { padding: 11px; font-size: 14px; margin-top: 8px; }
.login-err { color: #ff8a73; font-size: 13px; font-weight: bold; text-align: center; }

/* ── 포털 ── */
.group-title {
    font-size: 15px; font-weight: bold; color: #aaa;
    margin: 28px 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid #3e3e42;
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.tile {
    background-color: #252526; border: 1px solid #3e3e42; border-radius: 10px;
    padding: 18px 16px; text-decoration: none; color: #e0e0e0; display: block;
    transition: border-color .12s, transform .12s; position: relative;
}
a.tile:hover { border-color: #007acc; transform: translateY(-2px); text-decoration: none; }
.tile .icon { font-size: 30px; }
.tile .name { font-size: 15px; font-weight: bold; color: #fff; margin-top: 10px; }
.tile .desc { font-size: 12px; color: #888; margin-top: 4px; }
.tile.disabled { opacity: 0.45; }
.badge-soon {
    position: absolute; top: 10px; right: 10px;
    background-color: #3e3e42; color: #aaa; font-size: 11px; font-weight: bold;
    padding: 2px 8px; border-radius: 10px;
}

/* ── 데이터 테이블 ── */
table.data { width: 100%; border-collapse: collapse; background-color: #252526; border: 1px solid #3e3e42; border-radius: 4px; }
table.data th {
    background-color: #2d2d30; color: #aaa; padding: 9px 8px; font-size: 13px;
    border: 1px solid #3e3e42; text-align: left; font-weight: bold;
}
table.data td { padding: 7px 8px; border: 1px solid #333; font-size: 13px; vertical-align: middle; }
table.data tbody tr:hover { background-color: #2a2d2e; }
.empty { text-align: center; color: #666; padding: 50px 0; font-size: 14px; }

/* ── 카드 ── */
.card {
    background-color: #252526; border: 1px solid #3e3e42; border-radius: 8px;
    padding: 20px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px 0; font-size: 16px; color: #fff; }
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lbl { color: #aaa; font-weight: bold; font-size: 12px; margin: 10px 0 4px 0; }

/* ── 대본마스터 레이아웃 ── */
.sm-layout { display: flex; height: calc(100vh - 52px); }
.sidebar {
    width: 250px; min-width: 250px; background-color: #252526;
    border-right: 1px solid #3e3e42; padding: 12px; overflow-y: auto;
    display: flex; flex-direction: column;
}
.side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: bold; }
.chlist { list-style: none; margin: 0 0 6px 0; padding: 0; }
.chlist li {
    display: flex; align-items: center; border-radius: 4px; margin-bottom: 2px;
}
.chlist li a {
    flex: 1; padding: 8px 10px; color: #e0e0e0; display: block; border-radius: 4px;
}
.chlist li a:hover { background-color: #2f2f33; text-decoration: none; }
.chlist li.sel a { background-color: #007acc; color: #fff; font-weight: bold; }
.ch-del {
    display: none; background: none; border: none; color: #ff8a73; cursor: pointer;
    font-size: 13px; padding: 4px 8px; font-weight: bold;
}
.manage-on .ch-del { display: block; }
.ch-add { display: none; gap: 6px; margin-bottom: 8px; }
.manage-on .ch-add { display: flex; }
.ch-add input { flex: 1; min-width: 0; }
.side-sec { border-top: 1px solid #3e3e42; padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; }
.side-sec input { margin-bottom: 2px; }
.hint { color: #e6a817; font-size: 12px; margin-top: 8px; }
.stats { margin-top: auto; padding-top: 14px; color: #666; font-size: 11px; line-height: 1.8; }

.sm-main { flex: 1; padding: 14px; overflow-y: auto; }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar #search { width: 220px; }
.toolbar .spacer { flex: 1; }
.toolbar label { color: #aaa; font-weight: bold; font-size: 13px; }

.title-link { color: #e0e0e0; font-weight: bold; }
.title-link:hover { color: #4fc1ff; }
.title-link.done { color: #888; text-decoration: line-through; }
.title-link.done:hover { color: #aaa; }
.status-sel {
    width: 105px; font-weight: bold; border: none; border-radius: 3px;
    padding: 5px 6px; color: #fff; cursor: pointer;
}
.status-sel option { background-color: #252526; color: #e0e0e0; }
td.actions { white-space: nowrap; }
td.actions .btn { margin-right: 3px; }
.c-desc { color: #999; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ch { color: #aaa; white-space: nowrap; }

/* ── 다이얼로그 ── */
dialog {
    background-color: #1e1e1e; color: #e0e0e0; border: 1px solid #3e3e42;
    border-radius: 10px; padding: 24px; min-width: 380px;
    font-family: 'Malgun Gothic', sans-serif;
}
dialog::backdrop { background: rgba(0,0,0,0.6); }
dialog h3 { margin: 0 0 12px 0; color: #fff; }
dialog .lbl { margin: 12px 0 4px 0; }
dialog input[type=text], dialog input[type=number], dialog select { width: 100%; }
.dlg-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
dialog label.chk { margin-top: 12px; color: #4ec9b0; font-weight: bold; font-size: 13px; }

/* ── 대본 에디터 ── */
.ed-wrap { display: flex; flex-direction: column; height: calc(100vh - 52px); padding: 14px; gap: 10px; }
.ed-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ed-ch { color: #888; font-weight: bold; font-size: 14px; white-space: nowrap; }
#edTitle {
    flex: 1; min-width: 200px; font-size: 16px; color: #4fc1ff; font-weight: bold; padding: 7px 10px;
}
#edStatus {
    width: 110px; font-weight: bold; border: none; border-radius: 3px;
    padding: 7px 6px; color: #fff; cursor: pointer;
}
#edStatus option { background-color: #252526; color: #e0e0e0; }
.autosave { color: #666; font-size: 11px; min-width: 90px; }
.markers { display: flex; gap: 6px; flex-wrap: wrap; }
.markers .btn.dyn { background-color: #2ea043; }
.markers .btn.dyn:hover { background-color: #3cb853; }
.ed-split { display: flex; gap: 10px; flex: 1; min-height: 0; }
.ed-col { display: flex; flex-direction: column; min-width: 0; }
.ed-col .lbl { margin: 0 0 6px 0; }
.ed-col.src { flex: 4; }
.ed-col.scr { flex: 6; }
.ed-col textarea {
    flex: 1; resize: none; font-size: 15px; line-height: 1.6; padding: 12px;
    background-color: #252526; border: 1px solid #3e3e42; color: #fff;
}
.ed-col textarea:focus { border-color: #007acc; }

/* ── 관리자: 권한 매트릭스 ── */
.perm-table td, .perm-table th { text-align: center; }
.perm-table td:first-child, .perm-table th:first-child { text-align: left; }
.perm-on { color: #2ea043; font-weight: bold; }

/* ── 벤치마킹 ── */
.bm-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid #3e3e42; flex-wrap: wrap; }
.bm-tab {
    background: none; border: none; color: #bbb; padding: 10px 18px;
    font-weight: bold; font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
    font-family: inherit;
}
.bm-tab:hover { color: #fff; }
.bm-tab.active { color: #4fc1ff; border-bottom-color: #007acc; }
.star { background: none; border: none; color: #888; font-size: 18px; cursor: pointer; padding: 2px 6px; }
.star.on { color: #ffd700; }
#resTable img { display: block; }

/* 채널 관리 레이아웃 */
.bm-ch-layout { display: flex; gap: 14px; align-items: flex-start; }
.bm-side {
    width: 300px; min-width: 300px; background-color: #252526; border: 1px solid #3e3e42;
    border-radius: 8px; padding: 12px; display: flex; flex-direction: column;
}
.bm-side .side-head { display: flex; align-items: center; justify-content: space-between; font-weight: bold; margin-bottom: 8px; }
.catlist { list-style: none; margin: 0 0 6px 0; padding: 0; max-height: 240px; overflow-y: auto; }
.catlist li { border-radius: 4px; cursor: pointer; }
.catlist li a { display: block; padding: 7px 10px; color: #e0e0e0; }
.catlist li:hover { background-color: #2f2f33; }
.catlist li.sel { background-color: #007acc; }
.catlist li.sel a { color: #fff; font-weight: bold; }
.bm-side .side-sec { border-top: 1px solid #3e3e42; padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; }
.region-toggle { display: flex; gap: 6px; }
.region-toggle .rg {
    flex: 1; background-color: #3e3e42; color: #aaa; border: none; padding: 8px; border-radius: 4px;
    font-weight: bold; cursor: pointer; font-family: inherit; font-size: 13px;
}
.region-toggle .rg.active { background-color: #1565c0; color: #fff; }
.region-toggle .rg[data-rg="해외"].active, .region-toggle .rg[data-mode].active { background-color: #007acc; color: #fff; }
.bm-side .stats { margin-top: auto; padding-top: 12px; color: #666; font-size: 11px; }
.bm-main { flex: 1; min-width: 0; }
.catmng { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; }
.catmng li { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px; border-bottom: 1px solid #333; }

/* 크롤링 */
.bm-crawl-top { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0; }
.bm-crawl-top .card { min-width: 280px; }
.crawl-cats { display: flex; flex-wrap: wrap; gap: 8px 14px; max-height: 160px; overflow-y: auto; padding: 6px 0; }
#crawlMode.region-toggle .rg.active { background-color: #007acc; }
.bm-log {
    background-color: #161616; border: 1px solid #3e3e42; border-radius: 4px; margin-top: 10px;
    padding: 10px; height: 220px; overflow-y: auto; font-family: Consolas, monospace; font-size: 12px;
    white-space: pre-wrap; color: #b5cea8; line-height: 1.5;
}

/* 결과 테이블 */
.bm-results { font-size: 13px; }
.bm-results th { white-space: nowrap; }
.bm-results th[data-sort] { cursor: pointer; user-select: none; }
.bm-results th[data-sort]:hover { color: #fff; }
.bm-results th.sorted-desc::after { content: " ▼"; color: #4fc1ff; }
.bm-results th.sorted-asc::after { content: " ▲"; color: #4fc1ff; }
.bm-results td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bm-results tbody tr { cursor: default; }
.bm-results tbody tr.selected { background-color: #264f78 !important; }
.bm-results tbody tr.done td { color: #6e6e6e; text-decoration: line-through; }
.bm-results tbody tr.done td .title-link { color: #6e6e6e; }

/* 우클릭 메뉴 */
.ctx-menu { position: absolute; z-index: 100; background-color: #252526; border: 1px solid #3e3e42; border-radius: 6px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); min-width: 180px; }
.ctx-item { padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.ctx-item:hover { background-color: #007acc; color: #fff; }

/* ── 영상 다운로더 ── */
.dl-types { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.dl-type {
    display: flex; align-items: center; gap: 7px; cursor: pointer;
    background-color: #252526; border: 1px solid #3e3e42; border-radius: 6px;
    padding: 9px 14px; font-weight: bold; font-size: 14px;
}
.dl-type:hover { border-color: #007acc; }
.dl-type:has(input:checked) { border-color: #007acc; background-color: #0e3a5c; }
.dl-opts { margin-top: 6px; }

.job-card {
    background-color: #252526; border: 1px solid #3e3e42; border-radius: 8px;
    padding: 12px 14px; margin-bottom: 10px;
}
.job-card.done { border-color: #2ea043; }
.job-card.error { border-color: #d83b01; }
.job-card.cancelled { opacity: 0.6; }
.job-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.job-type { color: #aaa; font-size: 12px; white-space: nowrap; }
.job-title { color: #fff; font-weight: bold; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-right { white-space: nowrap; }
.job-bar { background-color: #1e1e1e; border-radius: 5px; height: 8px; overflow: hidden; }
.job-fill { background-color: #007acc; height: 100%; transition: width .3s; }
.job-card.done .job-fill { background-color: #2ea043; }
.job-card.error .job-fill { background-color: #d83b01; }
.job-msg { font-size: 12px; color: #888; margin-top: 6px; }
.job-msg.done { color: #5ddb84; }
.job-msg.error { color: #ff8a73; }

@media (max-width: 800px) {
    .sm-layout { flex-direction: column; height: auto; }
    .sidebar { width: 100%; min-width: 0; }
    .ed-split { flex-direction: column; }
    .ed-wrap { height: auto; }
    .ed-col textarea { min-height: 300px; }
}