@charset "utf-8";

/* ==========================================================================
   실라인 FLEX 주사 상세페이지 공통 스타일시트
   - 메인컬러 : 화이트 #ffffff / 블루 #0033c3 / 밝은 그레이 #f5f5f5 / 블랙 #111111
   - 영문폰트 : DM Serif Display / 한글폰트 : Pretendard
   - 이 파일은 실버라이닝의원의 모든 상세페이지에서 공통으로 사용되는 표준 스타일입니다.
   ========================================================================== */

@font-face {
  font-family: 'Pretendard Variable';
  src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations'),
       url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-white:#ffffff;
  --color-blue:#0033c3;
  --color-blue-dark:#00268f;
  --color-gray-light:#f5f5f5;
  --color-gray-line:#e5e5e5;
  --color-gray-text:#767676;
  --color-black:#111111;
  --font-eng:'DM Serif Display',serif;
  --font-kor:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',dotum,sans-serif;
  --container-w:1440px;
  --container-pad:32px;
  --radius:16px;
}
.dm-serif-display-regular {
  font-family: "DM Serif Display", serif;
  font-weight: 400;
  font-style: normal;
}

html {
  scroll-behavior:smooth;
}

body {
  font-family:var(--font-kor);
  font-size:19px;
  line-height:1.7;
  color:var(--color-black);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

/* 자연스러운 줄바꿈: default.css의 word-break:break-all 리셋을 오버라이드.
   body에 상속 규칙을 지정해 p뿐 아니라 h1~h6, li, dd, figcaption 등
   페이지 전체 텍스트가 띄어쓰기(단어) 단위로 줄바꿈되도록 통일 */
p,
h1, h2, h3, h4, h5, h6,
li, dt, dd, span, a, button, figcaption {
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* 폰트 통일: default.css가 h1~h6, button, input 등을 Malgun Gothic으로 강제 지정하는 리셋을 오버라이드 */
h1, h2, h3, h4, h5, h6,
button, input, select, textarea {
  font-family:var(--font-kor);
}

a {
  color:inherit;
  text-decoration:none;
}

.inner {
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--container-pad);
}

.section {
  padding:120px 0;
}

.skip-link {
  position:absolute;
  top:-9999px;
  left:-9999px;
  z-index:9999;
  background:var(--color-black);
  color:var(--color-white);
  padding:12px 20px;
}

.skip-link:focus {
  top:0;
  left:0;
}

/* ------------------------------------------------------------------------
   공통 텍스트 컴포넌트 (서브페이지 통일 규칙 - class명 유지 필수)
   ------------------------------------------------------------------------ */

.sub-label {
  font-family:var(--font-eng);
  font-size:14px;
  font-weight:600;
  color:var(--color-blue);
  text-transform:uppercase;
  letter-spacing:0.2em;
  margin:0 0 16px;
}

.sub-label.white {
  color:var(--color-white);
}

.sec-title {
  font-size:52px;
  font-weight:700;
  color:var(--color-black);
  margin:0 0 24px;
  line-height:1.3;
}

.sec-title.white {
  color:var(--color-white);
}

/* 모바일 전용 타이틀 강제 줄바꿈(데스크톱에서는 숨김) */
.sec-title-break {
  display:none;
}

.sec-subtitle {
  font-size:22px;
  font-weight:600;
  color:var(--color-black);
  margin:0 0 20px;
}

.sec-subtitle.white {
  color:var(--color-white);
}

.sec-desc {
  font-size:19px;
  color:var(--color-black);
  opacity:0.62;
  margin:0 0 18px;
  line-height:1.85;
}

.sec-desc.center {
  text-align:center;
  max-width:720px;
  margin:0 auto 18px;
}

.sec-desc.left {
  text-align:left;
  max-width:720px;
  margin:0 0 18px;
}

.sec-desc.white {
  color:var(--color-white);
  opacity:0.78;
}

.section-head {
  text-align:left;
  margin:0 0 64px;
}

.section-head .sub-label {
  text-align:left;
}

/* 전후사진 섹션은 예외로 타이틀 중앙 정렬 유지 */
#before-after-section .section-head {
  text-align:center;
}

#before-after-section .section-head .sub-label {
  text-align:center;
}

/* 특별함 섹션: 상단 헤더와 목록 사이 불필요한 여백 축소 */
#special-section .section-head {
  margin-bottom:0;
}

/* 특별함 섹션: 안내 문구와 목록 사이 여백을 살짝 더 넓힘 */
#special-section .section-head .sec-desc {
  margin-bottom:40px;
}

/* 버튼 공통 */

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 40px;
  font-size:19px;
  font-weight:600;
  border-radius:var(--radius);
  transition:all 0.3s ease;
  cursor:pointer;
}

.btn-primary {
  background:var(--color-blue);
  color:var(--color-white);
}

.btn-primary:hover {
  background:var(--color-blue-dark);
}

.btn-outline-white {
  border:1px solid rgba(255,255,255,0.6);
  color:var(--color-white);
  background:transparent;
}

.btn-outline-white:hover {
  background:var(--color-white);
  color:var(--color-black);
}

/* ------------------------------------------------------------------------
   1. 히어로
   ------------------------------------------------------------------------ */

.hero-section {
  position:relative;
  width:100%;
  height:calc(100vh - 80px);
  min-height:560px;
  max-height:840px;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
}

.hero-bg-img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero-overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
  z-index:1;
}

