/* /about — 피그마 3차 '후' 프레임(1920x6154) 노드 단위 직역.
   모든 값은 시안 실측 px 이고 근사 유틸을 쓰지 않는다.
   이 파일은 about.html 에서 마지막에 로드해 앞 시트의 일반 조판을 덮는다. */

.content_wrap.about-hub {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}
.about-hub,
.about-hub * { box-sizing: border-box; }
.about-hub {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
}

.about-hub .about-hub__band { width: 100%; background: #fff; }
.about-hub .about-hub__band--alt { background: #f5f5f5; }

/* 본문 측정폭 1080px · 좌 420px (시안 420~1500) */
.about-hub .about-hub__section {
  width: 1080px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 !important;
}
.about-hub .about-hub__section > * {
  width: 100%;
  max-width: 1080px !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* ── 히어로 43:590 (1920x447) ───────────────────────────────────────── */
.about-hub .about-hub__hero {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 103px 0 109px !important;
  text-align: center;
  background: #fff;
}
.about-hub .about-hub__hero > * { max-width: none !important; padding-inline: 0 !important; }
.about-hub .about-hub__hero-eyebrow {
  width: fit-content; margin: 0 auto !important;
  font-size: 13px !important; font-weight: 500 !important; line-height: 19px !important;
  letter-spacing: 2.86px !important; color: #0a0a0a !important; text-transform: uppercase;
}
.about-hub .about-hub__hero h1 { margin: 11px 0 0 !important; padding: 0; }
.about-hub .about-hub__hero-name {
  display: block; width: fit-content; margin: 0 auto;
  font-size: 56px !important; font-weight: 600 !important; line-height: 66px !important;
  letter-spacing: -1.12px !important; color: #0a0a0a !important;
}
.about-hub .about-hub__hero .alt {
  display: block; width: fit-content; margin: 10px auto 0;
  font-size: 28px !important; font-weight: 500 !important; line-height: 33px !important;
  letter-spacing: .56px !important; color: #7e7e7e !important;
}
.about-hub .about-hub__hero-lead {
  width: fit-content; margin: 30px auto 0 !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important;
  letter-spacing: 0 !important; color: #6b6b6b !important;
}

/* ── 섹션 머리(라벨 + 제목 + 리드) 공통 ─────────────────────────────── */
.about-hub .about-hub__group { width: 1080px; }
.about-hub .about-hub__section-label {
  width: fit-content; margin: 0 !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 16px !important;
  letter-spacing: 2.08px !important; color: #707070 !important; text-transform: uppercase;
}
.about-hub .about-hub__group-body { width: fit-content; margin-top: 19px; }
.about-hub .about-hub__group-body h2 {
  width: fit-content; margin: 0 !important;
  font-size: 24px !important; font-weight: 600 !important; line-height: 36px !important;
  letter-spacing: -.48px !important; color: #0a0a0a !important;
}
.about-hub .about-hub__lead {
  width: fit-content; margin: 12px 0 0 !important;
  font-size: 15px !important; font-weight: 400 !important; line-height: 28px !important;
  letter-spacing: 0 !important; color: #6b6b6b !important;
}

/* ── 1. Why Gummy Smile (43:1883 · 43:599) ──────────────────────────── */
.about-hub .about-hub__section--why { padding-top: 93px !important; padding-bottom: 160px !important; }
.about-hub .about-hub__quote {
  width: 1080px; margin-top: 42px;
  padding: 22px 41px 23px; border: 1px solid #000; border-radius: 8px; background: #fff;
}
.about-hub .about-hub__quote p {
  width: fit-content; margin: 0 !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important;
  color: #6b6b6b !important;
}

/* ── 2. Lead Doctor (43:1902 · 43:608) ──────────────────────────────── */
.about-hub .about-hub__section--doctor { padding-top: 115px !important; padding-bottom: 116px !important; }
.about-hub .about-hub__doctor-card {
  display: flex; gap: 32px; width: 1080px; margin-top: 40px;
  padding: 33px 0 33px 41px; border: 1px solid #e8e8e8; background: #fff;
}
.about-hub .about-hub__doctor-photo { flex: 0 0 200px; width: 200px; height: 230px; overflow: hidden; }
.about-hub .about-hub__doctor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hub .about-hub__doctor-body { margin-top: 2px; }
.about-hub .about-hub__doctor-name {
  width: fit-content; margin: 0 !important;
  font-size: 18px !important; font-weight: 600 !important; line-height: 33px !important;
  color: #0a0a0a !important;
}
.about-hub .about-hub__doctor-meta {
  width: fit-content; margin: 0 !important;
  font-size: 16px !important; font-weight: 400 !important; line-height: 33px !important;
  color: #6b6b6b !important;
}
.about-hub .about-hub__doctor-desc {
  width: fit-content; margin: 12px 0 0 !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important;
  color: #6b6b6b !important;
}
.about-hub .about-hub__doctor-cta {
  display: inline-flex; align-items: center; width: 158px; height: 44px; margin-top: 40px;
  font-size: 14px !important; font-weight: 400 !important; line-height: 16px !important;
  color: #666 !important; text-decoration: none;
}

/* ── 3. Our Practice · Protocol (43:1911 · 43:620/1921/1924 · 43:2771 · 43:629) ── */
.about-hub .about-hub__section--practice { padding-top: 110px !important; padding-bottom: 130px !important; }
.about-hub .about-hub__values {
  display: grid; grid-template-columns: 347px 346px 347px; gap: 20px;
  width: 1080px; margin-top: 54px;
}
.about-hub .about-hub__value-card {
  height: 305px; padding: 38px 30px 0; border: 1px solid #e8e8e8; background: #fff;
}
.about-hub .about-hub__value-card h3 {
  width: fit-content; margin: 0 !important;
  font-size: 22px !important; font-weight: 600 !important; line-height: 27px !important;
  letter-spacing: -.36px !important; color: #0a0a0a !important;
}
.about-hub .about-hub__value-card p {
  width: fit-content; margin: 18px 0 0 !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important;
  color: #6b6b6b !important;
}
.about-hub .about-hub__figure {
  width: 1080px; height: 200px; margin: 31px 0 0 !important; padding: 0; overflow: hidden;
}
.about-hub .about-hub__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-hub .about-hub__more { margin: 33px 0 0 !important; text-align: right; }
.about-hub .about-hub__more a {
  display: inline-block; width: fit-content; text-align: left;
  font-size: 14px !important; font-weight: 400 !important; line-height: 19px !important;
  color: #666 !important; text-decoration: none;
}

/* ── 4. Services & Hub Links (43:1927) ──────────────────────────────── */
.about-hub .about-hub__section--services { padding-top: 110px !important; padding-bottom: 120px !important; }
.about-hub .about-hub__services {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: 1080px; margin-top: 42px;
}
.about-hub .about-hub__service-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 74px; padding: 26px 24px; border: 1px solid #e8e8e8; background: #fff;
  text-decoration: none;
}
.about-hub .about-hub__service-link strong {
  width: fit-content; flex: 0 0 auto;
  font-size: 17px !important; font-weight: 600 !important; line-height: 20px !important;
  color: #0a0a0a !important;
}
.about-hub .about-hub__service-link span {
  width: fit-content; flex: 0 0 auto; text-align: right;
  font-size: 13px !important; font-weight: 400 !important; line-height: 16px !important;
  color: #7e7e7e !important;
}

/* ── 5. Location & Affiliations (43:2607 · 43:661 · 43:2694 · 43:2772) ── */
.about-hub .about-hub__section--location { padding-top: 126px !important; padding-bottom: 126px !important; }
.about-hub .about-hub__info-grid {
  display: grid; grid-template-columns: 528px 528px; gap: 20px;
  width: 1080px; margin-top: 42px;
}
.about-hub .about-hub__info-card {
  height: 559px; padding: 40px; border: 1px solid #e8e8e8; background: #fff;
}
.about-hub .about-hub__info-group { width: fit-content; }
.about-hub .about-hub__info-group + .about-hub__info-group { margin-top: 26px; }
.about-hub .about-hub__info-card h3 {
  width: fit-content; margin: 0 !important;
  font-size: 22px !important; font-weight: 600 !important; line-height: 27px !important;
  letter-spacing: -.36px !important; color: #0a0a0a !important;
}
.about-hub .about-hub__info-card p {
  width: fit-content; margin: 12px 0 0 !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 30px !important;
  color: #666 !important;
}
.about-hub .about-hub__info-card p a { color: inherit; text-decoration: none; }
.about-hub .about-hub__info-cta {
  display: inline-flex; align-items: center; width: 158px; height: 44px; margin-top: 26px;
  font-size: 14px !important; font-weight: 400 !important; line-height: 16px !important;
  color: #666 !important; text-decoration: none;
}
.about-hub .about-hub__strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  width: 1080px; height: 200px; margin-top: 40px; overflow: hidden;
}
.about-hub .about-hub__strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 6. FAQ (43:2709) — 문항 수는 15문 하한 규칙이 시안 5문을 이긴다 ── */
.about-hub .about-hub__section--faq { padding-top: 110px !important; padding-bottom: 110px !important; }
.about-hub .about-hub__faq {
  width: 1080px; margin: 60px 0 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
}
.about-hub .about-hub__faq .nyw-faq__item {
  width: 1080px; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-bottom: 1px solid #e4e4e4 !important;
  border-radius: 0 !important; background: none !important;
}
.about-hub .about-hub__faq summary {
  display: block; position: relative; list-style: none; cursor: pointer;
  padding: 24px 0 !important; margin: 0 !important;
  font-size: 17px !important; font-weight: 600 !important; line-height: 20px !important;
  letter-spacing: -.34px !important; color: #0a0a0a !important;
}
.about-hub .about-hub__faq summary::-webkit-details-marker { display: none; }
.about-hub .about-hub__faq summary > span { display: block; width: fit-content; }
.about-hub .about-hub__faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 22px;
  font-size: 20px; font-weight: 400; line-height: 24px; color: #707070;
}
.about-hub .about-hub__faq details[open] > summary::after { content: "\2212"; }
.about-hub .about-hub__faq details > p {
  margin: 0 0 24px !important;
  font-size: 18px !important; font-weight: 400 !important; line-height: 33px !important;
  color: #6b6b6b !important;
}

