@charset "utf-8";
/* ==========================================================================
   IELTS · Founding Members 100 — 페이지 전용 스타일
   - common.css 를 전제로 하며, common.css / ielts-main.css / common.js 는 수정하지 않습니다.
   - 모든 규칙은 .fm-page 스코프 안에서만 작성합니다. (전역·태그 선택자 금지)
   - 브레이크포인트는 common.css 와 동일하게 min-width 768 / 1025 두 개만 사용합니다.
   - 1rem = 10px (common.css 의 html{font-size:62.5%})
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 토큰
   -------------------------------------------------------------------------- */
/* 하단 고정 배너는 #wrap 바깥에 있으므로 토큰 스코프를 함께 부여합니다 */
.fm-page,
.fm-fixed-cta {
    /* ----------------------------------------------------------------
       토큰 — 역할별 4그룹(text / surface / fill / border).
       Figma 컬렉션 `Founding 100` 과 이름이 1:1 로 맞습니다.
       예: Figma `text/point` = CSS `--fm-text-point`

       포인트 색은 최종 시안 확정색 다크 브라운 #7D4E0B 과 크림 #FCEEBF·#FEF8E7 입니다.

       🔴 이 네 개는 common.css 의 --ds-brand-dark / --ds-brand-light 를
       별칭으로 보고 있었는데 자체값으로 끊었습니다. 캠페인 색을 브라운으로
       바꾸려면 그 별칭을 유지할 수 없고(기존 사이트 토큰은 수정 금지),
       Figma `Founding 100` 컬렉션도 같은 이유로 자체값을 씁니다.
       → 그래서 색을 다시 바꿀 때 고칠 곳은 아래 선언부뿐입니다.

       대비 — 브라운은 흰 배경 7.08:1 · 연크림 위 6.67:1 · 크림 위 6.11:1 로
       본문 크기까지 AA 를 넘깁니다. 골드(--fm-text-point-accent)는 흰 배경에서
       1.77:1 이라 **어두운 면 위에서만** 씁니다.
       ---------------------------------------------------------------- */

    /* 글자 */
    --fm-text-default: var(--ds-primary);            /* 본문·제목 */
    --fm-text-sub: var(--ds-secondary);              /* 보조 본문 */
    --fm-text-muted: var(--ds-tertiary);             /* 캡션·라벨·주석 */
    --fm-text-point: #7D4E0B;                        /* 강조 글자 — 다크 브라운 */
    --fm-text-on-fill: var(--ds-invert);             /* 어두운 면 위 글자 */
    --fm-text-on-fill-sub: rgba(255, 255, 255, .78); /* 어두운 면 위 보조 글자 */
    --fm-text-placeholder: #a2acb4;                  /* 플레이스홀더 설명 */
    --fm-text-on-point: #FCEEBF;                     /* 브라운 면 위 글자 — 크림 */
    --fm-text-point-accent: #FFB356;                 /* 어두운 면 위 진한 골드 (흰 배경 금지) */
    --fm-text-point-sub: #FFE091;                    /* 브라운 면 위 강조 글자 — 밝은 골드 */

    /* 면 */
    --fm-surface-default: var(--ds-invert);          /* 페이지·카드 바탕 */
    --fm-surface-subtle: #f6f7f8;                    /* 스텝 카드·안내 박스·FAQ 패널 */
    --fm-surface-point: #FCEEBF;                     /* 강조 면 — 크림 (badge 등) */
    --fm-surface-point-subtle: #FEF8E7;              /* 연크림 섹션 배경 */
    --fm-surface-holder: #fafbfc;                    /* 플레이스홀더 면 */
    --fm-surface-disabled: #c3cbd2;                  /* 비활성 버튼 면 */
    --fm-surface-disabled-on-fill: rgba(255, 255, 255, .38); /* 어두운 면 위 비활성 버튼 */

    /* 채움 — 버튼·배너처럼 색을 넓게 쓰는 면 */
    --fm-fill-point: #7D4E0B;                        /* 버튼·배지·강조 면 */
    --fm-fill-point-sub: #FFE091;                    /* 밝은 골드 면 — MO STEP 배지 */
    --fm-fill-ink: var(--ds-primary);                /* S05 구간 헤더 바 */

    /* 테두리 */
    --fm-border-default: var(--ds-border);
    --fm-border-point: var(--fm-fill-point);         /* 강조 테두리 — 면과 같은 값이어야 해서 별칭 */
    --fm-border-holder: #c3cbd2;                     /* 플레이스홀더 점선 */
    --fm-border-white: var(--ds-invert);             /* 다크 면 위 구분선 */


    /* 라운드 — Figma `Founding 100` 의 `dds-radius/*` 별칭과 1:1 입니다.
       예: Figma `radius/3` = CSS `--fm-radius-3`.
       ⚠️ 컬렉션 모드가 「Default」 하나라 **폭에 따라 바뀌지 않습니다.**
       반응형으로 커지는 라운드(섹션 카드 24→40→60)는 이 스케일이 아니라
       common.css 의 `.template-radius--*` 쪽이라 아래 절에서 직접 씁니다. */
    --fm-radius-1: 0.6rem;
    --fm-radius-2: 1rem;
    --fm-radius-3: 1.8rem;
    --fm-radius-4: 2.4rem;
    --fm-radius-5: 3.2rem;
    --fm-radius-circle: 999px;


    /* 여백 — [DDS] Foundation · Responsive 의 spacing/1~15.
       Figma 변수 `spacing/N` = CSS `--fm-space-N` (1:1).

       ⚠️ 지금은 선언만 해 두고 기존 여백에는 적용하지 않았습니다.
       이 사이트의 여백 기준은 common.css 이고 DDS 스케일과 어긋납니다
       (예: .section-padding 의 PC 상단 84px 은 DDS 스케일에 없는 값).
       기존 값에 억지로 끼우면 태블릿·PC 여백이 실제로 바뀝니다(실측 확인).
       그래서 **새로 만드는 요소에서만** 이 토큰을 씁니다. */
    --fm-space-1: 0.2rem;
    --fm-space-2: 0.4rem;
    --fm-space-3: 0.6rem;
    --fm-space-4: 0.8rem;
    --fm-space-5: 1.2rem;
    --fm-space-6: 1.6rem;
    --fm-space-7: 2rem;
    --fm-space-8: 2.4rem;
    --fm-space-9: 3.2rem;
    --fm-space-10: 4rem;
    --fm-space-11: 4.8rem;
    --fm-space-12: 5.2rem;
    --fm-space-13: 6rem;
    --fm-space-14: 8rem;
    --fm-space-15: 10rem;

    /* 연출용 그라디언트 — Figma 의 COLOR 변수는 단색만 담을 수 있어
       그라디언트는 이 선언부가 유일한 정본입니다. 각도는 Figma
       gradientTransform 을 눈으로 맞춘 근사값입니다.
       ※ 히어로 글로우는 여기 없습니다 — SHADER 층을 CSS 로 못 만들어
         시안에서 배경을 통째로 뽑은 이미지로 대체했습니다(6절 참고). */
    --fm-grad-apply: linear-gradient(150deg, #7F5924 0%, #0B0D11 100%);
    --fm-grad-banner: linear-gradient(100deg, #754A0D 0%, #D9B14C 100%);

    /* 레이아웃 */
    --fm-cta-h: 8rem;

    /* common.css:343 의 * { font-family:"Pretendard" } 는 @font-face 이름과 달라
       시스템 폰트로 폴백됩니다. 이 페이지에서는 실제 로드된 패밀리를 명시합니다. */
    font-family: var(--ds-font-pretendard), "Noto Sans CJK KR", Roboto, sans-serif;
}

@media only screen and (min-width: 768px) {
    .fm-page,
    .fm-fixed-cta {
        --fm-space-1: 0.2rem;
        --fm-space-2: 0.4rem;
        --fm-space-3: 0.8rem;
        --fm-space-4: 1rem;
        --fm-space-5: 1.4rem;
        --fm-space-6: 1.8rem;
        --fm-space-7: 2.2rem;
        --fm-space-8: 3rem;
        --fm-space-9: 3.6rem;
        --fm-space-10: 4.4rem;
        --fm-space-11: 5.2rem;
        --fm-space-12: 6rem;
        --fm-space-13: 8rem;
        --fm-space-14: 9.2rem;
        --fm-space-15: 11.2rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page,
    .fm-fixed-cta {
        --fm-space-1: 0.2rem;
        --fm-space-2: 0.5rem;
        --fm-space-3: 0.8rem;
        --fm-space-4: 1.2rem;
        --fm-space-5: 1.6rem;
        --fm-space-6: 2rem;
        --fm-space-7: 2.4rem;
        --fm-space-8: 3.2rem;
        --fm-space-9: 4rem;
        --fm-space-10: 4.8rem;
        --fm-space-11: 6rem;
        --fm-space-12: 6.8rem;
        --fm-space-13: 8rem;
        --fm-space-14: 10rem;
        --fm-space-15: 12rem;
        --fm-cta-h: 9rem;
    }
}

.fm-page {
    background-color: var(--fm-surface-default);
}

.fm-page * {
    font-family: inherit;
}

/* --------------------------------------------------------------------------
   2. 접근성
   -------------------------------------------------------------------------- */
.fm-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 1rem 1.6rem;
    background: var(--fm-fill-ink);
    color: var(--fm-text-on-fill);
    font-size: 1.4rem;
}

.fm-skip:focus {
    left: 0;
}

.fm-page :focus-visible {
    outline: 2px solid var(--fm-text-point);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .fm-page [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. 헤더 GNB
   이 페이지는 히어로가 밝은 배경이라, 스크롤 여부와 무관하게 항상 밝은 헤더를 씁니다.
   (common.css 는 .header.scroll 일 때만 밝은 헤더가 되는 구조)
   -------------------------------------------------------------------------- */
/* 🔴 헤더는 common.css 기본 동작을 그대로 씁니다 — 덮지 않습니다.
   히어로가 검정이라 시안도 **맨 위에서는 투명 헤더 + 흰 로고·흰 글자**이고,
   스크롤하면 common.css 의 `.header.scroll`(반투명 흰 면 + 어두운 글자)이 받습니다.
   ※ 예전엔 히어로가 밝은 색이라 항상 밝은 헤더로 덮어썼는데, 최종 시안에서
     히어로가 다크로 바뀌면서 그 전제가 깨졌습니다. */

/* 모바일 햄버거 버튼 — 아이콘이 잉크색(#0b0d11) 한 가지뿐인 SVG 라
   투명 헤더(다크 히어로 위)에서는 안 보입니다.
   ✅ 단색 1패스라 filter 로 뒤집어도 잃는 색이 없어서 CSS 로 해결합니다
      (대교 로고는 브랜드 컬러 5색이 섞여 있어 같은 방법을 못 씁니다).
   스크롤해서 흰 헤더가 되면 원래 잉크색으로 돌아갑니다. */
.fm-page .header:not(.scroll) .header-menu__btn .ico-btn__nav-menu::before {
    filter: brightness(0) invert(1);
}

/* common.css 의 #4169e1(다른 페이지 잔재) 만 이 페이지 색으로 되돌립니다.
   ⚠️ 시안에 hover 상태가 없어 색은 제가 정했습니다 —
   투명 헤더(어두운 배경) 위에서는 골드, 밝은 헤더 위에서는 브라운입니다.
   브라운을 검정 위에 그대로 쓰면 2.9:1 이라 안 읽힙니다. */
/* ⚠️ `:not(.fm-nav-btn)` 이 꼭 있어야 합니다 — 이게 없으면 이 규칙이
   「응시권 참여/확인」 버튼보다 우선순위가 높아서, 버튼에 hover 했을 때
   브라운 글자가 골드로 바뀝니다(버튼은 흰 면이라 안 읽힙니다). */
.fm-page .header .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:hover,
.fm-page .header .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:focus,
.fm-page .header .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:active,
.fm-page .header .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu.on {
    background: transparent;
    color: var(--fm-text-point-accent);
    font-weight: 700;
}

.fm-page .header.scroll .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:hover,
.fm-page .header.scroll .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:focus,
.fm-page .header.scroll .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu:active,
.fm-page .header.scroll .header-menu__list > ul > li:not(.fm-nav-btn) .list-menu.on {
    color: var(--fm-text-point);
}

.fm-page .header-menu__list > ul {
    gap: 3.2rem;
}

/* 5번째 메뉴 — 다른 페이지로 가는 버튼.
   「참가 신청하기」(Primary)와 위계를 나누기 위해 Secondary(테두리형)로 둡니다. */
/* 시안 실측 — 흰 면 · 브라운 1px 테두리 · 브라운 글자 · 라운드 10 · 여백 8/16 · Medium */
.fm-page .fm-nav-btn > .list-menu,
.fm-page .fm-nav-btn > .list-menu:hover,
.fm-page .fm-nav-btn > .list-menu:focus,
.fm-page .fm-nav-btn > .list-menu:active,
.fm-page .fm-nav-btn > .list-menu.on {
    display: inline-block;
    padding: .8rem 1.6rem;
    border: 1px solid var(--fm-border-point);
    border-radius: var(--fm-radius-2);
    background: var(--fm-surface-default);
    color: var(--fm-text-point);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.fm-page .fm-nav-btn > .list-menu:hover {
    background: var(--fm-surface-subtle);
}

/* ⚠️ 헤더가 `.scroll` 이 되면 common.css 가 메뉴 글자를 #394046 으로 덮습니다.
   그 선택자(0,4,2)가 위 규칙(0,3,0)보다 세서 버튼 글자까지 회색이 됐습니다.
   버튼만 브라운으로 되돌리려고 같은 헤더 스코프(0,5,2)로 한 번 더 씁니다. */
.fm-page .header .header-menu__list > ul > li.fm-nav-btn > .list-menu,
.fm-page .header .header-menu__list > ul > li.fm-nav-btn > .list-menu:hover,
.fm-page .header .header-menu__list > ul > li.fm-nav-btn > .list-menu:focus,
.fm-page .header .header-menu__list > ul > li.fm-nav-btn > .list-menu:active,
.fm-page .header .header-menu__list > ul > li.fm-nav-btn > .list-menu.on {
    color: var(--fm-text-point);
}

/* 모바일 메뉴 안에서는 풀폭 */
.fm-page .mobile-menu__list .fm-nav-btn > .list-menu {
    display: block;
    width: 100%;
    text-align: center;
}

/* --------------------------------------------------------------------------
   4. 섹션 공통
   -------------------------------------------------------------------------- */
/* 🔴 상단 여백을 주지 않습니다 — 시안은 헤더가 히어로(다크) **위에 겹칩니다.**
   여백을 주면 헤더가 흰 바탕 위에 놓여 흰 로고·흰 메뉴가 안 보입니다.
   히어로 자체 상단 여백(PC 84)이 헤더 높이(66)보다 커서 글자가 가리지 않습니다. */

.fm-page .fm-section {
    background-color: var(--fm-surface-default);
}



/* ── 어두운 바탕 섹션 공통 (히어로 · 신청) ────────────────────────────
   골드(--fm-text-point-accent)는 흰 배경에서 1.77:1 이라
   이 두 섹션 밖으로 내보내지 않습니다. */
.fm-page .fm-section--hero .fm-title,
.fm-page .fm-section--apply .fm-title {
    color: var(--fm-text-on-fill);
}

/* 🔴 시안은 「라벨=흰색 / 값=골드」입니다. 반대로 넣으면 위계가 뒤집힙니다.
   히어로 라벨(강남 디지털평가허브)은 흰색, 신청 eyebrow(APPLY NOW)는 골드입니다. */
.fm-page .fm-section--hero .fm-eyebrow {
    color: var(--fm-text-on-fill);
}

.fm-page .fm-section--apply .fm-eyebrow {
    color: var(--fm-text-point-accent);
}

/* 히어로 리드는 시안이 골드입니다 (강조 문구) */
.fm-page .fm-section--hero .fm-lead {
    color: var(--fm-text-point-accent);
}

.fm-page .fm-section--apply .fm-lead {
    color: var(--fm-text-on-fill);
}

.fm-page .fm-section--hero .fm_footnote,
.fm-page .fm-section--apply .fm_footnote {
    color: var(--fm-text-on-fill-sub);
}

/* 다크 위 플레이스홀더 — 기본 홀더는 밝은 면 기준이라 여기서만 되돌립니다 */
.fm-page .fm-section--hero .fm_holder,
.fm-page .fm-section--apply .fm_holder {
    border-color: var(--fm-surface-disabled-on-fill);
    background: transparent;
}

.fm-page .fm-section--hero .fm_holder__title,
.fm-page .fm-section--apply .fm_holder__title {
    color: var(--fm-text-on-fill);
}

.fm-page .fm-section--hero .fm_holder__desc,
.fm-page .fm-section--apply .fm_holder__desc {
    color: var(--fm-text-on-fill-sub);
}




/* 응시기간·모집방식 — 라벨 흰색 / 값 골드 / 주석 흰색 */
.fm-page .fm-section--hero .fm_facts__label {
    color: var(--fm-text-on-fill);
}

.fm-page .fm-section--hero .fm_facts__value {
    color: var(--fm-text-point-accent);
}

.fm-page .fm-section--hero .fm_facts__note {
    color: var(--fm-text-on-fill);
}

/* 브라운 바탕 위 안내 리스트 (S06) — 불렛도 글자와 같은 흰색입니다.
   ⚠️ 예전엔 ::before 에 background 를 줘서 「·」 뒤에 골드 면이 깔렸습니다. */
.fm-page .fm-section--apply .fm_guide_list > li {
    color: var(--fm-text-on-fill);
}




.fm-page .fm-eyebrow {
    margin-bottom: 1.2rem;
    color: var(--fm-text-muted);
    text-transform: uppercase;
}


.fm-page .fm-title {
    color: var(--fm-text-default);
}



.fm-page .fm-lead {
    margin-top: 1.6rem;
    color: var(--fm-text-sub);
}



/* --------------------------------------------------------------------------
   5. 공용 파츠
   -------------------------------------------------------------------------- */

/* 인라인 텍스트 PC/MO 교체 — common.css 의 .pc-only/.mo-only 는 block 이라
   한 줄 안에서 단어만 바꿀 때는 쓸 수 없습니다. */
.fm-page .fm-pc-txt {
    display: none;
}

.fm-page .fm-mo-txt {
    display: inline;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-pc-txt {
        display: inline;
    }

    .fm-page .fm-mo-txt {
        display: none;
    }
}

.fm-page .fm_holder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: var(--h, 18rem);
    padding: 2rem;
    border: 1px dashed var(--fm-border-holder);
    border-radius: 12px;
    background: var(--fm-surface-holder);
    text-align: center;
}

.fm-page .fm_holder__title {
    color: var(--fm-text-muted);
}

.fm-page .fm_holder__desc {
    color: var(--fm-text-placeholder);
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_holder {
        min-height: var(--h-pc, 30rem);
    }


}

/* 섹션 하단 주석 */
.fm-page .fm_footnote {
    color: var(--fm-text-muted);
}




.fm-page .fm_facts__label {
    color: var(--fm-text-muted);
}

/* 라벨 → 값 → 주석 간격은 시안 전 폭 8 입니다 */
.fm-page .fm_facts__value {
    margin-top: .8rem;
    color: var(--fm-text-default);
}

.fm-page .fm_facts__note {
    margin-top: .8rem;
    color: var(--fm-text-muted);
}



.fm-page .fm-section--hero .fm_footnote {
    text-align: center;
}

/* --------------------------------------------------------------------------
   6. S01 · Hero — 최종 시안 기준 다크 섹션
   -------------------------------------------------------------------------- */
/* 🔴 히어로 배경은 통짜 이미지를 씁니다.
   시안 배경은 ⑴ 검정 ⑵ SHADER 10퍼센트(아래쪽 점 패턴) ⑶ 그라디언트 20퍼센트
   ⑷ 보케 사진 50퍼센트 네 층인데, **SHADER 는 CSS 에 대응 개념이 없습니다.**
   CSS 그라디언트로 근사했더니 웜이 대각선으로 전체에 퍼져 배경이 통째로
   브라운으로 떠 보였습니다(시안은 상단 약 370px 만 웜이고 아래는 잉크로 떨어집니다).
   그래서 시안에서 배경만 통째로 뽑은 이미지를 깝니다.
   * 이미지 아래쪽이 #0E0D11 이라 이어받을 색은 --fm-fill-ink 입니다(이음선이 안 보입니다).
   * 웜 밴드가 고정 픽셀 높이라 폭별로 다른 파일을 씁니다.
   * 📦 배경 3장은 **JPG** 입니다 — 투명 픽셀이 0퍼센트라 알파가 필요 없고,
     PNG 로 두면 PC 907KB / TB 1.3MB 였습니다(JPG 로 60~90퍼센트 줄어듭니다).
     반대로 키비주얼(heroimg_*)은 44~49퍼센트가 완전투명이라 **PNG 를 유지**합니다. */
.fm-page .fm-section--hero {
    position: relative;
    background-color: var(--fm-fill-ink);
    background-image: url(../images/founding100/hero_fullbg_mo.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section--hero {
        background-image: url(../images/founding100/hero_fullbg_tab.jpg);
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm-section--hero {
        background-image: url(../images/founding100/hero_fullbg_pc.jpg);
    }
}

.fm-page .fm-section--hero > .section-inner {
    position: relative;
    z-index: 1;
}

/* 키비주얼 — 문구가 이미지 안에 있어 비율 그대로 폭에 맞춥니다.
   시안 실측 — PC 1047 (컨테이너 1280 안) · TB 697 (컨테이너 744 안, 약 94퍼센트). */
.fm-page .fm_hero_key {
    display: block;
}

.fm-page .fm_hero_key img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_hero_key img {
        max-width: 94%;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_hero_key img {
        max-width: 104.7rem;
        margin: 0 auto;
    }

    /* 🔴 첫 화면에 「모집인원(AI SPEAKING / 50명)」까지 들어오게 합니다.
       실측(1920폭) — 히어로 시작 66 · 키비주얼 150~553 · 인원 라벨 625 · 인원 값 끝 766.
       키비주얼 아래로 인원 값 끝까지가 213px 이고 위쪽 고정분이 150px 이라
       「인원 값 끝 = 363 + 키비주얼 높이」입니다.
       여기에 하단 고정 배너 91px 과 여유를 더해 (뷰포트 - 46rem) 으로 묶습니다.
       비율이 2.754 라 폭으로 환산해 걸었고, 화면이 충분히 크면 시안값 1047 이 이깁니다.
       하한 40rem 은 아주 낮은 창에서 키비주얼이 지나치게 작아지는 것을 막습니다.
       ※ 실측 확인 — 뷰포트 633/713/813/993 에서 모두 인원 값까지 들어옵니다. */
    .fm-page .fm_hero_key img {
        max-width: min(104.7rem, max(40rem, calc((100vh - 46rem) * 2.755)));
    }
}

.fm-page .fm_hero_body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}



/* 이 라벨은 한글입니다 — .fm-eyebrow 의 영문 대문자 트래킹을 풉니다 */
.fm-page .fm_seat_box .fm-eyebrow {
    text-transform: none;
}


.fm-page .fm_seat_box .fm-lead {
    margin-top: .8rem;
}

.fm-page .fm_seat_box__note {
    margin-top: 1.2rem;
    color: var(--fm-text-on-fill);
}

.fm-page .fm_seat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    text-align: center;
}

.fm-page .fm_seat__label {
    color: var(--fm-text-on-fill);
}

.fm-page .fm_seat__value {
    color: var(--fm-text-point-accent);
}

.fm-page .fm_holder--type-img {
    display: flex;
    flex-direction: column;
    gap: 1rem;
	width: 100%;
}
.fm-page .fm_holder--type-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
	border-radius: var(--fm-radius-3);
}
.fm-page .fm_holder--type-img figcaption {
	font-size: 1.4rem;
	color: #8C8C8C;
	text-align: right;
}
@media only screen and (min-width: 768px) {
    .fm-page .fm_holder--type-img img {
        border-radius:var(--fm-radius-5);
    }
}
@media only screen and (min-width: 1025px) {
	.fm-page .fm_holder--type-img {
		max-width: 63.2rem; /* 기본 최대 크기 (PC) 632px */
	}
}

.fm-page .fm_type__body {
    background: var(--fm-surface-default);
}


.fm-page .fm_type__title {
    color: var(--fm-text-default);
}

.fm-page .fm_type__desc {
    margin-top: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--fm-border-default);
    color: var(--fm-text-sub);
}


/* 카드 안 4행 상세 */
.fm-page .fm_spec {
    display: flex;
    flex-direction: column;
}

/* 시안 — 라벨 뱃지와 값이 MO 에서도 한 줄입니다(세로로 쌓지 않습니다). */
.fm-page .fm_spec__row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--fm-border-default);
}

