/* 스마트 스마일 라식 — 시안 정합 전용 스타일
   모든 수치는 1920 시안 프레임에서 그대로 옮긴 값이다. 근사 유틸을 쓰지 않는다. */

.fs9 *,
.fs9 *::before,
.fs9 *::after { box-sizing: border-box; }

.fs9 {
  --fs9-navy: #0a1e30;
  --fs9-slate: #4a6680;
  --fs9-body: #333333;
  --fs9-tint: #f4f8fc;
  --fs9-accent: #2f6496;
  --fs9-white: #ffffff;
  --fs9-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-family: var(--fs9-font);
}

/* 컨테이너 — 시안 x=344, w=1232 (1920 중앙) */
.fs9__inner {
  width: 1232px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.fs9-sec { position: relative; width: 100%; }
.fs9-sec--white { background: var(--fs9-white); }
.fs9-sec--tint { background: var(--fs9-tint); }

/* 제목 — 700 32.3px lh45 ls-0.32 */
.fs9-h2 {
  margin: 0;
  font-weight: 700;
  font-size: 32.3px;
  line-height: 45px;
  letter-spacing: -0.32px;
  color: var(--fs9-navy);
  text-align: left;
  width: fit-content;
  max-width: 100%;
}

/* ── 1. 배너 35:1321 — 1920x720 ────────────────────────── */
.fs9-banner {
  position: relative;
  height: 720px;
  overflow: hidden;
}
.fs9-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.fs9-banner__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 48, 0) 0%, rgba(10, 30, 48, 0.55) 100%);
}
/* Frame 34 — @y 331(섹션상대) 1920x118, 세로 스택 gap10 가운데정렬 */
.fs9-banner__text {
  position: absolute;
  top: 331px;
  left: 0;
  width: 100%;
  height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fs9-banner__eyebrow {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0;
  font-weight: 300;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--fs9-white);
}
.fs9-banner__title {
  display: block;
  width: 100%;
  height: 72px;
  margin: 0;
  font-weight: 600;
  font-size: 51px;
  line-height: 71px;
  letter-spacing: -0.5px;
  text-align: center;
  color: var(--fs9-white);
}

/* ── 2. Frame 21 35:1351 — 1920x1000 ───────────────────── */
.fs9-intro { height: 1000px; }
.fs9-intro > .fs9__inner { padding-top: 127px; }

/* 35:1354 요약 박스 @rel y203 1232x139 r6 #f4f8fc */
.fs9-intro__box {
  margin-top: 30px;               /* 919+46=965 → 995 */
  width: 1232px;
  height: 139px;
  border-radius: 6px;
  background: var(--fs9-tint);
  padding: 40px 45px;             /* 텍스트 @389,1035 → +45, +40 */
}
.fs9-intro__box p {
  margin: 0;
  width: 957px;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-body);
}

/* 35:1425~1429 세대 카드 5장 @rel y372 229x316 */
.fs9-gen {
  margin-top: 30px;               /* 995+139=1134 → 1164 */
  display: flex;
  gap: 21.75px;                   /* (1232 − 229×5) ÷ 4 */
  width: 1232px;
}
.fs9-gen__item {
  width: 229px;
  height: 316px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.fs9-gen__img {
  width: 229px;
  height: 214px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.fs9-gen__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.fs9-gen__title {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  text-align: center;
  color: var(--fs9-navy);
}
.fs9-gen__desc {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  text-align: center;
  color: var(--fs9-slate);
}

/* 35:1430 하단 설명 @rel y748 */
.fs9-intro__note {
  margin: 60px 0 0;               /* 1164+316=1480 → 1540 */
  width: 1037px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--fs9-slate);
}

/* ── 3. Frame 38 35:2548 — 1920x1018 ───────────────────── */
.fs9-process { height: 1018px; }
.fs9-process > .fs9__inner { padding-top: 160px; }

/* 이미지 4장 @rel y282 293x230 gap20 */
.fs9-process__shots {
  margin-top: 76px;               /* 1952+46=1998 → 2074 */
  display: flex;
  gap: 20px;
  width: 1232px;
}
.fs9-process__shot {
  width: 293px;
  height: 230px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* 설명 4개 @rel y536 293x82 pad 0 10 */
.fs9-process__steps {
  margin: 24px 0 0;               /* 2074+230=2304 → 2328 */
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
  width: 1232px;
}
.fs9-process__step {
  width: 293px;
  height: 82px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fs9-process__step h3 {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-navy);
}
.fs9-process__step p {
  margin: 0;
  width: 273px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--fs9-slate);
}

/* 35:2652 기대효과 3카드 @rel y678 1232x180 gap20 */
.fs9-benefit {
  margin: 60px 0 0;               /* 2328+82=2410 → 2470 */
  padding: 0;
  list-style: none;
  display: flex;
  gap: 20px;
  width: 1232px;
  height: 180px;
}
.fs9-benefit__item {
  width: 397px;
  height: 180px;
  border-radius: 6px;
  background: var(--fs9-white);
  padding: 30px 38px;             /* 내부 Frame68 @+38, +30 */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fs9-benefit__label {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  color: var(--fs9-accent);
}
.fs9-benefit__title {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-navy);
}
.fs9-benefit__desc {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0;
  color: var(--fs9-body);
}

/* ── 4. Frame 22 35:1379 — 1920x1246 ───────────────────── */
.fs9-tech { height: 1246px; }
.fs9-tech > .fs9__inner { padding-top: 140px; }

/* 35:2621 — 이미지 397x298 + 텍스트 397x82 를 3열 2행 */
.fs9-tech__grid {
  margin: 50px 0 0;               /* 2950+46=2996 → 3046 */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 397px);
  gap: 70px 20px;                 /* 세로 470 − (298+20+82) = 70 */
  width: 1232px;
}
/* 세로 간격 계산: 1행 이미지 y3046 h298 → 텍스트 y3364 h82 끝 3446
   2행 이미지 y3516 → 3516 − 3446 = 70 */
