/* ========================================================================
 * Hero — quote form
 * ======================================================================*/
.hero { padding: 68px 0 40px; }
.hero .container { padding: 0; }
.hero-title { font-size: var(--fs-3xl); line-height: 40px; font-weight: 700; color: var(--color-text); margin-bottom: 40px; }
.hero-quote { background: var(--color-surface); border: 1px solid var(--color-brand); border-radius: 999px; padding: 37px 61px 37px 69px; height: 144px; display: flex; align-items: center; gap: 34px; box-shadow: var(--shadow-sm); }
.quote-cell-group { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 72px; padding: 5px 0; }
.hero-quote .quote-cell { position: relative; display: flex; flex-direction: column; gap: 16px; justify-content: center; flex: 1 1 0; min-width: 0; height: 60px; }
.hero-quote .quote-cell:nth-child(1) { flex: 0 0 180px; }
.hero-quote .quote-cell:nth-child(2) { flex: 0 0 212px; }
.hero-quote .quote-cell:nth-child(3) { flex: 0 0 220px; }
.quote-cell-label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-base); font-weight: 400; line-height: 1.25; color: var(--color-text-muted-2);   }
.quote-cell-label .badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--color-brand); color: var(--color-text-on-brand); font-size: 10px; font-weight: 700; margin-left: 4px; vertical-align: middle; }
.quote-cell-input { border: 0; background: transparent; font-size: var(--fs-lg); font-weight: 500; line-height: 1.2; color: var(--color-text); width: 100%; padding: 0; border-radius: var(--radius-sm); }
.quote-cell-input:focus-visible { outline-offset: 5px; }
.quote-cell-input::placeholder { color: var(--color-text-tertiary); font-weight: 500; }
.quote-cell:focus-within .quote-cell-label { color: var(--color-text); font-weight: 600; }
.quote-rrn { display: flex; align-items: center; gap: 0; width:250px;}
.quote-rrn input { flex: 0 0 80px; width: 100%; }
.quote-rrn .quote-rrn-back {letter-spacing: 1px; }
.quote-rrn .rrn-line { flex: 0 0 10px; width: 10px; height: 1px; background: var(--color-text-tertiary); align-self: center; margin: 0 24px 0 8px; }
.quote-rrn .icon-mouse {flex:0 0 24px;margin-left:8px;}
.quote-cell .field-help {display:none;position:absolute;bottom:-22px;font-size:var(--fs-sm);color:var(--color-brand);margin-top:8px;}
.quote-cell.field-error .field-help {display:block;}
.hero-quote .btn-quote { flex: 0 0 auto; width: 260px; height: 70px; border-radius: 60px; background: var(--color-brand); color: var(--color-text-on-brand); font-weight: 700; font-size: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; transition: background-color var(--duration) var(--ease-out); white-space: nowrap; }
.hero-quote .btn-quote:not(:disabled):hover { background: var(--color-brand-hover); }
.hero-quote .btn-quote:disabled { background: var(--color-brand-disabled); cursor: not-allowed; }
.hero-meta { margin-top: 16px; margin-right: 72px; display: flex; justify-content: flex-end; font-size: var(--fs-base); font-weight: 400; color: var(--color-border-strong); }
.hero-meta-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: color var(--duration) var(--ease-out); }
.hero-meta-btn:hover { color: var(--color-text); }

/* ========================================================================
 * Promo — 특약할인 carousel
 * ======================================================================*/

.section.section-padded { padding: 40px 0; }
.section-head { margin-bottom: 32px; }
.section-title { font-size: var(--fs-3xl); line-height: 40px; font-weight: 700; color: var(--color-text); }
.section .section-title { font-size: 36px; line-height: 40px; font-weight: 300; letter-spacing: -2px; }
.section-title em { font-weight: inherit; color: var(--color-brand); }
.section-title-eyebrow { display: block; font-size: var(--fs-xl);line-height: 36px; font-weight: 300; letter-spacing: -2px; }
.section-title-body { display:flex;}
.section-title-body .section-title-end {display:flex;flex-direction:column;gap:2px;margin-left:auto;letter-spacing: 0;padding:4px 0}
.section-title-body .title-desc {font-size:var(--fs-sm);font-weight:400;line-height:var(--lh-sm);color:var(--color-text-muted-2);letter-spacing: 0;margin-left:auto;text-align:right;}
.section-title-body .section-title-end .compliance-note {font-size:var(--fs-sm);font-weight:400;line-height:var(--lh-sm);margin:0;;color:var(--color-text-muted-2);}

