/* 드림렌즈 지면 전용 레이아웃 — 치수는 시안 값을 그대로 쓴다 */

.ce-dl-sec__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.ce-dl-h2 {
  margin: 0;
  font-family: var(--ce2-font);
  font-size: 32.3px !important;
  line-height: 45px !important;
  font-weight: 700;
  letter-spacing: -0.32px;
  color: #0a1e30;
  word-break: keep-all;
}

/* ── 드림렌즈란 ───────────────────────────────── */
.ce-dl-intro {
  background: #ffffff;
  padding: 130px 0 130px;
}

.ce-dl-intro__lead {
  margin: 30px 0 0;
  border-radius: 6px;
  border-left: 4px solid #2f6496;
  background: #f4f8fc;
  padding: 40px 45px;
  box-sizing: border-box;
}

.ce-dl-intro__lead-p {
  margin: 0;
  font-family: var(--ce2-font);
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  color: #333333;
  word-break: keep-all;
}

.ce-dl-intro__figure {
  margin: 30px 0 0;
  border-radius: 6px;
  background: #f4f8fc;
  padding: 12px;
  box-sizing: border-box;
}

.ce-dl-intro__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ce-dl-intro__photo {
  margin: 20px 0 0;
  border-radius: 6px;
  overflow: hidden;
}

.ce-dl-intro__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── 드림렌즈 시술과정 ─────────────────────────── */
.ce-dl-steps-sec {
  background: #f4f8fc;
  padding: 110px 0 138px;
}

.ce-dl-steps {
  margin: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.ce-dl-step__fig {
  margin: 0;
  height: 240px;
  overflow: hidden;
  background: #f4f8fc;
}

.ce-dl-step__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ce-dl-step__num {
  display: block;
  margin: 20px 0 0;
  font-family: var(--ce2-font);
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: #2f6496;
  text-align: center;
}

.ce-dl-step__name {
  margin: 4px 0 0;
  font-family: var(--ce2-font);
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600;
  letter-spacing: 0;
  color: #0a1e30;
  text-align: center;
  word-break: keep-all;
}

.ce-dl-step__desc {
  margin: 4px 0 0;
  font-family: var(--ce2-font);
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: #4a6680;
  text-align: center;
  word-break: keep-all;
}

/* ── 기대 효과 ───────────────────────────────── */
.ce-dl-effect {
  background: #ffffff;
  padding: 120px 0 248px;
}

.ce-dl-lead {
  margin: 30px 0 0;
  font-family: var(--ce2-font);
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  color: #333333;
  word-break: keep-all;
}

.ce-dl-effect__grid {
  margin: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
}

.ce-dl-effect__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #f4f8fc;
  border-radius: 0;
  overflow: visible;
  padding: 30px 38px 30px 42px;
  box-sizing: border-box;
}

.ce-dl-effect__fig {
  margin: 0;
  width: fit-content;
  height: 80px;
  overflow: hidden;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ce-dl-effect__fig img {
  display: block;
  width: auto;
  max-width: 80px;
  height: 80px;
  object-fit: contain;
}

.ce-dl-effect__body {
  margin: 0;
  width: 323px;
  min-height: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-sizing: border-box;
}

.ce-dl-effect__name {
  margin: 0;
  width: fit-content;
  font-family: var(--ce2-font);
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600;
  letter-spacing: 0;
  color: #0a1e30;
  word-break: keep-all;
}

/* ── 자주 묻는 질문 ───────────────────────────── */
.ce-dl-faq {
  background: #f4f8fc;
  padding: 172px 0 96px;
}

.ce-dl-faq__h2 {
  margin: 0;
  font-family: var(--ce2-font);
  font-size: 34px !important;
  line-height: 44px !important;
  font-weight: 700;
  letter-spacing: -1.02px;
  color: #010f1c;
  word-break: keep-all;
}

.ce-dl-faq__list {
  margin: 34px 0 0;
}

.ce-dl-faq__item {
  border-bottom: 1px solid #c7d0d9;
}

.ce-dl-faq__item>summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 0;
  font-family: var(--ce2-font);
  font-size: 18.7px;
  line-height: 29px;
  font-weight: 600;
  color: #0a1e30;
  word-break: keep-all;
}

.ce-dl-faq__item>summary::-webkit-details-marker {
  display: none;
}

.ce-dl-faq__item>summary::after {
  content: "+";
  position: absolute;
  right: 36px;
  top: 14px;
  font-family: var(--ce2-font);
  font-size: 25.5px;
  line-height: 40px;
  font-weight: 300;
  color: #134879;
}

.ce-dl-faq__item[open] > .ce-dl-faq__item>summary::after {
  content: "−";
}

.ce-dl-faq__a {
  padding: 0 56px 24px 0;
}

.ce-dl-faq__p {
  margin: 0 0 10px;
  font-family: var(--ce2-font);
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: #333333;
  word-break: keep-all;
}

.ce-dl-faq__p:last-child {
  margin-bottom: 0;
}

.ce-dl-faq__p a {
  color: #2f6496;
}

