/* ================================================================
   Rental Package — Front CSS
   ================================================================ */

/* ============================================
   BS-bridge Layer (front 전용 — admin 은 BS 직접 로드, 이 매핑 불필요)
   Rental 자체 CSS 의 --bs-* 참조를 Mublo 토큰으로 연결.
   admin 컨텍스트에는 common.css 만 로드되므로 이 블록은 절대 들어가면 안 됨.
 * ============================================ */
:root {
    /* Body / surfaces */
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg: var(--color-bg);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-bg: var(--color-bg-muted);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-bg: var(--color-bg-muted);
    --bs-tertiary-color: var(--color-text-muted);

    /* Border / Radius / Shadow */
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: rgba(0, 0, 0, 0.2);
    --bs-border-width: 1px;
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-box-shadow: var(--shadow-md);

    /* Brand / Status */
    --bs-primary: var(--color-primary);
    --bs-secondary: var(--color-zinc-600);
    --bs-success: var(--color-success);
    --bs-warning: var(--color-warning);
    --bs-danger: var(--color-danger);
    --bs-info: var(--color-info);
    --bs-light: var(--color-bg-subtle);
    --bs-dark: var(--color-bg-inverse);

    /* Brand subtle / emphasis variants (badge·pill 스타일에 사용) */
    --bs-primary-bg-subtle:     var(--color-blue-50);
    --bs-primary-border-subtle: var(--color-blue-200);
    --bs-primary-text-emphasis: var(--color-blue-700);
    --bs-success-bg-subtle:     #d1fae5;
    --bs-success-border-subtle: #a7f3d0;
    --bs-success-text-emphasis: #047857;
    --bs-danger-bg-subtle:      #fee2e2;
    --bs-danger-border-subtle:  #fecaca;
    --bs-danger-text-emphasis:  #b91c1c;

    /* Links */
    --bs-link-color: var(--color-text-link);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-decoration: none;
}

:root {
    --bs-font-sans-serif: 'Plus Jakarta Sans', 'Noto Sans KR', sans-serif;
    --bs-font-serif: 'Noto Serif KR', serif;
    --bs-font-monospace: 'JetBrains Mono', 'Noto Sans KR', monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);

    /* Pagination (views/Components/pagination.php) — 기본값, 스킨이 오버라이드 가능 */
    --pagination-gap: 0.25rem;
    --pagination-font-size: 0.8125rem;
    --pagination-border-radius: 6px;
    --pagination-item-size: 32px;
    --pagination-color: #555;
    --pagination-hover-bg: #f0f0f0;
    --pagination-hover-color: #222;
    --pagination-active-bg: #333;
    --pagination-active-color: #fff;
    --pagination-disabled-color: #bbb;
}

/* ================================================================
   Rental Components (formerly common.css)
   --------------------------------------------------------------
   admin/front 양쪽에 로드되던 옛 common.css 의 토큰 의존 컴포넌트들.
   admin 은 자체 common.css 로 자급자족이고 토큰 미로드 환경이므로
   토큰 의존 코드는 front 에서만 의미가 있다 → front.css 로 흡수 (2026-04-30).
   common.css 는 향후 admin/front 양쪽에 진짜 공통인 항목 placeholder 로 유지.
 * ================================================================ */

/* ============================================
   Zinc palette + Default variant (Rental 고유, 하드코딩 값만 — admin 안전)
 * ============================================ */
:root {
    /* Zinc palette — Rental 원본값 (admin/front 모두 참조 가능) */
    --bs-zinc-50:  #fafafa;
    --bs-zinc-100: #f4f4f5;
    --bs-zinc-200: #e4e4e7;
    --bs-zinc-300: #d4d4d8;
    --bs-zinc-400: #a1a1aa;
    --bs-zinc-500: #71717a;
    --bs-zinc-600: #52525b;
    --bs-zinc-700: #3f3f46;
    --bs-zinc-800: #27272a;
    --bs-zinc-900: #18181b;
    --bs-zinc-950: #09090b;
    --bs-zinc-500-rgb: 113, 113, 122;

    /* Default variant (Rental 고유 — zinc-950 기반 다크 버튼) */
    --bs-default-bg: var(--bs-zinc-950);
    --bs-default-text: var(--bs-zinc-50);
    --bs-default-border: var(--bs-zinc-950);
    --bs-default-hover-bg: var(--bs-zinc-800);
    --bs-default-hover-text: var(--bs-zinc-50);
    --bs-default-hover-border: var(--bs-zinc-800);
    --bs-default-rgb: 9, 9, 11;
}

/* ============================================
   Reset — Input number 스핀버튼 제거
 * ============================================ */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================
   Button — Rental 고유 variant
 * ============================================ */
.btn { white-space: nowrap; }

.btn-default {
    background-color: var(--bs-default-bg);
    border-color: var(--bs-default-border);
    color: var(--bs-default-text);
}
.btn-default:hover {
    background-color: var(--bs-default-hover-bg);
    border-color: var(--bs-default-hover-border);
    color: var(--bs-default-hover-text);
}
.btn-outline-default {
    background-color: transparent;
    border-color: var(--bs-default-bg);
    color: var(--bs-default-bg);
}
.btn-outline-default:hover {
    background-color: var(--bs-default-bg);
    border-color: var(--bs-default-bg);
    color: var(--bs-default-text);
}
.btn-reset {
    padding: 0;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    line-height: inherit;
}
.btn-reset:hover {
    background: transparent;
    color: inherit;
}
.btn-xs,
.btn-group-xs > .btn {
    padding: 0.0625rem 0.25rem;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

/* ============================================
   Default color variant — Rental 고유 (ink-on-light)
 * ============================================ */
.bg-default {
    background-color: var(--bs-default-bg);
    color: var(--bs-default-text);
}
.text-default {
    color: var(--bs-default-bg) !important;
}
.text-bg-default {
    color: var(--bs-default-text) !important;
    background-color: var(--bs-default-bg) !important;
}
.border-default {
    border-color: var(--bs-default-bg) !important;
}
.link-default {
    color: var(--bs-default-bg) !important;
}
.link-default:hover,
.link-default:focus {
    color: var(--bs-default-hover-bg) !important;
}
.alert-default {
    background-color: color-mix(in srgb, var(--bs-default-bg) 12%, var(--color-bg));
    border-left-color: var(--bs-default-bg);
    color: var(--color-text);
}
.list-group-item-default {
    background-color: var(--bs-default-bg);
    color: var(--bs-default-text);
    border-color: var(--bs-default-border);
}
.table-default {
    --bs-table-bg: var(--bs-default-bg);
    --bs-table-color: var(--bs-default-text);
    --bs-table-border-color: var(--bs-default-border);
}

/* ============================================
   Form — Rental 고유
 * ============================================ */
.form-select.disabled-clear:disabled,
.form-control.disabled-clear:disabled {
    opacity: 1;
    cursor: default;
    background-color: var(--color-bg);
    color: var(--color-text);
    border-color: var(--color-border);
}

/* 폼 스위치 테마 — 브랜드 색상 적용 */
.form-switch.switch-primary .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-switch.switch-success .form-check-input:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}
.form-switch.switch-danger .form-check-input:checked {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

/* ============================================
   Table — Rental 고유 variants
 * ============================================ */
table th { font-weight: normal; }

.table-transparent { --bs-table-bg: transparent; background-color: transparent; }

.table-tertiary {
    --bs-table-bg: var(--color-bg-muted);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    background-color: var(--color-bg-muted);
}

/* 안쪽 경계선 */
.table-bordered-inner > :not(caption) > * {
    border-width: 1px 0;
}
.table-bordered-inner > :not(caption) > * > * {
    border-width: 0 1px;
}
.table-bordered-inner > :not(caption) > * > *:first-child {
    border-left-width: 0;
}
.table-bordered-inner > :not(caption) > * > *:last-child {
    border-right-width: 0;
}

/* 상단 보더 제거 */
.table-flush { border-top-width: 0; }
.table-flush tbody:not(:has(+ tfoot)) tr:last-child > * {
    border-bottom-width: 0;
}

/* 넉넉한 padding */
.table-readable > :not(caption) > * > * {
    padding: var(--space-2) var(--space-4);
}

/* rowspan 대응 스트라이프 (tbody 단위) */
.table-striped-tbody tbody:nth-of-type(even) > tr > * {
    background-color: var(--color-bg-subtle);
}
.table-striped-tbody tbody:hover > tr > * {
    background-color: var(--color-bg-muted);
}
.table-hover-tbody tbody:hover > tr > * {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
}

/* 테이블 폼 (th = 라벨 스타일) */
.table-form th,
.table-form td {
    padding: var(--space-2);
    vertical-align: middle;
    line-height: 1.25;
    word-break: break-all;
    overflow-wrap: break-word;
}
.table-form th {
    background-color: var(--color-bg-muted);
}
.table-form th label {
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 세로 스크롤 컨테이너 (sticky thead) */
.table-container {
    max-height: calc(var(--height, 400px));
    overflow-y: auto;
    border: 1px solid var(--color-border);
}
.table-container .table { border-top: none; margin: 0; }
.table-container .table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-bg-subtle);
    box-shadow: inset 0 -1px 0 var(--color-border);
}
.table-container .table > :not(caption) > *:last-child > * {
    border-bottom-color: transparent;
}

/* 반응형 스크롤바 */
.table-responsive::-webkit-scrollbar { height: 0.75rem; }
.table-responsive::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
}
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--color-zinc-500);
    border-radius: var(--radius-sm);
}

@media (max-width: 1199.98px) {
    .table-responsive table tbody th,
    .table-responsive table tbody td {
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================
   Modal — Rental 고유 백드랍 blur
 * ============================================ */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ============================================
   Input group 래핑 억제
 * ============================================ */
.input-group { flex-wrap: nowrap; }

/* ============================================
   Clipboard
 * ============================================ */
[data-clipboard-refer],
[data-clipboard-text] { cursor: pointer; }
[data-clipboard-text]:hover { color: var(--color-primary-hover); }

/* ============================================
   Custom Components
 * ============================================ */
.central {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    background-color: var(--color-bg-muted);
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--color-text);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
}

/* 점선 리더 (dt ........ dd) */
dl.dot-leader {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: normal;
    display: flex;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
}
dl.dot-leader dt {
    display: flex;
    flex: 1;
    align-items: center;
    color: var(--color-text-muted);
}
dl.dot-leader dt::after {
    content: "";
    flex: 1;
    align-self: center;
    margin: auto 0.5rem;
    border-bottom: 1px dashed var(--color-border);
}
dl.dot-leader dd {
    display: flex;
    align-items: center;
}

/* ============================================
   Full-bleed layout — 뷰포트 전체 폭
 * ============================================ */
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.full-bleed {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* ============================================
   Utilities — Rental 고유
 * ============================================ */
.mw-25 { max-width: 25% !important; }
.mw-50 { max-width: 50% !important; }
.mw-75 { max-width: 75% !important; }
.min-w-0 { min-width: 0 !important; }
.min-h-0 { min-height: 0 !important; }

.flex-basis-0   { flex-basis: 0% !important; }
.flex-basis-25  { flex-basis: 25% !important; }
.flex-basis-50  { flex-basis: 50% !important; }
.flex-basis-75  { flex-basis: 75% !important; }
.flex-basis-100 { flex-basis: 100% !important; }
.flex-basis-auto { flex-basis: auto !important; }

/* Cursor */
.cursor-auto         { cursor: auto; }
.cursor-default      { cursor: default; }
.cursor-crosshair    { cursor: crosshair; }
.cursor-text         { cursor: text; }
.cursor-move         { cursor: move; }
.cursor-wait         { cursor: wait; }
.cursor-help         { cursor: help; }
.cursor-not-allowed  { cursor: not-allowed; }
.cursor-grab         { cursor: grab; }
.cursor-grabbing     { cursor: grabbing; }
.cursor-col-resize   { cursor: col-resize; }
.cursor-row-resize   { cursor: row-resize; }
.cursor-n-resize     { cursor: n-resize; }
.cursor-e-resize     { cursor: e-resize; }
.cursor-s-resize     { cursor: s-resize; }
.cursor-w-resize     { cursor: w-resize; }
.cursor-ne-resize    { cursor: ne-resize; }
.cursor-nw-resize    { cursor: nw-resize; }
.cursor-se-resize    { cursor: se-resize; }
.cursor-sw-resize    { cursor: sw-resize; }
.cursor-ew-resize    { cursor: ew-resize; }
.cursor-ns-resize    { cursor: ns-resize; }
.cursor-nesw-resize  { cursor: nesw-resize; }
.cursor-nwse-resize  { cursor: nwse-resize; }
.cursor-vertical-text { cursor: vertical-text; }
.cursor-all-scroll   { cursor: all-scroll; }
.cursor-none         { cursor: none; }
.cursor-zoom-in      { cursor: zoom-in; }
.cursor-zoom-out     { cursor: zoom-out; }

/* Text wrap */
.text-balance    { text-wrap: balance; }
.text-pretty     { text-wrap: pretty; }
.text-break-word { overflow-wrap: break-word; }

/* White-space */
.whitespace-normal       { white-space: normal; }
.whitespace-nowrap       { white-space: nowrap; }
.whitespace-pre          { white-space: pre; }
.whitespace-pre-line     { white-space: pre-line; }
.whitespace-pre-wrap     { white-space: pre-wrap; }
.whitespace-break-spaces { white-space: break-spaces; }

/* Word-break */
.break-normal { word-break: normal; }
.break-all    { word-break: break-all; }
.break-keep   { word-break: keep-all; }

/* Border style */
.border-dashed { border-style: dashed !important; }
.border-dotted { border-style: dotted !important; }

/* Pointer events */
.pointer-events-auto { pointer-events: auto; }
.pointer-events-none { pointer-events: none; }

/* Object position */
.object-position-center       { object-position: center; }
.object-position-top          { object-position: top; }
.object-position-bottom       { object-position: bottom; }
.object-position-start        { object-position: left; }
.object-position-end          { object-position: right; }
.object-position-start-top    { object-position: left top; }
.object-position-start-bottom { object-position: left bottom; }
.object-position-end-top      { object-position: right top; }
.object-position-end-bottom   { object-position: right bottom; }
.object-position-start-center { object-position: left center; }
.object-position-end-center   { object-position: right center; }
.object-position-center-top   { object-position: center top; }
.object-position-center-bottom { object-position: center bottom; }
@media (min-width: 576px) {
    .object-position-sm-center { object-position: center; }
    .object-position-sm-top    { object-position: top; }
    .object-position-sm-bottom { object-position: bottom; }
    .object-position-sm-start  { object-position: left; }
    .object-position-sm-end    { object-position: right; }
}
@media (min-width: 768px) {
    .object-position-md-center { object-position: center; }
    .object-position-md-top    { object-position: top; }
    .object-position-md-bottom { object-position: bottom; }
    .object-position-md-start  { object-position: left; }
    .object-position-md-end    { object-position: right; }
}
@media (min-width: 992px) {
    .object-position-lg-center { object-position: center; }
    .object-position-lg-top    { object-position: top; }
    .object-position-lg-bottom { object-position: bottom; }
    .object-position-lg-start  { object-position: left; }
    .object-position-lg-end    { object-position: right; }
}

/* ============================================
   flatpickr — 사용 시 토큰 기반 스타일
 * ============================================ */
.flatpickr-calendar {
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    width: 300px;
}
.flatpickr-months { margin-bottom: var(--space-4); }
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    color: var(--color-text);
    fill: var(--color-text);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-bg);
    color: var(--color-text);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    width: 2.5rem;
    height: 2.5rem;
    top: 12px;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month { left: 12px; }
.flatpickr-months .flatpickr-next-month.flatpickr-next-month { right: 12px; }
.flatpickr-innerContainer,
.flatpickr-days,
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
.dayContainer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-start;
}
.flatpickr-day {
    color: var(--color-text);
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 calc((100% - (4px * 6)) / 7) !important;
    width: auto;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    line-height: 1;
}
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.today:hover {
    background: var(--color-bg-subtle);
    border-color: transparent;
}
.flatpickr-day.today {
    border-color: var(--color-text);
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--color-text-subtle);
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-text-subtle);
    opacity: 0.6;
}
span.flatpickr-weekday {
    background: transparent;
    color: var(--color-text-muted);
}
.flatpickr-time {
    border-top: 1px solid var(--color-border);
}
.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm,
.flatpickr-time .flatpickr-time-separator {
    color: var(--color-text);
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--color-bg-subtle);
}


/* ========================================
   Pagination (views/Components/pagination.php)
   ======================================== */
.nav-page {
    display: flex;
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--pagination-gap);
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-item {
    display: flex;
}

.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-item-size);
    height: var(--pagination-item-size);
    padding: 0 6px;
    font-size: var(--pagination-font-size);
    color: var(--pagination-color);
    text-decoration: none;
    border-radius: var(--pagination-border-radius);
    border: none;
    background: transparent;
    transition: background-color 0.15s, color 0.15s;
    cursor: pointer;
}

.page-link:hover {
    background: var(--pagination-hover-bg);
    color: var(--pagination-hover-color);
    text-decoration: none;
}

.page-item.active .page-link {
    background: var(--pagination-active-bg);
    color: var(--pagination-active-color);
    font-weight: 700;
    pointer-events: none;
}

.page-item.disabled .page-link {
    color: var(--pagination-disabled-color);
    pointer-events: none;
    cursor: default;
}

.page-label {
    display: none;
}

@media (max-width: 424.98px) {
    .page-start,
    .page-end,
    .page-count {
        display: none;
    }

    .page-label {
        display: inline;
    }

    .page-prev .page-link,
    .page-next .page-link {
        gap: 4px;
        padding: 0 12px;
    }
}

/* 브레드크럼 구분자: "/" → ">" */
.breadcrumb {
    --bs-breadcrumb-divider: '>';
}

/* ========================================
   Accessibility — 시각적으로만 숨김 (스크린리더 보존)
   Goods/View 헤딩, fix-cart 라벨 등 cross-page 사용.
   ======================================== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* a 링크는 전역 Frame 스킨 스타일을 따름 (hover 시 underline 없음) */

/* ════════════════════════════════════════════════════════════════
   Goods List Page — /rental, /rental/goods
   상품 목록 페이지 전용 스코프. BS 유틸리티 의존 제거.
 * ════════════════════════════════════════════════════════════════ */

.goods-list-page { padding: var(--space-6) 0; }

.goods-list-heading {
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
}
.goods-list-heading__count {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
}

/* 브레드크럼 */
.goods-list-breadcrumb { margin-bottom: var(--space-3); }
.goods-list-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
}
.goods-list-breadcrumb__item { color: var(--color-text-muted); }
.goods-list-breadcrumb__item a { color: inherit; text-decoration: none; }
.goods-list-breadcrumb__item a:hover { color: var(--color-text); }
.goods-list-breadcrumb__item + .goods-list-breadcrumb__item::before {
    content: '>';
    margin-right: var(--space-2);
    color: var(--color-text-subtle);
}
.goods-list-breadcrumb__item.is-current { color: var(--color-text); }

/* 필터 칩 */
.goods-list-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.goods-list-filter__btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.goods-list-filter__btn:hover {
    background: var(--color-bg-subtle);
    border-color: var(--color-text-muted);
}
.goods-list-filter__btn.is-active {
    color: var(--color-text-inverse);
    background: var(--color-text);
    border-color: var(--color-text);
}
.goods-list-filter__btn--brand.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* 정렬 + 검색 툴바 */
.goods-list-toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-4);
}

/* 정렬 네비 (md 이상) */
.goods-list-sort {
    display: none;
    flex-grow: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-1);
}
@media (min-width: 768px) {
    .goods-list-sort { display: flex; }
    .goods-list-sort-select { display: none; }
}
.goods-list-sort__link {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.goods-list-sort__link:hover { color: var(--color-text); }
.goods-list-sort__link.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* 정렬 드롭다운 (md 미만) */
.goods-list-sort-select {
    width: auto;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* 검색 */
.goods-list-search {
    display: flex;
    margin-left: auto;
    gap: 0;
}
.goods-list-search__input {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.goods-list-search__input:focus {
    outline: none;
}
.goods-list-search__submit {
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.goods-list-search__submit:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

/* 그리드 래퍼 — PC 4 / 태블릿 3 / 모바일 2 / 초소형 1 */
.goods-list-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 576px) {
    .goods-list-wrapper { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (min-width: 768px) {
    .goods-list-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .goods-list-wrapper { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

.goods-list-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* 카드 (.list-item-box) — BS .card 의존 제거, 자체 레이아웃 */
.list-item-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* 이미지 영역 — aspect-ratio 1:1 */
.list-item-box .goods-list-image {
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
}
.list-item-box .goods-link {
    display: block;
    aspect-ratio: 1 / 1;
    background-color: var(--color-bg-subtle);
}
.list-item-box .goods-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
    background-color: var(--color-bg);
}
.list-item-box .goods-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--color-bg-subtle);
    color: var(--color-text-subtle);
}
.list-item-box .goods-placeholder .bi {
    font-size: 2rem;
}

/* 본문 영역 */
.list-item-box .goods-list-content {
    position: relative;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding: 0;
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    letter-spacing: -0.025em;
}
.list-item-box .goods-list-content dl,
.list-item-box .goods-list-content dt,
.list-item-box .goods-list-content dd {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    line-height: 1.25;
}
.list-item-box .goods-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-regular);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.375;
    margin: 0;
    padding-right: 2rem;
    min-height: calc(1.375em * 2);
}
.list-item-box .goods-name a {
    color: var(--color-text);
}
.list-item-box .goods-name a:hover {
    color: var(--color-text);
}

/* 가격 박스 */
.list-item-box .price-box {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    margin-bottom: var(--space-2);
    line-height: 1.25;
}
.list-item-box .price-box dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list-item-box .price-box dd {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.list-item-box .price-box dd .price {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}
.list-item-box .price-box .emphasis .price {
    color: var(--color-primary);
    font-weight: 900;
    font-size: var(--font-size-xl);
}
.list-item-box .price-box .diminish dd {
    color: var(--color-text-muted);
}
.list-item-box .price-box .diminish dd::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    display: block;
    height: 1px;
    background: currentColor;
}
.list-item-box .point-price dd > span {
    display: flex;
    gap: 0.375rem;
    align-items: center;
}
.list-item-box .point-price dd > span em {
    font-style: normal;
    color: var(--color-text-muted);
}
.list-item-box .point-price dd > span b {
    font-size: var(--font-size-base);
}

/* 리뷰 영역 */
.list-item-box .goods-review {
    display: flex;
    gap: 0;
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--space-1);
}
.list-item-box .goods-review-score,
.list-item-box .goods-review-count {
    display: flex;
    gap: 0.25rem;
    justify-content: flex-start;
    align-items: center;
}
.list-item-box .goods-review-score .bi {
    color: var(--color-warning);
}
.list-item-box .goods-review-count {
    position: relative;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}
.list-item-box .goods-review-count::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.75rem;
    width: 3px;
    height: 3px;
    margin: auto 0;
    border-radius: 50%;
    background-color: var(--color-text-subtle);
    transform: translateX(-50%);
    content: "";
}

/* 위시 버튼 (카드 내부) */
.list-item-box .goods-wish {
    display: flex;
    width: 1.5rem;
    height: 1.5rem;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    transition: transform 0.25s ease;
    border: 0;
    background: none;
}
.list-item-box .goods-wish .bi {
    font-size: var(--font-size-lg);
}
.list-item-box .goods-wish.active {
    color: var(--color-danger);
}
.list-item-box .goods-wish.active .bi-suit-heart::before {
    content: "\F59D";
}
.list-item-box .goods-wish:active {
    transform: scale(1.25);
}

/* 공용: 목록 외에서도 쓰이는 위시 active */
.goods-wish.active {
    color: var(--color-danger);
}
.goods-wish.active .bi-suit-heart::before {
    content: "\F59D";
}

/* 상품 태그 */
.goods-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
    margin-top: var(--space-1);
}
.goods-tag {
    display: inline-block;
    padding: 1px var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
}

/* 빈 상태 */
.goods-list-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
}
.goods-list-empty .bi {
    font-size: 3rem;
    color: var(--color-text-subtle);
}
.goods-list-empty p {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}
/* Rental 빈 상태 CTA — Wish/Order 등 cross-page 재사용 */
.rental-empty-cta {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.rental-empty-cta:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}

/* 주문 상태 배지 — Order/Index, Order/List 등 */
.order-status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.order-status-badge--active {
    background: var(--color-primary);
}
.order-status-badge--finished {
    background: var(--color-text-muted);
}
.order-status-badge--cancelled {
    background: var(--color-danger);
}

/* 페이지네이션 래퍼 */
.goods-list-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--space-6);
}

/* ── 상품 상세 위시 버튼 ──────────────────────────────── */

.goods-buttons .goods-wish {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: none;
    cursor: pointer;
    color: var(--bs-secondary-color);
    font-size: 1.125rem;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
    overflow: visible;
}

.goods-buttons .goods-wish.active {
    color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.goods-buttons .goods-wish:active {
    transform: scale(1.1);
}

/* ════════════════════════════════════════════════════════════════
   Goods View Layout — /rental/goods/{id}
   유틸리티 제거 대응: 레이아웃/간격/sticky 를 스코프 CSS 로 이관
 * ════════════════════════════════════════════════════════════════ */

/* Breadcrumb 영역 padding (Goods/List 의 .goods-list-breadcrumb__list 재사용) */
.goods-view-breadcrumb { padding-top: var(--space-4); font-size: var(--font-size-sm); }

/* 후기/QnA 작성 영역 (탭 안 인라인 폼) */
.goods-view-write-toggle {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.goods-view-write-toggle:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}
.goods-view-write-toggle .bi { margin-right: var(--space-1); }

.goods-view-write-area { margin-bottom: var(--space-6); }
.goods-view-write-form {
    padding: var(--space-4);
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}
.goods-view-write-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (min-width: 576px) {
    .goods-view-write-row--qna-head {
        grid-template-columns: 1fr 2fr;
    }
}
.goods-view-write-field { margin-bottom: var(--space-3); }
.goods-view-write-field--narrow,
.goods-view-write-field--wide { margin-bottom: 0; }
.goods-view-write-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}
.goods-view-write-required { color: var(--color-danger); }
.goods-view-write-hint {
    font-weight: 400;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.goods-view-write-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.goods-view-write-input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: none;
}
.goods-view-write-stars {
    display: flex;
    gap: var(--space-1);
    font-size: 1.5rem;
}
.goods-view-write-star {
    padding: 0;
    background: transparent;
    border: 0;
    color: #f59e0b;
    cursor: pointer;
}
.goods-view-write-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.goods-view-write-image-pick-wrap { margin-top: var(--space-2); }
.goods-view-write-image-pick {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.goods-view-write-image-pick:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.goods-view-write-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}
.goods-view-write-actions--split {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.goods-view-write-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.goods-view-write-check__input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.goods-view-write-check__label {
    font-size: var(--font-size-sm);
    cursor: pointer;
}
.goods-view-write-btn {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
.goods-view-write-btn--cancel {
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-color: var(--color-border);
}
.goods-view-write-btn--cancel:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.goods-view-write-btn--submit {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.goods-view-write-btn--submit:hover { filter: brightness(0.92); }

.goods-view-list-section {
    border-top: 1px solid var(--color-border);
}
.goods-view-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--space-3);
}

/* 메인 컨테이너 세로 padding (mublo-container py-4 대체) */
.goods-view-page { padding: var(--space-6) 0; }

/* 메인 컨테이너 — 이미지 + 정보 2-col */
.goods-main-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 992px) {
    .goods-main-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-10);
    }
}

/* 이미지 영역: grid item 축소 허용 + 세로 스택 + sticky
   width 100% 강제 (Swiper 초기화 시 container 측정 실패 방지) */
.goods-image {
    min-width: 0;
    width: 100%;
}
.goods-image-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-self: start;
    width: 100%;
}
@media (min-width: 992px) {
    .goods-image-stack {
        position: sticky;
        top: calc(var(--header-height, 80px) + 1rem);
    }
}

.goods-image-container,
.goods-thumb-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    width: 100%;
    min-width: 0;
}

/* 이미지/썸네일 컨테이너 — aspect-ratio 1:1 유지 + Swiper 가 삽입하는 img 를 감쌈 */
.goods-image .image-item,
.goods-image .thumb-item {
    display: block;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-bg-muted);
}
/* 초기 로딩 스켈레톤: img 가 삽입되기 전 placeholder-glow */
.goods-image .image-item:empty,
.goods-image .thumb-item:empty {
    animation: placeholder-glow 2s ease-in-out infinite;
}
/* Swiper 삽입 img 는 컨테이너를 꽉 채움 */
.goods-image .image-item > img,
.goods-image .thumb-item > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@keyframes placeholder-glow {
    50% { opacity: 0.45; }
}

/* 상품 정보 영역 */
.goods-info { min-width: 0; }
@media (max-width: 991.98px) {
    .goods-info { margin-top: var(--space-6); }
}

/* 옵션/렌탈 조건 영역 */
.goods-condition,
.goods-option-stack,
.goods-rental-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* condition item 가로 버튼 그룹 */
.item-commitment,
.item-management,
.item-service-type {
    display: flex;
    gap: var(--space-2);
}

/* 옵션이 1~2개만 노출되더라도 한 칸씩만 차지(최대 1/3 폭)하도록 — 빈 자리는 공백.
 * 옵션이 3개 이상이면 flex-grow 균등 분배에서 각 ≤33.333% 가 되어 캡이 자연스레 미적용. */
.item-commitment > .condition-radio-box,
.item-management > .condition-radio-box,
.item-service-type > .condition-radio-box {
    max-width: 33.333%;
}

/* 제휴 카드 아코디언 내부 그리드 */
.item-card-list {
    display: grid;
    gap: var(--space-2);
}

/* 렌탈 상품 요약 박스 (가격 영역 아래) */
.rental-summary {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-muted);
    border-radius: var(--radius-md);
}
.rental-summary-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.rental-summary .rental-summary-grid { margin: 0; }

/* 상품 버튼 영역 — 위시+상담 row + 간편신청/견적서 */
.goods-buttons-row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.goods-buttons-row .btn-counsel {
    flex: 1 1 auto;
}
.goods-buttons-row .btn-order {
    flex: 1 1 0;
}
.goods-buttons-row .btn-order[data-redirect] {
    flex: 0 0 25%;
}

/* 상세 탭 영역 컨테이너 */
.goods-detail-container { margin-top: var(--space-10); }
.goods-detail-tab-nav {
    background: var(--color-bg);
}
.goods-detail-tab-nav .nav {
    margin-bottom: 0;
}

/* ── 상품 상세 (레거시 포팅) ──────────────────────────── */

/* 상품 타이틀 */
.goods-title {
    position: relative;
    margin-bottom: 2rem;
}

.goods-title .goods-name {
    margin-bottom: 0.75rem;
    font-size: 2.25rem;
    font-weight: 200;
    letter-spacing: -0.05rem;
    line-height: 1.0625;
    color: var(--bs-emphasis-color);
    word-break: keep-all;
}

/* H1 옆 SEO 보조어 (예: " 렌탈") — 작고 흐리게 */
.goods-title .goods-name .goods-name-suffix {
    margin-left: 0.4rem;
    font-size: 0.45em;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-text-muted);
    vertical-align: middle;
}

.goods-title .goods-meta {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.25;
    color: var(--bs-secondary-color);
}

.goods-title .brand-name {
    flex-shrink: 0;
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-color);
    color: var(--bs-body-bg);
    font-size: 0.75em;
    white-space: nowrap;
    text-transform: uppercase;
}

.goods-title .model-name {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goods-title .goods-score {
    flex-shrink: 0;
    margin-left: auto;
}

/* 상품 이미지 (Swiper 갤러리) */
.goods-image img {
    background-color: var(--color-bg);
}

.goods-image .sticky-top {
    top: calc(var(--header-height, 80px) + 1rem);
}

.goods-detail-tab-nav.sticky-top {
    top: var(--header-height, 80px);
}

.goods-image .goods-image-container,
.goods-image .goods-thumb-container {
    user-select: none;
}

.goods-image .goods-image-container {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.goods-image .goods-thumb-container .swiper-slide {
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-secondary-bg);
}

.goods-image .goods-thumb-container .swiper-slide-thumb-active:not(:has(.placeholder)) {
    border-color: var(--bs-border-color);
}

.goods-image .goods-thumb-container .swiper-slide-thumb-active img {
    opacity: 0.75;
    filter: grayscale(1);
}

.goods-image .swiper-button-prev,
.goods-image .swiper-button-next {
    --swiper-navigation-color: rgba(var(--bs-black-rgb), 0.75);
    --swiper-navigation-sides-offset: -1px;
}

.goods-image .swiper-button-prev svg,
.goods-image .swiper-button-next svg {
    fill: none;
    stroke-width: 3px;
}

.goods-image .goods-image-container .swiper-button-prev,
.goods-image .goods-image-container .swiper-button-next {
    --swiper-navigation-size: 76px;
    width: auto;
    padding: 1rem 0;
    background-color: rgba(var(--bs-white-rgb), 0.375);
    border: 1px solid rgba(var(--bs-black-rgb), 0.125);
}

.goods-image .goods-image-container .swiper-button-prev {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.goods-image .goods-image-container .swiper-button-next {
    border-top-left-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
}

.goods-image .goods-thumb-container .swiper-button-prev,
.goods-image .goods-thumb-container .swiper-button-next {
    --swiper-navigation-size: 32px;
}

/* Swiper 초기화 전 FOUC 방지: 첫 슬라이드만 표시 */
.goods-image .goods-image-container .swiper:not(.swiper-initialized) .swiper-wrapper {
    overflow: hidden;
    height: 0;
    padding-bottom: 100%;
}
.goods-image .goods-image-container .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}
.goods-image .goods-thumb-container .swiper:not(.swiper-initialized) .swiper-wrapper {
    overflow: hidden;
}
.goods-image .goods-thumb-container .swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
    display: none;
}

/* 렌탈 요약 */
.rental-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.rental-summary-row {
    display: flex;
    gap: 6px;
    font-size: 0.8125rem;
}
.rental-summary-row dt {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    font-weight: 400;
    white-space: nowrap;
}
.rental-summary-row dd {
    margin: 0;
    font-weight: 500;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 조건 선택 */
.condition-title {
    margin-bottom: 0.5rem;
}

/* 옵션 */
.goods-option:has(#goods-option-list:empty) {
    display: none;
}

.item-option.list-group .list-group-item:has(.form-check-input:checked) {
    --bs-list-group-bg: var(--bs-tertiary-bg);
    --bs-list-group-color: var(--bs-emphasis-color);
    transition: background-color 0.25s ease, color 0.25s ease;
    font-weight: 500;
}

.condition-option .form-check-label {
    padding: 0.625rem 1rem !important;
}

/* 렌탈 기간/관리유형/케어등급 placeholder — .condition-radio-label 실측 높이와 동일하게 */
.item-commitment .condition-item-placeholder-btn,
.item-management .condition-item-placeholder-btn,
.item-service-type .condition-item-placeholder-btn {
    flex-grow: 1;
    min-height: 2.625rem;
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    cursor: wait;
}

/* 렌탈 기간/관리유형/케어등급 btn-check */
.condition-commitment .btn,
.condition-management .btn,
.condition-service-type .btn {
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(var(--bs-secondary-rgb), 0.25);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--bs-emphasis-color);
}

.condition-commitment .btn-check:checked+.btn,
.condition-management .btn-check:checked+.btn,
.condition-service-type .btn-check:checked+.btn {
    --bs-btn-font-weight: 500;
}

@media (max-width: 576px) {
    .item-commitment,
    .item-management,
    .item-service-type {
        flex-wrap: wrap !important;
    }
    .item-commitment > *,
    .item-management > *,
    .item-service-type > * {
        flex: 0 0 calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem);
    }
}

/* 제휴 카드 선택 */
.condition-item.item-card {
    font-variant-numeric: tabular-nums;
}

/* 제휴카드 accordion — .accordion-* 클래스는 내부 CSS hook, rental-ui.js 의 Collapse 가
   data-mublo-toggle 로 토글. CSS 는 모두 .condition-item.item-card 스코프 안에서만 정의. */
.condition-item.item-card .accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.condition-item.item-card .accordion-item {
    background: var(--color-bg);
}
.condition-item.item-card .accordion-header {
    margin: 0;
}
.condition-item.item-card .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    border: 1px solid transparent;
}
.condition-item.item-card .accordion-button:not(.collapsed) {
    background: var(--color-bg);
    color: var(--color-text);
}
.condition-item.item-card .accordion-button::after {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2352525b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    transition: transform var(--transition-base);
}
.condition-item.item-card .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.condition-item.item-card .accordion-button:focus {
    outline: 0;
    box-shadow: none;
}
.condition-item.item-card .accordion-collapse {
    position: relative;
}
.condition-item.item-card .accordion-collapse::before {
    content: "";
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    top: 0;
    border-top: 1px solid var(--color-border);
}
.condition-item.item-card .accordion-body {
    padding: var(--space-4) var(--space-5);
}

.condition-item.item-card .condition-card .card-discount {
    margin-left: auto;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-weight: 300;
}

@media (max-width: 575.98px) {
    .condition-item.item-card .condition-card .form-check-label {
        flex-wrap: wrap;
        row-gap: 0;
    }
    .condition-item.item-card .condition-card .card-discount {
        flex-basis: 100%;
        margin-left: 0;
        font-size: 0.875rem;
    }
    .condition-item.item-card .card-benefit-container {
        flex-direction: column;
    }
}

.condition-item.item-card .condition-card .card-discount b {
    font-weight: 500;
}

.condition-item.item-card .condition-card .form-check-input:checked ~ .form-check-label .card-discount {
    color: var(--color-text);
    font-weight: 400;
}

.condition-item.item-card .condition-card .form-check-input:checked ~ .form-check-label .card-discount b {
    color: var(--color-text);
    font-weight: 600;
}

/* 카드 베니핏 — 컨테이너 + benefit pill (.condition-radio-label) + 내부 row */
.condition-item.item-card .card-benefit-container {
    margin: var(--space-1) 0 var(--space-2) var(--space-6);
    display: flex;
    gap: var(--space-2);
    min-width: 0;
}
.condition-item.item-card .condition-card-benefit .condition-radio-label {
    display: flex;
    flex-direction: column;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
}
.condition-item.item-card .condition-card-benefit .btn-check:checked + .condition-radio-label {
    color: var(--color-text);
    background: var(--color-bg);
    border-color: var(--color-text);
}
.condition-item.item-card .card-benefit-row {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    line-height: 1.25;
}
.condition-item.item-card .card-benefit-row__label {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.7;
    font-size: var(--font-size-xs);
}
.condition-item.item-card .card-benefit-row__value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 요금 */
.goods-price {
    margin-top: 3rem !important;
    white-space: nowrap;
}

.goods-price dl,
.goods-price dt,
.goods-price dd {
    margin: 0;
    padding: 0;
    list-style: none;
    font-style: normal;
    font-weight: normal;
}

.goods-price dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.goods-price dt {
    font-size: 1.25rem;
    padding-right: 1em;
    position: relative;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goods-price dt::after {
    content: "\F285";
    font-family: 'bootstrap-icons';
    font-size: 0.75em;
    color: var(--bs-tertiary-color);
    display: block;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.goods-price dd {
    font-size: 1.5rem;
    gap: 0.25em;
    justify-content: flex-start;
    align-items: center;
}

.goods-price dd .prefix,
.goods-price dd .suffix {
    font-weight: 300;
}

.goods-price dd .amount {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1.125em;
}

/* 프로모션 */
.goods-price .promo-info {
    margin-bottom: 0.375rem;
}

.goods-price .promo-info dl {
    color: var(--bs-primary);
}

.goods-price .promo-info dt::after {
    color: var(--bs-primary-border-subtle);
}

.goods-price .promo-info .promo-text {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.875rem;
}

.goods-price .promo-info .promo-name {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3rem;
    border: 1px solid var(--bs-primary-border-subtle);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    padding: 0.125rem 0.75rem;
    font-weight: 500;
}

.goods-price .promo-info .promo-name::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 75%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 2.5s infinite;
}

.goods-price .promo-info .promo-rate {
    position: relative;
    margin-left: auto;
    color: var(--bs-danger);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.goods-price .promo-info .promo-rate::before {
    position: absolute;
    right: 100%;
    content: "\F124";
    font-family: 'bootstrap-icons';
}

/* 할인 */
.goods-price .discount-info {
    color: var(--bs-secondary-color);
}

/* 최종가 */
.goods-price .total-info {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

.goods-price .total-info dd {
    color: var(--bs-danger);
}

/* 포인트 */
.goods-price .point-info dt,
.goods-price .point-info dd {
    color: var(--bs-success);
}
.goods-price .point-info dt::after {
    color: var(--bs-success-border-subtle);
}
.goods-price .point-info dd {
    position: relative;
}

.goods-price .point-info dd .notapp {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--bs-tertiary-color);
}

.goods-price .point-info dd .prefix {
    position: absolute;
    right: calc(100% + 0.5rem);
    overflow: hidden;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.125rem 0.75rem;
    border-radius: 3rem;
    border: 1px solid var(--bs-success-border-subtle);
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    display: flex;
    justify-content: center;
    align-items: center;
}

.goods-price .point-info dd .prefix::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 75%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: shine 2.5s infinite;
}

/* 모바일에서는 prefix 배지 숨김 (공간 협소) */
@media (max-width: 767.98px) {
    .goods-price .point-info dd .prefix {
        display: none;
    }
}

/* 포인트 디스플레이 컨트롤 */
.goods-price .point-info [data-has-point="N"] { display: flex; }
.goods-price .point-info [data-has-point="Y"] { display: none; }
.goods-price .point-info.has-point [data-has-point="N"] { display: none; }
.goods-price .point-info.has-point [data-has-point="Y"] { display: flex; }

/* 버튼 */
.goods-buttons {
    margin-top: 1rem !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* goods-action-btn — 메인 액션 버튼 (BS .btn 탈의존)
   .goods-buttons 안에서는 flex column 자식으로 풀폭 렌더 (간편신청/견적서),
   .goods-buttons-row 안에서는 flex row 자식으로 균등 분배 (전화/카톡/상담).
*/
.goods-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    line-height: 1.5;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
.goods-action-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.goods-action-btn--primary {
    color: var(--color-text);
    background: var(--color-bg);
    border-color: var(--color-text);
}
.goods-action-btn--primary:hover {
    color: var(--color-text-inverse);
    background: var(--color-text);
    border-color: var(--color-text);
}
.goods-action-btn--outline {
    color: var(--color-text);
    background: transparent;
    border-color: var(--color-text);
}
.goods-action-btn--outline:hover {
    color: var(--color-text-inverse);
    background: var(--color-text);
    border-color: var(--color-text);
}
.goods-action-btn--mobile-only { display: flex; }
@media (min-width: 992px) {
    .goods-action-btn--mobile-only { display: none; }
}

.goods-buttons .btn-counsel {
    flex-basis: 20%;
}

.goods-buttons .btn-counsel[data-channel=""] {
    display: none;
}

.goods-buttons .btn-order {
    font-weight: 500;
}
.goods-buttons .goods-action-btn--primary.btn-order {
    color: var(--color-text-inverse);
    background: var(--color-text);
    border-color: var(--color-text);
}
.goods-buttons .goods-action-btn--primary.btn-order:hover {
    filter: brightness(1.15);
}

/* 상세 탭 */
.goods-detail-tab-menu:not(:empty) {
    background-color: rgba(var(--bs-body-bg-rgb), 1);
    border-bottom: 1px solid var(--bs-border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.goods-detail-tab-menu .nav {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.goods-detail-tab-menu.is-sticky {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

.goods-detail-tab-content {
    text-align: center;
}

.goods-detail-tab-content img {
    max-width: 100%;
}

/* 탭 서머리 바 — 서머리(왼쪽) + 작성 버튼(오른쪽) 공통 레이아웃 */
.tab-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* 탭 서머리 — AJAX 로드 전 레이아웃 보호 */
.tab-summary {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-height: 3rem;
}

/* ── 애니메이션 ─────────────────────────────────────── */
@keyframes shine {
    0%   { left: -150%; }
    30%  { left: 150%; }
    100% { left: 150%; }
}

/* ========================================
   Goods View — 옵션 라디오 라벨 (commitment/management/card-benefit)
   ======================================== */
.condition-radio-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-check:checked + .condition-radio-label {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-check:disabled + .condition-radio-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================
   Related Goods — 같은 카테고리 다른 상품
   ======================================== */
.related-goods {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
}
.related-goods__heading {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.related-goods__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}
@media (min-width: 768px) { .related-goods__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .related-goods__grid { grid-template-columns: repeat(4, 1fr); } }

.related-goods__card {
    display: block;
    height: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.related-goods__card:hover {
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-md);
}
.related-goods__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.related-goods__image--placeholder {
    background: var(--color-bg-subtle);
}
.related-goods__body {
    padding: var(--space-2);
}
.related-goods__model {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}
.related-goods__name {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.related-goods__price {
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    margin-top: var(--space-1);
}

/* ========================================
   Review Image Viewer — 풀스크린 백드롭 뷰어
   ======================================== */
.review-image-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    cursor: zoom-out;
    display: flex;
    align-items: center;
    justify-content: center;
}
.review-image-viewer.is-hidden {
    display: none;
}
.review-image-viewer__img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
}

/* 별점 색상 (리뷰 목록 + 작성 폼 공용) */
.review-stars-on { color: #f59e0b; }
.review-stars-off { color: var(--color-text-subtle); }

/* Goods View 공통 보조 텍스트/빈 상태 */
.goods-view-meta-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}
.goods-view-empty-text {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-3) 0;
    margin: 0;
}
.goods-view-list-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Goods View — 탭 네비게이션 (BS Tab markup 호환 + 자체 스타일) */
.goods-detail-tab-list {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.goods-detail-tab-list::-webkit-scrollbar { display: none; }
.goods-detail-tab-item { flex: 0 0 auto; }
.goods-detail-tab-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
}
.goods-detail-tab-count {
    padding: 1px var(--space-2);
    font-size: 0.7rem;
    color: var(--color-text-inverse);
    background: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

/* Goods View — 상세 콘텐츠 영역 */
.detail-content {
    padding: var(--space-6) 0;
    text-align: center;
}
.brand-auth-mark {
    margin-bottom: var(--space-6);
}
.brand-auth-mark__img {
    max-width: 100%;
    height: auto;
}

/* Goods View — SEO 본문 섹션 (데이터 기반 자연 문장, detail 탭 상단) */
.goods-seo-summary {
    margin: 0 auto var(--space-8);
    padding: var(--space-6) var(--space-6);
    max-width: 900px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: left;
    color: var(--color-text);
    word-break: keep-all;
    line-height: 1.7;
}
.goods-seo-summary > h2 {
    margin: 0 0 var(--space-3);
    padding: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.goods-seo-summary > h3 {
    margin: var(--space-5) 0 var(--space-2);
    padding: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-text);
}
.goods-seo-summary > p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.75;
    color: var(--color-text-muted);
}
.goods-seo-summary__links {
    margin-top: var(--space-5) !important;
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-border);
    font-size: var(--font-size-sm);
}
.goods-seo-summary__links a {
    color: var(--color-text-link);
    text-decoration: underline;
}
.goods-seo-summary__links a:hover {
    text-decoration: none;
}

/* 주요 사양 dl (key-value 표) */
.goods-seo-summary__specs {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
}
.goods-seo-summary__specs dt {
    margin: 0;
    color: var(--color-text-muted);
    font-weight: 600;
}
.goods-seo-summary__specs dd {
    margin: 0;
    color: var(--color-text);
    word-break: break-word;
}

@media (max-width: 768px) {
    .goods-seo-summary__specs {
        grid-template-columns: minmax(90px, max-content) 1fr;
        gap: var(--space-1) var(--space-3);
    }
}

@media (max-width: 768px) {
    .goods-seo-summary {
        padding: var(--space-4);
        margin-bottom: var(--space-6);
        border-radius: var(--radius-md);
    }
    .goods-seo-summary > h2 {
        font-size: var(--font-size-lg);
    }
    .goods-seo-summary > h3 {
        margin-top: var(--space-4);
        font-size: var(--font-size-sm);
    }
    .goods-seo-summary > p {
        font-size: var(--font-size-sm);
    }
}

/* Goods View — 옵션 라디오 (option) */
.condition-option-row {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
}
.condition-option-row + .condition-option-row { border-top-width: 0; }
.condition-option-row:first-child {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}
.condition-option-row:last-child {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.condition-option-row:has(.condition-option__input:checked) {
    background-color: var(--color-primary-subtle);
    color: var(--color-primary);
}
.condition-option-row:has(.condition-option__input:disabled) {
    color: var(--color-text-subtle);
}
.condition-radio-box.condition-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    position: relative;
    margin: 0;
    padding: 0;
}
.condition-option__input {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin: 0 var(--space-3) 0 0;
    width: 1.125em;
    height: 1.125em;
    appearance: none;
    background-color: var(--color-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    order: 1;
}
.condition-option__input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.condition-option__input:focus {
    outline: 0;
    border-color: var(--color-text);
    box-shadow: none;
}
.condition-option__label {
    width: 100%;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: var(--font-size-base);
}

/* Goods View — 카드 선택 (template-card)
   .condition-card 는 JS handleConditionClick 의 .closest('.condition-card') 가
   참조하므로 유지. 내부 input/label 은 BS-compat .form-check-input/.form-check-label
   기존 CSS 룰(line 1215~) 과 JS 와 호환. */
.condition-radio-box.condition-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.condition-radio-box.condition-card .form-check-input {
    flex-shrink: 0;
    margin: 0;
}
.condition-card__label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
}

/* Goods View — Commitment 라벨 부속 텍스트 (개월수) */
.condition-radio-label__sub {
    color: currentColor;
    opacity: 0.7;
    font-size: 0.85em;
    line-height: 1;
}

/* Goods View — 리뷰/QnA/FAQ 요약 위젯 + 평점 인디케이터 */
.goods-view-summary-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.goods-view-summary-num {
    font-size: 1.75rem;
    font-weight: 700;
}
.goods-view-score-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.goods-view-score-num {
    font-weight: 600;
    font-size: var(--font-size-xs);
}

/* Goods View — 'sticky' 헤더 변형 + 'N/A' 안내 + 페이지네이션 변형 */
.goods-detail-tab-nav--sticky {
    position: sticky;
    top: var(--header-height, 80px);
    scroll-margin-top: var(--header-height, 80px);
    z-index: 1020;
    background: var(--color-bg);
}
.goods-view-na-text { color: var(--color-text-muted); }
.goods-view-pagination-list {
    margin-bottom: 0;
    --pagination-item-size: 28px;
    --pagination-font-size: 0.75rem;
}

/* Goods View — 이미지 비율/맞춤 (JS 동적 추가용) */
.goods-view-image-ratio {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.goods-view-image-fit {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Goods View — 관리 유형 라벨 (방문/자가) */
.condition-management-label {
    display: flex;
    gap: var(--space-2);
    flex-grow: 1;
}

/* Goods View — 탭 콘텐츠 영역 (mt-3 대체) */
.goods-view-tab-content {
    margin-top: var(--space-3);
}

/* Goods View — 라디오 박스 flex 분배 (BS .flex-grow-1/.flex-basis-0/.min-w-0 대체) */
.condition-radio-flex {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}
.condition-radio-flex--no-basis {
    flex-grow: 1;
    min-width: 0;
}

/* fix-cart 의 약정/관리 유형 토글 버튼 (JS 동적 추가) */
.fix-cart-condition-btn {
    flex-grow: 1;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.fix-cart-condition-btn:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.fix-cart-condition-btn.active {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Goods View — FAQ accordion
   BS 클래스명(.accordion-*)은 Collapse JS 토글에만 사용되고, CSS 는 .faq-accordion-* 으로만 정의. */
.faq-accordion-item {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.faq-accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) 0;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.faq-accordion-button::after {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2352525b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    transition: transform var(--transition-base);
}
.faq-accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}
.faq-accordion-button:focus {
    outline: 0;
    box-shadow: none;
}
.faq-accordion-body {
    padding: var(--space-3) 0 var(--space-4);
    color: var(--color-text-muted);
}
.faq-accordion-label {
    margin-right: var(--space-2);
    font-weight: 600;
}
.faq-accordion-label--q { color: var(--color-primary); }
.faq-accordion-label--a { color: var(--color-text); }

/* ========================================
   Review Item — 리뷰 목록 아이템 (JS template)
   ======================================== */
.review-item {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}
.review-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
}
.review-item__head-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.review-item__author {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}
.review-item__date {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}
.review-item__body {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}
.review-item__images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.review-image-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    cursor: zoom-in;
}
.review-item__reply {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}
.review-item__reply-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-right: var(--space-1);
}

/* ========================================
   QnA Item — 질문 목록 아이템 (JS template)
   ======================================== */
.qna-item {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}
.qna-item__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
    flex-wrap: wrap;
    gap: var(--space-2);
}
.qna-item__head-left,
.qna-item__head-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.qna-item__type-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    font-size: 0.7rem;
    color: var(--color-text-inverse);
    background: var(--color-text-muted);
    border-radius: var(--radius-sm);
}
.qna-item__lock {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}
.qna-item__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}
.qna-item__status-badge {
    display: inline-block;
    padding: 2px var(--space-2);
    font-size: 0.65rem;
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
}
.qna-item__status-badge.is-answered { background: var(--color-success, #16a34a); }
.qna-item__status-badge.is-pending { background: var(--color-danger); }
.qna-item__author,
.qna-item__date {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}
.qna-item__body {
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.qna-item__reply {
    background: var(--color-bg-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
}
.qna-item__reply-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-right: var(--space-1);
}
.qna-item__reply-date {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    margin-left: var(--space-2);
}

/* ========================================
   Review Thumb Pick — 작성 폼의 업로드 미리보기 썸네일
   ======================================== */
.review-thumb-pick {
    position: relative;
    width: 72px;
    height: 72px;
}
.review-thumb-pick__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
.review-thumb-pick__remove {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -30%);
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: var(--color-text);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
}


/* ════════════════════════════════════════════════════════════════
   Cart List Page — /rental/cart
 * ════════════════════════════════════════════════════════════════ */
.cart-list-page { padding: var(--space-6) 0; }

.cart-list-title {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.cart-list-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
}
.cart-list-empty p { margin: 0 0 var(--space-4); }

/* 장바구니 테이블 컬럼 너비 */
.cart-list-table { width: 100%; vertical-align: middle; }
.cart-list-table thead { background: var(--color-bg-subtle); }
.cart-list-col-check   { width: 40px; text-align: center; }
.cart-list-col-plan    { width: 100px; }
.cart-list-col-qty     { width: 180px; text-align: center; }
.cart-list-col-price   { width: 140px; text-align: right; }
.cart-list-col-actions { width: 80px; text-align: center; }

/* 상품명·메타 */
.cart-item-name {
    font-weight: var(--font-weight-semibold);
}
.cart-item-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.cart-item-meta--block { display: block; }

/* 옵션 태그 pill */
.cart-option-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-1);
}
.cart-option-tag {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    background: var(--color-primary-subtle);
    color: var(--color-primary-active);
}

/* 가로 스크롤 래퍼 (좁은 화면 대응) */
.cart-list-table-wrap {
    overflow-x: auto;
}

/* 체크박스 */
.cart-list__checkbox {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* 수량 조정 UI */
.cart-qty-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
}
.cart-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.cart-qty-btn:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.cart-qty-input {
    width: 60px;
    height: 31px;
    padding: 0 var(--space-1);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.cart-qty-save {
    margin-top: var(--space-1);
    padding: 2px var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cart-qty-save.is-hidden { display: none; }

/* 가격 행 힌트 */
.cart-qty-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* 행 삭제 */
.cart-list-row-delete {
    padding: 2px var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    background: transparent;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.cart-list-row-delete:hover {
    color: var(--color-text-inverse);
    background: var(--color-danger);
}

/* 하단 푸터 (삭제 / 주문 버튼) */
.cart-list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
}
.cart-list-footer-actions {
    display: flex;
    gap: var(--space-2);
}
.cart-list-footer__btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
.cart-list-footer__btn--primary {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.cart-list-footer__btn--primary:hover { filter: brightness(0.92); }
.cart-list-footer__btn--secondary {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
}
.cart-list-footer__btn--secondary:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}
.cart-list-footer__btn--danger {
    color: var(--color-danger);
    background: transparent;
    border-color: var(--color-danger);
}
.cart-list-footer__btn--danger:hover {
    color: var(--color-text-inverse);
    background: var(--color-danger);
}

/* ════════════════════════════════════════════════════════════════
   Cart Checkout Page — /rental/checkout
 * ════════════════════════════════════════════════════════════════ */
.checkout-page { padding: var(--space-6) 0; }

.checkout-title {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

/* 2-col 레이아웃: 주문서 + 결제 요약 */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 992px) {
    .checkout-layout {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-6);
    }
}

.checkout-main,
.checkout-summary { min-width: 0; }

/* flat: 카드/디바이더 모두 제거, 섹션 사이는 여백만으로 분리 */
.checkout-section {
    margin-bottom: var(--space-8);
}
.checkout-section:last-child {
    margin-bottom: 0;
}
.checkout-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.checkout-section__body { padding: 0; }
.checkout-summary-card .checkout-section__body {
    padding: var(--space-4);
    border: 2px solid var(--color-text-muted);
}
.checkout-section__count {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.checkout-copy-btn {
    margin-left: auto;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.checkout-copy-btn:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* 상품 항목 (카드 내부) */
.checkout-items-card { overflow: hidden; }
.checkout-items.checkout-section__body { padding: 0; }
.checkout-items-list {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.checkout-items-list > .checkout-item { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.checkout-items-list > .checkout-item:first-child { border-top: 0; }

.checkout-item-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

.checkout-item-thumb {
    flex-shrink: 0;
    width: 80px;
    display: block;
}
.checkout-item-thumb-frame {
    aspect-ratio: 1 / 1;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.checkout-item-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-item-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.checkout-item-body {
    flex: 1 1 auto;
    min-width: 0;
}
.checkout-item-name {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
}
.checkout-item-brand {
    display: inline-block;
    margin-right: var(--space-1);
    padding: 1px var(--space-2);
    background: var(--color-text);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    vertical-align: middle;
}
.checkout-item-qty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

.checkout-item-price {
    flex: 0 0 auto;
    min-width: 130px;
    text-align: right;
}
@media (max-width: 575.98px) {
    .checkout-item-layout {
        display: grid;
        grid-template-columns: 80px 1fr;
        column-gap: var(--space-4);
        row-gap: var(--space-2);
    }
    .checkout-item-thumb { grid-row: 1 }
    .checkout-item-body { grid-row: 1; min-width: 0; }
    .checkout-item-price {
        grid-column: 2;
        min-width: 0;
        text-align: left;
        padding-top: var(--space-2);
        border-top: 1px dashed var(--color-border);
    }
}
.checkout-item-subtotal {
    font-weight: var(--font-weight-semibold);
}
.checkout-item-remove {
    margin-top: var(--space-2);
    padding: 2px var(--space-3);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
    background: transparent;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.checkout-item-remove:hover {
    color: var(--color-text-inverse);
    background: var(--color-danger);
}

/* 폼 라벨/입력 */
.checkout-form-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.checkout-form-required { color: var(--color-danger); }
.checkout-form-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.checkout-form-input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: none;
}
.checkout-form-input[readonly] {
    background: var(--color-bg-subtle);
}

/* 라디오/체크박스 */
.checkout-form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}
.checkout-form-check__input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.checkout-form-check__label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
}

/* 폼 그리드 (row g-3 + col-md-6 대체) */
.checkout-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .checkout-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.checkout-form-col { min-width: 0; }
.checkout-form-col--full { grid-column: 1 / -1; }

/* 주소 검색 row */
.checkout-address-row {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.checkout-address-zip { max-width: 120px; }
.checkout-address-main { margin-bottom: var(--space-2); }
.checkout-address-search-btn {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.checkout-address-search-btn:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

/* 결제 요약 sticky */
.checkout-summary-card {
    position: sticky;
    top: calc(var(--header-height, 80px) + 1rem);
}

.checkout-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.checkout-summary-row--small { margin-bottom: var(--space-1); }
.checkout-summary-total { margin-bottom: var(--space-3); }
.checkout-summary-total strong:last-child {
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

.checkout-summary-card hr {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}
.checkout-submit { margin-top: var(--space-4); }
.checkout-submit-btn {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: filter 0.15s;
}
.checkout-submit-btn:hover { filter: brightness(0.92); }

/* ── Policies (약관 동의) ────────────────────── */
/* flat-with-divider: 메인 섹션과 동일 톤 */
.checkout-policies {
    margin-bottom: var(--space-8);
}

.checkout-policies__header {
    margin-bottom: var(--space-4);
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.checkout-policies__body {
    padding: 0;
}

.checkout-policies__agree-all {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.checkout-policies__item + .checkout-policies__item {
    margin-top: var(--space-2);
}

.checkout-policies__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkout-policies__checkbox {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.checkout-policies__label {
    flex-grow: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    cursor: pointer;
    margin: 0;
}

.checkout-policies__label--bold {
    font-weight: 700;
}

.checkout-policies__tag {
    font-size: var(--font-size-xs);
    margin-right: var(--space-1);
}

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

.checkout-policies__tag--optional {
    color: var(--color-text-muted);
}

.checkout-policies__toggle {
    flex-shrink: 0;
    padding: 2px var(--space-2);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.checkout-policies__toggle:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong, var(--color-border));
}

.checkout-policies__content {
    margin-top: var(--space-2);
    padding: var(--space-3);
    max-height: 240px;
    overflow-y: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.checkout-policies__content.is-collapsed {
    display: none;
}

/* 공용 hidden 헬퍼 (cart/checkout JS 토글용) */
.is-hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   Order Index / List Page — /rental/orders
 * ════════════════════════════════════════════════════════════════ */
.order-index-page { padding: var(--space-6) 0; }
.order-index-title {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}
.order-index-empty {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-muted);
}
.order-index-empty p { margin: 0 0 var(--space-4); }

.order-index-list {
    display: block;
    border-top: 1px solid var(--color-border);
}
.order-index-item {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
}
.order-index-item:hover { background: var(--color-bg-subtle); }

.order-index-item-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}
.order-index-item-info { flex: 1 1 auto; min-width: 0; }
.order-index-item-name { font-weight: var(--font-weight-semibold); }
.order-index-item-meta {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.order-index-item-status {
    flex: 0 0 auto;
    text-align: right;
}
.order-index-item-total {
    margin-top: var(--space-1);
    font-weight: var(--font-weight-semibold);
}

.order-index-pagination {
    margin-top: var(--space-4);
    display: flex;
    justify-content: center;
}

/* 마이페이지 섹션 제목 (레거시 인라인 스타일 대체) */
.mypage-section-title {
    margin: 0 0 var(--space-5);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

/* ════════════════════════════════════════════════════════════════
   Order Verify Page — /rental/orders/verify/{code}
 * ════════════════════════════════════════════════════════════════ */
.order-verify-page {
    padding: var(--space-12) 0;
    max-width: 520px;
}
.order-verify-header {
    text-align: center;
    margin-bottom: var(--space-6);
}
.order-verify-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}
.order-verify-subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.order-verify-alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-sm);
}
.order-verify-alert--warning {
    color: var(--color-warning, #856404);
    background: var(--color-warning-bg, #fff3cd);
    border: 1px solid var(--color-warning-border, #ffeeba);
}

.order-verify-message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}
.order-verify-message--error {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.order-verify-back {
    text-align: center;
    margin-top: var(--space-4);
}
.order-verify-back__btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.order-verify-back__btn:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}

.order-verify-field { margin-bottom: var(--space-4); }
.order-verify-field--last { margin-bottom: var(--space-6); }
.order-verify-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.order-verify-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.order-verify-input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: none;
}
.order-verify-input[readonly] {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.order-verify-submit {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: filter 0.15s;
}
.order-verify-submit:hover {
    filter: brightness(0.92);
}

/* ════════════════════════════════════════════════════════════════
   Order View Page — /rental/orders/{code}
 * ════════════════════════════════════════════════════════════════ */
.order-view-page { padding: var(--space-6) 0; }

.order-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}
.order-view-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}
.order-view-back {
    color: var(--color-text-muted);
    text-decoration: none;
}
.order-view-back:hover { color: var(--color-text); }
.order-view-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    display: inline-block;
}
.order-view-status {
    font-size: var(--font-size-base);
    padding: var(--space-1) var(--space-3);
}

/* 2-col 레이아웃 — 주문서 + 요약 */
.order-view-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 992px) {
    .order-view-layout {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-6);
    }
}
.order-view-main,
.order-view-summary { min-width: 0; }

/* flat: 카드 박스 제거, 섹션 사이는 margin 만 */
.order-view-section {
    margin-bottom: var(--space-8);
}
.order-view-section__header {
    margin-bottom: var(--space-4);
    padding: 0;
    background: transparent;
    border: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.order-view-section__body { padding: 0; }
/* 결제 정보(우측 summary)만 2px 보더로 강조 — checkout 과 동일 패턴 */
.order-view-summary { position: relative; }
.order-view-summary .order-view-section__body {
    padding: var(--space-4);
    border: 2px solid var(--color-text-muted);
}
.order-view-summary .order-view-section__body hr {
    margin: var(--space-4) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}
.order-view-section__count {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.order-view-items { padding: 0; }
.order-view-list {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.order-view-list > * { padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.order-view-list > *:first-child { border-top: 0; }

/* 상품 item */
.order-view-item-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}
.order-view-item-info { flex: 1 1 auto; min-width: 0; }
.order-view-item-name { font-weight: var(--font-weight-semibold); }
.order-view-item-meta {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.order-view-item-price {
    flex: 0 0 auto;
    text-align: right;
}
.order-view-item-total { font-weight: var(--font-weight-semibold); }
.order-view-item--canceled { background: var(--color-bg-subtle); }
.order-view-item--canceled .order-view-item-name {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

/* 설치 정보 dl */
.order-view-info {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0;
}
.order-view-info dt { color: var(--color-text-muted); }
.order-view-info dd { margin: 0; }

/* 처리 이력 log */
.order-view-list > .order-view-log { padding: var(--space-2) 0; }
.order-view-log-body {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}
.order-view-log-transition {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}
.order-view-log-arrow { color: var(--color-text-muted); }
.order-view-log-reason { margin-left: var(--space-2); }
.order-view-log-step {
    display: inline-block;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    color: var(--color-text-inverse);
}
.order-view-log-step--prev { background: var(--color-text-muted); }
.order-view-log-step--new { background: var(--color-primary); }

.order-view-order-code { font-weight: var(--font-weight-semibold); }

/* ════════════════════════════════════════════════════════════════
   Wish List Page — /rental/wishlist
 * ════════════════════════════════════════════════════════════════ */
.wish-list-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .wish-list-wrapper { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .wish-list-wrapper {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
    }
}

/* 카드 내부 이름+삭제 버튼 헤더 */
.wish-item-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
}
.wish-item-header .goods-name {
    flex: 1 1 auto;
    padding-right: 0;
}
.wish-remove-btn {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--color-danger);
    font-size: var(--font-size-lg);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-fast);
}
.wish-remove-btn:hover { transform: scale(1.15); }

/* ════════════════════════════════════════════════════════════════
   Goods Not Found Page — /rental/goods/{id} (없는 상품)
 * ════════════════════════════════════════════════════════════════ */
.goods-notfound-page {
    text-align: center;
    padding: var(--space-12) var(--space-4);
}
.goods-notfound-icon {
    font-size: 4rem;
    color: var(--color-text-subtle);
}
.goods-notfound-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}
.goods-notfound-desc {
    margin: 0;
    color: var(--color-text-muted);
}
.goods-notfound-action {
    display: inline-block;
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.goods-notfound-action:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}

/* ════════════════════════════════════════════════════════════════
   Partner Register Page — /rental/partner/register
 * ════════════════════════════════════════════════════════════════ */
.partner-register-page {
    padding: var(--space-12) 0;
    max-width: 540px;
}
.partner-register-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.partner-register-card__body { padding: var(--space-6); }
.partner-register-title {
    margin: 0 0 var(--space-6);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    text-align: center;
}
.partner-register-field { margin-bottom: var(--space-4); }
.partner-register-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}
.partner-register-required { color: var(--color-danger); }
.partner-register-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.partner-register-input:focus {
    outline: none;
    border-color: var(--color-text);
    box-shadow: none;
}
.partner-register-input--textarea { resize: vertical; min-height: 100px; }

.partner-register-submit {
    display: block;
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: filter 0.15s;
}
.partner-register-submit:hover { filter: brightness(0.92); }

/* ════════════════════════════════════════════════════════════════
   Cart Complete Page — /rental/order/{code}/complete
 * ════════════════════════════════════════════════════════════════ */
.cart-complete-page { padding: var(--space-12) 0; }

.cart-complete { text-align: center; }

.cart-complete-icon {
    margin-bottom: var(--space-6);
    color: var(--color-success);
}

.cart-complete-title {
    margin: 0 0 var(--space-4);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.cart-complete-order-no {
    margin: 0 0 var(--space-6);
    color: var(--color-text-muted);
}
.cart-complete-order-no strong { color: var(--color-primary); }

.cart-complete-card {
    display: inline-block;
    min-width: 400px;
    text-align: left;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.cart-complete-card__body {
    padding: var(--space-4);
}
.cart-complete-card hr {
    margin: var(--space-3) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

.cart-complete-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.cart-complete-row--total { margin-bottom: 0; }
.cart-complete-row--total strong:last-child { color: var(--color-primary); }

.cart-complete-actions {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}
.cart-complete-actions__btn {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}
.cart-complete-actions__btn--secondary {
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
}
.cart-complete-actions__btn--secondary:hover {
    color: var(--color-text-inverse);
    background: var(--color-primary);
}
.cart-complete-actions__btn--primary {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
}
.cart-complete-actions__btn--primary:hover {
    background: var(--color-primary-hover, var(--color-primary));
    filter: brightness(0.92);
}

/* ── 장바구니 카드 (레거시) ───────────────────────────── */
.rental-cart-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: box-shadow 0.15s;
}

.rental-cart-item:hover {
    box-shadow: var(--shadow-sm);
}

/* ── 주문 상태 배지 ──────────────────────────────────── */
.rental-status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* ── 플로팅 주문 패널 ──────────────────────────────────── */
.fix-cart-wrapper {
    position: fixed;
    z-index: 1040;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.fix-cart-inner {
    background: var(--bs-body-bg, var(--color-bg));
    border: 1px solid var(--bs-border-color, var(--color-border));
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 위로가기 (상단 중앙 원형, 카드 선에 걸침) */
.fix-cart-top-btn {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid var(--bs-border-color, var(--color-border));
    border-radius: 50%;
    background: var(--bs-body-bg, var(--color-bg));
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--bs-secondary-color, var(--color-text-muted));
    font-size: 0.6875rem;
    z-index: 1;
}

.fix-cart-top-btn:hover {
    color: var(--bs-body-color);
    background: var(--bs-tertiary-bg, var(--color-bg-subtle));
}

/* 헤더 (상품명) — flex 양쪽 정렬 */
.fix-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
}

.fix-cart-title {
    font-size: 0.8125rem;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.fix-cart-body {
    padding: 0.625rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
}

.fix-cart-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fix-cart-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--bs-secondary-color, var(--color-text-muted));
}

.fix-cart-options .fix-cart-row + .fix-cart-row {
    margin-top: 0.25rem;
}

/* 렌탈 기간/관리 유형 버튼 그룹 — 2열 wrap (균등 분할) */
.fix-cart-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.fix-cart-btn-group .fix-cart-condition-btn {
    flex: 0 0 calc(50% - var(--space-1) / 2);
    min-width: 0;
}

.fix-cart-divider {
    margin: 0.25rem 0;
    opacity: 0.15;
}

.fix-cart-footer {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--bs-border-color, var(--color-border));
}

/* 가격 영역 */
.fix-cart-price dl {
    margin: 0;
}

.fix-cart-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.75;
}

.fix-cart-price-row dt {
    font-weight: 400;
    color: var(--bs-secondary-color, var(--color-text-muted));
}

.fix-cart-price-row dd {
    margin: 0;
}

.fix-cart-price-total {
    font-size: 0.875rem;
    font-weight: 600;
    padding-top: 0.25rem;
    border-top: 1px solid var(--bs-border-color, var(--color-border));
    margin-top: 0.25rem;
}

.fix-cart-price-total dt {
    font-weight: 600;
    color: var(--bs-body-color);
}

.fix-cart-amount {
    font-size: 1.125rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-danger);
    margin-right: 0.125rem;
}

.fix-cart-price-point {
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-primary);
}
.fix-cart-price-point dt {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold, 600);
}
.fix-cart-price-point dd {
    color: var(--color-primary);
}
.fix-cart-price-point [data-calc="point"] {
    font-size: 1.0625rem;
    font-weight: var(--font-weight-bold, 700);
}

.fix-cart-price-point [data-has-point="N"] { display: inline; }
.fix-cart-price-point [data-has-point="Y"] { display: none; }
.fix-cart-price-point.has-point [data-has-point="N"] { display: none; }
.fix-cart-price-point.has-point [data-has-point="Y"] { display: inline; }

/* 푸터 버튼 그룹 — 2열 구조 (1열: 전화/카톡/상담, 2열: 간편신청/견적서) */
.fix-cart-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.fix-cart-buttons-row {
    display: flex;
    gap: var(--space-2);
}
.fix-cart-buttons-row .btn-counsel {
    flex: 1 1 0;
}
.fix-cart-buttons-row .btn-order {
    flex: 1 1 0;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    font-weight: var(--font-weight-medium);
}
.fix-cart-buttons-row .btn-order[data-redirect] {
    flex: 0 0 auto;
}

/* 간편신청 CTA — 배경 동적 그라데이션(드리프트) + 수면 파문(외측 펄스) */
.fix-cart-buttons-row .fix-cart-action--primary.btn-order {
    background-color: var(--color-danger);
    background-image:
        radial-gradient(circle at 25% 35%, color-mix(in srgb, white 28%, transparent), transparent 55%),
        radial-gradient(circle at 75% 65%, color-mix(in srgb, black 22%, transparent), transparent 55%),
        radial-gradient(circle at 50% 50%, color-mix(in srgb, white 14%, transparent), transparent 70%);
    background-size: 180% 180%, 200% 200%, 220% 220%;
    background-repeat: no-repeat;
    border-color: var(--color-danger);
    overflow: hidden;
}
@keyframes fix-cart-cta-drift {
    0%   { background-position:   0%   0%, 100% 100%,  50%   0%; }
    25%  { background-position:  60%  30%,  20%  80%,  80%  60%; }
    50%  { background-position: 100%  70%,  50%  30%,  20%  90%; }
    75%  { background-position:  40% 100%,  80%  20%,  60%  40%; }
    100% { background-position:   0%   0%, 100% 100%,  50%   0%; }
}
@keyframes fix-cart-cta-ripple {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 55%, transparent); }
    35%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-danger) 0%, transparent); }
    100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--color-danger) 0%, transparent); }
}
.fix-cart-buttons-row .fix-cart-action--primary.btn-order:not([disabled]) {
    animation:
        fix-cart-cta-drift 9s ease-in-out infinite,
        fix-cart-cta-ripple 2.2s ease-out infinite;
}
.fix-cart-buttons-row .fix-cart-action--primary.btn-order:hover,
.fix-cart-buttons-row .fix-cart-action--primary.btn-order:focus-visible {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .fix-cart-buttons-row .fix-cart-action--primary.btn-order {
        animation: none;
    }
}
.fix-cart-buttons .btn-counsel[data-channel=""] {
    display: none;
}

