/* ============================================================
   FluxHub — Site (마케팅) 스타일시트
   ------------------------------------------------------------
   범위: 홈 / 데모 / 요금제 등 마케팅 페이지 전용.
   대시보드(main.css, .flux- 접두사)와 이름공간이 겹치지 않도록
   전부 .fs- 접두사를 쓴다. 두 파일은 같은 화면에 함께 로드되지
   않는다(functions.php 에서 배타적으로 큐잉).

   톤: 소비자용 라이트. 검정이 주인공, 딥 에메랄드(#047857)는 포인트 1색.
   구분은 1px 선이 아니라 회색 웰 면으로 만든다. 여백을 크게 쓰고
   라운드를 과감하게(20~40px) 준다. 스티커·말풍선·원형 화살표 같은
   장식은 허용하되 목적이 있을 때만 쓴다.
   ============================================================ */

/* ======================== Tokens ========================
   톤 기준: 소비자용 라이트. 검정이 주인공이고 에메랄드는 포인트 1색.
   구분은 1px 선이 아니라 "회색 웰 면"으로 만든다.
   실측 기준값(2026-08-25): 섹션 패딩 120px, 컨테이너 1040px,
   헤드→본문 gap 60px, 3열 그리드 gap 60px/24px.
   ======================== */
:root {
    --fs-bg:            #ffffff;
    --fs-bg-soft:       #f5f5f5;   /* 카드 웰 */
    --fs-bg-sunken:     #f2f3f5;   /* 보조 웰 (무채색. 옛 푸르스름 #f3f6fb는 에메랄드와 부딪혀 뺐다) */

    --fs-ink:           #000000;
    --fs-ink-2:         #5d5f6d;
    --fs-ink-3:         #727582;   /* 흰 배경 대비 5.0:1 (AA) */
    --fs-ink-4:         #9298a6;   /* 대비 3.0:1 — 큰 글자·장식 전용 */

    /* 선은 최후 수단이다. 면으로 나눌 수 없을 때만 쓴다. */
    --fs-line:          #ededf0;
    --fs-line-strong:   #dcdee3;

    /* 포인트: 딥 에메랄드 (2026-09-14 웹쟁이 톤 개편, 옛 파랑 대체).
       흰 글자 5.48:1, #f5f5f5 위 5.03:1, soft 위 포인트 글자 4.97:1. */
    --fs-accent:        #047857;
    --fs-accent-ink:    #0c5c40;
    --fs-accent-soft:   #e9f7f1;
    /* 슬라이드 카드·마이페이지 현황판 면. 흰 글자 대비 밝은 끝 8.01:1.
       이 면 위 포커스 테두리는 흰색으로 한다(에메랄드는 1.5:1로 안 보인다). */
    --fs-accent-grad:   linear-gradient(135deg, #04241a, #0c5c40);

    /* 액센트 칩 — 아이콘·뱃지·일러스트 면에만 쓴다. 텍스트 금지. */
    --fs-green:         #17bd66;
    --fs-purple:        #c145ff;
    --fs-teal:          #06bfb9;
    --fs-indigo:        #654cf0;

    /* 다크 블록 (푸터·쇼케이스) — 순검정 */
    --fs-dark:        #000000;
    --fs-dark-2:      #111111;
    --fs-dark-line:   #262626;
    --fs-dark-ink:    #ffffff;
    --fs-dark-ink-2:  #9298a6;

    --fs-r-sm:   12px;
    --fs-r:      20px;
    --fs-r-lg:   24px;
    --fs-r-xl:   30px;
    --fs-r-2xl:  40px;
    --fs-r-full: 999px;

    /* 넓고 흐리게. 좁고 진한 그림자는 이 톤에서 싸구려로 보인다. */
    --fs-shadow-sm: 0 4px 30px rgba(0, 0, 0, .06);
    --fs-shadow:    0 4px 30px rgba(0, 0, 0, .12);
    --fs-shadow-lg: 0 10px 30px rgba(0, 0, 0, .10);

    --fs-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    --fs-ease: .2s cubic-bezier(.4, 0, .2, 1);
    --fs-ease-out: .6s cubic-bezier(.16, 1, .3, 1);   /* 스크롤 리빌 */

    --fs-header-h: 72px;
    --fs-gutter: 24px;
    /* 2026-09-16 사용자 요청으로 1040 → 1200 (전역 디자인 원칙의 최대 콘텐츠 너비).
       헤더 바·모든 섹션·마이페이지가 이 토큰 하나를 쓴다. */
    --fs-maxw: 1200px;
    --fs-section-pad: 120px;
}
/* ======================== Reset / Base ======================== */
.fs-site *,
.fs-site *::before,
.fs-site *::after { box-sizing: border-box; }

body.fs-site {
    margin: 0;
    font-family: var(--fs-font);
    font-size: 17px;
    /* 실측: 참고 톤의 본문은 1.5 안팎이다. 기존 1.85는 문단이 성글어
       "문서"처럼 읽혔다. 촘촘하게 붙여야 덩어리로 읽힌다. */
    line-height: 1.55;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--fs-ink);
    background: var(--fs-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    word-break: keep-all;
}

/* 강의 화면(FluxLMS, body.flux-lms-page) 본문에는 아래 기본 규칙을 걸지 않는다 (2026-09-15).
   강의 화면도 이 머리·바닥을 쓰는데, .fs-site a·h·p·img 같은 (0,1,1) 규칙이 강의 부품의
   클래스 규칙(0,1,0)을 이겨 여백·색·이미지 높이·초점 테두리를 덮었다(라이브 실측).
   제외 조건은 :where() 안에 둬 특이도를 바꾸지 않는다 — 마케팅 페이지 계산값은 그대로다. */
.fs-site h1:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h2:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h3:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h4:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site p:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site ul:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site ol:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site figure:where(:not(.flux-lms-page .fs-main-content *)) { margin: 0; }
.fs-site ul:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site ol:where(:not(.flux-lms-page .fs-main-content *)) { padding: 0; list-style: none; }

.fs-site h1:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h2:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h3:where(:not(.flux-lms-page .fs-main-content *)) {
    /* 제목은 굵기 800이 기본. 700은 소제목용으로 내린다. */
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
    word-break: keep-all;
    text-wrap: balance;
}
.fs-site h4:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site h5:where(:not(.flux-lms-page .fs-main-content *)) {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.4;
    word-break: keep-all;
}

/* 제목 안에서 한 구절만 포인트 색으로 찍는 패턴 — 이 톤의 핵심 장치다.
   한 제목에 두 번 이상 쓰지 않는다. */
.fs-site .fs-hl { color: var(--fs-accent); }

.fs-site a:where(:not(.flux-lms-page .fs-main-content *)) {
    color: var(--fs-accent);
    text-decoration: none;
    transition: color var(--fs-ease);
}
.fs-site a:hover:where(:not(.flux-lms-page .fs-main-content *)) { color: var(--fs-accent-ink); }

.fs-site img:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site svg:where(:not(.flux-lms-page .fs-main-content *)),
.fs-site iframe:where(:not(.flux-lms-page .fs-main-content *)) { max-width: 100%; }
.fs-site img:where(:not(.flux-lms-page .fs-main-content *)) { height: auto; display: block; }

.fs-site :focus-visible:where(:not(.flux-lms-page .fs-main-content *)) {
    outline: 2px solid var(--fs-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.fs-site strong:where(:not(.flux-lms-page .fs-main-content *)) { font-weight: 700; }

.fs-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 18px;
    background: var(--fs-ink);
    color: #fff;
    border-radius: 0 0 var(--fs-r-sm) 0;
}
.fs-skip:focus { left: 0; color: #fff; }

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

/* ======================== Layout ======================== */
.fs-wrap {
    width: 100%;
    max-width: var(--fs-maxw);
    margin: 0 auto;
    padding: 0 var(--fs-gutter);
}
.fs-wrap--narrow { max-width: 760px; }

/* 섹션 리듬은 한 값으로 통일한다. 88/100/120 이 섞이면
   스크롤할 때 간격이 들쭉날쭉한 게 그대로 보인다. */
.fs-section { padding: var(--fs-section-pad) 0; }
.fs-section--tight { padding: 88px 0; }
.fs-section--soft { background: var(--fs-bg-soft); }
.fs-section--line { border-top: 1px solid var(--fs-line); }

.fs-head { max-width: 720px; margin-bottom: 60px; }
.fs-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.fs-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--fs-ink-3);
    margin-bottom: 18px;
}

.fs-h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.3; }
.fs-h2 + .fs-lead { margin-top: 16px; }

.fs-lead {
    font-size: 17px;
    font-weight: 500;
    color: var(--fs-ink-3);
    line-height: 1.6;
    letter-spacing: -.02em;
}

.fs-note {
    font-size: 14px;
    color: var(--fs-ink-3);
    line-height: 1.7;
}

/* ======================== Buttons ========================
   주의: `.fs-site a { color: accent }` 가 클래스+요소(0,2,0)라
   `.fs-btn--primary`(0,1,0)보다 강하다. <a> 로 만든 버튼의 글자색이
   배경과 같은 파랑이 되어 사라졌었다. 버튼 색 규칙은 전부
   `.fs-site` 를 앞에 붙여 특이도를 맞춘다. */
.fs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--fs-r-full);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fs-ease), border-color var(--fs-ease),
                color var(--fs-ease), transform var(--fs-ease), box-shadow var(--fs-ease);
}
/* 눌리는 느낌은 그림자가 아니라 살짝 뜨는 것으로 낸다. */
.fs-btn:hover { transform: translateY(-1px); }
.fs-btn:active { transform: translateY(0); }

/* 주 CTA는 검정이다. 파랑은 보조(--accent)로 내렸다.
   한 화면에 검정 CTA는 하나만 둔다. */
.fs-site .fs-btn--primary,
.fs-btn--primary {
    background: var(--fs-ink);
    border-color: var(--fs-ink);
    color: #fff;
}
.fs-site .fs-btn--primary:hover,
.fs-btn--primary:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
    box-shadow: var(--fs-shadow-lg);
}

/* 파란 알약 — 섹션 안쪽의 "더 보기" 류 2차 CTA */
.fs-site .fs-btn--accent,
.fs-btn--accent {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}
.fs-site .fs-btn--accent:hover,
.fs-btn--accent:hover {
    background: var(--fs-accent-ink);
    border-color: var(--fs-accent-ink);
    color: #fff;
    box-shadow: var(--fs-shadow-lg);
}

/* 흰 알약 — 테두리 대신 옅은 그림자로 띄운다 */
.fs-site .fs-btn--ghost,
.fs-btn--ghost {
    background: #fff;
    border-color: transparent;
    color: var(--fs-ink);
    box-shadow: 0 0 0 1px var(--fs-line) inset;
}
.fs-site .fs-btn--ghost:hover,
.fs-btn--ghost:hover {
    color: var(--fs-ink);
    background: #fff;
    box-shadow: 0 0 0 1px var(--fs-line-strong) inset, var(--fs-shadow-sm);
}

/* 검정 위에 올리는 흰 알약 (푸터 CTA) */
.fs-site .fs-btn--onDark,
.fs-btn--onDark {
    background: #fff;
    border-color: #fff;
    color: var(--fs-ink);
}
.fs-site .fs-btn--onDark:hover,
.fs-btn--onDark:hover { background: #f0f0f0; border-color: #f0f0f0; color: var(--fs-ink); }

.fs-site .fs-btn--quiet,
.fs-btn--quiet {
    background: transparent;
    color: var(--fs-ink-2);
    padding: 0 8px;
}
.fs-site .fs-btn--quiet:hover,
.fs-btn--quiet:hover { color: var(--fs-ink); }

.fs-btn--lg { height: 60px; padding: 0 36px; font-size: 17px; }
.fs-btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.fs-btn--block { width: 100%; }

.fs-btn[disabled] { opacity: .55; cursor: not-allowed; }

.fs-btn__arrow { transition: transform var(--fs-ease); }
.fs-btn:hover .fs-btn__arrow { transform: translateX(2px); }

.fs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}
.fs-actions--center { justify-content: center; }

/* ======================== 다크 블록 ========================
   참고 사이트(템킷·웹쟁이)의 공통 뼈대: 진한 블록이 화면을 잡아 주고
   그 안에서 흰 볼드 헤드라인과 이미지가 대비를 만든다. */
.fs-dark {
    background: var(--fs-dark);
    color: var(--fs-dark-ink);
}
.fs-dark .fs-h2,
.fs-dark h1, .fs-dark h2, .fs-dark h3 { color: var(--fs-dark-ink); }
.fs-dark .fs-lead,
.fs-dark .fs-note { color: var(--fs-dark-ink-2); }
.fs-dark .fs-eyebrow { color: var(--fs-dark-ink-2); }
.fs-site .fs-dark .fs-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.fs-site .fs-dark .fs-btn--ghost:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ======================== Header (디자인키트 3단 구조) ========================
   1단 유틸바(진한 배경) / 2단 메인바(로고·검색·계정) / 3단 내비바(메뉴)
   designkits.co.kr 의 구조를 그대로 옮겼다. 포인트색만 FluxHub 파랑. */
.fs-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--fs-line);
}

/* ── 1단 유틸리티 바 ── */
.fs-util {
    background: #10233f;
    color: #c7d0de;
    font-size: 13px;
}
.fs-util__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--fs-gutter);
    height: 38px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.fs-util__badge {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    background: #0b1729;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}
.fs-util__notice {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fs-util__notice::before { content: '· '; }
.fs-util__links {
    margin-left: auto;
    display: flex;
    gap: 18px;
    white-space: nowrap;
}
.fs-site .fs-util__links a { color: #9aa6b8; }
.fs-site .fs-util__links a:hover { color: #fff; }

/* ── 2단 메인 바 ── */
.fs-main {
    background: #fff;
}
.fs-main__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--fs-gutter);
    height: 88px;
    display: flex;
    align-items: center;
    gap: 32px;
}

.fs-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1;
    flex: 0 0 auto;
}
.fs-brand__kr {
    font-size: 12.5px;
    color: var(--fs-ink-3);
    letter-spacing: .02em;
}
.fs-brand__en {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--fs-ink);
}
.fs-site .fs-brand:hover .fs-brand__en { color: var(--fs-ink-2); }

/* 중앙 검색 — 포인트색 테두리의 알약 */
.fs-search {
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 6px 0 16px;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-full);
    background: #fff;
}
.fs-search:focus-within { border-color: var(--fs-ink); }
.fs-search__scope {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding-right: 12px;
    margin-right: 12px;
    border-right: 1px solid var(--fs-line);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink);
    white-space: nowrap;
}
.fs-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--fs-ink);
    background: transparent;
}
.fs-search__input::placeholder { color: #a4abb7; }
.fs-search__btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--fs-ink-2);
    cursor: pointer;
}
.fs-search__btn:hover { background: var(--fs-bg-soft); color: var(--fs-ink); }

.fs-account {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.fs-site .fs-account a { color: var(--fs-ink-2); }
.fs-site .fs-account a:hover { color: var(--fs-ink); }
.fs-account__cart {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.fs-account__count {
    display: inline-grid;
    place-items: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
}

/* ── 3단 내비게이션 바 ── */
.fs-navbar {
    background: #fff;
    border-top: 1px solid var(--fs-line);
}
.fs-navbar__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--fs-gutter);
    height: 54px;
    display: flex;
    align-items: center;
    gap: 30px;
}
.fs-navbar__all {
    /* button 은 글꼴을 상속하지 않는다 — 지정하지 않으면 한글이 두부(□)가 된다 */
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--fs-ink);
    white-space: nowrap;
}
.fs-site .fs-navbar__all:hover { color: var(--fs-ink-2); }

.fs-navbar__menu {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
    overflow-x: auto;
}
.fs-site .fs-navbar__menu a {
    position: relative;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fs-ink);
    white-space: nowrap;
}
.fs-site .fs-navbar__menu a:hover { color: var(--fs-ink-2); }
.fs-navbar__new {
    position: relative;
    top: -6px;
    margin-left: 2px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--fs-ink-3);
}

.fs-navbar__sub {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
}
.fs-site .fs-navbar__sub a { font-size: 14px; color: var(--fs-ink-3); }
.fs-site .fs-navbar__sub a:hover { color: var(--fs-ink); }
.fs-site .fs-navbar__cta {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 18px;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
}
.fs-site .fs-navbar__cta:hover { background: var(--fs-accent-ink); }

.fs-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}
.fs-logo:hover { color: #fff; }

.fs-logo__mark {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: var(--fs-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

/* 푸터는 밝은 배경 위에 있으므로 잉크색을 되돌린다 */
.fs-footer .fs-logo { color: var(--fs-ink); }
.fs-footer .fs-logo:hover { color: var(--fs-ink); }

.fs-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.fs-nav__link {
    padding: 8px 14px;
    border-radius: var(--fs-r-full);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fs-dark-ink-2);
}
.fs-nav__link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.fs-nav__link[aria-current="page"] { color: #fff; }

.fs-nav__sep {
    width: 1px;
    height: 18px;
    background: var(--fs-dark-line);
    margin: 0 8px;
}

.fs-burger {
    display: none;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    background: none;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-sm);
    color: var(--fs-ink);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.fs-mobilenav {
    display: none;
    border-top: 1px solid var(--fs-line);
    background: #fff;
    padding: 12px var(--fs-gutter) 20px;
}
.fs-mobilenav.is-open { display: block; }
.fs-mobilenav .fs-nav__link {
    display: block;
    padding: 13px 4px;
    font-size: 16px;
    color: var(--fs-ink);
    border-bottom: 1px solid var(--fs-line);
    border-radius: 0;
}
.fs-mobilenav .fs-btn { margin-top: 16px; }

/* ======================== Hero (디자인키트식 배너) ========================
   디자인키트 홈은 흰 바탕에 가로 배너 + 그 아래 업종 아이콘 행이다.
   다크 히어로를 걷어내고 같은 구조로 맞췄다. */
.fs-hero {
    position: relative;
    padding: 56px 0 16px;
    background: #fff;
}

.fs-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 40px;
    align-items: center;
    padding: 60px 56px;
    border-radius: var(--fs-r-lg);
    background: linear-gradient(180deg, #f4f7ff 0%, #eef3ff 100%);
    overflow: hidden;
}

.fs-hero__inner { max-width: 780px; }

.fs-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 14px;
    margin-bottom: 20px;
    border-radius: var(--fs-r-full);
    background: #fff;
    border: 1px solid var(--fs-line);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fs-ink-2);
}
.fs-hero__badge b { color: var(--fs-ink); font-weight: 700; }

.fs-hero__title {
    font-size: clamp(30px, 3.8vw, 46px);
    line-height: 1.32;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--fs-ink);
}
/* 제목 안 강조는 색이 아니라 굵기로 — 포인트색은 버튼에만 남긴다 */
.fs-hero__title .fs-hero__accent { color: var(--fs-ink); }

