/* =========================================================
RDS Nails & Beauty — Stylesheet (Premium Renewal)
Mobile-first. Elegant beauty aesthetic.
========================================================= */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
/* ── DESIGN.md Tokens ── */
--color-canvas: #FAF6F0;
--color-surface-soft: #F3ECE3;
--color-ink-primary: #1C1A17;
--color-ink-secondary: #605A52;
--color-accent: #CA9E6A;

/* Palette */
--white: #FAF6F0;
--beige-50: #FAF6F0;
--beige-100: #E0D4C4;
--beige-200: #CEC0AE;
--brown-300: #B8A898;
--brown-400: #8C7355;
--brown-500: #1C1A17;
--accent-gold: #C49A6C;

/* Text Hierarchy */
--text-900: #1C1A17;
--text-700: #1C1A17;
--text-500: #605A52;
--text-300: #A09690;

/* Typography */
--ff-serif: 'presti-display', Georgia, serif;
--ff-body: 'Lora', Georgia, serif;
--ff-sans: 'Inter', system-ui, -apple-system, sans-serif;

/* Spacing */
--section-py: clamp(6rem, 10vw, 8rem);
--container: 88rem;

/* UI */
--nav-h: 72px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 999px;
--shadow-sm: 0 2px 12px rgba(96,90,82,.04);
--shadow-md: 0 4px 20px rgba(96,90,82,.04);
--shadow-lg: 0 8px 32px rgba(96,90,82,.08);
--transition: 0.35s cubic-bezier(.25, 1, .5, 1);
}

/* ── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--ff-sans);
color: var(--text-700);
background: var(--white);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
letter-spacing: -0.01em; /* 본문 자간을 은은하게 조여 단정함 완성 */
}
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
table { border-collapse: collapse; }

/* ── Utilities ──────────────────────────────────────────── */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.5rem, 6vw, 4rem);
}

.section { padding-block: var(--section-py); }

.section-hd { text-align: center; margin-bottom: clamp(3.5rem, 6vw, 5rem); }

.section-label {
display: inline-block;
font-family: var(--ff-sans);
font-size: .72rem;
font-weight: 500;
letter-spacing: .10em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1rem;
}
.section-label--light { color: rgba(250,246,240,.65); }

.section-title {
font-family: var(--ff-serif);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 400;
color: var(--color-ink-primary);
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}

