@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Thin.woff2') format('woff2');font-weight:100;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraLight.woff2') format('woff2');font-weight:200;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Light.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap;}
@font-face {font-family:'Suit';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Heavy.woff2') format('woff2');font-weight:900;font-display:swap;}
@font-face {
    font-family: 'FlightSansTitle';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/FlightSans-Title.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'FlightSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/FlightSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'FlightSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-1@1.0/FlightSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* =========================================================
   Root / Reset
========================================================= */
:root {
    --bg:#050505;
    --bg-soft:#080808;
    --section:#0d0d0d;
    --surface:#121212;
    --surface-2:#171717;
    --surface-3:#202020;
    --text:#fff;
    --muted:rgba(255,255,255,.68);
    --muted-2:rgba(255,255,255,.46);
    --line:rgba(255,255,255,.12);
    --line-strong:rgba(255,255,255,.22);
    --accent:#d80c18;
    --accent-dark:#b80813;
    --shadow:none;
    --shadow-red:none;
    --max:1240px;
    --header:82px;
    --radius:28px;
    --ease:cubic-bezier(.2,.8,.2,1);
}

* {box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {
    margin:0;
    padding-bottom:128px;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--text);
    font-family:'Suit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    letter-spacing:-.035em;
    word-break:keep-all;
}
body.modal-open {overflow:hidden;}

a {color:inherit;text-decoration:none;}
button,input {font-family:inherit;}
button {border:0;}
img,video {display:block;max-width:100%;}



.wrap,
.header-inner,
.hero-content {
    width:min(calc(100% - 56px),var(--max));
    margin:0 auto;
}

.skip {
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip:focus {
    left:20px;
    top:20px;
    width:auto;
    height:auto;
    padding:10px 14px;
    z-index:9999;
    background:#fff;
    color:#000;
}

/* =========================================================
   Header
========================================================= */
/*
.header {
    position:fixed;
    inset:0 0 auto;
    height:var(--header);
    z-index:50;
    transition:background .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease);
}
.header.is-scrolled {
    height:70px;
    background:rgba(0,0,0,.88);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
}
.header-inner {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.logo img {
    width:auto;
    height:56px;
    transition:height .35s var(--ease),opacity .35s var(--ease);
}
.header.is-scrolled .logo img {height:44px;}
*/

.header{
    position:fixed;
    inset:0 0 auto;
    height:82px;
    z-index:999;
    transition:.35s;
    background:rgba(0,0,0,0.3);
}

.header.is-scrolled{
    height:70px;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner{
    position:relative;
    width:min(calc(100% - 56px),100%);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* 로고 */
.logo{
    flex:0 0 auto;
}

.logo img{
    height:56px;
    transition:.35s;
}

.header.is-scrolled .logo img{
    height:44px;
}

/* 가운데 메뉴 */
.gnb{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:50px;
}

.gnb a{
    color:#fff;
    font-size:17px;
    font-weight:700;
    transition:.25s;
    white-space:nowrap;
}

.gnb a:hover{
    color:#d80c18;
}

/* 우측 메뉴 */
.header-links{
    display:flex;
    align-items:center;
    gap:22px;
}

.header-links a{
    color:rgba(255,255,255,.75);
    font-size:13px;
    font-weight:600;
    transition:.25s;
    white-space:nowrap;
}

.header-links a:hover{
    color:#fff;
}

/* 모바일 */
@media (max-width:1200px){

    .gnb{
        display:none;
    }

    .header-links{
        display:none;
    }

    .header-inner{
        justify-content:flex-start;
    }
}
.header-dropdown{
    position:relative;
    display:flex;
    align-items:center;
    height:70px;
    padding:0px;
}

.header.is-scrolled .header-dropdown{
    height:70px;
}

.header-dropdown::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:100%;
    height:28px;
}

.header-dropdown-btn{
    display:block;
}

.header-dropdown-layer{
    position:absolute;
    top:calc(100% + 0px);
    left:50%;
    width:224px;
    padding:18px 16px 14px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    background:#fff;
    color:#111;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,10px);
    transition:.25s ease;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.header-dropdown:hover .header-dropdown-layer{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

.header-dropdown-layer strong{
    display:block;
    color:#111;
    font-size:16px;
    font-weight:900;
}

.header-dropdown-layer span{
    display:block;
    margin-top:6px;
    color:#d80c18;
    font-size:12px;
    font-weight:800;
}

.header-dropdown-line{
    height:1px;
    margin:14px 0 12px;
    background:#eee;
}

.header-dropdown-lang{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.header-dropdown-lang a{
    display:flex;
    align-items:center;
    justify-content:center;
    height:34px;
    border:1px solid #e5e5e5;
    border-radius:999px;
    color:#333;
    font-size:12px;
    font-weight:700;
}

.header-dropdown-lang a:hover{
    background:#111;
    border-color:#111;
    color:#fff;
}
/* =========================================================
   Buttons
========================================================= */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:60px;
    padding:0 28px;
    border:1px solid var(--line-strong);
    border-radius:999px;
    color:#fff;
    font-size:16px;
    font-weight:900;
    letter-spacing:-.04em;
    cursor:pointer;
    transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.btn:hover {transform:translateY(-3px);}
.btn-kakao,
.btn-primary {
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    box-shadow:none !important;
}
.btn-kakao:hover,
.btn-primary:hover {background:var(--accent-dark);border-color:var(--accent-dark);}
.btn-ghost {background:rgba(0,0,0,.42);color:#fff;}
.btn-ghost:hover {background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34);}

/* =========================================================
   Hero
========================================================= */
.hero {
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#000;
}
.hero-media,
.hero-media video {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.hero-media {overflow:hidden;background:#000;}
.hero-media video {
    object-fit:cover;
    transform:none;
    opacity:1;
    filter:none;
}
.hero-cover {display:none;}
.hero-content {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 370px;
    gap:44px;
    align-items:end;
    padding:170px 0 96px;
}
.hero-content-empty {display:none;}
.hero-kicker {
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:999px;
    background:rgba(0,0,0,.34);
    color:rgba(255,255,255,.86);
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    backdrop-filter:blur(6px);
}
.hero h1 {
    margin:24px 0 0;
    font-size:clamp(52px,8.8vw,112px);
    font-weight:900;
    line-height:.98;
    letter-spacing:-.09em;
    text-shadow:none !important;
}
.hero h1 span {color:var(--accent);}
.hero p {
    max-width:650px;
    margin:28px 0 0;
    color:rgba(255,255,255,.82);
    font-size:clamp(17px,1.6vw,22px);
    font-weight:600;
    line-height:1.75;
    text-shadow:none !important;
}
.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:36px;
}
.hero-summary {
    padding:28px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(6,6,6,.72);
    box-shadow:none !important;
}
.hero-summary small {
    display:block;
    color:var(--muted-2);
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.hero-summary strong {
    display:block;
    margin-top:10px;
    color:var(--accent);
    font-size:46px;
    font-weight:900;
    letter-spacing:-.075em;
}
.hero-summary p {
    margin:14px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
    text-shadow:none !important;
}

/* =========================================================
   Sections
========================================================= */
.section {
    position:relative;
    padding:116px 0;
    background:var(--bg-soft);
    border-top:1px solid rgba(255,255,255,.07);
}
.section.alt {background:var(--section);}
.section-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,430px);
    gap:30px;
    align-items:end;
    margin-bottom:42px;
}
.eyebrow {
    display:block;
    margin-bottom:14px;
    color:var(--accent);
    font-size:clamp(10px,1.5vw,13px);
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.section-title {
    margin:0;
    font-family: 'FlightSansTitle';
    font-size:clamp(20px,4vw,50px);
    font-weight:900;
    line-height:1.20;
    letter-spacing:-.01em;
}
.section-title span{
    font-family: 'FlightSans';
    display:block;
    font-weight:400;
}

/* =========================================================
   Title marker underline
   - h1/h2 안의 <u> 공통 형광펜 밑줄 효과
   - 해당 제목이 화면에 닿으면 JS에서 .is-title-marked 부여
========================================================= */
h1 u,
h2 u {
    position:relative;
    z-index:0;
    display:inline-block;
    padding:0 0 .05em 0;
    color:inherit;
    line-height:1.02;
    text-decoration:none;
    vertical-align:baseline;
    isolation:isolate;
}
h1 u::after,
h2 u::after {
    content:'';
    position:absolute;
    left:-.04em;
    right:-.04em;
    bottom:-.02em;
    z-index:-1;
    height:.3em;
    border-radius:999px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left center;
    opacity:.2;
    pointer-events:none;
    transition:transform 2.0s var(--ease);
}
h1.is-title-marked u::after,
h2.is-title-marked u::after {
    transform:scaleX(1);
}

.section-desc {
    margin:0;
    color:var(--muted);
    font-size:clamp(13px,1.5vw,17px);
    font-weight:500;
    line-height:1.5;
}

/* section-desc가 없으면 타이틀 영역 100% */
.section-head:not(:has(.section-desc)) {
    grid-template-columns:1fr;
}

.section-head:not(:has(.section-desc)) > div {
    width:100%;
}

/* =========================================================
   Benefit / Brand Cards
========================================================= */
.benefit-progress {
    position:relative;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    overflow:visible;
    padding:0;
    border:0;
    border-radius:0;

}
.benefit-progress-item {
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    padding:38px 26px 34px;

    border:0;
    box-shadow:none !important;
    text-align:center;
    background:#222222; border-radius:10px;
}
.benefit-progress-item:not(:last-child)::after {
    content:'\f054';
    position:absolute;
    top:50%;
    right:0;
    width:20px;
    height:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:12px;
    line-height:1;
    color:rgba(255,255,255,.72);
    background:transparent;
    transform:translate(50%,-50%);
}
.benefit-progress-icon {
    position:relative;
    z-index:2;
    width:74px;
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    box-shadow:none !important;
}
.benefit-progress-icon i {
    font-size:28px;
    line-height:1;
}
.benefit-progress-num {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    margin-top:22px;
    padding:0 12px;
    border:1px solid rgba(216,12,24,.36);
    border-radius:999px;
    background:rgba(216,12,24,.12);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
}
.benefit-progress-item strong {
    display:block;
    margin-top:14px;
    color:#fff;
    font-size:clamp(15px,1.5vw,20px);
    font-weight:800;
    line-height:1.22;
    letter-spacing:-.07em;
}
.benefit-progress-item span:not(.benefit-progress-num) {
    display:block;
    margin-top:10px;
    color:var(--muted);
   font-size:clamp(12px,1.5vw,15px);
    font-weight:500;
    line-height:1.65;
}

.brand-card,
.menu-card,
.store-panel,
.map-box {
    background:var(--surface);
    border:1px solid var(--line);
}

.brand-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}
.brand-card {
    min-height:220px;
    padding:30px;
    border-radius:28px;
    transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.brand-card:hover {
    transform:translateY(-6px);
    border-color:rgba(216,12,24,.45);
    background:var(--surface-2);
}
.brand-card em {
    color:var(--accent);
    font-style:normal;
    font-size:13px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.brand-card strong {
    display:block;
    margin-top:22px;
    font-size:26px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:-.07em;
}
.brand-card p {
    margin:18px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.7;
}

.brand-feature {
    display:block;
    max-width:1120px;
    margin:0 auto;
    text-align:center;
}
.brand-copy {
    max-width:960px;
    min-width:0;
    margin:0 auto;
}
.brand-copy .eyebrow {
    text-align:center;
}
.brand-copy .section-title {
    margin:0;
    text-align:center;
}
.brand-lead {
    max-width:920px;
    margin:28px auto 0;
}
.brand-lead p {
    margin:0;
    color:var(--muted);
    font-size:18px;
    font-weight:500;
    line-height:1.82;
    text-align:center;
}
.brand-lead p + p {
    margin-top:16px;
}
.brand-video {
    position:relative;
    width:100%;
    max-width:1120px;
    margin:46px auto 0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:34px;
    background:#000;
    box-shadow:none !important;
}
.brand-video::before {
    content:'';
    display:block;
    padding-top:56.25%;
}
.brand-video iframe {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.brand-video-stage {
    position:relative;
    width:100%;
    max-width:1120px;
    margin:46px auto 0;
    overflow:visible;
}
.brand-video-stage .brand-video {
    position:relative;
    z-index:3;
    margin:0 auto;
}
.brand-video-stage .image-flow-section--behind-video {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1;
    width:100vw;
    padding:0;
    overflow:hidden;
    background:transparent;
    pointer-events:none;
    transform:translate(-50%,-50%);
}

/* =========================================================
   Flow Gallery
========================================================= */
.image-flow-section {
    position:relative;
    overflow:hidden;
    padding:38px 0;
    background:transparent;
}
.image-flow-section::before,
.image-flow-section::after {display:none;}
.image-flow-track {
    display:flex;
    gap:10px;
    width:max-content;
    animation:euddeumImageFlow 58s linear infinite;
    will-change:transform;
}
.image-flow-item {
    flex:0 0 auto;
    width:clamp(50px,11.5vw,180px);
    aspect-ratio:1/1;
    margin:0;
    overflow:hidden;
    border:0;
    border-radius:16px;
    background:transparent;
    box-shadow:none !important;
}
.image-flow-item img {
    width:100%;
    height:100%;
    object-fit:cover;
}
@keyframes euddeumImageFlow {
    0% {transform:translate3d(0,0,0);}
    100% {transform:translate3d(-50%,0,0);}
}

/* =========================================================
   Menu Slider
========================================================= */
.menu-slider-wrap {
    --menu-gap:14px;
    --menu-card-width:210px;
    --menu-arrow-offset:74px;
    --menu-arrow-top:150px;
    position:relative;
    margin-top:4px;
    padding:0;
    overflow:visible;
}
.menu-slider-viewport {
    position:relative;
    overflow:hidden;
    width:100%;
    padding:4px 0 10px;
}
.menu-track {
    display:flex;
    align-items:flex-start;
    gap:var(--menu-gap);
    width:100%;
    will-change:scroll-position;
}
.menu-card {
    flex:0 0 var(--menu-card-width, 210px);
    width:var(--menu-card-width, 210px);
    max-width:var(--menu-card-width, 210px);
    display:block;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    text-align:center;
    transition:none;
}
.menu-card:hover {
    transform:none;
    border-color:transparent;
    background:transparent;
}
.menu-img {
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:24px;
    background:#0b0b0b;
    border:1px solid var(--line);
}
.menu-img img {
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .45s var(--ease);
}
.menu-card:hover .menu-img img,
.menu-card:focus-within .menu-img img {transform:scale(1.025);}
.menu-badge {
    position:absolute;
    left:14px;
    top:14px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:-.03em;
}
.menu-overlay {
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:26px;
    background:rgba(0,0,0,.76);
    color:#fff;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s var(--ease);
}
.menu-card:hover .menu-overlay,
.menu-card:focus-within .menu-overlay {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.menu-overlay strong {
    display:block;
    font-size:clamp(20px,2.1vw,30px);
    font-weight:900;
    line-height:1.16;
    letter-spacing:-.075em;
}
.menu-overlay p {
    margin:14px 0 0;
    color:rgba(255,255,255,.82);
    font-size:14px;
    font-weight:600;
    line-height:1.62;
}
.menu-name {
    display:block;
    margin-top:16px;
    color:#fff;
    font-size:22px;
    font-weight:900;
    line-height:1.2;
    letter-spacing:-.07em;
}
.menu-info,
.menu-cat {display:none !important;}
.menu-arrow {
    position:absolute;
    top:var(--menu-arrow-top);
    z-index:4;
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    transform:translateY(-50%);
    transition:background .22s var(--ease),border-color .22s var(--ease);
}
.menu-arrow:hover {
    background:var(--accent);
    border-color:var(--accent);
}
.menu-arrow--prev {left:calc(var(--menu-arrow-offset) * -1);}
.menu-arrow--next {right:calc(var(--menu-arrow-offset) * -1);}
@media (max-width:1024px) {
    .menu-slider-wrap {
        --menu-gap:18px;
        --menu-arrow-offset:62px;
    }
    .menu-card {
        flex-basis:calc((100% - var(--menu-gap)) / 2);
        width:calc((100% - var(--menu-gap)) / 2);
    }
}
@media (max-width:740px) {
    .menu-slider-wrap {
        --menu-gap:16px;
        --menu-arrow-offset:0px;
    }


    .menu-card{
        flex:0 0 calc((100% - var(--menu-gap)) / 2);
        width:calc((100% - var(--menu-gap)) / 2);
        max-width:calc((100% - var(--menu-gap)) / 2);
    }
    .menu-img {border-radius:20px;}
    .menu-arrow {
        width:44px;
        height:44px;
        font-size:15px;
    }
    .menu-arrow--prev {left:0;}
    .menu-arrow--next {right:0;}
    .menu-name {font-size:13px;}
    .menu-overlay {padding:22px;}
    .menu-overlay p {font-size:13px;line-height:1.58;}
}
/* =========================================================
   Store / Map
========================================================= */
.store-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) 450px;
    gap:18px;
    align-items:stretch;
}
.map-box {
    position:relative;
    display:flex;
    min-height:620px;
    height:100%;
    overflow:hidden;
    border-radius:30px;
}
#naverMap {
    position:relative;
    display:block;
    flex:1 1 auto;
    width:100%;
    height:100%;
    min-height:620px;
    background:#ddd;
}
#naverMap,
#naverMap * {box-sizing:content-box;}
#naverMap > div {width:100% !important;height:100% !important;}
#naverMap img {display:inline !important;max-width:none !important;border:0 !important;}
#naverMap button {font-family:initial;}
.map-fallback {
    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    z-index:3;
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:rgba(0,0,0,.78);
    color:var(--muted);
    font-size:14px;
    line-height:1.6;
}
.map-fallback strong {
    display:block;
    margin-bottom:6px;
    color:#fff;
    font-size:16px;
}

.euddeum-map-marker {
    position:relative;
    width:32px;
    height:44px;
    box-sizing:border-box;
    cursor:pointer;
}
.euddeum-map-marker::before {
    content:'';
    position:absolute;
    left:50%;
    top:2px;
    width:30px;
    height:30px;
    border:0;
    border-radius:50% 50% 50% 0;
    background:var(--accent);
    box-sizing:border-box;
    transform:translateX(-50%) rotate(-45deg);
}
.euddeum-map-marker::after {
    content:'';
    position:absolute;
    left:50%;
    top:13px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#fff;
    transform:translateX(-50%);
}
.store-panel {
    display:flex;
    flex-direction:column;
    height:620px;
    min-height:620px;
    overflow:hidden;
    border-radius:30px;
}
.store-panel-head {
    padding:30px 0px 0px 30px;

    background:var(--surface-2);
}
.store-panel-head strong {
    display:block;
    font-size:clamp(15px,1.5vw,20px);
    font-weight:900;
    letter-spacing:-.065em;
}
.store-panel-head span {
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:clamp(12px,1.5vw,14px);
}
.store-region-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 0px 20px 30px;
    background:var(--surface-2);
    border-bottom:1px solid var(--line);

}
.store-region-tab {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:30px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#101010;
    color:var(--muted);
    font-size:13px;
    font-weight:900;
    line-height:1;
    letter-spacing:-.04em;
    cursor:pointer;
    box-shadow:none !important;
}
.store-region-tab span {
    color:rgba(255,255,255,.48);
    font-size:11px;
    font-weight:900;
}
.store-region-tab:hover,
.store-region-tab.is-active {
    border-color:var(--accent);
    background:var(--accent);
    color:#fff;
}
.store-region-tab:hover span,
.store-region-tab.is-active span {color:rgba(255,255,255,.82);}
.store-empty {
    display:none;
    margin:0;
    padding:28px 18px;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    line-height:1.6;
    text-align:center;
}
.store-empty.is-visible {display:block;}
.store-list {
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:15px;
}
.store-item {
    display:block;
    width:100%;
    padding:15px 15px;

    border-radius:18px;
    background:transparent;
    color:#fff;
    text-align:left;
    cursor:pointer;
    transition:background .22s var(--ease),border-color .22s var(--ease);
}
.store-item:hover,
.store-item.is-active {
    background:#1a1a1a;
    border-color:var(--line);
}
.store-item strong {
    display:block;
   font-size:clamp(14px,1.5vw,17px);
    font-weight:900;
    letter-spacing:-.05em;
}
/*
.store-item strong::after {
    content:'EVENT';
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:20px;
    margin-left:8px;
    padding:0 8px;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
    letter-spacing:.04em;
    vertical-align:middle;
}
*/


.store-state-badge{display:inline-flex;align-items:center;justify-content:center;margin-right:5px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:900;line-height:1;vertical-align:middle;text-transform:uppercase;letter-spacing:-.02em}
.store-state-badge-new{background:#ffffff;color:#d80c18}
.store-state-badge-event{background:#d80c18;color:#fff}
.store-event-text{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(216,12,24,.08);color:#d80c18;font-size:12px;font-weight:800;line-height:1.35}
.store-db-error{padding:18px;border-radius:16px;background:#fff4f4;color:#d80c18;font-size:13px;font-weight:800;line-height:1.6}

.store-item span {
    display:block;
    margin-top:7px;
    color:var(--muted);
    font-size:14px;
    line-height:1.45;
}
.store-item em {
    display:block;
    margin-top:7px;
    color:var(--accent);
    font-style:normal;
    font-size:13px;
    font-weight:800;
}


/* =========================================================
   Franchise Section
   - footer 바로 위 독립 창업 안내 섹션
   - 메인 빨강 배경 적용
========================================================= */
.franchise-section {
    position:relative;
    overflow:hidden;
    padding:112px 0 120px;

    background:
    
        linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.01) 1px, transparent 1px),
     
        radial-gradient(circle at 18% 16%, rgba(255,255,255,.24), transparent 28%),
        radial-gradient(circle at 86% 78%, rgba(0,0,0,.20), transparent 34%),
        linear-gradient(135deg, var(--accent) 0%, #f01926 48%, var(--accent-dark) 100%);
        
    background-size:58px 58px,58px 58px,auto,auto,auto;
    color:#fff;
    isolation:isolate;
}
.franchise-section::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:0;
    background:
        linear-gradient(135deg, rgba(216,12,24,.78), rgba(216,12,24,.32)),
        url('/brand/img/0.png') right center / auto 160% no-repeat;
    opacity:1;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to right, #000 0%, #000 36%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.28) 76%, transparent 100%);
    mask-image:linear-gradient(to right, #000 0%, #000 36%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.28) 76%, transparent 100%);
}
/*
.franchise-section::after {
    content:'FRANCHISE';
    position:absolute;
    right:-.06em;
    bottom:-.18em;
    z-index:1;
    color:rgba(255,255,255,.10);
    font-size:clamp(82px,14vw,210px);
    font-weight:900;
    line-height:1;
    letter-spacing:-.08em;
    pointer-events:none;
}
*/
.franchise-section .wrap {
    position:relative;
    z-index:2;
}

.franchise-section-inner {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:40px;
    align-items:end;
}

.franchise-section-label {
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.42);
    border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    backdrop-filter:blur(8px);
}


.franchise-section-desc {
    max-width:720px;
    margin:24px 0 0;
    color:rgba(255,255,255,.88);
    font-size:clamp(16px,1.5vw,20px);
    font-weight:600;
    line-height:1.78;
}
.franchise-section-points {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}
.franchise-section-points span {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.34);
    border-radius:999px;
    background:rgba(255,255,255,.13);
    color:#fff;
    font-size:13px;
    font-weight:900;
}
.franchise-section-actions {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.franchise-section-actions .btn {
    min-height:64px;
    padding:0 34px;
    border:0 !important;
    background:#fff !important;
    color:var(--accent) !important;
    white-space:nowrap;
}
.franchise-section-actions .btn::after {
    content:'\f061';
    margin-left:10px;
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    font-size:14px;
}
.franchise-section-actions small {
    display:block;
    width:100%;
    color:rgba(255,255,255,.76);
    font-size:15px;
    font-weight:800;
    text-align:center;
}
@media (max-width:1024px) {
    .franchise-section-inner {
        grid-template-columns:1fr;
        gap:34px;
    }
    .franchise-section::before {
        right:-160px;
        width:78vw;
        opacity:.42;
    }
    .franchise-section-actions {
        align-items:flex-start;
    }
}
@media (max-width:740px) {
    .franchise-section {
        padding:82px 0 92px;
    }
    .franchise-section-title {
        font-size:clamp(34px,11vw,54px);
    }
    .franchise-section-desc {
        font-size:14px;
        line-height:1.6;
    }
    .franchise-section::before {
        inset:0;
        background:
            linear-gradient(135deg, rgba(216,12,24,.78), rgba(216,12,24,.32)),
            url('https://cdn.imweb.me/upload/S202509219abab1ade0184/6b2bb9e41a205.jpg') right center / 200% auto no-repeat;
        opacity:.34;
        transform:none;
    }
    .franchise-section-actions {
        align-items:stretch;
    }
    .franchise-section-actions .btn {
        width:100%;
        min-height:60px;
    }
    .franchise-section-actions small {
        text-align:center;
    }
}

/* =========================================================
   Footer
========================================================= */
.footer {
    padding:50px 0 0px;
    background:var(--bg);
    border-top:1px solid var(--line);
}
.footer-inner {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:26px;
}
.footer-logo img {height:46px;opacity:.9;}
.footer p {
    margin:14px 0 0;
    color:var(--muted-2);
    font-size:clamp(10px,1.5vw,13px);
    line-height:1.6;
}
.footer-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.footer-links button {
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#101010;
    color:var(--muted);
    font-weight:800;
    cursor:pointer;
    font-size:clamp(11px,1.5vw,14px);
}
.footer-links button:hover {color:#fff;border-color:var(--line-strong);}

/* =========================================================
   Fixed Quick Menus
========================================================= */
.side-floating-menu {
    position:fixed;
    right:0;
    top:50%;
    z-index:79;
    width:92px;
    overflow:hidden;
    border-radius:16px 0 0 16px;
    background:var(--accent);
    box-shadow:none !important;
    transform:translateY(-50%);
}
.side-floating-menu a {
    display:flex;
    min-height:86px;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 8px;
    border-bottom:1px solid rgba(255,255,255,.18);
    color:#fff;
    text-align:center;
    font-size:13px;
    font-weight:900;
    line-height:1.18;
    letter-spacing:-.055em;
}
.side-floating-menu a:last-child {border-bottom:0;}
.side-floating-menu i {font-size:22px;line-height:1;color:#fff;}
.side-floating-menu span {display:block;}

.scroll-guide {
    position:fixed;
    left:50%;
    bottom:calc(124px + env(safe-area-inset-bottom));
    z-index:79;
    width:32px;
    height:52px;
    pointer-events:none;
    opacity:1;
    visibility:visible;
    transform:translateX(-50%);
    transition:opacity .28s var(--ease),visibility .28s var(--ease),transform .28s var(--ease);
}
.scroll-wheel {
    position:relative;
    display:block;
    width:100%;
    height:100%;
    border:2px solid rgba(255,255,255,.78);
    border-radius:999px;
}
.scroll-wheel::before {
    content:'';
    position:absolute;
    left:50%;
    top:10px;
    width:4px;
    height:10px;
    border-radius:999px;
    background:#fff;
    transform:translateX(-50%);
    animation:scrollWheelMove 1.35s var(--ease) infinite;
}
body.has-scrolled .scroll-guide {
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,10px);
}
@keyframes scrollWheelMove {
    0% {opacity:0;transform:translate(-50%,0);}
    28% {opacity:1;}
    72% {opacity:1;transform:translate(-50%,13px);}
    100% {opacity:0;transform:translate(-50%,17px);}
}

.floating-join {
    position:fixed;
    left:50%;
    bottom:calc(24px + env(safe-area-inset-bottom));
    z-index:80;
    transform:translateX(-50%);
}
.floating-join a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-width:min(560px,calc(100vw - 36px));
    min-height:82px;
    padding:0 48px;
    border:0;
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:23px;
    font-weight:900;
    letter-spacing:-.065em;
    box-shadow:none !important;
    outline:0;
    transition:background .2s var(--ease);
}
.floating-join a::before {
    content:'\f06b';
    font-family:'Font Awesome 6 Free';
    font-size:22px;
    font-weight:900;
    line-height:1;
}
.floating-join a:hover {
    background:var(--accent-dark);
    box-shadow:none !important;
    transform:none;
}
.floating-join b {color:#fff;}


/* 가입 버튼 둥실둥실 효과 */
.floating-join {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 80;
    animation: floatingJoin 1.2s ease-in-out infinite;
}

@keyframes floatingJoin {
    0% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-10px);
    }
    100% {
        transform: translateX(-50%) translateY(0);
    }
}

/* =========================================================
   Modal / Coupon Popup
========================================================= */
.modal {
    position:fixed;
    inset:0;
    z-index:99999999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:22px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
}
.modal.is-open {display:flex;}
.modal-card {
    width:min(720px,100%);
    max-height:min(760px,calc(100svh - 44px));
    overflow:auto;
    border:1px solid var(--line);
    border-radius:26px;
    background:#111;
    box-shadow:none !important;
}
.modal-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:22px 24px;
    border-bottom:1px solid var(--line);
}
.modal-head h3 {
    margin:0;
    font-size:clamp(15px,1.5vw,22px);
    font-weight:900;
}
.modal-close {
    width:42px;
    height:42px;
    flex:0 0 auto;
    border:1px solid var(--line);
    border-radius:50%;
    background:#1a1a1a;
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.modal-close:hover {background:var(--accent);border-color:var(--accent);}
.modal-body {
    padding:24px;
    color:var(--muted);
    font-size:clamp(11px,1.5vw,14px);
    line-height:1.8;
}
.modal-body h4 {
    margin:24px 0 8px;
    color:#fff;
    font-size:clamp(13px,1.5vw,17px);
}
.coupon-modal .modal-card {
    width:min(560px,100%);
    border-color:rgba(216,12,24,.45);

    box-shadow:none !important;
}



.coupon-modal .modal-body {
    padding:34px 30px 30px;
    text-align:center;
}
.coupon-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 14px;
    border:1px solid rgba(216,12,24,.38);
    border-radius:999px;
    background:rgba(216,12,24,.14);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.coupon-modal-title {
    margin:18px 0 0;
    color:#fff;
    font-size:clamp(34px,6vw,58px);
    font-weight:900;
    line-height:1.04;
    letter-spacing:-.09em;
}
.coupon-modal-title span {color:var(--accent);}
.coupon-modal-desc {
    max-width:430px;
    margin:20px auto 0;
    color:rgba(255,255,255,.74);
    font-size:17px;
    font-weight:500;
    line-height:1.75;
}
.coupon-modal-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:28px;
}
.coupon-modal-actions .btn {
    min-height:58px;
    padding:0 18px;
    font-size:15px;
}
.coupon-modal-note {
    margin:18px 0 0;
    color:rgba(255,255,255,.44);
    font-size:12px;
    line-height:1.6;
}

/* =========================================================
   Motion
========================================================= */
.reveal {
    opacity:0;
    transform:translateY(28px);
    transition:opacity .65s var(--ease),transform .65s var(--ease);
}
.reveal.is-visible {opacity:1;transform:translateY(0);}


/* =========================================================
   Global no-shadow policy
========================================================= */
*,
*::before,
*::after {
    box-shadow:none !important;
    text-shadow:none !important;
}

/* =========================
   컬러풀 무빙 그라데이션 쿠폰 팝업
   - 화이트톤 제거
   - 카드 전체에 밝고 화려한 그라데이션 배경 적용
========================= */

.coupon-modal {
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.45), transparent 28%),
        radial-gradient(circle at 80% 90%, rgba(255,255,255,.32), transparent 30%),
        rgba(255,255,255,.18) !important;
    backdrop-filter:blur(14px) saturate(1.35);
}

.coupon-modal .modal-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;

    width:min(560px,100%);
    border:0 !important;
    border-radius:34px;

    background:
        linear-gradient(
            -45deg,
            #ff1744,
            #ff7a18,
            #ffd60a,
            #00d4ff,
            #6c63ff,
            #ff2bd6,
            #ff1744
        ) !important;
    background-size:500% 500% !important;
    animation:couponGradientFlow 8s ease-in-out infinite;

    box-shadow:
        0 34px 90px rgba(255,23,68,.28),
        0 18px 50px rgba(0,212,255,.22) !important;
}

/* 움직이는 오로라/빛 번짐 레이어 */
.coupon-modal .modal-card::before{
    content:'';
    position:absolute;
    inset:-45%;
    z-index:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.92) 0 7%, transparent 24%),
        radial-gradient(circle at 76% 22%, rgba(255,255,255,.65) 0 8%, transparent 26%),
        radial-gradient(circle at 56% 82%, rgba(255,255,255,.62) 0 9%, transparent 28%),
        radial-gradient(circle at 10% 78%, rgba(255,255,255,.38) 0 8%, transparent 24%);

    mix-blend-mode:soft-light;
    opacity:.9;
    animation:
        couponAuroraMove 10s ease-in-out infinite,
        couponAuroraRotate 24s linear infinite;
}

/* 은은한 유리 광택 */
.coupon-modal .modal-card::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 42%, rgba(0,0,0,.08)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 36%);
}

