* { box-sizing: border-box; }

:root {
  --ink: #252219;
  --sub: #746f60;
  --line: #c9c3b2;
  --accent: #2864dc;
  --danger: #b42318;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  font-family: Arial, "Noto Sans KR", system-ui, sans-serif;
}

button, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  padding: max(56px, env(safe-area-inset-top)) 18px 32px;
}

.auth-card {
  width: min(100%, 390px);
  padding: 34px 24px 26px;
  border: 1px solid #e6dfbf;
  border-radius: 22px;
  background: #fff8c9;
  box-shadow: 0 18px 44px rgb(68 55 14 / 12%);
  text-align: center;
}

.paper-mark { width:44px; height:9px; margin:0 auto 20px; border-radius:999px; background:#d5b73d; }
h1 { margin:0; font-size:2rem; }
.intro { margin:10px 0 28px; color:#6f6650; line-height:1.55; }
.primary, .secondary { width:100%; min-height:50px; border-radius:14px; cursor:pointer; }
.primary { border:0; background:#2f6e46; color:#fff; font-weight:700; }
.secondary { border:1px solid #c8bd91; background:#fff; color:#3d392f; }
.primary:disabled, .secondary:disabled { cursor:wait; opacity:.65; }
.status { min-height:42px; margin:18px 0 0; color:#665e49; font-size:.93rem; line-height:1.5; }
.status.error { color:var(--danger); }

.app-shell { width:100%; height:100%; }
.topbar {
  position:fixed; inset:0 0 auto; height:48px; z-index:50;
  display:flex; align-items:center; gap:8px; padding:6px 8px;
  background:#fffffff2; border-bottom:1px solid #d7d2c5; backdrop-filter:blur(8px);
}
.brand { padding:0; border:0; background:transparent; color:var(--ink); font-weight:800; white-space:nowrap; }
.board-status { flex:1; min-width:0; color:var(--sub); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-btn { width:36px; height:36px; padding:0; border:1px solid #d7d2c5; border-radius:9px; background:#fff; color:var(--ink); font-weight:800; }

.board-viewport { position:fixed; inset:48px 0 0; overflow:hidden; touch-action:none; background:#fff; user-select:none; }
.board-canvas {
  position:absolute; left:0; top:0; width:900px; height:1680px; transform-origin:0 0;
  display:grid; grid-template-rows:420px 1fr; gap:10px; padding:10px; will-change:transform;
}
.category-panel { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid #8f8979; border-radius:7px; background:var(--paper,#fff4a8); box-shadow:0 2px 7px #4b443024; }
.category-head { flex:0 0 38px; display:flex; align-items:center; gap:8px; padding:5px 8px 4px 11px; border-bottom:1px solid #4b443026; }
.category-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:800; color:#111; }
.category-count { color:#4f4a3e; font-size:11px; }
.category-add { width:28px; height:28px; padding:0; border:0; border-radius:50%; background:#ffffffa6; color:#29251b; font-size:20px; line-height:1; }
.category-notes { flex:1; min-height:0; overflow:auto; padding:6px; scrollbar-width:thin; overscroll-behavior:contain; }
.category-grid { min-width:0; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:8px; }
.board-note { position:relative; margin:0 0 5px; padding:7px 54px 7px 9px; border-bottom:1px solid #504a352b; background:#ffffff18; cursor:pointer; }
.board-note-content { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.35; }
.board-note.expanded .board-note-content { overflow:visible; text-overflow:clip; white-space:pre-wrap; overflow-wrap:anywhere; }
.note-action { position:absolute; top:4px; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:#ffffff8f; font-size:12px; }
.board-note-edit { right:28px; color:#3e4f67; }
.board-note-delete { right:4px; color:#7b291f; }
.empty { padding:14px 8px; color:#746e5c; font-size:12px; text-align:center; }

.overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:12px; background:#17150f78; }
.overlay.show { display:flex; }
.confirm-overlay { z-index:260; }
.dialog { width:min(100%,480px); max-height:calc(100dvh - 24px); overflow:auto; border-radius:15px; background:#fff; box-shadow:0 15px 50px #0004; }
.editor-dialog { height:min(620px,calc(100dvh - 24px)); display:flex; flex-direction:column; }
.dialog-head { display:flex; align-items:center; gap:8px; padding:10px 12px 6px; }
.dialog-head h2 { flex:1; margin:0; font-size:18px; }
.dialog-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:0 12px 12px; }
.editor-category { width:100%; height:40px; margin-bottom:7px; padding:7px 9px; border:1px solid #ddd8cb; border-radius:9px; background:#fff; }
.editor-text { flex:1; width:100%; min-height:180px; resize:none; padding:10px; border:1px solid #d7d2c5; border-radius:10px; outline:none; line-height:1.45; }
.editor-text:focus { border-color:var(--accent); box-shadow:0 0 0 3px #2864dc18; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; padding-top:9px; }
.btn { min-height:42px; padding:8px 14px; border:0; border-radius:9px; font-weight:700; }
.btn-light { background:#f2f1ed; color:var(--ink); }
.btn-primary { background:var(--accent); color:#fff; }
.btn-danger { background:#fff0ee; color:var(--danger); }
.confirm-dialog { max-width:360px; }
.confirm-dialog p { margin:8px 0 16px; line-height:1.5; }

.undo-toast { position:fixed; left:50%; bottom:18px; z-index:500; display:none; align-items:center; gap:14px; width:max-content; max-width:calc(100vw - 24px); padding:10px 12px 10px 16px; border-radius:12px; background:#282722; color:#fff; box-shadow:0 6px 24px #0005; font-size:13px; transform:translateX(-50%); }
.undo-toast.show { display:flex; }
.undo-toast button { border:0; background:transparent; color:#ffe07a; font-weight:800; }

@media (max-width:560px) {
  .auth-shell { padding-top:max(34px,env(safe-area-inset-top)); }
  .editor-dialog { height:calc(100dvh - 16px); }
}