*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

:root{
  --beige:    #f5f0e8;
  --beige2:   #ede8df;
  --beige3:   #e5dfd4;
  --cream:    #faf8f4;
  --sand:     #d6cfc2;
  --sand2:    #c4bbb0;
  --taupe:    #9e9284;
  --brown:    #5c5044;
  --brown2:   #3d342c;
  --dark:     #1e1a17;
  --gold:     #b89a6a;
  --gold2:    #ceb88a;
  --gold3:    #8a7248;
  --white:    #ffffff;
  --text:     #2d2520;
  --text2:    #5c5044;
  --text3:    #9e9284;
  --border:   rgba(94,80,68,0.12);
  --border2:  rgba(94,80,68,0.2);
  
  /* Typography */
  --font-main: 'Noto Sans KR', sans-serif;
  --font-title: 'Noto Serif KR', serif;
  --font-accent: 'Libre Baskerville', serif;

  /* Spacing & Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-full: 50px;

  /* Animation */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --transition: all 0.4s var(--ease);

  /* Glassmorphism Variables */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px 0 rgba(92, 80, 68, 0.08);
}

/* ── LOADER ── */
#loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
#loader.loaded { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; }
.loader-bar {
  width: 140px; height: 1px; background: var(--border);
  margin: 24px auto 0; position: relative; overflow: hidden;
}
.loader-bar::after {
  content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%;
  background: var(--gold); animation: loading 2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes loading {
  0% { left: -100%; width: 30%; }
  50% { left: 20%; width: 60%; }
  100% { left: 100%; width: 30%; }
}

/* ── ANIMATED GLASS BACKGROUND ── */
.glass-bg-container {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1;
  overflow: hidden;
  background: var(--cream);
  pointer-events: none;
}
.glass-blob {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  filter: blur(120px);
  animation: float 25s infinite alternate ease-in-out;
  opacity: 0.6;
}
.glass-blob-1 {
  top: -10%; left: -10%;
  background: radial-gradient(circle, rgba(184, 154, 106, 0.25) 0%, rgba(250, 248, 244, 0) 70%);
}
.glass-blob-2 {
  bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(92, 80, 68, 0.15) 0%, rgba(250, 248, 244, 0) 70%);
  animation-duration: 35s;
  animation-delay: -7s;
}
@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10%, 15%) scale(1.1); }
  100% { transform: translate(-5%, 25%) scale(0.9); }
}

body{
  font-family: var(--font-main);
  background:var(--cream);
  color:var(--text);
  overflow-x:hidden;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--beige)}
::-webkit-scrollbar-thumb{background:var(--sand2)}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:0 64px;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background: rgba(250, 248, 244, 0.7);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition: var(--transition);
}
nav.scrolled{border-color:var(--border);background:rgba(250,248,244,0.98)}

.nav-mobile-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--brown2);
}

.nav-logo{
  display:flex;flex-direction:column;gap:1px;
  text-decoration:none;
}
.nav-logo-kr{
  font-family: var(--font-title);
  font-size:17px;font-weight:500;letter-spacing:0.04em;
  color:var(--brown2);
}
.nav-logo-en{
  font-family: var(--font-accent);
  font-size:9px;font-weight:400;letter-spacing:0.22em;
  color:var(--taupe);text-transform:uppercase;
}

.nav-center{
  display:flex;gap:44px;list-style:none;
  position:absolute;left:50%;transform:translateX(-50%);
}
.nav-center a{
  font-size:13px;font-weight:300;letter-spacing:0.06em;
  color:var(--text2);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 0.25s,border-color 0.25s;
}
.nav-center a:hover,
.nav-center a.active{color:var(--gold3);border-color:var(--gold3)}

.nav-right{display:flex;align-items:center;gap:20px}
.nav-tel{
  font-family: var(--font-accent);
  font-size:14px;font-weight:400;letter-spacing:0.06em;
  color:var(--brown);text-decoration:none;
}
.nav-book{
  font-size:12px;font-weight:400;letter-spacing:0.14em;
  color:var(--brown2); font-weight:600;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding:10px 26px;
  text-decoration:none;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 15px rgba(92, 80, 68, 0.05);
  transition: var(--transition);
}
.nav-book:hover{
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(92, 80, 68, 0.12);
}