.section-desc {
font-family: var(--ff-body);
font-size: clamp(.95rem, 2vw, 1.05rem);
color: var(--color-ink-secondary);
font-weight: 400;
line-height: 1.7;
max-width: 54ch;
margin-inline: auto;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-family: var(--ff-sans);
font-weight: 500;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .08em;
border-radius: var(--radius-sm);
padding: .8rem 1.8rem;
transition: all var(--transition);
white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn:active { transform: scale(.98); }

.btn--primary {
background: var(--color-accent);
color: var(--color-canvas);
box-shadow: 0 4px 16px rgba(202,158,106,.2);
}
.btn--primary:hover {
opacity: .9;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(202,158,106,.3);
}

.btn--gold {
background: var(--accent-gold);
color: var(--color-canvas);
min-width: 240px;
padding: 1.2rem 3rem;
font-size: .92rem;
letter-spacing: 2px;
box-shadow: 0 6px 28px rgba(196,154,108,.35);
transition: background 0.4s ease, color 0.4s ease, transform 0.4s cubic-bezier(.25,1,.5,1), box-shadow 0.4s ease;
}
.btn--gold:hover {
background: var(--color-canvas);
color: var(--color-ink-primary);
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(196,154,108,.3);
}

.btn--outline {
background: transparent;
color: var(--color-ink-primary);
border: 1px solid rgba(28,26,23,.2);
}
.btn--outline:hover {
background: var(--color-accent);
color: var(--color-canvas);
border-color: var(--color-accent);
transform: translateY(-2px);
}

.btn--white {
background: var(--color-canvas);
color: var(--color-ink-primary);
box-shadow: var(--shadow-sm);
}
.btn--white:hover {
opacity: .9;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.btn--nav {
background: var(--color-accent);
color: var(--color-canvas);
font-size: .78rem;
padding: .55rem 1.35rem;
}
.btn--nav:hover {
opacity: .9;
}

.btn--lg { padding: 1.05rem 2.5rem; font-size: .88rem; }
.btn--sm { padding: .5rem 1.1rem; font-size: .75rem; }

/* ── Scroll-in Animations ───────────────────────────────── */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity .8s cubic-bezier(.25, 1, .5, 1), transform .8s cubic-bezier(.25, 1, .5, 1);
}
.fade-in.visible {
opacity: 1;
transform: none;
}

/* ── Navigation ─────────────────────────────────────────── */
.nav {
position: fixed;
inset: 0 0 auto;
z-index: 100;
height: var(--nav-h);
background: rgba(250,246,240,.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid transparent;
transition: all var(--transition);
}
.nav.scrolled {
border-bottom-color: var(--beige-50);
box-shadow: 0 4px 24px rgba(42,36,33,.03);
}

.nav__inner {
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.5rem, 6vw, 4rem);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}

.nav__logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.nav__logo-img {
height: 46px;
width: auto;
display: block;
mix-blend-mode: multiply;
}

/* Mobile burger — X 기호와 메뉴가 겹치지 않고 명확히 분리되도록 상위 레이어 고정 */
.nav__burger {
display: flex;
flex-direction: column;
gap: 6px;
padding: .5rem;
z-index: 2000 !important; /* 상위 레이어 압도적 배치 */
}
.nav__burger span {
display: block;
width: 20px;
height: 1.5px;
background: var(--text-900);
border-radius: 2px;
transition: transform var(--transition), opacity var(--transition);
}
.nav__burger.open span { background: var(--text-900) !important; } /* 열려도 선명하게 표시 */
.nav__burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile menu — 자바스크립트 스위칭 간섭 완벽 격파 수리 */
.nav__menu {
position: fixed !important;
inset: 0 0 0 0 !important; /* 헤더 상단부터 화면 전체 레이어 완벽 가둠 */
width: 100vw !important;
height: 100vh !important;
background-color: #FAF6F0 !important;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(100%);
transition: transform .45s cubic-bezier(.25, 1, .5, 1) !important;
z-index: 1000 !important; /* 뒷배경 타 요소 접근 원천 차단 */
opacity: 0; /* 평소엔 투명화 */
visibility: hidden;
}

/* 자바스크립트에 의해 .open 클래스가 붙었을 때의 모습 확실히 선언 */
.nav__menu.open {
transform: translateX(0) !important;
opacity: 1 !important;
visibility: visible !important;
}

.nav__list {
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
padding: 2rem;
}

.nav__link {
font-size: 1.2rem;
font-family: var(--ff-serif);
font-weight: 400;
color: var(--text-900);
position: relative;
padding-bottom: 4px;
}
.nav__link::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
width: 0; height: 1px;
background: var(--color-accent);
transition: all var(--transition);
transform: translateX(-50%);
}
.nav__link:hover::after,
.nav__link.active::after { width: 60%; }

/* Desktop nav */
@media (min-width: 768px) {
.nav__burger { display: none; }

.nav__menu {
position: static !important;
width: auto !important;
height: auto !important;
background: transparent !important;
transform: none !important;
display: flex !important;
align-items: center !important;
padding-top: 0 !important;
opacity: 1 !important;
visibility: visible !important;
}
.nav__list {
flex-direction: row;
gap: clamp(1.8rem, 4vw, 3rem);
padding: 0;
}
.nav__link {
font-family: var(--ff-sans);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .08em;
}
}

/* ── Hero Entrance Animations ───────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* hero__content의 scroll-trigger를 우회 — 자식 요소가 직접 애니메이션 */
.hero .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.hero__eyebrow-arc {
  animation: heroFadeUp 1s cubic-bezier(.25,1,.5,1) 0.15s both;
}
.hero__title {
  animation: heroFadeUp 1s cubic-bezier(.25,1,.5,1) 0.4s both;
}
.hero__tagline {
  animation: heroFadeUp 0.9s cubic-bezier(.25,1,.5,1) 0.65s both;
}
.hero__content .btn {
  animation: heroFadeUp 0.9s cubic-bezier(.25,1,.5,1) 0.85s both;
}

