/* 원본 CSS에서 서브페이지(myoffice 등)에서 필요한 오버라이드 */

/* GNB를 absolute → relative로 변경하여 content 밀어내기 */
.gnb_header {
    position: relative;
    background-color: #fff;
    height: auto !important;
}
.gnb_header .gnb_box {
    height: 140px;
}
.main_menu {
    margin: -140px auto 0px;
}
/* 드롭다운 하위메뉴 콘텐츠도 GNB/상품과 동일한 좌우 60px 여백. 컬럼 간격은 space-between(넓음) 대신 좌측부터 적당히 모음 */
.main_menu>li>div>ul {
    max-width: 1600px;
    min-width: 0;
    padding-left: 60px;
    padding-right: 60px;
    box-sizing: border-box;
    justify-content: center;
    gap: 72px;
}
/* 드롭다운 컬럼 제목(h3)은 클릭 안 되는 제목 → 텍스트/I-beam 커서 대신 기본 화살표 */
.main_menu>li>div>ul>li h3 { cursor: default; }
/* SHOP(munu01) 이미지 그리드: 양끝 원이 화면 여백에 딱 붙지 않게 space-around(양끝에도 여백) */
.main_menu>li.munu01>div>ul {
    justify-content: space-around;
    gap: 0;
}

/* 서브메뉴 드롭다운 */
.main_menu>li>div {
    position: absolute;
    left: 0;
    top: 140px;
    width: 100%;
    z-index: 99;
}
.main_menu>li.active>div,
.main_menu>li:hover>div {
    height: auto;
    overflow: visible;
    box-shadow: 0px 5px 5px -5px rgba(0,0,0,0.2);
}
/* hover 시 대메뉴 밑줄(base.css active 대응) */
.main_menu>li:hover>a:before {
    width: calc(100% - 60px);
    opacity: 1;
}

/* 전체메뉴 패널 */
.gnb_header .gnb_total .close_box,
.gnb_header .gnb_total .total_menu {
}

/* 컨텐츠 영역 상단 여백 제거 */
.content {
    margin-top: 0;
    padding-top: 0;
}
.sub_content.myoffice_main {
    padding-top: 40px;
}
/* 원천징수 페이지: GNB가 relative이므로 padding-top 조정 (원본: 240px - GNB 140px = 100px) */
.sub_content.receipt_list {
    padding-top: 30px;
}

/* 주민번호 수집 안내 팝업 */
#cpnoPopup .layer_popup {
    width: 700px;
    min-width: 700px;
    max-width: 700px;
    height: 543px;
    overflow: hidden;
}
#cpnoPopup .pop_content.my_number {
    height: calc(100% - 70px);
    overflow-y: hidden;
}
#cpnoPopup .pop_title {
    font-size: 14px;
    line-height: 20px;
}
.my_number .my_number_info_box span {
    font-size: 14px;
    padding: 5px 10px;
    background-color: #000;
    color: #FFF;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 5px;
}
.my_number .my_number_info_box p {
    font-size: 13px;
    color: #666;
    line-height: 15px;
    margin-bottom: 20px;
    word-break: keep-all;
}
.my_number .btn-set {
    margin: 20px 0;
}
.my_number .btn-set a.btn {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 48px;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    color: #FFF;
    font-weight: 400;
    border-radius: 35px;
}
.my_number .dot_text.grey.font_grey {
    display: block;
    font-size: 13px;
    line-height: 20px;
    color: #999;
    padding-left: 12px;
    position: relative;
}
.my_number .dot_text.grey.font_grey::before {
    content: "*";
    position: absolute;
    left: 0;
}

/* ===== 이벤트 배너 Swiper ===== */
/* 원본 Swiper 구버전 기본: position:absolute; top:50%; margin-top:-22px
   신버전이 top: var(--swiper-navigation-top-offset, 50%) 로 잡으므로 강제 덮어쓰기 */