/* 내용은 배경 위로 */
.coupon-modal .modal-head,
.coupon-modal .modal-body{
    position:relative;
    z-index:2;
}

.coupon-modal .modal-head{
    border-bottom:1px solid rgba(255,255,255,.28) !important;
}

.coupon-modal .modal-head h3,
.coupon-modal-title,
.coupon-modal-desc,
.coupon-modal-note{
    color:#fff !important;
    text-shadow:0 2px 14px rgba(0,0,0,.24) !important;
}

.coupon-modal-title span{
    color:#fff !important;
    text-decoration:underline;
    text-decoration-thickness:.16em;
    text-underline-offset:.1em;
    text-decoration-color:rgba(255,255,255,.46);
}

.coupon-modal-desc{
    color:rgba(255,255,255,.92) !important;
}

.coupon-modal-note{
    color:rgba(255,255,255,.72) !important;
}

.coupon-badge{
    border:1px solid rgba(255,255,255,.48) !important;
    background:rgba(255,255,255,.22) !important;
    color:#fff !important;
    backdrop-filter:blur(10px);
}

/* 닫기 버튼 */
.coupon-modal .modal-close{
    border:1px solid rgba(255,255,255,.42) !important;
    background:rgba(255,255,255,.2) !important;
    color:#fff !important;
    backdrop-filter:blur(8px);
}

