/* 공용 부품 — 특정 화면 이름을 넣지 않는다 */

/* 머리말 · 상단 메뉴 */
header.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line)}
.top .wrap{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-4)}
.brand{font-weight:800;font-size:var(--text-lg);color:var(--brand);display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm)}
.brand img{height:var(--space-6)}
nav.main{display:flex;gap:var(--space-1);flex:1;flex-wrap:wrap}
nav.main a{display:inline-flex;align-items:center;min-height:var(--control-h-sm);padding:0 var(--space-3);border-radius:var(--r);font-weight:600;color:var(--ink-2)}
nav.main a:hover{background:var(--soft)}
nav.main a.on{background:var(--brand);color:var(--on-brand)}
.uchip{display:inline-flex;align-items:center;min-height:var(--control-h-sm);font-size:var(--text-sm);color:var(--mut)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:var(--space-6) var(--space-4)}
.count-badge{display:inline-block;margin-left:var(--space-1);background:var(--alert);color:var(--on-brand);border-radius:var(--r-full);padding:0 var(--space-2);font-size:var(--text-xs);line-height:var(--leading-normal)}

/* 버튼 — 기본(주) · gho(보조) · dgr(위험) · sm · lg */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--control-h-sm);min-width:var(--control-h-sm);white-space:nowrap;background:var(--brand);color:var(--on-brand);border:0;border-radius:var(--r);padding:0 var(--space-4);font:inherit;font-weight:700;font-size:var(--text-md);cursor:pointer;vertical-align:middle}
.btn:hover{filter:brightness(.95)}
.btn.sm{padding:0 var(--space-3);font-size:var(--text-sm)}
.btn.lg{min-height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--text-base)}
.btn.gho{background:var(--soft);color:var(--ink-3)}
.btn.dgr{background:var(--card);color:var(--neg-ink);border:1px solid var(--neg-line)}
.btn.block{display:flex;width:100%}
/* 누를 수 없는 버튼 — 주·보조·위험 모두 같은 모양(--mut on --soft-2 대비 약 4.6:1) */
.btn:disabled{background:var(--soft-2);color:var(--mut);border-color:transparent;cursor:not-allowed;filter:none}

/* 눈 버튼(악플 가림) */
.eyebtn{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-h-sm);background:var(--soft);color:var(--tag-ink);border:0;border-radius:var(--r);padding:0 var(--space-3);font:inherit;font-size:var(--text-sm);font-weight:600;cursor:pointer;white-space:nowrap}
.eyebtn:hover{background:var(--soft-2)}
.eyebtn svg{width:var(--space-4);height:var(--space-4);flex:none}
.sens{transition:filter .12s}
body.priv .sens{filter:blur(7px);user-select:none;-webkit-user-select:none;cursor:default}

/* 카드 · 알림 카드 */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-5);margin:0 0 var(--space-4)}
.card h2{margin:0 0 var(--space-3);font-size:var(--text-lg)}
.card.narrow{max-width:400px;margin:var(--space-6) auto}
.card.has-icon{display:flex;align-items:center;gap:var(--space-3)}
.card.is-ok{border-color:var(--ok-line);background:var(--ok-soft)}
.card.is-warn{border-color:var(--warn-line);background:var(--warn-soft)}
.card.is-neg{border-color:var(--neg-line);background:var(--neg-soft)}
.card.is-del{border-color:var(--del-line);background:var(--del-soft)}
.card.is-urgent{border-color:var(--alert)}
.card-icon{font-size:var(--text-2xl);line-height:1}
.ink-warn{color:var(--warn-ink)}.ink-del{color:var(--del-ink)}
.head-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.head-row>h1,.head-row>h2{margin:0}
.form-err{color:var(--neg-ink);margin-bottom:var(--space-2)}

