/* ============================================================
   디자인 토큰 — DESIGN.md §2~4 와 1:1 대응 (단일 출처)
   ============================================================ */
:root{
  /* §9 리브랜딩 (DRAFT-RTP A.1): 변수명 유지·값 치환 — Action Blue #0066CC 단일 액센트 */
  --primary-50:#F0F6FD; --primary-100:#DFEDFB; --primary-200:#BAD7F5;
  --primary-300:#85B8EA; --primary-500:#0071E3; --primary-600:#0066CC; --primary-700:#0055AA;
  --bg-page:#F5F5F7; --surface:#FFFFFF;
  --gray-50:#FAFAFC; --gray-100:#F0F0F0; --gray-200:#E0E0E0; --gray-300:#D2D2D7;
  --text-faint:#A1A1A6; --text-muted:#6E6E73; --gray-600:#58585C;
  --text-body:#333333; --text-strong:#1D1D1F;
  --st-todo-dot:#8B93A5;  --st-todo-bg:#EFF1F4;  --st-todo-tx:#5A6270;
  --st-prog-dot:#3B82F6;  --st-prog-bg:#EAF2FE;  --st-prog-tx:#1D4ED8;
  --st-rev-dot:#8B5CF6;   --st-rev-bg:#F3EEFD;   --st-rev-tx:#6D28D9;  --st-rev-chart:#6D28D9;
  --st-hold-dot:#F59E0B;  --st-hold-bg:#FCF1DF;  --st-hold-tx:#A64E08;
  --st-done-dot:#16A34A;  --st-done-bg:#E7F6ED;  --st-done-tx:#14713A; --st-done-chart:#047857;
  --danger:#DC2626; --danger-tx:#B91C1C; --danger-bg:#FDECEB;
  --warn:#F59E0B;   --warn-tx:#A64E08;   --warn-bg:#FCF1DF;
  --success:#16A34A; --success-tx:#14713A; --success-bg:#E7F6ED;
  --grid:#ECECEE; --axis:#D2D2D7;
  --radius-ctl:8px; --radius-card:11px; --radius-panel:18px; --radius-pill:999px;
  --primary-on-dark:#2997FF; /* 다크 표면(토스트·전역 내비) 전용 — 밝은 표면 사용 금지 */
  --shadow-card:none; /* 무그림자 원칙 — 카드 구분은 hairline 보더 */
  --shadow-float:0 8px 24px rgba(23,27,35,.14); /* 시스템의 단 하나의 그림자 (떠 있는 것 전용) */
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text-body);background:var(--bg-page);-webkit-font-smoothing:antialiased}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary-600);outline-offset:2px;border-radius:4px}
ul{list-style:none}
a{color:var(--primary-600);text-decoration:none;cursor:pointer}
#root{height:100%}

/* ============================================================
   로그인
   ============================================================ */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;padding:20px}
.login-card{width:400px;max-width:100%;background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:32px 28px;box-shadow:var(--shadow-card)}
.login-logo{width:40px;height:40px;border-radius:10px;background:var(--primary-600);color:#fff;font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.login-title{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong);text-align:center;margin-bottom:6px}
.login-sub{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:20px}
.login-err{display:none;background:var(--danger-bg);color:var(--danger-tx);font-size:13px;border-radius:var(--radius-ctl);padding:9px 12px;margin-bottom:14px}
.login-err.on{display:flex;align-items:center;gap:7px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:500;color:var(--gray-600);margin-bottom:5px}
.field label .req{color:var(--danger)}
.input,.selectbox,textarea.input{width:100%;height:36px;border:1px solid var(--gray-200);border-radius:var(--radius-ctl);background:var(--surface);padding:0 10px;font-size:14px;font-family:inherit;color:var(--text-body)}
textarea.input{height:auto;min-height:80px;padding:8px 10px;resize:vertical;line-height:1.55}
.input::placeholder{color:var(--text-faint)}
.input:focus,.selectbox:focus,textarea.input:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-200)}
.input.err,.selectbox.err{border-color:var(--danger)}
.field .err-msg{display:none;font-size:12px;color:var(--danger-tx);margin-top:4px}
.field .err-msg.on{display:block}
.pw-wrap{position:relative}
.pw-wrap .toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--text-faint);border-radius:4px}
.pw-wrap .toggle:hover{color:var(--gray-600);background:var(--gray-100)}
.login-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.login-cap{font-size:12px;color:var(--text-muted);text-align:center}

/* ============================================================
   앱 레이아웃 / 사이드바 / 헤더 / 툴바 (목업 동일)
   ============================================================ */
.app{display:grid;grid-template-columns:240px 1fr;height:calc(100vh - 36px);overflow:hidden}
/* 리서치 셸: 사이드바는 액션아이템과 동일하게 상설(§10.2b), 툴바·탭바만 없음 */
.rs-mode .toolbar,.rs-mode .tabbar{display:none !important}
.sidebar{background:var(--surface);border-right:1px solid var(--gray-200);display:flex;flex-direction:column;overflow-y:auto}
.ws{display:flex;align-items:center;gap:10px;padding:14px 16px 12px}
.ws-logo{width:26px;height:26px;border-radius:7px;background:var(--primary-600);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.ws-name{font-weight:700;font-size:14px;color:var(--text-strong)}
.ws-sub{font-size:11px;color:var(--text-muted)}
.nav{padding:4px 8px 8px}
.nav-item{display:flex;align-items:center;gap:9px;width:100%;padding:6px 9px;border-radius:6px;font-size:13px;font-weight:500;color:var(--gray-600);text-align:left}
.nav-item svg{flex:none}
.nav-item:hover{background:var(--gray-100)}
.nav-item.active{background:var(--primary-50);color:var(--primary-600)}
.nav-item .count{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-faint)}
.nav-item .dot-badge{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.side-sec{padding:12px 16px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-faint);display:flex;align-items:center;justify-content:space-between}
.side-sec button{color:var(--text-faint);font-size:14px;line-height:1;padding:2px 4px;border-radius:4px}
.side-sec button:hover{background:var(--gray-100);color:var(--gray-600)}
.proj-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sidebar-bottom{margin-top:auto;border-top:1px solid var(--gray-100);padding:10px 8px}
.me{display:flex;align-items:center;gap:9px;padding:6px 9px;border-radius:6px;width:100%;text-align:left}
.me:hover{background:var(--gray-100)}
.me .nm{font-size:13px;font-weight:600;color:var(--text-body)}
.me .rl{font-size:11px;color:var(--text-muted)}