.coupon-modal .modal-close:hover{
    background:#fff !important;
    color:#ff1744 !important;
}

/* 가입 CTA는 배경에서 확실히 떠 보이게 */
.coupon-modal .btn-kakao{
    border:0 !important;
    background:#fff !important;
    color:#ff1744 !important;
    box-shadow:0 12px 34px rgba(0,0,0,.20) !important;
    animation:couponCtaPop 1.45s ease-in-out infinite;
}

.coupon-modal .btn-kakao:hover{
    background:#fff !important;
    color:#d80c18 !important;
}

.coupon-modal .btn-ghost{
    border:1px solid rgba(255,255,255,.48) !important;
    background:rgba(255,255,255,.18) !important;
    color:#fff !important;
    backdrop-filter:blur(10px);
}

.coupon-modal .btn-ghost:hover{
    background:rgba(255,255,255,.3) !important;
}

/* 제목 주변 반짝임 */
.coupon-modal-title{
    position:relative;
}

.coupon-modal-title::before{
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    z-index:-1;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.38), transparent 66%);
    transform:translate(-50%,-50%);
    animation:couponTitleGlow 2.6s ease-in-out infinite;
}

@keyframes couponGradientFlow{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

@keyframes couponAuroraMove{
    0%{transform:translate3d(-6%,-4%,0) scale(1);}
    25%{transform:translate3d(7%,-8%,0) scale(1.12);}
    50%{transform:translate3d(9%,7%,0) scale(1.04);}
    75%{transform:translate3d(-8%,9%,0) scale(1.16);}
    100%{transform:translate3d(-6%,-4%,0) scale(1);}
}

@keyframes couponAuroraRotate{
    from{rotate:0deg;}
    to{rotate:360deg;}
}

@keyframes couponCtaPop{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-5px) scale(1.035);}
}

