/*
 * 공용 화면 스타일(UX 단계 U0 "기반", 방향 "그래파이트 원장" — .omc 연구 E-ux 제안 §7).
 * 빌드 없이 이 파일 하나를 씁니다(D-UX-7). 레이아웃은 `partials/ui-head` 로 이 파일과 Pretendard 글꼴 선언을 연결합니다.
 *
 * 구성
 *   1. 글꼴(D2Coding) — Pretendard 는 `/fonts/pretendard/pretendardvariable-dynamic-subset.css`(원본 그대로)에서 선언합니다.
 *   2. 토큰(라이트) · 다크 토큰
 *   3. 옛 변수 이름 호환(--fg·--muted·--accent 등). 화면별 <style> 이 이 이름을 쓰므로 U1 에서 바꿀 때까지 남깁니다.
 *   4. 공통 기초(서체·숫자·포커스·움직임 줄이기), 4-2. 공용 컴포넌트(U1: x-money·x-status·x-toast·x-table·x-confirm·x-drawer),
 *      4-3. 셸(U2: 왼쪽 레일·범위 막대·빠른 찾기, 협력사·관리자)
 *   5. 화면 영역별 규칙. 영역은 <html data-ui="partner|admin|rider|legal|host|auth"> 로 구분합니다.
 *
 * 우선순위 규칙: 영역 구분은 언제나 `:where(...)` 로 감싸 특이도를 0 으로 둡니다. 그래서 이 파일의 규칙은 예전 레이아웃
 * 인라인 <style> 과 특이도가 같고, 각 화면이 나중에 선언한 <style>(같은 특이도)이 지금처럼 이깁니다.
 *
 * 다크 테마: `[data-theme=dark]` 는 모든 영역에서 켭니다. 기기 설정(`prefers-color-scheme`)을 자동으로 따르는 것은 예전에도
 * 다크를 지원하던 라이더 앱·약관 화면만입니다. 협력사·관리자 화면은 U1 에서 화면별 색을 모두 토큰으로 바꿨고, 머리 띠의
 * 테마 단추로 직원이 고를 때만 어두운 화면이 됩니다(기본은 밝은 화면, 선택은 브라우저에 기억 — public/js/app-ui.js).
 */

/* ── 1. 글꼴 ───────────────────────────────────────────────────────── */
/* D2Coding 1.3.2 한글 서브셋(npm d2coding@1.3.2, SIL OFL 1.1 — /fonts/d2coding/OFL.txt). 코드·번호·해시에만 씁니다. */
@font-face {
    font-family: "D2Coding";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("D2Coding"), url("/fonts/d2coding/d2coding-subset.woff2") format("woff2");
}
@font-face {
    font-family: "D2Coding";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("D2Coding Bold"), url("/fonts/d2coding/d2coding-bold-subset.woff2") format("woff2");
}

/* ── 2. 토큰 ───────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* 면 */
    --canvas: #EEF0F3;
    --surface: #FFFFFF;
    --surface-2: #F6F7F9;
    --rail: #14171C;
    --rail-2: #1D2128;
    --rail-3: #262B34;            /* 레일의 지금 메뉴 */
    --rail-ink: #C3CAD4;

    /* 글자·선 */
    --ink: #12151A;
    --ink-2: #4B5463;
    --ink-3: #8A93A3;
    --line: #DCE0E6;
    --line-2: #E8EBEF;

    /* 강조·상태 */
    --primary: #2448D8;
    --primary-2: #1B39B3;
    --on-primary: #FFFFFF;
    --signal: #C6F135;            /* 지금 단계·진행. 글자색으로 쓰지 않고 면·점에만 씁니다. */
    --neg: #C8322B;               /* 음수 금액 */
    --pos: #0E7A4F;               /* 입금 완료·해소 */
    --pos-bg: #E3F5EC;
    --warn: #9A5B00;
    --warn-bg: #FFF3D6;
    --block: #B42318;             /* 확정 막힘·위험 */
    --block-bg: #FDECEA;
    --sandbox: #B42318;           /* 출시 전 표시 띠. 흰 글자와 대비를 지키려고 다크에서도 바꾸지 않습니다. */
    --info-bg: #E8EDFF;
    --on-block: #FFFFFF;          /* 위험(빨강) 채움 단추의 글자 */
    --caution: #B45309;           /* 가상 로그인 띠·대기 배지(호박색 채움 + 흰 글자). 다크에서도 그대로 둡니다. */
    --on-caution: #FFFFFF;
    --tag-bg: #EDE9FE;            /* 대표 등 역할 꼬리표 */
    --tag-ink: #5B21B6;
    --plat-bm-bg: #D7F5EF;
    --plat-bm-ink: #0A6B5C;
    --plat-cp-bg: #FDE3E1;
    --plat-cp-ink: #A3271F;
    --chart-bar: #9DB1F5;

    --focus: 0 0 0 3px rgba(36, 72, 216, .32);
    --focus-ring: #2448D8;
    --shadow: 0 1px 2px rgba(18, 21, 26, .06), 0 4px 16px rgba(18, 21, 26, .06);

    /* 간격 4·8·12·16·24·32·48 */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;

    /* 반경: 입력 6 · 카드 10 · 칩 999 */
    --r-input: 6px;
    --r-card: 10px;
    --r-chip: 999px;

    /* 글자 크기(본문 14), 행간 1.5 */
    --t-xs: 12px;
    --t-sm: 13px;
    --t-md: 14px;
    --t-lg: 16px;
    --t-xl: 20px;
    --t-2xl: 28px;
    --lh: 1.5;

    --sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
    --mono: D2Coding, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 다크 토큰 — 명시 선택. */
:root[data-theme=dark] {
    color-scheme: dark;
    --canvas: #0D1015;
    --surface: #161A21;
    --surface-2: #1C212A;
    --rail: #0A0C10;
    --rail-2: #151920;
    --rail-3: #1E232C;
    --rail-ink: #A3ACBA;
    --ink: #E8EBF0;
    --ink-2: #A3ACBA;
    --ink-3: #6B7484;
    --line: #2A303B;
    --line-2: #222731;
    --primary: #6F8BFF;
    --primary-2: #8FA5FF;
    --on-primary: #0A0E1A;
    --neg: #FF7A70;
    --pos: #4FD39A;
    --pos-bg: #12291F;
    --warn: #FFC56B;
    --warn-bg: #2E2410;
    --block: #FF8A80;
    --block-bg: #341614;
    --info-bg: #1A2140;
    --on-block: #1A0B0A;
    --tag-bg: #2A1F4A;
    --tag-ink: #C4B5FD;
    --plat-bm-bg: #0F2E2A;
    --plat-bm-ink: #62D6C2;
    --plat-cp-bg: #3A1715;
    --plat-cp-ink: #FF948B;
    --chart-bar: #3550C8;
    --focus: 0 0 0 3px rgba(111, 139, 255, .4);
    --focus-ring: #6F8BFF;
    --shadow: none;
}

