@charset "utf-8";

/* ============================================================
   landing.css — 메인 페이지 섹션 스타일 (#hero · #sec01~#sec09) · 메인 전용
   common-style / common-ui 위에 섹션별 보정만. 섹션 id 로 스코프해 상호 간섭을 막는다.
   색상은 토큰 우선, 시안 고유값만 리터럴. 푸터는 footer.css 가 따로 담당.
============================================================ */


/* ── 레거시 main.css 무력화 (#wrapper 한정) ──
   main.css 는 헤더·퀵메뉴·서브페이지 공용이라 파일을 건드리지 않고,
   요소 셀렉터 전역 지정(`p,div,a{font-size:13px;color:#666}` · `section img{width:100%}`)만 되돌린다.
   ⚠️ `:where()` 필수 — 그냥 #wrapper 를 쓰면 특정도가 올라가 `.img-box img` 같은
      컴포넌트 규칙까지 이긴다. :where() 는 특정도 0 이라 main.css 와 동타 + 나중 로드로만 이긴다.
   ※ #ftr 은 서브페이지에서도 쓰이므로 같은 처리를 footer.css 가 따로 갖는다 ── */
:where(#wrapper) p,
:where(#wrapper) div,
:where(#wrapper) a,
:where(#wrapper) td,
:where(#wrapper) th {
  font-size     : inherit;
  color         : inherit;
  letter-spacing: inherit;
}
:where(#wrapper) section {
  width     : auto;
  max-width : none;
  margin    : 0;
  text-align: left;
}
:where(#wrapper) section img { width: auto; }


/* ── 상단 비디오 (#main_video) ──
   PC 1920×1080(가로) / 터치 1080×1920(세로) 로 비율이 달라 height 를 고정하지 않고
   자연비율(width:100% + height:auto)로 렌더한다. 영상은 외부 호스팅 · src 는 index.php 가 지정 */
#main_video { line-height: 0; }
#main_video > video {
  display  : block;
  width    : 100%;
  height   : auto;
}


/* ============================================================
   hero — 상단 히어로 슬라이드 (Swiper 4.5.0 · 시안 1903×600 × 3장)
   실측: 좌측 텍스트 x=351 = --one-layout(1200) 중앙정렬 좌측 끝 /
        타이틀 40px · 본문·pill 27px / 텍스트 세로중심 y≒300 → align-items:center
============================================================ */
#hero {
  --hero-h    : 600px;    /* 시안 슬라이드 높이 */
  --hero-body : 27px;     /* 본문·pill 텍스트 실측 */
  --hero-navy : #012f50;  /* 시안 딥네이비 (슬라이드02 배경 · 슬라이드01 pill) */
  position    : relative;
  width       : 100%;
  overflow    : hidden;
}
#hero img { height: auto; }
#hero .hero-swiper { width: 100%; }
#hero .hero-slide {
  display    : flex;
  align-items: center;
  height     : var(--hero-h);
  box-sizing : border-box;
  overflow   : hidden;
}
#hero .hero-inner {
  position : relative;
  width    : 100%;
  max-width: var(--one-layout);
  margin   : 0 auto;
  padding  : 0 var(--one-space-safe);
}
/* 타이틀·본문 — 3장 공통 */
#hero .hero-tit {
  font-size     : var(--one-hd2);
  font-weight   : 700;
  letter-spacing: -0.02em;
}
#hero .hero-desc {
  font-size  : var(--hero-body);
}

/* 페이지네이션 — 기존 테마와 동일하게 화살표 없이 점 인디케이터만 */
#hero .hero-pager { bottom: 24px; }
#hero .hero-pager .swiper-pagination-bullet {
  width     : 10px;
  height    : 10px;
  margin    : 0 5px;
  opacity   : 1;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.25s ease, background 0.25s ease;
}
#hero .hero-pager .swiper-pagination-bullet-active {
  width        : 28px;
  border-radius: 5px;
  background   : #fff;
}


/* ---- SLIDE 01 : 진단부터 보철까지 (배경 단색 #ecf2ff) ---- */
#hero .hero-slide--dx { background: #ecf2ff; }
/* .hero-inner 의 .txt-wrap 이 color 를 직접 지정하므로 #hero 스코프로 다시 지정 */
#hero .hero-slide--dx .hero-inner { color: var(--main-color); }
#hero .hero-slide--dx .hero-txt { max-width: 730px; }   /* 실측 본문 최대폭 703 + 여유 */

#hero .dx-pill {
  display       : inline-block;
  margin-top: var(--one-gap-lg);
  padding       : 0.6em 1.15em;
  border-radius : var(--ui-radius-pill);
  background    : var(--hero-navy);
  font-size     : var(--hero-body);
  font-weight   : 700;
  line-height   : 1.35;
  letter-spacing: -0.02em;
  color         : #fff;
}
#hero .hero-slide--dx .hero-desc {     margin-top: var(--one-gap-xl);} 

#hero .hero-vis--dx {
  position: absolute;
  left    : 70.2%;
  top     : 50%;
  width   : 35.4%;
  transform: translateY(-50%);
}
#hero .hero-vis--dx img { display: block; width: 100%; }


/* ---- SLIDE 02 : 10년 뒤에도 편안한 임플란트 (시안 제공 배경 이미지) ---- */
#hero .hero-slide--care {
  background: var(--hero-navy) url(../img/hero/hero-bg-02.jpg) no-repeat center center / cover;
}
#hero .hero-slide--care .hero-inner { color: #fff; }
#hero .hero-slide--care .hero-txt { max-width: 920px; }   

#hero .care-cert {
  display       : flex;
  align-items   : center;
  gap           : 12px;       
  margin-top    : 40px;       
  font-size     : var(--hero-body);
  font-weight   : 700;
  line-height   : 1.35;
  letter-spacing: -0.02em;
}
#hero .care-cert img { flex: 0 0 37px; width: 37px; }
#hero .hero-slide--care .hero-desc { margin-top: 14px; }   /* 실측 335 → 387 (라인박스 여유 감산) */


/* ---- SLIDE 03 : 4way 통증 케어 시스템 (배경 단색 #1c7caf) ---- */
#hero .hero-slide--pain { background: #1c7caf; }
#hero .hero-slide--pain .hero-inner { color: #fff; }
#hero .hero-slide--pain .hero-txt { max-width: 660px; }   /* 실측 본문 최대폭 642 + 여유 */
#hero .hero-slide--pain .hero-desc { margin-top: 44px; }  /* 실측 타이틀 하단 293 → 본문 337 */

/* 우측 통이미지 648×320 @ x1057..1705 / y137..457
   ⚠️ 불릿·SYSTEM 라벨·값 문구·점선·제품컷이 전부 박힌 통이미지 (값 문구는 흰 글자)
      → 텍스트로 겹쳐 코딩하면 이중으로 보인다. 이미지 그대로 사용할 것 */
#hero .hero-vis--pain {
  position : absolute;
  left     : 58.8%;
  top      : 50%;
  width    : 54%;
  transform: translateY(-50%);
}
#hero .hero-vis--pain img { display: block; width: 100%; }


/* ============================================================
   section01 — 병원소개 / 진료이념
   구성: 인트로밴드 · FAQ · ACE이념 · 고객과의약속
============================================================ */

#sec01 { display: block; }
#sec01 .con-inner { padding: var(--one-space-lg) 0; }

/* ---- 공통 풀블리드 배경 래퍼 ---- */
#sec01 .s01-band { position: relative; width: 100%; }


/* ---- 1) FAQ ---- */
#sec01 .s01-faq { background: #fff; overflow: hidden; }   /* 워터마크 좌우 이동 클립 */
#sec01 .s01-faq .sec-hd { position: relative; }
#sec01 .faq-cap {
  display      : inline-block;
  padding      : 0.2em 1.6em 0.2em 1.8em;
  border       : 1px solid var(--main-color);
  border-radius: var(--ui-radius-pill);
  color        : var(--main-color);
  font-weight  : 800;
  letter-spacing: 0.1em;
  text-align   : center;
}
/* 배경 워터마크 FAQ — clamp 로 전 해상도 자동 스케일 */
#sec01 .faq-watermark {
  position   : absolute;
  left       : -17%;
  top        : 0;
  font-size  : clamp(32px, 19vw, 300px);
  font-weight: 900;
  line-height: 1;
  color      : #f7f7f7;
  z-index    : -1;
  pointer-events: none;
  user-select: none;
}

#sec01 .faq-list { display: flex; flex-direction: column; gap: var(--one-gap-xl); }
#sec01 .faq-card {
  position     : relative;
  padding      : var(--one-space-s) var(--one-space-r);
  border-radius: var(--ui-radius-lg);
  background   : var(--main-color);
  color        : #fff;               /* 네이비 배경 → 본문 흰색 (질문 포함) */
  text-align   : center;
}
#sec01 .faq-q { color: #fff; }
#sec01 .faq-badge {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 40px;
  height         : 40px;
  margin-bottom  : var(--one-gap-r);
  border-radius  : 50%;
  background     : #fff;
  color          : var(--main-color);
  font-size      : var(--one-p-tit);
  font-weight    : 800;
  line-height    : 1;
}
#sec01 .faq-q { margin-bottom: var(--one-gap-lg); font-weight: 500; }
#sec01 .faq-a {
  padding-top: var(--one-gap-lg);
  border-top : 1px solid rgba(255, 255, 255, 0.2);
  color      : rgba(255, 255, 255, 0.85);
  font-size  : var(--one-body);
  line-height: var(--one-lh-r);
}

/* FAQ CTA */
#sec01 .faq-cta {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--one-space-r);
  margin-top     : var(--one-space-r);
}
#sec01 .faq-cta__col {
  flex          : 1 1 0;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--one-gap-r);
  max-width     : 420px;
}
#sec01 .faq-cta__div { width: 1px; align-self: stretch; background: var(--ui-line); }
#sec01 .faq-cta__btn { min-width: 330px; color: #fff; }   /* 폰트 24px 기준 — 두 버튼 폭을 같게 유지 */
#sec01 .faq-cta__btn.green { background: #8dc63f; }
#sec01 .faq-cta__btn.red   { background: #e23b2e; }


/* ---- 2) ACE 이념 ---- */
#sec01 .s01-ace { background: #2b2b2b; color: var(--white-color); }
#sec01 .s01-ace__tit {
  padding-bottom: var(--one-gap-lg);
  margin-bottom : var(--one-space-s);
  border-bottom : 1px solid rgba(255, 255, 255, 0.25);
  font-weight   : 500;
  color         : #fff;
}
#sec01 .ace-list { display: flex; flex-direction: column; gap: var(--one-space-s); }
#sec01 .ace-item {
  display    : grid;
  grid-template-columns: auto 1fr auto;   /* 이니셜 폭이 --one-hd1 에 따라 커지므로 auto */
  align-items: center;
  gap        : var(--one-gap-xl);
}
#sec01 .ace-abbr {
  font-size  : calc(var(--one-hd1) * 2.5);
  font-weight: 800;
  line-height: 1;
  color      : var(--point-color04);
}
#sec01 .ace-eng { margin-bottom: var(--one-gap-xs); color: var(--gray-color01); font-weight: 600; opacity: 0.6;}
#sec01 .ace-item .ft-body { color: #fff; }
#sec01 .ace-hanja {
  font-family: "Noto Sans TC", "Noto Sans SC", serif;   /* 한자 전용 중문 폰트 */
  font-size  : 56px;
  font-weight: 500;
  color      : rgba(255, 255, 255, 0.14);
  letter-spacing: 0.1em;
}
#sec01 .ace-sign {
  display        : flex;
  align-items    : center;
  justify-content: flex-end;
  gap            : var(--one-gap-r);
  margin-top     : var(--one-space-s);
  color          : var(--gray-color01);
}
#sec01 .ace-sign img { width: auto; height: 34px; }


/* ---- 3) 고객과의 약속 ---- */
#sec01 .s01-promise { background: #fff; }
/* 타이틀 배너 — 시안 100% 이미지 그대로 사용(풀와이드) */
#sec01 .s01-promise__banner { margin: 0 auto var(--one-space-r); }
#sec01 .s01-promise__banner img { display: block; width: 100%; height: auto; }

#sec01 .promise-list { display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; }
#sec01 .promise-item {
  display    : flex;
  align-items: center;
  gap        : var(--one-space-s);
  padding    : var(--one-gap-xl) 0;
  /* 항목 구분 — 보더 대신 구분선 이미지(sec01-img07, 양끝 페이드 라인) */
  background : url(../img/section01/sec01-img07.png) no-repeat center bottom / 100% auto;
}
#sec01 .promise-item:last-child { background: none; }
#sec01 .promise-item.rev { flex-direction: row-reverse; }
#sec01 .promise-item .promise-txt { flex: 1 1 0; }
#sec01 .promise-item.rev .promise-txt { text-align: right; }
#sec01 .promise-ico {
  flex-shrink  : 0;
  width        : 30%;
  max-width    : 178px;
  display      : flex;
  align-items  : center;
  justify-content: center;
}
#sec01 .promise-ico img { width: 100%; height: auto; }


/* ============================================================
   section02 — 의료진 소개
   구성: 분과별협진 인트로 · 의료진(김철민/이신희) · 학회활동
============================================================ */

#sec02 { display: block; }
#sec02 .con-inner { padding: var(--one-space-lg) 0; }
/* 영역 내 이미지 — 너비에 맞춰 비율 유지(높이 auto) */
#sec02 img { height: auto; }

/* ---- 1) 인트로: 분과별 협진 (틸 배경 + swirl) ---- */
#sec02 .s02-intro { background: #8aeae9 url(../img/section02/sec02-bg-intro.jpg) no-repeat center top / 100% auto; }
#sec02 .s02-intro__body { display: flex; align-items: center; gap: var(--one-space-r); margin-top: var(--one-space-r); }
/* 간격은 gap 으로 통일 (개별 margin 제거) */
#sec02 .s02-intro__txt {
  flex          : 1 1 0;
  min-width     : 0;
  display       : flex;
  flex-direction: column;
  gap           : var(--one-gap-sm);
}
#sec02 .s02-intro__txt .ft-body { padding-top: var(--one-gap-xl); }
#sec02 .s02-intro__cert { flex: 0 0 46%; }