.fm-page .fm_spec__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.fm-page .fm_spec__label {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 2.6rem;
    padding: 0 1.2rem;
    border-radius: 40px;
    background: var(--fm-surface-point);
    color: var(--fm-text-point);
    white-space: nowrap;
}

.fm-page .fm_spec__value {
    color: var(--fm-text-sub);
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_spec__row {
        gap: 1.6rem;
    }

    .fm-page .fm_spec__label {
        flex: none;
        width: 9rem;
        justify-content: center;
    }

    .fm-page .fm_spec__value {
        flex: 1 1 auto;
    }
}

/* 섹션 하단 주석 박스 (S02 · S05 공용) — 시안은 흰 면 + 얇은 테두리 + r16 이고
   왼쪽에 안내 아이콘이 붙습니다. */
/* 시안 실측 — 안쪽 여백 상하 16 / 좌우 24 (세 폭 동일), 아이콘↔글자 16,
   위쪽 간격 MO 20 · TB·PC 40, 라운드 MO·TB 8 · PC 16. */
.fm-page .fm_type_note,
.fm-page .fm_join_note {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2rem;
    padding: 1.6rem 2.4rem;
    border: 1px solid var(--fm-border-default);
    border-radius: .8rem;
    background: var(--fm-surface-default);
    color: var(--fm-text-sub);
    text-align: left;
}

