/* ============================================================================
   APIS LIVE — 디자인 시스템 (design.css)  v1 · 2026-09-04
   ----------------------------------------------------------------------------
   구조 = 세 층.  ① 원색 램프(여기만 hex)  ② 의미 토큰(화면이 쓰는 이름)  ③ 컴포넌트(.ds-*)
   테마 = 다크(손님 앱·클락·플로어, 기본) / 라이트(파트너 센터, <html data-theme="light">).
          ②만 뒤집히고 ③은 한 벌이다.
   쓰는 법 = 새 코드는 hex·px 를 직접 쓰지 않는다. var(--ink) · var(--sp-3) · .ds-btn.
          기존 화면의 옛 변수(--g0/--t0/--ink/--ac …)는 각 파일이 그대로 갖고 있다 — 여기서 건드리지 않는다.
   문서 = docs/DESIGN.md
   ⚠ 클래스는 전부 ds- 접두 — 기존 화면의 .btn/.tag/.row 와 절대 겹치지 않게.
   ============================================================================ */

/* ── ① 원색 램프 ──────────────────────────────────────────────────────────── */
:root{
  /* 차콜 그레이 12단 (어둠 → 밝음). 4단(g0~g3)이던 것을 hover/pressed/disabled 까지 쓰게 늘렸다 */
  --gray-1:#060708; --gray-2:#0B0C0F; --gray-3:#101216; --gray-4:#15171C;
  --gray-5:#1C1F25; --gray-6:#1F2229; --gray-7:#2A2E36; --gray-8:#383D47;
  --gray-9:#5C6270; --gray-10:#767F8E; --gray-11:#9CA2AE; --gray-12:#EDEEF2;
  --white:#F2F3F6;
  /* 웜 그레이 — 차콜이 너무 쿨해 보이는 자리에만 (2026-09-23 사장님 '즐겨가는 매장' 타일) */
  --warm-4:#1A1A1B;
  /* 라이트 그레이 12단 (밝음 → 어둠) — 파트너 센터 */
  --lgray-1:#FFFFFF; --lgray-2:#FAFAFB; --lgray-3:#F5F5F6; --lgray-4:#F1F2F4;
  --lgray-5:#E8E9EC; --lgray-6:#D6DAE1; --lgray-7:#C9CDD5; --lgray-8:#9BA1AB;
  --lgray-9:#8A8F99; --lgray-10:#5E636D; --lgray-11:#3A3E46; --lgray-12:#191A1E;
  /* 색 — 세 가지뿐. 다홍=LIVE·마감·선택, 골드=돈(GTD·상금·시드권), 초록=OK. 파스텔·다색 금지 */
  --red-9:#FF4B40;  --red-10:#E8443A; --red-11:#C4372E; --red-3:#FDF0EF;
  --gold-9:#D7B66F; --gold-11:#A8842C; --gold-3:#F8F1DF;
  --green-9:#5BC08F; --green-10:#0E9F6E; --green-11:#0A7D57; --green-3:#E7F6EF;
  --amber-9:#E0A84A; --amber-11:#B7791F; --amber-3:#FCF3E3;
  --blue-9:#58A3FF;  --blue-10:#1053D4; --blue-11:#1A56DB; --blue-3:#EBF1FE;

  /* 폰트 — 전 화면 공통. 숫자는 반드시 --num + tabular-nums */
  --sans:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',system-ui,sans-serif;
  --num:'IBM Plex Sans',var(--sans);

  /* 타입 스케일 7단 — 반픽셀(12.5·11.5·10.5·9.5) 폐지. 이 일곱 외의 px 는 쓰지 않는다 */
  --fs-label:11px;   /* 마이크로 라벨 · uppercase · 자간 */
  --fs-caption:12px; /* 캡션 · 보조 */
  --fs-body:13px;    /* 본문 · 행 */
  --fs-title:15px;   /* 매장명 · 행 제목 */
  --fs-h2:17px;      /* 섹션 제목 · 시트 제목 */
  --fs-h1:22px;      /* 화면 제목 */
  --fs-display:28px; /* 큰 숫자(엔트리·프라이즈) — 클락 전용 초대형은 clock 이 자체 정의 */
  --lh-tight:1.2; --lh-snug:1.35; --lh-body:1.45;
  --ls-label:.06em;  /* 라틴 uppercase 라벨에만. ⛔ 한글에 넓은 자간 금지(§5-5 ⑤) */
  --ls-tight:-.02em; /* 한글 볼드 */

  /* 간격 4pt · radius 4단 · 컨트롤 높이 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --r-1:4px; --r-2:8px; --r-3:12px; --r-pill:999px;
  --h-ctl:40px; --h-ctl-sm:32px; --h-ctl-lg:48px; --h-row:56px;
  --hair:1px;

  /* 모션 — 150 색·hover / 200 레이아웃. 무한 애니메이션은 라이브 도트 pulse 하나뿐 */
  --dur-1:150ms; --dur-2:200ms; --ease:cubic-bezier(.32,.72,0,1);
  --z-sticky:10; --z-sheet:100; --z-dialog:200; --z-toast:300;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}

