@charset "utf-8";
/* ==========================================================================
   카앤쿡 웹앱 common.css
   - 디자인 기준 402px (모바일) / 웹앱 프레임 최대 768px
   - 공홈(css/common.css)과 디자인 시스템이 다르므로 토큰·클래스를 공유하지 않습니다.

   [타이포그래피 사용 규칙]
   - 글자 크기 · 행간 · 자간은 "4. 타이포그래피" 클래스로만 지정합니다.
     컴포넌트 CSS 에는 font-size / line-height / letter-spacing 을 쓰지 않습니다.
   - 마크업에서 컴포넌트 클래스 + 타이포 클래스를 함께 붙입니다.
       <a class="square-btn main-btn btn-l">     (버튼)
       <h3 class="mycar-name h1">                        (태그와 타이포 클래스는 별개)
   - 하위 요소가 같은 크기면 부모에 한 번만 붙입니다. (<dl class="info-list body-small">)
   - 굵기만 다르게 할 때는 .weight400 ~ .weight700 유틸을 추가합니다.

   1. 폰트·토큰  2. 리셋  3. 유틸  4. 타이포그래피  5. 버튼  6. 폼
   7. 뱃지·상태  8. 탭  9. 목록  10. 레이어(바텀시트)  11. 빈 상태
   12. 화면 컴포넌트 (카드류)  13. 호버
   ========================================================================== */

/* 1. 폰트 · 토큰 ------------------------------------------------------------ */
@font-face {
    font-family: 'SUIT Variable';
    src: url('../../fonts/SUIT-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    /* 브랜드 · 배경 · 라인 (컬러칩) */
    --color-static1: #1F463B;          /* 메인 그린 : 메인 버튼 · 활성 · 포인트 수치 */
    --color-static2: #262626;          /* 다크 */
    --color-static3: #EAF1ED;          /* 연그린 : 서브 버튼 · 선택 배경 */
    --color-bg1: #FFFFFF;              /* 웹앱 화면 배경 */
    --color-bg2: #F5F4EF;              /* 웹앱 바깥(PC) 배경 · 홈 상단 그라데이션 끝 */
    --color-border: #E5E5E5;

    /* 그레이 */
    --color-gray1: #FAFAFA;
    --color-gray2: #F5F5F5;
    --color-gray3: #E5E5E5;
    --color-gray4: #D4D4D4;
    --color-gray5: #A3A3A3;            /* 흰 배경 대비 2.5:1 → 텍스트 사용 금지 (아이콘 · placeholder 전용) */
    --color-gray6: #737373;            /* 흰 배경 대비 4.7:1 → 텍스트 최소 회색 */
    --color-gray7: #525252;
    --color-gray8: #404040;
    --color-gray9: #262626;
    --color-gray10: #171717;
    --color-gray11: #0A0A0A;

    /* 상태 (컬러칩 외 · 오류 표시용) */
    --color-red: #D94A4A;
    --color-redbg: #FFEDEE;
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* 알파용 RGB */
    --rgb-black: 0 0 0;
    --rgb-white: 255 255 255;

    /* 그라데이션 */
    --grad-card: linear-gradient(180deg, var(--color-gray3) 0%, var(--color-bg1) 70%);
    --grad-program: linear-gradient(180deg, var(--color-gray2) 0%, var(--color-gray1) 100%);
    --grad-hero: linear-gradient(180deg, var(--color-bg1) 0%, var(--color-bg2) 100%);

    /* 폰트 (타이포그래피 클래스에서만 사용) */
    --font-family: 'SUIT Variable', -apple-system, BlinkMacSystemFont,
                   system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --fs-32: 2rem;
    --fs-28: 1.75rem;
    --fs-24: 1.5rem;
    --fs-22: 1.375rem;
    --fs-20: 1.25rem;
    --fs-18: 1.125rem;
    --fs-16: 1rem;
    --fs-15: 0.9375rem;
    --fs-14: 0.875rem;
    --fs-13: 0.8125rem;
    --fs-12: 0.75rem;

    /* 간격 */
    --gutter: 20px;                    /* 화면 좌우 여백 */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;

    /* 크기 */
    --size-56: 56px;
    --size-52: 52px;                   /* 대형 버튼 */
    --size-48: 48px;                   /* 기본 버튼 · 인풋 */
    --size-40: 40px;
    --size-36: 36px;
    --size-44: 44px;                   /* 최소 터치 영역 */

    /* 레이아웃 */
    --app-inner: 1220px;
    --frame-w: 768px;
    --header-h: 56px;
    --tabbar-h: 64px;

    /* 기타 */
    --radius: 8px;
    --radius-medium: 6px;
    --radius-small: 4px;
    --shadow: 0 4px 20px rgb(var(--rgb-black) / 0.06);
}

/* 2. 리셋 ------------------------------------------------------------------ */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
html {-webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;}
body {font-family: var(--font-family); font-size: var(--fs-16); line-height: 1.6; color: var(--color-gray9); background-color: var(--color-bg2); word-break: keep-all; -webkit-font-smoothing: antialiased;}
ul, ol {list-style: none;}
img, video, svg {vertical-align: middle;}
img, video {max-width: 100%; height: auto;}
a {color: inherit; text-decoration: none;}
button {font: inherit; color: inherit; background: none; border: 0; cursor: pointer;}
input, textarea, select {font: inherit; color: inherit;}
table {border-collapse: collapse; width: 100%;}
address, em, i {font-style: normal;}
fieldset {border: 0;}
[hidden] {display: none !important; /* JS 토글용: 컴포넌트 display 보다 우선 */}

body.scroll-lock {overflow: hidden;}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;}
.skip-nav a {position: fixed; top: -100px; left: 0; z-index: 9999; padding: 12px 20px; background-color: var(--color-static2); color: var(--color-white);}
.skip-nav a:focus {top: 0;}

