/*
 * fx 시작하기 /start/ (화면키 start) — 어두운 얇은 머리(단계 + 제목) + 밝은 요금제 고르기.
 * 구획: 1 머리 / 2 본문·고른 디자인 / 3 요금제 카드 / 4 이용 기간 칩 / 5 결제 일정 안내·메모 / 6 반응형·모션
 * 값은 전부 --fx-* 토큰. 라임은 주 버튼·선택된 기간 칩·현재 단계에만.
 * 마크업: template-parts/fx/start.php (칩 합계 JS 는 옛 site.js — 훅 클래스 .fs-plan .fs-term 유지)
 */

/* ===== 1. 머리 — 헤더(fixed 12 + 64) 아래에서 시작 ===== */
.fx-start__head{padding:calc(76px + var(--fx-sp-12)) 0 var(--fx-sp-12);background:var(--fx-bg);color:var(--fx-fg)}
.fx-start__head-in{display:grid;gap:var(--fx-sp-6);justify-items:start}
.fx-start__steps{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:15px;color:var(--fx-fg-3)}
.fx-start__step{display:inline-flex;align-items:center;gap:10px;min-height:32px}
.fx-start__n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fx-edge-strong);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-fg-2)}
.fx-start__step.is-done{color:var(--fx-fg-2)}
.fx-start__step.is-done .fx-start__n{background:var(--fx-fg);color:var(--fx-bg);box-shadow:none}
.fx-start__sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-start__step.is-now{color:var(--fx-fg);font-weight:700}
.fx-start__step.is-now .fx-start__n{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none}
.fx-start__h1{font-size:clamp(32px,4.4vw,56px);line-height:1.2;font-weight:700;letter-spacing:-.03em;color:var(--fx-fg)}
.fx-start__lead{max-width:640px;font-size:var(--fx-size-lead);line-height:1.7;color:var(--fx-fg-2)}

/* ===== 2. 본문 ===== */
.fx-start__body{padding:var(--fx-sp-12) 0 var(--fx-sp-24);background:var(--fx-bg);color:var(--fx-fg)}
.fx-start__body>.fx-wrap{display:grid;gap:var(--fx-sp-8)}
.fx-start__empty .fx-empty__d{max-width:560px}

/* 고른 디자인 — 사진 하나 + 이름·설치비 + 두 링크 한 줄 */
.fx-start__pick{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--fx-sp-4) var(--fx-sp-6);padding:var(--fx-sp-4);border-radius:var(--fx-radius-l);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge)}
.fx-start__pick-img{width:120px;height:80px;border-radius:var(--fx-radius-s);object-fit:cover;object-position:top;background:var(--fx-card-2);box-shadow:inset 0 0 0 1px var(--fx-edge)}
.fx-start__pick-body{display:grid;gap:2px;min-width:0}
.fx-start__pick-k{font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-start__pick-name{font-size:20px;font-weight:700;line-height:1.35;letter-spacing:-.02em;overflow-wrap:anywhere}
.fx-start__pick-fee{font-size:15px;color:var(--fx-fg-2)}
.fx-start__pick-fee b{color:var(--fx-fg);font-variant-numeric:tabular-nums}
.fx-start__pick>.fx-start__link{grid-column:1/-1;justify-self:start}
.fx-start__link{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--fx-fg);text-decoration:underline;text-decoration-color:var(--fx-edge-strong);text-underline-offset:4px;transition:text-decoration-color var(--fx-time-fast) var(--fx-ease-std)}
.fx-start__link:hover{text-decoration-color:var(--fx-fg)}
.fx-start__alert{margin:0}