.fs-hero__desc {
    margin-top: 24px;
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--fs-ink-2);
    max-width: 520px;
}

.fs-hero__actions { margin-top: 26px; }

.fs-hero__sub {
    margin-top: 14px;
    font-size: 13.5px;
    color: var(--fs-ink-3);
}

/* 배너 안 화면 합성 */
.fs-shots { position: relative; min-height: 300px; }
.fs-frame {
    border-radius: var(--fs-r);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--fs-line);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .14);
}
.fs-frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    background: var(--fs-bg-soft);
    border-bottom: 1px solid var(--fs-line);
}
.fs-frame__dot { width: 8px; height: 8px; border-radius: 50%; background: #cdd3dc; }
.fs-frame img { display: block; width: 100%; }

.fs-shots__pc { width: 112%; max-width: none; }
.fs-shots__phone {
    position: absolute;
    right: -1%;
    bottom: -10%;
    width: 25%;
    min-width: 140px;
    border-radius: 22px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--fs-line);
    box-shadow: 0 16px 34px rgba(16, 24, 40, .18);
}
.fs-shots__phone img { display: block; width: 100%; border-radius: 17px; }

/* 히어로 아래 지표 줄 */
.fs-trustbar {
    margin-top: 52px;
    padding: 38px 4px 0;
    border-top: 1px solid var(--fs-line);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.fs-trustbar__item { min-width: 0; }
.fs-trustbar__k {
    display: block;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--fs-ink);
}
.fs-trustbar__v {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: var(--fs-ink-3);
}

/* ======================== 업종 아이콘 행 (디자인키트) ======================== */
.fs-inds {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 48px 0 10px;
    scrollbar-width: none;
}
.fs-inds::-webkit-scrollbar { display: none; }
.fs-ind {
    flex: 1 0 auto;
    min-width: 108px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 8px;
    border-radius: var(--fs-r);
    color: var(--fs-ink);
    text-align: center;
}
.fs-site .fs-ind:hover { background: var(--fs-bg-soft); color: var(--fs-ink); }
/* 라인 아이콘 + 라운드 사각 칩 (Linear·토스 계열의 요즘 형태) */
.fs-ind__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    background: var(--fs-bg-soft);
    color: var(--fs-ink-2);
    transition: background var(--fs-ease), color var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-site .fs-ind:hover .fs-ind__icon {
    background: var(--fs-ink);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .16);
}
.fs-site .fs-ind { color: var(--fs-ink); }
.fs-site .fs-ind__label { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--fs-ink); }

/* ======================== 섹션 헤더 (디자인키트 패턴) ======================== */
.fs-sechead {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 34px;
}
.fs-sechead__box { min-width: 0; }
.fs-sechead__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-ink-3);
    margin-bottom: 10px;
}
.fs-sechead__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
}
.fs-sechead__new {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--fs-r-full);
    background: transparent;
    border: 1px solid var(--fs-line-strong);
    color: var(--fs-ink-3);
    font-size: 11.5px;
    font-weight: 700;
}
.fs-site .fs-sechead__more {
    margin-left: auto;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink-3);
    white-space: nowrap;
}
.fs-site .fs-sechead__more:hover { color: var(--fs-ink); }

/* ======================== 수수료 계산기 ======================== */
.fs-calc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 0;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: #fff;
    overflow: hidden;
}

.fs-calc__input { padding: 34px 34px 30px; }
.fs-calc__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fs-ink-2);
}
.fs-calc__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--fs-ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.fs-calc__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 26px 0 10px;
    border-radius: var(--fs-r-full);
    background: var(--fs-line);
    cursor: pointer;
}
.fs-calc__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--fs-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .24);
    cursor: grab;
}
.fs-calc__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fs-accent);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .24);
    cursor: grab;
}
.fs-calc__scale {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
}

.fs-calc__rows {
    margin-top: 26px;
    border-top: 1px solid var(--fs-line);
}
.fs-calc__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--fs-line);
    font-size: 15px;
}
.fs-calc__row dt { color: var(--fs-ink-2); }
.fs-calc__row dd {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fs-calc__row--zero dd { color: var(--fs-good); }

.fs-calc__out {
    padding: 34px;
    background: var(--fs-bg-soft);
    border-left: 1px solid var(--fs-line);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.fs-calc__outlabel { font-size: 14px; color: var(--fs-ink-2); }
.fs-calc__amount {
    margin: 8px 0 2px;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--fs-good);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.fs-calc__caption {
    font-size: 14.5px;
    color: var(--fs-ink-2);
    line-height: 1.65;
}
.fs-calc__out .fs-btn { margin-top: 22px; }
.fs-calc__disclaimer {
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--fs-ink-3);
    line-height: 1.6;
}

/* ======================== 영상 ======================== */
.fs-video {
    position: relative;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    overflow: hidden;
    background: var(--fs-bg-sunken);
    aspect-ratio: 16 / 9;
}
.fs-video iframe,
.fs-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ======================== 카드 그리드 ======================== */
.fs-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.fs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fs-card {
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease);
}
a.fs-card { color: inherit; }
a.fs-card:hover {
    border-color: var(--fs-line-strong);
    box-shadow: var(--fs-shadow);
    color: inherit;
}

.fs-card__icon {
    width: 34px;
    height: 34px;
    margin-bottom: 16px;
    color: var(--fs-ink-2);
}
.fs-card__title { font-size: 19px; margin-bottom: 8px; }
.fs-card__desc {
    font-size: 15px;
    line-height: 1.85;
    color: var(--fs-ink-2);
}
.fs-card__list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 14.5px;
    color: var(--fs-ink-2);
}
.fs-card__list li { padding-left: 15px; position: relative; }
.fs-card__list li::before {
    content: '';
    position: absolute;
    left: 0; top: 11px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--fs-line-strong);
}
.fs-card__more {
    margin-top: auto;
    padding-top: 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ======================== 신뢰 요소 ======================== */
.fs-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.fs-chip {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-full);
    background: #fff;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--fs-ink-2);
}

.fs-proof {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1px;
    background: var(--fs-line);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    overflow: hidden;
}
.fs-proof__item { background: #fff; padding: 26px; }
.fs-proof__k {
    display: block;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.fs-proof__v {
    display: block;
    margin-top: 6px;
    font-size: 14.5px;
    color: var(--fs-ink-3);
}

/* ======================== 정책 3줄 ======================== */
.fs-policy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.fs-policy__item {
    padding-top: 20px;
    border-top: 2px solid var(--fs-ink);
}
.fs-policy__t { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.fs-policy__d { font-size: 15px; color: var(--fs-ink-2); line-height: 1.7; }

/* ======================== 하단 CTA (밝게) ======================== */
.fs-cta {
    padding: 100px 0;
    background: var(--fs-bg-soft);
    border-top: 1px solid var(--fs-line);
    text-align: center;
}
.fs-cta__title {
    font-size: clamp(24px, 3.2vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--fs-ink);
}
.fs-cta__desc { margin-top: 14px; color: var(--fs-ink-2); }

/* ======================== 요금제 ======================== */
.fs-plans {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}
/* 플랜이 하나뿐일 때 카드가 1120px 로 늘어나면 허전해 보인다. 폭을 묶는다. */
.fs-plans--single { grid-template-columns: minmax(280px, 420px); }

.fs-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
}
.fs-plan--featured { border-color: var(--fs-ink); }

.fs-plan__badge {
    position: absolute;
    top: -11px;
    left: 30px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
}
.fs-plan__name { font-size: 19px; }
.fs-plan__desc {
    margin-top: 8px;
    font-size: 14.5px;
    color: var(--fs-ink-2);
    min-height: 44px;
}
.fs-plan__price {
    margin-top: 18px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.fs-plan__amount {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.fs-plan__cycle { font-size: 14.5px; color: var(--fs-ink-3); }
.fs-plan__was {
    font-size: 15px;
    color: var(--fs-ink-3);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.fs-plan__meta {
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--fs-ink-3);
}
.fs-plan__breakdown { margin: 18px 0 0; border-top: 1px solid var(--fs-line); }
.fs-plan__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--fs-line);
    font-size: 14.5px;
}
.fs-plan__row dt { color: var(--fs-ink-2); }
.fs-plan__row dt span { display: inline-block; margin-left: 5px; font-size: 12px; color: var(--fs-ink-3); }
.fs-plan__row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-plan__row--total { border-bottom: 0; padding-top: 14px; font-size: 15.5px; }
.fs-plan__row--total dt { color: var(--fs-ink); font-weight: 700; }
.fs-plan__row--total dd { font-size: 19px; letter-spacing: -.02em; }

.fs-plan__zero {
    margin: 20px 0 0;
    padding: 11px 14px;
    border-radius: var(--fs-r-sm);
    background: var(--fs-good-soft);
    color: var(--fs-good);
    font-size: 14.5px;
    font-weight: 600;
}
.fs-plan__features {
    margin: 20px 0 26px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 15px;
    color: var(--fs-ink-2);
}
.fs-plan__features li {
    position: relative;
    padding-left: 24px;
    line-height: 1.6;
}
.fs-plan__features li::before {
    content: '';
    position: absolute;
    left: 4px; top: 8px;
    width: 9px; height: 5px;
    border-left: 1.8px solid var(--fs-accent);
    border-bottom: 1.8px solid var(--fs-accent);
    transform: rotate(-45deg);
}
.fs-plan__cta { margin-top: auto; }

.fs-plan--empty { text-align: left; }
.fs-plan--empty .fs-plan__amount { font-size: 24px; color: var(--fs-ink-2); }

/* ======================== 표 ======================== */
.fs-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.fs-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 15px;
}
.fs-table th,
.fs-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--fs-line);
    vertical-align: top;
}
.fs-table thead th {
    font-size: 14px;
    font-weight: 700;
    color: var(--fs-ink);
    background: var(--fs-bg-soft);
    white-space: nowrap;
}
.fs-table tbody th {
    font-weight: 600;
    color: var(--fs-ink-2);
    width: 30%;
}
.fs-table tbody tr:last-child th,
.fs-table tbody tr:last-child td { border-bottom: 0; }
.fs-table td { color: var(--fs-ink-2); font-variant-numeric: tabular-nums; }
.fs-table .fs-col--ours { background: var(--fs-accent-soft); }
.fs-table thead .fs-col--ours { background: var(--fs-accent); color: #fff; }
.fs-table .fs-col--ours td,
.fs-table td.fs-col--ours { color: var(--fs-ink); font-weight: 600; }
.fs-table__sub {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: var(--fs-ink-3);
}
.fs-table__zero { color: var(--fs-good); font-weight: 700; }

/* ======================== 프로세스 ========================
   원래 1px 상단 선으로 구분하던 컴포넌트 — 회색 웰 카드로 정합했다.
   (round 3 에서 표·FAQ·폼은 손봤는데 이 컴포넌트를 빠뜨렸었다.)
   migration/pricing/vertical/story 4개 페이지가 전부 이 정의 하나를 쓴다.
   4단계가 기본이지만 3단계(공구 로드맵)도 쓴다 — auto-fit 이라 빈 칸이 남지 않는다. */
.fs-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}
.fs-site .fs-step {
    padding: 30px 26px;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
}
.fs-site .fs-step__n {
    display: block;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 800;
    color: var(--fs-ink-4);
    font-variant-numeric: tabular-nums;
}
.fs-site .fs-step__t {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.3;
}
.fs-site .fs-step__d {
    margin-top: 0;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ======================== FAQ ======================== */
.fs-faq { border-top: 1px solid var(--fs-line); }
.fs-faq__item { border-bottom: 1px solid var(--fs-line); }
.fs-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.fs-faq__q::-webkit-details-marker { display: none; }
.fs-faq__q::after {
    content: '';
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-right: 1.8px solid var(--fs-ink-3);
    border-bottom: 1.8px solid var(--fs-ink-3);
    transform: rotate(45deg) translateY(-3px);
    transition: transform var(--fs-ease);
}
.fs-faq__item[open] .fs-faq__q::after { transform: rotate(-135deg) translateY(-3px); }
.fs-faq__a {
    padding: 0 0 24px;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--fs-ink-2);
    max-width: 800px;
}

/* ======================== 폼 ======================== */
.fs-form {
    padding: 32px;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
}

.fs-field { margin-bottom: 20px; }
.fs-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14.5px;
    font-weight: 600;
}
.fs-field__req { color: var(--fs-accent); margin-left: 3px; }
.fs-field__hint {
    margin-top: 7px;
    font-size: 13px;
    color: var(--fs-ink-3);
}

.fs-input,
.fs-select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--fs-ink);
    background: #fff;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-sm);
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-input::placeholder { color: #a4abb7; }
.fs-input:focus,
.fs-select:focus {
    outline: none;
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 3px var(--fs-accent-soft);
}
.fs-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23737b89' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.fs-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.fs-formmsg {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--fs-r-sm);
    font-size: 14.5px;
    line-height: 1.6;
    border: 1px solid;
}
.fs-formmsg[hidden] { display: none; }
.fs-formmsg--error {
    background: #fef3f2;
    border-color: #fbd5d0;
    color: #a52c1d;
}

/* 신청 직후 화면 */
.fs-done { text-align: center; padding: 20px 0 8px; }
.fs-done__mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    display: grid;
    place-items: center;
}
.fs-done__title { font-size: 24px; margin-bottom: 12px; }
.fs-done__desc { color: var(--fs-ink-2); font-size: 16px; }
.fs-done__meta {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--fs-line);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fs-done__row {
    display: flex;
    gap: 12px;
    font-size: 14.5px;
    color: var(--fs-ink-2);
}
.fs-done__row b { flex: 0 0 88px; color: var(--fs-ink); font-weight: 600; }

.fs-demoaside {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ======================== 업종 선택 인터랙티브 (지시서 §10) ======================== */
.fs-picker {
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: #fff;
    overflow: hidden;
}

.fs-picker__tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--fs-line);
    background: var(--fs-bg-soft);
    overflow-x: auto;
}
.fs-picker__tab {
    flex: 1 0 auto;
    min-width: 110px;
    padding: 17px 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fs-ink-3);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--fs-ease), border-color var(--fs-ease), background var(--fs-ease);
}
.fs-picker__tab:hover { color: var(--fs-ink); background: #fff; }
.fs-picker__tab.is-active {
    color: var(--fs-ink);
    background: #fff;
    border-bottom-color: var(--fs-accent);
}

.fs-picker__panel { padding: 40px; }
.fs-picker__panel[hidden] { display: none; }

.fs-picker__value {
    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
    letter-spacing: -.01em;
    max-width: 720px;
}

.fs-picker__shots {
    display: grid;
    /*
     * auto-fit 은 카드가 1장일 때 그 1장을 컨테이너 전체(912px)로 늘린다.
     * 업종마다 템플릿이 아직 한둘이라, 화면에는 폭 912 · 높이 570 짜리
     * 거대한 카드 하나가 떠 있었다. 개수와 무관하게 칸 크기를 고정한다.
     */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}
@media (min-width: 720px) {
    .fs-picker__shots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-picker__shot {
    display: block;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
    overflow: hidden;
    background: var(--fs-bg-sunken);
    color: inherit;
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease);
}
a.fs-picker__shot:hover {
    border-color: var(--fs-line-strong);
    box-shadow: var(--fs-shadow);
    color: inherit;
}
.fs-picker__shot img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}
.fs-picker__shotname {
    display: block;
    padding: 12px 14px;
    background: #fff;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink);
    border-top: 1px solid var(--fs-line);
}

.fs-picker__calc {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--fs-line);
}
.fs-picker__saving {
    margin-top: 16px;
    font-size: 15.5px;
    color: var(--fs-ink-2);
    line-height: 1.7;
}
.fs-picker__saving strong { color: var(--fs-ink); font-variant-numeric: tabular-nums; }
.fs-picker__zero { color: var(--fs-ink); }

.fs-picker__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

/* ======================== 법적 문서 ======================== */
.fs-legal { margin-top: 36px; }
.fs-legal__sec {
    padding-top: 28px;
    margin-top: 28px;
    border-top: 1px solid var(--fs-line);
}
.fs-legal__sec:first-child { border-top: 0; margin-top: 0; }
.fs-legal__h {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 16px;
}
.fs-legal__p {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--fs-ink-2);
}
.fs-legal__n {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
}
.fs-legal__foot {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--fs-line);
}

/* ======================== 본문 (사례 등) ======================== */
.fs-prose { font-size: 16.5px; line-height: 1.85; color: var(--fs-ink-2); }
.fs-prose h2 { font-size: 22px; margin: 36px 0 14px; color: var(--fs-ink); }
.fs-prose h3 { font-size: 18px; margin: 28px 0 10px; color: var(--fs-ink); }
.fs-prose p { margin-bottom: 18px; }
.fs-prose ul, .fs-prose ol { margin: 0 0 18px 20px; padding-left: 0; list-style: disc; }
.fs-prose ol { list-style: decimal; }
.fs-prose li { margin-bottom: 8px; }
.fs-prose img { border-radius: var(--fs-r); border: 1px solid var(--fs-line); margin: 8px 0; }
.fs-prose table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.fs-prose th, .fs-prose td { padding: 12px 14px; border-bottom: 1px solid var(--fs-line); text-align: left; }
.fs-prose th { background: var(--fs-bg-soft); font-weight: 700; color: var(--fs-ink); }
.fs-prose code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--fs-bg-sunken);
    font-size: 14px;
}

/* ======================== FAQ 그룹 ======================== */
.fs-faqcols { display: flex; flex-direction: column; gap: 40px; }
.fs-faqgroup__t {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--fs-ink);
}

/* ======================== 프로모션 팻말 ======================== */
.fs-promo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 14px 18px;
    margin-bottom: 24px;
    border: 1px solid var(--fs-accent);
    border-radius: var(--fs-r);
    background: var(--fs-accent-soft);
    font-size: 15px;
}
.fs-promo__k {
    font-weight: 700;
    color: var(--fs-accent-ink);
}
.fs-promo__d { color: var(--fs-ink-2); }
.fs-promo__until {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fs-ink-2);
    font-variant-numeric: tabular-nums;
}

/* ======================== 동의 체크박스 ======================== */
.fs-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--fs-ink-2);
}
.fs-consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--fs-accent);
    cursor: pointer;
}
.fs-consent label { cursor: pointer; }

