/* ============================================================================
   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)}

/* 도움말 목록 — 입력 칸 밑의 짧은 규칙 몇 줄. 문단 대신 '아이콘 + 굵은 한 마디 + 예' (2026-10-11 사장님 "구구절절 말고 딱딱").
   한 줄에 한 가지 · 다섯 줄 안쪽. 상자(바탕 · 테두리)를 두르지 않는다 — 칸 밑에 붙는 설명이지 카드가 아니다(§5-5 ①). */
.ds-hints{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.ds-hints li{display:flex;align-items:flex-start;gap:var(--sp-2);font:400 var(--fs-body)/var(--lh-snug) var(--sans);color:var(--ink-2);word-break:keep-all}
.ds-hints li::before{content:"·";flex:0 0 auto;font-weight:700;color:var(--ink-3)}
.ds-hints b{font-weight:700;color:var(--ink)}
.ds-hints li.warn::before,.ds-hints li.warn b{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;text-decoration:none;   /* 링크(<a>)로 만든 버튼에 밑줄이 붙지 않게 — 밑줄은 .ghost 만 */
  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}
}

/* ── 현황 공유 창 (어드민 제어 센터 · admin/share.js · 2026-10-09) ─────────────────────────
   넓은 가운데 창 — 왼쪽 폰(카톡 방에 올라갈 모습) / 가운데 방·때·기록 / 오른쪽 글. 시안 docs/design/status-share/mock.html
   ⚠ 확인 창(.askveil z 120)이 이 위에 떠야 한다 → 막의 z 를 그보다 낮게 둔다. 박스는 창 하나뿐 — 안쪽은 헤어라인으로 묶는다(§5-5 ①) */
.ds-ss-scrim{z-index:110}
.ds-ss{width:min(100%,1200px);max-height:100%;overflow:auto;background:var(--surface);border-radius:var(--r-3);box-shadow:var(--shadow-2);color:var(--ink);font-family:var(--sans)}
.ds-ss *{box-sizing:border-box}
.ds-ss .ico{flex:none}
.ds-ss-hd{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-6) var(--sp-6) var(--sp-4)}
.ds-ss-hd .t{font:800 var(--fs-h1)/var(--lh-tight) var(--sans);letter-spacing:var(--ls-tight)}
.ds-ss-hd .g{margin-top:6px;font-size:var(--fs-body);color:var(--ink-2)}
.ds-ss-hd .how{-webkit-appearance:none;appearance:none;margin-left:var(--sp-2);padding:0;border:0;background:none;font:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ds-ss-hd .how:hover{color:var(--ink)}
.ds-ss-hd .x{margin-left:auto}
.ds-ss-st{display:flex;align-items:center;gap:var(--sp-3);margin:0 var(--sp-6);padding:var(--sp-3) 0;border-top:var(--hair) solid var(--line);border-bottom:var(--hair) solid var(--line);font-size:var(--fs-body)}
.ds-ss-st b{font-weight:700}
.ds-ss-st .sep{color:var(--ink-3)}
.ds-ss-st .next{margin-left:auto;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ds-ss-st .next b{color:var(--ink);font-family:var(--num);font-size:var(--fs-title);margin-left:6px}
.ds-ss-st.bad{border:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-3);background:var(--danger-soft);color:var(--danger-ink)}
.ds-ss-st.bad .do{margin-left:auto;font-weight:700}
.ds-dot.ds-ss-bad{background:var(--danger)}
/* 공유 중의 초록 점은 깜빡인다(2026-10-12 사장님) — '지금 올라가고 있다'는 라이브 표시라 .ds-dot.live 와 같은 박자 */
#ss_btn .ds-dot.ok{animation:ds-pulse-ok 2s var(--ease) infinite}
@keyframes ds-pulse-ok{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 0%,transparent)}}
/* [현황 공유] 버튼의 NEW — 테두리 파란 빛 + 모서리 팻말. 쓰든 안 쓰든 기한(admin/share.js SS_NEW_UNTIL)까지 붙어 있다. 글자 옆 점(공유 중)을 가리지 않는다 */
.tbtn.ds-ss-fresh,.tbtn.ds-ss-fresh:hover{position:relative;overflow:visible;border-color:var(--info);box-shadow:0 0 0 1px var(--info),0 0 14px color-mix(in srgb,var(--info) 50%,transparent)}   /* .tbtn 을 붙여 화면 파일의 기본 테두리보다 세게 */
.ds-ss-fresh .ds-ss-new{position:absolute;top:-9px;right:-12px;height:16px;padding:0 6px;border-radius:var(--r-pill);background:var(--info);color:var(--on-accent);
  font:800 10px/16px var(--sans);letter-spacing:.04em;pointer-events:none}
