/* ═══════════════════════════════════════════════════════════════
   SOMA — 디자인 시스템

   **DUNA AXON 의 것을 거의 그대로 쓴다.** 색까지 같다.
   나란히 놓았을 때 다른 제품으로 «보이는» 것보다, 두 제품을 오가는 사람이
   다시 배우지 않는 쪽이 낫다는 판단이다. 레이아웃(가운데 1180px 한 단 ·
   상단 알약 탭 · 아래 밑줄 탭)과 부품(카드 · 알약 · 표 · 상태 이름표)이
   AXON 과 같다.

   ── 그대로 가져온 것: 상태 인코딩 ────────────────────────────
   사용자가 적록색약이다. 초록(정상)↔로즈(위반) 는 deutan 에서 갈리지 않는다.
     · 브랜드색(인디고·바이올렛)은 **조작**에만 쓴다. 상태 의미를 싣지 않는다.
     · 상태는 무채(정상) · 앰버(경고) · 적갈(위반) · 파랑(오류)이고
       **언제나 글리프 + 라벨을 함께 단다.**

   ── SOMA 가 더한 것 ──────────────────────────────────────────
   맨 아래 「SOMA 만의 부품」. 담당 봇 고리 그림 · 3층 규칙표 · 회전 수치칸 ·
   확인 창처럼 AXON 에 없는 자리만이고, **색은 여기서 새로 정하지 않는다** —
   위 토큰을 쓴다. 색이 두 곳에서 정해지면 한쪽만 고쳤을 때 어긋난다.
   ═══════════════════════════════════════════════════════════════ */
/* 글꼴은 DUNA CORE 와 같다 — SUITE. 굵기 일곱 벌을 다 싣는다.
   Light(300) 과 Heavy(900) 가 빠져 있으면 브라우저가 Regular 를 억지로
   늘리고 줄여 흉내 낸다(가짜 굵기). 파일은 이미 들어와 있었다. */
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'SUITE';src:url('fonts/suite/SUITE-Heavy.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  /* **바탕이 순백이고 카드가 옅다.** 카드는 «흰 종이» 가 아니라 흰 바탕 위에
     얹힌 아주 옅은 면이다. 차이는 4% 남짓이라 얼룩처럼 보이지 않고,
     테두리와 그림자가 나머지를 맡는다. */
  --bg:#FFFFFF; --bg-2:#F8F8FD;
  --surface:#F8F8FD; --surface-2:#EFEFF9;
  --ink:#141033; --dim:#494465; --faint:#6F6A8C;
  --line:rgba(20,16,51,.12); --line-2:rgba(20,16,51,.18);
  --indigo:#4B45C6; --indigo-ink:#3A35A3;
  --violet:#7C5BE0; --azure:#3E7FD4;
  --amber:#C2820B; --amber-ink:#8F5F06; --rose:#A8283A; --rose-ink:#8E1F2E;
  --indigo-soft:rgba(75,69,198,.10); --amber-soft:rgba(194,130,11,.12);
  --rose-soft:rgba(168,40,58,.10);
  --sky:#2C93C9; --sky-ink:#1B6D97; --sky-soft:rgba(44,147,201,.12);
  --shadow:0 1px 2px rgba(20,16,51,.06), 0 1px 1px rgba(20,16,51,.04);
  --shadow-sm:0 1px 2px rgba(20,16,51,.05);
  /* **SUITE 가 먼저다.** Pretendard 를 앞에 두면 그것이 깔린 자리에서만 글꼴이
     달라진다 — 같은 화면이 사람마다 다르게 보인다. DUNA CORE 와 같은 차례. */
  --font:'SUITE','Roboto',-apple-system,"Malgun Gothic",system-ui,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,'Consolas','D2Coding',monospace;
  --r:16px; --r-sm:10px; --r-chip:6px;

  /* 브랜드색 위에 얹는 글자. **테마마다 다르다.**
     어두운 화면에서 브랜드는 밝은 라벤더가 된다 — 그 위에 흰 글자를 두면
     2.75:1 로 읽히지 않는다. 계산해 보기 전에는 몰랐다. */
  --on-brand:#FFFFFF;
  /* 배지 위에 얹는 글자. **앰버와 적갈이 다르다** — 앰버는 밝아서 어두운 글자,
     적갈은 어두워서 흰 글자다. 하나로 묶었더니 적갈 위가 2.67:1 이었다. */
  --on-amber:#1A1206; --on-rose:#FFFFFF;

  /* ── 상태 — 초록/빨강 쌍 없음 · 브랜드색과도 안 겹침 ── */
  --st-calm:#5F5B78;  --st-calm-bg:rgba(95,91,120,.10);
  --st-warn:#C2820B;  --st-warn-bg:var(--amber-soft);
  --st-fail:#A8283A;  --st-fail-bg:var(--rose-soft);
  --st-err:#25327A;   --st-err-bg:rgba(37,50,122,.10);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F0E1A; --bg-2:#151426;
  --surface:#17162A; --surface-2:#1E1C33;
  --ink:#EEEDF7; --dim:#BEBAD4; --faint:#918DAC;
  --line:rgba(238,237,247,.10); --line-2:rgba(238,237,247,.17);
  --indigo:#8B84F5; --indigo-ink:#ADA7FA;
  --violet:#A98BF0; --azure:#7FB0EE;
  --amber:#E0A93C; --amber-ink:#F0C577; --rose:#EE7286; --rose-ink:#F597A8;
  --indigo-soft:rgba(139,132,245,.16); --amber-soft:rgba(224,169,60,.14);
  --rose-soft:rgba(238,114,134,.14);
  --sky:#6BC5E8; --sky-ink:#9BDCF3; --sky-soft:rgba(107,197,232,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --st-calm:#A6A1BE; --st-calm-bg:rgba(166,161,190,.13);
  --st-warn:#E0A93C; --st-warn-bg:var(--amber-soft);
  --st-fail:#EE7286; --st-fail-bg:var(--rose-soft);
  --st-err:#7FD4FF;  --st-err-bg:rgba(127,212,255,.14);
  --on-brand:#12102A; --on-amber:#1A1206; --on-rose:#2A0A10;
}}
:root[data-theme="dark"]{
  --bg:#0F0E1A; --bg-2:#151426;
  --surface:#17162A; --surface-2:#1E1C33;
  --ink:#EEEDF7; --dim:#BEBAD4; --faint:#918DAC;
  --line:rgba(238,237,247,.10); --line-2:rgba(238,237,247,.17);
  --indigo:#8B84F5; --indigo-ink:#ADA7FA;
  --violet:#A98BF0; --azure:#7FB0EE;
  --amber:#E0A93C; --amber-ink:#F0C577; --rose:#EE7286; --rose-ink:#F597A8;
  --indigo-soft:rgba(139,132,245,.16); --amber-soft:rgba(224,169,60,.14);
  --rose-soft:rgba(238,114,134,.14);
  --sky:#6BC5E8; --sky-ink:#9BDCF3; --sky-soft:rgba(107,197,232,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --st-calm:#A6A1BE; --st-calm-bg:rgba(166,161,190,.13);
  --st-warn:#E0A93C; --st-warn-bg:var(--amber-soft);
  --st-fail:#EE7286; --st-fail-bg:var(--rose-soft);
  --st-err:#7FD4FF;  --st-err-bg:rgba(127,212,255,.14);
  --on-brand:#12102A; --on-amber:#1A1206; --on-rose:#2A0A10;

}

