/* ═══════════════════════════════════════════
   PickSignal Mobile v6 — 스마트메시지Pro 톤
   흰 배경 + 연한 파랑 카드 + 밝고 깔끔
   ═══════════════════════════════════════════ */
/* Pretendard 는 index.html 의 가변 폰트(pretendardvariable, 버전 고정) 하나만 쓴다 — 예전 @import 정적 폰트는 CSS→CSS 연쇄 로드로 첫 화면을 막았다 (2026-10-24) */

:root{
  --primary:#1A6FE8;--primary-dk:#1558C0;--primary-lt:#D6E8FB;--primary-bg:#EBF2FC;
  --primary-pale:#F0F6FF;
  /* 호환 alias — 기존 코드가 var(--blue), var(--blue-bg) 를 광범위하게 사용 (정의 누락 버그) */
  --blue:#1A6FE8;--blue-dk:#1558C0;--blue-bg:#EBF2FC;
  --red:#EF4444;--red-bg:#FEF2F2;
  --green:#22C55E;--green-bg:#F0FDF4;
  --amber:#F59E0B;--amber-bg:#FFFBEB;
  --purple:#8B5CF6;--purple-bg:#F5F3FF;
  --orange:#F97316;--orange-bg:#FFF7ED;
  --text:#1A1A2E;--text2:#4B5563;--text3:#6B7280;--text4:#9CA3AF;
  --disabled:#C5CCD6;
  --bg:#FFFFFF;--card:#FFFFFF;--card-blue:#EBF2FC;
  --border:#E8ECF0;--border-lt:#F0F2F5;
  --white:#FFFFFF;--g50:#FAFBFC;--g100:#F4F6FA;
  --pad:16px;--card-r:12px;
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
  --nav-h:54px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px;letter-spacing:-.01em;line-height:1.5;-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column}
.safe-top{height:var(--safe-top);background:var(--white);flex-shrink:0}
#app{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}

/* ── Header (스마트메시지 스타일: 로고+아이콘+설정) ─── */
.header{background:var(--white);padding:10px var(--pad);display:flex;align-items:center;flex-shrink:0;border-bottom:1px solid var(--border)}
.header-logo{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.header-logo span{color:var(--primary)}
.header-right{margin-left:auto;display:flex;gap:4px}
.header-btn{background:none;border:none;color:var(--text4);width:32px;height:32px;border-radius:var(--ps-radius-md);font-size:16px;cursor:pointer}

/* ── Views ─────────────────────────────────── */
.view{display:none;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--white)}
.view.active{display:flex;flex-direction:column}
.view-pad{padding:8px var(--pad) 20px;display:flex;flex-direction:column;gap:10px;flex:1}