@keyframes couponTitleGlow{
    0%,100%{
        opacity:.58;
        transform:translate(-50%,-50%) scale(1);
    }
    50%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.18);
    }
}



/* =========================================================
   Responsive
========================================================= */
@media (max-width:1024px) {
	.pre-line {white-space: pre-line;}
	.pre-line br {display:none}
    .hero-content {grid-template-columns:1fr;padding-top:132px;}
    .hero-summary {max-width:520px;}
    .section-head,
    .store-layout {grid-template-columns:1fr;}
    .brand-feature {max-width:100%;}
    .benefit-progress {
        grid-template-columns:repeat(2,1fr);
        gap:0;
        padding:0;
        background:transparent;
    }
    .benefit-progress-item {
        padding:32px 22px;
        border:0;
        border-radius:0;

    box-shadow:none !important;
    }
    
    .benefit-progress-item span { white-space: pre-line;}
    
    .benefit-progress-item:not(:last-child)::after {display:none;}
    .benefit-progress-item:nth-child(odd):not(:last-child)::after {
        display:flex;
        top:50%;
        right:0;
        transform:translate(50%,-50%);
    }
    .brand-cards {grid-template-columns:1fr;}
    .map-box {min-height:520px;}
    .store-panel {height:520px;min-height:520px;}
    #naverMap {height:100%;min-height:520px;}
}

