/* welcome.php 전용 (로그인 전 소개 페이지). 공용 public_site.css 위에 덮어씁니다.
   레이아웃: 밝은 한 장짜리 흐름. 짧은 히어로 바로 아래 제작 카드 12개가 첫 화면에 이어 보이도록. */
.welcome-page{
  --w-bg:#f6f7fb;           /* 페이지 바탕(살짝 남색 기운의 밝은 회색) */
  --w-card:#ffffff;
  --w-text:#141a33;
  --w-sub:#5a6180;
  --w-faint:#8a90ab;
  --w-line:#e3e6f0;
  --w-brand:#4f46e5;        /* 로고 남보라 */
  --w-brand-dark:#3f37cf;
  --w-brand-soft:#eeedff;
  --w-hot:#ff5a3c;          /* LIVE·이벤트 신호 */
  --w-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  font-family:var(--w-sans);
  background:var(--w-bg);
  color:var(--w-text);
}
.welcome-page main.w{display:block;overflow-x:clip}
.w-wrap{width:min(1200px,100%);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.welcome-page h1,.welcome-page h2,.welcome-page h3{text-wrap:balance;font-family:var(--w-sans)}
.w-br-d{display:inline}
.welcome-page .site-header{background:rgba(255,255,255,.92)}
.welcome-page .site-header .button.small{background:var(--w-brand);border-color:var(--w-brand);color:#fff}
.welcome-page .site-header .button.small:hover{background:var(--w-brand-dark);border-color:var(--w-brand-dark);color:#fff}
.welcome-page .site-header nav a:hover{color:var(--w-brand)}
.welcome-page section[id]{scroll-margin-top:90px}
.welcome-page a:focus-visible,.welcome-page button:focus-visible,.welcome-page summary:focus-visible,.welcome-page input:focus-visible{outline:3px solid #a5a0ff;outline-offset:3px}

/* ── 버튼 ── */
.w-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 24px;border-radius:12px;border:1px solid transparent;font:inherit;font-weight:750;font-size:16px;line-height:1.3;transition:transform .18s,background .18s,border-color .18s,color .18s;text-decoration:none;cursor:pointer}
.w-btn span[aria-hidden]{transition:transform .18s}
.w-btn:hover span[aria-hidden]{transform:translateX(3px)}
.w-btn-primary{background:var(--w-brand);color:#fff;box-shadow:0 10px 24px -12px rgba(79,70,229,.7)}
.w-btn-primary:hover{background:var(--w-brand-dark);color:#fff;transform:translateY(-1px)}
.w-btn-line{background:var(--w-card);color:var(--w-text);border-color:var(--w-line)}
.w-btn-line:hover{border-color:var(--w-brand);color:var(--w-brand)}
.w-btn-block{width:100%}
.w-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

/* ── 공통 섹션 ── */
.w-section{padding-block:88px}
.w-eyebrow{font-size:14px;font-weight:750;color:var(--w-brand);margin-bottom:14px}
.w-head{margin-bottom:36px}
.w-head h2,.w-make-head h2,.w-master-copy h2,.w-final h2{font-size:clamp(28px,3.4vw,40px);line-height:1.25;letter-spacing:-.04em;font-weight:820}
.w-head>p{margin-top:12px;font-size:17px;line-height:1.7;color:var(--w-sub)}

/* ── 히어로: 짧게, 가운데 정렬 ── */
.w-hero{padding-block:72px 40px;text-align:center;background:radial-gradient(ellipse 70% 100% at 50% 0%,#e9e7ff 0%,rgba(233,231,255,0) 70%)}
.w-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--w-card);border:1px solid var(--w-line);font-size:14px;font-weight:700;color:var(--w-text)}
.w-live-dot{width:8px;height:8px;border-radius:50%;background:var(--w-hot);animation:w-blink 1.6s ease-in-out infinite}
@keyframes w-blink{50%{opacity:.35}}
.w-hero h1{margin-top:22px;font-size:clamp(36px,5.2vw,64px);line-height:1.16;letter-spacing:-.05em;font-weight:860;color:var(--w-text)}
.w-rotor{display:inline-block;color:var(--w-brand)}
.w-rotor-word{position:relative;display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .3s}
.w-rotor-word::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.12em;border-radius:3px;background:var(--w-brand);opacity:.18}
.w-rotor-word.is-out{transform:translateY(-35%);opacity:0}
.w-rotor-word.is-in{transform:translateY(35%);opacity:0;transition:none}
.w-hero-lead{margin:20px auto 0;max-width:640px;font-size:18px;line-height:1.7;color:var(--w-sub)}

/* ── 제작 카드 12개: 히어로 바로 아래 ── */
.w-make{padding-block:16px 88px}
.w-make-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.w-make-head h2{font-size:clamp(22px,2.4vw,28px)}
.w-make-head h2 em{font-style:normal;color:var(--w-brand)}
.w-make-head p{font-size:15px;color:var(--w-sub)}
.w-tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.w-tile{position:relative;display:flex;align-items:center;gap:16px;min-width:0;padding:18px 18px 18px 16px;border-radius:16px;background:var(--w-card);border:1px solid var(--w-line);transition:transform .2s,border-color .2s,box-shadow .2s;animation:w-in .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + 120ms)}
@keyframes w-in{from{transform:translateY(12px)}to{transform:none}}
.w-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 50%,#fff);box-shadow:0 16px 32px -20px color-mix(in srgb,var(--c) 80%,transparent)}
.w-tile:has(.w-tile-title:focus-visible){outline:3px solid #a5a0ff;outline-offset:2px}
.w-shape{flex:none;position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:color-mix(in srgb,var(--c) 12%,#fff)}
.w-shape::before{content:"";display:block;border-radius:4px;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c))}
.w-shape.is-tall::before{width:20px;height:34px}
.w-shape.is-wide::before{width:36px;height:22px}
.w-shape.is-square::before{width:28px;height:28px}
.w-shape.is-clip::before{width:36px;height:22px}
.w-shape.is-clip::after{content:"";position:absolute;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.w-shape.is-live::before{width:36px;height:24px}
.w-shape.is-live::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);animation:w-blink 1.6s ease-in-out infinite}
.w-tile-text{display:grid;gap:2px;min-width:0}
.w-tile-format{font-size:12.5px;font-weight:700;color:var(--c)}
.w-tile-title{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--w-text);text-decoration:none}
.w-tile-title::after{content:"";position:absolute;inset:0;border-radius:inherit}
.w-tile-title:hover{color:var(--w-text)}
.w-tile-title:focus-visible{outline:none}
.w-tile-line{font-size:13.5px;line-height:1.5;color:var(--w-sub)}
.w-after{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px;padding:16px 20px;border-radius:16px;background:var(--w-brand-soft)}
.w-after-label{font-size:14px;font-weight:800;color:var(--w-brand)}
.w-after ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.w-after li{padding:6px 12px;border-radius:999px;background:var(--w-card);font-size:13.5px;font-weight:650;color:var(--w-text)}

/* ── 자동 흐름 5단계 ── */
.w-flow{background:var(--w-card)}
.w-steps{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;position:relative}
.w-steps li{position:relative;padding:22px 20px;border-radius:16px;background:var(--w-bg);min-width:0}
.w-steps li:not(:last-child)::after{content:"";position:absolute;right:-10px;top:34px;width:8px;height:8px;border-top:2px solid #b9bdd4;border-right:2px solid #b9bdd4;transform:rotate(45deg);z-index:1}
.w-steps span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--w-brand);color:#fff;font-size:14px;font-weight:800}
.w-steps b{display:block;margin-top:14px;font-size:17px;font-weight:800;letter-spacing:-.03em}
.w-steps p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--w-sub)}

/* ── 히어로 강점 한 줄 ── */
.w-strengths{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;list-style:none}
.w-strengths a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--w-line);font-size:14px;font-weight:700;color:var(--w-text);text-decoration:none;transition:border-color .15s,color .15s}
.w-strengths a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-brand)}
.w-strengths a:hover{border-color:var(--w-brand);color:var(--w-brand)}

/* ── 강점 소개(편집기·멀티 게시·AI 매니저) ── */
.w-show{background:var(--w-bg)}
.w-show.is-alt{background:var(--w-card)}
.w-show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.w-show-grid.is-flip>.w-show-copy{order:2}
.w-show-copy h2{font-size:clamp(30px,3.6vw,44px);line-height:1.2;letter-spacing:-.045em;font-weight:840}
.w-show-lead{margin-top:18px;font-size:17px;line-height:1.75;color:var(--w-sub)}
.w-points{list-style:none;display:grid;gap:16px;margin-top:28px}
.w-points li{position:relative;padding-left:30px;font-size:15px;line-height:1.65;color:var(--w-sub)}
.w-points li::before{content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;border-left:2.5px solid var(--w-brand);border-bottom:2.5px solid var(--w-brand);transform:rotate(-45deg)}
.w-points b{display:block;font-size:16.5px;font-weight:780;color:var(--w-text);letter-spacing:-.02em}
.w-show-note{margin-top:22px;padding:12px 16px;border-radius:12px;background:var(--w-brand-soft);font-size:13.5px;line-height:1.6;color:#3a32b8;font-weight:600}
.w-mock{position:relative;border-radius:20px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:0 30px 60px -36px rgba(20,26,51,.35);overflow:hidden;min-width:0}
.w-mock-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--w-line);font-size:12.5px;font-weight:700;color:var(--w-sub)}
.w-mock-bar i{width:9px;height:9px;border-radius:50%;background:#dfe2ee}
.w-mock-bar span{margin-left:8px}
.w-mock-bar em{margin-left:auto;font-style:normal;font-size:11px;padding:1px 7px;border:1px solid var(--w-line);border-radius:6px}

/* 편집기 모형 */
.w-ed-main{display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;padding:18px}
.w-ed-preview{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:10px;background:linear-gradient(165deg,#ffb38a,#ff6f61 45%,#5b4ff0);overflow:hidden}
.w-ed-preview::before{content:"";position:absolute;left:18%;top:22%;width:64%;height:44%;border:1.5px dashed rgba(255,255,255,.9);border-radius:6px;animation:w-kf 3.2s ease-in-out infinite alternate}
@keyframes w-kf{from{transform:translate(-6%,-4%) scale(.92)}to{transform:translate(6%,6%) scale(1.04)}}
.w-ed-sub{position:absolute;left:8px;right:8px;bottom:18%;padding:4px 6px;border-radius:5px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;font-weight:800;text-align:center;line-height:1.3}
.w-ed-sub em{font-style:normal;color:#ffe14d}
.w-ed-tools{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.w-ed-tools span{padding:7px 11px;border-radius:9px;background:var(--w-bg);border:1px solid var(--w-line);font-size:13px;font-weight:700;color:var(--w-text)}
.w-ed-tools span.is-on{background:var(--w-brand);border-color:var(--w-brand);color:#fff}
.w-ed-tools span.is-ai{background:#fff3ee;border-color:#ffd6c8;color:#c2401f}

.w-ed-timeline{position:relative;display:grid;gap:7px;padding:14px 18px 18px;border-top:1px solid var(--w-line);background:#fafbfe}
.w-ed-track{position:relative;height:24px;padding-left:44px}
.w-ed-track b{position:absolute;left:0;top:4px;font-size:11.5px;color:var(--w-faint)}
.w-ed-track span{position:absolute;top:0;bottom:0;left:calc(44px + (100% - 44px) * var(--x));width:calc((100% - 44px) * var(--w) - 3px);border-radius:6px;background:#c9c5fb;border:1px solid #a9a3f6}
.w-ed-track.is-text span{background:#ffe2a8;border-color:#ffc861}
.w-ed-track.is-audio span{background:repeating-linear-gradient(90deg,#b5ead7 0 3px,#d8f5ea 3px 6px);border-color:#7fd6b6}
.w-ed-head{position:absolute;top:8px;bottom:10px;left:62px;width:2px;background:var(--w-hot);border-radius:2px;animation:w-play 7s linear infinite}
.w-ed-head::before{content:"";position:absolute;top:-4px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--w-hot)}
@keyframes w-play{from{left:62px}to{left:calc(100% - 22px)}}

/* 멀티 게시 모형 */
.w-pub-mock{padding:20px}
.w-pub-source{display:flex;align-items:center;gap:14px;padding:14px;border-radius:14px;background:var(--w-brand-soft)}
.w-pub-thumb{flex:none;width:34px;height:56px;border-radius:7px;background:linear-gradient(165deg,#ffb38a,#ff6f61 45%,#5b4ff0)}
.w-pub-source b{display:block;font-size:16px}
.w-pub-source small{font-size:13px;color:var(--w-sub)}
.w-pub-list{list-style:none;display:grid;gap:8px;margin-top:14px}
.w-pub-list li{position:relative;display:grid;grid-template-columns:12px 92px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid var(--w-line);background:var(--w-card);overflow:hidden}
.w-pub-list li::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--w-brand) 10%,transparent),transparent);transform:translateX(-100%);animation:w-sweep 7.2s ease-in-out infinite;animation-delay:calc(var(--n) * 1.2s)}
@keyframes w-sweep{0%{transform:translateX(-100%)}14%,100%{transform:translateX(100%)}}
.w-pub-dot{width:12px;height:12px;border-radius:4px;background:var(--pc)}
.w-pub-list b{font-size:15px}
.w-pub-list small{font-size:13px;color:var(--w-sub);min-width:0}
.w-pub-list em{font-style:normal;font-size:12px;font-weight:750;color:#0d7a5a;background:#e3f7f0;padding:3px 9px;border-radius:999px;white-space:nowrap}

/* AI 매니저 모형 */
.w-chat{display:grid;gap:12px;padding:20px}
.w-chat p{max-width:86%;padding:12px 15px;border-radius:16px;font-size:14.5px;line-height:1.65}
.w-chat .is-me{justify-self:end;background:var(--w-brand);color:#fff;border-bottom-right-radius:5px}
.w-chat .is-ai{justify-self:start;background:var(--w-bg);color:var(--w-text);border-bottom-left-radius:5px}
.w-chat .is-ai b{font-weight:750}
.w-chat .is-typing{display:flex;gap:5px;padding:14px 16px}
.w-chat .is-typing span{width:7px;height:7px;border-radius:50%;background:#9aa0bc;animation:w-dot 1.2s ease-in-out infinite}
.w-chat .is-typing span:nth-child(2){animation-delay:.15s}
.w-chat .is-typing span:nth-child(3){animation-delay:.3s}
@keyframes w-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

@media (max-width:960px){
  .w-show-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .w-show-grid.is-flip>.w-show-copy{order:0}
}
@media (max-width:640px){
  .w-strengths{gap:6px}
  .w-strengths a{font-size:13px;padding:6px 11px}
  .w-show-lead{font-size:16px}
  .w-ed-main{grid-template-columns:92px minmax(0,1fr);gap:12px;padding:14px}
  .w-ed-tools span{font-size:12px;padding:6px 9px}
  .w-pub-mock{padding:14px}
  .w-pub-list li{grid-template-columns:10px minmax(0,1fr) auto;gap:10px}
  .w-pub-list small{display:none}
  .w-chat{padding:14px}
  .w-chat p{max-width:92%;font-size:14px}
}

/* ── 신뢰 ── */
.w-proof{display:flex;flex-wrap:wrap;gap:16px 48px;list-style:none;margin-bottom:32px}
.w-proof b{display:block;font-size:40px;font-weight:850;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.w-proof span{color:var(--w-sub);font-size:14px}
.w-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.w-trust-grid article{padding:22px 20px;border-radius:16px;background:var(--w-card);border:1px solid var(--w-line);min-width:0}
.w-trust-grid h3{font-size:17px;font-weight:800;letter-spacing:-.03em}
.w-trust-grid p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--w-sub)}
.w-trust-grid a{color:var(--w-brand);font-weight:650}
.w-trust-grid article>a{display:inline-block;margin-top:8px;font-size:14px}
.w-trust-links{display:flex;flex-wrap:wrap;gap:4px 14px}

/* ── Master ── */
.w-master{background:var(--w-card)}
.w-master-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:center}
.w-checks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;margin-top:32px}
.w-checks li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.6;color:var(--w-sub)}
.w-checks li::before{content:"";position:absolute;left:2px;top:6px;width:14px;height:8px;border-left:2.5px solid var(--w-brand);border-bottom:2.5px solid var(--w-brand);transform:rotate(-45deg)}
.w-checks b{display:block;font-size:16.5px;color:var(--w-text);font-weight:780;margin-bottom:2px}
.w-price{padding:34px 32px 28px;border-radius:22px;background:linear-gradient(180deg,#f3f2ff,#fff 60%);border:2px solid var(--w-brand);box-shadow:0 30px 60px -36px rgba(79,70,229,.55)}
.w-price-tag{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--w-hot);color:#fff;font-size:12.5px;font-weight:750}
.w-price-name{margin-top:16px;font-size:15px;font-weight:800;letter-spacing:.02em;color:var(--w-brand)}
.w-price-list{margin-top:12px;font-size:15px;color:var(--w-faint)}
.w-price-sale{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums}
.w-price-sale b{font-size:clamp(44px,4.6vw,58px);font-weight:860;letter-spacing:-.045em;margin-right:4px}
.w-price-sub{margin-block:4px 22px;font-size:13.5px;color:var(--w-sub)}
.w-price-notes{list-style:none;display:grid;gap:8px;margin-top:18px;font-size:13px;line-height:1.6;color:var(--w-sub)}
.w-price-notes li{position:relative;padding-left:12px}
.w-price-notes li::before{content:"";position:absolute;left:0;top:.7em;width:4px;height:4px;border-radius:50%;background:var(--w-faint)}

/* ── FAQ ── */
.w-faq-wrap{max-width:880px}
.w-faq-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.w-faq-tabs{display:flex;flex-wrap:wrap;gap:6px}
.w-faq-tab{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:7px 14px;border-radius:999px;border:1px solid var(--w-line);background:var(--w-card);color:var(--w-sub);font-size:14px;font-weight:650}
.w-faq-tab span{font-size:12px;color:var(--w-faint)}
.w-faq-tab:hover{border-color:var(--w-brand);color:var(--w-brand)}
.w-faq-tab.active{background:var(--w-text);border-color:var(--w-text);color:#fff}
.w-faq-tab.active span{color:#c9cbe0}
.w-faq-search{flex:1 1 220px;max-width:280px;min-height:42px;padding:9px 14px;border:1px solid var(--w-line);border-radius:10px;background:var(--w-card);font:inherit;font-size:14.5px;color:var(--w-text)}
.w-faq-search:focus{border-color:var(--w-brand);outline:none;box-shadow:0 0 0 4px var(--w-brand-soft)}
.w-faq-list{border-radius:16px;background:var(--w-card);border:1px solid var(--w-line);padding-inline:24px}
.w-qa+.w-qa{border-top:1px solid var(--w-line)}
.w-qa summary{position:relative;display:block;list-style:none;padding:19px 40px 19px 0;font-size:16.5px;font-weight:720;letter-spacing:-.02em;line-height:1.5;cursor:pointer}
.w-qa summary::-webkit-details-marker{display:none}
.w-qa summary::after{content:"";position:absolute;right:6px;top:25px;width:9px;height:9px;border-right:2px solid var(--w-faint);border-bottom:2px solid var(--w-faint);transform:rotate(45deg);transition:transform .2s}
.w-qa[open] summary::after{transform:rotate(-135deg);top:30px}
.w-qa summary:hover{color:var(--w-brand)}
.w-qa-a{padding:0 0 22px;font-size:15px;line-height:1.8;color:var(--w-sub);max-width:70ch}
.w-qa-a p+p,.w-qa-a ul+p,.w-qa-a p+ul{margin-top:8px}
.w-qa-a strong{color:var(--w-text)}
.w-qa-a ul{padding-left:20px}
.w-qa-a li+li{margin-top:4px}
.w-qa-a a{color:var(--w-brand);font-weight:650}
.w-faq-empty{padding:24px 0;color:var(--w-sub)}
.w-faq-empty a,.w-faq-more a{color:var(--w-brand);font-weight:650}
.w-faq-more{margin-top:16px;font-size:14.5px}

/* ── 마무리 ── */
.w-final{padding-block:88px;text-align:center;background:radial-gradient(ellipse 60% 120% at 50% 100%,#e4e1ff 0%,rgba(228,225,255,0) 70%)}

/* ── 모바일 하단 고정 버튼 ── */
.w-sticky-cta{position:fixed;z-index:30;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--w-line);font-size:14px;font-weight:700;color:var(--w-text)}
.w-sticky-cta .w-btn{min-height:44px;padding:9px 18px;font-size:15px}

/* ── 반응형 ── */
@media (max-width:1100px){
  .w-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .w-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .w-steps li:nth-child(3)::after{display:none}
  .w-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .w-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w-master-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .w-br-d{display:none}
}
@media (max-width:640px){
  .w-wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .w-section{padding-block:64px}
  .w-hero{padding-block:44px 28px}
  .w-hero h1{font-size:clamp(32px,9vw,40px)}
  .w-hero-lead{font-size:16px}
  .w-actions{flex-direction:column;align-items:stretch}
  .w-make{padding-bottom:64px}
  .w-tiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .w-tile{padding:14px 14px 14px 12px;gap:14px}
  .w-shape{width:46px;height:46px}
  .w-tile-title{font-size:16px}
  .w-after{padding:14px 16px}
  .w-steps{grid-template-columns:minmax(0,1fr);gap:8px}
  .w-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:16px}
  .w-steps li::after{display:none}
  .w-steps b{margin-top:2px}
  .w-steps p{grid-column:2}
  .w-trust-grid,.w-checks{grid-template-columns:minmax(0,1fr)}
  .w-price{padding:28px 20px 22px}
  .w-faq-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .w-faq-tabs::-webkit-scrollbar{display:none}
  .w-faq-tab{flex:none}
  .w-faq-search{max-width:none}
  .w-faq-list{padding-inline:16px}
  .w-qa summary{font-size:15.5px}
  .w-final{padding-block:64px}
  .welcome-page .site-footer{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:641px){.w-sticky-cta{display:none!important}}

/* ── 기능 상세 소개 페이지(feature-page) ── */
.wf-hero{padding-block:48px 72px;background:radial-gradient(ellipse 60% 90% at 85% 0%,color-mix(in srgb,var(--c,#4f46e5) 14%,transparent) 0%,transparent 70%)}
.wf-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.wf-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--w-faint);margin-bottom:28px}
.wf-crumb a{color:var(--w-sub)}
.wf-crumb a:hover{color:var(--w-brand)}
.wf-label{display:inline-block;padding:5px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 80%,#000);font-size:14px;font-weight:750}
.wf-hero h1{margin-top:18px;font-size:clamp(32px,4.4vw,54px);line-height:1.2;letter-spacing:-.05em;font-weight:860}
.wf-lead{margin-top:20px;max-width:620px;font-size:18px;line-height:1.75;color:var(--w-sub)}
.wf-actions{justify-content:flex-start}
.wf-auto{padding:26px 26px 22px;border-radius:22px;background:var(--w-card);border:1px solid var(--w-line);box-shadow:0 30px 60px -38px rgba(20,26,51,.4)}
.wf-auto-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800}
.wf-auto ol{list-style:none;display:grid;gap:8px;margin-top:16px}
.wf-auto li{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:var(--w-bg);font-size:15px;font-weight:650;animation:w-in .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--n,0) * 70ms + 150ms)}
.wf-check{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c,#4f46e5)}
.wf-check::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.wf-auto-foot{margin-top:14px;font-size:13.5px;color:var(--w-sub)}
.wf-features{background:var(--w-card)}
.wf-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wf-grid li{padding:26px 24px;border-radius:18px;background:var(--w-bg);border-top:3px solid var(--c,#4f46e5);min-width:0}
.wf-grid h3{font-size:19px;font-weight:800;letter-spacing:-.03em}
.wf-grid p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--w-sub)}
.wf-diff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wf-diff-grid article{padding:26px 24px;border-radius:18px;background:var(--w-card);border:1px solid var(--w-line);min-width:0}
.wf-diff-grid h3{font-size:20px;font-weight:820;letter-spacing:-.03em;color:color-mix(in srgb,var(--c) 75%,#111)}
.wf-diff-grid p{margin-top:10px;font-size:15px;line-height:1.7;color:var(--w-sub)}
.wf-results{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:20px;padding:18px 22px;border-radius:16px;background:var(--w-brand-soft)}
.wf-results h3{font-size:15px;font-weight:800;color:var(--w-brand)}
.wf-results ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.wf-results li{padding:6px 12px;border-radius:999px;background:var(--w-card);font-size:14px;font-weight:650}
.wf-allinone{background:var(--w-card)}
.wf-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wf-link-grid a{display:grid;gap:6px;padding:24px;border-radius:18px;border:1px solid var(--w-line);background:var(--w-bg);text-decoration:none;color:var(--w-text);transition:border-color .2s,transform .2s}
.wf-link-grid a:hover{border-color:var(--w-brand);transform:translateY(-2px);color:var(--w-text)}
.wf-link-grid b{font-size:18px;font-weight:800}
.wf-link-grid b::after{content:" →";color:var(--w-brand)}
.wf-link-grid span{font-size:14.5px;line-height:1.6;color:var(--w-sub)}
.wf-others-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wf-others-list a{display:grid;gap:2px;padding:14px 16px;border-radius:14px;background:var(--w-card);border:1px solid var(--w-line);border-left:4px solid var(--c);text-decoration:none;color:var(--w-text);transition:transform .2s}
.wf-others-list a:hover{transform:translateY(-2px);color:var(--w-text)}
.wf-others-list b{font-size:15.5px;font-weight:800}
.wf-others-list span{font-size:13px;color:var(--w-sub)}
.wf-others .w-make-head a{color:var(--w-brand);font-weight:700}
@media (max-width:1000px){
  .wf-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .wf-grid,.wf-diff-grid,.wf-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wf-others-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .wf-hero{padding-block:28px 56px}
  .wf-crumb{margin-bottom:18px}
  .wf-hero h1{font-size:clamp(28px,8.4vw,36px)}
  .wf-lead{font-size:16px}
  .wf-auto{padding:20px 16px 16px}
  .wf-grid,.wf-diff-grid,.wf-link-grid{grid-template-columns:minmax(0,1fr)}
  .wf-others-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}