/* ── Hero ───────────────────────────────────────────────── */
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

.hero {
position: relative;
min-height: 95svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background-color: var(--beige-50);
}

@media (min-width: 768px) {
  .hero { min-height: 80svh; }
}

.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}

.hero__video--desktop { display: none; }

@media (min-width: 768px) {
.hero__video--mobile { display: none; }
.hero__video--desktop { display: block; }
}

.hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
z-index: 0;
}

.hero__content {
position: relative;
z-index: 1;
max-width: 920px;
padding-inline: 1.5rem;
padding-top: calc(var(--nav-h) + 2rem);
padding-bottom: 120px;
}

.hero__eyebrow-arc {
width: clamp(320px, 68vw, 580px);
margin: 0 auto 1rem auto;
display: block;
}

.hero__title {
font-family: var(--ff-serif);
font-size: clamp(3.4rem, 9vw, 7.2rem);
font-weight: 300;
line-height: 1.20;
color: #FAF6F0;
margin-bottom: 1.1rem;
letter-spacing: -0.025em;
}

.hero__title-accent,
.hero__title--accent {
display: block;
font-style: italic;
font-weight: 400;
color: var(--accent-gold);
margin-top: -0.35rem;
}

.hero__tagline {
font-family: var(--ff-sans);
font-size: clamp(1rem, 1.7vw, 1.2rem);
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
color: rgba(250,246,240,.88);
margin: 1.8rem 0 3.8rem 0;
}

.hero__sub {
font-size: clamp(.95rem, 2.2vw, 1.1rem);
color: rgba(255,255,255,.85);
font-weight: 300;
margin-bottom: 3rem;
line-height: 1.7;
}

.hero__scroll {
position: absolute;
bottom: 2.8rem;
left: 50%;
transform: translateX(-50%);
color: rgba(250,246,240,.65);
animation: bounce 2.8s ease-in-out infinite;
z-index: 2;
padding: 12px;
}

@media (min-width: 768px) {
.hero__content {
padding-top: calc(var(--nav-h) + 3rem);
padding-bottom: 140px;
}
.hero__eyebrow-arc { margin-bottom: 2.5rem; }
.hero__tagline { margin-bottom: 4.5rem; }
.hero__scroll { bottom: 3.2rem; }
}

/* ── Services ───────────────────────────────────────────── */
.services { background: var(--white); }

.services__group { margin-bottom: clamp(3.5rem, 6vw, 5rem); }
.services__group-title {
font-family: var(--ff-serif);
font-size: 1.6rem;
font-weight: 400;
color: var(--color-ink-primary);
letter-spacing: -0.01em;
margin-bottom: 1.75rem;
padding-bottom: .75rem;
border-bottom: 1px solid rgba(28,26,23,.08);
}

.services__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}

@media (min-width: 560px) {
.services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.services__grid { grid-template-columns: repeat(4, 1fr); }
}

.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
justify-content: space-between;
transition: all var(--transition);
}

.service-card__name {
font-family: var(--ff-serif);
font-size: 1.25rem;
font-weight: 400;
color: var(--text-900);
margin-bottom: .35rem;
}
.service-card__note {
font-size: .8rem;
font-weight: 300;
color: var(--text-300);
margin-bottom: .5rem;
}
.service-card__meta {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.service-card__duration {
display: flex;
align-items: center;
gap: .3rem;
font-size: .78rem;
color: var(--text-500);
font-weight: 400;
}

/* ── Gallery ─────────────────────────────────────────────── */
.gallery { background: var(--color-surface-soft); }

.gallery__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .75rem;
}
@media (min-width: 560px) {
.gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.gallery__item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
cursor: pointer;
background: var(--color-surface-soft);
}
.gallery__item::after {
content: '';
position: absolute;
inset: 0;
background: rgba(42,36,33, 0.05);
opacity: 0;
transition: opacity var(--transition);
}
.gallery__item:hover::after { opacity: 1; }
.gallery__item:hover .gallery__img { transform: scale(1.04); }

.gallery__img {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: center;
transition: transform var(--transition);
}