/* ── ② 의미 토큰 · 다크(기본) ────────────────────────────────────────────── */
:root{
  /* color-scheme 은 일부러 안 건드린다 — 기존 화면의 네이티브 컨트롤·스크롤바가 바뀐다 */
  --bg:var(--gray-2);          /* 지반 */
  --surface:var(--gray-3);     /* 면 — 카드는 z축이 뜻을 가질 때만(§5-5 ①) */
  --surface-2:var(--gray-4);   /* 패널 · hover */
  --surface-3:var(--gray-5);   /* pressed · 입력칸 */
  --line:var(--gray-6);        /* 헤어라인 */
  --line-2:var(--gray-7);      /* 강조 헤어라인 · 테두리 버튼 */
  --ink:var(--gray-12);        /* 16.4:1 */
  --ink-2:var(--gray-11);      /* 7.3:1 — 읽는 글의 하한 */
  --ink-3:var(--gray-9);       /* 2.9:1 — ⛔ 글자 금지. 구분선·도트·비활성만 */
  /* 색 토큰은 셋씩: 면(fill) · 글자(-ink) · 옅은 배경(-soft). 다크에서는 면=글자, 라이트에서는 글자를 더 어둡게 */
  --accent:var(--red-9);       --accent-ink:var(--red-9);   --accent-soft:rgba(255,75,64,.14);   /* LIVE · 마감 · 선택 탭 · 로고. 면 위주, 글자는 카운트다운만 */
  --money:var(--gold-9);       --money-ink:var(--gold-9);   --money-soft:rgba(215,182,111,.14);
  --ok:var(--green-9);         --ok-ink:var(--green-9);     --ok-soft:rgba(91,192,143,.14);
  --warn:var(--amber-9);       --warn-ink:var(--amber-9);   --warn-soft:rgba(224,168,74,.14);
  --danger:var(--red-9);       --danger-ink:var(--red-9);   --danger-soft:var(--accent-soft);
  --info:var(--blue-9);        --info-ink:var(--blue-9);    --info-soft:rgba(88,163,255,.14);   /* 플로어·어드민만. ⛔ 손님 앱에서 파랑 금지 */
  --primary:var(--white);      /* 행동 = 흰색 fill (넷플릭스 '재생'). 한 화면에 하나 */
  --on-primary:var(--gray-2);
  --on-accent:#FFFFFF;
  --focus:var(--money);
  --scrim:rgba(0,0,0,.62);
  --shadow-1:none;             /* 다크는 그림자 대신 면의 밝기 차 */
  --shadow-2:0 24px 60px -24px rgba(0,0,0,.8);
}