/* 안내 아이콘 — 24×24 를 2배수로 받았습니다(배경 투명·잉크색). */
.fm-page .fm_type_note::before,
.fm-page .fm_join_note::before {
    content: '';
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../images/founding100/icon_info.png) no-repeat center / contain;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_type_note,
    .fm-page .fm_join_note {
        margin-top: 4rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_type_note,
    .fm-page .fm_join_note {
        border-radius: 1.6rem;
    }
}

/* --------------------------------------------------------------------------
   8. S03 · WHAT YOU GET
   -------------------------------------------------------------------------- */
/* MO 는 가로형 1줄 카드, 768 이상에서 세로형 4분할 */
.fm-page .fm-br-pc {
    display: none;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-br-pc {
        display: inline;
    }
}



/* 장식만 둡니다 — 방향·간격·여백은 16절이 정본입니다.
   라운드는 시안 MO 18 / TB·PC 24. */
/* 장식만 둡니다 — 방향·간격·여백은 16절이 정본입니다.
   01~03 은 흰 면 + 포인트 테두리, 04 만 브라운 면입니다(기획 주석 기준).
   라운드는 시안 MO 18 / TB·PC 24. */
.fm-page .fm_benefit {
    border: 1px solid var(--fm-border-point);
    border-radius: var(--fm-radius-3);
    background: var(--fm-surface-default);
}

/* 번호는 보조 회색, 문구만 브라운입니다(시안) */
.fm-page .fm_benefit__no {
    color: var(--fm-text-sub);
}

.fm-page .fm_benefit__text {
    color: var(--fm-text-point);
}

/* 04 — 브라운 면 (번호 흰색 · 문구 밝은 골드) */
.fm-page .fm_benefit--point {
    border-color: transparent;
    background: var(--fm-fill-point);
}

.fm-page .fm_benefit--point .fm_benefit__no {
    color: var(--fm-text-on-fill);
}

.fm-page .fm_benefit--point .fm_benefit__text {
    color: var(--fm-text-point-sub);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_benefit {
        border-radius: var(--fm-radius-4);
    }
}


/* --------------------------------------------------------------------------
   9. S04 · ABOUT THE PROGRAM (＋ 주요 혜택)
   -------------------------------------------------------------------------- */
/* 시안 기준 이 섹션만 연크림 바탕입니다 */
.fm-page .fm-section--about {
    background-color: var(--fm-surface-point-subtle);
}





/* 트랙 카드 — 시안 기준 브라운 면. 안쪽 글자는 크림·흰색을 씁니다.
   방향·간격·여백은 16절이 정본입니다. */
.fm-page .fm_track {
    border: 1px solid transparent;
    border-radius: var(--fm-radius-4);
    background: var(--fm-fill-point);
}

/* 트랙 아이콘 — 56×56 을 2배수로 받았습니다.
   ⚠️ 이 두 장은 **배경이 투명**이라(타일 아이콘 4종과 달리 칩이 안 구워져 있습니다)
   브라운 카드 위에 그냥 얹으면 갈색 글리프가 배경에 묻혀 안 보입니다.
   그래서 시안의 흰 칩(라운드 6)을 여기서 깝니다.
   → 나중에 칩까지 포함해 다시 내보내면 이 background·border-radius 두 줄을 지우면 됩니다. */
.fm-page .fm_track__icon {
    display: block;
    flex-shrink: 0;
    width: 4rem;
    height: 4rem;
    border-radius: var(--fm-radius-1);
    background: var(--fm-surface-default);
}

/* 시안 실측 — MO 40 · TB 48 · PC 52. (에셋은 56 기준 2배수라 축소해도 선명합니다) */
@media only screen and (min-width: 768px) {
    .fm-page .fm_track__icon {
        width: 4.8rem;
        height: 4.8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_track__icon {
        width: 5.2rem;
        height: 5.2rem;
    }
}


.fm-page .fm_track__head {
    display: flex;
    align-items: baseline;
    gap: .8rem;
}

/* 시안은 이 두 줄에 밝은 골드(--fm-text-point-sub)를 씁니다.
   브라운 면 위 대비 5.50:1 로 본문 크기까지 AA 를 넘깁니다. */
.fm-page .fm_track__name {
    color: var(--fm-text-point-sub);
}

/* 인원을 프로그램명보다 크게 (기획 — 시각 우선순위) */
.fm-page .fm_track__seat {
    color: var(--fm-text-point-sub);
}

/* 브라운 면 위 본문 — 흰색 7.08:1 */
.fm-page .fm_track__desc {
    color: var(--fm-text-on-fill);
}



/* 안내 박스 (S04 중복 참여 · S06 등에서 공용) */
/* 시안엔 상자가 없습니다 — 배경·테두리·라운드 없이 목록만 놓입니다 */
.fm-page .fm_notice {
    margin-top: 1.6rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_notice {
        margin-top: 2.4rem;
    }
}

.fm-page .fm_notice_list > li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--fm-text-sub);
}

.fm-page .fm_notice_list > li + li {
    margin-top: .8rem;
}

.fm-page .fm_notice_list > li::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fm-text-muted);
}

@media only screen and (min-width: 1025px) {

    .fm-page .fm_notice_list > li::before {
        top: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   10. S05 · HOW TO JOIN
   -------------------------------------------------------------------------- */
/* 타임라인 · PHASE 묶음 · 하단 주석 사이 간격 — 시안 MO 20 · TB·PC 40 (전부 같은 값) */
.fm-page .fm_join_wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_join_wrap {
        gap: 4rem;
    }
}

/* ⚠️ 이 래퍼는 flex gap 으로 간격을 만듭니다. 주석 박스가 자기 margin-top 까지
   들고 있으면 **두 값이 더해져** MO 에서 20 이 아니라 44 가 됩니다. */
.fm-page .fm_join_wrap > .fm_join_note {
    margin-top: 0;
}


/* 🔴 MO 는 칸 하나가 72px 뿐이라 좌우 여백을 0 으로 두고 STEP 배지를
   칸 전체 폭으로 깝니다(시안). TB 부터 좌우 여백이 생깁니다. */
.fm-page .fm_phase_pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .8rem;
    /* 좌우는 거의 0 — 골드 띠를 칸 폭 끝까지 씁니다(브라운 테두리만 남깁니다). */
    padding: 1.2rem 0.01rem;
    border: 1px solid var(--fm-border-point);
    border-radius: var(--fm-radius-2);
    background: var(--fm-surface-holder);
    text-align: center;
}

/* 🔴 STEP 라벨은 폭마다 **다른 디자인**입니다.
   MO — 칸 전체를 가로지르는 **밝은 골드 띠 + 브라운 글자**, 각진 모서리.
   TB·PC — **브라운 pill + 흰 글자**(라운드 999).
   같은 마크업 하나로 미디어쿼리만 갈라서 처리합니다. */
.fm-page .fm_phase_pill__step {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: var(--fm-fill-point-sub);
    color: var(--fm-text-point);
}

.fm-page .fm_phase_pill__name {
    color: var(--fm-text-default);
    white-space: nowrap;
}

/* 마지막 칸(완료)만 크림 면 + 브라운 글자 (시안) */
.fm-page .fm_phase_overview > li:last-child {
    background: var(--fm-surface-point-subtle);
}

.fm-page .fm_phase_overview > li:last-child .fm_phase_pill__name {
    color: var(--fm-text-point);
}

@media only screen and (min-width: 768px) {

    /* 칸 사이 여백에 화살표 아이콘을 놓습니다 (24×24 를 2배수로 받았습니다).
       시안은 칸 사이를 48 로 벌리고 그 정중앙에 24 짜리 화살표를 둡니다
       (간격이 아이콘보다 좁으면 화살표가 앞 칸 위에 겹칩니다).
       MO 는 칸 간격이 8 뿐이라 시안에서도 화살표가 없습니다 — 768 부터만 나옵니다. */
    .fm-page .fm_phase_pill + .fm_phase_pill::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -3.6rem;
        width: 2.4rem;
        height: 2.4rem;
        transform: translateY(-50%);
        background: url(../images/founding100/icon_arrowright.png) no-repeat center / contain;
    }

    .fm-page .fm_phase_pill {
        align-items: center;
        gap: .4rem;
        padding: 1.8rem 1rem;
    }

    /* TB 부터 브라운 pill 로 되돌립니다 */
    .fm-page .fm_phase_pill__step {
        display: inline-flex;
        padding: .2rem 1.2rem;
        border-radius: var(--fm-radius-circle);
        background: var(--fm-fill-point);
        color: var(--fm-text-on-fill);
    }
}

