/* ============================================================
   SUMMER LUXE — v3.0 · Korean Editorial Apothecary
   --------------------------------------------------------------
   A clinic monograph: hairline architecture, numbered plates,
   hangul/hanja texture, oldstyle figures, italic accents.
   Champagne is a thread, not a flood. Ink and paper dominate.
   ============================================================ */

/* ============ DESIGN TOKENS ============ */
:root {
    color-scheme: light only;
    /* Ink & Paper */
    --luxe-ink:        #0A1F2E;
    --luxe-ink-soft:   #2E4A5C;
    --luxe-ink-muted:  #5A6F7C;   /* 2026-05-15 polish: 6E8694 → 5A6F7C, WCAG AA 4.7:1 on paper */
    --luxe-ink-light:  #A8B8C2;
    --luxe-paper:      #FAFAF7;
    --luxe-bone:       #F2EEE5;
    --luxe-sand:       #EFE9DD;
    --luxe-white:      #FFFFFF;

    /* Aqua — used as a quiet whisper, italic accents only */
    --luxe-teal:       #006A7F;
    --luxe-teal-soft:  #3A8A9E;
    --luxe-aqua:       #62D2D8;
    --luxe-aqua-pale:  #D5F2F4;

    /* Champagne — strictly accents, hairlines, hovers */
    --luxe-champagne:      #C9A876;
    --luxe-champagne-dark: #9A7C49;   /* 2026-05-15 polish: A88955 → 9A7C49, WCAG AA 5.0:1 */
    --luxe-champagne-pale: #E8D9BD;

    /* Hairline tonality */
    --luxe-hair:        rgba(10,31,46,0.10);
    --luxe-hair-strong: rgba(10,31,46,0.20);
    --luxe-hair-gold:   rgba(201,168,118,0.55);
    --luxe-hair-gold-strong: rgba(201,168,118,0.85);

    /* Card elevation — used by ba/event/review/gallery card hovers */
    --luxe-shadow-card:       0 12px 28px -18px rgba(10,31,46,0.14);
    --luxe-shadow-card-hover: 0 22px 44px -20px rgba(10,31,46,0.22);

    /* Motion */
    --luxe-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --luxe-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

    /* Type system */
    --serif: 'Cormorant Garamond', 'Noto Serif KR', 'Times New Roman', serif;
    --sans:  'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --mono:  'JetBrains Mono', 'Space Mono', 'Menlo', monospace;

    /* Vertical rhythm */
    --baseline: 8px;
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--luxe-paper);
    color: var(--luxe-ink);
    line-height: 1.7;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    counter-reset: section 1;
    font-feature-settings: "kern", "liga", "calt";
}
img, picture, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
::selection { background: var(--luxe-champagne-pale); color: var(--luxe-ink); }
.bg-ink ::selection, .luxe-footer ::selection { background: var(--luxe-champagne); color: var(--luxe-ink); }

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 300;
    color: var(--luxe-ink);
    letter-spacing: -0.018em;
    line-height: 1.08;
    font-feature-settings: "kern", "liga", "dlig", "ss01", "onum";
}
h1 { font-size: clamp(48px, 7.5vw, 112px); line-height: 1.02; letter-spacing: -0.025em; }
h2 { font-size: clamp(36px, 5.2vw, 76px); line-height: 1.06; }
h3 { font-size: clamp(28px, 3.6vw, 48px); }
h4 { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25; }
/* Editorial line-breaking — balance headings so multi-line titles split evenly
   ("이번 계절의 / 혜택" instead of awkward widow). Falls back gracefully where
   unsupported (Chrome 114+ / Safari 17.5+ / Firefox 121+). */
h1, h2, h3, h4 { text-wrap: balance; }

/* Hangul typography matching — soften negative letter-spacing for CJK; English keeps the tight LUXE rhythm.
   Also drop heading weight to 200 inside .luxe-section/.luxe-hero so Noto Serif KR hangul matches
   Cormorant Garamond 300 in visual stroke weight. Scoped to LUXE markup so it doesn't bleed into
   landings that use Pretendard headings. */
:lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) h4 {
    letter-spacing: -0.005em;
    word-spacing: 0.02em;
}
.luxe-hero :lang(ko),
.luxe-section :lang(ko) {
    /* anchor selector — actual weight rule below */
}
.luxe-hero h1:lang(ko),
.luxe-section h1:lang(ko),
.luxe-section h2:lang(ko),
.luxe-section h3:lang(ko),
.luxe-section h4:lang(ko),
.luxe-hero-display:lang(ko),
.luxe-quote-body:lang(ko) {
    font-weight: 200;
}
:lang(ko) p { letter-spacing: 0; }

p {
    color: var(--luxe-ink-soft);
    font-size: 15px;
    line-height: 1.85;
    font-feature-settings: "kern", "liga", "onum";
    text-wrap: pretty;   /* reduces widows / orphans in body copy */
}

em, .italic {
    font-style: italic;
    color: var(--luxe-teal);
    font-weight: 300;
    font-feature-settings: "ss01", "kern";
}

/* Numerical tabular figures for precision (stats, prices, counters) */
.tabular { font-variant-numeric: tabular-nums oldstyle-nums; }

/* ============ SHARED ATOMS ============ */
.eyebrow,
.section-eyebrow {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--luxe-champagne-dark);
    display: inline-block;
}
.eyebrow.ink { color: var(--luxe-ink-muted); }

.hairline {
    display: inline-block;
    height: 1px;
    background: var(--luxe-hair-strong);
    vertical-align: middle;
}
.hairline.gold { background: var(--luxe-champagne); }
.hairline.long { width: 96px; }
.hairline.short { width: 32px; }
.hairline.flex { flex: 1; min-width: 32px; }

.serif-num {
    font-family: var(--serif);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--luxe-ink);
    font-feature-settings: "lnum", "kern";
}

.index-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.20em;
    color: var(--luxe-champagne-dark);
    font-weight: 500;
}

.han {
    font-family: var(--serif);
    font-weight: 300;
    color: var(--luxe-ink);
    letter-spacing: 0.04em;
}

/* ============ LAYOUT ============ */
.luxe-section {
    padding: clamp(96px, 11vh, 168px) clamp(24px, 5vw, 72px);
    position: relative;
    counter-increment: section;
    /* Fixed nav (80px → 60px shrunk) would otherwise crop the PLATE counter
       + first card when jumping to in-page anchors. */
    scroll-margin-top: clamp(64px, 10vh, 96px);
}
.luxe-hero { scroll-margin-top: 0; }
/* Monograph paper grain — extremely subtle SVG fractal noise.
   No extra HTTP request. Background-color from the token; grain layered on top. */
.luxe-section.bg-paper {
    background-color: var(--luxe-paper);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-repeat: repeat;
}
.luxe-section.bg-bone {
    background-color: var(--luxe-bone);
    /* Bone grain — warm champagne-tinted flecks (RGB ~ 0.20 / 0.16 / 0.10) to differentiate from
       the cool teal-blue tone of paper grain. Reads as aged document paper. */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.16 0 0 0 0 0.10 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    background-repeat: repeat;
}
.luxe-section.bg-ink { background: var(--luxe-ink); color: var(--luxe-paper); }

/* PLATE counter retired 2026-05-16 — too magazine-y, low info value. */
.luxe-section::before { content: none; }

.luxe-container { max-width: 1320px; margin: 0 auto; }

.luxe-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); }
.luxe-grid-2-asym { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(40px, 6vw, 96px); }
.luxe-grid-2-rev  { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(40px, 6vw, 96px); }
.luxe-grid-4  {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    border-top: 1px solid var(--luxe-hair-strong);
    border-bottom: 1px solid var(--luxe-hair-strong);
}
.luxe-grid-4 > * + * { border-left: 1px solid var(--luxe-hair); }

