/* ==========================================================================
   (주)투어수다 - 메인페이지 홈 섹션 (히어로 아래 전체)
   _reference_source Home.tsx 및 하위 컴포넌트를 그대로 이식
   ========================================================================== */

.suda-home-section{
    max-width: 1280px;
    margin: 0 auto;
    padding-block: 56px;
    padding-inline: 24px;
}
.suda-home-inner{
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 24px;
}
.suda-home-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    row-gap: 28px;
    column-gap: 16px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.suda-home-head-center{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 64px;
}
.suda-home-head-center .suda-home-title{ margin-bottom: 0; }
.suda-home-title{
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--suda-gray-900);
    margin: 0 0 6px;
}
.suda-home-desc{
    font-size: 16px;
    font-weight: 700;
    color: var(--suda-gray-500);
    margin: 0;
}
.suda-home-more{
    font-size: 14px;
    font-weight: 700;
    color: var(--suda-blue);
    white-space: nowrap;
}
.suda-home-more:hover{ text-decoration: underline; }

/* ---------- 프로모션 배너 ---------- */
.suda-promo-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.suda-promo-card{
    position: relative;
    display: block;
    aspect-ratio: 16/8;
    border-radius: 32px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.suda-promo-card:hover .suda-promo-dim{ transform: scale(1.06); }
.suda-promo-dim{
    position: absolute;
    inset: -2px;
    background: linear-gradient(to right, rgba(0,0,0,.6), transparent 70%);
    transition: transform .7s ease;
}
.suda-promo-copy{
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 32px;
    color: #fff;
}
.suda-promo-eyebrow{ font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: oklch(78.5% 0.115 274.713); margin-bottom: 8px; }
.suda-promo-grid .suda-promo-card:nth-child(2) .suda-promo-eyebrow{ color: oklch(71.4% 0.203 305.504); }
.suda-promo-title{ font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 0 0 16px; }
.suda-promo-cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    background: #fff;
    color: var(--suda-gray-900);
    padding-block: 10px;
    padding-inline: 24px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}