/* ── 호환 별칭 — 화면들이 쓰던 옛 이름을 잇는다.
      색은 이 파일 한 곳에서만 정한다. ─────────────────────────── */
:root{
  --primary:var(--indigo); --primary-d:var(--indigo-ink); --accent:var(--indigo);
  --accent-bg:var(--indigo-soft); --tint:var(--indigo-soft);
  --panel:var(--surface); --card:var(--surface); --canvas:var(--bg);
  --glass:var(--surface); --code-bg:var(--surface-2);
  --line-firm:var(--line-2); --ink2:var(--dim); --ink-soft:var(--dim);
  --ink-mute:var(--dim); --mut:var(--dim); --ink-faint:var(--faint);
  --shadow-1:var(--shadow); --sh-1:var(--shadow); --sh-2:var(--shadow);
  --sh-btn:0 8px 20px rgba(75,69,198,.26);
  --r-lg:var(--r); --r-md:var(--r-sm); --dot:var(--line-2);
  --head:#0F0B2B; --edge:var(--indigo);
  --pass:var(--st-calm); --calm:var(--st-calm); --calm-bg:var(--st-calm-bg);
  --ok:var(--st-calm); --warn:var(--st-warn); --warnc:var(--st-warn);
  --warn-bg:var(--st-warn-bg); --fail:var(--st-fail); --failc:var(--st-fail);
  --fail-bg:var(--st-fail-bg); --bad:var(--st-fail);
  --error:var(--st-err); --err:var(--st-err); --err-bg:var(--st-err-bg);
  --human:var(--dim); --human-bg:var(--surface-2);
  --info:var(--dim); --info-bg:var(--surface-2);
  --sans:var(--font);
}

*{box-sizing:border-box}

/* ── 글씨 크기 ──────────────────────────────────────────────────
   화면의 모든 글씨는 rem 이다. **여기 한 줄이 전체를 움직인다.**

   px 로 흩어져 있으면 「조금 키우자」 를 할 수가 없다. 실제로 그랬다 —
   본문은 15px 인데 나머지가 10.5~13.5px 로 눌려 있었고, 잘 안 보였다.

   비율은 안 건드린다. 12 와 15 의 관계가 흐트러지면 위계가 무너지고,
   그건 글씨가 작은 것보다 나쁘다. **똑같이 곱하기만 한다.**

   `--fs` 는 사람이 정한다 (머리 › 글씨 크기). 안 정했으면 «크게»(1.3) —
   본문이 19px 가 된다. 15px 은 한국어 화면에서 작다.

   **soma-ui.js 의 기본값과 같아야 한다.** CSS 는 글이 뜨기 전에 걸리고 JS 는
   그 뒤에 걸린다. 둘이 다르면 열 때마다 글씨가 한 번 튄다.

   SOMA 는 네 단(0.94 · 1 · 1.08 · 1.18) 중 둘째가 기본이라 여기는 **1** 이다.
   AXON 은 값을 바로 담아 1.3 이었는데, 그것을 그대로 옮겼더니 화면이 크게
   떴다가 JS 가 걸리는 순간 줄어들었다 — 옮길 때 같이 옮기면 안 되는 자리다. */
:root{ --fs:1 }
html{height:100%;font-size:calc(16px * var(--fs))}
/* 높이를 100% 로 못 박지 않는다. 내용이 길면 페이지가 길어지고,
   브라우저 스크롤로 끝까지 볼 수 있어야 한다. */
