:root{
  color-scheme:light;
  --paper:#F8FAFC;
  --panel:#FFFFFF;
  --panel2:#F1F5F9;
  --ink:#101828;
  --muted:#5B6678;
  --line:#D9E2EC;
  --mint:#2ECC9A;
  --mint2:#E7FAF3;
  --amber:#FFB020;
  --blue:#2563EB;
  --radius:28px;
  --shadow:0 22px 55px rgba(15,23,42,.08);
  --serif:Fraunces, Georgia, "Times New Roman", serif;
  --sans:Inter, "Noto Sans KR", "Noto Sans Devanagari", system-ui, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
.shell{max-width:1180px;margin:0 auto;padding:0 22px}
.top{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}
.nav{height:86px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-weight:950;font-size:20px;letter-spacing:-.04em}
.brand img{width:38px;height:38px}
.links{display:flex;align-items:center;gap:7px;margin-left:20px}
.links a{padding:10px 14px;border-radius:999px;color:#465365;font-weight:800;font-size:14px}
.links a.active,.links a:hover{background:var(--mint);color:#062318}
.actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.select,.btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:12px 18px;font-weight:900;color:#192436;box-shadow:0 8px 18px rgba(15,23,42,.04)}
.select{width:70px;padding:12px 8px;text-align:center;text-align-last:center}
.btn{cursor:pointer}
.btn.primary{background:var(--mint);border-color:var(--mint);color:#062318;box-shadow:0 16px 30px rgba(46,204,154,.22)}
.btn.dark{background:#101828;color:#fff;border-color:#101828}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:#fff}
.btn.sm{padding:9px 14px;font-size:13px}
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:44px;align-items:center;padding:78px 0 54px}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#098060;font-weight:950;margin:0 0 16px}
h1,h2,h3{margin:0;letter-spacing:-.045em}
h1{font:950 clamp(48px,7vw,86px)/.93 var(--serif)}
h2{font:900 clamp(32px,4vw,54px)/1 var(--serif)}
h3{font-size:24px;line-height:1.08}
.lead{font-size:20px;color:#3F4D5F;max-width:650px;margin:24px 0 0}
.heroCtas{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px;font-weight:900;color:#263244;box-shadow:0 8px 22px rgba(15,23,42,.05)}
.pill b{color:#098060}
.board{background:#fff;border:1px solid var(--line);border-radius:34px;padding:28px;box-shadow:var(--shadow)}
.boardTop{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}
.status{display:inline-flex;align-items:center;gap:8px;color:#098060;font-weight:950}
.dot{width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(46,204,154,.15)}
.price{font:950 30px/1 var(--serif)}
.meter{height:14px;border-radius:999px;background:#EDF2F7;overflow:hidden;margin:18px 0}
.meter span{display:block;height:100%;width:67%;background:var(--mint)}
.route{display:grid;gap:12px}
.routeItem{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:14px;background:#FAFCFE}
.routeItem strong{display:block}
.routeItem small{color:var(--muted)}
.num{width:34px;height:34px;border-radius:12px;background:var(--mint2);display:grid;place-items:center;color:#098060;font-weight:950}
.rate{font-weight:950;color:#098060}
.section{padding:54px 0}
.sectionHead{display:flex;justify-content:space-between;gap:24px;align-items:end;margin-bottom:22px}
.sectionHead p{max-width:620px;color:var(--muted);font-size:18px;margin:12px 0 0}
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:24px;box-shadow:0 18px 38px rgba(15,23,42,.06)}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card p{color:var(--muted);margin:12px 0 0}
.tag{display:inline-flex;border:1px solid #B8EBD8;background:var(--mint2);color:#087F62;border-radius:999px;padding:6px 10px;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.risk{display:inline-flex;border:1px solid #FFDFA6;background:#FFF6E5;color:#92600A;border-radius:999px;padding:6px 10px;font-weight:950;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.calc{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}
.form{display:grid;gap:14px}
label{font-weight:900;color:#273244}
input,select,textarea{width:100%;border:1px solid #CBD5E1;border-radius:16px;padding:14px 15px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 4px rgba(46,204,154,.12)}
.result{background:#101828;color:#fff;border-radius:28px;padding:26px}
.result h3{font-family:var(--serif);font-size:28px}
.result p{color:#CED7E2}
.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.table th,.table td{text-align:left;padding:15px;border-bottom:1px solid var(--line)}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#5B6678;background:#F5F8FB}
.table tr:last-child td{border-bottom:0}
.priceCard{position:relative}
.priceCard.featured{border-color:#83E2C3;box-shadow:0 24px 60px rgba(46,204,154,.15)}
.money{font:950 48px/1 var(--serif);margin:18px 0}
.money small{font:800 16px/1 var(--sans);color:var(--muted)}
.list{padding:0;margin:20px 0;list-style:none;display:grid;gap:10px}
.list li{display:flex;gap:10px;color:#344154}
.list li:before{content:"✓";color:#098060;font-weight:950}
.supportBox{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chatLog{min-height:130px;background:#F8FAFC;border:1px solid var(--line);border-radius:18px;padding:14px;color:#344154;white-space:pre-wrap}
.footer{margin-top:44px;border-top:1px solid var(--line);background:#fff}
.footerGrid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px;padding:42px 0}
.footer a,.footer p{color:#5B6678}
.footer h4{margin:0 0 12px}
.fine{border-top:1px solid var(--line);padding:18px 0;color:#667085;font-size:13px}
.hidden{display:none!important}
.step{display:grid;grid-template-columns:auto 1fr;gap:12px;border:1px solid var(--line);border-radius:16px;padding:12px;background:#FAFCFE;margin-bottom:10px}
.step .stn{width:26px;height:26px;border-radius:9px;background:var(--mint2);color:#098060;display:grid;place-items:center;font-weight:950;font-size:13px}
.step .sta{font-weight:900}
.step .stm{color:var(--muted);font-size:13px;margin-top:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.connCard{position:relative}
.connCard.on{border-color:#83E2C3;box-shadow:0 18px 40px rgba(46,204,154,.14)}
.orgRow{border:1px solid var(--line);border-radius:14px;padding:10px 14px;background:#FAFCFE;margin-top:8px;font-size:14px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:900;font-size:13px;color:#465365;cursor:pointer}
.tab.active{background:var(--mint);border-color:var(--mint);color:#062318}
.icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:20px;color:#fff}
.spaceCard{cursor:pointer}
.spaceCard .top{display:flex;justify-content:space-between;align-items:center}
.lockedBox{position:relative;margin-top:14px;border:1px dashed #CBD5E1;border-radius:16px;overflow:hidden}
.lockedInner{padding:16px;filter:blur(4px);user-select:none;pointer-events:none;font-size:13px;color:#344154;display:grid;gap:8px}
.lockedOverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,.7);text-align:center;padding:20px}
.vrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:13px 15px;background:#FAFCFE;margin-bottom:10px}
.vrow .vic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0;background:var(--mint2)}
.vrow .vst{margin-left:auto;font-size:12px;font-weight:900;padding:5px 11px;border-radius:999px;background:var(--mint2);color:#098060;white-space:nowrap}
.reqCard{border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;background:#FAFCFE}
.reqTop{display:flex;align-items:center;gap:10px}
.reqAv{width:34px;height:34px;border-radius:50%;background:var(--mint2);color:#098060;display:grid;place-items:center;font-weight:950;font-size:13px}
@media(max-width:900px){
  .nav{height:auto;min-height:78px;flex-wrap:wrap;padding:14px 0}.links{order:3;width:100%;overflow:auto;margin-left:0}.actions{margin-left:auto}
  .hero,.calc,.supportBox{grid-template-columns:1fr}.g3,.g2{grid-template-columns:1fr}.sectionHead{display:block}.footerGrid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.actions{width:100%;justify-content:space-between}.select{min-width:0}.footerGrid{grid-template-columns:1fr}h1{font-size:46px}}
.guideToggle{position:fixed;top:14px;right:14px;z-index:60;width:36px;height:36px;border-radius:999px;background:var(--mint);color:#062318;font-weight:900;border:0;box-shadow:0 4px 14px rgba(15,23,42,.18);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.guidePanel{position:fixed;top:58px;right:14px;z-index:60;width:280px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:16px;box-shadow:var(--shadow);display:none}
.guidePanel.open{display:block}
.guideDots{display:flex;gap:6px;margin-top:10px}
.guideDots span{width:6px;height:6px;border-radius:999px;background:var(--line);cursor:pointer}
.guideDots span.active{background:var(--mint)}
.langFallback{background:#FEF3C7;color:#92400E;font-size:13px;font-weight:700;text-align:center;padding:10px 16px}
.langFallback button{margin-left:8px;border:1px solid #92400E;background:transparent;color:#92400E;border-radius:999px;padding:4px 10px;font-weight:800;cursor:pointer}
.guideHero{border:1px solid var(--mint);background:var(--mint2);margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-radius:var(--radius);padding:22px}

/* sove-qa: mobile overflow fix (F-platform-003) — 기존 규칙을 덮지 않고 좁게 겹쳐 쓴다.
   왜: 390px 폭에서 가로 스크롤이 생겨 오른쪽 글자가 잘렸다. 측정한 범인은
   (1) .navActions 가 줄바꿈하지 않는 것, (2) 히어로 글자가 컨테이너를 넘는 것.
   overflow-x:hidden 으로 가리지 않는다 — 잘린 글자는 그대로 잘린다. */
@media (max-width: 620px) {
  /* 버튼이 한 줄에 안 들어가면 다음 줄로 내려간다 */
  .navActions { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 긴 낱말과 자간이 겹쳐 폭을 넘기는 것을 막는다.
     낱말 중간을 끊지 않도록 break-word 를 쓴다 — break-all 은 읽기 어려워진다. */
  .eyebrow, .lead, h1, h2 { max-width: 100%; overflow-wrap: break-word; }

  /* 자간이 큰 라벨은 마지막 글자 뒤 여백이 그대로 폭에 더해진다 */
  .eyebrow { letter-spacing: .22em; }

  /* 탭 띠는 **자기 안에서** 가로로 스크롤한다.
     측정해 보니 .mobileBar 는 폭이 366px 로 멀쩡한데 그 안의 탭이 521px 까지
     뻗어 문서 전체를 밀고 있었다. 탭을 줄이거나 숨기는 대신 띠 안에서 밀리게
     한다 — 탭 바의 표준 동작이고, 항목이 사라지지 않는다.
     스크롤 막대는 숨긴다: 모바일에서는 손가락으로 미는 것이 자연스럽다. */
  .mobileBar, .tabs, .tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobileBar::-webkit-scrollbar, .tabs::-webkit-scrollbar, .tabbar::-webkit-scrollbar { display: none; }

  /* 상단 우측 영역은 스크롤보다 줄바꿈이 낫다 — 로그인 버튼이 숨으면 안 된다 */
  .topbar-right, .navRight, .headerRight { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }

  /* 그리드·플렉스 항목의 기본 min-width:auto 를 푼다.
     이것이 agora/vcf/shield 의 진짜 원인이었다. .hero 는 모바일에서
     grid-template-columns:1fr 로 바뀌는데, 항목의 최소 폭이 '내용의 최소 폭'
     이라서 안의 버튼 줄이 열을 뷰포트 폭까지 밀어 올렸다 — 부모가 16px 패딩
     안에 있는데도 390px 를 차지해 오른쪽으로 16px 삐져나갔다.
     min-width:0 은 이 상황의 표준 해법이고, 내용을 자르지 않는다. */
  .hero > *, .workspace > *, .grid > * { min-width: 0; }

  /* 버튼 줄도 접히게 한다. 접히지 않으면 위의 min-width:0 이 글자를 짓눌러
     가로 스크롤 대신 레이아웃이 깨진 것처럼 보인다. */
  .actions { flex-wrap: wrap; row-gap: 8px; }
}

/* sove-qa: a11y fix — 위의 글자색들은 대비를 **계산해서** 정했다 (F-platform-005).
   바꾼 값: #0a8d69→#098060 (3.99→4.70:1)
   WCAG AA 본문 기준은 4.5:1. 색조와 채도를 지키고 밝기만 낮춰 4.6:1 을 넘는
   가장 밝은 색을 골랐다 — 더 어둡게 하면 브랜드 색이 검정에 가까워진다.
   background 는 건드리지 않았다. 대비 문제의 범위는 글자색이다. */