/* PC 만 배지와 단계명이 한 줄입니다 (MO·TB 는 세로로 쌓입니다 — 시안) */
@media only screen and (min-width: 1025px) {
    .fm-page .fm_phase_pill {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }
}



/* 🔴 시안은 MO 에서도 「STEP 01 · 신청 · 설명」이 **한 줄**입니다.
   360 기준 안쪽 폭 272 에 52＋12＋35＋12＋151 ＝ 262 로 10px 여유가 있습니다.
   (시안값 gap 16 을 그대로 쓰면 2px 밖에 안 남아 폰트 렌더링 차이로 바로 접힙니다.)
   그보다 좁은 화면에서는 설명이 자기 칸 안에서 두 줄로 접힙니다. */
.fm-page .fm_phase__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem 1.2rem;
    padding: 1.2rem 2rem;
    border-radius: var(--fm-radius-2);
    /* 시안은 브라운 면입니다 (구 와이어는 잉크 블랙이었습니다) */
    background: var(--fm-fill-point);
}

.fm-page .fm_phase__step {
    color: var(--fm-text-on-fill);
}

.fm-page .fm_phase__name {
    color: var(--fm-text-on-fill);
}

/* 설명은 남는 칸을 채우고, 모자라면 자기 칸 안에서 접힙니다
   (예전엔 flex-basis 100% 라 MO 에서 항상 다음 줄로 내려갔습니다) */
.fm-page .fm_phase__desc {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fm-text-on-point);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_phase__head {
        flex-wrap: nowrap;
        gap: 1.6rem;
        padding: 1.6rem 2.4rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_phase__head {
        padding: 2rem;
    }
}

/* 스텝 카드 */
/* PHASE 헤더 → 스텝 목록 간격 — 시안 MO 5 · TB·PC 12 */
.fm-page .fm_step_list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: .5rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_step_list {
        margin-top: 1.2rem;
    }
}

/* 🔴 시안은 MO 에서도 번호가 본문 **왼쪽**입니다(예전엔 위아래로 쌓았습니다).
   실측 — MO 안쪽 여백 16 · 번호↔본문 간격 5 / TB·PC 여백 20 · 간격 16. */
.fm-page .fm_step {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    /* 시안엔 면이 없습니다 (구 와이어는 연회색 면이었습니다).
       항목 사이만 얇은 선으로 나눕니다. */
    padding: 1.6rem;
    border: 0;
    border-radius: .8rem;
}

.fm-page .fm_step__no {
    flex: none;
    width: 4.4rem;
}

.fm-page .fm_step__body {
    flex: 1 1 auto;
    min-width: 0;
}

.fm-page .fm_step__no {
    color: var(--fm-text-muted);
}

.fm-page .fm_step__title {
    display: block;
    color: var(--fm-text-default);
}

/* 제목 → 설명 간격 — 시안 MO 4 · TB 6 · PC 8 */
.fm-page .fm_step__desc {
    margin-top: .4rem;
    color: var(--fm-text-sub);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_step {
        gap: 1.6rem;
        padding: 2rem;
    }

    .fm-page .fm_step__desc {
        margin-top: .6rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_step__desc {
        margin-top: .8rem;
    }
}


/* 08 단계만 강조 */
/* 항목 사이 구분선 — 마지막 뒤에는 넣지 않습니다 */
.fm-page .fm_step + .fm_step {
    border-top: 1px solid var(--fm-border-default);
}

/* 08 강조 — 크림 면 + 브라운 테두리 (구 와이어는 흰 면 + 2px 였습니다) */
.fm-page .fm_step--point {
    border: 1px solid var(--fm-border-point);
    border-radius: 18px;
    background: var(--fm-surface-point-subtle);
}

.fm-page .fm_step + .fm_step--point {
    border-top: 1px solid var(--fm-border-point);
}

.fm-page .fm_step--point .fm_step__no,
.fm-page .fm_step--point .fm_step__title {
    color: var(--fm-text-point);
}




/* --------------------------------------------------------------------------
   11. S08 · LOCATION
   -------------------------------------------------------------------------- */
.fm-page .fm_center_wrap {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_center_wrap {
        gap: 3.2rem;
    }
}



/* 센터 사진 — 시안 858x529(전달 파일 1716x1058)의 비율을 고정합니다.
   PC 는 68fr 이라 높이가 약 527px 로 잡히고, 옆 지도 카드가 그 높이에 맞춰
   늘어나 시안(529)과 같아집니다. 라운드는 지도 카드와 같은 10px. */
.fm-page .fm_center_photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 858 / 529;
    object-fit: cover;
    border-radius: 10px;
}

.fm-page .fm_holder--map {
    --h: 22rem;
    --h-pc: 38rem;
    height: var(--h);
    padding: 0; /* 지도가 빈틈없이 차도록 기본 패딩 제거 */
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_holder--map {
        height: var(--h-pc);
    }
}



/* 시안 — 흰 면 + 브라운 1px 테두리 + 라운드 18. 세 폭 모두 같습니다.
   여백은 16절이 정본입니다. */
.fm-page .fm_feature {
    border: 1px solid var(--fm-border-point);
    border-radius: var(--fm-radius-3);
    background: var(--fm-surface-default);
}

/* 타일 아이콘 — 연크림 칩 배경과 라운드가 PNG 안에 함께 구워져 있어
   CSS 로 면을 다시 그리지 않습니다. 상자 크기는 16절이 정본입니다. */
.fm-page .fm_feature__icon {
    display: block;
    flex: none;
}


.fm-page .fm_feature__title {
    color: var(--fm-text-default);
}

/* 시안 — 타일 설명은 본문색입니다(제목과 같은 잉크). */
.fm-page .fm_feature__desc {
    color: var(--fm-text-default);
}


/* 주소 박스 */
/* 지도 — 시안은 주소 박스를 지도 **위에** 얹어 하단에 붙입니다.
   ⚠️ 실제 지도를 embed 로 바꿀 때, 이 바가 지도 좌하단의 제공사 로고·저작권
   표시를 가리면 이용약관 위반입니다. 그때는 지도 높이를 늘려 표시가 바 위로
   올라오게 하거나, 바를 지도 아래로 내려야 합니다. */
/* 시안처럼 지도＋주소를 **하나의 테두리 카드**로 묶습니다.
   테두리·라운드는 바깥 래퍼가 갖고, 안쪽 지도는 면만 채웁니다. */
.fm-page .fm_map {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fm-border-default);
    border-radius: 10px;
}

.fm-page .fm_map .fm_holder--map {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
}

/* 지도를 덜 가리도록 오버레이 안에서는 좁은 폭에서도 한 줄로 둡니다
   (MO 에서 세로로 쌓으면 바가 91px 이 되어 지도 220 의 41퍼센트를 덮습니다) */
.fm-page .fm_map .fm_address {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10; /* 카카오 지도 레이어 위로 올라오도록 추가 */
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem 1.6rem;
    border-width: 1px 0 0;
    border-radius: 0;
    background: var(--fm-surface-default);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_map .fm_address {
        gap: 1.2rem;
        padding: 1.6rem 2.4rem;
    }
}

.fm-page .fm_address {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.8rem 1.6rem;
    border: 1px solid var(--fm-border-default);
    border-radius: 10px;
    background: var(--fm-surface-subtle);
}

.fm-page .fm_address__label {
    color: var(--fm-text-muted);
}

.fm-page .fm_address__value {
    color: var(--fm-text-default);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_address {
        flex-direction: row;
        align-items: center;
        gap: 2.4rem;
        padding: 2rem 2.4rem;
    }

    .fm-page .fm_address__label {
        flex: none;
    }

}

/* --------------------------------------------------------------------------
   12. S06 · APPLY NOW
   -------------------------------------------------------------------------- */
/* 시안 기준 브라운 → 잉크 그라디언트 바탕입니다 */
.fm-page .fm-section--apply {
    background: var(--fm-grad-apply);
}

/* 시안의 「CTA 영역」 — 응시기간·모집인원과 버튼만 크림 패널에 담습니다.
   안내 리스트는 패널 밖 브라운 바탕에 놓입니다. */
.fm-page .fm_apply_panel {
    background: var(--fm-surface-point-subtle);
}

@media only screen and (min-width: 1025px) {

    .fm-page .fm_apply_panel > * {
        flex: 1 1 0;
        min-width: 0;
    }
}




/* 🔴 시안은 **라벨이 보조 회색 · 값이 브라운**입니다 (반대로 들어가 있었습니다).
   「IELTS 응시기간」「모집인원」 = --fm-text-sub
   「2026. 10. 12 ~ 11. 13」「AI Speaking 50명 / AI Writing 50명」 = --fm-text-point */
.fm-page .fm_apply_panel .fm_facts__label,
.fm-page .fm_apply_panel .fm_facts__note {
    color: var(--fm-text-sub);
}

.fm-page .fm_apply_panel .fm_facts__value {
    color: var(--fm-text-point);
}

/* 패널 안에서는 상자를 다시 그리지 않습니다.
   시안 세로 간격 — 버튼 ↔ 안내문 MO 24 · TB·PC 40, 안내문 안쪽 두 줄은 8. */
.fm-page .fm_apply_panel .fm_cta_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    border: 0;
    padding: 0;
}

.fm-page .fm_cta_box__text {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_apply_panel .fm_cta_box {
        gap: 4rem;
    }
}

/* CTA 패널 → 안내 리스트 간격 — 시안 MO 20 · TB·PC 40 */
.fm-page .fm_apply_wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_apply_wrap {
        gap: 4rem;
    }
}

/* 이 상자는 크림 패널(.fm_apply_panel) 안에서만 쓰입니다 —
   테두리·여백은 패널 쪽 규칙이 담당하고 여기서는 정렬만 둡니다.
   (예전엔 상자 장식을 여기 뒀는데 패널 규칙에 항상 덮여 실행되지 않았습니다) */
.fm-page .fm_cta_box {
    text-align: center;
}

.fm-page .fm_cta_box__desc {
    color: var(--fm-text-sub);
}

.fm-page .fm_cta_box__before {
    margin-top: 1.2rem;
    color: var(--fm-text-sub);
}

.fm-page .fm_cta_box__note {
    margin-top: 1rem;
    color: var(--fm-text-muted);
}


/* 신청 버튼 */
/* ⚠️ 위쪽 margin 을 주지 않습니다 — 지금은 부모(.fm_cta_box)가 flex gap 으로
   간격을 만들어서, margin 을 얹으면 CTA 박스 안쪽 버튼 위에 20px 이 더 붙습니다. */
.fm-page .fm_cta,
.fm-fixed-cta .fm_cta {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 1.6rem 2.4rem;
    border: 0;
    border-radius: 8px;
    background: var(--fm-fill-point);
    color: var(--fm-text-on-fill);
    font-family: inherit;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}

.fm-page .fm_cta:hover {
    opacity: .9;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_cta {
        /* 시안 버튼 최대폭 400 */
        max-width: 40rem;
        padding: 1.8rem 2.4rem;
    }
}

