* { margin: 0; padding: 0; box-sizing: border-box; }
ul { list-style: none; }
img { width: 100%; vertical-align: top; display:block; }
a { text-decoration: none; color: inherit; }

body {
    font-family: 'Pretendard';
    background-color: #111;
    color: #fff;
    line-height: 1.6;
}

@font-face{
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendardvarialbe.woff2')
    format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

/* ---------------------------------------------- */

section{ width: 100%; }

/* breadcrumb */
section .breadcrumb ul{
    color: #BBB;
    display: flex;
    width: 80%;
    margin: 0 auto;
    padding-top: 100px;
    font-size: 14px;
    font-weight: 200;
}
section .breadcrumb ul li{ margin-right: 5px; }

/* detailhead */
section .detailhead{
    width: 80%;
    margin: 50px auto 0;
}
section .detailhead .cm-label{
    background-color: #FF6D00;
    width: 97px;
    font-size: 16px;
    font-weight: 300;
    padding: 2px 8px;
}

/* title */
section .mainTit{ width: 80%; margin: 0 auto; }
section .mainTit h1{ font-weight: 200; font-size: 48px; margin-bottom: 10px; }
section .mainTit .date{ font-weight: 200; font-size: 18px; color: #BBB; }

/* 종료 문구(타이틀 밑) - 기존 스타일 유지 */
section .mainTit .endedUnderTitle{
    margin: 6px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #FF2A2A;
    text-transform: uppercase;
}

/* ✅ 배지 UI: PC/모바일 공통(전역 적용) */
section .mainTit .endedUnderTitle{
    /* 문장 대신 배지를 넣었으니 레이아웃용으로 flex 적용 */
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ✅ 배지 공통 */
.status-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1;
    letter-spacing: -0.2px;

    /* ✅ endedUnderTitle의 빨간 글자색이 상속되지 않도록 */
    color: #fff;
    text-transform: none;
    white-space: nowrap;
}

/* ✅ 사진처럼: 회색(종료) / 와인(조기마감) */
.status-end{
    background: #555;
}
.status-inactive{
    background: #6b0f0f;
}

/* (선택) READY/ACTIVE도 쓰게 되면 확장 가능
.status-ready{ background:#444; }
.status-active{ background:#FF6D00; }
*/

/* line */
section .line{
    width: 80%;
    margin: 50px auto;
    border-top: 1px solid #BBB;
}

/* main visual */
section .main-visual{
    width: 80%;
    margin: 0 auto;
}
section .main-visual img{
    border-radius: 0;
}
section .main-visual h2{
    height: 200px;
    line-height: 200px;
    font-size: 40px;
    font-weight: 200;
}

/* ------------------------------------- table */
section table{
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
}

/* 공통 td 텍스트 가독성 */
section .genesis-table td{
    font-weight: 200;
    color: #fff;
}

/* first-box */
section .genesis-table .first-box th{
    text-align: left;
    width: 15%;
    padding-top: 30px;
    padding-bottom: 80px;
    border-top: 1px solid #BBB;
}
section .genesis-table .first-box td{
    border-top: 1px solid #BBB;
    padding-top: 30px;
    padding-bottom: 80px;
}
section .genesis-table .first-box .gap{
    width: 5%;
    border: none;
}

/* second-box */
section .genesis-table .second-box th{
    text-align: left;
    width: 15%;
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid #BBB;
}
section .genesis-table .second-box td{
    border-top: 1px solid #BBB;
    padding-top: 30px;
    padding-bottom: 30px;
}
section .genesis-table .second-box .gap{
    width: 5%;
    border: none;
}

/* third-box */
section .genesis-table .third-box th{
    text-align: left;
    width: 15%;
    padding-top: 30px;
    border-top: 1px solid #BBB;
}
section .genesis-table .third-box td{
    border-top: 1px solid #BBB;
    padding-top: 30px;
}
section .genesis-table .third-box .gap{
    width: 5%;
    border: none;
}

/* -------------------------------------- 상품정보(description) : 2컬럼 레이아웃 */
section .detailInfo{
    display: flex;
    width: 80%;
    margin: 80px auto 0;
}

section .detailInfoLabel{
    width: 15%;
    border-top: 1px solid #BBB;
    padding-top: 30px;
}

section .detailInfoLabel p{
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

section .detailInfo .gap{
    width: 5%;
}

section .detailInfoBody{
    width: 80%;
    border-top: 1px solid #BBB;
    padding-top: 30px;
}

/* ✅ 핵심: 줄바꿈/불릿/긴 문장 그대로 + 자동 줄바꿈 */
section .descPre{
    color: #fff;
    font-weight: 200;
    font-size: 14px;
    line-height: 1.9;

    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* -------------------------------------- 목록 버튼 */
section .btn{
    width: 80%;
    margin: 80px auto 120px;
    display: flex;
    justify-content: flex-end; /* 오른쪽 아래 */
}

/* a를 버튼처럼 */
section .btn .btnBack{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 26px;
    min-width: 96px;
    min-height: 40px;

    background: #000;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-decoration: none;

    cursor: pointer;

    transition: background-color .2s ease,
    color .2s ease,
    border-color .2s ease;
}

section .btn .btnBack:hover{
    background-color: #FF6D00;
    border-color: #FF6D00;
    color: #fff;
}

/* =========================================================
   ===== matched cars (dark theme) =====
   ========================================================= */

/* "대상" 텍스트(현대, SUV 등) 위에 살짝 여백 */
.targetText{
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 200;
    color: rgba(255,255,255,0.85);
}

.matchedCarsSection { margin-top: 8px; }

.matchedCarsGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}
@media (max-width:1100px){
    .matchedCarsGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
    .matchedCarsGrid{ grid-template-columns:repeat(1,minmax(0,1fr)); }
}

/* ✅ 다크 카드로 변경 */
.matchedCarCard{
    display:block;
    padding:18px 18px 16px;

    border-radius:14px;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);

    text-decoration:none;
    color: rgba(255,255,255,0.92);

    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);

    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
    min-height:120px;
}
.matchedCarCard:hover{
    transform:translateY(-2px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}

.matchedCarTitle{
    font-size:18px;
    font-weight:700;
    line-height:1.25;
    margin-bottom:8px;
    letter-spacing: -0.2px;
    color: rgba(255,255,255,0.96);
}

.matchedCarSub{
    font-size:13px;
    font-weight:200;
    color: rgba(255,255,255,0.70);
    margin-bottom:12px;
}
.matchedCarSub .dot{
    margin:0 6px;
    color: rgba(255,255,255,0.35);
}

.matchedCarTag{
    display:inline-flex;
    align-items:center;
    height:28px;
    padding:0 12px;
    border-radius:999px;

    border:1px solid rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.35);

    font-size:12px;
    font-weight:600;
    color: rgba(255,255,255,0.88);
    width:fit-content;
}

.matchedCarsEmpty{
    padding:12px 0;
    color: rgba(255,255,255,0.60);
    font-size:13px;
    font-weight:200;
}

.event-float-nav {
    position: fixed;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 160px;
    padding: 12px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.event-float-nav__item {
    display: block;
    padding: 10px 12px;

    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;

    border-radius: 10px;
    border: 1px solid transparent;

    background: rgba(255, 255, 255, 0.04);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.event-float-nav__item:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.event-float-nav__item:active {
    transform: translateY(0);
    box-shadow: none;
}

.event-float-nav__item--muted {
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.03);
}

/* ✅ 작은 화면에서는 우측 중간 고정이 레이아웃을 가릴 수 있어서 하단 바 형태로 변경 */
@media (max-width: 980px) {
    .event-float-nav {
        width: auto;
        right: 12px;
        left: 12px;
        top: auto;
        bottom: 14px;
        transform: none;

        flex-direction: row;
        justify-content: space-between;
        gap: 8px;

        padding: 10px;
    }

    .event-float-nav__item {
        flex: 1;
        text-align: center;
        padding: 10px 8px;
    }
}

/* ✅ 비활성 링크/카드 */
.event-float-nav__item.is-disabled,
.matchedCarCard.is-disabled{
    opacity: .4;
    pointer-events: none;
    cursor: default;
}

/* -------------------------------------- 혜택(Policy) */
.benefitList{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.benefitItem{
    font-weight: 200;
    font-size: 15px;
    color: #fff;
    line-height: 1.6;
    padding-left: 14px;
    position: relative;
}

.benefitItem::before{
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #FF6D00;
}

.benefitEmpty{
    font-weight: 200;
    font-size: 14px;
    color: #BBB;
}