/* ========================================================================
 * Button
 * ======================================================================*/
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-md); font-weight: 700; font-size: var(--fs-base); line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); border: 1px solid transparent; text-decoration: none; }

.btn:focus-visible,
.btn.is-focus { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

/* Disabled */
.btn[disabled],
.btn[aria-disabled="true"],
.btn.is-disabled { cursor: not-allowed; }

.btn-primary.btn:is([disabled], [aria-disabled="true"], .is-disabled),
.btn-primary.btn:is([disabled], [aria-disabled="true"], .is-disabled):hover,
.btn-primary.btn:is([disabled], [aria-disabled="true"], .is-disabled).is-hover,
.btn-primary.btn:is([disabled], [aria-disabled="true"], .is-disabled):active,
.btn-primary.btn:is([disabled], [aria-disabled="true"], .is-disabled).is-active { background: var(--color-brand-disabled); color: var(--color-text-on-brand); }

.btn-secondary.btn:is([disabled], [aria-disabled="true"], .is-disabled),
.btn-secondary.btn:is([disabled], [aria-disabled="true"], .is-disabled):hover,
.btn-secondary.btn:is([disabled], [aria-disabled="true"], .is-disabled).is-hover,
.btn-secondary.btn:is([disabled], [aria-disabled="true"], .is-disabled):active,
.btn-secondary.btn:is([disabled], [aria-disabled="true"], .is-disabled).is-active { background: var(--color-surface); color: var(--color-border-strong); border-color: var(--color-border-strong); }

.btn-primary { background: var(--color-brand); color: var(--color-text-on-brand); }
.btn-primary:hover,
.btn-primary.is-hover { background: var(--color-brand-hover); }
.btn-primary:active,
.btn-primary.is-active { background: var(--color-brand-active); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-text); }
.btn-secondary:hover,
.btn-secondary.is-hover { background: var(--color-surface-subtle); }
.btn-secondary:active,
.btn-secondary.is-active { background: var(--color-surface-muted); }

.btn-soft { background: var(--color-surface-subtle); border-color: transparent; color: var(--color-text); }
.btn-soft:hover,
.btn-soft.is-hover { background: var(--color-surface-muted); border-color: transparent; }
.btn-soft:active,
.btn-soft.is-active { background: var(--color-surface-muted); border-color: transparent; }

.btn-tool { width: 80px; padding: 0 13px; gap: 4px; background: var(--color-surface-tonal); color: var(--color-text); border-color: transparent; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; }
.btn-tool:hover,
.btn-tool.is-hover { background: var(--color-surface-muted); border-color: transparent; }
.btn-tool:active,
.btn-tool.is-active { background: var(--color-surface-subtle); border-color: transparent; }

.btn-outline-mint { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-action-mint); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; }
.btn-outline-mint:hover { background-color: #F1FFFD; }
.btn-outline-orange { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-action-orange); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; }
.btn-outline-orange:hover { background-color: #FFFBF7; }

.btn-sm { height: 40px; padding: 0 16px; font-size: var(--fs-14); line-height: var(--lh-14); border-radius: 8px; }

.btn-secondary.btn-sm { height: 34px; border-color: var(--color-text); font-weight: 700; }

.btn-verify { height: 34px; padding: 0 16px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; border-radius: 8px; background: var(--color-surface); color: var(--color-text); border-color: var(--color-text); }
.btn-verify:hover,
.btn-verify.is-hover { background: var(--color-surface-subtle); }
.btn-verify:active,
.btn-verify.is-active { background: var(--color-surface-muted); }
.btn-verify:is([disabled], [aria-disabled="true"], .is-disabled),
.btn-verify:is([disabled], [aria-disabled="true"], .is-disabled):hover,
.btn-verify:is([disabled], [aria-disabled="true"], .is-disabled):active { background: var(--color-surface); color: var(--color-border-strong); border-color: var(--color-border-strong); }
.btn-md { height: 48px; padding: 0 16px; font-size: var(--fs-base); line-height: var(--lh-base); border-radius: 8px; }
.btn-lg { height: 56px; padding: 0 16px; font-size: var(--fs-md); line-height: var(--lh-md); border-radius: 8px; }
/* .btn-pill { border-radius: var(--radius-pill); } */

.chip-btn { display:inline-flex;flex-direction:column;align-items: center; justify-content: center; width: 100%; min-width: 0; height: 60px; padding: 0 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.chip-btn:hover:not(:disabled):not(.is-selected) { background: var(--color-surface-soft-blue); border-color: var(--color-border-strong); }
.chip-btn:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.chip-btn.is-selected,
.chip-btn[aria-pressed="true"],
.chip-btn:has(> input[type="radio"]:checked) { background: var(--color-brand-soft-100); border-color: var(--color-brand); font-weight: 700; }
.chip-btn:disabled,
.chip-btn[aria-disabled="true"] { background: var(--color-surface-soft-blue); color: var(--color-text-muted); cursor: not-allowed; }
.chip-btn:has(.chip-btn-sub) { flex-direction: column; gap: 0; }
.chip-btn-sub { font-size: var(--fs-base); line-height: var(--lh-base); }
.checkbox-btn { display: inline-flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text-muted-2); cursor: pointer; user-select: none; }
.checkbox-btn > input[type="checkbox"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.checkbox-btn-check { width: 16px; height: 16px; flex-shrink: 0; background: url("../../images/pd/pd/dirccar/check-gray.png") no-repeat center / 16px 16px; font-size: 0; color: transparent; }
.checkbox-btn:has(input:checked) { color: var(--color-text); font-weight: 700; }
.checkbox-btn:has(input:checked) .checkbox-btn-check { background-image: url("../../images/pd/pd/dirccar/check-dark.png"); }
.chip-btn:has(> input[type="radio"]) { position: relative; }
.chip-btn > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-btn:has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

.vehicle-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.vehicle-summary-title { display: flex; align-items: center; height: 62px; margin: 0; padding: 0 32px; background: var(--color-surface-soft-blue); border-bottom: 1px solid var(--color-divider); font-size: var(--fs-md); font-weight: 700; color: var(--color-text); }
.vehicle-summary-body { padding: 16px 32px 24px; display: flex; flex-direction: column; gap: 32px; }
.vehicle-summary-body.vehicle-summary-body-tight { gap: 24px; padding-bottom: 32px; }
.vehicle-summary-meta { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vehicle-summary-fuel { position: relative; margin: 0 -32px; padding: 32px 31px 0; }
.vehicle-summary-fuel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--color-border); }

.choice-group { display: flex; gap: 24px; }
.choice-group > .choice-btn { flex: 1; height: 56px; padding: 0 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: 400; color: var(--color-text); cursor: pointer; transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); }
.choice-group > .choice-btn:hover { border-color: var(--color-border-strong); }
.choice-group > .choice-btn.is-selected { background: var(--color-brand-soft-100); border-color: var(--color-brand); font-weight: 700; }
.choice-group > .choice-btn:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

.notice-info { padding: 16px 20px; background: var(--color-surface-tonal); border-radius: var(--radius-md); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text-secondary); }

.address-selected-box { padding: 16px; background: var(--color-surface-tonal); border-radius: var(--radius-md); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); }

.modal-panel:has(.address-search) { min-height: 600px; }

.address-search { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);}
.address-search:focus-within { border-color: var(--color-border-focus); box-shadow: var(--field-focus-shadow); }
.address-search:has(.address-search-list-wrap:not([hidden]):not(.ng-hide)) { border-color: var(--color-border-focus); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow:var(--field-focus-shadow);}
.address-search-input {position:relative;display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border-radius: inherit; background:var(--color-surface);z-index:11;}
.address-search-input:has( input:disabled ) { font-weight:400; background: var(--field-bg-disabled); border-color: var(--color-border); cursor: not-allowed; }
.address-search-field { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); font-weight: 700; }
.address-search-field::placeholder { font-weight: 400; color: var(--color-text-placeholder); }
.address-search-list-wrap,
.auto-complete-list-wrap { position: absolute; top: 100%; left: -1px; right: -1px; z-index: 10; background: var(--color-surface); border: 1px solid var(--color-border-focus); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--field-focus-shadow); overflow: hidden; max-height: 322px; }
.address-search-list-wrap[hidden] { display: none; }
.address-search-list-wrap {box-shadow:var(--field-focus-shadow);}
.auto-complete-list-wrap { max-height: 240px; }
.auto-complete-list-wrap .auto-complete-list { height: auto; max-height: 240px; }
.address-search-list,
.auto-complete-list { list-style: none; margin: 0; padding: 0; height: 322px; overflow-y: auto; }
.address-search-list::-webkit-scrollbar,
.auto-complete-list::-webkit-scrollbar { width: var(--scrollbar-size); }
.address-search-list::-webkit-scrollbar-track,
.auto-complete-list::-webkit-scrollbar-track { background: transparent; }
.address-search-list::-webkit-scrollbar-thumb,
.auto-complete-list::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }
.address-search-item,
.auto-complete-item { padding: 16px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); font-weight: 400; cursor: pointer; }
.address-search-item.is-active,
.address-search-item:hover,
.auto-complete-item.is-active,
.auto-complete-item:hover { background: var(--color-surface-soft-blue); }
.address-search-item > strong,
.auto-complete-item > strong { font-weight: 700; }

.notice-info + .btn { width: 175px; height: 34px; padding: 0 16px; font-size: var(--fs-14); line-height: var(--lh-14); border-radius: 8px; }
.detail-toggle { display: flow-root; }
.detail-box { margin: 24px -16px 0; padding: 24px 16px; background: var(--color-surface-tonal); border-radius: var(--radius-md); max-height: 2000px; 
 overflow: hidden; transition: max-height 0.3s var(--ease-out), margin-top 0.3s var(--ease-out), padding 0.3s var(--ease-out); }
.detail-box.is-collapsed { max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
.detail-box[hidden] { display: none; }

.form-title { margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); }
.form-title.has-line {padding-bottom:16px;border-bottom:1px solid var(--color-border);}

.form-label-row { display: flex; align-items: center; justify-content: space-between; }
.form-label-row > .form-label-lg { margin-bottom: 0; }

.field-pair { display: flex; align-items: center; gap: 8px; }
.field-pair > .field { flex: 1; }
.field-pair-sep { flex-shrink: 0; color: var(--color-text-muted); }

.form-label-lg { display: block; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); }

.form-label.form-label-xl { display: block; margin-bottom: 16px; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); }
.form-label-lg.has-tooltip { display: flex; align-items: center; gap: 8px; }

.vehicle-summary-row { display: grid; grid-template-columns: 80px 1fr; column-gap: 160px; align-items: baseline; }
.vehicle-summary-row > dt { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-muted); }
.vehicle-summary-row > dd { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; color: var(--color-text); }
.vehicle-summary-row.is-emphasis > dd { color: var(--color-brand); font-weight: 700; }

.chip-btn-grid { display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 24px; column-gap: 24px; padding: 0 46px; }
.chip-btn-grid.chip-btn-grid-3 { grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 24px; padding: 0; }
.modal-body .chip-btn-grid.chip-btn-grid-3 { column-gap: 28px; }
.chip-btn-grid.chip-btn-grid-gap-34 { column-gap: 34px; }
.chip-btn-grid.chip-btn-grid-2 { grid-template-columns: repeat(2, 1fr); column-gap: 26px; padding: 0; }
.chip-btn-grid.chip-btn-grid-scroll { max-height: 564px; overflow-y: auto; margin-right: -16px; padding-right: 12px; scrollbar-gutter: stable; }
.chip-btn-grid-scroll::-webkit-scrollbar { width: var(--scrollbar-size); }
.chip-btn-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.chip-btn-grid-scroll::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }

/* ========================================================================
 * scroll-box — 공통 스크롤 컨테이너 유틸 (overflow + 4px 커스텀 스크롤바)
 * ======================================================================*/
.scroll-box { overflow-y: auto; scrollbar-gutter: stable; margin-right: -16px; padding-right: 16px; border-right: 12px solid transparent; }
.scroll-box::-webkit-scrollbar { width: var(--scrollbar-size); }
.scroll-box::-webkit-scrollbar-track { background: transparent; }
.scroll-box::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }

/* ========================================================================
 * Filter Group + Filter Chip — pill 형태의 필터 토글 (예: "많이 선택하는 / 전체")
 * ui.js 의 chip 모듈이 click 시 .is-selected 토글 (radio 형식)
 * ======================================================================*/
.filter-group { display: inline-flex; align-items: center; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; cursor: pointer; transition:
 background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
.filter-chip-check { font-size: var(--fs-2xs); line-height: 1; }
.filter-chip:hover:not(.is-selected):not(:disabled) { border-color: var(--color-border-strong); color: var(--color-text); }
.filter-chip.is-selected { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-on-brand); font-weight: 700; }
.filter-chip:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

/* ========================================================================
 * Maker Grid + Maker Card — 자동차 제조사 선택 카드 (로고 + 체크 + 이름)
 * ======================================================================*/
.maker-grid { display: grid; grid-template-columns: repeat(5, 121px); column-gap: 32px; row-gap: 24px; max-width: 733px; margin-left: auto; margin-right: auto; }

.title-lg + .maker-grid { margin-top: 16px; }
.maker-card { 
 width: 121px; height: 124px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; transition:
 background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out); }
.maker-card:hover:not(.is-selected):not(:disabled) { border-color: var(--color-border-strong); }
.maker-card:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.maker-card.is-selected { background: var(--color-brand-soft-100); border-color: var(--color-brand); }
.maker-card-logo { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: var(--fs-sm); font-weight: 800; letter-spacing: 0.06em; color: var(--color-text-secondary); text-align: center; line-height: 1.15; background-repeat:no-repeat; background-size:contain; background-position:center;}
.maker-card-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.maker-card-etc .maker-card-logo { font-size: 28px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-muted-2); }
.maker-card.is-selected .maker-card-logo { color: var(--color-brand); }
.maker-card-name { height: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: var(--fs-sm); font-weight: 400; }
.maker-card-check { display: inline-block; width: 16px; height: 16px; background-image: url("../../images/pd/pd/dirccar/check-gray.png"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; font-size: 0; line-height: 0; }
.maker-card.is-selected .maker-card-check { background-image: url("../../images/pd/pd/dirccar/check-dark.png"); }
.maker-card.is-selected .maker-card-name { font-weight: 700; }

.maker-card-logo.hyundai {background-image:url("../../images/pd/pd/dirccar/car-logos/hyundai.png")}
.maker-card-logo.kia {background-image:url("../../images/pd/pd/dirccar/car-logos/kia.png")}
.maker-card-logo.renault {background-image:url("../../images/pd/pd/dirccar/car-logos/renault.png")}
.maker-card-logo.kgm {background-image:url("../../images/pd/pd/dirccar/car-logos/kgm.png")}
.maker-card-logo.gm-daewoo {background-image:url("../../images/pd/pd/dirccar/car-logos/gm-daewoo.png")}
.maker-card-logo.bmw {background-image:url("../../images/pd/pd/dirccar/car-logos/bmw.png")}
.maker-card-logo.mercedes-benz {background-image:url("../../images/pd/pd/dirccar/car-logos/mercedes-benz.png")}
.maker-card-logo.audi {background-image:url("../../images/pd/pd/dirccar/car-logos/audi.png")}
.maker-card-logo.lexus {background-image:url("../../images/pd/pd/dirccar/car-logos/lexus.png")}
.maker-card-logo.volvo {background-image:url("../../images/pd/pd/dirccar/car-logos/volvo.png")}
.maker-card-logo.nissan {background-image:url("../../images/pd/pd/dirccar/car-logos/nissan.png")}
.maker-card-logo.daechang {background-image:url("../../images/pd/pd/dirccar/car-logos/daechang.png")}
.maker-card-logo.land-rover {background-image:url("../../images/pd/pd/dirccar/car-logos/land-rover.png")}
.maker-card-logo.lincoln {background-image:url("../../images/pd/pd/dirccar/car-logos/lincoln.png")}
.maker-card-logo.mitsubishi {background-image:url("../../images/pd/pd/dirccar/car-logos/mitsubishi.png")}
.maker-card-logo.baw {background-image:url("../../images/pd/pd/dirccar/car-logos/baw.png")}
.maker-card-logo.saab {background-image:url("../../images/pd/pd/dirccar/car-logos/saab.png")}
.maker-card-logo.chevrolet {background-image:url("../../images/pd/pd/dirccar/car-logos/chevrolet.png")}
.maker-card-logo.subaru {background-image:url("../../images/pd/pd/dirccar/car-logos/subaru.png")}
.maker-card-logo.citroen {background-image:url("../../images/pd/pd/dirccar/car-logos/citroen.png")}
.maker-card-logo.semisysco {background-image:url("../../images/pd/pd/dirccar/car-logos/semisysco.png")}
.maker-card-logo.asia-motors {background-image:url("../../images/pd/pd/dirccar/car-logos/asia-motors.png")}
.maker-card-logo.infiniti {background-image:url("../../images/pd/pd/dirccar/car-logos/infiniti.png")}
.maker-card-logo.jaguar {background-image:url("../../images/pd/pd/dirccar/car-logos/jaguar.png")}
.maker-card-logo.cadillac {background-image:url("../../images/pd/pd/dirccar/car-logos/cadillac.png")}
.maker-card-logo.chrysler {background-image:url("../../images/pd/pd/dirccar/car-logos/chrysler.png")}
.maker-card-logo.toyota {background-image:url("../../images/pd/pd/dirccar/car-logos/toyota.png")}
.maker-card-logo.ford {background-image:url("../../images/pd/pd/dirccar/car-logos/ford.png")}
.maker-card-logo.porsche {background-image:url("../../images/pd/pd/dirccar/car-logos/porsche.png")}
.maker-card-logo.volkswagen {background-image:url("../../images/pd/pd/dirccar/car-logos/volkswagen.png")}
.maker-card-logo.pontiac {background-image:url("../../images/pd/pd/dirccar/car-logos/pontiac.png")}
.maker-card-logo.peugeot {background-image:url("../../images/pd/pd/dirccar/car-logos/peugeot.png")}
.maker-card-logo.fiat {background-image:url("../../images/pd/pd/dirccar/car-logos/fiat.png")}
.maker-card-logo.honda {background-image:url("../../images/pd/pd/dirccar/car-logos/honda.png")}
.maker-card-logo.gm {background-image:url("../../images/pd/pd/dirccar/car-logos/gm.png")}
.maker-card-logo.etc {background-image:url("../../images/pd/pd/dirccar/car-logos/etc.png")}

/* ========================================================================
 * TextField
 * - Sizes: sm | md | lg
 * - States: default | hover | focused | filled | error | disabled | readonly
 * ======================================================================*/
.field { display: inline-flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { color: var(--color-text-muted); }
.field-required { color: var(--color-danger); margin-left: 2px; }
.field-control { position: relative; display: inline-flex; align-items: center; gap: 8px; width: 100%; background: var(--field-bg); border: var(--field-border) solid var(--field-border-color); border-radius: var(--field-radius); transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out); }
.field-control:hover { border-color: var(--field-border-hover); }
.field-control:focus-within { border-color: var(--field-border-focus); box-shadow: var(--field-focus-shadow); }
.field-control:has(> .auto-complete-list-wrap.show) {border-color: var(--field-border-focus); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: var(--field-focus-shadow);}
.field-lg .field-control.field-auto-complete {padding:0;background:var(--color-surface);z-index:11;}
.field-lg .field-control.field-auto-complete .field-input {padding:0 16px;background:var(--color-surface);border-radius:inherit;z-index:12;}
.field-input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; color: var(--field-text); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; padding: 0; height: 100%; }
.field-input:focus,
.field-input:focus-visible { outline: none; }

.field-input::placeholder { color: var(--field-placeholder); }
.field-input:not(:placeholder-shown) { font-size: var(--fs-base); color: var(--color-text); font-weight: 700; }

.field-input:read-only,
.field-input:read-only:focus,
.field-input:read-only:focus-visible,
.field-input:disabled { font-weight: 400; }

.field-sm .field-control { height: var(--field-height-sm); padding: 0 var(--field-pad-x-sm); border-radius: var(--field-radius-sm); }
.field-sm .field-input { font-size: var(--fs-sm); }

.field-md .field-control { height: var(--field-height-md); padding: 0 var(--field-pad-x-md); border-radius: var(--field-radius-md); }
.field-md .field-input { font-size: var(--fs-base); }

.field-lg .field-control { height: var(--field-height-lg); padding: 0 var(--field-pad-x-lg); border-radius: var(--field-radius-lg); }

.field-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; background: url("../../images/pd/pd/dirccar/icon-clear.png") no-repeat center / 20px 20px; font-size: 0; color: transparent; line-height: 1; flex-shrink: 0; cursor: pointer; visibility: hidden; }
.field-clear:hover { opacity: 0.7; }

.field-control:focus-within .field-clear { visibility: visible; }

.field-error .field-control,
.is-error .field-control { border-color: var(--field-border-error); }
.field-error .field-control:focus-within,
.is-error .field-control:focus-within { box-shadow: 0 0 0 3px var(--color-brand-soft-12); }

