@charset "utf-8";

/* ========================================
   국가 정보 드로어 (바텀시트) — 전 페이지 공용
   Figma Frame 427 기준. 마크업: components/country_drawer.php
   수치는 244~768 구간 clamp (Figma px = 768 기준 max)
======================================== */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-backdrop);
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
}

.drawer-backdrop.is-open {
    opacity: 1;
}

.country-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 310;
    max-width: var(--inner-max-width);
    max-height: 50dvh;
    margin-inline: auto;
    background: var(--color-bg);
    border-radius: var(--radius-50) var(--radius-50) 0 0;
    box-shadow: 0px -14px 42px rgba(20, 20, 43, 0.04);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.country-drawer.is-open {
    transform: translateY(0);
}

/* 핸들 (탭하면 닫힘) — Frame 428: 91×10, top 30 */
.country-drawer__handle {
    position: relative;
    display: block;
    width: clamp(5.1911rem, 11.849vw, 9.1rem);
    height: clamp(0.6rem, 1vw, 1rem);
    margin: clamp(0.9531rem, 3.9062vw, 3rem) auto 0;
    padding: 0;
    border: 0;
    border-radius: 999rem;
    background: var(--color-line-gray);
    cursor: pointer;
}

/* 핸들 터치 영역 확장 (시각 크기 유지) */
.country-drawer__handle::after {
    content: "";
    position: absolute;
    inset: -1.7rem -3rem;
}

/* 콘텐츠 — Frame 447: left 52, top 100(핸들 30+10 아래 60), gap 40 */
.country-drawer__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
    margin-top: var(--space-60);
    padding-left: max(var(--inner-padding-x), var(--safe-left));
    padding-right: max(var(--inner-padding-x), var(--safe-right));
    padding-bottom: calc(clamp(2.7323rem, 11.1979vw, 8.6rem) + var(--safe-bottom));
}

/* ── 헤드: 국기 썸네일 + 국가명/수도/지역 + 하트 ── */
.country-drawer__head {
    display: flex;
    align-items: center;
    gap: clamp(0.9214rem, 3.776vw, 2.9rem);
}

/* Frame 433: 129 box, pad 18, #E8E8E8, radius 40 */
.country-drawer__thumb {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    width: clamp(4.0984rem, 16.7969vw, 12.9rem);
    height: clamp(4.0984rem, 16.7969vw, 12.9rem);
    padding: clamp(0.5719rem, 2.3438vw, 1.8rem);
    background: #E8E8E8;
    box-shadow: 0px 14px 42px rgba(20, 20, 43, 0.12);
    border-radius: var(--radius-40);
}

/* Frame 430: 93 inner, white, radius 36 */
.country-drawer__thumb-inner {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
    box-shadow: var(--shadow-soft);
    border-radius: clamp(1.1438rem, 4.6875vw, 3.6rem);
    overflow: hidden;
}

.country-drawer__flag {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.country-drawer__titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-20);
}

.country-drawer__name {
    font-size: var(--fs-33);
    font-weight: 800;
    line-height: var(--lh-base);
    color: var(--color-text);
}

.country-drawer__meta {
    display: flex;
    align-items: center;
    gap: var(--space-15);
    font-size: var(--fs-23);
    font-weight: 400;
    color: var(--color-text-mute);
    flex-wrap: wrap;
}

.country-drawer__meta span {
    color: var(--color-text-mute);
    white-space: nowrap;
}

.country-drawer__dot {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    background: var(--color-text-mute);
}

/* ── 하트 토글 (공용 컴포넌트) ── */
.heart-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: var(--color-bg-control);
    cursor: pointer;
    transform-origin: center;
}

.heart-toggle__icon {
    fill: none;
    stroke: var(--color-icon-mute);
    stroke-width: 2;
    
}

.heart-toggle.is-active .heart-toggle__icon {
    fill: var(--color-primary);
    stroke: var(--color-primary);
    animation: popping 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform;
}

/* 드로어 하트 — Frame 435: 73, #F1F3F8, radius 26, 아이콘 38 */
.country-drawer__fav {
    margin-left: auto;
    width: clamp(4.4rem, calc(3.0496rem + 5.5344vw), 7.3rem);
    height: clamp(4.4rem, calc(3.0496rem + 5.5344vw), 7.3rem);
    border-radius: clamp(0.826rem, 3.3854vw, 2.6rem);
}

.country-drawer__fav .heart-toggle__icon {
    width: 52%;
    height: 52%;
}

/* ── 한줄 소개 ── */
.country-drawer__tagline {
    font-size: var(--fs-23);
    font-weight: 400;
    color: var(--color-text-sub);
}

/* ── 정보 3열: 비행 시간 / 시차 / 추천 시즌 ── */
.country-drawer__info {
    display: flex;
    justify-content: space-between;
    gap: var(--space-25);
    flex-direction: column;
}

.country-drawer__info-col {
    flex: 1 1 0;
    min-width: 0;
}

.country-drawer__info-col dt,
.country-drawer__tips-title {
    font-size: var(--fs-19);
    font-weight: 400;
    color: var(--color-text-mute);
}

.country-drawer__info-col dd,
.country-drawer__tips {
    margin-top: var(--space-11);
    font-size: var(--fs-22);
    font-weight: 400;
    color: var(--color-text);
}

@keyframes popping {
    0% {
        transform: scale(1);
    }

    /* 크게 팝 */
    40% {
        transform: scale(1.45);
    }

    /* 제자리보다 살짝 작아짐 */
    65% {
        transform: scale(0.9);
    }

    /* 살짝 반동 */
    82% {
        transform: scale(1.08);
    }

    /* 제자리 안착 */
    100% {
        transform: scale(1);
    }
}