/* ── HERO ── */
#hero{
  position:relative;height:100vh;min-height:680px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background: var(--cream);
}
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}
.hero-video-wrapper iframe {
  width: 177.78vh; /* 100 * 16 / 9 */
  height: 100vh;
  min-width: 100vw;
  min-height: 56.25vw; /* 100 * 9 / 16 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-grain{
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;
}

.hero-content{
  position:relative;z-index:2;
  padding:0 64px 80px;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:28px;
  opacity:0;animation:fadeUp 0.9s 0.2s forwards;
}
.hero-badge-line{width:36px;height:1px;background:var(--gold)}
.hero-badge-text{
  font-family: var(--font-accent);
  font-size: 13px; letter-spacing: 0.3em;
  color:var(--gold3);text-transform:uppercase;
}

.hero-title{
  font-family: var(--font-title);
  font-size:clamp(40px,5.5vw,74px);
  font-weight:300;line-height:1.15;
  word-break: keep-all;
  color:var(--brown2);letter-spacing:-0.02em;
  margin-bottom:20px;
  opacity:0;animation:fadeUp 0.9s 0.4s forwards;
}
.hero-title em{
  font-style:italic;
  font-family: var(--font-accent);
  color:var(--gold3);
}

.hero-sub{
  font-size:15px;font-weight:300;line-height:1.9;
  color:var(--text2);max-width:480px;margin-bottom:48px;
  word-break: keep-all;
  opacity:0;animation:fadeUp 0.9s 0.6s forwards;
}

.hero-actions{
  display:flex;gap:20px;align-items:center;
  opacity:0;animation:fadeUp 0.9s 0.8s forwards;
}
.btn-fill{
  background:var(--brown2);color:var(--cream);
  font-size:13px;font-weight:400;letter-spacing:0.12em;
  padding:16px 40px;text-decoration:none;
  border-radius: var(--radius-full);
  transition: var(--transition);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-fill:hover{background:var(--gold3); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.15);}
.btn-outline{
  font-size:13px;font-weight:300;letter-spacing:0.1em;
  color:var(--brown);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--sand2);
  transition:border-color 0.25s,color 0.25s;
}
.btn-outline:hover{color:var(--gold3);border-color:var(--gold3)}
.btn-glass{
  display:inline-block;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--brown2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  padding: 18px 52px;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}
.btn-glass:hover{
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(92, 80, 68, 0.12);
  border-color: var(--gold);
  color: var(--gold3);
}
.btn-glass::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: 0.6s;
}
.btn-glass:hover::before {
  left: 100%;
}

.hero-scroll-hint{
  position:absolute;bottom:36px;right:64px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:0;animation:fadeUp 0.9s 1.1s forwards;
}
.hero-scroll-hint span{
  font-size:9px;letter-spacing:0.25em;color:var(--taupe);
  text-transform:uppercase;writing-mode:vertical-rl;
}
.scroll-dot{
  width:1px;height:48px;background:var(--sand);
  position:relative;overflow:hidden;
}
.scroll-dot::after{
  content:'';position:absolute;top:0;left:0;right:0;
  height:50%;background:var(--gold);
  animation:dotMove 2s ease-in-out infinite;
}
@keyframes dotMove{
  0%{transform:translateY(-100%)}100%{transform:translateY(300%)}
}

/* ── SECTION COMMON ── */
.section-wrap{padding:110px 64px}
.section-wrap.bg-beige{background:var(--beige)}
.section-wrap.bg-beige2{background:var(--beige2)}
.section-wrap.bg-white{background:var(--white)}
.section-wrap.bg-cream{background:var(--cream)}

.s-eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:18px;
}
.s-eyebrow-line{width:28px;height:1px;background:var(--gold)}
.s-eyebrow-text{
  font-family: var(--font-accent);
  font-size:20px;letter-spacing:0.3em;
  color:var(--gold3);text-transform:uppercase;
}
.s-title{
  font-family: var(--font-title);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight:300;line-height:1.45;
  color:var(--brown2);letter-spacing:-0.01em;
  word-break: keep-all;
  margin-bottom:20px;
}
.s-title em{
  font-style:italic;color:var(--gold3);
  font-family: var(--font-accent);
  font-size:1.1em;
  word-break: keep-all;
}
.s-line{width:48px;height:1px;background:var(--gold);margin-bottom:36px}
.s-body{
  font-size:20px;font-weight:300;line-height:1.8;
  color:var(--text2);
}

