.section-head-left {
    margin-top: 32px;
    margin-bottom: 8px;
}

.title-wrap {
    height: 70px;
}

/* 인덱스 카드 — 가격 정보/기간 헤더는 박스 밖, 월 요금+할인만 회색 박스 */
.grid-cards .index-price-stack {
    /* PC 15px. 좁은 4열(약 1200px)에서 60자가 5줄, 높이 109px */
    --idx-discount-slot-h: calc(15px * 1.35 * 5 + 12px);
    --idx-discount-amt-h: 1.35em;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding: 4px 8px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-slate);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(var(--color-text-strong-rgb), 0.04);
}
.grid-cards .index-price-stack__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    margin: 4px 0 8px;
    padding: 0 0 4px;
    border-bottom: 1px solid #e8ecf1;
    line-height: 1.35;
}
.grid-cards .index-price-stack__head-title {
    flex: 0 0 auto;
}
.grid-cards .index-price-stack__head-sep {
    flex: 0 0 auto;
    opacity: 0.75;
    font-weight: 600;
    padding: 0 4px;
}
.grid-cards .index-price-stack__head-period {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    word-break: keep-all;
}
.grid-cards .index-price-stack__head-period-prefix {
    color: var(--color-text-muted);
    font-weight: 700;
}
.grid-cards .index-price-stack__head-period-term {
    color: var(--color-primary-hover);
    font-weight: 800;
}
/* 월 요금 ↔ 할인 영역 구분선 (할인 유무와 관계없이 항상 표시) */
.grid-cards .index-price-stack__divider {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    height: 0;
    border: 0;
    border-top: 1px solid var(--color-border-slate);
}
.grid-cards .index-price-stack .prices {
    gap: 8px;
    margin: 0;
    padding-bottom: 8px;
}
/* 월 요금: 별도 박스 테두리 없음 */
.grid-cards .index-price-stack .price {
    background: transparent;
    border: none;
    color: var(--color-primary-hover);
    border-radius: 0;
    padding: 4px 0 4px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

/* 인덱스 그리드 카드 — 할인/인상 문구 (구분선은 .index-price-stack__divider) */
.discount-wrap.discount-wrap--index {
    margin: 0;
    padding: 8px 0 0;
    border: none;
    min-height: 0;
    display: flex;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
}
.discount-index-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 8px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-slate);
    box-shadow: 0 1px 2px rgba(var(--color-text-strong-rgb), 0.04);
}
/* 요금 스택 안: 월요금과 끊김 없이, 할인문구는 항상 가로 100% */
.grid-cards .index-price-stack .discount-index-badge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 15px;
    height: calc(var(--idx-discount-slot-h) + var(--idx-discount-amt-h) + 4px);
    justify-content: space-between;
    overflow: hidden;
}
.grid-cards .index-price-stack .discount-index-badge:has(.discount-index-badge__desc) {
    justify-content: flex-start;
    align-items: stretch;
}
.grid-cards .index-price-stack .discount-index-badge__desc {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 4px 0 4px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: block;
    color: #c62828;
    font-weight: 800;
    font-size: 15px;
    font-family: 'NanumSquareNeo', sans-serif;
    height: var(--idx-discount-slot-h);
    line-height: 1.35;
    overflow: hidden;
}
.grid-cards .index-price-stack .discount-index-badge__amt {
    align-self: flex-end;
    padding: 0 4px 0 0;
    margin: 0;
    border: none;
    color: #c62828;
    font-weight: 800;
    font-size: 15px;
    font-family: 'NanumSquareNeo', sans-serif;
}

.discount-index-badge__desc {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-slate);
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
    display: block;
    max-height: none;
    overflow: visible;
}
/* 할인 문구가 없는 카드도 동일한 슬롯 높이를 유지 */
.grid-cards .index-price-stack:not(:has(.discount-wrap--index))::after {
    content: '';
    display: block;
    flex: 0 0 auto;
    height: calc(var(--idx-discount-slot-h) + var(--idx-discount-amt-h) + 4px);
    visibility: hidden;
    pointer-events: none;
}

.discount-index-badge__amt {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    /* 월요금 숫자와 같은 계열(파랑 톤)으로 ‘금액’ 동류 표현 */
    color: var(--color-primary-hover);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    padding: 4px 0 4px 8px;
    margin-top: 0;
    align-self: center;
    background: transparent;
    border: none;
    border-left: 1px solid var(--color-border-slate);
    border-radius: 0;
}
.discount-index-badge__amt:first-child {
    border-left: none;
    padding-left: 0;
}

/* 인덱스 481~720px: 2열 그리드인데 PC 슬롯이면 줄바꿈 증가 → 마지막 줄(디센더) 잘림 */
@media (max-width: 720px) and (min-width: 481px) {
    .grid-cards .index-price-stack {
        /* 가로 스크롤 카드(최대 220px). 광고+60자 ≈ 6줄 */
        --idx-discount-slot-h: calc(14px * 1.35 * 6.6 + 16px);
        --idx-discount-amt-h: 1.25em;
    }
    .grid-cards .index-price-stack .price,
    .grid-cards .index-price-stack .discount-index-badge {
        font-size: 14px;
    }
    .grid-cards .index-price-stack .discount-index-badge__desc {
        font-size: 14px;
        line-height: 1.35;
    }
    .grid-cards .index-price-stack .discount-index-badge__amt {
        font-size: 14px;
    }
    .grid-cards .title-wrap {
        height: auto;
        min-height: 70px;
        padding-bottom: 4px;
    }
}

