/* Smart-smile page layout. Values taken from the 1920px design frame.
   Class prefix ss2- is used only on this page so nothing else moves.
   Headings carry .ce2-typ-skip because ce-typo-consistency.css forces
   30px/19px on every main h2/h3 with !important. */

:root {
  --ss2-max: 1232px;
  --ss2-gutter: 24px;
  --ss2-ink: #0a1e30;
  --ss2-ink-deep: #010f1c;
  --ss2-tint: #f4f8fc;
  --ss2-muted: #4a6680;
  --ss2-body: #333333;
  --ss2-accent: #2f6496;
  --ss2-line: #dbe5ee;
  --ss2-pad-y: 140px;
  --ss2-head-gap: 60px;
}

@media (max-width: 1024px) {
  :root { --ss2-pad-y: 96px; --ss2-head-gap: 44px; }
}
@media (max-width: 768px) {
  :root { --ss2-pad-y: 64px; --ss2-head-gap: 32px; --ss2-gutter: 20px; }
  /* .cont_wrap keeps a 16px side inset on narrow screens; the tinted bands
     need to reach the edge, so pull them back out by the same amount. */
  .ss2-page .ss2-sec,
  .ss2-page .ss2-faq,
  .ss2-page .ce-close {
    margin-left: -16px;
    margin-right: -16px;
  }
}

/* ---------- section shell ---------- */
.ss2-sec {
  padding: var(--ss2-pad-y) 0;
  background: #ffffff;
}
.ss2-sec--tint { background: var(--ss2-tint); }
.ss2-sec__inner {
  max-width: var(--ss2-max);
  margin: 0 auto;
  padding: 0 var(--ss2-gutter);
  box-sizing: border-box;
}

.ss2-h2.ce2-typ-skip {
  font-size: 32.3px !important;
  line-height: 45px !important;
  font-weight: 700 !important;
  letter-spacing: -0.32px !important;
  color: var(--ss2-ink) !important;
  margin: 0 0 var(--ss2-head-gap) !important;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .ss2-h2.ce2-typ-skip { font-size: 26px !important; line-height: 38px !important; }
}

.ss2-grid + .ss2-h3.ce2-typ-skip,
.ss2-figure + .ss2-h3.ce2-typ-skip { margin-top: 60px !important; }

.ss2-h3.ce2-typ-skip {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ss2-ink) !important;
  margin: 0 0 20px !important;
  word-break: keep-all;
}

/* ---------- lead paragraph box ---------- */
.ss2-lead {
  background: var(--ss2-tint);
  border-radius: 6px;
  padding: 40px 45px;
  margin: 0 0 60px;
}
.ss2-sec--tint .ss2-lead { background: #ffffff; }
.ss2-lead p {
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
  color: var(--ss2-body);
  margin: 0;
  word-break: keep-all;
}
.ss2-lead p + p { margin-top: 16px; }
@media (max-width: 768px) {
  .ss2-lead { padding: 24px 20px; margin-bottom: 36px; }
  .ss2-lead p { font-size: 16px; line-height: 27px; }
}

.ss2-note {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ss2-muted);
  margin: 40px 0 0;
  word-break: keep-all;
}

/* ---------- figure ---------- */
.ss2-figure { margin: 0 0 60px; }
.ss2-figure:last-child { margin-bottom: 0; }
.ss2-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.ss2-figure--narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.ss2-figure--card { max-width: 480px; margin-left: auto; margin-right: auto; }

/* ---------- card grid ---------- */
.ss2-grid {
  display: grid;
  gap: 20px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ss2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ss2-grid--3, .ss2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ss2-grid--3, .ss2-grid--4 { grid-template-columns: 1fr; }
}

.ss2-card { margin: 0; }
.ss2-card__media {
  border-radius: 6px;
  overflow: hidden;
  background: var(--ss2-tint);
  margin-bottom: 20px;
}
.ss2-sec--tint .ss2-card__media { background: #ffffff; }
.ss2-card__media img { display: block; width: 100%; height: auto; }
.ss2-card__media--icon {
  width: 80px;
  height: 80px;
  background: transparent;
  margin-bottom: 16px;
}
.ss2-sec--tint .ss2-card__media--icon { background: transparent; }
.ss2-card__title.ce2-typ-skip {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ss2-ink) !important;
  margin: 0 0 4px !important;
  word-break: keep-all;
}
.ss2-card__desc {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ss2-muted);
  margin: 0;
  word-break: keep-all;
}
.ss2-card__step {
  display: block;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ss2-accent);
  margin: 0 0 6px;
}

/* ---------- benefit cards (white panel on tint) ---------- */
.ss2-bene {
  background: #ffffff;
  border-radius: 6px;
  padding: 30px 38px;
  margin: 0;
}
.ss2-sec:not(.ss2-sec--tint) .ss2-bene { background: var(--ss2-tint); }
.ss2-bene__label {
  display: block;
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
  color: var(--ss2-accent);
  margin: 0 0 6px;
}
.ss2-bene__title.ce2-typ-skip {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ss2-ink) !important;
  margin: 0 0 6px !important;
}
.ss2-bene__desc {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: var(--ss2-body);
  margin: 0;
  word-break: keep-all;
}