/* ── PHILOSOPHY ── */
#philosophy{
  display:grid;grid-template-columns:1fr 1fr;gap:96px;
  align-items:center;
}
.phil-imgs{position:relative;padding-bottom:60px}
.phil-img-main{
  width:86%;aspect-ratio:4/5;object-fit:cover;
  display:block;
  filter:saturate(0.75);
}
.phil-img-sub{
  position:absolute;bottom:0;right:0;
  width:54%;aspect-ratio:1;object-fit:cover;
  border:6px solid var(--cream);
  filter:saturate(0.75);
}
.phil-quote{
  font-family: var(--font-accent);
  font-size:20px;font-style:italic;font-weight:400;
  line-height:1.7;color:var(--brown);
  border-left:2px solid var(--gold);
  padding-left:24px;margin:36px 0;
}

.doctor-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
.doc{
  padding:28px 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
}
.doc-profile{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--sand);
  background: var(--white);
}
.doc-profile img{
  width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8);
}
.doc:hover{border-color:var(--gold); transform: translateY(-5px); background: rgba(255, 255, 255, 0.6);}
.doc-name{
  font-family: var(--font-title);
  font-size:19px;font-weight:500;color:var(--brown2);margin-bottom:4px;
}
.doc-spec{
  font-family: var(--font-accent);
  font-size:10px;letter-spacing:0.2em;color:var(--gold3);
  text-transform:uppercase;margin-bottom:14px;
}
.doc-desc{
  font-size:13px;font-weight:300;line-height:1.9;
  color:var(--text2);margin-bottom:16px;
  word-break: keep-all;
}
.doc-tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{
  font-size:11px;letter-spacing:0.08em;
  color:var(--taupe);border:1px solid var(--sand);
  padding:3px 10px;
}

/* ── WHY ── */
#why{text-align:center}
#why .s-line{margin:0 auto 56px}

.why-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--border);
  border:1px solid var(--border);
  margin-top:56px;
}
.why-cell{
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding:48px 32px;text-align:left;
  transition: var(--transition);
  position:relative;overflow:hidden;
}
.why-cell:hover{background: rgba(255, 255, 255, 0.7); transform: scale(1.02); z-index: 1;}
.why-cell::after{
  content:'';position:absolute;
  left:0;bottom:0;width:100%;height:2px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s;
}
.why-cell:hover::after{transform:scaleX(1)}
.why-n{
  font-family: var(--font-accent);
  font-size:52px;font-weight:400;
  color:rgba(94,80,68,0.08);
  line-height:1;margin-bottom:20px;
}
.why-t{
  font-family: var(--font-title);
  font-size:18px;font-weight:500;
  color:var(--brown2);margin-bottom:12px;
  word-break: keep-all;
}
.why-d{
  font-size:13px;font-weight:300;line-height:1.9;
  color:var(--text3);
  word-break: keep-all;
}

/* ── TREATMENTS ── */
#treatments{background:var(--beige2)}
.treat-head{
  display: flex; flex-direction: column;
  align-items: flex-start; margin-bottom: 72px;
}
.s-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  margin-bottom: 32px;
}
.s-title-row .s-title { margin-bottom: 0; flex-shrink: 0; }
.s-title-row .s-body { 
  padding-bottom: 8px; /* 타이틀의 베이스라인과 시각적으로 맞춤 */
  line-height: 1.7;
  text-align: right;
}