/* 입력 */
label{display:block;font-weight:600;font-size:var(--text-sm);margin:var(--space-3) 0 var(--space-1)}
input,select,textarea{width:100%;min-height:var(--control-h-md);padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--r);font:inherit;background:var(--input-bg)}
textarea{min-height:90px}
textarea.tall{min-height:140px}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
input.sm{display:inline-block;width:auto;min-height:var(--control-h-sm);padding:0 var(--space-2);font-size:var(--text-xs)}
input.w-token{width:130px}input.w-np{width:100px}input.w-pw{width:120px}
.check-row{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);font-weight:600}
.check-row input{width:var(--space-4);height:var(--space-4);margin:0}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.row>*{flex:1;min-width:160px}
.row>.grow-2{flex:2}
.inline-form{display:inline}
/* 비밀번호 입력 + [보기] 토글(ui.js 가 input[data-pw-toggle] 를 감싼다) */
.pw-field{display:flex;gap:var(--space-2);align-items:center}
.pw-field input{flex:1;min-width:0}
.pw-field__btn{flex:none;min-width:4.5em}
/* 비밀값 보기·복사(form[data-secret]) — 값은 누를 때만 서버에서 받아 온다 */
.secret{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.secret__value{min-width:7em;font-family:ui-monospace,Consolas,'D2Coding',monospace;font-size:var(--text-md);letter-spacing:.06em;color:var(--mut);overflow-wrap:anywhere}
.secret__value.is-shown{color:var(--ink);letter-spacing:0;user-select:all}
.secret__actions{display:inline-flex;gap:var(--space-2)}
.secret .btn{min-width:4.5em}
.flex-form{display:flex;gap:var(--space-1);align-items:center}

/* 표 */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);text-align:left;font-size:var(--text-md)}
th{color:var(--mut);font-weight:600;font-size:var(--text-xs)}
td.ta-r,th.ta-r{text-align:right}
td select{min-width:96px}

/* 태그 */
.tag{display:inline-block;background:var(--soft);color:var(--tag-ink);border-radius:var(--r-sm);padding:2px var(--space-2);font-size:var(--text-xs);font-weight:600}
.tag.neg{background:var(--neg-soft);color:var(--neg-ink)}
.tag.pos{background:var(--pos-soft);color:var(--pos-ink)}
.tag.warn{background:var(--warn-tag);color:var(--warn-ink)}
.tag.del{background:var(--del-tag);color:var(--del-ink)}

/* 격자 · KPI */
.grid{display:grid;gap:var(--space-4)}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-4)}
.kpi b{font-size:var(--text-2xl);display:block;font-variant-numeric:tabular-nums}
.kpi b.neg{color:var(--neg)}.kpi b.pos{color:var(--pos)}
.kpi b .unit{font-size:var(--text-md);font-weight:600;margin-left:2px}   /* 숫자 뒤 단위(명·건·개) */

/* 막대(분포) — 폭은 데이터에서 오므로 style="--pct:62%" 로만 넘긴다 */
.meter{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0}
.meter-label{width:64px;font-size:var(--text-sm)}
.meter-track{flex:1;background:var(--soft-3);border-radius:var(--r-sm);height:var(--space-4);overflow:hidden}
.meter-fill{width:var(--pct,0%);height:100%;background:var(--neg)}
.meter-fill.is-brand{background:var(--brand)}
.meter-num{width:36px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums}
td.nowrap{font-variant-numeric:tabular-nums}

/* 빈 상태 · 페이지 넘김 */
.empty{color:var(--mut);text-align:center;padding:var(--space-7)}
.pager{margin-top:var(--space-3);display:flex;gap:var(--space-2);flex-wrap:wrap}

/* 바닥글 */
.site-foot{text-align:center;color:var(--mut);font-size:var(--text-xs);padding:var(--space-6)}
.site-foot__legal{margin-bottom:var(--space-2)}
.site-foot__legal a{display:inline-flex;align-items:center;min-height:var(--control-h-sm);color:var(--mut)}
.site-foot__legal a.strong{font-weight:600}
.site-foot .sep{opacity:.5}

@media(max-width:720px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .g2{grid-template-columns:1fr}
  .top .wrap{flex-wrap:wrap}
  nav.main{order:3;width:100%;flex-basis:100%}
  .eyebtn span{display:none}
  /* 좁은 화면에서는 칸을 눌러 세로 글자로 만들지 않고 표 안에서 옆으로 민다 */
  .table-wrap.wide>table{min-width:600px}
}

/* ── 사용자 틀 — 관리자에게만 보이는 「관리자 화면으로」 ── */
nav.main a.nav-switch{margin-left:auto;border:1px solid var(--line);color:var(--ink-3)}
nav.main a.nav-switch:hover{background:var(--soft)}

