@charset "utf-8";
/* ==========================================================================
   2026 SEOUL BEAUTY TRAVEL WEEK — 티저 스킨
   구조: 1) 토큰  2) 리셋/공통  3) 헤더  4) 티저 본문  5) 푸터
   ※ 2025 스킨은 /2025/css/style.css 에 그대로 보존되어 있습니다.
   ========================================================================== */

/* ------------------------------------------------------------------ 1) 토큰 */
:root{
    --bg-top:#f6f1ea; --bg-bot:#dbe8ee;
    --ink:#1f2a33; --ink-soft:#4a5a66; --muted:#7d8c97;
    --line:#c9d4db; --accent:#2f5d73; --accent-2:#9fb6c2;
    --gold:#b89a6a; --paper:#ffffff; --shadow:rgba(40,70,90,.12);
    --hd-h:88px;
    --wrap:1180px;
}

/* ------------------------------------------------------- 2) 리셋 / 공통요소 */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    color:var(--ink); line-height:1.7; background:var(--paper);
    -webkit-font-smoothing:antialiased; word-break:keep-all;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:inherit;text-decoration:none}
ul,ol,li{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p,dl,dd{margin:0}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* 스크롤 등장 효과 */
.reveal{opacity:0;transform:translateY(28px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.10s}
.reveal.d2{transition-delay:.20s}
.reveal.d3{transition-delay:.30s}
.reveal.d4{transition-delay:.40s}

/* ------------------------------------------------------------------ 3) 헤더 */
#header.head{
    position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hd-h);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 40px;
    background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(201,212,219,.6);
    transition:background .3s ease;
}
#header.head .logo img{height:40px;width:auto}

#header .hd-menu .gnb{display:flex;align-items:center;gap:6px}
#header .hd-menu .gnb > li{position:relative}
#header .hd-menu .gnb > li > a{
    display:block;padding:12px 18px;font-size:16px;font-weight:500;
    color:var(--ink);letter-spacing:-.01em;transition:color .2s
}
#header .hd-menu .gnb > li:hover > a{color:var(--accent)}
#header .hd-menu .gnb > li .depth{
    position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
    min-width:180px;padding:10px 0;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 18px 40px -20px var(--shadow);
    opacity:0;visibility:hidden;transition:.25s
}
#header .hd-menu .gnb > li:hover .depth{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
#header .hd-menu .gnb > li .depth a{
    display:block;padding:9px 20px;font-size:14px;color:var(--ink-soft);white-space:nowrap
}
#header .hd-menu .gnb > li .depth a:hover{color:var(--accent);background:rgba(47,93,115,.06)}