/* 히어로 텍스트 순차 페이드인 효과 (더 자연스럽게: 살짝 더 크게 이동 + ease-out + 길어진 지속시간) */
.hero-fade {
  opacity:0;
  transform:translateY(28px);
  animation:heroFadeIn 1.3s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes heroFadeIn {
  from {
    opacity:0;
    transform:translateY(28px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

.hero-content {
  position:relative;
  z-index:2;
  text-align:left;
  color:var(--color-white);
  width:100%;
  max-width:var(--container-w);
  height:100%;
  margin:0 auto;
  padding:40px max(32px, calc((100vw - var(--container-w)) / 2 + var(--container-pad))) 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transform:translateY(48px);
}

/* 요청에 따라 PC/모바일 모두 히어로 텍스트를 중앙(가운데) 정렬로 통일 */
.hero-content-center {
  align-items:center;
  text-align:center;
}

.hero-content .eng-label {
  font-family:var(--font-eng);
  font-size:16px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.3em;
  color:var(--color-white);
  opacity:1;
  margin:0 0 12px;
  text-shadow:0 2px 12px rgba(0,20,80,0.35);
}

.hero-title {
  font-family:var(--font-eng);
  font-size:88px;
  font-weight:400;
  color:var(--color-white);
  letter-spacing:0.04em;
  margin:0 0 16px;
  text-shadow:0 2px 16px rgba(0,20,80,0.35);
}

.hero-subtitle {
  font-family:var(--font-kor);
  font-size:32px;
  font-weight:600;
  color:var(--color-white);
  margin:24px 0 24px;
  text-shadow:0 2px 12px rgba(0,20,80,0.3);
}

.hero-desc {
  font-size:19px;
  color:var(--color-white);
  opacity:0.92;
  margin:0 0 40px;
  line-height:1.8;
  text-shadow:0 2px 12px rgba(0,20,80,0.3);
}

a.hero-cta,
.hero-content a.hero-cta {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  line-height:1.2;
  margin:24px auto 0;
  border-radius:999px;
  padding:20px 64px;
  font-size:16px;
  box-shadow:0 8px 24px rgba(0,20,80,0.35);
  animation:heroCtaBounce 2.2s ease-in-out infinite;
  transition:transform 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;
}

a.hero-cta:hover,
.hero-content a.hero-cta:hover {
  transform:translateY(-6px) scale(1.05);
  box-shadow:0 14px 32px rgba(0,20,80,0.45);
  background:var(--color-white);
  color:var(--color-blue);
  animation-play-state:paused;
}

@keyframes heroCtaBounce {
  0%,100% {
    transform:translateY(0);
  }
  50% {
    transform:translateY(-10px);
  }
}

/* 히어로 하단 스크롤 유도 효과: 화살표 대신 얇은 라인이 위아래로 움직이는 방식 */
.hero-scroll-indicator {
  position:absolute;
  left:50%;
  bottom:36px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:var(--color-white);
  opacity:0.85;
}

.hero-scroll-indicator span {
  font-family:var(--font-eng);
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
}

.hero-scroll-indicator .hero-scroll-line {
  position:relative;
  width:2px;
  height:40px;
  overflow:hidden;
  background:rgba(255,255,255,0.4);
}

.hero-scroll-indicator .hero-scroll-line:before {
  content:'';
  position:absolute;
  left:0;
  top:-40%;
  width:100%;
  height:40%;
  background:var(--color-white);
  animation:heroScrollLine 2s ease-in-out infinite;
}

@keyframes heroScrollLine {
  0% {
    top:-40%;
  }
  60% {
    top:100%;
  }
  100% {
    top:100%;
  }
}

/* ------------------------------------------------------------------------
   그리드 레이아웃 공통 (이미지 + 텍스트 2단 구성)
   ------------------------------------------------------------------------ */

.grid-2 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  margin:0 0 120px;
}

.grid-2:last-child {
  margin-bottom:0;
}

.grid-2-reverse .media-col {
  order:2;
}

.grid-2-reverse .text-col {
  order:1;
}

.media-col {
  margin:0;
}

.media-col img {
  width:100%;
  border-radius:var(--radius);
}

/* ------------------------------------------------------------------------
   2. 정의 섹션
   ------------------------------------------------------------------------ */

.definition-section {
  background:var(--color-white);
}

.definition-section .grid-2-reverse-mobile .text-col-top,
.target-section .text-col-top {
  text-align:left;
}

/* 첨부 참고 이미지 구도: 좌측 다크 텍스트 패널 + 중앙 메인 이미지 + 우측 크롭된 서브 이미지 */
.definition-hero-banner {
  display:grid;
  grid-template-columns:55% 1fr;
  align-items:stretch;
  width:100%;
  min-height:460px;
  background:#1c1c1e;
  overflow:hidden;
  margin:0;
}

.definition-hero-text {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px max(32px, calc((100vw - var(--container-w)) / 2 + var(--container-pad)));
  box-sizing:border-box;
  min-width:0;
}

/* 마지막 문단의 하단 margin이 남아 justify-content:center로 세로 중앙 정렬해도
   위쪽 여백보다 아래쪽 여백이 더 커 보이던 문제 수정: 마지막 요소의 margin-bottom을 제거해
   상/하 여백이 시각적으로 동일하게 맞춰지도록 처리 */
.definition-hero-text > *:last-child {
  margin-bottom:0;
}



/* 정의 섹션: 메인 히어로 이미지와 여백 없이 붙도록 상단 패딩 제거.
   하단 패딩도 제거해 아래 특징 섹션과의 간격이 다른 섹션 간 간격(120px)과 동일해지도록 통일
   (기존에는 정의 섹션 하단 패딩 120px + 특징 섹션 상단 패딩 120px = 240px로 다른 섹션 간격의 2배였음) */
#definition-section {
  padding-top:0;
  padding-bottom:0;
}

/* 정의 섹션 타이틀: 배너 안에서 더 크고 잘 보이도록 확대 (PC 전용, 모바일은 다른 섹션과 동일 크기로 통일) */
@media (min-width:1025px) {
  #definition-title {
    font-size:64px;
  }
}

.definition-hero-media-main {
  flex:0 0 34%;
  margin:0;
  overflow:hidden;
}

.definition-hero-media-main img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
  display:block;
}

.definition-hero-media-side {
  flex:1;
  margin:0;
  overflow:hidden;
}

.definition-hero-media-side img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  border-radius:0;
  display:block;
}

.text-col-title {
  font-size:28px;
  font-weight:700;
  color:var(--color-black);
  margin:0 0 20px;
  line-height:1.5;
}

/* ------------------------------------------------------------------------
   3. 특징 섹션
   ------------------------------------------------------------------------ */

.feature-section {
  background:var(--color-white);
}

/* 제로컷 포인트 스타일 참조: 좌측 정렬 헤더 + 세로 구분선 컬럼 구성 */
.feature-head {
  text-align:left;
  margin:0 0 64px;
}

.feature-head .sec-title {
  margin:0 0 20px;
}

.feature-head-desc {
  max-width:none;
  margin:0;
  text-align:left;
}

.feature-row-list {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  list-style:none;
  margin:0;
  padding:0;
}

