:root{
  --navy:#0b3a6b;        /* 로고 네이비 */
  --navy-2:#1e6bb8;      /* 다크 배경용 밝은 네이비 */
  --gray:#b2b5b5;        /* 로고 그레이 */
  --bg:#070d17;
  --text:#e8edf4;
  --muted:#8c97a8;
  --glass:rgba(255,255,255,.06);
  --glass-b:rgba(255,255,255,.14);
  --hot:#ff5d5d; --warm:#ffb347; --cold:#5db8ff; --ok:#4cd9a0;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:"Pretendard","Malgun Gothic",system-ui,sans-serif;
  color:var(--text);min-height:100vh;
  background:
    radial-gradient(900px 600px at 8% -5%, rgba(30,107,184,.45), transparent 60%),
    radial-gradient(700px 500px at 100% 10%, rgba(178,181,181,.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(11,58,107,.55), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:20px 16px 60px}

.glass{
  background:var(--glass);
  border:1px solid var(--glass-b);
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

/* 헤더 */
header.top{display:flex;align-items:center;gap:16px;padding:12px 18px;margin-bottom:20px;flex-wrap:wrap}
.logo{height:46px;background:#fff;border-radius:10px;padding:4px 8px}
header h1{font-size:1.1rem;margin:0;font-weight:700;letter-spacing:.02em}
header small{display:block;color:var(--muted);font-weight:400;font-size:.78rem}
.spacer{flex:1}
.btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:10px 18px;border-radius:12px;font-size:.95rem;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,var(--navy-2),var(--navy));
  box-shadow:0 4px 18px rgba(30,107,184,.4);
  transition:transform .12s, box-shadow .12s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(30,107,184,.6)}
.btn.ghost{background:var(--glass);box-shadow:none}
.btn.danger{background:rgba(255,93,93,.15);border-color:rgba(255,93,93,.5);box-shadow:none;color:#ffb0b0}

/* 폼 */
.sec{padding:20px 22px;margin-bottom:16px}
.sec h2{margin:0 0 14px;font-size:1rem;display:flex;align-items:center;gap:8px}
.sec h2 em{font-style:normal;font-size:.78rem;color:var(--muted);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
label.f{display:block;font-size:.82rem;color:var(--muted)}
label.f input{margin-top:5px}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{
  width:100%;padding:12px 14px;font:inherit;font-size:16px;color:var(--text);
  background:rgba(0,0,0,.28);border:1px solid var(--glass-b);border-radius:11px;outline:none;
  color-scheme:dark;
}
input:focus,textarea:focus,select:focus{border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(30,107,184,.35)}
textarea{min-height:130px;resize:vertical}

/* 클릭형 체크박스(칩) */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0}
.chip span{
  display:flex;align-items:center;gap:9px;padding:11px 16px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--glass-b);
  font-size:.93rem;transition:all .15s;user-select:none;
}
.chip span::before{
  content:"";width:18px;height:18px;border-radius:5px;border:2px solid var(--gray);flex:none;
  transition:all .15s;
}
.chip input[type=radio]+span::before{border-radius:50%}
.chip input:checked+span{
  background:linear-gradient(135deg,rgba(30,107,184,.55),rgba(11,58,107,.55));
  border-color:var(--navy-2);box-shadow:0 0 16px rgba(30,107,184,.45);
}
.chip input:checked+span::before{
  border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px var(--navy-2);
}
.chip input:focus-visible+span{outline:2px solid #fff}
.chip.hot input:checked+span{background:rgba(255,93,93,.25);border-color:var(--hot);box-shadow:0 0 16px rgba(255,93,93,.4)}
.chip.warm input:checked+span{background:rgba(255,179,71,.22);border-color:var(--warm);box-shadow:0 0 16px rgba(255,179,71,.35)}
.chip.cold input:checked+span{background:rgba(93,184,255,.22);border-color:var(--cold);box-shadow:0 0 16px rgba(93,184,255,.35)}

.savebar{position:sticky;bottom:12px;display:flex;gap:12px;align-items:center;padding:12px 16px;z-index:5}
#msg{flex:1;font-size:.92rem}

/* 대시보드 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:16px}
.stat{padding:16px 18px}
.stat b{display:block;font-size:2rem;line-height:1.1;margin-top:4px}
.stat span{font-size:.8rem;color:var(--muted)}
.stat.hot b{color:var(--hot)} .stat.warm b{color:var(--warm)} .stat.cold b{color:var(--cold)} .stat.ok b{color:var(--ok)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 14px;margin-bottom:16px;align-items:center}
.toolbar input[type=text]{flex:1;min-width:180px}
.toolbar select{width:auto}
.live{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:p 2s infinite}
@keyframes p{50%{opacity:.35}}

/* 카드 목록: 화면 폭에 맞춰 열 수가 자동으로 바뀜 (폰 1열 → 태블릿 2열 → PC 3열+) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;align-items:start}
.card{
  display:grid;grid-template-columns:1fr auto;grid-template-areas:"co date" "tags tags" "who who";
  gap:8px 12px;align-items:start;padding:16px 18px 14px 22px;
  cursor:pointer;transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.3)}
.card>div:first-child{grid-area:co;min-width:0}
.card .tags{grid-area:tags;margin:0}
.card .sub{margin-bottom:0}
.card .who{grid-area:who;font-size:.84rem;color:var(--muted);
  border-top:1px solid var(--glass-b);padding-top:9px;display:flex;justify-content:space-between;gap:10px}
.card .who b{color:var(--text);font-weight:600}
.card .date{grid-area:date;font-size:.76rem;color:var(--muted);text-align:right;white-space:nowrap}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gray)}
.card.gA::before{background:var(--hot)} .card.gB::before{background:var(--warm)} .card.gC::before{background:var(--cold)}
.card h3{margin:0 0 2px;font-size:1.05rem}
.card .sub{color:var(--muted);font-size:.84rem;margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:.74rem;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.09);border:1px solid var(--glass-b)}
.tag.A{background:rgba(255,93,93,.2);border-color:var(--hot)}
.tag.B{background:rgba(255,179,71,.2);border-color:var(--warm)}
.tag.C{background:rgba(93,184,255,.2);border-color:var(--cold)}
.tag.visit{background:rgba(178,181,181,.22);border-color:var(--gray)}
.tag.done{background:rgba(76,217,160,.2);border-color:var(--ok)}
.tag.progress{background:rgba(30,107,184,.35);border-color:var(--navy-2)}
.card .foot{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-top:10px}
.empty{padding:50px;text-align:center;color:var(--muted)}

/* 와이드 레이아웃: 좌측 통계·필터 고정 + 우측 넓은 목록 */
.wrap.wide{max-width:1480px;margin:0 auto;padding:20px clamp(14px,3vw,32px) 60px}
/* 기본(태블릿·폰): 통계/필터가 위, 목록이 아래 */
.layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.layout aside .stats{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.layout aside .toolbar{margin-bottom:0}
/* 넓은 화면: 좌측 사이드바 + 우측 목록 */
@media(min-width:1100px){
  .layout{grid-template-columns:270px minmax(0,1fr);gap:20px}
  .layout aside{position:sticky;top:16px}
  .layout aside .stats{grid-template-columns:1fr 1fr}
  .layout aside .toolbar{flex-direction:column;align-items:stretch}
  .layout aside .toolbar select,.layout aside .toolbar input[type=text]{width:100%;min-width:0}
}

/* 입력 폼 와이드: 2열 배치 (대시보드와 같은 전체 폭) */
.formgrid{display:grid;grid-template-columns:1fr;gap:16px;align-items:stretch}
.formgrid .sec{margin-bottom:0}
.formgrid .grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
@media(min-width:900px){
  .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formgrid .span2{grid-column:1/-1}
}

/* 탭 + 명함 사진 */
.hint{color:var(--muted);font-size:.84rem;margin:12px 0 0}
.cardimg{display:block;max-width:100%;max-height:420px;border-radius:12px;border:1px solid var(--glass-b)}

/* 상세 모달 */
dialog{
  border:1px solid var(--glass-b);border-radius:20px;padding:0;color:var(--text);
  width:min(680px,94vw);max-height:90vh;
  background:rgba(14,22,36,.82);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
dialog::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.dlg{padding:22px 24px}
.dlg h2{margin:0 0 4px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px 12px;font-size:.92rem;margin:14px 0}
.kv dt{color:var(--muted)} .kv dd{margin:0;white-space:pre-wrap;word-break:break-word}
.dlg h4{margin:16px 0 8px;font-size:.85rem;color:var(--muted);font-weight:600}
.dlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
@media(max-width:560px){.kv{grid-template-columns:90px 1fr}}