:root{
  --bg:#f5f5f7;
  --bg-top:#f4f5f7;
  --bg-bottom:#e8eaee;
  --bg-highlight:#fdfdfe;
  --glass:rgba(255,255,255,.72);
  --glass-side:rgba(255,255,255,.55);
  --surface:#ffffff;
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --hair:rgba(0,0,0,.09);
  --hair-strong:rgba(0,0,0,.14);
  --fill:rgba(120,120,128,.12);
  --fill-hover:rgba(120,120,128,.20);
  --accent:#0071e3;
  --accent-press:#0062c4;
  --accent-soft:rgba(0,113,227,.11);
  --green:#34c759;
  --green-press:#2aa74b;
  --danger:#ff3b30;
  --danger-soft:rgba(255,59,48,.12);
  /* 다층 그림자 — 얕은 접촉 + 중간 확산 + 깊은 앰비언트 */
  --shadow-note:
    0 1px 1px rgba(16,24,40,.10),
    0 3px 6px rgba(16,24,40,.09),
    0 10px 18px rgba(16,24,40,.10),
    0 22px 38px rgba(16,24,40,.11);
  --shadow-lift:
    0 2px 4px rgba(16,24,40,.12),
    0 8px 16px rgba(16,24,40,.12),
    0 20px 36px rgba(16,24,40,.16),
    0 40px 70px rgba(16,24,40,.20);
  --shadow-pop:0 4px 24px rgba(16,24,40,.14), 0 1px 4px rgba(16,24,40,.08);
  --sidebar-w:216px;
}

/* ===== 다크 테마 ===== */
:root[data-theme="dark"]{
  --bg:#1c1c1e;
  --bg-top:#2a2b2e;
  --bg-bottom:#161618;
  --bg-highlight:#313236;
  --glass:rgba(28,28,30,.72);
  --glass-side:rgba(30,30,33,.55);
  --surface:#2c2c2e;
  --text:#f5f5f7;
  --text-2:#a1a1a6;
  --text-3:#8a8a8f;
  --hair:rgba(255,255,255,.10);
  --hair-strong:rgba(255,255,255,.16);
  --fill:rgba(255,255,255,.10);
  --fill-hover:rgba(255,255,255,.17);
  --accent:#0a84ff;
  --accent-press:#409cff;
  --accent-soft:rgba(10,132,255,.20);
  --green:#30d158;
  --green-press:#28b84c;
  --danger:#ff453a;
  --danger-soft:rgba(255,69,58,.20);
  --shadow-note:
    0 1px 2px rgba(0,0,0,.40),
    0 4px 10px rgba(0,0,0,.36),
    0 12px 24px rgba(0,0,0,.40),
    0 26px 46px rgba(0,0,0,.46);
  --shadow-lift:
    0 2px 6px rgba(0,0,0,.44),
    0 10px 22px rgba(0,0,0,.44),
    0 24px 44px rgba(0,0,0,.52),
    0 46px 80px rgba(0,0,0,.60);
  --shadow-pop:0 6px 28px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

*{box-sizing:border-box;}
/* hidden 속성이 display 규칙에 덮이지 않도록 (로그인/계정 버튼 토글) */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;height:100%;
  display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Apple SD Gothic Neo","Pretendard","Noto Sans KR","Helvetica Neue",Arial,sans-serif;
  /* 평평한 단색 대신 은은한 깊이 — 위쪽이 밝고 아래로 갈수록 가라앉음 */
  background:
    radial-gradient(1100px 520px at 50% -8%, var(--bg-highlight) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.01em;
  transition:color .2s ease;
}
b{font-weight:600;}

/* ===== Header (frosted) ===== */
header{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 20px;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
  position:relative;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{
  width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--fill);color:var(--text-2);
}
.brand h1{margin:0;font-size:15px;font-weight:600;letter-spacing:-.02em;}

.actions{display:flex;gap:8px;align-items:center;}

.btn{
  height:34px;padding:0 13px;
  border:0;border-radius:9px;
  background:var(--fill);color:var(--text);
  font-size:13.5px;font-weight:500;font-family:inherit;letter-spacing:-.01em;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .15s ease, transform .1s ease;
}
.btn:hover{background:var(--fill-hover);}
.btn:active{transform:scale(.97);}
.btn .ic{opacity:.8;}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;color:var(--text-2);}

