@charset "utf-8";
/* ==========================================================================
   웹에이전시 테마 - 커스텀 스타일
   default.css 이후에 로드됩니다. (head.sub.php add_stylesheet order 10)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root{
  /* color - brand */
  --navy-900:#0B1B34;
  --navy-800:#102341;
  --navy-700:#1A3153;
  --navy-600:#27436D;
  --blue-600:#1A63E0;
  --blue-500:#2E7BFF;
  --blue-400:#5C99FF;
  --blue-050:#EAF2FF;
  --lime-500:#C8FF3D;
  --lime-600:#A8E018;

  /* color - neutral */
  --ink:#0F172A;
  --body:#475569;
  --muted:#7C8AA0;
  --line:#E4E9F2;
  --line-2:#F0F3F8;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FB;
  --bg-navy-soft:#0E2140;

  /* semantic */
  --warn:#E5484D;
  --ok:#12A594;

  /* type */
  --ff:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;

  /* radius */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-full:999px;

  /* shadow */
  --sh-1:0 1px 2px rgba(15,23,42,.05);
  --sh-2:0 4px 16px rgba(15,23,42,.07);
  --sh-3:0 14px 40px rgba(15,23,42,.10);
  --sh-blue:0 10px 28px rgba(46,123,255,.28);

  /* layout */
  --wrap:1200px;
  --wrap-narrow:960px;
  --sec-y:120px;
  --gut:24px;

  /* motion */
  --ease:cubic-bezier(.22,.7,.3,1);
}

@media (max-width:1024px){ :root{ --sec-y:88px; } }
@media (max-width:640px){  :root{ --sec-y:64px; --gut:18px; } }

/* --------------------------------------------------------------------------
   2. 베이스 리셋 (default.css 위에 덮어쓰기)
   -------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--ff);
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
body,
input,button,textarea,select,table,th,td,
h1,h2,h3,h4,h5,h6{ font-family:var(--ff); }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; vertical-align:middle; }
::selection{ background:var(--blue-500); color:#fff; }

/* 그누보드 기본 레이아웃 무력화
   default.css 가 ID 선택자(#hd, #wrapper, #ft)를 쓰므로 같은 특정도로 덮어써야 한다 */
#hd, #wrapper, #ft{ min-width:0; }   /* default.css: min-width:1200px → 모바일 깨짐 방지 */
#hd.wa-hd{ background:rgba(255,255,255,.88); }
#hd.wa-hd.is-stuck{ background:rgba(255,255,255,.94); }
#wrapper{ width:auto; margin:0; padding:0; }
#container_wr{ width:auto; margin:0; padding:0; background:none; }
#container{
  float:none;                       /* default.css: float:left + width:930px → 폭 붕괴 방지 */
  width:auto; max-width:var(--wrap);
  margin:0 auto; padding:56px var(--gut) 120px;
  min-height:auto; background:none;
}
#container:after{ content:''; display:block; clear:both; }
#aside{ display:none; }
#hd_login_msg{ display:none; }

#container_title{
  font-size:34px; font-weight:800; letter-spacing:-.02em;
  color:var(--ink); line-height:1.3;
  margin:0 0 28px; padding:0; border:0; height:auto;
}
#container_title span{ display:inline; }

/* --------------------------------------------------------------------------
   3. 공용 유틸 / 컴포넌트
   -------------------------------------------------------------------------- */
.wa-wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.wa-wrap--narrow{ max-width:var(--wrap-narrow); }

.wa-sec{ padding:var(--sec-y) 0; position:relative; }
.wa-sec--soft{ background:var(--bg-soft); }
.wa-sec--navy{ background:var(--navy-900); color:#C3D0E4; }
.wa-sec--tight{ padding:calc(var(--sec-y) * .62) 0; }

/* 섹션 헤더 */
.wa-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.06em;
  color:var(--blue-600); text-transform:uppercase;
  margin:0 0 14px;
}
.wa-eyebrow:before{
  content:''; width:18px; height:2px; background:var(--blue-500); border-radius:2px;
}
.wa-sec--navy .wa-eyebrow{ color:var(--lime-500); }
.wa-sec--navy .wa-eyebrow:before{ background:var(--lime-500); }

.wa-h2{
  font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.03em;
  line-height:1.28; color:var(--ink); margin:0 0 16px;
}
.wa-sec--navy .wa-h2{ color:#fff; }
.wa-lead{ font-size:17px; line-height:1.75; color:var(--muted); margin:0; }
.wa-sec--navy .wa-lead{ color:#8FA5C4; }

.wa-sechead{ margin-bottom:52px; max-width:760px; }
.wa-sechead--center{ margin-left:auto; margin-right:auto; text-align:center; }
.wa-sechead--center .wa-eyebrow{ justify-content:center; }

/* 버튼 */
.wa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:54px; padding:0 28px; border:0; cursor:pointer;
  font-size:16px; font-weight:700; letter-spacing:-.01em;
  border-radius:var(--r-full); transition:.22s var(--ease);
  white-space:nowrap;
}
.wa-btn--pri{ background:var(--blue-500); color:#fff; box-shadow:var(--sh-blue); }
.wa-btn--pri:hover{ background:var(--blue-600); transform:translateY(-2px); }
.wa-btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.wa-btn--ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.wa-btn--light{ background:rgba(255,255,255,.10); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24); }
.wa-btn--light:hover{ background:rgba(255,255,255,.18); }
.wa-btn--lime{ background:var(--lime-500); color:var(--navy-900); }
.wa-btn--lime:hover{ background:var(--lime-600); transform:translateY(-2px); }
.wa-btn--sm{ height:42px; padding:0 20px; font-size:14px; }
.wa-btn--lg{ height:60px; padding:0 34px; font-size:17px; }
.wa-btn--block{ width:100%; }

/* 태그 / 뱃지 */
.wa-tag{
  display:inline-block; padding:4px 11px; border-radius:var(--r-full);
  font-size:12px; font-weight:700; line-height:1.6;
  background:var(--bg-soft); color:var(--body);
}
.wa-tag--blue{ background:var(--blue-050); color:var(--blue-600); }
.wa-tag--lime{ background:rgba(200,255,61,.18); color:var(--lime-600); }
.wa-tag--navy{ background:var(--navy-900); color:#fff; }

/* 카드 */
.wa-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px; transition:.24s var(--ease);
}
.wa-card:hover{ border-color:transparent; box-shadow:var(--sh-3); transform:translateY(-3px); }
.wa-card__ico{
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-050); color:var(--blue-600); font-size:22px;
  margin-bottom:18px;
}
.wa-card__t{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin:0 0 8px; }
.wa-card__d{ font-size:15px; line-height:1.7; color:var(--muted); margin:0; }

/* 그리드 */
.wa-grid{ display:grid; gap:20px; }
.wa-grid--2{ grid-template-columns:repeat(2,1fr); }
.wa-grid--3{ grid-template-columns:repeat(3,1fr); }
.wa-grid--4{ grid-template-columns:repeat(4,1fr); }
.wa-grid--5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1024px){
  .wa-grid--4,.wa-grid--5{ grid-template-columns:repeat(2,1fr); }
  .wa-grid--3{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:720px){
  .wa-grid--2,.wa-grid--3,.wa-grid--4,.wa-grid--5{ grid-template-columns:1fr; }
}

/* 가로 스크롤 (모바일) */
.wa-hscroll{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:8px; }
.wa-hscroll::-webkit-scrollbar{ height:6px; }
.wa-hscroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.wa-hscroll > *{ scroll-snap-align:start; }

/* 스크롤 등장 (fade-up) */
.wa-rv{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.wa-rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .wa-rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   4. 헤더 / GNB
   -------------------------------------------------------------------------- */
.wa-hd{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:.25s var(--ease);
}
.wa-hd.is-stuck{ border-bottom-color:var(--line); box-shadow:var(--sh-1); }
.wa-hd__in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:76px; display:flex; align-items:center; gap:32px;
}
.wa-logo{ display:flex; align-items:center; gap:9px; flex:0 0 auto; }
.wa-logo__image{ display:block; width:auto; height:38px; object-fit:contain; }
.wa-logo__image--drawer{ height:34px; }
.wa-logo__image--footer{ height:43px; padding:4px 8px; border-radius:8px; background:#fff; }
.wa-logo__mark{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--blue-500),var(--navy-800));
  position:relative;
}
.wa-logo__mark:after{
  content:''; position:absolute; left:9px; top:9px; width:12px; height:12px;
  border-radius:4px; background:var(--lime-500);
}
.wa-logo__txt{ font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--navy-900); }

.wa-gnb{ flex:1 1 auto; }
.wa-gnb__ul{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
.wa-gnb__li{ position:relative; }
.wa-gnb__a{
  display:block; padding:0 16px; line-height:76px;
  font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
  transition:color .18s;
}
.wa-gnb__li:hover > .wa-gnb__a,
.wa-gnb__li.is-active > .wa-gnb__a{ color:var(--blue-600); }
.wa-gnb__a:after{
  content:''; display:block; height:2px; border-radius:2px; background:var(--blue-500);
  transform:scaleX(0); transform-origin:center; transition:transform .22s var(--ease);
  margin-top:-24px;
}
.wa-gnb__li:hover > .wa-gnb__a:after,
.wa-gnb__li.is-active > .wa-gnb__a:after{ transform:scaleX(1); }

.wa-gnb__sub{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(6px);
  min-width:184px; padding:10px; margin:0; list-style:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  opacity:0; visibility:hidden; transition:.2s var(--ease);
}
.wa-gnb__li:hover .wa-gnb__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.wa-gnb__sub a{
  display:block; padding:9px 14px; border-radius:var(--r-sm);
  font-size:15px; font-weight:500; color:var(--body); white-space:nowrap;
}
.wa-gnb__sub a:hover{ background:var(--bg-soft); color:var(--blue-600); }

/* -------- 메가메뉴 (2026-09) -------- */
.wa-hd{ position:sticky; }
.wa-gnb__li.has-mega{ position:static; }
.wa-mega{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--line); box-shadow:var(--sh-2, 0 18px 40px rgba(16,24,40,.10));
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.wa-gnb__li.has-mega:hover > .wa-mega,
.wa-gnb__li.has-mega:focus-within > .wa-mega,
.wa-gnb__li.has-mega.is-open > .wa-mega{ opacity:1; visibility:visible; transform:translateY(0); }
.wa-mega__in{ display:grid; grid-template-columns:288px minmax(0,1fr); gap:56px; padding:34px var(--gut) 38px; align-items:start; }
.wa-mega__intro strong{ display:block; margin:8px 0 10px; font-size:24px; font-weight:800; letter-spacing:-.03em;
  line-height:1.35; color:var(--navy-900); text-wrap:balance; }
.wa-mega__intro p{ margin:0 0 18px; font-size:14px; line-height:1.75; color:var(--muted); }
.wa-mega__label{ margin:0; font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--blue-600); }
.wa-mega__more{ display:inline-block; margin-left:14px; font-size:14px; font-weight:600; color:var(--body); }
.wa-mega__more:hover{ color:var(--blue-600); }
.wa-mega__eyebrow{ margin:0 0 12px; font-size:13px; font-weight:700; color:var(--muted); }
.wa-mega__grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin:0; padding:0; list-style:none; }
.wa-mega__grid a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:52px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-md, 12px);
  font-size:15px; font-weight:600; color:var(--ink); transition:border-color .16s, background .16s, color .16s;
}
.wa-mega__grid a:hover{ border-color:var(--blue-500); background:var(--bg-soft); color:var(--blue-600); }
.wa-mega__grid em{ flex:0 0 auto; font-style:normal; font-size:13px; font-weight:700; color:var(--muted); }
.wa-mega__grid a:hover em{ color:var(--blue-600); }
.wa-mega__grid:not(.is-cate){ grid-template-columns:repeat(3, minmax(0,1fr)); }
.wa-mega__all{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; min-height:52px; padding:0 16px; border-radius:var(--r-md, 12px);
  background:var(--bg-soft); font-size:15px; font-weight:700; color:var(--ink);
}
.wa-mega__all:hover{ color:var(--blue-600); }

