/* ───────────────────────────────────────────────
   남는돈 디자인 시스템 v1  (2026-10-15)
   토큰 규칙
   · 간격  4 8 12 16 24 32 48 64 80 96 128  (8의 배수 외 금지)
   · 행간  글자크기 + 6px 고정
   · 모서리 8 / 12 / 16  세 값만
   · 배경  paper 와 panel 두 가지만 번갈아 쓴다
   · 초록  면(단추·배지)에만. 금액과 본문 글자에는 쓰지 않는다
   ─────────────────────────────────────────────── */
:root{
  --paper:#FFFFFF; --panel:#F6F2EE; --ink:#23201E; --ink2:#4A443E;
  --gray:#756E66; --line:#E7DFD7; --edge:#D6C9BC;
  --green:#2C8055; --green-d:#236845; --greenbg:#F1F7F3; --greenline:#CFE3D8;
  --amber:#A96A14; --amberbg:#FDF6E6;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:128px;
  --r1:8px; --r2:12px; --r3:16px; --rpill:999px;
  --wrap:1060px; --narrow:760px;
  --title:'Jua','PretendardSub',system-ui,sans-serif;
  --body:'PretendardSub','Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--panel);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:23px;word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* 글꼴 */
@font-face{font-family:'Jua';src:url(fonts/jua-la.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+2010-2027,U+2030-205E}
@font-face{font-family:'Jua';src:url(fonts/jua-ko.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+1100-11FF,U+3130-318F,U+AC00-D7AF}
@font-face{font-family:'PretendardSub';src:url(fonts/pretendard.woff2) format('woff2');font-weight:400 800;font-display:swap}

/* 글자 크기 — 본문 5단, 제목 4단 */
.t-xs{font-size:13px;line-height:19px}
.t-sm{font-size:15px;line-height:21px}
.t-md{font-size:17px;line-height:23px}
.t-lg{font-size:19px;line-height:25px}
.t-xl{font-size:21px;line-height:27px}
h1,h2,h3,h4,.disp{font-family:var(--title);font-weight:400;letter-spacing:-.015em}
h1{font-size:clamp(32px,5.4vw,52px);line-height:1.22}
h2{font-size:clamp(25px,3.4vw,36px);line-height:1.3}
h3{font-size:clamp(19px,2.1vw,23px);line-height:1.34;letter-spacing:-.01em}
h4{font-size:17px;line-height:23px;letter-spacing:-.005em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--s5)}
@media (max-width:640px){ .wrap,.narrow{padding:0 var(--s4)} }
section{padding:var(--s9) 0}
@media (max-width:640px){ section{padding:var(--s7) 0} }
.panel{background:var(--panel)}
.lead{margin-top:var(--s4);font-size:clamp(16px,1.6vw,18px);line-height:1.68;color:var(--ink2);max-width:40em}
.kicker{font-size:13px;line-height:19px;font-weight:700;letter-spacing:.04em;color:var(--gray);
  margin-bottom:var(--s3);text-transform:none}
.note{font-size:13px;line-height:19px;color:var(--gray)}

/* 머리띠 */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--line)}
.navin{max-width:var(--wrap);margin:0 auto;padding:var(--s3) var(--s5);
  display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;flex:none;min-height:44px}
.brand svg{width:26px;height:26px;flex:none}
.brand b{font-family:var(--title);font-weight:400;font-size:21px;letter-spacing:-.02em}
.brand b i{color:var(--green);font-style:normal}
.navlinks{display:flex;gap:var(--s2);margin-left:auto;align-items:center}
.navlinks a{padding:var(--s2) var(--s3);border-radius:var(--r1);font-size:15px;line-height:21px;
  font-weight:600;color:var(--ink2);text-decoration:none;transition:background .15s ease,color .15s ease}
.navlinks a:hover{background:var(--panel);color:var(--ink)}
.navlinks a[aria-current=page]{color:var(--ink);background:var(--panel)}
.navcta{flex:none}
.menubtn{display:none;margin-left:auto;width:44px;height:44px;border-radius:var(--r1);
  align-items:center;justify-content:center}