:focus-visible {outline: 2px solid var(--color-static1); outline-offset: 2px;}
html[data-input="mouse"] :focus-visible {outline: none;}

/* 3. 유틸 ------------------------------------------------------------------ */
.ico {flex: none; display: inline-block;}
.static1-txt {color: var(--color-static1) !important;}
.red-txt {color: var(--color-red) !important;}
.gray6-txt {color: var(--color-gray6) !important;}
.gray7-txt {color: var(--color-gray7) !important;}
.gray8-txt {color: var(--color-gray8) !important;}
.white-txt {color: var(--color-white) !important;}
.weight400 {font-weight: 400 !important;}
.weight500 {font-weight: 500 !important;}
.weight600 {font-weight: 600 !important;}
.weight700 {font-weight: 700 !important;}
.gutter {padding-inline: var(--gutter);}

/* 4. 타이포그래피 (크기 / 굵기 / 행간 / 자간) -------------------------------- */
.display-l   {font-size: var(--fs-32); font-weight: 600; line-height: 1.25; letter-spacing: 0;}
.display-m   {font-size: var(--fs-28); font-weight: 600; line-height: 1.4;  letter-spacing: 0;}
.display-s   {font-size: var(--fs-24); font-weight: 600; line-height: 1.35; letter-spacing: 0;}
.h1          {font-size: var(--fs-22); font-weight: 600; line-height: 1.4;  letter-spacing: 0;}
.h2          {font-size: var(--fs-20); font-weight: 600; line-height: 1.5;  letter-spacing: 0;}
.h3          {font-size: var(--fs-18); font-weight: 600; line-height: 1.4;  letter-spacing: 0;}
.h4          {font-size: var(--fs-16); font-weight: 600; line-height: 1.4;  letter-spacing: 0;}
.body-large  {font-size: var(--fs-16); font-weight: 400; line-height: 1.6;  letter-spacing: 0;}
.body-medium {font-size: var(--fs-15); font-weight: 400; line-height: 1.6;  letter-spacing: 0;}
.body-small  {font-size: var(--fs-14); font-weight: 400; line-height: 1.6;  letter-spacing: 0;}
.btn-l       {font-size: var(--fs-16); font-weight: 600; line-height: 1.6;  letter-spacing: 0;}
.btn-m       {font-size: var(--fs-15); font-weight: 500; line-height: 1.5;  letter-spacing: 0;}
.btn-s       {font-size: var(--fs-14); font-weight: 500; line-height: 1.6;  letter-spacing: 0;}
.caption-l   {font-size: var(--fs-14); font-weight: 400; line-height: 1.5;  letter-spacing: 0;}
.caption-m   {font-size: var(--fs-13); font-weight: 400; line-height: 1.5;  letter-spacing: 0;}
.caption-s   {font-size: var(--fs-12); font-weight: 400; line-height: 1.4;  letter-spacing: 0;}