/* ── ② 의미 토큰 · 라이트(파트너 센터) ──────────────────────────────────── */
:root[data-theme="light"]{
  --bg:var(--lgray-3);
  --surface:var(--lgray-1);
  --surface-2:var(--lgray-2);
  --surface-3:var(--lgray-4);
  --line:var(--lgray-5);
  --line-2:var(--lgray-6);
  --ink:var(--lgray-12);
  --ink-2:var(--lgray-10);
  --ink-3:var(--lgray-8);
  /* 라이트에서 색 글자는 작은 글씨 기준 4.5:1 이상이 되도록 한 단 더 어둡게(-ink) */
  --accent:var(--red-10);      --accent-ink:var(--red-11);  --accent-soft:var(--red-3);
  --money:var(--gold-11);      --money-ink:#7A5E1C;         --money-soft:var(--gold-3);
  --ok:var(--green-10);        --ok-ink:var(--green-11);    --ok-soft:var(--green-3);
  --warn:var(--amber-11);      --warn-ink:#8A5A12;          --warn-soft:var(--amber-3);
  --danger:#B42318;            --danger-ink:#B42318;        --danger-soft:#FBECEB;
  --info:var(--blue-11);       --info-ink:var(--blue-11);   --info-soft:var(--blue-3);
  --primary:var(--lgray-12);   /* 라이트에서 행동 = 잉크 fill */
  --on-primary:#FFFFFF;
  --on-accent:#FFFFFF;
  --focus:var(--blue-11);
  --scrim:rgba(23,24,28,.45);
  --shadow-1:0 1px 2px rgba(23,24,28,.05);
  --shadow-2:0 6px 20px -6px rgba(23,24,28,.12);
}

/* ⭐ 고아 단어 방지 — 줄이 바뀔 때 마지막 줄에 한 단어만 남지 않게 (2026-10-03 사장님 "여기저기 이런 경우가 많아").
   다섯 화면이 이 파일을 불러오므로 **여기 한 곳**에서 켠다 — 화면마다 따로 넣지 않는다(§53).
   longhand(text-wrap-style)만 쓴다 — 줄바꿈 여부(nowrap)는 건드리지 않는다. 안 되는 브라우저는 그냥 무시한다.
   ⚠ 괄호 뒤 조사("[재개]를")가 갈라지는 건 이걸로 못 막는다 — 그 자리에 \u2060(단어 결합자)를 넣는다. */
body{text-wrap-style:pretty}

/* ── ③ 컴포넌트 ──────────────────────────────────────────────────────────── */

/* 텍스트 역할 */
.ds-label{font:600 var(--fs-label)/var(--lh-tight) var(--sans);color:var(--ink-2);text-transform:uppercase;letter-spacing:var(--ls-label)}
.ds-label.ko{text-transform:none;letter-spacing:0}          /* 한글 라벨은 자간 없이 */
.ds-caption{font:400 var(--fs-caption)/var(--lh-snug) var(--sans);color:var(--ink-2);word-break:keep-all}
.ds-body{font:400 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink);word-break:keep-all}
.ds-title{font:700 var(--fs-title)/var(--lh-snug) var(--sans);color:var(--ink);letter-spacing:var(--ls-tight)}
.ds-h2{font:700 var(--fs-h2)/var(--lh-tight) var(--sans);color:var(--ink);letter-spacing:var(--ls-tight)}
.ds-h1{font:700 var(--fs-h1)/var(--lh-tight) var(--sans);color:var(--ink);letter-spacing:var(--ls-tight)}
.ds-num{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600}
.ds-num.big{font-size:var(--fs-display);font-weight:700;line-height:1;letter-spacing:-.01em}
.ds-unit{font-size:.7em;font-weight:500;color:var(--ink-2);margin-left:.15em}   /* 만·K·장 — 값의 70% */
.ds-money{color:var(--money-ink)} .ds-ok{color:var(--ok-ink)} .ds-warn{color:var(--warn-ink)} .ds-live{color:var(--accent-ink)}
.ds-keep{word-break:keep-all}                  /* "20장" 처럼 숫자+단위 분리 금지 */
.ds-truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* 섹션 라벨 — 카드가 아니라 '선 위의 라벨'로 묶는다(§5-5 ①) */
.ds-section{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-3);color:var(--ink-2);
  font:600 var(--fs-label)/1 var(--sans);text-transform:uppercase;letter-spacing:var(--ls-label)}