.feature-row-item {
  text-align:center;
  padding:48px 24px;
  border-left:1px solid var(--color-gray-line);
  transition:background 0.3s ease,transform 0.3s ease;
  cursor:default;
}

.feature-row-item:first-child {
  border-left:0;
}

.feature-row-item:hover {
  background:var(--color-blue);
  transform:translateY(-8px);
}

.feature-row-item:hover .feature-icon-lg {
  color:var(--color-white);
  transform:scale(1.08);
}

.feature-row-item:hover .feature-row-num,
.feature-row-item:hover .feature-row-title,
.feature-row-item:hover .feature-row-desc {
  color:var(--color-white);
}

.feature-row-item:hover .feature-row-num {
  opacity:0.7;
}

.feature-row-item:hover .feature-row-desc {
  opacity:0.85;
}

.feature-icon-lg {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:180px;
  height:180px;
  color:var(--color-gray-text);
  font-size:88px;
  margin:0 0 28px;
  overflow:hidden;
  transition:transform 0.3s ease;
}

.feature-icon-lg img {
  width:100%;
  height:100%;
  object-fit:contain;
  box-sizing:border-box;
  transition:filter 0.3s ease;
}

.feature-row-item:hover .feature-icon-lg img {
  filter:brightness(0) invert(1);
}

.feature-row-num {
  font-family:var(--font-eng);
  font-size:20px;
  font-weight:700;
  color:var(--color-black);
  transition:color 0.3s ease,opacity 0.3s ease;
  opacity:0.4;
  margin:0 0 14px;
}

.feature-row-title {
  font-size:22px;
  font-weight:700;
  color:var(--color-black);
  margin:0 0 16px;
  line-height:1.4;
  transition:color 0.3s ease;
}

.feature-row-desc {
  font-size:19px;
  color:var(--color-black);
  opacity:0.6;
  line-height:1.75;
  margin:0;
  transition:color 0.3s ease,opacity 0.3s ease;
}

/* ------------------------------------------------------------------------
   4. 프로그램 섹션 (좌측 고정 타이틀 + 우측 스크롤 전환 구조)
   ------------------------------------------------------------------------ */

.program-scroll-section {
  position:relative;
  background:var(--color-blue);
  padding:0;
}

.program-scroll-innerwrap {
  display:grid;
  grid-template-columns:400px 1fr;
  gap:100px;
  align-items:start;
}

/* 좌측 고정 타이틀 영역 */
.program-fixed-col {
  position:sticky;
  top:80px;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 0;
}

.program-fixed-col .sub-label {
  text-align:left;
  color:var(--color-white);
  opacity:0.85;
}

.program-fixed-eng {
  font-family:var(--font-eng);
  font-style:italic;
  font-size:44px;
  font-weight:400;
  color:var(--color-white);
  opacity:1;
  line-height:1.2;
  margin:0 0 28px;
}

.program-fixed-title {
  font-size:50px;
  font-weight:700;
  color:var(--color-white);
  line-height:1.3;
  margin:0 0 28px;
}

.program-fixed-desc {
  font-size:19px;
  color:var(--color-white);
  opacity:0.75;
  line-height:1.85;
  margin:0 0 44px;
}

.program-fixed-progress {
  display:flex;
  align-items:center;
  gap:16px;
}

.program-progress-num {
  font-family:var(--font-eng);
  font-size:15px;
  font-weight:600;
  color:var(--color-white);
  min-width:22px;
}

.program-progress-num.program-progress-total {
  opacity:0.4;
  text-align:right;
}

.program-progress-bar {
  position:relative;
  flex:1;
  max-width:120px;
  height:2px;
  background:rgba(255,255,255,0.25);
}

.program-progress-fill {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:20%;
  background:var(--color-white);
  transition:width 0.4s ease;
}

/* 우측 스크롤 전환 영역: 요청에 따라 가로폭을 살짝 줄이고(최대폭 제한), 각 패널의 위아래 여백을 넓힘 */
.program-scroll-col {
  display:flex;
  flex-direction:column;
  max-width:760px;
}

.program-panel {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px 0;
  opacity:0.25;
  transition:opacity 0.5s ease;
}

.program-panel.is-active {
  opacity:1;
}

.program-panel-media {
  margin:0 0 36px;
}

.program-panel-media img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:var(--radius);
  margin:0 auto;
}

.program-panel-body {
  max-width:100%;
}

.program-name {
  font-family:var(--font-kor);
  font-size:30px;
  font-weight:700;
  color:var(--color-white);
  margin:0 0 20px;
}

.program-name-accent {
  color:var(--color-white);
}

.program-name-en {
  font-family:var(--font-kor);
  font-weight:400;
  opacity:0.7;
  font-size:24px;
  margin-left:4px;
  color:var(--color-white);
}

/* 모바일에서 타이틀 폭이 줄어들 때 괄호(영문표기) 다음에서만 줄바꿈되도록 제어 (PC에서는 숨김) */
.program-name-break {
  display:none;
}

.program-lead {
  font-size:19px;
  font-weight:600;
  color:var(--color-white);
  margin:0 0 20px;
}

/* 프로그램 섹션 내부 공통 설명 텍스트(.sec-desc)도 화이트로 전환 */
.program-scroll-section .sec-desc {
  color:var(--color-white);
  opacity:0.8;
}

/* ------------------------------------------------------------------------
   5. 시술 과정
   ------------------------------------------------------------------------ */

.process-section {
  background:var(--color-gray-light);
}

.step-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  counter-reset:step;
  list-style:none;
  margin:0;
  padding:0;
}

.step-card {
  background:var(--color-white);
  border-radius:var(--radius);
  overflow:hidden;
  padding:0 0 32px;
  text-align:center;
  transition:background 0.3s ease;
}

.step-card:hover {
  background:var(--color-blue);
}

.step-card:hover .step-title,
.step-card:hover .step-desc {
  color:var(--color-white);
  opacity:1;
}

.step-media {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  margin:0 0 28px;
}

.step-media img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.step-num {
  font-family:var(--font-eng);
  font-size:16px;
  font-weight:700;
  color:var(--color-blue);
  margin:0 20px 8px;
  transition:color 0.3s ease;
}

.step-card:hover .step-num {
  color:var(--color-white);
}

.step-title {
  font-size:20px;
  font-weight:700;
  color:var(--color-black);
  margin:0 20px 12px;
  transition:color 0.3s ease;
}

