/* 위즈웹 가이드 전용: 텍스트 로고, 홈 띠, 설명용 움직이는 그림(fx-*). 그림은 모두 CSS/HTML이라 가볍고 글자로 읽힘 */
.logo-t{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wz-self{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-top:22px;padding:18px 22px;border-radius:14px;border:2px dashed var(--accent);background:var(--pale);color:var(--ink);text-decoration:none}
.wz-self b{font-size:17px}.wz-self span{color:var(--sub);font-size:15px}
.wz-self:hover{background:#fff}
html.wd-embed .hlink,html.wd-embed .hcta{display:none}

/* 공통 그림 틀 */
.fx{margin:20px 0 8px;padding:0}
.fx-box{position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,#1a2536,#141c2a);color:#fff;padding:24px;min-height:200px}
.fx-box.light{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.fx figcaption{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.6}
.fx-tag{display:inline-block;justify-self:start;width:max-content;max-width:100%;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:#cfe3fb;margin-bottom:12px}
.fx-box.light .fx-tag{background:#fff;color:var(--accent);border:1px solid var(--line)}

/* 1. 요청 한 줄 → 반영 (말풍선) */
.fx-req .fx-box{display:grid;gap:10px;align-content:start}
.fx-req .b{max-width:82%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.5;opacity:0;animation:fxPop 9s infinite both}
.fx-req .u{justify-self:end;background:var(--accent);border-bottom-right-radius:4px}
.fx-req .w{background:rgba(255,255,255,.12);border-bottom-left-radius:4px;animation-delay:1.4s}
.fx-req .ok{background:#12A16B;border-bottom-left-radius:4px;font-weight:700;animation-delay:3s}
.fx-req .b small{display:block;font-size:12px;opacity:.8;font-weight:600;margin-bottom:2px}
@keyframes fxPop{0%{opacity:0;transform:translateY(10px)}6%{opacity:1;transform:none}85%{opacity:1}95%,100%{opacity:0}}

/* 2. 4단계 진행 (차례로 켜짐) */
.fx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;counter-reset:fs}
.fx-steps li{counter-increment:fs;position:relative;padding:18px 14px 16px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);font-size:14px;line-height:1.5;color:rgba(255,255,255,.75);animation:fxStep 8s infinite both}
.fx-steps li::before{content:counter(fs,decimal-leading-zero);display:block;font-size:22px;font-weight:800;color:#8EC2FF;margin-bottom:6px}
.fx-steps li b{display:block;font-size:16px;color:#fff;margin-bottom:2px}
.fx-steps li:nth-child(2){animation-delay:2s}.fx-steps li:nth-child(3){animation-delay:4s}.fx-steps li:nth-child(4){animation-delay:6s}
.fx-steps li::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:3px;border-radius:2px;background:#8EC2FF;transform:scaleX(0);transform-origin:left;animation:fxBar 8s infinite both;animation-delay:inherit}
@keyframes fxStep{0%,100%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}3%,22%{background:rgba(31,122,224,.35);border-color:#8EC2FF}26%{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}}
@keyframes fxBar{0%{transform:scaleX(0)}24%{transform:scaleX(1)}25%,100%{transform:scaleX(0)}}
@media(max-width:640px){.fx-steps{grid-template-columns:1fr 1fr}}

/* 3. 비용 계산기 */
.fx-calc .fx-box{display:grid;gap:16px}
.fx-calc .row{display:grid;gap:8px}
.fx-calc .row>span{font-size:14px;font-weight:700;color:#cfe3fb}
.fx-calc .seg{display:flex;flex-wrap:wrap;gap:6px}
.fx-calc .seg button{font:inherit;font-size:14px;font-weight:700;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer}
.fx-calc .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);border-color:#fff}
.fx-calc input[type=range]{width:100%;accent-color:#8EC2FF}
.fx-calc .out{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18)}
.fx-calc .out b{font-size:30px;font-weight:800}
.fx-calc .out small{font-size:13px;color:rgba(255,255,255,.75)}
.fx-calc .bars{display:flex;align-items:flex-end;gap:8px;height:120px}
.fx-calc .bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%;font-size:12px;color:rgba(255,255,255,.8)}
.fx-calc .bars i{display:block;width:100%;max-width:56px;border-radius:8px 8px 3px 3px;background:#8EC2FF;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.fx-calc .bars div:first-child i{background:var(--accent)}
.fx-calc .bars em{font-style:normal;font-weight:700;color:#fff}

/* 4. 상품 고르기 */
.fx-pick .pq{display:grid;gap:10px}
.fx-pick .pq[hidden],.fx-pick .pr[hidden]{display:none}
.fx-pick .pq>b{font-size:18px}
.fx-pick .pq div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-pick .pq button{font:inherit;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;line-height:1.45}
.fx-pick .pq button:hover{border-color:#8EC2FF;background:rgba(31,122,224,.25)}
.fx-pick .pq button small{display:block;font-size:13px;color:rgba(255,255,255,.7)}
.fx-pick .pr{animation:fxIn .4s both}
.fx-pick .pr strong{display:block;font-size:24px;margin:2px 0 6px}
.fx-pick .pr p{color:rgba(255,255,255,.85);font-size:15px}
.fx-pick .pr a{color:#8EC2FF;font-weight:700}
.fx-pick .again{margin-top:12px;font:inherit;font-size:14px;background:none;border:0;color:rgba(255,255,255,.75);text-decoration:underline;cursor:pointer;padding:0}
@keyframes fxIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:560px){.fx-pick .pq div{grid-template-columns:1fr}}

/* 5. 코드 위젯이 옮겨지는 모습 */
.fx-code .fx-box{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start}
.fx-code h4{margin:0 0 8px;font-size:13px;color:#cfe3fb}
.fx-code .src,.fx-code .pg{display:grid;gap:6px}
.fx-code .c{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.1)}
.fx-code .c.st{color:#ffd28a}.fx-code .c.sc{color:#9ee6c4}.fx-code .c.dv{color:#cfe3fb}
.fx-code .src .st,.fx-code .src .sc{animation:fxLeave 8s infinite both}
.fx-code .src .sc{animation-delay:1.5s}
.fx-code .pg>div{border-radius:10px;border:1px dashed rgba(255,255,255,.25);padding:8px 10px;font-size:13px;color:rgba(255,255,255,.7);min-height:44px}
.fx-code .pg .c{margin-top:6px;opacity:0;animation:fxArrive 8s infinite both}
.fx-code .pg .sc{animation-delay:1.5s}
@keyframes fxLeave{0%,10%{opacity:1;transform:none}25%,90%{opacity:.15;transform:translateX(10px)}100%{opacity:1;transform:none}}
@keyframes fxArrive{0%,18%{opacity:0;transform:translateX(-24px)}30%,90%{opacity:1;transform:none}100%{opacity:0}}
@media(max-width:640px){.fx-code .fx-box{grid-template-columns:1fr}}

/* 6. 홈페이지 검진 스캔 */
.fx-scan .scr{position:relative;border-radius:12px;background:#fff;color:var(--ink);padding:16px;overflow:hidden}
.fx-scan .bar{display:flex;gap:6px;margin-bottom:12px}.fx-scan .bar i{width:10px;height:10px;border-radius:50%;background:#dfe5ea}
.fx-scan .ln{height:10px;border-radius:5px;background:#eef2f5;margin:8px 0}.fx-scan .ln.s{width:60%}.fx-scan .ln.m{width:80%}
.fx-scan .beam{position:absolute;left:0;right:0;height:46px;top:-46px;background:linear-gradient(180deg,rgba(18,161,107,0),rgba(18,161,107,.28),rgba(18,161,107,0));animation:fxBeam 6s infinite linear}
.fx-scan ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.fx-scan li{padding:10px;border-radius:10px;background:rgba(255,255,255,.08);font-size:13px;text-align:center;opacity:0;animation:fxPop 6s infinite both}
.fx-scan li:nth-child(2){animation-delay:.6s}.fx-scan li:nth-child(3){animation-delay:1.2s}.fx-scan li:nth-child(4){animation-delay:1.8s}
.fx-scan li b{display:block;font-size:18px;color:#7ee0b4}
@keyframes fxBeam{0%{top:-46px}60%,100%{top:100%}}
@media(max-width:560px){.fx-scan ul{grid-template-columns:1fr 1fr}}

/* 7. 네이버 검색 결과 예시 */
.fx-serp .sb{display:flex;align-items:center;gap:10px;padding:0 14px;height:48px;border-radius:12px;border:2px solid #03C75A;background:#fff;color:var(--ink);font-size:16px;font-weight:700}
.fx-serp .sb i{display:inline-block;width:22px;height:22px;border-radius:6px;background:#03C75A;flex:0 0 auto}
.fx-serp .ty{overflow:hidden;white-space:nowrap;border-right:2px solid var(--ink);width:0;animation:fxType 8s steps(6) infinite}
.fx-serp .res{margin-top:12px;padding:14px 16px;border-radius:12px;background:#fff;color:var(--ink);opacity:0;animation:fxRes 8s infinite both}
.fx-serp .res small{display:block;color:#5f6a75;font-size:12px}
.fx-serp .res b{display:block;color:#1a0dab;font-size:16px;margin:2px 0}
.fx-serp .res span{font-size:14px;color:var(--sub)}
@keyframes fxType{0%{width:0}25%,90%{width:6.2em}100%{width:0}}
@keyframes fxRes{0%,30%{opacity:0;transform:translateY(8px)}38%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 8. 블로그 글 → 위즈독스 */
.fx-morph .fx-box{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.fx-morph .card{border-radius:12px;background:#fff;color:var(--ink);padding:14px;min-height:168px}
.fx-morph .card h4{margin:0 0 10px;font-size:13px;color:var(--muted)}
.fx-morph .blog .ln{height:8px;border-radius:4px;background:#e7ebef;margin:7px 0}
.fx-morph .arrow{font-size:28px;color:#8EC2FF;animation:fxNudge 1.6s infinite}
.fx-morph .doc>div{font-size:13px;padding:6px 8px;border-radius:8px;margin:5px 0;background:var(--pale);opacity:0;animation:fxPop 9s infinite both}
.fx-morph .doc>div b{color:var(--accent)}
.fx-morph .doc>div:nth-child(3){animation-delay:.7s}.fx-morph .doc>div:nth-child(4){animation-delay:1.4s}.fx-morph .doc>div:nth-child(5){animation-delay:2.1s}
@keyframes fxNudge{0%,100%{transform:none}50%{transform:translateX(6px)}}
@media(max-width:640px){.fx-morph .fx-box{grid-template-columns:1fr}.fx-morph .arrow{transform:rotate(90deg);justify-self:center;animation:none}}

/* 9. AI가 읽는 글 구조 */
.fx-anat ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fx-anat li{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.06);font-size:14px;animation:fxScan6 9s infinite both}
.fx-anat li b{color:#fff;font-size:14px}.fx-anat li span{color:rgba(255,255,255,.75)}
.fx-anat li:nth-child(2){animation-delay:1.5s}.fx-anat li:nth-child(3){animation-delay:3s}.fx-anat li:nth-child(4){animation-delay:4.5s}.fx-anat li:nth-child(5){animation-delay:6s}.fx-anat li:nth-child(6){animation-delay:7.5s}
@keyframes fxScan6{0%,100%{background:rgba(255,255,255,.06);box-shadow:none}2%,15%{background:rgba(31,122,224,.38);box-shadow:inset 3px 0 0 #8EC2FF}18%{background:rgba(255,255,255,.06);box-shadow:none}}
@media(max-width:560px){.fx-anat li{grid-template-columns:1fr;gap:2px}}

/* 10. 위젯 붙이기 */
.fx-widget .fx-box{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;align-items:center}
.fx-widget pre{margin:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.6;padding:12px;border-radius:10px;background:rgba(0,0,0,.3);color:#9ee6c4;white-space:pre-wrap}
.fx-widget .site{position:relative;border-radius:12px;background:#fff;color:var(--ink);padding:16px;min-height:170px}
.fx-widget .site .ln{height:9px;border-radius:5px;background:#eef2f5;margin:8px 0}
.fx-widget .badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#e8f8f0;color:#0d7a51;font-size:13px;font-weight:700;opacity:0;animation:fxPop 7s infinite both;animation-delay:1.2s}
.fx-widget .badge::before{content:"";width:8px;height:8px;border-radius:50%;background:#12A16B}
.fx-widget .ba{margin-top:10px;height:56px;border-radius:8px;background:linear-gradient(90deg,#c9d3dc 50%,#8EC2FF 50%);position:relative;opacity:0;animation:fxPop 7s infinite both;animation-delay:2s}
.fx-widget .ba::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;animation:fxSlide 3.5s infinite ease-in-out}
.fx-widget .fab{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;background:#FEE500;opacity:0;animation:fxPop 7s infinite both;animation-delay:2.8s}
@keyframes fxSlide{0%,100%{left:30%}50%{left:70%}}
@media(max-width:640px){.fx-widget .fx-box{grid-template-columns:1fr}}

/* 움직임 줄이기: 마지막 모습으로 멈춤 */
@media(prefers-reduced-motion:reduce){.fx *,.fx *::before,.fx *::after{animation:none!important;opacity:1!important}.fx-serp .ty{width:6.2em}.fx-scan .beam{display:none}}