.ds-section.ko{text-transform:none;letter-spacing:0}
.ds-section::before,.ds-section::after{content:"";flex:1;height:var(--hair);background:var(--line)}
.ds-section.left::before{display:none}
.ds-section .n{color:var(--ink-3);font-family:var(--num);font-weight:500}  /* 카운트 "(3)" — 장식이라 ink-3 허용 */

/* 헤어라인 */
.ds-hr{border:0;height:var(--hair);background:var(--line);margin:0}

/* 리스트 행 — FotMob 밀도. 56px · 헤어라인 · 좌측 라이브 인디케이터 */
.ds-row{position:relative;display:flex;align-items:center;gap:var(--sp-3);min-height:var(--h-row);padding:var(--sp-2) var(--sp-4);
  border-bottom:var(--hair) solid var(--line);color:var(--ink);text-decoration:none;
  transition:background var(--dur-1) var(--ease)}
.ds-row:last-child{border-bottom:0}
.ds-row.tap{cursor:pointer}
.ds-row.tap:hover{background:var(--surface-2)}
.ds-row.tap:active{background:var(--surface-3)}
.ds-row.is-live::before{content:"";position:absolute;left:0;top:var(--sp-3);bottom:var(--sp-3);width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.ds-row .main{flex:1;min-width:0}
.ds-row .side{flex:none;text-align:right;font-family:var(--num);font-variant-numeric:tabular-nums}
.ds-row .t{font:600 var(--fs-title)/var(--lh-snug) var(--sans);letter-spacing:var(--ls-tight);color:var(--ink)}
.ds-row .s{font:400 var(--fs-caption)/var(--lh-snug) var(--sans);color:var(--ink-2);margin-top:2px}

/* 태그 · pill — 11px uppercase. live 만 다홍 fill, 나머지 무채색 */
.ds-tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:20px;padding:0 var(--sp-2);border-radius:var(--r-pill);
  font:700 var(--fs-label)/1 var(--sans);letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;
  background:var(--surface-3);color:var(--ink-2)}
.ds-tag.ko{text-transform:none;letter-spacing:0;font-weight:600}
.ds-tag.live{background:var(--accent);color:var(--on-accent)}
.ds-tag.line{background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--line-2)}
.ds-tag.dim{background:transparent;color:var(--ink-2)}
.ds-tag.money{background:var(--money-soft);color:var(--money-ink)}
.ds-tag.ok{background:var(--ok-soft);color:var(--ok-ink)}
.ds-tag.warn{background:var(--warn-soft);color:var(--warn-ink)}

/* 안내 줄 — 화면 안에 붙는 한 줄. **끄지 않고 알려주기만** 한다(확인 창 아님). 색 바탕 = 놓치면 안 되는 것만 (2026-10-03) */
.ds-note{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);
  font:600 var(--fs-title)/var(--lh-snug) var(--sans);color:var(--ink);word-break:keep-all}
.ds-note b{font-weight:800}
.ds-note.warn{background:var(--warn-soft);color:var(--warn-ink)}

/* 라이브 도트 — 유일하게 허용되는 무한 애니메이션 */
.ds-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ink-3);vertical-align:middle}
.ds-dot.live{background:var(--accent);animation:ds-pulse 2s var(--ease) infinite}
.ds-dot.ok{background:var(--ok)}
@keyframes ds-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,75,64,.45)}50%{box-shadow:0 0 0 5px rgba(255,75,64,0)}}

/* 버튼 — 행동 = 한 화면에 primary 하나(흰 fill). 보조는 line/ghost. 위험은 danger */
.ds-btn{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--h-ctl);padding:0 var(--sp-4);border:0;border-radius:var(--r-3);cursor:pointer;user-select:none;white-space:nowrap;
  font:600 var(--fs-body)/1 var(--sans);letter-spacing:var(--ls-tight);color:var(--ink);background:var(--surface-3);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.ds-btn:hover{background:var(--surface-2)}