.step-desc {
  font-size:19px;
  color:var(--color-black);
  opacity:0.6;
  margin:0 20px;
  line-height:1.7;
  transition:color 0.3s ease,opacity 0.3s ease;
}

/* ------------------------------------------------------------------------
   6. 비교 표
   ------------------------------------------------------------------------ */

.compare-section {
  background:var(--color-white);
}

/* 표 형태로 재구성: 공통 구분(시술시간/효과/시술방법/특징/용량) 목록을 좌측 헤더 열로 고정하고,
   실라인 주사/일반 지방분해주사/지방흡입 3개 항목을 가로로 배치한 하나의 표로 통합.
   '실라인 주사' 열만 포인트 컬러로 강조 표시 */
.compare-table-wrap {
  overflow-x:auto;
  border-radius:var(--radius);
  border:1px solid var(--color-gray-line);
  -webkit-overflow-scrolling:touch;
}

.compare-table {
  width:100%;
  max-width:none;
  margin:0;
  min-width:780px;
  border-collapse:collapse;
  table-layout:fixed;
}

.compare-table th,
.compare-table td {
  padding:16px 16px;
  text-align:center;
  font-size:16px;
  line-height:1.55;
  border-bottom:1px solid var(--color-gray-line);
  border-right:1px solid var(--color-gray-line);
  vertical-align:middle;
}

.compare-table th:last-child,
.compare-table td:last-child {
  border-right:0;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom:0;
}

.compare-table thead th {
  background:var(--color-gray-light);
  font-size:18px;
  font-weight:700;
  color:var(--color-black);
  padding:18px 16px;
}

.compare-th-label {
  width:120px;
}

.compare-table tbody th {
  background:var(--color-gray-light);
  font-size:16px;
  font-weight:700;
  color:var(--color-black);
  width:120px;
}

.compare-table tbody td {
  color:var(--color-black);
  opacity:0.65;
  font-weight:400;
}

/* 실라인 주사 열(포인트 컬러 강조) */
.compare-th-highlight {
  background:var(--color-blue) !important;
  color:var(--color-white) !important;
}

.compare-table tbody td.compare-td-highlight {
  background:rgba(0,51,195,0.06);
  color:var(--color-black);
  opacity:1;
  font-weight:700;
  border-right-color:rgba(0,51,195,0.15);
}

.compare-table tbody tr td.compare-td-highlight {
  border-right-color:var(--color-gray-line);
}

/* ------------------------------------------------------------------------
   7. 시술부위
   ------------------------------------------------------------------------ */

.area-section {
  background:var(--color-gray-light);
}

.area-grid {
  display:flex;
  gap:24px;
  align-items:stretch;
}

.area-group {
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border-radius:var(--radius);
  overflow:hidden;
  padding:0 0 40px;
}

.area-img {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  margin:0 0 28px;
}

.area-img img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.area-group .area-group-title,
.area-group .area-list {
  padding-left:32px;
  padding-right:32px;
}

.area-group-title {
  font-size:22px;
  font-weight:700;
  color:var(--color-blue);
  text-align:center;
  margin:0 0 24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--color-gray-line);
}

.area-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  align-content:start;
  gap:12px 20px;
  flex:1;
}

.area-list li {
  font-size:19px;
  color:var(--color-black);
  opacity:0.68;
  padding-left:22px;
  position:relative;
}

.area-list li:before {
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:0;
  top:2px;
  font-size:12px;
  color:var(--color-blue);
}

/* ------------------------------------------------------------------------
   8. 추천대상
   ------------------------------------------------------------------------ */

.target-section {
  background:var(--color-white);
  padding:0;
  overflow:hidden;
}

/* 추천대상: 좌측 이미지를 브라우저 좌측 끝까지, 위아래 여백 없이 꽉 채움 */
.target-row {
  display:flex;
  align-items:stretch;
  width:100%;
  min-height:480px;
}

.target-media-full {
  flex:0 0 50%;
  margin:0;
  overflow:hidden;
}

.target-media-full img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:0;
}

.target-text-col {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:140px 64px;
  padding-right:max(32px, calc((100vw - var(--container-w)) / 2 + var(--container-pad)));
  background:var(--color-blue);
}

.target-list {
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:36px 0 0;
}

.target-text-col .sub-label,
.target-text-col .sec-title,
.target-text-col .sec-subtitle {
  color:var(--color-white);
}

.target-list li {
  font-size:19px;
  color:var(--color-black);
  padding:18px 20px;
  background:var(--color-gray-light);
  border-radius:var(--radius);
  position:relative;
  padding-left:56px;
}

.target-list li:before {
  content:"\f00c";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  position:absolute;
  left:26px;
  top:19px;
  color:var(--color-blue);
  font-size:13px;
}

/* ------------------------------------------------------------------------
   9. 측정
   ------------------------------------------------------------------------ */

.measure-section {
  background:var(--color-gray-light);
}

/* 주사 효과 섹션: 서브타이틀 포인트 컬러, 설명은 한 줄로 강제 */
#measure-section .sec-subtitle {
  color:var(--color-blue);
}

#measure-section .section-head .sec-desc.left {
  white-space:nowrap;
}

.measure-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:24px;
}

.measure-gallery li {
  overflow:hidden;
  border-radius:var(--radius);
  aspect-ratio:4/3;
  background:var(--color-white);
}

.measure-gallery img {
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ------------------------------------------------------------------------
   10. 전후사진
   ------------------------------------------------------------------------ */

.before-after-section {
  background:var(--color-white);
}

/* 슬라이더 컨테이너 */
.ba-slider {
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:0 72px;
}

.ba-slider-track {
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  width:100%;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  /* 스크롤바 숨김 */
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.ba-slider-track::-webkit-scrollbar {
  display:none;
}

.ba-slide {
  flex:0 0 100%;
  width:100%;
  text-align:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* 좌우 이동 버튼 */
.ba-slider-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--color-white);
  border:1px solid var(--color-gray-line);
  color:var(--color-black);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(17,17,17,0.1);
  transition:background 0.25s ease,color 0.25s ease,transform 0.25s ease,box-shadow 0.25s ease;
  z-index:5;
}

.ba-slider-btn:hover {
  background:var(--color-blue);
  color:var(--color-white);
  border-color:var(--color-blue);
  box-shadow:0 12px 28px rgba(0,51,195,0.25);
}

.ba-slider-btn-prev {
  left:0;
}

.ba-slider-btn-next {
  right:0;
}

/* 하단 페이지네이션(점) */
.ba-slider-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:72px 0 0;
}