/* ---- 2) 의료진 카드 ---- */
/* 약력 섹션 배경 — 시안 제공 풀와이드 배경(연세대 seal 워터마크) */
#sec02 .s02-doctor { background: #fff no-repeat center top / 100% auto; }
#sec02 .s02-doctor--1 { background-image: url(../img/section02/sec02-bg-doc1.jpg); }
#sec02 .s02-doctor--2 { background-image: url(../img/section02/sec02-bg-doc2.jpg); }
#sec02 .s02-doctor .con-inner { max-width: 1500px; }   /* 약력 영역만 확장 */
#sec02 .doc-card { display: flex; gap: var(--one-space-r); align-items: flex-start; justify-content: center; }
#sec02 .doc-card.rev { flex-direction: row-reverse; }
#sec02 .doc-photo { flex: 0 0 40%; max-width: 531px; align-self: flex-end; }   /* 원장 이미지 하단 밀착 */
#sec02 .doc-info { min-width: 0; }
#sec02 .doc-name { margin-bottom: var(--one-gap-r); }
#sec02 .doc-name b { color: var(--point-color05); font-weight: 500; }
#sec02 .doc-name span { margin-left: var(--one-gap-sm); font-weight: 400; }
/* 자격 pill(세로) + EAO 로고 = 같은 row */
#sec02 .doc-certrow { display: flex; align-items: center; flex-wrap: wrap; gap: var(--one-gap-lg) var(--one-space-r); margin-bottom: var(--one-gap-r); }
#sec02 .doc-pills { display: flex; flex-direction: column; align-items: flex-start; gap: var(--one-gap-sm); }
#sec02 .doc-pills li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.4em 1em 0.4em 0.4em;
    border-radius: var(--ui-radius-pill);
    background: var(--point-color05);
    color: #fff;
    font-size: var(--one-p-tit);
    font-size: calc( var(--one-p-tit) * 0.85);
    font-weight: 600;
}
#sec02 .doc-pills.no-icon li {
    padding: 0.4em 1em ;
}
#sec02 .doc-pills li img { width: 32px; height: auto; }
#sec02 .doc-eao { display: block; width: 168px; height: auto; }
#sec02 .doc-cred { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--one-gap-lg); padding-bottom: var(--one-space-lg); }   /* con-inner pdb-0 보정 — 축소 시 텍스트 하단 밀착 방지 */
#sec02 .doc-cred.one-col { grid-template-columns: 1fr; }
#sec02 .doc-cred .txt-help { font-size: 0.8em; color: var(--one-txt-color); }

/* ---- 3) 학회활동 ---- */
/* 헤더 — 강연장 사진 배경(bg-cv) + 네이비 오버레이 */
#sec02 .s02-academic__hd {
  background: linear-gradient(rgba(9, 50, 78, 0.45), rgba(9, 50, 78, 0.45)),
              var(--main-color) url(../img/section02/sec02-bg-head.jpg) no-repeat center / cover;
}
#sec02 .s02-academic__hd .con-inner { padding: var(--one-space-r) 0; }

/* 리스트 — 좌우 안전패딩 없이 브라우저 풀와이드 */
#sec02 .acad-wrap { padding: var(--one-space-lg) 0; }
#sec02 .acad-list { display: flex; flex-direction: column; gap: var(--one-space-lg); }
#sec02 .acad-item { position: relative; display: flex; align-items: center; gap: 0; background-repeat: no-repeat; }   /* gap 0 — 사진에 설명영역 밀착 */
#sec02 .acad-item.rev { flex-direction: row-reverse; }

/* 배경 장식 아이콘 — cover 아님, 위치 고정 + 반응형 크기 */
#sec02 .acad-item:nth-child(1) { background-image: url(../img/section02/sec02-icon1.png); background-position: left -24px center; background-size: auto clamp(120px, 18vw, 230px); }
#sec02 .acad-item:nth-child(2) { background-image: url(../img/section02/sec02-icon2.png); background-position: right -24px center; background-size: auto clamp(120px, 18vw, 230px); }
#sec02 .acad-item:nth-child(3) { background-image: url(../img/section02/sec02-icon3.png); background-position: left -12px center; background-size: auto clamp(140px, 22vw, 290px); }

/* 텍스트 블록 — 정렬은 항목별 .txt-rg / .txt-lf, 사진 반대편 20% 여백 */
/* min-width:0 — 없으면 최소 콘텐츠 폭 + 20% 패딩이 남은 54%를 넘겨 문서에 가로 스크롤이 생김 */
#sec02 .acad-txt { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; padding: 0 0 0 20%; }
#sec02 .acad-item.rev .acad-txt { padding-right: 20%; padding-left: 0; }
#sec02 .acad-txt > .p-tit,
#sec02 .acad-txt > .hd3,
#sec02 .acad-txt > .acad-desc { padding: 0 var(--one-space-s); }
#sec02 .acad-logo { display: inline-block; width: auto; margin-bottom: var(--one-gap-r); padding: 0 var(--one-space-s); }

/* 로고-텍스트 구분선 (일자선) */
#sec02 .acad-div { display: block; width: 100%; height: 1px; margin: var(--one-gap-r) auto; background: var(--ui-line); }

#sec02 .acad-txt .cp-txt {  margin-bottom: var(--one-gap-xs); }
#sec02 .acad-desc { display: inline-block; margin-top: var(--one-gap-r); max-width: 455px; }
#sec02 .acad-photo { position: relative; z-index: 1; flex: 0 0 46%; }   /* 보더/라운드 없음 */

/* 풀와이드 밴드 이미지 (처리사진 · 하단 띠) */
/* overflow:hidden — 모바일에서 이미지를 200%로 확대(@639)하므로 넘치는 좌우를 잘라낸다.
   (없으면 문서 폭이 늘어나 페이지 전체에 가로 스크롤이 생김) */
#sec02 .s02-strip,
#sec02 .s02-bottom { overflow: hidden; }
#sec02 .s02-strip img,
#sec02 .s02-bottom img { display: block; width: 100%; height: auto; }


/* ============================================================
   section03 — 디지털 맞춤 임플란트
   구성: 헤드 · POINT 01~04 · 컴퓨터분석 · 상악동거상술 · 뼈이식재
         · 발치후즉시식립 · 개인맞춤보철 · 보증제
   시안 고유값: 옐로 #fff79a / 골드 #fff79a / 라이트민트 #e4f6f6
============================================================ */

#sec03 { display: block; }
#sec03 .con-inner { padding: var(--one-space-lg) 0; }
#sec03 img { height: auto; }
#sec03 .s03-band { position: relative; width: 100%; }

/* 시안 고유 색상 (common 변수 대응값 없음) */
#sec03 .s03-yl   { color: #fff79a; }
#sec03 .s03-gold { color: #fff79a; }

/* 공통 타이틀·본문 */
#sec03 .s03-band > .section > .con-inner > .ft-body,
#sec03 .con-inner > .ft-body { margin-top: var(--one-gap-lg); }

/* 말풍선(손글씨 포함 통이미지) — 원본 비율 유지 */
#sec03 .s03-bubble { margin-bottom: var(--one-gap-lg); line-height: 0; }
#sec03 .s03-bubble img { display: inline-block; width: auto; max-width: 100%; }


/* ---- 1) 헤드 ---- */
#sec03 .s03-head { background: #fff; border-bottom: 2px solid var(--ui-line); }
#sec03 .s03-head__tit { margin-top: var(--one-gap-lg); }
/* 헤드 캡션은 공통 컴포넌트 .ui-headcap (common-ui.css) 사용 */


/* ---- 2) POINT 01~04 ---- */
/* 밴드 배경 = 시안 제공 풀와이드 이미지 — cover (비율 유지, 왜곡 없음)
   모바일(≤1024)에서는 img/section03/m/ 의 세로형 배경으로 교체 */
#sec03 .s03-point { background: no-repeat center / cover; }
#sec03 .s03-point--1 { background-color: #fff;    background-image: url(../img/section03/sec03-bg-p1.jpg); }
#sec03 .s03-point--2 { background-color: #f1f9fd; background-image: url(../img/section03/sec03-bg-p2.jpg); }
#sec03 .s03-point--3 { background-color: #fff;    background-image: url(../img/section03/sec03-bg-p3.jpg); }
#sec03 .s03-point--4 { background-color: #f1f9fd; background-image: url(../img/section03/sec03-bg-p4.jpg); }
#sec03 .s03-point .con-inner { padding: var(--one-space-r) 0; }

#sec03 .pt-row { display: flex; align-items: center; gap: var(--one-space-s); }
#sec03 .pt-txt { flex: 1 1 0; min-width: 0; }
#sec03 .pt-img { flex: 0 0 34%; }

/* POINT 라벨 = 시안 통이미지(넘버 + 라인) */
#sec03 .pt-label { display: block; width: 100%; max-width: 613px; margin-bottom: var(--one-space-s); }

#sec03 .pt-lead { color: var(--one-txt-color); }
#sec03 .pt-tit  { margin: var(--one-gap-sm) 0 var(--one-gap-xl); color: #222; line-height: var(--one-lh-lg); }
#sec03 .pt-desc { color: var(--one-txt-color); }

/* 항목별 이미지 폭 — 시안 원본 비율 기준 */
#sec03 .s03-point--1 .pt-img { flex-basis: 35%; max-width: 409px; }
#sec03 .s03-point--2 .pt-img { flex-basis: 35%; max-width: 415px; }
#sec03 .s03-point--3 .pt-img { flex-basis: 42%; max-width: 498px; }
#sec03 .s03-point--4 .pt-img { flex-basis: 35%; max-width: 389px; }


/* ---- 3) 컴퓨터 분석을 이용한 임플란트 ---- */
#sec03 .s03-digital { background: #fff; }

/* 진행 STEP 밴드 — 시안 제공 배경 full cover (PC·모바일 공용) */
#sec03 .s03-dgsteps {
  background: #e6f6f6 url(../img/section03/sec03-dg-steps.jpg) no-repeat center / cover;
}

/* 진행 안내 pill */
#sec03 .s03-pill {
  display      : inline-block;
  padding      : var(--one-gap-r) var(--one-space-s);
  border-radius: var(--ui-radius-pill);
  background   : #fff;
  color        : var(--main-color);
  box-shadow   : var(--ui-shadow);
}
#sec03 .dg-steps { max-width: 1064px; margin: var(--one-space-s) auto 0; }
#sec03 .dg-memo  { max-width:  845px; margin: var(--one-space-s) auto 0; }


/* ---- 4) 상악동 거상술 ---- */
#sec03 .s03-sinus { background: var(--point-color); }
#sec03 .s03-ask { margin-bottom: var(--one-space-s); }
#sec03 .sinus-top { display: flex; align-items: center; gap: var(--one-space-r); }
#sec03 .sinus-txt { flex: 1 1 0; min-width: 0; }
#sec03 .sinus-ill { flex: 0 0 26%; max-width: 370px; }

#sec03 .sinus-note {
  display    : flex;
  align-items: center;
  flex-wrap  : wrap;
  gap        : var(--one-gap-r);
  margin-top : var(--one-space-s);
}
#sec03 .sinus-bulb { flex-shrink: 0; width: 30px; }
#sec03 .sinus-note .ft-body { opacity: 0.92; }

/* 케이스 밴드 — 딥틸 */
#sec03 .s03-sinus__case { background: var(--point-color02); }
#sec03 .s03-sinus__case .con-inner { max-width: 1203px; padding: var(--one-space-r) 0; }


/* ---- 5) 뼈이식재 (스위스산 가이스트리히) ---- */
#sec03 .s03-graft { background: linear-gradient(180deg, #fff 60%, #e4f6f6 60%); }
/* "잠깐!" 뱃지 — 제목 앞 인라인 */
#sec03 .s03-tag {
  display       : inline-block;
  width         : auto;
  max-width     : 66px;
  margin-right  : var(--one-gap-r);
  vertical-align: middle;
}
#sec03 .graft-since { margin-top: var(--one-space-s); line-height: 0; }
#sec03 .graft-since img { display: inline-block; width: auto; max-width: 100%; }
#sec03 .graft-prod { max-width: 592px; margin: var(--one-space-s) auto 0; }
#sec03 .graft-note { max-width: 845px; margin: var(--one-space-s) auto 0; }


/* ---- 6) 발치 후 즉시 식립 임플란트 ---- */
#sec03 .s03-imm { background: var(--point-color); }
#sec03 .imm-table { max-width: 1200px; margin: var(--one-space-r) auto 0; }


/* ---- 7) 개인 맞춤형 지대주 & 크라운 ---- */
#sec03 .s03-custom { background: #fff; }
#sec03 .custom-img { max-width: 1192px; margin: var(--one-space-s) auto 0; }


/* ---- 8) 임플란트 보증제 시스템 ---- */
#sec03 .s03-warranty { background: #0f1e3e url(../img/section03/sec03-bg-warranty.jpg) no-repeat center / cover; }
#sec03 .s03-warranty .con-inner { padding: var(--one-space-lg) 0 0; }
#sec03 .s03-warranty .hd2 { margin-top: var(--one-gap-sm); }
#sec03 .warranty-img { margin-top: var(--one-space-s); }
#sec03 .warranty-img img { display: block; width: 100%; }


/* ============================================================
   section04 — 심미치료
   구성: 헤드 · 시술 인덱스 · 최소삭제 라미네이트 · 잇몸성형 · 치아미백 · 미백추천 · 임상증례
   시안 고유값: 카드 보더 블루 #4d90de / 증례 골드 #ffe9a8 / 라이트민트 #e4f6f6
============================================================ */