/* 언어 선택 — 버튼엔 현재 언어 코드, 누르면 목록 */
.lang-wrap{position:relative;}
.lang-code{
  font-size:11.5px;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
/* .menu 가 아래쪽에서 min-width:244px 를 걸므로 특이도를 한 단계 높인다 */
.menu.lang-menu{min-width:168px;}
/* 라벨은 왼쪽, 체크는 오른쪽 끝 */
.lang-item{justify-content:space-between;gap:12px;}
.lang-item.active{color:var(--accent);font-weight:600;}
.mi-check{flex:none;color:var(--accent);}

/* 테마 토글 아이콘: 라이트=달, 다크=해 */
.ic-sun{display:none;}
:root[data-theme="dark"] .ic-moon{display:none;}
:root[data-theme="dark"] .ic-sun{display:block;}

/* 구글 로그인 버튼 */
.btn-login{
  background:var(--surface);
  border:1px solid var(--hair-strong);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding-left:12px;padding-right:14px;
}
.btn-login:hover{background:var(--fill);}
.btn-login .g-logo{flex:none;}

/* 계정 아바타 버튼 */
.btn-account{
  width:34px;height:34px;flex:none;padding:0;border:0;cursor:pointer;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:0;
  color:#fff;
  background:linear-gradient(150deg, #3a9bff, var(--accent));
  box-shadow:0 2px 7px rgba(0,113,227,.42), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease, box-shadow .14s ease;
}
.btn-account:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(0,113,227,.5), inset 0 1px 0 rgba(255,255,255,.25);}
.btn-account:active{transform:scale(.93);}

/* ===== 더보기 메뉴 ===== */
.menu-wrap{position:relative;}
.menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:244px;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:13px;
  box-shadow:var(--shadow-pop);
  padding:6px;z-index:40;
  animation:menuPop .16s cubic-bezier(.2,.8,.3,1);
  transform-origin:top right;
}
@keyframes menuPop{from{opacity:0;transform:translateY(-4px) scale(.97);}to{opacity:1;transform:none;}}
.menu[hidden]{display:none;}
.menu-item{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:9px 10px;border:0;border-radius:8px;
  background:transparent;color:var(--text);
  font-size:14px;font-weight:500;font-family:inherit;text-align:left;letter-spacing:-.01em;
  cursor:pointer;transition:background .12s ease;
}
.menu-item:hover{background:var(--fill);}
.mi-ic{opacity:.7;flex:none;}
.menu-item.danger{color:var(--danger);}
.menu-item.danger:hover{background:var(--danger-soft);}
.menu-sep{height:1px;background:var(--hair);margin:5px 8px;}

.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 7px;
  border-radius:999px;background:var(--fill);
  font-size:12px;font-weight:600;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

/* ===== Layout: 사이드바 + 책상 ===== */
.layout{flex:1;min-height:0;display:flex;}

.sidebar{
  flex:none;width:var(--sidebar-w);
  display:flex;flex-direction:column;gap:2px;
  padding:16px 10px;
  border-right:1px solid var(--hair);
  background:var(--glass-side);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  overflow-y:auto;
}
.side-label{
  padding:2px 10px 8px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text-3);
}
.proj-list{display:flex;flex-direction:column;gap:2px;}

.proj-row{
  display:flex;align-items:center;gap:2px;
  border-radius:8px;
  transition:background .12s ease;
}
.proj-row:hover{background:var(--fill);}
.proj-row.active{background:var(--accent-soft);}