/* ── 관리자 틀 — 짙은 머리말 + 묶음 메뉴(넓은 화면은 왼쪽, 좁은 화면은 서랍) ── */
header.top.is-admin{background:var(--admin-bg);border-bottom-color:var(--admin-bg);color:var(--admin-ink)}
.top.is-admin .wrap{max-width:calc(var(--wrap) + var(--admin-side-w))}
.is-admin .brand{color:var(--admin-ink)}
.admin-badge{display:inline-flex;align-items:center;background:var(--admin-tag);color:var(--admin-tag-ink);border-radius:var(--r-sm);padding:2px var(--space-2);font-size:var(--text-xs);font-weight:800}
.is-admin .uchip{color:var(--admin-mut)}
.is-admin .eyebtn,.is-admin .btn.gho{background:var(--admin-chip);color:var(--admin-ink)}
.is-admin .eyebtn:hover,.is-admin .btn.gho:hover{background:var(--admin-chip);filter:brightness(1.2)}
.top .head-sp{flex:1}
.admin-menu-btn{display:none}
.admin-shell{max-width:calc(var(--wrap) + var(--admin-side-w));margin:0 auto;display:grid;grid-template-columns:var(--admin-side-w) minmax(0,1fr);align-items:start}
.admin-shell>.wrap{max-width:none;margin:0;min-width:0}
.admin-side{position:sticky;top:var(--admin-head-h,57px);background:var(--admin-side);border-right:1px solid var(--line);min-height:calc(100vh - 57px);min-height:calc(100dvh - 57px);padding:var(--space-5) var(--space-3);display:flex;flex-direction:column;gap:var(--space-4)}
.admin-side__head{display:none}
.nav-group__title{margin:0 0 var(--space-1);padding:0 var(--space-3);font-size:var(--text-xs);font-weight:700;color:var(--mut)}
.nav-group a{display:flex;align-items:center;justify-content:space-between;min-height:var(--control-h-sm);padding:0 var(--space-3);border-radius:var(--r);font-weight:600;color:var(--ink-2)}
.nav-group a:hover{background:var(--soft-2)}
.nav-group a.on{background:var(--brand);color:var(--on-brand)}
.admin-side__foot{margin-top:auto;border-top:1px solid var(--line-2);padding-top:var(--space-3)}
.admin-side__foot a{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);padding:0 var(--space-3);border-radius:var(--r);font-weight:600;color:var(--brand)}
.admin-side__foot a:hover{background:var(--soft-2)}
.drawer-scrim{display:none}

/* ── 확인 대화상자(ui.js 가 <form data-confirm> 을 가로챈다) ── */
.dlg{border:0;padding:0;width:min(440px,calc(100vw - 2 * var(--space-4)));max-height:calc(100vh - 2 * var(--space-4));max-height:calc(100dvh - 2 * var(--space-4));border-radius:var(--r-lg);background:var(--card);color:var(--ink);box-shadow:var(--shadow-modal);overflow:hidden}
.dlg[open]{display:flex;flex-direction:column}
.dlg::backdrop{background:var(--scrim)}
.dlg__body{padding:var(--space-6) var(--space-6) var(--space-4);overflow-y:auto;overscroll-behavior:contain}
.dlg__title{margin:0 0 var(--space-2);font-size:var(--text-lg);line-height:var(--leading-tight)}
.dlg__msg{margin:0;color:var(--ink-2);white-space:pre-line}
.dlg__actions{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-4) var(--space-6) var(--space-5);border-top:1px solid var(--line);background:var(--card)}
.btn.danger{background:var(--neg-ink);color:var(--on-brand)}
@keyframes pop-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.dlg[open]{animation:pop-in .16s ease-out}}

