@charset "UTF-8";

/* ========================================
   추천 (trips.php) — Discover 큐레이션
   Figma Frame 470/472/518/480/490~496/296 기준.
   수치는 244~768 구간 clamp (Figma px = 768 기준 max)
======================================== */

/* 타이틀 블록(Frame 505)은 공용 .page-head (css/page-head.css) 사용 — 상단 116, eyebrow 20, gap 27, heading 40 */

/* 본문 — Frame 506 (padding 40 0, gap 50) */
.discover-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-50);
    padding-block: var(--space-40);
}

/* ========================================
   추천 배너 (공통) — Frame 472 / 518
======================================== */
.discover-hero {
    width: 100%;
    padding: var(--space-40);
    background: var(--gradient-hero-card);
    box-shadow: var(--shadow-hero);
    border-radius: var(--radius-50);
}

/* JS가 선택하지 않은 배너는 .discover-hero--empty의 flex 규칙보다 hidden을 우선한다. */
.discover-hero[hidden] {
    display: none !important;
}

/* 찜 배지 칩 — Frame 473 (11px 19px, gap 14, glass) */
.discover-hero__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-14);
    width: clamp(15.3rem, calc(12.8786rem + 9.9237vw), 20.5rem);
    height: clamp(3.68rem, calc(3.4379rem + 0.9924vw), 4.2rem);
    padding: 0 var(--space-19);
    background: var(--color-glass);
    border-radius: 999rem;
    font-family: "Tmoney RoundWind", "Pretendard", sans-serif;
    font-size: var(--fs-15);
    font-weight: 800;
    line-height: clamp(1.68rem, calc(1.5697rem + 0.3817vw), 2rem) !important;
    color: #FFFFFF;
    white-space: nowrap;
}

.discover-hero__chip-heart {
    flex: 0 0 auto;
    width: clamp(1rem, calc(0.813rem + 0.766vw), 1.4rem);
    height: clamp(1rem, calc(0.813rem + 0.766vw), 1.4rem);
    fill: #FFFFFF;
    stroke: #FFFFFF;
    stroke-width: 2;
}

.discover-hero__title {
    display: block;
    max-width: clamp(7.4661rem, 30.599vw, 23.5rem);
    font-size: var(--fs-37);
    font-weight: 800;
    line-height: var(--lh-base);
    color: #FFFFFF;
    word-break: keep-all;
}

.discover-hero__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-14);
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: var(--fs-20);
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;
}

.discover-hero__arrow {
    width: var(--size-icon);
    height: var(--size-icon);
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
}

/* ── 찜한 여행지가 있을 때 — Frame 472 ── */
.discover-hero__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-25);
}

.discover-hero__col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    gap: var(--space-60);
    z-index: 1;
}

.discover-hero__col {}

/* Frame 502: (메타+제목) ↔ 정보 보기 gap 32 ≈ --space-33 재사용 */
.discover-hero__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-33);
}

.discover-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-19);
}

.discover-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    font-size: var(--fs-15);
    font-weight: 400;
    color: #FFFFFF;
}

.discover-hero__meta span {
    color: #FFFFFF;
}

.discover-hero__dot {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    background: #FFFFFF;
}

/* Frame 477: 국기 원형 158 */
.discover-hero__flag {
    flex: 0 0 auto;
    display: block;
    width: clamp(5.0198rem, 20.5729vw, 15.8rem);
    height: clamp(5.0198rem, 20.5729vw, 15.8rem);
    background: #FFFFFF;
    border-radius: 50%;
    overflow: hidden;
}

.discover-hero__flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── 찜한 여행지가 없을 때 — Frame 518 (column, gap 60) ── */
.discover-hero--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-60);
}

.discover-hero__empty-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-19);
}

.discover-hero__title--empty {
    max-width: clamp(10.8339rem, 44.401vw, 34.1rem);
}

.discover-hero__desc {
    /* max-width: clamp(6.9896rem, 28.6458vw, 22rem); */
    font-size: var(--fs-15);
    font-weight: 400;
    color: #FFFFFF;
}

.discover-hero__link--strong {
    font-weight: 800;
}