.field-timer { flex-shrink: 0; font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

.card-number-row { display: flex; gap: 8px; }
.card-number-row .field { flex: 1; min-width: 0; }

/* ========================================================================
 * Premium Summary — 보험료 확인 페이지 상단 총 보험료 카드
 * ======================================================================*/
.premium-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px 20px 40px; background: var(--color-action-cream); border-radius: 16px; }
.premium-summary-info { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.premium-summary-label { margin: 0; font-size: var(--fs-base); font-weight: 400; color: var(--color-text); }
.premium-summary-amounts { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.premium-summary-current { font-size: var(--fs-4xl); font-weight: 700; color: var(--color-brand); line-height: 48px; }
.premium-summary-original { font-size: var(--fs-lg); font-weight: 400; line-height: var(--lh-lg); color: var(--color-text-muted-2); text-decoration: line-through; }
.premium-summary-discount { margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--color-text); } 
.premium-summary-img { flex-shrink: 0; width: 148px; height: 100px; background: url("../../images/pd/pd/dirccar/img-summary-car.png") no-repeat center / contain; }

/* ========================================================================
 * Recommend Banner — 추천 배너 (텍스트 + i 아이콘 + 우측 토글 스위치)
 * ======================================================================*/
.recommend-banner { display: flex; align-items: center; gap: 40px; width: 788px; height: 68px; padding: 16px 32px 16px 24px; background: rgba(223, 249, 242, 0.57); border-radius: var(--radius-md); }
.recommend-banner-text { display: flex; align-items: center; gap: 4px; flex: 1; font-size: var(--fs-lg); font-weight: 700; line-height: 36px; color: var(--color-text-secondary); }
.recommend-banner-text .car-name {color:var(--color-secondary-coral);font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:277px;margin-right:4px;}

/* ========================================================================
 * Option Row — 담보·할인특약·추가특약 공용 행 (체크박스 + 이름 + 우측 정보 + chevron)
 * ======================================================================*/
.option-list { display: flex; flex-direction: column; gap: 16px; }
.option-row { display: flex; align-items: center; gap: 16px; min-height: 60px; 
 padding: 16px 20px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }

.option-row .radio, .option-row .checkbox { height: auto; }
.option-row-trigger { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 16px; cursor: pointer; margin-block: -16px; padding-block: 16px; }
.option-row:hover { border-color: var(--color-border-strong); }
.option-row:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft-50); }
.option-row-name { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; word-break: keep-all; color: var(--color-text); }
.option-row:has(input:checked) .option-row-name { font-weight: 700; }
.option-row-detail { font-size: var(--fs-base); font-weight: 500; color: var(--color-text-muted); }
.option-row-detail::before { content: ""; display: inline-block; width: 1px; height: 13px; margin-right: 8px; background: var(--color-border-soft); vertical-align: middle; }
.option-row-value { font-size: var(--fs-md); font-weight: 500; margin-left: auto; white-space: nowrap; color: var(--color-text); }
.option-row-value-muted { color: var(--color-text-muted); }

.modal-body-inner .option-row { height: 60px; padding: 12px 20px; }
.modal-body-inner .option-row-name { font-size: var(--fs-14); line-height: var(--lh-14); }
.modal-body-inner .option-row-value { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; text-align: right; }

.option-row-name + .badge,
.option-row-name + .discount-badge,
.option-row-name + .option-row-detail { margin-left: -8px; }
.option-row:not(:has(.option-row-value)) > .icon-arrow-right-20 { margin-left: auto; }
.option-row:has(input:disabled:not(:checked)) .icon-arrow-right-20 {visibility:hidden;cursor:default;}
.option-row:has(input:disabled:not(:checked)) .icon-arrow-right-20:after {cursor:default;}
.option-row:has(input:disabled:not(:checked)) .option-row-name,
.option-row:has(input:disabled:not(:checked)) .option-row-value { color:var(--color-border-strong);}
.option-row:has(input:disabled:not(:checked)):hover {border-color:var(--color-border);cursor:default;}
.option-row:has(input:disabled:not(:checked)),
.option-row:has(input:disabled:not(:checked)) .option-row-trigger {cursor:default;}
.option-row > .icon-arrow-right-20 { position: relative; }
.option-row > .icon-arrow-right-20::after { content: ""; position: absolute; inset: -16px -20px -16px -16px; }
.option-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.option-row-grid-spaced { gap: 24px 16px; }
.option-row-grid-stack { grid-template-columns: 1fr; }

.coverage-summary { display: flex; align-items: center; gap: 12px; height: 76px; flex-shrink: 0; 
 margin-bottom: 24px; 
 padding: 0 24px; background: var(--color-action-cream); border-radius: 12px; }
.coverage-summary.coverage-summary-mint { background: var(--color-action-mint-soft); }
.modal-body-inner > .coverage-summary { margin-bottom: 0; }
.coverage-summary-label { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); }
.coverage-summary-value { font-size: var(--fs-lg); font-weight: 700; color: var(--color-brand); }
.coverage-summary-price { margin-left: auto; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); text-align: right; }

.action-row { display: flex; justify-content: space-between; gap: 8px; }
.action-row > * { display: flex; gap: 8px; }
.action-row > :first-child .btn { width: 150px; }

.field-help { display: none; font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-block .field-error {font-size: var(--fs-xs); color: var(--color-danger); margin-top:-8px;}

.field-error .field-help,
.form-block.is-error .field-error { display: block; color: var(--color-danger);}

.field-disabled .field-control,
.field-control:has(.field-input:disabled) { background: var(--field-bg-disabled); border-color: var(--color-border); cursor: not-allowed; }

.field-disabled .field-input,
.field-input:disabled { color: var(--color-text-subtle); cursor: not-allowed; }

.field-readonly .field-control { background: var(--color-surface-subtle); border-color: var(--color-border); }

.field-readonly .field-control:focus-within,
.field-control:has(.field-input:read-only):focus-within { border-color: var(--color-border); box-shadow: none; }

.field-group { display: inline-flex; align-items: center; gap: 6px; }
.field-group .field-sep { color: var(--color-text-subtle); font-weight: 600; }

/* ========================================================================
 * Card
 * ======================================================================*/
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; }

/* ========================================================================
 * Swiper
 * ======================================================================*/
.ui-swiper { position: relative; }
.ui-swiper > .swiper { overflow: hidden; border-radius: var(--radius-2xl); }
.ui-swiper-arrow { position: absolute; top: 110px; z-index: 2;  width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; transition: background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);}
.ui-swiper-arrow:hover { background: var(--color-surface-subtle); color: var(--color-text); }
.ui-swiper-arrow.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.ui-swiper-arrow-prev { left: -52px; }
.ui-swiper-arrow-next { right: -52px; }

.benefit-swiper .ui-swiper-arrow,
.benefit-swiper .ui-swiper-arrow:hover { width: 80px; height: 80px; background-color: transparent; border: 0; border-radius: 0; font-size: 0; color: transparent; background-repeat: no-repeat; background-position: center; background-size: 80px 80px; }
.benefit-swiper .ui-swiper-arrow-prev,
.benefit-swiper .ui-swiper-arrow-prev:hover { left: -104px; background-image: url("../../images/pd/pd/dirccar/icon-arrow-left-lg.png"); }
.benefit-swiper .ui-swiper-arrow-next,
.benefit-swiper .ui-swiper-arrow-next:hover { right: -104px; background-image: url("../../images/pd/pd/dirccar/icon-arrow-right-lg.png"); }

.swiper-controls-row {display:flex;justify-content:center;align-items:center;gap:8px;margin-top:26px;}
.swiper-controls-row .ui-swiper-toggle {flex-shrink: 0;}
.swiper-controls-row .icon-play,
.swiper-controls-row .icon-pause {position:relative;border-radius:50%;}
.swiper-controls-row .icon-play {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23DDDDDD'/%3E%3Cpath d='M11.3929 8.92788C12.1071 8.51549 12.1071 7.48451 11.3929 7.07212L7.10714 4.59776C6.39286 4.18536 5.5 4.70086 5.5 5.52564L5.5 10.4744C5.5 11.2991 6.39286 11.8146 7.10714 11.4022L11.3929 8.92788Z' fill='%23999999'/%3E%3C/svg%3E%0A");}
.swiper-controls-row .icon-pause {background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='2' height='6' rx='1' fill='%23999999'/%3E%3Crect x='9' y='5' width='2' height='6' rx='1' fill='%23999999'/%3E%3Ccircle cx='8' cy='8' r='7.5' stroke='%23DDDDDD'/%3E%3C/svg%3E%0A");}
.benefit-swiper-pagination { position: static; display: flex; justify-content: center; align-items: center; gap: 4px; width:auto !important;margin-left:24px;}
.benefit-swiper-pagination .swiper-pagination-bullet { width: 40px; height: 4px; border-radius: 20px; background-color: var(--color-border); opacity: 1; margin: 0 !important; transition: background-color var(--duration) var(--ease-out); }
.benefit-swiper-pagination .swiper-pagination-bullet-active { background-color: var(--color-brand); }

.benefit-slide { display: flex; width:380px; height:300px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; padding: 24px; border-radius: var(--radius-2xl); text-align: center;}
.benefit-slide-1 { background: var(--color-benefit-card-1); }
.benefit-slide-2 { background: var(--color-benefit-card-2); }
.benefit-slide-3 { background: var(--color-benefit-card-3); }
.benefit-slide-4 { background: var(--color-benefit-card-4); }
.benefit-slide-5 { background: var(--color-benefit-card-5); }
.benefit-slide-6 { background: var(--color-benefit-card-6); }
.benefit-slide-7 { background: var(--color-benefit-card-7); }
.benefit-slide-8 { background: var(--color-benefit-card-8); }
.benefit-slide-9 { background: var(--color-benefit-card-9); }
.benefit-slide-10 { background: var(--color-benefit-card-10); }

.benefit-label { margin: 0 0 16px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text-subtle); }
.benefit-headline { margin: 0 0 8px; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text-tertiary); }
.benefit-note { margin: 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--color-text-subtle); }
.compliance-note { margin: 16px 0 0 12px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--color-text-muted); }

dialog[data-fresh-focus] :focus,
dialog[data-fresh-focus] :focus-visible { outline: none !important; }
dialog[data-fresh-focus] .field-control:focus-within { box-shadow: none !important; }

.modal { margin: 60px auto; padding: 0; border: 0; background: transparent; color: inherit; max-width: calc(100vw - 32px); 
 height: min(960px, calc(100vh - 120px));
 overflow: hidden; }

/* 모달·딤 — 열릴 때만 페이드인 (닫힐 때는 즉시 — 페이드아웃이 뒤 컨텐츠를 비추는 문제 회피) */
/* .modal::backdrop { background: rgba(0, 0, 0, 0.6); animation: modal-backdrop-in var(--duration) var(--ease-out); } */

/* 정적 미리보기 — z-index 및 user-select만 추가 (position/inset은 .modal[open] 공통 처리) */
/* .modal[open]:not(:modal) { z-index: 1000; user-select: text; } */
/* .modal[open]:not(:modal)::before { content: ""; position: fixed; inset: 0; background: var(--color-dimmed); z-index: -1; } */

.layer_popup_container > div:nth-child(n + 3) .modal[open]:not(:modal)::before,
.modal-modeless[open]::before { display: none; }

.static-preview-bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 20px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08); max-height: 50vh; overflow: auto; }

.modal[open] {
 display: flex; align-items: center; justify-content: center;
 position: fixed; inset: 0; margin: 0;
 width: 100vw; max-width: 100vw;
 height: 100vh; max-height: 100vh;
 animation: modal-fade-in var(--duration) var(--ease-out);
 background: rgba(0,0,0,.6); z-index: 1000;}
.modal[open] .modal-panel { animation: modal-panel-in var(--duration) var(--ease-out); }

html:has(.modal[open]:not(.modal-modeless)) { overflow: hidden; }

@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-panel-in { from { transform: translateY(-8px) scale(0.98); }
 to { transform: translateY(0) scale(1); } }

.modal-panel { display: flex; flex-direction: column; 
 width: 400px; 
 max-width: calc(100vw - 32px); max-height: 100%; background: var(--color-surface); border-radius: var(--radius-md); 
 box-shadow:
 0 0 0 1px var(--color-border), 0 12px 28px -4px rgba(0, 0, 0, 0.18); overflow: hidden; }

.modal-sm .modal-panel { width: 400px; }

.modal-md .modal-panel { width: 560px; }
.modal-lg .modal-panel { width: 720px; max-height: min(960px, calc(100vh - 120px)); }
.modal-fsd-check .modal-panel { height: 568px; }

.modal-body.modal-body-min-h { min-height: 140px; }

.modal-alert .modal-title,
.modal-confirm .modal-title { text-align: center ; font-size: var(--fs-lg); line-height: var(--lh-lg); margin: 0; }
.modal-alert .modal-body,
.modal-confirm .modal-body { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 500; line-height: 20px; overflow: hidden; }

.modal-alert .modal-body-inner,
.modal-confirm .modal-body-inner { padding-bottom: 24px; }
.modal-alert.modal-headless .modal-body-inner,
.modal-confirm.modal-headless .modal-body-inner { padding-top:0; padding-bottom: 0; }
.modal-alert .modal-footer,
.modal-confirm .modal-footer { justify-content: center; }
.modal-alert .modal-footer .btn,
.modal-confirm .modal-footer .btn { height: 40px; }

.modal-alert .modal-footer { gap: 16px; }
.modal-alert .modal-footer .btn { max-width: 160px; }

.modal-alert.modal-headless .modal-panel,
.modal-confirm.modal-headless .modal-panel { position: relative; overflow: visible; 
 box-shadow: none; filter:
 drop-shadow(1px 0 0 var(--color-border))
 drop-shadow(-1px 0 0 var(--color-border))
 drop-shadow(0 1px 0 var(--color-border))
 drop-shadow(0 -1px 0 var(--color-border))
 drop-shadow(0 12px 16px rgba(0, 0, 0, 0.18)); }

.modal-alert.modal-headless .modal-footer,
.modal-confirm.modal-headless .modal-footer { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }

.modal-alert.modal-headless .modal-panel::after,
.modal-confirm.modal-headless .modal-panel::after { content: ''; position: absolute; top: -13px; left: 36px; width: 48px; height: 48px; background: var(--color-surface); border-radius: 50%; z-index: 0; }

.modal-alert.modal-headless .modal-panel::before,
.modal-confirm.modal-headless .modal-panel::before { content: ''; position: absolute; top: -9px; left: 40px; width: 40px; height: 40px; z-index: 1; background-repeat: no-repeat; background-position: center; background-size: contain; }

.modal-alert.modal-headless .modal-panel::before,
.modal-confirm.modal-headless .modal-panel::before,
.modal-alert-info.modal-headless .modal-panel::before,
.modal-confirm-info.modal-headless .modal-panel::before { background-image: url("../../images/pd/pd/dirccar/icon-alert-info.png"); }
.modal-alert-error.modal-headless .modal-panel::before,
.modal-confirm-error.modal-headless .modal-panel::before { background-image: url("../../images/pd/pd/dirccar/icon-alert-error.png"); }
.modal-alert-warning.modal-headless .modal-panel::before,
.modal-confirm-warning.modal-headless .modal-panel::before { background-image: url("../../images/pd/pd/dirccar/icon-alert-warning.png"); }
.modal-alert-check.modal-headless .modal-panel::before,
.modal-confirm-check.modal-headless .modal-panel::before { background-image: url("../../images/pd/pd/dirccar/icon-alert-check.png"); }

.modal-alert-warning.modal-headless .modal-panel::after,
.modal-confirm-warning.modal-headless .modal-panel::after { top: -12px; left: 46px; width: 26px; height: 13px; background: none; background-image: url("../../images/pd/pd/dirccar/icon-alert-warning-bg.png"); background-repeat: no-repeat; background-position: center; background-size: contain; border-radius: 0; }

.modal-alert-warning.modal-headless .modal-panel::before,
.modal-confirm-warning.modal-headless .modal-panel::before { top: -5px; }

.modal-confirm .modal-footer { gap: 10px !important; }
.modal-confirm .modal-footer .btn { flex: 1; }

.modal-alert .modal-body-inner,
.modal-confirm .modal-body-inner { align-items: center; justify-content: center; }

.modal-alert .modal-body-inner > p { margin: 0; }
.modal-alert .alert-note { font-weight: 400; color: var(--color-text-muted); }

.modal-alert .bullet-list { align-self: stretch; text-align: left; font-weight: 400; }

.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 24px 32px 23px; border-bottom: 1px solid var(--color-border); }

.modal-alert .modal-header,
.modal-confirm .modal-header { padding: 23px 32px; }

.modal-title { margin: 2px 0; font-size: var(--fs-xl); font-weight: 700; color: var(--color-text); line-height: var(--lh-xl); flex: 1; }

.modal-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background-color: transparent; background-image: url("../../images/pd/pd/dirccar/icon-modal-close.png"); background-repeat: no-repeat; background-position: center; background-size: contain; font-size: 0; color: transparent; flex-shrink: 0; transition: background-color var(--duration) var(--ease-out); }

.modal-header-actions { display: flex; align-items: center; gap: 32px; flex-shrink: 0; }

.btn-download { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background-color: transparent; background-image: url("../../images/pd/pd/dirccar/icon-download.png"); background-repeat: no-repeat; background-position: center; background-size: contain; font-size: 0; color: transparent; flex-shrink: 0; cursor: pointer; transition: background-color var(--duration) var(--ease-out); }
.btn-download:hover { background-color: var(--color-surface-subtle); }
.btn-download:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

.modal-doc .modal-panel,
.modal-xl .modal-panel { height: min(900px, calc(100vh - 120px)); max-height: calc(100vh - 120px); }

.doc-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1 1 auto; min-height: min(660px, calc(100vh - 360px)); background: var(--color-surface-muted); color: var(--color-text-secondary); font-size: var(--fs-base); font-weight: 700; border-radius: 4px; }

.modal-body { padding: 0 8px 0 32px; overflow: auto; flex: 1 1 auto; font-size: var(--fs-base); line-height: 1.65; color: var(--color-text); }

.modal-body-pad-narrow { padding-left: 17px; padding-right: 17px; }
.modal-body-pad-narrow > .modal-body-inner { padding-right: 0; scrollbar-gutter: auto; /* stable 예약 해제 — 컨텐츠 폭 줄어들어 정렬 어긋나는 문제 회피 */ }

.modal-body:has(> .modal-body-inner) { overflow: hidden; display: flex; flex-direction: column; }

.modal-body-inner { flex: 1 1 auto; overflow: auto; padding-top:24px; padding-right: 20px; 
 padding-bottom: 32px; 
 scrollbar-gutter: stable; display: flex; flex-direction: column; gap: 24px; }
 .modal-body-inner.modal-fsd-check {min-height:384px;}

.modal-body-inner > .tabs { flex-shrink: 0; }
.modal-body-inner .modal-section-paragraph {font-size:14px;margin-bottom:4px;}
.modal-body-inner .modal-content {display:flex;flex-direction:column;gap:24px;}
.modal-body-inner .modal-content.min-h-lg {min-height:min(716px, calc(100vh - 360px));}
.modal-body-inner .modal-content.min-h-sm {min-height:384px;}
.modal-body-inner .modal-content.verify {min-height:280px}
.modal-body-inner .modal-content.account {min-height:700px}
.modal-body-inner .modal-tab-panels {height:max(539px, calc(100vh - 440px))}

.modal-panel:not(:has(> .modal-footer)) > .modal-body { padding-bottom: 0; }
.modal-panel:not(:has(> .modal-footer)) > .modal-body > .modal-body-inner { padding-bottom:40px;}
.modal-body-inner::-webkit-scrollbar { width: var(--scrollbar-size); }
.modal-body-inner::-webkit-scrollbar-track { background: transparent; }
.modal-body-inner::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }
.modal-body-inner::-webkit-scrollbar-button:vertical:start:decrement,
.modal-body-inner::-webkit-scrollbar-button:vertical:start:increment{display:block;height:12px}
.modal-body-inner::-webkit-scrollbar-button:vertical:end:decrement{display:block;height:24px}
.modal-panel:not(:has(> .modal-footer)) > .modal-body > .modal-body-inner::-webkit-scrollbar-button:vertical:end:decrement {height:40px;}

.item-group { display: flex; flex-direction: column; gap: 16px; }
.item-group > * { margin: 0; }

.section-break { margin-top: 16px; }

.modal-body-inner.scroll-box { margin-right: -8px; padding-right: 16px; max-height: 496px; }
.modal-body::-webkit-scrollbar { width: var(--scrollbar-size); }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }

.modal-coverage .modal-info-box { height: 84px; }

.modal-panel > .modal-body:first-child { padding-top: 24px; }

.modal-footer { display: flex; gap: 16px; padding: 24px 32px; background: var(--color-surface); flex-shrink: 0;}
.modal-footer .btn {flex:1;}
.modal:not(.modal-alert):not(.modal-confirm) .modal-footer .btn {height:56px;font-size:var(--fs-md);line-height:var(--lh-md);}
.modal-footer .modal-footer-inner {display:flex;gap:16px;width:100%;}
.modal-footer .modal-footer-inner .btn:only-child,
.modal-footer .modal-footer-inner:has(.btn-primary.hide) .btn-secondary,
.modal-footer .modal-footer-inner:has(.btn-primary.ng-hide) .btn-secondary {color:var(--color-text-on-brand);background-color:var(--color-brand);border:0;}

.modal-footer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.modal-footer-split > .btn { width: 100%; }

.modal-footer-cta { justify-content: center; gap: 16px; }
.modal-footer-cta > .btn { width: 240px; height: 56px; border-radius: 8px; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; }

.modal-lead-bold { margin: 0 0 8px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }

.modal-case-list { margin: 0; padding-left: 20px; list-style: decimal; }
.modal-case-list > li { margin: 0; padding-left: 4px; }
.modal-case-list > li + li { margin-top: 8px; }
.modal-case-list > li::marker { font-weight: 700; color: var(--color-text); }
.modal-case-list > li > strong { display: block; margin-bottom: 4px; font-size: var(--fs-base); font-weight: 700; color: var(--color-text); }
.modal-case-list > li > p { margin: 0; color: var(--color-text); }

.modal-confirm-statement { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }

.modal-divider { margin: 24px 0; height: 1px; flex-shrink: 0; background: var(--color-border); border: 0; }

.modal-body-inner > .modal-divider { margin: 0; }
.modal-body-inner > .modal-lead-bold { margin-bottom: 0; }

.modal-omit-block { display: flex; flex-direction: column; gap: 12px; background: var(--color-surface-info); border-radius: var(--radius-md); padding: 16px 24px; }
.modal-omit-block > h3,
.modal-omit-block > .modal-section-title { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.modal-omit-note { margin: 0; text-align: center; color: var(--color-brand); font-weight: 700; padding: 8px 0; }

.modal-consent-prompt { flex-shrink: 0; margin: 0; padding: 24px 32px 0; border-top: 1px solid var(--color-border); background: var(--color-surface); text-align: center; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }

.modal-consent-prompt.no-line { padding-top: 0; border-top: 0; }

@media (prefers-reduced-motion: reduce) { .modal, .modal[open], .modal[open] .modal-panel, .modal::backdrop { animation: none; transition: none; } }

/* ========================================================================
 * Tooltip
 * ======================================================================*/
.tooltip { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }

.icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain; border: 0; vertical-align: middle; font-size: 0; color: transparent; flex-shrink:0;}
.icon:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; border-radius: 4px; }

