:root{
  --bg:#F6F5FB; --panel:#FFFFFF; --ink:#1C1B29; --ink-soft:#6B6880;
  --line:#E5E2F0; --accent:#E8407A; --accent-soft:#FDE6EF; --accent-deep:#C22E63;
  --teal:#12A594; --radius:16px;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Noto Sans KR', system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.wrap{ max-width:960px; margin:0 auto; padding:32px 20px 80px; }
a{ color:inherit; }

/* ---------- header ---------- */
header.top{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.eyebrow{ font-size:12px; letter-spacing:.14em; font-weight:700; color:var(--accent); margin-bottom:6px; }
header.top h1{ font-size:26px; font-weight:800; margin:0 0 4px; letter-spacing:-.01em; }
header.top .sub{ color:var(--ink-soft); font-size:14px; }
.logout{
  text-decoration:none; font-size:13px; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line); background:var(--panel); padding:8px 14px; border-radius:10px;
}
.logout:hover{ color:var(--accent); border-color:var(--accent-soft); }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.tabs button{
  font:inherit; font-weight:600; font-size:14px; cursor:pointer;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-soft);
  padding:9px 20px; border-radius:999px; transition:.15s;
}
.tabs button:hover{ color:var(--ink); }
.tabs button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }

.status{ color:var(--ink-soft); font-size:14px; padding:14px 2px; }
.status.err{ color:var(--accent-deep); font-weight:600; }

.pane{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px;
}

/* ---------- calendar ---------- */
.cal-head{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:14px; }
.cal-head button{
  font:inherit; font-size:18px; line-height:1; cursor:pointer; width:36px; height:36px;
  border:1px solid var(--line); background:#fff; border-radius:10px; color:var(--ink-soft);
}
.cal-head button:hover:not(:disabled){ color:var(--accent); border-color:var(--accent-soft); }
.cal-head button:disabled{ opacity:.35; cursor:default; }
.cal-title{ font-size:17px; font-weight:600; min-width:130px; text-align:center; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-grid .dow{ text-align:center; font-size:12px; font-weight:700; color:var(--ink-soft); padding:6px 0; }
.cal-grid .cell{
  aspect-ratio:1/1; border-radius:12px; border:1px solid transparent;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:14px; color:#C9C6D8; user-select:none;
}
.cal-grid .cell.in{ color:var(--ink); background:#FAFAFE; border-color:var(--line); }
.cal-grid .cell.has{
  cursor:pointer; color:var(--accent-deep); font-weight:700;
  background:var(--accent-soft); border-color:#F6C9DC;
}
.cal-grid .cell.has:hover{ background:#FBD5E4; }
.cal-grid .cell.has .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:3px; }
.cal-grid .cell.sel{ outline:2px solid var(--accent); outline-offset:1px; }
.cal-grid .cell.sun{ color:#D2607F; }
.cal-grid .cell.empty{ visibility:hidden; }

/* ---------- day detail / list card ---------- */
.day-detail{ margin-top:16px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:#FAFAFE; }
.day-detail .d-label{ font-weight:700; font-size:15px; margin-bottom:12px; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
.actions a{
  text-decoration:none; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:10px;
}
.actions a.view{ background:var(--accent); color:#fff; }
.actions a.view:hover{ filter:brightness(1.06); }
.actions a.dl{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.actions a.dl:hover{ border-color:var(--accent-soft); color:var(--accent-deep); }
.actions .none{ font-size:13px; color:var(--ink-soft); align-self:center; }

.list-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.rep-card{ border:1px solid var(--line); border-radius:12px; padding:16px; background:#FAFAFE; }
.rep-card .r-label{ font-weight:700; font-size:15px; margin-bottom:12px; }
.list-empty{ color:var(--ink-soft); font-size:14px; padding:10px 2px; }

/* ---------- login ---------- */
.login-body{ display:flex; min-height:100vh; align-items:center; justify-content:center; padding:24px; }
.login-card{
  width:100%; max-width:360px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px 28px; text-align:center;
}
.login-eyebrow{ font-size:11px; letter-spacing:.16em; font-weight:700; color:var(--accent); margin-bottom:10px; }
.login-card h1{ font-size:20px; font-weight:800; margin:0 0 6px; }
.login-sub{ color:var(--ink-soft); font-size:13px; margin:0 0 20px; }
.login-card input{
  width:100%; font:inherit; font-size:15px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:12px; background:#FAFAFE;
}
.login-card input:focus{ outline:2px solid var(--accent-soft); border-color:var(--accent); }
.login-card button{
  width:100%; font:inherit; font-weight:700; font-size:15px; cursor:pointer; color:#fff;
  background:var(--accent); border:none; border-radius:10px; padding:12px 14px;
}
.login-card button:hover{ filter:brightness(1.06); }
.login-error{ color:var(--accent-deep); font-size:13px; font-weight:600; margin-bottom:12px; }

@media (max-width:560px){
  .wrap{ padding:22px 14px 60px; }
  .pane{ padding:16px 14px; }
  .cal-grid{ gap:4px; }
}