/* 다크 토큰 — 기기 설정을 따르는 영역(라이더 앱·약관). 값은 위 명시 선택과 같습니다. */
@media (prefers-color-scheme: dark) {
    :root:is([data-ui=rider], [data-ui=legal]):not([data-theme=light]) {
        color-scheme: dark;
        --canvas: #0D1015;
        --surface: #161A21;
        --surface-2: #1C212A;
        --rail: #0A0C10;
        --rail-2: #151920;
        --rail-3: #1E232C;
        --rail-ink: #A3ACBA;
        --ink: #E8EBF0;
        --ink-2: #A3ACBA;
        --ink-3: #6B7484;
        --line: #2A303B;
        --line-2: #222731;
        --primary: #6F8BFF;
        --primary-2: #8FA5FF;
        --on-primary: #0A0E1A;
        --neg: #FF7A70;
        --pos: #4FD39A;
        --pos-bg: #12291F;
        --warn: #FFC56B;
        --warn-bg: #2E2410;
        --block: #FF8A80;
        --block-bg: #341614;
        --info-bg: #1A2140;
        --on-block: #1A0B0A;
        --tag-bg: #2A1F4A;
        --tag-ink: #C4B5FD;
        --plat-bm-bg: #0F2E2A;
        --plat-bm-ink: #62D6C2;
        --plat-cp-bg: #3A1715;
        --plat-cp-ink: #FF948B;
        --chart-bar: #3550C8;
        --focus: 0 0 0 3px rgba(111, 139, 255, .4);
        --focus-ring: #6F8BFF;
        --shadow: none;
    }
}

/* ── 3. 옛 변수 이름 호환 ─────────────────────────────────────────── */
/* 같은 요소(:root)에서 선언하므로 다크 토큰으로 바뀌면 호환 이름도 함께 바뀝니다. */
:root {
    --fg: var(--ink);
    --muted: var(--ink-2);
    --bg: var(--surface);
    --card: var(--surface);
    --soft: var(--surface-2);
    --accent: var(--primary);
    --ok: var(--pos);
    --danger: var(--block);
    --warnbg: var(--warn-bg);
    --bar: var(--chart-bar);
    /* 약관(legal) 화면 이름 */
    --tx: var(--ink);
    --mut: var(--ink-2);
    --pri: var(--primary);
    --th: var(--surface-2);
}
/* 라이더 앱은 바탕이 회색이고 카드가 흰색입니다(예전과 같은 구성). */
:root[data-ui=rider] { --bg: var(--canvas); }
:root[data-ui=legal] { --bg: var(--canvas); }

/* ── 4. 공통 기초 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
code, kbd, samp, pre, .mono { font-family: var(--mono); }
/* 금액·건수·비율: 자릿수 폭을 맞춥니다(제안 §5). */
td, th, .num, .money, output, input[inputmode=numeric], input[type=number] { font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.neg-amount { color: var(--neg); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.visually-hidden, .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── 4-2. 공용 컴포넌트(UX U1 — resources/views/components) ───────────────── */
/* x-money: 숫자 폭 맞춤은 위 .money 규칙, 음수 빨강은 .neg-amount. 0 대신 쓴 "—" 는 흐리게. */
.money, .num-v { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* x-num: 건수·인원 등 금액 아닌 숫자. 색·부호 처리 없이 숫자 폭만 맞춥니다. */
.money.zero { color: var(--ink-3); }
/* 숫자 칸: 금액 하나만 든 칸은 어느 영역에서나 오른쪽 정렬(제안 §5). */
:where(td, th):has(> :is(.money, .num-v):only-child), :where(td, th):has(> :is(strong, b):only-child > :is(.money, .num-v):only-child) { text-align: right; }

/* x-status: 톤 하나 = 글자색·바탕색·모양 기호. 색만으로 구분하지 않도록 기호를 붙입니다(●막힘 ▲확인 ○참고 ✓완료). */
.ui-status { display: inline-block; padding: .1rem .5rem; border-radius: var(--r-chip); font-size: var(--t-xs); line-height: 1.5; white-space: nowrap; background: var(--surface-2); color: var(--ink-2); }
.ui-status::before { margin-right: .25rem; font-size: .85em; }
.ui-status--block { background: var(--block-bg); color: var(--block); }
.ui-status--block::before { content: "●"; }
.ui-status--warn { background: var(--warn-bg); color: var(--warn); }
.ui-status--warn::before { content: "▲"; }
.ui-status--pos { background: var(--pos-bg); color: var(--pos); }
.ui-status--pos::before { content: "✓"; }
.ui-status--info { background: var(--info-bg); color: var(--primary); }
.ui-status--info::before { content: "○"; }
.ui-status--muted { background: var(--surface-2); color: var(--ink-3); }

/* x-toast: 처리 결과 알림. 화면별 class(ok-msg·pr-ok·err-msg 등)가 있으면 그 모양이 이깁니다(같은 특이도, 나중 선언). */
.ui-toast { position: relative; padding: .5rem 2rem .5rem .75rem; border-radius: var(--r-input); margin: .5rem 0; }
.ui-toast--ok { background: var(--pos-bg); color: var(--pos); }
.ui-toast--error { background: var(--block-bg); color: var(--block); }
.ui-toast--info { background: var(--info-bg); color: var(--ink); }
.ui-toast__close { position: absolute; top: .2rem; right: .3rem; border: 0 !important; background: transparent !important; color: inherit !important; font-size: 1.1rem; line-height: 1; padding: .2rem .4rem !important; cursor: pointer; opacity: .7; }
.ui-toast__close:hover { opacity: 1; }

/* x-table: 긴 표는 상자 안에서 세로로도 밀리고 머리글·합계 행이 위에 붙습니다(제안 §5 고정). */
.ui-table--sticky { max-height: min(78vh, 60rem); overflow: auto; }
.ui-table--sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); }
.ui-table--sticky thead tr.sum th, .ui-table--sticky thead tr.sum td { top: 2.1rem; }
.ui-empty { margin: .5rem 0; }

/* x-confirm: <dialog> 확인창(제안 §6). 빨강 채움은 R3 최종 단추에만 씁니다. */
.ui-confirm { max-width: min(32rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font: var(--t-md)/var(--lh) var(--sans); }
.ui-confirm::backdrop { background: rgba(10, 12, 16, .45); }
.ui-confirm__title { margin: 0 0 var(--s3); font-size: var(--t-lg); }
.ui-confirm__body { margin: 0 0 var(--s4); white-space: pre-line; }
.ui-confirm__check { display: flex; gap: .4rem; align-items: center; margin: 0 0 var(--s3); }
.ui-confirm__type { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 var(--s4); }
.ui-confirm__type input { font: inherit; font-family: var(--mono); padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); color: var(--ink); }
.ui-confirm__actions { display: flex; gap: var(--s2); justify-content: flex-end; }
.ui-confirm__actions button { font: inherit; padding: .4rem .9rem; border-radius: var(--r-input); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.ui-confirm__ok { border-color: var(--primary) !important; background: var(--primary) !important; color: var(--on-primary) !important; }
.ui-confirm--r3 .ui-confirm__ok { border-color: var(--block) !important; background: var(--block) !important; color: var(--on-block) !important; }
.ui-confirm--r3 .ui-confirm__title { color: var(--block); }
.ui-confirm__ok:disabled { opacity: .45; cursor: not-allowed; }
/* 위의 display 규칙이 hidden 속성을 이기지 않게 합니다(R2 에 대상 입력 칸이 보이던 문제). */
.ui-confirm [hidden] { display: none !important; }

/* x-drawer: 오른쪽 서랍. */
.ui-drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(34rem, 100vw); padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); white-space: normal; text-align: left; }
/* 표 칸 안에 둔 서랍이 표의 nowrap·오른쪽 정렬을 물려받지 않게 위에서 되돌립니다. */
.ui-drawer::backdrop { background: rgba(10, 12, 16, .35); }
.ui-drawer__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
.ui-drawer__head h2 { margin: 0; font-size: var(--t-lg); }
.ui-drawer__close { border: 0 !important; background: transparent !important; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--ink-2) !important; }
.ui-drawer__body { padding: var(--s4); }