.ds-ss-bd{display:grid;grid-template-columns:340px 1fr 1fr;gap:var(--sp-7);align-items:start;padding:var(--sp-5) var(--sp-6) var(--sp-6)}
.ds-ss .ds-section{margin:var(--sp-6) 0 var(--sp-3)}
.ds-ss .ds-section:first-child{margin-top:0}
.ds-ss .help{font-size:var(--fs-caption);color:var(--ink-2);margin-top:var(--sp-2);line-height:1.5}
/* 폰 — 카톡 방에 올라간 모습 */
.ds-ss-ph{width:340px;border-radius:44px;background:#16171A;padding:10px;box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.ds-ss-ph .in{border-radius:35px;overflow:hidden;background:#BACEE0;height:600px;display:flex;flex-direction:column;position:relative}
.ds-ss-ph .in::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:92px;height:24px;border-radius:14px;background:#16171A;z-index:2}
.ds-ss-ph .sb{height:42px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 5px;font:600 12px/1 var(--num);color:#1E2A35}
.ds-ss-ph .hd{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 10px;color:#1E2A35}
.ds-ss-ph .hd .nm{font:700 15px/1.2 var(--sans);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-ss-ph .hd .rt{margin-left:auto;display:flex;gap:12px}
.ds-ss-ph .ch{flex:1;overflow:hidden;padding:4px 10px 0;display:flex;flex-direction:column;justify-content:flex-end}
.ds-ss-ph .msg{display:grid;grid-template-columns:36px 1fr;gap:0 8px;margin-bottom:12px}
.ds-ss-ph .av{width:36px;height:36px;border-radius:14px;background:#16171A;color:#fff;display:flex;align-items:center;justify-content:center;font:800 12px/1 var(--sans);overflow:hidden}
.ds-ss-ph .who{font:500 12px/1 var(--sans);color:#3B4A58;margin:1px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-ss-ph .ln{display:flex;align-items:flex-end;gap:5px;margin-bottom:4px}
.ds-ss-ph .ln time{font:400 10px/1 var(--num);color:#5B6B7A;white-space:nowrap;padding-bottom:2px}
/* 사진 자리 = 진짜 클락 화면(1920×1080)을 216px 폭으로 줄여 보여 준다. 눌리지 않게 막는다 */
.ds-ss-ph .shot{width:216px;height:121.5px;border-radius:12px;overflow:hidden;background:#0B0C0F;margin-bottom:4px;position:relative}
.ds-ss-ph .shot iframe{width:1920px;height:1080px;border:0;transform:scale(.1125);transform-origin:0 0;pointer-events:none}
.ds-ss-ph .bb{max-width:216px;background:#fff;border-radius:4px 14px 14px 14px;padding:8px 10px;font:400 13px/1.5 var(--sans);color:#16171A;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.ds-ss-ph .bb.wait{color:#5B6B7A}
.ds-ss-ph .bb a{color:#2A6FDB;text-decoration:underline}
.ds-ss-ph .ip{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 18px;background:#fff;color:#8A8F99}
.ds-ss-ph .ip .box{flex:1;height:34px;border-radius:17px;background:#F1F2F4}
.ds-ss-pv .go{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);width:340px;margin-top:var(--sp-4)}
.ds-ss-pv .go span{text-align:center;font-size:var(--fs-caption);color:var(--ink-2)}
/* 설정 */
.ds-ss-when{display:flex;align-items:center;gap:var(--sp-2)}
.ds-ss-when .ds-select{flex:1}
.ds-ss-when #ss_minw{display:flex;align-items:center;gap:var(--sp-2)}
.ds-ss-when .ds-input{width:72px}
.ds-ss-when .u{font-size:var(--fs-title);white-space:nowrap}
.ds-ss-opt{display:flex;align-items:center;gap:var(--sp-3);min-height:46px;font-size:var(--fs-title)}
.ds-ss-opt .ds-toggle{margin-left:auto}
/* ⭐ 켜고 끈 것이 됐는지 보이게 (2026-10-10 사장님 — "껐다 켰다 해도 이게 된 건지 안 된 건지 모르겠더라고")
   저장 버튼이 없는 창이라 **이 글이 그 버튼 몫**을 한다: 스위치 옆에 지금 상태를 글로(켜짐/꺼짐) · 바꾸면 저장 중 → 저장됐어요.
   색만으로 어느 쪽이 켜진 건지 읽게 하지 않는다. */
.ds-ss-fb{display:inline-flex;align-items:center;gap:var(--sp-1);font:600 var(--fs-caption)/1 var(--sans);color:var(--ink-2);white-space:nowrap}
.ds-ss-fb.on,.ds-ss-fb.ok{color:var(--ok-ink)}
.ds-ss-fb.bad{color:var(--danger-ink)}
.ds-ss-opt .ds-ss-fb{margin-left:auto}
.ds-ss-opt .ds-ss-fb+.ds-toggle{margin-left:0}
.ds-ss-opt+.ds-ss-opt{border-top:var(--hair) solid var(--line)}      /* 스위치가 이어질 때만 사이에 선 */
/* 맨 위 「지금 켜진 것」 — 상태 줄 바로 아래 한 줄. 박스가 아니라 아래 헤어라인(§5-5 ①). **저장된 값**으로 그린다 */
.ds-ss-on{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:0 var(--sp-6);padding:var(--sp-3) 0;border-bottom:var(--hair) solid var(--line);font-size:var(--fs-body)}
.ds-ss-on .lb{color:var(--ink-2);margin-right:var(--sp-1)}
.ds-ss-on .ds-tag{height:24px}
.ds-ss-on .ds-tag.fl{animation:ds-ss-flash 1.4s var(--ease)}         /* 방금 바뀐 것 — 한 번 번쩍 */
.ds-ss-on .ds-ss-fb{margin-left:auto}
@keyframes ds-ss-flash{0%,35%{box-shadow:0 0 0 3px var(--ok)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){.ds-ss-on .ds-tag.fl{animation:none}}
/* 글을 꺼 두면 「올릴 글」 칸은 흐려진다 — 왜 그런지는 그 위 한 줄이 말한다.
   자동 공유를 꺼 두면 「올리는 때」의 고르는 칸(.ds-ss-autow)도 같다 — 고른 것은 남고(다시 켜면 그대로), 까닭은 그 아래 한 줄이 말한다 */
.ds-ss-txw.off,.ds-ss-autow.off{opacity:.45;pointer-events:none}
.ds-ss-tp{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.ds-ss-tp .ds-select{flex:1}
.ds-ss-tp .ds-btn{height:var(--h-ctl)}
.ds-ss-seg{display:flex;gap:var(--sp-5);margin:var(--sp-3) 0 var(--sp-2);border-bottom:var(--hair) solid var(--line)}
.ds-ss-seg span{padding:0 0 9px;font:600 var(--fs-body)/1 var(--sans);color:var(--ink-2);cursor:pointer;margin-bottom:-1px}
.ds-ss-seg span.on{color:var(--ink);font-weight:700;border-bottom:2px solid var(--ink)}
.ds-ss .ds-textarea{resize:none;min-height:132px}
.ds-ss-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2)}
.ds-ss-chips .ds-tag{cursor:pointer;height:24px}
.ds-ss-lg{display:grid;grid-template-columns:48px 1fr auto;gap:0 var(--sp-3);font-size:var(--fs-body)}
.ds-ss-lg>div{padding:9px 0;border-bottom:var(--hair) solid var(--line)}
.ds-ss-lg .tm{font-family:var(--num);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ds-ss-lg .why{display:block;margin-top:3px;font-size:var(--fs-caption);color:var(--danger-ink)}
.ds-ss-ok{color:var(--ok-ink);font-weight:600}
.ds-ss-no{color:var(--danger-ink);font-weight:600}
.ds-ss-wait{color:var(--ink-2);font-weight:600}
/* 처음 준비 */
.ds-ss-setup{padding:0 var(--sp-6)}
.ds-ss-setup .step{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:var(--hair) solid var(--line)}
.ds-ss-setup .step:last-child{border-bottom:0}
.ds-ss-setup .n{font:700 var(--fs-h2)/1 var(--num);color:var(--ink-2);width:20px}
.ds-ss-setup .t{font:700 var(--fs-title)/1.3 var(--sans)}
.ds-ss-setup .s{font-size:var(--fs-caption);color:var(--ink-2);margin-top:4px}
.ds-ss-setup .r{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}   /* 코드 · 버튼은 접히지 않는다 — 좁으면 왼쪽 설명 글이 줄을 바꾼다 */
.ds-ss-setup .code{font:700 18px/1 var(--num);letter-spacing:.08em;white-space:nowrap}
@media(max-width:1100px){.ds-ss-bd{grid-template-columns:340px 1fr}.ds-ss-bd>#ss_right{grid-column:2}}

/* ── 신규 기능 안내 창 (파트너 센터 · admin/news.js · 2026-10-11) ─────────────────────────
   매장이 로그인하면 가운데 뜨는 창 — 왼쪽은 화면 사진, 오른쪽은 제목 한 줄 + 설명 + 넘기기.
   사진은 자기 면을 가진 것이라 감싸지 않는다(§5-5 ①) — 창의 왼쪽 면을 통째로 쓴다. 누르는 버튼은 하나([다음] → [확인했어요]).
   창의 높이는 사진이 정한다(10:9) → 장을 넘겨도 창이 들썩이지 않는다. 키가 작은 화면에서는 창이 그 비율대로 줄어든다. 좁으면 위아래로 선다 */
.ds-news{position:relative;display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto minmax(0,1fr);width:min(1000px,100%,calc((100vh - 2*var(--sp-5) - 52px)*1000/540));max-height:100%;overflow:hidden;
  background:var(--surface);border-radius:var(--r-3);color:var(--ink);font-family:var(--sans);text-align:left;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--info) 55%,var(--ink)),0 0 28px color-mix(in srgb,var(--info) 28%,transparent),var(--shadow-2)}   /* 파란 테두리 빛 — [현황 공유] 버튼의 NEW 와 같은 색(같은 것을 가리킨다) */
.ds-news *{box-sizing:border-box}
/* 머리띠 — 창 전체 위에 한 줄(무슨 창인지 · 어느 기능인지 · 닫기). 글 칸 안의 작은 꼬리표로 두면 안 읽힌다(2026-10-12 사장님) */
.ds-news .hd{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp-3);height:52px;padding:0 var(--sp-3) 0 var(--sp-6);background:var(--nw-navy);color:var(--on-accent)}   /* 짙은 네이비 — 생파랑은 너무 짙고 밝았다(2026-10-12 사장님 "짙은 네이비 … 버튼들도 같은 네이비로") */
.ds-news{--nw-navy:color-mix(in srgb,var(--info) 34%,#17181C)}
.ds-news .ds-btn.primary,.ds-news .ds-btn.primary:hover{background:var(--nw-navy);color:var(--on-accent)}
.ds-news .hd .nw{padding:0 7px;border-radius:var(--r-pill);background:var(--on-accent);color:var(--nw-navy);font:800 11px/18px var(--sans);font-style:normal;letter-spacing:.04em}
.ds-news .hd b{font:800 var(--fs-title)/1 var(--sans);letter-spacing:var(--ls-tight)}
.ds-news .hd span{padding-left:var(--sp-3);border-left:var(--hair) solid currentColor;font:600 var(--fs-title)/1 var(--sans);opacity:.85}   /* 기능 이름 — 매장이 찾을 버튼의 이름과 같은 글자다 */
.ds-news .hd .x,.ds-news .hd .x:hover{margin-left:auto;color:inherit;background:transparent}
.ds-news .pic{aspect-ratio:10/9;min-height:0;background:var(--surface-3)}
.ds-news .pic img{display:block;width:100%;height:100%;object-fit:cover}
.ds-news .tx{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:auto;padding:var(--sp-7) var(--sp-7) var(--sp-6)}
.ds-news .h{font:800 var(--fs-h1)/1.3 var(--sans);letter-spacing:var(--ls-tight);word-break:keep-all;text-wrap:balance}
.ds-news .p{margin-top:var(--sp-3);font:400 var(--fs-title)/1.6 var(--sans);color:var(--ink-2);word-break:keep-all}
.ds-news .p b{font-weight:700;color:var(--ink)}
.ds-news .n{display:flex;gap:6px;margin-top:var(--sp-4);font:500 var(--fs-body)/1.5 var(--sans);color:var(--ink-2);word-break:keep-all}
.ds-news .n .ico{flex:none;margin-top:3px}
.ds-news .dl{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);margin-top:var(--sp-4);font:400 var(--fs-body)/1.5 var(--sans);color:var(--ink-2);word-break:keep-all}
.ds-news .dl a{text-decoration:none}
.ds-news .ft{margin-top:auto;padding-top:var(--sp-5)}
.ds-news .dots{display:flex;gap:6px;margin-bottom:var(--sp-4)}
.ds-news .dots i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--line-2)}
.ds-news .dots i.on{width:18px;background:var(--ink)}
.ds-news .ds-btns{justify-content:flex-end}
.ds-news .never{margin-right:auto;padding-left:0}
@media(max-width:860px){
  .ds-news{grid-template-columns:1fr;grid-template-rows:auto;width:min(480px,100%);overflow:auto}
  .ds-news .hd{position:sticky;top:0;z-index:1;padding-left:var(--sp-5)}
  .ds-news .tx{overflow:visible;padding:var(--sp-5)}
}