/* ============================================================================
   osam 디자인 시스템 — "정밀 지질 계기판"
   프로토타입 4종(livingdoc / copilot / borehole / map)의 공통 시각언어를
   단일 디자인시스템으로 추출한 정본 스타일시트.
   - 타입: IBM Plex Sans KR(본문) + IBM Plex Mono(수치 readout, tnum)
   - 테마: 종이 라이트(지층 질감) + 딥슬레이트 헤더/풋터
   - 색: 지하수 teal · earth ochre · 상태색(진행/준공/대기/지연)
   주석은 한국어(사장 직접 검수).
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1) 디자인 토큰
   ────────────────────────────────────────────────────────────────────────── */
:root{
  /* ── 표면 / 잉크 ── */
  --paper:#F4F2EC;          /* 종이 배경 */
  --paper-2:#FBFAF6;        /* 밝은 종이(카드 내부 보조) */
  --card:#FFFFFF;           /* 카드/패널 표면 */
  --ink:#13191D;            /* 본문 글자 */
  --ink-2:#39434A;          /* 보조 글자(짙음) */
  --muted:#727C84;          /* 흐린 글자 */
  --faint:#9AA2A8;          /* 가장 흐린 글자/구분선 텍스트 */
  --line:#E4E0D6;           /* 기본 구분선 */
  --line-2:#EDE9DF;         /* 더 옅은 구분선 */

  /* ── 딥슬레이트(헤더/풋터/다크 표면) ── */
  --slate:#16242C;
  --slate-2:#1F313A;
  --slate-3:#2A3D47;

  /* ── 지하수 teal ── */
  --water:#0C8089;
  --water-bright:#16B5C0;
  --water-tint:#E4F1F1;
  --water-deep:#0A5C63;

  /* ── earth ochre(대지/지층) ── */
  --earth:#B0672B;
  --earth-2:#C9863F;
  --earth-tint:#F4E9DA;
  --earth-deep:#8A4E1E;

  /* ── 상태색 + 연한 배경(tint) ── */
  --green:#2E7D55;  --green-tint:#E5F0E9;   /* 준공/완료 */
  --amber:#B5810D;  --amber-tint:#F6ECD4;   /* 대기/확인필요 */
  --red:#AE3A3A;    --red-tint:#F4E2E0;     /* 지연/위험 */
  /* 시맨틱 별칭: 진행=teal / 준공=green / 대기=amber / 지연=red */
  --st-prog:#0C8089; --st-done:#2E7D55; --st-wait:#B5810D; --st-late:#AE3A3A;

  /* ── 지층색(심도 단면/주상도용) ── */
  --st-soil:#C9A877;     --st-soil-2:#D8BC92;     /* 충적층/표토 */
  --st-weather:#A98B6B;  --st-weather-2:#BBA084;  /* 풍화암 */
  --st-soft:#7E8A92;     --st-soft-2:#94A0A8;     /* 연암 */
  --st-aqua:#1E97A0;     --st-aqua-2:#2BB3BC;     /* 대수층/경암 */

  /* ── 관청 양식 전용 라인(살아있는 서류) ── */
  --doc-line:#CCD0C7; --doc-line-bold:#9DA59A; --doc-fill:#F1F1E9; --doc-fill-2:#F7F6F0;

  /* ── 타입 ── */
  --sans:'IBM Plex Sans KR',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* ── 반경 ── */
  --r:6px; --r-lg:11px; --r-xl:15px;

  /* ── 그림자(레이어 깊이) ── */
  --sh-1:0 1px 0 rgba(20,30,36,.04), 0 1px 2px rgba(20,30,36,.05);
  --sh-2:0 1px 0 rgba(20,30,36,.04), 0 8px 22px -10px rgba(20,30,36,.22);
  --sh-3:0 28px 62px -28px rgba(13,40,46,.5);

  /* ── 간격 스케일 ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:32px;

  /* ── 레이아웃 ── */
  --topbar-h:56px; --statusbar-h:30px; --wrap-max:1280px;
}

