/*
 * Fold 스타일 (DESIGN.md "Fold — Style Reference") — 사용자 앱 전용.
 * ieum9.css 뒤에 layout/user.html · layout/auth.html 에서만 로드한다. 관리자 앱은 기존 디자인을 유지한다.
 * 원칙: 캔버스 Fog #f0f1f5 위에 흰 카드(12px, 네이비 틴트 그림자), 인터랙션은 필(9999px),
 *       텍스트·채움 버튼은 Midnight Navy, 링크만 Electric Blue, 노랑은 페이지당 한 번.
 * 성공·경고·오류 색은 기능색이라 ieum9 토큰을 그대로 둔다.
 */

:root {
    --ieum-primary: #20294c;            /* Midnight Navy — 채움 버튼·활성 상태 */
    --ieum-primary-hover: #042939;      /* Abyss */
    --ieum-primary-active: #042939;
    --ieum-primary-light: #459af8;      /* Electric Blue — 로고 포인트 */
    --ieum-primary-lighter: #f0f1f5;    /* Fog — 옅은 면 */

    --ieum-secondary: #375390;          /* Cornflower Steel — 아이콘·테두리 */
    --ieum-secondary-hover: #20294c;
    --ieum-secondary-active: #20294c;   /* 제목 */
    --ieum-secondary-light: #979db5;    /* Smoke */
    --ieum-secondary-lighter: #dddfe9;  /* Mist */

    --ieum-canvas: #ffffff;
    --ieum-surface: #ffffff;
    --ieum-surface-neutral: #dddfe9;
    --ieum-surface-dark: #20294c;

    --ieum-border: #c7cbdb;             /* Silver Lining */
    --ieum-border-light: #dddfe9;       /* Mist */

    --ieum-text: #20294c;
    --ieum-text-secondary: #676b89;     /* Dusk */
    --ieum-text-muted: #676b89;
    --ieum-focus: #459af8;

    --ieum-r: 12px;                     /* 카드 */
    --ieum-r-rounded: 9999px;           /* 필 */

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

    --ieum-shadow-s: rgba(32, 41, 76, .1) 0 1px 4px 0;
    --ieum-shadow-m: rgba(32, 41, 76, .12) 0 9px 25px 0;

    --fold-blue: #459af8;
    --fold-fog: #f0f1f5;
    --fold-mist: #dddfe9;
    --fold-smoke: #979db5;
    --fold-dusk: #676b89;
    --fold-abyss: #042939;
    --fold-volt: #ffff00;
    --fold-shadow-xl: rgba(32, 41, 76, .12) 0 9px 25px 0;
    --fold-shadow-md: rgba(32, 41, 76, .12) 0 6px 16px 0, rgba(32, 41, 76, .09) 0 1px 5px 0;
    --fold-shadow-md2: rgba(32, 41, 76, .07) 0 4px 11px 0, rgba(32, 41, 76, .12) 0 1px 3px 0;
}

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

body { background: var(--fold-fog); }

h1, .h1 { font-size: 2.625rem; line-height: 1.1; letter-spacing: -1.68px; }     /* heading 42 */
h2, .h2 { font-size: 2rem; line-height: 1.18; letter-spacing: -.96px; }          /* heading-sm 32 */
h3, .h3, h4, .h4 { font-size: 1.5rem; line-height: 1.33; letter-spacing: -.72px; font-weight: 600; }
h5, .h5 { font-size: 1.25rem; line-height: 1.33; letter-spacing: -.5px; }
h6, .h6 { font-size: 1.125rem; letter-spacing: -.3px; }

a { color: var(--fold-blue); text-decoration: none; }
a:hover { color: var(--fold-blue); text-decoration: underline; }

.form-text, .micro-cap { color: var(--fold-dusk); }

/* ---------- 버튼: 필 ---------- */

.btn { border-radius: var(--ieum-r-rounded); }

