/*
 * fx 업종 허브(industry) - 화면 전용 부품(접두사 fx-ind-). 공통 부품(fx-button·fx-pill·fx-panel·fx-facts·fx-wrap·fx-sec)은 components.css 것을 쓰고
 * 여기서는 이 화면에만 있는 모양을 둔다. 색은 --fx-* 토큰만, 움직임은 transform·opacity 만.
 * 순서: 1 공통 제목 -> 2 머리 -> 3 문제(지금/바뀐 뒤) -> 4 템플릿(기기 쌍·살아 있는 썸네일) -> 5 추천 기능 -> 6 로드맵 -> 7 계산기·한 줄 비교
 *       -> 8 비용 -> 9 맞는 분 -> 10 질문 -> 11 교차 안내·마지막 CTA -> 12 반응형 -> 13 reduced-motion
 */

/* ===== 1. 공통 제목(같은 크기를 세 번 이어 쓰지 않도록 5단) ===== */
.fx-ind-h1,.fx-ind-h2,.fx-ind-end h2{font-weight:700;letter-spacing:-.03em;word-break:keep-all}
.fx-ind-lime{color:var(--fx-brand);font-style:normal}
.fx-ind-h2{font-size:clamp(30px,4.2vw,52px);line-height:1.2}
.fx-ind-h2--xl{font-size:clamp(34px,5.4vw,68px);line-height:1.15}
.fx-ind-h2--lg{font-size:clamp(30px,4.6vw,58px);line-height:1.18}
.fx-ind-h2--md{font-size:clamp(28px,3.6vw,44px);line-height:1.22}
.fx-ind-h2--sm{font-size:clamp(26px,3vw,36px);line-height:1.25}

/* ===== 2. 머리 ===== */
.fx-ind-hero{background:var(--fx-s0);padding:clamp(120px,14vw,168px) 0 clamp(56px,7vw,96px)}
.fx-ind-hero__grid{display:grid;gap:40px;align-items:center}
.fx-ind-hero__cat{margin-bottom:20px}
.fx-ind-h1{font-size:clamp(36px,5.6vw,72px);line-height:1.1}
.fx-ind-hero__lead{margin-top:24px;max-width:560px}
.fx-ind-hero__act{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 16px}
.fx-ind-hero__sub{margin-top:20px;max-width:560px}
.fx-ind-shot{max-width:560px;margin-inline:auto}
.fx-ind-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}

/* 기기 쌍 무대 - 숏코드·원장이 그린 목업(.fxh-mock)을 어두운 무대로. 화면 창(16:8)을 낮춰 호버하면 위로 스크롤한다(transform 만) */
.fx-ind-stage{--mk-bg:var(--fx-s1);border-radius:var(--fx-radius-l);background:var(--fx-s1);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);overflow:hidden}
.fx-ind-stage--hero{box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong),var(--fx-shadow-m)}
.fx-ind-stage .fxh-mock{--mk-bezel:#2a2a30;background:var(--fx-s1);aspect-ratio:16/11}
.fx-ind-stage .fxh-mock__pc>.fxh-mock__screen{aspect-ratio:16/8;border-color:var(--mk-bezel);background:var(--fx-s2)}
.fx-ind-stage .fxh-mock .fxh-mock__pc .fxh-mock__img{height:auto;object-fit:fill;transform:translateY(0)!important;transition:transform 2.2s cubic-bezier(.45,.05,.2,1)}
.fx-ind-stage .fxh-mock__stand{background:#34343b}
.fx-ind-stage .fxh-mock__phone{box-shadow:0 0 0 max(1px,.25cqw) #4a4a52,0 1.5cqw 4cqw rgba(0,0,0,.5)}
@media (hover:hover) and (pointer:fine){
  .fx-ind-card:hover .fxh-mock__pc .fxh-mock__img,.fx-ind-card:focus-within .fxh-mock__pc .fxh-mock__img,.fx-ind-stage--hero:hover .fxh-mock__pc .fxh-mock__img{transform:translateY(-16%)!important}
}

/* ===== 3. 이 업종의 문제 ===== */
.fx-ind-problem{background:var(--fx-bg)}
.fx-ind-cmp{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--fx-edge-strong)}
.fx-ind-cmp__head{display:none}
.fx-ind-cmp__row{display:grid;gap:8px;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--fx-edge)}
.fx-ind-cmp__before{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--fx-fg-2)}
.fx-ind-cmp__arrow{display:none;color:var(--fx-fg-3);font-size:24px}
.fx-ind-cmp__after{font-size:clamp(19px,1.9vw,26px);line-height:1.4;font-weight:700;letter-spacing:-.02em;color:var(--fx-fg)}
.fx-ind-cmp__before::before,.fx-ind-cmp__after::before{display:block;margin-bottom:6px;font-size:var(--fx-size-small);font-weight:600;letter-spacing:0}
.fx-ind-cmp__before::before{content:"지금";color:var(--fx-fg-3)}
.fx-ind-cmp__after::before{content:"바뀐 뒤";color:var(--fx-brand)}