.ds-btn:active{transform:scale(.99)}
.ds-btn.primary{background:var(--primary);color:var(--on-primary)}
.ds-btn.primary:hover{opacity:.92}
/* 카카오톡으로 보내기·시작하기 — 카카오 브랜드 색(테마와 무관하게 고정). primary 자리를 대신한다(같이 쓰지 않는다) */
.ds-btn.kakao{background:#FEE500;color:#191919}
.ds-btn.kakao:hover{background:#FEE500;opacity:.92}
.ds-btn.kakao svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.ds-btn.line{background:transparent;box-shadow:inset 0 0 0 var(--hair) var(--line-2)}
.ds-btn.line:hover{background:var(--surface-2)}
.ds-btn.ghost{background:transparent;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:0 var(--sp-2)}
.ds-btn.ghost:hover{color:var(--ink);background:transparent}
.ds-btn.danger{background:var(--danger);color:var(--on-accent)}
.ds-btn.sm{height:var(--h-ctl-sm);padding:0 var(--sp-3);font-size:var(--fs-caption);border-radius:var(--r-2)}
.ds-btn.lg{height:var(--h-ctl-lg);font-size:var(--fs-title);border-radius:var(--r-3)}
.ds-btn.block{width:100%}
.ds-btn.icon{width:var(--h-ctl);padding:0}
.ds-btn.icon.sm{width:var(--h-ctl-sm)}
.ds-btn:disabled,.ds-btn[aria-disabled="true"]{color:var(--ink-3);background:var(--surface-2);cursor:not-allowed;transform:none;opacity:1}
.ds-btns{display:flex;gap:var(--sp-2);align-items:center}
.ds-btns.end{justify-content:flex-end}

/* 입력 — 40px · 면은 surface-3 · 포커스는 focus 색 2px */
.ds-input,.ds-select,.ds-textarea{-webkit-appearance:none;appearance:none;width:100%;height:var(--h-ctl);padding:0 var(--sp-3);
  border:var(--hair) solid var(--line-2);border-radius:var(--r-2);background:var(--surface-3);color:var(--ink);
  font:400 var(--fs-body)/1 var(--sans);outline:0;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--ink-3)}
.ds-input:focus,.ds-select:focus,.ds-textarea:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 30%,transparent)}
.ds-input.num{font-family:var(--num);font-variant-numeric:tabular-nums;text-align:right}
.ds-input.invalid{border-color:var(--danger)}
.ds-textarea{height:auto;min-height:88px;padding:var(--sp-2) var(--sp-3);line-height:var(--lh-body);resize:vertical}
.ds-select{padding-right:var(--sp-7);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA2AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-3) center}
.ds-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.ds-field>.ds-label{color:var(--ink-2)}
.ds-field .help{font-size:var(--fs-caption);color:var(--ink-2)}
.ds-field .err{font-size:var(--fs-caption);color:var(--danger-ink)}

/* 토글 */
.ds-toggle{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.ds-toggle input{position:absolute;opacity:0;width:0;height:0}
.ds-toggle .k{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line-2);transition:background var(--dur-1) var(--ease)}
.ds-toggle .k::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform var(--dur-2) var(--ease)}
.ds-toggle input:checked+.k{background:var(--ok)}
.ds-toggle input:checked+.k::after{transform:translateX(18px)}
.ds-toggle input:focus-visible+.k{box-shadow:0 0 0 2px var(--focus)}

/* 스탯 타일 — 라벨(11) 위·숫자 아래. 카드로 감싸지 않고 여백으로 묶는다 */
.ds-stat{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.ds-stat .k{font:600 var(--fs-label)/1 var(--sans);color:var(--ink-2);text-transform:uppercase;letter-spacing:var(--ls-label)}
.ds-stat .k.ko{text-transform:none;letter-spacing:0}
.ds-stat .v{font:700 var(--fs-h1)/1.1 var(--num);font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:-.01em}
.ds-stat .v.big{font-size:var(--fs-display)}
.ds-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--sp-4) var(--sp-4)}