.btn-primary, .btn-secondary, .btn-dark { box-shadow: var(--ieum-shadow-s); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark {
    --bs-btn-color: var(--ieum-secondary);
    --bs-btn-border-color: var(--ieum-secondary);
    --bs-btn-hover-bg: var(--ieum-secondary);
    --bs-btn-hover-border-color: var(--ieum-secondary);
    --bs-btn-hover-color: #ffffff;
    border-width: 1.5px;
}

.btn-link { color: var(--fold-blue); text-decoration: none; }
.btn-link:hover { text-decoration: underline; }

/* 히어로·헤더 안의 흰 버튼 변형은 이제 필요 없다 (배경이 Fog) */
.hero .btn-light {
    --bs-btn-bg: var(--ieum-primary); --bs-btn-border-color: var(--ieum-primary); --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--ieum-primary-hover); --bs-btn-hover-border-color: var(--ieum-primary-hover); --bs-btn-hover-color: #ffffff;
}
.hero .btn-outline-light, .site-header .btn-outline-primary, .site-header .btn-outline-secondary, .hero .btn-outline-primary, .hero .btn-outline-secondary {
    --bs-btn-color: var(--ieum-secondary); --bs-btn-border-color: var(--ieum-secondary); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--ieum-secondary); --bs-btn-hover-border-color: var(--ieum-secondary); --bs-btn-hover-color: #ffffff;
    border-width: 1.5px;
}

/* ---------- 카드: 테두리 없이 그림자 ---------- */

.card, .action-card, .step-card, .booking-card, .main-search, .search-filter, .vehicle-card, .banner-card, .auth-card, .stat-card {
    border: none;
    box-shadow: var(--fold-shadow-xl);
}
.card-highlight { border-top: none; }
.action-card:hover, .vehicle-card:hover, .banner-card:hover { box-shadow: var(--fold-shadow-md); }

.trust-item, .status-chip, .pickup-box, .choice-card, .spec-strip, .feature-row > div, .doc-grid > div, .benefit-grid > div, .qual-grid > div, .refund-scale > div {
    border-color: transparent;
    background: var(--fold-fog);
}
.card .trust-item, .card .pickup-box, .card .choice-card { background: var(--fold-fog); }

.price-box, .booking-card .total-box { background: var(--fold-fog); border: none; }

/* ---------- 입력: 필 ---------- */

.form-control, .form-select, .input-group-text {
    border: 1.5px solid var(--ieum-border);
    border-radius: var(--ieum-r-rounded);
    padding: 0 var(--ieum-s-4);
}
textarea.form-control, .form-control[type="file"], .form-control[size], select.form-select[size], select.form-select[multiple] {
    border-radius: var(--ieum-r);
    padding: var(--ieum-s-3) var(--ieum-s-4);
}
.form-control::placeholder { color: var(--fold-smoke); }
.form-control:focus, .form-select:focus { border-color: var(--fold-blue); box-shadow: none; }
.form-check-input { border: 1.5px solid var(--ieum-secondary); }
.form-check-input:checked { background-color: var(--ieum-primary); border-color: var(--ieum-primary); }
.form-check-input[type="checkbox"] { border-radius: 6px; }
.form-label { color: var(--fold-dusk); }

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

