/* /plugin/memo/assets/memo.css — Dark Scheme 정리본 */

/* ========== 패널 기본 ========== */
/* 오프캔버스(비임베드) 전용 */
.mm-panel:not(.rd-embed){
  position:fixed;top:0;right:0;
  width:360px;max-width:100vw;height:100vh;
  background:#101012;
  border-left:1px solid rgba(255,255,255,.12);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:9999;
}
.mm-panel:not(.rd-embed)[aria-hidden="false"],
.mm-panel:not(.rd-embed).open{transform:translateX(0)}

/* 임베드(카드 내부) — right-dock.js가 .rd-embed 부여 */
.mm-panel.rd-embed{
  position:static !important;inset:auto !important;
  width:100% !important;height:auto !important;max-height:none !important;
  transform:none !important;box-shadow:none !important;border:0 !important;
  overflow:visible !important;z-index:auto !important;
}

/* 헤더/본문 */
.mm-header{
  display:flex;align-items:center;justify-content:space-between;
  height:48px;padding:0 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:#15151a;
  color:#f5f5f7;
}
.mm-header strong{font-weight:700}
.mm-body{
  display:flex;flex-direction:column;
  height:calc(100vh - 48px);
  padding:12px;
  background:#101012;
  color:#e2e2ea;
}
/* 임베드 시 고정 높이 제거 */
.mm-panel.rd-embed .mm-body{height:auto !important;max-height:none !important}

/* ========== 폴더 UI ========== */
.mm-folders{display:flex;flex-direction:column;gap:8px;height:100%}
.mm-folder-toolbar{display:flex;gap:6px}

/* 폴더 이름 입력 */
#mm-new-folder-name{
  flex:1;height:36px;padding:0 10px;
  border:1px solid #3a3a40;
  border-radius:8px;
  background:#1b1b20;
  color:#e6e6ee;
  font-size:13px;
  box-sizing:border-box;
}
#mm-new-folder-name::placeholder{color:#777782}

/* ✅ 폴더 추가 버튼: 진한 회색 라운드 + 흰 글씨 */
#mm-new-folder{
  height:36px;padding:0 14px;
  border-radius:999px;
  border:1px solid #3a3a40;
  background:#26262d;
  color:#f5f5f8;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.55);
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease,color .15s ease;
}
#mm-new-folder:hover{
  background:#2f2f38;
  border-color:#4b4b55;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.8);
}
#mm-new-folder:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(0,0,0,.7);
}
#mm-new-folder:focus-visible{
  outline:2px solid rgba(95,180,255,.7);
  outline-offset:2px;
}

/* 리스트 */
.mm-folder-list{
  list-style:none;margin:0;padding:0;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:10px;
  flex:1;overflow:auto;
  background:#111116;
}
.mm-folder-list li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:#111116;
}
.mm-folder-list li:last-child{border-bottom:0}

.mm-folder-name{
  flex:1;display:flex;gap:8px;align-items:center;cursor:pointer;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#e2e2ea;font-size:13px;
}
.mm-folder-actions{display:flex;gap:6px}

/* 공용 버튼 */
.mm-btn{
  height:28px;padding:0 8px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.16);
  background:#1b1b21;
  color:#d8d8e0;
  font-size:12px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;
}
.mm-btn:hover{
  background:#23232a;
  border-color:rgba(255,255,255,.25);
  transform:translateY(-1px);
}
.mm-btn--danger{
  border-color:#ff5b5b;
  background:#2b1113;
  color:#ff9a9a;
}
.mm-btn--danger:hover{
  background:#3a171b;
  border-color:#ff8080;
}

/* 선택 강조 */
.mm-folder-list .bm-folder-item.active{
  background:#191926;
  border-radius:8px;
}
.mm-folder-list .bm-folder-item.active .mm-folder-name{
  color:#5fb4ff;
  font-weight:700;
}

/* 힌트 */
.mm-folder-hint{
  font-size:12px;
  color:#8a8a96;
  margin-top:6px;
}

/* ========== 드래그 정렬 피드백 ========== */
/* 컨테이너가 가려지지 않도록 */
#mm-panel .mm-folder-list,
#mm-panel #mm-folder-list{
  position:relative;
  overflow:visible;
  z-index:0;
}

/* 폴더 항목 공통 */
.bm-folder-item{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  cursor:grab;
}
.bm-folder-item:active{cursor:grabbing}

/* 드래그 중 스타일 */
.bm-folder-item.dragging{
  z-index:9999;
  opacity:.97;
  transform:none;
  background:#131724;
  outline:2px dashed #5fb4ff;
  outline-offset:-4px;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.9);
}
/* (옵션) 다른 아이템 흐리게 */
.bm-folder-item.dim{
  z-index:0;
  opacity:.78;
}

/* ========== 보드(폴더 index) ========== */
.mm-board{padding:16px}
.mm-toolbar{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.mm-toolbar button{
  height:36px;padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:#18181f;
  color:#f2f2f7;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.mm-toolbar button:hover{
  background:#222230;
  border-color:rgba(95,180,255,.7);
  box-shadow:0 8px 22px rgba(0,0,0,.75);
  transform:translateY(-1px);
}

.mm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:12px;
}
.mm-card{
  display:flex;flex-direction:column;gap:6px;
  background:#15151d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.7);
  padding:10px;
  min-height:140px;
  position:relative;
  color:#e6e6ee;
}
.mm-card textarea{
  width:100%;min-height:84px;resize:vertical;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:8px;
  background:#101017;
  color:#f0f0f8;
  font-size:13px;
  box-sizing:border-box;
}
.mm-card-title{
  width:100%;height:34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  padding:0 10px;
  background:#101017;
  color:#f0f0f8;
  font-size:13px;
  box-sizing:border-box;
}
.mm-card-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
}
.mm-empty{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  height:180px;
  color:#7e7e8a;
  background:#111116;
}

/* ========== 헤더 아이콘 공통 ========== */
.memo header .icon-btn{
  border:none;
  background-color:transparent;
  cursor:pointer;
  width:30px;height:30px;
  border-radius:7px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  opacity:.9;
  transition:opacity .15s ease,background-color .15s ease,transform .15s ease;
  color:transparent;
  text-indent:-9999px;
  overflow:hidden;
}
.memo header .icon-btn:hover{
  background-color:rgba(255,255,255,.06);
  opacity:1;
  transform:translateY(-1px);
}
.memo header .icon-btn.danger:hover{
  background-color:rgba(255,0,0,.1);
}

/* 아이콘 이미지 경로 */
.memo header .icon-btn.icon-pin{background-image:url('/plugin/memo/icon_pin.png')}
.memo header .icon-btn.icon-bin{background-image:url('/plugin/memo/icon_bin.png')}

/* ========== 최초 복원 시 애니메이션 제거(깜빡임 방지) ========== */
.mm-panel.mm-noanim{transition:none !important;animation:none !important}

/* Plus 토글 버튼 — 패널 스코프 */
#mm-panel .mm-folder-more,
#mm-panel-guest .mm-folder-more{
  all:unset;
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;min-width:28px;padding:4px 6px;
  border-radius:8px;
  cursor:pointer;box-sizing:border-box;user-select:none;
  font-size:18px;line-height:1;font-weight:700;
  color:#8c8c96;
  background:transparent;
  border:none;
  transition:background .15s ease,transform .15s ease,color .15s ease;
}
#mm-panel .mm-folder-more:hover,
#mm-panel-guest .mm-folder-more:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-1px);
  color:#ffffff;
}
#mm-panel .mm-folder-more:focus-visible,
#mm-panel-guest .mm-folder-more:focus-visible{
  outline:2px solid rgba(95,180,255,.8);
  outline-offset:2px;
}

/* 행 옵션 컨테이너(왼→오 슬라이드) — 패널 스코프 */
#mm-panel .mm-row-actions,
#mm-panel-guest .mm-row-actions{
  display:flex;gap:6px;max-width:0;overflow:hidden;
  transform:translateX(-6px);opacity:0;
  transition:max-width .18s ease,opacity .18s ease,transform .18s ease;
}
#mm-panel .mm-row-actions.is-open,
#mm-panel-guest .mm-row-actions.is-open{
  max-width:160px;opacity:1;transform:translateX(0);
}
#mm-panel .mm-row-actions .mm-act,
#mm-panel-guest .mm-row-actions .mm-act{
  all:unset;
  display:inline-flex;align-items:center;justify-content:center;
  background:#20202a;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;line-height:1.2;
  color:#e2e2ea;
  white-space:nowrap;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,color .15s ease;
}
#mm-panel .mm-row-actions .mm-act:hover,
#mm-panel-guest .mm-row-actions .mm-act:hover{
  background:#292939;
  border-color:rgba(95,180,255,.7);
  transform:translateY(-1px);
}
#mm-panel .mm-row-actions .mm-act.delete,
#mm-panel-guest .mm-row-actions .mm-act.delete{
  color:#ff8787;
  border-color:#ff5b5b;
  background:#2a1315;
}
#mm-panel .mm-row-actions .mm-act.delete:hover,
#mm-panel-guest .mm-row-actions .mm-act.delete:hover{
  background:#3a181b;
}