/* ===========================
   METIER — Mobile Web App
   style.css (mobile only)
=========================== */

:root {
  --gold: #c9a96e;
  --gold-light: #e8d5b0;
  --gold-dark: #a07840;
  --dark: #0a0a0a;
  --dark2: #111111;
  --dark3: #1a1a1a;
  --dark4: #222222;
  --light: #faf8f5;
  --text-dim: rgba(255,255,255,0.55);
  --white: #fff;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-ko: 'Noto Sans KR', sans-serif;
  --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --nav-h: 64px;
  --topbar-h: 54px;
  --radius: 12px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ko);
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  overscroll-behavior: none;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  min-height: 100dvh;
}

img { display:block; width:100%; object-fit:cover; }
button { font-family: var(--font-ko); cursor: pointer; border:none; outline:none; }
input, select, textarea { font-family: var(--font-ko); outline:none; }
a { text-decoration:none; color:inherit; }

/* === LOADER === */
#loader {
  position: fixed; inset:0;
  background: var(--dark);
  z-index: 9999;
  display: flex; align-items:center; justify-content:center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#loader.hidden { opacity:0; visibility:hidden; }
.loader-inner { text-align:center; padding:2rem; }
.loader-logo {
  font-family: var(--font-serif);
  font-size: 3rem;
  letter-spacing: 0.5em;
  color: var(--gold);
  margin-bottom: 0.5rem;
  animation: glow 1.5s ease infinite alternate;
}
.loader-tagline {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.loader-bar {
  width: 160px; height: 1px;
  background: rgba(201,169,110,0.2);
  margin: 0 auto;
}
.loader-progress {
  height:100%; background:var(--gold);
  width:0%; transition:width 0.05s linear;
}
@keyframes glow { from{text-shadow:0 0 10px rgba(201,169,110,0.3)} to{text-shadow:0 0 30px rgba(201,169,110,0.8)} }

/* === PARTICLES === */
#particles-canvas {
  position: fixed; inset:0;
  pointer-events:none; z-index:0;
  opacity:0.3;
  max-width:480px; left:50%; transform:translateX(-50%);
}

/* === TOPBAR === */
#topbar {
  position: fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  height: var(--topbar-h);
  z-index: 500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 1.2rem;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201,169,110,0.1);
}
.topbar-logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  letter-spacing: 0.4em;
  color: var(--gold);
  font-weight:300;
}
.topbar-right { display:flex; gap:1rem; align-items:center; }
.topbar-naver-btn {
  display:flex; align-items:center; gap:0.35rem;
  font-size:0.7rem; font-weight:500; letter-spacing:0.02em;
  color:#03c75a;
  background:rgba(3,199,90,0.1);
  border:1px solid rgba(3,199,90,0.3);
  border-radius:20px;
  padding:0.3rem 0.7rem;
  text-decoration:none;
  white-space:nowrap;
}
.topbar-icon {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.6);
  transition: color 0.3s;
  display:flex; align-items:center;
}
.topbar-icon:active { color:var(--gold); }

/* === APP MAIN === */
#app {
  padding-top: var(--topbar-h);
  padding-bottom: var(--nav-h);
  position: relative; z-index:1;
}

/* === SCROLL REVEAL ===
   JS가 IntersectionObserver 지원 + 모션 허용일 때만 .reveal을 부여
   → 미지원/모션 최소화 환경에서는 처음부터 그대로 보임 */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.95s ease, transform 0.95s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in { opacity:1; transform:translateY(0); }

/* === PAGES === */
.page { display: none; }
.page.active { display:block; }
/* 스와이프/이동 방향에 맞춘 부드러운 가로 전환 */
.page.active.nav-fwd  { animation: pageInRight 0.5s cubic-bezier(0.22,1,0.36,1); }
.page.active.nav-back { animation: pageInLeft  0.5s cubic-bezier(0.22,1,0.36,1); }
@keyframes pageInRight { from{opacity:0; transform:translateX(28px)} to{opacity:1; transform:translateX(0)} }
@keyframes pageInLeft  { from{opacity:0; transform:translateX(-28px)} to{opacity:1; transform:translateX(0)} }

/* === HERO === */
.hero {
  position: relative;
  height: calc(100dvh - var(--topbar-h) - var(--nav-h));
  overflow: hidden;
}
.hero-slides { position:absolute; inset:0; }
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
  animation: kburns 10s ease-in-out infinite alternate;
}
.hero-slide.active { opacity:1; }
@keyframes kburns { from{transform:scale(1)} to{transform:scale(1.07)} }

/* 비율이 다른 이미지(hero4 콜라주·hero5 가로형): 다크 배경 위에 원본 전체를 레터박스로.
   iOS Safari의 filter:blur 렌더링 버그·대형 이미지 메모리 문제를 피하기 위해 필터 없이 처리 */
.hero-slide--fit {
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-color:#0a0a0a;
  animation:none;
}
.hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(10,10,10,0.3) 0%,
    rgba(10,10,10,0.15) 40%,
    rgba(10,10,10,0.75) 100%
  );
}
.hero-content {
  position:absolute; bottom:5rem; left:0; right:0;
  padding: 0 1.5rem;
  z-index:2;
}
.hero-sub {
  font-size:0.78rem; letter-spacing:0.05em;
  color:rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  margin-bottom:0.8rem;
  line-height:1.7;
  animation: fadeUp 0.8s ease 0.3s both;
}
.hero-title {
  font-family:var(--font-serif);
  font-size:4rem; font-weight:300;
  letter-spacing:0.3em; line-height:1;
  text-shadow:0 2px 30px rgba(0,0,0,0.5);
  animation: fadeUp 0.8s ease 0.5s both;
}
.hero-title-sub {
  font-family:var(--font-serif);
  font-size:0.85rem; letter-spacing:0.4em;
  color:var(--gold); font-weight:300;
  margin-top:0.3rem; margin-bottom:1.5rem;
  animation: fadeUp 0.8s ease 0.7s both;
}
.hero-cta {
  display:inline-block;
  padding:0.8rem 2rem;
  background:var(--gold);
  color:var(--dark);
  font-size:0.8rem; letter-spacing:0.15em;
  font-weight:500; text-transform:uppercase;
  animation: fadeUp 0.8s ease 0.9s both;
  border-radius:0;
  active-scale: 0.97;
}
.hero-cta:active { transform:scale(0.97); }
.hero-dots {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:2;
}
.dot {
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,0.3);
  transition:all 0.3s;
}
.dot.active { background:var(--gold); width:18px; border-radius:3px; }
.hero-scroll-hint {
  display:none;
  position:absolute; bottom:5.5rem; right:1.5rem; z-index:2;
  color:rgba(255,255,255,0.4); font-size:0.8rem;
  animation:bounce 2s ease infinite;
}
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* === STATS === */
.stats-row {
  display:flex; align-items:center; justify-content:space-around;
  padding:1.5rem 1rem;
  background:var(--dark3);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.stat-item { text-align:center; }
.stat-num {
  font-family:var(--font-serif);
  font-size:2rem; color:var(--gold); font-weight:300;
}
.stat-unit { font-size:0.9rem; color:var(--gold); }
.stat-item p {
  font-size:0.65rem; letter-spacing:0.1em;
  color:var(--text-dim); text-transform:uppercase;
  margin-top:0.2rem;
}
.stat-divider { width:1px; height:36px; background:rgba(255,255,255,0.08); }

/* === MARQUEE === */
.marquee-wrap {
  background:var(--gold);
  overflow:hidden; padding:0.6rem 0;
}
.marquee {
  display:flex; gap:1.5rem;
  animation:marquee 18s linear infinite; white-space:nowrap;
}
.marquee span {
  font-size:0.68rem; letter-spacing:0.15em;
  text-transform:uppercase; color:var(--dark);
  font-weight:600; flex-shrink:0;
}
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* === HOME SECTIONS === */
.home-section { padding:2rem 1.2rem 0; }
.home-section-header { margin-bottom:1.2rem; }
.home-section-header h2 {
  font-family:var(--font-serif);
  font-size:1.8rem; font-weight:300;
  color:var(--white);
}

/* === LABEL === */
.label {
  font-size:0.62rem; letter-spacing:0.25em;
  color:var(--gold); text-transform:uppercase;
  margin-bottom:0.4rem; display:block;
}

/* === QUICK SERVICES === */
.quick-services {
  display:grid; grid-template-columns:1fr 1fr;
  gap:0.6rem;
}
.qs-card {
  position:relative; aspect-ratio:1;
  overflow:hidden; border-radius:var(--radius);
}
.qs-card img { width:100%; height:100%; transition:transform 0.4s ease; }
.qs-card:active img { transform:scale(1.05); }
.qs-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,10,10,0.85) 0%,transparent 60%);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0.8rem;
}
.qs-overlay span {
  font-size:0.82rem; font-weight:500; color:var(--white);
  letter-spacing:0.05em;
}
.qs-overlay i { color:var(--gold); font-size:0.8rem; }

