/* AI PT — 로그인 · 프로필 · 관리 페이지 공통. 노트 페이지(css/notes.css)와 같은 색을 쓴다. */
:root{
  --bg:#ffffff; --side:#fafbfc; --panel:#f6f8fa; --deep:#f2f4f7;
  --line:#e2e6eb; --line2:#eceff3;
  --fg:#1c2128; --muted:#4a525c; --dim:#8b939e;
  --accent:#1a7f37; --gold:#9a6700; --purple:#7a3ecb; --red:#cf222e; --blue:#0969da;
  --on-accent:#ffffff;
  --sans:'Pretendard','Noto Sans KR',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono','D2Coding',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased}
a{color:var(--blue)}
b,strong{font-weight:800}
button{font-family:inherit}
[hidden]{display:none !important}

/* ── 상단 바 ─────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:20; height:54px; display:flex; align-items:center; gap:14px; padding:0 20px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit}
.brand .tag{font-family:var(--mono); font-size:12px; font-weight:800; color:var(--on-accent); background:var(--accent); border-radius:999px; padding:3px 10px}
.brand b{font-size:17px; font-weight:800; letter-spacing:-0.01em}
.topbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto}
.pill-btn{
  font-size:13.5px; font-weight:700; color:var(--muted); background:none; cursor:pointer;
  text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:5px 14px; white-space:nowrap;
}
.pill-btn:hover{color:var(--fg); border-color:var(--accent)}
.pill-btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.pill-btn.danger{color:var(--red)}
.pill-btn:disabled{opacity:.5; cursor:default}

/* ── 카드 레이아웃 (로그인·프로필) ─────────────────────── */
.center{min-height:calc(100vh - 54px); display:flex; align-items:flex-start; justify-content:center; padding:48px 18px 80px}
.card{width:100%; max-width:440px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:30px 30px 26px; box-shadow:0 8px 30px rgba(28,33,40,0.05)}
.card.wide{max-width:560px}
.card h1{margin:0 0 6px; font-size:24px; letter-spacing:-0.01em}
.card .lead{margin:0 0 22px; color:var(--muted); font-size:15px}
.field{margin:0 0 14px}
.field label{display:block; font-size:13px; font-weight:800; color:var(--muted); margin-bottom:6px}
.field .hint{font-size:12.5px; color:var(--dim); margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:16px; color:var(--fg); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(26,127,55,0.12)}
input[readonly]{background:var(--panel); color:var(--muted)}
textarea{min-height:96px; resize:vertical}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer;
  font-size:15.5px; font-weight:800; border-radius:10px; padding:12px 16px; border:1px solid var(--line);
  background:var(--panel); color:var(--fg);
}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.55; cursor:default; filter:none}
.btn.google{background:#fff}
.btn.kakao{background:#FEE500; border-color:#FEE500; color:#191919}
.btn.naver{background:#03C75A; border-color:#03C75A; color:#fff; text-decoration:none}
.btn .ic{width:18px; height:18px; flex:0 0 auto}
.or{display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--dim); font-size:12.5px}
.or::before,.or::after{content:''; flex:1; height:1px; background:var(--line)}
.tabs{display:flex; gap:4px; background:var(--panel); border-radius:10px; padding:4px; margin:0 0 20px}
.tabs button{flex:1; border:0; background:none; border-radius:8px; padding:8px; font-size:14px; font-weight:800; color:var(--muted); cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--bg); color:var(--fg); box-shadow:0 1px 3px rgba(28,33,40,0.12)}
.msg{margin:14px 0 0; padding:11px 13px; border-radius:10px; font-size:14px; line-height:1.55}
.msg.err{background:rgba(207,34,46,0.07); color:var(--red)}
.msg.ok{background:rgba(26,127,55,0.08); color:var(--accent)}
.msg.info{background:rgba(9,105,218,0.07); color:var(--blue)}
.links{margin:16px 0 0; text-align:center; font-size:13.5px; color:var(--dim)}
.links a,.links button{color:var(--muted); background:none; border:0; padding:0; font:inherit; cursor:pointer; text-decoration:underline}
.small{font-size:13px; color:var(--dim)}

/* 승인 대기 */
.pending{border:1px solid rgba(154,103,0,0.35); background:rgba(154,103,0,0.06); border-radius:12px; padding:16px 18px; margin:0 0 18px}
.pending b{color:var(--gold)}
.pending p{margin:6px 0 0; font-size:14.5px; color:var(--muted)}
.approved{border:1px solid rgba(26,127,55,0.35); background:rgba(26,127,55,0.06); border-radius:12px; padding:16px 18px; margin:0 0 18px}
.approved b{color:var(--accent)}

/* ── 관리 페이지 ──────────────────────────────────────── */
.wrap{max-width:1180px; margin:0 auto; padding:28px 20px 100px}
.section-h{display:flex; align-items:baseline; gap:12px; margin:26px 0 12px}
.section-h h2{margin:0; font-size:18px}
.section-h .count{font-family:var(--mono); font-size:12.5px; color:var(--dim)}
.section-h .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
table.list{width:100%; border-collapse:collapse; font-size:14px; min-width:820px}
table.list th{font-size:12px; letter-spacing:.06em; color:var(--dim); text-align:left; padding:10px 12px; background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap}
table.list td{padding:11px 12px; border-bottom:1px solid var(--line2); vertical-align:middle; white-space:nowrap}
table.list tr:last-child td{border-bottom:0}
table.list tr.row{cursor:pointer}
table.list tr.row:hover td{background:var(--side)}
table.list td.name b{display:block; font-size:14.5px}
table.list td.name span{display:block; font-size:12.5px; color:var(--dim)}
.prog{display:flex; align-items:center; gap:8px; min-width:150px}
.prog .bar{flex:1; height:7px; background:var(--line2); border-radius:999px; overflow:hidden}
.prog .bar > i{display:block; height:100%; background:var(--accent)}
.prog .n{font-family:var(--mono); font-size:12px; color:var(--dim); flex:0 0 auto}
.chip{display:inline-block; font-size:12px; font-weight:800; border-radius:999px; padding:2px 9px; border:1px solid var(--line); color:var(--muted)}
.chip.ok{color:var(--accent); border-color:rgba(26,127,55,0.4); background:rgba(26,127,55,0.06)}
.chip.warn{color:var(--gold); border-color:rgba(154,103,0,0.4); background:rgba(154,103,0,0.06)}
.chip.bad{color:var(--red); border-color:rgba(207,34,46,0.4); background:rgba(207,34,46,0.06)}
.chip.admin{color:var(--purple); border-color:rgba(122,62,203,0.4)}
.empty{padding:26px; text-align:center; color:var(--dim); font-size:14px}
.stale td.name b::after{content:' · 멈춤'; color:var(--red); font-size:12px}

/* 서랍 */
.drawer-scrim{position:fixed; inset:0; background:rgba(28,33,40,0.35); z-index:40}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(96vw,560px); z-index:41; background:var(--bg);
  border-left:1px solid var(--line); box-shadow:-12px 0 40px rgba(28,33,40,0.15); overflow-y:auto; padding:22px 24px 60px;
}
.drawer h2{margin:0 0 2px; font-size:21px}
.drawer .sub{color:var(--dim); font-size:13.5px; margin:0 0 16px}
.drawer .close{position:absolute; top:14px; right:16px}
.kv{display:grid; grid-template-columns:96px 1fr; gap:6px 12px; font-size:14.5px; margin:0 0 16px}
.kv dt{color:var(--dim); font-weight:700}
.kv dd{margin:0; overflow-wrap:anywhere}
.drawer h3{font-size:14px; letter-spacing:.06em; color:var(--dim); margin:22px 0 8px}
.actions{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0}
.note-prog{display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--line2); font-size:13.5px}
.note-prog b{flex:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-prog .bar{flex:0 0 110px; height:6px; background:var(--line2); border-radius:999px; overflow:hidden}
.note-prog .bar > i{display:block; height:100%; background:var(--accent)}
.note-prog .n{font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:0 0 50px; text-align:right}
.note-prog .d{font-family:var(--mono); font-size:11px; color:var(--dim); flex:0 0 66px; text-align:right}
.folder-h{font-size:12.5px; font-weight:800; color:var(--muted); margin:12px 0 2px}
.cp{border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:6px 0; font-size:14px}
.cp .cp-head{display:flex; gap:10px; align-items:baseline}
.cp .cp-head b{font-weight:800}
.cp .kind{font-size:11.5px; font-weight:800; color:var(--on-accent); background:var(--accent); border-radius:999px; padding:1px 8px}
.cp .kind.consult{background:var(--purple)}
.cp .date{color:var(--dim); font-family:var(--mono); font-size:12px; margin-left:auto}
.cp p{margin:5px 0 0; color:var(--muted); white-space:pre-wrap}
.cp .del{margin-left:8px; font-size:12px; color:var(--red); background:none; border:0; cursor:pointer; padding:0}
.form-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:8px 0}
.form-row .field{margin:0}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px}
.toolbar input[type=text]{width:220px; padding:8px 11px; font-size:14px}
.toolbar select{width:auto; padding:8px 11px; font-size:14px}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:0 0 6px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.stat .k{font-size:12px; font-weight:800; color:var(--dim); letter-spacing:.06em}
.stat .v{font-size:22px; font-weight:800; margin-top:2px}

@media (max-width:720px){
  .center{padding:24px 14px 60px}
  .card{padding:24px 20px}
  .form-row{grid-template-columns:1fr}
  .kv{grid-template-columns:80px 1fr}
  .wrap{padding:18px 14px 80px}
}