/*
 * fx 스토리·소개 - 화면 키 story (/story/). 접두사 fx-st-. 공통 부품(fx-sec·fx-wrap·fx-button·fx-pill·fx-facts·fx-lead·fx-ln·fx-rv·fx-lit·fx-rail)은
 * components.css·motion.css 것을 그대로 쓰고 여기서는 이 화면에만 있는 모양만 둔다. 색은 --fx-* 토큰만, 움직임은 transform·opacity 만.
 * 순서: 공통 -> 머리 -> 겪어 온 일 -> 선언 -> 약속 -> 진행 -> 소개 -> 후기(밝게) -> 본문 -> CTA -> 반응형 -> reduced-motion
 */
.fx-st-h2,.fx-st-h3,.fx-st-h1,.fx-st-cta__h,.fx-st-decl__h{font-weight:700;letter-spacing:-.025em;word-break:keep-all}
.fx-st-h2{font-size:clamp(32px,4.6vw,60px);line-height:1.18}
.fx-st-h3{font-size:var(--fx-size-h3);line-height:1.3;margin-bottom:16px}
.fx-st-lime{font-style:normal;color:var(--fx-brand)}
/* 의미 단위: 줄 안에서 쪼개지지 않는다. 핵심 구절: 라임 밑줄 하나로 통일. */
.fx-st-ph{display:inline-block;max-width:100%}
.fx-st-ph--blk{display:block}
.fx-st-key{font-style:normal;font-weight:inherit;text-decoration:underline;text-decoration-color:var(--fx-brand);text-decoration-thickness:.12em;text-underline-offset:.2em;text-decoration-skip-ink:none}
.fx-st-head{display:grid;gap:16px;margin-bottom:48px}
.fx-st-head .fx-lead{max-width:560px}

/* ===== 1. 머리 ===== */
.fx-st-hero{display:flex;align-items:flex-end;min-height:88vh;min-height:88svh;padding:112px 0 64px;background:var(--fx-s0)}
.fx-st-hero>.fx-wrap{width:100%}
.fx-st-h1{font-size:clamp(40px,7vw,96px);line-height:1.1;letter-spacing:-.03em}
.fx-st-hero__lead{margin-top:32px;max-width:640px;font-size:clamp(18px,1.7vw,22px)}

/* ===== 2. 겪어 온 일 ===== */
.fx-st-pain__in{display:grid;gap:40px}
.fx-st-pain__head{display:grid;gap:16px;align-content:start}
.fx-st-pain__head .fx-st-h2{font-size:clamp(30px,3.8vw,48px);line-height:1.22}
.fx-st-pain__list{border-top:1px solid var(--fx-edge-strong)}
.fx-st-pain__item{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--fx-edge);transition:transform var(--fx-time-mid) var(--fx-ease-out)}
.fx-st-pain__n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
.fx-st-pain__t{font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.4;letter-spacing:-.02em;word-break:keep-all;text-wrap:balance}
.fx-st-pain__item:hover{transform:translateX(8px)}

/* ===== 3. 선언 ===== */
.fx-st-decl{padding:64px 0}
.fx-st-decl__in{display:grid;grid-template-columns:6px 1fr;gap:clamp(20px,3vw,48px)}
.fx-st-decl__h{font-size:clamp(36px,6.9vw,88px);line-height:1.22;letter-spacing:-.03em}
.fx-st-decl__p{margin-top:40px;max-width:600px}

/* ===== 4. 약속 ===== */
.fx-st-promise .fx-st-h2{font-size:clamp(34px,5.2vw,68px);line-height:1.12}
.fx-st-prom{border-top:1px solid var(--fx-edge-strong)}
.fx-st-prom__row{display:grid;gap:16px;padding:40px 0;border-bottom:1px solid var(--fx-edge)}
.fx-st-prom__k{font-size:clamp(36px,5vw,68px);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fx-fg)}
.fx-st-prom__t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-st-prom__d{margin-top:10px;max-width:520px;font-size:18px;line-height:1.75;color:var(--fx-fg-2)}