/* 안내 버튼 그룹 */
.home-guide-btns { display:flex; flex-direction:column; gap:0.6rem; }

/* 수강 안내 버튼 */
.qs-academy-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin-top:0.6rem;
  padding:0.9rem 1rem;
  background:rgba(201,169,110,0.08);
  border:1px solid rgba(201,169,110,0.2);
  border-radius:var(--radius);
  color:var(--gold); font-size:0.82rem; font-weight:500;
  letter-spacing:0.05em;
  transition:var(--transition);
}
.qs-academy-btn:active { background:rgba(201,169,110,0.15); }
.qs-academy-btn i:first-child { margin-right:0.4rem; }

/* === ABOUT TEASER === */
.about-teaser {
  margin:1.5rem 1.2rem 0;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
}
.about-teaser img { aspect-ratio:16/9; }
.about-teaser-content {
  background:var(--dark3);
  padding:1.5rem;
}
.about-teaser-content h2 {
  font-family:var(--font-serif);
  font-size:1.6rem; font-weight:300;
  margin:0.4rem 0 0.8rem;
  line-height:1.3;
}
.about-teaser-content p {
  font-size:0.82rem; color:var(--text-dim);
  line-height:1.7; margin-bottom:1.2rem;
}

/* === SNS CTA === */
.sns-cta {
  margin:1.5rem 1.2rem 0;
  padding:1.8rem;
  background:var(--dark3);
  border-radius:var(--radius);
  text-align:center;
  border:1px solid rgba(201,169,110,0.15);
}
.sns-cta h3 {
  font-family:var(--font-serif);
  font-size:1.4rem; font-weight:300;
  margin:0.4rem 0 1.2rem;
  line-height:1.4;
}
.sns-cta-btns { display:flex; gap:0.6rem; }

