@charset "utf-8";

/* ============================================================
   main.css — 메인 페이지   (page-templates/template-main.php · sections/main/)
   ============================================================ */

#main-page {
  --main-vis-em: #fff38a;                /* 비주얼 강조 글자 */
  --main-vis-w: 1400px;                  /* 비주얼 글 영역 폭 */
  --main-line: color-mix(in srgb, var(--one-txt-color) 12%, transparent);   /* 박스 테두리 */
  --main-tint: color-mix(in srgb, var(--one-txt-color) 8%, var(--white-color)); /* 라벨 · 설명 박스 배경 */

  /* 특별함 — 이미지 · 박스 · 겹침 (컨테이너 폭 대비) */
  --main-spc-img: 64.46%;
  --main-spc-box: 38.7%;
  --main-spc-ovl: -3.16%;
  --main-spc-top: 15.65%;
}


/* ============================
   sec-vis — 메인 비주얼 슬라이드
============================ */

#main-page .sec-vis {
  position: relative;
  overflow: hidden;
}

#main-page .vis-item {
  display: flex;
  align-items: center;
  height: auto;
  aspect-ratio: 1920 / 950;
  min-height: 560px;
}

#main-page .vis-bg {
  position: absolute;
  inset: 0;
  background-image: var(--vis-bg);
}

#main-page .vis-inner {
  z-index: 1;
  max-width: var(--main-vis-w);
  padding: var(--one-space-r) 0;
}

#main-page .vis-cap {
  margin-bottom: var(--one-gap-sm);
  font-size: var(--one-p-tit);
  color: var(--gray-color02);
}

#main-page .vis-tit {
  margin-bottom: var(--one-gap-xl);
}

#main-page .vis-desc {
  font-size: var(--one-p-tit);
}

/* 파란 캡션 · 주색 제목 */
#main-page .vis-blue .vis-cap { color: color-mix(in srgb, var(--main-color) 70%, var(--white-color)); }
#main-page .vis-blue .vis-tit { color: var(--main-color); }

/* 흰 글자 */
#main-page .is-light .vis-inner,
#main-page .is-light .vis-cap { color: var(--white-color); }
#main-page .is-light .vis-em  { color: var(--main-vis-em); }

/* 활성 장이 바뀔 때 글이 올라온다 — 초기화 전에는 숨기지 않는다 */
#main-page .vis-inner > * {
  transition: opacity 0.8s ease, transform 0.8s ease;
}

#main-page .vis-inner > :nth-child(2) { transition-delay: 0.15s; }
#main-page .vis-inner > :nth-child(3) { transition-delay: 0.3s; }

#main-page .swiper-initialized .vis-item:not(.swiper-slide-active) .vis-inner > * {
  opacity: 0;
  transform: translateY(24px);
}

/* 화살표 — 색은 활성 장을 따라간다 (main.js 가 .sec-vis 에 .is-light) */
#main-page .vis-nav {
  color: var(--one-txt-color);
}

#main-page .sec-vis.is-light .vis-nav {
  color: var(--white-color);
}

#main-page .vis-nav .slide-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

#main-page .vis-prev { left: var(--one-space-s); }
#main-page .vis-next { right: var(--one-space-s); }

#main-page .vis-nav .slide-btn::before {
  width: 20px;
  height: 20px;
  border-color: currentColor;
}


/* ============================
   sec-spc — 바로현치과의 특별함
============================ */

#main-page .sec-spc .con-inner-lg {
  padding: var(--one-space-xl) 0;
}

#main-page .sec-spc .sec-hd {
  padding-bottom: var(--one-space-lg);
}

#main-page .spc-lst {
  display: flex;
  flex-direction: column;
  gap: var(--one-space-xl);
}

/* 홀수 — 이미지 우측 / 짝수 — 이미지 좌측. 박스는 음수 마진으로 이미지에 겹친다 */
#main-page .spc-item {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
}

#main-page .spc-item:nth-child(even) {
  flex-direction: row;
}

#main-page .spc-img {
  display: block;
  flex: 0 0 var(--main-spc-img);
}

#main-page .spc-img img {
  display: block;
}

/* margin-top % 는 부모 '폭' 기준 — 이미지 높이의 절반에 맞춘 값 */
#main-page .spc-box {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--main-spc-box);
  margin-top: var(--main-spc-top);
  margin-right: var(--main-spc-ovl);
  padding: var(--one-space-s) var(--one-space-s);
  border: 1px solid var(--main-line);
  background-color: color-mix(in srgb, var(--white-color) 85%, transparent);
}

#main-page .spc-item:nth-child(even) .spc-box {
  margin-right: 0;
  margin-left: var(--main-spc-ovl);
}

#main-page .spc-label {
  margin-bottom: var(--one-gap-lg);
}

#main-page .spc-tit {
  margin-bottom: var(--one-gap-sm);
  color: var(--main-color);
}


/* ============================
   sec-dr — 바로현치과의 의료진소개
============================ */

#main-page .sec-dr {
  background-image: url("../images/main/01_메인_2_의료진 소개_bg.jpg");
}

#main-page .sec-dr .con-inner-lg {
  padding: var(--one-space-xl) 0;
}

#main-page .sec-dr .sec-hd {
  padding-bottom: var(--one-space-lg);
}

/* 카드 외형 · 사진은 크롭 이미지 — 글이 길어지면 cover 로 커지고 우측이 잘린다 */
#main-page .dr-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  aspect-ratio: 1698 / 850;
  padding: 7% 4% 4% 40%;
  border-radius: 48px;
  background: no-repeat left center / cover;
  background-image: url("../images/main/01_메인_2_의료진 소개_한호현.jpg");
}

