@charset "utf-8";
/* 메인 — main/sec-main.inc.php · main/sec-slide.inc.php (index.php 에서만 로드)
 * 시안: design/main/pc_summary.jpg · design/main/slide — 1920 기준 PC
 * 모바일 시안 전입니다. 1024px 이하는 파일 하단에서 세로로 쌓기만 합니다.
 *
 * 배경 틴트는 팔레트 변수를 섞어 만듭니다 (color-mix).
 *   --sub-color02 40% → 카드 배경 · IMPLANT 워터마크 / 30% → 일반진료 배경 / 8% → 장비 배경
 *   --sub-color01 60% → 첨단장비 배경
 */

/* 지역 토큰 — 컬러칩 밖 시안 색.
 * [미해결] 확정되면 :root 로 올리거나 팔레트 색으로 바꿉니다. */
.one-main-body {
  --one-main-band-from: #3775e2;   /* 디지털 임플란트 띠 (왼쪽) */
  --one-main-band-to  : #6ba0e2;   /* 디지털 임플란트 띠 (오른쪽) · 시로나 제목 강조 */
  --one-main-price    : #ffee72;   /* 79만원 숫자 */
}
.bnr-item[data-slide="1"] { --one-bnr-point: #00fff9; }
.bnr-item[data-slide="2"] { --one-bnr-point: #daff39; }
.bnr-item[data-slide="3"] { --one-bnr-point: #2ba0e3; }
.bnr-item[data-slide="4"] { --one-bnr-point: #2e20b5; }
.bnr-item[data-slide="5"] { --one-bnr-point: #c3006e; }

/* default.css 의 p { word-break: break-all } 이 .txt-wrap 의 keep-all 을 덮어써
   한글이 단어 중간에서 끊깁니다 — 메인 안에서만 되돌립니다 */
.one-main-body .txt-wrap p {
  word-break: inherit;
}


/* ============================
   0. 메인 비주얼
============================ */

.bnr-vis {
  aspect-ratio: 1920 / 793;
  max-height: 100vh;
}


/* ============================
   1. 메인 슬라이드
============================ */

.bnr-slide {
  position: relative;
}

.bnr-item {
  display: flex;
  align-items: center;
  height: 600px;
}

.bnr-item .x-sf {
  width: 100%;
}

.bnr-slide .bnr-inner {
  padding: 0;
}

/* section img { width: 100% } 를 되돌립니다 — 로고는 원본 크기 */
.bnr-slide .bnr-logo {
  width: auto;
  margin-bottom: var(--one-gap-lg);
}

.bnr-label {
  margin-bottom: var(--one-gap-r);
}

.bnr-slide .bnr-title {
  font-weight: 500;
}

.bnr-point {
  color: var(--one-bnr-point);
}

.bnr-desc {
  margin-top: var(--one-gap-lg);
}

.bnr-check {
  flex-wrap: wrap;
  gap: var(--one-gap-sm) var(--one-gap-lg);
  margin-top: var(--one-gap-xl);
}

.bnr-cta {
  margin-top: var(--one-space-s);
}

.bnr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--one-gap-sm);
  min-height: 52px;
  padding: 0 var(--one-gap-xl);
  border: 1px solid currentColor;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bnr-pager .swiper-pagination-bullet {
  background: var(--gray-color03);
  opacity: 1;
}

/* 수식어 — 어두운 배경 */
.bnr-item.bnr-dark .bnr-txt {
  color: var(--white-color);
}

/* 상태 */
.bnr-item.bnr-dark .bnr-btn:hover {
  background: var(--white-color);
  color: var(--one-txt-color);
}

.bnr-item:not(.bnr-dark) .bnr-btn {
  color: var(--one-bnr-point);
}

.bnr-item:not(.bnr-dark) .bnr-btn:hover {
  background: var(--one-bnr-point);
  color: var(--white-color);
}

.bnr-pager .swiper-pagination-bullet-active {
  background: var(--main-color);
}


/* ============================
   2. 선택해야 하는 이유
============================ */

.sec-why-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 283px));
  justify-content: center;
  gap: var(--one-gap-lg);
}

/* 카드 위 세로선 + 점 */
.sec-why-item {
  position: relative;
  min-height: 414px;
  padding: 82px var(--one-gap-r) var(--one-gap-xl);
}

.sec-why-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 48px;
  background: var(--white-color);
}

.sec-why-item::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--white-color);
}

.sec-why-item .txt-wrap {
  color: var(--white-color);
}

.sec-why-num {
  color: color-mix(in srgb, var(--white-color) 70%, transparent);
}

.sec-why-title {
  margin-top: var(--one-gap-sm);
}

.sec-why-desc {
  margin-top: var(--one-gap-xl);
}


/* ============================
   3. 임플란트 식립 개수
============================ */