body{margin:0;min-height:100%}
/* 셸(index.html) 안에 뜬 화면 — 틀이 제 내용에 맞춰지므로 높이를 잠그지 않는다 */
html.framed,html.framed body{height:auto;min-height:0}
body{font-family:var(--font);color:var(--ink);line-height:1.6;letter-spacing:-.006em;
  font-size:0.9375rem;-webkit-font-smoothing:antialiased;word-break:keep-all;
  background:var(--bg)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ══ 그림 ═══════════════════════════════════════════════════════
   **그림은 이름 옆에 선다.** 이름을 대신하지 않는다 — 모양만으로 뜻을
   가르면 색이나 그림을 못 읽는 사람에게는 아무것도 안 남는다.
   currentColor 를 쓰므로 놓인 자리의 글자색을 그대로 따라간다. */
.gi{flex:0 0 auto;vertical-align:-0.18em;opacity:.72}
button:hover .gi,.navitem.active .gi{opacity:1}

/* ══ 셸 — 가운데 한 단 ═══════════════════════════════════════════ */
.app{max-width:1180px;margin:0 auto;padding:34px 28px 56px;
  display:flex;flex-direction:column;gap:26px;min-height:100%}

.hdr{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:15px}
/* 로고는 원이다. flex 안에서 눌려 타원이 되지 않게 크기를 세 번 못 박는다. */
.orb{width:44px;height:44px;flex:0 0 44px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#A79FFF,var(--indigo) 60%,#332CA0);
  box-shadow:0 0 0 6px rgba(75,69,198,.10),0 8px 22px rgba(75,69,198,.30);
  animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
.brand h1{font-size:1.1875rem;font-weight:800;letter-spacing:-.02em;margin:0}
.brand .sub{font-size:0.75rem;color:var(--dim);margin-top:1px;letter-spacing:.01em}
.status{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.pill{display:inline-flex;align-items:center;gap:8px;font-size:0.75rem;font-weight:600;
  color:var(--indigo);background:var(--surface);padding:8px 14px;border-radius:100px;
  box-shadow:var(--shadow-sm)}
.pill.off,.pill.mut{color:var(--faint)}
.pill.calm{color:var(--st-calm)} .pill.warn{color:var(--st-warn)}
.pill.fail{color:var(--st-fail)} .pill.err{color:var(--st-err)}
.livedot{width:8px;height:8px;border-radius:50%;background:var(--indigo);
  animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(75,69,198,.5)}
  70%{box-shadow:0 0 0 7px rgba(75,69,198,0)}100%{box-shadow:0 0 0 0 rgba(75,69,198,0)}}
.pill.off .livedot{background:var(--faint);animation:none}

/* ══ 탭 메뉴 — 상단 가로 알약 ════════════════════════════════════ */
.nav{display:flex;gap:9px;flex-wrap:wrap;row-gap:6px}
.navitem{border:none;background:var(--surface);color:var(--dim);font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.875rem;padding:11px 22px;border-radius:100px;cursor:pointer;
  box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:9px;
  font-family:var(--font);transition:color .15s,transform .12s}
.navitem:hover{color:var(--ink);transform:translateY(-1px)}
.navitem.active{background:linear-gradient(180deg,var(--violet),var(--indigo));
  color:var(--on-brand);
  box-shadow:0 8px 20px rgba(75,69,198,.28)}
/* 배지 = **당신이 답해야 할 것**(사람 대기 큐). 봇이 일하는 중은 성격이 달라 점으로 따로 알린다. */
.navitem .nb{font-size:0.71875rem;background:var(--amber);color:var(--on-amber);
  border-radius:100px;
  padding:1px 8px;font-weight:700}
.navitem .nb.urgent{background:var(--rose);color:var(--on-rose)}
.navitem.active .nb{background:rgba(255,255,255,.32)}
.navrun{display:inline-block;width:7px;height:7px;border-radius:100px;
  background:var(--indigo);animation:ping 2s infinite}
.navitem.active .navrun{background:#fff;animation:none}
.navitem .soon{font-size:0.71875rem;color:var(--faint);font-weight:600}

/* ══ 카드 ═══════════════════════════════════════════════════════ */
.card{background:var(--surface);border-radius:var(--r);padding:22px 24px;
  box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:18px}
.card h2{font-size:0.9688rem;font-weight:700;margin:0 0 16px;color:var(--ink);
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card h2 .msg{font-weight:500;font-size:0.7812rem;color:var(--dim)}
.card.flat{padding:16px 18px}

.sect{font-size:0.71875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);
  font-weight:700;margin:22px 0 9px}

/* ══ 폼 ═══════════════════════════════════════════════════════ */
label{font-size:0.7188rem;color:var(--dim);display:block;margin-bottom:6px;font-weight:600}
input,textarea,select{font-family:var(--font);font-size:0.8438rem;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:9px 12px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{border-color:var(--indigo);background:var(--surface);
  box-shadow:0 0 0 3px var(--indigo-soft)}
input:not([type=file]),select{height:38px;padding:0 12px}
input[type=checkbox],input[type=radio]{height:auto;width:auto;accent-color:var(--indigo)}
textarea{min-height:80px;resize:vertical;line-height:1.6;font-family:var(--mono);font-size:0.7812rem}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
.row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:12px 0}
.row .grow{flex:1;min-width:180px}

/* ══ 버튼 — 알약. 초록은 조작이지 상태가 아니다 ══════════════════ */
button,.btn{background:linear-gradient(180deg,var(--violet),var(--indigo));
  color:var(--on-brand);
  border:none;border-radius:100px;padding:10px 20px;font-weight:700;font-size:0.8438rem;
  cursor:pointer;font-family:var(--font);display:inline-flex;align-items:center;
  justify-content:center;gap:7px;white-space:nowrap;box-shadow:0 6px 16px rgba(75,69,198,.22);
  transition:transform .12s,box-shadow .15s;letter-spacing:-.01em}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(75,69,198,.3)}
button:active,.btn:active{transform:none}
button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}
button.sec,.btn.sec{background:var(--surface);color:var(--indigo-ink);
  box-shadow:var(--shadow-sm);border:1px solid var(--line)}
button.sec:hover{border-color:var(--indigo)}
button.ghost{background:transparent;color:var(--dim);box-shadow:none;border:1px solid var(--line)}
button.ghost:hover{color:var(--ink);transform:none}
button.del,.btn.del{background:var(--surface);color:var(--rose-ink);
  border:1px solid var(--rose-soft);box-shadow:none}
button.del:hover{border-color:var(--rose)}
/* 기본 모양이 곧 으뜸 단추다. 그래도 이름을 준다 —
   화면이 «pri» 라고 적는데 그런 규칙이 없으면, 나중에 으뜸을 바꿀 때
   어디를 고쳐야 하는지 알 수 없다. */
button.pri,.btn.pri{background:linear-gradient(180deg,var(--violet),var(--indigo));
  color:var(--on-brand);border:none}
button.btn-sm,.btn.btn-sm{padding:7px 15px;font-size:0.7812rem}
button.sm{padding:5px 12px;font-size:0.75rem}

/* ── 카드처럼 쓰는 단추 ──────────────────────────────────────────
   기본 단추는 알약이다 — inline-flex 로 눕고, nowrap 이라 안 접힌다.
   그 안에 여러 줄을 넣으면 줄들이 **한 줄로 눕고 옆으로 밀린다.**
   실제로 현황 화면의 「담당 봇 여섯」 이 그렇게 밀렸다.

   카드로 쓸 단추는 알약 모양을 통째로 되돌린다. 되돌리는 자리를 여기
   한 곳에 둔다 — 화면마다 되돌리면 어느 화면은 잊는다. */
button.cardbtn,.btn.cardbtn{display:block;width:100%;text-align:left;
  white-space:normal;background:var(--surface);color:inherit;font-weight:400;
  letter-spacing:normal;border:1px solid var(--line);border-radius:var(--r-sm);
  box-shadow:none;padding:14px 16px;
  transition:border-color .15s,box-shadow .15s}
button.cardbtn:hover,.btn.cardbtn:hover{transform:none;box-shadow:var(--shadow);
  border-color:var(--indigo)}

.msg{font-size:0.8125rem;color:var(--dim);line-height:1.65}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);
  color:var(--dim);font-size:0.71875rem;font-weight:600;padding:3px 10px;border-radius:100px;
  border:1px solid var(--line)}