.ba-slider-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-gray-line);
  border:0;
  padding:0;
  cursor:pointer;
  transition:background 0.25s ease,transform 0.25s ease,width 0.25s ease;
}

.ba-slider-dot:hover {
  background:var(--color-blue-dark);
}

.ba-slider-dot.is-active {
  background:var(--color-blue);
  width:28px;
  border-radius:6px;
}

.ba-compare {
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:1080px;
  margin:0 auto;
}

.ba-photos {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  width:100%;
}

.ba-item {
  margin:0;
  text-align:center;
  width:100%;
  max-width:400px;
  min-width:0;
}

.ba-photos .ba-item {
  margin:0;
  flex:0 0 auto;
}

.ba-img-wrap {
  position:relative;
  width:100%;
  margin:0;
  background:var(--color-gray-light);
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;
}

.ba-item img {
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  margin:0 auto;
}

.ba-badge {
  display:inline-block;
  background:var(--color-blue);
  color:var(--color-white);
  font-size:18px;
  font-weight:700;
  padding:14px 32px;
  border-radius:40px;
  white-space:nowrap;
  margin:0;
}

.ba-caption {
  display:block;
  width:100%;
  font-family:var(--font-kor);
  font-size:18px;
  font-weight:700;
  letter-spacing:normal;
  padding:14px 0;
  margin:0;
  border-radius:0 0 var(--radius) var(--radius);
}

.ba-caption-before {
  background:var(--color-gray-light);
  color:var(--color-black);
}

.ba-caption-after {
  background:var(--color-blue);
  color:var(--color-white);
}

.ba-count-badge {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  border-radius:50%;
  background:var(--color-blue);
  color:var(--color-white);
  font-size:16px;
  font-weight:700;
  text-align:center;
  line-height:1.3;
  white-space:nowrap;
}

/* ------------------------------------------------------------------------
   11. FAQ (아코디언)
   ------------------------------------------------------------------------ */

.faq-section {
  background:var(--color-blue);
}

.faq-section .sub-label {
  color:var(--color-white);
  opacity:0.85;
}

.faq-section .sec-title {
  color:var(--color-white);
}

.faq-section .sec-desc.left {
  color:var(--color-white);
  opacity:0.8;
}

/* FAQ 상자: 좌측 타이틀 섹션헤덷 + 우측 아코디언 리스트 2단 구성 */
.faq-columns {
  display:grid;
  grid-template-columns:400px minmax(0,1fr);
  gap:80px;
  align-items:start;
}

.faq-head-col {
  margin:0;
  position:sticky;
  top:120px;
}

.faq-list {
  max-width:none;
  margin:0;
  border-top:1px solid rgba(255,255,255,0.25);
}

.faq-item {
  border-bottom:1px solid rgba(255,255,255,0.25);
}

.faq-question {
  margin:0;
}

.faq-toggle {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:26px 8px;
  background:transparent;
  border:0;
  text-align:left;
  font-size:22px;
  font-weight:500;
  color:var(--color-white);
}

.faq-num {
  display:inline-block;
  margin-right:12px;
  font-weight:700;
  color:var(--color-white);
  opacity:0.7;
}

.faq-toggle i {
  color:var(--color-white);
  font-size:14px;
  transition:transform 0.25s ease;
  flex-shrink:0;
}

.faq-toggle[aria-expanded="true"] i {
  transform:rotate(45deg);
}

.faq-answer {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
}

.faq-answer p {
  font-size:19px;
  color:var(--color-white);
  opacity:0.8;
  padding:0 8px 26px;
  margin:0;
  line-height:1.8;
}

/* ------------------------------------------------------------------------
   10-1. 특별함
   ------------------------------------------------------------------------ */

.special-section {
  background:var(--color-gray-light);
}

.special-list {
  list-style:none;
  margin:0;
  padding:0;
}

.special-row {
  display:grid;
  grid-template-columns:600px 1fr;
  gap:64px;
  align-items:center;
  padding:56px 0;
  border-top:1px solid rgba(17,17,17,0.1);
}

.special-list .special-row:first-child {
  border-top:0;
  padding-top:0;
}

.special-media {
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
}

/* 좌측 이미지: 위아래 여백 없이 이미지 원본 비율에 그대로 맞춤(레터박스 제거) */
.special-media img {
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
}

.special-content {
  display:flex;
  flex-direction:column;
}

.special-num {
  font-family:var(--font-eng);
  font-size:44px;
  font-weight:600;
  color:var(--color-black);
  opacity:0.3;
  line-height:1;
  margin:0 0 20px;
}

.special-eng {
  font-family:var(--font-eng);
  font-size:15px;
  font-weight:600;
  color:var(--color-blue);
  text-transform:uppercase;
  letter-spacing:0.15em;
  margin:0 0 16px;
}

.special-title-txt {
  font-size:24px;
  font-weight:700;
  color:var(--color-black);
  line-height:1.5;
  margin:0 0 20px;
}

.special-desc {
  font-size:19px;
  color:var(--color-black);
  opacity:0.62;
  line-height:1.85;
  margin:0;
}

/* 짝수 행(02, 04, 06)은 이미지-텍스트 좌우 순서를 바꾸지 않고, 참고 이미지처럼 이미지는 항상 좌측 고정 */

/* ------------------------------------------------------------------------
   PC 전용(1025px 이상) 오버라이드
   ------------------------------------------------------------------------ */