/* ---------- numbered cards ---------- */
.ss2-numcard {
  background: var(--ss2-tint);
  border-radius: 6px;
  padding: 32px 34px;
  min-height: 140px;
  box-sizing: border-box;
  margin: 0;
}
.ss2-sec--tint .ss2-numcard { background: #ffffff; }
.ss2-numcard__num {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ss2-accent);
  margin: 0 0 6px;
}
.ss2-numcard__title.ce2-typ-skip {
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ss2-ink) !important;
  margin: 0 !important;
  word-break: keep-all;
}

/* ---------- split rows (text left, image right) ---------- */
.ss2-rows { display: block; }
.ss2-row {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 70px;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--ss2-line);
}
.ss2-row:first-child { border-top: 0; padding-top: 0; }
.ss2-row__title.ce2-typ-skip {
  font-size: 20px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ss2-ink) !important;
  margin: 0 0 4px !important;
  word-break: keep-all;
}
.ss2-row__desc {
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
  color: var(--ss2-muted);
  margin: 0;
  word-break: keep-all;
}
.ss2-row__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
@media (max-width: 1024px) {
  .ss2-row { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- FAQ ---------- */
.ss2-faq { background: var(--ss2-tint); padding: 172px 0 140px; }
.ss2-faq__inner {
  max-width: var(--ss2-max);
  margin: 0 auto;
  padding: 0 var(--ss2-gutter);
  box-sizing: border-box;
}
.ss2-faq__h2.ce2-typ-skip {
  border-left: 0 !important;
  padding-left: 0 !important;
  font-size: 34px !important;
  line-height: 44px !important;
  font-weight: 700 !important;
  letter-spacing: -1.02px !important;
  color: var(--ss2-ink-deep) !important;
  margin: 0 0 34px !important;
  word-break: keep-all;
}
.ss2-faq .dn-faq__item {
  border-top: 1px solid var(--ss2-line);
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.ss2-faq .dn-faq__item:last-child { border-bottom: 1px solid var(--ss2-line); }
.ss2-faq .dn-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 69px;
  padding: 20px 0;
  font-size: 18.7px;
  line-height: 29px;
  font-weight: 600;
  color: var(--ss2-ink);
  word-break: keep-all;
}
.ss2-faq .dn-faq__q::-webkit-details-marker { display: none; }
.ss2-faq .dn-faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 25.5px;
  line-height: 40px;
  font-weight: 300;
  color: #134879;
}
.ss2-faq .dn-faq__item[open] > .dn-faq__q::after { content: "\2212"; }
.ss2-faq .dn-faq__a { padding: 0 0 24px; background: transparent; }
.ss2-faq .dn-faq__a,
.ss2-faq .dn-faq__a p {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  color: var(--ss2-body);
  margin: 0 0 10px;
  word-break: keep-all;
}
.ss2-faq .dn-faq__a p:last-child { margin-bottom: 0; }
.ss2-faq .dn-faq__a a { color: var(--ss2-accent); }
@media (max-width: 768px) {
  .ss2-faq { padding: 64px 0; }
  .ss2-faq__h2.ce2-typ-skip { font-size: 26px !important; line-height: 36px !important; letter-spacing: -0.6px !important; }
  .ss2-faq .dn-faq__q { font-size: 16.5px; line-height: 26px; min-height: 0; }
}

/* ---------- hero title on the wide frame ---------- */
@media (min-width: 1200px) {
  .ss2-page .dn-sub-hero__title {
    font-size: 51px !important;
    line-height: 71px !important;
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
  }
}

/* ---------- 각막지형도 비교 — 그림 아래 캡션 ----------
   두 캡션을 그림 밖으로 꺼내 좌우 한 쌍으로 맞춘다. */
.ss2-topo { margin: 0; }
.ss2-topo > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.ss2-topo__caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.ss2-topo__cap {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: var(--ss2-muted);
  text-align: center;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .ss2-topo__caps { gap: 10px; margin-top: 12px; }
  .ss2-topo__cap { font-size: 13px; line-height: 19px; }
}

/* ---------- 시술 단계 사진 ----------
   원본이 240px 정사각이라 그보다 크게 늘리지 않는다.
   열 수가 바뀌는 폭마다 묶음 최대폭을 함께 줄여 1:1 을 유지한다. */
.ss2-grid--steps {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.ss2-grid--steps .ss2-card__media { max-width: 240px; }
@media (max-width: 1024px) { .ss2-grid--steps { max-width: 500px; } }
@media (max-width: 600px)  { .ss2-grid--steps { max-width: 240px; } }

/* ---------- 표 그림 ----------
   4열 비교표라 좁은 화면에서 열이 뭉개진다.
   그림 자체는 줄이지 않고 가로로 밀어 보게 한다. */
.ss2-figure--table .ss2-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
}
.ss2-figure--table .ss2-table-scroll img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.ss2-figure__hint { display: none; }
@media (max-width: 768px) {
  .ss2-figure--table { position: relative; }
  .ss2-figure--table .ss2-table-scroll img { width: 760px; max-width: none; }
  .ss2-figure__hint {
    display: block;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 20px;
    color: var(--ss2-muted);
  }
  /* 오른쪽에 이어지는 열이 더 있다는 표시 */
  .ss2-figure--table::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26px;
    height: calc(100% - 30px);
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 100%);
  }
}

/* ---------- FAQ 띠 좌우 끝 맞춤 ----------
   좁은 화면에서 max-width 100% 가 음수 마진을 상쇄해
   오른쪽만 32px 짧게 끝나 있었다. */
@media (max-width: 768px) {
  .ss2-page .ss2-faq.dn-geo-content { max-width: calc(100% + 32px) !important; }
}