:root{
    --ink:#1c2530; --ink-soft:#4a5560; --ink-mute:#8892a0;
    --paper:#f6f7f9; --card:#ffffff; --line:#e5e8ec; --line-strong:#d3d8de;
    --accent:#2f6f5e; --accent-soft:#e5f0ec; --accent-ink:#1e4d40;
    --db:#2a5b8c; --db-soft:#e6eef6;
    --acq:#8a5a2b; --acq-soft:#f5ebdd;
    --ok:#2f7d4f; --ok-soft:#e4f2e9;
    --hold:#9a7714; --hold-soft:#f7efd6;
    --no:#a33636; --no-soft:#f7e4e4;
    --cert-sure:#586573; --cert-sure-soft:#eef0f2;
    --cert-guess:#2a5b8c; --cert-guess-soft:#e6eef6;
    --cert-lack:#b5590f; --cert-lack-soft:#faead9;
    --radius:12px; --radius-sm:9px;
    --shadow:0 1px 2px rgba(28,37,48,.04),0 2px 8px rgba(28,37,48,.05);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --ink:#e8eaed; --ink-soft:#aab2bd; --ink-mute:#7c8794;
      --paper:#14181d; --card:#1d232a; --line:#2b323b; --line-strong:#3a424c;
      --accent:#5dbfa3; --accent-soft:#1e2e2a; --accent-ink:#9fe1cb;
      --db:#7bb0e0; --db-soft:#1a2733;
      --acq:#d3a066; --acq-soft:#2c2418;
      --ok:#6bc48c; --ok-soft:#1a2a20;
      --hold:#d8bd63; --hold-soft:#2a2716;
      --no:#e08585; --no-soft:#2c1c1c;
      --cert-sure:#aab2bd; --cert-sure-soft:#262c33;
      --cert-guess:#7bb0e0; --cert-guess-soft:#1a2733;
      --cert-lack:#e0a85c; --cert-lack-soft:#2e2013;
      --shadow:0 1px 2px rgba(0,0,0,.2),0 2px 8px rgba(0,0,0,.25);
    }
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","Segoe UI",sans-serif;
    background:var(--paper); color:var(--ink);
    -webkit-font-smoothing:antialiased; line-height:1.5;
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }
  #app{max-width:520px; margin:0 auto; min-height:100vh;}
  .screen{display:none; padding:14px 16px 24px;}
  .screen.active{display:block;}

  header.top{
    position:sticky; top:0; z-index:20; background:var(--paper);
    padding:16px 16px 8px; max-width:520px; margin:0 auto;
  }
  .top h1{font-size:22px; font-weight:700; letter-spacing:-.02em; margin:0;}
  .top .sub{font-size:12.5px; color:var(--ink-mute); margin-top:2px;}
  /* ===== 헤더 홈 버튼 ===== */
  header.top{display:flex; align-items:center; gap:8px;}
  header.top .ht{flex:1; min-width:0;}
  header.top .home-btn{
    background:none; border:none; color:var(--ink-soft); cursor:pointer; flex-shrink:0;
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 2px 2px 10px;
  }
  /* 2026-09-06: 하단탭과 같은 크기로 맞췄더니 여전히 작다는 피드백 — 하단탭보다 확실히 크게 키움 */
  header.top .home-btn .ic{font-size:26px; line-height:1;}
  header.top .home-btn .lbl{font-size:12px; line-height:1; font-weight:600;}
  /* ===== 음성 입력(듣고 받아쓰기) 버튼 ===== */
  header.top .mic-btn{background:none; border:none; font-size:18px; line-height:1; color:var(--ink-soft); cursor:pointer; padding:6px; border-radius:50%; flex-shrink:0;}
  header.top .mic-btn.listening, #cust-mic-btn.listening, #hdr-mic-btn.listening{background:#FDEAEA; color:#D6392E; animation:mic-pulse 1.1s ease-in-out infinite;}
  @keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(214,57,46,.35);} 50%{box-shadow:0 0 0 7px rgba(214,57,46,0);}}
  /* ===== 스플래시 ===== */
  /* 2026-09-02: 스플래시(로딩화면) 색을 홈 화면 상단 배너와 같은 청록~초록 톤으로 통일 */
  #splash{position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
    background:linear-gradient(160deg,#37C2EF 0%,#1FC1B4 52%,#18B778 100%); color:#fff; transition:opacity .8s ease;}
  #splash.hide{opacity:0; pointer-events:none;}
  #splash .mascots{display:flex; gap:16px; margin-bottom:28px;}
  /* 오리지널 심플 캐릭터(플레이스홀더) — 실제 캐릭터 이미지가 있으면 이 자리를 <img>로 교체 */
  #splash .m{width:62px; height:72px; border-radius:44% 44% 48% 48%/50% 50% 52% 52%; background:#fff; position:relative;
    box-shadow:0 12px 26px rgba(0,0,0,.18); animation:bob 1.9s ease-in-out infinite;}
  #splash .m:nth-child(2){animation-delay:.22s; background:#E8F3FF;}
  #splash .m:nth-child(3){animation-delay:.44s; background:#CFE6FF;}
  #splash .m .eye{position:absolute; top:28px; width:8px; height:8px; border-radius:50%; background:#0A55B8;}
  #splash .m .eye.l{left:16px;} #splash .m .eye.r{right:16px;}
  #splash .m .mouth{position:absolute; top:44px; left:50%; transform:translateX(-50%); width:16px; height:8px; border-bottom:2.5px solid #0A55B8; border-radius:0 0 12px 12px;}
  @keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
  #splash .mascot-img.sp{width:154px; height:auto; margin-bottom:26px; filter:drop-shadow(0 14px 26px rgba(0,0,0,.25)); animation:bob 2s ease-in-out infinite;}
  .home-hero .mascot-img.hm{width:94px; height:auto; margin-bottom:4px; filter:drop-shadow(0 6px 12px rgba(0,0,0,.18));}
  #splash h1{font-size:27px; font-weight:800; letter-spacing:-.5px; margin:0;}
  #splash .tag{margin-top:9px; font-size:13px; opacity:.9;}
  #splash .brand{margin-top:22px; font-size:11px; opacity:.72; letter-spacing:1.5px;}
  /* ===== 홈 랜딩 ===== */
  #s-home{padding:0;}
  .home-hero{background:linear-gradient(115deg,#37C2EF 0%,#1FC1B4 52%,#18B778 100%); color:#fff; border-radius:0 0 30px 30px; padding:40px 22px 34px; text-align:center; box-shadow:0 8px 24px rgba(24,150,140,.24);}
  .home-hero .logo-row{display:flex; justify-content:center; gap:9px; margin-bottom:14px;}
  .home-hero .m{width:32px; height:38px; border-radius:44% 44% 48% 48%/50% 50% 52% 52%; background:#fff; position:relative;}
  .home-hero .m:nth-child(2){background:#E8F3FF;} .home-hero .m:nth-child(3){background:#CFE6FF;}
  .home-hero .m .eye{position:absolute; top:14px; width:5px; height:5px; border-radius:50%; background:#0A55B8;}
  .home-hero .m .eye.l{left:8px;} .home-hero .m .eye.r{right:8px;}
  .home-hero h1{font-size:28px; font-weight:800; margin:0; letter-spacing:-.2px;}
  .home-hero .sub{font-size:13.5px; opacity:.92; margin-top:7px;}
  #s-home.active{display:flex; flex-direction:column; min-height:100vh; padding:0;}
  .home-menu{flex:1; padding:18px 16px 22px; display:flex; flex-direction:column; gap:13px; max-width:520px; width:100%; margin:0 auto; box-sizing:border-box;}
  .usage-title{font-size:15px; font-weight:700; color:var(--ink-soft); text-align:center; margin-bottom:2px;}
  .usage-windows{display:flex; gap:12px; flex:1;}
  .usage-win{flex:1; min-height:200px; border-radius:20px; padding:18px 12px 16px; cursor:pointer; border:1.5px solid var(--line); transition:transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; align-items:center; text-align:center;}
  .usage-win:active{transform:scale(.98);}
  .usage-win .uw-badge{font-size:14px; font-weight:800; padding:5px 14px; border-radius:14px; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.12);}
  .usage-win .uw-icons{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; min-height:52px; margin:16px 0 14px;}
  .usage-win .uw-icons .ui{width:33px; height:33px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff; box-shadow:0 4px 9px rgba(0,0,0,.14);}
  .usage-win .uw-icons .ar{font-size:12px; font-weight:800; opacity:.5;}
  .usage-win .uw-words{display:flex; flex-direction:column; gap:7px; flex:1; width:100%; justify-content:center;}
  .usage-win .uw-words span{font-size:14px; font-weight:700; padding:9px 6px; border-radius:11px; background:rgba(255,255,255,.62);}
  .usage-win .uw-go{margin-top:14px; font-size:14px; font-weight:800;}
  .usage-win .uw-sub{font-size:11.5px; font-weight:600; opacity:.72; margin-top:5px; line-height:1.4;}
  .uw-connected{background:linear-gradient(165deg,#E6F8F0,#C9F0DF);} .uw-connected .uw-badge{background:#10A87F;} .uw-connected .uw-go{color:#0B7A5C;} .uw-connected .ui{background:linear-gradient(150deg,#34C79E,#0E9070);} .uw-connected .ar{color:#10A87F;} .uw-connected .uw-words span{color:#0B6E53;}
  .uw-separate{background:linear-gradient(165deg,#E9F7FE,#CDEEFB);} .uw-separate .uw-badge{background:#0FA0DC;} .uw-separate .uw-go{color:#0C82B4;} .uw-separate .ui{background:linear-gradient(150deg,#46C4F2,#0E8FCB);} .uw-separate .uw-words span{color:#0A6E9E;}
  .home-card-sm{padding:12px 16px !important; box-shadow:none !important;}
  .home-row2{display:flex; gap:10px;}
  .home-row2 .hc2{flex:1; min-width:0;}
  /* 자동 저장 표시 */
  #autosave-pill{position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:78px; z-index:130; background:rgba(16,168,127,.95); color:#fff; font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:20px; box-shadow:0 6px 16px rgba(0,0,0,.2); opacity:0; transition:opacity .3s, transform .3s; pointer-events:none;}
  #autosave-pill.show{opacity:1; transform:translateX(-50%) translateY(0);}
  /* 로그인 오버레이 */
  #ov-login{position:fixed; inset:0; z-index:120; background:linear-gradient(160deg,#37C2EF,#1FC1B4 52%,#18B778); display:none; align-items:center; justify-content:center; padding:24px;}
  #ov-login.show{display:flex;}
  .login-box{background:#fff; border-radius:22px; padding:30px 24px; width:100%; max-width:360px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.25);}
  .login-mascot{font-size:44px; margin-bottom:6px;}
  .login-t{font-size:20px; font-weight:800; color:var(--ink);}
  .login-s{font-size:12.5px; color:var(--ink-mute); line-height:1.6; margin:8px 0 18px;}
  #login-pw{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-size:16px; text-align:center;}
  #login-pw:focus{outline:none; border-color:var(--accent);}
  #login-msg{display:none; font-size:12.5px; color:#C0392B; margin-top:9px; line-height:1.5;}
  /* 담당자 선택 오버레이(2026-08-14) — 로그인 오버레이와 같은 틀 */
  #ov-advisor{position:fixed; inset:0; z-index:121; background:linear-gradient(160deg,#37C2EF,#1FC1B4 52%,#18B778); display:none; align-items:center; justify-content:center; padding:24px;}
  #ov-advisor.show{display:flex;}
  #advisor-select{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-size:16px; text-align:center; background:#fff;}
  #advisor-pw{width:100%; box-sizing:border-box; padding:13px 15px; border:1.5px solid var(--line); border-radius:12px; font-size:16px; text-align:center; margin-top:10px;}
  #advisor-pw:focus, #advisor-select:focus{outline:none; border-color:var(--accent);}
  #advisor-login-msg{display:none; font-size:12.5px; color:#C0392B; margin-top:9px; line-height:1.5;}
  /* 비밀번호 입력칸 옆 눈(보기) 아이콘 — 2026-08-15 추가 */
  .pw-wrap{position:relative;}
  .pw-wrap input{padding-right:44px !important;}
  .pw-eye{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; background:transparent; cursor:pointer; font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center; color:var(--ink-mute); padding:0; border-radius:8px;}
  .pw-eye:active{background:var(--paper);}
  /* 홈 클라우드 상태 */
  .cloud-bar{display:flex; align-items:center; gap:8px; justify-content:center; font-size:12px; color:var(--ink-mute); margin-top:4px;}
  .cloud-dot{width:9px; height:9px; border-radius:50%; background:#10A87F; display:inline-block;}
  .ap-hero{border-radius:16px; padding:15px 16px; color:#fff; background:linear-gradient(115deg,#37C2EF,#1FC1B4 52%,#18B778); margin-bottom:12px; text-align:center;}
  .ap-hero .ah-t{font-size:16px; font-weight:800;}
  .ap-hero .ah-s{font-size:12px; opacity:.95; margin-top:3px; line-height:1.5;}
  .ap-tabs{display:flex; gap:6px; margin-bottom:12px; position:sticky; top:0; z-index:5; background:var(--paper); padding:2px 0;}
  .ap-tab{flex:1; border:1.5px solid var(--line); background:var(--card); border-radius:12px; padding:8px 3px; text-align:center; cursor:pointer; font-size:11px; font-weight:700; color:var(--ink-mute); line-height:1.3;}
  .ap-tab .at-i{font-size:17px; display:block; margin-bottom:2px;}
  .ap-tab.on{background:var(--accent); color:#fff; border-color:var(--accent);}
  .ap-frame{background:#E8F7F1; border:1px solid #B9E6D5; border-radius:12px; padding:11px 13px; font-size:13px; color:#0B6E53; line-height:1.6; margin-bottom:12px; display:flex; gap:9px; align-items:flex-start;}
  .ap-frame .af-ic{font-size:20px; flex-shrink:0;}
  .ap-h{font-size:13px; font-weight:800; color:var(--ink); margin:12px 0 5px;}
  .ap-sum{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:14px; line-height:1.65; color:var(--ink-soft);}
  .ap-li{font-size:13.5px; line-height:1.7; padding:3px 2px; color:var(--ink-soft);} .ap-li b{color:var(--ink);}
  .ap-card{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px;}
  .ap-card-t{font-size:14px; font-weight:800; color:var(--accent); margin-bottom:4px;}
  .ap-card-b{font-size:13px; line-height:1.6; color:var(--ink-soft); white-space:pre-wrap;}
  .ap-script{background:linear-gradient(160deg,#FFFDF5,#FFF7E6); border:1px solid #F0DFB0; border-radius:12px; padding:13px; font-size:13.5px; line-height:1.75; color:#5A4A20; white-space:pre-wrap; margin-top:8px;}
  .ap-script-h{font-size:12px; font-weight:800; color:#B45309; margin-bottom:6px;}
  .ap-gen-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:13px;}
  .ap-ck{display:flex; align-items:center; gap:9px; padding:9px 4px; font-size:14px; font-weight:600; border-bottom:1px solid var(--line); cursor:pointer;}
  .ap-ck:last-of-type{border-bottom:none;}
  .ap-ck input{width:18px; height:18px; accent-color:var(--accent);}
  .su-hero{border-radius:16px; padding:16px; color:#fff; background:linear-gradient(115deg,#37C2EF,#1FC1B4 52%,#18B778); margin-bottom:14px;}
  .su-hero h3{margin:0 0 4px; font-size:17px;}
  .su-hero p{margin:0; font-size:12.5px; opacity:.95; line-height:1.5;}
  .su-flow{display:flex; align-items:stretch; gap:5px; margin-top:12px;}
  .su-flow .fb{flex:1; background:rgba(255,255,255,.18); border-radius:10px; padding:8px 4px; text-align:center; font-size:10.5px; font-weight:700; line-height:1.3;}
  .su-flow .fb .fi{font-size:17px; display:block; margin-bottom:3px;}
  .su-flow .fa{align-self:center; font-size:12px; opacity:.85;}
  .su-step{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; padding:14px 15px; margin-bottom:12px; background:var(--card);}
  .su-step.blue{border-left-color:#0FA0DC;} .su-step.green{border-left-color:#10A87F;} .su-step.gray{border-left-color:#8AA;}
  .su-step .su-n{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:13px; margin-right:8px; vertical-align:middle;}
  .su-step.blue .su-n{background:#0FA0DC;} .su-step.green .su-n{background:#10A87F;} .su-step.gray .su-n{background:#7C93A0;}
  .su-step .su-t{font-size:15.5px; font-weight:800; vertical-align:middle;}
  .su-step .su-d{font-size:13px; color:var(--ink-soft); line-height:1.7; margin-top:9px;}
  .su-step .su-d b{color:var(--ink);}
  .su-step ol,.su-step ul{margin:8px 0 0; padding-left:20px;} .su-step li{font-size:13px; line-height:1.75; margin-bottom:3px;}
  .su-key{background:#F0F4F8; border-radius:8px; padding:2px 7px; font-family:monospace; font-size:12px; color:#0A55B8;}
  .su-warn{background:#FFF4E5; border:1px solid #F6D9A8; border-radius:10px; padding:10px 12px; font-size:12.5px; color:#8A5A00; line-height:1.6; margin-top:10px;}
  .su-warn b{color:#B45309;}
  .su-tip{background:#E8F7F1; border:1px solid #B9E6D5; border-radius:10px; padding:10px 12px; font-size:12.5px; color:#0B6E53; line-height:1.6; margin-top:10px;}
  .su-link{display:inline-flex; align-items:center; gap:6px; margin-top:11px; background:var(--accent); color:#fff; font-weight:700; font-size:13px; padding:9px 15px; border-radius:11px; text-decoration:none;}
  .su-link.blue{background:#0FA0DC;} .su-link.green{background:#10A87F;} .su-link.dark{background:#24292F;}
  .su-cost{width:100%; border-collapse:collapse; margin-top:10px; font-size:12.5px;}
  .su-cost td{border:1px solid var(--line); padding:7px 9px;} .su-cost td:first-child{font-weight:700; background:#F7F9FB; white-space:nowrap;}
  .ug-os{background:#F4F8FC; border:1px solid #D8E6F2; border-radius:11px; padding:11px 13px; margin-top:10px;}
  .ug-os-t{font-size:13.5px; font-weight:800; color:#0C6FA8; margin-bottom:5px;}
  /* 2026-08-29(앱12): '자료 준비'/'상담·분석' 모드 구분을 없앴다(실사용은 이어서 하는 흐름인데
     모드에 따라 추가·이동 버튼이 숨겨져 오히려 방해였음). 그때 쓰던 모드별 배경·버튼숨김 CSS 삭제.
     고객 삭제는 confirm() 경고가 이미 있어 버튼을 굳이 숨기지 않아도 안전하다. */
  .home-card{display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:20px; padding:20px 18px; box-shadow:0 6px 20px rgba(14,114,224,.07); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;}
  .home-card:active{transform:scale(.98);}
  .home-card .hc-ic{width:54px; height:54px; border-radius:16px; background:linear-gradient(150deg,#1E86F0,#0A55B8); color:#fff; display:flex; align-items:center; justify-content:center; font-size:25px; flex-shrink:0; box-shadow:0 6px 14px rgba(14,114,224,.25);}
  .home-card .hc-t{font-size:17px; font-weight:700;}
  .home-card .hc-d{font-size:12.5px; color:var(--ink-mute); margin-top:3px;}
  .home-card .hc-go{margin-left:auto; color:var(--ink-mute); font-size:22px;}
  /* ===== 고객 다단계 ===== */
  .stepbar{display:flex; align-items:center; gap:6px; margin:6px 0 16px;}
  .stepdot{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--line); color:var(--ink-mute); flex-shrink:0;}
  .stepdot.on{background:var(--accent); color:#fff;}
  .stepdot.done{background:#CFE6FF; color:var(--accent);}
  .stepline{flex:1; height:2px; background:var(--line);}
  .result-box{border:1px solid var(--line); border-radius:14px; padding:14px; min-height:90px; max-height:210px; overflow:auto; white-space:pre-wrap; font-size:13.5px; line-height:1.65; color:var(--ink-soft); background:var(--paper); cursor:pointer;}
  .result-box:active{background:#EAF4FF;}
  .btn.result-ready{background:linear-gradient(180deg,#9AC9F5,#4E9BEC); color:#fff; font-weight:700; border:none; box-shadow:0 4px 0 #4A90DC, 0 6px 14px rgba(74,144,220,.32);}
  .btn.result-ready:active{ transform:translateY(3px); box-shadow:0 1px 0 #4A90DC, 0 2px 6px rgba(74,144,220,.28); }
  .btn-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px;}
  .btn-grid .btn{width:100%; margin-top:0;}
  .thumbs.drag-over{outline:2px dashed var(--accent); outline-offset:3px; border-radius:12px; background:#EAF4FF;}
  textarea.drag-over{outline:2px dashed var(--accent); background:#EAF4FF;}

  .row{display:flex; gap:8px; align-items:center;}
  .grow{flex:1;}
  .spacer{flex:1;}

  /* 2026-09-13: 컴퓨터(마우스)용 화면 좌우 이동 버튼 — 폰·태블릿은 스와이프로 이미 되니
     마우스가 있는 화면(데스크톱)에서만 보이게 함. z-index를 오버레이(팝업, 100 이상)보다
     낮춰서 관리자 화면 같은 팝업이 떠 있을 때는 자동으로 가려지게 함(팝업 안에는 같은
     기능을 하는 자체 ‹ › 버튼이 따로 있음 — adminTabsHtml 참고). */
  .nav-side-btn{ display:none; }
  /* button.admin-tab-arrow(요소+클래스)로 써야 위쪽 button.btn 규칙(같은 우선순위 방식)을
     이길 수 있어서 .admin-tab-arrow 단독이 아니라 .btn.admin-tab-arrow로 씀(우선순위 문제). */
  .btn.admin-tab-arrow{ display:none; }
  @media (hover:hover) and (pointer:fine){
    .nav-side-btn{
      display:flex; position:fixed; top:50%; transform:translateY(-50%);
      width:42px; height:42px; border-radius:50%; border:none;
      background:rgba(20,24,29,.35); color:#fff; font-size:22px; line-height:1;
      align-items:center; justify-content:center; cursor:pointer; z-index:40;
      transition:background .15s;
    }
    .nav-side-btn:hover{ background:rgba(20,24,29,.6); }
    .btn.admin-tab-arrow{ display:inline-flex; }
  }
  .nav-side-prev{ left:10px; }
  .nav-side-next{ right:10px; }

  .chips{display:flex; flex-wrap:wrap; gap:6px;}
  .chip{
    font-size:12.5px; padding:6px 12px; border-radius:999px;
    border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft);
    cursor:pointer; user-select:none; transition:.12s; white-space:nowrap;
  }
  .chip.on{background:var(--accent); border-color:var(--accent); color:#fff;}
  .chip.tag.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}

  .card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 15px; box-shadow:var(--shadow); margin-bottom:10px;
  }
  .card.tap{cursor:pointer; transition:.12s;}
  .card.tap:active{transform:scale(.99); border-color:var(--line-strong);}

  .badge{font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600; white-space:nowrap;}
  .b-db{background:var(--db-soft); color:var(--db);}
  .b-acq{background:var(--acq-soft); color:var(--acq);}
  .b-ok{background:var(--ok-soft); color:var(--ok);}
  .b-hold{background:var(--hold-soft); color:var(--hold);}
  .b-no{background:var(--no-soft); color:var(--no);}
  .b-seg{background:var(--accent-soft); color:var(--accent-ink);}
  .b-grade{background:var(--line); color:var(--ink-soft);}
  .badge.small{font-size:10px; padding:2px 7px; font-weight:500;}
  .b-cert-sure{background:var(--cert-sure-soft); color:var(--cert-sure);}
  .b-cert-guess{background:var(--cert-guess-soft); color:var(--cert-guess);}
  .b-cert-lack{background:var(--cert-lack-soft); color:var(--cert-lack);}

  .meta{font-size:12px; color:var(--ink-mute); display:flex; gap:12px; align-items:center; flex-wrap:wrap;}
  .name{font-size:16px; font-weight:600; letter-spacing:-.01em;}

  button.btn{
    font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
    border-radius:var(--radius-sm); padding:10px 14px; border:1px solid var(--line-strong);
    background:var(--card); color:var(--ink); transition:.12s; display:inline-flex;
    align-items:center; justify-content:center; gap:6px;
  }
  button.btn:active{transform:scale(.98);}
  /* 2026-09-02: primary와 btn-blue가 육안으로 거의 구분이 안 돼서 같은 색으로 통일함
     (마크업의 클래스명은 그대로 두되, 보이는 색만 하나로 맞췄다) */
  button.btn.primary, button.btn.btn-blue{background:linear-gradient(180deg,#5FC7F0,#2FA9E0); border:none; color:#fff; font-weight:700; box-shadow:0 4px 0 #1888C0, 0 6px 14px rgba(24,136,192,.28);}
  button.btn.primary:active, button.btn.btn-blue:active{ transform:translateY(3px); box-shadow:0 1px 0 #1888C0, 0 2px 6px rgba(24,136,192,.24); }
  button.btn.ghost{background:transparent; border-color:var(--line);}
  button.btn.btn-green{background:linear-gradient(180deg,#4FD0A8,#20B98C); border:none; color:#fff; font-weight:700; box-shadow:0 4px 0 #0E9070, 0 6px 14px rgba(16,168,127,.28);}
  button.btn.btn-green:active{ transform:translateY(3px); box-shadow:0 1px 0 #0E9070, 0 2px 6px rgba(16,168,127,.24); }
  /* AI 실행 버튼 전용 색(보라) — 파란 primary/btn-blue와 구분해서 "AI가 대신 해주는 동작"임을 한눈에 표시 */
  button.btn.btn-ai{background:linear-gradient(180deg,#C79CF5,#9955EA); border:none; color:#fff; font-weight:700; box-shadow:0 4px 0 #7A2FD0, 0 6px 14px rgba(122,47,208,.32);}
  button.btn.btn-ai:active{ transform:translateY(3px); box-shadow:0 1px 0 #7A2FD0, 0 2px 6px rgba(122,47,208,.28); }
  button.btn.danger{color:var(--no); border-color:var(--no-soft);}
  button.btn.wide{width:100%;}
  button.btn.sm{padding:7px 11px; font-size:12.5px;}

  label.f{display:block; font-size:12.5px; color:var(--ink-soft); font-weight:600; margin:14px 2px 6px;}
  input.t, textarea.t, select.t{
    width:100%; font-family:inherit; font-size:15px; color:var(--ink);
    background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
    padding:11px 12px; outline:none; transition:.12s;
  }
  input.t:focus, textarea.t:focus, select.t:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  textarea.t{resize:vertical; min-height:76px; line-height:1.55;}
  /* 민감정보 마스킹: 입력칸 위에 덮는 오버레이. 마우스 올리거나 칸을 누르면 원본이 보임. */
  .mask-wrap{position:relative; width:100%;}
  .mask-ov{position:absolute; inset:0; display:flex; align-items:center; box-sizing:border-box;
    padding:11px 12px; font-size:15px; color:var(--ink); letter-spacing:.5px;
    background:var(--card); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
    cursor:text; user-select:none;}
  .mask-ov:empty{display:none;}
  .mask-ov.reveal{opacity:0; pointer-events:none;}

  .thumbs{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
  .thumb{position:relative; width:58px; height:58px; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--paper); cursor:zoom-in;}
  .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .thumb .k{position:absolute; left:3px; top:3px; font-size:8px; padding:1px 4px; border-radius:5px; background:rgba(28,37,48,.72); color:#fff;}
  .thumb .del{position:absolute; right:2px; top:2px; width:17px; height:17px; border-radius:50%; border:none; background:rgba(28,37,48,.78); color:#fff; font-size:12px; line-height:1; cursor:pointer; padding:0;}
  .add-thumb{width:58px; height:58px; border:1.5px dashed var(--line-strong); border-radius:9px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--ink-mute); font-size:10px; cursor:pointer; background:var(--card);}
  #lightbox{position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:12px; cursor:zoom-out;}
  #lightbox.show{display:flex;}
  #lightbox img{max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.5);}
  #toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); background:rgba(28,37,48,.94); color:#fff; padding:11px 18px; border-radius:12px; font-size:13.5px; z-index:10001; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 8px 24px rgba(0,0,0,.3);}
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  .empty{text-align:center; color:var(--ink-mute); padding:48px 20px; font-size:14px;}
  .empty .big{font-size:15px; color:var(--ink-soft); font-weight:600; margin-bottom:6px;}

  .fab{
    position:fixed; right:calc(50% - 260px + 16px); bottom:calc(78px + env(safe-area-inset-bottom));
    width:52px; height:52px; border-radius:50%; border:none; background:var(--accent); color:#fff;
    font-size:26px; line-height:1; box-shadow:0 4px 14px rgba(47,111,94,.4); cursor:pointer; z-index:30;
  }
  @media(max-width:552px){.fab{right:16px;}}

  nav.tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--card);
    border-top:1px solid var(--line); display:flex; padding:6px 0 env(safe-area-inset-bottom);
    max-width:520px; margin:0 auto;
  }
  nav.tabs button{
    flex:1; border:none; background:none; font-family:inherit; cursor:pointer;
    padding:8px 2px; color:var(--ink-mute); font-size:10.5px; display:flex; flex-direction:column; align-items:center; gap:3px;
    white-space:nowrap;
  }
  nav.tabs button .ic{font-size:18px; line-height:1;}
  nav.tabs button.on{color:var(--accent); font-weight:600;}

  .overlay{
    position:fixed; inset:0; z-index:100; background:rgba(20,24,29,.55);
    display:none; align-items:flex-end; justify-content:center;
  }
  #ov-subpage{ z-index:200; }
  #ov-admin{ z-index:130; } /* 담당자 선택 화면(z-index:121) 위에 떠야 하므로 더 높게 — 2026-08-14 */
  #p-drop.drag-over{ outline:2px dashed var(--accent); outline-offset:3px; border-radius:12px; background:rgba(46,125,50,.04); }
  .overlay.show{display:flex;}
  .sheet{
    background:var(--card); width:100%; max-width:520px; max-height:92vh; overflow:auto;
    border-radius:18px 18px 0 0; padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .sheet h2{font-size:18px; margin:0 0 2px; font-weight:700;}
  .sheet .close{position:absolute;}
  .handle{width:38px; height:4px; border-radius:2px; background:var(--line-strong); margin:0 auto 14px;}

  /* 보장분석 결과 보는 창 — 휴대폰에서 전체화면으로 표시 · 2026-08-16 추가 */
  @media(max-width:552px){
    #ov-anresult, #ov-subpage{ align-items:stretch; }
    #ov-anresult .sheet, #ov-subpage .sheet{
      width:100%; max-width:100%; height:100%; max-height:100vh;
      border-radius:0; padding-top:calc(18px + env(safe-area-inset-top));
    }
  }

  /* redaction */
  .redwrap{position:relative; width:100%; background:#0d0f12; border-radius:var(--radius-sm); overflow:hidden; touch-action:none; user-select:none;}
  .redwrap canvas{display:block; width:100%; height:auto;}
  .red-hint{font-size:12.5px; color:var(--ink-soft); background:var(--accent-soft); padding:9px 11px; border-radius:var(--radius-sm); margin-bottom:10px; line-height:1.5;}

  /* 참조풀: 상품별 섹션 제목 — 2026-09-04 필터 방식 → 섹션 방식으로 변경하며 추가 */
  .pool-section-h{font-size:17px; font-weight:800; color:var(--ink); margin:18px 2px 8px; display:flex; align-items:center; gap:7px;}
  .pool-section-h:first-of-type{margin-top:4px;}
  .pool-section-n{font-size:12px; font-weight:700; color:var(--ink-mute); background:var(--line); border-radius:999px; padding:1px 9px;}

  .note{font-size:12px; color:var(--ink-mute); line-height:1.55; margin-top:8px;}
  .divider{height:1px; background:var(--line); margin:16px 0;}
  .seg-toggle{display:flex; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:3px; gap:3px; margin-bottom:14px;}
  .seg-toggle button{flex:1; border:none; background:none; font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-mute); padding:8px; border-radius:7px; cursor:pointer;}
  .seg-toggle button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow);}

  .kv{display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px solid var(--line);}
  .kv:last-child{border-bottom:none;}
  .kv .k{color:var(--ink-soft);}
  .stage-note{border:1px dashed var(--line-strong); border-radius:var(--radius); padding:14px; font-size:13px; color:var(--ink-soft); line-height:1.6; background:var(--card);}
  .pill-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:8px;}
  .pt{font-size:11px; padding:3px 8px; border-radius:999px; background:var(--paper); color:var(--ink-soft); border:1px solid var(--line);}

  /* =========================================================
     반응형: PC·태블릿 폭 — 2026-09-02 수정
     예전엔 로그인 화면에서 "모바일/PC·태블릿"을 직접 고르는 버튼이 있었는데,
     화면 폭에 따라 CSS가 알아서 넓혀주는 순수 반응형으로 바꿨다(버튼·JS·저장값 모두 삭제).
     화면 폭이 561px 이상이면(태블릿·PC) 자동으로 더 넓게 보인다.
     ========================================================= */
  @media(min-width:561px){
    #app{max-width:760px;}
    header.top{max-width:760px;}
    .home-menu{max-width:760px;}
    nav.tabs{max-width:760px;}
  }