.treat-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:2px;background:var(--sand);
}
.treat-item{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--beige3);
}
.treat-item.big{grid-row:span 2}
.treat-item img{
  width:100%;height:100%;object-fit:cover;
  display:block;
  filter:saturate(0.6) brightness(1.05);
  transition:filter 0.5s,transform 0.6s;
  aspect-ratio:auto;
}
.treat-item.big img{height:100%;min-height:480px}
.treat-item:not(.big) img{height:240px}
.treat-item:hover img{filter:saturate(0.9) brightness(1.1);transform:scale(1.04)}

.treat-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(30,20,15,0.72) 0%,transparent 55%);
}
.treat-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:28px;
}
.treat-num{
  font-family: var(--font-accent);
  font-size:14px;letter-spacing:0.25em;color:rgba(214,207,194,0.8);
  margin-bottom:6px;
}
.treat-name{
  font-family: var(--font-title);
  font-size:20px;font-weight:400;color:var(--beige);
  margin-bottom:0;
}
.treat-desc{
  font-size:13px;font-weight:300;line-height:1.7;
  color:rgba(245,240,232,0.75);
  max-height:0;overflow:hidden;
  transition:max-height 0.4s ease,margin-top 0.3s;
}
.treat-item:hover .treat-desc{max-height:100px;margin-top:10px}

/* ── SPACE ── */
#space{background:var(--cream)}
.space-top{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:end;margin-bottom:56px;
}
.space-stats{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:1px;background:var(--border);
  border:1px solid var(--border);
}
.stat-cell{
  background:var(--cream);padding:28px 24px;
}
.stat-n{
  font-family: var(--font-accent);
  font-size:22px;font-weight:400;color:var(--gold3);
  letter-spacing:-0.02em;margin-bottom:4px;
}
.stat-l{font-size:12px;font-weight:300;color:var(--taupe);letter-spacing:0.1em}

.space-gallery{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:260px 260px;
  gap:3px;
}
.sg{overflow:hidden}
.sg img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(0.65);
  transition: var(--transition);
  display:block;
}
.sg:hover img{filter:saturate(1);transform:scale(1.03)}
.sg.tall{grid-row:span 2}

/* ── REVIEWS ── */
#reviews{background:var(--beige);overflow:hidden}
.reviews-top{
  display:flex;justify-content:space-between;
  align-items:flex-end;margin-bottom:56px;
}

.rev-track-wrap{overflow:hidden;margin:0 -64px}
.rev-track{
  display:flex;gap:20px;
  animation:slide 50s linear infinite;
  width:max-content;
}
.rev-track:hover{animation-play-state:paused}
@keyframes slide{
  from{transform:translateX(0)}to{transform:translateX(-50%)}
}
.rev-card{
  width:360px;flex:0 0 auto;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding:36px 32px;
  transition: var(--transition);
}
.rev-card:hover{border-color:var(--gold); transform: translateY(-8px);}
.rev-stars{color:var(--gold);font-size:14px;letter-spacing:2px;margin-bottom:18px}
.rev-q{
  font-family: var(--font-accent);
  font-size:17px;font-style:italic;font-weight:400;
  line-height:1.7;color:var(--brown);margin-bottom:24px;
}
.rev-name{font-size:13px;font-weight:500;color:var(--brown2)}
.rev-meta{font-size:11px;font-weight:300;color:var(--taupe);letter-spacing:0.08em;margin-top:3px}

/* ── BOOKING ── */
#booking{
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--beige3);
}
.book-left{
  padding:40px 48px;
  background:var(--brown2);
  color:var(--beige);
  border-right: 1px solid rgba(255,255,255,0.05);
}
.book-left .s-eyebrow-text,.book-left .s-eyebrow-line{
  filter:brightness(1.6) saturate(0.8);
}
.book-left .s-title{color:var(--beige2)}
.book-left .s-line{background:rgba(214,207,194,0.4)}

