/* =============================================================
   base.css - 레퍼런스(beautifulmom.net) 시스템 이식용 베이스
   - ref-main.css 와 함께 사용
   - vw 기반 rem 시스템: 1920px에서 1rem = 1px
   ============================================================= */

:root {
  --NotoSerif: "Noto Serif KR", serif;
  --tan: #dbc0af;
  --ink: #2b2420;
  --paper: #f8f3ee;
}

html {
  height: 100%;
  overflow-y: auto;
  font-size: 0.05208333178113vw;
}

* {
  box-sizing: border-box;
  font-style: normal;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
}

body {
  min-width: 320px;
  color: var(--ink);
  background: #fff;
  font-family: "Pretendard", sans-serif;
  font-size: 16rem;
  font-weight: 400;
  line-height: 1.45;
  word-wrap: break-word;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }

/* 커버 이미지 공통: 비율 박스 안에서 왜곡 없이 채움 */
.visual_sect .bg img { width: 100%; height: 100%; object-fit: cover; }
button { font-family: inherit; cursor: pointer; }

.nmj { font-family: "Nanum Myeongjo", serif; }

/* 명조(나눔명조·Noto Serif) 계열 볼드 사용 안 함 */
.nmj { font-weight: 400 !important; }
.visual_sect .tit_box .tit { font-weight: 400 !important; }
.intro_sect .body .ghost { font-weight: 400 !important; }
/* 세리프 제목: h태그 기본 볼드(700) 제거 (레퍼런스는 400~500) */
.main_cont_txt .tit,
.closing_sect .tit { font-weight: 400 !important; }
.program_sect .cont .pro_box .txt_box .tit,
.program_sect .cont .pro_box .txt_box .tit .tit_txt,
.flow_list .f_tit,
.effect_col .col_head .h { font-weight: 500 !important; }

.container { width: 1520rem; margin: 0 auto; }

.pc_only { display: inline; }
.mo_only { display: none; }
br.mo_only { display: none; }