#sec04 { display: block; }
#sec04 .con-inner { padding: var(--one-space-lg) 0; }
#sec04 img { height: auto; }
#sec04 .s04-band { position: relative; width: 100%; }
#sec04 .s04-tit { color: var(--main-color); }

/* 말풍선(손글씨 포함 통이미지) — 원본 비율 유지 */
#sec04 .s04-bubble { margin-bottom: var(--one-gap-lg); line-height: 0; }
#sec04 .s04-bubble img { display: inline-block; width: auto; max-width: 100%; }


/* ---- 1) 헤드 ---- */
#sec04 .s04-head { background: #fff; }
#sec04 .s04-head__tit { color: var(--main-color); margin: var(--one-gap-lg) 0; }
/* 헤드 캡션은 공통 컴포넌트 .ui-headcap (common-ui.css) 사용 */


/* ---- 2) 시술 인덱스 (라미네이트 · 지르코니아 · 올세라믹) ---- */
#sec04 .s04-kind { background: #fff; }
#sec04 .s04-kind--1,
#sec04 .s04-kind--3 { background: #fafafa; }
#sec04 .s04-kind .con-inner { padding: var(--one-space-s) 0; }

#sec04 .kind-row { display: flex; align-items: center; gap: var(--one-space-r); }
#sec04 .kind-txt { flex: 1 1 0; min-width: 0; }
#sec04 .kind-img { flex: 0 0 35%; max-width: 374px; }

/* 제목 — 좌측 세로 바 */
#sec04 .kind-tit {
  position    : relative;
  padding-left: var(--one-gap-r);
  margin-bottom: var(--one-gap-r);
  color       : var(--point-color02);
}
#sec04 .kind-tit::before {
  position  : absolute;
  content   : "";
  left      : 0;
  top       : 50%;
  width     : 4px;   /* 장식 바 — 변수화 제외 */
  height    : 75%;
  background: var(--point-color02);
  transform : translate(0, -50%);
}
#sec04 .kind-desc {
    margin-bottom: var(--one-gap-lg);
    padding-left: var(--one-gap-r);
}

/* 특징 태그 pill */
#sec04 .kind-tag {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--one-gap-sm);
    max-width: 100%;
    padding: 0.5em 1.4em 0.5em 1em;
    border: 1px solid var(--point-color);
    border-radius: var(--ui-radius-pill);
    background: #f2fbfc;
    color: var(--one-txt-color);
    font-size: var(--one-caption);
    margin-left: var(--one-gap-r);
}
#sec04 .kind-tag img { width: 28px; height: auto; margin-right: var(--one-gap-xs); }
#sec04 .kind-tag i { width: 1px; height: 1em; background: var(--sub-color03); opacity: 0.5; }


/* ---- 3) 최소 삭제 라미네이트 ---- */
#sec04 .s04-mini { background: #fff; overflow: hidden; }
#sec04 .s04-mini .con-inner { padding: var(--one-space-xl) 0; }
#sec04 .mini-txt { position: relative; z-index: 1; max-width: 56%; }

/* 리드 문구 — 우측 라인 */
#sec04 .mini-lead { display: flex; align-items: center; gap: var(--one-gap-lg); color: var(--one-txt-color); }
#sec04 .mini-lead > span { flex-shrink: 0; }
#sec04 .mini-lead::after {
  content   : "";
  flex      : 1 1 0;
  max-width : 320px;   /* 장식 라인 길이 — 변수화 제외 */
  height    : 1px;
  background: var(--sub-color03);
}
#sec04 .mini-tit { margin: var(--one-space-s) 0; color: #222; }
#sec04 .mini-list li { display: flex; align-items: center; gap: var(--one-gap-r); padding-bottom: var(--one-gap-r); }
#sec04 .mini-list img { flex-shrink: 0; width: 26px; height: auto; }

/* 우측 이미지 — 화면 오른쪽 끝까지 붙는 풀블리드 */
#sec04 .mini-img {
  position: absolute;
  right   : 0;
  top     : 50%;
  width   : 42%;
  max-width: 807px;
  transform: translateY(-50%);
}
#sec04 .mini-img img { display: block; width: 100%; }


/* ---- 4) 잇몸성형 ---- */
#sec04 .s04-gum { background: #e4f6f6 url(../img/section04/sec04-bg-gum.jpg) no-repeat center top / cover; }
#sec04 .gum-txt { max-width: 62%; margin-left: auto; }
#sec04 .gum-lead { display: flex; align-items: center; justify-content: flex-end; gap: var(--one-gap-lg); }
#sec04 .gum-lead > span { flex-shrink: 0; }
#sec04 .gum-lead::before {
  content   : "";
  flex      : 1 1 0;
  max-width : 190px;   /* 장식 라인 길이 — 변수화 제외 */
  height    : 1px;
  background: var(--sub-color03);
}
#sec04 .gum-tit { margin: var(--one-gap-lg) 0 var(--one-space-s); }
#sec04 .gum-box { max-width: 1301px; margin: var(--one-space-r) auto 0; }


/* ---- 5) 치아미백 ---- */
#sec04 .s04-white { background: linear-gradient(180deg, #fff 0%, #fff 55%, #f8fcff 100%); }
#sec04 .s04-white .ft-body { margin-top: var(--one-gap-lg); }

/* 타이틀 ↔ 카드 연결선 */
#sec04 .white-drop {
  display   : block;
  width     : 1px;
  height    : 110px;   /* 연결선 길이 — 변수화 제외 */
  margin    : var(--one-space-s) auto 0;
  background: var(--gray-color01);
}
#sec04 .white-cards {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--one-gap-xl);
  margin-top           : var(--one-space-s);
}
#sec04 .white-card { border-top: 4px solid var(--sub-color05); }   /* 카드 상단 강조선 */
#sec04 .white-card img { display: block; width: 100%; }


/* ---- 6) 치아미백 추천 대상 ---- */
#sec04 .s04-rec { background: var(--sub-color05); }
/* 박스 레이아웃은 공통 컴포넌트 .ui-titbox (common-ui.css) — 여기선 밴드 배경/여백만 */
#sec04 .s04-rec .con-inner { padding: var(--one-space-xl) 0 var(--one-space-lg); }


/* ---- 7) 심미 치료 임상 증례 ---- */
#sec04 .s04-case { background: #30a3b8 url(../img/section04/sec04-bg-case.jpg) no-repeat center / cover; }
#sec04 .s04-gold { color: #ffe9a8; margin-top: var(--one-gap-sm); }
#sec04 .case-list { display: flex; flex-direction: column; gap: var(--one-space-s); max-width: 1200px; margin: var(--one-space-r) auto 0; }
#sec04 .case-item { border-radius: var(--ui-radius); overflow: hidden; }
#sec04 .case-item img { display: block; width: 100%; }


/* ============================================================
   section05 — 사랑니 발치
   구성: 헤드 · 매복 사랑니 · 발치는 다릅니다(01 진단 / 02 마취) · 발치가 필요한 경우 · 발치의 종류
   시안 고유값: 서브틸 #2898ae / 라이트민트 #e4f6f6 / 오프화이트 #f8f8f6
============================================================ */

#sec05 { display: block; }
#sec05 .con-inner { padding: var(--one-space-lg) 0; }
#sec05 img { height: auto; }
#sec05 .s05-band { position: relative; width: 100%; }
#sec05 .s05-pt { font-style: normal; color: #2898ae; }

/* 말풍선(손글씨 포함 통이미지) — 원본 비율 유지 */
#sec05 .s05-bubble { margin-bottom: var(--one-gap-lg); line-height: 0; }
#sec05 .s05-bubble img { display: inline-block; width: auto; max-width: 100%; }


/* ---- 1) 헤드 ---- */
#sec05 .s05-head { background: #fff; border-bottom: 1px solid var(--ui-line); }
#sec05 .s05-head__tit { color: #000; margin: var(--one-gap-lg) 0; }


/* ---- 2) 어려운 매복 사랑니 ---- */
#sec05 .s05-impact { background: #fff; }
#sec05 .impact-box { max-width: 1276px; margin: 0 auto; }


/* ---- 3) 사랑니 발치는 다릅니다 ---- */
#sec05 .s05-diff { background: #e4f6f6; }

/* 헤드 — h3 텍스트 폭으로 축소되는 래퍼(inline-block) + 좌우 바깥 따옴표 */
#sec05 .diff-hd { position: relative; display: inline-block; }
#sec05 .diff-quote { position: absolute; top: 0; width: 31px; line-height: 0; }
#sec05 .diff-quote img { display: block; width: 100%; height: auto; }
#sec05 .diff-quote--l { right: 100%; margin-right: var(--one-gap-xs); }
#sec05 .diff-quote--r { left : 100%; margin-left : var(--one-gap-xs); }
#sec05 .diff-lead { color: var(--one-txt-color); }
#sec05 .diff-tit  { color: var(--one-txt-color); margin-top: var(--one-gap-sm); line-height: 1.3;}   /* 시안 실측 #333 (틸 아님) */

#sec05 .diff-card {
  position     : relative;
  max-width    : 960px;
  margin       : var(--one-space-s) auto 0;
  /* 좌우 패딩 = 뱃지 오른쪽 끝(left 24px + 5em ≒ 99px) 이상 확보 → 텍스트가 뱃지와 겹치지 않음
     (좌우 대칭이라 시안처럼 텍스트 가운데 정렬이 유지됨) */
  padding      : var(--one-space-s) 108px;
  background   : #fff;
}
/* 넘버 뱃지 — 카드 좌상단 (폭은 em 기준이라 --one-caption 에 따라 반응형 자동 축소) */
#sec05 .diff-num {
  position       : absolute;
  left           : var(--one-gap-lg);
  top            : -0.2em;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 5em;
  height         : 72px;
  background     : #2898ae;
  color          : #fff;
  font-size      : var(--one-caption);
  font-weight    : 500;
}
#sec05 .diff-num::before {
  position     : absolute;
  content      : "";
  width        : 2.5em;
  height       : 30px;
  border       : 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 10em;
}
#sec05 .diff-card__tit { color: #2898ae; margin-bottom: var(--one-gap-r); }

/* 마취 3단계 */
#sec05 .diff-steps {
  display              : grid;
  grid-template-columns: repeat(3, 1fr);
  gap                  : var(--one-space-s);
  max-width            : 720px;
  margin               : var(--one-space-s) auto 0;
}
#sec05 .diff-steps .img-box { display: block; border-radius: 50%; }
#sec05 .diff-steps img { display: block; width: 100%; }
#sec05 .diff-steps p { margin-top: var(--one-gap-r); }


/* ---- 4) 사랑니 발치, 언제 필요한가요? ---- */
#sec05 .s05-need { background: #f8f8f6; }

/* 제목 — 좌우 라인 */
#sec05 .need-hd { display: flex; align-items: center; gap: var(--one-space-s); color: #404040; }
#sec05 .need-hd > span { display: inline-flex; align-items: center; gap: var(--one-gap-sm); flex-shrink: 0; }
#sec05 .need-hd img { width: 44px; height: auto; }
#sec05 .need-hd__pt { color: var(--main-color); }
#sec05 .need-hd::before,
#sec05 .need-hd::after {
  content   : "";
  flex      : 1 1 0;
  height    : 1px;
  background: var(--sub-color03);
  opacity   : 0.6;
}

/* 리스트 폭 — 시안 실측 1226px @1903 (≒ --one-layout) */
#sec05 .need-list { max-width: 1100px; margin: var(--one-space-s) auto 0; }
#sec05 .need-list li {
  display      : flex;
  align-items  : center;   /* 이미지·넘버·텍스트 세로 가운데 정렬 */
  gap          : var(--one-gap-xl);
  padding      : var(--one-gap-lg) 0;
  border-bottom: 1px solid var(--ui-line);
}
#sec05 .need-list em,
#sec05 .need-list p { align-self: center; }
#sec05 .need-list li:last-child { border-bottom: 0; }
/* 일러스트 셀 — 기준선을 "잇몸 박스"에 맞춘다.
   01 만 PNG 상단 여백이 커서 중앙정렬 시 잇몸이 처진다 → 비율 고정 + 하단정렬 (임의로 되돌리지 말 것)
   (넘치는 윗부분은 위로 확장 — 시안과 동일) */
#sec05 .need-ico {
  position    : relative;
  box-sizing  : content-box;   /* 패딩이 박스 바깥으로 더해짐 → 일러스트 크기 유지, 패딩은 여백으로만 작동 */
  width       : 30%;
  aspect-ratio: 47 / 30;
  overflow    : visible;
  max-width   : 238px;
  padding     : var(--one-gap-r);
}
/* 하단 정렬 + 패딩 안쪽으로 (넘치는 윗부분만 위로 확장)
   ※ 절대 위치 <img> 는 width:auto 면 원본 크기를 쓰므로 폭을 명시해야 함 */
#sec05 .need-ico img {
  position: absolute;
  left    : var(--one-gap-r);
  bottom  : var(--one-gap-r);
  display : block;
  width   : calc(100% - var(--one-gap-r) * 2);
}
#sec05 .need-list em {
  flex-shrink: 0;
  font-size  : var(--one-hd1);
  font-weight: 300;
  font-style : normal;
  color      : #b8d5db;
}
#sec05 .need-list p { flex: 1 1 0; min-width: 0; }


/* ---- 5) 사랑니 발치의 종류 ---- */
#sec05 .s05-case { background: #fff; }
#sec05 .case-list { max-width: 850px; margin: var(--one-space-r) auto 0; text-align: left; }
#sec05 .case-list li { padding: var(--one-space-s) 0; border-bottom: 1px solid var(--ui-line); }
#sec05 .case-list li:last-child { border-bottom: 0; }

#sec05 .case-hd { display: flex; align-items: center; gap: var(--one-gap-r); margin-bottom: var(--one-gap-xl); }
#sec05 .case-hd .hd3 { color: #000; }
#sec05 .case-tag {
  flex-shrink  : 0;
  padding      : 0.35em 1.2em;
  border       : 1px solid #2898ae;
  border-radius: var(--ui-radius-pill);
  color        : #2898ae;
  font-size    : var(--one-caption);
  font-weight  : 500;
  white-space  : nowrap;
}

