/* =============================================
   common/css/style.css
   레이아웃 구조 요소는 ID 선택자로 적용
   버전 2.0
   #header #sidebar #sub-sidebar #main #sub-main
   #footer #preview-panel #list-panel #editor-panel
   ============================================= */

/* =============================================
   CSS Variables  (:root)
   ============================================= */
:root {
  /* ── Color ── */
  --clr-primary:        #26205a;
  --clr-primary-hover:  #b51a00;
  --clr-accent:         #d7d7d7;
  --clr-bg:             #f5f6f8;
  --clr-surface:        #ffffff;
  --clr-border:         #e5e7eb;
  --clr-border-dark:    #d1d5db;
  --clr-text:           #222222;
  --clr-text-sub:       #6b7280;
  --clr-text-muted:     #94a3b8;
  --clr-success:        #655da7;
  --clr-warning:        #f59e0b;
  --clr-danger:         #ef4444;
  --clr-info:           #0ea5e9;
  --clr-header-bg:      #fafafa;
  --clr-header-text:    #919191;
  --basic-svg-color:    #111827;
  --clr-sidebar-active: #f0f5ff;
  --clr-sidebar-accent: #ff8647;

  /* ── Nav Active (sidebar / sub-sidebar / list-panel) ── */
  --nav-active-bg:     #ebebeb;
  --clr-primary-hover: #0042aa;
  --nav-hover-bg:      #cbcccb;

  /* ── Button ── */
  --btn-radius:          1px;
  --btn-font-size:       .875rem;
  --btn-pad-y:           .5rem;
  --btn-pad-x:           1rem;
  --btn-primary-bg:      #263e0f;
  --btn-primary-text:    #ffffff;
  --btn-primary-hover:   #669c35;
  --btn-secondary-bg:    #e5e7eb;
  --btn-secondary-text:  #374151;
  --btn-secondary-hover: #d1d5db;
  --btn-danger-bg:       #ef4444;
  --btn-danger-text:     #ffffff;
  --btn-danger-hover:    #dc2626;
  --btn-second-border:   #d1d5db;
  --btn-second-hover:    #d1d5db;
  --btn-cancel-bg:       #ffffff;
  --btn-cancel-text:     #555555;
  --btn-cancel-border:   #dddddd;
  --btn-cancel-hover:    #f5f5f5;
  /* sub-sidebar 폴더 제목 */
  --basic-folder-title-color: #374151;
  --basic-folder-font-size:   .875rem;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  font-size: 15px;
  color: #222;
  background: #f5f6f8;
}

/* =============================================
   #topbar
   ============================================= */
#topbar {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 52px;
  background: #1e293b;
  color: #f1f5f9;
  border-bottom: 1px solid #2d3f55;
  z-index: 200;
  gap: 0;
}

/* Brand */
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  flex-shrink: 0;
  height: 100%;
}
.topbar__menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  transition: background .15s;
}
.topbar__menu-btn:hover { background: rgba(255,255,255,.08); }
.topbar__menu-btn span {
  display: block;
  width: 16px;
  height: 2px;
  background: #94a3b8;
  border-radius: 1px;
  transition: background .15s;
}
.topbar__menu-btn:hover span { background: #f1f5f9; }
.topbar__logo-text {
  font-size: .95rem;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* Search */
.topbar__header {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-width: 0;
}
.tsearch-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 480px;
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 0 10px;
  transition: border-color .15s, background .15s;
}
.tsearch-wrap:focus-within {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.tsearch-icon { color: #64748b; flex-shrink: 0; }
.tsearch-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #f1f5f9;
  font-size: .82rem;
  padding: 7px 8px;
}
.tsearch-input::placeholder { color: #475569; }
.tsearch-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 300;
  display: none;
  max-height: 320px;
  overflow-y: auto;
}
.tsearch-dropdown.open { display: block; }

/* Actions */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
  flex-shrink: 0;
  height: 100%;
}
.tba-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px;
  border-radius: 6px;
  font-size: .78rem;
  color: #94a3b8;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
  height: 34px;
  width: 34px;
}
/* 상단 메뉴는 아이콘만 표시 - 텍스트 라벨(아바타 제외)은 숨김 */
.tba-item span:not(.tba-avatar) { display: none; }
.tba-user { width: auto; padding: 0 4px; }
.tba-item:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
.tba-item.tba-active { color: #f1f5f9; background: rgba(255,255,255,.1); }
.tba-item svg { flex-shrink: 0; }
.tba-sep {
  width: 1px;
  height: 20px;
  background: #334155;
  margin: 0 4px;
  flex-shrink: 0;
}
.tba-user { gap: 6px; cursor: default; }
.tba-user:hover { background: none; }
.tba-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #2563eb; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  flex-shrink: 0; line-height: 1;
}
.tba-username { font-size: .8rem; color: #cbd5e1; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tba-logout { color: #f87171; }
.tba-logout:hover { background: rgba(248,113,113,.12); color: #f87171; }

/* Sidebar toggle collapse */
.sidebar-collapsed #sidebar { width: 0; padding: 0; overflow: hidden; border: none; }
.sidebar-collapsed #sub-sidebar { border-left: 1px solid #e5e7eb; }

/* Keep #header alias for admin compatibility */
#header {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: 52px;
  background: #1e293b;
  color: #fff;
  border-bottom: 1px solid #334155;
  z-index: 100;
}
#header .logo { font-size: 1.05rem; font-weight: 700; color: #f1f5f9; text-decoration: none; letter-spacing: -.2px; }
#header nav { display: flex; align-items: center; gap: 1.25rem; }
#header nav a { color: #94a3b8; text-decoration: none; font-size: .875rem; transition: color .15s; }
#header nav a:hover { color: #f1f5f9; }
#header .user-info { font-size: .85rem; color: #cbd5e1; }
#header .btn-logout { padding: .3rem .75rem; background: rgba(255,255,255,.08); border-radius: 4px; color: #94a3b8; font-size: .8rem; text-decoration: none; transition: background .15s, color .15s; }
#header .btn-logout:hover { background: rgba(255,255,255,.15); color: #f1f5f9; }

/* =============================================
   body wrapper (class 유지 — 구조 컨테이너)
   ============================================= */
.layout-body { display: flex; flex: 1; overflow: hidden; }

/* =============================================
   #sidebar
   ============================================= */
#sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #ddd;
  padding: 16px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#sidebar .sidebar-title { padding: .4rem 1.1rem .7rem; font-size: 16px; font-weight: 600; letter-spacing: -0.05em; text-transform: uppercase; border-bottom: 1px solid #314a6d; color: #314a6d; }
#sidebar ul { list-style: none; }
#sidebar ul li a { display: flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; color: #374151; text-decoration: none; font-size: .875rem; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; }
#sidebar ul li a:hover  { background: var(--nav-hover-bg); }
#sidebar ul li a.active { background: var(--nav-active-bg); color: var(--clr-primary); border-left-color: var(--clr-primary-hover); }

/* =============================================
   #sub-sidebar
   ============================================= */
#sub-sidebar { width: 200px; flex-shrink: 0; background: #fff; border-right: 1px solid #e5e7eb; overflow-y: auto; display: flex; flex-direction: column; }
#sub-sidebar .sidebar-title { padding: .4rem 1.1rem .7rem; font-size: 16px; font-weight: 600; letter-spacing: -0.05em; text-transform: uppercase; border-bottom: 1px solid #314a6d; color: #314a6d; }
#sub-sidebar ul { list-style: none; }
#sub-sidebar ul li a { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; color: #374151; text-decoration: none; font-size: .875rem; border-left: 3px solid transparent; transition: background .15s, color .15s, border-color .15s; }
#sub-sidebar ul li a:hover  { background: var(--nav-hover-bg); }
#sub-sidebar ul li a.active { background: var(--nav-active-bg); color: var(--clr-primary); border-left-color: var(--clr-primary-hover); }


/* ─── sidebar icon opacity ─── */
#sidebar ul li a svg, #sub-sidebar ul li a svg { flex-shrink: 0; opacity: .55; transition: opacity .15s; }
#sidebar ul li a:hover svg, #sidebar ul li a.active svg,
#sub-sidebar ul li a:hover svg, #sub-sidebar ul li a.active svg { opacity: 1; }
/* =============================================
   #main  (basic 단독 레이아웃)
   ============================================= */
#main { flex: 1; min-width: 0; overflow-y: auto; padding: 2rem; background: #f5f6f8; }
.main-header,
#main .page-header,
#sub-main .page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.page-header h1 { margin-bottom: 0; }
#main .page-title,
#sub-main .page-title { font-size: 1.3rem; font-weight: 700; color: #1e293b; }
#main .page-body,
#sub-main .page-body { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.07); }

/* =============================================
   #sub-main  (basic-sub / basic-list 레이아웃)
   ============================================= */
#sub-main { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.layout-basic-sub #sub-main { flex-direction: column; overflow-y: auto; }

/* =============================================
   #list-panel  (basic-list 레이아웃 전용)
   ============================================= */
#list-panel { width: 280px; min-width: 200px; flex-shrink: 0; border-right: 1px solid #e5e7eb; display: flex; flex-direction: column; overflow: hidden; background: #fafafa; }
#list-panel .list-search-bar { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; flex-wrap: wrap; }
#list-panel .list-search-bar input[type="text"],
#list-panel .list-search-bar input[type="search"],
#list-panel .list-search-bar select { padding: .45rem .75rem; border: 1px solid #d1d5db; border-radius: 5px; font-size: .875rem; color: #374151; background: #fff; outline: none; transition: border-color .15s; }
#list-panel .list-search-bar input:focus,
#list-panel .list-search-bar select:focus { border-color: #2563eb; }
#list-panel .list-search-bar select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px;
  padding-right: 26px; cursor: pointer;
}
#list-panel .list-search-bar .search-input { flex: 1; min-width: 180px; }
#list-panel .total-count { font-size: .85rem; color: #6b7280; }
#list-panel .total-count strong { color: #111827; font-weight: 600; }
#list-panel .toolbar-actions { display: flex; gap: .5rem; }
#list-panel .list-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 6px; }
#list-panel .list-table { width: 100%; border-collapse: collapse; font-size: .875rem; white-space: nowrap; }
#list-panel .list-table thead tr { background: #f1f5f9; }
#list-panel .list-table th { padding: .65rem 1rem; text-align: left; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; user-select: none; }
#list-panel .list-table th.sortable { cursor: pointer; }
#list-panel .list-table th.sortable:hover { color: #2563eb; }
#list-panel .list-table td { padding: .65rem 1rem; color: #4b5563; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
#list-panel .list-table tbody tr:last-child td { border-bottom: none; }
#list-panel .list-table tbody tr:hover td { background: #f8fafc; }
#list-panel .list-table .col-check { width: 2.5rem; text-align: center; }
#list-panel .list-table .col-num   { width: 3.5rem; text-align: center; color: #9ca3af; }
#list-panel .list-table .col-action { width: 7rem; text-align: center; }
#list-panel .list-table .no-data td { text-align: center; color: #9ca3af; padding: 3rem; }
#list-panel .list-pagination { display: flex; align-items: center; justify-content: center; gap: .25rem; flex-wrap: wrap; }
#list-panel .list-pagination a,
#list-panel .list-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 5px; font-size: .875rem; text-decoration: none; color: #374151; border: 1px solid #e5e7eb; background: #fff; transition: background .15s, color .15s, border-color .15s; }
#list-panel .list-pagination a:hover { background: #f0f5ff; color: #2563eb; border-color: #bfdbfe; }
#list-panel .list-pagination .active { background: #2563eb; color: #fff; border-color: #2563eb; }
#list-panel .list-pagination .disabled { color: #d1d5db; pointer-events: none; background: #f9fafb; }

/* =============================================
   #list-editor  (basic-list 우측 에디터 패널)
   ============================================= */
#list-editor { flex: 1; min-width: 0; min-height: 0; background: #fff; overflow-y: auto; display: flex; flex-direction: column; }
#list-editor .editor-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; background: #f8fafc; }
#list-editor .editor-title { font-size: .925rem; font-weight: 600; color: #1e293b; }
#list-editor .editor-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
#list-editor .editor-footer { padding: .875rem 1.25rem; border-top: 1px solid #e5e7eb; display: flex; gap: .5rem; justify-content: flex-end; flex-shrink: 0; }
#list-editor .editor-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; color: #94a3b8; text-align: center; gap: .75rem; padding: 2rem; }
#list-editor .editor-empty .icon { font-size: 2rem; }
#list-editor .editor-empty p { font-size: .85rem; line-height: 1.65; }

/* =============================================
   #editor-panel  (에디터 페이지 전용)
   ============================================= */
#editor-panel { display: flex; flex-direction: column; gap: 1rem; }
#editor-panel .editor-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
#editor-panel .editor-body { background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; min-height: 400px; }
#editor-panel .editor-footer { display: flex; justify-content: flex-end; gap: .5rem; padding-top: .75rem; }

/* =============================================
   #preview-panel  (슬라이드 패널, 공통)
   ============================================= */
