/* ============================================
   PET 자원순환 플랫폼 - 메인 스타일시트
   ============================================ */

/* ============================================
   디자인 토큰
   --------------------------------------------
   규칙 (docs/가이드라인/front-end-design.md)
   1) 색은 반드시 이 토큰을 통해서만 쓴다.
      컴포넌트 CSS에 색 리터럴(#xxxxxx)을 직접 쓰지 않는다.
   2) 어떤 색도 미디어쿼리 안에서만 정의하지 않는다.
      기본(:root)에 전부 정의하고, 다크에서는 값만 덮어쓴다.
   3) 상태색(정상/주의/위험)은 강조색과 분리한다.
      색만으로 상태를 표현하지 않는다 — 라벨·아이콘을 함께 붙인다.
   ============================================ */

:root {
    /* --- 강조색: 딥 틸그린 (자원순환) --- */
    --color-primary: #0E6A5B;
    --color-primary-hover: #0A5245;
    --color-primary-light: #E0EDE9;
    --color-primary-ink: #FFFFFF;

    --color-secondary: #55645F;

    /* --- 상태색 (강조색과 독립) --- */
    --color-success: #1C7148;
    --color-success-soft: #E2EFE8;
    --color-warning: #8E5C0D;
    --color-warning-soft: #F6EDDC;
    --color-danger: #9E3227;
    --color-danger-soft: #F7E6E3;
    --color-info: #2F5279;
    --color-info-soft: #E3EAF2;

    /* --- 지도 표식 색 ---
       지도 위에 그리는 표식은 **다크모드에서도 이 값을 그대로 쓴다.**
       카카오 지도 타일은 항상 밝은 색이다. 다크 토큰(연한 빨강 등)을 쓰면
       밝은 지도 위에서 흐려져 무엇이 급한지 안 보인다.
       그래서 아래 값들은 :root 에만 두고 다크에서 덮어쓰지 않는다.
       JS 가 getComputedStyle 로 읽어 표식 그림을 만든다 (MapProvider). */
    --map-urgent: #9E3227;
    --map-need:   #8E5C0D;
    --map-soon:   #2F5279;
    --map-ok:     #1C7148;
    --map-unknown: #6B6B6B;
    --map-depot:  #0E6A5B;

    --map-route-1: #0E6A5B;
    --map-route-2: #2F5279;
    --map-route-3: #8E5C0D;
    --map-route-4: #9E3227;
    --map-route-5: #55407A;

    /* --- 텍스트: 중립색을 강조색 쪽으로 살짝 기울임 --- */
    --color-text-primary: #14201D;
    --color-text-secondary: #47554F;
    /* 이전 값(#7A8781)은 흰 바탕에서 3.74:1 로 AA(4.5:1)에 못 미쳤다.
       힌트·보조 문구가 밝은 사무실이나 직사광선에서 읽히지 않는다.
       이 값은 세 바탕 모두에서 4.5:1 을 넘긴다 —
       흰색 5.24:1 · bg-secondary 4.86:1 · bg-tertiary 4.50:1
       (다크 쪽은 이미 5.03:1 이라 그대로 둔다) */
    --color-text-muted: #636F69;
    --color-text-white: #FFFFFF;

    /* --- 배경 --- */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F4F7F6;
    --color-bg-tertiary: #EAEFEC;

    /* --- 테두리 --- */
    --color-border: #DDE4E1;
    --color-border-strong: #C4CFCA;
    --color-border-focus: #0E6A5B;

    /* --- 사이드바 (다크) --- */
    --color-sidebar-bg: #16211E;
    --color-sidebar-ink: #9FAFA9;
    --color-sidebar-ink-strong: #EDF3F0;
    --color-sidebar-hover: #1F2D29;
    --color-sidebar-line: #26332F;

    /* 모달 뒤를 덮는 막. 반투명이라 기존 색 토큰으로는 만들 수 없어 따로 둔다 */
    --color-scrim: rgba(20, 32, 29, 0.55);

    /* --- 그림자: 실제로 떠 있는 것에만 --- */
    --shadow-sm: 0 1px 1px rgba(20, 32, 29, 0.04);
    --shadow-md: 0 2px 8px rgba(20, 32, 29, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 32, 29, 0.16);

    /* --- 폰트 --- */
    --font-family: 'IBM Plex Sans KR', 'Pretendard', -apple-system, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
    --font-mono: 'IBM Plex Mono', 'D2Coding', Consolas, monospace;

    /* --- 간격 --- */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;

    /* --- 둥글기: 도구답게 절제 (0~6px) --- */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --radius-full: 999px;

    /* --- 트랜지션 --- */
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
}

/* 다크 — 값만 덮어쓴다. 시스템이 '자동'일 때 적용 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #4FBFA6;
        --color-primary-hover: #6BD0B9;
        --color-primary-light: #16302B;
        --color-primary-ink: #08211C;

        --color-secondary: #8B9A94;

        --color-success: #5FBE8B;
        --color-success-soft: #14291F;
        --color-warning: #D3A25E;
        --color-warning-soft: #2C2416;
        --color-danger: #E08175;
        --color-danger-soft: #2F1D1A;
        --color-info: #86A9CE;
        --color-info-soft: #1A2431;

        --color-text-primary: #E7EDEA;
        --color-text-secondary: #B4C1BC;
        --color-text-muted: #7E8D87;

        --color-bg-primary: #151B19;
        --color-bg-secondary: #0F1412;
        --color-bg-tertiary: #1C2420;

        --color-border: #27302C;
        --color-border-strong: #38443F;
        --color-border-focus: #4FBFA6;

        --color-sidebar-bg: #0B100E;
        --color-sidebar-ink: #8E9E98;
        --color-sidebar-ink-strong: #E7EDEA;
        --color-sidebar-hover: #171F1C;
        --color-sidebar-line: #1D2622;

        --color-scrim: rgba(0, 0, 0, 0.7);

        --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
    }
}

/* 다크 — 사용자가 직접 고른 경우 */
:root[data-theme="dark"] {
    --color-primary: #4FBFA6;
    --color-primary-hover: #6BD0B9;
    --color-primary-light: #16302B;
    --color-primary-ink: #08211C;

    --color-secondary: #8B9A94;

    --color-success: #5FBE8B;
    --color-success-soft: #14291F;
    --color-warning: #D3A25E;
    --color-warning-soft: #2C2416;
    --color-danger: #E08175;
    --color-danger-soft: #2F1D1A;
    --color-info: #86A9CE;
    --color-info-soft: #1A2431;

    --color-text-primary: #E7EDEA;
    --color-text-secondary: #B4C1BC;
    --color-text-muted: #7E8D87;

    --color-bg-primary: #151B19;
    --color-bg-secondary: #0F1412;
    --color-bg-tertiary: #1C2420;

    --color-border: #27302C;
    --color-border-strong: #38443F;
    --color-border-focus: #4FBFA6;

    --color-sidebar-bg: #0B100E;
    --color-sidebar-ink: #8E9E98;
    --color-sidebar-ink-strong: #E7EDEA;
    --color-sidebar-hover: #171F1C;
    --color-sidebar-line: #1D2622;

    --color-scrim: rgba(0, 0, 0, 0.7);

    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: 15px;
    /* 한글은 글자 밀도가 높아 영문 기준 행간이면 답답하다 */
    line-height: 1.7;
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    /* 단어 중간에서 줄바꿈되지 않게 */
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-wrap: balance;
    font-weight: 600;
}

/* 숫자가 세로로 정렬되어야 읽힌다 — 중량·금액·건수 */
.stat-value, .stats-value, .summary-value, .total-stat-value,
.data-table td, .list-table td, .table td,
.tnum, .pagination-info, .cert-number, .certificate-number {
    font-variant-numeric: tabular-nums;
}

/* 코드·일련번호·좌표는 고정폭 */
.mono, .cert-number, .certificate-number, .ip-address, .datetime,
code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

/* 키보드 포커스는 반드시 보여야 한다 */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   레이아웃
   ============================================ */

.app-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--spacing-5);
    background-color: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header__brand h1 {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* 브랜드 마크 — 회수 순환을 뜻하는 작은 사각 표식 */
.header__brand h1::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: var(--radius-sm);
    background-color: var(--color-primary);
    box-shadow: inset 0 0 0 3px var(--color-bg-primary), inset 0 0 0 5px var(--color-primary);
}

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

#userInfo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.user-name {
    font-weight: 500;
}

.user-role {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}

.user-profile-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
    color: inherit;
    padding: var(--spacing-2);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.user-profile-link:hover {
    background: var(--color-bg-tertiary);
}

.app-layout {
    display: flex;
    flex: 1;
}

.app-sidebar {
    width: 224px;
    flex: none;
    background-color: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-sidebar-line);
    padding: var(--spacing-3) var(--spacing-2);
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.app-sidebar::-webkit-scrollbar { width: 8px; }
.app-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--color-sidebar-hover);
    border-radius: var(--radius-full);
}

@media (max-width: 768px) {
    .app-sidebar {
        display: none;
    }
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 메뉴 그룹 라벨 */
.sidebar-group {
    padding: var(--spacing-4) var(--spacing-3) var(--spacing-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-sidebar-ink);
    opacity: 0.65;
}
.sidebar-group:first-child { padding-top: var(--spacing-2); }

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: 9px var(--spacing-3);
    color: var(--color-sidebar-ink);
    font-size: 0.875rem;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    /* 활성 표식이 들어갈 자리를 미리 확보해 글자가 밀리지 않게 */
    border-left: 2px solid transparent;
}

.nav-item svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.8;
}

.nav-item:hover {
    background-color: var(--color-sidebar-hover);
    color: var(--color-sidebar-ink-strong);
}

.nav-item.is-active {
    background-color: var(--color-sidebar-hover);
    border-left-color: var(--color-primary);
    color: var(--color-sidebar-ink-strong);
    font-weight: 500;
}

.nav-item.is-active svg {
    opacity: 1;
    color: var(--color-primary);
}

.app-main {
    flex: 1;
    padding: var(--spacing-6);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .app-main {
        padding: var(--spacing-4);
    }
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.breadcrumb-item.current {
    color: var(--color-text-primary);
    font-weight: 500;
}

.breadcrumb-separator {
    color: var(--color-text-muted);
}

.page-container {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: var(--spacing-6);
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.page-title {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.page-description {
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ============================================
   버튼
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    /* 터치 타깃 최소 높이 확보 */
    min-height: 36px;
    padding: 7px var(--spacing-4);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.btn-secondary,
.btn-outline {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}

.btn-secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-text-muted);
}

/* 텍스트 버튼 — 부수적인 동작 */
.btn-text {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-secondary);
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}

.btn-text:hover:not(:disabled) {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-text-white);
}

/* ============================================
   폼
   ============================================ */

.form-group {
    margin-bottom: var(--spacing-4);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-input,
.form-select,
.form-control,
textarea.form-input {
    width: 100%;
    min-height: 38px;
    padding: 8px var(--spacing-3);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-control:focus {
    outline: none;
    border-color: var(--color-border-focus);
    /* 강조색을 그대로 쓰되 투명도만 — 다크에서도 성립 */
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input.has-error {
    border-color: var(--color-danger);
}

.form-input.has-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.field-error {
    margin-top: var(--spacing-1);
    font-size: 0.75rem;
    color: var(--color-danger);
}

.input-wrapper {
    position: relative;
}

/* ============================================
   카드
   ============================================ */

.card {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-6);
}

/* ============================================
   토스트
   ============================================ */

.toast-wrapper {
    position: fixed;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.toast {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.2s ease;
    cursor: pointer;
}

.toast-success {
    background-color: var(--color-success);
    color: var(--color-text-white);
}

.toast-error {
    background-color: var(--color-danger);
    color: var(--color-text-white);
}

.toast-warning {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
}

.toast-info {
    background-color: var(--color-info);
    color: var(--color-text-white);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   로딩
   ============================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-bg-tertiary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   인증 페이지
   ============================================ */

/* 로그인 — 그라데이션 히어로 없음.
   왼쪽에 조용한 다크 패널, 오른쪽에 폼. 단색 배경. */
.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background-color: var(--color-bg-primary);
}

/* 왼쪽 패널 — 넓은 화면에서만 */
.auth-aside {
    background-color: var(--color-sidebar-bg);
    /* 아주 옅은 점격자: 지도에 찍힌 회수 지점의 은유 */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(79, 191, 166, 0.14) 1px, transparent 0);
    background-size: 28px 28px;
    border-right: 1px solid var(--color-sidebar-line);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-8);
    padding: var(--spacing-10);
    color: var(--color-sidebar-ink);
}

.auth-aside-mark {
    width: 26px;
    height: 26px;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 5px var(--color-sidebar-bg), inset 0 0 0 7px var(--color-primary);
    margin-bottom: auto;
}

.auth-aside-name {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-sidebar-ink-strong);
    margin-bottom: var(--spacing-2);
}

