/* 옆커폰 법무 대시보드 — 토큰은 web-design 스킬 references/tokens.css 정본을 따른다 */
:root{
  --brand:#60489D; --brand-d:#4B357E; --brand-l:#8B6FD6; --p-tint:#9484BE;
  --line:#E6E1F2; --bg:#F4F2F8; --bg-soft:#F6F3FC; --card:#FFFFFF;
  --ink:#2B2340; --muted:#6E6B7B;
  --accent:#E8562A; --ok:#0E9F86; --danger:#D6336C; --warn:#F4B73F;
  --teal:#3FB6A8; --pink:#E94E9C; --yellow:#F4B73F;   /* 달력 일정 구분용 (브랜드 토큰 정본과 동일) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(43,35,64,.06);
  --sh-2:0 12px 30px rgba(96,72,157,.15);
  --sh-modal:0 24px 60px rgba(0,0,0,.28);
  --font:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,"Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit;font-size:14px;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}
:focus-visible{outline:2px solid var(--brand-l);outline-offset:2px}

/* ── 로그인 ─────────────────────────────────────── */
#gate{position:fixed;inset:0;background:linear-gradient(160deg,#4B357E,#60489D 55%,#7B5FB6);
  display:flex;align-items:center;justify-content:center;padding:var(--s5);z-index:100}
#gate .box{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-modal);
  padding:var(--s7) var(--s6);width:100%;max-width:380px;text-align:left}
#gate h1{margin:0 0 var(--s2);font-size:25px;font-weight:800;color:var(--brand)}
#gate p{margin:0 0 var(--s5);font-size:14px;color:var(--muted)}
#gate input{width:100%;padding:14px var(--s4);border:1px solid var(--line);border-radius:var(--r);
  letter-spacing:.35em;text-align:center;font-size:20px}
#gate button{width:100%;margin-top:var(--s3);padding:14px;border:0;border-radius:var(--r);
  background:var(--brand);color:#fff;font-size:16px;font-weight:700}
#gate button:hover{background:var(--brand-d)}
#gate .err{margin-top:var(--s3);font-size:14px;color:var(--danger);min-height:20px}
#gate .warnbox{margin-top:var(--s5);padding:var(--s3);background:#FFF6E8;border-radius:var(--r-sm);
  font-size:12px;color:#7a5a12;line-height:1.5}