/* 비활성 — disabled 속성 대신 시각 처리만 합니다 (클릭은 받아 모달을 띄웁니다) */
.fm-page .fm_cta[aria-disabled="true"],
.fm-fixed-cta .fm_cta[aria-disabled="true"] {
    background: var(--fm-surface-disabled);
    color: var(--fm-text-on-fill);
    cursor: default;
}

.fm-page .fm_cta[aria-disabled="true"]:hover {
    opacity: 1;
}

/* 상태별 문구 노출 */
.fm-page .fm_cta_box__before {
    display: none;
}

body[data-fm-state="before"] .fm-page .fm_cta_box__before {
    display: block;
}

body[data-fm-state="closed"] .fm-page .fm_cta_box__note {
    display: none;
}

/* 참가 확정자 전용 */
.fm-page .fm_cfrm_prt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    gap: 2rem;
	line-height: 1.4;
}
.fm-page .fm_cfrm_prt_title {
    display: inline-flex;
	flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    overflow: hidden;
}
.fm-page .fm_cfrm_prt_badge {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: .6rem 1.6rem;
    border-radius: var(--fm-radius-circle);
    background: var(--fm-surface-point);
    overflow: hidden;
}
.fm-page .fm_cfrm_prt_badge_text {
    color: var(--fm-text-point);
    font-size: 1.2rem;
    font-weight: 700;
	line-height: 1;
    word-break: keep-all;
}
.fm-page .fm_cfrm_prt_desc {
    color: var(--fm-text-on-fill);
    font-size: 1.4rem;
    font-weight: 400;
    word-break: keep-all;
}
@media only screen and (min-width: 768px) {
	.fm-page .fm_cfrm_prt_badge_text {
		font-size: 1.6rem;
	}
	.fm-page .fm_cfrm_prt_desc {
		font-size: 1.8rem;
	}
}
.fm-page .fm_cfrm_prt_cards {
    display: grid;
	grid-template-columns: 1fr;
    gap: 2rem;
	width: 100%;
    overflow: hidden;
}
@media only screen and (min-width: 768px) {
	.fm-page .fm_cfrm_prt_cards {
		grid-template-columns: 1fr 1fr;
	}
	.fm-page .fm_cfrm_prt_card:last-child {
		grid-column: 1 / -1;
	}
}
@media only screen and (min-width: 1210px) {
	.fm-page .fm_cfrm_prt_cards {
		grid-template-columns: repeat(3, 1fr);
    }
	.fm-page .fm_cfrm_prt_card:last-child {
		grid-column: auto;
	}
}
.fm-page .fm_cfrm_prt_card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    padding: 2.4rem;
    border-radius: 1.6rem;
    background: var(--fm-surface-point-subtle);
    overflow: hidden;
}
.fm-page .fm_cfrm_prt_card--highlight {
    outline: 3px solid #BA7517;
    outline-offset: -3px;
}
.fm-page .fm_cfrm_prt_step {
    color: #8C6B40;
    font-size: 1.3rem;
    font-weight: 700;
    word-break: keep-all;
}
.fm-page .fm_cfrm_prt_name {
    color: var(--fm-text-point);
    font-size: 2.6rem;
    font-weight: 700;
    word-break: keep-all;
}
.fm-page .fm_cfrm_prt_summary {
    align-self: stretch;
    color: #59544D;
    font-size: 1.4rem;
    font-weight: 400;
    word-break: keep-all;
	margin-bottom: auto;
}
.fm-page .fm_cfrm_prt_spacer {
	align-self: stretch;
    height: .8rem;
}
.fm-page .fm_cfrm_prt_btn {
	display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
	margin-top: 1.8rem;
    padding: 1.6rem 1.2rem;
    border-radius: 1.2rem;
	background: var(--fm-text-point);
    overflow: hidden;
}
.fm-page .fm_cfrm_prt_btn.disabled {
	background: #D1D1D6;
	cursor: not-allowed;
}
.fm-page .fm_cfrm_prt_btn_icon {
    flex: none
}
.fm-page .fm_cfrm_prt_btn_text {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    word-break: keep-all;
}
.fm-page .fm_cfrm_prt_note {
    color: #F2E5CC;
    font-size: 1.4rem;
    font-weight: 400;
    word-break: keep-all;
}
@media only screen and (min-width: 768px) {
	.fm-page .fm_cfrm_prt_step {
		font-size: 1.4rem;
	}
	.fm-page .fm_cfrm_prt_summary {
		font-size: 1.7rem;
	}
	.fm-page .fm_cfrm_prt_btn_text {
		font-size: 1.7rem;
	}
	.fm-page .fm_cfrm_prt_note  {
		font-size: 1.5rem;
	}
}

/* 신청 안내 리스트 — 시안은 MO 에서 좌우 여백이 없고 TB 부터 32 가 붙습니다 */
.fm-page .fm_guide_list {
    padding: 0;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_guide_list {
        padding: 0 3.2rem;
    }
}

.fm-page .fm_guide_list > li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--fm-text-sub);
}

.fm-page .fm_guide_list > li + li {
    margin-top: 1.2rem;
}

.fm-page .fm_guide_list > li::before {
    content: "·";
    position: absolute;
    top: 0;
    left: .2rem;
}


/* --------------------------------------------------------------------------
   13. S09 · FAQ
   -------------------------------------------------------------------------- */
/* 시안 기준 이 섹션도 연크림 바탕입니다 */
.fm-page .fm-section--faq {
    background-color: var(--fm-surface-point-subtle);
}

/* 크림 바탕 위 답변 패널은 흰 면으로 띄웁니다 */
.fm-page .fm-section--faq .fm_faq_item__a {
    background: var(--fm-surface-default);
}

/* 시안은 첫 질문 위·마지막 질문 아래에 선이 없습니다 — 항목 사이만 나눕니다 */
.fm-page .fm_faq_item {
    border-bottom: 1px solid var(--fm-border-default);
}

.fm-page .fm_faq_item:last-child {
    border-bottom: 0;
}

.fm-page .fm_faq_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    width: 100%;
    padding: 1.8rem 0;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.fm-page .fm_faq_btn__text {
    color: var(--fm-text-default);
}

/* 화살표 — 이미지 없이 CSS 로 그립니다 */
.fm-page .fm_faq_btn__icon {
    flex: none;
    position: relative;
    width: 2.4rem;
    height: 2.4rem;
}

.fm-page .fm_faq_btn__icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -6px 0 0 -5px;
    border-right: 2px solid var(--fm-text-muted);
    border-bottom: 2px solid var(--fm-text-muted);
    transform: rotate(45deg);
    transition: transform .2s ease-in-out;
}

.fm-page .fm_faq_btn[aria-expanded="true"] .fm_faq_btn__icon::before {
    margin-top: -1px;
    transform: rotate(-135deg);
}

.fm-page .fm_faq_item__a {
    padding: 1.8rem 2rem;
    margin-bottom: 1.8rem;
    border-radius: 10px;
    background: var(--fm-surface-subtle);
}

.fm-page .fm_faq_item__a[hidden] {
    display: none;
}

.fm-page .fm_faq_item__a p {
    color: var(--fm-text-sub);
}

.fm-page .fm_faq_item__a p + p {
    margin-top: 1rem;
}

.fm-page .fm_faq_bullet > li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--fm-text-sub);
}

.fm-page .fm_faq_bullet > li + li {
    margin-top: .6rem;
}

/* 불렛을 첫 줄 세로 가운데에 둡니다.
   고정 top 값(구 1.05rem)은 폭마다 행간이 달라 어긋났습니다 —
   글리프에 본문과 같은 line-height 를 주면 폭과 무관하게 첫 줄에 맞습니다. */
.fm-page .fm_faq_bullet > li::before {
    content: "•";
    position: absolute;
    top: 0;
    left: .2rem;
    line-height: inherit;
    color: var(--fm-text-muted);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_faq_btn {
        padding: 2.4rem 0;
    }


    .fm-page .fm_faq_item__a {
        padding: 2.4rem 2.8rem;
        margin-bottom: 2.4rem;
    }

}


/* --------------------------------------------------------------------------
   14. 하단 고정 배너
   ※ 클래스명에 .cta-wrap 을 쓰지 않습니다 (common.js:98 이 조작함)
   -------------------------------------------------------------------------- */
.fm-fixed-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    background: var(--fm-grad-banner);
    transition: transform .25s ease-in-out;
}

/* 푸터에 닿으면 필수 표기를 가리지 않도록 내려갑니다 */
.fm-fixed-cta.is-hidden {
    transform: translateY(100%);
}

/* MO 시안 — 문구가 위, 버튼이 아래 전체폭. 위 12 / 좌우 20 / 아래 16, 간격 8. */
.fm-fixed-cta__inner {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    max-width: 140rem;
    margin: 0 auto;
    padding: 1.2rem 2rem 1.6rem;
}

.fm-fixed-cta__copy {
    color: var(--fm-text-on-fill);
    text-align: center;
}

/* 배너 버튼 — 시안은 흰 면 + 브라운 1px 테두리 + 브라운 글자이고
   글자 오른쪽에 화살표 아이콘(24×24, 2배수)이 붙습니다. */
.fm-fixed-cta .fm_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 1.3rem 2rem;
    border: 1px solid var(--fm-border-point);
    border-radius: var(--fm-radius-2);
    background: var(--fm-surface-default);
    color: var(--fm-text-point);
}

.fm-fixed-cta .fm_cta::after {
    content: "";
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    background: url(../images/founding100/icon_arrowcta.png) no-repeat center / contain;
}

/* 비활성 구간에는 화살표를 숨깁니다 (면이 회색이라 아이콘만 뜹니다) */
.fm-fixed-cta .fm_cta[aria-disabled="true"]::after {
    display: none;
}

.fm-fixed-cta .fm_cta:hover {
    opacity: .9;
}

.fm-fixed-cta .fm_cta[aria-disabled="true"] {
    background: var(--fm-surface-disabled-on-fill);
    color: var(--fm-text-on-fill-sub);
}

@media only screen and (min-width: 768px) {
    .fm-fixed-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2.4rem;
        padding: 1.8rem 3.2rem;
    }

    .fm-fixed-cta__copy {
        text-align: left;
    }

    .fm-fixed-cta .fm_cta {
        width: auto;
        flex: none;
        min-width: 20rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-fixed-cta__inner {
        padding: 2rem 4.8rem;
    }

}

/* 상태별 배너 카피 */
.fm-fixed-cta__copy-closed {
    display: none;
}

body[data-fm-state="closed"] .fm-fixed-cta__copy-open {
    display: none;
}

body[data-fm-state="closed"] .fm-fixed-cta__copy-closed {
    display: inline;
}

/* 마지막 콘텐츠와 푸터 필수 표기가 배너에 가리지 않도록 여백 확보 */
.fm-page .footer {
    padding-bottom: calc(var(--fm-cta-h) + 4rem);
}

/* --------------------------------------------------------------------------
   15. 타입 스케일 — 최종 시안 실측이 정본
   * 이 절이 font-size 의 유일한 정본입니다. 다른 절엔 font-size 를 두지 않습니다
     (섹션마다 흩어져 있던 94건을 여기로 모았습니다).
   * PC 와 TB 의 크기가 같습니다 — 시안 실측 결과 FAQ 답변 하나만 다릅니다.
     그래서 램프는 MO 와 768 두 단이고, 1025 는 예외 1건에만 있습니다.
   * MO(360)는 시안이 없어 파생값입니다. 표시 크기는 시안의 60~70퍼센트,
     본문은 13~14px 로 잡았습니다.
   -------------------------------------------------------------------------- */

