@charset "UTF-8";
/* ==========================================================================
   옴니핏 · 2026 스마트상점 기술보급사업 2차 — 모바일 홍보 페이지
   view : resources/views/smart_store.blade.php   route : /smart_store

   네이밍   섹션 sXX__ · 공용 sm- · JS 훅 js- · 상태 is-
   가로폭   모바일 440px, 768px 이상 640px (단일 컬럼 유지)

   구조     s01 히어로            s02 왜 필요한가       s03 지원 대상 제품
            s04 내 부담금 계산     s05 신청 자격         s06 신청 절차
            s07 미리 챙길 서류     s08 FAQ              s09 상담 신청 폼
            s10 고지·푸터
   ※ 선언 순서는 s01 → s04 → s02 → s03 → s05… 로 섹션 번호와 다르다.
     같은 카드 계열(견적 카드)을 히어로 바로 뒤에 모아둔 원본 순서를 유지한 것.
   ========================================================================== */

/* 폰트 — font/omnifit-smartstore/ 는 font/omnifit-academy/ 원본을
   KS X 1001 한글 완성형 2350자 + 라틴·기호로 서브셋한 사본이다.
   (원본 5.4MB → 1.0MB. 원본 그대로 쓰려면 src 경로만 omnifit-academy 로 바꾼다)
   · Pretendard  본문 전체         --ft-body     400 / 600 / 700 / 800
   · GmarketSans 숫자·헤드라인·버튼 --ft-display  500 / 700
   금액 숫자는 GmarketSans Bold + tabular-nums(.sm-num)로 자릿수를 맞추고 있어
   다른 폰트로 바꾸면 견적 카드의 숫자 열이 어긋난다. */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/omnifit-smartstore/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/omnifit-smartstore/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/omnifit-smartstore/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../font/omnifit-smartstore/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('../font/omnifit-smartstore/GmarketSansMedium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('../font/omnifit-smartstore/GmarketSansBold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* ==========================================================
   0. 토큰 · 리셋
   ========================================================== */
:root {
    --ink: #171b3d;          /* 본문 잉크 */
    --ink-soft: #5a607f;     /* 보조 텍스트 */
    --brand: #2332c3;        /* 옴니핏 딥블루 */
    --brand-pale: #eef1f8;   /* 연블루 면 */
    --brand-line: #d7ddf0;   /* 괘선 */
    --paper: #f4f5f9;        /* 페이지 지면 */
    --sheet: #ffffff;        /* 문서(카드) 면 */
    --accent: #ffe96c;       /* 옐로 — CTA·형광펜 전용 */
    --stamp: #d0403c;        /* 도장 인주색 — 견적 카드 도장 전용 */
    --ft-display: 'GmarketSans', 'Pretendard', sans-serif;   /* 숫자·헤드라인·버튼 */
    --ft-body: 'Pretendard', -apple-system, 'Malgun Gothic', sans-serif;  /* 본문 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--ft-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* 페이지 = 서류 한 장: 모바일 폭 시트를 지면 위에 올림 */
.sm-wrap {
    max-width: 440px;
    margin: 0 auto;
    background: var(--sheet);
    box-shadow: 0 0 32px rgba(23, 27, 61, .08);
    padding-top: 44px;      /* 상단 고정바 높이 */
    padding-bottom: 84px;   /* 하단 CTA바 높이 */
}
.sec { padding: 56px 24px; }

/* 섹션 눈썹(문서 계목) */
.sm-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ft-display);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .16em;
    color: var(--brand);
    margin-bottom: 14px;
}
.sm-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--brand-line); }
.sm-heading {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
.sm-sub { font-size: 14px; color: var(--ink-soft); }

/* 숫자는 전부 고정폭 */
.sm-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
/* 헤딩 줄바꿈 균형 (지원 브라우저 한정, 미지원 시 무해) */
.sm-heading, .s01__heading { text-wrap: balance; }

/* 공용 버튼 */
.sm-btn {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--ft-display);
    font-weight: 700;
    font-size: 16px;
    padding: 16px;
    border-radius: 10px;
    transition: transform .12s ease, box-shadow .12s ease;
}
.sm-btn:active { transform: scale(.985); }
.sm-btn--fill { background: var(--accent); color: var(--ink); box-shadow: 0 4px 14px rgba(227, 201, 79, .45); }