.sec-count-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 160px;
}

.sec-count-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 410px;
  aspect-ratio: 1;
  border: 2px dashed color-mix(in srgb, var(--white-color) 70%, transparent);
  border-radius: 50%;
}

.sec-count .txt-wrap {
  color: var(--white-color);
}

.sec-count-num {
  margin-top: var(--one-gap-r);
}

.sec-count-num strong {
  font-size: calc(var(--one-hd1) * 1.5);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.sec-count-en {
  letter-spacing: 0.5em;
  color: color-mix(in srgb, var(--white-color) 60%, transparent);
}

.sec-count-txt .hd2 {
  margin: var(--one-gap-lg) 0 var(--one-gap-r);
}


/* ============================
   4. 임플란트의 비밀
============================ */

.sec-sys-img {
  max-width: 757px;
  margin: 0 auto var(--one-space-r);
}

/* 2×2 카드 + 가운데 점선 십자 */
.sec-sys-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--one-space-s);
}

.sec-sys-list::before {
  content: "";
  position: absolute;
  top: var(--one-gap-r);
  bottom: var(--one-gap-r);
  left: 50%;
  border-left: 1px dashed var(--gray-color02);
}

.sec-sys-list::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--one-gap-r) * -1);
  right: calc(var(--one-gap-r) * -1);
  border-top: 1px dashed var(--gray-color02);
}

.sec-sys-item {
  position: relative;
  z-index: 1;
  padding: 46px var(--one-space-s) 46px 120px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sub-color02) 40%, var(--white-color));
}

.sec-sys-desc {
  margin-top: var(--one-gap-r);
}


/* ============================
   5. 디지털 임플란트
   * 아래 파란 띠는 ::before — 그리드 2행(258px)과 높이를 맞춥니다
============================ */

.sec-impl {
  position: relative;
}

.sec-impl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 258px;
  background: linear-gradient(90deg, var(--one-main-band-from), var(--one-main-band-to));
}

.sec-impl .sec-impl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 679px;
  grid-template-rows: auto 258px;
  column-gap: var(--one-gap-xl);
  padding: var(--one-space-r) 0 0;
}

.sec-impl-head {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: flex;
  align-items: baseline;
  gap: var(--one-gap-sm);
  padding: 0 0 var(--one-gap-lg) var(--one-space-s);
}

.sec-impl-mark {
  font-size: calc(var(--one-hd1) * 1.3);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--sub-color02) 40%, var(--white-color));
}

.sec-impl .sec-impl-desc {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  padding-left: var(--one-space-s);
  color: var(--white-color);
}

.sec-impl-img {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: end;
  margin-bottom: 85px;
}


/* ============================
   6. 가격 띠
============================ */

.sec-price .sec-price-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--one-gap-xl);
  padding: var(--one-gap-xl) 0;
}

.sec-price-inner > .txt-wrap {
  padding-left: var(--one-space-s);
  color: var(--white-color);
}

.sec-price .sec-price-num {
  display: flex;
  align-items: baseline;
  color: var(--white-color);
}

.sec-price-num strong {
  font-size: calc(var(--one-hd1) * 1.7);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--one-main-price);
}


/* ============================
   7. 시로나 CT & 트리오스5
============================ */

.sec-eqp {
  background: color-mix(in srgb, var(--sub-color02) 8%, var(--white-color));
}

.sec-eqp-point {
  color: var(--one-main-band-to);
}

.sec-eqp-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 582px));
  justify-content: center;
  gap: 38px;
}

.sec-eqp-name {
  padding: var(--one-gap-lg) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gray-color02) 35%, transparent);
}

.sec-eqp-desc {
  padding-top: var(--one-gap-lg);
}


/* ============================
   8. 첨단장비 롤링
   * 가운데 카드 1094px + 양옆 카드가 걸쳐 보입니다
============================ */

.sec-crsl {
  padding-bottom: var(--one-space-lg);
  background: color-mix(in srgb, var(--sub-color01) 60%, var(--white-color));
  overflow-x: clip;
}

.sec-crsl .sec-crsl-head {
  padding-bottom: 0;
}

.sec-crsl-slide {
  position: relative;
}

.sec-crsl-item {
  width: 1094px;
  max-width: calc(100% - var(--one-space-s) * 2);
}

/* 화살표 — 가운데 카드 양옆 간격 안 */
.sec-crsl-prev,
.sec-crsl-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 60px;
  margin-top: -30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.sec-crsl-prev { left: calc(50% - 620px); }
.sec-crsl-next { right: calc(50% - 620px); }

.sec-crsl-prev::before,
.sec-crsl-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border-left: 1.5px solid var(--one-txt-color);
  border-bottom: 1.5px solid var(--one-txt-color);
}

