/*
 * Gallery 스타일 (DESIGN.md "Rivian — Style Reference") — 사용자 앱 전용.
 * ieum9.css 뒤에 layout/user.html · layout/auth.html 에서만 로드한다. 관리자 앱은 fold.css 를 유지한다.
 * 원칙: 흰 캔버스(Paper) 위에 Chalk 섹션으로 리듬, 그림자 대신 헤어라인(Concrete),
 *       버튼은 40px 필, 카드·이미지는 20px, 입력은 4px. 색은 Graphite 단색, Solar Yellow 는 화면당 한 번.
 * 성공·경고·오류 색은 기능색이라 ieum9 토큰을 그대로 둔다.
 */

:root {
    --g-yellow: #ffac00;
    --g-graphite: #151515;
    --g-black: #000000;
    --g-charcoal: #212121;
    --g-steel: #616161;
    --g-fog: #b8b8b8;
    --g-ash: #cfd0d0;
    --g-concrete: #e5e7eb;
    --g-chalk: #f2f2f2;
    --g-paper: #ffffff;

    --ieum-primary: var(--g-graphite);
    --ieum-primary-hover: var(--g-black);
    --ieum-primary-active: var(--g-black);
    --ieum-primary-light: var(--g-steel);
    --ieum-primary-lighter: var(--g-chalk);

    --ieum-secondary: var(--g-steel);
    --ieum-secondary-hover: var(--g-graphite);
    --ieum-secondary-active: var(--g-graphite);
    --ieum-secondary-light: var(--g-fog);
    --ieum-secondary-lighter: var(--g-concrete);

    --ieum-canvas: var(--g-paper);
    --ieum-surface: var(--g-chalk);
    --ieum-surface-neutral: var(--g-concrete);
    --ieum-surface-dark: var(--g-graphite);

    --ieum-border: var(--g-ash);
    --ieum-border-light: var(--g-concrete);

    --ieum-text: var(--g-graphite);
    --ieum-text-secondary: var(--g-steel);
    --ieum-text-muted: var(--g-steel);
    --ieum-focus: var(--g-graphite);

    --ieum-r: 4px;                      /* 입력 */
    --ieum-r-card: 20px;                /* 카드·이미지 */
    --ieum-r-btn: 40px;                 /* 버튼 */
    --ieum-r-rounded: 9999px;           /* 내비·칩 */

    --ieum-sans: "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

    --ieum-shadow-s: none;
    --ieum-shadow-m: 0 4px 12px rgba(159, 161, 184, .15);
}

/* ---------- 기본 ---------- */

body { background: var(--g-paper); color: var(--g-graphite); font-feature-settings: "clig" 0, "liga" 0; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3, h4, .gm-mono-name { word-break: keep-all; overflow-wrap: normal; }

h1, .h1 { font-size: 2.75rem; line-height: 1.14; letter-spacing: -1.364px; font-weight: 500; }   /* heading-lg 44 */
h2, .h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.48px; font-weight: 500; }      /* heading-sm 24 */
h3, .h3, h4, .h4 { font-size: 1.25rem; line-height: 1.33; letter-spacing: -.2px; font-weight: 500; }
h5, .h5 { font-size: 1.25rem; line-height: 1.33; letter-spacing: -.2px; font-weight: 500; }
h6, .h6 { font-size: 1rem; letter-spacing: -.16px; font-weight: 500; }
.fw-bold, .fw-semibold, strong, b { font-weight: 600; }

a { color: var(--g-graphite); text-decoration: none; }
a:hover { color: var(--g-steel); text-decoration: none; }
.text-primary { color: var(--g-graphite) !important; }
.form-text, .micro-cap { color: var(--g-steel); }

/* ---------- 버튼: 40px 필 ---------- */

.btn {
    border-radius: var(--ieum-r-btn);
    font-size: .875rem;
    font-weight: 500;
    padding: 12px 24px;
    line-height: 1.2;
    box-shadow: none;
}
.btn-sm { padding: 8px 16px; font-size: .8125rem; }
.btn-lg { padding: 14px 28px; font-size: .9375rem; }

