* { 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; }
.icon-btn svg, .attach-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.quick-add-button { font-size:25px; font-weight:500; line-height:1; }
.mic-button.listening { color:#fff; border-color:#c92b22; background:#d9362b; animation:mic-pulse 1s infinite; }
@keyframes mic-pulse { 50% { box-shadow:0 0 0 7px #d9362b2b; } }

.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;
}
.board-canvas.animating { transition:transform .24s ease; }
.board-canvas.focused .category-panel { box-shadow:0 8px 28px #312c1a35; }
.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; cursor:pointer; }
.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; touch-action:none; }
.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-canvas.unclassified-focused #unclassifiedPanel {
  position:absolute; left:305px; top:565px; width:290px; height:550px; z-index:5;
}
.board-canvas.unclassified-focused #categoryGrid { opacity:.12; pointer-events:none; }
.board-canvas.pinch-exit-preview #categoryGrid { opacity:0; pointer-events:none; }
.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; }
.format-bar { display:flex; align-items:center; gap:5px; min-height:38px; margin:0 0 7px; }
.format-bar button { width:34px; height:32px; padding:0; border:1px solid #d8d3c5; border-radius:8px; background:#fff; color:var(--ink); }
.format-bar button.active { background:#fff1b1; border-color:#bd9c2b; }
.format-bar output { min-width:25px; color:#6c6656; font-size:12px; text-align:center; }
.format-bar .color-choice { width:25px; height:25px; border:3px solid #fff; border-radius:50%; background:var(--choice); box-shadow:0 0 0 1px #d2cdbf; }
.format-bar .color-choice[data-color="#252219"] { --choice:#252219; }
.format-bar .color-choice[data-color="#c62828"] { --choice:#c62828; }
.format-bar .color-choice[data-color="#1769aa"] { --choice:#1769aa; }
.format-bar .color-choice[data-color="#217a3c"] { --choice:#217a3c; }
.format-bar .color-choice.selected { box-shadow:0 0 0 2px #d7a91e; }
.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; }
.editor-images { display:none; gap:7px; margin-top:8px; overflow-x:auto; }
.editor-images.show { display:flex; }
.editor-image { position:relative; flex:0 0 86px; height:66px; overflow:hidden; border:1px solid #d7d2c5; border-radius:9px; background:#f3f1eb; }
.editor-image img { width:100%; height:100%; object-fit:contain; }
.editor-image button { position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0; border:0; border-radius:50%; background:#222d; color:#fff; }
.attach-button { display:flex; align-items:center; gap:5px; }
#fileAttachButton { margin-right:auto; }
.attachment-summary { display:block; margin-top:3px; color:#615b4d; font-size:10px; }
.note-images { display:none; gap:5px; margin-top:6px; overflow-x:auto; }
.board-note.expanded .note-images { display:flex; }
.note-image { width:84px; height:62px; border-radius:6px; background:#fff9; object-fit:contain; }
.note-image.loading { background:linear-gradient(110deg,#ffffff55 25%,#fff 45%,#ffffff55 65%); background-size:200% 100%; animation:image-loading 1.1s linear infinite; }
.note-image.failed { border:1px dashed #a59d8a; }
@keyframes image-loading { to { background-position:-200% 0; } }
.note-files { display:flex; flex-direction:column; gap:4px; margin-top:5px; }
.note-file { max-width:100%; min-height:28px; padding:4px 7px; overflow:hidden; border:1px solid #a39b874f; border-radius:6px; background:#fff9; color:#3d526d; font-size:11px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.editor-file { flex:0 0 auto; max-width:210px; height:42px; display:flex; align-items:center; gap:5px; padding:6px 7px; border:1px solid #d7d2c5; border-radius:9px; background:#f3f1eb; }
.editor-file span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.editor-file button { flex:0 0 24px; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:#222d; color:#fff; }
.image-preview { z-index:320; padding:42px 12px 12px; background:#111d; }
.image-preview img { display:block; max-width:100%; max-height:calc(100dvh - 56px); object-fit:contain; border-radius:8px; }
.image-preview-close { position:fixed; top:max(10px,env(safe-area-inset-top)); right:12px; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:#fff; color:#222; font-size:25px; line-height:1; }
.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; }
.text-btn { padding:6px 8px; border:0; background:transparent; color:var(--accent); font-weight:700; }
.trash-dialog { height:min(720px,calc(100dvh - 20px)); display:flex; flex-direction:column; }
.trash-tools { display:flex; gap:6px; padding:0 12px 8px; }
.trash-tools .btn { min-height:36px; padding:6px 9px; font-size:12px; }
.trash-tools #trashEmpty { margin-left:auto; }
.trash-list { flex:1; min-height:0; overflow:auto; padding:0 12px 12px; }
.trash-empty { padding:50px 12px; color:var(--sub); text-align:center; }
.trash-item { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; margin-bottom:7px; padding:9px; border:1px solid #ded9cc; border-radius:10px; background:#fffdf6; }
.trash-check { width:20px; height:20px; }
.trash-content { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.trash-actions { display:flex; gap:4px; }
.trash-actions button { min-height:30px; padding:4px 7px; border:0; border-radius:7px; font-size:11px; font-weight:700; }
.trash-restore { background:#edf4ff; color:#2457a8; }
.trash-purge { background:#fff0ee; color:var(--danger); }

.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); }
}