@media (max-width:740px) {
    :root {--header:74px;}
    body {padding-bottom:108px;}
    .wrap,
    .header-inner,
    .hero-content {width:min(calc(100% - 34px),var(--max));}
    .logo img {height:44px;}
    .hero-content {padding:118px 0 82px;}
    .hero h1 {font-size:clamp(48px,14.5vw,76px);}
    .hero p {font-size:16px;}
    .hero-actions .btn {width:100%;}
    .section {padding:82px 0;}
    .brand-feature {margin-bottom:0;}
    .brand-lead {margin-top:20px;}
    .brand-lead p {font-size:12px;line-height:1.6;}
    .brand-video {margin-top:30px;border-radius:22px;}
    .brand-video-stage {margin-top:30px;}
    .brand-video-stage .brand-video {margin-top:0;}
    .brand-video-stage .image-flow-section--behind-video {top:110%;}
    .benefit-progress {
        grid-template-columns:1fr;
        gap:0;
        padding:0;
        border-radius:0;
        background:transparent;
    }
    .benefit-progress-item {
        display:grid;
        grid-template-columns:58px minmax(0,1fr);
        gap:0 16px;
        align-items:center;
        padding:22px 18px;
        border:0;
        border-radius:0;
        background:transparent;
    box-shadow:none !important;
        text-align:left;
    }
    .benefit-progress-icon {
        grid-row:1 / span 3;
        width:58px;
        height:58px;
    }
    .benefit-progress-icon i {font-size:22px;}
    .benefit-progress-item:not(:last-child)::after,
    .benefit-progress-item:nth-child(odd):not(:last-child)::after {display:none;}
    .benefit-progress-num {justify-self:start;margin-top:0;}


    .image-flow-section {padding:26px 0;}
    .image-flow-track {gap:8px;animation-duration:44s;}

    .map-box {min-height:300px;border-radius:24px;}
    #naverMap {height:100%;min-height:300px;}
    

    
    .store-panel {height:520px;min-height:520px;border-radius:24px;}
    .store-region-tabs {padding:10px 10px 20px 30px;gap:6px;}
    .store-region-tab {min-height:32px;padding:0 10px;font-size:12px;}
    .store-list {flex:1 1 auto;min-height:0;max-height:none;overflow:auto;}
    .footer {padding-bottom:0px;}
    .footer-inner {display:block;}
    .footer-links {margin-top:24px;}
    /*
.side-floating-menu{

    right: 0;
    top: 50%;
    bottom: auto;
    width: 72px;

    transform: translateY(-50%);
}
    .side-floating-menu a {min-height:68px;padding:9px 6px;font-size:11px;gap:6px;}
    .side-floating-menu i {font-size:18px;}
    */



    .side-floating-menu{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        transform:none;
        width:100%;
        height:60px;
        display:flex;
        border-radius:16px 16px 0 0;
        overflow:hidden;
        background:#d80c18;
        z-index:9999;
        padding-bottom:env(safe-area-inset-bottom);
    }

    .side-floating-menu a{
        flex:1;
        min-height:auto;
        height:60px;
        padding:8px 4px;
        border:0;
        border-right:1px solid rgba(255,255,255,.18);

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
    }
.side-floating-menu a span br {display:none}

    .side-floating-menu a:last-child{
        border-right:0;
    }

    .side-floating-menu i{
        font-size:20px;
    }

    .side-floating-menu span{
        font-size:11px;
        line-height:1.2;
        white-space:nowrap;
    }


    
    
.scroll-guide {
        top: 45%;
        bottom: auto;
        transform: translateY(-50%);
        width: 28px;
        height: 46px;
    }
    .scroll-wheel::before {top:9px;height:9px;}
    .floating-join {bottom:calc(16px + env(safe-area-inset-bottom));}
    .floating-join a {
        min-width:calc(100vw - 28px);
        min-height:70px;
        padding:0 22px;
        font-size:20px;
    }
    .floating-join a::before {font-size:19px;}
    .coupon-modal .modal-body {padding:28px 20px 24px;}
    .coupon-modal-actions {grid-template-columns:1fr;}
}