.tag.mono{font-family:var(--mono);font-size:0.71875rem}
.tag.mut{color:var(--faint)}
.tag.calm{background:var(--st-calm-bg);color:var(--st-calm);border-color:transparent}
.tag.warn{background:var(--st-warn-bg);color:var(--st-warn);border-color:transparent}
.tag.fail{background:var(--st-fail-bg);color:var(--st-fail);border-color:transparent}
.tag.err {background:var(--st-err-bg); color:var(--st-err); border-color:transparent}
.tag.on  {background:var(--indigo-soft);  color:var(--indigo-ink);border-color:transparent}

/* ══ 표 ═══════════════════════════════════════════════════════ */
table{width:100%;border-collapse:collapse;font-size:0.8438rem}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
th{color:var(--dim);font-weight:700;font-size:0.71875rem;text-transform:uppercase;
  letter-spacing:.1em;padding-bottom:9px}
tbody tr:hover td{background:var(--surface-2)}
tr:last-child td{border-bottom:0}
table.tight th,table.tight td{padding:8px 10px;font-size:0.7812rem}

/* ══ 코드 ═════════════════════════════════════════════════════ */
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  border-radius:var(--r-chip);padding:.1em .4em}
pre{font-family:var(--mono);font-size:0.7812rem;line-height:1.6;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;margin:0 0 16px;
  overflow-x:auto}
pre code{background:none;padding:0;font-size:inherit}

/* ══ 안내 상자 ════════════════════════════════════════════════ */
.note{border-left:3px solid var(--indigo);background:var(--indigo-soft);padding:12px 15px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:0.8125rem;color:var(--ink);margin-bottom:16px}
.note b{color:var(--ink)}
.note.warn{border-left-color:var(--st-warn);background:var(--st-warn-bg)}
.note.fail{border-left-color:var(--st-fail);background:var(--st-fail-bg)}
.note.fail b{color:var(--st-fail)}

/* ══ 상태 — **글리프가 1차, 색은 보조** ═══════════════════════ */
.st{display:inline-flex;align-items:center;gap:6px;font-size:0.7812rem;font-weight:700}
.st .gl{width:19px;height:19px;border-radius:var(--r-chip);display:grid;place-items:center;
  font-size:0.71875rem;font-weight:800;border:1.5px solid currentColor;flex-shrink:0}
.st.calm{color:var(--st-calm)} .st.calm .gl{background:var(--st-calm-bg)}
.st.warn{color:var(--st-warn)} .st.warn .gl{background:var(--st-warn-bg)}
.st.fail{color:var(--st-fail)} .st.fail .gl{background:var(--st-fail-bg)}
.st.err {color:var(--st-err)}  .st.err  .gl{background:var(--st-err-bg);border-style:dashed}
.st.on  {color:var(--indigo-ink)} .st.on .gl{background:var(--indigo-soft)}