@media (max-width: 480px) {
    .grid-cards .index-price-stack {
        /* 최소 180px 카드. 광고+60자(약 9줄) */
        --idx-discount-slot-h: calc(14px * 1.35 * 8.6 + 16px);
        --idx-discount-amt-h: 1.2em;
        padding: 4px 4px;
    }
    .grid-cards .index-price-stack__head {
        font-size: 11px;
        padding-bottom: 4px;
    }
    .discount-index-badge {
        padding: 8px 8px;
        gap: 4px 8px;
    }
    .grid-cards .index-price-stack .price,
    .grid-cards .index-price-stack .discount-index-badge {
        font-size: 14px;
    }
    .grid-cards .index-price-stack .discount-index-badge__desc {
        font-size: 14px;
        line-height: 1.35;
        height: var(--idx-discount-slot-h);
        max-height: none;
        overflow: hidden;
    }
    .grid-cards .index-price-stack .discount-index-badge__amt {
        font-size: 14px;
        padding: 4px 0 4px 8px;
    }
}

/* 인덱스 모바일 좁은 폭: 고정 슬롯·타이틀 영역에서 마지막 줄(디센더) 잘림 방지 */
@media (max-width: 460px) {
    .grid-cards .index-price-stack {
        --idx-discount-slot-h: calc(14px * 1.38 * 9.2 + 16px);
    }
    .grid-cards .index-price-stack .discount-index-badge__desc {
        font-size: 14px;
        line-height: 1.38;
    }
    .grid-cards .index-price-stack .discount-index-badge__amt {
        font-size: 14px;
    }
    .grid-cards .title-wrap {
        height: auto;
        min-height: 70px;
        padding-bottom: 4px;
    }
}

/* 넓은 PC는 60자가 덜 줄바꿈된다. 칸 높이를 그 줄 수에 맞춘다. */
@media (min-width: 1400px) {
    .grid-cards .index-price-stack {
        --idx-discount-slot-h: calc(15px * 1.35 * 4 + 12px);
    }
}
@media (min-width: 1720px) {
    .grid-cards .index-price-stack {
        --idx-discount-slot-h: calc(15px * 1.35 * 3 + 12px);
    }
}

.container {
    padding: 0px;
}
.input-text {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
    height: 44px;
}
:root { --gap: 16px; --br: 14px; }
.phone-badge-wrap{ display:flex; justify-content:center; margin:8px 0 0; }
.phone-badge{
    display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
    border-radius:12px; border:1px solid var(--color-primary-deep); background:var(--color-primary-wash); color:var(--color-primary-deep);
    font-weight:800; text-decoration:none; line-height:1; white-space:nowrap;
    box-shadow:0 1px 0 rgba(11,99,196,0.08);
}
.phone-badge .num{ font-size:22px; font-weight:900; letter-spacing:0.5px; }
@media (max-width:720px){ .phone-badge{ width:100%; justify-content:center; } .phone-badge .num{ font-size:24px; } }

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding:0 2% 0 1%;
    margin-bottom:8px;
}
.section-head-left{
    display:flex;
    flex-direction:column;
    gap:0px;
    padding-left: 16px;
}
.section-head h2{
    margin:0 0 4px 1.5%;
}
.section-head .desc{
    margin:0 0 0 1.5%;
    color:dimgrey;
    word-break:keep-all;
    white-space:nowrap;   /* 제목 아래 설명을 한 줄로 유지 */
    font-size:14px;
}
.btn-more{
    padding:8px 12px; border:1px solid var(--color-primary-indigo); color:var(--color-primary-indigo); background:var(--color-bg);
    border-radius:8px; font-weight:700; cursor:pointer;
}

/* ===========================
   운영 차종 월렌트/한달렌트 (광고용 HTML 텍스트 — 화면 비표시)
   display:none 대신 clip 방식으로 숨겨 크롤러가 소스에서 읽을 수 있게 함
   =========================== */
.index-operated-cars {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* ===========================
   Home hero (4 cards + 상담)
   =========================== */
#home_pc{
    /* 기존보다 더 연하고 중성에 가까운 블루 톤 배경 */
    background: linear-gradient(135deg,var(--color-bg-soft) 0%, #edf2ff 35%, var(--color-bg-soft) 100%);
}
#home_pc .row-main-card{
    border-radius:16px !important;
    border:1px solid rgba(37,99,235,0.16) !important;
    background:var(--color-bg) !important;
    text-align:left !important;
    padding:24px 24px 24px !important;
    box-shadow:0 18px 42px rgba(15,76,129,0.16) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#home_pc .row-main-card:hover{
    transform: translateY(-3px);
    box-shadow:0 26px 56px rgba(15,76,129,0.2);
    border-color:rgba(37,99,235,0.35);
}
#home_pc .row-main-card h2{
    margin:0 0 8px 0 !important;
    font-family:'NanumSquareNeo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size:2rem !important;
    font-weight:800 !important;
    color:var(--color-text-strong) !important;
}
#home_pc .row-main-card .service-text-main p{
    font-size:1.35rem !important;
    color:var(--color-text-secondary) !important;
    line-height:1.5;
}
#home_pc .row-main-card img{
    display:block;
    margin:4px auto 16px;
    max-width:220px;
    width:100%;
    border-radius:14px;
}
#home_pc .hashtag{
    display:inline-flex;
    align-items:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:1.15rem;
    font-weight:600;
    color:var(--color-primary-hover);
    background:rgba(37,99,235,0.06);
    border:1px solid rgba(37,99,235,0.18);
}
#home_pc .hashtag + .hashtag{
    margin-left:8px;
}