/* 5. 버튼 (모양 · 색만 정의 / 글자는 .btn-l .btn-m .btn-s) ------------------- */
.square-btn {display: inline-flex; align-items: center; justify-content: center; column-gap: 6px; width: fit-content; min-height: var(--size-52); padding-inline: var(--space-20); border: 1px solid transparent; border-radius: var(--radius-small); transition: background-color 0.2s, color 0.2s, border-color 0.2s;}
.square-btn.medium {min-height: var(--size-48);}
.square-btn.small {min-height: var(--size-40); padding-inline: var(--space-12);}
.square-btn.full {width: 100%;}
.square-btn .ico {width: 18px; height: 18px;}

.main-btn {background-color: var(--color-static1); color: var(--color-white);}
.dark-btn {background-color: var(--color-static2); color: var(--color-white);}
.sub-btn {background-color: var(--color-static3); color: var(--color-static1);}
.line-btn {border-color: var(--color-gray4); background-color: var(--color-white); color: var(--color-gray9);}
.gray-btn {background-color: var(--color-gray2); color: var(--color-gray8);}
.square-btn:disabled, .square-btn.disabled {border-color: var(--color-gray3); background-color: var(--color-gray3); color: var(--color-gray6); pointer-events: none;}

.btn-list {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8);}
.btn-list.full {flex-wrap: nowrap;}
.btn-list.full > * {flex: 1 1 0;}

.ico-btn {display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--size-44); height: var(--size-44); border-radius: 50%; color: var(--color-gray9); transition: opacity 0.2s, background-color 0.2s;}
.ico-btn:disabled {opacity: 0.3; pointer-events: none;}

.txt-btn {display: inline-flex; align-items: center; column-gap: 2px; min-height: var(--size-44); color: var(--color-gray8); text-underline-offset: 3px;}
.txt-btn .ico {width: 16px; height: 16px;}
.txt-btn.gray {color: var(--color-gray6);}

/* 6. 폼 (인풋 글자는 .body-large : 16px 미만이면 iOS 확대) ------------------- */
.input-item {display: flex; flex-direction: column; row-gap: var(--space-8);}
.input-item + .input-item {margin-top: var(--space-20);}
.input-item-label {font-size: var(--fs-13); font-weight: 500; color: var(--color-gray7);}
.input-item-label.req::after {content: '*'; margin-left: 2px; color: var(--color-red);}
.input-wrap {display: flex; column-gap: var(--space-8);}
.input-wrap .custom-input {flex: 1 1 auto; min-width: 0;}
.input-wrap .square-btn {flex: none;}