/* === SNS BUTTONS === */
.sns-btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.75rem 1rem;
  font-size:0.78rem; font-weight:500;
  letter-spacing:0.05em;
  border-radius:var(--radius);
  flex:1; justify-content:center;
  transition:opacity 0.2s;
}
.sns-btn:active { opacity:0.8; }
.sns-btn.naver { background:#03C75A; color:#fff; }
.sns-btn.insta { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color:#fff; }

/* === PAGE HEADER === */
.page-header {
  padding:2rem 1.2rem 1.5rem;
  text-align:center;
}
.page-header h2 {
  font-family:var(--font-serif);
  font-size:2.2rem; font-weight:300;
  margin:0.4rem 0 0.6rem;
}
.page-desc { font-size:0.82rem; color:var(--text-dim); line-height:1.6; }

/* === SERVICES PAGE === */
.service-list { padding:0 1.2rem; display:flex; flex-direction:column; gap:2rem; }
.svc-item { background:var(--dark3); border-radius:var(--radius); overflow:hidden; }
.svc-img { position:relative; aspect-ratio:16/9; }
.svc-img img { width:100%; height:100%; }
.svc-num {
  position:absolute; top:0.8rem; right:0.8rem;
  font-family:var(--font-serif);
  font-size:2.5rem; font-weight:300;
  color:rgba(201,169,110,0.4);
  line-height:1;
}
.svc-body { padding:1.2rem; }
.svc-body h3 {
  font-family:var(--font-serif);
  font-size:1.5rem; font-weight:400;
  margin-bottom:0.6rem;
}
.svc-body p {
  font-size:0.82rem; color:var(--text-dim);
  line-height:1.7; margin-bottom:1rem;
}
.svc-tags { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:1.2rem; }
.svc-tags span {
  font-size:0.68rem; letter-spacing:0.08em;
  padding:0.3rem 0.7rem;
  border:1px solid rgba(201,169,110,0.3);
  color:var(--gold); border-radius:100px;
}

/* === SERVICES PAGE (새) === */
.svc-tab-wrap {
  display:flex; position:relative; margin:1.5rem 1.2rem 0;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(201,169,110,0.30);
  border-radius:var(--radius); overflow:hidden;
  padding:4px;
  --active-idx:0; --tab-count:2;
}
/* 활성 탭을 따라 미끄러지는 인디케이터 (안쪽 여백 + 둥근 모서리로 토글 knob 느낌).
   JS가 만든 실제 요소 — Safari 호환 위해 ::before 대신 사용 */
.svc-tab-ind {
  position:absolute; z-index:0;
  top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / var(--tab-count));
  background:var(--gold);
  border-radius:calc(var(--radius) - 4px);
  transform:translateX(0);
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.svc-tab {
  position:relative; z-index:1;
  flex:1; padding:0.95rem 0.5rem;
  background:transparent; color:rgba(255,255,255,0.72);
  font-size:0.86rem; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
  transition:color 0.32s ease;
}
.svc-tab i { font-size:0.82rem; }
.svc-tab.active { color:var(--dark); font-weight:600; }


.svc-tab-content { display:none; }
.svc-tab-content.active { display:block; }

.svc-tab-header { padding:1.8rem 1.2rem 1.2rem; text-align:center; }
.svc-tab-header h2 {
  font-family:var(--font-serif);
  font-size:2rem; font-weight:300; margin:0.4rem 0 0.5rem;
}

/* 시술 카드 */
.tr-list { padding:0 1.2rem; display:flex; flex-direction:column; gap:1.2rem; }
.tr-card { background:var(--dark3); border-radius:var(--radius); overflow:hidden; }
.tr-img { position:relative; aspect-ratio:16/9; }
.tr-img img { width:100%; height:100%; }
.tr-num {
  position:absolute; top:0.8rem; right:0.8rem;
  font-family:var(--font-serif); font-size:2.2rem; font-weight:300;
  color:rgba(201,169,110,0.4); line-height:1;
}
.tr-body { padding:1.1rem; }
.tr-body h3 {
  font-family:var(--font-serif);
  font-size:1.4rem; font-weight:400; margin-bottom:0.5rem;
}
.tr-body p { font-size:0.82rem; color:var(--text-dim); line-height:1.7; margin-bottom:0.8rem; }
.tr-tags { display:flex; flex-wrap:wrap; gap:0.4rem; }
.tr-tags span {
  font-size:0.67rem; letter-spacing:0.06em;
  padding:0.28rem 0.7rem;
  border:1px solid rgba(201,169,110,0.3);
  color:var(--gold); border-radius:100px;
}

/* 시술 카드 (새) */
.tr-list { padding:0 1.2rem; display:flex; flex-direction:column; gap:1rem; }

.tr-card2 {
  background:var(--dark3);
  border-radius:var(--radius);
  padding:1.3rem;
  border:1px solid rgba(255,255,255,0.06);
  margin-bottom:1rem;
}
.tr2-head {
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:0.8rem;
}
.tr2-sub { font-size:0.72rem; color:var(--text-dim); margin-top:0.15rem; }
.tr2-num {
  font-family:var(--font-serif);
  font-size:2rem; font-weight:300;
  color:rgba(201,169,110,0.3);
  line-height:1; flex-shrink:0;
  margin-top:2px;
}
.tr2-head h3 {
  font-family:var(--font-serif);
  font-size:1.35rem; font-weight:400;
  color:var(--white); margin-bottom:0.3rem;
}
.tr2-meta {
  display:flex; flex-wrap:wrap; gap:0.5rem;
}
.tr2-meta span {
  font-size:0.68rem; color:var(--text-dim);
  display:flex; align-items:center; gap:0.25rem;
}
.tr2-meta i { color:var(--gold); font-size:0.65rem; }

.tr2-desc {
  font-size:0.82rem; color:var(--text-dim);
  line-height:1.75; margin-bottom:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.tr2-points { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.8rem; }
.tr2-section { display:flex; flex-direction:column; gap:0.6rem; margin-bottom:0.8rem; }
.tr2-section .tr2-point { margin-bottom:0; }
.tr2-section-title { font-size:0.78rem; font-weight:600; color:var(--gold); letter-spacing:0.03em; margin-bottom:0.2rem; }
.tr2-point {
  display:flex; align-items:flex-start; gap:0.6rem;
  font-size:0.8rem; color:var(--text-dim); line-height:1.6;
}
.tr2-point i { font-size:0.65rem; flex-shrink:0; margin-top:4px; }
.tr2-point i.fa-check { color:var(--gold); }
.tr2-point i.fa-star { color:var(--gold); }

.tr2-point-sub { padding-left:1rem; }
.tr2-point-sub i { color:rgba(201,169,110,0.5) !important; font-size:0.65rem; }
.tr2-point-sub span { color:rgba(255,255,255,0.35); font-size:0.77rem; }

.tr2-notices { display:flex; flex-direction:column; gap:0.5rem; margin-top:0.8rem; }

.tr2-notice {
  display:flex; align-items:flex-start; gap:0.6rem;
  margin-top:0.8rem;
  padding:0.8rem 0.9rem;
  background:rgba(255,200,100,0.05);
  border-left:2px solid rgba(201,169,110,0.4);
  border-radius:0 8px 8px 0;
  font-size:0.76rem; color:rgba(255,255,255,0.45); line-height:1.6;
}
.tr2-notice i { color:rgba(201,169,110,0.5); font-size:0.72rem; flex-shrink:0; margin-top:3px; }

/* 수강 카드 */
.ac-notice {
  margin:0 1.2rem 1.2rem;
  padding:0.9rem 1rem;
  background:rgba(201,169,110,0.07);
  border-left:2px solid var(--gold);
  border-radius:0 8px 8px 0;
  font-size:0.78rem; color:var(--text-dim); line-height:1.7;
}
.ac-notice i { color:var(--gold); margin-right:0.3rem; }
.ac-notice strong { color:var(--white); }

.ac-list { padding:0 1.2rem; display:flex; flex-direction:column; gap:1rem; }
.ac-card { border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.07); }
.ac-card.featured { border-color:rgba(201,169,110,0.35); }

.ac-card-top {
  padding:1.2rem 1.2rem 1rem;
}
.ac-card-top.single { background:var(--dark3); }
.ac-card-top.all { background:var(--dark3); }

.ac-badge {
  display:inline-block;
  font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase;
  padding:0.22rem 0.6rem;
  border:1px solid rgba(255,255,255,0.15);
  color:var(--text-dim); border-radius:100px;
  margin-bottom:0.6rem;
}
.ac-badge.gold {
  border-color:var(--gold); color:var(--gold);
  background:rgba(201,169,110,0.1);
}
.ac-title-row {
  display:flex; align-items:center; gap:0.6rem;
  flex-wrap:wrap; margin-bottom:0.2rem;
}
.ac-time-badge {
  font-size:0.62rem; letter-spacing:0.05em;
  padding:0.22rem 0.6rem;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.5);
  border-radius:100px; white-space:nowrap;
  font-family:var(--font-ko);
}
.ac-card-top.all .ac-time-badge {
  background:rgba(201,169,110,0.1);
  border-color:rgba(201,169,110,0.25);
  color:rgba(201,169,110,0.7);
}

.ac-card-top h3 {
  font-family:var(--font-serif);
  font-size:1.6rem; font-weight:300; color:var(--white);
  margin-bottom:0.2rem;
}
.ac-card-top.all h3 { color:var(--white); }
.ac-sub { font-size:0.75rem; color:var(--text-dim); }

.ac-card-body {
  padding:1rem 1.2rem 1.2rem;
  background:var(--dark4); position:relative;
}
.ac-ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.ac-ul li {
  font-size:0.8rem; color:var(--text-dim);
  line-height:1.6; padding-left:1rem; position:relative;
}
.ac-ul li::before {
  content:'·'; color:var(--gold);
  position:absolute; left:0; font-size:1.2rem; line-height:1.2;
}
.ac-ul li strong { color:var(--white); }
.ac-perk {
  display:flex; align-items:center; gap:0.5rem;
  margin-top:0.8rem;
  padding:0.6rem 0.8rem;
  background:rgba(255,255,255,0.04);
  border-radius:8px;
  font-size:0.78rem; color:var(--text-dim);
}
.ac-perk i { color:var(--text-dim); font-size:0.75rem; flex-shrink:0; }
.ac-perk strong { color:var(--white); }
.ac-perk.gold { background:rgba(201,169,110,0.08); border:1px solid rgba(201,169,110,0.25); }
.ac-perk.gold i { color:var(--gold); }
.ac-perk.gold strong { color:var(--gold); }

.ac-best-tag {
  display:inline-block; margin-top:1rem;
  font-size:0.68rem; letter-spacing:0.1em;
  padding:0.3rem 0.8rem;
  background:var(--gold); color:var(--dark);
  border-radius:100px; font-weight:600;
}

.svc-cta {
  margin:1.5rem 1.2rem 0; padding:1.4rem;
  background:var(--dark3); border-radius:var(--radius);
  text-align:center;
}
.svc-cta p { font-size:0.8rem; color:var(--text-dim); line-height:1.6; margin-bottom:1rem; }

/* === GALLERY PAGE === */
.gallery-filter {
  display:flex; gap:0.4rem;
  padding:0 1.2rem 1rem;
  overflow-x:auto; scrollbar-width:none;
}
.gallery-filter::-webkit-scrollbar { display:none; }
.filter-btn {
  padding:0.45rem 1rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim);
  font-size:0.72rem; letter-spacing:0.05em;
  white-space:nowrap; border-radius:100px;
  transition:var(--transition);
}
.filter-btn.active {
  background:var(--gold); border-color:var(--gold);
  color:var(--dark); font-weight:500;
}
.gallery-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:2px; padding:0 0;
}
.g-item { position:relative; aspect-ratio:1; overflow:hidden; }
.g-item img { width:100%; height:100%; transition:transform 0.4s; }
.g-item:active img { transform:scale(1.05); }
.g-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(10,10,10,0.8));
  color:var(--white); font-size:0.62rem;
  padding:0.5rem 0.4rem 0.3rem;
  letter-spacing:0.05em;
  opacity:0; transition:opacity 0.3s;
}
.g-item.hidden { display:none; }
.gallery-insta { padding:1.5rem 1.2rem; }
.btn-insta {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  width:100%; padding:0.9rem;
  background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  color:#fff; font-size:0.85rem; font-weight:500;
  border-radius:var(--radius);
}