/* 상담 카드 */
#home_pc .home-consult-card{
    border-radius:20px;
    background:var(--color-bg) !important;
    box-shadow:0 22px 48px rgba(15,76,129,0.20);
    border:1px solid rgba(37,99,235,0.22);
    padding:28px 24px 24px !important;
}
#home_pc .home-consult-card h3{
    font-size:2.1rem;
    font-weight:800;
    margin:0 0 20px;
    text-align:left;
    color:var(--color-text-strong);
}
#home_pc .home-consult-card h3 span{
    background:linear-gradient(135deg,var(--color-primary-link) 0%, var(--color-primary-hover) 45%, #0ea5e9 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
#home_pc .home-consult-card .control-label{
    font-weight:600;
    color:var(--color-text-strong);
    font-size:1.3rem;
}
#home_pc .home-consult-card .form-control,
#home_pc .home-consult-card input[type="date"]{
    border-radius:12px;
    border:1px solid #d0d7e5;
    padding:12px 16px;
    font-size:1.4rem;
    box-shadow:none;
}
#home_pc .home-consult-card .phone-auth-row{
    gap:8px;
}
#home_pc .home-consult-card .phone-auth-btn{
    background:var(--color-primary-hover);
    color:var(--color-text-inverse);
    border-radius:12px;
    border:none;
    padding:8px 16px;
    font-size:1.2rem;
    font-weight:600;
}
#home_pc #easy-reservation-submit-pc{
    background:linear-gradient(135deg,var(--color-primary-link) 0%, var(--color-primary-hover) 100%) !important;
    border-radius:999px !important;
    border:none !important;
    padding:16px 32px !important;
    color:var(--color-text-inverse) !important;
    font-weight:700 !important;
    font-size:1.5rem !important;
    box-shadow:0 14px 32px rgba(37,99,235,0.4) !important;
}
#home_pc #easy-reservation-submit-pc:hover{
    transform:translateY(-1px);
}

/* 카드 그리드 */
.grid-cards{
    list-style:none;
    margin:0;
    padding:0 1.5%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:var(--gap);
    align-items: stretch;
}
@media (max-width:1024px){
    .grid-cards{ grid-template-columns:repeat(3,1fr);}
}
/* 모바일에서는 한 행에 2대씩 표시 */
@media (max-width:720px){
    .grid-cards{ grid-template-columns:repeat(2,1fr);}
}

/* 월렌트 / 12개월렌트: 4대씩 두 줄 (4열 x 2행) */
.grid-cards-row4-scroll{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--gap);
    padding:0 1.5%;
    margin:0;
    align-items: stretch;
}
.grid-cards-mobile-rows{
    display:none;
}
/* 모바일: 4대씩 두 줄 유지, 한 번에 2대만 보이고 가로 스크롤 — 스냅으로 ‘한 칸’(2열 폭)씩만 멈춤 */
@media (max-width:720px){
    .grid-cards-row4-scroll{ display:none; }
    .grid-cards-mobile-rows{
        display:flex;
        flex-direction:column;
        gap: var(--gap);
        padding:0 1.5%;
        margin:0;
    }
    .grid-cards-mobile-row{
        display:flex;
        flex-wrap:nowrap;
        gap:var(--gap);
        margin:0;
        padding:0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:0;
        overscroll-behavior-x:contain;
    }
    .grid-cards-mobile-row > .card{
        flex:0 0 auto;
        width:calc(50vw - var(--gap) * 0.75);
        min-width:180px;
        max-width:220px;
        scroll-snap-align:start;
        scroll-snap-stop:always;
    }
    /* 월렌트/12개월렌트 모바일: 차량제목 길이 차이와 무관하게
       가격정보/기간 블록 시작 높이를 동일하게 고정 */
    #monthly-rent .grid-cards-mobile-row .title-wrap,
    #yearly-rent .grid-cards-mobile-row .title-wrap{
        height: 92px;
        min-height: 92px;
        max-height: 92px;
        overflow: hidden;
    }
}

/* 유형별 차량 추천: 모바일에서 한 줄 가로 스크롤 */
@media (max-width:720px){
    #type-recommend .grid-cards-hscroll{
        display:flex;
        flex-wrap:nowrap;
        align-items:stretch;
        overflow-x:auto;
        overflow-y:hidden;
        gap:var(--gap);
        padding:0 1.5%;
        margin:0;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }
    #type-recommend .grid-cards-hscroll .card{
        flex:0 0 auto;
        min-width:180px;
        width:48vw;
        max-width:220px;
        /* 유형별 추천 모바일 카드 높이: 고정이 아닌 최소 높이로 처리(하단 패딩 잘림 방지) */
        height: auto !important;
        min-height: 364px;
        max-height: none;
        align-self:stretch;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: visible;
    }
    #type-recommend .grid-cards-hscroll .card .body {
        flex: 1 1 auto;
        min-height: 0;
        box-sizing: border-box;
        padding: 8px 8px 8px !important;
        display: flex;
        flex-direction: column;
        gap: 4px;
        overflow: visible;
    }
    /* 모든 유형에서 하단 여백이 일정하도록 가격 영역을 아래로 정렬 */
    #type-recommend .grid-cards-hscroll .card .index-price-stack__head,
    #type-recommend .grid-cards-hscroll .card .index-price-stack {
        margin-top: auto;
    }
    /* 준비중 썸네일 문구가 150px 안에 안정적으로 들어가도록 */
    #type-recommend .card-placeholder .thumb .placeholder-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    #type-recommend .card-placeholder .thumb .placeholder-msg {
        font-size: 12px;
    }
    #type-recommend .card-placeholder .thumb .placeholder-sub {
        font-size: 11px;
    }
}