/* ===== 4. 템플릿 ===== */
.fx-ind-tpls{background:var(--fx-bg)}
.fx-ind-tpls__head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,48px)}
.fx-ind-tpls__head .fx-lead{max-width:520px}
.fx-ind-tgrid{display:grid;gap:clamp(14px,1.8vw,24px)}
.fx-ind-card{display:flex;flex-direction:column;border-radius:var(--fx-radius-l);background:var(--fx-card);box-shadow:inset 0 0 0 1px var(--fx-edge-ink);overflow:hidden;transition:transform var(--fx-time-mid) var(--fx-ease-out),box-shadow var(--fx-time-mid) var(--fx-ease-std)}
.fx-ind-card:hover{box-shadow:inset 0 0 0 1px var(--fx-edge-strong),var(--fx-shadow-s)}
.fx-ind-card .fx-ind-stage{border-radius:0;box-shadow:none;flex:1 1 auto;display:flex;align-items:center}
.fx-ind-card__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px}
.fx-ind-card__t{font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.3;letter-spacing:-.02em}
.fx-ind-card__d{font-size:16px;line-height:1.6;color:var(--fx-fg-2)}
.fx-ind-card__fee{font-size:16px;color:var(--fx-fg)}
.fx-ind-card__fee span{margin-left:6px;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-ind-card__act{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:6px}
.fx-ind-card__a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--fx-fg);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--fx-edge-strong)}
.fx-ind-card__a:hover{text-decoration-color:currentColor}
.fx-ind-card--demo{justify-content:center;background:var(--fx-s2)}
.fx-ind-tpls__all{margin-top:clamp(28px,3.4vw,44px)}

/* ===== 5. 추천 기능 ===== */
.fx-ind-feat{background:var(--fx-bg)}
.fx-ind-feat__list{margin-top:clamp(36px,5vw,72px);border-top:1px solid var(--fx-edge-strong)}
.fx-ind-feat__row{display:grid;gap:8px 24px;padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--fx-edge)}
.fx-ind-feat__n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
.fx-ind-feat__t{font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.3;letter-spacing:-.025em;word-break:keep-all}
.fx-ind-feat__d{font-size:clamp(17px,1.5vw,19px);line-height:1.7;color:var(--fx-fg-2)}

