:root {
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --border: #d1d5db;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-soft: #eff6ff;
    --accent-soft-line: #bfdbfe;
    --success: #16a34a;
    --success-soft: #f0fdf4;
    --bg: #f3f4f6;
    --surface: #ffffff;
    --head: #f9fafb;
    --warn: #b3261e;
    --warn-soft: #fdf1f0;

    /* 카드형 요소는 이 그림자·둥근 모서리를 공통으로 써서 톤을 통일한다 */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

* { box-sizing: border-box; }

/* 어떤 요소가 실수로 넘치더라도 페이지 자체는 가로로 안 밀리게 막는 안전장치.
   표처럼 실제로 넓은 내용은 각자의 .table-container/.receipt-section 등에서
   overflow-x:auto 로 그 안에서만 스크롤되므로 이 규칙과 부딪히지 않는다. */
html { overflow-x: hidden; }

body {
    margin: 0;
    font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Pretendard", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
/* 본문 글줄간격(1.6)은 입력칸·버튼·셀렉트에는 안 어울려서(필요 이상으로 높아짐) 폼 컨트롤은
   전부 폰트 크기에 맞는 좁은 줄간격을 따로 쓴다. 명시적으로 height 를 지정해둔 곳(날짜 입력칸,
   상태변경 폼 등)은 그 값이 그대로 우선한다. */
input, select, textarea, button {
    line-height: 1.2;
}

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: var(--accent); transition: color 0.12s ease; }

/* 브랜드 색으로 통일한 포커스 링 — 키보드 탐색 시에만 보인다 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 공개 시세 페이지 ---------- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 22px 0 20px;
    text-align: center;
    position: relative;
}
/* 헤더 위쪽에 아주 얇은 브랜드 컬러 바 — 무채색 화면에 포인트를 준다 */
.site-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #0ea5e9, var(--accent));
}

.logo-link {
    display: inline-block;
    line-height: 0;
}
.logo {
    height: 96px;
    width: auto;
    max-width: 100%;
}
@media (max-width: 480px) {
    .logo { height: 72px; }
}

.tagline {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.branch-switch {
    margin: 10px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* 텍스트 링크 대신 버튼처럼 보이는, 그 아래 페이지 이동용 여러 링크 묶음(뒤로가기 등). */
.footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
main .footer-actions,
.site-footer .footer-actions { margin: 14px 0; }

main.wrap { padding-top: 24px; padding-bottom: 48px; }

.page-title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-align: center;
}

.update-time {
    margin: 0 0 18px;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}

.quote-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
    overflow: hidden;
}

.section-header {
    background: linear-gradient(180deg, var(--head), var(--surface));
    padding: 14px 18px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.section-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--ink);
}

.table-container {
    overflow-x: auto;
    padding: 6px 16px 14px;
}

.quote-section table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 1rem;
}

.quote-section col.col-price { width: 33%; }

.quote-section th,
.quote-section td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
}

.quote-section th {
    background: transparent;
    font-weight: 700;
    text-align: center;
    color: var(--ink);
    border-bottom: 2px solid var(--line);
}

.quote-section th small {
    display: block;
    font-weight: 400;
    font-size: 0.76em;
    color: var(--muted);
    margin-top: 2px;
}

.quote-section td.name {
    color: var(--ink);
    font-weight: 500;
    white-space: normal;
    word-break: keep-all;
}

.quote-section td.price-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.quote-section .price {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.02em;
}

.quote-section .percentage {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size: 1.02em;
    font-weight: 700;
}

.quote-section .unavailable {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--head);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.88em;
}

/* 같은 분류 안에서 브랜드가 바뀌면 이름이 적힌 구분 행 */
.quote-section tbody tr.brand-row td {
    background: var(--head);
    text-align: center;
    font-weight: 700;
    color: var(--muted);
    font-size: 0.88rem;
    letter-spacing: 0.01em;
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
}
.quote-section tbody tr:not(.brand-row) { transition: background-color 0.1s ease; }
.quote-section tbody tr:not(.brand-row):hover td { background: var(--accent-soft); }
.quote-section tbody tr:last-child td { border-bottom: 0; }

.empty {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 28px 16px;
    margin: 14px 0;
    text-align: center;
    color: var(--muted);
}

.site-footer {
    color: var(--muted);
    font-size: 0.82rem;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    padding-bottom: 40px;
    text-align: center;
}
.site-footer a { color: var(--accent); }

.biz-info {
    margin: 16px auto 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    max-width: 640px;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--muted);
}
.biz-info div {
    display: flex;
    gap: 8px;
}
.biz-info dt {
    flex: 0 0 104px;
    font-weight: 600;
    color: var(--ink);
}
.biz-info dd { margin: 0; }
@media (max-width: 480px) {
    .biz-info div { flex-wrap: wrap; gap: 2px 8px; }
}

/* 관리자가 입력한 공지/배너. 눈에 띄도록 강조 배경 + 왼쪽 굵은 선. */
.site-banner {
    margin: 0 0 16px;
    padding: 13px 16px;
    border: 1px solid var(--accent-soft-line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.7;
    white-space: pre-line;
    word-break: keep-all;
}

/* "대량 판매는 별도 문의" 상시 안내 — 흰 바탕, 대표번호만 붉게 강조 */
.bulk-notice {
    margin: 0 0 20px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: center;
    word-break: keep-all;
}
.bulk-notice b { color: var(--ink); font-weight: 700; }
.bulk-notice a {
    color: var(--warn);
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}
.bn-tel {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.bn-tel:hover { text-decoration: underline; }
.calc-note .bn-tel { font-weight: 600; }
/* 계산기 경고(빨강) 박스 안에서는 같은 색으로 굵게만 */
.calc-notice b { font-weight: 800; }
.calc-notice a { color: inherit; font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---------- 판매금액 계산기 (시세표 상단 접이식) ---------- */
.calc-box {
    margin: 0 0 18px;
}
.calc-open-btn {
    list-style: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    color: #fff;
    /* 브랜드 블루 계열을 오가며 천천히 흐르는 그라데이션 */
    background: linear-gradient(115deg, #2563eb, #4f46e5, #0ea5e9, #2563eb);
    background-size: 280% 280%;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    animation: calc-drift 14s ease-in-out infinite, calc-glow 4s ease-in-out infinite;
}
/* 아이콘·문구·화살표는 광택(::after) 위로 */
.calc-open-btn > * { position: relative; z-index: 1; }
/* 6초에 한 번, 표면을 스치는 빛 */
.calc-open-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%);
    transform: translateX(-130%) skewX(-14deg);
    animation: calc-shimmer 6.5s ease-in-out infinite;
}
.calc-open-btn::-webkit-details-marker { display: none; }
.calc-open-btn:hover { transform: translateY(-1px); }
.calc-open-btn:active { transform: translateY(0); }

@keyframes calc-drift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes calc-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(37, 99, 235, 0.24); }
    50%      { box-shadow: 0 8px 26px rgba(37, 99, 235, 0.46); }
}
@keyframes calc-shimmer {
    0%, 84%, 100% { transform: translateX(-130%) skewX(-14deg); }
    93%           { transform: translateX(130%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
    .calc-open-btn { animation: none; background-position: 0% 50%; }
    .calc-open-btn::after { display: none; }
}

.calc-open-icon { font-size: 1.7rem; line-height: 1; }
.calc-open-label { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.calc-open-label strong { font-size: 1.05rem; font-weight: 700; }
.calc-open-sub { font-size: 0.82rem; opacity: 0.9; font-weight: 400; word-break: keep-all; }
.calc-open-arrow {
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid #fff;
    transition: transform 0.15s ease;
    flex: 0 0 auto;
}
.calc-box[open] .calc-open-arrow { transform: rotate(180deg); }
/* 펼쳐지면 시선 유도는 끝 — 애니메이션을 멈추고 차분한 단색 그라데이션으로 */
.calc-box[open] .calc-open-btn {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: none;
    animation: none;
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    background-size: auto;
}
.calc-box[open] .calc-open-btn::after { animation: none; opacity: 0; }

.calc-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 18px;
}

.calc-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.calc-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: var(--head);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: border-color 0.12s ease;
}
.calc-row:focus-within { border-color: var(--accent-soft-line); }

.calc-row-item {
    flex: 1 1 220px;
    max-width: 50%;
    min-width: 0;
    height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: var(--surface);
}

.calc-row-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    color: var(--muted);
}
.calc-row-qty input[type="number"] {
    width: 72px;
    height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.btn-outline.sm.calc-row-remove {
    flex: 0 0 auto;
    margin-left: auto;
    height: 42px;
    padding: 9px 11px;
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn);
}
.calc-row-remove:hover { background: var(--warn); border-color: var(--warn); color: #fff; }

.calc-actions { margin: 16px 0 20px; }

.envelope-row { margin-bottom: 10px; }
.envelope-row-label { display: flex; align-items: center; color: var(--muted); }

.calc-result {
    overflow-x: auto;
    border-top: 1px solid var(--line);
    padding-top: 16px;
}
.calc-result table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    font-size: 0.92rem;
    table-layout: fixed;
}
.calc-result col.col-qty { width: 64px; }
.calc-result col.col-price { width: 30%; }
.calc-result th,
.calc-result td {
    border: 1px solid var(--border);
    padding: 10px 12px;
}
.calc-result th {
    background: var(--head);
    font-weight: 600;
    text-align: center;
}
.calc-result td.name { word-break: keep-all; }
.calc-result td.price-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.calc-result td.qty-cell {
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.calc-result .price { color: var(--accent); font-weight: 700; }
.calc-result td.calc-empty {
    text-align: center;
    color: var(--muted);
}
.calc-result tfoot th {
    text-align: right;
}
.calc-result tfoot td {
    text-align: right;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    background: var(--head);
}

.calc-notice {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--warn);
    border-radius: 6px;
    background: #fdf1f0;
    color: var(--warn);
    font-size: 0.86rem;
    font-weight: 600;
}