.card{ background:var(--color-bg); border:1px solid var(--color-border-panel); border-radius:var(--br); overflow:hidden; display:flex; flex-direction:column; }
.grid-cards > .card,
.grid-cards-row4-scroll > .card {
    height: 100%;
}
/* 유형별 추천 빈 칸 플레이스홀더 카드 */
.card-placeholder{
    background:linear-gradient(160deg, #f8f9fc 0%, var(--color-bg-cool) 100%);
    border:1px dashed #c8d0dc;
    pointer-events:none;
}
.card-placeholder .thumb{
    background:linear-gradient(180deg, #e8ecf2 0%, #dfe4ec 100%);
    /* 실차 카드 .grid-cards .thumb(고정 150px)과 동일 높이 — 텍스트로 영역이 늘어나지 않게 */
    height: 150px;
    min-height: 150px;
    max-height: 150px;
    flex-shrink: 0;
    box-sizing: border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding: 8px 8px;
    overflow: hidden;
}
.card-placeholder .thumb .placeholder-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(var(--color-white-rgb), 0.8);
    color:var(--color-text-disabled);
    font-size:20px;
    font-weight:300;
    letter-spacing:-0.02em;
}
.card-placeholder .thumb .placeholder-msg{
    color:var(--color-text-quiet);
    font-size:14px;
    font-weight:600;
    letter-spacing:-0.02em;
}
.card-placeholder .thumb .placeholder-sub{
    color:var(--color-text-disabled);
    font-size:12px;
    font-weight:500;
}
.card-placeholder .body .name,
.card-placeholder .body .detail,
.card-placeholder .body .prices,
.card-placeholder .body .index-price-stack__head,
.card-placeholder .body .index-price-stack{ visibility:hidden; }
.grid-cards .thumb{
    background:#f2f4f8;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    height: 150px;          /* 모든 카드 이미지 높이 고정 */
}
.grid-cards .thumb img{
    width:100%;
    height:100%;
    object-fit:cover;       /* 비율 유지하며 잘라내기 */
    display:block;
}
.body{ padding:8px; display:flex; flex-direction:column; gap:4px; }
.name{ font-weight:800; font-size:15px; height: auto; }
.detail{ color:var(--color-text-mid); font-size:13px; min-height:32px; }
.chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.chip{
    padding: 0px 0px 0px 4px;
    font-size:12px;
    display:inline-flex;
    align-items:center;
    gap:4px;
}
.chip-label{
    font-weight:700;
    color:var(--color-text-mid);
}
.chip-value{
    font-weight:600;
    color:var(--color-primary-deep);
}
.prices{
    display:flex;
    flex-direction:column;
    gap:4px;
    flex-wrap:wrap;
}
.price{
    background:var(--color-primary-wash);
    border:1px solid #cfe6ff;
    color:var(--color-primary-deep);
    border-radius:10px;
    padding:8px 8px;
    font-size:14px;
    font-weight:800;
}
@media (max-width:420px){
    .name { font-size: 13px; }
}
.state{ text-align:center; color:var(--color-text-subtle); padding:24px 8px; grid-column:1/-1; }
/* 섹션 아래 패딩 추가 */
#clogo.clogo{
    padding-bottom: 48px;   /* 필요하면 64px 정도로 더 키워도 OK */
}

/* 헤더 타이포 강화 */
.head_title .subtitle h1 a{
    font-size: 20px !important;   /* 기존 smaller 제거 */
    font-weight: 900;
    letter-spacing: 0.2px;
}

.head_title .subtitle h2 a{
    font-size: 28px !important;   /* 장기렌트 타이틀 크게 */
    font-weight: 900;
    line-height: 1.25;
}

.section-head h2{
    font-size: 26px;     /* 기존보다 +2~4pt */
    font-weight: 900;
    letter-spacing: 0.2px;
    margin: 0 0 4px 1.5%;
}

.thumb-link{ display:block; width:100%; height:100%; }
.thumb-link img{ display:block; width:100%; height:100%; object-fit:cover; }
.thumb a{ text-decoration:none; }
/* 모바일에서 살짝 더 키우기 */
@media (max-width: 720px){
    .head_title .subtitle h2 a{ font-size: 30px !important; }
    .section-head h2{ font-size: 21px; }
}

@media (max-width: 480px){
    .section-head h2{ font-size: 18px; line-height: 1.35; }
    .name { font-size: 13px; }
}


.bgwhite {
    background: var(--color-bg);
}

.sections {
    padding: 20px 0 60px 0;
}
.form-group {
    margin-bottom: 8px;
}
/* 기본 카드 스타일 */
.row-main-card {
    transition: all 0.3s ease;
    cursor: pointer; /* 마우스 커서 손가락 모양 */
}

/* hover시 */
.row-main-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px var(--color-shadow-md);
    background-color: #f7faff; /* 살짝 밝은 배경으로 */
}

/* 클릭(press)할 때 */
.row-main-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--color-shadow);
}
.phone-auth-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.phone-auth-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.phone-auth-row .form-control,
.phone-auth-row input,
.phone-auth-row textarea {
    flex: 1 1 260px;
    min-width: 220px;
    height: 52px;
    line-height: 1.4;
}

.phone-auth-btn {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-brand-green) 100%);
    border: none;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--color-text-inverse);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    white-space: normal;
    flex: 0 0 auto;
    margin-left: 12px;
    margin-right: 8px;
    min-width: 92px;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 12px;
    height: 52px;
    display: flex;
    align-items: center;
}

.phone-auth-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(var(--color-primary-rgb), 0.28);
}

.phone-auth-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.phone-auth-status {
    font-size: 13px;
    color: var(--color-text-muted);
    min-height: 18px;
}

.phone-auth-status.status-success {
    color: #0f9d58;
}

.phone-auth-status.status-error {
    color: #d93025;
}

.phone-auth-status.status-info {
    color: var(--color-primary);
}
.car_card_button {
    cursor: pointer;
}
.car_card_button:disabled,
.car_card_button.is-disabled {
    opacity: 0.55;
    cursor: not-allowed !important;
    box-shadow: none !important;
    filter: grayscale(10%);
}
.hashtag {
    font-size: 1.4rem;
    background: #E7EFF7;
    color: #0077B6;
    padding: 8px 8px;
    border-radius: 12px;
}
#mobileCard {
    display: none;
}

