/* =============================================================
   main.css — C1 메인(/main) 페이지 전용
   공통 컴포넌트(헤더·푸터·버튼·칩·뱃지·섹션 헤더)는 customer-common.css 참조.
   시안: prompts/main/main-393.png(모바일) · main-1280.png(데스크탑)
   ============================================================= */

/* ---------------------------------------------------------------
   히어로
   사진은 시안에서 좌우 반전(-scale-x-100)되어 오른쪽에 놓인다.
   웜화이트 배경과의 경계는 상·좌·하 세 방향 그라데이션으로 지운다.
   --------------------------------------------------------------- */
.main-hero {
  position: relative;
  overflow: hidden;
  background: var(--kb-hero-bg);
}

.main-hero-photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.main-hero-photo img {
  position: absolute;
  /* 시안(node 1:735)의 인물 위치에 맞춘 값 — 머리 끝이 타이틀 첫 줄 옆에 온다.
     사진이 가로로 더 넓어 object-fit:cover 가 높이 기준으로 맞추므로,
     세로 위치는 object-position 이 아니라 top 으로만 움직인다 */
  top: -3%;
  right: -4%;
  width: 105%;
  height: 90%;
  max-width: none;
  object-fit: cover;
  object-position: 46% 22%;
  transform: scaleX(-1);
}

/* 배경과 사진의 경계를 지우는 페이드 (시안 Rectangle 12·13·14) */
.main-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--kb-hero-bg) 0%, rgba(249, 248, 246, 0) 34%),
    linear-gradient(90deg, var(--kb-hero-bg) 0%, rgba(249, 248, 246, 0) 59%),
    linear-gradient(0deg, var(--kb-hero-bg) 0%, rgba(249, 248, 246, 0) 26%);
}

.main-hero-inner {
  position: relative; /* 사진 위 레이어 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* ⚠ padding 축약형을 쓰면 .kb-frame 의 좌우 여백(--kb-frame-pad)까지 덮어써
     히어로만 화면 끝에 붙는다. 세로 값만 따로 준다 */
  padding-top: 37px;
  padding-bottom: 16px;
}

.main-hero-eyebrow {
  color: var(--kb-gray-700);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 16px;
}

/* 타이틀 — 줄바꿈은 i18n 메시지가 정한다 (한/영 길이 차이 흡수) */
.main-hero-title {
  color: var(--kb-gray-900);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre-line;
}

/* 포인트 문구 — 텍스트 아랫부분만 칠하는 형광펜 하이라이트 (시안 Rectangle 14~16).
   7px 짜리 띠라서 글자 크기가 바뀌어도 두께는 그대로 둔다. */
.main-hero-points {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.main-hero-points span {
  padding-bottom: 1px;
  background: linear-gradient(var(--kb-highlight), var(--kb-highlight)) 0 100% / 100% 7px no-repeat;
  color: var(--kb-gray-700);
  font-size: 0.75rem;
  font-weight: 500;
}

/* 영문 문구는 국문보다 길어 모바일에서 사진 위까지 밀고 들어온다 — 한 단계 줄인다 */
html:not([lang="ko"]) .main-hero-title {
  font-size: 1.25rem;
}

/* 시안은 포인트 문구와 CTA 사이만 60px — 컨테이너 gap(30) 에 30 을 더한다 */
.main-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 30px;
}

.main-hero-actions form {
  display: contents;
}

.main-hero-actions .kb-btn {
  width: 100%;
}

/* 시술 카드 매소너리는 C2 와 공용이라 customer-common.css(.kb-treatment-*)로 옮겼다 */

/* ---------------------------------------------------------------
   SNS 크리에이터 (하드코딩 유지 — 요구사항)
   아바타는 원이 아니라 세로로 긴 타원 (시안 70x90 · radius 100)
   --------------------------------------------------------------- */