.hours-table{margin:36px 0;border-collapse:collapse;width:100%}
.hours-table tr{border-bottom:1px solid rgba(255,255,255,0.08)}
.hours-table td{padding:18px 0;font-size:16px;font-weight:300}
.hours-table .day{color:rgba(245,240,232,0.55);letter-spacing:0.05em}
.hours-table .time{color:var(--beige2);text-align:right}
.hours-table .closed{color:rgba(184,154,106,0.7);text-align:right}

.contact-bar{
  display:flex;flex-direction:column;gap:14px;margin-top:40px;
}
.clink{
  display:flex;align-items:center;gap:16px;
  text-decoration:none;transition:opacity 0.25s;
}
.clink:hover{opacity:0.8}
.clink-icon{
  width:38px;height:38px;border:1px solid rgba(214,207,194,0.2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--gold2);letter-spacing:0.05em;
  flex-shrink:0;
}
.clink-main{font-size:15px;font-weight:400;color:var(--beige2)}
.clink-sub{font-size:12px;font-weight:300;color:rgba(245,240,232,0.45);margin-top:2px}

/* 오시는 길 추가 */
.book-map{
  padding:40px 48px;
  background:var(--beige2);
}
.map-box{
  width:100%; aspect-ratio:16/10;
  background:var(--sand);
  margin-top:20px; border-radius:12px; position: relative;
  overflow:hidden; border:1px solid var(--border2);
  box-shadow: var(--glass-shadow);
}
.map-box iframe {
  width: 100%;
  height: calc(100% + 140px); /* 상단 라벨 영역을 가리기 위해 높이를 더 키움 */
  margin-top: -70px;           /* 위로 밀어 올려서 정보창(라벨)이 잘리도록 설정 */
  border: none;
  display: block;
}
.map-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 10;
  background: #03C75A;
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: var(--transition);
}
.map-btn:hover {
  background: #02b351;
  transform: translateY(-2px);
}
.map-info-text{
  margin-top:20px; font-size:15px; line-height:1.7; color:var(--text2);
}
.map-info-text strong{color:var(--brown); font-weight:500;}

.fg{margin-bottom:22px}
.fl{
  display:block;font-size:10px;letter-spacing:0.2em;
  color:var(--gold3);text-transform:uppercase;margin-bottom:8px;
}
.fi{
  width:100%;background:transparent;
  border:none;border-bottom:1px solid var(--sand);
  padding:11px 0;
  font-size:14px;font-weight:300;font-family: var(--font-main);
  color:var(--text);outline:none;
  transition:border-color 0.25s;
}
.fi:focus{border-color:var(--gold3)}
.fi::placeholder{color:var(--sand2)}
select.fi option{background:var(--cream)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.fsub{
  width:100%;margin-top:36px;
  background:var(--brown2);color:var(--cream);
  border:none;padding:20px;
  font-size:13px;letter-spacing:0.16em;font-weight:400;
  font-family: var(--font-main);
  border-radius: var(--radius-full);
  cursor:pointer;transition: var(--transition);
}
.fsub:hover{background:var(--gold3); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2);}

/* ── FOOTER ── */
footer{
  background: var(--glass-bg);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 80px 64px;
  border-top: 1px solid var(--glass-border);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 80px;
}
.ft-logo-kr{
  font-family: var(--font-title);
  font-size:18px;font-weight:500;color:var(--brown2);margin-bottom:4px;
}
.ft-logo-en{
  font-family: var(--font-accent);
  font-size:9px;letter-spacing:0.22em;color:var(--taupe);
  text-transform:uppercase;margin-bottom:18px;
}
.ft-addr{font-size:14px;font-weight:300;color:var(--text2);line-height:1.8}
.ft-head{
  font-size:12px;letter-spacing:0.2em;color:var(--gold3);
  text-transform:uppercase;margin-bottom:18px;
}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.ft-links a{
  font-size:13px;font-weight:300;color:var(--text2);
  text-decoration:none;transition:color 0.2s;
}
.ft-links a:hover{color:var(--gold3)}