.main{display:flex;flex-direction:column;min-width:0;height:calc(100vh - 36px)} /* gnav 제외 — 그리드 행 높이를 고정하는 기준 요소 */
.header{height:52px;flex:none;background:var(--surface);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:12px;padding:0 16px}
.search{flex:1;max-width:440px;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-pill);color:var(--text-faint);font-size:13px}
.search input{flex:1;border:none;background:transparent;font-size:13px;font-family:inherit;color:var(--text-body);outline:none;min-width:0}
.search input::placeholder{color:var(--text-faint)}
.search:focus-within{border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-200)}
.kbd{font-size:11px;font-weight:600;color:var(--text-faint);border:1px solid var(--gray-200);background:var(--surface);border-radius:4px;padding:0 5px;line-height:16px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gray-600);position:relative;flex:none}
.icon-btn:hover{background:var(--gray-100)}
.bell-dot{position:absolute;top:0;right:0;min-width:13px;height:13px;padding:0 3px;border-radius:7px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--surface);box-sizing:content-box}
.lang{display:flex;border:1px solid var(--gray-200);border-radius:var(--radius-ctl);overflow:hidden;height:28px}
.lang button{font-size:11px;font-weight:600;padding:0 9px;color:var(--text-muted)}
.lang button.on{background:var(--gray-100);color:var(--text-strong)}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--text-body);flex:none}
.avatar.sm{width:22px;height:22px;font-size:10px}
.avatar.xs{width:20px;height:20px;font-size:10px}
.av1{background:#DBE4F7}.av2{background:#E5DEF5}.av3{background:#D6EEE2}
.av4{background:#F7E7D4}.av5{background:#F5DEE4}.av6{background:#DDEBF0}

.toolbar{min-height:44px;flex:none;background:var(--surface);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:10px;padding:4px 16px;flex-wrap:wrap}
.page-title{font-size:14px;font-weight:700;color:var(--text-strong);display:flex;align-items:center;gap:8px;margin-right:6px}
.tabs{display:flex;background:var(--gray-100);border-radius:7px;padding:2px;gap:2px}
.tab{font-size:12.5px;font-weight:600;color:var(--text-muted);padding:4px 12px;border-radius:5px;white-space:nowrap}
.tab:hover{color:var(--text-body)}
.tab.on{background:var(--surface);color:var(--text-strong)} /* 표면 변화가 곧 강조 — 그림자 없음 (§9) */
.chips{display:flex;gap:6px;margin-left:6px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:5px;height:26px;padding:0 9px;border:1px dashed var(--gray-300);border-radius:13px;font-size:12px;font-weight:500;color:var(--text-muted);white-space:nowrap}
.chip:hover{border-color:var(--gray-600);color:var(--text-body)}
.chip.applied{border:1px solid var(--primary-200);background:var(--primary-50);color:var(--primary-600)}
.chip.danger{border:1px solid #F6C6C3;background:var(--danger-bg);color:var(--danger-tx)}
.chip .x{font-size:12px;line-height:1;opacity:.7}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;white-space:nowrap}
.btn:active:not(:disabled){transform:scale(.96)} /* 프레스 상태 (§9 — 가이드 scale 문법, 32px 밀도 보정) */
.icon-btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.btn:active:not(:disabled),.icon-btn:active{transform:none}}
.btn-sm{height:28px;padding:0 12px;font-size:12.5px}
.btn-primary{background:var(--primary-600);color:#fff}
.btn-primary:hover{background:var(--primary-700)}
.btn-primary:disabled{background:var(--primary-300);cursor:not-allowed}
.btn-secondary{background:var(--surface);border:1px solid var(--gray-200);color:var(--text-body)}
.btn-secondary:hover{background:var(--gray-50)}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#B91C1C}
.btn-ghost{color:var(--gray-600)}
.btn-ghost:hover{background:var(--gray-100)}

.content{flex:1;overflow:auto;position:relative}

/* ============================================================
   공통 소품
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap}
.badge .sdot{width:6px;height:6px;border-radius:50%;flex:none}
.b-todo{background:var(--st-todo-bg);color:var(--st-todo-tx)} .b-todo .sdot{background:var(--st-todo-dot)}
.b-prog{background:var(--st-prog-bg);color:var(--st-prog-tx)} .b-prog .sdot{background:var(--st-prog-dot)}
.b-rev{background:var(--st-rev-bg);color:var(--st-rev-tx)}   .b-rev .sdot{background:var(--st-rev-dot)}
.b-hold{background:var(--st-hold-bg);color:var(--st-hold-tx)} .b-hold .sdot{background:var(--st-hold-dot)}
.b-done{background:var(--st-done-bg);color:var(--st-done-tx)} .b-done .sdot{background:var(--st-done-dot)}
.badge.select{cursor:pointer;border:1px solid transparent}
.badge.select:hover{border-color:rgba(23,27,35,.14)}
.badge .chev{opacity:.65}
.prio{display:inline-flex;align-items:flex-end;gap:1.5px;width:12px;height:11px;flex:none}
.prio i{width:3px;border-radius:1px;background:var(--gray-200)}
.prio i:nth-child(1){height:4px}.prio i:nth-child(2){height:7px}.prio i:nth-child(3){height:10px}
.prio.hi i{background:var(--danger)}
.prio.md i{background:var(--warn)}.prio.md i:nth-child(3){background:var(--gray-200)}
.prio.lo i:nth-child(1){background:var(--text-faint)}
.prio-lb{font-size:12px;font-weight:500}
.prio-lb.hi{color:var(--danger-tx)}.prio-lb.md{color:var(--warn-tx)}.prio-lb.lo{color:var(--gray-600)}
.due{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--text-muted);white-space:nowrap}
.due.today,.due.soon{color:var(--warn-tx)}
.due.over{color:var(--danger-tx);background:var(--danger-bg);border-radius:5px;padding:1px 6px}
.meta{font-size:12px;color:var(--text-muted)}
.key{font-size:11px;font-weight:600;color:var(--text-faint);letter-spacing:.02em}
.cmt{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;color:var(--text-faint)}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:48px 20px;text-align:center}
.empty .ic{color:var(--gray-300)}
.empty .t1{font-size:15px;font-weight:600;color:var(--text-strong)}
.empty .t2{font-size:13px;color:var(--text-muted);margin-bottom:8px}

/* ============================================================
   칸반
   ============================================================ */
.board{display:flex;gap:12px;padding:16px;height:100%;overflow-x:auto;align-items:flex-start}
.col{flex:1 0 250px;max-width:320px;background:var(--gray-50);border-radius:10px;display:flex;flex-direction:column;max-height:100%}
.col.drop-hint{background:var(--primary-50)}
.col-h{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.col-h .sdot{width:8px;height:8px;border-radius:50%}
.col-h .nm{font-size:13px;font-weight:600;color:var(--text-strong)}
.col-h .cnt{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--gray-100);border:1px solid var(--gray-200);border-radius:9px;padding:0 6px;line-height:16px}
.col-h .add{margin-left:auto;width:22px;height:22px;border-radius:5px;color:var(--text-faint);display:flex;align-items:center;justify-content:center;font-size:15px}
.col-h .add:hover{background:var(--gray-200);color:var(--gray-600)}
.col-body{padding:2px 8px 10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:40px}
.card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:10px 12px;cursor:pointer;text-align:left;width:100%}
.card:hover{border-color:var(--gray-300)} /* hover는 보더 강조만 — 그림자 상승 삭제 (§9) */
.card.dragging{opacity:.35;border-style:dashed;box-shadow:var(--shadow-float)}
.card .top{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.card .title{font-size:13px;font-weight:600;color:var(--text-strong);line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.card .foot .avatar{margin-left:auto}
.card .pchip{font-size:10.5px;font-weight:600;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.card .pchip+.avatar{margin-left:0}
.card.done .title{color:var(--text-muted);font-weight:500}
.col-empty{font-size:12px;color:var(--text-faint);text-align:center;padding:18px 8px}
.chipstrip{display:none}

/* ============================================================
   테이블
   ============================================================ */
.tablewrap{padding:16px;min-width:0}
.tbl-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:10px;overflow:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{position:sticky;top:0;background:var(--gray-50);text-align:left;font-size:12px;font-weight:600;color:var(--text-muted);padding:0 12px;height:38px;border-bottom:1px solid var(--gray-200);white-space:nowrap;z-index:2}
.tbl thead th .sort{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:inherit;font:inherit}
.tbl thead th .sort:hover{color:var(--text-body)}
.tbl thead th .sort.on{color:var(--text-strong)}
.tbl tbody td{height:40px;padding:0 12px;border-bottom:1px solid var(--gray-100);white-space:nowrap;vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--gray-50);cursor:pointer}
.tbl .t-title{font-weight:600;color:var(--text-strong);max-width:420px;overflow:hidden;text-overflow:ellipsis}
.tbl .t-title .key{margin-right:8px}
.tbl .who{display:flex;align-items:center;gap:7px;color:var(--text-body)}
.tbl .proj{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted)}
.tbl .num{font-variant-numeric:tabular-nums}
.tbl .upd{font-size:12px;color:var(--text-faint)}
.tbl-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--gray-100);background:var(--surface)}
.rowact{display:flex;gap:6px;visibility:hidden}
tr:hover .rowact{visibility:visible}
.rowact button{font-size:12px;font-weight:600;padding:3px 8px;border-radius:5px;border:1px solid var(--gray-200);background:var(--surface)}
.rowact button:hover{background:var(--gray-50)}
.rowact button.danger{color:var(--danger-tx);border-color:#F6C6C3}
.rowact button.danger:hover{background:var(--danger-bg)}
.warn-tx{color:var(--warn-tx);font-weight:600}
.banner{display:flex;align-items:center;gap:8px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:8px;padding:9px 12px;font-size:12.5px;color:var(--text-muted);margin-bottom:12px}

/* 모바일 카드 리스트 (테이블 변형) */
.cardlist{display:none;flex-direction:column;gap:8px}
.cl-item{background:var(--surface);border:1px solid var(--gray-200);border-radius:8px;padding:10px 12px;text-align:left;width:100%}
.cl-item .t{font-size:13px;font-weight:600;color:var(--text-strong);margin-bottom:6px}
.cl-item .m{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ============================================================
   대시보드 (목업 동일)
   ============================================================ */
.dash{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:1180px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--gray-200);border-radius:10px;padding:14px 16px}
.kpi .lb{font-size:12px;font-weight:500;color:var(--text-muted)}
.kpi .val{font-size:26px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong);line-height:1.25;margin-top:2px}
.kpi .val.danger{color:var(--danger)}
.kpi .sub{font-size:12px;color:var(--text-muted);margin-top:2px}
.kpi .delta-up{color:var(--success-tx);font-weight:600}
.kpi .delta-bad{color:var(--danger-tx);font-weight:600}
.widgets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.widget{background:var(--surface);border:1px solid var(--gray-200);border-radius:10px;padding:16px}
.widget h3{font-size:14px;font-weight:600;color:var(--text-strong)}
.widget .wsub{font-size:12px;color:var(--text-muted);margin-top:1px}
.whead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.wlink{font-size:12px;font-weight:500}
.stackbar{display:flex;gap:2px;height:16px;border-radius:5px;overflow:hidden;margin-bottom:14px}
.stackbar i{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:7px}
.lg-row{display:flex;align-items:center;gap:8px;font-size:12.5px}
.lg-row .sdot{width:8px;height:8px;border-radius:2.5px;flex:none}
.lg-row .nm{color:var(--text-body)}
.lg-row .v{margin-left:auto;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lg-row .pct{width:38px;text-align:right;color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:12px}
.lg-inline{display:flex;gap:14px;font-size:12px;color:var(--text-muted);margin-bottom:12px}
.lg-inline span{display:inline-flex;align-items:center;gap:5px}
.lg-inline .sw{width:8px;height:8px;border-radius:2.5px}
.hbar-row{display:grid;grid-template-columns:64px 1fr 30px;align-items:center;gap:10px;margin-bottom:9px}
.hbar-row .nm{font-size:12.5px;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar{display:flex;gap:2px;height:14px}
.hbar i{display:block;height:100%}
.hbar i.ok{background:var(--st-prog-dot)}
.hbar i.late{background:var(--danger);border-radius:0 4px 4px 0}
.hbar i.ok:last-child{border-radius:0 4px 4px 0}
.hbar-row .tot{font-size:12px;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:left}
.meter-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--gray-100);width:100%;text-align:left}
.meter-row:last-child{border-bottom:none}
.meter-row:hover .pj{color:var(--primary-600)}
.meter-row .pj{display:flex;align-items:center;gap:8px;width:150px;flex:none;font-size:13px;color:var(--text-body);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.meter{flex:1;height:8px;border-radius:4px;background:var(--primary-100);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:var(--primary-600)}
.meter-row .pct{width:42px;text-align:right;font-size:13px;font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
.meter-row .frac{width:52px;text-align:right;font-size:11.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.trend{margin:2px 0 10px}
.late-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--gray-100);font-size:12.5px;width:100%;text-align:left}
.late-item:last-child{border-bottom:none}
.late-item:hover .t{color:var(--primary-600)}
.late-item .t{color:var(--text-body);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.late-item .m{color:var(--text-faint);font-size:12px;flex:none}
.late-item .due{margin-left:auto;flex:none}

/* ============================================================
   상세 슬라이드 패널
   ============================================================ */
.scrim{position:absolute;inset:0;background:rgba(23,27,35,.28);display:none;z-index:20}
.scrim.on{display:block}
.panel{position:absolute;top:0;right:0;bottom:0;width:480px;max-width:96%;background:var(--surface);border-left:1px solid var(--gray-200);box-shadow:var(--shadow-float);display:none;flex-direction:column;z-index:21}
.panel.on{display:flex}
.panel.wide{width:720px}
.panel-h{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--gray-100);flex:none}
.crumb{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.crumb b{color:var(--text-body);font-weight:600}
.panel-h .acts{margin-left:auto;display:flex;gap:2px}
.panel-body{flex:1;overflow-y:auto;padding:16px 20px 0}
.panel .ttl{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong);line-height:1.4;margin-bottom:12px}
.panel .ttl[contenteditable]:hover{background:var(--gray-50);border-radius:4px;cursor:text}
.panel .ttl[contenteditable]:focus{outline:2px solid var(--primary-200);border-radius:4px}
.ctl-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.props{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:16px}
.prop .k{font-size:11.5px;font-weight:500;color:var(--text-faint);margin-bottom:3px}
.prop .v{font-size:13px;color:var(--text-body);display:flex;align-items:center;gap:7px;min-height:22px;flex-wrap:wrap}
.prop .v select,.prop .v input[type=date]{border:1px solid transparent;border-radius:5px;font-family:inherit;font-size:13px;color:var(--text-body);background:transparent;padding:2px 4px;max-width:100%}
.prop .v select:hover,.prop .v input[type=date]:hover{border-color:var(--gray-200);background:var(--surface)}
.desc{font-size:13.5px;line-height:1.65;color:var(--text-body);margin-bottom:14px;white-space:pre-wrap}
.desc.editable:hover{background:var(--gray-50);border-radius:6px;cursor:text}
.desc.placeholder{color:var(--text-faint)}
.attach{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gray-200);border-radius:7px;padding:7px 10px;font-size:12.5px;color:var(--text-body);margin:0 8px 10px 0;cursor:pointer}
.attach:hover{background:var(--gray-50)}
.attach .sz{color:var(--text-faint);font-size:11.5px}
.subtabs{display:flex;gap:2px;border-bottom:1px solid var(--gray-200);margin:0 -20px;padding:0 20px;flex:none}
.subtab{font-size:13px;font-weight:600;color:var(--text-muted);padding:8px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.subtab.on{color:var(--text-strong);border-bottom-color:var(--primary-600)}
.subtab .n{color:var(--text-faint);font-weight:500}
.pane{display:none;padding:14px 0 16px}
.pane.on{display:block}
.comment{display:flex;gap:10px;padding:10px 0;position:relative}
.comment .body{min-width:0;flex:1}
.comment .hd{display:flex;align-items:baseline;gap:8px}
.comment .hd .nm{font-size:13px;font-weight:600;color:var(--text-strong)}
.comment .hd .tm{font-size:11.5px;color:var(--text-faint)}
.comment p{font-size:13px;line-height:1.6;color:var(--text-body);margin-top:2px;white-space:pre-wrap;word-break:break-word}
.comment .cacts{margin-left:auto;display:none;gap:4px}
.comment:hover .cacts{display:flex}
.comment .cacts button{font-size:11.5px;color:var(--text-faint);padding:2px 6px;border-radius:4px}
.comment .cacts button:hover{background:var(--gray-100);color:var(--gray-600)}
.hist{position:relative;padding:6px 0 4px 16px}
.hist:before{content:"";position:absolute;left:3px;top:12px;bottom:10px;width:1px;background:var(--gray-200)}
.hev{position:relative;padding:7px 0;font-size:12.5px;color:var(--text-body)}
.hev:before{content:"";position:absolute;left:-16.5px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--gray-300);border:1.5px solid var(--surface)}
.hev.hl:before{background:var(--primary-500)}
.hev b{font-weight:600;color:var(--text-strong)}
.hev .tm{color:var(--text-faint);font-size:11.5px;margin-left:6px}
.hev .chg{color:var(--text-muted)}
.hev .chg b{font-weight:600;color:var(--text-body)}
.cmt-input{flex:none;border-top:1px solid var(--gray-100);padding:12px 20px;display:flex;gap:10px;align-items:flex-start;background:var(--surface)}
.cmt-input textarea{flex:1;border:1px solid var(--gray-200);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;color:var(--text-body);min-height:38px;max-height:120px;resize:none}
.cmt-input textarea::placeholder{color:var(--text-faint)}
.cmt-input textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-200)}
.hint{font-size:11px;color:var(--text-faint);text-align:right;padding:0 20px 10px;background:var(--surface)}