/* MO — 파생 */
.fm-page .fm-eyebrow {
    font-size: 1.3rem;   /* eyebrow */
}

.fm-page .fm-title {
    font-size: 2.4rem;   /* 섹션 제목 */
}

.fm-page .fm-lead {
    font-size: 1.7rem;   /* 리드 — MO 파생 */
}

.fm-page .fm_seat_box .fm-eyebrow {
    font-size: 1.4rem;   /* 히어로 라벨 — MO 파생 */
}

.fm-page .fm_seat_box__note {
    font-size: 1.3rem;   /* 히어로 주석 — MO 파생 */
}

.fm-page .fm_seat__label {
    font-size: 1.3rem;   /* 인원 라벨 — MO 파생 */
}

.fm-page .fm_seat__value {
    font-size: 3.8rem;   /* 인원 값 — MO 파생 */
}

.fm-page .fm_facts__label {
    font-size: 1.3rem;   /* facts 라벨 */
}

.fm-page .fm_facts__value {
    font-size: 1.8rem;   /* facts 값 */
}

.fm-page .fm_facts__note {
    font-size: 1.3rem;   /* facts 주석 */
}

.fm-page .fm_track__name {
    font-size: 1.7rem;   /* 트랙 이름 */
}

.fm-page .fm_track__seat {
    font-size: 2.0rem;   /* 트랙 인원 */
}

.fm-page .fm_track__desc {
    font-size: 1.4rem;   /* 트랙 설명 */
}

.fm-page .fm_benefit__no {
    font-size: 1.4rem;   /* 혜택 번호 */
}

.fm-page .fm_benefit__text {
    font-size: 1.6rem;   /* 혜택 문구 */
}

.fm-page .fm_type__title {
    font-size: 1.8rem;   /* 유형 제목 */
}

.fm-page .fm_type__desc {
    font-size: 1.4rem;   /* 유형 설명 */
}

.fm-page .fm_spec__label {
    font-size: 1.2rem;   /* 유형 배지 */
}

.fm-page .fm_spec__value {
    font-size: 1.4rem;   /* 유형 스펙 값 */
}

.fm-page .fm_type_note {
    font-size: 1.3rem;   /* 유형 주석 */
}

.fm-page .fm_phase_pill__step {
    font-size: 1.2rem;   /* 타임라인 STEP */
}

.fm-page .fm_phase_pill__name {
    font-size: 1.5rem;   /* 타임라인 이름 */
}

.fm-page .fm_phase__step {
    font-size: 1.3rem;   /* PHASE STEP */
}

.fm-page .fm_phase__name {
    font-size: 1.8rem;   /* PHASE 이름 */
}

.fm-page .fm_phase__desc {
    font-size: 1.3rem;   /* PHASE 설명 */
}

.fm-page .fm_step__no {
    font-size: 2.0rem;   /* 단계 번호 */
}

.fm-page .fm_step__title {
    font-size: 1.6rem;   /* 단계 제목 */
}

.fm-page .fm_step__desc {
    font-size: 1.4rem;   /* 단계 설명 */
}

.fm-page .fm_feature__title {
    font-size: 1.6rem;   /* 타일 제목 */
}

.fm-page .fm_feature__desc {
    font-size: 1.3rem;   /* 타일 설명 */
}

.fm-page .fm_address__label {
    font-size: 1.3rem;   /* 주소 라벨 */
}

.fm-page .fm_address__value {
    font-size: 1.6rem;   /* 주소 값 */
}

.fm-page .fm_faq_btn__text {
    font-size: 1.5rem;   /* FAQ 질문 */
}

.fm-page .fm_faq_item__a p,
.fm-page .fm_faq_bullet > li {
    font-size: 1.4rem;   /* FAQ 답변 */
}

.fm-page .fm_cta {
    font-size: 1.6rem;   /* 신청 버튼 */
}

.fm-fixed-cta .fm_cta {
    font-size: 1.5rem;   /* 배너 버튼 */
}

.fm-fixed-cta__copy {
    font-size: 1.5rem;   /* 배너 카피 */
}

.fm-page .fm_cta_box__desc {
    font-size: 1.4rem;   /* 신청 안내 */
}

.fm-page .fm_cta_box__note,
.fm-page .fm_cta_box__before {
    font-size: 1.3rem;   /* 신청 주석 */
}

.fm-page .fm_guide_list > li {
    font-size: 1.4rem;   /* 안내 리스트 */
}

.fm-page .fm_notice_list > li {
    font-size: 1.3rem;   /* 안내 박스 */
}

.fm-page .fm_footnote {
    font-size: 1.3rem;   /* 섹션 주석 */
}

.fm-page .fm_holder__title {
    font-size: 1.4rem;   /* 홀더 제목 */
}

.fm-page .fm_holder__desc {
    font-size: 1.3rem;   /* 홀더 설명 */
}

/* TB·PC 공통 — 시안 실측 */
@media only screen and (min-width: 768px) {
    .fm-page .fm-eyebrow {
        font-size: 1.8rem;   /* eyebrow */
    }

    .fm-page .fm-title {
        font-size: 3.8rem;   /* 섹션 제목 */
    }

    .fm-page .fm-lead {
        font-size: 2.0rem;   /* 리드 — TB 시안 */
    }

    .fm-page .fm_seat_box .fm-eyebrow {
        font-size: 1.6rem;   /* 히어로 라벨 — TB 시안 */
    }

    .fm-page .fm_seat_box__note {
        font-size: 1.5rem;   /* 히어로 주석 — TB 시안 */
    }

    .fm-page .fm_seat__label {
        font-size: 1.6rem;   /* 인원 라벨 — TB 시안 */
    }

    .fm-page .fm_seat__value {
        font-size: 5.2rem;   /* 인원 값 — TB 시안 */
    }

    .fm-page .fm_facts__label {
        font-size: 1.4rem;   /* facts 라벨 */
    }

    .fm-page .fm_facts__value {
        font-size: 3.0rem;   /* facts 값 */
    }

    .fm-page .fm_facts__note {
        font-size: 1.4rem;   /* facts 주석 */
    }

    .fm-page .fm_track__name {
        font-size: 2.4rem;   /* 트랙 이름 */
    }

    .fm-page .fm_track__seat {
        font-size: 3.0rem;   /* 트랙 인원 */
    }

    .fm-page .fm_track__desc {
        font-size: 1.8rem;   /* 트랙 설명 */
    }

    .fm-page .fm_benefit__no {
        font-size: 1.8rem;   /* 혜택 번호 */
    }

    .fm-page .fm_benefit__text {
        font-size: 2.4rem;   /* 혜택 문구 */
    }

    .fm-page .fm_type__title {
        font-size: 3.0rem;   /* 유형 제목 */
    }

    .fm-page .fm_type__desc {
        font-size: 1.8rem;   /* 유형 설명 */
    }

    .fm-page .fm_spec__label {
        font-size: 1.4rem;   /* 유형 배지 */
    }

    .fm-page .fm_spec__value {
        font-size: 1.8rem;   /* 유형 스펙 값 */
    }

    .fm-page .fm_type_note {
        font-size: 1.8rem;   /* 유형 주석 */
    }

    .fm-page .fm_phase_pill__step {
        font-size: 1.8rem;   /* 타임라인 STEP */
    }

    .fm-page .fm_phase_pill__name {
        font-size: 2.4rem;   /* 타임라인 이름 */
    }

    .fm-page .fm_phase__step {
        font-size: 1.8rem;   /* PHASE STEP */
    }

    .fm-page .fm_phase__name {
        font-size: 3rem;   /* PHASE 이름 — 시안 Bold 30px */
    }

    .fm-page .fm_phase__desc {
        font-size: 1.8rem;   /* PHASE 설명 */
    }

    .fm-page .fm_step__no {
        font-size: 3.0rem;   /* 단계 번호 */
    }

    .fm-page .fm_step__title {
        font-size: 2.4rem;   /* 단계 제목 */
    }

    .fm-page .fm_step__desc {
        font-size: 1.8rem;   /* 단계 설명 */
    }

    .fm-page .fm_feature__title {
        font-size: 2.0rem;   /* 타일 제목 */
    }

    .fm-page .fm_feature__desc {
        font-size: 1.4rem;   /* 타일 설명 */
    }

    .fm-page .fm_address__label {
        font-size: 1.4rem;   /* 주소 라벨 */
    }

    .fm-page .fm_address__value {
        font-size: 2.0rem;   /* 주소 값 */
    }

    .fm-page .fm_faq_btn__text {
        font-size: 2.0rem;   /* FAQ 질문 */
    }

    .fm-page .fm_faq_item__a p,
    .fm-page .fm_faq_bullet > li {
        font-size: 1.5rem;   /* FAQ 답변 */
    }

    .fm-page .fm_cta {
        font-size: 3.0rem;   /* 신청 버튼 */
    }

    .fm-fixed-cta .fm_cta {
        font-size: 2.2rem;   /* 배너 버튼 */
    }

    .fm-fixed-cta__copy {
        font-size: 3.0rem;   /* 배너 카피 */
    }

    .fm-page .fm_cta_box__desc {
        font-size: 2.0rem;   /* 신청 안내 */
    }

    .fm-page .fm_cta_box__note,
    .fm-page .fm_cta_box__before {
        font-size: 1.4rem;   /* 신청 주석 */
    }

    .fm-page .fm_guide_list > li {
        font-size: 1.8rem;   /* 안내 리스트 */
    }

    .fm-page .fm_notice_list > li {
        font-size: 1.8rem;   /* 안내 박스 */
    }

    .fm-page .fm_footnote {
        font-size: 1.4rem;   /* 섹션 주석 */
    }

    .fm-page .fm_holder__title {
        font-size: 1.6rem;   /* 홀더 제목 */
    }

    .fm-page .fm_holder__desc {
        font-size: 1.4rem;   /* 홀더 설명 */
    }
}

/* PC 전용 예외 */
@media only screen and (min-width: 1025px) {
    .fm-page .fm_seat_box .fm-eyebrow {
        font-size: 2.0rem;   /* 히어로 라벨 — PC 시안 */
    }
    .fm-page .fm-lead {
        font-size: 2.4rem;   /* 리드 — PC 시안 */
    }
    .fm-page .fm_seat_box__note {
        font-size: 1.8rem;   /* 히어로 주석 — PC 시안 */
    }
    .fm-page .fm_seat__label {
        font-size: 2.0rem;   /* 인원 라벨 — PC 시안 */
    }
    .fm-page .fm_seat__value {
        font-size: 6.6rem;   /* 인원 값 — PC 시안 */
    }

    .fm-page .fm_faq_item__a p,
    .fm-page .fm_faq_bullet > li {
        font-size: 2.0rem;   /* FAQ 답변 */
    }
}

/* ── 굵기 — 시안은 Pretendard Bold(700)와 Medium(500) 두 단만 씁니다 ──────
   구 CSS 는 800(ExtraBold)과 400(Regular)을 섞어 써서 시안과 달라 보였습니다.
   * Pretendard Variable 이 로드돼 있어 500/700 이 그대로 나옵니다.
   * 히어로 리드는 시안이 Bold 입니다(구 CSS 는 400 이었습니다).
   * 크기와 마찬가지로 이 절이 굵기의 유일한 정본입니다. */