/* ══ 통계 타일 ════════════════════════════════════════════════ */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px}
.tile .k{font-size:0.71875rem;color:var(--dim);font-weight:700;letter-spacing:.04em}
.tile .v{font-size:1.4375rem;font-weight:800;line-height:1.2;margin-top:2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.tile .s{font-size:0.7188rem;color:var(--dim);margin-top:1px}
.tile.warn{border-color:var(--st-warn);background:var(--st-warn-bg)}
.tile.warn .v{color:var(--st-warn)}
.tile.fail{border-color:var(--st-fail);background:var(--st-fail-bg)}
.tile.fail .v{color:var(--st-fail)}

.empty{color:var(--faint);text-align:center;padding:44px 20px;font-size:0.8125rem}

@media (max-width:820px){
  .app{padding:20px 16px 44px;gap:18px}
  .navitem{padding:9px 15px;font-size:0.8125rem}
  .card{padding:16px 16px}
}

/* ══ 화면 안의 뼈대 ═════════════════════════════════════════════
   위 셸(index.html)이 화면 하나를 고르고, 화면 안은 이 뼈대를 쓴다.
   머리(수치) → 갈래(nav.tabs) → 거르개(filters) → 목록·상세(pane).
   화면마다 다시 짜면 같은 것이 조금씩 달라 보인다. 한곳에 둔다. */

/* 갈래 — 한 화면 안의 하위 탭. 위 알약과 모양을 달리해 구분한다. */
nav.tabs{display:flex;gap:2px;padding:0 26px;border-bottom:1px solid var(--line);
  background:var(--surface);overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;box-shadow:none;color:var(--dim);
  font-weight:600;font-size:0.8438rem;padding:11px 16px;border-radius:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
nav.tabs button:hover{color:var(--ink);transform:none;box-shadow:none}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--indigo)}
nav.tabs .rt{margin-left:auto;display:flex;align-items:center;gap:8px;padding:6px 0}

/* 머리 — 이 화면이 다루는 것의 크기를 숫자로 먼저 말한다 */
.head{padding:14px 26px 11px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.kpi{display:flex;flex-direction:column;font-size:0.71875rem;color:var(--dim);font-weight:700}
.kpi b{font-size:1.1875rem;color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:-.03em}
.kpi.warn b{color:var(--st-warn)} .kpi.fail b{color:var(--st-fail)}
.kpi.err b{color:var(--st-err)} .kpi.calm b{color:var(--st-calm)}
.head .r{margin-left:auto;display:flex;gap:9px;align-items:center}

/* 거르개 */
.filters{display:flex;gap:8px;padding:11px 26px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--line)}
.filters .lb{font-size:0.71875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-weight:800;margin-right:2px}
.chip{height:auto;box-shadow:none;background:var(--surface);color:var(--dim);
  border:1px solid var(--line-2);border-radius:100px;padding:5px 13px;font-size:0.7812rem;
  font-weight:600;transform:none}
.chip:hover{color:var(--ink);transform:none;box-shadow:none;background:var(--surface-2)}
.chip[aria-pressed="true"]{background:var(--indigo-soft);border-color:var(--indigo);
  color:var(--indigo-ink);box-shadow:none}
.filters input{width:210px;height:34px;border-radius:100px;font-size:0.7812rem}

/* 목록 · 상세 — 왼쪽에서 고르고 오른쪽에서 본다.
   높이를 화면에 묶지 않는다. 내용만큼 자라고, 넘치면 브라우저가 굴린다.
   안쪽에 스크롤 상자를 두면 볼 수 있는 것이 상자 크기에 갇힌다. */
.pane{display:grid;grid-template-columns:minmax(330px,1fr) minmax(420px,1.2fr);
  align-items:start}
.list{border-right:1px solid var(--line);padding:10px 0}
.detail{padding:22px 26px 48px;min-width:0}
/* 목록 한 줄 — 단추이지만 단추처럼 보이면 안 된다 */
.lrow{display:block;width:100%;text-align:left;background:none;border:0;border-radius:0;
  height:auto;box-shadow:none;color:inherit;font-weight:400;padding:12px 24px;
  border-left:3px solid transparent;cursor:pointer;font-family:var(--font)}
.lrow:hover{background:var(--surface-2);transform:none;box-shadow:none}
.lrow[aria-current="true"]{background:var(--surface-2);border-left-color:var(--indigo)}
.lrow .l1{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lrow .l2{font-size:0.75rem;color:var(--dim);margin-top:3px;display:flex;gap:8px;
  align-items:center;flex-wrap:wrap}
.lrow .id{font-family:var(--mono);font-size:0.7812rem;font-weight:700;color:var(--ink)}
.lrow .rt{margin-left:auto;font-family:var(--mono);font-size:0.7812rem;font-weight:800;
  font-variant-numeric:tabular-nums}

/* 사실 격자 — 상세 위쪽에 놓는 「무엇인가」 */
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px 20px;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 17px;margin-bottom:18px}
.fg .k{color:var(--dim);font-weight:700;font-size:0.71875rem;letter-spacing:.08em;
  text-transform:uppercase}
.fg .v{font-size:0.8438rem;color:var(--ink);margin-top:3px;overflow-wrap:anywhere;font-weight:600}
.fg .v.mono{font-family:var(--mono);font-size:0.7812rem;font-weight:400}

.dsect{font-size:0.71875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  font-weight:800;margin:24px 0 10px}
.dsect:first-child{margin-top:0}

@media (max-width:1000px){
  .pane{grid-template-columns:minmax(0,1fr)}
  .list{border-right:0;border-bottom:1px solid var(--line)} }