/* stretch — 구분선(p 의 border-left)이 리스트 행 높이(=이미지 높이) 전체를 차지 */
#sec05 .case-body { display: flex; align-items: stretch; gap: var(--one-space-s); }
#sec05 .case-img { flex: 0 0 293px; align-self: flex-start; }
#sec05 .case-img img { display: block; width: 100%; }
#sec05 .case-body p {
  flex           : 1 1 0;
  min-width      : 0;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  padding-left   : var(--one-space-s);
  border-left    : 1px solid var(--ui-line);
}


/* ============================================================
   section06 — 턱관절 / 이갈이 클리닉
   구성: 헤드 · 디스크/관절염 · 주요 증상 · 치료방법 · PHL 물리치료기
         · 이갈이 치료 · 합병증 · 이갈이 치료방법 · 구강내과 · 마우스 가드 · 장점
   시안 고유값: 라이트민트 밴드 #f6feff / 오프화이트 #fafafa / 페일옐로 #fff7af
============================================================ */

#sec06 { display: block; }
#sec06 .con-inner { padding: var(--one-space-lg) 0; }
#sec06 img { height: auto; }
#sec06 .s06-band { position: relative; width: 100%; }
#sec06 .s06-yl { color: #fff7af; font-size: 1.3em; }   /* 시안: 강조부만 본문보다 크게 */

/* 말풍선(손글씨 포함 통이미지) — 원본 비율 유지 */
#sec06 .s06-bubble { margin-bottom: var(--one-gap-lg); line-height: 0; }
#sec06 .s06-bubble img { display: inline-block; width: auto; max-width: 100%; }

/* 밴드 상단 세로 연결선 (틸·네이비 밴드 공통 모티프) */
#sec06 .s06-vline {
  position  : absolute;
  top       : 0;
  left      : 50%;
  width     : 2px;
  height    : var(--one-space-lg);   /* 토큰이라 반응형 자동 축소 */
  background: var(--white-color);
  transform : translateX(-50%);
}
#sec06 .s06-vline--w { background: #fff; }

/* 넘버 리스트 (마우스 가드 역할 / 장점 공통) */
#sec06 .s06-numlist li {
  display      : flex;
  align-items  : baseline;
  gap          : var(--one-gap-lg);
  padding      : var(--one-gap-r) 0;
  border-bottom: 1px solid var(--ui-line);
}
#sec06 .s06-numlist li:last-child { border-bottom: 0; }
#sec06 .s06-numlist em {
  flex-shrink: 0;
  font-style : normal;
  font-weight: 400;
  color      : var(--point-color);
}


/* ---- 1) 헤드 ---- */
#sec06 .s06-head { background: #fff; border-bottom: 1px solid var(--ui-line); }
#sec06 .s06-head__tit { color: #000; margin-top: var(--one-gap-lg); }


/* ---- 2) 턱관절에도 디스크, 관절염 ---- */
#sec06 .s06-disc { background: #fff; }
#sec06 .s06-disc__tit { color: #000; }

/* 주치의 박스 — 상·하 틸 라인 / 좌 라벨박스 + 우 텍스트 (시안 실측 864px) */
#sec06 .disc-doc {
  display    : flex;
  align-items: center;
  max-width  : 864px;
  margin     : var(--one-space-r) auto 0;
  border-top   : 1px solid var(--point-color);
  border-bottom: 1px solid var(--point-color);
  text-align : left;
}
#sec06 .disc-doc__label {
  flex           : 0 0 50%;   /* 시안 실측 358/864 */
  align-self     : stretch;
  display        : flex;
  align-items    : center;
  justify-content: center;
  padding        : var(--one-space-s) var(--one-gap-lg);
  background     : #fdfdfd;
  color          : var(--point-color02);
  text-align     : center;
}
/* ※ 인라인 <b> 가 들어가므로 flex 컨테이너로 만들지 말 것
   (flex 자식은 블록화되어 <b> 앞뒤에서 줄이 끊김) */
#sec06 .disc-doc__txt {
  flex     : 1 1 0;
  min-width: 0;
  padding  : var(--one-space-s) var(--one-gap-xl);
  color    : #000;
}


/* ---- 3) 턱관절 장애의 주요한 증상 ---- */
#sec06 .s06-symp { background: #f6feff; margin-bottom: var(--one-space-xl); }
/* 밴드 높이는 좌측 텍스트만으로 결정 → 두개골이 위·아래로 넘침 (시안 재현) */
#sec06 .s06-symp .con-inner { padding: var(--one-space-s) 0; }
#sec06 .symp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--one-gap-xl); }
#sec06 .symp-txt { flex: 1 1 0; min-width: 0; padding-right: 48%; }

/* 좌측 세로 바 + 제목 */
#sec06 .symp-tit { position: relative; padding-left: var(--one-gap-r); color: var(--one-txt-color); }
#sec06 .symp-tit::before {
  position  : absolute;
  content   : "";
  left      : 0;
  top       : 50%;
  width     : 3px;
  height    : 70%;
  background: var(--main-color);
  transform : translate(0, -50%);
}
/* 아이콘+문구 통이미지 — 원본 비율(627px) 유지 */
#sec06 .symp-list { max-width: 627px; margin-top: var(--one-space-s); }

/* 두개골 — 흐름에서 빼내 밴드 아래로 33px 넘치게 배치 (시안 재현) */
#sec06 .symp-skull {
  position : absolute;
  right    : 0;
  bottom   : -33px;
  width    : 48%;
  max-width: 572px;
  overflow : visible;
}
#sec06 .symp-skull img { display: block; }


/* ---- 4) 턱관절 장애의 치료방법 ---- */
/* overflow:hidden — 카드 프레임(사선 리본)이 카드 좌·우 바깥으로 넘치므로 밴드에서 잘라낸다 */
#sec06 .s06-treat { background: var(--point-color); overflow: hidden; }
#sec06 .s06-treat .con-inner { padding-bottom: var(--one-space-xl); }   /* 프레임 하단 넘침(111px) 확보 */
#sec06 .s06-treat__tit { color: #fff; margin-top: var(--one-gap-r); margin-bottom: var(--one-space-s); }

/* 좌상·우하 모서리가 사선으로 잘린 화이트 카드
   사선부에 그림자가 들어가 있어 CSS(clip-path)로는 재현 불가 → 시안 프레임 이미지를 절대배치로 깖.
   프레임(1412×959) 안의 흰 카드 영역 = 1201×747 @ (106,101) → 그 비율로 오프셋/크기를 역산 */
#sec06 .treat-card {
  position: relative;
  padding : var(--one-space-r) var(--one-space-s);
}
#sec06 .treat-frame {
  position: absolute;
  z-index : 0;
  left    : -8.826%;    /* -106 / 1201 */
  top     : -13.521%;   /* -101 /  747 */
  width   : 117.569%;   /* 1412 / 1201 */
  height  : 128.380%;   /*  959 /  747 */
}
#sec06 .treat-row { position: relative; z-index: 1; display: grid; }
#sec06 .treat-row--3 { grid-template-columns: repeat(3, 1fr); }
#sec06 .treat-row--2 { grid-template-columns: repeat(2, 1fr); margin-top: var(--one-space-r); }
#sec06 .treat-row li {
  padding    : 0 var(--one-gap-xl);
  border-left: 1px solid var(--ui-line);
}
#sec06 .treat-row li:first-child { border-left: 0; }

/* 아이콘 — 하단 정렬(시안은 아이콘 밑선이 나란함) */
#sec06 .treat-ico {
  display        : flex;
  align-items    : flex-end;
  justify-content: center;
  height         : 130px;
}
#sec06 .treat-ico img { width: auto; max-width: 125px; max-height: 100%; }
#sec06 .treat-name { margin: var(--one-gap-lg) 0 var(--one-gap-r); color: var(--one-txt-color); }


/* ---- 5) 턱관절 자극요법 물리치료기 (PHL-15) ---- */
#sec06 .s06-phl { background: var(--main-color) url(../img/section06/sec06-bg-phl.jpg) no-repeat center / cover; }
#sec06 .phl-inner {
  display    : flex;
  align-items: flex-end;
  gap        : var(--one-gap-xl);
  padding    : var(--one-space-r) 0 0;
}
/* 기기 컷은 밴드 하단에 붙음 */
#sec06 .phl-img { flex: 0 0 359px; overflow: visible; }
#sec06 .phl-img img { display: block; }
#sec06 .phl-txt { flex: 1 1 0; min-width: 0; padding-bottom: var(--one-space-r); color: #fff; }
#sec06 .phl-tit { color: #fff; }
#sec06 .phl-desc { margin-top: var(--one-space-s); }


/* ---- 6) 이갈이 치료, 선택이 아닌 필수 ---- */
#sec06 .s06-grind { background: #fff; }
#sec06 .s06-grind__tit { color: #000; margin-bottom: var(--one-gap-xl); }


/* ---- 7) 다양한 합병증을 동반하는 이갈이 ---- */
#sec06 .s06-comp { background: #fafafa; }
#sec06 .s06-comp__tit { color: var(--one-txt-color); }

#sec06 .comp-row { display: flex; align-items: center; gap: var(--one-gap-xl); margin-top: var(--one-space-s); }

/* 원인 박스 (시안 실측 314×224) */
#sec06 .comp-cause {
  flex           : 0 0 314px;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : var(--one-gap-r);
  min-height     : 224px;
  padding        : var(--one-space-s) var(--one-gap-lg);
  border-radius  : var(--ui-radius-lg);
  background     : var(--point-color);
  color          : #fff;
}
#sec06 .comp-dot { width: 4px; height: 4px; border-radius: 50%; background: #fff; }

/* 점선 화살표 */
#sec06 .comp-arrow { flex: 0 0 99px; overflow: visible; }
#sec06 .comp-arrow img { display: block; }

/* 결과 — 2열 점선 박스 */
#sec06 .comp-result {
  flex                 : 1 1 0;
  min-width            : 0;
  display              : grid;
  grid-template-columns: repeat(2, 1fr);
  gap                  : var(--one-gap-lg) var(--one-space-s);
  min-height           : 223px;
  align-content        : center;
  padding              : var(--one-space-s) var(--one-gap-xl);
  border               : 2px dotted var(--point-color);
  border-radius        : var(--ui-radius-lg);
  text-align           : left;
}
#sec06 .comp-list { font-weight: 600;}
#sec06 .comp-list li::before { background: var(--point-color); width: 6px; height: 6px; left: 0; top: 0.7em; }
#sec06 .comp-list li { padding-left: var(--one-gap-lg); padding-bottom: var(--one-gap-sm); }


/* ---- 8) 이갈이 치료방법 바 ---- */
/* 좌 딥틸 / 우 틸 — 분할점 시안 실측 730/1903 */
#sec06 .s06-gbar { background: linear-gradient(90deg, var(--point-color02) 0 38.36%, var(--point-color) 38.36%); }
#sec06 .gbar-inner {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--one-gap-xl);
  padding        : var(--one-space-s) 0;
  color          : #fff;
}
#sec06 .gbar-label { flex-shrink: 0; color: #fff; }
#sec06 .gbar-list { display: flex; align-items: center; gap: var(--one-space-s); padding-right: 6%; }
#sec06 .gbar-list li { display: flex; align-items: center; gap: var(--one-gap-lg); }
#sec06 .gbar-list b { color: #fff; }
#sec06 .gbar-ico {
  flex-shrink    : 0;
  display        : flex;
  align-items    : center;
  justify-content: center;
  width          : 100px;
  height         : 100px;
  border-radius  : 50%;
  background     : #fff;
}
#sec06 .gbar-ico img { width: 58%; height: auto; }


/* ---- 9) 구강내과 안내 ---- */
#sec06 .s06-oral { background: var(--main-color) url(../img/section06/sec06-bg-oral.jpg) no-repeat center / cover; }
#sec06 .s06-oral .con-inner { padding: var(--one-space-xl) 0; color: #fff; }
#sec06 .oral-tit { display: flex; align-items: center; justify-content: center; gap: var(--one-gap-r); color: #fff; }
#sec06 .oral-flag { flex-shrink: 0; width: 66px; overflow: visible; }
#sec06 .oral-flag img { display: block; }
#sec06 .oral-desc { margin-top: var(--one-gap-xl); }

/* 화이트 필 박스 (시안 실측 909×305) */
#sec06 .oral-pill {
  display        : flex;
  align-items    : center;
  justify-content: center;
  max-width      : 909px;
  margin         : var(--one-space-s) auto 0;
  padding        : var(--one-space-s) var(--one-space-r);
  border-radius  : var(--ui-radius-pill);
  background     : #fff;
  color          : var(--one-txt-color);
}


/* ---- 10) 스포츠 마우스 가드 + 11) 마우스 가드 장점 (한 밴드 · 2단 배경) ----
   시안에서 역할+장점 박스가 흰색/틸 경계를 걸쳐 있어 밴드를 나눌 수 없다.
   --s06-split = 흰색 구간 비율. 경계는 박스 안 "역할 ↔ 장점" 사이 여백에 맞춘다 (시안 실측 y5594) */
#sec06 .s06-guard {
  --s06-split: 63%;
  background : linear-gradient(180deg, #fff 0 var(--s06-split), var(--point-color) var(--s06-split));
}
#sec06 .s06-guard__tit { color: #000; }

/* 주의보 라벨 + 본문 */
#sec06 .guard-lead {
  display    : flex;
  align-items: flex-start;
  gap        : var(--one-space-s);
  max-width  : 1000px;
  margin     : var(--one-space-r) auto 0;
}
#sec06 .guard-lead__tit { flex-shrink: 0; }
#sec06 .guard-lead__txt { flex: 1 1 0; min-width: 0; }

/* 역할 + 장점 박스 — 시안 실측 1200×876, 틸 라운드 보더.
   흰색/틸 배경 경계가 이 박스 중간(역할↔장점 사이 여백)을 지나므로 배경 #fff 필수 */