.auth-aside-tagline {
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.6;
    max-width: 26ch;
}

.auth-aside-facts {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-sidebar-line);
}

.auth-aside-facts li {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-4);
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-sidebar-line);
    font-size: 0.8125rem;
}

.auth-aside-facts span {
    flex: none;
    width: 68px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.auth-aside-facts b {
    font-weight: 400;
    color: var(--color-sidebar-ink-strong);
}

@media (max-width: 900px) {
    .auth-layout {
        grid-template-columns: minmax(0, 1fr);
        background-color: var(--color-bg-secondary);
    }
    .auth-aside { display: none; }
}

.auth-container {
    width: 100%;
    max-width: 380px;
    margin: auto;
    padding: var(--spacing-8) var(--spacing-6);
}

.auth-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

@media (max-width: 900px) {
    .auth-card {
        background: var(--color-bg-primary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        padding: var(--spacing-6);
    }
}

.auth-header {
    text-align: left;
    margin-bottom: var(--spacing-6);
}

/* 큰 원형 로고 대신 작은 표식 + 서비스명 */
.auth-logo {
    width: 22px;
    height: 22px;
    margin: 0 0 var(--spacing-6);
    background: var(--color-primary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 4px var(--color-bg-primary), inset 0 0 0 6px var(--color-primary);
}

.auth-logo svg {
    display: none;
}

.auth-title {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-1);
}

.auth-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.auth-form .form-group {
    margin-bottom: var(--spacing-5);
}

.auth-form .form-input {
    padding: var(--spacing-4);
}

.auth-form .password-toggle {
    position: absolute;
    right: var(--spacing-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-1);
}

.auth-form .password-toggle:hover {
    color: var(--color-text-secondary);
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    font-size: 0.875rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
}

.remember-me label {
    color: var(--color-text-secondary);
    cursor: pointer;
}

.forgot-password {
    color: var(--color-primary);
    text-decoration: none;
}

.forgot-password:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    padding: var(--spacing-4);
    font-size: 1rem;
    font-weight: 600;
    background: var(--color-primary);
    color: var(--color-text-white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.auth-submit:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.auth-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.auth-submit.is-loading {
    position: relative;
    color: transparent;
}

.auth-submit.is-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-text-white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.auth-footer {
    margin-top: var(--spacing-6);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.auth-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-error {
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    font-size: 0.875rem;
    display: none;
}

.auth-error.is-visible {
    display: block;
}

.auth-success {
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-success);
    font-size: 0.875rem;
    display: none;
}

.auth-success.is-visible {
    display: block;
}

.auth-actions {
    margin-top: var(--spacing-6);
}

.auth-logo-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* ============================================
   프로필 페이지
   ============================================ */

.profile-page {
    display: flex;
    justify-content: center;
    padding: var(--spacing-6);
}

.profile-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-8);
    width: 100%;
    max-width: 480px;
}

.profile-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 auto var(--spacing-4);
}

.profile-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-1);
}

.profile-role {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    background: var(--color-bg-tertiary);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    display: inline-block;
}

.profile-info {
    margin-bottom: var(--spacing-6);
}

.profile-info-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.profile-info-item:last-child {
    border-bottom: none;
}

.profile-info-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.profile-info-value {
    color: var(--color-text-primary);
    font-weight: 500;
}

.profile-actions {
    margin-top: var(--spacing-4);
}

.profile-edit-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-6);
}

.profile-edit-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.btn-back {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.btn-back:hover {
    background: var(--color-border);
}

.profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.profile-form-actions {
    display: flex;
    gap: var(--spacing-3);
    margin-top: var(--spacing-4);
}

.profile-form-actions .btn {
    flex: 1;
}

.profile-skeleton {
    text-align: center;
}

.skeleton {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-secondary) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

.skeleton-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    margin: 0 auto var(--spacing-4);
}

.skeleton-text {
    height: 20px;
    margin-bottom: var(--spacing-2);
}

.skeleton-text.short {
    width: 60%;
    margin: 0 auto;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.profile-error {
    text-align: center;
    padding: var(--spacing-6);
}

.profile-error p {
    margin-bottom: var(--spacing-4);
    color: var(--color-text-secondary);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-1);
}

/* ============================================
   대시보드
   ============================================ */

.dashboard-welcome {
    margin-bottom: var(--spacing-6);
}

.dashboard-welcome .card h2 {
    margin-bottom: var(--spacing-2);
}

.dashboard-welcome .card p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-1);
}

.dashboard-stats {
    margin-bottom: var(--spacing-6);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

/* 지표 타일 — 가운데 정렬된 거대한 파란 숫자를 쓰지 않는다.
   라벨을 위에, 값을 아래에 두고 왼쪽 정렬해 스캔이 되게 한다. */
.stat-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.stat-label {
    order: -1;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    margin-top: 0;
}

.stat-value {
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 값이 0일 때는 톤을 낮춰서 "볼 것 없음"이 바로 읽히게 */
.stat-card.is-zero .stat-value {
    color: var(--color-text-muted);
    font-weight: 500;
}

.stats-note {
    margin-top: var(--spacing-4);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: center;
}

.stats-loading,
.stats-error {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-text-secondary);
}

.dashboard-quick-actions h3 {
    margin-bottom: var(--spacing-4);
    font-size: 1rem;
    font-weight: 600;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-3);
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.quick-action-card:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.quick-action-icon {
    font-size: 1.5rem;
}

.quick-action-label {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ============================================
   마스터 데이터 관리 (Phase 2)
   ============================================ */

.master-page {
    max-width: 1200px;
    margin: 0 auto;
}

.page-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

.page-tabs {
    display: flex;
    gap: var(--spacing-2);
}

.tab-btn {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-btn:hover {
    background: var(--color-bg-secondary);
}

.tab-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* 리스트 도구모음 */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
}

.search-box {
    display: flex;
    gap: var(--spacing-2);
}

.search-box .form-input {
    width: 200px;
}

/* 셀렉트 박스 */
.form-select {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-primary);
    cursor: pointer;
    min-width: 120px;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-border-focus);
}

/* 데이터 테이블 */
.list-table {
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.table,
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td,
.data-table th,
.data-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.table th,
.data-table th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.table tbody tr:hover,
.data-table tbody tr:hover {
    background: var(--color-bg-secondary);
}

.table tbody tr:last-child td,
.data-table tbody tr:last-child td {
    border-bottom: none;
}

.table-responsive {
    overflow-x: auto;
}

/* 상태 뱃지 */
.status-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
}

.status-badge.status-pending {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.status-badge.status-active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.status-badge.status-inactive {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-secondary);
}

.status-badge.status-suspended {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.status-badge.status-maintenance {
    background: rgba(14, 165, 233, 0.1);
    color: var(--color-info);
}

.status-badge.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* 통신 상태 뱃지 (회수함) */
.status-badge.comm-online {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.status-badge.comm-offline {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-secondary);
}

.status-badge.comm-error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

/* 액션 버튼 그룹 */
.action-buttons {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

/* 버튼 크기 및 색상 변형 */
.btn-sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: 0.75rem;
}

.btn-success {
    background-color: var(--color-success);
    color: var(--color-text-white);
}

.btn-success:hover:not(:disabled) {
    background-color: #16a34a;
}

.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-text-primary);
}

.btn-warning:hover:not(:disabled) {
    background-color: #d97706;
}

.btn-text {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--spacing-1);
}

.btn-text:hover {
    color: var(--color-text-primary);
}

/* 페이지네이션 */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
}

/* 빈 상태 */
.empty-state {
    text-align: center;
    padding: var(--spacing-10);
    color: var(--color-text-secondary);
}

/* 폼 카드 */
.form-card {
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    padding: var(--spacing-6);
    max-width: 800px;
    margin: 0 auto;
}

.form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.form-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.required {
    color: var(--color-danger);
}

/* 진행률 바 (회수함 포화도) */
.progress-bar {
    position: relative;
    width: 100%;
    height: 20px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.progress-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* 읽기 전용 입력 */
.form-input[readonly] {
    background-color: var(--color-bg-tertiary);
    cursor: not-allowed;
}

.form-select[disabled] {
    background-color: var(--color-bg-tertiary);
    cursor: not-allowed;
    opacity: 0.7;
}

/* 운영자 관리 */
.operator-list,
.operator-form,
.operator-view {
    max-width: 1200px;
    margin: 0 auto;
}

/* 닫기 버튼 */
.close-btn {
    font-size: 1.5rem;
    line-height: 1;
}

/* ============================================
   페이지네이션 확장
   ============================================ */

.pagination-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.pagination-icon {
    font-size: 0.875rem;
    font-weight: bold;
}

.pagination-btn {
    min-width: 32px;
}

/* ============================================
   SearchableSelect (LOV 팝업)
   ============================================ */

.searchable-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.searchable-select-input {
    padding-right: 32px !important;
    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='%2364748b' stroke-width='2'%3E%3Cpath d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.searchable-select-clear {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-1);
    line-height: 1;
}

.searchable-select-clear:hover {
    color: var(--color-danger);
}

.searchable-select-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searchable-select-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.searchable-select-modal {
    position: relative;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.searchable-select-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
}

.searchable-select-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.searchable-select-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-1);
    line-height: 1;
}

.searchable-select-close:hover {
    color: var(--color-text-primary);
}

.searchable-select-search {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
}

.searchable-select-search .form-input {
    width: 100%;
}

.searchable-select-content {
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 400px;
}

.searchable-select-loading,
.searchable-select-empty,
.searchable-select-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    color: var(--color-text-secondary);
}

.searchable-select-error {
    color: var(--color-danger);
}

.searchable-select-table {
    width: 100%;
    border-collapse: collapse;
}

.searchable-select-table th,
.searchable-select-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.searchable-select-table th {
    background: var(--color-bg-tertiary);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    position: sticky;
    top: 0;
}

.searchable-select-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.searchable-select-row:hover {
    background: var(--color-primary-light);
}

.searchable-select-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-secondary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.searchable-select-pagination {
    display: flex;
    gap: var(--spacing-1);
}

.searchable-select-info {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* ============================================
   폼 에러 메시지
   ============================================ */

.form-error {
    display: block;
    margin-top: var(--spacing-1);
    font-size: 0.75rem;
    color: var(--color-danger);
}

.form-input.is-invalid {
    border-color: var(--color-danger);
}

.form-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ============================================
   필터 툴바 스켈레톤
   ============================================ */

.skeleton-toolbar {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-4);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
}

.skeleton-btn {
    width: 80px;
    height: 36px;
}

.skeleton-input {
    width: 200px;
    height: 36px;
}

.skeleton-filter {
    width: 120px;
    height: 36px;
}

/* ============================================
   네이버 지도 연동 (회수함 관리)
   ============================================ */

/* 페이지 헤더 레이아웃 */
.page-header-left {
    flex: 1;
}

.page-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* 뷰 토글 버튼 */
.view-toggle {
    display: flex;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
    color: var(--color-text-primary);
}

.view-toggle-btn.active {
    background: var(--color-bg-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* 지도 뷰 컨테이너 */
.map-view-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 250px);
    min-height: 500px;
}

.map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.map-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

.map-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.map-filter-group {
    display: flex;
    gap: var(--spacing-2);
}

.map-filter-group .form-select {
    min-width: 140px;
}

.map-legend {
    display: flex;
    gap: var(--spacing-3);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.map-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* 지도 컨테이너 */
.map-container {
    flex: 1;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 400px;
}

/* 지도 에러 표시 */
.map-error {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-text-secondary);
}

.map-error p {
    margin-bottom: var(--spacing-2);
}

.map-error .error-detail {
    font-size: 0.875rem;
    color: var(--color-danger);
}

.map-error .error-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-3);
}

/* 지도 정보창 */
.map-info-window {
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-3);
    min-width: 200px;
    max-width: 280px;
}

.map-info-window .info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
}

.map-info-window .info-header strong {
    font-size: 0.875rem;
}

.map-info-window .info-body {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.map-info-window .info-address {
    margin-bottom: var(--spacing-2);
}

.map-info-window .info-saturation {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.map-info-window .progress-bar.small {
    height: 14px;
    flex: 1;
}

.map-info-window .progress-bar.small span {
    font-size: 0.625rem;
}

/* 회수함 마커 */
.bin-marker {
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 회수함 상세 팝업 (지도 클릭) */
.bin-detail-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1200;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 360px;
    animation: modalSlideIn 0.2s ease;
}

.bin-detail-popup .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.bin-detail-popup .popup-header h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.bin-detail-popup .popup-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--spacing-1);
    line-height: 1;
}