.gallery__cta {
margin-top: 3.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.gallery__cta-text {
font-size: .88rem;
font-weight: 300;
color: var(--text-500);
}

/* ── Reviews ─────────────────────────────────────────────── */
.reviews { background: var(--white); }

.reviews__hero {
text-align: center;
margin-bottom: clamp(3.5rem, 6vw, 5rem);
}

.reviews__rating-num {
font-family: var(--ff-serif);
font-size: clamp(4.5rem, 11vw, 7.5rem);
font-weight: 400;
color: var(--text-900);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: .75rem;
}

.reviews__stars {
font-size: 1.5rem;
color: var(--accent-gold);
letter-spacing: .08em;
margin-bottom: .75rem;
}

.reviews__source {
font-size: .78rem;
color: var(--text-300);
text-transform: uppercase;
letter-spacing: .1em;
}

.reviews__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 560px) {
.reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.reviews__grid { grid-template-columns: repeat(4, 1fr); }
}

.review-card {
background: var(--color-surface-soft);
border: 1px solid rgba(28,26,23,.08);
border-radius: var(--radius-md);
padding: 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: 0 4px 20px rgba(96,90,82,.04);
transition: all var(--transition);
}
.review-card:hover {
transform: translateY(-4px);
background: var(--color-canvas);
box-shadow: var(--shadow-md);
}

.review-card__stars {
font-size: .9rem;
color: var(--accent-gold);
letter-spacing: .04em;
}

.review-card__text {
font-family: var(--ff-body);
font-size: .9rem;
font-weight: 400;
color: var(--color-ink-secondary);
line-height: 1.7;
flex: 1;
}

.review-card__author {
display: flex;
align-items: center;
gap: .75rem;
margin-top: auto;
padding-top: .5rem;
}

.review-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--beige-100);
color: var(--brown-400);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--ff-serif);
font-size: .9rem;
font-weight: 400;
flex-shrink: 0;
}

.review-card__name {
font-weight: 500;
font-size: .85rem;
color: var(--text-900);
}

.review-card__via {
font-size: .75rem;
font-weight: 300;
color: var(--text-300);
}

/* ── Book CTA Banner ─────────────────────────────────────── */
.book {
padding-block: calc(var(--section-py) * 1.2);
background:
radial-gradient(ellipse 80% 80% at 50% 50%, rgba(202,158,106,.15) 0%, transparent 70%),
linear-gradient(135deg, #1C1A17 0%, #2a201c 100%);
text-align: center;
position: relative;
overflow: hidden;
}

.book::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.04) 1px, transparent 0);
background-size: 32px 32px;
}

.book__inner {
position: relative;
z-index: 1;
padding-inline: 1.5rem;
}

.book__title {
font-family: var(--ff-serif);
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 400;
color: #fff;
margin-bottom: 1.25rem;
line-height: 1.15;
letter-spacing: -0.01em;
}

.book__desc {
font-family: var(--ff-body);
font-size: clamp(.95rem, 2vw, 1.05rem);
font-weight: 400;
color: rgba(250,246,240,.75);
max-width: 48ch;
margin-inline: auto;
margin-bottom: 3rem;
line-height: 1.7;
}

.book__note {
margin-top: 1.5rem;
font-size: .75rem;
font-weight: 300;
color: rgba(255,255,255,.4);
letter-spacing: .06em;
}

/* ── Contact ─────────────────────────────────────────────── */
.contact { background: var(--color-surface-soft); }

.contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 800px) {
.contact__grid {
grid-template-columns: 1fr 1.3fr;
gap: 4.5rem;
align-items: start;
}
}

.contact__info { display: flex; flex-direction: column; gap: 2.25rem; }

.contact__block-title {
display: flex;
align-items: center;
gap: .6rem;
font-family: var(--ff-serif);
font-size: 1.3rem;
font-weight: 400;
color: var(--text-900);
margin-bottom: .75rem;
}
.contact__block-title svg { color: var(--accent-gold); flex-shrink: 0; }

.contact__block p {
font-family: var(--ff-body);
font-size: .9rem;
font-weight: 400;
color: var(--color-ink-secondary);
line-height: 1.75;
}

.contact__link {
font-size: .9rem;
color: var(--text-900);
font-weight: 500;
border-bottom: 1px solid var(--beige-200);
padding-bottom: 1px;
transition: all var(--transition);
}
.contact__link:hover { color: var(--color-accent); border-color: var(--color-accent); }