/* ── 토스트 — JS 가 없으면 본문 맨 위 카드로 그대로 보인다 ── */
.toast-stack{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-4)}
.toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-lg);padding:var(--space-3) var(--space-4);font-size:var(--text-md)}
.toast.is-ok{border-color:var(--ok-line);border-left-color:var(--pos);background:var(--ok-soft)}
.toast.is-err{border-color:var(--neg-line);border-left-color:var(--neg);background:var(--neg-soft)}
.toast__icon{flex:none;font-weight:800}
.toast.is-ok .toast__icon{color:var(--pos-ink)}.toast.is-err .toast__icon{color:var(--neg-ink)}.toast.is-info .toast__icon{color:var(--brand)}
.toast__msg{flex:1;min-width:0;overflow-wrap:anywhere}
.toast__close{display:none}
html.js .toast-stack{position:fixed;z-index:var(--z-toast);top:calc(var(--control-h-sm) + var(--space-6));right:var(--space-4);width:min(380px,calc(100vw - 2 * var(--space-4)));margin:0;pointer-events:none}
html.js .toast{pointer-events:auto;align-items:center;background:var(--toast-bg);border:0;border-left:4px solid var(--toast-info);color:var(--on-brand);box-shadow:var(--shadow-pop);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4)}
html.js .toast.is-ok{border-left-color:var(--toast-ok)}
html.js .toast.is-err{border-left-color:var(--toast-err)}
html.js .toast.is-ok .toast__icon{color:var(--toast-ok)}
html.js .toast.is-err .toast__icon{color:var(--toast-err)}
html.js .toast.is-info .toast__icon{color:var(--toast-info)}
html.js .toast__msg{padding:var(--space-2) 0}
html.js .toast__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--control-h-sm);height:var(--control-h-sm);border:0;border-radius:var(--r);background:transparent;color:var(--on-brand);font:inherit;font-size:var(--text-lg);cursor:pointer}
html.js .toast__close:hover{background:var(--admin-chip)}
.toast.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
@media(prefers-reduced-motion:no-preference){html.js .toast{animation:pop-in .18s ease-out}}

/* ── 콤보박스 — ui.js 가 <select> 옆에 붙인다. 원래 select 는 숨겨 두고 폼 값만 보낸다 ── */
select.is-enhanced{display:none}
.combo{position:relative;min-width:0}
input.combo__input{padding-right:calc(var(--control-h-sm) + var(--space-1));text-overflow:ellipsis;cursor:pointer}
input.combo__input:focus{cursor:text}
.combo__btn{position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-sm);height:100%;border:0;background:transparent;color:var(--mut);cursor:pointer;border-radius:0 var(--r) var(--r) 0}
.combo__btn svg{width:var(--space-4);height:var(--space-4);transition:transform .12s}
.combo.is-open .combo__btn svg{transform:rotate(180deg)}
.combo__list{position:absolute;z-index:var(--z-pop);left:0;right:0;top:calc(100% + var(--space-1));min-width:160px;margin:0;padding:var(--space-1);list-style:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop);max-height:280px;overflow-y:auto;overscroll-behavior:contain}
.combo.is-up .combo__list{top:auto;bottom:calc(100% + var(--space-1))}
.combo__opt{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);padding:var(--space-2) var(--space-3);border-radius:var(--r-sm);font-size:var(--text-md);color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;overflow-wrap:anywhere}
.combo__opt[aria-selected=true]{font-weight:700;color:var(--brand)}
.combo__opt[aria-selected=true]::after{content:"✓";margin-left:auto}
.combo__opt.is-active{background:var(--soft)}
.combo__opt[aria-disabled=true]{color:var(--mut);cursor:default}
td .combo{min-width:112px}
/* 표의 주 칸(이름·이메일·제목)은 긴 글자를 줄바꿈해 버튼 칸이 밀려나지 않게 */
table.responsive td.cell-main{overflow-wrap:anywhere;min-width:10em}

/* ── 모바일 표 — 599px 이하에서 table.responsive 는 줄마다 카드가 된다 ──
   칸에 data-label 을 붙이면 그 이름이 앞에 나온다. 주 칸은 td.cell-main, 버튼 칸은 td.cell-actions. */
@media(max-width:599px){
  .table-wrap.wide>table.responsive{min-width:0}
  table.responsive,table.responsive tbody,table.responsive tr,table.responsive td{display:block;width:100%}
  table.responsive thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.responsive tr{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);padding:var(--space-2) var(--space-3);margin:0 0 var(--space-2);background:var(--card)}
  table.responsive td{position:relative;border:0;padding:var(--space-1) 0 var(--space-1) 6.5em;text-align:left;overflow-wrap:anywhere}
  table.responsive td::before{content:attr(data-label);position:absolute;left:0;top:var(--space-1);width:6em;color:var(--mut);font-size:var(--text-xs);font-weight:600;line-height:calc(var(--text-md) * var(--leading-normal))}
  table.responsive td.ta-r{text-align:left}
  table.responsive td.cell-main{order:-1;padding-left:0;font-size:var(--text-base)}
  table.responsive td.cell-main::before,table.responsive td.cell-actions::before,table.responsive td.empty::before{content:none}
  table.responsive td.cell-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-2);padding:var(--space-2) 0 var(--space-1);white-space:normal}
  table.responsive td.empty{padding:var(--space-6) 0}
  table.responsive td:empty{display:none}
  table.responsive td .combo,table.responsive td .flex-form{max-width:260px}
}