.main-sns-strip {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.main-sns-strip::-webkit-scrollbar {
  display: none;
}

.main-sns-item {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.main-sns-avatar {
  position: relative;
  width: 70px;
  height: 90px;
  border-radius: 100px;
  overflow: hidden;
  background: #d9d9d9;
}

.main-sns-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 안쪽 민트 링 (시안 Rectangle 5342) */
.main-sns-avatar::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid var(--kb-main-50);
  border-radius: 100px;
}

.main-sns-handle {
  max-width: 100%;
  color: var(--kb-gray-800);
  font-size: 0.75rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-sns-country {
  color: var(--kb-gray-600);
  font-size: 0.6875rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------
   병원
   --------------------------------------------------------------- */
.main-hospital-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.main-hospital-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 80px;
  border-radius: var(--kb-radius);
  overflow: hidden;
}

.main-hospital-card > img {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: var(--kb-radius);
  object-fit: cover;
  background: var(--kb-gray-50);
}

.main-hospital-body {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}

.main-hospital-location {
  color: var(--kb-gray-600);
  font-size: 0.75rem;
  font-weight: 500;
}

.main-hospital-name {
  margin-top: 6px;
  color: var(--kb-gray-800);
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-hospital-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ---------------------------------------------------------------
   How it works
   모바일: 스텝 2x2 를 점선 십자가 나누고 교차점에 일러스트 원이 얹힌다
   데스크탑: 원이 위 · 스텝 4열, 열 사이만 점선
   --------------------------------------------------------------- */
.main-how-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 0;
  padding: 10px 0;
}

/* 점선 십자 — 원 아래로 깔린다 */
.main-how-grid::before,
.main-how-grid::after {
  content: "";
  position: absolute;
}

.main-how-grid::before {
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--kb-main-200);
}

.main-how-grid::after {
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--kb-main-200);
}

.main-how-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  text-align: center;
}

/* 시안은 네 블록이 열 중앙이 아니라 바깥쪽으로 밀려 있다 — 가운데 원과
   "How it works" 라벨이 지나갈 자리를 비워 주기 위해서다 */
.main-how-step:nth-child(odd) {
  padding-right: 38px;
}

.main-how-step:nth-child(even) {
  padding-left: 38px;
}

.main-how-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--kb-main-600);
  color: var(--kb-white);
  font-family: var(--kb-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}

.main-how-step h3 {
  color: var(--kb-main-600);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.main-how-step p {
  color: var(--kb-gray-700);
  font-size: 0.8125rem;
  font-weight: 500;
}

.main-how-step img {
  width: 26px;
  height: 26px;
}

/* 중앙 일러스트 원 — 점선 교차점 위에 얹힌다.
   z-index 가 없으면 나중에 그려지는 ::after(가로 점선)가 원 위를 지나간다 */
.main-how-hero {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 138px;
  height: 138px;
  border-radius: 100px;
  background: var(--kb-main-50);
}

/* 크기·위치는 시안 PNG 를 픽셀로 재서 맞췄다 — 원 지름 대비 머리 폭 17.9%,
   머리 상단 12.7%, 좌우 중앙. 원본 비율(84.568:105.948)을 유지하면 코트 아래끝이
   "How it works" 뒤로 자연스럽게 들어가 별도 마스크가 필요 없다 */
.main-how-hero img {
  position: relative;
  left: 1.6%; /* 원본 도형에서 얼굴이 살짝 왼쪽이라 그만큼 되민다 */
  width: 41.3%;
  margin: 12.7% auto 0;
}

.main-how-hero span {
  position: absolute;
  top: 64.7%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--kb-gray-800);
  font-family: var(--kb-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   신뢰 밴드
   --------------------------------------------------------------- */
.main-trust {
  background: var(--kb-main-50);
  text-align: center;
}

.main-trust-title {
  color: var(--kb-gray-800);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: pre-line;
}

.main-trust-title em {
  color: var(--kb-main-600);
  font-style: normal;
}

.main-trust-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 30px;
}

.main-trust-item h3 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
  color: var(--kb-gray-800);
  font-size: 1rem;
  font-weight: 700;
}

.main-trust-item h3::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: url("../img/main/icon/check-square.svg") center / contain no-repeat;
}