/* ======================== 통증 카드 (업종 랜딩) ======================== */
.fs-pain {
    padding-top: 22px;
    border-top: 2px solid var(--fs-ink);
}
.fs-pain__n {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}
.fs-pain__t { font-size: 17.5px; font-weight: 700; margin-bottom: 8px; line-height: 1.45; }
.fs-pain__d { font-size: 15px; color: var(--fs-ink-2); line-height: 1.75; }

/* ======================== 교차 배너 ======================== */
.fs-crossbanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: var(--fs-bg-soft);
}
.fs-crossbanner__t { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.fs-crossbanner__d { font-size: 15px; color: var(--fs-ink-2); max-width: 640px; }

/* ======================== 필터 칩 (템플릿 갤러리) ======================== */
.fs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.fs-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--fs-line-strong);
    border-radius: var(--fs-r-full);
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--fs-ink-2);
    cursor: pointer;
    transition: border-color var(--fs-ease), color var(--fs-ease), background var(--fs-ease);
}
.fs-filter:hover { border-color: var(--fs-ink-3); color: var(--fs-ink); }
.fs-filter.is-active {
    background: var(--fs-ink);
    border-color: var(--fs-ink);
    color: #fff;
}
.fs-filter__n {
    font-size: 12.5px;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
}
.fs-filter.is-active .fs-filter__n { color: rgba(255, 255, 255, .7); }

/* ======================== 템플릿 카드 ======================== */
.fs-tplgrid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.fs-tpl {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-tpl:hover { border-color: var(--fs-line-strong); box-shadow: var(--fs-shadow); }
.fs-tpl[hidden] { display: none; }

.fs-tpl__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--fs-bg-sunken);
    overflow: hidden;
}
.fs-tpl__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
.fs-tpl__noshot {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent 0 10px, rgba(20, 22, 26, .03) 10px 20px);
}
.fs-tpl__pick {
    position: absolute;
    top: 12px;
    left: 12px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
}

.fs-tpl__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}
.fs-tpl__cat {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fs-ink-3);
    margin-bottom: 8px;
}
.fs-tpl__name { font-size: 18px; margin-bottom: 8px; }
.fs-tpl__desc {
    font-size: 14.5px;
    color: var(--fs-ink-2);
    line-height: 1.7;
}
.fs-tpl__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
}

/* ======================== 빈 상태 ======================== */
.fs-empty {
    max-width: 620px;
    padding: 40px 0 8px;
}
.fs-empty__t { font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 14px; }
.fs-empty__d {
    font-size: 16.5px;
    line-height: 1.8;
    color: var(--fs-ink-2);
    margin-bottom: 28px;
}

/* ======================== 이관 계산기 (상세판) ======================== */
.fs-mig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: #fff;
    overflow: hidden;
}
.fs-mig__form { padding: 32px; }
.fs-mig__form .fs-field:last-child { margin-bottom: 0; }
.fs-mig__out {
    padding: 32px;
    background: var(--fs-bg-soft);
    border-left: 1px solid var(--fs-line);
    display: flex;
    flex-direction: column;
}
.fs-mig__result {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-line);
}
/* 범위 표기("연 179만원 ~ 299만원")는 홈 계산기보다 길다 — 한 줄에 들어오게 줄인다. */
.fs-mig__result .fs-calc__amount {
    font-size: clamp(22px, 2.6vw, 30px);
    letter-spacing: -.02em;
}
.fs-field__val {
    float: right;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fs-textarea {
    height: auto;
    min-height: 108px;
    padding: 12px 14px;
    line-height: 1.7;
    resize: vertical;
}

/* ======================== Footer ======================== */
.fs-footer {
    padding: 56px 0 44px;
    border-top: 1px solid var(--fs-line);
    background: #fff;
    font-size: 14.5px;
    color: var(--fs-ink-3);
}
.fs-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 32px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--fs-line);
}
.fs-footer__brand .fs-logo { margin-bottom: 14px; }
.fs-footer__tag { line-height: 1.7; max-width: 320px; }
.fs-footer__coltitle {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fs-ink);
    margin-bottom: 14px;
}
.fs-footer__links { display: flex; flex-direction: column; gap: 10px; }
.fs-footer__links a { color: var(--fs-ink-3); }
.fs-footer__links a:hover { color: var(--fs-ink); }
.fs-footer__bottom {
    padding-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
}
.fs-footer__legal { line-height: 1.8; }

/* ======================== 반응형 ======================== */
@media (max-width: 1024px) {
    .fs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fs-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .fs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 24px; }
    .fs-shots { min-height: 0; }
    .fs-shots__pc { width: 100%; }
    .fs-shots__phone { right: 0; bottom: -8%; width: 30%; }
}

@media (max-width: 900px) {
    .fs-calc,
    .fs-mig { grid-template-columns: minmax(0, 1fr); }
    .fs-calc__out,
    .fs-mig__out {
        border-left: 0;
        border-top: 1px solid var(--fs-line);
    }
}

@media (max-width: 768px) {
    :root { --fs-gutter: 20px; }

    .fs-navbar,
    .fs-util__links,
    .fs-account,
    .fs-search { display: none; }
    .fs-burger { display: inline-flex; }
    .fs-main__inner { height: 64px; gap: 16px; }
    .fs-brand__en { font-size: 22px; }

    .fs-section { padding: 72px 0; }
    .fs-section--tight { padding: 56px 0; }
    .fs-hero { padding: 56px 0 48px; }
    .fs-head { margin-bottom: 32px; }

    /* 2열 그리드(데모 폼 + 설명)는 태블릿에서 이미 답답하다 — 여기서 푼다.
       카드 그리드(3·4열)는 768 에서 2열이 더 낫다 → 640 블록에서 처리. */
    .fs-grid--2 { grid-template-columns: minmax(0, 1fr); }
    .fs-policy { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .fs-trustbar { grid-template-columns: minmax(0, 1fr); gap: 18px; }

    .fs-calc__input,
    .fs-calc__out { padding: 24px 20px; }

    .fs-form { padding: 24px 20px; }

    .fs-hero__actions .fs-btn,
    .fs-cta .fs-btn { flex: 1 1 auto; }
}

@media (max-width: 640px) {
    .fs-grid,
    .fs-grid--3,
    .fs-grid--4 { grid-template-columns: minmax(0, 1fr); }

    /* 좁은 화면에서 표는 안에서 가로로 스크롤한다. 잘린 열이 고장으로 보이지
       않도록 밀 수 있다는 것을 알려준다(스크롤해도 따라오게 sticky). */
    .fs-tablewrap::after {
        content: '표를 옆으로 밀어 보실 수 있습니다';
        position: sticky;
        left: 0;
        display: block;
        padding: 10px 16px;
        border-top: 1px solid var(--fs-line);
        background: var(--fs-bg-soft);
        font-size: 12.5px;
        color: var(--fs-ink-3);
    }
}

@media (max-width: 560px) {
    .fs-steps { grid-template-columns: minmax(0, 1fr); }
    .fs-footer__top { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .fs-done__row { flex-direction: column; gap: 2px; }
    .fs-done__row b { flex: none; }
}





/* ======================== 디자인키트 본문 구조 ========================
   원본 순서: 배너 → 업종 아이콘 행 → "신규 …[NEW] … 더보기+" 가로 캐러셀
   → "인기 업종별 순위"(중앙 정렬 제목 + 순위 배지 카드)
   카드 형식도 원본을 따른다: 세로로 긴 스크린샷 + 코드명/제목 + PC·모바일
   아이콘 + 한 줄 설명 + 가격. */

/* 가로 캐러셀 — 카드가 화면 밖으로 잘려 나가며 "더 있다"를 보여준다 */
.fs-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(268px, 1fr);
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
}

/*
 * 화면 끝까지 흐르는 캐러셀.
 * 음수 마진과 같은 값의 패딩을 함께 주면 서로 상쇄돼 첫 카드가 화면 0px 에
 * 딱 붙는다(실제로 그랬다 — 제목은 20px, 카드는 0px).
 * 컨테이너를 넓히는 대신 첫/마지막 카드에만 여백을 준다.
 */
.fs-rail { margin: 0 calc(var(--fs-gutter) * -1); }
.fs-rail > *:first-child { margin-left: var(--fs-gutter); }
.fs-rail > *:last-child { margin-right: var(--fs-gutter); }
.fs-rail { scroll-padding-left: var(--fs-gutter); }
.fs-rail::-webkit-scrollbar { display: none; }
.fs-rail > * { scroll-snap-align: start; }

/*
 * 카드가 <a> 라서 `.fs-site a { color: accent }` 가 제목·가격·설명까지 전부
 * 파랗게 물들였다(카드 11개). 카드 안은 본문색을 기본으로 두고,
 * 포인트색은 버튼과 진짜 인라인 링크에만 남긴다.
 */
.fs-site a.fs-dcard,
.fs-site a.fs-dcard:hover,
.fs-site a.fs-picker__shot,
.fs-site a.fs-picker__shot:hover,
.fs-site a.fs-ind,
.fs-site a.fs-drawer__cat { color: var(--fs-ink); }

.fs-dcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--fs-line);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-dcard:hover { border-color: var(--fs-line-strong); box-shadow: 0 10px 28px rgba(16,24,40,.1); }

/* 원본처럼 세로로 긴 스크린샷(상단 크롭) */
.fs-dcard__shot {
    display: block;
    height: 250px;
    overflow: hidden;
    background: var(--fs-bg-sunken);
}
.fs-dcard__shot img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.fs-dcard__body { padding: 16px 16px 18px; }
.fs-dcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fs-dcard__name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--fs-ink); }
.fs-dcard__dev { display: flex; gap: 6px; color: var(--fs-ink-3); }
.fs-dcard__desc {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fs-ink-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-dcard__price {
    margin-top: 12px;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--fs-ink);
}
.fs-dcard__price small { font-size: 13px; font-weight: 600; color: var(--fs-ink-3); }

/* 순위 배지 (인기 업종별 순위) */
.fs-dcard { position: relative; }
.fs-dcard__rank {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--fs-ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

/* 중앙 정렬 섹션 제목 (원본의 "인기 업종별 디자인 순위") */
.fs-centerhead { text-align: center; margin-bottom: 40px; }
.fs-centerhead__t {
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -.035em;
}
.fs-centerhead__d { margin-top: 12px; font-size: 16px; color: var(--fs-ink-2); }

@media (max-width: 768px) {
    .fs-rail { grid-auto-columns: minmax(220px, 1fr); gap: 14px; }
    .fs-dcard__shot { height: 190px; }
}

/* ======================== 인용 블록 ======================== */
.fs-quote { max-width: 900px; }
.fs-quote__t {
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.4;
    color: var(--fs-ink);
}
.fs-quote__by {
    margin-top: 22px;
    font-size: 15.5px;
    color: var(--fs-ink-3);
}
.fs-quote .fs-creds { margin-top: 30px; }

/* ======================== 기능 블록 (좌우 교차) ========================
   섹션마다 같은 리듬(라벨→제목→카드 3개)이 반복되면 템플릿처럼 보인다.
   여기서는 큰 화면 하나와 짧은 카피를 좌우로 엇갈리게 놓아 흐름을 끊는다. */
.fs-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 64px;
    align-items: center;
    padding: 72px 0;
    border-bottom: 1px solid var(--fs-line);
}
.fs-feature:last-child { border-bottom: 0; }
.fs-feature:nth-child(even) .fs-feature__text { order: 2; }

.fs-feature__num {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
}
.fs-feature__t {
    font-size: clamp(24px, 2.9vw, 34px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.28;
}
.fs-feature__d {
    margin-top: 22px;
    font-size: 16.5px;
    line-height: 1.9;
    color: var(--fs-ink-2);
    max-width: 440px;
}
.fs-feature__list {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fs-feature__list li {
    position: relative;
    padding-left: 24px;
    font-size: 15.5px;
    color: var(--fs-ink-2);
}
.fs-feature__list li::before {
    content: '';
    position: absolute;
    left: 3px; top: 9px;
    width: 9px; height: 5px;
    border-left: 1.8px solid var(--fs-ink);
    border-bottom: 1.8px solid var(--fs-ink);
    transform: rotate(-45deg);
}
.fs-feature__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 15.5px;
    font-weight: 700;
}

.fs-feature__shot {
    border-radius: var(--fs-r-lg);
    overflow: hidden;
    border: 1px solid var(--fs-line);
    background: var(--fs-bg-soft);
    box-shadow: 0 14px 40px rgba(16, 24, 40, .1);
}
.fs-feature__shot img { display: block; width: 100%; }

@media (max-width: 900px) {
    .fs-feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 48px 0;
    }
    .fs-feature:nth-child(even) .fs-feature__text { order: 0; }
}

/* ======================== 기술 문의 (핀 주석) ======================== */
.fs-reqsteps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-bottom: 34px;
    font-size: 15px;
    color: var(--fs-ink-2);
}
.fs-reqsteps li { display: flex; align-items: center; gap: 9px; }
.fs-reqsteps b {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--fs-ink);
    color: #fff;
    font-size: 12px;
}

.fs-drop {
    border: 2px dashed var(--fs-line-strong);
    border-radius: var(--fs-r-lg);
    background: var(--fs-bg-soft);
    transition: border-color var(--fs-ease), background var(--fs-ease);
}
.fs-drop.is-over { border-color: var(--fs-accent); background: var(--fs-accent-soft); }
.fs-drop.is-busy { opacity: .6; pointer-events: none; }
.fs-drop__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    cursor: pointer;
    color: var(--fs-ink-3);
    text-align: center;
}
.fs-drop__t { font-size: 16px; font-weight: 600; color: var(--fs-ink); }
.fs-drop__d { font-size: 13.5px; }

.fs-annot[hidden] { display: none; }
.fs-annot {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.fs-annot__imgwrap {
    position: relative;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
    overflow: hidden;
    cursor: crosshair;
    background: var(--fs-bg-sunken);
}
.fs-annot__imgwrap img { display: block; width: 100%; }
.fs-annot__imgwrap img:not([src]), .fs-annot__imgwrap img[src=""] { display: none; }
.fs-annot__hint { margin-top: 10px; }

.fs-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--fs-accent);
    color: #fff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .3);
}
.fs-pin:hover { background: var(--fs-accent-ink); }

.fs-annot__title { font-size: 15px; font-weight: 700; margin-bottom: 14px; }
.fs-pinlist { display: flex; flex-direction: column; gap: 12px; }
.fs-pinitem { display: flex; gap: 10px; align-items: flex-start; }
.fs-pinitem__n {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--fs-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}
.fs-pinitem__note { min-height: 62px; }

.fs-reqmeta {
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--fs-line);
    max-width: 560px;
}
.fs-req > .fs-btn { margin-top: 8px; }

@media (max-width: 860px) {
    .fs-annot { grid-template-columns: minmax(0, 1fr); }
    .fs-reqsteps { flex-direction: column; gap: 10px; }
    .fs-drop__inner { padding: 36px 18px; }
    .fs-drop__t { font-size: 14.5px; }
}

/* ======================== 표 · 모바일 카드형 ========================
   좁은 화면에서 가로 스크롤은 "나란히 놓고 보는" 목적을 깬다.
   행 하나를 카드로 세우고, 각 칸에 열 제목을 붙여 세로로 읽게 한다.
   열 제목은 site.js 가 data-label 로 심는다. */
@media (max-width: 720px) {
    .fs-tablewrap {
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }
    .fs-tablewrap::after { display: none; }

    .fs-table { min-width: 0; display: block; }
    .fs-table thead { display: none; }
    .fs-table tbody { display: block; }

    .fs-table tbody tr {
        display: block;
        margin-bottom: 14px;
        padding: 18px 18px 6px;
        border: 1px solid var(--fs-line);
        border-radius: var(--fs-r);
        background: #fff;
    }

    .fs-table tbody th {
        display: block;
        width: auto;
        padding: 0 0 12px;
        border: 0;
        font-size: 16px;
        font-weight: 700;
        color: var(--fs-ink);
    }

    .fs-table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 11px 0;
        border-bottom: 1px solid var(--fs-line);
        font-size: 14.5px;
        text-align: right;
    }
    .fs-table tbody tr td:last-child { border-bottom: 0; }

    .fs-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        text-align: left;
        font-size: 13.5px;
        font-weight: 600;
        color: var(--fs-ink-3);
    }

    /* 우리 열은 카드 안에서도 눈에 띄어야 한다 */
    .fs-table tbody td.fs-col--ours {
        margin: 0 -18px;
        padding: 11px 18px;
        background: var(--fs-accent-soft);
        border-bottom: 0;
        border-top: 1px solid #c6e8d9;
    }
    .fs-table tbody td.fs-col--ours::before { color: var(--fs-accent-ink); }

    .fs-table__sub { display: block; margin-top: 3px; }
}


/* ======================== 모바일 재조정 ========================
   실측 문제: 첫 화면에 이미지가 한 장도 없고, 데스크톱 여백이 그대로 내려와
   헤더 아래가 텅 비었다. 참고 사이트(템킷·웹쟁이)는 첫 화면을 이미지로 채운다.
   여백을 줄이고, 이미지를 위로 올리고, 하단에 고정 CTA 를 둔다. */
@media (max-width: 768px) {
    /* 1) 히어로 — 여백을 걷어내고 이미지를 첫 화면 안으로 */
    .fs-hero { padding: 16px 0 8px; }
    .fs-hero__grid {
        padding: 26px 20px 0;
        gap: 24px;
        border-radius: var(--fs-r);
    }
    .fs-hero__badge { margin-bottom: 14px; height: 28px; font-size: 12px; }
    .fs-hero__title { font-size: 30px; line-height: 1.25; }
    .fs-hero__desc { margin-top: 14px; font-size: 15.5px; }
    .fs-hero__actions { margin-top: 20px; gap: 8px; }
    /* 주 버튼만 크게. 보조는 텍스트 링크처럼 줄인다 */
    .fs-hero__actions .fs-btn--primary { flex: 1 1 100%; }
    .fs-site .fs-hero__actions .fs-btn--ghost {
        flex: 0 0 auto;
        height: 40px;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: var(--fs-ink-2);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .fs-hero__sub { display: none; }

    /* 이미지: 좌우 여백을 지켜 본문과 같은 선에 맞춘다 (예전엔 화면에 딱 붙었다) */
    .fs-shots { margin: 0; }
    .fs-shots__pc { width: 100%; border-radius: var(--fs-r); }
    .fs-shots__phone { display: none; }

    /* 2) 업종 행 — 화면 끝까지 흐르게 */
    /* 가로 스크롤은 유지하되 첫 항목이 본문 좌측선에서 시작하게 */
    .fs-inds {
        padding: 26px 0 4px;
        margin: 0;
        scroll-padding-left: 0;
    }
    .fs-ind { min-width: 84px; padding: 8px 4px; }
    .fs-ind__icon { width: 46px; height: 46px; border-radius: 13px; }
    .fs-ind__icon svg { width: 21px; height: 21px; }
    .fs-site .fs-ind__label { font-size: 12.5px; }

    /* 3) 지표 — 세로로 길게 늘어지지 않게 3열 유지 */
    .fs-trustbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 28px;
        padding-top: 24px;
    }
    .fs-trustbar__k { font-size: 24px; }
    .fs-trustbar__v { font-size: 11.5px; line-height: 1.45; }

    /* 4) 섹션 여백 */
    .fs-section { padding: 56px 0; }
    .fs-section--tight { padding: 44px 0; }
    .fs-head { margin-bottom: 28px; }
    .fs-sechead { margin-bottom: 22px; }
    .fs-picker__panel { padding: 20px; }
    .fs-cta { padding: 56px 0; }

    /* 5) 하단 고정 CTA — 스크롤 어디서나 신청으로 갈 수 있게 */
    .fs-stickycta {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--fs-line);
    }
    .fs-stickycta__t {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 13px;
        line-height: 1.35;
        color: var(--fs-ink-2);
    }
    .fs-stickycta__t b { display: block; color: var(--fs-ink); font-size: 14px; }
    .fs-stickycta .fs-btn { flex: 0 0 auto; height: 42px; padding: 0 18px; }

    /* 고정 바가 있는 화면만 하단 여백 (바 없는 화면에 빈 72px 를 남기지 않는다) */
    body.fs-site:has(.fs-stickycta) { padding-bottom: 72px; }
}