/* ===== 6. 로드맵(공구) ===== */
.fx-ind-road{background:var(--fx-bg)}
.fx-ind-road .fx-lead{margin-top:14px;max-width:600px}
.fx-ind-road__list{margin-top:clamp(32px,4vw,56px);display:grid;gap:0;border-left:1px solid var(--fx-edge-strong)}
.fx-ind-road__step{position:relative;padding:0 0 32px 28px}
.fx-ind-road__step::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--fx-brand)}
.fx-ind-road__n{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
.fx-ind-road__t{margin-top:4px;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.3}
.fx-ind-road__d{margin-top:8px;font-size:16px;line-height:1.7;color:var(--fx-fg-2)}

/* ===== 7. 계산기(템플릿 파일 template-parts/calc.php 의 옛 마크업을 어두운 면에 입힌다) ===== */
.fx-ind-calc,.fx-ind-line{background:var(--fx-bg)}
.fx-ind-calc__panel{margin-top:clamp(28px,4vw,48px);padding:clamp(24px,3.4vw,44px);background:var(--fx-card)}
.fx-ind-calc__panel .fs-calc2{width:100%}
.fx-ind-calc__panel .fs-calc2__inputs{display:grid;gap:24px}
.fx-ind-calc__panel .fs-field{margin:0}
.fx-ind-calc__panel .fs-field__label,.fx-ind-calc__panel .fs-calc__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font-size:16px;font-weight:600;color:var(--fx-fg)}
.fx-ind-calc__panel .fs-calc__value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--fx-brand);white-space:nowrap}
.fx-ind-calc__panel .fs-select,.fx-ind-calc__panel .fs-input{display:block;width:100%;min-height:52px;padding:0 18px;border:0;border-radius:var(--fx-radius-m);background:var(--fx-s1);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);font:inherit;font-size:17px}
.fx-ind-calc__panel .fs-select:focus-visible,.fx-ind-calc__panel .fs-input:focus-visible,.fx-ind-calc__panel .fs-calc__range:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-ind-calc__panel .fs-calc__range{display:block;width:100%;height:44px;margin:0;accent-color:var(--fx-brand);cursor:pointer}
.fx-ind-calc__panel .fs-calc__scale{display:flex;justify-content:space-between;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-ind-calc__panel .fs-calc2__out{display:grid;gap:20px;margin-top:32px;padding-top:28px;border-top:1px solid var(--fx-edge)}
.fx-ind-calc__panel .fs-calc__outlabel{display:block;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-ind-calc__panel .fs-calc__amount{display:block;margin:6px 0 4px;font-size:clamp(34px,5vw,60px);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fx-fg)}
.fx-ind-calc__panel .fs-calc__caption{margin:0;font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
.fx-ind-calc__panel .fs-calc2__cta{display:flex}
.fx-ind-calc__panel .fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border:0;border-radius:var(--fx-radius-pill);background:none;box-shadow:inset 0 0 0 1px var(--fx-edge-strong);color:var(--fx-fg);font:inherit;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;transition:box-shadow .2s,background-color .2s,color .2s}
.fx-ind-calc__panel .fs-btn:hover{box-shadow:inset 0 0 0 1px var(--fx-fg)}
.fx-ind-calc__panel .fs-btn--primary{background:var(--fx-t1);color:var(--fx-brand-ink);box-shadow:none}
.fx-ind-calc__panel .fs-btn--primary:hover{background:var(--fx-brand)}
.fx-ind-calc__panel .fs-btn:focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px}
.fx-ind-calc__panel .fs-report{margin-top:24px;padding-top:24px;border-top:1px solid var(--fx-edge)}
.fx-ind-calc__panel .fs-report[hidden],.fx-ind-calc__panel .fs-report__done[hidden],.fx-ind-calc__panel .fs-formmsg[hidden]{display:none}
.fx-ind-calc__panel .fs-report__grid{display:grid;gap:16px}
.fx-ind-calc__panel .fs-report__agree{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:15px;line-height:1.6;color:var(--fx-fg-2)}
.fx-ind-calc__panel .fs-report__agree input{flex:none;width:24px;height:24px;margin:2px 0 0;accent-color:var(--fx-brand)}
.fx-ind-calc__panel .fs-report__agree a,.fx-ind-calc__panel .fs-calc__disclaimer a{color:var(--fx-fg);text-decoration:underline;text-underline-offset:3px}
.fx-ind-calc__panel .fs-formmsg{margin-top:12px;font-size:15px;color:var(--fx-danger)}
.fx-ind-calc__panel .fs-report__foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.fx-ind-calc__panel .fs-note{font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-ind-calc__panel .fs-report__done{margin-top:20px;padding:20px;border-radius:var(--fx-radius-m);background:var(--fx-s1);color:var(--fx-fg)}
.fx-ind-calc__panel .fs-calc__disclaimer{margin-top:24px;font-size:var(--fx-size-small);line-height:1.7;color:var(--fx-fg-2)}
.fx-ind-calc__panel .fs-calc__disclaimer strong{color:var(--fx-fg);font-weight:600}
.fx-ind-calc__go{margin-top:28px}

.fx-ind-line__list{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--fx-edge-strong)}
.fx-ind-line__item{padding:20px 0;border-bottom:1px solid var(--fx-edge);font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--fx-fg-2)}
.fx-ind-line__item.is-us{color:var(--fx-fg);font-weight:700}