.btn-primary, .btn-dark {
    --bs-btn-bg: var(--g-graphite); --bs-btn-border-color: var(--g-graphite); --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--g-black); --bs-btn-hover-border-color: var(--g-black); --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--g-black); --bs-btn-active-border-color: var(--g-black);
}
.btn-secondary, .btn-light {
    --bs-btn-bg: var(--g-concrete); --bs-btn-border-color: var(--g-concrete); --bs-btn-color: var(--g-graphite);
    --bs-btn-hover-bg: var(--g-ash); --bs-btn-hover-border-color: var(--g-ash); --bs-btn-hover-color: var(--g-graphite);
}
.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark,
.hero .btn-outline-primary, .hero .btn-outline-secondary, .site-header .btn-outline-primary, .site-header .btn-outline-secondary {
    --bs-btn-color: var(--g-graphite); --bs-btn-border-color: var(--g-graphite); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--g-graphite); --bs-btn-hover-border-color: var(--g-graphite); --bs-btn-hover-color: #ffffff;
    border-width: 1px;
}
.btn-outline-light, .hero .btn-outline-light {
    --bs-btn-color: #ffffff; --bs-btn-border-color: #ffffff; --bs-btn-bg: transparent;
    --bs-btn-hover-bg: #ffffff; --bs-btn-hover-border-color: #ffffff; --bs-btn-hover-color: var(--g-graphite);
    border-width: 1px;
}
/* Solar Yellow: 화면당 하나의 핵심 행동에만 */
.btn-warning, .btn-solar {
    --bs-btn-bg: var(--g-yellow); --bs-btn-border-color: var(--g-yellow); --bs-btn-color: var(--g-graphite);
    --bs-btn-hover-bg: #e69b00; --bs-btn-hover-border-color: #e69b00; --bs-btn-hover-color: var(--g-graphite);
    --bs-btn-active-bg: #e69b00; --bs-btn-active-border-color: #e69b00;
}
.btn-link { --bs-btn-color: var(--g-graphite); --bs-btn-hover-color: var(--g-steel); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-close { border-radius: var(--ieum-r-rounded); }

/* ---------- 카드: 헤어라인, 20px ---------- */

.card, .action-card, .step-card, .booking-card, .main-search, .search-filter, .vehicle-card, .banner-card, .auth-card, .stat-card, .my-sidebar {
    border: var(--ieum-b) solid var(--g-concrete);
    border-radius: var(--ieum-r-card);
    box-shadow: none;
}
.card-highlight, .action-card, .step-card, .booking-card { border-top: var(--ieum-b) solid var(--g-concrete); }
.action-card:hover, .vehicle-card:hover, .banner-card:hover { box-shadow: none; border-color: var(--g-ash); }
.card-body { padding: var(--ieum-s-6); }

.trust-item, .status-chip, .pickup-box, .choice-card, .feature-row > div, .doc-grid > div, .benefit-grid > div, .qual-grid > div, .refund-scale > div {
    border-color: transparent;
    border-radius: var(--ieum-r-card);
    background: var(--g-chalk);
}
.price-box, .booking-card .total-box { background: var(--g-chalk); border: none; border-radius: var(--ieum-r-card); padding: var(--ieum-s-6); }
.booking-card .total-box .amount { color: var(--g-graphite); letter-spacing: -.672px; }
.cta-strip { background: var(--g-chalk); color: var(--g-graphite); border-left: none; border-radius: var(--ieum-r-card); padding: var(--ieum-s-8); }

/* ---------- 입력: 4px, 48px ---------- */

.form-control, .form-select, .input-group-text {
    border: var(--ieum-b) solid var(--g-ash);
    border-radius: var(--ieum-r);
    min-height: 48px;
    padding: 0 var(--ieum-s-4);
    color: var(--g-graphite);
    font-size: .875rem;
}
.form-control-sm, .form-select-sm { min-height: 44px; font-size: .875rem; }
textarea.form-control, .form-control[type="file"], .form-control[size], select.form-select[size], select.form-select[multiple] {
    padding: var(--ieum-s-3) var(--ieum-s-4);
}
.form-control::placeholder { color: var(--g-fog); }
.form-control:focus, .form-select:focus { border-color: var(--g-graphite); box-shadow: none; }
.form-check-input { border: var(--ieum-b) solid var(--g-ash); }
.form-check-input:checked { background-color: var(--g-graphite); border-color: var(--g-graphite); }
.form-check-input[type="checkbox"] { border-radius: 4px; }
.form-label { color: var(--g-steel); font-size: .75rem; font-weight: 500; }

/* ---------- 배지·칩·탭 ---------- */

.badge { border-radius: 99px; padding: 6px 14px; font-size: .75rem; font-weight: 500; letter-spacing: 0; }
.badge.text-bg-light, .badge.text-bg-secondary, .card .badge.text-bg-light, .vehicle-card .badge.text-bg-light { background: var(--g-concrete) !important; color: var(--g-graphite) !important; }
.badge.text-bg-dark, .badge.text-bg-primary { background: var(--g-graphite) !important; color: #ffffff !important; }
.badge.text-bg-warning { background: var(--g-graphite) !important; color: #ffffff !important; }
.badge.text-bg-success { background: #ffffff !important; color: var(--g-graphite) !important; border: var(--ieum-b) solid var(--g-concrete); }

.type-tabs .btn-check + label, .type-tab, .sort-tabs a, .detail-tabs a, .tab, .tab-link {
    border-radius: var(--ieum-r-rounded);
    padding: 8px 16px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--g-graphite);
    background: var(--g-chalk);
    text-decoration: none;
}
.sort-tabs a:hover, .detail-tabs a:hover, .type-tab:hover { background: var(--g-concrete); color: var(--g-graphite); }
.type-tabs .btn-check:checked + label, .type-tab.active, .sort-tabs a.active, .detail-tabs a.active, .tab.active, .tab-link.active { background: var(--g-graphite); color: #ffffff; }
.search-filter .type-tabs .type-tab { border: none; }

.cond-chip, .hero-chip, .footer-chip, .fold-tag {
    background: var(--g-concrete);
    border: none;
    border-radius: 99px;
    color: var(--g-graphite);
    box-shadow: none;
    font-size: .75rem;
    font-weight: 500;
}
.cond-chip:hover { background: var(--g-ash); color: var(--g-graphite); }
.tag-chips .form-check-label { border-radius: 99px; border-color: var(--g-ash); }

.alert { border-radius: var(--ieum-r-card); border: var(--ieum-b) solid var(--g-concrete); border-left-width: var(--ieum-b); }
.alert-primary, .alert-secondary { background: var(--g-chalk); border-color: var(--g-chalk); color: var(--g-graphite); box-shadow: none; }

.pagination .page-link { border-radius: var(--ieum-r-rounded); color: var(--g-graphite); border-color: transparent; background: var(--g-chalk); margin: 0 2px; }
.pagination .page-item.active .page-link { background: var(--g-graphite); border-color: var(--g-graphite); }

.icon-box, .icon-circle, .stat-card .icon-circle { background: var(--g-chalk); color: var(--g-graphite); border-radius: var(--ieum-r-rounded); }
.icon-btn { border-radius: var(--ieum-r-rounded); border-color: var(--g-concrete); color: var(--g-graphite); }
.icon-btn:hover { background: var(--g-chalk); color: var(--g-graphite); }
.step-num, .success-icon { border-radius: var(--ieum-r-rounded); background: var(--g-graphite); }
.progress-steps li.current .dot { border-color: var(--g-graphite); color: var(--g-graphite); }
.progress-steps li.current { color: var(--g-graphite); }
.rating .ico, .rating-stars span.on { color: var(--g-graphite); }

/* ---------- 헤더: 흰 바 + 헤어라인 ---------- */

.site-header {
    background: var(--g-paper);
    color: var(--g-graphite);
    border-bottom: var(--ieum-b) solid var(--g-concrete);
    padding: 0;
}
.site-header > .container { min-height: 60px; padding-top: var(--ieum-s-2) !important; padding-bottom: var(--ieum-s-2) !important; }
.brand-logo { color: var(--g-graphite); font-size: 1.25rem; font-weight: 600; letter-spacing: -.4px; }
.brand-logo span, .footer-brand span { color: var(--g-graphite); }
.primary-nav { gap: var(--ieum-s-2) !important; }
.primary-nav a {
    color: var(--g-graphite);
    font-size: .875rem;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--ieum-r-rounded);
}
.primary-nav a:hover, .primary-nav a.active { background: var(--g-chalk); color: var(--g-graphite); text-decoration: none; }
.primary-nav .badge { margin-left: 4px; }
.site-header .text-secondary { color: var(--g-steel) !important; }
.site-header .btn-link { --bs-btn-color: var(--g-steel); }
.site-header .btn-sm { padding: 10px 20px; font-size: .875rem; }
.subnav-strip { background: var(--g-chalk); border-bottom: var(--ieum-b) solid var(--g-concrete); color: var(--g-graphite); }

/* ---------- 푸터: 흰 바탕 헤어라인 ---------- */

footer, footer.bg-light {
    background: var(--g-paper) !important;
    border-top: var(--ieum-b) solid var(--g-concrete) !important;
    color: var(--g-steel);
    padding: var(--ieum-s-10) 0 var(--ieum-s-12) !important;
    font-size: .75rem;
}
footer a { color: var(--g-graphite); font-weight: 500; }
footer a:hover { color: var(--g-steel); }
footer p { color: var(--g-steel); }
footer .container > div:first-child { border-bottom-color: var(--g-concrete); }
.footer-brand { color: var(--g-graphite); font-size: 1rem; font-weight: 600; }
footer .text-secondary { color: var(--g-steel) !important; }

/* ---------- 히어로(서브 페이지 공통) ---------- */

.hero { background: var(--g-graphite); color: #ffffff; padding: var(--ieum-s-16) var(--ieum-s-6); border-radius: 0; }
.hero h1 { color: #ffffff; font-size: 3.5rem; line-height: 1.13; letter-spacing: -2.016px; font-weight: 500; }
.hero .eyebrow, .hero .text-secondary { color: var(--g-fog) !important; }
.hero .form-label { color: var(--g-fog); }
.hero-visual { background: var(--g-charcoal); color: var(--g-fog); border-radius: var(--ieum-r-card); }
.hero .btn-light {
    --bs-btn-bg: var(--g-yellow); --bs-btn-border-color: var(--g-yellow); --bs-btn-color: var(--g-graphite);
    --bs-btn-hover-bg: #e69b00; --bs-btn-hover-border-color: #e69b00; --bs-btn-hover-color: var(--g-graphite);
}

/* ---------- 검색 ---------- */

.search-layout { grid-template-columns: 300px minmax(0, 1fr); gap: var(--ieum-s-10); }
.search-filter { padding: 0 var(--ieum-s-6) var(--ieum-s-6); align-self: start; }
.search-filter .offcanvas-body { padding: 0; }
.search-filter h2, .search-filter h3 { font-size: .875rem; font-weight: 500; color: var(--g-graphite); }
.filter-section { display: flex; flex-direction: column; gap: var(--ieum-s-3); padding: var(--ieum-s-6) 0; border-bottom: var(--ieum-b) solid var(--g-concrete); }
.filter-title { font-size: .875rem; font-weight: 500; color: var(--g-graphite); margin: 0; }
.search-filter .form-label { font-size: .75rem; font-weight: 500; color: var(--g-steel); margin-bottom: var(--ieum-s-2); }
.search-filter .form-control, .search-filter .form-select, .booking-card .form-control { min-width: 0; width: 100%; }
.form-control[type="date"] { min-width: 0; }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--ieum-s-2); }
.chip-toggle {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 99px;
    background: var(--g-chalk); color: var(--g-graphite);
    font-size: .75rem; font-weight: 500; line-height: 1.4; cursor: pointer;
}
.chip-toggle:hover { background: var(--g-concrete); }
.btn-check:checked + .chip-toggle { background: var(--g-graphite); color: #ffffff; }
.btn-check:focus-visible + .chip-toggle { outline: 2px solid var(--g-graphite); outline-offset: 2px; }
.filter-switch { display: flex; justify-content: space-between; align-items: center; padding: 0; margin: 0; min-height: 0; }
.filter-switch .form-check-input { margin: 0; width: 44px; height: 24px; border-radius: 9999px; background-color: var(--g-ash); border-color: var(--g-ash); flex-shrink: 0; }
.filter-switch .form-check-input:checked { background-color: var(--g-graphite); border-color: var(--g-graphite); }
.filter-switch .form-check-label { font-size: .875rem; color: var(--g-graphite); }
.page-head { display: flex; flex-direction: column; gap: var(--ieum-s-2); padding: var(--ieum-s-8) 0 var(--ieum-s-6); }
.page-head h1 { margin: 0; }
.search-summary-top h1 { font-size: 1rem; font-weight: 500; }
.search-summary-top h1 .text-primary { font-weight: 600; }

.vehicle-card { border: none; border-radius: 0; overflow: visible; }
.vehicle-card:hover { border-color: transparent; }
.vehicle-card-thumb { border-radius: var(--ieum-r-card); aspect-ratio: 4 / 3; }
.vehicle-card-thumb .fav-overlay { width: 36px; height: 36px; box-shadow: none; }
.vehicle-card-body { padding: var(--ieum-s-4) var(--ieum-s-2) 0; }
.vehicle-card-body .title { color: var(--g-graphite); font-size: 1.25rem; font-weight: 500; letter-spacing: -.2px; }
.vehicle-card-body .fs-5 { font-size: 1.25rem !important; font-weight: 600; letter-spacing: -.2px; }

/* ---------- 상세 ---------- */

.detail-gallery, .detail-gallery .gallery-main, .detail-gallery .gallery-side a { border-radius: var(--ieum-r-card); }
.detail-gallery .gallery-more { grid-column: auto; position: absolute; right: var(--ieum-s-6); bottom: var(--ieum-s-6); background: #ffffff; border-color: #ffffff; }
.detail-gallery { position: relative; }
.detail-head h1 { font-size: 2.75rem; letter-spacing: -1.364px; font-weight: 500; }
.detail-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--ieum-s-16); }
.spec-strip { border: none; border-radius: 0; gap: var(--ieum-s-2); overflow: visible; }
.spec-item { border: var(--ieum-b) solid var(--g-concrete) !important; border-radius: var(--ieum-r-card); padding: var(--ieum-s-4) var(--ieum-s-6); justify-content: flex-start; font-weight: 500; font-size: .875rem; color: var(--g-graphite); }
.spec-item .ico { color: var(--g-graphite); }
.detail-tabs { border-bottom: var(--ieum-b) solid var(--g-concrete); padding-bottom: var(--ieum-s-6); margin-bottom: var(--ieum-s-8); }
.detail-h { font-size: 1.5rem; letter-spacing: -.48px; font-weight: 500; margin: 0 0 var(--ieum-s-4); padding-top: var(--ieum-s-10); border-top: var(--ieum-b) solid var(--g-concrete); }
.detail-tabs + .detail-h, .detail-tabs + * + .detail-h { border-top: none; padding-top: 0; }
.card .detail-h { font-size: 1rem; padding-top: 0; border-top: none; margin-bottom: var(--ieum-s-2); }
.detail-dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 0 var(--ieum-s-4); font-size: .875rem; line-height: 1.55; }
.detail-dl > dt, .detail-dl > dd { width: auto; flex: none; margin: 0; padding: var(--ieum-s-4) 0; border-bottom: var(--ieum-b) solid var(--g-concrete); }
.detail-dl > dt { color: var(--g-steel); font-weight: 400; }
.detail-row { display: flex; justify-content: space-between; gap: var(--ieum-s-4); padding: var(--ieum-s-4) 0; border-bottom: var(--ieum-b) solid var(--g-concrete); font-size: .875rem; }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ieum-s-4); }
.review-grid .card { margin: 0 !important; }
.review-grid .review-more { grid-column: 1 / -1; justify-self: start; }
.booking-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--ieum-s-6); }
.booking-amount { font-size: 2rem; font-weight: 600; letter-spacing: -.672px; line-height: 1.1; }
.booking-lines { display: flex; flex-direction: column; gap: var(--ieum-s-2); border-top: var(--ieum-b) solid var(--g-concrete); padding: var(--ieum-s-4) 0; margin: var(--ieum-s-6) 0; font-size: .875rem; }
.booking-line { display: flex; justify-content: space-between; gap: var(--ieum-s-4); }
.booking-line.total { font-size: 1rem; font-weight: 600; padding-top: var(--ieum-s-2); border-top: var(--ieum-b) solid var(--g-concrete); }
.booking-card form + .d-grid { margin-top: var(--ieum-s-6); }
.booking-card .form-text.d-flex { margin-top: var(--ieum-s-4); }
.booking-card { top: 84px; padding: var(--ieum-s-6); }
.booking-card .btn-book {
    --bs-btn-bg: var(--g-yellow); --bs-btn-border-color: var(--g-yellow); --bs-btn-color: var(--g-graphite);
    --bs-btn-hover-bg: #e69b00; --bs-btn-hover-border-color: #e69b00; --bs-btn-hover-color: var(--g-graphite);
    padding: 16px 24px;
}

