/* ═══ bamboo match 시안 v5 — 공통 스타일 (모든 페이지 공유) ═══ */
:root{
  --bg:#f2f5f9; --sf:#ffffff; --sf2:#f7f9fc; --ink:#1a2436; --sub:#5b6a82; --mut:#8b97ab;
  --line:#e2e8f1; --line2:#edf1f7;
  --adv:#2456c7; --cre:#0e8c74; --mcn:#7a3fae; --adm:#3d4f73;
  --good:#067647; --goodbg:#e7f5ec; --warn:#9a5b06; --warnbg:#fdf3e0; --bad:#c22f2f; --badbg:#fdeaea;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --grid:#e5eaf2;
  --sh:0 1px 2px rgba(20,32,56,.05),0 4px 16px rgba(20,32,56,.06);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    --bg:#0f141c; --sf:#161d29; --sf2:#1b2432; --ink:#e8edf5; --sub:#a7b3c6; --mut:#71809a;
    --line:#26303f; --line2:#202a38;
    --adv:#5c8df0; --cre:#2fb298; --mcn:#b98be0; --adm:#8fa3cc;
    --good:#4cc06e; --goodbg:#12301d; --warn:#e0a13a; --warnbg:#33270f; --bad:#e66767; --badbg:#3a1a1a;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --grid:#242e3d;
    --sh:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f141c; --sf:#161d29; --sf2:#1b2432; --ink:#e8edf5; --sub:#a7b3c6; --mut:#71809a;
  --line:#26303f; --line2:#202a38;
  --adv:#5c8df0; --cre:#2fb298; --mcn:#b98be0; --adm:#8fa3cc;
  --good:#4cc06e; --goodbg:#12301d; --warn:#e0a13a; --warnbg:#33270f; --bad:#e66767; --badbg:#3a1a1a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --grid:#242e3d;
  --sh:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg text{font-family:inherit}
body[data-role="adv"]{--accent:var(--adv)}
body[data-role="cre"]{--accent:var(--cre)}
body[data-role="mcn"]{--accent:var(--mcn)}
body[data-role="adm"]{--accent:var(--adm)}

/* ── 시안 뷰어 크롬 (common.js가 생성) ── */
.viewer{position:sticky;top:0;z-index:50;background:var(--sf);border-bottom:1px solid var(--line)}
.vtop{display:flex;align-items:center;gap:14px;padding:10px 20px;flex-wrap:wrap}
.vtitle{font-weight:800;font-size:14px;letter-spacing:-.01em;white-space:nowrap}
.vtitle small{display:block;font-size:10.5px;font-weight:500;color:var(--mut)}
.roles{display:flex;gap:4px;background:var(--sf2);border:1px solid var(--line);border-radius:10px;padding:3px}
.roles a{padding:5px 13px;border-radius:8px;font-weight:600;font-size:13px;color:var(--sub);white-space:nowrap}
.roles a:focus-visible,.chips a:focus-visible{outline:2px solid var(--adv);outline-offset:1px}
.roles a.on{background:var(--sf);color:var(--ink);box-shadow:var(--sh)}
.roles a.on .rdot{opacity:1}
.rdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;opacity:.45;vertical-align:1px}
.pgnav{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.pgnav a{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:1px solid var(--line);border-radius:8px;font-weight:700;font-size:12.5px;color:var(--sub);background:var(--sf)}
.pgnav a:hover{border-color:var(--accent);color:var(--accent)}
.pgnav a.off{opacity:.35;pointer-events:none}
.chips{display:flex;gap:6px;padding:0 20px 10px;overflow-x:auto}
.chips a{flex:none;padding:5px 12px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;font-weight:500;color:var(--sub);background:var(--sf)}
.chips a.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-weight:700}

/* ── 페이지 래퍼 ── */
.wrap{padding:20px;max-width:1280px;margin:0 auto}
.frame{background:var(--sf);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh)}
.scap{margin:0 4px 10px;font-size:12.5px;color:var(--sub)}
.scap b{color:var(--ink);font-size:13.5px;margin-right:8px}

