/* ==========================================================================
   제주도 유흥 미술관 — Global CSS 
   ========================================================================== */

:root{
  --bg: #0b0b0b;
  --paper: #111;
  --text: #e9e9e9;
  --muted: #b4b4b4;
  --accent: #e0b35b;
  --accent-2: #68d4ff;

  --font-sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Apple SD Gothic Neo, sans-serif;
  --font-serif: ui-serif, "Times New Roman", serif;
  --fs-h1: clamp(2.2rem, 2.6vw, 3rem);
  --fs-h2: clamp(1.6rem, 2vw, 2.2rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body: clamp(0.98rem, 1vw, 1.075rem);

  --container: min(1200px, 92vw);
  --radius-xl: 1.25rem;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.35);
}

/* Base */
html, body { background: var(--bg); color: var(--text); font-family: var(--font-sans); }
body { font-size: var(--fs-body); line-height: 1.7; text-rendering: optimizeLegibility; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 24px);
  box-sizing: border-box; }

/* Buttons */
.button, .wp-block-button__link, .btn {
  background: linear-gradient(180deg, var(--accent), #c99b4a);
  color: #111; padding: .8rem 1.2rem;
  border-radius: calc(var(--radius-xl) - .5rem);
  font-weight: 700; box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: .5rem;
}
.button:is(:hover,:focus), .wp-block-button__link:is(:hover,:focus), .btn:is(:hover,:focus){
  transform: translateY(-1px); text-decoration: none;
}

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(11,11,11,.9);
  backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.site-header .inside-header{
  min-height: 60px;
  padding-block: 0;
}
.site-header .header-inner{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding-block: 0;
}
.site-header .header-call{ justify-self: start; white-space: nowrap; padding: .6rem 1rem; }
.site-header .header-logo{ justify-self: center; }
.site-header .header-logo img{ height: 28px; width: auto; }
.site-header .logo-text{
  font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--text);
}
.site-header .hamburger{
  justify-self: end;
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 36px; height: 26px; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.site-header .hamburger span{
  width: 22px; height: 2px; background: var(--text); transition: .24s ease;
}
.site-header .hamburger.active span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.site-header .hamburger.active span:nth-child(2){ opacity: 0; }
.site-header .hamburger.active span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

body.admin-bar .site-header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .site-header{ top: 46px; }
}

.nav-toggle{
  position:absolute !important;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.side-nav{
  position: fixed;
  left: 0; right: 0;
  top: 60px;
  height: calc(100vh - 60px);
  z-index: 1500;
  background: #111;
  border-top: 1px solid rgba(255,255,255,.08);
  transform: translateY(-100%);
  transition: transform .36s cubic-bezier(.2,.8,.2,1);
  padding: 24px 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.nav-toggle:checked ~ .side-nav{
  transform: translateY(0);
}

.nav-overlay{
  position: fixed;
  top: 60px; left: 0; right: 0; bottom: 0;
  z-index: 1400;
  background: rgba(0,0,0,.38);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}

.nav-toggle:checked ~ .nav-overlay{
  opacity: 1; pointer-events: auto;
}

body.admin-bar .side-nav{ top: calc(32px + 60px); height: calc(100vh - (32px + 60px)); }
body.admin-bar .nav-overlay{ top: calc(32px + 60px); }
@media (max-width:782px){
  body.admin-bar .side-nav{ top: calc(46px + 60px); height: calc(100vh - (46px + 60px)); }
  body.admin-bar .nav-overlay{ top: calc(46px + 60px); }
}

.hamburger{
  justify-self: end;
  display:inline-flex;flex-direction:column;gap:4px;
  width:36px;height:26px;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
}
.hamburger span{
  width:22px;height:2px;background:var(--text);
  transition: transform .24s ease, opacity .24s ease;
}

.nav-toggle:checked ~ header .hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ header .hamburger span:nth-child(2){ opacity: 0; }
.nav-toggle:checked ~ header .hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.side-nav .side-nav-list,
.side-nav .menu{
  list-style: none;
  margin: 8px auto 0;
  padding: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(560px, 92vw);
}

.side-nav .side-nav-list li,
.side-nav .menu li{
  width: 100%;
}

.side-nav .side-nav-list a,
.side-nav .menu a{
  display: block;
  padding: 12px 8px;
  color: var(--text);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}
.side-nav .side-nav-list a:hover,
.side-nav .menu a:hover{
  color: var(--accent);
  text-decoration: none;
}

.hidden{ display:none !important; }
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.reveal.on{ opacity:1; transform:none; }
.flex{ display:flex; }
.column{ flex-direction:column; }
.row{ flex-direction:row; }

.hero{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding-top: var(--hero-offset, 90px);
  text-align: center;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: url(/wp-content/themes/generatepress-child/assets/img/top-hero.webp) center/cover no-repeat;
  filter: grayscale(1);
  z-index: 0;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 55%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.65) 50%, rgba(0,0,0,.78) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55) 40%, rgba(0,0,0,.65));
  z-index: 1;
}

.hero > *{ position: relative; z-index: 2; }

.hero .container{
  max-width: 1360px;
  padding: 0 24px;
  margin: 0 auto;
}

.hero-hook{
  font-weight: 900;
  font-size: clamp(3rem, 6vw, 6.5rem);   
  letter-spacing: .02em;
  color: #F5DFA0;                        
  text-shadow: 0 6px 28px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.35);
  margin: 0 0 .4rem;
}

.hero-subheading{
  font-weight: 300;
  font-size: clamp(1rem, .6rem + 1.1vw, 1.375rem);
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  margin: 0 auto 1rem;
  max-width: 760px;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}