.proj-pick{
  flex:1;min-width:0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  padding:8px 4px 8px 10px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--text-2);text-align:left;
}
.proj-row.active .proj-pick{color:var(--accent);font-weight:600;}
.proj-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proj-count{
  color:var(--text-3);font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;flex:none;
}
.proj-row.active .proj-count{color:var(--accent);opacity:.75;}

.proj-acts{display:flex;gap:1px;padding-right:5px;opacity:0;transition:opacity .12s ease;}
.proj-row:hover .proj-acts, .proj-row:focus-within .proj-acts{opacity:1;}
.proj-act{
  width:24px;height:24px;border:0;border-radius:6px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text-3);
  transition:background .12s ease, color .12s ease;
}
.proj-act:hover{background:var(--fill-hover);color:var(--text);}
.proj-act.danger:hover{background:rgba(255,59,48,.14);color:var(--danger);}

.new-proj{
  margin-top:6px;
  display:flex;align-items:center;gap:7px;
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  padding:8px 10px;border-radius:8px;
  font-size:13.5px;font-weight:500;color:var(--text-3);
  transition:background .12s ease, color .12s ease;
}
.new-proj:hover{background:var(--fill);color:var(--text);}

/* ===== Desk ===== */
.desk-shell{flex:1;min-width:0;display:flex;flex-direction:column;}
.desk-head{
  flex:none;padding:18px 22px 10px;
  display:flex;align-items:center;gap:10px;
}
.desk-head h2{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em;}
/* 프로젝트 이름·개수와 같은 줄, 반대쪽 끝에 */
.btn-archive{margin-left:auto;flex:none;}

.desk-list{
  flex:1;min-height:0;overflow:auto;
  padding:14px 22px 120px;
  display:grid;grid-template-columns:repeat(auto-fill, minmax(208px,1fr));
  /* 카드 높이를 행 높이로 옮겨야 2칸 차지(1x2, 2x2)가 성립한다 */
  grid-auto-rows:210px;
  gap:30px 22px;align-content:start;
  background:transparent;
}
/* ===== 카드 크기 (격자 칸 단위) ===== */
.note.size-2x1{grid-column:span 2;}
.note.size-1x2{grid-row:span 2;}
.note.size-2x2{grid-column:span 2;grid-row:span 2;}

/* 새 메모 추가 자리 — 메모가 실제로 생기는 위치(맨 앞)에 놓인다 */
.note-add{
  width:100%;height:100%;
  border:1.5px dashed var(--hair-strong);
  border-radius:12px;background:transparent;
  cursor:pointer;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--text-3);font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s cubic-bezier(.2,.8,.3,1);
}
.note-add:hover{
  border-color:var(--accent);color:var(--accent);
  background:var(--accent-soft);
  transform:translateY(-3px);
}
.note-add:active{transform:scale(.98);}
.note-add svg{opacity:.9;}

/* ===== Note ===== */
.note{
  --tilt:0deg;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:var(--shadow-note);
  padding:24px 15px 12px;   /* 위쪽 여백은 드래그 바(22px) 자리 */
  position:relative;display:flex;flex-direction:column;
  width:100%;height:100%;
  transform:rotate(var(--tilt));
  transform-origin:50% 12%;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
  will-change:transform;
}
/* 기울기는 유지한 채 들어올리기만 — 격자 안에서 카드가 튀어 보이지 않게 */
.note:hover, .note:focus-within{
  transform:rotate(var(--tilt)) translateY(-5px) scale(1.012);
  box-shadow:var(--shadow-lift);
  z-index:2;
}

@keyframes placeNote{
  0%{transform:rotate(calc(var(--tilt) - 4deg)) translateY(-16px) scale(1.05);opacity:0;}
  60%{transform:rotate(calc(var(--tilt) + 1deg)) translateY(1px) scale(1);opacity:1;}
  100%{transform:rotate(var(--tilt));opacity:1;}
}
.note.placing{animation:placeNote .34s cubic-bezier(.2,.8,.3,1) both;}