/* ══ 없을 때 쓰는 자리 ═════════════════════════════════════════
   지어낸 값으로 채우지 않는다. 없다고 말하고, 무엇을 하면 채워지는지 적는다. */
/* 빈 상태 상자는 **칸을 통째로 쓴다.**
   grid 나 flex 안에 그냥 넣으면 한 칸으로 끼어 찌그러진다 —
   「없습니다」 를 말하려다 더 못 읽게 만든다. */
.emptybox{padding:44px 24px;text-align:center;grid-column:1/-1;flex:1 1 100%}
/* 빈 화면이 글자만이면 «고장인가» 싶다. 동그라미 하나로 «자리는 있고
   아직 안 채워졌다» 를 먼저 말한다. */
.emptybox .ill{width:72px;height:72px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;color:var(--faint);
  background:radial-gradient(circle at 38% 32%,var(--surface-2),transparent 72%);
  border:1px solid var(--line)}
.emptybox .ill .gi{opacity:.85}
.emptybox .t{font-size:1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.emptybox .d{font-size:0.8438rem;color:var(--dim);line-height:1.75;max-width:600px;
  margin:0 auto}
.emptybox .d.how{margin-top:9px}
.emptybox code{font-size:0.7812rem}

/* ══ 표본 띠 — 이 화면이 무엇을 보고 있나 ═══════════════════════
   실제가 아닌 것을 실제처럼 두지 않는다. 눈에 걸리게 만든다. */
.samplebar{display:flex;align-items:center;gap:9px;padding:9px 26px;
  background:var(--st-fail-bg);border-bottom:1px solid var(--st-fail);
  color:var(--ink);font-size:0.7812rem;line-height:1.55}
.samplebar .gl{width:19px;height:19px;border-radius:var(--r-chip);display:grid;
  place-items:center;font-size:0.71875rem;font-weight:800;color:var(--st-fail);
  border:1.5px solid currentColor;flex-shrink:0}
.samplebar b{color:var(--st-fail)}

/* ══ 팝업 — 무엇이 일어날지 먼저 보여 주고 묻는다 ═══════════════ */
/*
 * **`.modal` 이 곧 덮개다.** 예전에는 `.mask`(덮개)와 `.modal`(카드)이
 * 갈려 있었는데, 실제로 쓰는 자리(`soma-ui.js` 의 `ask`)는 `.modal` 하나만
 * 만들고 그 안에 `.sheet` 를 넣었다. 그래서 물음창이 덮개 없이 **문서 맨
 * 아래에 흘러들어** 붙었다 — 화면이 길면 보이지도 않는다.
 *
 * 안 보이는 물음창은 답을 못 받고, 답을 못 받으면 그 뒤 코드가 통째로
 * 멈춘다. 오류도 안 난다. 「눌러도 아무 반응이 없다」가 그것이었다.
 */
.modal{position:fixed;inset:0;z-index:100;background:rgba(8,32,26,.42);
  display:grid;place-items:center;padding:24px;
  animation:maskin .14s ease-out}
@keyframes maskin{from{opacity:0}to{opacity:1}}
.modal .sheet{animation:modalin .18s cubic-bezier(.2,.9,.3,1)}
@keyframes modalin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
/* 결과 한 줄 — 잠깐 떴다 사라진다 */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:90;
  background:var(--ink);color:var(--bg);padding:11px 20px;border-radius:100px;
  font-size:0.8125rem;font-weight:600;box-shadow:0 10px 30px rgba(11,45,38,.30);
  animation:toastin .2s cubic-bezier(.2,.9,.3,1)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .modal,.modal .sheet,.toast{animation:none} }

/* ── 마크다운 본문 ────────────────────────────────────────────────
   보고서(report.md)와 그림(diagrams.md)이 여기로 들어온다. 화면의 다른
   글과 같은 눈금(토큰)을 쓰되, 문서라는 것이 보이도록 여백을 넉넉히 준다. */
.md-body{font-size:0.875rem;line-height:1.8;color:var(--ink);max-width:74ch}
.md-body > *:first-child{margin-top:0}
.md-body h1,.md-body h2,.md-body h3,
.md-body h4,.md-body h5,.md-body h6{
  margin:26px 0 10px;line-height:1.35;letter-spacing:-.01em;font-weight:700}
.md-body h1{font-size:1.375rem;padding-bottom:9px;border-bottom:1px solid var(--line)}
.md-body h2{font-size:1.125rem}
.md-body h3{font-size:0.9688rem}
.md-body h4,.md-body h5,.md-body h6{font-size:0.875rem;color:var(--ink-soft)}
.md-body p{margin:0 0 13px}
.md-body ul,.md-body ol{margin:0 0 13px;padding-left:22px}
.md-body li{margin:3px 0}
.md-body li::marker{color:var(--ink-mute)}
.md-body strong{font-weight:700}
.md-body em{font-style:normal;color:var(--ink-soft);
  border-bottom:1px solid var(--line-firm)}
.md-body a{color:var(--accent);text-underline-offset:2px}
.md-body hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.md-body blockquote{margin:0 0 13px;padding:9px 15px;
  border-left:3px solid var(--accent);background:var(--accent-bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-soft)}

.md-body code{font-family:var(--mono);font-size:.87em;
  background:var(--code-bg);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px}

/* 코드 덩이 — 가로로 길면 그 안에서만 밀린다. 문서가 옆으로 밀리면 안 된다. */
.md-body pre.md-code,.md-body pre.mermaid{
  margin:0 0 15px;padding:13px 15px;background:var(--code-bg);
  border:1px solid var(--line);border-radius:var(--r-md);
  overflow-x:auto;font-family:var(--mono);font-size:0.7812rem;line-height:1.65;
  white-space:pre;color:var(--ink-soft)}