/* ── 마무리 상담 안내 ─────────────────────────── */
.ce-dl-cta {
  background: #0a1e30;
  padding: 101px 0 88px;
  text-align: center;
}

.ce-dl-cta__h2 {
  margin: 0;
  font-family: var(--ce2-font);
  font-size: 32.3px !important;
  line-height: 43px !important;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #ffffff;
  word-break: keep-all;
}

.ce-dl-cta__lead {
  margin: 11px auto 0;
  max-width: 538px;
  font-family: var(--ce2-font);
  font-size: 17.3px;
  line-height: 31px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  word-break: keep-all;
}

.ce-dl-cta__quote {
  margin: 35px 0 0;
  font-family: var(--ce2-font);
  font-size: 18.1px;
  line-height: 31px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  word-break: keep-all;
}

.ce-dl-cta__btns {
  margin: 38px 0 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ce-dl-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--ce2-font);
  font-size: 16.2px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: 0.32px;
  color: #ffffff;
  text-decoration: none;
  box-sizing: border-box;
}

.ce-dl-cta__btn--primary {
  border-color: #1f5d97;
  background: #1f5d97;
}

/* ── 좁은 화면 ───────────────────────────────── */
@media (max-width: 1023px) {
  .ce-dl-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .ce-dl-effect__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .ce-dl-sec__inner {
    padding: 0 20px;
  }

  .ce-dl-h2{
    font-size: 26px !important;
    line-height: 36px !important;
  }

  .ce-dl-intro {
    padding: 56px 0 64px;
  }

  .ce-dl-intro__lead {
    margin-top: 22px;
    padding: 24px 22px;
  }

  .ce-dl-intro__lead-p {
    font-size: 16px;
    line-height: 28px;
  }

  .ce-dl-steps {
    margin-top: 34px;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ce-dl-step__fig {
    height: 220px;
  }

  .ce-dl-effect {
    padding: 56px 0 64px;
  }

  .ce-dl-effect__grid {
    margin-top: 34px;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .ce-dl-effect__fig {
    height: 64px;
  }

  .ce-dl-effect__fig img {
    height: 64px;
  }

  .ce-dl-effect__name{
    font-size: 18px !important;
    line-height: 27px !important;
  }

  .ce-dl-steps-sec {
    padding: 56px 0 64px;
  }

  .ce-dl-intro__photo {
    margin-top: 22px;
  }

  .ce-dl-faq {
    padding: 56px 0 64px;
  }

  .ce-dl-faq__h2{
    font-size: 26px !important;
    line-height: 36px !important;
    letter-spacing: -0.6px;
  }

  .ce-dl-faq__list {
    margin-top: 24px;
  }

  .ce-dl-faq__item>summary {
    padding: 18px 40px 18px 0;
    font-size: 16.5px;
    line-height: 26px;
  }

  .ce-dl-faq__item>summary::after {
    right: 8px;
    top: 12px;
  }

  .ce-dl-faq__a {
    padding: 0 8px 20px 0;
  }

  .ce-dl-cta {
    padding: 56px 0 64px;
  }

  .ce-dl-cta__h2{
    font-size: 24px !important;
    line-height: 34px !important;
  }

  .ce-dl-cta__lead {
    font-size: 16px;
    line-height: 28px;
  }

  .ce-dl-cta__quote {
    margin-top: 24px;
    font-size: 16.5px;
    line-height: 28px;
  }

  .ce-dl-cta__btns {
    margin-top: 26px;
    gap: 10px;
  }

  .ce-dl-cta__btn {
    width: calc(50% - 5px);
    min-width: 0;
    height: 50px;
    font-size: 15px;
  }
}

/* dn-faq__q 병기로 공용 규칙이 끼어드는 것을 막는다 */
html body .ce-dl-faq__list summary.dn-faq__q{font-size:18.7px;line-height:29px;font-weight:600;color:#0a1e30;letter-spacing:normal}

/* ── 도해 — 원본 700px 보다 크게 늘리지 않는다 ── */
.ce-dl-intro__figure img {
  max-width: 700px;
  margin: 0 auto;
}

/* ── 내부링크 줄 — 어디가 누를 수 있는 곳인지 구분되게 ── */
.ce-dl-linkrow {
  margin: 14px 0 0;
  font-family: var(--ce2-font);
  font-size: 15px;
  line-height: 1.8;
  color: #4a6680;
  word-break: keep-all;
}

.ce-dl-linkrow a {
  color: #2f6496;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dn-geo-content__block .ce-dl-linkrow { margin-top: 14px; }

/* ── 안내 카드의 라벨 — rem 기준이 모바일에서 15px 라 11.7px 로 떨어졌다 ── */
.dn-geo-content__block > div > div > div:first-child {
  font-size: 13px !important;
}

/* ── 안내 카드의 보충 설명 — 굵은 키워드가 앞 문장 끝에 붙어 읽히지 않게 줄을 나눈다 ── */
.ce-dl-note { margin: 10px 0 0; }
.ce-dl-note > p { margin: 0; }
.ce-dl-note__lead + .ce-dl-note__tags,
.ce-dl-note__lead + .ce-dl-note__sub,
.ce-dl-note__tags + .ce-dl-note__sub { margin-top: 8px; }

/* 키워드는 문장이 아니라 칩이다 — 한 줄에 나란히 두고 문장과 구분되는 바탕을 준다 */
.ce-dl-note__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ce-dl-note__tags strong {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf1f8;
  color: #2f6496;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  white-space: nowrap;
}
.ce-dl-note__sub { color: #4a6680; word-break: keep-all; }

@media (max-width: 767px) {
  .ce-dl-effect__item { padding: 22px 22px; }
  .ce-dl-linkrow { font-size: 14px; }

  /* 배너 — 폭이 좁아 가로 26% 만 남는다. 잠든 얼굴이 화면에 들어오게 초점을 오른쪽으로 옮긴다 */
  .ce-dl-hero { --hero-focus: 88% 50% !important; }

  /* 효과 카드 — 시안 고정 폭을 풀어 화면 안에 들어오게 한다.
     grid 칸이 자식 폭을 따라 늘어나지 않도록 minmax(0,·) 과 min-width 를 함께 건다 */
  .ce-dl-effect__grid { grid-template-columns: minmax(0, 1fr); }
  .ce-dl-effect__item { min-width: 0; }
  .ce-dl-effect__body { width: auto; max-width: 100%; min-width: 0; }
  .ce-dl-effect__name { width: auto; }

  /* 히어로 라벨 — 공용 자간은 영문 대문자용이라 한글이 흩어져 읽힌다 */
  html body .ce-dl-hero .dn-sub-hero__eyebrow { letter-spacing: 0.02em !important; }
}


@media (min-width: 1440px) {
  /* ── 배너 97:24788 (0,0) 1920x720 ── */
  .ce-dl-hero { position: relative; height: 720px; min-height: 720px; max-height: 720px; overflow: hidden; }
  .ce-dl-hero .dn-sub-hero__slide { position: absolute; inset: 0; margin: 0; }
  .ce-dl-hero .ce-photo-tag-box { width: 100%; height: 100%; }
  .ce-dl-hero figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* 캔버스 폭을 그대로 박지 않는다 — 좌우를 물려 화면 폭을 따라가게 한다.
     새 시안 그라디언트는 대칭형(위/아래 투명, 가운데 50% 지점 α0.8)이다 */
  .ce-dl-hero .dn-sub-hero__overlay { position: absolute; left: 0; right: 0; top: 0; width: auto; height: 720px;
    background: linear-gradient(180deg, rgba(4,14,26,0) 0%, rgba(4,14,26,0.6) 24%, rgba(4,14,26,0.8) 50%, rgba(4,14,26,0.6) 76%, rgba(4,14,26,0) 100%); }
  
  html body .ce-dl-hero .dn-sub-hero__text { position: absolute !important; left: 0 !important; right: 0 !important;
    top: 331px !important; bottom: auto !important; width: auto !important; max-width: none !important;
    height: 118px !important; margin: 0 !important; padding: 0 !important; text-align: center !important;
    transform: none !important; display: block !important; }
  html body .ce-dl-hero .dn-sub-hero__eyebrow { display: block !important; width: auto !important; height: 36px !important;
    margin: 0 !important; padding: 0 !important; font-size: 30px !important; line-height: 35.8px !important;
    font-weight: 300 !important; letter-spacing: -0.5px !important; color: #ffffff !important;
    background: none !important; border: 0 !important; text-transform: none !important; }
  html body .ce-dl-hero .dn-sub-hero__title { display: block !important; width: auto !important; height: 72px !important;
    margin: 10px 0 0 !important; padding: 0 !important; font-size: 51px !important; line-height: 71.4px !important;
    font-weight: 600 !important; letter-spacing: -0.5px !important; color: #ffffff !important; }

  /* ── 드림렌즈란 97:24941 ──
     설명 문단이 시안 요약(2줄)보다 길어 박스가 시안보다 높다(구 사이트 원문 유지 — hospital-site-build.md 제1원칙).
     그 아래 전신 사진(98:24972, 1232x300)은 figma render 로 그대로 받은 크롭본이다. */
  .ce-dl-step { text-align: center; }
  .ce-dl-step__body { height: 100px; margin: 20px 0 0; }
  .ce-dl-step__num { display: block; width: fit-content; margin: 0 auto; height: 14px; line-height: 14.32px; }
  .ce-dl-step__name { margin: 4px 0 0; height: 30px; }
  .ce-dl-step__desc { margin: 4px 0 0; height: 48px; }

  
  .ce-dl-effect__item { text-align: left; }

  /* ── 마무리 CTA 97:24892 ── */
  .ce-dl-cta__h2 { display: block; width: fit-content; margin: 0 auto; height: 39px; line-height: 39px !important; }
  .ce-dl-cta__quote { display: block; width: fit-content; margin: 35px auto 0; height: 21px; line-height: 21px; }
  .ce-dl-cta__btn-t { display: block; height: 19px; line-height: 19.38px; }
  /* 섹션 제목은 시안에서 «글자 폭»이다 — block 이면 1232 로 퍼져 Δw 가 난다 */
  .ce-dl-h2 { width: fit-content; }
}