.btn .icon { flex-shrink: 0; }

.icon-16 { width: 16px; height: 16px; } 
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-40 { width: 40px; height: 40px; }
.icon-56 { width: 56px; height: 56px; }
.icon-60 { width: 60px; height: 60px; }
.icon-64 { width: 64px; height: 64px; }
.icon-70 { width: 70px; height: 70px; }
.icon-80 { width: 80px; height: 80px; }
.icon-140 { width: 140px; height: 140px; }
.icon-160 { width: 160px; height: 160px; }

.icon-tooltip { background-image: url("../../images/pd/pd/dirccar/icon-tooltip.png"); }
.icon-info { background-image: url("../../images/pd/pd/dirccar/icon-info.png"); }
.icon-search { background-image: url("../../images/pd/pd/dirccar/icon-search.png"); }
.icon-tooltip-mint { background-image: url("../../images/pd/pd/dirccar/icon-tooltip-mint.png"); position: relative; }
.icon-tooltip-mint::after { content: ""; position: absolute; inset: -12px; }
.icon-arrow-down { background-image: url("../../images/pd/pd/dirccar/icon-arrow-down.png"); }
.icon-arrow-right { background-image: url("../../images/pd/pd/dirccar/icon-arrow-right-16.png"); }
.icon-arrow-right-20 { background-image: url("../../images/pd/pd/dirccar/icon-arrow-right-20.png"); }
.icon-verify-naver { background-image: url("../../images/pd/pd/dirccar/icon-verify-naver.png"); }
.icon-verify-kakao { background-image: url("../../images/pd/pd/dirccar/icon-verify-kakao.png"); }
.icon-verify-toss { background-image: url("../../images/pd/pd/dirccar/icon-verify-toss.png"); } 
.icon-verify-phone { background-image: url("../../images/pd/pd/dirccar/icon-verify-phone.png"); }
.icon-verify-cert { background-image: url("../../images/pd/pd/dirccar/icon-verify-cert.png"); }
.icon-phone { background-image: url("../../images/pd/pd/dirccar/icon-phone.png"); }
.icon-verify-card { background-image: url("../../images/pd/pd/dirccar/icon-verify-card.png"); }
.icon-currency { background-image: url("../../images/pd/pd/dirccar/icon-currency.png"); }
.icon-receipt { background-image: url("../../images/pd/pd/dirccar/icon-receipt.png"); }
.icon-save { background-image: url("../../images/pd/pd/dirccar/icon-save.png"); }
.icon-picture-add { background-image: url("../../images/pd/pd/dirccar/icon-picture-add.png"); }
.icon-print { background-image: url("../../images/pd/pd/dirccar/icon-print.png"); }
.icon-mouse { width:24px;height:24px;background-image: url("../../images/pd/pd/dirccar/icon-mouse.png");background-size:16px 16px;}

/* 단일 베이스 이미지 + background-size:contain 으로 .icon-64/80/140 박스에 맞춰 스케일 */
.icon-blackbox { background-image: url("../../images/pd/pd/dirccar/icon-blackbox.png"); }
.icon-fcw { background-image: url("../../images/pd/pd/dirccar/icon-fcw.png"); }
.icon-ldws { background-image: url("../../images/pd/pd/dirccar/icon-ldws.png"); }
.icon-bsd { background-image: url("../../images/pd/pd/dirccar/icon-bsd.png"); }
.icon-avm { background-image: url("../../images/pd/pd/dirccar/icon-avm.png"); }
.icon-hud { background-image: url("../../images/pd/pd/dirccar/icon-hud.png"); }
.icon-mileage { background-image: url("../../images/pd/pd/dirccar/icon-mileage.png"); }
.icon-ubi { background-image: url("../../images/pd/pd/dirccar/icon-ubi.png"); }
.icon-child { background-image: url("../../images/pd/pd/dirccar/icon-child.png"); }
.icon-five-day { background-image: url("../../images/pd/pd/dirccar/icon-five-day.png"); }
.icon-senior { background-image: url("../../images/pd/pd/dirccar/icon-senior.png"); }
.icon-disabled { background-image: url("../../images/pd/pd/dirccar/icon-disabled.png"); }

.tooltip-content { position: absolute; bottom: calc(100% + 10px); left: 50%; z-index: 50; width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 10px; background: var(--color-surface-dark); color: var(--color-text-on-brand); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; text-align: left; white-space: normal; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(4px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), visibility 0s linear var(--duration); }
.tooltip-content::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--color-surface-dark); }
.icon-tooltip:hover ~ .tooltip-content,
.icon-tooltip:focus-visible ~ .tooltip-content,
.tooltip[data-tooltip-open] .tooltip-content { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.tooltip-info .tooltip-content { background: var(--color-info-strong); left: 0; transform: translateX(0) translateY(4px); }
.tooltip-info .tooltip-content::after { top: 100%; left: 14px; transform: none; border: 0; width: 14px; height: 14px; background: var(--color-info-strong); clip-path: polygon(0 0, 100% 0, 0 100%); }
.tooltip-info .icon-tooltip:hover ~ .tooltip-content,
.tooltip-info .icon-tooltip:focus-visible ~ .tooltip-content,
.tooltip-info[data-tooltip-open] .tooltip-content { transform: translateX(0) translateY(0); }

/* ========================================================================
 * Header
 * ======================================================================*/
.header { position: sticky; top: 0; z-index: 200; background: var(--color-brand); color: var(--color-text-on-brand); font-size: var(--fs-md); }
.header .container { display: flex; align-items: center; justify-content: space-between; height: 60px;}
.header .header-brand { margin: 0; display: inline-flex; align-items: center; }
.header .header-logo { display: inline-block; width: 160px; height: 30px; background: url("../../images/pd/pd/dirccar/logo-meritz.png") no-repeat center / contain; text-decoration: none; }
.header .header-logo:focus-visible { outline-color: rgba(255, 255, 255, 0.8); }
.header .header-meta { font-weight: 700; }

/* ========================================================================
 * Footer
 * ======================================================================*/
.footer { background: var(--color-info-soft); color: var(--color-text); padding: 32px 0 40px; font-size: var(--fs-14); line-height: var(--lh-14); margin-top: 0; }
.footer .container { padding-left: 0; padding-right: 0; }
.footer-grid { display: flex; align-items: flex-start; justify-content: space-between; }
.footer-info { display: flex; flex-direction: column; }
.footer-brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-bottom: 16px; }
.footer-brand-row > :not(:first-child) { position: relative; padding-left: 16px; }
.footer-brand-row > :not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: var(--color-text); }
.footer-brand,
.footer-meta,
.footer-address { color: var(--color-text); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 400; }
.footer-address { margin: 0 0 16px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 9px; font-size: var(--fs-14); line-height: var(--lh-14); }
.footer-links li { position: relative; }
.footer-links li:not(:first-child) { padding-left: 9px; }
.footer-links li:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: var(--color-text); }
.footer-links a { color: var(--color-text); font-weight: 700; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-copy { margin: 24px 0 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); font-weight: 400; }
.footer-copy-row { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.footer-copy-row .footer-copy { margin: 0; }
.footer-badges { display: flex; align-items: center; gap: 8px; }
.footer-btn-security { display: inline-flex; align-items: center; justify-content: center; width:113px; height: 34px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: 8px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); background: var(--color-surface); white-space: nowrap; }
.footer-badge { display: block; height: 30px; width: 30px; overflow:hidden;}
.footer-badge-wa { display: block;width: 30px;height: 22px; overflow:hidden;}
.footer-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 0 0 auto; }
.footer-contacts-row { display: flex; align-items: flex-start; gap: 40px; }
.footer-col { margin: 0; }
.footer-col-title { color: var(--color-text); font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 700; margin: 0 0 16px; }
.footer-col-num { color: var(--color-text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; letter-spacing: 0; margin: 0 0 8px; }
.footer-col-desc { margin: 0; color: var(--color-text-subtle); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; }
.footer-col-desc + .footer-col-desc { margin-top: 16px; }
.footer-col-list { margin: 0; }
.footer-col-row { display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 0; align-items: baseline; justify-content: start; }
.footer-col-row .footer-col-title { grid-column: 1 / -1; margin: 0 0 16px; }
.footer-col-row .footer-col-num { margin: 0; }
.footer-col-row .footer-col-desc { margin: 8px 0 0; }
.footer-btn-ars { display: inline-flex; align-items: center; gap: 4px; width:95px; height: 34px; padding: 4px 7px; border: 1px solid var(--color-border); border-radius: 8px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); background: var(--color-surface); white-space: nowrap; cursor: pointer; }

/* ========================================================================
 * Modal — content helpers (consent forms, terms, structured info)
 * ======================================================================*/

.modal-lead-group { display: flex; flex-direction: column; gap: 16px; }
.modal-lead { margin: 0; font-weight: 700; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-base); }
.modal-lead-lg { margin: 0; font-weight: 700; color: var(--color-text); font-size: var(--fs-md); line-height: var(--lh-md); }
.modal-lead-note { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-14); line-height: var(--lh-14); }

.sub-text { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); font-weight: 400; }

.modal-sections { display: flex; flex-direction: column; gap: 24px; list-style: none; counter-reset: msec; padding-left: 0; margin: 0; }
.modal-sections > li { counter-increment: msec; position: relative; padding-left: 20px; }
.modal-sections > li::before { content: counter(msec) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--color-text); font-size: var(--fs-base); line-height: var(--lh-base); }

.modal-sections.modal-sections-plain > li,
.modal-sections.modal-sections-plain > .modal-section { padding-left: 0; }
.modal-sections.modal-sections-plain > li::before { content: none; }

.bullet-list > li > .sub-text { margin-top: 6px; }

.modal-section { display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); }
.modal-section > .modal-section-title,
.modal-section > .form-label,
.modal-section > .form-label.form-label-lg { margin: 0; }
.modal-section.modal-section-tight { gap: 4px; }
.modal-section.modal-section-lg { font-size: var(--fs-base); line-height: var(--lh-base); }
.modal-section-group { display: flex; flex-direction: column; gap: 8px; }
.modal-policy:has(.step-section) {gap:24px;}
.step-section + .step-section {padding-top:24px;}

.section-group-sm { display:flex; flex-direction: column; gap: 4px; }
.section-group-md { display:flex; flex-direction: column; gap: 16px; }
.section-group-lg { display:flex; flex-direction: column; gap: 32px; }
.section-group-lg .section-item { display:flex; flex-direction: column; gap: 24px; }

.sub-inner-list { list-style: none; margin: 0; padding: 0 30px 0 4px; font-size: var(--fs-14); line-height: var(--lh-14); }
.sub-inner-list > li + li { margin-top: 4px; }

.sub-inner-list.sub-inner-list-padded { padding: 0 19px 0 13px; }
.bullet-list > li > .sub-inner-list { margin-top: 4px; }
.modal-section-title { display: block; width: 100%; margin: 0; font-size: var(--fs-base); font-weight: 700; color: var(--color-text); line-height: var(--lh-base); }
.modal-section-title.modal-section-title-md { font-size: var(--fs-md); line-height: var(--lh-md); }
.modal-section-title.modal-section-title-lg { font-size: 22px; line-height: 26px; }
.modal-section-title-msg { font-size:var(--fs-lg);line-height:var(--lh-lg);font-weight:500;letter-spacing:0;}

.modal-subsection-title { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
button.modal-subsection-title { display:inline-flex;width:auto;padding: 0; background: transparent; border: 0; text-align: left; cursor: pointer; }
button.modal-subsection-title:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; border-radius: 4px; }
.modal-subsection-title .chevron { display: inline-block; width: 20px; height: 20px; background: url("../../images/pd/pd/dirccar/icon-arrow-chevron.png") no-repeat center / contain; font-size: 0; color: transparent; flex-shrink: 0; }
.modal-section-title-meta { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-muted); }
.modal-section-note { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 400; color: var(--color-text); }
.modal-section-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.modal-section-row > .modal-section-title { margin-bottom: 0; }
.modal-section-head-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; }
.modal-section-head-stack > .modal-section-title { margin: 0; }
.modal-section-row:has(.modal-section-icon) { position: relative; align-items: flex-start; padding-right: 156px; min-height: 68px; margin-bottom: 0; }
.modal-section-icon { position: absolute; top: -24px; right: 0; }
.modal-section-icon.icon-140.icon-five-day {top:-34px;}

button.modal-section-title { padding: 0; margin-bottom: 0; background: transparent; border: 0; text-align: left; cursor: pointer; }
button.modal-section-title:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; border-radius: 4px; }
.modal-section-title .chevron {
 display: inline-block; width: 20px; height: 20px; margin-left: 8px; vertical-align: middle; background: url("../../images/pd/pd/dirccar/icon-arrow-chevron.png") no-repeat center / contain; font-size: 0; color: transparent; }


.modal-section-title.has-arrow {display:inline-flex;width:auto;align-items:center;font-size:var(--fs-md);line-height:var(--lh-md);}
.modal-section-title.has-arrow::after { content: ""; display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-left: 8px; background: url("../../images/pd/pd/dirccar/icon-arrow-chevron.png") no-repeat center / 20px 20px; }

.modal-info-box { border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-surface); padding: 24px 16px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--color-text-muted); margin: 40px 0 0; }
.modal-info-box.section-break { margin-top: 16px; }
.modal-info-box .bullet-list { color: var(--color-text); }
.modal-info-box .bullet-list > li + li { margin-top: 16px; }
.modal-info-box .bullet-list.bullet-list-tight > li + li { margin-top: 8px; }

.terms-box { display: flex; flex-direction: column; border: 1px solid var(--color-border-soft); border-radius: 8px; background: var(--color-surface); padding:0 8px 0 0; font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 400; color: var(--color-text-muted); }
.terms-box-sm { height: 88px; }
.terms-box-md { height: 160px; }
.terms-box-lg { height: 162px; }

.terms-box-inner { flex: 1; min-height: 0; overflow-y: auto;padding:16px 8px 16px 16px;font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--color-text-muted); }
.terms-box-inner * { color: inherit; }
.terms-box-inner::-webkit-scrollbar { width: var(--scrollbar-size); }
.terms-box-inner::-webkit-scrollbar-track { background: transparent; }
.terms-box-inner::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }
.terms-box-inner::-webkit-scrollbar-button:vertical:start:decrement,
.terms-box-inner::-webkit-scrollbar-button:vertical:start:increment{display:block;height:8px}
.terms-box-inner::-webkit-scrollbar-button:vertical:end:decrement{display:block;height:16px}

.terms-box ol { list-style: decimal; margin: 0; padding-left: 20px; }
.terms-box ol > li + li { margin-top: 8px; }
.terms-box ul { margin: 4px 0 0; padding-left: 16px; color: var(--color-text-muted); }
.terms-box .bullet-list { font-size: inherit; line-height: inherit; }
.terms-box-inner .terms-section-title { margin-block: 16px; }
.terms-box-inner .terms-section-title:first-child { margin-top: 0; }
.modal-body .terms-box-inner .list-decimal { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.modal-body .terms-box-inner .list-decimal > li + li { margin-top: 8px; }
.terms-box-inner .sub-text { margin-top: 4px; }
.terms-box-inner .modal-subsection-title { margin-top: 16px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight:400; }
.terms-box-inner .legal-note-strong { color: inherit; }

.bullet-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.bullet-list.bullet-list-md { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); }
.bullet-list.bullet-list-md > li + li { margin-top: 24px; }
.bullet-list.bullet-list-lg { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.bullet-list.bullet-list-lg > li { padding-left: 9px; }
.bullet-list.bullet-list-lg > li::before { width: 3px; height: 3px; left: 0; background: var(--color-text); }
.bullet-list.bullet-list-lg > li + li { margin-top: 24px; }
.bullet-list.bullet-list-lg > li .sub-text { font-size: var(--fs-base); line-height: var(--lh-base); margin: 8px 0 0 4px; }
.notice-info .bullet-list.bullet-list-md > li + li { margin-top: 10px; }
.bullet-list > li { position: relative; padding-left: 12px; }
.bullet-list > li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 2px; height: 2px; background: var(--color-text-muted); }
.bullet-list > li + li { margin-top: 4px; }
.bullet-list.bullet-list-strong > li { padding-left: 14px; }
.bullet-list.bullet-list-strong > li::before { width: 4px; height: 4px; background: var(--color-text); }
.bullet-list.bullet-list-spaced > li + li { margin-top: 16px; }
.bullet-list.spaced-8 > li + li { margin-top: 8px; }
.bullet-list.spaced-4 > li + li { margin-top: 4px !important; }
.bullet-list.fw-m { font-weight: 500; }
.bullet-list.fc-base {color:var(--color-text);}
.bullet-list > li.no-bullet {padding-left:2px;gap:4px;}
.bullet-list > li.no-bullet::before {content:none;}
.bullet-list > li.no-bullet p + p {margin-top:4px;}

.grid-data { display: grid; grid-template-columns: max-content 1fr; column-gap: var(--space-1); row-gap: var(--space-1); margin: 4px 0; }
.grid-data dt { color: var(--color-text); }
.grid-data dd { margin: 0; color: var(--color-text); }

.inner-box {padding:16px 16px 0;}
.inner-box .legal-link-row {margin-top:24px;}

/* modal-legal-note */
.modal-legal-note { margin: 12px 0 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.modal-legal-note > dt { font-weight: 500; color: var(--color-text); }
.modal-legal-note > dd { margin: 4px 0 0 16px; font-weight: 400; color: var(--color-text); }

.circled-list { list-style: none; margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-14); line-height: var(--lh-14); }
.circled-list > li { text-indent: -16px; }
.circled-list > li + li { margin-top: 4px; }

.consent-group { border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.consent-group-master { display: flex; align-items: center; gap: 8px; height: 80px; padding: 14px 20px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); cursor: pointer; }
.consent-group-body { padding: 16px 24px 24px 52px; display: grid; gap: 8px; }
.consent-group:not(:has(.consent-group-master)) .consent-group-body { padding: 16px 24px 24px; }
.consent-group-body.padded {padding:24px 40px !important;}
.consent-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 0 24px 0 16px; height: 40px; border: 0; border-radius: 8px; background: var(--color-surface); font-size: var(--fs-14); line-height: var(--lh-14); }
.consent-row.bg-subtle { background: var(--color-card-lavender); }
.consent-row.consent-row-end { display: flex; justify-content: flex-end; align-items: center; }
.consent-rows { display: flex; flex-direction: column; gap: 8px; }
.consent-row-label { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; text-align: left; color: var(--color-text-tertiary); font-weight: 400; }
.consent-row-label:hover { color: var(--color-text); }
.consent-row-label:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.modal-cta-full { width: 100%; height: 56px; border-radius: 8px; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; padding: 0; }
.modal-notice-box { padding: 16px; background: var(--color-surface-muted); border-radius: 8px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--color-text-tertiary); }
.modal-guide-box { padding: 16px 20px; background: var(--color-surface-tonal); border-radius: 8px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.modal-guide-box > * { margin: 0; }
.modal-guide-box-title { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--color-text-secondary); }
.modal-guide-box p { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); }
.modal-guide-box .legal-note { margin-top: 8px; color: var(--color-text-muted); }
.modal-notice-box ul { margin: 0; padding-left: 0; }
.consent-row-options { display: flex; align-items: center; gap: 32px; }
.consent-row-options > .radio { font-size: var(--fs-14); line-height: var(--lh-14); min-width: 69px; }
.consent-row-options > .radio:last-of-type { width: 81px; } 

.radio,
.checkbox { display: inline-flex; align-items: center; gap: 8px; height: 32px; cursor: pointer; font-size: var(--fs-base); color: var(--color-text); user-select: none; }
.checkbox.checkbox-sm { height: 20px; color:var(--color-text-tertiary);}
.checkbox.checkbox-sm:has(input:checked) { color:var(--color-text); }

.radio input[type="radio"],
.checkbox input[type="checkbox"],
.choice-card input[type="radio"],
.choice-card input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; 
 border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }

.radio input[type="radio"]:hover:not(:disabled),
.checkbox input[type="checkbox"]:hover:not(:disabled),
.choice-card input[type="radio"]:hover:not(:disabled),
.choice-card input[type="checkbox"]:hover:not(:disabled) { border-color: var(--color-brand); }
.radio input[type="radio"]:focus-visible,
.checkbox input[type="checkbox"]:focus-visible,
.choice-card input:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