.fs9-tech__item { width: 397px; }
.fs9-tech__img {
  width: 397px;
  height: 298px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}
.fs9-tech__body {
  margin-top: 20px;               /* 3046+298=3344 → 3364 */
  height: 82px;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fs9-tech__title {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-navy);
}
.fs9-tech__desc {
  margin: 0;
  width: 377px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--fs9-slate);
}

/* ── 5. Frame 36 35:1433 — 1920x1450 ───────────────────── */
.fs9-atos { height: 1450px; }
.fs9-atos > .fs9__inner { padding-top: 160px; }

.fs9-atos__rows {
  margin: 70px 0 0;               /* 4216+46=4262 → 4332 */
  padding: 0;
  list-style: none;
  width: 1232px;
}
.fs9-atos__row {
  display: flex;
  gap: 70px;
  align-items: center;
  width: 1232px;
}
.fs9-atos__row--first { height: 231px; padding: 0 0 30px; align-items: flex-start; }
.fs9-atos__row--rest { height: 261px; padding: 30px 0; align-items: flex-start; }
.fs9-atos__text {
  width: 550px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fs9-atos__title {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-navy);
}
.fs9-atos__desc {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--fs9-slate);
}
.fs9-atos__img {
  width: 612px;
  height: 200px;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* ── 6. Frame 37 35:2546 — 1920x690 ────────────────────── */
.fs9-target { height: 690px; }
.fs9-target > .fs9__inner { padding-top: 150px; }

/* 35:2693 — 401x140 3열 2행, gap 14 */
.fs9-target__grid {
  margin: 50px 0 0;               /* 5656+46=5702 → 5752 */
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 401px);
  gap: 14px;
  width: 1232px;
}
.fs9-target__item {
  width: 401px;
  height: 140px;
  border-radius: 6px;
  background: var(--fs9-tint);
  padding: 32px 38px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fs9-target__num {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  width: 329px;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
  color: var(--fs9-accent);
}
.fs9-target__title {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  width: 329px;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 0;
  color: var(--fs9-navy);
}

/* ── 태블릿 이하 — 시안에 모바일 프레임이 없다.
   전역 모바일 히어로 4조에 따라 사진을 주인공으로 두고 글자를 줄인다. ── */
@media (max-width: 1279px) {
  .fs9__inner { width: 100%; padding-left: 24px; padding-right: 24px; }
  .fs9-sec { height: auto !important; }
  .fs9-intro,
  .fs9-process,
  .fs9-tech,
  .fs9-atos,
  .fs9-target { height: auto; padding-bottom: 72px; }
  .fs9-h2 { font-size: 26px; line-height: 36px; }
  .fs9-intro .fs9-h2,
  .fs9-process .fs9-h2,
  .fs9-tech .fs9-h2,
  .fs9-atos .fs9-h2,
  .fs9-target .fs9-h2 { padding-top: 64px; width: auto; }

  .fs9-intro__box { width: 100%; height: auto; padding: 24px; }
  .fs9-intro__box p { width: 100%; }
  .fs9-intro__note { width: 100%; margin-top: 32px; }

  .fs9-gen,
  .fs9-process__shots,
  .fs9-process__steps,
  .fs9-benefit { width: 100%; flex-wrap: wrap; gap: 20px; height: auto; }
  .fs9-gen__item,
  .fs9-process__shot,
  .fs9-process__step,
  .fs9-benefit__item { width: 100%; max-width: 320px; height: auto; }
  .fs9-gen__img { width: 100%; }
  .fs9-process__step p { width: 100%; }

  .fs9-tech__grid,
  .fs9-target__grid { width: 100%; grid-template-columns: 1fr; gap: 32px; }
  .fs9-tech__item { width: 100%; max-width: 100%; min-width: 0; }
  .fs9-tech__img { width: 100%; height: auto; aspect-ratio: 397 / 298; }
  .fs9-tech__body { height: auto; }
  .fs9-tech__desc { width: 100%; }
  .fs9-target__item { width: 100%; height: auto; }
  .fs9-target__num,
  .fs9-target__title { width: 100%; }

  .fs9-atos__rows { width: 100%; }
  .fs9-atos__row { flex-direction: column; gap: 20px; width: 100%; height: auto; padding: 24px 0; }
  .fs9-atos__text { width: 100%; }
  .fs9-atos__img { width: 100%; height: auto; aspect-ratio: 612 / 200; }
}

@media (max-width: 767px) {
  /* 모바일 히어로 4조 — 사진이 주인공, 글자는 아래로 몰고 작게 */
  .fs9-banner { height: 56vh; min-height: 360px; }
  .fs9-banner__grad {
    background: linear-gradient(180deg, rgba(10, 30, 48, 0) 46%, rgba(10, 30, 48, 0.62) 100%);
  }
  .fs9-banner__text {
    top: auto;
    bottom: 36px;
    height: auto;
    gap: 6px;
  }
  .fs9-banner__eyebrow { height: auto; font-size: 13px; line-height: 20px; }
  .fs9-banner__title { height: auto; font-size: 30px; line-height: 40px; }
}