div.event_banner_wrap .banner_con > .swiper-button-prev,
div.event_banner_wrap .banner_con > .swiper-button-next {
    position: absolute !important;
    top: auto !important;
    bottom: 100px !important;
    transform: none !important;
    margin-top: 0 !important;
    width: 40px !important;
    height: 40px !important;
    background-image: url(https://www.pmi-korea.com/resources/image/common/controls_main.png) !important;
    background-repeat: no-repeat !important;
    background-size: 80px 80px !important;
    z-index: 10;
    cursor: pointer;
}
div.event_banner_wrap .banner_con > .swiper-button-prev {
    background-position: 0px 0px;
    left: 0px !important;
}
div.event_banner_wrap .banner_con > .swiper-button-prev:hover {
    background-position: 0px -40px;
}
div.event_banner_wrap .banner_con > .swiper-button-next {
    background-position: -40px 0px;
    left: 60px !important;
    right: auto !important;
}
div.event_banner_wrap .banner_con > .swiper-button-next:hover {
    background-position: -40px -40px;
}
.event_banner_wrap .swiper-container.event_banner_slider {
    left: 440px;
}

/* ===== 원천징수 영수증 ===== */
.withholding_view {position:relative; width:700px; height:1007px; margin: 0 auto;}
.withholding_view .con { position:absolute; left:0px; top:0px; width:700px; height:1007px; z-index:1;}
.withholding_view .con .view {border:2px solid #000; height:1005px; position:relative;}
.withholding_view .ctt_01 {width:696px; height:89px;}
.withholding_view .ctt_01 ul {overflow:hidden; width:696px;}
.withholding_view .ctt_01 li {float:left; list-style:none;}
.withholding_view .ctt_01 li.box_01 {width:150px;}
.withholding_view .ctt_01 li.box_02 {width:372px; text-align:center;}
.withholding_view .ctt_01 li.box_03 {width:174px; padding:7px 0;}
.withholding_view table {width:696px;}
.withholding_view .ctt_01 .box_01 table {width:150px;}
.withholding_view th {border-right:1px solid #000; border-bottom:1px solid #000; font-weight:normal; text-align:center; line-height:15px; height:34px;}
.withholding_view td {border-right:1px solid #000; border-bottom:1px solid #000; text-align:center; line-height:15px; padding:0 4px; height:34px;}
.withholding_view .ctt_01 .box_01 td span {padding-right:5px;}
.withholding_view .ctt_01 h1 {font-size:20px; padding-top:25px; padding-bottom:10px;}
.withholding_view .ctt_01 h4 {font-size:14px;}
.withholding_view .ctt_01 .box_03 table {width:174px; border-top:1px solid #000;}
.withholding_view .ctt_02 {width:696px; height:210px;}
.withholding_view .ctt_02 table {border-top:2px solid #000;}
.withholding_view .box_03 th:first-child {border-left:1px solid #000;}
.withholding_view .box_03 td:last-child {border-right:none;}
.withholding_view .ctt_02 td:last-child {border-right:none;}
.withholding_view td.left {text-align:left;}
.withholding_view .ctt_03 {height:36px;}
.withholding_view .ctt_03 table {border-top:1px solid #000;}
.withholding_view .ctt_03 td:last-child {border-right:none;}
.withholding_view .ctt_04 {height:547px;}
.withholding_view .ctt_04 table {border-top:1px solid #000;}
.withholding_view .ctt_04 td:last-child {border-right:none;}
.withholding_view .ctt_04 tr.sm_td td { height: 25px;}
.withholding_view td.right {text-align:right;}
.withholding_view .ctt_05 {padding:15px; position:relative; border-top:1px solid #000; height:96px;}
.withholding_view .ctt_05 p {text-align:center; line-height:23px;}
.withholding_view .ctt_05 .left {text-align: left;}
.withholding_view .ctt_05 .right {text-align: right;}
.withholding_view .ctt_05 .space {padding-left:10px;}
.withholding_view .ctt_05 .space_01 {padding-left:20px;}
.withholding_view .ctt_05 .space_02 {padding-left:40px;}
.withholding_view .ctt_05 .stamp {position:absolute; right: 15px; top:30px;}
.withholding_view .ctt_05 .bold {font-weight:bold; text-align:left;}

@media print {
    .gnb_header, .sub_title, .content_box, .footer, .chatbot, .no-print { display: none !important; }
    .withholding_view { margin: 0; }
}

/* ===== 공통 레이아웃: linemap_menu + sub_title 반응형 ===== */

/* linemap_menu: absolute → relative, 고정폭 제거.
   원본은 .linemap_menu 자체가 position:absolute (front/base.css:558,
   mobile/base.css:538) 라 드롭다운을 열어도 아래 컨텐츠를 밀지 않고 덮는다.
   원본의 고정 top(front 430px / mobile 220px)은 sub_title 높이가 반응형인
   우리 레이아웃에 그대로 쓸 수 없어 relative 로 두되, ul 높이를 닫힘 상태
   높이로 고정해 펼침 증가분만 흐름 밖으로 뺀다 — 결과는 원본과 같다.
   (li 는 align-self:flex-start 라 ul 높이에 늘어나지 않고 아래로 넘친다.
   덮는 순서는 base.css:558 의 z-index:20 — GNB(z-index 90/100)보다 아래.)
   --linemap-pill-h = li>a 높이(60px) + li 상하 테두리 2px. */
.linemap_menu {
    --linemap-pill-h: 62px;
    position: relative;
    top: auto;
    width: 100%;
    height: var(--linemap-pill-h);
    overflow: visible;
}
.linemap_menu ul {
    width: auto;
    max-width: 1600px;
    height: var(--linemap-pill-h);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding-left: 0;
}
.linemap_menu li {
    float: none;
    width: auto;
    min-width: 200px;
    align-self: flex-start;
    min-height: 0;
    position: relative;
    z-index: 1;
    /* pill 헤더(62px) 세로 중앙 ≈ 22px. active 시에도 center 금지 — 펼치면 chevron이 따라 내려감 */
    background-position: right 20px top 22px !important;
    background-repeat: no-repeat !important;
}
.linemap_menu li.active {
    background-position: right 20px top 22px !important;
    z-index: 2;
}
/* 드롭다운 패널은 흐름 밖 — 펼쳐도 sub_title / content_box 높이 불변 */
.linemap_menu li > div {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    box-sizing: border-box;
}
.linemap_menu li:nth-child(1).active {
    border-radius: 30px 0 0 0 !important;
}
.linemap_menu li:nth-child(1).active > div {
    background-color: #FFF;
    border: 1px solid #DDD;
    border-top: none;
    border-radius: 0 0 0 30px;
}
.linemap_menu li:nth-child(2).active {
    border-radius: 0 30px 0 0 !important;
}
.linemap_menu li:nth-child(2).active > div {
    background-color: #004687;
    border: 1px solid #004687;
    border-top: none;
    border-radius: 0 0 30px 30px;
}
/* base.css 고정 width:250px — 긴 라벨(카프로그램 적립금 조회 등)이 pill 끝에서 잘림 */
.linemap_menu li>a,
.linemap_menu li>div>a {
    width: max-content;
    min-width: 250px;
    max-width: none;
    padding-right: 48px;
    box-sizing: border-box;
    white-space: nowrap;
}
.linemap_menu.center {
    top: auto;
}
.linemap_menu.center ul {
    padding-left: 0;
}
/* base.css .sub_content { overflow:hidden } — 펼친 형제 메뉴 하단이 잘림 */
.sub_content:has(.linemap_menu) {
    overflow: visible;
}

/* 각 li를 독립 동작시키기: active 시 자기 자신만 변경 */
.linemap_menu li:nth-child(1) {
    border-radius: 30px 0 0 30px !important;
    background-image: url(https://www.pmi-korea.com/resources/image/common/arrow_select01.png) !important;
}
.linemap_menu li:nth-child(1).active {
    background-image: url(https://www.pmi-korea.com/resources/image/common/arrow_select02.png) !important;
}
.linemap_menu li:nth-child(2) {
    border-radius: 0 30px 30px 0 !important;
    background-image: url(https://www.pmi-korea.com/resources/image/common/arrow_select03.png) !important;
}
.linemap_menu li:nth-child(2).active {
    background-image: url(https://www.pmi-korea.com/resources/image/common/arrow_select04.png) !important;
}

/* sub_title: 고정폭 → 반응형 */
/* 기존 페이지 (myoffice, withholding) — 원본 유지, 최소한의 오버라이드만 */
.sub_content .sub_title.center {
    min-height: 250px;
    padding-right: 0px;
    padding-top: 0px;
}

/* 카보너스 전용 서브타이틀 */
.sub_content.car_bonus_write .sub_title.center {
    width: auto;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    min-height: auto;
    padding: 20px 20px 0;
}
/* compact 페이지헤더 (폼/기능 페이지용) */
.sub_content .sub_title.center.compact {
    padding: 10px 20px 0;
    margin-bottom: 50px;
}
.sub_content .sub_title.center.compact h2 {
    font-size: 44px;
    line-height: 52px;
    margin-bottom: 12px;
}
.sub_content .sub_title.center.compact .line_map {
    margin-bottom: 8px;
}
.sub_content .sub_title.center.compact .line_map li {
    font-size: 12px;
    margin-right: 20px;
}
.sub_content .sub_title.center.compact .line_map li:first-child {
    margin-left: 20px;
}
.sub_content .sub_title.center.compact .line_map li:first-child::after {
    width: 14px;
    height: 14px;
    left: -20px;
    top: 2px;
    background-size: 14px;
}
.sub_content .sub_title.center.compact .line_map li:before {
    right: -14px;
    top: 6px;
    width: 3px;
    height: 3px;
}

/* line_map breadcrumb: 중앙 정렬 */
.sub_content .sub_title.center .line_map {
    justify-content: center;
}

/* 카보너스 전용 content_box */
.sub_content.car_bonus_write .content_box {
    width: auto;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 카프로그램 페이지 */
.sub_content.car_bonus_info {
    padding-top: 30px;
}
.sub_content.car_bonus_write {
    padding-top: 30px;
}

/* 주유 영수증 페이지 — 카본과 동일 레이아웃 패턴 */
.sub_content.fuel_voucher .sub_title.center {
    width: auto;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 70px;
    min-height: auto;
    padding: 20px 20px 0;
}
.sub_content.fuel_voucher .content_box {
    width: auto;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.sub_content.fuel_voucher {
    padding-top: 30px;
}

/* 태블릿 */
@media only screen and (max-width: 1200px) {
    .linemap_menu li {
        min-width: 160px;
    }
    .linemap_menu li>a {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
    .linemap_menu li>div>a {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 모바일 */
/* 기존 768px 모바일 — 헤더는 하단 통합 블록에서 처리, 카보너스 폼만 유지 */
@media only screen and (max-width: 768px) {
    .sub_content.car_bonus_write .sub_title.center {
        min-height: auto;
        padding: 40px 15px 0;
        margin-bottom: 40px;
    }
    .sub_content.car_bonus_write .sub_title.center h2 {
        font-size: 34px;
        line-height: 42px;
        margin-bottom: 20px;
    }
    .sub_content.car_bonus_write .content_box {
        padding-left: 15px;
        padding-right: 15px;
    }
    .sub_content.car_bonus_write {
        padding-top: 40px;
    }

    /* 주유 영수증 모바일 */
    .sub_content.fuel_voucher .sub_title.center {
        min-height: auto;
        padding: 40px 15px 0;
        margin-bottom: 40px;
    }
    .sub_content.fuel_voucher .sub_title.center h2 {
        font-size: 34px;
        line-height: 42px;
        margin-bottom: 20px;
    }
    .sub_content.fuel_voucher .content_box {
        padding-left: 15px;
        padding-right: 15px;
    }
    .sub_content.fuel_voucher {
        padding-top: 40px;
    }

    /* 카프로그램 폼 반응형 */
    .car_input ul.en_name-set,
    .car_input ul.phone-set,
    .car_input ul.post-set {
        flex-direction: column;
    }
    .car_input canvas {
        height: 200px !important;
    }
}

/* ===== 카프로그램 신청 위저드 ===== */

/* 단계 표시 */
.cb-steps {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.cb-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    opacity: 0.5;
    transition: opacity 0.2s;
    cursor: pointer;
}
.cb-step:hover { opacity: 0.8; }
.cb-step.active { opacity: 1; }
.cb-step.done { opacity: 0.7; }
.cb-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ddd;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}
.cb-step.active .cb-step-num {
    background: #004687;
    color: #fff;
}
.cb-step.done .cb-step-num {
    background: #30d158;
    color: #fff;
}
.cb-step-label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}
.cb-step.active .cb-step-label {
    color: #004687;
    font-weight: 600;
}

/* 저장 바 */
.cb-save-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 0 16px;
}
.cb-autosave-text {
    font-size: 12px;
    color: #30d158;
}

/* 섹션 */
.cb-section {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px 0 40px;
}
.cb-section-header {
    position: relative;
    margin-bottom: 30px;
}
.cb-section-header h3 {
    font-size: 26px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}
.cb-desc {
    font-size: 15px;
    color: #888;
    line-height: 1.6;
}

/* 카드 선택 (STEP 1) */
.cb-card-select {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}
.cb-card {
    flex: 1;
    border: 2px solid #ddd;
    border-radius: 16px;
    padding: 30px 24px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cb-card:hover {
    border-color: #004687;
}
.cb-card.selected {
    border-color: #004687;
    box-shadow: 0 0 0 1px #004687;
    background: #f0f6ff;
}
.cb-card h4 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #222;
    text-align: center;
}
.cb-card p {
    font-size: 17px;
    color: #777;
    margin-bottom: 0;
    text-align: center;
}

/* 업로드 영역 */
.cb-upload-box {
    margin-bottom: 24px;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
}
.cb-upload-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 6px;
}
.cb-upload-header p {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}
.cb-required {
    font-size: 12px;
    color: #ff3b30;
    font-weight: 500;
}
.cb-optional {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}
.cb-upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #ddd;
    border-radius: 12px;
    padding: 40px 20px;
    cursor: pointer;
    transition: border-color 0.2s;
    text-align: center;
}
.cb-upload-drop:hover,
.cb-upload-drop.drag-active {
    border-color: #004687;
    background: #f0f6ff;
}
.cb-upload-icon {
    font-size: 36px;
    color: #bbb;
    margin-bottom: 8px;
}
.cb-upload-drop p {
    font-size: 15px;
    color: #444;
    margin-bottom: 4px;
}
.cb-upload-drop span {
    font-size: 12px;
    color: #aaa;
}
.cb-upload-result {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.cb-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cb-file-preview {
    max-width: 200px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}
.cb-file-preview img {
    width: 100%;
    display: block;
}
.cb-file-missing {
    margin: 0;
    padding: 24px 12px;
    color: #777;
    font-size: 13px;
    text-align: center;
    word-break: keep-all;
}
.cb-file-clickable {
    cursor: pointer;
    position: relative;
}
.cb-file-clickable:hover .cb-file-zoom {
    opacity: 1;
}
/* 터치 기기에는 호버가 없어 안내가 영영 뜨지 않는다. */
@media (hover: none) {
    .cb-file-clickable .cb-file-zoom { opacity: 1; }
}
.cb-file-zoom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    text-align: center;
    font-size: 12px;
    padding: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

/* 등록증 돋보기 확대 */
.cb-lens-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
}
.cb-lens-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-size: 250%;
    background-position: var(--zoom-x, 50%) var(--zoom-y, 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}
.cb-lens-container:hover .cb-lens-overlay {
    opacity: 1;
}
.cb-lens-container:hover > img {
    opacity: 0.3;
}

/* 이미지 확대 모달 */
.cb-img-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
}
.cb-preview-modal {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}
.cb-preview-modal img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}
.cb-preview-modal .cb-pdf-pages { max-height: 85vh; overflow-y: auto; border-radius: 8px; }
.cb-preview-modal .cb-pdf-pages img { width: min(860px, 88vw); max-width: none; max-height: none; border-radius: 0; }
.cb-preview-modal .cb-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
}
.cb-file-preview-pdf {
    padding: 20px;
    text-align: center;
    background: #f8f8f8;
}
.cb-file-preview-pdf span {
    display: inline-block;
    background: #ff3b30;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.cb-file-preview-pdf p {
    font-size: 12px;
    color: #666;
    word-break: break-all;
}

.cb-file-preview-pdf-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
    flex-wrap: wrap;
}
.cb-file-preview-pdf-actions .cb-info-link {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.cb-pdf-pages {
    display: block;
    width: 100%;
    background: #f4f4f4;
}
.cb-pdf-pages img {
    display: block;
    width: 100%;
    height: auto;
}
.cb-pdf-pages-message {
    padding: 24px 0;
    color: #777;
    font-size: 13px;
    text-align: center;
}


/* 폼 */
.cb-form-group {
    margin-bottom: 20px;
}
.cb-form-group label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
.cb-form-group .inp-txt,
.cb-form-group .select {
    width: 100%;
}
.cb-form-row {
    display: flex;
    gap: 16px;
}
.cb-form-row .cb-form-group {
    flex: 1;
}
.cb-hint {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}
.cb-sub-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.cb-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
}
.cb-title-row .cb-sub-title {
    margin: 0;
    padding: 0;
    border-bottom: 0;
}
.cb-title-row .fv-notice-btn {
    position: static;
    flex: 0 0 auto;
}
.cb-title-row .cb-hint {
    margin: 0 auto 0 0;
    min-width: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* 단계나 고른 값이 바뀌어 아래 화면이 갈릴 때, 새로 그린 자리를 눈에 띄게 한다. */
@keyframes cb-reveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.cb-reveal {
    animation: cb-reveal 0.28s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    .cb-reveal { animation: none; }
}
.cb-phone-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 국번 · 앞자리 · 뒷자리를 1 : 1.2 : 1.2 로 나눈다. */
.cb-phone-row .select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
.cb-phone-row .inp-txt {
    flex: 1.2 1 0;
    width: auto;
    min-width: 0;
}
.cb-phone-row span {
    color: #999;
}
.cb-post-row {
    display: flex;
    gap: 10px;
}
.cb-post-row .inp-txt {
    flex: 1 1 auto;
    min-width: 0;
}
/* 우편번호 · 주소 칸은 눌러서 주소 찾기를 여는 자리다. */
.cb-post-input {
    cursor: pointer;
}
.cb-address-row .cb-form-group:first-child {
    flex: 1 1 0;
}
.cb-address-row .cb-form-group:last-child {
    flex: 1.3 1 0;
}
.cb-post-row .btn {
    flex: 0 0 150px;
    white-space: nowrap;
    font-size: 13px;
}

/* 전자서명 */
.cb-agreement {
    margin: 16px 0 0;
    padding-top: 16px;
    font-size: 15px;
    line-height: 1.7;
    color: #004687;
}
/* 그린 뒤에만 나온다. 회색 버튼은 못 누르는 것처럼 보여 파란 테두리 꼴을 쓴다. */
.btn.cb-signature-clear { margin-top: 8px; padding: 0 20px; background: #fff; color: #004687; border: 1px solid #004687; border-radius: 8px; }
.btn.cb-signature-clear:hover { background: #f0f6ff; }
.cb-signature-box {
    text-align: center;
}
/* 안내 글씨는 캔버스가 아니라 그 위에 얹는다 — 캔버스에 그리면 서명 이미지에 같이 저장된다. */
.cb-signature-pad {
    position: relative;
}
.cb-signature-pad canvas {
    display: block;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
}
.cb-signature-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #bbb;
    font-size: 16px;
    pointer-events: none;
    user-select: none;
}

/* 확인 (STEP 6) */
.cb-review {
    margin-bottom: 30px;
}
.cb-review-block {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}
.cb-review-block h4,
.cb-notice-group h4 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 확인 단계 개선 */
.cb-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #004687;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-right: 8px;
}
.cb-review-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 10px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.cb-review-badge.buy { background: #e8f5e9; color: #2e7d32; }
.cb-review-badge.lease { background: #e3f2fd; color: #1565c0; }

.cb-review-split {
    display: flex;
    gap: 20px;
}
.cb-review-left {
    flex-shrink: 0;
}
.cb-review-left .cb-file-preview {
    max-width: 180px;
}
.cb-review-right {
    flex: 1;
    min-width: 0;
}
.cb-review-no-file {
    width: 180px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px dashed #f0a0a2;
    border-radius: 8px;
    color: #ed1c24;
    font-size: 13px;
    font-weight: 600;
}
.cb-review-no-file-sm {
    padding: 12px;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 8px;
    color: #999;
    font-size: 12px;
    text-align: center;
}
/* 필수 서류가 빈 자리 — 선택 서류(스케줄2)와 눈으로 갈라야 한다. */
.cb-review-no-file-sm.is-required {
    border-color: #f0a0a2;
    color: #ed1c24;
    font-weight: 600;
}

.cb-review-row {
    display: flex;
    gap: 16px;
}
.cb-review-half {
    flex: 1;
}

.cb-review-sticker {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cb-review-sticker img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
}
.cb-review-sticker span {
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.cb-review-address p {
    font-size: 15px;
    color: #222;
    line-height: 1.5;
    margin: 0;
}
.cb-review-zip {
    font-size: 13px !important;
    color: #888 !important;
}

.cb-review-sticker-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}
.cb-review-sticker-thumb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #eee;
}
.cb-review-sticker-header div {
    display: flex;
    flex-direction: column;
}
.cb-review-sticker-header strong {
    font-size: 16px;
    color: #222;
}
.cb-review-sticker-header span {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}
.cb-spec-grid-sm .cb-spec-item img {
    width: 100%;
    height: 60px;
    object-fit: contain;
}
.cb-spec-grid-sm .cb-spec-item strong {
    font-size: 11px;
}
.cb-spec-grid-sm .cb-spec-item span {
    font-size: 10px;
}
.cb-review-sig {
    max-width: 100%;
    max-height: 100px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* 텍스트 좌 + 이미지 우 */
.cb-review-lr {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
.cb-review-lr > table {
    flex: 1;
    min-width: 0;
}
.cb-review-lr > .cb-file-preview {
    flex-shrink: 0;
    max-width: 180px;
}
.cb-review-lr > .cb-review-no-file {
    flex-shrink: 0;
}
/* 표 옆이 아니라 그 아래 줄에 가로로 늘어놓는다. */
.cb-review-files-col {
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cb-review-files-col .cb-file-preview {
    max-width: 160px;
}
/* 선택 서류는 안 내도 되므로 필수 서류의 빨간 표시를 쓰지 않는다. */
.cb-review-file-pick.is-optional {
    border-color: #ccc;
    color: #888;
}
.cb-review-file-pick.is-optional small {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #888;
}

@media only screen and (max-width: 768px) {
    .cb-review-lr { flex-direction: column; }
    .cb-review-lr > .cb-file-preview { max-width: 100%; }
    .cb-review-files-col .cb-file-preview { max-width: 120px; }
}

/* 확인 화면의 빈 칸 — 그 자리에서 채운다. 채워진 값은 읽기 전용 글자로 남는다. */
.cb-review-fill {
    padding: 6px 0;
}
/* 아직 비어 있는 칸은 서류 첨부 칸과 같은 빨간 테두리로 알린다. */
.cb-review-fill-empty .inp-txt,
.cb-review-fill-empty .select,
.cb-review-fill-empty .cb-date-kr {
    border-color: #ed1c24;
}
/* 한 칸이 비면 묶음 전체가 빨개지던 것을 좁힌다 — 값이 든 칸은 제 색으로 둔다.
   빈 칸은 마크업이 is-empty 로 알린다. placeholder 유무로 판정하면
   placeholder 가 없는 칸(연락처 뒷자리)이 비어도 표시가 풀린다. */
.cb-review-fill-empty .inp-txt:not(.is-empty),
.cb-review-fill-empty .select:not(.is-empty),
.cb-review-fill-empty .cb-date-kr:not(.is-empty) {
    border-color: #ddd;
}
.cb-review-fill-empty .cb-date-kr-text.is-empty {
    color: #e8888a;
}
.cb-review-fill-empty .inp-txt::placeholder {
    color: #e8888a;
}
.cb-review-fill {
    min-width: 0;
}
.cb-review-fill .inp-txt,
.cb-review-fill .select,
.cb-review-fill .cb-date-kr {
    width: 100%;
    max-width: min(320px, 100%);
}

.cb-review-fill .cb-phone-row,
.cb-review-fill .cb-post-row {
    max-width: min(320px, 100%);
}
/* 요약의 좁은 칸은 좌우 20px 여백을 두면 네 자리가 잘린다. */
.cb-review-fill .cb-phone-row .inp-txt {
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.cb-review-fill .cb-phone-row .select {
    padding-left: 10px;
    padding-right: 22px;
}
.cb-review-fill .cb-post-row .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0 20px;
}
.cb-review-fill .cb-post-row .cb-post-input {
    flex: 1 1 auto;
}
.cb-review-period {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.cb-review-period > label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cb-review-period > label > span {
    flex-shrink: 0;
    width: 48px;
    font-size: 13px;
    color: #666;
}
/* 세로로 쌓지 않고 한 줄에 흐르다 폭이 모자라면 접힌다. */
.cb-review-address {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.cb-review-address > .inp-txt {
    width: auto;
    min-width: 0;
    max-width: none;
}
/* 우편번호 · 기본주소 · 상세주소 = 0.5 : 2.5 : 2.5. 우편번호에서 줄인 몫이 상세주소로 간다.
   각 칸이 제 클래스를 들어 규칙 순서에 기대지 않는다. */
.cb-review-address > .inp-txt {
    flex: 2.5 1 0;
}
.cb-review-address > .cb-review-postcode {
    flex: 0.5 1 0;
    text-align: center;
}
.cb-review-address > .cb-review-address1 {
    flex: 2.5 1 0;
}
@media only screen and (max-width: 768px) {
    .cb-review-address > .inp-txt { flex: 1 1 100%; }
    .cb-review-address > .cb-review-postcode { flex: 0 0 120px; }
}
.cb-review-address .cb-hint {
    margin: 0;
}
/* 눈에서만 감춘다 — display:none 은 탭 순서에서 빠져 키보드로 못 고른다. */
.cb-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 첨부가 빠진 자리 — 빨간 점선 안을 눌러 바로 고른다. */
.cb-review-file-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 12px;
    background: #fff;
    border: 1px dashed #ed1c24;
    border-radius: 8px;
    color: #ed1c24;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.cb-review-file-pick:hover,
.cb-review-file-pick:focus-within {
    background: #fff5f5;
    outline: 2px solid #ed1c24;
    outline-offset: 2px;
}
.cb-review-no-file .cb-review-file-pick {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
}
.cb-review-files-col .cb-review-file-pick {
    width: 120px;
}

@media only screen and (max-width: 768px) {
    .cb-review-fill .inp-txt,
    .cb-review-fill .select,
    .cb-review-fill .cb-phone-row,
    .cb-review-fill .cb-post-row { max-width: 100%; }
    .cb-review-files-col .cb-review-file-pick { width: 100px; }
}

/* 스티커 이미지 카드 선택 */
.cb-sticker-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}
.cb-sticker-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 28px 10px 10px;
    border: 2px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.cb-sticker-card:hover {
    border-color: #004687;
}
.cb-sticker-card.selected {
    border-color: #004687;
    box-shadow: 0 0 0 1px #004687;
    background: #f0f6ff;
}
.cb-sticker-card img {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    display: block;
    object-fit: contain;
    background: #fff;
}
.cb-sticker-card-info {
    min-width: 0;
    text-align: left;
    word-break: keep-all;
}
.cb-sticker-card-info h5 {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    margin: 0 0 2px;
}
.cb-sticker-card-info span {
    display: block;
    font-size: 12px;
    color: #888;
}
.cb-sticker-card-info .cb-sticker-card-size {
    margin-top: 4px;
    color: #004687;
    font-weight: 600;
}

@media only screen and (max-width: 768px) {
    .cb-sticker-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 제조사 카드 선택 */
.cb-brand-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.cb-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 2px solid #eee;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 80px;
}
.cb-brand-card:hover {
    border-color: #004687;
}
.cb-brand-card.selected {
    border-color: #004687;
    box-shadow: 0 0 0 1px #004687;
    background: #f0f6ff;
}
.cb-brand-card img {
    width: 60px;
    height: 30px;
    object-fit: contain;
}
.cb-brand-card span {
    font-size: 12px;
    color: #444;
    font-weight: 500;
}

/* 날짜 표시 (한국어) */
.cb-date-kr {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0 12px;
    height: 50px;
}
.cb-date-hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.cb-date-kr-text {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cb-date-kr-text.is-empty {
    color: #999;
}
.cb-date-kr-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #004687;
    background: #f0f6ff;
    border: 1px solid #004687;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
/* 아직 고른 값이 없으면 눈에 띌 이유가 없다. */
.cb-date-kr-btn.is-empty { color: #888; background: #fff; border-color: #bbb; }
.cb-date-kr-btn.is-empty:hover { color: #004687; border-color: #004687; background: #f0f6ff; }
.cb-date-kr-btn:hover {
    background: #004687;
    color: #fff;
}
.cb-date-kr { position: relative; }
.cb-date-pop {
    position: fixed;
    z-index: 1200;
    width: 268px;
    padding: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cb-date-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cb-date-pop-head strong { font-size: 14px; color: #222; }
.cb-date-pop-head button {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    color: #004687;
}
.cb-date-pop-week,
.cb-date-pop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.cb-date-pop-week span {
    padding: 6px 0;
    font-size: 12px;
    color: #666;
}
.cb-date-pop-week span:first-child { color: #e30028; }
.cb-date-pop-grid button,
.cb-date-pop-grid span {
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: #222;
}
.cb-date-pop-grid button { cursor: pointer; border-radius: 50%; }
.cb-date-pop-grid button:hover { background: #f0f6ff; }
.cb-date-pop-grid button.today { font-weight: 700; color: #004687; }
.cb-date-pop-grid button.sel { background: #004687; color: #fff; }
.cb-date-pop-grid button.sel.today { color: #fff; }


/* 선택한 스티커 사이즈 상세 */
/* 확인 칸 안에서는 칸 안에 칸이 겹치므로 껍데기를 벗긴다. */
.cb-review-block .cb-sticker-spec {
    border: 0;
    padding: 0;
    margin-bottom: 0;
}
.cb-sticker-spec {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 30px;
}
.cb-sticker-spec-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 12px;
}
.cb-sticker-spec h4 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin: 0;
}
.cb-sticker-spec-head .cb-hint {
    margin: 0;
}
/* 스티커 구성 가로 그리드 — 낱장 그림이라 칸을 본문 폭까지 늘리지 않는다. */
.cb-spec-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}
.cb-spec-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    cursor: pointer;
}
.cb-spec-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #eee;
    cursor: pointer;
    transition: transform 0.2s;
}
.cb-spec-item img:hover {
    transform: scale(1.05);
}
.cb-spec-item strong {
    font-size: 13px;
    color: #222;
}
.cb-spec-item span {
    font-size: 12px;
    color: #888;
}
.cb-spec-size {
    font-size: 11px !important;
    color: #004687 !important;
    font-weight: 500;
}
@media only screen and (max-width: 768px) {
    .cb-spec-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 스티커 상세 모달 */
.cb-info-link {
    font-size: 13px;
    color: #004687;
    cursor: pointer;
    font-weight: 400;
    margin-left: 8px;
    display: inline-block;
    white-space: nowrap;
}
.cb-info-link:hover { text-decoration: underline; }
.cb-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cb-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 700px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.cb-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}
.cb-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}
.cb-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.cb-modal-close:hover { color: #333; }
.cb-modal-body {
    padding: 24px;
}
.cb-modal-body h4 {
    font-size: 17px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}
.cb-sticker-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.cb-sticker-table th {
    background: #f4f4f4;
    padding: 10px 8px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid #ddd;
    text-align: center;
    white-space: nowrap;
}
.cb-sticker-table th:nth-child(1) { width: 72px; }
.cb-sticker-table th:nth-child(2) { width: auto; white-space: normal; }
.cb-sticker-table th:nth-child(3),
.cb-sticker-table th:nth-child(4) { width: 110px; }
.cb-sticker-table td {
    padding: 10px 8px;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
}
/* rowspan 행에서는 nth-child가 어긋나므로 클래스로 정렬 */
.cb-sticker-table td.cb-sticker-model {
    text-align: left;
    font-size: 13px;
    vertical-align: middle;
}
.cb-sticker-table td.cb-sticker-size {
    text-align: center;
    vertical-align: middle;
}
.cb-sticker-size-modal { max-width: 720px; }
.cb-sticker-size-modal .cb-modal-body { overflow-x: hidden; }
.cb-sticker-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cb-brand-cell {
    font-weight: 600;
    background: #fafafa;
    text-align: center;
    vertical-align: middle;
}
.cb-sticker-detail {
    display: flex;
    gap: 24px;
}
.cb-sticker-detail > div { flex: 1; }
.cb-sticker-detail h5 {
    font-size: 15px;
    font-weight: 600;
    color: #004687;
    margin-bottom: 8px;
}
.cb-sticker-detail ul {
    list-style: none;
    padding: 0;
}
.cb-sticker-detail li {
    font-size: 13px;
    color: #444;
    padding: 4px 0;
    padding-left: 14px;
    position: relative;
}
.cb-sticker-detail li::before {
    content: "·";
    position: absolute;
    left: 0;
    font-weight: bold;
}

@media only screen and (max-width: 768px) {
    .cb-sticker-detail { flex-direction: column; }
    .cb-modal { max-height: 90vh; }
}
.cb-review-table {
    width: 100%;
    border-collapse: collapse;
    /* auto 면 셀 폭을 인풋의 고유 폭이 정해 표가 박스 밖으로 밀린다. */
    table-layout: fixed;
}
.cb-review-table td {
    padding: 8px 0;
    font-size: 15px;
    border-bottom: 1px solid #f4f4f4;
}
.cb-review-table td:first-child {
    color: #888;
    width: 88px;
    white-space: nowrap;
    /* 값이 여러 줄이면 라벨은 첫 줄에 맞춘다 — 가운데 뜨면 어디에 붙는지 안 보인다. */
    vertical-align: top;
    padding-top: 18px;
}
.cb-review-table td:last-child {
    color: #222;
}
/* 값이 입력 칸이면 라벨을 그 칸 가운데에 맞춘다 — td 8px + 값 여백 6px + (인풋 50px - 줄 20px) / 2. */
.cb-review-editable td:first-child {
    padding-top: 29px;
}
.cb-review-files {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* 구매 형태 카드 (축소) */
.cb-card-select-sm {
    margin-bottom: 24px;
}
.cb-card-select-sm .cb-card {
    padding: 16px 20px;
}
.cb-card-select-sm .cb-card h4 {
    font-size: 16px;
    margin-bottom: 4px;
}
.cb-card-select-sm .cb-card p {
    font-size: 13px;
    margin-bottom: 0;
}

/* 넓은 섹션 (2컬럼용) */
.cb-section-wide {
    max-width: 960px;
}

/* 2컬럼: 등록증 미리보기 + 차량 정보 */
.cb-doc-split {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.cb-doc-left {
    flex: 1;
    min-width: 0;
}
.cb-doc-right {
    flex: 1;
    min-width: 0;
}
.cb-doc-left .cb-upload-box {
    margin-bottom: 0;
}
.cb-upload-preview-full {
    text-align: center;
}
.cb-upload-preview-full .cb-file-preview {
    max-width: 100%;
}
.cb-upload-preview-full .cb-file-preview img {
    max-height: 400px;
    object-fit: contain;
}

/* 추출 정보 영역 */
.cb-extracted-info {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
}
.cb-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #bbb;
    text-align: center;
    font-size: 15px;
    line-height: 1.6;
}
.cb-auto-tag {
    display: inline-block;
    background: #30d158;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 500;
    vertical-align: middle;
}

/* 추가 서류 그리드 */
.cb-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.cb-doc-grid .cb-upload-box {
    margin-bottom: 0;
}

/* 구매/리스 추가 정보 */
.cb-extra-vehicle-info .cb-form-row {
    display: flex;
    gap: 16px;
}
.cb-extra-vehicle-info .cb-form-row .cb-form-group {
    flex: 1;
}

/* 구매/리스 추가 정보 행 */
.cb-extra-row {
    margin-top: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
}
.cb-extra-row .cb-sub-title {
    margin-bottom: 16px;
}
.cb-extra-row .cb-form-row {
    display: flex;
    gap: 16px;
}
.cb-extra-row .cb-form-row .cb-form-group {
    flex: 1;
}

/* 등록증 읽기 버튼 */
.cb-ocr-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    color: #004687;
    background: #f0f6ff;
    border: 1px dashed #004687;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.cb-ocr-btn:hover {
    background: #e0edff;
}
.cb-ocr-btn:disabled {
    color: #888;
    border-color: #ccc;
    background: #f8f8f8;
    cursor: not-allowed;
}
.cb-ocr-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top-color: #004687;
    border-radius: 50%;
    animation: cb-spin 0.8s linear infinite;
}
@keyframes cb-spin {
    to { transform: rotate(360deg); }
}

.cb-reading-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
    font-weight: 400;
    margin-left: 8px;
    vertical-align: middle;
}

/* OCR 뱃지 */
.cb-ocr-badge {
    background: #e8f5e9;
    color: #2e7d32;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}
/* OCR 읽기 완료 — 필드 깜빡임 */
.cb-ocr-field .inp-txt,
.cb-ocr-field .select {
    animation: cb-flash 1.5s ease;
}
@keyframes cb-flash {
    0% { background: #fff; }
    30% { background: #e8f5e9; }
    100% { background: #fff; }
}

/* OCR 로딩 중 — 차량기본정보 카드 */
.cb-extracted-info.cb-loading {
    box-shadow: 0 0 0 1px rgba(0,70,135,0.15), 0 4px 20px rgba(0,70,135,0.08);
    animation: cb-loading-pulse 1.8s ease-in-out infinite;
    pointer-events: none;
    position: relative;
}
.cb-extracted-info.cb-loading::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 12px;
    background: rgba(0,70,135,0.04);
    z-index: 1;
}
.cb-extracted-info.cb-loading::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 12px;
    background: linear-gradient(
        110deg,
        rgba(255,255,255,0) 25%,
        rgba(0,70,135,0.07) 50%,
        rgba(255,255,255,0) 75%
    );
    background-size: 200% 100%;
    animation: cb-shimmer 1.5s ease-in-out infinite;
    z-index: 2;
}
@keyframes cb-loading-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,70,135,0.15), 0 4px 20px rgba(0,70,135,0.08); }
    50% { box-shadow: 0 0 0 2px rgba(0,70,135,0.25), 0 6px 28px rgba(0,70,135,0.12); }
}
@keyframes cb-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 네비게이션 */
.cb-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.cb-nav button {
    cursor: pointer;
}
.cb-nav .btn.btn-blue:disabled,
.cb-nav .btn.btn-blue:disabled:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #888;
    cursor: not-allowed;
}
.cb-nav .btn.btn-blue.btn-full:disabled,
.cb-nav .btn.btn-blue.btn-full:disabled:hover {
    background-color: #bbb;
    border-color: #bbb;
    color: #fff;
}

/* 토스트 */
.cb-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,70,135,0.92);
    color: #fff;
    padding: 30px 48px;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
    z-index: 3000;
    animation: cb-toast-in 0.3s ease, cb-toast-out 0.3s ease 2.2s;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    text-align: left;
    max-width: 400px;
}
@keyframes cb-toast-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes cb-toast-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 모바일 반응형 */
@media only screen and (max-width: 768px) {
    .cb-steps { gap: 4px; padding: 12px 0; }
    .cb-step { min-width: 50px; }
    .cb-step-num { width: 30px; height: 30px; font-size: 14px; }
    .cb-step-label { font-size: 11px; }
    .cb-section-header h3 { font-size: 22px; }
    .cb-card-select { flex-direction: column; }
    .cb-form-row { flex-direction: column; }
    .cb-phone-row { flex-wrap: wrap; }
    .cb-upload-result { flex-direction: column; }
    .cb-review-files { flex-direction: column; }
    .cb-doc-split { flex-direction: column; }
    .cb-doc-grid { grid-template-columns: 1fr; }
    .cb-extra-row .cb-form-row { flex-direction: column; }
}

/* ===== 카프로그램 신청 조회 · 파일 재제출 ===== */

.cbs-loading {
    padding: 60px 0;
    text-align: center;
    font-size: 15px;
    color: #888;
}
.cbs-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 진행 단계 */
.cbs-steps {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 20px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
}
.cbs-step {
    flex: 1;
    min-width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.cbs-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ddd;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
}
.cbs-step-label {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}
.cbs-step.done .cbs-step-num { background: #30d158; color: #fff; }
.cbs-step.active .cbs-step-num { background: #004687; color: #fff; }
.cbs-step.halted .cbs-step-num { background: #888; color: #fff; }
.cbs-step.active .cbs-step-label { color: #004687; font-weight: 600; }

/* 카드 */
.cbs-card {
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 16px;
}
.cbs-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cbs-card-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.cbs-phase {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}
.cbs-count {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #888;
}
.cbs-summary-sub {
    margin: 12px 0 0;
    font-size: 14px;
    color: #666;
}
.cbs-dot { color: #bbb; margin: 0 6px; }
.cbs-locked { opacity: 0.86; }
.cbs-lock-note {
    margin: 10px 0 0;
    font-size: 13px;
    color: #888;
}
.cbs-lead {
    margin: 14px 0 20px;
    font-size: 14px;
    color: #888;
    line-height: 1.7;
}

/* 지금 할 일 */
.cbs-todo {
    border: 1px solid #ddd;
    border-left-width: 4px;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 16px;
}
.cbs-todo-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.cbs-todo-body {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}
.cbs-todo-act { margin-top: 20px; }


/* 제출한 신청 내용 */
.cbs-summary-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cbs-summary-row .cbs-summary-sub { flex: 1; }
.cbs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.cbs-modal {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 680px;
    max-height: 80vh;
    overflow: auto;
}
.cbs-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
}
.cbs-modal-head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #222;
}
.cbs-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}
.cbs-modal-body { padding: 20px 24px 28px; }
.cbs-review-block {
    border-top: 1px solid #eee;
    margin-top: 20px;
    padding-top: 18px;
}
.cbs-review-block:first-of-type {
    border-top: none;
    margin-top: 8px;
    padding-top: 0;
}
.cbs-review-block h4 {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: #444;
}
.cbs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cbs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    color: #222;
}
.cbs-table td:first-child {
    width: 170px;
    color: #888;
}

/* 처리 이력 */
.cbs-hist {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.cbs-hist li {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}
.cbs-hist li:last-child { border-bottom: none; }
.cbs-hist-at {
    flex: none;
    width: 150px;
    color: #999;
}

/* 재제출 업로드 */
.cbs-back { margin-bottom: 14px; }
.cbs-zone-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.cbs-zone {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 16px 18px;
}
.cbs-zone-head h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #222;
}
.cbs-zone-head p {
    margin: 6px 0 0;
    font-size: 13px;
    color: #888;
}
.cbs-zone-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    padding: 22px 10px;
    border: 2px dashed #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s;
}
.cbs-zone-drop:hover { border-color: #004687; }
.cbs-zone-plus { font-size: 24px; color: #bbb; }
.cbs-zone-label { font-size: 14px; color: #666; }
.cbs-zone-accept { font-size: 12px; color: #aaa; }
.cbs-zone-picked {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #f7f7f7;
    border-radius: 12px;
}
.cbs-zone-name {
    flex: 1;
    font-size: 13px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cbs-guide {
    margin: 20px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: #999;
    line-height: 1.9;
}
.cbs-submit-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.cbs-submit-note { font-size: 13px; color: #888; }
.cbs-submit-bar .btn { margin-left: auto; }
.cbs-submit-bar .btn[disabled] { opacity: 0.5; pointer-events: none; }

.cbs-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #222;
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 300;
}

@media only screen and (max-width: 768px) {
    .cbs-card, .cbs-todo { padding: 18px 18px; }
    .cbs-card-head { flex-wrap: wrap; }
    .cbs-phase, .cbs-count { margin-left: 0; }
    .cbs-zone-grid { grid-template-columns: 1fr; }
    .cbs-summary-row { flex-wrap: wrap; }
    .cbs-summary-row .btn { width: 100%; }
    .cbs-modal { width: 94%; }
    .cbs-table td:first-child { width: 110px; }
    .cbs-hist li { flex-direction: column; gap: 2px; }
    .cbs-hist-at { width: auto; }
    .cbs-submit-bar { flex-direction: column; align-items: stretch; }
    .cbs-submit-bar .btn { margin-left: 0; width: 100%; }
    .cbs-todo-act .btn { width: 100%; }
}

/* ===== 주문내역 행 클릭 ===== */
.list_table.order tr.static:hover {
    background-color: #f5f5f5;
    transition: background-color 0.15s;
}

/* ===== 챗봇 버튼 (카카오 채널) ===== */
.chatbot {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 90;
}
/* 챗봇 닫기(X) — 원본 base.css 정본 (작은 회색 라운드 사각) */
.chatbot .chatbot_close {
    position: absolute;
    top: -12px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    background-color: #adadad;
    z-index: 5;
    cursor: pointer;
}
.chatbot .chatbot_close::before,
.chatbot .chatbot_close::after {
    position: absolute;
    left: 4px;
    top: 7px;
    width: 8px;
    height: 2px;
    background-color: #FFF;
    content: "";
    border-radius: 2px;
}
.chatbot .chatbot_close::before {
    transform: rotate(-45deg);
}
.chatbot .chatbot_close::after {
    transform: rotate(45deg);
}
.chatbot .chatbot_btn {
    display: block;
    width: 55px;
    height: 55px;
    background-image: url(https://www.pmi-korea.com/resources/image/common/img_chatbot_icon.png);
    background-size: 55px 110px;
    background-position: 0 0;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.chatbot .chatbot_btn:hover {
    background-position: 0 -55px;
    transform: scale(1.05);
}
/* 사이드메뉴(gnb_total) 열릴 때 챗봇 가리기 */
body:has(.gnb_header .gnb_total.active) .chatbot { opacity: 0 !important; visibility: hidden !important; }

/* ==========================================================================
   반응형 CSS — 헤더 / 푸터 / 카보너스 소개 / 카보너스 위저드
   디자인 변경 없이 유동 레이아웃만 적용
   ========================================================================== */

/* ---------- 공통: min-width 제거 (모든 뷰포트에서 유동) ---------- */
.gnb_header { min-width: 0; }
/* 데스크탑은 padding 0 (로고=컨텐츠 좌측 정렬). 모바일 여백은 아래 미디어쿼리에서 */
.gnb_header .gnb_box { min-width: 0; }
@media only screen and (max-width: 1280px) {
  .gnb_header .gnb_box { padding: 0 20px; }
  .gnb_header .gnb_box .logo { left: 20px; }
}
.main_menu { min-width: 0; }
.main_menu>li>div>ul { min-width: 0; }
.gnb_header .gnb_search .close_box { min-width: 0; }
.gnb_header .gnb_total .close_box { min-width: 0; }
.gnb_header .gnb_total .total_menu { min-width: 0; width: 90%; }
.footer { min-width: 0; }
.footer .footer_con { min-width: 0; }
.sub_content { min-width: 0; }

/* ---------- 태블릿 (≤1200px) ---------- */
@media only screen and (max-width: 1200px) {
    /* 헤더 */
    .main_menu { padding-left: 120px; }
    .main_menu>li>a { padding: 0 14px; font-size: 16px; }

    /* 카보너스 소개 — 1600px 고정폭 해제 */
    .car_bonus_info .con01,
    .car_bonus_info .con03,
    .car_bonus_info .con05,
    .car_bonus_info .con06 {
        width: 100%;
        max-width: 1200px;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .car_bonus_info .con02>div,
    .car_bonus_info .con04>div {
        width: 100%;
        max-width: 1200px;
        padding-left: 30px;
        padding-right: 30px;
        box-sizing: border-box;
    }
    .car_bonus_info .con01 { padding-top: 100px; min-height: 400px; }
    .car_bonus_info .con01 h2 { font-size: 60px; line-height: 65px; }
    .car_bonus_info .con01 h3 { font-size: 28px; line-height: 40px; }
    .car_bonus_info .con01 img { max-width: 40%; height: auto; }

    .car_bonus_info .con03 li div .list_table_type01 { width: 100%; }

    /* 푸터 */
    .footer { padding: 80px 0; }
}

/* ---------- 태블릿-소 (≤960px) ---------- */
@media only screen and (max-width: 960px) {
    /* 헤더 — 메뉴 간격 더 축소 */
    .gnb_header .gnb_box { height: 100px; }
    .main_menu { margin-top: -100px; padding-left: 90px; }
    .main_menu>li>a { padding: 0 10px; font-size: 15px; line-height: 100px; }
    .main_menu>li>a:before { bottom: 30px; }
    .main_menu>li>div { top: 100px; }
    .gnb_header .gnb_box .logo { left: 20px; top: 15px; width: 65px; height: 65px; background-size: 65px; }
    .gnb_header .gnb_box .gnb_menu { top: 30px; }
    .gnb_header .gnb_box .gnb_menu a.promotion_btn,
    .gnb_header .gnb_box .gnb_menu a.logout_btn { font-size: 13px; padding: 0 12px; height: 34px; line-height: 34px; }

    /* 카보너스 소개 */
    .car_bonus_info .con01 { padding-top: 60px; min-height: auto; margin-bottom: 60px; }
    .car_bonus_info .con01 h2 { font-size: 42px; line-height: 48px; margin-bottom: 30px; }
    .car_bonus_info .con01 h3 { font-size: 22px; line-height: 34px; }
    .car_bonus_info .con01 img { position: static; max-width: 60%; display: block; margin: 30px auto 0; }

    .car_bonus_info .con02, .car_bonus_info .con04 { padding-top: 60px; margin-bottom: 60px; }
    .car_bonus_info .con02 li, .car_bonus_info .con04 li { padding-left: 0; padding-top: 60px; margin-bottom: 40px; }
    .car_bonus_info .con02 li h3, .car_bonus_info .con04 li h3 { position: relative; width: 100%; margin-bottom: 16px; }
    .car_bonus_info .con03, .car_bonus_info .con05, .car_bonus_info .con06 { margin-bottom: 60px; }

    .car_bonus_info .con03 li { padding-left: 0; padding-bottom: 60px; padding-top: 60px; }
    .car_bonus_info .con03 li h3 { position: relative; width: 100%; height: auto; margin-bottom: 16px; padding: 10px 20px; }
    .car_bonus_info .con03 li h4 { position: relative; left: auto; bottom: auto; margin-top: 16px; display: inline-block; }
    .car_bonus_info .con03 li::before { left: 50%; transform: translateX(-50%) rotate(90deg); bottom: 10px; }

    .car_bonus_info .con06 ul { flex-direction: column; gap: 20px; }
    .car_bonus_info .con06 ul li { width: 100%; }

    .car_bonus_info h2 { font-size: 30px; line-height: 40px; margin-bottom: 24px; }
    .car_bonus_info p.bl_text { font-size: 16px; line-height: 26px; }
    .car_bonus_info span.alert_text { font-size: 16px; line-height: 26px; }

    /* 푸터 — 1컬럼 스택 */
    .footer_top { width: 100%; margin-bottom: 40px; }
    .footer_menu { width: 100%; text-align: left; }

    /* 카보너스 위저드 — 중간 breakpoint */
    .cb-brand-cards { grid-template-columns: repeat(2, 1fr); }
    .cb-review-split { flex-direction: column; }
    .cb-review-row { flex-direction: column; }
    .cb-toast { padding: 24px 40px; font-size: 20px; }
}

/* ---------- 모바일 (≤768px) ---------- */
@media only screen and (max-width: 768px) {
    /* 헤더 — 메인메뉴 숨기고 햄버거(≡)로 대체 */
    .gnb_header .gnb_box { height: 60px; padding: 0 15px; }
    .gnb_header .gnb_box .logo { left: 15px; top: 10px; width: 40px; height: 40px; background-size: 40px; }

    /* 메인메뉴 완전 숨김 */
    .main_menu { display: none !important; }

    /* gnb_menu: float 레이아웃 → flex로 전환, 전체 폭 커버 */
    .gnb_header .gnb_box .gnb_menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 15px 0 65px; /* 왼쪽은 로고 공간 확보 */
    }
    .gnb_header .gnb_box .gnb_menu>a {
        float: none;
        width: 36px;
        height: 36px;
        margin-left: 4px;
        padding-top: 3px;
    }
    .ico-gnb { width: 30px; height: 30px; background-size: 120px 120px; }

    /* 원본 모바일 기준: gnb_menu는 아이콘만 (global/cart/search/전체메뉴). 텍스트(고객서비스/회원가입/로그인/로그아웃)는 사이드메뉴로 */
    .gnb_header .gnb_box .gnb_menu a.promotion_btn,
    .gnb_header .gnb_box .gnb_menu a.join_btn,
    .gnb_header .gnb_box .gnb_menu a.login_btn,
    .gnb_header .gnb_box .gnb_menu a.logout_btn,
    .gnb_header .gnb_box .gnb_menu a.cs_btn { display: none; }

    /* 전체메뉴(≡) 버튼 — 우측 유지 */

    /* 검색/전체메뉴 팝업 */
    .gnb_header .gnb_search .close_box { max-width: none; padding: 0 15px; }
    .gnb_header .gnb_search .close_box .close_btn { top: 16px; right: 15px; width: 32px; height: 32px; background-size: 32px; }
    .gnb_header .gnb_search .search_box { width: calc(100% - 40px); }
    .gnb_header .gnb_search .search_box input { font-size: 18px; height: 50px; margin-bottom: 40px; }
    .gnb_header .gnb_total { overflow-y: auto; }
    .gnb_header .gnb_total .close_box { max-width: none; padding: 0 15px; }
    .gnb_header .gnb_total .close_box .close_btn { top: 16px; right: 15px; width: 32px; height: 32px; background-size: 32px; }
    .gnb_header .gnb_total .close_box:before { width: 40px; height: 40px; background-size: 40px; top: 14px; }
    .gnb_header .gnb_total .total_menu {
        position: relative;
        left: auto; top: auto;
        transform: none;
        width: 100%;
        padding: 80px 20px 40px;
        box-sizing: border-box;
    }
    .gnb_header .gnb_total .total_menu>li {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 24px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 24px;
    }
    .gnb_header .gnb_total .total_menu>li:last-child { border-bottom: none; }
    .gnb_header .gnb_total .total_menu>li>a {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 12px;
    }
    .gnb_header .gnb_total .total_menu>li>div>ul {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .gnb_header .gnb_total .total_menu>li>div>ul>li {
        float: none;
        padding-right: 0;
        padding-bottom: 8px;
    }
    .gnb_header .gnb_total .total_menu>li>div>ul>li>h3 {
        font-size: 14px;
        line-height: 24px;
        color: #1f93ff;
        margin-bottom: 4px;
        margin-top: 8px;
    }
    .gnb_header .gnb_total .total_menu>li>div>ul>li>a {
        font-size: 13px;
        line-height: 28px;
        display: block;
    }
    .gnb_header .gnb_total .total_menu>li>div>ul>li>a.btn {
        display: inline-block;
        margin-top: 8px;
    }

    /* 서브 콘텐츠 레이아웃 — 헤더 60px + 여백 */
    .sub_content { padding-top: 30px; }
    .sub_content .sub_title { width: 100%; min-height: auto; padding: 20px 15px 0; margin-bottom: 40px; }
    .sub_content .sub_title h2 { font-size: 32px; line-height: 38px; margin-bottom: 20px; }
    .sub_content .sub_title p { font-size: 15px; line-height: 24px; }
    .sub_content .sub_title .title_img { display: none; }
    .sub_content .sub_title.center { min-height: auto; padding-right: 15px; }
    .sub_content .content_box { width: 100%; padding: 0 15px; box-sizing: border-box; }

    /* 푸터 */
    .footer { padding: 50px 0; }
    .footer .footer_con { padding: 0 20px; }
    .footer .footer_con>a.top_btn { top: auto; bottom: 0; right: 10px; }
    .footer_top { width: 100%; margin-bottom: 30px; }
    .footer_top h2 { font-size: 22px; margin-bottom: 14px; }
    .footer_top p { font-size: 14px; line-height: 24px; }
    .footer_menu { width: 100%; text-align: left; }
    .footer_menu li h3 { font-size: 16px; margin-bottom: 10px; }
    .footer_menu li a { font-size: 14px; line-height: 26px; margin-right: 12px; }

    /* 카보너스 소개 */
    .car_bonus_info .con01,
    .car_bonus_info .con03,
    .car_bonus_info .con05,
    .car_bonus_info .con06 { padding-left: 15px; padding-right: 15px; }
    .car_bonus_info .con02>div,
    .car_bonus_info .con04>div { padding-left: 15px; padding-right: 15px; }

    .car_bonus_info .con01 { padding-top: 30px; margin-bottom: 40px; }
    .car_bonus_info .con01 h2 { font-size: 30px; line-height: 36px; margin-bottom: 20px; }
    .car_bonus_info .con01 h3 { font-size: 18px; line-height: 28px; }
    .car_bonus_info .con01 img { max-width: 80%; }

    .car_bonus_info .con02, .car_bonus_info .con04 { padding-top: 40px; margin-bottom: 40px; }
    .car_bonus_info .con02 li h3, .car_bonus_info .con04 li h3 { font-size: 16px; padding: 8px 0; }
    .car_bonus_info .con03 li { padding-bottom: 40px; padding-top: 50px; }
    .car_bonus_info .con03 li h3 { font-size: 16px; padding: 8px 16px; }
    .car_bonus_info .con03 li h4 { font-size: 14px; padding: 8px 14px 8px 40px; background-position: 14px center; background-size: 16px; }
    .car_bonus_info .con03 li::before { width: 50px; height: 30px; background-size: 50px; }
    .car_bonus_info .con03 li div span.font_blue { font-size: 15px; line-height: 24px; }

    .car_bonus_info .con06 ul li { padding: 24px; }
    .car_bonus_info .con06 ul li h3 { font-size: 26px; line-height: 34px; margin-bottom: 20px; }
    .car_bonus_info .con06 ul li div h4 { font-size: 16px; width: auto; padding: 6px 14px; }

    .car_bonus_info h2 { font-size: 24px; line-height: 32px; margin-bottom: 20px; }
    .car_bonus_info p.bl_text { font-size: 14px; line-height: 22px; margin-bottom: 16px; padding-left: 14px; }
    .car_bonus_info span.alert_text { font-size: 14px; line-height: 22px; }
    .car_bonus_info .info_check_box input[type="checkbox"].check_box + label { font-size: 15px; }

    /* 카보너스 신청폼 (front.css 원본) */
    .sub_content.car_bonus_write .content_box { width: auto; }
    .sub_content.car_bonus_write .car_input>ul { padding: 30px; }
    .car_input>ul>li>h2 { font-size: 18px; margin-bottom: 16px; }
    .car_input .car_info_box { padding: 20px; }
    .car_input .car_info_box p { font-size: 15px; }
    .car_input .car_info_box p span { position: static; display: block; font-size: 13px; margin-bottom: 4px; }
    .car_sticker { flex-direction: column; gap: 16px; }
    .car_sticker li { width: 100%; }

    /* 카보너스 위저드 — 추가 모바일 보강 */
    .cb-card-select-sm .cb-card { padding: 12px 16px; }
    .cb-card-select-sm .cb-card h4 { font-size: 14px; }
    .cb-card h4 { font-size: 21px; }
    .cb-card p { font-size: 15px; }
    .cb-card { padding: 20px 16px; }
    .cb-upload-drop { padding: 24px 12px; }
    .cb-upload-drop p { font-size: 13px; }
    .cb-brand-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cb-brand-card { padding: 8px 10px; min-width: 0; }
    .cb-brand-card img { width: 48px; height: 24px; }
    .cb-brand-card span { font-size: 11px; }
    .cb-date-kr { height: 44px; }
    .cb-date-kr-text { font-size: 14px; }
    .cb-sticker-spec { padding: 14px; }
    .cb-agreement { padding: 16px; font-size: 14px; }
    .cb-nav { flex-wrap: wrap; gap: 10px; }
    .cb-toast { padding: 20px 30px; font-size: 18px; border-radius: 12px; }
    .cb-modal { margin: 10px; }
    .cb-modal-header { padding: 16px 20px; }
    .cb-modal-header h3 { font-size: 17px; }
    .cb-modal-body { padding: 16px; }
    .carbonus-dialog { max-height: 90vh; }
    .carbonus-dialog header { padding: 16px 20px; }
    .carbonus-dialog header h3 { font-size: 17px; }
    .carbonus-dialog > div { padding: 16px; }
    .cb-review-block { padding: 14px; }
    .cb-review-block h4, .cb-notice-group h4 { font-size: 16px; }
    .cb-review-table td:first-child { width: 90px; font-size: 13px; white-space: nowrap; }
    .cb-review-table td:last-child { font-size: 14px; }

    /* 챗봇 */
    .chatbot { right: 15px; bottom: 15px; }
    .chatbot .chatbot_btn { width: 56px; height: 56px; background-size: 56px 112px; }

    /* linemap_menu */
    .linemap_menu ul { flex-wrap: wrap; gap: 4px; }
    .linemap_menu li { min-width: 0; flex: 1; }
    .linemap_menu li>a { font-size: 13px; padding-left: 12px; padding-right: 12px; }
}

/* ---------- 모바일-소 (≤480px) ---------- */
@media only screen and (max-width: 480px) {
    /* (이전 박혀있던 logout_btn/search_btn display:none 제거 — 모든 헤더 메뉴 유지) */

    .car_bonus_info .con01 h2 { font-size: 24px; line-height: 30px; }
    .car_bonus_info .con01 h3 { font-size: 16px; line-height: 24px; }

    .cb-steps { gap: 2px; padding: 8px 0; }
    .cb-step { min-width: 40px; }
    .cb-step-num { width: 26px; height: 26px; font-size: 12px; }
    .cb-step-label { font-size: 10px; }
    .cb-section-header h3 { font-size: 19px; }
    .cb-sticker-cards { grid-template-columns: 1fr; gap: 8px; }
    .cb-sticker-card { padding: 8px 36px 8px 12px; }
    .cb-sticker-card img { flex-basis: 70px; width: 70px; height: 70px; }
    .cb-doc-grid { grid-template-columns: 1fr; }

    .footer_top h2 { font-size: 18px; }
    .footer_top>div a img { height: 28px !important; }
}

/* ===== Fuel Voucher (주유 영수증 신청) ===== */
.fv-section { max-width: 960px; margin: 0 auto; padding: 16px 0 32px; }

/* 2단 레이아웃 (eligible 상태) */
.fv-twocol { display: grid; grid-template-columns: 340px 1fr; gap: 24px; max-width: 960px; margin: 0 auto; padding: 16px 0 32px; align-items: start; }
.fv-twocol-left { position: sticky; top: 20px; }
.fv-twocol-right { min-width: 0; }
.fv-section-header { margin-bottom: 24px; }
.fv-section-header h3 { font-size: 22px; font-weight: 600; color: #222; margin-bottom: 8px; }
.fv-desc { font-size: 14px; color: #888; line-height: 1.6; }
.fv-hint { font-size: 13px; color: #888; margin: 0 0 16px; line-height: 1.5; }
.fv-hint-box { background: #f5f5f7; border: 1px solid #e0e0e4; border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.fv-hint-box p { font-size: 13px; color: #555; margin: 0 0 6px; line-height: 1.55; }
.fv-hint-box p:last-child { margin-bottom: 0; }
.fv-hint-box strong { color: #333; font-weight: 700; }

/* 컨텐츠 최상단 상태 배너 (마감/지급/거절/D-N) */
.fv-deadline-banner-top { max-width: 960px; margin: 0 auto 20px; padding: 16px 20px; background: #e8f4ff; border: 1px solid #88b8e0; border-radius: 12px; display: flex; align-items: flex-start; gap: 14px; }
.fv-deadline-banner-top.fv-closed-bg { background: #f5f5f5; border-color: #ccc; }
.fv-deadline-banner-top.fv-paid-bg { background: #e8f7ec; border-color: #7cc592; }
.fv-deadline-banner-top.fv-rejected-bg { background: #fef0f0; border-color: #f0a0a0; }
.fv-deadline-banner-top .fv-bottom-text { padding-right: 80px; }  /* 우상단 공지 버튼 자리 확보 — 모바일은 600 미디어쿼리에서 0으로 풀림 */
.fv-deadline-banner-top .fv-bottom-text strong { display: block; font-size: 15px; color: #1d2c3f; margin-bottom: 3px; line-height: 1.4; }
.fv-deadline-banner-top .fv-bottom-text p { font-size: 13px; color: #5a6b80; line-height: 1.5; margin: 0; }
.fv-deadline-banner-top.fv-closed-bg .fv-bottom-text strong { color: #444; }
.fv-deadline-banner-top.fv-closed-bg .fv-bottom-text p { color: #777; }
.fv-deadline-banner-top.fv-paid-bg .fv-bottom-text strong { color: #1e6b30; }
.fv-deadline-banner-top.fv-paid-bg .fv-bottom-text p { color: #3a7d4a; }
.fv-deadline-banner-top.fv-rejected-bg .fv-bottom-text strong { color: #a32020; }
.fv-deadline-banner-top.fv-rejected-bg .fv-bottom-text p { color: #b04040; }
.fv-tag-paid { background: #2e8b57; color: #fff; }
.fv-tag-rejected { background: #c0392b; color: #fff; }

/* 공지 보기 버튼 (마감 배너 내) */
.fv-deadline-banner-top { position: relative; }
.fv-notice-btn { position: absolute; top: 12px; right: 14px; background: #fff; border: 1px solid #88b8e0; color: #004687; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 16px; cursor: pointer; line-height: 1; white-space: nowrap; }
.fv-notice-btn:hover { background: #f0f7ff; }
.cb-section-header .fv-notice-btn { top: 4px; right: 0; }
.fv-deadline-banner-top.fv-closed-bg .fv-notice-btn { border-color: #ccc; color: #555; }
.fv-deadline-banner-top.fv-paid-bg .fv-notice-btn { border-color: #7cc592; color: #1e6b30; }
.fv-deadline-banner-top.fv-rejected-bg .fv-notice-btn { border-color: #f0a0a0; color: #a32020; }

/* 공지 이미지 모달 — 적당한 크기 + 헤더 고정 + body 스크롤 */
.fv-notice-overlay { padding: 20px !important; align-items: center !important; }
.fv-notice-modal { width: 100%; max-width: 720px; max-height: 90vh; overflow: hidden; padding: 0; background: #fff; border-radius: 12px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
.fv-notice-header { flex-shrink: 0; background: #fff; border-bottom: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-radius: 12px 12px 0 0; }
.fv-notice-header h3 { font-size: 17px; font-weight: 600; color: #1d1d1f; margin: 0; }
.fv-notice-close { background: none; border: none; font-size: 30px; color: #999; cursor: pointer; line-height: 1; padding: 0 4px; }
.fv-notice-close:hover { color: #333; }
.fv-notice-body { flex: 1; overflow-y: auto; min-height: 0; }
.fv-notice-body img { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
    /* 화면을 꽉 채우면 뒤가 안 보여 대화상자로 안 읽힌다 — 사방을 남긴다. */
    .fv-notice-overlay { padding: 5vh 5vw !important; }
    .fv-notice-modal { width: 90vw; max-width: 90vw; height: 90vh; max-height: 90vh; border-radius: 12px; }
}

/* 통합 상태 카드 (좌측 컬럼용 — 컴팩트) */
.fv-status-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 16px; padding: 22px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.fv-status-card.fv-readonly { background: #f7f7f8; border-color: #ddd; }
.fv-status-top { text-align: center; padding: 4px 0 12px; }
.fv-status-label { font-size: 13px; color: #888; margin-bottom: 4px; }
.fv-status-amount { font-size: 34px; font-weight: 700; color: #004687; letter-spacing: -0.5px; line-height: 1.1; }
.fv-status-sub { font-size: 13px; color: #666; margin-top: 6px; }
.fv-status-cap { color: #ff6b00; font-weight: 600; }
.fv-status-divider { height: 1px; background: #eee; margin: 4px 0; }
.fv-status-mid { padding: 12px 2px; }

/* 자격 계산 분해 */
.fv-calc-row { display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 0; gap: 12px; }
.fv-calc-label { font-size: 14px; color: #444; font-weight: 600; }
.fv-calc-formula { font-size: 12px; color: #888; margin-top: 2px; }
.fv-calc-result { font-size: 15px; color: #222; font-weight: 700; flex-shrink: 0; }
.fv-calc-row.fv-calc-total .fv-calc-label { font-size: 15px; color: #222; }
.fv-calc-row.fv-calc-total .fv-calc-result { color: #004687; font-size: 18px; }
.fv-calc-note { font-size: 12px; color: #666; margin: 8px 0 0; line-height: 1.5; }

/* 지급 실패 예방 강조 안내 (마감 배너 안) */
.fv-deadline-banner-top .fv-bottom-text .fv-payment-warning { margin-top: 6px; color: #a32020; font-size: 13px; line-height: 1.5; }
.fv-deadline-banner-top .fv-bottom-text .fv-payment-warning strong { color: #a32020; display: inline; font-size: 13px; font-weight: 600; }

/* 마감 D-N 태그 */
.fv-deadline-tag { background: #004687; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; flex-shrink: 0; min-width: 56px; text-align: center; }
.fv-deadline-tag.fv-tag-closed { background: #888; }

/* 영수증 영역 헤더 — 한 줄 강제 (절대 줄바꿈 X) */
.fv-receipts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; flex-wrap: nowrap; }
.fv-receipts-head h3 { font-size: 20px; font-weight: 600; color: #222; white-space: nowrap; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fv-receipts-head .btn { width: auto; height: 38px; line-height: 36px; padding: 0 16px; font-size: 14px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; cursor: pointer; }
.fv-rcount { display: inline-flex; align-items: center; background: #004687; color: #fff; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 10px; line-height: 1.4; }

/* 버튼 cursor 보강 */
.btn { cursor: pointer; }
.btn:disabled, .btn.disabled { cursor: not-allowed; }
.cb-modal-close { cursor: pointer; }

/* 영수증 폼 */
.fv-form-group { margin-bottom: 14px; }
.fv-form-group label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
.fv-form-group .inp-txt { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
.fv-form-group .inp-txt:disabled,
.fv-form-group input[type="date"]:disabled,
.fv-form-group input[type="text"]:disabled { background: #f5f5f5 !important; color: #aaa !important; border-color: #e5e5e5 !important; cursor: not-allowed; -webkit-text-fill-color: #aaa; opacity: 1; }
.fv-date-input:not(:disabled) { cursor: pointer; }
.fv-date-input:not(:disabled)::-webkit-calendar-picker-indicator { cursor: pointer; }

.fv-not-eligible { background: #f5f5f7; border: 1px solid #d8d8dc; border-radius: 12px; padding: 28px 24px; text-align: center; }
.fv-not-eligible h4 { font-size: 18px; font-weight: 700; color: #333; margin-bottom: 8px; }
.fv-not-eligible p { font-size: 14px; color: #666; line-height: 1.6; }
.fv-not-eligible p strong { color: #003a6f; font-weight: 700; }

/* ───── 외주 본사 새 헤더 (base.css 신규 추가분, override) ───── */
.gnb_header .gnb_box .gnb_menu a.cs_btn,
.gnb_header .gnb_box .gnb_menu a.logout_btn {
  position: relative;
  width: auto;
  padding: 0 10px;
  height: 40px;
  font-size: 17px;
  text-align: center;
  line-height: 40px;
  color: #333;
  background: transparent;
  border: 0;
  margin-left: 10px;
}
.gnb_header .gnb_box .gnb_menu a.cs_btn::before {
  position: absolute;
  top: 12px;
  right: -5px;
  width: 1px;
  height: 16px;
  background-color: #999;
  content: "";
}
.gnb_header .gnb_box .gnb_menu a.cs_btn:hover,
.gnb_header .gnb_box .gnb_menu a.logout_btn:hover {
  color: #004687;
  background: transparent;
}

/* PROMOTION — 외주는 main_menu > li > a 위치 (검정 pill) */
.main_menu > li > a.promotion_btn {
  width: auto;
  padding: 0 20px;
  height: 40px;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  color: #FFF;
  background-color: #222;
  border-radius: 20px;
}
.main_menu > li > a.promotion_btn::before { display: none; }

/* FitLine AI 피부분석 — PROMOTION 과 같은 pill 이되 크림슨(FitLine 스킨 애널라이저 톤).
   데스크탑 main_menu·모바일 전체메뉴 어디서든 크림슨이 먹게 넓게. */
a.promotion_btn.fitline_btn {
  background: linear-gradient(135deg, #ec2b63 0%, #d50d4e 100%) !important;
  background-color: #d50d4e !important;
  box-shadow: 0 2px 8px rgba(213, 13, 78, 0.28);
}
/* PROMOTION 우측에 두되 간격 */
.main_menu > li > a.promotion_btn.fitline_btn {
  margin-left: 10px;
}

/* 전체메뉴(햄버거) — SHOP/ABOUT US 등 좌측 정렬 (외주 본사 패턴) */
.gnb_header .gnb_total .total_menu > li {
  width: 100%;
  float: left;
  margin-bottom: 40px;
}
.gnb_header .gnb_total .total_menu > li > a {
  display: block;
  width: 100%;
  text-align: left;
  padding-left: 0;
  font-size: 21px;
  line-height: 30px;
  margin-bottom: 20px;
  color: #1f93ff;
  font-weight: 300;
}
.gnb_header .gnb_total .total_menu > li > div > ul > li {
  float: left;
  padding-right: 40px;
}

/* 최소 너비 한계 — 320px (가장 작은 구형 기기까지 커버) */
html, body { min-width: 320px; }
.gnb_header, .gnb_header .gnb_box, .footer, .footer .footer_con { min-width: 0; }

/* ───── 헤더 반응형 ─────
   PC 큰 화면(>1440)은 본사 원본 그대로 (box-sizing / padding-right 등 일체 X).
   1440 이하부터 우리 룰 적용 — main_menu에 padding-right로 우측 gnb_menu 영역 보호. */
@media only screen and (max-width: 1440px) {
  .main_menu {
    box-sizing: border-box;
    white-space: nowrap;
    padding-right: 340px;
  }
}

@media only screen and (max-width: 1280px) {
  .main_menu { padding-left: 120px; padding-right: 300px; }
  .main_menu > li > a { padding: 0 12px; font-size: 17px; }
  .main_menu > li > a.promotion_btn { padding: 0 16px; font-size: 13px; }
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.logout_btn {
    font-size: 15px; padding: 0 7px;
  }
  .gnb_header .gnb_box .gnb_menu > a { margin-left: 6px; }
  /* hover 드롭다운도 축소 — 본사 min-width:1280px / h3:22 / a:18px 그대로면 좁아짐 */
  .main_menu > li > div > ul { min-width: 0; padding: 0 20px; }
  .main_menu > li > div > ul > li { padding: 10px 0 24px; }
  .main_menu > li > div > ul > li h3 { font-size: 18px; line-height: 32px; margin-bottom: 8px; }
  .main_menu > li > div > ul > li > a { font-size: 15px; line-height: 30px; }
  /* munu01(SHOP) 카테고리 원형 아이콘 줄임 */
  .main_menu > li.munu01 > div > ul > li a:before { width: 90px; height: 90px; background-size: 60px; }
  /* munu03(ACADEMY) 우측 이미지 영역 줄임 */
  .main_menu > li.munu03 > div > ul { padding-right: 480px; }
  .main_menu > li.munu03 > div > ul::before { width: 440px; }
}

@media only screen and (max-width: 1100px) {
  /* PROMOTION 유지하되 더 좁힘 */
  .main_menu { padding-left: 100px; padding-right: 260px; }
  .main_menu > li > a { padding: 0 9px; font-size: 15px; }
  .main_menu > li > a.promotion_btn { padding: 0 14px; font-size: 12px; }
  /* hover 드롭다운 추가 축소 */
  .main_menu > li > div > ul { padding: 0 16px; }
  .main_menu > li > div > ul > li { padding: 8px 0 20px; }
  .main_menu > li > div > ul > li h3 { font-size: 16px; line-height: 28px; margin-bottom: 6px; }
  .main_menu > li > div > ul > li > a { font-size: 14px; line-height: 26px; }
  .main_menu > li.munu01 > div > ul > li a:before { width: 70px; height: 70px; background-size: 46px; margin-bottom: 8px; }
  .main_menu > li.munu03 > div > ul { padding-right: 360px; }
  .main_menu > li.munu03 > div > ul::before { width: 320px; }
  /* MY BIZ (8개 컬럼) — 4열 wrap으로 두 줄 배치 (한 컬럼당 충분한 폭 확보) */
  .main_menu > li.munu04 > div > ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 24px;
  }
  .main_menu > li.munu04 > div > ul > li {
    flex: 0 0 calc(25% - 24px);
    max-width: calc(25% - 24px);
  }
}

@media only screen and (max-width: 768px) {
  /* 메인 메뉴 숨김(햄버거 전환) — 769~900은 좌측 메뉴바 유지(slon 요청) */
  .main_menu { display: none; }
}

/* 600px 미만 모바일 — cs/logout/4 아이콘 모두 한 줄 유지 (끝까지 모두 보이게) */
@media only screen and (max-width: 600px) {
  /* 헤더 자체 height 축소 (본사 140px → 70px) */
  .gnb_header,
  .gnb_header .gnb_box { height: 70px; }
  .gnb_header .gnb_box { padding: 0 10px; }
  .gnb_header .gnb_box .logo { width: 50px; height: 50px; background-size: 50px; top: 10px; left: 10px; }
  .gnb_header .gnb_box .gnb_menu {
    top: 15px; right: 10px;
    height: 40px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    overflow: visible;
  }
  .gnb_header .gnb_box .gnb_menu > a {
    float: none;
    width: 30px;
    height: 40px;
    margin-left: 4px;
    padding-top: 0;       /* flex 가운데 정렬 — 본사 padding-top 무력화 */
    line-height: 40px;
    flex-shrink: 0;
  }
  /* ico-gnb sprite 원본(30px) 유지 — background-position 안 깨짐 */
  /* 카트 count는 모바일에선 숨김 (위치 어색함 + 우선순위 낮음) */
  .gnb_header .gnb_box .gnb_menu a.cart_btn span { display: none; }
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.logout_btn {
    width: auto;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    padding: 0 4px;
  }
  .gnb_header .gnb_box .gnb_menu a.cs_btn::before { top: 13px; height: 14px; right: -3px; }
}

/* 480px 미만 — gnb_menu 모두 한 줄에 들어가게 더 좁힘 (cs/logout 끝까지 유지) */
@media only screen and (max-width: 480px) {
  .gnb_header .gnb_box .gnb_menu > a { margin-left: 2px; }
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.logout_btn {
    font-size: 11px; padding: 0 3px;
  }
  .gnb_header .gnb_box .gnb_menu a.cs_btn::before { right: -2px; }
}

/* 모바일 — fv-deadline-banner-top 카드 정렬: stack + 공지 버튼 안내문 아래로 */
@media only screen and (max-width: 600px) {
  .fv-deadline-banner-top {
    flex-direction: column;
    padding: 16px;
    gap: 10px;
  }
  .fv-deadline-banner-top .fv-notice-btn {
    position: static;
    align-self: flex-start;
    order: 99;            /* 카드 맨 아래로 */
    margin-top: 4px;
  }
  .fv-deadline-banner-top .fv-deadline-tag {
    align-self: flex-start;
    font-size: 13px;
    padding: 4px 10px;
    min-width: 0;
  }
  .fv-deadline-banner-top .fv-bottom-text { padding-right: 0; }
  .fv-deadline-banner-top .fv-bottom-text strong { font-size: 14px; }
  .fv-deadline-banner-top .fv-bottom-text p { font-size: 12px; line-height: 1.5; }
  .fv-deadline-banner-top .fv-bottom-text .fv-payment-warning { margin-top: 8px; }
  .fv-deadline-banner-top .fv-bottom-text .fv-payment-warning strong { font-size: 12px; line-height: 1.5; }
}

/* 전체메뉴(햄버거) X 버튼 — 항상 z-index/pointer-events 보장 */
.gnb_header .gnb_total .close_box {
  z-index: 110;
}
.gnb_header .gnb_total .close_box .close_btn {
  z-index: 111;
  pointer-events: auto;
}

/* 모바일 — close_box/total_menu의 min-width 풀고 viewport 기준 위치 + 정렬 */
@media only screen and (max-width: 1280px) {
  .gnb_header .gnb_total { overflow-y: auto; }
  .gnb_header .gnb_total .close_box {
    min-width: 0;
    width: 100%;
    left: 0;
    transform: none;
  }
  .gnb_header .gnb_total .close_box::before {
    width: 50px; height: 50px;
    background-size: 50px;
    left: 20px; top: 20px;
  }
  .gnb_header .gnb_total .close_box .close_btn {
    top: 25px;
    right: 20px;
    width: 40px; height: 40px;
    background-size: 40px;
  }
  .gnb_header .gnb_total .total_menu {
    min-width: 0;
    max-width: none;
    width: calc(100% - 40px);
    left: 20px;
    top: 100px;
    transform: none;
  }
  .gnb_header .gnb_total .total_menu > li {
    margin-bottom: 28px;
  }
  .gnb_header .gnb_total .total_menu > li > a {
    font-size: 18px;
    margin-bottom: 12px;
  }
  /* 카테고리 하위 항목 — 좁은 화면에서도 자연스럽게 */
  .gnb_header .gnb_total .total_menu > li > div > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .gnb_header .gnb_total .total_menu > li > div > ul > li {
    padding-right: 24px;
    margin-bottom: 8px;
  }
  .gnb_header .gnb_total .total_menu > li > div > ul > li > h3 {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 2px;
  }
  .gnb_header .gnb_total .total_menu > li > div > ul > li > a {
    font-size: 13px;
    line-height: 24px;
  }
}

/* 모바일(<=600) — 전체메뉴 한 컬럼 세로 정렬 */
@media only screen and (max-width: 600px) {
  .gnb_header .gnb_total .total_menu {
    top: 80px;
  }
  .gnb_header .gnb_total .total_menu > li > div > ul {
    flex-direction: column;
  }
  .gnb_header .gnb_total .total_menu > li > div > ul > li {
    padding-right: 0;
    width: 100%;
  }
}

/* ───── 외주 본사 새 푸터 CSS (정확) ───── */
.footer { position:relative; width:100%; min-width: 0; background-color:#333333; text-align: center; padding: 120px 0px 120px; box-sizing: border-box;}
.footer .footer_con { position:relative; width:100%; max-width: 1600px; min-width: 0; margin: 0 auto; display: flex; flex-wrap: wrap; box-sizing: border-box;}
.footer .footer_con>a.top_btn {position: absolute; right: 20px; top: 350px; display: block; width: 50px; height: 50px; border-radius: 50%; border: 1px solid #DDD; z-index: 1;}
.footer .footer_con>a.top_btn:before,.footer .footer_con>a.top_btn:after {position: absolute; top: 22px; width: 14px; height: 1px; background-color: #DDD; content: "";}
.footer .footer_con>a.top_btn:before {left: 13px; transform:rotate(-45deg);}
.footer .footer_con>a.top_btn:after {left: 22px; transform:rotate(-135deg);}

.footer_top { width: 45%; text-align: left;}
.footer_top>div {margin-bottom: 30px;}
.footer_top h2 {font-size: 30px; line-height: 30px; color: #FFF; margin-bottom: 20px; }
.footer_top p {font-size: 16px; line-height: 30px; color: #CCC; }
.footer_top p span { position: relative; padding-right: 10px; margin-right: 10px;}
.footer_top p span::before { position: absolute; top: 5px; right: -1px; width: 1px; height: 12px; background-color: #888; content: "";}
.footer_top p span:last-child { margin-right: 0px; padding-right: 0px;}
.footer_top p span:last-child::before { display: none;}

.footer_menu { width: 55%; text-align: right;}
.footer_menu li:first-child { margin-bottom: 40px;}
.footer_menu li:first-child a:nth-child(1), .footer_menu li:first-child a:nth-child(2) { margin-right: 20px;}
.footer_menu li:first-child a:nth-child(1) img, .footer_menu li:first-child a:nth-child(2) img { width: 40px; }
.footer_menu li { margin-bottom: 20px; }
.footer_menu li:last-child { margin-bottom: 0px;}
.footer_menu li h3 {font-size: 20px; line-height: 30px; color: #FFF; margin-bottom: 20px; }
.footer_menu li a { display: inline-block; font-size: 16px; line-height: 30px; color: #CCC; font-weight: 300; margin-right: 20px; }
.footer_menu li a:hover { color: #FFF; }
.footer_menu li a:last-child { margin-right: 0px;}
.footer_menu li:nth-of-type(3) a:nth-of-type(1) { font-weight: 600;}

/* 반품주소지 — 원본 모바일 마크업(.footer_address, mobile footer.jsp:207-240)으로 교체.
   데스크톱 표시는 이전 ul.footer_bottom 과 동일하게 유지한다: 라벨 100px + 주소 한 줄,
   그 아래 DSC 7개가 40%/60% 2열. 구 li:nth-child(2n)=40% 는 반품주소지가 목록에서
   빠지면서 홀수 항목(서울/대구/광주/평택)이 40% 가 되도록 옮겼다. */
/* 인증 배너의 모바일 자리 — 데스크톱에서는 메뉴 안의 자리를 쓴다.
   미디어쿼리는 우선순위를 못 올리므로 min-width 로 갈라야 뒤에 오는 이 규칙이 모바일을 덮지 않는다. */
@media only screen and (min-width: 1281px) { .footer_con>.footer_bottom { display: none; } }
.footer_address { display: flex; flex-wrap: wrap; width: 100%; border-top: 1px solid #666; margin-top: 50px; padding-top: 50px; text-align: left; }
.footer_address > h2 { width: 100px; font-size: 14px; line-height: 25px; color: #FFF; }
.footer_address > p { width: calc(100% - 100px); font-size: 14px; line-height: 25px; color: #CCC; }
.footer_address > ul { display: flex; flex-wrap: wrap; width: 100%; margin-top: 30px; }
.footer_address > ul > li { position: relative; width: 60%; padding-left: 100px; }
.footer_address > ul > li > h2 { position: absolute; left: 0px; top: 0px; font-size: 14px; line-height: 25px; color: #FFF; }
.footer_address > ul > li > p { font-size: 14px; line-height: 25px; color: #CCC; }
.footer_address > ul > li:nth-child(2n+1) { width: 40%; }

/* ───── 푸터 반응형 ───── */
@media only screen and (max-width: 1280px) {
  .footer { padding: 40px 15px 50px; }
  .footer .footer_con { flex-direction: column; padding: 0; }
  /* 위로가기 버튼 — 원본 모바일 값(mobile/base.css:148-151).
     footer.jsp:158 기준 모바일 푸터에도 항상 있는 요소다. */
  .footer .footer_con > a.top_btn { right: 0px; top: 0px; width: 40px; height: 40px; }
  .footer .footer_con > a.top_btn:before,
  .footer .footer_con > a.top_btn:after { top: 17px; }
  .footer .footer_con > a.top_btn:before { left: 8px; }
  .footer .footer_con > a.top_btn:after { left: 17px; }

  .footer_top { width: 100%; margin-bottom: 40px; }
  .footer_top h2 { font-size: 22px; margin-bottom: 15px; }
  .footer_top p { font-size: 14px; line-height: 25px; }

  .footer_menu { width: 100%; text-align: left; margin-bottom: 40px; }
  .footer_menu li h3 { font-size: 22px; margin-bottom: 10px; }
  .footer_menu li a { font-size: 14px; line-height: 30px; margin-right: 20px; }

  /* 인증 배너 — 원본 모바일은 이 줄을 메뉴가 아니라 반품주소지 아래(.footer_bottom,
     mobile footer.jsp)에 둔다. 데스크톱 자리인 메뉴 첫 항목은 감추고 아래 자리를 켠다. */
  .footer_menu li:first-child { display: none; }
  .footer_con > .footer_bottom { display: flex; align-items: center; flex-wrap: wrap; width: 100%;
    margin-top: 0px; padding-top: 40px; border-top: 1px solid #666; }
  .footer_con > .footer_bottom a { margin-right: 20px; }
  .footer_con > .footer_bottom a:last-child { margin-right: 0px; }
  .footer_con > .footer_bottom a:nth-child(1) img,
  .footer_con > .footer_bottom a:nth-child(2) img { width: 30px; }
  .footer_con > .footer_bottom a:nth-child(3) img,
  .footer_con > .footer_bottom a:nth-child(4) img { width: 110px; }

  /* 회사정보 — 원본 모바일은 항목마다 줄이 분리된다(mobile footer.jsp:166-185).
     원본이 같은 마크업 한 벌로 데스크톱/모바일을 처리하는 방식(challenge/base.css:127-133)
     을 그대로 이식했다: span 을 block 으로 내리고 ｜ 구분자를 지우되, 3번째 p
     (고객센터/FAX/E-mail)의 앞 두 span 만 한 줄에 남긴다. 결과 줄 구성 =
     대표자 / 회사명 / 주소 / 고객센터｜FAX / E-mail / 통신판매등록번호 / 사업자등록번호. */
  .footer_top p span { display: block; padding-right: 0px; margin-right: 0px; }
  .footer_top p span::before { display: none; }
  .footer_top p:nth-of-type(3) span:nth-child(1) { display: inline-block; position: relative; padding-right: 10px; margin-right: 10px; }
  .footer_top p:nth-of-type(3) span:nth-child(1)::before { display: block; position: absolute; top: 5px; right: -1px; width: 1px; height: 12px; background-color: #888; content: ""; }
  .footer_top p:nth-of-type(3) span:nth-child(2) { display: inline-block; }

  /* 반품주소지 아코디언(기본 접힘) — 원본 mobile/base.css:170-177,
     펼침 동작은 mobile/design.js:224-236. 화살표는 원본과 같은 icon_faq_open.png. */
  .footer_address { position: relative; display: block; margin-top: 0px; padding-top: 40px; padding-bottom: 40px; cursor: pointer; }
  .footer_address > h2 { width: 100%; font-size: 14px; line-height: 20px; margin-bottom: 5px; }
  .footer_address > p { width: 100%; font-size: 13px; line-height: 20px; word-break: keep-all; padding-right: 50px; }
  .footer_address > ul { display: none; margin-top: 40px; }
  .footer_address.active > ul { display: block; }
  .footer_address > ul > li,
  .footer_address > ul > li:nth-child(2n+1) { width: 100%; padding-left: 0px; margin-bottom: 20px; }
  .footer_address > ul > li:last-child { margin-bottom: 0px; }
  .footer_address > ul > li > h2 { position: static; font-size: 14px; line-height: 20px; margin-bottom: 5px; }
  .footer_address > ul > li > p { font-size: 13px; line-height: 20px; word-break: keep-all; }
  .footer_address::before { position: absolute; right: 0px; top: 40px; width: 40px; height: 20px; background-image: url(/image/common/icon_faq_open.png); background-repeat: no-repeat; background-position: center center; content: ""; transform: rotate(-180deg); opacity: 0.5; }
  .footer_address.active::before { transform: rotate(0deg); opacity: 1; }
}



.fv-not-eligible .fv-notice-btn { position: static; margin-top: 14px; }

/* 마감 (검토 진행 중) — 단순 박스 */
.fv-closed-simple { background: #f5f5f7; border: 1px solid #d8d8dc; border-radius: 12px; padding: 36px 24px; text-align: center; }
.fv-closed-simple h4 { font-size: 22px; font-weight: 700; color: #333; margin-bottom: 12px; }
.fv-closed-simple p { font-size: 14px; color: #666; line-height: 1.6; margin: 0 0 22px; }
.fv-closed-simple-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.fv-closed-simple .fv-notice-btn { position: static; }
/* 지급 결과 한 줄 */
.fv-payment-line { font-size: 15px; font-weight: 600; color: #1e6b30 !important; margin: 0 0 22px !important; }
.fv-payment-line.fv-payment-processing { color: #5a6b80 !important; }
.fv-payment-line.fv-payment-failed { color: #a32020 !important; }

/* 내 신청 내역 모달 */
.fv-summary-modal { max-width: 560px !important; max-height: 85vh !important; overflow: hidden !important; display: flex; flex-direction: column; }
.fv-summary-modal .cb-modal-header { flex-shrink: 0; }
.fv-summary-modal .cb-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.fv-summary-modal .fv-modal-footer { flex-shrink: 0; }
.fv-summary-section { background: #fafafa; border: 1px solid #ececec; border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; }
.fv-summary-section:last-child { margin-bottom: 0; }
.fv-summary-section > h4 { font-size: 14px; font-weight: 700; color: #333; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; }
.fv-summary-receipt-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; font-size: 14px; color: #444; border-bottom: 1px solid #f5f5f5; }
.fv-summary-receipt-row:last-child { border-bottom: none; }
.fv-summary-receipt-row strong { color: #222; font-weight: 600; }
.fv-summary-receipt-empty { padding: 20px; text-align: center; color: #aaa; font-size: 13px; }

/* 영수증 한 줄 (모달 안) — 신청 ----- 인정 */
.fv-rline { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.fv-rline:last-of-type { border-bottom: none; }
.fv-rline-main { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.fv-rline-date { color: #555; min-width: 56px; flex-shrink: 0; font-weight: 500; }
.fv-rline-claim { color: #666; flex-shrink: 0; }
.fv-rline-spacer { flex: 1; min-width: 16px; }
.fv-rline-pass { color: #222; font-weight: 700; flex-shrink: 0; }
.fv-rline-fail { color: #a32020; font-weight: 700; flex-shrink: 0; }
.fv-rline-pending { color: #888; flex-shrink: 0; }
.fv-rline-note { font-size: 12px; color: #888; margin-top: 4px; padding-left: 64px; line-height: 1.5; }


/* 신청 준비 중 (PRE_OPEN) */
.fv-pre-open { background: #e8f4ff; border: 1px solid #88b8e0; border-radius: 12px; padding: 36px 24px; text-align: center; }
.fv-pre-open-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
.fv-pre-open h4 { font-size: 20px; font-weight: 700; color: #003a6f; margin-bottom: 10px; line-height: 1.4; }
.fv-pre-open p { font-size: 20px; font-weight: 700; color: #003a6f; line-height: 1.4; margin: 0; }
.fv-pre-open .fv-notice-btn { position: static; margin-top: 18px; }

.fv-closed-banner { background: #f5f5f5; border: 1px solid #ccc; border-radius: 12px; padding: 24px 24px; text-align: center; }
.fv-closed-banner h4 { font-size: 20px; font-weight: 700; color: #444; margin-bottom: 8px; }
.fv-closed-banner p { font-size: 14px; color: #666; line-height: 1.6; }

.fv-deadline-banner { background: #e8f4ff; border: 1px solid #88b8e0; border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
.fv-deadline-left { display: flex; align-items: flex-start; gap: 14px; }
.fv-deadline-tag { background: #004687; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 700; flex-shrink: 0; min-width: 56px; text-align: center; }
.fv-deadline-banner strong { display: block; font-size: 15px; color: #1d2c3f; margin-bottom: 4px; }
.fv-deadline-banner p { font-size: 13px; color: #5a6b80; line-height: 1.5; margin: 0; }

.fv-no-submit-notice { margin-top: 24px; padding: 18px 22px; background: #fafafa; border-left: 4px solid #b3d4f4; border-radius: 4px; }
.fv-no-submit-notice strong { font-size: 14px; color: #222; display: block; margin-bottom: 4px; }
.fv-no-submit-notice p { font-size: 13px; color: #666; line-height: 1.6; margin: 0; }

.fv-readonly { opacity: 0.85; }
.fv-readonly-tag { background: #888; color: #fff; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.fv-ro-val { padding: 10px 12px; background: #fafafa; border-radius: 8px; font-size: 14px; color: #333; min-height: 38px; box-sizing: border-box; }
.fv-noimage { color: #aaa; font-size: 13px; }
.fv-entitlement-card.fv-readonly { background: #f5f5f7; border-color: #ddd; }

.fv-entitlement-card { background: #f0f6ff; border: 1px solid #b3d4f4; border-radius: 12px; padding: 20px 24px; }
.fv-ent-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 15px; color: #444; }
.fv-ent-row strong { color: #222; }
.fv-ent-divider { height: 1px; background: #cbdef2; margin: 8px 0; }
.fv-ent-total { font-size: 17px; }
.fv-ent-total strong { color: #004687; font-size: 20px; font-weight: 700; }

.fv-empty { padding: 32px 20px; text-align: center; color: #aaa; background: #fafafa; border-radius: 12px; border: 1px dashed #ddd; }

/* 영수증 한 줄 (OPEN: 클릭 시 모달, CLOSED: 명세서 read-only) */
.fv-receipt-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.fv-receipt-item { border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; cursor: pointer; }
.fv-receipt-item:hover { border-color: #88b8e0; box-shadow: 0 2px 6px rgba(0,70,135,0.06); }
.fv-receipt-item.fv-readonly { background: #fafafa; cursor: default; }
.fv-receipt-item.fv-readonly:hover { border-color: #e8e8e8; box-shadow: none; }

/* 검토 사유 표시 (CLOSED 모드) */
.fv-receipt-note { font-size: 13px; color: #666; padding: 8px 14px 10px; background: #fafafa; border-top: 1px dashed #e0e0e0; line-height: 1.5; display: flex; gap: 6px; align-items: flex-start; border-radius: 0 0 11px 11px; }
.fv-receipt-note.fv-note-fail { background: #fff5f5; color: #a05050; border-top-color: #f0d0d0; }
.fv-receipt-note.fv-note-partial { background: #f5fbf6; color: #4a7d5a; border-top-color: #d0e8d6; }
.fv-note-icon { flex-shrink: 0; font-weight: 700; line-height: 1.5; }
.fv-receipt-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.fv-receipt-row-num { font-size: 14px; font-weight: 700; color: #888; min-width: 28px; }
.fv-receipt-row-summary { flex: 1; min-width: 0; }
.fv-summary-main { font-size: 15px; color: #222; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-summary-amt { font-size: 14px; color: #555; margin-top: 2px; }
.fv-receipt-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.fv-chevron { font-size: 22px; color: #aaa; line-height: 1; }

/* 모달 안 이미지 + 필드 2단 */
.fv-modal-grid { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 24px; align-items: start; }
.fv-modal-left { display: flex; flex-direction: column; gap: 12px; }
.fv-receipt-image { position: relative; background: #fafafa; border-radius: 8px; min-height: 240px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fv-ocr-boxes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.fv-ocr-box { fill: transparent; stroke-width: 4; }
/* OCR 인식 영역 — 모두 하늘색 단색 */
.fv-ocr-box { stroke: #4a90e2; fill: rgba(74, 144, 226, 0.18); }
.fv-modal-left .fv-modal-guide { margin-bottom: 0; }
.fv-image-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-img-action-btn { background: #fff; border: 1px solid #88b8e0; color: #004687; font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.3; white-space: nowrap; text-align: center; }
.fv-img-action-btn:hover { background: #e8f4ff; }
.fv-img-action-btn:disabled,
.fv-img-action-btn.disabled { background: #f5f5f5; color: #aaa; border-color: #ddd; cursor: not-allowed; pointer-events: none; }
.fv-receipt-image img { max-width: 100%; max-height: 360px; object-fit: contain; display: block; }
.fv-image-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.fv-image-wrap img { display: block; max-width: 100%; max-height: 360px; }
.fv-upload-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 240px; padding: 16px; cursor: pointer; color: #888; text-align: center; }
.fv-upload-drop:hover { background: #f0f6ff; }
.fv-upload-icon { font-size: 36px; color: #b3d4f4; margin-bottom: 6px; }
.fv-upload-drop p { font-size: 14px; margin-bottom: 4px; }
.fv-upload-drop span { font-size: 12px; color: #aaa; }
.fv-receipt-fields { display: flex; flex-direction: column; gap: 0; }
.fv-extra-fields { margin-top: 4px; border-top: 1px solid #f0f0f0; padding-top: 8px; }
.fv-extra-fields summary { font-size: 13px; color: #666; padding: 8px 0; cursor: pointer; user-select: none; }
.fv-extra-fields[open] summary { color: #004687; font-weight: 600; margin-bottom: 8px; }
.fv-ocr-badge { background: #e8f4ff; color: #004687; font-size: 12px; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }

/* 입력 필드 wrap — OCR 로딩 중 shimmer (cb-extracted-info.cb-loading 효과 재사용) */
.fv-fields-wrap { position: relative; padding: 0; }
.fv-fields-wrap.cb-loading { padding: 14px; background: #fafafa; border: 1px solid #e0e0e0; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,70,135,0.15), 0 4px 20px rgba(0,70,135,0.08); animation: cb-loading-pulse 1.8s ease-in-out infinite; }
.fv-fields-wrap.cb-loading::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; background: rgba(0,70,135,0.04); z-index: 1; pointer-events: none; }
.fv-fields-wrap.cb-loading::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; background: linear-gradient(110deg, rgba(255,255,255,0) 25%, rgba(0,70,135,0.07) 50%, rgba(255,255,255,0) 75%); background-size: 200% 100%; animation: cb-shimmer 1.5s ease-in-out infinite; z-index: 2; pointer-events: none; }
@keyframes cb-loading-pulse { 0%,100% { box-shadow: 0 0 0 1px rgba(0,70,135,0.15), 0 4px 20px rgba(0,70,135,0.08); } 50% { box-shadow: 0 0 0 1px rgba(0,70,135,0.25), 0 4px 30px rgba(0,70,135,0.15); } }
@keyframes cb-shimmer { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
.fv-fields-wrap > * { position: relative; z-index: 3; }
.fv-fields-title { font-size: 14px; font-weight: 600; color: #444; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fv-fields-hint { font-size: 12px; color: #666; margin: 0 0 12px; line-height: 1.5; }
.fv-fail-tag { display: inline-block; background: #ffd0d0; color: #a32020; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 8px; font-weight: 700; vertical-align: middle; }
.fv-hint-fail { color: #a32020 !important; font-weight: 600; background: #fef0f0; border: 1px solid #f0c0c0; padding: 10px 12px !important; border-radius: 6px; }
.fv-hint-fail strong { color: #7a0000; }
.fv-ocr-hint { background: #fffbe8 !important; color: #6a5a20 !important; }

/* OCR 자동 인식 read-only 섹션 */
.fv-ocr-auto-section { margin-top: 14px; padding: 12px 14px; background: #f5f7fa; border: 1px solid #e0e6ed; border-radius: 8px; }
.fv-ocr-auto-title { font-size: 12px; font-weight: 700; color: #555; margin-bottom: 8px; }
.fv-ocr-auto-title span { font-size: 11px; font-weight: 400; color: #888; margin-left: 4px; }
.fv-ocr-auto-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 12px; gap: 10px; }
.fv-ocr-auto-row span { color: #888; flex-shrink: 0; min-width: 64px; }
.fv-ocr-auto-row strong { color: #333; font-weight: 500; text-align: right; word-break: break-all; }
.fv-modal-guide { background: #e8f4ff; border: 1px solid #88b8e0; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.fv-modal-guide strong { display: block; font-size: 13px; color: #004687; margin-bottom: 6px; font-weight: 700; }
.fv-modal-guide ul { margin: 0; padding-left: 18px; font-size: 13px; color: #2a4a6e; line-height: 1.6; list-style: disc; }
.fv-modal-guide ul li strong { display: inline; font-weight: 700; color: #003a6f; margin-bottom: 0; }

/* 영수증 검토 결과 라벨 (한 줄) */
.fv-rstatus { display: inline-block; padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fv-rstatus-pass { background: #e8f7ec; color: #1e6b30; }
.fv-rstatus-fail { background: #fef0f0; color: #a32020; }
.fv-rstatus-pending { background: #f0f0f0; color: #888; }
.fv-receipt-item.fv-receipt-fail { background: #fff8f8; }
.fv-amt-accepted { color: #1e6b30; font-weight: 700; }
.fv-amt-rejected { color: #a32020; font-weight: 700; }
.fv-amt-label { font-size: 11px; color: #888; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: #f0f0f0; margin-right: 2px; }
.fv-amt-label-pass { background: #e0f0e6; color: #1e6b30; }

/* 영수증 합계 요약 박스 (영수증 영역 상단, CLOSED 모드) */
.fv-receipts-totals { background: #f8f9fa; border: 1px solid #e6e8eb; border-radius: 10px; padding: 12px 16px; margin: 8px 0 12px; }
.fv-totals-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 13px; color: #666; }
.fv-totals-row strong { color: #444; font-size: 15px; font-weight: 700; }
.fv-totals-accepted { padding-top: 6px; border-top: 1px dashed #ddd; margin-top: 4px; }
.fv-totals-accepted strong { color: #1e6b30; font-size: 17px; }

.fv-pass-count { color: #1e6b30; font-weight: 600; }
.fv-fail-count { color: #a32020; font-weight: 600; }
.fv-pending-count { color: #888; }

/* 모달 안 검토 결과 */
.fv-modal-status { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }
.fv-modal-status strong { display: block; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.fv-modal-status p { font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.fv-modal-status-note { font-size: 12px !important; color: #666 !important; padding-top: 4px; border-top: 1px dashed currentColor; opacity: 0.85; margin-top: 8px !important; }
.fv-modal-status-pass { background: #e8f7ec; color: #1e6b30; }
.fv-modal-status-fail { background: #fef0f0; color: #a32020; }
.fv-modal-status-pending { background: #f5f5f5; color: #666; }

/* 영수증 모달 — 좌(이미지) + 우(입력+OCR원본) 폭 확보 + 헤더/푸터 고정 */
.fv-receipt-modal { max-width: 880px !important; max-height: 90vh !important; overflow: hidden !important; display: flex; flex-direction: column; }
.fv-receipt-modal .cb-modal-header { flex-shrink: 0; }
.fv-receipt-modal .cb-modal-body { flex: 1; overflow-y: auto; min-height: 0; }
.fv-receipt-modal .fv-modal-footer { flex-shrink: 0; }

/* 모바일: 영수증 모달 풀스크린 */
@media (max-width: 768px) {
    .fv-receipt-overlay { padding: 0 !important; }
    .fv-receipt-modal { max-width: 100vw !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; }
}

/* 모달 footer */
.fv-modal-footer { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid #eee; align-items: center; background: #fafafa; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.fv-modal-footer .btn { width: auto; height: 42px; line-height: 40px; padding: 0 22px; font-size: 14px; border-radius: 8px; min-width: 86px; cursor: pointer; font-weight: 600; }
.fv-modal-footer .btn.btn-grey { background: #fff; }
.fv-modal-footer .btn.btn-grey:hover { background: #f0f0f0; }

.fv-summary { margin-top: 24px; padding: 18px 24px; background: #fafafa; border-radius: 12px; }
.fv-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 14px; color: #555; }
.fv-sum-row strong { color: #222; }
.fv-sum-divider { height: 1px; background: #ddd; margin: 6px 0; }
.fv-sum-total { font-size: 16px; padding-top: 8px; }
.fv-sum-total strong { color: #004687; font-size: 18px; font-weight: 700; }
.fv-sum-total small { font-size: 11px; color: #888; font-weight: 400; margin-left: 4px; }

.fv-nav { margin-top: 24px; }

.fv-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.85); color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 14px; z-index: 9999; max-width: 80%; }

@media (max-width: 900px) {
    .fv-twocol { grid-template-columns: 1fr; }
    .fv-twocol-left { position: static; }
    .fv-modal-grid { grid-template-columns: 1fr; }
    .fv-section-header h3 { font-size: 18px; }
    .fv-status-amount { font-size: 38px; }
    .fv-receipts-head { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ==========================================================================
   shop 상품목록(/shop) 반응형 — 원본 m.pmi-korea.com(mobile.css/base.css) 정본 이식
   데스크탑 base.css(.product_list>li 370px 4열, .product_img img 290px 고정)를
   구간별로 override. 모든 규칙은 @media 안에만 → 데스크탑 웹 불변.
   ========================================================================== */
/* 상품 없음 메시지 — flex item이라 상품 li의 2열 width를 상속함 → 전체폭 중앙정렬 강제 (모든 구간 공통) */
.shoping_list .product_list > li.no_data { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; margin: 0 !important; padding: 60px 20px !important; text-align: center; color: #999; background: transparent !important; }
/* 태블릿 (1200px↓): 3열 + 이미지 유동(고정 290px 치우침 제거) */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .shoping_list .content_box { width: 100%; padding: 0 20px; box-sizing: border-box; }
  .shoping_list .content_top { width: 100%; }
  .shoping_list .product_list { align-items: flex-start !important; }
  .shoping_list .product_list.album > li { position: relative; display: flex; flex-direction: column; box-sizing: border-box; align-self: flex-start !important; width: calc((100% - 60px) / 3) !important; padding: 25px 25px 65px !important; margin-right: 30px !important; margin-bottom: 30px; }
  /* 태블릿 GNB 햄버거 우측 여백 (로고 좌20과 대칭) */
  .gnb_header .gnb_box .gnb_menu { right: 20px; }
  .shoping_list .product_list.album > li:nth-child(4n) { margin-right: 30px !important; }
  .shoping_list .product_list.album > li:nth-child(3n) { margin-right: 0 !important; }
  /* base.css:872-873의 290px 고정폭 → li 폭 따라 축소되는 유동 정사각 */
  .shoping_list .product_list.album > li > .product_img { width: 100%; height: auto; text-align: center; flex-shrink: 0; }
  .shoping_list .product_list.album > li > .product_img img { width: 100%; height: auto; }
  .shoping_list .product_list.album > li h2 { height: 75px; min-height: 75px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* 가격 영역 높이 고정(1줄/2줄 차이로 카드 높이 갈리는 것 방지) */
  .shoping_list .product_list.album > li .product_pay_text { min-height: 60px; }
  /* 모바일은 hover 없음 → active 효과 제거 */
  .shoping_list .product_list.album > li.active { border: 0 !important; }
  .shoping_list .product_list.album > li.active > .product_img img { scale: 1 !important; }
  /* 태블릿도 버튼바 = 카드 하단 고정 아이콘 (모바일과 동일 방식) */
  .shoping_list .product_btn .pc_only { display: none !important; }
  .shoping_list .product_btn .mo_only { display: inline-block !important; }
  .shoping_list .product_list.album > li .product_btn { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; width: auto; height: 40px; overflow: hidden; z-index: 2; background-color: #cd1619; display: flex; flex-wrap: wrap; opacity: 1 !important; visibility: visible !important; transform: none !important; flex-shrink: 0; }
  .shoping_list .product_list.album > li .product_btn > li { position: relative; width: 25%; margin: 0; padding: 0; display: block; height: 40px; }
  .shoping_list .product_list.album > li .product_btn > li:nth-child(1) { width: 50%; }
  .shoping_list .product_list.album > li .product_btn > li:nth-child(2):before { position: absolute; top: 15px; right: -1px; width: 1px; height: 10px; background-color: #FFF; content: ""; }
  .shoping_list .product_list.album > li .product_btn > li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0; }
  .shoping_list .product_btn > li > a > i { display: inline-block; width: 30px; height: 30px; background-image: url("https://www.pmi-korea.com/resources/image/mobile/kr/icon_shopping_list.png"); background-repeat: no-repeat; background-size: 60px 30px; overflow: hidden; text-indent: -9999px; vertical-align: middle; border-radius: 10px; }
  .shoping_list .product_btn > li > a > i.icon_cart { background-position: 0 0; }
  .shoping_list .product_btn > li > a > i.icon_order { background-position: -30px 0; }
  .shoping_list .product_list.album > li .product_btn .goods_count { display: flex; width: 100%; height: 40px; border: 1px solid #cd1619; border-radius: 0; }
  .shoping_list .product_list.album > li .product_btn .goods_count a, .shoping_list .product_list.album > li .product_btn .goods_count input { width: 33.3%; height: 38px; background-color: #FFF; border: 0; float: none; }
  .shoping_list .product_list.album > li .product_btn .goods_count input { color: #cd1619; text-align: center; }
  .shoping_list .product_list.album > li .product_btn .goods_count a { position: relative; }
  .shoping_list .product_list.album > li .product_btn .goods_count a:before, .shoping_list .product_list.album > li .product_btn .goods_count a:after { position: absolute; background-color: #cd1619; content: ""; }
  .shoping_list .product_list.album > li .product_btn .goods_count a:before { top: 19px; left: 50%; transform: translateX(-50%); width: 9px; height: 1px; }
  .shoping_list .product_list.album > li .product_btn .goods_count a:after { top: 15px; left: 50%; transform: translateX(-50%); width: 1px; height: 9px; }
  .shoping_list .product_list.album > li .product_btn .goods_count a:first-child:after { display: none; }
}
/* 모바일 (768px↓): 원본 모바일 상품목록 레이아웃 (실제 m.pmi-korea.com과 동일) */
@media only screen and (max-width: 768px) {
  .shoping_list .content_box { width: 100%; padding: 0 15px; box-sizing: border-box; }
  /* flex align-items:stretch가 li를 콘텐츠보다 짧게 찌부러뜨려 btn(bottom:0) 기준이 어긋남 → 각 li가 콘텐츠 높이 유지 */
  .shoping_list .product_list { align-items: flex-start !important; }
  /* 대분류 — 가로스크롤 알약탭 (원본 mobile.css .sub_menu a) */
  .shoping_list .sub_menu_wrap { position: relative; width: 100%; height: 40px; overflow: hidden; margin: 0 auto 0; }
  .shoping_list .sub_menu_wrap > div { position: relative; width: 100%; overflow-x: auto; padding-bottom: 20px; }
  .shoping_list .sub_menu_wrap.dep { margin-bottom: 20px; }
  .shoping_list .sub_menu { display: inline-flex; justify-content: flex-start; padding-right: 20px; float: none; overflow: visible; }
  .shoping_list .sub_menu a { position: relative; display: inline-block; height: 34px; float: none; font-size: 14px; line-height: 32px; color: #000; margin-right: 10px; white-space: nowrap; border: 1px solid #DDD; border-radius: 20px; padding: 0 14px; }
  .shoping_list .sub_menu a.active { background-color: #F4F4F4; color: #000; cursor: default; }
  /* 중분류 — 밑줄 탭 (원본 mobile.css .sub_menu_dep a) */
  .shoping_list .sub_menu_dep { display: inline-flex; justify-content: flex-start; padding-right: 20px; float: none; }
  .shoping_list .sub_menu_dep a { position: relative; display: inline-block; height: 40px; float: none; font-size: 14px; line-height: 40px; color: #000; margin-right: 20px; white-space: nowrap; border: 0; padding: 0; }
  .shoping_list .sub_menu_dep a.active { color: #222; }
  .shoping_list .sub_menu_dep a.active::before { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #222; content: ""; }
  /* 상품 2열 (원본 base.css 48.5% + 3% gutter) — float 제거·box-sizing으로 버튼바 기준(li) 정규화 */
  .shoping_list .product_list > li { position: relative; float: none; display: flex; flex-direction: column; box-sizing: border-box; align-self: flex-start !important; width: 48.5% !important; padding: 15px 10px 15px !important; margin-right: 3% !important; margin-bottom: 30px; }
  .shoping_list .product_list > li:nth-child(3n), .shoping_list .product_list > li:nth-child(4n) { margin-right: 3% !important; }
  .shoping_list .product_list > li:nth-child(2n) { margin-right: 0 !important; }
  /* 모바일은 hover 없음 → active 붉은테두리/확대 효과 제거 (버튼바는 항상 노출) */
  .shoping_list .product_list > li.active { border: 0 !important; }
  .shoping_list .product_list > li.active > .product_img img { scale: 1 !important; }
  .shoping_list .product_list > li > .product_img { width: 100%; height: 38.8vw; max-height: 460px; flex-shrink: 0; }
  .shoping_list .product_list > li > .product_img img { width: 100%; height: auto; }
  .shoping_list .product_list > li h3 { width: 80%; font-size: 13px; line-height: 20px; color: #cd1619; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* 상품명: 원본처럼 잘리지 않게 전체 표시 (height 고정·line-clamp 제거) */
  /* 상품명 최소 3줄 높이(75px)로 카드 기준 통일 + 넘쳐도 줄임말 없이 전부 표시 */
  .shoping_list .product_list > li h2 { width: 100%; min-height: 75px; height: auto; font-size: 18px; line-height: 25px; font-weight: 500; color: #222; overflow: visible; display: block; word-break: keep-all; }
  .shoping_list .product_list > li > div { flex-shrink: 0; }
  /* 가격 라벨 (원본 base.css .product_pay_text) */
  .shoping_list .product_list .product_pay_text p { position: relative; width: 100%; text-align: right; font-size: 13px; line-height: 20px; color: #888; padding-left: 60px; }
  .shoping_list .product_list .product_pay_text p::before { position: absolute; left: 0; top: 0; font-size: 11px; line-height: 20px; color: #888; }
  .shoping_list .product_list .product_pay_text p.pay, .shoping_list .product_list .product_pay_text p.team { font-size: 15px; line-height: 25px; font-weight: 500; }
  .shoping_list .product_list .product_pay_text p.pay::before, .shoping_list .product_list .product_pay_text p.team::before { line-height: 25px; }
  .shoping_list .product_list .product_pay_text p.pay { color: #222; }
  .shoping_list .product_list .product_pay_text p.team { color: #cd1619; }
  .shoping_list .product_list .product_pay_text p.pay::before { content: "권장소비자가"; }
  .shoping_list .product_list .product_pay_text p.team::before { content: "팀파트너가"; }
  .shoping_list .product_list .product_pay_text p.point::before { content: "포인트"; }
  .shoping_list .product_list .product_pay_text p.gv::before { content: "GV"; }
  /* 신상품 flag */
  .shoping_list .product_list > li > div > span.flag { position: absolute; right: 10px; top: 13px; width: 36px; height: 24px; background-image: url("https://www.pmi-korea.com/resources/image/common/icon_newflag.png"); background-size: 100%; background-repeat: no-repeat; }
}
/* ---------- 모바일 GNB (원본 mobile.css 이식) ---------- */
@media only screen and (max-width: 768px) {
  .gnb_header { height: 64px; background-color: rgba(255,255,255,0.4); }
  .gnb_header .gnb_box { height: 64px; }
  .gnb_header .gnb_box .logo { left: 10px; top: 7px; width: 50px; height: 50px; background-size: 50px; }
  .gnb_header .gnb_box .gnb_menu { position: absolute; left: auto; right: 8px; top: 0; height: 64px; padding: 0; display: block; text-align: right; }
  .gnb_header .gnb_box .gnb_menu > a { float: left; display: flex; align-items: center; justify-content: center; width: 42px; height: 64px; padding-top: 0; margin-left: 0; }
  /* 데스크탑 텍스트 메뉴/메인메뉴 숨김 (모바일은 사이드메뉴로) */
  .gnb_header .gnb_menu a.cs_btn, .gnb_header .gnb_menu a.logout_btn,
  .gnb_header .gnb_menu a.join_btn, .gnb_header .gnb_menu a.login_btn { display: none; }
  .main_menu { display: none; }
  .gnb_menu a.total_btn .ico-gnb { background-position: -90px 0; }
  /* 전체메뉴 → 전체화면 사이드메뉴 슬라이드 */
  .gnb_total { position: fixed; right: 0; top: 0; left: auto; width: 100%; height: 100%; background-color: #fff; z-index: 100; padding-top: 90px; opacity: 0; visibility: hidden; transform: translateX(100%); transition: all 0.3s ease-in-out; overflow-y: auto; }
  .gnb_total.active { right: 0; opacity: 1; visibility: visible; transform: translateX(0); }
}
/* ---------- shop 데스크탑/모바일 요소 토글 + 모바일 전용 표현 ---------- */
.shoping_list .mo_only { display: none; }   /* 데스크탑: 모바일 전용 요소 숨김 */
@media only screen and (max-width: 768px) {
  .shoping_list .pc_only { display: none !important; }
  .shoping_list .mo_only { display: block; }
  /* 히어로: 데스크탑 front.css(.sub_content.shoping_list .sub_title{height:540px;배경})를 이기려면
     동일 specificity(.sub_content.shoping_list) 필요 → 배경 제거·높이 auto (길어짐 해결) */
  .sub_content.shoping_list .sub_title { background-image: none !important; background: none !important; width: 100%; height: auto !important; min-height: auto; padding: 0 !important; margin-bottom: 30px; }
  .sub_content.shoping_list .sub_title .title_img.mo_only { position: relative; display: block; width: 100%; max-width: 100%; height: auto; left: 0 !important; right: auto !important; top: auto !important; transform: none !important; margin: 0 auto 24px !important; background-color: #FFF; z-index: auto; }
  .sub_content.shoping_list .sub_title .title_img.mo_only img { width: 100%; display: block; }
  /* page.tsx sub_title엔 .center 클래스 없음(데스크탑 좌측정렬 보호) → 모바일은 .center 없이 가운데 */
  .sub_content.shoping_list .sub_title h2 { margin-bottom: 4px; text-align: center !important; color: #222; font-size: 28px; line-height: 34px; padding: 0 15px; }
  .sub_content.shoping_list .sub_title p { color: #222; text-align: center !important; font-size: 14px; font-weight: 400; padding: 0 15px; }
  /* 툴바: 총건수(좌) + 정렬 select(우95) + 앨범/리스트 토글(우0) — 원본 absolute 배치 */
  .shoping_list .content_top { position: relative; width: 100%; min-height: 50px; margin: 0 auto 20px; }
  .shoping_list .content_top .total_sum { display: inline-block; font-size: 16px; line-height: 40px; color: #222; }
  .shoping_list .content_top .sorting { position: absolute; top: 0; right: 95px; display: flex; width: 110px; }
  .shoping_list .content_top .sorting select.select { display: inline-block; width: 100%; border: 0; height: 40px; padding-left: 10px; font-size: 14px; color: #999; background-color: transparent; }
  .shoping_list div.list_style { position: absolute; top: 0; right: 0; display: flex; padding-left: 10px; }
  .shoping_list div.list_style:before { display: none; }
  .shoping_list div.list_style a { width: 40px; height: 40px; background-image: url("https://www.pmi-korea.com/resources/image/common/icon_list_style.png"); background-size: 80px 120px; background-position: 0 0; }
  .shoping_list div.list_style a.list { background-position: -40px 0; }
  .shoping_list div.list_style a.album { background-position: 0 0; }
  .shoping_list div.list_style a.list.active { background-position: -40px -80px; }
  .shoping_list div.list_style a.album.active { background-position: 0 -80px; }
  /* 상품 버튼바 (원본 base.css .product_btn) — 카드 하단 빨간바: 수량 / 장바구니 / 바로구매 */
  /* 레드바는 카드 외곽선에 딱 맞아야 함 → li 패딩(좌우10·하단15)을 negative margin으로 상쇄 */
  .shoping_list .product_list > li .product_btn { position: static; margin: 12px -10px -15px -10px; width: auto; height: 40px; overflow: hidden; text-align: center; z-index: 2; background-color: #cd1619; display: flex; flex-wrap: wrap; opacity: 1; visibility: visible; transform: none; flex-shrink: 0; }
  .shoping_list .product_list > li .product_btn > li { position: relative; width: 25%; margin-right: 0; padding: 0; display: block; height: 40px; }
  .shoping_list .product_list > li .product_btn > li:nth-child(1) { width: 50%; }
  .shoping_list .product_list > li .product_btn > li:nth-child(2):before { position: absolute; top: 15px; right: -1px; width: 1px; height: 10px; background-color: #FFF; content: ""; }
  .shoping_list .product_list > li .product_btn > li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0; }
  /* 장바구니/바로구매 아이콘 스프라이트 (icon_shopping_list.png 180x90 → 60x30 표시, i=30x30) */
  .shoping_list .product_btn > li > a > i { display: inline-block; width: 30px; height: 30px; background-image: url("https://www.pmi-korea.com/resources/image/mobile/kr/icon_shopping_list.png"); background-repeat: no-repeat; background-size: 60px 30px; overflow: hidden; text-indent: -9999px; vertical-align: middle; border-radius: 10px; }
  .shoping_list .product_btn > li > a > i.icon_cart { background-position: 0 0; }
  .shoping_list .product_btn > li > a > i.icon_order { background-position: -30px 0; }
  /* 수량조절 goods_count (원본 base.css .product_btn .goods_count) */
  .shoping_list .product_list > li .product_btn .goods_count { display: flex; width: 100%; height: 40px; border: 1px solid #cd1619; border-radius: 0; }
  .shoping_list .product_list > li .product_btn .goods_count a, .shoping_list .product_list > li .product_btn .goods_count input { width: 33.3%; height: 38px; background-color: #FFF; border: 0; float: none; }
  .shoping_list .product_list > li .product_btn .goods_count input { color: #cd1619; text-align: center; -moz-appearance: textfield; }
  .shoping_list .product_list > li .product_btn .goods_count a { position: relative; }
  .shoping_list .product_list > li .product_btn .goods_count a:before, .shoping_list .product_list > li .product_btn .goods_count a:after { position: absolute; background-color: #cd1619; content: ""; }
  .shoping_list .product_list > li .product_btn .goods_count a:before { top: 19px; left: 50%; transform: translateX(-50%); width: 9px; height: 1px; }
  .shoping_list .product_list > li .product_btn .goods_count a:after { top: 15px; left: 50%; transform: translateX(-50%); width: 1px; height: 9px; }
  .shoping_list .product_list > li .product_btn .goods_count a:first-child:after { display: none; }
}

/* 데스크탑 상단바: 프로모션 pill 숨김 (> 직접자식만 → 사이드메뉴 gnb_total 내 promotion 제외) */
.gnb_header .gnb_box .gnb_menu > a.promotion_btn { display: none; }

/* ==========================================================================
   모바일 GNB 사이드메뉴(gnb_total) — 원본 mobile base.css 정본 이식
   (구 .total_menu 규칙은 새 nav>ul.menuNN 마크업에 매칭 안 되어 무시됨)
   ========================================================================== */
@media only screen and (max-width: 768px) {
  /* 상단바: 장바구니 수량 뱃지 + 프로모션 pill */
  .gnb_header .gnb_box .gnb_menu a.cart_btn span { display: block !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; font-size: 11px; color: #222; line-height: 18px; font-weight: 500; text-align: center; z-index: 4; }
  .gnb_header .gnb_box .gnb_menu > a.promotion_btn { display: inline-block !important; float: left; width: auto; padding: 0 10px; height: 28px; font-size: 12px; line-height: 28px; color: #FFF; background-color: #222; border-radius: 15px; margin-top: 18px; margin-right: 5px; }

  /* 모바일: 햄버거·사이드메뉴 표시 (데스크탑 숨김 !important 덮기) */
  .gnb_header .gnb_box .gnb_menu a.total_btn { display: flex !important; }
  /* 사이드메뉴 컨테이너: 우측에서 슬라이드 인, 흰 풀스크린 */
  /* 닫힘: transform으로 화면 밖 (right:-100%는 문서폭을 늘려 모바일 가로스크롤 유발 → translateX) */
  .gnb_header .gnb_total { display: block !important; opacity: 0; position: fixed; right: 0; left: auto; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 100; visibility: hidden; transform: translateX(100%); transition: all 0.3s ease-in-out; padding-top: 144px; box-sizing: border-box; }
  .gnb_header .gnb_total.active { opacity: 1; z-index: 100; visibility: visible; right: 0; transform: translateX(0); }

  /* 닫기(X) + 로고 */
  .gnb_header .gnb_total .close_box { position: absolute; left: 50%; top: 0; width: 100%; max-width: none; transform: translateX(-50%); padding: 0; background: none; border: 0; }
  .gnb_header .gnb_total .close_box .close_btn { position: absolute; top: 12px; right: 8px; left: auto; width: 42px; height: 40px; background-image: url("https://www.pmi-korea.com/resources/image/common/icon_pop_close02.png"); background-repeat: no-repeat; background-size: 40px; background-position: 0 0; }
  .gnb_header .gnb_total .close_box::before { position: absolute; left: 10px; top: 7px; width: 50px; height: 50px; background-image: url("https://www.pmi-korea.com/resources/image/common/logo.svg"); background-size: 50px; background-repeat: no-repeat; content: ""; }

  /* 로그인 상태 정보 (row-reverse: 우측부터 버튼) */
  .gnb_header .gnb_total .menu_info { position: absolute; left: 0; right: 0; top: 64px; display: flex; flex-direction: row-reverse; justify-content: flex-start; background-color: #F4F4F4; padding: 20px 15px; }
  .gnb_header .gnb_total .menu_info p { position: absolute; left: 15px; top: 20px; width: calc(100% - 30px); font-size: 16px; line-height: 30px; color: #222; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 1; padding: 3px 0; padding-right: 200px; text-align: left; box-sizing: border-box; }
  /* 원본 정본(base.css:144): padding 없음, height36/line36/margin-left16. 데스크탑 .gnb_menu a.join_btn{padding:0 10px}이 새는 것 차단 */
  .gnb_header .gnb_total .menu_info a.join_btn, .gnb_header .gnb_total .menu_info a.login_btn, .gnb_header .gnb_total .menu_info a.logout_btn, .gnb_header .gnb_total .menu_info a.cs_btn { display: inline-block !important; position: relative; width: auto; height: 36px; padding: 0 !important; font-size: 14px; text-align: center; line-height: 36px; z-index: 2; margin-left: 12px; color: #222; }
  .gnb_header .gnb_total .menu_info a.cs_btn { margin-left: 0 !important; }
  /* 구분선(|) — 중복/충돌 규칙(base.css:50 -5px, 2303 cs -2px, 이전 -8px)을 !important로 통합·덮기. 간격 12px의 중앙 = -6 */
  .gnb_header .gnb_total .menu_info a::before { position: absolute; top: 12px; right: -6px !important; left: auto !important; width: 1px; height: 14px; background-color: #999; content: ""; margin: 0 !important; }
  .gnb_header .gnb_total .menu_info a:first-of-type::before { display: none; }

  /* nav */
  .gnb_header .gnb_total nav { width: 100%; height: 100%; overflow-y: scroll; padding: 15px 24px 30px; box-sizing: border-box; }
  .gnb_header .gnb_total nav > .promotion_btn { text-align: right; margin-bottom: 10px; }
  .gnb_header .gnb_total nav > .promotion_btn a.promotion_btn { display: inline-block; width: auto; font-size: 15px; color: #FFF; background-color: #222; border-radius: 20px; padding: 0 12px; line-height: 36px; font-weight: 400; }
  .gnb_header .gnb_total nav > ul { margin-bottom: 30px; }
  .gnb_header .gnb_total nav > ul > li { position: relative; width: 50%; max-width: 180px; float: none; }
  .gnb_header .gnb_total nav > ul li > a { position: relative; display: block; width: 100%; font-size: 17px; line-height: 40px; color: #222; font-weight: 500; }
  .gnb_header .gnb_total nav > ul > li.active > a { color: #004687; }
  .gnb_header .gnb_total nav > ul > li:first-child a { font-size: 20px; color: #004687; }
  .gnb_header .gnb_total nav > ul > li > div { opacity: 0; position: absolute; top: 0; right: -100%; width: 100%; height: auto; z-index: -11; transform: translateY(30px); overflow: hidden; visibility: hidden; }
  .gnb_header .gnb_total.active nav > ul > li.active > div.active { opacity: 1; position: absolute; top: 0; right: -100%; z-index: 1; transform: translateY(0); visibility: visible; transition: all 0.3s ease-in-out; padding-bottom: 30px; }
  .gnb_header .gnb_total nav > ul > li > div a { display: block; width: 100%; font-size: 16px; line-height: 20px; color: #888; font-weight: 400; padding: 10px 0; text-align: left; }

  /* SHOP 이미지 원형 그리드 (menu01) */
  .gnb_header .gnb_total nav > ul.menu01 { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 30px; }
  .gnb_header .gnb_total nav > ul.menu01 > li:first-child { width: 100%; max-width: 100%; margin-bottom: 10px; }
  .gnb_header .gnb_total nav > ul > li > a { text-align: left; }
  .gnb_header .gnb_total nav > ul.menu01 > li { width: 30%; max-width: 100%; }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(n+2) a { text-align: center; margin-bottom: 20px; font-size: 15px; font-weight: 400; color: #222; }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(n+2) a::before { position: relative; display: block; width: 100%; height: 27.5vw; content: ""; background-size: 65%; background-position: center center; background-color: #eff6fc; background-repeat: no-repeat; border-radius: 50%; margin-bottom: 8px; }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(2) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_1.png"); }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(3) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_6.png"); }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(4) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_2.png"); }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(5) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_3.png"); }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(6) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_4.png"); }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(7) a::before { background-image: url("https://www.pmi-korea.com/resources/image/common/menu_img_1_5.png"); }
  /* menu05(PM OFFICE 섹션 헤딩)는 원본 데스크탑 전체메뉴 전용 — 모바일 사이드메뉴엔 없음 */
  .gnb_header .gnb_total nav > ul.menu05 { display: none; }
  .gnb_header .gnb_total nav > ul.menu04 { margin-bottom: 80px; }
  .gnb_header .gnb_total nav > ul.menu04 > li:last-child { width: 100%; max-width: 100%; text-align: left; }
  .gnb_header .gnb_total nav > ul.menu04 .btn { display: inline-block; width: auto; height: 44px; padding: 0 20px; margin-top: 10px; line-height: 44px; color: #fff; font-size: 17px; font-weight: 500; text-align: center; background-color: #222; border-radius: 22px; }
}

/* 데스크탑 상품명: base.css의 2줄(min/max 60px) 고정을 3줄까지 허용해 잘림 완화 (모바일은 @media(768)에서 auto) */
@media only screen and (min-width: 769px) {
  .shoping_list .product_list > li h2 { min-height: 90px; max-height: none; -webkit-line-clamp: unset; overflow: visible; display: block; }
  /* 레드박스(주문 UI): 유동 카드라 이미지 높이 가변 → top 고정 대신 카드 하단(bottom:0) 기준 */
  .shoping_list .product_list > li { padding-bottom: 50px; }
  .shoping_list .product_list > li .product_btn { top: auto; bottom: 0; left: 0; width: 100%; }
  .shoping_list .product_list > li.active .product_btn { transform: none; }
}

/* ==========================================================================
   데스크탑 GNB 사이드메뉴(gnb_total) — 원본 pmiV1 데스크탑(검정 반투명 풀스크린 +
   가운데 다단) 재현. 원본 .total_menu>li 마크업을 내 nav>ul.menuNN 셀렉터로 매핑.
   모바일(<=768)은 별도 @media에서 완성 — 건드리지 않음.
   ========================================================================== */
@media only screen and (min-width: 769px) {
  /* 검정 반투명 풀스크린 (모바일 흰배경/우측슬라이드/padding144 리셋) */
  .gnb_header .gnb_total {
    display: block; opacity: 0; visibility: hidden;
    position: fixed; left: 0; right: auto; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    padding: 0; box-sizing: border-box;
    z-index: 100; transition: all 0.3s ease-in-out;
  }
  .gnb_header .gnb_total.active { opacity: 1; visibility: visible; z-index: 100; }

  /* 닫기(X) + 좌상단 흰 로고 (가운데 정렬 max1600/min1280) */
  .gnb_header .gnb_total .close_box {
    position: absolute; left: 50%; top: 0;
    width: 100%; max-width: 1600px; min-width: 0;
    transform: translateX(-50%); padding: 0 60px; box-sizing: border-box; background: none; border: 0;
  }
  .gnb_header .gnb_total .close_box .close_btn {
    position: absolute; top: 45px; right: 60px; left: auto;
    width: 50px; height: 50px;
    background-image: url("https://www.pmi-korea.com/resources/image/common/icon_pop_close01.png");
    background-repeat: no-repeat; background-size: auto; background-position: 0 0;
    opacity: 0; transform: rotate(45deg); transition: all 0.3s ease-in-out;
  }
  .gnb_header .gnb_total.active .close_box .close_btn { opacity: 1; transform: rotate(0deg); }
  .gnb_header .gnb_total .close_box::before {
    position: absolute; left: 60px; top: 25px; width: 85px; height: 85px;
    background-image: url("https://www.pmi-korea.com/resources/image/common/logo_new_w.png");
    background-size: 85px; background-repeat: no-repeat; content: "";
  }
  /* 1600 박스가 화면 안에 여유 있게 들어가는 폭부터는 원본과 동일하게 padding 0
     (로고 = 1600 박스 좌단, X = 우단 -5px). 좁은 데스크탑에선 위 60px 여백 유지 */
  @media only screen and (min-width: 1660px) {
    .gnb_header .gnb_total .close_box { padding: 0; }
    .gnb_header .gnb_total .close_box .close_btn { right: -5px; }
    .gnb_header .gnb_total .close_box::before { left: 0; }
  }

  /* 데스크탑 전체메뉴엔 로그인바 없음 */
  .gnb_header .gnb_total .menu_info { display: none; }

  /* nav = total_menu : 화면 정중앙 다단 컨테이너.
     원본 .total_menu 는 absolute + width 미지정(shrink-to-fit) + min1280/max1600 + padding 0 이라
     '내용폭 블록이 화면 중앙 정렬'로 놓인다. width:100%+padding 이면 좌측 정렬이 되어 원본과 어긋난다. */
  .gnb_header .gnb_total nav {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: max-content; max-width: 100%; min-width: 0;
    height: auto; overflow: visible; padding: 0 60px; box-sizing: border-box; text-align: left;
  }
  /* 원본 min-width:1280 / padding 0 은 1280 이 여유 있게 들어가는 폭부터 적용.
     그 아래 좁은 데스크탑에선 가로 오버플로·화면끝 붙음 방지로 60px 여백 유지 */
  @media only screen and (min-width: 1400px) {
    .gnb_header .gnb_total nav { min-width: 1280px; max-width: 1600px; padding: 0; }
  }

  /* PROMOTION — 원본 데스크탑 전체메뉴엔 없음 → 숨김 */
  .gnb_header .gnb_total nav > .promotion_btn { display: none; }

  /* 대분류 섹션(ul.menuNN) — 세로 스택, 내부 그룹 float 감쌈 */
  .gnb_header .gnb_total nav > ul {
    display: block; width: 100%; float: none; clear: both;
    margin: 0 0 40px 0; padding: 0; overflow: hidden; list-style: none;
  }
  /* 하위그룹(li) — 컬럼 가로배치 */
  .gnb_header .gnb_total nav > ul > li {
    position: static; float: left; clear: none; width: auto; max-width: none;
    margin: 0; padding-right: 40px; list-style: none;
  }
  /* 대메뉴(li:first-child>a) — 21px 파랑, 전폭 블록 */
  .gnb_header .gnb_total nav > ul > li:first-child { float: none; clear: both; width: 100%; padding: 0; }
  .gnb_header .gnb_total nav > ul > li:first-child > a {
    display: block; width: 100%; text-align: left; padding: 0;
    font-size: 21px; line-height: 30px; margin-bottom: 20px; color: #1f93ff; font-weight: 300;
  }
  /* 그룹제목(li>a = 원본 h3) — 16px 흰 */
  .gnb_header .gnb_total nav > ul > li > a {
    display: block; width: auto; text-align: left; padding: 0; margin: 0;
    font-size: 16px; line-height: 30px; color: #FFF; font-weight: 400;
  }
  /* 아코디언 해제 — 데스크탑선 항상 펼침 */
  .gnb_header .gnb_total nav > ul > li > div {
    position: static; opacity: 1; visibility: visible; transform: none;
    height: auto; width: auto; top: auto; right: auto; left: auto; z-index: auto;
    overflow: visible; padding: 0;
  }
  /* 링크(li>div>a) — 14px 회색, hover 흰 */
  .gnb_header .gnb_total nav > ul > li > div > a {
    display: block; width: auto; text-align: left; padding: 0;
    font-size: 14px; line-height: 30px; color: #aaa; font-weight: 400;
  }
  .gnb_header .gnb_total nav > ul > li > div > a:hover { color: #FFF; }

  /* SHOP(menu01): 모바일 원형이미지그리드 해제 → 데스크탑 텍스트 링크 (first-child 대메뉴 제외) */
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(n+2) > a {
    display: block; text-align: left; padding: 0;
    font-size: 14px; line-height: 30px; color: #aaa; font-weight: 400;
  }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(n+2) > a:hover { color: #FFF; }
  .gnb_header .gnb_total nav > ul.menu01 > li:nth-child(n+2) > a::before { display: none; content: none; }

  /* PM OFFICE 알약 — 원본 munu04 마지막 li 의 a.btn.btn-full.btn-grey 실측 재현
     (display:block / w:auto / h40 / lh38 / 16px 400 / #FFF on #888 / 1px #888 / radius 35 / pad 0 20). */
  .gnb_header .gnb_total nav > ul.menu04 li a.btn {
    display: block; float: none; width: auto;
    padding: 0 20px; height: 40px; line-height: 38px; margin: 0;
    font-size: 16px; color: #FFF; font-weight: 400; text-align: center;
    background-color: #888; border: 1px solid #888; border-radius: 35px;
    box-sizing: border-box;
  }
  .gnb_header .gnb_total nav > ul.menu04 li a.btn:hover {
    background-color: #777; border-color: #777; color: #FFF;
  }
  /* 비로그인 데스크탑 — 원본엔 munu04(MY BIZ) 자체가 없다. 알약만 남는 것 방지 */
  .gnb_header .gnb_total.guest nav > ul.menu04 { display: none; }
}
/* 세로 짧은 화면: 세로중앙 대신 top 고정 + 세로 스크롤 */
@media only screen and (min-width: 769px) and (max-height: 1075px) {
  .gnb_header .gnb_total { overflow-y: auto; }
  .gnb_header .gnb_total nav { top: 120px; transform: translate(-50%, 0%); }
}

/* ==========================================================================
   데스크탑 shop 상품목록 유동화 — base.css의 1600px 고정폭이 1440 등에서 우측
   잘림 유발(sub_content overflow:hidden). 1201px↑에서 max-width:1600 + 유동 4열.
   (태블릿 1200↓은 기존 반응형 유지)
   ========================================================================== */
@media only screen and (min-width: 1201px) {
  /* 1600 고정폭 → 유동(max 1600, 가운데) */
  .sub_content.shoping_list .sub_title,
  .sub_content.shoping_list .content_box,
  .sub_content.shoping_list .content_top {
    width: 100%; max-width: 1600px; min-width: 0;
    margin-left: auto; margin-right: auto; box-sizing: border-box;
  }
  .sub_content.shoping_list .content_box { padding-left: 60px; padding-right: 60px; }
  /* 상품 유동 4열 (base.css li 370px 고정 → calc, gutter 40). 앨범형만 — 리스트형(.list)은 base 가로배치 유지 */
  .shoping_list .product_list.album > li {
    width: calc((100% - 120px) / 4) !important; margin-right: 40px !important;
    box-sizing: border-box;
  }
  .shoping_list .product_list.album > li:nth-child(4n) { margin-right: 0 !important; }
  /* 이미지 유동 정사각 (base.css 290px 고정 해제) */
  .shoping_list .product_list.album > li > .product_img {
    width: 100%; height: auto; aspect-ratio: 1 / 1;
  }
  .shoping_list .product_list.album > li > .product_img img {
    width: 100%; height: 100%; object-fit: contain;
  }
  /* 레드박스(hover 주문 UI) 하단을 이미지 하단에 맞춤 — 유동 이미지 높이를 li폭으로 계산.
     top = padding40 + 제목129 + 이미지높이 - 레드박스50. 이미지높이 = li폭 - li패딩80.
     li폭 = (min(100vw,1600)-240)/4 → top = 39 + (min(100vw,1600)-240)/4 */
  .shoping_list .product_list.album > li .product_btn {
    top: calc(39px + (min(100vw, 1600px) - 240px) / 4);
    bottom: auto;
  }
  /* 데스크탑 +/- 기호: base.css 고정값(left 15/19)이라 버튼 중앙보다 우측 → 중앙 정렬(태블릿/모바일과 동일) */
  .shoping_list .product_list.album > li .product_btn .goods_count a:before,
  .shoping_list .product_list.album > li .product_btn .goods_count a:after {
    left: 50%; transform: translateX(-50%);
  }
}

/* 태블릿(769~1200) 히어로: 데스크탑 1600px 고정폭·540px 고정높이가 뷰포트 넘침 →
   폭 유동(max 1600) + 높이는 배경이미지 비율 자동(aspect-ratio) + 텍스트 축소 */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .sub_content.shoping_list .sub_title {
    width: 100%; max-width: 1600px; min-width: 0; box-sizing: border-box;
    height: auto; min-height: 0; aspect-ratio: 1756 / 588;
    background-size: cover; background-position: center;
    padding: 40px; margin: 0 auto 40px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .sub_content.shoping_list .sub_title h2 { font-size: 42px; line-height: 48px; margin-bottom: 12px; }
  .sub_content.shoping_list .sub_title p { font-size: 16px; line-height: 24px; }
}

/* ==========================================================================
   데스크탑 GNB 스크롤 시 얇게 (flow=scrollY>10). hover 드롭다운은 크기 유지, 위치만 따라감.
   (태블릿 769↓은 main_menu 숨김+햄버거라 무관 → 1201px↑만)
   ========================================================================== */
@media only screen and (min-width: 1201px) {
  .gnb_header .gnb_box { transition: height 0.3s ease-in-out; }
  .gnb_header .main_menu, .gnb_header .main_menu > li > a { transition: all 0.3s ease-in-out; }
  .gnb_header { transition: background-color 0.3s ease-in-out, height 0.3s ease-in-out; }

  /* 스크롤 중(flow): 반투명+블러. hover(active)나 최상단(비flow)에선 100% 불투명 */
  .gnb_header.flow { background-color: rgba(255,255,255,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .gnb_header.flow:hover, .gnb_header.flow.active { background-color: rgba(255,255,255,1); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .gnb_header.flow .gnb_box { height: 80px; }
  .gnb_header.flow .gnb_box .logo { top: 15px; width: 50px; height: 50px; background-size: 50px; }
  .gnb_header.flow .gnb_box .gnb_menu { top: 20px; }
  .gnb_header.flow .main_menu { margin-top: -80px; }
  .gnb_header.flow .main_menu > li > a { line-height: 80px; }
  /* 드롭다운은 얇아진 GNB 바로 아래로 위치만 이동 (내부 크기는 그대로) */
  .gnb_header.flow .main_menu > li > div { top: 80px; }
  /* PROMOTION pill: flow 시 line-height 80이 글씨에도 적용돼 pill 밖으로 내려감 → line-height 40 유지 + 세로중앙 */
  .gnb_header.flow .main_menu > li > a.promotion_btn { line-height: 40px; vertical-align: middle; }
  .gnb_header.flow .main_menu > li { vertical-align: middle; }
  /* hover 밑줄: base bottom 45는 line-height 140 기준 → flow(80)에선 글씨 위로 뜸 → bottom 축소 */
  .gnb_header.flow .main_menu > li > a:before { bottom: 26px; }
}

/* 태블릿(769~1200) hover 드롭다운: 데스크탑 값 상속으로 큼 → 폰트/간격/여백/이미지 축소 */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .main_menu > li > div > ul { gap: 40px; padding: 16px 40px 24px; }
  .main_menu > li > div > ul > li h3 { font-size: 15px; line-height: 26px; margin-bottom: 4px; }
  .main_menu > li > div > ul > li > a { font-size: 13px; line-height: 28px; }
  /* SHOP 이미지 그리드 아이콘/라벨 축소 */
  .main_menu > li.munu01 > div > ul > li a { font-size: 14px; }
  .main_menu > li.munu01 > div > ul > li a:before { width: 84px; height: 84px; background-size: 52px; }
  /* SHOP 그리드 상하 여백 축소 (base li padding 10/40 + ul padding 겹침) */
  .main_menu > li.munu01 > div > ul { padding-top: 12px; padding-bottom: 14px; }
  .main_menu > li.munu01 > div > ul > li { padding-top: 6px; padding-bottom: 8px; }
}

/* ==========================================================================
   웹(데스크탑 1201↑) 리스트뷰 — 우리 base.css .list가 구버전이라 원본과 다름.
   원본 pmiV1 front base.css(.product_list.list, 923~949) 정본 이식.
   이미지 300px 왼쪽 절대배치 + 레드박스 left:380 bottom:30 width:320.
   ========================================================================== */
@media only screen and (min-width: 1201px) {
  .shoping_list .product_list.list > li {
    display: flex; flex-wrap: wrap; align-items: center; position: relative;
    width: 100%; min-height: 320px; margin-bottom: 30px; margin-right: 0;
    padding: 30px 50px 30px 380px; box-sizing: border-box;
  }
  .shoping_list .product_list.list > li > div:nth-of-type(1) { width: 60%; }
  .shoping_list .product_list.list > li > div { width: 40%; }
  /* 이미지: 왼쪽 300px 절대배치 (album의 aspect-ratio 무관) */
  .shoping_list .product_list.list > li > .product_img {
    position: absolute; width: 300px; height: 300px; top: 50%; left: 20px;
    transform: translateY(-50%); aspect-ratio: auto; margin: 0;
  }
  .shoping_list .product_list.list > li > .product_img img { width: 300px; height: 300px; object-fit: contain; }
  .shoping_list .product_list.list > li > div > span.flag { position: relative; right: auto; top: auto; margin-bottom: 20px; }
  .shoping_list .product_list.list > li h3 { width: auto; font-size: 18px; margin-bottom: 10px; white-space: normal; }
  .shoping_list .product_list.list > li h2 { min-height: auto; max-height: 80px; height: auto; font-size: 30px; line-height: 40px; -webkit-line-clamp: 2; }
  .shoping_list .product_list.list .product_pay_text p { font-size: 20px; line-height: 40px; padding-left: 130px; white-space: nowrap; }
  .shoping_list .product_list.list .product_pay_text p::before { font-size: 18px; line-height: 40px; }
  .shoping_list .product_list.list .product_pay_text p.pay, .shoping_list .product_list.list .product_pay_text p.team { font-size: 30px; font-weight: 500; }
  /* 레드박스: 이미지 오른쪽 하단, 짧게(원본 940: width 320 고정) */
  .shoping_list .product_list.list > li .product_btn {
    top: auto; bottom: 30px; left: 380px; right: auto; width: 320px; height: 50px;
  }
  .shoping_list .product_list.list > li .product_btn > li { width: 30%; }
  .shoping_list .product_list.list > li .product_btn > li:nth-child(1) { width: 40%; }
  .shoping_list .product_list.list > li .product_btn .goods_count { border: 0; }
  /* 웹 리스트 hover: 회색배경+흰글자 제거(레드박스는 hover로 계속 표시) */
  .shoping_list .product_list.list > li.active::before,
  .shoping_list .product_list.list > li:hover::before { display: none !important; }
  .shoping_list .product_list.list > li.active h2, .shoping_list .product_list.list > li:hover h2 { color: #222 !important; }
  .shoping_list .product_list.list > li.active h3, .shoping_list .product_list.list > li:hover h3 { color: #cd1619 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p, .shoping_list .product_list.list > li:hover .product_pay_text p { color: #888 !important; }
  /* 가격 라벨(권장소비자가/팀파트너가 = p::before)도 원복 — hover시 흰색 방지 */
  .shoping_list .product_list.list > li.active .product_pay_text p::before, .shoping_list .product_list.list > li:hover .product_pay_text p::before { color: #888 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.pay, .shoping_list .product_list.list > li:hover .product_pay_text p.pay { color: #222 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.team, .shoping_list .product_list.list > li:hover .product_pay_text p.team { color: #cd1619 !important; }
}

/* ==========================================================================
   태블릿(769~1200) 리스트뷰 — 원본은 데스크탑(1280+) 전제라 태블릿용 축소 반응형.
   데스크탑 리스트(이미지300/padding380/레드박스320)를 태블릿 크기로.
   ========================================================================== */
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .shoping_list .product_list.list > li {
    display: flex; flex-wrap: wrap; align-items: center; position: relative;
    width: 100% !important; min-height: 240px; margin: 0 0 20px !important;
    padding: 20px 20px 20px 260px !important; box-sizing: border-box;
  }
  .shoping_list .product_list.list > li > div:nth-of-type(1) { width: 60%; }
  .shoping_list .product_list.list > li > div { width: 40%; }
  /* 이미지 220px 왼쪽 절대배치 (album aspect-ratio 무효화) */
  .shoping_list .product_list.list > li > .product_img {
    position: absolute; width: 220px !important; height: 220px !important; top: 50%; left: 20px;
    transform: translateY(-50%); aspect-ratio: auto; margin: 0;
  }
  .shoping_list .product_list.list > li > .product_img img { width: 220px; height: 220px; object-fit: contain; }
  .shoping_list .product_list.list > li > div > span.flag { position: relative; right: auto; top: auto; margin-bottom: 12px; }
  .shoping_list .product_list.list > li h3 { width: auto; font-size: 15px; line-height: 22px; margin-bottom: 6px; color: #cd1619; white-space: normal; overflow: visible; }
  .shoping_list .product_list.list > li h2 { min-height: auto; max-height: 64px; height: auto; font-size: 22px; line-height: 30px; }
  /* 권장소비자가~가격 간격 축소(90) + 가격 줄바꿈 방지(nowrap) */
  .shoping_list .product_list.list .product_pay_text p { font-size: 15px; line-height: 28px; padding-left: 88px; white-space: nowrap; }
  .shoping_list .product_list.list .product_pay_text p::before { font-size: 13px; line-height: 28px; }
  .shoping_list .product_list.list .product_pay_text p.pay, .shoping_list .product_list.list .product_pay_text p.team { font-size: 22px; font-weight: 500; }
  /* 레드박스: 이미지 오른쪽 하단, 짧게 */
  .shoping_list .product_list.list > li .product_btn {
    top: auto !important; bottom: 20px; left: 260px; right: auto; width: 260px !important; height: 44px; margin: 0;
  }
  .shoping_list .product_list.list > li .product_btn > li { width: 30%; height: 44px; }
  .shoping_list .product_list.list > li .product_btn > li:nth-child(1) { width: 40%; }
  .shoping_list .product_list.list > li .product_btn .goods_count { border: 0; height: 44px; }
  /* 아이콘 버튼(장바구니/바로구매) 중앙 정렬 */
  .shoping_list .product_list.list > li .product_btn > li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0; }
  /* 태블릿: hover 없이 레드박스 항상 표시 + hover 회색배경(active) 제거 */
  .shoping_list .product_list.list > li .product_btn { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .shoping_list .product_list.list > li.active::before { display: none !important; }
  .shoping_list .product_list.list > li.active h2 { color: #222 !important; }
  .shoping_list .product_list.list > li.active h3 { color: #cd1619 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p { color: #888 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.pay { color: #222 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.team { color: #cd1619 !important; }
}

/* ==========================================================================
   태블릿·모바일(≤1200) hover 효과 완전 제거 — 이미지 확대/보더/회색배경/글자색 변화 없음.
   레드박스는 항상 표시(별도 규칙). 앨범/리스트 공통.
   ========================================================================== */
@media only screen and (max-width: 1200px) {
  .shoping_list .product_list > li.active { border: 0 !important; }
  .shoping_list .product_list > li.active > .product_img img,
  .shoping_list .product_list > li:hover > .product_img img { scale: 1 !important; transform: none !important; }
  /* 리스트뷰 hover 회색배경/흰글자 제거 */
  .shoping_list .product_list.list > li.active::before,
  .shoping_list .product_list.list > li:hover::before { display: none !important; }
  .shoping_list .product_list.list > li.active h2,
  .shoping_list .product_list.list > li:hover h2 { color: #222 !important; }
  .shoping_list .product_list.list > li.active h3,
  .shoping_list .product_list.list > li:hover h3 { color: #cd1619 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p,
  .shoping_list .product_list.list > li:hover .product_pay_text p { color: #888 !important; }
  /* 가격 라벨(권장소비자가 = p::before)도 원복 — hover시 흰색 방지 */
  .shoping_list .product_list.list > li.active .product_pay_text p::before,
  .shoping_list .product_list.list > li:hover .product_pay_text p::before { color: #888 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.pay,
  .shoping_list .product_list.list > li:hover .product_pay_text p.pay { color: #222 !important; }
  .shoping_list .product_list.list > li.active .product_pay_text p.team,
  .shoping_list .product_list.list > li:hover .product_pay_text p.team { color: #cd1619 !important; }
}

/* ==========================================================================
   모바일(≤768) 리스트뷰 — 원본에 전용 CSS 없어 신규 디자인.
   1열, 이미지 100px 왼쪽 + 텍스트 오른쪽 + 레드박스 하단(항상 표시).
   ========================================================================== */
@media only screen and (max-width: 768px) {
  .shoping_list .product_list.list > li {
    display: block; position: relative; float: none;
    width: 100% !important; min-height: 124px; margin: 0 0 15px !important;
    padding: 12px 12px 58px 124px !important; box-sizing: border-box;
    background-color: #F4F4F4;
  }
  .shoping_list .product_list.list > li:nth-child(2n) { margin-right: 0 !important; }
  /* 이미지 100px 왼쪽 절대 (album aspect-ratio 무효화) */
  .shoping_list .product_list.list > li > .product_img {
    position: absolute; width: 100px !important; height: 100px !important; top: 12px; left: 12px;
    transform: none; aspect-ratio: auto; margin: 0; max-height: none;
  }
  .shoping_list .product_list.list > li > .product_img img { width: 100px; height: 100px; object-fit: contain; }
  .shoping_list .product_list.list > li > div { width: 100%; }
  .shoping_list .product_list.list > li > div > span.flag { position: absolute; right: 12px; top: 12px; margin: 0; }
  .shoping_list .product_list.list > li h3 { width: auto; font-size: 12px; line-height: 18px; margin-bottom: 3px; color: #cd1619; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .shoping_list .product_list.list > li h2 { min-height: auto; max-height: none; height: auto; font-size: 15px; line-height: 20px; margin-bottom: 6px; }
  .shoping_list .product_list.list .product_pay_text p { font-size: 12px; line-height: 20px; padding-left: 72px; white-space: nowrap; text-align: left; }
  .shoping_list .product_list.list .product_pay_text p::before { font-size: 11px; line-height: 20px; }
  .shoping_list .product_list.list .product_pay_text p.pay, .shoping_list .product_list.list .product_pay_text p.team { font-size: 15px; font-weight: 500; }
  /* 레드박스: 이미지 오른쪽 영역 하단(전체폭 아님), 항상 표시 */
  .shoping_list .product_list.list > li .product_btn {
    position: absolute; top: auto !important; bottom: 12px; left: 124px; right: 12px; width: auto !important; height: 40px; margin: 0;
    opacity: 1 !important; visibility: visible !important; transform: none !important;
  }
  .shoping_list .product_list.list > li .product_btn > li { width: 25%; height: 40px; }
  .shoping_list .product_list.list > li .product_btn > li:nth-child(1) { width: 50%; }
  .shoping_list .product_list.list > li .product_btn > li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; padding: 0; }
  .shoping_list .product_list.list > li .product_btn .goods_count { border: 0; height: 40px; }
  /* hover 회색배경/색변화 없음(모바일) */
  .shoping_list .product_list.list > li.active::before, .shoping_list .product_list.list > li:hover::before { display: none !important; }
}

/* ============================================================
   장바구니(/shop/cart) 반응형
   원본 base.css 고정폭을 shop(shoping_list)과 동일 브레이크포인트로 유동화.
   base: .sub_content{min-width:1600} .content_box{width:1600}
         .cart_wrap{padding-right:480} .cart_quick{absolute;right:0;width:400}
   ============================================================ */

/* gnb_menu PROMOTION 버튼: 텍스트 폭 확보(base 40px 고정→auto). ≤768은 아이콘 레이아웃이라 제외 */
@media only screen and (min-width: 1201px) {
  .gnb_header .gnb_box .gnb_menu a.promotion_btn { width: auto; padding: 0 10px; font-size: 17px; line-height: 40px; }
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
  .gnb_header .gnb_box .gnb_menu a.promotion_btn { width: auto; }
}
/* 고객서비스 + 상단 promotion pill: 겹침 구간(769~1366)에서 숨김.
   이 구간은 하단 main_menu에 PROMOTION이 있어 기능 손실 없음(고객서비스는 전체메뉴·ABOUT US에) */
@media only screen and (min-width: 769px) and (max-width: 1366px) {
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.promotion_btn { display: none; }
}

/* 1025~1366: 로그인 시 logout이 붙어 promotion과 겹치므로(1280~1310) 텍스트버튼 축소 */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {
  .gnb_header .gnb_box .gnb_menu a.promotion_btn { width: auto; }
  .gnb_header .gnb_box .gnb_menu a.promotion_btn,
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.join_btn,
  .gnb_header .gnb_box .gnb_menu a.login_btn,
  .gnb_header .gnb_box .gnb_menu a.logout_btn { font-size: 14px; padding: 0 8px; }
  .gnb_header .gnb_box .gnb_menu > a { margin-left: 6px; }
}
/* 좁은 구간(769~1024)은 텍스트버튼·간격 추가 축소(900~980 로그인 겹침까지) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .gnb_header .gnb_box .gnb_menu a.promotion_btn,
  .gnb_header .gnb_box .gnb_menu a.cs_btn,
  .gnb_header .gnb_box .gnb_menu a.join_btn,
  .gnb_header .gnb_box .gnb_menu a.login_btn,
  .gnb_header .gnb_box .gnb_menu a.logout_btn { font-size: 12px; padding: 0 6px; }
  .gnb_header .gnb_box .gnb_menu > a { margin-left: 4px; }
}

/* 타이틀 크기 축소 (base.css 70px → 상품리스트 톤) */
.sub_content.cart .sub_title h2 { font-size: 44px; line-height: 50px; margin-bottom: 16px; }
.sub_content.cart .sub_title p { font-size: 16px; margin-bottom: 16px; }

/* 로그아웃/빈 장바구니(사이드바 없음): 모든 뷰포트에서 flex/사이드바 자리 해제 → no_data 중앙 */
.sub_content.cart .cart_wrap.cart_empty { display: block; padding-right: 0; min-height: 0; }
.sub_content.cart .cart_wrap.cart_empty .cart_list { width: 100%; margin-bottom: 0; }
/* no_data는 상품행이 아니므로 상품행 패딩 리셋 → 텍스트/버튼 중앙 */
.sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data { padding: 115px 20px 40px; text-align: center; min-height: 0; background-size: 70px auto; background-position: center 30px; }
.sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data p { text-align: center; }
.sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data p { margin-bottom: 14px; }
.sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data .btn { display: inline-block; width: auto; min-width: 160px; margin-top: 0; }

/* 전체선택/삭제 헤더: 높이 정상 + 삭제버튼 줄바꿈 방지 */
.sub_content.cart .cart_list > li.top_select { min-height: 60px; }
.sub_content.cart .cart_list > li.top_select > div { white-space: nowrap; }
.sub_content.cart .cart_list > li.top_select a { white-space: nowrap; }

/* 데스크탑 1201↑ : 1600 고정폭 → 유동(max 1600, 좌우 60). 사이드바 자리 유지 */
@media only screen and (min-width: 1201px) {
  .sub_content.cart { min-width: 0; }
  .sub_content.cart .sub_title,
  .sub_content.cart .content_box {
    width: 100%; max-width: 1600px; min-width: 0;
    margin-left: auto; margin-right: auto; box-sizing: border-box;
  }
  .sub_content.cart .content_box { padding-left: 60px; padding-right: 60px; }
}

/* 태블릿 769~1200 : content_box 유동 + cart_wrap 2컬럼(flex) */
@media only screen and (min-width: 1121px) and (max-width: 1200px) {
  .sub_content.cart { min-width: 0; }
  .sub_content.cart .content_box { width: 100%; max-width: none; min-width: 0; padding: 0 20px; box-sizing: border-box; }
  /* sub_title 1600 고정폭 해제 → 뷰포트 기준 중앙정렬(.join text-align:center) */
  .sub_content.cart .sub_title { width: 100%; max-width: none; min-width: 0; padding-right: 0; box-sizing: border-box; }

  .sub_content.cart .cart_wrap { padding-right: 0; display: flex; flex-wrap: wrap; align-items: flex-start; }
  .sub_content.cart .cart_list { width: calc(100% - 360px); margin-bottom: 20px; }
  .sub_content.cart .info_box { width: calc(100% - 360px); }

  /* 상품행 패딩/이미지 축소 */
  .sub_content.cart .cart_list > li:not(.top_select):not(.no_data) { padding: 40px 320px 40px 170px; min-height: 160px; }
  .sub_content.cart .cart_list > li > .product_img,
  .sub_content.cart .cart_list > li > .product_img img { width: 120px; height: 120px; }
  .sub_content.cart .cart_list > li > .product_img { left: 30px; }
  .sub_content.cart .cart_list > li .goods_count { right: 200px; }
  .sub_content.cart .cart_list > li .pay_box { right: 20px; width: 150px; }
  .sub_content.cart .cart_list > li > .text > h2 { font-size: 18px; }
  .sub_content.cart .cart_list > li .pay_box p.pay { font-size: 18px; }

  /* 결제정보: 우측 컬럼(정적 배치, flow 무관) */
  .sub_content.cart .cart_quick { position: relative; top: auto; right: auto; width: 340px; margin-left: 20px; flex-shrink: 0; }
  /* 결제정보 라벨 줄바꿈 방지 */
  .sub_content.cart .cart_quick > ul > li:nth-child(1n) { width: 44%; font-size: 14px; white-space: nowrap; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) { width: 56%; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) > span { font-size: 18px; }
  /* 전체선택 라벨(좌) + 선택/전체삭제(우) 정렬 복구 */
  .sub_content.cart .cart_list > li.top_select { position: relative; text-align: right; }
  .sub_content.cart .cart_list > li.top_select > .check_box + label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .sub_content.cart .cart_list > li.top_select > div { display: inline-block; }
}

/* 모바일 ≤768 : 1열 풀폭, 상품행 모바일 배치, 결제정보 하단 정적 */
@media only screen and (max-width: 768px) {
  .sub_content.cart { min-width: 0; padding-top: 40px; }
  .sub_content.cart .content_box { width: 100%; max-width: none; min-width: 0; padding: 0 15px; box-sizing: border-box; }
  /* sub_title 1600 고정폭 해제 → 뷰포트 기준 중앙정렬 */
  .sub_content.cart .sub_title { width: 100%; max-width: none; min-width: 0; padding-right: 0; box-sizing: border-box; }

  .sub_content.cart .cart_wrap { padding-right: 0; min-height: 0; }
  .sub_content.cart .cart_list { width: 100%; margin-bottom: 20px; }

  /* 전체선택 헤더 */
  .sub_content.cart .cart_list > li.top_select { min-height: 0; padding: 14px 0; display: flex; align-items: center; gap: 6px; }
  .sub_content.cart .cart_list > li.top_select > .check_box { flex: 0 0 auto; }
  .sub_content.cart .cart_list > li.top_select > .check_box + label { position: static; transform: none; flex: 1 1 auto; text-align: left; font-size: 13px; }
  .sub_content.cart .cart_list > li.top_select > div { flex: 0 0 auto; white-space: nowrap; }
  .sub_content.cart .cart_list > li.top_select a { font-size: 12px; padding: 0 8px; }
  .sub_content.cart .sub_title h2 { font-size: 32px; line-height: 36px; }

  /* 상품행: 이미지 왼쪽 100, 정보 우측 흐름 */
  .sub_content.cart .cart_list > li:not(.top_select):not(.no_data) { min-height: 120px; padding: 15px 0 15px 115px; }
  .sub_content.cart .cart_list > li > .check_box + label { left: 0; top: 18px; transform: none; }
  .sub_content.cart .cart_list > li > .product_img { left: 0; top: 15px; width: 100px; height: 100px; transform: none; }
  .sub_content.cart .cart_list > li > .product_img img { width: 100px; height: 100px; }

  /* 수량/가격: 정적 인라인 */
  .sub_content.cart .cart_list > li .goods_count { position: static; transform: none; right: auto; display: inline-flex; margin: 8px 0 6px; }
  .sub_content.cart .cart_list > li .pay_box { position: static; transform: none; right: auto; width: auto; text-align: left; }
  .sub_content.cart .cart_list > li .pay_box p { display: inline-block; margin-right: 8px; }
  .sub_content.cart .cart_list > li .pay_box p.pay { font-size: 18px; }
  .sub_content.cart .cart_list > li > .text > h2 { font-size: 16px; line-height: 20px; }
  .sub_content.cart .cart_list > li a.close { right: 0; top: 12px; }

  /* 결제정보: 정적 하단(슬라이드 토글은 후속) */
  .sub_content.cart .cart_quick { position: static; top: auto; right: auto; width: 100%; margin: 24px 0 20px; padding: 22px 18px; }
  .sub_content.cart .cart_quick > h2 { font-size: 18px; margin-bottom: 14px; }
  .sub_content.cart .cart_quick > ul > li { line-height: 32px; }
  .sub_content.cart .cart_quick > ul > li:nth-child(1n) { width: 42%; font-size: 14px; white-space: nowrap; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) { width: 58%; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) > span { font-size: 18px; }
  .sub_content.cart .cart_quick .total_pay { padding-left: 90px; }
  .sub_content.cart .cart_quick .btn { height: 54px; line-height: 52px; font-size: 16px; }

  .sub_content.cart .info_box { width: 100%; }
  .sub_content.cart .info_box li { float: none; width: 100%; }
  /* 로그아웃/빈 화면: 모바일은 폰트·버튼·말풍선 이미지 축소 */
  .sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data { padding: 90px 15px 36px; font-size: 15px; background-size: 50px auto; background-position: center 22px; }
  .sub_content.cart .cart_wrap.cart_empty .cart_list > li.no_data .btn { min-width: 140px; height: 44px; line-height: 42px; font-size: 14px; }
}

/* 데스크탑 유동 구간 1201~1440: cart_list가 좁아져 원본 상품행(우400/좌220)이
   이름·수량 자리를 잃고 겹치므로, 사이드바·상품행을 폭에 맞게 축소 */
@media only screen and (min-width: 1201px) and (max-width: 1440px) {
  .sub_content.cart .cart_wrap { padding-right: 380px; }
  .sub_content.cart .cart_quick { width: 340px; }
  .sub_content.cart .cart_quick.flow { margin-left: 340px; }

  .sub_content.cart .cart_list > li:not(.top_select):not(.no_data) { padding: 40px 330px 40px 160px; min-height: 160px; }
  .sub_content.cart .cart_list > li > .product_img,
  .sub_content.cart .cart_list > li > .product_img img { width: 110px; height: 110px; }
  .sub_content.cart .cart_list > li > .product_img { left: 30px; }
  .sub_content.cart .cart_list > li .goods_count { right: 190px; }
  .sub_content.cart .cart_list > li .pay_box { right: 20px; width: 150px; }
  .sub_content.cart .cart_list > li > .text > h2 { font-size: 20px; }
  .sub_content.cart .cart_list > li .pay_box p.pay { font-size: 20px; }
  /* 좁은 사이드바(340)에서 '총 적립 포인트' 라벨 줄바꿈 방지 */
  .sub_content.cart .cart_quick > ul > li:nth-child(1n) { width: 44%; font-size: 14px; white-space: nowrap; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) { width: 56%; }
  .sub_content.cart .cart_quick > ul > li:nth-child(2n) > span { font-size: 18px; }
}

/* 좁은 태블릿 769~1024: 사이드바를 하단으로 내려 cart_list 전체폭 → 상품행 찌부러짐 방지 */
@media only screen and (min-width: 769px) and (max-width: 1120px) {
  .sub_content.cart { min-width: 0; }
  .sub_content.cart .content_box { width: 100%; max-width: none; min-width: 0; padding: 0 20px; box-sizing: border-box; }
  .sub_content.cart .sub_title { width: 100%; max-width: none; min-width: 0; padding-right: 0; box-sizing: border-box; }
  .sub_content.cart .cart_wrap { padding-right: 0; }
  .sub_content.cart .cart_list { width: 100%; margin-bottom: 24px; }
  .sub_content.cart .cart_quick { position: static; width: 100%; max-width: none; margin: 0; }
  .sub_content.cart .info_box { width: 100%; }
  .sub_content.cart .cart_list > li:not(.top_select):not(.no_data) { padding: 40px 330px 40px 170px; min-height: 160px; }
  .sub_content.cart .cart_list > li > .product_img,
  .sub_content.cart .cart_list > li > .product_img img { width: 120px; height: 120px; }
  .sub_content.cart .cart_list > li > .product_img { left: 30px; }
  .sub_content.cart .cart_list > li .goods_count { right: 200px; }
  .sub_content.cart .cart_list > li .pay_box { right: 20px; width: 150px; }
}

/* ===== 주문서(주문서작성/결제) 반응형 — 장바구니와 동일 방식 ===== */
/* 전 구간: .sub_content min-width:1600 고정 해제 → 좁은 데스크탑에서 가로 스크롤 방지, content_box 유동 */
.sub_content.order_write { min-width: 0; }
.sub_content.order_write .content_box { width: 100%; max-width: 1600px; min-width: 0; margin: 0 auto; padding: 0 60px; box-sizing: border-box; }
.sub_content.order_write .sub_title { width: 100%; max-width: 1600px; min-width: 0; margin: 0 auto 60px; padding-right: 0; box-sizing: border-box; }
/* 타이틀 크기 장바구니와 동일 (base 70px → 44px) */
.sub_content.order_write .sub_title h2 { font-size: 44px; line-height: 50px; margin-bottom: 16px; }
.sub_content.order_write .sub_title p { font-size: 16px; margin-bottom: 16px; }

/* 중간 데스크탑 1121~1440: 상품리스트가 2단에서 찌부러지므로 결제박스를 하단으로 (GNB 60px 정렬 유지) */
@media only screen and (min-width: 1121px) and (max-width: 1440px) {
  .sub_content.order_write .cart_wrap { padding-right: 0; }
  .sub_content.order_write .cart_list.order { width: 100%; margin-bottom: 24px; }
  .sub_content.order_write .cart_quick { position: static; width: 100%; max-width: none; margin: 0 0 40px; }
  /* 상품행: 전체폭이 되었으니 우측 여백만 소폭 축소해 이름 공간 확보 */
  .sub_content.order_write .cart_list.order > li { padding: 30px 260px 30px 150px; min-height: 130px; }
  .sub_content.order_write .cart_list.order > li .text > h2 { font-size: 20px; }
}

/* 1121~1200: GNB 여백이 60→20px로 줄어드는 구간이므로 컨텐츠도 20px로 맞춤 */
@media only screen and (min-width: 1121px) and (max-width: 1200px) {
  .sub_content.order_write .content_box { padding: 0 20px; }
}

/* 태블릿 769~1120: 결제박스(cart_quick) 2단 해제해 하단으로 */
@media only screen and (min-width: 769px) and (max-width: 1120px) {
  .sub_content.order_write { min-width: 0; }
  .sub_content.order_write .content_box { width: 100%; max-width: none; min-width: 0; padding: 0 20px; box-sizing: border-box; }
  .sub_content.order_write .sub_title { width: 100%; max-width: none; min-width: 0; padding-right: 0; box-sizing: border-box; }
  .sub_content.order_write .cart_wrap { padding-right: 0; }
  .sub_content.order_write .cart_list.order { width: 100%; margin-bottom: 24px; }
  .sub_content.order_write .cart_quick { position: static; width: 100%; max-width: none; margin: 0 0 40px; }
  /* 상품행: base 가로 배치(수량·가격 우측 절대배치) 유지, 폭에 맞춰 여백·폰트만 축소 */
  .sub_content.order_write .cart_list.order > li { padding: 30px 210px 30px 150px; min-height: 130px; }
  .sub_content.order_write .cart_list.order > li .product_img,
  .sub_content.order_write .cart_list.order > li .product_img img { width: 100px; height: 100px; }
  .sub_content.order_write .cart_list.order > li .text > h2 { font-size: 18px; line-height: 24px; }
  .sub_content.order_write .cart_list.order > li .count_text { right: 150px; font-size: 15px; }
  .sub_content.order_write .cart_list.order > li .pay_box { right: 0; width: 140px; }
  .sub_content.order_write .cart_list.order > li .pay_box p.pay { font-size: 18px; }
  /* 주문자정보/배송지/배송메세지: 제목 절대배치 해제 → 세로 스택 */
  .sub_content.order_write .order_info_list,
  .sub_content.order_write .order_form,
  .sub_content.order_write .order_add_text { padding-left: 0; }
  .sub_content.order_write .order_info_list > h2,
  .sub_content.order_write .order_form > h2 { position: static; font-size: 24px; line-height: 32px; margin-bottom: 16px; }
  .sub_content.order_write .order_info_list li { float: none; width: 100%; padding-right: 0; }
  .sub_content.order_write .order_add_list > li { padding-left: 50px; padding-right: 0; }
  .sub_content.order_write .order_add_list > li .order_add_btn { position: static; transform: none; margin-top: 12px; }
}

/* 모바일 max-width 768: 2단 해제 + 제목 절대배치 해제 + 상품행/폼 세로 정리 */
@media only screen and (max-width: 768px) {
  .sub_content.order_write .content_box { width: 100%; max-width: none; min-width: 0; padding: 0 16px; box-sizing: border-box; }
  .sub_content.order_write .sub_title { width: 100%; padding-right: 0; box-sizing: border-box; }
  .sub_content.order_write .sub_title h2 { font-size: 32px; line-height: 36px; }
  .sub_content.order_write .sub_title .line_map { display: none; }

  .sub_content.order_write .cart_wrap { padding-right: 0; }
  .sub_content.order_write .cart_list.order { width: 100%; margin-bottom: 24px; }

  /* 결제정보 박스 하단 정적 */
  .sub_content.order_write .cart_quick { position: static; width: 100%; max-width: none; margin: 24px 0 40px; padding: 22px 18px; box-sizing: border-box; }
  .sub_content.order_write .cart_quick > h2 { font-size: 18px; margin-bottom: 14px; }
  .sub_content.order_write .cart_quick .total_pay { padding-left: 90px; }
  .sub_content.order_write .cart_quick .btn { height: 54px; line-height: 52px; font-size: 16px; }

  /* 주문 상품행: 이미지 왼쪽 고정, 수량·가격은 이미지 오른쪽 아래로 */
  /* 좁은 폭: 이미지 축소(80), 이름 전체폭, 수량·가격은 이름 아래 우측 정렬로 흐름 */
  .sub_content.order_write .cart_list.order > li { min-height: 88px; padding: 16px 0 16px 96px; position: relative; }
  .sub_content.order_write .cart_list.order > li .product_img { left: 0; top: 16px; width: 80px; height: 80px; transform: none; }
  .sub_content.order_write .cart_list.order > li .product_img img { width: 80px; height: 80px; }
  .sub_content.order_write .cart_list.order > li .text > h2 { font-size: 14px; line-height: 19px; }
  .sub_content.order_write .cart_list.order > li .count_text { position: static; display: block; text-align: right; margin: 8px 0 0; font-size: 13px; color: #888; width: auto; transform: none; }
  .sub_content.order_write .cart_list.order > li .pay_box { position: static; text-align: right; margin-top: 2px; width: auto; transform: none; }
  .sub_content.order_write .cart_list.order > li .pay_box p { display: block; text-align: right; margin: 0; }
  .sub_content.order_write .cart_list.order > li .pay_box p.pay { font-size: 16px; }

  /* 주문자정보 / 배송지정보 / 배송메세지: 제목 왼쪽 절대배치(padding-left:320) 해제 → 세로 스택 */
  .sub_content.order_write .order_info_list,
  .sub_content.order_write .order_form,
  .sub_content.order_write .order_add_text { padding-left: 0; }
  .sub_content.order_write .order_info_list > h2,
  .sub_content.order_write .order_form > h2 { position: static; font-size: 22px; line-height: 30px; margin-bottom: 16px; }
  .sub_content.order_write .order_info_list li { float: none; width: 100%; padding-right: 0; }
  .sub_content.order_write .order_info_list li.half { width: 100%; }

  /* 배송지 목록 항목: 좌측 라디오 여백 축소, 수정/삭제 버튼 하단으로 */
  .sub_content.order_write .order_add_list > li { padding-left: 50px; padding-right: 0; }
  .sub_content.order_write .order_add_list > li .order_add_btn { position: static; transform: none; width: 130px; margin-top: 12px; }

  /* 탭 / 신규 배송지 폼 */
  .sub_content.order_write .tab_menu { margin: 30px 0; }
  .sub_content.order_write .tab_menu a { font-size: 16px; }
  .sub_content.order_write .order_add_new .inp-txt.wid_395 { width: 100%; box-sizing: border-box; }
  .sub_content.order_write .post-set li .btn { width: 100%; }
}

/* ============================================================
   FAB/FABB 반응형 — fv-, cb- 선례와 동일하게 override.css 에만 추가.
   스코프는 .sub_content.fab_bonus_list (fab/fabb 두 페이지 전용) —
   기존 페이지(fuel-voucher/car-bonus/withholding/shop) 무영향.
   데스크탑(≥1201) 렌더 불변: 아래 2줄(진입 간격)은 기존 인라인 스타일
   (PageLayout matchOriginalSpacing paddingTop:100/marginTop:60) 을 값 그대로
   이관한 것 — 인라인은 미디어쿼리로 덮을 수 없어 CSS 로 옮김.
   브레이크포인트: 1600(고정폭 해제 경계)/1200/768/600.
   ============================================================ */
.sub_content.fab_bonus_list { padding-top: 100px; }
.sub_content.fab_bonus_list .linemap_menu { margin-top: 60px; }

/* --- ≤1600: 1600px 고정폭 해제(유동화).
   base.css .sub_content 은 overflow:hidden 이라 넘치면 스크롤 없이 잘림 —
   1201~1600 구간(버튼·셀렉트 우측 잘림 실측)이 무방비였던 것을 포함.
   1601px 이상은 원본 고정폭(1600 중앙) 그대로 → 1920 기준값 불변 --- */
@media only screen and (max-width: 1600px) {
  .sub_content.fab_bonus_list { min-width: 0; }
  .sub_content.fab_bonus_list .sub_title {
    width: 100%; max-width: 100%; box-sizing: border-box;
    padding-left: 20px; padding-right: 20px; min-height: 0; margin-bottom: 60px;
  }
  .sub_content.fab_bonus_list .content_box {
    width: 100%; max-width: 100%; box-sizing: border-box; padding: 0 20px;
  }
  .sub_content.fab_bonus_list .content_top { width: 100%; min-height: 0; }
  /* 검색영역: 원본은 column+wrap(1600px 전제)이라 좁은 폭에서 셀렉트 열이
     우측으로 넘침 — absolute 해제 후 row 로 전환(안내문 한 줄 + 셀렉트 한 줄) */
  .fab_bonus_list ul.search_box.self_allowance_type {
    position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-end;
  }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(1) { width: 100%; margin-bottom: 8px; }
  /* bonus_info: 우측 absolute 버튼(300px)과 본문 텍스트 겹침 방지 */
  .fab_bonus_list .bonus_info { padding: 40px; padding-right: 400px; }
}

/* --- ≤1200: benefit_box 지급일 p(absolute right)가 900~1024 부근에서 실지급액
   h2 텍스트와 겹침(글리프 실측) → h2 아래 줄 우측 정렬. 1201~1600 은 겹침 없음
   확인돼 원본 absolute 유지. (≤768 은 모바일 레이아웃이 재정의) --- */
@media only screen and (max-width: 1200px) {
  .fab_bonus_list .benefit_list > li .benefit_box p {
    position: static; text-align: right; margin-top: 4px;
  }
}

/* --- 모바일(≤768): 콘텐츠 세로 스택 + 원본 모바일(mobile.css) 값 이식 --- */
@media only screen and (max-width: 768px) {
  .sub_content.fab_bonus_list { padding-top: 40px; }
  .sub_content.fab_bonus_list .sub_title { padding-left: 15px; padding-right: 15px; margin-bottom: 40px; }
  .sub_content.fab_bonus_list .sub_title h2 { font-size: 34px; line-height: 42px; margin-bottom: 20px; }
  .sub_content.fab_bonus_list .linemap_menu { margin-top: 20px; }
  /* ══ 아래 linemap/브레드크럼 규칙의 "원본" 출처 ══
     https://m.pmi-korea.com/resources/css/mobile/base.css (모바일 정본)
     — www 는 데스크탑 전용(min-width:1600px)이라 모바일 렌더의 기준은 m 도메인이다.
     우리 public/css/base.css 는 www(데스크탑) 정본이라 모바일 값이 아예 없어,
     데스크탑 좌표가 모바일까지 그대로 상속되면서 아래 증상들이 발생했다.

     ── 브레드크럼: 한 줄 고정 ──
     원본 모바일 base.css 666 은 `.line_map li{white-space:nowrap; font-size:13px}`
     인데 우리 base.css(데스크탑 657)에는 nowrap 이 없고 15px 임.
     .line_map 은 display:flex 라 폭이 모자라면 li 가 flex-shrink 로 min-content
     까지 줄어들고, 그 결과 `MY BIZ` 가 `MY`/`BIZ` 2줄로 꺾였음
     (실측 재현: fabb ≤375px, fab ≤320px 에서 li 높이 20px→40px).
     원본 값(nowrap + 13px)을 이식해 한 줄 유지 + 폭도 함께 확보. */
  .fab_bonus_list .sub_title .line_map { margin-bottom: 20px; }
  .fab_bonus_list .sub_title .line_map li { white-space: nowrap; font-size: 13px; }
  .fab_bonus_list .sub_title .line_map li a { font-size: 13px; }

  /* ── linemap 콤보박스: 원본 모바일(base.css 611-631) 값 이식 ──
     직전 구현의 `flex:0 0 auto`(내용폭+중앙정렬)는 원본 해석이 틀렸음.
     원본은 `li{float:left; width:50%}` — 좌우 여백을 뺀 전폭을 50:50 균등분할한다.
     내용폭이면 (a) 라벨 길이에 따라 알약이 들쭉날쭉하고(fabb 는 74px:156px),
     (b) 드롭다운을 열 때 li 가 패널 최대폭(약 202px)까지 부풀어
     justify-content:center 탓에 그룹 전체가 왼쪽으로 48px 밀려 1번 알약을 덮었음. */
  .fab_bonus_list .linemap_menu ul {
    max-width: 500px;   /* 원본 612 */
    gap: 0;             /* 두 알약 맞닿은 캡슐 — 공통 gap:4px 무효화 */
    flex-wrap: nowrap;  /* 공통 flex-wrap:wrap 무효화(반올림 2줄 방지) */
    justify-content: center;
  }
  /* 50:50 균등분할 — 원본 613 `width:50%` 의 flex 대응.
     li 는 base.css 14 에서 box-sizing:border-box → 1px 테두리 포함 정확히 50% */
  .fab_bonus_list .linemap_menu li { flex: 0 0 50%; width: 50%; min-width: 0; }

  /* ── 화살표 아이콘 복구 ──
     base.css 603 의 데스크탑 좌표 `background-position:210px 25px` 가
     모바일까지 그대로 상속됨. 모바일 알약은 폭이 약 180px 이라
     21x7px 아이콘이 상자 밖(x=210)에 그려져 렌더되지 않았던 것.
     (background-image 자체는 공통 규칙 249-261 의 !important 로 정상 지정돼 있었음)
     원본 613/618 의 좌표로 교체 — 열리면 아이콘이 상단에 고정돼야 하므로 22px. */
  .fab_bonus_list .linemap_menu li { background-position: 93% center; }
  .fab_bonus_list .linemap_menu li.active { background-position: 93% 22px; }

  /* 캡슐 radius: 원본 모바일은 25px(데스크탑 30px).
     공통 규칙 248-261 이 !important 라 같은 강도로 맞춤 */
  .fab_bonus_list .linemap_menu li:nth-child(1) { border-radius: 25px 0 0 25px !important; }
  .fab_bonus_list .linemap_menu li:nth-child(1).active { border-radius: 25px 0 0 0 !important; }
  .fab_bonus_list .linemap_menu li:nth-child(1).active > div { border-radius: 0 0 0 25px; }
  .fab_bonus_list .linemap_menu li:nth-child(2) { border-radius: 0 25px 25px 0 !important; }
  .fab_bonus_list .linemap_menu li:nth-child(2).active { border-radius: 0 25px 0 0 !important; }
  .fab_bonus_list .linemap_menu li:nth-child(2).active > div { border-radius: 0 0 25px 25px; }

  /* 알약 라벨 — 원본 614(fs13 / lh50 / h50 / pl20).
     원본은 짧은 라벨 전제라 우측 여백이 없지만 우리는 `33주년 FABB 신청/조회` 가
     있어 화살표(93%) 자리를 padding-right 로 확보. 원본이 height:50px 고정
     (=1줄 전제)이므로 줄바꿈 대신 말줄임이 원본 기하학을 그대로 유지하는 처리.
     padding-left 만 원본 20px → 15px 로 줄인 의도적 이탈이다. 430px 단말에서
     알약 폭이 200px 인데 pl20 이면 긴 라벨이 말줄임에 걸린다(실측). */
  .fab_bonus_list .linemap_menu li > a {
    width: 100%;
    font-size: 13px; line-height: 50px; height: 50px;
    padding-left: 15px; padding-right: 30px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 알약 높이가 50px 로 줄었으므로 흐름에 남길 높이도 맞춘다(50 + 테두리 2px) */
  .fab_bonus_list .linemap_menu { --linemap-pill-h: 52px; }
  /* 드롭다운 패널 — 원본 615. li 폭이 50% 로 고정돼 패널도 자기 알약 아래 정렬된다 */
  .fab_bonus_list .linemap_menu li > div > a {
    width: 100%;
    font-size: 13px; line-height: 36px; height: 36px;
    padding-left: 20px; padding-right: 10px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sub_content.fab_bonus_list .content_box { padding: 0 15px; }

  /* bonus_info: 버튼을 본문 아래 풀폭으로 (375 겹침 해소) */
  .fab_bonus_list .bonus_info { padding: 25px 20px; margin-bottom: 25px; }
  .fab_bonus_list .bonus_info h2 { font-size: 24px; line-height: 32px; }
  .fab_bonus_list .bonus_info p { font-size: 15px; line-height: 24px; }
  .fab_bonus_list .bonus_info .btn-set {
    position: static; transform: none; width: 100%; margin-top: 20px;
  }
  .fab_bonus_list .bonus_info .btn-set .btn { width: 100%; }

  /* 검색영역: absolute 해제 후 세로 흐름, 셀렉트는 2행 배치 */
  .fab_bonus_list .content_top { min-height: 0; margin-bottom: 25px; }
  .fab_bonus_list ul.search_box.self_allowance_type {
    justify-content: flex-start; row-gap: 8px; column-gap: 2%;
  }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(2),
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(5) { width: 38%; border-radius: 25px 0 0 25px; overflow: hidden; }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(3) { width: 30%; border-radius: 0 25px 25px 0; overflow: hidden; }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(6) { width: 30%; border-radius: 0; overflow: hidden; }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(4) { width: 6%; text-align: center; }
  .fab_bonus_list ul.search_box.self_allowance_type li:nth-child(7) { width: 50px; border-radius: 0 25px 25px 0; overflow: hidden; }
  .fab_bonus_list ul.search_box.self_allowance_type li .select { width: 100%; padding-left: 15px; background-position: 90% 50%; }
  .fab_bonus_list ul.search_box.self_allowance_type li span.dot_text { width: auto; }

  /* benefit_list 아코디언: 원본 mobile.css 599-641 값 이식(fab 스코프 한정) */
  .fab_bonus_list .benefit_list > li { padding: 0; margin-bottom: 15px; }
  .fab_bonus_list .benefit_list > li .benefit_box { padding: 75px 15px 15px; }
  .fab_bonus_list .benefit_list > li .benefit_box:before { top: 45px; right: 15px; }
  .fab_bonus_list .benefit_list > li .benefit_box > span {
    left: 115px; top: 40px; width: auto; height: 22px; padding: 0 10px;
    font-size: 11px; line-height: 22px; border-radius: 4px;
  }
  .fab_bonus_list .benefit_list > li .benefit_box h1 { top: 15px; left: 15px; font-size: 14px; line-height: 20px; }
  .fab_bonus_list .benefit_list > li .benefit_box h1 span { font-size: 20px; line-height: 32px; }
  .fab_bonus_list .benefit_list > li .benefit_box h2 { font-size: 17px; line-height: 30px; padding-left: 0; }
  .fab_bonus_list .benefit_list > li .benefit_box h2 span { font-size: 22px; margin: 0 0 0 5px; }
  .fab_bonus_list .benefit_list > li .benefit_box p { position: absolute; top: 15px; left: 115px; right: auto; margin-top: 0; text-align: left; font-size: 14px; line-height: 20px; }
  .fab_bonus_list .benefit_list > li.no_data { padding: 40px 0; }

  .fab_bonus_list .benefit_open { margin-top: 0; }
  .fab_bonus_list .benefit_open ul:nth-child(1),
  .fab_bonus_list .benefit_open ul:nth-child(2) { float: none; width: 100%; margin: 0 0 15px; padding: 0 15px; box-sizing: border-box; }
  .fab_bonus_list .benefit_open ul:nth-child(1) li:last-child { border-bottom: 1px solid #DDD; padding-bottom: 15px; }
  .fab_bonus_list .benefit_open ul:nth-child(1) li h1,
  .fab_bonus_list .benefit_open ul:nth-child(2) li h1 { font-size: 16px; line-height: 30px; padding: 15px 0 10px; margin-bottom: 15px; }
  .fab_bonus_list .benefit_open ul:nth-child(1) li h2,
  .fab_bonus_list .benefit_open ul:nth-child(2) li h2 { font-size: 13px; line-height: 30px; }
  .fab_bonus_list .benefit_open ul:nth-child(1) li p,
  .fab_bonus_list .benefit_open ul:nth-child(2) li p { font-size: 14px; line-height: 30px; }
  .fab_bonus_list .benefit_open ul:nth-child(1) li p span,
  .fab_bonus_list .benefit_open ul:nth-child(2) li p span { font-size: 17px; }
  .fab_bonus_list .benefit_open ul:nth-child(3) { padding: 15px; margin-top: 0; }
  .fab_bonus_list .benefit_open ul:nth-child(3) li { float: none; width: 100%; text-align: right; }
  .fab_bonus_list .benefit_open ul:nth-child(3) li > h2 {
    position: absolute; left: 0; top: 0; font-size: 14px; line-height: 35px; margin-bottom: 0;
  }
  .fab_bonus_list .benefit_open ul:nth-child(3) li > p { font-size: 15px; line-height: 35px; }
  .fab_bonus_list .benefit_open ul:nth-child(3) li > p span { font-size: 18px; }
}

/* --- 소형 모바일(≤600): 타이틀 축소 --- */
@media only screen and (max-width: 600px) {
  .sub_content.fab_bonus_list .sub_title h2 { font-size: 28px; line-height: 36px; }
}

/* --- 협폭 단말(≤400): 알약 라벨만 미세 축소 ---
   `33주년 FABB 신청/조회`(12자)는 원본 사이트에 없던 신규 라벨이라
   원본 값(fs13/pl20)으로는 50% 폭 알약(≤375 에서 약 172px)에 들어가지 않는다.
   원본이 `height:50px` 고정 = 1줄 전제이므로 줄바꿈은 선택지가 아니고,
   말줄임보다 라벨 전체 노출이 낫다고 판단해 폰트/패딩만 1px 단위로 줄임.
   실측: 이 값에서 360/375/390 모두 말줄임 없이 완전 노출(overflow 0).
   그보다 좁으면(≤340) 말줄임이 안전망으로 동작해 넘침은 발생하지 않는다. */
@media only screen and (max-width: 400px) {
  .fab_bonus_list .linemap_menu li > a {
    font-size: 12px; padding-left: 12px; padding-right: 28px;
  }
}

/* --- FABB PRE_OPEN 안내문: 마지막 음절만 홀로 개행되는 문제 ---
   `8월 10일부터 본 화면에서 신청 가능합니다.` 는 fs20 기준 383px 인데
   390px 단말 가용폭은 310px(뷰포트 - content_box 15px*2 - 박스 24px*2 - 테두리)이라
   2줄이 되고, word-break 기본값이라 어절이 아닌 음절 중간에서 끊긴다.
   실측(headless Chrome, Noto Sans KR): 430px 에서 "…가능합니 / 다." 로 사진과 동일 재현.

   가로 패딩만으로는 해결되지 않는다 — 패딩을 0 으로 해도 가용폭이 358px 이라 383px 를 못 담는다.
   제약이 글자 크기라서 폭(패딩)과 폰트를 함께 줄여 360px 이상에서 한 줄이 되게 한다.
   실측 결과: fs18/pad16 은 390px+, fs17/pad12 는 360px+ 에서 1줄.
   keep-all 은 그래도 넘치는 초협폭(<=320)에서 음절이 아닌 어절 단위로만 끊기게 하는 안전망.

   fuel-voucher 도 같은 .fv-pre-open 을 쓰므로 반드시 .fab_bonus_list 로 스코프한다. */
@media only screen and (max-width: 768px) {
  .fab_bonus_list .fv-pre-open { padding-left: 16px; padding-right: 16px; }
  .fab_bonus_list .fv-pre-open p { font-size: 18px; letter-spacing: -0.3px; word-break: keep-all; }
}
@media only screen and (max-width: 400px) {
  .fab_bonus_list .fv-pre-open { padding-left: 12px; padding-right: 12px; }
  .fab_bonus_list .fv-pre-open p { font-size: 17px; }
}
/* 협폭(360~380: 갤럭시 다수·아이폰 mini/SE) 은 fs17 로도 3px 모자라 2줄이 된다 */
@media only screen and (max-width: 380px) {
  .fab_bonus_list .fv-pre-open p { font-size: 16px; letter-spacing: -0.5px; }
}

/* ===== 이벤트 일정 페이지 ===== */
.sub_content.event_schedule { padding-top: 30px; }
.sub_content.event_schedule .sub_title.center { min-height: auto; padding: 10px 20px 0; margin-bottom: 20px; }
.sub_content.event_schedule .sub_title.center h2 { font-size: 28px; line-height: 36px; margin-bottom: 12px; }
.sub_content.event_schedule .content_box { width: auto; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* 필터 바 */
.ev-filter-bar { display: flex; align-items: center; gap: 8px; padding: 12px 0; flex-wrap: wrap; margin-bottom: 16px; }
.ev-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid #e5e7eb; background: #fff; color: #555;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
  letter-spacing: 0.2px;
  -webkit-user-select: none; user-select: none;
}
.ev-filter-chip:hover { border-color: #bbb; }
.ev-filter-chip.active { border-color: transparent; }
.ev-filter-chip .chip-count { font-size: 11px; opacity: 0.7; }
.ev-filter-sep { width: 1px; height: 20px; background: #ddd; flex-shrink: 0; margin: 0 4px; }
.ev-filter-chip.enrolled { color: #2e7d32; }
.ev-filter-chip.enrolled.active { background: rgba(46,125,50,0.1); color: #2e7d32; border-color: transparent; }
.ev-my-link {
  margin-left: auto; padding: 8px 16px; border-radius: 8px;
  background: #004687; color: #fff; font-size: 14px; font-weight: 700;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s;
}
.ev-my-link:hover { background: #003566; }

/* 카드 그리드 */
.ev-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* 카드 */
.ev-card {
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid #e8eaee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  display: flex; flex-direction: column;
  transition: box-shadow 0.15s;
}
.ev-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.12); }

/* 헤더: 유형 뱃지 + 타이틀 */
.ev-card-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 14px 0;
}
.ev-type {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.3px;
}
.ev-title {
  flex: 1; min-width: 0; margin: 0;
  font-size: 14.5px; font-weight: 800; color: #1f2937;
  line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 바디 */
.ev-card-body {
  padding: 12px 14px 13px; display: flex; flex-direction: column; flex: 1;
}

/* 2열 정보 그리드 */
.ev-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
}
.ev-cell {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden;
}
.ev-k {
  font-size: 11px; font-weight: 700; color: #9aa4b2;
}
.ev-v {
  display: block; min-width: 0; max-width: 100%;
  font-size: 13px; font-weight: 700; color: #1f2937;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 자격 미충족 사유 */
.ev-reject-line { font-size: 11px; color: #c0392b; margin-top: 8px; }

/* 담당자 (일정관리 카드) */
.ev-contact-line {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
  padding: 10px 12px; background: #f5f7fa; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: #444;
}
.ev-contact-line .ev-k {
  flex: 0 0 auto; font-size: 11px; color: #8a94a6;
}

/* 모집 바 */
.ev-capline {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
}
.ev-capline .ev-k { flex: 0 0 auto; }
.ev-capline .ev-cap-track { flex: 1; }
.ev-capline-num {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #667;
}
.ev-capline-num.full { color: #8a94a6; }
.ev-cap-track {
  height: 7px; border-radius: 999px; background: #eef1f6; overflow: hidden;
}
.ev-cap-fill {
  height: 100%; border-radius: 999px; background: #aeb4bd; transition: width 0.3s;
}
.ev-cap-fill.full { background: #8a94a6; }

/* 버튼 */
.ev-btns {
  display: flex; gap: 8px; margin-top: auto; padding-top: 13px;
}
.ev-detail-btn {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 10px;
  border: 1px solid #cbd5e1; background: #fff;
  font-size: 13px; font-weight: 700; color: #333;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: border-color 0.15s;
}
.ev-detail-btn:hover { border-color: #999; }
.ev-apply-btn {
  flex: 1; padding: 9px 0; border-radius: 10px; border: none;
  font-size: 13px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: opacity 0.15s;
}
.ev-apply-btn.primary {
  background: linear-gradient(135deg, #0a5c9e, #3b8fd4); color: #fff;
}
.ev-apply-btn.primary:hover { opacity: 0.9; }
.ev-apply-btn.done {
  background: #eef2f7; color: #3a6ea5;
}
.ev-apply-btn.cancel {
  background: #fff; border: 1px solid #fecaca; color: #dc2626;
}
.ev-apply-btn.cancel:hover { border-color: #f87171; }
.ev-apply-btn.ghost {
  background: #fff; border: 1px solid #cbd5e1; color: #333;
}
.ev-apply-btn.ghost:hover { border-color: #999; }
.ev-apply-btn.disabled {
  background: #f0f2f6; color: #9aa4b2; cursor: not-allowed; pointer-events: none;
}

/* 비활성/IMM 제한 */
.ev-card.inactive { opacity: 0.6; }
.ev-card.imm-disabled { opacity: 0.6; }

/* 페이지네이션 */
.ev-paging { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 32px 0 24px; }
.ev-paging button {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: #666; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ev-paging button:hover { background: #f4f4f4; }
.ev-paging button.active { background: #004687; color: #fff; font-weight: 700; }
.ev-paging button:disabled { color: #ccc; cursor: default; background: transparent; }

/* 빈 상태 */
.ev-empty { padding: 80px 0; text-align: center; color: #999; font-size: 15px; }

/* ===== 자격 배너 ===== */
.ev-elig-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 0 0 10px;
  background: #f5f7fa; border-radius: 10px;
}
.ev-elig-rank {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 6px;
  background: #004687; color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .3px; flex-shrink: 0;
}
.ev-elig-rank.inactive { background: #bbb; }
.ev-elig-quals { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ev-elig-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ev-elig-chip.fail { background: #eef0f4; color: #aab2bd; }
.ev-elig-sub {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; margin-left: 2px;
}
.ev-elig-sub.blacklist { color: #b91c1c; background: #fee2e2; }
.ev-elig-sub.attended { color: #92400e; background: #fef3c7; }
.ev-elig-mini-ring { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.ev-elig-mini-ring svg { flex-shrink: 0; }
.ev-elig-ring-count { font-size: 11px; font-weight: 700; color: #555; }

/* ===== 캘린더 (세로 스크롤) ===== */
.ev-cal {
  margin-bottom: 24px; border: 1px solid #eee; border-radius: 12px;
  overflow: hidden; background: #fff;
}

/* 월 표시 + 모드 세그먼트 + 오늘 버튼 */
.ev-cal-monthrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 8px;
}
.ev-cal-month {
  font-size: 17px; font-weight: 800; letter-spacing: 0.3px; color: #222;
}
.ev-cal-modeseg {
  display: inline-flex; padding: 2px; border-radius: 999px; background: #f0f2f6;
}
.ev-cal-modeseg button {
  padding: 5px 12px; border-radius: 999px; border: none;
  background: transparent; font-size: 12px; font-weight: 700;
  color: #8a94a6; cursor: pointer; transition: all 0.15s;
}
.ev-cal-modeseg button.on {
  background: #fff; color: #004687;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ev-cal-today {
  padding: 5px 12px; border: 1px solid #ddd; border-radius: 16px;
  background: #fff; font-size: 12px; font-weight: 600; color: #666;
  cursor: pointer; transition: background 0.15s;
}
.ev-cal-today:hover { background: #f4f4f4; }

/* 요일 행 */
.ev-cal-row {
  display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 3px;
}
.ev-cal-weekdays { padding: 2px 20px 6px; }
.ev-cal-wd {
  text-align: center; font-size: 11px; font-weight: 700; color: #9aa4b2;
}
.ev-cal-wd.sun { color: #e15b64; }
.ev-cal-wd.sat { color: #4a80c4; }

/* 스크롤 박스 — 주 단위 스냅 */
.ev-cal-scroll {
  position: relative; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: y mandatory; padding: 0 20px;
}
.ev-cal-scroll::-webkit-scrollbar { display: none; }

.ev-cal-week {
  position: relative; display: flex; flex-direction: column;
  box-sizing: border-box; padding-bottom: 5px;
  border-top: 1px solid #f0f2f6; scroll-snap-align: start;
}
.ev-cal-week:first-child { border-top: none; }

/* 날짜 숫자 */
.ev-cal-days { position: relative; z-index: 1; height: 24px; align-items: center; }
.ev-cal-cell {
  display: flex; align-items: center; justify-content: center;
  background: transparent; padding: 0;
}
.ev-cal-day {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px;
  font-size: 12.5px; font-weight: 600; color: #333;
}
.ev-cal-cell.sun .ev-cal-day { color: #e15b64; }
.ev-cal-cell.sat .ev-cal-day { color: #4a80c4; }
.ev-cal-cell.past .ev-cal-day,
.ev-cal-cell.off .ev-cal-day { color: #c2c8d0; }
.ev-cal-cell.today { background: #eef2f7; border-radius: 9px; }
.ev-cal-cell.today .ev-cal-day { color: #111418; font-weight: 900; }

/* 행사 pill (라벨) */
.ev-cal-pills {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 16px; row-gap: 4px; column-gap: 3px;
  padding: 4px 1px 0; align-content: start;
}
.ev-cal-pill {
  box-sizing: border-box; height: 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 0 6px; border-radius: 5px;
  border: 1px solid transparent;
  font-size: 10px; font-weight: 800; letter-spacing: 0.2px;
  line-height: 1; color: #1c242c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-cal-pill-dot {
  flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
}
.ev-cal-pill.past { color: #aeb4bd; }

/* 신청기간 바 */
.ev-cal-applys {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 13px; row-gap: 4px; column-gap: 2px;
  padding: 3px 1px 0;
}
.ev-cal-applys:empty { display: none; }
.ev-cal-apply {
  height: 13px; display: flex; align-items: center;
  padding: 0 6px; border-radius: 4px;
  font-size: 9px; font-weight: 600; line-height: 1; color: #5b6675;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-cal-apply.past { color: #aeb4bd; }

/* 범례 */
.ev-cal-legend {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 20px; border-top: 1px solid #eee;
}
.ev-cal-lg {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: #667;
}
.ev-cal-lg-pill {
  width: 18px; height: 10px; border-radius: 3px; background: #b7a3e6;
}
.ev-cal-lg-bar {
  width: 18px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #b7a3e6, rgba(183, 163, 230, 0.2));
}

/* ── 태블릿 ── */
@media only screen and (max-width: 1200px) {
  .ev-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sub_content.event_schedule .content_box { padding: 0 20px; }
}

/* ── 모바일 ── */
@media only screen and (max-width: 768px) {
  .sub_content.event_schedule { padding-top: 20px; }
  .sub_content.event_schedule .sub_title.center { padding: 8px 15px 0; margin-bottom: 12px; }
  .sub_content.event_schedule .sub_title.center h2 { font-size: 24px; line-height: 32px; }
  .sub_content.event_schedule .content_box { padding: 0 15px; }

  /* 카드: 1열 */
  .ev-card-grid { grid-template-columns: 1fr; }
  .ev-card { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }

  /* 필터: 2줄 wrap */
  .ev-filter-bar { padding: 8px 0; gap: 5px; }
  .ev-filter-chip { padding: 4px 8px; font-size: 11px; border-radius: 6px; }
  .ev-filter-sep { display: none; }
  .ev-my-link { padding: 6px 14px; font-size: 13px; }

  /* 자격 배너 */
  .ev-elig-banner { padding: 8px 10px; gap: 8px; }
  .ev-elig-rank { padding: 3px 8px; font-size: 10px; }
  .ev-elig-chip { padding: 3px 8px; font-size: 11px; }
  .ev-elig-quals { gap: 4px; }

  /* 캘린더 */
  .ev-cal-monthrow { padding: 10px 12px 6px; }
  .ev-cal-month { font-size: 15px; }
  .ev-cal-modeseg button { padding: 4px 10px; font-size: 11px; }
  .ev-cal-today { padding: 4px 10px; font-size: 11px; }
  .ev-cal-weekdays { padding: 2px 12px 6px; }
  .ev-cal-scroll { padding: 0 12px; }
  .ev-cal-legend { padding: 8px 12px; gap: 10px; }

  /* 페이지네이션 */
  .ev-paging { gap: 2px; margin: 24px 0 16px; }
  .ev-paging button { width: 32px; height: 32px; font-size: 13px; }
}

/* ── 상세보기 (기획서 Section 2) ── */
.ev-detail-view { max-width: 720px; margin: 0 auto; }

.ev-detail-info { margin-bottom: 24px; }
.ev-detail-info h3 {
  font-size: 22px; font-weight: 700; color: #222; margin: 0 0 16px;
  line-height: 1.4; word-break: keep-all;
}

.ev-detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ev-detail-table th {
  text-align: left; vertical-align: top; padding: 10px 12px;
  font-weight: 600; color: #555; white-space: nowrap;
  width: 90px; border-bottom: 1px solid #f0f0f0; background: #fafafa;
}
.ev-detail-table td {
  padding: 10px 12px; color: #222;
  border-bottom: 1px solid #f0f0f0;
  word-break: break-word;
}
.ev-detail-addr { display: block; font-size: 12px; color: #888; margin-top: 2px; }

.ev-detail-desc-cell { font-size: 13px; line-height: 1.7; color: #444; }
.ev-detail-desc-cell p { margin: 0; }

.ev-detail-capacity { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ev-detail-cap-bar {
  flex: 1; min-width: 100px; height: 8px; background: #eee; border-radius: 4px; overflow: hidden;
}
.ev-detail-cap-fill { height: 100%; background: #004687; border-radius: 4px; transition: width .3s; }
.ev-detail-cap-fill.expired { background: #dc2626; }
.ev-detail-remain { font-size: 12px; color: #888; }
.ev-detail-remain.expired { color: #dc2626; }

.ev-detail-poster {
  position: relative; margin-bottom: 24px; border-radius: 8px;
  overflow: hidden; background: #f5f5f5;
}
.ev-detail-poster img { width: 100%; height: auto; display: block; }
.ev-poster-badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: 11px; font-weight: 700; color: #fff; padding: 3px 10px;
  border-radius: 12px; letter-spacing: .5px;
}
.ev-poster-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1.41; color: #bbb;
}
.ev-poster-icon { font-size: 48px; margin-bottom: 8px; }
.ev-poster-label { font-size: 14px; }

.ev-detail-btn-area { display: flex; gap: 10px; margin-bottom: 32px; }
.ev-detail-btn-area .btn {
  flex: 1; height: 48px; line-height: 46px; font-size: 15px;
  border-radius: 8px; padding: 0 12px; text-align: center; display: block;
  font-weight: 600; text-decoration: none; cursor: pointer;
  box-sizing: border-box;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-btn-back {
  background: #fff; border: 1px solid #ccc; color: #555;
}
.ev-btn-back:hover { border-color: #999; color: #333; }
.ev-btn-apply {
  background: #004687; border: 1px solid #004687; color: #fff;
}
.ev-btn-apply:hover { background: #003060; }
.ev-btn-cancel {
  background: #dc2626; border: 1px solid #dc2626; color: #fff;
}
.ev-btn-cancel:hover { background: #b91c1c; }
.ev-btn-disabled {
  background: #ddd; border: 1px solid #ddd; color: #999;
  cursor: not-allowed; pointer-events: none;
}

.ev-td-status {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 12px;
}
.ev-td-status.open { background: #dbeafe; color: #1e40af; }
.ev-td-status.complete { background: #d1fae5; color: #065f46; }
.ev-td-status.closed { background: #fee2e2; color: #991b1b; }

/* ── 신청 페이지 · 장소 선택 ── */
.ev-venue-section { margin: 24px 0; }
.ev-venue-heading {
  font-size: 15px; font-weight: 600; color: #333;
  margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.ev-venue-list { display: flex; flex-direction: column; gap: 8px; }
.ev-venue-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 8px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  background: #fff; text-align: left; width: 100%;
  font-family: inherit; font-size: inherit;
}
.ev-venue-card:hover:not(.full) { border-color: #999; }
.ev-venue-card.selected { border-color: #004687; background: #f0f6ff; }
.ev-venue-card.full {
  border-color: #eee; background: #fafafa;
  cursor: not-allowed; opacity: 0.55;
}
.ev-venue-radio {
  font-size: 18px; color: #ccc; flex-shrink: 0;
  line-height: 1; margin-top: 1px;
}
.ev-venue-card.selected .ev-venue-radio { color: #004687; }
.ev-venue-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ev-venue-name { font-size: 14px; font-weight: 600; color: #222; }
.ev-venue-addr { font-size: 12px; color: #888; }
.ev-venue-cap { font-size: 12px; color: #555; }
.ev-venue-cap.full { color: #dc2626; }
.ev-venue-full-badge {
  font-size: 11px; font-weight: 600; color: #991b1b;
  background: #fee2e2; padding: 2px 8px; border-radius: 10px;
  align-self: center; flex-shrink: 0;
}

.ev-venue-cap-inline { font-size: 13px; color: #555; }

/* ── 신청/취소 공통 ── */
.ev-apply-notice {
  font-size: 13px; color: #666; margin: 16px 0;
  padding: 12px 16px; background: #fffbeb; border-radius: 8px;
  border-left: 3px solid #f59e0b; line-height: 1.5;
}
.ev-apply-error {
  font-size: 13px; color: #dc2626; margin: 12px 0;
  padding: 10px 16px; background: #fef2f2; border-radius: 8px;
  border: 1px solid #fecaca; line-height: 1.5;
}
.ev-apply-blocked {
  text-align: center; padding: 40px 0; color: #666;
}
.ev-apply-blocked p { font-size: 16px; margin: 0 0 20px; line-height: 1.5; }

.ev-apply-result { text-align: center; padding: 40px 0; }
.ev-apply-result-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
  background: #2e7d32; border-radius: 50%;
}
.ev-cancel-done-icon { background: #dc2626; }
.ev-apply-result h3 {
  font-size: 20px; font-weight: 700; color: #222; margin: 0 0 24px;
}
.ev-apply-result .ev-detail-table {
  max-width: 400px; margin: 0 auto 24px;
}

/* ── 취소 페이지 ── */
.ev-cancel-warn {
  font-size: 15px; color: #dc2626; font-weight: 600;
  text-align: center; margin: 24px 0 16px;
}
.ev-cancel-reason { margin: 0 0 24px; }
.ev-cancel-reason label {
  display: block; font-size: 14px; font-weight: 600;
  color: #333; margin-bottom: 8px;
}
.ev-cancel-reason textarea {
  width: 100%; min-height: 80px; padding: 12px; font-size: 14px;
  border: 1px solid #ddd; border-radius: 8px; resize: vertical;
  box-sizing: border-box; font-family: inherit; line-height: 1.5;
}
.ev-cancel-reason textarea:focus {
  outline: none; border-color: #004687;
  box-shadow: 0 0 0 2px rgba(0, 70, 135, 0.12);
}
.ev-error-msg {
  color: #dc2626; font-size: 13px; text-align: center; margin: 0 0 12px;
}

/* ── 취소 모달 ── */
.ev-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ev-modal {
  background: #fff; border-radius: 16px; padding: 28px 24px;
  max-width: 420px; width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
.ev-modal h3 {
  font-size: 18px; font-weight: 700; color: #222;
  text-align: center; margin: 0 0 4px;
}
.ev-modal-actions {
  display: flex; gap: 10px; justify-content: center;
}
.ev-modal-actions .btn { flex: 1; max-width: 160px; }

/* ── 나의 일정 ── */
.ev-ms-tabs {
  display: flex; border-bottom: 2px solid #e5e7eb; margin-bottom: 0;
}
.ev-ms-tab {
  flex: 1; padding: 14px 0; font-size: 15px; font-weight: 600;
  color: #888; background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ev-ms-tab:hover { color: #333; }
.ev-ms-tab.active { color: #004687; border-bottom-color: #004687; }
.ev-ms-tab-count {
  font-size: 12px; font-weight: 700; color: #fff;
  background: #004687; border-radius: 10px; padding: 1px 7px;
  min-width: 20px; text-align: center; line-height: 1.5;
}
.ev-ms-tab:not(.active) .ev-ms-tab-count { background: #aaa; }

.ev-ms-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0; flex-wrap: wrap;
}
.ev-ms-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ev-ms-year-select {
  padding: 6px 32px 6px 14px; font-size: 13px; font-weight: 500; line-height: 1.4;
  border: 1px solid #ccc; border-radius: 20px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: #333; cursor: pointer; font-family: inherit;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.ev-ms-year-select:focus { outline: none; border-color: #004687; box-shadow: 0 0 0 2px rgba(0,70,135,0.12); }
.ev-ms-year-select:hover { border-color: #999; }

/* 테이블 (데스크톱) */
.ev-ms-table-wrap { overflow-x: auto; }
.ev-ms-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.ev-ms-table thead th {
  background: #f8f9fa; font-weight: 600; color: #555;
  padding: 12px 14px; border-bottom: 2px solid #e5e7eb;
  text-align: left; white-space: nowrap; font-size: 13px;
}
.ev-ms-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.ev-ms-table tbody tr:hover { background: #fafbfc; }
.ev-ms-table tbody td { padding: 14px; vertical-align: middle; }
.ev-ms-type-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: #fff; padding: 3px 8px; border-radius: 4px;
  letter-spacing: 0.02em;
}
.ev-ms-title-cell { max-width: 260px; }
.ev-ms-title-link {
  color: #222; text-decoration: none; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ev-ms-title-link:hover { color: #004687; text-decoration: underline; }
.ev-ms-date-cell { white-space: nowrap; font-size: 13px; color: #555; }
.ev-ms-status {
  font-size: 13px; font-weight: 600; padding: 3px 10px;
  border-radius: 12px; white-space: nowrap;
}
.ev-ms-status.applied { color: #166534; background: #dcfce7; }
.ev-ms-status.completed { color: #555; background: #f3f4f6; }
.ev-ms-actions { display: flex; gap: 6px; }
.ev-ms-btn {
  font-size: 12px; font-weight: 600; padding: 5px 12px;
  border-radius: 6px; text-decoration: none; white-space: nowrap;
  display: inline-block; text-align: center;
  transition: opacity 0.15s;
}
.ev-ms-btn:hover { opacity: 0.85; }
.ev-ms-btn.cancel { color: #dc2626; border: 1px solid #fecaca; background: #fff; }
.ev-ms-btn.cancel:hover { background: #fef2f2; }
.ev-ms-btn.detail { color: #004687; border: 1px solid #bfdbfe; background: #fff; }
.ev-ms-btn.detail:hover { background: #eff6ff; }

/* 모바일 카드 (기본 숨김) */
.ev-ms-card-list { display: none; }
.ev-ms-card {
  border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px; margin-bottom: 12px; background: #fff;
}
.ev-ms-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.ev-ms-card-title {
  font-size: 15px; font-weight: 600; margin: 0 0 12px;
  line-height: 1.4;
}
.ev-ms-card-title a { color: #222; text-decoration: none; }
.ev-ms-card-title a:hover { color: #004687; }
.ev-ms-card-info {
  font-size: 13px; color: #555; display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 14px;
}
.ev-ms-card-label {
  display: inline-block; width: 60px; font-weight: 600;
  color: #888; flex-shrink: 0;
}
.ev-ms-card-actions {
  display: flex; gap: 8px; justify-content: flex-end;
}
.ev-ms-card-actions .ev-ms-btn { padding: 8px 16px; font-size: 13px; }

.ev-ms-bottom {
  padding: 24px 0; text-align: center;
}

/* ── 상세보기/신청/취소 모바일 ── */
@media only screen and (max-width: 768px) {
  .ev-detail-view { padding: 0; }
  .ev-detail-info h3 { font-size: 18px; }
  .ev-detail-table th { width: 72px; padding: 8px 10px; font-size: 13px; }
  .ev-detail-table td { padding: 8px 10px; font-size: 13px; }
  .ev-detail-capacity { flex-direction: column; align-items: stretch; gap: 4px; }
  .ev-detail-cap-bar { min-width: 0; }
  .ev-poster-placeholder { max-height: 300px; }
  .ev-detail-btn-area .btn { height: 48px; line-height: 46px; font-size: 16px; border-radius: 10px; }
  .ev-venue-card { padding: 12px; gap: 10px; }
  .ev-venue-name { font-size: 13px; }
  .ev-apply-result h3 { font-size: 18px; }
  /* 나의 일정 모바일 */
  .ev-ms-table-wrap { display: none; }
  .ev-ms-card-list { display: block; }
  .ev-ms-tab { font-size: 14px; padding: 12px 0; }
  .ev-ms-filter-bar { padding: 12px 0; }
  .ev-ms-chips { gap: 4px; }
}

/* ══════════════════════════════════════════════
   IMM Training 사용자 페이지
   ══════════════════════════════════════════════ */

/* base.css .sub_content 의 overflow:hidden 이 드롭다운(8개 항목)을 자른다 */
.sub_content.imm_page { overflow: visible; }

/* ── 인사말 / 호텔정보 공통 콘텐츠 ── */
.imm-content-wrap {
  max-width: 900px; margin: 0 auto;
}
.imm-content-image {
  border-radius: 8px; overflow: hidden; margin-bottom: 24px;
  background: #f5f5f5;
}
.imm-content-image img {
  width: 100%; height: auto; display: block;
}
.imm-content-body {
  font-size: 15px; line-height: 1.8; color: #333;
  word-break: keep-all;
}
.imm-content-body h3 {
  font-size: 20px; font-weight: 700; color: #222;
  margin: 0 0 16px; line-height: 1.4;
}
.imm-content-body p { margin: 0 0 12px; }
.imm-content-body p:last-child { margin-bottom: 0; }

/* 호텔 헤더 */
.imm-hotel-header {
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 2px solid #222;
}
.imm-hotel-header h3 {
  font-size: 20px; font-weight: 700; color: #222;
  margin: 0; line-height: 1.4;
}

/* ── 행사일정 ── */
.imm-schedule-wrap {
  max-width: 720px; margin: 0 auto;
}
.imm-schedule-day {
  margin-bottom: 32px;
}
.imm-schedule-day:last-of-type { margin-bottom: 24px; }
.imm-schedule-day-header {
  margin-bottom: 16px;
}
.imm-day-badge {
  display: inline-block; font-size: 15px; font-weight: 700;
  color: #004687; padding: 6px 0;
  border-bottom: 2px solid #004687;
  letter-spacing: 0.02em;
}
.imm-schedule-timeline {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid #e5e7eb;
}
.imm-schedule-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 12px 0;
  position: relative;
}
.imm-schedule-item + .imm-schedule-item {
  border-top: 1px solid #f5f5f5;
}
.imm-schedule-dot {
  position: absolute; left: -27px; top: 18px;
  width: 10px; height: 10px;
  background: #004687; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #004687;
  flex-shrink: 0;
}
.imm-schedule-time {
  min-width: 110px; flex-shrink: 0;
  font-size: 14px; font-weight: 600; color: #222;
  padding-top: 1px;
  font-variant-numeric: tabular-nums;
}
.imm-schedule-info { flex: 1; }
.imm-schedule-title {
  font-size: 15px; font-weight: 600; color: #222;
  line-height: 1.5;
}
.imm-schedule-meta {
  font-size: 13px; color: #888; margin-top: 4px;
  display: flex; align-items: center; gap: 0;
}
.imm-meta-sep {
  margin: 0 6px; color: #ccc;
}
.imm-schedule-notice {
  font-size: 13px; color: #888; text-align: center;
  padding: 16px 0 8px;
  border-top: 1px solid #f0f0f0;
}

/* ── FAQ ── */
.imm-faq-wrap {
  max-width: 720px; margin: 0 auto;
}
.imm-faq-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.imm-faq-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
  background: #f5f5f5; color: #555;
  border: 1px solid #e5e7eb;
  cursor: pointer; transition: all 0.15s;
  line-height: 1;
}
.imm-faq-chip:hover { border-color: #999; color: #333; }
.imm-faq-chip.active {
  background: #004687; color: #fff;
  border-color: #004687;
}
.imm-faq-chip-count {
  font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.08); color: inherit;
  padding: 1px 6px; border-radius: 10px;
  line-height: 1.3;
}
.imm-faq-chip.active .imm-faq-chip-count {
  background: rgba(255,255,255,0.25);
}
.imm-faq-list {
  display: flex; flex-direction: column;
}
.imm-faq-item {
  border-bottom: 1px solid #f0f0f0;
}
.imm-faq-item:first-child {
  border-top: 1px solid #f0f0f0;
}
.imm-faq-question {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 4px;
  background: none; border: none;
  cursor: pointer; text-align: left;
  font-family: inherit; font-size: inherit;
  transition: background 0.1s;
}
.imm-faq-question:hover { background: #fafbfc; }
.imm-faq-q-badge {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #dbeafe; color: #1e40af;
  font-size: 13px; font-weight: 700;
  border-radius: 6px;
}
.imm-faq-q-text {
  flex: 1; font-size: 15px; font-weight: 500;
  color: #222; line-height: 1.5;
  word-break: keep-all;
}
.imm-faq-arrow {
  flex-shrink: 0; font-size: 12px; color: #999;
  transition: transform 0.2s;
  margin-left: auto; padding: 0 4px;
}
.imm-faq-arrow.open { transform: rotate(180deg); }
.imm-faq-answer {
  display: flex; gap: 12px;
  padding: 0 4px 20px 4px;
}
.imm-faq-a-badge {
  flex-shrink: 0; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: #f0f0f0; color: #555;
  font-size: 13px; font-weight: 700;
  border-radius: 6px;
}
.imm-faq-a-text {
  flex: 1; font-size: 14px; line-height: 1.7;
  color: #444; word-break: keep-all;
}
.imm-faq-a-text p { margin: 0; }

/* ── 고객센터 ── */
.imm-support-wrap {
  max-width: 480px; margin: 0 auto;
  padding: 40px 0;
}
.imm-support-card {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: 48px 32px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.imm-support-icon {
  margin-bottom: 20px;
}
.imm-support-title {
  font-size: 20px; font-weight: 700; color: #222;
  margin: 0 0 12px;
}
.imm-support-desc {
  font-size: 14px; line-height: 1.7; color: #555;
  margin: 0 0 28px;
}
.imm-support-btn {
  display: inline-block;
  padding: 12px 32px;
  background: #FEE500; color: #3C1E1E;
  font-size: 15px; font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.imm-support-btn:hover { opacity: 0.85; }
.imm-support-notice {
  text-align: center; font-size: 13px; color: #888;
  margin-top: 24px; line-height: 1.6;
}

/* ── IMM 참가신청 ── */
.imm-apply-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 40px;
}

.imm-apply-course-title {
  text-align: center;
  padding: 24px 0 0;
}
.imm-apply-course-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  margin: 0;
}
.imm-apply-course-period {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: #888;
}

.imm-apply-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px 0 32px;
}
.imm-apply-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
}
.imm-apply-step-item.active { opacity: 1; }
.imm-apply-step-item.done { opacity: 0.7; }
.imm-apply-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ccc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.imm-apply-step-item.active .imm-apply-step-num { background: #004687; }
.imm-apply-step-item.done .imm-apply-step-num { background: #10b981; }
.imm-apply-step-label { font-size: 13px; color: #333; font-weight: 500; }
.imm-apply-step-line {
  width: 40px;
  height: 2px;
  background: #ddd;
  margin: 0 12px;
  flex-shrink: 0;
}

.imm-apply-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 20px;
}

.imm-apply-form {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px 24px;
}

.imm-apply-section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #004687;
}

.imm-apply-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
}

.imm-apply-field {
  margin-bottom: 16px;
}
.imm-apply-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
.imm-apply-field label .required { color: #dc2626; }
.imm-apply-field input[type="text"],
.imm-apply-field input[type="tel"],
.imm-apply-field input[type="date"] {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.imm-apply-field input:focus {
  outline: none;
  border-color: #004687;
  box-shadow: 0 0 0 2px rgba(0,70,135,0.08);
}
.imm-apply-field input:disabled {
  background: #f3f4f6;
  color: #666;
  cursor: not-allowed;
}

.imm-apply-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  resize: vertical;
  margin-top: 8px;
  box-sizing: border-box;
  font-family: inherit;
}
.imm-apply-textarea:focus {
  outline: none;
  border-color: #004687;
  box-shadow: 0 0 0 2px rgba(0,70,135,0.08);
}

.imm-apply-row {
  display: flex;
  gap: 16px;
}
.imm-apply-row > .imm-apply-field { flex: 1; }

.imm-apply-radio-group {
  display: flex;
  gap: 20px;
}
.imm-apply-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.imm-apply-radio input[type="radio"] {
  accent-color: #004687;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.imm-apply-hotel-info,
.imm-apply-summary {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
}
.imm-apply-info-row {
  display: flex;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid #e9ecef;
}
.imm-apply-info-row:last-child { border-bottom: none; }
.imm-apply-info-label {
  width: 120px;
  flex-shrink: 0;
  color: #666;
  font-weight: 500;
}

.imm-apply-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.imm-apply-btn {
  min-width: 120px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.imm-apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.imm-apply-btn:hover:not(:disabled) { opacity: 0.85; }
.btn.btn-outline {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #555;
}
.btn.btn-gray {
  background: #6b7280;
  color: #fff;
}

/* File upload */
.imm-apply-file-upload {
  display: flex;
  align-items: center;
  gap: 12px;
}
.imm-apply-file-btn {
  height: 36px;
  line-height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.imm-apply-file-name {
  font-size: 13px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.imm-apply-file-hint {
  font-size: 12px;
  color: #999;
  margin: 6px 0 0;
}

/* Roommate cards */
.imm-apply-roommate-options {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.imm-apply-roommate-card {
  flex: 1;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.imm-apply-roommate-card:hover { border-color: #93c5fd; }
.imm-apply-roommate-card.selected {
  border-color: #004687;
  background: #f0f7ff;
}
.imm-apply-roommate-card input[type="radio"] {
  accent-color: #004687;
  margin-top: 4px;
  flex-shrink: 0;
}
.imm-apply-roommate-card-body strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
  color: #1a1a1a;
}
.imm-apply-roommate-card-body p {
  font-size: 13px;
  color: #666;
  margin: 0;
}

.imm-apply-partner-fields {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

/* Complete step */
.imm-apply-complete {
  text-align: center;
  padding: 32px 0 24px;
}
.imm-apply-complete-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.imm-apply-complete h3 {
  font-size: 20px;
  color: #1a1a1a;
  margin: 0 0 8px;
}
.imm-apply-complete-sub {
  font-size: 14px;
  color: #666;
}

.imm-apply-match-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.imm-apply-match-badge.pending {
  background: #fef3c7;
  color: #92400e;
}
.imm-apply-match-badge.matched {
  background: #d1fae5;
  color: #065f46;
}

/* ── IMM 예약조회 ── */
.imm-booking-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 40px;
}
.imm-booking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 24px;
  flex-wrap: wrap;
  gap: 8px;
}
.imm-booking-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
.imm-booking-id-label {
  font-size: 13px;
  color: #666;
}
.imm-booking-id-value {
  font-size: 20px;
  font-weight: 700;
  color: #004687;
}
.imm-booking-date {
  font-size: 13px;
  color: #888;
}

.imm-booking-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}
.imm-booking-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #004687;
}

.imm-booking-table {
  display: flex;
  flex-direction: column;
}
.imm-booking-row {
  display: flex;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}
.imm-booking-row:last-child { border-bottom: none; }
.imm-booking-label {
  width: 120px;
  flex-shrink: 0;
  color: #666;
  font-weight: 500;
}
.imm-booking-value {
  color: #1a1a1a;
  flex: 1;
}

.imm-booking-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.imm-booking-badge.pending {
  background: #fef3c7;
  color: #92400e;
}
.imm-booking-badge.matched {
  background: #d1fae5;
  color: #065f46;
}
.imm-booking-badge.changed {
  background: #dbeafe;
  color: #1e40af;
}

.imm-booking-note {
  margin-top: 12px;
  text-align: right;
}
.imm-booking-roommate-btn {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

.imm-booking-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.imm-booking-action-btn {
  min-width: 140px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}

/* ── IMM 룸메이트 변경 ── */
.imm-roommate-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 40px;
}
.imm-roommate-form {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px 24px;
}
.imm-roommate-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #f0f7ff;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
}
.imm-roommate-current-label {
  color: #666;
  font-weight: 500;
}
.imm-roommate-current-value {
  color: #004687;
  font-weight: 600;
}
.imm-roommate-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
.imm-roommate-btn {
  min-width: 120px;
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  border: none;
}
.imm-roommate-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.imm-roommate-success {
  text-align: center;
  padding: 40px 0 20px;
}
.imm-roommate-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.imm-roommate-success h3 {
  font-size: 20px;
  color: #1a1a1a;
  margin: 0 0 24px;
}
.imm-roommate-success-summary {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 16px;
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

/* ── IMM 모바일 ── */
@media only screen and (max-width: 768px) {
  .imm-content-body { font-size: 14px; }
  .imm-content-body h3 { font-size: 18px; }
  .imm-hotel-header h3 { font-size: 18px; }

  .imm-schedule-time { min-width: 90px; font-size: 13px; }
  .imm-schedule-title { font-size: 14px; }
  .imm-schedule-meta { font-size: 12px; }
  .imm-schedule-item { gap: 12px; padding: 10px 0; }
  .imm-schedule-dot { left: -27px; top: 16px; }

  .imm-faq-chip { padding: 6px 12px; font-size: 12px; }
  .imm-faq-q-text { font-size: 14px; }
  .imm-faq-a-text { font-size: 13px; }

  .imm-support-wrap { padding: 20px 0; }
  .imm-support-card { padding: 32px 20px; }
  .imm-support-title { font-size: 18px; }

  .imm-apply-course-title h3 { font-size: 17px; }
  .imm-apply-course-period { font-size: 12px; }
  .imm-apply-wrap { padding: 0 8px 24px; }
  .imm-apply-steps { padding: 16px 0 20px; }
  .imm-apply-step-label { font-size: 11px; }
  .imm-apply-step-num { width: 24px; height: 24px; font-size: 11px; }
  .imm-apply-step-line { width: 20px; margin: 0 6px; }
  .imm-apply-form { padding: 20px 16px; }
  .imm-apply-row { flex-direction: column; gap: 0; }
  .imm-apply-roommate-options { flex-direction: column; }
  .imm-apply-roommate-card { padding: 14px; }
  .imm-apply-info-label { width: 90px; font-size: 13px; }
  .imm-apply-btn { min-width: 80px; font-size: 14px; height: 40px; line-height: 40px; padding: 0 12px; }
  .imm-apply-actions { gap: 8px; flex-wrap: wrap; }
  .imm-apply-partner-fields { padding: 12px; }
  .imm-apply-partner-fields .imm-apply-row { flex-direction: column; gap: 0; }
  .imm-apply-file-upload { gap: 8px; }
  .imm-apply-file-btn { height: 32px; line-height: 32px; padding: 0 12px; font-size: 12px; }
  .imm-apply-file-name { font-size: 12px; min-width: 0; }
  .imm-apply-file-hint { font-size: 11px; }
  .imm-apply-complete-icon { width: 48px; height: 48px; font-size: 24px; }
  .imm-apply-complete h3 { font-size: 17px; }
  .imm-apply-section-title { font-size: 15px; }
  .imm-apply-textarea { font-size: 13px; }

  .imm-booking-wrap { padding: 0 8px 24px; }
  .imm-booking-header { padding: 12px 0 16px; flex-direction: column; align-items: flex-start; }
  .imm-booking-id-value { font-size: 18px; }
  .imm-booking-section { padding: 16px; }
  .imm-booking-label { width: 90px; font-size: 13px; }
  .imm-booking-value { font-size: 13px; }
  .imm-booking-action-btn { min-width: 100px; font-size: 14px; height: 40px; line-height: 40px; }
  .imm-booking-roommate-btn { height: 32px; line-height: 32px; font-size: 12px; padding: 0 14px; }

  .imm-roommate-wrap { padding: 0 8px 24px; }
  .imm-roommate-form { padding: 20px 16px; }
  .imm-roommate-current { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; }
  .imm-roommate-btn { min-width: 90px; font-size: 14px; height: 40px; line-height: 40px; }
  .imm-roommate-actions { gap: 8px; }
  .imm-roommate-success-summary { padding: 12px; }
}

@media only screen and (max-width: 400px) {
  .imm-apply-steps { gap: 0; padding: 12px 0 16px; }
  .imm-apply-step-label { display: none; }
  .imm-apply-step-line { width: 32px; }
  .imm-apply-actions { flex-direction: column; }
  .imm-apply-btn { width: 100%; }
  .imm-booking-row { flex-direction: column; gap: 2px; }
  .imm-booking-label { width: auto; }
  .imm-roommate-actions { flex-direction: column; }
  .imm-roommate-btn { width: 100%; }
}

/* --- FABB 캠페인 안내 블록(.bonus_info) 한글 줄바꿈 ---
   word-break 기본값이라 좁은 화면에서 어절이 아닌 음절 중간에서 끊겼다.
   실측 재현: 412/430px 에서 `…안내 공지 바로 / 가기`, 본문은 `…5월 보 / 유한 직급을`.
   keep-all 로 어절 단위 줄바꿈을 강제하면 링크는 375px 이상에서 한 줄이 된다(실측).

   링크 크기는 원래 fabb/page.tsx 의 인라인 스타일이었는데, 인라인은 미디어쿼리로 덮을 수
   없어 좁은 화면 보정이 불가능했다 → .fabb-notice-link 클래스로 옮겼다.
   데스크탑 값(18px/700)은 인라인이던 값 그대로라 렌더 불변. */
.fab_bonus_list .bonus_info .fabb-notice-link { font-size: 18px; font-weight: 700; }

@media only screen and (max-width: 768px) {
  .fab_bonus_list .bonus_info { word-break: keep-all; }
}

.carbonus-hub { max-width: 920px; margin: 0 auto; color: #222; }
.carbonus-stack { display: grid; gap: 16px; }
.cb-status-empty-box {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 28px;
}
.cb-status-empty-box p {
  margin: 0;
  font-size: 16px;
  color: #888;
  line-height: 1.6;
}
.cb-app-group { margin: 0 0 28px; }
.cb-app-group:last-child { margin-bottom: 0; }
.cb-app-group-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e8eb;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.cb-app-group-count {
  color: #004687;
  font-size: 14px;
  font-weight: 600;
}
.cb-app-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
.cb-app-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #e1e4e8;
  border-left: 4px solid #b7bdc4;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
  text-align: left;
  font: inherit;
  color: #1a1a1a;
  cursor: default;
  min-width: 0;
}
.cb-app-card:has(.tone-info) { border-left-color: #004687; }
.cb-app-card:has(.tone-ok) { border-left-color: #1a8d3e; }
.cb-app-card:has(.tone-warn) { border-left-color: #a35e00; }
.cb-app-card:has(.tone-err) { border-left-color: #ed1c24; }
.cb-app-card:has(.tone-off) { border-left-color: #8b919a; }
button.cb-app-card {
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto auto;
}
button.cb-app-card:hover {
  background: #f4f8fc;
  border-top-color: #c5d4e4;
  border-right-color: #c5d4e4;
  border-bottom-color: #c5d4e4;
}
button.cb-app-card:focus-visible {
  outline: 2px solid #004687;
  outline-offset: 2px;
}
.cb-app-card-body { min-width: 0; }
.cb-app-card-title {
  margin: 0;
  color: #1a1a1a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.cb-app-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 8px 0 0;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.45;
  min-width: 0;
}
.cb-app-card-info > div {
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.cb-app-card-label {
  display: inline-block;
  margin-right: 6px;
  font-weight: 600;
  color: #3d3d3d;
}
.cb-app-card .carbonus-phase {
  display: inline-block;
  justify-self: end;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
}
.cb-app-card-go {
  width: 9px;
  height: 9px;
  margin-left: 2px;
  border-right: 2.5px solid #004687;
  border-bottom: 2.5px solid #004687;
  transform: rotate(-45deg);
}
@media (max-width: 480px) {
  .cb-app-card,
  button.cb-app-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px;
  }
  .cb-app-card-body { grid-column: 1; grid-row: 1; }
  .cb-app-card .carbonus-phase { grid-column: 1; grid-row: 2; justify-self: start; }
  .cb-app-card-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .cb-app-card-title { font-size: 17px; }
  .cb-app-card-info { gap: 4px 14px; }
}

.cb-summary-list { margin: 0 0 20px; }
.cb-summary-list > div {
  display: flex;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid #eee;
}
.cb-summary-list dt { flex: 0 0 96px; font-size: 14px; color: #888; }
.cb-summary-list dd { margin: 0; font-size: 14px; color: #222; word-break: keep-all; }
.cb-saving-balance {
  background: #f0f6ff;
  border: 1px solid #b3d4f4;
  border-radius: 12px;
  padding: 28px 24px;
  margin-bottom: 28px;
  text-align: center;
}
.cb-saving-balance .fv-status-label { font-size: 14px; color: #666; margin-bottom: 8px; }
.cb-saving-balance .fv-status-amount { font-size: 32px; font-weight: 700; color: #004687; letter-spacing: -0.5px; line-height: 1.15; }
.cb-saving-balance .fv-status-sub { font-size: 13px; color: #666; margin-top: 10px; line-height: 1.6; }
.cb-saving-error { margin: 0; color: #ed1c24; }
.cb-saving-block { margin-bottom: 8px; }
.cb-saving-wrap { overflow-x: auto; }
.cb-saving-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cb-saving-table th {
  padding: 16px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #222;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #222;
  text-align: center;
  white-space: nowrap;
}
.cb-saving-table th:nth-child(1),
.cb-saving-table th:nth-child(2) { width: 50%; }
.cb-saving-table td {
  padding: 18px 10px;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #ddd;
  text-align: center;
  vertical-align: middle;
}
.cb-saving-table td.cb-saving-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.carbonus-empty { text-align: center; }
.carbonus-empty .carbonus-lead { margin-bottom: 18px; }
/* 조회 화면의 칸은 신청 화면의 확인 칸(.cb-review-block)과 같은 껍데기를 쓴다. */
.carbonus-card { box-sizing: border-box; margin: 16px 0; padding: 20px; border: 1px solid #eee; border-radius: 12px; background: #fff; }
.carbonus-card h3 { margin: 0; font-size: 18px; font-weight: 600; color: #222; }
.carbonus-card h4 { margin: 22px 0 10px; font-size: 15px; }
.carbonus-card-head { display: flex; align-items: center; gap: 12px; }
.carbonus-card > .carbonus-card-head { margin: 0 0 12px; padding: 0; }
.carbonus-card-head > span, .carbonus-card-head > strong { margin-left: auto; }
.carbonus-card-head .fv-notice-btn { position: static; flex: 0 0 auto; }
.carbonus-lead { margin: 0 0 14px; color: #888; font-size: 15px; line-height: 1.7; }
/* base.css 의 span.alert_text 는 줄높이 20px 에 18px 아이콘이라, 문단 글씨 옆에서 크고 어긋나 보인다. */
.carbonus-lead .alert_text,
.carbonus-estimate-lead .alert_text { padding-left: 21px; font-size: inherit; line-height: inherit; }
/* 아이콘을 첫 줄 가운데에 놓는다 — 줄높이 25.5px(15px x 1.7)에서 (25.5 - 14) / 2 이다. */
.carbonus-lead .alert_text::after,
.carbonus-estimate-lead .alert_text::after { width: 14px; height: 14px; line-height: 14px; font-size: 10px; top: 5.75px; border-radius: 50%; }
.carbonus-lead .alert_text { display: block; margin-top: 10px; }
.carbonus-lead p { margin: 0; }
.carbonus-lead ul { margin: 4px 0; padding-left: 20px; list-style: disc; }
.carbonus-warning { color: #ed1c24; }
.cbs-flow {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 12px 0 20px;
  padding: 0;
  list-style: none;
}
.cbs-flow .cbs-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.cbs-flow .cbs-step-num {
  background: #e6eef5;
  color: #004687;
  font-size: 13px;
}
.cbs-flow .cbs-step-label {
  display: block;
  max-width: 7.5em;
  font-size: 12px;
  line-height: 1.45;
  color: #555;
  white-space: normal;
  text-align: center;
  word-break: keep-all;
}
.cbs-flow .cbs-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 18px;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 2px;
  background: #e6eef5;
  pointer-events: none;
}
@media (max-width: 640px) {
  /* 신청 및 지급 절차: 1행 1·2·3, 2행 4·5 */
  .cbs-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
    column-gap: 12px;
  }
  .cbs-flow .cbs-step { flex: unset; min-width: 0; }
  .cbs-flow .cbs-step:nth-child(4) { grid-column: 1; }
  .cbs-flow .cbs-step:nth-child(5) { grid-column: 2; }
  .cbs-flow .cbs-step-label { max-width: 8em; }
  .cbs-flow .cbs-step:not(:last-child)::after { display: none; }
  .cbs-flow .cbs-step-num { width: 32px; height: 32px; font-size: 12px; }
  .cbs-flow .cbs-step-label { font-size: 11px; }
}

.carbonus-phase { padding: 5px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.carbonus-link, .cb-info-link { padding: 0; border: 0; background: transparent; color: #004687; text-decoration: underline; cursor: pointer; }
/* 밑줄은 진행 표시 아래에 한 번만 긋는다. */
.carbonus-action-row { padding-bottom: 0; border-bottom: 0; }
.carbonus-action-row .cb-hint span { display: block; }
.carbonus-phase.tone-info { background: #e6eef5; color: #004687; }
.carbonus-phase.tone-ok { background: #e7f9ed; color: #1a8d3e; }
.carbonus-phase.tone-warn { background: #fff3e0; color: #a35e00; }
.carbonus-phase.tone-err { background: #fdeaea; color: #ed1c24; }
.carbonus-phase.tone-off { background: #f1f1f1; color: #666; }
/* 조회 화면은 마지막 칸 다음에 버튼 줄이 없다 — 신청 화면만큼 아래를 비울 이유도 없다. */
.carbonus-status { padding-bottom: 0; }
.carbonus-status > *:last-child,
.carbonus-status .cb-reveal > *:last-child { margin-bottom: 0; }

.carbonus-rail { margin: 0 0 16px; padding-bottom: 6px; }
/* 화면 크기와 상관없이 같은 모양 — 번호를 선으로 이어 놓고 아래에 지금 단계를 적는다. */
.carbonus-rail-main { position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0; padding: 10px 4px 0; }
.carbonus-rail-main::before { content: ""; position: absolute; left: 36px; right: 36px; top: 31px; height: 3px; background: #dde2e7; }
.carbonus-rail-main .carbonus-rail-step { flex: 0 0 auto; }
.carbonus-rail-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; border: 0; background: none; color: #55606b; cursor: pointer; }
.carbonus-rail-step > span:first-child { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid #fff; border-radius: 50%; background: #ccd2d8; color: #fff; font-size: 20px; font-weight: 700; }
/* 지나온 칸은 아직인 칸과 같은 회색이다 — 파랑 하나만 앞에 서고, 지났다는 말은 체크가 한다. */
.carbonus-rail-step.active > span:first-child { background: #004687; color: #fff; }
/* 이름은 아래 한 줄이 대신 말한다. 화면에서만 감추고 읽기 도구에는 남긴다. */
.carbonus-rail-step > .carbonus-rail-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.carbonus-rail-main div.carbonus-rail-step { cursor: default; }
.carbonus-rail-now { display: block; margin: 0; padding: 0; color: #222; font-size: 23px; font-weight: 700; text-align: center; word-break: keep-all; }
/* 단계 제목과 안내 버튼을 한 줄에 놓는다. 제목이 길면 버튼이 아래로 접힌다. */
.carbonus-rail-now-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 24px; padding-bottom: 1rem; }
.carbonus-rail-now-row .carbonus-rail-now { margin: 0 auto; }
/* 진행 표시 아래에 서는 안내 버튼 줄. */
.carbonus-rail-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.carbonus-rail-actions .fv-notice-btn { position: static; flex: 0 0 auto; }
@media only screen and (max-width: 480px) {
  .carbonus-rail-actions { width: fit-content; min-width: 80%; max-width: 100%; margin-left: auto; margin-right: auto; }
  .carbonus-rail-actions .fv-notice-btn { flex: 1 1 auto; }
}
.carbonus-upload-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.carbonus-upload { min-height: 158px; padding: 20px; border: 1px solid #eee; border-radius: 12px; }
.carbonus-upload h4 { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: #222; }
.carbonus-upload > p { min-height: 20px; margin: 0 0 12px; color: #888; font-size: 13px; }
.carbonus-upload .cb-upload-drop { margin-top: 18px; padding: 28px 16px; }
.carbonus-file-actions { display: flex; gap: 8px; margin-top: 12px; }
/* base.css 의 .btn 은 width:100% 라 줄어들지 않으면 칸을 뚫는다. */
.carbonus-file-actions .btn { flex: 1 1 0; width: auto; min-width: 0; }
.carbonus-submit-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ddd; color: #666; font-size: 13px; }
.carbonus-submit-bar .btn { margin-left: 0; }
.carbonus-estimate-lead p { margin: 0; color: #888; font-size: 15px; line-height: 1.7; }
/* base.css 의 span.alert_text 는 줄높이가 20px 고정이라 여러 줄이 되면 붙어 보인다. */
.carbonus-estimate-lead .alert_text { display: block; margin-top: 8px; }
/* 값은 신청 내용 표와 같은 두 칸 짜리로 적는다 — 줄 수가 달라져도 빈 칸이 생기지 않는다. */
.carbonus-estimate .cb-review-table { margin-top: 18px; }
/* 값이 글자뿐이라 입력칸에 맞춘 라벨 여백·폭을 쓰지 않는다. */
.carbonus-estimate .cb-review-table td:first-child {
    width: 120px;
    padding-top: 8px;
}
.carbonus-estimate .cb-review-table td:last-child { font-weight: 700; text-align: right; }
.carbonus-saving > p { color: #666; }
.carbonus-saving-list { max-height: 228px; overflow-y: auto; border-top: 1px solid #ddd; }
.carbonus-saving-list div { display: grid; grid-template-columns: 130px 1fr; min-height: 38px; align-items: center; border-bottom: 1px solid #eee; font-size: 13px; }
.carbonus-saving-list span:nth-child(2) { text-align: right; }
.carbonus-dialog-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0, 0, 0, .45); }
.carbonus-dialog {
  width: min(680px, 90vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.carbonus-dialog header { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 20px 24px; border-bottom: 1px solid #eee; }
.carbonus-dialog header h3 { margin: 0; font-size: 20px; font-weight: 600; }
.carbonus-dialog header button { border: 0; background: transparent; font-size: 28px; color: #999; line-height: 1; cursor: pointer; }
.carbonus-dialog > div { flex: 1; min-height: 0; overflow-y: auto; padding: 24px; }
.cb-notice-group { margin: 18px 0; padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 12px; }
.cb-notice-group p { margin: 0 0 8px; }
.cb-notice-group ol { margin: 0; padding-left: 22px; line-height: 1.8; list-style-type: decimal; }
.cb-notice-group ol > li { display: list-item; margin-bottom: 6px; }
.cb-notice-sub { display: block; margin-top: 4px; color: #666; font-size: 13px; line-height: 1.6; }
ul.cb-notice-sub { padding-left: 18px; list-style: disc; }


.carbonus-past { padding-top: 0; padding-bottom: 0; }
.carbonus-past .carbonus-past-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 16px 0; cursor: pointer; color: inherit; text-align: left; font: inherit; }
.carbonus-past .carbonus-past-head h3 { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.carbonus-past .carbonus-past-count { font-size: 11px; font-weight: 600; color: #666; background: #f1f1f1; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.carbonus-past .carbonus-past-chev { font-size: 11px; color: #888; }
.carbonus-past .carbonus-past-list { list-style: none; margin: 0; padding: 0 0 16px; }
.carbonus-past .carbonus-past-list li { padding: 11px 0; border-top: 1px solid #ddd; }
.carbonus-past .carbonus-past-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carbonus-past .carbonus-past-no { font-size: 12.5px; color: #666; }
.carbonus-past .carbonus-past-car { font-size: 12.5px; color: #222; flex: 1; min-width: 0; }
.carbonus-past .carbonus-past-meta { margin: 5px 0 0; font-size: 11.5px; line-height: 18px; color: #777; }
.carbonus-mock-note { margin: 10px 0 0; font-size: 11px; color: #888; }
.carbonus-resubmit .carbonus-count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #666; font-variant-numeric: tabular-nums; }
.carbonus-resubmit .carbonus-reject-reason { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; color: #ed1c24; background: #fdeced; font-size: 14px; line-height: 1.45; }
.carbonus-resubmit .carbonus-reject-reason.carbonus-reject-notice { margin: 0 0 12px; }
.carbonus-reject-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #ed1c24; color: #fff; font-size: 12px; font-weight: 700; vertical-align: middle; }

.carbonus-file-slot { margin: 8px 0 16px; padding: 0; }
.carbonus-file-slot .cb-file-preview { margin: 0 auto; }
.carbonus-file-pair, .carbonus-photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.carbonus-photo-grid { margin-top: 8px; }
.carbonus-file-pair .carbonus-file-slot, .carbonus-photo-grid .carbonus-file-slot { min-width: 0; }
.carbonus-file-slot figcaption {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.carbonus-file-slot.is-rejected figcaption { color: #ed1c24; background: #fdeced; }
.carbonus-file-slot.is-new figcaption { color: #004687; background: #e6eef5; }
.carbonus-file-slot figcaption { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 10px; }
.carbonus-file-slot.is-prior figcaption { color: #666; background: #f1f1f1; }
.carbonus-file-slot.is-prior .cb-file-preview { border-color: #ddd; opacity: 0.85; }
.carbonus-file-slot.is-rejected .cb-file-preview { border-color: #f3c7c9; opacity: 0.85; }
.carbonus-file-slot.is-new .cb-file-preview { border-color: #a9c3da; }
.carbonus-prior-modal-label { margin: 0 0 10px; font-size: 13px; color: #666; }

.carbonus-lock-note { margin: 0 0 12px; font-size: 13px; color: #777; line-height: 1.7; }
/* 제출한 신청 내용은 화면 맨 아래에서 접혀 있다. */
.carbonus-submitted-fold { margin-top: 24px; }
.carbonus-submitted-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 18px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  color: #222;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.carbonus-submitted-toggle:hover { border-color: #a9c3da; }
.carbonus-submitted-fold .cb-review-block h4 { font-size: 16.2px; }
@media only screen and (max-width: 480px) {
    .carbonus-submitted-fold .cb-review-block h4 { font-size: 14.4px; }
}
.carbonus-submitted-caret { color: #004687; font-size: 12px; }
.carbonus-action-row .carbonus-todo-targets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.carbonus-action-row .carbonus-target { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #f1f1f1; color: #666; border: 1px solid #ddd; }
.carbonus-saving .carbonus-saving-hero { display: flex; align-items: center; gap: 16px; margin: 10px 0 0; padding: 16px 18px; background: #e6eef5; border-radius: 8px; }
.carbonus-saving .carbonus-saving-hero-label { display: block; font-size: 11.5px; color: #004687; margin-bottom: 4px; }
.carbonus-saving .carbonus-saving-hero-value { display: block; font-size: 26px; line-height: 1.2; font-weight: 700; color: #004687; }
.carbonus-saving .carbonus-saving-hero .btn { margin-left: auto; flex: none; }
.carbonus-saving .carbonus-saving-hero .btn:disabled { opacity: .45; cursor: not-allowed; }
.carbonus-saving .carbonus-saving-totals { margin: 10px 0 0; font-size: 12px; color: #666; line-height: 1.7; }
.carbonus-saving .carbonus-saving-list { list-style: none; margin: 14px 0 0; padding: 0; max-height: 228px; overflow-y: auto; border-top: 1px solid #ddd; }
.carbonus-saving .carbonus-saving-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eee; font-size: 12.5px; }
.carbonus-saving .carbonus-saving-month { flex: none; width: 88px; color: #666; }
.carbonus-saving .carbonus-saving-detail { flex: 1; text-align: right; color: #222; }
.carbonus-sticker-modal {
  max-width: min(960px, 94vw);
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.carbonus-sticker-modal .cb-modal-body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}
.carbonus-sticker-manual .con06 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.carbonus-sticker-manual { width: 100%; max-width: 100%; margin-bottom: 30px; }
/* 상표 한 벌이 한 줄을 쓰고, 전면·측면·후면은 그 안에서 나란히 선다. */
.carbonus-sticker-manual .con06 ul { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; padding: 0; list-style: none; }
.carbonus-sticker-manual .con06 ul li { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; min-width: 0; box-sizing: border-box; background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px 20px; }
.carbonus-sticker-manual .con06 ul li .carbonus-sticker-head { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; background: transparent; }
.carbonus-sticker-manual .con06 ul li h3 { flex: 0 0 auto; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: #222; text-align: left; }
/* 한 줄에 들어가면 제목 옆에 서고, 넘치면 통째로 다음 줄로 내려간다. */
.carbonus-sticker-manual .con06 ul li .carbonus-sticker-head .alert_text { flex: 0 1 auto; min-width: min(100%, max-content); }
.carbonus-sticker-manual .con06 ul li div:not(.carbonus-sticker-head) { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0; background: transparent; }
.carbonus-sticker-manual .con06 ul li div img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin: 0; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.carbonus-sticker-manual .con06 ul li div strong { font-size: 13px; font-weight: 600; color: #222; }
/* front.css 의 .car_bonus_info span.alert_text 가 20px 아이콘을 씌워 글씨와 어긋난다. */
.carbonus-sticker-manual .con06 span.alert_text {
  display: inline-block;
  margin: 0;
  padding-left: 22px;
  color: #ed1c24;
  font-size: 14px;
  line-height: 1.6;
}
/* 아이콘을 첫 줄 가운데에 놓는다 — 줄높이 22.4px(14px x 1.6)에서 (22.4 - 15) / 2 이다. */
.carbonus-sticker-manual .con06 span.alert_text::after {
  width: 15px;
  height: 15px;
  line-height: 15px;
  font-size: 10.5px;
  top: 3.7px;
  border-radius: 50%;
}

@media only screen and (max-width: 768px) {
  .sub_content.car_bonus_write .linemap_menu ul { max-width: 500px; gap: 0; flex-wrap: nowrap; justify-content: center; }
  .sub_content.car_bonus_write .linemap_menu li { flex: 0 0 50%; width: 50%; min-width: 0; background-position: right 20px top 22px !important; }
  .sub_content.car_bonus_write .linemap_menu li.active { background-position: right 20px top 22px !important; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(1) { border-radius: 25px 0 0 25px !important; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(1).active { border-radius: 25px 0 0 0 !important; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(1).active > div { border-radius: 0 0 0 25px; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(2) { border-radius: 0 25px 25px 0 !important; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(2).active { border-radius: 0 25px 0 0 !important; }
  .sub_content.car_bonus_write .linemap_menu li:nth-child(2).active > div { border-radius: 0 0 25px 25px; }
  /* ul 높이 고정 — 펼침 시 아래 content_box 를 밀지 않고 덮음 (fab_bonus_list 와 동일) */
  .sub_content.car_bonus_write .linemap_menu { --linemap-pill-h: 52px; }
  .sub_content.car_bonus_write .linemap_menu ul {
    height: var(--linemap-pill-h);
    align-items: flex-start;
    overflow: visible;
  }
  .sub_content.car_bonus_write .linemap_menu li {
    align-self: flex-start;
    position: relative;
    z-index: 1;
  }
  .sub_content.car_bonus_write .linemap_menu li.active { z-index: 2; }
  .sub_content.car_bonus_write .linemap_menu li > a {
    width: 100%; min-width: 0; min-height: 50px; height: auto;
    padding: 10px 40px 10px 14px; box-sizing: border-box;
    display: flex; align-items: center;
    font-size: 12px; line-height: 1.3;
    white-space: normal; word-break: keep-all;
  }
  .sub_content.car_bonus_write .linemap_menu li > div > a { width: 100%; min-width: 0; height: 36px; padding: 0 12px 0 20px; box-sizing: border-box; font-size: 13px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 밑단 CSS 가 무엇으로 깔았든 한 줄을 보장하려고 display 부터 다시 잡는다. */
  .sub_content.car_bonus_write .sub_title.center .line_map { display: flex; flex-wrap: nowrap; justify-content: center; overflow-x: auto; font-size: 12px; }
  .sub_content.car_bonus_write .sub_title.center .line_map li { flex: 0 0 auto; white-space: nowrap; }

  /* 알약 메뉴 바로 아래에서 레일을 시작한다 — 모바일은 위를 비울 자리가 없다. */
  .sub_content.car_bonus_write .cb-section { padding-top: 0; }

  .cb-title-row { flex-wrap: wrap; gap: 10px; }
  .cb-address-row { flex-direction: column; gap: 0; }

  .carbonus-document-list > li > strong { display: block; margin-bottom: 4px; color: #444; }
  .carbonus-document-list ul { margin: 0; padding-left: 18px; list-style: circle; }
  .carbonus-document-list ul > li { margin-bottom: 3px; }

  .cb-modal-overlay { padding: 10px; }
  .cb-sticker-size-modal { width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
  .cb-sticker-size-modal .cb-modal-body { overflow-x: auto; padding: 16px 12px; }
  .cb-sticker-table-wrap { margin: 0 -4px; }
  /* 모바일: 가로 스크롤 대신 4열을 뷰에 맞춤 — 모델 열만 줄여 감쌈 */
  .cb-sticker-table { min-width: 0; width: 100%; }
  .cb-sticker-table th { padding: 8px 4px; font-size: 12px; white-space: normal; }
  .cb-sticker-table td { padding: 8px 4px; font-size: 12px; }
  .cb-sticker-table th:nth-child(1) { width: 48px; }
  .cb-sticker-table th:nth-child(2) { width: auto; }
  .cb-sticker-table th:nth-child(3),
  .cb-sticker-table th:nth-child(4) { width: 58px; }
  .cb-sticker-table td.cb-sticker-model { font-size: 11px; line-height: 1.4; }
  .cb-sticker-table td.cb-sticker-size { font-size: 13px; font-weight: 600; }

  .carbonus-sticker-manual .con06 ul { gap: 12px; margin-top: 16px; }
  .carbonus-sticker-manual .con06 ul li { grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; padding: 14px 16px; }
  .carbonus-sticker-manual .con06 ul li div h4 { width: auto; margin-bottom: 12px; padding: 7px 12px; font-size: 14px; }

  .cb-saving-wrap { border: 1px solid #eee; border-radius: 12px; background: #fff; }
  .cb-saving-table th { padding: 12px 10px; font-size: 13px; }
  .cb-saving-table td { padding: 12px 10px; font-size: 13px; }
  .cb-saving-table tbody tr:last-child td { border-bottom: 0; }
}

@media (max-width: 960px) {
  .carbonus-hub { padding: 0 8px; }
}

@media (max-width: 600px) {
  .carbonus-card { padding: 18px; }
  .carbonus-upload-grid { grid-template-columns: 1fr; }
  .carbonus-submit-bar .btn { width: 100%; }
  .carbonus-card-head { flex-wrap: wrap; }
  .carbonus-card-head > span, .carbonus-card-head > strong { margin-left: 0; }
}
/* 폰트는 줄이지 않는다 — 이 링크는 폰에서 한 줄이 물리적으로 불가능하다.
   fs18 필요폭 381px, 가용폭은 360px(430 단말)~290px(360 단말)로 전 구간 모자란다.
   한 줄로 만들려면 390px 에서 15px / 360px 에서 14px 까지 내려야 해 링크로서 너무 작고,
   fs16 으로 줄여도 필요폭 331px 라 360·375px 에서는 여전히 2줄이라 축소 이득이 없다.
   → 목표를 '한 줄'이 아니라 '어절 경계에서 끊기'로 두고 keep-all 만 적용한다
     (`…안내 공지 / 바로가기`. 470px 이상부터 한 줄). */
.cb-hint.cb-hint-warning {
    color: #ff3b30;
}
.cb-nav .btn.cb-nav-delete:hover:not(:disabled) {
    border-color: #004687;
    color: #004687;
    background-color: #fff;
}

/* ── /signup 게이트웨이 — 레거시 members_choice 반응형 ──
   원본(front02.css)은 데스크톱 800px·li 385px·하단 우측패딩 380px 고정 → 태블릿 깨짐·모바일 넘침.
   상단 2장=유연 2단(50%), 하단 2장=풀폭+아이콘 여백, 폰(≤640)은 전부 1열 + 아이콘 겹침 방지. */
.signup_wrap .members_choice { width: 100%; max-width: 800px; }
.signup_wrap .members_choice li { width: calc(50% - 8px); box-sizing: border-box; }
.signup_wrap .members_choice li.bottom { width: 100%; }
.signup_wrap .members_choice li.bottom a { padding: 30px 120px 30px 50px; }

@media only screen and (max-width: 640px) {
  .signup_wrap .members_choice { flex-direction: column; }
  .signup_wrap .members_choice li,
  .signup_wrap .members_choice li.top_right,
  .signup_wrap .members_choice li.bottom { width: 100%; min-height: 0; margin-bottom: 14px; }

  /* 상단형 카드: 아이콘 우하단, 글씨와 안 겹치게 하단 여유 */
  .signup_wrap .members_choice li a { padding: 24px 24px 72px 24px; }
  .signup_wrap .members_choice li i { left: auto; right: 24px; bottom: 20px; transform: none; }

  /* 하단형 카드(우대/카카오): 아이콘 우측 중앙, 글씨는 우측 여백 확보 */
  .signup_wrap .members_choice li.bottom a { padding: 22px 74px 22px 24px; }
  .signup_wrap .members_choice li.bottom i { right: 24px; top: 50%; bottom: auto; transform: translateY(-50%); }

  .signup_wrap .members_choice span.title { font-size: 20px; line-height: 26px; margin-bottom: 12px; }
  .signup_wrap .members_choice span.text01 { font-size: 14px; line-height: 22px; margin-bottom: 12px; }
  .signup_wrap .members_choice span.text02 { font-size: 13px; line-height: 21px; }
}