@charset "utf-8";

/* ==========================================================================
   Tablet (~1024px)
   ========================================================================== */
@media (max-width:1024px) {
:root {
  --fs-hero: 3.28125rem;
  --fs-h2: 2.34375rem;
  --section-gap: 88px;
}
  .section-inner {padding:0 28px;}
  .gnb-list {gap:22px;}
  .feature-grid {grid-template-columns:repeat(2,1fr);}
  .mechanism-grid {grid-template-columns:1fr;gap:44px;}
  .mesh-graphic img {height:420px;}
  .why-layout {grid-template-columns:1fr;gap:40px;}
  .why-image img {height:420px;}
  .area-grid {grid-template-columns:repeat(3,1fr);}
  .area-grid-7 .area-tile {flex:0 0 calc(33.333% - 14px);}
  .data-visual-grid {grid-template-columns:1fr;}
  .special-grid {grid-template-columns:1fr;gap:20px;}
  .column-board-tag {width:110px;}
  .location-strip-inner {grid-template-columns:1fr;min-height:0;}
  .location-strip-map {height:340px;}
  .location-strip-text {padding:44px 28px;}
  .location-tel a {font-size:2.5rem;}
  .compare-table th, .compare-table td {padding:14px 12px;font-size:1.015625rem;}

  .mv-title {font-size:3.125rem;}
  .intro-split {grid-template-columns:1fr;gap:44px;padding:0 28px 70px;}
  .intro-image img {height:440px;}
  .signature-slide {width:280px;height:380px;margin:-190px 0 0 -140px;}
  .signature-carousel {height:400px;}
  .signature-swiper-wrap {padding:0 52px;}

  /* 3D 실리프팅 상세 배너 (좌우 분할) */
  .hero-split-text {padding:calc(var(--header-h) + 40px) 28px 40px;max-width:none;}
  .hero-split-text .hero-title, .hero-split-text .hero-subtitle {max-width:none;}

  /* 3D 입술 실리프팅 (좌우 분할) */
  .lip-split {gap:40px;}
  .lip-image {height:480px;}

  /* [Phase 2] 콜라겐 기술 원리 (좌우 분할) */
  .collagen-mechanism-grid {grid-template-columns:1fr;gap:44px;}
  .collagen-tech-card {padding:36px 28px;}
  .collagen-mechanism-visual img {height:240px;}

  /* [Phase 2] 콜라겐 라인업 슬라이더 */
  .collagen-lineup-wrap {padding:0 60px;}
  .lineup-card {grid-template-columns:1fr;}
  .lineup-card-media {min-height:220px;}  
  .nose-lineup-section .lineup-card {height:auto;}
  .nose-lineup-section .lineup-card-media {min-height:220px;}

  /* [Phase 4] VIP 안티에이징 */
  .vip-philosophy-grid {grid-template-columns:1fr;gap:44px;}
  .vip-glass-grid {grid-template-columns:1fr 1fr;}
  .vip-lineup-wrap {padding:0 60px;}
  .area-grid-5 {gap:16px;}
  .area-grid-5 .area-tile {flex:0 0 calc(33.333% - 11px);}

  /* [Phase 5] 비절개 눈성형 */
  .eye-concept-section {height:460px;}
  .eye-lineup-wrap {padding:0 60px;}

  /* [Phase 6] 비절개 코성형 */
  .nose-lineup-wrap {padding:0 60px;}
  .nose-check-head {margin-bottom:44px;}
  .check-point-item {padding:26px 28px;gap:22px;}
  .check-icon {width:68px;height:68px;font-size:2.03125rem;}

  /* [Phase 7] 아이러브강남의원 FAQ */
  .faq-list {margin-top:40px;}

  /* [Phase 7] 상표등록 */
  .trademark-grid {grid-template-columns:repeat(2,300px);grid-template-rows:repeat(3,425px);gap:22px;}
  .trademark-tile {width:300px;height:425px;}
}

/* ==========================================================================
   Mobile (~768px)
   ========================================================================== */