/* ── 앱 레이아웃 (풀스크린) ── */
.app{display:flex;min-height:100vh}
.snav{width:224px;flex:none;border-right:1px solid var(--line);background:var(--sf);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:9px;padding:18px 18px 14px;font-weight:800;font-size:15px;letter-spacing:-.01em}
.logo .mark{width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;flex:none}
.logo .mark img{width:86%;height:86%;object-fit:contain;display:block}
.logo .lgm{color:#2faa4a;margin-left:3px}
.logo small{font-size:10px;color:var(--mut);font-weight:500;margin-left:auto}
.snav nav{padding:6px 10px;display:grid;gap:2px}
.ni{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--sub);font-weight:500;font-size:13.5px}
.ni .ic{width:18px;text-align:center;opacity:.75}
.ni.on{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-weight:700}
.ni.on .ic{opacity:1}
.ni.sub{padding-left:26px;font-size:13px}
.ni.sub .ic{opacity:.4;font-size:11px}
.ncap{padding:14px 20px 4px;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--mut)}
.suser{margin-top:auto;border-top:1px solid var(--line);padding:14px 16px;display:flex;gap:10px;align-items:center}
.suser .nm{font-weight:600;font-size:13px}
.suser .em{font-size:11px;color:var(--mut)}
.amain{flex:1;min-width:0;background:var(--bg);display:flex;flex-direction:column}
.abar{display:flex;align-items:center;gap:12px;padding:14px 24px;background:var(--sf);border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:40}
.abar h1{font-size:17px;font-weight:800;letter-spacing:-.01em}
.abar .sp{flex:1}
.abody{padding:22px 24px;display:grid;gap:16px;align-content:start}
.menu-btn{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--sf);font-size:16px;align-items:center;justify-content:center;flex:none}
.backdrop{display:none;position:fixed;inset:0;background:rgba(10,16,28,.45);z-index:70}
body.nav-open .backdrop{display:block}

/* ── 카드/그리드 ── */
.card{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:18px}
.card.flat{box-shadow:none}
.cardh{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cardh h3{font-size:14.5px;font-weight:700}
.cardh .sp{flex:1}
.cardh .more{font-size:12.5px;color:var(--accent);font-weight:600;cursor:pointer}
.hint{font-size:12px;color:var(--mut)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:16px}

/* ── KPI ── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpis.three{grid-template-columns:repeat(3,1fr)}
.kpis.five{grid-template-columns:repeat(5,1fr)}
.kpi{background:var(--sf);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi .l{font-size:12px;color:var(--sub);font-weight:500}
.kpi .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.kpi .v small{font-size:13px;font-weight:600;color:var(--mut)}
.kpi .d{font-size:11.5px;margin-top:3px;font-weight:600}
.up{color:var(--good)} .dn{color:var(--bad)}

/* ── 버튼/뱃지/필드 ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:9px;font-weight:700;font-size:13px;border:1px solid var(--line);background:var(--sf);color:var(--ink);cursor:pointer}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.soft{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:transparent;color:var(--accent)}
.btn.bad{background:var(--badbg);border-color:transparent;color:var(--bad)}
.btn.good{background:var(--goodbg);border-color:transparent;color:var(--good)}
.btn.lg{padding:11px 22px;font-size:14.5px;border-radius:11px}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:7px}
.btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.g{background:var(--goodbg);color:var(--good)}
.pill.w{background:var(--warnbg);color:var(--warn)}
.pill.b{background:var(--badbg);color:var(--bad)}
.pill.n{background:var(--sf2);color:var(--sub)}
.pill.a{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pill.gold{background:linear-gradient(100deg,#faf0cf,#f0d98a);color:#7a5b12;border:1px solid #e3c86a}
.pill.dia{background:linear-gradient(100deg,#e3edfd,#c8dbf9);color:#274b8f;border:1px solid #a3bfeb;box-shadow:0 0 0 2px color-mix(in srgb,#6d9ae8 25%,transparent)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--sf2);border:1px solid var(--line);color:var(--sub);white-space:nowrap}
.tag .pdot{width:7px;height:7px;border-radius:2px;display:inline-block}
.pdot{width:7px;height:7px;border-radius:2px;display:inline-block}
.yt{background:#e33}.tt{background:#12b6c4}.ig{background:#c13584}.c24{background:#3a6ff2}.shp{background:#5e8e3e}.cn{background:#d0342c}
.avatar{width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.avatar.lg{width:52px;height:52px;font-size:17px}
.field{display:grid;gap:6px}
.lbl{font-size:12.5px;font-weight:700;color:var(--sub)}
.lbl em{color:var(--bad);font-style:normal}
.inp{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--sf);color:var(--ink);font-size:13.5px;min-height:38px}
.inp.ph{color:var(--mut)}
.inp .suf{margin-left:auto;color:var(--mut);font-size:12px;font-weight:600}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
input.inp,select.inp,textarea.inp{width:100%;font:inherit;font-size:13.5px}
select.inp{cursor:pointer}
textarea.inp{resize:vertical;min-height:84px;line-height:1.55;display:block}
.inpgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;color:var(--ink)}
.inpgroup .inp{flex:0 0 auto;width:auto;min-width:70px}
.inpgroup .grow{flex:1}
.chk{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--sub);cursor:pointer}
.box{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line);flex:none;margin-top:1px;background:var(--sf);cursor:pointer}
.box.on{background:var(--accent);border-color:var(--accent);position:relative}
.box.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.tog{width:36px;height:21px;border-radius:99px;background:var(--line);position:relative;flex:none;cursor:pointer;transition:background .15s}
.tog::after{content:"";position:absolute;top:2.5px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s,right .15s}
.tog.on{background:var(--accent)}
.tog.on::after{left:17px}
.seg{display:inline-flex;background:var(--sf2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{padding:5px 12px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--sub)}
.seg button.on{background:var(--sf);color:var(--ink);box-shadow:var(--sh);font-weight:700}

/* ── 선택 카드 ── */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{border:1.5px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:6px;background:var(--sf);cursor:pointer}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.opt .t{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}
.opt .d{font-size:12px;color:var(--sub)}
.opt .st{font-size:11.5px;font-weight:700}
.radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);margin-left:auto;flex:none}
.opt.sel .radio{border:5px solid var(--accent)}

/* ── 위저드 ── */
.steps{display:flex;gap:0;background:var(--sf);border-bottom:1px solid var(--line);padding:0 24px;overflow-x:auto}
.step{display:flex;align-items:center;gap:8px;padding:13px 18px 11px;font-size:12.5px;font-weight:600;color:var(--mut);border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer}
.step .n{width:20px;height:20px;border-radius:50%;background:var(--sf2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:700}
.step.done .n{background:var(--goodbg);border-color:transparent;color:var(--good)}
.step.now{color:var(--accent);border-bottom-color:var(--accent)}
.step.now .n{background:var(--accent);border-color:var(--accent);color:#fff}
[data-step]{display:none}
[data-step].on{display:grid;gap:16px}
.footbar{margin-top:auto;display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);background:var(--sf);flex-wrap:wrap}

/* ── 테이블 & 페이지네이션 ── */
.twrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap}
.tbl th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--mut);padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sf2)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.num{text-align:right}
.tbl .who{display:flex;align-items:center;gap:9px}
.tbl .who .nm{font-weight:600}
.tbl .who .sb{font-size:11.5px;color:var(--mut)}
.money{font-variant-numeric:tabular-nums;font-weight:700}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.pager button{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--sf);font-weight:800;color:var(--sub)}
.pager button:hover{border-color:var(--accent);color:var(--accent)}
.pager button:disabled{opacity:.35;cursor:default}