#sec06 .guard-box {
    padding: var(--one-space-r);
    border: 2px solid var(--point-color);
    border-radius: var(--ui-radius-lg);
    background: #fff;
    max-width: 1100px;
    margin: var(--one-space-r) auto 0;
}
#sec06 .guard-box__role { display: flex; align-items: center; gap: var(--one-space-s); }
#sec06 .guard-box__txt { flex: 1 1 0; min-width: 0; }
#sec06 .guard-box__tit { margin-bottom: var(--one-gap-r);}
#sec06 .guard-box__img { flex: 0 0 270px; }
#sec06 .guard-box__img img { display: block; }

#sec06 .guard-box__merit { margin-top: var(--one-space-r); }
#sec06 .merit-tit { margin-bottom:var(--one-gap-r); }


/* ============================================================
   section07 — 일반진료
   구성: 헤드 · 치아개수 메모 · 충치치료 · 자연치아 살리기 · 잇몸치료 · 치아 포기 안함
         · 임상 보철 수복 증례 · 틀니치료 · 틀니 종류 · 틀니 장점 · 틀니 임상 증례 · 건강보험
   시안 고유값: 라이트민트 #e4f6f6 / 라벤더그레이 #f7f8fc / 레드 #fe1f24 / 옐로 #fff79a
============================================================ */

#sec07 { display: block; }
#sec07 .con-inner {
    padding: var(--one-space-lg) 0;
    max-width: 1300px;
}
#sec07 img { height: auto; }
#sec07 .s07-band { position: relative; width: 100%; }
#sec07 .s07-yl { color: #fff79a; }
#sec07 .s07-rd { color: #fe1f24; }

/* 말풍선(손글씨 포함 통이미지) — 원본 비율 유지 */
#sec07 .s07-bubble { margin-bottom: var(--one-gap-lg); line-height: 0; }
#sec07 .s07-bubble img { display: inline-block; width: auto; max-width: 100%; }


/* ---- 1) 헤드 ---- */
#sec07 .s07-head { background: #fff; border-bottom: 1px solid var(--ui-line); }
#sec07 .s07-head__tit { color: #000; margin-top: var(--one-gap-lg); }


/* ---- 2) 치아 개수 메모 (통이미지) ---- */
#sec07 .s07-memo { background: #fff; }
#sec07 .memo-box { max-width: 1276px; margin: 0 auto; }


/* ---- 3) 빠를수록 좋은 충치 치료 ---- */
#sec07 .s07-caries { background: #e4f6f6; }
#sec07 .s07-caries__tit { color: #000; margin-bottom: var(--one-gap-lg); }
#sec07 .caries-img { max-width: 848px; margin: var(--one-space-r) auto 0; }


/* ---- 4) 자연치아 살리기 시스템 ----
   시안: 카드가 흰색 / 라벤더그레이 경계를 걸쳐 있어 밴드를 나누지 않고 2단 gradient 로 처리 */
#sec07 .s07-save {
  --s07-save-split: 55%;
  background: linear-gradient(180deg, #fff 0 var(--s07-save-split), #f7f8fc var(--s07-save-split));
}
#sec07 .s07-save__tit { color: #000; margin-bottom: var(--one-space-r); }

#sec07 .save-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--one-space-s); max-width: 1210px; margin: 0 auto; }
#sec07 .save-cards li { background: #fff; border: 1px solid var(--point-color); border-top-width: 6px; }
#sec07 .save-img img { display: block; width: 100%; }
#sec07 .save-txt { padding: var(--one-gap-xl) var(--one-gap-lg) var(--one-space-s); }
#sec07 .save-name { color: var(--point-color02); margin-bottom: var(--one-gap-r); }
#sec07 .save-mimg { max-width: 640px; margin: 0 auto; }


/* ---- 5) 잇몸 치료 ----
   시안: 진행단계 박스가 흰색 / 라이트민트 경계를 걸침 */
#sec07 .s07-gum {
  --s07-gum-split: 47%;
  background: linear-gradient(180deg, #fff 0 var(--s07-gum-split), #e4f6f8 var(--s07-gum-split));
}
#sec07 .s07-gum__tit { color: var(--main-color); padding-bottom: var(--one-space-s); border-bottom: 1px solid var(--ui-line); }
#sec07 .gum-lead { margin-top: var(--one-space-s); }

/* 진행 단계 — 박스 프레임·상단 라벨까지 포함된 통이미지이므로 컨테이너는 폭만 잡는다 */
#sec07 .gum-box { max-width: 1304px; margin: var(--one-space-r) auto 0; }
#sec07 .gum-box__img img { display: block; width: 100%; }


/* ---- 6) 치아를 쉽게 포기하지 않습니다 ---- */
#sec07 .s07-keep { background: #f7f8fc; }
#sec07 .keep-row { display: flex; align-items: center; justify-content: space-between; gap: var(--one-space-s); }
#sec07 .keep-txt {
    flex: 1 1 0;
    min-width: 0;
    color: #4a4a4a;
    padding-bottom: var(--one-space-lg);
}
#sec07 .keep-tit { color: #4a4a4a; }
#sec07 .keep-sub { margin: var(--one-gap-lg) 0 var(--one-gap-r); }
#sec07 .keep-img { flex: 0 0 384px; margin-bottom: -5px;}
#sec07 .keep-img img { display: block; width: 100%; }


/* ---- 7) 임상 보철 수복 증례 ---- */
#sec07 .s07-case { background: var(--point-color) url(../img/section07/sec07-bg-case.jpg) no-repeat center / cover; }
#sec07 .s07-case__lead { color: #fff; }
#sec07 .s07-case__tit { color: #fff; margin-top: var(--one-gap-sm); }
#sec07 .case-box { max-width: 1200px; margin: var(--one-space-r) auto 0; }


/* ---- 8) 의료진의 노하우가 필요한 틀니치료 ---- */
#sec07 .s07-denture { background: #fff; }
#sec07 .s07-denture__tit { color: #000; margin-bottom: var(--one-gap-lg); }
#sec07 .denture-box { max-width: 1090px; margin: var(--one-space-r) auto 0; }


/* ---- 9) 틀니 종류 ---- */
#sec07 .s07-kind { background: #e4f6f6; }

/* 제목 pill — 좌우 라인 */
#sec07 .kind-hd { display: flex; align-items: center; justify-content: center; gap: 0; color: var(--point-color02); }
#sec07 .kind-hd > span {
  flex-shrink  : 0;
  padding      : 0.4em 2em;
  border       : 1px solid var(--point-color02);
  border-radius: var(--ui-radius-pill);
  background   : #fff;
}
#sec07 .kind-hd::before,
#sec07 .kind-hd::after { content: ""; flex: 1 1 0; max-width: 400px; height: 1px; background: var(--point-color); }

#sec07 .kind-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--one-space-s); max-width: 1250px; margin: var(--one-space-r) auto 0; }
#sec07 .kind-cards li { background: #f9f9f9; border: 1px solid var(--point-color); border-top-width: 6px; }
#sec07 .kind-img img { display: block; width: 100%; }
#sec07 .kind-txt { padding: var(--one-gap-xl) var(--one-gap-lg) var(--one-space-s); }
#sec07 .kind-name { color: var(--main-color); margin-bottom: var(--one-gap-r); }
#sec07 .kind-mimg { max-width: 646px; margin: var(--one-space-r) auto 0; }


/* ---- 10) 틀니 치료 장점 ---- */
/* 박스 레이아웃은 공통 컴포넌트 .ui-titbox (common-ui.css) — 여기선 밴드 배경/여백만 */
#sec07 .s07-merit { background: var(--point-color); }
#sec07 .s07-merit .con-inner { padding: var(--one-space-xl) 0 var(--one-space-lg); }


/* ---- 11) 틀니 임상 증례 ---- */
#sec07 .s07-dcase { background: var(--main-color) url(../img/section07/sec07-bg-denture.jpg) no-repeat center / cover; }
#sec07 .s07-dcase__lead { color: #fff; }
#sec07 .s07-dcase__tit { color: #fff; margin-top: var(--one-gap-sm); }
#sec07 .dcase-box { max-width: 1200px; margin: var(--one-space-r) auto 0; }


/* ---- 12) 건강보험 적용 혜택 ---- */
#sec07 .s07-ins { background: #f1f2f4; }
#sec07 .ins-row { display: flex; align-items: center; justify-content: space-between; gap: var(--one-space-s); }
#sec07 .ins-txt {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--one-space-safe) 0;
}
/* ※ 인라인 강조가 들어가므로 flex 컨테이너로 만들지 말 것 (자식이 블록화되어 줄이 끊김) */
#sec07 .ins-tit { color: var(--main-color); }
#sec07 .ins-tit i { font-style: normal; color: var(--point-color); }
#sec07 .ins-tit i:first-child { margin-right: var(--one-gap-sm); }
#sec07 .ins-tit i:last-child  { margin-left : var(--one-gap-sm); }
#sec07 .ins-tit__b { font-weight: 400; }

/* 스크린리더 전용 `.blind` 는 common-style.css 유틸로 승격됨 (footer 에서도 사용) */
#sec07 .ins-list {
    margin-top: var(--one-gap-sm);
}
#sec07 .ins-list li { position: relative; display: flex; align-items: baseline; gap: var(--one-gap-lg); padding: var(--one-gap-xs) 0 var(--one-gap-xs) var(--one-gap-r); }
#sec07 .ins-list li::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0.89em;
    width: 6px;
    height: 6px;
    background: var(--main-color);
}
#sec07 .ins-list b { flex-shrink: 0; color: var(--main-color); }
#sec07 .ins-div { font-style: normal; margin: 0 var(--one-gap-sm); color: var(--gray-color01); }

#sec07 .ins-table {
    width: 100%;
    max-width: 400px;
    margin-top: var(--one-gap-r);
    border-collapse: collapse;
    text-align: center;
    border-top: 1px solid var(--ui-line);
}
#sec07 .ins-table th { padding: var(--one-gap-sm) var(--one-gap-r); border-bottom: 1px solid var(--ui-line); font-size: var(--one-caption); font-weight: 400; color: var(--one-txt-color); }
#sec07 .ins-table td {
    padding: var(--one-gap-sm);
    background: #fff;
    color: var(--main-color);
}
#sec07 .ins-rate {
    font-size: var(--one-p-tit) !important;
    font-weight: 700;
}

#sec07 .ins-img {
    width: 55%;
    max-width: 658px;
}
#sec07 .ins-img img { display: block; width: 100%; }


/* ============================================================
   section08 — 소아진료
   구성: 헤드 · 예방 프로그램 · 유치 교환기 치료 · 치수치료 · 크라운 안내바 · 유치 크라운 종류
   시안 고유값: 코랄 #f9705e / 미드블루 #4d90de / 서브틸 #2898ae / 라이트틸 밴드 #d2eff5
============================================================ */

#sec08 { display: block; }
#sec08 .con-inner { padding: var(--one-space-lg) 0; }
#sec08 img { height: auto; }
#sec08 .s08-band { position: relative; width: 100%; }
#sec08 .s08-yl { color: #fff79a; }


/* ---- 1) 헤드 ---- */
#sec08 .s08-head { background: #fff; border-bottom: 1px solid var(--ui-line); }
#sec08 .s08-head__tit { color: #000; margin: var(--one-gap-lg) 0; }


/* ---- 2) 예방 프로그램 ---- */
#sec08 .s08-prev { background: #fff; }
#sec08 .prev-row { display: flex; align-items: center; justify-content: center; gap: var(--one-space-xl); }
#sec08 .prev-img { flex: 0 0 477px; }
#sec08 .prev-img img { display: block; width: 100%; }

#sec08 .prev-list { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--one-space-s); }
#sec08 .prev-list li { display: flex; align-items: flex-start; gap: var(--one-space-s); }

/* 라벨 pill — 항목별 색상 */
#sec08 .prev-tag {
  flex-shrink    : 0;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  width          : 172px;
  min-height     : 58px;
  padding        : 0.2em 0.6em;
  border-radius  : var(--ui-radius-pill);
  color          : #fff;
  line-height    : 1.2;
}
#sec08 .prev-tag em { font-style: normal; font-size: var(--one-caption); font-weight: 400; }
#sec08 .prev-item--fl .prev-tag { background: #f9705e; }
#sec08 .prev-item--sl .prev-tag { background: #4d90de; }
#sec08 .prev-item--ck .prev-tag { background: #2898ae; }
#sec08 .prev-item--fl b { color: #f9705e; }
#sec08 .prev-item--sl b { color: #4d90de; }
#sec08 .prev-item--ck b { color: #2898ae; }
#sec08 .prev-txt { flex: 1 1 0; min-width: 0; }


/* ---- 3) 유치 교환기 치료 ---- */
#sec08 .s08-change { background: #f7f9fb; }
#sec08 .s08-change__tit { color: var(--main-color); }
#sec08 .change-tbl { max-width: 711px; margin: var(--one-space-r) auto 0; }
#sec08 .change-tbl img { display: block; width: 100%; }


/* ---- 4) 치수치료 ---- */
#sec08 .s08-pulp { background: #fff; }
#sec08 .s08-pulp__tit { color: var(--point-color02); }
#sec08 .pulp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--one-space-s); margin-top: var(--one-space-r); }
#sec08 .pulp-txt { flex: 1 1 0; min-width: 0; }
#sec08 .pulp-img { flex: 0 0 260px; }
#sec08 .pulp-img img { display: block; width: 100%; }


/* ---- 5) 크라운 안내 바 ---- */
#sec08 .s08-bar { background: var(--point-color02); }
#sec08 .s08-bar .con-inner { padding: var(--one-gap-lg) 0; }
#sec08 .s08-bar__txt { color: #fff; }


/* ---- 6) 유치 크라운 치료 종류 ---- */
#sec08 .s08-crown { background: #d2eff5; }