/* 테마 단추(협력사·관리자 머리 띠). */
.ui-theme-toggle { font: inherit; line-height: 1; padding: .25rem .5rem; min-width: 2rem; }
.ui-theme-toggle::before { content: "◐"; }

/* ── 4-3. 셸(UX U2): 왼쪽 레일 + 위쪽 범위 막대 + 빠른 찾기 — 협력사·관리자 공용 ─────────────
 * 레일은 넓은 화면에서 232px(접으면 64px, <html data-rail="collapsed">), 960px 이하에서는 ☰ 로 여는 서랍입니다.
 * 화면별 <style> 의 요소 선택자(a, button, nav …)에 밀리지 않도록 클래스 선택자로 씁니다. */
.ui-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.ui-shell--norail { grid-template-columns: minmax(0, 1fr); }
.ui-shell__body { min-width: 0; }

.ui-rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; padding: 14px 10px 16px; background: var(--rail); color: var(--rail-ink); font-family: var(--sans); box-sizing: border-box; }
.ui-rail__brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 12px; color: #fff; font-weight: 700; letter-spacing: -.01em; }
.ui-rail__mark { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--signal); color: #14171C; font-size: 13px; font-weight: 800; }
.ui-rail__brand-text { min-width: 0; line-height: 1.25; }
.ui-rail__brand-text small { display: block; font-weight: 500; font-size: 11px; color: #8A93A3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-rail__group { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: #7D8696; }
.ui-rail .ui-rail__item { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 10px; border-radius: 7px; color: var(--rail-ink); text-decoration: none; font-size: 13.5px; line-height: 1.4; white-space: nowrap; }
.ui-rail .ui-rail__item:hover { background: var(--rail-2); color: #fff; }
.ui-rail .ui-rail__item.on { background: var(--rail-3); color: #fff; font-weight: 600; }
.ui-rail .ui-rail__item.on::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--signal); }
.ui-rail .ui-rail__item:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; box-shadow: none; }
/* 메뉴 아이콘(선 아이콘 `RailIcons`, 사용자 결정 2026-10-23): 펼친 레일에서도 이름 앞에 보이고, 접으면 아이콘만 남습니다. */
.ui-rail__ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; opacity: .78; font-size: 12px; font-weight: 700; }
.ui-rail__ico svg { display: block; width: 18px; height: 18px; }
.ui-rail .ui-rail__item.on .ui-rail__ico, .ui-rail .ui-rail__item:hover .ui-rail__ico { opacity: 1; }
.ui-rail .ui-rail__collapse { margin-top: auto; align-self: flex-start; border: 1px solid #2A303B; background: transparent; color: var(--rail-ink); border-radius: 7px; padding: 2px 9px; font-size: 14px; cursor: pointer; }
.ui-rail .ui-rail__collapse:hover { color: #fff; border-color: #4B5463; }
.ui-rail-backdrop { display: none; }

/* 접은 레일: 첫 글자만 보이고 머리·묶음 이름은 숨깁니다(이름은 화면 낭독기에 그대로 읽히고, 마우스를 올리면 app-ui.js 가 붙인 title 로 보입니다).
 * 묶음 사이는 선으로 나눕니다. 좁은 화면(서랍)에서는 접힘을 쓰지 않습니다. */
@media (min-width: 961px) {
    :root[data-rail=collapsed] .ui-shell:not(.ui-shell--norail) { grid-template-columns: 64px minmax(0, 1fr); }
    :root[data-rail=collapsed] .ui-rail { padding-left: 8px; padding-right: 8px; }
    :root[data-rail=collapsed] .ui-rail__brand-text { display: none; }
    :root[data-rail=collapsed] .ui-rail__brand { padding: 2px 11px 10px; }
    :root[data-rail=collapsed] .ui-rail__group { margin: 8px 6px 6px; height: 1px; overflow: hidden; color: transparent; background: #2A303B; }
    :root[data-rail=collapsed] .ui-rail .ui-rail__item { justify-content: center; padding: 5px 0; }
    :root[data-rail=collapsed] .ui-rail .ui-rail__item.on::before { left: -8px; }
    :root[data-rail=collapsed] .ui-rail__ico { width: 28px; height: 22px; }
    :root[data-rail=collapsed] .ui-rail__ico svg { width: 20px; height: 20px; }
    :root[data-rail=collapsed] .ui-rail__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    :root[data-rail=collapsed] .ui-rail .ui-rail__collapse { align-self: center; transform: scaleX(-1); }
}

.ui-scope { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px 14px; min-height: 56px; padding: 8px 24px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--line); }
.ui-scope > * { flex: none; white-space: nowrap; }
.ui-scope > .ui-scope__scope { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; white-space: normal; }
.ui-scope > .ui-scope__grow { flex: 1 1 0; }
.ui-scope__scope form { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.ui-scope__scope label.muted { font-size: var(--t-sm); white-space: nowrap; }
.ui-scope__scope select { max-width: 24rem; padding: .3rem .5rem; text-overflow: ellipsis; }
.ui-scope__brand { white-space: nowrap; }
.ui-scope .ui-scope__here { font-weight: 600; color: var(--ink); }
.ui-scope .ui-scope__link { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); white-space: nowrap; }
.ui-scope .ui-scope__link:hover { color: var(--primary); }
.ui-scope .ui-scope__link.on { color: var(--ink); font-weight: 700; }
.ui-scope__who { color: var(--ink-2); font-size: var(--t-sm); white-space: nowrap; }
.ui-scope .ui-scope__menu { display: none; white-space: nowrap; }
.ui-scope .ui-scope__find { display: inline-flex; align-items: center; gap: 10px; min-width: 11rem; justify-content: space-between; color: var(--ink-3); background: var(--surface-2); white-space: nowrap; }
.ui-scope__find kbd, .ui-cmdk kbd { font: 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--ink-2); background: var(--surface); }
.ui-chips { display: inline-flex; gap: 6px; }
.ui-scope .ui-chip-form { display: inline; }
.ui-scope .ui-chip { display: inline-flex; align-items: center; font: inherit; font-size: 12.5px; line-height: 1.5; padding: 3px 11px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; white-space: nowrap; cursor: pointer; }
.ui-scope .ui-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.ui-scope .ui-chip[aria-current=true], .ui-scope .ui-chip[aria-current=page] { cursor: default; }
.ui-scope .ui-chip[aria-current=true], .ui-scope .ui-chip[aria-current=page], .ui-scope .ui-chip[aria-current]:hover { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ui-scope .ui-chip--static { cursor: default; background: var(--surface-2); }

/* 빠른 찾기 창(app-ui.js 가 만듭니다). */
.ui-cmdk { width: min(36rem, calc(100vw - 2rem)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 48px rgba(10, 12, 16, .28); font-family: var(--sans); }
.ui-cmdk::backdrop { background: rgba(10, 12, 16, .35); }
.ui-cmdk .ui-cmdk__input { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; padding: 14px 16px; font: inherit; font-size: var(--t-lg); background: transparent; color: var(--ink); outline: none; }
.ui-cmdk__list { list-style: none; margin: 0; padding: 6px; max-height: min(60vh, 28rem); overflow-y: auto; }
.ui-cmdk__opt { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ui-cmdk__opt[aria-selected=true] { background: var(--info-bg); }
.ui-cmdk__label { font-weight: 600; }
.ui-cmdk__group { color: var(--ink-3); font-size: var(--t-xs); }
.ui-cmdk__old { margin-left: auto; color: var(--ink-2); font-size: var(--t-xs); white-space: nowrap; }
.ui-cmdk__empty { padding: 14px 16px; color: var(--ink-2); }
.ui-cmdk__foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--t-xs); }

@media (max-width: 960px) {
    .ui-shell { grid-template-columns: minmax(0, 1fr); }
    .ui-rail { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 264px; transform: translateX(-100%); transition: transform .2s, visibility .2s; visibility: hidden; }
    .ui-rail.is-open { transform: none; visibility: visible; }
    .ui-rail-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(10, 12, 16, .45); }
    .ui-rail .ui-rail__collapse { display: none; }
    .ui-scope { position: static; flex-wrap: wrap; padding: 8px 12px; gap: 8px 6px; }
    .ui-scope .ui-scope__menu { display: inline-flex; gap: 6px; align-items: center; }
    .ui-scope .sandbox { font-size: .7rem; padding: .15rem .4rem; }
    .ui-scope > .ui-scope__scope { order: 10; flex: 1 1 100%; gap: 6px 10px; }
    .ui-scope__scope select { max-width: calc(100vw - 7rem); }
    .ui-scope .ui-scope__find { min-width: 0; }
    .ui-scope__find kbd, .ui-scope__who { display: none; }
    :where(:root[data-ui=partner], :root[data-ui=admin]) main { padding: 1rem .75rem 3rem; }
}
@media (prefers-reduced-motion: reduce) { .ui-rail { transition: none !important; } }

/* ── 5-1. 협력사(p.) ─────────────────────────────────────────────── */
:where(:root[data-ui=partner]) body { margin: 0; font: var(--t-md)/var(--lh) var(--sans); color: var(--fg); background: var(--bg); }
:where(:root[data-ui=partner]) main { padding: 1rem 1.5rem 3rem; max-width: 90rem; margin: 0 auto; }
:where(:root[data-ui=partner]) h1 { font-size: 1.2rem; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
:where(:root[data-ui=partner]) a { color: var(--primary); }
:where(:root[data-ui=partner]) .muted { color: var(--muted); }
:where(:root[data-ui=partner]) .badge { display: inline-block; padding: .1rem .45rem; border-radius: .3rem; font-size: .8rem; background: var(--soft); }
:where(:root[data-ui=partner]) .badge.bm { background: var(--plat-bm-bg); color: var(--plat-bm-ink); }
:where(:root[data-ui=partner]) .badge.cp { background: var(--plat-cp-bg); color: var(--plat-cp-ink); }
:where(:root[data-ui=partner]) .badge.hot { background: var(--signal); color: #14171C; font-weight: 700; }
:where(:root[data-ui=partner]) a.strong { font-weight: 700; }
:where(:root[data-ui=partner]) .hub-back { display: flex; align-items: center; gap: 14px; margin: 0 0 1.25rem; padding: 16px 20px; border-radius: 12px; background: var(--signal); color: #14171C; text-decoration: none; font-size: 1.15rem; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
:where(:root[data-ui=partner]) .hub-back:hover { filter: brightness(1.05); box-shadow: 0 4px 16px rgba(0,0,0,.18); }
:where(:root[data-ui=partner]) .hub-back__arrow { font-size: 1.8rem; font-weight: 800; line-height: 1; }
:where(:root[data-ui=partner]) .hub-back small { display: block; font-size: .85rem; opacity: .8; margin-top: 2px; }
:where(:root[data-ui=partner]) .hub-enter { padding: .4rem .9rem; border-radius: 8px; background: var(--primary); color: #fff; border: 0; font-weight: 700; cursor: pointer; }
:where(:root[data-ui=partner]) .sandbox { display: inline-block; padding: .15rem .5rem; background: var(--sandbox); color: #fff; font-weight: 700; font-size: .8rem; border-radius: var(--r-input); }
:where(:root[data-ui=partner]) .warn { background: var(--warnbg); color: var(--warn); padding: .5rem .75rem; border-radius: .35rem; margin: .5rem 0; }
:where(:root[data-ui=partner]) .bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
:where(:root[data-ui=partner]) .bar select, :where(:root[data-ui=partner]) .bar input, :where(:root[data-ui=partner]) .bar button { font: inherit; padding: .3rem .5rem; }
:where(:root[data-ui=partner]) .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: .35rem; }
:where(:root[data-ui=partner]) table { border-collapse: collapse; width: 100%; white-space: nowrap; }
:where(:root[data-ui=partner]) th, :where(:root[data-ui=partner]) td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: right; }
:where(:root[data-ui=partner]) th { background: var(--soft); font-weight: 600; }
:where(:root[data-ui=partner]) th.l, :where(:root[data-ui=partner]) td.l { text-align: left; }
:where(:root[data-ui=partner]) th a { color: inherit; text-decoration: none; }
:where(:root[data-ui=partner]) tr.sum td { font-weight: 700; background: var(--surface-2); }
:where(:root[data-ui=partner]) td.sticky, :where(:root[data-ui=partner]) th.sticky { position: sticky; left: 0; background: inherit; z-index: 1; }
:where(:root[data-ui=partner]) tbody tr { background: var(--bg); }
:where(:root[data-ui=partner]) .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
:where(:root[data-ui=partner]) .card { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; }
:where(:root[data-ui=partner]) .card.stale { border-color: var(--warn); }
:where(:root[data-ui=partner]) .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; text-align: center; margin: .5rem 0; }
:where(:root[data-ui=partner]) .kv b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
:where(:root[data-ui=partner]) .spark { display: inline-block; height: .6rem; background: var(--accent); border-radius: .15rem; vertical-align: middle; }

/* ── 5-2. 관리자(admin.) — 셸은 협력사와 같은 왼쪽 레일(4-3) ─────────── */
:where(:root[data-ui=admin]) body { margin: 0; font: var(--t-md)/var(--lh) var(--sans); color: var(--fg); background: var(--bg); }
:where(:root[data-ui=admin]) main { padding: 1rem 1.5rem 3rem; max-width: 90rem; margin: 0 auto; }
:where(:root[data-ui=admin]) h1 { font-size: 1.2rem; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
:where(:root[data-ui=admin]) h2 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
:where(:root[data-ui=admin]) a { color: var(--primary); }
:where(:root[data-ui=admin]) .muted { color: var(--muted); }
:where(:root[data-ui=admin]) .sandbox { display: inline-block; padding: .15rem .5rem; background: var(--sandbox); color: #fff; font-weight: 700; font-size: .8rem; border-radius: var(--r-input); }
:where(:root[data-ui=admin]) .flash { padding: .5rem .75rem; border-radius: .35rem; margin: .5rem 0; background: var(--pos-bg); color: var(--ok); }
:where(:root[data-ui=admin]) .errors { padding: .5rem .75rem; border-radius: .35rem; margin: .5rem 0; background: var(--block-bg); color: var(--danger); }
:where(:root[data-ui=admin]) .errors ul { margin: 0; padding-left: 1.2rem; }
:where(:root[data-ui=admin]) form.box { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; margin: .5rem 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; }
:where(:root[data-ui=admin]) form.box label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
:where(:root[data-ui=admin]) form.box label.check { flex-direction: row; align-items: center; color: var(--fg); }
:where(:root[data-ui=admin]) input, :where(:root[data-ui=admin]) select, :where(:root[data-ui=admin]) button, :where(:root[data-ui=admin]) textarea { font: inherit; padding: .3rem .5rem; }
:where(:root[data-ui=admin]) button { cursor: pointer; }
:where(:root[data-ui=admin]) .scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: .35rem; }
:where(:root[data-ui=admin]) table { border-collapse: collapse; width: 100%; white-space: nowrap; }
:where(:root[data-ui=admin]) th, :where(:root[data-ui=admin]) td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
:where(:root[data-ui=admin]) th { background: var(--soft); font-weight: 600; }
:where(:root[data-ui=admin]) td.r, :where(:root[data-ui=admin]) th.r { text-align: right; }
:where(:root[data-ui=admin]) tr.closed td { color: var(--muted); }
:where(:root[data-ui=admin]) code { font-size: .85em; }

/* ── 5-3. 협력사·관리자·로그인 공용 입력 요소 — 브라우저 기본 회색 버튼 대신 토큰 색을 씁니다.
 * 선택자 전체를 :where() 로 감싸 특이도 0 입니다. 화면별 규칙은 요소 선택자(`button {}`)라도 언제나 이깁니다. ── */
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(button, select, textarea, input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color])) {
    font: inherit; color: var(--ink); background-color: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r-input);
}
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(button, input[type=submit], input[type=button]) { cursor: pointer; padding: .3rem .7rem; }
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(button, input[type=submit], input[type=button]):where(:hover:not(:disabled)) { border-color: var(--ink-3); }
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(button, input, select, textarea):where(:disabled) { opacity: .55; cursor: not-allowed; }
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(input[type=checkbox], input[type=radio]) { accent-color: var(--primary); }
:where(:root[data-ui=partner], :root[data-ui=admin], :root[data-ui=auth]) :where(input, textarea)::placeholder { color: var(--ink-3); }

/* ── 5-4. 라이더 앱(app.) — 휴대폰 우선, 기기 다크 설정을 따름 ─────────────────── */
:where(:root[data-ui=rider]) body { margin: 0; font: 15px/var(--lh) var(--sans); color: var(--fg); background: var(--bg); padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }
:where(:root[data-ui=rider]) header.top { display: flex; align-items: center; gap: .5rem; padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
:where(:root[data-ui=rider]) header.top .who { min-width: 0; flex: 1; }
:where(:root[data-ui=rider]) header.top .who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(:root[data-ui=rider]) header.top button { font: inherit; font-size: .85rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: var(--muted); }
:where(:root[data-ui=rider]) main { max-width: 28rem; margin: 0 auto; padding: 1rem; }
:where(:root[data-ui=rider]) h1 { font-size: 1.15rem; margin: .2rem 0 .6rem; letter-spacing: -.01em; }
:where(:root[data-ui=rider]) h2 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
:where(:root[data-ui=rider]) a { color: var(--primary); }
:where(:root[data-ui=rider]) .muted { color: var(--muted); }
:where(:root[data-ui=rider]) .neg { color: var(--danger); }
:where(:root[data-ui=rider]) .small { font-size: .85rem; }
:where(:root[data-ui=rider]) .sandbox { display: inline-block; padding: .1rem .45rem; background: var(--sandbox); color: #fff; font-weight: 700; font-size: .75rem; border-radius: .25rem; }
:where(:root[data-ui=rider]) .card { background: var(--card); border: 1px solid var(--line); border-radius: .75rem; padding: .9rem; margin-bottom: .75rem; }
:where(:root[data-ui=rider]) .card.stale { border-color: var(--warn); }
:where(:root[data-ui=rider]) .card h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
:where(:root[data-ui=rider]) .badge { display: inline-block; padding: .05rem .45rem; border-radius: .3rem; font-size: .75rem; background: var(--soft); }
:where(:root[data-ui=rider]) .badge.bm { background: var(--plat-bm-bg); color: var(--plat-bm-ink); }
:where(:root[data-ui=rider]) .badge.cp { background: var(--plat-cp-bg); color: var(--plat-cp-ink); }
:where(:root[data-ui=rider]) .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; text-align: center; margin: .7rem 0 .3rem; }
:where(:root[data-ui=rider]) .kv b { display: block; font-size: 1.35rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
:where(:root[data-ui=rider]) .kv .main b { color: var(--ok); }
:where(:root[data-ui=rider]) .kv span { font-size: .8rem; color: var(--muted); }
:where(:root[data-ui=rider]) .slots { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
:where(:root[data-ui=rider]) .slots span { background: var(--soft); border-radius: .35rem; padding: .15rem .5rem; font-size: .85rem; }
:where(:root[data-ui=rider]) .hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 1px; align-items: end; height: 3rem; margin-top: .6rem; }
:where(:root[data-ui=rider]) .hours i { display: block; background: var(--bar); border-radius: 1px 1px 0 0; min-height: 1px; }
:where(:root[data-ui=rider]) .hours-axis { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted); }
:where(:root[data-ui=rider]) .note { background: var(--warnbg); color: var(--warn); padding: .6rem .8rem; border-radius: .5rem; margin: .5rem 0; }
:where(:root[data-ui=rider]) .seg { display: flex; gap: .35rem; margin: .3rem 0 .8rem; }
:where(:root[data-ui=rider]) .seg a { flex: 1; text-align: center; padding: .4rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--fg); text-decoration: none; background: var(--card); }
:where(:root[data-ui=rider]) .seg a.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
:where(:root[data-ui=rider]) table { border-collapse: collapse; width: 100%; }
:where(:root[data-ui=rider]) th, :where(:root[data-ui=rider]) td { padding: .45rem .35rem; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
:where(:root[data-ui=rider]) th { font-size: .8rem; color: var(--muted); font-weight: 600; }
:where(:root[data-ui=rider]) th.l, :where(:root[data-ui=rider]) td.l { text-align: left; }
:where(:root[data-ui=rider]) tr.none td { color: var(--muted); }
/* 명세서 줄 아래의 근거(뺄 금액·뺀 금액·남은 잔액 등). */
:where(:root[data-ui=rider]) .detail { display: flex; justify-content: space-between; gap: .6rem; color: var(--muted); padding-left: .6rem; border-left: 2px solid var(--line); margin-top: .15rem; }
:where(:root[data-ui=rider]) .detail b { white-space: nowrap; font-weight: 600; }
:where(:root[data-ui=rider]) tr.payout th { font-size: 1.05rem; }
:where(:root[data-ui=rider]) .spark { display: inline-block; height: .5rem; background: var(--accent); border-radius: .15rem; vertical-align: middle; }
:where(:root[data-ui=rider]) nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
:where(:root[data-ui=rider]) nav.tabs a { flex: 1; text-align: center; padding: .75rem 0; font-size: .9rem; white-space: nowrap; color: var(--muted); text-decoration: none; font-weight: 600; }
:where(:root[data-ui=rider]) .notice-body .em { color: var(--accent); }
:where(:root[data-ui=rider]) .notice-body ul { margin: .4rem 0; padding-left: 1.2rem; }
:where(:root[data-ui=rider]) .notice-body .gap { height: .5rem; }
:where(:root[data-ui=rider]) .banner { display: block; text-decoration: none; color: var(--fg); border: 1px solid var(--accent); }
:where(:root[data-ui=rider]) .banner .t { font-weight: 700; }
:where(:root[data-ui=rider]) .new { display: inline-block; padding: 0 .35rem; border-radius: .3rem; background: var(--accent); color: var(--on-primary); font-size: .7rem; font-weight: 700; }
:where(:root[data-ui=rider]) .ok { background: var(--pos-bg); color: var(--ok); padding: .6rem .8rem; border-radius: .5rem; margin: .5rem 0; }
:where(:root[data-ui=rider]) .err { background: var(--block-bg); color: var(--danger); padding: .6rem .8rem; border-radius: .5rem; margin: .5rem 0; }
:where(:root[data-ui=rider]) .row { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
:where(:root[data-ui=rider]) .row:last-child { border-bottom: 0; }
:where(:root[data-ui=rider]) .modes { display: flex; gap: .5rem; }
:where(:root[data-ui=rider]) .modes button { flex: 1; font: inherit; padding: .7rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--card); color: var(--fg); }
:where(:root[data-ui=rider]) .modes button.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
:where(:root[data-ui=rider]) .inline { display: inline; margin: 0; }
:where(:root[data-ui=rider]) form.stack label { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .4rem 0; }
:where(:root[data-ui=rider]) form.stack input { font: inherit; padding: .35rem .5rem; }
:where(:root[data-ui=rider]) .btn { font: inherit; width: 100%; padding: .65rem; border: 0; border-radius: .55rem; background: var(--accent); color: var(--on-primary); font-weight: 700; margin-top: .6rem; }
:where(:root[data-ui=rider]) .hero { font-size: 2.6rem; font-weight: 800; text-align: center; color: var(--ok); line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
:where(:root[data-ui=rider]) nav.tabs a.on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
/* 오늘: 운행 상태·수락률 게이지·거절권·순위·일 목표(현행 status.php) */
:where(:root[data-ui=rider]) .live { margin-left: auto; font-size: .75rem; font-weight: 700; color: var(--muted); }
:where(:root[data-ui=rider]) .live::before { content: ''; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); margin-right: .3rem; }
:where(:root[data-ui=rider]) .live.on { color: var(--ok); }
:where(:root[data-ui=rider]) .live.on::before { background: var(--ok); }
:where(:root[data-ui=rider]) .status { display: flex; align-items: center; gap: 1rem; margin-top: .7rem; }
:where(:root[data-ui=rider]) .gauge { position: relative; width: 112px; height: 112px; flex: 0 0 auto; --tone: var(--muted); }
:where(:root[data-ui=rider]) .gauge svg { transform: rotate(-90deg); }
:where(:root[data-ui=rider]) .gauge .track { fill: none; stroke: var(--soft); stroke-width: 11; }
:where(:root[data-ui=rider]) .gauge .arc { fill: none; stroke: var(--tone); stroke-width: 11; stroke-linecap: round; }
:where(:root[data-ui=rider]) .gauge .ctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
:where(:root[data-ui=rider]) .gauge .ctr b { font-size: 1.6rem; line-height: 1.1; color: var(--tone); font-variant-numeric: tabular-nums; }
:where(:root[data-ui=rider]) .gauge .ctr small { font-size: .9rem; }
:where(:root[data-ui=rider]) .gauge .ctr span { font-size: .75rem; color: var(--muted); }
:where(:root[data-ui=rider]) .tone-none { --tone: var(--muted); }
:where(:root[data-ui=rider]) .tone-good { --tone: var(--ok); }
:where(:root[data-ui=rider]) .tone-mid { --tone: var(--warn); }
:where(:root[data-ui=rider]) .tone-bad { --tone: var(--danger); }
:where(:root[data-ui=rider]) .status .side { flex: 1; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
:where(:root[data-ui=rider]) .pill { display: flex; justify-content: space-between; align-items: center; gap: .4rem; background: var(--soft); border-radius: .5rem; padding: .45rem .65rem; }
:where(:root[data-ui=rider]) .tools { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin: .6rem 0; }
:where(:root[data-ui=rider]) .chip { font: inherit; font-size: .85rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--card); color: var(--fg); }
/* 기록: 주간 순위·날짜 상세(현행 records.php 모달 대신 펼침) */
:where(:root[data-ui=rider]) details.day { border-bottom: 1px solid var(--line); }
:where(:root[data-ui=rider]) details.day summary { list-style: none; display: flex; align-items: center; gap: .6rem; padding: .55rem 0; cursor: pointer; }
:where(:root[data-ui=rider]) details.day summary::-webkit-details-marker { display: none; }
:where(:root[data-ui=rider]) details.day .d { width: 2.6rem; text-align: center; line-height: 1.15; }
:where(:root[data-ui=rider]) details.day .d b { display: block; font-size: 1.05rem; }
:where(:root[data-ui=rider]) details.day .m { flex: 1; display: flex; gap: .6rem; flex-wrap: wrap; font-size: .85rem; }
:where(:root[data-ui=rider]) details.day .r { font-weight: 700; font-size: .85rem; }
:where(:root[data-ui=rider]) details.day.today summary { box-shadow: inset 3px 0 0 var(--ok); }
:where(:root[data-ui=rider]) details.day.none summary { color: var(--muted); cursor: default; }
:where(:root[data-ui=rider]) details.day .body { padding: .2rem 0 .8rem; }
:where(:root[data-ui=rider]) .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; text-align: center; margin: .4rem 0; }
:where(:root[data-ui=rider]) .grid3 div { background: var(--soft); border-radius: .4rem; padding: .35rem 0; }
:where(:root[data-ui=rider]) .grid3 b { display: block; }
:where(:root[data-ui=rider]) .grid3 span { font-size: .75rem; color: var(--muted); }

/* ── 5-5. 약관·개인정보처리방침(legal) ─────────────────────────────── */
:where(:root[data-ui=legal]) body { margin: 0; background: var(--bg); color: var(--tx); font: 15px/1.75 var(--sans); }
:where(:root[data-ui=legal]) .wrap { max-width: 780px; margin: 0 auto; padding: 24px 18px 64px; }
:where(:root[data-ui=legal]) .top { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
:where(:root[data-ui=legal]) .top .brand { font-weight: 700; color: var(--pri); text-decoration: none; }
:where(:root[data-ui=legal]) .top .cur { color: var(--mut); font-size: 14px; }
:where(:root[data-ui=legal]) h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
:where(:root[data-ui=legal]) .meta { color: var(--mut); font-size: 13px; margin-bottom: 26px; }
:where(:root[data-ui=legal]) h2 { font-size: 17px; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
:where(:root[data-ui=legal]) h3 { font-size: 15px; margin: 20px 0 6px; }
:where(:root[data-ui=legal]) p, :where(:root[data-ui=legal]) li { margin: 6px 0; }
:where(:root[data-ui=legal]) ul, :where(:root[data-ui=legal]) ol { padding-left: 20px; }
:where(:root[data-ui=legal]) table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; background: var(--surface); }
:where(:root[data-ui=legal]) th, :where(:root[data-ui=legal]) td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
:where(:root[data-ui=legal]) th { background: var(--th); font-weight: 600; white-space: nowrap; }
:where(:root[data-ui=legal]) .scroll { overflow-x: auto; }
:where(:root[data-ui=legal]) .ph { color: var(--block); background: var(--block-bg); padding: 0 3px; border-radius: 3px; }
:where(:root[data-ui=legal]) .foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; }
:where(:root[data-ui=legal]) a { color: var(--pri); }
:where(:root[data-ui=legal]) .foot a { color: var(--mut); }

/* ── 5-6. 소개·허브(host) ─────────────────────────────────────────── */
:where(:root[data-ui=host]) body { font-family: var(--sans); max-width: 40rem; margin: 3rem auto; padding: 0 1rem; color: var(--ink); background: var(--surface); line-height: var(--lh); }
:where(:root[data-ui=host]) .sandbox { display: inline-block; padding: .25rem .6rem; background: var(--sandbox); color: #fff; font-weight: 700; border-radius: .25rem; }
:where(:root[data-ui=host]) h1 { margin: 1rem 0 .25rem; letter-spacing: -.02em; }
:where(:root[data-ui=host]) .lead { color: var(--ink-2); margin: 0 0 1.5rem; }
:where(:root[data-ui=host]) .card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 1rem 1.2rem; margin: .75rem 0; }
:where(:root[data-ui=host]) .card h2 { margin: 0 0 .15rem; font-size: 1.05rem; }
:where(:root[data-ui=host]) .card p { margin: 0 0 .75rem; color: var(--ink-2); font-size: .9rem; }
:where(:root[data-ui=host]) .btn { display: inline-block; padding: .5rem 1rem; text-decoration: none; border-radius: .4rem; font-weight: 600; font-size: .9rem; margin-right: .4rem; }
:where(:root[data-ui=host]) .btn-primary { background: var(--rail); color: #fff; }
:where(:root[data-ui=host]) .btn-primary:hover { background: var(--primary); }
:where(:root[data-ui=host]) .btn-ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
:where(:root[data-ui=host]) a:not(.btn) { color: var(--primary); }

/* ── 5-7. 로그인·본인 확인·주소 이동(auth) ─────────────────────────────
 * 이 화면들은 아직 body 에 인라인 style(system-ui)을 씁니다. 글꼴만 공용 서체로 맞추려고 여기서만 !important 를 씁니다.
 * U1 에서 인라인 style 을 걷어 내면 이 !important 도 지웁니다. */
:where(:root[data-ui=auth]) body { font-family: var(--sans) !important; color: var(--ink); }
:where(:root[data-ui=auth]) :is(input, button, select, textarea) { font-family: inherit; }
:where(:root[data-ui=auth]) a { color: var(--primary); }

/* ── 6. 라이더 선택(UX U3 — components/rider-picker, 제안 §4) ────────────────────
 * 스크립트가 없을 때도 체크박스 목록이 읽기 쉽도록 기본 모양을 두고, 스크립트가 붙으면(.is-js) 상자 안 스크롤·도구 줄·칩이 더해집니다.
 * 화면별 <style>(예: `.st-inline label`)보다 이기도록 두 단계 선택자를 씁니다. */
.ui-picker { display: block; margin: var(--s2) 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.ui-picker .ui-picker__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 var(--s2); padding: var(--s1) var(--s2); }
.ui-picker .ui-picker__row { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s2); min-height: 36px; padding: 4px var(--s2); border-radius: var(--r-input); cursor: pointer; color: var(--ink); font-weight: 400; }
.ui-picker .ui-picker__row:hover { background: var(--surface-2); }
.ui-picker .ui-picker__row.is-on { background: var(--info-bg); }
.ui-picker .ui-picker__row.is-left .ui-picker__name { color: var(--ink-3); }
.ui-picker .ui-picker__row[hidden] { display: none; }
.ui-picker .ui-picker__cb { width: 16px; height: 16px; margin: 0; flex: none; }
.ui-picker .ui-picker__who { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; }
.ui-picker .ui-picker__name { font-weight: 600; }
/* 찾은 글자: 라임 신호색 면 + 어두운 글자(밝음·어두움 모두 같은 대비). */
.ui-picker .ui-picker__name mark, .ui-picker-one .ui-picker-one__opt mark { background: var(--signal); color: #12151A; border-radius: 2px; }
.ui-picker .ui-picker__tail { color: var(--ink-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ui-picker .ui-picker__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; align-items: center; }
.ui-picker .ui-picker__tag { display: inline-block; padding: 0 6px; border-radius: var(--r-chip); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--t-xs); line-height: 18px; white-space: nowrap; }
.ui-picker .ui-picker__tag--info { background: var(--info-bg); border-color: transparent; color: var(--primary); }
.ui-picker .ui-picker__tag--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.ui-picker .ui-picker__note { color: var(--ink-2); font-size: var(--t-xs); }
.ui-picker .ui-picker__amt { width: 7rem; padding: 2px 6px; font-size: var(--t-sm); text-align: right; }
/* 금액 칸은 이름 줄 아래 한 줄로(고른 사람만 보이므로 줄 높이가 들쭉날쭉하지 않게 늘 같은 자리). */
.ui-picker .ui-picker__row:has(.ui-picker__amt)::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.ui-picker .ui-picker__row .ui-picker__amt { order: 4; margin-left: 24px; }
/* 스크립트가 붙은 뒤: 목록은 상자 안에서만 밀리고, 금액 칸은 고른 사람에게만 보입니다. */
.ui-picker.is-js .ui-picker__list { max-height: min(55vh, 26rem); overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line-2); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.ui-picker.is-js .ui-picker__row:not(.is-on) .ui-picker__amt { display: none; }
.ui-picker.is-js .ui-picker__row.is-active { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.ui-picker .ui-picker__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); }
.ui-picker .ui-picker__count { font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-picker .ui-picker__count small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.ui-picker .ui-picker__spacer { flex: 1; }
.ui-picker .ui-picker__chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 var(--s3) var(--s2); }
.ui-picker .ui-picker__chips:empty { display: none; }
.ui-picker .ui-picker__chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 8px; height: 26px; border-radius: var(--r-chip); background: var(--info-bg); color: var(--ink); font-size: var(--t-sm); }
.ui-picker .ui-picker__chip button { border: 0; background: transparent; color: var(--ink-2); padding: 0 6px; height: 24px; line-height: 1; font-size: 14px; border-radius: var(--r-chip); }
.ui-picker .ui-picker__chip button:hover { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--ink); }
.ui-picker .ui-picker__more { height: 26px; padding: 0 10px; border-radius: var(--r-chip); font-size: var(--t-sm); }
.ui-picker .ui-picker__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--line-2); background: var(--surface-2); }
.ui-picker .ui-picker__search { flex: 1 1 14rem; min-width: 0; max-width: 24rem; height: 32px; padding: 0 10px; }
.ui-picker .ui-picker__filters { display: flex; flex-wrap: wrap; gap: 6px var(--s3); padding: 0 var(--s3) var(--s2); background: var(--surface-2); }
.ui-picker .ui-picker__filters:empty { display: none; }
.ui-picker .ui-picker__fg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--t-sm); color: var(--ink-2); }
.ui-picker .ui-picker__fchip { height: 26px; padding: 0 10px; border-radius: var(--r-chip); font-size: var(--t-sm); background: var(--surface); }
.ui-picker .ui-picker__fchip i { font-style: normal; color: var(--ink-3); margin-left: 4px; font-variant-numeric: tabular-nums; }
.ui-picker .ui-picker__fchip[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ui-picker .ui-picker__fchip[aria-pressed=true] i { color: inherit; opacity: .75; }
.ui-picker .ui-picker__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--line-2); font-size: var(--t-sm); color: var(--ink-2); }
.ui-picker .ui-picker__foot button, .ui-picker .ui-picker__head button { height: 28px; padding: 0 10px; font-size: var(--t-sm); }
.ui-picker .ui-picker__empty { padding: var(--s4); color: var(--ink-3); }
.ui-picker .ui-picker__hint { color: var(--ink-3); font-size: var(--t-xs); }