@media(max-width:720px){
  /* 관리자 틀: 메뉴는 서랍으로(JS 가 없으면 본문 위에 그대로 펼쳐 둔다) */
  .admin-shell{display:block}
  html.js .admin-menu-btn{display:inline-flex}
  html.js .admin-side{position:fixed;z-index:var(--z-drawer);top:0;left:0;bottom:0;width:min(300px,86vw);height:100vh;height:100dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-right:0;box-shadow:var(--shadow-modal);transform:translateX(-105%);visibility:hidden;transition:transform .2s,visibility .2s}
  html.js .admin-side.is-open{transform:none;visibility:visible;transition:transform .2s,visibility 0s}
  html.js .admin-side__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:0 0 0 var(--space-3)}
  .admin-side__head b{font-size:var(--text-lg)}
  html.js .drawer-scrim.is-open{display:block;position:fixed;inset:0;z-index:calc(var(--z-drawer) - 1);background:var(--scrim)}
  html:not(.js) .admin-side{position:static;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .is-admin .head-sp{display:none}
  nav.main a.nav-switch{margin-left:0}
  /* 대화상자: 바닥에서 올라오는 판 — 버튼 줄은 바닥에 붙고 본문만 스크롤 */
  .dlg{width:100%;max-width:none;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:calc(100vh - var(--space-7));max-height:calc(100dvh - var(--space-7))}
  .dlg__body{padding:var(--space-5) var(--space-4) var(--space-3)}
  .dlg__actions{padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom))}
  .dlg__actions .btn{flex:1;min-height:var(--control-h-md)}
  html.js .toast-stack{top:auto;bottom:calc(var(--space-4) + env(safe-area-inset-bottom));left:var(--space-4);right:var(--space-4);width:auto}
}

/* ── 고객센터 부품(2026-10-09) ─────────────────────────────────── */
/* 탭 — 고객센터 묶음·FAQ 분류·관리 목록 상태 거르기. 링크(<a>)로 쓰고 지금 것은 .on + aria-current */
.tabs{display:flex;flex-wrap:wrap;gap:0 var(--space-1);border-bottom:1px solid var(--line);margin:0 0 var(--space-5)}
.tabs a{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--control-h-sm);padding:0 var(--space-4);margin-bottom:-1px;border-bottom:2px solid transparent;font-weight:600;color:var(--mut)}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.tabs .count-badge{margin-left:0}
.tabs .num{font-size:var(--text-xs);color:var(--mut);font-variant-numeric:tabular-nums}

/* 검색 줄(목록 위) */
.search-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.search-row input{flex:1 1 12em;min-width:0}

