/*
 * fx 기능 목록(/feature/) — 화면 키 features. 접두사 fx-feats-.
 * 면: 전부 어둡게(머리·지금 켤 수 있는 기능 s0 → 함께 쓰는 기능 s1 → 곧 열리는 기능 s0 → 마지막 CTA s1). 같은 흰 카드 나열 없이 행 목록 + 상태 칩.
 * 위계: 「지금 켤 수 있는 기능」 행이 크고(이름 28px·가격 옆), 「함께 쓰는 기능」은 2열 얇은 행, 「곧 열리는 기능」은 흐린 행 + 알림 받기.
 */

.fx-feats{background:var(--fx-s0)}

/* ===== 머리 (고정 헤더 아래 여백은 화면 몫 — 0단계-B 결정 4) ===== */
.fx-feats-head{padding:clamp(120px,14vw,176px) 0 clamp(40px,5vw,72px)}
.fx-feats-h1{font-size:clamp(44px,8vw,104px);line-height:1.04;letter-spacing:-.04em;font-weight:700}
.fx-feats-head__lead{max-width:34em;margin-top:var(--fx-sp-6);color:var(--fx-fg-2)}

/* ===== 구획 ===== */
.fx-feats-sec{padding:clamp(48px,6vw,88px) 0}
.fx-feats-sec--now{padding-top:clamp(24px,3vw,40px)}
.fx-feats-h2{display:flex;align-items:baseline;gap:var(--fx-sp-3);margin-bottom:var(--fx-sp-6);font-size:clamp(28px,3.4vw,44px);line-height:1.2;font-weight:700;letter-spacing:-.025em}
.fx-feats-n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3);padding:2px 10px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);letter-spacing:0}
.fx-feats-sec__lead{max-width:34em;margin:calc(var(--fx-sp-2) * -1) 0 var(--fx-sp-6)}

/* ===== 행 목록 ===== */
.fx-feats-list{border-top:1px solid var(--fx-edge-strong)}
.fx-feats-row{position:relative;display:flex;align-items:stretch;border-bottom:1px solid var(--fx-edge)}
.fx-feats-row__a{
  position:relative;flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--fx-sp-2) var(--fx-sp-6);
  min-height:88px;padding:var(--fx-sp-6) var(--fx-sp-2);
  transition:background-color .25s var(--fx-ease-std);
}
a.fx-feats-row__a:hover{background:var(--fx-tint)}
.fx-feats-row__main{display:grid;gap:4px;min-width:0}
.fx-feats-row__name{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.02em}
.fx-feats-row__desc{font-size:var(--fx-size-body);line-height:1.6;color:var(--fx-fg-2);max-width:46em}
.fx-feats-row__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--fx-sp-2) var(--fx-sp-3)}
.fx-feats-row__cost{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg)}
.fx-feats-row__go{display:none;font-size:22px;color:var(--fx-fg-3);transition:transform .25s var(--fx-ease-std),color .2s}
a.fx-feats-row__a:hover .fx-feats-row__go,a.fx-feats-row__a:focus-visible .fx-feats-row__go{transform:translateX(6px);color:var(--fx-brand)}
.fx-feats-row__ask{
  display:inline-flex;align-items:center;align-self:center;min-height:44px;margin:0 var(--fx-sp-2);padding:0 18px;border-radius:var(--fx-radius-pill);
  box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:var(--fx-size-small);font-weight:700;white-space:nowrap;
  transition:background-color .2s,box-shadow .2s;
}
.fx-feats-row__ask:hover{background:var(--fx-tint);box-shadow:inset 0 0 0 1px var(--fx-fg-3)}

/* 지금 켤 수 있는 기능: 크게 */
.fx-feats-list--now .fx-feats-row__a{min-height:112px;padding-block:var(--fx-sp-8)}
.fx-feats-list--now .fx-feats-row__name{font-size:clamp(24px,2.6vw,32px)}
.fx-feats-list--now .fx-feats-row__cost{font-size:var(--fx-size-body)}

/* 곧 열리는 기능: 한 단계 낮게 */
.fx-feats-row--soon .fx-feats-row__name{color:var(--fx-fg-2)}
.fx-feats-row--soon .fx-feats-row__desc{color:var(--fx-fg-3)}
.fx-feats-row__a--static{cursor:default}

/* ===== 마지막 CTA ===== */
.fx-feats-end{padding:clamp(72px,9vw,144px) 0}
.fx-feats-end__t{font-size:clamp(32px,5.6vw,72px);line-height:1.12;letter-spacing:-.035em;font-weight:700}
.fx-feats-end .fx-lead{max-width:32em;margin-top:var(--fx-sp-6)}
.fx-feats-end__act{margin-top:var(--fx-sp-8)}

@media (min-width:768px){
  .fx-feats-row__a{grid-template-columns:minmax(0,1fr) auto 28px}
  .fx-feats-row__go{display:block}
  .fx-feats-row__ask{margin:0 var(--fx-sp-4)}
}
@media (min-width:1024px){
  /* 함께 쓰는 기능은 2열 얇은 행 */
  .fx-feats-list--rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--fx-sp-12)}
  .fx-feats-list--rest .fx-feats-row__name{font-size:20px}
  .fx-feats-list--rest .fx-feats-row__desc{font-size:16px}
}
@media (max-width:767px){
  .fx-feats-row{flex-wrap:wrap}
  .fx-feats-row__a{min-height:88px}
  .fx-feats-row__meta{grid-column:1/-1;justify-content:flex-start}
  .fx-feats-row__ask{margin:0 var(--fx-sp-2) var(--fx-sp-4)}
}
@media (prefers-reduced-motion:reduce){
  .fx-feats-row__a,.fx-feats-row__go,.fx-feats-row__ask{transition:none}
}
#fxFeatsRest.fx-feats-h2{font-size:clamp(24px,2.8vw,34px)}
#fxFeatsSoon.fx-feats-h2{font-size:clamp(22px,2.2vw,28px)}
.fx-feats-list--rest .fx-feats-row__a{align-items:start}
@media (max-width:767px){
  .fx-feats-row:has(.fx-feats-row__ask){flex-wrap:wrap;align-items:flex-start}
  .fx-feats-row:has(.fx-feats-row__ask) .fx-feats-row__a{flex-basis:100%;padding-bottom:var(--fx-sp-3)}
  .fx-feats-row__ask{margin:0 var(--fx-sp-2) var(--fx-sp-6)}
}