/* 몬스터 테마: 검정 헤더 + 순수 빨강(#ff0000) 포인트.
   버튼·링크처럼 흰 글자를 올리는 곳은 대비 4.5:1 을 넘기려고 조금 깊은 빨강(#d90012)을 쓰고, 순수 빨강은 로고·N 배지 같은 강조에만 쓴다.
   대표색이 빨강이라 오류 표시(--err)는 주황 계열로 따로 둬서 "강조"와 "문제"가 헷갈리지 않게 한다.
   다크 모드는 솔루션과 같이 화면의 라이트/다크 버튼(data-theme="dark")으로만 바뀐다.
   솔루션 style.css 의 변수(토큰)만 바꾸는 것을 원칙으로 하고, 헤더·홈 상단만 어두운 토큰을 그 영역에 한정해 덮는다. */
:root {
  --paper: #f7f5f5;
  --surface: #ffffff;
  --surface-2: #f3eeee;
  --line: #e9e1e1;
  --line-strong: #d5c8c9;
  --ink: #171113;
  --ink-2: #44393c;
  --ink-3: #6f6366;
  --accent: #d90012;
  --accent-hover: #b0000e;
  --accent-ink: #ffffff;
  --accent-soft: #fde9eb;
  --ok: #0f7a4f;
  --ok-soft: #e3f4ec;
  --warn: #9a5b00;
  --warn-soft: #fdf1da;
  --err: #c2410c;
  --err-soft: #fdeee4;
  --focus: 0 0 0 3px rgba(217, 0, 18, .26);
  --brand-red: #ff0000;
  --dark-band: #151113;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e0b0c;
  --surface: #171214;
  --surface-2: #211a1c;
  --line: #2e2527;
  --line-strong: #44383b;
  --ink: #f4eeee;
  --ink-2: #cbbfc1;
  --ink-3: #9b8e91;
  --accent: #ff4d5a;
  --accent-hover: #ff7883;
  --accent-ink: #1a0003;
  --accent-soft: #3a1016;
  --ok: #3ddc97;
  --ok-soft: #0f2b22;
  --warn: #f0b44c;
  --warn-soft: #2d2410;
  --err: #ff9b5e;
  --err-soft: #33200f;
  --focus: 0 0 0 3px rgba(255, 77, 90, .38);
  --dark-band: #0a0708;
}