.ft-bottom{
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  padding: 24px 64px;
  border-top: 1px solid var(--glass-border);
  display:flex;justify-content:space-between;
  font-size:13px;font-weight:300;color:var(--taupe);
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
.reveal{opacity:1;transform:translateY(0);transition:opacity 0.75s ease,transform 0.75s ease}
/* 스크립트가 정상 작동할 때만 초기 상태를 투명하게 만들고 싶다면, 아래와 같이 js-enabled 환경을 고려해야 합니다. */
.reveal.on{opacity:1;transform:translateY(0)}
.reveal.on{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:0 24px}
  .nav-mobile-btn { display: block; order: 3; }
  .nav-center{
    display: none;
    flex-direction: column;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: var(--cream);
    padding: 20px;
    gap: 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-center.active { display: flex; }
  .section-wrap{padding:72px 24px}
  #philosophy,#booking{grid-template-columns:1fr;gap:0}
  .book-left,.book-map{padding:40px 24px}
  .treat-head,.space-top{grid-template-columns:1fr;gap:24px}
  .s-title-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .s-title-row .s-body { text-align: left; padding-bottom: 0; }
  .treat-grid{grid-template-columns:1fr}
  .doctor-pair{grid-template-columns:1fr}
  .treat-item.big{grid-row:auto}
  .treat-item.big img,.treat-item:not(.big) img{height:280px;min-height:unset}
  .hero-title{font-size: clamp(36px, 6vw, 54px);}
  .hero-sub{font-size: 14px; max-width: 100%;}
  .why-grid{grid-template-columns:1fr 1fr}
  .space-gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .sg.tall{grid-row:auto}
  footer{grid-template-columns:1.5fr 1fr; gap: 40px; padding:60px 24px}
  .ft-bottom{padding:16px 24px;flex-direction:column;gap:6px}
  .hero-content{padding:0 24px 72px}
  .hero-scroll-hint{right:24px}
  .frow{grid-template-columns:1fr}
  .nav-right { display: none; }
}

@media(max-width:600px){
  .why-grid{grid-template-columns:1fr}
  .space-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 24px 20px;
    margin: 0 -24px;
    scrollbar-width: none; /* Firefox */
  }
  .space-gallery::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .sg {
    flex: 0 0 80vw;
    height: 320px;
    scroll-snap-align: center;
    border-radius: var(--radius-md);
  }
  .sg.hide-mobile { display: none; }
  footer{grid-template-columns:1fr}
  .hero-title{font-size: 34px; line-height: 1.25; text-align: center;}
  .hero-title br { display: none; }
  .hero-sub{font-size: 16px !important; line-height: 1.6; word-break: keep-all; margin-bottom: 32px; text-align: center; margin-left: auto; margin-right: auto;}
  .s-body{display: none;}
  .hero-badge{width: 100%; justify-content: center;}
  .hero-badge-text{font-size: 11px; letter-spacing: 0.15em;}
  .hero-actions{flex-direction: column; align-items: center; gap: 12px;}
  .btn-fill, .btn-glass{width: auto; min-width: 180px; text-align: center; padding: 14px 32px; font-size: 14px;}
  .nav-logo-kr{font-size: 15px;}
  .phil-img-main{display: none;}
  .phil-img-sub{display: none;}
  .doc { text-align: center; }
  .doc-profile { margin-left: auto; margin-right: auto; }
  .doc-tags { justify-content: center; }
  .phil-quote { font-size: 17px; margin: 28px 0; padding-left: 18px; line-height: 1.6; }
  #why .s-title { font-size: 24px; }
  .space-stats { grid-template-columns: 1fr; }

  /* 진료 안내(Treatments) 모바일 슬라이더 */
  .treat-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 24px 20px;
    margin: 0 -24px;
    background: none; /* 기존 그리드 배경 제거 */
    scrollbar-width: none;
  }
  .treat-grid::-webkit-scrollbar { display: none; }
  .treat-item {
    flex: 0 0 78vw;
    height: 380px;
    scroll-snap-align: center;
    border-radius: var(--radius-md);
  }
  .treat-item img { height: 100% !important; }
  .treat-desc { 
    max-height: 100px !important; 
    margin-top: 10px !important; 
    opacity: 1 !important;
  }

  .stat-cell { text-align: center; padding: 16px 20px; }
  .stat-n { font-size: 19px; }
  .stat-l { font-size: 11px; }

  /* 갤러리 인디케이터 스타일 */
  .gallery-dots, .treat-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
  }
  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sand);
    transition: all 0.3s ease;
  }
  .dot.active {
    background: var(--gold);
    transform: scale(1.4);
  }

  /* 진료 안내 섹션의 설명글만 모바일에서 다시 표시 */
  #treatments .s-body {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
  }
}