/* ---------- 지역별 여행 카테고리 ---------- */
.suda-region-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.suda-region-tile{
    position: relative;
    display: block;
    height: 224px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(17,24,39,.08);
}
.suda-region-thumb{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform .7s ease;
}
.suda-region-tile:hover .suda-region-thumb{ transform: scale(1.15); }
.suda-region-dim{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background .2s ease;
}
.suda-region-tile:hover .suda-region-dim{ background: rgba(37,99,235,.45); }
.suda-region-icon{ font-size: 36px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.suda-region-flag{
    display: inline-block;
    width: 1em;
    height: 1em;
    object-fit: cover;
    border-radius: 999px;
    vertical-align: -0.15em;
}
/* 홈 EXPLORE REGIONS 큰 타일에서만 고정 크기(36px)로, 그 외(GNB 메가메뉴 등)는 주변 텍스트 크기(1em)에 맞춰 자동 조정 */
.suda-region-dim .suda-region-flag{
    display: block;
    width: 36px;
    height: 36px;
    vertical-align: baseline;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.suda-region-name{ font-size: 20px; font-weight: 500; color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(0,0,0,.3); }

/* ---------- 상품 카드 (ProductCard.tsx 이식, BEST PRODUCTS/CategorySection 공용) ---------- */
.suda-product-grid{
    --suda-product-cols: 4;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px 12px;
}
.suda-product-slider{ position: relative; }
.suda-product-viewport{ overflow: hidden; padding-block: 40px; margin-block: -40px; }
.suda-product-track{
    display: flex;
    gap: 12px;
    transition: transform .4s ease;
}
/* 한 화면에 보이는 카드 수 : 기본(모바일) 1개 → 480px~ 2개 → 768px~ 3개 → 1024px~ 4개 */
.suda-product-track .suda-product-card{
    flex: 0 0 100%;
    min-width: 0;
}
@media (min-width: 480px){
    .suda-product-track .suda-product-card{ flex-basis: calc((100% - 12px) / 2); }
}
@media (min-width: 768px){
    .suda-product-track .suda-product-card{ flex-basis: calc((100% - 24px) / 3); }
}
@media (min-width: 1024px){
    .suda-product-track .suda-product-card{ flex-basis: calc((100% - 36px) / 4); }
}
.suda-product-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--suda-gray-100);
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(17,24,39,.12);
    color: var(--suda-gray-700);
    font-size: 18px;
    z-index: 5;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.suda-product-nav:hover{ background: var(--suda-blue); color: #fff; border-color: var(--suda-blue); }
.suda-product-nav:disabled{ opacity: .35; cursor: default; pointer-events: none; }
.suda-product-nav-prev{ left: -8px; }
.suda-product-nav-next{ right: -8px; }
.suda-product-card{
    display: block;
    border: 1px solid var(--suda-gray-100);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.suda-product-card:hover{ box-shadow: 0 16px 32px rgba(17,24,39,.1); transform: translateY(-2px); }
.suda-product-thumb{
    position: relative;
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    background-color: var(--suda-gray-100);
    overflow: hidden;
}
.suda-product-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
}
.suda-product-thumb.has-video:hover .suda-product-video{ opacity: 1; }
.suda-product-play{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0,0,0,.1);
    transition: opacity .3s ease;
}
.suda-product-play .suda-icon{
    color: #fff;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 12px;
}
.suda-product-thumb.has-video:hover .suda-product-play{ opacity: 0; }
.suda-product-badge{
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,.92);
    color: var(--suda-blue);
    font-size: 12px;
    font-weight: 700;
    padding-block: 4px;
    padding-inline: 8px;
    border-radius: 8px;
}
/* SUDA CUSTOM (2026-10-24): 출발지 태그 "인천/김포출발" - 썸네일 왼쪽 위 (상품유형 배지와 마주 보게) */
.suda-product-deptag{
    position: absolute;
    top: 10px;
    left: 10px;
    max-width: calc(100% - 90px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: rgba(17,24,39,.72);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding-block: 4px;
    padding-inline: 8px;
    border-radius: 8px;
}
.suda-product-body{ display: block; padding: 20px; }
.suda-product-loc{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--suda-gray-400);
    margin-bottom: 10px;
}
.suda-product-name{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    color: var(--suda-gray-900);
    margin-bottom: 12px;
}
.suda-product-card:hover .suda-product-name{ color: var(--suda-blue); }
.suda-product-rating{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #facc15;
    margin-bottom: 18px;
}
.suda-product-rating .suda-icon{ font-size: 16px; }
.suda-product-rating .fa-star{ color: #facc15; }
.suda-product-reviews{ font-size: 12px; color: var(--suda-gray-400); font-weight: 400; }
.suda-product-bottom{ display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.suda-product-price{ font-size: 12px; color: var(--suda-gray-400); }
.suda-product-price s{ display: block; }
.suda-product-price b{ display: block; font-size: 20px; font-weight: 700; color: var(--suda-gray-900); margin-top: 2px; }
.suda-product-price b i{ font-size: 13px; font-weight: 400; font-style: normal; color: var(--suda-gray-500); margin-left: 2px; }
.suda-product-actions{ display: flex; align-items: center; gap: 6px; }
.suda-product-cart{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 10px;
    border: 1px solid var(--suda-gray-100);
    background: var(--suda-gray-50);
    color: var(--suda-gray-400);
}
.suda-product-cart:hover{ background: #eff6ff; color: var(--suda-blue); }
.suda-product-detail{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--suda-gray-900);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}
.suda-product-card:hover .suda-product-detail{ background: var(--suda-blue); }

/* ---------- BEST PRODUCTS 탭 ---------- */
.suda-best-tabs{ display: flex; flex-wrap: wrap; gap: 8px; }
.suda-best-tab{
    height: 40px;
    box-sizing: border-box;
    padding-inline: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--suda-gray-50);
    color: var(--suda-gray-500);
    font-size: 14px;
    font-weight: 700;
}
.suda-best-tab:hover{ background: var(--suda-gray-100); }
.suda-best-tab.is-active{ background: var(--suda-blue); color: #fff; box-shadow: 0 8px 16px rgba(37,99,235,.25); }
.suda-best-panel{ display: none; }
.suda-best-panel.is-active{ display: grid; }
.suda-best-empty{ grid-column: 1/-1; text-align: center; padding: 60px 0; color: var(--suda-gray-400); font-weight: 700; }
/* P2: 유형별 섹션 상품 없음 빈 상태 */
.suda-home-empty{ padding: 40px 0; border: 1px dashed var(--suda-gray-200, #e5e7eb); border-radius: 16px; }
.suda-home-empty .suda-home-more{ display: inline-block; margin-left: 8px; }

/* ---------- 중간 CTA 배너 (AI비서 / K-CULTURE LOUNGE) ---------- */
.suda-cta-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.suda-cta-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 260px;
    border-radius: 28px;
    padding: 48px;
    color: #fff;
    overflow: hidden;
}
.suda-cta-blue{ background: linear-gradient(135deg, #4154ff, #1e3a8a, #0f172a); }
.suda-cta-purple{ background: linear-gradient(135deg, #581c87, #312e81, #0f172a); border: 1px solid rgba(168,85,247,.25); }
.suda-cta-badge{
    display: inline-block;
    width: fit-content;
    background: rgba(168,85,247,.3);
    color: #d8b4fe;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.suda-cta-title{ font-size: 36px; font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; margin: 0; padding-bottom: 16px; }
.suda-cta-desc{ font-size: 14px; font-weight: 700; line-height: 1.6; opacity: .85; margin: 0; padding-bottom: 24px; }
.suda-cta-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: auto;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
}
.suda-cta-blue .suda-cta-btn{ background: #fff; color: var(--suda-blue); }
.suda-cta-purple .suda-cta-btn{ background: linear-gradient(90deg, #9333ea, #db2777); color: #fff; }

/* ---------- 수다타임 타임딜 ---------- */
.suda-timedeal{
    background: #111827;
    padding-block: 95px;
    color: #fff;
    overflow: hidden;
}
.suda-timedeal-head{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.suda-timedeal-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--suda-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.suda-timedeal-title{ font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3em; margin: 0 0 10px; }
.suda-timedeal-title span{ color: var(--suda-blue); }
.suda-timedeal-desc{ font-size: 18px; font-weight: 700; color: var(--suda-gray-400); margin: 0; }

.suda-timedeal-timer{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    padding: 24px;
}
.suda-timedeal-timer-label{ font-size: 11px; font-weight: 700; color: oklch(78.5% 0.115 274.713); text-transform: uppercase; letter-spacing: .1em; }
.suda-timedeal-timer-boxes{ display: flex; align-items: center; gap: 10px; }
.suda-timer-box{
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 14px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 700;
}
.suda-timer-colon{ font-size: 24px; font-weight: 700; color: rgba(255,255,255,.3); }

.suda-timedeal-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.suda-timedeal-card{
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 28px;
    overflow: hidden;
    padding: 30px;
}
.suda-timedeal-thumb{
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    margin-bottom: 16px;
    overflow: hidden;
    transition: background-size .5s ease;
}
.suda-timedeal-card:hover .suda-timedeal-thumb{ background-size: 115%; }
.suda-timedeal-off{
    position: absolute;
    left: 24px;
    top: 24px;
    background: oklch(57.7% 0.245 27.325);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 12px;
}
.suda-timedeal-urgent{
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.85);
}
.suda-timedeal-name{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 12px 12px;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.suda-timedeal-price{ margin: 0 12px 18px; }
.suda-timedeal-price s{ font-size: 14px; font-weight: 500; color: rgba(255,255,255,.4); }
.suda-timedeal-price b{ font-size: 30px; font-weight: 700; color: oklch(78.5% 0.115 274.713); }
.suda-timedeal-price b i{ font-size: 16px; font-weight: 500; font-style: normal; color: #fff; }
.suda-timedeal-progress{ margin: 0 12px 24px; }
.suda-timedeal-progress-labels{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.suda-timedeal-progress-labels span:first-child{ color: rgba(255,255,255,.5); }
.suda-timedeal-progress-labels span:last-child{ color: oklch(78.5% 0.115 274.713); }
.suda-timedeal-bar{ height: 8px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.suda-timedeal-bar-fill{
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--suda-blue), oklch(78.5% 0.115 274.713));
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.suda-timedeal-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 12px 12px;
    padding-block: 16px;
    padding-inline: 0;
    background: #fff;
    color: var(--suda-gray-900);
    border-radius: 16px;
    font-weight: 700;
    font-size: 16px;
}
.suda-timedeal-card:hover .suda-timedeal-btn{ background: var(--suda-blue); color: #fff; }
.suda-timedeal-more{
    display: block;
    text-align: center;
    margin: 40px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--suda-gray-400);
}
.suda-timedeal-more:hover{ color: #fff; }
/* P2: 타임딜 가격 표시용 안내 문구 */
.suda-timedeal-note{ margin: 32px 0 0; text-align: center; font-size: 13px; color: var(--suda-gray-400); }

/* ---------- LIVE 수다 ---------- */
.suda-live-section{ padding-block: 80px; }
.suda-live-section .suda-home-head{ margin-bottom: 64px; }
.suda-live-heading{ display: flex; align-items: center; gap: 14px; }
.suda-live-icon{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--suda-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    flex-shrink: 0;
    box-shadow: 0 8px 16px rgba(239,68,68,.25);
}
.suda-live-text{ color: var(--suda-red); }
.suda-live-actions{ display: flex; align-items: center; gap: 10px; }
.suda-live-schedule-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--suda-gray-50);
    color: var(--suda-gray-600, var(--suda-gray-700));
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}
.suda-live-schedule-btn:hover{ background: var(--suda-gray-100); }
.suda-live-schedule-btn i{ color: var(--suda-blue); }
.suda-live-all-btn{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--suda-gray-900);
    color: #fff;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
}
.suda-live-all-btn:hover{ background: #000; }

.suda-live-card{ display: block; }
.suda-live-thumb{
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 22px;
    background-size: cover;
    background-position: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.suda-live-thumb::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.15); transition: background .2s ease; }
.suda-live-card:hover .suda-live-thumb::after{ background: rgba(0,0,0,.35); }
.suda-live-onair, .suda-live-scheduled{
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}
.suda-live-onair{ background: var(--suda-red); color: #fff; animation: suda-pulse 1.6s infinite; }
.suda-live-onair-dot{ width: 6px; height: 6px; border-radius: 999px; background: #fff; }
.suda-live-scheduled{ background: rgba(0,0,0,.55); color: #fff; font-weight: 700; }
.suda-live-play{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 56px; height: 56px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    opacity: 0;
    transition: opacity .2s ease;
}
.suda-live-card:hover .suda-live-play{ opacity: 1; }
.suda-live-discount{
    position: absolute;
    left: 20px; bottom: 20px;
    z-index: 2;
    background: var(--suda-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 10px;
}
.suda-live-name{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--suda-gray-900);
    margin-bottom: 12px;
}
.suda-live-card:hover .suda-live-name{ color: var(--suda-blue); }
.suda-live-price{ font-size: 14px; font-weight: 700; color: var(--suda-gray-400); }
.suda-live-price s{ font-weight: 400; margin-right: 4px; }
.suda-live-price b{ color: oklch(21% 0.034 264.665); font-size: 20px; font-weight: 700; }

/* ---------- 영상 섹션 (TourSuda TV) ---------- */
.suda-video-section{ padding-top: 95px; }
.suda-video-copy .suda-home-title{ font-size: 48px; }
.suda-video-copy .suda-home-desc{ font-size: 18px; font-weight: 400; }
.suda-video-head{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}
.suda-video-copy{ flex: 1; min-width: 0; }
.suda-video-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--suda-red);
    margin-bottom: 12px;
}
.suda-video-highlight{ color: var(--suda-blue); }
.suda-video-subscribe{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: var(--suda-red);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 14px;
}
.suda-video-subscribe:hover{ background: var(--suda-red-dark); }
.suda-video-frame{
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 32px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border: 6px solid var(--suda-gray-50);
    box-shadow: 0 30px 60px rgba(17,24,39,.15);
}
.suda-video-frame::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.25); }
.suda-video-play{
    position: relative;
    z-index: 2;
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: var(--suda-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    box-shadow: 0 20px 40px rgba(0,0,0,.3);
    transition: transform .2s ease;
}
.suda-video-frame:hover .suda-video-play{ transform: scale(1.1); }
.suda-video-related{
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.suda-video-related-item{
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border-radius: 16px;
    cursor: pointer;
}
.suda-video-related-item:hover{ background: var(--suda-gray-50); }
.suda-video-related-thumb{
    width: 128px;
    height: 72px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--suda-gray-100);
    flex-shrink: 0;
}
.suda-video-related-body{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.suda-video-related-title{
    font-size: 15px;
    font-weight: 700;
    color: var(--suda-gray-900);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.suda-video-related-meta{ font-size: 13px; color: var(--suda-gray-400); font-weight: 700; }

/* ---------- SAFETY FIRST / TRAVELER STORIES ---------- */
.suda-safety-section{
    max-width: none;
    /* P2: 100vw 는 데스크톱 세로 스크롤바 폭만큼 가로 넘침을 만들어서 100%로 변경
       (부모가 이미 화면 전체 폭이라 보이는 결과는 동일) */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: oklch(98.5% 0.002 247.839);
    padding-block: 80px;
    padding-inline: 0;
    box-sizing: border-box;
}
.suda-safety-section .suda-safety-grid{
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
    box-sizing: border-box;
}
.suda-safety-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
.suda-safety-heading{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--suda-gray-900);
    margin-bottom: 24px;
}
.suda-safety-heading i{ color: var(--suda-blue); font-size: 28px; }
.suda-safety-heading-between{ justify-content: space-between; }
.suda-safety-card{
    background: #fff;
    border: 1px solid var(--suda-gray-100);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(17,24,39,.06);
}
.suda-safety-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--suda-gray-50);
    font-size: 18px;
    font-weight: 700;
    color: var(--suda-gray-900);
}
.suda-safety-card-head i{ color: var(--suda-blue); margin-right: 6px; font-size: 20px; }
.suda-safety-live{ font-size: 12px; font-weight: 700; color: var(--suda-gray-400); text-transform: uppercase; letter-spacing: .06em; }
.suda-safety-live i{ color: var(--suda-gray-400); font-size: 12px; }
.suda-safety-row{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--suda-gray-50);
}
.suda-safety-icon{
    width: 40px; height: 40px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.suda-safety-body{ flex: 1; min-width: 0; }
.suda-safety-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.suda-safety-top b{ font-size: 14px; color: var(--suda-gray-900); }
.suda-safety-badge{ font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.suda-safety-desc{ font-size: 13px; color: var(--suda-gray-500); line-height: 1.5; }
.suda-safety-footer{ padding: 16px 20px; background: var(--suda-gray-50); text-align: center; }
.suda-safety-footer p{ font-size: 11px; color: var(--suda-gray-400); line-height: 1.5; margin: 0 0 10px; }
.suda-safety-footer a{ display: inline-block; font-size: 11px; font-weight: 700; color: var(--suda-blue); background: #fff; padding: 6px 12px; border-radius: 999px; border: 1px solid #dbeafe; }

.suda-review-card{
    background: #fff;
    border: 1px solid var(--suda-gray-100);
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 16px;
    box-shadow: 0 4px 16px rgba(17,24,39,.06);
}
.suda-review-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.suda-review-avatar{
    width: 40px; height: 40px;
    border-radius: 999px;
    background: var(--suda-gray-100);
    color: var(--suda-gray-400);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.suda-review-meta{ flex: 1; display: flex; flex-direction: column; gap: 2px; }
.suda-review-meta b{ font-size: 14px; color: var(--suda-gray-900); }
.suda-review-meta span{ font-size: 13px; color: var(--suda-gray-400); }
.suda-review-stars{ color: #facc15; font-size: 13px; }
.suda-review-stars .fa-star-o{ color: var(--suda-gray-200); }
.suda-review-content{ font-size: 14px; line-height: 1.6; color: var(--suda-gray-700); margin: 0; }

/* ---------- PopupManager (첫 방문 팝업) ---------- */
.suda-popup-dim{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(17,24,39,.6);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.suda-popup-dim.is-open{ display: flex; }
.suda-popup-modal{
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.35);
}
.suda-popup-close{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 5;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    background: rgba(0,0,0,.3);
    color: #fff;
}
.suda-popup-media{ position: relative; aspect-ratio: 16/9; background: var(--suda-gray-100); }
.suda-popup-media video{ width: 100%; height: 100%; object-fit: cover; }
.suda-popup-tag{
    position: absolute;
    left: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--suda-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.suda-popup-body{ padding: 28px; }
.suda-popup-body h3{ font-size: 21px; font-weight: 700; color: var(--suda-gray-900); margin: 0 0 10px; }
.suda-popup-body p{ font-size: 14px; line-height: 1.6; color: var(--suda-gray-500); margin: 0 0 24px; }
.suda-popup-actions{ display: flex; gap: 10px; }
.suda-popup-actions button,
.suda-popup-actions a{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    border: 0;
    text-align: center;
}
.suda-popup-actions button{ background: var(--suda-gray-100); color: var(--suda-gray-600, var(--suda-gray-700)); }
.suda-popup-actions button:hover{ background: var(--suda-gray-200); }
.suda-popup-actions a{ background: var(--suda-blue); color: #fff; }
.suda-popup-actions a:hover{ background: var(--suda-blue-dark); }

/* ---------- 반응형 (1024 / 768 / 480 3단 기준) ---------- */

@media (min-width: 480px){
    .suda-region-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px){
    .suda-promo-grid{ grid-template-columns: repeat(2, 1fr); }
    .suda-cta-grid{ grid-template-columns: repeat(2, 1fr); }
    .suda-product-grid{ grid-template-columns: repeat(2, 1fr); }
    .suda-video-related{ grid-template-columns: repeat(3, 1fr); }
    .suda-region-grid{ grid-template-columns: repeat(5, 1fr); }
    .suda-timedeal-grid{ grid-template-columns: repeat(3, 1fr); }
    .suda-video-head{ flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 1024px){
    .suda-product-grid{ grid-template-columns: repeat(var(--suda-product-cols), 1fr); }
    .suda-safety-grid{ grid-template-columns: 1fr 2fr; }
}

@media (min-width: 1025px) and (max-width: 1280px){
    .suda-safety-grid{ grid-template-columns: 4fr 6fr; }
}

/* 카드 폭이 좁으면(가격 + 장바구니/상세보기 버튼이 한 줄에 안 들어감) 버튼을 금액 아래로 내린다.
   화면 폭이 아니라 카드 자체 폭 기준 - 4열 그리드(1024~1280px), 카테고리 슬라이더(768px 3장), 2열(480px) 등 어디서든 동작 */
.suda-product-card{ container-type: inline-size; }
@container (max-width: 290px){
    .suda-product-bottom{ display: block; }
    .suda-product-actions{ justify-content: flex-end; margin-top: 10px; }
}




@media screen and (max-width:1024px) {
    .suda-home-head{ margin-bottom: 4.88vw; }
    .suda-home-head-center{ margin-bottom: 6.25vw; }
    .suda-home-title{ font-size: 3.52vw; }
    .suda-home-desc{ font-size: 1.56vw; }
    .suda-home-more{ font-size: 1.37vw; }
    .suda-promo-eyebrow{ font-size: 1.37vw; }
    .suda-promo-title{ font-size: 2.93vw; }
    .suda-promo-cta{ font-size: 1.37vw; padding-block: 0.98vw; padding-inline: 2.34vw; }
    .suda-home-head-center{ gap: 0.78vw; }
    .suda-region-tile{ height: 21.88vw; }
    .suda-region-icon{ font-size: 3.52vw; }
    .suda-region-dim .suda-region-flag{ width: 3.52vw; height: 3.52vw; }
    .suda-region-name{ font-size: 1.95vw; }
    .suda-product-play{ font-size: 2.34vw; }
    .suda-product-badge{ font-size: 1.27vw; padding-block: 0.39vw; padding-inline: 0.78vw; }
    .suda-product-deptag{ font-size: 1.27vw; padding-block: 0.39vw; padding-inline: 0.78vw; }
    .suda-product-body{ padding: 1.95vw; }
    .suda-product-loc{ font-size: 1.27vw; margin-bottom: 0.98vw; }
    .suda-product-name{ font-size: 1.76vw; margin-bottom: 1.17vw; }
    .suda-product-rating{ font-size: 1.46vw; margin-bottom: 1.76vw; }
    .suda-product-rating .suda-icon{ font-size: 1.66vw; }
    .suda-product-reviews{ font-size: 1.27vw; }
    .suda-product-price{ font-size: 1.27vw; }
    .suda-product-price b{ font-size: 1.95vw; }
    .suda-product-price b i{ font-size: 1.27vw; }
    .suda-product-cart{ width: 3.91vw; height: 3.91vw; font-size: 1.76vw; }
    .suda-product-nav{ width: 3.91vw; height: 3.91vw; font-size: 1.76vw; }
    .suda-product-detail{ width: 3.91vw; height: 3.91vw; font-size: 1.17vw; }
    .suda-best-tab{ height: 3.91vw; font-size: 1.37vw; padding-inline: 1.76vw; }
    .suda-cta-card{ padding: 4.69vw; }
    .suda-cta-badge{ font-size: 1.07vw; }
    .suda-cta-title{ font-size: 3.52vw; padding-bottom: 1.56vw; }
    .suda-cta-desc{ font-size: 1.37vw; padding-bottom: 2.34vw; }
    .suda-cta-btn{ font-size: 1.37vw; padding-block: 1.56vw; padding-inline: 3.13vw; }
    .suda-timedeal-badge{ font-size: 1.17vw; padding-inline: 1.56vw; margin-bottom: 1.56vw; }
    .suda-timedeal-title{ font-size: 5.86vw; }
    .suda-timedeal-desc{ font-size: 1.76vw; }
    .suda-timedeal-timer{ padding: 2.34vw; }
    .suda-timedeal-card{ padding: 2.93vw; }
    .suda-timedeal-timer-label{ font-size: 1.07vw; }
    .suda-timer-box{ font-size: 2.93vw; width: 5.47vw; height: 5.47vw; }
    .suda-timer-colon{ font-size: 2.34vw; }
    .suda-timedeal-off{ font-size: 1.95vw; padding-block: 0.78vw; padding-inline: 1.56vw; }
    .suda-timedeal-urgent{ font-size: 1.17vw; }
    .suda-timedeal-name{ font-size: 1.95vw; }
    .suda-timedeal-price s{ font-size: 1.46vw; }
    .suda-timedeal-price b{ font-size: 2.93vw; }
    .suda-timedeal-price b i{ font-size: 1.56vw; }
    .suda-timedeal-progress-labels{ font-size: 1.37vw; }
    .suda-timedeal-btn{ font-size: 1.56vw; padding-block: 1.56vw; }
    .suda-timedeal-more{ font-size: 1.46vw; }
    .suda-live-icon{ font-size: 2.25vw; }
    .suda-live-schedule-btn{ font-size: 1.37vw; }
    .suda-live-section{ padding-block: 7.81vw; }
    .suda-live-section .suda-home-head{ margin-bottom: 6.25vw; }
    .suda-live-schedule-btn, .suda-live-all-btn{ padding-inline: 1.95vw; }
    .suda-live-all-btn{ font-size: 1.37vw; }
    .suda-live-onair, .suda-live-scheduled{ font-size: 1.37vw; padding-inline: 1.17vw; }
    .suda-live-play{ font-size: 2.05vw; }
    .suda-live-discount{ font-size: 1.37vw; padding-block: 0.59vw; padding-inline: 1.56vw; }
    .suda-live-name{ font-size: 1.76vw; margin-bottom: 1.17vw; }
    .suda-live-price{ font-size: 1.37vw; }
    .suda-live-price b{ font-size: 1.95vw; }
    .suda-video-section{ padding-top: 9.28vw; }
    .suda-video-copy .suda-home-title{ font-size: 4.49vw; }
    .suda-video-copy .suda-home-desc{ font-size: 1.76vw; }
    .suda-video-eyebrow{ font-size: 1.37vw; }
    .suda-video-subscribe{ font-size: 1.56vw; padding-block: 1.56vw; padding-inline: 3.13vw; }
    .suda-video-play{ font-size: 2.64vw; }
    .suda-video-related{ margin-top: 4.69vw; }
    .suda-video-related-thumb{ width: 12.50vw; height: 7.03vw; }
    .suda-video-related-title{ font-size: 1.86vw; }
    .suda-video-related-meta{ font-size: 1.46vw; }
    .suda-safety-section{ padding-block: 7.81vw; }
    .suda-safety-heading{ font-size: 2.64vw; }
    .suda-safety-heading i{ font-size: 3.03vw; }
    .suda-safety-card-head{ font-size: 2.05vw; }
    .suda-safety-card-head i{ font-size: 2.25vw; }
    .suda-safety-live{ font-size: 1.37vw; }
    .suda-safety-live i{ font-size: 1.37vw; }
    .suda-safety-top b{ font-size: 1.56vw; }
    .suda-safety-badge{ font-size: 1.37vw; }
    .suda-safety-desc{ font-size: 1.56vw; }
    .suda-safety-footer p{ font-size: 1.27vw; }
    .suda-safety-footer a{ font-size: 1.27vw; }
    .suda-review-meta b{ font-size: 1.56vw; }
    .suda-review-meta span{ font-size: 1.46vw; }
    .suda-review-stars{ font-size: 1.46vw; }
    .suda-review-content{ font-size: 1.56vw; }
    .suda-popup-tag{ font-size: 1.07vw; }
    .suda-popup-body h3{ font-size: 2.05vw; }
    .suda-popup-body p{ font-size: 1.37vw; }
    .suda-popup-actions button,
.suda-popup-actions a{ font-size: 1.37vw; }
    .suda-home-section{ padding-block: 5.47vw; }
    .suda-home-section{ padding-inline: 2.34vw; }
    .suda-safety-section{ padding-inline: 0; }
    .suda-safety-section .suda-safety-grid{ padding-inline: 2.34vw; }
    .suda-home-inner{ padding-inline: 2.34vw; }
    .suda-timedeal{ padding-block: 9.28vw; }
}




@media screen and (max-width:768px) {
    .suda-home-head{ margin-bottom: 6.51vw; }
    .suda-home-head-center{ margin-bottom: 8.33vw; }
    .suda-home-title{ font-size: 4.69vw; }
    .suda-home-desc{ font-size: 2.25vw; }
    .suda-home-more{ font-size: 1.97vw; }
    .suda-promo-eyebrow{ font-size: 1.97vw; }
    .suda-promo-title{ font-size: 3.91vw; }
    .suda-promo-cta{ font-size: 1.97vw; padding-block: 1.30vw; padding-inline: 3.13vw; }
    .suda-home-head-center{ gap: 1.04vw; }
    .suda-region-tile{ height: 29.17vw; }
    .suda-region-icon{ font-size: 5.07vw; }
    .suda-region-dim .suda-region-flag{ width: 4.69vw; height: 4.69vw; }
    .suda-region-name{ font-size: 2.81vw; }
    .suda-product-play{ font-size: 3.38vw; }
    .suda-product-badge{ font-size: 1.83vw; padding-block: 0.52vw; padding-inline: 1.04vw; }
    .suda-product-deptag{ font-size: 1.83vw; padding-block: 0.52vw; padding-inline: 1.04vw; }
    .suda-product-body{ padding: 2.60vw; }
    .suda-product-loc{ font-size: 1.83vw; margin-bottom: 1.30vw; }
    .suda-product-name{ font-size: 2.53vw; margin-bottom: 1.56vw; }
    .suda-product-rating{ font-size: 2.11vw; margin-bottom: 2.34vw; }
    .suda-product-rating .suda-icon{ font-size: 2.39vw; }
    .suda-product-reviews{ font-size: 1.83vw; }
    .suda-product-price{ font-size: 1.83vw; }
    .suda-product-price b{ font-size: 2.81vw; }
    .suda-product-price b i{ font-size: 1.83vw; }
    .suda-product-cart{ width: 6.25vw; height: 6.25vw; font-size: 3.04vw; }
    .suda-product-nav{ width: 5.21vw; height: 5.21vw; font-size: 2.53vw; }
    .suda-product-detail{ width: 6.25vw; height: 6.25vw; font-size: 2.02vw; }
    .suda-best-tab{ height: 5.21vw; font-size: 1.97vw; padding-inline: 2.34vw; }
    .suda-cta-card{ padding: 6.25vw; }
    .suda-cta-badge{ font-size: 1.54vw; }
    .suda-cta-title{ font-size: 4.69vw; padding-bottom: 2.08vw; }
    .suda-cta-desc{ font-size: 1.97vw; padding-bottom: 3.13vw; }
    .suda-cta-btn{ font-size: 1.97vw; padding-block: 2.08vw; padding-inline: 4.17vw; }
    .suda-timedeal-head{ flex-direction: column; align-items: stretch; }
    .suda-timedeal-timer{ width: 100%; }
    .suda-timedeal-badge{ font-size: 1.68vw; padding-inline: 2.08vw; margin-bottom: 2.08vw; }
    .suda-timedeal-title{ font-size: 7.81vw; }
    .suda-timedeal-desc{ font-size: 2.53vw; }
    .suda-timedeal-timer{ padding: 3.13vw; }
    .suda-timedeal-card{ padding: 3.91vw; }
    .suda-timedeal-timer-label{ font-size: 1.54vw; }
    .suda-timer-box{ font-size: 4.22vw; width: 7.29vw; height: 7.29vw; }
    .suda-timer-colon{ font-size: 3.38vw; }
    .suda-timedeal-off{ font-size: 2.81vw; padding-block: 1.04vw; padding-inline: 2.08vw; }
    .suda-timedeal-urgent{ font-size: 1.68vw; }
    .suda-timedeal-name{ font-size: 2.81vw; }
    .suda-timedeal-price s{ font-size: 2.11vw; }
    .suda-timedeal-price b{ font-size: 4.22vw; }
    .suda-timedeal-price b i{ font-size: 2.25vw; }
    .suda-timedeal-progress-labels{ font-size: 1.97vw; }
    .suda-timedeal-btn{ font-size: 2.25vw; padding-block: 2.08vw; }
    .suda-timedeal-more{ font-size: 2.11vw; }
    .suda-live-icon{ font-size: 3.23vw; }
    .suda-live-section{ padding-block: 10.42vw; }
    .suda-live-section .suda-home-head{ margin-bottom: 8.33vw; }
    .suda-live-schedule-btn, .suda-live-all-btn{ padding-inline: 2.60vw; }
    .suda-live-schedule-btn{ font-size: 1.97vw; }
    .suda-live-all-btn{ font-size: 1.97vw; }
    .suda-live-onair, .suda-live-scheduled{ font-size: 1.97vw; padding-inline: 1.56vw; }
    .suda-live-play{ font-size: 2.95vw; }
    .suda-live-discount{ font-size: 1.97vw; padding-block: 0.78vw; padding-inline: 2.08vw; }
    .suda-live-name{ font-size: 2.53vw; margin-bottom: 1.56vw; }
    .suda-live-price{ font-size: 1.97vw; }
    .suda-live-price b{ font-size: 2.81vw; }
    .suda-video-section{ padding-top: 12.37vw; }
    .suda-video-copy .suda-home-title{ font-size: 5.47vw; }
    .suda-video-copy .suda-home-desc{ font-size: 2.53vw; }
    .suda-video-eyebrow{ font-size: 1.97vw; }
    .suda-video-subscribe{ font-size: 2.25vw; padding-block: 2.08vw; padding-inline: 4.17vw; }
    .suda-video-play{ font-size: 3.80vw; }
    .suda-video-related{ margin-top: 6.25vw; }
    .suda-video-related-thumb{ width: 16.67vw; height: 9.38vw; }
    .suda-video-related-title{ font-size: 2.53vw; }
    .suda-video-related-meta{ font-size: 2.11vw; }
    .suda-review-meta span{ font-size: 1.97vw; }
    .suda-safety-section{ padding-block: 10.42vw; }
    .suda-safety-heading{ font-size: 3.39vw; }
    .suda-safety-heading i{ font-size: 4.22vw; }
    .suda-safety-card-head{ font-size: 2.81vw; }
    .suda-safety-card-head i{ font-size: 3.09vw; }
    .suda-safety-live{ font-size: 1.83vw; }
    .suda-safety-live i{ font-size: 1.83vw; }
    .suda-safety-top b{ font-size: 2.11vw; }
    .suda-safety-badge{ font-size: 1.83vw; }
    .suda-safety-desc{ font-size: 2.11vw; }
    .suda-safety-footer p{ font-size: 1.68vw; }
    .suda-safety-footer a{ font-size: 1.68vw; }
    .suda-review-meta b{ font-size: 2.11vw; }
    .suda-review-stars{ font-size: 1.97vw; }
    .suda-review-content{ font-size: 2.11vw; }
    .suda-popup-tag{ font-size: 1.54vw; }
    .suda-popup-body h3{ font-size: 2.95vw; }
    .suda-popup-body p{ font-size: 1.97vw; }
    .suda-popup-actions button,
.suda-popup-actions a{ font-size: 1.97vw; }
    .suda-home-section{ padding-block: 7.29vw; }
    .suda-home-section{ padding-inline: 3.12vw; }
    .suda-safety-section{ padding-inline: 0; }
    .suda-safety-section .suda-safety-grid{ padding-inline: 3.12vw; }
    .suda-home-inner{ padding-inline: 3.12vw; }
    .suda-timedeal{ padding-block: 12.37vw; }
}




@media screen and (max-width:480px) {
    .suda-home-head{ margin-bottom: 10.42vw; }
    .suda-home-head-center{ margin-bottom: 13.33vw; }
    .suda-home-title{ font-size: 7.50vw; }
    .suda-home-desc{ font-size: 3.60vw; }
    .suda-home-more{ font-size: 3.15vw; }
    .suda-promo-eyebrow{ font-size: 3.15vw; }
    .suda-promo-title{ font-size: 6.25vw; }
    .suda-promo-cta{ font-size: 3.15vw; padding-block: 2.08vw; padding-inline: 5.00vw; }
    .suda-home-head-center{ gap: 1.67vw; }
    .suda-region-tile{ height: 46.67vw; }
    .suda-region-icon{ font-size: 8.10vw; }
    .suda-region-dim .suda-region-flag{ width: 7.50vw; height: 7.50vw; }
    .suda-region-name{ font-size: 4.50vw; }
    .suda-product-play{ font-size: 5.40vw; }
    .suda-product-badge{ font-size: 2.93vw; padding-block: 0.83vw; padding-inline: 1.67vw; }
    .suda-product-deptag{ font-size: 2.93vw; padding-block: 0.83vw; padding-inline: 1.67vw; }
    .suda-product-body{ padding: 2.92vw; }
    .suda-product-loc{ font-size: 2.70vw; margin-bottom: 1.67vw; }
    .suda-product-name{ font-size: 3.60vw; margin-bottom: 1.88vw; }
    .suda-product-rating{ font-size: 2.93vw; margin-bottom: 2.71vw; }
    .suda-product-rating .suda-icon{ font-size: 3.38vw; }
    .suda-product-reviews{ font-size: 2.47vw; }
    .suda-product-price{ font-size: 2.47vw; }
    .suda-product-price b{ font-size: 3.38vw; }
    .suda-product-price b i{ font-size: 2.25vw; }
    .suda-product-cart{ width: 8.50vw; height: 8.50vw; font-size: 4.06vw; }
    .suda-product-nav{ width: 8.33vw; height: 8.33vw; font-size: 4.05vw; }
    .suda-product-detail{ width: 8.50vw; height: 8.50vw; font-size: 2.70vw; }
    .suda-best-tab{ height: 8.33vw; font-size: 3.15vw; padding-inline: 3.75vw; }
    .suda-cta-card{ padding: 10.00vw; }
    .suda-cta-badge{ font-size: 2.47vw; }
    .suda-cta-title{ font-size: 7.50vw; padding-bottom: 3.33vw; }
    .suda-cta-desc{ font-size: 3.15vw; padding-bottom: 5.00vw; }
    .suda-cta-btn{ font-size: 3.15vw; padding-block: 3.33vw; padding-inline: 6.67vw; }
    .suda-timedeal-badge{ font-size: 2.70vw; padding-inline: 3.33vw; margin-bottom: 3.33vw; }
    .suda-timedeal-title{ font-size: 12.50vw; }
    .suda-timedeal-desc{ font-size: 4.05vw; }
    .suda-timedeal-timer{ padding: 5.00vw; }
    .suda-timedeal-card{ padding: 6.25vw; }
    .suda-timedeal-timer-label{ font-size: 2.47vw; }
    .suda-timer-box{ font-size: 6.75vw; width: 11.67vw; height: 11.67vw; }
    .suda-timer-colon{ font-size: 5.40vw; }
    .suda-timedeal-off{ font-size: 4.50vw; padding-block: 1.67vw; padding-inline: 3.33vw; }
    .suda-timedeal-urgent{ font-size: 2.70vw; }
    .suda-timedeal-name{ font-size: 4.50vw; }
    .suda-timedeal-price s{ font-size: 3.38vw; }
    .suda-timedeal-price b{ font-size: 6.75vw; }
    .suda-timedeal-price b i{ font-size: 3.60vw; }
    .suda-timedeal-progress-labels{ font-size: 3.15vw; }
    .suda-timedeal-btn{ font-size: 3.60vw; padding-block: 3.33vw; }
    .suda-timedeal-more{ font-size: 3.38vw; }
    .suda-live-icon{ font-size: 5.17vw; }
    .suda-live-section{ padding-block: 16.67vw; }
    .suda-live-section .suda-home-head{ margin-bottom: 13.33vw; }
    .suda-live-schedule-btn, .suda-live-all-btn{ padding-inline: 4.17vw; }
    .suda-live-schedule-btn{ font-size: 3.15vw; }
    .suda-live-all-btn{ font-size: 3.15vw; }
    .suda-live-onair, .suda-live-scheduled{ font-size: 3.15vw; padding-inline: 2.50vw; }
    .suda-live-play{ font-size: 4.73vw; }
    .suda-live-discount{ font-size: 3.15vw; padding-block: 1.25vw; padding-inline: 3.33vw; }
    .suda-live-name{ font-size: 4.05vw; margin-bottom: 2.50vw; }
    .suda-live-price{ font-size: 3.15vw; }
    .suda-live-price b{ font-size: 4.50vw; }
    .suda-video-section{ padding-top: 19.79vw; }
    .suda-video-copy .suda-home-title{ font-size: 7.50vw; }
    .suda-video-copy .suda-home-desc{ font-size: 4.05vw; }
    .suda-video-eyebrow{ font-size: 3.15vw; }
    .suda-video-subscribe{ font-size: 3.60vw; padding-block: 3.33vw; padding-inline: 6.67vw; }
    .suda-video-play{ font-size: 6.07vw; }
    .suda-video-related{ margin-top: 10.00vw; }
    .suda-video-related-thumb{ width: 26.67vw; height: 15.00vw; }
    .suda-video-related-title{ font-size: 3.82vw; }
    .suda-video-related-meta{ font-size: 3.15vw; }
    .suda-safety-section{ padding-block: 16.67vw; }
    .suda-safety-heading{ font-size: 5.21vw; }
    .suda-safety-heading i{ font-size: 6.52vw; }
    .suda-safety-card-head{ font-size: 4.28vw; }
    .suda-safety-card-head i{ font-size: 4.73vw; }
    .suda-safety-live{ font-size: 2.93vw; }
    .suda-safety-live i{ font-size: 2.93vw; }
    .suda-safety-top b{ font-size: 3.38vw; }
    .suda-safety-badge{ font-size: 2.70vw; }
    .suda-safety-desc{ font-size: 3.15vw; }
    .suda-safety-footer p{ font-size: 2.70vw; }
    .suda-safety-footer a{ font-size: 2.70vw; }
    .suda-review-meta b{ font-size: 3.38vw; }
    .suda-review-meta span{ font-size: 3.15vw; }
    .suda-review-stars{ font-size: 3.15vw; }
    .suda-review-content{ font-size: 3.38vw; }
    .suda-popup-tag{ font-size: 2.47vw; }
    .suda-popup-body h3{ font-size: 4.73vw; }
    .suda-popup-body p{ font-size: 3.15vw; }
    .suda-popup-actions button,
.suda-popup-actions a{ font-size: 3.15vw; }
    .suda-home-section{ padding-block: 11.67vw; }
    .suda-home-section{ padding-inline: 5.00vw; }
    .suda-safety-section{ padding-inline: 0; }
    .suda-safety-section .suda-safety-grid{ padding-inline: 5.00vw; }
    .suda-home-inner{ padding-inline: 5.00vw; }
    .suda-timedeal{ padding-block: 19.79vw; }
}


/* ==========================================================================
   P6(2026-10-16): 관리자 콘텐츠 연동 추가 스타일 (유튜브 임베드 / 팝업 이미지 / 안전경보 링크)
   ========================================================================== */
.suda-video-frame.is-embed{ cursor: default; background: #111827; }
.suda-video-frame.is-embed::before{ display: none; }
.suda-video-frame.is-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.suda-video-frame.is-static{ cursor: default; }
button.suda-video-related-item{ width: 100%; border: 0; background: transparent; text-align: left; font: inherit; }
.suda-video-related-item.is-active{ background: var(--suda-gray-50); box-shadow: inset 0 0 0 2px var(--suda-red); }
.suda-popup-media img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.suda-safety-more{ display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--suda-blue); }
.suda-safety-empty{ justify-content: center; text-align: center; }

/* ============================================================================
   SUDA CUSTOM (2026-10-25): SAFETY FIRST - 외교부 여행경보 API 주요 국가 (index.php .suda-ta-*)
   국기 + 국가명 + 단계 배지(여행유의 파랑 / 여행자제 노랑 / 출국권고 빨강 / 여행금지 검정) + 지역유형·작성일
   ============================================================================ */
.suda-ta-list{ margin: 0; padding: 0; list-style: none; }
.suda-ta-row{ align-items: center; padding-block: 13px; }
.suda-ta-flag{ width: 30px; height: 20px; flex-shrink: 0; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(17,24,39,.08); }
.suda-ta-flag.is-text{ display: inline-flex; align-items: center; justify-content: center; background: var(--suda-gray-50); font-size: 10px; font-weight: 700; color: var(--suda-gray-500); }
.suda-ta-meta{ display: block; font-size: 12px; }
.suda-safety-badge.suda-ta-lv0{ background: var(--suda-gray-50); color: var(--suda-gray-500); }
.suda-safety-badge.suda-ta-lv1{ background: #dbeafe; color: #1d4ed8; }
.suda-safety-badge.suda-ta-lv2{ background: #fef08a; color: #854d0e; }
.suda-safety-badge.suda-ta-lv3{ background: #fee2e2; color: #b91c1c; }
.suda-safety-badge.suda-ta-lv4{ background: #111827; color: #fff; }
@media screen and (max-width:1024px){
    .suda-ta-row{ padding-block: 1.27vw; }
    .suda-ta-flag{ width: 2.93vw; height: 1.95vw; }
    .suda-ta-flag.is-text{ font-size: 0.98vw; }
    .suda-ta-meta{ font-size: 1.27vw; }
}
@media screen and (max-width:768px){
    .suda-ta-row{ padding-block: 1.69vw; }
    .suda-ta-flag{ width: 3.91vw; height: 2.6vw; }
    .suda-ta-flag.is-text{ font-size: 1.3vw; }
    .suda-ta-meta{ font-size: 1.69vw; }
}
@media screen and (max-width:480px){
    .suda-ta-row{ padding-block: 2.71vw; }
    .suda-ta-flag{ width: 6.25vw; height: 4.17vw; }
    .suda-ta-flag.is-text{ font-size: 2.08vw; }
    .suda-ta-meta{ font-size: 2.71vw; }
}

/* SUDA CUSTOM (2026-10-25): SAFETY FIRST - 외교부 경보 줄 아래 "다녀온 고객 체감" (후기, 공식 정보와 구분 - 테두리만 있는 배지) */
.suda-ta-cust{ display: block; margin-top: 3px; font-size: 12px; color: var(--suda-gray-500); }
.suda-ta-cust em{ display: inline-block; margin: 0 2px; padding: 0 7px; border: 1px solid currentColor; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 700; line-height: 18px; }
.suda-ta-cust-lv1{ color: #15803d; }
.suda-ta-cust-lv2{ color: #1d4ed8; }
.suda-ta-cust-lv3{ color: #a16207; }
.suda-ta-cust-lv4{ color: #b91c1c; }
@media screen and (max-width:1024px){ .suda-ta-cust{ margin-top: 0.29vw; font-size: 1.17vw; } .suda-ta-cust em{ font-size: 1.07vw; line-height: 1.76vw; padding: 0 0.68vw; } }
@media screen and (max-width:768px){ .suda-ta-cust{ margin-top: 0.39vw; font-size: 1.56vw; } .suda-ta-cust em{ font-size: 1.43vw; line-height: 2.34vw; padding: 0 0.91vw; } }
@media screen and (max-width:480px){ .suda-ta-cust{ margin-top: 0.63vw; font-size: 2.5vw; } .suda-ta-cust em{ font-size: 2.29vw; line-height: 3.75vw; padding: 0 1.46vw; } }

/* SUDA CUSTOM (2026-10-25): SAFETY FIRST 국가 목록만 스크롤 (제목 줄·안내 문구는 고정) - 높이는 index.php 스크립트가 "3개 반"으로 맞춤
   스크롤바: 얇고 연한 회색, 올리면 진하게 / 아래 흐린 그라데이션(끝까지 내리면 사라짐) / 768 이하: 3개 + 더보기 */
.suda-ta-scroll{ position: relative; }
.suda-ta-scroll::after{ content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(rgba(255,255,255,0), #fff); pointer-events: none; transition: opacity .2s ease; }
.suda-ta-scroll.is-end::after{ opacity: 0; }
.suda-ta-list{ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--suda-gray-200) transparent; }
.suda-ta-list:hover{ scrollbar-color: var(--suda-gray-400) transparent; }
.suda-ta-list::-webkit-scrollbar{ width: 6px; }
.suda-ta-list::-webkit-scrollbar-track{ background: transparent; }
.suda-ta-list::-webkit-scrollbar-thumb{ border-radius: 3px; background: var(--suda-gray-200); }
.suda-ta-list:hover::-webkit-scrollbar-thumb{ background: var(--suda-gray-400); }
.suda-ta-list:focus-visible{ outline: 2px solid var(--suda-blue); outline-offset: -2px; }
.suda-ta-more{ display: none; }
@media screen and (max-width:768px){
    .suda-ta-list{ max-height: none; overflow: visible; }
    .suda-ta-scroll::after{ display: none; }
    .suda-ta-scroll:not(.is-open) .suda-ta-row:nth-child(n+4){ display: none; }
    .suda-ta-more{ display: flex; align-items: center; justify-content: center; gap: 0.52vw; width: 100%; padding: 1.82vw 0; border: 0; border-bottom: 1px solid var(--suda-gray-50); background: #fff; font-size: 1.69vw; font-weight: 700; color: var(--suda-blue); cursor: pointer; }
    .suda-ta-more span{ color: var(--suda-gray-400); font-weight: 600; }
}
@media screen and (max-width:480px){
    .suda-ta-more{ gap: 0.83vw; padding: 3.13vw 0; font-size: 2.92vw; }
}