/* ============================================================
   드롭다운 / 팝오버 / 모달 / 토스트 / 알림
   ============================================================ */
.pop{position:fixed;background:var(--surface);border:1px solid var(--gray-200);border-radius:8px;box-shadow:var(--shadow-float);z-index:60;min-width:160px;max-height:320px;overflow-y:auto;padding:4px}
.pop .opt{display:flex;align-items:center;gap:8px;width:100%;height:32px;padding:0 10px;border-radius:5px;font-size:13px;color:var(--text-body);text-align:left}
.pop .opt:hover{background:var(--gray-100)}
.pop .opt .ck{margin-left:auto;color:var(--primary-600);visibility:hidden}
.pop .opt.sel .ck{visibility:visible}
.pop .opt .sdot{width:8px;height:8px;border-radius:50%;flex:none}
.pop .psearch{width:calc(100% - 8px);margin:4px;height:30px;border:1px solid var(--gray-200);border-radius:5px;padding:0 8px;font-size:13px;font-family:inherit}
.pop .sep{height:1px;background:var(--gray-100);margin:4px 0}
.pop .grouplb{font-size:11px;font-weight:600;color:var(--text-faint);padding:6px 10px 2px}

.modal-scrim{position:fixed;inset:0;background:rgba(23,27,35,.45);z-index:70;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;overflow-y:auto}
.modal{background:var(--surface);border-radius:var(--radius-panel);box-shadow:var(--shadow-float);width:480px;max-width:100%}
.modal.form{width:640px}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0}
.modal-h h2{font-size:15px;font-weight:600;color:var(--text-strong)}
.modal-b{padding:16px 20px}
.modal-f{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 20px 16px}
.modal-f label.left{margin-right:auto;display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.toasts{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:10px;background:var(--text-strong);color:#fff;font-size:13px;border-radius:var(--radius-card);padding:10px 14px;max-width:360px;box-shadow:var(--shadow-float);animation:toastin .18s ease-out}
.toast a{color:var(--primary-on-dark);font-weight:600;white-space:nowrap}
.toast .x{color:rgba(255,255,255,.6);font-size:14px;line-height:1}
.toast.err{background:#7F1D1D}
@keyframes toastin{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}

.notif-pop{position:fixed;width:380px;max-width:94vw;background:var(--surface);border:1px solid var(--gray-200);border-radius:10px;box-shadow:var(--shadow-float);z-index:60;overflow:hidden}
.notif-h{display:flex;align-items:center;padding:10px 14px 0;gap:10px}
.notif-h .ttl{font-size:14px;font-weight:600;color:var(--text-strong)}
.notif-h .readall{margin-left:auto;font-size:12px}
.notif-tabs{display:flex;gap:2px;padding:6px 14px 0;border-bottom:1px solid var(--gray-100)}
.notif-tab{font-size:12.5px;font-weight:600;color:var(--text-muted);padding:6px 8px;border-bottom:2px solid transparent;margin-bottom:-1px}
.notif-tab.on{color:var(--text-strong);border-bottom-color:var(--primary-600)}
.notif-list{max-height:380px;overflow-y:auto}
.notif-row{display:flex;gap:10px;padding:11px 14px;width:100%;text-align:left;border-bottom:1px solid var(--gray-100);position:relative}
.notif-row:hover{background:var(--gray-50)}
.notif-row.unread{background:var(--primary-50)}
.notif-row.unread:before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--primary-600)}
.notif-row .ic{width:28px;height:28px;border-radius:50%;background:var(--gray-100);display:flex;align-items:center;justify-content:center;flex:none;font-size:13px}
.notif-row .bd{min-width:0;flex:1}
.notif-row .msg{font-size:12.5px;color:var(--text-body);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-row .tm{font-size:11px;color:var(--text-faint);margin-top:2px}

/* 관리자 콘솔 */
.admin{padding:16px;max-width:900px}
.admin h2{font-size:15px;font-weight:600;color:var(--text-strong);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.tag{font-size:11px;font-weight:600;border-radius:5px;padding:1px 7px}
.tag.admin{background:var(--primary-50);color:var(--primary-600)}
.tag.off{background:var(--gray-100);color:var(--gray-600)}
.tag.on{background:var(--success-bg);color:var(--success-tx)}

/* ============================================================
   2차: 캘린더 뷰 (§8.1 — mockup 토큰 동일)
   ============================================================ */
.calwrap{padding:16px;max-width:1180px}
.cal-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cal-nav{width:28px;height:28px;border:1px solid var(--gray-200);border-radius:6px;background:var(--surface);color:var(--gray-600);display:flex;align-items:center;justify-content:center}
.cal-nav:hover{background:var(--gray-50)}
.cal-title{font-size:16px;font-weight:700;color:var(--text-strong);margin:0 4px;white-space:nowrap}
.cal-cap{margin-left:auto;font-size:12px;color:var(--text-muted)}
.cal{background:var(--surface);border:1px solid var(--gray-200);border-radius:10px;overflow:hidden}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
.cal-dow span{padding:7px 10px;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-cell{min-width:0;min-height:96px;border-right:1px solid var(--gray-100);border-bottom:1px solid var(--gray-100);padding:6px 6px 4px}
.cal-cell:nth-child(7n){border-right:none}
.cal-grid .cal-cell:nth-last-child(-n+7){border-bottom:none}
.cal-cell .d{width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:12px;font-weight:500;color:var(--text-body);margin-bottom:4px}
.cal-cell.out .d{color:var(--text-faint)}
.cal-cell.today .d{background:var(--primary-600);color:#fff;font-weight:600}
.calchip{display:flex;align-items:center;gap:5px;width:100%;height:20px;padding:0 6px;border-radius:4px;font-size:11.5px;color:var(--text-body);background:var(--gray-50);margin-bottom:3px;text-align:left;overflow:hidden;white-space:nowrap}
.calchip:hover{background:var(--gray-100)}
.calchip .sdot{width:6px;height:6px;border-radius:50%;flex:none}
.calchip .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.calchip svg{flex:none}
.calchip.over{background:var(--danger-bg);color:var(--danger-tx);font-weight:500}
.calchip.over:hover{filter:brightness(.96)} /* hover 전용 hex 대신 토큰 위 밝기 변형 */
.calchip.done{color:var(--text-muted)}
.cal-more{font-size:11.5px;color:var(--text-muted);padding:0 6px;text-align:left}
.cal-more:hover{text-decoration:underline;color:var(--text-body)}
.cal-pop-day{font-size:13px;font-weight:600;color:var(--text-strong);padding:8px 10px 4px}
/* 모바일: 미니 그리드 + 아젠다 (§8.1) */
.cal-mini-grid .cal-cell{min-height:44px;padding:4px}
/* 주간 모드 (§8.1 개정): 1행 7열, 시간축 없음 — 셀 세로만 확장 */
.cal-week .cal-cell{min-height:max(320px,calc(100vh - 300px))}
.cal-week .calchip{height:22px}
.cal-week .calchip .t{flex:1}
.tabs-sm .tab{height:24px;padding:0 10px;font-size:12px} /* .tabs 패딩 2px 포함 28px — [오늘] 버튼과 정렬 */
.cal-empty-cap{display:flex;align-items:center;gap:10px;padding:12px 2px;font-size:13px;color:var(--text-muted)}
.cal-mini-grid .cal-cell .d{width:20px;height:20px;font-size:11px;margin:0 auto 3px}
.cal-mini-grid .cal-cell.sel{background:var(--primary-50)}
.cal-dots{display:flex;gap:2px;justify-content:center}
.cal-dots i{width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
.cal-dots i.late{background:var(--danger)}
.agenda{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.agenda-title{font-size:13px;font-weight:600;color:var(--text-strong)}

/* ============================================================
   2차: CSV 가져오기 스텝퍼 (§8.2 — mockup 참조 컴포넌트)
   ============================================================ */
.steps{display:flex;align-items:center;gap:8px;margin:2px 0 14px;font-size:12px;color:var(--text-muted)}
.step{display:flex;align-items:center;gap:6px}
.step .no{width:20px;height:20px;border-radius:50%;background:var(--gray-100);color:var(--text-muted);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.step.done-step .no{background:var(--success-bg);color:var(--success-tx)}
.step.on{color:var(--text-strong);font-weight:600}
.step.on .no{background:var(--primary-600);color:#fff}
.step-sep{flex:none;width:24px;height:1px;background:var(--gray-200)}
.sumchips{display:flex;gap:8px;margin-bottom:12px}
.sumchip{font-size:12px;font-weight:600;border-radius:6px;padding:3px 9px;background:var(--gray-50);color:var(--text-body)}
.sumchip.ok{background:var(--success-bg);color:var(--success-tx)}
.sumchip.err{background:var(--danger-bg);color:var(--danger-tx)}
.etbl{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--gray-200);border-radius:8px;overflow:hidden}
.etbl th{background:var(--gray-50);text-align:left;font-size:11.5px;font-weight:600;color:var(--text-muted);padding:7px 10px;border-bottom:1px solid var(--gray-200)}
.etbl td{padding:7px 10px;border-bottom:1px solid var(--gray-100);vertical-align:top}
.etbl tr:last-child td{border-bottom:none}
.etbl .rn{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.etbl .bad{color:var(--danger-tx)}
.etbl-wrap{max-height:280px;overflow-y:auto;margin-bottom:4px}
.dropzone{border:2px dashed var(--gray-300);border-radius:10px;padding:32px 16px;text-align:center;font-size:13px;color:var(--text-muted);cursor:pointer;margin:12px 0}
.dropzone:hover,.dropzone.over{border-color:var(--primary-600);background:var(--primary-50);color:var(--primary-600)}
.warn-banner{display:flex;align-items:center;gap:8px;background:var(--warn-bg);color:var(--warn-tx);font-size:12.5px;border-radius:8px;padding:8px 12px;margin-bottom:12px}

/* ============================================================
   2차: 다중선택 + 플로팅 액션 바 (§8.7)
   ============================================================ */
.tbl td.ck,.tbl th.ck{width:36px;padding:0 0 0 12px}
.tbl input[type=checkbox]{width:14px;height:14px;accent-color:var(--primary-600);cursor:pointer}
.tbl tbody tr.selrow{background:var(--primary-50);box-shadow:inset 2px 0 0 var(--primary-600)}
.tbl tbody tr.selrow:hover{background:var(--primary-50)}
.fab-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:44}
.fab{display:flex;align-items:center;gap:12px;background:var(--text-strong);color:#fff;border-radius:10px;box-shadow:var(--shadow-float);padding:10px 14px;font-size:13px}
.fab .n{font-weight:700;white-space:nowrap}
.fab .warncap{font-size:12px;color:#FCD9A8;display:flex;align-items:center;gap:5px;max-width:220px;word-break:keep-all;text-align:left}
.fab-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:6px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.10);white-space:nowrap;flex:none}
.fab-btn:hover{background:rgba(255,255,255,.18)}
.fab-btn.del{color:#FCA5A5}
.fab .sep{width:1px;height:18px;background:rgba(255,255,255,.22)}
.fab .x{opacity:.75;font-size:14px;padding:2px 4px}
.fab.busy{opacity:.6;pointer-events:none}

/* ============================================================
   2차: 패널 넓히기(§8.5) · 단축키 도움말(§8.6) · 반복(§8.3)
   ============================================================ */
.panel.wide{width:720px}
.panel.wide .panel-body{padding-left:40px;padding-right:40px}
@media (max-width:1279px){ .widen-btn{display:none} }
.helpgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
.helpgrid .grp{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--text-faint);margin:10px 0 4px;grid-column:1/-1}
.helprow{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;padding:3px 0}
.helprow .kbd{flex:none}
.wk-chips{display:flex;gap:5px;flex-wrap:wrap}
.wk-chips button{width:32px;height:28px;border:1px solid var(--gray-200);border-radius:6px;font-size:12px;color:var(--text-muted);background:var(--surface)}
.wk-chips button.on{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-600);font-weight:600}
.repeat-box{border:1px solid var(--gray-200);border-radius:8px;padding:12px;margin-bottom:14px;background:var(--gray-50)}

/* 회의록 가져오기 리뷰 카드 (views/minutes.js) — 확인 필요 행은 warn 틴트 + 좌측 보더 + ⚠ 캡션 삼중 인코딩 */
.review-card{border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:10px 12px;background:var(--surface)}
.review-card.warn-row{background:var(--warn-bg);border-color:var(--warn);border-left-width:3px}
.review-card .warn-cap{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--warn-tx);margin-bottom:6px}
.tag.warn{background:var(--warn-bg);color:var(--warn-tx);border:1px solid var(--warn)}
.sumchip.warn{background:var(--warn-bg);color:var(--warn-tx)}
.repeat-box .row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.repeat-preview{font-size:12px;color:var(--text-muted)}
.recur-ic{flex:none;color:var(--text-faint);display:inline-flex}

/* 하단 탭바 (모바일) */
.tabbar{display:none}

/* ============================================================
   4차 §9·§10: 전역 내비 + 리서치 (DRAFT-RTP)
   ============================================================ */
/* 전역 내비 — 앱에서 유일한 순수 블랙 표면 (하드코딩 #000 허용은 이 셀렉터 1곳뿐) */
.gnav{height:36px;flex:none;background:#000;display:flex;align-items:stretch;gap:4px;padding:0 16px}
.gnav .wm{display:flex;align-items:center;font-size:12px;font-weight:600;color:#fff;padding:0 8px 0 0;margin-right:10px} /* 12px — 네거티브 트래킹 금지 (§9 타이포) */
.gnav .wm-short{display:none}
.gnav .glink{position:relative;display:flex;align-items:center;padding:0 10px;font-size:12.5px;color:var(--text-faint)}
.gnav .glink:hover{color:#fff}
.gnav .glink.on{color:#fff;font-weight:600}
.gnav .glink.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#fff}
.gnav :focus-visible{outline-color:var(--primary-on-dark)}
/* 시각 은닉 aria-live 리전 (document.body 상주) */
.sr-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 리서치 공통 ---- */
.rs-wrap{max-width:1120px;margin:0 auto;padding:20px 16px 24px}
.rs-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.rs-top h1{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong)}
.rs-top .sp{margin-left:auto}

/* 스윔레인 카드 스니펫 (§10.2b) */
.card .rs-cdesc{font-size:12px;color:var(--text-muted);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rs-cconc{font-size:12px;color:var(--st-done-tx);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- 아카이브·휴지통 선반 카드 (hairline + 라운드 18 + 무그림자) ---- */
.rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.rs-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:20px;text-align:left;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.rs-card:hover{border-color:var(--gray-300)}
.rs-card .hd{display:flex;align-items:center;gap:8px}
.rs-card .hd .tm{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.rs-card .ttl{font-size:14px;font-weight:600;color:var(--text-strong);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rs-card .mt{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.rs-card .mt .cnt{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted)}
.rs-card .mt .working{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--st-prog-tx)}

/* ---- 세션: 3패널 리서치 문서 (DRAFT-RTP2 §A — 신설 토큰 0, 전부 §9 토큰) ---- */
.rs-shead{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:32px;flex-wrap:wrap;flex:none}
.rs-shead .ttl{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong);min-width:0}
.rs-shead .sp{margin-left:auto;display:flex;align-items:center;gap:8px}
/* 세션은 상하 스크롤을 패널별로 가진다 — 기존 .content 스크롤은 비활성 (§A.0) */
.content.rq-full{overflow:hidden;display:flex;flex-direction:column}
.rq-sess{display:flex;flex-direction:column;height:100%;width:100%;padding:12px 16px}
.rq-tabs{display:none;flex:none;margin-bottom:8px}
.rq-layout{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,820px) 300px;gap:20px;justify-content:center}
.rq-map,.rq-doc,.rq-panel{overflow-y:auto;min-height:0;outline:none}
/* 맵·우측 패널은 bg-page 그대로 + 1px hairline 경계, 문서 뷰만 surface "종이" (§A.0) */
.rq-map{border-right:1px solid var(--gray-200);padding:2px 14px 8px 2px}
.rq-doc{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:20px 24px 24px}
.rq-panel{border-left:1px solid var(--gray-200);padding:2px 2px 8px 14px;display:flex;flex-direction:column}

/* 문제 정의 (§A.1) */
.rq-prob{padding:2px 2px 10px}
.rq-prob .lb{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--gray-600);margin-bottom:4px;min-height:22px}
.rq-prob .lb .icon-btn{width:28px;height:28px;margin-left:auto}
.rq-prob .tx{font-size:12.5px;line-height:1.55;color:var(--text-body);white-space:pre-wrap;word-break:break-word;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rq-prob .tx.open{display:block}
.rq-prob .more{font-size:12px}
.rq-prob .cap{font-size:12px;color:var(--text-muted);margin-bottom:6px}

/* 질문 맵: 종합 문서 항목 + 트리 (§A.2) */
.rq-syn{display:flex;align-items:center;gap:8px;width:100%;min-height:32px;padding:6px 8px;border-radius:var(--radius-ctl);font-size:12.5px;font-weight:600;color:var(--text-body);text-align:left}
.rq-syn:hover{background:var(--gray-100)}
.rq-syn.on{background:var(--primary-50);box-shadow:inset 2px 0 0 var(--primary-600)}
.rq-tree{margin-top:4px}
.rq-kids{padding-left:16px;border-left:1px solid var(--gray-200);margin-left:10px}
.rq-kids.flat{padding-left:0;margin-left:0;border-left:none} /* 시각 들여쓰기 4레벨 클램프 */
.rq-node{display:flex;align-items:flex-start;gap:6px;width:100%;min-height:32px;padding:6px 8px;border-radius:var(--radius-ctl);text-align:left;cursor:pointer}
.rq-node:hover{background:var(--gray-100)}
.rq-node.on{background:var(--primary-50);box-shadow:inset 2px 0 0 var(--primary-600)}
.rq-node .qn{font-size:11px;font-weight:600;color:var(--text-muted);flex:none;padding-top:2px}
.rq-node .tx{font-size:12.5px;line-height:1.45;color:var(--text-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0}
.rq-node .chv{flex:none;width:16px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-faint);border-radius:4px}
.rq-node .chv:hover{background:var(--gray-200)}
.rq-node .chv svg{transition:transform .12s}
.rq-node[aria-expanded="false"] .chv svg{transform:rotate(-90deg)}
.stic{display:inline-flex;flex:none;padding-top:2px}
.st-ic-pend{color:var(--text-faint)}
.st-ic-plan{color:var(--warn-tx)}
.st-ic-done{color:var(--success-tx)}
.st-ic-err{color:var(--danger-tx)}
.rq-newq{width:100%;justify-content:center;margin-top:8px}
.rq-count{position:sticky;bottom:0;background:var(--bg-page);padding:8px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--gray-100);margin-top:8px}

/* 문서 뷰 공통 (§A.3) */
.rq-doc h1{font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--text-strong);line-height:1.4}
.rq-doc h2{font-size:15px;font-weight:600;color:var(--text-strong);margin:18px 0 8px}
.rq-dochead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rq-dochead .tm{font-size:11.5px;color:var(--text-faint)}
.rq-dochead .sp{margin-left:auto;display:flex;align-items:center;gap:8px}
.rq-body{font-size:13px;line-height:1.6;color:var(--text-body);white-space:pre-wrap;word-break:break-word}
.rq-gist{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:13px;line-height:1.5;color:var(--text-body)}
.rq-gist .qn{font-size:11px;font-weight:600;color:var(--text-muted);flex:none;padding-top:2px}
.rq-gist .tx{min-width:0;flex:1}
.rq-conc,.rq-diffbox{border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:10px 12px;margin:10px 0}
.rq-conc .hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.rq-diffbox .lb{font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:4px}
.rq-qhead .qn{font-size:11px;font-weight:600;color:var(--text-muted)}
.rq-qhead .row{display:flex;align-items:flex-start;gap:10px}
.rq-qhead h1{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-width:0;white-space:pre-wrap;word-break:break-word}
.rq-qhead h1.open{display:block}
.rq-verbar{margin:12px 0 8px;align-self:flex-start;display:inline-flex}
.rq-oldver{display:flex;align-items:center;gap:8px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-ctl);padding:7px 10px;font-size:12px;color:var(--text-muted);margin-bottom:10px}
.rq-cover{margin:10px 0}
.rq-covertgl{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--text-muted)}
.rq-covertgl:hover{color:var(--text-body)}
.rq-coverlist{margin-top:6px}
.rq-coverrow{display:flex;align-items:flex-start;gap:6px;font-size:12.5px;color:var(--text-body);padding:3px 0}
.rq-coverrow .tx{min-width:0;flex:1}
.rq-toc{margin:10px 0}
.rq-toc .lb{font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:2px}
.rq-toc a{display:block;font-size:12.5px;padding:2px 0}
.rq-byline{display:flex;align-items:center;gap:8px;margin-top:16px}
.rq-byline .nm{font-size:12.5px;font-weight:600;color:var(--text-strong)}
.rq-byline .tm{font-size:11.5px;color:var(--text-faint)}
.rq-acts{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.badge.b-warn{background:var(--warn-bg);color:var(--warn-tx)} .badge.b-warn .sdot{background:var(--warn)}
.badge.b-err{background:var(--danger-bg);color:var(--danger-tx)} .badge.b-err .sdot{background:var(--danger)}

/* 계획 검토 카드 (§A.3③) */
.rq-plan{border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:16px;margin-top:14px}
.rq-plan .itr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rq-plan .itr .no{font-size:11px;font-weight:600;color:var(--text-faint);width:16px;text-align:right;flex:none}
.rq-plan .ft{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
.rq-plan .errcap{font-size:12px;color:var(--danger-tx);margin-right:auto}
.rq-planro li{font-size:13px;color:var(--text-body);line-height:1.5;padding:3px 0 3px 12px;position:relative}
.rq-planro li::before{content:"·";position:absolute;left:2px;color:var(--text-faint)}

/* 우측 패널: 에이전트 카드 + 토론 스레드 (§A.4) */
.rq-agents{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;flex:none}
.rq-thread{flex:1;display:flex;flex-direction:column}
.rq-dpost{padding:9px 0;border-bottom:1px solid var(--gray-100)}
.rq-dpost:last-child{border-bottom:none}
.rq-dpost .phd{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rq-dpost .phd .nm{font-size:12.5px;font-weight:600;color:var(--text-strong)}
.rq-dpost .phd .tm{font-size:11px;color:var(--text-faint);margin-left:auto}
.rq-dpost .pbody{font-size:13px;line-height:1.55;color:var(--text-body);white-space:pre-wrap;word-break:break-word;margin-top:4px}
.rq-anchor{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-muted);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-pill);padding:1px 8px;margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.rq-anchor:hover{color:var(--primary-600);border-color:var(--primary-200)}
.rq-anchor .x{padding:0 2px;color:var(--text-faint);position:relative}
.rs-input .rq-anchor{overflow:visible} /* ×를 가진 입력 칩만 클립 해제 — 히트 확장이 overflow:hidden에 잘리면 무효 (2R #5). 라벨 "→ Q{n} v{v}"는 유한 길이라 ellipsis 불요 */
.rq-anchor .x::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;transform:translate(-50%,-50%)} /* 히트 영역 ≥32px — 시각은 유지 (1R #5) */
.rq-anchor .x:hover{color:var(--danger-tx)}
.rq-disc-empty{font-size:12.5px;color:var(--text-muted);padding:14px 0}
.rq-panel .rs-input{position:sticky;bottom:0;margin-top:auto}
.rq-cnt{margin-left:auto;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rq-cnt.over{color:var(--warn-tx);font-weight:600}

.rs-bsec .lb{font-size:12px;font-weight:600;color:var(--gray-600);margin-bottom:4px}
.rs-bsec li{font-size:13px;color:var(--text-body);line-height:1.5;padding-left:12px;position:relative;margin-bottom:3px}
.rs-bsec li::before{content:"·";position:absolute;left:2px;color:var(--text-faint)}
.agent-avatar{width:28px;height:28px;border-radius:50%;background:var(--gray-100);color:var(--gray-600);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex:none}
.agent-avatar.sm{width:20px;height:20px;font-size:11px}
.ai-badge{font-size:11px;font-weight:600;background:var(--gray-100);color:var(--gray-600);border-radius:4px;padding:0 5px;line-height:16px}
.rs-quote{font-size:12.5px;color:var(--text-muted);background:var(--gray-50);border-left:2px solid var(--gray-300);border-radius:0 6px 6px 0;padding:5px 10px;margin-top:6px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-cite{color:var(--primary-600);font-weight:600;text-decoration:none}
.rs-src{margin-top:8px}
.rs-src .tgl{font-size:12px;font-weight:600;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}
.rs-src .tgl:hover{color:var(--text-body)}
.rs-srcrow{display:flex;align-items:baseline;gap:6px;font-size:12.5px;padding:3px 0;min-width:0}
.rs-srcrow .no{font-size:11px;font-weight:600;color:var(--text-faint);flex:none}
.rs-srcrow a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rs-srcrow .dom{font-size:11px;color:var(--text-faint);flex:none}
.rs-runrow{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--text-muted);flex-wrap:wrap}
.rs-runrow .stage{color:var(--text-faint)}
.rs-runrow .stage.on{color:var(--text-body);font-weight:600}
.rs-runrow .errtx{color:var(--danger-tx);font-weight:600;display:inline-flex;align-items:center;gap:4px}
/* 입력 영역 (sticky) */
.rs-input{position:sticky;bottom:12px;background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-float)}
.rs-input textarea{border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:8px 10px;font-family:inherit;font-size:13px;color:var(--text-body);resize:none;min-height:38px;max-height:150px;line-height:1.5}
.rs-input textarea:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-200)}
.rs-input .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rs-input .cap{font-size:11.5px;color:var(--text-muted)}
.rs-input .cnt{margin-left:auto;font-size:11.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.rs-input .cnt.over{color:var(--warn-tx);font-weight:600}
.rs-lock{font-size:12.5px;color:var(--text-muted);background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-panel);padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* 에이전트 카드 (우측 패널 상단 — §A.4) */
.agent-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-card);padding:12px}
.agent-card .ah{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.agent-card .ah .nm{font-size:13px;font-weight:600;color:var(--text-strong)}
.agent-card .desc{font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:8px}
.agent-card .st{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);min-height:18px}
.agent-card .st .idot{width:6px;height:6px;border-radius:50%;background:var(--gray-300);flex:none}
.agent-card .st.busy{color:var(--st-prog-tx);font-weight:600}
.agent-card .st.err{color:var(--danger-tx);font-weight:600}
.agent-card .act{display:flex;justify-content:flex-end;margin-top:8px}
.agent-card .cap{font-size:11.5px;color:var(--text-faint);margin-top:6px}

/* 스피너 (aria-hidden 장식 — 상태는 텍스트+라이브 리전이 전달) */
.spinner{width:12px;height:12px;border:2px solid var(--gray-200);border-top-color:var(--primary-600);border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.5s}}

/* 세션 반응형 (§A.5) — ≥1280: 3패널 / 768–1279: 맵+문서 + 우측 오버레이 드로어 / <768: 탭 3개 전환 */
@media (min-width:1280px){
  .rq-disc-btn{display:none !important}
  /* 세션 한정: 셸 사이드바 오버레이 접힘 (§A.0 — <1280 오버레이 문법을 앞당겨 적용, 컴포넌트 무변경) */
  .app.rq-session{grid-template-columns:1fr}
  .app.rq-session .sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:50;transform:translateX(-100%);transition:transform .18s ease}
  .app.rq-session .sidebar.open{transform:none;box-shadow:var(--shadow-float)}
  .app.rq-session .menu-btn{display:flex !important}
}
@media (max-width:1279px){
  .rq-layout{grid-template-columns:220px minmax(0,1fr)}
}
@media (min-width:768px) and (max-width:1279px){
  .rq-panel{position:fixed;top:36px;right:0;bottom:0;width:320px;max-width:94vw;background:var(--surface);border-left:1px solid var(--gray-200);box-shadow:var(--shadow-float);z-index:50;transform:translateX(100%);transition:transform .18s ease;padding:12px}
  .rq-panel.open{transform:none}
}
@media (max-width:767px){
  .gnav{height:44px}
  .app{height:calc(100vh - 44px)}
  .main{height:calc(100vh - 44px)}
  .rs-mode .main{padding-bottom:0}
  .rs-input .btn{height:40px}
  .rq-disc-btn{display:none !important}
  .rq-tabs{display:flex}
  .rq-tabs .tab{flex:1;min-height:40px}
  .rq-layout{display:flex;flex-direction:column;gap:0;justify-content:flex-start} /* 기본 center는 flex column에서 세로 중앙정렬로 작동 (1R #2) */
  .rq-map,.rq-doc,.rq-panel{display:none;border-left:none;border-right:none;padding-left:2px;padding-right:2px}
  .rq-doc{padding:16px 14px;border:1px solid var(--gray-200)}
  .rq-layout.tab-map .rq-map{display:block}
  .rq-layout.tab-doc .rq-doc{display:block}
  .rq-layout.tab-disc .rq-panel{display:flex}
  .rq-node,.rq-syn{min-height:40px}
}
@media (max-width:419px){
  .gnav .wm-full{display:none}
  .gnav .wm-short{display:inline}
}

/* ============================================================
   반응형 (DESIGN.md §4.3 / §6-i)
   ============================================================ */
.side-scrim,.rq-scrim{position:fixed;inset:0;background:rgba(23,27,35,.35);z-index:49} /* 전역 승격 + 세션 드로어 스크림 병기 (rgba 단일 출처 — 1R #7) */
@media (max-width:1279px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;z-index:50;transform:translateX(-100%);transition:transform .18s ease}
  .sidebar.open{transform:none;box-shadow:var(--shadow-float)}
  .menu-btn{display:flex !important}
}
@media (min-width:1280px){ .menu-btn{display:none !important} }

@media (max-width:767px){
  .main{padding-bottom:52px}
  .header{gap:8px;padding:0 10px}
  .header .lang{display:none}
  .toolbar{padding:4px 10px}
  .page-title{display:none}
  .toolbar .tabs .tab{min-height:40px;padding:0 12px;font-size:12.5px}
  .kpis{grid-template-columns:1fr 1fr}
  .widgets{grid-template-columns:1fr}
  /* 칸반: 가로 스크롤 + snap, 컬럼 84vw */
  .board{scroll-snap-type:x mandatory;padding:10px;gap:10px}
  .col{flex:0 0 84vw;max-width:84vw;scroll-snap-align:center}
  .chipstrip{display:flex;gap:6px;overflow-x:auto;padding:8px 10px 0;scrollbar-width:none}
  .chipstrip .schip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--gray-200);background:var(--surface);border-radius:14px;font-size:12px;font-weight:600;color:var(--text-muted);white-space:nowrap;flex:none}
  .chipstrip .schip .sdot{width:7px;height:7px;border-radius:50%}
  .chipstrip .schip.on{border-color:var(--primary-600);color:var(--text-strong);box-shadow:inset 0 -2px 0 var(--primary-600)}
  /* 테이블 → 카드 리스트 */
  .tbl-card{display:none}
  .cardlist{display:flex}
  /* 상세 = 풀스크린 시트 */
  .panel{width:100% !important;max-width:100%}
  .modal{width:100% !important;min-height:60vh}
  .modal-scrim{padding:20px 0 0}
  /* 하단 탭바 */
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:52px;background:var(--surface);border-top:1px solid var(--gray-200);z-index:45}
  .tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:600;color:var(--text-muted);position:relative}
  .tabbar button.on{color:var(--primary-600)}
  .tabbar .bdot{position:absolute;top:6px;right:calc(50% - 14px);min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center}
}