.has-preview-panel { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.has-preview-panel > .panel-content-area { flex: 1; min-width: 0; overflow-y: auto; padding: 2rem; }

#preview-panel {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  transition: width .28s cubic-bezier(.4,0,.2,1);
}
#preview-panel.is-open { width: 360px; }
#preview-panel .panel-header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.1rem; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; background: #f8fafc; min-width: 360px; }
#preview-panel .panel-title { font-size: .925rem; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#preview-panel .panel-close { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1rem; width: 1.75rem; height: 1.75rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, color .15s; }
#preview-panel .panel-close:hover { background: #e2e8f0; color: #475569; }
#preview-panel .panel-body { flex: 1; overflow-y: auto; padding: 1.1rem; min-width: 360px; }
#preview-panel .panel-footer { padding: .75rem 1.1rem; border-top: 1px solid #f1f5f9; display: flex; gap: .5rem; justify-content: flex-end; flex-shrink: 0; min-width: 360px; }
#preview-panel .preview-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; height: 100%; color: #94a3b8; text-align: center; gap: .75rem; padding: 2rem; }
#preview-panel .preview-empty .icon { font-size: 2.25rem; }
#preview-panel .preview-empty p { font-size: .85rem; line-height: 1.65; }
#preview-panel .preview-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; color: #94a3b8; font-size: .875rem; }
#preview-panel .preview-field { margin-bottom: .875rem; }
#preview-panel .preview-field .field-label { font-size: .7rem; font-weight: 700; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
#preview-panel .preview-field .field-value { font-size: .875rem; color: #1e293b; line-height: 1.55; word-break: break-word; }
#preview-panel .preview-divider { border: none; border-top: 1px solid #f1f5f9; margin: .875rem 0; }
.list-table tbody tr[data-preview-url],
.list-table tbody tr[data-preview-id] { cursor: pointer; }
.list-table tbody tr.preview-selected td { background: #eff6ff; }

/* =============================================
   #footer
   ============================================= */
#footer { width: 100%; flex-shrink: 0; text-align: center; padding: .75rem 2rem; background: #fff; border-top: 1px solid #e5e7eb; font-size: .78rem; color: #9ca3af; }

/* =============================================
   배지
   ============================================= */
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; line-height: 1; }
.badge-blue   { background: #dbeafe; color: #1d4ed8; }
.badge-green  { background: #dcfce7; color: #15803d; }
.badge-red    { background: #fee2e2; color: #b91c1c; }
.badge-gray   { background: #f3f4f6; color: #6b7280; }
.badge-yellow { background: #fef9c3; color: #92400e; }

/* =============================================
   공통 유틸리티
   ============================================= */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1rem; border-radius: 5px; font-size: .875rem; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: background .15s; }
.btn-primary   { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }
.btn-danger    { background: #ef4444; color: #fff; }
.btn-danger:hover { background: #dc2626; }

/* =============================================
   basic-btn  (통합 버튼 시스템)
   primary · second · cancel · danger
   ============================================= */
.basic-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem 1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-decoration: none; white-space: nowrap;
  outline: none; box-sizing: border-box;
  font-family: inherit;
}
.basic-btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.basic-btn.primary:hover { background: var(--btn-primary-hover); border-color: var(--btn-primary-hover); }
.basic-btn.second  { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-second-border); }
.basic-btn.second:hover  { background: var(--btn-second-hover); border-color: var(--btn-second-hover); }
.basic-btn.cancel  { background: var(--btn-cancel-bg); color: var(--btn-cancel-text); border-color: var(--btn-cancel-border); }
.basic-btn.cancel:hover  { background: var(--btn-cancel-hover); }
.basic-btn.danger  { background: var(--btn-danger-bg); color: var(--btn-danger-text); border-color: var(--btn-danger-bg); }
.basic-btn.danger:hover  { background: var(--btn-danger-hover); border-color: var(--btn-danger-hover); }
.basic-btn:disabled,
.basic-btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* list-header page-actions + button — 표준 추가(+) 버튼 */
.basic-btn.icon-plus {
  width: 24px; height: 24px; padding: 0; font-size: 24px; font-weight: 300;
  line-height: 1; background: none; margin: 0 5px;
  color: var(--basic-svg-color, #111827);
  justify-content: center;
}
.basic-btn.icon-plus:hover { background: none; opacity: .7; }
.page-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* =============================================
   btn-row  (버튼 행 wrapper)
   ============================================= */
.btn-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.btn-row.end     { justify-content: flex-end; }
.btn-row.center  { justify-content: center; }
.btn-row.between { justify-content: space-between; }

.error   { color: #dc2626; font-size: .875rem; background: #fef2f2; padding: .5rem .75rem; border-radius: 4px; }
.success { color: #16a34a; font-size: .875rem; background: #f0fdf4; padding: .5rem .75rem; border-radius: 4px; }





/* =============================================
   .list-editor-resizer  (basic-list 리사이저)
   ============================================= */
.list-editor-resizer { flex-shrink: 0; cursor: col-resize; background: transparent; transition: background .12s; z-index: 10; position: relative; }
.list-editor-resizer::after { content: ''; position: absolute; inset: 0 -4px; cursor: col-resize; }
.list-editor-resizer:hover,
.list-editor-resizer.dragging { background: rgba(37,99,235,.2); }

.basic-tab {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 20px;
}.basic-tab .tab-item { padding: .5rem 1.1rem; font-size: .8125rem; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; white-space: nowrap; user-select: none; }
.basic-tab .tab-item:hover { color: #374151; }
.basic-tab .tab-item.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.basic-tab-content { display: none; padding: 1rem 0 0; }
.basic-tab-content.active { display: block; }

/* =============================================
   .layout-preview  (레이아웃 구조 다이어그램)
   ============================================= */
.layout-preview { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; font-size: .62rem; color: #94a3b8; text-align: center; }
.lp-header { background: #1e293b; color: #94a3b8; padding: .3rem .5rem; letter-spacing: .04em; }
.lp-body { display: flex; height: 110px; }
.lp-sidebar { width: 38px; flex-shrink: 0; background: #f8fafc; border-right: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: .58rem; color: #94a3b8; }
.lp-sub-sidebar { width: 30px; flex-shrink: 0; background: #f1f5f9; border-right: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; font-size: .58rem; color: #94a3b8; }
.lp-main { flex: 1; background: #f5f6f8; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.lp-sub-main { flex: 1; display: flex; overflow: hidden; }
.lp-list-panel { flex: 1; background: #f5f6f8; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.lp-list-editor { width: 38%; flex-shrink: 0; background: #fff; border-left: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; color: #cbd5e1; }
.lp-login { flex: 1; background: #f1f5f9; display: flex; align-items: center; justify-content: center; }
.lp-login-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; width: 60%; height: 70%; display: flex; align-items: center; justify-content: center; font-size: .58rem; color: #94a3b8; }
.lp-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: .28rem .5rem; color: #d1d5db; }

/* =============================================
   .code-block  (코드 표시)
   ============================================= */
.code-block { background: #0f172a; color: #94a3b8; border-radius: 6px; padding: .875rem 1rem; font-size: .775rem; font-family: 'Cascadia Code','Fira Code',Consolas,monospace; white-space: pre; overflow-x: auto; line-height: 1.65; tab-size: 2; }
.code-block .ck-tag { color: #7dd3fc; }
.code-block .ck-attr { color: #86efac; }
.code-block .ck-val { color: #fca5a5; }
.code-block .ck-prop { color: #c4b5fd; }
.code-block .ck-num { color: #fdba74; }
/* =============================================
   #list-editor 탭 구조 보완
   ============================================= */
#list-editor .editor-panel-toolbar { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
#list-editor .basic-tab { flex-shrink: 0; padding: 0 1.25rem; background: #fff; }
/* =============================================
   .list-search  (list-panel 검색)
   ============================================= */
.list-search { padding: 10px 12px; flex-shrink: 0; }
.list-search-input { width: 100%; box-sizing: border-box; padding: 7px 10px; border: 1px solid #e0e0e0; border-radius: 7px; font-size: 12px; outline: none; background: #f8f9fa; }
.list-search-input:focus { border-color: #2563eb; background: #fff; }

/* =============================================
   .basic-table--check  (체크박스 테이블)
   ============================================= */
.basic-table--check .check-col {
  width: 36px;
  text-align: center;
  padding: 0 8px;
}
.basic-table--check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #1a73e8;
  vertical-align: middle;
}
.basic-table--check tbody tr.row-selected td {
  background: #eff6ff;
}
.basic-table--check tbody tr.row-selected:hover td {
  background: #dbeafe;
}

/* =============================================
   Div / Layout Components (cloud.freeitm.com 동기화)
   .basic-section · .basic-rows · .page-tab-bar
   .stat-grid     · .panel
   ============================================= */

/* Section container */
.basic-section { margin-bottom: 22px; }
.basic-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}

/* Settings-style card rows */
.basic-rows {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
}
.basic-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid #f5f5f5;
  gap: 20px;
  min-height: 52px;
}
.basic-row:last-child { border-bottom: none; }
.basic-row-label { flex: 1; }
.basic-row-title { font-size: 13px; font-weight: 500; color: #111; }
.basic-row-desc { font-size: 11px; color: #bbb; margin-top: 2px; }
.basic-row-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Danger zone variant */
.basic-rows.danger-zone { border-color: #fca5a5; }
.basic-rows.danger-zone .basic-row { border-bottom-color: #fef2f2; }

/* Page Tab Bar */
.page-tab-bar {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}
.page-tab {
  padding: 9px 20px;
  border-bottom: 2px solid transparent;
  font-size: var(--fs-ui);
  color: #888;
  cursor: pointer;
}
.page-tab.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
  font-weight: 600;
}
.page-tab-panel { display: none; }
.page-tab-panel.active { display: block; }

/* Stat grid / cards */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.stat-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-label { font-size: 11px; color: #6b7280; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 700; color: #111; }

/* Panel */
.panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
}
.panel-title { font-size: 13px; font-weight: 600; color: #111; }
.panel-link  { font-size: 12px; color: #667eea; }
.panel-empty { padding: 32px; text-align: center; color: #9ca3af; font-size: 13px; }

/* =============================================
   Context Menu (.ctx-menu)
   ============================================= */
.ctx-menu {
  position: fixed;
  display: none;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding: 4px 0;
  min-width: 172px;
  z-index: 9000;
  transform-origin: top left;
  animation: ctxIn .1s ease;
}
.ctx-menu.visible { display: block; }
.ctx-menu ul { list-style: none; margin: 0; padding: 0; }
.ctx-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}
.ctx-menu li:hover { background: #f4f6f8; }
.ctx-menu li.divider { border-top: 1px solid #eee; margin: 4px 0; padding: 0; }
.ctx-menu li.danger { color: #dc2626; }
.ctx-menu li.ctx-header { font-size: 12px; font-weight: 600; color: #9ca3af; cursor: default; padding: 8px 14px 6px; }
.ctx-menu li.ctx-header:hover { background: none; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* =============================================
   Toast (.basic-toast)
   ============================================= */
.basic-toast {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  font-size: 13px;
  color: #166534;
}
.basic-toast.show  { display: flex; }
.basic-toast.error { background: #fff1f2; border-color: #fca5a5; color: #b91c1c; }
.basic-toast.warn  { background: #fffbeb; border-color: #fcd34d; color: #92400e; }

/* =============================================
   Modal / Popup (webmail.smartertools.co.kr 동기화)
   .modal-overlay · .modal-box · .modal-panel · .modal-color-picker
   ============================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, visibility .18s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-overlay.open .modal-box { transform: translateY(0); }

.modal-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 24px 24px 20px;
  width: 340px;
  max-width: 95vw;
  transform: translateY(8px);
  transition: transform .18s;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  margin-bottom: 18px;
  padding-right: 32px;
}

.modal-field  { margin-bottom: 14px; }

.modal-label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 6px;
  display: block;
}

.modal-select {
  width: 100%;
  padding: 8px 32px 8px 11px;
  border: 1px solid #ddd;
  border-radius: 7px;
  font-size: 13px;
  color: #333;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px 14px;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.5;
  transition: border-color .15s;
}
.modal-select:focus { border-color: #1a73e8; outline: none; }

.modal-input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid #ddd;
  border-radius: 7px;
  font-size: 13px;
  color: #333;
  outline: none;
  box-sizing: border-box;
}
.modal-input:focus { border-color: #1a73e8; }

.modal-footer { display: flex; align-items: center; gap: 8px; }
.modal-box .modal-footer { justify-content: flex-end; margin-top: 20px; }

.modal-btn-cancel {
  padding: 7px 16px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  color: #555;
  cursor: pointer;
}
.modal-btn-cancel:hover { background: #f5f5f5; }

.modal-btn-confirm {
  padding: 7px 18px;
  border: none;
  border-radius: 7px;
  background: #1a73e8;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.modal-btn-confirm:hover    { background: #1557b0; }
.modal-btn-confirm:disabled { background: #b0c8f5; cursor: not-allowed; }
/* ── 모달 닫기 버튼 ── */
.modal-close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  padding: 0;
  line-height: 1;
  transition: background .1s;
  flex-shrink: 0;
}
.modal-close-btn:hover { background: #f1f5f9; color: #1e293b; }
.modal-close-btn svg   { display: block; pointer-events: none; }


/* Color Picker */
.modal-color-picker {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 2px 0;
}
.modal-color-opt {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.modal-color-label {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  flex-shrink: 0;
}
.modal-color-label:hover { transform: scale(1.18); }
.modal-color-opt:checked + .modal-color-label {
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--swatch);
  transform: scale(1.08);
}
.modal-color-opt:checked + .modal-color-label::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  position: absolute;
}

/* Modal Panel (large) */
.modal-panel {
  width: 800px;
  max-width: 95vw;
  max-height: 85vh;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPanelIn .2s ease;
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  padding: 15px 20px 13px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
  gap: 4px;
}
.modal-header .modal-title { flex: 1; margin-bottom: 0; }
.modal-header-actions { display: flex; gap: 2px; }
.modal-header-btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background .12s;
}
.modal-header-btn:hover { background: #f5f5f5; }
.modal-close {
  width: 28px; height: 28px;
  border: none; background: none; cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #999;
  transition: background .1s;
}
.modal-close:hover { background: #fee2e2; color: #dc2626; }
.modal-panel .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #eee;
  background: #fafafa;
  flex-shrink: 0;
}

/* Icon Buttons (modal header) */
.modal-icon-btn {
  width: 28px; height: 28px;
  border: none; background: none; cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #666;
  transition: background .1s;
}
.modal-icon-btn:hover { background: #f0f2f7; color: #333; }
.modal-icon-btn--danger:hover { background: #fee2e2; color: #dc2626; }

/* =============================================
   Icon Buttons (webmail.smartertools.co.kr 동기화)
   .basic-view-btn · .header-icon-btn · .storage-upload-btn
   ============================================= */

.basic-view-btn,
.header-icon-btn,
.basic-svg-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--clr-border, #e2e5ea);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-sub, #64748b);
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.basic-view-btn:hover:not(:disabled),
.header-icon-btn:hover:not(:disabled),
.basic-svg-btn:hover {
  background: #f0f0f0;
  color: #333;
  border-color: #d0d3d8;
}
.basic-view-btn.active,
.header-icon-btn.active,
.basic-svg-btn.active {
  background: #e8f0fe;
  color: #1a73e8;
  border-color: #1a73e8;
}
.basic-view-btn:disabled,
.header-icon-btn:disabled { opacity: 0.45; cursor: default; }

/* mail-compose.ejs와 동일한 정의 (다른 페이지에서 재사용 시에도 스타일이 적용되도록 공용 시트에도 둠) */
.cmp-toolbar { display: flex; align-items: center; gap: 4px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--clr-border, #e5e7eb); flex-shrink: 0; flex-wrap: wrap; }
.cmp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; }
.cmp-btn-primary { background: var(--clr-primary, #1a73e8); color: #fff; border-color: var(--clr-primary, #1a73e8); }
.cmp-btn-primary:hover:not(:disabled) { background: #036b3a; }
.cmp-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.cmp-btn-tool { background: #fff; color: var(--clr-text, #1e293b); border-color: var(--clr-border, #e5e7eb); }
.cmp-btn-tool:hover { background: var(--clr-bg-hover, #f8fafc); border-color: #cbd5e1; }
.cmp-btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.cmp-btn-danger:hover:not(:disabled) { background: #b91c1c; }
.cmp-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.cmp-sep { width: 1px; height: 24px; background: var(--clr-border, #e5e7eb); margin: 0 4px; flex-shrink: 0; }
.cmp-ml-auto { margin-left: auto; }
.cmp-btn-icon { padding: 6px 8px; }
.cmp-attach-item { display: inline-flex; align-items: center; gap: 6px; background: var(--clr-bg-alt,#f8fafc); border: 1px solid var(--clr-border,#e5e7eb); border-radius: 6px; padding: 4px 10px; font-size: 11px; color: var(--clr-text,#1e293b); }
.cmp-attach-del { background: none; border: none; cursor: pointer; font-size: 14px; color: #9ca3af; line-height: 1; padding: 0; }
.cmp-attach-del:hover { color: #dc2626; }

/* Upload Button */
.storage-upload-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #1e3a5f;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.storage-upload-btn:hover { background: #16304f; }

/* =============================================
   File Upload (smplus-dev 동기화)
   .upload-zone · .upload-file-row · .file-chip · .upload-progress-bar
   ============================================= */

/* 드롭존 */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed #d0d7e3;
  border-radius: 12px;
  padding: 40px 20px;
  background: #fafbfd;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
.upload-zone:hover,
.upload-zone.dragover { border-color: #1a73e8; background: #f0f5ff; }
.upload-zone-icon  { color: #b0bec5; }
.upload-zone-title { font-size: 13px; font-weight: 500; color: #444; }
.upload-zone-desc  { font-size: 11px; color: #aaa; }
.upload-zone input[type="file"] { display: none; }

/* 파일 칩 (인라인 첨부 뱃지) */
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0f4ff;
  border: 1px solid #c5d3f0;
  border-radius: 4px;
  padding: 2px 7px 2px 6px;
  font-size: 11px;
  color: #3c5a9a;
  max-width: 240px;
}
.file-chip-name   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip-remove { background: none; border: none; color: #7a8ab5; cursor: pointer; padding: 0 1px; line-height: 1; font-size: 13px; flex-shrink: 0; }
.file-chip-remove:hover { color: #dc2626; }
.file-chip-list   { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 파일 카드 (큰 목록형) */
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 9px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.file-item:hover        { border-color: #bcd0f7; box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.file-item-name         { flex: 1; font-size: 12px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-size         { font-size: 11px; color: #aaa; flex-shrink: 0; }
.file-item-remove       { background: none; border: none; color: #ccc; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.file-item-remove:hover { color: #dc2626; }

/* 파일 행 (업로드 목록) */
.upload-file-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  max-height: 160px;
  overflow-y: auto;
}
.upload-file-row    { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid #eee; border-radius: 8px; padding: 8px 12px; font-size: 12px; }
.upload-file-icon   { flex-shrink: 0; color: #94a3b8; }
.upload-file-name   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.upload-file-size   { font-size: 11px; color: #94a3b8; flex-shrink: 0; }
.upload-file-del    { background: none; border: none; color: #ccc; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.upload-file-del:hover { color: #dc2626; }

/* 업로드 진행바 */
.upload-progress-bar  { height: 3px; background: #e2e8f0; border-radius: 2px; margin-top: 14px; overflow: hidden; display: none; }
.upload-progress-fill { height: 100%; background: #1a73e8; border-radius: 2px; width: 0; transition: width 0.3s; }

/* 결과 메시지 */
.upload-result      { font-size: 12px; margin-top: 10px; display: none; }
.upload-result.ok   { color: #16a34a; }
.upload-result.err  { color: #dc2626; }

/* 업로드 위치 선택 */
.upload-location-label {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.upload-location-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e2e5ea;
  border-radius: 7px;
  font-size: 13px;
  color: #555;
  background: #f8f9fb;
  margin-bottom: 14px;
  outline: none;
  box-sizing: border-box;
}

/* =============================================
   List Header (smplus-dev notes-list-header 기반)
   .list-header · .list-header-title · .new-btn
   ============================================= */

.list-header {
  min-height: 52px;
  box-sizing: border-box;
  padding: 14px 14px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.list-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
}

.new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter .12s;
  padding: 0;
}
.new-btn:hover { filter: brightness(0.88); }

/* =============================================
   basic-list-item  (list-panel 목록 아이템)
   ============================================= */
.basic-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 11px;   /* left 11 = 14 - 3px border 공간 */
  border-left: 3px solid transparent;
  border-bottom: 1px solid #f0f2f5;
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}
.basic-list-item:hover  { background: #f8faff; }
.basic-list-item.active {
  background: #eff6ff;
  border-left-color: #2563eb;
}
.basic-list-item .item-main { flex: 1; min-width: 0; }
.basic-list-item .item-title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.basic-list-item.active .item-title { color: #1d4ed8; }
.basic-list-item .item-desc {
  display: block;
  font-size: .75rem;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================
   .list-search-input  (list-panel 상단 검색)
   ============================================= */
.list-search { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0; }
.list-search-input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 6px 10px 6px 30px;
  border: 1px solid #e5e7eb; border-radius: 6px; outline: none;
  font-size: 12px; color: #374151;
  background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat;
  transition: border-color .15s, background .15s;
}
.list-search-input:focus { border-color: #2563eb; background-color: #fff; }
.list-search-input::placeholder { color: #b0b8c8; }

/* =============================================
   .list-toolbar
   ============================================= */.total-count        { font-size: .78rem; color: #94a3b8; }
.total-count strong { color: #374151; font-weight: 600; }
.toolbar-actions    { display: flex; gap: .4rem; }

/* =============================================
   .basic-tab  (에디터 탭 바)
   ============================================= */
.basic-tab {
  display: flex; gap: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  flex-shrink: 0;
  padding: 0 1rem;
}
.tab-item {
  padding: .55rem .9rem;
  font-size: .8rem; color: #6b7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s, border-color .12s;
  user-select: none;
}
.tab-item:hover  { color: #2563eb; }
.tab-item.active { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }

/* =============================================
   .basic-tab-content
   ============================================= */
.basic-tab-content        { display: none; }
.basic-tab-content.active { display: block; }

/* =============================================
   .code-block  (HTML/CSS/JS 코드 표시)
   ============================================= */
.code-block {
  font-family: 'Fira Mono', 'Consolas', 'D2Coding', 'Monaco', monospace;
  font-size: .78rem; line-height: 1.7;
  background: #f8fafc;
  padding: 1rem 1.1rem;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
  color: #334155;
  border: 1px solid #e5e7eb;
}
/* code highlight spans */
.ck-tag  { color: #1d7fcf; }
.ck-attr { color: #e25a1c; }
.ck-val  { color: #2aaa2a; }
.ck-prop { color: #1d7fcf; }
.ck-num  { color: #c65911; }

/* =============================================
   .rp-days / .rp-day  (요일 선택 버튼)
   ============================================= */
.rp-days { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-day {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #dde2ec; background: #fff;
  font-size: 12px; font-weight: 600; color: #777;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
  padding: 0;
}
.rp-day:hover  { border-color: #1a73e8; color: #1a73e8; background: #eef3ff; }
.rp-day.on     { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.rp-day.sun    { color: #e84040; }
.rp-day.sun.on { background: #e84040; border-color: #e84040; color: #fff; }
.rp-day.sat    { color: #2563eb; }
.rp-day.sat.on { background: #2563eb; border-color: #2563eb; color: #fff; }

/* =============================================
   .rp-panel / .rp-block / .rp-row  (반복 설정 패널)
   ============================================= */
.rp-panel    { background: #f8f9fc; border: 1px solid #e4e8f0; border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.rp-sublabel { font-size: 11px; font-weight: 700; color: #999; letter-spacing: .04em; text-transform: uppercase; }
.rp-block    { display: flex; flex-direction: column; gap: 10px; }
.rp-row      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-text     { font-size: 13px; color: #555; white-space: nowrap; }
/* 다른 입력 칸(.cn-input/.cn-time)과 높이가 같도록 동일한 padding/font-size/border 적용 */
.rp-num, .rp-sel {
  border: 1px solid var(--clr-border, #e2e8f0);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--clr-text, #1a202c);
  outline: none;
  background: #fff;
}
.rp-num:focus, .rp-sel:focus { border-color: var(--clr-primary, #1a73e8); }
.rp-num      { width: 64px; text-align: center; }
.rp-sel      { flex: 1; min-width: 90px; }
/* number input 스피너 크롬/사파리 동일하게(제거) — .form-control과 동일한 정규화 */
.rp-num::-webkit-inner-spin-button,
.rp-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.rp-num { -moz-appearance: textfield; }

/* =============================================
   .rp-end*  (반복 종료 조건)
   ============================================= */
.rp-end         { border-top: 1px solid #e4e8f0; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rp-end-opts    { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 24px; }
.rp-end-opt     { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; flex-shrink: 0; }
.rp-end-name    { font-size: 13px; color: #444; min-width: 42px; flex-shrink: 0; }
.rp-end-ctrl    { display: flex; align-items: center; gap: 8px; transition: opacity .15s; }
.rp-end-ctrl.off { opacity: 0.3; pointer-events: none; }

/* =============================================
   form-control  (input / select 크로스브라우저 정규화)
   ============================================= */
.form-control {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* select 전용 — 네이티브 화살표 제거 후 커스텀 chevron */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 28px;
  cursor: pointer;
}
select.form-control:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* number input — 스피너 제거 */
input[type="number"].form-control::-webkit-inner-spin-button,
input[type="number"].form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"].form-control { -moz-appearance: textfield; }

/* =============================================
   custom-select  (크로스브라우저 커스텀 드롭다운)
   ============================================= */
.custom-select {
  position: relative;
  display: inline-block;
}
.custom-select-trigger {
  padding: 6px 28px 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  user-select: none;
  white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}
.custom-select.open .custom-select-trigger {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.custom-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 1000;
  overflow: hidden;
}
.custom-select.open .custom-select-options { display: block; }
.custom-select-option {
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
  transition: background .1s, color .1s;
}
.custom-select-option:hover    { background: #f0f5ff; color: #2563eb; }
.custom-select-option.selected { color: #2563eb; font-weight: 600; background: #f8faff; }

/* =============================================
   File Icon 관리 페이지
   ============================================= */
.fi-panel          { }
.fi-panel-hdr      { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #e5e7eb; background:#f8fafc; flex-shrink:0; }
.fi-panel-hdr > span { font-size:14px; font-weight:600; color:#1e293b; }
.fi-panel-hint     { font-size:12px; color:#94a3b8; }

/* icon grid */
.fi-icon-grid      { display:flex; flex-wrap:wrap; gap:8px; padding:16px; }
.fi-icon-item      { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 8px; border:1px solid #e5e7eb; border-radius:8px; cursor:pointer; min-width:68px; max-width:84px; transition:background .12s, border-color .12s; background:#fff; }
.fi-icon-item:hover { background:#f0f5ff; border-color:#2563eb; }
.fi-icon-item span { font-size:11px; color:#64748b; text-align:center; word-break:break-all; line-height:1.3; }
.fi-icon-item-sm   { min-width:52px; max-width:66px; padding:7px 6px; }

/* drop zone */
.fi-drop-zone      { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:40px 24px; border:2px dashed #d1d5db; border-radius:12px; margin:16px; cursor:pointer; transition:border-color .15s, background .15s; }
.fi-drop-zone:hover, .fi-drop-zone.fi-drop-hover { border-color:#2563eb; background:#f0f5ff; }
.fi-drop-title     { font-size:14px; color:#374151; font-weight:500; }
.fi-drop-hint      { font-size:12px; color:#94a3b8; }
.fi-drop-hint code { background:#f1f5f9; padding:2px 6px; border-radius:4px; font-size:11px; color:#1e293b; }

/* import result */
.fi-imported-hdr   { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 16px; border-top:1px solid #e5e7eb; background:#f8fafc; }
.fi-imported-hdr > span { font-size:13px; color:#374151; }
.fi-imported-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* saved iconsets */
.fi-saved-list     { padding:16px; display:flex; flex-direction:column; gap:10px; }
.fi-saved-card     { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.fi-saved-info     { display:flex; flex-direction:column; gap:3px; }
.fi-saved-name     { font-size:14px; font-weight:500; color:#1e293b; }
.fi-saved-meta     { font-size:12px; color:#94a3b8; }
.fi-saved-btns     { display:flex; gap:8px; flex-shrink:0; }

/* modal overlay */
.fi-modal-overlay  { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:2000; }
.fi-modal-box      { background:#fff; border-radius:12px; width:460px; max-width:90vw; box-shadow:0 8px 32px rgba(0,0,0,.18); overflow:hidden; }
.fi-modal-hdr      { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e5e7eb; }
.fi-modal-hdr span { font-size:15px; font-weight:600; color:#1e293b; }
.fi-modal-close    { background:none; border:none; font-size:22px; line-height:1; color:#94a3b8; cursor:pointer; padding:0 4px; }
.fi-modal-close:hover { color:#374151; }
.fi-modal-body     { padding:22px 20px; }

/* single icon modal */
.fi-single-row     { display:flex; align-items:center; gap:24px; justify-content:center; }
.fi-single-col     { display:flex; flex-direction:column; align-items:center; gap:8px; }
.fi-single-label   { font-size:12px; color:#6b7280; font-weight:600; }
.fi-single-icon-wrap { width:80px; height:80px; border:1.5px solid #e5e7eb; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#f8fafc; }
.fi-single-drop    { width:80px; height:80px; border:1.5px dashed #d1d5db; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; transition:border-color .15s, background .15s; }
.fi-single-drop:hover, .fi-single-drop.fi-drop-hover { border-color:#2563eb; background:#f0f5ff; }
.fi-single-arrow   { font-size:22px; color:#94a3b8; line-height:1; }

/* fi-btn */
.fi-btn            { display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:6px 14px; border-radius:6px; font-size:13px; font-weight:500; cursor:pointer; border:1px solid transparent; transition:background .12s, border-color .12s, color .12s; white-space:nowrap; line-height:1.4; }
.fi-btn-primary    { background:#2563eb; color:#fff; border-color:#2563eb; }
.fi-btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; }
.fi-btn-outline    { background:#fff; color:#374151; border-color:#d1d5db; }
.fi-btn-outline:hover { background:#f5f7fa; border-color:#9ca3af; }
.fi-btn-ghost      { background:transparent; color:#6b7280; border-color:transparent; }
.fi-btn-ghost:hover { background:#f5f7fa; }
.fi-btn-danger     { background:#fff; color:#dc2626; border-color:#fca5a5; }
.fi-btn-danger:hover { background:#fff1f1; border-color:#f87171; }
.fi-btn-sm         { padding:4px 10px; font-size:12px; }

/* empty state */
.fi-empty          { padding:40px 0; text-align:center; color:#94a3b8; font-size:13px; width:100%; }

/* fi-editor-hdr / fi-list-item / fi-preview */
.fi-editor-hdr    { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #e5e7eb; background:#f8fafc; flex-shrink:0; }
.fi-list-item     { display:flex; align-items:center; gap:10px; padding:.5rem .9rem; }
.fi-list-thumb    { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.fi-list-ext      { font-size:.82rem; color:#374151; }
.fi-preview-wrap  { display:flex; justify-content:center; padding:8px 0; }
.fi-preview-sizes { display:flex; align-items:flex-end; gap:28px; }
.fi-preview-size  { display:flex; flex-direction:column; align-items:center; gap:8px; }
.fi-preview-size span { font-size:11px; color:#94a3b8; }


.flatpickr-calendar { font-size: 12px; }
.flatpickr-day, .flatpickr-weekday, .flatpickr-months .flatpickr-month { font-size: 12px; }

/* [tree-basic] */
/* ─── tree-basic ─── */
.tree-basic { padding: 0 10px 4px; display: flex; flex-direction: column; gap: 2px; }
.tree-basic-item {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px; border-radius: 6px; text-decoration: none;
    color: #4b5563; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background .1s;
}
.tree-basic-item:hover  { background: var(--nav-hover-bg); color: #111; }
.tree-basic-item.active { background: var(--nav-active-bg); color: var(--clr-primary); font-weight: 600; }
.tree-basic-item svg    { flex-shrink: 0; }
.tree-basic-caret       { transition: transform .2s; flex-shrink: 0; }
.tree-basic-caret.open  { transform: rotate(90deg); }
.tree-basic-divider     { height: 1px; background: #e5e7eb; margin: 6px 12px; }
.tree-basic-sub         { display: none; padding-left: 20px; }
.tree-basic-sub.open    { display: block; }
.tree-basic-sub-item {
    padding: 5px 10px 5px 12px; font-size: 13px; color: #374151;
    cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 6px;
}
.tree-basic-sub-item:hover  { background: var(--nav-hover-bg); }
.tree-basic-sub-item.active { background: var(--nav-active-bg); color: var(--clr-primary); }
.tree-basic-sub-empty { padding: 4px 10px 2px 12px; font-size: 11px; color: #9ca3af; }
.tree-basic-deep    { padding: 0 0 4px 8px; }
.tree-basic-hidden  { display: none !important; }
.tree-basic-row {
    display: flex; align-items: center; height: 28px; cursor: pointer;
    border-radius: 4px; padding-right: 8px;
    white-space: nowrap; position: relative; font-size: 13px;
}
.tree-basic-row:hover  { background: #f9fafb; }
.tree-basic-row.active { background: #eff6ff; }
.tree-basic-row.active .tree-basic-label { color: #1d4ed8; font-weight: 600; }
.tree-basic-row.active .tree-basic-btn   { border-color: #93c5fd; color: #2563eb; }
.tree-basic-row.active .tree-basic-count { color: #2563eb; background: #dbeafe; }
.tree-basic-cell { width: 20px; height: 28px; flex-shrink: 0; position: relative; }
.tree-basic-cell.vl::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:1px; background:#d1d5db; }
.tree-basic-cell.ct::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:1px; background:#d1d5db; }
.tree-basic-cell.ct::after  { content:''; position:absolute; left:9px; top:50%; width:11px; height:1px; background:#d1d5db; }
.tree-basic-cell.cl::before { content:''; position:absolute; left:9px; top:0; height:50%; width:1px; background:#d1d5db; }
.tree-basic-cell.cl::after  { content:''; position:absolute; left:9px; top:50%; width:11px; height:1px; background:#d1d5db; }
.tree-basic-icon  { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; margin-right:5px; color:#6b7280; }
.tree-basic-btn   { width:12px; height:12px; border:1px solid #b0b8c1; border-radius:2px; background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:4px; font-size:10px; font-weight:700; line-height:1; color:#555; cursor:pointer; user-select:none; }
.tree-basic-spacer { width:12px; flex-shrink:0; margin-right:4px; }
.tree-basic-label  { font-size:13px; color:#1f2937; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree-basic-count  { font-size:10.5px; color:#9ca3af; background:#f3f4f6; padding:1px 6px; border-radius:8px; margin-left:4px; flex-shrink:0; }
.tree-basic-children      { display: none; }
.tree-basic-children.open { display: block; }
/* [/tree-basic] */


/* [layout-basic-sub] */
#sub-sidebar { width: 200px; background: #fff; border-right: 1px solid #e5e7eb; }
#sub-main    { flex: 1; overflow-y: auto; padding:0px; background: #fff; }
/* [/layout-basic-sub] */

/* ─── Form Controls ─── */
.form-input {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 5px;
  font-size: .875rem;
  color: #374151;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.form-input:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-select {
  display: block;
  width: 100%;
  padding: .5rem 2.25rem .5rem .75rem;
  border: 1.5px solid #d1d5db;
  border-radius: 5px;
  font-size: .875rem;
  color: #374151;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .65rem center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.5;
}
.form-select:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.form-select option { font-size: .875rem; }
.form-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: #374151;
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}
.form-check input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  cursor: pointer;
  flex-shrink: 0;
}



/* =============================================
   dept-card-grid / member-card-grid
   ============================================= */
.dept-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 14px;
}
.dept-card {
  border: 1px solid var(--clr-border); border-radius: 8px;
  padding: 12px 14px; background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s; position: relative;
}
.dept-card:hover { border-color: #93c5fd; box-shadow: 0 2px 8px rgba(37,99,235,.08); }
.dept-card .dept-card-icon {
  width: 32px; height: 32px; border-radius: 7px; background: #eff6ff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px; color: #2563eb;
}
.dept-card .dept-card-name { font-size: .8125rem; font-weight: 600; color: #1e293b; line-height: 1.35; }
.dept-card .dept-card-count { font-size: .7rem; color: #94a3b8; margin-top: 3px; }
.dept-card .dept-card-del {
  position: absolute; top: 6px; right: 6px; background: none; border: none;
  cursor: pointer; color: #e5e7eb; padding: 2px; border-radius: 4px;
  display: none; align-items: center; justify-content: center; transition: color .1s, background .1s;
}
.dept-card:hover .dept-card-del { display: flex; }
.dept-card .dept-card-del:hover { color: #ef4444; background: #fee2e2; }

.member-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px; padding: 14px;
}
.member-card {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--clr-border); border-radius: 8px;
  padding: 10px 12px; background: #fff; position: relative;
}
.member-card .member-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--clr-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; text-transform: uppercase;
}
.member-card .member-info { flex: 1; min-width: 0; }
.member-card .member-name {
  font-size: .8125rem; font-weight: 600; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-card .member-sub {
  font-size: .7rem; color: #94a3b8; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-card .member-remove {
  position: absolute; top: 5px; right: 5px; background: none; border: none;
  cursor: pointer; color: #e5e7eb; padding: 2px; border-radius: 4px;
  display: none; align-items: center; justify-content: center; transition: color .1s, background .1s;
}
.member-card:hover .member-remove { display: flex; }
.member-card .member-remove:hover { color: #ef4444; background: #fee2e2; }

.dept-tree-indent { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.dept-tree-toggle {
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; border-radius: 3px; transition: background .1s;
}
.dept-tree-toggle:hover { background: #f0f4ff; color: #2563eb; }
.dept-tree-toggle svg { transition: transform .15s; }
.dept-tree-toggle.open svg { transform: rotate(90deg); }
.dept-tree-children { display: none; }
.dept-tree-children.open { display: block; }

/* =============================================
   org-tree (조직도 트리 - Tree Basic)
   ============================================= */
.org-tree { padding: 6px 0; }
.org-tree-node { position: relative; }
.org-tree-row {
  display: flex; align-items: center; gap: 0;
  padding: 0; cursor: pointer; user-select: none;
  transition: background .1s;
}
.org-tree-row:hover { background: #f8faff; }
.org-tree-row.active { background: var(--nav-active-bg); }
.org-tree-row.active .org-tree-label { color: var(--clr-primary); font-weight: 600; }

.org-tree-connectors { display: flex; flex-shrink: 0; }
.org-tree-connector-pipe {
  width: 20px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.org-tree-connector-pipe.vert  { border-left: 1.5px solid #e2e8f0; margin-left: 9px; }
.org-tree-connector-branch {
  width: 20px; flex-shrink: 0; position: relative;
  border-left: 1.5px solid #e2e8f0; margin-left: 9px;
}
.org-tree-connector-branch::after {
  content: ''; position: absolute; top: 50%;
  left: 0; width: 10px; border-top: 1.5px solid #e2e8f0;
}
.org-tree-connector-last {
  width: 20px; flex-shrink: 0; position: relative;
  margin-left: 9px;
  border-left: 1.5px solid #e2e8f0;
  height: 50%;
  align-self: flex-start;
  margin-top: 0;
}
.org-tree-connector-last::after {
  content: ''; position: absolute; top: 100%;
  left: 0; width: 10px; border-top: 1.5px solid #e2e8f0;
}

.org-tree-toggle-btn {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; color: #94a3b8;
  transition: background .1s, color .1s;
  margin: 0 3px;
}
.org-tree-toggle-btn:hover { background: #e0e7ff; color: #2563eb; }
.org-tree-toggle-btn svg { transition: transform .15s; }
.org-tree-toggle-btn.open svg { transform: rotate(90deg); }
.org-tree-toggle-spacer { width: 18px; height: 18px; flex-shrink: 0; margin: 0 3px; }

.org-tree-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #64748b; margin-right: 5px;
}
.org-tree-row.active .org-tree-icon { color: var(--clr-primary); }

.org-tree-label {
  flex: 1; min-width: 0;
  font-size: .8125rem; color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 4px 7px 0;
}
.org-tree-badge { flex-shrink: 0; margin-right: 10px; }
.org-tree-children { display: none; }
.org-tree-children.open { display: block; }

/* =============================================
   Mail – Sub-sidebar
   ============================================= */
body.mail-page #sub-sidebar { width: 240px; }
.basic-new-wrap { padding: 12px 12px 6px; }
.sub-sidebar-section { border-bottom: 1px solid var(--clr-border); }
.sub-sidebar-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem 1rem; font-size: var(--basic-folder-font-size, .875rem); font-weight: 600;
  color: var(--basic-folder-title-color, #374151); cursor: pointer; user-select: none;
}
.sub-sidebar-section-hdr:hover { background: var(--nav-hover-bg); }
.mail-chevron { transition: transform .2s; flex-shrink: 0; }
.sub-sidebar-section-hdr.collapsed .mail-chevron { transform: rotate(-90deg); }
.sub-sidebar-folder-list { list-style: none; padding: 2px 0 6px; margin: 0; }
.sub-sidebar-folder-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; font-size: .8125rem; color: #374151;
  cursor: pointer; border-left: 2px solid transparent;
  transition: background .1s;
}
.sub-sidebar-folder-item:hover { background: var(--nav-hover-bg); }
.sub-sidebar-folder-item.drag-over {
  background: rgba(26,115,232,.12) !important;
  outline: 2px dashed #1a73e8;
  outline-offset: -2px;
  color: #1a73e8;
  font-weight: 600;
}
.mail-item.dragging { opacity: .4; cursor: grabbing; }

.sub-sidebar-folder-item.active {
  background: var(--nav-active-bg); color: var(--clr-primary);
  border-left-color: var(--clr-primary-hover); font-weight: 600;
}
.mail-folder-icon { flex-shrink: 0; opacity: .55; display: flex; }
.sub-sidebar-folder-item.active .mail-folder-icon,
.sub-sidebar-folder-item:hover .mail-folder-icon { opacity: 1; }
.mail-folder-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-badge {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--clr-primary-hover, #0042aa); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mail-badge-orange { background: #f59e0b; }
.mail-share-x-btn {
  flex-shrink: 0; border: none; background: none; padding: 2px; cursor: pointer;
  color: var(--clr-text-sub, #94a3b8); display: none; align-items: center; justify-content: center;
  border-radius: 4px;
}
.mail-share-x-btn:hover { color: #dc2626; background: var(--nav-hover-bg, #fee2e2); }
.sub-sidebar-folder-item:hover .mail-share-x-btn { display: flex; }
.sub-sidebar-section-empty { padding: .35rem 1rem .75rem; font-size: .8rem; color: var(--clr-text-sub); }
/* =============================================
   Mail – List Panel items
   ============================================= */
.mail-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px 10px 18px; cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
  transition: background .12s; position: relative;
}
.mail-item:hover { background: #f8fafc; }
.mail-item.active { background: var(--nav-active-bg); }
.mail-unread-dot {
  display: none; position: absolute; left: 5px; top: 50%;
  transform: translateY(-50%); width: 6px; height: 6px;
  border-radius: 50%; background: var(--clr-primary-hover, #0042aa);
}
.mail-item.unread .mail-unread-dot { display: block; }
.mail-item-main { flex: 1; min-width: 0; }
.mail-item-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; gap: 6px; }
.mail-item-from { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .mail-item-from { font-weight: 700; }
.mail-item-date { font-size: .7rem; color: var(--clr-text-sub); flex-shrink: 0; }
.mail-item-subject { font-size: .8125rem; color: var(--clr-text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .mail-item-subject { font-weight: 600; }
.mail-item-preview { display: none; }
.mail-item-icons { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 3px; flex-shrink: 0; }
.mail-empty { display: flex; align-items: center; justify-content: center; min-height: 140px; color: var(--clr-text-sub); font-size: .875rem; }

/* [custom] */
.logo {
display:hidden;
}
/* [/custom] */


/* [layout-calendars] */
/* ══════════════════════════════════════════════════════════
   캘린더 페이지
══════════════════════════════════════════════════════════ */
body.cal-page #sub-sidebar { width: 220px; }

.cal-sb-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-text-sub);
  letter-spacing: .06em;
}
.cal-sb-sync-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--clr-text-sub);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.cal-sb-sync-btn:hover { background: var(--clr-bg-hover); color: var(--clr-text); }
.cal-sb-section {
  padding: 6px 14px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-text-sub);
  letter-spacing: .05em;
}
.cal-sb-loading, .cal-sb-empty {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--clr-text-sub);
}
.cal-folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--clr-text);
  user-select: none;
}
.cal-folder-item:hover { background: var(--clr-bg-hover); }
.cal-folder-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-folder-chk { accent-color: var(--clr-primary); }

/* ── 캘린더 툴바 ── */
#cal-wrap { display: flex; flex-direction: column; height: 100%; }
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.cal-nav-group { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-title {
  font-size: 15px;
  font-weight: 600;
  min-width: 140px;
  color: var(--clr-text);
}
.cal-view-tabs { display: flex; border: 1px solid var(--clr-border); border-radius: 6px; overflow: hidden; margin-left: auto; }
.cal-view-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--clr-border);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--clr-text-sub);
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover { background: var(--clr-bg-hover); color: var(--clr-text); }
.cal-view-btn.active { background: var(--clr-primary); color: #fff; }

/* ── 캘린더 공통 ── */
#cal-body { flex: 1; overflow: auto; }
.cal-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--clr-text-sub);
  font-size: 14px;
}

/* ── 월 보기 ── */
.cal-month { display: flex; flex-direction: column; height: 100%; }
.cal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--clr-border);
}
.cal-dow {
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-sub);
  text-transform: uppercase;
}
.cal-dow.cal-sun { color: #e53935; }
.cal-dow.cal-sat { color: #1e88e5; }
.cal-month-body { flex: 1; display: flex; flex-direction: column; }
.cal-week-row { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; border-bottom: 1px solid var(--clr-border); min-height: 80px; }
.cal-week-row:last-child { border-bottom: none; }
.cal-day-cell {
  border-right: 1px solid var(--clr-border);
  padding: 4px;
  min-height: 80px;
  cursor: pointer;
  overflow: hidden;
}
.cal-day-cell:last-child { border-right: none; }
.cal-day-cell:hover { background: var(--clr-bg-hover); }
.cal-other-month .cal-day-num { color: var(--clr-text-disabled); }
.cal-other-month { background: var(--clr-bg-alt); }
.cal-day-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--clr-text-sub);
  text-align: right;
  padding: 2px 4px 4px;
  line-height: 1;
}
.cal-today-num {
  background: var(--clr-primary);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.cal-today .cal-day-num { color: var(--clr-primary); }
.cal-evt-bar {
  font-size: 11px;
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin: 1px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-evt-time { font-size: 10px; margin-right: 3px; opacity: .85; }
.cal-more { font-size: 11px; color: var(--clr-text-sub); padding: 1px 4px; cursor: pointer; }
.cal-more:hover { color: var(--clr-primary); }

/* ── 주/일 보기 ── */
.cal-week, .cal-day { display: flex; flex-direction: column; height: 100%; }
.cal-week-head {
  display: grid;
  flex-shrink: 0;
  border-bottom: 1px solid var(--clr-border);
}
.cal-week .cal-week-head { grid-template-columns: 52px repeat(7, 1fr); }
.cal-week-col-head {
  padding: 6px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-sub);
  border-left: 1px solid var(--clr-border);
}
.cal-week-col-head.cal-today { color: var(--clr-primary); }
.cal-week-col-head .cal-week-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.cal-week-col-head .cal-today-num { background: var(--clr-primary); color: #fff; }
.cal-week-body, .cal-day { flex: 1; overflow-y: auto; }
.cal-hour-row {
  display: grid;
  min-height: 44px;
  border-bottom: 1px solid var(--clr-border);
}
.cal-week .cal-hour-row { grid-template-columns: 52px repeat(7, 1fr); }
.cal-day  .cal-hour-row { grid-template-columns: 52px 1fr; }
.cal-time-gutter {
  font-size: 10px;
  color: var(--clr-text-sub);
  text-align: right;
  padding: 4px 6px 0 0;
  flex-shrink: 0;
  border-right: 1px solid var(--clr-border);
}
.cal-week-cell { border-left: 1px solid var(--clr-border); padding: 2px; min-height: 44px; }
.cal-day-cell-full { padding: 2px 4px; }
.cal-evt-pill {
  font-size: 11px;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  margin: 1px 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-allday-bar { padding: 4px 8px; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg-alt); }

/* ── 목록 보기 ── */
.cal-list { padding: 8px 16px; }
.cal-list-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-sub);
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 4px;
}
.cal-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.cal-list-item:hover { background: var(--clr-bg-hover); }
.cal-list-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.cal-list-title { font-size: 13px; font-weight: 600; color: var(--clr-text); }
.cal-list-time, .cal-list-loc { font-size: 11px; color: var(--clr-text-sub); }
/* [/layout-calendars] */

/* ══════════════════════════════════════════════════════════
   주소록 페이지
══════════════════════════════════════════════════════════ */
body.contacts-page #sub-sidebar { width: 220px; }

.ct-folder-item {
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  color: var(--clr-text);
  border-radius: 0;
  user-select: none;
}
.ct-folder-item:hover { background: var(--clr-bg-hover); }
.ct-folder-item.active { background: var(--clr-primary-light, rgba(var(--clr-primary-rgb,66,133,244),.12)); color: var(--clr-primary); font-weight: 600; }
.ct-folder-all { font-weight: 600; }

/* ── 툴바 ── */
#contacts-wrap { display: flex; flex-direction: column; height: 100%; }
.contacts-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.contacts-search-wrap { flex: 1; max-width: 300px; }
.contacts-search { width: 100%; }
/* ── page-view-tabs 표준: 목록/그리드 등 보기 전환 탭 (여러 페이지에서 공통 사용) ── */
.page-view-tabs { display: flex; border: 1px solid var(--clr-border); border-radius: 6px; overflow: hidden; }
.page-view-tab {
  background: none;
  border: none;
  border-right: 1px solid var(--clr-border);
  padding: 5px 10px;
  cursor: pointer;
  color: var(--clr-text-sub);
  display: flex;
  align-items: center;
}
.page-view-tab:last-child { border-right: none; }
.page-view-tab:hover { background: var(--clr-bg-hover); color: var(--clr-text); }
.page-view-tab.active { background: var(--clr-primary); color: #fff; }
.contacts-count { font-size: 12px; color: var(--clr-text-sub); margin-left: auto; }
#contacts-body { flex: 1; overflow: auto; }

/* ── 목록 보기 ── */
.ct-list { display: table; width: 100%; border-collapse: collapse; }
.ct-list-head {
  display: table-row;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--clr-text-sub);
  border-bottom: 2px solid var(--clr-border);
}
.ct-list-head .ct-col { padding: 8px 12px; display: table-cell; }
.ct-list-row {
  display: table-row;
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
}
.ct-list-row:hover { background: var(--clr-bg-hover); }
.ct-list-row.active { background: var(--clr-primary-light, rgba(66,133,244,.10)); }
.ct-list-row.note-item-checked { background: var(--clr-primary-light, rgba(66,133,244,.10)); }
.ct-col { display: table-cell; padding: 8px 12px; vertical-align: middle; font-size: 13px; color: var(--clr-text); }
.ct-col-cb { width: 34px; }
.ct-col-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.ct-col-email { color: var(--clr-text-sub); }
.ct-col-phone { color: var(--clr-text-sub); width: 140px; }
.ct-col-company { color: var(--clr-text-sub); }
.ct-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── PP 패널: 그룹(배포 목록) 구성원 목록 ── */
.ct-group-member-row { display: flex; align-items: center; gap: 8px; padding: 5px 16px; }
.ct-group-member-avatar {
  width: 24px; height: 24px; border-radius: 50%; color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.ct-group-member-info { display: flex; flex-direction: column; min-width: 0; }
.ct-group-member-name { font-size: 12px; color: var(--clr-text, #374151); font-weight: 600; }
.ct-group-member-email { font-size: 10.5px; color: #9ca3af; }

/* ── 그리드 보기 ── */
.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px;
}
.ct-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 12px 16px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  text-align: center;
}
.ct-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); border-color: var(--clr-primary); }
.ct-card.active { border-color: var(--clr-primary, #2563eb); box-shadow: 0 2px 12px rgba(37,99,235,.15); }
.ct-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-card-name { font-size: 13px; font-weight: 600; color: var(--clr-text); word-break: break-word; }
.ct-card-email { font-size: 11px; color: var(--clr-text-sub); word-break: break-all; }
.ct-card-company { font-size: 11px; color: var(--clr-text-sub); }

/* ── 메모/작업 그리드 보기 카드 (ct-grid/ct-card와 같은 언어, 텍스트가 많아 좌측 정렬) ── */
.nt-grid, .tk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px;
}
.nt-card, .tk-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  cursor: pointer;
  transition: box-shadow .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.nt-card:hover, .tk-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.1); border-color: var(--clr-primary); }
.nt-card.active, .tk-card.active { border-color: var(--clr-primary, #2563eb); box-shadow: 0 2px 12px rgba(37,99,235,.15); }
.nt-card-color-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.nt-card-title, .tk-card-title { font-size: 13px; font-weight: 600; color: var(--clr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px; }
.nt-card-preview { font-size: 11px; color: var(--clr-text-sub); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-left: 4px; min-height: 42px; }
.nt-card-meta, .tk-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-left: 4px; }
.nt-card-tags { display: flex; gap: 3px; flex-wrap: wrap; padding-left: 4px; }
.tk-card-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tk-card-progress { height: 4px; border-radius: 2px; background: var(--clr-bg-alt); overflow: hidden; }
.tk-card-progress-bar { height: 100%; }


/* ══════════════════════════════════════════════════════════
   메모 페이지 (notes)
══════════════════════════════════════════════════════════ */
body.notes-page #sub-sidebar { width: 200px; }

.notes-editor-toolbar {
  min-height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.notes-editor-title-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--clr-text);
  outline: none;
  padding: 2px 4px;
}
.notes-editor-title-input::placeholder { color: var(--clr-text-disabled); }
.notes-status { font-size: 11px; color: var(--clr-text-sub); min-width: 60px; text-align: right; }
.notes-status.saved   { color: #22c55e; }
.notes-status.unsaved { color: #f59e0b; }
.notes-toolbar-actions { display: flex; gap: 4px; }
.notes-icon-btn {
  background: none;
  border: none;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--clr-text-sub);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notes-icon-btn:hover { background: var(--clr-bg-hover); color: var(--clr-text); }
.notes-del-btn:hover  { color: #ef4444; }
.notes-new-btn:hover  { color: #1a73e8; }

.notes-tags-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
  min-height: 34px;
}
.notes-tag-add-inp {
  border: none;
  background: none;
  font-size: 12px;
  outline: none;
  color: var(--clr-text);
  min-width: 100px;
}
.notes-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--clr-primary-light, rgba(66,133,244,.12));
  color: var(--clr-primary);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}
.notes-tag-pill-del {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--clr-primary);
  font-size: 13px;
  line-height: 1;
}
.notes-editor-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.notes-content-editable {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--clr-text);
  outline: none;
  min-height: 200px;
}
.notes-content-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--clr-text-disabled);
  pointer-events: none;
}
.notes-placeholder-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--clr-text-sub);
}
.notes-placeholder-panel svg { opacity: .35; }
.notes-placeholder-panel p   { font-size: 13px; }

/* 목록 패널 items */
.basic-item {
  cursor: pointer;
  border-bottom: 1px solid var(--clr-border);
  transition: background .1s;
  user-select: none; -webkit-user-select: none;
}
.basic-item:hover  { background: var(--clr-bg-hover); }
.basic-item.active { background: var(--clr-primary-light, rgba(66,133,244,.10)); }
.notes-item-title   { font-size: 13px; font-weight: 600; color: var(--clr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-item-preview { font-size: 11px; color: var(--clr-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 2px 0; }
.notes-item-meta    { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.notes-item-date    { font-size: 10px; color: var(--clr-text-disabled); }
.notes-item-tags    { display: flex; gap: 3px; flex-wrap: wrap; }
.notes-tag          { font-size: 10px; padding: 1px 6px; background: var(--clr-bg-alt); border-radius: 8px; color: var(--clr-text-sub); }
.notes-empty        { padding: 30px 14px; font-size: 13px; color: var(--clr-text-sub); text-align: center; }

/* ── 메모 목록 다중 선택 ── */
.notes-item-cb-wrap { display: flex; align-items: center; padding-left: 10px; flex-shrink: 0; align-self: center; }
.notes-item-cb { cursor: pointer; }
.basic-item.note-item-checked { background: var(--clr-primary-light, rgba(66,133,244,.10)); }
.notes-bulk-bar { display: none; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg-alt, #f8fafc); font-size: 12px; flex-shrink: 0; }
.notes-bulk-bar.show { display: flex; }
.notes-bulk-count { color: var(--clr-text-sub); }
.notes-bulk-del-btn { margin-left: auto; background: none; border: 1px solid #fca5a5; color: #dc2626; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.notes-bulk-del-btn:hover { background: #fef2f2; }
.notes-bulk-clear-btn { background: none; border: 1px solid var(--clr-border); color: var(--clr-text-sub); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.notes-bulk-clear-btn:hover { background: var(--clr-bg-hover); }

/* ══════════════════════════════════════════════════════════
   저장소 페이지 (storage)
══════════════════════════════════════════════════════════ */
body.storage-page #sub-sidebar { width: 200px; }

.storage-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.st-breadcrumb { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.st-bc-item    { color: var(--clr-primary); cursor: pointer; }
.st-bc-item:hover { text-decoration: underline; }
.st-bc-sep     { color: var(--clr-text-sub); }
.st-main-body  { flex: 1; overflow-y: auto; padding: 16px; }
.st-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--clr-text-sub); letter-spacing: .06em; margin-bottom: 10px; }
.st-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.st-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 10px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  position: relative;
  transition: box-shadow .15s, border-color .15s;
}
.st-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--clr-primary); }
.st-item-folder .st-item-icon { opacity: .9; }
.st-item-icon   { display: flex; align-items: center; justify-content: center; }
.st-item-name   { font-size: 12px; font-weight: 600; color: var(--clr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.st-item-size   { font-size: 10px; color: var(--clr-text-sub); }
.st-item-actions { display: flex; gap: 4px; }
.st-item-check { position: absolute; top: 6px; left: 6px; z-index: 2; cursor: pointer; width: 15px; height: 15px; }
.st-item-dl, .st-item-del {
  background: none; border: none; padding: 3px; cursor: pointer; border-radius: 4px;
  color: var(--clr-text-sub);
}
.st-item-dl:hover  { background: var(--clr-bg-hover); color: var(--clr-primary); }
.st-item-del:hover { background: var(--clr-bg-hover); color: #ef4444; }
.st-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--clr-text-sub);
  font-size: 13px;
}
.st-empty svg { opacity: .35; }
.st-upload-bar { padding: 8px 14px; background: var(--clr-primary-light, rgba(66,133,244,.1)); border-radius: 6px; font-size: 12px; color: var(--clr-primary); margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════
   환경설정 페이지 (settings)
══════════════════════════════════════════════════════════ */
body.settings-page #sub-sidebar { width: 200px; }

#settings-wrap { display: flex; flex-direction: column; gap: 0; height: 100%; }
.settings-nav { display: flex; gap: 0; border-bottom: 1px solid var(--clr-border); flex-shrink: 0; }
.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--clr-text-sub);
  border-bottom: 2px solid transparent;
}
.settings-nav-btn:hover { color: var(--clr-text); }
.settings-nav-btn.active { color: var(--clr-primary); border-bottom-color: var(--clr-primary); }

.settings-panel { padding: 24px; flex: 1; overflow-y: auto; }
.settings-card {
  max-width: 540px;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  padding: 24px;
}
.settings-card-title { font-size: 15px; font-weight: 700; color: var(--clr-text); margin-bottom: 20px; }
.settings-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.settings-label { font-size: 12px; font-weight: 600; color: var(--clr-text-sub); }
.settings-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.settings-msg { font-size: 12px; }
.settings-msg.success { color: #22c55e; }
.settings-msg.error   { color: #ef4444; }


/* ── 메모 첨부파일 바 ── */
.notes-attach-bar {
  border-top: 1px solid var(--clr-border);
  background: var(--clr-bg-alt);
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}
.notes-attach-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--clr-border);
}
.notes-attach-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-sub);
}
.notes-attach-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--clr-border);
  border-radius: 4px;
  background: var(--clr-bg);
  font-size: 11px;
  cursor: pointer;
  color: var(--clr-text-sub);
  margin-left: auto;
}
.notes-attach-upload-btn:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
.notes-attach-list { padding: 4px 8px; }
.notes-attach-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 5px;
}
.notes-attach-item:hover { background: var(--clr-bg-hover); }
.notes-attach-name {
  flex: 1;
  font-size: 12px;
  color: var(--clr-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.notes-attach-name:hover { text-decoration: underline; }
.notes-attach-size { font-size: 10px; color: var(--clr-text-sub); white-space: nowrap; }
.notes-attach-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--clr-text-sub);
  line-height: 1;
  padding: 0 2px;
}
.notes-attach-del:hover { color: #ef4444; }

/* TinyMCE 컨테이너 높이 조정 */
body.notes-page #neditorBody .tox-tinymce { height: 100% !important; border: none !important; }
body.notes-page #neditorBody .tox-editor-container { height: 100%; }
body.notes-page #neditorBody .tox-edit-area { flex: 1; }


/* ======================================================
   Tasks page
====================================================== */
body.tasks-page #sub-sidebar { width: 190px; }

.task-sb-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0; margin-right: 6px;
}
.task-add-folder-btn {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--clr-text-sub); padding: 3px; border-radius: 4px;
  display: flex; align-items: center;
}
.task-add-folder-btn:hover { background: var(--clr-hover); color: var(--clr-primary); }
.task-folder-del {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--clr-text-sub); font-size: 14px; line-height: 1;
  padding: 0 2px; border-radius: 3px; display: none;
}
.ct-folder-item:hover .task-folder-del { display: inline; }
.task-folder-del:hover { color: #ef4444; }

/* List items */
.task-item-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.task-item-title {
  flex: 1; font-size: 13px; font-weight: 600; color: var(--clr-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.task-private-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 6px;
  background: #f3f4f6; color: #9ca3af; flex-shrink: 0;
}
.task-item-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--clr-text-sub); }
.task-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.task-item-assignee {
  font-size: 10px; color: var(--clr-text-sub);
  background: var(--clr-bg-alt); border-radius: 6px; padding: 1px 6px;
}
.task-item-due { margin-left: auto; font-size: 10px; color: var(--clr-text-sub); }
.task-item-due.overdue { color: #ef4444; font-weight: 700; }
.task-item-progress { margin-top: 5px; height: 3px; background: var(--clr-border); border-radius: 2px; overflow: hidden; }
.task-item-progress-bar { height: 100%; border-radius: 2px; transition: width .3s; }

/* Editor meta rows */
.task-meta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--clr-border);
  background: var(--clr-bg-alt); flex-shrink: 0; align-items: flex-end;
}
.task-meta-group { display: flex; flex-direction: column; gap: 3px; }
.task-meta-pct-group { flex: 1; }
.task-meta-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  color: var(--clr-text-sub); letter-spacing: .05em;
}
.task-meta-select, .task-meta-date, .task-meta-text {
  border: 1px solid var(--clr-border); border-radius: 5px;
  padding: 3px 8px; font-size: 12px;
  background: var(--clr-bg); color: var(--clr-text); cursor: pointer;
}
.task-meta-text { cursor: text; min-width: 100px; }
.task-meta-select:focus, .task-meta-date:focus, .task-meta-text:focus {
  outline: none; border-color: var(--clr-primary);
}

/* Toggle switch */
.task-toggle { position: relative; display: inline-block; width: 32px; height: 18px; cursor: pointer; }
.task-toggle input { opacity: 0; width: 0; height: 0; }
.task-toggle-slider {
  position: absolute; inset: 0; background: var(--clr-border);
  border-radius: 9px; transition: .2s;
}
.task-toggle-slider::before {
  content: ''; position: absolute;
  width: 12px; height: 12px; left: 3px; top: 3px;
  background: white; border-radius: 50%; transition: .2s;
}
.task-toggle input:checked + .task-toggle-slider { background: var(--clr-primary); }
.task-toggle input:checked + .task-toggle-slider::before { transform: translateX(14px); }

/* Progress */
.task-progress-wrap { display: flex; align-items: center; gap: 8px; }
.task-progress-range { flex: 1; max-width: 140px; accent-color: var(--clr-primary); cursor: pointer; }
.task-progress-val { font-size: 12px; font-weight: 600; color: var(--clr-text-sub); min-width: 32px; }

/* TinyMCE */
body.tasks-page #teditorBody .tox-tinymce { height: 100% !important; border: none !important; }
body.tasks-page #teditorBody .tox-editor-container { height: 100%; }
body.tasks-page #teditorBody .tox-edit-area { flex: 1; }


/* ======================================================
   Notes folder/color/public additions
====================================================== */
.note-color-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0; margin-right: 6px;
}
.note-sb-item { display: flex; align-items: center; }

/* 색상 피커 (에디터 메타 행) */
.note-color-picker { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.note-color-swatch {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
  flex-shrink: 0;
}
.note-color-swatch:hover { transform: scale(1.2); }
.note-color-swatch.active { transform: scale(1.15); }

/* 목록 아이템 색상 바 */
.basic-item {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.note-list-color-bar {
  width: 4px;
  border-radius: 2px 0 0 2px;
  flex-shrink: 0;
  min-height: 100%;
}
.notes-item-content {
  flex: 1;
  padding: 10px 12px;
  min-width: 0;
}
body.notes-page .notes-item-title {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}

/* [sb-new-btn] */
.sb-new-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 10px 8px 6px;
  padding: 9px 20px;
  background: var(--clr-primary, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sb-new-btn:hover { filter: brightness(1.1); }

/* [sb-modal] */
.sb-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9900;
  align-items: center;
  justify-content: center;
}
.sb-modal {
  background: #fff;
  border-radius: 10px;
  width: 360px;
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  overflow: hidden;
}
.sb-modal-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 700; font-size: 15px; color: #1e293b;
}
.sb-modal-close {
  background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; line-height:1;
}
.sb-modal-close:hover { color: #475569; }
.sb-modal-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sb-modal-label {
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #374151; font-weight: 500;
}
.sb-modal-input {
  padding: 7px 10px; border: 1.5px solid #d1d5db; border-radius: 6px;
  font-size: 13.5px; color: #111; outline: none;
}
.sb-modal-input:focus { border-color: #3b82f6; }
.sb-modal-ftr {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; border-top: 1px solid #e5e7eb;
}
.sb-modal-cancel {
  padding: 7px 16px; border: 1.5px solid #d1d5db; background: #fff;
  border-radius: 6px; font-size: 13px; cursor: pointer; color: #374151;
}
.sb-modal-cancel:hover { background: #f1f5f9; }
.sb-modal-ok {
  padding: 7px 18px; background: #3b82f6; color: #fff;
  border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sb-modal-ok:hover { background: #2563eb; }
/* [/sb-modal] */

/* [storage-tree] */
.st-tree-wrap { padding: 4px 0; }
.st-tree-wrap .tree-basic-row { padding-left: 0; }
.st-tree-wrap .tree-basic-row.active { background: #eff6ff; }
.st-tree-wrap .tree-basic-row.active .tree-basic-label { color: #1d4ed8; font-weight: 600; }
/* [/storage-tree] */


/* [div-list-table-wrap] */
#list-panel .list-search-bar { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; flex-wrap: wrap; }
#list-panel .search-input { flex: 1; min-width: 180px; }

#list-panel .list-table-wrap { overflow-x: auto; border: 0px solid #e5e7eb; border-radius: 6px; }
#list-panel .list-table { width: 100%; border-collapse: collapse; font-size: .875rem; white-space: nowrap; }
#list-panel .list-table thead tr { background: #f1f5f9; }
#list-panel .list-table th { padding: .65rem 1rem; text-align: left; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; }
#list-panel .list-table th.sortable { cursor: pointer; }
#list-panel .list-table th.sortable:hover { color: #2563eb; }
#list-panel .list-table td { padding: .65rem 1rem; color: #4b5563; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
#list-panel .list-table tbody tr:last-child td { border-bottom: none; }
#list-panel .list-table tbody tr:hover td { background: #f8fafc; }
#list-panel .list-table .col-check  { width: 2.5rem; text-align: center; }
#list-panel .list-table .col-num    { width: 3.5rem; text-align: center; color: #9ca3af; }
#list-panel .list-table .col-action { width: 7rem;  text-align: center; }
#list-panel .list-table .no-data td { text-align: center; color: #9ca3af; padding: 3rem; }

#list-panel .list-pagination { display: flex; align-items: center; justify-content: center; gap: .25rem; flex-wrap: wrap; }
#list-panel .list-pagination a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 5px; font-size: .875rem; color: #374151; border: 1px solid #e5e7eb; background: #fff; text-decoration: none; }
#list-panel .list-pagination a:hover  { background: #f0f5ff; color: #2563eb; border-color: #bfdbfe; }
#list-panel .list-pagination .active   { background: #2563eb; color: #fff; border-color: #2563eb; }
#list-panel .list-pagination .disabled { color: #d1d5db; pointer-events: none; background: #f9fafb; }
/* [/div-list-table-wrap] */

/* ─── sub-sidebar resizer ─── */
.sub-sidebar-resizer {
  flex-shrink: 0;
  cursor: col-resize;
  background: transparent;
  transition: background .12s;
  z-index: 10;
  position: relative;
}
.sub-sidebar-resizer::after {
  content: '';
  position: absolute;
  inset: 0 -2px;
}
.sub-sidebar-resizer:hover,
.sub-sidebar-resizer.dragging { background: rgba(37,99,235,.2); }

/* ─── Mail message body view ─── */
.mail-msg-loading, .mail-msg-error {
  padding: 24px; color: var(--clr-text-sub); font-size: 13px;
}
.mail-msg-error { color: var(--clr-danger); }
.mail-msg-hdr {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #f8fafc;
}
.mail-msg-subject {
  font-size: .975rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  line-height: 1.4;
}
.mail-msg-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mail-meta-row {
  font-size: .8rem;
  color: #475569;
}
.mail-meta-row b { color: #1e293b; font-weight: 600; }
.mail-meta-date { color: #94a3b8; margin-top: 4px; }
.mail-msg-att {
  margin-top: 12px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.mail-msg-att-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mail-att-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  background: #fff;
  color: #1e40af;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: 7px 8px 7px 12px;
  transition: background .12s, border-color .12s;
  max-width: 320px;
}
.mail-att-item:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.mail-att-icon-wrap {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mail-att-icon-wrap svg { width: 16px; height: 16px; display: block; }
.mail-att-info { min-width: 0; }
.mail-att-name {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.mail-att-size { font-size: 10px; color: #94a3b8; margin-top: 1px; }
.mail-att-item em { font-style: normal; color: #64748b; }
.mail-att-actions {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; flex-shrink: 0;
}
.mail-att-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border: none; border-radius: 5px;
  background: none; color: #94a3b8; cursor: pointer; padding: 0;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.mail-att-action-btn:hover {
  background: #dbeafe; color: #1d4ed8;
}
.mail-msg-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mail-body-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: #fff;
}
.mail-body-plain {
  flex: 1;
  padding: 16px 20px;
  font-size: .875rem;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
}
/* mail list-editor layout */
body.mail-page #list-editor {
  display: flex;
  flex-direction: column;
}

/* ─── Calendar list table view ─── */
.cal-list-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.cal-list-table-wrap .basic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}
.cal-list-table-wrap .basic-table thead tr { background: #f1f5f9; }
.cal-list-table-wrap .basic-table th {
  padding: .55rem .875rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.cal-list-table-wrap .basic-table td {
  padding: .55rem .875rem;
  border-bottom: 1px solid #f1f5f9;
  color: #4b5563;
}
.cal-list-table-wrap .basic-table tbody tr:hover td { background: #f8fafc; cursor: pointer; }
.cal-list-table-wrap .basic-table tbody tr.row-selected td { background: #eff6ff; }

/* =============================================
   Mail Page — body.mail-page
   ============================================= */

/* ─── Mail list items ─── */
.mail-list-body { display: flex; flex-direction: column; }
.mail-list-spinner, .mail-list-bottom-loader {
  padding: 24px; text-align: center; font-size: 12px; color: #aaa;
}
.mail-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
  user-select: none; -webkit-user-select: none;
}
.mail-item:hover  { background: #f8fafc; }
.mail-item.selected { background: var(--nav-active-bg, #eff6ff); }
.mail-item-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 700; color: #fff; flex-shrink: 0; margin-top: 1px;
}
.mail-item-content { flex: 1; min-width: 0; }
.mail-item-row1 {
  display: flex; justify-content: space-between; align-items: center;
  gap: 6px; margin-bottom: 2px;
}
.mail-item-sender { font-size: .8125rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.unread .mail-item-sender { font-weight: 700; }
.mail-item-meta { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.mail-item-time { font-size: .7rem; color: var(--clr-text-sub, #94a3b8); }
.mail-flag-btn {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: #cbd5e1; opacity: 0; transition: opacity .12s, color .12s;
  display: flex; align-items: center;
}
.mail-item:hover .mail-flag-btn,
.mail-flag-btn.active { opacity: 1; }
.mail-flag-btn.active { color: #f59e0b; }
.mail-item-row2 {
  display: flex; align-items: center; gap: 5px; margin-bottom: 2px;
}
.mail-item-subject {
  font-size: .8125rem; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.mail-item.unread .mail-item-subject { font-weight: 600; color: #1e293b; }
.mail-attach-icon { flex-shrink: 0; color: #94a3b8; }
.mail-importance-icon { flex-shrink: 0; color: #dc2626; font-weight: 800; font-size: 14px; line-height: 1; }
.mail-item-preview {
  font-size: .75rem; color: var(--clr-text-sub, #94a3b8);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-empty {
  padding: 48px 24px; text-align: center; font-size: 13px; color: #bbb;
}

/* ─── Mail message body view ─── */
.mail-msg-loading {
  padding: 48px 24px; text-align: center; font-size: 12px; color: #aaa;
}
.mail-msg-error {
  padding: 24px; color: #dc2626; font-size: 13px; text-align: center;
}
.mail-msg-hdr {
  padding: 16px 20px; border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0; background: #f8fafc;
}
.mail-msg-subject {
  font-size: 1rem; font-weight: 700; color: #1e293b;
  margin-bottom: 10px; line-height: 1.4;
}
.mail-msg-meta { display: flex; flex-direction: column; gap: 4px; }
.mail-meta-row {
  display: flex; align-items: baseline; gap: 6px; font-size: .8rem;
}
.mail-meta-label { color: #94a3b8; font-weight: 600; flex-shrink: 0; min-width: 60px; }
.mail-meta-val   { color: #374151; }
.mail-meta-date  { color: #94a3b8; }
.mail-msg-att {
  margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px;
}
.mail-att-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; background: #eff6ff; color: #1d4ed8;
  border: 1px solid #bfdbfe; border-radius: 4px; padding: 3px 8px;
}
.mail-att-item em { font-style: normal; color: #64748b; }
.mail-msg-body {
  flex: 1; overflow: auto; display: flex; flex-direction: column;
}
.mail-body-iframe {
  width: 100%; border: none; background: #fff; display: block; min-height: 200px;
}
.mail-body-plain {
  padding: 16px 20px; font-size: .875rem; color: #374151;
  white-space: pre-wrap; word-break: break-word;
  font-family: 'Courier New', monospace; margin: 0;
}
/* editor panel for mail */
body.mail-page #list-editor {
  display: flex; flex-direction: column; overflow: hidden;
}

/* ─── Folder sidebar ─── */
.basic-new-wrap { padding: 12px 12px 8px; }
.sub-sidebar-section { }
.sub-sidebar-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 14px; font-size: var(--basic-folder-font-size, .875rem); font-weight: 600;
  color: var(--basic-folder-title-color, #374151); cursor: pointer; user-select: none;
  text-transform: uppercase; letter-spacing: .04em;
}
.sub-sidebar-section-hdr:hover { background: #f1f5f9; }
.sub-sidebar-section-hdr .mail-chevron { transition: transform .2s; }
.sub-sidebar-section-hdr.collapsed .mail-chevron { transform: rotate(-90deg); }
.sub-sidebar-section-empty { padding: 6px 14px; font-size: .78rem; color: #94a3b8; }
.sub-sidebar-folder-list { list-style: none; margin: 0; padding: 0; }
.sub-sidebar-folder-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 16px; font-size: .8125rem; color: #374151;
  cursor: pointer; border-left: 2px solid transparent;
  transition: background .1s;
}
.sub-sidebar-folder-item:hover  { background: var(--nav-hover-bg, #f8fafc); }
.sub-sidebar-folder-item.active {
  background: var(--nav-active-bg, #eff6ff);
  color: var(--clr-primary);
  border-left-color: var(--clr-primary-hover, #1d4ed8);
  font-weight: 600;
}
.mail-folder-icon { flex-shrink: 0; opacity: .6; }
.sub-sidebar-folder-item.active .mail-folder-icon { opacity: 1; }
.mail-folder-name { flex: 1; }
.mail-badge {
  background: #ef4444; color: #fff; font-size: .65rem; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; min-width: 16px; text-align: center;
}
.mail-badge-orange { background: #f59e0b; }

/* ─── Sub-sidebar & editor width for mail ─── */
body.mail-page #sub-sidebar { width: 240px; }
body.mail-page #list-panel  { min-width: 260px; }

/* ─── Page info ─── */
#mail-page-info { font-size: .75rem; color: #94a3b8; }

/* ─── Spinner keyframe ─── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── mail-page: list-panel scrollable ─── */
body.mail-page #list-panel .list-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  border-radius: 0;
}
body.mail-page #list-panel { overflow: hidden; }

.mail-archive-badge { display: flex; align-items: center; flex-shrink: 0; }
.mail-archive-icon { color: #9a6b1f; flex-shrink: 0; }

/* [list-tab-bar] */
.list-tab-bar {
  display: flex;
  align-items: center;
  padding: 0 4px;
  border-bottom: 1px solid var(--clr-border, #e5e7eb);
  background: var(--clr-surface, #fff);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.mail-sel-all-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
}
.mail-cb {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--clr-primary, #1a73e8);
}
.list-tab {
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--clr-text-sub, #64748b);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.list-tab:hover { color: var(--clr-text, #1e293b); }
.list-tab.active {
  color: var(--clr-primary, #1a73e8);
  border-bottom-color: var(--clr-primary, #1a73e8);
  font-weight: 600;
}
/* 아이템 체크박스 */
.mail-item-cb-wrap {
  display: flex;
}
.mail-item-cb {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--clr-primary, #1a73e8);
}
.mail-item.mail-item-checked { background: var(--clr-primary-light, #eff6ff); }
.mail-filter-empty { padding: 24px; text-align: center; color: var(--clr-text-sub, #94a3b8); font-size: 13px; }
/* [/list-tab-bar] */

/* [mail-search-actions] */
.mail-search-actions { display:flex;align-items:center;gap:4px;flex-shrink:0; }
.mail-sort-drop {
  position: fixed;
  min-width: 130px;
  background: #fff;
  border: 1px solid var(--clr-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999;
  display: none;
  overflow: hidden;
}
.mail-sort-drop.open { display: block; }
.mail-sort-item {
  padding: 9px 14px;
  font-size: 12px;
  cursor: pointer;
  color: var(--clr-text, #1e293b);
  transition: background .1s;
}
.mail-sort-item:hover { background: var(--clr-bg, #f8fafc); }
.mail-sort-item.active { color: var(--clr-primary, #1a73e8); font-weight: 600; }
/* [/mail-search-actions] */

/* [ctx-menu-extra] */
.ctx-menu li.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
.ctx-menu li { display: flex; align-items: center; gap: 8px; user-select: none; }
.ctx-menu li .ctx-icon { width: 16px; min-width: 16px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ctx-menu li .ctx-icon svg { display: block; }
.ctx-menu li .ctx-label { flex: 1; }
.ctx-menu li .ctx-arrow { margin-left: auto; font-size: 16px; color: #bbb; line-height: 1; padding-left: 4px; }
.ctx-menu.ctx-submenu { z-index: 9001; }
/* [/ctx-menu-extra] */

/* ── list-tab-bar 하위 호환 (mail-tab-bar / mail-tab) ── */
.mail-tab-bar { display:flex; align-items:center; padding:0 4px;
  border-bottom:1px solid var(--clr-border,#e5e7eb);
  background:var(--clr-surface,#fff); flex-shrink:0;
  position:sticky; top:0; z-index:10; }
.mail-tab { padding:8px 10px; font-size:12px; font-weight:500;
  color:var(--clr-text-sub,#64748b); border:none;
  border-bottom:2px solid transparent; background:none;
  cursor:pointer; margin-bottom:-1px;
  transition:color .15s,border-color .15s; white-space:nowrap; }
.mail-tab:hover { color:var(--clr-text,#1e293b); }
.mail-tab.active { color:var(--clr-primary,#1a73e8);
  border-bottom-color:var(--clr-primary,#1a73e8); font-weight:600; }

/* ── [basic-select] ── */
.basic-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
  padding-right: 38px !important;
  cursor: pointer;
}
/* [/basic-select] */

/* ── [basic-daypicker] ── */
input.basic-daypicker { cursor: default; }

.bdp-popup {
  display: none;
  position: absolute;
  z-index: 9999;
  width: 242px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.13);
  padding: 10px;
  font-family: inherit;
  box-sizing: border-box;
}
.bdp-popup.bdp-open { display: block; }

.bdp-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.bdp-title-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.bdp-title {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  padding: 0 4px;
  white-space: nowrap;
}
.bdp-prev-m, .bdp-next-m {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.bdp-prev-m:hover, .bdp-next-m:hover { background: #f1f5f9; }
.bdp-prev-y, .bdp-next-y {
  background: none;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.bdp-prev-y:hover, .bdp-next-y:hover { background: #f1f5f9; color: #374151; }

.bdp-wdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 3px;
}
.bdp-wdays span {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  padding: 2px 0;
}
.bdp-wdays span:first-child { color: #ef4444; }
.bdp-wdays span:last-child  { color: #3b82f6; }

.bdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.bdp-d {
  background: none;
  border: none;
  border-radius: 6px;
  width: 100%;
  aspect-ratio: 1;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .1s;
  padding: 0;
  line-height: 1;
}
.bdp-d:hover:not(.bdp-out):not(.bdp-sel) { background: #f1f5f9; }
.bdp-d.bdp-out { color: #d1d5db; cursor: default; pointer-events: none; }
.bdp-d.bdp-now { font-weight: 700; color: #2563eb; }
.bdp-d.bdp-sel { background: #2563eb !important; color: #fff !important; font-weight: 700; }
.bdp-d.bdp-sun:not(.bdp-out):not(.bdp-sel) { color: #ef4444; }
.bdp-d.bdp-sat:not(.bdp-out):not(.bdp-sel) { color: #3b82f6; }
.bdp-d.bdp-now.bdp-sel { background: #1d4ed8 !important; }

.bdp-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #e2e8f0;
}
.bdp-foot button {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
}
.bdp-foot button:hover { background: #eff6ff; }

@media (prefers-color-scheme: dark) {
  .bdp-popup { background: #1e2535; border-color: #334155; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
  .bdp-title { color: #e2e8f0; }
  .bdp-prev-m, .bdp-next-m { color: #94a3b8; }
  .bdp-prev-m:hover, .bdp-next-m:hover { background: #293144; }
  .bdp-prev-y, .bdp-next-y { color: #6b7280; }
  .bdp-prev-y:hover, .bdp-next-y:hover { background: #293144; color: #94a3b8; }
  .bdp-d { color: #cbd5e1; }
  .bdp-d:hover:not(.bdp-out):not(.bdp-sel) { background: #293144; }
  .bdp-d.bdp-out { color: #475569; }
  .bdp-foot { border-color: #334155; }
}
:root[data-theme=dark] .bdp-popup { background: #1e2535; border-color: #334155; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
:root[data-theme=dark] .bdp-title { color: #e2e8f0; }
:root[data-theme=dark] .bdp-prev-m, :root[data-theme=dark] .bdp-next-m { color: #94a3b8; }
:root[data-theme=dark] .bdp-prev-m:hover, :root[data-theme=dark] .bdp-next-m:hover { background: #293144; }
:root[data-theme=dark] .bdp-prev-y, :root[data-theme=dark] .bdp-next-y { color: #6b7280; }
:root[data-theme=dark] .bdp-prev-y:hover, :root[data-theme=dark] .bdp-next-y:hover { background: #293144; color: #94a3b8; }
:root[data-theme=dark] .bdp-d { color: #cbd5e1; }
:root[data-theme=dark] .bdp-d:hover:not(.bdp-out):not(.bdp-sel) { background: #293144; }
:root[data-theme=dark] .bdp-d.bdp-out { color: #475569; }
:root[data-theme=dark] .bdp-foot { border-color: #334155; }
/* [/basic-daypicker] */

/* ── contacts-page layout fix (PP 패널이 sub-main 내부에서 전체 높이를 차지하도록) ── */
body.contacts-page .layout-basic-sub #sub-main { overflow: hidden !important; }
body.contacts-page #sub-main .page-header { display: none; }
body.contacts-page #sub-main .page-body {
  padding: 0 !important; flex: 1; overflow: hidden; min-height: 0;
  background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; display: flex; flex-direction: column;
}
body.contacts-page #contacts-wrap { height: 100%; }
/* [/layout-contacts] */

/* ── storage-page layout fix ── */
body.storage-page .layout-basic-sub #sub-main { overflow: hidden !important; }
body.storage-page #sub-main .page-header { display: none; }
body.storage-page #sub-main .page-body {
  padding: 0 !important;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}

/* ── [basic-widget] ── */
.basic-widget {
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.basic-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--clr-border);
  flex-shrink: 0;
}
.basic-widget-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--clr-text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.basic-widget-title svg { color: var(--clr-primary); }
.basic-widget-link {
  font-size: 11px;
  color: var(--clr-primary);
  text-decoration: none;
  font-weight: 600;
  opacity: .85;
}
.basic-widget-link:hover { opacity: 1; text-decoration: underline; }
.basic-widget-body { flex: 1; overflow: auto; }
.basic-widget-list { list-style: none; margin: 0; padding: 0; }
.basic-widget-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--clr-border);
  cursor: pointer;
  transition: background .1s;
}
.basic-widget-item:last-child { border-bottom: none; }
.basic-widget-item:hover { background: var(--clr-bg-hover); }
.basic-widget-item.unread .bwi-subject { font-weight: 700; color: var(--clr-text); }
.bwi-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clr-primary); flex-shrink: 0;
}
.bwi-dot.read { background: transparent; border: 1px solid var(--clr-border); }
.bwi-info { flex: 1; min-width: 0; }
.bwi-subject {
  font-size: 12px; color: var(--clr-text-sub);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bwi-from { font-size: 11px; color: var(--clr-text-sub); margin-top: 1px; }
.bwi-date { font-size: 11px; color: var(--clr-text-sub); flex-shrink: 0; }
.basic-widget-empty {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 16px; font-size: 12px; color: var(--clr-text-sub);
}
@media (prefers-color-scheme: dark) {
  .basic-widget { background: var(--clr-bg); }
}
:root[data-theme="dark"] .basic-widget { background: var(--clr-bg); }
/* [/basic-widget] */

/* ── [layout-calendars] cal-body full height ── */
body.calendar-page .layout-basic-sub #sub-main { overflow: hidden !important; }
body.calendar-page #sub-main .page-header { display: none; }
body.calendar-page #sub-main .page-body {
  padding: 0 !important; flex: 1; overflow: hidden; min-height: 0;
  background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; display: flex; flex-direction: column;
}
body.calendar-page #cal-wrap { height: 100%; }
body.calendar-page #cal-body { flex: 1; min-height: 0; overflow: auto; }
/* [/layout-calendars] */

/* ════════════════════════════════════════════════════════
   조직도 / 주소록 모달 레이아웃
   orgPane0 · orgPane1 → 3단 구성
   ════════════════════════════════════════════════════════ */

/* 공통 패널 컨테이너 */
.org-pane {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* 좌측: 부서 트리 / 주소록 그룹 목록 */
.org-name {
  width: 300px;
  flex-shrink: 0;
  border-right: 1px solid var(--clr-border, #e5e7eb);
  overflow-y: auto;
  padding: 8px 0;
}

/* 중앙: 사용자 목록 */
.org-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-width: 0;
}

/* 우측: 선택된 수신자 패널 */

.org-select-foot {
  padding: 8px;
  border-top: 1px solid var(--clr-border, #e5e7eb);
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.org-select-clear {
  flex: 1;
  padding: 5px;
  background: none;
  border: 1px solid var(--clr-border, #d1d5db);
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
  color: var(--clr-text, #374151);
}
.org-select-clear:hover { background: var(--clr-hover, #f3f4f6); }
.org-select-add {
  flex: 2;
  padding: 5px;
  background: #1a73e8;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.org-select-add:hover { background: #1557b0; }

/* ── org-select 3구역 (수신/참조/숨은참조) ── */
.org-select {
  width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--clr-border, #e5e7eb);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.org-select-zone {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-bottom: 1px solid var(--clr-border, #e5e7eb);
  min-height: 36px;
}
.org-select-zone:last-of-type { border-bottom: none; }
.org-select-zone-hdr {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--clr-text-sub, #6b7280);
  background: var(--clr-surface, #f9fafb);
  border-bottom: 1px solid var(--clr-border, #e5e7eb);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.org-select-zone.active .org-select-zone-hdr {
  color: #1a73e8;
  background: #eff6ff;
}
.org-select-zone-hdr span {
  margin-left: auto;
  background: #1a73e8;
  color: #fff;
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 16px;
  display: inline-block;
}
.org-select-zone.active .org-select-zone-hdr span { background: #1557b0; }
.org-select-zone-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 4px;
}
.org-rcpt-item {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 4px;
  border-bottom: 1px solid var(--clr-border, #f3f4f6);
}
.org-rcpt-item:last-child { border-bottom: none; }
.org-rcpt-name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--clr-text, #1e293b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-rcpt-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  font-size: 14px;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.org-rcpt-rm:hover { color: #ef4444; }

/* ── org-list 다중선택 / 드래그 ── */
.org-item.org-checked {
  background: #dbeafe !important;
  outline: 1px solid #93c5fd;
  outline-offset: -1px;
}
.org-item.org-in-rcpt {}  /* 이미 존에 등록된 항목 (체크 아이콘으로 표시) */
.org-select-zone.org-drop-over {
  background: rgba(26,115,232,.1) !important;
  outline: 2px dashed #1a73e8;
  outline-offset: -2px;
}

/* sub-sidebar 폴더 체크박스 */
.sb-chk-box { width:14px; height:14px; flex-shrink:0; pointer-events:none; accent-color:#1a73e8; cursor:pointer; }

/* org 모달 컬럼 리사이저 */
.org-col-resizer {
  width: 1px;
  cursor: col-resize;
  background: var(--clr-border, #e5e7eb);
  flex-shrink: 0;
  transition: background 0.15s;
  user-select: none;
}
.org-col-resizer:hover, .org-col-resizer:active { background: #1a73e8; }

/* ── storage 다중선택 ── */
.st-item.st-selected {
  outline: 2px solid var(--clr-primary, #2563eb);
  background: rgba(37,99,235,.07);
  border-color: var(--clr-primary, #2563eb);
}
/* 드래그 선택 박스 */
#stSelBox {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border: 1.5px solid var(--clr-primary, #2563eb);
  background: rgba(37,99,235,.08);
  display: none;
}
/* 다중선택 툴바 */
.st-multi-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(37,99,235,.07);
  border-bottom: 1px solid rgba(37,99,235,.18);
  font-size: 12px;
  color: var(--clr-primary, #2563eb);
  font-weight: 600;
  flex-shrink: 0;
}
.st-multi-bar button {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 5px;
  border: 1px solid var(--clr-primary, #2563eb);
  background: none;
  color: var(--clr-primary, #2563eb);
  cursor: pointer;
}
.st-multi-bar button.danger {
  border-color: #ef4444;
  color: #ef4444;
}
.st-multi-bar button:hover { opacity: .75; }

/* ── storage pp 미리보기 패널 ── */
@keyframes ppSpin { to { transform: rotate(360deg); } }

.pp {
  width: 300px;
  min-width: 200px;
  max-width: 600px;
  background: var(--clr-surface, #fff);
  border-left: 1px solid var(--clr-border, #e5e7eb);
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  position: relative;
}
.pp.show { display: flex; }
.pp::-webkit-scrollbar { width: 4px; }
.pp::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 9999px; }

.pp-resize {
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  cursor: ew-resize; z-index: 5; transition: background .15s;
}
.pp-resize:hover, .pp-resize.dragging { background: rgba(37,99,235,.2); }

.pp-close-btn {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: 16px; line-height: 1;
  border-radius: 4px; padding: 2px 5px;
  transition: color .1s, background .1s;
}
.pp-close-btn:hover { color: #374151; background: #f3f4f6; }

.pp-thumb-wrap {
  width: 100%; max-height: 160px; overflow: hidden;
  border-radius: 6px; margin-bottom: 10px;
  background: #f3f4f6; display: flex; align-items: center;
  justify-content: center; min-height: 60px;
}
.pp-thumb { max-width: 100%; max-height: 160px; object-fit: contain; border-radius: 6px; }
.pp-img-preview {
  display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain;
  border-radius: 4px; cursor: default;
}
.pp-slide-canvas-wrap canvas { display: block; }

.pp2-head { padding: 10px 16px 8px; border-bottom: 1px solid var(--clr-border, #e5e7eb); }
.pp2-name-row { padding: 0 2px; }
.pp2-name {
  font-size: 13px; font-weight: 700; color: var(--clr-text, #111827);
  word-break: break-all; line-height: 1.4; padding: 3px 5px;
}
.pp2-type-lbl { font-size: 11px; color: #9ca3af; padding: 2px 5px 0; }

.pp-sec { padding: 8px 0 4px; border-bottom: 1px solid var(--clr-border-light, #f3f4f6); }
.pp-sec:last-of-type { border-bottom: none; }
.pp-ttl {
  font-size: 10px; font-weight: 700; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .7px;
  padding: 0 16px 5px; display: flex; align-items: center; gap: 6px;
}
.pp-ttl::before {
  content: ''; width: 3px; height: 10px;
  background: var(--clr-primary, #2563eb);
  border-radius: 9999px; flex-shrink: 0;
}

.pp-slides { border-bottom: 1px solid var(--clr-border, #e5e7eb); }
.pp-slide-canvas-wrap {
  padding: 10px 12px; min-height: 60px; display: flex;
  align-items: center; justify-content: center; background: #f9fafb;
}
.pp-slide-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 7px 12px 10px;
  border-top: 1px solid var(--clr-border, #e5e7eb);
}
.pp-slide-btn {
  background: none; border: 1.5px solid #e5e7eb; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: 11px;
  color: #6b7280; display: flex; align-items: center; justify-content: center;
  transition: background .12s; font-family: inherit;
}
.pp-slide-btn:hover:not(:disabled) { background: #f3f4f6; color: var(--clr-primary, #2563eb); }
.pp-slide-btn:disabled { opacity: .35; cursor: default; }
.pp-slide-info { font-size: 12px; color: #6b7280; font-weight: 600; min-width: 54px; text-align: center; }
.pp-slides-loading {
  color: #9ca3af; font-size: 12px; padding: 14px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.pp-actions {
  padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; margin-top: auto;
}
.pp-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; border-radius: 6px; border: 1.5px solid #e5e7eb;
  background: none; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; color: #6b7280; transition: background .12s, color .12s, border-color .12s;
}
.pp-btn:hover { background: #f9fafb; color: #374151; border-color: #d1d5db; }
.pp-btn.primary { background: var(--clr-primary, #2563eb); color: #fff; border-color: var(--clr-primary, #2563eb); }
.pp-btn.primary:hover { opacity: .9; }
.pp-btn.danger { color: #dc2626; border-color: #fecaca; }
.pp-btn.danger:hover { background: #fff5f5; }

.pp2-info-row { display: flex; align-items: flex-start; padding: 3px 16px; gap: 8px; }
.pp2-info-k { font-size: 10.5px; color: #9ca3af; width: 44px; flex-shrink: 0; padding-top: 1px; }
.pp2-info-v { font-size: 12px; color: var(--clr-text, #374151); word-break: break-all; line-height: 1.4; flex: 1; min-width: 0; }

/* ── 표준 선택 상자(select) — 크롬/사파리 등 브라우저별 네이티브 렌더링 차이(특히 macOS Safari의
   화살표 스타일)를 없애고 동일한 모양으로 통일한다. 네이티브 화살표를 감추고(appearance:none)
   동일한 SVG 셰브론을 배경 이미지로 직접 그린다. ── */
select.std-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 30px;
}
select.std-select::-ms-expand { display: none; }

@media (prefers-color-scheme: dark) {
  .pp { background: var(--clr-surface, #1e2024); border-left-color: var(--clr-border, #374151); }
  .pp-close-btn:hover { background: #374151; color: #f3f4f6; }
  .pp-thumb-wrap { background: #2d3039; }
  .pp2-head { border-bottom-color: var(--clr-border, #374151); }
  .pp2-name { color: var(--clr-text, #f1f5f9); }
  .pp-slide-canvas-wrap { background: #23272e; }
  .pp2-info-v { color: var(--clr-text, #d1d5db); }
}

/* ── storage sub-sidebar v2 ── */
.st-sb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: .8125rem;
  color: var(--clr-text, #374151);
  cursor: pointer;
  transition: background .1s;
  border-left: 3px solid transparent;
}
.st-sb-link:hover {
  background: var(--nav-hover-bg, #f3f4f6);
}
.st-sb-link.active {
  color: var(--clr-primary, #2563eb);
  border-left-color: var(--clr-primary, #2563eb);
  background: var(--clr-primary-bg, #eff6ff);
  font-weight: 600;
}
#stLinkTrash:hover, #stLinkTrash.active {
  color: #dc2626;
  border-left-color: #dc2626;
  background: #fff5f5;
}

/* 사용량 바 */
.st-usage-wrap {
  margin-top: auto;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--clr-border, #e5e7eb);
}
.st-usage-label {
  display: flex;
  align-items: center;
  font-size: 11px;
  margin-bottom: 5px;
  color: var(--clr-text, #374151);
}
.st-usage-bar {
  height: 5px;
  background: var(--clr-border, #e5e7eb);
  border-radius: 9999px;
  overflow: hidden;
}
.st-usage-fill {
  height: 100%;
  background: var(--clr-primary, #2563eb);
  border-radius: 9999px;
  transition: width .4s;
}

/* ══════════════════════════════════════════════════════════
   저장소 리디자인: 툴바 / 검색 / 필터 / 뷰 / 업로드모달
══════════════════════════════════════════════════════════ */

/* ── 툴바 ── */
#storage-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

/* ── 검색창 ── */
#sub-main-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: #f5f6f8;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  flex: 1;
  min-width: 160px;
  max-width: 360px;
  transition: box-shadow .15s, background .15s;
}
#sub-main-search:focus-within {
  box-shadow: 0 0 0 2px #c5d6f7;
  background: #fff;
  border-color: #1a73e8;
}
#sub-main-search svg { flex-shrink: 0; color: #aaa; transition: color .15s; }
#sub-main-search:focus-within svg { color: #1a73e8; }
#sub-main-search input {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13px; color: #333; min-width: 0;
}
#sub-main-search input::placeholder { color: #aaa; }
.search-clear-btn {
  display: none; background: none; border: none; cursor: pointer;
  color: #aaa; font-size: 16px; line-height: 1; padding: 0; flex-shrink: 0;
}
.search-clear-btn:hover { color: #555; }
.search-clear-btn.visible { display: block; }

/* ── 툴바 구분선 ── */
.toolbar-divider {
  width: 1px; height: 20px; background: #e8e8e8; flex-shrink: 0; margin: 0 2px;
}

/* ── 정렬 드롭다운 ── */
.sort-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
  padding: 4px 0;
  min-width: 130px;
  z-index: 900;
  display: none;
}
.sort-dropdown.open { display: block; }
.sort-dropdown-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 13px; color: #333; cursor: pointer;
  transition: background .1s;
}
.sort-dropdown-item:hover { background: #f5f7fa; }
.sort-dropdown-item.active { color: #1a73e8; font-weight: 500; }
.sort-dropdown-item.active::after {
  content: ''; width: 6px; height: 10px;
  border-right: 2px solid #1a73e8; border-bottom: 2px solid #1a73e8;
  transform: rotate(45deg); display: inline-block; margin-top: -2px;
}

/* ── 필터 칩 행 ── */
#storage-filter-row {
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
  flex-shrink: 0;
}
#storage-filter-row.open { display: flex; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border: 1px solid #e0e0e0; border-radius: 12px;
  background: #fff; font-size: 12px; color: #555; cursor: pointer;
  transition: border-color .12s, background .12s, color .12s; user-select: none;
}
.filter-chip:hover { border-color: #1a73e8; color: #1a73e8; }
.filter-chip.active { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: 500; }

/* ── 즐겨찾기 별 버튼 ── */
.fav-star-btn {
  background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; color: #94a3b8;
  transition: color .15s, background .15s;
  display: flex; align-items: center; flex-shrink: 0;
}
.fav-star-btn:hover { background: #f1f3f6; color: #f59e0b; }
.fav-star-btn.active { color: #f59e0b; }
.fav-star-btn.active svg { fill: #fbbf24; stroke: #f59e0b; }

/* ── 저장소 헤더 (notes-editor-toolbar 스타일) ── */
.st-main-header {
  min-height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px !important;
  border-bottom: 1px solid var(--clr-border) !important;
  background: #fff;
  flex-shrink: 0;
}
.main-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.st-bc-current { cursor: default; }

/* ── 목록 뷰 테이블 ── */
.st-list-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.st-list-table thead th {
  padding: 8px 12px; text-align: left; font-size: 11px; font-weight: 600;
  color: #9ca3af; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #f0f0f0; background: #fafbfc;
  position: sticky; top: 0; z-index: 1;
}
.st-list-row { cursor: pointer; transition: background .1s; }
.st-list-row:hover { background: #f7f9fc; }
.st-list-row td { padding: 8px 12px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.st-list-row.st-selected { background: #eff6ff; }
.st-list-cb { width: 32px; }
.st-list-check { cursor: pointer; }
.st-list-name-cell { display: flex; align-items: center; gap: 8px; }
.st-list-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; }
.st-list-icon svg { width: 18px !important; height: 18px !important; }
.st-list-name { color: #1e293b; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 400px; }
.st-list-date { color: #9ca3af; font-size: 12px; white-space: nowrap; }
.st-list-size { color: #9ca3af; font-size: 12px; text-align: right; }
.st-list-acts { white-space: nowrap; text-align: right; }
.st-list-acts button { opacity: 0; transition: opacity .12s; }
.st-list-row:hover .st-list-acts button { opacity: 1; }

/* ── 업로드 모달 폴더 트리 ── */
.stut-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; font-size: 13px; color: #333; cursor: pointer;
  border-radius: 6px; transition: background .1s;
}
.stut-item:hover { background: #f0f6ff; }
.stut-item.active { background: #e8f0fe; color: #1a73e8; font-weight: 500; }

/* ── DnD 오버레이 ── */
#stDndOverlay { display: none; }
#stDndOverlay.active { display: flex; }

/* ── 저장소 breadcrumb (이전 .st-breadcrumb → #stBreadcrumb) ── */
#stBreadcrumb .st-bc-item { color: #1a73e8; cursor: pointer; font-size: 12px; }
#stBreadcrumb .st-bc-item:hover { text-decoration: underline; }
#stBreadcrumb .st-bc-sep { color: #9ca3af; }

/* dark mode */
@media (prefers-color-scheme: dark) {
  #storage-toolbar { background: var(--clr-surface, #1e2130); border-bottom-color: var(--clr-border, #2d3148); }
  #sub-main-search { background: #252839; border-color: #3a3f58; }
  #sub-main-search input { color: #e2e8f0; }
  .sort-dropdown { background: #1e2130; border-color: #3a3f58; }
  .sort-dropdown-item { color: #e2e8f0; }
  .sort-dropdown-item:hover { background: #252839; }
  #storage-filter-row { background: #1a1d2e; border-bottom-color: #2d3148; }
  .filter-chip { background: #252839; border-color: #3a3f58; color: #9ca3af; }
  .filter-chip:hover { border-color: #1a73e8; color: #93c5fd; }
  .filter-chip.active { background: #1a73e8; }
  .st-main-header { background: var(--clr-surface, #1e2130); }
  .st-list-table thead th { background: #1a1d2e; border-bottom-color: #2d3148; }
  .st-list-row:hover { background: #252839; }
  .st-list-row.st-selected { background: #1e3a5f; }
  .st-list-row td { border-bottom-color: #2d3148; }
  .st-list-name { color: #e2e8f0; }
  .stut-item:hover { background: #252839; }
  .stut-item.active { background: #1e3a5f; }
}

/* ── 저장소 즐겨찾기 star 버튼 (아이템 내) ── */
.st-fav-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
  z-index: 2;
}
.st-item:hover .st-fav-btn,
.st-fav-btn.active { opacity: 1; }
.st-fav-btn:hover polygon { fill: #f59e0b !important; stroke: #f59e0b !important; }

/* 목록뷰 star */
.st-list-name-cell .st-fav-btn {
  position: static;
  opacity: 0;
  flex-shrink: 0;
  margin-right: 2px;
}
.st-list-row:hover .st-list-name-cell .st-fav-btn,
.st-list-name-cell .st-fav-btn.active { opacity: 1; }

/* 업로드 모달 basic-select 화살표 */
#stUploadFolderSel {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px 13px;
  transition: border-color .15s, box-shadow .15s;
}
#stUploadFolderSel:focus {
  outline: none;
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 2px rgba(26,115,232,.18);
}

/* ── Timeline (design/timeline 페이지) ─────────────────────────────── */
.tl-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tl-sender-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.tl-sender-info { flex: 1; min-width: 0; }
.tl-sender-name { font-size: 13px; font-weight: 700; color: #111; }
.tl-sender-email { font-size: 11px; color: #888; margin-top: 1px; }
.tl-count { font-size: 11px; color: #aaa; white-space: nowrap; flex-shrink: 0; }

.tl-body { padding-bottom: 8px; }
.tl-month-group { margin-bottom: 6px; }
.tl-month-label {
  font-size: 11px;
  font-weight: 600;
  color: #bbb;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-month-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #eee;
}

.tl-items {
  position: relative;
  padding-left: 22px;
  padding-bottom: 6px;
}
.tl-items::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: #e8ecf0;
  border-radius: 1px;
}

.tl-item {
  position: relative;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  margin-bottom: 2px;
}
.tl-item:hover { background: #f5f7fa; }
.tl-item--active { background: #e8f0fe !important; }
.tl-item:last-child { margin-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 13px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid #fff;
}
.tl-item.tl-received::before { background: #1a73e8; box-shadow: 0 0 0 1.5px #1a73e8; }
.tl-item.tl-sent::before     { background: #10b981; box-shadow: 0 0 0 1.5px #10b981; }

.tl-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.tl-dir-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.tl-received .tl-dir-badge { background: #e8f0fe; color: #1a73e8; }
.tl-sent     .tl-dir-badge { background: #d1fae5; color: #059669; }

.tl-item-date {
  font-size: 11px;
  color: #bbb;
  margin-left: auto;
  flex-shrink: 0;
}
.tl-item-subject {
  font-size: 12px;
  font-weight: 600;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.tl-item-preview {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 폴더 트리 (sub-sidebar) ── */
.folder-tree-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; cursor: pointer;
  color: var(--clr-text-sub, #94a3b8);
  transition: transform 0.15s;
  margin-right: -2px;
}
.folder-tree-toggle:hover { color: var(--clr-primary, #1a73e8); }
.folder-tree-toggle-placeholder { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; margin-right: -2px; }
.folder-children { list-style: none; margin: 0; padding: 0; }
.sub-sidebar-folder-item.has-children { position: relative; }
.folder-src-badge {
  font-size: 9px; font-weight: 700; border-radius: 3px; padding: 0 3px;
  line-height: 14px; flex-shrink: 0; margin-left: 2px;
}
.folder-src-badge.local { background: #dbeafe; color: #1e40af; }
.folder-src-badge.sm    { background: #f1f5f9; color: #64748b; }

/* ── 폴더 공유 모달 (mail/notes/tasks 공용) ── */
.mfs-share-list{min-height:40px;margin-bottom:14px}
.mfs-share-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--clr-border,#e5e7eb)}
.mfs-share-info{flex:1;min-width:0}
.mfs-share-name{display:block;font-size:13px;font-weight:600;color:var(--clr-text,#1e293b)}
.mfs-share-email{display:block;font-size:11px;color:var(--clr-text-sub,#64748b)}
.mfs-share-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mfs-sel-wrap{position:relative;display:inline-flex;align-items:center}
.mfs-perm-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:5px 28px 5px 10px;font-size:12px;border:1px solid var(--clr-border,#e2e8f0);border-radius:6px;background:var(--clr-bg-card,#fff);color:var(--clr-text,#1e293b);cursor:pointer;outline:none;min-width:90px}
.mfs-sel-arrow{position:absolute;right:8px;pointer-events:none;font-size:10px;color:var(--clr-text-sub,#64748b)}
.mfs-remove-btn{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:13px;padding:4px 6px;border-radius:4px;line-height:1}
.mfs-remove-btn:hover{color:#dc2626;background:#fee2e2}
.mfs-add-row{display:none;align-items:center;gap:8px;margin-top:8px}
.mfs-drop-results{background:var(--clr-bg-card,#fff);border:1px solid var(--clr-border,#e5e7eb);border-radius:8px;margin-top:4px;max-height:260px;overflow-y:auto}
.mfs-sub-row{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:var(--clr-text-sub,#64748b);cursor:pointer}
.mfs-sub-row input[type=checkbox]{cursor:pointer;accent-color:var(--clr-primary,#1a73e8);width:14px;height:14px}
.mfs-ri-section{font-size:10px;font-weight:700;color:var(--clr-text-sub,#94a3b8);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px 3px;background:var(--clr-bg,#f8fafc)}
.mfs-result-item{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;font-size:12px;transition:background .1s}
.mfs-result-item:hover{background:var(--clr-primary-bg,#eff6ff)}
.mfs-ri-avatar{width:28px;height:28px;border-radius:50%;background:var(--clr-primary,#1a73e8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.mfs-ri-avatar-group{background:#7c3aed}
.mfs-ri-info{flex:1;min-width:0}
.mfs-ri-name{display:block;font-weight:600;color:var(--clr-text,#1e293b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfs-ri-email{display:block;font-size:11px;color:var(--clr-text-sub,#64748b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mfs-ri-badge{font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;background:#ede9fe;color:#7c3aed;flex-shrink:0;white-space:nowrap}
.mfs-ri-empty{font-size:11px;color:var(--clr-text-sub,#9ca3af);padding:10px 12px;text-align:center}