/* === ABOUT PAGE === */
.about-hero { position:relative; aspect-ratio:4/3; overflow:hidden; }
.about-hero img { width:100%; height:100%; }
.about-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(10,10,10,0.9) 0%,rgba(10,10,10,0.2) 100%);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding-bottom:2rem;
  text-align:center;
}
.about-hero-overlay h1 {
  font-family:var(--font-serif);
  font-size:3rem; font-weight:300;
  letter-spacing:0.5em; color:var(--gold);
}
.about-hero-overlay p {
  font-size:0.7rem; letter-spacing:0.3em;
  color:rgba(255,255,255,0.5); text-transform:uppercase;
}
.about-content { padding:2rem 1.2rem; }
.about-content h2 {
  font-family:var(--font-serif);
  font-size:1.8rem; font-weight:300;
  margin:0.4rem 0 1rem; line-height:1.3;
}
.about-desc {
  font-size:0.85rem; color:var(--text-dim);
  line-height:1.8; margin-bottom:0.8rem;
}
.about-features { margin:1.5rem 0; display:flex; flex-direction:column; gap:1rem; }
.af-item {
  display:flex; align-items:center; gap:1rem;
  padding:1rem;
  background:var(--dark3); border-radius:var(--radius);
}
.af-icon {
  width:40px; height:40px;
  background:rgba(201,169,110,0.1);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.af-icon i { color:var(--gold); font-size:1rem; }
.af-item h4 { font-size:0.85rem; font-weight:500; margin-bottom:0.2rem; }
.af-item p { font-size:0.75rem; color:var(--text-dim); }
.about-sns-row { display:flex; gap:0.6rem; margin-bottom:1.2rem; }

/* === RESERVATION PAGE === */
.res-tabs {
  display:flex; gap:0; margin:0 1.2rem 1.5rem;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:var(--radius); overflow:hidden;
}
.res-tab {
  flex:1; padding:0.8rem;
  background:transparent; color:var(--text-dim);
  font-size:0.85rem; font-weight:500;
  transition:var(--transition);
}
.res-tab.active { background:var(--gold); color:var(--dark); }

.tab-content { display:none; padding:0 1.2rem; }
.tab-content.active { display:block; }

/* === FORM === */
.form { display:flex; flex-direction:column; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group label {
  font-size:0.72rem; letter-spacing:0.08em;
  color:var(--text-dim); text-transform:uppercase;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:0.85rem 1rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--white); font-size:0.9rem;
  border-radius:var(--radius);
  -webkit-appearance:none;
  transition:border-color 0.3s, background 0.3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color:var(--gold);
  background:rgba(201,169,110,0.05);
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color:rgba(255,255,255,0.2);
}
.form-group select option { background:var(--dark2); }
.form-group textarea { resize:none; }

/* TIME GRID */
.time-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0.5rem; margin-top:0.2rem;
}
.time-btn {
  padding:0.65rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text-dim); font-size:0.82rem;
  border-radius:8px; transition:var(--transition);
}
.time-btn.selected {
  background:var(--gold); border-color:var(--gold);
  color:var(--dark); font-weight:600;
}

/* CHIP GROUP */
.chip-group { display:flex; flex-wrap:wrap; gap:0.5rem; }
.chip { cursor:pointer; }
.chip input { display:none; }
.chip span {
  display:inline-block;
  padding:0.5rem 1rem;
  border:1px solid rgba(255,255,255,0.15);
  color:var(--text-dim); font-size:0.8rem;
  border-radius:100px; transition:var(--transition);
}
.chip input:checked + span {
  background:var(--gold); border-color:var(--gold);
  color:var(--dark); font-weight:500;
}

/* CONTACT INFO */
.contact-info {
  margin:1.5rem 0;
  display:flex; flex-direction:column; gap:0.8rem;
}
.ci-item {
  display:flex; align-items:flex-start; gap:0.8rem;
  padding:1rem;
  background:var(--dark3); border-radius:var(--radius);
}
.ci-item i { color:var(--gold); margin-top:2px; font-size:0.9rem; }
.ci-item strong { display:block; font-size:0.82rem; margin-bottom:0.2rem; }
.ci-item p { font-size:0.78rem; color:var(--text-dim); line-height:1.5; }

/* === BUTTONS === */
.btn-gold {
  display:block; width:auto;
  padding:0.85rem 1.5rem;
  background:var(--gold); color:var(--dark);
  font-size:0.82rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  border-radius:var(--radius);
  text-align:center;
  border:none; transition:var(--transition);
  font-family:var(--font-ko);
}
.btn-gold:active { transform:scale(0.97); opacity:0.9; }
.btn-gold.full-w { width:100%; }
.btn-kakao {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.9rem;
  background:#FEE500; color:#3A1D1D;
  font-size:0.85rem; font-weight:600;
  border-radius:var(--radius);
  margin-top:0;
  font-family:var(--font-ko);
  border:none;
  transition:var(--transition);
}
.btn-kakao:active { transform:scale(0.97); }

/* === BOTTOM NAV === */
#bottom-nav {
  position: fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  height: var(--nav-h);
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:stretch;
  z-index:500;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav-item {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  background:none; color:rgba(255,255,255,0.35);
  font-size:0.55rem; letter-spacing:0.08em;
  text-transform:uppercase; font-weight:500;
  transition:color 0.2s;
  padding:0.5rem 0;
}
.bnav-item i { font-size:1.1rem; transition:color 0.2s; }
.bnav-item.active { color:var(--gold); }
.bnav-item.active i { color:var(--gold); }
.bnav-center { position:relative; }
.bnav-center-btn {
  width:48px; height:48px;
  background:var(--gold);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:-20px;
  box-shadow:0 0 20px rgba(201,169,110,0.4);
}
.bnav-center-btn i { color:var(--dark); font-size:1.1rem; }
.bnav-center span { margin-top:30px; }

/* === LIGHTBOX === */
.lightbox {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:var(--transition);
}
.lightbox.open { opacity:1; visibility:visible; }
.lb-img-wrap { width:100%; padding:0 3rem; }
.lb-img-wrap img { width:100%; max-height:85dvh; object-fit:contain; }
.lb-close, .lb-prev, .lb-next {
  position:absolute; background:none;
  color:rgba(255,255,255,0.7); font-size:1.3rem;
  padding:1rem;
}
.lb-close { top:1rem; right:0.5rem; }
.lb-prev { left:0; top:50%; transform:translateY(-50%); }
.lb-next { right:0; top:50%; transform:translateY(-50%); }

/* === TOAST === */
.toast {
  position:fixed; bottom:calc(var(--nav-h) + 1rem); left:50%;
  transform:translateX(-50%) translateY(20px);
  background:var(--dark3);
  border:1px solid var(--gold);
  color:var(--white);
  padding:0.8rem 1.5rem;
  font-size:0.82rem;
  z-index:8000;
  opacity:0;
  transition:all 0.3s ease;
  text-align:center;
  white-space:nowrap;
  border-radius:var(--radius);
  max-width:320px;
  white-space:normal;
  text-align:center;
}
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* === HERO CTA KAKAO === */
.hero-cta.kakao-cta {
  background: var(--gold);
  color: var(--dark);
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:600;
}
.hero-cta.kakao-cta:active { transform:scale(0.97); opacity:0.9; }

/* === CARE PAGE === */
.care-kakao-banner {
  margin:0 1.2rem 1.5rem;
  padding:1.2rem;
  background:rgba(254,229,0,0.08);
  border:1px solid rgba(254,229,0,0.3);
  border-radius:var(--radius);
  display:flex; align-items:center; gap:0.8rem;
}
.care-kakao-banner i {
  color:#FEE500; font-size:1.3rem; flex-shrink:0;
}
.care-kakao-banner strong {
  display:block; font-size:0.85rem; margin-bottom:0.2rem;
}
.care-kakao-banner p {
  font-size:0.75rem; color:var(--text-dim); line-height:1.5;
}
.care-kakao-btn {
  margin-left:auto; flex-shrink:0;
  padding:0.5rem 0.9rem;
  background:#FEE500; color:#3A1D1D;
  font-size:0.72rem; font-weight:600;
  border-radius:8px; white-space:nowrap;
}
.care-kakao-btn:active { opacity:0.85; }

.care-list { padding:0 1.2rem; display:flex; flex-direction:column; gap:0.6rem; }