.head_rightbox{display:flex;align-items:center;gap:16px}
.dropdown_main{position:relative}
.dropdown_bar{
    padding:8px 16px;border:1px solid var(--line);border-radius:999px;
    font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--ink-soft);cursor:pointer
}
.dropdown_bar:hover{border-color:var(--accent);color:var(--accent)}
.dropdown_content{
    display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:104px;padding:6px 0;
    background:var(--paper);border:1px solid var(--line);border-radius:10px;
    box-shadow:0 18px 40px -20px var(--shadow)
}
.dropdown_content a{display:block;padding:8px 18px;font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.dropdown_content a:hover{color:var(--accent);background:rgba(47,93,115,.06)}
.sns_btn img{height:24px;width:auto}

/* 모바일 메뉴 */
.menu-toggler{display:none;position:fixed;top:24px;right:22px;z-index:1000;
    width:40px;height:40px;flex-direction:column;justify-content:center;gap:6px;cursor:pointer}
.menu-toggler .bar{height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.menu-toggler .bar.half{width:50%}
.menu-toggler .bar.top{align-self:flex-start}
.menu-toggler .bar.bottom{align-self:flex-end}
.menu-toggler.active .bar.top{transform:rotate(45deg) translate(4px,3px);width:100%}
.menu-toggler.active .bar:nth-child(2){opacity:0}
.menu-toggler.active .bar.bottom{transform:rotate(-45deg) translate(4px,-3px);width:100%}

.mobile_menu{
    position:fixed;inset:0;z-index:950;background:var(--paper);
    padding:110px 32px 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:.35s
}
.mobile_menu.active{opacity:1;visibility:visible;transform:none}
.mobile_menu .nav-list > li{border-bottom:1px solid var(--line)}
.mobile_menu .nav-list > li > a{display:block;padding:20px 4px;font-size:19px;font-weight:600}
.mobile_menu .nav-list ul{padding:0 4px 18px}
.mobile_menu .nav-list ul a{display:block;padding:9px 0;font-size:15px;color:var(--ink-soft)}

/* --------------------------------------------------------------- 4) 티저 본문 */
.teaser{position:relative;padding-top:var(--hd-h);z-index:0}
.teaser > .wrap,.teaser > section,.teaser > header{position:relative;z-index:2}
.teaser .bg-image{
    position:fixed;inset:0;z-index:0;
    background:url("../../image/2026/intro/intro_bg01.jpg") top center / cover no-repeat;
    opacity:0;transform:scale(1.06);
    animation:tsBgIn 2.2s cubic-bezier(.2,.7,.2,1) forwards
}
@keyframes tsBgIn{to{opacity:1;transform:scale(1)}}
.teaser .bg-veil{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.80) 38%,rgba(246,241,234,.96) 72%,rgba(246,241,234,.99) 100%)
}
.teaser .ambient{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.teaser .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.20;
    animation:tsDrift 22s ease-in-out infinite;mix-blend-mode:soft-light}
.teaser .orb.a{width:420px;height:420px;background:#cfe2ea;top:-120px;left:-80px}
.teaser .orb.b{width:360px;height:360px;background:#e7dccb;top:35%;right:-100px;animation-delay:-7s}
.teaser .orb.c{width:300px;height:300px;background:#d7e7df;bottom:-80px;left:25%;animation-delay:-13s}
@keyframes tsDrift{0%,100%{transform:translate(0,0) scale(1)}
    33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.96)}}

/* Hero */
.ts-hero{text-align:center;padding:110px 0 76px}
.ts-hero .logo-master img{width:100%;max-width:300px;margin:0 auto;display:block}
.ts-eyebrow{margin-top:44px;font-size:15px;font-weight:500;letter-spacing:.18em;
    color:var(--accent);text-transform:uppercase}
.ts-hero h1{
    font-family:'GounBatang',serif;font-weight:700;
    font-size:clamp(32px,5.6vw,54px);line-height:1.24;letter-spacing:-.01em;margin:24px 0 28px
}
.ts-hero h1 .grad{background:linear-gradient(100deg,var(--accent),var(--gold));
    -webkit-background-clip:text;background-clip:text;color:transparent}
.ts-lede{font-size:18px;color:var(--ink-soft);max-width:520px;margin:0 auto;line-height:1.9}
.ts-badge{
    display:inline-flex;align-items:center;gap:10px;margin-top:38px;
    padding:11px 24px;border-radius:999px;background:rgba(47,93,115,.9);
    font-size:15px;font-weight:500;color:var(--paper)
}
.ts-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
    animation:tsPulse 2s ease-in-out infinite}
@keyframes tsPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.4}}

/* 행사 개요 (미정 항목 포함) */
.ts-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:56px}
.ts-facts li{background:rgba(255,255,255,.86);padding:26px 20px;text-align:center}
.ts-facts dt{font-size:13px;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
.ts-facts dd{font-size:16px;font-weight:600;color:var(--ink)}
.ts-facts dd.tbd{color:var(--accent-2);font-weight:500}

.ts-rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:72px 0}

/* 섹션 공통 */
.ts-sec-title{text-align:center;margin-bottom:40px}
.ts-sec-title span:not(.ts-closed){display:block;font-size:13px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.ts-sec-title h2{font-family:'GounBatang',serif;font-size:clamp(24px,3.4vw,34px);margin-top:12px}

.ts-card{
    background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.8);border-radius:14px;
    padding:44px 40px;box-shadow:0 24px 60px -30px var(--shadow)
}