/* ========================================================================
 * Banner area
 * ======================================================================*/
.main-strip-banner { position: relative; height: 350px; margin-top: 34px; background: var(--color-card-sky) url("../../images/pd/pd/dirccar/banner-bg-wave.png") no-repeat bottom center / 100% auto; overflow: hidden; }
.main-strip-banner .banner-benefit { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1180px; height: 350px; overflow: hidden; display:flex; justify-content:center; align-items: center;}
.main-strip-banner .banner-benefit img { display: block; width:1180px; height:350px; max-width: none;  }
.renewal { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.renewal-title-img { flex: 0 0 auto; width: 395px; height: auto; display: block; }
.renewal-illust-img { flex: 0 0 auto; width: 540px; height: auto; display: block; align-self: flex-start; margin-top: -93px; }

/* ========================================================================
 * FAQ + 안내 cards
 * ======================================================================*/
.help-section { margin: 60px 0 0; }
.help-section .section-head { margin-bottom:24px; }
.help-grid { display: grid; grid-template-columns: 550fr 599fr; gap: 31px; align-items: start; }
.faq-list { width: 550px; display: flex; flex-direction: column; border: 1px solid var(--color-divider); border-radius: 24px; overflow: hidden; background: var(--color-surface); padding: 11px 24px; }
.faq-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 0; font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 400; color: var(--color-text-secondary); border-bottom: 1px solid var(--color-divider); cursor: pointer; }
.faq-item:last-child { border-bottom: 0; }
.faq-item .faq-tit { flex: 1; min-width: 0; appearance: none; background: transparent; border: 0; padding: 0; margin: 0; font: inherit; line-height: inherit; color: inherit; text-align: left; cursor: pointer; }
.faq-item .faq-tit:hover { font-weight: 700; }
.faq-item .chev { flex: 0 0 16px; width: 16px; height: 16px; align-self: flex-start; margin: 2px 0;  background: url("../../images/pd/pd/dirccar/icon-arrow-right-16.png") no-repeat center / contain; }
.faq-item .faq-tit.has-arrow {position:relative;display:flex;gap:14px;justify-content:space-between;}
.faq-item .faq-tit.has-arrow::after {content:'';flex: 0 0 16px; width: 16px; height: 16px; align-self: flex-start; flex-shrink: 0; margin: 2px 0; background: url("../../images/pd/pd/dirccar/icon-arrow-right-16.png") no-repeat center / contain;}
.help-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; }
.help-card { background: var(--color-help-cream); border-radius: 20px; width: 189px; height: 189px; padding: 26px 12px; text-align: center; cursor: pointer; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out); }
.help-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.help-card-icon { width: 100px; height: 100px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.help-card-icon-1 { background-image: url("../../images/pd/pd/dirccar/help-icon-01.png"); }
.help-card-icon-2 { background-image: url("../../images/pd/pd/dirccar/help-icon-02.png"); }
.help-card-icon-3 { background-image: url("../../images/pd/pd/dirccar/help-icon-03.png"); }
.help-card-icon-4 { background-image: url("../../images/pd/pd/dirccar/help-icon-04.png"); }
.help-card-icon-5 { background-image: url("../../images/pd/pd/dirccar/help-icon-05.png"); }
.help-card-title { font-size: var(--fs-base); font-weight: 700; color: var(--color-text-secondary); }

/* ========================================================================
 * Reveal animation
 * ======================================================================*/
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.bg-subtle { background: var(--color-surface-subtle); }
.fc-brand    { color: var(--color-brand) !important; }
.fc-strong   { color: var(--color-text) !important; }
.fc-muted    { color: var(--color-text-muted) !important; }
.fc-muted-2  { color: var(--color-text-muted-2) !important; }
.fc-muted-3  { color: var(--color-text-muted-3) !important; }
.fc-subtle   { color: var(--color-text-subtle) !important; }
.fc-on-brand { color: var(--color-text-on-brand) !important; }
.fc-info     { color: var(--color-info-strong) !important; }
.fc-success  { color: var(--color-success) !important; }
.fc-danger   { color: var(--color-danger) !important; }
.fc-warning  { color: var(--color-warning) !important; }
.fc-coral    { color: var(--color-secondary-coral) !important; }
.fc-tertiary {color: var(--color-text-tertiary) !important; }

.divider-pipe { display: inline-block; width: 1px; height: 13px; margin: 0 8px; background: var(--color-border-soft); vertical-align: middle; }
.flex {display:flex;}
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1 !important; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.row-item { display: flex; align-items: center; gap: 16px; }
.row-align-end { align-items: flex-end; }

.gap-0  { gap: 0    !important; }
.gap-4  { gap: 4px  !important; }
.gap-6  { gap: 6px  !important; }
.gap-8  { gap: 8px  !important; }
.gap-10 { gap: 10px !important; }
.gap-12 { gap: 12px !important; }
.gap-16 { gap: 16px !important; }
.gap-24 { gap: 24px !important; }
.gap-32 { gap: 32px !important; }
.gap-40 { gap: 40px !important; }
.gap-60 { gap: 60px !important; }
.gap-80 { gap: 80px !important; }
.gap-100 { gap: 100px !important; }

.gap-0 > *,
.gap-4 > *,
.gap-8 > *,
.gap-12 > *,
.gap-16 > *,
.gap-24 > *,
.gap-32 > *,
.gap-40 > *,
.gap-80 > *,
.gap-100 > * { margin-bottom: 0; }

.self-start { align-self: flex-start !important; }

.pl-0 { padding-left: 0 !important; }

.fs-13 {font-size: var(--fs-sm);}
.fs-14 {font-size: var(--fs-14);}
.fs-15 {font-size: var(--fs-15);}
.fs-base {font-size: var(--fs-base);}

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }
.text-base {font-size: var(--fs-base);line-height:var(--lh-base);font-weight:500;}
.link {text-decoration: underline;text-underline-offset:2px;}