/* ============================================================
   6차: 계정 온보딩 (가입 · 초대 · 비밀번호 · 멤버 관리)
   토큰만 사용 — 하드코딩 hex 금지 (DESIGN.md §2·§9)
   ============================================================ */
.field-hint{font-size:12px;line-height:1.45;color:var(--text-muted);margin-top:5px}
.linkbtn{display:inline-flex;align-items:center;min-height:32px;font-size:12.5px;color:var(--primary-600);padding:0 2px;border-radius:4px}
.linkbtn.left{margin-right:auto}
.linkbtn:hover{text-decoration:underline}
.linkbtn:disabled{color:var(--text-faint);text-decoration:none;cursor:default}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.otp-input{text-align:center;font-size:24px;font-weight:600;letter-spacing:.32em;text-indent:.32em;height:44px;font-variant-numeric:tabular-nums}
.otp-input::placeholder{letter-spacing:.32em;font-weight:400;color:var(--text-faint)}

/* 발송 실패·스텁 상황에서 관리자가 직접 전달할 링크 */
.linkbox{display:flex;align-items:center;gap:8px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-ctl);padding:8px 10px;margin-top:8px}
.linkbox code{flex:1;min-width:0;font-size:11.5px;color:var(--text-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

.tag.pending{background:var(--warn-bg);color:var(--warn-tx)}
.tag.sent{background:var(--success-bg);color:var(--success-tx)}
.tag.failed{background:var(--danger-bg);color:var(--danger-tx)}

/* 관리자 콘솔 섹션 머리 — .admin h2 가 제목+우측 액션을 겸한다 (별도 컴포넌트 불필요) */
.admin h2:not(:first-child){margin-top:24px}
.admin h2 .sp{flex:1}

/* 설정 박스 안의 가로 배치 필드 묶음 */
.setrow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.setrow .field{margin-bottom:0;min-width:200px}
.setrow .field.grow{flex:1;min-width:260px}
/* 버튼은 .setrow 안에 넣지 않는다 — 라벨 높이만큼 위로 떠 입력칸과 어긋난다 */
.setrow-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* 스위치 (자가 가입 허용) */
.switch{position:relative;display:inline-flex;align-items:center;min-height:32px;gap:9px;font-size:13.5px;color:var(--text-body);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:38px;height:22px;border-radius:var(--radius-pill);background:var(--gray-300);position:relative;transition:background .15s}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--surface);transition:transform .15s}
.switch input:checked + .track{background:var(--primary-600)}
.switch input:checked + .track::after{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--primary-600);outline-offset:2px}