.badge { border-radius: var(--ieum-r-rounded); letter-spacing: .4px; }
.badge.text-bg-light, .badge.text-bg-secondary { background: var(--fold-fog) !important; color: var(--fold-dusk) !important; }
.card .badge.text-bg-light, .card .badge.text-bg-secondary, .vehicle-card .badge.text-bg-light { background: var(--fold-fog) !important; }
.badge.text-bg-dark, .badge.text-bg-primary { background: var(--ieum-primary) !important; color: #ffffff !important; }

.type-tabs .btn-check + label, .type-tab, .sort-tabs a, .detail-tabs a, .tab {
    border-radius: var(--ieum-r-rounded);
    padding: var(--ieum-s-3) var(--ieum-s-4);
    color: var(--fold-dusk);
}
.type-tabs .btn-check:checked + label, .type-tab.active, .sort-tabs a.active, .detail-tabs a.active, .tab.active { background: var(--ieum-primary); color: #ffffff; }
.search-filter .type-tabs .type-tab { border: none; background: var(--fold-fog); }
.search-filter .type-tabs .type-tab.active { background: var(--ieum-primary); }

.cond-chip, .hero-chip, .footer-chip {
    background: #ffffff;
    border: none;
    border-radius: var(--ieum-r-rounded);
    color: var(--ieum-text);
    box-shadow: var(--ieum-shadow-s);
}
.hero-chip, .footer-chip { color: var(--fold-dusk); }

.tag-chips .form-check-label { border-radius: var(--ieum-r-rounded); border-color: var(--ieum-border); }

.alert { border-radius: var(--ieum-r); border-left-width: var(--ieum-b); }
.alert-primary { background: #ffffff; border-color: var(--fold-mist); color: var(--ieum-text); box-shadow: var(--fold-shadow-md2); }
.alert-secondary { background: var(--fold-mist); border-color: var(--fold-mist); color: var(--ieum-text); }

.pagination .page-link { border-radius: var(--ieum-r-rounded); }

.icon-box, .icon-circle, .stat-card .icon-circle { background: var(--fold-fog); color: var(--ieum-secondary); border-radius: var(--ieum-r-rounded); }
.step-num, .success-icon { border-radius: var(--ieum-r-rounded); }
.progress-steps li.current .dot { border-color: var(--fold-blue); color: var(--fold-blue); }
.progress-steps li.current { color: var(--fold-blue); }

/* ---------- 헤더: 떠 있는 내비 필 ---------- */

.site-header {
    background: var(--fold-fog);
    color: var(--ieum-text);
    border-bottom: none;
    padding: var(--ieum-s-4) 0 var(--ieum-s-2);
}
.site-header > .container {
    border-radius: 24px;
    background: var(--fold-fog);
    box-shadow: var(--fold-shadow-md);
    padding: var(--ieum-s-3) var(--ieum-s-6) !important;
    min-height: 72px;
}
.brand-logo { color: var(--ieum-text); font-size: 1.5rem; letter-spacing: -.72px; }
.brand-logo span, .footer-brand span { color: var(--fold-blue); }
.primary-nav a { color: var(--ieum-text); }
.primary-nav a:hover, .primary-nav a.active { color: var(--fold-blue); text-decoration: none; }
.primary-nav .badge.text-bg-warning { background: #ffffff !important; color: var(--ieum-secondary) !important; box-shadow: var(--ieum-shadow-s); }
.site-header .text-secondary { color: var(--fold-dusk) !important; }
.site-header .btn-link { --bs-btn-color: var(--fold-dusk); }
.subnav-strip { background: transparent; border-bottom: var(--ieum-b) solid var(--ieum-border); }

/* ---------- 푸터: Fog 위 헤어라인 ---------- */

footer, footer.bg-light {
    background: transparent !important;
    border-top: var(--ieum-b) solid var(--ieum-border) !important;
    color: var(--fold-dusk);
    padding: var(--ieum-s-8) 0 var(--ieum-s-12) !important;
}
footer a { color: var(--ieum-text); }
footer a:hover { color: var(--fold-blue); }
footer p { color: var(--fold-dusk); }
footer .container > div:first-child { border-bottom-color: var(--fold-mist); }
.footer-brand { color: var(--ieum-text); }

/* ---------- 히어로: Fog 위 네이비 텍스트 ---------- */

.hero {
    background: transparent;
    color: var(--ieum-text);
    padding: var(--ieum-s-10) 0 var(--ieum-s-8);
}
/* 투명 배경이라 화면 가득 채울 이유가 없다. 컨테이너 안으로 되돌린다 */
.hero-bleed { margin: 0 0 var(--ieum-s-12); padding-left: 0; padding-right: 0; }
.hero h1 { color: var(--ieum-text); font-size: 4rem; line-height: 1.05; letter-spacing: -2.56px; }
.hero .eyebrow { color: var(--fold-dusk); }
.hero .text-secondary { color: var(--fold-dusk) !important; }
.hero .form-label { color: var(--fold-dusk); }
.hero-visual { background: var(--fold-mist); color: var(--fold-dusk); border-radius: 16px; }
.hero-tall { padding-bottom: var(--ieum-s-8); }
.action-cards { margin-top: 0; }

/* 강조 띠: 기본은 흰 카드. 페이지에서 한 번만 쓰는 Voltage 카드는 .cta-volt 를 덧붙인다 (메인 차주 모집) */
.cta-strip { background: #ffffff; border-left: none; box-shadow: var(--fold-shadow-xl); padding: var(--ieum-s-8); }
.cta-strip.cta-volt {
    background: var(--fold-volt);
    color: var(--fold-abyss);
    box-shadow: rgba(255, 255, 255, .53) 0 1px 0 0;
    padding: var(--ieum-s-12);
}
.cta-volt h2, .cta-volt .h4 { color: var(--fold-abyss); }
.cta-volt .text-secondary { color: var(--fold-abyss) !important; }
.cta-volt .badge.text-bg-light { background: rgba(4, 41, 57, .08) !important; color: var(--fold-abyss) !important; }
.cta-strip .trust-item { background: var(--fold-fog); }

.section-head h2 { font-size: 2rem; letter-spacing: -.96px; }
.detail-section h2, .action-card h2 { letter-spacing: -.72px; }
.vehicle-card-body .title { color: var(--ieum-text); font-size: 1.25rem; letter-spacing: -.5px; }
.rating .ico { color: var(--ieum-text); }
.vehicle-card-thumb .fav-overlay { border-radius: var(--ieum-r-rounded); }

/* ---------- 마이페이지 사이드: 필 내비 ---------- */

.sidebar-nav a, .sidebar-nav span {
    border-left: none;
    border-radius: var(--ieum-r-rounded);
    padding: var(--ieum-s-3) var(--ieum-s-4);
    color: var(--ieum-text);
}
.sidebar-nav a:hover { background: #ffffff; }
.sidebar-nav a.active { background: var(--ieum-primary); color: #ffffff; }
.my-sidebar { background: #ffffff; border-radius: var(--ieum-r); padding: var(--ieum-s-4); box-shadow: var(--fold-shadow-xl); align-self: start; }

/* ---------- Fold 메인 구성 (user/main.html) ---------- */

.fold-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ieum-s-8); padding: var(--ieum-s-10) 0 var(--ieum-s-4); }
.fold-objects { display: flex; align-items: flex-end; justify-content: center; height: 200px; }
.fold-objects > * { flex-shrink: 0; }
.fold-objects .obj-key { margin-right: -24px; transform: translateY(-10px); }
.fold-objects .obj-camper { position: relative; z-index: 1; }
.fold-objects .obj-car { margin-left: -36px; }
.fold-display {
    font-size: clamp(2.5rem, 7vw, 6.25rem);   /* 100px · 한글은 자간 -0.05em 까지만 */
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--ieum-text);
    text-wrap: balance;
    margin: 0;
}
.fold-lead { font-size: 1.125rem; line-height: 1.41; letter-spacing: -.54px; color: var(--fold-dusk); max-width: 560px; margin: 0; }
.fold-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ieum-s-2); }
.fold-tag {
    display: inline-flex; align-items: center; gap: var(--ieum-s-2);
    padding: 6px 10px 6px 8px;
    border-radius: var(--ieum-r-rounded);
    background: #ffffff;
    color: var(--fold-dusk);
    font-size: .75rem; font-weight: 600; letter-spacing: .4px;
    box-shadow: var(--ieum-shadow-s);
}
.fold-tag .ico { color: var(--ieum-secondary); }
.fold-banner { display: block; max-width: 720px; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: var(--fold-shadow-md); }
.fold-banner img { display: block; width: 100%; height: 240px; object-fit: cover; }

.fold-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ieum-s-12); align-items: center; }
.fold-split > .fold-copy { display: flex; flex-direction: column; gap: var(--ieum-s-6); }
.fold-split h2 { font-size: 3rem; line-height: 1.05; letter-spacing: -2px; margin: 0; text-wrap: pretty; }
.fold-split .fold-lead { max-width: none; }
.fold-illust { display: flex; justify-content: center; }
.fold-illust svg { max-width: 100%; height: auto; }
.fold-trust-list { display: flex; flex-direction: column; gap: var(--ieum-s-4); margin: 0; padding: 0; list-style: none; }
.fold-trust-list li { display: flex; align-items: flex-start; gap: var(--ieum-s-3); }
.fold-trust-list h3 { font-size: 1.125rem; margin: 0 0 2px; }
.fold-trust-list p { margin: 0; font-size: 1rem; color: var(--fold-dusk); }
.fold-steps { display: flex; flex-direction: column; gap: var(--ieum-s-6); margin: 0; padding: 0; list-style: none; }
.fold-steps li { display: flex; align-items: flex-start; gap: var(--ieum-s-4); }
.fold-steps .step-num { width: 40px; height: 40px; font-size: 1rem; flex-shrink: 0; }
.fold-steps h3 { font-size: 1.5rem; margin: 0 0 var(--ieum-s-1); }
.fold-steps p { margin: 0; color: var(--fold-dusk); }
.fold-closing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--ieum-s-6); }
.fold-closing h2 { font-size: 3rem; line-height: 1.05; letter-spacing: -2px; margin: 0; }
.fold-closing .form-text { max-width: 640px; }