/* PC에서는 시트 폭 확대 (모바일 우선, 단일 컬럼 유지)
   실작업 시 omnicns.mediaQueries.css로 이동 */
@media (min-width: 768px) {
    .sm-wrap, .sm-topbar__in, .sm-ctabar__in { max-width: 640px; }
    .sec { padding-left: 40px; padding-right: 40px; }
    .s01 { padding-left: 40px; padding-right: 40px; }
}

/* 접수 마감 상태 (CONFIG.DEADLINE 경과 시 body에 is-closed 자동 부여)
   · js-open-only  = 접수 중에만 노출
   · js-closed-only = 마감 후에만 노출
   · CTA 버튼은 회색 처리 + 클릭 차단, 라벨은 JS가 '접수 마감'으로 교체 */
.js-closed-only { display: none; }
.is-closed .js-open-only { display: none; }
.is-closed .js-closed-only { display: block; }
.is-closed .js-cta {
    background: #d6d8e2;
    color: #82879e;
    box-shadow: none;
    pointer-events: none;
}
/* 마감 후 상담 섹션 문의처 */
.s09__closed {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 18px;
}
.s09__closed-key { font-size: 13.5px; color: rgba(255, 255, 255, .65); margin-bottom: 6px; }
.s09__closed-tel {
    font-family: var(--ft-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}

/* 스크롤 등장 (reduced-motion 존중) */
.js-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   상단 고정바 — 마감 카운터
   ========================================================== */
.sm-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--brand-line);
}
.sm-topbar__in {
    max-width: 440px;
    margin: 0 auto;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 14px;
    font-size: 13.5px;
    color: var(--ink-soft);
}
.sm-topbar__in > span { white-space: nowrap; }
.sm-topbar__dday {
    font-family: var(--ft-display);
    font-weight: 700;
    font-size: 13.5px;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

/* ==========================================================
   하단 고정 CTA바
   ========================================================== */
.sm-ctabar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--brand-line);
}
.sm-ctabar__in {
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.sm-ctabar__in .sm-btn { padding: 13px; font-size: 15px; }

/* ==========================================================
   s01. 히어로 — 금액으로 붙잡기
   ========================================================== */
.s01 { padding: 44px 24px 52px; }
/* 공급기업 표기 — 기관·사업명은 작게, 회사명만 눈에 걸리게 (헤드카피보다는 약하게) */
.s01__notice {
    border-left: 3px solid var(--brand-line);
    padding-left: 11px;
    margin-bottom: 22px;
}
.s01__notice-org { font-size: 13px; color: #9aa0bb; line-height: 1.5; }
.s01__notice-role { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.s01__notice-role strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--brand);
    letter-spacing: -.01em;
}
.s01__heading {
    font-family: var(--ft-display);
    font-size: 29px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.015em;
    margin-bottom: 8px;
}
/* 형광펜 — s01 헤드카피와 s02 지원조건 헤드에서 함께 쓴다 */
.s01__heading .hl,
.s02__gov-head .hl {
    background: linear-gradient(transparent 62%, var(--accent) 62%);
    padding: 0 2px;
}
.s01__desc { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 28px; }

/* 히어로 착용컷 + 제품 패널 오버레이
   사진 비율 16:9(2560×1440)에 맞춰 박스도 16:9 — 잘림 없음 */
.s01__visual {
    position: relative;
    margin: 0 0 10px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--brand-pale);
}
.s01__visual:last-of-type { margin-bottom: 22px; }
/* 사진 우상단 업종 라벨 */
.s01__visual-cap {
    position: absolute;
    right: 10px; top: 10px;
    background: rgba(23, 27, 61, .74);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 999px;
}
.s01__visual-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.s01__visual-inset {
    position: absolute;
    left: 3%;
    bottom: 5%;
    width: 26%;
    background: #fff;
    border-radius: 10px;
    padding: 6px 7px;
    box-shadow: 0 6px 16px rgba(23, 27, 61, .20);
}
.s01__visual-inset img { width: 100%; display: block; }
.s01__visual-inset--right { left: auto; right: 3%; }
.s01__visual-cap--left { right: auto; left: 10px; }
/* 체험부스 현장 — 타이틀은 사진에 합성하지 않고 위에 얹음 */
.s01__booth {
    position: relative;
    margin: 0 0 18px;
    border-radius: 12px;
    overflow: hidden;
}
.s01__booth img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.s01__booth figcaption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 26px 16px 12px;
    background: linear-gradient(transparent, rgba(23, 27, 61, .84));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    text-align: center;
}