/* Floating Theme Menu */
.theme-menu {
  position: fixed; bottom: 40px; left: 40px; z-index: 1000;
  display: flex; gap: 12px; background: rgba(255,255,255,0.5);
  padding: 10px; border-radius: 40px; backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 154, 106, 0.2);
  box-shadow: 0 8px 32px rgba(92, 80, 68, 0.1);
}
.theme-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 18px; position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
}
/* Custom Tooltip */
.theme-btn::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--brown); color: var(--cream);
  padding: 6px 12px; border-radius: 4px; font-size: 10px; font-weight: 500;
  white-space: nowrap; opacity: 0; visibility: hidden;
  transition: all 0.3s ease; pointer-events: none;
  box-shadow: 0 5px 15px rgba(92, 80, 68, 0.1);
}
.theme-btn:hover { transform: scale(1.1) translateY(-5px); }
.theme-btn:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.theme-btn.active { 
  border-color: #b89a6a; 
  box-shadow: 0 0 15px rgba(184, 154, 106, 0.3);
  transform: scale(1.1);
}
.btn-dark-gold { background: #0a0a0a; color: #b89c6e; }
.btn-beige-white { background: #faf8f4; color: #5c5044; }
.btn-beige-black { background: #F7F4EF; color: #1C1A17; }

@media (max-width: 600px) {
  .theme-menu { bottom: 20px; right: 20px; gap: 8px; padding: 8px; }
  .theme-btn { width: 38px; height: 38px; font-size: 16px; }
}

/* ── QUICK FLOATING MENU ── */
.floating-contact {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1001;
}
.floating-btn {
  width: 56px;
  height: 56px;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s var(--ease);
  transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}
.floating-btn img { width: 100%; height: 100%; object-fit: contain; }

/* 지도 버튼 크기 상향 조정 */
.floating-btn[title="네이버 지도"] {
  width: 66px;
  height: 66px;
}

.floating-btn:hover {
  transform: translateY(-10px) scale(1.12);
  filter: drop-shadow(0 12px 18px rgba(184, 154, 106, 0.45));
}

/* ── UTILITIES & HELPERS ── */
.u-text-center { text-align: center !important; }
.u-justify-center { justify-content: center !important; }
.u-flex-col-center { display: flex; flex-direction: column; justify-content: center; }
.u-m-auto { margin-left: auto !important; margin-right: auto !important; }
.u-align-self-end { align-self: flex-end; }
.u-mb-0 { margin-bottom: 0 !important; }

@media (max-width: 600px) {
  .floating-contact { 
    bottom: 20px; 
    right: 20px; 
    gap: 10px; 
  }
  .floating-btn { width: 48px; height: 48px; }
  .floating-btn[title="네이버 지도"] {
    width: 56px;
    height: 56px;
  }
}

/* Color & Specific Overrides */
.u-color-gold2 { color: var(--gold2) !important; }
.u-color-beige2 { color: var(--beige2) !important; }
.s-line.light { background: rgba(214, 207, 194, 0.3) !important; }
.s-eyebrow-line.light { background: rgba(214, 207, 194, 0.5) !important; }