@keyframes peelOff{
  0%{transform:rotate(var(--tilt)) translate(0,0) scale(1);opacity:1;}
  22%{transform:rotate(calc(var(--tilt) - 4deg)) translateY(-12px) scale(1.04);opacity:1;}
  100%{transform:rotate(-14deg) translate(40px,-150px) scale(.6);opacity:0;}
}
.note.peeling{animation:peelOff .5s cubic-bezier(.4,.1,.5,1) forwards;pointer-events:none;z-index:5;}

.note .content{
  width:100%;flex:1;min-height:66px;
  border:0;outline:none;background:transparent;
  font-size:14px;line-height:1.45;color:inherit;font-family:inherit;letter-spacing:-.01em;
  overflow-y:auto;resize:none;
}
/* 본문색(readableTextColor)에서 파생 — 어떤 노트 색에서도 대비가 유지됨 */
.note .content::placeholder{color:currentColor;opacity:.34;}

/* ===== Note 도구 — 색상 · · · [⋯] [✓] 한 줄 ===== */
.note .tools{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:8px;
  opacity:0;transition:opacity .18s ease;
}
.note:hover .tools, .note:focus-within .tools, .note.menu-open .tools{opacity:1;}
@media (hover:none){ .note .tools{opacity:1;} }
.note.menu-open{z-index:6;}

/* 드래그 바 — 카드 위쪽 띠 전체. 항상 보이고 타깃이 카드 폭만큼 넓다.
   textarea 위에 겹치지 않도록 .note 의 padding-top 을 이 높이만큼 준다. */
.note-dragbar{
  position:absolute;top:0;left:0;right:0;height:22px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px 12px 0 0;
  cursor:grab;
  transition:background .14s ease;
}
/* touch-action:none 은 포인터 장치에서만.
   터치에서 이걸 걸면 드래그바 위에서 시작한 스와이프가 스크롤되지 않는다
   (화면의 7% 가 스크롤 먹통이 됨). 터치는 스크롤을 우선한다. */
@media (hover:hover) and (pointer:fine){
  .note-dragbar{touch-action:none;}
}
.note-dragbar:hover{background:rgba(0,0,0,.05);}
.note-dragbar:active{cursor:grabbing;}
/* 잡을 수 있다는 신호 — 평소엔 옅게, 카드에 올리면 또렷하게 */
.grip-dots{
  width:34px;height:8px;
  background-image:radial-gradient(currentColor 1.5px, transparent 1.7px);
  background-size:7px 4px;
  opacity:.6;transition:opacity .14s ease;
}
.note:hover .grip-dots, .note:focus-within .grip-dots{opacity:.85;}
.note-dragbar:hover .grip-dots{opacity:1;}

.note.dragging{
  pointer-events:none;          /* 아래 카드를 집어낼 수 있도록 */
  z-index:30;
  box-shadow:var(--shadow-lift);
  transition:none;              /* 손가락을 그대로 따라오게 */
  opacity:.95;
}
/* 드래그 중에는 커서를 통일하고 실수로 텍스트가 선택되지 않게 */
body.dragging-note{cursor:grabbing;user-select:none;}
body.dragging-note .note:not(.dragging){transition:transform .18s cubic-bezier(.2,.8,.3,1);}