.fm-page .fm-eyebrow,
.fm-page .fm-title,
.fm-page .fm-lead,
.fm-page .fm_seat__label,
.fm-page .fm_seat__value,
.fm-page .fm_facts__label,
.fm-page .fm_facts__value,
.fm-page .fm_track__name,
.fm-page .fm_track__seat,
.fm-page .fm_benefit__no,
.fm-page .fm_benefit__text,
.fm-page .fm_type__title,
.fm-page .fm_spec__label,
.fm-page .fm_phase_pill__step,
.fm-page .fm_phase_pill__name,
.fm-page .fm_phase__step,
.fm-page .fm_phase__name,
.fm-page .fm_step__no,
.fm-page .fm_step__title,
.fm-page .fm_feature__title,
.fm-page .fm_address__label,
.fm-page .fm_cta,
.fm-fixed-cta__copy,
.fm-fixed-cta .fm_cta {
    font-weight: 700;
}

.fm-page .fm_seat_box__note,
.fm-page .fm_facts__note,
.fm-page .fm_track__desc,
.fm-page .fm_type__desc,
.fm-page .fm_spec__value,
.fm-page .fm_type_note,
.fm-page .fm_phase__desc,
.fm-page .fm_step__desc,
.fm-page .fm_feature__desc,
.fm-page .fm_address__value,
.fm-page .fm_faq_btn__text,
.fm-page .fm_cta_box__desc,
.fm-page .fm_cta_box__note,
.fm-page .fm_cta_box__before,
.fm-page .fm_footnote,
.fm-page .fm_holder__title,
.fm-page .fm_holder__desc,
.fm-page .fm_faq_item__a p,
.fm-page .fm_faq_bullet > li,
.fm-page .fm_guide_list > li,
.fm-page .fm_notice_list > li {
    font-weight: 500;
}

/* ── 자간 — 시안은 전부 -0.32px 입니다 ────────────────────────────────
   구 CSS 는 대문자 라벨(AI SPEAKING · STEP 01)에 +.06em 트래킹을 넣었는데
   시안엔 그런 게 없습니다. 크기와 무관하게 한 값입니다. */

.fm-page .fm-eyebrow,
.fm-page .fm-lead,
.fm-page .fm-title,
.fm-page .fm_address__label,
.fm-page .fm_address__value,
.fm-page .fm_benefit__no,
.fm-page .fm_benefit__text,
.fm-page .fm_cta,
.fm-page .fm_cta_box__before,
.fm-page .fm_cta_box__desc,
.fm-page .fm_cta_box__note,
.fm-page .fm_facts__label,
.fm-page .fm_facts__note,
.fm-page .fm_facts__value,
.fm-page .fm_faq_btn__text,
.fm-page .fm_feature__desc,
.fm-page .fm_feature__title,
.fm-page .fm_footnote,
.fm-page .fm_holder__desc,
.fm-page .fm_holder__title,
.fm-page .fm_phase__desc,
.fm-page .fm_phase__name,
.fm-page .fm_phase__step,
.fm-page .fm_phase_pill__name,
.fm-page .fm_phase_pill__step,
.fm-page .fm_seat__label,
.fm-page .fm_seat__value,
.fm-page .fm_seat_box__note,
.fm-page .fm_spec__label,
.fm-page .fm_spec__value,
.fm-page .fm_step__desc,
.fm-page .fm_step__no,
.fm-page .fm_step__title,
.fm-page .fm_track__desc,
.fm-page .fm_track__name,
.fm-page .fm_track__seat,
.fm-page .fm_type__desc,
.fm-page .fm_type__title,
.fm-page .fm_type_note,
.fm-page .fm_faq_item__a p,
.fm-page .fm_faq_bullet > li,
.fm-page .fm_guide_list > li,
.fm-page .fm_notice_list > li,
.fm-fixed-cta__copy {
    letter-spacing: -.032rem;
}

/* ── 행간 — 시안 실측 비율 ────────────────────────────────────────────
   제목 계열 150~153퍼센트 · 본문·라벨 계열 157~170퍼센트.
   px 이 아니라 비율로 두어 MO 축소 크기에서도 같은 리듬이 나오게 했습니다. */

.fm-page .fm-title,
.fm-page .fm_facts__value,
.fm-page .fm_type__title,
.fm-page .fm_seat__value,
.fm-page .fm_track__seat,
.fm-page .fm_step__no {
    line-height: 153%;
}

.fm-page .fm-lead,
.fm-page .fm_step__title,
.fm-page .fm_phase__name,
.fm-page .fm_phase_pill__name,
.fm-page .fm_track__name,
.fm-page .fm_cta {
    line-height: 150%;
}

.fm-page .fm_benefit__text {
    line-height: 167%;
}

.fm-page .fm_seat__label,
.fm-page .fm_feature__title,
.fm-page .fm_faq_btn__text,
.fm-page .fm_address__value,
.fm-page .fm_cta_box__desc {
    line-height: 170%;
}

.fm-page .fm-eyebrow,
.fm-page .fm_seat_box__note,
.fm-page .fm_track__desc,
.fm-page .fm_type__desc,
.fm-page .fm_spec__value,
.fm-page .fm_type_note,
.fm-page .fm_phase__desc,
.fm-page .fm_step__desc,
.fm-page .fm_phase__step,
.fm-page .fm_phase_pill__step,
.fm-page .fm_benefit__no {
    line-height: 161%;
}

.fm-page .fm_facts__label,
.fm-page .fm_facts__note,
.fm-page .fm_feature__desc,
.fm-page .fm_address__label,
.fm-page .fm_spec__label,
.fm-page .fm_cta_box__note,
.fm-page .fm_cta_box__before,
.fm-page .fm_footnote,
.fm-page .fm_holder__title,
.fm-page .fm_holder__desc {
    line-height: 157%;
}

.fm-page .fm_faq_item__a p,
.fm-page .fm_faq_bullet > li {
    line-height: 170%;
}

.fm-page .fm_guide_list > li,
.fm-page .fm_notice_list > li {
    line-height: 161%;
}

/* --------------------------------------------------------------------------
   16. 레이아웃 — 최종 시안 실측이 정본
   * 이 절이 배치(방향·열수·간격·섹션 여백·테두리)의 유일한 정본입니다.
   * 전환은 두 단 — 768(TB)·1025(PC). 시안 실측 결과:
       TB 에서 1열로 내려가는 것 : 히어로 인원단 · 트랙 · 센터 타일 · 사진|지도 · 신청 패널
       TB 에서도 2열을 지키는 것 : 응시기간 · 유형 블록 · PHASE 쌍
       TB 에서 2x2 로 접히는 것   : 혜택 4 · STEP 타임라인 4
   * MO(360)는 시안이 없어 파생 — 전부 1열, 혜택·타임라인만 2x2 를 지킵니다.
   * 시안엔 섹션 구분선이 없습니다(배경색이 경계를 만듭니다).
   -------------------------------------------------------------------------- */

/* 섹션 상하·좌우 여백 — 시안이 common.css 기본값과 같습니다.
   MO 32/24 · TB 60/32 · PC 84/48 이라 대부분 그대로 씁니다.
   PC 하단만 다릅니다 — common.css 는 전 섹션 100 을 주는데
   시안은 히어로·ABOUT 만 100 이고 나머지는 84 입니다. */
@media only screen and (min-width: 1025px) {
    .fm-page .fm-section {
        padding-bottom: 8.4rem;
    }
}

/* 히어로·ABOUT 만 예외입니다.
   🔴 MO 시안에서 **ABOUT 크림 카드가 화면 폭 전체(360)** 를 씁니다 — 좌우 여백이
   없고 카드 자체 안쪽 여백 24 가 컨테이너(312)를 만듭니다. 그래서 MO 에서만
   섹션 여백을 0 으로 두고 카드가 화면 끝까지 닿게 합니다.
   히어로는 위 60 · 아래 60(= 카드까지의 간격)이라 common.css 의 32 를 덮습니다. */