/* ── 차트 ── */
.chart{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;font-size:12px;color:var(--sub);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.bars{display:grid;gap:9px}
.brow{display:grid;grid-template-columns:88px 1fr 74px;gap:10px;align-items:center;font-size:12.5px}
.brow .bl{color:var(--sub);font-weight:600}
.brow .bt{display:block;height:14px;border-radius:0 4px 4px 0;background:var(--s1);min-width:2px}
.brow .bv{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.brow .btw{background:var(--sf2);border-radius:4px;overflow:hidden}
.prog{height:8px;border-radius:99px;background:var(--sf2);overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.mini{display:flex;align-items:baseline;gap:8px}
.mini .mv{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}

/* ── 랜딩 ── */
.lnav{display:flex;align-items:center;gap:22px;padding:16px 40px;border-bottom:1px solid var(--line);background:var(--sf);flex-wrap:wrap;position:sticky;top:0;z-index:40}
.lnav .lk{font-size:13.5px;font-weight:600;color:var(--sub);cursor:pointer}
.lnav .sp{flex:1}
.hero{padding:72px 40px 60px;text-align:center;background:radial-gradient(600px 280px at 50% -60px,color-mix(in srgb,var(--accent) 14%,transparent),transparent),var(--sf)}
.hero .eyebrow{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent);padding:5px 13px;border-radius:99px;margin-bottom:20px}
.hero h1{font-size:clamp(26px,4.4vw,44px);font-weight:900;letter-spacing:-.035em;line-height:1.22;text-wrap:balance}
.hero h1 .hl{color:var(--accent)}
.hero p{max-width:560px;margin:16px auto 0;color:var(--sub);font-size:15.5px;text-wrap:balance}
.hero .cta{display:flex;gap:10px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.lstats{display:flex;justify-content:center;gap:0;border-top:1px solid var(--line);background:var(--sf);flex-wrap:wrap}
.lstat{padding:22px 36px;text-align:center;border-right:1px solid var(--line)}
.lstat:last-child{border-right:0}
.lstat .v{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lstat .l{font-size:12px;color:var(--mut);margin-top:2px}
.lsec{padding:56px 40px;background:var(--bg)}
.lsec.alt{background:var(--sf)}
.lsec h2{font-size:24px;font-weight:800;letter-spacing:-.025em;text-align:center;text-wrap:balance}
.lsec .sub{text-align:center;color:var(--sub);margin:10px auto 34px;max-width:560px;text-wrap:balance}
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:0 auto}
.feat3.two{grid-template-columns:1fr 1fr;max-width:760px}
.feat3.four{grid-template-columns:repeat(4,1fr);max-width:1020px}
.feat{background:var(--sf);border:1px solid var(--line);border-radius:14px;padding:22px}
.lsec.alt .feat{background:var(--sf2)}
.feat .fi{width:38px;height:38px;border-radius:10px;background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent);display:grid;place-items:center;font-size:17px;margin-bottom:13px}
.feat h4{font-size:15px;font-weight:800;margin-bottom:6px}
.feat p{font-size:13px;color:var(--sub)}
.howrow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1020px;margin:0 auto}
.howrow.three{grid-template-columns:repeat(3,1fr);max-width:820px}
.how{background:var(--sf);border:1px solid var(--line);border-radius:14px;padding:20px}
.how .n{font-size:12px;font-weight:800;color:var(--accent);letter-spacing:.06em}
.how h5{font-size:14.5px;font-weight:800;margin:7px 0 5px}
.how p{font-size:12.5px;color:var(--sub)}
.lcta{padding:60px 40px;text-align:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,#000 8%),var(--accent))}
.lcta h2{color:#fff;font-size:26px;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.lcta p{color:rgba(255,255,255,.85);margin:10px 0 24px}
.lcta .btn{background:#fff;border-color:#fff;color:var(--accent)}
.lfoot{padding:26px 40px;background:var(--sf);border-top:1px solid var(--line);display:flex;gap:18px;align-items:center;font-size:12px;color:var(--mut);flex-wrap:wrap}

/* ── 인증 ── */
.auth{display:grid;grid-template-columns:440px 1fr;min-height:100vh}
.apane{padding:44px 44px 36px;background:var(--sf);display:flex;flex-direction:column}
.apane h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:20px 0 4px}
.apane .as{color:var(--sub);font-size:13px;margin-bottom:22px}
.aform{display:grid;gap:14px}
.aside{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 90%,#000 10%),var(--accent));color:#fff;padding:52px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.aside h3{font-size:24px;font-weight:900;letter-spacing:-.025em;line-height:1.3;text-wrap:balance}
.aside .q{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:16px 18px;font-size:13.5px}
.aside .q .qn{margin-top:10px;font-size:12px;opacity:.8;font-weight:600}
.divot{display:flex;align-items:center;gap:12px;color:var(--mut);font-size:12px}
.divot::before,.divot::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth{display:grid;gap:8px}
.oauth .btn{justify-content:center;padding:10px}

/* ── 기타 ── */
.note{display:flex;gap:10px;padding:12px 14px;border-radius:10px;font-size:12.5px;background:var(--warnbg);color:var(--warn);align-items:flex-start;flex-wrap:wrap}
.note.i{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent)}
.note.g{background:var(--goodbg);color:var(--good)}
.tline{display:grid;gap:0}
.tli{display:flex;gap:13px;padding:10px 0}
.tli .dotc{width:10px;height:10px;border-radius:50%;background:var(--line);margin-top:5px;flex:none;position:relative}
.tli.on .dotc{background:var(--accent)}
.tli:not(:last-child) .dotc::after{content:"";position:absolute;left:4px;top:14px;width:2px;height:34px;background:var(--line2)}
.tli .tt2{font-weight:700;font-size:13px}
.tli .td2{font-size:12px;color:var(--mut)}
.split{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.split:last-child{border-bottom:0}
.split .k{color:var(--sub)}
.split .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bigmoney{font-size:26px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vline{width:1px;background:var(--line);margin:2px 4px;align-self:stretch}

/* ── 콘텐츠 썸네일 (쇼츠 9:16) ── */
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.thumb{aspect-ratio:9/16;border-radius:10px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;font-size:30px;border:1px solid var(--line)}
.thumb .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 6px;font-size:10.5px;font-weight:700;color:#fff;background:linear-gradient(transparent,rgba(8,12,20,.75));line-height:1.3}
.thumb .cap small{display:block;font-weight:600;opacity:.85;font-size:10px;font-variant-numeric:tabular-nums}
.thumb .dur{position:absolute;top:6px;right:6px;background:rgba(8,12,20,.6);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:6px;font-variant-numeric:tabular-nums}

/* ── 제품 선택 ── */
.prods{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pimg{height:78px;border-radius:8px;display:grid;place-items:center;font-size:30px;background:var(--sf2)}
@media (max-width:900px){.prods{grid-template-columns:1fr 1fr}}

/* ── 그래프 호버 툴팁 ── */
.gtip{position:fixed;z-index:95;background:var(--ink);color:var(--bg);padding:8px 11px;border-radius:9px;font-size:11.5px;line-height:1.5;pointer-events:none;opacity:0;transition:opacity .1s;box-shadow:var(--sh);white-space:nowrap;font-variant-numeric:tabular-nums}
.gtip.show{opacity:1}
.gtip b{font-weight:800}
svg .hit{fill:transparent;cursor:crosshair}
svg .hit:hover{fill:color-mix(in srgb,var(--s1) 8%,transparent)}

/* ── 모달 팝업 ── */
.modal-ov{position:fixed;inset:0;background:rgba(10,16,28,.5);z-index:90;display:none;align-items:center;justify-content:center;padding:20px}
.modal-ov.open{display:flex}
.modal{background:var(--sf);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);width:460px;max-width:100%;max-height:86vh;overflow-y:auto;padding:22px}
.modal h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.modal .mhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.modal .mhead .x{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);font-size:13px;color:var(--sub)}
.modal .mfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ── 토스트 ── */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;font-size:13px;font-weight:600;box-shadow:var(--sh);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:100;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── 인덱스(허브) ── */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.hub a{display:block;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:var(--sf);font-weight:700;font-size:13.5px}
.hub a small{display:block;font-weight:500;font-size:11.5px;color:var(--mut);margin-top:2px}
.hub a:hover{border-color:var(--accent);color:var(--accent)}

/* ── 반응형 (태블릿/모바일) ── */
@media (max-width:1024px){
  .kpis.five{grid-template-columns:repeat(3,1fr)}
  .g21{grid-template-columns:1fr}
}
@media (max-width:900px){
  .wrap{padding:12px}
  .vtop{padding:8px 12px;gap:8px}
  .vtitle small{display:none}
  .chips{padding:0 12px 8px}
  .grid2,.grid3,.g21,.frow,.feat3,.feat3.two,.feat3.four,.opts,.opts.two{grid-template-columns:1fr}
  .howrow,.howrow.three{grid-template-columns:1fr 1fr}
  .kpis,.kpis.three{grid-template-columns:1fr 1fr}
  .kpis.five{grid-template-columns:1fr 1fr}
  .auth{grid-template-columns:1fr}
  .aside{padding:32px 24px}
  .apane{padding:28px 20px}
  .hero{padding:44px 20px 40px}
  .lnav{padding:12px 16px;gap:12px}
  .lnav .lk{display:none}
  .lsec{padding:36px 20px}
  .lstat{padding:14px 20px;flex:1;min-width:40%}
  .lcta{padding:44px 20px}
  .lfoot{padding:20px 16px}
  .abar{padding:12px 14px;gap:8px}
  .abody{padding:14px;gap:12px}
  .footbar{padding:12px 14px}
  .steps{padding:0 12px}
  /* 사이드바 → 오프캔버스 드로어 */
  .menu-btn{display:inline-flex}
  .app{position:relative}
  .snav{position:fixed;top:0;bottom:0;left:0;width:min(280px,80vw);z-index:80;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.nav-open .snav{transform:none}
}
@media (max-width:520px){
  .kpis,.kpis.three,.kpis.five{grid-template-columns:1fr}
  .howrow,.howrow.three{grid-template-columns:1fr}
  .roles a{padding:5px 9px;font-size:12px}
  .pgnav .lbl-page{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ── 빈 상태(데이터 없음) 샘플 모드 ── */
.estate{display:none;text-align:center;padding:72px 24px;border:1.5px dashed var(--line);border-radius:16px;background:var(--sf)}
.estate .eicon{font-size:44px;line-height:1}
.estate h3{font-size:17px;font-weight:800;margin:14px 0 6px;letter-spacing:-.01em}
.estate p{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:18px}
.estate .ehint{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--line2);font-size:12px;color:var(--mut)}
body.empty-demo:not([data-empty-swap]) .abody > *:not(.estate){display:none !important}
[hidden]{display:none !important}
body.empty-demo .estate{display:block}
body.empty-demo .footbar,body.empty-demo .steps{display:none}


/* ═══ Laravel 적용 추가분 ═══ */
.estate.show{display:block}
.chk input[type=checkbox],.chk input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
a.pager-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:var(--sf);font-weight:800;color:var(--sub);display:inline-grid;place-items:center}
a.pager-btn:hover{border-color:var(--accent);color:var(--accent)}
span.pager-btn{width:28px;height:28px;border:1px solid var(--line);border-radius:8px;display:inline-grid;place-items:center;opacity:.35;font-weight:800}
span.pager-btn.on{opacity:1;background:var(--accent);border-color:var(--accent);color:#fff}
.pager-gap{color:var(--mut);padding:0 2px}
a.pager-btn,span.pager-btn{min-width:28px;width:auto;padding:0 6px;font-size:12.5px}
.ferr{font-size:12px;color:var(--bad);margin-top:3px;display:block}
.inp.is-err{border-color:var(--bad)}
.note.b{border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:var(--badbg);color:var(--bad)}
form.inline{display:inline}
button[disabled],.btn[disabled]{opacity:.5;cursor:not-allowed}
.steps .step[data-locked]{opacity:.45;cursor:not-allowed}