.bin-detail-popup .popup-close:hover {
    color: var(--color-text-primary);
}

.bin-detail-popup .popup-body {
    padding: var(--spacing-4);
}

.bin-detail-popup .popup-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.bin-detail-popup .popup-row:last-child {
    border-bottom: none;
}

.bin-detail-popup .popup-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.bin-detail-popup .popup-value {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: right;
    max-width: 60%;
}

.bin-detail-popup .popup-value .progress-bar.small {
    width: 100px;
    height: 16px;
}

.bin-detail-popup .popup-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* 진행률 바 small 변형 */
.progress-bar.small {
    height: 16px;
}

.progress-bar.small span {
    font-size: 0.625rem;
}

/* 반응형 */
@media (max-width: 768px) {
    .map-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .map-toolbar-left,
    .map-toolbar-right {
        width: 100%;
    }

    .map-toolbar-right {
        justify-content: space-between;
    }

    .map-filter-group {
        flex-wrap: wrap;
    }

    .map-filter-group .form-select {
        flex: 1;
        min-width: 100px;
    }

    .map-legend {
        display: none;
    }

    .map-view-container {
        height: calc(100vh - 200px);
        min-height: 400px;
    }
}

/* ============================================
   계량증명서 스타일
   ============================================ */

.certificate-preview {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-6);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.certificate-preview .cert-header {
    text-align: center;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-border);
}

.certificate-preview .cert-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2);
    letter-spacing: 0.2em;
}

.certificate-preview .cert-header .cert-number {
    color: var(--color-text-secondary);
    font-size: 1rem;
}

.certificate-preview .cert-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.certificate-preview .cert-parties .party {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.certificate-preview .cert-parties .party h4 {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.certificate-preview .cert-parties .party p {
    margin: var(--spacing-1) 0;
}

.certificate-preview .cert-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-6);
}

.certificate-preview .cert-table th,
.certificate-preview .cert-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    text-align: right;
}

.certificate-preview .cert-table th {
    background: var(--color-bg-secondary);
    font-weight: 600;
    text-align: left;
}

.certificate-preview .cert-table .total-row {
    background: var(--color-bg-tertiary);
}

.certificate-preview .cert-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-6);
}

.certificate-preview .cert-details .detail-row {
    display: flex;
    justify-content: space-between;
}

.certificate-preview .cert-details .detail-row.total {
    font-weight: 700;
    font-size: 1.125rem;
    padding-top: var(--spacing-2);
    border-top: 1px solid var(--color-border);
}

.certificate-preview .cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--color-border);
}

.certificate-preview .cert-footer .status-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.certificate-preview .cert-footer .signature-info {
    text-align: right;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.certificate-preview .cert-notes {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.certificate-preview .cert-cancelled {
    margin-top: var(--spacing-4);
    padding: var(--spacing-4);
    background: #fef2f2;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
}

.certificate-preview .cert-cancelled h4 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-2);
}

/* 인쇄 스타일 */
@media print {
    .app-header,
    .app-sidebar,
    .breadcrumb,
    .modal-footer,
    .btn {
        display: none !important;
    }

    .modal {
        position: static;
        background: transparent;
    }

    .modal-content {
        box-shadow: none;
        border: none;
        max-width: 100%;
    }

    .certificate-preview {
        border: none;
        padding: 0;
    }
}

/* 반응형 */
@media (max-width: 768px) {
    .certificate-preview .cert-parties {
        grid-template-columns: 1fr;
    }

    .certificate-preview .cert-footer {
        flex-direction: column;
        gap: var(--spacing-3);
        text-align: center;
    }
}

/* ============================================
   알림 (Phase 9-3)
   ============================================ */

.notification-list {
    display: flex;
    flex-direction: column;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.notification-item:hover {
    background: var(--color-bg-secondary);
}

.notification-item.unread {
    background: #f0f9ff;
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
}

.notification-item {
    position: relative;
}

.notification-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.notification-message {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.notification-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: var(--spacing-2);
}

.notification-actions {
    display: flex;
    gap: var(--spacing-1);
    flex-shrink: 0;
}

.btn-icon {
    background: none;
    border: none;
    padding: var(--spacing-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.btn-icon:hover {
    background: var(--color-bg-tertiary);
}

/* 알림 설정 */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.setting-info {
    flex: 1;
}

.setting-label {
    font-weight: 600;
    margin-bottom: var(--spacing-1);
}

.setting-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.setting-channels {
    display: flex;
    gap: var(--spacing-4);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: 0.875rem;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* 빈 상태 */
.empty-state {
    text-align: center;
    padding: var(--spacing-8);
    color: var(--color-text-secondary);
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--spacing-3);
}

/* 탭 */
.tabs {
    display: flex;
    gap: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-2);
}

.tab-btn {
    padding: var(--spacing-2) var(--spacing-4);
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.tab-btn:hover {
    background: var(--color-bg-secondary);
}

.tab-btn.active {
    background: var(--color-primary);
    color: white;
}

.tab-btn .badge {
    background: var(--color-danger);
    color: white;
    border-radius: var(--radius-full);
    padding: 2px 8px;
    font-size: 0.75rem;
}

/* 페이징 */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-1);
}

.page-btn {
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.page-btn:hover {
    background: var(--color-bg-secondary);
}

.page-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ============================================
   시스템 설정 (Phase 9-4)
   ============================================ */

.settings-tabs {
    display: flex;
    gap: var(--spacing-2);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: var(--spacing-2);
    overflow-x: auto;
}

.settings-tabs .tab-btn {
    padding: var(--spacing-3) var(--spacing-4);
    white-space: nowrap;
}

.settings-form {
    max-width: 800px;
}

.settings-form .form-group {
    margin-bottom: var(--spacing-4);
}

.settings-form h3 {
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
}

.settings-form h4 {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    color: var(--color-text-secondary);
}

.form-actions {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-border);
}

.form-text {
    display: block;
    margin-top: var(--spacing-1);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.classification-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-3);
}

.type-item {
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

/* ==========================================
   Phase 9-5: 감사 로그
   ========================================== */

/* 액션 배지 */
.action-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.action-badge.action-create { background: #e8f5e9; color: #2e7d32; }
.action-badge.action-read { background: #e3f2fd; color: #1976d2; }
.action-badge.action-update { background: #fff3e0; color: #f57c00; }
.action-badge.action-delete { background: #ffebee; color: #c62828; }
.action-badge.action-login { background: #e8f5e9; color: #2e7d32; }
.action-badge.action-logout { background: #fce4ec; color: #c2185b; }
.action-badge.action-approve { background: #e8f5e9; color: #388e3c; }
.action-badge.action-reject { background: #ffebee; color: #d32f2f; }
.action-badge.action-issue { background: #e1f5fe; color: #0288d1; }
.action-badge.action-other { background: #f5f5f5; color: #616161; }

/* 리소스 배지 */
.resource-badge {
    display: inline-block;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* 테이블 내 컬럼 스타일 */
.data-table .datetime {
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.data-table .description {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.data-table .ip-address {
    font-family: monospace;
    font-size: var(--font-size-sm);
}

.data-table .user-info small {
    display: block;
    margin-top: 2px;
}

/* 상세 모달 */
.detail-section {
    margin-bottom: var(--spacing-6);
}

.detail-section h4 {
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.detail-item label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.detail-item span {
    font-size: var(--font-size-base);
}

.description-box,
.user-agent-box {
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.user-agent-box {
    font-family: monospace;
    word-break: break-all;
}

/* 데이터 변경 비교 */
.data-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.diff-panel {
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
}

.diff-panel.before {
    background: #fff8e1;
}

.diff-panel.after {
    background: #e8f5e9;
}

.diff-panel h5 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.diff-panel pre {
    margin: 0;
    padding: var(--spacing-2);
    background: rgba(0,0,0,0.05);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

@media (max-width: 768px) {
    .data-diff {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Phase 9-6: 고객 지원
   ========================================== */

/* 지원 탭 */
.support-tabs {
    display: flex;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-2);
}

.support-tabs .tab-btn {
    padding: var(--spacing-2) var(--spacing-4);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-base);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s;
}

.support-tabs .tab-btn:hover {
    color: var(--color-primary);
}

.support-tabs .tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* 문의 상세 */
.inquiry-detail .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-4);
}

.inquiry-detail .detail-meta {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.inquiry-detail .status-actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.inquiry-detail h4 {
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-lg);
}

.inquiry-detail .inquiry-info {
    display: flex;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.inquiry-detail .inquiry-content {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    white-space: pre-wrap;
}

/* 답변 섹션 */
.replies-section h5 {
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-2);
    border-bottom: 1px solid var(--color-border);
}

.replies-list {
    margin-bottom: var(--spacing-4);
}

.reply {
    padding: var(--spacing-3);
    margin-bottom: var(--spacing-2);
    border-radius: var(--radius-md);
}

.reply.admin-reply {
    background: #e3f2fd;
    border-left: 3px solid var(--color-primary);
}

.reply.user-reply {
    background: var(--color-bg-secondary);
}

.reply-header {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
}

.reply-author {
    font-weight: 600;
}

.reply-date {
    color: var(--color-text-secondary);
}

.reply-content {
    white-space: pre-wrap;
}

.reply-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.reply-form .btn {
    align-self: flex-end;
}

/* FAQ */
.faq-category {
    margin-bottom: var(--spacing-4);
}

.faq-category h4 {
    margin-bottom: var(--spacing-2);
    padding: var(--spacing-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-2);
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    cursor: pointer;
    background: white;
    transition: background 0.2s;
}

.faq-question:hover {
    background: var(--color-bg-secondary);
}

.faq-question .toggle-icon {
    font-weight: bold;
    width: 20px;
    text-align: center;
}

.faq-item.open .toggle-icon {
    transform: rotate(45deg);
}

.faq-question .faq-actions {
    margin-left: auto;
    display: flex;
    gap: var(--spacing-1);
}

.faq-answer {
    display: none;
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    white-space: pre-wrap;
}

.faq-item.open .faq-answer {
    display: block;
}

/* 공지사항 */
.notice-detail .notice-meta {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-4);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.notice-detail .notice-content {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-4);
    min-height: 200px;
}

.notice-detail .notice-actions {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
}

.important-row {
    background: #fff8e1;
}

/* 체크박스 라벨 */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ============================================
   Statistics Page Styles
   ============================================ */

/* Stats Card (통계 카드) */
.stats-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    transition: box-shadow 0.2s ease;
}

.stats-card:hover {
    box-shadow: var(--shadow-md);
}

.stats-card .stats-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stats-card .stats-icon.primary {
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
}

.stats-card .stats-icon.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--color-success);
}

.stats-card .stats-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-warning);
}

.stats-card .stats-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.stats-card .stats-icon.info {
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
}

.stats-card .stats-content {
    flex: 1;
    min-width: 0;
}

.stats-card .stats-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.stats-card .stats-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-1);
}

.stats-card .stats-change {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-2);
}

.stats-card .stats-change.positive {
    color: var(--color-success);
}

.stats-card .stats-change.negative {
    color: var(--color-danger);
}

/* Grid Layouts */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-4);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
}

@media (max-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Bin Status Grid (회수함 상태 그리드) */
.bin-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-3);
}

.bin-status-item {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bin-status-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.bin-status-item .bin-status-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.bin-status-item .bin-status-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
}

.bin-status-item.critical .bin-status-count {
    color: var(--color-danger);
}

.bin-status-item.warning .bin-status-count {
    color: var(--color-warning);
}

.bin-status-item.normal .bin-status-count {
    color: var(--color-success);
}

.bin-status-item.empty .bin-status-count {
    color: var(--color-text-secondary);
}

/* Environment Stats Grid (환경 통계 그리드) */
.env-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
}

.env-stat-item {
    background: var(--color-success-soft);
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.env-stat-item .env-stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-success);
    flex-shrink: 0;
}

.env-stat-item .env-stat-content {
    flex: 1;
    min-width: 0;
}

.env-stat-item .env-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #166534;
    line-height: 1.2;
}

.env-stat-item .env-stat-label {
    font-size: var(--font-size-sm);
    color: #15803d;
    margin-top: var(--spacing-1);
}

/* Chart Container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

/* Period Filter (기간 필터) */
.period-filter {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.period-filter .btn {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

/* Summary Cards Row */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* Settlement Summary (정산 요약) */
.settlement-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.settlement-summary-item {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-4);
    text-align: center;
}

.settlement-summary-item .summary-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-2);
}

.settlement-summary-item .summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.settlement-summary-item .summary-value.positive {
    color: var(--color-success);
}

.settlement-summary-item .summary-value.negative {
    color: var(--color-danger);
}

/* Certificate Details (계량증명서 상세) */
.certificate-detail {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-6);
}

.certificate-header {
    text-align: center;
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.certificate-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-2);
}

.certificate-header .certificate-number {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.certificate-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

.certificate-section {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.certificate-section h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin-bottom: var(--spacing-3);
}

.certificate-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.certificate-row:last-child {
    border-bottom: none;
}

.certificate-row .label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.certificate-row .value {
    color: var(--color-text-primary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .certificate-body {
        grid-template-columns: 1fr;
    }
}

/* Stats Grid (KPI 요약 카드 그리드) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stats-card.highlight {
    background: var(--color-primary);
    color: white;
}

.stats-card.highlight .stats-value,
.stats-card.highlight .stats-label {
    color: white;
}

.stats-card.highlight .stats-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Total Stats Grid (전체 현황 그리드) */
.total-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-4);
    text-align: center;
}

.total-stat-item {
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.total-stat-item .total-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.total-stat-item .total-stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
}

/* Simple Bar Chart */
.simple-bar-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 200px;
    gap: var(--spacing-2);
    padding: var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.simple-bar-chart .bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 20px;
}

.simple-bar-chart .bar {
    width: 100%;
    max-width: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    min-height: 4px;
    margin-top: auto;
    transition: background 0.2s ease;
}

.simple-bar-chart .bar-item:hover .bar {
    background: var(--color-primary-hover);
}

.simple-bar-chart .bar-label {
    font-size: 10px;
    color: var(--color-text-secondary);
    margin-top: var(--spacing-2);
    text-align: center;
}

.chart-summary {
    display: flex;
    justify-content: center;
    gap: var(--spacing-6);
    padding: var(--spacing-3) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.chart-summary span {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

/* Rank Badge */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.rank-badge.rank-1 {
    background: var(--color-warning-soft); color: var(--color-warning); box-shadow: inset 0 0 0 1px var(--color-warning);
    color: white;
}

.rank-badge.rank-2 {
    background: var(--color-bg-tertiary); color: var(--color-text-secondary); box-shadow: inset 0 0 0 1px var(--color-border-strong);
    color: white;
}

.rank-badge.rank-3 {
    background: var(--color-bg-tertiary); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border);
    color: white;
}

.rank-badge.rank-other {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* Bin Status Fault variant */
.bin-status-item.fault .bin-status-count {
    color: #6b7280;
}

/* ============================================
   회수 현황 대시보드
   ============================================ */

.ov-skeleton { padding: 40px; text-align: center; color: var(--color-text-muted); }

/* 데이터 출처 고지 — 시뮬레이션 값을 실제로 오인하면 안 된다 */
.ov-notice {
    border: 1px solid var(--color-border-strong);
    border-left: 3px solid var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-text-secondary);
    padding: 12px 16px;
    margin-bottom: var(--spacing-5);
    font-size: 0.8125rem;
    line-height: 1.6;
    border-radius: var(--radius-md);
}
.ov-notice strong { color: var(--color-warning); }

/* 요약 타일 — 누르면 해당 상태만 걸러진다 */
.ov-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}
.ov-tile {
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--spacing-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: left; cursor: pointer; min-height: 0;
    font-family: inherit;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ov-tile:hover { border-color: var(--color-border-strong); }
.ov-tile.is-on { border-color: var(--color-primary); background: var(--color-primary-light); }
.ov-tile.is-static { cursor: default; }
.ov-tile.is-static:hover { border-color: var(--color-border); }
.ov-tile-label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }
.ov-tile-value { font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em;
                 font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.ov-tile-sub { font-size: 0.6875rem; color: var(--color-text-muted); }

/* 상태색 — 색만으로 알리지 않고 항상 라벨이 함께 붙는다 */
.ov-urgent { color: var(--color-danger); }
.ov-need   { color: var(--color-warning); }
.ov-soon   { color: var(--color-info); }
.ov-ok     { color: var(--color-success); }
/* 적재량을 못 받은 지점. 0%가 아니라 '모른다'라서 여유(초록)와 색을 나눈다 */
.ov-unknown { color: var(--color-text-muted); }

.ov-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--spacing-5);
    align-items: start;
}
@media (max-width: 1100px) { .ov-split { grid-template-columns: minmax(0, 1fr); } }

.ov-map-panel, .ov-list-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    padding: var(--spacing-4);
    min-width: 0;
}
.ov-panel-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--spacing-3); margin-bottom: var(--spacing-3);
}
.ov-panel-head h3 { font-size: 0.9375rem; font-weight: 600; border: none; padding: 0; margin: 0; }
.ov-panel-note { font-size: 0.75rem; color: var(--color-text-muted); }

.ov-map { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: 8px; }
.ov-svg { width: 100%; height: auto; display: block; }

/* 실제 지도가 들어갔을 때.
   분포도(SVG)는 viewBox 로 제 높이를 갖지만 지도는 그냥 div 라 높이가 0이 된다.
   실제로 좁은 화면에서 16px 로 찌그러졌다. 그래서 높이를 직접 준다. */
.ov-map.is-live {
    height: 420px;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 900px) {
    .ov-map.is-live { height: 320px; }
}
/* 지도 위에 몇 곳을 그렸는지. 걸러 놓고 잊는 일이 흔하다 */
.ov-map-note {
    margin: var(--spacing-2) 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ov-pt { cursor: pointer; stroke: var(--color-bg-primary); stroke-width: 1; }
.ov-pt.is-dim { opacity: 0.12; }
.ov-pt:hover { stroke: var(--color-text-primary); stroke-width: 1.5; }
circle.ov-urgent { fill: var(--color-danger); }
circle.ov-need   { fill: var(--color-warning); }
circle.ov-soon   { fill: var(--color-info); }
circle.ov-ok     { fill: var(--color-success); }
circle.ov-unknown { fill: var(--color-text-muted); }
circle.ov-unknown{ fill: var(--color-text-muted); }

.ov-depot-mark rect { fill: var(--color-primary); stroke: var(--color-bg-primary); stroke-width: 2; }
.ov-depot-mark text { fill: var(--color-primary); font-size: 13px; font-weight: 600; }

.ov-legend {
    list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px;
    padding: 10px 2px 0; margin: 0; font-size: 0.75rem; color: var(--color-text-secondary);
}
.ov-legend li { display: flex; align-items: center; gap: 6px; margin: 0; }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ov-dot.ov-urgent { background: var(--color-danger); }
.ov-dot.ov-need   { background: var(--color-warning); }
.ov-dot.ov-soon   { background: var(--color-info); }
.ov-dot.ov-ok     { background: var(--color-success); }
.ov-dot.ov-unknown { background: var(--color-text-muted); }
.ov-dot.ov-depot  { background: var(--color-primary); border-radius: 2px; }

.ov-detail { margin-top: var(--spacing-3); }
.ov-detail-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-3) var(--spacing-4); }
.ov-detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); margin-bottom: var(--spacing-2); }
.ov-detail-grid { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 4px var(--spacing-3); margin: 0; font-size: 0.8125rem; }
.ov-detail-grid dt { color: var(--color-text-muted); }
.ov-detail-grid dd { margin: 0; overflow-wrap: anywhere; }

.ov-badge {
    font-size: 0.75rem; font-weight: 500; padding: 2px 8px; border-radius: var(--radius-sm);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ov-badge.ov-urgent { background: var(--color-danger-soft); }
.ov-badge.ov-need   { background: var(--color-warning-soft); }
.ov-badge.ov-soon   { background: var(--color-info-soft); }
.ov-badge.ov-ok     { background: var(--color-success-soft); }
.ov-badge.ov-unknown { background: var(--color-bg-tertiary); }

.ov-zones { list-style: none; padding: 0; margin: 0; }
.ov-zone {
    display: flex; align-items: center; gap: var(--spacing-2);
    padding: 9px 0; border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem; margin: 0;
}
.ov-zone:last-child { border-bottom: none; }
.ov-zone-swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.ov-depot-swatch { background: var(--color-primary); }
.ov-zone-name { font-weight: 500; flex: 1; min-width: 0; }
.ov-zone-num, .ov-zone-need, .ov-zone-avg { color: var(--color-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-zone-addr { color: var(--color-text-muted); font-size: 0.75rem; overflow-wrap: anywhere; }

.ov-filters { display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.ov-filters .form-input { flex: 1; }
.ov-filters .form-select { width: 150px; flex: none; }

.ov-list { max-height: 560px; overflow-y: auto; }
.ov-table td { vertical-align: middle; }
.ov-table tbody tr { cursor: pointer; }
.ov-table tbody tr:hover { background: var(--color-bg-tertiary); }
.ov-bar { width: 62px; height: 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.ov-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); }
.ov-bar-fill.ov-urgent { background: var(--color-danger); }
.ov-bar-fill.ov-need   { background: var(--color-warning); }
.ov-bar-fill.ov-soon   { background: var(--color-info); }
.ov-bar-fill.ov-ok     { background: var(--color-success); }
.ov-bar-fill.ov-unknown { background: var(--color-text-muted); }
.ov-pct { display: block; font-size: 0.6875rem; color: var(--color-text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.ov-name { font-weight: 500; }
.ov-addr { font-size: 0.6875rem; color: var(--color-text-muted); }
.ov-outside {
    margin: 8px 2px 0;
    font-size: 0.75rem;
    color: var(--color-warning);
    line-height: 1.5;
}

/* 기계별 적재량 — 한 건물에 여러 대 */
.ov-machines { margin-top: var(--spacing-3); border-top: 1px solid var(--color-border); padding-top: var(--spacing-3); }
.ov-machines-head { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--spacing-2); }
.ov-machines ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ov-machines li { display: flex; align-items: center; gap: var(--spacing-2); margin: 0; font-size: 0.8125rem; }
.ov-machine-label { width: 46px; flex: none; color: var(--color-text-secondary); }
.ov-machines .ov-bar { flex: 1; width: auto; }
.ov-machine-pct { width: 38px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.ov-machine-net { width: 62px; flex: none; font-size: 0.6875rem; color: var(--color-text-muted); text-align: right; }

/* ============================================
   업체 설정
   ============================================ */
.set-lead { color: var(--color-text-secondary); font-size: 0.875rem; margin-bottom: var(--spacing-4); max-width: 70ch; }

.set-counts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--spacing-3); margin-bottom: var(--spacing-5);
}
.set-counts > div {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--spacing-3); display: flex; flex-direction: column; gap: 2px;
}
.set-counts span { font-size: 0.6875rem; color: var(--color-text-muted); }
.set-counts b { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.set-form { max-width: 760px; }
.set-form h3 {
    font-size: 0.875rem; font-weight: 600; margin: var(--spacing-6) 0 var(--spacing-3);
    padding-bottom: var(--spacing-2); border-bottom: 1px solid var(--color-border);
}
.set-form h3:first-child { margin-top: 0; }
.set-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); }
@media (max-width: 700px) { .set-form .form-row { grid-template-columns: 1fr; } }
.set-form .form-group { margin-bottom: var(--spacing-4); }
.form-hint { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px; line-height: 1.5; }
.form-hint b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

.set-inline-form {
    margin-top: var(--spacing-5); padding: var(--spacing-5);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.set-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-3); }
.set-card {
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--spacing-4); background: var(--color-bg-primary);
    display: flex; flex-direction: column; gap: var(--spacing-2);
}
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.set-card-addr { font-size: 0.8125rem; color: var(--color-text-secondary); margin: 0; }
.set-card-grid { display: grid; grid-template-columns: 56px 1fr; gap: 2px var(--spacing-2); margin: 0; font-size: 0.75rem; }
.set-card-grid dt { color: var(--color-text-muted); }
.set-card-grid dd { margin: 0; overflow-wrap: anywhere; }
.set-card-note {
    font-size: 0.75rem; color: var(--color-text-secondary); margin: 0;
    padding: var(--spacing-2); background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm); line-height: 1.55;
}
.set-card .btn { align-self: flex-start; margin-top: auto; }

.set-add {
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md);
    background: transparent; color: var(--color-text-secondary);
    padding: var(--spacing-4); cursor: pointer; font-family: inherit; font-size: 0.875rem;
    min-height: 44px; margin-top: var(--spacing-3);
}
.set-add:hover { border-color: var(--color-primary); color: var(--color-primary); }

.set-weight { width: 110px; }

/* =================================================================
   로그인 입구 — 넷이 쓰는 플랫폼이라 자리를 먼저 고른다
   ================================================================= */

/* 카드 4장이 들어가야 하므로 로그인 칸보다 넓다 */
.auth-container.is-wide {
    max-width: 520px;
}

.entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
    margin-top: var(--spacing-6);
}

@media (max-width: 560px) {
    .entry-grid { grid-template-columns: minmax(0, 1fr); }
}

.entry-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: var(--spacing-4);
    /* 장갑 낀 손·햇빛 아래를 전제로 한다. 작게 만들지 않는다 */
    min-height: 116px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.entry-card:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.entry-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.entry-card-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.entry-card-summary {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.entry-card-detail {
    margin-top: var(--spacing-2);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.entry-card-note {
    margin-top: var(--spacing-1);
    font-size: 0.6875rem;
    color: var(--color-primary);
}

/* 로그인 칸 위에 지금 고른 자리를 보여준다 */
.auth-entry {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-3);
    font-size: 0.875rem;
}

.auth-entry-label {
    font-weight: 600;
    color: var(--color-primary);
}

.auth-entry-back {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.auth-entry-back:hover { color: var(--color-text-primary); }

/* =================================================================
   배차 — 오늘 누가 어디를 도는가
   ================================================================= */

.dp-actions { display: flex; align-items: center; gap: var(--spacing-2); }
.dp-date { width: 160px; }

/* 지금 보고 있는 것이 제안인지 확정인지가 가장 먼저 보여야 한다 */
.dp-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-muted);
    border-radius: var(--radius-sm);
    background: var(--color-bg-secondary);
    font-size: 0.875rem;
}
.dp-status strong { display: block; color: var(--color-text-primary); }
.dp-status span { color: var(--color-text-secondary); }
.dp-status-actions { display: flex; gap: var(--spacing-2); flex-shrink: 0; }

.dp-status-draft { border-left-color: var(--color-warning); }
.dp-status-confirmed { border-left-color: var(--color-primary); }
.dp-status-in_progress { border-left-color: var(--color-info); }
.dp-status-cancelled { border-left-color: var(--color-text-muted); opacity: 0.75; }

.dp-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .dp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ov-tile-value small {
    font-size: 0.75rem; font-weight: 500; margin-left: 2px;
    color: var(--color-text-muted);
}