.hero-head{
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.15;
  margin: .2rem 0 1.2rem;
  background: linear-gradient(135deg, #FFF4D0 0%, #F0C040 40%, #B58500 70%, #FFE9A8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0,0,0,.45));
}

.hero-cta{
  display:inline-block;
  font-weight: 700;
  font-size: clamp(1rem, .8rem + .6vw, 1.125rem);
  letter-spacing: .02em;
  color:#111;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  text-decoration:none;
  background:
    linear-gradient(135deg, #fff8 0%, #fff5 100%) border-box,
    linear-gradient(135deg, #F0C040, #B58500) padding-box;
  border:1px solid transparent;
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.hero-cta:hover{ transform: translateY(-2px); filter: saturate(1.06); }
.hero-cta:active{ transform: translateY(0); }
.hero-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(240,192,64,.55), 0 10px 26px rgba(0,0,0,.35);
}


.hero-hook, .hero-subheading, .hero-head, .hero-cta{
  opacity: 0;
  transform: translateY(24px);
  animation: riseIn .8s cubic-bezier(.2,.7,.2,1) forwards;
}
.hero-hook{ animation-delay: .05s; }
.hero-subheading{ animation-delay: .18s; }
.hero-head{ animation-delay: .32s; }
.hero-cta{ animation-delay: .48s; }

@keyframes riseIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-hook, .hero-subheading, .hero-head, .hero-cta{
    animation: none; opacity:1; transform:none;
  }
}

@media (max-width: 420px){
  .hero-head{ margin-bottom: 1rem; }
  .hero-cta{ padding: 1rem 1.6rem; }
}


/* About – 레이아웃 */
.about{
  position: relative;
  padding: clamp(48px, 8vw, 96px) 0;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.06);
  overflow-x: clip;
}
.about > .container{
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 24px);
  box-sizing: border-box;
}

/* 모바일 기본: 이미지 → 텍스트(세로 스택) */
.about__row{
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 36px);
  margin-bottom: clamp(28px, 6vw, 64px);
}

/* 데스크탑: 2단, 2번째 행만 반전 */
@media (min-width: 960px){
  .about__row{ flex-direction: row; align-items: center; }
  .about__row.is-flip{ flex-direction: row-reverse; }
}

/* 카드 비주얼 */
.about__media{
  flex: 1 1 48%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background:#0e0e0e;
}
.about__media img{
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.about__media:hover img{ transform: scale(1.02); }

.about__body{
  flex: 1 1 52%;
  padding: clamp(8px,1vw,12px);
}
.about__body h2{
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing:-.01em;
  line-height: 1.25;
  margin: 0 0 .75rem;
  color: var(--text);
}
.about__body p{
  color: var(--muted);
  margin: 0 0 1rem;
  max-width: 68ch;
}


@supports (animation-timeline: view()) {
  .about__row{
    view-timeline-name: --row;
    view-timeline-axis: block;
  }

  /* 공통 초기 상태 */
  .about__media,
  .about__body{
    opacity: 0;
    transform: translateX(var(--sx,0)) translateY(12px);
    filter: saturate(.96) brightness(.98);
    animation-name: about-slide-fade;
    animation-timeline: --row;
    animation-range: entry 70% cover 45%;
    animation-fill-mode: both;
    animation-duration: 3s; /* 타임라인이 실제 길이를 스무딩 */
  }

  /* 기본 방향: 첫 요소는 왼쪽, 두 번째는 오른쪽에서 */
  .about__row > :first-child{ --sx: -46px; }
  .about__row > :last-child { --sx:  46px; }

  @keyframes about-slide-fade {
    from { opacity: 0; transform: translateX(var(--sx)) translateY(12px); filter: saturate(.96) brightness(.98); }
    to   { opacity: 1; transform: translateX(0) translateY(0);           filter: none; }
  }
}

/* 미지원 브라우저 폴백: 애니메이션 없이 바로 보이게 */
@supports not (animation-timeline: view()) {
  .about__media, .about__body { opacity: 1; transform: none; filter: none; }
}

/* 모션 최소화 환경 존중 */
@media (prefers-reduced-motion: reduce){
  .about__media, .about__body { animation: none !important; opacity: 1; transform: none; filter: none; }
}



/* ===== Highlights base ===== */
.highlights{
  --header: 60px;
  --panel-max: min(980px, 92vw);
  --panel-pad: clamp(16px, 4vw, 28px);
  --radius: 18px;
  --glass: rgba(20,20,20,.58);
  position: relative;
  width: 100%;
  background: #0b0b0b;
  color: #e9e9e9;
}

/* 각 카드 컨테이너: 충분한 체류시간을 위해 높이 > 100vh */
.hl-step{
  position: relative;
  height: 120vh; 
  border-top: 1px solid rgba(255,255,255,.06);
}

/* 고정되는 박스 */
.hl-sticky{
  position: sticky;
  top: var(--header);
  min-height: calc(100vh - var(--header));
  overflow: clip;
}

/* 배경 & 스크림 */
.hl-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.02);
}
.hl-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28) 45%, transparent),
    radial-gradient(80% 60% at 50% 65%, rgba(0,0,0,.35), transparent 70%);
}

/* 가운데 정렬된 패널 컨테이너 */
.hl-shell{
  position: relative;
  min-height: calc(100vh - var(--header));
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 32px);
}

/* 텍스트 패널(유리질 카드) */
.hl-panel{
  width: 100%;
  max-width: var(--panel-max);
  border-radius: var(--radius);
  background: linear-gradient( to bottom, rgba(18,18,18,.85), rgba(18,18,18,.75) );
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
  padding: var(--panel-pad);
  text-align: center;
}

/* 상단 타이포 */
.hl-kicker{
  font-size: .9rem; letter-spacing: .14em; text-transform: uppercase;
  color: #f5c768; opacity: .9; margin-bottom: 6px;
}
.hl-title{
  font-size: clamp(26px, 3.8vw, 44px); line-height: 1.12; margin: 4px 0 10px;
}

/* ===== 핵심: 내부 스크롤 영역 ===== */
.hl-scroll{
  margin-top: 10px;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hl-scroll::-webkit-scrollbar{ display:none; }
.hl-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius: 8px; }
.hl-scroll::-webkit-scrollbar-track{ background: transparent; }

.hl-desc{
  font-size: clamp(.98rem, 1.2vw, 1.075rem);
  line-height: 1.75;
  color: #dcdcdc;
  margin: 0 0 14px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.hl-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-top: 4px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff; text-decoration: none;
  backdrop-filter: blur(6px);
  transition: transform .18s ease, filter .18s ease;
}
.hl-cta:hover{ transform: translateY(-1px); filter: saturate(1.08); }