/* 글 목록(공지) — 줄 전체가 링크 */
.post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.post-list li{border-bottom:1px solid var(--line)}
.post-list a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--control-h-lg);padding:var(--space-3) var(--space-2)}
.post-list a:hover{background:var(--soft-3)}
.post-list__title{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere}
.post-list__meta{flex:none;color:var(--mut);font-size:var(--text-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.tag.pin{background:var(--brand);color:var(--on-brand)}

/* 본문 HTML(정화된 공지) — 제목·목록·표·그림이 카드 폭을 넘지 않게 */
.prose{line-height:var(--leading-loose);overflow-wrap:anywhere}
.prose h2{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-2)}
.prose h3{font-size:var(--text-lg);margin:var(--space-5) 0 var(--space-2)}
.prose h4{font-size:var(--text-base);margin:var(--space-4) 0 var(--space-1)}
.prose p{margin:0 0 var(--space-3)}
.prose ul,.prose ol{padding-left:var(--space-6);margin:0 0 var(--space-3)}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.prose img{max-width:100%;height:auto;border-radius:var(--r)}
.prose figure{margin:var(--space-4) 0}
.prose figcaption{font-size:var(--text-sm);color:var(--mut);margin-top:var(--space-1)}
.prose blockquote{margin:var(--space-3) 0;padding:var(--space-2) var(--space-4);border-left:4px solid var(--line-2);color:var(--ink-2);background:var(--soft-3);border-radius:0 var(--r) var(--r) 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:var(--space-5) 0}
.prose table{display:block;overflow-x:auto;margin:0 0 var(--space-3)}
.prose th,.prose td{border:1px solid var(--line)}
.prose th{color:var(--ink);font-size:var(--text-md);background:var(--soft-3)}
.prose>:first-child{margin-top:0}

/* 이전/다음 글 */
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)}
.prev-next a{display:flex;flex-direction:column;gap:var(--space-1);min-height:var(--control-h-lg);padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.prev-next a:hover{border-color:var(--brand)}
.prev-next .is-next{text-align:right;grid-column:2}
.prev-next small{color:var(--mut);font-size:var(--text-xs);font-weight:600}
.prev-next span{font-weight:600;overflow-wrap:anywhere}

/* FAQ — <details> 펼침(키보드 Enter/Space·스크린리더는 브라우저가 그대로 맡는다) */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--control-h-lg);padding:var(--space-3) var(--space-2);cursor:pointer;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--soft-3)}
.faq-item summary .q{flex:none;color:var(--brand);font-weight:800}
.faq-item summary .t{flex:1;min-width:0;overflow-wrap:anywhere}
.faq-item summary::after{content:"";flex:none;width:var(--space-2);height:var(--space-2);margin:var(--space-2) var(--space-1) 0;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .12s}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:var(--space-3)}
.faq-answer{display:flex;gap:var(--space-3);padding:0 var(--space-2) var(--space-4)}
.faq-answer .a{flex:none;color:var(--mut);font-weight:800}
.faq-answer div{flex:1;min-width:0;white-space:pre-line;color:var(--ink-2);overflow-wrap:anywhere}

/* 문의 대화(질문·답변·추가 질문) */
.thread{display:flex;flex-direction:column;gap:var(--space-3);margin:0 0 var(--space-4)}
.msg{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);background:var(--card)}
.msg.is-staff{background:var(--ic-soft-2);border-color:var(--ic-soft-1);border-left:4px solid var(--brand)}
.msg__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--mut);margin-bottom:var(--space-2)}
.msg__head b{color:var(--ink)}
.msg__body{white-space:pre-line;overflow-wrap:anywhere}
.attach-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-3) 0 0;padding:0}
.attach-list a{display:block;border-radius:var(--r)}
.attach-list img{display:block;width:96px;height:96px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);background:var(--soft-3)}

/* 끌어놓기 칸 — <div class="dropzone" data-dropzone data-max="3"> 안에 input[type=file].
   JS 가 없으면 파일 칸 그대로, 있으면 끌어놓기·붙여넣기·미리보기·빼기(ui.js). 판정은 서버가 한다. */
.dropzone{position:relative;border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:var(--space-4);background:var(--input-bg);transition:border-color .12s,background .12s}
.dropzone.is-over{border-color:var(--brand);background:var(--ic-soft-2)}
.dropzone__hint{margin:0;color:var(--mut);font-size:var(--text-sm);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
html.js .dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html:not(.js) .dropzone__pick{display:none}
.dropzone__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0}
.dropzone__list:not(:empty){margin-top:var(--space-3)}
.dropzone__item{position:relative}
.dropzone__item img{display:block;width:88px;height:88px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.dropzone__item button{position:absolute;top:var(--space-1);right:var(--space-1);min-width:var(--control-h-sm);min-height:var(--control-h-sm);padding:0;border:0;border-radius:var(--r);background:var(--toast-bg);color:var(--on-brand);font:inherit;font-size:var(--text-lg);cursor:pointer;opacity:.9}
.dropzone__err{margin:var(--space-2) 0 0;color:var(--neg-ink);font-size:var(--text-sm)}
.dropzone__err:empty{display:none}

/* 선택지(라디오) — 항목이 서너 개면 펼침 목록 대신 한눈에 보이는 단추로 */
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{display:block;font-weight:600;font-size:var(--text-sm);margin:var(--space-3) 0 var(--space-1);padding:0}
.choice-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
label.choice{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);margin:0;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--r);background:var(--input-bg);font-size:var(--text-md);cursor:pointer}
label.choice:has(input:checked){border-color:var(--brand);color:var(--brand);background:var(--ic-soft-2)}
label.choice:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}