/* ── 7. Official Channels (43:2763 · 43:2768) ───────────────────────── */
.about-hub .about-hub__section--channels { padding-top: 126px !important; padding-bottom: 155px !important; }
.about-hub .about-hub__channels { margin-top: 23px; }
.about-hub .about-hub__channel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 101px; height: 44px;
  border: 1px solid #e8e8e8; border-radius: 999px; background: #fff; text-decoration: none;
}
.about-hub .about-hub__channel span {
  font-size: 13px !important; font-weight: 400 !important; line-height: 16px !important;
  color: #0a0a0a !important;
}

/* ── 모바일(768px 미만) — 3차 시안에 375 프레임이 없다.
      데스크톱 고정폭을 그대로 내리지 않고 유동폭으로 접는다. ── */
@media (max-width: 1180px) {
  .about-hub .about-hub__section,
  .about-hub .about-hub__group,
  .about-hub .about-hub__quote,
  .about-hub .about-hub__doctor-card,
  .about-hub .about-hub__values,
  .about-hub .about-hub__figure,
  .about-hub .about-hub__services,
  .about-hub .about-hub__info-grid,
  .about-hub .about-hub__strip,
  .about-hub .about-hub__faq,
  .about-hub .about-hub__faq .nyw-faq__item {
    width: 100%; max-width: 100%;
  }
  .about-hub .about-hub__section { padding-inline: 24px !important; }
  .about-hub .about-hub__values { grid-template-columns: repeat(3, 1fr); }
  .about-hub .about-hub__info-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .about-hub .about-hub__hero { padding: 64px 24px 56px !important; }
  .about-hub .about-hub__hero-name { font-size: 34px !important; line-height: 44px !important; letter-spacing: -.68px !important; }
  .about-hub .about-hub__hero .alt { font-size: 17px !important; line-height: 24px !important; }
  .about-hub .about-hub__hero-lead { font-size: 15px !important; line-height: 27px !important; }
  .about-hub .about-hub__section--why,
  .about-hub .about-hub__section--doctor,
  .about-hub .about-hub__section--practice,
  .about-hub .about-hub__section--services,
  .about-hub .about-hub__section--location,
  .about-hub .about-hub__section--faq,
  .about-hub .about-hub__section--channels { padding-top: 64px !important; padding-bottom: 64px !important; }
  .about-hub .about-hub__group-body,
  .about-hub .about-hub__lead,
  .about-hub .about-hub__quote p,
  .about-hub .about-hub__value-card p,
  .about-hub .about-hub__info-card p,
  .about-hub .about-hub__doctor-desc,
  .about-hub .about-hub__doctor-meta,
  .about-hub .about-hub__doctor-name,
  .about-hub .about-hub__faq summary > span { width: auto; }
  .about-hub .about-hub__quote { padding: 20px 20px 22px; }
  .about-hub .about-hub__doctor-card { flex-direction: column; gap: 20px; padding: 24px; }
  .about-hub .about-hub__values { grid-template-columns: 1fr; }
  .about-hub .about-hub__value-card { height: auto; padding: 28px 24px 30px; }
  .about-hub .about-hub__service-link { height: auto; padding: 18px 20px; flex-wrap: wrap; gap: 4px; }
  .about-hub .about-hub__service-link span { text-align: left; }
  .about-hub .about-hub__info-grid { grid-template-columns: 1fr; }
  .about-hub .about-hub__info-card { height: auto; padding: 28px 24px 32px; }
  .about-hub .about-hub__figure,
  .about-hub .about-hub__strip { height: 160px; }
  .about-hub .about-hub__strip { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 120px); height: 240px; }
  .about-hub .about-hub__lead,
  .about-hub .about-hub__quote p,
  .about-hub .about-hub__value-card p,
  .about-hub .about-hub__info-card p,
  .about-hub .about-hub__doctor-desc { font-size: 15px !important; line-height: 27px !important; }
  .about-hub .about-hub__faq summary { font-size: 16px !important; padding: 20px 32px 20px 0 !important; }
  .about-hub .about-hub__faq summary::after { right: 4px; top: 18px; }
}