.radio input[type="radio"],
.choice-card input[type="radio"] { width: 20px; height: 20px; border-radius: 50%; }
.radio input[type="radio"]:checked,
.choice-card input[type="radio"]:checked { border-color: var(--color-brand);
 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23ef3b24'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-origin: border-box; }

.checkbox input[type="checkbox"],
.choice-card input[type="checkbox"] { width: 20px; height: 20px; border-radius: var(--radius-xs); }
.checkbox input[type="checkbox"]:checked,
.choice-card input[type="checkbox"]:checked { border-color: var(--color-brand); background-color: var(--color-brand); background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1996 0.599609L3.04009 7.79961L0.599609 5.34533' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: 11px 9px; }

.checkbox input[type="checkbox"]:indeterminate,
.choice-card input[type="checkbox"]:indeterminate { border-color: var(--color-brand); background-color: var(--color-brand); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 2' fill='none'%3E%3Cpath d='M1 1L11 1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 14px 2px; }

.radio input[type="radio"]:disabled,
.checkbox input[type="checkbox"]:disabled,
.choice-card input:disabled { cursor: not-allowed; border-color: var(--color-border); background-color: var(--color-surface-subtle); }

.checkbox input[type="checkbox"]:disabled:checked,
.choice-card input[type="checkbox"]:disabled:checked { border-color: var(--color-border); background-color: var(--color-surface-subtle); background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1 0.5L2.94048 7.7L0.5 5.24572' stroke='%23666666' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-size: 11px 9px;  }

.checkbox input[type="checkbox"]:disabled:indeterminate,
.choice-card input[type="checkbox"]:disabled:indeterminate { border-color: var(--color-border); background-color: var(--color-surface-subtle); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 2' fill='none'%3E%3Cpath d='M1 1L11 1' stroke='%23cccccc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

.radio input[type="radio"]:disabled:checked,
.choice-card input[type="radio"]:disabled:checked { border-color: var(--color-border);
 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4' fill='%23cccccc'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; background-origin: border-box; }

.radio:has(input:disabled),
.checkbox:has(input:disabled) { cursor: not-allowed; color: var(--color-border-soft); }

.radio.is-hover input[type="radio"]:not(:disabled) { border-color: var(--color-brand); }
.radio.is-focus input[type="radio"],
.checkbox.is-focus input[type="checkbox"] { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; border-color: var(--color-brand); }

.radio input[type="radio"]:focus-visible,
.checkbox input[type="checkbox"]:focus-visible { border-color: var(--color-brand); }

.radio.is-error,
.checkbox.is-error { color: var(--color-danger); }
.radio.is-error input[type="radio"]:not(:checked),
.checkbox.is-error input[type="checkbox"]:not(:checked):not(:indeterminate) { border-color: var(--color-danger); }
.radio.is-error input[type="radio"]:not(:checked):hover,
.checkbox.is-error input[type="checkbox"]:not(:checked):not(:indeterminate):hover { border-color: var(--color-danger); }

.radio-group,
.checkbox-group { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.radio-group.column,
.checkbox-group.column { flex-direction: column; align-items: flex-start; gap: 8px; }

/* ========================================================================
 * Toggle Switch
 * ======================================================================*/
.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; font-size: var(--fs-base); color: var(--color-text); }
.switch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.switch-track { position: relative; display: inline-block; width: 44px; height: 24px; background: var(--color-border); border-radius: 999px; transition: background-color var(--duration) var(--ease-out); flex-shrink: 0; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--color-surface); border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); transition: left var(--duration) var(--ease-out); }
.switch-input:checked ~ .switch-track { background: var(--color-brand); }
.switch-input:checked ~ .switch-track .switch-thumb { left: 23px; }
.switch:hover .switch-input:checked:not(:disabled) ~ .switch-track { background: var(--color-brand-hover); }
.switch-input:focus-visible ~ .switch-track { box-shadow: 0 0 0 4px var(--color-brand-ring); }
.switch-input:disabled ~ .switch-track { background: var(--color-divider); cursor: not-allowed; }
.switch:has(.switch-input:disabled) { cursor: not-allowed; color: var(--color-text-subtle); }

.switch.is-on .switch-track { background: var(--color-brand); }
.switch.is-on .switch-thumb { left: 23px; }

/* ========================================================================
 * Segmented Radio — radio input 을 탭 스타일로 표현
 * ======================================================================*/
.segmented-radio { display: inline-flex; align-items: stretch; }
.segmented-radio-option { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; 
 width: 132px; height: 56px; font-size: var(--fs-base); color: var(--color-text); cursor: pointer; user-select: none; 
 border: 1px solid transparent; border-radius: var(--radius-md); transition: border-color var(--duration) var(--ease-out); }

.segmented-radio-option > input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented-radio-option:has(input:checked) { border-color: var(--color-text); font-weight: 600; }
.segmented-radio-option:has(input:focus-visible) { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.segmented-radio-option:has(input:disabled) { color: var(--color-text-subtle); cursor: not-allowed; }
.segmented-radio-option:has(input:disabled) > input { cursor: not-allowed; }

.segmented-radio-option + .segmented-radio-option::before { content: ""; position: absolute; top: 30%; bottom: 30%; left: -1px; width: 1px; background: var(--color-border); }
.segmented-radio-option:has(input:checked) + .segmented-radio-option::before,
.segmented-radio-option:has(input:checked)::before { display: none; }

/* ========================================================================
 * Select (네이티브 <select> 스타일링) + Dropdown (커스텀 button + ul)
 * ======================================================================*/

.select { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; width: auto; height: var(--field-height-md); padding: 0 32px 0 var(--field-pad-x-md); background-color: var(--field-bg); border: var(--field-border) solid var(--field-border-color); border-radius: var(--field-radius); font: inherit; font-size: var(--fs-base); color: var(--field-text); cursor: pointer; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; transition: border-color var(--duration) var(--ease-out); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select:hover { border-color: var(--field-border-hover); }
.select:focus,
.select.is-focus { outline: 2px solid var(--color-brand-ring); outline-offset: 0; border-color: var(--field-border-focus); }
.select:disabled,
.select.is-disabled { background-color: var(--field-bg-disabled); cursor: not-allowed; color: var(--color-text-muted); }
.select.is-error { border-color: var(--field-border-error); }
.select.is-error:focus,
.select.is-error.is-focus { border-color: var(--field-border-error); outline-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }
.select[readonly],
.select.is-readonly { background-color: var(--color-surface-subtle); cursor: default; pointer-events: none; }
.select-sm { height: var(--field-height-sm); padding-left: var(--field-pad-x-sm); font-size: var(--fs-sm); }
.select-md { height: var(--field-height-md); padding-left: var(--field-pad-x-md); font-size: var(--fs-base); }
.select-lg { height: var(--field-height-lg); padding-left: var(--field-pad-x-lg); font-size: var(--fs-md); }

.dropdown { position: relative; display: inline-block; }
.dropdown.dropdown-sm { width: 200px; }
.dropdown.dropdown-md { width: 250px; }
.dropdown.dropdown-lg { width: 400px; }
.dropdown-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 54px; min-width: 160px; padding: 0 var(--field-pad-x-md); background: var(--field-bg); border: var(--field-border) solid var(--field-border-color); border-radius: var(--field-radius); font-size: var(--fs-base); color: var(--field-text); cursor: pointer; text-align: left; transition: border-color var(--duration) var(--ease-out); }

.dropdown-toggle-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--field-placeholder); }
.dropdown:has(.dropdown-item.is-active) .dropdown-toggle-label,
.dropdown .dropdown-toggle.is-active .dropdown-toggle-label { color: var(--field-text); font-weight: 700; }
.dropdown-toggle:hover { border-color: var(--field-border-hover); }

.dropdown-toggle:focus,
.dropdown-toggle:focus-visible,
.dropdown-toggle.is-focus { outline: none; border-color: var(--field-border-focus); }
.dropdown-toggle[aria-expanded="true"] { border-color: var(--field-border-focus); border-bottom-color: transparent; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dropdown:has(.dropdown-toggle[aria-expanded="true"]) {box-shadow: var(--shadow-dropdown);}
.dropdown.is-error .dropdown-toggle,
.dropdown-toggle.is-error { border-color: var(--field-border-error); }
.dropdown.is-error .dropdown-toggle:focus-visible,
.dropdown.is-error .dropdown-toggle[aria-expanded="true"],
.dropdown-toggle.is-error:focus-visible { border-color: var(--field-border-error); box-shadow: 0 0 0 3px var(--color-danger-soft); }
.dropdown.is-disabled .dropdown-toggle,
.dropdown-toggle:disabled,
.dropdown-toggle.is-disabled { background-color: var(--field-bg-disabled); color: var(--color-text-subtle); cursor: not-allowed; pointer-events: none; }
.dropdown.is-readonly .dropdown-toggle,
.dropdown-toggle.is-readonly { background-color: var(--color-surface-subtle); cursor: default; pointer-events: none; }

.dropdown-chevron { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; background: url("../../images/pd/pd/dirccar/icon-arrow-down.png") no-repeat center / 24px 24px; font-size: 0; color: transparent; transform: rotate(0deg); transition: transform 250ms var(--ease-out); }
.dropdown-toggle[aria-expanded="true"] .dropdown-chevron { transform: rotate(180deg); }
.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 100%; max-height: 280px; 
 overflow-y: auto; margin: -1px 0 0; padding: 0; background: var(--color-surface); border: 1px solid var(--field-border-focus); border-top: 0; overflow: hidden auto;
 border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-dropdown); z-index: 100; scrollbar-gutter: auto;  }

.dropdown-menu.dropdown-menu-4 { max-height: 216px; }

.dropdown-menu::-webkit-scrollbar { width: 14px; }

.dropdown-menu::-webkit-scrollbar-track { background: transparent; margin: 4px 0 var(--radius-md); }
.dropdown-menu::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 999px; border: 4px solid transparent; background-clip: padding-box; }
.dropdown-item { padding: 17px 12px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); cursor: pointer; user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.is-active { background: var(--color-surface-subtle); }

.field-help.is-error { color: var(--color-danger); }

/* ============================================================================
 * Select + Input
 * ========================================================================= */
.select-input { position: relative; display: inline-flex; align-items: stretch; width: 100%; height: var(--field-height-md); background: var(--field-bg); border: var(--field-border) solid var(--field-border-color); border-radius: var(--field-radius); transition: border-color var(--duration) var(--ease-out); }
.select-input:hover { border-color: var(--field-border-hover); }
.select-input:focus-within,
.select-input.is-focus { outline: 2px solid var(--color-brand-ring); outline-offset: 0; border-color: var(--field-border-focus); }
.select-input-sm { height: var(--field-height-sm); }
.select-input-md { height: var(--field-height-md); }
.select-input-lg { height: var(--field-height-lg); }
.select-input-select { appearance: none; -webkit-appearance: none; flex: 0 0 134px; width: 134px; height: 100%; padding: 0 28px 0 var(--field-pad-x-md); background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.5L5 5L9 1.5' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; border: 0; border-radius: 0; font: inherit; font-size: var(--fs-sm); color: var(--field-text); cursor: pointer; outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-input-select:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: -2px; }
.select-input > .dropdown { flex: 0 0 134px; width: 134px; display: block; }
.select-input > .dropdown .dropdown-toggle { width: 100%; height: 100%; min-width: 0; padding: 0 28px 0 var(--field-pad-x-md); background: transparent; border: 0; border-radius: 0; font-size: var(--fs-sm); }
.select-input > .dropdown .dropdown-toggle:focus,
.select-input > .dropdown .dropdown-toggle:focus-visible { outline: none;  }
.select-input > .dropdown .dropdown-toggle[aria-expanded="true"] { background: transparent; }
.select-input-divider { flex: 0 0 1px; align-self: center; width: 1px; height: 60%; background: var(--color-border); }
.select-input-input { flex: 1 1 0; min-width: 0; height: 100%; padding: 0 var(--field-pad-x-md); background: transparent; border: 0; font: inherit; font-size: var(--fs-base); color: var(--field-text); outline: none; text-overflow: ellipsis; }
.select-input-input::placeholder { color: var(--field-placeholder); }
.select-input .field-clear { align-self: center; margin-right: 10px; }
.select-input:hover .field-clear,
.select-input:focus-within .field-clear { visibility: visible; }
.select-input.is-error { border-color: var(--field-border-error); }
.select-input.is-error:focus-within,
.select-input.is-error.is-focus { border-color: var(--field-border-error); outline-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }
.select-input.is-disabled,
.select-input:has(.select-input-select:disabled):has(.select-input-input:disabled) { background: var(--field-bg-disabled); cursor: not-allowed; }
.select-input.is-disabled .select-input-select,
.select-input.is-disabled .select-input-input,
.select-input.is-disabled .select-input-divider { color: var(--color-text-subtle); cursor: not-allowed; pointer-events: none; }
.select-input.is-disabled .select-input-divider { background: var(--color-border-strong); opacity: 0.5; }
.select-input.is-readonly { background: var(--color-surface-subtle); pointer-events: none; }

/* ========================================================================
 * Accordion — 네이티브(<details>/<summary>) + 커스텀(<button> + panel) 공용 스타일
* ========================================================================= */
.accordion { display: block; }
.accordion-item { 
 border: 1px solid var(--color-border-soft); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; 
 flex-shrink: 0; }

.accordion-flat { border: 0; border-bottom: 1px solid var(--color-border-dark); border-radius: 0; background: transparent; }
.accordion-flat[open] { border-bottom: 0; }
.accordion-flat[open] > .accordion-trigger { border-bottom: 1px solid var(--color-border-dark); }
.accordion-flat .accordion-trigger { height: 60px; padding: 0 16px; font-size : var(--fs-md); line-height: var(--lh-md); }
.accordion-flat .accordion-content { padding: 16px 0 24px; box-shadow: none; }
details.accordion-item[open].accordion-flat > .accordion-content { padding-bottom: 0; }

.accordion-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; 
 padding: 16px; background: transparent; border: 0; font: inherit; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); cursor: pointer; user-select: none; text-align: left; list-style: none; }
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: -2px; }
.accordion-trigger::after { content: ""; display: inline-block; flex-shrink: 0; margin-left: 12px; width: 24px; height: 24px; background: url("../../images/pd/pd/dirccar/icon-arrow-down.png") no-repeat center / 24px 24px; transform: rotate(0deg); transition: transform 250ms var(--ease-out); }

details.accordion-item[open] > .accordion-trigger::after,
.accordion-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }

.accordion-content { 
 height: 0; overflow: hidden; padding: 0 16px; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); transition: height 300ms var(--ease-out), padding-bottom 300ms var(--ease-out), padding-top 300ms var(--ease-out); }
details.accordion-item[open] > .accordion-content,
.accordion-trigger[aria-expanded="true"] + .accordion-content { height: auto; padding-bottom: 24px; }
.accordion-trigger[aria-expanded="false"] + .accordion-content { display: none; }

.accordion-content > .accordion-content-inner { padding-top: 16px; box-shadow: inset 0 1px 0 var(--color-border); }
.accordion-content-inner h4 { margin: 16px 0 8px; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 700; color: var(--color-text); }
.accordion-content-inner .bullet-list > li::before { background: var(--color-text-muted); }

/* ========================================================================
 * Progress Bar — 가로 진행 단계 표시기
 * ======================================================================*/
.progress-bar { display: flex; align-items: flex-start; list-style: none; margin: 0; padding: 0; gap: 32px; justify-content: center; }
.progress-bar .step { position: relative; flex: 0 0 182px; width: 182px; height: 55px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; white-space: nowrap; overflow: visible; 
 font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 400; color: var(--color-text-muted-2); }
.progress-bar .step::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--color-divider); margin-bottom: 16px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-on-brand); font-size: 14px; font-weight: 700; line-height: 1; }
.progress-bar .step:not(:last-child)::after { content: ""; position: absolute; top: 9.5px; 
 left: 50%; width: calc(100% + 40px); height: 1px; background: var(--color-divider); }
.progress-bar .step.is-active { color: var(--color-text); font-weight: 700; }
.progress-bar .step.is-active::before { background: var(--color-surface); border: 7px solid var(--color-brand); }
.progress-bar .step.is-done::before { background: var(--color-brand) url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.59961 0.599609L2.37913 5.59961L0.599609 3.89525' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center / 8px 7px; content: ""; }
.progress-bar .step.is-done::after { background: var(--color-brand); }

/* ========================================================================
 * Sidebar — 좌측 정보 패널 (입력값 진행 요약)
 * ======================================================================*/
.sidebar { position: sticky; top: 102px; align-self: start; width: 300px; min-height: 642px; padding: 24px; 
 border: 1px solid var(--color-border-warm); border-radius: 24px; background: var(--color-surface-warm); display: flex; flex-direction: column; }
.sidebar .info-box { list-style: none; margin: 0; padding: 0 6px 0 0; display: grid; gap: 16px; align-content: start; counter-reset: info-counter; flex: 1; min-height: 0; overflow-y: auto; }
.sidebar .info-box::-webkit-scrollbar { width: var(--scrollbar-size); }
.sidebar .info-box::-webkit-scrollbar-track { background: transparent; }
.sidebar .info-box::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }
.sidebar .info-box::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
.sidebar .info { counter-increment: info-counter; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.sidebar .info dl { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sidebar .info dt { font-weight: 700; color: var(--color-text-tertiary); }
.sidebar .info dt > span::before { content: counter(info-counter) ". "; font-weight: 400; color: var(--color-text-tertiary); }
.sidebar .info dt:has(.btn-tag) { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sidebar .info dd { margin: 0 0 0 16px; color: var(--color-text-muted); display: flex; flex-direction: column; gap: 4px; }
.sidebar .info .data {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; word-break: break-all; overflow:hidden; text-overflow:ellipsis;}
.sidebar .info.is-current dt,
.sidebar .info.is-current dt > span::before { color: var(--color-brand); }
.sidebar .info.is-current dd,
.sidebar .info.is-current .btn-tag { display: none; }
.sidebar .info.is-future dt,
.sidebar .info.is-future dt > span::before { color: var(--color-border-strong); }
.sidebar .info.is-future dd,
.sidebar .info.is-future .btn-tag { display: none; }

.btn-tag { flex: 0 0 auto; display: inline-flex; align-items: center; vertical-align: middle; padding: 4px 10px; border: 0; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; cursor: pointer; background: var(--color-surface-subtle); color: var(--color-text-muted); }
.btn-tag.btn-tag-delete { padding: 2px 9px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 33px; color: var(--color-text-muted); font-size: var(--fs-xs); line-height: 14px; font-weight: 400; }
.btn-tag.btn-tag-outline { height: 30px; padding: 0 12px; gap: 4px; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-btn-outline-stroke); border-radius: var(--radius-sm); color: var(--color-btn-outline-text); font-size: var(--fs-14); line-height: var(--lh-md); letter-spacing: -0.4px; white-space: nowrap; }
.sidebar .info .btn-tag { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; height: 18px; padding: 2px 8px; border-radius: 33px; line-height: 1; font-weight: 400; min-width: 37px; background: var(--color-divider) }
.sidebar .info .btn-tag.is-init { background: var(--color-text-tertiary); color: var(--color-text-on-brand); min-width: 48px; }

/* ========================================================================
 * Choice Card — 라디오/체크 선택형 카드
 * ======================================================================*/
.choice-card { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 19px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); 
 font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text); cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.choice-card:hover { border-color: var(--color-border-strong); }
.choice-card:has(> input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft-50); font-weight: 700; }
.choice-card:has(> input:checked) .vehicle-row-plate,
.choice-card:has(> input:checked) .choice-card-price {font-weight:700;}
.choice-card:has(> input:checked) .vehicle-row-model,
.choice-card:has(> input:checked) .vehicle-row-policy,
.choice-card:has(> input:checked) .vehicle-row-period {color:var(--color-text);}
.choice-card.choice-card-expandable:has(> .choice-card-head > input:checked) { border-color: var(--color-brand); }
.choice-card.choice-card-expandable:has(> .choice-card-head > input:checked) > .choice-card-head { font-weight: 700; }
.choice-card-body { flex: 1; min-width: 0; }
.choice-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.choice-card-title { font-size: var(--fs-base); color: var(--color-text); line-height: var(--lh-base); }
.choice-card-title strong { font-weight: 700; margin-right: 6px; }
.choice-card > .choice-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-card-price { flex-shrink: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-brand); }
.choice-card-meta { margin: 8px 0 0; font-size: var(--fs-sm); display: grid; gap: 8px; }
.choice-card-meta-row { display: flex; gap: 144px; align-items: baseline; }
.choice-card-meta-row dt { flex-shrink: 0; width: 95px; color: var(--color-text-muted); font-weight: 400; font-size: var(--fs-14); }
.choice-card-meta-row dd { margin: 0; color: var(--color-text); font-weight: 700; font-size: var(--fs-14); }
.choice-card.choice-card-soft { background: var(--color-surface-soft-blue); }
.choice-card.choice-card-stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 16px; border-color: transparent; background: var(--color-surface-tonal); }
.choice-card.choice-card-stack:not(:has(.choice-card-desc)) { padding: 13px 16px; }
.choice-card.choice-card-stack:hover { border-color: transparent; background: var(--color-surface-tonal-hover); }
.choice-card.choice-card-stack:has(input:checked) { border-color: var(--color-brand); background: var(--color-surface); }
.choice-card.choice-card-stack > .choice-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 32px; }
.choice-card.choice-card-stack > .choice-card-desc { padding-left: 28px; }
.choice-card-stack .choice-card-title { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); }
.choice-card-stack .choice-card-desc { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); }
.choice-card-stack .choice-card-desc em { font-weight: 700; }
.choice-card-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice-card.choice-card-expandable { display: block; height: auto; padding: 0; overflow: hidden; }
.choice-card-expandable > .choice-card-head { display: flex; align-items: center; justify-content: flex-start; gap: 16px; height: 60px; padding: 0 20px; text-align: left; }
.choice-card-expandable:has(> .choice-card-head > input:checked) > .choice-card-head { background: var(--color-brand-soft-50); border-bottom: 1px solid var(--color-brand); }
.choice-card-expand { display: grid; grid-template-rows: 0fr; background: var(--color-surface); transition: grid-template-rows var(--duration-lg, 0.3s) var(--ease-out); }
.choice-card-expand > .choice-card-expand-inner { min-height: 0; overflow: hidden; padding: 0 24px; }
.choice-card-expandable:has(> .choice-card-head > input:checked) > .choice-card-expand { grid-template-rows: 1fr; }
.choice-card-expandable:has(> .choice-card-head > input:checked) > .choice-card-expand > .choice-card-expand-inner { padding: 16px 24px 24px; }
.choice-card-expandable.choice-card-expand-indent:has(> .choice-card-head > input:checked) > .choice-card-expand > .choice-card-expand-inner { padding-left: 60px; }
.choice-card-expand .form-block + .form-block { margin-top: 24px; }
.choice-card-expand-inner .radio:has(input:checked) { font-weight: 700; color: var(--color-text); }
.choice-card-expand .chip-btn-grid { row-gap: 16px; column-gap: 24px; }
.choice-card.choice-card-subtle { background: var(--color-surface-soft-blue); }

.vehicle-row { display: flex; align-items: center; gap: 61px; width: 100%; }
.vehicle-row-info,
.vehicle-row-meta { display: flex; align-items: center; min-width: 0; }

.vehicle-row-info > * + *,
.vehicle-row-meta > * + * { position: relative; margin-left: 8px; padding-left: 8px; }
.vehicle-row-info > * + *::before,
.vehicle-row-meta > * + *::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 13px; background-color: var(--color-border-soft); }

