/* modules/martmemo/skins/default/css/default.css */
#martmemo_root{ all:initial; }
#martmemo_root, #martmemo_root *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
#martmemo_root{
  --mm-bg:#F5F5F3; --mm-paper:#FFFFFF; --mm-ink:#1C1C1C; --mm-ink-soft:#8C8C8C;
  --mm-line:#EAEAEA; --mm-amber:#FFC229; --mm-amber-dark:#E8A800; --mm-amber-soft:#FFF6DE;
  --mm-badge-red:#FF4B4B; --mm-circle-gray:#C9C9C9;
}
.mm-hidden{ display:none !important; }
.mm-launcher{
  position:fixed; right:36px; bottom:110px; width:58px; height:58px; border-radius:50%;
  background:#fff; border:1px solid var(--mm-line); box-shadow:0 6px 18px rgba(0,0,0,0.15);
  cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:99990;
}

@media (max-width: 576px) {
  .mm-launcher {
    right: 20px;
    bottom: 50px;
  }
}

.mm-launcher svg{ width:28px; height:28px; }
.mm-badge{
  position:absolute; top:-4px; right:-4px; background:var(--mm-badge-red); color:#fff;
  font-size:11px; font-weight:700; min-width:19px; height:19px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--mm-bg);
}
.mm-panel{
  position:fixed; left:0; right:0; bottom:0; background:var(--mm-bg);
  border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,0.18);
  z-index:99990; display:flex; flex-direction:column; overflow:hidden; transition:height .2s ease;
  padding-bottom:8px;
}
.mm-panel.mm-dragging{ transition:none; }
.mm-card{
  background:var(--mm-paper); border-radius:12px; margin:0 10px 8px 10px;
  overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); flex-shrink:0;
}
.mm-card-main{ flex:1 1 auto; display:flex; flex-direction:column; min-height:0; margin-top:8px; }
.mm-resize-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:8px 10px; flex-shrink:0; }
.mm-resize-btn{ flex-shrink:0; font-size:12px; font-weight:700; color:var(--mm-ink-soft); background:#F3F3F1; border:none; border-radius:999px; padding:6px 12px; cursor:pointer; }
.mm-resize-btn:hover{ background:var(--mm-amber-soft); color:var(--mm-amber-dark); }
.mm-drag-handle{ flex:1; display:flex; align-items:center; justify-content:center; padding:6px 0; cursor:ns-resize; touch-action:none; }
.mm-drag-handle .mm-drag-bar{ width:40px; height:4px; border-radius:2px; background:var(--mm-ink-soft); }
.mm-drag-handle:hover .mm-drag-bar{ background:var(--mm-amber); }
.mm-title-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--mm-line); flex-shrink:0; }
.mm-title{ display:flex; align-items:center; gap:6px; font-size:15px; _font-weight:700; color:var(--mm-ink); }
.mm-title svg{ width:18px; height:18px; }
.mm-mart-label{ font-size:15px; color:#333333; }
.mm-close-btn{ background:none; border:none; color:#333333; font-size:12px; font-weight:500; cursor:pointer; padding:6px 8px;border: 1px solid var(--mm-line);background: var(--mm-line);border-radius: 8px; }
.mm-close-btn:hover{ color:var(--mm-ink); }
.mm-login-required{ padding:30px 20px; text-align:center; color:var(--mm-ink-soft); font-size:13px; }
.mm-input-block{ padding:10px 16px 18px 16px; flex-shrink:0; }
.mm-row-input{ display:flex; gap:6px; }
.mm-row-input input[type=text]{ flex:1; padding:9px 10px; font-size:13px; border:1px solid var(--mm-line); border-radius:8px; color:var(--mm-ink); }
.mm-row-input button{ padding:9px 14px; font-size:13px; _font-weight:700; _background:var(--mm-amber); border: 1px solid var(--mm-line); border:none; border-radius:8px; cursor:pointer; }
.mm-row-input button:disabled{ _background:var(--mm-line); color:var(--mm-ink-soft); cursor:default;border:1px solid var(--mm-line) }
.mm-row-input button:hover{cursor:pointer; color: var(--mm-ink);}
.mm-list-meta-row{ display:flex; align-items:center; justify-content:space-between; padding:4px 16px 8px 16px; flex-shrink:0; }
.mm-meta-count{ font-size:12px; color:var(--mm-ink-soft); }
.mm-clear-all{ background:none; border:none; color:var(--mm-ink-soft); font-size:12px; _font-weight:700; cursor:pointer; padding:2px 4px; _text-decoration:underline; text-underline-offset:2px; }
.mm-clear-all:hover{ color:var(--mm-badge-red); }
.mm-list{ flex:1 1 auto; overflow-y:auto; padding:4px 16px 12px 16px; min-height:40px; }
.mm-empty{ color:var(--mm-ink-soft); font-size:13px; text-align:center; padding:30px 8px; }
.mm-row{ padding:10px 0; border-bottom:1px solid var(--mm-line); }
.mm-row:last-child{ border-bottom:none; }
.mm-row-main{ display:flex; align-items:center; gap:8px; }
.mm-check{ width:21px; height:21px; border-radius:50%; border:2px solid var(--mm-circle-gray); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; font-size:11px; _color:var(--mm-circle-gray); background:#fff; }
.mm-check:not(.mm-checked):hover{ background:var(--mm-amber-soft); border-color:var(--mm-amber); color:var(--mm-amber-dark); }
.mm-check.mm-checked{ background:var(--mm-amber); border-color:var(--mm-amber); color:#fff; }
.mm-check.mm-checked:hover{ background:var(--mm-amber-dark); border-color:var(--mm-amber-dark); }
.mm-item-name{ flex:1; font-size:13.5px; _font-weight:600; min-width:0; _overflow:hidden; _text-overflow:ellipsis; _white-space:nowrap; color:var(--mm-ink); }
.mm-row.mm-purchased .mm-item-name{ text-decoration:line-through; color:var(--mm-ink-soft); }
.mm-card-badge{ flex-shrink:0; max-width:92px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11.5px; padding:5px 9px; border-radius:999px; cursor:pointer; background:#F0F0EE; color:#333; border:1px solid var(--mm-line); }
.mm-card-badge.mm-has-card{cursor:pointer; background:#F0F0EE; color:#333333; border:1px solid var(--mm-line); }
.mm-row.mm-purchased .mm-card-badge{ opacity:.55; }
.mm-del-btn{ background:none; border:none; color:var(--mm-ink-soft); font-size:15px; cursor:pointer; padding:2px 4px; flex-shrink:0; }
.mm-del-btn:hover{ color:var(--mm-badge-red); }
.mm-card-edit{ margin-top:8px; padding:10px; background:#FAFAF8; border:1px solid var(--mm-line); border-radius:8px; }
.mm-card-edit input[type=text]{ width:100%; padding:8px 10px; font-size:12.5px; border:1px solid var(--mm-line); border-radius:6px; margin-bottom:6px; }
.mm-suggest{ max-height:150px; overflow-y:auto; }
.mm-suggest .mm-opt{ padding:8px 6px; font-size:12.5px; border-radius:6px; cursor:pointer; color:var(--mm-ink); }
.mm-suggest .mm-opt:hover{ background:var(--mm-amber-soft); }
.mm-suggest .mm-opt.mm-none-opt{ color:var(--mm-ink-soft); border-bottom:1px solid var(--mm-line); margin-bottom:4px; }
.mm-footer-row{ flex-shrink:0; border-top:1px solid var(--mm-line); display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
.mm-fav-toggle{ display:flex; align-items:center; gap:6px; cursor:pointer; font-size:15px; _font-weight:700; color:#333333; }
.mm-fav-toggle .mm-fav-icon{ _color:var(--mm-badge-red); font-size:13px; }
.mm-fav-toggle .mm-fav-chevron{ font-size:11px; color:var(--mm-ink-soft); transition:transform .15s ease; }
.mm-fav-toggle.mm-open .mm-fav-chevron{ transform:rotate(180deg); }
.mm-usage-link{ font-size:12px; color:var(--mm-ink-soft); text-decoration:underline; text-underline-offset:2px; }
.mm-usage-link:hover{ color:#333333; }
.mm-usage-link.mm-disabled{ color:var(--mm-line); text-decoration:none; pointer-events:none; cursor:default; }

.mm-fav-body{ padding:0 16px 14px 16px; max-height:180px; overflow-y:auto;  -webkit-overflow-scrolling: touch; }
/* 2. 모바일/웹킷 브라우저에서 스크롤바를 항상 보이도록 강제 지정 */
.mm-fav-body::-webkit-scrollbar {
  width: 5px; /* 스크롤바 너비 */
  display: block; /* 모바일에서 숨김 방지 */
}
.mm-fav-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2); /* 스크롤바 막대 색상 */
  border-radius: 4px;
}

.mm-fav-body::-webkit-scrollbar-track {
  background: transparent; /* 스크롤바 배경 */
}

.mm-fav-list{ display:flex; flex-wrap:wrap; gap:8px; }
.mm-fav-list a{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 14px; color:#333333; background-color:#fff;
  border:1px solid #e8eaeb; border-radius:999px;
  font-size:13px; _font-weight:600; text-decoration:none; white-space:nowrap;
  transition: background-color .15s ease;
}
.mm-fav-list a:hover{ background-color:#F3F3F1; }
.mm-fav-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; _padding:0 4px; border-radius:999px;
  background:var(--mm-line); color:#1C1C1C; font-size:11px; font-weight:700;
}
.mm-fav-empty{ padding:16px 0; font-size:12px; color:var(--mm-ink-soft); text-align:center; }
@media (min-width:860px){
  .mm-panel{ left:auto; right:20px; bottom:20px; width:380px; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,0.2); }
}