/* WITU 관리자 — 색 · 간격은 :root 변수로 모읍니다 */
:root {
    --bg: #f5f4f8;
    --surface: #ffffff;
    --border: #e3e0ea;
    --text: #1f1b2b;
    --muted: #6b6578;
    --primary: #6b4fd8;
    --primary-text: #ffffff;
    --danger: #d23b4b;
    --ok: #1f8a4c;
    --side: #1f1b2b;
    --side-text: #d9d4e8;
    --radius: 10px;
    --gap: 16px;
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
    color: var(--text);
    font-size: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
a { color: var(--primary); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.boot, .empty { color: var(--muted); text-align: center; padding: 48px 16px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.center { text-align: center; padding: 48px 16px; }

/* 틀 */
.shell { display: flex; min-height: 100vh; }
.side { width: 220px; flex-shrink: 0; background: var(--side); color: var(--side-text); display: flex; flex-direction: column; padding: 20px 12px; }
.side__brand { font-weight: 700; font-size: 16px; color: #fff; padding: 0 8px 20px; }
.side__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side__group { font-size: 11px; color: #8d86a3; padding: 16px 8px 4px; }
.side__link { color: var(--side-text); text-decoration: none; padding: 9px 10px; border-radius: 8px; }
.side__link:hover { background: rgba(255, 255, 255, 0.06); }
.side__link.active { background: var(--primary); color: #fff; }
.side__me { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 16px 8px 0; display: flex; flex-direction: column; gap: 6px; }
.side__email { font-size: 12px; word-break: break-all; }
.side__role { font-size: 11px; color: #a79fd0; }
.side .button--ghost { color: var(--side-text); border-color: rgba(255, 255, 255, 0.2); }
.main { flex: 1; padding: 28px 32px; max-width: 1200px; min-width: 0; }

.bare { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.card--narrow { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); margin-bottom: var(--gap); flex-wrap: wrap; }
.title { font-size: 22px; margin: 0; }

/* 입력 · 버튼 */
.input { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; font: inherit; background: #fff; min-width: 0; }
.input--select { padding-right: 28px; }
.input--short { width: 120px; }
.input--code { font-size: 22px; letter-spacing: 6px; text-align: center; }
.button { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.button:disabled { opacity: 0.45; cursor: default; }
.button--primary { background: var(--primary); border-color: var(--primary); color: var(--primary-text); }
.button--danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.button--ghost { background: transparent; }
.button--block { width: 100%; }
.button--small { padding: 5px 10px; font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.search, .suspend, .filters, .report__resolve { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.search .input, .suspend .input:not(select), .report__resolve .input { flex: 1; min-width: 200px; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented__item { border: 0; background: #fff; padding: 7px 14px; font: inherit; cursor: pointer; }
.segmented__item.is-active { background: var(--primary); color: #fff; }

.status { border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; }
.status--error { background: #fdecee; color: var(--danger); }
.status--ok { background: #e8f6ee; color: var(--ok); }

/* 카드 · 표 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: var(--gap); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; }
.stat--link:hover { border-color: var(--primary); }
.stat__label { color: var(--muted); font-size: 12px; }
.stat__value { font-size: 22px; font-weight: 700; }
.stat__value--alert { color: var(--danger); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--gap); overflow-x: auto; }
.panel__title { font-size: 15px; margin: 0 0 12px; }
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.table .num { text-align: right; white-space: nowrap; }
.row-link { cursor: pointer; }
.row-link:hover { background: #faf9fd; }
.detail { white-space: pre-wrap; word-break: break-all; }

.badge { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #eeeaf8; color: #4b3a9c; }
.badge--alert { background: #fdecee; color: var(--danger); }
.badge--comment { background: #e6f1fd; color: #1e5aa8; }
.badge--plot { background: #fff1df; color: #9a5a0b; }
.badge--message { background: #eef5e6; color: #3f6b16; }
.badge--status-received { background: #fdecee; color: var(--danger); }
.badge--status-resolved { background: #e8f6ee; color: var(--ok); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: #f1eff6; }

/* 신고 */
.list { display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--gap); }
.report { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.report--open { border-left: 4px solid var(--danger); }
.report__head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.report__time { margin-left: auto; color: var(--muted); font-size: 12px; }
.report__snapshot { margin: 0; padding: 10px 12px; background: #f8f7fb; border-radius: 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.report__etc { margin: 0; color: var(--muted); }
.report__meta, .facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 13px; }
.report__meta dt, .facts dt { color: var(--muted); }
.report__meta dd, .facts dd { margin: 0; }
.report__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.report__done { margin: 0; color: var(--muted); font-size: 12px; }

/* 이용자 */
.profile { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); margin-bottom: 12px; }
.profile__name { font-size: 18px; font-weight: 700; }
.profile__badges { display: flex; gap: 6px; }

/* 2단계 인증 */
.qr { width: 200px; height: 200px; align-self: center; background: #fff; }
.secret { word-break: break-all; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff3cd; padding: 10px 16px; z-index: 10; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .side { width: auto; }
    .main { padding: 20px 16px; }
    .columns { grid-template-columns: 1fr; }
}

/* 공지 작성 */
.editor { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.editor__form { display: flex; flex-direction: column; gap: 14px; }
.editor__actions { display: flex; gap: 8px; }
.editor__preview { position: sticky; top: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-weight: 600; font-size: 13px; }
.textarea { min-height: 320px; resize: vertical; line-height: 1.6; font-family: inherit; }
.input--short-wide { max-width: 260px; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.preview { background: #1c1922; color: #f2eff7; border-radius: 14px; padding: 20px; min-height: 200px; }
.preview__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.preview__head .badge { align-self: flex-start; }
.preview__title { font-size: 18px; font-weight: 700; }
.preview__heading { font-size: 15px; margin: 18px 0 6px; }
.preview__paragraph { margin: 0 0 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.7; color: #d9d4e8; }
.badge--visibility-live { background: #e8f6ee; color: var(--ok); }
.badge--visibility-scheduled { background: #fff1df; color: #9a5a0b; }
.badge--visibility-hidden { background: #eceaf0; color: var(--muted); }
@media (max-width: 960px) { .editor { grid-template-columns: 1fr; } .editor__preview { position: static; } }

/* 신고 배지 · 캐릭터 · 대화 맥락 */
.side__link { display: flex; align-items: center; justify-content: space-between; }
.side__count { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.small { font-size: 12px; }
.thumb { width: 44px; height: 58px; object-fit: cover; border-radius: 6px; background: #eee; display: block; }
.badge--plot-published { background: #e8f6ee; color: var(--ok); }
.badge--plot-hidden { background: #fdecee; color: var(--danger); }
.badge--plot-draft { background: #eceaf0; color: var(--muted); }
.plot-head { display: flex; gap: 20px; align-items: flex-start; }
.plot-head__cover { width: 180px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #eee; }
.plot-head__info { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.plot-head__name { font-size: 20px; font-weight: 700; }
.plain { white-space: pre-wrap; word-break: break-word; line-height: 1.6; margin: 0 0 12px; }
.fold { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.fold summary { cursor: pointer; font-weight: 600; }
.fold__label { font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
.line-item { border-bottom: 1px solid var(--border); padding: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.line-item__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.context { border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.context__line { border-radius: 8px; padding: 8px 12px; background: #f8f7fb; }
.context__line--user { background: #eef0fb; }
.context__line--target { outline: 2px solid var(--danger); }
.context__line--inactive { opacity: 0.6; }
.context__meta { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 4px; }
.context__speaker { font-weight: 600; }
.context__text { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
@media (max-width: 760px) { .plot-head { flex-direction: column; } }

/* 공식 캐릭터 고치기 */
.textarea--mid { min-height: 160px; }
.textarea--short { min-height: 90px; }
.problems { margin: 0 0 12px; padding-left: 28px; }
.cover-edit { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.message-edit { border: 1px solid var(--border); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.message-edit__head { display: flex; gap: 6px; align-items: center; }

/* 왼쪽 메뉴 고정 — 본문만 스크롤 (넓은 화면) */
@media (min-width: 761px) {
    .shell { align-items: flex-start; }
    .side { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}