.calc-note {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.6;
}

.calc-cta-row { margin: 14px 0 0; text-align: center; }

/* ---------- 관리자 / 로그인 ---------- */
.site-header.admin { text-align: left; }
.site-header.admin .wrap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}
/* 헤더 오른쪽에 버튼 여러 개(로그아웃 form 포함)를 묶어 넣는 span — span 자체는 inline이라
   안에 든 form(기본 block)이 줄바꿈되는 문제가 있었다. flex로 묶어 한 줄에 나란히 둔다. */
.site-header.admin .wrap > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 관리자 화면 최상단의 "방문관리" / "지점설정" / "시세설정" 탭 — 로그인 후 어느 영역에 있는지
   보여준다. 이 최상단 탭 줄은 화면이 아무리 좁아도 줄바꿈되면 안 된다(아이폰 SE 등에서 세 개가
   한 줄에 다 안 들어가 보이는 문제가 있었다) — 그래서 아래 좁은 화면(≤640px) 구간에서는 세
   탭이 폭을 똑같이 나눠 가지도록(flex:1) 만들어 항상 한 줄에 맞춘다. 그 아래 "방문예약" /
   "방문시간대관리" 같은 2차 탭(.sub-tabs)은 항목 수·길이가 페이지마다 달라 균등폭이 안 맞으므로
   기존처럼 필요하면 다음 줄로 넘어가게 둔다. 탭 글자 자체가 줄바꿈되는 문제(요소가 min-content
   이하로 줄어들면 word-break 기본값 때문에 한글이 한 글자씩 끊겨 보이는 것)는 모든 탭에
   white-space:nowrap 으로 막는다. */
.top-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 14px 0 0;
    border-bottom: 1px solid var(--line);
}
.top-tabs:not(.sub-tabs) { flex-wrap: nowrap; }
.top-tab {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 9px 16px;
    font-size: 0.92rem;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s ease, border-color 0.1s ease;
}
a.top-tab:hover { color: var(--ink); }
.top-tab.active {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--accent);
}
/* "방문관리" 탭 아래에서 "방문예약"/"방문시간대관리"를 고르는 2단 탭 — 위 탭보다 한 단 낮춰 종속 관계를 보여준다. */
.sub-tabs {
    margin: 10px 0 0;
    border-bottom: none;
}
.sub-tabs .top-tab { padding: 6px 12px; font-size: 0.85rem; }

.notice-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin: 16px 0;
}
.notice-box h2 { margin: 0 0 4px; font-size: 1.05rem; }
.notice-form { margin-top: 10px; }
.notice-form textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    line-height: 1.2;
}
.notice-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.contact-phone-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 0.88rem;
    color: var(--muted);
}
/* "새 예약 알림 이메일" 입력칸 — 같은 행의 "저장" 버튼(.notice-form-actions .btn.sm, 36px)과
   높이를 맞춘다. */
.notice-form-actions input[type="text"] {
    height: 36px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
}
.contact-phone-field input {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    line-height: 1.2;
    color: var(--ink);
    width: 180px;
}

/* 관리자 대시보드 내비 버튼 위의 알림 개수(예: 대기 중인 주문 수) 배지. */
.nav-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--warn);
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ---------- 공개 페이지: 온라인 구매 신청 ---------- */
.order-cta { margin: 0 0 18px; }

/* 방문 예약 폼 상단의 매입/판매 예약 전환 탭 */
.kind-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

/* ---------- 공개 페이지: 개인정보처리방침 ---------- */
.policy { max-width: 720px; }
.policy-lead {
    color: var(--muted);
    margin: 0 0 18px;
    line-height: 1.7;
}

/* 목차 — 각 섹션으로 바로 이동하는 알약 모양 링크 묶음 */
.policy-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.policy-toc a {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.8rem;
    color: var(--ink);
    text-decoration: none;
}
.policy-toc a:hover { border-color: var(--accent); color: var(--accent); }

/* 담당자 연락처 — 눈에 띄는 강조 카드(공지 배너와 같은 색 언어) */
.policy-officer {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 16px;
    margin: 0 0 20px;
}
.policy-officer-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.policy-officer strong { display: block; font-size: 0.86rem; color: var(--muted); font-weight: 600; }
.policy-officer p { margin: 2px 0 0; font-size: 0.98rem; }

/* 조항/폼 한 덩어리를 카드로 구분 */
.policy-section,
.form-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin-bottom: 12px;
    scroll-margin-top: 16px;
    transition: box-shadow 0.15s ease;
}
.policy-section:target { box-shadow: var(--shadow-md); border-color: var(--accent-soft-line); }
.form-section + .form-section { margin-top: 14px; }
.form-section { display: flex; flex-direction: column; gap: 12px; }
.policy-section h2,
.form-section h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1.02rem;
}
.policy-section .num,
.form-section .num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--head);
    border: 1px solid var(--line);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 700;
}
.policy-section p { margin: 0 0 6px; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul { margin: 6px 0 0; padding-left: 20px; }
.policy-section li { margin: 3px 0; }
.policy-section ul:last-child { margin-bottom: 0; }

.order-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
    margin: 16px auto;
}
.order-form label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}
.order-form .calc-row-qty {
    flex-direction: row;
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--muted);
}
.phone-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.phone-input-group .phone-prefix {
    flex: 0 0 auto;
    height: 42px;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--head);
    color: var(--muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.phone-input-group .phone-sep { flex: 0 0 auto; color: var(--muted); }
.phone-input-group input {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* 방문 예약 폼의 오전/오후별 시간(오전 00:00~11:00·오후 12:00~23:00) 버튼 — "희망 방문일" 바로 아래, 전체를
   통틀어 한 번에 하나만 눌린다. */
.visit-time-picker { display: flex; flex-direction: column; gap: 14px; }
.visit-time-picker-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.time-period { display: flex; flex-direction: column; gap: 8px; }
.time-period-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--muted);
}
.time-period-label::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-soft-line);
}
.hour-btn-group { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.time-btn {
    padding: 9px 4px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: transform 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease,
        background-color 0.1s ease, color 0.1s ease;
}
.time-btn:hover:not(:disabled):not(.active) {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.16);
}
.time-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.28);
}
.time-btn:disabled {
    background: var(--head);
    color: var(--muted);
    border-color: var(--line);
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}