/* ── 시안 고정폭 텍스트 상자 — hug 가 아니라 폭이 박힌 노드들 ──────── */
.about-hub .about-hub__hero-eyebrow { width: 58px !important; }
.about-hub .about-hub__section--why .about-hub__section-label,
.about-hub .about-hub__section--doctor .about-hub__section-label { width: 155px !important; }
.about-hub .about-hub__section--practice .about-hub__section-label { width: 217px !important; }
.about-hub .about-hub__section--services .about-hub__section-label { width: 181px !important; }
.about-hub .about-hub__section--location .about-hub__section-label { width: 208px !important; }
.about-hub .about-hub__section--faq .about-hub__section-label { width: 29px !important; }
.about-hub .about-hub__section--channels .about-hub__section-label { width: 162px !important; }

.about-hub .about-hub__service-link strong { width: 73px !important; }

.about-hub .about-hub__faq .nyw-faq__item:nth-child(1) > summary > span { width: 325px; }
.about-hub .about-hub__faq .nyw-faq__item:nth-child(2) > summary > span { width: 268px; }
.about-hub .about-hub__faq .nyw-faq__item:nth-child(3) > summary > span { width: 405px; }
.about-hub .about-hub__faq .nyw-faq__item:nth-child(4) > summary > span { width: 268px; }
.about-hub .about-hub__faq .nyw-faq__item:nth-child(5) > summary > span { width: 264px; }