/* 개인정보 수집·이용 동의 — 항목·목적·보유 기간을 체크 위에 그대로 보인다 */
.consent{border:1px solid var(--line);border-radius:var(--r);background:var(--soft-3);padding:var(--space-3) var(--space-4);margin-top:var(--space-4);font-size:var(--text-sm)}
.consent dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);margin:0 0 var(--space-2)}
.consent dt{font-weight:700;color:var(--ink-2)}
.consent dd{margin:0;color:var(--ink-2)}
.consent .check-row{font-size:var(--text-md);margin:0}

/* 허니팟 — 사람에게는 안 보이고(스크린리더도 건너뜀) 봇만 채운다 */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* 링크 KPI(관리자 대시보드) — 숫자를 누르면 그 목록으로 */
a.kpi{display:block;color:inherit}
a.kpi:hover{border-color:var(--brand)}
.kpi small{display:block;color:var(--mut);font-size:var(--text-xs)}
.kpi b.warn{color:var(--warn-ink)}

/* 정의 목록(상세 정보) · 버튼 줄 */
.info-list{display:grid;grid-template-columns:8em 1fr;gap:var(--space-2) var(--space-4);margin:0}
.info-list dt{color:var(--mut);font-size:var(--text-sm);font-weight:600}
.info-list dd{margin:0;overflow-wrap:anywhere}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}

@media(max-width:599px){
  .prev-next{grid-template-columns:1fr}
  .prev-next .is-next{grid-column:1}
  .info-list{grid-template-columns:1fr;gap:0}
  .info-list dd{margin-bottom:var(--space-2)}
  .post-list a{flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
  .post-list__title{flex-basis:100%}
  .consent dl{grid-template-columns:1fr;gap:0}
  .consent dd{margin-bottom:var(--space-2)}
}

/* 단계 진행 줄 — 여러 요청으로 나눠 채우는 화면(상담 검색). li 상태: is-done · is-run · is-wait · is-skip · is-warn(한도) · is-err */
.steps{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}
.steps li{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h-sm);padding:0 var(--space-3);
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:var(--text-sm);color:var(--ink-2)}
.steps li b{font-weight:600}
.steps li small{color:var(--mut);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.steps .st-ic{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--r-full);font-size:var(--text-xs);font-weight:700;flex:none}
.steps .is-done .st-ic{background:var(--pos-soft);color:var(--pos-ink)}
.steps .is-run{border-color:var(--brand)}
.steps .is-run .st-ic{border:2px solid var(--soft-2);border-top-color:var(--brand);animation:steps-spin 1s linear infinite}
.steps .is-wait{color:var(--mut)}
.steps .is-wait .st-ic{border:2px solid var(--soft-2)}
.steps .is-skip .st-ic{background:var(--soft);color:var(--mut)}
.steps .is-warn{border-color:var(--warn-line)}
.steps .is-warn .st-ic{background:var(--warn-tag);color:var(--warn-ink)}
.steps .is-err{border-color:var(--neg-line)}
.steps .is-err .st-ic{background:var(--neg-soft);color:var(--neg-ink)}
@keyframes steps-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.steps .is-run .st-ic{animation:none}}

/* 일별 세로 막대(CSS) — 높이는 데이터라 style="--pct:…" 로만. 가장 튄 칸은 .is-peak, 회색 묶음은 .bars.is-neu */
.bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding-top:var(--space-2);border-bottom:1px solid var(--line)}
.bars span{flex:1;min-width:2px;height:var(--pct,0%);background:var(--brand);border-radius:2px 2px 0 0}
.bars span.is-peak{background:var(--neg)}
.bars.is-neu span{background:var(--chart-neu)}
.bars.is-neu span.is-peak{background:var(--mut)}
.bars-axis{display:flex;justify-content:space-between;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--mut)}