/* ---------- 마이페이지 사이드 ---------- */

.sidebar-nav a, .sidebar-nav span { border-left: none; border-radius: var(--ieum-r-rounded); padding: 10px var(--ieum-s-4); color: var(--g-graphite); }
.sidebar-nav a:hover { background: var(--g-chalk); }
.sidebar-nav a.active { background: var(--g-graphite); color: #ffffff; }
.my-sidebar { background: var(--g-paper); padding: var(--ieum-s-4); align-self: start; }

/* ---------- 차주 안내 ---------- */

.owner-steps strong, .doc-grid > div, .benefit-grid > div, .trust-item h3 { color: var(--g-graphite); }
.owner-steps .step-num { background: var(--g-chalk); color: var(--g-steel); font-size: 1rem; }
.doc-grid .ico, .benefit-grid .ico { color: var(--g-graphite); }
.benefit-grid .badge { background: var(--g-graphite) !important; color: #ffffff !important; }
.card-highlight .text-primary { color: var(--g-graphite) !important; }

/* ==========================================================================
   갤러리 메인 구성 (user/main.html · owner/intro.html 히어로)
   ========================================================================== */

/* 컨테이너 밖으로 화면 가득 */
.gm-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50% + var(--ieum-s-3));
    padding-right: calc(50vw - 50% + var(--ieum-s-3));
}
main > .gm-bleed:first-child, main > div > .gm-bleed:first-child { margin-top: -1.5rem; }