@media (min-width: 769px) {
    .fs-stickycta { display: none; }
}




/* ======================== 히어로 슬라이더 ======================== */
.fs-slider { position: relative; }
.fs-slider__track { position: relative; }

.fs-slide {
    display: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 40px;
    align-items: center;
    padding: 60px 56px;
    border-radius: var(--fs-r-lg);
    background: linear-gradient(180deg, #f4f7ff 0%, #eef3ff 100%);
    overflow: hidden;
}
.fs-slide.is-active { display: grid; }

.fs-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--fs-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--fs-ink);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
    transition: background var(--fs-ease), border-color var(--fs-ease);
}
.fs-slider__arrow:hover { background: #fff; border-color: var(--fs-line-strong); }
.fs-slider__arrow--prev { left: 14px; }
.fs-slider__arrow--next { right: 14px; }

.fs-slider__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.fs-slider__count {
    font-size: 13px;
    color: var(--fs-ink-3);
    font-variant-numeric: tabular-nums;
}
.fs-slider__count b { color: var(--fs-ink); font-weight: 700; }
.fs-slider__dots { display: flex; gap: 7px; }
.fs-slider__dot {
    width: 8px; height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fs-line-strong);
    cursor: pointer;
    transition: background var(--fs-ease), width var(--fs-ease);
}
.fs-slider__dot.is-active { width: 22px; border-radius: var(--fs-r-full); background: var(--fs-ink); }
.fs-slider__play svg[hidden] { display: none; }
.fs-slider__play {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: 1px solid var(--fs-line);
    border-radius: 50%;
    background: #fff;
    color: var(--fs-ink-2);
    cursor: pointer;
}

@media (max-width: 980px) {
    .fs-slide { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 32px 24px; }
}
@media (max-width: 768px) {
    .fs-slide { padding: 26px 20px 0; gap: 24px; border-radius: var(--fs-r); }
    .fs-slider__arrow { display: none; }
    .fs-slider__nav { margin-top: 14px; }
}

/* ======================== 업종 메가메뉴 ======================== */
.fs-mega {
    position: absolute;
    left: 0; right: 0;
    z-index: 120;
    background: #fff;
    border-top: 1px solid var(--fs-line);
    border-bottom: 1px solid var(--fs-line);
    box-shadow: 0 20px 40px rgba(16, 24, 40, .12);
}
.fs-mega[hidden] { display: none; }
.fs-mega__inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px var(--fs-gutter) 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}
.fs-mega__col { min-width: 0; }
.fs-mega__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--fs-line);
    color: var(--fs-ink);
}
.fs-mega__head svg { color: var(--fs-ink-2); }
.fs-mega__links { display: flex; flex-direction: column; gap: 8px; }
.fs-site .fs-mega__links a { font-size: 14px; color: var(--fs-ink-2); }
.fs-site .fs-mega__links a:hover { color: var(--fs-ink); }
.fs-mega__foot {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid var(--fs-line);
    font-size: 14px;
    color: var(--fs-ink-3);
}

@media (max-width: 900px) { .fs-mega { display: none; } }

/* ======================== 모바일 드로어 ======================== */
.fs-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(10, 16, 28, .5);
    opacity: 0;
    transition: opacity .22s ease;
}
.fs-drawer-overlay.is-open { opacity: 1; }

.fs-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 150;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.32, .72, .35, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fs-drawer.is-open { transform: translateX(0); }
body.fs-drawer-lock { overflow: hidden; }

.fs-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--fs-line);
}
.fs-drawer__brand { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.fs-drawer__close {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; background: none; color: var(--fs-ink);
    cursor: pointer; border-radius: var(--fs-r-sm);
}
.fs-drawer__close:hover { background: var(--fs-bg-soft); }

.fs-drawer__account {
    padding: 18px;
    background: #10233f;
    color: #b9c7dd;
}
.fs-drawer__hello { font-size: 14px; margin-bottom: 12px; }
.fs-drawer__hello b { color: #fff; }
.fs-drawer__accbtns { display: flex; gap: 8px; }
.fs-drawer__accbtns .fs-btn { flex: 1; }
.fs-site .fs-drawer__account .fs-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.fs-drawer__sec { padding: 14px 18px 6px; border-bottom: 1px solid var(--fs-line); }
.fs-drawer__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--fs-ink-3);
    margin-bottom: 8px;
}

.fs-drawer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: 12px;
}
.fs-site .fs-drawer__cat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--fs-ink);
    background: #fff;
}
.fs-site .fs-drawer__cat:active { background: var(--fs-bg-soft); }
.fs-drawer__caticon { color: var(--fs-ink-2); display: grid; place-items: center; }

.fs-site .fs-drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 2px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fs-ink);
    border-bottom: 1px solid var(--fs-bg-soft);
}
.fs-drawer__sec .fs-drawer__link:last-of-type { border-bottom: 0; }
.fs-drawer__arrow { color: var(--fs-ink-3); flex: 0 0 auto; margin-left: auto; }
.fs-drawer__link .fs-navbar__new { position: static; margin-left: 4px; }

.fs-drawer__cta {
    margin-top: auto;
    padding: 18px;
    border-top: 1px solid var(--fs-line);
    background: var(--fs-bg-soft);
}
.fs-drawer__ctanote {
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--fs-ink-3);
}

/* ======================== 인증 화면 (좌우 분할) ========================
   왼쪽 네이비 브랜드 패널 + 오른쪽 흰 폼.
   화면 전체를 네이비로 깔면 사이트(흰 톤)와 이 화면만 따로 논다. */
body.fs-authbody { background: #fff; padding-bottom: 0; }

.fs-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
}

/* ── 왼쪽 패널 ── */
.fs-auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 34px;
    padding: 64px clamp(40px, 6vw, 88px);
    /* 남색(#10233f) → 에메랄드 그라데이션의 짙은 끝. 본문 #b9c7dd 대비 9.65:1 */
    background: #04241a;
    color: #b9c7dd;
    overflow: hidden;
}
.fs-auth__aside::after {
    content: '';
    position: absolute;
    right: -18%;
    top: -10%;
    width: 70%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(12, 92, 64, .55), transparent);
    pointer-events: none;
}
.fs-auth__aside > * { position: relative; z-index: 1; }

.fs-auth__brand { display: flex; flex-direction: column; line-height: 1.15; }
.fs-auth__brand-kr { font-size: 13px; color: #8fb3a4; letter-spacing: .02em; }  /* 7.19:1 */
.fs-auth__brand-en { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.fs-site .fs-auth__brand:hover .fs-auth__brand-en { color: #cfe6dc; }

.fs-auth__pitch {
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.35;
    color: #fff;
}

.fs-auth__points { display: flex; flex-direction: column; gap: 16px; }
.fs-auth__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.65; }
.fs-auth__points svg { flex: 0 0 auto; margin-top: 3px; color: #6ee7b7; }
.fs-auth__points b { display: block; color: #fff; font-weight: 700; }

.fs-auth__aside-foot { font-size: 13px; color: #86a99a; line-height: 1.7; }  /* 6.41:1 */

/* ── 오른쪽 폼 ── */
.fs-auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: #fff;
}
.fs-auth__box { width: 100%; max-width: 400px; }
.fs-auth__minibrand {
    display: none;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--fs-ink);
    margin-bottom: 22px;
}
.fs-auth__title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-bottom: 28px;
    color: var(--fs-ink);
}

.fs-auth__foot {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-line);
    display: flex;
    gap: 10px;
    font-size: 13.5px;
    color: var(--fs-ink-3);
}

/*
 * 플러그인 폼은 자기 카드(배경·테두리·그림자·패딩)를 갖고 온다.
 * 우리 레이아웃 안에서는 껍데기를 벗겨 평평하게 놓는다.
 */
.fs-auth__form .fluxmember-auth,
.fs-auth__form .fluxmember-auth__card,
.fs-auth__form [class*="auth__card"],
.fs-auth__form [class*="-auth"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    border-radius: 0 !important;
}
/* 같은 제목을 플러그인이 또 그린다 — 감춘다.
   position:absolute 로 숨기면 문서 밖으로 삐져나가 가로 스크롤을 만든다(실제로 그랬다).
   자리를 차지하지 않는 방식으로 없앤다. */
.fs-auth__form .fluxmember-auth__title { display: none; }

body.fs-authbody .fs-auth__form label,
body.fs-authbody .fs-auth__form legend,
body.fs-authbody .fs-auth__form p,
body.fs-authbody .fs-auth__form span,
body.fs-authbody .fs-auth__form div,
body.fs-authbody .fs-auth__form h2 { color: var(--fs-ink); }
.fs-auth__form label, .fs-auth__form legend { font-size: 14px; font-weight: 600; }

.fs-auth__form input[type="text"],
.fs-auth__form input[type="email"],
.fs-auth__form input[type="password"],
.fs-auth__form input[type="tel"],
.fs-auth__form select {
    background: #fff !important;
    border: 1px solid var(--fs-line-strong) !important;
    color: var(--fs-ink) !important;
    border-radius: var(--fs-r-sm) !important;
    height: 48px;
    width: 100%;
    font-size: 15px;
}
.fs-auth__form input:focus,
.fs-auth__form select:focus {
    border-color: var(--fs-accent) !important;
    box-shadow: 0 0 0 3px var(--fs-accent-soft) !important;
    outline: none;
}

.fs-auth__form button[type="submit"],
.fs-auth__form input[type="submit"],
.fs-auth__form [class*="submit"],
.fs-auth__form [class*="btn--primary"] {
    /* 주 CTA 는 전역에서 검정이다. 여기만 파랑이면 로그인 화면만 옛 톤으로 보인다. */
    background: var(--fs-ink) !important;
    border: 1px solid var(--fs-ink) !important;
    color: #fff !important;
    height: 52px;
    width: 100%;
    border-radius: var(--fs-r-full) !important;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
}
.fs-auth__form button[type="submit"]:hover { background: #1a1a1a !important; }

.fs-site .fs-auth__form a { color: var(--fs-accent); font-weight: 600; }
.fs-site .fs-auth__form a:hover { color: var(--fs-accent-ink); }
.fs-auth__form hr { border: 0; border-top: 1px solid var(--fs-line); margin: 22px 0; }

@media (max-width: 900px) {
    /* 모바일 — 네이비 패널은 상단 띠로 압축한다 */
    .fs-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .fs-auth__aside { display: none; }
    .fs-auth__main { padding: 40px 20px 56px; min-height: 100vh; align-items: flex-start; }
    .fs-auth__minibrand { display: block; }
    .fs-auth__title { font-size: 23px; margin-bottom: 22px; }
}

/* ======================== 모바일 줄바꿈 규칙 ========================
   한국어 문장이 좁은 화면에서 단어 중간에 꺾이거나("겁니 다"),
   데스크톱용 <br> 이 어색한 두 글자 줄을 만드는 문제.
   - 전역 keep-all 은 이미 body 에 있다. 여기서는 남은 구멍을 막는다. */
@media (max-width: 768px) {
    /* 문장 사이 <br> 은 살린다 — 없애면 "0원.번 돈은"처럼 두 문장이 붙는다.
       대신 br 뒤가 두세 글자만 남는 어색한 줄은 balance 로 완화한다. */

    /* 제목이 균형 있게 두 줄로 나뉘도록 (지원 브라우저에서) */
    .fs-hero__title,
    .fs-h2,
    .fs-feature__t,
    .fs-cta__title { text-wrap: balance; }

    /* 숫자·단위가 붙은 짧은 라벨은 중간에서 꺾이지 않게 */
    .fs-trustbar__k,
    .fs-plan__amount,
    .fs-calc__value { white-space: nowrap; }
}


/* ======================== 모바일 리듬 통일 ========================
   실측: 44px(tight)·56px(기본)이 섞여 이웃 섹션 사이가 88~112px 로 들쭉났다.
   모바일은 한 단계만 쓴다 — 전 섹션 48px. 배경이 같은 섹션이 연달아 오면
   경계가 없으므로 그 절반이면 충분하다. */
@media (max-width: 768px) {
    .fs-section,
    .fs-section--tight,
    .fs-cta { padding-top: 48px; padding-bottom: 48px; }

    /* 같은 흰 배경 섹션이 연달아 붙으면 사이가 96px — 뒤 섹션의 위를 줄인다 */
    .fs-section:not(.fs-section--soft) + .fs-section:not(.fs-section--soft) { padding-top: 8px; }

    /* 고정 헤더(유틸바+메인바) 아래로 앵커가 숨지 않게 */
    section[id], [id^="faq"] { scroll-margin-top: 76px; }

    /* ── FAQ — 한 화면에 더 많은 질문이 들어오게 ── */
    .fs-faqcols { gap: 26px; }
    .fs-faqgroup__t {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .04em;
        color: var(--fs-ink-3);
        margin-bottom: 2px;
    }
    .fs-faq__q {
        padding: 15px 0;
        font-size: 15px;
        line-height: 1.5;
        gap: 12px;
    }
    .fs-faq__q::after { width: 8px; height: 8px; }
    .fs-faq__a {
        padding: 0 0 16px;
        font-size: 14.5px;
        line-height: 1.75;
    }

    /* ── 법적 문서 — 조문 밀도 ── */
    .fs-legal__sec { padding-top: 20px; margin-top: 20px; }
    .fs-legal__h { font-size: 16.5px; margin-bottom: 10px; }
    .fs-legal__p { font-size: 14.5px; line-height: 1.75; padding-left: 22px; margin-bottom: 9px; }

    /* ── 인라인 여백 정리: 큰 화면 기준으로 준 마진이 그대로 내려오던 것 ── */
    .fs-head { margin-bottom: 24px; }
    .fs-sechead { margin-bottom: 18px; }
    .fs-centerhead { margin-bottom: 24px; }
    .fs-picker__value { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .fs-site *,
    .fs-site *::before,
    .fs-site *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   시작하기 (/start) — 디자인 고르기 → 요금제 고르기 → 결제
   설치비는 템플릿이, 구독료는 요금제가 정한다. 두 값이 모두 정해지는
   화면이므로 "무엇을 골랐는지"가 화면에서 사라지지 않아야 한다.
   ═══════════════════════════════════════════════════════════ */

.fs-site .fs-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    font-size: 13px;
    color: var(--fs-ink-3);
}

.fs-site .fs-steps__i {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px 7px 8px;
    border: 1px solid var(--fs-line);
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
}

.fs-site .fs-steps__i span {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fs-bg-sunken);
    color: var(--fs-ink-3);
    font-size: 12px;
    font-weight: 700;
}

.fs-site .fs-steps__i.is-done { color: var(--fs-ink-2); }
.fs-site .fs-steps__i.is-done span { background: var(--fs-ink); color: #fff; }

.fs-site .fs-steps__i.is-now {
    color: var(--fs-ink);
    font-weight: 600;
    border-color: var(--fs-line-strong);
}
.fs-site .fs-steps__i.is-now span { background: var(--fs-accent); color: #fff; }

/* 고른 디자인 요약 바 */
.fs-site .fs-pickbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin: 0 0 30px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
}

.fs-site .fs-pickbar__img {
    width: 108px;
    height: 74px;
    object-fit: cover;
    border-radius: var(--fs-r-sm);
    flex: none;
    background: var(--fs-bg-sunken);
}

.fs-site .fs-pickbar__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.fs-site .fs-pickbar__k {
    font-size: 12px;
    color: var(--fs-ink-3);
    letter-spacing: .02em;
}

.fs-site .fs-pickbar__name {
    font-size: 17px;
    font-weight: 700;
    color: var(--fs-ink);
    line-height: 1.35;
}

.fs-site .fs-pickbar__fee {
    font-size: 14px;
    color: var(--fs-ink-2);
}
.fs-site .fs-pickbar__fee b { color: var(--fs-ink); }

.fs-site a.fs-pickbar__change {
    flex: none;
    align-self: center;
    font-size: 13px;
    color: var(--fs-ink-2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fs-site a.fs-pickbar__change:hover { color: var(--fs-ink); }

.fs-site .fs-plan__cta form { margin: 0; }

@media (max-width: 640px) {
    .fs-site .fs-steps { gap: 6px; font-size: 12px; }
    .fs-site .fs-steps__i { padding: 6px 11px 6px 7px; }

    .fs-site .fs-pickbar {
        gap: 13px;
        padding: 12px;
        margin-bottom: 26px;
        flex-wrap: wrap;
    }
    .fs-site .fs-pickbar__img { width: 84px; height: 60px; }
    .fs-site .fs-pickbar__name { font-size: 16px; }
    .fs-site .fs-pickbar__fee { font-size: 13px; }
    .fs-site a.fs-pickbar__change {
        width: 100%;
        text-align: center;
        padding-top: 4px;
        border-top: 1px solid var(--fs-line);
    }
}

/* 템플릿 카드의 설치비 표기 — 가격은 카드에서 숨기지 않는다(고지가 늦을수록 이탈이 커진다). */
.fs-site .fs-tpl__fee {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--fs-ink-2);
    line-height: 1.5;
}
.fs-site .fs-tpl__fee b { color: var(--fs-ink); font-weight: 700; }
.fs-site .fs-tpl__fee span { color: var(--fs-ink-3); }
/* 한 줄일 때만 가운뎃점으로 잇는다. 줄이 바뀌면 점이 줄 앞에 홀로 남아 지저분해진다. */
.fs-site .fs-tpl__fee span::before { content: " \00b7 "; }

@media (max-width: 640px) {
    .fs-site .fs-tpl__fee { font-size: 13px; }
    .fs-site .fs-tpl__fee span { display: block; }
    .fs-site .fs-tpl__fee span::before { content: none; }
}

/* 요금표 안의 링크 — 표 안에서 포인트색이 튀면 금액보다 링크가 먼저 읽힌다. */
.fs-site a.fs-plan__link {
    color: var(--fs-ink);
    text-decoration: underline;
    text-decoration-color: var(--fs-line-strong);
    text-underline-offset: 3px;
}
.fs-site a.fs-plan__link:hover { text-decoration-color: var(--fs-ink-3); }

/* ============================================================
   Tone Layer — 소비자용 라이트 톤 전용 컴포넌트
   ------------------------------------------------------------
   전부 신규 클래스라 기존 규칙과 충돌하지 않는다.
   기하값은 2026-08-25 실측 기준:
   섹션 120px / 컨테이너 1040px / 헤드→본문 60px / 그리드 gap 60·24px
   ============================================================ */

/* ---------- 미디어 웰 ----------
   회색 면이 카드고, 캡션은 웰 "바깥 아래"에 온다.
   웰 안에 글자를 넣지 않는 게 이 패턴의 핵심이다. */
.fs-well {
    position: relative;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-well--tall  { aspect-ratio: 3 / 4; }
.fs-well--wide  { aspect-ratio: 16 / 10; }
.fs-well--blue  { background: var(--fs-bg-sunken); }
.fs-well--dark  { background: var(--fs-dark); }
.fs-well > img  { width: 100%; height: 100%; object-fit: cover; }

.fs-wellcard { display: flex; flex-direction: column; gap: 20px; }
.fs-wellcard__body { text-align: center; padding: 0 8px; }
.fs-wellcard__title {
    /* span 으로 쓰기 때문에 block 을 명시해야 한다. 인라인이면 설명과
       한 줄로 붙고 아래 margin-top 도 먹지 않는다. */
    display: block;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
    color: var(--fs-ink);
}
.fs-wellcard__desc {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
/* 링크 카드일 때만 뜬다 — 안 눌리는 카드가 움직이면 거짓말이 된다 */
a.fs-wellcard { color: inherit; display: flex; }
a.fs-wellcard:hover { color: inherit; }
a.fs-wellcard:hover .fs-well { transform: translateY(-4px); box-shadow: var(--fs-shadow-lg); }
a.fs-wellcard:hover .fs-arrow { background: var(--fs-accent); }

/* ---------- 원형 화살표 ----------
   웰 우하단에 걸치는 검정 원. "여기 눌러도 된다"는 유일한 표식이다. */
.fs-arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fs-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: background var(--fs-ease), transform var(--fs-ease);
}
.fs-arrow svg { width: 22px; height: 22px; display: block; }
.fs-arrow--sm { width: 44px; height: 44px; right: 12px; bottom: 12px; }
.fs-arrow--static { position: static; }

/* ---------- 스티커 ----------
   히어로 주변에 흩뿌리는 장식. 회전각은 -6deg / +15deg 두 가지만 쓴다.
   더 늘리면 정렬이 무너진 것처럼 보인다. */
.fs-sticker {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .1));
}
.fs-sticker--l  { transform: rotate(-6deg); }
.fs-sticker--r  { transform: rotate(15deg); }
@media (max-width: 900px) { .fs-sticker { display: none; } }

/* ---------- 말풍선 ----------
   버튼 위에 얹는 작은 힌트. 꼬리는 CSS 삼각형으로 만든다. */
.fs-bubble {
    position: relative;
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--fs-r-full);
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--fs-accent) inset;
    color: var(--fs-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}
.fs-bubble::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1.5px solid var(--fs-accent);
    border-bottom: 1.5px solid var(--fs-accent);
    transform: translateX(-50%) rotate(45deg);
}
.fs-bubblestack {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ---------- 하단 고정 CTA ----------
   스크롤 내내 따라오는 검정 알약. 히어로를 지나야 나타난다. */
.fs-dock {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 90;
    transform: translate(-50%, 130%);
    transition: transform var(--fs-ease-out), opacity var(--fs-ease);
    opacity: 0;
}
.fs-dock.is-on { transform: translate(-50%, 0); opacity: 1; }
.fs-dock__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 16px 0 26px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.02em;
    box-shadow: var(--fs-shadow);
    transition: transform var(--fs-ease);
}
.fs-site .fs-dock__btn { color: #fff; }
.fs-dock__btn:hover { transform: translateY(-2px); }
.fs-dock__badge {
    padding: 5px 10px;
    border-radius: var(--fs-r-full);
    background: #fff;
    color: var(--fs-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
@media (max-width: 600px) {
    .fs-dock { left: 16px; right: 16px; bottom: 16px; transform: translateY(130%); }
    .fs-dock.is-on { transform: translateY(0); }
    .fs-dock__btn { width: 100%; justify-content: center; height: 56px; }
}

/* ---------- 스크롤 리빌 ----------
   opacity + translateY 만 쓴다. scale 이나 blur 를 섞으면
   본문 읽는 중에 글자가 흔들려서 오히려 거슬린다. */
.fs-rv {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--fs-ease-out), transform var(--fs-ease-out);
}
.fs-rv.is-in { opacity: 1; transform: none; }
.fs-rv--d1 { transition-delay: .08s; }
.fs-rv--d2 { transition-delay: .16s; }
.fs-rv--d3 { transition-delay: .24s; }
.fs-rv--d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
    .fs-rv { opacity: 1; transform: none; transition: none; }
    .fs-dock { transition: none; }
    .fs-btn:hover, a.fs-wellcard:hover .fs-well { transform: none; }
}

/* ---------- 기능 목차 — 좌우 교대 목록 (2026-09-16, page-feature.php 부모) ----------
   같은 크기 카드를 나열하는 대신, 사진과 글이 한 줄씩 자리를 바꾸며 읽힌다.
   숫자를 크게 눕혀 리듬을 만든다(레퍼런스: 에디토리얼 목차). */
.fs-featlist {
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.fs-featrow {
    display: flex;
    align-items: center;
    gap: 64px;
    text-decoration: none;
    color: inherit;
}
.fs-featrow--rev { flex-direction: row-reverse; }
.fs-featrow__media { flex: 0 0 auto; width: 52%; margin: 0; }
.fs-featrow__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.fs-featrow__num {
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--fs-line-strong);
    font-variant-numeric: tabular-nums;
}
.fs-featrow__eyebrow {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--fs-accent);
}
.fs-featrow__title {
    display: block;
    margin-top: 10px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
    color: var(--fs-ink);
}
.fs-featrow__desc {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--fs-ink-3);
}
.fs-featrow__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fs-ink);
}
.fs-featrow:hover .fs-featrow__cta { color: var(--fs-accent); }
.fs-featrow:hover .fs-featrow__cta .fs-btn__arrow { transform: translateX(3px); }
.fs-featrow:hover .fs-featrow__media.fs-well { transform: translateY(-4px); box-shadow: var(--fs-shadow-lg); }
.fs-featrow:hover .fs-arrow { background: var(--fs-accent); }