.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: 4px  !important; }
.mt-6  { margin-top: 6px  !important; }
.mt-8  { margin-top: 8px  !important; }
.mt-10  { margin-top: 10px !important; }
.mt-12  { margin-top: 12px !important; }
.mt-16  { margin-top: 16px !important; }
.mt-20  { margin-top: 20px !important; }
.mt-24  { margin-top: 24px !important; }
.mt-28  { margin-top: 28px !important; }
.mt-32  { margin-top: 32px !important; }
.mt-36  { margin-top: 36px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-44 { margin-top: 44px !important; }
.mt-48 { margin-top: 48px !important; }
.mt-52 { margin-top: 52px !important; }
.mt-56 { margin-top: 56px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-64 { margin-top: 64px !important; }
.mt-68 { margin-top: 68px !important; }
.mt-72 { margin-top: 72px !important; }
.mt-76 { margin-top: 76px !important; }
.mt-80 { margin-top: 80px !important; }

.hide { display: none !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: 4px  !important; }
.mb-8  { margin-bottom: 8px  !important; }
.mb-12  { margin-bottom: 12px !important; }
.mb-16  { margin-bottom: 16px !important; }
.mb-20  { margin-bottom: 20px !important; }
.mb-24  { margin-bottom: 24px !important; }
.mb-28  { margin-bottom: 28px !important; }
.mb-32  { margin-bottom: 32px !important; }
.mb-36  { margin-bottom: 36px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-44 { margin-bottom: 44px !important; }
.mb-48 { margin-bottom: 48px !important; }
.mb-52 { margin-bottom: 52px !important; }
.mb-56 { margin-bottom: 56px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-64 { margin-bottom: 64px !important; }
.mb-68 { margin-bottom: 68px !important; }
.mb-72 { margin-bottom: 72px !important; }
.mb-76 { margin-bottom: 76px !important; }
.mb-80 { margin-bottom: 80px !important; }

.ml-2 { margin-left: 2px !important; }
.ml-4 { margin-left: 4px !important; }
.ml-8 { margin-left: 8px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-12 { margin-left: 12px !important; }
.ml-16 { margin-left: 16px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-24 { margin-left: 24px !important; }

.p-0 {padding: 0 !important;}
.pdl-15 {padding-left: 15px !important;}
.pdr-0 { padding-right: 0 !important; }
.pdr-20 {padding-right: 20px !important;}
.pdb-24 {padding-bottom: 24px !important;}
.pdb-50 {padding-bottom: 50px !important;}
.pd-md {padding: 24px 16px !important;}
.pd-24 {padding: 24px !important;}

.list-decimal { list-style: decimal; padding-left: 20px; }
.list-disc { list-style: disc; padding-left: 20px; }
.list-decimal .bullet-list { padding-left: 0; }
.list-decimal-pad { list-style: none; padding: 0 0 16px; margin: 0; counter-reset: lpad; }
.list-decimal-pad > li { counter-increment: lpad; position: relative; padding-left: 30px; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text-muted); }
.list-decimal-pad > li + li { margin-top: 16px; }
.list-decimal-pad > li::before { content: counter(lpad, decimal-leading-zero) "."; position: absolute; left: 0; color: var(--color-text-muted); }
.list-decimal-pad .row-item {gap:8px;}
.list-decimal-pad .logo-kidc {margin-top:2px;}
.modal-body-inner > .list-decimal-pad {padding-bottom:0;}

.list-num { list-style: none; padding: 0; margin: 0; counter-reset: lnum; display: flex; flex-direction: column; gap: 8px; }
.list-num > li { counter-increment: lnum; position: relative; padding-left: 18px; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--color-text); }
.list-num > li::before { content: counter(lnum) "."; position: absolute; left: 0; color: var(--color-text); }
.list-num .sub-text { display: block; margin-top:2px;}

/* ========================================================================
 * Page layout helpers
 * ======================================================================*/
/* .contents {padding-bottom: 80px; } */
.contents.container,
main.contents > .container { padding-left: 0; padding-right: 0; }
.progress-bar-box { width: 836px; max-width: 100%; height: 115px; margin: 0 auto 40px; padding: 24px 40px; background: var(--color-surface); border-radius: 24px; }
.grid-box { display: grid; grid-template-columns: 300px 820px; gap: 60px; justify-content: center; }
.grid-box > section { width: 820px; min-width: 0; }
.sidebar-layout { display: grid; grid-template-columns: 300px minmax(0, 820px); column-gap: 60px; row-gap: 0; justify-content: center; padding-bottom:60px;}
.sidebar-layout.is-sidebar-hidden { grid-template-columns: minmax(0, 1fr); }
.sidebar-layout.is-sidebar-hidden .sidebar-stack,
.sidebar-layout .sidebar-stack.hide {display: none;}
.sidebar-layout:has(.sidebar-stack[hidden]),
.sidebar-layout:has(.sidebar-stack.hide) { grid-template-columns: minmax(0, 1fr); }
.sidebar-layout:not(:has(.sidebar-stack)) { grid-template-columns: minmax(0, 1fr); }
.sidebar-layout:has(.sidebar-stack.show) { grid-template-columns: 300px minmax(0, 820px);}
.sidebar-layout .sidebar-stack.show { display: flex;}
.sidebar-layout .main-col { min-width: 0; min-height: 642px; display: flex; flex-direction: column; }
.sidebar-layout .main-col-split { justify-content: space-between; }
.main-col-body.main-col-split { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.sidebar-stack { align-self: start; width: 300px; display: flex; flex-direction: column; gap: 20px; }
.sidebar-stack > .sidebar { position: static; width: 100%; }
.sidebar-header { width: 257px; height: 120px; background-repeat: no-repeat; background-position: center; background-size: 257px 120px; margin:0 auto;}
.sidebar-header-1 { background-image: url("../../images/pd/pd/dirccar/ani/ani-car-step-01.png"); }
.sidebar-header-2 { background-image: url("../../images/pd/pd/dirccar/ani/ani-car-step-02.png"); }
.sidebar-header-3 { background-image: url("../../images/pd/pd/dirccar/ani/ani-car-step-03.png"); }
.sidebar-header-4 { background-image: url("../../images/pd/pd/dirccar/ani/ani-car-step-04.png"); }
.sidebar-header:has(> .sidebar-header-art),
.sidebar-header:has(> video) { background: var(--color-surface); }
.sidebar-header > .sidebar-header-art,
.sidebar-header > video,
.sidebar-header > svg { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--color-surface); pointer-events: none; }

/* step animation */
.sidebar-header:has(> .ani-scene) { background: var(--color-surface); }
.ani-scene { position: relative; width: 100%; height: 100%; overflow: hidden; }
.ani-scene [class^="ani-"],
.ani-scene [class^=" ani-"] { position: absolute; background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; }
.ani-scene .ani-cloud { z-index: 1; background-image: url("../../images/pd/pd/dirccar/ani/ani-cloud.png"); display:none;}
.ani-scene .ani-cloud-1 { top: 13px; left: 57px; width: 31px; height: 24px; animation: ani-cloud-1 13s ease-in-out infinite alternate; }
.ani-scene .ani-cloud-2 { top: 4px; left: 208px; width: 31px; height: 24px; animation: ani-cloud-2 13s ease-in-out infinite alternate; }
.ani-scene .ani-paper,
.ani-scene .ani-obj-1 { left: 60px; bottom: 21px; width: 46px; height: 57px; z-index: 3; background-image: url("../../images/pd/pd/dirccar/ani/ani-paper.png");}
.ani-scene .ani-pencil,
.ani-scene .ani-obj-2 { left: 91px; bottom: 15px; width: 19px; height: 29px; z-index: 4; background-image: url("../../images/pd/pd/dirccar/ani/ani-pencil.png"); transform-origin: 19% 80%; animation: ani-pencil 2.6s ease-in-out infinite; }
.ani-scene .ani-clipboard,
.sidebar-header-2 .ani-scene .ani-obj-1 { left: 61px; bottom: 18px; width: 38px; height: 59px; z-index: 3; background-image: url("../../images/pd/pd/dirccar/ani/ani-clipboard.png");}
.ani-scene .ani-circle-percent,
.sidebar-header-2 .ani-scene .ani-obj-2 { left: 84px; bottom: 16px; width: 24px; height: 24px; z-index: 4; background-image: url("../../images/pd/pd/dirccar/ani/ani-circle-percent.png"); transform-origin: 50% 100%; animation: ani-percent-pop 1.3s ease-in-out infinite; }
.ani-scene .ani-sheet,
.sidebar-header-3 .ani-scene .ani-obj-1 { left: 41px; bottom: 34px; width: 69px; height: 50px; z-index: 3; background-image: url("../../images/pd/pd/dirccar/ani/ani-sheet.png");}
.ani-scene .ani-search,
.sidebar-header-3 .ani-scene .ani-obj-2 { left: 84px; bottom: 41px; width: 17px; height: 17px; z-index: 4; background-image: url("../../images/pd/pd/dirccar/ani/ani-search.png"); animation: ani-search-scan 3s ease-in-out infinite; }
.ani-scene .ani-board,
.sidebar-header-4 .ani-scene .ani-obj-1 { left: 50px; bottom: 41px; width: 44px; height: 43px; z-index: 3; background-image: url("../../images/pd/pd/dirccar/ani/ani-board.png");}
.ani-scene .ani-check,
.sidebar-header-4 .ani-scene .ani-obj-2 { left: 60px; bottom: 50px; width: 25px; height: 25px; z-index: 4; background-image: url("../../images/pd/pd/dirccar/ani/ani-check.png"); border-radius:50%; overflow:hidden; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; animation: ani-board-pop 0.5s cubic-bezier(0.34, 1.7, 0.5, 1) 0.1s both; }
.ani-scene .ani-check::before,
.sidebar-header-4 .ani-scene .ani-obj-2::before { content: ""; position: absolute; inset: 0; background-color: #fd6871; -webkit-mask: url("../../images/pd/pd/dirccar/ani/ani-check.png") center / contain no-repeat; mask: url("../../images/pd/pd/dirccar/ani/ani-check.png") center / contain no-repeat; animation: ani-check-reveal 0.5s ease-in 0.5s both; }
.ani-scene .ani-tree { right: 51px; bottom: 14px; width: 27px; height: 42px; z-index: 2; background-image: url("../../images/pd/pd/dirccar/ani/ani-tree.png"); transform-origin: 50% 100%; /* animation: ani-tree-sway 4s ease-in-out infinite; */ }
.ani-scene .ani-tree-small { left: 42px; bottom: 15px; width: 15px; height: 24px; z-index: 5; background-image: url("../../images/pd/pd/dirccar/ani/ani-tree.png"); transform-origin: 50% 100%; /* animation: ani-tree-sway 4.6s ease-in-out -1.5s infinite; */ }
.ani-scene .ani-car { left: 0; top: 0; width: 100%; height: 100%; z-index: 0;background-color:var(--color-surface);background:url(../../images/pd/pd/dirccar/ani/ani-car-wave.png) no-repeat center / contain;}
.sidebar-header-4 .ani-scene .ani-car {background-image:url(../../images/pd/pd/dirccar/ani/ani-car-card.png);}
.sidebar-header-4 .ani-tree,
.sidebar-header-4 .ani-tree-small {display:none;}

@keyframes ani-cloud-1 {
  0%   { transform: translate(-24px, 0); }
  25%  { transform: translate(-12px, -3px); }
  50%  { transform: translate(0, 1px); }
  75%  { transform: translate(12px, -2px); }
  100% { transform: translate(24px, 2px); }
}
@keyframes ani-cloud-2 {
  0%   { transform: translate(-22px, 0); }
  25%  { transform: translate(-11px, 2px); }
  50%  { transform: translate(0, -2px); }
  75%  { transform: translate(11px, 1px); }
  100% { transform: translate(22px, -3px); }
}
@keyframes ani-pencil {
  0%   { transform: translate(0, 0)           rotate(-4deg); }
  9%   { transform: translate(-1.8px, -1.6px) rotate(3deg); }     /* ① 위로 */
  16%  { transform: translate(-3.4px, -0.6px) rotate(6deg); }     /* 오른쪽으로 돌며(고리 위) */
  23%  { transform: translate(-2.7px, 1.2px)  rotate(0deg); }     /* 아래로(고리 닫기) */
  30%  { transform: translate(-4.6px, 0.2px)  rotate(-3deg); }    /* 고리 빠져 진행 */
  39%  { transform: translate(-6.4px, -1.5px) rotate(4deg); }     /* ② 위로 */
  46%  { transform: translate(-8px, -0.5px)   rotate(6deg); }     /* 돌며(고리 위) */
  53%  { transform: translate(-7.3px, 1.2px)  rotate(0deg); }     /* 아래로(고리 닫기) */
  60%  { transform: translate(-9.5px, 0.2px)  rotate(-3deg); }    /* 진행(가장 왼쪽) */
  70%  { transform: translate(-7px, 1px)      rotate(2deg); }     /* 흐르듯 복귀 */
  80%  { transform: translate(-4.6px, -0.9px) rotate(-2deg); }
  90%  { transform: translate(-2.2px, 0.7px)  rotate(2deg); }
  100% { transform: translate(0, 0)           rotate(-4deg); }
}
@keyframes ani-tree-sway {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
@keyframes ani-percent-pop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20%      { transform: translateY(0) scale(1.06, 0.94); }
  45%      { transform: translateY(-8px) scale(0.97, 1.05); }
  68%      { transform: translateY(0) scale(1.08, 0.9); }
  82%      { transform: translateY(-3px) scale(1, 1); }
}
@keyframes ani-search-scan {
  0%   { transform: translate(-4px, -2px); }
  25%  { transform: translate(4px, -2px); }
  50%  { transform: translate(-4px, 5px); }
  75%  { transform: translate(4px, 5px); }
  100% { transform: translate(-4px, -2px); }
}
@keyframes ani-board-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  95%   { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes ani-check-reveal {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

@media (prefers-reduced-motion: reduce) { .ani-cloud-1, .ani-cloud-2, .ani-pencil, .ani-tree, .ani-tree-small, .ani-circle-percent, .ani-search, .ani-check, .ani-board, .ani-obj-1, .ani-obj-2 { animation: none; } .ani-scene .ani-check::before, .ani-scene .ani-obj-1::before { display: none; } }
.progress-bar-inline { display:none; align-items: center; justify-content: center; width: 820px; height: 140px; padding: 24px 40px; margin: 0 auto 24px;}
.page-title { text-align: center; font-size: 26px; font-weight: 700; line-height: 32px; letter-spacing: 0; color: var(--color-text); padding: 60px 0 48px;}
/* .page-title:has(+ .tabs) { margin-bottom: 24px; } */
.page-title.page-title-md { font-size:28px; line-height:36px; }
.page-title.page-title-lg { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 36px; margin-bottom: 24px; }
.main-col-body { padding: 0 16px 30px; }
.main-col-body.main-col-body-center { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tabs ~ .main-col-body { padding-top: 40px; }
.main-col-footer { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.logo-kidc {display:inline-block;width:49px;height:32px;}

/* ============================================================================
 * Page · 99 가입완료
 * ========================================================================= */
.complete-page { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap:0; padding-top: 30px;}
.title-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.title-group > * { margin: 0; }
.complete-page .title-group {gap:4px;}
.complete-page-lead { margin: 0; text-align: center; color: var(--color-text); font-size: var(--fs-md); font-weight: 400; line-height: var(--lh-md); }
.complete-page-actions { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.complete-page-actions .btn {font-weight:400;}
.summary-group { display: flex; flex-direction: column; gap: 16px; }
.complete-page .summary-card {padding-top:8px;padding-bottom:8px;}
.complete-page .page-title {padding:0;font-size:var(--fs-xl);line-height:var(--lh-xl);}
.complete-page .btn-group { gap:26px;}
.card-group { display: flex; flex-direction: column; gap: 16px; }
.card-group.card-row {flex-direction: row;gap:28px;}
.card-group:has(> .choice-card-split) { gap: 24px; }
.card-group + .card-group,
.main-col-body > .card-group + .card-group { margin-top: 40px; }
.maker-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.trim-filter-row { display: flex; align-items: center; gap: 12px; }
.trim-filter-row .dropdown { flex-shrink: 0;    }
.trim-filter-row .dropdown-toggle { height: 54px; padding: 0 var(--field-pad-x-lg); }
.trim-filter-row .dropdown-menu { width: 100%; }
.trim-filter-row .dropdown:has(.dropdown-toggle[aria-expanded="true"]) { filter: drop-shadow(0 4px 12px rgba(15, 23, 42, 0.12)); }
.trim-filter-row .dropdown-toggle[aria-expanded="true"],
.trim-filter-row .dropdown:has(.dropdown-toggle[aria-expanded="true"]) .dropdown-menu { box-shadow: none; }
.trim-filter-row .dropdown-item { height: 54px; display: flex; align-items: center; padding: 0 20px; font-size: var(--fs-base); }
.trim-filter-row .dropdown-item.is-active { font-weight: 700; }
.maker-all-grid { display: none; }
.tab-panel:has(.filter-chip-all.is-selected) .maker-grid { display: none; }
.tab-panel:has(.filter-chip-all.is-selected) .maker-all-grid { display: grid; }
.tab-panels-stacked { display: grid; }
.tab-panels-stacked > .tab-panel { grid-column: 1; grid-row: 1; }
.tab-panels-stacked > .tab-panel[hidden] { display: block; visibility: hidden; }