@media (max-width: 991px) {
    .fold-objects { height: 150px; }
    .fold-objects .obj-car { display: none; }
    .fold-objects svg { max-width: 60vw; height: auto; }
    .fold-split { grid-template-columns: 1fr; gap: var(--ieum-s-6); }
    .fold-split h2, .fold-closing h2 { font-size: 2.25rem; letter-spacing: -1.4px; }
    .fold-split .fold-illust { order: -1; }
    .fold-hero .btn, .fold-closing .btn { width: 100%; }
    .site-header > .container { padding: var(--ieum-s-3) var(--ieum-s-4) !important; }
    .hero h1 { font-size: 2.5rem; letter-spacing: -1.6px; }
    /* 모바일 핵심 행동 카드: 가로 배치 대신 세로 카드 + 버튼 유지 (ieum9.css 의 row·버튼 숨김 규칙 되돌림) */
    .action-card { flex-direction: column; align-items: stretch; }
    .action-card .btn { display: inline-flex; align-self: flex-start; }
}

/* ==========================================================================
   관리자 앱 (layout/admin.html · admin/login.html). 토큰은 위와 같고 관리자 전용 컴포넌트만 손본다.
   ========================================================================== */

.admin-body { background: var(--fold-fog); }

/* 상단바: 떠 있는 내비 필 */
.admin-topbar {
    background: var(--fold-fog);
    border-bottom: none;
    padding: var(--ieum-s-4) var(--ieum-s-4) var(--ieum-s-2);
    min-height: 0;
}
.admin-topbar > .container-fluid {
    border-radius: 24px;
    background: var(--fold-fog);
    box-shadow: var(--fold-shadow-md);
    padding: var(--ieum-s-3) var(--ieum-s-6);
    min-height: 64px;
}
.admin-topbar .navbar-brand { color: var(--ieum-text); font-size: 1.5rem; letter-spacing: -.72px; }
.admin-topbar .navbar-brand span { color: var(--fold-blue); }
.admin-topbar .text-white-50 { color: var(--fold-dusk) !important; }
.admin-topbar .btn-outline-light {
    --bs-btn-color: var(--ieum-secondary); --bs-btn-border-color: var(--ieum-secondary); --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--ieum-secondary); --bs-btn-hover-border-color: var(--ieum-secondary); --bs-btn-hover-color: #ffffff;
    border-width: 1.5px;
}