/* ===== 3. 요금제 카드 — 강조 칸은 어두운 면, 나머지는 밝은 카드 ===== */
.fx-start__plans{display:grid;gap:var(--fx-sp-6);grid-template-columns:minmax(0,1fr);align-items:stretch}
.fx-start__plans--single{max-width:520px}
.fx-start-plan{display:flex;flex-direction:column;gap:var(--fx-sp-4);min-width:0;padding:var(--fx-sp-6);border-radius:var(--fx-radius-l);background:var(--fx-card);color:var(--fx-fg);box-shadow:inset 0 0 0 1px var(--fx-edge-strong)}
.fx-start-plan--main{background:var(--fx-bg);box-shadow:var(--fx-shadow-paper)}
.fx-start-plan__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fx-sp-2) var(--fx-sp-4)}
.fx-start-plan__name{font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.025em}
.fx-start-plan__badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--fx-radius-pill);background:var(--fx-brand);color:var(--fx-brand-ink);font-size:var(--fx-size-min);font-weight:700}
.fx-start-plan__desc{font-size:16px;line-height:1.6;color:var(--fx-fg-2)}
.fx-start-plan__desc:empty{display:none}
.fx-start-plan__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.fx-start-plan__amount{font-size:clamp(36px,4vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fx-start-plan__cycle{font-size:17px;color:var(--fx-fg-2)}
.fx-start-plan__was{font-size:16px;color:var(--fx-fg-3);text-decoration:line-through;font-variant-numeric:tabular-nums}

/* 금액 표 */
.fx-start-plan__rows{border-top:1px solid var(--fx-edge-strong)}
.fx-start-plan__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--fx-sp-4);padding:12px 0;border-bottom:1px solid var(--fx-edge);font-size:16px}
.fx-start-plan__row dt{color:var(--fx-fg-2)}
.fx-start-plan__row dt span{margin-left:6px;font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-start-plan__row dd{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.fx-start-plan__then{display:block;font-size:var(--fx-size-small);font-weight:400;color:var(--fx-fg-3)}
.fx-start-plan__row--total{align-items:center;padding:var(--fx-sp-4) 0 var(--fx-sp-2);border-bottom:0}
.fx-start-plan__row--total dt{font-weight:700;color:var(--fx-fg)}
.fx-start-plan__row--total dd{font-size:clamp(26px,2.6vw,32px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.fx-start-plan__meta{font-size:var(--fx-size-small);line-height:1.65;color:var(--fx-fg-3)}
.fx-start-plan__zero{display:inline-flex;align-self:flex-start;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--fx-radius-pill);font-size:15px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--fx-fg)}
.fx-start-plan__features{display:grid;gap:10px;padding-top:var(--fx-sp-2)}
.fx-start-plan__features li{position:relative;padding-left:28px;font-size:16px;line-height:1.55;color:var(--fx-fg)}
.fx-start-plan__features li::before{content:"";position:absolute;left:4px;top:.42em;width:10px;height:6px;border-left:2px solid var(--fx-fg);border-bottom:2px solid var(--fx-fg);transform:rotate(-45deg)}
.fx-start-plan__cta{margin-top:auto;padding-top:var(--fx-sp-4)}
.fx-start-plan__cta form{margin:0}
.fx-start-plan__cta .fx-button{min-height:56px;font-size:17px;white-space:normal;text-align:center;line-height:1.3}
.fx-start-plan__cta .fx-button.is-loading{opacity:.75;cursor:progress;transform:none}
.fx-start-plan__cta .fx-button[aria-disabled=true]{pointer-events:none}
/* 다른 요금제 버튼은 어두운 면 밖(밝은 카드)에서 잉크 면 */
.fx-start-plan:not(.fx-start-plan--main) .fx-button--ink{background:var(--fx-k1);color:var(--fx-paper)}

/* ===== 4. 이용 기간 칩 (라디오 — 실제 input 이 칩 전체를 덮는다) ===== */
.fx-start-terms{min-width:0;margin:0;padding:0;border:0}
.fx-start-terms__legend{padding:0;margin:0 0 var(--fx-sp-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2)}
.fx-start-terms__chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--fx-sp-2)}
.fx-start-term{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;min-height:56px;padding:6px 16px;border-radius:var(--fx-radius-m);background:var(--fx-bg);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);cursor:pointer;transition:background-color var(--fx-time-fast) var(--fx-ease-std),box-shadow var(--fx-time-fast) var(--fx-ease-std)}
.fx-start-plan--main .fx-start-term{background:transparent}
.fx-start-term input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fx-start-term:hover{box-shadow:inset 0 0 0 1px var(--fx-fg-2)}
.fx-start-term:focus-within{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-start-term.is-selected{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none}
.fx-start-term__m{font-size:17px;font-weight:700;line-height:1.3}
.fx-start-term__b{font-size:var(--fx-size-min);font-weight:600;line-height:1.3;color:var(--fx-fg-2)}
.fx-start-term.is-selected .fx-start-term__b{color:var(--fx-brand-ink)}
.fx-start-terms__note{margin:var(--fx-sp-2) 0 0;font-size:var(--fx-size-small);line-height:1.6;color:var(--fx-fg-2)}
.fx-start-terms__note:empty{display:none}

/* ===== 5. 결제 일정·해지·환불 안내(.fh-billnote — 플러그인 마크업) + 메모 ===== */
.fx-start__billnote .fh-billnote{margin:0;padding:var(--fx-sp-6) 0 0;border:0;border-top:1px solid var(--fx-edge-strong);border-radius:0;background:none;color:var(--fx-fg-2)}
.fx-start__billnote .fh-billnote__t{margin:0 0 var(--fx-sp-2);font-size:var(--fx-size-h3);font-weight:700;line-height:1.3;letter-spacing:-.02em;color:var(--fx-fg)}
.fx-start__billnote .fh-billnote__r{grid-template-columns:minmax(0,1fr);gap:4px;padding:var(--fx-sp-4) 0;border-top:1px solid var(--fx-edge);font-size:16px;line-height:1.7}
.fx-start__billnote .fh-billnote__r:first-of-type{border-top:0}
.fx-start__billnote .fh-billnote dt{font-size:16px;color:var(--fx-fg)}
.fx-start__billnote .fh-billnote dd{color:var(--fx-fg-2)}
.fx-start__billnote .fh-billnote ul{margin:0 0 8px;padding-left:20px}
.fx-start__billnote .fh-billnote a{display:inline-flex;align-items:center;min-height:44px;color:var(--fx-fg);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.fx-start__note{font-size:16px;line-height:1.7;color:var(--fx-fg-2)}
.fx-start__note a{display:inline-flex;align-items:center;min-height:44px;color:var(--fx-fg);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* ===== 6. 반응형 ===== */
@media (min-width:768px){
  .fx-start__plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-start__plans--single{grid-template-columns:minmax(0,1fr)}
  .fx-start-plan{padding:var(--fx-sp-8)}
  .fx-start-terms__chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fx-start__pick{grid-template-columns:auto minmax(0,1fr) auto;padding:var(--fx-sp-4) var(--fx-sp-6) var(--fx-sp-4) var(--fx-sp-4)}
  .fx-start__pick{row-gap:0}
  .fx-start__pick>.fx-start__pick-img{grid-row:1/span 2}
  .fx-start__pick>.fx-start__pick-body{grid-row:1/span 2}
  .fx-start__pick>.fx-start__link{grid-column:3;justify-self:end}
  .fx-start__pick>.fx-start__link--change{align-self:end}
  .fx-start__pick>.fx-start__demo{align-self:start}
  .fx-start__billnote .fh-billnote__r{grid-template-columns:200px minmax(0,1fr);gap:var(--fx-sp-6)}
}
@media (min-width:1024px){
  .fx-start__body{padding-top:var(--fx-sp-16)}
}
@media (max-width:480px){
  .fx-start__head{padding-top:calc(76px + var(--fx-sp-8));padding-bottom:var(--fx-sp-8)}
  .fx-start__steps{gap:4px 16px}
  .fx-start__pick-img{width:96px;height:64px}
  .fx-start-plan__row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .fx-start-term,.fx-start__link{transition:none}
}

/* S2 setup */
[data-fx-setup]{margin:24px 0;padding-top:16px;border-top:1px solid var(--fx-edge-strong)}
.fx-start__setup-t{margin:0 0 4px;font-size:15px;font-weight:600;line-height:1.4;color:var(--fx-fg)}
.fx-start__setup-d{margin:0;font-size:13.5px;line-height:1.6;color:var(--fx-fg-2)}
.fx-start__setup-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 0;font-size:15px;font-weight:600;line-height:1.4;color:var(--fx-fg);cursor:pointer}
.fx-start__setup-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--fx-fg);cursor:pointer}
.fx-start__setup-opt input:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-start__setup-opt:has(input:focus-visible){outline:2px solid var(--fx-ring);outline-offset:2px;border-radius:var(--fx-radius-m)}
.fx-start__setup-opt b{font-weight:700;font-variant-numeric:tabular-nums}