.menubtn svg{width:22px;height:22px}
@media (max-width:900px){
  .navlinks{display:none}
  .menubtn{display:flex}
  .navcta{display:none}
  .nav.open .navlinks{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s2) var(--s4) var(--s4)}
  .nav.open .navlinks a{padding:var(--s4) var(--s3);font-size:17px;line-height:23px;border-radius:var(--r1)}
  .nav.open .navcta{display:block;margin:var(--s3) 0 0}
  .nav.open .navcta .btn{width:100%}
}

/* 단추 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s5);border-radius:var(--rpill);font-size:16px;line-height:22px;
  font-weight:700;text-decoration:none;border:1px solid transparent;transition:transform .14s ease,background .14s ease}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--green);color:#fff;box-shadow:0 2px 10px rgba(44,128,85,.22)}
.btn.pri:hover{background:var(--green-d)}
.btn.sec{background:var(--paper);color:var(--ink);border-color:var(--edge)}
.btn.sec:hover{background:var(--panel)}
.btn.sm{min-height:40px;padding:0 var(--s4);font-size:15px;line-height:21px}
.acts{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
.ctanote{margin-top:var(--s3);font-size:13px;line-height:19px;color:var(--gray)}

/* 첫 화면 */
.hero{background:linear-gradient(180deg,#FFFDFB 0%,#F7F3EE 100%);padding:var(--s9) 0 var(--s8)}
.herogrid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--s7);align-items:center}
@media (max-width:900px){ .herogrid{grid-template-columns:1fr;gap:var(--s6)} }

/* 화면 액자 */
.shot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r3);
  padding:var(--s4);box-shadow:0 1px 3px rgba(35,32,30,.05)}
.shot img{border-radius:var(--r2);border:1px solid var(--line);background:#fff}
.shotcap{margin-top:var(--s3);font-size:13px;line-height:19px;color:var(--gray)}
.phone{max-width:330px;margin:0 auto;border-radius:26px;border:1px solid var(--edge);
  background:var(--paper);padding:var(--s2);box-shadow:0 8px 28px rgba(35,32,30,.1)}
.phone img,.phone video{border-radius:20px;display:block;width:100%}

/* 카드 */
.cards{display:grid;gap:var(--s4);margin-top:var(--s6)}
.c3{grid-template-columns:repeat(3,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){ .c3,.c2{grid-template-columns:1fr} }
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5)}
.panel .card{background:var(--paper)}
.card h3{margin-bottom:var(--s2)}
.card p{color:var(--ink2);font-size:15px;line-height:23px}
.tag{display:inline-block;margin-bottom:var(--s3);padding:var(--s1) var(--s3);border-radius:var(--rpill);
  background:var(--panel);border:1px solid var(--line);font-size:13px;line-height:19px;font-weight:700;color:var(--ink2)}

/* 차례 매긴 단계 */
.steps{counter-reset:st;display:grid;gap:var(--s4);margin-top:var(--s6);list-style:none}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);align-items:start;
  padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.steps li::before{counter-increment:st;content:counter(st);width:32px;height:32px;border-radius:var(--rpill);
  background:var(--green);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:700;margin-top:2px}
.steps .st{font-weight:700;font-size:17px;line-height:23px}
.steps .sd{margin-top:var(--s1);font-size:15px;line-height:23px;color:var(--ink2)}

/* 숫자 줄 */
.figrow{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s5)}
.fig b{display:block;font-size:26px;line-height:32px;font-weight:800;letter-spacing:-.02em}
.fig span{font-size:13px;line-height:19px;color:var(--gray)}

/* 묻는 것 */
details{border-bottom:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;padding:var(--s5) 0;font-size:17px;line-height:23px;
  font-weight:700;display:flex;justify-content:space-between;gap:var(--s4);align-items:center;min-height:48px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:var(--gray);font-weight:400;font-size:21px;flex:none}
details[open] summary::after{content:"\2212"}
details .ans{padding:0 0 var(--s5);font-size:16px;line-height:26px;color:var(--ink2);max-width:46em}
details .ans p+p{margin-top:var(--s3)}
details .ans ul{margin:var(--s3) 0 0 var(--s4)}
details .ans li{margin-top:var(--s2)}

/* 짚고 넘어가는 상자 */
.callout{background:var(--greenbg);border:1px solid var(--greenline);border-radius:var(--r2);
  padding:var(--s5);margin-top:var(--s5)}
.callout.warn{background:var(--amberbg);border-color:#EBD9AE}
.callout h4{margin-bottom:var(--s2)}
.callout p{font-size:15px;line-height:23px;color:var(--ink2)}

/* 표 */
.tbl{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:15px;line-height:23px}
.tbl th,.tbl td{text-align:left;padding:var(--s3) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:700;color:var(--ink2);white-space:nowrap}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* 바닥글 */
footer{background:var(--panel);border-top:1px solid var(--line);padding:var(--s8) 0 var(--s7)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6)}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr;gap:var(--s5)} }
@media (max-width:520px){ .fgrid{grid-template-columns:1fr} }
.fcol h4{font-size:13px;line-height:19px;letter-spacing:.04em;color:var(--gray);
  font-family:var(--body);font-weight:700;margin-bottom:var(--s3)}
.fcol a{display:block;padding:var(--s2) 0;font-size:15px;line-height:21px;color:var(--ink2);text-decoration:none;min-height:36px}
.fcol a:hover{color:var(--ink);text-decoration:underline}
.fbot{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;
  font-size:13px;line-height:19px;color:var(--gray)}
.social{display:flex;gap:var(--s2)}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--edge);background:var(--paper);color:var(--ink);transition:background .15s ease}
.social a:hover{background:var(--greenbg);border-color:var(--greenline)}
.social svg{width:20px;height:20px}
.social img{width:21px;height:21px;border-radius:5px}

/* 오픈채팅 */
.rooms{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.room{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4) 0 var(--s3);
  border:1px solid var(--edge);border-radius:var(--rpill);background:var(--paper);
  font-size:15px;line-height:21px;font-weight:700;text-decoration:none;transition:background .14s ease}
.room:hover{background:var(--panel)}
.room svg{width:20px;height:20px;flex:none}

/* 영상 */
.videobox{position:relative;max-width:330px;margin:0 auto}
.vidcap{margin-top:var(--s3);text-align:center}

/* 건너뛰기 */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:var(--s3) var(--s4);
  border-radius:0 0 var(--r1) 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:var(--r1)}

.card a.cardlink{display:block;min-height:44px;padding:var(--s2) 0;text-decoration:none}
.card a.cardlink:hover{text-decoration:underline}

/* 흐름 그림 — 기기 경계 안에서 끝난다는 것을 보이는 그림 */
.privflow{margin:var(--s6) 0 0;padding-top:14px}
.dev{position:relative;border:2px solid var(--edge);border-radius:var(--r3);
  background:var(--paper);padding:var(--s7) var(--s5) var(--s5)}
.devlab{position:absolute;top:-13px;left:var(--s5);background:var(--paper);
  padding:0 var(--s3);font-size:13px;line-height:26px;font-weight:700;color:var(--ink2);
  border:1px solid var(--edge);border-radius:var(--rpill)}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:var(--s3);align-items:stretch}
.flow .fnode{background:var(--panel);border:1px solid var(--line);border-radius:var(--r2);
  padding:var(--s4);text-align:center;display:flex;flex-direction:column;justify-content:center}
.flow .fnode i{display:block;font-style:normal;font-size:13px;line-height:19px;font-weight:700;color:var(--green);margin-bottom:var(--s1)}
.flow .fnode b{display:block;font-size:16px;line-height:22px}
.flow .fnode span{display:block;margin-top:var(--s2);font-size:13px;line-height:19px;color:var(--gray)}
.flow .farr{color:var(--gray);font-size:21px;line-height:22px;align-self:center;text-align:center}
.keep{margin-top:var(--s4);background:var(--greenbg);border:1px solid var(--greenline);
  border-radius:var(--r2);padding:var(--s4);font-size:13px;line-height:21px;color:var(--ink2)}
.keep b{display:block;font-size:15px;line-height:21px;color:var(--ink);margin-bottom:var(--s1)}
.cut{position:relative;height:var(--s7);margin-left:var(--s7)}
.cut::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px dashed var(--edge)}
.cut span{position:absolute;left:var(--s4);top:50%;transform:translateY(-50%);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--rpill);
  padding:var(--s1) var(--s3);font-size:13px;line-height:19px;color:var(--gray);white-space:nowrap}
.srv{display:inline-flex;flex-direction:column;border:1px dashed var(--edge);border-radius:var(--r2);
  padding:var(--s4) var(--s5);background:transparent;color:var(--gray)}