/* fix-cart-action 버튼 (BS 탈의존, .btn 베이스 제거) */
.fix-cart-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
.fix-cart-action--outline {
    color: var(--color-text-muted);
    background: var(--color-bg);
    border-color: var(--color-border);
}
.fix-cart-action--outline:hover {
    color: var(--color-text);
    background: var(--color-bg-subtle);
}
.fix-cart-action--primary {
    color: var(--color-text-inverse);
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.fix-cart-action--primary:hover { filter: brightness(0.92); }
.fix-cart-action[disabled] { opacity: 0.5; cursor: not-allowed; }

/* 재오픈 버튼 */
.fix-cart-reopen {
    position: fixed;
    z-index: 1040;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color, var(--color-border));
    background: var(--bs-body-bg, var(--color-bg));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bs-body-color);
    font-size: 1.125rem;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.fix-cart-reopen:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* 데스크탑: 우측 고정 */
@media (min-width: 992px) {
    .fix-cart-wrapper {
        bottom: 24px;
        right: 24px;
        width: 320px;
    }

    .fix-cart-wrapper.is-hidden {
        transform: translateX(360px);
        opacity: 0;
        pointer-events: none;
    }

}

/* 모바일: 하단 고정 */
@media (max-width: 991.98px) {
    .fix-cart-wrapper {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
    }

    .fix-cart-inner {
        border-radius: 12px 12px 0 0;
        border-bottom: none;
    }

    .fix-cart-wrapper.is-hidden {
        transform: translateY(100%);
        opacity: 0;
        pointer-events: none;
    }

    /* 축소: 바디+헤더 숨기고 푸터만 노출 */
    .fix-cart-wrapper.is-minimized .fix-cart-header,
    .fix-cart-wrapper.is-minimized .fix-cart-body {
        display: none;
    }

    .fix-cart-body {
        max-height: 40vh;
    }

    /* 모바일에서 위로가기 → 토글 아이콘 */
    .fix-cart-top-btn i {
        transition: transform 0.2s ease;
    }
}

/* ── 상담 신청 모달 ────────────────────────────────────── */
.rental-consultation-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9000;
    align-items: center;
    justify-content: center;
}
.rental-consultation-overlay.active {
    display: flex;
}
.rental-consultation-modal {
    position: relative;
    background: var(--color-bg);
    border-radius: 16px;
    width: 92%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.rental-consultation-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    z-index: 1;
}
.rental-consultation-close:hover {
    color: var(--color-text);
}
.rental-consultation-header {
    padding: 24px 24px 0;
}
.rental-consultation-header h4 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
}
.rental-consultation-body {
    padding: 16px 24px;
}
.rental-consultation-field {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}
.rental-consultation-field:last-child {
    border-bottom: none;
}
.rental-consultation-label {
    flex: 0 0 100px;
    padding-top: 7px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}
.rental-consultation-input {
    flex: 1;
    min-width: 0;
}
.rental-consultation-footer {
    padding: 0 24px 24px;
}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .rental-goods-view__thumb {
        width: 48px;
        height: 48px;
    }
    .rental-consultation-field {
        flex-direction: column;
    }
    .rental-consultation-label {
        flex: none;
        padding-top: 0;
        margin-bottom: 6px;
    }
}

/* ================================================================
   견적서 (/rental/quotation) — 한국 전통 견적서 양식
   Bootstrap CSS 비의존 스코프. 아이콘 폰트(bi-*)만 공통.
   클래스 네임스페이스: .rental-quotation-*
   ================================================================ */

.quotation-page {
    max-width: 960px;
    margin: 30px auto;
    padding: 24px 16px;
    color: var(--color-text);
}

/* 페이지 제목과 안내 문구는 스크린 리더 전용 (화면에서는 영역도 차지하지 않음) */
.rental-quotation-heading,
.rental-quotation-intro {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.rental-quotation-doc {
    background: var(--color-bg);
    border: 2px solid var(--color-text);
    padding: 36px 40px;
}

/* 제목 (맨 위, 중앙 정렬) */
.rental-quotation-title {
    text-align: center;
    margin: 0 0 24px;
}
.rental-quotation-title-inner {
    display: inline-block;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 14px;
    /* trailing letter-spacing(14px) 상쇄: padding-left 로 좌우 대칭 + margin-right 로 밑줄 끝 맞춤 */
    padding: 0 0 4px 14px;
    margin-right: -14px;
    border-bottom: 3px solid var(--color-text);
}

/* 헤더: 좌(번호·날짜·수신) / 우(공급자) — flex 양쪽 배치 */
.rental-quotation-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 18px;
}
.rental-quotation-header-left,
.rental-quotation-header-right { flex: 1 1 0; min-width: 0; }

.rental-quotation-no {
    display: inline-block;
    min-width: 160px;
    padding: 2px 0;
    color: var(--color-text-subtle);
}
.rental-quotation-date {
    margin: 0;
}

.rental-quotation-recipient {
    margin-top: 18px;
}
.rental-quotation-recipient-input {
    border: 0;
    border-bottom: 1.5px solid var(--color-text);
    padding: 3px 8px;
    width: 260px;
    font-size: 15px;
    background: transparent;
    outline: none;
    font-family: inherit;
    color: inherit;
}
.rental-quotation-recipient-input:focus { background: #fffbea; }
.rental-quotation-recipient-suffix {
    font-size: 16px;
    font-weight: 600;
    margin-left: 8px;
}

.rental-quotation-contact {
    margin-top: 8px;
}
.rental-quotation-contact-label {
    display: none;
}
.rental-quotation-contact-input {
    border: 0;
    border-bottom: 1.5px solid var(--color-text);
    padding: 3px 8px;
    width: 260px;
    font-size: 15px;
    background: transparent;
    outline: none;
    font-family: inherit;
    color: inherit;
}
.rental-quotation-contact-input:focus { background: #fffbea; }

/* 공급자 격자 */
.rental-quotation-supplier {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.rental-quotation-supplier th,
.rental-quotation-supplier td {
    border: 1px solid var(--color-text);
    padding: 5px 7px;
    vertical-align: middle;
}
.rental-quotation-supplier th {
    background: var(--color-bg-muted);
    font-weight: 600;
    text-align: center;
    width: 75px;
}
.rental-quotation-supplier-side {
    width: 20px;
    text-align: center;
    background: var(--color-bg-muted);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 2px;
}
.rental-quotation-stamp-slot { position: relative; }
.rental-quotation-stamp-placeholder {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 1.5px dashed var(--color-danger);
    color: var(--color-danger);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.35;
}

/* 섹션 (1. 제품 및 조건 / 2. 비고 ...) */
.rental-quotation-section {
    margin-top: 24px;
}
.rental-quotation-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.rental-quotation-section-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}
.rental-quotation-section-note {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* 품목 표 (반응형 — 좁은 화면에서 가로 스크롤) */
.rental-quotation-items-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.rental-quotation-items {
    border-collapse: collapse;
    font-size: 14px;
}
.rental-quotation-items th,
.rental-quotation-items td {
    border: 1px solid var(--color-text);
    padding: 6px 8px;
    vertical-align: middle;
    font-size: 14px;
}
.rental-quotation-items td { white-space: nowrap; }
.rental-quotation-items td:first-child,
.rental-quotation-items td:nth-child(3) {
    white-space: normal;
    overflow-wrap: break-word;
}
.rental-quotation-items th {
    background: var(--color-border);
    text-align: center;
    font-weight: 700;
    letter-spacing: 2px;
    white-space: nowrap;
}
.rental-quotation-items th small {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: var(--color-zinc-600);
    margin-top: 1px;
}
.rental-quotation-items td.right  { text-align: right; }
.rental-quotation-items td.center { text-align: center; }
.rental-quotation-items .goods-name  { font-weight: 700; font-size: 14px; }
.rental-quotation-items .goods-model { font-size: 14px; color: var(--color-text); }
.rental-quotation-items .goods-brand { font-size: 14px; color: var(--color-text-muted); margin-top: 2px; }
.rental-quotation-items .options     { font-size: 14px; color: var(--color-text); }
.rental-quotation-items tfoot td {
    background: var(--color-bg-subtle);
    font-weight: 700;
}

/* 수량 조정 UI (견적서 전용 스코프) — 2행 세로 스택 */
.rental-quotation-qty-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.rental-quotation-qty-group {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.rental-quotation-qty-btn {
    display: none;  /* -/+ 버튼은 숨김 (input 직접 입력 방식) */
}
.rental-quotation-qty-input {
    width: 50px;
    height: 26px;
    padding: 2px;
    text-align: center;
    border: 1px solid var(--color-zinc-500);
    font-family: inherit;
    font-size: 12px;
    outline: none;
    background: var(--color-bg);
}
.rental-quotation-qty-input:focus { border-color: var(--color-primary); }
.rental-quotation-qty-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-bg);
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    vertical-align: middle;
}
.rental-quotation-qty-save:hover:not(:disabled) { background: var(--color-primary-hover); }
.rental-quotation-qty-save:disabled {
    display: none;
}

/* 아이템 삭제 버튼 */
.rental-quotation-remove-btn {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}
.rental-quotation-remove-btn:hover { color: var(--color-zinc-900); }

/* 빈 장바구니 */
.rental-quotation-empty {
    border: 1px solid var(--color-text);
    padding: 40px 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
    margin-top: -1px;
}
.rental-quotation-empty-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 14px;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
    border-radius: 4px;
}
.rental-quotation-empty-cta:hover { background: var(--color-primary-subtle); }

/* 비고 (ul+li) */
.rental-quotation-notes {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: var(--color-zinc-700);
    line-height: 1.8;
}
.rental-quotation-notes li {
    margin: 0;
}

/* 액션 */
.rental-quotation-actions {
    text-align: center;
    margin: 28px 0 10px;
}
.rental-quotation-actions-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}
.rental-quotation-add-btn,
.rental-quotation-download-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    cursor: pointer;
    border-radius: var(--radius-md);
    text-decoration: none;
    vertical-align: middle;
    transition:
        background-color var(--transition-base),
        color var(--transition-base),
        border-color var(--transition-base);
}
.rental-quotation-add-btn {
    background: var(--color-bg);
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.rental-quotation-add-btn:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.rental-quotation-download-btn {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.rental-quotation-download-btn:hover:not(:disabled) { background: var(--color-primary-hover); }
.rental-quotation-download-btn:disabled { background: var(--color-text-subtle); cursor: not-allowed; }
.rental-quotation-actions-hint {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ----------------------------------------------------------------
   견적서 모바일 반응형 (max-width: 720px)
   - 헤더 좌/우 flex 를 세로 스택으로
   - 공급자 블록 고정 380px 해제 → 자연 크기
   - 제목 / 패딩 / input 폭 축소
   - 공급자 셀 word-break 허용
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
    .quotation-page {
        padding: 12px 8px;
    }
    .rental-quotation-doc {
        padding: 20px 16px;
    }

    /* 제목 — 축소 + letter-spacing 상쇄값 재조정 */
    .rental-quotation-title-inner {
        font-size: 22px;
        letter-spacing: 8px;
        padding: 0 0 3px 8px;
        margin-right: -8px;
        border-bottom-width: 2px;
    }

    /* 헤더: flex 가로 → 세로 스택 */
    .rental-quotation-header {
        display: block;
    }
    .rental-quotation-header-left,
    .rental-quotation-header-right {
        width: auto;
        padding: 0;
    }
    .rental-quotation-header-right {
        margin-top: 16px;
    }

    /* 수신처/연락처 input 폭 풀림 */
    .rental-quotation-recipient-input,
    .rental-quotation-contact-input {
        width: 100%;
        max-width: 260px;
    }

    /* 공급자 격자 — 폰트 축소 + 주소 긴 값 줄바꿈 */
    .rental-quotation-supplier {
        font-size: 10.5px;
    }
    .rental-quotation-supplier th {
        width: 60px;
    }
    .rental-quotation-supplier td {
        word-break: break-all;
    }

    /* 섹션 note(단위: 원, VAT 포함) 가 좁을 땐 아래로 흘러도 무해 */
    .rental-quotation-section-header {
        flex-wrap: wrap;
    }

    /* 모바일에선 품목 표 전부 nowrap — 좁은 화면에선 가로 스크롤로 탐색 */
    .rental-quotation-items td,
    .rental-quotation-items td:first-child,
    .rental-quotation-items td:nth-child(3) {
        white-space: nowrap;
    }
}


/* ================================================================
   BS-Compat Layer (Rental 자체 보유 — 패키지 독립성 확보)
   ----------------------------------------------------------------
   basic skin common.css 에도 동일한 BS-compat 가 framework view 용으로 존재.
   Rental 은 다른 스킨/no-skin 환경에서도 동작하도록 자체 사본을 보유한다.
   장기적으로 Rental view 가 BS 클래스명에서 벗어나면 이 블록 제거.
   ================================================================ */
/* ============================================
   Bootstrap-Compatible Utilities
   Rental 패키지 등 BS5.3 의존 영역이 점진 마이그레이션을 할 수 있도록
   BS 와 동일한 클래스명을 Mublo 토큰 기반으로 재구현.
   Spacing scale 매핑:
     0 → 0
     1 → var(--space-1)  ( 4px)
     2 → var(--space-2)  ( 8px)
     3 → var(--space-4)  (16px)
     4 → var(--space-6)  (24px)
     5 → var(--space-12) (48px)
   Breakpoints: sm 576 / md 768 / lg 992 / xl 1200
 * ============================================ */

/* ── Container ────────────────────────────── */
.container,
.container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-4);
    padding-left: var(--space-4);
}
.container { max-width: var(--site-max-width); }

/* ── Grid ─────────────────────────────────── */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-top: var(--bs-gutter-y);
}