.custom-input, .custom-select, .custom-textarea {width: 100%; height: var(--size-52); padding: 0 var(--space-16); border: 1px solid var(--color-gray3); border-radius: var(--radius-medium); background-color: var(--color-white); color: var(--color-gray8); transition: border-color 0.2s;}
.custom-textarea {height: auto; min-height: 140px; padding: var(--space-12) var(--space-16); resize: none;}
.custom-input::placeholder, .custom-textarea::placeholder {color: var(--color-gray5);}
.custom-input:focus, .custom-select:focus, .custom-textarea:focus {border-color: var(--color-static1); outline: none;}
.custom-input:disabled, .custom-select:disabled, .custom-textarea:disabled {background-color: var(--color-gray2); color: var(--color-gray6);}
.custom-input.error, .custom-select.error, .custom-textarea.error {border-color: var(--color-red);}
.custom-select {appearance: none; -webkit-appearance: none; padding-right: 44px; background: var(--color-white) url(../img/ico-select.svg) no-repeat right 14px center / 20px 20px; cursor: pointer;}
.error-msg {color: var(--color-gray7);}
.info-msg {color: var(--color-gray6);}

/* 체크 · 라디오 */
.check-item {display: inline-flex; align-items: center; column-gap: var(--space-8); min-height: var(--size-44);}
.check-item label {cursor: pointer;}
.check-list {display: flex; flex-wrap: wrap; column-gap: var(--space-20);}
.custom-checkbox, .custom-radio {appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--color-gray4); background-color: var(--color-white); cursor: pointer; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;}
.custom-checkbox {border-radius: var(--radius-small); background-position: center; background-repeat: no-repeat; background-size: 14px 14px;}
.custom-checkbox:checked {border-color: var(--color-static1); background-color: var(--color-static1); background-image: url(../img/ico-check-white.svg);}
.custom-radio {border-radius: 50%;}
.custom-radio:checked {border-color: var(--color-static1); background-color: var(--color-static1); box-shadow: inset 0 0 0 5px var(--color-white);}
.custom-checkbox:disabled, .custom-radio:disabled {border-color: var(--color-gray3); background-color: var(--color-gray2); cursor: default;}
.custom-checkbox:disabled + label, .custom-radio:disabled + label {color: var(--color-gray6);}

/* 선택 카드 (지점 · 코스 선택 등) */
.select-card {position: relative; display: block;}
.select-card > input {position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;}
.select-card > label {display: flex; flex-direction: column; row-gap: 4px; padding: var(--space-16) var(--space-20); border: 1px solid var(--color-gray4); border-radius: var(--radius); background-color: var(--color-white); cursor: pointer; transition: border-color 0.2s, background-color 0.2s;}
.select-card > input:checked + label {border-color: var(--color-static1); background-color: var(--color-static3);}
.select-card > input:focus-visible + label {outline: 2px solid var(--color-static1); outline-offset: 2px;}
.select-card > input:disabled + label {background-color: var(--color-gray2); color: var(--color-gray6); cursor: default;}
.select-card-list {display: flex; flex-direction: column; row-gap: var(--space-8);}

/* 스위치 */
.custom-switch {appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: 999px; background-color: var(--color-gray4); cursor: pointer; transition: background-color 0.2s;}
.custom-switch::after {content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-white); transition: transform 0.2s;}
.custom-switch:checked {background-color: var(--color-static1);}
.custom-switch:checked::after {transform: translateX(20px);}

/* 7. 뱃지 · 상태 (글자는 .caption-s 등) ------------------------------------- */
.badge {display: inline-flex; align-items: center; height: 24px; padding-inline: var(--space-8); border-radius: 999px; font-weight: 600; background-color: var(--color-gray2); color: var(--color-gray8); white-space: nowrap;}
.badge.main {background-color: var(--color-static1); color: var(--color-white);}
.badge.confirm {background-color: var(--color-static3); color: var(--color-static1);}
.badge.line {border: 1px solid var(--color-gray4); background-color: var(--color-white); color: var(--color-gray9);}
.badge.cancel {background-color: var(--color-redbg); color: var(--color-red);}
.badge.square {border-radius: var(--radius-small);}

.state-txt {font-weight: 600;}
.state-txt.open {color: var(--color-static1);}
.state-txt.close {color: var(--color-gray6);}