.slide {
   /* layout */
   display: flex;
   flex-wrap: nowrap;
   /* 컨테이너의 내용물이 컨테이너 크기(width, height)를 넘어설 때 보이지 않도록 하기 위해 hidden을 준다. */
   overflow: hidden;

   /* position */
   /* slide_button의 position absolute가 컨테이너 안쪽에서 top, left, right offset이 적용될 수 있도록 relative를 준다. (기본값이 static인데, static인 경우 그 상위 컨테이너로 나가면서 현재 코드에선 html을 기준으로 offset을 적용시키기 때문) */
   position: relative;

   /* size */
   width: 100%;

   /* slide drag를 위해 DOM요소가 드래그로 선택되는것을 방지 */
   user-select: none;
}
.slide_item {
    /* layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* position - 버튼 클릭시 left offset값을 적용시키기 위해 */
    position: relative;
    left: 0px;

    /* size */
    width: 100%;
    height: 100px;
    /* flex item의 flex-shrink는 기본값이 1이므로 컨테이너 크기에 맞게 줄어드는데, 슬라이드를 구현할 것이므로 줄어들지 않도록 0을 준다. */
    flex-shrink: 0;

    /* transition */
    transition: left 0.15s;
}
.slide_button {
    /* layout */
    display: flex;
    justify-content: center;
    align-items: center;

    /* position */
    position: absolute;
    /* 버튼이 중앙에 위치하게 하기위해 계산 */
    top: calc(50% - 16px);

    /* size */
    width: 32px;
    height: 32px;

    /* style */
    border-radius: 100%;
    /*background-color: #cccc;*/
    cursor: pointer;
}

.slide_prev_button {
    left: 10px;
}
.slide_next_button {
    right: 10px;
}

/* 각 슬라이드가 변경되는 것을 시각적으로 확인하기 쉽도록 각 슬라이드별 색상 적용 */
.slide_item.item1 {
    /*background-color: darkgoldenrod;*/
}
.slide_item.item2 {
    /*background-color: aqua;*/
}

/* 페이지네이션 스타일 */
ul,
li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.slide_pagination {
    /* layout */
    display: flex;
    gap: 4px;

    /* position */
    position: absolute;
    bottom: 0;
    /* left:50%, translateX(-50%)를 하면 가로 가운데로 위치시킬 수 있다. */
    left: 50%;
    transform: translateX(-50%);
}
.slide_pagination > li {
    /* 현재 슬라이드가 아닌 것은 투명도 부여 */
    color: #7fb5ff88;
    cursor: pointer;
    font-size: 25px;
}
.slide_pagination > li.active {
    /* 현재 슬라이드 색상은 투명도 없이 */
    color: #7fb5ff;
}

.slide_item_duplicate {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 0px;
    width: 100%;
    /*height: 100px;*/
    flex-shrink: 0;
    transition: left 0.15s;
}

@media only screen and (max-width:768px) {
    #mobileCard {
        display: block;
        height: 44px;
    }
    .phone-auth-row {
        gap: 8px;
    }
    .phone-auth-btn {
        flex: 0 0 auto;
        margin-right: 8px;
    }
    .hashtag {
        font-size: 1.0rem;
        padding: 4px 4px;
        border-radius: 10px;
    }

}

@media only screen and (max-width:480px) {
    #mobileCard {
        display: block;
    }
    .phone-auth-row {
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 8px;
    }
    .phone-auth-btn {
        width: auto;
        min-width: 92px;
        text-align: center;
        margin-left: 0;
        margin-right: 8px;
        margin-top: 0;
        margin-bottom: 8px;
        height: 44px;
        display: flex;
        align-items: center;
    }
    .phone-auth-row .form-control,
    .phone-auth-row input,
    .phone-auth-row textarea {
        flex: 1 1 auto;
        width: 100%;
        height: 44px;
    }
    .phone-auth-status {
        font-size: 12px;
    }
}

@media only screen and (max-width: 360px) {
    .phone-auth-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .phone-auth-row .form-control,
    .phone-auth-row input,
    .phone-auth-row textarea {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
    .phone-auth-btn {
        width: 100%;
        min-width: 0;
        margin: 0;
        margin-bottom: 8px;
    }
}

@media only screen and (max-width:320px) {
    #mobileCard {
        display: block;
    }
}

/* ========== 인덱스 간편 상담: 모바일(#home) 대여일자 너비·placeholder ========== */
#home .home-consult-mobile .form-group {
    min-width: 0;
    margin-bottom: 8px;
}
.index-consult-date-wrap {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}
.index-consult-date-input {
    display: block;
    flex: 1 1 0%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
/* WebKit/iOS: type=date 네이티브 컨트롤이 다른 칸보다 우측으로 길어지는 현상 방지 */
.index-consult-date-input::-webkit-datetime-edit-fields-wrapper {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
}
.index-consult-date-input::-webkit-datetime-edit {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.index-consult-date-input::-webkit-date-and-time-value {
    text-align: left;
    min-width: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}
.index-consult-date-input::-webkit-calendar-picker-indicator {
    margin: 0 0 0 4px;
    flex-shrink: 0;
}
.index-consult-date-hint {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 4px 0 0;
    line-height: 1.35;
}
/* 모바일 상담: 위아래 패딩·입력칸 높이·필드 간격 축소 */
.index-ios-root #home .home-consult-mobile {
    padding: 16px 16px 12px !important;
}
.index-ios-root #home .ios-consult-title {
    margin-bottom: 12px;
    font-size: 20px;
}
.index-ios-root #home .home-consult-mobile .ios-label {
    margin-bottom: 4px !important;
}
.index-ios-root #home .home-consult-mobile .phone-auth-wrapper {
    gap: 8px;
}
.index-ios-root #home .home-consult-mobile .ios-field.form-control,
.index-ios-root #home .home-consult-mobile .ios-field.form-control.ios-field--mobile {
    height: 40px;
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.25;
}
.index-ios-root #home .home-consult-mobile .ios-field.form-control.ios-field--area {
    height: auto !important;
    min-height: 72px;
    padding: 8px 12px !important;
}
#home .home-consult-mobile .phone-auth-row .form-control,
#home .home-consult-mobile .phone-auth-row input,
#home .home-consult-mobile .phone-auth-row textarea {
    min-width: 0;
    flex: 1 1 auto;
    height: 40px;
}
.index-ios-root #home .home-consult-mobile .phone-auth-btn {
    height: 40px;
    padding: 8px 8px;
    margin: 0;
}
.index-ios-root #home .home-consult-mobile .ios-agree {
    padding: 8px 12px;
}
.index-ios-root #home .home-consult-mobile .ios-agree-group {
    margin-bottom: 8px;
}
#home .home-consult-mobile .index-consult-date-wrap {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}
#home .home-consult-mobile .index-consult-date-input {
    flex: 1 1 0%;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
}
#home .home-consult-mobile textarea.form-control::placeholder,
#home .home-consult-mobile input.form-control::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}
#home .home-consult-mobile textarea.form-control::-webkit-input-placeholder,
#home .home-consult-mobile input.form-control::-webkit-input-placeholder {
    color: var(--color-text-placeholder);
}
#home .home-consult-mobile textarea.form-control::-moz-placeholder,
#home .home-consult-mobile input.form-control::-moz-placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}
/* index.css 기본 .phone-auth-row min-width:220px 이 모바일 카드 폭을 밀어냄 */
@media (max-width: 768px) {
    #home .home-consult-mobile .phone-auth-row .form-control,
    #home .home-consult-mobile .phone-auth-row input,
    #home .home-consult-mobile .phone-auth-row textarea {
        min-width: 0;
        flex: 1 1 auto;
    }
}