.vehicle-row-plate { width: 81px; font-weight: 400; white-space: nowrap; }
.vehicle-row-model { width: 257px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted);}
.vehicle-row-policy { width: 48px; font-weight: 400; white-space: nowrap; color: var(--color-text-muted); }
.vehicle-row-period { width: 174px; font-weight: 400; white-space: nowrap; color: var(--color-text-muted); }

.choice-card.choice-card-split { position: relative; display: block; height: auto; padding: 0; overflow: hidden; }
.choice-card.choice-card-split:has(input:checked) { background: var(--color-surface); }
.choice-card.choice-card-split:has(input:checked) .choice-card-head { background: var(--color-brand-soft-50); border-bottom-color: var(--color-brand); }
.choice-card-split > input { position: absolute; top: 19px; left: 24px; margin-top: 0; }
.choice-card-split .choice-card-head { background: var(--color-surface-soft-blue); padding: 16px 24px 16px 60px; border-bottom: 1px solid var(--color-surface-soft-blue); align-items: center; }
.choice-card-split .choice-card-meta { margin: 0; padding: 16px 68px 24px; background: var(--color-surface); }
.choice-card-split .choice-card-title { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); color: var(--color-text-muted); font-weight: 500; }
.choice-card-split .choice-card-title strong { margin-right: 0; font-size: var(--fs-md); color: var(--color-text); }
.choice-card-split .choice-card-title > [aria-hidden] { display: inline-block; width: 1px; height: 13px; vertical-align: middle; background: var(--color-border-soft); font-size: 0;  }

.choice-card-collapsible .choice-card-head { background: var(--color-surface); border-bottom: 0; padding: 16px 60px 16px 24px; }
.choice-card-collapsible .radio { height: auto; gap: 16px; flex: 1; min-width: 0; }
.choice-card-collapsible .choice-card-meta { padding: 18px 60px; }
.choice-card-collapsible.is-open .choice-card-head { border-bottom: 1px solid var(--color-border); }
.choice-card-collapsible::after { content: ""; position: absolute; top: 16px; right: 24px; width: 24px; height: 24px; background: var(--color-text-secondary) url("../../images/pd/pd/dirccar/icon-arrow-down.png") no-repeat center / 24px 24px; transition: transform 250ms var(--ease-out); pointer-events: none; }
.choice-card-collapsible.is-open::after { transform: rotate(180deg); }
.choice-card-collapsible .choice-card-price { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--color-text); }
.choice-card-collapsible .choice-card-meta { display: none; }
.choice-card-collapsible.is-open .choice-card-meta { display: grid; }

/* ========================================================================
 * Quote Card — 저장된 보험료 계산결과를 행 단위로 나열하는 카드
 * ======================================================================*/
.quote-card { position: relative; display: block; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.quote-card > .choice-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 16px 60px 16px 24px; background: var(--color-surface); }
.quote-card.is-open:not(:has(input:checked)) > .choice-card-head { background: #F7F9FB; }
.quote-card:has(input:checked) { border-color: var(--color-brand); }
.quote-card:has(input:checked) > .choice-card-head { background: var(--color-brand-soft-50); }
.quote-card.is-open:has(input:checked) > .choice-card-head { border-bottom: 1px solid var(--color-brand); }
.quote-card .radio { height: auto; gap: 16px; flex: 1; min-width: 0; }
.quote-card .choice-card-title { display: inline-flex; align-items: center; font-size: var(--fs-base); color: var(--color-text-muted); font-weight: 500; }
.quote-card .choice-card-title strong { font-size: var(--fs-md); color: var(--color-text); }
.quote-card .choice-card-title > [aria-hidden] { display: inline-block; width: 1px; height: 13px; background: var(--color-border-soft); font-size: 0; }
.quote-card .choice-card-price { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--color-text); }
.quote-card > .choice-card-meta { margin: 0; padding: 18px 60px; display: none; }
.quote-card.is-open > .choice-card-meta { display: grid; }
.quote-card::after { content: ""; position: absolute; top: 18px; right: 24px; width: 24px; height: 24px; background: url("../../images/pd/pd/dirccar/icon-arrow-down.png") no-repeat center / 24px 24px; transition: transform 250ms var(--ease-out); pointer-events: none; }
.quote-card.is-open::after { transform: rotate(180deg); }

/* ========================================================================
 * Badge — 작은 라벨 (배지)
 * ======================================================================*/

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 33px; font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-sm); white-space: nowrap; background: var(--color-divider); color: var(--color-text-muted); }
.badge-brand { background: var(--color-brand); color: var(--color-text-on-brand); }
.badge-brand-soft { background: var(--color-brand-soft-50); color: var(--color-brand); font-size: var(--fs-14); font-weight: 700; padding: 4px 12px; }
.badge-info { background: var(--color-success-soft); color: var(--color-info); font-size: var(--fs-14); font-weight: 700; padding: 4px 12px; }
.badge-navy { background: var(--color-info-strong); color: var(--color-text-on-brand); }
.badge-info-soft { background: var(--color-info-soft); color: var(--color-info); }
.badge-success-soft { background: var(--color-success-soft); color: var(--color-success); font-size: var(--fs-14); font-weight: 500; }
.badge-warning-soft { background: #FFF1E8; color: #FF7A00; font-size: var(--fs-14); font-weight: 500; }
.badge-danger-soft { background: var(--color-danger-soft); color: var(--color-danger-strong); font-size: var(--fs-14); font-weight: 500; }
.badge-gray-soft,
.badge-muted { background: var(--color-surface-subtle); color: var(--color-text-muted); }
.badge-lavender-soft { background: var(--color-lavender-soft); color: var(--color-lavender); font-size: var(--fs-14); font-weight: 500; }
.badge-coral-soft { background: var(--color-coral-soft); color: var(--color-coral); font-size: var(--fs-14); font-weight: 500; }
.badge-excluded { background: var(--color-excluded-soft); color: var(--color-excluded); font-size: var(--fs-14); font-weight: 500; }
.badge-outline { background: var(--color-surface); border: 1px solid var(--color-text-placeholder); color: var(--color-text); font-size: var(--fs-14); font-weight: 500; }
.badge-outline-muted { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-14); line-height:var(--lh-14); font-weight: 700; padding:3px 11px;}
.badge-tag { background: transparent; border: 1px solid var(--color-border-soft); color: var(--color-text-muted); font-size: 12px; line-height: 14px; font-weight: 400; padding: 4px 8px; }
.badge-dark { background: var(--color-text-tertiary); color: var(--color-text-on-brand); }
.badge-step { background: var(--color-divider); color: var(--color-text); font-size:var(--fs-14); font-weight:700; line-height:var(--lh-14);}

/* 할인특약 배지 — 체크 시 off/on 배지가 통째로 슬라이드 전환.
   바깥(.discount-badge)은 배경 없는 순수 클리핑 뷰포트, 배경/패딩/radius 는 off/on 각자가 소유
   → 상태별로 자기 텍스트 폭에 맞는 자기 모양의 배지가 그대로 나타남 (폭 공유로 인한 여백 문제 없음). */
.discount-badge { position: relative; display: inline-block; overflow: hidden; height: 26px; vertical-align: middle; }
.discount-badge-track { display: flex; flex-direction: column; align-items: flex-start; transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1); }
.discount-badge-off,
.discount-badge-on { display: inline-flex; align-items: center; box-sizing: border-box; height: 26px; padding: 0 12px; border-radius: 33px; flex-shrink: 0; white-space: nowrap; font-size: var(--fs-14); font-weight: 700; }
.discount-badge-off { background: var(--color-surface-muted); color: var(--color-text-muted-2); }
.discount-badge-on { background: var(--color-card-cream); color: var(--color-secondary-orange); }
.discount-badge.is-checked .discount-badge-track { transform: translateY(-26px); }
.badge-star {position:relative;font-size:var(--fs-xs);line-height:var(--lh-xs);min-width:57px;}
.badge-star::before {content:'';display:block;width:16px;height:16px;margin-right:4px;background:url("../../images/pd/pd/dirccar/icon-star.png") no-repeat center / contain;}

/* ========================================================================
 * Brand Card Grid — 브랜드 선택 카드 그리드 (금융사·카드사 등 공용)
 * ====================================================================== */
.brand-grid { display: grid; grid-template-columns: repeat(5, 120px); column-gap: 14px; row-gap: 16px; list-style: none; margin: 0; padding: 0; }
.brand-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 120px; height: 90px; padding: 11px; border: 0; border-radius: 12px; background: var(--color-card-lavender); cursor: pointer; transition: background-color var(--duration) var(--ease-out); }
.brand-card:hover { background: var(--color-surface-muted); }
.brand-card:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.brand-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.brand-card-icon > img { width: 100%; height: 100%; object-fit: contain; }
.brand-card-name { font-size: 16px; line-height: 20px; font-weight: 400; color: var(--color-text); text-align: center; }

.brand-card-icon.shinhan {background-image:url(../../images/pd/pd/dirccar/bank/card-shinhan.png);}
.brand-card-icon.samsung {background-image:url(../../images/pd/pd/dirccar/bank/card-samsung.png);}
.brand-card-icon.hyundai {background-image:url(../../images/pd/pd/dirccar/bank/card-hyundai.png);}
.brand-card-icon.kb {background-image:url(../../images/pd/pd/dirccar/bank/card-kb.png);}
.brand-card-icon.lotte {background-image:url(../../images/pd/pd/dirccar/bank/card-lotte.png);}
.brand-card-icon.hyundai {background-image:url(../../images/pd/pd/dirccar/bank/card-hyundai.png);}
.brand-card-icon.hana {background-image:url(../../images/pd/pd/dirccar/bank/card-hana.png);}
.brand-card-icon.woori {background-image:url(../../images/pd/pd/dirccar/bank/card-woori.png);}
.brand-card-icon.etc {background-image:url(../../images/pd/pd/dirccar/bank/card-etc.png);}

.brand-card-icon.bank-kb {background-image:url(../../images/pd/pd/dirccar/bank/bank-kb.png);}
.brand-card-icon.bank-sc {background-image:url(../../images/pd/pd/dirccar/bank/bank-sc.png);}
.brand-card-icon.bank-knb {background-image:url(../../images/pd/pd/dirccar/bank/bank-knb.png);}
.brand-card-icon.bank-kjb {background-image:url(../../images/pd/pd/dirccar/bank/bank-kjb.png);}
.brand-card-icon.bank-ibk {background-image:url(../../images/pd/pd/dirccar/bank/bank-ibk.png);}
.brand-card-icon.bank-nh {background-image:url(../../images/pd/pd/dirccar/bank/bank-nh.png);}
.brand-card-icon.bank-im {background-image:url(../../images/pd/pd/dirccar/bank/bank-im.png);}
.brand-card-icon.bank-bnk {background-image:url(../../images/pd/pd/dirccar/bank/bank-bnk.png);}
.brand-card-icon.bank-kdb {background-image:url(../../images/pd/pd/dirccar/bank/bank-kdb.png);}
.brand-card-icon.bank-samsung {background-image:url(../../images/pd/pd/dirccar/bank/bank-samsung.png);}
.brand-card-icon.bank-mg {background-image:url(../../images/pd/pd/dirccar/bank/bank-mg.png);}
.brand-card-icon.bank-sh {background-image:url(../../images/pd/pd/dirccar/bank/bank-sh.png);}
.brand-card-icon.bank-shinhan {background-image:url(../../images/pd/pd/dirccar/bank/bank-shinhan.png);}
.brand-card-icon.bank-cu {background-image:url(../../images/pd/pd/dirccar/bank/bank-cu.png);}
.brand-card-icon.bank-citi {background-image:url(../../images/pd/pd/dirccar/bank/bank-citi.png);}
.brand-card-icon.bank-keb {background-image:url(../../images/pd/pd/dirccar/bank/bank-keb.png);}
.brand-card-icon.bank-woori {background-image:url(../../images/pd/pd/dirccar/bank/bank-woori.png);}
.brand-card-icon.bank-post {background-image:url(../../images/pd/pd/dirccar/bank/bank-post.png);}
.brand-card-icon.bank-jbb {background-image:url(../../images/pd/pd/dirccar/bank/bank-jbb.png);}
.brand-card-icon.bank-jeju {background-image:url(../../images/pd/pd/dirccar/bank/bank-jeju.png);}
.brand-card-icon.bank-hana {background-image:url(../../images/pd/pd/dirccar/bank/bank-hana.png);}
.brand-card-icon.bank-kbank {background-image:url(../../images/pd/pd/dirccar/bank/bank-kbank.png);}
.brand-card-icon.bank-kakao {background-image:url(../../images/pd/pd/dirccar/bank/bank-kakao.png);}
.brand-card-icon.bank-toss {background-image:url(../../images/pd/pd/dirccar/bank/bank-toss.png);}

/* 증권사 아이콘 */
.brand-card-icon.stock-kyobo {background-image:url(../../images/pd/pd/dirccar/bank/stock-kyobo.png);}
.brand-card-icon.stock-daol {background-image:url(../../images/pd/pd/dirccar/bank/stock-daol.png);}
.brand-card-icon.stock-daishin {background-image:url(../../images/pd/pd/dirccar/bank/stock-daishin.png);}
.brand-card-icon.stock-meritz {background-image:url(../../images/pd/pd/dirccar/bank/stock-meritz.png);}
.brand-card-icon.stock-mirae {background-image:url(../../images/pd/pd/dirccar/bank/stock-mirae.png);}
.brand-card-icon.stock-bukook {background-image:url(../../images/pd/pd/dirccar/bank/stock-bukook.png);}
.brand-card-icon.stock-samsung {background-image:url(../../images/pd/pd/dirccar/bank/stock-samsung.png);}
.brand-card-icon.stock-shinyoung {background-image:url(../../images/pd/pd/dirccar/bank/stock-shinyoung.png);}
.brand-card-icon.stock-shinhan {background-image:url(../../images/pd/pd/dirccar/bank/stock-shinhan.png);}
.brand-card-icon.stock-yuanta {background-image:url(../../images/pd/pd/dirccar/bank/stock-yuanta.png);}
.brand-card-icon.stock-eugene {background-image:url(../../images/pd/pd/dirccar/bank/stock-eugene.png);}
.brand-card-icon.stock-ls {background-image:url(../../images/pd/pd/dirccar/bank/stock-ls.png);}
.brand-card-icon.stock-kakaopay {background-image:url(../../images/pd/pd/dirccar/bank/stock-kakaopay.png);}
.brand-card-icon.stock-cape {background-image:url(../../images/pd/pd/dirccar/bank/stock-cape.png);}
.brand-card-icon.stock-kiwoom {background-image:url(../../images/pd/pd/dirccar/bank/stock-kiwoom.png);}
.brand-card-icon.stock-toss {background-image:url(../../images/pd/pd/dirccar/bank/stock-toss.png);}
.brand-card-icon.stock-hana {background-image:url(../../images/pd/pd/dirccar/bank/stock-hana.png);}
.brand-card-icon.stock-im {background-image:url(../../images/pd/pd/dirccar/bank/stock-im.png);}
.brand-card-icon.stock-hankook {background-image:url(../../images/pd/pd/dirccar/bank/stock-hankook.png);}
.brand-card-icon.stock-woori {background-image:url(../../images/pd/pd/dirccar/bank/stock-woori.png);}
.brand-card-icon.stock-hanwha {background-image:url(../../images/pd/pd/dirccar/bank/stock-hanwha.png);}
.brand-card-icon.stock-hyundai {background-image:url(../../images/pd/pd/dirccar/bank/stock-hyundai.png);}
.brand-card-icon.stock-bnk {background-image:url(../../images/pd/pd/dirccar/bank/stock-bnk.png);}
.brand-card-icon.stock-db {background-image:url(../../images/pd/pd/dirccar/bank/stock-db.png);}
.brand-card-icon.stock-kb {background-image:url(../../images/pd/pd/dirccar/bank/stock-kb.png);}
.brand-card-icon.stock-nh {background-image:url(../../images/pd/pd/dirccar/bank/stock-nh.png);}
.brand-card-icon.stock-sk {background-image:url(../../images/pd/pd/dirccar/bank/stock-sk.png);}

/* ========================================================================
 * Btn Group — 버튼 행 (이전/다음 등 페이지 하단 액션)
 * ======================================================================*/
.btn-group { display: flex; justify-content: flex-end; gap: 24px; margin-top: 10px; }
.btn-group.btn-group-center { justify-content: center; }
.btn-group .btn { height: 56px; border-radius: var(--radius-md); padding: 0 24px; }
.btn-group .btn-secondary { min-width: 160px; background: var(--color-surface); border: 1px solid var(--color-text); color: var(--color-text-tertiary); font-size: var(--fs-base); font-weight: 400; }
.btn-group .btn-secondary:hover { background: var(--color-surface-subtle); border-color: var(--color-text); }
.btn-group .btn-primary { min-width: 300px; font-size: var(--fs-md); font-weight: 700; }
.btn-group .btn-primary:disabled,
.btn-group .btn-primary[disabled],
.btn-group .btn-primary.is-disabled { background: var(--color-brand-disabled); color: var(--color-text-on-brand); opacity: 1; box-shadow: none; }
.main-col .btn-group { margin: 10px 16px 0; }

/* ========================================================================
 * To-top 버튼
 * ======================================================================*/
.to-top-btn { position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-md); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--duration) var(--ease-out), visibility var(--duration) var(--ease-out), transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); display: inline-flex; align-items: center; justify-content: center; }
.to-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top-btn:hover { background: var(--color-surface-subtle); border-color: var(--color-border-strong); }
.to-top-btn:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.to-top-btn svg { width: 20px; height: 20px; stroke: currentColor; }

/* ========================================================================
 * Static preview helpers (정적 미리보기 안내)
 * ======================================================================*/
.static-preview-banner { margin: 0; flex: 1 1 200px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.static-preview-note { margin: 0; flex: 0 1 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); overflow: hidden; }
.static-preview-note > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.static-preview-note > summary::-webkit-details-marker { display: none; }
.static-preview-note > summary::before { content: "▸ "; color: var(--color-text-muted); margin-right: 4px; }
.static-preview-note[open] > summary::before { content: "▾ "; }
.static-preview-note[open] > summary { border-bottom: 1px solid var(--color-border); }
.static-preview-note pre { margin: 0; padding: 16px; font-size: 12px; line-height: 1.6; background: var(--color-surface-subtle); color: var(--color-text); overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ============================================================================
 * Tab — Segmented · Underline · Soft Fill
 * ========================================================================= */
.tabs { display: flex; align-items: stretch; width: 100%; }
.tab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 12px; font-family: inherit; font-size: var(--fs-base); font-weight: 600; color: var(--color-text); background: transparent; border: 0; cursor: pointer; white-space: nowrap; transition:
 color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.tab:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: -2px; }
.tab[disabled],
.tab[aria-disabled="true"] { color: var(--color-text-subtle); cursor: not-allowed; }

.tabs-segmented { border: 0; box-shadow: inset 0 0 0 1px var(--color-brand); border-radius: var(--radius-md); background: var(--color-surface); }
.tabs-segmented .tab { height: 56px; color: var(--color-text); }
.tabs-segmented .tab + .tab { border-left: 1px solid var(--color-brand); }
.tabs-segmented .tab:first-child { border-top-left-radius: calc(var(--radius-md) - 1px); border-bottom-left-radius: calc(var(--radius-md) - 1px); }
.tabs-segmented .tab:last-child { border-top-right-radius: calc(var(--radius-md) - 1px); border-bottom-right-radius: calc(var(--radius-md) - 1px); }
.tabs-segmented .tab.is-active { background: var(--color-brand); color: var(--color-text-on-brand); }

.tabs-segmented-lg .tab { height: auto; min-height: 56px; padding: 8px 12px; white-space: normal; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; }
.tabs-segmented-lg .tab.is-active { font-weight: 700; }

.tabs-underline { border-bottom: 1px solid var(--color-border); }
.tabs-underline .tab { position: relative; height: 55px; color: var(--color-text); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-base); }
.tabs-underline .tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; transition: background-color var(--duration-fast) var(--ease-out); }
.tabs-underline .tab.is-active { color: var(--color-text); font-weight: 700; }
.tabs-underline .tab.is-active::after { background: var(--color-brand); }

.tabs-soft { gap: 4px; }
.tabs-soft .tab { border-radius: var(--radius-md); color: var(--color-text-muted); }
.tabs-soft .tab.is-active { background: var(--color-brand-soft); color: var(--color-brand); font-weight: 700; }

/* ========================================================================
 * Form block — label + field 묶음
 * ======================================================================*/
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-msg { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text); }
.form-group.form-group-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-group.form-group-2col .form-block.col-1 {width:168px;}
.form-group.form-group-2col .form-block.col-2 {width:190px;}
.form-group.form-group-2col .form-block.col-2 .row-item {min-height:56px;}
.form-group-2col > * { min-width: 0; }
.form-block { display: flex; flex-direction: column; gap: 16px; }
.form-block > .form-label,
.form-block > .form-label.form-label-lg { margin-bottom: 0; }
.form-block .field { width: 100%; }
.form-block .field-control { height: 56px; padding: 0 var(--field-pad-x-lg); border-radius: var(--field-radius-md);  }
.form-block .field-control .icon-mouse {margin-right:-4px;}
:where(.form-block) .dropdown { display: block; width: 100%; }
.form-block .dropdown-toggle { height: 56px; padding: 0 var(--field-pad-x-lg); }
.form-block + .form-block { margin-top: 40px; }
.form-group > .form-block + .form-block { margin-top: 0; }
.form-block > .dropdown + .field {margin-top:-4px;}
.form-label { display: block; margin-bottom: 12px; color: var(--color-text-muted-3); }
.form-label.form-label-lg { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh-md); color:var(--color-text); margin-bottom: 16px; }
.form-label.has-line {padding-bottom:16px;border-bottom:1px solid var(--color-border);}
.form-label.fc-text {color:var(--color-text);}

.title-lg { margin: 0; display: flex; align-items: center; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); }
.title-lg .step-num { margin-right: 4px; }
.title-lg > .icon { margin-left: 8px; }

/* ========================================================================
 * Date input (calendar 아이콘 우측 표시) + Date range (시작 ~ 종료)
 * ======================================================================*/