/* 제목 좌우 슬래시 장식 */
#sec08 .s08-crown__tit { color: var(--main-color); }
#sec08 .s08-crown__tit > span { position: relative; display: inline-block; padding: 0 var(--one-space-xl); }
#sec08 .s08-crown__tit > span::before,
#sec08 .s08-crown__tit > span::after {
  position   : absolute;
  content    : "/";
  top        : 50%;
  font-weight: 400;
  color      : var(--point-color);
  transform  : translateY(-50%);
}
#sec08 .s08-crown__tit > span::before { left : var(--one-space-s); }
#sec08 .s08-crown__tit > span::after  { right: var(--one-space-s); }

#sec08 .crown-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--one-space-s); max-width: 1200px; margin: var(--one-space-r) auto 0; }
/* 흰 박스(패딩만) 안쪽에 점선 보더 박스를 한 겹 더 — 시안 구조 */
#sec08 .crown-cards li {
  padding      : var(--one-gap-r);
  border-radius: var(--ui-radius-lg);
  background   : #fff;
}
#sec08 .crown-inner {
  display      : flex;
  align-items  : center;
  gap          : var(--one-space-s);
  padding      : var(--one-space-s);
  border       : 2px dashed var(--point-color);
  border-radius: var(--ui-radius-s);
}
#sec08 .crown-img { flex: 0 0 34%; max-width: 200px; }
#sec08 .crown-img img { display: block; width: 100%; }
#sec08 .crown-txt { flex: 1 1 0; min-width: 0; }
#sec08 .crown-name { color: #000; margin-bottom: var(--one-gap-lg); }

/* 스펙 — 라벨(dt) 열 + 값(dd) 열 2열 그리드 (항목당 1행) */
#sec08 .crown-spec {
  display              : grid;
  grid-template-columns: auto 1fr;
  align-items          : center;
  gap                  : var(--one-gap-sm) var(--one-gap-r);
}
#sec08 .crown-spec dt {
  flex-shrink  : 0;
  padding      : 0.25em;
  border-radius: var(--ui-radius-s);
  background   : #2898ae;
  color        : #fff;
  font-size    : var(--one-caption);
  font-weight  : 500;
  text-align   : center;
  width: 80%;
}
#sec08 .crown-spec dt.lg{ padding      : 0.25em 0.9em; width: 100%;}
#sec08 .crown-spec dd { min-width: 0; }


/* ============================================================
   section09 — 장비소개 / 둘러보기 / 진료안내·오시는길
   ※ 슬라이드(.jangbi_container / .tour_container)는 slide.css 담당 — 여기서 건드리지 말 것
============================================================ */

#sec09 { display: block; }
#sec09 .con-inner { padding: var(--one-space-lg) 0; }
#sec09 img { height: auto; width: 100%; }
#sec09 .s09-band { position: relative; width: 100%; }


/* ---- 1) 장비소개 ---- */
#sec09 .s09-equip { background: #e5f6f7; }   /* .jangbi_container 배경색과 동일 */
#sec09 .s09-equip__tit { color: var(--main-color); margin-bottom: var(--one-gap-lg); }


/* ---- 2) 치과 둘러보기 ---- */
#sec09 .s09-tour { background: #fff; }
#sec09 .s09-tour__tit { color: var(--one-txt-color); }

/* 타이틀 영역 ↔ 슬라이드 사이 간격 (con-inner 하단 여백) */
#sec09 .s09-equip .con-inner,
#sec09 .s09-tour .con-inner { padding: var(--one-space-lg) 0 var(--one-space-r); }


/* ---- 3) 진료안내 / 오시는길 ---- */
#sec09 .s09-info { background: #fff; }
#sec09 .s09-info__tit { color: var(--main-color); margin: var(--one-gap-xl) 0 var(--one-gap-r); }

/* 진료과목 = 헤더 + 리스트 한 래퍼. 상단 여백은 래퍼 패딩으로만 준다 */
#sec09 .sbj-wrap { padding-top: var(--one-space-s); }
#sec09 .sbj-wrap .s09-info__tit { margin-top: 0; }

/* 진료과목 3열
   시안 구조: [아이콘 + 아이콘 아래 과목명(중앙)] 좌측 / 세부항목 우측(아이콘 기준 세로 중앙) */
#sec09 .sbj-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--one-space-s) var(--one-gap-xl); }
#sec09 .sbj-list > li { display: flex; align-items: flex-start; gap: var(--one-gap-lg); }

/* min-width:0 — 없으면 nowrap 과목명의 min-content 폭 때문에 아이콘 칸이 넓어짐
   ("턱관절 클리닉"·"구강연조직질환" 에서 아이콘이 커지는 현상) */
#sec09 .sbj-head {
  width          : 40%;
  min-width      : 0;
  text-align     : center;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
}
#sec09 .sbj-ico { display: block; }
#sec09 .sbj-ico img { display: block; width: 100%; max-width: 118px; }
/* 과목명은 아이콘 폭을 넘어도 좌우로 균등하게 삐져나오게 (시안: "턱관절 클리닉") */
#sec09 .sbj-name { color: #000; margin-top: var(--one-gap-r); white-space: nowrap; }

/* 세부항목은 아이콘(118px) 기준 세로 중앙 — 항목이 많으면 위·아래로 균등하게 넘침 */
#sec09 .sbj-detail {
  flex           : 1 1 0;
  min-width      : 0;
  display        : flex;
  flex-direction : column;
  justify-content: center;
  min-height     : 118px;
}
#sec09 .sbj-detail li { padding-left: var(--one-gap-r); padding-bottom: var(--one-gap-xs); }
#sec09 .sbj-detail li::before { left: 2px; top: 0.72em; }

/* 진료시간 · 오시는길 / 지도 */
#sec09 .s09-info { overflow-x: hidden; }   /* 지도 우측 풀블리드 넘침 흡수 */
#sec09 .info-row {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
  gap            : var(--one-space-s);
  padding-top    : var(--one-space-lg);
}
/* 시안 실측: 텍스트 490 / 지도 1010(우측 화면 끝까지 붙음) @1903 */
#sec09 .info-txt { flex: 0 0 40%; min-width: 0; max-width: 490px; }
#sec09 .info-map {
  flex        : 1 1 0;
  min-width   : 0;
  /* con-inner 오른쪽 여백만큼 밖으로 빼내 화면 우측 끝에 붙임 */
  margin-right: calc((100vw - 100%) / -2);
  padding-top : var(--one-gap-xl);
}
#sec09 .info-map img { display: block; width: 100%; }

/* 진료시간 리스트 — 요일은 글자 하나씩 span, 영역 안에서 space-between */
#sec09 .time-list li {
  display      : flex;
  align-items  : center;
  gap          : var(--one-space-s);
  padding      : var(--one-gap-sm) 0;   /* 시안 행 간격 ≒ 60px */
  border-bottom: 1px dashed var(--ui-line);
}
#sec09 .time-list li:last-child { border-bottom: 0; }
#sec09 .time-day {
  flex-shrink    : 0;
  display        : flex;
  justify-content: space-between;
  width          : 5em;
  font-size      : var(--one-p-tit);
  font-weight    : 500;
  color          : var(--one-txt-color);
}
/* AM/PM 은 시간과 같은 크기 (시안보다 키움) */
#sec09 .time-val {
  font-size     : var(--one-p-tit);
  font-weight   : 400;
  letter-spacing: 0.1em;
  color         : var(--one-txt-color);
}
#sec09 .time-val em,
#sec09 .time-val i { font-style: normal; font-size: inherit; }
#sec09 .time-pt { color: var(--sub-color05); }
#sec09 .time-note { color: var(--gray-color01); margin-top: var(--one-gap-r); }
#sec09 .time-note em { font-style: normal; margin: 0 var(--one-gap-sm); }

/* 오시는 길 */
#sec09 .addr-txt { color: var(--one-txt-color); }
#sec09 .addr-txt + .addr-txt { margin-top: var(--one-gap-sm); }
#sec09 .park-box {
  margin-top   : var(--one-gap-lg);
  padding      : var(--one-gap-r) var(--one-gap-xl);
  border-radius: var(--ui-radius);
  background   : var(--point-color03);
}
#sec09 .park-box em { font-style: normal; margin: 0 var(--one-gap-sm); font-weight: 400; }
#sec09 .park-box .cp-txt { margin-top: var(--one-gap-xs); }


/* ---- 4) 전화 연결 밴드 ---- */
#sec09 .s09-tel { background: var(--main-color); }
#sec09 .s09-tel .con-inner { padding: var(--one-gap-xl) 0; }
#sec09 .tel-row { display: flex; align-items: center; justify-content: space-between; gap: var(--one-space-s); }
#sec09 .tel-num { font-size: calc(var(--one-hd1) * 1.5); font-weight: 800; letter-spacing: -0.01em; color: var(--sub-color04); }
#sec09 .tel-num__pre { color: rgba(255, 255, 255, 0.45); }
#sec09 .tel-desc { color: rgba(255, 255, 255, 0.55); }