@media (max-width:420px) {
    .floating-join a {font-size:18px;}
}

@media (prefers-reduced-motion:reduce) {
    html {scroll-behavior:auto;}
    *,*::before,*::after {animation:none !important;transition:none !important;}
    .reveal {opacity:1;transform:none;}
    h1 u,
    h2 u {transition:none !important;}
}

/* =========================================================
   Benefit progress / notice final cleanup
   - 섹션 사이 라인 제거
   - 프로그레스 배경 통일
   - 빨간 연결 바 제거 후 Font Awesome 화살표만 중앙 배치
========================================================= */
.section,
.section.alt,
.footer {
    border-top:0 !important;
}
#benefit,
#benefit.section.alt {
    background:var(--section) !important;
    border-top:0 !important;
}
#benefit .wrap,
#benefit .benefit-progress,
#benefit .benefit-progress-item {
    overflow:visible !important;
}
#benefit .benefit-progress {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:42px !important;
    row-gap:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

#benefit .benefit-progress-item:not(:last-child)::after {
    content:'\f054' !important;
    position:absolute !important;
    top:50% !important;
    right:-35px !important;
    left:auto !important;
    z-index:30 !important;
    width:28px !important;
    height:28px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-family:'Font Awesome 6 Free' !important;
    font-weight:900 !important;
    font-size:13px !important;
    line-height:1 !important;
    color:rgba(255,255,255,.78) !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:translateY(-50%) !important;
}
#benefit .benefit-notice {
    margin-top:28px;
    padding:0 8px;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none !important;
    color:var(--muted);
}
#benefit .benefit-notice strong {
    display:block;
    color:#fff;
    font-size:18px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:-.055em;
}
#benefit .benefit-notice ul {
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:12px 0 0;
    padding:0;
    list-style:none;
}
#benefit .benefit-notice li {
    position:relative;
    padding-left:14px;
    color:rgba(255,255,255,.72);
    font-size:14px;
    font-weight:600;
    line-height:1.65;
}
#benefit .benefit-notice li::before {
    content:'';
    position:absolute;
    left:0;
    top:.72em;
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--accent);
}
@media (max-width:1024px) {
    #benefit .benefit-progress {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:42px !important;
        row-gap:26px !important;
    }
    #benefit .benefit-progress-item:not(:last-child)::after {
        display:none !important;
    }
    #benefit .benefit-progress-item:nth-child(odd):not(:last-child)::after {
        display:flex !important;
        right:-35px !important;
    }
    #benefit .benefit-notice ul {
        grid-template-columns:1fr;
        gap:5px;
    }
}
@media (max-width:740px) {
    #benefit .benefit-progress {
        grid-template-columns:1fr !important;
        column-gap:0 !important;
        row-gap:0 !important;
    }
    #benefit .benefit-progress-item {margin-bottom:-1px}
    #benefit .benefit-progress-item:not(:last-child)::after,
    #benefit .benefit-progress-item:nth-child(odd):not(:last-child)::after {
        display:none !important;
    }
    #benefit .benefit-notice {
        margin-top:18px;
        padding:0;
    }
    #benefit .benefit-notice strong {
        font-size:15px;
    }
    #benefit .benefit-notice li {
        font-size:11px;
    }
}

/* =========================================================
   Benefit white theme override
   - 첫 event benefit 영역을 흰 배경 기준으로 반전
   - 그림자 효과 없음
========================================================= */
#benefit,
#benefit.section.alt {
    background:#fff !important;
    color:#111 !important;
}
#benefit .eyebrow {
    color:var(--accent) !important;
}
#benefit .section-title,
#benefit .section-title span,
#benefit h5 {
    color:#111 !important;
    margin-bottom:0px;
}
h5 {
    font-size:clamp(13px,1.5vw,22px);
    font-weight:800;
    line-height:1.45;
    letter-spacing:-.055em;
    
    
}



#benefit .benefit-progress-item {
    background:#fff !important;
    border:1px solid rgba(0,0,0,.12) !important;
    color:#111 !important;
    box-shadow:none !important;
}
#benefit .benefit-progress-item:not(:last-child)::after {
    color:rgba(0,0,0,.38) !important;
}
#benefit .benefit-progress-icon {
    background:var(--accent) !important;
    color:#fff !important;
}
#benefit .benefit-progress-num {
    background:rgba(216,12,24,.08) !important;
    border-color:rgba(216,12,24,.28) !important;
    color:var(--accent) !important;
}
#benefit .benefit-progress-item strong {
    color:#111 !important;
}
#benefit .benefit-progress-item span:not(.benefit-progress-num) {
    color:rgba(0,0,0,.62) !important;
}
#benefit .benefit-notice {
    color:rgba(0,0,0,.62) !important;
}
#benefit .benefit-notice strong {
    color:#111 !important;
}
#benefit .benefit-notice li {
    color:rgba(0,0,0,.62) !important;
}
#benefit .benefit-notice li::before {
    background:var(--accent) !important;
}