/* ===== 세밀한 등장 연출 (CSS만) ===== */
@supports (animation-timeline: view()){
  .hl-sticky{
    view-timeline-name: --step;
    view-timeline-axis: block;
  }
  /* 배경은 살짝 줌아웃 + 페이드인 */
  .hl-bg{
    opacity: 0.0001; /* Safari 깜빡임 방지용 극소값 */
    animation: bg-reveal 1s both;
    animation-timeline: --step;
    animation-range: entry 20% cover 40%;
  }
  @keyframes bg-reveal{
    from{ opacity: 0; transform: scale(1.06); }
    to  { opacity: 1; transform: scale(1.00); }
  }
  /* 패널도 부드럽게 fade-up */
  .hl-panel{
    opacity: 0;
    transform: translateY(16px);
    animation: panel-in 1s both;
    animation-timeline: --step;
    animation-range: entry 30% cover 55%;
  }
  @keyframes panel-in{
    to{ opacity: 1; transform: translateY(0); }
  }
}

/* 미지원 브라우저 폴백: 바로 보이도록 */
@supports not (animation-timeline: view()){
  .hl-bg{ opacity: 1; transform: none; }
  .hl-panel{ opacity: 1; transform: none; }
}

/* 모바일 최적화: 이미지 위/아래로 자연스럽게 */
@media (max-width: 640px){
  .hl-step{ height: 240vh; } /* 모바일은 더 여유 있게 체류시간 */
  .hl-panel{ padding: 16px 14px 18px; border-radius: 14px; }
  .hl-scroll{ max-height: clamp(320px, 52vh, 560px); }
  .hl-title{ font-size: clamp(22px, 6vw, 28px); }
}

/* 관리자바 보정 */
body.admin-bar .highlights{ --header: 92px; }            /* 32 + 60 */
@media (max-width: 782px){
  body.admin-bar .highlights{ --header: 106px; }         /* 46 + 60 */
}


/* 카드별 스크롤 타임라인 */
@supports (animation-timeline: view()) {
  .hl-sticky{
    view-timeline-name: --step;
    view-timeline-axis: block;
  }

  /* 1) 배경 이미지: 초반 페이드업 + 줌아웃 해제 */
  .hl-bg{
    opacity: 0.0001;                     /* 깜빡임 방지용 극소값 */
    transform: scale(1.06);
    animation:
      bg-in 1s both,
      bg-dim 1s both;
    animation-timeline: --step, --step;
    /* bg-in: 하단 10%에서 등장, 중반쯤 완성 */
    animation-range: entry 10% cover 40%, 
                     cover 60% exit 100%; /* bg-dim: 후반에 서서히 어둡게 */
  }
  @keyframes bg-in{
    from{ opacity: 0; transform: scale(1.06); }
    to  { opacity: 1; transform: scale(1.00); }
  }
  /* 실제 어둡게는 스크림과 함께 연출하므로 bg는 살짝만 톤다운 */
  @keyframes bg-dim{
    from{ filter: none; }
    to  { filter: saturate(.95) brightness(.9); }
  }

  /* 2) 스크림: 후반으로 갈수록 살짝 더 어둡게 */
  .hl-scrim{
    opacity: 0.7;                         /* 기본 스크림 */
    animation: scrim-deepen 1s both;
    animation-timeline: --step;
    animation-range: cover 65% exit 100%; /* 뒷부분에서만 점점 진해짐 */
  }
  @keyframes scrim-deepen{
    from{ opacity: .7; }
    to  { opacity: .9; }
  }

  /* 3) 텍스트 패널: 중반에 페이드업 → 후반에 페이드다운 */
  .hl-panel{
    opacity: 0;
    transform: translateY(16px);
    animation:
      panel-in 1s both ease,
      panel-out 1s both ease;
    animation-timeline: --step, --step;
    /* panel-in: 중반 전에 등장 완성 / panel-out: 후반에 퇴장 */
    animation-range: entry 28% cover 55%, 
                     cover 70% exit 95%;
  }
  @keyframes panel-in{
    to{ opacity: 1; transform: translateY(0); }
  }
  @keyframes panel-out{
    from{ opacity: 1; transform: translateY(0); }
    to  { opacity: 0; transform: translateY(10px); }
  }

  /* 패널 내부 요소(키커/타이틀/본문/버튼) 순차 페이드업 */
  .hl-panel .hl-kicker,
  .hl-panel .hl-title,
  .hl-panel .hl-desc,
  .hl-panel .hl-cta{
    opacity: 0;
    transform: translateY(10px);
    animation: piece-in .8s both;
    animation-timeline: --step;
    animation-range: entry 32% cover 55%;
  }
  .hl-panel .hl-kicker{ animation-delay: .04s; }
  .hl-panel .hl-title { animation-delay: .10s; }
  .hl-panel .hl-desc  { animation-delay: .16s; }
  .hl-panel .hl-cta   { animation-delay: .22s; }

  @keyframes piece-in{
    to{ opacity:1; transform:translateY(0); }
  }
}

/* 폴백: 애니메이션 미지원 브라우저에서도 깔끔히 보이도록 */
@supports not (animation-timeline: view()) {
  .hl-bg{ opacity:1; transform:none; filter:none; }
  .hl-scrim{ opacity:.75; }
  .hl-panel{ opacity:1; transform:none; }
  .hl-panel .hl-kicker,
  .hl-panel .hl-title,
  .hl-panel .hl-desc,
  .hl-panel .hl-cta{ opacity:1; transform:none; }
}

