@charset "utf-8";
/* about.html (PDF p2) 전용 */

/* ---------- 히어로 (y 72~832) ---------- */
.ab-hero { position: relative; height: 760px; overflow: hidden; background: var(--c-deep); }
.ab-hero__img { position: absolute; left: 367px; top: 0; width: 1339px; height: 760px; object-fit: cover; }
.ab-hero__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: 633px;
  background: var(--c-deep); color: var(--c-white); text-align: center;
  display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px;
}
.ab-hero__eyebrow { font-size: 13px; line-height: 18px; color: #d0d8d8; letter-spacing: -.04em; }
.ab-hero__title { margin-top: 9px; font-size: 60px; line-height: 78px; font-weight: 300; letter-spacing: -.02em; }
.ab-hero__title strong { font-weight: 700; }
.ab-hero__desc { margin-top: 11px; font-size: 13px; line-height: 20px; color: #d0d8d8; letter-spacing: -.04em; }

/* ---------- 진단·처방 (y 832~1713) ---------- */
.intro { padding-bottom: 118px; }
.intro__box { margin-top: 51px; display: flex; }
.intro__img { flex: none; width: 499px; height: 560px; overflow: hidden; position: relative; }
.intro__img img { position: absolute; left: -170px; top: 0; width: 839px; height: 560px; object-fit: cover; }
.intro__body { margin-left: 54px; padding-top: 23px; }
.intro__title { font-size: 72px; line-height: 96px; font-weight: 300; letter-spacing: -.045em; color: var(--c-ink); white-space: nowrap; }
.intro__title strong { font-weight: 700; }
.intro__text { margin-top: 86px; font-size: 15.5px; line-height: 26px; color: var(--c-body); letter-spacing: -.03em; white-space: nowrap; }
.intro__text strong { font-weight: 700; color: #40524f; }

/* ---------- 미션·비전 (y 1713~2423) ---------- */
.mission { padding-bottom: 117px; }
.mission__grid { margin-top: 42px; display: flex; border-top: 1px solid var(--c-line-dark); border-bottom: 2px solid var(--c-line); }
.mission__card { width: 540px; height: 256px; padding: 30px 30px 0; text-align: center; }
.mission__card + .mission__card { border-left: 1px solid var(--c-line); }
.mission__card .badge { height: 15px; line-height: 15px; border-radius: 3px; padding: 0 11px; }
.mission__title { margin-top: 51px; color: var(--c-ink); letter-spacing: -.02em; }
.mission__text { margin-top: 9px; font-size: 13.3px; line-height: 21px; color: var(--c-body-2); letter-spacing: -.03em; }

/* ---------- 시스템 (y 2423~3185) ---------- */
.system { padding-bottom: 131px; }
.system__desc { margin-top: 21px; font-size: 19px; line-height: 28px; letter-spacing: -.02em; }
.system__flow { margin: 46px auto 0; width: 1044px; display: flex; justify-content: space-between; }
.system__flow li {
  position: relative; width: 142px; height: 142px; border: 2px solid #34585a; border-radius: 50%;
  text-align: center; color: #2c4f50; padding-top: 25px;
}
.system__flow li + li::before {
  content: ""; position: absolute; left: -51px; top: 64px; width: 18px; height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M1 7.5h16M10 1l7 6.5-7 6.5' fill='none' stroke='%23728a8a' stroke-width='2'/%3E%3C/svg%3E") no-repeat;
}
.system__flow strong { display: block; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.02em; }
.system__flow span { display: block; margin-top: 22px; font-size: 15.5px; line-height: 23px; letter-spacing: -.04em; }

/* ---------- 숫자로 보는 더균 (y 3185~3888) · A2-1 6칸(3×2) ---------- */
.numbers { padding-bottom: 118px; }
.numbers__grid { margin-top: 42px; display: flex; flex-wrap: wrap; border-top: 2px solid #7ea5a3; border-bottom: 1px solid #1a4e52; }
.numbers__grid li { width: 360px; height: 249px; background: var(--c-deep-2); text-align: center; padding-top: 69px; }
.numbers__grid li:not(:nth-child(3n+1)) { border-left: 1px solid #527074; }
.numbers__grid li:nth-child(n+4) { border-top: 1px solid #527074; }
.numbers__grid strong { display: block; font-size: 57px; line-height: 70px; font-weight: 700; letter-spacing: -.05em; color: var(--c-mint); }
.numbers__grid span { display: block; margin-top: 20px; font-size: 11px; line-height: 16px; color: #d7e3e3; }

/* ---------- 연혁 (y 3888~5429) ---------- */
.history { padding-bottom: 152px; }
.history__list { width: 860px; margin: 31px auto 0; }
.history__list li { height: 209px; padding-top: 4px; position: relative; }
.history__list li:last-child { height: auto; }
.history__list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 860px; height: 4px;
  background: linear-gradient(90deg, #00525a, rgba(0, 82, 90, 0));
}
.history__list strong { display: block; margin-top: 28px; font-size: 46px; line-height: 56px; font-weight: 800; letter-spacing: -.01em; color: var(--c-deep); }
.history__list p { margin-top: 11px; font-size: 19px; line-height: 28px; color: #5d6d69; letter-spacing: -.02em; white-space: nowrap; }

/* ---------- 인증과 등록 (A2-3 신설, 연혁과 팀 사이) ---------- */
.certs { padding-bottom: 118px; border-top: 1px solid #e3e8ea; }
.certs--tint { background: #eaf0f1; }
.certs__grid { margin-top: 56px; display: flex; gap: 32px; }
.certs__grid li { width: 246px; }
.certs__img { width: 246px; height: 348px; background: #e3e8eb; }
.certs__name { margin-top: 22px; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink-strong); }
.certs__date { margin-top: 6px; min-height: 22px; font-size: 14px; line-height: 22px; color: var(--c-body); letter-spacing: -.02em; }

/* ---------- 팀 (y 5429~6733) · A2-2 5명 ---------- */
.team { padding-bottom: 116px; }
.team__photo { margin-top: 40px; height: 460px; overflow: hidden; position: relative; }
.team__photo img { position: absolute; left: 0; top: -156px; width: 1440px; height: 772px; object-fit: cover; }
.team__list { width: 892px; margin: 40px auto 0; border-top: 2px solid #182d28; }
.team__list li { height: 84px; border-bottom: 2px solid var(--c-line); display: flex; align-items: center; padding-bottom: 2px; }
.team__role { width: 127px; font-size: 10px; line-height: 16px; font-weight: 700; letter-spacing: .2em; color: #0c695d; }
.team__name { width: 148px; font-size: 25px; line-height: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--c-ink-strong); }
.team__desc { font-size: 17.5px; line-height: 26px; color: #64726e; letter-spacing: -.03em; }

/* ---------- 함께하는 곳 (y 6733~7562) ---------- */
.partners { padding-bottom: 118px; }
.partners__grid { width: 1081px; margin-top: 42px; display: flex; flex-wrap: wrap; column-gap: 71px; }
.partner { width: 505px; height: 189px; border-top: 2px solid var(--c-line-2); display: flex; align-items: flex-start; }
.partner:nth-child(-n+2) { border-top-width: 2.5px; }
.partner__logo {
  flex: none;
  width: 120px; height: 120px; margin: 35px 0 0 1px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1);
  display: flex; align-items: center; justify-content: center;
}
.partner__logo img { height: auto; }
.partner > div { margin: 45px 0 0 38px; }
.partner__name { font-size: 21px; letter-spacing: -.02em; color: var(--c-ink-strong); }
.partner__text { margin-top: 12px; font-size: 19px; letter-spacing: -.02em; color: #5d6e6b; }

/* ---------- 1440보다 넓은 화면: 좌측 패널·우측 사진은 뷰포트 끝까지, 분할 지점은 1440 기준 ---------- */
@media (min-width: 1441px) {
  .ab-hero__panel { width: calc(50% - 87px); padding-left: calc(50% - 720px); }
  .ab-hero__img { left: calc(50% - 353px); width: max(1339px, calc(50% + 353px)); }
  .team__photo img { width: 100%; height: auto; aspect-ratio: 1440 / 772; top: 50%; transform: translateY(-50%); }
}

/* ---------- 모바일 (≤ 900): _spec/MOBILE_SPEC.md about 지침 ---------- */
@media (max-width: 900px) {
  /* 히어로: 텍스트 패널 위, 사진 아래 4:3 */
  .ab-hero { height: auto; display: flex; flex-direction: column; }
  .ab-hero__panel { position: static; order: -1; width: auto; padding: 56px 20px 52px; }
  .ab-hero__img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .ab-hero__eyebrow { font-size: 12px; line-height: 18px; }
  .ab-hero__title { margin-top: 14px; font-size: 36px; line-height: 1.2; }
  .ab-hero__desc { margin-top: 16px; font-size: 14px; line-height: 1.6; }

  /* 진단·처방: 사진 위(4:3), 텍스트 아래 */
  .intro { padding-bottom: 70px; }
  .intro__box { margin-top: 28px; flex-direction: column; }
  .intro__img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .intro__img img { position: static; width: 100%; height: 100%; }
  .intro__body { margin: 28px 0 0; padding-top: 0; }
  .intro__title { font-size: 30px; line-height: 1.3; white-space: normal; }
  .intro__text { margin-top: 20px; font-size: 15px; line-height: 1.6; white-space: normal; }
  .intro__text br { display: none; }

  /* 미션·비전: 1열 */
  .mission { padding-bottom: 70px; }
  .mission__grid { margin-top: 32px; flex-direction: column; }
  .mission__card { width: auto; height: auto; padding: 28px 0 32px; }
  .mission__card + .mission__card { border-left: 0; border-top: 1px solid var(--c-line); }
  .mission__card .badge { height: 20px; line-height: 20px; padding: 0 10px; }
  .mission__title { margin-top: 20px; }
  .mission__text { margin-top: 10px; font-size: 14px; line-height: 1.6; }
  .mission__text br { display: none; }

  /* 시스템: 세로 나열(원 72px), 화살표 아래 방향 */
  .system { padding-bottom: 76px; }
  .system__desc { margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .system__flow { width: fit-content; margin: 36px auto 0; flex-direction: column; gap: 36px; }
  .system__flow li { width: auto; height: auto; border: 0; border-radius: 0; padding: 0; display: flex; align-items: center; text-align: left; }
  .system__flow strong {
    flex: none; width: 72px; height: 72px; border: 2px solid #34585a; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  .system__flow span { margin: 0 0 0 18px; font-size: 15px; line-height: 1.5; }
  .system__flow li + li::before { left: 27px; top: -25.5px; transform: rotate(90deg); }

  /* 숫자: 2×3 */
  .numbers { padding-bottom: 70px; }
  .numbers__grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; }
  .numbers__grid li { width: auto; height: auto; padding: 28px 8px 26px; }
  .numbers__grid li:not(:nth-child(3n+1)) { border-left: 0; }
  .numbers__grid li:nth-child(n+4) { border-top: 0; }
  .numbers__grid li:nth-child(even) { border-left: 1px solid #527074; }
  .numbers__grid li:nth-child(n+3) { border-top: 1px solid #527074; }
  .numbers__grid strong { font-size: 36px; line-height: 44px; }
  .numbers__grid span { margin-top: 8px; font-size: 12px; line-height: 18px; }

  /* 연혁: 세로 그대로 */
  .history { padding-bottom: 88px; }
  .history__list { width: auto; margin: 24px 20px 0; }
  .history__list li { height: auto; padding-bottom: 28px; }
  .history__list li::before { width: 100%; }
  .history__list strong { margin-top: 20px; font-size: 32px; line-height: 40px; }
  .history__list p { margin-top: 8px; font-size: 15px; line-height: 1.6; white-space: normal; }

  /* 인증: 2×2 */
  .certs { padding-bottom: 70px; }
  .certs__grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .certs__grid li { width: auto; min-width: 0; }
  .certs__img { width: 100%; height: auto; aspect-ratio: 246 / 348; }
  .certs__name { margin-top: 12px; font-size: 15px; line-height: 1.4; }
  .certs__date { margin-top: 4px; min-height: 18px; font-size: 12px; line-height: 1.5; }

  /* 팀: 라벨+이름 한 줄, 설명 다음 줄 */
  .team { padding-bottom: 68px; }
  .team__photo { margin-top: 28px; height: auto; aspect-ratio: 16 / 10; }
  .team__photo img { top: 0; width: 100%; height: 100%; }
  .team__list { width: auto; margin: 28px 20px 0; }
  .team__list li { height: auto; flex-wrap: wrap; padding: 16px 0 18px; }
  .team__role { flex: none; width: 110px; }
  .team__name { width: auto; font-size: 20px; line-height: 28px; }
  .team__desc { flex-basis: 100%; margin-top: 8px; font-size: 14px; line-height: 1.6; }

  /* 함께하는 곳: 1열, 로고 좌·텍스트 우 */
  .partners { padding-bottom: 70px; }
  .partners__grid { width: auto; margin-top: 32px; flex-direction: column; column-gap: 0; }
  .partner { width: auto; height: auto; padding: 20px 0; align-items: center; }
  .partner:nth-child(-n+2) { border-top-width: 2px; }
  .partner__logo { width: 72px; height: 72px; margin: 0; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
  .partner__logo img { width: 76% !important; }
  .partner > div { flex: 1; min-width: 0; margin: 0 0 0 18px; }
  .partner__name { font-size: 17px; }
  .partner__text { margin-top: 4px; font-size: 14px; line-height: 1.6; }
  .partner__text br { display: none; }
}