/* ===== 5. 진행 ===== */
.fx-st-steps__in{display:grid;gap:40px}
.fx-st-steps .fx-st-h2{font-size:clamp(30px,4.2vw,56px);line-height:1.18}
.fx-st-steps__head{align-self:start}
.fx-st-steps__body{display:grid;grid-template-columns:6px 1fr;gap:clamp(20px,3vw,40px)}
.fx-st-steps__list{display:grid;gap:56px}
.fx-st-step{display:grid;gap:8px}
.fx-st-step__n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
.fx-st-step__t{font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.fx-st-step__d{max-width:520px;font-size:18px;line-height:1.75;color:var(--fx-fg-2)}

/* ===== 6. 패스트웹 소개 ===== */
.fx-st-about__grid{display:grid;gap:56px;justify-items:center;text-align:center}
.fx-st-about__lead{display:grid;gap:20px;align-content:start;justify-items:center}
.fx-st-about__lead .fx-lead{max-width:640px;text-wrap:balance}
.fx-st-about__chips{justify-content:center}
.fx-st-num{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.fx-st-num__v{display:flex;align-items:baseline;font-size:clamp(72px,11vw,148px);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fx-st-num__v small{font-size:.38em;margin-left:.08em;letter-spacing:-.02em}
.fx-st-num__l{font-size:var(--fx-size-lead);color:var(--fx-fg)}
.fx-st-about__chips{margin-top:4px}
.fx-st-about__chips .fx-pill{min-height:32px;padding:0 14px;font-size:14px}
.fx-st-why{margin-top:72px;padding:clamp(24px,4vw,48px);border-radius:var(--fx-radius-l);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge)}
.fx-st-custom{max-width:720px;margin:72px auto 0;text-align:center}
.fx-st-custom__p{font-size:clamp(20px,2.2vw,26px);font-weight:500;line-height:1.6;letter-spacing:-.02em;color:var(--fx-fg-2);text-wrap:balance}
.fx-st-why__list{display:grid;gap:0;border-top:1px solid var(--fx-edge-strong)}
.fx-st-why__item{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--fx-edge)}
.fx-st-why__n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3);padding-top:6px}
.fx-st-why__t{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em;word-break:keep-all}
.fx-st-why__p{margin-top:8px;max-width:680px;font-size:18px;line-height:1.8;color:var(--fx-fg-2);word-break:keep-all;text-wrap:pretty}
.fx-st-why__pay{margin-top:32px}
.fx-st-why__pay .fx-st-why__p{margin-top:0}
.fx-st-why .fx-note{margin-top:16px}
.fx-st-person{display:grid;gap:24px;margin-top:72px;padding-top:48px;border-top:1px solid var(--fx-edge-strong)}
.fx-st-person__photo{width:144px;height:144px;border-radius:50%;overflow:hidden;background:var(--fx-card);display:grid;place-items:center}
.fx-st-person__photo img{width:100%;height:100%;object-fit:cover}
.fx-st-person__photo--empty span{font-size:56px;font-weight:700;color:var(--fx-fg-3)}
.fx-st-person__body{display:grid;gap:16px;justify-items:start;align-content:center}
.fx-st-person__name{font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-st-person__name span{margin-right:6px;color:var(--fx-fg-3)}
.fx-st-person__bio{max-width:640px;font-size:18px;line-height:1.7;color:var(--fx-fg-2);word-break:keep-all;text-wrap:balance}
.fx-st-person__quote{text-wrap:balance;max-width:640px;font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.45;letter-spacing:-.02em;word-break:keep-all}

/* ===== 7. 크몽 후기 (밝게) ===== */
.fx-st-rev .fx-st-h2{font-size:clamp(30px,3.8vw,48px);line-height:1.22}
.fx-st-rev__lead{margin-top:14px;max-width:620px}
.fx-st-by{display:flex;align-items:center;gap:14px;font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-st-face{width:48px;height:48px;border-radius:50%;flex:none;background:var(--fx-paper-2)}
.fx-st-rfeat{margin-top:48px;padding-top:32px;border-top:2px solid var(--fx-k1)}
.fx-st-rfeat__q{font-size:clamp(24px,3vw,40px);font-weight:600;line-height:1.5;letter-spacing:-.02em;color:var(--fx-fg);max-width:980px;word-break:keep-all}
.fx-st-rfeat .fx-st-by{margin-top:28px}
.fx-st-rfeat .fx-st-face{width:64px;height:64px}
.fx-st-rlist{display:grid;gap:0 clamp(32px,5vw,80px);margin-top:48px;align-items:stretch}
.fx-st-more .fx-st-rlist{margin-top:0}
.fx-st-rq{display:flex;flex-direction:column;padding:28px 0;border-top:1px solid var(--fx-edge-strong)}
.fx-st-rq blockquote{font-size:19px;line-height:1.8;color:var(--fx-fg-2);word-break:keep-all}
.fx-st-rq .fx-st-by{margin-top:auto;padding-top:20px}
.fx-st-more{margin-top:16px}
.fx-st-more__s{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--fx-radius-pill);font-weight:700;cursor:pointer;list-style:none;box-shadow:inset 0 0 0 1px var(--fx-edge-strong);transition:background-color var(--fx-time-fast)}
.fx-st-more__s::-webkit-details-marker{display:none}
.fx-st-more__s:hover{background:var(--fx-tint)}
.fx-st-more[open] .fx-st-more__s{margin-bottom:16px}
.fx-st-rev__links{margin-top:32px}
.fx-st-textlink{display:inline-flex;align-items:center;gap:.3em;min-height:44px;font-weight:600;color:var(--fx-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--fx-edge-strong)}
.fx-st-textlink:hover{text-decoration-color:currentColor}
.fx-st-caps{display:grid;gap:16px;margin-top:48px}
.fx-st-cap{background:#fff;border-radius:var(--fx-radius-m);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);overflow:hidden}
.fx-st-cap img{width:100%;height:auto}

/* ===== 본문(편집기) - 680px 열 ===== */
.fx-st-prose__in{max-width:680px;margin:0 auto;font-size:18px;line-height:1.8;color:var(--fx-fg-2)}
.fx-st-prose__in>*+*{margin-top:1.2em}
.fx-st-prose__in h2,.fx-st-prose__in h3{color:var(--fx-fg);line-height:1.3}
.fx-st-prose__in a{color:var(--fx-fg);text-decoration:underline;text-underline-offset:3px}
.fx-st-prose__in img{height:auto;border-radius:var(--fx-radius-m)}

/* ===== 8. 마지막 CTA ===== */
.fx-st-cta{background:var(--fx-s0)}
.fx-st-cta__h{font-size:clamp(40px,8vw,104px);line-height:1.06;letter-spacing:-.035em}
.fx-st-cta__d{margin-top:28px;max-width:520px}
.fx-st-cta__act{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 16px}

/* ===== 반응형 (모바일 먼저) ===== */
@media (min-width:768px){
  .fx-st-hero{padding:140px 0 88px}
  .fx-st-prom__row{grid-template-columns:5fr 7fr;gap:48px;align-items:baseline}
  .fx-st-rlist{grid-template-columns:1fr 1fr}
  .fx-st-person{grid-template-columns:200px 1fr;gap:48px}
  .fx-st-person__photo{width:200px;height:200px}
  .fx-st-caps{grid-template-columns:1fr 1fr}
  .fx-st-decl{min-height:85vh;padding:120px 0}
}
@media (min-width:1024px){
  .fx-st-pain__in{grid-template-columns:5fr 7fr;gap:80px}
  .fx-st-pain__head{position:sticky;top:120px;align-self:start}
  .fx-st-steps__in{grid-template-columns:4fr 8fr;gap:80px}
  .fx-st-steps__head{position:sticky;top:120px}
}
@media (min-width:1280px){
  .fx-st-decl{padding:160px 0}
}

@media (prefers-reduced-motion:reduce){
  .fx-st-pain__item,.fx-st-more__s{transition:none}
  .fx-st-pain__item:hover{transform:none}
}