/* 모션 최소화 존중 */
@media (prefers-reduced-motion: reduce){
  .hl-bg, .hl-scrim, .hl-panel,
  .hl-panel .hl-kicker, .hl-panel .hl-title, .hl-panel .hl-desc, .hl-panel .hl-cta{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}


/* ===== Pricing Poster (design keeps) ===== */
.pricing-poster{
  --ink: var(--text);
  --accent-strong: var(--accent);
  --accent-soft: color-mix(in oklab, var(--accent) 70%, #fff 30%);
  --card: color-mix(in oklab, var(--bg) 75%, #000 25%);
  --border: color-mix(in oklab, #fff 8%, transparent);
  --shadow: 0 20px 50px rgba(0,0,0,.45);
  --muted: color-mix(in oklab, var(--text) 60%, #888 40%);
  --soft:  color-mix(in oklab, var(--text) 45%, #9aa 55%);

  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--ink);
  padding: clamp(56px, 7vw, 96px) 0 clamp(100px, 10vw, 140px);
  overflow: clip;
}

/* BG layer (이미지 경로는 HTML inline의 --bg-img로 주입) */
.pricing-poster .pricing-bg{
  position:absolute; inset:0;
  background-image: var(--bg-img, none);
  background-size: cover; background-position: 50% 50%;
  filter: saturate(.95) contrast(1.05) brightness(.9);
  z-index: -2;
}
.pricing-poster::before{
  content:""; position:absolute; inset:-20% -10%;
  background:
    radial-gradient(1200px 400px at 50% -10%, color-mix(in oklab, var(--accent) 35%, transparent), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65) 40%, rgba(0,0,0,.85));
  z-index:-1;
}
.pricing-poster::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 30%, #000 60%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 30%, #000 60%, transparent 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,.0), rgba(0,0,0,.25) 40%, rgba(0,0,0,.5));
}

/* Frame */
.pricing-poster .container{ max-width: var(--container); }
.pp-frame{
  position: relative;
  padding: clamp(28px, 3.8vw, 44px);
  background: color-mix(in oklab, var(--card) 92%, transparent);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

/* Badge (shine) */
.pp-badge{
  display:inline-block; position: relative; overflow: hidden;
  padding: 8px 14px;
  font-size: .76rem; letter-spacing: .18em;
  color: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 999px;
}
.pp-badge::after{
  content:""; position:absolute; inset:-200% -50% auto auto;
  width: 40%; aspect-ratio:1 / .12;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: ppShine 3.2s ease-in-out infinite;
}
@keyframes ppShine{
  0%{ transform: translateX(-260%) rotate(20deg); opacity:0; }
  45%{ opacity:.9; }
  60%{ transform: translateX(420%) rotate(20deg); opacity:0; }
  100%{ opacity:0; }
}

/* Headings */
.pp-head{ margin: 14px 0 4px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.02em; }
.pp-sub{ margin: 0 0 16px; color: var(--muted); font-size: clamp(14px, 1.4vw, 15px); }

/* Panel */
.pp-panel{
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  padding: clamp(18px, 2.5vw, 28px);
}
.pp-panel-head{ font-weight:700; letter-spacing:.08em; font-size:.9rem; color: var(--accent-soft); margin-bottom:6px; }
.pp-standard{
  display:inline-block; padding:6px 10px; margin-bottom:12px;
  font-size:.85rem; color: var(--soft);
  border: 1px dashed color-mix(in oklab, #fff 18%, transparent);
  border-radius: 8px;
}

/* List with dotted leaders */
.pp-list{ list-style:none; margin:10px 0 8px; padding:0; }
.pp-row{
  display:flex; align-items: baseline; gap:8px;
  padding:12px 0; border-bottom:1px solid color-mix(in oklab, #fff 6%, transparent);
}
.pp-row:last-child{ border-bottom:none; }
.pp-row .label{ font-weight:600; }
.pp-row .sub{ color: var(--soft); font-size:.9em; }
.pp-row .dots{
  flex:1 1 auto; position:relative; top:.15em; height:1px; opacity:.55;
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 7px 1px; background-repeat: repeat-x; background-position: 0 100%;
}
.pp-row .value{
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 800; letter-spacing: .01em;
}
.pp-row .won{ margin-left:2px; font-weight:700; font-size:.92em; opacity:.9; }
.pp-div{ height:8px; }
.pp-note{ margin-top:14px; color: var(--soft); font-size:.92rem; line-height:1.6; }

/* Photo */
.pp-photo{ margin: clamp(14px, 2.2vw, 20px) 0 0; position:relative; }
.pp-photo img{
  width:100%; display:block; border-radius:14px;
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Bottom CTA (sticky) */
.pp-cta-bar{
  position: fixed; left: 0; right: 0; bottom: max(20px, env(safe-area-inset-bottom));
  margin: 0 auto; width: min(560px, 92%);
  padding: 14px 18px;
  background: linear-gradient(180deg, #111, #0e0e0e);
  color: #fff; text-align:center; text-decoration:none;
  border-radius: 999px; border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  z-index: 50;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pp-cta-bar strong{ letter-spacing:.04em; font-weight:800; }
.pp-cta-bar:hover{ transform: translateY(-1px); box-shadow: 0 16px 36px rgba(0,0,0,.55); }

@media (prefers-reduced-motion: reduce){
  .pricing-poster *{ animation: none !important; transition: none !important; }
}


@supports (animation-timeline: auto) {


  .pricing-poster{
    scroll-timeline-name: --pp-scroll;
    scroll-timeline-axis: block;
  }

  .pricing-poster .pricing-bg{
    will-change: transform;
    animation: ppParallax linear both;
    animation-timeline: --pp-scroll;
    animation-range: entry 0% exit 100%;
  }
  @keyframes ppParallax{
    from{ transform: translateY(-8px); }
    to  { transform: translateY( 8px); }
  }


  .pp-head,
  .pp-sub,
  .pp-panel,
  .pp-row,
  .pp-photo img,
  .pp-badge{
    opacity: 0;
    transform: translateY(12px);
    animation: ppFadeUp .6s ease-out both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes ppFadeUp{
    to { opacity:1; transform:none; }
  }


  .pp-photo img{
    animation-name: ppPhotoLift, ppFadeUp;
    animation-duration: .9s, .6s;
    animation-timing-function: cubic-bezier(.2,.65,.2,1), ease-out;
    animation-fill-mode: both;
    animation-timeline: view(), view();
    animation-range: entry 10% cover 35%, entry 10% cover 35%;
  }
  @keyframes ppPhotoLift{
    from { transform: translateY(6px) scale(.995); }
    to   { transform: none; }
  }

  .pp-cta-bar{
    animation: ppCtaFloat ease-out both;
    animation-timeline: --pp-scroll;
    animation-range: entry 0% exit 100%;
  }
  @keyframes ppCtaFloat{
    0%   { transform: translateY(6px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
    50%  { transform: translateY(0);   box-shadow: 0 12px 30px rgba(0,0,0,.45); }
    100% { transform: translateY(6px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  }
}


/* ===========================
   Invitation Section (refined)
   =========================== */
.invitation-section{
  /* 섹션 토큰 */
  --ink: var(--text);
  --muted: color-mix(in oklab, var(--text) 68%, #9aa 32%);
  --soft:  color-mix(in oklab, var(--text) 52%, #a4a4a4 48%);
  --card: color-mix(in oklab, var(--bg) 82%, #000 18%);
  --border: color-mix(in oklab, #fff 12%, transparent);
  --shadow: 0 26px 70px rgba(0,0,0,.46);

  position: relative;
  color: var(--ink);
  background: var(--bg);
  isolation: isolate;
  padding: clamp(64px, 8vw, 108px) 0;
  overflow: clip;
}

/* 배경 라이트 & 비네팅 (톤 다운) */
.invitation-section::before{
  content:""; position:absolute; inset:-12% -6% auto -6%; height: 72%;
  background:
    radial-gradient(900px 340px at 50% -14%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 58%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.34));
  z-index:-2;
}
.invitation-section::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask-image: radial-gradient(125% 120% at 50% 22%, #000 64%, transparent 100%);
  mask-image: radial-gradient(125% 120% at 50% 22%, #000 64%, transparent 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,.18) 40%, rgba(0,0,0,.38));
}

.invitation-section .container{ max-width: var(--container); }

/* 카드 */
.iv-card{
  position: relative;
  background: color-mix(in oklab, var(--card) 94%, transparent);
  border-radius: 26px;
  padding: clamp(22px, 3.6vw, 44px);
  overflow: hidden;
  backdrop-filter: blur(7px) saturate(120%);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  /* 테두리에 은은한 그라데이션 라인 */
  --gline: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(1000px 500px at 120% 110%, rgba(255,255,255,.04), transparent 70%),
    linear-gradient(var(--card), var(--card));
  background-origin: border-box;
}
.iv-card::before{ /* 코너 하이라이트 */
  content:""; position:absolute; inset:1px; border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 1px; pointer-events:none;
}

/* 우측 비주얼 (밝기 + 위치 재조정) */
.iv-visual{
  position: absolute; inset: 0 0 0 42%;
  pointer-events: none; margin: 0;
}
.iv-visual img{
  width:100%; height:100%; object-fit: cover; object-position: 58% 50%;
  filter: saturate(.98) contrast(1.02) brightness(.95);
  opacity:.3;
}
/* 텍스트 가독 스크림 톤 완화 */
.iv-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(0,0,0,.46) 0 40%,
    rgba(0,0,0,.28) 58%,
    transparent 76%);
}

/* 헤더 */
.iv-head{ margin-bottom: clamp(16px, 2.2vw, 22px); max-width: 760px; }
.iv-badge{
  display:inline-block; position:relative; overflow:hidden;
  padding: 6px 12px; font-size: .78rem; letter-spacing:.18em;
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  border-radius: 999px; color: color-mix(in oklab, var(--accent) 76%, #fff 24%);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.iv-badge::after{
  content:""; position:absolute; inset:-200% -50% auto auto; width: 42%;
  aspect-ratio:1 / .12; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  animation: ivShine 3.4s ease-in-out infinite;
}
@keyframes ivShine{
  0%{ transform: translateX(-260%) rotate(20deg); opacity:0; }
  45%{ opacity:.9; } 60%{ transform: translateX(420%) rotate(20deg); opacity:0; }
  100%{ opacity:0; }
}
.iv-title{
  margin: 10px 0 6px;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 900; letter-spacing:-.015em;
  text-wrap: balance;
}
.iv-sub{ margin: 0; color: var(--muted); font-size: clamp(14px, 1.4vw, 16px); }

/* 본문 */
.iv-body{ max-width: 860px; position: relative; z-index: 1; }
.iv-lead{ font-size: clamp(15px, 1.6vw, 18px); color: var(--ink); }
.iv-sec-title{
  margin: clamp(20px, 3.2vw, 28px) 0 10px;
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 850; letter-spacing: -.01em;
}
.iv-body p{ color: var(--ink); margin: 0 0 12px; }
.iv-list{ margin: 10px 0 18px 1.1em; color: var(--ink); }
.iv-list li{ margin: 6px 0; }

/* 시각적 구분선 */
.iv-divider{
  height:1px; margin: clamp(14px, 2vw, 20px) 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  border-radius:1px;
}

/* 서명 */
.iv-sign{ margin-top: 16px; color: var(--soft); font-style: italic; }

/* CTA */
.iv-cta{ margin-top: clamp(20px, 3.2vw, 32px); position: relative; z-index: 1; }
.iv-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: 1rem 1.35rem;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #c99b4a 30%));
  color: #111; font-weight: 800; letter-spacing:.02em;
  border-radius: calc(var(--radius-xl, 20px) - .35rem);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  box-shadow: 0 14px 34px rgba(0,0,0,.48);
  text-decoration:none;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.iv-btn:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.55); filter: saturate(1.04); }

/* 반응형: 비주얼을 아래로 이동 + 마스크 */
@media (max-width: 960px){
  .iv-visual{ inset: 48% 0 0 0; }
  .iv-visual img{
    opacity:.32; object-position: 50% 40%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 80%, transparent 100%);
    mask-image: linear-gradient(to top, transparent 0%, #000 16%, #000 80%, transparent 100%);
  }
  .iv-card::after{
    background: linear-gradient(0deg,
      rgba(0,0,0,.44) 0 36%,
      rgba(0,0,0,.28) 60%,
      transparent 86%);
  }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .invitation-section *{ animation: none !important; transition: none !important; }
}

/* Progressive enhancement: Scroll-linked (선택) */
@supports (animation-timeline: auto){
  .invitation-section{
    scroll-timeline-name: --iv-scroll;
    scroll-timeline-axis: block;
  }
  .iv-visual img{
    animation: ivParallax linear both;
    animation-timeline: --iv-scroll;
    animation-range: entry 0% exit 100%;
    will-change: transform;
  }
  @keyframes ivParallax{
    from{ transform: translateY(-6px) scale(1.015); }
    to  { transform: translateY( 6px) scale(1.015); }
  }

  /* 요소 페이드업 */
  .iv-reveal{
    opacity: 0; transform: translateY(12px);
    animation: ivFadeUp .6s ease-out both;
    animation-timeline: view();
    animation-range: entry 12% cover 36%;
  }
  @keyframes ivFadeUp{ to{ opacity:1; transform:none; } }

  /* 리스트 시차 */
  .iv-list li{
    opacity:0; transform: translateY(10px);
    animation: ivFadeUp .5s ease-out both;
    animation-timeline: view();
    animation-range: entry 6% cover 34%;
  }
  .iv-list li:nth-child(1){ animation-delay: .02s; }
  .iv-list li:nth-child(2){ animation-delay: .06s; }
  .iv-list li:nth-child(3){ animation-delay: .10s; }
  .iv-list li:nth-child(4){ animation-delay: .14s; }
  .iv-list li:nth-child(5){ animation-delay: .18s; }
}


/* ===== Blog Fade Slider ===== */
.blog-fade{
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: clamp(48px, 7vw, 96px) 0;
  overflow: clip;
}
.blog-section-title{
  font-size: var(--fs-h2);
  font-weight: 900;
  letter-spacing: -.02em;
  margin: 0 0 clamp(18px, 3vw, 28px);
  text-wrap: balance;
}

/* 컨테이너/높이 보장 */
.blog-fade .swiper,
.blog-fade .blog-fade-swiper{
  position: relative;        /* 페이지네이션 absolute 기준 */
  width: 100%;
  height: clamp(280px, 42vw, 520px);  /* 높이 확보 */
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
  border: 1px solid color-mix(in oklab, #fff 8%, transparent);
}
.blog-fade .swiper-slide{ position: relative; }

/* 슬라이드 카드 */
.blog-fade-slide{
  position: relative;
  height: clamp(360px, 56vw, 460px);
}
.blog-fade-link{
  position:absolute; inset:0;
  display:grid; place-items:end start;
  text-decoration:none; color:inherit;
  isolation:isolate; z-index:1;
}
.blog-fade-bg{
  position:absolute; inset:0;
  background-image: var(--bg, none);
  background-size: cover; background-position: 50% 50%;
  filter: saturate(.98) contrast(1.04) brightness(.92);
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  z-index:-2;
}
.blog-fade-scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.55) 100%),
    radial-gradient(80% 60% at 50% 50%, rgba(0,0,0,.15), transparent 70%);
}
.blog-fade-content{
  width: min(880px, 92%);
  padding: clamp(16px, 4vw, 28px);
}
.blog-fade-title{
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 800; letter-spacing: -.01em;
  margin: 0 0 .35rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.blog-fade-excerpt{
  margin: 0 0 .85rem;
  color: color-mix(in oklab, var(--text) 82%, #9aa 18%);
  max-width: 70ch;
  text-shadow: 0 1px 14px rgba(0,0,0,.35);
}
.blog-fade-cta{
  display:inline-block;
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  padding: .6rem .9rem; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border: 1px solid color-mix(in oklab, #fff 22%, transparent);
  backdrop-filter: blur(6px);
}

/* hover */
.blog-fade-link:hover .blog-fade-bg{ transform: scale(1.045); filter: saturate(1.02) contrast(1.06) brightness(.96); }
.blog-fade-link:hover .blog-fade-cta{ transform: translateY(-1px); }

/* 페이지네이션 (dots only) */
.blog-fade .blog-fade-pagination{
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  z-index: 5;
  display: flex; justify-content: center; gap: 8px;
  pointer-events: auto;
}
.blog-fade .swiper-pagination-bullet{
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(255,255,255,.5);
  opacity: 1;
  transition: transform .2s ease, background-color .2s ease, width .2s ease;
}
.blog-fade .swiper-pagination-bullet:hover{ transform: scale(1.12); }
.blog-fade .swiper-pagination-bullet-active{
  width: 22px; background: var(--accent, #e0b35b);
}

/* small screens */
@media (max-width: 560px){
  .blog-fade-slide{ height: 340px; }
  .blog-fade-excerpt{ display:none; }
}


/* ============ FAQ (CSS-only, no JS) ============ */
.faq{
  background:#0b0b0b;
  color:#e9e9e9;
  padding:clamp(64px,8vw,120px) 0;
}
.faq .container{
  width:100%;
  max-width:1360px;
  margin:0 auto;
  padding:0 24px;
}
.faq-head{
  text-align:center;
  margin-bottom:clamp(28px,4vw,48px);
}
.faq-title{
  font-weight:900;
  font-size:clamp(1.8rem,1rem + 2.6vw,2.6rem);
  line-height:1.15;
  margin:0 0 .4rem;
  background:linear-gradient(135deg,#FFF4D0 0%,#F0C040 40%,#B58500 70%,#FFE9A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.35));
}
.faq-sub{
  margin:0 auto;
  max-width:60ch;
  color:rgba(255,255,255,.85);
  font-weight:300;
  line-height:1.7;
}

/* 리스트 래퍼 */
.faq-list{
  display:grid;
  gap:clamp(10px,1.8vw,14px);
  margin:clamp(24px,4vw,40px) 0;
}

/* 각 아이템(접이식 카드) */
.faq-item{
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) border-box;
  border:1px solid transparent;
  box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}

/* 기본 화살표 제거 */
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}

/* 질문 행 */
.faq-q{
  list-style:none;
  cursor:pointer;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding:clamp(16px,2.6vw,22px) clamp(18px,3vw,26px);
  position:relative;
}

/* 질문 텍스트 */
.faq-q span{
  font-weight:700;
  font-size:clamp(1rem,.8rem + .8vw,1.25rem);
  line-height:1.45;
  color:#fff;
}

/* 아이콘 (CSS만으로 + / × 회전) */
.faq-icon{
  width:24px; height:24px; position:relative; flex:0 0 24px;
}
.faq-icon::before,
.faq-icon::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:100%; height:2px; background:#F0C040; border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.faq-icon::after{ transform:rotate(90deg) }
.faq-item[open] .faq-icon::after{ transform:rotate(0deg); opacity:0; }
.faq-item[open] .faq-icon::before{ transform:rotate(45deg) }

/* 호버/포커스 효과 */
.faq-item:hover .faq-q,
.faq-item:focus-within .faq-q{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}

/* 답변 컨테이너: auto 높이 없이 부드러운 전개 (CSS grid trick) */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.7,.2,1);
  padding:0 clamp(18px,3vw,26px) 0;
}
.faq-item[open] .faq-a{ grid-template-rows:1fr; padding-bottom:clamp(14px,2.4vw,20px); }
.faq-a > div{ overflow:hidden; }

/* 답변 텍스트 */
.faq-a p{
  margin:12px 0 0;
  color:rgba(255,255,255,.9);
  font-weight:300;
  line-height:1.8;
}

/* 미세한 페이드 인 (CSS-only) */
@keyframes faqFadeUp{
  from{ opacity:0; transform:translateY(8px) }
  to{ opacity:1; transform:translateY(0) }
}
.faq-item[open] .faq-a p{ animation:faqFadeUp .36s ease both }

/* 구분 여백 */
.faq-cta{
  margin-top:clamp(18px,3vw,28px);
  text-align:center;
}
.faq-call{
  display:inline-block;
  padding:1rem 1.5rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  color:#111;
  background:
    linear-gradient(135deg,#fff8 0%,#fff5 100%) border-box,
    linear-gradient(135deg,#F0C040,#B58500) padding-box;
  border:1px solid transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, filter .18s ease;
}
.faq-call:hover{ transform:translateY(-2px); filter:saturate(1.06) }

/* 접근성: 키보드 포커스 */
.faq-item:focus-within{
  box-shadow:0 0 0 3px rgba(240,192,64,.35), 0 20px 60px rgba(0,0,0,.35);
}

/* 모바일 보정 */
@media (max-width: 680px){
  .faq-title{ font-size:clamp(1.6rem,1.2rem + 2.8vw,2.2rem) }
  .faq-sub{ font-size:clamp(.95rem,.85rem + .4vw,1.05rem) }
  .faq-call{ width:100%; text-align:center }
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce){
  .faq-a,
  .faq-item[open] .faq-a,
  .faq-a p,
  .faq-icon::before,
  .faq-icon::after{
    transition:none !important;
    animation:none !important;
  }
}


/* Reviews – Dark luxury */
.reviews{
  background:#0b0b0b;
  color:#e9e9e9;
  padding:clamp(72px,9vw,140px) 0;
}
.reviews .container{max-width:1360px;margin:0 auto;padding:0 24px;}
.reviews-head{margin:0 auto clamp(28px,4vw,48px);text-align:center;max-width:840px;}
.reviews-title{
  font-weight:900;
  font-size:clamp(1.8rem,1.2rem + 2.8vw,3rem);
  line-height:1.15; margin:0 0 .4rem;
  background:linear-gradient(135deg,#FFF4D0 0%,#F0C040 40%,#B58500 70%,#FFE9A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.45));
}
.reviews-sub{
  font-weight:300;color:rgba(255,255,255,.9);
  font-size:clamp(1rem,.8rem + .5vw,1.125rem);margin:0;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);
}
@media (max-width:900px){
  .reviews-grid{grid-template-columns:1fr;}
}

.review-card{
  position:relative;
  border-radius:20px;
  padding:clamp(18px,2.6vw,28px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg,rgba(240,192,64,.35),rgba(181,133,0,.25)) border-box;
  border:1px solid transparent;
  box-shadow:0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  overflow:hidden;
}

/* 별점 */
.review-stars span{
  display:inline-block;
  font-size:clamp(1rem, .8rem + .6vw, 1.125rem);
  letter-spacing:.15em;
  background:linear-gradient(135deg,#FFD876,#F0C040 55%,#B58500 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(240,192,64,.25);
}

/* 텍스트 */
.review-title{
  margin:.35rem 0 .35rem;
  font-weight:800;
  font-size:clamp(1.1rem, .9rem + .8vw, 1.5rem);
  line-height:1.25;
  color:#FFF4D0;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}
.review-body{
  margin:0 0 .85rem;
  color:rgba(255,255,255,.92);
  line-height:1.75;
  font-weight:300;
}
.review-meta{
  display:flex;gap:12px;align-items:center;
  font-size:.925rem;color:rgba(255,255,255,.7)
}
.review-meta .reviewer{font-weight:600;color:#ffe9b0}

/* CSS-only 등장 애니메이션 */
.review-card{opacity:1;transform:none}
@supports (animation-timeline: view()){
  .review-card{
    opacity:0;
    transform:translateY(28px) scale(.985);
    animation:rvFade .9s cubic-bezier(.16,1,.3,1) both;
    animation-timeline:view();
    animation-range:entry 85% cover 45%;
    will-change:transform,opacity;
  }
  @keyframes rvFade{
    from{opacity:0; transform:translateY(28px) scale(.985)}
    to  {opacity:1; transform:translateY(0)   scale(1)}
  }
}

/* 모션 최소화 */
@media (prefers-reduced-motion:reduce){
  .review-card{opacity:1 !important; transform:none !important; animation:none !important;}
}


.contact-section{
  background:#0b0b0b;
  color:#e9e9e9;
  padding:clamp(72px,9vw,140px) 0;
}
.contact-wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:clamp(20px,3.5vw,40px);
}
@media (max-width: 980px){
  .contact-wrap{grid-template-columns:1fr; gap:20px;}
}

.contact-map{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  background:#111;
}
.contact-map iframe{
  display:block;
  width:100%;
  height:min(72vh,640px);
  border:0;
  filter:grayscale(.1) contrast(1.05) saturate(1.03);
}

.contact-card{
  border-radius:20px;
  padding:clamp(18px,2.6vw,28px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg, rgba(240,192,64,.35), rgba(181,133,0,.25)) border-box;
  border:1px solid transparent;
  box-shadow:0 18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}

.contact-title{
  margin:0 0 .35rem;
  font-weight:900;
  font-size:clamp(1.6rem,1.1rem + 2.5vw,2.4rem);
  line-height:1.15;
  background:linear-gradient(135deg,#FFF4D0 0%,#F0C040 40%,#B58500 70%,#FFE9A8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.45));
}
.contact-sub{
  margin:0 0 1rem;
  color:rgba(255,255,255,.9);
  font-weight:300;
}

.contact-list{display:grid; gap:12px; margin:0 0 1rem; padding:0;}
.contact-item{display:grid; grid-template-columns:88px 1fr; gap:12px; align-items:center;}
.contact-label{color:#ffe9b0; font-weight:700; font-size:.95rem;}
.contact-value{color:#e9e9e9;}
.link{color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); padding-bottom:1px;}
.link:hover{opacity:.9}

.badge-open{
  display:inline-block;
  padding:.35rem .6rem;
  border-radius:999px;
  background:linear-gradient(135deg, #1c7f3b, #30c96b);
  color:#fff;
  font-weight:700;
  font-size:.92rem;
}

.contact-cta{display:flex; gap:10px; margin:.5rem 0 1rem; flex-wrap:wrap}
.btn-call,.btn-route{
  display:inline-block;
  font-weight:700;
  font-size:clamp(1rem,.85rem + .4vw,1.06rem);
  letter-spacing:.02em;
  color:#111;
  padding: .9rem 1.4rem;
  border-radius:999px;
  text-decoration:none;
  background:
    linear-gradient(135deg,#fff8 0%,#fff5 100%) border-box,
    linear-gradient(135deg,#F0C040,#B58500) padding-box;
  border:1px solid transparent;
  backdrop-filter: blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, filter .18s ease;
}
.btn-route{
  color:#111;
  background:
    linear-gradient(135deg,#fff8 0%,#fff5 100%) border-box,
    linear-gradient(135deg,#cfcfcf,#bdbdbd) padding-box;
}
.btn-call:hover,.btn-route:hover{transform:translateY(-2px); filter:saturate(1.05)}

.contact-note{
  margin:.25rem 0 0;
  color:rgba(255,255,255,.88);
  line-height:1.7;
  font-weight:300;
}

/* 등장이 부드럽게 보이도록 */
@supports (animation-timeline: view()){
  .contact-map,.contact-card{
    opacity:0; transform:translateY(26px) scale(.985);
    animation:ctIn .9s cubic-bezier(.16,1,.3,1) both;
    animation-timeline:view();
    animation-range:entry 85% cover 45%;
    will-change:transform,opacity;
  }
  .contact-card{animation-delay:.08s}
  @keyframes ctIn{
    from{opacity:0; transform:translateY(26px) scale(.985)}
    to  {opacity:1; transform:translateY(0)   scale(1)}
  }
}
@media (prefers-reduced-motion:reduce){
  .contact-map,.contact-card{opacity:1 !important; transform:none !important; animation:none !important;}
}


/* =========================
   Footer (Premium Dark)
   ========================= */
.site-footer{
  --ink: var(--text);
  --muted-ink: color-mix(in oklab, var(--text) 65%, #9aa 35%);
  --panel: color-mix(in oklab, var(--bg) 90%, #000 10%);
  --border: color-mix(in oklab, #fff 10%, transparent);

  position: relative;
  background:
    radial-gradient(900px 300px at 50% -10%, color-mix(in oklab, var(--accent) 28%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #0b0b0b, #0e0e0e);
  color: var(--ink);
  isolation: isolate;
  padding: clamp(40px, 6vw, 72px) 0 28px;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* 살짝 빛 번짐 */
.site-footer::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 120% at 50% 0%, #000 55%, transparent 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  z-index: 0;
}

.footer-inner{
  position: relative;
  z-index: 1;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 24px);

  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr; /* 브랜드/메뉴/여유 */
  gap: clamp(18px, 3vw, 36px);
}

/* 공통 컬럼 패널 느낌 */
.footer-column{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* 로고/브랜드 */
.footer-logo img{
  height: clamp(26px, 2.2vw, 32px);
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,.4));
}
.footer-desc{
  margin: 10px 0 12px;
  color: var(--muted-ink);
  line-height: 1.8;
}
.footer-contact{
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 8px;
}
.footer-contact a{
  color: var(--text); text-decoration: none; font-weight: 800;
}
.footer-contact a:hover{ color: var(--accent); }

/* 섹션 타이틀 */
.footer-title{
  margin: 0 0 10px;
  font-size: clamp(15px, 1.2vw, 16px);
  letter-spacing: .16em;
  color: color-mix(in oklab, var(--accent) 75%, #fff 25%);
  font-weight: 800;
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-title::after{
  content:"";
  height: 1px; width: 42px; opacity:.5;
  background: linear-gradient(90deg, var(--accent), transparent);
  display:inline-block;
}

/* 메뉴 리스트 */
.footer-menu-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.footer-menu-list a{
  color: var(--text);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,255,255,.06);
  transition: transform .15s ease, color .15s ease, border-color .15s ease;
}
.footer-menu-list a::before{
  content:""; width:6px; height:6px; border-radius:999px;
  background: color-mix(in oklab, var(--accent) 60%, #fff 40%);
  opacity:.8;
}
.footer-menu-list a:hover{
  color: var(--accent);
  transform: translateX(2px);
  border-color: rgba(255,255,255,.12);
}

/* 하단 바 */
.footer-bottom{
  max-width: var(--container);
  width: 100%;
  margin: clamp(18px, 3vw, 26px) auto 0;
  padding-inline: clamp(12px, 4vw, 24px);
  color: color-mix(in oklab, var(--text) 70%, #9aa 30%);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 14px;
  text-align: center;
  font-size: .95rem;
}

/* 링크 기본 */
.site-footer a{ color: var(--text); }
.site-footer a:hover{ color: var(--accent); }

/* 반응형 */
@media (max-width: 980px){
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .footer-inner{ grid-template-columns: 1fr; }
  .footer-column{ padding: 16px; }
  .footer-menu-list a{ padding: 8px 0; }
}