.md-body pre code{background:none;border:0;padding:0;font-size:inherit}
/* Mermaid 는 아직 그림으로 그리지 않는다. 원문임을 표시해 둔다 —
   그려 주는 척하면 안 그려진 것이 고장으로 보인다. */
.md-body pre.mermaid{border-style:dashed;position:relative;padding-top:26px}
.md-body pre.mermaid::before{content:"Mermaid 원문";position:absolute;
  top:6px;left:15px;font-size:0.71875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700}

/* 표 — 옆으로 긴 표는 감싼 칸 안에서만 밀린다 */
.md-body table.md-table{width:100%;border-collapse:collapse;
  margin:0 0 15px;font-size:0.8125rem;display:block;overflow-x:auto}
.md-body table.md-table th,.md-body table.md-table td{
  border-bottom:1px solid var(--line);padding:7px 11px;text-align:left;
  vertical-align:top;white-space:nowrap}
.md-body table.md-table th{font-size:0.71875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:800;
  border-bottom:1px solid var(--line-firm)}
.md-body table.md-table td{font-variant-numeric:tabular-nums}
.md-body table.md-table tr:last-child td{border-bottom:0}


/* ── SOMA 이름 잇기 ────────────────────────────────────────────
   화면 22개가 예전 초록 시절의 이름을 쓰고 있다. 이름을 전부 고치면
   한 번에 22개 파일이 흔들린다 — **색은 위 한 곳에서만 정하고**,
   여기서 옛 이름을 새 색에 이어 준다. */
:root{
  --brand:var(--indigo); --teal-ink:var(--indigo-ink);
  --teal-soft:var(--indigo-soft);
  --emerald:var(--indigo); --teal:var(--indigo);
  --mint:var(--violet); --aqua:var(--azure);
  --brand-2:var(--azure); --brand-3:var(--amber);
  --brand-soft:var(--indigo-soft);
  --brand-2-soft:rgba(62,127,212,.10);
  --brand-3-soft:var(--amber-soft);

  /* 고른 갈래에 얹는 띠. AXON 의 알약과 같은 기울기다 */
  --brand-a:var(--violet); --brand-b:var(--indigo);
  --brand-cast:rgba(75,69,198,.28);

  --wash:linear-gradient(160deg,rgba(75,69,198,.055),rgba(62,127,212,.035) 62%,
    rgba(255,255,255,0) 96%);
  --wash-2:linear-gradient(160deg,rgba(62,127,212,.05),rgba(75,69,198,.03) 70%,
    rgba(255,255,255,0) 96%);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --brand-cast:rgba(139,132,245,.26);
  --brand-2-soft:rgba(127,176,238,.14);
  --wash:linear-gradient(160deg,rgba(139,132,245,.10),rgba(127,176,238,.06) 62%,
    rgba(0,0,0,0) 96%);
  --wash-2:linear-gradient(160deg,rgba(127,176,238,.09),rgba(139,132,245,.05) 70%,
    rgba(0,0,0,0) 96%);
}}
:root[data-theme="dark"]{
  --brand-cast:rgba(139,132,245,.26);
  --brand-2-soft:rgba(127,176,238,.14);
  --wash:linear-gradient(160deg,rgba(139,132,245,.10),rgba(127,176,238,.06) 62%,
    rgba(0,0,0,0) 96%);
  --wash-2:linear-gradient(160deg,rgba(127,176,238,.09),rgba(139,132,245,.05) 70%,
    rgba(0,0,0,0) 96%);
}

/* ══ SOMA 만의 부품 ══════════════════════════════════════════════
   AXON 에 없는 자리들. **색은 위 토큰만 쓴다.** */
.card + .card{background-image:var(--wash-2)}

/* 화면마다 카드 이름이 다르다(card2 · panel · stage · pane…). 그 이름을
   전부 여기 적는 대신, 바탕이 surface 인 큰 면에 같은 기울기를 얹는다.
   `body` 를 앞에 두어 화면 쪽 규칙보다 세게 만든다 — soma.css 가 먼저
   실리므로 그러지 않으면 화면 규칙이 이긴다. */
body .card2,body .panel,body .stage,body .pane{background-image:var(--wash)}

body .card2 + .card2,body .pane + .pane{background-image:var(--wash-2)}

/* ═════════════════════════════════════════════════════════════════
 * SOMA 덧붙임 — 투자 화면에만 있는 것.
 *
 * 위쪽은 GLIA 의 것을 그대로 쓴다(같은 계열이니 다시 만들 이유가 없다).
 * 여기 것만 더하고, **색은 위 토큰에서만 가져온다** —
 * 새 색을 만들면 검증된 팔레트가 무너진다.
 * ═════════════════════════════════════════════════════════════════ */

/* ── 못 잰 것 ──────────────────────────────────────────────────
   **이 한 줄이 이 화면의 정직성이다.** 0 과 「못 읽음」을 같은 모양으로
   적으면 화면이 거짓말을 한다. */
.none{color:var(--faint);font-style:normal;font-size:.94em}

/* 오르내림. **초록/빨강 쌍을 안 쓴다** — 적록색약에서 같은 색이다.
   위는 청록(브랜드), 아래는 장미. 부호(+/-)를 늘 함께 적는다. */
.up{color:var(--teal-ink);font-variant-numeric:tabular-nums}

.down{color:var(--rose-ink);font-variant-numeric:tabular-nums}

td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

.meta{color:var(--faint);font-size:13px}

