/* =========================================================
   아뜰리에치과 - 병원소개(about) 전용 스타일
   :root 변수·헤더·푸터는 style.css 재사용. 1920 데스크탑 전용.
   컬러/사이즈 값은 Figma 시안에서 MCP로 읽어 채운다.
   ========================================================= */

/* 헤더 활성 메뉴 (현재 페이지: 아뜰리에 치과) */
.gnb__link.is-active {
  color: var(--color-point);
}

/* =========================================================
   히어로 (Atelier story) - Figma 55:1451
   섹션 1920×513, 헤더(80) 바로 아래. 배경사진 + 중앙 텍스트 오버레이.
   ========================================================= */
.about-hero {
  position: relative;
  height: 513px;
  margin-top: var(--header-height);   /* 고정 헤더 높이(80px)만큼 아래로 */
  overflow: hidden;                    /* 1920 기준 배경 넘침 클립 */
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 중앙 텍스트 블록 (시안: 가로중앙, gap 16) */
.about-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.about-hero__title {
  font-family: "Sorts Mill Goudy", serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 60px;
  color: var(--color-white);
}

.about-hero__sub {
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
}

/* =========================================================
   인사말 (Greeting) - Figma 55:1458
   흰 배경, 섹션 padding 96(상하), 중앙정렬 텍스트.
   ========================================================= */
.greeting {
  background: var(--color-white);
  overflow-x: clip;
}
.greeting__inner {
  width: 1920px;
  margin: 0 auto;
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* eyebrow (시안 토큰 Noto Serif KR → 메인 eyebrow 관례 Marcellus) */
.greeting__eng {
  font-family: "Marcellus", serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: #c4956a;          /* 시안 Twine #C4956A */
}
.greeting__title {
  margin-top: 11.6px;
  font-size: 30px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 36px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
  text-align: center;
}
.greeting__desc {
  margin-top: 48px;        /* 시안: 제목블록~본문 gap 48 */
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.greeting__desc p {
  font-size: 16px;
  font-weight: 400;        /* Pretendard Regular */
  line-height: 24px;
  color: #888888;          /* 시안 Gray #888888 */
  white-space: nowrap;
}

/* =========================================================
   의료진 소개 (Medical Team) - Figma 32:1563
   대리석 배경, 1920×963 절대좌표. 상단중앙 타이틀 + 좌측 원장정보 + 우측 사진.
   ========================================================= */
.team {
  position: relative;
  height: 963px;
  margin-top: 58px;        /* 시안: 인사말 하단(1027)~섹션 상단(1085) */
  overflow-x: clip;
  background: url("../images/team-bg.png") center / cover no-repeat;
}
.team__inner {
  position: relative;
  width: 1920px;
  height: 963px;
  margin: 0 auto;
}

/* 상단 중앙 타이틀 (시안 top41, 중앙정렬) */
.team__head {
  position: absolute;
  top: 41px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.6px;
}
.team__eng {
  font-family: "Marcellus", serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: #c4956a;          /* 시안 Twine #C4956A */
}
.team__title {
  font-size: 30px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 36px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
  text-align: center;
}
.team__sub {
  max-width: 672px;
  font-size: 16px;
  font-weight: 400;        /* Pretendard Regular */
  line-height: 24px;
  color: #888888;          /* 시안 Gray #888888 */
  text-align: center;
}

/* 좌측 원장 정보 (시안 left552 top377 w426) */
.team__info {
  position: absolute;
  left: 552px;
  top: 377px;
  width: 426px;
  display: flex;
  flex-direction: column;
  gap: 19.5px;
}
.team__info-eng {
  font-size: 20px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 34px;
  color: var(--color-point);   /* 시안 Sorrell Brown #D1BA9C = --color-point */
}
.team__name {
  font-size: 45px;
  font-weight: 400;        /* '원장' Regular */
  line-height: 76.5px;
  color: var(--color-text);    /* 시안 Mine Shaft #3C3C3C = --color-text */
}
.team__name strong {
  font-weight: 700;        /* '김지현' Bold */
  margin-right: 18px;
}

/* 약력 리스트 (시안 gap3.6, pt16.5, bullet 3.59 원형) */
.team__career {
  display: flex;
  flex-direction: column;
  gap: 3.6px;
  padding-top: 16.5px;
}
.team__career li {
  position: relative;
  padding-left: 12.6px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30.6px;
  color: var(--color-text);
}
.team__career li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.8px;
  width: 3.59px;
  height: 3.59px;
  border-radius: 50%;
  background: var(--color-black);
}

/* 우측 원장 사진 (시안 left970 top265 w530, doctor.png 재활용) */
.team__photo {
  position: absolute;
  left: 970px;
  top: 265px;
  width: 530px;
  z-index: 1;
}
.team__photo img {
  display: block;
  width: 100%;
  /* doctor.png 흰 배경(불투명)을 사진 속 캡슐 타원 1~2px 안쪽으로 잘라냄 */
  clip-path: inset(3.687% 1.832% 2.458% 6.034% round 46.067% / 37.752%);
}

/* =========================================================
   시설 안내 (Facilities) - Figma 55:1551
   흰 배경, 중앙 max-w1200. 상단 타이틀 + 4개 정사각 이미지 그리드.
   ========================================================= */
.facilities {
  background: var(--color-white);
  overflow-x: clip;
}
.facilities__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
}

/* 상단 중앙 타이틀 (greeting/team과 동일 관례) */
.facilities__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.6px;
}
.facilities__eng {
  font-family: "Marcellus", serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: #c4956a;          /* 시안 Twine #C4956A */
}
.facilities__title {
  font-size: 30px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 36px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
  text-align: center;
}
.facilities__sub {
  font-size: 16px;
  font-weight: 400;        /* Pretendard Regular */
  line-height: 24px;
  color: #888888;          /* 시안 Gray #888888 */
  text-align: center;
}

