@charset "utf-8";
/* ==========================================================================
   2026 SEOUL BEAUTY TRAVEL WEEK — 반응형
   ========================================================================== */

@media (max-width:1180px){
    #header.head{padding:0 24px}
    #header .hd-menu .gnb > li > a{padding:12px 12px;font-size:15px}
}

/* 태블릿 이하: PC 메뉴 → 햄버거 */
@media (max-width:1024px){
    :root{--hd-h:76px}
    #header.head{padding:0 20px}
    #header .hd-menu{display:none}
    .menu-toggler{display:flex}
    .head_rightbox{margin-right:56px}

    .ts-hero{padding:72px 0 56px}
    .ts-facts{grid-template-columns:repeat(2,1fr)}
    .ts-archive{grid-template-columns:repeat(3,1fr);gap:16px}
    .ts-archive a{padding:28px 22px}
    .ts-archive .yr{font-size:34px}
}

@media (max-width:768px){
    .wrap{padding:0 20px}
    .ts-hero{padding:56px 0 44px}
    .ts-hero .logo-master img{max-width:230px}
    .ts-eyebrow{margin-top:32px;font-size:13px}
    .ts-lede{font-size:16px}
    .ts-badge{font-size:14px;padding:10px 20px}
    .ts-rule{margin:56px 0}
    .ts-card{padding:34px 24px}
    .ts-archive{grid-template-columns:1fr;gap:14px}
    .ts-archive a{display:flex;align-items:center;gap:18px;padding:22px 22px}
    .ts-archive .yr{font-size:30px;flex:0 0 auto}
    .ts-archive .nm{margin-top:0}
    .ts-archive .de,.ts-archive .go{display:none}
    .ts-btns{flex-direction:column}
    .ts-btn{width:100%;justify-content:center;height:50px}
    .ts-contact{padding:48px 0 64px}

    .footer{padding:34px 0}
    .footer .wrap{flex-direction:column;align-items:flex-start;gap:22px}
    .footer_inr02{gap:18px}
    .footer_inr02 img{height:28px}
}

@media (max-width:560px){
    .menu-toggler{top:18px;right:16px}
    .ts-facts{grid-template-columns:1fr}
    .ts-facts li{padding:16px 18px}
    .ts-facts li dl{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .ts-facts dt{margin-bottom:0;flex:0 0 auto}
    .ts-facts dd{text-align:right}
    .mobile_menu{padding:96px 22px 32px}
}

@media (max-width:375px){
    .ts-hero h1{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
    .teaser .bg-image{opacity:1;transform:none}
}