/* 정의 섹션: PC에서 서브타이틀/텍스트컬럼 타이틀 폰트 크기·굵기 통일 */
@media (min-width:1025px) {
  #definition-section .sec-subtitle,
  #definition-section .text-col-title {
    font-size:23px;
    font-weight:600;
  }

  /* FAQ 섹션: PC에서 안내문 폰트 크기 확대 */
  #faq-section .section-head .sec-desc.left {
    font-size:20px;
  }

  /* 차이점 섹션: PC에서 표 내부 텍스트 크기 조정 (타이틀 행 22px, 나머지 내용 19px) */
  .compare-table thead th {
    font-size:22px;
  }
  .compare-table tbody th,
  .compare-table tbody td {
    font-size:19px;
  }
}

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width:1024px) {
  .section {
    padding:88px 0;
  }
  .program-scroll-section {
    padding:88px 0;
  }
  .program-scroll-innerwrap {
    grid-template-columns:1fr;
    gap:0;
  }
  .program-fixed-col {
    position:relative;
    top:auto;
    height:auto;
    padding:0 0 20px;
    text-align:left;
    align-items:flex-start;
  }
  .program-fixed-col .sub-label {
    text-align:left;
  }
  .program-fixed-progress {
    display:none;
  }
  .program-panel {
    min-height:auto;
    opacity:1;
    padding:40px 0;
    border-top:1px solid rgba(17,17,17,0.1);
  }
  .program-panel:first-child {
    border-top:0;
  }
  .program-panel-body {
    max-width:100%;
  }
  /* 정의 섹션 배너: 모바일에서 세로 스택(텍스트 → 이미지) */
  .definition-hero-banner {
    grid-template-columns:1fr;
    min-height:auto;
    margin:0 0 24px;
  }
  .definition-hero-text {
    padding:72px 24px;
    text-align:left;
    align-items:flex-start;
  }
  .definition-hero-text .sub-label,
  .definition-hero-text .sec-title,
  .definition-hero-text .sec-subtitle {
    text-align:left;
  }
  .definition-hero-media-side {
    flex:none;
    width:100%;
    aspect-ratio:4/3;
  }
  .feature-row-list {
    grid-template-columns:1fr;
  }
  .feature-row-item {
    border-left:0;
    border-right:0;
    border-top:1px solid var(--color-gray-line);
  }
  .feature-row-item:first-child {
    border-top:0;
  }
  .feature-row-item:hover {
    background:transparent;
    transform:none;
  }
  .feature-row-item:hover .feature-icon-lg {
    transform:none;
  }
  .feature-row-item:hover .feature-icon-lg img {
    filter:none;
  }
  .feature-row-item:hover .feature-row-num,
  .feature-row-item:hover .feature-row-title,
  .feature-row-item:hover .feature-row-desc {
    color:var(--color-black);
    opacity:inherit;
  }
  .feature-row-item:hover .feature-row-num {
    opacity:0.4;
  }
  .feature-row-item:hover .feature-row-desc {
    opacity:0.6;
  }
  .feature-icon-lg {
    width:120px;
    height:120px;
    font-size:52px;
  }
  .feature-head {
    text-align:left;
    margin:0 0 32px;
  }
  .feature-head-desc {
    text-align:left;
    margin:0;
    max-width:520px;
  }
  #feature-section {
    padding-top:40px;
  }
  .step-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .ba-photos {
    gap:0;
  }
  .ba-item {
    width:50%;
    max-width:none;
    flex:1 1 0;
  }
  .ba-img-wrap {
    width:100%;
  }
  .ba-item img {
    width:100%;
  }
  .ba-count-badge {
    width:80px;
    height:80px;
    font-size:14px;
  }
  .ba-slider {
    padding:0 60px;
  }
  .ba-slider-btn {
    width:48px;
    height:48px;
    font-size:16px;
  }
  .compare-grid {
    grid-template-columns:1fr;
  }
  .area-grid {
    flex-direction:column;
  }
  .area-group {
    flex:none;
  }
  .special-row {
    grid-template-columns:1fr;
    gap:24px;
    padding:40px 0;
  }
  .special-num {
    font-size:36px;
  }
  .measure-gallery {
    grid-template-columns:1fr;
  }
  .grid-2 {
    grid-template-columns:1fr;
    gap:40px;
    margin:0 0 80px;
  }
  .target-row {
    flex-direction:column;
    min-height:auto;
  }
  .target-media-full {
    flex:none;
    width:100%;
    aspect-ratio:4/3;
  }
  .target-text-col {
    padding:48px 24px;
  }
  .grid-2-reverse .media-col {
    order:1;
  }
  .grid-2-reverse .text-col {
    order:2;
  }
  .main-nav {
    display:none;
  }
  .header-inner {
    justify-content:space-between;
  }
  .hero-title {
    font-size:52px;
  }
  /* 각 섹션 타이틀(.sec-title) 모바일 전용 폰트 크기 축소 (PC 타이틀 확대에 맞춰 소폭 증가) */
  .sec-title {
    font-size:48px;
  }
  /* 프로그램 섹션 모바일 상단 텍스트: 다른 섹션의 section-head(서브라벨+타이틀+설명) 구성과 동일하게 통일 */
  .program-fixed-eng {
    font-family:var(--font-eng);
    font-style:normal;
    font-size:15px;
    font-weight:400;
    color:var(--color-white);
    text-transform:uppercase;
    letter-spacing:0.2em;
    opacity:0.85;
    line-height:1.3;
    margin:0 0 12px;
  }
  .program-fixed-title {
    font-size:44px;
    margin:0 0 16px;
    color:var(--color-white);
  }
  .program-fixed-desc {
    font-size:19px;
    opacity:0.75;
    margin:0 0 12px;
    color:var(--color-white);
  }
  /* 모바일에서는 강제 개행을 숨겨 각 텍스트가 한 줄로 보이도록 처리 */
  .program-break {
    display:none;
  }

  /* 히어로: 상담하기 버튼 박스 크기 축소 */
  a.hero-cta,
  .hero-content a.hero-cta {
    padding:16px 48px;
  }

  /* 정의 섹션: 모바일에서 텍스트 전체 가운데 정렬 (타이틀/서브타이틀/본문 크기는 다른 섹션과 동일하게 기본값 유지) */
  #definition-section .text-col {
    text-align:center;
  }

  /* 시술부위 섹션: 모바일에서는 강제 줄바꿈을 숨겨 띄어쓰기 기준 자연스러운 줄바꿈이 적용되도록 처리 */
  .area-desc-break {
    display:none;
  }

  /* 각 섹션 타이틀 모바일 전용 강제 줄바꿈 (PC에서는 숨김) */
  .sec-title-break {
    display:block;
  }

  /* 프로그램 섹션: 모바일에서 텍스트 좌측 정렬, 타이틀 크기 축소 및 괄호 다음 줄바꿈 */
  .program-panel-body {
    text-align:left;
  }
  .program-name {
    font-size:28px;
  }
  .program-name-break {
    display:block;
  }

  /* 차이점 섹션: 항목명(dt) 폰트 크기 확대 */
  .compare-row dt {
    font-size:16px;
  }

  /* 추천대상 섹션: 타이틀 영역 텍스트 가운데 정렬 */
  #target-section .sub-label,
  #target-section .sec-title,
  #target-section .sec-subtitle {
    text-align:center;
  }

  /* 전후사진 섹션: 타이틀-사진 간 여백 축소 */
  #before-after-section .section-head {
    margin-bottom:32px;
  }

  /* 특별함 섹션: 목록 내용 폰트 크기 확대 */
  .special-desc {
    font-size:19px;
  }

  /* 주사 효과 섹션: 모바일에서는 한 줄 강제 해제(자연스러운 줄바꿈 허용) */
  #measure-section .section-head .sec-desc.left {
    white-space:normal;
  }

  /* FAQ 섹션: 질문 폰트 크기 축소 */
  .faq-toggle {
    font-size:19px;
  }

  /* FAQ 섹션: 모바일에서는 좌우 2단을 세로 스택으로 전환 */
  .faq-columns {
    grid-template-columns:1fr;
    gap:32px;
  }
  .faq-head-col {
    position:relative;
    top:auto;
  }
}