.main-trust-item p {
  color: var(--kb-gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.55;
}

.main-trust-item strong {
  color: var(--kb-gray-800);
  font-weight: 600;
}

/* ---------------------------------------------------------------
   태블릿
   --------------------------------------------------------------- */
@media (min-width: 560px) {
  .main-hero-points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .main-hero-actions {
    flex-direction: row;
  }

  .main-hero-actions .kb-btn {
    width: auto;
    min-width: 176px;
  }

  .main-hospital-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .main-trust-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
}

/* ---------------------------------------------------------------
   데스크탑
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  /* 시안(node 1:350)은 사진을 히어로보다 위·아래로 넘치게 걸쳐 인물을 크게 쓴다.
     top/height 로만 세로 위치가 결정된다 (cover 가 높이 기준으로 맞아 여백이 없다) */
  .main-hero-photo img {
    top: -17%;
    right: 0;
    width: 57%;
    height: 117%;
    object-position: 50% 50%;
  }

  /* 가로 페이드는 사진 왼쪽 경계(43%)를 지난 45% 까지 불투명해야 이음선이 안 보인다.
     인물이 시작되는 66% 전에 투명해져야 얼굴이 흐려지지 않는다 */
  .main-hero-photo::after {
    background:
      linear-gradient(180deg, var(--kb-hero-bg) 0%, rgba(249, 248, 246, 0) 26%),
      linear-gradient(90deg, var(--kb-hero-bg) 0%, var(--kb-hero-bg) 45%,
        rgba(249, 248, 246, 0) 62%),
      linear-gradient(0deg, var(--kb-hero-bg) 0%, rgba(249, 248, 246, 0) 54%);
  }

  .main-hero-inner {
    gap: 40px;
    padding-top: 57px;
    padding-bottom: 57px;
    /* 시안은 본문 프레임(44)보다 50px 더 안쪽에서 시작한다 — x=94 */
    padding-left: calc(var(--kb-frame-pad) + 50px);
    min-height: 490px;
    justify-content: center;
  }

  .main-hero-eyebrow {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  .main-hero-title {
    font-size: 2.5rem;
    line-height: 1.25;
    max-width: 652px;
  }

  .main-hero-points span {
    font-size: 0.875rem;
  }

  /* 시안은 176.5px 버튼 두 개(합 361). 영문 라벨은 더 길어서 늘어나게 둔다.
     포인트 문구와의 간격은 56px (컨테이너 gap 40 + 16) */
  .main-hero-actions {
    width: fit-content;
    min-width: 361px;
    margin-top: 16px;
  }

  .main-hero-actions .kb-btn {
    flex: 1;
    min-width: 176px;
    white-space: nowrap;
  }

  .main-sns-strip {
    gap: 40px;
    margin-top: 28px;
  }

  .main-sns-handle {
    font-size: 0.875rem;
  }

  .main-sns-country {
    font-size: 0.75rem;
  }

  .main-hospital-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
  }

  .main-hospital-card {
    height: 120px;
    gap: 16px;
  }

  .main-hospital-card > img {
    width: 120px;
    height: 120px;
  }

  /* 원이 위, 스텝은 4열 — 점선 십자 대신 열 사이 세로 점선만 (시안 1280) */
  .main-how-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0 44px;
    margin-top: 40px;
  }

  .main-how-grid::before,
  .main-how-grid::after {
    display: none;
  }

  /* 데스크탑은 원이 위로 빠지므로 바깥쪽 밀기(모바일 규칙)를 되돌린다 */
  .main-how-step,
  .main-how-step:nth-child(odd),
  .main-how-step:nth-child(even) {
    padding: 0 30px;
    border-right: 1px dashed var(--kb-main-200);
  }

  /* 원(.main-how-hero)이 마지막 자식이라 :last-of-type 은 못 쓴다 */
  .main-how-step:nth-child(4) {
    border-right: 0;
  }

  .main-how-step h3 {
    font-size: 1.125rem;
    margin-bottom: 12px;
  }

  .main-how-step p {
    color: var(--kb-gray-600);
    font-size: 0.875rem;
    line-height: 1.7;
  }

  .main-how-step img {
    width: 34px;
    height: 34px;
  }

  /* 원은 스텝 위 · 4열 전체를 가로지르는 첫 줄로 올린다 */
  .main-how-hero {
    position: relative;
    grid-column: 1 / -1;
    order: -1;
    top: auto;
    left: auto;
    transform: none;
    width: 170px;
    height: 170px;
    margin: 0 auto 40px;
  }

  .main-how-hero span {
    font-size: 1.875rem;
  }

  .main-trust-title {
    font-size: 1.875rem;
    line-height: 1.65;
  }

  .main-trust-items {
    gap: 40px;
    margin-top: 30px;
  }

  .main-trust-item p {
    font-size: 0.875rem;
    line-height: 1.57;
  }
}