.swatches{display:flex;gap:9px;align-items:center;}
.swatch{
  position:relative;
  width:17px;height:17px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(0,0,0,.14);
  transition:transform .12s ease, box-shadow .12s ease;
}
/* 점은 작게 보이되 손가락으로 누를 영역은 31px 확보 */
.swatch::before{content:"";position:absolute;inset:-7px;border-radius:50%;}
.swatch:hover{transform:scale(1.16);}
/* 링은 노트 배경(--note-bg)으로 한 칸 띄우고 본문색으로 그린다 → 라이트/다크 모두 자연스러움 */
.swatch.active{
  transform:scale(1.08);
  box-shadow:0 0 0 2px var(--note-bg,#fff), 0 0 0 3.5px currentColor;
}

/* 노트 우하단 액션 — 조용한 고스트 버튼 */
.note-actions{display:flex;align-items:center;gap:5px;}
.noteact{
  background:transparent;border:0;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:29px;border-radius:8px;
  color:currentColor;opacity:.92;
  /* 잉크만 진하게 하면 노트 색에 묻힌다. 옅은 판을 깔아 버튼 형태가 보이게. */
  background:rgba(0,0,0,.075);
  transition:background .12s ease, opacity .12s ease, transform .1s ease;
}
.noteact:hover{background:rgba(0,0,0,.16);opacity:1;}
.noteact:active{transform:scale(.92);}
/* 평소엔 조용하고, 올렸을 때만 각자의 의미(초록=완료 / 빨강=삭제)가 드러남 */
.noteact.done:hover{background:rgba(52,199,89,.20);color:#1a7f3c;opacity:1;}
.noteact.danger:hover{background:rgba(255,59,48,.18);color:#c1121b;opacity:1;}

/* ===== 실행취소 토스트 ===== */
/* left:50% 로 가운데를 잡으면 폭이 화면 절반으로 잘려서 글자가 끊긴다.
   inset 0 + margin auto 로 잡아야 내용만큼 온전히 펴진다. */
.toast{
  position:fixed;left:0;right:0;bottom:26px;z-index:80;
  width:max-content;max-width:calc(100% - 28px);
  margin:0 auto;
  display:flex;align-items:center;gap:14px;
  padding:11px 12px 11px 16px;
  border-radius:12px;
  background:rgba(28,28,30,.92);color:#fff;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 8px 30px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
  font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  animation:toastIn .22s cubic-bezier(.2,.8,.3,1);
}
:root[data-theme="dark"] .toast{background:rgba(58,58,62,.94);}
.toast.out{animation:toastOut .2s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.97);}}
.toast-action{
  border:0;cursor:pointer;font-family:inherit;flex:none;
  padding:5px 10px;border-radius:7px;
  background:rgba(255,255,255,.14);color:#6cb8ff;
  font-size:13.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background .12s ease;
}
.toast-action:hover{background:rgba(255,255,255,.24);}

/* ===== 노트 오버플로 메뉴 ===== */
.note-menu-wrap{position:relative;display:inline-flex;}
.note-menu{
  position:absolute;bottom:calc(100% + 8px);right:0;
  min-width:186px;padding:6px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--hair);border-radius:12px;
  box-shadow:var(--shadow-pop);
  z-index:8;
  transform-origin:bottom right;
  animation:notePop .15s cubic-bezier(.2,.8,.3,1);
}
.note-menu[hidden]{display:none;}
@keyframes notePop{from{opacity:0;transform:translateY(4px) scale(.96);}to{opacity:1;transform:none;}}

.note-menu-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 4px 5px 8px;
  font-size:13.5px;font-weight:500;color:var(--text-2);letter-spacing:-.01em;
}
.note-menu-sep{height:1px;background:var(--hair);margin:5px 6px;}
.note-menu-item{
  width:100%;display:flex;align-items:center;gap:9px;
  padding:8px 8px;border:0;border-radius:8px;
  background:transparent;color:var(--text);
  font-size:13.5px;font-weight:500;font-family:inherit;text-align:left;letter-spacing:-.01em;
  cursor:pointer;transition:background .12s ease;
}
.note-menu-item:hover{background:var(--fill);}
.note-menu-item.danger{color:var(--danger);}
.note-menu-item.danger:hover{background:var(--danger-soft);}