/* ===== 8. 비용 ===== */
.fx-ind-cost{background:var(--fx-bg)}
.fx-ind-cost__facts{margin-top:clamp(24px,3vw,40px)}
.fx-ind-cost .fx-facts__row{align-items:baseline}
.fx-ind-cost .fx-facts__v b{display:block;font-size:clamp(22px,2.4vw,32px);font-weight:700;letter-spacing:-.02em}
.fx-ind-cost__s{display:block;margin-top:4px;font-size:16px;color:var(--fx-fg-2)}
.fx-ind-cost__note{margin-top:24px;max-width:680px}

/* ===== 9. 맞는 분 · 안 맞는 분 ===== */
.fx-ind-fit{background:var(--fx-bg)}
.fx-ind-fit__grid{margin-top:clamp(28px,4vw,48px);display:grid;gap:clamp(28px,4vw,56px)}
.fx-ind-fit__t{font-size:20px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--fx-edge-strong)}
.fx-ind-fit__col--yes .fx-ind-fit__t{border-bottom-color:var(--fx-brand)}
.fx-ind-fit__list li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--fx-edge);font-size:17px;line-height:1.6;color:var(--fx-fg-2)}
.fx-ind-fit__col--yes .fx-ind-fit__list li{color:var(--fx-fg)}
.fx-ind-fit__mark{flex:none;width:20px;font-weight:700;color:var(--fx-fg-3)}
.fx-ind-fit__col--yes .fx-ind-fit__mark{color:var(--fx-brand)}

/* ===== 10. 질문 ===== */
.fx-ind-faq{background:var(--fx-bg)}
.fx-ind-faq__grid{display:grid;gap:28px}
.fx-ind-faq__list{border-top:1px solid var(--fx-edge-strong)}
.fx-ind-faq__item{border-bottom:1px solid var(--fx-edge)}
.fx-ind-faq__q{position:relative;display:flex;align-items:center;min-height:64px;padding:12px 44px 12px 0;font-size:clamp(17px,1.6vw,20px);font-weight:600;line-height:1.5;cursor:pointer;list-style:none}
.fx-ind-faq__q::-webkit-details-marker{display:none}
.fx-ind-faq__q::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:2px solid var(--fx-fg-2);border-bottom:2px solid var(--fx-fg-2);transform:rotate(45deg);transition:transform .25s var(--fx-ease-std)}
.fx-ind-faq__item[open] .fx-ind-faq__q::after{transform:rotate(-135deg);margin-top:-2px}
.fx-ind-faq__q:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-ind-faq__a{padding:0 0 24px;max-width:680px;font-size:17px;line-height:1.7;color:var(--fx-fg-2)}