/* 아카이브 카드 */
.ts-archive{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ts-archive a{
    display:block;padding:34px 28px;border-radius:14px;
    background:rgba(255,255,255,.78);border:1px solid var(--line);
    box-shadow:0 20px 46px -30px var(--shadow);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s
}
.ts-archive a:hover{transform:translateY(-6px);border-color:var(--accent-2);
    box-shadow:0 28px 56px -26px var(--shadow)}
.ts-archive .yr{font-family:'GounBatang',serif;font-size:40px;line-height:1;color:var(--accent)}
.ts-archive .nm{margin-top:14px;font-size:16px;font-weight:600}
.ts-archive .de{margin-top:6px;font-size:14px;color:var(--muted)}
.ts-archive .go{margin-top:20px;font-size:14px;color:var(--accent);font-weight:500}

/* 다운로드 / 링크 버튼 */
.ts-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.ts-btn{
    display:inline-flex;align-items:center;gap:9px;height:54px;padding:0 26px;
    border-radius:999px;font-size:15px;font-weight:600;transition:.25s;border:1px solid transparent
}
.ts-btn .ic{font-size:15px}
.ts-btn.primary{background:var(--accent);color:var(--paper)}
.ts-btn.primary:hover{background:#26495b}
.ts-btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-soft)}
.ts-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

.ts-note{text-align:center;font-size:15px;color:var(--ink-soft);margin-top:8px}
.ts-note b{color:var(--accent)}
.ts-closed{display:inline-block;margin-top:12px;padding:5px 14px;border-radius:999px;
    background:rgba(125,140,151,.14);border:1px solid var(--line);
    color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.02em}

/* 디렉토리북 */
.ts-dir{text-align:center}
.ts-dir .cover{max-width:290px;margin:26px auto 0;border-radius:10px;overflow:hidden;
    box-shadow:0 22px 50px -24px var(--shadow)}
.ts-dir p{color:var(--ink-soft);font-size:15px;margin-top:10px}

/* 문의 */
.ts-contact{text-align:center;padding:64px 0 88px}
.ts-contact .office{font-size:17px;font-weight:600}
.ts-contact .cinfo{margin-top:10px;font-size:15px;color:var(--ink-soft)}
.ts-contact .cinfo a{color:var(--accent)}

/* ------------------------------------------------------------------ 5) 푸터 */
.footer{position:relative;background:#1f2a33;color:rgba(255,255,255,.82);padding:44px 0}
.footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer h4{font-size:16px;font-weight:600;letter-spacing:.04em;color:#fff}
.footer p{margin-top:8px;font-size:13px;color:rgba(255,255,255,.55)}
.footer_menu{display:flex;gap:16px;margin-top:10px}
.footer_menu a{font-size:13px;color:rgba(255,255,255,.6)}
.footer_menu a:hover{color:#fff}
.footer_inr02{display:flex;align-items:center;gap:22px}
.footer_inr02 img{height:34px;width:auto;opacity:.85;filter:brightness(0) invert(1)}
.footer_inr02 a:hover img{opacity:1}

/* --------------------------------------------------------- 6) 서브페이지 공통 */
.sub_vis{
    padding:calc(var(--hd-h) + 72px) 0 60px;text-align:center;
    background:linear-gradient(180deg,#f6f1ea 0%,#dbe8ee 100%);
    border-bottom:1px solid var(--line)
}
.sub_vis .sub_title{font-family:'GounBatang',serif;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em}
.sub_vis .sub_meta{margin-top:14px;font-size:15px;color:var(--ink-soft)}
.sub_contents{padding:70px 0 100px}
.sub_contents_wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

@media (max-width:768px){
    .sub_vis{padding:calc(var(--hd-h) + 44px) 0 40px}
    .sub_contents{padding:48px 0 72px}
    .sub_contents_wrap{padding:0 20px}
}