@media (max-width: 380px) {
    .hour-btn-group { grid-template-columns: repeat(3, 1fr); }
}
.order-form select,
.order-form textarea,
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form input[type="datetime-local"],
.order-form input[type="number"] {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    background: var(--surface);
    max-width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* select·date·tel·text 는 브라우저마다 폼 컨트롤 기본 렌더링이 미묘하게 달라 padding만으로는
   높이가 안 맞을 수 있어, 여러 칸이 나란히 놓이는 곳(연락처·방문일시)의 정렬을 위해 높이를 고정한다.
   (날짜 입력칸은 아래 범용 input[type="date"] 규칙에서 따로 다룬다.) */
.order-form select,
.order-form input[type="text"],
.order-form input[type="tel"],
.order-form input[type="datetime-local"],
.order-form input[type="number"] {
    height: 42px;
}
.admin-card .order-form > label > input[type="datetime-local"] { width: 100%; }
/* 날짜 입력칸은 폼 너비를 다 채울 필요가 없어(내용도 "년-월-일" 정도 길이) 적당한 너비로 잡고,
   시간 버튼(.time-btn)과 어울리도록 조금 더 크고 둥글게 다듬는다. 방문예약 폼뿐 아니라 관리자
   화면(방문시간대관리 등)의 날짜 입력칸에도 전부 같은 모양을 쓰도록 범용 선택자로 둔다. */
input[type="date"] {
    max-width: 200px;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 1rem;
    background: var(--surface);
    box-sizing: border-box;
}
.order-form select:focus,
.order-form textarea:focus,
.order-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.order-form textarea { resize: vertical; }
.cart-total-row {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-total-row strong { color: var(--accent-dark); font-size: 1.15rem; }

.consent-box {
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.consent-group { display: flex; flex-direction: column; gap: 6px; }
.consent-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}
.order-form label.consent-check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
    cursor: pointer;
}
.consent-check input { margin-top: 3px; flex: 0 0 auto; }
.consent-check a { color: var(--accent-dark); font-weight: 700; text-decoration: underline; }

.order-summary {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
    max-width: 480px;
}
.order-summary th,
.order-summary td {
    border-bottom: 1px solid var(--line);
    padding: 10px 4px;
    text-align: left;
    font-size: 0.9rem;
}
.order-summary tr:last-child th,
.order-summary tr:last-child td { border-bottom: 0; }
.order-summary th {
    background: transparent;
    width: 110px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* 방문 예약 접수 확인의 상품권 목록 — 위 key/value 표와 폭·헤더 폭이 다르다.
   .receipt-section 이 overflow-x:auto 라 넓어도 화면 자체는 안 밀리지만, 640px 이하에서는
   그마저도 없이 카드형으로 바꾼다(아래 모바일 미디어쿼리). */
.order-summary.cart-items { max-width: 640px; }
.order-summary.cart-items th,
.order-summary.cart-items td { white-space: nowrap; }
.order-summary.cart-items th { width: auto; color: var(--muted); font-weight: 700; }
/* 액면가·매수·단가·금액 칸은 헤더와 셀을 똑같이 오른쪽 정렬해 숫자 줄이 맞도록 한다 */
.order-summary.cart-items thead th:nth-child(n+2),
.order-summary.cart-items tbody td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.order-summary.cart-items td:first-child { white-space: normal; word-break: keep-all; }
.order-summary.cart-items tfoot th,
.order-summary.cart-items tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--line);
    font-weight: 700;
    text-align: right;
    color: var(--accent-dark);
}

/* ---------- 공개 페이지: 방문 예약 접수 확인 ---------- */
.receipt-hero {
    text-align: center;
    padding: 8px 0 22px;
}
.receipt-hero .kind-chip {
    display: inline-block;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 12px;
}
.receipt-hero .page-title { margin: 0 0 10px; }
.receipt-hero .receipt-no {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0 0 14px;
}
.receipt-hero .receipt-no strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.94rem;
}
.status-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-badge.status-received { background: var(--accent-soft); color: var(--accent-dark); }
.status-badge.status-confirmed { background: var(--success-soft); color: var(--success); }
.status-badge.status-completed { background: var(--head); color: var(--muted); }
.status-badge.status-cancelled { background: var(--warn-soft); color: var(--warn); }

.receipt-section {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 18px 20px;
    margin: 0 auto 14px;
    max-width: 640px;
    overflow-x: auto;
}
.receipt-section h2 { margin: 0 0 12px; font-size: 1.02rem; }
.receipt-section .order-summary { margin: 0; max-width: none; }
.receipt-section .muted { margin: 12px 0 0; }
.receipt-note { max-width: 640px; }

/* 고객 예약조회 — 변경 이력: "방문·예약자 정보"와 같은 key/value 표 스타일.
   조정이 여러 건이면 각 건을 굵은 선으로 구분한다. */
.change-log { margin-top: 12px; }
.change-log .order-summary { margin: 0; max-width: none; }
.change-log .order-summary + .order-summary {
    margin-top: 16px;
    border-top: 2px solid var(--line);
}
.change-log .order-summary td.pre-line {
    white-space: pre-line;
    word-break: keep-all;
    line-height: 1.7;
}

/* 고객 예약조회 — "이미지로 저장" 버튼(페이지 아래쪽, 가운데) */
.receipt-save {
    max-width: 640px;
    margin: 4px auto 14px;
    text-align: center;
}
.receipt-save .btn { min-width: 180px; }

/* ---------- 관리자: 주문 관리 ---------- */
/* 구분·상태·검색·조회 버튼은 화면 폭이 좁아져도 절대 줄바꿈되지 않고 한 행을 유지한다 —
   공간이 부족하면(작은 화면) 세로로 쌓는 대신 행 자체를 가로 스크롤한다. */
.rsv-filter-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 10px 14px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rsv-filter-form label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
    flex: 0 0 auto;
}
.rsv-filter-form select,
.rsv-filter-form input[type="text"] {
    height: 36px;
    box-sizing: border-box;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
}
/* 폭을 줄여서 한 행에 다 들어오게 한다 — 셀렉트는 옵션 글자가 길면(예: "예약 접수(재고 확인
   중)") 말줄임표로 잘라 보여준다. */