/* ===== 11. 교차 안내 · 마지막 CTA ===== */
.fx-ind-cross{background:var(--fx-bg)}
.fx-ind-cross__in{display:grid;gap:20px;align-items:center;padding-block:8px}
.fx-ind-cross__t{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em}
.fx-ind-cross__d{margin-top:6px;max-width:620px;font-size:16px;line-height:1.6;color:var(--fx-fg-2)}
.fx-ind-end{background:var(--fx-s0);padding:clamp(88px,11vw,152px) 0}
.fx-ind-end h2{font-size:clamp(38px,7vw,96px);line-height:1.1;letter-spacing:-.035em}
.fx-ind-end__d{margin-top:24px;max-width:560px}
.fx-ind-end__act{margin-top:32px}
.fx-ind-end .fx-button{min-height:64px;padding:0 38px;font-size:20px}

/* ===== 12. 반응형 (모바일 먼저) ===== */
@media (max-width:640px){
  .fx-ind-hero__act .fx-button,.fx-ind-end .fx-button,.fx-ind-calc__go .fx-button{width:100%}
  .fx-ind-calc__panel .fs-calc2__cta .fs-btn{width:100%}
}
@media (min-width:768px){
  .fx-ind-calc__panel .fs-calc2__inputs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
  .fx-ind-calc__panel .fs-calc2__out{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  .fx-ind-calc__panel .fs-report__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-ind-fit__grid{grid-template-columns:1fr 1fr}
  .fx-ind-cross__in{grid-template-columns:1fr auto}
  .fx-ind-tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-ind-tgrid--3>.fx-ind-card:first-child{grid-column:1/-1}
  .fx-ind-cmp__head{display:grid;grid-template-columns:1fr 40px 1fr;gap:0 16px;padding:14px 0;border-bottom:1px solid var(--fx-edge);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
  .fx-ind-cmp__col--after{grid-column:3;color:var(--fx-brand)}
  .fx-ind-cmp__row{grid-template-columns:1fr 40px 1fr;gap:0 16px;align-items:start}
  .fx-ind-cmp__arrow{display:block;text-align:center}
  .fx-ind-cmp__before::before,.fx-ind-cmp__after::before{display:none}
  .fx-ind-feat__row{grid-template-columns:48px minmax(0,5fr) minmax(0,6fr);align-items:baseline}
  .fx-ind-road__list{grid-template-columns:repeat(4,minmax(0,1fr));border-left:0;border-top:1px solid var(--fx-edge-strong);gap:0 24px}
  .fx-ind-road__step{padding:28px 0 0}
  .fx-ind-road__step::before{left:0;top:-5px}
  .fx-ind-faq__grid{grid-template-columns:4fr 7fr;gap:48px}
}
@media (min-width:1024px){
  .fx-ind-hero__grid{grid-template-columns:7fr 5fr;gap:56px}
  .fx-ind-tgrid--3{grid-template-columns:7fr 5fr}
  .fx-ind-tgrid--3>.fx-ind-card:first-child{grid-column:1;grid-row:span 2}
  .fx-ind-tgrid--3>.fx-ind-card:not(:first-child){flex-direction:row}
  .fx-ind-tgrid--3>.fx-ind-card:not(:first-child) .fx-ind-stage{flex:0 0 46%}
  .fx-ind-tgrid--3>.fx-ind-card:not(:first-child) .fx-ind-card__body{justify-content:center;padding:20px 22px}
  .fx-ind-tpls__head{grid-template-columns:7fr 5fr;align-items:end}
  .fx-ind-feat .fx-ind-h2{max-width:780px}
}

/* ===== 13. reduced-motion: 최종 상태로 정지 ===== */
@media (prefers-reduced-motion:reduce){
  .fx-ind-card,.fx-ind-card:hover{transition:none;transform:none}
  .fx-ind-stage .fxh-mock .fxh-mock__pc .fxh-mock__img{transition:none}
  .fx-ind-card:hover .fxh-mock__pc .fxh-mock__img,.fx-ind-card:focus-within .fxh-mock__pc .fxh-mock__img,.fx-ind-stage--hero:hover .fxh-mock__pc .fxh-mock__img{transform:translateY(0)!important}
  .fx-ind-faq__q::after{transition:none}
}