.about-hub .about-hub__channel span {
  display: block; width: 71px !important; height: 15px;
  line-height: 15px !important; text-align: center;
}
.about-hub .about-hub__more a { width: 118px !important; height: 19px; }

/* ⛔ 위 `.about-hub__section > *` 의 padding-inline:0 이 이 두 카드의 안여백을 지운다 —
   여기서 시안 값으로 되돌린다(직접 자식이라 !important 가 필요하다). */
.about-hub .about-hub__quote { padding: 22px 41px 23px !important; }
.about-hub .about-hub__doctor-card { padding: 33px 0 33px 41px !important; }
/* 43:1926 은 시안 본문 폭이 288px 이라 좌우 30px 안여백으로는 한 줄이 더 접힌다. */
.about-hub .about-hub__value-card { padding: 38px 20px 0 30px; }

/* 시안이 폭을 고정해 둔 라벨 — 글자가 그 폭보다 넓어도 접지 않는다(시안과 같은 렌더). */
.about-hub .about-hub__service-link strong { white-space: nowrap; }
.about-hub .about-hub__doctor-desc { width: 592px !important; }
.about-hub .about-hub__channel span { flex: 0 0 71px; }

/* 시안 라벨은 textCase=UPPER 이고 폭이 박혀 있다 — 대문자 폭이 그 상자보다
   1~2px 넓어도 시안처럼 한 줄로 둔다(두 줄로 접히면 아래가 전부 밀린다). */
.about-hub .about-hub__section-label,
.about-hub .about-hub__hero-eyebrow { white-space: nowrap; }

/* ⛔ 위 데스크톱 절의 «시안 고정폭»은 좁은 화면에서 그대로 두면 가로 스크롤을 만든다.
   시안에 375 프레임이 없으므로 고정폭을 풀고 유동폭으로 접는다. */
@media (max-width: 1180px) {
  .about-hub .about-hub__doctor-desc { width: auto !important; }
  .about-hub .about-hub__faq .nyw-faq__item > summary > span { width: auto !important; }
  .about-hub .about-hub__hero-lead,
  .about-hub .about-hub__quote p,
  .about-hub .about-hub__doctor-name,
  .about-hub .about-hub__doctor-meta,
  .about-hub .about-hub__value-card p,
  .about-hub .about-hub__info-card p { width: auto; }
}
@media (max-width: 900px) {
  .about-hub .about-hub__services { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .about-hub .about-hub__services { grid-template-columns: 1fr; }
  .about-hub .about-hub__service-link strong { width: auto !important; }
  .about-hub .about-hub__hero-eyebrow { width: auto !important; }
  .about-hub .about-hub__section-label { width: auto !important; }
  .about-hub .about-hub__more { text-align: left; }
  .about-hub .about-hub__more a,
  .about-hub .about-hub__doctor-cta,
  .about-hub .about-hub__info-cta {
    width: auto !important; height: 44px; min-height: 44px;
    display: inline-flex; align-items: center;
  }
  .about-hub .about-hub__figure { width: 100%; }
}