@media (max-width: 900px) {
    .luxe-grid-2,
    .luxe-grid-2-asym,
    .luxe-grid-2-rev { grid-template-columns: 1fr; }
    .luxe-grid-4     { grid-template-columns: repeat(2, 1fr); }
    .luxe-grid-4 > * + * { border-left: none; }
    .luxe-grid-4 > *:nth-child(odd)  { border-right: 1px solid var(--luxe-hair); }
    .luxe-grid-4 > *:nth-child(n+3)  { border-top: 1px solid var(--luxe-hair); }
}

/* ============ NAV — masthead ============ */
.luxe-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 18px clamp(20px, 5vw, 64px);
    background: rgba(250, 250, 247, 0.88);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--luxe-hair);
    transition: padding 0.5s var(--luxe-ease);
}
.luxe-nav.shrink { padding: 10px clamp(20px, 5vw, 64px); border-bottom-color: var(--luxe-hair-strong); }
.luxe-nav-inner {
    max-width: 1320px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}
.luxe-brand {
    display: flex; align-items: center; gap: 14px;
}
.luxe-brand svg { transition: transform 0.6s var(--luxe-ease); }
.luxe-brand:hover svg { transform: rotate(-4deg); }
.luxe-brand-text {
    font-family: var(--serif); font-size: 19px; font-weight: 400;
    letter-spacing: 0.03em; color: var(--luxe-ink);
}
.luxe-brand-sub {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.32em;
    color: var(--luxe-ink-muted); margin-top: 3px; text-transform: uppercase;
}
.luxe-nav-links {
    display: flex; gap: 32px; align-items: center; list-style: none;
}
.luxe-nav-links a {
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    letter-spacing: 0.03em; color: var(--luxe-ink);
    position: relative;
    transition: color 0.4s var(--luxe-ease);
    padding-bottom: 4px;
}
.luxe-nav-links a::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 1px; background: var(--luxe-champagne);
    transition: right 0.5s var(--luxe-ease);
}
.luxe-nav-links a:hover { color: var(--luxe-champagne-dark); }
.luxe-nav-links a:hover::after { right: 0; }
.luxe-nav-tel {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    color: var(--luxe-champagne-dark);
    padding: 8px 14px;
    border: 1px solid var(--luxe-hair-gold);
    transition: all 0.4s var(--luxe-ease);
}
.luxe-nav-tel:hover { background: var(--luxe-champagne); color: var(--luxe-ink); border-color: var(--luxe-champagne); }
.luxe-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.luxe-burger span { display: block; width: 22px; height: 1px; background: var(--luxe-ink); transition: all 0.4s var(--luxe-ease); }

@media (max-width: 980px) {
    .luxe-nav-links { display: none; }
    .luxe-burger { display: flex; }
    .luxe-nav-tel { display: none; }
}

/* mobile menu drawer */
.luxe-mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: 84%; max-width: 380px;
    background: var(--luxe-paper); padding: 96px 36px 36px;
    transform: translateX(100%); transition: transform 0.55s var(--luxe-ease);
    z-index: 99; border-left: 1px solid var(--luxe-hair-strong);
}
.luxe-mobile-menu.open { transform: translateX(0); }
.luxe-mobile-menu ul { list-style: none; }
.luxe-mobile-menu li { padding: 18px 0; border-bottom: 1px solid var(--luxe-hair); }
.luxe-mobile-menu a {
    font-family: var(--serif); font-size: 24px; font-weight: 300;
    color: var(--luxe-ink); letter-spacing: -0.01em;
}

/* ============ HERO ============ */
.luxe-hero {
    padding: clamp(140px, 22vh, 200px) clamp(20px, 5vw, 72px) clamp(80px, 12vh, 120px);
    background: var(--luxe-paper);
    position: relative;
    min-height: 92vh;
    display: flex; align-items: center;
}
/* Hero PLATE · 01 — Cover retired 2026-05-16. */
.luxe-hero::after {
    content: '韓 · 醫 · 規林';
    position: absolute;
    bottom: clamp(40px, 6vh, 80px);
    left: clamp(24px, 5vw, 72px);
    font-family: var(--serif); font-size: 11px; letter-spacing: 0.6em;
    color: var(--luxe-ink-muted);
}
.luxe-hero-grid {
    display: grid; grid-template-columns: 1.35fr 1fr;
    gap: clamp(48px, 7vw, 96px);
    align-items: center;
    width: 100%; max-width: 1320px; margin: 0 auto;
}
.luxe-hero-display {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(56px, 9.4vw, 132px); line-height: 0.98;
    letter-spacing: -0.028em; color: var(--luxe-ink);
    font-feature-settings: "kern", "dlig", "ss01";
}
.luxe-hero-display .accent {
    font-style: italic; color: var(--luxe-teal); font-weight: 300;
}
.luxe-hero-eyebrow-row {
    display: flex; align-items: center; gap: 18px; margin-bottom: 40px;
    flex-wrap: wrap;
}
.luxe-hero-body {
    font-family: var(--sans); font-size: 16px; line-height: 1.85;
    color: var(--luxe-ink-soft); max-width: 480px; margin-top: 56px;
}
.luxe-hero-cta-row {
    display: flex; gap: 32px; align-items: center; margin-top: 64px;
    flex-wrap: wrap;
}
.luxe-hero-signature {
    margin-top: 88px; padding-top: 28px;
    border-top: 1px solid var(--luxe-hair-strong);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.luxe-hero-signature::before {
    content: '§';
    font-family: var(--serif); font-style: italic; font-size: 18px;
    color: var(--luxe-champagne-dark); letter-spacing: 0;
    text-transform: none;
}

.luxe-hero-figure {
    position: relative; aspect-ratio: 4/5; overflow: hidden;
    background: var(--luxe-ink);
}
.luxe-hero-figure img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.08) contrast(1.02);
    transition: transform 1.2s var(--luxe-ease);
}
.luxe-hero-figure:hover img { transform: scale(1.02); }
.luxe-hero-figure::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(58,138,158,0.18) 0%, rgba(10,31,46,0.32) 100%);
    pointer-events: none;
}
.luxe-hero-figure::after {
    content: ''; position: absolute; inset: 14px; z-index: 2;
    border: 1px solid rgba(213,242,244,0.18);
    pointer-events: none;
}
.luxe-hero-fig-cap {
    position: absolute; bottom: 22px; right: 22px; z-index: 3;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--luxe-aqua-pale); opacity: 0.92; text-transform: uppercase;
}
.luxe-hero-fig-side {
    position: absolute; left: -56px; top: 36px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
}
@media (max-width: 1200px) {
    .luxe-hero-fig-side { display: none; }
}
.luxe-hero-fig-tag {
    position: absolute; top: -36px; right: 0;
    font-family: var(--serif); font-size: 14px; font-style: italic;
    color: var(--luxe-champagne-dark); letter-spacing: 0.04em;
}

@media (max-width: 900px) {
    .luxe-hero { padding: 124px 20px 64px; min-height: auto; }
    .luxe-hero-grid { grid-template-columns: 1fr; gap: 56px; }
    .luxe-hero-fig-side { display: none; }
    .luxe-hero-fig-tag { position: static; margin-bottom: 14px; display: block; }
    .luxe-hero::after { display: none; }
}

/* ============ BUTTONS ============ */
.luxe-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 12px; padding: 18px 34px; font-family: var(--sans);
    font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
    text-transform: uppercase; border: 1px solid var(--luxe-ink);
    background: var(--luxe-ink); color: var(--luxe-paper);
    transition: all 0.5s var(--luxe-ease); cursor: pointer;
    position: relative; overflow: hidden;
}
.luxe-btn::after {
    content: ''; position: absolute; inset: 0;
    background: var(--luxe-champagne);
    transform: translateY(101%); transition: transform 0.6s var(--luxe-ease);
    z-index: 0;
}
.luxe-btn > * { position: relative; z-index: 1; }
.luxe-btn:hover { color: var(--luxe-ink); border-color: var(--luxe-champagne); }
.luxe-btn:hover::after { transform: translateY(0); }
.luxe-btn.outline {
    background: transparent; color: var(--luxe-ink);
}
.luxe-btn.outline:hover { color: var(--luxe-ink); border-color: var(--luxe-champagne); }
.luxe-btn.gold {
    background: var(--luxe-champagne); color: var(--luxe-ink);
    border-color: var(--luxe-champagne);
}
.luxe-btn.gold::after { background: var(--luxe-ink); }
.luxe-btn.gold:hover { color: var(--luxe-paper); border-color: var(--luxe-ink); }
.luxe-btn.full { width: 100%; }