/* 확인 창 — §64-1: 화면 가운데 · 회색 막이 전체를 덮음 · 문구는 누가·무엇을·어디로 한 줄 */
.ds-scrim{position:fixed;inset:0;z-index:var(--z-dialog);background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
/* 크게 보기 — 막 위에 그림 한 장(포스터 등). 화면 안에 다 들어오게 */
.ds-scrim .ds-view{max-width:min(100%,760px);max-height:100%;object-fit:contain;border-radius:var(--r-3);box-shadow:var(--shadow-2);cursor:zoom-out}
.ds-dialog{width:min(100%,360px);background:var(--surface);border-radius:var(--r-3);padding:var(--sp-5);box-shadow:var(--shadow-2)}
.ds-dialog .h{font:700 var(--fs-h2)/var(--lh-tight) var(--sans);color:var(--ink);letter-spacing:var(--ls-tight);margin:0 0 var(--sp-2);word-break:keep-all}
.ds-dialog .p{font:400 var(--fs-body)/var(--lh-body) var(--sans);color:var(--ink-2);margin:0 0 var(--sp-5);word-break:keep-all}
.ds-dialog .ds-btns{justify-content:flex-end}
/* 바텀 시트 — 폰 앱 예외(§64-1). 그 화면의 관례일 때만 */
.ds-sheet-scrim{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--scrim);display:flex;align-items:flex-end}
.ds-sheet{width:100%;max-height:88vh;overflow:auto;background:var(--surface);border-radius:var(--r-3) var(--r-3) 0 0;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-5) + var(--safe-bot));box-shadow:var(--shadow-2)}
.ds-sheet::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto var(--sp-4)}
.ds-sheet .h{font:700 var(--fs-h2)/var(--lh-tight) var(--sans);color:var(--ink);letter-spacing:var(--ls-tight);margin:0 0 var(--sp-3)}

/* 토스트 */
.ds-toast{position:fixed;left:50%;bottom:calc(var(--sp-6) + var(--safe-bot));transform:translateX(-50%);z-index:var(--z-toast);
  max-width:calc(100% - var(--sp-8));padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);background:var(--ink);color:var(--bg);
  font:600 var(--fs-body)/var(--lh-snug) var(--sans);box-shadow:var(--shadow-2);word-break:keep-all;text-align:center}
.ds-toast.ok{background:var(--ok);color:#fff}
.ds-toast.danger{background:var(--danger);color:#fff}

/* 빈 상태 — 빈 화면 금지. 문구 + 다음 행동 */
.ds-empty{padding:var(--sp-8) var(--sp-5);text-align:center;color:var(--ink-2)}
.ds-empty .t{font:600 var(--fs-title)/var(--lh-snug) var(--sans);color:var(--ink);margin-bottom:var(--sp-1)}
.ds-empty .s{font:400 var(--fs-body)/var(--lh-body) var(--sans);word-break:keep-all}
.ds-empty .ds-btn{margin-top:var(--sp-4)}

/* 스켈레톤 — 스피너 대신 레이아웃 유지 */
.ds-skel{position:relative;overflow:hidden;background:var(--line);border-radius:var(--r-1);color:transparent}
.ds-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);animation:ds-shimmer 1.4s infinite}
@keyframes ds-shimmer{to{transform:translateX(100%)}}
/* 기다리는 동안 도는 아이콘 — icon('hourglass',{cls:'ds-spin'}). 기다리는 확인 창 안에서만(스피너만 덩그러니 두지 않는다) */
.ds-spin{animation:ds-spin 1.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* 아이콘 (icons.js 가 만드는 <svg class="ico">) */
.ico{display:inline-block;vertical-align:-.18em;flex:none}
.ds-btn .ico,.ds-row .ico,.ds-tag .ico{vertical-align:0}

/* 포커스(키보드) — 접근성 필수. 마우스 클릭엔 안 뜬다 */
.ds-btn:focus-visible,.ds-row.tap:focus-visible,.ds-tag[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* 모션 존중 */
@media (prefers-reduced-motion:reduce){
  .ds-dot.live{animation:none}
  .ds-skel::after{animation:none}
  .ds-spin{animation:none}
  .ds-btn,.ds-row,.ds-toggle .k,.ds-toggle .k::after,.ds-input,.ds-select,.ds-textarea{transition:none}
}