@charset "utf-8";
/* =============================================================
   더명품재활병원 - sub.css  (서브페이지 공통 + 인사말)
   기준 시안: sub.psd (2600 x 3012 / 콘텐츠 컨테이너 1400px, 1:1 배율)
   1rem = 10px  ·  common.css 이후에 로드
   ============================================================= */

:root {
  --serif-ko: 'Noto Serif KR', 'Nanum Myeongjo', 'Apple SD Gothic Neo', serif;
  --brush:    'Nanum Brush Script', 'Nanum Pen Script', cursive;
  --svBodyH:  48.1rem;   /* 서브 비주얼 본문 영역 높이 */
  --lnbH:     7rem;      /* LNB 바 높이 */
}

/* 현재 위치 대메뉴 (헤더 · 모바일 전체메뉴) */
.gnb__list > li > a.is-active::after { transform: scaleX(1); transform-origin: left center; }
.m-menu__nav a.is-active { color: #7fc0f0; }
.m-menu__depth2 { padding: .6rem 0 1.4rem 1.2rem; }
.m-menu__depth2 a { padding: .9rem .4rem; font-size: 1.6rem; font-weight: 400; color: rgba(255,255,255,.72); border-bottom: 0; }
.m-menu__depth2 a[aria-current] { color: #fff; font-weight: 600; }

/* =============================================================
   서브 비주얼
   시안: 이미지 프레임 0~551 · 타이틀 baseline 302 · 브레드크럼 331~373 · LNB 481~551
   ============================================================= */
.sub-visual { position: relative; z-index: 1; height: calc(var(--svBodyH) + var(--lnbH)); background: #6f6a66; }
.sub-visual--nolnb { --lnbH: 0rem; }   /* 2차 메뉴가 없는 대메뉴 */
.sub-visual__bg { position: absolute; inset: 0; overflow: hidden; }
.sub-visual__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

.sub-visual__in {
  position: relative; z-index: 1;
  padding-top: 24.85rem; text-align: center; color: #fff;
}
.sub-visual__title {
  font-size: 5.5rem; font-weight: 600; line-height: 7rem; letter-spacing: -.035em;
  text-shadow: 0 .2rem 1.2rem rgba(0,0,0,.18);
}

/* 브레드크럼 */
.breadcrumb { margin-top: 1.25rem; }
.breadcrumb ol {
  display: inline-flex; align-items: center;
  height: 4.2rem; padding: 0 2.1rem 0 2.6rem; border-radius: 2.1rem;
  background: rgba(255,255,255,.08);
  font-size: 1.7rem; font-weight: 600; line-height: 1; letter-spacing: -.035em;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li + li::before { content: '/'; padding: 0 .5rem 0 .4rem; opacity: .8; }
.breadcrumb li:first-child + li::before { padding-left: .7rem; }
.breadcrumb a { transition: opacity .25s var(--ease); }
.breadcrumb a:hover { opacity: .75; }
.breadcrumb__home { display: block; }

/* LNB (2차 메뉴 탭바) */
.lnb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: var(--lnbH); background: rgba(13,54,88,.9);
}
.lnb .in { height: 100%; }
.lnb__list { display: flex; height: 100%; }
.lnb__list > li { position: relative; flex: 1 1 0; min-width: 0; }
.lnb__list > li.is-active::before {
  content: ''; position: absolute; left: 0; right: 0; top: 1rem; bottom: -1.5rem;
  background: #fff; border-radius: .3rem .3rem 0 0;
}
.lnb__list > li > a {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: .9rem .6rem 0;
  font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -.025em;
  color: #fff; text-align: center; white-space: nowrap;
  transition: opacity .25s var(--ease);
}
.lnb__list > li > a:hover { opacity: .72; }
.lnb__list > li.is-active > a { color: #1a3e5c; }
.lnb__list > li.is-active > a:hover { opacity: 1; }

/* =============================================================
   인사말
   시안: 사진 1417,751 583x670 · 본문 첫 baseline 969 · 서명 baseline 1484
   ============================================================= */
.greet { padding: 20rem 0 10rem; }
.greet .in { display: flex; align-items: flex-start; }
.greet__body { flex: 1 1 auto; min-width: 0; }

.greet__mark {
  margin-top: -.6rem;
  font-family: var(--serif-ko); font-size: 6rem; font-weight: 700; line-height: 1;
  color: #6f6f6f;
}
.greet__title {
  margin-top: -2.9rem;
  font-family: var(--serif-ko); font-size: 4.3rem; font-weight: 300; line-height: 5.8rem;
  letter-spacing: -.025em; color: #2d2d2d;
}
.greet__title b { font-weight: 700; color: var(--blue); }

.greet__text { margin-top: 5.8rem; font-size: 1.7rem; font-weight: 500; line-height: 2.6rem; color: #333a40; }
.greet__text p + p { margin-top: 2.6rem; }

.greet__doctor { flex: 0 0 58.3rem; margin-left: 3.4rem; }
.greet__doctor img { width: 100%; height: auto; border-radius: .6rem; }
.greet__sign {
  margin-top: 3.35rem;
  font-size: 2.7rem; font-weight: 300; line-height: 1; letter-spacing: -.01em;
  color: #363636; text-align: center;
}
.greet__sign em {
  position: relative; top: .7rem;
  font-family: var(--brush); font-size: 6rem; font-style: normal; line-height: 0;
  letter-spacing: 0;
}

/* =============================================================
   더명품재활병원의 특장점
   시안: 회색 밴드 1936~2410 · 카드 1823~2210 (320x387, gap 40)
   ============================================================= */
.feature {
  --bandTop: 35.45rem;      /* 섹션 상단부터 회색 밴드가 시작되는 지점 */
  padding: 10.3rem 0 20rem;
  background: linear-gradient(180deg, transparent 0 var(--bandTop), #f5f5f5 var(--bandTop));
}
.feature__eng {
  display: block;
  font-size: 2.2rem; font-weight: 400; line-height: 1; letter-spacing: -.015em;
  color: var(--blue); text-transform: uppercase;
}
.feature__title {
  position: relative; display: inline-block; margin-top: .55rem;
  font-size: 3.8rem; font-weight: 600; line-height: 4.8rem; letter-spacing: -.045em;
  color: #000;
}
/* 손그림 왕관 · 붓 밑줄 */
.feature__title::after {
  content: ''; position: absolute; right: -.1rem; top: -2.4rem;
  width: 4.5rem; height: 3.1rem;
  background: url(/assets/img/deco-mark.png) no-repeat center/contain;
}
.feature__title::before {
  content: ''; position: absolute; left: 20.6rem; top: 5.2rem;
  width: 17.9rem; height: 1.6rem; opacity: .67;
  background: url(/assets/img/deco-line.png) no-repeat center/contain;
}

.feature__list { display: flex; gap: 4rem; margin-top: 6.3rem; }
.feature__item {
  flex: 1 1 0; min-width: 0; min-height: 38.7rem;
  padding: 1.9rem; border: 1px solid #c8d3dc; border-radius: .5rem;
  background: #f4f8fb; text-align: center;
}
.feature__thumb { border-radius: .5rem; overflow: hidden; line-height: 0; }
.feature__thumb img { width: 100%; height: auto; aspect-ratio: 280 / 192; object-fit: cover; }
.feature__name {
  margin-top: 3.42rem;
  font-size: 2rem; font-weight: 500; line-height: 2.5rem; letter-spacing: -.025em; color: #010101;
}
.feature__desc {
  margin-top: 1.2rem;
  font-size: 1.6rem; font-weight: 400; line-height: 2.2rem; letter-spacing: -.025em; color: #515151;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1600px) {
  .lnb__list > li > a { font-size: 1.8rem; }
}

@media (max-width: 1280px) {
  .greet__doctor { flex-basis: 48rem; }
}

@media (max-width: 1024px) {
  :root { --svBodyH: 28rem; --lnbH: 6rem; }

  .sub-visual__in { padding-top: 12.4rem; }
  .sub-visual__title { font-size: 3.6rem; line-height: 1.3; }
  .breadcrumb { margin-top: 1.6rem; }
  .breadcrumb ol { height: 3.6rem; padding: 0 1.6rem 0 1.8rem; font-size: 1.4rem; border-radius: 1.8rem; }
  .breadcrumb__home { width: 1.4rem; height: 1.6rem; }

  .lnb .in { padding: 0; }
  .lnb__list { padding: 0 1.6rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .lnb__list::-webkit-scrollbar { display: none; }
  .lnb__list > li { flex: 0 0 auto; }
  .lnb__list > li.is-active::before { top: 0; bottom: 0; border-radius: 0; }
  .lnb__list > li > a { padding: 0 2.2rem; font-size: 1.6rem; }

  .greet { padding: 6rem 0 5rem; }
  .greet .in { flex-direction: column-reverse; align-items: stretch; }
  .greet__doctor { flex: none; width: 100%; max-width: 40rem; margin: 0 auto 4rem; }
  .greet__mark { font-size: 4.6rem; }
  .greet__title { margin-top: -1rem; font-size: 3rem; line-height: 1.45; }
  .greet__text { margin-top: 3rem; font-size: 1.6rem; line-height: 1.75; }
  .greet__text p + p { margin-top: 2.4rem; }
  .greet__sign { margin-top: 2.6rem; font-size: 2.1rem; }
  .greet__sign em { top: .5rem; font-size: 4.6rem; }

  .feature { --bandTop: 22rem; padding: 6rem 0 8rem; }
  .feature__eng { font-size: 1.8rem; }
  .feature__title { font-size: 2.8rem; line-height: 1.35; }
  .feature__title::after { width: 3.4rem; height: 2.3rem; top: -1.8rem; right: -.5rem; }
  .feature__title::before { left: auto; right: 0; top: auto; bottom: -1.4rem; width: 13rem; }
  .feature__list { flex-wrap: wrap; gap: 2.4rem; margin-top: 3.6rem; }
  .feature__item { flex: 1 1 calc(50% - 1.2rem); min-height: 0; padding: 1.6rem 1.6rem 2.8rem; }
  .feature__name { margin-top: 2.2rem; font-size: 1.8rem; }
  .feature__desc { margin-top: .9rem; font-size: 1.5rem; line-height: 2rem; }
}

@media (max-width: 767px) {
  :root { --svBodyH: 20.6rem; --lnbH: 5.4rem; }

  .sub-visual__in { padding-top: 8.6rem; }
  .sub-visual__title { font-size: 2.8rem; }
  .breadcrumb { margin-top: 1.2rem; }
  .breadcrumb ol { height: 3.2rem; padding: 0 1.4rem 0 1.5rem; font-size: 1.3rem; }
  .lnb__list > li > a { padding: 0 1.6rem; font-size: 1.5rem; }

  .greet { padding: 4.6rem 0 4rem; }
  .greet__doctor { max-width: 100%; }
  .greet__title { font-size: 2.4rem; }
  .greet__text { font-size: 1.5rem; line-height: 1.8; }
  .greet__sign { font-size: 1.8rem; }
  .greet__sign em { font-size: 3.8rem; }

  .feature { --bandTop: 17rem; padding: 4.6rem 0 6rem; }
  .feature__title { font-size: 2.4rem; }
  .feature__title::before { display: none; }
  .feature__list { display: block; margin-top: 3rem; }
  .feature__item + .feature__item { margin-top: 1.6rem; }
  .feature__name { margin-top: 1.8rem; }
  .feature__desc br { display: none; }
}