/* 8. 탭 (글자는 .btn-m / .btn-s) ------------------------------------------- */
.tab-list {display: flex; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none;}
.tab-list::-webkit-scrollbar {display: none;}
.tab-list .tab {position: relative; flex: 1 0 auto; min-height: var(--size-48); padding-inline: var(--space-16); color: var(--color-gray6); white-space: nowrap; transition: color 0.2s;}
.tab-list .tab::after {content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background-color: var(--color-static1); transform: scaleX(0); transition: transform 0.2s;}
.tab-list .tab.active {font-weight: 600; color: var(--color-static1);}
.tab-list .tab.active::after {transform: scaleX(1);}

.seg-tab-list {display: flex; padding: 4px; border-radius: var(--radius); background-color: var(--color-gray2);}
.seg-tab-list .tab {flex: 1 1 0; min-height: var(--size-40); border-radius: var(--radius-small); color: var(--color-gray6); transition: background-color 0.2s, color 0.2s;}
.seg-tab-list .tab.active {font-weight: 600; background-color: var(--color-white); color: var(--color-gray9); box-shadow: 0 1px 4px rgb(var(--rgb-black) / 0.08);}

.tab-content {display: none; padding-top: var(--space-20);}
.tab-content.active {display: block;}

/* 9. 목록 ------------------------------------------------------------------ */
/* 라벨 - 값 양끝 (예약 정보 등) */
.info-list {display: flex; flex-direction: column; row-gap: var(--space-12);}
.info-list > div {display: flex; justify-content: space-between; align-items: baseline; column-gap: var(--space-16);}
.info-list dt {flex: none; color: var(--color-gray8);}
.info-list dd {color: var(--color-gray9); text-align: right;}
/* 라벨 : 값 (왼쪽 정렬) */
.info-list.inline > div {justify-content: flex-start; column-gap: 4px;}
.info-list.inline dt::after {content: ' :';}
.info-list.inline dd {color: var(--color-gray8); text-align: left;}

.dot-ul {display: flex; flex-direction: column; row-gap: 4px; color: var(--color-gray6);}
.dot-ul > li {position: relative; padding-left: 10px;}
.dot-ul > li::before {content: ''; position: absolute; top: 0.7em; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: currentColor;}

/* 메뉴형 목록 (마이페이지 등) */
.link-list > li + li {border-top: 1px solid var(--color-border);}
.link-list a {display: flex; align-items: center; justify-content: space-between; min-height: 56px;}
.link-list a .ico {width: 20px; height: 20px; color: var(--color-gray6);}

/* 10. 레이어 (전체메뉴 · 바텀시트 공통) -------------------------------------- */
/* 웹앱 프레임과 같은 위치에 겹치도록 .app-wrap 구조를 그대로 사용 */
.app-layer {position: fixed; inset: 0; z-index: 300; visibility: hidden; transition: visibility 0s 0.3s;}
.app-layer.active {visibility: visible; transition: visibility 0s;}
.app-layer > .app-wrap {height: 100%;}
.app-layer .app-layer-area {position: relative; width: 100%; max-width: var(--frame-w); height: 100%; overflow: hidden;}
.app-layer .app-layer-dim {position: absolute; inset: 0; background-color: rgb(var(--rgb-black) / 0.5); opacity: 0; transition: opacity 0.3s;}
.app-layer.active .app-layer-dim {opacity: 1;}

/* 바텀시트 */
.bottom-sheet .sheet-panel {position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 85%; padding: var(--space-24) var(--gutter) calc(var(--space-20) + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; background-color: var(--color-white); transform: translateY(100%); transition: transform 0.3s;}
.bottom-sheet.active .sheet-panel {transform: translateY(0);}
.bottom-sheet .sheet-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16);}
.bottom-sheet .sheet-head .ico-btn {margin-right: -10px;}
.bottom-sheet .sheet-body {flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;}
.bottom-sheet .sheet-foot {padding-top: var(--space-20);}