@media (max-width: 900px) {
    .fs-featlist { gap: 56px; }
    .fs-featrow,
    .fs-featrow--rev { flex-direction: column; align-items: stretch; gap: 24px; }
    .fs-featrow__media { width: 100%; }
    .fs-featrow__num { font-size: 48px; }
    .fs-featrow__title { font-size: 24px; }
}

/* ---------- 3열 그리드 ---------- */
.fs-tgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 24px;
}
.fs-tgrid--2 { grid-template-columns: repeat(2, 1fr); gap: 60px 24px; }
.fs-tgrid--4 { grid-template-columns: repeat(4, 1fr); gap: 48px 24px; }
@media (max-width: 900px) {
    .fs-tgrid, .fs-tgrid--4 { grid-template-columns: repeat(2, 1fr); gap: 40px 16px; }
}
@media (max-width: 560px) {
    .fs-tgrid, .fs-tgrid--2, .fs-tgrid--4 { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- 섹션 헤드 (센터) ---------- */
.fs-thead { text-align: center; max-width: 760px; margin: 0 auto 60px; }
.fs-thead__eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}
.fs-thead__title {
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-thead__lead {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
@media (max-width: 560px) { .fs-thead { margin-bottom: 40px; } }

/* ============================================================
   Header — 플로팅 알약 1단
   ------------------------------------------------------------
   화면 위에 "떠 있는" 흰 알약. 스크롤하면 그림자만 진해진다.
   높이를 키우지 않는다 — 이 톤에서 두꺼운 헤더는 즉시 무거워 보인다.
   ============================================================ */
.fs-hd {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 var(--fs-gutter);
}

.fs-hd__bar {
    max-width: var(--fs-maxw);
    margin: 0 auto;
    height: var(--fs-header-h);
    padding: 0 12px 0 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-radius: var(--fs-r-full);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--fs-shadow-sm);
    transition: box-shadow var(--fs-ease), background var(--fs-ease);
}
.fs-hd.is-stuck .fs-hd__bar {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--fs-shadow);
}

/* 마케팅 페이지 본문은 떠 있는 헤더 높이만큼 내려가야 한다. */
.fs-site .fs-main-content { padding-top: calc(var(--fs-header-h) + 16px); }

/* ---------- 브랜드 ---------- */
/* `.fs-site a`(0,1,1) 가 `.fs-hd__brand`(0,1,0) 를 이긴다.
   브랜드가 파랗게 나왔던 원인 — 색 규칙은 .fs-site 를 앞에 붙인다. */
.fs-hd__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    font-weight: 800;
    letter-spacing: -.04em;
}
.fs-site .fs-hd__brand { color: var(--fs-ink); }
.fs-site .fs-hd__brand:hover { color: var(--fs-ink); }
.fs-hd__mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--fs-ink);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
}
.fs-hd__name { font-size: 20px; }

/* ---------- 주 메뉴 ---------- */
.fs-hd__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
}
.fs-hd__item { position: relative; }

.fs-hd__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    border-radius: var(--fs-r-full);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--fs-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--fs-ease), color var(--fs-ease);
}
.fs-site .fs-hd__link { color: var(--fs-ink); }
.fs-site .fs-hd__link:hover { background: var(--fs-bg-soft); color: var(--fs-ink); }

.fs-hd__chev { transition: transform var(--fs-ease); flex: none; }
.fs-hd__link--drop[aria-expanded="true"] { background: var(--fs-bg-soft); }
.fs-hd__link--drop[aria-expanded="true"] .fs-hd__chev { transform: rotate(180deg); }

/* ---------- 드롭다운 패널 ---------- */
.fs-hd__panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    padding: 10px;
    background: #fff;
    border-radius: var(--fs-r-lg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--fs-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fs-hd__panel[hidden] { display: none; }

.fs-hd__panellink {
    display: block;
    padding: 11px 14px;
    border-radius: var(--fs-r-sm);
    color: var(--fs-ink);
    transition: background var(--fs-ease);
}
.fs-site .fs-hd__panellink { color: var(--fs-ink); }
.fs-site .fs-hd__panellink:hover { background: var(--fs-bg-soft); color: var(--fs-ink); }

.fs-hd__panelname {
    display: block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.fs-hd__paneldesc {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.4;
    color: var(--fs-ink-3);
}

/* ---------- 우측 ---------- */
.fs-hd__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}

.fs-hd__icon {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fs-ink);
    cursor: pointer;
    transition: background var(--fs-ease);
}
.fs-site .fs-hd__icon { color: var(--fs-ink); }
.fs-site .fs-hd__icon:hover { background: var(--fs-bg-soft); color: var(--fs-ink); }

.fs-hd__burger {
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--fs-ink);
    cursor: pointer;
}
.fs-hd__burger:hover { background: var(--fs-bg-soft); }

/* ---------- 검색 (접힘) ---------- */
.fs-hd__search {
    max-width: var(--fs-maxw);
    margin: 10px auto 0;
    padding: 12px;
    background: #fff;
    border-radius: var(--fs-r-lg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--fs-shadow-lg);
}
.fs-hd__search[hidden] { display: none; }

.fs-hd__searchform {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    color: var(--fs-ink-3);
}
.fs-hd__searchinput {
    flex: 1;
    min-width: 0;
    height: 44px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--fs-ink);
}
.fs-hd__searchinput::placeholder { color: var(--fs-ink-4); }
.fs-hd__searchinput:focus { outline: 0; }

/* ---------- 반응형 ---------- */
@media (max-width: 1000px) {
    .fs-hd__nav { display: none; }
    .fs-hd__burger { display: inline-flex; }
    .fs-hd__right { margin-left: auto; }
    .fs-hd__auth { display: none; }
}
/* 좁은 화면에서 알약 안이 넘치면 햄버거가 바 밖으로 밀려나 사라진다.
   실측(375px): 바 343px 안에 콘텐츠 399px — 56px 초과.
   헤더 CTA 를 접는 쪽을 택했다. 하단 고정 CTA(.fs-dock)가 같은 일을 하므로
   같은 버튼을 두 개 두는 셈이었다. */
@media (max-width: 700px) {
    .fs-hd__right .fs-btn { display: none; }
}

@media (max-width: 560px) {
    .fs-hd { top: 10px; padding: 0 16px; }
    .fs-hd__bar { height: 60px; padding: 0 8px 0 12px; gap: 4px; }
    .fs-hd__name { font-size: 18px; }
    .fs-hd__mark { width: 28px; height: 28px; font-size: 16px; }
    .fs-site .fs-main-content { padding-top: 78px; }

    /* 브랜드가 길어져도 아이콘 자리를 먹지 않게 한다. */
    .fs-hd__brand { min-width: 0; }
    .fs-hd__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fs-hd__right { margin-left: auto; flex: none; }
}

/* ============================================================
   Footer — 검정 블록
   ------------------------------------------------------------
   순서: 큰 CTA → 링크 열 → 사업자 정보 → 초대형 워드마크.
   워드마크는 일부러 아래로 잘리게 둔다. 다 보이면 로고가 아니라
   제목처럼 읽혀서 사업자 정보를 밀어낸다.
   ============================================================ */
.fs-ft {
    position: relative;
    background: var(--fs-dark);
    color: var(--fs-dark-ink);
    padding: 100px 0 0;
    overflow: hidden;
}

/* ---------- 상단 CTA ---------- */
.fs-ft__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding-bottom: 80px;
}
.fs-ft__ctatitle {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.35;
    color: #fff;
}
.fs-ft__ctasub {
    display: inline-block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--fs-dark-ink-2);
}

/* ---------- 링크 열 ---------- */
.fs-ft__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
    padding-bottom: 64px;
}
.fs-ft__coltitle {
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--fs-dark-ink-2);
}
.fs-ft__links { display: flex; flex-direction: column; gap: 13px; }
.fs-site .fs-ft__links a {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #fff;
    transition: color var(--fs-ease);
}
.fs-site .fs-ft__links a:hover { color: var(--fs-dark-ink-2); }

/* ---------- 사업자 정보 ---------- */
.fs-ft__legal {
    padding: 28px 0 40px;
    border-top: 1px solid var(--fs-dark-line);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -.02em;
    color: var(--fs-dark-ink-2);
}
.fs-ft__copy { flex: none; }