/* 사이드바: 흰 카드 + 필 내비 */
.admin-shell { min-height: calc(100vh - 96px); }
.admin-sidebar {
    background: transparent;
    border-right: none;
    padding: var(--ieum-s-4);
}
.admin-sidebar .sidebar-nav {
    background: #ffffff;
    border-radius: var(--ieum-r);
    padding: var(--ieum-s-2);
    box-shadow: var(--fold-shadow-xl);
    gap: 2px;
}
.admin-sidebar .sidebar-nav a, .admin-sidebar .sidebar-nav span {
    font-size: .9375rem;
    padding: 10px var(--ieum-s-3);
    border-radius: var(--ieum-r-rounded);
}
.admin-sidebar .sidebar-note { color: var(--fold-dusk); padding: 0 var(--ieum-s-2); }
.admin-content { padding: var(--ieum-s-4) var(--ieum-s-8) var(--ieum-s-12) var(--ieum-s-4); }

/* KPI 카드: 강조선 대신 그림자 */
.kpi-card { border: none; box-shadow: var(--fold-shadow-xl); }
a.kpi-card:hover { box-shadow: var(--fold-shadow-md); }
.kpi-card .kpi-value { color: var(--ieum-text); letter-spacing: -.96px; }
.kpi-card .kpi-label { color: var(--fold-dusk); }

/* 표: 머리글은 Fog, 헤어라인 */
.table > thead th { background: var(--fold-fog); border-bottom: var(--ieum-b) solid var(--ieum-border); }
.card > .table, .card > .table-responsive > .table { margin: 0; }
.card > .table thead th:first-child, .card > .table-responsive > .table thead th:first-child { border-top-left-radius: var(--ieum-r); }
.card > .table thead th:last-child, .card > .table-responsive > .table thead th:last-child { border-top-right-radius: var(--ieum-r); }

/* 로그인 */
.admin-login-body { background: var(--fold-fog); }
.admin-login-card { border: none; box-shadow: var(--fold-shadow-xl); }
.admin-login-card .brand-logo { color: var(--ieum-text); letter-spacing: -.72px; }
.admin-login-card .brand-logo span { color: var(--fold-blue); }

@media (max-width: 991px) {
    .admin-sidebar { border-bottom: none; }
    .admin-sidebar .sidebar-nav { flex-direction: row; flex-wrap: wrap; }
}