#main-page .dr-name {
  display: flex;
  align-items: baseline;
  gap: var(--one-gap-sm);
  margin-bottom: var(--one-gap-r);
}

#main-page .dr-name h3 {
  letter-spacing: 0.2em;
}

#main-page .dr-role {
  font-weight: 500;
}

#main-page .dr-badge {
  display: flex;
  align-items: center;
  gap: var(--one-gap-r);
  width: 565px;
  max-width: 100%;
  height: 59px;
  padding: 0 var(--one-gap-sm);
  background: url("../images/main/01_메인_2_의료진 소개_전문의_bg.png") no-repeat center / 100% 100%;
  color: var(--white-color);
  font-size: var(--one-p-tit);
  line-height: 1;
}

#main-page .dr-badge .dr-logo {
  flex: none;
  width: 44px;
}

#main-page .dr-desc {
  margin-top: var(--one-space-s);
  font-size: calc(var(--one-body) * 1.2);
}

#main-page .dr-lst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--one-space-s) var(--one-gap-xl);
  width: 100%;
  margin-top: calc(var(--one-gap-xl) * 2);
}

#main-page .dr-label {
  display: inline-block;
  margin-bottom: var(--one-gap-r);
  padding: var(--one-gap-xs) var(--one-gap-xl);
  border-radius: 50em;
  background-color: var(--main-tint);
}

#main-page .dr-col li + li {
  margin-top: var(--one-gap-sm);
}

#main-page .dr-col li::before {
  content: "·";
  margin-right: 0.4em;
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {

  /* 비주얼 — PC 이미지 유지, 사진 쪽으로 당긴다 */
  #main-page .vis-item {
    aspect-ratio: auto;
    height: 70vw;
    min-height: 480px;
  }

  #main-page .vis-bg {
    background-position: 70% center;
  }

  #main-page .vis-inner > * {
    max-width: 55%;
  }

  /* 특별함 — 이미지 위 · 박스 아래 */
  #main-page .spc-lst {
    gap: var(--one-space-r);
  }

  #main-page .spc-item,
  #main-page .spc-item:nth-child(even) {
    flex-direction: column;
    align-items: center;
  }

  #main-page .spc-img {
    flex: none;
    width: 100%;
  }

  #main-page .spc-box,
  #main-page .spc-item:nth-child(even) .spc-box {
    flex: none;
    width: 90%;
    margin: calc(var(--one-space-s) * -1) 0 0;
    padding: var(--one-gap-xl) var(--one-gap-lg) var(--one-space-s);
    text-align: center;
  }

  /* 의료진 — 모바일 카드로 전환 */
  #main-page .sec-dr .sec-hd {
    padding-bottom: var(--one-space-s);
  }

  #main-page .dr-card {
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 657 / 1753;
    padding: 86.8% 5% 10%;
    border-radius: 36px;
    background-position: center top;
    background-image: url("../images/main/mobile/01_메인_2_의료진 소개_한호현_M.png");
    text-align: center;
  }

  #main-page .dr-badge {
    justify-content: center;
    width: 88%;
    height: auto;
    aspect-ratio: 565 / 59;
    font-size: var(--one-body);
  }

  #main-page .dr-badge .dr-logo {
    width: 7.5%;
  }

  #main-page .dr-desc {
    margin-top: var(--one-gap-xl);
    padding: var(--one-gap-lg) var(--one-gap-r);
    border-radius: 20px;
    background-color: var(--main-tint);
    font-size: var(--one-body);
  }

  #main-page .dr-lst {
    grid-template-columns: 1fr;
    gap: var(--one-gap-xl);
    margin-top: var(--one-gap-xl);
  }

  #main-page .dr-col li + li {
    margin-top: var(--one-gap-xs);
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {

  /* 비주얼 — 모바일 이미지 · 글은 위쪽 */
  #main-page .vis-item {
    align-items: flex-start;
    height: auto;
    min-height: 0;
    aspect-ratio: 720 / 950;
  }

  #main-page .vis-bg {
    background-image: var(--vis-bg-mo);
    background-position: center;
  }

  #main-page .vis-inner {
    padding: 24vw 0 0;
  }

  #main-page .vis-inner > * {
    max-width: 100%;
  }

  #main-page .vis-ct .vis-inner {
    text-align: center;
  }

  #main-page .vis-cap {
    font-size: var(--one-body);
  }

  #main-page .vis-tit {
    font-size: var(--one-hd3);
  }

  #main-page .vis-desc {
    font-size: var(--one-body);
  }

  #main-page .vis-nav {
    display: none;
  }

  /* 특별함 */
  #main-page .spc-label {
    margin-bottom: var(--one-gap-r);
    font-size: var(--one-p-tit);
  }

  #main-page .spc-tit {
    font-size: var(--one-body);
  }

  #main-page .spc-desc {
    font-size: calc(var(--one-body) * 0.9);
  }

  /* 의료진 */
  #main-page .sec-dr {
    background-image: url("../images/main/mobile/01_메인_2_의료진 소개_bg_M.jpg");
  }

  #main-page .dr-card {
    padding: 86.8% 4.5% 10%;
    border-radius: 5vw;
  }

  #main-page .dr-name h3 {
    font-size: 5.5vw;
  }

  #main-page .dr-badge {
    gap: var(--one-gap-sm);
    font-size: 3.6vw;
  }

  #main-page .dr-desc {
    border-radius: 2.8vw;
    font-size: 3.3vw;
  }

  #main-page .dr-label {
    font-size: 3.6vw;
  }

  #main-page .dr-col li {
    font-size: 3.1vw;
  }
}