.contact__social {
display: flex;
flex-direction: column;
gap: .75rem;
}
.contact__social-link {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .9rem;
font-weight: 500;
color: var(--text-900);
transition: color var(--transition);
}
.contact__social-link:hover { color: var(--color-accent); }

.hours-table { width: 100%; }
.hours-table td {
padding: .4rem 0;
font-size: .88rem;
font-weight: 300;
color: var(--text-700);
border-bottom: 1px solid rgba(223,205,185,.15);
}
.hours-table tr:last-child td { border-bottom: none; }
.hours-table td:last-child {
text-align: right;
font-weight: 500;
color: var(--text-900);
}

.contact__map {
border-radius: var(--radius-lg);
overflow: hidden;
height: 400px;
box-shadow: var(--shadow-md);
border: 1px solid var(--beige-100);
}

/* ── Footer ──────────────────────────────────────────────── */
.footer {
background: var(--text-900);
color: rgba(255,255,255,.45);
padding-block: 4rem 2.5rem;
border-top: 1px solid rgba(255,255,255,.03);
}

.footer__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
text-align: center;
}

.footer__logo-img {
height: 64px;
width: auto;
filter: invert(1) brightness(1.2);
opacity: .75;
}

.footer__addr { font-size: .8rem; font-weight: 300; opacity: .8; }

.footer__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .75rem 2rem;
}
.footer__nav a {
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .05em;
transition: color var(--transition);
}
.footer__nav a:hover { color: var(--color-accent); }

.footer__social-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: .88rem;
}
.footer__social-label {
font-size: .65rem;
font-weight: 500;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(255,255,255,.25);
}

.footer__social {
display: flex;
gap: .75rem;
}
.footer__social-icon {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .75rem;
color: rgba(255,255,255,.5);
transition: all var(--transition);
padding: .5rem 1.1rem;
border: 1px solid rgba(255,255,255,.08);
border-radius: var(--radius-pill);
}
.footer__social-icon:hover {
color: var(--color-accent);
border-color: rgba(202,158,106,.4);
background: rgba(255,255,255,.02);
}

.footer__copy { font-size: .7rem; opacity: .4; margin-top: .75rem; }

/* ── WhatsApp Floating Button ────────────────────────────── */
.whatsapp-wrap {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}

.whatsapp-tooltip {
  background: #fff;
  color: var(--color-ink-primary);
  font-family: var(--ff-sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  padding: .6rem 1.1rem;
  border-radius: 8px;
  
  box-shadow: 0 4px 16px rgba(96,90,82,.10);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s cubic-bezier(.25,1,.5,1), transform 0.6s cubic-bezier(.25,1,.5,1);
  position: relative;
}
.whatsapp-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 테두리 화살표 */
.whatsapp-tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  right: 1.1rem;
  
  border-top-color: var(--color-accent);
  border-bottom-width: 0;
}
/* 흰색 채움 화살표 (테두리 위에 겹쳐서 안쪽만 흰색으로) */
.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  top: calc(100% - 1.5px);
  right: calc(1.1rem + 1px);
  border: 5px solid transparent;
  border-top-color: #fff;
  border-bottom-width: 0;
}

.whatsapp-float {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem 1.1rem .75rem .85rem;
  background: #25D366;
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 24px rgba(37,211,102,.3);
  font-family: var(--ff-sans);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: all var(--transition);
  overflow: hidden;
  max-width: 3.2rem;
}
.whatsapp-float__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}
.whatsapp-float__label {
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  transition: max-width .4s cubic-bezier(.25, 1, .5, 1), opacity .3s;
  opacity: 0;
}
.whatsapp-float:hover {
  background: #1ebe5d;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(37,211,102,.45);
  max-width: 12rem;
}
.whatsapp-float:hover .whatsapp-float__label {
  max-width: 8rem;
  opacity: 1;
}
@media (max-width: 560px) {
  .whatsapp-wrap { bottom: 1.5rem; right: 1.5rem; }
  .whatsapp-tooltip { font-size: .65rem; padding: .5rem .85rem; }
  .whatsapp-float { padding: .75rem; }
  .whatsapp-float__label { display: none; }
}