.care-group { border-radius:var(--radius); overflow:hidden; }
.care-group-title {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.2rem;
  background:var(--dark3);
  color:var(--white); font-size:0.88rem; font-weight:500;
  text-align:left; gap:0.5rem;
}
.care-group-title span { display:flex; align-items:center; gap:0.6rem; }
.care-group-title span i { color:var(--gold); font-size:0.9rem; }
.acc-arrow { color:var(--text-dim); font-size:0.75rem; transition:transform 0.3s; flex-shrink:0; }
.care-group.open .acc-arrow { transform:rotate(180deg); }
.care-group.open .care-group-title { background:var(--dark4); }

.care-group-body {
  max-height:0; overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
  background:var(--dark4);
}
.care-group-body.open { max-height:600px; }

.care-ul {
  list-style:none; padding:1rem 1.2rem 1.2rem;
  display:flex; flex-direction:column; gap:0.7rem;
}
.care-ul li {
  font-size:0.82rem; color:var(--text-dim);
  line-height:1.6; padding-left:1rem; position:relative;
}
.care-ul li::before {
  content:'·'; color:var(--gold);
  position:absolute; left:0; font-size:1.2rem; line-height:1.2;
}
.care-ul li strong { color:var(--white); }

/* Emotion Timeline */
.care-emotion { padding:1rem 1.2rem 1.2rem; }
.care-emotion > p {
  font-size:0.8rem; color:var(--text-dim);
  line-height:1.6; margin-bottom:1.2rem;
}
.emotion-timeline { display:flex; flex-direction:column; gap:0; }
.et-item { display:flex; align-items:flex-start; gap:0.8rem; padding-bottom:1.2rem; position:relative; }
.et-item:not(.et-last)::after {
  content:''; position:absolute;
  left:2.1rem; top:1.8rem; bottom:0;
  width:1px; background:rgba(255,255,255,0.08);
}
.et-day {
  min-width:3rem; height:1.6rem;
  background:rgba(201,169,110,0.15);
  color:var(--gold); font-size:0.68rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px; flex-shrink:0; font-weight:600;
  margin-top:2px;
}
.et-bar {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  margin-top:7px; flex-shrink:0;
}
.et-bar.gold { background:var(--gold); box-shadow:0 0 8px rgba(201,169,110,0.5); }
.et-text { font-size:0.8rem; color:var(--text-dim); line-height:1.6; }

/* FAQ */
.faq-list { padding:0.8rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:1rem; }
.faq-item { border-bottom:1px solid rgba(255,255,255,0.06); padding-bottom:1rem; }
.faq-item:last-child { border-bottom:none; padding-bottom:0; }
.faq-q { font-size:0.85rem; font-weight:500; color:var(--gold); margin-bottom:0.4rem; }
.faq-a { font-size:0.8rem; color:var(--text-dim); line-height:1.6; }

/* 회복과정 타임라인: 골드 세로 라인 + 단계 노드 */
.emotion-list { display:flex; flex-direction:column; gap:1.15rem; position:relative; padding-left:26px; }
.emotion-list::before {
  content:''; position:absolute; left:8px; top:8px; bottom:10px; width:1px;
  background:linear-gradient(to bottom, rgba(201,169,110,0.55), rgba(201,169,110,0.10));
}
.em-item { display:flex; flex-direction:column; gap:0.3rem; position:relative; }
.em-item::before {
  content:''; position:absolute; left:-23px; top:1px;
  width:11px; height:11px; border-radius:50%;
  background:var(--dark2); border:2px solid rgba(201,169,110,0.55);
}
.em-item.em-last::before {
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(201,169,110,0.15);
}
.em-day { font-size:0.75rem; font-weight:600; color:rgba(255,255,255,0.75); letter-spacing:0.05em; }
.em-day-gold { color:var(--gold); }
.em-bubble { font-size:0.8rem; color:rgba(255,255,255,0.55) !important; line-height:1.6; }
.em-bubble-gold { color:var(--gold) !important; }

/* 관리방법 핵심 요약: Do/Don't 픽토그램 그리드 */
.dd-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.5rem;
  margin-bottom:1.2rem;
}
.dd-item {
  position:relative;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;
  padding:0.75rem 0.25rem 0.65rem;
  display:flex; flex-direction:column; align-items:center; gap:0.38rem;
}
.dd-item i { font-size:1.05rem; color:rgba(255,255,255,0.62); }
.dd-label { font-size:0.63rem; color:var(--text-dim); text-align:center; line-height:1.3; }
.dd-mark {
  position:absolute; top:5px; right:5px;
  width:14px; height:14px; border-radius:50%;
  font-size:0.56rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.dd-no .dd-mark { background:rgba(255,124,124,0.13); color:#ff9c9c; }
.dd-yes { border-color:rgba(201,169,110,0.35); background:rgba(201,169,110,0.05); }
.dd-yes i { color:var(--gold); }
.dd-yes .dd-label { color:var(--gold-light); }
.dd-yes .dd-mark { background:rgba(201,169,110,0.16); color:var(--gold); }

.care-section { padding:0.2rem 0; }
.care-intro { font-size:0.82rem; color:var(--text-dim); line-height:1.7; margin-bottom:1.2rem; }
.care-block { margin-bottom:1.2rem; }
.care-block h4 { font-size:0.85rem; font-weight:600; color:var(--gold); margin-bottom:0.5rem; letter-spacing:0.02em; }
.care-note { font-size:0.75rem; color:var(--text-dim); }
.care-note-text { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.4rem; }
.care-img { width:100%; border-radius:8px; display:block; margin-top:0.5rem; }

/* === ABOUT PAGE === */
.about-hero-new { position:relative; height:200px; overflow:hidden; }
.about-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.05); }
.about-hero-overlay-new { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.75) 100%); }
.about-hero-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:1.5rem; }
.about-hero-label { font-size:0.68rem; letter-spacing:0.2em; color:var(--gold); margin-bottom:0.6rem; }
.about-hero-title { font-family:'Cormorant Garamond', serif; font-size:2.5rem; font-weight:300; letter-spacing:0.18em; color:#fff; margin-bottom:0.8rem; white-space:nowrap; }
.about-hero-desc { font-size:0.8rem; color:rgba(255,255,255,0.7); line-height:1.8; letter-spacing:0.02em; }

.about-section-label { display:flex; align-items:center; gap:0.8rem; padding:0 1.2rem; margin-bottom:0.8rem; }
.about-section-label::before, .about-section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(201,169,110,0.3), transparent); }
.about-section-label span { font-size:0.65rem; letter-spacing:0.18em; color:var(--gold); white-space:nowrap; }

.about-links { padding:0 1.2rem; display:flex; flex-direction:column; gap:0.6rem; margin-bottom:1.6rem; margin-top:1rem; }
.about-link-btn {
  display:flex; align-items:center; gap:0.9rem;
  background:linear-gradient(135deg, rgba(201,169,110,0.08), rgba(201,169,110,0.03));
  border:1px solid rgba(201,169,110,0.3); border-radius:14px;
  padding:1rem 1.1rem; text-decoration:none; color:var(--text);
  position:relative; overflow:hidden;
  width:100%; text-align:left; font-family:var(--font-ko); /* <button> 요소도 동일하게 */
}

/* 미니 토스트 (링크 복사 안내 등) */
#mini-toast {
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%) translateY(8px);
  background:rgba(20,20,20,0.95); color:#fff;
  border:1px solid rgba(201,169,110,0.35);
  border-radius:999px; padding:0.6rem 1.2rem;
  font-size:0.78rem; white-space:nowrap;
  opacity:0; pointer-events:none; z-index:12000;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
#mini-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.about-link-btn::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--gold), rgba(201,169,110,0.3));
}
.about-link-btn:active { background:rgba(201,169,110,0.12); }
.about-link-icon { width:38px; height:38px; border-radius:10px; background:rgba(201,169,110,0.12); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:0.85rem; flex-shrink:0; }
.about-link-text { flex:1; display:flex; flex-direction:column; gap:0.2rem; }
.about-link-title { font-size:0.84rem; font-weight:500; color:var(--text); }
.about-link-sub { font-size:0.7rem; color:var(--text-dim); }
.about-link-arrow { color:rgba(201,169,110,0.4); font-size:0.7rem; }