/* ============================================================
   반응형 — 태블릿 (max-width: 1024px)
============================================================ */
@media all and (max-width: 1024px) {

  /* 상단 비디오 — 기기 높이만큼 쓰되 550px 를 넘지 않게.
     세로(9:16) 영상이라 그대로 두면 폭 1024 에서 1820px 까지 길어진다.
     dvh 는 모바일 브라우저 주소창 높이 변화 대응(미지원 시 vh 로 폴백) */
  #main_video {
    height    : 100vh;
    height    : 100dvh;
    max-height: 550px;
    overflow  : hidden;
  }
  #main_video > video {
    width     : 100%;
    height    : 100%;
    object-fit: cover;   /* 비율 유지하며 잘라내기 — 늘어나지 않는다 */
  }

  /* ============ HERO ============ */
  /* crop/m 없음 → 규칙대로 PC 이미지 비율만 축소. 우측 이미지는 텍스트 아래로 내린다 */
  #hero {
    --hero-h   : auto;
    --hero-body: 20px;
  }
  #hero .hero-slide { padding: var(--one-space-r) 0 var(--one-space-lg); }
  #hero .hero-inner { padding: 0 var(--one-space-s); }
  #hero .hero-tit { font-size: var(--one-hd3); }
  #hero .hero-txt { max-width: none; }

  /* 슬라이드02 배경: cover 로 두면 밴드가 낮아져 치아가 상하로 심하게 잘린다
     → 높이에 맞춰 비율 유지(auto 100%) + 우측 정렬로 치아를 온전히 노출 */
  #hero .hero-slide--care { background-size: auto 100%; background-position: right center; }

  #hero .dx-pill,
  #hero .care-cert,
  #hero .hero-slide--pain .hero-desc { margin-top: var(--one-gap-xl); }

  /* 절대배치 해제 → 문서 흐름으로 복귀.
     통이미지라 폭만 줄이면 내부 텍스트도 함께 비율 축소된다 */
  #hero .hero-vis--dx,
  #hero .hero-vis--pain {
    display  : block;
    position : static;
    transform: none;
    width    : 100%;
    margin   : var(--one-space-s) auto 0;
  }
  #hero .hero-vis--dx   { max-width: 425px; }
  #hero .hero-vis--pain { max-width: 648px; }

  /* .faq-watermark / .ace-abbr 는 clamp·calc 라 자동 축소 — px 재정의 불필요 */
  #sec01 .faq-card { padding: var(--one-space-s); }
  #sec01 .ace-hanja { font-size: 44px; }

  #sec02 .doc-cred { gap: 0 var(--one-gap-lg); }

  /* ---- section03 ---- */
  #sec03 .pt-row { gap: var(--one-gap-xl); }
  #sec03 .pt-label { margin-bottom: var(--one-gap-xl); }
  #sec03 .pt-tit { margin-bottom: var(--one-gap-lg); }
  #sec03 .sinus-top { gap: var(--one-space-s); }

  /* 배경 — 모바일 전용 세로형(m/)으로 교체. .view-pc/.view-mo 와 동일 분기(1024) */
  #sec03 .s03-point--1 { background-image: url(../img/section03/m/sec03-bg-p1.jpg); }
  #sec03 .s03-point--2 { background-image: url(../img/section03/m/sec03-bg-p2.jpg); }
  #sec03 .s03-point--3 { background-image: url(../img/section03/m/sec03-bg-p3.jpg); }
  #sec03 .s03-point--4 { background-image: url(../img/section03/m/sec03-bg-p4.jpg); }

  /* m/ 모바일 이미지는 영역을 꽉 채움 */
  #sec03 .graft-since img.view-mo { width: 100%; }

  /* ---- section04 ---- */
  #sec04 .kind-row { gap: var(--one-gap-xl); }
  #sec04 .kind-img { flex-basis: 24%; }
  #sec04 .mini-txt { max-width: 60%; }
  #sec04 .mini-img { width: 46%; }
  #sec04 .gum-txt  { max-width: 66%; }
  #sec04 .white-drop { height: 70px; }
  /* m/ 카드가 가로형 재편집본이므로 이미지 교체 시점(1024)에 맞춰 1열로 전환 */
  #sec04 .white-cards { grid-template-columns: 1fr; gap: var(--one-gap-lg); max-width: 720px; margin-left: auto; margin-right: auto; }
  /* 박스가 좁아지는 만큼 타이틀 비중 확대 */

  /* 배경 — 모바일 전용 세로형(m/)으로 교체 */
  #sec04 .s04-gum  { background-image: url(../img/section04/m/sec04-bg-gum.jpg); }
  #sec04 .s04-case { background-image: url(../img/section04/m/sec04-bg-case.jpg); }

  /* ---- section05 ---- */
  /* 뱃지 폭은 em 기준으로 자동 축소(5em × --one-caption 13px ≒ 65px), 높이만 보정 */
  #sec05 .diff-num { height: 64px; }
  #sec05 .diff-num::before { height: 28px; }
  #sec05 .diff-card { padding: var(--one-space-s) 88px; }
  #sec05 .diff-steps { gap: var(--one-gap-xl); }
  #sec05 .need-hd { gap: var(--one-gap-xl); }
  #sec05 .need-ico { max-width: 200px; }
  #sec05 .case-body { gap: var(--one-gap-xl); }
  #sec05 .case-img { flex-basis: 250px; }
  #sec05 .case-body p { padding-left: var(--one-gap-xl); }

  /* ---- section06 ---- */
  /* .s06-vline 높이는 --one-space-lg 토큰이라 자동 축소 */
  #sec06 .disc-doc__label,
  #sec06 .disc-doc__txt { padding: var(--one-space-s) var(--one-gap-lg); }

  /* 두개골 — 폭 축소(넘침량도 함께 축소) */
  #sec06 .symp-row { gap: var(--one-gap-lg); }
  #sec06 .symp-txt { padding-right: 44%; }
  #sec06 .symp-skull { width: 44%; bottom: -20px; }

  #sec06 .s06-treat .con-inner { padding-bottom: var(--one-space-lg); }
  /* 프레임 이미지(.treat-frame)는 view-pc 로 숨겨지므로 카드 배경을 흰색으로 직접 지정 */
  #sec06 .treat-card { padding: var(--one-space-s) var(--one-gap-xl); background: #fff; }
  #sec06 .treat-row li { padding: 0 var(--one-gap-lg); }
  #sec06 .treat-ico { height: 104px; }
  #sec06 .treat-row--2 { margin-top: var(--one-space-s); }

  #sec06 .phl-inner { gap: var(--one-gap-xl); }
  #sec06 .phl-img { flex-basis: 30%; }

  #sec06 .comp-row { gap: var(--one-gap-lg); }
  #sec06 .comp-cause { flex-basis: 28%; min-height: 0; padding: var(--one-space-s) var(--one-gap-r); }
  #sec06 .comp-arrow { flex-basis: 64px; }
  #sec06 .comp-result { gap: var(--one-gap-r) var(--one-gap-xl); min-height: 0; padding: var(--one-space-s) var(--one-gap-lg); }

  #sec06 .gbar-list { gap: var(--one-gap-xl); }
  #sec06 .gbar-list li { gap: var(--one-gap-r); }
  #sec06 .gbar-ico { width: 72px; height: 72px; }

  /* 배경 — 모바일 전용 세로형(m/)으로 교체. .view-pc/.view-mo 와 동일 분기(1024) */
  #sec06 .s06-oral { background-image: url(../img/section06/m/sec06-bg-oral.jpg); }
  #sec06 .s06-oral .con-inner { padding: var(--one-space-lg) 0; }
  #sec06 .oral-pill { padding: var(--one-space-s) var(--one-gap-xl); border-radius: var(--ui-radius-lg); }

  #sec06 .guard-lead { gap: var(--one-gap-xl); }
  #sec06 .guard-box { padding: var(--one-space-s) var(--one-gap-xl); }
  #sec06 .guard-box__role { gap: var(--one-gap-xl); }
  #sec06 .guard-box__img { flex-basis: 26%; }
  #sec06 .guard-box__merit { margin-top: var(--one-space-s); }

  /* ---- section07 ---- */
  #sec07 .save-cards,
  #sec07 .kind-cards { gap: var(--one-gap-xl); }
  #sec07 .save-txt,
  #sec07 .kind-txt { padding: var(--one-gap-lg) var(--one-gap-r) var(--one-gap-xl); }


  #sec07 .keep-row { gap: var(--one-gap-xl); }
  #sec07 .keep-img { flex-basis: 30%; }

  #sec07 .kind-hd::before,
  #sec07 .kind-hd::after { max-width: 200px; }


  #sec07 .ins-row { gap: var(--one-gap-xl); }
  #sec07 .ins-img { width: 46%; }

  /* 배경 — 모바일 전용 세로형(m/)으로 교체. .view-pc/.view-mo 와 동일 분기(1024) */
  #sec07 .s07-case  { background-image: url(../img/section07/m/sec07-bg-case.jpg); }
  #sec07 .s07-dcase { background-image: url(../img/section07/m/sec07-bg-denture.jpg); }

  /* m/ 통이미지는 영역을 꽉 채움 */
  #sec07 .memo-box,
  #sec07 .caries-img,
  #sec07 .gum-box__img,
  #sec07 .case-box,
  #sec07 .denture-box,
  #sec07 .dcase-box { max-width: none; }

  /* ---- section08 ---- */
  #sec08 .prev-row { gap: var(--one-space-s); }
  #sec08 .prev-img { flex-basis: 34%; }
  #sec08 .prev-list { gap: var(--one-gap-xl); }
  #sec08 .prev-list li { gap: var(--one-gap-xl); }
  #sec08 .prev-tag { width: 140px; min-height: 50px; }

  #sec08 .pulp-row { gap: var(--one-gap-xl); }
  #sec08 .pulp-img { flex-basis: 22%; }

  #sec08 .crown-cards { gap: var(--one-gap-xl); }
  #sec08 .crown-inner { gap: var(--one-gap-xl); padding: var(--one-gap-xl); }

  /* ---- section09 ---- */
  #sec09 .s09-equip .con-inner,
  #sec09 .s09-tour .con-inner { padding: var(--one-space-lg) 0 var(--one-space-s); }

  #sec09 .sbj-list { gap: var(--one-space-s) var(--one-gap-lg); }
  /* [제거] .sbj-head flex-basis — width:40% 방식으로 바뀐 뒤에도 남아 있어 폭을 px 로 고정하고 있었다 */
  #sec09 .sbj-detail { min-height: 92px; }
  /* 컬럼이 좁아져 과목명이 세부항목과 겹치므로 아이콘 폭 안에서 줄바꿈 */
  #sec09 .sbj-name { white-space: normal; margin-top: var(--one-gap-sm); }

  /* 세로 스택 — 지도 풀블리드 해제 */
  #sec09 .info-row { flex-direction: column; align-items: stretch; gap: var(--one-space-s); }
  #sec09 .info-txt { max-width: none; }
  #sec09 .info-map { flex: 0 0 auto; margin-right: 0; }

  #sec09 .tel-num { font-size: var(--one-hd2); }

}