/* PC 상담 카드: 동일 date 너비 */
#home_pc .home-consult-card .form-group {
    min-width: 0;
}
#home_pc .home-consult-card .index-consult-date-input {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
#home_pc .home-consult-card textarea.form-control::placeholder,
#home_pc .home-consult-card input.form-control:not([type="date"])::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}
#home_pc .home-consult-card textarea.form-control::-webkit-input-placeholder,
#home_pc .home-consult-card input.form-control:not([type="date"])::-webkit-input-placeholder {
    color: var(--color-text-placeholder);
}

/* 인덱스 헤더: 전체 너비 + 메뉴 중앙·로그인 우측 (stylesheet.css 레이아웃 보조) */
.nav-bar.index-page > .container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
}
@media (max-width: 990px) {
    .nav-bar.index-page .brand .header_flex img,
    .nav-bar.index-page .brand .header-logo-img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-shrink: 0;
    }
    .nav-bar.index-page .brand {
        flex: 1 1 auto;
        min-width: 120px;
        overflow: visible;
    }
}
@media (max-width: 1349px) {
    .nav-bar.index-page .nav-mobile {
        right: auto !important;
    }
}

/* =========================================================
   iOS transparent / liquid-glass theme (index only)
   Layout, IDs, and JS behavior stay the same.
   ========================================================= */
body:has(.index-ios-root) {
    --ios-blue: #007aff;
    --ios-blue-press: #0066d6;
    --ios-label: #111111;
    --ios-secondary: #2c2c2e;
    --ios-tertiary: #636366;
    --ios-fill: rgba(var(--color-white-rgb), 0.88);
    --ios-fill-strong: rgba(var(--color-white-rgb), 0.94);
    --ios-hairline: rgba(60, 60, 67, 0.12);
    --ios-shadow: 0 8px 24px rgba(var(--color-text-strong-rgb), 0.08);
    --ios-radius: 22px;
    --ios-radius-sm: 14px;
    --ios-blur: none;
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(90, 200, 250, 0.22), transparent 55%),
        radial-gradient(900px 500px at 92% 8%, rgba(175, 82, 222, 0.1), transparent 50%),
        linear-gradient(180deg, #eef4fb 0%, #f5f7fb 45%, #f7f8fb 100%) !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    color: var(--ios-label);
}
body:has(.index-ios-root) .nav-bar {
    background: rgba(var(--color-white-rgb), 0.92) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid rgba(60, 60, 67, 0.12) !important;
    box-shadow: 0 4px 16px rgba(var(--color-text-strong-rgb), 0.05) !important;
}

.index-ios-root {
    position: relative;
    z-index: 1;
}
.index-ios-atmosphere {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 780px;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.index-ios-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.28;
}
.index-ios-blob-a {
    width: 42vw;
    height: 42vw;
    min-width: 280px;
    min-height: 280px;
    left: -8%;
    top: -6%;
    background: #7dd3fc;
}
.index-ios-blob-b {
    width: 36vw;
    height: 36vw;
    min-width: 240px;
    min-height: 240px;
    right: -6%;
    top: 8%;
    background: #c4b5fd;
}
.index-ios-blob-c {
    width: 38vw;
    height: 38vw;
    min-width: 260px;
    min-height: 260px;
    left: 18%;
    bottom: 6%;
    background: var(--color-primary-300);
}
.index-ios-blob-d {
    width: 28vw;
    height: 28vw;
    min-width: 200px;
    min-height: 200px;
    right: 12%;
    bottom: -4%;
    background: #fbcfe8;
}

.index-ios-root .clogo,
.index-ios-root .bgwhite {
    background: var(--color-bg) !important;
}
.index-ios-root .bg-light {
    background: transparent;
}
.index-ios-root #home_pc {
    background: transparent !important;
}
.index-ios-root #home {
    background: #f4f6fa !important;
}
.index-ios-root #type-recommend,
.index-ios-root #monthly-rent,
.index-ios-root #yearly-rent {
    background: var(--color-bg) !important;
}
.index-ios-root .divider {
    background: rgba(60, 60, 67, 0.08);
    height: 1px;
}
.index-ios-root .main_clogo a {
    box-shadow: none;
    overflow: visible;
}

.index-hero-wrap {
    padding: 20px 16px 0;
    margin: 0 auto;
    max-width: 1440px;
}
.index-hero-row {
    display: flex;
    gap: 40px 0;
}
.index-service-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    align-items: stretch;
}
.index-service-grid > [class*="col-"] {
    display: flex;
}
.index-service-grid > [class*="col-"] > a {
    display: flex;
    width: 100%;
    flex: 1;
}
.index-service-grid .row-main-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.index-service-grid .row-main-card-tags {
    min-height: 3.2rem;
    margin-bottom: 4px;
}
.index-service-grid .row-main-card .service-text-main {
    margin-top: auto;
}

