@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

/* ==========================================================================
   Pretendard 가변 폰트 (한글 본문용)
   ========================================================================== */
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');font-weight:300;font-display:swap;}
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face {font-family:'Pretendard';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap;}

/* ==========================================================================
   NEXON Lv1 Gothic (각 섹션별 타이틀 텍스트 전용 폰트)
   ========================================================================== */
@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NexonLv1Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* ==========================================================================
   Seoul Hangang (특정 강조 문구 전용 폰트)
   ========================================================================== */
@font-face {
    font-family: 'SeoulHangang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulHangangM.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* ==========================================================================
   Design Tokens (:root)
   ========================================================================== */
:root {
  --color-white: #ffffff;
  --color-bg-sub: #f8f8f8;
  --color-navy: #1f1f2c;
  --color-navy-deep: #14141b;
  --color-panel-dark: #1e2433;
  --color-silver: #efefef;
  --color-text-black: #111111;
  --color-text-gray: #666666;
  --color-text-gray-light: #999999;
  --color-text-invert: #ffffff;
  --color-text-invert-sub: #c7c9d4;
  --color-border: #e5e5e5;
  --color-border-dark: #333850;
  --color-gold: #c8a35c;
  --color-gold-light: #b7bae7;
  --color-gold-dark: #68688c;
  --color-panel-cream: #f4f0e6;
  --color-success: #2e7d46;
  --color-rose-gold: #d9a8a0;
  --color-rose-gold-light: #eec9bf;
  --color-champagne: #e8d3a5;
  --font-en: 'Marcellus', 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
  --font-kr: 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
  --font-title: 'NexonLv1Gothic', 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
  --font-accent: 'SeoulHangang', 'Pretendard', 'Malgun Gothic', dotum, sans-serif;
  --fs-hero: 4.21875rem;
  --fs-h2: 2.8125rem;
  --fs-h3: 1.71875rem;
  --fs-h4: 1.40625rem;
  --fs-lead: 1.40625rem;
  --fs-body: 1.00rem;
  --fs-small: 1.00rem;
  --fs-badge: 1.015625rem;
  --section-gap: 200px;
  --container-max: 1400px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --header-h: 88px;
  --header-total-h: 124px;
}

/* ==========================================================================
   Base
   ========================================================================== */
html {scroll-behavior:smooth;word-break:keep-all;}
body {font-size:var(--fs-body);font-family:var(--font-kr);color:var(--color-text-black);background:var(--color-white);line-height:1.7;overflow-x:hidden;}
h1, h2, h3 {font-family:var(--font-kr);color:var(--color-navy);font-weight:700;line-height:1.35;}
img {max-width:100%;height:auto;display:block;}
a {color:inherit;}
button {font-family:var(--font-kr);}
.section-inner {max-width:var(--container-max);margin:0 auto;padding:0 40px;}
section {position:relative;}
.is-hidden-visually {position:absolute;width:1px;height:1px;overflow:hidden;font-size:0;line-height:0;}

/* ==========================================================================
   Skip Nav (reset id 재활용)
   ========================================================================== */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;background:var(--color-navy);color:var(--color-white);}

/* GNB/시술배너 클릭 시 앵커 이동 지점이 고정 헤더에 가려지지 않도록 스크롤 여백 확보 */
#clinic-intro, #section-lifting, #section-collagen, #section-vip, #section-eye, #section-nose, #why-title, #area-title, #trademark-section, #column-section, #faq-section, #location-strip {scroll-margin-top:var(--header-total-h);}
/* 위 섹션 중 상단에 --section-gap(200px) 여백을 가진 섹션들은 섹션 박스의 top이
   실제 보이는 콘텐츠보다 그만큼 위에 있다. 헤더 높이만큼만 띄우면 빈 여백만
   보이므로, 여백을 상쇄하고 헤더 아래 40px만 남도록 음수로 보정한다.
   (js/scroll-animations.js가 이 값을 그대로 읽어 쓰므로 여기 40px만 조절하면 된다.) */
#clinic-intro, #trademark-section, #column-section, #faq-section {scroll-margin-top:calc(var(--header-total-h) + 40px - var(--section-gap));}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:70px;font-size:1.5625rem;font-weight:700;text-align:center;line-height:70px;}

/* ==========================================================================
   Reveal Animation (공통 스크롤 리빌)
   - 기존 IntersectionObserver 기반 트랜지션은 그대로 유지하며,
     .gsap-ready(GSAP 로드 성공 시 부여)가 있으면 GSAP/ScrollTrigger가
     동일한 .reveal-up 대상을 더 정교한 스태거로 제어하도록 전환된다.
     GSAP 로드가 실패해도 기존 방식이 폴백으로 항상 동작한다.
   ========================================================================== */
.reveal-up {opacity:1;transform:none;}
.js-ready .reveal-up {opacity:0;transform:translateY(30px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1);transition-delay:var(--delay,0s);}
.js-ready .reveal-up.is-inview {opacity:1;transform:translateY(0);}
/* GSAP가 활성화되면 CSS 트랜지션 기반 리빌은 끄고 GSAP 타임라인에게 전권을 넘긴다 (중복 애니메이션/떨림 방지) */
.gsap-ready .reveal-up {transition:none;}

/* ==========================================================================
   Smooth Inertia Scrolling (Lenis)
   ========================================================================== */
html.lenis {height:auto;}
.lenis.lenis-smooth {scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior:contain;}
.lenis.lenis-stopped {overflow:hidden;}

/* ==========================================================================
   Parallax Depth Effect (레이어 속도 차등 이동)
   - 기존 배경 장식 요소(링 그래픽ㆍ메쉬ㆍ광원)를 그대로 대상으로 사용하며,
     이동값(transform)은 js/scroll-animations.js의 GSAP ScrollTrigger가 부여한다.
     will-change로 GPU 가속만 미리 예약해 스크롤 시 리페인트 부담을 줄인다.
   ========================================================================== */
.signature-bg-rings, .hero-bg-rings, .mesh-graphic, .hero-bg-glow {will-change:transform;}

/* ==========================================================================
   Active Card Scroll Focus (스크롤 중앙 통과 카드 하이라이트)
   - 새로운 클래스를 추가하지 않고 기존 카드 클래스 그대로에 .is-focus 상태만
     js/scroll-animations.js(ScrollTrigger toggleClass)로 부여한다.
   ========================================================================== */
.special-card, .trademark-tile, .check-point-item {transition:box-shadow 0.5s ease,transform 0.5s ease;}
.special-card.is-focus, .trademark-tile.is-focus, .check-point-item.is-focus {box-shadow:0 0 0 1px rgba(104,104,140,0.55),0 14px 28px rgba(104,104,140,0.14);transform:scale(1.01);}
.area-tile.is-focus {transform:scale(1.01);}
.area-tile.is-focus:before {box-shadow:inset 0 0 0 1px rgba(104,104,140,0.6),0 0 18px rgba(104,104,140,0.28);}

/* 성능/접근성: 모션 최소화를 선호하는 사용자는 모든 스크롤 모션 효과를 비활성화 */
@media (prefers-reduced-motion:reduce) {
  .reveal-up, .js-ready .reveal-up {transition:none !important;opacity:1 !important;transform:none !important;}
  .signature-bg-rings, .hero-bg-rings, .mesh-graphic, .hero-bg-glow {transform:none !important;}
}

/* ==========================================================================
   공통 타이틀 클래스 (유지보수: 한 곳만 수정하면 전체 반영)
   ========================================================================== */
