/* ═══════════════════════════════════════════════════════════════════════════
   LILT 공통 디자인 토큰 — 첫 화면 · 편집기 · 운영자 콘솔이 같은 값을 쓴다.
   근거: 저장소 design_handoff_lilt/README.md (hifi — 색·활자·간격·모션이 최종값).

   무드: 흰/검정 미니멀. 카드·그림자 대신 헤어라인으로 나눈다(2026-09-20 모노 전환).
   ⚠ 세리프 금지 — 한글도 영문도. 영문 라벨은 작은 대문자 + 넓은 자간으로만 세운다.
   ⚠ 여기서 정한 값을 화면마다 다시 적지 말 것. 색을 새로 만들지도 말 것.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 색 ── 흰 지면 위 잉크 한 색. 색으로 강조하지 않는다. */
  --bg:#f4f3f1;                 /* 지면 */
  --panel:#ffffff;              /* 패널 — 그림자 없이 1px 헤어라인만 두른다 */
  /* ⚠ 이름은 --accent 로 남았지만 값은 잉크다(부르는 곳이 많아 이름만 두었다). */
  --accent:#1a1a1a;
  --accent-deep:#1a1a1a;
  --accent-soft:rgba(0,0,0,.05);
  --ink:#1a1a1a;                /* 본문 잉크 */
  --ink-mid:#9a9a9a;            /* 보조 */
  --ink-weak:#c0c0c0;           /* 3차 — 영문 라벨·자리표시자 */
  --danger:#9a4a30;             /* 오류·차단·삭제 */
  --ok:#1a1a1a;

  /* 잉크 알파 — 호버면·막대 */
  --a05:rgba(0,0,0,.03);
  --a07:rgba(0,0,0,.05);
  --a10:rgba(0,0,0,.08);
  --a16:rgba(0,0,0,.16);
  --a55:rgba(0,0,0,.55);

  /* 헤어라인 3단 — 면을 나누는 유일한 수단 */
  --line:rgba(0,0,0,.14);
  --line-2:rgba(0,0,0,.08);
  --line-3:rgba(0,0,0,.055);

  /* ── 활자 ── */
  --sans:'Pretendard',-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;

  /* ── 지면 ── 화면마다 읽기 폭이 다르다: 콘솔 1100 · 고객 대시보드 880. */
  --side:max(clamp(24px, 4vw, 64px), (100vw - 1240px) / 2);
  --col-console:1100px;
  --col-dash:880px;

  /* ── 모양 ── 이 화면들에는 둥근 모서리가 없다. 알약은 점·배지에만 남는다. */
  --r-s:0; --r-m:0; --r-l:0; --r-xl:0; --r-pill:999px;
  --sh-card:none;
  --sh-panel:none;
  --sh-toast:0 10px 26px -8px rgba(0,0,0,.35);

  /* ── 모션 ── */
  --e-in:cubic-bezier(.22,.61,.36,1);      /* 진입 */
  --e-sheet:cubic-bezier(.32,.72,0,1);     /* 시트·그로우 */
  --e-spring:cubic-bezier(.34,1.56,.64,1); /* 배지·노브·막대 */
}

@keyframes riseIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes glassRise{ from{ opacity:0; transform:scaleY(.2) } to{ opacity:1; transform:scaleY(1) } }
@keyframes barUp{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } }
@keyframes toastIn{ from{ opacity:0; transform:translate(-50%,14px) } to{ opacity:1; transform:translate(-50%,0) } }
@keyframes ringOut{ from{ box-shadow:0 0 0 0 var(--a55) } to{ box-shadow:0 0 0 12px rgba(0,0,0,0) } }
@keyframes lineIn{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}

/* ── 영문 라벨 ── 작은 대문자 + 넓은 자간. 자간만큼 왼쪽을 밀어 시각 정렬을 맞춘다. */
.eyebrow{ font-size:10.5px; font-weight:400; letter-spacing:.2em;
  color:var(--ink-weak); padding-left:.2em; }
.eyebrow--ink{ color:var(--ink-mid); letter-spacing:.2em; padding-left:.2em; font-size:11px; }

/* ── 제목 ── 한글 제목은 얇은 톤(300~450)으로만 세운다. */
.t-h2{ margin:12px 0 0; font-size:21px; font-weight:300; letter-spacing:-.018em;
  line-height:1.45; color:var(--ink); word-break:keep-all; }