.index-ios-root #home_pc {
    padding: 36px 0 48px;
}
.index-ios-root #home_pc .row-main-card {
    border-radius: var(--ios-radius) !important;
    border: 1px solid var(--ios-hairline) !important;
    background: var(--ios-fill) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left !important;
    padding: 24px 20px 20px !important;
    box-shadow: var(--ios-shadow) !important;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.index-ios-root #home_pc .row-main-card:hover {
    transform: translateY(-4px);
    background: var(--ios-fill-strong) !important;
    box-shadow: 0 18px 40px rgba(var(--color-text-strong-rgb), 0.12), inset 0 1px 0 rgba(var(--color-white-rgb), 0.85);
    border-color: rgba(0, 122, 255, 0.28);
}
.index-ios-root #home_pc .row-main-card h2 {
    margin: 0 0 8px 0 !important;
    font-family: inherit !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    color: var(--ios-label) !important;
}
.index-ios-root #home_pc .row-main-card .service-text-main {
    padding-top: 16px;
}
.index-ios-root #home_pc .row-main-card .service-text-main p {
    font-size: 1.35rem !important;
    color: var(--ios-secondary) !important;
    line-height: 1.45;
    margin: 0 0 4px;
}
.index-ios-root #home_pc .row-main-card img {
    display: block;
    margin: 8px auto 12px;
    max-width: 220px;
    width: 100%;
    border-radius: 16px;
}
.index-ios-root .hashtag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.22);
}
.index-ios-root #home_pc .hashtag {
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.1);
    border: 1px solid rgba(0, 122, 255, 0.22);
}
.index-ios-root #home_pc .phone-auth-btn {
    background: var(--ios-blue);
    color: var(--color-text-inverse);
}
.index-ios-root #home_pc .hashtag + .hashtag {
    margin-left: 8px;
}

.index-ios-root #home_pc .home-consult-card {
    border-radius: 28px;
    background: var(--ios-fill-strong) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--ios-shadow);
    border: 1px solid var(--ios-hairline);
    padding: 24px 24px 24px !important;
}
.index-ios-root #home .home-consult-mobile {
    border-radius: 24px;
    background: var(--color-bg) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--ios-shadow);
    border: 1px solid var(--ios-hairline);
    padding: 16px 16px 12px !important;
}
.index-ios-root #home_pc .home-consult-card h3,
.index-ios-root .ios-consult-title {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
    text-align: left;
    color: var(--ios-label);
}
.index-ios-root .ios-consult-title {
    text-align: center;
    font-size: 22px;
    margin-bottom: 24px;
}
.index-ios-root #home_pc .home-consult-card h3 span,
.index-ios-root .ios-consult-title span {
    background: none;
    -webkit-text-fill-color: inherit;
    color: var(--ios-label);
}

.ios-label {
    font-weight: 600 !important;
    color: var(--ios-label) !important;
    margin-bottom: 8px !important;
    display: block !important;
    font-size: 14px !important;
    letter-spacing: -0.01em;
}
.ios-req {
    color: #ff3b30;
    margin-right: 4px;
}
.ios-field--area {
    height: auto !important;
    min-height: 120px;
    overflow: auto;
    resize: vertical;
}
.index-ios-root #home_pc .ios-field.form-control,
.index-ios-root #home .ios-field.form-control,
.ios-field,
.index-ios-root .ios-field.form-control {
    overflow: hidden;
    width: 100%;
    border: 1px solid rgba(60, 60, 67, 0.22) !important;
    border-radius: 14px !important;
    padding: 16px 16px !important;
    font-size: 16px !important;
    height: 52px;
    line-height: 1.35;
    background: var(--color-bg) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    color: var(--ios-label);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.ios-field--mobile {
    height: 44px;
    padding: 12px 16px !important;
    font-size: 15px !important;
}
.ios-field--area {
    height: auto !important;
    min-height: 120px;
    overflow: auto;
    resize: vertical;
}
.index-ios-root #home_pc .ios-field.form-control:focus,
.index-ios-root #home .ios-field.form-control:focus,
.ios-field:focus,
.index-ios-root .ios-field.form-control:focus {
    outline: none;
    border-color: rgba(0, 122, 255, 0.55) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.16) !important;
}
.ios-agree {
    background: rgba(0, 122, 255, 0.08);
    padding: 16px 16px;
    border-radius: 14px;
    border: 1px solid rgba(0, 122, 255, 0.12);
}
.ios-agree label {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 500;
    color: var(--ios-label);
    margin: 0;
    font-size: 14px;
}
.ios-agree input[type="checkbox"] {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    accent-color: var(--ios-blue);
    cursor: pointer;
}
.ios-agree-group {
    margin-bottom: 24px;
}
.ios-submit-group {
    margin: 0;
}

.index-ios-root .phone-auth-btn {
    background: var(--ios-blue);
    border: none;
    padding: 8px 16px;
    border-radius: 14px;
    color: var(--color-text-inverse);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0, 122, 255, 0.28);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}
.index-ios-root .phone-auth-btn:hover {
    background: var(--ios-blue-press);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 122, 255, 0.32);
}
.index-ios-root #home_pc #easy-reservation-submit-pc,
.index-ios-root #home #easy-reservation-submit-mobile,
.index-ios-root #easy-reservation-submit-pc,
.index-ios-root #easy-reservation-submit-mobile {
    background: var(--ios-blue) !important;
    border: none !important;
    padding: 16px 36px !important;
    border-radius: 999px !important;
    color: var(--color-text-inverse) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 12px 28px rgba(0, 122, 255, 0.32) !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    min-width: 200px;
}
.index-ios-root #easy-reservation-submit-mobile {
    padding: 16px 28px !important;
    font-size: 15px !important;
    min-width: 180px;
}
.index-ios-root #home_pc #easy-reservation-submit-pc:hover,
.index-ios-root #home #easy-reservation-submit-mobile:hover,
.index-ios-root #easy-reservation-submit-pc:hover,
.index-ios-root #easy-reservation-submit-mobile:hover {
    background: var(--ios-blue-press) !important;
    transform: translateY(-1px);
}