.fm-page .fm-section--hero {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.fm-page .fm-section--about {
    padding: 0;
    /* 크림 카드가 화면 폭을 꽉 채우면서 하단만 24 로 굴러가는데, 그 뒤의
       잉크 배경은 각져 있어서 라운드 안쪽에 검은 귀가 남습니다.
       ⚠️ 히어로가 아니라 **이 섹션**에 걸어야 합니다 — 히어로도 잉크라
       거기 걸면 검정 블록 한가운데에 흰 자국이 생깁니다.
       (Figma 는 S04 가 S01 의 자식이라 S01 하단 라운드 = 이 자리입니다)

       ⚠️ 카드와 **같은 24 로 두면 안 됩니다.** 두 곡선이 정확히 겹쳐서
       안티에일리어싱 틈으로 잉크가 1px 실선처럼 새어 나옵니다(8배 확대로 확인).
       잉크를 **더 둥글게(32)** 깎아 크림 곡선 안쪽으로 확실히 밀어 넣습니다.
       크림이 위에 불투명하게 얹히므로 더 깎아도 보이는 변화는 없고, 새는 것만 사라집니다. */
    border-radius: 0 0 3.2rem 3.2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section--about {
        /* TB·PC 는 카드가 안쪽으로 들어가 잉크가 액자처럼 보이는 게 시안입니다 */
        padding: 6rem 3.2rem;
        border-radius: 0;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm-section--hero {
        padding-top: 8.4rem;
        padding-bottom: 10rem;
    }

    .fm-page .fm-section--about {
        padding: 8.4rem 4.8rem 10rem;
    }
}

/* 섹션 헤드 → 콘텐츠 간격 — 시안 MO 20 · TB·PC 40 */
.fm-page .fm-section__head {
    margin-bottom: 2rem;
}

/* 예외 — ABOUT 카드 안의 두 헤더(「Founding Members 100이란?」·「주요 혜택」)는
   섹션 레벨 헤더가 아니라 카드 안쪽 소제목이라 시안이 TB·PC 에서 24 입니다. */
@media only screen and (min-width: 768px) {
    .fm-page .fm-section--about .fm-section__head {
        margin-bottom: 2.4rem;
    }
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section__head {
        margin-bottom: 4rem;
    }
}

/* ── S01 히어로 모집안내 + 인원 ────────────────────────────────
   시안의 이 박스는 상자가 아니라 아래 1px 선 하나입니다. */
.fm-page .fm_seat_box {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--fm-border-white);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_seat_box {
        gap: 4rem;
        padding: 3.2rem 4.8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_seat_box {
        flex-direction: row;
        align-items: center;
    }

    .fm-page .fm_seat_box__lead {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* 🔴 TB 만 두 항목을 양 끝으로 벌립니다(좌우 20 안쪽에서 space-between).
   MO 는 360 에서 두 칸 사이가 110px 까지 벌어져 한 쌍으로 안 읽혀 가운데로 모읍니다.
   PC 만 리드 옆에 붙는 고정 폭 블록이라 **간격 80** 으로 모읍니다.
   ⚠️ 이 폭이 곧 리드 문단의 폭을 정합니다 — 여기가 좁으면 리드가 넓어져서
   시안의 「…경험할 / 100명을 모집합니다.」 줄바꿈이 「…100명을 / 모집합니다.」로 밀립니다.
   시안 실측 — 인원 블록 404 (20 + 142 + 80 + 142 + 20), 리드 740, 둘 사이 40. */
.fm-page .fm_seat_list {
    display: flex;
    justify-content: center;
    gap: 8rem;
}

/* TB 는 폭이 넉넉해 시안대로 좌우 20 안쪽에서 양 끝으로 벌립니다.
   (space-between 에서 gap 은 최소 간격으로만 남습니다 — 위 8rem 그대로 씁니다) */
@media only screen and (min-width: 768px) {
    .fm-page .fm_seat_list {
        justify-content: space-between;
        padding: 0 2rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_seat_list {
        flex: 0 0 auto;
        justify-content: center;
    }
}

/* ── 응시기간 · 모집방식 (히어로 · 신청 공용) ──────────────────
   시안엔 바깥 상자가 없고 가운데 구분선만 있습니다. */
.fm-page .fm_facts {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.6rem 0;
}

.fm-page .fm_facts__item {
    padding: .8rem 0 1.6rem;
}

/* MO 는 두 항목이 세로로 쌓이고 **구분선이 없습니다**(시안 확인).
   구분선은 TB 부터 2열이 되면서 가운데 세로선으로만 나타납니다. */

@media only screen and (min-width: 768px) {
    .fm-page .fm_facts {
        grid-template-columns: 1fr 1fr;
    }

    /* 시안 실측 — 좌 48 / 우 24. 양쪽 48 을 주면 응시기간 날짜가 두 줄로 깨집니다
       (TB 안쪽 폭이 284 여야 30px 한 줄이 들어갑니다). */
    .fm-page .fm_facts__item {
        padding: .8rem 2.4rem 1.6rem 4.8rem;
    }

    .fm-page .fm_facts__item + .fm_facts__item {
        border-top: 0;
        border-left: 1px solid var(--fm-border-default);
    }
}

/* 다크 히어로 위에서는 구분선을 흰 계열로 (TB 부터 생기는 세로선만) */
@media only screen and (min-width: 768px) {
    .fm-page .fm-section--hero .fm_facts__item + .fm_facts__item {
        border-left-color: var(--fm-surface-disabled-on-fill);
    }
}

/* ── S04 ABOUT — 다크 위에 뜬 크림 카드 ────────────────────────
   시안에서 이 영역은 풀블리드 밴드가 아니라 히어로 안의 라운드 카드입니다. */
/* 히어로 배경 이미지의 아래쪽이 잉크(#0E0D11)라 여기도 같은 색으로 이어받습니다.
   순검정으로 두면 경계에 띠가 보입니다.
   시안엔 이 구간에 아주 미세한 점 패턴이 있는데(명도차 1) 육안으로 구분되지 않아
   색만 이어받았습니다. */
.fm-page .fm-section--about {
    background-color: var(--fm-fill-ink);
}

/* 카드 안쪽 여백 — 시안 MO 40/24 · TB 60/32 · PC 60/48 */
.fm-page .fm-section--about .section-inner {
    padding: 4rem 2.4rem;
    border-radius: 2.4rem;
    background: var(--fm-surface-point-subtle);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section--about .section-inner {
        /* 시안 실측 — TB 카드 안쪽 폭 704 (= 768 − 32×2) */
        padding: 6rem 3.2rem;
        border-radius: 4rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm-section--about .section-inner {
        padding: 6rem 4.8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm-section--about .section-inner {
        /* 카드는 일반 컨테이너(1280)보다 넓습니다 — 시안 1400 */
        max-width: 140rem;
        border-radius: 6rem;
    }
}

/* 카드 안 두 묶음(트랙군 / 혜택군) 사이 간격 — 시안 68 */
.fm-page .fm-section--about .fm_track_wrap .fm-section__head {
    margin-top: 4rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section--about .fm_track_wrap .fm-section__head {
        margin-top: 6.8rem;
    }
}

.fm-page .fm_track_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_track_list {
        grid-template-columns: 1fr 1fr;
    }
}

/* 🔴 MO 는 아이콘이 본문 **위**(세로), TB 부터 아이콘이 **왼쪽**(가로)입니다.
   실측 — MO 안쪽 여백 24 균일·간격 16 / TB·PC 상하 32 좌우 40·간격 20. */
.fm-page .fm_track {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* MO 아이콘↔본문 5 (시안 — 아이콘이 40 으로 줄면서 16 → 5) */
    gap: .5rem;
    padding: 2.4rem;
}

.fm-page .fm_track__body {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

/* 프로그램명 → 설명 간격 — 시안 MO 5 · TB·PC 12 */
.fm-page .fm_track__desc {
    margin-top: .5rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_track {
        flex-direction: row;
        /* 아이콘이 56 → 48·52 로 줄면서 시안의 아이콘↔본문 간격도 20 → 24 가 됐습니다 */
        gap: 2.4rem;
        padding: 3.2rem 4rem;
    }

    .fm-page .fm_track__body {
        width: auto;
    }

    .fm-page .fm_track__desc {
        margin-top: 1.2rem;
    }
}

/* 혜택 4 — MO 1열 / TB 2x2 / PC 4열 */
.fm-page .fm_benefit_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_benefit_list {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_benefit_list {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 🔴 번호 위치가 폭마다 다릅니다 —
   MO 글자 왼쪽·세로 가운데 / TB 글자 왼쪽·위 맞춤 / PC 글자 위. */
.fm-page .fm_benefit {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem 2.4rem;
}

.fm-page .fm_benefit__no {
    flex: none;
}

.fm-page .fm_benefit__text {
    flex: 1 1 auto;
    min-width: 0;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_benefit {
        align-items: flex-start;
        padding: 3.2rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_benefit {
        flex-direction: column;
    }
}

/* ── S02 유형 — 흰 면이 다크 위로 둥글게 올라옵니다 (시안 radius 60) ── */
.fm-page .fm-section--types {
    border-radius: 2.4rem 2.4rem 0 0;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm-section--types {
        border-radius: 4rem 4rem 0 0;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm-section--types {
        border-radius: 6rem 6rem 0 0;
    }
}

.fm-page .fm_type_list {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_type_list {
        gap: 6.8rem;
    }
}

/* 유형 하나 = 이미지 + 본문. TB 에서도 2열을 지킵니다(시안 376|376). */
.fm-page .fm_type {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_type {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    /* General Training 은 이미지를 오른쪽으로 뒤집습니다 */
    .fm-page .fm_type--reverse .fm_holder--type-img {
        order: 2;
    }

    .fm-page .fm_type--reverse .fm_type__body {
        order: 1;
    }
}

/* 🔴 시안엔 이 본문에 카드(테두리·면·라운드)가 없습니다 — 세 폭 모두 글자만 놓입니다.
   MO 는 좌우 여백도 0 이고 위 24 만 띄웁니다. TB 부터 좌우 32 · 상하 24. */
.fm-page .fm_type__body {
    display: flex;
    flex-direction: column;
    padding: 2.4rem 0 0;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_type__body {
        padding: 2.4rem 3.2rem;
    }
}

/* ── S05 참여 방법 ─────────────────────────────────────────── */
/* MO 도 4열 한 줄입니다 (시안 — 72px 칸 4개, 간격 8).
   minmax(0,1fr) 이라야 칸 안의 nowrap 글자가 칸을 밀어내지 않습니다. */
.fm-page .fm_phase_overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

@media only screen and (min-width: 768px) {
    /* 화살표(24)가 들어갈 자리라 시안이 칸 사이를 48 로 벌립니다 */
    .fm-page .fm_phase_overview {
        gap: 4.8rem;
    }
}

/* PHASE 4개 = 2x2. TB 에서도 2열을 지킵니다(시안 372|372). */
.fm-page .fm_join {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_join {
        grid-template-columns: 1fr 1fr;
    }
}

/* STEP 라벨·단계명은 줄바꿈하지 않습니다 (TB 2열에서 「STEP」/「01」 로 쪼개졌습니다) */
.fm-page .fm_phase__step,
.fm-page .fm_phase__name,
.fm-page .fm_phase_pill__step,
.fm-page .fm_phase_pill__name {
    white-space: nowrap;
}

/* ── S06 신청 ──────────────────────────────────────────────── */
/* 시안 실측 — 안쪽 여백 MO 40/24 · TB 48 · PC 60/48,
   두 묶음 사이 간격 MO 48 · TB 32 · PC 32(가로). */
.fm-page .fm_apply_panel {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    padding: 4rem 2.4rem;
    border-radius: .8rem;
    background: var(--fm-surface-point-subtle);
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_apply_panel {
        gap: 3.2rem;
        padding: 4.8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_apply_panel {
        flex-direction: row;
        align-items: center;
        padding: 6rem 4.8rem;
        border-radius: 1.6rem;
    }

    /* 시안은 두 칸 사이를 브라운 세로선으로 나눕니다 (PC 에서만) */
    .fm-page .fm_apply_panel .fm_facts {
        border-right: 1px solid var(--fm-border-point);
    }

    .fm-page .fm_apply_panel > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* 패널 안에서는 응시기간·모집인원이 항상 세로로 쌓입니다 (시안) */
.fm-page .fm_apply_panel .fm_facts {
    grid-template-columns: 1fr;
    padding: 0;
}

.fm-page .fm_apply_panel .fm_facts__item {
    padding: 0;
}

/* 응시기간 ↔ 모집인원 간격.
   🔴 시안의 gap 값(TB 8 · PC 12)만 보면 안 됩니다 — 위 블록이 **고정 높이(113)**
   라서 날짜 아래에 빈 공간이 더 붙습니다. 눈에 보이는 실제 간격은
   MO 32 · TB 53 · PC 42 입니다. 여기 값은 그 실측을 토큰 스케일로 맞춘 것입니다
   (TB 48 ≈ 53 · PC 40 ≈ 42). gap 값만 넣으면 날짜와 「모집인원」이 붙어 보입니다. */
.fm-page .fm_apply_panel .fm_facts__item + .fm_facts__item {
    margin-top: 3.2rem;
    border: 0;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_apply_panel .fm_facts__item + .fm_facts__item {
        margin-top: 4.8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_apply_panel .fm_facts__item + .fm_facts__item {
        margin-top: 4rem;
    }
}

/* ── S08 센터 ──────────────────────────────────────────────── */
.fm-page .fm_feature_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_feature_list {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.2rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_feature_list {
        gap: 2.4rem;
    }
}

/* 🔴 MO 는 「아이콘＋제목」이 한 줄, 설명이 다음 줄로 접힙니다(시안 — flex-wrap).
   TB 부터는 아이콘·제목·설명이 세로로 쌓입니다. */
.fm-page .fm_feature {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.2rem;
}

.fm-page .fm_feature__title {
    flex: 1 1 auto;
    min-width: 0;
}

.fm-page .fm_feature__desc {
    flex: 1 1 100%;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_feature {
        display: block;
    }

    .fm-page .fm_feature__title {
        margin-top: .8rem;
    }

    .fm-page .fm_feature__desc {
        margin-top: .8rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_feature__title,
    .fm-page .fm_feature__desc {
        margin-top: 1.6rem;
    }
}

/* 타일 아이콘 상자 — MO 40 / TB·PC 48 */
.fm-page .fm_feature__icon {
    width: 4rem;
    height: 4rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_feature__icon {
        width: 4.8rem;
        height: 4.8rem;
    }
}

/* 타일 안쪽 여백 — 시안 MO 16 · TB 16 · PC 상하 20 좌우 32 */
.fm-page .fm_feature {
    padding: 1.6rem;
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_feature {
        padding: 2rem 3.2rem;
    }
}

/* 센터 사진과 지도 — PC 에서만 나란히 (시안 858 : 398) */
.fm-page .fm_center_media {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media only screen and (min-width: 768px) {
    .fm-page .fm_center_media {
        gap: 2.4rem;
    }
}

@media only screen and (min-width: 1025px) {
    .fm-page .fm_center_media {
        grid-template-columns: minmax(0, 68fr) minmax(0, 32fr);
    }
}