/* ============================================================
   반응형 — 모바일 (max-width: 639px)
============================================================ */
@media all and (max-width: 639px) {

  /* ============ HERO ============ */
  #hero { --hero-body: 16px; }
  #hero .hero-tit { font-size: 26px; }
  /* ⚠️ .hero-desc 의 <br> 는 지우지 말 것 — 문장 사이에 공백이 없어 제거하면
   한 덩어리가 되고 keep-all 때문에 줄바꿈이 안 돼 가로 스크롤이 생긴다.
   분기는 마크업의 <br class="view-pc"> / <br class="view-mo"> 로 (전환 기준 1024) */
  #hero .dx-pill { padding: 0.6em 1em; line-height: 1.5; white-space: normal; }
  #hero .hero-inner { padding: 0 var(--one-space-safe); }
  #hero .care-cert { gap: var(--one-gap-sm); }
  #hero .care-cert img { flex: 0 0 28px; width: 28px; }
  #hero .hero-pager { bottom: 14px; }

  #sec01 .faq-card { padding: var(--one-gap-xl) var(--one-gap-lg); }
  #sec01 .faq-a br { display: none; }   /* 모바일 자연 줄바꿈 */

  /* CTA 세로 전환 */
  #sec01 .faq-cta { flex-direction: column; gap: var(--one-space-s); }
  #sec01 .faq-cta__col { max-width: 100%; width: 100%; }
  #sec01 .faq-cta__div { display: none; }
  #sec01 .faq-cta__btn { width: 100%; min-width: 0; }

  /* ACE 세로 재배치 (한자 숨김) — 이니셜은 calc 로 자동 축소 */
  #sec01 .ace-item { grid-template-columns: auto 1fr; gap: var(--one-gap-lg); }
  #sec01 .ace-hanja { display: none; }
  #sec01 .ace-sign img { height: 28px; }

  /* 약속 세로 스택 */
  #sec01 .promise-item,
  #sec01 .promise-item.rev { flex-direction: column; text-align: center; gap: var(--one-gap-r); }
  #sec01 .promise-item.rev .promise-txt { text-align: center; }
  #sec01 .promise-item .promise-txt br { display: none; }
  /* 스택 시 아이콘 상단 중앙 — % 유지하되 모바일 상한 축소 */
  #sec01 .promise-ico { width: 30%; max-width: 96px; }

  /* ---- section02 ---- */
  /* 인트로 세로 스택 */
  #sec02 .s02-intro__body { flex-direction: column; align-items: stretch; gap: var(--one-gap-lg); }
  #sec02 .s02-intro__cert { flex: 1 1 auto; }
  #sec02 .s02-intro__txt .hd2 br { display: none; }

  /* 의료진 카드 세로 스택 (사진 상단 중앙) */
  #sec02 .doc-card,
  #sec02 .doc-card.rev { flex-direction: column; align-items: center; }
 #sec02 .doc-photo {
    flex: 0 0 auto;
    width: 85%;
    margin: 0 auto;
    margin-bottom: var(--one-gap-lg);
}
  #sec02 .doc-info { width: 100%; }
  #sec02 .doc-certrow { justify-content: space-between; gap: var(--one-gap-lg); }
  #sec02 .doc-eao { width: 28%; }
  #sec02 .doc-cred,
  #sec02 .doc-cred.one-col { grid-template-columns: 1fr; }

  /* 학회활동 세로 스택 (사진 상단) — 배경 장식 아이콘은 위치·크기만 재조정 */
  #sec02 .acad-wrap {padding-top: 0;}
  #sec02 .acad-item,
  #sec02 .acad-item.rev { flex-direction: column-reverse; gap: var(--one-gap-lg); }
  #sec02 .acad-item:nth-child(1) { background-position: left 0px top 70%; background-size: auto clamp(35px, 24vw, 230px); }
  #sec02 .acad-item:nth-child(2) { background-position: right 0px top 56%; background-size: auto clamp(35px, 21vw, 230px); }
  #sec02 .acad-item:nth-child(3) { background-position: left 0px top 49%; background-size: auto clamp(42px, 32vw, 290px); }
  #sec02 .acad-logo { margin-top: var(--one-gap-r); }
  #sec02 .s02-bottom img { width: 200%; margin-left: -50%; }
  #sec02 .acad-photo { flex: 0 0 auto; width: 100%; }
  #sec02 .acad-desc { max-width: 100%; }
  /* 스택 시 중앙 정렬 + 20% 여백 리셋 (txt-rg/txt-lf 무력화) */
  #sec02 .acad-txt { text-align: center; }
  #sec02 .acad-item .acad-txt,
  #sec02 .acad-item.rev .acad-txt { padding: 0 var(--one-space-safe); }

  /* ---- section03 ---- */
  /* POINT 세로 스택 (텍스트 → 이미지) — m/ 모바일 이미지가 영역을 꽉 채움 */
  #sec03 .pt-row { flex-direction: column; align-items: stretch; gap: var(--one-gap-xl); }
  #sec03 .s03-point--1 .pt-img,
  #sec03 .s03-point--2 .pt-img,
  #sec03 .s03-point--3 .pt-img,
  #sec03 .s03-point--4 .pt-img { flex: 0 0 auto; width: 75%; max-width: none; margin: 0 auto; padding-top: var(--one-space-r); }
  #sec03 .con-inner { text-align: center; }
  /* 본문 <br>은 문장 중간 분리라 모바일에서도 유지 (제거 시 단어가 붙음) */

  /* 상악동 세로 스택 (일러스트 상단) */
  #sec03 .sinus-top { flex-direction: column-reverse; align-items: center; gap: var(--one-gap-xl); }
  #sec03 .sinus-ill { flex: 0 0 auto; width: 56%; }
  #sec03 .sinus-txt { width: 100%; }
  #sec03 .sinus-note { justify-content: center; gap: var(--one-gap-sm); }
  #sec03 .sinus-bulb { width: 22px; }
  #sec03 .s03-sinus__case img {margin-left: -2%;}
  #sec03 .s03-sinus__case .img-box { overflow: visible;}
  #sec03 .s03-pill { padding: var(--one-gap-r) var(--one-gap-xl); border-radius: var(--ui-radius-lg); }
  #sec03 .s03-tag { max-width: 44px; margin-right: var(--one-gap-sm); }

  /* 와이드 통이미지(STEP 카드·비교표 등)는 m/ 모바일 재편집본으로 교체되므로
     컨테이너 max-width 해제 → 화면 폭 100% */
  #sec03 .dg-steps,
  #sec03 .dg-memo,
  #sec03 .graft-note,
  #sec03 .imm-table,
  #sec03 .custom-img { max-width: none; }
  #sec03 .s03-sinus__case .con-inner { max-width: 100%; }


  /* ============ section04 ============ */

  /* 시술 인덱스 세로 스택 (텍스트 → 이미지) */
  #sec04 .kind-row { flex-direction: column; align-items: stretch; gap: var(--one-gap-lg); }
  #sec04 .kind-img { flex: 0 0 auto; width: 58%; max-width: none; margin: 0 auto; }
  /* 본문 <br>은 문장 중간 분리라 모바일에서도 유지 (제거 시 단어가 붙음) */
  #sec04 .kind-tag { display: flex; justify-content: center; padding: 0.6em 1em; text-align: center; }

  /* 최소삭제 — 이미지를 텍스트 아래 풀와이드로 */
  #sec04 .s04-mini .con-inner { padding: var(--one-space-lg) 0 var(--one-space-s); }
  #sec04 .mini-txt { max-width: 100%; }
  #sec04 .mini-lead::after { max-width: none; }
  #sec04 .mini-img {
    position : static;
    width    : 100%;
    max-width: none;
    transform: none;
    padding  : var(--one-gap-lg) 0 var(--one-gap-lg) var(--one-gap-lg);
  }

  /* 잇몸성형 — 모바일 배경에는 인물컷이 없으므로 텍스트 풀와이드·중앙정렬 */
  #sec04 .gum-txt { max-width: 100%; margin: 0; text-align: center; }
  #sec04 .gum-lead { justify-content: center; }
  #sec04 .gum-lead::before { max-width: 40px; }
  /* 잇몸성형 내용 박스 — m/ 세로형 재편집본이 영역을 꽉 채움 */
  #sec04 .gum-box { max-width: none; margin-top: var(--one-space-s); }

  /* 치아미백 카드 — 1열 유지(태블릿에서 전환됨) */
  #sec04 .white-drop { height: 48px; }
  #sec04 .white-cards { max-width: none; }

  /* 추천 박스 — 타이틀 풀폭(중앙), 좌우 패딩 축소 */

  /* 증례 */
  #sec04 .case-list { gap: var(--one-gap-xl); margin-top: var(--one-space-s); }


  /* ============ section05 ============ */

  /* 매복 사랑니 — m/ 세로형이 영역을 꽉 채움 */
  #sec05 .impact-box { max-width: none; }

  /* 헤드 — 따옴표를 래퍼 안쪽 좌·우 끝으로 (밖으로 빼면 화면을 벗어남) */
  #sec05 .diff-hd { display: block; }
  #sec05 .diff-quote { width: 24px; }
  #sec05 .diff-quote--l { right: auto; left : 0; margin: 0; }
  #sec05 .diff-quote--r { left : auto; right: 0; margin: 0; }

  /* 발치는 다릅니다 — 카드 폭이 좁아 좌우 패딩 대신 뱃지 "아래"로 콘텐츠 배치 */
  #sec05 .diff-card { padding: 76px var(--one-gap-lg) var(--one-space-s); }
  #sec05 .diff-num { height: 56px; }
  #sec05 .diff-num::before { height: 26px; }
  /* 본문 <br>은 문장 중간 분리라 모바일에서도 유지 (제거 시 단어가 붙음) */
  #sec05 .diff-steps { gap: var(--one-gap-lg); }
  #sec05 .diff-steps p { margin-top: var(--one-gap-sm); }

  /* 필요한 경우 — 이미지 위 / 넘버+텍스트 아래 */
  #sec05 .need-hd { flex-direction: column; gap: var(--one-gap-lg); }
  #sec05 .need-hd::before { display: none; }
  #sec05 .need-hd::after { width: 100%; flex: 0 0 auto; }
  #sec05 .need-hd > span { flex-wrap: wrap; justify-content: center; text-align: center; }
  #sec05 .need-hd img { width: 32px; }

  #sec05 .need-list li {
    gap           : var(--one-gap-r);
    padding       : var(--one-space-s) 0 var(--one-gap-xl) 0;
    flex-direction: column;
    text-align    : center;
    width         : 90%;
    margin        : 0 auto;
  }
  #sec05 .need-ico { width: 50%; max-width: 200px; padding: 0; }
  #sec05 .need-ico img { left: 0; bottom: 0; width: 100%; }
  #sec05 .need-list em { font-size: var(--one-hd2); }

  /* 발치의 종류 — 세로 스택 */
  #sec05 .case-hd { flex-wrap: wrap; gap: var(--one-gap-r); margin-bottom: var(--one-gap-lg); justify-content: center; }
  #sec05 .case-body { flex-direction: column; align-items: stretch; gap: var(--one-gap-lg); }
  #sec05 .case-img { flex: 0 0 auto; width: 100%; }
  #sec05 .case-body p { padding-left: 0; border-left: 0; text-align: center; }


  /* ============ section06 ============ */

  /* 주치의 박스 — 라벨 위 / 본문 아래 */
  #sec06 .disc-doc { flex-direction: column; margin-top: var(--one-space-s); }
  #sec06 .disc-doc__label { flex: 0 0 auto; padding: var(--one-gap-lg) var(--one-gap-r); }
  #sec06 .disc-doc__txt { padding: var(--one-gap-lg) var(--one-gap-r); text-align: center; }

  /* 증상 — 두개골 위 / 텍스트 아래 (m/ 없어 PC 이미지 비율 축소) */
  #sec06 .s06-symp .con-inner { padding: var(--one-space-lg) 0; }
  #sec06 .symp-row { flex-direction: column-reverse; align-items: center; gap: var(--one-gap-lg); }
  #sec06 .symp-skull { position: static; width: 78%; max-width: none; }
  #sec06 .symp-txt { width: 100%; padding-right: 0; text-align: center; }
  #sec06 .symp-tit { display: inline-flex; }
  #sec06 .symp-list { margin: var(--one-space-s) auto 0; }

  /* 치료방법 카드 — 1열 (구분선은 상단 보더로 전환) */
  #sec06 .s06-treat .con-inner { padding-bottom: var(--one-space-lg); }
  #sec06 .treat-card { padding: var(--one-space-s) var(--one-gap-lg); }
  #sec06 .treat-row--3,
  #sec06 .treat-row--2 { grid-template-columns: 1fr; }
  #sec06 .treat-row--2 { margin-top: 0; }
  #sec06 .treat-row li { padding: var(--one-space-s) 0; border-left: 0; border-top: 1px solid var(--ui-line); }
  #sec06 .treat-row--3 li:first-child { border-top: 0; padding-top: 0; }
  #sec06 .treat-ico { height: 88px; }

  /* PHL — 기기 위 / 텍스트 아래(중앙) */
  #sec06 .phl-inner { flex-direction: column; align-items: center; gap: var(--one-space-s); padding: var(--one-space-s) 0 0; }
  #sec06 .phl-img { flex: 0 0 auto; width: 56%; order: 2; }
  #sec06 .phl-txt { width: 100%; padding-bottom: 0; text-align: center; }
  #sec06 .phl-desc { margin-top: var(--one-gap-xl); }

  /* 합병증 — 세로 스택 (화살표 90° 회전) */
  #sec06 .comp-row { flex-direction: column; gap: var(--one-gap-lg); }
  #sec06 .comp-cause { flex: 0 0 auto; width: 100%; flex-direction: row; gap: var(--one-gap-lg); padding: var(--one-gap-xl) var(--one-gap-r); }
  /* 회전은 레이아웃 박스를 바꾸지 않으므로 위·아래 여백으로 넘침을 흡수 */
  #sec06 .comp-arrow { flex: 0 0 auto; width: 64px; margin: var(--one-gap-sm) 0; transform: rotate(90deg); }
  /* 세로 스택에서는 flex-basis:0 + min-height:0 조합이 박스를 찌그러뜨림 → 콘텐츠 높이로 복귀 */
  #sec06 .comp-result {
    flex                 : 0 0 auto;
    width                : 100%;
    min-height           : auto;
    grid-template-columns: 1fr;
    gap                  : 0;
    padding              : var(--one-space-s);
  }

  /* 이갈이 치료방법 바 — 라벨 위 / 항목 아래 (분할 배경 → 단색) */
  #sec06 .s06-gbar { background: var(--point-color); }
  #sec06 .gbar-inner { flex-direction: column; gap: var(--one-gap-xl); padding: var(--one-space-xl) 0; text-align: center; }
  #sec06 .gbar-list { flex-direction: column; align-items: flex-start; gap: var(--one-gap-lg); width: 80%; padding-right: 0; }
  #sec06 .gbar-ico { width: 56px; height: 56px; }

  /* 구강내과 */
  #sec06 .oral-tit { flex-direction: column; gap: 0; padding-top: var(--one-gap-r); }
  #sec06 .oral-flag { width: 52px; }
  #sec06 .oral-desc { margin-top: var(--one-gap-lg); }

  /* 마우스 가드 — 라벨 위 / 본문 아래, 역할 박스 세로 스택 */
  #sec06 .s06-guard { --s06-split: 67%; }
  #sec06 .guard-lead { flex-direction: column; align-items: center; gap: var(--one-gap-r); margin-top: var(--one-space-s); }
  #sec06 .guard-lead__txt { width: 100%; text-align: center; }
  #sec06 .guard-box { padding: var(--one-space-s); }
  #sec06 .guard-box__tit { margin-bottom: var(--one-gap-xl); }
  #sec06 .merit-tit { margin-bottom: var(--one-gap-r); }
  #sec06 .guard-box__role { flex-direction: column; align-items: stretch; gap: var(--one-space-s); }
  #sec06 .guard-box__img { flex: 0 0 auto; width: 56%; margin: 0 auto; }

  /* 넘버 리스트 — 넘버 위 / 문구 아래 대신 좌측 정렬 유지, 간격만 축소 */
  #sec06 .s06-numlist li { gap: var(--one-gap-r); padding: var(--one-gap-lg) 0; }


  /* ============ section07 ============ */

  /* 2단 배경 경계 — 모바일은 콘텐츠가 길어져 비율 재조정 */
  #sec07 .s07-save { --s07-save-split: 40%; }
  #sec07 .s07-gum  { --s07-gum-split : 34%; }

  /* 진행 단계 박스 — pill 이 2줄이 되지 않도록 폭 확보 */
  #sec07 .gum-box { max-width: none; }
  #sec07 .s07-ins {
      padding-top: var(--one-gap-xl);
      padding-bottom: var(--one-gap-xl);
  }

  /* 치아 포기 — 이미지 위 / 텍스트 아래(중앙) */
  #sec07 .keep-row { flex-direction: column-reverse; align-items: center; gap: var(--one-gap-lg); }
  #sec07 .keep-img { flex: 0 0 auto; width: 56%; margin-bottom: 0; }
  #sec07 .keep-txt { width: 100%; padding-bottom: 0; text-align: center; }
  #sec07 .con-inner {padding-bottom: var(--one-gap-xl) !important;}
  /* 틀니 종류 제목 — 좌우 라인 제거 */
  #sec07 .kind-hd::before,
  #sec07 .kind-hd::after { display: none; }

  /* 장점 박스 — 넘버 위/문구 아래 대신 좌측 정렬 유지, 간격 축소 */

  /* 증례 통이미지는 m/ 재편집본이 영역을 꽉 채움 */
  #sec07 .s07-case .con-inner,
  #sec07 .s07-dcase .con-inner { padding-left: 0; padding-right: 0; }
  #sec07 .dcase-box + .dcase-box { margin-top: var(--one-space-s); }

  /* 건강보험 — 이미지 위 / 텍스트 아래(중앙) */
  #sec07 .ins-row { flex-direction: column-reverse; align-items: center; gap: var(--one-gap-lg); }
  #sec07 .ins-img { flex: 0 0 auto; width: 100%; }
  #sec07 .ins-txt { width: 100%; }
  #sec07 .ins-tit { justify-content: center; flex-wrap: wrap; }
  #sec07 .ins-table { max-width: none; }


  /* ============ section08 ============ */

  /* 예방 — 벤다이어그램 위 / 항목 아래(라벨 위·문구 아래) */
  #sec08 .prev-row { flex-direction: column; align-items: center; gap: var(--one-space-s); }
  #sec08 .prev-img { flex: 0 0 auto; width: 62%; }
  #sec08 .prev-list { width: 100%; gap: var(--one-space-s); }
  #sec08 .prev-list li { flex-direction: column; align-items: center; gap: var(--one-gap-r); text-align: center; }
  #sec08 .prev-tag { width: auto; min-width: 160px; min-height: 0; padding: 0.35em 1.4em; }

  /* 치수치료 — 이미지 위 / 텍스트 아래(중앙) */
  #sec08 .pulp-row { flex-direction: column-reverse; align-items: center; gap: var(--one-gap-lg); }
  #sec08 .pulp-img { flex: 0 0 auto; width: 46%; }
  #sec08 .pulp-txt { width: 100%; text-align: center; }

  /* 크라운 — 1열, 이미지 위 / 텍스트 아래(중앙) */
  #sec08 .s08-crown__tit > span { padding: 0 var(--one-space-r); }
  #sec08 .s08-crown__tit > span::before { left : var(--one-gap-lg); }
  #sec08 .s08-crown__tit > span::after  { right: var(--one-gap-lg); }
  #sec08 .crown-cards { grid-template-columns: 1fr; max-width: 480px; }
  #sec08 .crown-inner { flex-direction: column; gap: var(--one-gap-lg); padding: var(--one-space-s) var(--one-gap-lg); }
  #sec08 .crown-img { flex: 0 0 auto; width: 44%; }
  #sec08 .crown-txt { width: 100%; text-align: center; }
  /* 2열 그리드 유지 + 블록 자체를 중앙에 (dd 는 좌측 정렬로 읽기 편하게) */
  #sec08 .crown-spec { justify-content: center;  grid-template-columns: auto auto;}
  #sec08 .crown-spec dd { text-align: left; }


  /* ============ section09 ============ */

  #sec09 .s09-equip .con-inner,
  #sec09 .s09-tour .con-inner { padding: var(--one-space-lg) 0 var(--one-space-s); }
  #sec09 .s09-info__tit {
      text-align: center;
  }
  /* 진료과목 1열 */
  #sec09 .sbj-list { grid-template-columns: 1fr; gap: var(--one-space-s); max-width: 360px; margin: 0 auto; }
  #sec09 .sbj-list > li {
    align-items: center;
    gap: var(--one-gap-xl);
    width: 86%;
    margin: 0 auto;
}
#sec09 .sbj-head {
    width: 35%;
}
#sec09 .sbj-detail {
    min-height: 0;
    display: flex;
    padding-bottom: var(--one-hd1);
}

  /* 진료시간 — 행 간격 유지, 요일/시간 사이만 축소 */
  #sec09 .time-list li {
      gap: var(--one-gap-lg);
      justify-content: center;
  }
  #sec09 .time-note {
      text-align: center;
  }
  #sec09 .addr-txt {
      text-align: center;
  }
  #sec09 .time-day { width: 4.6em; }

  /* 전화 밴드 — 번호 위 / 안내 아래(중앙) */
  #sec09 .tel-row { flex-direction: column; align-items: center; gap: var(--one-gap-sm); text-align: center; }
  #sec09 .tel-num { font-size: var(--one-hd1); }
  #sec09 .park-box  {text-align: center;}
}