/* 4개 이미지 그리드 (시안 gap16, 정사각 276, radius16) */
.facilities__grid {
  margin-top: 48px;        /* 시안: 타이틀~그리드 gap 48.01 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.facility {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
}
.facility__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 하단 어둡게 그라데이션 (시안: 하단 black60% → 50%지점 투명) */
.facility__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
}
/* 캡션 (시안: 하단, padding16, gap4, 중앙정렬) */
.facility__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.facility__name {
  font-size: 14px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 20px;
  color: var(--color-white);
}
.facility__desc {
  font-size: 12px;
  font-weight: 400;        /* Pretendard Regular */
  line-height: 16px;
  color: rgba(255, 255, 255, 0.7);   /* 시안 White 70% */
}

/* =========================================================
   오시는 길 (Location) - Figma 55:1593
   크림 배경(#FAF8F5), 중앙 max-w1200. 좌 지도 플레이스홀더 + 우 병원정보.
   ========================================================= */
.location {
  background: #faf8f5;     /* 시안 Spring Wood #FAF8F5 */
  overflow-x: clip;
}
.location__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px 24px;
}

/* 상단 중앙 타이틀 */
.location__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11.6px;
}
.location__eng {
  font-family: "Marcellus", serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 4.2px;
  text-transform: uppercase;
  color: #c4956a;          /* 시안 Twine #C4956A */
}
.location__title {
  font-size: 30px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 36px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
  text-align: center;
}

/* 2분할 그리드 (시안 gap40, h400) */
.location__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
}

/* 좌측 지도 (시안 h400, radius16) — Google Maps iframe */
.location__map {
  height: 400px;           /* 시안 지도 높이 400 */
  border-radius: 16px;
  overflow: hidden;        /* iframe 모서리를 radius로 클립 */
  background: #f5ede4;     /* 시안 Merino #F5EDE4 (로딩 전 배경) */
}
.location__map-iframe {
  display: block;
  width: 100%;             /* 컨테이너 꽉 채움 */
  height: 100%;
  border: 0;
}

/* 우측 병원 정보 */
.location__info {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.location__name {
  padding-bottom: 24px;
  font-size: 20px;
  font-weight: 600;        /* Pretendard SemiBold */
  line-height: 28px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
}
.location__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15.5px;
}
.location__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.location__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;         /* 라벨 첫 줄과 수직 정렬 */
  color: var(--color-point);   /* 프로젝트 브라운 #D1BA9C */
}
.location__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.location__label {
  font-size: 14px;
  font-weight: 500;        /* Pretendard Medium */
  line-height: 20px;
  color: #3d2b1f;          /* 시안 Bistre #3D2B1F */
}
.location__value {
  font-size: 14px;
  font-weight: 400;        /* Pretendard Regular */
  line-height: 20px;
  color: #888888;          /* 시안 Gray #888888 (주소/진료시간) */
}
.location__value--dark {
  color: #333333;          /* 시안 Mine Shaft #333333 (전화/교통편) */
}

/* 전화 상담 버튼 (시안 bg #B8915A, pill, px32 py12) */
.location__btn-wrap {
  padding-top: 32px;
}
.location__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 32px;
  background: #b8915a;     /* 시안 Muddy Waters #B8915A */
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;        /* Pretendard Medium */
  line-height: 20px;
  letter-spacing: 0.35px;
  color: var(--color-white);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* 푸터: about 페이지는 location 섹션과 바로 인접(시안 gap 0) → 메인의 margin-top 무효화 */
.footer {
  margin-top: 120px;
}

/* =========================================================
   모바일 반응형 (≤768px) — about
   ========================================================= */
@media (max-width: 768px) {
  /* 히어로 */
  .about-hero {
    height: 360px;
  }
  .about-hero__inner {
    padding: 0 20px;
  }
  .about-hero__title {
    font-size: 38px;
    line-height: 1.2;
  }
  .about-hero__sub {
    font-size: 16px;
  }

  /* 인사말 */
  .greeting__inner {
    width: 100%;
    padding: 56px 20px;
  }
  .greeting__title {
    font-size: 24px;
    line-height: 1.35;
  }
  .greeting__desc {
    margin-top: 32px;
    gap: 18px;
  }
  .greeting__desc p {
    font-size: 15px;
    white-space: normal;
  }

  /* 의료진 소개 */
  .team {
    height: auto;
    padding: 56px 0;
  }
  .team__inner {
    width: 100%;
    height: auto;
  }
  .team__head {
    position: static;
    top: auto;
    padding: 0 20px;
  }
  .team__title {
    font-size: 24px;
    line-height: 1.35;
  }
  .team__info {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    padding: 0 20px;
    margin-top: 32px;
  }
  .team__name {
    font-size: 30px;
    line-height: 1.4;
  }
  .team__name strong {
    margin-right: 12px;
  }
  .team__career li {
    font-size: 15px;
    line-height: 26px;
  }
  .team__career li::before {
    top: 9px;
  }
  .team__photo {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 320px;
    margin: 28px auto 0;
  }

  /* 시설 안내 (4열 → 2열) */
  .facilities__inner {
    padding: 56px 20px;
  }
  .facilities__title {
    font-size: 24px;
    line-height: 1.35;
  }
  .facilities__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 오시는 길 (2열 → 1열) */
  .location__inner {
    padding: 56px 20px;
  }
  .location__title {
    font-size: 24px;
    line-height: 1.35;
  }
  .location__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .location__map {
    height: 260px;
  }
}