/* Gutter scale */
.g-0,  .gx-0  { --bs-gutter-x: 0; }
.g-0,  .gy-0  { --bs-gutter-y: 0; }
.g-1,  .gx-1  { --bs-gutter-x: 0.25rem; }
.g-1,  .gy-1  { --bs-gutter-y: 0.25rem; }
.g-2,  .gx-2  { --bs-gutter-x: 0.5rem; }
.g-2,  .gy-2  { --bs-gutter-y: 0.5rem; }
.g-3,  .gx-3  { --bs-gutter-x: 1rem; }
.g-3,  .gy-3  { --bs-gutter-y: 1rem; }
.g-4,  .gx-4  { --bs-gutter-x: 1.5rem; }
.g-4,  .gy-4  { --bs-gutter-y: 1.5rem; }
.g-5,  .gx-5  { --bs-gutter-x: 3rem; }
.g-5,  .gy-5  { --bs-gutter-y: 3rem; }
@media (min-width: 576px) {
    .g-sm-0,  .gx-sm-0  { --bs-gutter-x: 0; }
    .g-sm-0,  .gy-sm-0  { --bs-gutter-y: 0; }
    .g-sm-1,  .gx-sm-1  { --bs-gutter-x: 0.25rem; }
    .g-sm-1,  .gy-sm-1  { --bs-gutter-y: 0.25rem; }
    .g-sm-2,  .gx-sm-2  { --bs-gutter-x: 0.5rem; }
    .g-sm-2,  .gy-sm-2  { --bs-gutter-y: 0.5rem; }
    .g-sm-3,  .gx-sm-3  { --bs-gutter-x: 1rem; }
    .g-sm-3,  .gy-sm-3  { --bs-gutter-y: 1rem; }
    .g-sm-4,  .gx-sm-4  { --bs-gutter-x: 1.5rem; }
    .g-sm-4,  .gy-sm-4  { --bs-gutter-y: 1.5rem; }
    .g-sm-5,  .gx-sm-5  { --bs-gutter-x: 3rem; }
    .g-sm-5,  .gy-sm-5  { --bs-gutter-y: 3rem; }
}
@media (min-width: 768px) {
    .g-md-0,  .gx-md-0  { --bs-gutter-x: 0; }
    .g-md-0,  .gy-md-0  { --bs-gutter-y: 0; }
    .g-md-1,  .gx-md-1  { --bs-gutter-x: 0.25rem; }
    .g-md-1,  .gy-md-1  { --bs-gutter-y: 0.25rem; }
    .g-md-2,  .gx-md-2  { --bs-gutter-x: 0.5rem; }
    .g-md-2,  .gy-md-2  { --bs-gutter-y: 0.5rem; }
    .g-md-3,  .gx-md-3  { --bs-gutter-x: 1rem; }
    .g-md-3,  .gy-md-3  { --bs-gutter-y: 1rem; }
    .g-md-4,  .gx-md-4  { --bs-gutter-x: 1.5rem; }
    .g-md-4,  .gy-md-4  { --bs-gutter-y: 1.5rem; }
    .g-md-5,  .gx-md-5  { --bs-gutter-x: 3rem; }
    .g-md-5,  .gy-md-5  { --bs-gutter-y: 3rem; }
}
@media (min-width: 992px) {
    .g-lg-0,  .gx-lg-0  { --bs-gutter-x: 0; }
    .g-lg-0,  .gy-lg-0  { --bs-gutter-y: 0; }
    .g-lg-1,  .gx-lg-1  { --bs-gutter-x: 0.25rem; }
    .g-lg-1,  .gy-lg-1  { --bs-gutter-y: 0.25rem; }
    .g-lg-2,  .gx-lg-2  { --bs-gutter-x: 0.5rem; }
    .g-lg-2,  .gy-lg-2  { --bs-gutter-y: 0.5rem; }
    .g-lg-3,  .gx-lg-3  { --bs-gutter-x: 1rem; }
    .g-lg-3,  .gy-lg-3  { --bs-gutter-y: 1rem; }
    .g-lg-4,  .gx-lg-4  { --bs-gutter-x: 1.5rem; }
    .g-lg-4,  .gy-lg-4  { --bs-gutter-y: 1.5rem; }
    .g-lg-5,  .gx-lg-5  { --bs-gutter-x: 3rem; }
    .g-lg-5,  .gy-lg-5  { --bs-gutter-y: 3rem; }
}
@media (min-width: 1200px) {
    .g-xl-4,  .gx-xl-4  { --bs-gutter-x: 1.5rem; }
    .g-xl-4,  .gy-xl-4  { --bs-gutter-y: 1.5rem; }
    .g-xl-5,  .gx-xl-5  { --bs-gutter-x: 3rem; }
    .g-xl-5,  .gy-xl-5  { --bs-gutter-y: 3rem; }
}

.col       { flex: 1 0 0%; }
.col-auto  { flex: 0 0 auto; width: auto; }
.col-1  { flex: 0 0 auto; width: 8.333333%; }
.col-2  { flex: 0 0 auto; width: 16.666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.333333%; }
.col-5  { flex: 0 0 auto; width: 41.666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.333333%; }
.col-8  { flex: 0 0 auto; width: 66.666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
    .col-sm       { flex: 1 0 0%; }
    .col-sm-auto  { flex: 0 0 auto; width: auto; }
    .col-sm-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-sm-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-sm-3  { flex: 0 0 auto; width: 25%; }
    .col-sm-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-sm-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-sm-6  { flex: 0 0 auto; width: 50%; }
    .col-sm-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-sm-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-sm-9  { flex: 0 0 auto; width: 75%; }
    .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
    .col-md       { flex: 1 0 0%; }
    .col-md-auto  { flex: 0 0 auto; width: auto; }
    .col-md-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-md-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-md-3  { flex: 0 0 auto; width: 25%; }
    .col-md-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6  { flex: 0 0 auto; width: 50%; }
    .col-md-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9  { flex: 0 0 auto; width: 75%; }
    .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
    .col-lg       { flex: 1 0 0%; }
    .col-lg-auto  { flex: 0 0 auto; width: auto; }
    .col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3  { flex: 0 0 auto; width: 25%; }
    .col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
    .col-xl       { flex: 1 0 0%; }
    .col-xl-auto  { flex: 0 0 auto; width: auto; }
    .col-xl-1  { flex: 0 0 auto; width: 8.333333%; }
    .col-xl-2  { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3  { flex: 0 0 auto; width: 25%; }
    .col-xl-4  { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-5  { flex: 0 0 auto; width: 41.666667%; }
    .col-xl-6  { flex: 0 0 auto; width: 50%; }
    .col-xl-7  { flex: 0 0 auto; width: 58.333333%; }
    .col-xl-8  { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-9  { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

/* row-cols-N — 한 행에 N 개씩 자동 배치
   BS 공식 순서: .col / .col-* 뒤에 선언되어야 덮어쓰기 가능 (cascade 순서 의존) */
.row-cols-auto > * { flex: 0 0 auto; width: auto; }
.row-cols-1 > *    { flex: 0 0 auto; width: 100%; }
.row-cols-2 > *    { flex: 0 0 auto; width: 50%; }
.row-cols-3 > *    { flex: 0 0 auto; width: 33.333333%; }
.row-cols-4 > *    { flex: 0 0 auto; width: 25%; }
.row-cols-5 > *    { flex: 0 0 auto; width: 20%; }
.row-cols-6 > *    { flex: 0 0 auto; width: 16.666667%; }
@media (min-width: 576px) {
    .row-cols-sm-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-sm-1 > *    { flex: 0 0 auto; width: 100%; }
    .row-cols-sm-2 > *    { flex: 0 0 auto; width: 50%; }
    .row-cols-sm-3 > *    { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-sm-4 > *    { flex: 0 0 auto; width: 25%; }
    .row-cols-sm-5 > *    { flex: 0 0 auto; width: 20%; }
    .row-cols-sm-6 > *    { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 768px) {
    .row-cols-md-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-md-1 > *    { flex: 0 0 auto; width: 100%; }
    .row-cols-md-2 > *    { flex: 0 0 auto; width: 50%; }
    .row-cols-md-3 > *    { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-md-4 > *    { flex: 0 0 auto; width: 25%; }
    .row-cols-md-5 > *    { flex: 0 0 auto; width: 20%; }
    .row-cols-md-6 > *    { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 992px) {
    .row-cols-lg-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-lg-1 > *    { flex: 0 0 auto; width: 100%; }
    .row-cols-lg-2 > *    { flex: 0 0 auto; width: 50%; }
    .row-cols-lg-3 > *    { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-lg-4 > *    { flex: 0 0 auto; width: 25%; }
    .row-cols-lg-5 > *    { flex: 0 0 auto; width: 20%; }
    .row-cols-lg-6 > *    { flex: 0 0 auto; width: 16.666667%; }
}
@media (min-width: 1200px) {
    .row-cols-xl-auto > * { flex: 0 0 auto; width: auto; }
    .row-cols-xl-1 > *    { flex: 0 0 auto; width: 100%; }
    .row-cols-xl-2 > *    { flex: 0 0 auto; width: 50%; }
    .row-cols-xl-3 > *    { flex: 0 0 auto; width: 33.333333%; }
    .row-cols-xl-4 > *    { flex: 0 0 auto; width: 25%; }
    .row-cols-xl-5 > *    { flex: 0 0 auto; width: 20%; }
    .row-cols-xl-6 > *    { flex: 0 0 auto; width: 16.666667%; }
}

/* ── Spacing (m/p × t/b/s/e/x/y × 0-5) ─────── */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--space-1) !important; }
.m-2 { margin: var(--space-2) !important; }
.m-3 { margin: var(--space-4) !important; }
.m-4 { margin: var(--space-6) !important; }
.m-5 { margin: var(--space-12) !important; }
.m-auto { margin: auto !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-4) !important; }
.mt-4 { margin-top: var(--space-6) !important; }
.mt-5 { margin-top: var(--space-12) !important; }
.mt-auto { margin-top: auto !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-6) !important; }
.mb-5 { margin-bottom: var(--space-12) !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: var(--space-1) !important; }
.ms-2 { margin-left: var(--space-2) !important; }
.ms-3 { margin-left: var(--space-4) !important; }
.ms-4 { margin-left: var(--space-6) !important; }
.ms-5 { margin-left: var(--space-12) !important; }
.ms-auto { margin-left: auto !important; }

.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: var(--space-1) !important; }
.me-2 { margin-right: var(--space-2) !important; }
.me-3 { margin-right: var(--space-4) !important; }
.me-4 { margin-right: var(--space-6) !important; }
.me-5 { margin-right: var(--space-12) !important; }
.me-auto { margin-right: auto !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-4 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.mx-5 { margin-left: var(--space-12) !important; margin-right: var(--space-12) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-4 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.my-5 { margin-top: var(--space-12) !important; margin-bottom: var(--space-12) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-4) !important; }
.p-4 { padding: var(--space-6) !important; }
.p-5 { padding: var(--space-12) !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--space-1) !important; }
.pt-2 { padding-top: var(--space-2) !important; }
.pt-3 { padding-top: var(--space-4) !important; }
.pt-4 { padding-top: var(--space-6) !important; }
.pt-5 { padding-top: var(--space-12) !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--space-1) !important; }
.pb-2 { padding-bottom: var(--space-2) !important; }
.pb-3 { padding-bottom: var(--space-4) !important; }
.pb-4 { padding-bottom: var(--space-6) !important; }
.pb-5 { padding-bottom: var(--space-12) !important; }

.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: var(--space-1) !important; }
.ps-2 { padding-left: var(--space-2) !important; }
.ps-3 { padding-left: var(--space-4) !important; }
.ps-4 { padding-left: var(--space-6) !important; }
.ps-5 { padding-left: var(--space-12) !important; }

.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: var(--space-1) !important; }
.pe-2 { padding-right: var(--space-2) !important; }
.pe-3 { padding-right: var(--space-4) !important; }
.pe-4 { padding-right: var(--space-6) !important; }
.pe-5 { padding-right: var(--space-12) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-4 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-5 { padding-left: var(--space-12) !important; padding-right: var(--space-12) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-4 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-5 { padding-top: var(--space-12) !important; padding-bottom: var(--space-12) !important; }

/* ── Gap ──────────────────────────────────── */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-4) !important; }
.gap-4 { gap: var(--space-6) !important; }
.gap-5 { gap: var(--space-12) !important; }

/* ── Display ──────────────────────────────── */
.d-none         { display: none !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block        { display: block !important; }
.d-grid         { display: grid !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }

@media (min-width: 576px) {
    .d-sm-none         { display: none !important; }
    .d-sm-inline       { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block        { display: block !important; }
    .d-sm-flex         { display: flex !important; }
    .d-sm-inline-flex  { display: inline-flex !important; }
    .d-sm-grid         { display: grid !important; }
}
@media (min-width: 768px) {
    .d-md-none         { display: none !important; }
    .d-md-inline       { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block        { display: block !important; }
    .d-md-flex         { display: flex !important; }
    .d-md-inline-flex  { display: inline-flex !important; }
    .d-md-grid         { display: grid !important; }
}
@media (min-width: 992px) {
    .d-lg-none         { display: none !important; }
    .d-lg-inline       { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block        { display: block !important; }
    .d-lg-flex         { display: flex !important; }
    .d-lg-inline-flex  { display: inline-flex !important; }
    .d-lg-grid         { display: grid !important; }
}

/* ── Flex ─────────────────────────────────── */
.flex-row          { flex-direction: row !important; }
.flex-row-reverse  { flex-direction: row-reverse !important; }
.flex-column       { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap         { flex-wrap: wrap !important; }
.flex-nowrap       { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex-grow-0       { flex-grow: 0 !important; }
.flex-grow-1       { flex-grow: 1 !important; }
.flex-shrink-0     { flex-shrink: 0 !important; }
.flex-shrink-1     { flex-shrink: 1 !important; }
.flex-fill         { flex: 1 1 auto !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.justify-content-evenly  { justify-content: space-evenly !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-self-start    { align-self: flex-start !important; }
.align-self-end      { align-self: flex-end !important; }
.align-self-center   { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch  { align-self: stretch !important; }

.align-content-start   { align-content: flex-start !important; }
.align-content-end     { align-content: flex-end !important; }
.align-content-center  { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around  { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

/* ── Position ─────────────────────────────── */
.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }
.top-0    { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.start-0  { left: 0 !important; }
.end-0    { right: 0 !important; }

/* ── Sizing ───────────────────────────────── */
.w-25  { width: 25% !important; }
.w-50  { width: 50% !important; }
.w-75  { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-25  { height: 25% !important; }
.h-50  { height: 50% !important; }
.h-75  { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }
.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }
.vh-100 { height: 100vh !important; }
.vw-100 { width: 100vw !important; }

/* ── Text ─────────────────────────────────── */
.text-start  { text-align: left !important; }
.text-end    { text-align: right !important; }
/* .text-center 는 위 Typography 섹션에 이미 정의됨 */
.text-nowrap { white-space: nowrap !important; }
.text-wrap   { white-space: normal !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-uppercase  { text-transform: uppercase !important; }
.text-lowercase  { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-decoration-none       { text-decoration: none !important; }
.text-decoration-underline  { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }
.text-white   { color: #fff !important; }
.text-black   { color: #000 !important; }
/* .text-muted / .text-primary / .text-success / .text-warning / .text-danger / .text-info 는
   위 Color Utilities 섹션에 이미 정의됨 */

.fs-1 { font-size: var(--font-size-4xl) !important; }
.fs-2 { font-size: var(--font-size-3xl) !important; }
.fs-3 { font-size: var(--font-size-2xl) !important; }
.fs-4 { font-size: var(--font-size-xl) !important; }
.fs-5 { font-size: var(--font-size-lg) !important; }
.fs-6 { font-size: var(--font-size-base) !important; }

.fw-light    { font-weight: 300 !important; }
.fw-normal   { font-weight: var(--font-weight-regular) !important; }
.fw-medium   { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold     { font-weight: var(--font-weight-bold) !important; }

.lh-1  { line-height: 1 !important; }
.lh-sm { line-height: var(--line-height-tight) !important; }
.lh-base { line-height: var(--line-height-normal) !important; }
.lh-lg { line-height: var(--line-height-relaxed) !important; }

.font-monospace { font-family: var(--font-mono) !important; }

/* ── Border ───────────────────────────────── */
.border         { border: 1px solid var(--color-border) !important; }
.border-0       { border: 0 !important; }
.border-top     { border-top: 1px solid var(--color-border) !important; }
.border-top-0   { border-top: 0 !important; }
.border-bottom  { border-bottom: 1px solid var(--color-border) !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-start   { border-left: 1px solid var(--color-border) !important; }
.border-start-0 { border-left: 0 !important; }
.border-end     { border-right: 1px solid var(--color-border) !important; }
.border-end-0   { border-right: 0 !important; }

.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-danger  { border-color: var(--color-danger) !important; }
.border-info    { border-color: var(--color-info) !important; }

.rounded          { border-radius: var(--radius-md) !important; }
.rounded-0        { border-radius: 0 !important; }
.rounded-1        { border-radius: var(--radius-sm) !important; }
.rounded-2        { border-radius: var(--radius-md) !important; }
.rounded-3        { border-radius: var(--radius-lg) !important; }
.rounded-4        { border-radius: var(--radius-xl) !important; }
.rounded-pill     { border-radius: var(--radius-full) !important; }
.rounded-circle   { border-radius: 50% !important; }
.rounded-top      { border-top-left-radius: var(--radius-md) !important; border-top-right-radius: var(--radius-md) !important; }
.rounded-bottom   { border-bottom-left-radius: var(--radius-md) !important; border-bottom-right-radius: var(--radius-md) !important; }

/* ── Background ───────────────────────────── */
.bg-white   { background-color: var(--color-bg) !important; }
.bg-light   { background-color: var(--color-bg-subtle) !important; }
.bg-body    { background-color: var(--color-bg) !important; }
.bg-dark    { background-color: var(--color-bg-inverse) !important; color: var(--color-text-inverse); }
.bg-primary { background-color: var(--color-primary) !important; color: var(--color-text-inverse); }
.bg-success { background-color: var(--color-success) !important; color: var(--color-text-inverse); }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger  { background-color: var(--color-danger) !important; color: var(--color-text-inverse); }
.bg-info    { background-color: var(--color-info) !important; color: var(--color-text-inverse); }
.bg-transparent { background-color: transparent !important; }

/* ── Overflow ─────────────────────────────── */
.overflow-auto    { overflow: auto !important; }
.overflow-hidden  { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll  { overflow: scroll !important; }

/* ── Ratio (aspect-ratio 컨테이너) ──────────
   BS 의 .ratio 유틸. JS 로 삽입되는 마크업이 .ratio.ratio-1x1 을 쓰기 때문에
   Swiper·Modal·갤러리 등의 이미지 컨테이너 aspect-ratio 유지에 필요. */
.ratio {
    position: relative;
    width: 100%;
}
.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ratio-1x1  { --bs-aspect-ratio: 100%; }
.ratio-4x3  { --bs-aspect-ratio: calc(3 / 4 * 100%); }
.ratio-16x9 { --bs-aspect-ratio: calc(9 / 16 * 100%); }
.ratio-21x9 { --bs-aspect-ratio: calc(9 / 21 * 100%); }

/* ── Object-fit ─────────────────────────── */
.object-fit-contain { object-fit: contain !important; }
.object-fit-cover   { object-fit: cover !important; }
.object-fit-fill    { object-fit: fill !important; }
.object-fit-scale   { object-fit: scale-down !important; }
.object-fit-none    { object-fit: none !important; }

/* ── Shadow ───────────────────────────────── */
.shadow-none { box-shadow: none !important; }
.shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.shadow      { box-shadow: var(--shadow-md) !important; }
.shadow-lg   { box-shadow: var(--shadow-lg) !important; }

/* ── Cursor ───────────────────────────────── */
.cursor-pointer { cursor: pointer !important; }

/* ============================================
   Bootstrap-Compatible Components
   Rental 등 BS5.3 의존 영역이 BS CSS 없이 동작하도록
   BS 주요 컴포넌트를 Mublo 토큰 기반으로 재구현.
 * ============================================ */

/* ── BS Button variants ────────────────────
   기본 .btn 레이아웃은 Typography/Component 섹션의 .btn 정의 재활용.
   여기서는 BS-스타일 색상 변형(.btn-primary/.btn-outline-primary 등)만 추가.
*/
.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-text-inverse);
}
.btn-primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}
.btn-secondary {
    background: var(--color-zinc-600);
    border-color: var(--color-zinc-600);
    color: var(--color-text-inverse);
}
.btn-secondary:hover {
    background: var(--color-zinc-700);
    border-color: var(--color-zinc-700);
    color: var(--color-text-inverse);
}
.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-text-inverse);
}
.btn-success:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text);
}
.btn-warning:hover { filter: brightness(0.92); }
.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-text-inverse);
}
.btn-danger:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-info {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--color-text-inverse);
}
.btn-info:hover { filter: brightness(0.92); color: var(--color-text-inverse); }
.btn-light {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}
.btn-light:hover { background: var(--color-bg-muted); }
.btn-dark {
    background: var(--color-bg-inverse);
    border-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}
.btn-dark:hover {
    background: var(--color-zinc-800);
    border-color: var(--color-zinc-800);
    color: var(--color-text-inverse);
}
.btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-link);
    text-decoration: underline;
}
.btn-link:hover { color: var(--color-primary-hover); }

.btn-outline-primary {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}
.btn-outline-secondary {
    background: transparent;
    border-color: var(--color-zinc-500);
    color: var(--color-zinc-700);
}
.btn-outline-secondary:hover {
    background: var(--color-zinc-600);
    color: var(--color-text-inverse);
}
.btn-outline-success {
    background: transparent;
    border-color: var(--color-success);
    color: var(--color-success);
}
.btn-outline-success:hover { background: var(--color-success); color: var(--color-text-inverse); }
.btn-outline-warning {
    background: transparent;
    border-color: var(--color-warning);
    color: var(--color-warning);
}
.btn-outline-warning:hover { background: var(--color-warning); color: var(--color-text); }
.btn-outline-danger {
    background: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.btn-outline-danger:hover { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-outline-info {
    background: transparent;
    border-color: var(--color-info);
    color: var(--color-info);
}
.btn-outline-info:hover { background: var(--color-info); color: var(--color-text-inverse); }
.btn-outline-light {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
.btn-outline-light:hover { background: var(--color-bg-subtle); }
.btn-outline-dark {
    background: transparent;
    border-color: var(--color-zinc-900);
    color: var(--color-zinc-900);
}
.btn-outline-dark:hover { background: var(--color-zinc-900); color: var(--color-text-inverse); }

.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}
.btn-lg {
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-base);
}

/* ── btn-check ─────────────────────────────
   radio/checkbox 을 시각적으로 숨기고 label 을 버튼으로 쓰는 BS 패턴.
   <input type="radio" class="btn-check" id="x">
   <label class="btn" for="x">선택</label>
*/
.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}
.btn-check[disabled] + .btn,
.btn-check:disabled + .btn {
    pointer-events: none;
    filter: none;
    opacity: 0.65;
}
.btn-check:focus-visible + .btn {
    box-shadow: none;
}

/* ── BS Form ─────────────────────────────── */
.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    background-clip: padding-box;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2352525b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 12px;
    padding-right: var(--space-8);
    appearance: none;
}
.form-control:focus,
.form-select:focus {
    outline: 0;
    border-color: var(--color-text);
    box-shadow: none;
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--color-bg-muted);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.form-control::placeholder { color: var(--color-text-subtle); }
.form-control-sm,
.form-select-sm { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); border-radius: var(--radius-sm); }
.form-control-lg,
.form-select-lg { padding: var(--space-3) var(--space-4); font-size: var(--font-size-base); border-radius: var(--radius-lg); }

.form-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}
.form-text {
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.75em;
    margin-bottom: var(--space-2);
}
.form-check-input {
    width: 1.125em;
    height: 1.125em;
    margin-top: 0.25em;
    margin-left: -1.75em;
    vertical-align: top;
    appearance: none;
    background-color: var(--color-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:focus {
    outline: 0;
    border-color: var(--color-text);
    box-shadow: none;
}
.form-check-label {
    cursor: pointer;
    color: var(--color-text);
}

.form-switch {
    padding-left: 2.5em;
}
.form-switch .form-check-input {
    width: 2em;
    margin-left: -2.5em;
    background-position: left center;
    border-radius: 2em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2371717a'/%3e%3c/svg%3e");
    transition: background-position var(--transition-fast);
}
.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background-color: transparent;
    appearance: none;
}
.form-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
}
.form-range::-webkit-slider-thumb {
    margin-top: -0.25rem;
    width: 1rem;
    height: 1rem;
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
    appearance: none;
}
.form-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    background: var(--color-bg-muted);
    border-radius: var(--radius-full);
}
.form-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background: var(--color-primary);
    border: 0;
    border-radius: 50%;
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > :not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

/* ── BS Card extensions ──────────────────── */
.card-header {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    font-weight: var(--font-weight-semibold);
}
.card-body { padding: var(--space-4) var(--space-5); }
.card-footer {
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
}
.card-title {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}
.card-text { margin-bottom: var(--space-3); }
.card-subtitle {
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: 0;
    color: var(--color-text-muted);
}
.card > .card-header,
.card > .card-body,
.card > .card-footer { border-radius: 0; }
.card > .card-header:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.card > .card-footer:last-child { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* ── BS Alert variants ──────────────────── */
.alert-primary {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
    border-left-color: var(--color-primary);
    color: var(--color-text);
}
.alert-secondary {
    background: var(--color-bg-subtle);
    border-left-color: var(--color-zinc-500);
    color: var(--color-text);
}
.alert-light {
    background: var(--color-bg-subtle);
    border-left-color: var(--color-border);
    color: var(--color-text);
}
.alert-dark {
    background: var(--color-bg-muted);
    border-left-color: var(--color-zinc-900);
    color: var(--color-text);
}

/* Accordion: 글로벌 룰 제거됨. .accordion-* 클래스는 내부 CSS hook 으로,
   rental-ui.js 의 Collapse (data-mublo-toggle) 가 토글 동작 처리.
   각 사용처에서 role 스코프(.condition-item.item-card / .faq-accordion-*) 로 직접 스타일 정의. */

/* ── BS Table ────────────────────────────── */
.table {
    width: 100%;
    margin-bottom: var(--space-4);
    color: var(--color-text);
    vertical-align: top;
    border-color: var(--color-border);
    caption-side: bottom;
    border-collapse: collapse;
}
.table > :not(caption) > * > * {
    padding: var(--space-2) var(--space-3);
    background-color: transparent;
    border-bottom: 1px solid var(--color-border);
}
.table > tbody { vertical-align: inherit; }
.table > thead {
    vertical-align: bottom;
    background-color: var(--color-bg-subtle);
}
.table > thead th { font-weight: var(--font-weight-semibold); }
.table-bordered > :not(caption) > * { border-width: 1px 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 1px; }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--color-bg-subtle);
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--color-bg-muted);
}
.table-sm > :not(caption) > * > * {
    padding: var(--space-1) var(--space-2);
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── BS List group ───────────────────────── */
.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: var(--radius-md);
}
.list-group-item {
    position: relative;
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
}
.list-group-item + .list-group-item { border-top-width: 0; }
.list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.list-group-item:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.list-group-item.active {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    z-index: 2;
}
.list-group-item:hover:not(.active) {
    background-color: var(--color-bg-subtle);
}
.list-group-flush { border-radius: 0; }
.list-group-flush > .list-group-item {
    border-width: 0 0 1px;
}
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }

/* ── BS Dropdown ─────────────────────────── */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle {
    position: relative;
    white-space: nowrap;
}
.dropdown-toggle::after {
    content: '';
    display: inline-block;
    margin-left: var(--space-2);
    vertical-align: middle;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}
.dropdown-toggle.show::after {
    transform: rotate(-135deg);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-dropdown);
    display: none;
    min-width: 10rem;
    padding: var(--space-2) 0;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    list-style: none;
}
.dropdown-menu.show { display: block; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-4);
    clear: both;
    color: var(--color-text);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--color-bg-subtle);
    color: var(--color-primary);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}