/* 11. 빈 상태 -------------------------------------------------------------- */
.empty-box {display: flex; flex-direction: column; align-items: center; row-gap: var(--space-8); padding: var(--space-48) var(--gutter); text-align: center;}
.empty-box .ico {width: 40px; height: 40px; color: var(--color-gray4);}
.empty-box .empty-desc {color: var(--color-gray6);}

/* 12. 화면 컴포넌트 --------------------------------------------------------- */
/* 섹션 */
.app-section {padding: var(--space-40) var(--gutter) 0;}
.app-section:last-child {padding-bottom: var(--space-48);}
.app-section .section-tit-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16);}
.app-section .section-tit-wrap .txt-btn {margin-right: -4px;}

/* 흰 카드 */
.shadow-box {border-radius: var(--radius); background-color: var(--color-white); box-shadow: var(--shadow);}

/* 내 차 카드 */
.mycar-card {position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--space-20); border-radius: var(--radius); background: var(--grad-card); box-shadow: var(--shadow);}
.mycar-card .mycar-head {display: flex; align-items: center; justify-content: space-between; min-height: 22px;}
.mycar-card .mycar-label {color: var(--color-gray8);}
.mycar-card .mycar-head .txt-btn {min-height: 22px; margin-right: -4px;}
.mycar-card .mycar-name {margin-top: var(--space-12);}
.mycar-card .mycar-num {color: var(--color-gray8);}
.mycar-card .mycar-img {width: 80%; max-width: 400px; margin: var(--space-16) auto 0; aspect-ratio: 620 / 280;}
.mycar-card .mycar-img img {width: 100%; height: 100%; object-fit: contain;}
.mycar-card .mycar-body {margin-top: var(--space-20); padding-top: var(--space-20); border-top: 1px solid var(--color-border);}
.mycar-card .mycar-body .no-history {color: var(--color-gray8);}
/* 차량 없음 */
.mycar-card.empty .mycar-img {margin-block: var(--space-32) var(--space-48);}

/* 현재 작업 상태 박스 (시공중) */
.work-state-box {padding: var(--space-24) var(--space-16);}
.work-state-box .work-state-txt {display: flex; align-items: center; column-gap: 4px; margin-top: var(--space-12); color: var(--color-gray6);}
.work-state-box .work-state-txt .ico {color: var(--color-static1);}
.work-state-box .work-state-txt strong {font-weight: 600; color: var(--color-static1);}
.work-state-box .progress-step {margin: var(--space-24) -14px 0;}

/* 진행 단계 (입고 완료 → 작업 준비 → 시공 중 → 작업 완료) */
.progress-step {display: flex;}
.progress-step > li {position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; row-gap: 8px; text-align: center;}
.progress-step > li + li::before {content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background-color: var(--color-border);}
.progress-step > li.done::before, .progress-step > li.current::before {background-color: var(--color-static1);}
.progress-step .step-dot {position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 2px solid var(--color-gray3); border-radius: 50%; background-color: var(--color-gray2); color: var(--color-white);}
.progress-step .step-dot::after {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-gray4);}
.progress-step .step-dot .ico {stroke-width: 2.4;}
.progress-step .step-txt {color: var(--color-gray6); white-space: nowrap;}
.progress-step > li.done .step-dot {border-color: var(--color-static1); background-color: var(--color-static1);}
.progress-step > li.done .step-dot::after {display: none;}
.progress-step > li.current .step-dot {border-color: var(--color-static1); background-color: var(--color-white);}
.progress-step > li.current .step-dot::after {background-color: var(--color-static1);}

/* 다크 배너 링크 */
.search-banner {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-12); padding: var(--space-16) var(--space-20); border-radius: var(--radius-small); background-color: var(--color-gray8); color: var(--color-white);}
.search-banner .banner-tit {display: flex; align-items: center; column-gap: 6px;}
.search-banner .banner-tit .ico {width: 20px; height: 20px;}
.search-banner .banner-desc {display: block; margin-top: 4px; color: rgb(var(--rgb-white) / 0.85);}
.search-banner > .ico {width: 20px; height: 20px;}