.rsv-filter-form select {
    width: 118px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.rsv-filter-form input[type="text"] { width: 160px; max-width: 100%; }
/* "이전"/"다음" 버튼(36px) 사이의 날짜 입력칸도 같은 행이라 높이를 맞춘다 — 범용 input[type="date"]
   규칙은 40px 라 이 행에서만 그대로 두면 버튼과 어긋난다(.rsv-stats-nav-date 와 같은 이유). */
.rsv-filter-form input[type="date"] { height: 36px; margin: 0; }
/* 버튼도 같은 행의 셀렉트·입력칸(36px)과 높이를 맞춘다 — .btn.sm 은 폰트 지표에 따라 미세하게
   달라질 수 있어 높이를 명시하고 flex로 가운데 정렬한다. */
.rsv-filter-form .btn,
.rsv-filter-form .btn-outline {
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
/* "매입등록"·"판매등록" 버튼을 하나로 붙여 보여준다(사이 간격 없이, 가운데 경계선만). */
.rsv-new-btn-group { display: inline-flex; flex: 0 0 auto; }
.rsv-new-btn-group .btn-outline {
    border-radius: 0;
    margin-left: -1px;
}
.rsv-new-btn-group .btn-outline:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    margin-left: 0;
}
.rsv-new-btn-group .btn-outline:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* "이전"·날짜 입력칸·"다음"을 사이 간격 없이 한 덩어리로 붙인다(매입/판매등록 버튼 쌍과 같은
   방식) — 버튼과 날짜칸의 테두리 색이 원래 다르므로(--border vs --line) 겹치는 자리에서 선이
   또렷하게 보이도록 셋 다 같은 색으로 맞춘다. */
.rsv-date-nav { display: inline-flex; flex: 0 0 auto; }
.rsv-date-nav > * {
    border-radius: 0;
    margin-left: -1px;
    border-color: var(--border);
    position: relative;
}
.rsv-date-nav > *:first-child { margin-left: 0; }
.rsv-date-nav > *:first-child.btn-outline {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.rsv-date-nav > *:last-child.btn-outline {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/*
 * 날짜 입력칸은 항상 "이전"·"다음" 둘 다와 같이 있거나(가운데 낀 모양, 양쪽 다 각짐) 둘 다
 * 없이 혼자만 있다(양쪽 다 둥근 모양) — 템플릿에서 두 버튼이 같은 th:if 조건을 쓰기 때문에
 * 한쪽만 붙는 경우가 없다. 그래서 :first-child/:last-child 두 규칙을 따로 두지 않고
 * "혼자일 때만 둥글게"만 짚는다(범용 input[type="date"] 규칙이 태그+속성 선택자라 위
 * .rsv-date-nav > * 보다 구체적이라 border-radius: 0 이 안 먹혀, 같은 구체성으로 다시 못박는다.
 * .rsv-filter-form input[type="date"] { margin: 0; } 도 같은 이유로 음수 margin 이 안 먹어
 * 마찬가지로 다시 못박았다). 통계 화면(상품권별통계)은 입력칸이 onchange 자동제출용 폼 안에
 * 한 겹 싸여 있어(.rsv-stats-nav-date) input 이 .rsv-date-nav 의 "직계 자식"이 아니다 — 그래서
 * border-color 도 여기서 같이 짚어야 하고(위 > * 규칙은 감싼 폼까지만 닿는다), :only-child 는
 * 반드시 > 로 직계 자식일 때만 걸리게 한다(안 그러면 폼 안엔 입력칸 하나뿐이라 항상 "혼자"로
 * 오판해 양쪽 다 둥글게 나온다 — 실제로는 버튼 둘에 낀 가운데 칸인데도).
 */
.rsv-date-nav input[type="date"] { border-radius: 0; margin-left: -1px; border-color: var(--border); }
.rsv-date-nav > input[type="date"]:only-child { border-radius: var(--radius-sm); margin-left: 0; }
/* 감싼 폼 자체는 박스를 없애 안의 입력칸이 버튼들과 나란한 flex 항목처럼 붙게 한다. */
.rsv-date-nav form { display: contents; }
/* .rsv-stats-nav-date input[type="date"] { margin: 0; } (아래쪽 규칙)과 구체성이 같아 폼까지
   같이 짚어 확실히 이기게 한다. */
.rsv-date-nav .rsv-stats-nav-date input[type="date"] { margin-left: -1px; }
/* 겹친 테두리 위로 포커스·호버된 쪽이 온전히 보이게 그 요소를 앞으로 띄운다. */
.rsv-date-nav > *:hover,
.rsv-date-nav input[type="date"]:hover,
.rsv-date-nav input[type="date"]:focus { z-index: 1; }
.admin-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
    min-width: 900px;
}
.order-table th,
.order-table td {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}
.order-table tbody tr:last-child th,
.order-table tbody tr:last-child td { border-bottom: 0; }
.order-table th {
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.8rem;
    border-bottom: 2px solid var(--line);
}
.order-table tbody tr { transition: background-color 0.12s ease; }
.order-table tbody tr:hover { background: var(--accent-soft); }
.order-table tbody tr { border-left: 3px solid transparent; }
table.rsv-list-table th,
table.rsv-list-table td { padding: 4px 12px; }
table.rsv-list-table th { text-align: center; }
/* 목록이 길어져도(예: 20건) 화면 자체는 그대로 두고 목록칸만 스크롤한다 — 데스크톱 표든
   모바일 카드 목록이든 동일하게 적용한다. 헤더는 스크롤해도 계속 보이게 고정한다. */
.rsv-list-scroll {
    max-height: 70vh;
    overflow-y: auto;
}
.rsv-list-scroll table.rsv-list-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
table.rsv-list-table .status-badge { font-size: inherit; font-weight: 700; padding: 3px 12px; }
table.rsv-list-table td.rsv-amount-cell { text-align: right; white-space: nowrap; }
/* "상품권별 통계" 화면: rsv-list-table 대신 자체 규칙(패딩·고정 헤더·고정 칸너비)을 쓴다. */
.rsv-stats-table th,
.rsv-stats-table td { padding: 4px 12px; }
/* rsv-stats-table 을 쓰는 화면들은 칸 수가 서로 달라(상품권별통계 10칸, 시세비교 8칸), .order-table
   의 900px min-width(예전 사흘×3지표 레이아웃 때 값)를 그대로 두면 남는 폭을 데이터양에 따라 auto
   레이아웃이 들쭉날쭉 나눠줘 헤더 위치가 흔들린다. 공통으로 칸 너비를 고정하되, 실제 비율은
   화면마다 별도 클래스(voucher-stats-table/price-compare-table)로 지정한다. */
.rsv-stats-table {
    min-width: 0;
    table-layout: fixed;
}
.voucher-stats-table th:first-child,
.voucher-stats-table td:first-child { width: 16%; }
.voucher-stats-table th:not(:first-child),
.voucher-stats-table td:not(:first-child) { width: 9.33%; }
.price-compare-table th:first-child,
.price-compare-table td:first-child { width: 20%; }
.price-compare-table th:not(:first-child),
.price-compare-table td:not(:first-child) { width: 11.43%; }
/* "전체 지점" 통계 화면 — 지점이 행이라 칸이 적어(상품권별통계 7칸, 시세비교 3칸) 지점명 칸은 좁게, 금액 칸들은 넓게 나눈다. */
.branch-daily-stats-table th:first-child,
.branch-daily-stats-table td:first-child { width: 16%; }
.branch-daily-stats-table th:not(:first-child),
.branch-daily-stats-table td:not(:first-child) { width: 14%; }
.branch-price-compare-table th:first-child,
.branch-price-compare-table td:first-child { width: 20%; }
.branch-price-compare-table th:not(:first-child),
.branch-price-compare-table td:not(:first-child) { width: 40%; }
.rsv-list-scroll .rsv-stats-table thead th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
/* 마진(판매-매입)이 핵심 지표라 굵게·색으로 강조하고, 매수는 상품권마다 액면가가 달라 규모를
   보여주기 어려운 참고 정보라 작고 흐리게 내린다. */
.rsv-stats-margin { font-weight: 700; }
.rsv-stats-margin-pos { color: var(--success); }
.rsv-stats-margin-neg { color: var(--warn); }
.rsv-stats-qty { color: var(--muted); font-size: 0.86rem; font-weight: 400; }
th.rsv-stats-qty { font-weight: 700; }
.rsv-stats-voucher-name { font-weight: 700; }
/* "시세비교" 화면 맨 아래 총계 행 — 본문 행과 구분되도록 굵게 하고 위쪽에 진한 선을 준다. */
.rsv-stats-total-row td { border-top: 2px solid var(--line); font-weight: 700; }
.rsv-stats-total-row td:first-child { color: var(--ink); }
/* 칸 너비를 위에서 고정했으니(table-layout: fixed), 상품권명이 길면 줄바꿈으로 받아내고
   (넘치는 글자가 옆 칸을 침범하지 않게) 나머지 숫자 칸은 짧아서 그대로 한 줄로 둔다. */
.rsv-stats-table th { text-align: center; white-space: nowrap; }
.rsv-stats-table td { text-align: right; white-space: nowrap; }
.rsv-stats-table td:first-child { text-align: left; white-space: normal; word-break: keep-all; }
/* "상품권별 통계" 화면의 기준일 이동(이전/다음/직접 선택) — 버튼·날짜 입력칸 높이를 맞춘다. */
.rsv-stats-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.rsv-stats-nav-date input[type="date"] { height: 36px; margin: 0; }
.rsv-stats-nav .btn.sm,
.rsv-stats-nav .btn-outline.sm { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
.rsv-stats-nav .btn-outline.is-disabled {
    color: var(--muted);
    border-color: var(--line);
    cursor: default;
    pointer-events: none;
}
.order-table tbody tr.status-row-received { border-left-color: var(--accent); }
.order-table tbody tr.status-row-confirmed { border-left-color: var(--success); }
.order-table tbody tr.status-row-completed { border-left-color: var(--border); }
.order-table tbody tr.status-row-cancelled { border-left-color: var(--warn); }
.order-status-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
/* 셀렉트박스와 메모 입력칸의 높이·테두리를 동일하게 맞춘다(브라우저 기본 렌더링이 서로 다름). */
.order-status-form select,
.order-status-form input[type="text"] {
    height: 32px;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 0.86rem;
}
.order-status-form input[type="text"] { width: 110px; }
.btn-outline.danger { color: var(--warn); border-color: var(--warn); }
.btn-outline.danger:hover { background: var(--warn-soft); }

/* 예약 관리 목록: 칸이 5개라 좁은 화면에서는 가로 스크롤 대신 행마다 카드로 쌓는다.
   .wrap 최대폭(960px)에서 좌우 패딩(20px씩)을 빼면 내용 폭은 920px 남짓이라, 표의
   min-width(900px)와 거의 맞닿는다 — 그 사이 뜨는 폭에서도 가로 스크롤이 안 남게 960px 를 쓴다. */
@media (max-width: 960px) {
    table.rsv-list-table { min-width: 0; font-size: 0.94rem; }
    table.rsv-list-table thead { display: none; }
    table.rsv-list-table, table.rsv-list-table tbody, table.rsv-list-table tr { display: block; width: 100%; }
    table.rsv-list-table tbody tr {
        position: relative;
        margin-bottom: 12px;
        padding: 4px 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
    }
    table.rsv-list-table tbody tr:last-child { margin-bottom: 0; }
    table.rsv-list-table td {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        border-bottom: 1px dashed var(--line);
        white-space: normal;
        text-align: left;
    }
    table.rsv-list-table tbody tr:last-child td:last-child { border-bottom: 0; }
    /* 삭제 버튼은 흐름에서 빼서 카드 오른쪽 상단 귀퉁이에 얹는다. */
    table.rsv-list-table td:nth-last-of-type(2) { border-bottom: 0; }
    table.rsv-list-table td.rsv-delete-cell {
        position: absolute;
        top: 4px;
        right: 14px;
        padding: 0;
        border-bottom: 0;
    }
    /* 라벨 칸에 최소 너비를 줘서, 표처럼 값 칸이 카드마다 같은 위치에서 시작하게 맞춘다
       ("희망 방문일시"가 가장 길어 그 기준으로 잡음). */
    table.rsv-list-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        min-width: 6.5em;
        color: var(--muted);
        font-size: inherit;
        font-weight: 600;
        text-align: right;
    }
    /* "구분"(매입/판매 예약): 다른 행과 크기는 맞추고 색·굵기로만 구분 */
    table.rsv-list-table td.rsv-title-cell {
        font-size: inherit;
        font-weight: 800;
        color: var(--accent-dark);
    }
}

/* ---------- 관리자: 예약 상세·수정 ---------- */
/* 이 화면의 카드는 <section class="admin-card"> 로, 표 컨테이너(.admin-card.table-container)와
   달리 안쪽 여백과 카드 간 간격을 직접 준다. */
section.admin-card {
    padding: 20px 22px;
    margin-bottom: 16px;
}
section.admin-card > h2 {
    margin: 0 0 14px;
    font-size: 1.04rem;
}
section.admin-card > .hint:first-of-type { margin-top: 0; }
section.admin-card > .hint { margin-bottom: 18px; max-width: 760px; }
section.admin-card > .empty { margin: 0; }

/* 예약 정보 요약 표·변경 이력 표는 카드 폭을 꽉 채운다 */
.admin-card .order-summary { max-width: none; }
.admin-card .order-summary th { width: 128px; color: var(--muted); }
.admin-card .table-container { padding: 0; }
/* 변경 이력 표는 목록 화면과 달리 칸이 길어질 수 있어 줄바꿈을 허용한다 */
section.admin-card .order-table { min-width: 0; }
section.admin-card .order-table th,
section.admin-card .order-table td { white-space: normal; word-break: break-word; vertical-align: top; }
section.admin-card .order-table td:first-child,
section.admin-card .order-table td:nth-child(2) { white-space: nowrap; }
section.admin-card .order-table td.pre-line { white-space: pre-line; word-break: keep-all; }

/* 상태 변경 폼: 상세 화면에서는 메모 칸을 넉넉하게 */
.admin-card .order-status-form { flex-wrap: wrap; gap: 8px; }
.admin-card .order-status-form input[type="text"] { width: 280px; max-width: 100%; }

/* 내용 수정 폼 — 폭 제한을 풀고(상품권 행이 넓다) 단독 입력칸만 읽기 좋은 폭으로 */
.admin-card .order-form { max-width: none; margin: 0; }
.admin-card .order-form > label { max-width: 420px; }
.admin-card .order-form > .visit-time-picker { max-width: 420px; }

.rsv-edit-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 4px 0 18px;
}
.rsv-edit-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-end;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--head);
}
.rsv-edit-row label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}
.rsv-edit-row .rsv-voucher { min-width: 220px; }
.rsv-edit-row .rsv-qty,
.rsv-edit-row .rsv-rate { width: 84px; }
.rsv-edit-row .rsv-preview {
    flex: 1 1 auto;
    min-width: 150px;
    font-size: 0.9rem;
    color: var(--muted);
    padding-bottom: 9px;
}
.rsv-edit-row .rsv-preview strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.rsv-edit-row .rsv-remove { margin-bottom: 1px; }