.dropdown-divider {
    height: 0;
    margin: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}
.dropdown-header {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ── BS Nav / Tabs ───────────────────────── */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-link {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.nav-link:hover,
.nav-link:focus { color: var(--color-primary); }
.nav-link.disabled,
.nav-link[disabled] {
    color: var(--color-text-subtle);
    cursor: default;
    pointer-events: none;
}
.nav-tabs {
    border-bottom: 1px solid var(--color-border);
}
.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: none;
    border-color: transparent;
    border-bottom-color: transparent;
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--color-border-subtle) var(--color-border-subtle) var(--color-border);
}
.nav-tabs .nav-link.active {
    color: var(--color-primary);
    background-color: var(--color-bg);
    border-color: var(--color-border) var(--color-border) var(--color-bg);
    font-weight: var(--font-weight-semibold);
}
.nav-pills .nav-link {
    border-radius: var(--radius-md);
}
.nav-pills .nav-link.active {
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
}

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* ── BS Modal ────────────────────────────── */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-modal);
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}
.modal.show { display: block; }
.modal.fade .modal-dialog {
    transition: transform var(--transition-slow);
    transform: translateY(-50px);
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--space-3);
    pointer-events: none;
}
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - (var(--space-3) * 2));
}
.modal-dialog-scrollable {
    height: calc(100% - (var(--space-3) * 2));
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--color-bg);
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    outline: 0;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.modal-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}
.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--space-5);
}
.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: calc(var(--z-modal) - 1);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 1; }
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: var(--space-1) var(--space-1);
    color: var(--color-text);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2352525b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: var(--radius-sm);
    opacity: 0.6;
    cursor: pointer;
}
.btn-close:hover { opacity: 1; }

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }
    .modal-sm { max-width: 300px; }
}
@media (min-width: 992px) {
    .modal-lg,
    .modal-xl { max-width: 800px; }
}
@media (min-width: 1200px) {
    .modal-xl { max-width: 1140px; }
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}

/* ── BS Collapse ─────────────────────────── */
.collapse:not(.show) { display: none; }
.collapsing {
    height: 0;
    overflow: hidden;
    transition: height var(--transition-base);
}

/* ── BS Tooltip / Popover (minimal) ──────── */
.tooltip {
    position: absolute;
    z-index: var(--z-popover);
    display: block;
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-xs);
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show { opacity: 0.9; }
.tooltip-inner {
    max-width: 200px;
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-inverse);
    text-align: center;
    background-color: var(--color-bg-inverse);
    border-radius: var(--radius-sm);
}

.popover {
    position: absolute;
    z-index: var(--z-popover);
    max-width: 276px;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    background-color: var(--color-bg);
    background-clip: padding-box;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.popover-header {
    padding: var(--space-2) var(--space-3);
    background-color: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}
.popover-body {
    padding: var(--space-3);
    color: var(--color-text);
}

/* ── BS Progress ─────────────────────────── */
.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: var(--font-size-xs);
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-md);
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: var(--color-text-inverse);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-primary);
    transition: width var(--transition-slow);
}
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

/* ── BS Breadcrumb ───────────────────────── */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: var(--space-4);
    list-style: none;
    font-size: var(--font-size-sm);
}
.breadcrumb-item + .breadcrumb-item {
    padding-left: var(--space-2);
}
.breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    float: left;
    padding-right: var(--space-2);
    color: var(--color-text-subtle);
}
.breadcrumb-item.active { color: var(--color-text-muted); }
.breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.breadcrumb-item a:hover { color: var(--color-primary); }

/* ── BS Close ────────────────────────────── */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }