/*
 * 템플릿 상세(화면키 template-detail) — 시안 C 부품(tokens·components·motion) 위에 얹는 화면 전용 규칙.
 * 접두사 fx-td-. 모바일 우선(기본=모바일, 768·1024 에서 넓힘). transform·opacity 만 움직인다.
 * 구성: 1 무대 · 2 스티키 바 · 3 이런 사장님께 · 4 화면 투어 · 5 내 상호로 보기 · 6 사실 표 · 7 운영 장면 ·
 *       8 비용 · 9 고치려면 · 10 FAQ · 후기 · 같은 업종 · 마지막 CTA · 옛 부품(옵션·혜택·이벤트) 최소 모양
 */

/* 옛 모바일 하단 구매 바(단일 상품 템플릿이 문서 끝에 출력)는 새 스티키 바가 대신한다 */
/* 플러그인이 모바일에서 display:flex !important 를 걸어 두어 !important 가 필요하다 */
html[data-fx-screen="template-detail"] .fhs-pdp-mobilebar{display:none!important}
html[data-fx-screen="template-detail"] .fhs-cart-drawer__count{font-size:var(--fx-size-min)}

.fx-td{position:relative;color:var(--fx-fg);font-family:var(--fx-face);overflow-x:clip}
.fx-td *,.fx-td *::before,.fx-td *::after{box-sizing:border-box}
.fx-td img{max-width:100%;height:auto}
.fx-td del{opacity:.6}

/* ===== 제목 3단: 선언 64 / 일반 48 / 정보 32 ===== */
.fx-td-h2{font-size:clamp(30px,4vw,48px);line-height:1.2;font-weight:700;letter-spacing:-.025em;margin-bottom:var(--fx-sp-6)}
.fx-td-h2--decl{font-size:clamp(36px,6vw,64px);line-height:1.12;letter-spacing:-.03em}
.fx-td-h2--info{font-size:clamp(26px,2.6vw,32px);line-height:1.3}
.fx-td-h3{font-size:var(--fx-size-h3);line-height:1.3;font-weight:700;letter-spacing:-.02em;margin:var(--fx-sp-12) 0 var(--fx-sp-4)}
.fx-td-sec{padding:clamp(56px,7vw,96px) 0}
.fx-td-more{margin-top:var(--fx-sp-6)}
.fx-td-textlink{display:inline-flex;align-items:center;min-height:44px;gap:6px;font-weight:600;color:var(--fx-fg-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--fx-edge-strong)}
.fx-td-textlink:hover{color:var(--fx-fg)}
.fx-td-inline{display:inline-block;padding:12px 2px;margin:-12px 0;text-decoration:underline;text-underline-offset:3px}
.fx-td-block{display:block;margin-top:8px}

/* ===== 1. 무대 ===== */
.fx-td-stage{position:relative;padding:104px 0 56px;background:var(--fx-s0);overflow-x:clip}
.fx-td-stage__grid{display:grid;gap:var(--fx-sp-6);align-items:start;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "dev" "buy"}
.fx-td-stage__head{grid-area:head}
.fx-td-stage__buy{grid-area:buy}
.fx-td-stage__dev{grid-area:dev}
.fx-td-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-td-crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin-left:-4px}
.fx-td-crumb a:hover{color:var(--fx-fg)}
.fx-td-h1{font-size:clamp(32px,5vw,64px);line-height:1.1;font-weight:800;letter-spacing:-.03em;word-break:keep-all}
.fx-td-lead{margin-top:var(--fx-sp-3);font-size:var(--fx-size-lead);line-height:1.65;color:var(--fx-fg-2);max-width:34em}
.fx-td-price{margin-top:0;padding:var(--fx-sp-4) 0 0;border-top:1px solid var(--fx-edge-strong)}
.fx-td-price__k{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2)}
.fx-td-price__big{font-size:clamp(34px,4.4vw,48px);line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--fx-fg)}
.fx-td-price__then{margin-top:4px;font-size:var(--fx-size-lead);font-weight:600;color:var(--fx-fg-2)}
.fx-td-price__was{font-size:.55em;font-weight:600}
.fx-td-opts{margin-top:var(--fx-sp-6)}
.fx-td-cta{display:flex;flex-wrap:wrap;gap:var(--fx-sp-3);margin-top:var(--fx-sp-6)}
.fx-td-cta .fx-button{flex:1 1 220px}
.fx-td-sub{display:flex;align-items:center;flex-wrap:wrap;gap:var(--fx-sp-3) var(--fx-sp-6);margin-top:var(--fx-sp-2)}
.fx-td-peek{display:flex;flex-wrap:wrap;gap:var(--fx-sp-2)}
.fx-td-peek__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:var(--fx-radius-pill);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);transition:color var(--fx-time-fast),background-color var(--fx-time-fast)}
.fx-td-peek__btn:hover{color:var(--fx-fg);background:var(--fx-tint)}
.fx-td-peek__btn:focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px}
.fx-td-trycap{margin-top:var(--fx-sp-2);font-size:var(--fx-size-small);color:var(--fx-fg-3)}
.fx-td-heart{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border-radius:var(--fx-radius-pill);color:var(--fx-fg-2);transition:color var(--fx-time-fast),background-color var(--fx-time-fast)}
.fx-td-heart:hover{color:var(--fx-fg);background:var(--fx-tint)}
.fx-td-heart.active{color:var(--fx-brand)}
.fx-td-heart.active svg{fill:currentColor}
/* 찜 버튼: 플러그인 목록 카드용 규칙(.fhs-wishlist-btn: 절대위치·흰 원·그림자)을 되돌린다. 안 그러면 헤더 위로 흰 원이 뜬다 */
.fx-td-heart.fhs-wishlist-btn{position:static;top:auto;right:auto;width:auto;height:auto;border:0;background:transparent;box-shadow:none;font-size:inherit;color:var(--fx-fg-2)}
.fx-td-heart.fhs-wishlist-btn:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fx-td-heart.fhs-wishlist-btn.active{background:transparent;color:var(--fx-brand)}
.fx-td-fine{margin-top:var(--fx-sp-2);max-width:36em}

/* 데모를 받은 사람: 주=시작하기, 보조=데모 다시 받기(마크업 같음, 속성만 바뀐다) */
.fx-td[data-demoed] .fx-td-btn-start{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none;order:-1}
.fx-td[data-demoed] .fx-td-btn-start:hover{background:var(--fx-brand-hover)}
.fx-td[data-demoed] .fx-td-btn-demo{background:none;color:var(--fx-fg);box-shadow:inset 0 0 0 1px var(--fx-edge-strong)}
.fx-td[data-demoed] .fx-td-btn-demo::after{box-shadow:0 0 24px 2px rgba(255,255,255,.12)}

/* 기기 쌍 */
.fx-td-stage__dev{position:relative;padding-bottom:var(--fx-sp-8)}
.fx-td-pc{border-radius:var(--fx-radius-l);background:var(--fx-s2);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong),var(--fx-shadow-l);overflow:hidden}
.fx-td-pc__bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:var(--fx-s0);border-bottom:1px solid var(--fx-edge-ink)}
.fx-td-pc__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.fx-td-pc__url{margin-left:10px;padding:2px 12px;border-radius:var(--fx-radius-pill);background:rgba(255,255,255,.07);font-size:var(--fx-size-min);color:var(--fx-t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.fx-td-pc__view{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--fx-s1)}
.fx-td-pc__view img{display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:left top;will-change:transform}
.fx-td-phone{position:absolute;left:-4px;bottom:0;width:min(34%,170px);aspect-ratio:9/19;border-radius:24px;padding:5px;background:var(--fx-s3);box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong),var(--fx-shadow-l)}
.fx-td-phone__view{width:100%;height:100%;overflow:hidden;border-radius:19px;background:var(--fx-s1)}
.fx-td-phone__view img{display:block;width:100%;height:auto;will-change:transform}
.fx-td-nodev{min-height:260px}
/* 데모가 위로 스크롤: 한 번만 재생하고 멈춘다(JS 가 이동량을 정한다) */
@keyframes fx-td-scroll{to{transform:translateY(var(--fx-td-dy,0px))}}
.fx-td-scroll.is-play{animation:fx-td-scroll var(--fx-td-dur,14s) cubic-bezier(.45,0,.25,1) 1.2s 1 both}

/* ===== 2. 스티키 구매 바 ===== */
.fx-td-bar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(17,17,19,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 -1px 0 var(--fx-edge-ink-strong);transform:translateY(105%);visibility:hidden;transition:transform .35s var(--fx-ease-out),visibility 0s .35s;color:var(--fx-t1)}
.fx-td-bar.is-on{transform:none;visibility:visible;transition:transform .35s var(--fx-ease-out),visibility 0s}
.fx-td-bar__in{display:grid;gap:6px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.fx-td-bar__name{display:none;font-weight:700}
.fx-td-bar__price{font-size:15px;font-weight:700;line-height:1.4;color:var(--fx-t1)}
.fx-td-bar__act{display:grid;grid-template-columns:1.7fr 1fr;gap:8px}
.fx-td-bar__act .fx-button{min-height:44px;padding:0 12px;font-size:16px}
.fx-td-bar .fx-button--lime{color:var(--fx-brand-ink)}
.fx-td-bar .fx-button--line{box-shadow:inset 0 0 0 1px var(--fx-edge-ink-strong);color:var(--fx-t1)}

/* ===== 3. 이런 사장님께 ===== */
.fx-td-fit{background:var(--fx-bg)}
.fx-td-fit__grid{display:grid;gap:var(--fx-sp-8)}
.fx-td-fit ul{display:grid;gap:var(--fx-sp-3)}
.fx-td-fit li{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;font-size:clamp(19px,2vw,26px);line-height:1.5;font-weight:600;letter-spacing:-.015em}
.fx-td-fit__col--no li{font-size:clamp(17px,1.6vw,20px);font-weight:400}
.fx-td-fit__k{margin-bottom:var(--fx-sp-3);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-3)}
.fx-td-fit__col--no li{color:var(--fx-fg-2)}
.fx-td-mark{position:relative;width:20px;height:20px;margin-top:5px;border-radius:50%}
.fx-td-mark--yes{background:var(--fx-brand)}
.fx-td-mark--yes::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid var(--fx-brand-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fx-td-mark--no{box-shadow:inset 0 0 0 1.5px var(--fx-fg-3)}
.fx-td-mark--no::after{content:"";position:absolute;left:5px;top:9px;width:10px;height:2px;background:var(--fx-fg-3)}

/* ===== 4. 화면 투어 ===== */
.fx-td-tour{background:var(--fx-bg)}
.fx-td-tour__lead{max-width:36em;margin-bottom:var(--fx-sp-8)}
.fx-td-tour__tabs{display:flex;align-items:center;gap:8px;margin-bottom:var(--fx-sp-6);overflow-x:auto;scrollbar-width:none;padding:2px}
.fx-td-tour__tabs::-webkit-scrollbar{display:none}
.fx-td-tab{position:relative;flex:none;min-height:44px;padding:0 20px;border-radius:var(--fx-radius-pill);font-size:16px;font-weight:600;color:var(--fx-fg-2);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);overflow:hidden;transition:background-color var(--fx-time-fast),color var(--fx-time-fast)}
.fx-td-tab:hover{color:var(--fx-fg);background:var(--fx-tint)}
.fx-td-tab[aria-selected="true"]{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none}
.fx-td-tab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--fx-brand-ink);opacity:.5;transform:scaleX(0);transform-origin:left}
.fx-td-tour.is-run .fx-td-tab[aria-selected="true"]::after{animation:fx-td-prog var(--fx-td-int,5s) linear 1 forwards}
@keyframes fx-td-prog{to{transform:scaleX(1)}}
.fx-td-tour__pause{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-left:auto;padding:0 16px;border-radius:var(--fx-radius-pill);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2)}
.fx-td-tour__pause:hover{color:var(--fx-fg)}
.fx-td-tour__pause-i{position:relative;width:12px;height:12px}
.fx-td-tour__pause-i::before,.fx-td-tour__pause-i::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:currentColor;border-radius:1px}
.fx-td-tour__pause-i::before{left:0}.fx-td-tour__pause-i::after{right:0}
.fx-td-tour__pause[aria-pressed="true"] .fx-td-tour__pause-i::before{left:1px;width:0;height:0;top:0;bottom:auto;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;border-radius:0}
.fx-td-tour__pause[aria-pressed="true"] .fx-td-tour__pause-i::after{display:none}
.fx-td-pane{margin:0}
.fx-td-pane[hidden]{display:none}
.fx-td-pane:not([hidden]){animation:fx-td-fade .5s var(--fx-ease-out)}
@keyframes fx-td-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fx-td-pc--tour{max-width:980px;margin:0 auto}
.fx-td-pc__view--tour{aspect-ratio:4/3}
.fx-td-pc__view--tour img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fx-td-pane__cap{margin-top:var(--fx-sp-3);text-align:center;font-size:var(--fx-size-small);color:var(--fx-fg-3)}

/* ===== 5. 내 상호로 보기 ===== */
.fx-td-my{background:var(--fx-bg)}
.fx-td-my__grid{display:grid;gap:var(--fx-sp-12);align-items:center}
.fx-td-my__form{margin-top:var(--fx-sp-8)}
.fx-td-my__label{display:block;margin-bottom:var(--fx-sp-2);font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2)}
.fx-td-my__row{display:grid;gap:var(--fx-sp-3)}
.fx-td-my__input{min-height:56px}
.fx-td-my__go{width:100%}
.fx-td-my .fx-field-msg{margin-top:var(--fx-sp-2)}
.fx-td-site{border-radius:var(--fx-radius-l);background:#fff;color:#111;overflow:hidden;box-shadow:var(--fx-shadow-l)}
.fx-td-site__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:0 20px;border-bottom:1px solid #e4e4df;background:#fff}
.fx-td-site__logo{max-width:70%;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .2s}
.fx-td-site__nav{display:flex;gap:10px}
.fx-td-site__nav i{display:block;width:28px;height:6px;border-radius:3px;background:#d8d8d2}
.fx-td-site__body{aspect-ratio:16/10;overflow:hidden;background:#f1f1ee}
.fx-td-site__body img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.fx-td-site__body--blank{display:grid;gap:12px;padding:20px}
.fx-td-site__body--blank i{display:block;height:48px;border-radius:8px;background:#e4e4df}
.fx-td-my__cap{margin-top:var(--fx-sp-3)}

/* ===== 6. 사실 표 (밝게) ===== */
.fx-td-facts__tbl{margin-top:var(--fx-sp-6)}
.fx-td-facts__d{color:var(--fx-fg-2)}
.fx-td-facts__p{display:inline-block;margin-left:6px;font-weight:700}
.fx-td-facts .fx-facts__v{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:17px}

/* ===== 7. 운영 장면 ===== */
.fx-td-ops{background:var(--fx-bg)}
.fx-td-ops__grid{display:grid;gap:var(--fx-sp-12);align-items:center}
.fx-td-ops__sum{padding:0 4px var(--fx-sp-4)}
.fx-td-ops__k{font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-td-ops__v{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.fx-td-ops__list{margin-top:4px}
.fx-td-row{transition:opacity .5s var(--fx-ease-out),transform .5s var(--fx-ease-out)}
.fx-td-row:nth-child(2){transition-delay:.35s}.fx-td-row:nth-child(3){transition-delay:.7s}.fx-td-row:nth-child(4){transition-delay:1.05s}
.fx-js [data-fx-td-ops]:not(.is-play) .fx-td-row{opacity:0;transform:translateY(12px)}
.fx-td-ops__list .fx-list__amt{text-align:right}
.fx-td-row--bar{grid-template-columns:1fr minmax(60px,1.4fr) auto}
.fx-td-bar-track{display:block;height:8px;border-radius:4px;background:var(--fx-card-2);overflow:hidden}
.fx-td-bar-track i{display:block;height:100%;border-radius:inherit;background:var(--fx-brand);transform-origin:left;transform:scaleX(var(--fx-p,1));transition:transform 1.4s var(--fx-ease-out)}
.fx-js [data-fx-td-ops]:not(.is-play) .fx-td-bar-track i{transform:scaleX(0)}

/* ===== 8. 비용과 일정 (밝게) ===== */
.fx-td-cost__grid{display:grid;gap:var(--fx-sp-8)}
.fx-td-steps{display:grid;gap:var(--fx-sp-2);padding-left:1.4em;list-style:decimal}
.fx-td-steps li{padding-left:4px}
.fx-td-benefit{grid-column:1/-1}
.fx-td-benefit .fdt-benefit__tit{margin-bottom:8px;font-weight:700}
.fx-td-benefit .fdt-benefit__track{display:grid;gap:12px}
.fx-td-benefit .fdt-benefit__card{display:grid;gap:4px;padding:16px;border-radius:var(--fx-radius-m);background:var(--fx-tint)}
.fx-td-benefit .fdt-benefit__pager{display:none}

/* ===== 9. 고치려면 + 크몽 후기 ===== */
.fx-td-fix__grid{display:grid;gap:var(--fx-sp-12);align-items:start}
.fx-td-fix__list .fx-list__item{grid-template-columns:1fr auto;padding:14px 4px;min-height:64px}
.fx-td-fix__list .fx-list__item:nth-child(odd){background:none}
.fx-td-fix__t{font-weight:700;font-size:18px}
.fx-td-fix__d{grid-column:1/-1;color:var(--fx-fg-2);font-size:16px;line-height:1.6}
.fx-td-fix__list .fx-pill{grid-column:2;grid-row:1}
.fx-td-kmong{margin:0;padding:var(--fx-sp-8);border-radius:var(--fx-radius-l);box-shadow:var(--fx-shadow-paper)}
.fx-td-kmong__cap{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-brand)}
.fx-td-kmong__q{margin:var(--fx-sp-4) 0;font-size:clamp(17px,1.6vw,19px);line-height:1.75;color:var(--fx-t1)}
.fx-td-kmong__by{display:flex;align-items:center;gap:12px;margin-bottom:var(--fx-sp-3);font-size:var(--fx-size-small);color:var(--fx-t2)}
.fx-td-kmong__by img{border-radius:50%}

/* ===== 10. FAQ ===== */
.fx-td-faq__grid{display:grid;gap:var(--fx-sp-12);align-items:start}
.fx-td-refund{margin-top:var(--fx-sp-8);padding-top:var(--fx-sp-6);border-top:1px solid var(--fx-edge-strong)}
.fx-td-refund__t{margin:var(--fx-sp-4) 0 var(--fx-sp-2);font-size:16px;font-weight:700}
.fx-td-refund__t:first-child{margin-top:0}
.fx-td-refund ul{display:grid;gap:var(--fx-sp-2);font-size:16px;line-height:1.65;color:var(--fx-fg-2)}
.fx-td-refund a{display:inline-block;padding:12px 2px;margin:-12px 0;text-decoration:underline;text-underline-offset:3px;color:var(--fx-fg)}
.fx-td-qa{border-bottom:1px solid var(--fx-edge-strong)}
.fx-td-qa:first-child{border-top:1px solid var(--fx-edge-strong)}
.fx-td-qa__q{display:flex;align-items:center;justify-content:space-between;gap:var(--fx-sp-4);min-height:64px;padding:12px 0;font-size:18px;font-weight:600;line-height:1.5;cursor:pointer;list-style:none}
.fx-td-qa__q::-webkit-details-marker{display:none}
.fx-td-qa__q i{position:relative;flex:none;width:20px;height:20px}
.fx-td-qa__q i::before,.fx-td-qa__q i::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:2px;border-radius:1px;background:currentColor;transition:transform var(--fx-time-mid) var(--fx-ease-std)}
.fx-td-qa__q i::after{transform:rotate(90deg)}
.fx-td-qa[open] .fx-td-qa__q i::after{transform:rotate(0)}
.fx-td-qa__a{padding:0 0 var(--fx-sp-6);font-size:17px;line-height:1.75;color:var(--fx-fg-2);max-width:40em}
.fx-td-qa__a a{text-decoration:underline;text-underline-offset:3px}

/* ===== 후기·문의(있을 때만) ===== */
.fx-td-voices__grid{display:grid;gap:var(--fx-sp-12)}
.fx-td-voice{display:grid;grid-template-columns:1fr auto;gap:4px 12px}
.fx-td-voice__t{grid-column:1/-1;line-height:1.6}
.fx-td-voice__who{font-weight:700}
.fx-td-voice__s{justify-self:end;letter-spacing:2px}

/* ===== 같은 업종 다른 템플릿 ===== */
.fx-td-more__grid{display:grid;gap:var(--fx-sp-6)}
.fx-td-more__card{display:grid;gap:var(--fx-sp-2);padding-bottom:var(--fx-sp-2);transition:transform var(--fx-time-mid) var(--fx-ease-out)}
.fx-td-more__card:hover{transform:translateY(-4px)}
.fx-td-more__img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--fx-radius-m);background:var(--fx-card-2);box-shadow:inset 0 0 0 1px var(--fx-edge-strong)}
.fx-td-more__img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fx-td-more__name{font-size:20px;font-weight:700;letter-spacing:-.02em}
.fx-td-more__fee{font-size:var(--fx-size-small);color:var(--fx-fg-2)}

/* ===== 마지막 CTA ===== */
.fx-td-end{background:var(--fx-s0);min-height:70vh;padding:clamp(80px,10vw,140px) 0}
.fx-td-end__h{font-size:clamp(36px,6vw,64px);line-height:1.12;font-weight:800;letter-spacing:-.03em;color:var(--fx-t1)}
.fx-td-end__d{margin-top:var(--fx-sp-6);max-width:36em}
.fx-td-end__act{margin-top:var(--fx-sp-8)}
.fx-td-end__price{margin-top:var(--fx-sp-6);font-size:var(--fx-size-lead);font-weight:700}
.fx-td-end .fx-note{margin-top:var(--fx-sp-2)}
.fx-td-end__kakao{margin-top:var(--fx-sp-3)}

/* ===== 옛 부품 최소 모양(관리자가 정한 옵션·이벤트) ===== */
.fx-td .fdt-opt{display:grid;gap:8px;margin-bottom:var(--fx-sp-3)}
.fx-td .fdt-opt__label{font-size:var(--fx-size-small);font-weight:600;color:var(--fx-fg-2)}
.fx-td .fdt-opt__choices{display:flex;flex-wrap:wrap;gap:8px}
.fx-td .fdt-chip{position:relative;display:inline-flex}
.fx-td .fdt-chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.fx-td .fdt-chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-weight:600}
.fx-td .fdt-chip input:checked+span{background:var(--fx-brand);color:var(--fx-brand-ink);box-shadow:none}
.fx-td .fdt-chip input:focus-visible+span{outline:2px solid var(--fx-ring);outline-offset:3px}
.fx-td-events .fdt-events{padding:var(--fx-sp-8) 0}
.fx-td-events .fdt-events__inner{max-width:var(--fx-wrap-w);margin:0 auto;padding:0 var(--fx-gut)}
.fx-td-events .fdt-events__tit{margin-bottom:var(--fx-sp-3);font-weight:700}
.fx-td-events .fdt-events__track{display:flex;gap:16px;overflow-x:auto;padding:4px 0}
.fx-td-events .fdt-events__slide{flex:0 0 min(280px,80%)}
.fx-td-events .fdt-events__card{display:grid;gap:6px;min-height:44px}
.fx-td-events .fdt-events__arr{display:none}

/* ===== 768+ ===== */
@media (min-width:600px){
  .fx-td-pc__view{aspect-ratio:16/10}
  .fx-td-pc__view--tour{aspect-ratio:16/10}
}
@media (min-width:768px){
  .fx-td-fit__grid{grid-template-columns:3fr 2fr;gap:var(--fx-sp-16)}
  .fx-td-fit__col--no{padding-left:var(--fx-sp-8);border-left:1px solid var(--fx-edge-strong)}
  .fx-td-my__row{grid-template-columns:1fr auto}
  .fx-td-my__go{width:auto}
  .fx-td-more__grid{grid-template-columns:repeat(3,1fr)}
  .fx-td-fix__list .fx-list__item{grid-template-columns:150px 1fr auto;gap:4px 20px}
  .fx-td-fix__d{grid-column:2;grid-row:1}
  .fx-td-fix__t{grid-column:1;grid-row:1}
  .fx-td-fix__list .fx-pill{grid-column:3}
  .fx-td-bar__in{grid-template-columns:1fr auto;align-items:center;gap:var(--fx-sp-6);padding-top:10px}
  .fx-td-bar__name{display:block;font-size:17px}
  .fx-td-bar__price{font-size:15px;color:var(--fx-t2)}
  .fx-td-bar__act{grid-template-columns:auto auto}
  .fx-td-bar__act .fx-button{padding:0 24px}
  .fx-td-voices__grid{grid-template-columns:1fr 1fr}
}
/* ===== 1024+ ===== */
@media (min-width:1024px){
  .fx-td-stage{padding:112px 0 72px}
  .fx-td-stage__grid{grid-template-columns:minmax(0,384px) minmax(0,1fr);grid-template-areas:"head dev" "buy dev";grid-template-rows:auto 1fr;column-gap:var(--fx-sp-12);row-gap:var(--fx-sp-6);align-items:start}
  .fx-td-stage__dev{align-self:center}
  .fx-td-stage__buy{align-self:start}
  .fx-td-stage__dev{margin-right:calc(-1 * var(--fx-gut));padding-bottom:56px}
  .fx-td-pc__view{aspect-ratio:4/3}
  .fx-td-stage__dev--solo .fx-td-pc__view{aspect-ratio:5/4}
  .fx-td-phone{left:-28px;bottom:0;width:min(27%,210px);border-radius:28px;padding:6px}
  .fx-td-phone__view{border-radius:22px}
  .fx-td-cta .fx-button{flex:0 1 auto}
  .fx-td-my__grid{grid-template-columns:5fr 6fr}
  .fx-td-ops__grid{grid-template-columns:5fr 6fr}
  .fx-td-cost__grid{grid-template-columns:4fr 7fr;gap:var(--fx-sp-16)}
  .fx-td-fix__grid{grid-template-columns:7fr 5fr}
  .fx-td-faq__grid{grid-template-columns:4fr 7fr;gap:var(--fx-sp-16)}
}
@media (min-width:1280px){
  .fx-td-stage__dev{margin-right:calc(-1 * var(--fx-gut) - 40px)}
}
@media (prefers-reduced-motion:reduce){
  .fx-td-scroll.is-play{animation:none}
  .fx-td-tour__pause{display:none}
  .fx-td-tour.is-run .fx-td-tab[aria-selected="true"]::after{animation:none}
  .fx-td-pane:not([hidden]){animation:none}
  .fx-td-row,.fx-td-bar-track i,.fx-td-bar{transition:none}
  .fx-td-more__card:hover{transform:none}
}

/* S2 tiers — 설치비 3단 카드 */
.fx-td-price__jump{margin-top:var(--fx-sp-2)}
.fx-td-tiers__lead{max-width:36em}
.fx-tier-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fx-sp-4);margin-top:var(--fx-sp-8);padding:0;list-style:none;align-items:stretch}
.fx-tier{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--fx-sp-6);border:1px solid var(--fx-edge-strong);border-radius:var(--fx-radius-m);background:transparent}
.fx-tier--rec{border:2px solid var(--fx-fg);background:var(--fx-card);box-shadow:var(--fx-shadow-m);padding:var(--fx-sp-8) var(--fx-sp-6)}
.fx-tier--off{opacity:.62}
.fx-tier__badge{position:absolute;top:-14px;left:var(--fx-sp-6);display:inline-flex;align-items:center;height:28px;padding:0 14px;border-radius:var(--fx-radius-pill);background:var(--fx-brand);color:var(--fx-on-brand);font-size:var(--fx-size-small);font-weight:700}
.fx-tier__name{font-size:var(--fx-size-h3);line-height:1.3;font-weight:700;letter-spacing:-.02em}
.fx-tier__price{margin-top:var(--fx-sp-3);font-size:clamp(32px,4vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.025em;color:var(--fx-fg)}
.fx-tier--rec .fx-tier__price{font-size:clamp(36px,4.4vw,48px)}
@media (min-width:768px) and (max-width:1023px){.fx-tier__price{font-size:28px;white-space:nowrap}.fx-tier--rec .fx-tier__price{font-size:32px}}
.fx-tier__unit{margin-left:2px;font-size:.5em;font-weight:600;color:var(--fx-fg-2)}
.fx-tier__cap{margin-top:4px;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-tier__first{margin-top:var(--fx-sp-4);padding-top:var(--fx-sp-3);border-top:1px solid var(--fx-edge);font-size:var(--fx-size-body);font-weight:600;color:var(--fx-fg)}
.fx-tier__first span{display:block;margin-top:2px;font-size:var(--fx-size-small);font-weight:400;line-height:1.6;color:var(--fx-fg-2)}
.fx-tier__feat{margin:var(--fx-sp-4) 0 var(--fx-sp-6);padding:0;list-style:none;flex:1 1 auto}
.fx-tier__feat li{position:relative;padding:6px 0 6px 24px;font-size:15px;line-height:1.5;color:var(--fx-fg)}
.fx-tier__feat li::before{position:absolute;left:0;top:6px;font-weight:700}
.fx-tier__feat li.is-on::before{content:"\2714";color:var(--fx-fg)}
.fx-tier__feat li.is-off{color:var(--fx-fg-3)}
.fx-tier__feat li.is-off::before{content:"\2013";color:var(--fx-fg-3)}
.fx-tier__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-tier__btn{width:100%;min-height:48px;justify-content:center;margin-top:auto}
.fx-tier__note{margin-top:auto;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-tier__demo{display:inline-block;margin-left:4px;padding:0 6px;border:1px solid var(--fx-edge-strong);border-radius:4px;font-style:normal;font-size:12px;line-height:18px;color:var(--fx-fg-2);white-space:nowrap}
.fx-tier-demonote{margin-top:var(--fx-sp-4);font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-tier-grid--single{max-width:480px}
.fx-tier-grid--single .fx-tier{padding:var(--fx-sp-6)}
.fx-tier-setup{margin-top:var(--fx-sp-8);padding:var(--fx-sp-4) 0 0;border-top:1px solid var(--fx-edge-strong);font-size:var(--fx-size-body);color:var(--fx-fg)}
.fx-tier-setup span{display:block;margin-top:4px;font-size:var(--fx-size-small);color:var(--fx-fg-2)}
.fx-tier .fx-tier__btn:focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px}
@media (min-width:768px){
  .fx-tier-grid:not(.fx-tier-grid--single){grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fx-sp-6);align-items:stretch}
  .fx-tier--rec{padding:var(--fx-sp-12) var(--fx-sp-6)}
}