.rsv-edit-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 2px 0 18px;
}

.footer-note {
    text-align: center;
    max-width: 560px;
    margin: 8px auto 0;
}

@media (max-width: 640px) {
    section.admin-card { padding: 16px; }
    .rsv-edit-row { padding: 12px; gap: 10px 12px; }
    .rsv-edit-row > label:first-child { flex: 1 1 100%; }
    .rsv-edit-row > label:not(:first-child) { flex: 1 1 calc(50% - 6px); }
    .rsv-edit-row .rsv-voucher,
    .rsv-edit-row .rsv-qty,
    .rsv-edit-row .rsv-rate { width: 100%; min-width: 0; }
    .rsv-edit-row .rsv-preview { flex-basis: 100%; min-width: 0; padding-bottom: 0; }
    .rsv-edit-row .rsv-remove { flex: 0 0 auto; }
    .admin-card .order-status-form { flex-direction: column; align-items: stretch; }
    .admin-card .order-status-form input[type="text"] { width: 100%; }
}

.flash, .hint {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
    margin: 14px 0;
}
.flash { border-color: var(--accent-soft-line); background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.hint { color: var(--muted); font-size: 0.86rem; }
.muted { color: var(--muted); font-size: 0.82rem; }
.err { color: var(--warn); }
.pre-line { white-space: pre-line; }

main.wrap .empty { margin: 14px 0; }

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 20px 0 24px;
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.24);
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
}
.btn:hover { background: var(--accent-dark); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3); }
.btn:disabled { background: var(--border); color: var(--surface); box-shadow: none; cursor: default; transform: none; }
/* <a> 태그는 disabled 속성이 없어서, 버튼처럼 비활성화 상태를 보여줘야 할 때 이 클래스를 쓴다
   (예: 계산기 "예약하기" CTA — 담은 상품권이 없으면 눌러도 못 넘어가게 막는다). */
.btn.is-disabled { background: var(--border); color: var(--surface); box-shadow: none; cursor: default; transform: none; pointer-events: none; }
.btn.sm { padding: 6px 11px; font-size: 0.8rem; box-shadow: none; }
.btn.sm:hover { transform: none; box-shadow: none; }

/* 제출 직후 서버 응답을 기다리는 동안 — 눌렀다는 걸 바로 보여주려고 글자를 지우고 스피너를 띄운다.
   버튼은 이미 disabled 라 색은 자동으로 바뀌고(.btn:disabled), 여기선 회전 표시만 더한다. */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* 스크롤이 긴 화면(시세표 등)에서 맨 위로 빠르게 돌아가는 버튼. */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 40;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.scroll-top-btn:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.scroll-top-btn:active { transform: translateY(-1px); }
