/* =========================================================
   SERENO BAY HOTEL — 보조 CSS
   기준작 theme/02 방식: 본문은 Tailwind utility 중심,
   여기는 full-bleed / 슬라이더 / 그리드 CDN한계 보정 / 컴포넌트 상태 전이만.
   ========================================================= */

:root{
  --brown:#6b5a3e; --brown-dk:#4a3d2a; --brown-lt:#957b52;
  --gold:#b8962e; --gold-lt:#d4b263;
  --cream:#f7f3ee; --cream-dk:#ede8e1; --warm:#faf8f5;
  --text:#1a1a1a; --text2:#555; --text3:#999;
  --bdr:#e0dbd4; --bdr-lt:#eee9e2;
  --serif:'Cormorant Garamond',Georgia,serif;
}

html{ scroll-behavior:smooth; }
html,body{ overflow-x:hidden; max-width:100%; }
body{ -webkit-font-smoothing:antialiased; }
*{ min-width:0; }
img{ max-width:100%; }

/* ---------- HEADER (transparent → scrolled) ---------- */
.header{ transition:all .4s; }
.header--transparent{ background:transparent; border-bottom:1px solid rgba(255,255,255,.12); }
.header:not(.header--transparent){ background:#fff; border-bottom:1px solid var(--bdr-lt); }
.header.scrolled{ background:rgba(255,255,255,.97)!important; border-bottom-color:var(--bdr-lt)!important; box-shadow:0 1px 30px rgba(0,0,0,.06); backdrop-filter:blur(10px); }

.logo-en{ font-family:var(--serif); font-size:1.55rem; font-weight:500; letter-spacing:5px; color:var(--brown); transition:color .3s; line-height:1.05; white-space:nowrap; }
.logo-sub{ font-family:var(--serif); font-size:.5rem; letter-spacing:4px; color:var(--text3); margin-top:-4px; white-space:nowrap; }
@media(max-width:480px){ .logo-en{ font-size:1.15rem; letter-spacing:2.5px; } .logo-sub{ font-size:.42rem; letter-spacing:3px; } }
@media(max-width:320px){ .logo-en{ font-size:.95rem; letter-spacing:1.5px; } .logo-sub{ font-size:.38rem; letter-spacing:2px; } }
.header--transparent .logo-en{ color:#fff; }
.header--transparent .logo-sub{ color:rgba(255,255,255,.45); }
.header.scrolled .logo-en{ color:var(--brown)!important; }
.header.scrolled .logo-sub{ color:var(--text3)!important; }

.gnb a{ font-size:12px; font-weight:400; letter-spacing:2.5px; color:var(--text2); padding:8px 0; position:relative; transition:color .3s; white-space:nowrap; }
.header--transparent .gnb a{ color:rgba(255,255,255,.85); }
.header.scrolled .gnb a{ color:var(--text2)!important; }
.gnb a::after{ content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--brown); transform:scaleX(0); transition:transform .3s; }
.gnb a:hover::after,.gnb a.active::after{ transform:scaleX(1); }
.gnb a.active{ color:var(--brown); }
.header--transparent .gnb a.active{ color:var(--gold-lt); }

/* 햄버거 */
.mobile-menu-btn{ position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; width:26px; height:18px; flex-direction:column; justify-content:space-between; }
.mobile-menu-btn span{ display:block; width:100%; height:1.5px; background:var(--text); transition:.3s; }
.header--transparent .mobile-menu-btn span{ background:#fff; }
.header.scrolled .mobile-menu-btn span{ background:var(--text)!important; }
.mobile-menu-btn.is-flex{ display:flex; }
@media(min-width:768px){ .mobile-menu-btn{ right:24px; } }

/* ---------- MOBILE NAV (우측 풀 슬라이드, translate 제어) ---------- */
.mobile-nav{ position:fixed; top:0; right:0; width:100%; height:100%; background:#fff; z-index:200; translate:100% 0; transition:translate .4s cubic-bezier(.4,0,.2,1); visibility:hidden; }
.mobile-nav.open{ translate:0 0; visibility:visible; }
.mobile-nav-close{ position:absolute; top:20px; right:24px; background:none; border:none; font-size:28px; color:var(--text); cursor:pointer; font-weight:300; line-height:1; }
.mobile-nav-inner{ padding:90px 40px; }
.mobile-nav-logo{ font-family:var(--serif); font-size:1.3rem; letter-spacing:4px; color:var(--brown); margin-bottom:40px; }
.mobile-nav nav a{ display:block; padding:18px 0; font-size:13px; letter-spacing:3px; color:var(--text); border-bottom:1px solid var(--bdr-lt); transition:color .25s; }
.mobile-nav nav a:hover{ color:var(--brown); }
.mobile-nav-info{ margin-top:44px; font-size:13px; color:var(--text3); line-height:2.2; }

/* ---------- HERO ---------- */
.hero__slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.2s ease-in-out; }
.hero__slide.active{ opacity:1; }
.hero__overlay{ background:rgba(0,0,0,.35); }
.hero__sub{ font-family:var(--serif); font-size:.8rem; letter-spacing:6px; color:rgba(255,255,255,.55); margin-bottom:20px; }
.hero__title{ font-family:var(--serif); font-size:4.2rem; font-weight:300; color:#fff; letter-spacing:2px; line-height:1.15; margin-bottom:20px; }
.hero__desc{ font-size:.95rem; color:rgba(255,255,255,.72); margin-bottom:36px; font-weight:300; letter-spacing:.5px; }
.hero__btn{ display:inline-block; padding:14px 40px; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:12px; letter-spacing:3px; transition:all .3s; }
.hero__btn:hover{ background:#fff; color:var(--brown); border-color:#fff; }
.hero__btn:active{ transform:translateY(1px); }
.hero__nav-btn{ width:40px; height:3px; background:rgba(255,255,255,.3); border:none; cursor:pointer; transition:background .3s; padding:0; }
.hero__nav-btn.active{ background:#fff; }

@media(max-width:1024px){ .hero__title{ font-size:3rem; } }
@media(max-width:768px){ .hero__title{ font-size:2.4rem; } }
@media(max-width:480px){
  .hero__title{ font-size:1.9rem; }
  .hero__nav{ display:none; }
}
@media(max-width:320px){
  .hero__sub{ font-size:.65rem; letter-spacing:4px; margin-bottom:12px; }
  .hero__title{ font-size:1.4rem; }
  .hero__desc{ font-size:.78rem; margin-bottom:24px; }
  .hero__btn{ padding:9px 20px; font-size:10px; letter-spacing:2px; }
}

/* ---------- NOTICE BAR (세로 슬라이드) ---------- */
.notice-bar{ background:var(--brown-dk); color:#fff; }
.notice-bar-inner{ height:48px; }
.notice-bar-icon{ color:rgba(255,255,255,.5); font-size:14px; line-height:1; }
.notice-bar-slider{ flex:1; height:48px; overflow:hidden; position:relative; }
.notice-bar-track{ transition:transform .4s cubic-bezier(.4,0,.2,1); }
.notice-bar-item{ display:flex; align-items:center; height:48px; color:#fff; text-decoration:none; gap:20px; }
.notice-bar-item:hover .notice-bar-title{ color:var(--gold-lt); }
.notice-bar-title{ font-size:13px; font-weight:500; letter-spacing:.3px; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .3s; }
.notice-bar-desc{ font-size:12px; font-weight:300; color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.notice-bar-date{ font-family:var(--serif); font-size:11px; letter-spacing:.5px; color:rgba(255,255,255,.4); flex-shrink:0; margin-left:auto; }
.notice-bar-pause{ flex-shrink:0; background:none; border:none; color:rgba(255,255,255,.4); cursor:pointer; padding:4px; transition:color .3s; display:flex; align-items:center; font-size:10px; line-height:1; }
.notice-bar-pause:hover{ color:#fff; }
@media(max-width:768px){
  .notice-bar-inner{ height:42px; }
  .notice-bar-slider{ height:42px; }
  .notice-bar-item{ height:42px; gap:12px; }
  .notice-bar-title{ font-size:12px; }
  .notice-bar-desc{ display:none; }
  .notice-bar-date{ font-size:10px; }
}
@media(max-width:320px){
  .notice-bar-inner{ height:38px; }
  .notice-bar-slider{ height:38px; }
  .notice-bar-item{ height:38px; }
  .notice-bar-title{ font-size:11px; }
  .notice-bar-date{ font-size:9px; }
}

/* ---------- 공통 섹션 라인/타이틀 ---------- */
.offers__line,.about__line,.fac__line,.rev__line{ width:40px; height:1px; background:var(--gold); margin-bottom:16px; }
.offers__title,.about__title,.fac__title,.rev__title{ font-family:var(--serif); font-size:1.8rem; font-weight:400; letter-spacing:6px; color:var(--text); margin-bottom:8px; }
.offers__sub,.fac__sub,.rev__sub{ font-size:14px; color:var(--text3); letter-spacing:1px; }
@media(max-width:480px){ .offers__title,.about__title,.fac__title,.rev__title{ font-size:1.4rem; letter-spacing:4px; } }
@media(max-width:320px){ .offers__title,.about__title,.fac__title,.rev__title{ font-size:1.1rem; letter-spacing:2px; } .offers__sub,.fac__sub,.rev__sub{ font-size:12px; } }

/* ---------- OFFERS ---------- */
.offers{ padding:120px 0 100px; }
.offers__featured{ display:flex; overflow:hidden; margin-bottom:16px; border:1px solid var(--bdr-lt); transition:box-shadow .3s; }
.offers__featured:hover{ box-shadow:0 12px 48px rgba(0,0,0,.08); }
.offers__featured-img{ flex:1.3; height:420px; overflow:hidden; }
.offers__featured-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.offers__featured:hover .offers__featured-img img{ transform:scale(1.04); }
.offers__featured-info{ flex:1; padding:48px; display:flex; flex-direction:column; justify-content:center; background:var(--warm); }
.offers__featured-info h3{ font-size:1.6rem; font-weight:600; margin-bottom:8px; color:var(--text); }
.offers__featured-info p{ font-size:14px; color:var(--text2); line-height:1.9; margin-bottom:16px; }

.offers__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.offers__card{ position:relative; overflow:hidden; display:block; height:320px; }
.offers__card-img{ position:absolute; inset:0; }
.offers__card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.offers__card:hover .offers__card-img img{ transform:scale(1.06); }
.offers__card-info{ position:absolute; bottom:0; left:0; right:0; padding:28px; background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%); color:#fff; z-index:1; }
.offers__card-badge{ font-size:10px; letter-spacing:2px; text-transform:uppercase; opacity:.7; display:block; margin-bottom:6px; }
.offers__card-info h3{ font-size:1.2rem; font-weight:500; margin-bottom:4px; }
.offers__card-info p{ font-size:12px; opacity:.75; margin-bottom:6px; }
.offers__card-price{ font-family:var(--serif); font-size:1.1rem; font-weight:600; }
.offers__more{ display:block; text-align:center; margin-top:48px; font-size:13px; letter-spacing:2px; color:var(--brown); transition:color .3s; }
.offers__more:hover{ color:var(--brown-dk); }

@media(max-width:1024px){
  .offers__featured{ flex-direction:column; }
  .offers__featured-img{ height:300px; }
  .offers__featured-info{ padding:32px; }
  .offers__grid{ grid-template-columns:minmax(0,1fr); grid-auto-rows:280px; }
}
@media(max-width:768px){ .offers{ padding:80px 0; } }
@media(max-width:320px){
  .offers{ padding:40px 0; }
  .offers__featured-info{ padding:20px 16px; }
  .offers__featured-info h3{ font-size:1.1rem; }
  .offers__featured-info p{ font-size:12px; margin-bottom:8px; }
  .offers__card-info{ padding:16px; }
  .offers__card-info h3{ font-size:1rem; }
  .offers__card-price{ font-size:.95rem; }
  .offers__more{ margin-top:20px; font-size:11px; letter-spacing:1px; }
}

/* ---------- ABOUT ---------- */
.about{ padding:120px 0; background:var(--cream); }
.about__img{ flex:1.1; overflow:hidden; }
.about__img img{ width:100%; height:500px; object-fit:cover; }
.about__text{ flex:1; }
.about__kr{ font-size:1.5rem; font-weight:600; margin-bottom:24px; color:var(--text); }
.about__desc{ font-size:14px; color:var(--text2); line-height:2.2; margin-bottom:40px; }
.about__stats{ display:flex; gap:40px; margin-bottom:36px; padding-bottom:36px; border-bottom:1px solid var(--bdr); }
.about__stat strong{ display:block; font-family:var(--serif); font-size:2rem; font-weight:500; color:var(--brown); letter-spacing:1px; }
.about__stat span{ font-size:11px; letter-spacing:1.5px; color:var(--text3); }
.about__link{ font-size:13px; letter-spacing:2px; color:var(--brown); border-bottom:1px solid var(--brown); padding-bottom:2px; transition:color .3s; }
.about__link:hover{ color:var(--brown-dk); border-color:var(--brown-dk); }
@media(max-width:1024px){ .about__img img{ height:360px; } }
@media(max-width:768px){ .about{ padding:80px 0; } }
@media(max-width:480px){
  .about__stats{ gap:0; justify-content:space-around; text-align:center; flex-wrap:wrap; }
  .about__stat{ flex:1; min-width:0; }
  .about__stat strong{ font-size:1.4rem; }
}
@media(max-width:320px){
  .about{ padding:40px 0; }
  .about__img img{ height:180px; }
  .about__kr{ font-size:1rem; margin-bottom:16px; }
  .about__desc{ font-size:12px; line-height:2; margin-bottom:24px; }
  .about__stats{ gap:16px; margin-bottom:24px; padding-bottom:24px; }
  .about__stat strong{ font-size:1.2rem; }
  .about__stat span{ font-size:8px; letter-spacing:1px; }
  .about__link{ font-size:12px; }
}

/* ---------- FACILITIES ---------- */
.fac{ padding:120px 0; }
.fac__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.fac__card{ position:relative; overflow:hidden; display:block; height:300px; }
.fac__card-img{ position:absolute; inset:0; }
.fac__card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.25,.46,.45,.94); }
.fac__card:hover .fac__card-img img{ transform:scale(1.06); }
.fac__card-body{ position:absolute; bottom:0; left:0; right:0; padding:24px; background:linear-gradient(to top,rgba(0,0,0,.6),transparent); color:#fff; z-index:1; }
.fac__card-en{ font-family:var(--serif); font-size:.72rem; letter-spacing:2px; opacity:.65; display:block; margin-bottom:4px; }
.fac__card-body h3{ font-size:1.1rem; font-weight:500; }
@media(max-width:1024px){ .fac__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px){ .fac{ padding:80px 0; } .fac__grid{ grid-template-columns:minmax(0,1fr); } .fac__card{ height:240px; } }
@media(max-width:320px){ .fac{ padding:40px 0; } .fac__card{ height:160px; } .fac__card-body{ padding:16px; } .fac__card-body h3{ font-size:.95rem; } }

/* ---------- REVIEWS ---------- */
.rev{ padding:120px 0; background:var(--warm); }
.rev__list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.rev__card{ background:#fff; padding:40px 32px; border:1px solid var(--bdr-lt); transition:box-shadow .3s; }
.rev__card:hover{ box-shadow:0 8px 40px rgba(0,0,0,.05); }
.rev__stars{ color:var(--gold); font-size:13px; letter-spacing:3px; margin-bottom:20px; }
.rev__text{ font-size:14px; color:var(--text2); line-height:2; margin-bottom:24px; font-style:italic; }
.rev__meta{ display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.rev__meta strong{ color:var(--text); }
.rev__meta span{ color:var(--text3); }
@media(max-width:1024px){ .rev__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px){ .rev{ padding:80px 0; } .rev__list{ grid-template-columns:minmax(0,1fr); } }
@media(max-width:320px){ .rev{ padding:40px 0; } .rev__card{ padding:20px 14px; } .rev__stars{ font-size:11px; margin-bottom:12px; } .rev__text{ font-size:12px; line-height:1.8; margin-bottom:16px; } .rev__meta{ font-size:11px; } }

/* ---------- CTA (패럴랙스) ---------- */
.cta{ position:relative; height:450px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; }
.cta__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.cta__content{ position:relative; z-index:1; text-align:center; color:#fff; padding:0 20px; }
.cta__content h2{ font-family:var(--serif); font-size:2.2rem; font-weight:300; letter-spacing:8px; margin-bottom:16px; }
.cta__content p{ font-size:15px; opacity:.72; margin-bottom:40px; }
.cta__btn{ display:inline-block; padding:15px 56px; border:1px solid rgba(255,255,255,.4); color:#fff; font-size:13px; letter-spacing:3px; transition:all .3s; cursor:pointer; }
.cta__btn:hover{ background:#fff; color:var(--brown); border-color:#fff; }
.cta__btn:active{ transform:translateY(1px); }
@media(max-width:768px){ .cta{ height:380px; } .cta__content h2{ font-size:1.7rem; letter-spacing:5px; } .cta__bg{ background-attachment:scroll; } }
@media(max-width:320px){ .cta{ height:300px; } .cta__content h2{ font-size:1.3rem; letter-spacing:3px; } .cta__content p{ font-size:13px; } .cta__btn{ padding:12px 36px; font-size:12px; } }

/* ---------- FOOTER ---------- */
.footer{ background:var(--cream-dk); padding:64px 0 0; }
.footer-top{ display:flex; justify-content:space-between; gap:60px; padding-bottom:40px; border-bottom:1px solid var(--bdr); }
.footer-logo{ font-family:var(--serif); font-size:1.2rem; font-weight:500; letter-spacing:4px; color:var(--brown); }
.footer-logo-sub{ font-family:var(--serif); font-size:.5rem; letter-spacing:5px; color:var(--text3); margin-top:2px; }
.footer-links{ display:flex; gap:64px; }
.footer-col h4{ font-size:11px; letter-spacing:2.5px; color:var(--brown); margin-bottom:16px; font-weight:500; }
.footer-col a,.footer-col p{ display:block; font-size:12px; color:var(--text2); line-height:2.2; transition:color .25s; }
.footer-col a:hover{ color:var(--brown); }
.footer-bottom{ padding:20px 0; text-align:center; }
.footer-bottom p{ font-size:11px; color:var(--text3); letter-spacing:1px; }
@media(max-width:1024px){
  .footer-top{ flex-direction:column; gap:32px; }
  .footer-links{ flex-direction:column; gap:24px; }
}
@media(max-width:768px){ .footer{ padding:40px 0 0; } }
@media(max-width:320px){
  .footer-top{ padding-bottom:20px; gap:24px; }
  .footer-logo{ font-size:.9rem; letter-spacing:2px; }
  .footer-logo-sub{ font-size:.4rem; }
  .footer-col h4{ font-size:9px; margin-bottom:10px; }
  .footer-col a,.footer-col p{ font-size:10px; line-height:2; }
  .footer-bottom{ padding:14px 0; }
  .footer-bottom p{ font-size:9px; word-break:keep-all; }
}

/* ---------- 예약 FAB / TOP 버튼 ---------- */
.qr-fab{ position:fixed; right:24px; bottom:24px; z-index:90; width:60px; height:60px; border-radius:50%; background:var(--brown); color:#fff; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; box-shadow:0 8px 24px rgba(74,61,42,.35); transition:background .3s,transform .3s; }
.qr-fab i{ font-size:18px; }
.qr-fab span{ font-size:9px; letter-spacing:1px; }
.qr-fab:hover{ background:var(--brown-dk); transform:translateY(-3px); }
.qr-top{ position:fixed; right:24px; bottom:96px; z-index:90; width:44px; height:44px; border-radius:50%; background:#fff; color:var(--brown); border:1px solid var(--bdr); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.1); opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s,transform .3s; }
.qr-top.show{ opacity:1; visibility:visible; }
.qr-top:hover{ transform:translateY(-3px); }
@media(max-width:480px){
  .qr-fab{ right:16px; bottom:16px; width:52px; height:52px; }
  .qr-top{ right:16px; bottom:78px; width:40px; height:40px; }
}

/* ---------- FOOTER FAMILY SITE (셀렉트 실동작) ---------- */
.footer-family{ margin-top:24px; }
.footer-family-label{ display:block; font-size:10px; letter-spacing:2.5px; color:var(--brown); margin-bottom:8px; }
.footer-family-box{ position:relative; max-width:280px; }
.footer-family-select{ width:100%; appearance:none; -webkit-appearance:none; background:#fff; border:1px solid var(--bdr); color:var(--text2); font-size:12px; letter-spacing:.3px; padding:11px 36px 11px 14px; cursor:pointer; border-radius:2px; transition:border-color .25s; font-family:inherit; }
.footer-family-select:hover{ border-color:var(--brown-lt); }
.footer-family-select:focus{ outline:none; border-color:var(--brown); }
.footer-family-caret{ position:absolute; top:50%; right:14px; transform:translateY(-50%); font-size:11px; color:var(--text3); pointer-events:none; }
@media(max-width:1024px){ .footer-family-box{ max-width:100%; } }
@media(max-width:320px){ .footer-family{ margin-top:18px; } .footer-family-select{ font-size:11px; padding:10px 32px 10px 12px; } }

/* ---------- ENTRY POPUP (진입 레이어 팝업 — PC·모바일) ---------- */
.popup-layer{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; }
.popup-layer[hidden]{ display:none; }
.popup-dim{ position:absolute; inset:0; background:rgba(20,16,10,.6); backdrop-filter:blur(2px); animation:popupFade .3s ease; }
.popup-card{ position:relative; width:100%; max-width:380px; max-height:90vh; overflow-y:auto; background:#fff; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.4); animation:popupUp .4s cubic-bezier(.2,.7,.3,1); }
.popup-media{ position:relative; height:200px; overflow:hidden; }
.popup-media img{ width:100%; height:100%; object-fit:cover; }
.popup-tag{ position:absolute; top:16px; left:16px; background:var(--brown); color:#fff; font-size:10px; letter-spacing:2px; padding:5px 12px; border-radius:2px; }
.popup-body{ padding:28px 28px 8px; text-align:center; }
.popup-eyebrow{ font-family:var(--serif); font-size:.72rem; letter-spacing:4px; color:var(--gold); display:block; margin-bottom:10px; }
.popup-title{ font-family:var(--serif); font-size:1.5rem; font-weight:600; line-height:1.35; color:var(--text); margin-bottom:14px; letter-spacing:.5px; }
.popup-desc{ font-size:13px; color:var(--text2); line-height:1.9; margin-bottom:22px; }
.popup-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--brown); color:#fff; font-size:12px; letter-spacing:1.5px; padding:12px 28px; border-radius:2px; transition:background .3s,transform .3s; }
.popup-cta:hover{ background:var(--brown-dk); transform:translateY(-2px); }
.popup-cta:active{ transform:translateY(0); }
.popup-foot{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-top:1px solid var(--bdr-lt); margin-top:20px; }
.popup-hide{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text2); cursor:pointer; user-select:none; }
.popup-hide input{ width:14px; height:14px; accent-color:var(--brown); cursor:pointer; }
.popup-close{ display:inline-flex; align-items:center; gap:6px; background:none; border:none; font-size:12px; color:var(--text3); cursor:pointer; transition:color .25s; }
.popup-close:hover{ color:var(--text); }
@keyframes popupFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popupUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }
@media(max-width:480px){
  .popup-card{ max-width:340px; }
  .popup-media{ height:170px; }
  .popup-body{ padding:24px 22px 6px; }
  .popup-title{ font-size:1.3rem; }
}
@media(max-width:320px){
  .popup-layer{ padding:14px; }
  .popup-media{ height:140px; }
  .popup-body{ padding:20px 16px 4px; }
  .popup-eyebrow{ font-size:.65rem; letter-spacing:3px; margin-bottom:8px; }
  .popup-title{ font-size:1.1rem; }
  .popup-desc{ font-size:12px; line-height:1.75; margin-bottom:16px; }
  .popup-cta{ padding:10px 20px; font-size:11px; }
  .popup-foot{ padding:12px 16px; }
  .popup-hide,.popup-close{ font-size:11px; }
}

/* ---------- AOS 비활성 시 안전 표시 (콘텐츠 가시성 보장) ---------- */
[data-aos]{ opacity:1; }

/* body 스크롤 잠금 */
body.no-scroll{ overflow:hidden; }