/* 크기 선택 — 실제 비율을 그대로 보여주는 4개 글리프 */
.size-pick{display:inline-flex;gap:4px;flex:none;}
.size-btn{
  width:26px;height:26px;padding:0;border:0;border-radius:7px;cursor:pointer;
  background:var(--fill);color:var(--text-3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.size-btn:hover{background:var(--fill-hover);color:var(--text);}
.size-btn.active{background:var(--accent-soft);color:var(--accent);}
.size-glyph{display:block;border:1.6px solid currentColor;border-radius:2.5px;}
.g-1x1{width:10px;height:10px;}
.g-2x1{width:17px;height:9px;}
.g-1x2{width:9px;height:17px;}
.g-2x2{width:16px;height:16px;}

.seg{display:inline-flex;align-items:center;background:var(--fill);border-radius:8px;overflow:hidden;flex:none;}
.seg-btn{
  border:0;background:transparent;cursor:pointer;
  padding:6px 12px;font-size:13px;font-weight:600;color:var(--text-2);font-family:inherit;
  transition:background .12s ease, opacity .12s ease;
}
.seg-btn:hover:not(:disabled){background:var(--fill-hover);}
.seg-btn:disabled{opacity:.32;cursor:default;}
.seg-btn:first-child{border-right:1px solid var(--hair);}

/* ===== 플로팅 추가 버튼 ===== */
.fab{
  position:fixed;right:26px;bottom:26px;z-index:25;
  width:56px;height:56px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  box-shadow:0 8px 24px rgba(0,113,227,.42), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), background .15s ease, box-shadow .16s ease;
}
.fab:hover{transform:translateY(-2px) scale(1.04);background:var(--accent-press);box-shadow:0 12px 30px rgba(0,113,227,.5);}
.fab:active{transform:scale(.93);}

/* ===== Archive Modal ===== */
.modal-back{
  position:fixed;inset:0;z-index:60;
  background:rgba(0,0,0,.4);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:stretch;justify-content:stretch;
}
.modal{width:100vw;height:100vh;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;}
.mhead{
  flex:none;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
}
.mhead-left{display:flex;align-items:center;gap:9px;}
.mhead-left b{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.mhead-right{display:flex;align-items:center;gap:9px;}

.search-box{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 11px;
  background:var(--fill);border-radius:9px;
  transition:box-shadow .15s ease, background .15s ease;
}
.search-box:focus-within{background:var(--surface);box-shadow:0 0 0 3px rgba(0,113,227,.25);}
.search-ic{color:var(--text-3);flex:none;}
.diary-search{
  border:0;outline:none;background:transparent;
  font-size:14px;font-family:inherit;min-width:170px;color:var(--text);letter-spacing:-.01em;
}
.diary-search::placeholder{color:var(--text-3);}
.close-x{background:var(--fill);}
.close-x:hover{background:var(--fill-hover);}

/* 모달 본문 = 사이드바 + 목록 (메인 화면과 동일한 구조) */
.mlayout{flex:1;min-height:0;display:flex;}
.archive-sidebar{background:var(--glass-side);}
.mbody{flex:1;min-width:0;min-height:0;overflow:auto;background:var(--bg);}
.diary-wrap{display:flex;flex-direction:column;gap:34px;padding:26px 26px 80px;max-width:1100px;margin:0 auto;}
.diary-empty{
  margin-top:12vh;align-self:center;
  color:var(--text-3);font-size:14px;
}

.diary-page{display:flex;flex-direction:column;gap:16px;}
.diary-date{
  display:flex;align-items:baseline;gap:10px;
  padding-bottom:11px;border-bottom:1px solid var(--hair);
}
.diary-date{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em;}
.diary-date-count{font-weight:500;color:var(--text-3);font-size:13px;font-variant-numeric:tabular-nums;}

.diary-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(184px,1fr));gap:18px;}
.diary-note{
  --tilt:0deg;position:relative;
  border-radius:12px;padding:14px 14px 11px;min-height:120px;
  display:flex;flex-direction:column;gap:8px;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:var(--shadow-note);
  transform:rotate(var(--tilt));
  transition:transform .18s ease, box-shadow .18s ease;
}
.diary-note:hover{transform:rotate(0deg) translateY(-3px) scale(1.015);box-shadow:var(--shadow-lift);z-index:2;}
@keyframes settleNote{from{transform:rotate(var(--tilt)) translateY(-8px);opacity:0;}to{transform:rotate(var(--tilt)) translateY(0);opacity:1;}}
.diary-note.settle{animation:settleNote .3s ease both;}
.diary-note .body{white-space:pre-wrap;line-height:1.45;font-size:14px;flex:1;word-break:break-word;letter-spacing:-.01em;}
/* "전체" 보기에서만 나오는 출처 표시 — 본문보다 확실히 약하게 */
.diary-from{
  font-size:11px;font-weight:600;letter-spacing:.02em;
  opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.diary-note .actions{display:flex;gap:6px;justify-content:flex-end;opacity:0;transition:opacity .15s ease;}
.diary-note:hover .actions, .diary-note:focus-within .actions{opacity:1;}
@media (hover:none){ .diary-note .actions{opacity:1;} }
.diary-note .iconbtn{
  background:rgba(0,0,0,.06);border:0;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:500;padding:5px 10px;border-radius:7px;color:var(--text-2);
  transition:background .12s ease;
}
.diary-note .iconbtn:hover{background:rgba(0,0,0,.12);}

body.modal-open .desk-shell, body.modal-open .fab{visibility:hidden;}

button:focus-visible, .diary-search:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  .note,.note.placing,.note.peeling,.diary-note,.diary-note.settle,.fab,.menu{animation:none !important;transition:none !important;}
}