.srv b{font-size:16px;line-height:22px;font-weight:700;color:var(--ink2)}
/* 흐름 그림: 기본 분석 + AI 질문 (261016) */
.flowlab{font-size:13px;line-height:19px;font-weight:700;color:var(--green);margin:0 0 var(--s3)}
.nosend{margin-top:var(--s3);font-size:14px;line-height:21px;color:var(--ink2)}
.aibtn{margin-top:var(--s4);display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;background:var(--paper);
  border:1.5px solid var(--green);border-radius:var(--r2);padding:var(--s3) var(--s5)}
.aibtn b{font-size:15px;line-height:21px;font-weight:700;color:var(--green)}
.aibtn .trial{font-style:normal;font-size:11.5px;line-height:16px;font-weight:700;color:var(--gray);
  border:1px solid var(--line);border-radius:var(--rpill);padding:1px 7px;background:var(--panel)}
.aibtn span{font-size:12.5px;line-height:17px;color:var(--gray)}
.aipipe{display:flex;gap:var(--s6);margin-left:var(--s7);padding-top:0}
.aipipe>div{position:relative;height:var(--s7);padding-left:var(--s4);display:flex;align-items:center}
.aipipe>div::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:2px dotted var(--green)}
.aipipe span{font-size:12.5px;line-height:17px;padding:4px 10px;border:1px solid var(--line);
  border-radius:var(--rpill);background:var(--paper);white-space:nowrap}
.pdown::after{content:"";position:absolute;left:-5px;bottom:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--green)}
.pdown span{border-color:var(--green);color:var(--green)}
.pup::before{border-left:2px dashed var(--edge)}
.pup::after{content:"";position:absolute;left:-5px;top:0;
  border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid var(--edge)}
.pup span{color:var(--gray)}
.srv.ai{border-style:solid;border-color:var(--green);display:flex;width:100%;box-sizing:border-box}
.srv.ai em{font-style:normal;margin-top:var(--s1);font-size:13px;line-height:19px;font-weight:400;color:var(--gray)}
.srv.ai span{margin-top:var(--s2);color:var(--ink2)}
.srv.ai b{color:var(--green)}
@media (max-width:860px){
  .aipipe{flex-direction:column;gap:var(--s2);margin-left:var(--s5)}
  .aipipe>div{height:var(--s6)}
  .aipipe span{white-space:normal}
  .aibtn{display:flex}
}
.srv span{margin-top:var(--s1);font-size:13px;line-height:19px}
@media (max-width:760px){
  .flow{grid-template-columns:1fr;gap:var(--s2)}
  .flow .farr{transform:rotate(90deg)}
  .dev{padding:var(--s7) var(--s4) var(--s4)}
  .devlab{left:var(--s4)}
  .cut{margin-left:var(--s5)}
}

/* ─────────── 시안 v3에서 가져온 것 (브레인스토밍방 261015) ─────────── */

/* 히어로 작은 라벨 */
.badge{display:inline-flex;align-items:center;padding:var(--s2) var(--s4);border-radius:var(--rpill);
  background:var(--greenbg);border:1px solid var(--greenline);color:var(--green-d);
  font-size:14px;line-height:20px;font-weight:700;margin-bottom:var(--s4)}

/* 선택할 수 있는 업종 칩 */
.sectors{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s5)}
.sectors .slab{font-size:14px;line-height:20px;color:var(--gray);margin-right:var(--s1)}
.sectors .chip{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s4);
  border:1px solid var(--edge);border-radius:var(--rpill);background:var(--paper);
  font-size:15px;line-height:21px;font-weight:700;color:var(--ink)}

/* 신뢰 띠 */
.trust{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s7) 0}
.trustgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media (max-width:860px){ .trustgrid{grid-template-columns:1fr} }
.trustgrid .tcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5)}
.trustgrid .tdot{display:block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-bottom:var(--s3)}
.trustgrid h3{font-size:19px;line-height:25px;margin-bottom:var(--s2)}
.trustgrid p{font-size:15px;line-height:23px;color:var(--ink2)}

/* D-테스트베드 참여 표기 (바닥글) */
.tb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:var(--s6);padding:20px 0 4px}
.tb img{width:100px;height:auto;display:block;flex:none}
.tb span{font-size:13px;line-height:19px;color:var(--gray)}