/* ─────────────────────────────────────────────
   리바운드 디자인 시스템 — 사이트 공통 스타일
   (홈 index.html · 문서 docs.html 이 함께 씁니다)
   ───────────────────────────────────────────── */
:root{
  --brand:#FF5900; --brand-600:#E14E00; --brand-5:#FFF0EA; --brand-10:#FFE1D5;
  --blue:#2768FF; --blue-5:#E9F0FF;
  --ink:#161616; --ink2:#52525b; --sub:#737373; --mut:#a3a3a3;
  --line:#E8E8E8; --line-soft:#F0F0F1; --bg:#fafafa; --white:#fff;
  --nav-active:#F4F4F5; --th:#F5F6F8; --row:#F9FAFB;
  --font:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --shadow-card:0 -2px 8px -2px rgba(16,24,40,.02),0 6px 20px -6px rgba(16,24,40,.04),0 2px 8px -2px rgba(16,24,40,.02);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.08),0 2px 4px -2px rgba(16,24,40,.06);
  --gnb-h:60px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:99px;}
::selection{background:var(--brand-10);}

/* ── 상단 바 ─────────────────────────────── */
.gnb{position:fixed;top:0;left:0;right:0;height:var(--gnb-h);z-index:40;display:flex;align-items:center;gap:6px;padding:0 24px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.gnb .bi{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.gnb .bi img{height:21px;display:block;}
.gnb .bi span{font-size:13px;font-weight:700;letter-spacing:-.01em;padding-left:12px;border-left:1px solid var(--line);color:var(--ink2);white-space:nowrap;}
.gnb .tabs{display:flex;align-items:center;gap:2px;margin-left:22px;min-width:0;overflow-x:auto;scrollbar-width:none;}
.gnb .tabs::-webkit-scrollbar{display:none;}
.gnb .tabs a{padding:7px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink2);white-space:nowrap;}
.gnb .tabs a:hover{background:rgba(0,0,0,.04);}
.gnb .tabs a.on{color:var(--brand);background:var(--nav-active);}
.gnb .sp{flex:1;}
.gnb .meta{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap;}
.gnb .repo{font-size:12px;font-weight:600;color:var(--sub);padding:6px 11px;border-radius:8px;border:1px solid var(--line);white-space:nowrap;}
.gnb .repo:hover{background:var(--bg);color:var(--ink);}
.burger{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}

/* ── 공통 유틸 ───────────────────────────── */
.wrapx{overflow-x:auto;}
.mono{font-family:var(--mono);}
code.tk{font-family:var(--mono);font-size:12.5px;background:var(--bg);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px;color:var(--ink);}
.snip{font-family:var(--mono);font-size:11.5px;line-height:1.85;color:var(--ink2);background:#fff;padding:13px 16px;overflow-x:auto;white-space:pre;cursor:pointer;margin:0;}
.snip:hover{background:var(--row);}
#toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);opacity:0;pointer-events:none;transition:.18s;background:#161616;color:#fff;font-size:12.5px;font-weight:600;padding:10px 16px;border-radius:10px;z-index:60;}
#toast.on{opacity:1;transform:translateX(-50%);}

/* ── 제품 컴포넌트 재현 (문서·홈 공용) ───── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:700;border-radius:8px;border:0;background:var(--brand);color:#fff;cursor:pointer;transition:.2s;font-family:inherit;}
.btn-primary:hover{opacity:.9;}
.btn-primary:active{transform:scale(.98);}
.btn-primary[disabled]{opacity:.4;cursor:not-allowed;}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--sub);cursor:pointer;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:.2s;font-family:inherit;}
.btn-outline:hover{background:var(--bg);color:var(--ink);border-color:rgba(115,115,115,.3);}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;font-size:13px;font-weight:500;border-radius:8px;border:0;background:none;color:var(--mut);cursor:pointer;font-family:inherit;}
.btn-ghost:hover{background:var(--bg);color:var(--ink);}
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;font-size:14px;font-weight:700;border-radius:12px;border:0;background:var(--brand);color:#fff;cursor:pointer;font-family:inherit;}
.btn-cta:hover{opacity:.9;}
.btn-cta.sec{background:#fff;color:var(--ink);border:1px solid var(--line);}
.btn-cta.sec:hover{background:var(--bg);opacity:1;}

.bdg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--sub);white-space:nowrap;}
.bdg::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0;background:#12B76A;}
.bdg.bad::before{background:#EF4444;}
.bdg.new::before{background:#7DA4FF;}
.bdg.info::before{background:#2768FF;}
.bdg.warn::before{background:#FF5900;}
.bdg.done{color:var(--mut);}
.bdg.done::before{background:var(--mut);}
.cnt{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:99px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}

.inp{width:100%;padding:10px 14px;font-size:13px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit;transition:border-color .15s;}
.inp::placeholder{color:var(--mut);}
.inp:focus{outline:none;border-color:var(--brand);box-shadow:none;}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.flabel{display:block;font-size:13px;font-weight:600;margin-bottom:6px;}
.fhelp{font-size:12px;color:var(--mut);margin:6px 0 0;}
.ferr{font-size:12px;color:#EF4444;margin:6px 0 0;}

.kpi{background:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-card);min-width:184px;}
.kpi .l{font-size:12px;color:var(--mut);font-weight:500;}
.kpi .v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;}
.kpi .v em{font-style:normal;font-size:14px;font-weight:600;color:var(--sub);margin-left:2px;}

.ptab{width:100%;border-collapse:collapse;background:#fff;}
.ptab th{background:var(--th);font-size:14px;font-weight:600;color:var(--mut);text-align:center;padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap;}
.ptab td{font-size:15px;color:var(--sub);text-align:center;padding:12px 20px;border-bottom:1px solid var(--line);white-space:nowrap;}
.ptab tbody tr:last-child td{border-bottom:0;}
.ptab tbody tr:hover{background:var(--row);}
.ptab .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;}

.pmodal{width:100%;max-width:400px;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px rgba(16,24,40,.1),0 8px 10px -6px rgba(16,24,40,.1);}
.pmodal .mh{display:flex;align-items:flex-start;justify-content:space-between;padding:24px 24px 8px;}
.pmodal .mh h4{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;}
.pmodal .mh p{margin:4px 0 0;font-size:14px;color:var(--mut);}
.pmodal .mb{padding:16px 24px 0;}
.pmodal .mf{display:flex;justify-content:flex-end;gap:8px;padding:20px 24px 24px;}
.xbtn{border:0;background:none;color:var(--mut);cursor:pointer;padding:4px;border-radius:8px;line-height:0;}
.xbtn:hover{background:var(--bg);color:var(--ink);}

.pnav{width:238px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 10px;}
.pnav .gl{padding:8px 12px 4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#a1a1aa;}
.pnav .it{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;color:#52525b;}
.pnav .it .ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8A9099;flex-shrink:0;}
.pnav .it.on{background:var(--nav-active);color:var(--brand);font-weight:600;}
.pnav .it.on .ic{color:var(--brand);}
.pnav .it .sp{flex:1;}

/* ── 푸터 ────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:38px 24px 56px;background:var(--bg);}
.foot .in{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.foot img{height:20px;opacity:.9;}
.foot .txt{font-size:12.5px;color:var(--mut);line-height:1.8;}
.foot .sp{flex:1;}
.foot .lk{display:flex;gap:18px;font-size:12.5px;color:var(--sub);font-weight:600;}
.foot .lk a:hover{color:var(--ink);}

@media (max-width:860px){
  .gnb{padding:0 16px;gap:4px;}
  .gnb .bi span{display:none;}
  .gnb .tabs{margin-left:10px;}
  .gnb .meta{display:none;}
}