.luxe-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding-bottom: 6px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.20em;
    text-transform: uppercase; color: var(--luxe-ink);
    border-bottom: 1px solid var(--luxe-ink);
    transition: all 0.5s var(--luxe-ease);
}
.luxe-link:hover {
    color: var(--luxe-champagne-dark);
    border-color: var(--luxe-champagne);
    gap: 14px;
}
.luxe-link.gold {
    color: var(--luxe-champagne-dark);
    border-color: var(--luxe-champagne);
}

/* ============ SECTION HEAD ============ */
.luxe-section-head {
    margin-bottom: clamp(48px, 7vh, 80px);
    max-width: 920px;
}
.luxe-section-head .row {
    display: flex; align-items: center; gap: 18px; margin-bottom: 28px;
    flex-wrap: wrap;
}
.luxe-section-head h2 {
    max-width: 16ch;
    font-feature-settings: "kern", "dlig", "ss01";
}
.luxe-section-head p {
    margin-top: 28px; max-width: 58ch; font-size: 15.5px;
    color: var(--luxe-ink-soft); line-height: 1.85;
}

/* ============ SERVICES — numbered editorial list ============ */
.luxe-services-row {
    display: grid; grid-template-columns: 80px 1fr 220px;
    gap: clamp(20px, 3vw, 40px); align-items: start;
    padding: clamp(36px, 5vw, 56px) 0;
    border-bottom: 1px solid var(--luxe-hair);
    transition: background 0.5s var(--luxe-ease), padding-left 0.5s var(--luxe-ease);
    position: relative;
}
.luxe-services-row:first-child { border-top: 1px solid var(--luxe-hair); }
.luxe-services-row:hover {
    background: linear-gradient(to right, rgba(201,168,118,0.03) 0%, transparent 70%);
    padding-left: 16px;
}
.luxe-services-row > div:first-child {
    display: flex; flex-direction: column; gap: 18px; align-items: flex-start;
}
.luxe-services-row .index-num {
    font-size: 12px;
    letter-spacing: 0.22em;
    font-feature-settings: "lnum";
}
.luxe-services-icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--luxe-hair-gold);
    color: var(--luxe-champagne-dark);
    transition: all 0.5s var(--luxe-ease);
}
.luxe-services-row:hover .luxe-services-icon {
    background: var(--luxe-champagne);
    color: var(--luxe-ink);
    border-color: var(--luxe-champagne);
    transform: rotate(45deg);
}
.luxe-services-icon svg { transition: transform 0.5s var(--luxe-ease); }
.luxe-services-row:hover .luxe-services-icon svg { transform: rotate(-45deg); }
.luxe-services-row h3 {
    font-size: clamp(26px, 2.6vw, 36px);
    letter-spacing: -0.01em; margin-bottom: 16px;
    line-height: 1.1;
}
.luxe-services-row h3 .en {
    font-style: italic; font-size: 0.55em;
    color: var(--luxe-champagne-dark); margin-left: 14px;
    letter-spacing: 0.02em; font-weight: 300;
}
.luxe-services-row p {
    max-width: 480px; font-size: 14.5px;
    line-height: 1.85;
}
.luxe-services-row .luxe-link { white-space: nowrap; }

@media (max-width: 720px) {
    .luxe-services-row {
        grid-template-columns: 1fr; gap: 18px; padding: 32px 0;
    }
    .luxe-services-row > div:first-child { flex-direction: row; align-items: center; gap: 20px; }
    .luxe-services-row > div:last-child { text-align: left; padding-top: 4px; }
}

/* ============ WHY KYURIM — 3 editorial cards ============
   Each card carries a numeric index (N° 01/02/03) and a single italic-teal
   accent in the heading. The grid uses 1px hair gaps over a hair background
   to produce inset rules between cards without doubled borders. */
.luxe-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--luxe-hair);
    border: 1px solid var(--luxe-hair);
}
.luxe-why-card {
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 44px);
    background: var(--luxe-paper);
}
.luxe-why-card .index-num { margin-bottom: 28px; }
.luxe-why-card h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 20px;
    letter-spacing: -0.008em;
}
.luxe-why-card p { font-size: 14.5px; }
@media (max-width: 900px) {
    .luxe-why-grid { grid-template-columns: 1fr; }
}

/* ============ EDITORIAL QUOTE ============ */
.luxe-quote-grid {
    display: grid; grid-template-columns: 0.4fr 1.6fr 0.4fr;
    gap: clamp(28px, 4vw, 72px); align-items: start;
    padding: clamp(24px, 4vh, 40px) 0;
}
.luxe-quote-mark {
    width: 64px; height: 64px; border-radius: 50%;
    border: 1px solid var(--luxe-hair-gold);
    background: var(--luxe-paper);
    display: grid; place-items: center;
    font-family: var(--serif); font-size: 26px;
    color: var(--luxe-ink); letter-spacing: 0;
    margin-top: 20px;
    transition: background 0.5s var(--luxe-ease),
                color 0.5s var(--luxe-ease),
                border-color 0.5s var(--luxe-ease),
                transform 0.6s var(--luxe-ease);
}
.luxe-quote-grid:hover .luxe-quote-mark {
    background: var(--luxe-ink); color: var(--luxe-champagne); border-color: var(--luxe-ink);
    transform: rotate(8deg) scale(1.06);
}
.luxe-quote-pre {
    font-family: var(--serif); font-size: 14px; font-style: italic;
    color: var(--luxe-champagne-dark); letter-spacing: 0.02em;
    margin-bottom: 36px;
}
.luxe-quote-body {
    font-family: var(--serif);
    font-size: clamp(28px, 3.6vw, 56px);
    font-weight: 300; font-style: italic;
    line-height: 1.32; color: var(--luxe-ink); letter-spacing: -0.012em;
    font-feature-settings: "kern", "dlig", "ss01";
}
.luxe-quote-attr {
    margin-top: 56px; display: flex; align-items: center; gap: 18px;
}
.luxe-quote-side {
    text-align: right;
    writing-mode: vertical-rl;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    align-self: end;
    padding-top: 80px;
}
@media (max-width: 900px) {
    .luxe-quote-grid { grid-template-columns: 1fr; }
    .luxe-quote-side { display: none; }
    .luxe-quote-mark { margin-top: 0; margin-bottom: 16px; }
}

/* ============ STATS ============ */
.luxe-stats-cell {
    padding: clamp(48px, 7vh, 72px) 24px;
    text-align: center;
    transition: background 0.5s var(--luxe-ease);
}
.luxe-stats-cell:hover { background: var(--luxe-bone); }
.luxe-stats-key {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.32em;
    color: var(--luxe-champagne-dark); margin-bottom: 28px;
    text-transform: uppercase;
}
.luxe-stats-num {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(56px, 12vw, 96px); line-height: 0.95;
    letter-spacing: -0.03em; color: var(--luxe-ink);
    font-variant-numeric: tabular-nums oldstyle-nums;
}
.luxe-stats-suffix {
    font-size: 0.30em; color: var(--luxe-champagne-dark);
    margin-left: 6px; font-style: italic;
    letter-spacing: 0.02em;
}
.luxe-stats-label {
    margin-top: 24px; padding-top: 18px;
    border-top: 1px solid var(--luxe-hair);
    font-family: var(--sans); font-size: 11px; font-weight: 500;
    letter-spacing: 0.20em; color: var(--luxe-ink-soft);
    text-transform: uppercase;
    max-width: 16ch; margin-left: auto; margin-right: auto;
}

/* ============ GALLERY (interior, 5 frames) ============ */
.luxe-gallery-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .luxe-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .luxe-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