@media (max-width:768px) {
:root {
  --section-gap: 64px;
  --header-h: 64px;
  --header-total-h: 96px;
  --fs-hero: 2.70rem;
  --fs-h2: 1.80rem;
  --fs-h3: 1.30rem;
  --fs-h4: 1.10rem;
  --fs-lead: 1.10rem;
  --fs-body: 0.80rem;
  --fs-small: 0.80rem;
  --fs-badge: 0.80rem;
}
  .section-inner {padding:0 20px;}
  .intro-video-section {padding:24px 0;}
  .intro-video-section.recore-video-mid {padding:24px 0;}
  .intro-video-section.recore-video-last {padding:24px 0;}
  .intro-video-section.eye-video-pad200 {padding:24px 0;}
  .intro-video-section.nose-check-video-first {padding:24px 0;}
  .intro-video-section.nose-check-video-last {padding:24px 0;}
  .intro-video-section.nose-check-video-first .intro-video-inner::after{display:none;}
  .intro-video-inner {padding:0 20px;max-width:100%;}
  .intro-content{position:relative;}
  .header-topbar-inner {padding:0 20px;height:32px;}
  .header-main {padding:0 20px;}
  .logo-en {font-size:1.0625rem;}
  .logo-kr {font-size:0.6875rem;}
  .gnb {position:fixed;top:0;right:-100%;width:78%;max-width:340px;height:100vh;background:var(--color-navy-deep);flex-direction:column;justify-content:flex-start;align-items:flex-start;padding:96px 32px 40px;overflow-y:auto;transition:right 0.4s cubic-bezier(0.22,1,0.36,1);z-index:410;}
  .gnb.is-open {right:0;}
  .gnb-list {flex-direction:column;align-items:flex-start;gap:0;width:100%;}
  .gnb-list > li {width:100%;border-bottom:1px solid var(--color-border-dark);}
  .gnb-list > li > a {display:block;width:100%;padding:16px 0;color:var(--color-text-invert);font-size:1.0625rem;}
  .gnb-list > li.active > a {color:var(--color-gold-light);}
  .header-tel span {display:none;}
  .mobile-menu-btn {display:flex;align-items: flex-end;}
  .header-actions {gap:10px;}

  .hero-title {font-size:var(--fs-hero);}
  .hero-subtitle {font-size:var(--fs-small);}
  .hero-scroll-indicator {margin-top:44px;}
  .hero-banner {height:320px;padding-top:calc(var(--header-h) + 12px);}
  .hero-banner .hero-title {font-size:2.03125rem;}

  /* 3D 실리프팅 상세 배너 (좌우 분할 → 세로 스택) */
  .hero-banner-split {height:auto;}
  .hero-split-grid {grid-template-columns:1fr;}
  /* 데스크톱 좌우 50:50 분할 기준으로 광원을 왼쪽 절반에만 잘라 보여주던 clip-path가
     모바일 세로 스택 레이아웃에서는 배경이 반으로 나뉘어 보이는 문제를 일으켜 전체 노출로 해제 */
  .hero-banner-split .hero-bg-glow {clip-path:none;}
  .hero-title-accent{font-size: var(--fs-h2);}
  .hero-split-text {height:auto;padding:40px 20px;text-align:center;align-items:center;max-width:none;transform:none;}
  .hero-split-text .hero-title, .hero-split-text .hero-subtitle {text-align:center;max-width:none;}
  .hero-split-media {height:280px;}
  .hero-icon-keyword-list {justify-content:center;gap:24px;}
  .hero-icon-keyword-list li i {width:52px;height:52px;font-size:1.375rem;}
  .hero-icon-keyword-list li span {font-size:0.8125rem;}

  .feature-grid {grid-template-columns:repeat(2,1fr);gap:14px;}
  .feature-card {padding:24px 18px;}

  .mechanism-cards .section-title {text-align:center;}
  .mesh-graphic img {height:280px;}

  .lip-split {grid-template-columns:1fr;gap:28px;}
  .lip-text {text-align:center;}
  .lip-title {text-align:center;}
  .lip-lead {font-size:1.328125rem;}
  .badge-list {justify-content:center;gap:10px;}
  .point-badge {padding:9px 18px;font-size:1.015625rem;}
  .lip-image {height:320px;}

  .why-image img {height:280px;}
  .why-card {padding:20px;gap:16px;}
  .why-num {font-size:2.5rem;}
  .why-layout::after{display:none;}

  .area-grid {grid-template-columns:repeat(2,1fr);gap:12px;}
  .area-grid-7 {gap:12px;}
  .area-grid-7 .area-tile {flex:0 0 calc(50% - 6px);}

  .mini-badge-list li {padding:8px 16px;font-size:0.9375rem;}

  .recore-mech-subtitle {font-size:1.328125rem;margin:24px auto 0;}
  .data-card img {height:220px;}

  .compare-table-wrap {overflow-x:auto;}
  .compare-table {min-width:560px;}

  .special-grid {grid-template-columns:1fr;}
  .special-card {padding:28px 22px;}

  .location-strip-map {height:240px;}
  .location-strip-text {padding:36px 20px;}
  .location-info-group {margin-bottom:22px;padding-bottom:22px;}
  .location-tel a {font-size:2.03125rem;}
  .location-strip-actions {flex-wrap:wrap;width:100%;}
  .btn-line-call, .btn-line-kakao, .btn-line-modal {flex:1;min-width:110px;}

  .quick-bar {right:14px;bottom:20px;}
  .quick-toggle {height:48px;padding:0 16px;font-size:1.015625rem;}
  .quick-panel {width:200px;}
  .btn-top {right:14px;bottom:80px;width:44px;height:44px;}

  .modal-dialog {padding:32px 22px;}

  /* Main Visual: 모바일 한 화면에 보이도록 섹션 높이 고정
     - 기존 height:100vh(및 calc(var(--vh)*100))는 모바일 브라우저 주소창이 실제로
       내려가 있는 큰 상태를 기준으로 계산될 수 있어, 주소창이 접힌 뒤 실제 화면보다
       섹션이 더 길게 렌더링되어 스크롤해야만 하단(SCROLL 문구)까지 보이는 문제가 있었음.
     - 100svh(Small Viewport Height = 브라우저 UI가 모두 펼쳐진 "가장 작은" 뷰포트 기준)를
       사용해 어떤 상태에서도 섹션이 화면보다 커지지 않도록 고정. (미지원 구형 브라우저는
       바로 위 calc(var(--vh)*100) 값으로 자동 폴백.) */
  .main-visual {min-height:0;height:calc(var(--vh,1vh) * 100);height:100svh;min-height:auto;height:auto;margin-top:96px;}
  .mv-media{position:relative;}
  .mv-inner {padding:0 28px;margin-left:0;max-width:none;}
  .mv-title {font-size:2.1875rem;margin:0 0 14px;line-height:1.3;white-space:normal;}
  .mv-subtitle {font-size:1.09375rem;margin:0 0 22px;white-space:normal;}
  .mv-cta {padding:11px 24px;font-size:1.09375rem;}
  .mv-scroll-indicator {bottom:14px;font-size:0.859375rem;}
  .mv-scroll-indicator span {height:18px;}

  /* Clinic Intro */
  .intro-split {padding:0 20px 56px;gap:32px;}
  .intro-image img {height:320px;}
  .intro-title {font-size:1.875rem;}
  .intro-body {font-size:var(--fs-small);margin-bottom:28px;}
  .intro-point-list {gap:10px;}
  .intro-point-list li {padding:10px 16px;font-size:1.015625rem;}
  .intro-marquee-track span {font-size:1.25rem;}

  /* Signature Banner */
  .signature-title {font-size:2.34375rem;}
  .signature-swiper-wrap {padding:0 8px;margin-top:36px;gap:6px;}
  .signature-carousel {height:360px;}
  .signature-slide {width:240px;height:340px;margin:-170px 0 0 -120px;}
  .signature-slide-inner {padding:30px 22px;}
  .signature-slide-inner h3 {font-size:1.5625rem;}
  .signature-nav {width:40px;height:40px;font-size:1.015625rem;}

  /* [Phase 2] 3D 콜라겐 부스터 */
  #section-collagen .hero-lead-text {font-size:1.40625rem;margin:0 0 14px;}
  .collagen-special-title .title-accent{font-size:var(--fs-h2);}
  .hero-media-badge-list {padding:16px 18px;gap:8px;}
  .point-badge-white {padding:7px 14px;font-size:0.9375rem;}
  .collagen-mechanism-desc {font-size:var(--fs-small);}
  .collagen-tech-card {padding:28px 20px;}
  .collagen-tech-card::after{right:-4%;top:-15%;width:48%;}
  .collagen-tech-list {gap:16px;}
  .collagen-mechanism-visual {margin:36px 0 0;}
  .collagen-mechanism-visual img {height:180px;}
  .collagen-lineup-wrap {padding:0 8px;flex-wrap:wrap;}
  .lineup-nav {display:none;}
  .lineup-card-media {min-height:200px;}
  .lineup-card figcaption {padding:24px 22px;}
  .lineup-card h3 {font-size:1.5625rem;}
  .nose-special-title{font-size:var(--fs-h2);}
  .nose-special-title .title-accent{font-size:var(--fs-h2);}
  .nose-lineup-section .lineup-card {height:auto;}
  .nose-lineup-section .lineup-card-media {min-height:200px;}
  .nose-check-line1{font-size: var(--fs-h2);}

  /* [Phase 4] VIP 안티에이징 */
  .vip-philosophy-catch {font-size:1.484375rem;}
  .vip-philosophy-media {padding:24px 18px;}
  .vip-philosophy-highlight{font-size:var(--fs-lead);}
  .vip-glass-grid {grid-template-columns:1fr 1fr;gap:12px;}
  .vip-glass-card img {height:auto;}
  .vip-lineup-wrap {padding:0 8px;flex-wrap:wrap;}
  .area-grid-5 {gap:12px;}
  .area-grid-5 .area-tile {flex:0 0 calc(50% - 6px);}

  /* [Phase 5] 비절개 눈성형 */
  #section-eye .hero-lead-text {font-size:1.40625rem;margin:0 0 14px;}
  .eye-special-title .title-accent{font-size:var(--fs-h2);}
  .eye-concept-section {height:420px;background-attachment:scroll;}
  .eye-concept-section .section-inner{padding:0 20px;}
  .eye-concept-body {font-size:var(--fs-small);}
  .eye-lineup-wrap {padding:0 8px;flex-wrap:wrap;}
  .hashtag-badge {font-size:0.9375rem;padding:6px 12px;}

  /* [Phase 6] 비절개 코성형 */
  #section-nose .hero-lead-text {font-size:1.40625rem;margin:0 0 14px;}
  .nose-lineup-wrap {padding:0 8px;flex-wrap:wrap;}
  .nose-check-eyebrow {font-size:1.328125rem;}
  .nose-check-head {margin-bottom:32px;}
  .check-point-list {gap:16px;}
  .check-point-item {flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px;}
  .check-icon {width:56px;height:56px;font-size:1.71875rem;}
  .check-point-item p {font-size:var(--fs-small);}
  .check-num {font-size:1.25rem;}
  .check-num em {font-size:1.875rem;}

  /* [Phase 9] 아이러브강남의원 칼럼 */
  .column-board-list {margin-top:36px;}
  .column-board-item a {flex-wrap:wrap;gap:6px 12px;padding:18px 4px;}
  .column-board-tag {width:auto;order:1;}
  .column-board-title {order:3;flex-basis:100%;white-space:normal;font-size:1.171875rem;}
  .column-board-date {order:2;margin-left:auto;font-size:0.9375rem;}
  .column-board-arrow {display:none;}

  /* [Phase 7] 아이러브강남의원 FAQ */
  .faq-list {margin-top:32px;gap:12px;}
  .faq-question {padding:20px 18px;gap:12px;}
  .faq-q-text {font-size:var(--fs-small);}
  .faq-mark {width:28px;height:28px;font-size:1.171875rem;}
  .faq-answer p {padding:0 18px 22px;gap:10px;font-size:1.171875rem;}

  /* [Phase 7] 상표등록 */
  .trademark-grid {grid-template-columns:1fr;grid-template-rows:none;gap:18px;}
  .trademark-tile {width:100%;max-width:385px;height:auto;aspect-ratio:385/545;margin:0 auto;flex:1 1 45%;}
  


.site-footer{padding:40px 0 80px;}
.footer-logo{width:230px;margin:0 auto 20px;}
}

/* ==========================================================================
   Small Mobile (~420px)
   ========================================================================== */
@media (max-width:420px) {
  .feature-grid {grid-template-columns:1fr;}
  .area-grid {grid-template-columns:repeat(2,1fr);}
  .hero-badge {font-size:0.9375rem;padding:8px 16px;}

  .mv-title {font-size:2.03125rem;}
  .intro-point-list {flex-direction:column;align-items:flex-start;}
  .signature-slide {width:220px;height:320px;margin:-160px 0 0 -110px;}
  .signature-carousel {height:340px;}
}