@media (max-width: 640px) {
    .scroll-top-btn { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* 보조 버튼: 뒤로가기·지점 이동 같은 내비게이션용. 원색 .btn 보다 차분해서 화면에 여러 개 있어도
   시선을 덜 끈다. <a>·<button> 모두에 쓴다(밑줄 있는 텍스트 링크 대신 버튼처럼 보이게). */
.btn-outline {
    display: inline-block;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.1s ease, color 0.1s ease, background-color 0.1s ease;
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-outline.sm { padding: 6px 11px; font-size: 0.8rem; }

form.inline { margin: 0; }

.apply-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    transition: box-shadow 0.15s ease;
}
.apply-box .btn { flex: 0 0 auto; white-space: nowrap; }
.apply-box-pending {
    border-color: #d69e2e;
    background: #fffaeb;
}
.apply-pending-count { color: #92400e; font-weight: 700; }
.pending-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fffaeb;
    border: 1px solid #d69e2e;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}

/* "브랜드 순서" 화면: .quote-section 카드로 감싸므로 안쪽 목록엔 별도 박스가 필요 없다. */
.brand-order-list {
    list-style: none;
    margin: 0;
    padding: 0 16px;
}
.brand-order-section .section-header { text-align: left; }
.category-order-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}
.category-order-row:first-child { border-top: none; }
.category-order-name { font-weight: 600; flex: 1 1 auto; }
.category-order-count { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.category-order-buttons { display: flex; gap: 6px; }
.category-order-buttons button:disabled { opacity: 0.35; cursor: default; }

/* "재고관리" 화면: 권종 행 오른쪽의 보유 수량 입력칸. 화면이 좁아져도 권종명·입력칸이 줄바꿈
   되지 않고 한 행에 나오도록, 아래 좁은 화면 미디어쿼리의 줄바꿈 규칙을 이 화면 행에서만 무효화한다. */
.stock-qty-input { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.stock-qty-input input[type="number"] { width: 84px; text-align: right; }
.stock-qty-unit { color: var(--muted); font-size: 0.82rem; }

/* 저장한 실제 수량이 매입/판매 내역으로 계산해 둔 값과 달랐던 권종 — 행을 붉게 표시하고, 수량
   입력칸 왼쪽에 계산값과의 차이를 "(+2)" 식으로 보여준다. */
.stock-row-mismatch { background: var(--warn-soft); }
.stock-mismatch-diff { flex: 0 0 auto; color: var(--warn); font-weight: 700; font-size: 0.85rem; }

/* "전체 지점 예약 관리" 화면: 지점을 세로 목록으로 나열해 배지 유무를 한눈에 훑는다. */
.branch-reservation-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.branch-reservation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-top: 1px solid var(--line);
    transition: background-color 0.1s ease;
}
.branch-reservation-row:first-child { border-top: none; }
.branch-reservation-row:hover { background: var(--accent-soft); }
/* 지점명 맨 앞의 "방문 예약 받기" 스위치 — 행 전체가 지점 상세로 이동하는 링크이므로, 링크
   안에 인터랙티브 컨트롤을 중첩하지 않도록 별도 form 으로 뗀다. */
.branch-reservation-toggle { flex: 0 0 auto; display: flex; }
.branch-reservation-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
}
.branch-reservation-name { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; }
.branch-reservation-status { display: flex; align-items: center; gap: 10px; }
/* "방문 시간대 관리" 화면: 방문 예약 폼의 오전/오후 시간 버튼(.time-btn)과 같은 모양을 쓰되,
   여기서는 한 번에 여러 칸을 막을 수 있어야 해서 라디오처럼 하나만 켜지는 대신 체크박스
   여러 개를 각자 독립적으로 토글한다. 실제 체크박스는 숨기고 label 전체를 버튼처럼 보이게
   하며, 체크(=그 시간 막음)되면 파란색이 아니라 "막힘"을 뜻하는 붉은색으로 켜진다. */
.hour-block-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.hour-block-form > button { align-self: flex-start; }
.hour-block-grid { margin: 0; }
.hour-block-item {
    position: relative;
    justify-content: center;
    text-align: center;
}
.hour-block-item input[type="checkbox"] {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.hour-block-item:has(input:checked) {
    background: var(--warn);
    border-color: var(--warn);
    color: #fff;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.28);
}
.hour-block-item:has(input:checked):hover {
    border-color: var(--warn);
    color: #fff;
    transform: none;
    box-shadow: 0 3px 8px rgba(220, 38, 38, 0.28);
}

.branch-reservation-badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--warn);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}
/* 신규 예약 0건일 때는 눈에 띄는 빨간 배지 대신 무채색으로 — 처리할 게 없다는 뜻이라 강조가 필요 없다. */
.branch-reservation-badge.is-zero {
    background: var(--line);
    color: var(--muted);
}

.bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: var(--head);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.bulk-toolbar-sep {
    width: 1px;
    align-self: stretch;
    background: var(--line);
}
.bulk-toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bulk-toggle-label {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
    margin-right: 2px;
}
/* 같은 줄의 토글 스위치(36px)와 "전체 저장" 버튼 높이를 맞춘다. */
.bulk-toolbar .btn.sm {
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}
.bulk-toolbar .switch-toggle { gap: 8px; }
.bulk-toolbar .switch-toggle .bulk-toggle-label { margin-right: 0; }
@media (max-width: 640px) {
    .bulk-toolbar-sep { display: none; }
}

.config-grid {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.config-grid .config-row[hidden] { display: none; }

/* 권종 목록을 브랜드마다 접었다 펴는 카드. 열기 전엔 브랜드명·개수만 보인다. */
.brand-details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin: 0 0 10px;
    overflow: hidden;
}
.brand-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}
.brand-summary::-webkit-details-marker { display: none; }
.brand-summary-title { display: flex; align-items: center; gap: 8px; }
.brand-summary-arrow { color: var(--muted); transition: transform 0.15s ease; flex: 0 0 auto; }
.brand-details[open] .brand-summary-arrow { transform: rotate(180deg); }
.brand-details .config-grid {
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
}

.config-head, .config-row {
    display: grid;
    grid-template-columns: minmax(140px, 1.4fr) minmax(170px, 1.3fr) minmax(170px, 1.3fr) 104px 72px;
    gap: 10px;
    align-items: start;
    padding: 8px 12px;
    font-size: 0.86rem;
}
.config-row.config-row-dead { background: var(--warn-soft); }
.dead-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--warn);
    color: var(--warn);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}
.manual-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent-dark);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}
/* "새 권종 추가" 접이 카드 — 브랜드 목록 카드(.brand-details)와 같은 모양을 그대로 쓰되, 항상
   목록 맨 위에 하나만 있고(펼쳐도 다른 카드를 안 접는다 — 브랜드 카드끼리만 하나씩 펼치는 토글
   스크립트 대상은 .brand-details 클래스라 이 카드는 거기 안 걸린다). */
.manual-voucher-add { margin-bottom: 14px; }
.manual-voucher-form { padding: 4px 16px 16px; margin: 0; }
.config-save { display: flex; flex-direction: column; gap: 4px; }
/* 권종 한 줄의 "매입 가능"·"판매 가능"·"게시" 스위치를 한 칸에 세로로 모은다. */
.cell-toggles { display: flex; flex-direction: column; gap: 6px; }
.config-head { align-items: center; }
.config-head {
    background: var(--head);
    color: var(--muted);
    font-size: 0.76rem;
}
.config-row {
    border-top: 1px solid var(--line);
    margin: 0;
    /* 권종명·매입·판매·상태 스위치·저장 버튼을 행 높이의 세로 가운데에 맞춘다. */
    align-items: center;
}
.config-row input[type="number"] { width: 100%; }
.config-row .num { text-align: right; }
.config-row .rate-preview {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
}

.cell-name { display: flex; flex-direction: column; gap: 2px; }
.cell-name .muted { font-size: 0.74rem; }

/* 매입·판매 칸 — 입력칸과 예상 금액 한 줄. 행 안에서는 .config-row 의 align-items: center 로 세로 가운데. */
.cell-margin { display: flex; flex-direction: column; gap: 5px; }
.margin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.enable-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.76rem;
    color: var(--muted);
    cursor: pointer;
}
.enable-toggle input { margin: 0; width: 14px; height: 14px; }