/* =========================================================
   RDS PREMIUM UPGRADE: Brand Intro & Unified Card Grid
   ========================================================= */

/* ── Brand Intro (완충 영역 섹션) ── */
.brand-intro {
  text-align: center;
  padding-top: 7rem;
  padding-bottom: 2rem;
  background: var(--white);
}
.brand-intro__text {
  font-family: var(--ff-serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 300;
  color: var(--color-ink-primary);
  line-height: 1.5;
  max-width: 32ch;
  margin-inline: auto;
}
.brand-intro__divider {
  width: 40px;
  height: 1px;
  background: var(--color-accent);
  margin: 2.5rem auto 0;
  opacity: 0.6;
}

/* ── 통합 카드 베이스: 카드 무드 완벽 통일 ── */
.services__grid .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
  background: var(--color-surface-soft);
  border: 1px solid rgba(28,26,23,.04);
  box-shadow: 0 4px 30px rgba(96,90,82,.01);
  transition: transform 0.4s cubic-bezier(.25, 1, .5, 1),
              background-color 0.4s ease,
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* [Nails 그룹: 대형 카드] 시원하고 웅장한 대형 아치 도어 무드 */
.services__grid .service-card:not(.service-card--mini) {
  border-radius: 40px 40px var(--radius-md) var(--radius-md); 
  padding: 2.6rem 1.8rem 1.8rem;
}

/* [Removals & Beauty 그룹: 미니 카드] 비율에 맞춘 귀여운 미디움 아치 룩 */
.services__grid .service-card--mini {
  border-radius: 20px 20px var(--radius-md) var(--radius-md) !important;
  padding: 1.6rem 1.5rem 1.5rem !important;
}

/* ── 전 카드 공통 호버 인터랙션 수립 ── */
.services__grid .service-card:hover {
  transform: translateY(-6px);
  background: #FFFFFF; 
  box-shadow: 0 16px 40px rgba(42,36,33,.06);
  border-color: rgba(202,158,106,.25);
}

/* 마우스 호버 시 내부 버튼 색상 자동 반전 효과 */
.services__grid .service-card:hover .btn--outline {
  background: var(--color-accent);
  color: var(--color-canvas);
  border-color: var(--color-accent);
}

/* ── Featured Card (인기 품목 전용 스포트라이트) ── */
.services__grid .service-card--featured {
  background: #FFFDFC; 
  border: 1px solid rgba(202,158,106,.3);
}

.service-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-canvas);
  font-family: var(--ff-sans);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 1.2rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(202,158,106,.2);
}

/* ── Policy Page ─────────────────────────────────────────── */
.policy-hero {
  padding-top: calc(var(--nav-h) + 5rem);
  padding-bottom: 3rem;
  text-align: center;
  background: var(--color-surface-soft);
  border-bottom: 1px solid var(--beige-100);
}
.policy-hero__label {
  font-family: var(--ff-sans);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
  display: block;
}
.policy-hero__title {
  font-family: var(--ff-serif);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  color: var(--color-ink-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.policy-hero__sub {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--color-ink-secondary);
  font-weight: 400;
}
.policy-content {
  max-width: 760px;
  margin-inline: auto;
  padding: 5rem clamp(1.5rem, 6vw, 4rem) 7rem;
}
.policy-item {
  padding: 2.5rem 0;
  border-bottom: 1px solid rgba(28,26,23,.07);
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: start;
}
.policy-item:first-child { padding-top: 0; }
.policy-item:last-child { border-bottom: none; }
@media (max-width: 600px) {
  .policy-item {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}
.policy-item__heading {
  font-family: var(--ff-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--color-ink-primary);
  letter-spacing: -0.01em;
  padding-top: .1rem;
}
.policy-item__body {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--color-ink-secondary);
  line-height: 1.8;
}
.policy-item__body p + p { margin-top: .75rem; }
.policy-note {
  margin-top: 4rem;
  padding: 2rem 2.5rem;
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--beige-100);
}
.policy-note p {
  font-family: var(--ff-body);
  font-size: .9rem;
  color: var(--color-ink-secondary);
  line-height: 1.75;
  text-align: center;
}