/* 의료진 소개 지면 전용 — 시안 수치 직역. 공통 CSS 는 건드리지 않는다. */

/* 히어로 사진틀 — 시안은 사진을 세로로 늘려(320%) 잘라 넣는다.
   object-fit 으로는 균등 배율만 되므로 사진을 틀보다 크게 깔고 틀이 잘라낸다. */
.fg14d-heroframe {
  width: 100%;
  aspect-ratio: 1920 / 600;
  background-image: url("/figma/d256ac44446c2f889e2ba632fcdbb3a5f8c470d7.jpg");
  background-repeat: no-repeat;
  background-size: 100% 320%;
  background-position: 50% 57.9482%;
  background-color: rgba(0, 0, 0, 0.1);
}

/* 의료진 목록 섹션 — 위 170 / 아래 375 여백 안에 1200 폭 목록이 들어간다 */
.fg14d-sec {
  background: #ffffff;
  padding: 170px 0 375px;
}

/* 원장 5인 세로 배열 — 행간 130 */
.fg14d-list {
  display: flex;
  flex-direction: column;
  gap: 130px;
}

/* 한 행 = 글 580 + 간격 46 + 사진 574
   시안 스타일 — 사진 뒤 민트 원형 배경 + 이름/직함 아래 민트 띠(둘 다 ::before/::after 로 그린다).
   photofirst 여부에 따라 사진이 왼쪽/오른쪽으로 바뀌므로 두 변형에 각각 좌표를 준다. */
.fg14d-row {
  display: flex;
  gap: 46px;
  align-items: stretch; /* 글 블록을 사진 높이(616)에 맞춰 늘려 이름/직함을 «바닥에 붙인다» */
  position: relative;
}

/* 사진 뒤 민트 원(둥근 배경) — 사진 상하좌우로 40px 씩 번진다 */
.fg14d-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -40px;
  width: 654px;
  height: 696px;
  border-radius: 50%;
  background: var(--dn-cream, #e4f2ee);
}
.fg14d-row:not(.fg14d-row--photofirst)::before { left: 586px; } /* 사진이 오른쪽(626~1200) */
.fg14d-row--photofirst::before { left: -40px; }                  /* 사진이 왼쪽(0~574) */

/* 하단 장식 띠는 걷어내고 사진 뒤 원형 배경만 남긴다 — 약력이 짧으면 빈 사각형으로 보인다 */

.fg14d-photo,
.fg14d-body {
  position: relative;
  z-index: 1;
}

.fg14d-body {
  width: 580px;
  flex: 0 0 580px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 이름 옆 namebox 는 껍데기만 벗기고(display:contents) 안의 이름·자격을
   body 의 직속 flex 항목으로 만든다 — order 로 시안 순서(자격→약력→이름→진료분야)를
   만들기 위해서다. 텍스트는 그대로, 감싸는 상자만 사라진다. */
.fg14d-namebox { display: contents; }

/* 자격(▎ 아이콘 + "보건복지부 인증 …") — 시안에서는 맨 위, 목록 순서 1번 */
.fg14d-cert {
  order: 1;
  margin: 0;
  position: relative;
  padding-left: 14px;
  font-size: 17px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--dn-mint-ink, #0e6b62);
}
.fg14d-cert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 14px;
  border-radius: 1.5px;
  background: var(--dn-mint-ink, #0e6b62);
}

/* 약력 목록 — 순서 2번(원래 그대로) */
.fg14d-career { order: 2; }

/* 이름 — 순서 3번. 자격/약력 뒤 간격은 .fg14d-body 의 flex gap(12px) 만으로 흐르게 둔다 —
   사진 바닥에 강제로 붙이지 않는다. 약력이 짧은 카드는 사진 아래쪽에 여백이 남는 것이 정상이다. */
.fg14d-name {
  order: 3;
  margin: 0;
  font-size: 40px !important;
  line-height: 52px !important;
  font-weight: 600 !important;
  letter-spacing: -0.6px;
  color: #0a0a0a;
}

/* 진료 분야 — 시안에서는 이름 «아래»의 작은 부제, 순서 4번(맨 아래) */
.fg14d-role {
  order: 4;
  margin: 0;
  width: fit-content;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--dn-mint-ink, #0e6b62);
}

/* 약력 목록 — 한 줄 30px 이 시안 높이의 단위다 */
.fg14d-career {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.27px;
  color: rgba(0, 0, 0, 0.5);
}
/* 행높이를 li 에 «직접» 준다 — 상속값은 body li 규칙에 진다 */
.fg14d-career > li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  letter-spacing: -0.27px;
}
.fg14d-career > li::marker { content: none; }

.fg14d-photo {
  width: 574px;
  flex: 0 0 574px;
  height: 616px;
  display: block;
  object-fit: cover;
  background: #f1f1f1;
}

/* ── 모바일 ── 사진이 주인공이 되도록 한 단으로 쌓고 글자를 줄인다 */
@media (max-width: 1023px) {
  /* 좁은 화면에서는 늘려 자르기를 쓰지 않는다 — 사진이 심하게 눌린다.
     높이는 top/bottom 으로 채운다 — 좁은 폭에서 img 높이를 auto 로 고정하는 규칙이 있다 */
  .fg14d-heroframe {
    aspect-ratio: auto;
    height: 400px;
    background-size: cover;
    background-position: 50% 58%;
  }

  .fg14d-sec { padding: 56px 0 72px; }
  .fg14d-list { gap: 64px; }

  .fg14d-row { flex-direction: column; gap: 18px; }
  /* 사진이 앞에 오는 행도 화면에서는 글이 먼저 오게 맞춘다 */
  .fg14d-row--photofirst { flex-direction: column-reverse; }

  /* 데스크톱의 절대배치 원·띠는 폭 1200px 고정값이라 좁은 화면에 그대로 쓸 수 없다.
     모바일은 대신 사진 모서리를 둥글리고 이름은 margin-top:auto 없이 자연스러운 흐름으로 둔다 */
  .fg14d-row::before,
  .fg14d-row::after { content: none; }
  .fg14d-name { margin-top: 4px; }

  .fg14d-body { width: 100%; flex: 1 1 auto; gap: 10px; }

  .fg14d-photo {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    aspect-ratio: 574 / 616;
    border-radius: 20px;
  }

  .fg14d-role { font-size: 14px; line-height: 20px; }
  .fg14d-name { font-size: 26px !important; line-height: 34px !important; letter-spacing: -0.4px; }
  .fg14d-cert { font-size: 15px; line-height: 23px; letter-spacing: -0.2px; padding-left: 12px; }
  .fg14d-cert::before { top: 5px; height: 13px; }
  .fg14d-career,
  .fg14d-career > li { font-size: 14px; line-height: 24px; letter-spacing: -0.2px; }
}