/* 히어로 — 대상 연령 한 줄 */
.s01__range {
    font-size: 13.5px;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 14px;
}
/* 히어로 — 정부지원 안내 */
.s01__gov {
    background: var(--brand-pale);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.s01__gov em { display: block; font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.s01__gov strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--brand); margin-bottom: 3px; }
.s01__gov span { font-size: 13.5px; color: var(--ink-soft); }

.s01__cta-foot { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }

/* ==========================================================
   s04. 내 돈 계산 — 견적서 카드 (이 페이지의 시그니처)
   ========================================================== */
.s04 { background: var(--brand-pale); }
.s04__card {
    background: var(--sheet);
    border: 1px solid var(--brand-line);
    border-radius: 14px;
    padding: 24px 22px 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(23, 27, 61, .05);
}
.s04__card + .s04__card { margin-top: 18px; }
.s04__card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--ink);
}
/* 도장 있는 카드는 head 오른쪽을 도장에 양보 */
.s04__card--stamped .s04__card-head { padding-right: 76px; }
.s04__card-name { font-size: 17px; font-weight: 800; }
.s04__card-qty { font-size: 13.5px; color: var(--ink-soft); }
/* 견적 행: 점선 리더 */
.s04__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    font-size: 14.5px;
}
.s04__row-label { color: var(--ink-soft); flex-shrink: 0; }
.s04__row-leader { flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--brand-line); transform: translateY(-4px); }
.s04__row-val { font-weight: 600; white-space: nowrap; }
.s04__row--minus .s04__row-val { color: var(--brand); }
/* 행 부연은 라벨 아래 줄로 — 점선 리더가 찌그러지지 않게 */
.s04__row-note { display: block; font-size: 13px; color: #9aa0bb; font-weight: 400; }
/* 월 환산 — 합계 바로 아래, 일반 기준임을 같은 줄에서 명시 */
.s04__monthly { text-align: right; font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; }
/* 합계 행 */
.s04__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 2px solid var(--ink);
    margin-top: 8px;
    padding-top: 14px;
}
.s04__total-label { font-size: 15px; font-weight: 800; }
.s04__total-val {
    font-family: var(--ft-display);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.s04__total-val small { font-size: 14px; }
/* 합계 아래 보조 금액 — 부가세(더 내는 돈)와 우대(덜 내는 돈)를 같은 크기로 나란히 */
/* 합계 아래 '더하는 돈' — 부가세는 자부담금에 더해서 낸다는 걸 ＋ 기호로 표시 */
.s04__plus {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--brand-line);
}
.s04__plus-label { font-size: 13.5px; color: var(--ink-soft); }
.s04__plus-label b { color: var(--ink); font-weight: 800; margin-right: 2px; }
.s04__plus-note { display: block; font-size: 13px; color: #9aa0bb; margin-top: 2px; }
.s04__plus-val { font-size: 15px; font-weight: 700; white-space: nowrap; color: var(--ink); }
/* 조건이 맞으면 위 자부담금을 대체하는 금액 */
.s04__pref {
    background: var(--brand-pale);
    border-radius: 9px;
    padding: 12px 14px;
    margin-top: 14px;
}
.s04__pref-key { font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; }
.s04__pref-val { font-size: 13.5px; color: var(--brand); font-weight: 600; }
.s04__pref-val strong {
    font-family: var(--ft-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    white-space: nowrap;
}
/* 인주 도장 — 페이지 전체에서 여기 한 곳만 */
.s04__stamp {
    position: absolute;
    top: 14px; right: 16px;
    width: 64px; height: 64px;
    border: 2.5px solid var(--stamp);
    border-radius: 50%;
    color: var(--stamp);
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(9deg);
    opacity: .85;
    pointer-events: none;
}
/* 부가세 안내 블록 */
/* 비용 안내 블록 (부가세 / 설치비) */
.s04__note {
    margin-top: 14px;
    background: var(--sheet);
    border-left: 4px solid var(--ink);
    border-radius: 0 10px 10px 0;
    padding: 16px 18px;
    font-size: 13.5px;
}
.s04__note:first-of-type { margin-top: 22px; }
.s04__note strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.s04__note p { color: var(--ink-soft); }
.s04__note--free { border-left-color: var(--brand); }
.s04__note--free strong { color: var(--brand); }

/* ==========================================================
   s02. 왜 필요한가 — 장면(말풍선) → 대비 → 증거(리포트) → 전환
   ========================================================== */
.s02 { background: var(--brand-pale); }
/* 1단 말풍선 */
.s02__talk { margin-top: 24px; }
.s02__talk + .s02__talk { margin-top: 22px; }
.s02__talk-lab {
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--brand);
    margin-bottom: 10px;
}
.s02__bubble {
    position: relative;
    background: var(--sheet);
    border-radius: 16px 16px 16px 4px;
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(23, 27, 61, .06);
}
.s02__bubble p { font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.s02__bubble::after {
    /* 말풍선 꼬리 */
    content: '';
    position: absolute;
    left: 0; bottom: -9px;
    width: 0; height: 0;
    border-top: 10px solid var(--sheet);
    border-right: 12px solid transparent;
}
.s02__who {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin: 14px 0 18px 6px;
}
.s02__who:last-child { margin-bottom: 0; }
.s02__ask {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ink);
    margin: 28px 0 24px;
}
.s02__ask strong { color: var(--brand); font-weight: 800; }
/* 2단 대비 카드 */
.s02__vs { display: flex; gap: 8px; align-items: stretch; }
.s02__vs-card {
    flex: 1;
    border-radius: 12px;
    padding: 16px 14px 18px;
    text-align: center;
}
.s02__vs-card--old { background: #e3e5ee; color: #8a90a8; }
.s02__vs-card--new { background: var(--brand); color: #fff; }
.s02__vs-label { font-size: 13px; font-weight: 700; margin-bottom: 10px; opacity: .85; }
.s02__vs-quote { font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 12px; }
.s02__vs-desc {
    font-size: 13.5px;
    padding-top: 10px;
    border-top: 1px solid currentColor;
    opacity: .7;
}
/* 3단 리포트 */
.s02__report { margin-top: 24px; }
.s02__report img {
    width: 100%;
    display: block;
    border-radius: 12px;
    background: var(--sheet);
    border: 1px solid var(--brand-line);
}
.s02__report figcaption {
    margin-top: 8px;
    font-size: 13px;
    color: var(--ink-soft);
    text-align: center;
}
/* 4단 전환 */
.s02__turn {
    text-align: center;
    font-family: var(--ft-display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-top: 30px;
}
.s02__turn strong { color: var(--brand); }
/* 5단 전 연령 확장 */
.s02__age {
    margin-top: 30px;
    background: var(--sheet);
    border-radius: 14px;
    padding: 22px 20px;
}
.s02__age-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 20px;
}
.s02__age-title strong { color: var(--brand); font-weight: 800; }
/* 두 번째 줄 — 같은 크기로 이어지되 앞 줄과 한 덩어리로 읽히게 */
.s02__age-title--sub { margin-top: -14px; }
.s02__age-list { list-style: none; }
/* 한 줄에 연령 태그(좌) + 활용처(우) 를 양끝으로 벌려 가로를 채움 */
.s02__age-list li {
    background: var(--brand-pale);
    border-radius: 10px;
    padding: 13px 14px;
}
.s02__age-list li + li { margin-top: 8px; }
.s02__age-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}
.s02__age-tag {
    flex-shrink: 0;
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--brand);
    border-radius: 999px;
    padding: 3px 10px;
}
.s02__age-place { font-size: 13px; color: var(--ink-soft); text-align: right; }
.s02__age-desc { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
/* 6단 지원 조건 밴드 */
.s02__gov { margin-top: 22px; }
.s02__gov-head {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -.02em;
    margin-bottom: 16px;
}
.s02__gov-grid { display: flex; gap: 8px; text-align: center; }
.s02__gov-cell { flex: 1; background: var(--brand); border-radius: 12px; padding: 16px 6px 15px; color: #fff; }
.s02__gov-key { font-size: 13.5px; opacity: .85; margin-bottom: 4px; }
.s02__gov-val { font-family: var(--ft-display); font-size: 22px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.s02__gov-val small { font-size: 13.5px; font-weight: 500; }
.s02__gov-foot { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; text-align: center; }

/* ==========================================================
   s03. 제품 — 무엇을 들이는 건지
   ========================================================== */
.s03__prod { margin-top: 26px; }
.s03__prod + .s03__prod { margin-top: 40px; }
.s03__prod-tag {
    display: inline-block;
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}
.s03__prod-name { font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.s03__prod-def { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
/* 작동 3단계 — 세로 흐름 */
.s03__flow { list-style: none; margin-top: 24px; }
.s03__flow li {
    position: relative;
    padding: 0 0 22px 46px;
}
.s03__flow li::after {
    content: '';
    position: absolute;
    left: 15px; top: 34px; bottom: 2px;
    width: 1.5px;
    background: var(--brand-line);
}
.s03__flow li:last-child { padding-bottom: 0; }
.s03__flow li:last-child::after { display: none; }
.s03__flow-no {
    position: absolute;
    left: 0; top: 0;
    width: 31px; height: 31px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-family: var(--ft-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
}
.s03__flow strong { display: block; font-size: 15.5px; font-weight: 800; margin-bottom: 4px; padding-top: 4px; }
.s03__flow li > span:last-child { display: block; font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }

/* 신뢰 근거 — 개발·검증 주체
   아카데미 홍보물과 같은 내용을 통이미지 대신 코드로 구성 (모바일 가독성) */
.s03__proof { background: var(--brand-pale); border-radius: 12px; padding: 22px 18px; margin-top: 24px; }
.s03__proof-head { text-align: center; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; }
.s03__proof-head strong { display: block; font-size: 19px; font-weight: 800; color: var(--brand); margin-top: 4px; }
.s03__proof-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s03__proof-grid li {
    background: var(--sheet);
    border-radius: 10px;
    padding: 16px 10px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.s03__proof-grid img { height: 30px; width: auto; max-width: 78%; object-fit: contain; display: block; }
.s03__proof-grid span { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* 인증 · 특허 */
.s03__cert { background: var(--ink); border-radius: 12px; padding: 22px 18px; margin-top: 14px; }
.s03__cert-head { text-align: center; font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.s03__cert-imgs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 16px; }
.s03__cert-imgs img { width: calc((100% - 16px) / 3); aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; display: block; background: #fff; }
.s03__cert-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.s03__cert-list li { position: relative; padding-left: 20px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.s03__cert-list li::after { content: '✓'; position: absolute; left: 2px; top: 0; color: #8f9cff; font-size: 13px; }

/* 제품 라인업 — 신뢰 블록과 제품 카드 사이 구분 */
.s03__lineup {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 2px solid var(--ink);
    text-align: center;
}
.s03__lineup-eyebrow {
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--brand);
    margin-bottom: 8px;
}
.s03__lineup-title { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.s03__lineup-desc { font-size: 13.5px; color: var(--ink-soft); }

/* 제품 신뢰도 — 임상 연구 */
.s03__clinic { margin-top: 14px; }
.s03__clinic-head { text-align: center; font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.s03__clinic-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.s03__clinic-list li { display: flex; flex-direction: column; gap: 8px; }
.s03__clinic-list img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 6px; display: block; border: 1px solid var(--brand-line); }
.s03__clinic-list p { font-size: 13px; line-height: 1.45; color: var(--ink-soft); text-align: center; }
.s03__clinic-list b { display: block; font-size: 13px; font-weight: 700; color: var(--brand); margin-bottom: 3px; }
.s03__clinic-list strong { color: var(--ink); font-weight: 700; }
/* 상위 제품 차별화 강조 */
.s03__prod-hl {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    background: linear-gradient(transparent 58%, var(--accent) 58%);
    margin-bottom: 8px;
}
/* 제품 실사 이미지 + 고지 캡션
   [여백 처리 원칙]
   · 박스 비율을 원본 비율에 맞춰 letterbox(빈 띠)를 2~3%로 최소화
       브레인 2.0        3840×2332 = 1.647 → 박스 16:10 (1.600)
       브레인트레이닝     1678×1228 = 1.366 → 박스  4:3  (1.333)
   · 배경 #f3f3f6 은 제품컷의 연회색과 맞춘 값. 남는 띠가 눈에 안 띔
   · object-fit:contain 이라 제품이 잘릴 일은 없고,
     사진 안쪽 여백은 --imgzoom 으로 확대해서 잘라냄 (1 = 원본 그대로)
   · 이미지 교체 시 원본 비율에 맞는 박스 클래스 + --imgzoom 만 조절 */
.s03__figure { margin-bottom: 16px; }
.s03__imgbox {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.s03__imgbox--43 { aspect-ratio: 4 / 3; }
.s03__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(var(--imgzoom, 1));
}
.s03__imgbox--zoom { --imgzoom: 1.18; }   /* 사진 안쪽 여백이 넓은 컷 (브레인 2.0 구성품) */
.s03__caption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #9aa0bb;
}
.s03__feat { list-style: none; }
.s03__feat li {
    position: relative;
    padding: 10px 0 10px 26px;
    font-size: 14px;
    border-bottom: 1px solid var(--brand-pale);
}
.s03__feat li::before {
    content: '';
    position: absolute;
    left: 4px; top: 17px;
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--brand);
}
.s03__feat strong { font-weight: 700; }
.s03__feat span { color: var(--ink-soft); }

/* ==========================================================
   s05. 자격 30초 체크
   ========================================================== */
.s05 { background: var(--brand-pale); }
.s05__list { list-style: none; margin-top: 20px; }
.s05__list li {
    background: var(--sheet);
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 14px 16px 14px 46px;
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
}
.s05__list li + li { margin-top: 8px; }
.s05__list li::before {
    content: '✓';
    position: absolute;
    left: 16px; top: 13px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 13.5px;
    line-height: 20px;
    text-align: center;
}
.s05__list li small { display: block; font-weight: 400; font-size: 13.5px; color: var(--ink-soft); }
.s05__prefer {
    margin-top: 18px;
    background: var(--sheet);
    border: 1.5px solid var(--brand);
    border-radius: 10px;
    padding: 16px 18px;
    font-size: 14px;
}
.s05__prefer strong { color: var(--brand); }
.s05__prefer p { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.s05__foot { font-size: 13.5px; color: var(--ink-soft); margin-top: 14px; }

/* ==========================================================
   s06. 신청 절차 — 세로 스텝
   ========================================================== */
.s06__steps { list-style: none; margin-top: 24px; }
.s06__step {
    position: relative;
    padding: 0 0 26px 44px;
}
.s06__step::before {
    /* 스텝 번호 배지 */
    content: attr(data-no);
    position: absolute;
    left: 0; top: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-family: var(--ft-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 29px;
    text-align: center;
}
.s06__step::after {
    /* 연결선 */
    content: '';
    position: absolute;
    left: 13.5px; top: 32px; bottom: 4px;
    width: 1.5px;
    background: var(--brand-line);
}
.s06__step:last-child { padding-bottom: 0; }
.s06__step:last-child::after { display: none; }
.s06__step-title { font-size: 15.5px; font-weight: 700; }
.s06__step-desc { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }
.s06__warn {
    margin-top: 26px;
    background: #fdf1f1;
    border-left: 4px solid var(--stamp);
    border-radius: 0 10px 10px 0;
    padding: 16px 18px;
    font-size: 13.5px;
}
.s06__warn strong { display: block; font-size: 14.5px; color: var(--stamp); margin-bottom: 4px; }
.s06__warn p { color: var(--ink-soft); }
.s06__inlink { color: var(--brand); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* 자사 신청 매뉴얼 버튼 — 딥블루 채움.
   하단 상담 CTA(옐로)와 색을 나눠 서로 경쟁하지 않게 함 */
.s06__manual {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding: 18px 40px 18px 18px;
    background: var(--brand);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(35, 50, 195, .26);
    position: relative;
    transition: transform .12s ease;
}
.s06__manual:active { transform: scale(.99); }
.s06__manual::after {
    /* 새 창 화살표 */
    content: '';
    position: absolute;
    right: 20px; top: 50%;
    width: 10px; height: 10px;
    margin-top: -6px;
    border: 2px solid rgba(255, 255, 255, .75);
    border-left-width: 0;
    border-bottom-width: 0;
    transform: rotate(45deg);
}
.s06__manual-ico {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
}
.s06__manual-ico svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.8; }
.s06__manual-title {
    display: block;
    font-size: 15.5px;
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
    margin-bottom: 3px;
}
.s06__manual-desc { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .72); line-height: 1.45; }
.s06__link {
    display: block;
    text-align: center;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================
   s07. 미리 챙길 서류
   ========================================================== */
.s07 { background: var(--brand-pale); }
.s07__group {
    background: var(--sheet);
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 18px;
    margin-top: 14px;
}
.s07__group-title { font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }
.s07__group-title em { font-style: normal; color: var(--brand); }
.s07__group ul { list-style: none; }
.s07__group li {
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 5px 0 5px 18px;
    position: relative;
}
.s07__group li::before {
    content: '·';
    position: absolute;
    left: 4px;
    color: var(--brand);
    font-weight: 800;
}
.s07__group li strong { color: var(--ink); font-weight: 600; }

/* ==========================================================
   s08. FAQ 아코디언
   ========================================================== */
.s08__list { list-style: none; margin-top: 20px; border-top: 2px solid var(--ink); }
.s08__item { border-bottom: 1px solid var(--brand-line); }
.s08__q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    padding: 16px 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
}
.s08__q-no {
    font-family: var(--ft-display);
    font-size: 13.5px;
    color: var(--brand);
    flex-shrink: 0;
    width: 20px;
}
.s08__q-icon {
    margin-left: auto;
    flex-shrink: 0;
    width: 18px; height: 18px;
    position: relative;
}
.s08__q-icon::before, .s08__q-icon::after {
    content: '';
    position: absolute;
    background: var(--ink-soft);
    transition: transform .2s ease;
}
.s08__q-icon::before { left: 8px; top: 2px; width: 2px; height: 14px; }
.s08__q-icon::after { left: 2px; top: 8px; width: 14px; height: 2px; }
.s08__item.is-open .s08__q-icon::before { transform: rotate(90deg); }
.s08__a {
    display: none;
    padding: 0 4px 18px 36px;
    font-size: 13.5px;
    color: var(--ink-soft);
}
.s08__item.is-open .s08__a { display: block; }
.s08__a strong { color: var(--ink); }

/* ==========================================================
   s09. 상담 신청 폼
   ========================================================== */
.s09 { background: var(--ink); color: #fff; }
.s09 .sm-eyebrow { color: var(--accent); }
.s09 .sm-eyebrow::after { background: rgba(255, 255, 255, .2); }
.s09 .sm-sub { color: rgba(255, 255, 255, .65); }
.s09__badges { display: flex; gap: 6px; margin: 18px 0 22px; }
.s09__badges span {
    flex: 1;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 6px 4px;
}
.s09__field { margin-bottom: 14px; }
.s09__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: rgba(255, 255, 255, .85); }
.s09__label em { font-style: normal; color: var(--accent); }
.s09__input, .s09__select, .s09__textarea {
    width: 100%;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
    border: 0;
    border-radius: 8px;
    padding: 13px 14px;
}
.s09__textarea { min-height: 80px; resize: vertical; }
.s09__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .75);
    margin: 18px 0;
}
.s09__consent input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.s09__consent strong { display: block; color: #fff; font-weight: 700; margin-bottom: 4px; }
.s09__consent span { line-height: 1.7; }
.s09__notice {
    display: none;
    margin-top: 14px;
    background: rgba(255, 233, 108, .12);
    border: 1px dashed var(--accent);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--accent);
}
.s09__notice.is-show { display: block; }

/* ==========================================================
   s10. 고지 · 푸터
   ========================================================== */
.s10 { padding: 32px 24px 40px; background: var(--paper); }
.s10__notes { list-style: none; }
.s10__notes li {
    font-size: 13.5px;
    color: var(--ink-soft);
    padding: 3px 0 3px 14px;
    position: relative;
}
.s10__notes li::before { content: '※'; position: absolute; left: 0; font-size: 13.5px; top: 6px; }
/* 문의처 — 역할별로 분리 표기 */
.s10__contact {
    margin-top: 20px;
    background: var(--sheet);
    border: 1px solid var(--brand-line);
    border-radius: 10px;
    padding: 14px 16px;
}
.s10__contact-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.s10__contact-row + .s10__contact-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--brand-pale); }
.s10__contact-key { flex: 0 0 82px; color: var(--ink-soft); font-size: 13.5px; }
.s10__contact-val { font-weight: 700; color: var(--brand); }
.s10__biz {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--brand-line);
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.7;
}
.s10__biz strong { color: var(--ink); }