.index-promo-banners {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
}
.index-promo-banner {
    flex: 1 1 48%;
    min-width: 260px;
    border-radius: 20px;
    padding: 16px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ios-fill-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ios-hairline);
    box-shadow: var(--ios-shadow);
}
.index-promo-emoji { font-size: 28px; line-height: 1; }
.index-promo-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ios-label);
}
.index-promo-sub {
    font-size: 14px;
    color: var(--ios-secondary);
    margin-top: 4px;
}
.index-promo-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.index-promo-banner--save .index-promo-title { color: var(--ios-blue); }
.index-promo-banner--price .index-promo-title { color: #ff3b30; }

.home-consult-mobile-wrap { margin-bottom: 20px; }
.home-consult-mobile-col { padding: 0; }
.home-mobile-banner {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ios-hairline);
    padding: 16px 16px;
    text-align: center;
    margin-bottom: 16px;
    border-radius: 20px;
    box-shadow: var(--ios-shadow);
}
.home-mobile-banner p {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ios-label);
    margin: 0;
}
.home-mobile-banner span { color: var(--ios-blue); }
.home-mobile-card-list {
    background: #eef2f7;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ios-hairline);
    padding: 16px;
    border-radius: 24px;
    box-shadow: var(--ios-shadow);
}
.home-mobile-card-link { text-decoration: none; display: block; }
.home-mobile-card {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ios-hairline);
    border-radius: 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 8px;
    overflow: hidden;
    min-height: 80px;
    box-shadow: 0 6px 18px rgba(var(--color-text-strong-rgb), 0.06);
}
.home-mobile-card img {
    border-radius: 18px 0 0 18px;
    grid-column: 1;
    grid-row: 1;
}
.home-mobile-card:has(.home-mobile-card-tags) img {
    border-radius: 18px 0 0 0;
}
.home-mobile-card-body {
    grid-column: 2;
    grid-row: 1;
    padding-left: 16px;
    min-width: 0;
}
.home-mobile-card-title {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ios-label);
}
.home-mobile-card-tags {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 16px 8px 16px;
}
.home-mobile-card-tags .hashtag {
    white-space: nowrap;
    flex: 0 0 auto;
}
.home-mobile-card-chevron {
    grid-column: 3;
    grid-row: 1;
    font-size: 1.4rem;
    color: var(--ios-tertiary);
    padding-right: 16px;
    flex-shrink: 0;
}

.index-ios-root .section-head h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ios-label);
}
.index-ios-root .section-head .desc {
    color: var(--ios-secondary);
}
.index-ios-root .btn-more {
    padding: 8px 16px;
    border: 1px solid rgba(0, 122, 255, 0.28);
    color: var(--ios-blue);
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 999px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.08);
}
.index-ios-root .btn-more:hover {
    background: rgba(0, 122, 255, 0.1);
}

.index-ios-root .card {
    background: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--ios-hairline);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(var(--color-text-strong-rgb), 0.07);
    overflow: hidden;
}
.index-ios-root .grid-cards .thumb {
    background: #f4f6fa;
}
.index-ios-root .grid-cards .index-price-stack {
    background: #f7f9fc;
    border: 1px solid #e8ecf1;
    box-shadow: none;
}
.index-ios-root .grid-cards .index-price-stack .price {
    color: var(--ios-blue);
}
.index-ios-root .grid-cards .index-price-stack__head-period-term {
    color: var(--ios-blue);
}
.index-ios-root .card-placeholder {
    background: #f6f7fa;
    border: 1px dashed #d4d7de;
}
.index-ios-root .grid-cards .thumb img,
.index-ios-root .grid-cards .thumb-link img {
    filter: none;
    opacity: 1;
    -webkit-filter: none;
}

@media (max-width: 1200px) {
    .index-ios-atmosphere {
        display: none;
    }
    body:has(.index-ios-root) {
        background: #f4f6fa !important;
    }
    body:has(.index-ios-root) .nav-bar {
        background: var(--color-bg) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .index-ios-root #home,
    .index-ios-root #type-recommend,
    .index-ios-root #monthly-rent,
    .index-ios-root #yearly-rent,
    .index-ios-root .clogo,
    .index-ios-root .bgwhite {
        background: #f4f6fa !important;
    }
    .index-ios-root #home .home-consult-mobile,
    .home-mobile-banner,
    .home-mobile-card,
    .index-promo-banner,
    .index-ios-root .card,
    .index-ios-root .btn-more {
        background: var(--color-bg) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .home-mobile-card-list {
        background: #e8eef5 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (max-width: 768px) {
    .index-ios-root #home {
        margin-bottom: 16px;
        padding: 8px 0 0;
    }
    .index-ios-root .hashtag {
        font-size: 1rem;
        padding: 4px 8px;
    }
    .home-mobile-card-tags .hashtag,
    .index-ios-root .home-mobile-card-tags .hashtag {
        font-size: 1rem;
        padding: 4px 8px;
        white-space: nowrap;
    }
}

@media (max-width: 400px) {
    .home-mobile-card-tags {
        gap: 4px;
        padding: 0 8px 8px 8px;
    }
    .home-mobile-card-tags .hashtag,
    .index-ios-root .home-mobile-card-tags .hashtag {
        font-size: 0.9rem;
        padding: 4px 4px;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .index-ios-root #home_pc .row-main-card,
    .index-ios-root #home_pc .home-consult-card,
    .index-ios-root #home .home-consult-mobile,
    .index-ios-root .card,
    .home-mobile-card,
    .home-mobile-card-list,
    .home-mobile-banner,
    .index-promo-banner {
        background: var(--color-bg) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .index-ios-root #home_pc .row-main-card,
    .index-ios-root #home_pc .home-consult-card,
    .index-ios-root #home .home-consult-mobile,
    .index-ios-root .card,
    .home-mobile-card,
    .home-mobile-card-list,
    .home-mobile-banner,
    .index-promo-banner,
    body:has(.index-ios-root) .nav-bar,
    .ios-field,
    .index-ios-root .ios-field.form-control {
        background: var(--color-bg) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}