/* 헤더와 홈 상단: 라이트·다크 모두 검정 띠. 그 영역 안의 토큰만 어두운 값으로 바꾼다 (모바일 펼침 메뉴도 같이 어두워진다) */
.top, .hero {
  --paper: var(--dark-band);
  --surface: #1e181a;
  --surface-2: #2a2224;
  --line: #322a2c;
  --line-strong: #4a3f42;
  --ink: #f6f0f0;
  --ink-2: #d2c6c8;
  --ink-3: #a3969a;
  --accent: #e8000f;          /* 흰 글자를 올려도 4.5:1 을 넘는 빨강 */
  --accent-hover: #ff1626;
  --accent-ink: #ffffff;
  --accent-soft: #3a1016;
  --accent-text: #ff3a48;     /* 검정 바탕 위 글자용 빨강 */
  color: var(--ink);
}
.hero h1 em, .hero .eyebrow, .hero .proof svg { color: var(--accent-text); }
.top { background: var(--dark-band); border-bottom-color: #000; backdrop-filter: none; }
.hero { background: var(--dark-band); border-bottom: 3px solid var(--brand-red); }
.hero + .section { padding-top: clamp(28px, 5vw, 56px); }
.hero .lead { color: var(--ink-2); }

/* 로고 이름 옆 포인트, N 배지는 순수 빨강 */
.logo { letter-spacing: -.04em; }
.nbadge { background: var(--brand-red); color: #fff; }
.eyebrow { color: var(--accent); }

/* 홈 첫 화면 오른쪽: 출처별 업체 수 현황판 (몬스터 홈 전용 views/home.php) */
.mx-board { display: grid; gap: 18px; padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.mx-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mx-k { flex-basis: 100%; font-size: var(--fs-sm); color: var(--ink-3); }
.mx-n { font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.75rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--accent-text, var(--accent)); font-variant-numeric: tabular-nums; }
.mx-u { font-size: var(--fs-lg); color: var(--ink-2); font-weight: 600; }
.mx-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mx-rows a { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; grid-template-areas: "l bar c" ". d d"; gap: 2px 12px; align-items: center; padding: 8px 6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.mx-rows a:hover { background: var(--surface-2); text-decoration: none; }
.mx-l { grid-area: l; font-weight: 650; }
.mx-bar { grid-area: bar; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mx-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mx-c { grid-area: c; font-variant-numeric: tabular-nums; font-size: var(--fs-lg); }
.mx-d { grid-area: d; font-size: var(--fs-xs); color: var(--ink-3); }

/* 업체 목록: 엑셀 시트 모양 (variants.list = sheet) — 열 문자 줄·행 번호·격자선. 휴대폰 카드 모양에서는 숨긴다 */
.lv-sheet .tablewrap { border-radius: 6px; }
.lv-sheet table { border-collapse: collapse; }
.lv-sheet th, .lv-sheet td { border: 1px solid var(--line); }
.lv-sheet .sh-cols { counter-reset: shcol; }
.lv-sheet .sh-cols th:not(.sh-rn)::before { counter-increment: shcol; content: counter(shcol, upper-alpha); }
.lv-sheet .sh-cols th { height: 24px; padding: 2px 8px; background: var(--surface-2); color: var(--ink-3); font: 500 var(--fs-xs)/1 var(--mono); text-align: center; letter-spacing: 0; }
.lv-sheet th.sh-rn { width: 1%; min-width: 40px; padding: 0 8px; background: var(--surface-2); color: var(--ink-3); font: 500 var(--fs-xs)/1 var(--mono); text-align: center; position: sticky; left: 0; z-index: 1; }
.lv-sheet thead tr:last-child th { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--ink); font-weight: 700; }
.lv-sheet thead tr:last-child th.sh-rn { background: var(--surface-2); color: var(--ink-3); font-weight: 500; }
.lv-sheet tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.lv-sheet tbody tr:hover th.sh-rn { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .lv-sheet .sh-cols, .lv-sheet th.sh-rn { display: none; } .lv-sheet th, .lv-sheet td { border: 0; } }

/* 홈 엑셀 창 예시: 엑셀 초록 대신 몬스터 검정·빨강 (첫 화면 검정 띠 안) */
.xs-app { border-color: #3a2c2f; }
.xs-app .xs-titlebar { background: #0c090a; }
.xs-app .xs-dots i:nth-child(1) { background: var(--brand-red); }
.xs-app .xs-ribbon { background: #1a1315; }
.xs-app .xs-ribbon span.on { color: var(--accent-text, var(--accent)); }
.xs-app .hx-grid td.xs-sel { outline-color: var(--brand-red); background: color-mix(in srgb, var(--brand-red) 14%, var(--surface)); }
.xs-app .hx-grid thead th:nth-child(2), .xs-app .hx-grid tr.hd th { background: color-mix(in srgb, var(--brand-red) 22%, var(--surface-2)); color: var(--accent-text, var(--accent)); }
.xs-app .xs-tabs span.on { color: var(--accent-text, var(--accent)); border-bottom-color: var(--brand-red); }
.hero .hero-sheet .hx-sheet { box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }


/* 주문내역: 제목 앞 빨간 막대, 전표 확인 정보는 이용권 ③주문 확인과 같은 표 칸 */
.od-head h1 { padding-left: 12px; border-left: 4px solid var(--accent); line-height: 1.15; }
.od-no { padding-left: 16px; }
.od-view .panel { border-radius: var(--r-md); }
.od-auth { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); }
.od-auth div { border-radius: 0; background: var(--surface); box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }

/* 다크 모드에서도 엑셀 창 예시의 글씨는 빨강 그대로 (기본 다크 규칙은 엑셀 초록으로 바꾼다) */
:root[data-theme="dark"] .xs-app .xs-ribbon span.on,
:root[data-theme="dark"] .xs-app .hx-grid thead th:nth-child(2),
:root[data-theme="dark"] .xs-app .hx-grid tr.hd th,
:root[data-theme="dark"] .xs-app .xs-tabs span.on { color: var(--accent-text, var(--accent)); }