/* MediMind Lite · 랜딩 페이지 디자인 (2026-10-09)
 * landing/public/index.html 의 모양을 앱에 입힙니다: 차트 용지 같은 연한 바탕, 남색 잉크, 진료용 청록 하나,
 * 상태 색은 의미에만(주황 = 주문 필요, 빨강 = 소진·오류, 초록 = 여유·완료), 숫자와 표 머리는 IBM Plex Mono.
 * style.css 위에 덮어씁니다. 기본으로 켜지고, <html data-skin="classic">(skin.js, ?skin=classic)이면 예전 모양입니다.
 * CSP: 글꼴은 같은 서버에서만(plex-mono-*.ttf, SIL OFL 1.1 — plex-mono-ofl.txt). style 속성은 쓰지 않습니다. */

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/plex-mono-400.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/plex-mono-700.ttf") format("truetype"); }

/* ── 1. 토큰: 랜딩의 색을 앱 토큰 이름에 옮김 ─────────────────────── */
:root:not([data-skin="classic"]) {
  --a-page: #f2f6f5;
  --a-surface: #ffffff;
  --a-sunken: #edf2f0;
  --a-row-hover: #f3f7f6;

  /* 메뉴: 랜딩의 어두운 신청 띠(#0f1f26)와 같은 잉크 */
  --a-rail: #0f1f26;
  --a-rail-hover: #18303a;
  --a-rail-current: #1b3a40;
  --a-rail-line: #2d4a55;
  --a-rail-line-strong: #41636c;
  --a-rail-ink: #c9d8d6;
  --a-rail-ink-dim: #9fb6b8;
  --a-rail-strong: #eef5f3;
  --a-rail-marker: #3dbdaf;
  --a-focus-on-dark: #7fd6cc;

  --a-ink: #0f1f26;
  --a-ink-2: #3f5259;
  --a-muted: #56686e;
  --a-placeholder: #66777c;

  --a-line: #d5dfdd;
  --a-line-soft: #e6edeb;
  --a-line-input: #7c8f8d;
  --a-line-strong: #a3bcb8;

  /* 진료용 청록 */
  --a-accent: #0b7a72;
  --a-accent-hover: #09625c;
  --a-accent-soft: #dbeeea;
  --a-accent-press: #c6e4de;
  --a-accent-line: #9ccfc6;

  --a-recover-soft: #e9f4f1;
  --a-recover-line: #8cc2b8;

  /* 빨강 = 소진 · 오류 · 녹음 */
  --a-warn: #bf3438;
  --a-warn-strong: #9b2a2e;
  --a-warn-soft: #fbe4e4;
  --a-warn-line: #efc2c3;
  --a-warn-on-dark: #f6d3d4;

  /* 주황 진흙색 = 주문 필요 · 저장 대기 · 확인 필요 */
  --a-order: #a9531b;
  --a-order-ink: #8c4515;
  --a-order-fill: #c8732f;
  --a-order-soft: #f7e9dc;
  --a-order-line: #e6c3a4;

  --a-ok: #1c7d46;
  --a-ok-soft: #def1e5;
  --a-ok-line: #a6d3b6;

  --a-slate: #3f5259;

  --a-disabled-bg: #e6ecea;
  --a-disabled-ink: #66777c;

  --a-font: "IBM Plex Sans KR", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --a-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --a-display: "IBM Plex Sans KR", "IBM Plex Sans Condensed", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --a-r-sm: 6px;
  --a-r: 7px;
  --a-r-lg: 12px;

  --a-e1: 0 1px 0 #d5dfdd, 0 2px 8px #0f1f2614;
  --a-e1-up: 0 -1px 0 #d5dfdd, 0 -2px 8px #0f1f2614;
  --a-e2: 0 1px 0 #0f1f260a, 0 14px 32px -18px #0f1f2647;
  --a-e3: 0 1px 0 #0f1f260a, 0 24px 56px -20px #0f1f2661;
  --a-backdrop: #0f1f2666;
  --a-scroll-cue: #0f1f2647;
}

/* 운영자 화면(/master)과 공개 재고 안내(/inventory-guide)는 자기 토큰 이름을 씁니다. 같은 색으로 맞춥니다. */
:root:not([data-skin="classic"]) {
  --ink: #0f1f26; --ink-2: #3f5259; --muted: #56686e; --line: #d5dfdd; --paper: #f2f6f5; --card: #ffffff;
  --accent: #0b7a72; --accent-hover: #09625c; --accent-soft: #dbeeea;
  --warn: #bf3438; --warn-soft: #fbe4e4; --warn-line: #efc2c3;
  --order: #a9531b; --order-ink: #8c4515; --order-soft: #f7e9dc; --order-line: #e6c3a4;
  --ok: #1c7d46; --ok-soft: #def1e5; --ok-line: #a6d3b6;
  --recover-soft: #e9f4f1; --recover-line: #8cc2b8;
  --line-soft: #e6edeb; --line-input: #7c8f8d; --sunken: #edf2f0;
  --disabled-bg: #e6ecea; --disabled-ink: #66777c;
  --font: "IBM Plex Sans KR", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --e2: 0 1px 0 #0f1f260a, 0 14px 32px -18px #0f1f2647;
  --g-page: #f2f6f5; --g-card: #ffffff; --g-ink: #0f1f26; --g-ink-2: #3f5259; --g-muted: #56686e;
  --g-line: #d5dfdd; --g-line-soft: #e6edeb; --g-green: #0b7a72; --g-green-soft: #dbeeea; --g-button-line: #7c8f8d;
}