@media (max-width:640px) {
  .hero-title {
    font-size:38px;
    line-height:1.05;
    margin:0 0 10px;
  }
  .hero-content .eng-label {
    margin:0 0 8px;
  }
  .hero-subtitle {
    margin:12px 0 12px;
  }
  .hero-desc {
    margin:0 0 24px;
  }
  .program-fixed-eng {
    font-size:15px;
  }
  .program-fixed-title {
    font-size:38px;
  }
  .program-fixed-desc {
    font-size:19px;
  }
  .program-fixed-col {
    padding:0 0 12px;
  }
  .program-panel-media img {
    aspect-ratio:4/3;
  }
  .hero-section {
    height:auto;
    aspect-ratio:0.78 / 1;
    min-height:auto;
    max-height:none;
  }
  .hero-bg-img {
    object-fit:cover;
    object-position:center;
  }
  .sec-title {
    font-size:42px;
  }
  .sec-subtitle {
    font-size:20px;
  }
  .hero-desc {
    font-size:14px;
    line-height:1.6;
  }
  .hero-subtitle {
    font-size:22px;
  }
  .hero-content .eng-label {
    font-size:12px;
  }
  .header-inner {
    height:64px;
    padding:0 20px;
  }
  #main-content {
    padding-top:64px;
  }
  .header-cta {
    padding:9px 18px;
    font-size:13px;
  }
  .feature-row-list {
    grid-template-columns:1fr;
  }
  .feature-row-item {
    border-left:0;
    border-right:0;
    border-top:1px solid var(--color-gray-line);
  }
  .feature-row-item:first-child {
    border-top:0;
  }
  .step-grid {
    grid-template-columns:1fr;
  }
  /* 모바일: Before/After 사진이 잘림 없이 화면 안에 다 들어오도록 배지/뱃지 비율에 맞춰 축소 */
  .ba-compare {
    max-width:100%;
  }
  .ba-photos {
    gap:0;
  }
  .ba-item {
    width:50%;
    max-width:none;
    flex:1 1 0;
  }
  .ba-img-wrap {
    width:100%;
  }
  .ba-item img {
    width:100%;
  }
  .ba-caption {
    font-size:14px;
    padding:10px 0;
  }
  .ba-count-badge {
    width:64px;
    height:64px;
    font-size:12px;
  }
  /* 모바일에서는 좌우 이동 버튼을 숨기고 전후사진 이미지 영역을 최대한 넓게 확대 */
  .ba-slider {
    padding:0 8px;
  }
  .ba-slider-btn {
    display:none;
  }
  .ba-slider-dots {
    margin-top:64px;
    gap:10px;
  }
  .ba-slider-dot {
    width:8px;
    height:8px;
  }
  .ba-slider-dot.is-active {
    width:22px;
  }
}

/* ==========================================================================
   진료안내 / 오시는 길 (Guide & Location) 서브페이지 전용 스타일시트
   - 공통 스타일(default.css, style.css)의 규칙과 클래스 네이밍 컨벤션을 그대로 계승
   - 색상/폰트/여백 등 디자인 토큰은 style.css의 :root 변수를 그대로 사용
   ========================================================================== */

/* ------------------------------------------------------------------------
   1. 상담/문의전화 섹션 (전화상담 · 카카오톡 · 네이버예약 3열 카드)
   ------------------------------------------------------------------------ */

.contact-section {
  background:var(--color-white);
}

.special-section {
  background:var(--color-white);
}

/* ------------------------------------------------------------------------
   0. 섹션 상단 타이틀/텍스트 가운데 정렬 (진료안내 페이지 전 섹션 공통)
   ------------------------------------------------------------------------ */

#contact-section .section-head,
#hours-section .section-head,
#location-section .section-head,
#special-section .section-head {
  text-align:center;
}

#contact-section .section-head .sub-label,
#hours-section .section-head .sub-label,
#location-section .section-head .sub-label,
#special-section .section-head .sub-label {
  text-align:center;
}

#contact-section .section-head .sec-desc.left,
#hours-section .section-head .sec-desc.left,
#special-section .section-head .sec-desc.left {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

#location-section .section-head .location-line {
  justify-content:center;
}

/* ------------------------------------------------------------------------
   5. 실버라이닝의 특별함 섹션: 02, 04, 06번 항목은 이미지-텍스트 좌우 반전
   (PC 1025px 이상에서만 적용, 1024px 이하 모바일/태블릿은 1열 배치이므로
    순서와 무관하게 이미지가 항상 텍스트 위쪽에 위치)
   ------------------------------------------------------------------------ */

@media (min-width:1025px) {
  #special-section .special-list .special-row:nth-child(2),
  #special-section .special-list .special-row:nth-child(4),
  #special-section .special-list .special-row:nth-child(6) {
    grid-template-columns:1fr 600px;
  }

  #special-section .special-list .special-row:nth-child(2) .special-media,
  #special-section .special-list .special-row:nth-child(4) .special-media,
  #special-section .special-list .special-row:nth-child(6) .special-media {
    order:2;
  }

  #special-section .special-list .special-row:nth-child(2) .special-content,
  #special-section .special-list .special-row:nth-child(4) .special-content,
  #special-section .special-list .special-row:nth-child(6) .special-content {
    order:1;
  }
}