.field-date .field-control { background-image: url("../../images/pd/pd/dirccar/icon-calendar.png"); background-repeat: no-repeat; background-position: right 14px center; background-size: 24px 24px; }
.field-date .field-input { padding-right: 30px; cursor: pointer; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.field-date .field-input::placeholder { font-weight: 400; }
.field-date .field-input.is-default { color: #767676; font-weight: 400; }
.field-date .field-input:not(.is-default):read-only:focus,
.field-date .field-input:not(.is-default):read-only:focus-visible { font-weight: 700; }
.field-date .field-control:focus-within { border-color: var(--field-border-color); box-shadow: none; }

.date-range { display: flex; align-items: center; gap: 16px; }
.date-range > .field { flex: 1 1 0; min-width: 0; }
.date-range-sep { flex: 0 0 auto; color: var(--color-text-muted); font-size: var(--fs-md); line-height: 1; }

/* ========================================================================
 * flatpickr 캘린더 — Meritz 브랜드 테마 오버라이드
 * ======================================================================*/
.flatpickr-calendar { width: 327px; padding: 16px; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12); font-family: inherit; font-size: var(--fs-14); line-height: var(--lh-14); }
.flatpickr-calendar.arrowTop { margin-top: 6px; }
.flatpickr-calendar.arrowBottom { margin-top: -6px; }
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }

.flatpickr-months { align-items: center; margin-bottom: 12px; }
.flatpickr-months .flatpickr-month { height: auto; color: var(--color-text); }
.flatpickr-current-month { position: relative; width: auto; left: 0; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; height: auto; }
.flatpickr-current-month .flatpickr-yearDropdown { order: 1; }
.flatpickr-current-month .flatpickr-monthDropdown-months { order: 2; }
.flatpickr-current-month .flatpickr-yearDropdown,
.flatpickr-current-month .flatpickr-monthDropdown-months { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); padding: 0 4px 0 0; border: 0; background: transparent; cursor: pointer; }
.flatpickr-current-month .flatpickr-yearDropdown:hover,
.flatpickr-current-month .flatpickr-yearDropdown:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus { background: transparent; outline: none; }
.flatpickr-prev-month,
.flatpickr-next-month { position: static; padding: 4px; fill: var(--color-text); }
.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg { fill: var(--color-brand); }

.flatpickr-weekdays { height: auto; margin-bottom: 4px; }
.flatpickr-weekdaycontainer { display: flex; }
.flatpickr-meritz .flatpickr-weekday { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; letter-spacing: 0; text-align: center; vertical-align: middle; color: var(--color-text); }

.flatpickr-meritz .flatpickr-weekday:first-child { color: var(--color-brand);  }
.flatpickr-meritz .flatpickr-weekday:last-child { color: var(--color-info-strong);  }

.flatpickr-days { width: 100%; }
.dayContainer { width: 100%; min-width: 0; max-width: none; padding: 0; }

.flatpickr-day { max-width: none; height: 36px; line-height: 36px; border: 0; background: transparent; color: var(--color-text); font-size: var(--fs-14); font-weight: 400; position: relative; z-index: 0; }
.flatpickr-day::before { content: ''; position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; z-index: -1; transition: background 0.15s; }
.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day.nextMonthDay:focus,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange { background: transparent; border-color: transparent; }
.flatpickr-day:hover::before { background: var(--color-brand-soft); }

.dayContainer .flatpickr-day:nth-child(7n+1):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange) { color: var(--color-brand); }
.dayContainer .flatpickr-day:nth-child(7n):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.selected):not(.startRange):not(.endRange) { color: var(--color-info-strong); }

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled { color: var(--color-text-muted-2); opacity: 0.5; }
.flatpickr-day.flatpickr-disabled { cursor: not-allowed; }
.flatpickr-day.flatpickr-disabled:hover { color: var(--color-text-muted-2); }
.flatpickr-day.flatpickr-disabled:hover::before { background: transparent; }
.flatpickr-day.today:hover,
.flatpickr-day.today:focus { background: transparent; border-color: transparent; }

.flatpickr-meritz .dayContainer:has(> .flatpickr-day:nth-child(36).nextMonthDay) > .flatpickr-day:nth-child(n+36) { display: none; }

.flatpickr-meritz .flatpickr-days,
.flatpickr-meritz .dayContainer { height: auto !important; }

.dayContainer .flatpickr-day.today { font-weight: 700; }
.dayContainer .flatpickr-day.today:not(.selected) { color: var(--color-brand); }
.dayContainer .flatpickr-day.today:not(.selected)::before { background: var(--color-brand-soft); }

.dayContainer .flatpickr-day.selected,
.dayContainer .flatpickr-day.selected:hover,
.dayContainer .flatpickr-day.selected:focus,
.dayContainer .flatpickr-day.startRange,
.dayContainer .flatpickr-day.startRange:hover,
.dayContainer .flatpickr-day.startRange:focus,
.dayContainer .flatpickr-day.endRange,
.dayContainer .flatpickr-day.endRange:hover,
.dayContainer .flatpickr-day.endRange:focus,
.dayContainer .flatpickr-day.selected.prevMonthDay,
.dayContainer .flatpickr-day.selected.nextMonthDay,
.dayContainer .flatpickr-day.startRange.prevMonthDay,
.dayContainer .flatpickr-day.startRange.nextMonthDay,
.dayContainer .flatpickr-day.endRange.prevMonthDay,
.dayContainer .flatpickr-day.endRange.nextMonthDay,
.dayContainer .flatpickr-day.selected.inRange,
.dayContainer .flatpickr-day.startRange.inRange,
.dayContainer .flatpickr-day.endRange.inRange { background: transparent; border: 0; box-shadow: none; color: var(--color-text-on-brand); font-weight: 700; }
.dayContainer .flatpickr-day.selected::before,
.dayContainer .flatpickr-day.selected:hover::before,
.dayContainer .flatpickr-day.startRange::before,
.dayContainer .flatpickr-day.startRange:hover::before,
.dayContainer .flatpickr-day.endRange::before,
.dayContainer .flatpickr-day.endRange:hover::before { background: var(--color-brand); }

/* ========================================================================
 * .flatpickr-meritz
 * ======================================================================*/
.flatpickr-calendar.flatpickr-meritz .flatpickr-months { height: 34px; align-items: center; justify-content: center; }
.flatpickr-calendar.flatpickr-meritz .flatpickr-prev-month,
.flatpickr-calendar.flatpickr-meritz .flatpickr-next-month { position: absolute; top: 17px; width: 32px; height: 32px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.flatpickr-calendar.flatpickr-meritz .flatpickr-prev-month { left: 16px; }
.flatpickr-calendar.flatpickr-meritz .flatpickr-next-month { right: 16px; }
.flatpickr-calendar.flatpickr-meritz .flatpickr-prev-month svg,
.flatpickr-calendar.flatpickr-meritz .flatpickr-next-month svg { width: 12px; height: 12px; }

/* ========================================================================
 * Driver Scope Grid — 운전자 범위 선택
 * Option — 라디오 숨김 + 버튼형 중앙정렬 (원래 .driver-scope-grid 전용이었으나
 * 공통 클래스로 일반화 — .choice-card-grid-2 등 다른 그리드 래퍼에서도 사용 가능)
 * ======================================================================*/
.driver-scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 34px; row-gap: 16px; }
.option { position: relative; display: flex; align-items: center; justify-content: center; height: 56px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--fs-base); color: var(--color-text); cursor: pointer; user-select: none; text-align: center; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.option > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.option:hover { border-color: var(--color-border-strong); }
.option:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft-50); color: var(--color-text); font-weight: 700; }
.option:has(input:focus-visible) { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

/* ========================================================================
 * Family Tree — 가족관계 시각 다이어그램
 * ======================================================================*/

.family-tree { position: relative; width: 550px; height: 202px; margin: 24px auto 60px; }
.family-tree::before { content: ""; position: absolute; left: 118px; top: 32px; width: 222px; border-top: 1px dashed var(--color-border-soft); }
.family-tree::after { content: ""; position: absolute; left: 222px; top: 32px; width: 0; height: 100px; border-left: 1px dashed var(--color-border-soft); }
.family-tree .person { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; height: 86px; z-index: 1; }
.family-tree .person-pair { width: 128px; }
.family-tree .person-avatar { position: relative; width: 100%; height: 64px; background: var(--color-surface-card-blue); border-radius: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
.family-tree .person-face { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.family-tree .person-label { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); text-align: center; }
.family-tree .person.is-active .person-label { font-weight: 700; }

.family-tree .person-face.parents { background-image: url("../../images/pd/pd/dirccar/avatar/parents.png"); }
.family-tree .person-face.parents-in-law { background-image: url("../../images/pd/pd/dirccar/avatar/parents-in-law.png"); }
.family-tree .person-face.siblings { background-image: url("../../images/pd/pd/dirccar/avatar/siblings.png"); }
.family-tree .person-face.children { background-image: url("../../images/pd/pd/dirccar/avatar/children.png"); }
.family-tree .person-face.me { background-image: url("../../images/pd/pd/dirccar/avatar/me.png"); }
.family-tree .person-face.spouse { background-image: url("../../images/pd/pd/dirccar/avatar/spouse.png"); }
.family-tree .person-face.designee { background-image: url("../../images/pd/pd/dirccar/avatar/designee.png"); }
.family-tree .person-face.employee { background-image: url("../../images/pd/pd/dirccar/avatar/employee.png"); }
.family-tree .person-face.anyone { background-image: url("../../images/pd/pd/dirccar/avatar/anyone.png"); }
.family-tree .person.is-active .person-face.parents { background-image: url("../../images/pd/pd/dirccar/avatar/parents-on.png"); }
.family-tree .person.is-active .person-face.parents-in-law { background-image: url("../../images/pd/pd/dirccar/avatar/parents-in-law-on.png"); }
.family-tree .person.is-active .person-face.siblings { background-image: url("../../images/pd/pd/dirccar/avatar/siblings-on.png"); }
.family-tree .person.is-active .person-face.children { background-image: url("../../images/pd/pd/dirccar/avatar/children-on.png"); }
.family-tree .person.is-active .person-face.me { background-image: url("../../images/pd/pd/dirccar/avatar/me-on.png"); }
.family-tree .person.is-active .person-face.spouse { background-image: url("../../images/pd/pd/dirccar/avatar/spouse-on.png"); }
.family-tree .person.is-active .person-face.designee { background-image: url("../../images/pd/pd/dirccar/avatar/designee-on.png"); }
.family-tree .person.is-active .person-face.employee { background-image: url("../../images/pd/pd/dirccar/avatar/employee-on.png"); }
.family-tree .person.is-active .person-face.anyone { background-image: url("../../images/pd/pd/dirccar/avatar/anyone-on.png"); }

.family-tree.is-female .person-face.me { background-image: url("../../images/pd/pd/dirccar/avatar/spouse.png"); }
.family-tree.is-female .person-face.spouse { background-image: url("../../images/pd/pd/dirccar/avatar/me.png"); }
.family-tree.is-female .person.is-active .person-face.me { background-image: url("../../images/pd/pd/dirccar/avatar/spouse-on.png"); }
.family-tree.is-female .person.is-active .person-face.spouse { background-image: url("../../images/pd/pd/dirccar/avatar/me-on.png"); }

.family-tree .person[data-role="parent"] { left: 0; top: 0; }
.family-tree .person[data-role="me"] { left: 144px; top: 0; }
.family-tree .person[data-role="spouse"] { left: 238px; top: 0; }
.family-tree .person[data-role="spouse-parent"] { left: 318px; top: 0; }
.family-tree .person[data-role="sibling"] { left: 0; top: 116px; }
.family-tree .person[data-role="child"] { left: 158px; top: 116px; }
.family-tree .person[data-role="designee"] { left: 318px; top: 111px; }
.family-tree .person[data-role="employee"] { left: 402px; top: 111px; }
.family-tree .person[data-role="anyone"] { left: 486px; top: 111px; }
.family-tree .person[data-role="parent"]::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 31px; border-left: 1px dashed var(--color-border-soft); margin-left: -0.5px; }

/* ========================================================================
 * Info Callout — 노란 안내 박스
 * ======================================================================*/
.info-callout { border-radius: var(--radius-md); background: var(--color-warning-soft); padding: 16px 32px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text-muted);}
.info-callout-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.info-callout-title { font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); margin: 0 0 14px; }
.info-callout-body { position:relative; display: none; margin-top: 16px; padding-top: 26px;}
.info-callout-body::before {content:'';position:absolute;top:0;left:-16px;right:-16px;display:block;width:calc(100% + 32px);height:1px;background-color:var(--color-border);}
.info-callout:has(.info-callout-toggle input:checked) .info-callout-body,
.info-callout.is-always-open .info-callout-body { display: flex; gap: 32px; align-items: flex-start; }
.info-callout.is-always-open .info-callout-toggle { display: none; }
.info-callout-body > .form-block,
.info-callout-body > .legal-note { flex: 1 1 0; min-width: 0; margin: 0; }
.info-callout-body > .form-block {max-width:320px;}
.info-callout-body > .form-block .form-label {font-size: var(--fs-base);font-weight:700;line-height:var(--lh-base);color:var(--color-text);}
.info-callout-body > .legal-note {margin:2px 0;}
.info-callout-body > .legal-note li + li {margin-top:8px;}

/* ========================================================================
 * Legal Note — 페이지 하단 안내문 + 보조 링크 버튼.
 * ======================================================================*/
.legal-note { margin-top: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-muted); }
.legal-note strong { color: var(--color-text); font-weight: 700; }
.legal-note-strong { color: var(--color-text); }
.option-info { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.option-info > dt { font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-base); color: var(--color-text); margin: 0; }
.option-info > dd { font-size: var(--fs-14); font-weight: 400; line-height: var(--lh-14); color: var(--color-text); margin: 0; }
.modal-section-heading { margin: 0 0 8px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.modal-section-sub-heading { margin: 0 0 4px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; color: var(--color-text); }
ul.dash-list { list-style: none; margin: 4px 0 0; padding-left: 8px; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); }
ul.dash-list > li { position: relative; padding-left: 12px; }
ul.dash-list > li::before { content: "-"; position: absolute; left: 0; top: 0; }
ul.dash-list > li + li { margin-top: 4px; }

/* Bullet — p.legal-note 자체 또는 ul.legal-note 의 li 에 적용 */
p.legal-note,
ul.legal-note > li { position: relative; padding-left: 12px; }
p.legal-note::before,
ul.legal-note > li::before { content: "※"; position: absolute; left: 0; top: 0; }
ul.legal-note { list-style: none; padding-left: 0; }
ul.legal-note > li + li { margin-top: 4px; }
.legal-link-row { display: flex; gap: 6px; margin-top: 16px; }
.legal-link-row .btn {font-weight:400;}

/* ========================================================================
 * Choice Card — Tiered
 * ======================================================================*/
.choice-card-tiered + .choice-card,
.choice-card + .choice-card-tiered,
.choice-card-tiered + .choice-card-tiered { margin-top: 24px; }
.choice-card-tiered-head:has(input:checked) { border-radius: 16px 16px 0 0; }

.vehicle-list { display: none; }
.choice-card-tiered:has(.choice-card-tiered-head input:checked) .vehicle-list { display: block; background: var(--color-surface); border: 1px solid var(--color-brand); border-top: 0; border-radius: 0 0 16px 16px; 
 padding: 20px 8px 20px 24px; }
.vehicle-list-scroll { list-style: none; margin: 0; padding: 0 16px 0 0; max-height: 288px; overflow-y: auto; }
.vehicle-list-scroll::-webkit-scrollbar { width: var(--scrollbar-size); }
.vehicle-list-scroll::-webkit-scrollbar-track { background: transparent; }
.vehicle-list-scroll::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-xs); }
.vehicle-list-scroll > li + li { margin-top: 16px; }
.vehicle-item { border-radius: 12px; }
.vehicle-list-scroll > li + li > .vehicle-item { margin-top: 0; }
.vehicle-info { flex: 1; height: 60px; display: flex; justify-content: space-between; align-items: center; gap: 61px; white-space: nowrap; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text); font-weight: 500; }
.vehicle-info-left,
.vehicle-info-right { display: inline-flex; align-items: center; white-space: nowrap; }
.vehicle-info-left > * + *::before,
.vehicle-info-right > * + *::before { content: ""; display: inline-block; width: 1px; height: 14px; margin: 0 8px; background: var(--color-border); vertical-align: middle; }
.divider-vert { display: inline-block; width: 1px; height: 14px; margin: 0 12px; background: var(--color-border); vertical-align: middle; }

/* ========================================================================
 * Notice Box
 * ======================================================================*/
.notice-box { background: var(--color-surface-subtle); border-radius: var(--radius-md); padding: 16px 32px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-secondary); }
.notice-box.bg-tonal {background: var(--color-surface-tonal);}
.notice-box .legal-note { color: var(--color-text-secondary); }
.consent-prompt { padding: 15px 16px; background: var(--color-surface); border: 1px solid var(--color-text-tertiary); border-radius: var(--radius-md); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); }
.notice-box-summary { background: var(--color-surface); border: 1px solid var(--color-border); padding: 16px; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--color-text-secondary); }
.notice-box-lg { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text-secondary); }
.notice-box-lg .notice-head-title { font-size: var(--fs-base); line-height: var(--lh-base); }

/* ========================================================================
 * Breadcrumb
 * ======================================================================*/
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; padding: 24px 40px; row-gap: 4px; background: var(--color-surface-tonal); border-radius: var(--radius-md); font-size: var(--fs-14); line-height: 24px; color: var(--color-text-muted); }
.breadcrumb-item { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 3px 24px 3px 0; margin-right: 8px; }
.breadcrumb-item::after { content: ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: url("../../images/pd/pd/dirccar/icon-arrow-right-16.png") no-repeat center / 16px 16px; }
.breadcrumb-item:last-child::after { content: none; }
.breadcrumb-item:last-child { padding-right: 0; margin-right: 0; }

.notice-box-outline { background: var(--color-surface); border: 1px solid var(--color-border); padding: 24px 16px; }
.notice-box-outline.notice-box-outline-tight { padding: 16px; }
.notice-box.notice-box-p24 { padding: 24px; }

.flow-blocked { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 32px 0 0; text-align: center; }
/* .modal-section:has(input[name="usage"][value="business"]:checked) .flow-blocked { display: flex !important; }
.modal-section:has(input[name="usage"][value="business"]:checked) ~ .modal-section { display: none !important; } */
.flow-blocked-text { margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text); }
.flow-blocked .no-flow {display: flex; width: 100px; height: 100px;background:#fff url("../../images/pd/pd/dirccar/no-flow.png") no-repeat center / contain;}

.notice-box.notice-box-cream { background: var(--color-action-cream); padding: 24px; margin-top: 24px; color: var(--color-text); }
.notice-box-cream p { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text-muted); }
.notice-box-cream p strong { font-weight: 700; color: var(--color-brand); }
.notice-box-cream > .form-block { margin-top: 24px; }

.modal-body-inner > .notice-box-outline:first-child { margin-top: 0; }

.notice-box-plain { background: transparent; padding: 0; }

.verify-notice { display: flex; align-items: center; gap: 4px; margin: 0 0 -8px; padding: 11px 40px; background: var(--color-card-cream); border-radius: var(--radius-lg); }
.verify-notice p { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-tertiary); }
.verify-notice .icon { flex-shrink: 0; }
.verify-notice.verify-top { margin-top:-8px; }

/* 본인인증 진행 플로우  */
.verify-flow { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 38px 0; }
.verify-flow-step { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 160px; }
.verify-flow-icon { width: 120px; height: 120px; border-radius: 50%; background-color: var(--color-surface-subtle); background-repeat: no-repeat; background-position: center; background-size: 50px 50px; }
.verify-flow-label { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 500; color: var(--color-text); text-align: center; }
.verify-flow-arrow { flex-shrink: 0; width: 32px; height: 32px; margin-top: 44px; background: url("../../images/pd/pd/dirccar/icon-arrow-right-32.png") no-repeat center / contain; }
.verify-flow-icon-kakao { background-image: url("../../images/pd/pd/dirccar/icon-kakao-50.png"); }
.verify-flow-icon-toss { background-image: url("../../images/pd/pd/dirccar/icon-toss-50.png"); }
.verify-flow-icon-secure { background-image: url("../../images/pd/pd/dirccar/icon-secure-50.png"); }
.notice-box.notice-box-verify { padding: 24px 16px; color: var(--color-text-tertiary); }

.notice-item { display: flex; flex-direction: column; gap: 8px; }
.notice-item:has(.notice-head) { gap: 16px; }
.notice-item > .modal-section-heading { margin: 0; }
.notice-item .notice-title { margin-bottom: 0; }

.section-content { padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }

.modal-policy { display: flex; flex-direction: column; gap: 48px; }
.modal-policy .modal-section-title { font-size: var(--fs-base); line-height: var(--lh-base); }
.modal-policy .modal-section-heading,
.modal-policy .process-sub-heading { font-size: var(--fs-14); line-height: var(--lh-14); }
.modal-policy .process-step-desc { font-size: var(--fs-14); line-height: var(--lh-14); }

.modal-policy-section { display: flex; flex-direction: column; gap: 24px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; }
.modal-policy-section > * { margin: 0; }
.modal-policy-section + .modal-policy-section,
.modal-policy-section + .modal-omit-block { margin-top: 32px; }
.modal-policy-group { display: flex; flex-direction: column; gap: 4px; }
.modal-policy-group > * { margin: 0; }
.modal-policy-statement { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; color: var(--color-text); }
.modal-sections-plain > .modal-policy-group > p,
.modal-sections-plain > .modal-policy-group > .article-body > p { font-size: var(--fs-14); line-height: var(--lh-14); }

.modal-body .list-decimal { font-size: var(--fs-14); line-height: var(--lh-14); }
.modal-body .list-decimal > li + li { margin-top: 4px; }