.location-section { padding:0 1.2rem; display:flex; flex-direction:column; gap:0.8rem; }

.loc-block {
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
}
.loc-block-title {
  display:flex; align-items:center; gap:0.55rem;
  font-size:0.72rem; font-weight:700; color:var(--gold);
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.9rem 1.2rem;
  background:rgba(201,169,110,0.07);
  border-bottom:1px solid rgba(201,169,110,0.12);
}
.loc-block-body { padding:1.1rem 1.2rem; }

.loc-hours { display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1rem; }
.loc-hours-row { display:flex; align-items:center; gap:0; }
.loc-day { font-size:0.72rem; font-weight:700; color:var(--gold); background:rgba(201,169,110,0.1); padding:0.2rem 0.55rem; border-radius:20px; margin-right:0.7rem; flex-shrink:0; }
.loc-time { font-size:0.82rem; color:var(--text); }
.loc-time em { font-style:normal; font-size:0.72rem; color:var(--text-dim); margin-left:0.3rem; }

.loc-notes { display:flex; flex-direction:column; gap:0.35rem; padding-top:0.8rem; border-top:1px solid rgba(255,255,255,0.05); }
.loc-notes p { font-size:0.75rem; color:var(--text-dim); line-height:1.6; padding-left:0.8rem; position:relative; }
.loc-notes p::before { content:"·"; position:absolute; left:0; color:var(--gold); }

.loc-addr-box { margin-bottom:1rem; }
.loc-addr-main { font-size:0.92rem; font-weight:500; margin-bottom:0.35rem; line-height:1.5; }
.loc-addr-sub { display:inline-block; font-size:0.75rem; color:var(--gold); background:rgba(201,169,110,0.1); padding:0.2rem 0.6rem; border-radius:20px; margin-bottom:0.7rem; }
.loc-addr-tip { font-size:0.75rem; color:var(--text-dim); line-height:1.6; }
.loc-map-btn {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  width:100%; padding:0.8rem;
  background:linear-gradient(135deg, rgba(201,169,110,0.15), rgba(201,169,110,0.07));
  border:1px solid rgba(201,169,110,0.4); border-radius:10px;
  color:var(--gold); font-size:0.83rem; font-weight:600;
  text-decoration:none; letter-spacing:0.05em;
}

.loc-parking { display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1rem; }
.loc-parking-group { margin-bottom:1.2rem; }
.loc-parking-group:last-child { margin-bottom:0; }
.loc-parking-name { font-size:0.82rem; font-weight:600; color:var(--text); margin-bottom:0.6rem; display:flex; align-items:center; gap:0.5rem; }
.loc-parking-name i { color:var(--gold); font-size:0.8rem; }
.loc-parking-tag { font-size:0.68rem; font-weight:600; padding:0.15rem 0.5rem; border-radius:20px; }
.loc-parking-tag.free { background:rgba(100,200,100,0.15); color:#7ecb7e; }
.loc-parking-tag.paid { background:rgba(201,169,110,0.15); color:var(--gold); }
.loc-parking-row { display:flex; align-items:center; gap:0; font-size:0.82rem; color:var(--text); }
.loc-parking-day { font-size:0.72rem; font-weight:700; color:var(--gold); background:rgba(201,169,110,0.1); padding:0.2rem 0.55rem; border-radius:20px; margin-right:0.7rem; flex-shrink:0; }

.loc-parking-support {
  margin-top:0.65rem; padding:1rem;
  background:rgba(201,169,110,0.05);
  border:1px dashed rgba(201,169,110,0.2);
  border-radius:10px; display:flex; flex-direction:column; gap:0.55rem;
}
.lps-item { display:flex; justify-content:space-between; align-items:center; }
.lps-label { font-size:0.78rem; color:var(--text-dim); }
.lps-val { font-size:0.78rem; color:var(--text); font-weight:500; }
.lps-note { font-size:0.71rem; color:var(--text-dim); padding-top:0.5rem; border-top:1px solid rgba(255,255,255,0.06); text-align:right; }

.loc-faq-item { padding:0.8rem 0; border-bottom:1px solid rgba(255,255,255,0.06); }
.loc-faq-item:last-child { border-bottom:none; padding-bottom:0; }
.loc-faq-q { font-size:0.82rem; font-weight:500; color:#fff; margin-bottom:0.4rem; display:flex; gap:0.5rem; align-items:flex-start; }
.loc-faq-q i { color:var(--gold); font-size:0.65rem; margin-top:0.2rem; flex-shrink:0; }
.loc-faq-a { font-size:0.78rem; color:var(--text-dim); line-height:1.6; padding-left:1rem; }

/* === BOTTOM SHEET === */
.sheet-backdrop {
  position:fixed; inset:0; z-index:700;
  background:rgba(0,0,0,0.6);
  opacity:0; visibility:hidden;
  transition:opacity 0.35s ease, visibility 0.35s ease;
}
.sheet-backdrop.open { opacity:1; visibility:visible; }

.bottom-sheet {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%) translateY(100%);
  width:100%; max-width:480px;
  background:var(--dark3);
  border-radius:20px 20px 0 0;
  padding:0.8rem 1.4rem 2.5rem;
  z-index:701;
  transition:transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}
.bottom-sheet.open { transform:translateX(-50%) translateY(0); }

.sheet-handle {
  width:40px; height:4px; border-radius:2px;
  background:rgba(255,255,255,0.15);
  margin:0 auto 1.4rem;
}
.sheet-title {
  font-family:var(--font-serif);
  font-size:1.35rem; font-weight:400;
  color:var(--white); margin-bottom:0.4rem;
  display:flex; align-items:center; gap:0.6rem;
}
.sheet-title i { color:var(--gold); font-size:1rem; }
.sheet-desc {
  font-size:0.78rem; color:var(--text-dim);
  margin-bottom:1.4rem;
}
.sheet-btns { display:flex; flex-direction:column; gap:0.7rem; margin-bottom:1.4rem; }

.sheet-btn-kakao, .sheet-btn-open {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.1rem;
  border-radius:var(--radius);
  transition:opacity 0.2s;
}
.sheet-btn-kakao:active, .sheet-btn-open:active { opacity:0.8; transform:scale(0.98); }
.sheet-btn-kakao { background:#FEE500; }
.sheet-btn-open { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); }

.sheet-btn-icon {
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sheet-btn-kakao .sheet-btn-icon { background:rgba(58,29,29,0.15); }
.sheet-btn-kakao .sheet-btn-icon i { color:#3A1D1D; font-size:1.2rem; }
.sheet-btn-open .sheet-btn-icon { background:rgba(201,169,110,0.12); }
.sheet-btn-open .sheet-btn-icon i { color:var(--gold); font-size:1.1rem; }

.sheet-btn-text { flex:1; }
.sheet-btn-kakao .sheet-btn-text strong { color:#3A1D1D; font-size:0.9rem; display:block; }
.sheet-btn-kakao .sheet-btn-text span { color:rgba(58,29,29,0.6); font-size:0.73rem; }
.sheet-btn-open .sheet-btn-text strong { color:var(--white); font-size:0.9rem; display:block; }
.sheet-btn-open .sheet-btn-text span { color:var(--text-dim); font-size:0.73rem; }

.sheet-btn-arrow { font-size:0.75rem; flex-shrink:0; }
.sheet-btn-kakao .sheet-btn-arrow { color:rgba(58,29,29,0.4); }
.sheet-btn-open .sheet-btn-arrow { color:rgba(255,255,255,0.2); }

.sheet-notice {
  background:rgba(255,255,255,0.04);
  border-left:2px solid var(--gold);
  padding:0.9rem 1rem;
  border-radius:0 8px 8px 0;
  font-size:0.77rem; color:var(--text-dim);
  line-height:1.7;
}
.sheet-notice i { color:var(--gold); margin-right:0.3rem; }

/* ===========================
   방문 통계 (숨김 기능) — stats.js
=========================== */

/* 숨김 진입점: 겉보기엔 평범한 텍스트 (티 안 나게) */
.loc-secret-gate { cursor:default; }

/* --- 비밀번호 모달 --- */
#pw-modal {
  position:fixed; inset:0; z-index:12000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.72);
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease;
  padding:1.5rem;
}
#pw-modal.open { opacity:1; visibility:visible; }
.pw-box {
  width:100%; max-width:300px;
  background:var(--dark2);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  padding:1.6rem 1.4rem 1.3rem;
  text-align:center;
  transform:translateY(8px); transition:transform 0.25s ease;
}
#pw-modal.open .pw-box { transform:translateY(0); }
.pw-box.shake { animation:pwShake 0.4s ease; }
@keyframes pwShake {
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);} 40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);} 80%{transform:translateX(6px);}
}
.pw-title {
  font-family:var(--font-serif);
  font-size:1.15rem; letter-spacing:0.05em;
  color:var(--gold-light); margin-bottom:1rem;
}
.pw-input {
  width:100%;
  background:var(--dark3);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:0.75rem;
  color:#fff; font-size:1.4rem; text-align:center; letter-spacing:0.5em;
  transition:border-color 0.2s ease;
}
.pw-input:focus { border-color:var(--gold); }
.pw-err {
  font-size:0.72rem; color:#e6786f;
  height:0; opacity:0; overflow:hidden;
  margin-top:0.4rem; transition:opacity 0.2s ease;
}
.pw-err.show { height:auto; opacity:1; }
.pw-btns { display:flex; gap:0.6rem; margin-top:1.1rem; }
.pw-btns button {
  flex:1; padding:0.7rem 0; border-radius:10px;
  font-size:0.85rem; background:var(--dark4); color:var(--text-dim);
}
.pw-btns .pw-ok { background:var(--gold); color:var(--dark); font-weight:500; }