/* iOS 스타일 켜기/끄기 스위치("방문 예약 받기" 등) — 실제 체크박스는 숨기고 트랙·손잡이를
   :checked 형제 선택자로 움직인다. 바로 옆에 나란히 오는 "저장" 버튼과 높이를 맞춰서
   나란히 놓였을 때 어긋나 보이지 않게 한다(.notice-form-actions .btn.sm 참고). */
.switch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    cursor: pointer;
    font-size: 0.86rem;
    color: var(--ink);
}
.switch-toggle-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.switch-toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    background: var(--border);
    border-radius: 999px;
    transition: background-color 0.15s ease;
}
.switch-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}
.switch-toggle-input:checked ~ .switch-toggle-track { background: var(--accent); }
.switch-toggle-input:checked ~ .switch-toggle-track .switch-toggle-thumb { transform: translateX(18px); }
.switch-toggle-input:focus-visible ~ .switch-toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-toggle-text { font-weight: 500; }
/* 시세설정 권종 행 안의 "매입 가능"·"판매 가능" 스위치 — 행 안에 들어가도록 작게 만든다. */
.switch-toggle-sm { height: auto; gap: 6px; font-size: 0.76rem; color: var(--muted); }
.switch-toggle-sm .switch-toggle-track { width: 32px; height: 18px; }
.switch-toggle-sm .switch-toggle-thumb { width: 14px; height: 14px; }
.switch-toggle-sm .switch-toggle-input:checked ~ .switch-toggle-track .switch-toggle-thumb { transform: translateX(14px); }
/* 스위치와 같은 행의 "저장" 버튼 높이를 스위치(36px)에 맞춘다. */
.notice-form-actions .btn.sm {
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}
.margin-row .rate-preview { white-space: nowrap; }
/* 매입률·판매율 입력은 어차피 "OO.OO%" 뿐이라 나머지 공간을 다 채우지 않게 고정폭을 준다
   (.rate-input-group·입력 둘 다 flex: 0 0 auto — .margin-row 의 justify-content: space-between 이
   입력칸과 예상금액을 양 끝으로 갈라놓는다). 모바일 카드 화면에서는 아래 미디어쿼리가 다시 넓힌다. */
.rate-input-group { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.rate-input-group input[type="number"] { flex: 0 0 auto; width: 72px; text-align: right; }
.rate-unit { color: var(--muted); font-size: 0.82rem; }

input[type="number"], input[type="text"], input[type="password"], input[type="tel"] {
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    font: inherit;
    line-height: 1.2;
}

.login-wrap { max-width: 340px; padding-top: 60px; }
.login-form { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; }
.login-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }

/* ==================== 모바일 (≤ 640px) ==================== */
@media (max-width: 640px) {
    .wrap { padding: 0 14px; }
    .site-header { padding: 16px 0 14px; }
    .tagline { font-size: 0.82rem; word-break: keep-all; }
    main.wrap { padding-top: 16px; padding-bottom: 32px; }

    /* iOS 가 입력창 포커스 시 확대하지 않도록 폼 컨트롤은 16px 이상 */
    input, select, textarea { font-size: 16px; }
    .btn { padding: 11px 16px; }

    /* ----- 공개 시세표: 행마다 카드 ----- */
    .table-container { padding: 0; }
    .quote-section table,
    .quote-section tbody,
    .quote-section tr,
    .quote-section td { display: block; }
    .quote-section thead { display: none; }
    .quote-section table { border: 0; }
    .quote-section col { width: auto; }
    .quote-section tbody { border-top: 1px solid var(--border); }

    .quote-section tbody tr.brand-row td {
        text-align: left;
        border: 0;
        border-bottom: 1px solid var(--line);
        padding: 9px 14px;
        font-size: 0.92rem;
    }
    .quote-section tbody tr:not(.brand-row) {
        padding: 12px 14px;
        border-bottom: 1px solid var(--line);
    }
    .quote-section tbody tr:not(.brand-row) td { border: 0; padding: 0; }
    .quote-section td.name { font-weight: 600; margin-bottom: 7px; }
    .quote-section td.price-cell {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 10px;
        text-align: left;
        padding: 3px 0;
    }
    .quote-section td.price-cell::before {
        color: var(--muted);
        font-size: 0.84rem;
        font-weight: 500;
        white-space: nowrap;
    }
    .quote-section td.price-cell:nth-of-type(2)::before { content: "매입가 (팔 때)"; }
    .quote-section td.price-cell:nth-of-type(3)::before { content: "판매가 (살 때)"; }
    .quote-section td.price-cell .pv { text-align: right; white-space: nowrap; }
    .quote-section .percentage { display: inline; margin-left: 4px; }
    .quote-section tbody tr:not(.brand-row):hover td { background: transparent; }

    /* ----- 예약 접수 확인: 담긴 상품권 표도 행마다 카드로 ----- */
    .order-summary.cart-items,
    .order-summary.cart-items tbody,
    .order-summary.cart-items tr { display: block; width: 100%; }
    .order-summary.cart-items thead { display: none; }
    .order-summary.cart-items tbody tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .order-summary.cart-items tbody tr:last-child { margin-bottom: 0; }
    .order-summary.cart-items td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border: 0;
        padding: 3px 0;
        white-space: normal;
    }
    .order-summary.cart-items td:first-child {
        display: block;
        font-weight: 600;
        color: var(--ink);
        margin-bottom: 4px;
    }
    .order-summary.cart-items td[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.82rem;
        font-weight: 500;
    }
    .order-summary.cart-items tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 2px solid var(--line);
        margin-top: 2px;
        padding-top: 10px;
    }
    .order-summary.cart-items tfoot th,
    .order-summary.cart-items tfoot td { display: inline; border: 0; padding: 0; }

    /* ----- 판매금액 계산기 ----- */
    .calc-open-btn { padding: 14px 16px; gap: 12px; }
    .calc-open-icon { font-size: 1.5rem; }
    .calc-open-label strong { font-size: 1rem; }
    .calc-panel { padding: 14px; }
    .calc-row {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--head);
    }
    .calc-row-item { flex: 1 1 auto; max-width: none; min-width: 0; }
    .calc-row-qty { flex: 0 0 auto; }
    .calc-row-qty input { width: 38px; min-width: 0; }
    .calc-row-remove { flex: 0 0 auto; padding-left: 8px; padding-right: 8px; }

    .calc-result table,
    .calc-result tbody,
    .calc-result tfoot,
    .calc-result tr,
    .calc-result td,
    .calc-result th { display: block; }
    .calc-result thead { display: none; }
    .calc-result table { border: 0; }
    .calc-result col { width: auto; }
    .calc-result tbody tr {
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .calc-result tbody td { border: 0; padding: 2px 0; text-align: left; }
    .calc-result tbody td.name { font-weight: 600; margin-bottom: 4px; }
    .calc-result tbody td.price-cell,
    .calc-result tbody td.qty-cell {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
    }
    .calc-result tbody td::before { color: var(--muted); font-size: 0.82rem; }
    .calc-result tbody td.price-cell:nth-of-type(2)::before { content: "장당 매입가"; }
    .calc-result tbody td.qty-cell::before { content: "매수"; }
    .calc-result tbody td.price-cell:nth-of-type(4)::before { content: "받으실 금액"; font-weight: 600; }
    .calc-result tbody td.calc-empty { text-align: center; padding: 8px 0; }
    .calc-result tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        border: 0;
        border-top: 2px solid var(--border);
        margin-top: 4px;
        padding: 12px 2px 0;
    }
    .calc-result tfoot th,
    .calc-result tfoot td { padding: 0; border: 0; background: transparent; }

    /* ----- 관리자 상단 ----- */
    .site-header.admin .wrap { gap: 10px; }
    .site-header.admin h1 { font-size: 1.15rem; margin: 0; }
    .site-header.admin .wrap a,
    .site-header.admin .wrap button { white-space: nowrap; }
    .admin-actions { gap: 10px; margin: 16px 0 20px; }
    /* 좁은 화면에서는 탭 여백·글자를 줄인다. 최상단 탭(방문관리/지점설정/시세설정)은 셋이 폭을
       똑같이 나눠 가져(flex:1) 화면이 아무리 좁아도(아이폰 SE 320px 포함) 항상 한 줄에 맞고,
       그래도 모자라면 글자를 줄이는 대신 끝을 "…"으로 자른다(글자 수가 짧아 실제로는 거의
       발생하지 않는다). 2차 탭은 항목 길이가 페이지마다 달라 균등폭을 주지 않는다. */
    .top-tab { padding: 8px 10px; font-size: 0.86rem; }
    .top-tabs:not(.sub-tabs) .top-tab {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 4px;
        padding-right: 4px;
    }
    .sub-tabs .top-tab { padding: 6px 9px; font-size: 0.8rem; }

    /* ----- 관리자 분류 순서 ----- */
    .category-order-row { flex-wrap: wrap; }
    .category-order-name { flex: 1 1 100%; }
    .category-order-count { flex: 1 1 auto; }

    /* "재고관리" 화면 행은 위 줄바꿈 규칙을 따르지 않고 권종명·수량 입력을 한 행에 유지한다.
       권종명이 길면 입력칸 폭은 지키고 이름 쪽만 줄여 "…"으로 자른다. */
    .stock-row { flex-wrap: nowrap; gap: 8px; }
    .stock-row .category-order-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ----- 관리자 권종 설정: 행마다 카드 + 항목 라벨 ----- */
    .config-head { display: none; }
    .config-grid { border: 0; background: transparent; border-radius: 0; overflow: visible; }
    .config-row {
        display: block;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        margin-bottom: 10px;
        padding: 14px;
    }
    .config-row .cell-name { margin-bottom: 8px; }
    .config-row > span[data-label] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        border-top: 1px solid var(--line);
        font-size: 0.92rem;
        text-align: right;
    }
    .config-row > span[data-label]::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 0.82rem;
        white-space: nowrap;
    }
    /* 매입/판매 그룹 칸은 수수료 배지 + 마진 입력이 여러 줄이라 좌우 정렬 대신 세로로 쌓는다 */
    .config-row > span.cell-margin[data-label] {
        display: block;
        text-align: left;
    }
    .config-row > span.cell-margin[data-label]::before {
        display: block;
        margin-bottom: 6px;
    }
    /* 상태 스위치 세 개는 모바일에서 한 줄로 나란히 */
    .config-row > span.cell-toggles[data-label] {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px 16px;
        text-align: left;
    }
    .config-row > span.cell-toggles[data-label]::before {
        flex-basis: 100%;
    }
    .config-row input[type="number"] { width: 120px; }
    .config-row span.config-save {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: 12px;
    }
    .config-row span.config-save button { padding: 12px; font-size: 0.9rem; }

    /* ----- 관리자 주문 관리 ----- */
    .order-table { font-size: 0.8rem; }
    .order-status-form { flex-wrap: wrap; }
    .order-status-form input[type="text"] { width: 100%; }
}