/* 단일 선택: 찾아 고르는 상자(콤보박스). 원래 <select> 는 보내기용으로 남겨 두고 화면에서만 숨깁니다. */
.ui-picker-one { position: relative; display: inline-block; vertical-align: middle; }
.ui-picker-one.is-js .ui-picker-one__native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; clip: rect(0 0 0 0); }
.ui-picker-one .ui-picker-one__input { width: 15rem; max-width: 100%; height: 32px; padding: 0 10px; }
.ui-picker-one.is-invalid .ui-picker-one__input { border-color: var(--block); box-shadow: 0 0 0 2px color-mix(in srgb, var(--block) 25%, transparent); }
.ui-picker-one .ui-picker-one__list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max(100%, 22rem); max-width: calc(100vw - 2rem); max-height: 18rem; overflow: auto; margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.ui-picker-one .ui-picker-one__list[hidden] { display: none; }
.ui-picker-one .ui-picker-one__opt { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 8px; border-radius: var(--r-input); cursor: pointer; font-weight: 400; color: var(--ink); }
.ui-picker-one .ui-picker-one__opt small { color: var(--ink-3); white-space: nowrap; }
.ui-picker-one .ui-picker-one__opt.is-left { color: var(--ink-3); }
.ui-picker-one .ui-picker-one__opt[aria-selected=true] { background: var(--info-bg); }
.ui-picker-one .ui-picker-one__label { padding: 6px 8px 2px; color: var(--ink-3); font-size: var(--t-xs); }
.ui-picker-one .ui-picker-one__msg { position: absolute; left: 0; top: calc(100% + 2px); color: var(--block); font-size: var(--t-xs); white-space: nowrap; }