/* ── Tab Bar + FAB (스마트메시지 스타일) ────── */
/* tab-bar z-index 를 fab-menu-bg(70) / bottom-sheet-bg(60) 보다 높여 클릭 가로채기 방지 */
.tab-bar{display:flex;height:var(--nav-h);background:var(--white);border-top:1px solid var(--border);flex-shrink:0;padding-bottom:var(--safe-bottom);align-items:center;overflow:visible;position:relative;z-index:75}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:none;background:none;color:var(--disabled);font-size:10px;font-weight:500;cursor:pointer;font-family:inherit;min-height:44px;position:relative;z-index:1;-webkit-tap-highlight-color:rgba(91,62,255,.2);touch-action:manipulation}
.tab .tab-icon{font-size:20px;line-height:1;pointer-events:none}
.tab .tab-label{pointer-events:none}
.tab.active{color:var(--primary);font-weight:600}
.fab{width:50px;height:50px;min-width:50px;min-height:50px;aspect-ratio:1;border-radius:var(--ps-radius-full);border:none;background:var(--primary);color:#fff;font-size:24px;cursor:pointer;margin-top:-18px;box-shadow:0 3px 12px rgba(26,111,232,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;flex-grow:0;padding:0;touch-action:manipulation}
.fab:active{transform:scale(.9)}

/* ── FAB Menu ──────────────────────────────── */
/* visibility:hidden 으로 클릭 파이프라인에서 완전 제거 (opacity:0 만으로는 일부 모바일 브라우저에서 클릭이 흡수되는 사례) */
.fab-menu-bg{position:fixed;inset:0;background:rgba(26,26,46,.25);z-index:70;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--nav-h) + var(--safe-bottom) + 8px)}
.fab-menu-bg.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s,visibility 0s}
.fab-menu{display:flex;flex-direction:column;gap:5px;align-items:center;transform:translateY(16px);opacity:0;transition:all .2s cubic-bezier(.22,1,.36,1)}
.fab-menu-bg.on .fab-menu{transform:translateY(0);opacity:1}
.fab-item{padding:7px 18px;border-radius:var(--ps-radius-lg);border:1px solid var(--border);background:var(--white);color:var(--text);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(0,0,0,.06);min-width:140px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fab-item:active{background:var(--g100)}

/* ── Hero (흰 배경 + 연한 파랑 KPI) ────────── */
.hero-card{background:var(--white);padding:14px var(--pad) 10px}
.hero-top{display:flex;align-items:baseline;gap:6px}
.hero-date{font-size:11px;color:var(--text4)}
.hero-greet{font-size:16px;font-weight:700;color:var(--text)}
.hero-sub{font-size:12px;color:var(--text3);margin-top:2px}
.hero-kpi{display:flex;align-items:center;margin-top:10px;background:var(--primary-pale);border-radius:var(--ps-radius-lg);padding:10px 0}
.hero-kpi-item{flex:1;text-align:center}
.hero-kpi-val{font-size:20px;font-weight:800;color:var(--primary);display:block}
.hero-kpi-val.hot{color:var(--red)}
.hero-kpi-lbl{font-size:9px;color:var(--text4);display:block;margin-top:1px}
.hero-kpi-div{width:1px;height:22px;background:var(--primary-lt);flex-shrink:0}

/* ── Section title ─────────────────────────── */
.sec-title{font-size:14px;font-weight:700;color:var(--text);margin-top:4px;padding-left:2px}

/* ── Cards (가벼운 테두리 + 라운드) ─────────── */
.card{background:var(--card);border-radius:var(--card-r);overflow:hidden;border:1px solid var(--border)}
.card-hd{padding:12px 16px 8px;display:flex;align-items:center;justify-content:space-between}
.card-ttl{font-size:14px;font-weight:700;color:var(--text)}
.card-body{padding:0 16px 12px}

/* ── 2x2 그리드 카드 (Top5 + Golden) ─────── */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 0}
/* ── 오늘 연락할 고객: 2행 가로 스크롤 ─────── */
.card-grid-hscroll{display:grid;grid-template-rows:auto auto;grid-auto-flow:column;grid-auto-columns:150px;overflow-x:auto;gap:8px;padding:6px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.card-grid-hscroll::-webkit-scrollbar{display:none}
/* ── 연락처 선택 피커 ─────── */
.contact-picker-item{display:flex;align-items:center;padding:11px 0;border-bottom:1px solid var(--border-lt);cursor:pointer;gap:10px}
.contact-picker-item.cpi-disabled{opacity:0.45;pointer-events:none}
.cpi-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0}
.cpi-info{flex:1;min-width:0}
.cpi-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cpi-phone{font-size:11px;color:var(--text4);margin-top:1px}
.cpi-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);background:transparent;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent}
.contact-picker-item.cpi-selected .cpi-check{background:var(--primary);border-color:var(--primary);color:#fff}
.hcard{background:var(--white);border:1px solid var(--border);border-radius:var(--ps-radius-lg);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:5px}
.hcard:active{background:var(--g50)}
.hcard-top{display:flex;align-items:center;gap:5px}
.hcard-rank{font-size:9px;font-weight:700;width:16px;height:16px;border-radius:var(--ps-radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hcard-rank.r1{background:var(--primary-bg);color:var(--primary)}
.hcard-rank.r2{background:var(--green-bg);color:var(--green)}
.hcard-rank.r3{background:var(--amber-bg);color:var(--orange)}
.hcard-rank.rn{background:var(--g100);color:var(--text4)}
.hcard-name{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard-age{font-size:10px;color:var(--text4);flex-shrink:0}
.hcard-score{font-size:10px;color:var(--primary);font-weight:600;flex-shrink:0;margin-left:auto}
.hcard-signals{display:flex;gap:2px;overflow:hidden}

/* ── 아이스브레이킹 카드 ───────────────────── */
.icebreak{background:var(--primary-pale);border:1px solid var(--primary-lt);border-radius:var(--ps-radius-lg);padding:10px 14px;display:flex;align-items:center;gap:8px}
.icebreak-text{flex:1;font-size:13px;color:var(--text);font-weight:500;line-height:1.5}
.icebreak-copy{padding:4px 10px;border-radius:var(--ps-radius-md);border:1px solid var(--primary);background:var(--white);color:var(--primary);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}
.signal-tag{font-size:9px;font-weight:600;padding:1px 5px;border-radius:var(--ps-radius-sm);white-space:nowrap}

/* ── Golden card ───────────────────────────── */
.gcard{background:var(--white);border:1px solid var(--border);border-radius:var(--ps-radius-lg);padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.gcard:active{background:var(--g50)}
.gcard-row{display:flex;align-items:center;gap:4px}
.gcard-icon{font-size:13px;flex-shrink:0}
.gcard-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.gcard-reason{font-size:9px;color:var(--text4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gcard-btn{padding:3px 8px;border-radius:var(--ps-radius-sm);border:none;background:var(--primary);color:#fff;font-size:10px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}
.gcard-btn.sec{background:var(--white);color:var(--primary);border:1px solid var(--primary)}

/* ── Week calendar ─────────────────────────── */
.week-item{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border-lt);font-size:12px;cursor:pointer}
.week-item:last-child{border-bottom:none}
.week-item:active{background:var(--g50)}
.week-date{width:48px;flex-shrink:0;font-weight:600;color:var(--text3)}
.week-icon{font-size:14px;flex-shrink:0}
.week-text{flex:1;color:var(--text);font-weight:500}
.week-type{font-size:10px;padding:2px 7px;border-radius:var(--ps-radius-sm);font-weight:600;flex-shrink:0}

/* ── Show more ─────────────────────────────── */
.show-more-btn{display:block;width:100%;padding:9px;border:none;background:var(--g50);color:var(--primary);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center}

/* ── Customer List ─────────────────────────── */
.cust-search{display:flex;align-items:center;gap:6px;padding:8px var(--pad);background:var(--white);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--border)}
.cust-search input{flex:1;min-width:0;height:38px;box-sizing:border-box;padding:0 14px;border-radius:var(--ps-radius-xl);border:1px solid var(--border);font-size:14px;font-family:inherit;background:var(--white);outline:none;color:var(--text)}
.cust-search input:focus{border-color:var(--primary)}
.cust-search input::placeholder{color:var(--disabled)}
.cust-search button{flex-shrink:0;white-space:nowrap;height:38px;padding:0 14px;border-radius:var(--ps-radius-xl);border:none;background:var(--primary);color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.cust-list{flex:1;overflow-y:auto;background:var(--white)}
.cust-item{display:flex;align-items:center;gap:10px;padding:14px var(--pad);border-bottom:1px solid var(--border-lt);cursor:pointer}
.cust-item:active{background:var(--g50)}
.cust-av{width:36px;height:36px;border-radius:var(--ps-radius-lg);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0}
.cust-info{flex:1;min-width:0}
.cust-name{font-size:14px;font-weight:600;color:var(--text);line-height:1.5}
.cust-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cust-score{min-width:32px;height:24px;border-radius:var(--ps-radius-md);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ── Detail ────────────────────────────────── */
.detail-view{position:fixed;top:0;right:0;width:100%;height:100%;background:var(--white);z-index:50;transform:translateX(100%);transition:transform .25s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}
.detail-view.open{transform:translateX(0)}
.detail-header{background:var(--white);padding:var(--safe-top) 0 0;border-bottom:1px solid var(--border)}
.detail-header-top{display:flex;align-items:center;padding:12px var(--pad);gap:8px}
.detail-back{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;padding:2px 4px}
.detail-name{font-size:18px;font-weight:600;color:var(--text)}
.detail-score-badge{margin-left:auto;font-size:13px;font-weight:700;background:var(--primary-bg);color:var(--primary);padding:4px 12px;border-radius:var(--ps-radius-md)}
.detail-edit-btn{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;background:var(--white);color:var(--primary);border:1px solid var(--primary);padding:5px 12px;border-radius:var(--ps-radius-md);cursor:pointer;font-family:inherit;min-height:34px}
.detail-edit-btn:active{transform:scale(.97)}
.detail-profile{display:flex;align-items:center;gap:12px;padding:4px var(--pad) 14px}
.detail-av{width:48px;height:48px;border-radius:var(--ps-radius-xl);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;flex-shrink:0}
.detail-meta{flex:1}
.detail-meta-row{font-size:12px;color:var(--text3);margin-top:2px}
.detail-body{flex:1;overflow-y:auto;padding:12px var(--pad);display:flex;flex-direction:column;gap:10px;background:var(--g100)}
/* flex 컬럼 컨테이너에서 카드(자식)가 flex-shrink 로 찌그러져 .card 의 overflow:hidden 이 본문을 잘라먹던 버그 수정.
   자식은 자연 높이 유지 → 내용 안 잘리고 컨테이너가 스크롤. (영업단계 배지·기본정보 행 누락의 진짜 원인) */
.detail-body>*{flex-shrink:0}
.detail-actions{display:flex;gap:6px;padding:10px var(--pad);padding-bottom:calc(10px + var(--safe-bottom));background:var(--white);border-top:1px solid var(--border)}
.act-btn{flex:1;padding:12px 0;border-radius:var(--ps-radius-md);border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px}
.act-btn:active{transform:scale(.97)}
.act-btn.primary{background:var(--primary);color:#fff}
.act-btn.secondary{background:var(--white);color:var(--primary);border:1px solid var(--primary)}
.act-btn.outline{background:var(--white);color:var(--text2);border:1px solid var(--border)}

/* ── Send ──────────────────────────────────── */
.send-compose{display:flex;flex-direction:column;gap:10px;padding:12px var(--pad);flex:1}
.send-to{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--white);border:1px solid var(--border);border-radius:var(--ps-radius-lg);cursor:pointer;font-size:13px}
.send-to:active{background:var(--g50)}
.send-textarea{flex:1;min-height:120px;padding:12px 14px;border-radius:var(--ps-radius-lg);border:1px solid var(--border);font-size:14px;font-family:inherit;resize:none;outline:none;line-height:1.6;background:var(--white);color:var(--text)}
.send-textarea:focus{border-color:var(--primary)}
.send-textarea::placeholder{color:var(--disabled)}
.send-toolbar{display:flex;gap:6px;align-items:center}
.send-tool-btn{padding:8px 12px;border-radius:var(--ps-radius-md);border:1px solid var(--border);background:var(--white);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--text2)}
.send-tool-btn:active{background:var(--g100)}
.send-ai-topics{display:flex;flex-wrap:nowrap;gap:5px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.send-ai-topics::-webkit-scrollbar{display:none}
.send-ai-topics .filter-chip{flex:0 0 auto;padding:4px 10px;font-size:12px;white-space:nowrap}
.send-bottom{padding:10px var(--pad);padding-bottom:calc(10px + var(--safe-bottom));background:var(--white);border-top:1px solid var(--border)}
.send-btn{width:100%;padding:14px;border-radius:var(--ps-radius-md);border:none;background:var(--primary);color:#fff;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;min-height:48px}
.send-btn:disabled{background:var(--disabled);color:var(--white)}

/* ── Engage ────────────────────────────────── */
.engage-row{display:flex;gap:4px}
.engage-btn{flex:1;padding:8px 0;border-radius:var(--ps-radius-md);border:1px solid var(--border);background:var(--white);font-size:11px;font-weight:600;cursor:pointer;text-align:center;font-family:inherit;min-height:36px;color:var(--text2)}
.engage-btn:active{background:var(--g100)}
.engage-btn.danger{border-color:var(--red);color:var(--red);background:var(--red-bg)}

/* ── Info ──────────────────────────────────── */
.info-row{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border-lt)}
.info-row:last-child{border-bottom:none}
.info-label{font-size:12px;color:var(--text4);width:92px;flex-shrink:0;font-weight:500;line-height:1.5}
.info-value{font-size:14px;color:var(--text);flex:1;min-width:0;font-weight:400;line-height:1.5;word-break:break-word;overflow-wrap:anywhere}

/* ── Tags ──────────────────────────────────── */
.tag{display:inline-block;padding:2px 8px;border-radius:var(--ps-radius-md);font-size:11px;font-weight:600}
.tag-teal{background:var(--green-bg);color:var(--green)}
.tag-blue{background:var(--primary-bg);color:var(--primary)}
.tag-amber{background:var(--amber-bg);color:#B8860B}
.tag-purple{background:var(--purple-bg);color:var(--purple)}
.tag-red{background:var(--red-bg);color:var(--red)}

/* ── Filter chips ──────────────────────────── */
.filter-row{display:flex;gap:6px;overflow-x:auto;padding:0 2px;-webkit-overflow-scrolling:touch}
.filter-row::-webkit-scrollbar{display:none}
.filter-chip{padding:7px 14px;border-radius:var(--ps-radius-xl);font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--border);background:var(--white);color:var(--text3);cursor:pointer;flex-shrink:0;font-family:inherit}
.filter-chip:active{background:var(--g100)}
.filter-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── Form ──────────────────────────────────── */
.mf-lbl{font-size:12px;font-weight:600;color:var(--text3);margin-bottom:4px}
.mf-input{width:100%;padding:10px 14px;border-radius:var(--ps-radius-md);border:1px solid var(--border);background:var(--white);font-size:14px;font-family:inherit;color:var(--text);outline:none}
.mf-input:focus{border-color:var(--primary)}
.mf-input::placeholder{color:var(--disabled)}

/* ── Recipient checklist ───────────────────── */
.recip-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-lt);cursor:pointer}
.recip-item:active{background:var(--g50)}
.recip-check{width:22px;height:22px;border-radius:var(--ps-radius-md);border:2px solid var(--disabled);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;color:transparent}
.recip-check.on{background:var(--primary);border-color:var(--primary);color:#fff}
.recip-name{font-size:14px;font-weight:400;color:var(--text)}
.recip-phone{font-size:12px;color:var(--text4);margin-left:auto}

/* ── Bottom Sheet ──────────────────────────── */
/* z-index 80/81 — tab-bar(75) 위에 배치해 footer 버튼이 가려지지 않도록 함 */
.bottom-sheet-bg{position:fixed;inset:0;background:rgba(26,26,46,.25);z-index:80;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}
.bottom-sheet-bg.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s,visibility 0s}
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-radius:var(--ps-radius-xl) 16px 0 0;z-index:81;transform:translateY(100%);transition:transform .25s cubic-bezier(.22,1,.36,1);max-height:88vh;display:flex;flex-direction:column}
.bottom-sheet-bg.on .bottom-sheet{transform:translateY(0)}
.bottom-sheet-handle{width:32px;height:4px;background:var(--disabled);border-radius:var(--ps-radius-sm);margin:8px auto 4px}
.bottom-sheet-head{padding:10px 16px 12px;font-size:16px;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px}
.bottom-sheet-head .head-save-btn{padding:7px 14px;border-radius:var(--ps-radius-md);border:none;background:var(--primary);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0}
.bottom-sheet-head .head-save-btn:active{transform:scale(.96);background:var(--primary-dk)}
.bottom-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 16px 28px}
/* footer — safe-area + 24px 여유로 홈인디케이터 / 탭바와 겹치지 않게 */
.bottom-sheet-footer{flex-shrink:0;padding:14px 16px calc(24px + var(--safe-bottom));background:var(--white);border-top:1px solid var(--g100);box-shadow:0 -2px 8px rgba(0,0,0,.04)}
.btn-primary{padding:13px;border-radius:var(--ps-radius-lg);border:none;background:var(--primary);color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-primary:active{background:var(--primary-dk)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-secondary{padding:12px;border-radius:var(--ps-radius-lg);border:1.5px solid var(--border);background:transparent;color:var(--text3);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-secondary:active{background:var(--g100)}
.bottom-sheet-footer .btn-primary{width:100%}
.bottom-sheet-footer .btn-primary:active{background:var(--primary-dk)}

/* ── Toast ─────────────────────────────────── */
.toast-ct{position:fixed;bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);left:var(--pad);right:var(--pad);z-index:9999;/* 온보딩 오버레이(9000) 위 — 검증·저장 실패 메시지가 가려지지 않게 */display:flex;flex-direction:column;align-items:center;gap:6px}
.toast{padding:10px 20px;border-radius:var(--ps-radius-lg);font-size:13px;font-weight:600;box-shadow:0 4px 16px rgba(0,0,0,.1);animation:toastIn .25s ease;max-width:100%;text-align:center}
.toast-ok{background:var(--text);color:#fff}
.toast-er{background:var(--red);color:#fff}
.toast-wa{background:var(--amber);color:#fff}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes psFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 12px;min-height:64px;color:var(--text4);font-size:13px}
.loading{text-align:center;padding:20px;color:var(--text4);font-size:12px}
::-webkit-scrollbar{display:none}
*{-ms-overflow-style:none;scrollbar-width:none}

/* ══════════════════════════════════════════════════════════════
   데스크톱(PC) 표시 — PC·모바일 UI 단일화 (2026-07)
   PC 브라우저는 /m/ 미러를 그대로 사용한다. 넓은 화면에서 전체폭으로
   늘어지지 않도록 폰 프레임(≤480px)으로 중앙 정렬한다.
   body 에 transform 을 주면 position:fixed 오버레이(바텀시트/디테일뷰/
   토스트/FAB 등)도 이 컬럼을 기준(containing block)으로 정렬돼 뷰포트 전체로
   퍼지지 않는다 — 각 요소의 자체 translate 애니메이션은 그대로 유지된다.
   <700px(실제 폰·Capacitor 웹뷰)에는 미적용.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 700px) {
  html { background: #0b1020; }
  body {
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 0 60px rgba(0,0,0,.45);
    transform: translateZ(0);   /* fixed 오버레이를 이 컬럼에 가둠 */
  }
}