.contact-row-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--color-gray-line);
  border-bottom:1px solid var(--color-gray-line);
}

.contact-row-item {
  text-align:left;
  padding:48px 40px;
  border-left:1px solid var(--color-gray-line);
}

.contact-row-item:first-child {
  border-left:0;
}

.contact-icon {
  display:block;
  font-size:44px;
  color:var(--color-blue);
  margin:0 0 24px;
}

.contact-icon-img {
  width:56px;
  height:56px;
  object-fit:contain;
}

.contact-title {
  font-size:24px;
  font-weight:700;
  color:var(--color-black);
  margin:0 0 14px;
  transition:color 0.3s ease;
}

.contact-desc {
  font-size:17px;
  color:var(--color-black);
  opacity:0.62;
  line-height:1.7;
  margin:0 0 24px;
  transition:color 0.3s ease,opacity 0.3s ease;
  min-height:58px;
}

.contact-phone {
  font-family:var(--font-eng);
  font-size:40px;
  font-weight:700;
  color:var(--color-blue);
  margin:0 0 10px;
  display:block;
}

.contact-note {
  font-size:16px;
  color:var(--color-black);
  opacity:0.55;
  margin:0;
  transition:color 0.3s ease,opacity 0.3s ease;
}

.contact-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:16px 20px;
  font-size:17px;
  font-weight:700;
  border-radius:var(--radius);
  background:var(--color-black);
  color:var(--color-white);
  transition:background 0.3s ease,color 0.3s ease;
}

.contact-btn-kakao {
  background:#371d1e;
  color:var(--color-white);
}

.contact-btn-kakao:hover {
  background:#2a1516;
}

.contact-btn-naver {
  background:#03c75a;
  color:var(--color-white);
}

/* ------------------------------------------------------------------------
   2. 진료시간 섹션
   ------------------------------------------------------------------------ */

.hours-section {
  background:var(--color-gray-light);
}

.hours-wrap {
  width:100%;
}

.hours-list {
  display:flex;
  flex-direction:row;
  gap:20px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
}

.hours-item {
  display:flex;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:26px 32px;
  background:var(--color-white);
  border-radius:var(--radius);
}

.hours-day {
  font-size:20px;
  font-weight:700;
  color:var(--color-black);
}

.hours-time {
  font-family:var(--font-eng);
  font-size:20px;
  font-weight:700;
  color:var(--color-blue);
}

.hours-note-text {
  font-size:17px;
  color:var(--color-black);
  opacity:0.62;
  margin:0;
  line-height:1.7;
}

/* ------------------------------------------------------------------------
   3. 오시는 길 섹션
   ------------------------------------------------------------------------ */

.location-section {
  background:var(--color-white);
}

.location-line {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  color:var(--color-black);
  margin:0;
}

.location-line i {
  color:var(--color-blue);
  font-size:22px;
}

.location-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:stretch;
}

.map-frame {
  position:relative;
  width:100%;
  min-height:520px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color-gray-light);
}

.map-frame iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ------------------------------------------------------------------------
   4. 둘러보기 섹션 (인테리어 자동 슬라이드)
   ------------------------------------------------------------------------ */

.gallery-section {
  background:var(--color-gray-light);
}

.interior-slider {
  position:relative;
  max-width:1280px;
  margin:0 auto;
  padding:0 72px;
}

.interior-slider-frame {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--color-white);
}

.interior-slide {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  opacity:0;
  transition:opacity 0.7s ease;
}

.interior-slide.is-active {
  opacity:1;
}

.interior-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
}

.interior-slider-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--color-white);
  border:1px solid var(--color-gray-line);
  color:var(--color-black);
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(17,17,17,0.1);
  transition:background 0.25s ease,color 0.25s ease,box-shadow 0.25s ease;
  z-index:5;
}

.interior-slider-btn:hover {
  background:var(--color-blue);
  color:var(--color-white);
  border-color:var(--color-blue);
  box-shadow:0 12px 28px rgba(0,51,195,0.25);
}

.interior-slider-btn-prev {
  left:0;
}

.interior-slider-btn-next {
  right:0;
}

.interior-slider-dots {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:40px 0 0;
}

.interior-slider-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-gray-line);
  border:0;
  padding:0;
  cursor:pointer;
  transition:background 0.25s ease,width 0.25s ease;
}

.interior-slider-dot:hover {
  background:var(--color-blue-dark);
}

.interior-slider-dot.is-active {
  background:var(--color-blue);
  width:28px;
  border-radius:6px;
}

/* ==========================================================================
   반응형
   ========================================================================== */

@media (max-width:1024px) {
  .contact-row-list {
    grid-template-columns:1fr;
  }
  .contact-row-item {
    border-left:0;
    border-top:1px solid var(--color-gray-line);
  }
  .contact-row-item:first-child {
    border-top:0;
  }
  .map-frame {
    min-height:320px;
  }
  .interior-slider {
    padding:0 56px;
  }
  .interior-slider-btn {
    width:48px;
    height:48px;
    font-size:16px;
  }
  .hours-item {
    padding:22px 24px;
  }
}

@media (max-width:640px) {
  .hours-list {
    flex-direction:column;
  }
  .hours-item {
    flex-direction:row;
    align-items:center;
    gap:10px;
  }
  .interior-slider {
    padding:0;
  }
  .interior-slider-btn {
    display:none;
  }
  .interior-slider-frame {
    aspect-ratio:4/3;
    touch-action:pan-y;
  }
  .contact-phone {
    font-size:30px;
  }
  .location-line {
    align-items:flex-start;
    font-size:19px;
    line-height:1.6;
    word-break:keep-all;
  }
}

/* 260814 추가 */
@media screen and (max-width: 1000px) {
    .inner {
        width: 100%;
    }
    .footer .inner{
      padding: 0 !important;
    }
}

.footer-map__apps {
    display: flex !important;
    gap: 3px !important;
}
.footer-biz{
    margin-top: 3px !important;
}
@media (max-width: 1000px) {
    .footer-map__apps {
        display: none !important;
    }
}