/* 좁은 화면에서는 국기를 하단 우측에 고정해 제목이 지나치게 잘게 줄바꿈되지 않게 한다. */
@media (max-width: 450px) {
    .discover-hero__row {
        position: relative;
        display: block;
    }

    .discover-hero__col,
    .discover-hero__body,
    .discover-hero__text {
        width: 100%;
    }

    .discover-hero__title {
        max-width: 100%;
    }

    .discover-hero__flag {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    /* 찜이 없을 때의 안내 배너 — 모바일 Frame 518 비율 */
    .discover-hero--empty {
        /* width: calc(100% + var(--inner-padding-x) + var(--inner-padding-x) - 2rem); */
        /* margin-inline: calc(1rem - var(--inner-padding-x)); */
        /* padding: 2.5rem; */
        gap: 4rem;
    }

    .discover-hero--empty .discover-hero__chip {
        /* width: 15.3rem; */
        height: 3.68rem;
        padding-inline: 1.3rem;
    }

    .discover-hero__title--empty {
        max-width: 25rem;
        line-height: 1.25 !important;
    }

    .discover-hero__desc {
        /* max-width: 11rem; */
        line-height: 1.4 !important;
    }
}

/* ========================================
   키워드 탭 (Swiper) — Frame 480 (gap 20)
======================================== */
.discover-tabs {
    width: 100%;
    margin: 0;
    /* 가로는 잘라내고 세로는 열어둔다 — 활성 탭의 box-shadow가 위아래로 잘리지 않게.
       clip 은 hidden 과 달리 다른 축의 visible 을 auto 로 강등시키지 않아 이 조합이 성립한다.
       (이전 코드의 `overflow: visible !important` 는 !important 단축속성이라 뒤에 온
        `overflow-x: clip` 을 무력화했고, 그 결과 탭이 컨테이너 밖 350px 까지 그려지면서
        body 의 overflow-x:clip 에만 의존해 가려지고 있었다) */
    overflow-x: clip;
    overflow-y: visible;
}

.discover-tabs .swiper-slide {
    width: auto;
    margin-right: var(--space-20);
}

.discover-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-17) var(--space-33);
    border: 0;
    border-radius: 999rem;
    background: var(--color-bg-gray);
    font-family: inherit;
    font-size: var(--fs-25);
    font-weight: 800;
    color: var(--color-text-sub);
    white-space: nowrap;
    cursor: pointer;
    /* Swiper 는 button 위에서 touchstart 의 preventDefault 를 건너뛴다(폼 요소는 탭이
       가능해야 하므로). 그래서 버튼의 기본 touch-action:auto 상태에서는 가로 제스처가
       브라우저 쪽으로 새고 스와이프가 시작되지 않는 일이 생긴다.
       세로만 브라우저에 넘기고 가로는 Swiper 가 가져가도록 명시한다. */
    touch-action: pan-y;
}

.discover-tab.is-active {
    background: var(--gradient-chip-active);
    box-shadow: 0px 4px 4px rgba(255, 107, 107, 0.25);
    color: #FFFFFF;
}

/* ========================================
   국가 리스트 — Frame 507/492 (리스트 gap 35, 리스트 ↔ 페이징 gap 40)
======================================== */
.discover-list-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-40);
}

.discover-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-35);
    list-style: none;
}

/* Frame 490: row gap 25 */
.discover-card {
    display: flex;
    align-items: center;
    gap: var(--space-25);
}

.discover-card__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-25);
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* Frame 489: 122 box, pad 20, #F1F0F5, radius 40 */
.discover-card__thumb {
    flex: 0 0 auto;
    display: flex;
    width: clamp(3.876rem, 15.8854vw, 12.2rem);
    height: clamp(3.876rem, 15.8854vw, 12.2rem);
    padding: var(--space-20);
    background: var(--color-bg-gray);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-40);
}

/* Frame 486: 82 inner, radius 29 */
.discover-card__thumb-inner {
    display: block;
    width: 100%;
    height: 100%;
    background: #989898;
    box-shadow: 0px 14px 42px rgba(20, 20, 43, 0.19);
    border-radius: var(--radius-29);
    overflow: hidden;
}

.discover-card__thumb-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Frame 488: 이름/설명 gap 17 */
.discover-card__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-17);
}

.discover-card__name {
    font-size: var(--fs-26);
    font-weight: 800;
    color: var(--color-text);
}

.discover-card__desc {
    font-size: var(--fs-22);
    font-weight: 400;
    color: var(--color-text-sub);
}

/* Frame 487: 하트 69 원형, 아이콘 34(≈49.3%) */
.discover-card__heart {
    width: clamp(4.4rem, calc(3.2359rem + 4.771vw), 6.9rem);
    height: clamp(4.4rem, calc(3.2359rem + 4.771vw), 6.9rem);
    background: var(--color-bg-gray);
    box-shadow: var(--shadow-soft);
    border-radius: 50%;
}

.discover-card__heart .heart-toggle__icon {
    width: 49.3%;
    height: 49.3%;
}

/* ========================================
   페이지네이션 — Frame 296 (49 버튼, gap 12)
======================================== */
.discover-paging {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
}

.discover-paging button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-page-btn);
    height: var(--size-page-btn);
    padding: 0;
    border: 0;
    border-radius: var(--radius-10);
    background: var(--color-bg-gray);
    font-family: 'Pretendard', sans-serif;   /* 디자인 지정: 숫자만 Pretendard */
    font-weight: 500;
    font-size: var(--fs-25);
    color: var(--color-text-sub);
    cursor: pointer;
}

.discover-paging button.is-active {
    background: var(--gradient-page-active);
    box-shadow: 0px 4px 4px rgba(222, 104, 143, 0.22);
    color: #FFFFFF;
}

.discover-paging button[disabled] {
    opacity: 0.4;
    cursor: default;
}

.discover-paging__arrow {
    width: clamp(0.8896rem, 3.6458vw, 2.8rem);
    height: clamp(0.8896rem, 3.6458vw, 2.8rem);
    fill: none;
    stroke: var(--color-text-sub);
    stroke-width: 2;
}