/* ──────────────────────────────────────────────────────────────────────────
   2) 베이스 리셋 + 종이 질감 배경(미세 지층)
   ────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:14px; line-height:1.5; letter-spacing:-.01em;
  /* 종이질감: 우상단 teal 글로우 + 좌하단 earth 글로우 + 미세 지층 줄무늬 */
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(12,128,137,.05), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(176,103,43,.045), transparent 50%),
    repeating-linear-gradient(0deg, rgba(20,30,36,.012) 0 1px, transparent 1px 4px);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:var(--water-deep)}
img,svg{vertical-align:middle}
button{font-family:inherit}
[hidden]{display:none!important}

/* 수치 readout — 모노 + tnum(자리수 정렬) */
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:-.02em}
.num{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em}
::selection{background:var(--water); color:#fff}

/* 스크롤바(라이트 표면) */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#DAD4C6;border-radius:8px;border:2px solid var(--paper)}
*::-webkit-scrollbar-track{background:transparent}

/* ──────────────────────────────────────────────────────────────────────────
   3) 레이아웃 헬퍼
   ────────────────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--wrap-max); margin:0 auto; padding:22px 22px 80px}
.stage{max-width:var(--wrap-max); margin:0 auto; padding:22px 22px 90px}
/* 좌(본문) + 우(컨텍스트 패널) 2열 — 반응형에서 1열로 */
.cols{display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:20px; align-items:start}
.cols--wide{grid-template-columns:minmax(0,1fr) 422px}
.stack{display:flex; flex-direction:column; gap:16px}
.row{display:flex; align-items:center; gap:12px}
.spacer{margin-left:auto}
.sticky-side{position:sticky; top:calc(var(--topbar-h) + 18px)}

/* 텍스트 톤 유틸 */
.t-muted{color:var(--muted)} .t-faint{color:var(--faint)} .t-ink2{color:var(--ink-2)}
.t-water{color:var(--water-deep)} .t-earth{color:var(--earth)}
.t-green{color:var(--green)} .t-amber{color:var(--amber)} .t-red{color:var(--red)}

/* ──────────────────────────────────────────────────────────────────────────
   4) 상단 바 (.topbar / .brand / .nav / .usr / 검색)
      딥슬레이트 sticky 헤더 — 모든 화면 공통
   ────────────────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:18px;
  height:var(--topbar-h); padding:0 20px;
  background:rgba(22,36,44,.98); color:#E8EDEE;
  border-bottom:1px solid #0c171c; backdrop-filter:saturate(1.2);
}
.brand{display:flex; align-items:center; gap:11px; padding-right:18px; border-right:1px solid rgba(255,255,255,.10)}
.brand .mark{width:30px;height:30px;flex:0 0 30px}
.brand .wm{display:flex; flex-direction:column; line-height:1; text-decoration:none}
.brand .wm b{font-weight:700; font-size:15.5px; letter-spacing:.02em; color:#E8EDEE}
.brand .wm small{font-family:var(--mono); font-size:9px; color:var(--water-bright); letter-spacing:.16em; margin-top:3px}

/* 역할인식 내비 */
.nav{display:flex; gap:2px; align-items:center}
.nav a{display:flex; align-items:center; gap:7px; height:34px; padding:0 13px; border-radius:var(--r);
  color:#AAB3B9; text-decoration:none; font-size:13px; font-weight:500; transition:.16s; white-space:nowrap}
.nav a svg{width:15px;height:15px;opacity:.85}
.nav a:hover{background:rgba(255,255,255,.06); color:#fff}
.nav a.on{background:var(--water); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.nav a.on svg{opacity:1}

.top-right{margin-left:auto; display:flex; align-items:center; gap:14px}

/* 상단 검색(커맨드바) */
.topsearch{display:flex; align-items:center; gap:10px; height:36px; padding:0 13px; min-width:220px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:9px;
  color:#9aa4ab; cursor:text; transition:.16s}
.topsearch:hover{background:rgba(255,255,255,.12); border-color:rgba(22,181,192,.5)}
.topsearch svg{width:16px;height:16px;flex:0 0 auto;color:var(--water-bright)}
.topsearch input{all:unset; flex:1; font-size:13px; color:#E8EDEE}
.topsearch input::placeholder{color:#8A949B}
.topsearch kbd{font-family:var(--mono); font-size:10.5px; padding:3px 7px; border-radius:5px;
  background:rgba(255,255,255,.10); color:#AEB7BD; border:1px solid rgba(255,255,255,.08)}

/* 유저 칩 — nowrap: 폰트 폴백/좁은 공간에서 '로그인'이 세로로 깨지는 것 방지 */
.usr{display:flex; align-items:center; gap:9px; padding-left:14px; border-left:1px solid rgba(255,255,255,.10); white-space:nowrap}
.usr .av{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--water),var(--water-deep));
  display:grid;place-items:center;color:#fff;font-weight:600;font-size:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  text-transform:uppercase}
.usr .ui{display:flex;flex-direction:column;line-height:1.25}
.usr .ui b{font-size:12.5px;font-weight:600;color:#EAEFF0}
.usr .ui small{font-size:10.5px;color:#8A949B}
.usr .login{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:var(--r);
  background:var(--water);color:#fff;font-size:12.5px;font-weight:600;text-decoration:none}
.usr .login:hover{background:var(--water-deep)}
/* 로그아웃 아이콘 버튼(사용자 칩 우측) */
.usr .lo{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;color:#8A949B;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);transition:.16s}
.usr .lo svg{width:15px;height:15px}
.usr .lo:hover{background:var(--red);color:#fff;border-color:transparent}

/* ──────────────────────────────────────────────────────────────────────────
   5) 버튼 (.btn + .pri/.ghost/.danger + 보조 변형)
   ────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:42px; padding:0 16px; border-radius:9px;
  font-size:13.5px; font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink-2); transition:.15s}
.btn svg{width:15px;height:15px}
.btn:hover{border-color:var(--faint); background:#fff}
.btn:disabled,.btn.is-disabled{opacity:.5; cursor:not-allowed; box-shadow:none}
/* 1차 액션(teal) */
.btn.pri{background:var(--water); border-color:var(--water-deep); color:#fff; box-shadow:0 2px 8px -2px rgba(10,92,99,.5)}
.btn.pri:hover{background:var(--water-deep)}
/* 준공/성공(green) */
.btn.go{background:var(--green); border-color:#236343; color:#fff; box-shadow:0 2px 8px -2px rgba(46,125,85,.5)}
.btn.go:hover{background:#256a48}
/* 입찰/대지(earth) */
.btn.earth{background:var(--earth); border-color:var(--earth-deep); color:#fff; box-shadow:0 2px 8px -2px rgba(176,103,43,.5)}
.btn.earth:hover{background:#9a5a25}
/* 위험/삭제 */
.btn.danger{background:var(--red); border-color:#8a2e2e; color:#fff; box-shadow:0 2px 8px -2px rgba(174,58,58,.45)}
.btn.danger:hover{background:#9c3434}
/* 고스트(텍스트형) */
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--paper); color:var(--ink)}
/* 크기 변형 */
.btn.sm{min-height:34px; padding:0 12px; font-size:12.5px; font-weight:500}
.btn.lg{min-height:48px; padding:0 22px; font-size:15px; border-radius:var(--r-lg)}
.btn.block{width:100%}

/* ──────────────────────────────────────────────────────────────────────────
   6) 상태 배지 (.bdg + .go/.done/.wait/.late)
      진행 teal · 준공 green · 대기 amber · 지연 red
   ────────────────────────────────────────────────────────────────────────── */
.bdg{display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 9px;
  border-radius:20px; font-size:11.5px; font-weight:600; white-space:nowrap}
.bdg::before{content:""; width:6px; height:6px; border-radius:50%}
.bdg.go{background:var(--water-tint); color:var(--water-deep)}      /* 진행중 */
.bdg.go::before{background:var(--water); animation:pulse 2s infinite}
.bdg.done{background:var(--green-tint); color:var(--green)}         /* 준공/완료 */
.bdg.done::before{background:var(--green)}
.bdg.wait{background:var(--amber-tint); color:var(--amber)}         /* 대기 */
.bdg.wait::before{background:var(--amber)}
.bdg.late{background:var(--red-tint); color:var(--red)}             /* 지연 */
.bdg.late::before{background:var(--red); animation:pulse 1.6s infinite}
/* 점 없는 중립 알약(메타 정보용) */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px 9px}
.pill .mono{color:var(--ink-2); font-weight:500}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ──────────────────────────────────────────────────────────────────────────
   7) 패널 (.panel / .phd)
   ────────────────────────────────────────────────────────────────────────── */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); overflow:hidden}
.phd{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line-2)}
.phd svg{width:15px;height:15px;color:var(--water)}
.phd h2{margin:0; font-size:13px; font-weight:600; letter-spacing:-.01em}
.phd .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--muted);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:2px 9px}
.pbody{padding:14px 16px}

/* 섹션 라벨(패널 내부 소제목) */
.sec-lab{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; letter-spacing:.04em;
  color:var(--faint); text-transform:uppercase; margin:0 0 11px}
.sec-lab svg{width:13px;height:13px;color:var(--water)}
.sec-lab.mt{margin-top:22px}

/* ──────────────────────────────────────────────────────────────────────────
   8) KPI 지표 타일 (.kpi + .spark)
      모노 대형 수치 readout + 미니 스파크라인
   ────────────────────────────────────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:14px 16px; min-width:0}
.kpi .klab{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted)}
.kpi .klab svg{width:13px;height:13px;color:var(--water)}
.kpi .kval{display:flex; align-items:baseline; gap:4px; margin-top:7px}
.kpi .kval b{font-family:var(--mono); font-feature-settings:"tnum" 1; font-size:26px; font-weight:600;
  letter-spacing:-.03em; line-height:1; color:var(--ink)}
.kpi .kval .u{font-size:12px; color:var(--muted); font-weight:400}
.kpi .kdelta{display:inline-flex; align-items:center; gap:4px; margin-top:7px;
  font-family:var(--mono); font-size:11px; font-weight:600}
.kpi .kdelta.up{color:var(--green)} .kpi .kdelta.down{color:var(--red)} .kpi .kdelta.flat{color:var(--muted)}
/* 상태 강조 변형 */
.kpi.is-prog .kval b{color:var(--water-deep)}
.kpi.is-earth .kval b{color:var(--earth)}
.kpi.is-red .kval b{color:var(--red)}

/* 스파크라인(미니 막대) — KPI 추세 표시 */
.spark{display:flex; align-items:flex-end; gap:2px; height:26px; margin-top:10px}
.spark i{flex:1; min-width:2px; border-radius:2px 2px 0 0; background:var(--line);}
.spark i.in{background:linear-gradient(180deg,var(--water-bright),var(--water))}
.spark i.peak{background:linear-gradient(180deg,var(--earth-2),var(--earth))}

/* ──────────────────────────────────────────────────────────────────────────
   9) 데이터 테이블 (.tbl)
   ────────────────────────────────────────────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; font-size:13px; background:var(--card)}
.tbl thead th{position:sticky; top:0; text-align:left; font-size:11px; font-weight:600;
  color:var(--muted); letter-spacing:.02em; padding:10px 12px; background:var(--paper-2);
  border-bottom:1px solid var(--line); white-space:nowrap}
.tbl tbody td{padding:11px 12px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:middle}
.tbl tbody tr:hover{background:var(--water-tint)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right; font-family:var(--mono); font-feature-settings:"tnum" 1}
.tbl td.strong{color:var(--ink); font-weight:600}
.tbl .tbl-empty{padding:26px; text-align:center; color:var(--muted)}
/* 패널 안에 넣을 때 라운드 클리핑 */
.tbl-wrap{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1)}
.tbl-wrap .tbl thead th{border-top:0}

/* ──────────────────────────────────────────────────────────────────────────
   10) 폼 / 서류 칸 (.fld / .frow / .cell)  ← 살아있는 서류(livingdoc)
       관청 양식 그리드 + AI 자동주입 + 미입력 글로우(.cell.need)
   ────────────────────────────────────────────────────────────────────────── */
/* 입력 그룹(일반 폼) */
.fld{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.fld > label{font-size:12px; font-weight:600; color:var(--ink-2)}
.fld > label .req{color:var(--red); margin-left:3px}
.fld input,.fld select,.fld textarea{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; min-height:42px; transition:.14s}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none; border-color:var(--water); box-shadow:0 0 0 3px rgba(22,181,192,.16)}
.fld .hint{font-size:11px; color:var(--muted)}
.fld .err{font-size:11.5px; color:var(--red)}
.fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-color:var(--red)}

/* 관청 양식 표(formbox = 칸들의 묶음) */
.formbox{border:1.4px solid var(--doc-line-bold); border-radius:3px; overflow:hidden}
/* 한 줄: 라벨 | 값  (two = 라벨|값|라벨|값) */
.frow{display:grid; grid-template-columns:120px 1fr; border-top:1px solid var(--doc-line)}
.frow:first-child{border-top:0}
.frow.two{grid-template-columns:120px 1fr 120px 1fr}
.frow .lbl{background:var(--doc-fill); padding:9px 11px; font-size:11.5px; font-weight:600; color:var(--ink-2);
  display:flex; align-items:center; border-right:1px solid var(--doc-line)}
.frow.two .lbl:nth-of-type(2){border-left:1px solid var(--doc-line)}
.frow .valwrap{padding:0; border-right:1px solid var(--doc-line); min-width:0}
.frow .valwrap:last-child{border-right:0}

/* 값 셀 */
.cell{display:flex; align-items:center; gap:8px; min-height:38px; padding:7px 11px; position:relative;
  flex-wrap:wrap; transition:background .15s}
.cell .v{font-size:13px; color:var(--ink); font-weight:500}
.cell .v.num{font-family:var(--mono); font-feature-settings:"tnum" 1}
.cell .v .u{font-size:11px; color:var(--muted); font-weight:400; margin-left:2px}
.cell .src{margin-left:auto; font-size:9.5px; color:var(--water-deep); display:flex; align-items:center; gap:3px; white-space:nowrap}
.cell .src svg{width:10px;height:10px}
/* AI 자동주입 확정 셀(hover 시 출처/체크 노출) */
.cell.ai{cursor:default}
.cell.ai:hover{background:var(--water-tint)}
/* 사용자 직접입력 완료 */
.cell.filled .v{color:var(--ink)}

/* 미입력 — teal 글로우(반드시 채워야 하는 칸) */
.cell.need{cursor:pointer; margin:3px; border-radius:3px; min-height:32px; padding:6px 10px;
  background:rgba(22,181,192,.07); box-shadow:0 0 0 1px var(--water) inset;
  animation:glowNeed 2.1s ease-in-out infinite}
.cell.need .ph{font-size:12px; color:var(--water-deep); font-weight:600; display:flex; align-items:center; gap:6px}
.cell.need .ph svg{width:13px;height:13px}
.cell.need .req{margin-left:auto; font-family:var(--mono); font-size:9px; color:var(--water-deep);
  background:#fff; border:1px solid #Bfe0df; border-radius:9px; padding:1px 6px}
/* AI 추정값 — amber 글로우(확인 필요) */
.cell.confirm{cursor:pointer; margin:3px; border-radius:3px; min-height:32px; padding:6px 10px;
  background:rgba(181,129,13,.08); box-shadow:0 0 0 1px var(--amber) inset;
  animation:glowConfirm 2.1s ease-in-out infinite}
.cell.confirm .guess{font-size:12.5px; color:var(--ink-2)}
.cell.confirm .guess em{font-style:normal; font-family:var(--mono); font-size:9px; color:var(--amber);
  background:var(--amber-tint); border:1px solid #E6D4A6; border-radius:9px; padding:1px 5px; margin-left:6px}
/* 편집 중 */
.cell.editing{background:#fff; box-shadow:0 0 0 1.5px var(--water) inset; animation:none}
.cellinput{all:unset; flex:1; min-width:80px; font-size:13px; font-family:var(--sans); color:var(--ink);
  border-bottom:1.5px solid var(--water); padding:2px}
.cellinput.mono{font-family:var(--mono)}
/* 입력 직후 플래시 */
.cell.just{animation:justFlash .9s ease}
@keyframes glowNeed{0%,100%{box-shadow:0 0 0 1px var(--water) inset, 0 0 0 3px rgba(22,181,192,.12)}
  50%{box-shadow:0 0 0 1px var(--water) inset, 0 0 0 5px rgba(22,181,192,.30)}}
@keyframes glowConfirm{0%,100%{box-shadow:0 0 0 1px var(--amber) inset, 0 0 0 3px rgba(181,129,13,.10)}
  50%{box-shadow:0 0 0 1px var(--amber) inset, 0 0 0 5px rgba(181,129,13,.26)}}
@keyframes justFlash{0%{background:var(--green-tint)}100%{background:transparent}}

/* 상태 태그(셀 내부 소형 라벨) */
.tag{font-family:var(--mono); font-size:9px; padding:1px 5px; border-radius:9px; white-space:nowrap}
.tag.user{background:var(--green-tint); color:var(--green); border:1px solid #CBE3D6}
.tag.ok{background:var(--water-tint); color:var(--water-deep); border:1px solid #CFE6E5}

/* ──────────────────────────────────────────────────────────────────────────
   11) 카드 (.card)  ← 액션 피드(copilot) / 목록 카드 공통
   ────────────────────────────────────────────────────────────────────────── */
.card{position:relative; display:flex; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--sh-1); overflow:hidden; transition:box-shadow .2s, transform .2s}
.card:hover{box-shadow:var(--sh-2)}
/* 좌측 상태 레일 */
.card .rail{flex:0 0 5px; background:var(--water)}
.card.is-done .rail{background:var(--green)}
.card.is-wait .rail{background:var(--amber)}
.card.is-late .rail{background:linear-gradient(180deg,var(--red),#cf6a5e)}
.card.is-earth .rail{background:linear-gradient(180deg,var(--earth-2),var(--earth))}
.cardmain{flex:1; min-width:0; padding:16px 18px}
/* 카드 헤더(우선순위 번호 + 분류 태그 + D-day) */
.chead{display:flex; align-items:center; gap:10px; margin-bottom:11px}
.chead .prio{font-family:var(--mono); font-size:11px; font-weight:600; color:#fff; background:var(--ink-2);
  width:21px; height:21px; border-radius:6px; display:grid; place-items:center; flex:0 0 auto}
.ctag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:3px 10px 3px 8px}
.ctag svg{width:13px;height:13px}
.dday{margin-left:auto; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--earth);
  background:var(--earth-tint); border:1px solid #E6D2B6; border-radius:7px; padding:4px 9px; white-space:nowrap}
.dday.soon{color:var(--red); background:var(--red-tint); border-color:#E6CFCB}
.dday.calm{color:var(--muted); background:var(--paper); border-color:var(--line)}
.ctitle{margin:0 0 4px; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.3}
.cmeta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-bottom:13px}
.cmeta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.cmeta .loc{color:var(--ink-2); font-weight:500}
.cact{display:flex; align-items:center; gap:9px; margin-top:15px; flex-wrap:wrap}

/* ──────────────────────────────────────────────────────────────────────────
   12) 진행률 트랙 / 게이지 링 (.track / .ring)
   ────────────────────────────────────────────────────────────────────────── */
/* 가로 진행 트랙 */
.track{height:8px; border-radius:5px; background:var(--line); overflow:hidden; position:relative}
.track > i{display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--water),var(--water-bright));
  transition:width .5s cubic-bezier(.2,.7,.3,1)}
.track.is-done > i{background:var(--green)}
.track.is-wait > i{background:var(--amber)}
.track.is-late > i{background:linear-gradient(90deg,var(--red),#cf6a5e)}

/* 원형 게이지 링 — SVG circle(stroke-dasharray)와 함께 사용. 중앙 b 라벨 */
.ring{position:relative; display:inline-grid; place-items:center; width:46px; height:46px}
.ring svg{transform:rotate(-90deg)}
.ring svg .ring-bg{stroke:var(--line); fill:none}
.ring svg .ring-fg{stroke:var(--water); fill:none; stroke-linecap:round; transition:stroke-dashoffset .9s cubic-bezier(.3,.8,.3,1)}
.ring b{position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--water-deep)}
.ring.is-earth svg .ring-fg{stroke:var(--earth)} .ring.is-earth b{color:var(--earth)}
.ring.is-green svg .ring-fg{stroke:var(--green)} .ring.is-green b{color:var(--green)}
.ring.lg{width:78px;height:78px} .ring.lg b{font-size:22px}

/* ──────────────────────────────────────────────────────────────────────────
   13) 토스트 / Django 메시지
   ────────────────────────────────────────────────────────────────────────── */
.messages{position:fixed; left:50%; bottom:calc(var(--statusbar-h) + 16px); transform:translateX(-50%);
  z-index:70; display:flex; flex-direction:column; gap:9px; width:min(440px,92vw)}
.msg{display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:var(--r-lg);
  background:var(--slate); color:#EAF0F1; box-shadow:var(--sh-3); font-size:13px;
  animation:msgIn .3s cubic-bezier(.2,.7,.3,1)}
.msg .ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--water)}
.msg .ic svg{width:13px;height:13px;color:#fff}
.msg.success .ic{background:var(--green)} .msg.error .ic,.msg.danger .ic{background:var(--red)}
.msg.warning .ic{background:var(--amber)}
.msg b{color:#fff}
@keyframes msgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ──────────────────────────────────────────────────────────────────────────
   14) 하단 상태 바 (.statusbar) — 동기화/테넌트/버전
   ────────────────────────────────────────────────────────────────────────── */
.statusbar{position:fixed; bottom:0; left:0; right:0; z-index:30; display:flex; align-items:center; gap:18px;
  height:var(--statusbar-h); padding:0 18px; background:rgba(22,36,44,.97); color:#92A0A6;
  font-family:var(--mono); font-size:11px; border-top:1px solid #0c171c}
.statusbar .s{display:flex; align-items:center; gap:7px}
.statusbar .s b{color:#CFD7DB; font-weight:500}
.statusbar .s .dot{width:6px;height:6px;border-radius:50%;background:var(--water-bright);
  box-shadow:0 0 0 3px rgba(22,181,192,.18)}
.statusbar .g{color:var(--water-bright)}
.statusbar .right{margin-left:auto; display:flex; gap:18px}

/* ──────────────────────────────────────────────────────────────────────────
   15) 진입 애니메이션(staggered fade-up) 유틸
   ────────────────────────────────────────────────────────────────────────── */
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.an{opacity:0; animation:up .5s cubic-bezier(.2,.7,.3,1) forwards}
.an.d1{animation-delay:.06s} .an.d2{animation-delay:.12s} .an.d3{animation-delay:.18s}
.an.d4{animation-delay:.24s} .an.d5{animation-delay:.30s} .an.d6{animation-delay:.36s}
/* 자식 자동 stagger(목록/피드용) */
.an-list > *{opacity:0; animation:up .5s cubic-bezier(.2,.7,.3,1) forwards}
.an-list > *:nth-child(1){animation-delay:.04s} .an-list > *:nth-child(2){animation-delay:.10s}
.an-list > *:nth-child(3){animation-delay:.16s} .an-list > *:nth-child(4){animation-delay:.22s}
.an-list > *:nth-child(5){animation-delay:.28s} .an-list > *:nth-child(6){animation-delay:.34s}

/* ──────────────────────────────────────────────────────────────────────────
   16) 반응형 — ≤980 태블릿 / ≤640 모바일(1열·터치타깃 44px+)
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){            /* 태블릿: 우측 패널 가로 배치 */
  .cols,.cols--wide{grid-template-columns:1fr}
  .sticky-side{position:static}
  .statusbar{display:none}
}
@media (max-width:640px){            /* 모바일: 1열 + 터치 44px+ */
  .wrap,.stage{padding:16px 14px 70px}
  .topbar{height:56px; padding:0 14px; gap:10px; overflow:hidden}
  .brand{padding-right:0; border-right:0; flex:0 0 auto}
  .brand .wm small{display:none}
  .nav{display:none}                  /* 데스크탑 내비 숨김(필요 시 하단 도크 사용) */
  .top-right{min-width:0; flex:1; justify-content:flex-end; gap:8px; overflow:hidden}
  .topsearch{display:none}
  .textscale{display:none}
  .usr{padding-left:0; border-left:0; gap:7px}
  .usr .ui{display:none}
  .kpis{grid-template-columns:1fr 1fr; gap:10px}
  /* 관청 양식 → 칸 카드 스택(잘림 방지) */
  .frow,.frow.two{grid-template-columns:1fr}
  .frow .lbl{border-right:0; border-bottom:1px solid var(--doc-line); background:var(--doc-fill-2); font-size:11px}
  .frow.two .lbl:nth-of-type(2){border-left:0}
  .frow .valwrap{border-right:0}
  /* 카드 액션 풀폭 + 터치타깃 보장 */
  .cact{flex-direction:column; align-items:stretch}
  .cact .btn{width:100%; min-height:46px}
  .btn{min-height:44px}
  .nav a{height:44px}
}

/* 모션 최소화 선호 — 애니메이션 정지 */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
  .cell.need{box-shadow:0 0 0 1.5px var(--water) inset}
  .cell.confirm{box-shadow:0 0 0 1.5px var(--amber) inset}
  .an,.an-list > *{opacity:1}
}

/* ──────────────────────────────────────────────────────────────────────────
   12) 큰글씨 모드 — 5060 디지털취약 사장님 접근성(정부24식 글자크기 조절)
   <html> 의 data-textscale 값으로 전체 UI 를 비례 확대(zoom). px 기반 디자인이라
   font-size 스케일은 자식에 전파되지 않아, 레이아웃 안 깨지는 zoom 으로 전체 확대.
   sm(기본)=100% / lg=115% / xl=132%. 선택은 localStorage 영속(base.html).
   ────────────────────────────────────────────────────────────────────────── */
html[data-textscale="lg"]{ zoom:1.15; }
html[data-textscale="xl"]{ zoom:1.32; }

/* 글자크기 조절 컨트롤(상단바 우측) — 같은 글자 '가' 를 3단 크기로 노출 */
.textscale{display:flex; align-items:center; gap:4px}
.textscale .tslabel{font-size:10.5px; color:#8A949B; margin-right:2px; white-space:nowrap}
.textscale button{
  all:unset; cursor:pointer; display:grid; place-items:center;
  width:30px; height:30px; border-radius:7px; color:#AEB7BD;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  font-family:var(--sans); font-weight:700; line-height:1; transition:.16s;
}
.textscale button:hover{background:rgba(255,255,255,.16); color:#fff}
.textscale button.on{background:var(--water); color:#fff; border-color:transparent}
.textscale button.s1{font-size:11px}
.textscale button.s2{font-size:14px}
.textscale button.s3{font-size:17px}

@media (max-width:640px){            /* 모바일: 라벨 숨기고 터치타깃 키움 */
  .textscale{display:none}
  .textscale .tslabel{display:none}
  .textscale button{width:38px; height:38px}
}