@media (max-width:760px){
  /* 사이드바 → 가로 스크롤 탭 (메인·아카이브 동일하게) */
  .layout, .mlayout{flex-direction:column;}
  .sidebar{
    width:auto;flex-direction:row;align-items:center;gap:6px;
    padding:8px 12px;overflow-x:auto;overflow-y:hidden;
    border-right:0;border-bottom:1px solid var(--hair);
  }
  .side-label{display:none;}
  .proj-list{flex-direction:row;gap:6px;}
  .proj-row{flex:none;}
  .proj-pick{padding:7px 12px;white-space:nowrap;}
  .proj-acts{display:none;}
  .new-proj{margin-top:0;flex:none;white-space:nowrap;}
}

@media (max-width:560px){
  header{padding:9px 14px;}
  .desk-head{padding:14px 16px 8px;}
  .desk-head h2{font-size:19px;}
  /* 1행 도구(색상3 + ⋯ + 🗑 + ✓)가 들어갈 최소 폭 — 390px 화면에서도 2열 유지 */
  .desk-list{padding:12px 12px 120px;gap:20px 12px;grid-template-columns:repeat(auto-fill, minmax(168px,1fr));}
  .note{padding:14px 11px 11px;}
  .swatches{gap:7px;}
  .swatch{width:16px;height:16px;}
  .note-actions{gap:0;}
  .noteact{width:27px;}
  .noteact svg{width:15px;height:15px;}

  /* 좁은 화면에선 메뉴를 버튼이 아니라 카드에 맞춰 띄운다 — 화면 밖으로 잘리지 않게 */
  .note-menu-wrap{position:static;}
  .note-menu{left:8px;right:8px;bottom:46px;min-width:0;}
  .fab{right:18px;bottom:18px;}
  /* FAB(하단 우측) 위로 띄워서 겹치지 않게 */
  .toast{bottom:88px;}
  .diary-wrap{padding:20px 16px 60px;gap:26px;}
  .diary-grid{grid-template-columns:repeat(auto-fill, minmax(148px,1fr));}
  .diary-search{min-width:120px;}
}

/* 격자가 1열로 떨어지는 폭에서는 가로 2칸 카드가 밖으로 삐져나가므로 1칸으로 */
@media (max-width:380px){
  .desk-list .note.size-2x1, .desk-list .note.size-2x2{grid-column:auto;}
}