.sec-crsl-prev::before { transform: translate(-25%, -50%) rotate(45deg); }
.sec-crsl-next::before { transform: translate(-75%, -50%) rotate(-135deg); }


/* ============================
   9·10. 증례
============================ */

.sec-case .sec-case-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 803px;
  gap: var(--one-gap-xl);
  align-items: start;
}

.sec-case-txt .ft-body {
  margin-top: var(--one-space-s);
}

.sec-case-slide {
  position: relative;
  min-width: 0;
}

/* 점은 이미지 왼쪽 위 (오른쪽 위에는 치료기간이 있습니다) */
.sec-case .swiper-pagination.sec-case-pager {
  top: 14px;
  bottom: auto;
  left: 0;
  width: auto;
  text-align: left;
}

.sec-case-pager .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background: var(--gray-color03);
  opacity: 1;
}

/* 증례 이미지가 없을 때 — 시안의 빈 틀 */
.sec-case-empty {
  gap: 6px;
  margin-top: 45px;
}

.sec-case-empty span {
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
  aspect-ratio: 322 / 218;
  padding-bottom: var(--one-gap-sm);
  background: linear-gradient(to top, var(--sub-color04) 40px, var(--main-color) 40px);
  color: var(--white-color);
}

.sec-case-noti {
  margin-top: var(--one-gap-xl);
  color: var(--gray-color03);
}

/* 수식어 — 일반진료 */
.sec-case.sec-gen {
  background: color-mix(in srgb, var(--sub-color02) 30%, var(--white-color));
}

/* 상태 */
.sec-case-pager .swiper-pagination-bullet-active {
  background: var(--main-color);
}


/* ============================
   11. 온라인 상담
============================ */

.sec-csl .txt-wrap {
  color: var(--white-color);
}

.sec-csl-form {
  max-width: 1220px;
  margin: 0 auto;
}

.sec-csl-row {
  display: flex;
  gap: 22px;
}

.sec-csl-input {
  flex: 209 1 0;
  min-width: 0;
  height: 73px;
  padding: 0 var(--one-gap-lg);
  border: 0;
  border-radius: 20px;
  background: var(--white-color);
  font: inherit;
  font-size: var(--one-body);
  color: var(--one-txt-color);
}

.sec-csl-input:nth-of-type(2) { flex-grow: 349; }
.sec-csl-input:nth-of-type(3) { flex-grow: 476; }

.sec-csl-input::placeholder {
  color: var(--gray-color01);
}

.sec-csl-btn {
  flex: 0 0 131px;
  height: 73px;
  border: 0;
  border-radius: 20px;
  background: var(--main-color);
  font-size: var(--one-p-tit);
  font-weight: 700;
  color: var(--white-color);
  cursor: pointer;
}

.sec-csl-agree {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--one-gap-sm);
  margin-top: var(--one-gap-lg);
}

.sec-csl-agree input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--main-color);
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
   [미해결] 모바일 시안 전 — 세로로 쌓기만 합니다
============================ */

@media all and (max-width: 1024px) {
  .bnr-item { height: auto; min-height: 480px; }

  .sec-why-list { grid-template-columns: repeat(2, minmax(0, 283px)); }

  .sec-count-inner { flex-direction: column; gap: var(--one-space-s); }
  .sec-count-ring  { width: min(410px, 80vw); }

  .sec-sys-list::before,
  .sec-sys-list::after { display: none; }
  .sec-sys-item { padding: var(--one-gap-xl); }

  /* 띠를 섹션 바닥 대신 설명 상자 뒤로 옮깁니다 */
  .sec-impl::before { display: none; }
  .sec-impl .sec-impl-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: var(--one-gap-xl);
    padding-bottom: var(--one-space-r);
  }
  .sec-impl-head,
  .sec-impl-img,
  .sec-impl .sec-impl-desc { grid-column: 1; grid-row: auto; padding-left: 0; margin: 0; }
  .sec-impl .sec-impl-desc {
    padding: var(--one-gap-xl);
    background: linear-gradient(90deg, var(--one-main-band-from), var(--one-main-band-to));
  }

  .sec-price .sec-price-inner { flex-direction: column; align-items: flex-start; }
  .sec-price-inner > .txt-wrap { padding-left: 0; }

  .sec-eqp-list { grid-template-columns: minmax(0, 582px); }

  .sec-crsl-prev { left: 0; }
  .sec-crsl-next { right: 0; }

  .sec-case .sec-case-inner { grid-template-columns: 1fr; }

  .sec-csl-row { flex-wrap: wrap; }
  .sec-csl-input { flex: 1 1 100%; }
  .sec-csl-btn { flex: 1 1 100%; }
}


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

@media all and (max-width: 639px) {
  .sec-why-list { grid-template-columns: minmax(0, 283px); }

  .sec-sys-list { grid-template-columns: 1fr; }
}