.wa-drawer__cates{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.wa-drawer__cates a{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wa-drawer__cates em{ font-style:normal; font-size:12px; font-weight:700; color:var(--muted); }

@media (max-width:1180px){
  .wa-mega__in{ grid-template-columns:240px minmax(0,1fr); gap:36px; }
  .wa-mega__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .wa-mega__grid:not(.is-cate){ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:900px){ .wa-mega{ display:none; } }
@media (prefers-reduced-motion:reduce){ .wa-mega{ transition:none; } }

.wa-hd__act{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.wa-hd__tel{ font-size:17px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em; }
.wa-hd__tel small{ display:block; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em; }

.wa-hd__burger{
  display:none; width:44px; height:44px; border:0; background:none; cursor:pointer;
  align-items:center; justify-content:center; color:var(--ink); font-size:22px;
}

@media (max-width:1080px){
  .wa-hd__in{ height:64px; gap:16px; }
  .wa-gnb__a{ line-height:64px; padding:0 12px; font-size:15px; }
  .wa-hd__tel{ display:none; }
}
@media (max-width:900px){
  .wa-gnb{ display:none; }
  .wa-hd__burger{ display:flex; }
  .wa-hd__act .wa-btn{ height:40px; padding:0 16px; font-size:14px; }
}

/* 모바일 드로어 */
.wa-drawer{
  position:fixed; inset:0; z-index:1000; visibility:hidden;
}
.wa-drawer.is-open{ visibility:visible; }
.wa-drawer__bg{
  position:absolute; inset:0; background:rgba(11,27,52,.5);
  opacity:0; transition:.25s var(--ease);
}
.wa-drawer.is-open .wa-drawer__bg{ opacity:1; }
/* 닫힌 서랍이 화면 밖으로 나가 문서 폭을 늘리지 않게 한다 */
.wa-drawer{ overflow:hidden; }
.wa-drawer__panel{
  position:absolute; right:0; top:0; bottom:0; width:min(340px,86vw);
  background:#fff; padding:18px; overflow-y:auto;
  transform:translateX(100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column;
}
.wa-drawer.is-open .wa-drawer__panel{ transform:none; }
.wa-drawer__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wa-drawer__close{ width:40px; height:40px; border:0; background:none; font-size:20px; color:var(--ink); cursor:pointer; }
.wa-drawer__nav{ list-style:none; margin:0; padding:0; flex:1 1 auto; }
.wa-drawer__nav > li{ border-bottom:1px solid var(--line-2); }
.wa-drawer__nav > li > a{
  display:block; padding:15px 8px; font-size:17px; font-weight:700;
  letter-spacing:-.02em; color:var(--ink);
}
.wa-drawer__nav ul{ list-style:none; margin:0 0 10px; padding:0 8px; }
.wa-drawer__nav ul a{ display:block; padding:8px 12px; font-size:15px; color:var(--muted); }
.wa-drawer__foot{ padding-top:16px; display:grid; gap:8px; }

/* --------------------------------------------------------------------------
   5. 플로팅 (모바일 하단바 / 상단이동)
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  display:none;                      /* 채널 수에 따라 3~4칸이 되므로 flex 로 나눈다 */
  background:#fff; border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(15,23,42,.08);
}
.wa-float a{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:60px; font-size:12px; font-weight:700; color:var(--body);
}
.wa-float a i{ font-size:18px; }
.wa-float a.is-cta{ background:var(--blue-500); color:#fff; }
@media (max-width:900px){
  .wa-float{ display:flex; }
  body{ padding-bottom:60px; }
}

/* PC 우측 문의 퀵바 — 맨위로 버튼 위에 쌓는다 */
.wa-rail{
  position:fixed; right:20px; bottom:84px; z-index:880;
  display:flex; flex-direction:column; gap:8px; width:74px;
}
.wa-rail__b{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  height:66px; border:1px solid var(--line); border-radius:12px; background:#fff;
  font-size:11.5px; font-weight:700; line-height:1.25; color:var(--body); text-align:center;
  box-shadow:0 4px 14px rgba(15,23,42,.07);
  transition:border-color .16s ease, color .16s ease, transform .16s ease;
}
.wa-rail__b i{ font-size:17px; color:var(--blue-500); }
.wa-rail__b:hover{ border-color:var(--blue-500); color:var(--blue-600); transform:translateY(-2px); }
.wa-rail__b.is-kakao{ background:#FEE500; border-color:#F2D900; color:#3C1E1E; }
.wa-rail__b.is-kakao i{ color:#3C1E1E; }
.wa-rail__b.is-kakao:hover{ background:#FFEB4D; border-color:#E6CF00; color:#3C1E1E; }
.wa-rail__b.is-tg{ background:#229ED9; border-color:#1C8CC2; color:#fff; }
.wa-rail__b.is-tg i{ color:#fff; }
.wa-rail__b.is-tg:hover{ background:#2FAEE8; border-color:#229ED9; color:#fff; }
.wa-rail__b.is-cta{ background:var(--blue-500); border-color:var(--blue-500); color:#fff; }
.wa-rail__b.is-cta i{ color:#fff; }
.wa-rail__b.is-cta:hover{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }

.wa-rail__sns{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px;
  margin:2px 0 0; padding:9px 6px; list-style:none;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.07);
}
.wa-rail__sns a{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px;
  border-radius:50%; color:var(--muted); transition:color .16s ease, background-color .16s ease;
}
.wa-rail__sns a:hover{ color:var(--blue-600); background:var(--blue-050); }
.wa-rail__sns svg{ width:17px; height:17px; }

.wa-rail__set{
  padding:7px 4px; border:1px dashed var(--blue-400); border-radius:10px;
  background:var(--blue-050); color:var(--blue-600);
  font-size:10.5px; font-weight:700; line-height:1.3; text-align:center;
}

@media (max-width:1100px){
  .wa-rail{ display:none; }        /* 모바일은 .wa-float 하단바가 대신한다 */
}

#top_btn{
  position:fixed; right:22px; bottom:96px; z-index:870;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:#fff; color:var(--ink); box-shadow:var(--sh-2); cursor:pointer;
  opacity:0; pointer-events:none; transition:.25s var(--ease);
}
#top_btn.is-show{ opacity:1; pointer-events:auto; }
@media (max-width:900px){ #top_btn{ bottom:76px; right:14px; } }

/* --------------------------------------------------------------------------
   6. S1 히어로
   -------------------------------------------------------------------------- */
.wa-hero{
  position:relative; overflow:hidden;
  background:var(--navy-900); color:#fff;
  padding:96px 0 108px;
}
.wa-hero:before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(900px 480px at 78% 6%, rgba(46,123,255,.34), transparent 62%),
    radial-gradient(620px 420px at 8% 96%, rgba(200,255,61,.09), transparent 66%);
  pointer-events:none;
}
.wa-hero:after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(900px 600px at 50% 30%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(900px 600px at 50% 30%, #000, transparent 78%);
}
.wa-hero__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.wa-hero__badge{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  padding:7px 14px 7px 8px; border-radius:var(--r-full);
  background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:13px; font-weight:600; color:#D6E2F5;
}
.wa-hero__badge b{
  background:var(--lime-500); color:var(--navy-900);
  padding:3px 9px; border-radius:var(--r-full); font-size:12px; font-weight:800;
}
.wa-hero__h1{
  font-size:clamp(32px,4.4vw,58px); font-weight:800; letter-spacing:-.038em;
  line-height:1.22; color:#fff; margin:0 0 20px;
}
.wa-hero__h1 em{
  font-style:normal; position:relative; white-space:nowrap;
  background:linear-gradient(180deg,transparent 62%, rgba(46,123,255,.55) 62%);
}
.wa-hero__sub{ font-size:18px; line-height:1.72; color:#9DB2CF; margin:0 0 34px; }
.wa-hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.wa-hero__app-note{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 32px;
  color:#D6E2F5; font-size:13px; line-height:1.5;
}
.wa-hero__app-note b{
  padding:3px 8px; border:1px solid rgba(92,153,255,.55); border-radius:var(--r-full);
  color:#8AB5FF; font-size:10px; letter-spacing:.08em;
}
.wa-hero__app-note span{ color:var(--lime-500); font-weight:700; }
.wa-hero__trust{ display:flex; gap:36px; flex-wrap:wrap; }
.wa-hero__trust div strong{ display:block; font-size:28px; font-weight:800; color:#fff; letter-spacing:-.03em; line-height:1.2; }
.wa-hero__trust div span{ font-size:13px; color:#7E93B4; }
.wa-hero__trustnote{ margin:14px 0 0; font-size:12.5px; color:#7E93B4; }
.wa-hero__trustnote a{ color:var(--lime-500); font-weight:700; text-decoration:none; }
.wa-hero__trustnote a:hover{ text-decoration:underline; }

/* 히어로 목업 */
.wa-mock{ position:relative; }
.wa-mock__pc{
  background:#0A1729; border:1px solid rgba(255,255,255,.14); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.wa-mock__bar{ height:34px; background:rgba(255,255,255,.05); display:flex; align-items:center; gap:6px; padding:0 14px; }
.wa-mock__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); display:block; }
.wa-mock__screen{
  aspect-ratio:16/10; background:linear-gradient(160deg,#12294A,#0A1729);
  display:flex; flex-direction:column; gap:10px; padding:22px;
}
.wa-mock__line{ height:9px; border-radius:5px; background:rgba(255,255,255,.10); }
.wa-mock__line.w70{ width:70%; } .wa-mock__line.w45{ width:45%; }
.wa-mock__line.hi{ background:linear-gradient(90deg,var(--blue-500),transparent); height:14px; width:58%; }
.wa-mock__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px; }
.wa-mock__cards span{ height:52px; border-radius:8px; background:rgba(255,255,255,.07); display:block; }
.wa-mock__phone{
  position:absolute; right:-14px; bottom:-34px; width:132px;
  background:#0A1729; border:1px solid rgba(255,255,255,.18); border-radius:20px;
  padding:8px; box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.wa-mock__phone span{
  display:block; aspect-ratio:9/17; border-radius:13px;
  background:linear-gradient(160deg,#1A3153,#0A1729);
}
.wa-mock__video{
  position:absolute; left:-30px; bottom:16px; width:112px; aspect-ratio:9/16;
  border-radius:14px; overflow:hidden; background:#000;
  border:1px solid rgba(200,255,61,.35); box-shadow:0 20px 44px rgba(0,0,0,.5);
}
.wa-mock__video video,.wa-mock__video img{ width:100%; height:100%; object-fit:cover; }
.wa-mock__video:after{
  content:'AD'; position:absolute; left:8px; top:8px;
  background:var(--lime-500); color:var(--navy-900);
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:var(--r-full);
}

@media (max-width:1024px){
  .wa-hero{ padding:64px 0 84px; }
  .wa-hero__in{ grid-template-columns:1fr; gap:48px; }
  .wa-mock{ max-width:520px; }
}
@media (max-width:640px){
  .wa-logo__image{ height:32px; }
  .wa-logo__image--footer{ height:40px; }
  .wa-hero__cta{ gap:8px; }
  .wa-hero__cta .wa-btn{ flex:1 1 auto; }
  .wa-hero__trust{ gap:22px; }
  .wa-hero__trust div strong{ font-size:22px; }
  .wa-mock__video{ left:-10px; width:84px; }
  .wa-mock__phone{ width:100px; right:-6px; }
}

/* --------------------------------------------------------------------------
   7. S2 문제 제기
   -------------------------------------------------------------------------- */
.wa-quote{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.wa-bill{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-2); overflow:hidden;
}
.wa-bill__hd{
  padding:16px 22px; border-bottom:1px dashed var(--line);
  font-size:14px; font-weight:700; color:var(--muted); letter-spacing:.02em;
}
.wa-bill__li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 22px; border-bottom:1px solid var(--line-2);
  font-size:15px; color:var(--body);
}
.wa-bill__li b{ font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.wa-bill__sum{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 22px; background:#FFF4F4;
}
.wa-bill__sum span{ font-size:14px; font-weight:700; color:var(--warn); }
.wa-bill__sum b{ font-size:26px; font-weight:800; color:var(--warn); letter-spacing:-.03em; }
.wa-switch{
  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  padding:14px 22px; border-radius:var(--r-full);
  background:var(--navy-900); color:#fff; font-size:17px; font-weight:800; letter-spacing:-.02em;
}
.wa-switch i{ color:var(--lime-500); }
@media (max-width:900px){ .wa-quote{ grid-template-columns:1fr; gap:32px; } }

/* --------------------------------------------------------------------------
   8. S3 세트 구성
   -------------------------------------------------------------------------- */
.wa-set{ position:relative; overflow:hidden; }
.wa-set__ico{ font-size:24px; }
.wa-set__price{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line); font-size:14px; }
.wa-set__price dl{ display:flex; justify-content:space-between; margin:0 0 6px; }
.wa-set__price dt{ color:var(--muted); }
.wa-set__price dd{ margin:0; font-weight:700; color:var(--muted); text-decoration:line-through; }
.wa-set__price dl.is-on dt{ color:var(--blue-600); font-weight:700; }
.wa-set__price dl.is-on dd{ color:var(--blue-600); text-decoration:none; }

/* --------------------------------------------------------------------------
   9. S4 자동제작 엔진
   -------------------------------------------------------------------------- */
.wa-timeline{ display:grid; gap:18px; margin-bottom:48px; }
.wa-tl{ display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; }
.wa-tl__label{ font-size:15px; font-weight:700; color:var(--muted); text-align:right; }
.wa-tl__bar{ height:44px; border-radius:var(--r-full); background:var(--line-2); position:relative; overflow:hidden; }
.wa-tl__fill{
  position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-full);
  display:flex; align-items:center; padding:0 18px;
  font-size:14px; font-weight:800; color:#fff; letter-spacing:-.01em;
  width:0; transition:width 1s var(--ease);
}
.wa-tl--them .wa-tl__fill{ background:#A9B6C9; }
.wa-tl--us .wa-tl__label{ color:var(--ink); }
.wa-tl--us .wa-tl__fill{ background:linear-gradient(90deg,var(--blue-600),var(--blue-500)); box-shadow:var(--sh-blue); }
@media (max-width:640px){
  .wa-tl{ grid-template-columns:1fr; gap:6px; }
  .wa-tl__label{ text-align:left; }
  .wa-tl__bar{ height:38px; }
}

.wa-step{ counter-reset:step; }
.wa-step__i{ position:relative; padding-left:0; }
.wa-step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--navy-900); color:#fff; font-size:15px; font-weight:800;
  margin-bottom:14px;
}
.wa-note{
  margin-top:34px; padding:18px 22px; border-radius:var(--r-md);
  background:var(--blue-050); color:var(--blue-600);
  font-size:15px; font-weight:600; line-height:1.7;
}
.wa-note b{ font-weight:800; }

/* --------------------------------------------------------------------------
   10. S5 기능 카탈로그
   -------------------------------------------------------------------------- */
.wa-cat{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:960px){ .wa-cat{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .wa-cat{ grid-template-columns:1fr; } }
.wa-cat__box{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
}
.wa-cat__t{
  display:flex; align-items:center; gap:10px;
  font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em;
  margin:0 0 16px;
}
.wa-cat__t i{ color:var(--blue-500); }
.wa-cat__ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.wa-cat__ul li{
  padding:6px 12px; border-radius:var(--r-full); background:var(--bg-soft);
  font-size:13.5px; font-weight:600; color:var(--body);
  transition:.18s var(--ease);
}
.wa-cat__ul li:hover{ background:var(--blue-050); color:var(--blue-600); }

/* --------------------------------------------------------------------------
   11. S6 광고영상
   -------------------------------------------------------------------------- */
.wa-video__hook{
  font-size:clamp(22px,2.6vw,32px); font-weight:800; letter-spacing:-.03em;
  color:#fff; line-height:1.4; margin:0 0 14px;
}
.wa-video__hook em{ font-style:normal; color:var(--lime-500); }
.wa-vtable{ width:100%; border-collapse:collapse; margin:0; background:transparent; }
.wa-vtable th,.wa-vtable td{
  padding:15px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.10);
  font-size:15px; color:#B9C8DE;
}
.wa-vtable th{ font-size:13px; font-weight:700; color:#7E93B4; letter-spacing:.04em; }
.wa-vtable td:first-child{ font-weight:700; color:#fff; }
.wa-vtable td:nth-child(2){ white-space:nowrap; color:var(--lime-500); font-weight:700; font-size:14px; }
@media (max-width:640px){
  .wa-vtable th:nth-child(3),.wa-vtable td:nth-child(3){ display:none; }
}

.wa-vflow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
.wa-vflow div{
  padding:18px; border-radius:var(--r-md);
  background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  font-size:14px; color:#C3D0E4;
}
.wa-vflow div b{ display:block; color:#fff; font-size:15px; margin-bottom:4px; }
@media (max-width:720px){ .wa-vflow{ grid-template-columns:repeat(2,1fr); } }

.wa-vlink{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.wa-vlink li{
  display:flex; align-items:center; gap:10px; font-size:16px; color:#D6E2F5;
}
.wa-vlink li i{ color:var(--lime-500); }
.wa-vconc{
  margin-top:30px; padding:24px 26px; border-radius:var(--r-lg);
  background:rgba(200,255,61,.08); box-shadow:inset 0 0 0 1px rgba(200,255,61,.24);
  font-size:17px; font-weight:700; line-height:1.65; color:#fff; letter-spacing:-.02em;
}
.wa-vconc b{ color:var(--lime-500); }

/* --------------------------------------------------------------------------
   12. S7 제작사례
   -------------------------------------------------------------------------- */
.wa-work{
  flex:0 0 min(340px,78vw);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; transition:.24s var(--ease);
}
.wa-work:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); border-color:transparent; }
.wa-work__thumb{
  aspect-ratio:16/10; background:linear-gradient(150deg,var(--navy-800),var(--navy-600));
  position:relative; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.28); font-size:30px; font-weight:800; letter-spacing:-.03em;
}
.wa-work__thumb img{ width:100%; height:100%; object-fit:cover; }
.wa-work__flag{ position:absolute; right:10px; top:10px; display:flex; gap:5px; }
.wa-work__flag span{
  padding:3px 9px; border-radius:var(--r-full); font-size:11px; font-weight:800;
  background:rgba(11,27,52,.72); color:#fff; backdrop-filter:blur(4px);
}
.wa-work__flag span.app{ background:var(--blue-500); }
.wa-work__flag span.vid{ background:var(--lime-500); color:var(--navy-900); }
.wa-work__body{ padding:20px; }
.wa-work__t{ font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin:0 0 10px; }
/* 실제 사이트가 연결된 사례 — 카드 전체가 <a> 가 되므로 블록으로 되돌린다 */
a.wa-work{ display:block; color:inherit; text-decoration:none; }
a.wa-work:hover .wa-work__t{ color:var(--blue-600, #1a5fd0); }
.wa-work__host{ margin:-4px 0 10px; font-size:12.5px; font-weight:600; color:var(--muted, #7b8494); }
a.wa-work:hover .wa-work__host{ color:var(--blue-600, #1a5fd0); }
.wa-work__tags{ display:flex; flex-wrap:wrap; gap:6px; }

/* --------------------------------------------------------------------------
   13. S8 가격
   -------------------------------------------------------------------------- */
.wa-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
@media (max-width:960px){ .wa-plans{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.wa-plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  padding:34px 30px; position:relative; transition:.24s var(--ease);
}
.wa-plan:hover{ box-shadow:var(--sh-3); }
.wa-plan--best{
  background:var(--navy-900); border-color:var(--navy-900); color:#B9C8DE;
  box-shadow:0 26px 60px rgba(11,27,52,.30);
}
.wa-plan__flag{
  position:absolute; right:26px; top:-13px;
  padding:5px 14px; border-radius:var(--r-full);
  background:var(--lime-500); color:var(--navy-900);
  font-size:12px; font-weight:800;
}
.wa-plan__n{ font-size:14px; font-weight:800; letter-spacing:.06em; color:var(--blue-600); margin:0 0 10px; }
.wa-plan--best .wa-plan__n{ color:var(--lime-500); }
.wa-plan__p{ font-size:34px; font-weight:800; letter-spacing:-.035em; color:var(--ink); line-height:1.2; margin:0 0 4px; }
.wa-plan--best .wa-plan__p{ color:#fff; }
.wa-plan__p small{ font-size:15px; font-weight:600; color:var(--muted); }
.wa-plan__d{ font-size:14px; color:var(--muted); margin:0 0 24px; }
.wa-plan__ul{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px; }
.wa-plan__ul li{ display:flex; gap:9px; font-size:15px; line-height:1.6; }
.wa-plan__ul li i{ color:var(--blue-500); margin-top:4px; flex:0 0 auto; }
.wa-plan--best .wa-plan__ul li i{ color:var(--lime-500); }
.wa-plan__ul li.is-key{ font-weight:700; color:var(--ink); }
.wa-plan--best .wa-plan__ul li.is-key{ color:#fff; }

.wa-opt{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:720px){ .wa-opt{ grid-template-columns:1fr; } }
.wa-opt div{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-radius:var(--r-md); background:#fff; border:1px solid var(--line);
  font-size:15px;
}
.wa-opt div b{ font-weight:800; color:var(--ink); white-space:nowrap; }
.wa-price__foot{ margin-top:22px; text-align:center; font-size:14px; color:var(--muted); }

/* --------------------------------------------------------------------------
   14. S9 프로세스
   -------------------------------------------------------------------------- */
.wa-proc{ position:relative; display:grid; gap:14px; }
.wa-proc__row{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.wa-proc__i{
  padding:18px 14px; border-radius:var(--r-md); background:#fff;
  border:1px solid var(--line); text-align:center;
}
.wa-proc__i b{ display:block; font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.02em; margin-bottom:5px; }
.wa-proc__i span{ font-size:12px; color:var(--muted); }
.wa-proc__par{
  margin-top:8px; padding:14px 18px; border-radius:var(--r-md);
  background:rgba(200,255,61,.14); box-shadow:inset 0 0 0 1px rgba(168,224,24,.35);
  font-size:14.5px; font-weight:700; color:#5C7A00;
}
@media (max-width:1024px){ .wa-proc__row{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .wa-proc__row{ grid-template-columns:repeat(2,1fr); } }

/* --------------------------------------------------------------------------
   15. S10 FAQ
   -------------------------------------------------------------------------- */
.wa-faq{ display:grid; gap:10px; max-width:880px; margin:0 auto; }
.wa-faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  transition:.2s var(--ease);
}
.wa-faq details[open]{ border-color:var(--blue-400); box-shadow:var(--sh-2); }
.wa-faq summary{
  list-style:none; cursor:pointer; padding:19px 56px 19px 22px; position:relative;
  font-size:16.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em;
}
.wa-faq summary::-webkit-details-marker{ display:none; }
/* 질문을 h3 로 감싸 소제목으로 읽히게 한다 (AEO 질문형 소제목). 모양은 summary 그대로 */
.wa-faq__q{ margin:0; font:inherit; color:inherit; letter-spacing:inherit; display:inline; }
.wa-faq summary:after{
  content:'\f107'; font-family:'FontAwesome'; position:absolute; right:22px; top:19px;
  color:var(--muted); transition:transform .2s var(--ease);
}
.wa-faq details[open] summary:after{ transform:rotate(180deg); color:var(--blue-600); }
.wa-faq__a{ padding:0 22px 22px; font-size:15.5px; line-height:1.78; color:var(--body); margin:0; }

/* --------------------------------------------------------------------------
   16. S11 최종 CTA
   -------------------------------------------------------------------------- */
.wa-final{ background:var(--navy-900); position:relative; overflow:hidden; }
.wa-final:before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(800px 420px at 50% -10%, rgba(46,123,255,.32), transparent 64%);
}
.wa-final__in{ position:relative; z-index:2; text-align:center; }
.wa-final__h{ font-size:clamp(26px,3.4vw,42px); font-weight:800; color:#fff; letter-spacing:-.035em; margin:0 0 12px; }
.wa-final__s{ font-size:17px; color:#9DB2CF; margin:0 0 36px; }
.wa-qform{
  display:grid; grid-template-columns:1fr 1fr 1.2fr auto; gap:10px;
  max-width:900px; margin:0 auto;
}
.wa-qform select,.wa-qform input{
  height:56px; padding:0 18px; border-radius:var(--r-full);
  border:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:15px; width:100%;
}
.wa-qform input::placeholder{ color:#7E93B4; }
.wa-qform select option{ color:#111; }
.wa-qform select:focus,.wa-qform input:focus{ outline:0; box-shadow:inset 0 0 0 2px var(--blue-400); }
@media (max-width:860px){ .wa-qform{ grid-template-columns:1fr 1fr; } .wa-qform .wa-btn{ grid-column:1/-1; } }
@media (max-width:520px){ .wa-qform{ grid-template-columns:1fr; } }
.wa-final__alt{ margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* --------------------------------------------------------------------------
   17. 견적 마법사
   -------------------------------------------------------------------------- */
.wa-wiz{
  min-width:0; margin:0; background:#fff;
  border:1px solid #DCE3EC; border-radius:4px; box-shadow:none;
  overflow:hidden;
}
.wa-estimator-layout{ max-width:1120px; margin:0 auto; display:grid; grid-template-columns:300px minmax(0,1fr); gap:0; align-items:stretch; }
.wa-estimator-aside{ padding:48px 36px; background:var(--navy-900); color:#fff; }
.wa-estimator-kicker{ margin:0 0 18px; color:var(--lime-500); font-size:11px; font-weight:800; letter-spacing:.18em; }
.wa-estimator-aside h2{ margin:0 0 38px; font-size:25px; line-height:1.42; letter-spacing:-.035em; }
.wa-estimator-aside ol{ list-style:none; margin:0; padding:0; }
.wa-estimator-aside li{ display:grid; grid-template-columns:34px 1fr; gap:10px; padding:17px 0; border-top:1px solid rgba(255,255,255,.12); color:#B7C5D9; font-size:13px; }
.wa-estimator-aside li b{ color:#fff; font-size:11px; letter-spacing:.06em; }
.wa-estimator-call{ margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:4px; }
.wa-estimator-call small,.wa-estimator-call span{ color:#7E93B4; font-size:12px; }
.wa-estimator-call a{ color:#fff; font-size:24px; font-weight:800; letter-spacing:-.03em; }
.wa-ci{ display:block; width:22px; height:22px; }
.wa-contact-success{ width:62px; height:62px; margin:0 auto 20px; display:grid; place-items:center; color:#fff; background:var(--blue-600); border-radius:4px; }
.wa-contact-success .wa-ci{ width:30px; height:30px; }
.wa-wiz__bar{ height:4px; background:#EDF1F5; }
.wa-wiz__bar span{ display:block; height:100%; width:20%; background:var(--blue-600); transition:width .35s var(--ease); }
.wa-wiz__body{ padding:44px 40px 34px; }
.wa-wiz__no{ font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--blue-600); margin:0 0 8px; }
.wa-wiz__q{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.35; margin:0 0 6px; }
.wa-wiz__hint{ font-size:15px; color:var(--muted); margin:0 0 28px; }
.wa-wiz__step{ display:none; }
.wa-wiz__step.is-on{ display:block; animation:waIn .3s var(--ease); }
@keyframes waIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

.wa-pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:640px){ .wa-pick{ grid-template-columns:repeat(2,1fr); } }
.wa-pick label{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px;
  min-height:108px; padding:16px; cursor:pointer; text-align:left;
  border:1px solid #DCE3EC; border-radius:3px;
  font-size:14px; font-weight:700; color:var(--body);
  transition:.18s var(--ease);
}
.wa-pick__icon{ width:36px; height:36px; display:grid; place-items:center; color:#52657D; background:#F2F5F8; }
.wa-pick__icon .wa-ci{ width:20px; height:20px; }
.wa-pick input{ position:absolute; opacity:0; width:0; height:0; }
.wa-pick label:hover{ border-color:var(--blue-400); }
.wa-pick input:checked + span,
.wa-pick label.is-on{ }
.wa-pick label:has(input:checked){
  border-color:var(--blue-600); background:#F7FAFF; color:var(--blue-600);
  box-shadow:inset 3px 0 0 var(--blue-600);
}
.wa-pick label:has(input:checked) .wa-pick__icon{ background:var(--blue-600); color:#fff; }

.wa-chk{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
@media (max-width:720px){ .wa-chk{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .wa-chk{ grid-template-columns:1fr; } }
.wa-chk label{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-md);
  font-size:14.5px; font-weight:600; color:var(--body); transition:.18s var(--ease);
}
.wa-chk input{ position:absolute; opacity:0; width:0; height:0; }
.wa-chk label:before{
  content:'✓'; font-family:inherit; font-size:12px; font-weight:900;
  width:20px; height:20px; border-radius:6px; flex:0 0 auto;
  border:1.5px solid var(--line); color:transparent;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.wa-chk label:has(input:checked){ border-color:var(--blue-500); background:var(--blue-050); color:var(--blue-600); }
.wa-chk label:has(input:checked):before{ background:var(--blue-500); border-color:var(--blue-500); color:#fff; }

.wa-field{ display:grid; gap:12px; }
.wa-field input:not([type=checkbox]):not([type=radio]),
.wa-field textarea{
  width:100%; height:54px; padding:0 18px; font-size:15px;
  border:1.5px solid var(--line); border-radius:var(--r-md); background:#fff; color:var(--ink);
}
.wa-field textarea{ height:110px; padding:15px 18px; line-height:1.7; resize:vertical; }
.wa-field input:not([type=checkbox]):not([type=radio]):focus,
.wa-field textarea:focus{ outline:0; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(46,123,255,.12); }

.wa-agree{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--body); }
.wa-agree input[type=checkbox]{
  width:18px; height:18px; flex:0 0 auto; margin:0; accent-color:var(--blue-500); cursor:pointer;
}
.wa-agree a{ color:var(--blue-600); font-weight:600; }

.wa-wiz__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 40px; border-top:1px solid var(--line-2); background:var(--bg-soft);
}
.wa-wiz__cnt{ font-size:14px; font-weight:700; color:var(--muted); }
@media (max-width:640px){
  .wa-wiz__body{ padding:32px 22px 26px; }
  .wa-wiz__foot{ padding:16px 22px; }
  .wa-wiz__q{ font-size:21px; }
}
@media (max-width:900px){
  .wa-estimator-layout{ grid-template-columns:1fr; }
  .wa-estimator-aside{ padding:30px 24px; }
  .wa-estimator-aside h2{ margin-bottom:22px; font-size:22px; }
  .wa-estimator-aside ol{ display:none; }
  .wa-estimator-call{ margin-top:20px; padding-top:18px; }
}

.wa-est{
  margin-top:26px; padding:26px; border-radius:var(--r-lg);
  background:var(--navy-900); color:#9DB2CF; text-align:center;
}
.wa-est span{ font-size:14px; font-weight:700; color:var(--lime-500); letter-spacing:.04em; }
.wa-est strong{ display:block; font-size:34px; font-weight:800; color:#fff; letter-spacing:-.035em; margin:6px 0 4px; }

/* 예상 견적 — 템플릿형 · 주문제작형 두 줄 */
.wa-est__tier{ list-style:none; margin:14px 0 12px; padding:0; }
.wa-est__tier li{
  display:grid; grid-template-columns:86px 1fr; align-items:baseline; gap:4px 12px;
  padding:12px 0; border-top:1px solid rgba(255,255,255,.12); text-align:left;
}
.wa-est__tier li:first-child{ border-top:0; }
.wa-est__tier em{ font-style:normal; font-size:13px; font-weight:700; color:var(--lime-500); }
.wa-est__tier b{ font-size:23px; font-weight:800; color:#fff; letter-spacing:-.03em; }
.wa-est__tier i{ grid-column:2; font-style:normal; font-size:12.5px; color:#7E93B4; }
@media (max-width:420px){
  .wa-est__tier li{ grid-template-columns:1fr; }
  .wa-est__tier i{ grid-column:1; }
  .wa-est__tier b{ font-size:21px; }
}
.wa-est small{ font-size:13px; color:#7E93B4; }

/* --------------------------------------------------------------------------
   18. 서브페이지 공통
   -------------------------------------------------------------------------- */
.wa-phd{
  background:var(--navy-900); color:#9DB2CF; padding:66px 0 60px;
  position:relative; overflow:hidden;
}
.wa-phd:before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(700px 340px at 82% 0%, rgba(46,123,255,.28), transparent 62%);
}
.wa-phd__in{ position:relative; z-index:2; }
.wa-phd h1{ font-size:clamp(28px,3.6vw,42px); font-weight:800; color:#fff; letter-spacing:-.035em; margin:0 0 10px; }
.wa-phd p{ font-size:16px; margin:0; color:#8FA5C4; }
.wa-crumb{ font-size:13px; color:#6F86A8; margin:0 0 14px; }
.wa-crumb a:hover{ color:#fff; }

/* 서브페이지에서는 컨테이너 타이틀 숨김 (페이지 헤더로 대체) */
.wa-haspagehead #container_title{ display:none; }

/* --------------------------------------------------------------------------
   19. 푸터
   -------------------------------------------------------------------------- */
#ft{
  background:var(--navy-900); color:#7E93B4; border:0; padding:0; margin:0;
  font-size:14px;
}
#ft h2{ position:absolute; left:-9999px; }
.wa-ft__top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:34px;
  padding:60px 0 46px; border-bottom:1px solid rgba(255,255,255,.09);
}
@media (max-width:900px){ .wa-ft__top{ grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:560px){ .wa-ft__top{ grid-template-columns:1fr; } }
.wa-ft__brand .wa-logo__txt{ color:#fff; }
.wa-ft__slogan{ margin:16px 0 20px; font-size:15px; line-height:1.7; color:#8FA5C4; }
.wa-ft__tel{ font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.wa-ft__tel + p{ margin:2px 0 0; font-size:13px; color:#6F86A8; }
.wa-ft__t{ font-size:14px; font-weight:800; color:#fff; margin:0 0 14px; letter-spacing:-.01em; }
.wa-ft__ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.wa-ft__ul a:hover{ color:#fff; }
.wa-ft__bot{
  padding:22px 0 30px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:12.5px;
}
.wa-ft__info{ line-height:1.85; }
.wa-ft__info b{ color:#8FA5C4; font-weight:600; }
#ft_copy{ background:none; color:#61789A; padding:0; font-size:12.5px; }

/* --------------------------------------------------------------------------
   20. 게시판/서브 콘텐츠 톤 보정
   -------------------------------------------------------------------------- */
#bo_cate ul li a{ border-radius:var(--r-full); }
.btn_submit,.btn_confirm .btn_submit{ border-radius:var(--r-sm); }
.tbl_head01 thead th{ background:var(--bg-soft); color:var(--ink); border-color:var(--line); }
.tbl_head01 td{ border-color:var(--line-2); }
#bo_v_title .bo_v_tit{ letter-spacing:-.02em; }

/* 접근성 */
.sound_only{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
#skip_to_container a{ position:absolute; left:0; top:-100px; z-index:9999; padding:10px 18px; background:var(--navy-900); color:#fff; }
#skip_to_container a:focus{ top:0; }

/* --------------------------------------------------------------------------
   21. 서브페이지 안에서 풀블리드(컨테이너 밖으로 빼기)
   -------------------------------------------------------------------------- */
.wa-bleed{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;
}

/* 히어로 숏폼 자리 — 영상 파일이 아직 없을 때 */
.wa-mock__video.is-empty{
  background:linear-gradient(165deg,#1A3153,#0A1729);
  display:flex; align-items:center; justify-content:center;
}
.wa-mock__vph{
  width:34px; height:34px; border-radius:50%;
  background:rgba(200,255,61,.16); color:var(--lime-500);
  display:flex; align-items:center; justify-content:center; font-size:13px;
  padding-left:2px;
}

/* 푸터 직통번호 */
.wa-ft__mob{ margin:6px 0 0; font-size:14px; color:#8FA5C4; }
.wa-ft__mob a{ color:#fff; font-weight:700; }
.wa-ft__mob a:hover{ color:var(--lime-500); }

/* --------------------------------------------------------------------------
   22. 템플릿 패키지 (template.php / template_sample.php / template_request.php)
   -------------------------------------------------------------------------- */

/* 조건 요약 밴드 */
.wa-tpl-deal{
  display:grid; grid-template-columns:minmax(240px,300px) 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg); box-shadow:var(--sh-2);
}
.wa-tpl-deal__price{
  background:var(--navy-900); color:#fff; padding:30px 28px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.wa-tpl-deal__eyebrow{
  display:block; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--lime-500); text-transform:uppercase;
}
.wa-tpl-deal__was{ font-size:13px; color:#8FA5C4; }
.wa-tpl-deal__was s{ text-decoration:line-through; }
.wa-tpl-deal__was b{
  margin-left:4px; padding:1px 6px; border-radius:4px;
  background:var(--lime-500); color:var(--navy-900); font-weight:800; font-size:12px;
}
.wa-tpl-deal__price strong{ font-size:40px; font-weight:800; line-height:1.1; }
.wa-tpl-deal__price strong small{ font-size:20px; font-weight:700; }
.wa-tpl-deal__vat{ font-size:13px; color:#8FA5C4; }
.wa-tpl-deal__ul{
  display:grid; grid-template-columns:repeat(2,1fr);
  margin:0; padding:0; list-style:none;
}
.wa-tpl-deal__ul li{
  padding:22px 24px; border-left:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:3px;
}
.wa-tpl-deal__ul li:nth-child(n+3){ border-bottom:0; }
.wa-tpl-deal__ul li i{ color:var(--blue-500); font-size:16px; margin-bottom:4px; }
.wa-tpl-deal__ul li b{ font-size:15px; color:var(--ink); font-weight:700; }
.wa-tpl-deal__ul li span{ font-size:13px; color:var(--muted); }

/* 템플릿 카드 */
.wa-tpl{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg); display:flex; flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wa-tpl:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--tpl,var(--blue-400)); }
.wa-tpl__thumb{
  position:relative; height:150px; overflow:hidden;
  background:var(--tpl);
  background-image:linear-gradient(150deg, rgba(255,255,255,.12), rgba(11,27,52,.55));
  display:flex; align-items:center; justify-content:center;
}
.wa-tpl__ico{ position:absolute; top:14px; left:16px; font-size:22px; }
.wa-tpl__mini{
  width:152px; background:#fff; border-radius:6px 6px 0 0; padding:7px;
  box-shadow:0 8px 22px rgba(0,0,0,.25); transform:translateY(14px);
  display:flex; flex-direction:column; gap:5px;
}
.wa-tpl__mini-bar{ height:6px; border-radius:3px; background:var(--tpl); opacity:.85; width:60%; }
.wa-tpl__mini-hero{ height:34px; border-radius:4px; background:var(--line-2); }
.wa-tpl__mini-row{ display:flex; gap:5px; }
.wa-tpl__mini-row i{ flex:1; height:16px; border-radius:3px; background:var(--line); }
.wa-tpl__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.wa-tpl__t{ margin:10px 0 6px; font-size:19px; font-weight:800; color:var(--ink); }
.wa-tpl__d{ margin:0 0 14px; font-size:14px; color:var(--body); line-height:1.6; }
.wa-tpl__ul{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:6px; flex:1; }
.wa-tpl__ul li{ font-size:13.5px; color:var(--body); display:flex; align-items:flex-start; gap:7px; }
.wa-tpl__ul li i{ color:var(--tpl); font-size:11px; margin-top:4px; }
.wa-tpl__btns{ display:flex; gap:8px; }
.wa-tpl__btns .wa-btn{ flex:1; justify-content:center; }

/* 포함 / 별도 박스 */
.wa-tpl-box{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:var(--bg); }
.wa-tpl-box--out{ background:var(--bg-soft); }
.wa-tpl-box__t{ margin:0 0 16px; font-size:17px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:8px; }
.wa-tpl-box__t i{ color:var(--blue-500); }
.wa-tpl-box--out .wa-tpl-box__t i{ color:var(--warn); }
.wa-tpl-box__ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.wa-tpl-box__ul li{ font-size:14.5px; color:var(--body); display:flex; align-items:flex-start; gap:9px; line-height:1.55; }
.wa-tpl-box__ul li i{ color:var(--blue-500); font-size:12px; margin-top:5px; }
.wa-tpl-box__ul li.is-key span{ color:var(--ink); font-weight:700; }
.wa-tpl-box--out .wa-tpl-box__ul li{ justify-content:space-between; gap:16px; }
.wa-tpl-box--out .wa-tpl-box__ul li b{ white-space:nowrap; color:var(--warn); font-size:13px; }

/* 진행 순서 */
.wa-tpl-flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.wa-tpl-flow__i{ border:1px solid var(--line); border-radius:var(--r-md); padding:20px 18px; background:var(--bg); }
.wa-tpl-flow__n{ display:block; font-size:13px; font-weight:800; color:var(--blue-500); margin-bottom:8px; }
.wa-tpl-flow__i b{ display:block; font-size:15px; color:var(--ink); margin-bottom:6px; }
.wa-tpl-flow__i p{ margin:0; font-size:13px; color:var(--muted); line-height:1.6; }

/* --- 샘플 미리보기 --- */
.wa-smp__stage{
  display:flex; align-items:flex-end; justify-content:center; gap:26px;
  padding:40px 26px; border-radius:var(--r-xl);
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
}
.wa-smp__pc{ flex:1; max-width:720px; border-radius:10px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.wa-smp__chrome{ display:flex; align-items:center; gap:6px; padding:9px 12px; background:#E9EDF3; }
.wa-smp__chrome span{ width:10px; height:10px; border-radius:50%; background:#C8D0DC; }
.wa-smp__url{
  flex:1; margin-left:8px; background:#fff; border-radius:99px;
  font-size:11px; color:var(--muted); padding:4px 12px;
}
.wa-smp__screen{ height:430px; overflow:hidden; background:#fff; }
.wa-smp__site{ font-size:12px; }
.wa-smp__gnb{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line-2);
}
.wa-smp__gnb b{ font-size:13px; color:var(--ink); }
.wa-smp__gnb nav{ display:flex; gap:12px; }
.wa-smp__gnb nav span{ font-size:11px; color:var(--muted); }
.wa-smp__hero{
  padding:38px 24px; text-align:center; color:#fff;
  background:var(--tpl);
  background-image:linear-gradient(150deg, rgba(255,255,255,.14), rgba(11,27,52,.5));
}
.wa-smp__hero h3{ margin:0 0 8px; font-size:22px; font-weight:800; line-height:1.35; }
.wa-smp__hero p{ margin:0 0 14px; font-size:12px; opacity:.88; }
.wa-smp__cta{
  display:inline-block; background:#fff; color:var(--tpl);
  font-size:11px; font-weight:800; padding:7px 18px; border-radius:99px;
}
.wa-smp__sec{ padding:18px 20px; border-bottom:1px solid var(--line-2); }
.wa-smp__sec.is-soft{ background:var(--bg-soft); }
.wa-smp__sec b{ display:block; font-size:13px; color:var(--ink); margin-bottom:3px; }
.wa-smp__sec p{ margin:0 0 10px; font-size:11px; color:var(--muted); }
.wa-smp__cards{ display:flex; gap:8px; }
.wa-smp__cards i{ flex:1; height:38px; border-radius:5px; background:var(--line); }
.wa-smp__sec.is-soft .wa-smp__cards i{ background:#fff; }
.wa-smp__ft{
  padding:16px 20px; background:var(--navy-900); color:#8FA5C4;
  display:flex; justify-content:space-between; font-size:10px;
}

.wa-smp__phone{
  width:212px; flex:none; background:#0B1B34; border-radius:28px;
  padding:9px; box-shadow:0 24px 50px rgba(0,0,0,.45); position:relative;
}
.wa-smp__notch{
  position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:66px; height:5px; border-radius:99px; background:#33415A; z-index:2;
}
.wa-smp__pscreen{ background:#fff; border-radius:21px; overflow:hidden; height:380px; display:flex; flex-direction:column; }
.wa-smp__phero{
  padding:34px 16px 20px; text-align:center; color:#fff;
  background:var(--tpl);
  background-image:linear-gradient(150deg, rgba(255,255,255,.14), rgba(11,27,52,.5));
}
.wa-smp__phero b{ display:block; font-size:26px; margin-bottom:6px; }
.wa-smp__phero strong{ display:block; font-size:14px; font-weight:800; line-height:1.4; }
.wa-smp__plist{ flex:1; padding:14px; display:flex; flex-direction:column; gap:9px; }
.wa-smp__plist span{
  border:1px solid var(--line); border-radius:10px; padding:12px 13px;
  font-size:12px; font-weight:700; color:var(--ink);
}
.wa-smp__ptab{
  display:flex; justify-content:space-around; padding:12px 0;
  border-top:1px solid var(--line-2); color:var(--muted); font-size:14px;
}
.wa-smp__ptab i:first-child{ color:var(--tpl); }
.wa-smp__cap{ margin:16px 0 0; text-align:center; font-size:13px; color:var(--muted); }

.wa-smp__fit{
  margin-top:26px; padding:20px 24px; border:1px dashed var(--line);
  border-radius:var(--r-md); display:flex; align-items:center; flex-wrap:wrap; gap:10px;
}
.wa-smp__fit b{ font-size:14px; color:var(--ink); margin-right:6px; }

.wa-smp__pick{
  margin-top:34px; padding:28px 30px; border-radius:var(--r-lg);
  background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.wa-smp__pick strong{ display:block; font-size:30px; font-weight:800; margin:4px 0 6px; }
.wa-smp__pick p{ margin:0; font-size:13px; color:#8FA5C4; line-height:1.6; }

.wa-smp__others{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.wa-smp__others a{
  border:1px solid var(--line); border-radius:var(--r-md); padding:18px 16px;
  display:flex; flex-direction:column; gap:4px; background:var(--bg);
  transition:border-color .15s ease, transform .15s ease;
}
.wa-smp__others a:hover{ border-color:var(--tpl); transform:translateY(-3px); }
.wa-smp__others a span{ font-size:22px; }
.wa-smp__others a b{ font-size:14.5px; color:var(--ink); }
.wa-smp__others a em{ font-style:normal; font-size:12px; color:var(--muted); }

/* --- 제작요청 폼 --- */
.wa-trq{ max-width:760px; margin:0 auto; }
.wa-trq__picked{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:22px 24px; border-radius:var(--r-lg); margin-bottom:26px;
  background:var(--navy-900); color:#fff;
}
.wa-trq__ico{
  width:54px; height:54px; flex:none; border-radius:14px; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12);
}
.wa-trq__thumb{
  width:84px; height:96px; flex:none; border-radius:10px; overflow:hidden;
  background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.wa-trq__thumb img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.wa-trq__pv{ color:#C8FF3D; font-weight:700; text-decoration:underline; text-underline-offset:3px; margin-left:4px; white-space:nowrap; }
.wa-trq__picked > div{ flex:1; min-width:180px; }
.wa-trq__picked strong{ display:block; font-size:20px; font-weight:800; margin:2px 0 5px; }
.wa-trq__picked strong em{ font-style:normal; font-size:13px; font-weight:600; color:#8FA5C4; margin-left:6px; }
.wa-trq__picked p{ margin:0; font-size:13px; color:#8FA5C4; }
.wa-trq__change select{
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-sm); padding:9px 12px; font-size:13px; font-family:var(--ff);
}
.wa-trq__change select option{ color:var(--ink); }

.wa-trq__set{
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 26px 28px; margin:0 0 18px; background:var(--bg);
}
.wa-trq__set legend{
  display:flex; align-items:center; gap:9px; padding:0 10px;
  font-size:17px; font-weight:800; color:var(--ink);
}
.wa-trq__set legend span{
  width:24px; height:24px; border-radius:50%; background:var(--blue-500); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.wa-trq__lb{ display:block; margin:14px 0 6px; font-size:13.5px; font-weight:700; color:var(--ink); }
.wa-trq__lb b{ color:var(--warn); font-size:11px; margin-left:4px; }
.wa-trq__foot{
  margin-top:26px; padding:24px; border-radius:var(--r-lg);
  background:var(--bg-soft); text-align:center;
}
.wa-trq__foot p{ margin:0 0 16px; font-size:13.5px; color:var(--body); line-height:1.7; }

@media (max-width:960px){
  .wa-tpl-deal{ grid-template-columns:1fr; }
  .wa-tpl-flow{ grid-template-columns:repeat(2,1fr); }
  .wa-smp__stage{ flex-direction:column; align-items:center; gap:22px; padding:28px 18px; }
  .wa-smp__pc{ width:100%; }
  .wa-smp__others{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .wa-tpl-deal__ul{ grid-template-columns:1fr; }
  .wa-tpl-deal__ul li{ border-left:0; }
  .wa-tpl-deal__ul li:nth-child(3){ border-bottom:1px solid var(--line-2); }
  .wa-tpl-flow{ grid-template-columns:1fr; }
  .wa-smp__screen{ height:340px; }
  .wa-smp__pick{ flex-direction:column; align-items:flex-start; }
  .wa-trq__set{ padding:20px 18px 22px; }
}

/* 템플릿 페이지 — 표준 계약서 안내 밴드 */
.wa-tpl-ct{
  margin-top:70px; padding:28px 30px; border-radius:var(--r-lg);
  background:var(--navy-900); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.wa-tpl-ct strong{ display:block; font-size:24px; font-weight:800; margin:4px 0 8px; }
.wa-tpl-ct p{ margin:0; font-size:13.5px; color:#8FA5C4; line-height:1.7; }
.wa-tpl-ct__btns{ display:flex; gap:8px; flex-wrap:wrap; }
.wa-smp__pickbtns{ display:flex; gap:8px; flex-wrap:wrap; }

@media (max-width:640px){
  .wa-tpl-ct{ flex-direction:column; align-items:flex-start; padding:22px 20px; }
  .wa-tpl-ct__btns, .wa-smp__pickbtns{ width:100%; }
  .wa-tpl-ct__btns .wa-btn, .wa-smp__pickbtns .wa-btn{ flex:1; justify-content:center; }
}

/* ============================================================
   업종별 샘플 미리보기 (template.php)
   ============================================================ */
.wa-dgroup{ margin-bottom:56px; }
.wa-dgroup__t{
  display:flex; align-items:center; gap:10px;
  font-size:19px; font-weight:800; color:var(--ink);
  padding-bottom:14px; border-bottom:2px solid var(--ink); margin-bottom:26px;
}
.wa-dgroup__t em{
  font-style:normal; font-size:12px; font-weight:700; color:var(--blue-600);
  background:var(--blue-050); border-radius:999px; padding:3px 10px;
}

.wa-dgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }

.wa-dcard{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.wa-dcard:hover{
  border-color:var(--blue-500); transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(26,99,224,.12);
}

.wa-dcard__shot{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--bg-soft);
}
.wa-dcard__shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .35s ease;
}
.wa-dcard:hover .wa-dcard__shot img{ transform:scale(1.04); }
.wa-dcard__go{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94);
  padding:11px 22px; border-radius:999px; background:rgba(15,23,42,.86); color:#fff;
  font-size:13px; font-weight:700; white-space:nowrap;
  opacity:0; transition:opacity .18s ease, transform .18s ease;
}
.wa-dcard:hover .wa-dcard__go{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.wa-dcard__body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.wa-dcard__brand{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--muted); text-transform:uppercase;
}
.wa-dcard__t{ margin:8px 0 0; font-size:17px; font-weight:800; color:var(--ink); }
.wa-dcard__d{ margin:10px 0 0; font-size:13px; line-height:1.75; color:var(--body); }
.wa-dcard__tags{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; }
.wa-dcard__tags li{
  font-size:11.5px; color:var(--body); background:var(--bg-soft);
  border-radius:999px; padding:4px 10px;
}
.wa-dcard__btns{ display:flex; gap:8px; margin-top:auto; padding-top:18px; }
.wa-dcard__btns .wa-btn{ flex:1; text-align:center; }

@media (max-width:1024px){
  .wa-dgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .wa-dgrid{ grid-template-columns:1fr; gap:18px; }
  .wa-dgroup{ margin-bottom:42px; }
  .wa-dcard__go{ opacity:1; transform:translate(-50%,-50%); font-size:12px; padding:9px 18px; }
}

/* ============================================================
   기능 안내 (template.php) — 공통기능 / 업종별 추가기능
   ============================================================ */
.wa-fgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.wa-fcard{
  border:1px solid var(--line); border-radius:14px; padding:24px 20px; background:#fff;
  transition:border-color .18s ease, transform .18s ease;
}
.wa-fcard:hover{ border-color:var(--blue-500); transform:translateY(-2px); }
.wa-fcard__ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px; background:var(--blue-050); color:var(--blue-600);
  font-size:19px;
}
.wa-fcard b{ display:block; margin-top:16px; font-size:15.5px; font-weight:800; color:var(--ink); }
.wa-fcard p{ margin:9px 0 0; font-size:13px; line-height:1.75; color:var(--body); }

.wa-bgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.wa-bcard{ border:1px solid var(--line); border-radius:14px; padding:22px 22px 20px; background:#fff; }
.wa-bcard__head{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line-2); }
.wa-bcard__ico{ font-size:20px; }
.wa-bcard__head b{ font-size:16px; font-weight:800; color:var(--ink); }
.wa-bcard__demo{
  margin-left:auto; font-size:12px; font-weight:700; color:var(--blue-600);
  background:var(--blue-050); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.wa-bcard__demo:hover{ background:var(--blue-500); color:#fff; }
.wa-bcard__soon{
  margin-left:auto; font-size:11.5px; color:var(--muted);
  background:var(--bg-soft); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.wa-bcard__ul{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.wa-bcard__ul li{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--body); background:var(--bg-soft);
  border-radius:8px; padding:7px 12px;
}
.wa-bcard__ul i{ font-size:9px; color:var(--blue-500); }

@media (max-width:1024px){
  .wa-fgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .wa-fgrid{ grid-template-columns:1fr; gap:12px; }
  .wa-fcard{ padding:20px 18px; }
  .wa-bgrid{ grid-template-columns:1fr; }
  .wa-bcard__head{ flex-wrap:wrap; }
  .wa-bcard__demo, .wa-bcard__soon{ margin-left:0; }
}

/* ============================================================
   섹션 번호 · 샘플 카드 보기 버튼 · PC/모바일 미리보기
   ============================================================ */
.wa-secno{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; margin-right:8px;
  background:var(--blue-050); color:var(--blue-600); font-size:15px; vertical-align:2px;
}
.wa-h2 small{ margin-left:8px; font-size:13px; font-weight:600; color:var(--muted); }

.wa-dcard__view{ display:flex; gap:6px; margin-top:14px; }
.wa-dcard__view a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:8px 4px; border:1px solid var(--line); border-radius:9px;
  font-size:12px; font-weight:600; color:var(--body); background:#fff;
}
.wa-dcard__view a:hover{ border-color:var(--blue-500); color:var(--blue-600); background:var(--blue-050); }
.wa-dcard__view i{ font-size:12px; }

/* 미리보기 페이지 */
.wa-pv{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; }
.wa-pv__bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:16px 20px; border-bottom:1px solid var(--line); background:var(--bg-soft);
}
.wa-pv__meta{ display:flex; align-items:center; gap:10px; min-width:0; }
.wa-pv__group{
  font-size:11.5px; font-weight:700; color:var(--blue-600);
  background:var(--blue-050); border-radius:999px; padding:4px 11px; white-space:nowrap;
}
.wa-pv__meta b{ font-size:16px; font-weight:800; color:var(--ink); }
.wa-pv__brand{ font-size:12px; color:var(--muted); }

.wa-pv__switch{ display:flex; gap:4px; margin-left:auto; background:#fff; border:1px solid var(--line); border-radius:10px; padding:4px; }
.wa-pv__switch button{
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border:0; cursor:pointer;
  border-radius:7px; background:transparent; color:var(--body); font-size:13px; font-weight:700;
}
.wa-pv__switch button.is-on{ background:var(--blue-500); color:#fff; }
.wa-pv__act{ display:flex; gap:8px; }

.wa-pv__stage{ padding:26px 20px 20px; background:var(--bg-soft); }
.wa-pv__frame{
  margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  width:100%; height:74vh; min-height:520px;
  transition:width .25s ease, height .25s ease, border-radius .25s ease;
}
.wa-pv__frame iframe{ width:100%; height:100%; border:0; display:block; }
.wa-pv[data-view="mobile"] .wa-pv__frame{
  width:390px; max-width:100%; height:74vh; min-height:600px;
  border-radius:26px; border:8px solid #1e2430; box-shadow:0 18px 40px rgba(15,23,42,.16);
}
.wa-pv__note{ margin:16px 0 0; text-align:center; font-size:12.5px; color:var(--muted); }
.wa-pv__note span{ display:block; margin-top:4px; font-size:11.5px; }

.wa-pv__tags{ display:flex; flex-wrap:wrap; gap:7px; padding:18px 20px 20px; }
.wa-pv__tags li{
  font-size:12px; color:var(--body); background:var(--bg-soft); border-radius:999px; padding:6px 13px;
}

@media (max-width:900px){
  .wa-pv__bar{ gap:12px; }
  .wa-pv__switch{ margin-left:0; order:3; width:100%; }
  .wa-pv__switch button{ flex:1; justify-content:center; }
  .wa-pv__act{ order:2; margin-left:auto; }
  .wa-pv__frame{ height:66vh; min-height:440px; }
  .wa-pv[data-view="mobile"] .wa-pv__frame{ height:66vh; min-height:520px; }
}
@media (max-width:640px){
  .wa-pv__stage{ padding:18px 12px 14px; }
  .wa-pv__meta b{ font-size:15px; }
  .wa-pv__brand{ display:none; }
  .wa-pv[data-view="mobile"] .wa-pv__frame{ border-width:6px; border-radius:20px; }
  .wa-dcard__view a{ font-size:11.5px; padding:7px 3px; }
  .wa-secno{ width:26px; height:26px; font-size:13px; }
}

/* ============================================================
   샘플 그리드 — 카테고리 필터 + 이미지 카드
   ============================================================ */
.wa-cate{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.wa-cate a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--body); background:#fff;
  transition:all .16s ease;
}
.wa-cate a em{
  font-style:normal; font-size:11px; font-weight:700; color:var(--muted);
  background:var(--bg-soft); border-radius:999px; padding:2px 7px;
}
.wa-cate a:hover{ border-color:var(--blue-400); color:var(--blue-600); }
.wa-cate a.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.wa-cate a.is-on em{ background:rgba(255,255,255,.18); color:#fff; }

.wa-tgrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.wa-tgrid__none{ padding:60px 0; text-align:center; color:var(--muted); font-size:14px; }

.wa-tcard{ display:flex; flex-direction:column; }
.wa-tcard[hidden]{ display:none; }
.wa-tcard__img{
  position:relative; display:block; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-soft);
}
.wa-tcard__img img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
  transition:transform .4s ease;
}
.wa-tcard:hover .wa-tcard__img img{ transform:scale(1.05); }
.wa-tcard__over{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; padding:24px;
  background:rgba(15,23,42,.72); color:#fff; text-align:center;
  opacity:0; transition:opacity .2s ease;
}
.wa-tcard:hover .wa-tcard__over{ opacity:1; }
.wa-tcard__over b{
  font-size:14px; font-weight:700; border:1.5px solid #fff; border-radius:999px; padding:10px 26px;
}
.wa-tcard__over span{ font-size:12.5px; line-height:1.7; color:rgba(255,255,255,.85); }

.wa-tcard__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:14px 2px 0; }
.wa-tcard__cate{ display:block; font-size:11.5px; color:var(--muted); }
.wa-tcard__name{ display:block; margin-top:5px; font-size:15.5px; font-weight:800; color:var(--ink); }
.wa-tcard__pick{
  flex:none; padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:700;
  color:var(--blue-600); background:var(--blue-050);
}
.wa-tcard__pick:hover{ background:var(--blue-500); color:#fff; }

/* 태블릿 미리보기 폭 */
.wa-pv[data-view="tablet"] .wa-pv__frame{
  width:768px; max-width:100%; height:74vh; min-height:560px;
  border-radius:20px; border:10px solid #1e2430; box-shadow:0 18px 40px rgba(15,23,42,.16);
}
.wa-pv__switch button i{ font-size:14px; }

@media (max-width:1024px){
  .wa-tgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .wa-pv[data-view="tablet"] .wa-pv__frame{ height:66vh; min-height:480px; }
}
@media (max-width:640px){
  .wa-tgrid{ grid-template-columns:1fr; gap:18px; }
  .wa-cate{ gap:6px; margin-bottom:20px; }
  .wa-cate a{ padding:8px 13px; font-size:12.5px; }
  .wa-tcard__over{ opacity:1; background:linear-gradient(transparent 40%, rgba(15,23,42,.78)); justify-content:flex-end; }
  .wa-tcard__over b{ font-size:12.5px; padding:8px 20px; }
  .wa-tcard__over span{ display:none; }
  .wa-pv__switch button span{ display:none; }
  .wa-pv__switch button{ padding:9px 14px; }
  .wa-pv[data-view="tablet"] .wa-pv__frame{ border-width:6px; }
}

/* 직접 만들기와 비교 ------------------------------------------------ */
.wa-tpl-vs{
  margin-top:56px; padding:34px 30px;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2, #F7F9FC);
}
.wa-tpl-vs__head h2{
  margin:0 0 10px; font-size:23px; font-weight:800; line-height:1.42;
  letter-spacing:-.02em; color:var(--navy-900);
}
.wa-tpl-vs__head p{ margin:0 0 22px; font-size:15px; line-height:1.75; color:var(--txt-2, #55627A); }
.wa-tpl-vs__head p b{ color:var(--navy-900); font-weight:700; }

.wa-tpl-vs__tb{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; }
.wa-tpl-vs__tb th,
.wa-tpl-vs__tb td{ padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.wa-tpl-vs__tb thead th{
  background:var(--navy-900); color:#fff; font-size:14px; font-weight:700; border-bottom:0;
}
.wa-tpl-vs__tb thead th small{ display:block; margin-top:3px; font-size:12px; font-weight:500; color:#8FA5C4; }
.wa-tpl-vs__tb thead th.is-us{ background:var(--blue-600, #1A63E0); }
.wa-tpl-vs__tb thead th.is-us small{ color:#CFE0FF; }
.wa-tpl-vs__tb tbody th{ font-size:14px; font-weight:700; color:var(--navy-900); background:#FBFCFE; }
.wa-tpl-vs__tb tbody td{ font-size:14px; line-height:1.65; color:var(--txt-2, #55627A); }
.wa-tpl-vs__tb td.is-them{ color:#8A93A3; }
.wa-tpl-vs__tb td.is-us{ color:var(--navy-900); background:#F4F8FF; }
.wa-tpl-vs__tb td.is-us i{ color:var(--blue-600, #1A63E0); margin-right:7px; }
.wa-tpl-vs__tb tbody tr:last-child th,
.wa-tpl-vs__tb tbody tr:last-child td{ border-bottom:0; }

.wa-tpl-vs__foot{
  margin:20px 0 0; font-size:15px; line-height:1.8; color:var(--txt-2, #55627A);
}
.wa-tpl-vs__foot b{ color:var(--navy-900); font-weight:800; }

@media (max-width:760px){
  .wa-tpl-vs{ padding:24px 18px; }
  .wa-tpl-vs__head h2{ font-size:19px; }
  .wa-tpl-vs__tb, .wa-tpl-vs__tb tbody, .wa-tpl-vs__tb tr{ display:block; }
  .wa-tpl-vs__tb thead{ display:none; }
  .wa-tpl-vs__tb colgroup{ display:none; }
  .wa-tpl-vs__tb tr{ border-bottom:1px solid var(--line); padding:4px 0; }
  .wa-tpl-vs__tb tr:last-child{ border-bottom:0; }
  .wa-tpl-vs__tb th, .wa-tpl-vs__tb td{ display:block; border-bottom:0; padding:8px 14px; }
  .wa-tpl-vs__tb tbody th{ background:transparent; padding-bottom:2px; }
  .wa-tpl-vs__tb td.is-them::before{ content:'직접 만들기 · '; font-weight:700; color:#B2BAC7; }
  .wa-tpl-vs__tb td.is-us{ border-radius:8px; margin:4px 10px 8px; }
}

/* 직접 만든 티가 나는 이유 -------------------------------------------- */
.wa-tpl-amt{ margin-top:56px; }
.wa-tpl-amt__head h2{
  margin:0 0 10px; font-size:23px; font-weight:800; line-height:1.42;
  letter-spacing:-.02em; color:var(--navy-900);
}
.wa-tpl-amt__head p{ margin:0 0 22px; font-size:15px; line-height:1.75; color:var(--txt-2, #55627A); }
.wa-tpl-amt__ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.wa-tpl-amt__ul li{
  display:grid; grid-template-columns:110px 1fr 1fr; align-items:start; gap:18px;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.wa-tpl-amt__ul li b{ font-size:14px; font-weight:800; color:var(--navy-900); }
.wa-tpl-amt__ul li span{ font-size:14px; line-height:1.65; }
.wa-tpl-amt__ul li .is-them{ color:#8A93A3; }
.wa-tpl-amt__ul li .is-us{ color:var(--navy-900); }
.wa-tpl-amt__ul li .is-us i{ color:var(--blue-600, #1A63E0); margin-right:7px; }

/* 홈페이지의 역할 · 통계 ---------------------------------------------- */
.wa-tpl-role{
  margin-top:56px; padding:36px 32px;
  border-radius:var(--r-lg); background:var(--navy-900); color:#fff;
}
.wa-tpl-role__eyebrow{
  margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--lime-500); text-transform:uppercase;
}
.wa-tpl-role__head h2{
  margin:0 0 12px; font-size:25px; font-weight:800; line-height:1.4;
  letter-spacing:-.02em; color:#fff;
}
.wa-tpl-role__head p{ margin:0 0 26px; font-size:15px; line-height:1.8; color:#B9C7DC; }
.wa-tpl-role__head p b{ color:#fff; font-weight:700; }

.wa-tpl-role__steps{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.wa-tpl-role__steps li{
  padding:20px 18px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.wa-tpl-role__no{
  display:inline-block; margin-bottom:8px; font-size:13px; font-weight:800;
  color:var(--lime-500); letter-spacing:.06em;
}
.wa-tpl-role__steps li b{ display:block; margin-bottom:7px; font-size:16px; font-weight:700; color:#fff; }
.wa-tpl-role__steps li p{ margin:0; font-size:13.5px; line-height:1.7; color:#AEBFD6; }

.wa-tpl-role__stat{ padding:26px; border-radius:12px; background:#fff; color:var(--navy-900); }
.wa-tpl-role__stat h3{ margin:0 0 10px; font-size:19px; font-weight:800; letter-spacing:-.02em; }
.wa-tpl-role__lead{ margin:0 0 20px; font-size:14.5px; line-height:1.8; color:var(--txt-2, #55627A); }
.wa-tpl-role__lead b{ color:var(--navy-900); font-weight:800; }

.wa-tpl-role__tb{ width:100%; border-collapse:collapse; }
.wa-tpl-role__tb th,
.wa-tpl-role__tb td{ padding:13px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); font-size:14px; }
.wa-tpl-role__tb thead th{
  background:#F4F7FC; font-size:13px; font-weight:700; color:var(--navy-900);
  border-bottom:1px solid var(--line);
}
.wa-tpl-role__tb thead th small{ display:block; margin-top:3px; font-size:11.5px; font-weight:500; color:#8A93A3; }
.wa-tpl-role__tb tbody th{ font-weight:800; color:var(--navy-900); }
.wa-tpl-role__tb tbody td{ color:var(--txt-2, #55627A); line-height:1.65; }
.wa-tpl-role__tb tbody td b{ color:var(--navy-900); font-weight:700; }
.wa-tpl-role__tb tr.is-key th,
.wa-tpl-role__tb tr.is-key td{ background:#F4F8FF; }
.wa-tpl-role__tb tr.is-key th{ box-shadow:inset 3px 0 0 var(--blue-600, #1A63E0); }
.wa-tpl-role__tb tbody tr:last-child th,
.wa-tpl-role__tb tbody tr:last-child td{ border-bottom:0; }

.wa-tpl-role__note{
  margin:18px 0 0; padding:16px 18px; border-radius:10px; background:#F7F9FC;
  font-size:13px; line-height:1.85; color:#6B7688;
}
.wa-tpl-role__note b{ color:var(--navy-900); font-weight:700; }
.wa-tpl-role__concl{
  margin:18px 0 0; font-size:15px; line-height:1.85; color:var(--navy-900);
}
.wa-tpl-role__concl b{ font-weight:800; }

@media (max-width:860px){
  .wa-tpl-role__steps{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .wa-tpl-amt__head h2{ font-size:19px; }
  .wa-tpl-amt__ul li{ grid-template-columns:1fr; gap:6px; }
  .wa-tpl-amt__ul li .is-them::before{ content:'직접 만들 때 · '; font-weight:700; color:#B2BAC7; }

  .wa-tpl-role{ padding:26px 18px; }
  .wa-tpl-role__head h2{ font-size:20px; }
  .wa-tpl-role__stat{ padding:20px 16px; }
  .wa-tpl-role__tb, .wa-tpl-role__tb tbody, .wa-tpl-role__tb tr{ display:block; }
  .wa-tpl-role__tb thead, .wa-tpl-role__tb colgroup{ display:none; }
  .wa-tpl-role__tb tr{ padding:10px 0; border-bottom:1px solid var(--line); }
  .wa-tpl-role__tb tr:last-child{ border-bottom:0; }
  .wa-tpl-role__tb th, .wa-tpl-role__tb td{ display:block; border-bottom:0; padding:3px 12px; }
  .wa-tpl-role__tb tbody th{ font-size:16px; }
  .wa-tpl-role__tb tbody td:nth-of-type(1)::before{ content:'한 달 방문 · '; color:#B2BAC7; }
  .wa-tpl-role__tb tbody td:nth-of-type(2)::before{ content:'예상 문의 · '; color:#B2BAC7; }
  .wa-tpl-role__tb tr.is-key{ background:#F4F8FF; border-radius:10px; }
}

/* 메인 - 순서 요약 ---------------------------------------------------- */
.wa-role-sum{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.wa-role-sum li{
  padding:24px 22px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff;
}
.wa-role-sum__no{
  display:inline-block; margin-bottom:10px; font-size:13px; font-weight:800;
  letter-spacing:.06em; color:var(--blue-600, #1A63E0);
}
.wa-role-sum li b{ display:block; margin-bottom:8px; font-size:17px; font-weight:800; color:var(--navy-900); letter-spacing:-.01em; }
.wa-role-sum li p{ margin:0; font-size:14px; line-height:1.72; color:var(--txt-2, #55627A); }

.wa-role-sum__stat{
  margin-top:14px; padding:24px 26px; border-radius:var(--r-lg);
  background:var(--navy-900); color:#fff;
  display:grid; grid-template-columns:200px 1fr auto; align-items:center; gap:24px;
}
.wa-role-sum__fig b{ display:block; font-size:30px; font-weight:800; line-height:1.1; color:var(--lime-500); }
.wa-role-sum__fig span{ display:block; margin-top:6px; font-size:13px; color:#8FA5C4; }
.wa-role-sum__stat p{ margin:0; font-size:14.5px; line-height:1.8; color:#B9C7DC; }
.wa-role-sum__stat p b{ color:#fff; font-weight:700; }
.wa-role-sum__stat .wa-btn{ white-space:nowrap; }

@media (max-width:900px){
  .wa-role-sum{ grid-template-columns:1fr; }
  .wa-role-sum__stat{ grid-template-columns:1fr; gap:16px; text-align:left; }
  .wa-role-sum__stat .wa-btn{ justify-self:start; }
}

/* 헤더 마이페이지 링크 ------------------------------------------------- */
.wa-hd__my{
  display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px;
  font-size:13px; font-weight:700; color:var(--navy-900); text-decoration:none;
}
.wa-hd__my:hover{ background:#F1F4F9; }
.wa-hd__my i{ font-size:17px; color:var(--blue-600, #1A63E0); }
@media (max-width:1100px){ .wa-hd__my span{ display:none; } }

/* 마이페이지 --------------------------------------------------------- */
.wa-my{ max-width:900px; margin:0 auto; }
.wa-my__site{
  margin-bottom:18px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; box-shadow:var(--sh-1, 0 1px 2px rgba(15,30,60,.06)); overflow:hidden;
}
.wa-my__hd{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 24px; border-bottom:1px solid var(--line);
}
.wa-my__hd h2{ margin:0 0 4px; font-size:20px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em; }
.wa-my__domain{ font-size:14px; color:var(--blue-600, #1A63E0); text-decoration:none; }
.wa-my__domain i{ font-size:12px; }
.wa-my__near{ margin:0; padding:8px 14px; border-radius:999px; font-size:13px; background:#EEF7F0; color:#2E7D32; }
.wa-my__near b{ font-weight:800; }
.wa-my__near.is-soon{ background:#FFF4E5; color:#B85C00; }
.wa-my__near.is-urgent,
.wa-my__near.is-over{ background:#FDECEC; color:#C62828; }

.wa-my__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.wa-my__list li{ padding:18px 20px; border-right:1px solid var(--line); }
.wa-my__list li:last-child{ border-right:0; }
.wa-my__k{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:700; color:#8A93A3; }
.wa-my__v{ display:block; font-size:17px; font-weight:800; color:var(--navy-900); letter-spacing:-.01em; }
.wa-my__v.is-empty{ font-size:14px; font-weight:600; color:#B2BAC7; }
.wa-my__d{ display:block; margin-top:4px; font-size:12.5px; font-weight:700; color:#2E7D32; }
.wa-my__list li.is-soon .wa-my__d{ color:#B85C00; }
.wa-my__list li.is-urgent .wa-my__d,
.wa-my__list li.is-over .wa-my__d{ color:#C62828; }
.wa-my__list li.is-urgent,
.wa-my__list li.is-over{ background:#FFF8F8; }

.wa-my__ft{ padding:14px 24px; background:#F7F9FC; border-top:1px solid var(--line); }
.wa-my__ft p{ margin:0; font-size:13px; color:#6B7688; }
.wa-my__ft p span{ margin-right:16px; }
.wa-my__ft p i{ color:#9AA5B6; margin-right:4px; }
.wa-my__note{ margin-top:6px !important; color:var(--navy-900) !important; }

.wa-my__help{ margin:8px 0 0; font-size:13.5px; line-height:1.7; color:#6B7688; }
.wa-my__empty{
  padding:56px 20px; text-align:center; border:1px dashed var(--line); border-radius:var(--r-lg); background:#fff;
}
.wa-my__empty i{ font-size:38px; color:#C5CEDB; }
.wa-my__empty p{ margin:14px 0 0; font-size:15px; line-height:1.75; color:#6B7688; }
.wa-my__acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }

@media (max-width:760px){
  .wa-my__hd{ padding:18px; }
  .wa-my__list{ grid-template-columns:1fr 1fr; }
  .wa-my__list li{ border-bottom:1px solid var(--line); }
  .wa-my__list li:nth-child(2n){ border-right:0; }
  .wa-my__list li:nth-child(n+3){ border-bottom:0; }
  .wa-my__ft{ padding:14px 18px; }
}

/* 가격안내 — 세 가지 상품 ------------------------------------------------ */
.wa-pz-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wa-pz-card{
  display:flex; flex-direction:column; gap:8px; padding:24px 22px 20px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  color:var(--navy-900); text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s;
}
.wa-pz-card:hover{ border-color:var(--blue-600, #1A63E0); box-shadow:var(--sh-2); transform:translateY(-2px); }
.wa-pz-card__eyebrow{ font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--blue-600, #1A63E0); }
.wa-pz-card__n{ font-size:20px; font-weight:800; letter-spacing:-.02em; }
.wa-pz-card__p{ font-size:15px; color:#6B7688; }
.wa-pz-card__p b{ font-size:30px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em; }
.wa-pz-card__p s{ color:#A7B0BE; margin-right:2px; }
.wa-pz-card__d{ font-size:14px; line-height:1.65; color:#55627A; flex:1; }
.wa-pz-card__go{ margin-top:6px; font-size:13px; font-weight:700; color:var(--blue-600, #1A63E0); }
@media (prefers-reduced-motion:reduce){ .wa-pz-card{ transition:none; } .wa-pz-card:hover{ transform:none; } }

.wa-pz-which{ margin-top:22px; padding:22px 24px; border-radius:var(--r-lg); background:#F4F7FC; }
.wa-pz-which h2{ margin:0 0 10px; font-size:17px; font-weight:800; color:var(--navy-900); }
.wa-pz-which ul{ margin:0; padding-left:18px; display:grid; gap:6px; }
.wa-pz-which li{ font-size:14.5px; line-height:1.7; color:#55627A; }
.wa-pz-which li b{ color:var(--navy-900); }
.wa-pz-which li em{ font-style:normal; color:var(--navy-900); font-weight:600; }

.wa-pz-sec{ margin-top:72px; scroll-margin-top:90px; }
.wa-pz-sec__hd{ display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; padding-bottom:18px; border-bottom:2px solid var(--navy-900); }
.wa-pz-sec__no{ flex:none; font-size:14px; font-weight:800; color:var(--blue-600, #1A63E0); padding-top:8px; letter-spacing:.04em; }
.wa-pz-sec__hd h2{ margin:0 0 4px; font-size:28px; font-weight:800; color:var(--navy-900); letter-spacing:-.02em; }
.wa-pz-sec__hd p{ margin:0; font-size:15px; line-height:1.7; color:#55627A; max-width:70ch; }
.wa-pz-h3{ margin:44px 0 16px; font-size:19px; font-weight:800; color:var(--navy-900); letter-spacing:-.01em; }
.wa-pz-inout{ margin-top:22px; }
.wa-pz-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.wa-opt a{ color:var(--blue-600, #1A63E0); text-decoration:none; }

@media (max-width:860px){
  .wa-pz-pick{ grid-template-columns:1fr; }
  .wa-pz-sec__hd h2{ font-size:23px; }
}

/* 템플릿 갤러리 (template.php 상단) ------------------------------------- */
#container:has(.wa-tg) > #container_title{ display:none; }
.wa-tg__hero{ max-width:760px; margin:0 auto; padding:20px 0 26px; text-align:center; }
.wa-tg__hero h1{ margin:0; font-size:36px; line-height:1.35; font-weight:800; letter-spacing:-.03em; color:var(--navy-900); }
.wa-tg__hero h1 span{ display:block; text-wrap:balance; }
.wa-tg__hero h1 span + span{ margin-top:4px; }
.wa-tg__hero p{ margin:14px auto 0; max-width:52ch; font-size:16px; line-height:1.7; color:#6B7688; }
.wa-tg__hero p b{ color:var(--navy-900); font-weight:700; }

/* 얼마 · 며칠 · 무엇이 포함 — 세 칸으로 나눠 한눈에 (2026-09) */
.wa-tg__facts{ display:flex; justify-content:center; gap:0; margin:22px auto 0; padding:0; list-style:none; }
.wa-tg__facts li{ flex:1 1 0; max-width:220px; padding:0 18px; border-left:1px solid var(--line); }
.wa-tg__facts li:first-child{ border-left:0; }
.wa-tg__facts b{ display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--navy-900); }
.wa-tg__facts span{ display:block; margin-top:4px; font-size:13px; line-height:1.5; color:#6B7688; }

.wa-tg__price{ display:inline-block; margin-top:18px; padding:8px 16px; border-radius:999px; background:#F1F4F9; font-size:13px; color:#55627A; }
.wa-tg__price s{ color:#A7B0BE; }
.wa-tg__price b{ margin:0 4px; font-size:15px; font-weight:800; color:var(--navy-900); }

.wa-tg__filter{
  position:sticky; top:76px; z-index:20; margin:0 calc(var(--gut) * -1) 8px; padding:18px var(--gut);
  background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
}
.wa-tg__tabs{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.wa-tg__tabs::-webkit-scrollbar{ display:none; }
.wa-tg__tab{
  flex:0 0 auto; height:46px; min-width:68px; padding:0 20px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:#2A3442; font:700 15px/1 inherit; font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .2s, color .2s, border-color .2s;
}
.wa-tg__tab:hover:not(.is-on){ background:rgba(0,0,0,.035); }
.wa-tg__tab.is-on{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; }
.wa-tg__tab:focus-visible,
.wa-tg__btn:focus-visible,
.wa-tg__morebtn:focus-visible{ outline:2px solid var(--blue-600, #1A63E0); outline-offset:2px; }

/* 검색 · 개수 · 접히는 업종 (2026-09) */
.wa-tg__search{ position:relative; max-width:520px; margin:0 auto 14px; }
.wa-tg__search input{
  width:100%; height:52px; padding:0 46px 0 46px; box-sizing:border-box;
  border:1px solid var(--line); border-radius:999px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7688' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px 50% / 20px 20px;
  font:500 15px/1 inherit; font-family:inherit; color:#2A3442;
}
.wa-tg__search input::placeholder{ color:#97A1B0; }
.wa-tg__search input:focus{ outline:none; border-color:var(--navy-900); }
.wa-tg__search input::-webkit-search-cancel-button{ display:none; }
.wa-tg__qclear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; padding:0;
  border:0; border-radius:50%; background:transparent; color:#6B7688; font-size:14px; cursor:pointer;
}
.wa-tg__qclear:hover{ background:rgba(0,0,0,.05); }
.wa-tg__qclear[hidden]{ display:none; }

.wa-tg__tab em{ margin-left:6px; font-style:normal; font-weight:600; font-size:13px; color:#8A94A4; }
.wa-tg__tab.is-on em{ color:rgba(255,255,255,.72); }
.wa-tg__tab.is-extra{ display:none; }
.wa-tg__tabmore{
  flex:0 0 auto; height:46px; padding:0 18px; border:1px dashed var(--line); border-radius:999px;
  background:transparent; color:#6B7688; font:600 14px/1 inherit; font-family:inherit; cursor:pointer;
}
.wa-tg__tabmore:hover{ border-color:var(--navy-900); color:var(--navy-900); }
.wa-tg__tabmore[hidden]{ display:none; }
.wa-tg__tabmore em{ margin-left:4px; font-style:normal; font-weight:700; }

.wa-tg__result{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 10px;
  margin:12px 0 0; font-size:14px; color:#6B7688;
}
.wa-tg__reset{ padding:5px 12px; border:0; border-radius:999px; background:transparent; color:#6B7688;
  font:600 14px/1 inherit; font-family:inherit; cursor:pointer; text-decoration:underline; }
.wa-tg__reset:hover{ color:var(--navy-900); }
.wa-tg__reset[hidden]{ display:none; }

.wa-tg__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 24px; }
.wa-tg__card[hidden]{ display:none; }
.wa-tg__thumb{
  position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  margin-bottom:16px; padding:20px; border-radius:16px; background:#F3F5F8;
}
.wa-tg__thumb img{
  display:block; width:100%; max-width:375px; height:auto; aspect-ratio:375 / 426; object-fit:cover; object-position:top;
  border-radius:6px; box-shadow:0 10px 30px -12px rgba(18,36,61,.28);
  transition:transform .4s ease;
}
.wa-tg__cover{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,20,34,.55), rgba(10,20,34,0) 55%); opacity:0; transition:opacity .3s ease; }
.wa-tg__acts{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; display:flex; gap:10px;
  opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.wa-tg__btn{
  flex:1 1 0; min-width:0; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 18px; border-radius:999px; background:#fff; color:var(--navy-900);
  font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .2s;
}
.wa-tg__btn:hover{ background:#EEF1F5; }
.wa-tg__btn.is-pick{ background:var(--blue-600, #1A63E0); color:#fff; }
.wa-tg__btn.is-pick:hover{ background:#1553C0; }
.wa-tg__card:hover .wa-tg__cover,
.wa-tg__card:focus-within .wa-tg__cover{ opacity:1; }
.wa-tg__card:hover .wa-tg__acts,
.wa-tg__card:focus-within .wa-tg__acts{ opacity:1; transform:none; pointer-events:auto; }
.wa-tg__card:hover .wa-tg__thumb img{ transform:translateY(-4px); }

.wa-tg__cate{ display:block; font-size:14px; font-weight:500; line-height:1; color:#55627A; }
.wa-tg__name{ margin:6px 0 8px; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--navy-900); }
.wa-tg__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.wa-tg__tags span{ padding:2px 8px; border-radius:4px; background:#F2F4F7; font-size:12px; color:#6F7A89; }

.wa-tg__none{ margin:30px 0 0; padding:40px 20px; text-align:center; border:1px dashed var(--line); border-radius:16px; color:#6B7688; }
.wa-tg__more{ margin-top:40px; text-align:center; }
.wa-tg__more[hidden]{ display:none; }
.wa-tg__morebtn{ min-width:140px; height:50px; padding:0 26px; border:1px solid var(--line); border-radius:999px; background:#fff;
  color:var(--navy-900); font-family:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wa-tg__morebtn:hover{ border-color:var(--navy-900); }

/* 터치 기기: 마우스 오버가 없으니 버튼을 늘 보여 준다 */
@media (hover:none){
  .wa-tg__acts{ position:static; opacity:1; transform:none; pointer-events:auto; margin-top:14px; }
  .wa-tg__thumb{ flex-direction:column; }
  .wa-tg__btn{ min-height:44px; font-size:14px; background:#fff; border:1px solid var(--line); }
  .wa-tg__cover{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .wa-tg__thumb img, .wa-tg__cover, .wa-tg__acts, .wa-tg__tab{ transition:none; }
  .wa-tg__card:hover .wa-tg__thumb img{ transform:none; }
}
@media (max-width:1100px){ .wa-tg__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } .wa-tg__tabs{ justify-content:flex-start; } }
@media (max-width:760px){
  .wa-tg__hero{ padding-top:4px; }
  .wa-tg__hero h1{ font-size:26px; }
  .wa-tg__hero p{ font-size:15px; }
  .wa-tg__facts{ gap:0; margin-top:18px; }
  .wa-tg__facts li{ padding:0 8px; }
  .wa-tg__facts b{ font-size:17px; }
  .wa-tg__facts span{ font-size:11.5px; }
  .wa-tg__filter{ top:64px; padding-block:12px; }
  .wa-tg__search{ margin-bottom:10px; }
  .wa-tg__search input{ height:46px; font-size:14px; }
  .wa-tg__tabs{ gap:6px; }
  .wa-tg__tab{ height:40px; min-width:0; padding:0 14px; font-size:14px; }
  .wa-tg__tabmore{ height:40px; padding:0 14px; font-size:13px; }
  .wa-tg__grid{ grid-template-columns:1fr; gap:32px; }
  .wa-tg__name{ font-size:18px; }
  .wa-tg__cate{ font-size:12px; }
}

/* -------- 마스터 태그라인 노출 -------- */
.wa-hero__kicker{
  display:inline-block; margin:0 0 12px;
  padding:6px 14px; border-radius:999px;
  background:rgba(46,123,255,.14); color:#8FC0FF;
  font-size:13px; font-weight:600; letter-spacing:.02em;
}
.wa-tagline{
  margin:8px 0 14px; font-size:15px; font-weight:700; letter-spacing:.01em;
  color:var(--navy-900);
}
.wa-sec--navy .wa-tagline{ color:#B4E56E; }
.wa-ft__slogan strong{
  display:block; font-size:15px; font-weight:700; color:#fff; margin-bottom:6px;
  letter-spacing:.01em;
}

/* -------- QR 모달 (template_preview.php) -------- */
.wa-qr{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.wa-qr[hidden]{ display:none; }
.wa-qr__bg{ position:absolute; inset:0; background:rgba(11,27,52,.72); backdrop-filter:blur(4px); }
.wa-qr__panel{ position:relative; z-index:1; max-width:340px; width:100%; padding:32px 28px 28px;
  background:#fff; border-radius:20px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.wa-qr__close{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:50%;
  background:transparent; border:0; font-size:18px; color:#6b7280; cursor:pointer; }
.wa-qr__close:hover{ background:#f3f4f6; color:#111; }
.wa-qr__eyebrow{ margin:0 0 4px; font-size:11px; letter-spacing:.25em; color:#2E7BFF; font-weight:700; }
.wa-qr__t{ margin:0 0 8px; font-size:20px; font-weight:800; letter-spacing:-.03em; color:#0B1B34; }
.wa-qr__d{ margin:0 0 20px; font-size:13px; color:#4b5563; line-height:1.55; }
.wa-qr__code{ display:flex; justify-content:center; margin:0 auto 16px; padding:14px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; }
.wa-qr__code svg{ width:200px; height:200px; display:block; }
.wa-qr__url{ margin:0 0 16px; padding:10px 14px; font-size:11.5px; color:#374151; background:#f7f8fa; border-radius:10px; word-break:break-all; line-height:1.45; font-family:'SFMono-Regular',ui-monospace,Menlo,monospace; }

/* ============================================================ 템플릿 상세 — 포함 게시판 */
.wa-bkd{ margin:70px 0 0; }
.wa-bkd__lead{ margin:10px 0 0; color:#5B6B80; font-size:15px; line-height:1.7; }
.wa-bkd__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:26px 0 0; }
.wa-bkd__card{ padding:22px; border:1px solid #E4E9F0; border-radius:14px; background:#fff; }
.wa-bkd__top{ display:flex; align-items:center; gap:10px; }
.wa-bkd__ico{ display:flex; align-items:center; justify-content:center; width:38px; height:38px;
              border-radius:10px; background:#F2F6FB; font-size:18px; }
.wa-bkd__top strong{ font-size:17px; font-weight:700; color:#16243A; }
.wa-bkd__demo{ margin-left:auto; flex:0 0 auto; font-size:12px; font-weight:600; color:#2F6BE5; text-decoration:none; }
.wa-bkd__demo:hover{ text-decoration:underline; }
.wa-bkd__desc{ margin:12px 0 0; font-size:14px; line-height:1.7; color:#5B6B80; word-break:keep-all; }
.wa-bkd__feats{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0; padding:0; list-style:none; }
.wa-bkd__feats li{ padding:4px 10px; border-radius:999px; background:#F2F6FB; color:#3C4D66; font-size:12px; }
.wa-bkd__note{ margin:18px 0 0; font-size:13px; color:#8FA5C4; }

@media (max-width:860px){
  .wa-bkd{ margin-top:52px; }
  .wa-bkd__grid{ grid-template-columns:1fr; }
}

/* ============================================================ 템플릿 목록 — 공통 특징 배지 */
.wa-tf{ margin:0 0 34px; padding:26px 28px; border:1px solid #E4E9F0; border-radius:16px;
        background:linear-gradient(180deg,#FBFCFE 0%,#fff 100%); }
.wa-tf__eyebrow{ margin:0 0 8px; font-size:12px; font-weight:800; letter-spacing:.08em;
                 color:#2F6BE5; text-transform:uppercase; }
.wa-tf__h{ margin:0; font-size:26px; font-weight:800; color:#16243A; letter-spacing:-.02em; line-height:1.4;
           word-break:keep-all; }
.wa-tf__h b{ position:relative; z-index:0; font-weight:800; color:#16243A; white-space:nowrap; }
.wa-tf__h b::after{ content:''; position:absolute; left:-2px; right:-2px; bottom:2px; height:38%;
                    background:#CFE6FF; border-radius:2px; z-index:-1; }
.wa-tf__lead{ margin:12px 0 0; font-size:15px; line-height:1.7; color:#5B6B80; word-break:keep-all; }
.wa-tf__lead b{ color:#16243A; font-weight:700; }
/* 공통 특징 — 작은 아이콘을 가로 한 줄로. 설명은 마우스를 올리면(title) 보이고 화면낭독기에는 읽힌다 */
.wa-tf__row{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:20px 0 0; padding:0; list-style:none; }
.wa-tf__chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px;
              border:1px solid #E4EBF4; border-radius:999px; background:#fff; cursor:default;
              transition:border-color .15s ease, background .15s ease; }
.wa-tf__chip:hover{ border-color:#CFE0F7; background:#F7FAFE; }
.wa-tf__ico{ display:flex; align-items:center; justify-content:center; width:28px; height:28px;
             border-radius:50%; background:#F2F6FB; font-size:14px; line-height:1; }
.wa-tf__chip b{ font-size:13.5px; font-weight:700; color:#16243A; letter-spacing:-.01em; white-space:nowrap; }

@media (max-width:760px){
  .wa-tf{ padding:20px 18px; }
  .wa-tf__h{ font-size:20px; }
  .wa-tf__lead{ font-size:14px; }
  .wa-tf__row{ gap:6px; }
  .wa-tf__chip{ padding:5px 11px 5px 5px; }
  .wa-tf__chip b{ font-size:12.5px; }
  .wa-tf__ico{ width:24px; height:24px; font-size:12px; }
}
}

/* ---------------------------------------------------------------- 기본 포함 목록
   "필수 기능은 기본 장착" 을 눈으로 보여 주는 자리.
   항목이 많아야 설득력이 생기므로 촘촘한 격자로 한 화면에 담는다. */
.wa-incl__h{
  margin:44px 0 16px; text-align:center;
  font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
.wa-incl{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
  gap:10px 22px; margin:0; padding:0; list-style:none;
}
.wa-incl > li{
  display:grid; grid-template-columns:auto 1fr; gap:9px; align-items:start;
  font-size:14.5px; line-height:1.6; color:var(--ink);
}
.wa-incl > li > i{ color:var(--blue-500); font-size:13px; padding-top:4px; }
.wa-incl em{
  display:block; font-style:normal; font-size:12.5px; line-height:1.5;
  color:var(--muted); margin-top:1px;
}
.wa-incl__note{
  margin:18px 0 0; font-size:13.5px; line-height:1.7; color:var(--muted);
}
.wa-incl__note i{ margin-right:5px; }

/* 주문제작 기준가 */
.wa-pz-basis{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  padding:22px 24px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-soft); margin:0 0 8px;
}
.wa-pz-basis__p{ margin:0; font-size:17px; font-weight:700; color:var(--ink); white-space:nowrap; }
.wa-pz-basis__p b{ font-size:30px; font-weight:800; letter-spacing:-.04em; color:var(--blue-600); }
.wa-pz-basis__d{ margin:0; flex:1 1 300px; font-size:14px; line-height:1.72; color:var(--body); }

@media (max-width:640px){
  .wa-incl{ grid-template-columns:1fr; gap:9px; }
  .wa-pz-basis{ padding:18px 18px; }
  .wa-pz-basis__p b{ font-size:26px; }
}

/* ---------------------------------------------------------------- AI · 검색 진단 (check.php)
   점수를 보여 주는 화면이라 "무엇이 문제인지" 가 한눈에 읽혀야 한다.
   상태는 색만으로 구분하지 않고 글자(좋음 · 보완 · 없음)를 함께 둔다. */
.wa-ck{ margin-bottom:70px; }

/* 입력 */
.wa-ck__form{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--bg-soft);
}
.wa-ck__form input[type=text]{
  flex:1 1 320px; min-width:0; height:52px; padding:0 16px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  font-size:16px; font-family:inherit; color:var(--ink);
}
.wa-ck__form input[type=text]:focus{ outline:2px solid var(--blue-500); outline-offset:1px; border-color:transparent; }
.wa-ck__form .wa-btn{ height:52px; padding:0 30px; display:inline-flex; align-items:center; }
.wa-ck__hint{ margin:12px 2px 0; font-size:13.5px; color:var(--muted); }

.wa-ck__err{
  margin:22px 0 0; padding:16px 18px; border-radius:10px;
  background:#FDECEC; border:1px solid #F3C9C9; color:#9B2C2C; font-size:14.5px;
}
.wa-ck__err i{ margin-right:7px; }

/* 처음 화면 */
.wa-ck__intro{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px;
}
.wa-ck__intro > div{ padding:24px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.wa-ck__ik{
  margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--blue-600);
}
.wa-ck__it{ margin:8px 0 0; font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.wa-ck__id{ margin:9px 0 0; font-size:13.5px; line-height:1.7; color:var(--body); }

/* 결과 머리 */
.wa-ck__head{ margin:40px 0 20px; }
.wa-ck__target{
  margin:0; font-size:13px; color:var(--muted); word-break:break-all;
  font-family:Consolas,'D2Coding',monospace;
}
.wa-ck__verdict{ margin:6px 0 0; font-size:28px; font-weight:800; letter-spacing:-.04em; color:var(--ink); }

/* 점수 카드 */
.wa-ck__scores{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wa-ck__score{ padding:22px 22px 20px; border:1px solid var(--line); border-radius:13px; background:#fff; }
.wa-ck__score-n{ margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--muted); }
.wa-ck__score-v{ margin:4px 0 0; font-size:42px; font-weight:800; line-height:1; letter-spacing:-.05em; color:var(--ink); }
.wa-ck__score-v small{ font-size:15px; font-weight:700; margin-left:3px; color:var(--muted); }
.wa-ck__bar{ margin:12px 0 0; height:6px; border-radius:99px; background:var(--bg-soft); overflow:hidden; }
.wa-ck__bar > span{ display:block; height:100%; border-radius:99px; background:var(--blue-500); }
.wa-ck__score.is-ok   .wa-ck__bar > span{ background:#12805C; }
.wa-ck__score.is-warn .wa-ck__bar > span{ background:#B7791F; }
.wa-ck__score.is-bad  .wa-ck__bar > span{ background:#C53030; }
.wa-ck__score-f{ margin:13px 0 0; font-size:14px; font-weight:700; color:var(--ink); }
.wa-ck__score-d{ margin:5px 0 0; font-size:13px; line-height:1.65; color:var(--body); }

/* 항목 묶음 */
.wa-ck__group{ margin-top:38px; }
.wa-ck__gh{
  margin:0 0 14px; font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.wa-ck__gh > span{
  font-size:11.5px; font-weight:800; letter-spacing:.1em; color:var(--blue-600);
  background:var(--blue-050,#EAF2FF); padding:4px 9px; border-radius:5px;
}
.wa-ck__lead{ margin:0 0 16px; font-size:14px; line-height:1.72; color:var(--body); }

.wa-ck__items{ margin:0; padding:0; list-style:none; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.wa-ck__items > li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  background:#fff; padding:15px 18px;
}
.wa-ck__flag{
  min-width:40px; text-align:center; font-size:11.5px; font-weight:800;
  padding:3px 8px; border-radius:5px; white-space:nowrap; margin-top:2px;
}
.wa-ck__items > li.is-ok   .wa-ck__flag{ background:#E3F4EE; color:#12805C; }
.wa-ck__items > li.is-warn .wa-ck__flag{ background:#FBF0DC; color:#8A5B08; }
.wa-ck__items > li.is-bad  .wa-ck__flag{ background:#FDECEC; color:#B32B2B; }
.wa-ck__il{ margin:0; font-size:14.5px; font-weight:700; color:var(--ink); }
.wa-ck__il em{ font-style:normal; font-size:12.5px; font-weight:600; color:var(--muted); margin-left:6px; }
.wa-ck__in{ margin:3px 0 0; font-size:13.5px; line-height:1.6; color:var(--body); }
.wa-ck__if{ margin:6px 0 0; font-size:13px; line-height:1.65; color:var(--muted); padding-left:11px; border-left:2px solid var(--line); }

/* 검색 결과 미리보기 */
.wa-ck__serps{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wa-serp{ padding:20px 22px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.wa-serp__badge{
  margin:0 0 12px; display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em;
  color:#fff; background:#4285F4; padding:3px 8px; border-radius:4px;
}
.wa-serp__badge--n{ background:#03C75A; }
.wa-serp__crumb{ margin:0; font-size:12.5px; color:#5F6368; word-break:break-all; }
.wa-serp__title{
  margin:4px 0 3px; font-size:19px; line-height:1.35; color:#1a0dab; letter-spacing:-.02em;
  word-break:break-all;
}
.wa-serp__desc{ margin:0; font-size:13.5px; line-height:1.62; color:#4D5156; }
.wa-serp__desc.is-missing{ color:#B32B2B; font-style:italic; }
.wa-serp__warn{ margin:10px 0 0; font-size:12.5px; color:var(--muted); }

/* AI 가 아는 사실 */
.wa-ck__facts{
  margin:0; display:grid; grid-template-columns:auto 1fr; gap:1px 0;
  background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden;
}
.wa-ck__facts dt{
  background:var(--bg-soft); padding:12px 16px; font-size:13px; font-weight:700; color:var(--ink);
  white-space:nowrap;
}
.wa-ck__facts dd{ background:#fff; margin:0; padding:12px 16px; font-size:14px; line-height:1.6; color:var(--body); }
.wa-ck__empty{
  margin:0; padding:22px 24px; border:1px solid #F3C9C9; border-radius:11px;
  background:#FDECEC; color:#7A2222; font-size:14.5px; line-height:1.75;
}

/* 광고 미리보기 */
.wa-ck__adform{ display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-bottom:18px; }
.wa-ck__adform label{ display:flex; flex-direction:column; gap:5px; font-size:12.5px; font-weight:700; color:var(--ink); flex:1 1 200px; }
.wa-ck__adform input{
  height:42px; padding:0 12px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; font-family:inherit; color:var(--ink); background:#fff; min-width:0;
}
.wa-ck__adform input:focus{ outline:2px solid var(--blue-500); outline-offset:1px; border-color:transparent; }
.wa-ad{ padding:20px 22px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.wa-ad__tag{
  margin:0 0 7px; display:inline-block; font-size:11.5px; font-weight:800; color:var(--ink);
  border:1px solid var(--ink); border-radius:3px; padding:0 5px;
}
.wa-ad__url{ margin:0; font-size:12.5px; color:#202124; word-break:break-all; }
.wa-ad__h{ margin:3px 0 4px; font-size:19px; line-height:1.35; color:#1a0dab; letter-spacing:-.02em; }
.wa-ad__sep{ color:#70757a; }
.wa-ad__d{ margin:0; font-size:13.5px; line-height:1.62; color:#4D5156; }
.wa-ck__adlen{ margin:12px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; }
.wa-ck__adlen > li.is-ok{ color:var(--muted); }
.wa-ck__adlen > li.is-over{ color:#B32B2B; font-weight:700; }

/* 상담 */
.wa-ck__cta{
  margin-top:44px; padding:38px 30px; text-align:center;
  border:1px solid var(--line); border-radius:14px; background:var(--bg-soft);
}
.wa-ck__cta h3{ margin:0 0 10px; font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.wa-ck__cta p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--body); }
.wa-ck__cta-btns{ margin-top:22px !important; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

@media (max-width:860px){
  .wa-ck__intro,
  .wa-ck__scores{ grid-template-columns:1fr; }
  .wa-ck__serps{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .wa-ck__items > li{ grid-template-columns:1fr; gap:8px; }
  .wa-ck__facts{ grid-template-columns:1fr; }
  .wa-ck__facts dt{ white-space:normal; }
  .wa-ck__verdict{ font-size:23px; }
}

/* ---------------------------------------------------------------- 헤더 로그인 · 회원가입
   전화번호와 무료견적 사이에 들어가므로 둘 다보다 조용해야 한다.
   글자만 두되 회원가입에는 옅은 테두리를 줘 둘을 구분한다. */
.wa-hd__auth{
  display:inline-flex; align-items:center; height:32px; padding:0 10px;
  font-size:13px; font-weight:600; color:var(--muted); white-space:nowrap;
  border-radius:6px; transition:color .15s ease, background-color .15s ease;
}
.wa-hd__auth:hover{ color:var(--ink); background:var(--bg-soft); text-decoration:none; }
.wa-hd__auth--join{ border:1px solid var(--line); color:var(--body); }
.wa-hd__auth--join:hover{ border-color:var(--ink); color:var(--ink); background:transparent; }

@media (max-width:1100px){
  /* 좁아지면 헤더가 빡빡해진다 — 로그인 계열은 드로어(전체메뉴)에 이미 있으므로 감춘다 */
  .wa-hd__auth{ display:none; }
}

/* ---------------------------------------------------------------- 마이페이지 — 빠른 실행 · 진행률 */
.wa-my__h2{
  margin:40px 0 14px; font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
.wa-my__h2:first-of-type{ margin-top:34px; }

.wa-my__quick{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0 0 6px;
}
.wa-my__q{
  display:flex; flex-direction:column; gap:5px;
  padding:22px 22px 20px; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wa-my__q:hover{
  border-color:var(--blue-500); transform:translateY(-2px); text-decoration:none;
  box-shadow:0 10px 26px -18px rgba(16,32,58,.5);
}
.wa-my__q > i{ font-size:19px; color:var(--blue-600); margin-bottom:5px; }
.wa-my__q > b{ font-size:15.5px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.wa-my__q > span{ font-size:13px; line-height:1.6; color:var(--body); }

/* 진행률 */
.wa-my__pg{ margin:0; }
.wa-my__pglist{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.wa-my__pglist > li{
  padding:20px 22px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.wa-my__pgtop{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.wa-my__pgtop > a{
  min-width:0; font-size:15px; font-weight:700; letter-spacing:-.03em; color:var(--ink);
}
.wa-my__pgtop > a:hover{ color:var(--blue-600); }
.wa-my__pgtop > b{
  flex:none; font-size:17px; font-weight:800; color:var(--blue-600);
  font-variant-numeric:tabular-nums;
}
.wa-my__pgtop > b.is-done{ color:#0C6B51; }
.wa-my__pgbar{
  margin:11px 0 0; height:8px; border-radius:99px; background:var(--bg-soft); overflow:hidden;
}
.wa-my__pgbar > span{
  display:block; height:100%; border-radius:99px; background:var(--blue-500); transition:width .5s ease;
}
.wa-my__pgbar > span.is-done{ background:#12805C; }
.wa-my__pgmeta{
  margin:11px 0 0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; color:var(--body);
}
.wa-my__pgmeta > span:not(:last-child)::after{ content:''; }
.wa-my__pgscope{ margin:6px 0 0; font-size:12.5px; color:var(--muted); }
.wa-my__pgnone{
  margin:0; padding:30px 24px; border:1px dashed var(--line); border-radius:12px;
  background:var(--bg-soft); font-size:14px; line-height:1.75; color:var(--body); text-align:center;
}
.wa-my__pgnone a{ color:var(--blue-600); text-decoration:underline; margin-left:4px; }

@media (max-width:760px){
  .wa-my__quick{ grid-template-columns:1fr; }
  .wa-my__pgtop{ flex-wrap:wrap; gap:4px; }
}

/* ---------------------------------------------------------------- 비밀번호 확인 화면
   코어 bbs/password.php 가 head.sub.php 만 불러 상단 메뉴도 푸터도 없는 화면이다.
   그래서 로고와 돌아가는 길을 스킨 안에 두고, 게시판 스킨과 같은 톤으로 맞춘다.
   회원 스킨 style.css 의 .mbskin(폭 360px 고정 등)을 눌러야 해서 깊이를 맞춘다. */
.mbskin.wa-pw{
  width:100%; max-width:440px; margin:70px auto 90px; padding:0 20px; text-align:left;
}
.wa-pw__box{
  padding:36px 34px 30px; border:1px solid var(--line); border-radius:14px; background:#fff;
  box-shadow:0 18px 40px -30px rgba(16,32,58,.45);
}
.wa-pw__logo{ display:inline-block; margin:0 0 22px; }
.wa-pw__logo img{ height:26px; width:auto; display:block; }
/* 회원 스킨의 .mbskin h1 (0,1,1) 이 .wa-pw__t (0,1,0) 를 이긴다 — 깊이를 맞춘다 */
.mbskin.wa-pw .wa-pw__t{
  margin:0 0 10px; font-size:21px; font-weight:800; line-height:1.45;
  letter-spacing:-.035em; color:var(--ink); text-align:left;
}
.wa-pw__d{
  margin:0 0 22px; font-size:14px; line-height:1.75; color:var(--body);
}
.wa-pw__d b{ display:block; margin-bottom:3px; font-weight:700; color:var(--ink); }

.mbskin.wa-pw fieldset{ margin:0; padding:0; border:0; }
.mbskin.wa-pw .wa-pw__input{
  width:100%; height:48px; margin:0; padding:0 15px;
  border:1px solid var(--line); border-radius:8px; background:#fff;
  font-size:15px; font-family:inherit; color:var(--ink);
}
.mbskin.wa-pw .wa-pw__input:focus{ outline:2px solid var(--blue-500); outline-offset:-2px; border-color:transparent; }
.mbskin.wa-pw .wa-pw__submit{
  width:100%; height:48px; margin:10px 0 0; cursor:pointer;
  border:1px solid var(--ink); border-radius:8px; background:var(--ink); color:#fff;
  font-size:15px; font-weight:700; font-family:inherit; letter-spacing:-.02em;
  transition:background-color .15s ease;
}
.mbskin.wa-pw .wa-pw__submit:hover{ background:#000; }

.wa-pw__back{ margin:20px 0 0; text-align:center; }
.wa-pw__back a{ font-size:13.5px; color:var(--muted); }
.wa-pw__back a:hover{ color:var(--ink); text-decoration:underline; }

@media (max-width:560px){
  .mbskin.wa-pw{ margin:40px auto 60px; }
  .wa-pw__box{ padding:28px 22px 24px; }
}

/* ---------------------------------------------------------------- 문제 제기 — AI 답변 예시
   견적서(.wa-bill)를 대신한다. 숫자를 들이미는 대신 "AI 답변에 내가 없다" 는
   장면을 그대로 보여 준다. 말로 설명하는 것보다 한 번 보는 쪽이 빠르다. */
.wa-ask{
  border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;
  box-shadow:0 18px 44px -32px rgba(16,32,58,.5);
}
.wa-ask__bar{
  display:flex; align-items:center; gap:7px;
  padding:12px 18px; border-bottom:1px solid var(--line);
  background:var(--bg-soft);
  font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted);
}
.wa-ask__bar i{ color:var(--blue-500); }

/* 사람이 던진 질문 — 말풍선 */
.wa-ask__q{
  margin:18px 18px 0; margin-left:auto; max-width:82%; width:fit-content;
  padding:11px 16px; border-radius:16px 16px 4px 16px;
  background:var(--blue-500); color:#fff;
  font-size:14px; line-height:1.6; letter-spacing:-.02em;
}

/* AI 답변 */
.wa-ask__a{ padding:16px 18px 4px; }
.wa-ask__intro{ margin:0 0 10px; font-size:14px; line-height:1.7; color:var(--body); }
.wa-ask__list{ margin:0; padding:0 0 0 20px; display:grid; gap:9px; }
.wa-ask__list > li{ font-size:14px; line-height:1.55; color:var(--ink); }
.wa-ask__list > li::marker{ color:var(--muted); font-weight:700; }
.wa-ask__list b{ font-weight:700; }
.wa-ask__list span{ display:block; margin-top:2px; font-size:12.5px; color:var(--muted); }
.wa-ask__cut{
  margin:12px 0 0; font-size:16px; letter-spacing:.24em; color:var(--line);
}

/* 한 방 */
.wa-ask__punch{
  margin:6px 18px 0; padding:18px 0 0; border-top:1px dashed var(--line);
  font-size:15px; line-height:1.72; color:var(--body);
}
.wa-ask__punch b{ font-weight:800; color:var(--ink); }
.wa-ask__punch em{
  font-style:normal; font-weight:800; color:#C53030;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;
}

.wa-ask__cta{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:16px 0 0; padding:15px 18px; border-top:1px solid var(--line);
  background:var(--bg-soft);
  font-size:13.5px; font-weight:700; color:var(--blue-600);
  transition:background-color .15s ease;
}
.wa-ask__cta:hover{ background:var(--blue-050,#EAF2FF); text-decoration:none; }

@media (max-width:860px){
  .wa-ask__q{ max-width:90%; }
}

/* 세트 구성의 마지막 칸 — 'AI · 검색 노출'. 이 섹션이 하려는 말의 결론이라 표를 준다 */
.wa-set--key{
  border-color:var(--blue-500) !important;
  box-shadow:0 14px 34px -26px rgba(46,123,255,.85);
}
.wa-set--key .wa-card__ico{ background:var(--blue-500); color:#fff; }
.wa-set--key .wa-card__t::after{
  content:'핵심'; display:inline-block; margin-left:7px; padding:2px 8px;
  border-radius:99px; background:var(--blue-050,#EAF2FF); color:var(--blue-600);
  font-size:11px; font-weight:800; letter-spacing:0; vertical-align:2px;
}

/* 히어로 배경의 움직이는 빛 — 캔버스는 절반 크기로 그리고 여기서 늘린다.
   blur 를 CSS 로 넘겨야 GPU 가 처리한다(캔버스 안에서 blur 하면 CPU 가 탄다). */
.wa-hero__aurora{
  position:absolute; inset:-8%;
  width:116%; height:116%;
  z-index:0; pointer-events:none;
  filter:blur(58px) saturate(1.15);
  /* 등장은 CSS 애니메이션이 아니라 JS 가 클래스를 붙여 처리한다.
     애니메이션에 opacity 를 맡기면 탭이 뒤에 있을 때 0 에서 멈춰 버린다. */
  opacity:0;
  transition:opacity .9s ease-out;
}
.wa-hero__aurora.is-on{ opacity:.9; }

/* 정적 그라디언트(:before)는 캔버스 위에 옅게 남겨 색을 잡아 준다 */
.wa-hero:before{ z-index:1; }
.wa-hero:after{ z-index:1; }

@media (prefers-reduced-motion: reduce){
  .wa-hero__aurora{ display:none; }
}
@media (max-width:860px){
  .wa-hero__aurora{ display:none; }
}

/* ---------------------------------------------------------------- 메인 진행상황
   "맡기면 어디까지 왔는지 알 수 있다" 를 보여 주는 자리.
   카드마다 진행률 막대를 둬서 글을 읽지 않아도 상태가 읽히게 한다. */
.wa-live{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px; margin:0; padding:0; list-style:none;
}
.wa-live > li > a{
  display:flex; flex-direction:column; gap:9px; height:100%;
  padding:22px 24px; border:1px solid var(--line); border-radius:12px; background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wa-live > li > a:hover{
  border-color:var(--blue-500); transform:translateY(-2px); text-decoration:none;
  box-shadow:0 12px 30px -20px rgba(16,32,58,.55);
}
.wa-live__cat{
  align-self:flex-start; padding:2px 9px; border-radius:99px;
  background:var(--bg-soft); color:var(--muted); font-size:11.5px; font-weight:700;
}
.wa-live__t{
  font-size:15px; font-weight:700; line-height:1.5; letter-spacing:-.03em; color:var(--ink);
}
.wa-live__bar{
  display:block; height:7px; border-radius:99px; background:var(--bg-soft); overflow:hidden;
}
.wa-live__bar > i{
  display:block; height:100%; border-radius:99px; background:var(--blue-500);
  transition:width .6s ease;
}
.wa-live__bar > i.is-done{ background:#12805C; }
.wa-live__m{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--body);
}
.wa-live__m em{
  font-style:normal; font-size:15px; font-weight:800; color:var(--blue-600);
  font-variant-numeric:tabular-nums;
}
.wa-live__m em.is-done{ color:#0C6B51; }

/* ================================================================ 비교분석 (compare.php)
   운영 중인 사이트의 실측값과 우리 제작 결과를 나란히 놓는다.
   왼쪽(타사)은 붉은 계열, 오른쪽(우리)은 파랑으로 눈이 바로 갈리게 한다. */
.wa-cmp{ max-width:1080px; margin:0 auto; padding:0 20px 90px; }

.wa-cmp__eyebrow{
  display:inline-block; margin:0 0 10px; padding:4px 11px; border-radius:99px;
  background:var(--blue-050); color:var(--blue-600);
  font-size:12px; font-weight:800; letter-spacing:.02em;
}
.wa-cmp__h2{
  margin:0 0 12px; font-size:27px; font-weight:800; line-height:1.35;
  letter-spacing:-.04em; color:var(--ink);
}
.wa-cmp__lead{ margin:0; font-size:16px; line-height:1.75; color:var(--body); }
.wa-cmp__lead strong{ color:var(--ink); font-weight:700; }

.wa-cmp__intro{ padding:6px 0 30px; }
.wa-cmp__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:20px 0 0; padding:0; list-style:none;
  font-size:14px; color:var(--body);
}
.wa-cmp__meta b{ color:var(--muted); font-weight:700; margin-right:6px; }
.wa-cmp__note{
  margin:18px 0 0; padding:13px 16px; border-left:3px solid var(--line);
  background:var(--bg-soft); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:13.5px; line-height:1.7; color:var(--body);
}

/* ---- 점수 카드 */
.wa-cmp__scores{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 14px;
}
.wa-cmp__sc{
  padding:20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); box-shadow:var(--sh-1);
}
.wa-cmp__sck{
  margin:0 0 4px; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
}
.wa-cmp__sck span{ margin-left:7px; font-size:12.5px; font-weight:700; color:var(--muted); }
.wa-cmp__scd{ margin:0 0 16px; font-size:12.5px; line-height:1.6; color:var(--muted); }
.wa-cmp__scrow{ display:flex; align-items:flex-end; gap:12px; }
.wa-cmp__scrow > i{ padding-bottom:9px; color:var(--muted); }
.wa-cmp__scside{ flex:1 1 0; }
.wa-cmp__scside em{
  display:block; font-style:normal; font-size:11.5px; font-weight:700; color:var(--muted);
}
.wa-cmp__scside b{
  font-size:32px; font-weight:800; letter-spacing:-.05em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.wa-cmp__scside b.is-now{ color:var(--warn); }
.wa-cmp__scside b.is-aim{ color:var(--blue-600); }
.wa-cmp__bar{
  position:relative; height:7px; margin-top:14px; border-radius:99px;
  background:var(--bg-soft); overflow:hidden;
}
.wa-cmp__bar > span{
  position:absolute; left:0; top:0; height:100%; border-radius:99px;
}
.wa-cmp__bar > span.is-aim{ background:var(--blue-400); opacity:.35; }
.wa-cmp__bar > span.is-now{ background:var(--warn); z-index:1; }
.wa-cmp__scfoot{
  margin:0 0 52px; font-size:13.5px; line-height:1.75; color:var(--body);
}
.wa-cmp__scfoot b{ color:var(--ink); }

/* ---- 표 */
.wa-cmp__tblhead{ margin:0 0 20px; }
.wa-cmp__group{ margin:0 0 30px; }
.wa-cmp__gh{
  margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted);
}
/* 좁은 화면에서는 표만 가로로 민다 — 페이지 전체가 밀리지 않게 */
.wa-cmp__scroll{
  overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg);
}
.wa-cmp__tbl{
  width:100%; min-width:760px; border-collapse:collapse; font-size:14px;
}
.wa-cmp__tbl th, .wa-cmp__tbl td{
  padding:14px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-2); line-height:1.6;
}
.wa-cmp__tbl tbody tr:last-child th, .wa-cmp__tbl tbody tr:last-child td{ border-bottom:0; }
.wa-cmp__tbl thead th{
  padding-top:12px; padding-bottom:12px; background:var(--bg-soft);
  font-size:12.5px; font-weight:800; color:var(--muted); border-bottom:1px solid var(--line);
}
.wa-cmp__tbl .c-item{ width:20%; font-weight:700; color:var(--ink); }
.wa-cmp__tbl .c-now{ width:28%; }
.wa-cmp__tbl .c-us{ width:26%; color:var(--ink); }
.wa-cmp__tbl .c-why{ width:26%; font-size:13px; color:var(--muted); }
.wa-cmp__tbl td.c-us{ background:rgba(234,242,255,.45); }
.wa-cmp__tbl td.c-us .fa{ margin-right:5px; color:var(--blue-600); }
.wa-cmp__flag{
  display:inline-block; margin-right:7px; padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:800; white-space:nowrap;
}
.wa-cmp__flag.is-bad{  background:#FDECEC; color:#B42318; }
.wa-cmp__flag.is-warn{ background:#FEF3E2; color:#A15C07; }
.wa-cmp__flag.is-ok{   background:#E6F6F2; color:#0C6B51; }
.wa-cmp__nowtx{ color:var(--body); }

/* ---- 상세 카드 */
.wa-cmp__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 52px; }
.wa-cmp__card{
  padding:24px 22px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg); box-shadow:var(--sh-1);
}
.wa-cmp__cn{
  margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--blue-600);
}
.wa-cmp__card h3{
  margin:0 0 12px; font-size:18px; font-weight:800; letter-spacing:-.03em;
  line-height:1.45; color:var(--ink);
}
.wa-cmp__card p{ margin:0 0 12px; font-size:14px; line-height:1.8; color:var(--body); }
.wa-cmp__card p b{ color:var(--ink); font-weight:700; }
.wa-cmp__fix{
  margin:0 !important; padding:13px 15px; border-radius:var(--r-md);
  background:var(--blue-050); font-size:13.5px !important;
}
.wa-cmp__fix b{ color:var(--blue-600) !important; }

/* ---- 균형 문단 */
.wa-cmp__fair{
  padding:26px 26px 8px; margin:0 0 52px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-soft);
}
.wa-cmp__fair h3{
  margin:0 0 12px; font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--ink);
}
.wa-cmp__fair p{ margin:0 0 14px; font-size:14.5px; line-height:1.85; color:var(--body); }
.wa-cmp__fair p b{ color:var(--ink); font-weight:700; }

/* ---- 마무리 */
.wa-cmp__cta{
  padding:44px 26px; border-radius:var(--r-xl); text-align:center;
  background:var(--navy-900); color:#fff;
}
.wa-cmp__cta h2{
  margin:0 0 10px; font-size:25px; font-weight:800; letter-spacing:-.04em; color:#fff;
}
.wa-cmp__cta > p{ margin:0 0 22px; font-size:15px; line-height:1.7; color:rgba(255,255,255,.75); }
.wa-cmp__btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wa-cmp__cta .wa-btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.wa-cmp__cta .wa-btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.wa-cmp__ctafoot{
  margin:20px 0 0; font-size:13px; color:rgba(255,255,255,.6);
}
.wa-cmp__ctafoot b{ color:var(--lime-500); }

@media (max-width:900px){
  .wa-cmp__scores{ grid-template-columns:1fr; }
  .wa-cmp__cards{ grid-template-columns:1fr; }
  .wa-cmp__h2{ font-size:23px; }
}
@media (max-width:560px){
  .wa-cmp{ padding:0 16px 70px; }
  .wa-cmp__h2{ font-size:20px; }
  .wa-cmp__lead{ font-size:15px; }
  .wa-cmp__cta{ padding:34px 18px; }
  .wa-cmp__cta h2{ font-size:21px; }
  .wa-cmp__fair{ padding:22px 18px 6px; }
  .wa-cmp__card{ padding:20px 18px; }
}

/* ================================================================ 서브 페이지 제목 둘째 줄 (강조)
   h1 안에 span 으로 넣는다 — 검색엔진에는 한 문장, 화면에는 두 줄 */
.wa-phd__plus{ display:block; margin-top:2px; color:var(--lime-500); font-size:.72em; line-height:1.3; letter-spacing:-.02em; }

/* ================================================================ 안과 밖 흐름 도식 (service/web.php)
   왼쪽 홈페이지 창(온페이지) → 연결(오프페이지) → 결과(검색 노출 · AI 인용).
   좁은 화면에서는 위에서 아래로 쌓고 화살표도 아래를 향한다. */
.wa-io{
  display:grid; grid-template-columns:minmax(0,1.55fr) 44px minmax(0,1fr) 44px minmax(0,.72fr);
  align-items:center; gap:0;
}
.wa-io__lbl{ margin:0 0 10px; font-size:13px; font-weight:700; color:var(--muted); }
.wa-io__lbl b{
  display:inline-grid; place-items:center; width:26px; height:26px; margin-right:6px; border-radius:50%;
  background:var(--navy-900); color:#fff; font-size:12.5px; vertical-align:middle;
}
.wa-io__cap{ margin:12px 0 0; font-size:13.5px; color:var(--body); text-align:center; }
.wa-io__cap b{ color:var(--blue-600); }

/* 안 — 브라우저 창 */
.wa-io__win{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden; box-shadow:var(--sh-2);
}
.wa-io__bar{ display:flex; align-items:center; gap:6px; height:34px; padding:0 14px; background:var(--bg-soft); border-bottom:1px solid var(--line); }
.wa-io__bar i{ width:9px; height:9px; border-radius:50%; background:#d7dde8; }
.wa-io__bar span{ margin-left:10px; padding:3px 12px; border-radius:99px; background:#fff; border:1px solid var(--line);
  font-size:11.5px; color:var(--muted); }
.wa-io__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0; padding:14px; list-style:none; }
.wa-io__grid li{
  display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:10px;
  padding:12px; border-radius:var(--r-md); background:var(--bg-soft);
}
.wa-io__grid li i{
  grid-row:1 / span 2; display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:var(--blue-050); color:var(--blue-600); font-size:15px;
}
.wa-io__grid b{ font-size:14px; color:var(--ink); letter-spacing:-.02em; line-height:1.4; }
.wa-io__grid span{ font-size:12px; line-height:1.55; color:var(--muted); }

/* 화살표 — 흐르는 점선 */
.wa-io__arrow{ position:relative; height:100%; min-height:40px; }
.wa-io__arrow span{
  position:absolute; left:6px; right:10px; top:50%; height:2px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--blue-400) 0 6px, transparent 6px 11px);
  background-size:11px 2px; animation:wa-io-flow 1s linear infinite;
}
.wa-io__arrow span:after{
  content:''; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
  border:6px solid transparent; border-left:9px solid var(--blue-500);
}
@keyframes wa-io-flow{ to{ background-position:11px 0; } }

/* 밖 — 연결 */
.wa-io__links{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
.wa-io__links li{
  display:flex; gap:12px; align-items:flex-start; padding:14px;
  border:1px dashed var(--blue-400); border-radius:var(--r-md); background:#fff;
}
.wa-io__links li > i{
  flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--blue-600); color:#fff; font-size:15px;
}
.wa-io__links b{ display:block; font-size:14px; color:var(--ink); }
.wa-io__links span{ display:block; margin-top:2px; font-size:12px; line-height:1.55; color:var(--muted); }

/* 결과 */
.wa-io__goal{ display:grid; gap:10px; }
.wa-io__goal .wa-io__lbl{ text-align:center; }
.wa-io__res{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:18px 12px; border-radius:var(--r-lg); background:var(--navy-900); color:#fff;
}
.wa-io__res i{ font-size:22px; color:var(--blue-400); margin-bottom:4px; }
.wa-io__res b{ font-size:15px; letter-spacing:-.02em; }
.wa-io__res span{ font-size:11.5px; color:#8FA5C4; }
.wa-io__res.is-ai i{ color:var(--lime-500); }

@media (max-width:1100px){
  .wa-io{ grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); row-gap:8px; }
  .wa-io__goal{ grid-column:1 / -1; grid-template-columns:1fr 1fr; }
  .wa-io__goal .wa-io__lbl{ grid-column:1 / -1; }
  .wa-io__arrow.is-last{ display:none; }   /* 결과가 아래 줄로 내려가면 둘째 화살표는 뺀다 */
}
@media (max-width:760px){
  .wa-io{ grid-template-columns:1fr; }
  .wa-io__arrow{ height:40px; }
  .wa-io__arrow.is-last{ display:block; }
  .wa-io__arrow span{
    left:50%; right:auto; top:4px; bottom:12px; width:2px; height:auto; transform:translateX(-50%);
    background:repeating-linear-gradient(180deg, var(--blue-400) 0 6px, transparent 6px 11px);
    background-size:2px 11px;
  }
  .wa-io__arrow span:after{ right:auto; left:50%; top:auto; bottom:-12px; transform:translateX(-50%);
    border:6px solid transparent; border-top:9px solid var(--blue-500); }
  @keyframes wa-io-flow{ to{ background-position:0 11px; } }
  .wa-io__grid{ grid-template-columns:1fr; }
  .wa-io__goal{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .wa-io__arrow span{ animation:none; } }

/* 설명문 안 링크 — 본문색과 같아 링크인지 안 보였다 */
.wa-lead a{ color:var(--blue-600); font-weight:600; text-decoration:none; white-space:nowrap; }
.wa-lead a:hover{ text-decoration:underline; }
.wa-sec--navy .wa-lead a{ color:var(--lime-500); }

/* ================================================================ 기본 제공 페이지 구성 (service/web.php) */
.wa-pg{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.wa-pg--biz{ grid-template-columns:repeat(3, 1fr); }   /* 업종 9개 — 3×3 으로 딱 맞춘다 */
.wa-pg--biz .wa-cat__ul li{ background:#fff; }            /* 칸 배경과 같으면 칩이 묻힌다 */
.wa-pg__link{ color:var(--blue-600); font-weight:600; text-decoration:none; }
.wa-pg__link:hover{ text-decoration:underline; }
.wa-pg__box{ padding:20px 20px 18px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.wa-pg--biz .wa-pg__box{ background:var(--bg-soft); border-color:transparent; }
.wa-pg__t{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 12px; font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.wa-pg__t i{ display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:var(--blue-050); color:var(--blue-600); font-size:14px; }
.wa-pg--biz .wa-pg__t i{ background:#fff; }
.wa-pg__t small{ font-size:12px; font-weight:600; color:var(--muted); }
.wa-pg__h{ font-size:19px; font-weight:800; color:var(--ink); letter-spacing:-.03em; margin:0 0 6px; }
.wa-pg__more{
  display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:24px;
  padding:24px 26px; border-radius:var(--r-lg); border:1px dashed var(--blue-400); background:var(--blue-050);
}
.wa-pg__more .wa-cat__ul li{ background:#fff; }
.wa-pg__more .wa-btn{ flex:none; }
@media (max-width:1024px){ .wa-pg--biz{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:760px){
  .wa-pg, .wa-pg--biz{ grid-template-columns:1fr; }
  .wa-pg__more{ flex-direction:column; align-items:stretch; }
}

/* ============================================================ 게시판 스킨 (skin.php) */
.wa-skn-intro{ margin:0 0 22px; font-size:16px; line-height:1.8; color:var(--body); }
.wa-skn-intro span{ color:#94A3B8; font-size:14px; }
.wa-skn-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:50px; }
.wa-skn-jump a{ display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border:1px solid var(--line); border-radius:99px; font-size:14px; font-weight:600; color:var(--navy-900); background:#fff; }
.wa-skn-jump a:hover{ border-color:var(--blue-600); color:var(--blue-600); }
.wa-skn-jump small{ font-size:12px; color:#94A3B8; }
.wa-skn-group{ margin-bottom:64px; scroll-margin-top:100px; }
.wa-skn-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:0; padding:0; list-style:none; }
.wa-skn-grid--3{ grid-template-columns:repeat(3,1fr); gap:18px; }
.wa-skn-grid--3 .wa-skn-body{ padding:20px 20px 22px; }
@media (max-width:1100px){ .wa-skn-grid--3{ grid-template-columns:repeat(2,1fr); } }
.wa-skn-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:box-shadow .25s, transform .25s; }
.wa-skn-card:hover{ box-shadow:0 18px 40px rgba(11,27,52,.08); transform:translateY(-3px); }
.wa-skn-shot{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--line-2); border-bottom:1px solid var(--line); }
.wa-skn-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .6s; }
.wa-skn-card:hover .wa-skn-shot img{ transform:scale(1.03); }
.wa-skn-shot span{ display:grid; place-items:center; height:100%; font-size:22px; font-weight:700; color:#94A3B8; }
.wa-skn-body{ display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.wa-skn-body code{ align-self:flex-start; padding:2px 8px; border-radius:6px; background:var(--line-2); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; color:var(--blue-600); }
.wa-skn-body h3{ margin:10px 0 4px; font-size:20px; font-weight:700; color:var(--navy-900); }
.wa-skn-body>p{ margin:0; font-size:14.5px; color:var(--body); }
.wa-skn-body ul{ display:grid; gap:4px; margin:14px 0 18px; padding:0; list-style:none; }
.wa-skn-body li{ position:relative; padding-left:16px; font-size:14px; color:var(--body); }
.wa-skn-body li::before{ content:""; position:absolute; left:2px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--blue-600); }
.wa-skn-go{ align-self:flex-start; margin-top:auto; }
@media (max-width:760px){
  .wa-skn-grid{ grid-template-columns:1fr; }
  .wa-skn-body{ padding:18px 18px 20px; }
}

/* 푸터 — 현재 접속자 */
.wa-ft__now{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:inherit; opacity:.85; }
.wa-ft__now:hover{ opacity:1; }
.wa-ft__side{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; justify-content:flex-end; }
.wa-ft__ai{ color:#61789A; }
@media (max-width:640px){ .wa-ft__side{ justify-content:flex-start; } }
.wa-ft__now i{ position:relative; width:8px; height:8px; border-radius:50%; background:#22C55E; }
.wa-ft__now i::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22C55E; animation:wa-now 1.8s ease-out infinite; }
.wa-ft__now b{ font-weight:800; }
@keyframes wa-now{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(2.6); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .wa-ft__now i::after{ animation:none; } }

/* --------------------------------------------------------------------------
   공식 AI 모델 연출 장면 (lib/scene.php wa_scene)
   -------------------------------------------------------------------------- */
.wa-scene{ position:relative; margin:0; border-radius:var(--r-xl); overflow:hidden; background:#EEF3F6; box-shadow:var(--sh-2); }
.wa-scene img{ display:block; width:100%; height:auto; }
.wa-scene--hero{ max-width:520px; justify-self:end; box-shadow:0 30px 80px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); }
.wa-scene--quote{ margin-top:28px; }
.wa-scene--wide{ margin:0 0 44px; }
.wa-scene--dark{ box-shadow:0 24px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); }
.wa-scene--final{ max-width:640px; margin:0 auto 34px; box-shadow:0 24px 60px rgba(0,0,0,.4); }
/* 서브 페이지 헤더 — 글 왼쪽, 장면 오른쪽 */
.wa-phd--scene{ padding:48px 0 44px; }
.wa-phd--scene .wa-phd__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:48px; align-items:center; }
.wa-scene--phd{ border-radius:var(--r-lg); box-shadow:0 24px 60px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); }
.wa-scene-row{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:56px; }
.wa-scene-row .wa-sechead{ margin-bottom:0; }
@media (max-width:1024px){
  .wa-scene--hero{ justify-self:start; }
}
@media (max-width:900px){
  .wa-phd--scene .wa-phd__in{ grid-template-columns:1fr; gap:26px; }
  .wa-scene--phd{ max-width:520px; }
  .wa-scene-row{ grid-template-columns:1fr; gap:28px; margin-bottom:44px; }
  .wa-scene--wide{ margin-bottom:32px; }
}
@media (max-width:640px){
  .wa-scene{ border-radius:var(--r-lg); }
  .wa-scene--wide img{ aspect-ratio:16/9; object-fit:cover; object-position:50% 50%; }
  .wa-phd--scene{ padding:36px 0 32px; }
  .wa-scene--phd img{ aspect-ratio:16/9; object-fit:cover; object-position:50% 45%; }
}