/* 경로 색 — 기사 수만큼. 지도와 목록에서 같은 색을 쓴다 */
.dp-r1 { --dp-c: var(--color-primary); }
.dp-r2 { --dp-c: #2F5279; }
.dp-r3 { --dp-c: #8E5C0D; }
.dp-r4 { --dp-c: #9E3227; }
.dp-r5 { --dp-c: #55407A; }

.dp-line {
    fill: none;
    stroke: var(--dp-c);
    stroke-width: 2;
    stroke-linejoin: round;
    opacity: 0.55;
}
.dp-line.is-dim { opacity: 0.08; }

.dp-stop circle { fill: var(--dp-c); stroke: var(--color-bg-primary); stroke-width: 1.5; }
.dp-stop text { fill: #fff; font-size: 10px; font-weight: 600; pointer-events: none; }
.dp-stop.is-dim { opacity: 0.12; }

.dp-swatch {
    width: 10px; height: 10px; border-radius: 2px;
    background: var(--dp-c); flex-shrink: 0;
}

/* 기사별 경로 */
.dp-route {
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.dp-route:last-child { border-bottom: none; }

.dp-route-head {
    display: flex; align-items: center; gap: var(--spacing-2);
    cursor: pointer; font-size: 0.9375rem;
}
.dp-route-head:hover strong { color: var(--color-primary); }

.dp-chip {
    font-size: 0.6875rem; padding: 1px 6px;
    border: 1px solid var(--color-border); border-radius: 10px;
    color: var(--color-text-muted);
}

.dp-route-stat {
    display: flex; flex-wrap: wrap; gap: var(--spacing-3);
    margin: var(--spacing-1) 0 var(--spacing-2) 18px;
    font-size: 0.75rem; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.dp-route-note {
    margin: 0 0 var(--spacing-2) 18px;
    font-size: 0.75rem; line-height: 1.5; color: var(--color-text-muted);
}

.dp-stops { list-style: none; margin: 0; padding: 0; }

.dp-stop-row {
    display: flex; align-items: flex-start; gap: var(--spacing-3);
    padding: var(--spacing-2) 0;
    border-top: 1px dashed var(--color-border);
}

.dp-seq {
    flex-shrink: 0; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    font-size: 0.6875rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.dp-stop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dp-stop-main b { font-size: 0.8125rem; font-weight: 500; }
.dp-stop-main span { font-size: 0.75rem; }

.dp-stop-meta {
    display: flex; flex-wrap: wrap; gap: var(--spacing-2);
    color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}

.dp-stop-side {
    flex-shrink: 0; display: flex; flex-direction: column;
    align-items: flex-end; gap: 4px;
}
.dp-eta {
    font-size: 0.75rem; color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.dp-stop-tools { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end; }

.dp-mini {
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-primary);
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.dp-mini:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dp-mini-danger:hover { border-color: var(--color-danger); color: var(--color-danger); }

.dp-stop-depot .dp-seq {
    background: var(--color-primary); color: #fff;
}

/* 오늘 못 가는 곳 */
.dp-deferred { margin-top: var(--spacing-4); }
.dp-deferred-note {
    font-size: 0.8125rem; line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-3); max-width: 70ch;
}

.dp-history-card { margin-top: var(--spacing-4); }

.dp-badge {
    font-size: 0.6875rem; padding: 2px 8px; border-radius: 10px;
    background: var(--color-bg-secondary); color: var(--color-text-secondary);
}
.dp-badge-confirmed { background: var(--color-primary-light); color: var(--color-primary); }
.dp-badge-draft { background: var(--color-warning-soft); color: var(--color-warning); }
.dp-badge-cancelled { opacity: 0.6; }

/* =================================================================
   모션 — 가이드라인 8장

   움직임은 설명이지 장식이 아니다. 값을 매번 새로 정하지 않고
   여기 네 개만 쓴다. 전부 300ms 이하다 — 기사는 하루에 같은 화면을
   30번 본다. 처음엔 근사하던 것이 열 번째부터는 기다리는 시간이 된다.
   ================================================================= */
:root {
    --motion-instant: 90ms;    /* 눌림, 호버 — 즉각 반응해야 하는 것 */
    --motion-quick:  160ms;    /* 상태 바뀜, 토글, 강조 */
    --motion-move:   240ms;    /* 자리 이동, 펼침/접힘 */
    --motion-enter:  320ms;    /* 화면 밖에서 들어오는 것 (모달, 시트) */

    /* 시작은 빠르고 끝은 부드럽게 — 실제 물체가 멈추는 방식 */
    --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-both: cubic-bezier(0.45, 0, 0.25, 1);
}

/* 손끝 반응.
   반응이 없으면 안 눌렸다고 생각하고 또 누른다.
   장갑을 끼면 촉감 확인도 안 된다. :hover 가 아니라 :active 다. */
.btn:active:not(:disabled),
button:active:not(:disabled) {
    transform: scale(0.97);
}

.btn,
button {
    transition: transform var(--motion-instant) var(--ease-out),
                background-color var(--motion-instant) var(--ease-out),
                border-color var(--motion-instant) var(--ease-out);
}

/* 목록에서 빠지는 항목.
   즉시 사라지면 무엇이 사라졌는지 못 본다.
   반대로 새로 생긴 것은 조용히 나타난다 — 새로고침마다 화면이 요동치면 안 된다. */
.is-leaving {
    transition: opacity var(--motion-quick) var(--ease-out),
                transform var(--motion-quick) var(--ease-out);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
}

/* =================================================================
   가입 신청 · 검토

   신청 쪽은 로그인하지 않은 사람이, 대부분 휴대폰으로 연다.
   검토 쪽은 관리자가 사무실 큰 화면에서 훑고 조작한다.
   같은 기능이지만 밀도가 다르다.
   ================================================================= */

.auth-container.is-signup { max-width: 560px; }

.signup-card { padding-bottom: var(--spacing-2); }

/* --- 단계 표시 -------------------------------------------------
   번호를 쓰는 이유: 여기는 실제 순서다. 앞 단계를 마쳐야 다음이 열린다. */
.signup-steps {
    display: flex;
    gap: var(--spacing-2);
    list-style: none;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.signup-steps li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.signup-step-no {
    flex: none;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
}

.signup-step-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.signup-steps .is-now { color: var(--color-text-primary); font-weight: 600; }
.signup-steps .is-now .signup-step-no {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-ink);
}

.signup-steps .is-done { color: var(--color-text-secondary); }
.signup-steps .is-done .signup-step-no {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- 자격 고르기 --- */
.signup-field { border: none; margin-bottom: var(--spacing-5); }

.signup-roles {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.signup-role {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    /* 휴대폰에서 장갑 낀 손으로도 눌린다 */
    min-height: 56px;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    /* <button> 은 글자색을 물려받지 않는다. 지정하지 않으면 브라우저 기본색(검정)이
       그대로 쓰여 다크 모드에서 어두운 바탕에 검은 글씨가 된다. */
    color: var(--color-text-primary);
    transition: border-color var(--motion-instant) var(--ease-out),
                background-color var(--motion-instant) var(--ease-out);
}

.signup-role b { font-size: 0.9375rem; color: var(--color-text-primary); }
.signup-role span { font-size: 0.8125rem; color: var(--color-text-secondary); }

.signup-role:hover { border-color: var(--color-border-strong); }
.signup-role:active { background: var(--color-bg-secondary); }

/* 고른 것은 색만으로 표시하지 않는다 — 테두리 굵기와 왼쪽 띠가 함께 바뀐다 */
.signup-role.is-picked {
    border-color: var(--color-primary);
    border-left-width: 3px;
    background: var(--color-primary-light);
}
.signup-role.is-picked b { color: var(--color-primary); }

/* --- 입력 줄 --- */
.signup-inline {
    display: flex;
    gap: var(--spacing-2);
    align-items: stretch;
}

.signup-inline .form-input,
.signup-inline .form-select { flex: 1; min-width: 0; }

.signup-inline .btn { flex: none; min-height: 38px; }

.signup-code {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    letter-spacing: 0.35em;
}

/* 업체 고유번호 — 대문자로만 들어온다. 소문자로 쳐도 화면에서 대문자로 보인다 */
.signup-orgcode {
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* 이미 정해져 바꿀 수 없는 값. 입력칸처럼 보이면 눌러 볼 수밖에 없다 */
.signup-fixed {
    padding: 8px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* 입력칸 바로 아래 붙는 확인 문구 */
.signup-ok-inline {
    margin-top: var(--spacing-2);
    margin-bottom: 0;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.8125rem;
}

.signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--spacing-4);
}

@media (max-width: 560px) {
    .signup-grid { grid-template-columns: minmax(0, 1fr); }
    .signup-inline { flex-direction: column; }
    .signup-inline .btn { min-height: 44px; }

    /* 이 화면은 휴대폰에서 쓴다. 기본 입력칸 높이(38px)로는
       손가락으로 정확히 짚기 어렵다. */
    .signup-card .form-input,
    .signup-card .form-select { min-height: 44px; }
}

.signup-hint {
    margin-top: var(--spacing-1);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.signup-opt {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* --- 알림 문구 --- */
.signup-alert,
.signup-ok,
.signup-devcode {
    padding: var(--spacing-3) var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    font-size: 0.875rem;
    line-height: 1.6;
}

.signup-alert {
    background: var(--color-danger-soft);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.signup-ok {
    background: var(--color-success-soft);
    border-left-color: var(--color-success);
    color: var(--color-success);
}

/* 메일 발송이 연결되기 전까지만 나온다. 숨기지 않고 이유를 함께 적는다 */
.signup-devcode {
    background: var(--color-info-soft);
    border-left-color: var(--color-info);
    color: var(--color-info);
}

.signup-devcode b {
    font-family: var(--font-mono);
    font-size: 1.0625rem;
    letter-spacing: 0.15em;
}

/* --- 동의 --- */
.signup-consent {
    margin: var(--spacing-5) 0;
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.signup-consent-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
}

.signup-consent-body {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 4px var(--spacing-3);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-3);
}

.signup-consent-body dt { color: var(--color-text-muted); }
.signup-consent-body dd { color: var(--color-text-secondary); }

.signup-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    /* 체크박스 한 칸을 누르기 어려우면 동의를 못 하고 되돌아간다 */
    min-height: 44px;
    font-size: 0.875rem;
    line-height: 1.6;
    cursor: pointer;
}

.signup-check input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--color-primary);
}

/* --- 서류 ---
   이 화면은 휴대폰에서 열린다. 서류 고르기·지우기도 손가락으로 누른다.
   기본 버튼 높이(36~38px)로는 옆 버튼을 같이 누른다. */
.signup-upload { margin-bottom: var(--spacing-4); }

.signup-upload .form-select,
.signup-upload .btn { min-height: 44px; }

.signup-docs .btn { min-height: 44px; }

.signup-file { cursor: pointer; }

.signup-docs {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--spacing-4);
}

.signup-docs li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    flex-wrap: wrap;
    padding: var(--spacing-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.signup-docs b { flex: none; font-weight: 600; }
.signup-docs span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}
.signup-docs em {
    flex: none;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.signup-purged { flex: none; font-size: 0.75rem; color: var(--color-text-muted); }

.signup-empty {
    padding: var(--spacing-4) 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.signup-note {
    margin-bottom: var(--spacing-4);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.signup-actions {
    display: flex;
    gap: var(--spacing-2);
    justify-content: flex-end;
    margin-top: var(--spacing-5);
}

.signup-actions .btn {
    min-height: 44px;
    padding-left: var(--spacing-5);
    padding-right: var(--spacing-5);
}

/* 눌린 것이 손끝에 보여야 두 번 누르지 않는다 */
.signup-actions .btn:active:not(:disabled) { transform: scale(0.98); }

/* --- 접수 완료 --- */
.signup-receipt {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.signup-receipt span { font-size: 0.8125rem; color: var(--color-text-muted); }
.signup-receipt b {
    font-size: 1.375rem;
    letter-spacing: 0.06em;
    color: var(--color-text-primary);
}

.signup-next {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-6);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.signup-next li { padding-left: var(--spacing-4); position: relative; }
.signup-next li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 5px;
    height: 1px;
    background: var(--color-text-muted);
}

.signup-sep { margin: 0 var(--spacing-2); color: var(--color-text-muted); }

/* --- 상태 카드 (조회 · 검토 결과) --- */
.signup-state {
    margin-top: var(--spacing-5);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-text-muted);
    background: var(--color-bg-secondary);
}

.signup-state b { display: block; font-size: 1rem; margin-bottom: var(--spacing-1); }
.signup-state p { font-size: 0.875rem; line-height: 1.7; color: var(--color-text-secondary); }

.signup-tone-ok   { border-left-color: var(--color-success); background: var(--color-success-soft); }
.signup-tone-ok b { color: var(--color-success); }
.signup-tone-bad   { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.signup-tone-bad b { color: var(--color-danger); }
.signup-tone-wait   { border-left-color: var(--color-info); background: var(--color-info-soft); }
.signup-tone-wait b { color: var(--color-info); }

.signup-reason {
    margin-top: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
}

.signup-state-meta {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 3px var(--spacing-3);
    margin-top: var(--spacing-3);
    font-size: 0.8125rem;
}

.signup-state-meta dt { color: var(--color-text-muted); }

.signup-state .auth-submit { margin-top: var(--spacing-4); }

/* --- 업체 설정의 가입 고유번호 --- */
.set-invite {
    padding: var(--spacing-5);
    margin-bottom: var(--spacing-5);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.set-invite h3 {
    font-size: 0.9375rem;
    margin-bottom: var(--spacing-3);
}

.set-invite-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

/* 전화로 불러 주는 번호다. 크고, 자릿수가 눈에 들어와야 한다 */
.set-invite-code {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    color: var(--color-text-primary);
}

.set-invite-empty {
    margin-bottom: var(--spacing-3);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* =================================================================
   검토 화면 (관리자 웹) — 훑고 조작한다
   ================================================================= */

.signup-review {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--spacing-5);
    align-items: start;
}

@media (max-width: 900px) {
    .signup-review { grid-template-columns: minmax(0, 1fr); }
}

.signup-list,
.signup-detail {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
}

.signup-detail { padding: var(--spacing-6); }

.signup-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
}

.signup-tab {
    min-height: 36px;
    padding: 0 var(--spacing-3);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: inherit;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.signup-tab em {
    font-style: normal;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.signup-tab.is-on {
    color: var(--color-text-primary);
    font-weight: 600;
    border-bottom-color: var(--color-primary);
}
.signup-tab.is-on em { color: var(--color-primary); }

.signup-more {
    padding: var(--spacing-2) var(--spacing-3);
    margin-bottom: var(--spacing-2);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-sm);
}

.signup-rows { list-style: none; }

.signup-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: var(--spacing-3);
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    font-family: inherit;
    /* 위 .signup-role 과 같은 이유. 이게 없으면 다크에서 이름이 안 보인다. */
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--motion-instant) var(--ease-out);
}

.signup-row:hover { background: var(--color-bg-secondary); }
.signup-row.is-on {
    background: var(--color-bg-secondary);
    border-left-color: var(--color-primary);
}

.signup-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
}

.signup-row-head b { font-size: 0.9375rem; }

.signup-row-sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.signup-row-meta {
    display: flex;
    gap: var(--spacing-3);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* 자리 표시자 — 실제 줄과 같은 높이라야 내용이 튀지 않는다 */
.signup-row.is-skeleton {
    cursor: default;
    pointer-events: none;
    gap: var(--spacing-2);
    padding-top: var(--spacing-4);
    padding-bottom: var(--spacing-4);
}
.signup-row.is-skeleton span {
    display: block;
    height: 10px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
}
.signup-row.is-skeleton span:first-child { width: 45%; }
.signup-row.is-skeleton span:last-child { width: 75%; }

/* 상태 칩 — 색만으로 구분하지 않는다. 글자가 항상 함께 있다 */
.signup-chip {
    flex: none;
    padding: 1px var(--spacing-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    font-size: 0.6875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    background: var(--color-bg-primary);
}

.signup-chip-pending_review {
    border-color: var(--color-info);
    color: var(--color-info);
    background: var(--color-info-soft);
}
.signup-chip-approved {
    border-color: var(--color-success);
    color: var(--color-success);
    background: var(--color-success-soft);
}
.signup-chip-rejected {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-danger-soft);
}

.signup-detail-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding-bottom: var(--spacing-4);
    margin-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.signup-detail-head h2 { font-size: 1.25rem; }

.signup-facts {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--spacing-2) var(--spacing-4);
    font-size: 0.875rem;
    margin-bottom: var(--spacing-6);
}

.signup-facts dt { color: var(--color-text-muted); }
.signup-facts dd { color: var(--color-text-primary); overflow-wrap: anywhere; }

@media (max-width: 560px) {
    .signup-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .signup-facts dd { margin-bottom: var(--spacing-3); }
}

.signup-sub {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--spacing-2);
    padding-top: var(--spacing-2);
}

/* --- 담당 지점 고르기 --- */
.signup-point-search {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
}

.signup-point-search .form-input { flex: 1; min-width: 0; }

.signup-point-count {
    flex: none;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.signup-points {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-2);
}

.signup-point {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    min-height: 48px;
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.signup-point:last-child { border-bottom: none; }
.signup-point:hover { background: var(--color-bg-secondary); }

.signup-point input {
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 3px;
    accent-color: var(--color-primary);
}

.signup-point-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 0.875rem;
}

.signup-point-body b { font-weight: 500; }
.signup-point-body span { font-size: 0.75rem; color: var(--color-text-muted); }
.signup-point-body em {
    font-style: normal;
    font-size: 0.75rem;
    color: var(--color-warning);
}

/* --- 서류 보기 --- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-6);
    background: var(--color-scrim);
}

.signup-doc-modal {
    display: flex;
    flex-direction: column;
    width: min(880px, 100%);
    max-height: 90vh;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    /* 실제로 떠 있는 것이므로 그림자를 쓴다 */
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.signup-doc-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.signup-doc-head span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

.signup-doc-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
    text-align: center;
}

.signup-doc-body img { max-width: 100%; height: auto; }
.signup-doc-body iframe { width: 100%; height: 70vh; border: none; }


/* =================================================================
   구성원 명부
   ================================================================= */

.member-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* ---- 머리 : 업체 + 인원수 ---- */
.member-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.member-head-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.member-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.member-oper { min-width: 260px; }

.member-tally {
    display: flex;
    gap: var(--spacing-6);
}

.member-tally-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.member-tally-cell b {
    font-family: var(--font-mono);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.member-tally-cell span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---- 거르기 ---- */
.member-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.member-chips {
    display: flex;
    gap: var(--spacing-2);
}

.member-chip {
    padding: 6px var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
}

.member-chip:hover { border-color: var(--color-border-strong); }

.member-chip.is-on {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-ink);
    font-weight: 600;
}

.member-tools {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
}

.member-search {
    position: relative;
    display: flex;
    align-items: center;
}

.member-search .icon {
    position: absolute;
    left: var(--spacing-3);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.member-search .form-input {
    width: 240px;
    padding-left: 34px;
}

.member-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

/* ---- 명부 ---- */
.member-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.member-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-primary);
}

/* 정지된 사람은 흐리게. 지운 것이 아니라 지금 안 쓰는 것이다 */
.member-row.is-off { background: var(--color-bg-secondary); }
.member-row.is-off .member-name,
.member-row.is-off .member-sub,
.member-row.is-off .member-extra { color: var(--color-text-muted); }

.member-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.member-name-line {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    flex-wrap: wrap;
}

.member-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.member-role {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.member-role-CC {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.member-role-DRIVER {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.member-role-CP {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.member-off {
    padding: 1px 8px;
    border-radius: var(--radius-full);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: 0.6875rem;
    font-weight: 600;
}

.member-sub {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.member-sub .mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

.member-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}

.member-assign { min-width: 0; }

.member-extra {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.member-extra.is-none {
    color: var(--color-text-muted);
    font-style: italic;
}

.member-when {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.member-seen { color: var(--color-text-muted); }

.member-act { justify-self: end; }

.member-empty {
    padding: var(--spacing-10) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.member-more {
    margin: 0;
    padding: var(--spacing-3);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* ---- 좁은 화면 ---- */
@media (max-width: 900px) {
    .member-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: var(--spacing-2);
    }

    .member-who { grid-column: 1; }
    .member-act { grid-column: 2; grid-row: 1; }

    .member-assign,
    .member-when {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .member-when { flex-direction: row; gap: var(--spacing-3); }

    .member-head,
    .member-filters { flex-direction: column; align-items: stretch; }

    .member-tally { justify-content: space-between; }
    .member-tools { flex-wrap: wrap; }
    .member-search .form-input { width: 100%; }
    .member-search { flex: 1; }

    /* 손가락으로 누르는 화면에서는 누를 곳이 44px 이상이어야 한다.
       체크상자 자체는 13px 이라 바꿀 수 없으니 감싼 라벨을 키운다 */
    .member-act .btn,
    .member-chip,
    .member-toggle,
    .member-search .form-input { min-height: 44px; }
}

/* 정지시킬 수 없는 줄. 버튼 자리를 비워 두면 표가 어긋나 보인다 */
.member-act-none {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}


/* =================================================================
   현장 사진 보기 (배차 화면)
   ================================================================= */

/* 목록 줄에 붙는 작은 단추. 장수를 미리 보여 줘야 열어 볼 곳을 고른다 */
.dp-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 5px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.dp-photo-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.dp-photo-btn svg { width: 13px; height: 13px; }

.dp-skip {
    color: var(--color-warning);
    font-weight: 600;
}

.dp-photo-modal {
    display: flex;
    flex-direction: column;
    width: min(900px, 100%);
    max-height: 90vh;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    /* 실제로 떠 있는 것이므로 그림자를 쓴다 */
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dp-photo-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.dp-photo-head b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text-primary);
}

.dp-photo-head span {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.dp-photo-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-bg-secondary);
}

.dp-photo-item {
    margin: 0;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dp-photo-item img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--color-bg-tertiary);
}

.dp-photo-item figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: 0.75rem;
}

.dp-photo-item figcaption b { color: var(--color-text-primary); }
.dp-photo-item figcaption span { color: var(--color-text-muted); }

/* 파기했거나 못 불러온 자리. 빈칸으로 두면 왜 없는지 알 수 없다 */
.dp-photo-gone {
    padding: var(--spacing-8) var(--spacing-3);
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    text-align: center;
}

.dp-photo-msg {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--spacing-10) var(--spacing-4);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}


/* =================================================================
   회수 실적
   ================================================================= */

.perf-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.perf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.perf-head-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.perf-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.perf-oper { min-width: 240px; }

.perf-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.perf-range .form-input { width: auto; }
.perf-range > span { color: var(--color-text-muted); }

.perf-quick { display: flex; gap: var(--spacing-1); }

.perf-quick-btn {
    padding: 6px var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.perf-quick-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ---- 큰 숫자 넷 ---- */
.perf-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.perf-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-primary);
}

.perf-tile b {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.perf-unit {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.perf-tile-label {
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ---- 표 ---- */
.perf-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.perf-tabs { display: flex; gap: var(--spacing-2); }

.perf-tab {
    padding: 6px var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.perf-tab:hover { border-color: var(--color-border-strong); }

.perf-tab.is-on {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-ink);
    font-weight: 600;
}

/* 표가 좁은 화면에서 넘칠 때 표만 옆으로 움직인다. 화면 전체가 밀리면 안 된다 */
.perf-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.perf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.perf-table th,
.perf-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.perf-table thead th {
    background: var(--color-bg-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.perf-table tbody tr:last-child td { border-bottom: none; }
.perf-table tbody tr:hover { background: var(--color-bg-secondary); }

.perf-name {
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-primary);
}

/* 숫자는 오른쪽으로 모으고 자릿수를 맞춘다. 눈으로 크기를 비교하게 된다 */
.perf-n {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.perf-table thead .perf-n { text-align: right; }

.perf-share {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    min-width: 140px;
}

.perf-bar {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    overflow: hidden;
}

.perf-bar i {
    display: block;
    height: 100%;
    background: var(--color-primary);
}

.perf-share em {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-style: normal;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.perf-empty {
    padding: var(--spacing-10) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.perf-note {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .perf-head,
    .perf-range { flex-direction: column; align-items: stretch; }
    .perf-range .form-input { width: 100%; }
    .perf-quick { flex-wrap: wrap; }
    /* 날짜칸도 손가락으로 누른다. 달력을 여는 버튼이 그 안에 있다 */
    .perf-quick-btn,
    .perf-tab,
    .perf-range .btn,
    .perf-range .form-input { min-height: 44px; }
    .perf-tabs { flex-wrap: wrap; }
}


/* =================================================================
   정산 단가 (업체 설정)
   ================================================================= */

/* 안 정한 품목이 있으면 정산이 그만큼 적게 잡힌다. 눈에 보여야 한다 */
.set-warn {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: 0.875rem;
}

.set-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-4);
}

.set-rate-basis { min-width: 92px; }

/* 고를 것이 하나뿐인 칸. 비활성 드롭다운으로 두면 흐려서 안 읽히고,
   눌러 볼 수도 없으면서 눌러 보게 만든다 */
.set-rate-fixed {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.set-rate-why {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}
.set-rate-price { max-width: 120px; text-align: right; }
.set-rate-memo { min-width: 160px; }

/* 넣은 값이 반대쪽 단위로 얼마인지. 자기 값이 맞는지 눈으로 확인하는 자리 */
.set-rate-hint {
    white-space: nowrap;
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

@media (max-width: 900px) {
    .set-rate-basis,
    .set-rate-price,
    .set-rate-memo { min-height: 44px; }
    .set-actions .btn { min-height: 44px; }
}


/* =================================================================
   월 정산

   금액이 주인공이다. 그 다음이 "어디까지 왔나", 그 다음이 내역이다.
   색만으로 상태를 말하지 않는다 — 단계에는 날짜와 이름을,
   단가가 없는 줄에는 "단가 미설정" 이라고 글자로 적는다.
   ================================================================= */
.stl-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.stl-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.stl-head-main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    min-width: 0;
}

.stl-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.stl-oper { min-width: 240px; }

.stl-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
}

.stl-pick .form-label { margin: 0; }
.stl-pick .form-input { width: auto; }

/* ---- 알림 줄 ---- */
.stl-alert {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
}

.stl-alert-warn {
    border-color: var(--color-warning);
    background: var(--color-warning-soft);
    color: var(--color-text-primary);
}

.stl-alert-bad {
    border-color: var(--color-danger);
    background: var(--color-danger-soft);
    color: var(--color-text-primary);
}

/* 문장 속 링크는 글자 높이만큼이라 좁은 화면에서 누르기 어렵다.
   줄을 바꿔 손가락이 닿는 크기로 둔다 */
.stl-fix {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--spacing-2);
    padding: 0 var(--spacing-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.stl-fix:hover { border-color: var(--color-primary); color: var(--color-primary); }
.stl-fix:active { transform: scale(0.98); }
.stl-fix:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}

.stl-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* ---- 큰 숫자 ---- */
.stl-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stl-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-primary);
}

.stl-tile b {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

/* 이 화면의 주인공. 한 곳만 강하게 두고 나머지는 조용히 둔다 */
.stl-tile-money { background: var(--color-primary-light); }
.stl-tile-money b { color: var(--color-primary); }

/* 바탕이 흰색이 아니라서 muted 로는 대비가 4.36:1 까지 떨어진다.
   이 칸의 보조 글자만 한 단계 진하게 둔다 */
.stl-tile-money .stl-tile-label,
.stl-tile-money .stl-unit { color: var(--color-text-secondary); }

.stl-unit {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.stl-tile-label {
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ---- 확정 → 승인 → 지급 ---- */
.stl-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.stl-step {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-primary);
}

.stl-step-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.stl-step-when {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.stl-step.is-done { background: var(--color-success-soft); }
.stl-step.is-done .stl-step-name { color: var(--color-success); }
.stl-step.is-done .stl-step-when { color: var(--color-text-secondary); }

/* ---- 다음에 누를 것 ---- */
.stl-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
}

.stl-hint {
    flex: 1 1 260px;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* ---- 내역 ---- */
.stl-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.stl-sub {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* 표가 좁은 화면에서 넘칠 때 표만 옆으로 움직인다. 화면 전체가 밀리면 안 된다 */
.stl-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.stl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.stl-table th,
.stl-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}

.stl-table thead th {
    background: var(--color-bg-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.stl-table tbody tr:hover { background: var(--color-bg-secondary); }

.stl-table tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--color-border-strong);
    background: var(--color-bg-secondary);
    font-weight: 700;
    color: var(--color-text-primary);
}

.stl-point {
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* 숫자는 오른쪽으로 모으고 자릿수를 맞춘다. 눈으로 크기를 비교하게 된다 */
.stl-n {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.stl-basis {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* 단가를 안 정한 줄. 흐리게만 두면 왜 0원인지 알 수 없어 글자로 적는다 */
.stl-unset {
    font-family: var(--font-family);
    font-size: 0.75rem;
    color: var(--color-warning);
}

.stl-table tr.is-unset td { background: var(--color-warning-soft); }
.stl-table tr.is-unset:hover td { background: var(--color-warning-soft); }

/* ---- 지난 정산서 ---- */
.stl-past { cursor: pointer; }
.stl-past.is-on td { background: var(--color-primary-light); }
.stl-past:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.stl-empty {
    padding: var(--spacing-10) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .stl-head,
    .stl-pick { flex-direction: column; align-items: stretch; }
    .stl-pick .form-input { width: 100%; }
    /* 날짜칸도 손가락으로 누른다. 달력을 여는 버튼이 그 안에 있다 */
    .stl-pick .form-input,
    .stl-pick .btn,
    .stl-actions .btn { min-height: 44px; }
    .stl-actions { flex-direction: column; align-items: stretch; }
}


/* =================================================================
   기록 검증 (dMRV 1단계)

   결과를 색으로만 말하지 않는다. "이상 없음" 을 초록 점 하나로 끝내면
   색맹 사용자와 흑백 인쇄에서 사라진다. 글자로 먼저 적고 색은 거든다.
   ================================================================= */
.vrf-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.vrf-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
}

.vrf-head-main { display: flex; flex-direction: column; gap: var(--spacing-1); min-width: 0; }

.vrf-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.vrf-oper { min-width: 240px; }

/* ---- 무엇이 증명되고 무엇이 안 되는가 ----
   이 화면에서 가장 중요한 글이다. 접어두지 않고 항상 펴 둔다. */
.vrf-notice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.vrf-notice-col {
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-primary);
}

.vrf-notice-col h3 {
    margin: 0 0 var(--spacing-2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.vrf-notice-col p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    word-break: keep-all;
}

/* 두 칸을 왼쪽 띠로 구분한다. 색만이 아니라 위치로도 읽힌다 */
.vrf-notice-col:first-child { border-left: 3px solid var(--color-success); }
.vrf-notice-col:last-child  { border-left: 3px solid var(--color-warning); }

/* ---- 숫자 ---- */
.vrf-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.vrf-tile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-primary);
}

.vrf-tile b {
    font-family: var(--font-mono);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.vrf-unit { font-size: 0.875rem; color: var(--color-text-secondary); }

.vrf-tile-label {
    flex: 1 0 100%;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ---- 알림 줄 ---- */
.vrf-alert {
    margin: 0;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
    color: var(--color-text-primary);
}

.vrf-good { border-color: var(--color-success); background: var(--color-success-soft); }
.vrf-warn { border-color: var(--color-warning); background: var(--color-warning-soft); }
.vrf-bad  { border-color: var(--color-danger);  background: var(--color-danger-soft); }

.vrf-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    word-break: keep-all;
}

/* ---- 동작 ---- */
.vrf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-3);
}

.vrf-hint {
    flex: 1 1 260px;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    word-break: keep-all;
}

/* ---- 표 ---- */
.vrf-body { display: flex; flex-direction: column; gap: var(--spacing-3); }

.vrf-sub {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* 표만 옆으로 움직인다. 화면 전체가 밀리면 안 된다 */
.vrf-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.vrf-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.vrf-table th,
.vrf-table td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.vrf-table thead th {
    background: var(--color-bg-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.vrf-table tbody tr:last-child td { border-bottom: none; }

.vrf-chip {
    display: inline-block;
    padding: 2px var(--spacing-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--color-text-secondary);
}

/* 봉인할 때 값과 지금 값. 어느 쪽이 원본인지 글자로도 구분되게 취소선을 쓴다 */
.vrf-was {
    max-width: 28ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: line-through;
    word-break: break-all;
}

.vrf-now {
    max-width: 28ch;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-danger);
    word-break: break-all;
}

/* ---- 사슬 ---- */
.vrf-chain {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--spacing-2) var(--spacing-4);
    margin: 0;
    font-size: 0.875rem;
}

.vrf-chain dt { color: var(--color-text-muted); }
.vrf-chain dd { margin: 0; color: var(--color-text-primary); }

/* 지문은 64자다. 좁은 화면에서 줄바꿈이 안 되면 화면을 밀어낸다 */
.vrf-hash {
    font-size: 0.75rem;
    word-break: break-all;
    color: var(--color-text-secondary);
}

.vrf-empty {
    padding: var(--spacing-10) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .vrf-head { flex-direction: column; align-items: stretch; }
    .vrf-actions { flex-direction: column; align-items: stretch; }
    /* 손가락으로 누른다 */
    .vrf-actions .btn,
    .vrf-oper { min-height: 44px; }
    .vrf-chain { grid-template-columns: 1fr; gap: var(--spacing-1); }
}

/* =====================================================================
   회수 지점 — 업체가 직접 관리 (.pts-*)

   목록과 상세를 함께 둔다. 지점이 320곳이라 표로 훑고, 고른 것만 옆에
   펼친다. 좁은 화면에서는 상세가 표 아래로 내려온다 — 목록이 사라지지
   않으므로 어디를 보고 있었는지 잃지 않는다.
   ===================================================================== */

.pts-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.pts-stat {
    flex: 1 1 12rem;
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pts-stat dt {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    word-break: keep-all;
}

.pts-stat dd {
    margin: var(--spacing-1) 0 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.pts-stat dd span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: var(--spacing-1);
}

/* --- 찾기 · 거르기 --- */
.pts-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    align-items: center;
    margin-bottom: var(--spacing-3);
}

.pts-search {
    position: relative;
    flex: 1 1 18rem;
    display: flex;
    align-items: center;
}

.pts-search svg {
    position: absolute;
    left: var(--spacing-3);
    color: var(--color-text-muted);
    pointer-events: none;
}

.pts-search .form-input {
    padding-left: 2.5rem;
}

.pts-filters {
    display: flex;
    gap: var(--spacing-1);
}

.pts-chip {
    min-height: 40px;
    padding: 0 var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--motion-instant) var(--ease-out),
                color var(--motion-instant) var(--ease-out);
}

.pts-chip:hover {
    background: var(--color-bg-secondary);
}

.pts-chip:active {
    transform: scale(0.97);
}

.pts-chip.is-on {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-ink);
}

/* --- 목록 + 상세 --- */
.pts-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--spacing-4);
    align-items: start;
}

@media (max-width: 1100px) {
    .pts-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pts-listwrap {
    min-width: 0;
}

.pts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.pts-table th,
.pts-table td {
    padding: var(--spacing-3);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    word-break: keep-all;
}

.pts-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom-color: var(--color-border-strong);
    white-space: nowrap;
}

.pts-table td.num,
.pts-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pts-table tbody tr {
    cursor: pointer;
    transition: background var(--motion-instant) var(--ease-out);
}

.pts-table tbody tr:hover {
    background: var(--color-bg-secondary);
}

.pts-table tbody tr:active {
    background: var(--color-bg-tertiary);
}

.pts-table tbody tr:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.pts-table tbody tr.is-picked {
    background: var(--color-primary-light);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.pts-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pts-code {
    display: inline-block;
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    /* muted 로 두면 고른 행(primary-light) 위에서 다크모드 대비가
       4.05:1 로 떨어져 기준(4.5:1)에 못 미친다. 실제로 재서 확인했다. */
    color: var(--color-text-secondary);
}

.pts-addr {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.pts-more {
    margin-top: var(--spacing-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* --- 상태: 색만으로 말하지 않는다. 글자를 함께 붙인다 --- */
.pts-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--spacing-2);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    white-space: nowrap;
}

.pts-on {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.pts-off {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
}

/* --- 상세 --- */
.pts-detail {
    min-width: 0;
}

.pts-card {
    padding: var(--spacing-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.pts-card + .pts-card {
    margin-top: var(--spacing-4);
}

.pts-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.pts-card-head h2,
.pts-card-head h3 {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.35;
    text-wrap: balance;
}

.pts-count {
    font-weight: 400;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.pts-grid {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: var(--spacing-2) var(--spacing-3);
    margin: 0 0 var(--spacing-4);
    font-size: 0.875rem;
    line-height: 1.7;
}

.pts-grid dt {
    color: var(--color-text-muted);
}

.pts-grid dd {
    margin: 0;
    color: var(--color-text-primary);
    word-break: keep-all;
}

.pts-warn {
    color: var(--color-warning);
}

.pts-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.pts-note,
.pts-hint p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    word-break: keep-all;
}

.pts-hint {
    padding: var(--spacing-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}

.pts-hint p {
    margin: 0 0 var(--spacing-2);
}

/* --- 회수함 --- */
.pts-bins {
    list-style: none;
    margin: 0 0 var(--spacing-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.pts-bin {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.pts-bin.is-off {
    opacity: 0.65;
}

.pts-bin strong {
    color: var(--color-text-primary);
}

.pts-bin-loc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.pts-bin-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pts-bin-act {
    display: flex;
    gap: var(--spacing-1);
}

/* --- 폼 --- */
.pts-form h2,
.pts-form h4 {
    margin: 0 0 var(--spacing-3);
    line-height: 1.35;
}

.pts-binform {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.pts-fieldset {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.pts-fieldset legend {
    padding: 0 var(--spacing-2);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.pts-error {
    margin: 0 0 var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
}

/* 통신이 끊겨도 목록을 비우지 않는다. 위에 이 줄만 덧붙인다 */
.pts-offline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

/* --- 기다림: 자리 표시자는 실제 내용의 모양을 따른다 --- */
.pts-skeleton {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pts-skel-row {
    height: 62px;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

@media (max-width: 640px) {
    .pts-bin {
        align-items: flex-start;
    }

    .pts-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .pts-grid dt {
        margin-top: var(--spacing-2);
    }
}

/* 토스트 — 아이콘과 글이 한 줄에 놓이도록. (JS 는 shared/utils/Toast.js)
   기존 .toast 규칙은 그대로 두고 배치와 사라짐만 더한다. */
.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    max-width: 24rem;
    line-height: 1.7;
    word-break: keep-all;
    transition: opacity var(--motion-quick) var(--ease-out),
                transform var(--motion-quick) var(--ease-out);
}

.toast-icon {
    display: flex;
    flex: 0 0 auto;
}

/* 사라질 때. 나타남은 기존 slideIn 이 맡는다. */
.toast:not(.show) {
    opacity: 0;
    transform: translateX(8px);
}

/* 좁은 화면에서는 손가락으로 누른다. 관리자 웹이지만 그때는 48px 을 지킨다. */
@media (max-width: 640px) {
    .pts-chip,
    .pts-actions .btn,
    .pts-bin-act .btn,
    .pts-card .form-select,
    .pts-card .form-input {
        min-height: 48px;
    }

    .pts-bin-act {
        width: 100%;
    }

    .pts-bin-act .btn {
        flex: 1;
    }
}

/* --- 승인 흐름 (.pts-*) ------------------------------------------------
   상태가 다섯이고 성격이 다르다. 색만으로 구분하지 않고 글자를 함께 붙인다.
   반려는 고쳐서 다시 내면 되고, 중지는 업체 판단이고, 취소는 신청자 자의다. */

.pts-wait {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.pts-bad {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.pts-hold {
    background: var(--color-info-soft);
    color: var(--color-info);
}

/* 상태 탭의 건수 */
.pts-chip-n {
    margin-left: var(--spacing-1);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* 대기 건이 있는 탭만 눈에 띈다. 승인이 업무를 막으므로 열어봐야 보이면 안 된다. */
.pts-chip.is-waiting:not(.is-on) {
    border-color: var(--color-warning);
    color: var(--color-warning);
}

.pts-waitbar {
    margin-bottom: var(--spacing-4);
}

/* 왜 막혔는지 그대로 펼쳐 둔다 */
.pts-reason {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    border-left: 3px solid currentColor;
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
}

.pts-reason p {
    margin: var(--spacing-1) 0 0;
}

.pts-reason-by {
    /* muted 는 사유 패널의 옅은 바탕 위에서 4.34:1 로 기준(4.5)에 못 미쳤다.
       실제로 재서 확인했다. 누가 언제 했는지는 나중에 근거가 되는 줄이라
       흐리게 두면 안 된다. */
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
}

.pts-reason-bad {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.pts-reason-hold {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.pts-reason-off {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* 승인 전에는 못 쓴다는 것을 상세 맨 위에서 말한다 */
.pts-block {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    margin: 0 0 var(--spacing-4);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-radius: var(--radius-md);
}

.pts-block svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.pts-reasonform {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

.pts-reasonform textarea.form-input {
    resize: vertical;
    min-height: 3.5rem;
}

/* =====================================================================
   사이드바 묶음 (.nav-group)

   22개를 한 줄로 늘어놓으면 찾을 때마다 전체를 읽어야 한다.
   7개로 묶고, 매일 보는 것만 펼쳐 둔다.
   ===================================================================== */

.nav-group + .nav-group {
    margin-top: var(--spacing-2);
}

.nav-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    width: 100%;
    min-height: 36px;
    padding: var(--spacing-2) var(--spacing-4);
    border: 0;
    background: transparent;
    color: var(--color-sidebar-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: left;
    cursor: pointer;
    transition: color var(--motion-instant) var(--ease-out);
}

.nav-group-head:hover {
    color: var(--color-sidebar-ink-strong);
}

.nav-group-head:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* 펼침 표시. 회전만 시킨다 — transform 은 다시 그리지 않는다. */
.nav-group-head svg {
    flex: 0 0 auto;
    opacity: 0.7;
    transition: transform var(--motion-quick) var(--ease-out);
}

.nav-group.is-open .nav-group-head svg {
    transform: rotate(90deg);
}

.nav-group-body {
    display: none;
}

.nav-group.is-open .nav-group-body {
    display: block;
}

/* 묶음 안이라는 것이 보이게 살짝 들여쓴다 */
.nav-group-body .nav-item {
    padding-left: var(--spacing-6, 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
    .nav-group-head svg {
        transition: none;
    }
}

/* =====================================================================
   회수기 연동 (.dev-*)
   ===================================================================== */

.dev-warn {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
}

.dev-warn svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* 발급된 키 — 다시 볼 수 없다는 것을 눈에 띄게 */
.dev-issued {
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-4);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.dev-issued h3 {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-2);
    font-size: 1rem;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.dev-issued p {
    margin: 0 0 var(--spacing-3);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-primary);
    word-break: keep-all;
}

.dev-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.dev-key code {
    flex: 1 1 18rem;
    min-width: 0;
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    word-break: break-all;
    user-select: all;
}

/* 폐기된 키는 흐리게. 지우지 않는 이유는 추적을 남기기 위해서다. */
.set-card.is-off {
    opacity: 0.6;
}

/* 제조사에게 줄 규격 */
.dev-spec {
    margin-top: var(--spacing-5);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.dev-spec summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary);
}

.dev-spec p {
    margin: var(--spacing-3) 0 0;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    word-break: keep-all;
}

.dev-spec code {
    padding: 1px 4px;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text-primary);
}

.dev-spec pre {
    margin: var(--spacing-2) 0 0;
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--color-text-primary);
    overflow-x: auto;
}

@media (max-width: 640px) {
    .dev-key .btn {
        min-height: 48px;
    }
}

/* =====================================================================
   회수량 확인 (.qr-*)

   두 숫자를 **같은 크기로 나란히** 둔다. 한쪽을 크게 하면 그쪽으로
   기울어 고르게 된다. 고른 값이 그대로 정산 금액이 되므로 중립이 중요하다.
   ===================================================================== */

.qr-lead {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin: 0 0 var(--spacing-4);
    padding: var(--spacing-3);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    line-height: 1.7;
    word-break: keep-all;
}

.qr-lead svg {
    flex: 0 0 auto;
    margin-top: 2px;
}

.qr-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.qr-card {
    padding: var(--spacing-4);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.qr-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.qr-head strong {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--color-text-primary);
    word-break: keep-all;
}

.qr-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.qr-gap {
    flex: 0 0 auto;
    padding: 2px var(--spacing-2);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 두 값을 같은 폭으로 */
.qr-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

@media (max-width: 640px) {
    .qr-two {
        grid-template-columns: 1fr;
    }
}

.qr-side {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.qr-side.is-empty {
    opacity: 0.65;
}

.qr-side dt {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.qr-side dd {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.qr-side dd span {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 2px;
}

/* 개수만 보면 차이가 얼마나 큰 돈인지 감이 안 온다. 무게를 함께 보여준다. */
.qr-kg {
    display: block;
    margin-top: 2px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.qr-side .btn {
    margin-top: auto;
}

.qr-other {
    margin-top: var(--spacing-3);
    padding: var(--spacing-3);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}

@media (max-width: 640px) {
    .qr-side .btn,
    .qr-other .btn,
    .qr-card > .btn {
        min-height: 48px;
    }
}

/* 알림 설정을 못 불러왔을 때 (.settings-error)
   예전에는 '로딩 중...' 이 영영 남아서 무엇이 잘못됐는지 알 수 없었다. */
.settings-error {
    padding: var(--space-6, 24px);
    text-align: center;
}

.settings-error p {
    margin: 0 0 var(--space-2, 8px);
    color: var(--text-primary);
}

.settings-error-why {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    word-break: keep-all;
}

.settings-error .btn {
    margin-top: var(--space-4, 16px);
}

/* =====================================================================
   지점 대량 등록 (.pts-import / .imp-*)

   바로 넣지 않고 **먼저 보여준다.** 한 줄이 잘못돼서 300줄이 통째로
   실패하거나 반쯤 들어가면 무엇이 들어갔는지 알 방법이 없다.
   그래서 고쳐야 할 줄을 줄 번호와 함께 먼저 내놓는다.
   ===================================================================== */

.pts-import {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
}

.pts-import[hidden] {
    display: none;
}

.imp-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-3);
}

.imp-head b {
    font-size: 1rem;
    color: var(--color-text-primary);
    word-break: break-all;
}

.imp-note {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.imp-x {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.imp-x:hover {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* 숫자 셋 — 넣을 수 있는 것, 함께 만들 회수함, 고쳐야 할 것 */
.imp-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-4);
}

.imp-tile {
    flex: 1 1 140px;
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    text-align: center;
}

.imp-tile b {
    display: block;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.imp-tile span {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* 고쳐야 할 것이 0이면 눈에 띌 이유가 없다. 있을 때만 색이 바뀐다. */
.imp-tile.is-bad b {
    color: var(--color-danger);
}

.imp-rows + .imp-rows {
    margin-top: var(--spacing-4);
}

.imp-rows-title {
    margin: 0 0 var(--spacing-2);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.imp-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}

.imp-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.imp-row + .imp-row {
    margin-top: 4px;
}

.imp-line {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.imp-name {
    flex: 0 1 auto;
    font-weight: 500;
    color: var(--color-text-primary);
    word-break: break-all;
}

.imp-why {
    flex: 1 1 100%;
    color: var(--color-text-secondary);
    word-break: keep-all;
}

.imp-row.is-bad .imp-why {
    color: var(--color-danger);
}

.imp-foot {
    margin-top: var(--spacing-4);
}

.imp-bad-msg {
    margin: 0;
    color: var(--color-danger);
    font-size: 0.9375rem;
    line-height: 1.7;
    word-break: keep-all;
}