/* 혜택 요약 */
.benefit-box {display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--space-20) 0;}
.benefit-box > li {position: relative; padding-inline: var(--space-20);}
.benefit-box > li + li::before {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 44px; margin-top: -10px; background-color: var(--color-border);}
.benefit-box a {display: flex; flex-direction: column;}
.benefit-box .ico {width: 20px; height: 20px; color: var(--color-gray6);}
.benefit-box .benefit-num {margin-top: var(--space-12); color: var(--color-static1);}
.benefit-box .benefit-label {margin-top: 4px; color: var(--color-gray8);}

/* 가로 스크롤 목록 */
.h-scroll {display: flex; column-gap: var(--space-12); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch;}
.h-scroll::-webkit-scrollbar {display: none;}
.h-scroll > li {flex: none; scroll-snap-align: start;}

/* 프로그램 카드 */
.program-card {display: flex; flex-direction: column; width: 190px; min-height: 178px; padding: var(--space-16); border-radius: var(--radius-small); background: var(--grad-program);}
.program-card .program-tit {display: flex; align-items: center; column-gap: 4px;}
.program-card .program-tit .ico {width: 18px; height: 18px;}
.program-card .program-desc {margin-top: var(--space-24); color: var(--color-gray8);}
.program-card .program-sub {color: var(--color-gray6);}
.program-card .program-price {margin-top: auto; padding-top: var(--space-20);}

/* 추천 카드 */
.recommend-card {display: block; overflow: hidden;}
.recommend-card .recommend-img {aspect-ratio: 362 / 180; background-color: var(--color-gray2);}
.recommend-card .recommend-img img {width: 100%; height: 100%; object-fit: cover;}
.recommend-card .recommend-body {position: relative; padding: var(--space-20) calc(var(--space-20) + 28px) var(--space-24) var(--space-20);}
.recommend-card .recommend-body > .ico {position: absolute; top: var(--space-24); right: var(--space-20); width: 20px; height: 20px;}
.recommend-card .recommend-desc {color: var(--color-gray8);}
.recommend-card .recommend-price {margin-top: var(--space-16);}

/* 매장 카드 */
.store-card {display: flex; align-items: center; column-gap: var(--space-16); padding: var(--space-16);}
.store-card .store-img {flex: none; width: 70px; height: 56px; border-radius: var(--radius-small); overflow: hidden; background-color: var(--color-gray2);}
.store-card .store-img img {width: 100%; height: 100%; object-fit: cover;}
.store-card .store-info {min-width: 0;}
.store-card .store-addr {color: var(--color-gray8);}
.store-card .store-time {color: var(--color-gray6);}
.store-list > li + li {margin-top: var(--space-12);}

/* 13. 호버 ----------------------------------------------------------------- */
@media (hover: hover) {
    .main-btn:hover {background-color: var(--color-static2);}
    .dark-btn:hover {background-color: var(--color-gray8);}
    .sub-btn:hover {background-color: var(--color-gray3);}
    .line-btn:hover {border-color: var(--color-gray9);}
    .gray-btn:hover {background-color: var(--color-gray3);}
    .ico-btn:hover {background-color: rgb(var(--rgb-black) / 0.04);}
    .txt-btn:hover {text-decoration: underline;}
    .tab-list .tab:hover, .seg-tab-list .tab:hover {color: var(--color-gray9);}
    .select-card > input:not(:checked):not(:disabled) + label:hover {border-color: var(--color-gray5);}
    .link-list a:hover {color: var(--color-static1);}
    .search-banner:hover {background-color: var(--color-gray7);}
    .program-card:hover .program-tit, .recommend-card:hover .recommend-tit {text-decoration: underline; text-underline-offset: 3px;}
    .store-card:hover .store-name {color: var(--color-static1);}
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;}
}