.modal-article { display: grid; grid-template-columns: 60px 1fr; column-gap: 4px; align-items: start; }
.modal-article > .article-no { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.modal-article > .article-body { display: flex; flex-direction: column; gap: 4px; }
.modal-article > .article-body > * { margin: 0; }
.modal-article > .article-body > .modal-section-title { font-size: var(--fs-base); line-height: var(--lh-base); }

.notice-head { margin: 0; display: flex; flex-direction: column;gap:4px; }
.notice-head > dt + dd { margin-top: 8px; }
.notice-head > dd + dd { margin-top: 4px; }
.notice-head-title { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.notice-head-desc { margin-left:4px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); }
.notice-head .notice-head-desc {margin-top:0;}
.bullet-list .notice-head-desc { margin-left: 5px; }
.notice-box > * + * { margin-top: 16px; }
.notice-item.has-divider { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.notice-box-outline.notice-box-flush { padding: 16px; color: var(--color-text); }
.notice-box-outline.notice-box-flush > .notice-item + .notice-item { margin-top: 16px; padding-top: 0; border-top: 0; }
.notice-box-flush .notice-head-desc { font-size: var(--fs-14); line-height: var(--lh-14); margin-top:0;}
.notice-box-title { margin: 0 0 8px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.notice-box-title.title-md { font-size: var(--fs-md); line-height: var(--lh-md); }
.notice-box ul { list-style: none; margin: 0; padding: 0; }
.notice-box li + li { margin-top: 4px; }
.notice-box-lg li + li { margin-top: 8px; }

/* ========================================================================
 * Tile Card — 240×140 체크박스형 선택 타일 (할인특약 카드 등)
 * ======================================================================*/
.tile-card { position: relative; width: 240px; height: 140px; padding: 24px 16px 24px 24px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); transition: border-color var(--duration) var(--ease-out); }
.tile-card:hover { border-color: var(--color-border-strong); }
.tile-card:has(input:checked) { border-color: var(--color-brand); }
.tile-card.disabled:hover {border-color:var(--color-border);}
.tile-card.disabled { cursor: not-allowed; }
.tile-card.disabled .tile-card-select,
.tile-card.disabled .tile-card-title,
.tile-card.disabled .tile-card-meta-on,
.tile-card.disabled .tile-card-meta-off,
.tile-card.disabled .tile-card-meta-track .fc-brand {color:var(--color-text-muted-4) !important;cursor:not-allowed;}
.tile-card.disabled .tile-card-icon {opacity:0.18;}
.tile-card-select { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.tile-card .btn-edit { position: absolute; top: 25px; right: 17px; z-index: 2; align-items: center; justify-content: center; width: 37px; height: 18px; padding: 1px 7px; border: 1px solid var(--color-text-muted); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 400; white-space:nowrap; cursor: pointer; }
.tile-card .btn-edit.hide { display: none; }
.tile-card .btn-edit.show { display: inline-flex; }
.tile-card input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 0; width: 20px; height: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface); cursor: pointer; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.tile-card input[type="checkbox"]:hover:not(:disabled) { border-color: var(--color-brand); }
.tile-card input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.tile-card input[type="checkbox"]:checked { border-color: var(--color-brand); background-color: var(--color-brand); background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1996 0.599609L3.04009 7.79961L0.599609 5.34533' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: 11px 9px; }
.tile-card.disabled .tile-card-select input[type="checkbox"],
.tile-card input[type="checkbox"]:disabled {background-color:var(--color-surface-subtle);cursor:not-allowed;} 
.tile-card input[type="checkbox"]:disabled:checked { border-color: var(--color-border); background-color: var(--color-surface-muted); background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.1 0.5L2.94048 7.7L0.5 5.24572' stroke='%23666666' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); cursor: not-allowed; }
.tile-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; z-index:1;}
.tile-card-title { font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-base); color: var(--color-text); }
.tile-card.is-checked {border-color: var(--color-brand);}
.tile-card.is-checked .tile-card-title {color:var(--color-text-muted-4);}
.tile-card.is-checked .tile-card-select {cursor:default;}
.tile-card.is-checked .tile-card-meta-on,
.tile-card.is-checked .tile-card-meta-off {color:var(--color-text-subtle);}
.tile-card.is-checked .tile-card-icon {opacity: 0.3;}
.tile-card.is-checked .btn-edit {display:none;}

.tile-card-meta { display: block; height: var(--lh-15); overflow: hidden; font-size: var(--fs-15); font-weight: 500; line-height: var(--lh-15); padding-left:28px;}
.tile-card-meta-track { display: flex; flex-direction: column; transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1); }
.tile-card-meta-off,
.tile-card-meta-on { display: block; height: var(--lh-15); flex-shrink: 0; }
.tile-card-meta-off { color: var(--color-text-tertiary); }
.tile-card-meta-on { color: var(--color-brand); }
.tile-card:has(input:checked) .tile-card-meta-track { transform: translateY(calc(var(--lh-15) * -1)); }
.tile-card-meta:has(br),
.tile-card-meta:has(br) .tile-card-meta-off,
.tile-card-meta:has(br) .tile-card-meta-on { height: calc(var(--lh-15) * 2); }
.tile-card:has(input:checked) .tile-card-meta:has(br) .tile-card-meta-track { transform: translateY(calc(var(--lh-15) * -2)); }
.tile-card-icon { position: absolute; right: 16px; bottom: 8px; width: 70px; height: 70px; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: contain; }

.tile-card-grid { display: grid; grid-template-columns: repeat(3, 240px); justify-content: space-between; row-gap: 24px; }
.tile-card-grid.tile-card-grid-fluid { grid-template-columns: repeat(3, 1fr); column-gap: 24px; justify-content: stretch; }
.tile-card-grid-fluid .tile-card { width: auto; height: 120px; }
.tile-card.tile-card-display { cursor: default; background: var(--color-surface);}
.tile-card.tile-card-display:hover { border-color: var(--color-border); }
.tile-card.tile-card-display .tile-card-icon { right: 7px; bottom: 7px;}
.tile-card.tile-card-display .tile-card-title {font-weight:500;}

/* ========================================================================
 * Picker Card
 * ======================================================================*/
/* .picker-card-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; } */
.picker-card-grid { display: flex; flex-direction:row; gap: 24px; list-style: none; margin: 0; padding: 0; }
.picker-card-grid > li {flex:1;}
.picker-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); text-align: left; cursor: pointer; transition: border-color var(--duration) var(--ease-out); }
.picker-card:hover { border-color: var(--color-border-strong); }
.picker-card:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.picker-card-title { display: block; margin: 0; color: var(--color-text); }
.picker-card-icon { position: absolute; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: contain; }
.picker-card.picker-card-sm { height: 120px; padding: 16px 24px; }
.picker-card-sm .picker-card-title { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; }
.picker-card-sm .picker-card-icon { right: 24px; bottom: 16px; width: 64px; height: 64px; }

/* ========================================================================
 * Data Table
 * ======================================================================*/

.data-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-base); color: var(--color-text); border-top:1px solid var(--color-divider);}
.modal-body-inner > .tab-panel { padding-top: 24px; }
.modal-body-inner.gap-24 > .tab-panel { padding-top: 0;  }
.modal-body-inner > .tab-panel.tab-panel-padded { padding-left: 16px; padding-right: 16px; }
.modal-event .modal-panel { box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.18); }
.modal-event .modal-header { background: var(--color-action-mint); box-shadow: none; }
.modal-event .modal-title { color: var(--color-text-on-brand); }
.modal-event .modal-close { filter: brightness(0) invert(1); }

.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.benefit-card { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.benefit-card-head { display: flex; align-items: start; gap: 16px; padding: 16px 24px; background: var(--color-surface-soft-blue); }
.benefit-card-logo { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; font-size: 10px; font-weight: 700; color: var(--color-text-on-brand); background-repeat: no-repeat; background-position: center; background-size: 30px; }
.benefit-card-logo.benefit-card-bc { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-bc.png) }
.benefit-card-logo.benefit-card-shinhan { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-shinhan.png) }
.benefit-card-logo.benefit-card-samsung { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-samsung.png) }
.benefit-card-logo.benefit-card-hyundai { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-hyundai.png) }
.benefit-card-logo.benefit-card-lotte { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-lotte.png) }
.benefit-card-logo.benefit-card-kb { background-image:url(../../images/pd/pd/dirccar/bank/benefit-card-kb.png) }
.benefit-card-title {margin: 4px 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-text);}
.benefit-card-meta {margin: 8px 0 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--color-text-muted);}
.benefit-card-body {display:flex;flex-direction:column;gap:20px;padding:16px;}
.benefit-card-body .bullet-list > li + li {margin-top: 8px;}
/* .benefit-card-body .benefit-item {display:flex;flex-direction:column;} */
.benefit-card-body .benefit-tag {display:inline-flex;color:var(--color-text);font-size:var(--fs-14);font-weight:500;line-height:var(--lh-14);padding:3px 6px;margin-bottom:8px;border-radius:6px;background:#fff6db;}
.benefit-card-body .benefit-content {margin-top:4px;}

/* .coupon-card { background: #fff6db; border-radius: 8px; box-shadow: var(--shadow-coupon); display: flex; flex-direction: column; }
.coupon-card .benefit-card-head { position: relative; background: transparent; }
.coupon-card .benefit-card-head::before,
.coupon-card .benefit-card-head::after { content: ""; position: absolute; bottom: -8px; width: 16px; height: 16px; background: var(--color-surface); border-radius: 50%; }
.coupon-card .benefit-card-head::before { left: -8px; }
.coupon-card .benefit-card-head::after { right: -8px; } */

.benefit-grid.coupon {width:calc(100% + 8px);gap:16px 8px;}
.coupon-card { position: relative; max-width:328px; min-height:149px; background:url(../../images/pd/pd/dirccar/coupon-bg.png) no-repeat center / 328px 149px; display: flex; flex-direction: column;}
.coupon-card .benefit-card-head { position: relative; background: transparent; min-height:86px; padding: 16px 32px 8px 24px; align-items:flex-start;}
.coupon-card .benefit-card-head .benefit-card-title {font-size:var(--fs-base);line-height:var(--lh-base);}
.coupon-card .benefit-card-body { position: relative; background: transparent; padding:8px 53px 8px 70px;}
.coupon-card .benefit-card-body .bullet-list > li + li {margin-top:4px;}
.coupon-card .benefit-card-body::before { content: ""; position: absolute; top: -1px; left: 20px; right: 28px; height: 1px; background-image: url("../../images/pd/pd/dirccar/dotted-line-yellow.png"); background-repeat: repeat-x; background-position: left center; background-size:contain; pointer-events: none; }

.notice-box-outline > .notice-box-title { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-md); line-height: var(--lh-md); }
.notice-box-title.notice-box-title-sm,
.notice-box-outline > .notice-box-title.notice-box-title-sm { font-size: var(--fs-base); line-height: var(--lh-base); }

.notice-box-sm { padding: 16px; }
.notice-box-sm .notice-box-title { font-size: var(--fs-base); line-height: var(--lh-base); border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.notice-box-sm .bullet-list { color: var(--color-text); }

.table-box { display: flex; flex-direction: column; gap: 8px; }
.section-content .notice-item .table-box { margin-left: -20px; }

.table-box-title { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.table-box-outline { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.table-box-outline > * { margin: 0; }
.data-table th,
.data-table td { height: 56px; padding: 8px; border-right: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); font-size: var(--fs-base); font-weight: 400; color: var(--color-text); text-align: center; vertical-align: middle; }
.data-table th:last-child,
.data-table td:last-child { border-right: 0; }
.data-table th { background: var(--color-surface-info); }
.data-table th:first-child,
.data-table td:first-child { padding: 0 16px; text-align: left; }
.data-table.data-table-left { border-top: 1px solid var(--color-divider); }
.data-table.data-table-left th,
.data-table.data-table-left td { padding: 8px 16px; text-align: left; }
.data-table.data-table-center th,
.data-table.data-table-center td,
.data-table.data-table-center th:first-child,
.data-table.data-table-center td:first-child { padding: 8px; text-align: center; }

.process-flow { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 32px; align-items: center; }
.process-flow > li { width: 400px; min-height: 54px; padding: 16px; background: var(--color-surface-info); border-radius: 8px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap:6px;}
.process-flow > li + li::before { content: ""; position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; background: url("../../images/pd/pd/dirccar/icon-arrow-down.png") no-repeat center / 24px 24px;}

.process-sub-heading { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 700; color: var(--color-text); }
.modal-paragraph { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text); }
.process-step-title { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.process-step-desc {font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-muted);}

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

.row-end { display: flex; justify-content: flex-end; }

.notice-box + .row-end { margin-top: 32px; }
.row-end + .data-table,
.row-end + .table-scroll { margin-top: 8px; }

/* ========================================================================
 * Summary Card
 * ======================================================================*/
.summary-card { padding: 16px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.summary-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 0; row-gap: 0; margin: 0; }
.summary-list > dt,
.summary-list > dd { display: flex; align-items: center; height: 56px; font-size: var(--fs-base); line-height: var(--lh-base); border-bottom: 1px solid var(--color-border); }
.summary-list > dt { padding-left:8px;font-weight: 500; color: var(--color-text-muted); }
.summary-list > dd { margin: 0; padding-left: 32px; padding-right:8px; justify-content: flex-end; font-weight: 700; color: var(--color-text); text-align: right; }
.summary-list > dt:last-of-type,
.summary-list > dd:last-of-type { border-bottom: 0; }
.summary-amount { color: var(--color-brand); font-size: var(--fs-xl); font-weight: 700; }
.summary-unit { margin-left: 4px; font-size: var(--fs-base); font-weight: 700; margin-top:4px;}
.summary-actions { display: flex; gap: 6px; }

.addon-row.accordion-item { border: 0; border-top: 1px solid var(--color-border); border-radius: 0; background: transparent; overflow: visible; }
.addon-row > .accordion-trigger { padding: 0 8px; height: 56px; font-weight: 400; justify-content: flex-start; }
.addon-row .addon-label { color: var(--color-text-muted); font-weight:500; }
.addon-row .addon-value { margin-left: auto; color: var(--color-text); font-weight: 700; }
.addon-row > .accordion-content { padding-left: 8px; padding-right: 8px; font-size: var(--fs-15); line-height: var(--lh-15); color: var(--color-text); font-weight: 400; }
.addon-row[open] > .accordion-content { padding-top: 8px; padding-bottom: 16px; }

.summary-actions .btn { border-color: var(--color-text); color: var(--color-text); font-weight: 400; }
.summary-actions .btn:hover { background: var(--color-surface-subtle); border-color: var(--color-text); }

/* ========================================================================
 * Verify Method Grid — 본인인증 수단 등 옵션 카드 그리드
 * ======================================================================*/
.verify-method-grid { display: grid; grid-template-columns: repeat(3, 150px); gap: 32px 40px; justify-content: center; padding: 16px 0 0; }
.verify-method-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; width: 150px; height: 150px; padding: 32px 14px 24px 16px; background: var(--color-surface-tonal); border: 0; border-radius: 12px; cursor: pointer; font: inherit; color: inherit; transition: background-color var(--duration) var(--ease-out); }
.verify-method-card:hover { background: var(--color-surface-subtle); }
.verify-method-card:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.verify-method-card-label { width: 120px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--color-text); font-weight: 500; }

/* ========================================================================
 * Evidence Card — 증빙자료 등록 행 카드
 * ======================================================================*/
.evidence-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 16px; }

.evidence-card { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 9px 16px 9px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; font: inherit; text-align: left; transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.evidence-card:hover { border-color: var(--color-border-strong);}
.evidence-card:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.evidence-card-start,
.evidence-card-end { display: flex; align-items: center; gap: 8px; }
.evidence-card-text {display:flex;flex-direction:column;gap:4px;}
.evidence-card-title-group {display:flex;align-items:center;gap:8px;}
.evidence-card-title { font-size: var(--fs-md); font-weight: 700; color: var(--color-text); line-height: var(--lh-md); }
.evidence-card-meta { font-size: var(--fs-14); font-weight: 400; color: var(--color-text-muted); line-height: var(--lh-14); }
.evidence-card-meta .checkbox {height:20px;font-size: var(--fs-14); font-weight: 400; color: var(--color-text-muted); line-height: var(--lh-14); }
.evidence-card .badge { padding: 4px 12px; line-height: var(--lh-14); }
.evidence-card .icon-arrow-right { flex: 0 0 20px; }

/* ========================================================================
 * Gray Box — 회색 배경 안내 박스
 * ======================================================================*/
.gray-box { margin: 0; padding: 16px 40px; background: var(--color-surface-tonal); border-radius: var(--radius-md); }
.gray-box-notice { padding: 24px 16px; background: var(--color-surface-muted); border-radius: var(--radius-md); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-tertiary); }
.gray-box-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.gray-box-head > .form-label { margin-bottom: 0; }
.gray-box.account-info-box { margin-left: -16px; margin-right: -16px; padding: 24px 16px; background: var(--color-surface-tonal); }
.gray-box.account-info-box .legal-note {color:var(--color-text-secondary);}
.account-info-box > .form-label { margin-bottom: 24px; }
.account-info-box .checkbox { height: 32px; }
.account-info-box .gray-box-head,
.account-info-box .row-between { min-height: 32px; }
.account-info-box .notice-box {padding:0;margin-top:24px;background:none;border-radius:0;}
.account-info-box.is-collapsed {margin:0;}
.account-info-box.is-collapsed .notice-box {margin-top:0;}
.gray-box.gray-box-lg { padding: 32px 40px; }
.gray-box.gray-box-lg > .gray-box-title { margin-bottom: 24px; }

.card-number-input { display: flex; align-items: center; gap: 8px; width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.card-number-input > input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 0; font-size: var(--fs-base); font-weight: 700; text-align: center; color: var(--color-text); }
.card-number-input > input::placeholder { color: var(--field-placeholder); font-weight: 400;}
.card-number-input > span { flex-shrink: 0; color: var(--color-text-subtle); }
.card-number-input.is-disabled {background-color:var(--field-bg-disabled);}

.save-banner { display: block; }
.save-banner img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.save-banner:hover { filter: brightness(0.97); }

.gray-box-divider { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; column-gap: 24px; padding: 16px; text-align: center; }
.gray-box-divider > dl { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gray-box-divider > dl + dl::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 1px; background: var(--color-border-soft); }
.gray-box-divider.gray-box-divider-asym { grid-template-columns: 127px 151px; justify-content: center; }
.gray-box dt { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; color: var(--color-text-muted); }
.gray-box dd { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 700; color: var(--color-text); }
.gray-box-divider dt,
.gray-box-divider dd { font-size: var(--fs-15); line-height: var(--lh-15); color: var(--color-text-secondary); }
.gray-box-divider dd.disabled {color:var(--color-text-muted);font-weight:500;}
.gray-box .gray-box-diff { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--color-text-muted); text-decoration: line-through; }
.gray-box-rows { display: grid; grid-template-columns: max-content 1fr; column-gap: 32px; row-gap: 8px; text-align: left; }
.gray-box-rows dd { white-space: nowrap; }
.gray-box-rows.gray-box-rows-wrap { row-gap: 16px; }
.gray-box-rows.gray-box-rows-wrap dd { white-space: normal; }
.gray-box-card { padding: 16px; background: var(--color-surface-soft-blue); border: 1px solid var(--color-border); border-radius: 16px; }

/* ========================================================================
 * Modal Message
 * ======================================================================*/
.modal-msg { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); text-align: center; }

/* ========================================================================
 * Modal Message Group
 * ======================================================================*/
.modal-msg-group { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.modal-msg-header,
.modal-msg-title,
.modal-msg-subtitle { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); letter-spacing: 0; color: var(--color-text); text-align: center; }
.modal-msg-header { font-weight: 700; }
.modal-msg-title,
.modal-msg-subtitle { font-weight: 500; }
.modal-msg-desc { margin: 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text-muted); text-align: center; }
.modal-msg-desc.modal-msg-desc-dark { color: var(--color-text); }
.modal-msg-sm { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 500; color: var(--color-text); text-align: center; }
.modal-msg-lg { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); text-align: center; }

/* ========================================================================
 * Modal Headless — 헤더 없는 컨펌 케이스
 * ======================================================================*/

.modal-headless .modal-panel > .modal-body:first-child { padding: 48px 32px 24px; align-items: stretch; }
.modal-headless .modal-body-inner { gap: 16px; align-items: stretch; padding-right: 0; scrollbar-gutter: auto;  }
.modal-headless .modal-footer { height: auto; gap: 8px; padding: 24px 34px; }
.modal-headless .modal-footer .btn-secondary.btn-cancel { background: var(--color-surface-muted); border-color: var(--color-border); color: var(--color-text); }
.modal-headless .modal-footer .btn-secondary.btn-cancel:hover { background: var(--color-divider); border-color: var(--color-border-strong); }
.modal-alert.modal-headless .modal-panel { height: auto; }

/* ========================================================================
 * Checkbox Card
 * ======================================================================*/
.checkbox-card { position: relative; width: 100%; padding: 16px 32px; background: var(--color-surface-soft-blue); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: background-color var(--duration) var(--ease-out), border-color var(--duration) var(--ease-out); cursor: pointer; }
.checkbox-card:has(input:checked) { background: var(--color-brand-soft-50); border-color: var(--color-brand); }
.checkbox-card.radius-16 {border-radius:16px;}
.checkbox-card > .checkbox::after { content: ''; position: absolute; inset: 0; }

.consent-agree-all { position: relative; width: 100%; padding: 11px 32px; background: var(--color-surface); border: 1px solid var(--color-brand); border-radius: var(--radius-lg); }
.consent-agree-all > .checkbox { width: 100%; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 700; color: var(--color-brand); }
.consent-agree-all > .checkbox::after { content: ''; position: absolute; inset: 0; }

/* ========================================================================
 * Gray Box — Title (헤딩 슬롯)
 * ======================================================================*/
.gray-box-title { margin: 0 0 16px; font-size: var(--fs-lg); line-height: var(--lh-lg); font-weight: 700; color: var(--color-text); text-align: center; }

/* ========================================================================
 * Photo Grid + Photo Card — 예시 사진 2열 카드 (figure 패턴)
 * ======================================================================*/
 .photo-grid-box {display:flex;flex-direction:column;gap:24px;padding:32px 36px;border-radius:var(--radius-md);background-color:var(--color-surface-tonal);}
 .photo-grid { display: flex; justify-content: center; column-gap: 24px; }

.photo-grid > figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; flex-shrink: 0; }
.photo-grid > figure > img { display: block; flex-shrink: 0; max-width: none;  }
.photo-card { margin: 0; min-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }

.photo-card-thumb { display: flex; align-items: center; justify-content: center; }
.photo-card-thumb > img,
.photo-card-thumb > svg { display: block; }
.photo-card-label { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 500; color: var(--color-text); text-align: center; }
.photo-card.photo-card-plain { padding: 0; background: transparent; border: 0; }
.photo-card.photo-card-plain .photo-card-label { color: var(--color-text-tertiary); }

/* ========================================================================
 * Photo Upload — 노란 배경 업로드 영역 + 2개 zone
 * ======================================================================*/
.photo-upload-wrap {display:flex;flex-direction:column;gap:8px;padding: 32px 16px;background: var(--color-warning-soft);border-radius: var(--radius-md);}
.photo-upload-wrap .photo-upload {padding:0;}
.photo-upload { display: flex; justify-content: center; gap: 24px; padding: 32px 16px; background: var(--color-warning-soft); border-radius: var(--radius-md); }
.photo-upload-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.photo-upload-zone { position: relative; width: 300px; height: 140px; background-color: var(--color-surface); background-image: url("../../images/pd/pd/dirccar/icon-picture-add.png"); background-repeat: no-repeat; background-position: center; background-size: 40px 40px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: background-color var(--duration) var(--ease-out); }
.photo-upload-zone.has-file { background-image: none; padding: 18px 15px; }
.photo-upload-zone.has-file .photo-upload-preview { position: static; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); }
.photo-upload-zone:has(:focus-visible) { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.photo-upload-zone.is-disabled,
.photo-upload-zone:has(input[type="file"]:disabled) {background-color:var(--color-surface-muted);cursor:not-allowed;}
.photo-upload-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.photo-upload-preview[hidden] { display: none; }
.photo-upload-edit { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; padding: 0; border: 0; background-color: transparent; background-image: url("../../images/pd/pd/dirccar/icon-edit.png"); background-repeat: no-repeat; background-position: center; background-size: 32px 32px; cursor: pointer; }
.photo-upload-edit[hidden] { display: none; }
.photo-upload-edit:hover,
.photo-upload-item:has(.photo-edit-pop:not([hidden]):not(.ng-hide)) .photo-upload-edit { background-image: url("../../images/pd/pd/dirccar/icon-edit-on.png"); }
.photo-upload-edit:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.photo-edit-pop { position: absolute; top: 60px; z-index: 10; width: 361px; background: var(--color-surface); border-radius: var(--radius-md); filter: drop-shadow(var(--shadow-pop)); }
.photo-edit-pop[hidden] { display: none; }
.photo-edit-pop::before { content: ""; position: absolute; top: -11px; left:29px; width: 16.45px; height: 14px; background: url("../../images/pd/pd/dirccar/edit-box-arrow-top.png") no-repeat center / contain; }
.photo-upload-item:first-child:not(:only-child) .photo-edit-pop { left: 239px; }
.photo-upload-item:first-child:not(:only-child) .photo-edit-pop::before { left: 29px; }
.photo-upload-item:last-child:not(:only-child) .photo-edit-pop { right: -6px; }
.photo-upload-item:last-child:not(:only-child) .photo-edit-pop::before { left: auto; right: 29px; }
.photo-upload-item:only-child .photo-edit-pop { left: auto; right: -6px; }
.photo-upload-item:only-child .photo-edit-pop::before { left: auto; right: 29px; }

.photo-edit-pop-title { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-text); }
.photo-edit-pop-item { display: flex; align-items: center; gap: 22px; width: 100%; padding: 8px 24px; background: transparent; border: 0; cursor: pointer; text-align: left; transition: background-color var(--duration) var(--ease-out); }
.photo-edit-pop-item:first-of-type { padding-top: 24px; }
.photo-edit-pop-item:last-of-type { padding-bottom: 24px; }
.photo-edit-pop-item:hover { background: var(--color-surface-subtle); }
.photo-edit-pop-item:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: -2px; }

.photo-edit-pop-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: url(../../images/pd/pd/dirccar/icon-edit-photo.png) no-repeat center / 40px 40px; }
.photo-edit-pop-icon.icon-trash { background-image:url(../../images/pd/pd/dirccar/icon-trash.png); }
.photo-edit-pop-body { display: flex; flex-direction: column; gap: 4px; }
.photo-edit-pop-name { font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 700; color: var(--color-text); }
.photo-edit-pop-desc { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--color-text-tertiary); }
.photo-upload-label { margin: 0; font-size: var(--fs-15); line-height: var(--lh-15); font-weight: 700; color: var(--color-text-tertiary); text-align: center; }

/* ========================================================================
 * Modal Disclaimer — 모달 본문 끝 동의/경고 안내
 * ======================================================================*/
.modal-disclaimer { margin: 0; padding: 0 10px; text-align: center; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); }

/* ========================================================================
 * Empty State — 빈 상태 안내 (전체 제외 후 등)
 * ======================================================================*/
.empty-state-box { position:relative;display:flex;gap:40px;align-items:center;padding:31px 39px;box-sizing: border-box;background: #FFFDFB;border: 1px solid #F3E3DD;box-shadow: 0px 16px 36px rgba(0, 0, 0, 0.045);border-radius: var(--radius-2xl); width:670px; margin:0 auto;}
.empty-state-box .msg-group {display:flex;flex-direction: column;justify-content:space-between;gap:32px;font-size:var(--fs-base);line-height:var(--lh-base);font-weight:500;}
.empty-state-box .msg-group .msg-top,
.empty-state-box .msg-group .msg-bottom {display:flex;flex-direction: column;gap:8px;}
.empty-state-box .empty-state-msg { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; color: var(--color-brand); }
.empty-state-box .empty-state-icon { width: 88px; height: 88px; background: url("../../images/pd/pd/dirccar/icon-empty-photo.png") no-repeat center / contain; }
.ng-scope .empty-state-box + .hint-box {margin-top:60px;}

.no-result { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 16px 0 8px; text-align: center; }
.no-result::before { content: ""; display: block; width: 100px; height: 100px; border-radius: 50%; background: var(--color-surface-subtle) url("../../images/pd/pd/dirccar/no-result.png") no-repeat center / 100px 100px; }
.no-result-text { margin: 0; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 500; color: var(--color-text-muted); }

/* ========================================================================
 * Hint Box — 보조 안내 박스.
 * ======================================================================*/
.hint-box { display: flex; align-items: center; justify-content: space-between; gap: 45px; margin-left: auto; margin-right: auto; padding: 24px 50px; background-color:var(--color-surface-info); width:670px;border:0;}
.hint-box-content { display: flex; flex-direction: column; gap: 10px; }
.hint-box-content .hint-box-title {font-weight: 700;font-size: var(--fs-md);line-height: var(--fs-md);color: var(--color-text);;}
.hint-box-content .hint-box-desc { font-size: var(--fs-base); line-height: var(--lh-base); font-weight:400; color: var(--color-text); }
.hint-box .hint-box-link { display:flex; align-items: center; justify-content: center; width:210px; height:44px; padding:11px 41px 11px 49px; border-radius:var(--radius-md);border:1px solid var(--color-info-strong);background:#fff;display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 700; color: var(--color-info-strong); background-color:var(--color-surface); text-decoration: none; white-space: nowrap;}
.hint-box .hint-box-link:hover {background-color: #F6F8FF;}
.hint-box .hint-box-link:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

.icon-bulb { display: inline-block; flex-shrink: 0; width: 40px; height: 40px; background: url("../../images/pd/pd/dirccar/icon-bulb.png") no-repeat center / contain; }

/* ======================================================================
 * pay-method — 간편결제 브랜드 선택 라디오 카드 (3-col 그리드)
 * ====================================================================== */
.pay-method-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; }
.pay-method { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 24px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; transition: border-color 0.15s, background 0.15s; white-space: nowrap;}
.pay-method:hover:not(:has(input:disabled)) { border-color: var(--color-border-strong); }
.pay-method:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft-50); }
.pay-method > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pay-method-name { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text); }
.pay-method:has(input:checked) .pay-method-name { font-weight: 700; }

.pay-brand { display: inline-block; width: 58px; height: 24px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pay-brand-naver { background-image: url("../../images/pd/pd/dirccar/pay-brand-naver.png"); }
.pay-brand-kakao { background-image: url("../../images/pd/pd/dirccar/pay-brand-kakao.png"); }
.pay-brand-payco { background-image: url("../../images/pd/pd/dirccar/pay-brand-payco.png"); }
.pay-brand-toss { background-image: url("../../images/pd/pd/dirccar/pay-brand-toss.png"); width:81px; }

/* ======================================================================
 * auth-method — 본인확인 방식 선택 라디오 카드 (4-col, 세로 스택: icon + label)
 * ====================================================================== */
.auth-method-grid { display: flex; gap: 32px;} /* 20260915 수정 */
.auth-method { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; width: 150px; height: 150px; padding: 32px 14px 24px 16px; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--color-surface-tonal); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.auth-method:hover:not(:has(input:disabled, input:checked)) { background: var(--color-surface-muted); }
.auth-method:has(input:checked) { border-color: var(--color-brand); }
.auth-method > input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.auth-method-icon { width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; }

.auth-method-icon-naver { background-image: url("../../images/pd/pd/dirccar/auth-method-naver.png"); }
.auth-method-icon-phone { background-image: url("../../images/pd/pd/dirccar/auth-method-phone.png"); }
.auth-method-icon-cert { background-image: url("../../images/pd/pd/dirccar/auth-method-cert.png"); }
.auth-method-icon-card { background-image: url("../../images/pd/pd/dirccar/auth-method-card.png"); }
.auth-method-name { width: 120px; height: 22px; font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 500; color: var(--color-text); text-align: center; }

/* ============================================================================
 * 가입완료 · 컨페티 Lottie
 * ========================================================================= */
.animation-box { width: 376px; height: 226px; margin: 0 auto; overflow: hidden; }

.complete-scene { position: relative; width: 260px; aspect-ratio: 260 / 173; margin: 0 auto 8px;}
.complete-scene .ani-confetti { position: absolute; inset: 0; display: block; width: 100%; height: auto; max-width: 260px; }
.complete-scene .complete-confetti { position:absolute; top:-50px; left:-10%; width:120%; height:120%; z-index: 1; clip-path: inset(0 0 16% 0); visibility: hidden; } /* 떨어지는 컨페티가 스테이지 윗선 아래로 안 내려가게 클립 */
.complete-scene .complete-bg { position:absolute; top:0; left:0; right:0 ;bottom:0; width:100%; height:100%;z-index: 2;}

/* ============================================================================
 * Button · Info (Trust Blue)
 * ========================================================================= */
.btn-info { background: var(--color-info-strong); color: var(--color-text-on-brand); border-color: var(--color-info-strong); }
.btn-info:hover,
.btn-info.is-hover { background: var(--color-info); border-color: var(--color-info); }

/* ============================================================================
 * Banner
 * ========================================================================= */
.banner-area { display: block; overflow: hidden;}
.banner-area .banner-img { display: block; width: 100%; height: auto; }
.banner-area .banner-link:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }

/* ========================================================================
 * Chip Select — 자동너비 칩 단일 선택 그룹 (카테고리 선택 등).
 * ======================================================================*/
.chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-select > .chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--color-surface-subtle); color: var(--color-text-tertiary); font-family: inherit; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 600; white-space: nowrap; cursor: pointer; transition:
 background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.chip-select > .chip:hover:not(.is-active):not(:disabled) { background: var(--color-surface-muted); }
.chip-select > .chip:focus-visible { outline: 2px solid var(--color-brand-ring); outline-offset: 2px; }
.chip-select > .chip.is-active,
.chip-select > .chip[aria-selected="true"] { background: var(--color-text); color: var(--color-text-on-brand); font-weight: 700; }
.chip-select.tabs > .chip { flex: 1 1 auto; }
.chip-select > .chip:disabled,
.chip-select > .chip[aria-disabled="true"] { color: var(--color-text-placeholder); cursor: not-allowed; }
.chip-select.tabs.faq {gap:12px;}

/* ========================================================================
 * FAQ — accordion
 * ======================================================================*/
.faq-title-box {display:flex;justify-content:space-between;width:100%;padding-right:16px;}
.faq-title-box .modal-lead-lg {font-size:22px;font-weight:700;line-height:30px;}
.faq-title-box .faq-img {width:150px;height:110px;background:url("../../images/pd/pd/dirccar/faq-img.png") no-repeat center / contain;}
.faq-accordion {border-top:1px solid var(--color-text);}
.faq-accordion .accordion-item { border: 0; border-bottom: 1px solid var(--color-divider); border-radius: 0; background: transparent; }
.faq-accordion .accordion-item + .accordion-item { margin-top: 0; }
.faq-accordion .accordion-trigger { padding: 18px 0; font-weight: 500; }
.faq-accordion .accordion-trigger .q-mark { display: inline-block; font-size: var(--fs-base); font-weight: 700; line-height: var(--lh-base); color:var(--color-brand    ); width: 20px; margin-right: 4px; }
.faq-accordion .accordion-content { padding-left: 0; padding-right: 0; }
.faq-answer { padding: 16px 24px; background: var(--color-surface-info); border-radius: var(--radius-lg); font-size: var(--fs-15); line-height: var(--lh-15); color: var(--color-text-muted-3); }
.faq-answer p { margin: 0; }
.faq-answer > * + * { margin-top: 12px; }
.faq-answer ol { list-style:decimal;margin: 0; padding-left: 22px; margin-top:8px; }
.faq-answer ol > li + li { margin-top: 4px; }
.faq-answer .bullet-list { font-size: inherit; line-height: inherit; }
.faq-answer .bullet-list > li::before { background: var(--color-text-muted); }
.faq-answer .link,
.link-text { display: block; color: var(--color-info-strong); font-size: var(--fs-15); font-weight: 500; text-decoration: underline; margin-top: 8px; text-underline-offset: 2px; }
.modal-faq .modal-panel { height: min(900px, calc(100vh - 120px)); }
.modal-quick-design .chip-btn-grid.chip-btn-grid-3 { row-gap: 16px; }

/* ========================================================================
 * STEP
 * ======================================================================*/
 .step-box {display:flex;gap:8px;align-items:center;}
 .step-box .step-title {font-size:var(--fs-md);font-weight:700;line-height:var(--lh-md);}

 /* ========================================================================
 * Payment Popup — 외부 결제 제공사(PAYCO / 카카오페이 등) iframe 팝업
 * ======================================================================*/
.modal-pay .modal-panel { width: auto; }
.modal-pay .modal-header { justify-content: flex-end; padding: 12px 12px; }
.modal-pay .pay-frame { display: block; border: 0; max-width: 100%; }

/* * ========================================================================
 * Loading
 * ======================================================================*/
 body.block-ui-visible {overflow: hidden;}
 body.block-ui-visible > .block-ui-container {position:fixed;width:100%;height:100%;opacity:1;z-index:10000;}
 body.block-ui-visible > .block-ui-container .loading-overlay {display:block;}
 .loading-overlay {display:none;position:fixed; top:0; bottom:0; left:0; right:0; z-index:10001;}
 .loading-box {position: absolute; width: 120px; height: 120px; left: calc(50% - 160px/2); top: calc(50% - 120px/2); background: rgba(0,0,0,.5); box-shadow: 0px 9.48px 22.12px -3.16px rgba(0, 0, 0, 0.18); border-radius: 20px; cursor: wait;}
 .loading-box ul {width:80px; height:80px; border-radius: 20px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); overflow:hidden}
 .loading-box ul li .loading-item {width: 80px; height:80px; position:absolute; top:0%; left:0%;  transform: translateX(100%); animation: loading 4.5s /* forwards */ infinite; background:url("../subscribe/images/pd/pd/dirccar/icon-blackbox.png") no-repeat center center; background-size: 80px;}
 .loading-box ul > li .loading-item.blackbox {animation-delay: 0s;background-image: url("../../images/pd/pd/dirccar/icon-blackbox.png");}
 .loading-box ul > li .loading-item.fcw {animation-delay: 0.5s;background-image: url("../../images/pd/pd/dirccar/icon-fcw.png");}
 .loading-box ul > li .loading-item.ldws {animation-delay: 1s;background-image: url("../../images/pd/pd/dirccar/icon-ldws.png");}
 .loading-box ul > li .loading-item.bsd {animation-delay: 1.5s;background-image: url("../../images/pd/pd/dirccar/icon-bsd.png");}
 .loading-box ul > li .loading-item.avm {animation-delay: 2s;background-image: url("../../images/pd/pd/dirccar/icon-avm.png");}
 .loading-box ul > li .loading-item.hud {animation-delay: 2.5s;background-image: url("../../images/pd/pd/dirccar/icon-hud.png");}
 .loading-box ul > li .loading-item.mileage {animation-delay: 3s;background-image: url("../../images/pd/pd/dirccar/icon-mileage.png");}
 .loading-box ul > li .loading-item.ubi {animation-delay: 3.5s; background-image: url("../../images/pd/pd/dirccar/icon-ubi-80.png");}
 .loading-box ul > li .loading-item.child {animation-delay: 4s;background-image: url("../../images/pd/pd/dirccar/icon-child.png");}
 /* .loading-box ul > li .loading-item.five-day {animation-delay: 4.5s;background-image: url("../../images/pd/pd/dirccar/icon-five-day.png");} */

@keyframes loading {
    0%{transform: translate(100%, 10px) rotate(30deg) scale(.7);}
    5%{transform: translate(-5%, 0) rotate(-2deg) scale(1.05);}
    10%{transform: translate(0%, 0px) scale(1)}
    20%{transform: translate(-100%, 10px) rotate(-30deg) scale(.7);}
    100%{transform: translate(-100%, 10px) scale(.7)}
}

/* ========================================================================
 * Toast  UI.toast.show(message) 로 호출
 * ======================================================================*/
.toast-stack { position: fixed; left: 50%; bottom: 104px; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; width: 656px; padding: 16px; gap: 4px; border-radius: var(--radius-md); background: var(--color-toast-bg); color: var(--color-text-on-brand); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: 400; opacity: 0; transform: translateY(8px); transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out); pointer-events: auto; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast-message { flex: 1; min-width: 0; }
.toast.toast-success { background: var(--color-success); }
.toast.toast-error { background: var(--color-danger); }
.toast.toast-warning { background: var(--color-warning); color: var(--color-text); }

/* ========================================================================
 * Print Preview — 인쇄 미리보기 모달 내 이미지 자리 표시 영역
 * ======================================================================*/
.modal-print-preview .modal-panel { height: 916px; max-height: min(916px, calc(100vh - 120px)); }
.print-preview { flex: 1 1 auto; min-height: 676px; display: flex; align-items: center; justify-content: center; background: var(--color-border); border-radius: 0; overflow: hidden; color: var(--color-text); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 700; }
.print-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ========================================================================
 * Print Sheet — A4 보험료 계산결과 인쇄 문서
 * ======================================================================*/
.print-sheet { max-width: 595px; width:100%; margin: 0 auto; background: var(--color-surface); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text);transform-origin:top; /* transform:scale(0.585);*/}
.print-sheet .print-header { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 20px; background: #ef3b24; color: #fff; }
.print-sheet .print-header .print-header-brand {display:inline-flex;align-items:center;gap:12px;margin:0;}
.print-sheet .print-header .print-header-logo { flex-shrink: 0; display: inline-block; width: 120px; height: 24px;}
.print-sheet .print-header .print-header-title { font-size: 16px; line-height: 20px; font-weight: 700; color: #fff;}

.print-sheet .print-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 32px 24px; background: #fff; border: 1px solid var(--color-border); border-top:0;}
.print-sheet .print-section-title {padding:4px 0 3px; font-size: 14px; line-height: 18px; font-weight: 700; color: #111111;}

.print-sheet .print-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 17px; border-top: 1px solid #111; border-bottom: 1px solid var(--color-border); }
.print-sheet .print-table th,
.print-sheet .print-table td { height: 29px; padding: 6px 8px 5px; border-bottom: 1px solid #ddd; text-align: left; font-weight: 400; vertical-align: baseline; }
.print-sheet .print-table th:first-child,
.print-sheet .print-table td:first-child { padding-left: 0; }
.print-sheet .print-table th:last-child,
.print-sheet .print-table td:last-child { padding-right: 0; }
.print-sheet .print-table tbody tr:last-child th,
.print-sheet .print-table tbody tr:last-child td { border-bottom: 0; }
.print-sheet .print-table th[scope="row"] { color: #666; font-weight: 500; white-space: nowrap; }
.print-sheet .print-table td.value { color: #111111; white-space: nowrap; }
.print-sheet .print-table td.align-right {text-align: right}
.print-sheet .fc-red { color: #ef3b24 !important; }
.print-sheet .fc-blue { color: #3e6ae1 !important; }
.print-sheet .align-right { text-align: right; }

.print-sheet .col-96 { width: 96px; }
.print-sheet .col-140 { width: 140px; }
.print-sheet .col-240 { width: 140px; }

.print-sheet .list-dot { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 14px; font-weight: 400; color: #666666; }
.print-sheet .list-dot > li { position: relative; padding-left: 8px; font-size: 12px; line-height: 14px; }
.print-sheet .list-dot > li::before { content: ""; position: absolute; left: 0; top: 6px; width: 2px; height: 2px; background: #666666; }
.print-sheet .list-dot > li + li { margin-top: 4px; }

@media print {
    .print-sheet { max-width: none; }
    .print-section { break-inside: avoid; }
    .print-table tr { break-inside: avoid; }
    .print-sheet, .print-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 1388px) {
    .page-wrap {min-width: 1200px;}
    .benefit-swiper .ui-swiper-arrow-prev,
    .benefit-swiper .ui-swiper-arrow-prev:hover {left:0; opacity: 0.6;}
    .benefit-swiper .ui-swiper-arrow-next,
    .benefit-swiper .ui-swiper-arrow-next:hover {right:0; opacity: 0.6;}
    /* .print-sheet {transform:scale(0.55);} */
}