/* ── 2. 글자: 제목은 굵고 촘촘하게, 숫자 · 표 머리 · 이름표는 Mono ─────── */
html:not([data-skin="classic"]) .a-stage-head h1,
html:not([data-skin="classic"]) .a-dialog-in > h2,
html:not([data-skin="classic"]) .a-login-card h1 { font-family: var(--a-display); letter-spacing: -0.01em; }
html:not([data-skin="classic"]) .a-input:focus,
html:not([data-skin="classic"]) .a-textarea:focus { box-shadow: 0 0 0 3px #0b7a7230; }
html:not([data-skin="classic"]) .a-input[aria-invalid="true"],
html:not([data-skin="classic"]) .a-textarea[aria-invalid="true"] { box-shadow: 0 0 0 3px #bf343826; }

/* 숫자 (수량 · 평균 · 버전 · 개수) */
html:not([data-skin="classic"]) .a-qty-number,
html:not([data-skin="classic"]) .a-th,
html:not([data-skin="classic"]) #a-name-size-value,
html:not([data-skin="classic"]) .a-rail-version,
html:not([data-skin="classic"]) .a-list-meta b,
html:not([data-skin="classic"]) .a-loc-row th span,
html:not([data-skin="classic"]) .a-group-row th span,
html:not([data-skin="classic"]) .a-kind-chip span { font-family: var(--a-mono); }
/* Mono 의 띄어쓰기 폭(0.6em)이 한글 사이에서 너무 넓어 보여 줄입니다. */
html:not([data-skin="classic"]) .a-loc-row th span,
html:not([data-skin="classic"]) .a-group-row th span,
html:not([data-skin="classic"]) .a-snapshot-table td.a-cell-title,
html:not([data-skin="classic"]) .a-feedback-trail ol,
html:not([data-skin="classic"]) .a-file-name { word-spacing: -0.3em; }
html:not([data-skin="classic"]) .a-qty-number { font-weight: 700; letter-spacing: -0.02em; }

/* 표 머리: 랜딩의 작은 이름표 (한글은 Mono 로 바꿔도 모양이 같아 본문 글꼴 그대로) */
html:not([data-skin="classic"]) .a-table th { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--a-muted); background: var(--a-page); }

/* 장소 머리 줄: 청록 제목 + Mono 개수 */
html:not([data-skin="classic"]) .a-loc-row th {
  font-family: var(--a-display); font-size: 17px; letter-spacing: -0.01em; color: var(--a-accent);
  background: var(--a-surface); border-bottom-color: var(--a-accent);
}
html:not([data-skin="classic"]) .a-loc-row th span,
html:not([data-skin="classic"]) .a-group-row th span { font-size: 12px; letter-spacing: .02em; }

/* ── 3. 상태 표: 랜딩의 칩 (테두리 = 글자색, 연한 바탕) ─────────────── */
html:not([data-skin="classic"]) .a-stock-label { height: 22px; border-radius: 999px; font-size: 12px; }
html:not([data-skin="classic"]) .a-stock[data-status="order"] .a-stock-label { background: var(--a-order-soft); color: var(--a-order); box-shadow: inset 0 0 0 1px currentColor; }
html:not([data-skin="classic"]) .a-stock[data-status="out"] .a-stock-label { background: var(--a-warn); color: #fff; }
html:not([data-skin="classic"]) .a-stock[data-status="unknown"] .a-stock-label { color: var(--a-muted); box-shadow: inset 0 0 0 1px currentColor; }
html:not([data-skin="classic"]) .a-stock-bar { height: 5px; border-radius: 99px; background: var(--a-line-soft); }
html:not([data-skin="classic"]) .a-stock-bar > i { border-radius: 99px; }

/* 빠른 칩 · 종류 칩: 선택은 청록 연한 바탕 + 청록 테두리 (랜딩의 초안 칩) */
html:not([data-skin="classic"]) .a-kind-chip,
html:not([data-skin="classic"]) .a-quick-chip { border-color: var(--a-line-strong); }
html:not([data-skin="classic"]) .a-kind-chip:hover,
html:not([data-skin="classic"]) .a-quick-chip:hover { border-color: var(--a-accent); }

/* ── 4. 버튼 · 입력: 테두리는 연하게, 올리면 청록 ─────────────────── */
html:not([data-skin="classic"]) .a-btn:hover:not(:disabled) { border-color: var(--a-accent); }
html:not([data-skin="classic"]) .a-btn-main { box-shadow: 0 1px 0 #0f1f260f; }
html:not([data-skin="classic"]) .a-btn-main:hover:not(:disabled) { box-shadow: 0 6px 16px -8px var(--a-accent); }
html:not([data-skin="classic"]) .a-loc-switch button:hover:not([aria-pressed="true"]) { border-color: var(--a-accent); }

/* ── 5. 작업창: 랜딩처럼 연한 바탕 위에 흰 틀 ────────────────────────── */
html:not([data-skin="classic"]) .a-stage-head { background: var(--a-page); border-bottom-color: var(--a-line); }
html:not([data-skin="classic"]) .a-inv-options { border: 1px solid var(--a-line); background: var(--a-surface); }
@media (min-width: 701px) {
  html:not([data-skin="classic"]) .a-inv-workspace { background: var(--a-page); }
  /* 도구 줄: 랜딩 위쪽 메뉴처럼 반투명 바탕 + 흐림 */
  html:not([data-skin="classic"]) .a-inv-toolbar { background: #f2f6f5eb; -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 1px 0 var(--a-line); }
  html:not([data-skin="classic"]) .a-options-panel { border-bottom-color: var(--a-line); }
  /* 재고 표: 흰 틀(모서리 16 px, 옅은 그림자) */
  html:not([data-skin="classic"]) .a-table-wrap { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 16px; box-shadow: var(--a-e2); }
  html:not([data-skin="classic"]) .a-table thead th:first-child { border-top-left-radius: 15px; }
  html:not([data-skin="classic"]) .a-table thead th:last-child { border-top-right-radius: 15px; }
  html:not([data-skin="classic"]) .a-table tbody:last-child tr:last-child > td { border-bottom: 0; }
}

/* ── 6. 메뉴: 어두운 잉크 + 청록 표시 ───────────────────────────────── */
html:not([data-skin="classic"]) .a-rail-nav button[aria-current="page"] { color: #fff; }
html:not([data-skin="classic"]) .a-rail-version { letter-spacing: .02em; }

/* ── 7. 알림 · 대화상자 · 떠 있는 버튼 ─────────────────────────────── */
html:not([data-skin="classic"]) .notice { border-radius: 10px; }
html:not([data-skin="classic"]) .notice.info,
html:not([data-skin="classic"]) .notice.offline { background: var(--a-ink); }
html:not([data-skin="classic"]) .a-dialog { border-radius: 16px; }
html:not([data-skin="classic"]) .a-fab:hover { box-shadow: 0 10px 22px -10px var(--a-accent); }

/* ── 8. 시작(로그인) 페이지: 랜딩 첫 화면과 같은 말투 ──────────────────── */
html:not([data-skin="classic"]) .landing { background: var(--a-page); }
html:not([data-skin="classic"]) .landing-card {
  border: 1px solid var(--a-line); border-radius: 16px; background: var(--a-surface);
  box-shadow: 0 1px 0 #0f1f260a, 0 14px 32px -18px #0f1f2647;
}
html:not([data-skin="classic"]) .landing-logo { margin-bottom: 36px; }
html:not([data-skin="classic"]) .landing-eyebrow { font-weight: 600; font-size: 12.5px; letter-spacing: .04em; color: var(--a-accent); }
html:not([data-skin="classic"]) .landing-card h1 { font-family: var(--a-display); color: var(--a-ink); letter-spacing: -0.02em; line-height: 1.25; }
html:not([data-skin="classic"]) .landing-invite-note,
html:not([data-skin="classic"]) .landing-account-caption { color: var(--a-ink-2); }
html:not([data-skin="classic"]) .landing-account-caption b { color: var(--a-ink); }
html:not([data-skin="classic"]) .landing-primary {
  justify-content: center; min-height: 48px; border-radius: 8px; background: var(--a-accent); font-size: 15px;
  transition: transform .12s, box-shadow .12s, background-color .12s;
}
html:not([data-skin="classic"]) .landing-primary:hover { background: var(--a-accent-hover); transform: translateY(-1px); box-shadow: 0 6px 16px -8px var(--a-accent); }
html:not([data-skin="classic"]) .landing-guide-link { color: var(--a-accent); }
html:not([data-skin="classic"]) .landing-account { border-color: var(--a-line); border-radius: 8px; background: var(--a-page); }
html:not([data-skin="classic"]) .landing-secondary { border-color: var(--a-line-input); border-radius: 8px; color: var(--a-ink); }
html:not([data-skin="classic"]) .landing-secondary:hover { border-color: var(--a-accent); background: var(--a-surface); }
html:not([data-skin="classic"]) .landing-skip { background: var(--a-surface); color: var(--a-ink); }

@media (prefers-reduced-motion: reduce) {
  html:not([data-skin="classic"]) .landing-primary { transition: none; }
  html:not([data-skin="classic"]) .landing-primary:hover { transform: none; }
}