.cut{max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 숫자 한 줄 ────────────────────────────────────────────────*/
.kpirow{display:grid;gap:10px;margin:0 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* **물 들이지 않는다.** 흰 바탕 위에 흰 상자를 놓고 5% 초록 물(--wash)을
   끼얹었더니, 상자도 아니고 바탕도 아닌 뿌연 자국이 됐다. 옅은 면(--surface)에
   테두리를 두는 쪽이 훨씬 또렷하다 — AXON 이 그렇게 한다. */
.kpirow .kpi{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 13px;background:var(--surface)}

.kpirow .kpi b{display:block;font-size:21px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--ink)}

.kpirow .kpi span{display:block;color:var(--faint);font-size:12.5px;margin-top:2px}

.kpirow .kpi i{display:block;color:var(--faint);font-size:12px;font-style:normal}

/* ── 표 ───────────────────────────────────────────────────────
   넓은 표는 «제 상자 안에서» 굴린다. 페이지가 가로로 밀리면
   머리띠와 메뉴까지 함께 밀려 읽을 수 없다. */
.tw{overflow-x:auto;margin:0 0 12px}

.tw table{width:100%;border-collapse:collapse;font-size:13.5px}

.tw th,.tw td{text-align:left;padding:6px 9px;vertical-align:top;
  border-bottom:1px solid var(--line)}

.tw th{background:var(--surface);color:var(--dim);font-size:12.5px;
  font-weight:750;white-space:nowrap;border-bottom:1.5px solid var(--line-2)}

.st.ok{color:var(--teal-ink);background:var(--teal-soft)}

/* ── 조각 ─────────────────────────────────────────────────────*/
.cmd{display:inline-block;font-family:var(--mono);font-size:12.5px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-chip);padding:2px 7px}

.card h3{margin:0 0 6px;font-size:14.5px;font-weight:750}

.card h4{margin:10px 0 5px;font-size:13px;font-weight:700;color:var(--dim)}

.card.ask{border-color:var(--amber);background:var(--amber-soft)}

.card.bad{border-color:var(--rose);background:var(--rose-soft)}

p.note{margin:-2px 0 10px;color:var(--faint);font-size:13px;line-height:1.65}

details{margin:0 0 8px}

details summary{cursor:pointer;color:var(--brand-2);font-size:13.5px;
  font-weight:650;padding:3px 0}

/* ── 규칙 3층 ─────────────────────────────────────────────────
   ①②③ 을 한눈에 갈라 보이게 한다. 이 갈라짐이 제품의 알맹이다. */
.rule{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  margin:0 0 10px;background:var(--surface)}

.rule .rh{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:7px}

table.layer{width:100%;border-collapse:collapse;font-size:13px}

table.layer th{width:64px;text-align:left;vertical-align:top;padding:6px 9px 6px 0;
  color:var(--brand-2);font-weight:750;white-space:nowrap}

table.layer td{padding:6px 0;border-bottom:1px solid var(--line)}

table.layer tr:last-child td{border-bottom:0}

/* ═════════════════════════════════════════════════════════════════
 * SOMA 덧붙임 ② — 단추 · 물음 · 알림.
 *
 * 인증이 붙으면서 화면이 «누를 수 있는 것» 이 됐다. 누르는 것에는
 * 규칙이 둘 있다:
 *
 *   · 못 하는 단추는 **왜 못 하는지** 적는다 (title). 회색으로만 두면
 *     「왜 안 눌리지」를 사람이 혼자 풀어야 한다
 *   · 되돌릴 수 없는 것은 **한 번 더 묻고 사유를 받는다**
 * ═════════════════════════════════════════════════════════════════ */

button.go,button.ghost,button.bad,a.ghost{
  display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-sm);
  padding:7px 14px;font:inherit;font-size:0.8125rem;font-weight:700;
  cursor:pointer;border:1px solid transparent;text-decoration:none}

button.go{background:var(--brand);color:#fff}

button.go:hover{background:var(--teal-ink)}

button.ghost,a.ghost{background:var(--surface);color:var(--dim);
  border-color:var(--line-2)}

button.ghost:hover,a.ghost:hover{color:var(--ink);border-color:var(--brand)}

button.bad{background:var(--st-fail-bg);color:var(--rose-ink);
  border-color:var(--rose)}

button.bad:hover{background:var(--rose);color:#fff}

button[aria-current=true]{box-shadow:0 0 0 2px var(--teal-soft)}

.modal .sheet{width:100%;max-width:430px;background:var(--bg);
  border:1px solid var(--line-2);border-radius:var(--r);padding:18px 20px;
  box-shadow:0 18px 50px rgba(11,45,38,.24)}

.modal h3{margin:0 0 8px;font-size:1rem;font-weight:800}

.modal .lead{margin:0 0 10px;font-size:0.8125rem;color:var(--dim);line-height:1.7}

.modal .danger{margin:0 0 12px;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--st-fail-bg);color:var(--rose-ink);font-size:0.8125rem;
  font-weight:700;line-height:1.65}

.modal label{display:block;font-size:0.78rem;font-weight:750;margin:0 0 6px}

.modal label .req{color:var(--amber-ink);font-weight:800;font-size:0.72rem}

.modal input{width:100%;padding:9px 11px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  font:inherit;font-size:0.875rem;margin-top:4px}

.modal input:focus{outline:none;border-color:var(--brand)}

.modal .hint{margin:8px 0 0;font-size:0.75rem;color:var(--faint)}

.modal .row{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

.toast.on{opacity:1;transform:translate(-50%,0)}

.toast.bad{background:var(--rose)}

.askrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}