/* ----- 계좌내역(은행 거래 가져오기) ----- */
.bank-upload { padding: 14px 16px; margin-bottom: 14px; }
.bank-upload-form, .bank-import-fields, .bank-line, .bank-import-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
}
.bank-field { display: flex; flex-direction: column; gap: 4px; }
.bank-field-label { font-size: 0.8rem; color: var(--muted); }
/* 지점·매입/판매 선택 버튼 — 실제 라디오는 숨기고 label 전체를 버튼처럼 보인다. 선택된 것은 파랗게 채운다. */
.choice-group { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.choice-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.choice-btn input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice-btn:hover { border-color: var(--accent); }
.choice-btn:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice-btn:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.bank-upload-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}
/* 같은 줄의 입력칸·셀렉트·버튼 높이를 36px 로 맞춘다. */
.bank-upload-form input, .bank-upload-form select, .bank-upload-form .btn.sm,
.bank-tx select, .bank-tx input[type="number"], .bank-tx .btn.sm, .bank-tx .btn-outline.sm {
    height: 36px;
    box-sizing: border-box;
}
.bank-tx .btn.sm, .bank-tx .btn-outline.sm, .bank-upload-form .btn.sm { display: inline-flex; align-items: center; }
.bank-upload-form input[type="file"] { padding: 5px 7px; }
.bank-status-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.bank-exclude-all { margin-left: auto; }
.bank-status-tabs .btn.sm, .bank-status-tabs .btn-outline.sm { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
.bank-order { display: inline-flex; gap: 6px; margin-left: 8px; }
.bank-order .btn.sm, .bank-order .btn-outline.sm { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
.bank-search { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }
.bank-search input[type="search"] { height: 36px; box-sizing: border-box; width: 140px; padding: 0 10px; }
.bank-search .btn.sm, .bank-search .btn-outline.sm { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }
.bank-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.bank-pager-top { margin-top: 0; }
.bank-pager .btn.sm, .bank-pager .btn-outline.sm { height: 36px; min-width: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.bank-pager .muted { margin-left: 6px; font-size: 0.9em; }
.bank-tx { padding: 12px 16px; margin-bottom: 10px; position: relative; }
.bank-tx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.88rem; margin-bottom: 8px; }
.bank-tx-at { font-variant-numeric: tabular-nums; color: var(--muted); }
.bank-tx-amount { font-variant-numeric: tabular-nums; }
.bank-dir { padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.bank-dir.is-withdrawal { background: var(--accent-soft); color: var(--accent-dark); }
.bank-dir.is-deposit { background: var(--warn-soft); color: var(--warn); }
.bank-memo { padding: 1px 8px; border-radius: 6px; background: var(--head); border: 1px solid var(--line); font-weight: 600; }
.bank-warn { color: var(--warn); font-size: 0.8rem; margin: 4px 0; }
.bank-lines { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.bank-line select { min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.bank-line input[type="number"] { width: 72px; text-align: right; }
.bank-line input.bank-rate { width: 84px; }
.bank-line-amount { white-space: nowrap; font-size: 0.9em; }
.bank-candidates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.bank-candidate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px;
    border: 1px solid var(--line); border-radius: 8px; }
.bank-candidate.is-linked { border-color: var(--accent-soft-line); background: var(--accent-soft); }
.bank-candidate .bank-candidate-link { margin-left: auto; }
.bank-name-match { color: var(--accent); }
.bank-link-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.bank-line { align-items: center; }
.bank-import-actions { align-items: center; }
.bank-summary { font-variant-numeric: tabular-nums; font-size: 0.84rem; margin-right: auto; }
.bank-exclude-form { position: absolute; right: 16px; bottom: 12px; }
.bank-import-actions .btn.sm[type="submit"] { margin-right: 64px; }
@media (max-width: 640px) {
    .bank-exclude-form { position: static; margin-top: 8px; }
    .bank-import-actions .btn.sm[type="submit"] { margin-right: 0; }
    .bank-line select { max-width: none; }
}

/* 통계 화면의 "도매처 시세 조회" 버튼 줄 */
.wholesale-fetch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.wholesale-fetch .btn.sm { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; }

/* ----- 통계 → 도매시세추이(선 그래프) ----- */
.trend-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.trend-controls select { height: 36px; box-sizing: border-box; min-width: 220px; max-width: 100%; }
.trend-card { padding: 16px 18px; }
.trend-title { font-size: 1rem; margin: 0 0 8px; }
.trend-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px; padding: 0; font-size: 0.84rem; }
.trend-legend li { display: inline-flex; align-items: center; gap: 6px; }
/* 선 그래프라 범례·툴팁의 키도 짧은 선 모양으로 */
.trend-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; flex: 0 0 auto; }
.trend-chart { position: relative; width: 100%; min-height: 300px; transition: opacity 0.15s; }
.trend-chart.is-loading { opacity: 0.45; }
.trend-svg { display: block; width: 100%; height: auto; outline: none; touch-action: pan-y; }
.trend-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.trend-tooltip {
    position: absolute;
    pointer-events: none;
    min-width: 150px;
    padding: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    font-size: 0.8rem;
}
.trend-tooltip-date { color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.trend-tooltip-row { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.trend-tooltip-row strong { min-width: 52px; }
.trend-empty { margin: 8px 0; }
.trend-table-wrap { margin-top: 12px; font-size: 0.84rem; }
.trend-table-wrap summary { cursor: pointer; color: var(--muted); }
.trend-table-wrap table td, .trend-table-wrap table th { font-variant-numeric: tabular-nums; }