/* =========================================================
   Fresh scroll hero above menu
========================================================= */
.fresh-scroll-hero {
    --fresh-blue-p:0;
    --fresh-fish-o:.05;
    --fresh-fish-y:190px;
    --fresh-fish-x:70px;
    --fresh-fish-scale:.88;
    --fresh-copy-y:0px;
    --fresh-guide-o:1;
    --fresh-grid-gray-o:.24;
    --fresh-grid-white-o:0;
    position:relative;
    height:190vh;
    min-height:1320px;
    overflow:clip;
    background:#fff;
    color:#101010;
    isolation:isolate;
}
.fresh-scroll-sticky {
    position:sticky;
    top:0;
    height:100svh;
    min-height:720px;
    overflow:hidden;
    background:#fff;
}
.fresh-scroll-sticky::before {
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(90deg, rgba(0,0,0,.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0,0,0,.12) 1px, transparent 1px);
    background-size:68px 68px;
    opacity:var(--fresh-grid-gray-o);
    pointer-events:none;
}
.fresh-scroll-bg {
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(135deg, #0074ff 0%, #0057d8 44%, #00358e 100%);
    opacity:var(--fresh-blue-p);
    pointer-events:none;
}
.fresh-scroll-bg::before {
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:68px 68px;
    opacity:var(--fresh-grid-white-o);
    pointer-events:none;
}
.fresh-scroll-inner {
    position:relative;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    align-items:center;
    width:min(calc(100% - 56px),var(--max));
    height:100%;
    margin:0 auto;
    gap:50px;
}
.fresh-scroll-copy {
    position:relative;
    z-index:5;
    max-width:710px;
    color:#101010;
    transform:translate3d(0,var(--fresh-copy-y),0);
    transition:color .25s var(--ease);
}
.fresh-scroll-hero.is-blue .fresh-scroll-copy {
    color:#fff;
}
.fresh-scroll-label {
    display:inline-flex;
    align-items:center;
    gap:0;
    margin-bottom:20px;
    color:var(--accent);
    font-size:13px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:color .25s var(--ease);
}
.fresh-scroll-label::before {
    content:none;
    display:none;
}
.fresh-scroll-hero.is-blue .fresh-scroll-label {
    
}
.fresh-scroll-title {
    margin:0;
    font-family:'FlightSansTitle';
    font-size:clamp(44px,4vw,80px);
    font-weight:900;
    line-height:1.1;
    letter-spacing:-.012em;
}
.fresh-scroll-title em {
    display:block;
    font-family:'FlightSans';
    font-style:normal;
    font-weight:400;
}
.fresh-scroll-copy p {
    max-width:650px;
    margin:26px 0 0;
    color:rgba(16,16,16,.72);
    font-size:clamp(16px,1.45vw,20px);
    font-weight:500;
    line-height:1.82;
    letter-spacing:-.035em;
    word-break:keep-all;
    transition:color .25s var(--ease);
     white-space: pre-line;
}
.fresh-scroll-hero.is-blue .fresh-scroll-copy p {
    color:rgba(255,255,255,.88);
}
.fresh-scroll-fish {
    position:absolute;
    z-index:4;
    right:-11vw;
    bottom:-17vh;
    width:min(1120px,74vw);
    opacity:var(--fresh-fish-o);
    transform:translate3d(var(--fresh-fish-x),var(--fresh-fish-y),0) scale(var(--fresh-fish-scale));
    transform-origin:center bottom;
    pointer-events:none;
    will-change:transform,opacity;
}
.fresh-scroll-fish img {
    display:block;
    width:100%;
    height:auto;
    user-select:none;
}
.fresh-scroll-bigtype {
    position:absolute;
    z-index:2;
    right:-.08em;
    top:9vh;
    color:rgba(255,255,255,.14);
    font-size:clamp(100px,20vw,310px);
    font-weight:900;
    line-height:.8;
    letter-spacing:-.12em;
    opacity:var(--fresh-blue-p);
    pointer-events:none;
}
.fresh-scroll-guide {
    position:absolute;
    z-index:8;
    left:50%;
    bottom:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    color:rgba(0,0,0,.52);
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:var(--fresh-guide-o);
    transform:translateX(-50%);
    transition:color .25s var(--ease);
}
.fresh-scroll-hero.is-blue .fresh-scroll-guide {
    color:rgba(255,255,255,.72);
}
.fresh-scroll-guide span {
    display:block;
    width:1px;
    height:48px;
    background:currentColor;
    animation:freshScrollLine 1.45s ease-in-out infinite;
}
@keyframes freshScrollLine {
    0% {transform:scaleY(.22);transform-origin:top;opacity:.35;}
    50% {transform:scaleY(1);transform-origin:top;opacity:1;}
    100% {transform:scaleY(.22);transform-origin:bottom;opacity:.35;}
}
@media (max-width:1024px) {
    .fresh-scroll-hero {
        height:170vh;
        min-height:1220px;
    }
    .fresh-scroll-sticky {
        min-height:720px;
    }
    .fresh-scroll-inner {
        display:flex;
        align-items:flex-start;
        width:min(calc(100% - 36px),760px);
        padding-top:112px;
    }
    .fresh-scroll-copy {
        max-width:100%;
    }

    .fresh-scroll-copy p {
        font-size:16px;
        line-height:1.74;
    }
    .fresh-scroll-fish {
        right:-44vw;
        bottom:-8vh;
        width:134vw;
    }
    .fresh-scroll-bigtype {
        top:46vh;
        right:-.12em;
        font-size:34vw;
    }
}
@media (max-width:740px) {
    .fresh-scroll-hero {
        min-height:1080px;
    }
    .fresh-scroll-inner {
        width:calc(100% - 34px);
        padding-top:92px;
    }
    .fresh-scroll-label {
        margin-bottom:18px;
        font-size:11px;
    }

    .fresh-scroll-copy p {
        margin-top:20px;
        font-size:15px;
    }
    .fresh-scroll-fish {
        right:-66vw;
        bottom:-2vh;
        width:162vw;
    }
    .fresh-scroll-guide {
        bottom:118px;
    }
}

/* Shadow effects intentionally disabled */
*, *::before, *::after {
    box-shadow:none !important;
    text-shadow:none !important;
}



/* =========================================================
   Instagram SNS Section
========================================================= */
.sns-section {
    position:relative;
    overflow:hidden;
    background:#fff !important;
    color:#111 !important;
}
/*
.sns-section::before {
    content:'';
    position:absolute;
    inset:-18% -10% auto;
    height:360px;
    background:
        radial-gradient(circle at 18% 40%, rgba(255,45,85,.20), transparent 34%),
        radial-gradient(circle at 50% 20%, rgba(255,186,0,.18), transparent 30%),
        radial-gradient(circle at 82% 40%, rgba(123,97,255,.18), transparent 34%);
    pointer-events:none;
}
*/
.sns-section .wrap {
    position:relative;
    z-index:2;
}
.sns-section .section-head {
    align-items:end;
}
.sns-section .section-title,
.sns-section .section-title span {
    color:#111 !important;
}
.sns-section .section-desc {
    color:rgba(0,0,0,.62) !important;
}
.sns-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}
.sns-card {
    position:relative;
    display:block;
    overflow:hidden;
    padding:30px 30px 32px;
    border:1px solid rgba(0,0,0,.10);
    border-radius:18px;
    background:#fff;
    color:#111;
    box-shadow:0 18px 44px rgba(0,0,0,.08) !important;
    transform:translateY(0);
    transition:transform .32s var(--ease), border-color .32s var(--ease), box-shadow .32s var(--ease);
}
.sns-card:hover {
    transform:translateY(-8px);
    border-color:rgba(216,12,24,.28);
    box-shadow:0 26px 68px rgba(0,0,0,.14) !important;
}
.sns-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg, rgba(255,45,85,.10), rgba(255,186,0,.08), rgba(123,97,255,.08));
    opacity:0;
    transition:opacity .32s var(--ease);
    pointer-events:none;
}
.sns-card:hover::before {
    opacity:1;
}
.sns-profile {
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    color:#111;
    font-size:20px;

    letter-spacing:-.04em;
}
.sns-profile i {
    width:30px;
    height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
    color:#fff;
    font-size:20px;
}
.sns-img {
    position:relative;
    z-index:2;
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:10px;
    background:#f3f3f3;
}
.sns-img img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s var(--ease);
}
.sns-card:hover .sns-img img {
    transform:scale(1.045);
}
.sns-caption {
    position:relative;
    z-index:2;
    display:block;
    margin-top:0px;
    color:#000;
    font-size:clamp(14px,1.8vw,23px);

    line-height:1.5;
    letter-spacing:-.06em;
}
.sns-cta {
    display:flex;
    justify-content:center;
    margin-top:36px;
}
.sns-cta .btn {
    min-width:240px;
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
    border:0;
    color:#fff;

}
@media (max-width:1024px) {
    .sns-grid {
        gap:18px;
    }
    .sns-card {
        padding:20px;
    }
}
@media (max-width:740px) {
    .sns-grid {
        grid-template-columns:1fr;
    }
    .sns-card {
        padding:18px;
        border-radius:16px;
    }
    .sns-profile {
        font-size:13px;
    }
    .sns-profile i {
    width:20px;
    height:20px;
border-radius:999px !important;
    font-size:12px;
}
.sns-card p {font-size:11px}


}



/* =========================================================
   Menu Slider Smooth Auto Flow Patch
   - 자연스럽게 자동 이동
   - 마우스 오버/키보드 포커스 시 정지, 해제 시 재생
   - 카드가 사라지지 않도록 JS에서 카드 폭을 px로 고정 계산
========================================================= */
.menu-slider-viewport {
    overflow:hidden !important;
    touch-action:pan-y;
}
.menu-track {
    display:flex !important;
    align-items:flex-start !important;
    gap:var(--menu-gap) !important;
    width:max-content !important;
    min-width:max-content !important;
    will-change:transform !important;
    transform:translate3d(0,0,0);
}
/*
.menu-track .menu-card {
    flex:0 0 var(--menu-card-width, 280px) !important;
    width:var(--menu-card-width, 280px) !important;
    min-width:var(--menu-card-width, 280px) !important;
    max-width:var(--menu-card-width, 280px) !important;
}
*/
@media (prefers-reduced-motion:reduce) {
    .menu-track {transform:none !important;}
}


/* =========================================================
   Menu full-width layout / top-right controls patch
========================================================= */
#menu .wrap {
    width:100%;
    max-width:none;
}
#menu .section-head {
    width:min(calc(100% - 56px),var(--max));
    margin-left:auto;
    margin-right:auto;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start;
}
#menu .section-head > div:first-child,
#menu .menu-slider-controls {
    width:auto !important;
}
#menu .menu-slider-controls {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding-top:72px;
}
#menu .menu-slider-controls .menu-arrow {
    position:static !important;
    inset:auto !important;
    transform:none !important;
    flex:0 0 auto;
}
#menu .menu-slider-wrap {
    width:100%;
    max-width:none;
    margin-top:0;
    overflow:hidden;
}
#menu .menu-slider-viewport {
    width:100%;
}
@media (max-width:740px) {
    #menu .section-head {
        width:min(calc(100% - 34px),var(--max));
        grid-template-columns:1fr auto !important;
        gap:18px;
        align-items:start;
    }
    #menu .menu-slider-controls {
	    display:none;
        gap:8px;
        padding-top:48px;
    }
}
@media (max-width:520px) {
    #menu .section-head {
        grid-template-columns:1fr !important;
    }
    #menu .menu-slider-controls {
        justify-content:flex-end;
        padding-top:0;
    }
}


/* =========================================================
   Menu card small fixed-size final override
   - 100% wide section 유지
   - 카드 자체는 210px 고정
   - 기존 calc((100% - gap) / n) 비율 규칙 무력화
========================================================= */
#menu .menu-slider-wrap {
    --menu-gap:14px !important;
    --menu-card-width:210px !important;
}
#menu .menu-track {
    width:max-content !important;
    min-width:max-content !important;
}
#menu .menu-card {
    flex:0 0 var(--menu-card-width) !important;
    width:var(--menu-card-width) !important;
    min-width:var(--menu-card-width) !important;
    max-width:var(--menu-card-width) !important;
}