/* ---------- 워드마크 ---------- */
.fs-ft__mark {
    margin: 0 0 -.22em;
    font-size: clamp(72px, 17vw, 220px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .9;
    color: #fff;
    /* 배경과 거의 같은 밝기로 눌러 둔다 — 읽히는 게 목적이 아니다. */
    opacity: .07;
    user-select: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .fs-ft { padding-top: 72px; }
    .fs-ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
    .fs-ft__cta { padding-bottom: 56px; }
}
@media (max-width: 560px) {
    .fs-ft__cta { flex-direction: column; align-items: flex-start; gap: 24px; }
    .fs-ft__cta .fs-btn { width: 100%; }
    .fs-ft__legal { flex-direction: column; gap: 10px; }
}

/* ============================================================
   Hero — 센터 정렬
   ------------------------------------------------------------
   문장 한 덩어리 + 검정 CTA 하나. 좌우는 비워 둔다.
   스티커는 문장 폭 바깥에만 놓는다 — 글자와 겹치면 장식이 아니라 방해다.
   ============================================================ */
.fs-hero2 {
    position: relative;
    padding: 96px 0 var(--fs-section-pad);
    overflow: hidden;
}
.fs-hero2 .fs-wrap { position: relative; }

.fs-hero2__inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.fs-hero2__badge {
    display: inline-block;
    margin-bottom: 24px;
    padding: 9px 16px;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

.fs-hero2__title {
    font-size: clamp(34px, 6vw, 64px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.22;
    color: var(--fs-ink);
}

.fs-hero2__desc {
    margin-top: 24px;
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.6;
    color: var(--fs-ink-3);
}

.fs-hero2__actions {
    margin-top: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.fs-hero2__note {
    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.6;
    color: var(--fs-ink-4);
}

/* ---------- 스티커 ----------
   문장 폭(760px) 바깥 여백에만 앉힌다. 1200px 아래에서는 자리가
   없으므로 .fs-sticker 규칙이 900px 이하에서 통째로 감춘다. */
.fs-hero2__st {
    padding: 12px 20px;
    border-radius: var(--fs-r-full);
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--fs-ink) inset, var(--fs-shadow-lg);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--fs-ink);
    white-space: nowrap;
}
.fs-hero2__st--a { top: 40px;  left: 0; }
.fs-hero2__st--b { top: 20px;  right: 0; background: var(--fs-accent); color: #fff; box-shadow: var(--fs-shadow-lg); }
.fs-hero2__st--c { top: 210px; right: 24px; }
.fs-hero2__st--d { top: 240px; left: 30px; }
@media (max-width: 1180px) {
    .fs-hero2__st--c, .fs-hero2__st--d { display: none; }
}

/* ---------- 프리뷰 카드 행 ---------- */
.fs-hero2__cards { margin-top: 72px; }
.fs-hero2__cards .fs-well { padding: 0; }

/* 업종 행·신뢰 지표는 카드 아래로 이어진다 */
.fs-hero2 .fs-inds { margin-top: 72px; }
.fs-hero2 .fs-trustbar { margin-top: 56px; }

@media (max-width: 768px) {
    .fs-hero2 { padding: 64px 0 88px; }
    .fs-hero2__cards { margin-top: 48px; }
    .fs-hero2 .fs-inds { margin-top: 48px; }
    .fs-hero2 .fs-trustbar { margin-top: 40px; }
    .fs-hero2__actions .fs-btn { width: 100%; }
}

/* ============================================================
   Tone Overrides — 기존 공유 컴포넌트를 새 톤으로 끌어올린다
   ------------------------------------------------------------
   여기 있는 규칙은 전부 "이미 있는 클래스"를 다시 칠하는 것이다.
   18개 페이지 템플릿의 마크업을 건드리지 않고 톤을 통일하려는 목적이라
   파일 맨 뒤에 둔다(뒤에 와야 이긴다).

   공통 원칙 세 가지:
     1. 1px 선을 지우고 회색 면(웰)으로 바꾼다
     2. radius 를 10~14px 에서 20~30px 로 올린다
     3. 섹션 헤드는 가운데로 모은다
   ============================================================ */

/* ---------- 섹션 헤드: 좌측 정렬 행 → 센터 정렬 열 ----------
   마크업이 [제목 박스][더보기 링크] 2단 flex 라서, 방향만 바꾸면
   더보기가 제목 아래 가운데로 자연스럽게 내려간다. */
.fs-sechead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 60px;
}
.fs-sechead__label {
    display: inline-block;
    margin-bottom: 0;
    padding: 7px 14px;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}
.fs-sechead__title {
    justify-content: center;
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-sechead__new {
    border: 0;
    background: var(--fs-ink);
    color: #fff;
    height: 24px;
    font-weight: 800;
}
.fs-site .fs-sechead__more {
    order: 3;
    /* 원본이 좌측정렬 행이라 margin-left:auto 로 오른쪽에 밀어 두었다.
       열로 세운 뒤에는 그게 그대로 남아 혼자 오른쪽에 붙는다. */
    margin-left: 0;
    align-self: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
.fs-site .fs-sechead__more:hover { color: var(--fs-ink); }

/* ---------- 센터 헤드 ---------- */
.fs-centerhead { margin-bottom: 60px; }
.fs-centerhead__t {
    font-size: clamp(26px, 3.4vw, 44px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-centerhead__d {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 섹션 제목(h2) ---------- */
.fs-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 14px;
    border-radius: var(--fs-r-full);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
}

/* ---------- 카드: 선 → 면 ---------- */
.fs-dcard {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: transparent;
    overflow: visible;
}
.fs-dcard:hover { border-color: transparent; box-shadow: none; }
.fs-dcard__shot {
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
    overflow: hidden;
    transition: transform var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-dcard:hover .fs-dcard__shot {
    transform: translateY(-4px);
    box-shadow: var(--fs-shadow-lg);
}
.fs-dcard__body { padding: 20px 4px 0; text-align: center; }
.fs-dcard__top { justify-content: center; }
.fs-dcard__name { font-size: 20px; letter-spacing: -.04em; }
.fs-dcard__desc {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 템플릿 그리드 ---------- */
.fs-tplgrid { gap: 60px 24px; }

/* ---------- 기능 블록 ---------- */
.fs-feature__num {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--fs-accent);
}
.fs-feature__t {
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-feature__d {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
.fs-feature {
    /* 블록마다 밑줄이 그어져 있었다. 면으로 나누는 톤에서는
       이 선 하나가 그 구간만 옛 디자인으로 보이게 만든다. */
    border-bottom: 0;
    padding: 72px 0;
}
.fs-feature__shot {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
    overflow: hidden;
    box-shadow: none;
}

/* ---------- 하단 CTA 블록 ---------- */
.fs-cta {
    border-top: 0;
    background: var(--fs-bg-soft);
    padding: var(--fs-section-pad) 0;
}
.fs-cta__title {
    font-size: clamp(26px, 3.4vw, 44px);
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-cta__desc {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 요금제 카드 ---------- */
.fs-plans { gap: 24px; }
/* 테두리 대신 옅은 면. 추천 플랜만 검정 링으로 튀게 둔다 —
   면이 같으면 어느 게 추천인지 알 수 없다. */
.fs-plan {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
    padding: 34px 30px;
}
.fs-plan--featured {
    background: #fff;
    box-shadow: 0 0 0 2px var(--fs-ink) inset, var(--fs-shadow-lg);
}
.fs-plan__breakdown { border-top-color: rgba(0, 0, 0, .08); }
.fs-plan__name { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.fs-plan__amount { font-weight: 800; letter-spacing: -.04em; }

/* ---------- 업종 아이콘 행 ---------- */
.fs-ind__icon {
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
    transition: background var(--fs-ease), transform var(--fs-ease);
}
.fs-ind:hover .fs-ind__icon { background: var(--fs-accent-soft); transform: translateY(-3px); }
.fs-ind__label { font-weight: 700; letter-spacing: -.02em; }

/* ---------- 신뢰 지표 ---------- */
.fs-trustbar { border-top: 0; }
.fs-trustbar__k {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -.04em;
}
.fs-trustbar__v {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 섹션 구분선 제거 ----------
   면으로 나누는 톤이라 선이 남아 있으면 그 줄만 옛 디자인으로 보인다. */
.fs-section--line { border-top: 0; }

/* ============================================================
   터치 타겟 보정 (모바일 44x44)
   ------------------------------------------------------------
   데스크톱에서는 40px 이 헤더 비례상 맞다. 손가락으로 누르는
   화면에서만 44px 로 올린다. 시각 크기는 그대로 두고 여백으로
   눌리는 면적만 넓히는 쪽을 택했다 — 아이콘을 키우면 알약
   헤더가 두꺼워져 톤이 무너진다.
   ============================================================ */
@media (pointer: coarse), (max-width: 1000px) {
    .fs-hd__icon,
    .fs-hd__burger {
        width: 44px;
        height: 44px;
    }

    /* 로고는 글자 높이만큼만 잡혀 있었다 — 세로 여백으로 늘린다. */
    .fs-hd__brand {
        padding: 8px 0;
        min-height: 44px;
    }

    /* 작은 알약은 손가락 기준으로는 어디에 있든 작다. */
    .fs-btn--sm { height: 44px; padding: 0 18px; }

    /* 단독으로 서 있는 링크형 CTA — 글자 높이(24px)만 잡혀 있었다.
       문장 안에 섞인 인라인 링크는 WCAG 2.5.8 예외라 건드리지 않는다. */
    .fs-site .fs-feature__link,
    .fs-site .fs-ft__links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* 드로어 링크는 한 줄을 통째로 쓰는 행이다. inline-flex 로 바꾸면
       행이 아니라 글자처럼 흘러서 메뉴가 가로로 뭉친다 — 높이만 준다. */
    .fs-site .fs-drawer__link { min-height: 44px; }

    .fs-drawer__close {
        width: 44px;
        height: 44px;
    }

    /* "더보기 +" 같은 텍스트 링크는 글자만큼만 잡힌다. */
    .fs-site .fs-sechead__more {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
    }
}

/* ============================================================
   터치 타겟 보정 2 — /templates/, /pricing/, /start/ 실측 추가분
   ------------------------------------------------------------
   위 블록과 같은 규칙(pointer:coarse 이거나 폭 1000px 이하)을 쓴다.
   차이는 대상 — 여기는 FluxShop 카드·필터·라이트박스(fhs-*)와
   이 테마가 직접 그린 표·비교표 링크다. FluxShop 마크업은
   plugin-light.css(.fs-plugin 스코프)가 아니라 이 파일에 넣는다 —
   /templates/ 는 .fs-plugin 래퍼가 없는 page-templates.php 라서
   .fs-plugin 로 스코프한 규칙은 애초에 안 걸린다(실측으로 확인).
   ============================================================ */
@media (pointer: coarse), (max-width: 1000px) {
    /* 필터 칩("가격"·"평점") */
    .fhs-f__btn {
        min-height: 44px;
    }

    /* 카드 위시리스트 하트.
       fluxshop.css 의 `.fhs-mcard__heart, .fhs-mcard__cart { width:34px; height:34px; }` 와
       특이도가 같아 소스 순서(플러그인 CSS 가 나중 로드)에 밀렸다 — !important 로 맞춘다. */
    .fhs-mcard__heart,
    .fhs-wishlist-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* 카드 제목 링크 — 글자 높이만큼만 잡혀 있었다 */
    .fhs-mcard__name a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* 장바구니 드로어 닫기 */
    .fhs-cart-drawer__close {
        width: 44px;
        height: 44px;
    }

    /* 라이트박스 닫기·이전·다음.
       fluxshop.css 는 이 두 요소에 width/height 를 직접 정하지 않는데도
       !important 없이는 40px 로 그대로 나왔다 — 플러그인 JS 가 열릴 때
       인라인 스타일로 크기를 다시 쓰는 것으로 보인다(인라인은 !important
       없는 외부 규칙을 항상 이긴다). 같은 무기로 맞춘다. */
    .fhs-lightbox__close,
    .fhs-lightbox__nav {
        width: 44px !important;
        height: 44px !important;
    }

    /* 필터 검색창 — 42px 로 2px 부족했다.
       fluxshop.css 가 반응형 구간에서 `.fhs-fbar__search { height:42px }` 를
       같은 특이도로 나중에 실어 소스 순서로 이긴다 — !important 로 맞춘다. */
    .fhs-fbar__search,
    .fhs-fbar__search input {
        height: 44px !important;
    }

    /* 요금제 페이지 — 스펙표 값 링크("디자인마다 다름") */
    .fs-plan__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* 요금제 비교표 — 셀 안 링크("별도 견적") */
    .fs-table td a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* 시작하기 — 고른 템플릿 바의 "다시 고르기" */
    .fs-pickbar__change {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ============================================================
   신규 페이지 컴포넌트 (기능 상세 · 스토리 · 사례 상세)
   ============================================================ */

/* ---------- 기능/스토리 히어로 ---------- */
.fs-fhero { padding: 88px 0 var(--fs-section-pad); }
.fs-fhero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.fs-fhero__title {
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.24;
    color: var(--fs-ink);
}
.fs-fhero__lead {
    margin-top: 22px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
.fs-fhero__actions { margin-top: 32px; }
.fs-fhero__shot { margin-top: 64px; }

/* ---------- 기능 포인트 3칸 ---------- */
.fs-fpoint {
    padding: 34px 30px;
    border-radius: var(--fs-r-xl);
    background: #fff;
}
.fs-fpoint__num {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 800;
    color: var(--fs-accent);
}
.fs-fpoint__t {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-fpoint__d {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 약속 카드 ---------- */
.fs-promise {
    padding: 34px 30px;
    border-radius: var(--fs-r-xl);
    background: #fff;
}
.fs-promise__k {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 14px;
    border-radius: var(--fs-r-full);
    background: var(--fs-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}
.fs-promise__t {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.3;
}
.fs-promise__d {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 진행 4단계 ----------
   .fs-step 는 원래 컴포넌트(위쪽 "프로세스" 섹션, 2140행 부근)와
   같은 이름을 그대로 재사용한다 — migration/pricing/vertical 페이지가
   쓰는 것과 똑같은 카드로 통일했다. 별도 정의를 두면 클래스명이
   충돌해서 어느 한쪽이 상대방 스타일을 덮어써 버린다. */

/* ---------- 사례 상세 ---------- */
.fs-casehead { text-align: center; margin-bottom: 48px; }
.fs-site .fs-casehead__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
    padding: 8px 14px;
    border-radius: var(--fs-r-full);
    background: var(--fs-bg-soft);
    color: var(--fs-ink-3);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    transition: background var(--fs-ease), color var(--fs-ease);
}
.fs-site .fs-casehead__back:hover { background: var(--fs-accent-soft); color: var(--fs-accent); }
.fs-casehead__title {
    font-size: clamp(28px, 4.2vw, 46px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.25;
}
.fs-casehead__lead {
    margin-top: 18px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}
.fs-case__shot { margin: 0 0 48px; }
.fs-case__body { margin-top: 0; }

@media (max-width: 768px) {
    .fs-fhero { padding: 56px 0 88px; }
    .fs-fhero__shot { margin-top: 44px; }
    .fs-fhero__actions .fs-btn { width: 100%; }
    .fs-fpoint, .fs-promise { padding: 28px 24px; }
    .fs-casehead { margin-bottom: 36px; }
    .fs-case__shot { margin-bottom: 36px; }
}

/* ---------- 드로어 계정 블록 ----------
   남색(#10233f) 이 남아 있어 흑백 시스템 안에서 이 블록만 옛 테마로 보였다. */
.fs-drawer__account {
    background: var(--fs-dark);
    color: var(--fs-dark-ink-2);
}
.fs-drawer__hello b { color: #fff; }
.fs-site .fs-drawer__account .fs-btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--fs-ink);
}
.fs-site .fs-drawer__account .fs-btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .35);
    box-shadow: none;
    color: #fff;
}
.fs-site .fs-drawer__account .fs-btn--ghost:hover {
    background: rgba(255, 255, 255, .1);
    box-shadow: none;
    color: #fff;
}

/* ============================================================
   포인트 색 축소 + 잔여 컴포넌트 정합
   ------------------------------------------------------------
   문제: 파랑이 40곳에서 쓰이고 있었다. 그중 상당수가 섹션마다
   반복되는 요소(eyebrow·배지·번호)여서, 스크롤하면 파란 알약이
   계속 나온다. 강조가 매 화면에 있으면 강조로 읽히지 않는다.

   규칙 — 파랑이 남는 자리는 셋뿐이다:
     1. 제목 안 한 구절 (.fs-hl)
     2. 본문 안 인라인 링크
     3. 상태 피드백 (포커스 링, 입력 포커스, 드래그 오버, 체크박스)
   그 외 "항상 켜져 있는" 파랑은 전부 검정 또는 회색으로 내린다.

   함께: 1px 선으로 나누던 잔여 컴포넌트(표·FAQ·폼·피커·칩)를
   면 기반으로 바꾼다.
   ============================================================ */

/* ---------- eyebrow 3종: 파란 알약 → 회색 면 ----------
   섹션마다 나오는 라벨이다. 여기가 파랑 과용의 가장 큰 원인이었다. */
.fs-eyebrow,
.fs-thead__eyebrow,
.fs-sechead__label {
    background: var(--fs-bg-soft);
    color: var(--fs-ink-2);
}

/* ---------- 히어로 배지 ---------- */
.fs-hero2__badge {
    background: var(--fs-bg-soft);
    color: var(--fs-ink-2);
}

/* ---------- 번호 3종: 파랑 → 흐린 잉크 ----------
   번호는 순서를 알려 주는 장치지 강조가 아니다. */
.fs-feature__num,
.fs-fpoint__num,
.fs-step__n {
    color: var(--fs-ink-4);
}

/* ---------- 말풍선: 파란 테두리 → 검정 ---------- */
.fs-bubble {
    box-shadow: 0 0 0 1.5px var(--fs-ink) inset;
    color: var(--fs-ink);
}
.fs-bubble::after {
    border-right-color: var(--fs-ink);
    border-bottom-color: var(--fs-ink);
}

/* ---------- 히어로 스티커: 파란 알약 하나 → 검정 ----------
   히어로에는 이미 제목 강조(.fs-hl)가 파랑이다. 둘이 겹치면
   시선이 갈라진다. */
.fs-hero2__st--b {
    background: var(--fs-ink);
    color: #fff;
}

/* ---------- 브랜드 마크 · 진행 표시 · 핀 ---------- */
.fs-logo__mark { background: var(--fs-ink); }
.fs-site .fs-navbar__cta { background: var(--fs-ink); border-color: var(--fs-ink); }
.fs-site .fs-steps__i.is-now span { background: var(--fs-ink); }
.fs-pin { background: var(--fs-ink); }
.fs-pinitem__n { background: var(--fs-ink); }
.fs-done__mark { color: var(--fs-ink); }

/* ---------- 요금제 체크 표시 ---------- */
.fs-plan__features li::before {
    border-left-color: var(--fs-ink);
    border-bottom-color: var(--fs-ink);
}

/* ---------- 필수 입력 표시 ----------
   빨강도 파랑도 아닌 잉크로 둔다. * 기호 자체가 의미를 지고 있어
   색만으로 정보를 전달하지 않는다. */
.fs-field__req { color: var(--fs-ink-3); }

/* ---------- 프로모 박스: 파란 테두리 → 회색 면 ---------- */
.fs-promo {
    border: 0;
    background: var(--fs-bg-soft);
    border-radius: var(--fs-r-xl);
}


/* ============================================================
   잔여 컴포넌트 — 선에서 면으로
   ============================================================ */

/* ---------- 비교표 ----------
   표는 선이 필요한 몇 안 되는 자리다. 다만 바깥 테두리는 걷어내고
   행 구분선만 옅게 남긴다. "우리 열"은 파랑 대신 검정으로 잡는다. */
.fs-tablewrap {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
}
.fs-table th,
.fs-table td {
    padding: 18px 20px;
    border-bottom-color: rgba(0, 0, 0, .06);
}
.fs-table thead th {
    background: transparent;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.fs-table td { font-weight: 500; }
.fs-table .fs-col--ours { background: rgba(0, 0, 0, .04); }
.fs-table thead .fs-col--ours {
    background: var(--fs-ink);
    color: #fff;
    border-radius: var(--fs-r) var(--fs-r) 0 0;
}
.fs-table .fs-col--ours td,
.fs-table td.fs-col--ours { font-weight: 700; }

/* ---------- FAQ ----------
   위아래 테두리를 지우고 항목 사이만 옅게 나눈다. */
.fs-faq { border-top: 0; }
.fs-faq__item { border-bottom-color: rgba(0, 0, 0, .07); }
.fs-faq__q {
    padding: 24px 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.03em;
}
.fs-faq__a {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 폼 ---------- */
.fs-form {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
    padding: 36px;
}
.fs-field__label { font-weight: 700; letter-spacing: -.02em; }
.fs-input,
.fs-select,
.fs-textarea {
    height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--fs-r);
    background: #fff;
    font-weight: 500;
    letter-spacing: -.02em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset;
}
.fs-textarea { height: auto; padding: 14px 16px; }
.fs-input::placeholder,
.fs-textarea::placeholder { color: var(--fs-ink-4); }
/* 포커스는 상태 피드백이라 파랑을 남긴다. */
.fs-input:focus,
.fs-select:focus,
.fs-textarea:focus {
    box-shadow: 0 0 0 2px var(--fs-accent) inset;
}

/* 폼이 회색 면 위에 올라가면 그 안의 회색 버튼은 묻힌다. */
.fs-form .fs-btn--ghost { background: #fff; }

/* ---------- 업종 피커 ---------- */
.fs-picker {
    border: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
}
.fs-picker__tabs {
    border-bottom: 0;
    background: transparent;
    gap: 4px;
    padding: 10px 10px 0;
}
.fs-picker__tab {
    border-bottom: 0;
    border-radius: var(--fs-r) var(--fs-r) 0 0;
    font-weight: 700;
    letter-spacing: -.02em;
}
.fs-picker__tab:hover { background: rgba(255, 255, 255, .6); }
.fs-picker__tab.is-active {
    background: #fff;
    color: var(--fs-ink);
}
.fs-picker__panel { background: #fff; }

/* ---------- 칩 ---------- */
.fs-chip {
    height: 38px;
    border: 0;
    background: var(--fs-bg-soft);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--fs-ink-2);
}

/* ---------- 지표 그리드 ----------
   1px 격자 대신 카드 사이를 벌려 면으로 나눈다. */
.fs-proof {
    gap: 16px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}
.fs-proof__item {
    background: var(--fs-bg-soft);
    border-radius: var(--fs-r-xl);
    padding: 30px;
}
.fs-proof__k { font-size: 34px; font-weight: 800; letter-spacing: -.04em; }
.fs-proof__v { font-size: 15px; font-weight: 500; letter-spacing: -.02em; }

/* ---------- 정책 3줄 ---------- */
.fs-policy__item {
    padding: 28px;
    border-top: 0;
    border-radius: var(--fs-r-xl);
    background: var(--fs-bg-soft);
}
.fs-policy__t { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.fs-policy__d {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* 회색 섹션 위에서는 회색 카드가 묻힌다 — 그때만 흰 면으로 뒤집는다. */
.fs-section--soft .fs-proof__item,
.fs-section--soft .fs-policy__item,
.fs-section--soft .fs-form,
.fs-section--soft .fs-tablewrap,
.fs-section--soft .fs-chip,
.fs-section--soft .fs-promo { background: #fff; }

/* 피커는 뒤집지 않는다.
   회색 섹션에서 컨테이너를 흰색으로 바꿨더니 활성 탭(회색)이 패널(흰색)보다
   어두워져서, 열려 있는 탭이 오히려 눌린 것처럼 보였다.
   기본 관계 그대로 두면 컨테이너가 섹션 배경에 녹고
   흰 탭 + 흰 패널이 한 덩어리로 이어져 읽힌다. */

@media (max-width: 768px) {
    .fs-form { padding: 24px; }
    .fs-proof__item, .fs-policy__item { padding: 24px; }
    .fs-table th, .fs-table td { padding: 14px 16px; }
}

/* ============================================================
   리듬 통일 — 간격 · 정렬 · 이음매
   ------------------------------------------------------------
   실측으로 드러난 문제 셋:
     1. 섹션 패딩이 88px 과 120px 로 섞여 있었다.
        특히 페이지 첫 섹션만 88px 이라 시작부터 어긋나 보였다.
     2. 섹션 제목 정렬이 좌/중앙 혼재였다. 요금제·소개·고객지원은
        좌측인데 홈과 CTA 는 중앙 — 같은 사이트로 안 읽힌다.
     3. 같은 배경 섹션이 연달아 와서 회색 240px 구간이 생겼다.
        배경이 같으니 이음매가 안 보이고 그냥 빈 공간처럼 남았다.
   ============================================================ */

/* ---------- 1. 섹션 리듬은 하나의 값으로 ----------
   --tight(88px) 를 없앤다. 두 값이 섞이면 스크롤할 때
   간격이 들쭉날쭉한 게 그대로 보인다. */
.fs-section,
.fs-section--tight,
.fs-cta { padding: var(--fs-section-pad) 0; }

/* 히어로는 헤더가 떠 있는 만큼 위를 조금 줄인다. 두 히어로를 같은 값으로. */
.fs-hero2,
.fs-fhero { padding: 96px 0 var(--fs-section-pad); }

/* ---------- 2. 섹션 헤드는 가운데로 ----------
   .fs-sechead / .fs-thead 는 이미 중앙이다. 좌측으로 남아 있던
   .fs-head 를 맞춘다. --center 수식어는 이제 기본값과 같지만
   기존 마크업이 계속 쓰므로 그대로 둔다. */
.fs-head {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* 헤드 안의 버튼 줄도 같이 가운데로 */
.fs-head .fs-actions { justify-content: center; }

/* ---------- 3. 같은 배경이 이어지면 사이 여백을 접는다 ----------
   위 섹션의 아래 패딩 120px 이 이미 리듬 한 칸이다.
   접지 않으면 240px 이 되어 "왜 여기만 비었지"가 된다. */
.fs-section--soft + .fs-section--soft,
.fs-section--soft + .fs-cta,
.fs-section:not(.fs-section--soft) + .fs-section:not(.fs-section--soft),
.fs-section:not(.fs-section--soft) + .fs-fhero { padding-top: 0; }

/* ---------- 히어로 제목 크기 통일 ----------
   page-vertical / page-migration 이 인라인 style 로 각자 다른 값을
   쓰고 있었다. 옛 히어로 클래스도 새 스케일에 맞춘다. */
.fs-hero__title {
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.24;
}
.fs-hero__desc {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -.02em;
    color: var(--fs-ink-3);
}

/* ---------- 간격 스케일 ----------
   4px 배수만 쓴다. 인라인 style 에 흩어져 있던
   10·14·18·20·22·26·34·36 같은 값을 여기로 모은다. */
.fs-mt-8  { margin-top: 8px; }
.fs-mt-12 { margin-top: 12px; }
.fs-mt-16 { margin-top: 16px; }
.fs-mt-24 { margin-top: 24px; }
.fs-mt-32 { margin-top: 32px; }
.fs-mt-48 { margin-top: 48px; }

@media (max-width: 768px) {
    .fs-section,
    .fs-section--tight,
    .fs-cta { padding: 72px 0; }
    .fs-hero2,
    .fs-fhero { padding: 56px 0 72px; }
}

/* ---------- 섹션 레벨 버튼 줄 정렬 ----------
   섹션 헤드를 전부 가운데로 모았는데 그 아래 버튼 줄만 왼쪽에 남아
   요금제·이관에서 축이 어긋나 보였다.
   .fs-wrap 직속(= 섹션 레벨) 만 가운데로 민다.
   카드·2단 레이아웃 안쪽 버튼은 그 블록의 축을 따라야 하므로 건드리지 않는다. */
.fs-section > .fs-wrap > .fs-actions,
.fs-cta > .fs-wrap > .fs-actions { justify-content: center; }

/* 옛 히어로의 보조 한 줄이 중앙 히어로 안으로 들어왔다 — 축을 맞춘다. */
.fs-fhero .fs-hero__sub {
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--fs-ink-4);
}

/* ---------- 빈 상태 / 가드 블록 ----------
   "먼저 디자인을 고르세요" 같은 단독 안내는 가운데가 자연스럽다.
   좌측 정렬이면 옆에 뭔가 더 있어야 할 것처럼 보인다. */
.fs-empty { text-align: center; }
.fs-empty .fs-actions { justify-content: center; }

/* ============================================================
   세로 리듬 특이도 수정 — "제목/설명이 붙어 있다" 근본 원인
   ------------------------------------------------------------
   베이스 리셋 `.fs-site h1,h2,h3,h4,p,ul,ol,figure { margin:0 }` 은
   특이도 (0,1,1) 이다. 컴포넌트 클래스 단독 선택자 `.fs-feature__d { margin-top: Npx }`
   는 (0,1,0) 이라 소스 순서와 무관하게 항상 리셋이 이긴다 — margin-top 이
   조용히 0으로 죽는다.

   예전엔 본문 line-height 가 1.8~1.9 로 넓어서 그 여백이 착시로 간격을
   메워 줬다. 리틀리 톤에 맞춰 line-height 를 1.5~1.6 으로 좁히면서
   그 착시가 사라져 지금에서야 전부 드러났다 — 실제로는 이번에 생긴
   문제가 아니라 원래부터 있던 결함이다.

   고치는 방법은 하나다: `.fs-site` 를 앞에 붙여 특이도를 (0,2,0) 으로
   올린다. 새 컴포넌트를 추가할 때도 margin-top/bottom 을 주는 규칙은
   항상 이렇게 `.fs-site .클래스` 형태로 써야 한다.

   실측 방법: 전 페이지를 순회하며 (1) CSS 에 선언된 margin-top/bottom 값과
   (2) 실제 렌더링된 computed 값을 비교해 "선언은 있는데 0으로 죽은" 것만
   추렸다 — 감으로 고른 목록이 아니다.
   ============================================================ */

.fs-site .fs-hero2__desc { margin-top: 24px; }
.fs-site .fs-hero2__note { margin-top: 20px; }
.fs-site .fs-cta__desc { margin-top: 16px; }
.fs-site .fs-centerhead__d { margin-top: 16px; }
.fs-site .fs-thead__lead { margin-top: 16px; }
.fs-site .fs-fhero__lead { margin-top: 24px; }
.fs-site .fs-feature__d { margin-top: 24px; }
.fs-site .fs-feature__list { margin-top: 24px; }
.fs-site .fs-quote__by { margin-top: 22px; }
.fs-site .fs-fpoint__d { margin-top: 12px; }
.fs-site .fs-promise__d { margin-top: 12px; }
.fs-site .fs-casehead__lead { margin-top: 18px; }
.fs-site .fs-drawer__ctanote { margin-top: 10px; }
.fs-site .fs-card__list { margin-top: 16px; }
.fs-site .fs-plan__desc { margin-top: 8px; }
.fs-site .fs-plan__meta { margin-top: 8px; }
.fs-site .fs-plan__zero { margin-top: 20px; }
.fs-site .fs-plan__features { margin-top: 20px; margin-bottom: 26px; }
.fs-site .fs-field__hint { margin-top: 8px; }
.fs-site .fs-picker__saving { margin-top: 16px; }
.fs-site .fs-calc__disclaimer { margin-top: 14px; }
.fs-site .fs-annot__hint { margin-top: 12px; }
.fs-site .fs-reqsteps { margin-bottom: 34px; }
/* 편집기 본문(get_the_content)이 채워지므로 값이 필요할 때만 쓰이는
   빈 안내문이다. 원래 margin 선언 자체가 없었다 — 제목과 붙어 있었다. */
.fs-site .fs-done__desc { margin-top: 8px; }

.fs-site .fs-drawer__hello { margin-bottom: 12px; }
.fs-site .fs-drawer__label { margin-bottom: 8px; }
.fs-site .fs-card__title { margin-bottom: 8px; }
.fs-site .fs-ft__coltitle { margin-bottom: 18px; }
.fs-site .fs-legal__h { margin-bottom: 16px; }
.fs-site .fs-legal__p { margin-bottom: 12px; }
.fs-site .fs-annot__title { margin-bottom: 14px; }
.fs-site .fs-done__title { margin-bottom: 12px; }
.fs-site .fs-tpl__name { margin-bottom: 8px; }
.fs-site .fs-pain__t { margin-bottom: 8px; }
.fs-site .fs-crossbanner__t { margin-bottom: 6px; }
.fs-site .fs-faqgroup__t { margin-bottom: 6px; }
.fs-site .fs-policy__t { margin-bottom: 8px; }

/* ======================================================================
   v3.1 — 절감 리포트 계산기 · 총비용 시뮬레이터 · 크몽 후기
   ====================================================================== */

/* ---- 계산기 (홈 탭 안 compact / 이관 페이지 full) ---- */
.fs-calc2 { width: 100%; }
.fs-calc2--full {
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    background: var(--fs-bg);
    padding: 32px;
}
.fs-calc2__inputs { display: grid; gap: 20px; }
@media (min-width: 720px) {
    /*
     * 두 칸을 같은 폭으로 두고 아래쪽 기준선을 맞춘다. 260px + 1fr 로 두면
     * 왼쪽 셀렉트와 오른쪽 슬라이더의 라벨이 12px 씩 어긋나 앉는다.
     */
    .fs-calc2__inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
.fs-calc2__inputs .fs-field { margin-bottom: 0; }
.fs-calc2__slider .fs-calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.fs-calc2__out {
    display: grid;
    gap: 20px;
    align-items: center;
    margin-top: 24px;
    padding: 24px;
    background: var(--fs-bg-soft);
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-sm);
}
@media (min-width: 720px) {
    .fs-calc2__out { grid-template-columns: minmax(0, 1fr) auto; }
}
/* 라벨이 인라인이라 375px 에서 "연 절감 예상액 연 302만원 ~ / 369만원" 으로 감겼다. */
.fs-calc2__result .fs-calc__outlabel { display: block; }
.fs-calc2__out .fs-calc__amount { display: block; margin: 6px 0 4px; }
.fs-calc2__out .fs-calc__caption { margin: 0; }
.fs-calc2__cta { display: flex; }
@media (max-width: 719px) {
    .fs-calc2__cta .fs-btn { width: 100%; justify-content: center; }
}

/* ---- 리포트 신청 인라인 폼 (모달 아님) ---- */
.fs-report {
    margin-top: 16px;
    padding: 22px 24px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-sm);
    background: var(--fs-bg);
}
.fs-report__grid { display: grid; gap: 16px; }
@media (min-width: 620px) {
    .fs-report__grid { grid-template-columns: 1fr 1fr; }
}
.fs-report__grid .fs-field { margin-bottom: 0; }
.fs-report__agree {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 16px;
    font-size: 14px;
    color: var(--fs-ink-2);
    line-height: 1.6;
    word-break: keep-all;
}
.fs-report__agree input { margin-top: 3px; flex: none; }
.fs-report__foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.fs-report__done {
    margin-top: 16px;
    padding: 20px 24px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-sm);
    background: var(--fs-accent-soft);
    font-size: 15.5px;
    line-height: 1.7;
    word-break: keep-all;
}
.fs-report__done:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }

/* ---- 총비용 시뮬레이터 ---- */
.fs-sim {
    display: grid;
    gap: 0;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-lg);
    overflow: hidden;
    background: var(--fs-bg);
}
@media (min-width: 860px) {
    .fs-sim { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}
.fs-sim__form { padding: 32px; }
.fs-sim__form .fs-field { margin-bottom: 0; }
.fs-sim__promo {
    margin-top: 16px;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fs-accent-soft);
    color: var(--fs-accent-ink);
    font-size: 13px;
    font-weight: 600;
}
.fs-sim__out {
    padding: 32px;
    background: var(--fs-bg-soft);
    border-top: 1px solid var(--fs-line);
}
@media (min-width: 860px) {
    .fs-sim__out { border-top: 0; border-left: 1px solid var(--fs-line); }
}
.fs-sim__total { margin-top: 22px; }
.fs-sim__total .fs-calc__amount { margin: 6px 0 4px; }
.fs-sim__out .fs-note { margin-top: 16px; line-height: 1.7; word-break: keep-all; }

/* ---- 준비 중 템플릿 자리 (강의 탭) ---- */
.fs-picker__shot--soon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    border: 1px dashed var(--fs-line-strong);
    border-radius: var(--fs-r-sm);
    background: var(--fs-bg-soft);
}
.fs-picker__soon {
    text-align: center;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fs-ink-2);
    line-height: 1.6;
    word-break: keep-all;
}
.fs-picker__soon small { display: inline-block; margin-top: 4px; font-weight: 400; color: var(--fs-ink-3); }

/* ---- 크몽 후기 ---- */
.fs-reviews {
    display: grid;
    gap: 14px;
    margin-top: 32px;
}
@media (min-width: 760px) {
    .fs-reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-review {
    display: block;
    padding: 22px 24px;
    border: 1px solid var(--fs-line);
    border-radius: var(--fs-r-sm);
    background: var(--fs-bg);
    color: inherit;
    text-decoration: none;
}
a.fs-review:hover { border-color: var(--fs-line-strong); }
a.fs-review:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 2px; }
.fs-review__q {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--fs-ink);
    word-break: keep-all;
}
.fs-review__meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--fs-ink-3);
}

/* ============================================================
   템플릿 갤러리 — 웹쟁이 톤 (2026-09-15)
   ------------------------------------------------------------
   범위: page-templates.php 가 목록을 감싸는 .fs-tplgal 안.
   카드(loop-item.php)·필터(loop.php)는 /products/ 데모샵과 같은
   템플릿이라, 래퍼 없이 걸면 데모샵 상품 사진까지 346:242 로 잘린다.

   fluxshop.css·navy 스킨이 이 파일보다 늦게 로드되고, 목록 규칙을
   .fhs-shop--musinsa 로 한 단계 올려 둔다. 그래서 여기 규칙은
   .fs-tplgal .fhs-shop--musinsa 로 한 단계 더 올린다. 코어가
   !important 를 건 속성(선택 알약 글자색, navy 스킨의
   [class*="fhs-"] { box-shadow:none !important })만 같은 무기로 맞춘다.

   규격: specs/2026-09-14-webjangi-style-redesign/spec.md 5-1
   C-PILL / C-PILL-SUB / C-CARD / 분류 라벨
   ============================================================ */
.fs-tplgal {
    /* navy 스킨이 :root 에 파랑을 심는다(개수 상자·포커스). 이 안에서는 에메랄드로. */
    --fhs-navy-accent: var(--fs-accent);
    --fhs-navy-btn:    var(--fs-accent);
    --fhs-primary:     var(--fs-accent);
}
.fs-tplgal .fhs-shop--musinsa.fluxshop-products-wrap {
    max-width: none;
    padding: 0;           /* .fs-wrap 이 이미 거터를 준다 — 두 번 들이면 카드가 좁아진다 */
}

/* ── 업종 알약 (C-PILL) ── */
.fs-tplgal .fhs-shop--musinsa .fhs-cats { margin: 0 0 16px; }
.fs-tplgal .fhs-shop--musinsa .fhs-cats__rail {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
/* 홈 그리드는 filters="no" 위젯 모드라 칩 묶음이 .fhs-cats 가 아니라 .fhs-cat-tabs 다. */
.fs-tplgal .fhs-shop--musinsa .fhs-cat-tabs {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    border-bottom: 0;
}
.fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: none;
}
.fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab span {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #dddddd;
    border-radius: var(--fs-r-full);
    background: #fff;
    color: var(--fs-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
    transition: background-color var(--fs-ease), border-color var(--fs-ease), color var(--fs-ease);
}
.fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab:hover span { border-color: var(--fs-ink); }
/* 홈(.fhs-cat-tabs)은 칩을 AJAX 로 바꿔서 서버가 붙인 .is-active 가 "전체"에 남는다 —
   거기서는 라디오 체크 상태만 본다. */
.fs-tplgal .fhs-shop--musinsa .fhs-cats .fhs-cat-tab.is-active span,
.fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab input:checked + span {
    background: var(--fs-accent);
    border-color: var(--fs-accent) !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab input:focus-visible + span {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

/* ── 검색·보조 필터 (C-PILL-SUB) ──
   필터바 위아래 구분선을 뺀다. 이 톤은 선이 아니라 면으로 나눈다. */
.fs-tplgal .fhs-shop--musinsa .fhs-searchrow { margin: 0 0 8px; }
.fs-tplgal .fhs-shop--musinsa .fhs-fbar {
    border-top: 0;
    border-bottom: 0;
    margin: 0 0 16px;
}
.fs-tplgal .fhs-shop--musinsa .fhs-fbar__facets { gap: 8px; padding: 0; }
.fs-tplgal .fhs-shop--musinsa .fhs-f__btn,
.fs-tplgal .fhs-shop--musinsa .fhs-toggle span {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--fs-r-full);
    background: var(--fs-bg-soft);
    color: var(--fs-ink);
    font-size: 16px;
    font-weight: 500;
}
.fs-tplgal .fhs-shop--musinsa .fhs-f__btn:hover,
.fs-tplgal .fhs-shop--musinsa .fhs-toggle:hover span { background: #ebebeb; color: var(--fs-ink); }
.fs-tplgal .fhs-shop--musinsa .fhs-f.is-on > .fhs-f__btn,
.fs-tplgal .fhs-shop--musinsa .fhs-toggle input:checked + span {
    background: var(--fs-accent);
    color: #fff;
}
.fs-tplgal .fhs-shop--musinsa .fhs-f__n { color: var(--fs-accent-ink); }
.fs-tplgal .fhs-shop--musinsa .fhs-f__btn:focus-visible,
.fs-tplgal .fhs-shop--musinsa .fhs-toggle input:focus-visible + span {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

/* 개수 — 파란 테두리 상자 대신 글자로. 아래 40px = 레퍼런스 필터→카드 38px 을 4px 격자로 */
.fs-tplgal .fhs-shop--musinsa .fhs-loop-toolbar { margin: 0 0 40px; padding: 0; }
.fs-tplgal .fhs-shop--musinsa .fhs-loop-count { gap: 4px; font-size: 14px; color: var(--fs-ink-3); }
.fs-tplgal .fhs-shop--musinsa .fhs-loop-count strong {
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--fs-ink);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── 그리드 (C-CARD 열·간격) ── */
.fs-tplgal .fhs-shop--musinsa .fhs-shop-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* ── 썸네일 카드 (C-CARD) ── */
.fs-tplgal .fhs-shop--musinsa .fhs-mcard,
.fs-tplgal .fhs-shop--musinsa .fhs-mcard:hover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    border-radius: 15px;
    background: #fff;
    box-shadow: 5px 38px 90px 0 rgba(102, 102, 102, .1) !important;
    transform: none;
}
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__thumb {
    aspect-ratio: 346 / 242;
    border-radius: 15px 15px 0 0;
    background: var(--fs-bg-sunken);
}
/* 템플릿 썸네일은 웹사이트 첫 화면 캡처다 — 가운데가 아니라 위(헤더)부터 보여야 알아본다. */
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__thumb img { object-position: top center; }
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__body {
    flex: 1;
    padding: 16px 20px 20px;
    background: #fff;
}
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__name {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -.03em;
}
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__cat {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--fs-accent);
}
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__price { margin: 12px 0 0; gap: 6px; }
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__cur { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__discount { font-size: 16px; }
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__meta {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--fs-ink-3);
}
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__likes,
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__rating,
.fs-tplgal .fhs-shop--musinsa .fhs-mcard__rcount { color: inherit; }

/* 업종 템플릿이 아직 없을 때 — 다음 행동(데모 신청)으로 안내한다 (loop.php) */
.fs-tplgal .fhs-shop--musinsa .fs-tplempty {
    gap: 8px;
    padding: 56px 24px;
    border-radius: var(--fs-r);
    background: var(--fs-bg-soft);
    text-align: center;
}
.fs-tplgal .fhs-shop--musinsa .fs-tplempty__t {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.03em;
    color: var(--fs-ink);
}
.fs-tplgal .fhs-shop--musinsa .fs-tplempty__d {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fs-ink-3);
}
.fs-tplgal .fhs-shop--musinsa .fs-tplempty .fs-btn { margin-top: 16px; color: #fff; }

@media (max-width: 1023px) {
    .fs-tplgal .fhs-shop--musinsa .fhs-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 코어는 이 폭에서 필터 줄을 가로 스크롤 띠로 바꾸고 오른쪽을 흐린다. 갤러리 필터는
       4개뿐이라 끝 알약이 반쯤 잘려 보이기만 한다 — 알약 규칙대로 줄을 바꾼다. */
    .fs-tplgal .fhs-shop--musinsa .fhs-fbar__facets { flex-wrap: wrap; overflow: visible; padding: 0; }
    .fs-tplgal .fhs-shop--musinsa .fhs-fbar__row::after { content: none; }
}
@media (max-width: 767px) {
    .fs-tplgal .fhs-shop--musinsa :is(.fhs-cats, .fhs-cat-tabs) .fhs-cat-tab span { padding: 0 16px; font-size: 14px; }
    .fs-tplgal .fhs-shop--musinsa .fhs-f__btn,
    .fs-tplgal .fhs-shop--musinsa .fhs-toggle span { padding: 0 16px; font-size: 14px; }
    .fs-tplgal .fhs-shop--musinsa .fhs-shop-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fs-tplgal .fhs-shop--musinsa .fhs-mcard__name { font-size: 16px; }
}

/* ============================================================
   홈 히어로 — 웹쟁이 톤 슬라이드 (2026-09-15)
   ------------------------------------------------------------
   규격: spec 5-1 C-SLIDE / C-PAGER. 동작은 site.js initSlider().
   ≥1024 한 화면 2장(2장씩 넘김), 그 아래 1장. 트랙을 translateX 로
   옮기고, 한 페이지 이동 폭 = 뷰포트 폭 + 트랙 간격(JS 가 잰다).
   ============================================================ */
.fs-hero3 {
    padding: 24px 0 var(--fs-section-pad);   /* 헤더 바 하단 → 첫 슬라이드 24px */
}

.fs-hcar__viewport { overflow: hidden; }
.fs-hcar__track {
    display: flex;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
.fs-hcar__slide {
    position: relative;
    flex: 0 0 calc((100% - 32px) / 2);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 450px;
    /* 좌우 32px: 1장 제목 둘째 줄("번 돈은 전부 사장님 겁니다.")이 40px 에서 403px 이다.
       40px 를 두면 글자 폭 400px 에 3px 모자라 세 줄이 되고, 안내문까지 450px 를 넘는다. */
    padding: 40px 32px;
    overflow: hidden;
    border-radius: 30px;
    background: var(--fs-accent-grad);
    color: #fff;
}
/* JS 가 돌기 전에는 첫 페이지만 보이면 된다 — 넘치는 장은 뷰포트가 가린다. */

.fs-site .fs-hcar__badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    margin: 0 0 16px;
    padding: 0 14px;
    border-radius: var(--fs-r-full);
    background: rgba(255, 255, 255, .14);   /* 흰 글자 대비 5.65:1 */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.02em;
}
.fs-site .fs-hcar__title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.04em;
    color: #fff;
    text-wrap: balance;
}
.fs-hcar__hl { color: #6ee7b7; }            /* 그라데이션 밝은 끝 대비 5.26:1 */
.fs-site .fs-hcar__desc {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);          /* 6.39:1 */
}
.fs-hcar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}
.fs-hcar__text .fs-hcar__cta { margin-top: 32px; }
.fs-site a.fs-hcar__cta {
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 0 24px;
    border-radius: 24px;
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--fs-ease), box-shadow var(--fs-ease);
}
.fs-site a.fs-hcar__cta:hover { background: var(--fs-accent-soft); color: #000; }
.fs-site a.fs-hcar__cta--line {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
    color: #fff;
}
.fs-site a.fs-hcar__cta--line:hover { background: rgba(255, 255, 255, .1); color: #fff; }
/* 짙은 면 위에서 에메랄드 포커스 링은 1.5:1 로 안 보인다 — 흰색으로. */
.fs-site .fs-hcar__slide a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.fs-site .fs-hcar__note {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .76);          /* 5.3:1 */
}

/* 2~4장 스크린샷 — 오른쪽 아래에 걸쳐 앉힌다. 높이를 슬라이드 비율로 묶어
   글자 묶음(위쪽)과 세로로 겹치지 않게 한다.
   .fs-site img { height:auto } (0,1,1) 를 이겨야 해서 .fs-site 를 붙인다. */
.fs-site .fs-hcar__shot {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 42%;
    width: auto;
    max-width: 72%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
    border-radius: 16px 0 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .28);
}

/* ── 인디케이터 (C-PAGER) ── */
.fs-hcar__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}
.fs-hcar__nums {
    display: inline-flex;
    align-items: center;
    padding: 0 20px;
    border-radius: var(--fs-r-full);
    background: var(--fs-bg-soft);
}
.fs-hcar__nums:empty { display: none; }
.fs-site .fs-hcar__num {
    min-width: 44px;
    height: 44px;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--fs-ink-3);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--fs-ease);
}
.fs-site .fs-hcar__num:hover,
.fs-site .fs-hcar__num[aria-current="true"] { color: var(--fs-ink); }
.fs-site .fs-hcar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--fs-bg-soft);
    color: var(--fs-ink);
    cursor: pointer;
}
.fs-site .fs-hcar__toggle:hover { background: #ebebeb; }
.fs-site .fs-hcar__toggle svg[hidden] { display: none; }
.fs-site .fs-hcar__num:focus-visible,
.fs-site .fs-hcar__toggle:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 2px;
}
.fs-hcar:not(.is-ready) .fs-hcar__pager { display: none; }

/* ── 홈 템플릿 그리드 ── */
.fs-tplgal--home { margin-top: 40px; }       /* 인디케이터 하단 → 칩 40px */
.fs-tplgal--home .fhs-shop--musinsa .fhs-cat-tabs { margin-bottom: 40px; }   /* 칩 → 첫 카드 40px */
.fs-tplgal__more {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}
.fs-hero3 .fs-inds { margin-top: 80px; }
.fs-hero3 .fs-trustbar { margin-top: 56px; }

@media (max-width: 1023px) {
    .fs-hcar__slide { flex-basis: 100%; }
}
@media (max-width: 767px) {
    /* 모바일 본문 시작점(padding-top 78px)이 헤더 바 하단보다 8px 아래다 → 8 + 8 = 16px */
    .fs-hero3 { padding-top: 8px; padding-bottom: 88px; }
    .fs-hcar__slide {
        height: 300px;
        padding: 24px;
        border-radius: 20px;
    }
    .fs-site .fs-hcar__title { font-size: 24px; }
    .fs-site .fs-hcar__desc { margin-top: 8px; font-size: 16px; }
    .fs-hcar__actions { margin-top: 16px; }
    .fs-hcar__text .fs-hcar__cta { margin-top: 16px; }
    /* 300px 높이에 1장 요소를 다 넣으면 넘친다 — 배지·안내문은 넓은 화면에서만.
       버튼 두 개는 두 줄로 쌓여도 들어간다(360px 실측). */
    .fs-hcar__slide--lead .fs-hcar__badge,
    .fs-hcar__slide--lead .fs-hcar__note { display: none; }
    .fs-site .fs-hcar__shot { height: 36%; border-radius: 12px 0 0 0; }

    .fs-hcar__pager { justify-content: space-between; margin-top: 16px; }
    .fs-hcar__nums { padding: 0; background: none; margin-left: -12px; }
    .fs-hcar__toggle { background: none; }
    .fs-hero3 .fs-inds { margin-top: 56px; }
    .fs-hero3 .fs-trustbar { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-hcar__track { transition: none; }
}

/* ============================================================
   FluxShop navy 스킨 토큰 → 사이트 톤 (2026-09-15, spec P8)
   ------------------------------------------------------------
   navy 스킨은 :root 에 남청 버튼(#4257c9)·밝은 남청 글자(#6d86ee)와
   짙은 네이비 표면을 심는다. .fs-plugin 안의 표면은 plugin-light.css 가
   라이트로 되돌리지만, 버튼·강조 토큰은 그대로여서 남청이 남았고,
   장바구니 드로어·플로팅 버튼은 body 바로 아래 붙어 .fs-plugin 밖이라
   짙은 네이비 패널로 열렸다(색상 스캔 실측).

   --fhs-primary 는 :root 에서 var(--fhs-navy-btn) 로 **이미 계산된 값**이
   상속되므로, 원천 토큰만 바꾸면 안 바뀐다 — 파생 토큰까지 body 에서 다시 쓴다.
   ============================================================ */
body.fs-site {
    --fhs-navy-accent:   var(--fs-accent);
    --fhs-navy-accent-d: var(--fs-accent-ink);
    --fhs-navy-btn:      var(--fs-accent);
    --fhs-navy-btn-h:    var(--fs-accent-ink);
    --fhs-primary:       var(--fs-accent);
    --fhs-primary-hover: var(--fs-accent-ink);
    --fluxshop-primary:  var(--fs-accent);
}
/* ── /products/ 데모샵 목록 (page-plugin.php → .fs-plugin) — 갤러리와 같은 알약·카드 결.
   열 수와 사진 비율은 그대로 둔다(상품 사진은 사이트 캡처와 비율이 달라 잘린다, spec C-CARD).
   .fhs-f__btn 은 <button> 이고 클래스에 btn 이 들어 plugin-light.css 의 보조 버튼 규칙
   (0,4,1)에 걸린다 — 그래서 여기서는 (0,5,0) 이상으로 쓴다. ── */
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cats__rail {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab { padding: 0; border: 0; background: none; }
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab span {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    border: 1px solid #dddddd;
    border-radius: var(--fs-r-full);
    background: #fff;
    color: var(--fs-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab:hover span { border-color: var(--fs-ink); }
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab.is-active span,
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab input:checked + span {
    background: var(--fs-accent);
    border-color: var(--fs-accent) !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab input:focus-visible + span { outline: 2px solid var(--fs-accent); outline-offset: 3px; }
.fs-plugin .fhs-shop--musinsa .fhs-fbar { border-top: 0; border-bottom: 0; }
.fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-f .fhs-f__btn,
.fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-toggle span {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--fs-r-full);
    background: var(--fs-bg-soft);
    color: var(--fs-ink);
    font-size: 16px;
    font-weight: 500;
}
.fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-f.is-on > .fhs-f__btn,
.fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-toggle input:checked + span {
    background: var(--fs-accent);
    color: #fff;
}
.fs-plugin .fhs-shop--musinsa .fhs-mcard,
.fs-plugin .fhs-shop--musinsa .fhs-mcard:hover {
    overflow: hidden;
    border-radius: 15px;
    background: #fff;
    box-shadow: 5px 38px 90px 0 rgba(102, 102, 102, .1) !important;
}
.fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__thumb { border-radius: 15px 15px 0 0; }
.fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__body { padding: 16px 20px 20px; background: #fff; }
.fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__name { font-size: 18px; font-weight: 700; line-height: 1.5; }
.fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__meta { font-size: 14px; color: var(--fs-ink-3); }
@media (max-width: 1023px) {
    .fs-plugin .fhs-shop--musinsa .fhs-fbar__facets { flex-wrap: wrap; overflow: visible; }
    .fs-plugin .fhs-shop--musinsa .fhs-fbar__row::after { content: none; }
}
@media (max-width: 767px) {
    .fs-plugin .fhs-shop--musinsa .fhs-cats .fhs-cat-tab span,
    .fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-f .fhs-f__btn,
    .fs-plugin .fhs-shop--musinsa .fhs-fbar__facets .fhs-toggle span { padding: 0 16px; font-size: 14px; }
    .fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__name { font-size: 15px; }
    .fs-plugin .fhs-shop--musinsa .fhs-mcard .fhs-mcard__body { padding: 12px 12px 14px; }
}

.fhs-cart-drawer,
.fhs-cart-fab {
    --fhs-white:        #ffffff;
    --fhs-bg:           #ffffff;
    --fhs-bg-soft:      var(--fs-bg-soft);
    --fhs-bg-gray:      var(--fs-bg-soft);
    --fhs-text:         var(--fs-ink);
    --fhs-text-sub:     var(--fs-ink-2);
    --fhs-text-muted:   var(--fs-ink-3);
    --fhs-text-light:   var(--fs-ink-3);
    --fhs-border:       var(--fs-line);
    --fhs-border-light: var(--fs-line);
    --fhs-border-faint: var(--fs-line);
}

/* ============================================================
   고객 후기 모아보기 — page-reviews.php (2026-09-15)
   ============================================================ */
.fs-rvw__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 24px;
    margin: 0 0 32px;
}
.fs-site .fs-rvw__score { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.fs-rvw__score strong { font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fs-rvw__score span { font-size: 18px; color: var(--fs-ink-3); }
.fs-site .fs-rvw__count { margin: 0; font-size: 16px; color: var(--fs-ink-2); }
.fs-rvw__count strong { color: var(--fs-ink); font-variant-numeric: tabular-nums; }

.fs-site .fs-rvw__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fs-rvw__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    border-radius: 15px;
    background: #fff;
    box-shadow: 5px 38px 90px 0 rgba(102, 102, 102, .1);
}
.fs-site .fs-rvw__stars { margin: 0; font-size: 16px; letter-spacing: 2px; color: var(--fs-accent); }
.fs-site .fs-rvw__text {
    flex: 1;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--fs-ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fs-site .fs-rvw__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--fs-line);
    font-size: 14px;
    color: var(--fs-ink-3);
}
.fs-site a.fs-rvw__product { font-weight: 700; color: var(--fs-accent); text-decoration: none; }
.fs-site a.fs-rvw__product:hover { text-decoration: underline; }

.fs-rvw__pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0 0; }
.fs-site a.fs-rvw__pnum {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dddddd;
    border-radius: var(--fs-r-full);
    color: var(--fs-ink);
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.fs-site a.fs-rvw__pnum.is-on { background: var(--fs-accent); border-color: var(--fs-accent); color: #fff; }

.fs-site .fs-rvw__sub { margin: 64px 0 24px; font-size: 24px; font-weight: 700; }

.fs-rvw__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 64px 24px;
    border-radius: var(--fs-r-lg);
    background: var(--fs-bg-soft);
    text-align: center;
}
.fs-site .fs-rvw__empty-t { margin: 0; font-size: 20px; font-weight: 700; }
.fs-site .fs-rvw__empty-d { margin: 0 0 16px; max-width: 520px; font-size: 16px; line-height: 1.6; color: var(--fs-ink-2); }

@media (max-width: 1023px) {
    .fs-site .fs-rvw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .fs-site .fs-rvw__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fs-rvw__score strong { font-size: 40px; }
}