/* 공통 유틸 — 인라인 style로 흩어져 있던 반복 패턴의 단일 출처 */
.btn-block{width:100%;height:36px;justify-content:center}
.radio-row{display:flex;gap:9px;align-items:flex-start;padding:7px 0;cursor:pointer}
.radio-lb{font-size:13.5px}
.radio-set{border:0;padding:0}
.radio-set legend{font-size:12px;font-weight:500;color:var(--gray-600);margin-bottom:5px;padding:0}
.rowact.always{visibility:visible}
.admin .tbl tbody tr{cursor:default}
/* 발송 대장 본문 — 미발송(스텁) 상태에서 관리자가 인증번호·초대 링크를 직접 전달하는 경로 */
.mail-body{white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.65;color:var(--text-body);background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-ctl);padding:12px;margin-top:10px;font-family:inherit}
/* 진행 중 버튼은 라벨을 읽혀야 하므로 대비를 유지한다 (disabled 회색 위 흰 글씨 = 2.16:1) */
.btn-primary[aria-busy="true"]{background:var(--primary-600);opacity:.75}
.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}

/* 스텝퍼 라벨 — 모바일에서 현재 단계만 남기기 위해 래핑 */
.steps .lb{white-space:nowrap}

@media (max-width: 767px){
  /* 관리자 콘솔은 카드 리스트 대체본이 없다 — .tbl-card 일괄 숨김(§4.3-4)에서 제외하고 가로 스크롤로 유지 */
  .admin{padding:12px}
  .admin .tbl-card{display:block}
  .admin .tbl{min-width:620px}

  /* 3단계 스텝퍼가 320px에서 넘친다 — 현재 단계 라벨만 노출 */
  .steps{gap:6px;font-size:11.5px}
  .step-sep{width:12px}
  .step:not(.on) .lb{display:none}

  /* flex:1 1 0% 이면 좁은 폭에서도 나란히 붙는다 — basis를 100%로 올려 한 줄에 하나씩 */
  .setrow{gap:14px}
  .setrow .field,.setrow .field.grow{flex:1 1 100%;min-width:0;width:100%}

  /* 터치 타겟 40px (§4.2) */
  .switch{min-height:40px}
  .linkbtn{min-height:40px}
  .login-page .lang{height:40px}
  .login-page .lang button{padding:0 14px}

  /* 관리자 표: 아이디 열을 접어 [작업] 버튼까지 가로 스크롤 없이 닿게 한다
     (아이디는 이메일에서 유추 가능 — 모바일에서 관리자가 하려는 일은 조회가 아니라 상태 변경) */
  .admin .tbl th:nth-child(2), .admin .tbl td:nth-child(2){display:none}
  .admin .tbl{min-width:520px}
}