/* PC 메뉴 카드 200px 정사각형 강제 고정 */
@media (min-width:1025px){
    #menu .menu-slider-wrap{
        --menu-card-width:300px !important;
        --menu-gap:16px !important;
    }
    #menu .menu-card{
        flex:0 0 300px !important;
        width:300px !important;
        min-width:300px !important;
        max-width:300px !important;
    }
    #menu .menu-img{
        width:300px !important;
        aspect-ratio:1/1 !important;
    }
}
.event-benefit-title{
    position:relative;
    overflow:hidden;
}

/* 아래에서 폭죽처럼 날리는 꽃가루 */
.benefit-fireworks{
    position:absolute;
    left:0;
    right:0;
    bottom:-20px;
    height:220px;
    pointer-events:none;
}

h5 br {display:none;}
@media (max-width: 1000px) {
.benefit-fireworks{display:none;}
h5 br {display:block;}
}

.benefit-fireworks span{
    position:absolute;
    bottom:0;
    width:10px;
    height:10px;
    border-radius:50%;
    opacity:0;

    animation:fireworkConfetti 2.8s ease-out infinite;
}

.benefit-fireworks span:nth-child(1){left:10%;background:#ff1744;animation-delay:0s;}
.benefit-fireworks span:nth-child(2){left:14%;background:#ffd600;animation-delay:.2s;}
.benefit-fireworks span:nth-child(3){left:20%;background:#00d4ff;animation-delay:.5s;}
.benefit-fireworks span:nth-child(4){left:28%;background:#7c4dff;animation-delay:.1s;}
.benefit-fireworks span:nth-child(5){left:36%;background:#ff9800;animation-delay:.6s;}
.benefit-fireworks span:nth-child(6){left:44%;background:#00e676;animation-delay:.3s;}
.benefit-fireworks span:nth-child(7){left:52%;background:#ff1744;animation-delay:.8s;}
.benefit-fireworks span:nth-child(8){left:60%;background:#ffd600;animation-delay:.4s;}
.benefit-fireworks span:nth-child(9){left:68%;background:#00d4ff;animation-delay:.7s;}
.benefit-fireworks span:nth-child(10){left:76%;background:#ff9800;animation-delay:.2s;}
.benefit-fireworks span:nth-child(11){left:84%;background:#7c4dff;animation-delay:.9s;}
.benefit-fireworks span:nth-child(12){left:90%;background:#00e676;animation-delay:.5s;}

@keyframes fireworkConfetti{
    0%{
        transform:translate(0,0) scale(.2);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:
            translate(
                calc((var(--rand-x, 1) - .5) * 260px),
                -220px
            )
            scale(1.2)
            rotate(540deg);
        opacity:0;
    }
}

/* 각 방향 랜덤 느낌 */
.benefit-fireworks span:nth-child(odd){
    --rand-x:-1;
}

.benefit-fireworks span:nth-child(even){
    --rand-x:1;
}
.red {color:red !important}


/* 모바일 햄버거 메뉴 */
.mobile-menu-btn,
.mobile-nav,
.mobile-nav-dim {
    display:none;
}

/* 모바일 햄버거 메뉴 */
.mobile-menu-btn,
.mobile-nav,
.mobile-nav-dim {
    display:none;
}

@media (max-width:1000px){

    .header-inner{
        justify-content:space-between;
    }

    .mobile-menu-btn{
        display:flex;
        width:44px;
        height:44px;
        margin-left:auto;
        align-items:center;
        justify-content:center;

background:none;
        color:#fff;
        font-size:20px;
        cursor:pointer;
        z-index:1002;
    }

    .mobile-nav-dim{
        display:block;
        position:fixed;
        inset:0;
        z-index:1000;
 background:rgba(0,0,0,.5);
        opacity:0;
        visibility:hidden;
        transition:.3s;
    }

    .mobile-nav{
        display:block;
        position:fixed;
        top:0;
        right:0;
        z-index:1001;
        width:min(82vw,340px);
        height:100dvh;
        padding:30px 26px 34px;
        background:#111;
        transform:translateX(100%);
        transition:.35s ease;
        overflow-y:auto;
        box-shadow:-20px 0 50px rgba(0,0,0,.35);
    }

    .mobile-nav-close{
        position:absolute;
        top:18px;
        right:18px;
        width:42px;
        height:42px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        color:#fff;
        font-size:20px;
        cursor:pointer;
        background:none;
    }

    .mobile-nav a{
        display:block;
        padding:15px 0;
        border-bottom:1px solid rgba(255,255,255,.1);
        color:#fff;
        font-size:12px;
        font-weight:600;
    }

    .mobile-nav .header-dropdown{
        display:block;
        height:auto;
        padding:0;
    }

    .mobile-nav .header-dropdown::after,
    .mobile-nav .header-dropdown-layer{
        display:none;
    }

    body.mobile-menu-open{
        overflow:hidden;
    }

    body.mobile-menu-open .mobile-nav{
        transform:translateX(0);
    }

    body.mobile-menu-open .mobile-nav-dim{
        opacity:1;
        visibility:visible;
    }
}



.sns-tabs {
    display: flex;
    gap: 10px;
    margin: 28px 0 30px;
}

.sns-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.sns-tab-btn i {
    font-size: 18px;
}

.sns-tab-btn.is-active {
    background: #000000;
    border-color: #ffffff;
    color: #fff;
}

.sns-tab-btn.is-youtube.is-active {
    background: #ff0000;
    border-color: #ff0000;
}

.sns-tab-btn.is-instagram.is-active {
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
    border-color: #ffffff !important;
}

.sns-panel {
    display: none;
}

.sns-panel.is-active {
    display: grid;
}



.is-youtube-card .sns-profile i {
    border-radius:8px;
    background:linear-gradient(135deg,#ff0000,#ff0000,#ff0000);
}
.sns-cta i {margin-right:10px}
.sns-cta.is-hidden {
    display: none;
}

.sns-cta .btn.is-youtube-btn {
    background: #ff0000;
    border-color: #ff0000;
    color: #fff;
}

@media (max-width:1000px){
.sns-tabs {
    display: flex;
    gap: 10px;
    margin: -20px 0 20px 0;
   
}

.sns-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding: 0 10px 0 10px;
    border: 1px solid #ddd;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: .25s ease;
}

.sns-tab-btn i {
    font-size: 12px;
}

.sns-tab-btn.is-active {
    background: #000000;
    border-color: #ffffff;
    color: #fff;
}

.sns-tab-btn.is-youtube.is-active {
    background: #ff0000;
    border-color: #ff0000;
}

.sns-tab-btn.is-instagram.is-active {
    background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
    border-color: #ffffff !important;
}

.sns-panel {
    display: none;
}

.sns-panel.is-active {
    display: grid;
}



.is-youtube-card .sns-profile i {
    border-radius:8px;
    background:linear-gradient(135deg,#ff0000,#ff0000,#ff0000);
}
.sns-cta i {margin-right:10px}
.sns-cta.is-hidden {
    display: none;
}

.sns-cta .btn.is-youtube-btn {
    background: #ff0000;
    border-color: #ff0000;
    color: #fff;
}
}


.hero-media{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.hero-media iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:100vw;
    height:56.25vw; /* 16:9 */
    min-width:177.78vh;
    min-height:100vh;
    transform:translate(-50%,-50%);
    pointer-events:none;
}

.hero-cover{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}
.hero-media iframe{
    position:absolute;
    top:50%;
    left:50%;
    width:100vw;
    height:56.25vw;
    min-width:177.78vh;
    min-height:100vh;
    transform:translate(-50%,-50%);
    pointer-events:none;
}
/* 모바일에서만 영상 출력 영역 1:1 */
@media (max-width:1000px){

    .hero{
        position: relative;
        height: 100vw;     /* 출력 영역을 정사각형 */
        min-height: 100vw;
    }

    .hero-media{
        position: absolute;
        inset: 0;
    }

    .hero-media iframe{
        top: 50%;
        left: 50%;
        width: 177.78vw;   /* 16:9 영상이 정사각형을 꽉 채우도록 */
        height: 100vw;
        min-width: 0;
        min-height: 0;
        transform: translate(-50%, -50%);
    }
}