/* --- 통계 대시보드 오버레이 --- */
#stats-overlay {
  position:fixed; inset:0; z-index:11000;
  background:var(--dark);
  overflow-y:auto;
  opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
}
#stats-overlay.open { opacity:1; visibility:visible; }
.stats-frame {
  max-width:480px; margin:0 auto;
  min-height:100dvh;
  padding:calc(env(safe-area-inset-top, 0px) + 2.2rem) 1.2rem 2.4rem;
  position:relative;
}
.stats-close {
  position:absolute; top:1rem; right:1rem;
  width:36px; height:36px; border-radius:50%;
  background:var(--dark3); color:#fff;
  font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.stats-eyebrow {
  font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:0.9rem;
}

/* 기간 칩 */
.stats-periods {
  display:flex; gap:0.4rem; overflow-x:auto; padding-bottom:0.3rem;
  margin-bottom:0.6rem; -ms-overflow-style:none; scrollbar-width:none;
}
.stats-periods::-webkit-scrollbar { display:none; }
.period-chip {
  flex-shrink:0; font-size:0.76rem; padding:0.42rem 0.8rem; border-radius:999px;
  background:var(--dark3); color:var(--text-dim);
  border:1px solid rgba(255,255,255,0.08); transition:var(--transition);
}
.period-chip.active { background:var(--gold); color:var(--dark); font-weight:500; border-color:var(--gold); }

/* 직접 기간 */
.stats-custom { display:none; align-items:center; gap:0.4rem; margin-bottom:0.6rem; }
.stats-custom.open { display:flex; }
.stats-custom input {
  flex:1; min-width:0; color-scheme:dark;
  background:var(--dark3); border:1px solid rgba(255,255,255,0.12);
  border-radius:8px; padding:0.45rem 0.5rem; color:#fff; font-size:0.78rem;
}
.stats-custom .cs-sep { color:var(--text-dim); }
.stats-custom .cs-apply {
  flex-shrink:0; background:var(--gold); color:var(--dark);
  border-radius:8px; padding:0.45rem 0.75rem; font-size:0.78rem; font-weight:500;
}

.stats-range { font-size:0.8rem; color:var(--text-dim); margin:0.2rem 0 1rem; }

/* 요약 카드 */
.stats-cards { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:2rem; }
.stat-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:0.85rem 0.9rem; display:flex; flex-direction:column; gap:0.15rem;
}
.sc-label { font-size:0.72rem; color:var(--text-dim); }
.sc-value { font-size:1.5rem; font-weight:700; color:#fff; line-height:1.2; }
.sc-sub { font-size:0.68rem; color:rgba(255,255,255,0.4); }
.sc-delta { font-weight:700; }
.sc-delta.up { color:#4ad6a8; }
.sc-delta.down { color:#6ea8fe; }
.sc-delta.flat { color:rgba(255,255,255,0.4); }

/* 섹션 */
.stats-sec { margin-bottom:1.8rem; }
.sec-title {
  font-size:0.9rem; font-weight:500; color:#fff; margin-bottom:0.7rem;
  display:flex; align-items:baseline; gap:0.5rem; flex-wrap:wrap;
}
.sec-cmp { font-size:0.74rem; color:var(--text-dim); font-weight:400; }
.sec-cmp .up { color:#4ad6a8; font-weight:600; }
.sec-cmp .down { color:#6ea8fe; font-weight:600; }
.sec-hint { font-size:0.68rem; color:rgba(255,255,255,0.35); font-weight:400; }

.chart-box {
  width:100%;
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05);
  border-radius:12px; padding:0.5rem 0.35rem 0.2rem;
}
.chart-box canvas { width:100%; height:100%; display:block; }

.stats-legend {
  display:flex; justify-content:center; gap:1.4rem;
  margin-top:0.7rem; font-size:0.74rem; color:var(--text-dim);
}
.stats-legend .lg-dot { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:0.4rem; }
.stats-legend .lg-last { background:rgba(255,255,255,0.28); }
.stats-legend .lg-this { background:#4ad6a8; }
.stats-legend .lg-views { background:#6ea8fe; }

/* 유입 경로 막대 */
.src-bars { display:flex; flex-direction:column; gap:0.55rem; }
.src-row { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; }
.src-name { width:64px; flex-shrink:0; color:var(--text-dim); }
.src-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; }
.src-fill { display:block; height:100%; border-radius:5px; background:linear-gradient(90deg,#3bbf92,#4ad6a8); min-width:2px; transition:width 0.5s ease; }
.src-val { width:74px; flex-shrink:0; text-align:right; color:rgba(255,255,255,0.55); font-size:0.72rem; }

/* 전환 카드 */
.conv-cards { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.55rem; }
.conv-card {
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06);
  border-radius:12px; padding:0.85rem 0.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0.25rem;
}
.conv-card i { color:var(--gold); font-size:0.95rem; margin-bottom:0.15rem; }
.cc-label { font-size:0.68rem; color:var(--text-dim); }
.cc-value { font-size:1.25rem; font-weight:700; color:#fff; line-height:1.1; }
.cc-rate { font-size:0.64rem; color:#4ad6a8; }

.empty-line { font-size:0.76rem; color:rgba(255,255,255,0.35); }

.stats-foot {
  display:flex; align-items:center; justify-content:space-between;
  gap:0.8rem; margin-top:1rem; padding-top:1rem;
  border-top:1px solid rgba(255,255,255,0.06);
}
.stats-note { font-size:0.68rem; color:rgba(255,255,255,0.38); line-height:1.5; }
.stats-refresh {
  flex-shrink:0;
  background:var(--dark3); color:var(--text-dim);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:0.5rem 0.9rem; font-size:0.75rem;
}

/* ========= 전환 최적화 (홈 신뢰 섹션 · 시술 상담버튼 · 카카오 FAB) ========= */

/* 홈: 후기/경과 섹션 */
.home-trust { padding:2.2rem 1.2rem 0.5rem; display:flex; flex-direction:column; gap:0.6rem; }
.home-trust-label {
  font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold); text-align:center;
}
.home-trust-title {
  font-family:var(--font-serif);
  font-size:1.6rem; font-weight:300; color:#fff;
  text-align:center; margin-bottom:0.8rem;
}
.home-trust .about-link-btn { width:100%; text-align:left; }

/* 시술 카드: 상담 버튼 */
.tr2-consult {
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  margin-top:1rem; padding:0.75rem;
  background:rgba(254,229,0,0.07);
  border:1px solid rgba(254,229,0,0.28);
  border-radius:10px;
  color:#FEE500; font-size:0.8rem; font-weight:500;
  transition:var(--transition);
}
.tr2-consult i { font-size:0.85rem; }
.tr2-consult:active { transform:scale(0.98); background:rgba(254,229,0,0.14); }

/* 카카오 플로팅 상담 버튼 */
#kakao-fab {
  position:fixed;
  right:max(14px, calc(50% - 226px));
  bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom, 0px));
  z-index:490;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.05rem;
  width:54px; height:54px; border-radius:50%;
  background:#FEE500; color:#3A1D1D;
  box-shadow:0 4px 16px rgba(0,0,0,0.45);
  /* backwards: 등장 전엔 숨김을 유지하되, 끝난 뒤엔 transition을 방해하지 않음 */
  animation:kfabIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.2s backwards;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
/* 스크롤 내리는 동안 본문을 가리지 않게 잠시 숨김 (멈추거나 올리면 복귀) */
#kakao-fab.fab-hide {
  opacity:0; transform:translateY(18px) scale(0.85);
  pointer-events:none;
}
#kakao-fab i { font-size:1.15rem; }
#kakao-fab .kfab-label { font-size:0.52rem; font-weight:700; letter-spacing:0.05em; }
#kakao-fab:active { transform:scale(0.92); }
@keyframes kfabIn { from{opacity:0; transform:scale(0.4)} to{opacity:1; transform:scale(1)} }

/* ========= 대시보드 개선 (오늘 실시간 · 인사이트 · 툴팁 · 스켈레톤) ========= */

/* 오늘 실시간 카드 */
.today-card {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0.7rem;
  background:linear-gradient(135deg, rgba(74,214,168,0.13), rgba(74,214,168,0.03));
  border:1px solid rgba(74,214,168,0.25);
  border-radius:14px; padding:0.85rem 1rem; margin-bottom:1rem; min-height:64px;
}
.td-top { display:flex; align-items:center; gap:0.4rem; }
.td-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3); flex-shrink:0; }
.td-dot.live { background:#4ad6a8; animation:tdPulse 1.9s ease-out infinite; }
@keyframes tdPulse { 0%{box-shadow:0 0 0 0 rgba(74,214,168,0.5)} 70%{box-shadow:0 0 0 8px rgba(74,214,168,0)} 100%{box-shadow:0 0 0 0 rgba(74,214,168,0)} }
.td-label { font-size:0.72rem; color:var(--text-dim); white-space:nowrap; }
.td-main { text-align:center; }
.td-num { font-family:var(--font-serif); font-size:2.1rem; color:#fff; font-weight:400; line-height:1; }
.td-unit { font-size:0.8rem; color:var(--text-dim); margin-left:0.2rem; }
.td-views { display:block; font-size:0.66rem; color:#6ea8fe; margin-top:0.15rem; }
.td-cmp { font-size:0.66rem; color:rgba(255,255,255,0.5); text-align:right; line-height:1.4; }
.td-cmp b.up { color:#4ad6a8; } .td-cmp b.down { color:#6ea8fe; }

/* 기간 칩 상단 고정 */
.stats-sticky {
  position:sticky; top:0; z-index:6;
  margin:0 -1.2rem 0.6rem; padding:0.5rem 1.2rem;
  background:rgba(10,10,10,0.92);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.stats-sticky .stats-periods { margin-bottom:0; padding-bottom:0; }

/* 자동 인사이트 카드 */
.insight-card {
  background:rgba(201,169,110,0.06); border:1px solid rgba(201,169,110,0.22);
  border-radius:14px; padding:0.9rem 1rem; margin-bottom:1.5rem;
}
.insight-head { font-size:0.74rem; color:var(--gold); margin-bottom:0.5rem; display:flex; align-items:center; gap:0.4rem; }
.insight-lines { display:flex; flex-direction:column; gap:0.32rem; }
.ins-line { font-size:0.85rem; line-height:1.55; color:rgba(255,255,255,0.9); }
.ins-line b { font-weight:700; color:#fff; }
.ins-line b.up { color:#4ad6a8; } .ins-line b.down { color:#6ea8fe; }
.insight-action {
  margin-top:0.75rem; padding-top:0.7rem; border-top:1px dashed rgba(201,169,110,0.22);
  display:flex; align-items:flex-start; gap:0.5rem; font-size:0.82rem; line-height:1.5; color:var(--gold-light);
}
.insight-action i { margin-top:0.15rem; color:var(--gold); flex-shrink:0; }

/* 차트 툴팁 */
.chart-box { position:relative; }
.chart-tip {
  position:absolute; top:6px; transform:translateX(-50%);
  background:rgba(18,18,18,0.96); border:1px solid rgba(255,255,255,0.14);
  border-radius:8px; padding:0.35rem 0.55rem; font-size:0.7rem; color:#fff; line-height:1.35;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.12s ease; z-index:3;
}
.chart-tip.on { opacity:1; }
.chart-tip b { color:#4ad6a8; font-weight:600; }
.chart-box canvas { touch-action:none; }

/* 유입경로별 예약 전환율 */
.convsrc-bars { display:flex; flex-direction:column; gap:0.5rem; }
.cvs-row { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; }
.cvs-name { width:66px; flex-shrink:0; color:var(--text-dim); }
.cvs-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; }
.cvs-fill { display:block; height:100%; border-radius:5px; background:rgba(255,255,255,0.22); transition:width 0.5s ease; min-width:2px; }
.cvs-row.top .cvs-fill { background:linear-gradient(90deg,#3bbf92,#4ad6a8); }
.cvs-val { width:50px; flex-shrink:0; text-align:right; color:rgba(255,255,255,0.6); font-size:0.74rem; }
.cvs-row.top .cvs-val { color:#4ad6a8; font-weight:600; }

/* 인기 문의 버튼 랭킹 */
.cvitem-bars { display:flex; flex-direction:column; gap:0.5rem; }
.ci-row { display:flex; align-items:center; gap:0.55rem; font-size:0.78rem; }
.ci-rank {
  width:18px; height:18px; flex-shrink:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08); color:var(--text-dim); font-size:0.66rem;
}
.ci-row.top .ci-rank { background:var(--gold); color:var(--dark); font-weight:700; }
.ci-name { width:96px; flex-shrink:0; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ci-row.top .ci-name { color:#fff; font-weight:500; }
.ci-track { flex:1; height:8px; background:rgba(255,255,255,0.06); border-radius:5px; overflow:hidden; }
.ci-fill { display:block; height:100%; border-radius:5px; background:rgba(201,169,110,0.45); min-width:2px; transition:width 0.5s ease; }
.ci-row.top .ci-fill { background:linear-gradient(90deg,var(--gold-dark),var(--gold)); }
.ci-val { width:40px; flex-shrink:0; text-align:right; color:rgba(255,255,255,0.6); font-size:0.74rem; }

/* 로딩 스켈레톤 */
.sk { position:relative; overflow:hidden; background:rgba(255,255,255,0.05); border-radius:6px; }
.sk-line { height:0.9rem; margin:0.35rem 0; }
.sk-card, .chart-box.sk-box { position:relative; overflow:hidden; }
.sk::after, .sk-card::after, .chart-box.sk-box::after {
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  animation:skShimmer 1.2s infinite;
}
@keyframes skShimmer { 100% { transform:translateX(100%); } }