.luxe-gallery-card {
    position: relative; aspect-ratio: 4/5; overflow: hidden;
    background: var(--luxe-ink);
    cursor: pointer;
}
.luxe-gallery-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--luxe-ease);
}
.luxe-gallery-card:hover img { transform: scale(1.06); }
.luxe-gallery-card::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(160deg, rgba(58,138,158,0.14) 0%, rgba(10,31,46,0.32) 100%);
    transition: opacity 0.6s var(--luxe-ease);
    pointer-events: none;
}
.luxe-gallery-card:hover::before { opacity: 0.7; }
.luxe-gallery-card::after {
    content: ''; position: absolute; inset: 12px; z-index: 2;
    border: 1px solid rgba(250,250,247,0.0);
    transition: border-color 0.5s var(--luxe-ease);
    pointer-events: none;
}
.luxe-gallery-card:hover::after { border-color: rgba(250,250,247,0.28); }
.luxe-gallery-card .label {
    position: absolute; top: 18px; left: 18px; z-index: 3;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.32em;
    color: var(--luxe-aqua-pale); opacity: 0.9; text-transform: uppercase;
}
.luxe-gallery-card .cap {
    position: absolute; bottom: 18px; left: 18px; right: 18px; z-index: 3;
    font-family: var(--serif); font-size: 17px; font-style: italic;
    color: var(--luxe-aqua-pale);
    letter-spacing: -0.005em;
}

/* ============ B/A CARDS — case archive ============ */
.luxe-ba-grid {
    display: flex; gap: 18px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding: 12px 0 24px;
    scroll-padding-inline: clamp(24px, 5vw, 72px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--luxe-hair-strong) transparent;
}
.luxe-ba-grid::-webkit-scrollbar { height: 4px; }
.luxe-ba-grid::-webkit-scrollbar-thumb { background: var(--luxe-hair-strong); }
.luxe-ba-grid::-webkit-scrollbar-track { background: transparent; }

.luxe-ba-card {
    flex: 0 0 clamp(264px, 28vw, 380px);
    scroll-snap-align: start;
    border: 1px solid var(--luxe-hair); background: var(--luxe-white);
    transition: transform 0.4s var(--luxe-ease), box-shadow 0.4s var(--luxe-ease);
    position: relative;
    box-shadow: var(--luxe-shadow-card);
}
.luxe-ba-card::before {
    content: ''; position: absolute;
    top: -1px; left: -1px; bottom: -1px; right: -1px;
    border: 1px solid var(--luxe-ink);
    opacity: 0; transition: opacity 0.35s var(--luxe-ease);
    pointer-events: none;
}
.luxe-ba-card:hover::before { opacity: 1; }
.luxe-ba-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--luxe-shadow-card-hover);
}

.luxe-ba-card .img-wrap {
    aspect-ratio: 1/1; overflow: hidden; background: var(--luxe-bone);
    position: relative;
}
.luxe-ba-card img {
    width: 100%; height: 100%; object-fit: cover;
    /* 임상 사진은 의료광고법 준수 — 색감 보정 없음 */
}
.luxe-ba-card .meta {
    padding: 22px 22px 24px;
    border-top: 1px solid var(--luxe-hair);
}
.luxe-ba-card h4 {
    font-family: var(--serif); font-size: 19px; font-weight: 400;
    color: var(--luxe-ink); margin-bottom: 10px;
    letter-spacing: -0.005em;
}
.luxe-ba-card p {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
    color: var(--luxe-ink-muted); text-transform: uppercase; line-height: 1.7;
    font-feature-settings: "lnum";
}

/* ============ PROCESS — rail with 5 markers ============ */
.luxe-process {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 0; position: relative;
    border-top: 1px solid var(--luxe-hair-strong);
    border-bottom: 1px solid var(--luxe-hair-strong);
}
.luxe-process-step {
    padding: clamp(40px, 6vw, 64px) clamp(20px, 3vw, 32px);
    position: relative;
    transition: background 0.5s var(--luxe-ease);
}
.luxe-process-step:hover { background: var(--luxe-paper); }
.luxe-process-step + .luxe-process-step { border-left: 1px solid var(--luxe-hair); }
.luxe-process-step::before {
    content: '';
    position: absolute; top: -5px; left: 0; width: 9px; height: 9px;
    background: var(--luxe-paper);
    border: 1px solid var(--luxe-champagne);
    transform: rotate(45deg);
    transition: all 0.5s var(--luxe-ease);
}
.luxe-process-step:hover::before {
    background: var(--luxe-champagne);
    transform: rotate(45deg) scale(1.3);
}
.luxe-process-step .index-num {
    font-size: 13px; margin-bottom: 28px; display: block;
    letter-spacing: 0.24em;
}
.luxe-process-step h4 {
    font-family: var(--serif); font-size: 22px; font-weight: 400;
    color: var(--luxe-ink); margin-bottom: 14px;
    letter-spacing: -0.005em;
}
.luxe-process-step p {
    font-family: var(--sans); font-size: 13.5px; line-height: 1.75;
    color: var(--luxe-ink-soft);
}

@media (max-width: 900px) {
    .luxe-process { grid-template-columns: 1fr; }
    .luxe-process-step + .luxe-process-step {
        border-left: none; border-top: 1px solid var(--luxe-hair);
    }
    .luxe-process-step::before { display: none; }
}

/* ============ FORM — underline-only fields ============ */
.luxe-form-card {
    background: var(--luxe-white);
    padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
    border: 1px solid var(--luxe-hair-strong);
    position: relative;
}
.luxe-form-card::before {
    content: ''; position: absolute;
    top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
}
.luxe-form-head {
    display: flex; align-items: baseline; gap: 18px; margin-bottom: 56px;
    flex-wrap: wrap;
}
.luxe-field { margin-bottom: 36px; position: relative; }
.luxe-field label {
    display: block;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: var(--luxe-ink-muted); text-transform: uppercase; margin-bottom: 14px;
    transition: color 0.4s var(--luxe-ease);
}
.luxe-field input,
.luxe-field select,
.luxe-field textarea {
    width: 100%; border: none;
    border-bottom: 1px solid var(--luxe-hair-strong);
    border-radius: 0; background: transparent;
    padding: 8px 0 14px;
    font-family: var(--serif); font-size: 22px; font-weight: 300;
    color: var(--luxe-ink); outline: none;
    transition: border-color 0.4s var(--luxe-ease);
    font-feature-settings: "onum";
    color-scheme: light;   /* prevent iOS Dark Mode from reverting native form controls */
}
input, select, textarea { color-scheme: light; }   /* global safeguard outside .luxe-field */
.luxe-field input::placeholder,
.luxe-field textarea::placeholder {
    color: var(--luxe-ink-muted); font-style: italic;
}
.luxe-field input:focus,
.luxe-field select:focus,
.luxe-field textarea:focus {
    border-bottom-color: var(--luxe-champagne);
}
.luxe-field:focus-within label { color: var(--luxe-champagne-dark); }
.luxe-form-meta {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 56px; gap: 24px; flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid var(--luxe-hair);
}
.luxe-form-no {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    transition: color 0.4s var(--luxe-ease);
}

/* ============ FAQ ============ */
.luxe-faq-item {
    border-bottom: 1px solid var(--luxe-hair); padding: 28px 0;
    cursor: pointer;
    transition: padding-left 0.4s var(--luxe-ease);
}
.luxe-faq-item:first-child { border-top: 1px solid var(--luxe-hair); }
.luxe-faq-item:hover { padding-left: 12px; }
.luxe-faq-q {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px;
}
.luxe-faq-q-text {
    font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 400; color: var(--luxe-ink); flex: 1;
    line-height: 1.4; letter-spacing: -0.005em;
}
.luxe-faq-q-text .num {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    letter-spacing: 0.26em; color: var(--luxe-champagne-dark);
    margin-right: 22px; vertical-align: 2px;
    font-feature-settings: "lnum";
}
.luxe-faq-toggle {
    width: 32px; height: 32px; flex: none; position: relative;
    border: 1px solid var(--luxe-hair-strong);
    transition: all 0.4s var(--luxe-ease);
}
.luxe-faq-toggle::before,
.luxe-faq-toggle::after {
    content: ''; position: absolute; background: var(--luxe-ink);
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    transition: transform 0.4s var(--luxe-ease);
}
.luxe-faq-toggle::before { width: 14px; height: 1px; }
.luxe-faq-toggle::after  { width: 1px; height: 14px; }
.luxe-faq-item.open .luxe-faq-toggle::after { transform: translate(-50%, -50%) scaleY(0); }
.luxe-faq-item.open .luxe-faq-toggle {
    border-color: var(--luxe-champagne); background: var(--luxe-champagne);
}
.luxe-faq-item.open .luxe-faq-toggle::before { background: var(--luxe-ink); }
/* Teal accent — quiet whisper on opened FAQ row (matches em italic accent in hero) */
.luxe-faq-item.open {
    box-shadow: inset 2px 0 0 var(--luxe-teal);
    padding-left: 12px;
}

.luxe-faq-a {
    overflow: hidden; max-height: 0; opacity: 0;
    transition: max-height 0.6s var(--luxe-ease),
                opacity 0.45s var(--luxe-ease),
                padding 0.4s var(--luxe-ease);
    padding-top: 0;
}
.luxe-faq-item.open .luxe-faq-a {
    max-height: 1000px; opacity: 1; padding-top: 24px;
}
.luxe-faq-a p {
    font-family: var(--sans); font-size: 15px; line-height: 1.85;
    color: var(--luxe-ink-soft); max-width: 880px;
}

/* ============ MARQUEE — champagne band ============
   Polished 2026-05-15: lighter padding + smaller italic so the band reads as an
   editorial pull-rule rather than a heavy section. */
.luxe-marquee {
    background: var(--luxe-champagne); color: var(--luxe-ink);
    padding: 28px 0; overflow: hidden;
    border-top: 1px solid var(--luxe-champagne-dark);
    border-bottom: 1px solid var(--luxe-champagne-dark);
    position: relative;
}
.luxe-marquee::before,
.luxe-marquee::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
    z-index: 1; pointer-events: none;
}
.luxe-marquee::before { left: 0; background: linear-gradient(to right, var(--luxe-champagne), transparent); }
.luxe-marquee::after  { right: 0; background: linear-gradient(to left, var(--luxe-champagne), transparent); }
.luxe-marquee-track {
    display: flex; gap: 56px; align-items: center;
    white-space: nowrap;
    animation: luxe-marquee 50s linear infinite;
    width: max-content;
}
.luxe-marquee-track span.t {
    font-family: var(--serif); font-size: clamp(18px, 2.4vw, 30px);
    font-weight: 300; font-style: italic; letter-spacing: 0.01em;
    font-feature-settings: "kern", "ss01";
}
.luxe-marquee-track span.dot {
    font-size: 7px; opacity: 0.42;
}
@keyframes luxe-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============ FOOTER — atelier rail ============ */
.luxe-footer {
    background: var(--luxe-ink); color: var(--luxe-paper);
    padding: clamp(72px, 10vh, 120px) clamp(20px, 5vw, 72px) 48px;
    position: relative;
}
.luxe-footer::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: clamp(60%, 80%, 1320px);
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        var(--luxe-champagne) 18%,
        var(--luxe-hair-gold-strong) 50%,
        var(--luxe-champagne) 82%,
        transparent 100%);
}
/* Closing hair line — monograph "last page" sealing. Subtler than the opening
   rail (no gradient stop highlighting middle) so the footer feels bookended,
   not stacked. */
.luxe-footer::after {
    content: '';
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    width: clamp(40%, 50%, 720px);
    height: 1px;
    background: rgba(201,168,118,0.32);
    pointer-events: none;
}
.luxe-footer-inner { max-width: 1320px; margin: 0 auto; }
.luxe-footer-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(40px, 5vw, 72px);
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(250,250,247,0.10);
}
@media (max-width: 900px) { .luxe-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .luxe-footer-grid { grid-template-columns: 1fr; } }

.luxe-footer-key {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: rgba(250,250,247,0.50); margin-bottom: 22px;
    text-transform: uppercase;
}
.luxe-footer-text {
    font-family: var(--sans); font-size: 13.5px; line-height: 1.85;
    color: rgba(250,250,247,0.90); font-weight: 300;
}
.luxe-footer-tel {
    font-family: var(--serif); font-size: 26px; font-weight: 300;
    color: var(--luxe-champagne); letter-spacing: 0.02em;
    font-variant-numeric: oldstyle-nums tabular-nums;
}
.luxe-footer-brand-name {
    font-family: var(--serif); font-size: 26px; font-weight: 300;
    letter-spacing: 0.04em; margin-top: 28px;
}
.luxe-footer-brand-sub {
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.32em;
    color: rgba(250,250,247,0.52); margin-top: 8px; text-transform: uppercase;
}
.luxe-footer-est {
    margin-top: 28px;
    font-family: var(--serif); font-size: 13px; font-style: italic;
    color: var(--luxe-champagne); letter-spacing: 0.02em;
}
.luxe-footer-social {
    margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap;
}
.luxe-footer-social a {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.20em;
    color: rgba(250,250,247,0.72);
    border-bottom: 1px solid rgba(201,168,118,0.55);
    padding-bottom: 4px; text-transform: uppercase;
    transition: all 0.4s var(--luxe-ease);
}
.luxe-footer-social a:hover { color: var(--luxe-champagne); border-color: var(--luxe-champagne); }
.luxe-footer-rail {
    margin-top: 36px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 16px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.20em;
    color: rgba(250,250,247,0.40); text-transform: uppercase;
}

/* ============ CONTACT ============ */
.luxe-contact-grid {
    display: grid; grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 6vw, 80px); align-items: start;
}
@media (max-width: 900px) { .luxe-contact-grid { grid-template-columns: 1fr; } }
.luxe-info-row {
    display: grid; grid-template-columns: 120px 1fr;
    gap: 28px; padding: 28px 0;
    border-bottom: 1px solid var(--luxe-hair);
    transition: background 0.4s var(--luxe-ease);
}
.luxe-info-row:first-child { border-top: 1px solid var(--luxe-hair-strong); }
.luxe-info-row:last-child { border-bottom: 1px solid var(--luxe-hair-strong); }
.luxe-info-row:hover { background: rgba(201,168,118,0.04); padding-left: 8px; }
.luxe-info-row .k {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    padding-top: 6px;
}
.luxe-info-row .v {
    font-family: var(--sans); font-size: 14.5px; line-height: 1.85;
    color: var(--luxe-ink); text-align: left;
}
.luxe-info-row .v strong {
    font-family: var(--serif); font-weight: 400; font-size: 18px;
    letter-spacing: 0.02em; color: var(--luxe-ink);
}
.luxe-map-wrap {
    aspect-ratio: 5/4; overflow: hidden;
    border: 1px solid var(--luxe-hair-strong);
    background: var(--luxe-bone);
    position: relative;
}
.luxe-map-wrap::before {
    content: 'View on Map →';
    position: absolute; top: 16px; right: 16px; z-index: 2;
    padding: 8px 14px;
    background: var(--luxe-paper);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.20em;
    color: var(--luxe-ink); text-transform: uppercase;
    border: 1px solid var(--luxe-hair-strong);
    transition: all 0.4s var(--luxe-ease);
}
.luxe-map-wrap:hover::before { background: var(--luxe-champagne); border-color: var(--luxe-champagne); }
.luxe-map-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.45) contrast(1.04);
    transition: filter 0.7s var(--luxe-ease);
}
.luxe-map-wrap:hover img { filter: grayscale(0); }

/* ============ STICKY CTA (mobile) ============ */
.luxe-sticky-cta {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    display: none; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: rgba(10,31,46,0.97);
    border-top: 1px solid var(--luxe-champagne);
    backdrop-filter: blur(10px);
}
.luxe-sticky-cta a {
    padding: 14px 8px 12px; text-align: center;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em;
    color: rgba(250,250,247,0.78); text-transform: uppercase;
    border-right: 1px solid rgba(250,250,247,0.10);
    transition: background 0.4s var(--luxe-ease);
}
.luxe-sticky-cta a:hover { background: rgba(201,168,118,0.16); }
.luxe-sticky-cta a:last-child { border-right: none; }
.luxe-sticky-cta a strong {
    display: block; font-family: var(--serif); font-size: 17px;
    font-style: italic; color: var(--luxe-champagne);
    letter-spacing: 0.01em; margin-bottom: 4px; font-weight: 300;
    font-variant-numeric: oldstyle-nums;
}
@media (max-width: 720px) {
    .luxe-sticky-cta { display: grid; }
    body { padding-bottom: 64px; }
}

/* ============ FADE / MOTION ============ */
.luxe-fade {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.9s var(--luxe-ease), transform 0.9s var(--luxe-ease);
    transition-delay: calc(var(--stagger-i, 0) * 80ms);
    will-change: opacity, transform;   /* GPU layer pre-allocation for smoother reveal */
}
.luxe-fade.visible {
    opacity: 1; transform: none;
    will-change: auto;                 /* release GPU layer after reveal to save memory */
}
/* Stagger — JS sets --stagger-i per sibling index in the IO observer setup,
   resetting to 0 on each new parent. nth-of-type was brittle (hero-grid div+figure
   both matched :nth-of-type(1) → simultaneous reveal). The calc() pattern is
   markup-agnostic and works for any number of siblings. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .luxe-fade { opacity: 1; transform: none; }
}

/* ============ TOUCH DEVICES — neutralize sticky :hover state ============
   iOS Safari / Android Chrome keep :hover applied after a tap until the next
   tap on something else. Cards would otherwise stay floated up (-5px) and
   shadow-elevated indefinitely. Disable transform/shadow lift + double-border
   reveal for non-hover devices. Brand recognition is preserved (champagne
   stays present on icons/borders). */
@media (hover: none) {
    .luxe-ba-card:hover,
    .luxe-event-card:hover,
    .luxe-review-card:hover,
    .luxe-gallery-card:hover {
        transform: none;
        box-shadow: var(--luxe-shadow-card);
    }
    .luxe-ba-card:hover::before,
    .luxe-event-card:hover::before,
    .luxe-review-card:hover::before { opacity: 0; }
    .luxe-gallery-card:hover img { transform: none; }
    .luxe-gallery-card:hover::before { opacity: 1; }
    .luxe-gallery-card:hover::after { border-color: transparent; }
    .luxe-services-row:hover {
        background: transparent;
        padding-left: 0;
    }
    .luxe-services-row:hover .luxe-services-icon {
        background: transparent;
        color: var(--luxe-champagne-dark);
        border-color: var(--luxe-hair-gold);
        transform: none;
    }
    .luxe-services-row:hover .luxe-services-icon svg { transform: none; }
    .luxe-quote-grid:hover .luxe-quote-mark {
        background: var(--luxe-paper);
        color: var(--luxe-ink);
        border-color: var(--luxe-hair-gold);
        transform: none;
    }
    .luxe-faq-item:hover { padding-left: 0; }
    .luxe-info-row:hover { background: transparent; padding-left: 0; }
    .luxe-hero-figure:hover img { transform: none; }
    .luxe-map-wrap:hover img { filter: grayscale(0.45) contrast(1.04); }
    .luxe-process-step:hover { background: transparent; }
    .luxe-process-step:hover::before { transform: rotate(45deg); background: var(--luxe-paper); }
    .luxe-stats-cell:hover { background: transparent; }
}

/* ============ SUPPRESS LEGACY SPRING ARTIFACTS ============ */
.snowflake, #snow-container, #talisman-modal,
.fortune-cookie-widget, .ai-ticker-rolling, #countdown,
.scroll-progress-container, .floating-item,
.petal-dust, .letter-modal, .scroll-reveal-active { display: none !important; }

/* ============ ACCESSIBILITY ============ */
:focus-visible {
    outline: 2px solid var(--luxe-champagne);
    outline-offset: 3px;
}
/* Ink-background sections (footer, sticky CTA, ink-bg sections) — switch outline to paper
   so the focus ring remains visible against dark ground. */
.bg-ink :focus-visible,
.luxe-footer :focus-visible,
.luxe-sticky-cta :focus-visible {
    outline-color: var(--luxe-paper);
}

/* ============================================================
   RESTORED SECTIONS — 2026-05-15
   Events carousel · Diagnosis · Diet Prediction · Reviews · Blog
   All sections inherit .luxe-section padding / counter.
   ============================================================ */

/* ============ EVENTS CAROUSEL ============ */
.luxe-events-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(24px, 5vw, 72px);
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--luxe-hair-strong) transparent;
}
.luxe-events-track::-webkit-scrollbar { height: 4px; }
.luxe-events-track::-webkit-scrollbar-thumb { background: var(--luxe-hair-strong); }
.luxe-events-track::-webkit-scrollbar-track { background: transparent; }

.luxe-event-card {
    flex: 0 0 clamp(220px, 24vw, 320px);
    scroll-snap-align: start;
    border: 1px solid var(--luxe-hair);
    background: var(--luxe-white);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--luxe-ease), box-shadow 0.4s var(--luxe-ease);
    box-shadow: var(--luxe-shadow-card);
}
.luxe-event-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; bottom: -1px; right: -1px;
    border: 1px solid var(--luxe-ink);
    opacity: 0;
    transition: opacity 0.35s var(--luxe-ease);
    pointer-events: none;
    z-index: 2;
}
.luxe-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--luxe-shadow-card-hover);
}
.luxe-event-card:hover::before { opacity: 1; }
.luxe-event-card .img-wrap {
    aspect-ratio: 768 / 1376;
    overflow: hidden;
    background: var(--luxe-bone);
}
.luxe-event-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.4s var(--luxe-ease);
}
.luxe-event-card:hover img { transform: scale(1.04); }
.luxe-event-card .label {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    padding: 5px 10px;
    background: var(--luxe-paper);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.24em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    border: 1px solid var(--luxe-hair-gold);
}

/* ============ BLOG CTA ============ */
.luxe-blog-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
    padding: clamp(56px, 7vw, 96px);
    background: var(--luxe-white);
    border: 1px solid var(--luxe-hair-strong);
    position: relative;
}
.luxe-blog-card::before {
    content: '';
    position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
}
.luxe-blog-card .key {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    margin-bottom: 22px;
}
.luxe-blog-card h3 {
    font-size: clamp(28px, 3.4vw, 44px);
    margin-bottom: 28px;
    max-width: 14ch;
}
.luxe-blog-card p {
    max-width: 42ch;
    margin-bottom: 36px;
}
.luxe-blog-visual {
    aspect-ratio: 5/4;
    background: var(--luxe-ink);
    position: relative;
    overflow: hidden;
}
.luxe-blog-visual::before {
    content: '韓';
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--serif); font-size: clamp(96px, 14vw, 200px);
    color: var(--luxe-champagne); font-weight: 300;
    opacity: 0.18;
    letter-spacing: 0;
}
.luxe-blog-visual::after {
    content: 'Kyurim Korean Medicine · Cheongju · est. 2016';
    position: absolute; bottom: 22px; left: 22px; right: 22px; z-index: 2;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.30em;
    color: var(--luxe-aqua-pale); opacity: 0.7;
    text-transform: uppercase;
}
.luxe-blog-visual .frame {
    position: absolute; inset: 14px; z-index: 3;
    border: 1px solid rgba(201,168,118,0.42);
    pointer-events: none;
}
.luxe-blog-visual .tag {
    position: absolute; top: 18px; left: 18px; z-index: 4;
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.30em;
    color: var(--luxe-champagne); text-transform: uppercase;
}
@media (max-width: 900px) {
    .luxe-blog-card { grid-template-columns: 1fr; padding: 48px 28px; }
}

/* ============ DIAGNOSIS (Self-Check) — LUXE override for diagnosis.js DOM ============ */
.luxe-diagnosis-wrap {
    max-width: 880px;
    margin: 0 auto;
    background: var(--luxe-white);
    border: 1px solid var(--luxe-hair-strong);
    padding: clamp(36px, 5vw, 64px);
    position: relative;
}
.luxe-diagnosis-wrap::before {
    content: '';
    position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
}
.diagnosis-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid var(--luxe-hair-strong);
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.diagnosis-tabs .tab-btn {
    flex: 1; min-width: 110px;
    padding: 16px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s var(--luxe-ease);
}
.diagnosis-tabs .tab-btn:hover { color: var(--luxe-ink); }
.diagnosis-tabs .tab-btn.active {
    color: var(--luxe-champagne-dark);
    border-bottom-color: var(--luxe-champagne);
}

.diag-start { text-align: center; padding: 24px 0; }
.diag-start h4 {
    font-family: var(--serif); font-size: clamp(26px, 3vw, 38px);
    font-weight: 300; margin-bottom: 18px;
    color: var(--luxe-ink); letter-spacing: -0.01em;
}
.diag-start p {
    color: var(--luxe-ink-soft); font-size: 15px; margin-bottom: 36px;
    max-width: 46ch; margin-left: auto; margin-right: auto;
}
.diag-icon {
    width: 72px; height: 72px;
    margin: 0 auto 32px;
    display: grid; place-items: center;
    border: 1px solid var(--luxe-hair-gold);
    color: var(--luxe-champagne-dark);
    font-size: 22px;
}
.diag-icon i { line-height: 1; }
.start-diag-btn,
.diag-result .restart-btn,
.diag-result .booking-btn,
.luxe-diagnosis-wrap .btn-primary,
.luxe-diagnosis-wrap .btn-outline {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    font-family: var(--sans); font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid var(--luxe-ink);
    background: var(--luxe-ink); color: var(--luxe-paper);
    cursor: pointer;
    transition: all 0.5s var(--luxe-ease);
    text-decoration: none;
}
.start-diag-btn:hover,
.luxe-diagnosis-wrap .btn-primary:hover {
    background: var(--luxe-champagne);
    border-color: var(--luxe-champagne);
    color: var(--luxe-ink);
}
.diag-result .restart-btn,
.luxe-diagnosis-wrap .btn-outline {
    background: transparent;
    color: var(--luxe-ink);
}
.diag-result .restart-btn:hover {
    border-color: var(--luxe-champagne);
    color: var(--luxe-champagne-dark);
}

.diag-progress-bar {
    height: 2px; background: var(--luxe-hair);
    margin-bottom: 32px;
    position: relative;
}
.diag-progress-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: var(--luxe-champagne);
    transition: width 0.5s var(--luxe-ease);
}
.diag-step {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    margin-bottom: 16px;
}
.diag-question-text {
    font-family: var(--serif); font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 300;
    color: var(--luxe-ink); margin-bottom: 32px;
    letter-spacing: -0.01em; line-height: 1.32;
}
.diag-options { display: flex; flex-direction: column; gap: 12px; }
.diag-option-btn {
    text-align: left;
    padding: 18px 22px;
    background: var(--luxe-paper);
    border: 1px solid var(--luxe-hair);
    color: var(--luxe-ink);
    font-family: var(--sans); font-size: 14.5px; line-height: 1.6;
    cursor: pointer;
    transition: all 0.4s var(--luxe-ease);
}
.diag-option-btn:hover {
    background: var(--luxe-white);
    border-color: var(--luxe-champagne);
    padding-left: 28px;
}

.diag-result { text-align: center; }
.diag-result .result-header {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.30em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    margin-bottom: 18px;
}
.diag-result .result-type {
    font-family: var(--serif); font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 300; margin-bottom: 22px;
    color: var(--luxe-ink); letter-spacing: -0.01em;
}
.diag-result .result-desc {
    color: var(--luxe-ink-soft);
    font-size: 15px; max-width: 52ch;
    margin: 0 auto 32px;
}
.diag-result .result-box {
    padding: 22px;
    background: var(--luxe-bone);
    border: 1px solid var(--luxe-hair);
    margin-bottom: 32px;
}
.diag-result .disclaimer {
    font-size: 13px; color: var(--luxe-ink-soft);
    line-height: 1.8;
}
.diag-result .disclaimer i {
    color: var(--luxe-champagne-dark);
    margin-right: 8px;
}
.diag-result .result-actions {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.fade-in { animation: luxe-fade-in 0.5s var(--luxe-ease); }
@keyframes luxe-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ============ DIET PREDICTION ============ */
.luxe-predict-wrap {
    max-width: 980px;
    margin: 0 auto;
    background: var(--luxe-white);
    border: 1px solid var(--luxe-hair-strong);
    padding: clamp(36px, 5vw, 64px);
    position: relative;
}
.luxe-predict-wrap::before {
    content: '';
    position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
}
.luxe-predict-form {
    display: grid;
    gap: 28px;
}
.luxe-predict-gender {
    display: flex; gap: 28px; align-items: center;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--luxe-hair);
}
.luxe-predict-gender > .label {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
}
.luxe-predict-gender label.opt {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
    font-family: var(--serif); font-size: 18px; font-weight: 300;
    color: var(--luxe-ink);
}
.luxe-predict-gender input[type="radio"] {
    appearance: none;
    width: 16px; height: 16px;
    border: 1px solid var(--luxe-hair-strong);
    border-radius: 50%;
    margin: 0;
    position: relative;
    cursor: pointer;
}
.luxe-predict-gender input[type="radio"]:checked {
    border-color: var(--luxe-champagne);
}
.luxe-predict-gender input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--luxe-champagne);
}
.luxe-predict-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 720px) {
    .luxe-predict-row { grid-template-columns: 1fr; }
}
#calculateDietBtn {
    margin-top: 12px;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 18px 32px;
    font-family: var(--sans); font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid var(--luxe-ink);
    background: var(--luxe-ink); color: var(--luxe-paper);
    cursor: pointer;
    transition: all 0.5s var(--luxe-ease);
}
#calculateDietBtn:hover {
    background: var(--luxe-champagne);
    border-color: var(--luxe-champagne);
    color: var(--luxe-ink);
}

.prediction-result {
    display: none;
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--luxe-hair-strong);
}
.prediction-result.active { display: block; }
.prediction-result h4 {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 24px;
    letter-spacing: -0.005em;
}
.luxe-predict-chart {
    position: relative;
    height: clamp(280px, 38vh, 380px);
    padding: 12px;
    background: var(--luxe-paper);
    border: 1px solid var(--luxe-hair);
    margin-bottom: 32px;
}
.luxe-predict-summary {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 720px) {
    .luxe-predict-summary { grid-template-columns: 1fr; }
}
.luxe-predict-card {
    padding: 26px;
    background: var(--luxe-bone);
    border: 1px solid var(--luxe-hair);
    position: relative;
}
.luxe-predict-card::before {
    content: '';
    position: absolute; top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
}
.luxe-predict-card .eyebrow {
    margin-bottom: 14px;
}
.luxe-predict-card .num {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(36px, 5vw, 56px);
    color: var(--luxe-ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums oldstyle-nums;
}
.luxe-predict-card .sub {
    margin-top: 14px;
    font-family: var(--sans); font-size: 13px;
    color: var(--luxe-ink-soft);
}
.luxe-predict-card .sub strong {
    font-family: var(--serif); font-weight: 400; font-size: 16px;
    color: var(--luxe-ink); letter-spacing: 0.02em;
}
.luxe-predict-disclaimer {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--luxe-hair);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    line-height: 1.85;
}

/* ============ REVIEWS — search + carousel ============ */
.luxe-review-search {
    max-width: 520px;
    margin: 0 auto 56px;
    position: relative;
}
.luxe-review-search input {
    width: 100%;
    padding: 16px 48px 16px 18px;
    background: var(--luxe-white);
    border: 1px solid var(--luxe-hair-strong);
    border-radius: 0;
    font-family: var(--serif); font-size: 17px; font-weight: 300;
    color: var(--luxe-ink); letter-spacing: -0.005em;
    transition: border-color 0.4s var(--luxe-ease);
    outline: none;
}
.luxe-review-search input::placeholder {
    color: var(--luxe-ink-muted); font-style: italic;
}
.luxe-review-search input:focus { border-color: var(--luxe-champagne); }
.luxe-review-search::after {
    content: '⌕';
    position: absolute; top: 50%; right: 18px;
    transform: translateY(-50%);
    color: var(--luxe-ink-muted); font-size: 20px;
    pointer-events: none;
}

.luxe-review-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(24px, 5vw, 72px);
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--luxe-hair-strong) transparent;
}
.luxe-review-track::-webkit-scrollbar { height: 4px; }
.luxe-review-track::-webkit-scrollbar-thumb { background: var(--luxe-hair-strong); }
.luxe-review-track::-webkit-scrollbar-track { background: transparent; }

.luxe-review-card {
    flex: 0 0 clamp(280px, 30vw, 360px);
    scroll-snap-align: start;
    padding: 30px 28px;
    background: var(--luxe-white);
    border: 1px solid var(--luxe-hair);
    display: flex; flex-direction: column;
    transition: transform 0.4s var(--luxe-ease), box-shadow 0.4s var(--luxe-ease);
    position: relative;
    box-shadow: var(--luxe-shadow-card);
}
.luxe-review-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; bottom: -1px; right: -1px;
    border: 1px solid var(--luxe-ink);
    opacity: 0; transition: opacity 0.35s var(--luxe-ease);
    pointer-events: none;
}
.luxe-review-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--luxe-shadow-card-hover);
}
.luxe-review-card:hover::before { opacity: 1; }
.luxe-review-card .stars {
    color: var(--luxe-champagne);
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
.luxe-review-card .body {
    flex: 1;
    font-family: var(--serif); font-size: 16px; font-weight: 300;
    color: var(--luxe-ink); line-height: 1.7;
    letter-spacing: -0.005em;
    margin-bottom: 24px;
    font-style: italic;
}
.luxe-review-card .body mark {
    background: rgba(201,168,118,0.22);
    color: var(--luxe-champagne-dark);
    padding: 0 2px;
}
.luxe-review-card .keywords {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 20px;
}
.luxe-review-card .keywords span {
    padding: 3px 9px;
    font-family: var(--mono); font-size: 9.5px;
    letter-spacing: 0.18em;
    color: var(--luxe-champagne-dark);
    border: 1px solid var(--luxe-hair-gold);
    text-transform: uppercase;
}
.luxe-review-card .meta {
    padding-top: 18px;
    border-top: 1px solid var(--luxe-hair);
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 8px; flex-wrap: wrap;
}
.luxe-review-card .meta .who {
    font-family: var(--serif); font-size: 14px; color: var(--luxe-ink);
    font-style: italic;
}
.luxe-review-card .meta .when {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
}
.luxe-review-noresult {
    width: 100%; padding: 56px 24px; text-align: center;
    font-family: var(--serif); font-size: 18px; font-weight: 300;
    color: var(--luxe-ink-muted); font-style: italic;
}

/* ============ BA STORY MODAL — 보건소 컨펌 완료 (2026-05-15) ============ */
.luxe-ba-card { cursor: pointer; }

.luxe-story-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(10, 31, 46, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: clamp(16px, 4vw, 56px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--luxe-ease), visibility 0s linear 0.4s;
}
.luxe-story-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s var(--luxe-ease), visibility 0s linear 0s;
}

.luxe-story-card {
    position: relative;
    width: 100%;
    max-width: 1100px;
    background: var(--luxe-paper);
    border: 1px solid var(--luxe-hair-strong);
    margin: auto;
    animation: luxe-story-rise 0.5s var(--luxe-ease);
}
@keyframes luxe-story-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}
.luxe-story-card::before {
    content: '';
    position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px;
    border: 1px solid var(--luxe-hair);
    pointer-events: none;
    z-index: 1;
}

.luxe-story-close {
    position: absolute; top: 18px; right: 18px; z-index: 4;
    width: 40px; height: 40px;
    background: var(--luxe-paper);
    border: 1px solid var(--luxe-hair-strong);
    cursor: pointer;
    transition: all 0.4s var(--luxe-ease);
    display: grid; place-items: center;
}
.luxe-story-close::before,
.luxe-story-close::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 16px; height: 1px;
    background: var(--luxe-ink);
    transform-origin: center;
}
.luxe-story-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.luxe-story-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.luxe-story-close:hover {
    background: var(--luxe-ink);
    border-color: var(--luxe-ink);
}
.luxe-story-close:hover::before,
.luxe-story-close:hover::after {
    background: var(--luxe-champagne);
}

.luxe-story-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    position: relative;
    z-index: 2;
}
.luxe-story-figure {
    aspect-ratio: 1/1;
    background: var(--luxe-bone);
    overflow: hidden;
    position: relative;
}
.luxe-story-figure img {
    width: 100%; height: 100%; object-fit: cover;
}
.luxe-story-figure::after {
    content: 'BEFORE · AFTER';
    position: absolute; top: 18px; left: 18px;
    padding: 5px 10px;
    background: var(--luxe-paper);
    font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    border: 1px solid var(--luxe-hair-gold);
}

.luxe-story-text {
    padding: clamp(32px, 4vw, 56px);
    display: flex; flex-direction: column;
}
.luxe-story-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 12px;
    margin-bottom: 24px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.26em;
    color: var(--luxe-champagne-dark); text-transform: uppercase;
    border: 1px solid var(--luxe-hair-gold);
}
.luxe-story-title {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(26px, 3vw, 38px);
    color: var(--luxe-ink); letter-spacing: -0.01em;
    line-height: 1.16;
    margin-bottom: 16px;
}
.luxe-story-profile {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--luxe-hair);
    margin-bottom: 26px;
}
.luxe-story-desc {
    font-family: var(--sans); font-size: 14.5px; line-height: 1.85;
    color: var(--luxe-ink-soft);
    white-space: pre-line;
    margin-bottom: 26px;
}
.luxe-story-result {
    padding: 22px;
    background: var(--luxe-bone);
    border-left: 2px solid var(--luxe-champagne);
    font-family: var(--serif); font-size: 16px; line-height: 1.7;
    color: var(--luxe-ink); font-style: italic;
    margin-bottom: 26px;
}
.luxe-story-disclaimer {
    padding-top: 18px;
    border-top: 1px solid var(--luxe-hair);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
    color: var(--luxe-ink-muted); text-transform: uppercase;
    line-height: 1.85;
    margin-bottom: 22px;
}
.luxe-story-cta {
    margin-top: auto;
    display: flex; gap: 12px; flex-wrap: wrap;
}
.luxe-story-cta a {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 26px;
    font-family: var(--sans); font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: 1px solid var(--luxe-ink);
    background: var(--luxe-ink); color: var(--luxe-paper);
    transition: all 0.5s var(--luxe-ease);
    flex: 1; min-width: 160px;
}
.luxe-story-cta a:hover {
    background: var(--luxe-champagne);
    border-color: var(--luxe-champagne);
    color: var(--luxe-ink);
}
.luxe-story-cta a.outline {
    background: transparent;
    color: var(--luxe-ink);
}
.luxe-story-cta a.outline:hover {
    border-color: var(--luxe-champagne);
    color: var(--luxe-champagne-dark);
    background: transparent;
}

@media (max-width: 820px) {
    .luxe-story-modal { padding: 0; }
    .luxe-story-card { max-width: 100%; min-height: 100vh; }
    .luxe-story-grid { grid-template-columns: 1fr; }
    .luxe-story-figure { aspect-ratio: 4/3; }
}
body.story-open { overflow: hidden; }