.eyebrow {display:inline-block;margin:0 0 16px;padding:6px 18px;border:1px solid var(--color-gold-dark);border-radius:30px;font-size:var(--fs-badge);font-weight:600;color:var(--color-gold-dark);background:var(--color-panel-cream);}
.section-title {font-family:var(--font-title);font-size:var(--fs-h2);text-align:center;margin:0 auto 18px;}
.section-title-invert {font-family:var(--font-title);font-size:var(--fs-h2);text-align:center;margin:0 auto 18px;color:var(--color-text-invert);}
.section-title-sm {font-family:var(--font-title);font-size:var(--fs-h4);margin:0 0 14px;}
.section-subtitle {max-width:720px;margin:0 auto 56px;text-align:center;font-size:var(--fs-lead);color:var(--color-text-gray);}
@media (min-width:769px) {
  .feature-subtitle {max-width:none;white-space:nowrap;}
  .compare-subtitle {max-width:none;white-space:nowrap;}
}
.compare-subtitle-accent {font-weight:700;color:#ffffff;}
.collagen-lineup-subtitle-dark {font-weight:700;color:#111111;}
.title-accent {color:var(--color-gold-dark);}
.highlight-text {padding:16px 20px;border-left:3px solid var(--color-gold-dark);background:rgba(104,104,140,0.08);color:var(--color-gold-dark);font-weight:400;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-family:var(--font-accent);}
.highlight-text-dark {color:#111111;}
.font-accent {font-family:var(--font-accent);}
.intro-title-bold {font-weight:700;}
.intro-title-thin {font-weight:300;}

/* ==========================================================================
   공통 스티키 요소 - Header / GNB
   ========================================================================== */
.site-header {position:fixed;top:0;left:0;width:100%;z-index:999999;background:#ffffff;transition:box-shadow 0.3s ease,background 0.3s ease;}
.site-header.is-scrolled {box-shadow:0 6px 24px rgba(17,17,17,0.08);}
.header-topbar {background:var(--color-navy);}
.header-topbar-inner {max-width:var(--container-max);margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:flex-end;height:36px;}
.lang-select {position:relative;}
.lang-toggle {display:flex;align-items:center;gap:6px;height:40px;padding:0 14px;background:transparent;border:0;color:var(--color-text-invert-sub);font-size:var(--fs-small);letter-spacing:normal;cursor:pointer;}
.lang-toggle i {font-size:0.875rem;transition:transform 0.25s ease;}
.lang-select.is-open .lang-toggle i {transform:rotate(180deg);}
.lang-select.is-open .lang-toggle {color:var(--color-gold-light);}
.lang-menu {position:absolute;top:36px;right:0;min-width:130px;background:var(--color-navy-deep);border:1px solid var(--color-border-dark);border-radius:0 0 var(--radius-sm) var(--radius-sm);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s ease;z-index:9;}
.lang-select.is-open .lang-menu {opacity:1;visibility:visible;transform:translateY(0);}
.lang-menu li a {display:block;padding:10px 16px;font-size:var(--fs-small);color:var(--color-text-invert-sub);}
.lang-menu li a:hover {color:var(--color-gold-light);background:rgba(255,255,255,0.05);}
.header-main {max-width:1720px;margin:0 auto;padding:0 24px;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.logo {display:flex;flex-direction:column;line-height:1.1;flex-shrink:0;}
.logo-en {font-family:var(--font-en);font-size:1.1875rem;color:var(--color-navy);white-space:nowrap;}
.logo-kr {font-size:0.75rem;color:var(--color-gold-dark);font-weight:600;white-space:nowrap;}
.logo img{width: 230px;height: auto;}
.gnb {flex:1 1 auto;display:flex;justify-content:center;min-width:0;}
.gnb-list {display:flex;align-items:center;gap:clamp(4px,1.0vw,16px);flex-wrap:nowrap;}
.gnb-list > li {position:relative;flex-shrink:0;}
.gnb-list > li > a {display:inline-block;padding:8px 1px;font-size:clamp(0.75rem,1.05vw,1.05rem);font-weight:600;color:var(--color-text-black);position:relative;white-space:nowrap;}
.gnb-list > li > a:after {content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--color-gold-dark);transition:width 0.3s ease;}
.gnb-list > li:hover > a:after, .gnb-list > li.active > a:after {width:100%;}
.gnb-list > li.active > a {color:var(--color-gold-dark);}
.header-actions {display:flex;align-items:center;gap:12px;flex-shrink:0;}
.header-tel {display:flex;align-items:center;gap:6px;font-family:var(--font-kr);font-size:20px;font-weight:800;color:var(--color-gold-dark);white-space:nowrap;}
.header-tel i {color:var(--color-gold-dark);font-size:0.85em;}
.mobile-menu-btn {display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer;}
.mobile-menu-btn span {display:block;width:24px;height:2px;background:var(--color-navy);transition:transform 0.3s ease,opacity 0.3s ease;}
.mobile-menu-btn.is-active span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
.mobile-menu-btn.is-active span:nth-child(2) {opacity:0;}
.mobile-menu-btn.is-active span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
.mobile-nav-backdrop {position:fixed;inset:0;background:rgba(17,17,17,0.5);opacity:0;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;z-index:400;}
.mobile-nav-backdrop.is-open {opacity:1;visibility:visible;}

/* ==========================================================================
   공통 스티키 요소 - Quick Bar (플로팅 퀵메뉴)
   ========================================================================== */
.quick-bar {position:fixed;right:24px;bottom:32px;z-index:600;display:flex;flex-direction:column;align-items:flex-end;gap:14px;}
.quick-toggle {display:flex;align-items:center;gap:10px;height:56px;padding:0 22px;border:0;border-radius:32px;background:var(--color-navy);color:var(--color-text-invert);font-size:var(--fs-small);font-weight:700;cursor:pointer;box-shadow:0 10px 26px rgba(31,31,44,0.35);transition:background 0.3s ease,transform 0.3s ease;}
.quick-toggle:hover {background:var(--color-gold-dark);transform:translateY(-2px);}
.quick-toggle i {font-size:1.25rem;transition:transform 0.3s ease;}
.quick-bar.is-open .quick-toggle i {transform:rotate(135deg);}
.quick-panel {max-height:0;overflow:hidden;width:220px;background:rgba(30,36,51,0.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);box-shadow:0 20px 45px rgba(17,17,17,0.25);transition:max-height 0.4s ease,opacity 0.3s ease;opacity:0;}
/* 항목이 12개로 늘어나면서 기존 560px 제한에 걸려 내부 스크롤이 생기던 문제를 해결:
   실제 12개 항목이 모두 들어가고도 여유가 있는 값(900px)으로 넉넉하게 늘려
   펼침 트랜지션 애니메이션은 유지하면서 스크롤 없이 전체 목록이 한 번에 다 보이도록 한다. */
.quick-bar.is-open .quick-panel {max-height:900px;opacity:1;overflow-y:visible;}
.quick-panel li a, .quick-panel li button {display:flex;align-items:center;gap:12px;width:100%;padding:12px 20px;border:0;background:transparent;color:var(--color-text-invert-sub);font-size:var(--fs-small);text-align:left;cursor:pointer;transition:color 0.25s ease,background 0.25s ease;}
.quick-panel li a i, .quick-panel li button i {width:20px;text-align:center;font-size:1.40625rem;color:var(--color-gold-light);transition:transform 0.25s ease,color 0.25s ease;}
.quick-panel li a:hover, .quick-panel li button:hover {color:var(--color-text-invert);background:rgba(104,104,140,0.14);}
.quick-panel li a:hover i, .quick-panel li button:hover i {color:var(--color-gold-dark);transform:scale(1.15);}
.quick-icon-line {display:inline-block;width:20px;height:20px;flex-shrink:0;background-color:var(--color-gold-light);-webkit-mask:url('../images/line-icon-mono.svg') center/contain no-repeat;mask:url('../images/line-icon-mono.svg') center/contain no-repeat;transition:transform 0.25s ease,background-color 0.25s ease;}
.quick-panel li button:hover .quick-icon-line {background-color:var(--color-gold-dark);transform:scale(1.15);}

.btn-top {position:fixed;right:24px;bottom:100px;width:52px;height:52px;border:1px solid var(--color-gold-light);border-radius:50%;background:var(--color-white);color:var(--color-navy);font-size:1.25rem;cursor:pointer;box-shadow:0 10px 22px rgba(17,17,17,0.15);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity 0.3s ease,visibility 0.3s ease,transform 0.3s ease,background 0.3s ease,color 0.3s ease;z-index:590;}
.btn-top.is-visible {opacity:1;visibility:visible;transform:translateY(0);}
.btn-top:hover {background:var(--color-navy);color:var(--color-white);}
.quick-toast {position:fixed;left:50%;bottom:110px;transform:translate(-50%,10px);padding:12px 22px;background:var(--color-navy);color:var(--color-white);border-radius:30px;font-size:var(--fs-small);opacity:0;visibility:hidden;transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s ease;z-index:700;}
.quick-toast.is-visible {opacity:1;visibility:visible;transform:translate(-50%,0);}

/* ==========================================================================
   공통 상담 모달
   ========================================================================== */
.modal {position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity 0.3s ease,visibility 0.3s ease;}
.modal.is-open {visibility:visible;opacity:1;}
.modal-backdrop {position:absolute;inset:0;background:rgba(17,17,17,0.6);}
.modal-dialog {position:relative;z-index:2;width:min(440px,88vw);max-height:86vh;overflow-y:auto;padding:44px 36px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:0 30px 60px rgba(17,17,17,0.3);transform:translateY(24px);transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);}
.modal.is-open .modal-dialog {transform:translateY(0);}
.modal-close {position:absolute;top:18px;right:18px;width:36px;height:36px;border:0;border-radius:50%;background:var(--color-bg-sub);color:var(--color-text-gray);font-size:1.25rem;cursor:pointer;}
.modal-close:hover {background:var(--color-navy);color:var(--color-white);}
.modal-title {font-size:1.875rem;margin:0 0 10px;}
.modal-desc {color:var(--color-text-gray);margin:0 0 26px;font-size:var(--fs-small);}
.consult-form .form-row {margin:0 0 16px;}
.consult-form label {display:block;margin:0 0 8px;font-size:var(--fs-small);font-weight:600;color:var(--color-navy);}
.consult-form input[type="text"], .consult-form input[type="tel"] {width:100%;height:48px;padding:0 16px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--fs-body);background:var(--color-bg-sub);}
.consult-form input[type="text"]:focus, .consult-form input[type="tel"]:focus {border-color:var(--color-gold-dark);background:var(--color-white);}
.form-agree label {display:flex;align-items:center;gap:8px;font-weight:400;color:var(--color-text-gray);}
.form-agree input {width:16px;height:16px;}
.btn-submit-consult {width:100%;height:52px;border:0;border-radius:var(--radius-sm);background:var(--color-navy);color:var(--color-white);font-size:var(--fs-body);font-weight:700;cursor:pointer;transition:background 0.3s ease;}
.btn-submit-consult:hover {background:var(--color-gold-dark);}
.modal-result {min-height:24px;margin:14px 0 0;font-size:var(--fs-small);color:var(--color-success);font-weight:600;}

/* QR코드 스캔 모달 (위챗/라인) */
.qr-modal-dialog {width:min(360px,88vw);text-align:center;padding:44px 32px 38px;}
.qr-modal-title {display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 8px;}
.qr-modal-title i {color:var(--color-gold-dark);font-size:1.875rem;}
.qr-modal-code {width:220px;height:220px;margin:24px auto 18px;padding:14px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 12px 30px rgba(17,17,17,0.1);}
.qr-modal-code img {display:block;width:100%;height:100%;object-fit:contain;}
.qr-modal-id {margin:0;font-size:var(--fs-small);font-weight:700;color:var(--color-gold-dark);}
.modal-alt-actions {display:flex;gap:10px;margin-top:22px;padding-top:22px;border-top:1px solid var(--color-border);}
.btn-alt-call, .btn-alt-kakao {flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:var(--radius-sm);font-size:var(--fs-small);font-weight:700;text-decoration:none;}
.btn-alt-call {border:1px solid var(--color-navy);color:var(--color-navy);}
.btn-alt-kakao {background:#fee500;color:#3c1e1e;}

/* ==========================================================================
   Hero Section (3D 실리프팅)
   ========================================================================== */
.hero-3d {min-height:100vh;min-height:calc(var(--vh,1vh) * 100);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,#282c40 0%,var(--color-navy) 45%,var(--color-navy-deep) 100%);overflow:hidden;text-align:center;}
.hero-bg-glow {position:absolute;inset:0;background:radial-gradient(600px circle at var(--x,50%) var(--y,35%),rgba(104,104,140,0.28),rgba(104,104,140,0) 70%);pointer-events:none;transition:background 0.2s ease;}
.hero-bg-rings {position:absolute;top:50%;left:50%;width:1000px;height:1000px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(239,239,239,0.08);pointer-events:none;}
.hero-bg-rings:before, .hero-bg-rings:after {content:"";position:absolute;inset:80px;border-radius:50%;border:1px solid rgba(239,239,239,0.06);}
.hero-bg-rings:after {inset:180px;border-color:rgba(104,104,140,0.12);}
.hero-inner {position:relative;z-index:2;padding:0 24px;}
.hero-badge {display:inline-block;margin:0 0 28px;padding:10px 24px;border:1px solid var(--color-gold-dark);border-radius:30px;color:var(--color-gold-light);font-size:var(--fs-small);font-weight:600;}
.hero-title {font-family:var(--font-title);font-size:var(--fs-hero);color:var(--color-text-invert);margin:0 0 26px;}
.hero-title-accent {display:inline-block;margin-top:10px;color:var(--color-gold-light);font-style:normal;font-size:62.5px;}
.hero-subtitle {max-width:680px;margin:0 auto;font-size:var(--fs-lead);color:var(--color-text-invert-sub);line-height:1.9;}
.hero-subtitle-bold-white {font-weight:700;color:#ffffff;}
.hero-scroll-indicator {display:flex;flex-direction:column;align-items:center;gap:10px;margin:60px auto 0;color:var(--color-text-invert-sub);font-size:var(--fs-badge);font-family:var(--font-en);}
.hero-scroll-indicator span {display:block;width:1px;height:36px;background:linear-gradient(to bottom,var(--color-gold-dark),transparent);animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine {0% {opacity:0.2;transform:scaleY(0.3);} 50% {opacity:1;transform:scaleY(1);} 100% {opacity:0.2;transform:scaleY(0.3);}}

/* 상세 서브페이지 공통 상단 배너 (기존 100vh 히어로를 축소한 재사용형) */
.hero-banner {min-height:0;height:420px;padding:calc(var(--header-h) + 20px) 0 0;}
.hero-banner .hero-title {font-size:2.8125rem;margin:0 0 18px;}
.hero-banner .hero-subtitle {font-size:var(--fs-small);line-height:1.8;}
.hero-banner .hero-bg-rings {width:640px;height:640px;}

/* 3D 실리프팅 상세 배너 - 화면 전체를 50:50 수직 분할 (좌:텍스트 / 우:풀블리드 이미지) */
.hero-banner-split {height:750px;padding:0;text-align:left;overflow:hidden;}
.hero-banner-split .hero-bg-glow {clip-path:inset(0 50% 0 0);}
.hero-split-grid {position:relative;z-index:2;width:100%;max-width:none;height:100%;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.hero-split-text {display:flex;flex-direction:column;justify-content:center;height:100%;text-align:left;padding:var(--header-h) 56px 0 max(40px,calc((100vw - var(--container-max)) / 2 + 40px));transform:translateY(-40px);}
.hero-split-text .hero-title, .hero-split-text .hero-subtitle {margin-left:0;margin-right:0;text-align:left;max-width:520px;}
.hero-split-media {position:relative;height:100%;overflow:hidden;background:var(--color-navy);}
.hero-split-media img {width:100%;height:100%;object-fit:cover;display:block;}
.hero-split-media-placeholder {position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(135deg,#20263a 0%,var(--color-navy-deep) 100%);color:var(--color-text-invert-sub);}
.hero-split-media-placeholder i {font-size:2.8125rem;color:var(--color-gold-dark);opacity:0.75;}
.hero-split-media-placeholder span {font-size:var(--fs-small);letter-spacing:0.02em;}

/* 히어로 텍스트 하단 아이콘+키워드 리스트 (2가지, 세로 배열: 원형 아이콘 위 / 키워드 아래) */
.hero-icon-keyword-list {list-style:none;margin:28px 0 0;padding:0;display:flex;gap:36px;}
.hero-icon-keyword-list li {display:flex;flex-direction:column;align-items:center;gap:12px;}
.hero-icon-keyword-list li i {display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:1px solid rgba(183,186,231,0.4);background:rgba(255,255,255,0.04);color:var(--color-gold-light);font-size:2.03125rem;}
.hero-icon-keyword-list li span {color:var(--color-text-invert-sub);font-size:1.171875rem;font-weight:600;white-space:nowrap;}

/* ==========================================================================
   Feature Grid (핵심 특징 4가지)
   ========================================================================== */
.feature-section {padding:var(--section-gap) 0;background:var(--color-white);}
.feature-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;margin:0;padding:0;}
.feature-card {position:relative;padding:36px 26px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);text-align:left;transition:transform 0.35s ease,box-shadow 0.35s ease,border-color 0.35s ease;}
.feature-card:hover {transform:translateY(-6px) scale(1.02);border-color:var(--color-gold-dark);box-shadow:0 24px 40px rgba(104,104,140,0.18);}
.feature-num {display:inline-block;margin:0 0 22px;font-family:var(--font-en);font-size:2.5rem;color:var(--color-gold-dark);}
.feature-card h3 {font-size:var(--fs-h4);margin:0 0 12px;}
.feature-card p {margin:0;font-size:var(--fs-small);color:var(--color-text-gray);}

/* ==========================================================================
   Mechanism Section (3D Mesh & 고정점)
   ========================================================================== */
.mechanism-section {padding:var(--section-gap) 0;background:var(--color-bg-sub);}
.mechanism-grid {display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
.mechanism-cards .section-title {text-align:left;margin:0 0 36px;}
.mechanism-card {padding:32px;margin:0 0 24px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);}
.mechanism-card h3 {font-size:var(--fs-h3);margin:0 0 16px;color:var(--color-gold-dark);}
.mechanism-card p {margin:0 0 14px;color:var(--color-text-gray);font-size:var(--fs-small);}
.mechanism-card p:last-child {margin-bottom:0;}
.mechanism-visual {position:relative;}
.mesh-graphic {position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px rgba(31,31,44,0.2);}
.mesh-graphic img {width:100%;height:560px;object-fit:cover;}
.mesh-pulse-ring {position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:2px solid var(--color-gold-light);border-radius:50%;animation:meshPulse 3s ease-out infinite;}
.mesh-pulse-ring.ring2 {animation-delay:1.5s;}
@keyframes meshPulse {0% {transform:scale(1);opacity:0.7;} 100% {transform:scale(3.2);opacity:0;}}

/* ==========================================================================
   Lip Special Section (3D 입술 실리프팅)
   ========================================================================== */
.lip-special-section {padding:var(--section-gap) 0;background:rgba(231,231,241,0.5);color:var(--color-navy);text-align:left;}
.lip-split {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.lip-text {text-align:left;}
.lip-title {font-size:var(--fs-h2);text-align:left;margin:0 0 22px;color:var(--color-navy);}
.lip-lead {font-size:1.71875rem;color:var(--color-gold-dark);margin:0 0 18px;font-weight:400;font-family:var(--font-accent);}
.lip-lead i {margin:0 10px;color:var(--color-text-gray);}
.lip-desc {color:var(--color-text-gray);font-size:var(--fs-lead);margin:0 0 36px;line-height:1.9;}
.badge-list {display:flex;justify-content:flex-start;gap:16px;list-style:none;margin:0 0 40px;padding:0;flex-wrap:wrap;}
.point-badge {padding:12px 26px;border:1px solid var(--color-gold-light);border-radius:30px;font-size:var(--fs-small);font-weight:600;color:var(--color-gold-light);background:rgba(183,186,231,0.08);}
.lip-special-section .point-badge {border-color:var(--color-gold-dark);color:var(--color-gold-dark);background:rgba(104,104,140,0.08);}
.lip-conclusion {font-size:1.5625rem;font-weight:700;color:var(--color-navy);margin:0;}
.lip-image {position:relative;height:600px;border-radius:var(--radius-lg);overflow:hidden;margin:0;}
.lip-image img {width:100%;height:100%;object-fit:cover;display:block;}

/* ==========================================================================
   Why Choose Us
   ========================================================================== */
.why-section {padding:var(--section-gap) 0;background:var(--color-white);}
.why-layout {display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center;margin-top:56px;position:relative;}
.why-layout::after{content:"";display:block;position:absolute;left:-13%;top:-15%;width:30%;background-image:url(../images/logo_bg.png);background-size:cover;opacity:0.05;aspect-ratio:27/8;}
.why-image {margin:0;border-radius:var(--radius-lg);overflow:hidden;position:relative;box-shadow:0 30px 60px rgba(31,31,44,0.18);position:relative;z-index:1;}
.why-image img {width:100%;height:620px;object-fit:cover;}
.why-image figcaption {position:absolute;left:0;bottom:0;width:100%;padding:24px 28px;background:linear-gradient(to top,rgba(20,20,27,0.85),transparent);color:var(--color-text-invert);font-family:var(--font-en);font-size:1.40625rem;}
.why-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;}
.why-card {display:flex;gap:22px;padding:28px;border:1px solid var(--color-border);border-radius:var(--radius-md);transition:transform 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease;}
.why-card:hover {transform:translateY(-4px) scale(1.01);border-color:var(--color-gold-dark);box-shadow:0 20px 40px rgba(104,104,140,0.14);}
.why-num {flex-shrink:0;font-family:var(--font-en);font-size:3.4375rem;color:var(--color-gold-dark);line-height:1;}
.why-card h3 {font-size:var(--fs-h4);margin:0 0 10px;}
.why-card p {margin:0;font-size:var(--fs-small);color:var(--color-text-gray);}

/* ==========================================================================
   Target Area Grid (추천 시술 부위)
   ========================================================================== */
.area-section {padding:var(--section-gap) 0;background:var(--color-bg-sub);}
.area-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;margin:0;padding:0;}
.area-grid-7 {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;list-style:none;margin:0;padding:0;}
.area-grid-7 .area-tile {flex:0 0 calc(25% - 15px);}
.area-grid-5 {display:flex;flex-wrap:wrap;justify-content:center;gap:20px;list-style:none;margin:0;padding:0;}
.area-grid-5 .area-tile {flex:0 0 calc(20% - 16px);}
.area-tile {position:relative;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1/1;cursor:pointer;}
.area-tile img {width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease,filter 0.5s ease;}
.area-tile:before {content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,27,0.78) 0%,rgba(20,20,27,0.15) 55%,rgba(20,20,27,0) 100%);z-index:1;transition:box-shadow 0.4s ease;}
.area-tile span {position:absolute;left:18px;bottom:16px;z-index:2;color:var(--color-text-invert);font-size:var(--fs-body);font-weight:700;}
.area-tile:hover img {transform:scale(1.08);filter:brightness(1.05);}
.area-tile:hover:before {box-shadow:inset 0 0 0 2px var(--color-gold-dark),0 0 32px rgba(104,104,140,0.55);}

/* ==========================================================================
   Recore Hero / Concept
   ========================================================================== */
.recore-hero-section {padding:var(--section-gap) 0;background:var(--color-white);text-align:center;}
.recore-hero-section .section-inner {max-width:var(--container-max);}
.recore-lead {font-size:var(--fs-lead);color:var(--color-text-gray);margin:0 auto 16px;line-height:1.6;max-width:820px;}
@media (min-width:769px) {
  .recore-lead {max-width:none;white-space:nowrap;}
}
.mini-badge-list {display:flex;justify-content:center;gap:14px;flex-wrap:wrap;list-style:none;margin:36px 0 0;padding:0;}
.mini-badge-list li {padding:10px 22px;border-radius:30px;background:var(--color-navy);color:var(--color-text-invert);font-size:1.25rem;font-weight:600;}

/* ==========================================================================
   Recore Mechanism & Data Visualization
   ========================================================================== */
.recore-mech-subtitle {font-size:28.75px;color:#68688c;font-weight:400;line-height:1.6;margin:32px auto 0;max-width:820px;font-family:var(--font-accent);}
@media (min-width:769px) {
  .recore-mech-subtitle {max-width:none;white-space:nowrap;}
}
.data-visual-grid {display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:36px 0 0;}
.data-card {margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-border);background:var(--color-bg-sub);transition:transform 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease;}
.data-card:hover {transform:scale(1.02);border-color:var(--color-gold-dark);box-shadow:0 16px 32px rgba(0,0,0,0.08);}
.data-card img {width:100%;height:320px;object-fit:cover;}
.data-card figcaption {padding:18px 22px;font-size:var(--fs-small);color:var(--color-text-gray);white-space:normal;}

/* ==========================================================================
   Comparison Table
   ========================================================================== */
.compare-section {padding:var(--section-gap) 0;background:#f8f8f8;color:var(--color-navy);}
.compare-section .section-title-invert {color:var(--color-navy);}
.compare-subtitle-accent {font-weight:700;color:var(--color-navy);}
.compare-table-wrap {position:relative;margin-top:40px;}
.compare-table {width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;}
.compare-table caption {position:absolute;width:1px;height:1px;overflow:hidden;font-size:0;}
.compare-table th, .compare-table td {padding:20px 24px;text-align:center;font-size:var(--fs-small);border-bottom:1px solid var(--color-border);}
.compare-table thead th {padding:24px;font-size:var(--fs-h4);font-family:var(--font-en);border-bottom:2px solid var(--color-gold-dark);}
.compare-table tbody th {text-align:left;color:var(--color-text-gray);font-weight:600;background:rgba(31,31,44,0.03);}
.compare-table .col-old {color:var(--color-text-gray);}
.compare-table .col-new {color:var(--color-gold-dark);font-weight:700;background:rgba(104,104,140,0.08);}
.compare-table thead .col-new {background:transparent;}

/* ==========================================================================
   Recore Special 3 Point Cards
   ========================================================================== */
.recore-special-section {padding:var(--section-gap) 0;background:var(--color-white);}
.recore-special-section #recore-special-title {margin-bottom:40px;}
.special-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:28px;list-style:none;margin:0;padding:0;}
.special-card {padding:40px 32px;border-radius:var(--radius-lg);border:1px solid var(--color-border);text-align:left;transition:transform 0.35s ease,box-shadow 0.35s ease,border-color 0.35s ease;}
.special-card:hover {transform:translateY(-6px) scale(1.02);border-color:var(--color-gold-dark);box-shadow:0 26px 46px rgba(104,104,140,0.18);}
.special-num {display:block;font-family:var(--font-en);font-size:3.125rem;color:var(--color-gold-dark);margin:0 0 18px;}
.special-card h3 {font-size:var(--fs-h4);margin:0 0 14px;}
.special-card p {margin:0;font-size:var(--fs-small);color:var(--color-text-gray);}

/* ==========================================================================
   Location Strip (오시는 길ㆍ상담 문의 - 좌우 정확히 50:50 분할)
   좌측: 지도 iframe 영역(풀블리드, 세로 가장자리까지 꽉 채움)
   우측: 주소/진료시간/전화 정보 + 액션 버튼 3개(전화상담/카톡상담/빠른 상담 신청)
   ========================================================================== */
.location-strip {padding:0;background:var(--color-white);color:var(--color-text-black);}
.location-strip-inner {display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:800px;}
.location-strip-map {position:relative;margin:0;overflow:hidden;background:var(--color-bg-sub);}
.location-strip-map iframe {position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(0.15);}
.location-strip-text {display:flex;flex-direction:column;justify-content:center;padding:60px max(56px,calc((100vw - var(--container-max)) / 2 + 40px)) 60px 56px;}
.location-strip-text .section-title-sm {color:var(--color-navy);margin:0 0 36px;}
.location-info-group {margin:0 0 30px;padding:0 0 30px;border-bottom:1px solid var(--color-border);}
.location-info-group:last-of-type {border-bottom:0;padding-bottom:0;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.location-info-label {display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.71875rem;font-weight:700;color:var(--color-navy);}
.location-info-label i {color:var(--color-gold-dark);width:18px;text-align:center;font-size:1.328125rem;}
.location-info-text {margin:0;font-size:var(--fs-small);line-height:1.7;color:var(--color-text-gray);}
.location-tel a {color:var(--color-gold-dark);font-weight:800;font-size:2.96875rem;line-height:1.2;letter-spacing:0.01em;}
.location-strip-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;}
.btn-line-call, .btn-line-kakao, .btn-line-modal {display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border-radius:30px;font-size:var(--fs-small);font-weight:700;text-decoration:none;cursor:pointer;border:0;white-space:nowrap;}
.btn-line-call {border:1px solid var(--color-gold-dark);color:var(--color-gold-dark);background:transparent;}
.btn-line-kakao {background:#fee500;color:#3c1e1e;}
.btn-line-modal {background:var(--color-gold-dark);color:var(--color-navy-deep);}
.btn-line-call:hover, .btn-line-kakao:hover, .btn-line-modal:hover {opacity:0.88;}

/* ==========================================================================
   Main Visual (홈페이지 메인 비주얼)
   ========================================================================== */
.main-visual {position:relative;height:100vh;height:calc(var(--vh,1vh) * 100);min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;text-align:left;background:var(--color-navy-deep);}
.mv-media {position:absolute;inset:0;z-index:0;}
.mv-media img {width:100%;height:100%;object-fit:cover;object-position:center 8%;transform-origin:center 8%;transform:scale(1.03);animation:mvZoom 16s ease-in-out infinite alternate;}
.mv-media video {width:100%;height:100%;object-fit:cover;object-position:center 8%;}
.mv-fallback-img {display:none;}
/* 모바일 브라우저는 대용량 배경 영상의 자동재생/버퍼링 실패가 잦아, 기본값으로는
   정지 이미지를 보여주고(mv-video-ready 미부여 상태) 실제로 영상 재생이 정상
   시작된 경우에만 JS가 <html> 에 mv-video-ready 클래스를 부여해 영상으로 전환합니다. */
@media (max-width:768px) {
  /* 모바일 전용 영상(main-visual_m.mp4)은 세로 비율이므로 중앙 기준으로 정렬 */
  .mv-media video {display:none;object-position:center center;}
  .mv-fallback-img {display:block;width:100%;height:100%;object-fit:cover;object-position:center 8%;}
  .mv-video-ready .mv-media video {display:block;}
  .mv-video-ready .mv-fallback-img {display:none;}
}
@keyframes mvZoom {0% {transform:scale(1.03);} 100% {transform:scale(1.09);}}
.mv-media-overlay {position:absolute;inset:0;/*background:linear-gradient(180deg,rgba(20,20,27,0.55) 0%,rgba(20,20,27,0.35) 45%,rgba(20,20,27,0.75) 100%);*/}
.mv-inner {position:relative;z-index:2;padding:0 8vw;margin-left:100px;max-width:720px;color:var(--color-text-invert);}
.mv-anim {opacity:1;transform:none;}
.js-ready .mv-anim {opacity:0;/*transform:translateY(36px);*/transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1),transform 1.1s cubic-bezier(0.22,1,0.36,1);transition-delay:var(--delay,0s);}
.js-ready .main-visual.is-inview .mv-anim, .js-ready .mv-anim.is-inview {opacity:1;transform:translateY(0);}
.mv-title {font-family:var(--font-en);font-size:4.375rem;line-height:1.25;font-weight:400;margin:0 0 26px;color:#ffffff;text-shadow:0 4px 24px rgba(0,0,0,0.35);white-space:nowrap;}
@media (min-width:769px) {
  .mv-title {margin-top:60px;}
}
.mv-subtitle {max-width:none;margin:0 0 40px;font-family:var(--font-kr);font-size:1.328125rem;line-height:1.7;color:#ffffff;white-space:nowrap;}
.mv-cta {display:inline-flex;align-items:center;gap:12px;padding:16px 34px;border:1px solid #ffffff;border-radius:40px;color:var(--color-text-invert);font-weight:600;font-size:var(--fs-small);transition:background 0.35s ease,transform 0.35s ease,color 0.35s ease;}
.mv-cta:hover {background:var(--color-gold-dark);color:var(--color-navy-deep);transform:translateY(-3px);}
.mv-cta i {font-size:0.8rem;transition:transform 0.3s ease;}
.mv-cta:hover i {transform:translateY(3px);}
.mv-scroll-indicator {position:absolute;left:calc(50% - 25px);bottom:36px;/*transform:translateX(-50%);*/z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--color-text-invert-sub);font-size:var(--fs-badge);font-family:var(--font-en);}
.mv-scroll-indicator span {display:block;width:1px;height:36px;background:linear-gradient(to bottom,var(--color-gold-dark),transparent);animation:scrollLine 2s ease-in-out infinite;}

/* ==========================================================================
   1-1) 소개 영상 (YouTube Video Embed)
   ========================================================================== */
.intro-video-section {padding:200px 0 40px;background:var(--color-white);}
.intro-video-inner {max-width:1200px;margin:0 auto;padding:0 40px;position:relative;z-index:1;}
.intro-video-wrap {position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;}
.intro-video-wrap iframe {position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1;}

/* 리코어 영상 2~7번: 영상 사이사이 위아래 간격 40px */
.intro-video-section.recore-video-mid {padding:40px 0;}
/* 리코어 영상 8번(마지막): 위쪽은 40px 유지, 아래쪽만 200px */
.intro-video-section.recore-video-last {padding:40px 0 200px;}
/* 눈성형 특별한 이유 영상: 위쪽 100px, 아래쪽 200px */
.intro-video-section.eye-video-pad200 {padding:100px 0 200px;}
/* 코성형 핵심 POINT 영상 1(첫번째): 위쪽 200px, 아래쪽 40px */
.intro-video-section.nose-check-video-first {padding:200px 0 40px;}
.intro-video-section.nose-check-video-first .intro-video-inner::after{content:"";display:block;position:absolute;right:-7%;top:-16%;width:35%;background-image:url(../images/logo_bg.png);background-size:cover;opacity:0.05;aspect-ratio:27/8;}
/* 코성형 핵심 POINT 영상 2(마지막): 위쪽 40px, 아래쪽 100px */
.intro-video-section.nose-check-video-last {padding:40px 0 100px;}

/* ==========================================================================
   아이러브강남의원 소개 (Clinic Intro)
   ========================================================================== */
.clinic-intro {position:relative;padding:var(--section-gap) 0 0;background:var(--color-white);overflow:hidden;}
.intro-split {max-width:var(--container-max);margin:0 auto;padding:0 40px 100px;display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:center;}
.intro-image {margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px rgba(31,31,44,0.2);}
.intro-image img {width:100%;height:600px;object-fit:cover;}
.intro-content{position:relative;}
.intro-content::after{content:"";display:block;position:absolute;right:3%;top:-8%;width:63%;background-image:url(../images/logo_bg.png);background-size:cover;opacity:0.05;aspect-ratio:27/8;}
.intro-subtitle {font-family:var(--font-en);color:var(--color-gold-dark);font-size:var(--fs-lead);margin:0 0 14px;}
.intro-title {font-family:var(--font-title);font-size:var(--fs-h2);line-height:1.45;margin:0 0 26px;}
.intro-body {color:var(--color-text-gray);font-size:var(--fs-lead);line-height:1.9;margin:0 0 40px;}
.intro-point-list {display:flex;gap:16px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.intro-point-list li {display:flex;align-items:center;gap:10px;padding:14px 22px;border:1px solid var(--color-border);border-radius:30px;font-size:var(--fs-small);font-weight:600;color:var(--color-navy);transition:border-color 0.3s ease,transform 0.3s ease,box-shadow 0.3s ease;}
.intro-point-list li:hover {border-color:var(--color-gold-dark);transform:translateY(-3px);box-shadow:0 12px 26px rgba(104,104,140,0.18);}
.intro-point-icon {display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--color-panel-cream);color:var(--color-gold-dark);font-size:1.015625rem;}

/* 하단 무한 마퀴 텍스트 띠 */
.intro-marquee {width:100%;overflow:hidden;background:rgba(231,231,241,0.5);padding:22px 0;}
.intro-marquee-track {display:flex;width:max-content;animation:marqueeScroll 26s linear infinite;}
.intro-marquee-track span {display:inline-block;white-space:nowrap;font-family:var(--font-en);font-size:1.875rem;color:var(--color-gold-light);opacity:0.85;padding-right:12px;}
@keyframes marqueeScroll {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}}

/* ==========================================================================
   시술 설명 배너 (Signature Banner - Custom 3D Coverflow Carousel)
   Swiper.js coverflow 모드는 슬라이드가 5장뿐일 때 loop 모드에서 복제본이
   부족해 순서가 꼬이거나 카드가 잘리는 구조적 버그가 있어, 동일한 3D 카드
   디자인/틸트 효과를 유지한 채 자체 JS 캐러셀(js/home.js)로 교체했습니다.
   ========================================================================== */
.signature-banner {position:relative;padding:var(--section-gap) 0;background:var(--color-bg-sub);overflow:hidden;}
.signature-bg-rings {position:absolute;top:44%;left:50%;width:900px;height:900px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(104,104,140,0.18);pointer-events:none;z-index:0;}
.signature-bg-rings:before, .signature-bg-rings:after {content:"";position:absolute;inset:70px;border-radius:50%;border:1px solid rgba(31,31,44,0.06);}
.signature-bg-rings:after {inset:150px;border-color:rgba(104,104,140,0.12);}
.signature-title {font-family:var(--font-title);font-size:3.125rem;text-align:center;margin:0 0 14px;letter-spacing:normal;}
.signature-swiper-wrap {position:relative;z-index:1;width:100%;max-width:var(--container-max);margin:56px auto 0;padding:0 64px;display:flex;align-items:center;justify-content:center;gap:0;}
.signature-carousel {position:relative;width:100%;height:460px;perspective:1800px;-webkit-user-select:none;user-select:none;touch-action:pan-y;cursor:grab;}
.signature-carousel:active {cursor:grabbing;}
.signature-track {position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.signature-slide {position:absolute;top:50%;left:50%;width:340px;height:420px;margin:-210px 0 0 -170px;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;will-change:transform,opacity;transition:transform 0.6s cubic-bezier(0.22,0.61,0.36,1),opacity 0.6s ease,z-index 0s;}
.signature-slide-inner {position:relative;width:100%;height:100%;padding:44px 32px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(150deg,var(--color-navy) 0%,var(--color-navy-deep) 100%) center/cover no-repeat;border-radius:var(--radius-lg);color:var(--color-text-invert);box-shadow:0 30px 60px rgba(17,17,17,0.3);text-align:left;overflow:hidden;transition:box-shadow 0.4s ease;}
.signature-slide-inner:before {content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,31,64,0.28) 0%,rgba(31,31,64,0.5) 100%);z-index:0;}
.signature-slide[data-href="#section-lifting"] .signature-slide-inner {background-image:url('../images/signature-lifting-v2.jpg');}
.signature-slide[data-href="#section-collagen"] .signature-slide-inner {background-image:url('../images/signature-collagen-v2.jpg');}
.signature-slide[data-href="#section-vip"] .signature-slide-inner {background-image:url('../images/signature-vip-v2.jpg');}
.signature-slide[data-href="#section-eye"] .signature-slide-inner {background-image:url('../images/signature-eye-v2.jpg');}
.signature-slide[data-href="#section-nose"] .signature-slide-inner {background-image:url('../images/signature-nose-v2.jpg');}
.signature-slide-eyebrow {font-family:var(--font-en);font-size:1.171875rem;color:var(--color-gold-light);margin:0 0 14px;position:relative;z-index:1;}
.signature-slide-inner h3 {font-size:2.03125rem;margin:0 0 16px;position:relative;z-index:1;color:#ffffff;}
.signature-slide-desc {font-size:var(--fs-small);color:#f4f4f4;line-height:1.8;margin:0 0 26px;position:relative;z-index:1;}
.signature-slide-link {display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);font-weight:600;color:var(--color-gold-light);position:relative;z-index:1;}
.signature-slide.is-active .signature-slide-inner {box-shadow:0 40px 80px rgba(104,104,140,0.32);}
.signature-nav {flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-white);color:var(--color-navy);font-size:1.25rem;cursor:pointer;box-shadow:0 10px 22px rgba(17,17,17,0.1);transition:background 0.3s ease,color 0.3s ease,border-color 0.3s ease;z-index:5;}
.signature-nav:hover {background:var(--color-navy);color:var(--color-white);border-color:var(--color-navy);}
.signature-pagination {position:relative;z-index:1;display:flex;justify-content:center;gap:8px;margin-top:12px;}
.signature-pagination .signature-pagination-bullet {width:26px;height:3px;border-radius:2px;background:var(--color-border);opacity:1;margin:0;padding:0;border:0;cursor:pointer;transition:background 0.3s ease,width 0.3s ease;}
.signature-pagination .signature-pagination-bullet.is-active {background:var(--color-gold-dark);width:40px;}


/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {background:var(--color-navy-deep);color:var(--color-text-invert-sub);padding:44px 0;}
.footer-inner {max-width:var(--container-max);margin:0 auto;padding:0 40px;text-align:center;}
/*.footer-logo {font-family:var(--font-en);font-size:1.5625rem;color:var(--color-text-invert);margin:0 0 14px;}*/
.footer-logo{width:280px;height: auto;margin:0 auto 14px;}
.footer-address {font-size:var(--fs-small);line-height:1.9;margin:0 0 14px;font-style:normal;}
.footer-copy {font-size:var(--fs-badge);color:#5c6072;margin:0;}

/* ==========================================================================
   [Phase 2] 3D 콜라겐 부스터 - 공통 요소 (골드 픽셀 라인 / 로즈골드 포인트)
   ========================================================================== */
.hero-title-accent-rose {color:var(--color-gold-light);}

/* 콜라겐 히어로 배너 서브헤딩 - 라운드 박스 없이 큰 글씨 2줄 */
#section-collagen .hero-lead-text {margin:0 0 20px;font-size:1.875rem;font-weight:400;line-height:1.5;color:#b7bae7;font-family:var(--font-accent);}
/* 이미지 영역 하단에 배치되는 4가지 키워드 뱃지 (화이트 컬러) */
.hero-media-badge-list {position:absolute;left:0;bottom:0;width:100%;margin:0;padding:28px 40px;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start;background:linear-gradient(to top,rgba(20,20,27,0.85),transparent);}
.point-badge-white {border-color:rgba(255,255,255,0.6);color:var(--color-white);background:rgba(255,255,255,0.08);}

/* ==========================================================================
   [Phase 2] 콜라겐 시술 원리 & 핵심 기술 (2단 다크 섹션)
   ========================================================================== */
.collagen-mechanism-section {padding:var(--section-gap) 0;background:#ffffff;color:var(--color-text-black);}
.collagen-mechanism-grid {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.collagen-mechanism-text {text-align:left;position:relative;}
.collagen-mechanism-title {text-align:left;margin:0 0 22px;color:var(--color-navy);}
.collagen-mechanism-desc {font-size:var(--fs-lead);line-height:1.9;color:var(--color-text-gray);margin:0;}
.collagen-tech-card {position:relative;padding:44px 38px;border-radius:var(--radius-lg);background:var(--color-navy);border:1px solid rgba(104,104,140,0.25);box-shadow:0 30px 60px rgba(31,31,44,0.18);}
.collagen-tech-card::after{content:"";display:block;position:absolute;right:-15%;top:-23%;width:48%;background-image:url(../images/logo_bg.png);background-size:cover;opacity:0.05;aspect-ratio:27/8;}
.collagen-tech-card-label {display:inline-block;margin:0 0 24px;font-family:var(--font-en);font-size:var(--fs-badge);letter-spacing:0.12em;color:var(--color-gold-light);}
.collagen-tech-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.collagen-tech-list li {display:flex;align-items:flex-start;gap:14px;font-size:var(--fs-small);line-height:1.8;color:var(--color-text-invert-sub);}
.collagen-tech-list li i {flex-shrink:0;margin-top:3px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(183,186,231,0.14);color:var(--color-gold-light);font-size:0.9375rem;}
.collagen-mechanism-visual {grid-column:1/-1;margin:56px 0 0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 60px rgba(31,31,44,0.15);}
.collagen-mechanism-visual img {width:100%;height:320px;object-fit:cover;display:block;}

/* ==========================================================================
   [Phase 2] 콜라겐 부스터 라인업 (6종 프리미엄 카드 슬라이더)
   ========================================================================== */
.collagen-lineup-section {padding:var(--section-gap) 0;background:var(--color-bg-sub);overflow:hidden;}
.collagen-lineup-section .section-title-invert {color:var(--color-navy);}
@media (min-width:769px) {
  .collagen-lineup-section .section-subtitle {max-width:none;white-space:nowrap;}
}
.collagen-lineup-wrap {position:relative;max-width:1252px;margin:56px auto 0;padding:0 76px;display:flex;align-items:center;gap:0;}
.collagen-lineup-swiper {width:100%;max-width:1100px;padding-bottom:56px;overflow:hidden;}
.lineup-slide {height:auto;width:1100px;max-width:100%;}
.lineup-card {position:relative;margin:0;height:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-white);border:1px solid var(--color-border);transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),border-color 0.45s ease;}
.lineup-card-media {position:relative;overflow:hidden;min-height:280px;}
.lineup-card-media img {width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease;}
.lineup-card figcaption {padding:36px 38px;display:flex;flex-direction:column;justify-content:center;text-align:left;}
.lineup-eyebrow {display:inline-block;margin:0 0 12px;font-size:18px;font-weight:600;color:var(--color-gold-dark);font-family:var(--font-accent);}
.lineup-card h3 {font-size:1.875rem;margin:0 0 14px;color:var(--color-navy);}
.lineup-card p {margin:0;font-size:var(--fs-small);line-height:1.8;color:var(--color-text-gray);}
.lineup-slide:hover .lineup-card, .lineup-slide.swiper-slide-active .lineup-card {transform:scale(1.02);}
.lineup-slide:hover .lineup-card-media img {transform:scale(1.08);}
.lineup-nav {flex-shrink:0;width:52px;height:52px;border-radius:50%;border:1px solid var(--color-gold-dark);background:var(--color-white);color:var(--color-gold-dark);font-size:1.25rem;cursor:pointer;transition:background 0.3s ease,border-color 0.3s ease,transform 0.3s ease,color 0.3s ease;z-index:2;}
.lineup-nav:hover {background:var(--color-gold-dark);color:var(--color-white);border-color:var(--color-gold-dark);transform:scale(1.06);}
.lineup-prev, .vip-lineup-prev {position:absolute;left:8px;top:calc(50% - 28px);}
.lineup-next, .vip-lineup-next {position:absolute;right:8px;top:calc(50% - 28px);}
.collagen-lineup-pagination {position:absolute;left:0;bottom:8px;width:100%;display:flex;justify-content:center;gap:8px;}
.collagen-lineup-pagination .swiper-pagination-bullet {width:10px;height:10px;border-radius:50%;background:var(--color-border);opacity:1;margin:0;transition:background 0.3s ease,transform 0.3s ease;}
.collagen-lineup-pagination .swiper-pagination-bullet-active {background:var(--color-gold-dark);transform:scale(1.2);}

/* ==========================================================================
   [Phase 2] 콜라겐 특별한 이유 / 추천 시술 부위 - 다크 테마 오버라이드
   ========================================================================== */
.collagen-special-section {background:#ffffff;}
.collagen-special-section .special-num {color:var(--color-gold-dark);}
.collagen-special-section #collagen-special-title {margin-bottom:40px;}
.collagen-special-title {font-weight:400;font-size:32px;}
.collagen-special-title .title-accent {font-weight:700;font-size:45px;}
.collagen-area-section {background:#f8f8f8;}

/* ==========================================================================
   [Phase 4] VIP 안티에이징 - 공통 (골드 아웃라인 뱃지 호버)
   ========================================================================== */
#section-vip .hero-lead-text {margin:0 0 20px;font-size:1.875rem;font-weight:700;line-height:1.5;color:var(--color-gold-light);}
.vip-badge-list .point-badge {border-color:rgba(255,255,255,0.6);color:#ffffff;background:rgba(255,255,255,0.08);transition:background 0.35s ease,color 0.35s ease,transform 0.35s ease,box-shadow 0.35s ease,border-color 0.35s ease;}
.vip-badge-list .point-badge:hover {background:var(--color-gold-dark);color:var(--color-navy-deep);border-color:var(--color-gold-dark);transform:translateY(-4px);box-shadow:0 16px 34px rgba(104,104,140,0.4);}

/* ==========================================================================
   [Phase 4] VIP 안티에이징 - 브랜드 철학 및 컨셉 (2단 분할 + 글래스모피즘 이미지 패널)
   ========================================================================== */
.vip-philosophy-section {padding:var(--section-gap) 0;background:var(--color-white);}
.vip-philosophy-grid {display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:center;}
.vip-philosophy-text {text-align:left;}
.vip-philosophy-catch {display:inline-block;margin:0 0 20px;font-family:var(--font-accent);font-size:1.875rem;font-style:normal;font-weight:600;color:#68688c;line-height:1.5;}
.vip-philosophy-title {text-align:left;margin:0 0 26px;color:var(--color-navy);}
.vip-philosophy-body {font-size:var(--fs-lead);line-height:1.9;color:var(--color-text-gray);margin:0 0 26px;}
.vip-philosophy-highlight {margin:0;font-size:1.484375rem;font-weight:400;line-height:1.7;}
.vip-philosophy-media {position:relative;}
.vip-glass-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.vip-glass-card {position:relative;margin:0;border-radius:var(--radius-md);overflow:hidden;background:rgba(255,255,255,0.06);border:1px solid rgba(104,104,140,0.35);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 44px rgba(0,0,0,0.35);transition:transform 0.4s cubic-bezier(0.22,1,0.36,1),box-shadow 0.4s ease;}
.vip-glass-card:hover {transform:translateY(-6px);box-shadow:0 28px 56px rgba(104,104,140,0.28);}
.vip-glass-card.vip-glass-offset {margin-top:50px;}
.vip-glass-card img {width:100%;height:520px;object-fit:cover;display:block;}
.vip-glass-card figcaption {position:absolute;left:0;bottom:0;width:100%;padding:16px 18px;background:linear-gradient(to top,rgba(20,20,27,0.85),transparent);color:#ffffff;font-size:var(--fs-badge);font-weight:600;}

/* ==========================================================================
   [Phase 4] VIP 안티에이징 - 프로그램 라인업 (9종 프리미엄 카드 슬라이더)
   ========================================================================== */
.vip-lineup-section {padding:var(--section-gap) 0;background:#f8f8f8;overflow:hidden;}
.vip-lineup-section .section-title-invert {color:var(--color-navy);}
.vip-lineup-section .section-subtitle {color:var(--color-text-gray);}
@media (min-width:769px) {
  .vip-lineup-section .section-subtitle {max-width:none;white-space:nowrap;}
}
.vip-lineup-wrap {position:relative;max-width:1252px;margin:56px auto 0;padding:0 76px;display:flex;align-items:center;gap:0;}
.vip-lineup-swiper {width:100%;max-width:1100px;padding-bottom:56px;overflow:hidden;}
.vip-lineup-pagination {position:absolute;left:0;bottom:8px;width:100%;display:flex;justify-content:center;gap:8px;}
.vip-lineup-pagination .swiper-pagination-bullet {width:10px;height:10px;border-radius:50%;background:var(--color-border);opacity:1;margin:0;transition:background 0.3s ease,transform 0.3s ease;}
.vip-lineup-pagination .swiper-pagination-bullet-active {background:var(--color-gold-dark);transform:scale(1.2);}
.vip-lineup-section .lineup-card {background:var(--color-white);border-color:var(--color-border);box-shadow:none;}
.vip-lineup-section .lineup-card h3 {color:var(--color-navy);}
.vip-lineup-section .lineup-card p {color:var(--color-text-gray);}
.vip-lineup-section .lineup-eyebrow {color:var(--color-gold-dark);}
.vip-lineup-section .lineup-slide:hover .lineup-card, .vip-lineup-section .lineup-slide.swiper-slide-active .lineup-card {box-shadow:none;}
.vip-lineup-section .lineup-nav {background:var(--color-white);border-color:var(--color-gold-dark);color:var(--color-gold-dark);}
.vip-lineup-section .lineup-nav:hover {background:var(--color-gold-dark);color:var(--color-white);}

/* ==========================================================================
   [Phase 4] VIP 안티에이징 - 특별한 이유 (Why Choose Us)
   ========================================================================== */
.vip-special-section .special-num {color:var(--color-gold-dark);}
.vip-special-section #vip-special-title {margin-bottom:40px;}

/* ==========================================================================
   [Phase 4] VIP 안티에이징 - 추천 시술 부위 (5타일, 중앙 정렬 Flex-wrap)
   ========================================================================== */
.vip-area-section {background:#f8f8f8;}
@media (min-width:769px) {
  .vip-area-section .section-subtitle {max-width:none;white-space:nowrap;}
}

/* ==========================================================================
   [Phase 5] 비절개 눈성형 - 공통 (히어로 서브헤딩)
   ========================================================================== */
#section-eye .hero-lead-text {margin:0 0 20px;font-size:32px;font-weight:300;line-height:1.5;color:#b7bae7;font-family:var(--font-accent);}

/* ==========================================================================
   [Phase 5] 비절개 눈성형 - 솔루션 컨셉 배너 (풀블리드 배경 이미지 + 패럴랙스)
   - 배경 이미지는 어둡게 처리하는 오버레이 없이 원본 그대로 노출.
   - 텍스트를 감싸던 반투명 글래스모피즘 박스는 삭제하고, 텍스트에 그림자를
     주어 어떤 배경 위에서도 가독성을 확보.
   - background-attachment:fixed로 스크롤 시 배경 이미지는 화면에 고정되고
     텍스트(문서 흐름)만 위아래로 움직이는 패럴랙스 효과 적용.
   ========================================================================== */
.eye-concept-section {position:relative;height:550px;display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;overflow:hidden;}
.eye-concept-section .section-inner {position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 40px;}
.eye-concept-title {color:var(--color-text-invert);margin:0 0 24px;text-shadow:0 4px 18px rgba(0,0,0,0.55);}
@media (min-width:769px) {
  .eye-concept-title-nowrap {white-space:nowrap;}
}
.eye-concept-body {margin:0;font-size:var(--fs-lead);line-height:1.9;color:var(--color-text-invert);text-shadow:0 2px 12px rgba(0,0,0,0.6);}

/* ==========================================================================
   [Phase 5] 비절개 눈성형 - 비절개 눈수술 방법 라인업 (3종 프리미엄 카드 슬라이더)
   ========================================================================== */
.eye-lineup-section {padding:var(--section-gap) 0;background:var(--color-bg-sub);overflow:hidden;}
.eye-lineup-section .section-title-invert {color:var(--color-navy);}
.eye-lineup-section .section-subtitle {color:var(--color-text-gray);}
.eye-lineup-wrap {position:relative;max-width:1252px;margin:56px auto 0;padding:0 76px;display:flex;align-items:center;gap:0;}
.eye-lineup-swiper {width:100%;max-width:1100px;padding-bottom:56px;overflow:hidden;}
.eye-lineup-pagination {position:absolute;left:0;bottom:8px;width:100%;display:flex;justify-content:center;gap:8px;}
.eye-lineup-pagination .swiper-pagination-bullet {width:10px;height:10px;border-radius:50%;background:var(--color-border);opacity:1;margin:0;transition:background 0.3s ease,transform 0.3s ease;}
.eye-lineup-pagination .swiper-pagination-bullet-active {background:var(--color-gold-dark);transform:scale(1.2);}
.lineup-hashtag-list {display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0;}
.hashtag-badge {padding:7px 16px;border-radius:20px;border:1px solid rgba(104,104,140,0.4);background:rgba(183,186,231,0.14);color:var(--color-gold-dark);font-size:1.015625rem;font-weight:600;}
.eye-lineup-prev, .eye-lineup-next {position:absolute;top:calc(50% - 28px);}
.eye-lineup-prev {left:8px;}
.eye-lineup-next {right:8px;}

/* ==========================================================================
   [Phase 5] 비절개 눈성형 - 특별한 이유 (Why Choose Us)
   ========================================================================== */
.eye-special-section .special-num {color:var(--color-gold-dark);}
.eye-special-section #eye-special-title {margin-bottom:40px;}
.eye-special-title {font-weight:400;font-size:32px;}
.eye-special-title .title-accent {font-weight:700;font-size:45px;}
.nose-special-title {font-weight:400;font-size:32px;}
.nose-special-title .title-accent {font-weight:700;font-size:45px;}

/* ==========================================================================
   [Phase 6] 비절개 코성형 - 공통 (히어로 서브헤딩)
   ========================================================================== */
#section-nose .hero-lead-text {margin:0 0 20px;font-size:32px;font-weight:300;line-height:1.5;color:var(--color-gold-light);font-family:var(--font-accent);}

/* ==========================================================================
   [Phase 6] 비절개 코성형 - 핵심 소재 및 원리 (2종 프리미엄 카드 슬라이더)
   콜라겐 부스터 라인업(.collagen-lineup-section)과 동일한 구조를 재사용.
   ========================================================================== */
.nose-lineup-section {padding:var(--section-gap) 0;background:var(--color-bg-sub);overflow:hidden;}
.nose-lineup-section .section-title-invert {color:var(--color-navy);}
.nose-lineup-section .section-subtitle {color:var(--color-text-gray);}
.nose-lineup-line1 {font-weight:400;font-size:32px;}
.nose-lineup-wrap {position:relative;max-width:1252px;margin:56px auto 0;padding:0 76px;display:flex;align-items:center;gap:0;}
.nose-lineup-swiper {width:100%;max-width:1100px;padding-bottom:56px;overflow:hidden;}
.nose-lineup-pagination {position:absolute;left:0;bottom:8px;width:100%;display:flex;justify-content:center;gap:8px;}
.nose-lineup-pagination .swiper-pagination-bullet {width:10px;height:10px;border-radius:50%;background:var(--color-border);opacity:1;margin:0;transition:background 0.3s ease,transform 0.3s ease;}
.nose-lineup-pagination .swiper-pagination-bullet-active {background:var(--color-gold-dark);transform:scale(1.2);}
.nose-lineup-prev, .nose-lineup-next {position:absolute;top:calc(50% - 28px);}
.nose-lineup-prev {left:8px;}
.nose-lineup-next {right:8px;}
.nose-lineup-section .lineup-card {height:517px;}
.nose-lineup-section .lineup-card-media {min-height:517px;}

/* ==========================================================================
   [Phase 6] 비절개 코성형 - 핵심 포인트 체크 (3단계 리스트형 하이라이트 패널)
   신규 컴포넌트: 'CHECK' 넘버링을 샴페인 골드 컬러로 강조한 가독성 높은
   리스트형 패널. 섹션 상단 중앙에 타이틀을 배치하고, 그 아래로 정사각형
   아이콘 박스 + 텍스트가 가로로 나열된 3단계 체크 리스트를 배치한다.
   ========================================================================== */
.nose-check-section {padding:var(--section-gap) 0;background:rgba(231,231,241,0.5);color:var(--color-navy);}
.nose-check-head {max-width:820px;margin:0 auto 56px;text-align:center;}
.nose-check-eyebrow {display:inline-block;margin:0 0 20px;font-family:var(--font-accent);font-size:35px;font-style:italic;color:var(--color-gold-dark);line-height:1.5;}
.nose-check-title {text-align:center;margin:0;color:var(--color-navy);}
.nose-check-line1 {font-weight:400;font-size:32px;}
.check-icon-blue {color:#68688c;border-color:rgba(104,104,140,0.45);}
.check-num-blue {color:#68688c;}
.btn-consult-white {background:#68688c;color:#ffffff;}
.btn-consult-white:hover {opacity:0.88;}
.check-point-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;}
.check-point-item {display:flex;align-items:center;gap:30px;padding:34px 40px;border-radius:var(--radius-lg);background:#ffffff;border:1px solid rgba(31,31,44,0.12);box-shadow:0 10px 26px rgba(31,31,44,0.08);transition:transform 0.35s ease,border-color 0.35s ease,box-shadow 0.35s ease,background 0.35s ease;}
.check-point-item:hover {transform:translateY(-4px);border-color:rgba(31,31,44,0.28);background:#ffffff;box-shadow:0 24px 46px rgba(31,31,44,0.15);}
.check-icon {flex-shrink:0;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:var(--radius-sm);background:rgba(31,31,44,0.06);border:1px solid rgba(31,31,44,0.22);color:var(--color-navy);font-size:2.5rem;}
.check-point-body {flex:1;min-width:0;}
.check-num {display:inline-flex;align-items:baseline;gap:8px;margin:0 0 10px;font-family:var(--font-en);font-size:1.40625rem;font-weight:700;letter-spacing:0.08em;color:var(--color-navy);}
.check-num em {font-style:normal;font-size:2.1875rem;}
.check-point-item p {margin:0;font-size:var(--fs-lead);line-height:1.85;color:var(--color-text-gray);}

/* ==========================================================================
   [Phase 6] 비절개 코성형 - 특별한 이유 (Why Choose Us)
   ========================================================================== */
.nose-special-section .special-num {color:var(--color-gold-dark);}
.nose-special-section #nose-special-title {margin-bottom:40px;}

/* ==========================================================================
   [Phase 7] 아이러브강남의원 고유시술 상표등록 완료
   6개 특허증 이미지를 3열x2행 그리드로 배치(이미지 1개당 385x545px)
   ========================================================================== */
.trademark-section {padding:var(--section-gap) 0;background:#f8f8f8;}
#trademark-section .section-subtitle {max-width:1100px;}
@media (max-width:1024px) {
  #trademark-section .section-subtitle {white-space:normal;max-width:720px;}
}
.trademark-intro {max-width:820px;margin:0 auto 56px;text-align:center;}
.trademark-serif-title {font-family:var(--font-accent);font-weight:400;font-style:italic;font-size:34px;line-height:1.5;color:var(--color-gold-dark);margin:0 0 26px;}
.trademark-title-lg {font-family:var(--font-title);font-weight:700;font-size:var(--fs-h2);line-height:1.4;color:var(--color-gold-dark);margin:0 0 26px;}
.trademark-body {font-size:var(--fs-lead);line-height:1.85;color:var(--color-text-gray);margin:0 0 26px;}
.trademark-body:last-child {margin-bottom:0;}
.trademark-divider {width:1px;height:56px;background:var(--color-gold-dark);margin:8px auto 36px;opacity:0.6;}
.trademark-point {color:var(--color-gold-dark);font-weight:700;}
.trademark-emphasis-red {color:#994757;font-weight:700;}
.trademark-closing {max-width:820px;margin:56px auto 0;text-align:center;}

.trademark-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:28px;margin:56px auto 0;}
.trademark-tile {position:relative;width:309px;height:auto;border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg-sub);border:1px solid var(--color-border);box-shadow:0 12px 32px rgba(17,17,17,0.08);transition:transform 0.35s ease,box-shadow 0.35s ease;}
.trademark-tile:hover {transform:translateY(-8px);box-shadow:0 20px 40px rgba(104,104,140,0.16);}
.trademark-tile img {display:block;width:100%;height:100%;object-fit:cover;}
.trademark-img-wrap {width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-gold-dark);background:linear-gradient(135deg,#f4f0e6 0%,var(--color-bg-sub) 100%);}
.trademark-img-wrap i {font-size:4.375rem;opacity:0.55;}

/* ==========================================================================
   [Phase 9] 아이러브강남의원 칼럼
   ========================================================================== */
.column-section {padding:var(--section-gap) 0;background:#ffffff;}
@media (min-width:769px) {
  .column-section .section-subtitle {max-width:none;white-space:nowrap;}
}
.column-board-list {list-style:none;margin:56px 0 0;padding:0;max-width:1100px;margin-left:auto;margin-right:auto;border-top:2px solid var(--color-navy);}
.column-board-item {border-bottom:1px solid var(--color-border);}
.column-board-item a {display:flex;align-items:center;gap:18px;padding:24px 12px;color:inherit;transition:background 0.3s ease;}
.column-board-item a:hover {background:var(--color-bg-sub);}
.column-board-item a:hover .column-board-title {color:var(--color-gold-dark);}
.column-board-tag {flex-shrink:0;width:140px;font-size:1.015625rem;font-weight:700;color:var(--color-gold-dark);}
.column-board-title {flex:1;font-size:1.328125rem;font-weight:600;color:var(--color-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.3s ease;}
.column-board-date {flex-shrink:0;font-size:1.09375rem;color:var(--color-text-gray-light);}
.column-board-arrow {flex-shrink:0;font-size:0.9375rem;color:var(--color-gold-dark);transition:transform 0.3s ease;}
.column-board-item a:hover .column-board-arrow {transform:translateX(4px);}
.column-cta-wrap {display:flex;justify-content:center;margin-top:40px;}
.column-cta-btn {display:inline-flex;align-items:center;gap:12px;padding:16px 40px;border:1px solid var(--color-gold-dark);border-radius:40px;color:var(--color-navy);font-weight:600;font-size:var(--fs-small);transition:background 0.35s ease,color 0.35s ease,transform 0.35s ease;}
.column-cta-btn i {font-size:1.0625rem;color:var(--color-gold-dark);transition:transform 0.3s ease;}
.column-cta-btn:hover {background:var(--color-gold-dark);color:#ffffff;transform:translateY(-3px);}
.column-cta-btn:hover i {color:#ffffff;transform:translate(2px,-2px);}

/* ==========================================================================
   [Phase 7] 아이러브강남의원 FAQ - 아코디언 리스트
   기존 .section-title/.section-subtitle 공통 클래스를 재사용하고,
   Q/A 뱃지에는 골드 컬러 포인트를 적용하여 톤앤매너를 통일한다.
   ========================================================================== */
.faq-section {padding:var(--section-gap) 0;background:#f8f8f8;}
.faq-list {max-width:900px;margin:56px auto 0;display:flex;flex-direction:column;gap:16px;}
.faq-item {border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-white);overflow:hidden;transition:border-color 0.3s ease,box-shadow 0.3s ease;}
.faq-item:hover {border-color:var(--color-gold-dark);}
.faq-item.is-open {border-color:var(--color-gold-dark);box-shadow:0 20px 40px rgba(104,104,140,0.14);}
.faq-question-h {margin:0;}
.faq-question {display:flex;align-items:center;gap:18px;width:100%;padding:26px 30px;border:0;background:transparent;text-align:left;cursor:pointer;}
.faq-q-text {flex:1;font-size:var(--fs-lead);font-weight:600;color:var(--color-navy);}
.faq-toggle-icon {flex-shrink:0;color:var(--color-gold-dark);font-size:1.09375rem;transition:transform 0.3s ease;}
.faq-item.is-open .faq-toggle-icon {transform:rotate(180deg);}
.faq-mark {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-family:var(--font-en);font-size:1.328125rem;font-weight:700;}
.faq-mark-q {background:var(--color-navy);color:var(--color-gold-light);}
.faq-mark-a {float:left;margin:0 14px 6px 0;background:var(--color-gold-dark);color:var(--color-white);}
.faq-answer {max-height:0;overflow:hidden;transition:max-height 0.4s ease;}
.faq-item.is-open .faq-answer {max-height:400px;}
.faq-answer p {display:flex;align-items:flex-start;gap:14px;margin:0;padding:0 30px 28px;font-size:var(--fs-small);line-height:1.9;color:var(--color-text-gray);}
.faq-mark-a {margin-top:2px;}