@media (max-width: 640px) {
    .ui-picker .ui-picker__list, .ui-picker.is-js .ui-picker__list { grid-template-columns: 1fr; }
    .ui-picker .ui-picker__search { max-width: none; }
    .ui-picker-one { display: block; }
    .ui-picker-one .ui-picker-one__input { width: 100%; }
}

/* ── 7. 라이더 상세(UX U6 — resources/views/partner/riders, 제안 §2.6) ─────────────────
 * 머리(이름·상태·라이더로 보기·⋯ 더 보기), 탭 줄(링크 탭 — 탭마다 주소가 따로라 권한 판정이 탭 단위), 카드·이름표 목록. 이 구역은 U6 만 씁니다. */
.rd-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s2); }
.rd-head h1 { margin: 0; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.rd-crumb { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; }
.rd-crumb::after { content: " ›"; }
.rd-head__actions { display: flex; align-items: center; gap: var(--s2); }
.rd-more { position: relative; }
.rd-more > summary { cursor: pointer; list-style: none; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--r-input); color: var(--ink-2); font-size: var(--t-sm); background: var(--surface); }
.rd-more > summary::-webkit-details-marker { display: none; }
.rd-more__menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 10rem; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.rd-more__menu a { padding: 6px 10px; border-radius: var(--r-input); text-decoration: none; color: var(--ink); }
.rd-more__menu a:hover { background: var(--surface-2); }
.rd-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 0 0 var(--s4); overflow-x: auto; scrollbar-width: thin; }
.rd-tabs a { padding: .5rem .9rem; color: var(--ink-2); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rd-tabs a:hover { color: var(--ink); }
.rd-tabs a.on { color: var(--ink); border-bottom-color: var(--primary); }
.rd-jump { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s3); font-size: var(--t-sm); }
.rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--s4); margin: 0 0 var(--s4); }
.rd-grid > .rd-card { margin: 0; }
.rd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); margin: 0 0 var(--s4); scroll-margin-top: var(--s5); min-width: 0; }
.rd-card > h2 { margin: 0 0 var(--s3); font-size: var(--t-lg); }
.rd-card h3 { font-size: var(--t-md); margin: 0 0 .4rem; }
.rd-card table { white-space: normal; }
.rd-kv { display: grid; grid-template-columns: max-content 1fr; gap: .45rem var(--s4); margin: 0 0 var(--s3); }
.rd-kv dt { color: var(--ink-2); }
.rd-kv dd { margin: 0; }
.rd-src { color: var(--ink-3); font-size: var(--t-sm); margin-left: .35rem; }
.rd-sched { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .3rem; }
.rd-sched form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; }
.rd-sched form input[type=text] { width: 12rem; max-width: 100%; }
.rd-sched form button { white-space: nowrap; }
.rd-card select { max-width: 100%; }
.rd-list { list-style: none; margin: 0; padding: 0; }
.rd-list li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.rd-list li:last-child { border-bottom: 0; }
.rd-edit { margin-top: var(--s3); }
.rd-edit > summary { cursor: pointer; font-weight: 600; color: var(--primary); width: max-content; }
.rd-edit[open] > summary { margin-bottom: var(--s3); }
.rd-edit > form label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 var(--s3) var(--s2) 0; }
@media (max-width: 640px) {
    .rd-kv { grid-template-columns: 1fr; gap: .1rem; }
    .rd-kv dd { margin-bottom: .45rem; }
    .rd-head { align-items: flex-start; }
}

/* ── 8. 레일 대기 수 배지(UX U7 — 승인함 n건, PartnerMenu 'badge') ────────────────────
 * 라임(--signal)은 면으로만 쓰고 글자는 짙게 둡니다(제안 §7.4). 접은 레일에서는 첫 글자 옆 작은 점으로 줄입니다. */
.ui-rail .ui-rail__badge { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 999px; background: var(--signal); color: #14171C; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
@media (min-width: 961px) {
    :root[data-rail=collapsed] .ui-rail .ui-rail__badge { position: absolute; top: 3px; right: 9px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; }
}
/* ── U7 끝 ── */