/* 휴대폰 인증 칸 — lib_sms.php pv_field_html() + assets/js/phone-verify.js (2026-10-09) */
.pv__row{display:flex;gap:var(--space-2);align-items:center}
.pv__row input{flex:1;min-width:0}
.pv__row .btn{flex:none;min-height:var(--control-h-md);white-space:nowrap}
.pv__msg{min-height:1.5em;margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--mut)}
.pv__msg.is-ok{color:var(--pos-ink)}
.pv__msg.is-err{color:var(--neg-ink)}
.pv.is-verified [data-pv-phone]{border-color:var(--pos-ink)}
/* 아이디 칸(username_field_html) — 결과 줄은 .pv__msg 를 같이 쓴다. 내 계정 「아이디 정하기」는 넓은 화면에서 칸을 늘리지 않는다. */
[data-uc] input[aria-invalid="true"]{border-color:var(--neg-ink)}
.uc-set [data-uc]{max-width:26rem}
input.w-uname{width:130px}
.pv-off{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--mut)}

/* ── 사건 관리 부품(2026-10-09) — docs/design/case-management.md ── */
/* 세로 타임라인: 사건 기록·기한. 점 색은 상태(is-done 초록 · is-now 브랜드 · is-next 점선) */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 var(--space-4) var(--space-6)}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;bottom:-6px;width:2px;background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline li::after{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:var(--r-full);background:var(--card);border:2px solid var(--line-2)}
.timeline li.is-done::after{background:var(--pos);border-color:var(--pos)}
.timeline li.is-now::after{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--ic-soft-2)}
.timeline li.is-next::after{border-style:dashed}
.timeline time{display:block;font-size:var(--text-xs);color:var(--mut);font-variant-numeric:tabular-nums}
.timeline b{display:block;font-size:var(--text-md)}
.timeline b .tag{margin-left:var(--space-1);vertical-align:1px}
.timeline p{margin:var(--space-1) 0 0;font-size:var(--text-sm);color:var(--ink-2);overflow-wrap:anywhere}
/* 고객용 단계 줄 — 순서 고정, 칸 수는 --n(데이터), 좁으면 세로 */
.stage-bar{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));margin:0;padding:0;list-style:none}
.stage-bar li{position:relative;padding-top:28px;text-align:center;font-size:var(--text-sm);color:var(--mut)}
.stage-bar li::before{content:"";position:absolute;top:10px;left:0;right:0;height:4px;background:var(--line)}
.stage-bar li:first-child::before{left:50%}
.stage-bar li:last-child::before{right:50%}
.stage-bar li::after{content:"";position:absolute;top:4px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:var(--r-full);background:var(--card);border:2px solid var(--line-2)}
.stage-bar li.is-done{color:var(--ink-2)}
.stage-bar li.is-done::before{background:var(--pos)}
.stage-bar li.is-done::after{background:var(--pos);border-color:var(--pos)}
.stage-bar li.is-now{color:var(--ink);font-weight:700}
.stage-bar li.is-now::before{background:linear-gradient(90deg,var(--pos) 50%,var(--line) 50%)}
.stage-bar li.is-now::after{background:var(--brand);border-color:var(--brand);box-shadow:0 0 0 4px var(--ic-soft-2)}
.stage-bar small{display:block;font-size:var(--text-xs);color:var(--mut);font-weight:400}
@media (max-width:720px){
  .stage-bar{grid-template-columns:1fr}
  .stage-bar li{padding:0 0 var(--space-3) var(--space-7);text-align:left;min-height:36px}
  .stage-bar li::before{top:14px;bottom:-6px;left:6px;right:auto;width:4px;height:auto}
  .stage-bar li:first-child::before{left:6px}
  .stage-bar li:last-child::before{display:none}
  .stage-bar li.is-now::before{background:var(--line)}
  .stage-bar li::after{top:2px;left:0;margin-left:0}
  .stage-bar small{display:inline;margin-left:var(--space-2)}
}
/* 신원 강도(강·중·약) — 점 + 글자 */
.strength{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-xs);font-weight:600;white-space:nowrap}
.strength::before{content:"";width:8px;height:8px;border-radius:var(--r-full);background:var(--soft-2)}
.strength.is-strong{color:var(--pos-ink)}
.strength.is-strong::before{background:var(--pos)}
.strength.is-mid{color:var(--warn-ink)}
.strength.is-mid::before{background:var(--warn)}
.strength.is-weak{color:var(--mut)}
/* 「변호사 확인 필요」 */
.legal-note{font-size:var(--text-xs);color:var(--warn-ink);font-weight:600}
/* 줄 안 글자 버튼(문장 속 링크와 같은 예외 — 40px 아님) */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer}