/* ============================================================
   단골벨(Dangolbell) 디자인 시스템 — 토큰 + 베이스
   Claude Design(claude.ai/design)의 confirmed 토큰을 이식.
   Primary BLUE #1E6BFF + point BELL YELLOW #FFC61A, cool neutrals.
   50~70대 사장님 가독성 기준: 본문 17px, 큰 터치 타깃, 높은 대비.
   ============================================================ */

/* ---- 폰트: Pretendard (한국어 가독성). 오프라인/운영 시 self-host 권장 ---- */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* ===== 색 ===== */
  /* 브랜드 · 블루 (confirmed primary #1E6BFF) */
  --brand-50:  #eaf1fe;
  --brand-100: #d5e4fd;
  --brand-500: #1E6BFF;
  --brand-600: #1554CC;
  --brand-700: #10409c;
  /* 포인트 · 벨 옐로우 (로고/강조) */
  --bell:     #FFC61A;
  --bell-600: #8a6100;
  /* 성공 · 초록 */
  --green-50:  #e7f4ed;
  --green-100: #c9e7d5;
  --green-600: #0B8A4B;
  --green-700: #086b3a;
  /* 경고 · 앰버 */
  --amber-50:  #fbf0e2;
  --amber-100: #f5dcb8;
  --amber-600: #B45309;
  --amber-700: #8a3f06;
  /* 위험 · 빨강 */
  --red-50:    #fbeaea;
  --red-100:   #f5cfcf;
  --red-600:   #D14343;
  --red-700:   #a83232;
  /* 강조 · 골드 (재방문/휴면 — 벨 계열) */
  --rose-50:   #fff6da;
  --rose-100:  #ffe9a8;
  --rose-600:  #8a6100;
  --rose-700:  #6d4c00;
  /* 정보 · 슬레이트 (채널/메타 칩 전용) */
  --sky-50:    #eef2f6;
  --sky-700:   #415a72;
  /* 뉴트럴 · 쿨 그레이 */
  --ink-950: #0F1115;
  --ink-900: #111827;
  --ink-700: #374151;
  --ink-600: #4B5563;
  --ink-500: #6B7280;   /* muted 텍스트용 — 흰 배경 대비 ~4.8:1 (WCAG AA). 60대 가독성 */
  --ink-400: #9CA3AF;   /* 플레이스홀더·아이콘·테두리 등 비본문 subtle 요소 전용 */
  --line:      #E5E7EB;
  --line-soft: #EEF1F4;
  --surface:        #ffffff;
  --surface-sunken: #F7F8FA;
  --bg:             #F7F8FA;
  --white:          #ffffff;

  /* ===== 시맨틱 별칭 ===== */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-brand:     var(--brand-600);
  --text-on-brand:  #ffffff;
  --text-on-dark:   #ffffff;

  --surface-page:   var(--bg);
  --surface-card:   var(--surface);
  --surface-inset:  var(--surface-sunken);
  --surface-dark:   var(--ink-950);

  --border-default: var(--line);
  --border-soft:    var(--line-soft);
  --border-strong:  #D1D5DB;
  --border-focus:   var(--brand-500);

  --action-primary:        var(--brand-500);
  --action-primary-hover:  var(--brand-600);
  --action-primary-text:   #ffffff;
  --action-dark:           var(--ink-900);
  --action-dark-hover:     #1f2937;

  --brand-fg:   var(--brand-600); --brand-bg:   var(--brand-50);
  --success-fg: var(--green-600); --success-bg: var(--green-50);
  --warning-fg: var(--amber-600); --warning-bg: var(--amber-50);
  --danger-fg:  var(--red-600);   --danger-bg:  var(--red-50);
  --accent-fg:  var(--rose-600);  --accent-bg:  var(--rose-50);
  --info-fg:    var(--sky-700);   --info-bg:    var(--sky-50);
  --neutral-fg: var(--ink-600);   --neutral-bg: #F3F4F6;
  --dark-fg:    #9ec2ff;          --dark-bg:    var(--ink-950);

  /* ===== 타이포 (Pretendard, 본문 17px/500) ===== */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --fs: 1;                              /* 글자 크기 배율(설정에서 작게/보통/크게). 전 텍스트 토큰에 곱해짐 */
  --text-xs:   calc(13px * var(--fs));
  --text-sm:   calc(15px * var(--fs));
  --text-base: calc(17px * var(--fs));
  --text-md:   calc(19px * var(--fs));
  --text-lg:   calc(21px * var(--fs));
  --text-xl:   calc(24px * var(--fs));
  --text-2xl:  calc(30px * var(--fs));
  --stat-md:   calc(34px * var(--fs));
  --stat-lg:   46px;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --leading-number: 1.05;
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --tracking-tight:  -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:    0.01em;

  /* ===== 간격 (4px 그리드, 여백 넉넉히) ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --gap-card:    16px;
  --pad-card:    20px;
  --pad-screen:  16px;
  --content-max: 640px;
  --touch-min:  48px;
  --control-h:  56px;
  --control-h-sm: 48px;
  --row-min:    64px;
  --appbar-h:   56px;
  --tabbar-h:   72px;

  /* ===== 라운드 ===== */
  --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px;

  /* ===== 그림자 ===== */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08), 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
  --shadow-lg: 0 14px 36px rgba(17, 24, 39, 0.16), 0 4px 10px rgba(17, 24, 39, 0.06);
  --shadow-nav: 0 -2px 14px rgba(17, 24, 39, 0.07);
  --focus-ring: 0 0 0 4px rgba(30, 107, 255, 0.20);
}

/* ---- 베이스 ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;        /* 한국어: 단어(띄어쓰기) 단위로만 줄바꿈 — '보냅니\n다' 같은 단어중간 분리 방지 */
  overflow-wrap: break-word;   /* 단, 한 토큰이 너무 길면(URL·긴번호) 넘치지 않게 분리 */
}
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
::selection { background: var(--brand-100); color: var(--ink-900); }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}