:focus-visible { outline: 2px solid var(--tan); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =============================================================
   헤더
   ============================================================= */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 34rem 60rem; color: #fff;
  transition: background 0.45s ease, padding 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
}
.hd.on {
  padding: 18rem 60rem;
  background: rgba(248, 243, 238, 0.95);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(35, 28, 22, 0.08);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
.hd .brand { display: flex; flex-direction: column; line-height: 1.1; }
.hd .brand .en { font-family: "Nanum Myeongjo", serif; font-size: 26rem; font-weight: 700; letter-spacing: 0.02em; }
.hd .brand .en {
  letter-spacing: 0.08em;
}
.hd .brand .ko { font-size: 12rem; font-weight: 600; letter-spacing: 0.28em; opacity: 0.75; }
.hd .gnb { display: flex; align-items: center; gap: 40rem; }
.hd .gnb .lnk { display: flex; gap: 34rem; }
.hd .gnb .lnk a { position: relative; font-size: 16rem; font-weight: 500; opacity: 0.85; padding: 6rem 0; }
.hd .gnb .lnk a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;
}
.hd .gnb .lnk a:hover, .hd .gnb .lnk a.active { opacity: 1; }
.hd .gnb .lnk a:hover::after, .hd .gnb .lnk a.active::after { transform: scaleX(1); }
.hd .gnb .cta {
  display: inline-flex; align-items: center; gap: 8rem;
  padding: 12rem 26rem; border: 1px solid currentColor; border-radius: 999px;
  font-size: 14rem; font-weight: 600;
  transition: background 0.35s ease, color 0.35s ease;
}
.hd:not(.on) .gnb .cta:hover { background: #fff; color: var(--ink); }
.hd.on .gnb .cta:hover { background: var(--ink); color: var(--paper); }
.hd .menu_btn { display: none; }
.hd .brand.sr-only + .gnb {
  margin-left: auto;
}

/* =============================================================
   섹션 공통 (레퍼런스 토큰과 동일)
   ============================================================= */
.sec { position: relative; padding: 200rem 0; }
.sec.light { background: var(--paper); }
.sec.white { background: #fff; }
.sec.dark { background: #272019; color: #ada093; }

.tag_row { display: flex; flex-wrap: wrap; gap: 10rem; margin-top: 40rem; }
.tag_row li, .tag_row span {
  font-size: 15rem; font-weight: 500; color: #6f635a;
  padding: 10rem 20rem; border: 1px solid #eae0d6; border-radius: 999px;
}
.dark .tag_row li { color: #ccbaa9; border-color: rgba(255,255,255,0.18); }

/* =============================================================
   인트로 (AI 줄기세포는?)
   ============================================================= */
.intro_sect .inner { display: flex; align-items: center; gap: 100rem; }
.intro_sect .fig { position: relative; width: 44%; flex: 0 0 44%; }
.intro_sect .fig .img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.intro_sect .fig .img img { width: 100%; height: 100%; object-fit: cover; }
.intro_sect .fig .img::after { content: ""; position: absolute; inset: 18rem; border: 1px solid rgba(255,255,255,0.6); }
.intro_sect .fig .cap {
  position: absolute; left: -10rem; bottom: 40rem; writing-mode: vertical-rl;
  font-family: "Nanum Myeongjo", serif; font-size: 16rem; letter-spacing: 0.1em; color: #9a8b7d;
}
.intro_sect .body { position: relative; flex: 1; }
.intro_sect .body .ghost {
  position: absolute; top: -70rem; left: -10rem; z-index: 0;
  font-family: "Nanum Myeongjo", serif; font-size: 220rem; line-height: 1;
  color: rgba(219, 192, 175, 0.14); font-weight: 700;
}
.intro_sect .body .in { position: relative; z-index: 1; }
.intro_sect .body p.p { margin-top: 22rem; font-size: 18rem; line-height: 1.85; color: #6f635a; }
.intro_sect .body p.p .hl { color: var(--ink); font-weight: 600; }
.intro_sect .main_cont_txt {
  max-width: 620rem;
}
.intro_sect .main_cont_txt .desc {
  color: #8a6a4e;
}
.intro_sect .main_cont_txt .tit {
  margin-top: 16rem;
  color: var(--ink);
}
.intro_sect .body p.p:first-of-type {
  margin-top: 32rem;
  font-size: 19rem;
  line-height: 1.72;
  color: #4d4037;
}
.intro_sect .body p.p + p.p {
  margin-top: 18rem;
}

/* =============================================================
   3-STEP 준비
   ============================================================= */
.step_sect .inner { display: flex; align-items: center; gap: 100rem; }
.step_sect .fig { position: relative; width: 46%; flex: 0 0 46%; overflow: hidden; aspect-ratio: 5 / 6; }
.step_sect .fig img { width: 100%; height: 100%; object-fit: cover; }
.step_sect .fig::after { content: ""; position: absolute; inset: 18rem; border: 1px solid rgba(35, 28, 22,0.22); }
.step_sect .list { flex: 1; margin-top: 44rem; }
.step_sect .list li {
  display: flex; align-items: flex-start; gap: 30rem;
  padding: 34rem 0; border-top: 1px solid #eae0d6;
}
.step_sect .list li:last-child { border-bottom: 1px solid #eae0d6; }
.step_sect .list .num { font-family: "Nanum Myeongjo", serif; font-size: 30rem; color: var(--tan); line-height: 1.2; }
.step_sect .list .t_tit { font-size: 22rem; font-weight: 600; color: var(--ink); }
.step_sect .list .t_txt { margin-top: 8rem; font-size: 17rem; line-height: 1.7; color: #6f635a; }
.step_sect .note {
  margin-top: 44rem; font-family: var(--NotoSerif); font-weight: 500;
  font-size: 22rem; line-height: 1.55; color: #5c4733;
}

/* =============================================================
   6단계 프로그램 (다크 넘버 플로우)
   ============================================================= */
.flow_sect { background: #221b15; color: #ada093; }
.flow_list { margin-top: 76rem; }
.flow_list li {
  position: relative; display: flex; align-items: baseline; gap: 60rem;
  padding: 48rem 0; border-top: 1px solid rgba(255,255,255,0.12);
}
.flow_list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.flow_list .num {
  flex: 0 0 auto; width: 130rem;
  font-family: var(--NotoSerif); font-weight: 500; font-size: 64rem; color: var(--tan); line-height: 1;
}
.flow_list .f_tit { font-family: var(--NotoSerif); font-weight: 500; font-size: 30rem; color: #fff; line-height: 1.35; }
.flow_list .f_txt { margin-top: 14rem; font-size: 17rem; line-height: 1.7; color: #b0a494; max-width: 760rem; }
.flow_list li::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px;
  background: var(--tan); transition: width 0.7s ease;
}
.flow_list li:hover::after { width: 100%; }

/* =============================================================
   효과 (2열 넘버 로우)
   ============================================================= */
.effect_duo { display: flex; gap: 90rem; margin-top: 76rem; }
.effect_col { flex: 1; }
.effect_col .col_head { padding-bottom: 28rem; border-bottom: 2px solid var(--ink); margin-bottom: 10rem; }
.effect_col .col_head .k {
  font-family: "Nanum Myeongjo", serif; font-size: 18rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--tan);
}
.effect_col .col_head .h { font-family: var(--NotoSerif); font-weight: 500; font-size: 30rem; color: var(--ink); margin-top: 12rem; }
.effect_col .col_head .s { margin-top: 10rem; font-size: 17rem; color: #6f635a; }
.effect_col ul li {
  display: flex; align-items: baseline; gap: 24rem;
  padding: 26rem 0; border-bottom: 1px solid #eae0d6;
}
.effect_col .num { font-family: "Nanum Myeongjo", serif; font-size: 20rem; color: #9a8b7d; }
.effect_col .e_tit { font-size: 19rem; font-weight: 600; color: var(--ink); }
.effect_col .e_txt { margin-top: 4rem; font-size: 15rem; color: #9a8b7d; }

/* =============================================================
   클로징
   ============================================================= */
.closing_sect { position: relative; text-align: center; color: #fff; padding: 220rem 0; overflow: hidden; }
.closing_sect .bg { position: absolute; inset: 0; z-index: 0; }
.closing_sect .bg img { width: 100%; height: 100%; object-fit: cover; }
.closing_sect .bg::after { content: ""; position: absolute; inset: 0; background: rgba(35, 28, 22, 0.72); }
.closing_sect .container { position: relative; z-index: 1; }
.closing_sect .desc { font-family: "Nanum Myeongjo", serif; font-size: 20rem; font-weight: 700; color: var(--tan); }
.closing_sect .tit { margin-top: 24rem; font-family: var(--NotoSerif); font-weight: 500; font-size: 54rem; line-height: 1.3; }
.closing_sect .txt { margin-top: 24rem; font-size: 19rem; color: rgba(255,255,255,0.85); }
.closing_sect .btn_wrap { display: flex; justify-content: center; margin-top: 46rem; }

/* =============================================================
   푸터
   ============================================================= */
.ft { background: var(--ink); color: rgba(248, 243, 238,0.68); padding: 70rem 0; }
.ft .inner { display: flex; flex-wrap: wrap; gap: 40rem; justify-content: space-between; align-items: flex-end; }
.ft .inner {
  justify-content: flex-end;
}
.ft .en { font-family: "Nanum Myeongjo", serif; color: var(--paper); font-size: 30rem; font-weight: 700; }
.ft .en {
  letter-spacing: 0.08em;
}
.ft .ko { display: block; font-size: 12rem; letter-spacing: 0.26em; color: rgba(248, 243, 238,0.5); margin-top: 6rem; }
.ft .note { max-width: 560rem; font-size: 15rem; line-height: 1.75; }
.ft .legal { margin-top: 30rem; font-size: 13rem; color: rgba(248, 243, 238,0.4); }

/* =============================================================
   맨 위로 버튼
   ============================================================= */
.top_btn {
  position: fixed; right: 40rem; bottom: 62rem; z-index: 90;
  width: 72rem; height: 72rem; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 999px;
  font-size: 28rem; opacity: 0; transform: translateY(14rem); pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.3s ease;
}
.top_btn.on { opacity: 1; transform: none; pointer-events: auto; }
.top_btn:hover { background: var(--tan); color: var(--ink); }

.page_quick_btn {
  position: fixed;
  right: 40rem;
  bottom: 138rem;
  z-index: 91;
  display: flex;
  width: 72rem;
  height: 72rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #d88478;
  color: #fff;
  box-shadow: 0 18rem 40rem -26rem rgba(95, 49, 46, 0.55);
  text-align: center;
  transition: background 0.28s ease, transform 0.28s ease;
}
.page_quick_btn span {
  display: block;
  font-size: 12rem;
  font-weight: 500;
  line-height: 1.1;
}
.page_quick_btn strong {
  display: block;
  margin-top: 4rem;
  font-size: 15rem;
  font-weight: 700;
  line-height: 1.1;
}
.page_quick_btn:hover {
  background: #c96f64;
  color: #fff;
  transform: translateY(-3rem);
}
.page_quick_btn--ai {
  background: #2b2420;
  box-shadow: 0 18rem 40rem -26rem rgba(43, 36, 32, 0.58);
}
.page_quick_btn--ai:hover {
  background: #8a6a4e;
}

/* =============================================================
   why_sect 리스트 확장 (레퍼런스와 동일한 인터랙션)
   ============================================================= */
.why_sect .txt_wrap ul li { cursor: pointer; }
.why_sect .txt_wrap ul li.on .txt_box .txt { display: block; }

/* 시술 안내(program) 이미지: 세로 이미지를 비율 박스로 왜곡 없이 크롭 */
.program_sect .cont .pro_box .img_wrap { width: 760rem; flex: 0 0 auto; }
.program_sect .cont .pro_box .img { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.program_sect .cont .pro_box .img img { width: 100%; height: 100%; object-fit: cover; }

/* 시술 안내(program) 태그 */
.program_sect .pro_box .txt_box .t_tags { display: flex; flex-wrap: wrap; gap: 10rem; margin-top: 30rem; }
.program_sect .pro_box .txt_box .t_tags li {
  font-size: 15rem; font-weight: 500; color: #ccbaa9;
  padding: 10rem 20rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
}
/* 애프터케어 서브 리스트 */
.program_sect .after_list { margin-top: 10rem; }
.program_sect .after_list li { display: flex; gap: 22rem; padding: 22rem 0; border-top: 1px solid rgba(255,255,255,0.12); }
.program_sect .after_list li:first-child { border-top: 0; }
.program_sect .after_list .an { font-family: "Nanum Myeongjo", serif; font-size: 20rem; color: var(--tan); }
.program_sect .after_list .ah { font-size: 19rem; font-weight: 600; color: #fff; }
.program_sect .after_list .ap { margin-top: 6rem; font-size: 16rem; color: #b0a494; }
.program_sect .after_list .opt { font-size: 13rem; color: var(--tan); margin-left: 8rem; }

/* =============================================================
   반응형 (레퍼런스 브레이크포인트)
   ============================================================= */
@media screen and (max-width: 1280px) {
  html { font-size: 1px; }
  body { font-size: 16px; }

  .container { width: 100%; padding: 0 20rem; }
  .pc_only { display: none; }
  .mo_only { display: inline; }
  br.mo_only { display: inline; }

  .hd { padding: 18rem 20rem; }
  .hd .gnb .lnk, .hd .gnb .cta { display: none; }
  .hd .menu_btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44rem; height: 44rem; background: none; border: 0;
  }
  .hd .menu_btn span, .hd .menu_btn span::before, .hd .menu_btn span::after {
    position: absolute; width: 24rem; height: 2rem; background: currentColor;
  }
  .hd .menu_btn span { position: relative; }
  .hd .menu_btn span::before { content: ""; top: -8rem; left: 0; }
  .hd .menu_btn span::after { content: ""; top: 8rem; left: 0; }

  .sec { padding: 90rem 0; }

  .intro_sect .inner, .step_sect .inner { flex-direction: column; gap: 50rem; }
  .intro_sect .fig, .step_sect .fig { width: 100%; flex: none; max-width: 460rem; }
  .intro_sect .body .ghost { font-size: 140rem; top: -40rem; }
  .intro_sect .body p.p { font-size: 16px; }

  .flow_list li { flex-direction: column; gap: 14rem; padding: 34rem 0; }
  .flow_list .num { width: auto; font-size: 48rem; }
  .flow_list .f_tit { font-size: 22rem; }

  .effect_duo { flex-direction: column; gap: 56rem; }

  .closing_sect { padding: 120rem 0; }
  .closing_sect .tit { font-size: 34rem; }

  .ft .inner { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 400px) {
  .step_sect .list li { gap: 18rem; }
  .flow_list .f_txt { font-size: 15px; }
}

/* =============================================================
   안전장치 : AOS/JS 미작동·모션최소화 시에도 콘텐츠 노출
   ============================================================= */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
  .visual_sect .tit_box .tit { opacity: 1 !important; }
  .visual_sect .tit_box .line { width: 160rem !important; }
  .visual_sect .txt_box { opacity: 1 !important; transform: translate(-50%, 0) !important; }
}

/* =============================================================
   다크 섹션 → #dbc0af 베이지 톤 전환 (갈색 제거)
   ============================================================= */
.program_sect,
.flow_sect,
.sec.dark { background: #dbc0af !important; color: #6a5445 !important; }

/* 공통 텍스트 색 */
.program_sect .main_cont_txt .desc,
.flow_sect .main_cont_txt .desc { color: #8a6a4e !important; }
.program_sect .main_cont_txt .tit,
.flow_sect .main_cont_txt .tit { color: #2b2420 !important; }
.program_sect .main_cont_txt .txt,
.flow_sect .main_cont_txt .txt { color: #6a5445 !important; }

/* 시술(program) 내부 */
.program_sect .cont .pro_box .txt_box { color: #6a5445 !important; }
.program_sect .cont .pro_box .txt_box .tit .tit_txt { color: #2b2420 !important; }
.program_sect .cont .pro_box .txt_box .tit .num { color: rgba(74, 54, 40, 0.20) !important; }
.program_sect .cont .pro_box .txt_box > .txt { color: #6a5445 !important; }
.program_sect .pro_box .txt_box .t_tags li { color: #6a5445 !important; border-color: rgba(74, 54, 40, 0.28) !important; }
.program_sect .after_list li { border-color: rgba(74, 54, 40, 0.20) !important; }
.program_sect .after_list .an { color: #8a6a4e !important; }
.program_sect .after_list .ah { color: #2b2420 !important; }
.program_sect .after_list .ap { color: #6a5445 !important; }

/* 프로그램(flow) 내부 */
.flow_list li { border-color: rgba(74, 54, 40, 0.20) !important; }
.flow_list .num { color: #a67e5b !important; }
.flow_list .f_tit { color: #2b2420 !important; }
.flow_list .f_txt { color: #6a5445 !important; }
.flow_list li::after { background: #8a6a4e !important; }

/* 마퀴: 밝은 배경 + 베이지 고스트 텍스트 */
.flow_txt_wrap { background: #f8f3ee !important; }
.flow_txt_wrap p { color: rgba(219, 192, 175, 0.7) !important; }

/* 클로징: 갈색 오버레이 → 밝은 베이지 + 다크 텍스트 */
.closing_sect { color: #2b2420 !important; }
.closing_sect .bg::after { background: rgba(224, 210, 196, 0.86) !important; }
.closing_sect .desc { color: #8a6a4e !important; }
.closing_sect .tit { color: #2b2420 !important; }
.closing_sect .txt { color: #5a4d42 !important; }
.closing_sect .blur_btn { background: #2b2420 !important; color: #f8f3ee !important; border: 0 !important; }
.closing_sect .blur_btn:hover { background: #8a6a4e !important; color: #fff !important; }

/* 푸터: 짙은 갈색 → 딥 토프(살짝 웜, 갈색기 완화) */
.ft { background: #3a322c !important; }

/* =============================================================
   시술 섹션: 스크롤 시 배경색 전환 (pro_box별)
   ============================================================= */
.program_sect { background: var(--prog-bg, #dbc0af) !important; transition: background-color 1s ease; }

/* =============================================================
   폰트 위계 정리 - 일관 모듈러 스케일
   H2 48 / 시술항목 30 / 컬럼헤더 26 / 넘버리스트 22 / 리스트 20
   / 소형리스트 18 / 리드 18 / 본문 16 / eyebrow 15 / 태그 14
   ============================================================= */
.main_cont_txt .tit,
.closing_sect .tit { font-size: 48rem !important; line-height: 1.28 !important; }

.main_cont_txt .desc,
.closing_sect .desc,
.effect_col .col_head .k { font-size: 15rem !important; letter-spacing: 0.22em !important; }

.main_cont_txt .txt,
.effect_col .col_head .s { font-size: 18rem !important; }

.program_sect .cont .pro_box .txt_box .tit,
.program_sect .cont .pro_box .txt_box .tit .tit_txt { font-size: 30rem !important; }
.program_sect .cont .pro_box .txt_box .tit .num { font-size: 110rem !important; }
.program_sect .cont .pro_box .txt_box > .txt { font-size: 16rem !important; line-height: 1.75 !important; }

.effect_col .col_head .h { font-size: 26rem !important; }
.effect_col .e_tit { font-size: 18rem !important; }
.effect_col .e_txt { font-size: 14rem !important; }
.effect_col .num { font-size: 22rem !important; }

.flow_list .f_tit { font-size: 22rem !important; }
.flow_list .f_txt { font-size: 16rem !important; }
.flow_list .num { font-size: 40rem !important; }

.step_sect .list .t_tit { font-size: 20rem !important; }
.step_sect .list .t_txt { font-size: 16rem !important; }
.step_sect .list .num { font-size: 22rem !important; }
.step_sect .note { font-size: 22rem !important; }

.why_sect .txt_wrap ul li .txt_box .tit { font-size: 20rem !important; }
.why_sect .txt_wrap ul li .txt_box .txt { font-size: 16rem !important; }
.why_sect .txt_wrap ul li .num { font-size: 22rem !important; }

.program_sect .after_list .ah { font-size: 18rem !important; }
.program_sect .after_list .ap { font-size: 16rem !important; }
.program_sect .after_list .an { font-size: 22rem !important; }

.intro_sect .body p.p { font-size: 18rem !important; }
.tag_row li, .tag_row span,
.program_sect .pro_box .txt_box .t_tags li { font-size: 14rem !important; }

/* 모바일 위계 축소 */
@media screen and (max-width: 1280px) {
  .main_cont_txt .tit, .closing_sect .tit { font-size: 30rem !important; }
  .program_sect .cont .pro_box .txt_box .tit,
  .program_sect .cont .pro_box .txt_box .tit .tit_txt { font-size: 24rem !important; }
  .program_sect .cont .pro_box .txt_box .tit .num { font-size: 60rem !important; }
  .flow_list .num { font-size: 34rem !important; }
  .flow_list .f_tit { font-size: 20rem !important; }
  .effect_col .col_head .h { font-size: 22rem !important; }
}

/* =============================================================
   EVE MUSE AI 피부측정
   - 기존 베이지/명조 톤에 맞춤
   ============================================================= */
.metascan_sect { position: relative; overflow: hidden; }
.metascan_sect .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80rem;
  align-items: center;
}
.metascan_sect .ms_head {
  grid-column: 1 / 2;
  max-width: none;
  width: 100%;
  margin: 0 !important;
  text-align: left;
}
.metascan_sect .ms_head .txt {
  margin-left: 0;
  margin-right: 0;
}

/* 분석 장비 (EVE MUSE) */
.metascan_sect .ms_device { grid-column: 1 / 2; width: 100%; max-width: none; margin: 56rem 0 0; text-align: center; }
.metascan_sect .ms_device img { width: 100%; height: auto; border-radius: 8rem; }
.metascan_sect .ms_device figcaption { margin-top: 16rem; font-size: 15rem; letter-spacing: 0.16em; color: #9a8b7d; text-transform: uppercase; }

/* 스캔 비주얼 */
.metascan_sect .ms_scan { grid-column: 2 / 3; grid-row: 1 / 3; width: 100%; max-width: none; margin: 0; }

/* 분석 완료 + 진행 바 */
.metascan_sect .ms_complete { display: flex; align-items: center; gap: 18rem; margin-bottom: 22rem; }
.metascan_sect .ms_complete .lbl {
  position: relative;
  flex: 0 0 218rem; display: inline-flex; align-items: center; gap: 8rem;
  min-width: 218rem;
  font-size: 15rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6a4e;
}
.metascan_sect .ms_complete .lbl::before {
  flex: 0 0 20rem;
  content: ""; width: 20rem; height: 20rem; border-radius: 50%; background: #8a6a4e;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.metascan_sect .ms_complete .lbl_text {
  grid-area: label;
  white-space: nowrap;
  transition: opacity 0.28s ease;
}
.metascan_sect .ms_complete .lbl::after {
  content: "";
  width: 1px;
  height: 1px;
  margin-left: -1px;
}
.metascan_sect .ms_complete .lbl .lbl_text {
  position: absolute;
  left: 28rem;
  top: 50%;
  transform: translateY(-50%);
}
.metascan_sect .ms_complete .lbl[data-state="analyzing"] .lbl_analyzing,
.metascan_sect .ms_complete .lbl[data-state="complete"] .lbl_complete { opacity: 1; }
.metascan_sect .ms_complete .lbl[data-state="analyzing"] .lbl_complete,
.metascan_sect .ms_complete .lbl[data-state="complete"] .lbl_analyzing { opacity: 0; }
.metascan_sect .ms_bar {
  position: relative; flex: 1; height: 42rem; border-radius: 999px;
  background: #ece2d6; overflow: hidden;
}
.metascan_sect .ms_bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.32) 46%, transparent 72%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.metascan_sect .ms_bar_fill {
  position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #c9a888 0%, var(--tan) 100%);
  transform: scaleX(0); transform-origin: left;
}
.metascan_sect.on .ms_bar_fill { animation: msFill 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.metascan_sect.on .ms_bar::after { animation: msBarShine 1.05s ease-in-out 0.2s 3; }
.metascan_sect .ms_bar_num {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
  font-size: 17rem; font-weight: 700; color: #4a3628; letter-spacing: 0.04em;
}

/* 프레임 + 얼굴 스캔 */
.metascan_sect .ms_frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: #d9cdbf; box-shadow: 0 40rem 80rem -34rem rgba(74, 54, 40, 0.4);
}
.metascan_sect .ms_frame > img { width: 100%; height: 100%; object-fit: cover; }

/* 코너 브래킷 */
.metascan_sect .ms_corner { position: absolute; width: 48rem; height: 48rem; z-index: 6; border: 2px solid rgba(255, 255, 255, 0.92); }
.metascan_sect .ms_corner.tl { top: 26rem; left: 26rem; border-right: 0; border-bottom: 0; }
.metascan_sect .ms_corner.tr { top: 26rem; right: 26rem; border-left: 0; border-bottom: 0; }
.metascan_sect .ms_corner.bl { bottom: 26rem; left: 26rem; border-right: 0; border-top: 0; }
.metascan_sect .ms_corner.br { bottom: 26rem; right: 26rem; border-left: 0; border-top: 0; }

/* 얼굴 메시 그리드 (분석 오버레이) */
.metascan_sect .ms_mesh {
  position: absolute; inset: 40rem; z-index: 2; pointer-events: none; opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 30rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 1px, transparent 1px 30rem);
  -webkit-mask: radial-gradient(ellipse 42% 49% at 50% 45%, #000 38%, transparent 74%);
  mask: radial-gradient(ellipse 42% 49% at 50% 45%, #000 38%, transparent 74%);
}
.metascan_sect.on .ms_mesh {
  opacity: 1;
  transition: opacity 0.9s ease 0.45s;
  animation: msMeshPulse 2.8s ease-in-out 0.2s both;
}

/* 스캔 라인 (분석 시 1회 스윕) */
.metascan_sect .ms_line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  box-shadow: 0 0 20rem 3rem rgba(255, 255, 255, 0.5);
}
.metascan_sect.on .ms_line { animation: msScan 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both; }

.metascan_sect .ms_face_oval {
  position: absolute;
  left: 28%;
  right: 28%;
  top: 17%;
  bottom: 24%;
  z-index: 3;
  border: 1.5px solid rgba(255, 255, 255, 0.72);
  border-radius: 46% 46% 42% 42%;
  opacity: 0;
  box-shadow: inset 0 0 42rem rgba(255, 255, 255, 0.2), 0 0 22rem rgba(255, 255, 255, 0.26);
  pointer-events: none;
}
.metascan_sect.on .ms_face_oval {
  opacity: 1;
  transition: opacity 0.65s ease 0.45s;
}
.metascan_sect .ms_scan_band {
  position: absolute;
  left: 0;
  right: 0;
  top: -28%;
  z-index: 4;
  height: 24%;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.16) 34%, rgba(255,255,255,0.38) 50%, rgba(219,192,175,0.16) 68%, transparent 100%),
    repeating-linear-gradient(90deg, transparent 0 22rem, rgba(255,255,255,0.2) 22rem 23rem, transparent 23rem 44rem);
}
.metascan_sect.on .ms_scan_band {
  animation: msSkinBand 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
}
.metascan_sect .ms_point {
  position: absolute;
  z-index: 5;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  box-shadow: 0 0 0 5rem rgba(255, 255, 255, 0.12), 0 0 16rem rgba(255, 255, 255, 0.42);
  pointer-events: none;
}
.metascan_sect .ms_point::after {
  content: "";
  position: absolute;
  inset: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
.metascan_sect .ms_point.p1 { left: 41%; top: 39%; }
.metascan_sect .ms_point.p2 { left: 59%; top: 39%; }
.metascan_sect .ms_point.p3 { left: 50%; top: 49%; }
.metascan_sect .ms_point.p4 { left: 42%; top: 56%; }
.metascan_sect .ms_point.p5 { left: 58%; top: 56%; }
.metascan_sect .ms_point.p6 { left: 50%; top: 63%; }
.metascan_sect.on .ms_point {
  animation: msPointPulse 2.2s ease-in-out 0.65s both;
}
.metascan_sect.on .ms_point.p2 { animation-delay: 0.78s; }
.metascan_sect.on .ms_point.p3 { animation-delay: 0.91s; }
.metascan_sect.on .ms_point.p4 { animation-delay: 1.04s; }
.metascan_sect.on .ms_point.p5 { animation-delay: 1.17s; }
.metascan_sect.on .ms_point.p6 { animation-delay: 1.3s; }

/* EVE MUSE AI 라벨 */
.metascan_sect .ms_tag {
  position: absolute; left: 34rem; bottom: 34rem; z-index: 4;
  display: inline-flex; align-items: center; gap: 12rem;
  font-size: 16rem; letter-spacing: 0.16em; color: #fff; text-shadow: 0 1px 10rem rgba(0, 0, 0, 0.4);
}
.metascan_sect .ms_tag .ico { position: relative; width: 22rem; height: 22rem; flex: 0 0 auto; }
.metascan_sect .ms_tag .ico::before,
.metascan_sect .ms_tag .ico::after {
  content: ""; position: absolute; width: 8rem; height: 8rem; border: 2px solid #fff;
}
.metascan_sect .ms_tag .ico::before { top: 0; left: 0; border-right: 0; border-bottom: 0; box-shadow: 14rem 0 0 -2px #fff, 14rem 0 0 #fff; }
.metascan_sect .ms_tag .ico::after { bottom: 0; right: 0; border-left: 0; border-top: 0; box-shadow: -14rem 0 0 -2px #fff, -14rem 0 0 #fff; }

/* 분석 항목 : 겉 / 속 */
.metascan_sect .ms_analysis { grid-column: 1 / -1; margin-top: 110rem; }
.metascan_sect .ms_group + .ms_group { margin-top: 90rem; }
.metascan_sect .ms_group_head {
  display: flex; align-items: baseline; gap: 18rem;
  padding-bottom: 22rem; border-bottom: 2px solid var(--ink);
}
.metascan_sect .ms_g_no { font-size: 20rem; color: var(--tan); line-height: 1; }
.metascan_sect .ms_g_tit { font-family: var(--NotoSerif); font-weight: 500; font-size: 26rem; color: var(--ink); }
.metascan_sect .ms_g_tit b { color: #a67e5b; font-weight: 700; }
.metascan_sect .ms_g_sub { margin-left: auto; font-size: 14rem; letter-spacing: 0.16em; color: #9a8b7d; text-transform: uppercase; }

.metascan_sect .ms_items { display: grid; gap: 44rem; margin-top: 44rem; }
.metascan_sect .ms_items.cols2 { grid-template-columns: repeat(2, 1fr); }
.metascan_sect .ms_items.cols3 { grid-template-columns: repeat(3, 1fr); }
.metascan_sect .ms_shot {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6rem; background: #0c0f16;
  box-shadow: 0 24rem 50rem -28rem rgba(74, 54, 40, 0.5); border: 1px solid rgba(74, 54, 40, 0.1);
}
/* 그룹별 실제 캡처 비율에 맞춰 크롭 없이 노출 */
.metascan_sect .ms_items.ratio-surface .ms_shot { aspect-ratio: 10 / 7; }
.metascan_sect .ms_items.ratio-deep .ms_shot { aspect-ratio: 35 / 16; }
.metascan_sect .ms_shot img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.metascan_sect .ms_items li:hover .ms_shot img { transform: scale(1.04); }
.metascan_sect .ms_i_tit { margin-top: 24rem; font-size: 20rem; font-weight: 600; color: var(--ink); }
.metascan_sect .ms_i_txt { margin-top: 10rem; font-size: 16rem; line-height: 1.7; color: #6f635a; }

/* 브리지 문구 */
.metascan_sect .ms_bridge {
  grid-column: 1 / -1;
  margin-top: 90rem; text-align: center;
  font-family: var(--NotoSerif); font-weight: 500; font-size: 24rem; line-height: 1.5; color: #5c4733;
}

@keyframes msScan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(700rem); }
}
@keyframes msFill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes msBarShine {
  0% { opacity: 0; transform: translateX(-120%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(120%); }
}
@keyframes msSkinBand {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(560rem); }
}
@keyframes msPointPulse {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  34% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  72% { opacity: 0.84; transform: translate(-50%, -50%) scale(1.14); }
  100% { opacity: 0.94; transform: translate(-50%, -50%) scale(1); }
}
@keyframes msMeshPulse {
  0% { opacity: 0; filter: brightness(1); }
  22% { opacity: 0.68; filter: brightness(1.08); }
  72% { opacity: 0.58; filter: brightness(1.02); }
  100% { opacity: 0.38; filter: brightness(1); }
}

@media screen and (max-width: 1280px) {
  .metascan_sect .container { display: block; }
  .metascan_sect .ms_head { max-width: 900rem; margin: 0 auto; text-align: center; }
  .metascan_sect .ms_head .txt { margin-left: auto; margin-right: auto; }
  .metascan_sect .ms_device { width: 560rem; max-width: 100%; margin: 50rem auto 0; }
  .metascan_sect .ms_scan { width: 100%; max-width: 440rem; margin-top: 50rem; }
  .metascan_sect .ms_bar { height: 38rem; }
  .metascan_sect .ms_bar_num { font-size: 15rem; }
  .metascan_sect .ms_complete .lbl { font-size: 13rem; }
  .metascan_sect .ms_analysis { margin-top: 64rem; }
  .metascan_sect .ms_group + .ms_group { margin-top: 60rem; }
  .metascan_sect .ms_items { gap: 34rem; margin-top: 34rem; }
  .metascan_sect .ms_items.cols2, .metascan_sect .ms_items.cols3 { grid-template-columns: 1fr; }
  .metascan_sect .ms_g_tit { font-size: 22rem; }
  .metascan_sect .ms_i_tit { margin-top: 18rem; font-size: 18rem; }
  .metascan_sect .ms_bridge { margin-top: 56rem; font-size: 18rem; }
  @keyframes msScan {
    0% { opacity: 0; transform: translateY(0); }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; transform: translateY(550rem); }
  }
}

/* 모션 최소화 시: 애니메이션 제거, 100%/메시 고정, 스캔라인 숨김 */
@media (prefers-reduced-motion: reduce) {
  .metascan_sect.on .ms_bar_fill { animation: none !important; transform: scaleX(1) !important; }
  .metascan_sect .ms_mesh { opacity: 1 !important; }
  .metascan_sect .ms_line,
  .metascan_sect .ms_scan_band { display: none !important; }
  .metascan_sect .ms_face_oval { opacity: 1 !important; }
  .metascan_sect .ms_point { opacity: 0.9 !important; transform: translate(-50%, -50%) scale(1) !important; }
}

/* =============================================================
   시술 안내(program_sect): 헤더 화이트 + 5:5 규칙 레이아웃
   - 헤더는 흰색 배경, 아래 시술 항목은 이미지:텍스트 = 50:50
   - 스크롤 배경색 전환 무효화
   ============================================================= */
.program_sect { background: #fff !important; color: #6a5445 !important; transition: none !important; }
.program_sect .cont { margin-top: 110rem; }

/* 각 항목: 이미지/텍스트 정확히 절반, 짝수 항목은 좌우 반전 */
.program_sect .cont .pro_box,
.program_sect .cont .pro_box:nth-child(even) {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100rem;
}
.program_sect .cont .pro_box + .pro_box { margin-top: 130rem; }
.program_sect .cont .pro_box .img_wrap { width: auto !important; flex: initial !important; order: 0; }
.program_sect .cont .pro_box .txt_box,
.program_sect .cont .pro_box:nth-child(even) .txt_box { margin-left: 0 !important; order: 1; }
.program_sect .cont .pro_box:nth-child(even) .img_wrap { order: 1; }
.program_sect .cont .pro_box:nth-child(even) .txt_box { order: 0; }

/* 이미지 비율 통일, 본문 고정높이 해제 */
.program_sect .cont .pro_box .img { aspect-ratio: 4 / 5; }
.program_sect .cont .pro_box .txt_box > .txt { height: auto !important; }

@media screen and (max-width: 1280px) {
  .program_sect .cont { margin-top: 56rem; }
  .program_sect .cont .pro_box,
  .program_sect .cont .pro_box:nth-child(even) { grid-template-columns: 1fr; gap: 34rem; }
  .program_sect .cont .pro_box + .pro_box { margin-top: 70rem; }
  /* 모바일: 이미지 먼저, 텍스트 아래로 통일 */
  .program_sect .cont .pro_box .img_wrap,
  .program_sect .cont .pro_box:nth-child(even) .img_wrap { order: 0; }
  .program_sect .cont .pro_box .txt_box,
  .program_sect .cont .pro_box:nth-child(even) .txt_box { order: 1; }
}

/* =============================================================
   섹션 배경 이미지 (intro / flow) + 효과 컬럼 이미지 + 3-Step 테두리 제거
   ============================================================= */

/* 인트로(AI 줄기세포는?) 배경 이미지: 흰 배경 위 은은한 텍스처 */
.intro_sect { overflow: hidden; }
.intro_sect > .bg { position: absolute; inset: 0; z-index: 0; }
.intro_sect > .bg img { width: 100%; height: 100%; object-fit: cover; }
.intro_sect > .bg::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.9); }
.intro_sect > .container { position: relative; z-index: 1; }

/* 6단계 토탈 케어(flow) 배경 이미지: 베이지 오버레이로 다크 텍스트 유지 */
.flow_sect { overflow: hidden; }
.flow_sect > .bg { position: absolute; inset: 0; z-index: 0; }
.flow_sect > .bg img { width: 100%; height: 100%; object-fit: cover; }
.flow_sect > .bg::after { content: ""; position: absolute; inset: 0; background: rgba(219, 192, 175, 0.9); }
.flow_sect > .container { position: relative; z-index: 1; }

/* 3-Step 준비 / 인트로 / 선택 이유: 이미지 박스 안쪽 테두리 선 제거 */
.step_sect .fig::after { display: none !important; }
.intro_sect .fig .img::after { display: none !important; }
.why_sect .bg_wrap::before { display: none !important; }

/* 마퀴(Beauty From The Cell): 배경 색상 제거 */
.flow_txt_wrap { background: transparent !important; }

/* 시술 효과: 외적/내면 컬럼 상단 이미지 */
.effect_col .ec_img { margin-bottom: 36rem; overflow: hidden; border-radius: 6rem; aspect-ratio: 4 / 3; }
.effect_col .ec_img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.effect_col:hover .ec_img img { transform: scale(1.04); }

@media screen and (max-width: 1280px) {
  .effect_col .ec_img { margin-bottom: 26rem; }
}

/* =============================================================
   Refinement layer: typography, wrapping, and responsive rhythm
   ============================================================= */
body {
  line-height: 1.62;
  overflow-wrap: break-word;
}

.main_cont_txt {
  max-width: 900rem;
}
.main_cont_txt.center {
  margin-inline: auto;
}
.main_cont_txt .desc,
.closing_sect .desc,
.effect_col .col_head .k {
  font-size: 15rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.18em !important;
}
.main_cont_txt .tit,
.closing_sect .tit {
  font-size: clamp(42rem, 3vw, 52rem) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}
.main_cont_txt .txt,
.effect_col .col_head .s {
  max-width: 760rem;
  font-size: 18rem !important;
  line-height: 1.75 !important;
  text-wrap: pretty;
}
.main_cont_txt.center .txt,
.closing_sect .txt {
  margin-left: auto;
  margin-right: auto;
}

.visual_sect {
  min-height: 680rem;
}
.visual_sect .tit_box {
  top: clamp(170rem, 16vh, 300rem);
  padding-inline: 32rem;
  font-size: clamp(58rem, 5.5vw, 106rem);
  line-height: 1.04;
  transform: translateX(-50%) !important;
  white-space: nowrap;
}
.visual_sect .txt_box {
  width: min(760rem, calc(100% - 48rem));
  bottom: clamp(96rem, 14vh, 187rem);
}
.visual_sect .txt_box .txt {
  line-height: 1.65;
  text-wrap: balance;
}

.intro_sect .body p.p {
  max-width: 680rem;
  font-size: 17rem !important;
  line-height: 1.82 !important;
  text-wrap: pretty;
}
.intro_sect .body p.p:first-of-type {
  max-width: 650rem;
  font-size: 19rem !important;
  line-height: 1.72 !important;
  color: #4d4037;
}
.intro_sect .body p.p + p.p {
  margin-top: 18rem;
}
.tag_row li,
.tag_row span,
.program_sect .pro_box .txt_box .t_tags li {
  font-size: 14rem !important;
  line-height: 1.45 !important;
}

.program_sect .cont {
  margin-top: 100rem;
}
.program_sect .cont .pro_box,
.program_sect .cont .pro_box:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(60rem, 5vw, 100rem);
}
.program_sect .cont .pro_box .txt_box .tit,
.program_sect .cont .pro_box .txt_box .tit .tit_txt {
  font-size: 30rem !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}
.program_sect .cont .pro_box .txt_box .tit .num {
  font-size: 96rem !important;
  line-height: 0.9 !important;
}
.program_sect .cont .pro_box .txt_box > .txt {
  max-width: 620rem;
  font-size: 16rem !important;
  line-height: 1.78 !important;
  text-wrap: pretty;
}

.metascan_sect .ms_head {
  max-width: none;
}
.metascan_sect .ms_g_tit,
.metascan_sect .ms_i_tit,
.effect_col .col_head .h,
.flow_list .f_tit,
.step_sect .list .t_tit,
.why_sect .txt_wrap ul li .txt_box .tit {
  text-wrap: balance;
}
.metascan_sect .ms_i_txt,
.flow_list .f_txt,
.step_sect .list .t_txt,
.why_sect .txt_wrap ul li .txt_box .txt,
.program_sect .after_list .ap,
.effect_col .e_txt {
  text-wrap: pretty;
}
.effect_col .col_head .h {
  font-size: 26rem !important;
  line-height: 1.35 !important;
}
.effect_col .e_tit {
  font-size: 18rem !important;
  line-height: 1.45 !important;
}
.effect_col .e_txt {
  font-size: 14rem !important;
  line-height: 1.65 !important;
}
.effect_col .num {
  font-size: 22rem !important;
  line-height: 1;
}
.flow_list .f_tit {
  font-size: 22rem !important;
  line-height: 1.42 !important;
}
.flow_list .f_txt {
  font-size: 16rem !important;
  line-height: 1.75 !important;
}
.flow_list .num {
  font-size: 40rem !important;
}
.step_sect .list .t_tit {
  font-size: 20rem !important;
  line-height: 1.45 !important;
}
.step_sect .list .t_txt {
  font-size: 16rem !important;
  line-height: 1.75 !important;
}
.step_sect .list .num {
  font-size: 22rem !important;
}
.step_sect .note {
  font-size: 22rem !important;
  line-height: 1.6 !important;
}
.why_sect .bg_wrap .main_cont_txt .tit {
  white-space: normal !important;
}
.why_sect .txt_wrap ul li .txt_box .tit {
  font-size: 20rem !important;
  line-height: 1.45 !important;
}
.why_sect .txt_wrap ul li .txt_box .txt {
  font-size: 16rem !important;
  line-height: 1.75 !important;
}
.why_sect .txt_wrap ul li .num {
  font-size: 22rem !important;
  line-height: 1;
}
.program_sect .after_list .ah {
  font-size: 18rem !important;
  line-height: 1.45 !important;
}
.program_sect .after_list .ap {
  font-size: 16rem !important;
  line-height: 1.7 !important;
}
.program_sect .after_list .an {
  font-size: 22rem !important;
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
  .metascan_sect .ms_items.cols3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1280px) {
  .metascan_sect .ms_head {
    max-width: 900rem;
    margin: 0 auto !important;
    text-align: center;
  }
  .metascan_sect .ms_head .txt {
    margin-left: auto;
    margin-right: auto;
  }
  .main_cont_txt .tit,
  .closing_sect .tit {
    font-size: clamp(28rem, 8vw, 38rem) !important;
    line-height: 1.26 !important;
  }
  .main_cont_txt .txt,
  .closing_sect .txt,
  .visual_sect .txt_box .txt {
    font-size: 16rem !important;
    line-height: 1.72 !important;
  }
  .main_cont_txt .tit br:not(.mo_only),
  .main_cont_txt .txt br:not(.mo_only),
  .closing_sect .tit br:not(.mo_only),
  .closing_sect .txt br:not(.mo_only),
  .visual_sect .txt_box .txt br:not(.mo_only) {
    display: none;
  }
  .main_cont_txt .tit br:not(.mo_only),
  .closing_sect .tit br:not(.mo_only) {
    display: inline !important;
  }
  .visual_sect {
    min-height: 620rem;
  }
  .visual_sect .tit_box {
    top: 150rem;
    font-size: clamp(42rem, 12vw, 64rem);
  }
  .visual_sect .tit_box .line {
    margin-inline: 18rem;
  }
  .visual_sect.active .line {
    width: 72rem;
  }
  .program_sect .cont {
    margin-top: 56rem;
  }
  .program_sect .cont .pro_box,
  .program_sect .cont .pro_box:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 30rem;
  }
  .program_sect .cont .pro_box .txt_box,
  .program_sect .cont .pro_box:nth-child(even) .txt_box {
    width: auto;
    margin-top: 0 !important;
    padding-right: 0;
  }
  .program_sect .cont .pro_box .txt_box .tit,
  .program_sect .cont .pro_box .txt_box .tit .tit_txt {
    font-size: 24rem !important;
  }
  .program_sect .cont .pro_box .txt_box .tit .num {
    font-size: 60rem !important;
  }
  .intro_sect .body p.p {
    font-size: 16rem !important;
  }
  .intro_sect .body p.p:first-of-type {
    font-size: 17rem !important;
    line-height: 1.7 !important;
  }
  .flow_list .num {
    font-size: 34rem !important;
  }
  .flow_list .f_tit {
    font-size: 20rem !important;
  }
  .effect_col .col_head .h {
    font-size: 22rem !important;
  }
}

@media screen and (max-width: 560px) {
  .hd .brand .ko {
    letter-spacing: 0.16em;
  }
  .visual_sect .tit_box {
    top: 132rem;
    flex-direction: column;
    gap: 8rem;
    white-space: normal;
  }
  .visual_sect .tit_box .line {
    width: 1px !important;
    height: 42rem;
    margin: 0;
  }
  .visual_sect.active .line {
    width: 1px !important;
  }
  .visual_sect .txt_box {
    bottom: 72rem;
  }
  .metascan_sect .ms_complete {
    align-items: flex-start;
    flex-direction: column;
    gap: 10rem;
  }
  .metascan_sect .ms_bar {
    width: 100%;
  }
  .metascan_sect .ms_group_head {
    flex-wrap: wrap;
    row-gap: 10rem;
  }
  .metascan_sect .ms_g_sub {
    width: 100%;
    margin-left: 0;
  }
  .tag_row,
  .program_sect .pro_box .txt_box .t_tags {
    gap: 8rem;
  }
  .tag_row li,
  .tag_row span,
  .program_sect .pro_box .txt_box .t_tags li {
    padding: 9rem 14rem;
  }
}

/* =============================================================
   Final polish: hero balance, micro motion, tactile details
   ============================================================= */
.visual_sect::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  height: auto;
  background:
    linear-gradient(180deg, rgba(45, 31, 23, 0) 0%, rgba(45, 31, 23, 0.04) 38%, rgba(67, 45, 32, 0.24) 68%, rgba(45, 31, 23, 0.62) 100%),
    radial-gradient(circle at 50% 84%, rgba(138, 106, 78, 0.3) 0%, rgba(67, 45, 32, 0.12) 42%, rgba(45, 31, 23, 0) 76%);
  opacity: 0;
  transition: opacity 1.15s ease 0.25s;
  pointer-events: none;
}
.visual_sect.copy-active::after {
  opacity: 1;
}
.visual_sect .bg img {
  transform: scale(1.035);
  transition: transform 3.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.visual_sect.active .bg img {
  transform: scale(1);
}
.visual_sect .tit_box {
  top: clamp(280rem, 32vh, 410rem);
  letter-spacing: 0;
}
.visual_sect .tit_box .tit {
  transform: translateY(18rem);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.visual_sect.active .tit_box .tit {
  transform: translateY(0);
}
.visual_sect .tit_box .line {
  opacity: 0.82;
}
.visual_sect .txt_box {
  bottom: clamp(118rem, 15vh, 190rem);
}
.blur_btn {
  position: relative;
  overflow: hidden;
  box-shadow: 0 16rem 42rem -28rem rgba(0, 0, 0, 0.45);
}
.blur_btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.32) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.blur_btn:hover::after {
  transform: translateX(120%);
}

.intro_sect .fig .img,
.program_sect .cont .pro_box .img,
.effect_col .ec_img,
.metascan_sect .ms_frame,
.metascan_sect .ms_shot {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease;
}
.intro_sect .fig:hover .img,
.program_sect .cont .pro_box:hover .img,
.effect_col:hover .ec_img,
.metascan_sect .ms_scan:hover .ms_frame,
.metascan_sect .ms_items li:hover .ms_shot {
  transform: translateY(-6rem);
  box-shadow: 0 34rem 70rem -40rem rgba(74, 54, 40, 0.46);
}
.program_sect .cont .pro_box .img::after,
.effect_col .ec_img::after,
.intro_sect .fig .img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(43,36,32,0.12) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.program_sect .cont .pro_box:hover .img::after,
.effect_col:hover .ec_img::after,
.intro_sect .fig:hover .img::before {
  opacity: 1;
}
.effect_col .ec_img,
.intro_sect .fig .img {
  position: relative;
}

.tag_row li,
.program_sect .pro_box .txt_box .t_tags li {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.tag_row li:hover,
.program_sect .pro_box .txt_box .t_tags li:hover {
  transform: translateY(-2rem);
  background: rgba(219, 192, 175, 0.16);
  border-color: rgba(138, 106, 78, 0.36) !important;
}

.metascan_sect .ms_items li,
.effect_col ul li,
.flow_list li,
.why_sect .txt_wrap ul li {
  transition: background 0.35s ease, padding-left 0.35s ease, border-color 0.35s ease;
}
.metascan_sect .ms_items li:hover {
  color: var(--ink);
}
.effect_col ul li:hover,
.flow_list li:hover,
.why_sect .txt_wrap ul li:hover {
  padding-left: 12rem;
  background: rgba(255, 255, 255, 0.12);
}
.why_sect .txt_wrap ul li.on {
  border-color: rgba(138, 106, 78, 0.34);
}

.closing_sect .container {
  max-width: 980rem;
}

/* Typography hierarchy tuning: keep body readable without making it bulky. */
.main_cont_txt .tit,
.closing_sect .tit {
  font-size: clamp(34rem, 2.48vw, 44rem) !important;
  line-height: 1.3 !important;
}
.main_cont_txt .txt,
.effect_col .col_head .s,
.visual_sect .txt_box .txt {
  color: #51453d !important;
  font-weight: 400;
  line-height: 1.68 !important;
}
.visual_sect .txt_box .txt {
  color: #fff !important;
  font-weight: 500;
  text-shadow: none;
}
.visual_sect .blur_btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.78) !important;
  color: #fff !important;
  font-weight: 700;
  backdrop-filter: blur(12rem);
  box-shadow: 0 18rem 46rem -26rem rgba(43, 36, 32, 0.42);
}
.visual_sect .blur_btn:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ink) !important;
}
.program_sect .cont .pro_box .txt_box > .txt,
.metascan_sect .ms_i_txt,
.flow_list .f_txt,
.step_sect .list .t_txt,
.why_sect .txt_wrap ul li .txt_box .txt,
.program_sect .after_list .ap,
.effect_col .e_txt {
  color: #51453d !important;
  font-weight: 400;
  line-height: 1.68 !important;
}
.intro_sect .body p.p {
  color: #51453d !important;
  line-height: 1.74 !important;
}
.program_sect .cont .pro_box .txt_box .tit,
.program_sect .cont .pro_box .txt_box .tit .tit_txt,
.effect_col .col_head .h,
.metascan_sect .ms_g_tit {
  font-size: clamp(24rem, 1.75vw, 28rem) !important;
}

/* Program guide: pull the background image back and restore a calmer dark stage. */
.flow_sect {
  background: #1f1814 !important;
  color: rgba(248, 243, 238, 0.78) !important;
}
.flow_sect > .bg {
  background: #1f1814;
}
.flow_sect > .bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flow_sect > .bg::after {
  background: linear-gradient(180deg, rgba(31, 24, 20, 0.58) 0%, rgba(31, 24, 20, 0.74) 58%, rgba(31, 24, 20, 0.86) 100%) !important;
}
.flow_sect .main_cont_txt .desc {
  color: #dbc0af !important;
}
.flow_sect .main_cont_txt .tit,
.flow_list .f_tit {
  color: #fff !important;
}
.flow_sect .main_cont_txt .txt,
.flow_list .f_txt {
  color: rgba(248, 243, 238, 0.74) !important;
}
.flow_list li {
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.flow_list .num {
  color: #dbc0af !important;
}
.flow_list li::after {
  background: #dbc0af !important;
}
.flow_sect.sec {
  padding: 132rem 0 124rem !important;
}
.flow_sect .flow_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: clamp(70rem, 6vw, 120rem);
  row-gap: 0;
  margin-top: 46rem !important;
}
.flow_sect .flow_list li {
  padding: 30rem 0 !important;
  gap: 28rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.flow_sect .flow_list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.flow_sect .flow_list .num {
  width: 70rem;
  font-size: 34rem !important;
}
.flow_sect .flow_list .f_tit {
  font-size: 20rem !important;
  line-height: 1.35 !important;
}
.flow_sect .flow_list .f_txt {
  margin-top: 8rem;
  font-size: 15rem !important;
  line-height: 1.55 !important;
  max-width: 820rem;
}

/* Why section: keep the message outside the image so it reads as content. */
.why_sect {
  display: block !important;
  padding: 180rem 0;
  background:
    linear-gradient(180deg, #f3ece5 0%, #fbf7f2 46%, #efe4da 100%);
  overflow: hidden;
}
.why_sect::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 48%;
  background: linear-gradient(90deg, rgba(219, 192, 175, 0.22), transparent 42%, rgba(138, 106, 78, 0.08));
  pointer-events: none;
}
.why_sect .why_head {
  position: relative;
  z-index: 1;
  width: min(900rem, calc(100% - 80rem));
  margin: 0 auto 84rem;
  text-align: center;
}
.why_sect .why_head .desc {
  color: #8a6a4e !important;
}
.why_sect .why_head .tit {
  color: var(--ink) !important;
}
.why_sect .why_head .txt {
  color: #51453d !important;
}
.why_sect .why_head .txt {
  margin-left: auto;
  margin-right: auto;
}
.why_sect .why_body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0 auto;
}
.why_sect .bg_wrap {
  width: 50% !important;
  flex: 0 0 50%;
  padding-top: 50% !important;
}
.why_sect .txt_wrap {
  width: 50% !important;
  flex: 0 0 50%;
  padding: 0 200rem 0 0 !important;
}
.why_sect .txt_wrap ul {
  margin-left: 93rem !important;
}

@media screen and (max-width: 1280px) {
  .visual_sect .tit_box {
    top: clamp(210rem, 27vh, 280rem);
  }
  .main_cont_txt .tit,
  .closing_sect .tit {
    font-size: clamp(26rem, 6.6vw, 34rem) !important;
  }
  .program_sect .cont .pro_box .txt_box .tit,
  .program_sect .cont .pro_box .txt_box .tit .tit_txt,
  .effect_col .col_head .h,
  .metascan_sect .ms_g_tit {
    font-size: clamp(22rem, 5.8vw, 26rem) !important;
  }
  .intro_sect .fig:hover .img,
  .program_sect .cont .pro_box:hover .img,
  .effect_col:hover .ec_img,
  .metascan_sect .ms_scan:hover .ms_frame,
  .metascan_sect .ms_items li:hover .ms_shot,
  .tag_row li:hover,
  .program_sect .pro_box .txt_box .t_tags li:hover {
    transform: none;
  }
  .effect_col ul li:hover,
  .flow_list li:hover,
  .why_sect .txt_wrap ul li:hover {
    padding-left: 0;
    background: transparent;
  }
  .why_sect {
    padding: 120rem 0;
  }
  .why_sect .why_head {
    width: calc(100% - 40rem);
    margin-bottom: 52rem;
  }
  .why_sect .why_body {
    flex-direction: column;
    width: calc(100% - 40rem);
    gap: 42rem;
  }
  .why_sect .bg_wrap {
    width: 100% !important;
    flex-basis: auto;
    padding-top: 100% !important;
  }
  .why_sect .txt_wrap {
    width: 100% !important;
    flex-basis: auto;
    padding: 0 !important;
  }
  .why_sect .txt_wrap ul {
    margin-left: 0 !important;
  }
  .flow_sect.sec {
    padding: 96rem 0 90rem !important;
  }
  .flow_sect .flow_list {
    display: block;
    margin-top: 36rem !important;
  }
  .flow_sect .flow_list li {
    padding: 24rem 0 !important;
    gap: 10rem;
  }
  .flow_sect .flow_list .num {
    width: auto;
    font-size: 28rem !important;
  }
}

@media screen and (max-width: 560px) {
  .visual_sect .tit_box {
    top: 170rem;
    width: calc(100% - 40rem);
    font-size: clamp(36rem, 10.2vw, 42rem) !important;
    line-height: 1.14;
  }
  .visual_sect .txt_box {
    bottom: 72rem;
  }
}

/* 2026-07 request: EVE MUSE / AI Cell content refinement */
.metascan_sect .ms_mesh {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.72) 0 1.5px, transparent 1.5px 28rem),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0 1.5px, transparent 1.5px 28rem);
}
.metascan_sect .ms_line {
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), rgba(219, 192, 175, 0.95), transparent);
  box-shadow: 0 0 24rem 5rem rgba(255, 255, 255, 0.66);
}
.metascan_sect .ms_tag {
  font-weight: 700;
}
.metascan_sect .ms_i_tit {
  font-size: 22rem !important;
}
.metascan_sect .ms_i_txt {
  font-size: 17rem !important;
  color: #51453d !important;
}
.program_sect .cont .pro_box .txt_box .tit,
.program_sect .cont .pro_box .txt_box .tit .tit_txt {
  font-size: clamp(30rem, 2.35vw, 40rem) !important;
  line-height: 1.22 !important;
}
.program_sect .cont .pro_box .txt_box > .txt {
  font-size: 18rem !important;
  line-height: 1.78 !important;
}
.program_sect .after_list .ah {
  font-size: 21rem !important;
}
.program_sect .after_list .ap {
  font-size: 17rem !important;
  color: #51453d !important;
}
.program_sect .after_list .opt {
  display: inline-block;
  margin-left: 10rem;
  padding: 4rem 10rem;
  border: 1px solid rgba(138, 106, 78, 0.34);
  font-size: 14rem;
  line-height: 1.2;
}
.flow_sect .flow_list {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
}
.flow_sect .flow_list .f_txt,
.effect_col .e_txt,
.why_sect .txt_wrap ul li .txt_box .txt {
  font-size: 17rem !important;
  color: rgba(248, 243, 238, 0.82) !important;
}
.effect_col .e_txt,
.why_sect .txt_wrap ul li .txt_box .txt {
  color: #4f4239 !important;
}
.why_sect .txt_wrap ul li .txt_box .txt {
  line-height: 1.82 !important;
}
.closing_sect .tit {
  font-size: clamp(42rem, 4.6vw, 62rem) !important;
}

/* Why section: requested emphasis for Q titles only. */
.why_sect .txt_wrap ul li .txt_box .tit {
  color: #8a6a4e !important;
  font-size: 26rem !important;
  font-weight: 700;
  line-height: 1.45 !important;
}

.closing_sect .tit {
  font-size: clamp(34rem, 3.2vw, 46rem) !important;
  line-height: 1.28 !important;
}

@media screen and (max-width: 1280px) {
  .program_sect .cont .pro_box .txt_box .tit,
  .program_sect .cont .pro_box .txt_box .tit .tit_txt {
    font-size: clamp(26rem, 6.2vw, 34rem) !important;
  }
  .program_sect .cont .pro_box .txt_box > .txt {
    font-size: 16rem !important;
  }
  .flow_sect .flow_list {
    display: block;
  }
}