.gm-hero {
    position: relative;
    overflow: hidden;
    min-height: 640px;
    background: var(--g-graphite);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: var(--ieum-s-14, 56px);
    margin-bottom: 0;
}
.gm-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.gm-hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(21, 21, 21, 0) 40%, rgba(21, 21, 21, .6) 100%),
        linear-gradient(90deg, rgba(21, 21, 21, .35) 0%, rgba(21, 21, 21, 0) 55%);
}
.gm-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--ieum-s-6); max-width: 760px; padding-bottom: var(--ieum-s-14, 56px); }
.gm-hero-copy h1 { color: #ffffff; font-size: 3.5rem; line-height: 1.13; letter-spacing: -2.016px; font-weight: 500; margin: 0; text-wrap: balance; }
.gm-hero-copy p { color: #ffffff; font-size: 1rem; line-height: 1.5; letter-spacing: -.16px; max-width: 560px; margin: 0; }
.gm-hero-copy .btn-outline-light { color: #ffffff; border-color: #ffffff; }
.gm-hero-copy .btn-outline-light:hover { color: var(--g-graphite); background: #ffffff; }
.gm-hero .gm-chips { display: flex; gap: var(--ieum-s-2); }
.gm-hero .gm-chips .badge { background: #ffffff !important; color: var(--g-graphite) !important; }

/* 검색 스트립 */
.gm-search { border-bottom: var(--ieum-b) solid var(--g-concrete); padding-top: var(--ieum-s-10); padding-bottom: var(--ieum-s-10); }
.gm-search .main-search { border: none; padding: 0; border-radius: 0; }
.gm-search .main-search .btn { min-width: 0; min-height: 48px; }
.gm-search .form-label { font-size: .75rem; }

/* 모노그램 블록 */
.gm-mono { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--g-chalk); }
.gm-mono > a {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ieum-s-6);
    padding: var(--ieum-s-20, 80px) var(--ieum-s-10);
    color: var(--g-graphite);
}
.gm-mono > a + a { border-left: var(--ieum-b) solid var(--g-concrete); }
.gm-mono-name { font-size: clamp(3.5rem, 8vw, 7.5rem); line-height: 1; letter-spacing: -.045em; font-weight: 600; color: var(--g-black); }
.gm-mono-photo { width: min(560px, 100%); aspect-ratio: 56 / 26; border-radius: var(--ieum-r-card); overflow: hidden; position: relative; }
.gm-mono-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-mono h2 { font-size: 1.25rem; letter-spacing: -.2px; font-weight: 500; margin: 0; }
.gm-mono p { font-size: .875rem; color: var(--g-steel); margin: 0; }
.gm-mono .gm-actions { display: flex; gap: var(--ieum-s-2); }

/* 섹션 공통 */
.gm-section { padding-top: var(--ieum-s-28, 112px); padding-bottom: var(--ieum-s-28, 112px); display: flex; flex-direction: column; gap: var(--ieum-s-14, 56px); }
.gm-section.gm-chalk { background: var(--g-chalk); }
.gm-section.gm-dark { background: var(--g-graphite); color: #ffffff; }
.gm-section-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ieum-s-4); max-width: 760px; margin: 0 auto; }
.gm-section-head.left { align-items: flex-start; text-align: left; margin: 0; }
.gm-section-head h2, .gm-title-xl { font-size: 3.5rem; line-height: 1.13; letter-spacing: -2.016px; font-weight: 500; margin: 0; text-wrap: balance; }
.gm-section-head p, .gm-lead { font-size: 1rem; line-height: 1.5; letter-spacing: -.16px; color: var(--g-steel); margin: 0; }
.gm-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ieum-s-4); }
.gm-row-head h2 { font-size: 2.75rem; line-height: 1.14; letter-spacing: -1.364px; font-weight: 500; margin: 0; }
.gm-link { font-size: .875rem; font-weight: 500; border-bottom: var(--ieum-b) solid var(--g-graphite); padding-bottom: 2px; align-self: center; }
.gm-link:hover { color: var(--g-graphite); border-bottom-color: var(--g-steel); }

/* 안심 카드 4 */
.gm-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ieum-s-6); }
.gm-trust > div { border: var(--ieum-b) solid var(--g-concrete); border-radius: var(--ieum-r-card); padding: var(--ieum-s-6); display: flex; flex-direction: column; gap: var(--ieum-s-4); }
.gm-trust h3 { font-size: 1.25rem; letter-spacing: -.2px; font-weight: 500; margin: 0; }
.gm-trust p { font-size: .875rem; line-height: 1.55; color: var(--g-steel); margin: 0; }
.gm-trust .ico { color: var(--g-graphite); }

/* 차주 모집 (Graphite 전면) */
.gm-dark .gm-owner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ieum-s-10); }
.gm-dark .gm-owner > div { display: flex; flex-direction: column; gap: var(--ieum-s-6); max-width: 760px; }
.gm-dark .gm-owner h2 { font-size: 4.5rem; line-height: 1.09; letter-spacing: -3.024px; font-weight: 500; color: #ffffff; margin: 0; text-wrap: balance; }
.gm-dark .gm-owner p { color: var(--g-fog); font-size: 1rem; line-height: 1.5; max-width: 520px; margin: 0; }
.gm-dark .badge.text-bg-light { background: var(--g-charcoal) !important; color: #ffffff !important; }

/* 추천 차량 · 3단계 */
.gm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ieum-s-6); }
.gm-steps > li { list-style: none; background: var(--g-paper); border-radius: var(--ieum-r-card); padding: var(--ieum-s-6); display: flex; flex-direction: column; gap: var(--ieum-s-6); min-height: 200px; }
.gm-steps .gm-num { font-size: 2.75rem; line-height: 1; letter-spacing: -1.364px; font-weight: 500; color: var(--g-fog); }
.gm-steps h3 { font-size: 1.25rem; letter-spacing: -.2px; font-weight: 500; margin: 0 0 var(--ieum-s-2); }
.gm-steps p { font-size: .875rem; line-height: 1.55; color: var(--g-steel); margin: 0; }

/* 마무리 · 고지 */
.gm-closing { padding-top: var(--ieum-s-40, 160px); padding-bottom: var(--ieum-s-40, 160px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ieum-s-10); }
.gm-closing h2 { font-size: 4.5rem; line-height: 1.09; letter-spacing: -3.024px; font-weight: 500; margin: 0; text-wrap: balance; }
.gm-legal { background: var(--g-concrete); padding-top: var(--ieum-s-6); padding-bottom: var(--ieum-s-6); font-size: .75rem; line-height: 1.55; color: var(--g-graphite); }
.gm-legal p { max-width: 1200px; margin: 0; }
.gm-banner { display: block; border-radius: var(--ieum-r-card); overflow: hidden; }
.gm-banner img { display: block; width: 100%; height: 240px; object-fit: cover; }

@media (max-width: 991px) {
    .gm-hero { min-height: 560px; }
    .gm-hero-copy h1, .gm-section-head h2, .gm-title-xl { font-size: 2.75rem; letter-spacing: -1.364px; }
    .gm-dark .gm-owner h2, .gm-closing h2 { font-size: 2.75rem; letter-spacing: -1.364px; }
    .gm-dark .gm-owner { flex-direction: column; align-items: flex-start; }
    .gm-mono { grid-template-columns: 1fr; }
    .gm-mono > a + a { border-left: none; border-top: var(--ieum-b) solid var(--g-concrete); }
    .gm-mono > a { padding: var(--ieum-s-14, 56px) var(--ieum-s-4); }
    .gm-trust { grid-template-columns: 1fr; gap: var(--ieum-s-2); }
    .gm-steps { grid-template-columns: 1fr; gap: var(--ieum-s-2); }
    .gm-section { padding-top: var(--ieum-s-20, 80px); padding-bottom: var(--ieum-s-20, 80px); gap: var(--ieum-s-6); }
    .gm-section-head { align-items: flex-start; text-align: left; }
    .gm-closing { padding-top: var(--ieum-s-28, 112px); padding-bottom: var(--ieum-s-28, 112px); }
    .gm-closing .d-flex, .gm-hero-copy .d-flex { width: 100%; }
    .gm-closing .btn { flex: 1 0 auto; }
    .search-layout { gap: var(--ieum-s-6); }
    .detail-layout { gap: var(--ieum-s-8); }
    .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .review-grid { grid-template-columns: 1fr; }
    .detail-dl { grid-template-columns: 110px minmax(0, 1fr); }
    .page-head { padding-top: var(--ieum-s-4); }
    .hero h1 { font-size: 2.75rem; letter-spacing: -1.364px; }
}
@media (max-width: 767px) {
    h1, .h1 { font-size: 2rem; letter-spacing: -.672px; }
    .detail-head h1 { font-size: 2rem; letter-spacing: -.672px; }
    .search-filter.offcanvas-lg { border-radius: 0; }
}

/* ==========================================================================
   모바일 (디자인 캔버스 "모바일" 페이지)
   ========================================================================== */

.menu-btn { border: none; background: transparent; width: 44px; height: 44px; }
.site-menu { width: min(360px, 88vw); }
.site-menu .offcanvas-header { border-bottom: var(--ieum-b) solid var(--g-concrete); padding: var(--ieum-s-4); }
.site-menu .offcanvas-body { padding: var(--ieum-s-4); }
.site-menu-link { display: flex; align-items: center; gap: var(--ieum-s-2); padding: 14px var(--ieum-s-4); border-radius: var(--ieum-r-rounded); font-size: 1rem; font-weight: 500; color: var(--g-graphite); }
.site-menu-link:hover { background: var(--g-chalk); }
.site-menu-actions { display: grid; gap: var(--ieum-s-2); margin-top: auto; padding-top: var(--ieum-s-6); border-top: var(--ieum-b) solid var(--g-concrete); }

.booking-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: center; justify-content: space-between; gap: var(--ieum-s-4);
    padding: var(--ieum-s-3) var(--ieum-s-4) calc(var(--ieum-s-4) + env(safe-area-inset-bottom));
    background: var(--g-paper);
    border-top: var(--ieum-b) solid var(--g-concrete);
}
.booking-bar-amount { font-size: 1.25rem; font-weight: 600; letter-spacing: -.2px; line-height: 1.2; }
.booking-bar .btn-book {
    --bs-btn-bg: var(--g-yellow); --bs-btn-border-color: var(--g-yellow); --bs-btn-color: var(--g-graphite);
    --bs-btn-hover-bg: #e69b00; --bs-btn-hover-border-color: #e69b00; --bs-btn-hover-color: var(--g-graphite);
    padding: 16px 28px; white-space: nowrap;
}
@media (min-width: 992px) { .booking-bar { display: none !important; } }

@media (max-width: 991px) {
    /* 헤더 */
    .site-header > .container { gap: var(--ieum-s-2) !important; }
    .site-header .btn-sm { padding: 12px 20px; }

    /* 메인 */
    .gm-hero-copy .d-flex .btn { flex: 1 1 0; text-align: center; }
    .gm-search { padding-top: var(--ieum-s-6); padding-bottom: var(--ieum-s-6); }
    .gm-search .form-text { font-size: .75rem; }
    .gm-row-head h2 { font-size: 2.75rem; letter-spacing: -1.364px; }
    .gm-mono-name { font-size: 4.5rem; letter-spacing: -3.024px; }
    .gm-legal { font-size: .75rem; }

    /* 검색: 제목 한 줄, 필터 버튼 + 정렬 가로 스크롤, 조건 칩 가로 스크롤 */
    .page-head h1 { font-size: 2.75rem; letter-spacing: -1.364px; }
    .search-summary-top { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: var(--ieum-s-3); }
    .search-summary-top > .d-flex { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .search-summary-top > .d-flex::-webkit-scrollbar { display: none; }
    .search-summary-top .btn.d-lg-none {
        --bs-btn-color: var(--g-graphite); --bs-btn-border-color: var(--g-graphite); --bs-btn-bg: transparent;
        padding: 8px 16px; font-size: .875rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
    }
    .sort-tabs { flex-wrap: nowrap; }
    .sort-tabs a { white-space: nowrap; }
    .cond-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .cond-chips::-webkit-scrollbar { display: none; }
    .cond-chip { white-space: nowrap; flex-shrink: 0; }
    .search-filter.offcanvas-lg { padding: 0 var(--ieum-s-4) var(--ieum-s-6); border: none; border-radius: 0; width: min(360px, 88vw); }
    .search-filter .offcanvas-header { padding: var(--ieum-s-4) 0; border-bottom: var(--ieum-b) solid var(--g-concrete); }

    /* 상세: 1열 + 고정 예약 바 만큼 여백 */
    .search-layout, .detail-layout { grid-template-columns: 1fr; }
    .detail-layout { padding-bottom: 96px; }
    .booking-card { position: static; }
    .detail-head h1 { font-size: 2rem; letter-spacing: -.672px; }
    .detail-tabs { overflow-x: auto; scrollbar-width: none; }
    .detail-tabs::-webkit-scrollbar { display: none; }
    .detail-gallery .gallery-more { right: var(--ieum-s-4); bottom: var(--ieum-s-4); padding: 8px 14px; font-size: .75rem; }

    /* 차주 안내 */
    .hero.gm-hero { padding-left: 0; padding-right: 0; }
    .side-layout aside { order: -1; }
}
@media (max-width: 767px) {
    .detail-gallery { grid-template-columns: 1fr; }
    .detail-gallery .gallery-side { display: none; }
    .detail-gallery .gallery-main { aspect-ratio: 4 / 3; }
    .trust-grid, .benefit-grid, .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust-grid, .benefit-grid { grid-template-columns: 1fr; }
    .price-box { padding: var(--ieum-s-4); }
    .footer-chips { flex-wrap: wrap; }
    .gm-hero { min-height: 520px; }
    .gm-hero-copy h1 { font-size: 2.75rem; }
    /* 폰 폭에선 사진 왼쪽(도로·바다) 을 보여 밝은 차체 위에 카피가 겹치지 않게 한다 */
    .gm-hero > img { object-position: 42% 60%; }
    .gm-hero::after {
        background:
            linear-gradient(180deg, rgba(21, 21, 21, 0) 30%, rgba(21, 21, 21, .72) 100%),
            linear-gradient(90deg, rgba(21, 21, 21, .3) 0%, rgba(21, 21, 21, 0) 70%);
    }
}

/* ---------- 이용 가이드 · 지역 랜딩 (AI 검색 최적화 P2) ---------- */

.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ieum-s-6); }
.guide-item { display: flex; flex-direction: column; gap: var(--ieum-s-3); padding: var(--ieum-s-6); border: var(--ieum-b) solid var(--g-concrete); border-radius: var(--ieum-r-card); color: var(--g-graphite); }
.guide-item:hover { border-color: var(--g-ash); color: var(--g-graphite); }
.guide-item h2, .guide-item h3 { font-size: 1.25rem; line-height: 1.33; letter-spacing: -.2px; font-weight: 500; margin: 0; text-wrap: balance; }
.guide-item p { font-size: .875rem; line-height: 1.55; color: var(--g-steel); margin: 0; }
.guide-item .gm-link { margin-top: auto; }
.guide-article { max-width: 720px; margin: 0 auto; padding: var(--ieum-s-8) 0 var(--ieum-s-16); display: flex; flex-direction: column; gap: var(--ieum-s-4); }
.guide-crumb { display: flex; gap: var(--ieum-s-2); font-size: .8125rem; color: var(--g-steel); }
.guide-crumb a { color: var(--g-steel); } .guide-crumb a:hover { color: var(--g-graphite); }
.guide-article h1 { font-size: 2.75rem; line-height: 1.14; letter-spacing: -1.364px; font-weight: 500; margin: var(--ieum-s-2) 0 0; text-wrap: balance; }
.guide-meta { font-size: .8125rem; color: var(--g-steel); margin: 0 0 var(--ieum-s-4); padding-bottom: var(--ieum-s-6); border-bottom: var(--ieum-b) solid var(--g-concrete); }
.guide-article h2 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.48px; font-weight: 500; margin: var(--ieum-s-8) 0 0; }
.guide-article p { font-size: 1rem; line-height: 1.7; letter-spacing: -.16px; margin: 0; white-space: pre-line; }
.guide-article > p:first-of-type { font-size: 1.125rem; }
.guide-note { font-size: .8125rem !important; color: var(--g-steel); padding: var(--ieum-s-4) var(--ieum-s-6); background: var(--g-chalk); border-radius: var(--ieum-r-card); margin-top: var(--ieum-s-8) !important; }
.guide-related { max-width: 720px; margin: 0 auto; padding-bottom: var(--ieum-s-16); display: flex; flex-direction: column; gap: var(--ieum-s-6); }
.guide-related h2 { font-size: 1.5rem; letter-spacing: -.48px; font-weight: 500; margin: 0; }
.guide-related .guide-list { grid-template-columns: 1fr; gap: var(--ieum-s-2); }
@media (max-width: 767px) {
    .guide-list { grid-template-columns: 1fr; gap: var(--ieum-s-2); }
    .guide-article h1 { font-size: 2rem; letter-spacing: -.672px; }
}