:root {
    --bg:#F8FAFC; --card:#FFFFFF; --ink:#1E293B; --muted:#64748B; --line:#E9EEF3; --line-2:#CBD5E1;
    --brand:#4C8BF5; --brand-d:#2563EB; --brand-l:#7BAAF8; --brand-ink:#2563EB; --brand-50:#F1F7FF; --brand-100:#DEEBFE;
    --accent:#4C8BF5; --accent-d:#2563EB; --accent-ink:#FFFFFF; --accent-50:#F1F7FF;
    --btn-bg:#0F172A; --btn-fg:#FFFFFF; --btn-bg-h:#1E293B;
    --warn:#FEF6E7; --warn-l:#E0A028; --warn-ink:#96631A; --err:#FDECEC; --err-l:#DC2626; --ok:#059669;
    --ghost:#F1F5F9; --ghost-h:#E7EDF3; --panel:#F8FAFC; --field:#FFFFFF; --disabled-bg:#E7EDF3; --disabled-ink:#94A3B8;
    --header-bg:#FFFFFF; --header-fg:#1E293B; --header-span:#94A3B8;
    --radius:10px; --shadow:0 1px 3px rgba(15,23,42,.06); color-scheme:light;
  }
  :root[data-theme="dark"] {
    --bg:#25262A; --card:#2F3036; --ink:#E7E8EC; --muted:#9EA0A8; --line:#3A3B42; --line-2:#494B54;
    --brand:#5E8CD4; --brand-d:#4A72B4; --brand-l:#82A8DE; --brand-ink:#96B7E6; --brand-50:#31323A; --brand-100:#3B3D47;
    --accent:#5E8CD4; --accent-d:#4A72B4; --accent-ink:#0E1420; --accent-50:#31323A;
    --btn-bg:#E7E8EC; --btn-fg:#25262A; --btn-bg-h:#F2F3F6;
    --warn:#332C18; --warn-l:#C79A34; --warn-ink:#E2C283; --err:#37231F; --err-l:#E88A72; --ok:#5FBE96;
    --ghost:#35363D; --ghost-h:#3F414A; --panel:#2B2C31; --field:#2A2B31; --disabled-bg:#383A42; --disabled-ink:#797B84;
    --header-bg:#2A2B30; --header-fg:#E7E8EC; --header-span:#9EA0A8;
    --shadow:0 1px 3px rgba(0,0,0,.5); color-scheme:dark;
  }
  * { box-sizing:border-box; }
  body { margin:0; font-family:'Pretendard','Pretendard Variable',-apple-system,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
  header { background:var(--header-bg); color:var(--header-fg); padding:16px 28px; display:flex; align-items:baseline; gap:12px; border-bottom:1px solid var(--line); }
  header h1 { margin:0; font-size:20px; font-weight:700; letter-spacing:-.2px; color:var(--brand); } header span { color:var(--header-span); font-size:13px; }
  /* 2중 교차검증 헤더 스위치(화면 좌상단 고정) */
  .xv-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; color:var(--header-span); user-select:none; align-self:center; }
  .xv-toggle input { position:absolute; opacity:0; width:0; height:0; }
  .xv-track { width:34px; height:19px; background:var(--line-2); border-radius:99px; position:relative; transition:.2s; flex:0 0 auto; }
  .xv-track::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 2px rgba(0,0,0,.3); }
  .xv-toggle input:checked + .xv-track { background:var(--brand); }
  .xv-toggle input:checked + .xv-track::after { transform:translateX(15px); }
  .xv-label { white-space:nowrap; }
  @media (max-width:640px) { header .hdr-sub { display:none; } .xv-label { display:none; } }
  main { max-width:1020px; margin:26px auto; padding:0 20px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow); }
  .demo { background:var(--warn); border:1px solid var(--warn-l); border-radius:10px; padding:10px 14px; font-size:14px; margin-bottom:16px; color:var(--warn-ink); }
  #drop { border:1.5px dashed var(--line-2); border-radius:14px; padding:32px; text-align:center; cursor:pointer; color:var(--muted); transition:.15s; }
  #drop.hover { border-color:var(--brand-l); background:var(--brand-50); color:var(--brand-ink); }
  #drop b { color:var(--ink); }
  .files { margin-top:12px; font-size:13px; color:var(--ink); max-height:130px; overflow:auto; text-align:left; }
  button { font:inherit; border:none; border-radius:var(--radius); padding:10px 18px; cursor:pointer; font-weight:600; transition:background .15s, border-color .15s, box-shadow .15s, transform .05s; }
  button:active { transform:translateY(.5px); }
  .primary { background:var(--btn-bg); color:var(--btn-fg); } .primary:hover { background:var(--btn-bg-h); } .primary:disabled { background:var(--disabled-bg); color:var(--disabled-ink); cursor:default; }
  .ghost { background:var(--ghost); color:var(--ink); } .ghost:hover { background:var(--ghost-h); }
  .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
  h3 { margin:0 0 14px; font-size:15px; font-weight:700; }
  .cols { display:flex; flex-wrap:wrap; gap:10px 18px; }
  .cols label, .toggle { font-size:14px; color:var(--ink); display:flex; align-items:center; gap:6px; }
  .toggle { margin-top:14px; }
  table { width:100%; border-collapse:collapse; margin-top:6px; font-size:14px; }
  th { background:var(--brand); color:#fff; padding:9px 8px; text-align:left; font-size:13px; font-weight:600; white-space:nowrap; }
  th:first-child { border-top-left-radius:8px; } th:last-child { border-top-right-radius:8px; }
  td { border:1px solid var(--line); padding:8px; }
  td.num { text-align:right; font-variant-numeric:tabular-nums; }
  tr.err td { background:var(--err); } tr.warn td { background:var(--warn); }
  .muted { color:var(--muted); font-size:13px; }
  .hidden { display:none; }
  .spin { display:inline-block; width:16px; height:16px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%; animation:s .7s linear infinite; vertical-align:-3px; margin-right:8px; }
  @keyframes s { to { transform:rotate(360deg); } }
  .dgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
  .dgrid label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); gap:4px; }
  #docCard input, #docCard textarea { font:inherit; padding:8px 10px; border:1px solid var(--line-2); border-radius:10px; color:var(--ink); width:100%; }
  #docCard select { font:inherit; padding:7px 10px; }
  #docCard input[type=radio], #docCard input[type=checkbox] { width:auto; }
  #itemTable input { width:100%; border:1px solid transparent; border-radius:6px; padding:5px; background:transparent; }
  #itemTable input:focus { border-color:var(--brand-l); outline:none; background:var(--field); }
  #itemTable td { padding:2px 4px; } #itemTable td.num input { text-align:right; }
  #docCard summary { cursor:pointer; }
  .delx { background:none; color:var(--err-l); font-size:18px; padding:0 8px; cursor:pointer; border:none; }
  #builderTable td { padding:4px; } #builderTable input, #builderTable select { width:100%; font:inherit; padding:5px 6px; border:1px solid var(--line-2); border-radius:6px; }
  #builderTable .ord { background:none; border:1px solid var(--line-2); border-radius:6px; cursor:pointer; padding:2px 6px; margin:0 1px; }
  code { background:var(--brand-50); color:var(--brand-ink); padding:1px 5px; border-radius:4px; font-size:12px; }
  .libcat { border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin-bottom:8px; }
  .libcat-h { font-weight:700; font-size:13px; color:var(--brand-ink); margin-bottom:5px; }
  .libitem { display:flex; align-items:baseline; gap:6px; font-size:13px; margin:4px 0; flex-wrap:wrap; }
  .libitem .lib-add { padding:3px 10px; white-space:nowrap; }
  .libitem label { display:inline-flex; align-items:baseline; gap:5px; }
  /* 커스텀 양식 빌더 — 새 열 추가가 눈에 보이게(플래시) + 활성 상태 배지 */
  @keyframes rowFlash { from { background:var(--brand-100); } to { background:transparent; } }
  #builderTable tr.flash td { animation:rowFlash 1.4s ease-out; }
  .cf-badge { display:inline-flex; align-items:center; gap:4px; background:var(--brand); color:#fff; border-radius:20px; padding:2px 10px; font-size:11.5px; font-weight:700; }
  .cf-badge.off { background:var(--ghost); color:var(--muted); }
  #builder.cf-live { border:1.5px solid var(--brand-l); border-radius:12px; padding:14px; background:var(--brand-50); }
  .cf-toast { font-size:12.5px; color:var(--brand-ink); font-weight:600; }
  .ti { font-size:1.02em; line-height:1; vertical-align:-1.5px; }
  .modenav { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .navwrap { margin-bottom:20px; }
  .navgroup { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .navgroup + .navgroup { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
  .navlabel { font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; white-space:nowrap; margin-right:2px; }
  .mode-btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand-ink); border:1px solid var(--line); border-radius:11px; padding:10px 18px; font-weight:600; font-size:15px; cursor:pointer; transition:.15s; }
  .mode-btn:hover { background:var(--brand-100); }
  .mode-btn.active { background:var(--brand); color:#fff; border-color:var(--brand-ink); }
  .mode-btn.sm { padding:7px 13px; font-size:13.5px; font-weight:600; }
  .mode-btn.sm .ti { font-size:15px; }
  .libitem .ghost.active { background:var(--brand); color:#fff; border-color:var(--brand-ink); }
  .fxp { font-weight:700; }
  .mode-btn .ti { font-size:17px; }
  .subtabs { display:flex; flex-wrap:wrap; gap:8px; }
  .subtab { display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand-ink); border:1px solid var(--line); border-radius:10px; padding:8px 15px; font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
  .subtab:hover { background:var(--brand-100); }
  .subtab.active { background:var(--brand); color:#fff; border-color:var(--brand-ink); }
  .calc { max-width:200px; } #mode-tax input, #mode-acct input, #mode-tax select, #mode-acct select { font:inherit; padding:9px 11px; border:1px solid var(--line-2); border-radius:10px; }
  #mode-acct input[type=checkbox], #mode-tax input[type=radio], #mode-acct input[type=radio] { padding:0; }
  .calcout { margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; font-size:14px; }
  .calcout .rl { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--line); }
  .calcout .rl:last-child { border-bottom:none; }
  .calcout .big { font-size:22px; font-weight:700; color:var(--brand-ink); }
  .calcout .tag { font-size:11px; background:var(--ghost); color:var(--muted); padding:1px 6px; border-radius:5px; margin-left:6px; }
  .calcout ul { margin:4px 0 0; padding-left:18px; } .calcout li { padding:3px 0; }
  #mode-law input, #mode-law select, #mode-law textarea { font:inherit; padding:9px 11px; border:1px solid var(--line-2); border-radius:10px; width:100%; color:var(--ink); }
  #mode-law input[type=radio] { width:auto; }
  #mode-law label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
  .law-btn { display:inline-flex; align-items:center; gap:7px; background:var(--brand-50); color:var(--brand-ink); border:1px solid var(--line); border-radius:10px; padding:8px 15px; font-weight:600; font-size:14px; cursor:pointer; transition:.15s; }
  .law-btn:hover { background:var(--brand-100); }
  .law-btn.active { background:var(--brand); color:#fff; border-color:var(--brand-ink); }
  .quickfill { background:var(--brand-50); border:1px solid var(--brand-100); border-radius:12px; padding:10px 12px; margin:2px 0 14px; }
  .quickfill .qbtn { padding:6px 12px; border-radius:9px; cursor:pointer; font-weight:600; font-size:13px; }
  .quickfill input[type=text], .quickfill input:not([type]) { flex:1; min-width:180px; }
  .iconbtn { align-self:center; background:var(--ghost); color:var(--muted); border:1px solid var(--line); border-radius:9px; padding:8px 11px; cursor:pointer; line-height:1; transition:.15s; }
  .iconbtn:hover { background:var(--ghost-h); color:var(--ink); }
  .usermenu { position:fixed; top:60px; right:22px; z-index:60; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; min-width:196px; }
  .usermenu .umi { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; color:var(--ink); font-size:14px; padding:9px 12px; border-radius:8px; cursor:pointer; text-align:left; font-weight:500; }
  .usermenu .umi:hover { background:var(--ghost); }
  .usermenu .umi .ti { color:var(--muted); font-size:18px; }
  .usermenu .umi.danger { color:var(--err-l); } .usermenu .umi.danger .ti { color:var(--err-l); }
  .usermenu .umsep { height:1px; background:var(--line); margin:5px 4px; }
  .usermenu .umhead { padding:8px 12px 10px; }
  .modal-ov { position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:center; justify-content:center; z-index:100; padding:16px; }
  .modal-ov.hidden { display:none; }
  .modal-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 26px; width:100%; max-width:400px; box-shadow:0 20px 60px rgba(0,0,0,.35); max-height:calc(100vh - 32px); overflow-y:auto; }
  .modal-card.wide { max-width:920px; }  /* 결제·구독 등 여러 카드를 한 화면에 넓게 */
  .plan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px; margin-top:12px; }
  .plan-grid .plan { margin-top:0; }  /* 그리드 gap이 간격 담당 */
  .modal-card h3 { font-size:18px; margin:0 0 6px; }
  .modal-x { float:right; background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; padding:0; margin:-4px -4px 0 0; }
  .mfield { margin:14px 0; } .mfield label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
  .mfield input { width:100%; padding:10px 12px; }
  .mlink { color:var(--brand-ink); cursor:pointer; font-size:13px; }
  .plan { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-top:10px; }
  .plan.pro { border:2px solid var(--brand); }
  .abadge { display:inline-block; background:var(--brand-50); color:var(--brand-ink); font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; }
  .abadge.hidden { display:none; }  /* .abadge display가 .hidden을 덮어쓰는 함정 방지(프로 배지 게스트 노출) */
  .impzone { border:1.5px dashed var(--line-2); border-radius:14px; padding:14px 16px; margin:2px 0 10px; text-align:center; transition:.15s; }
  .impzone.drag { border-color:var(--brand); background:var(--brand-50); }
  .impzone .imphint { font-size:13px; color:var(--muted); margin-bottom:10px; line-height:1.5; }
  .impzone .imphint b { color:var(--ink); }
  .impzone .imphint .ti { color:var(--brand-ink); font-size:18px; vertical-align:-3px; }
  input, select, textarea { background:var(--field); color:var(--ink); border:1px solid var(--line-2); border-radius:10px; }
  #itemTable input { background:transparent; }
  input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand-l); box-shadow:0 0 0 3px var(--brand-50); }
  /* ── 무료/비로그인 사용자 AI 잠금 — body.no-ai 일 때 .ai-gate/.quickfill 위에 반투명 빗금 + 입력차단(클릭=페이월) ── */
  .ai-gate { position:relative; }
  body.no-ai .ai-gate, body.no-ai .quickfill { position:relative; user-select:none; }
  body.no-ai .ai-gate::after, body.no-ai .quickfill::after {
    content:"🔒 구독 전용"; position:absolute; inset:0; z-index:25;
    display:flex; align-items:center; justify-content:center; gap:5px;
    font-size:12px; font-weight:700; color:var(--muted); letter-spacing:-.2px;
    white-space:nowrap; overflow:hidden; padding:4px; border-radius:inherit; cursor:pointer;
    text-shadow:0 1px 2px var(--card);
    background:
      repeating-linear-gradient(45deg, rgba(125,125,130,.20) 0 2px, transparent 2px 11px),
      rgba(125,125,130,.14);
  }
  /* 오버레이 아래 실제 입력·버튼은 클릭/포커스 불가(입력 차단) — 오버레이(::after)만 클릭 받아 페이월로 */
  body.no-ai .ai-gate input, body.no-ai .ai-gate textarea, body.no-ai .ai-gate select,
  body.no-ai .ai-gate button, body.no-ai .ai-gate [contenteditable], body.no-ai .ai-gate .chip,
  body.no-ai .quickfill input, body.no-ai .quickfill textarea, body.no-ai .quickfill button,
  body.no-ai .quickfill .qbtn, body.no-ai .quickfill .chip { pointer-events:none; }
  /* 중첩 방지: 잠긴 영역 안에 또 잠긴 영역이 있으면 바깥 오버레이 하나만 보이게 */
  body.no-ai .ai-gate .ai-gate::after, body.no-ai .ai-gate .quickfill::after,
  body.no-ai .quickfill .ai-gate::after { display:none; }
  /* ── 빠른 검색 런처(Ctrl+K) — 키워드로 아무 기능이나 바로 이동 ── */
  .launch-ov { position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:flex-start; justify-content:center; z-index:120; padding:74px 16px 16px; }
  .launch-ov.hidden { display:none; }
  .launch-box { width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 64px rgba(0,0,0,.45); overflow:hidden; }
  .launch-box > input { width:100%; border:none; border-bottom:1px solid var(--line); background:transparent; padding:15px 18px; font-size:16px; color:var(--ink); border-radius:0; }
  .launch-box > input:focus { outline:none; box-shadow:none; border-color:var(--line); }
  .launch-list { max-height:52vh; overflow-y:auto; padding:6px; }
  .launch-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; cursor:pointer; }
  .launch-item .li-t { font-weight:600; font-size:14px; color:var(--ink); }
  .launch-item .li-d { font-size:12px; color:var(--muted); margin-top:1px; }
  .launch-item.sel, .launch-item:hover { background:var(--brand-50); }
  .launch-empty { padding:20px; text-align:center; color:var(--muted); font-size:13px; }
  .launch-hint { padding:8px 15px; border-top:1px solid var(--line); font-size:11px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }
  .launch-hint b { color:var(--ink); font-weight:600; }