/* ── 헤더 ───────────────────────────────────────── */
header{background:var(--brand);color:#fff}
.hwrap{max-width:1220px;margin:0 auto;padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.brand{font-size:20px;font-weight:800;letter-spacing:-.01em}
.brand small{display:block;font-size:12px;font-weight:400;opacity:.8;letter-spacing:0}
.hwrap .who{margin-left:auto;font-size:13px;opacity:.92}
.hwrap .who button{margin-left:var(--s2);background:rgba(255,255,255,.16);border:0;color:#fff;
  padding:6px 12px;border-radius:var(--r-pill);font-size:12px}
nav{background:var(--brand-d)}
nav .nwrap{max-width:1220px;margin:0 auto;padding:0 var(--s5);display:flex;gap:var(--s1);overflow-x:auto}
nav button{background:transparent;border:0;color:rgba(255,255,255,.72);padding:12px var(--s4);
  font-size:14px;font-weight:700;white-space:nowrap;border-bottom:3px solid transparent}
nav button.on{color:#fff;border-bottom-color:var(--warn)}

main{max-width:1220px;margin:0 auto;padding:var(--s6) var(--s5) var(--s8)}
.tab{display:none}
.tab.on{display:block}

/* ── 공통 ───────────────────────────────────────── */
.sec-title{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4)}
.sec-title::before{content:"";width:7px;height:24px;background:var(--brand);border-radius:4px}
.sec-title h2{margin:0;font-size:20px;font-weight:800}
.sec-title span{font-size:13px;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.card-h{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-weight:700;font-size:15px;
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.card-b{padding:var(--s4)}
.grid{display:grid;gap:var(--s4)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.muted{color:var(--muted);font-size:13px}
.empty{padding:var(--s6);text-align:center;color:var(--muted);font-size:14px}

.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--sh-1)}
.stat .k{font-size:13px;color:var(--muted);margin-bottom:var(--s1)}
.stat .v{font-size:32px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.stat .s{font-size:12px;color:var(--muted);margin-top:var(--s1)}

/* 뱃지 */
.badge{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;
  background:var(--bg-soft);color:var(--brand);border:1px solid var(--line);white-space:nowrap}
.badge.risk-상{background:#FDEBF1;color:var(--danger);border-color:#F6CFDD}
.badge.risk-중{background:#FFF4E3;color:#9a6b0e;border-color:#F6E3C0}
.badge.risk-하{background:#E7F6F2;color:var(--ok);border-color:#C7EAE2}
.dday{display:inline-block;min-width:56px;text-align:center;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:800;background:var(--bg-soft);color:var(--brand);border:1px solid var(--line)}
.dday.soon{background:#FFF4E3;color:#9a6b0e;border-color:#F6E3C0}
.dday.now{background:#FDEBF1;color:var(--danger);border-color:#F6CFDD}
.dday.past{background:var(--danger);color:#fff;border-color:var(--danger)}

/* 표 */
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--bg-soft);color:var(--brand);text-align:left;font-weight:700;font-size:13px;
  padding:10px var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:var(--bg-soft)}
tbody tr.clickable{cursor:pointer}
.tw{overflow-x:auto}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* 버튼 */
.btn{background:var(--brand);color:#fff;border:0;padding:10px var(--s4);border-radius:var(--r);font-weight:700}
.btn:hover{background:var(--brand-d)}
.btn.ghost{background:transparent;color:var(--brand);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg-soft)}
.btn.sm{padding:6px var(--s3);font-size:13px}
.btn.danger{background:var(--danger)}

/* 폼 */
.f{display:flex;flex-direction:column;gap:var(--s1)}
.f label{font-size:12px;font-weight:700;color:var(--muted)}
.f input,.f select,.f textarea{padding:9px var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;width:100%}
.f textarea{min-height:80px;resize:vertical;line-height:1.6}
.filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.filters input,.filters select{padding:9px var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.filters input[type=search]{min-width:240px;flex:1}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(43,35,64,.5);display:none;z-index:90;
  padding:var(--s5);overflow-y:auto}
.modal.on{display:block}
.modal .sheet{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-modal);
  max-width:940px;margin:var(--s5) auto;overflow:hidden}
.modal .sheet.wide{max-width:1100px}
.mh{background:var(--brand);color:#fff;padding:var(--s4) var(--s5);display:flex;align-items:flex-start;gap:var(--s3)}
.mh h3{margin:0;font-size:20px;font-weight:800}
.mh .sub{font-size:13px;opacity:.85;margin-top:2px}
.mh .x{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;width:32px;height:32px;
  border-radius:var(--r-pill);font-size:18px;line-height:1;flex:none}
.mb{padding:var(--s5)}
.mtabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--line);padding:0 var(--s5);background:var(--bg-soft);overflow-x:auto}
.mtabs button{background:transparent;border:0;padding:12px var(--s4);font-weight:700;font-size:14px;
  color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.mtabs button.on{color:var(--brand);border-bottom-color:var(--brand)}
.mpane{display:none}
.mpane.on{display:block}

/* 진행 메모 */
.note{border-left:3px solid var(--line);padding:var(--s2) 0 var(--s2) var(--s3);margin-bottom:var(--s3)}
.note .meta{font-size:12px;color:var(--muted);margin-bottom:2px}
.note .body{white-space:pre-wrap;font-size:14px}

/* 전략 */
.law{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.law .ref{font-weight:800;color:var(--brand);font-size:14px}
.law .gist{font-size:14px;margin-top:var(--s1)}
.law .use{font-size:13px;color:var(--muted);margin-top:var(--s1)}
ul.plain{margin:0;padding-left:1.15em;font-size:14px}
ul.plain li{margin-bottom:6px}
.factor{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.factor .q{flex:1;font-size:14px}
.factor .opts{display:flex;gap:var(--s1);flex:none}
.factor .opts button{border:1px solid var(--line);background:#fff;padding:5px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--muted)}
.factor .opts button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.verdict{border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4);border:1px solid var(--line)}
.verdict h4{margin:0 0 var(--s1);font-size:20px;font-weight:800}
.verdict p{margin:0;font-size:14px}
.verdict.good{background:#E7F6F2;border-color:#C7EAE2;color:#0b6d5c}
.verdict.mixed{background:#FFF4E3;border-color:#F6E3C0;color:#8a5f0c}
.verdict.bad,.verdict.killer{background:#FDEBF1;border-color:#F6CFDD;color:#a1214b}
.verdict.none{background:var(--bg-soft)}
.killer{background:#FDEBF1;border:1px solid #F6CFDD;border-radius:var(--r-sm);padding:var(--s3);margin-bottom:var(--s2)}
.killer b{color:var(--danger)}
.bar{height:10px;border-radius:var(--r-pill);background:#F1EDF8;overflow:hidden;margin:var(--s3) 0}
.bar i{display:block;height:100%;background:var(--brand)}

.outline{border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);margin-bottom:var(--s2)}
.outline h5{margin:0 0 var(--s1);font-size:15px;font-weight:700;color:var(--brand)}

.notice{background:#FFF6E8;border:1px solid #F6E3C0;border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);font-size:13px;color:#7a5a12;margin-bottom:var(--s4);line-height:1.6}

.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:var(--r-pill);font-size:14px;box-shadow:var(--sh-2);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}

footer{text-align:center;padding:var(--s5) var(--s4);font-size:12px;color:#8a8a8a}

@media (max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
}
@media (max-width:640px){
  main{padding:var(--s5) var(--s4) var(--s7)}
  .hwrap{padding:var(--s3) var(--s4)}
  nav .nwrap{padding:0 var(--s4)}
  .g4{grid-template-columns:1fr}
  .stat .v{font-size:25px}
  .modal{padding:0}
  .modal .sheet{margin:0;border-radius:0;min-height:100vh}
  .mb{padding:var(--s4)}
  .factor{flex-direction:column;gap:var(--s2)}
}

/* ── 소속 구분 (옆커폰 / 옆커호텔 / 개인) ────────── */
.seg{display:flex;gap:var(--s1);margin-bottom:var(--s3);flex-wrap:wrap}
.seg button{background:var(--card);border:1px solid var(--line);color:var(--muted);
  padding:8px var(--s4);border-radius:var(--r-pill);font-weight:700;font-size:14px}
.seg button b{font-weight:800;opacity:.55;margin-left:2px}
.seg button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.seg button.on b{opacity:.85}
.badge.ent-옆커폰{background:#EFEAF6;color:var(--brand);border-color:var(--line)}
.badge.ent-옆커호텔{background:#E7F6F2;color:#0b6d5c;border-color:#C7EAE2}
.badge.ent-개인{background:#F3F2F5;color:var(--muted);border-color:#E4E2E9}

/* ── 달력 ────────────────────────────────────────── */
.calhead{gap:var(--s2)}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4);font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
i.k-변론기일{background:var(--brand)}
i.k-선고기일{background:var(--danger)}
i.k-조정기일{background:var(--teal)}
i.k-서류{background:var(--accent)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cal .dow{background:var(--bg-soft);color:var(--brand);font-size:12px;font-weight:700;
  text-align:center;padding:8px 0}
.cal .dow.sun{color:var(--danger)}
.cal .cell{background:var(--card);min-height:104px;padding:6px;display:flex;flex-direction:column;gap:3px}
.cal .cell.out{background:#FAF9FC}
.cal .cell.today{background:#FFFBF2;box-shadow:inset 0 0 0 2px var(--warn)}
.cal .d{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.cal .cell.out .d{opacity:.45}
.cal .d.sun{color:var(--danger)}
.cal .ev{font-size:11px;line-height:1.35;padding:3px 6px;border-radius:5px;cursor:pointer;
  color:#fff;background:var(--brand);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev:hover{filter:brightness(1.12)}
.cal .ev.선고기일{background:var(--danger)}
.cal .ev.조정기일,.cal .ev.심문기일,.cal .ev.증인신문,.cal .ev.변론준비기일{background:var(--teal)}
.cal .ev.서류{background:var(--accent)}
.cal .ev.done{background:#B9B4C6}
.cal .more{font-size:11px;color:var(--muted);cursor:pointer}

/* ── 소장 등록 ───────────────────────────────────── */
.drop{border:2px dashed var(--line);border-radius:var(--r-md);background:var(--bg-soft);
  padding:var(--s7) var(--s4);text-align:center;cursor:pointer;
  display:flex;flex-direction:column;gap:var(--s1);align-items:center}
.drop:hover,.drop.over{border-color:var(--brand);background:#F1ECFA}
.drop b{font-size:16px;color:var(--ink)}
#cxText{width:100%;min-height:130px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s3);font-size:13px;line-height:1.6;resize:vertical}
.readout{display:grid;grid-template-columns:110px 1fr;gap:var(--s2) var(--s3);font-size:14px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s4);margin-bottom:var(--s4)}
.readout dt{color:var(--muted);font-size:13px}
.readout dd{margin:0;font-weight:700;word-break:break-all}
.readout dd.none{font-weight:400;color:var(--p-tint)}

@media (max-width:960px){
  .cal .cell{min-height:80px}
  .cal .ev{font-size:10px;padding:2px 4px}
}
@media (max-width:640px){
  .cal .cell{min-height:64px;padding:3px}
  .cal .ev{font-size:0;padding:0;height:6px;border-radius:3px}  /* 좁은 화면에선 색 점만 */
  .cal .d{font-size:11px}
  .readout{grid-template-columns:1fr;gap:2px var(--s2)}
  .readout dt{margin-top:var(--s2)}
}

/* ── 법무 자문단 ─────────────────────────────────── */
.panelist{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2)}
.panelist div{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-sm);padding:var(--s3)}
.panelist b{display:block;font-size:14px;color:var(--brand);margin-bottom:2px}
.panelist span{font-size:12px;color:var(--muted);line-height:1.45}
.badge.st-대기{background:#FFF4E3;color:#9a6b0e;border-color:#F6E3C0}
.badge.st-진행중{background:#EFEAF6;color:var(--brand);border-color:var(--line)}
.badge.st-완료{background:#E7F6F2;color:#0b6d5c;border-color:#C7EAE2}
pre.result{white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.7;margin:0;
  max-height:420px;overflow:auto;font-family:var(--font)}
@media (max-width:960px){ .panelist{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .panelist{grid-template-columns:1fr} }