/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Variables ── */
:root {
  --fs-ui: 12px;
  --fs-sm: 11px;
  --fs-lg: 13px;
  --accent:         #1a73e8;
  --accent-hover:   #1557b0;
  --nav-active-bg:  var(--nav-active-bg);
}

html[lang="en"] {
  --fs-ui: 13px;
  --fs-sm: 11px;
  --fs-lg: 14px;
}

html, body {
  height: 100%;
  font-family: Helvetica, 'Malgun Gothic', '맑은 고딕', Arial, sans-serif;
  font-size: var(--fs-ui);
  color: #333;
  background: #f5f5f5;
}

/* ── App grid ── */
#app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 160px 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar main"
    "footer  footer";
  height: 100vh;
}

/* ── Top bar ── */
#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #ddd;
  height: 48px;
  padding: 0 16px;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 145px;
  font-weight: 600;
  font-size: 15px;
}

.topbar__menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topbar__menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: #333;
  border-radius: 1px;
}

.topbar__header {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
}

/* ── Sidebar ── */
#sidebar {
  grid-area: sidebar;
  background: #fff;
  border-right: 1px solid #ddd;
  padding: 16px 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#sidebar nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sidebar__nav {
  list-style: none;
  flex: 1;
}

.sidebar__nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #444;
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: background 0.15s;
  font-size: 13px;
}

.sidebar__nav li a svg { flex-shrink: 0; opacity: 0.7; }
.sidebar__nav li a.active svg { opacity: 1; }

.sidebar__nav li a:hover { background: #f0f0f0; }

.sidebar__nav li a.active {
  background: var(--nav-active-bg);
  color: #1a73e8;
  font-weight: 500;
}


/* ── Sidebar 서브메뉴 ── */
.sidebar__nav li.has-sub > .sidebar__sub {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.22s ease-out, opacity 0.18s ease;
}
.sidebar__nav li.has-sub.open > .sidebar__sub {
  max-height: 200px;
  opacity: 1;
}
.sidebar__nav li.has-sub > .sidebar__sub li a {
  padding: 7px 16px 7px 38px;
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: background 0.15s;
}
.sidebar__nav li.has-sub > .sidebar__sub li a:hover {
  background: #f0f0f0;
  color: #333;
}
.sidebar__nav li.has-sub > .sidebar__sub li a.active {
  background: var(--nav-active-bg);
  color: #1a73e8;
  font-weight: 500;
}
.sidebar__nav li.has-sub > .sidebar__sub li a svg { opacity: 0.55; }
.sidebar__nav li.has-sub > .sidebar__sub li a.active svg,
.sidebar__nav li.has-sub > .sidebar__sub li a:hover svg { opacity: 1; }
.sidebar__bottom {
  list-style: none;
  border-top: 1px solid #eee;
  padding-top: 8px;
  margin-top: 8px;
}

.sidebar__bottom li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #444;
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: background 0.15s;
  font-size: 13px;
}

.sidebar__bottom li a svg { flex-shrink: 0; opacity: 0.7; }
.sidebar__bottom li a:hover { background: #f0f0f0; }

/* ── Nav Section (접힘/펼침) ── */
.nav-section + .nav-section {
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 4px;
}

.nav-section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 5px;
  font-size: 11px;
  font-weight: 700;
  color: #3e3e3e;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}

.nav-section-title:hover { color: #555; }
.nav-section-title-text { flex: 1; }

.nav-chevron {
  flex-shrink: 0;
  color: #ccc;
  transition: transform 0.22s ease;
}

.nav-section.collapsed .nav-chevron { transform: rotate(-90deg); }

.nav-section-body {
  overflow: hidden;
  max-height: 600px;
  opacity: 1;
  transition: max-height 0.26s ease-out, opacity 0.2s ease;
}

.nav-section.collapsed .nav-section-body {
  max-height: 0;
  opacity: 0;
}

#sidebar nav > .nav-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#sidebar nav > .nav-section > .nav-section-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-height: 10000px;
  overflow-y: auto;
  transition: opacity 0.2s ease;
}

#sidebar nav > .nav-section.collapsed > .nav-section-body {
  flex: 0 0 0px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

#sidebar nav > .nav-section > .nav-section-body > .sidebar__nav { flex: 1; }

/* ── Main: 기본값 = sub-sidebar + sub-main split ── */
#main {
  grid-area: main;
  background: #fafafa;
  display: flex;
  overflow: hidden;
}

/* ── Footer ── */
#footer {
  grid-area: footer;
  background: #1e2a3a;
  border-top: none;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.3px;
}

/* ── Sidebar collapsed ── */
#app.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

#app.sidebar-collapsed #sidebar {
  overflow: hidden;
  padding: 0;
}

/* ── Topbar: nav + action buttons ── */
.topbar__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}

.topbar__nav a {
  display: flex;
  align-items: center;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.topbar__nav a:hover  { background: #f0f0f0; color: #333; }
.topbar__nav a.active { background: var(--nav-active-bg); color: #1a73e8; }

/* ── nav-in-header 모드: 사이드바 → 상단 바 ── */
body.nav-in-header .topbar__nav       { display: flex; }
body.nav-in-header .topbar__brand     { min-width: auto; }
body.nav-in-header #sidebar           { display: none; }
body.nav-in-header #app {
  grid-template-columns: 1fr;
  grid-template-areas: "topbar" "main" "footer";
}
body.nav-in-header .topbar__nav a     { padding: 5px 8px; gap: 0; border-radius: 7px; position: relative; }
body.nav-in-header .topbar__nav a span { display: none; }
body.nav-in-header .topbar__nav a svg  { opacity: 0.75; }
body.nav-in-header .topbar__nav a:hover svg,
body.nav-in-header .topbar__nav a.active svg { opacity: 1; }
body.nav-in-header .topbar__actions  { display: flex; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.topbar__action-btn {
  width: 30px; height: 30px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #666;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  font-size: 12px;
}

.topbar__action-btn:hover { background: #f0f0f0; color: #333; }

.topbar__user-btn {
  width: 30px; height: 30px;
  border: none;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.12s;
  text-decoration: none;
}

.topbar__user-btn:hover { background: #1557b0; }

/* ── Main content area ── */
.main-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}

.main-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* ── Login page ── */
body.page-login {
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1c2536;
}

.login-logo-text em {
  font-style: normal;
  color: #667eea;
}

.login-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #334155;
  text-align: center;
  margin-bottom: 24px;
}

.login-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 5px;
}

.login-input {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 16px;
}

.login-input:focus { border-color: #667eea; }

.login-btn {
  width: 100%;
  background: #1c2536;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}

.login-btn:hover { background: #2d3a4f; }

.login-error {
  background: #fef2f2;
  color: #dc2626;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .82rem;
  margin-bottom: 16px;
}

/* ─────────────────────────────────────────────
   Sub-sidebar layout  (extracted from webmail.smartertools.co.kr/style.css)
   ───────────────────────────────────────────── */

/* ── Sub-sidebar ── */
#sub-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}

#ssResizer {
  position: absolute;
  top: 0;
  right: -3px;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 30;
  border-radius: 0;
  transition: background 0.12s;
}
#ssResizer:hover,
#ssResizer.dragging {
  background: rgba(26, 115, 232, 0.18);
}

.st-usage {
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid #eee;
}
.st-usage-bar-wrap {
  height: 5px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.st-usage-bar {
  height: 100%;
  background: #1a73e8;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.st-usage-bar.warn { background: #f59e0b; }
.st-usage-bar.danger { background: #ef4444; }
.st-usage-text {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
}

.sub-sidebar__new-btn {
  margin: 12px;
  padding: 8px 16px;
  background: var(--btn-upload-bg, #1e3a5f);
  color: var(--btn-upload-color, #fff);
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}

.sub-sidebar__new-btn:hover { filter: brightness(0.88); }

.sub-sidebar__nav {
  list-style: none;
  padding: 4px 0;
}

.sub-sidebar__nav li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  color: #444;
  text-decoration: none;
  transition: background 0.15s;
  font-size: 13px;
}

.sub-sidebar__nav li a svg { flex-shrink: 0; opacity: 0.65; }
.sub-sidebar__nav li a.active svg,
.sub-sidebar__nav li a:hover svg { opacity: 1; }

.sub-sidebar__nav li a:hover { background: #f0f0f0; }

.sub-sidebar__nav li a.active {
  background: var(--nav-active-bg);
  color: #1a73e8;
  font-weight: 500;
}

/* 드롭 대상 폴더 강조 */
.sub-sidebar__nav li.drop-over > a {
  background: var(--nav-active-bg) !important;
  color: #1a73e8 !important;
  outline: 2px dashed #1a73e8;
  outline-offset: -3px;
  border-radius: 6px;
}

/* 오른쪽 클릭 강조 */
.sub-sidebar__nav li.ctx-active > a {
  background: var(--nav-active-bg);
  color: #1a73e8;
}

/* 폴더 추가 버튼 */
.sub-sidebar__folder-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 24px);
  margin: 4px 12px 0;
  padding: 7px 10px;
  background: none;
  border: 1px dashed #ddd;
  border-radius: 6px;
  font-size: 12px;
  color: #aaa;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: left;
}

.sub-sidebar__folder-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
  background: #f0f5ff;
}

/* 폴더 트리 +/- 토글 */
.ft-toggle-ph {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ft-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sub-main ── */
#sub-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* ── sub-main-search (공용) ── */
#sub-main-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f1f3f4;
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 0;
  transition: box-shadow 0.15s;
}

#sub-main-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #333;
}

#sub-main-search input::placeholder { color: #aaa; }

/* ── sub-main-toolbar (공용) ── */
#sub-main-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 16px;
}
/* ── Login: 자동저장 체크박스 ── */
.login-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  cursor: pointer;
  user-select: none;
}

.login-remember input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #667eea;
  cursor: pointer;
  flex-shrink: 0;
}

.login-remember span {
  font-size: .82rem;
  color: #64748b;
}
/* ── Design Guide ── */
.guide-section {
  display: none;
  flex-direction: column;
  gap: 24px;
}
.guide-section.active { display: flex; }

.guide-title {
  font-size: 17px;
  font-weight: 700;
  color: #111;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--nav-active-bg);
}

.guide-desc {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
}

.guide-desc strong { color: #1a73e8; }

.guide-rule {
  background: #1e2a3a;
  border-radius: 8px;
  overflow: hidden;
}

.guide-rule-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  padding: 8px 16px 6px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.guide-rule pre {
  margin: 0;
  padding: 14px 16px;
  font-family: 'Consolas', 'Fira Code', monospace;
  font-size: 12px;
  color: #e2e8f0;
  line-height: 1.65;
  overflow-x: auto;
  white-space: pre;
}

.guide-rule pre .sel  { color: #93c5fd; }
.guide-rule pre .prop { color: #86efac; }
.guide-rule pre .val  { color: #fde68a; }
.guide-rule pre .cmt  { color: #64748b; font-style: italic; }

.guide-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.guide-tag--layout  { background: var(--nav-active-bg); color: #1a73e8; }
.guide-tag--base    { background: #f0fdf4; color: #16a34a; }
.guide-tag--component { background: #fef3c7; color: #d97706; }

.guide-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.guide-box {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  background: #f8fafc;
}

.guide-box-title {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-var-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.guide-var-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 6px;
}

.guide-var-name  { font-size: 11px; font-family: monospace; color: #1a73e8; }
.guide-var-value { font-size: 12px; color: #333; }

.guide-color-swatch {
  width: 100%;
  height: 28px;
  border-radius: 4px;
  margin-bottom: 4px;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ─────────────────────────────────────────────────────────────
   Settings page  (extracted from webmail.smartertools.co.kr/style.css)
   ───────────────────────────────────────────────────────────── */

/* ── Settings nav (sub-sidebar) ── */
.basic-nav { padding: 12px 0; }

.basic-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: #444;
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s;
  border-radius: 0;
}

.basic-nav li a:hover  { background: #f0f0f0; }

.basic-nav li a.active {
  background: var(--nav-active-bg);
  color: #1a73e8;
  font-weight: 600;
}

.basic-nav li a svg { flex-shrink: 0; opacity: 0.6; }
.basic-nav li a.active svg { opacity: 1; }

.basic-nav-divider {
  height: 1px;
  background: #eee;
  margin: 8px 14px;
}

/* ── Section ── */
.basic-section { margin-bottom: 22px; }

.basic-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* ── Rows card ── */
.basic-rows {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: visible;
}

.basic-rows > .basic-row:first-child { border-radius: 11px 11px 0 0; }
.basic-rows > .basic-row:last-child  { border-radius: 0 0 11px 11px; }
.basic-rows > .basic-row:only-child  { border-radius: 11px; }

.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; min-width: 0; }

.basic-row-title {
  font-size: 13px;
  font-weight: 500;
  color: #111;
}

.basic-row-desc {
  font-size: 11px;
  color: #bbb;
  margin-top: 2px;
  line-height: 1.4;
}

.basic-row-control {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Toggle switch ── */
.basic-toggle {
  position: relative;
  width: 38px; height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.basic-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }

.basic-toggle-track {
  position: absolute;
  inset: 0;
  background: #ddd;
  border-radius: 22px;
  transition: background 0.2s;
}

.basic-toggle-thumb {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px; left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.basic-toggle input:checked ~ .basic-toggle-track { background: #1a73e8; }
.basic-toggle input:checked ~ .basic-toggle-thumb { transform: translateX(16px); }

/* ── Button CSS Variables (controlled via /domains/theme) ── */
:root {
  --btn-radius:             7px;
  --btn-font-size:          13px;
  --btn-pad-y:              7px;
  --btn-pad-x:              14px;
  --btn-primary-bg:         #1a73e8;
  --btn-primary-color:      #fff;
  --btn-primary-border:     #1a73e8;
  --btn-primary-hover-bg:   #1557b0;
  --btn-primary-hover-bd:   #1557b0;
  --btn-secondary-bg:       #fff;
  --btn-secondary-color:    #555;
  --btn-secondary-border:   #ddd;
  --btn-secondary-hover-bg: #f5f7fa;
  --btn-secondary-hover-bd: #bbb;
}

/* ── Buttons ── */
.basic-btn {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  font-size: var(--btn-font-size);
  color: var(--btn-secondary-color);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}

.basic-btn:hover           { background: var(--btn-secondary-hover-bg); }
.basic-btn.danger          { color: #dc2626; border-color: #fca5a5; }
.basic-btn.danger:hover    { background: #fee2e2; }
.basic-btn.primary         { background: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: var(--btn-primary-border); }
.basic-btn.primary:hover   { background: var(--btn-primary-hover-bg); }


/* ── Badge ── */
.basic-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
  flex-shrink: 0;
}

.basic-badge.inactive     { background: #f5f5f5; color: #999; }
.basic-badge.active-badge { background: #dcfce7; color: #16a34a; }
.basic-badge.warn         { background: #fef3c7; color: #d97706; }

/* ── Select ── */
.basic-select {
  padding: 7px 30px 7px 10px;
  border: 1px solid #ddd;
  border-radius: 7px;
  background: #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='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  cursor: pointer;
  outline: none;
  min-width: 150px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s;
}

.basic-select:focus { border-color: #1a73e8; outline: none; }
.basic-select:disabled { background: #f5f5f5; color: #bbb; cursor: not-allowed; }

/* ── Text input (settings row용 보완) ── */
.basic-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e2e5ea;
  border-radius: 7px;
  font-size: 13px;
  color: #333;
  outline: none;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.basic-input:focus { border-color: #1a73e8; box-shadow: 0 0 0 2px #c5d6f7; }
.basic-input::placeholder  { color: #bbb; }

/* ── Toast / save feedback ── */
.basic-toast {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  font-size: 12px;
  color: #15803d;
  font-weight: 500;
  margin-bottom: 16px;
}

.basic-toast.show  { display: flex; }
.basic-toast.error { background: #fef2f2; border-color: #fecaca; color: #dc2626; }

/* ── Danger zone ── */
.basic-rows.danger-zone             { border-color: #fca5a5; }
.basic-rows.danger-zone .basic-row { border-bottom-color: #fef2f2; }
/* ── Patcher section switch ── */
.patcher-sec          { display: none; }
.patcher-sec.active   { display: block; }

/* ── Page Tab Bar (from webmail mail-list-tab) ── */
.page-tab-bar {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 20px;
}
.page-tab {
  padding: 9px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--fs-ui);
  color: #888;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.page-tab.active {
  color: #1a73e8;
  border-bottom-color: #1a73e8;
  font-weight: 600;
}
.page-tab:hover:not(.active) { color: #555; }
.page-tab-panel              { display: none; }
.page-tab-panel.active       { display: block; }

/* ── File Upload (from webmail reply-attach / mail-attachment) ── */

/* 드롭존 */
.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; }

/* 업로드된 파일 칩 (webmail .reply-attach-chip) */
.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; }

/* 칩 목록 (webmail .mail-attachments-list) */
.file-chip-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  min-height: 0;
}

/* 파일 목록 행 (webmail .mail-attachment-item) */
.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,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; }

/* ── Search Wrap (from webmail apv-search-wrap) ── */
.search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f1f3f4;
  border-radius: 8px;
  padding: 7px 10px;
  border: 1.5px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.search-wrap:focus-within {
  background: #fff;
  border-color: #1a73e8;
}
.search-wrap svg { flex-shrink: 0; color: #aaa; }
.search-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: #333;
  min-width: 0;
}
.search-wrap input::placeholder { color: #aaa; }
.search-wrap .search-clear {
  background: none;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  display: none;
}
.search-wrap .search-clear.visible { display: block; }
.search-wrap .search-clear:hover   { color: #555; }

/* 검색 결과 없음 */
.search-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 60px 20px;
  color: #bbb;
  font-size: 13px;
}
.search-empty.show { display: flex; }

/* ── Basic Table (from smartertools.co.kr .product-detail-table) ── */
.basic-table {
  border-collapse: collapse;           /* product-detail-table */
  font-size: var(--fs-ui);             /* product-detail-table: 12px */
  width: 100%;                         /* product-detail-table */
  margin: 14px 0;                      /* product-detail-table */
}


/* th */
.basic-table th {
  border: 1px solid #cbcbcb;           /* product-detail-table th */
  height: 32px;                        /* product-detail-table th: 30px + 여백 */
  padding: 0 12px;                     /* product-detail-table th: padding-left 10px */
  text-align: left;                    /* product-detail-table th */
  font-weight: 600;                    /* product-detail-table th */
  vertical-align: middle;
  white-space: nowrap;
}

/* td */
.basic-table td {
  border: 1px solid #cbcbcb;           /* product-detail-table td */
  height: 32px;                        /* product-detail-table td: 30px + 여백 */
  padding: 0 12px;                     /* product-detail-table td: padding-left 10px */
  vertical-align: middle;             /* product-detail-table td */
}

/* tbody tr — 기본 행 */
.basic-table tbody tr {
  transition: background 0.1s;
}

/* tbody tr:hover */
.basic-table tbody tr:hover td {
  background: #f5f8ff;
}

/* tbody tr:nth-child(even) — 기본은 흰 배경, zebra 변형에서만 적용 */
.basic-table--zebra tbody tr:nth-child(even) td {
  background: #f9fafb;
}
.basic-table--zebra tbody tr:nth-child(even):hover td {
  background: #f0f5ff;
}

/* tbody tr:first-child — thead 없이 th를 첫 행에 쓸 때 */
.basic-table tbody tr:first-child th {
  border-top: 1px solid #cbcbcb;
}

/* tbody tr:last-child */
.basic-table tbody tr:last-child td,
.basic-table tbody tr:last-child th {
  border-bottom: 1px solid #cbcbcb;
}

/* 변형: compact */
.basic-table--compact th,
.basic-table--compact td {
  height: 26px;
  padding: 0 8px;
}

/* 변형: bordered (외곽 테두리) */
.basic-table--bordered {
  border: 1px solid #cbcbcb;
}

/* 변형: fixed layout (열 너비 고정) */
.basic-table--fixed {
  table-layout: fixed;
}
.basic-table--fixed td,
.basic-table--fixed th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Basic File Input (from webmail .modal-input / .sender-add-input) ── */
.basic-file-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.basic-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #fff;
  border: 1.5px solid #e0e0e0;   /* sender-add-input */
  border-radius: 8px;             /* sender-add-input */
  font-size: var(--fs-ui);
  color: #333;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.basic-file-btn:hover {
  border-color: #1a73e8;
  background: #f0f5ff;
}
.basic-file-btn input[type="file"] { display: none; }

.basic-file-name {
  flex: 1;
  min-width: 0;
  padding: 7px 11px;              /* modal-input */
  border: 1px solid #ddd;         /* modal-input */
  border-radius: 7px;             /* modal-input */
  font-size: 13px;                /* modal-input */
  color: #bbb;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s; /* modal-input */
}
.basic-file-name.has-file { color: #333; }

.basic-field { margin-bottom: 16px; }
.basic-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}


/* ── Sub-nav 그룹 (한글 패치 하위 메뉴) ── */
.basic-nav-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 5px;
  font-size: 11px;
  font-weight: 700;
  color: #bbb;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: default;
  user-select: none;
}
.basic-nav-children {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.basic-nav-children li a {
  display: block;
  padding: 7px 14px 7px 36px;
  font-size: 13px;
  color: #555;
  text-decoration: none;
  border-radius: 0 6px 6px 0;
  transition: background 0.12s, color 0.12s;
}
.basic-nav-children li a:hover { background: #f5f7fb; color: #1a73e8; }
.basic-nav-children li a.active { background: var(--nav-active-bg); color: #1a73e8; font-weight: 600; }

/* ── SMPlus 추가 스타일 ── */

/* 통계 카드 그리드 */
.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 {
  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;
  text-decoration: none;
}

.panel-link:hover { text-decoration: underline; }

.panel-empty {
  padding: 32px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}

/* 데이터 테이블 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}

.data-table td {
  padding: 11px 18px;
  color: #374151;
  border-bottom: 1px solid #f5f5f5;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fafafa; }

/* 배지 */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.badge-green  { background: #dcfce7; color: #166534; }
.badge-gray   { background: #f3f4f6; color: #4b5563; }
.badge-red    { background: #fee2e2; color: #991b1b; }
.badge-blue   { background: #dbeafe; color: #1e40af; }

/* ── Settings page (webmail 스타일 동기화) ── */
.settings-section { margin-bottom: 22px; }
.settings-section-title { font-size: 11px; font-weight: 700; color: #aaa; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; padding: 0 2px; }
.settings-rows { background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: visible; }
.settings-rows > .settings-row:first-child  { border-radius: 11px 11px 0 0; }
.settings-rows > .settings-row:last-child   { border-radius: 0 0 11px 11px; }
.settings-rows > .settings-row:only-child   { border-radius: 11px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid #f5f5f5; gap: 20px; min-height: 52px; }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { flex: 1; min-width: 0; }
.settings-row-title { font-size: 13px; font-weight: 500; color: #111; }
.settings-row-desc { font-size: 11px; color: #bbb; margin-top: 2px; line-height: 1.4; }
.settings-row-control { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.settings-toggle { position: relative; width: 38px; height: 22px; flex-shrink: 0; cursor: pointer; }
.settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.settings-toggle-track { position: absolute; inset: 0; background: #ddd; border-radius: 22px; transition: background 0.2s; }
.settings-toggle-thumb { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.settings-toggle input:checked ~ .settings-toggle-track { background: #1a73e8; }
.settings-toggle input:checked ~ .settings-toggle-thumb { transform: translateX(16px); }
.settings-select { padding: 7px 30px 7px 10px; border: 1px solid #ddd; border-radius: 7px; background: #fff; font-size: 13px; color: #333; cursor: pointer; outline: none; min-width: 150px; 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=%23999 stroke-width=2%3E%3Cpolyline points=6 9 12 15 18 9/%3E%3C/svg%3E); background-repeat: no-repeat; background-position: right 9px center; }
.settings-select:focus { border-color: #1a73e8; outline: none; }
input[type=text].settings-select { background-image: none; padding-right: 10px; }

/* ── Settings footer bar (sticky save/cancel) ── */
.settings-footer-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0 16px;
  background: linear-gradient(to top, #fafafa 80%, transparent);
  z-index: 10;
}

/* ── Profile card ── */
.settings-profile-card { display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #eee;border-radius:12px;padding:20px 24px;margin-bottom:20px; }
.settings-avatar-wrap { position:relative;flex-shrink:0; }
.settings-avatar { width:64px;height:64px;border-radius:50%;background:#1a73e8;color:#fff;font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.settings-avatar-edit-btn { position:absolute;bottom:0;right:0;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #ddd;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555; }
.settings-avatar-edit-btn:hover { background:#f0f0f0; }
.settings-profile-info { flex:1;min-width:0; }
.settings-profile-name { font-size:17px;font-weight:700;color:#111; }
.settings-profile-email { font-size:13px;color:#888;margin-top:3px; }
.settings-profile-role { display:inline-block;font-size:11px;font-weight:600;color:#1a73e8;background:var(--nav-active-bg);padding:2px 8px;border-radius:10px;margin-top:6px; }
.settings-profile-actions { display:flex;gap:8px;flex-shrink:0;align-items:center;flex-wrap:wrap; }
.settings-btn { padding:7px 14px;border:1px solid #ddd;border-radius:7px;background:#fff;font-size:13px;color:#555;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background 0.12s;text-decoration:none;display:inline-flex;align-items:center;gap:5px; }
.settings-btn:hover { background:#f5f7fa; }
.settings-btn.danger { color:#dc2626;border-color:#fca5a5; }
.settings-btn.danger:hover { background:#fee2e2; }
.settings-alert { display:flex;align-items:center;gap:8px;border-radius:8px;padding:10px 16px;margin-bottom:18px;font-size:13px; }
.settings-alert--ok { background:#dcfce7;color:#166534;border:1px solid #bbf7d0; }
.settings-alert--err { background:#fee2e2;color:#991b1b;border:1px solid #fecaca; }

/* ── Modal (webmail 동기화) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity 0.18s,visibility 0.18s}
.modal-overlay.open{opacity:1;visibility:visible}
#moveConflictOverlay{z-index:1100}
.modal-box{background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.18);padding:24px;transform:translateY(8px);transition:transform 0.18s;max-height:92vh;overflow-y:auto}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-title{font-size:15px;font-weight:700;color:#111;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.modal-footer{display:flex;align-items:center;gap:8px}
.modal-box .modal-footer{justify-content:flex-end;margin-top:20px}
.basic-btn-cancel{padding:var(--btn-pad-y,7px) var(--btn-pad-x,16px);border:1px solid var(--btn-cancel-border,#dddddd);border-radius:var(--btn-radius,7px);background:var(--btn-cancel-bg,#ffffff);font-size:var(--btn-font-size,13px);color:var(--btn-cancel-color,#555555);cursor:pointer;font-family:inherit}
.basic-btn-cancel:hover{background:var(--btn-cancel-hover-bg,#f5f7fa)}
.ndm-type-btn{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 8px 8px;border:1.5px solid #e5e7eb;border-radius:10px;background:#fff;cursor:pointer;font-size:12px;font-weight:500;color:#374151;font-family:inherit;transition:border-color .15s,background .15s}
.ndm-type-btn:hover{border-color:#93c5fd;background:#f0f7ff}
.ndm-type-btn.active{border-color:#1a73e8;background:#eff6ff;color:#1a73e8}

/* ── Context Menu (webmail.smartertools.co.kr/style.css 동기화) ── */
.ctx-menu {
  position: fixed;
  display: none;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
  padding: 4px 0;
  min-width: 172px;
  z-index: 9000;
  transform-origin: top left;
  animation: ctxIn 0.1s ease;
}
.ctx-menu.visible { display: block; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.ctx-menu-header {
  padding: 8px 14px 6px;
  font-size: 12px;
  color: #888;
  font-weight: 500;
  user-select: text;
  cursor: default;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s;
}
.ctx-menu-item:hover { background: #f5f7fa; }
.ctx-menu-item svg   { flex-shrink: 0; color: #888; }
.ctx-menu-item.danger       { color: #dc2626; }
.ctx-menu-item.danger svg   { color: #dc2626; }
.ctx-menu-item.danger:hover { background: #fee2e2; }
.ctx-menu-item.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.ctx-menu-divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
.sub-sidebar__nav li.ctx-active > a { background: var(--nav-active-bg); color: #1a73e8; }

/* ── Storage toolbar (webmail.smartertools.co.kr/style.css 동기화) ── */
#storage-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
#sub-main-search:focus-within {
  box-shadow: 0 0 0 2px #c5d6f7;
  background: #fff;
}
#sub-main-search svg { flex-shrink: 0; color: #aaa; transition: color 0.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; }

/* webmail 동기화: mail-toolbar-icon-btn / basic-view-btn */
.mail-toolbar-icon-btn,
.basic-view-btn {
  width: 28px; height: 28px;
  border: 1px solid #e2e5ea;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #666;
  flex-shrink: 0;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.mail-toolbar-icon-btn:hover,
.basic-view-btn:hover:not(.active) { background: #f0f0f0; color: #333; border-color: #d0d3d8; }
.mail-toolbar-icon-btn.active,
.basic-view-btn.active { background: var(--nav-active-bg); color: #1a73e8; border-color: #1a73e8; }

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

/* 정렬 드롭다운 */
.sort-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid #e2e5ea;
  border-radius: 9px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.05);
  padding: 4px 0;
  min-width: 140px;
  z-index: 900;
  display: none;
  animation: ctxIn 0.1s ease;
}
.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 0.1s;
}
.sort-dropdown-item:hover { background: #f5f7fa; }
.sort-dropdown-item.active { color: #1a73e8; font-weight: 500; }
.sort-dropdown-item.active::after {
  content: '';
  width: 7px; height: 12px;
  border-right: 2px solid #1a73e8;
  border-bottom: 2px solid #1a73e8;
  transform: rotate(45deg);
  display: inline-block;
  margin-top: -3px;
}

/* 필터 칩 행 */
#storage-filter-row {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
}
#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 0.12s, background 0.12s, color 0.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; }

/* ── 폼 필드 (webmail 동기화) ── */
.basic-form-group { display: flex; flex-direction: column; }
.basic-field-error { font-size: 12px; color: #dc2626; margin-top: 5px; }

/* ── 사이드바 폴더 트리 ── */
#folderTree { margin: 0; padding: 0; list-style: none; }

/* ── Storage 파일/폴더 목록 ── */
#storage-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 18px 0;
  font-size: 12px; color: #888;
  flex-wrap: wrap;
}
.sbc-item {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; color: #555; border-radius: 4px;
  padding: 2px 4px; transition: color 0.1s, background 0.1s;
}
.sbc-item:hover { color: #1a73e8; background: var(--nav-active-bg); }
.sbc-item.current { color: #1a73e8; font-weight: 600; cursor: default; }
.sbc-item.current:hover { background: none; }
.sbc-sep { color: #ccc; font-size: 11px; }
.sbc-add-folder-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  color: #9ca3af; background: none;
  border: 1px solid transparent; border-radius: 5px;
  cursor: pointer; transition: background 0.1s, color 0.1s, border-color 0.1s;
  flex-shrink: 0; margin-left: 4px;
}
.sbc-add-folder-btn:hover { background: #eff6ff; border-color: #bfdbfe; color: #1a73e8; }

/* 패널 리사이즈 핸들 */
.panel-resize-handle {
  width: 5px; flex-shrink: 0; cursor: col-resize;
  background: transparent; position: relative; z-index: 10;
  transition: background 0.15s;
}
.panel-resize-handle::after {
  content: ''; position: absolute; top: 0; left: 2px;
  width: 1px; height: 100%; background: #e5e7eb;
}
.panel-resize-handle:hover, .panel-resize-handle:active {
  background: rgba(26,115,232,0.10);
}
.panel-resize-handle:hover::after, .panel-resize-handle:active::after {
  background: #1a73e8;
}

/* 그리드 뷰 rubber-band 선택 */
#sg-rubber-band {
  display: none;
  position: fixed;
  border: 1.5px solid #2563eb;
  background: rgba(37, 99, 235, 0.08);
  pointer-events: none;
  z-index: 8500;
  border-radius: 2px;
}

/* 목록 테이블 */
#storage-list-wrap {
  padding: 12px 16px;
  flex: 1; overflow-y: auto; min-height: 0;
}
.sl-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sl-table thead th {
  text-align: left; font-size: 11px; font-weight: 600;
  color: #aaa; letter-spacing: 0.4px;
  padding: 4px 10px 8px;
  border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; z-index: 1;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.sl-table thead th:hover { color: #555; }
.sl-table thead th.sorted { color: #1a73e8; }
.sl-table thead th .sort-arrow { margin-left: 3px; font-size: 9px; }
.sl-row {
  cursor: default;
  border-radius: 6px;
  transition: background 0.1s;
}
.sl-row:hover { background: #f5f7ff; }
.sl-row.selected { background: var(--nav-active-bg); }
.sl-row td {
  padding: 7px 10px; border-bottom: 1px solid #fafafa;
  vertical-align: middle; white-space: nowrap;
}
.sl-row td:first-child { border-radius: 6px 0 0 6px; }
.sl-row td:last-child  { border-radius: 0 6px 6px 0; }

.sl-name-cell {
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
}
.sl-name-icon { flex-shrink: 0; }
.sl-name-text {
  overflow: hidden; text-overflow: ellipsis;
  color: #1e293b; font-weight: 400;
}
.sl-row.folder .sl-name-text { font-weight: 500; cursor: pointer; }
.sl-row.folder .sl-name-text:hover { color: #1a73e8; text-decoration: underline; }
.sl-size { color: #94a3b8; font-size: 12px; text-align: right; }
.sl-date { color: #94a3b8; font-size: 12px; }

/* 빈 상태 */
.sl-empty {
  text-align: center; padding: 56px 24px;
  color: #9ca3af; font-size: 13px;
}
.sl-empty svg { display: block; margin: 0 auto 14px; }

/* 로딩 스피너 */
.sl-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 56px; color: #94a3b8; gap: 10px; font-size: 13px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sl-spinner { animation: spin 0.8s linear infinite; }

/* 그리드 뷰 */
#storage-list-wrap.grid-view .sl-table { display: none; }
#storage-list-wrap.grid-view #storage-grid { display: grid; }
#storage-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(169px, 1fr));
  gap: 13px; padding-top: 4px;
}
.sg-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 9px; padding: 18px 13px 16px;
  border: 1px solid #eee; border-radius: 10px;
  cursor: default; transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  text-align: center;
}
.sg-card:hover { border-color: #c5d6f7; box-shadow: 0 2px 8px rgba(26,115,232,0.08); background: #f8faff; }
.sg-card.selected { border-color: #1a73e8; background: var(--nav-active-bg); }
.sg-card.folder { cursor: pointer; }
.sg-name {
  font-size: 13px; color: #1e293b; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  width: 100%; text-align: center;
}
.sg-meta { font-size: 10px; color: #aaa; }

/* ── 아이템 컨텍스트 메뉴 (파일/폴더) ── */
#itemCtxMenu { min-width: 220px; }
.ctx-menu-item .ctx-sub-arrow {
  margin-left: auto;
  font-size: 13px;
  color: #bbb;
  flex-shrink: 0;
  padding-left: 8px;
}
.ctx-menu-item:hover .ctx-sub-arrow { color: #888; }
.ctx-menu-item .ctx-shortcut {
  margin-left: auto;
  font-size: 11px;
  color: #bbb;
  flex-shrink: 0;
  padding-left: 8px;
}

/* ── Toast 알림 ── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 99999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  background: #1e293b; color: #f1f5f9;
  border-radius: 10px;
  font-size: 13px; font-weight: 400;
  box-shadow: 0 4px 20px rgba(0,0,0,0.22);
  min-width: 220px; max-width: 340px;
  pointer-events: auto;
  animation: toastIn 0.22s cubic-bezier(.4,0,.2,1);
  transition: opacity 0.3s, transform 0.3s;
}
.toast.out { opacity: 0; transform: translateY(6px); }
.toast.ok   .toast-icon { color: #4ade80; }
.toast.err  .toast-icon { color: #f87171; }
.toast.info .toast-icon { color: #60a5fa; }
.toast-icon { flex-shrink: 0; }
.toast-msg  { flex: 1; line-height: 1.4; }
.toast-undo {
  background: none; border: none; color: #93c5fd;
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 2px 0; flex-shrink: 0; text-decoration: underline;
}
.toast-undo:hover { color: #bfdbfe; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 휴지통 페이지 ── */
.trash-empty-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: #fff; color: #dc2626;
  border: 1px solid #fca5a5; border-radius: 7px;
  font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.12s;
}
.trash-empty-btn:hover { background: #fee2e2; }
.trash-empty-btn:disabled { opacity: 0.45; cursor: default; }

/* 휴지통 아이템 삭제일 */
.sl-date.deleted { color: #f87171; }

/* 트리 active 항목 동기화 */

/* ── file-tree (orgchart-tree 리네임, compose.html 참조) ── */
.file-tree {
  list-style: none;
  padding: 2px 0;
  margin: 0;
}

.file-tree-item {
  display: flex;
  align-items: center;
  height: 26px;
  min-height: 26px;
  padding-right: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12.5px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
  transition: background 0.1s;
  margin: 1px 4px 1px 0;
}
.file-tree-item:hover { background: #eff6ff; color: #1d4ed8; }
.file-tree-item.active {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
}
.file-tree-item.ctx-active { background: #dbeafe; color: #1d4ed8; }

.file-tree-item:hover .ft-icon svg,
.file-tree-item.active .ft-icon svg { fill: #93c5fd; stroke: #3b82f6; }

/* 인덴트 스페이서 */
.file-tree-indent {
  width: 16px;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
}
/* 인덴트 선 (수직 가이드) */
.file-tree-indent::before {
  content: '';
  position: absolute;
  left: 7px;
  top: -13px;
  bottom: -13px;
  width: 1px;
  background: #e5e7eb;
}

/* +/- 토글 버튼 (박스 스타일) */
.file-tree-toggle {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5db;
  border-radius: 2px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  margin-right: 3px;
}
.file-tree-toggle:hover {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1d4ed8;
}
.file-tree-item.active .file-tree-toggle {
  border-color: #93c5fd;
  color: #1d4ed8;
}
.file-tree-toggle.leaf {
  border-color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
  color: transparent;
}

/* 폴더 아이콘 */
.ft-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}
/* 폴더명 */
.ft-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ── basic-btn-secondary ── */
.basic-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  font-size: var(--btn-font-size);
  color: var(--btn-secondary-color);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.basic-btn-secondary:hover           { background: var(--btn-secondary-hover-bg); border-color: var(--btn-secondary-hover-bd); }
.basic-btn-secondary:active          { filter: brightness(0.96); }
.basic-btn-secondary:disabled,
.basic-btn-secondary[disabled]       { opacity: 0.5; cursor: not-allowed; }
/* ── basic-btn-basic ── */
.basic-btn-basic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-secondary-bg);
  font-size: var(--btn-font-size);
  color: var(--btn-secondary-color);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s;
}
.basic-btn-basic:hover           { background: var(--btn-secondary-hover-bg); }
.basic-btn-basic:active          { filter: brightness(0.96); }
.basic-btn-basic:disabled,
.basic-btn-basic[disabled]       { opacity: 0.5; cursor: not-allowed; }
.basic-btn-basic.primary         { background: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: var(--btn-primary-border); }
.basic-btn-basic.primary:hover   { background: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-bd); }
.basic-btn-basic.danger          { color: #dc2626; border-color: #fca5a5; }
.basic-btn-basic.danger:hover    { background: #fee2e2; }
/* ── basic-btn-primary ── */
.basic-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--btn-pad-y) calc(var(--btn-pad-x) + 2px);
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  font-size: var(--btn-font-size);
  color: var(--btn-primary-color);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
}
.basic-btn-primary:hover  { background: var(--btn-primary-hover-bg); border-color: var(--btn-primary-hover-bd); }
.basic-btn-primary:active { filter: brightness(0.92); }
.basic-btn-primary:disabled,
.basic-btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ── tree-root 공용 CSS (storage + org chart) ── */
.st-tree { padding: 0 0 4px 8px; }
/* .t-row / .t-cell / .t-btn / .t-label / .t-children 는 users_organization.ejs 와 공용 */
.t-row {
  display: flex; align-items: center;
  height: 28px; cursor: pointer;
  border-radius: 4px; padding-right: 8px;
  white-space: nowrap; position: relative;
  font-size: 13px;
}
.t-row:hover  { background: #f9fafb; }
.t-row.active { background: #eff6ff; }
.t-row.active .t-label { color: #1d4ed8; font-weight: 600; }
.t-row.active .t-btn   { border-color: #93c5fd; color: #2563eb; }
.t-row.active .t-count { color: #2563eb; background: #dbeafe; }
.t-row.ctx-active { background: #eff6ff; }
/* 드래그 중 */
.t-row.t-dragging { opacity: .35; }
/* 드롭 인디케이터 */
.t-row.drop-before::before {
  content: ''; position: absolute; top: -1px; left: 4px; right: 0;
  height: 2px; background: #2563eb; border-radius: 1px; z-index: 5;
  pointer-events: none;
}
.t-row.drop-after::after {
  content: ''; position: absolute; bottom: -1px; left: 4px; right: 0;
  height: 2px; background: #2563eb; border-radius: 1px; z-index: 5;
  pointer-events: none;
}
.t-row.drop-inside { outline: 2px solid #2563eb; outline-offset: -2px; background: #eff6ff; }
.t-cell { width: 20px; height: 28px; flex-shrink: 0; position: relative; }
.t-cell.vl::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:1px; background:#d1d5db; }
.t-cell.ct::before { content:''; position:absolute; left:9px; top:0; bottom:0; width:1px; background:#d1d5db; }
.t-cell.ct::after  { content:''; position:absolute; left:9px; top:50%; width:11px; height:1px; background:#d1d5db; }
.t-cell.cl::before { content:''; position:absolute; left:9px; top:0; height:50%; width:1px; background:#d1d5db; }
.t-cell.cl::after  { content:''; position:absolute; left:9px; top:50%; width:11px; height:1px; background:#d1d5db; }
.t-folder { display:flex; align-items:center; justify-content:center; width:18px; height:18px; flex-shrink:0; margin-right:5px; color:#6b7280; }
.t-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;
}
.t-spacer { width:12px; flex-shrink:0; margin-right:4px; }
.t-label  { font-size:13px; color:#1f2937; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.t-count  { font-size:10.5px; color:#9ca3af; background:#f3f4f6; padding:1px 6px; border-radius:8px; margin-left:4px; flex-shrink:0; }
/* 드래그 핸들 힌트 */
.t-row:hover .t-drag-grip { opacity: .4; }
.t-drag-grip { opacity: 0; width:10px; flex-shrink:0; margin-right:2px; cursor:grab; color:#9ca3af; display:flex; align-items:center; font-size:10px; letter-spacing:-1px; }
.t-drag-grip:active { cursor: grabbing; }
.t-children { display:none; }
.t-children.open { display:block; }


/* ── 업로드 충돌 모달 ── */
.cf-item { border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin-bottom:10px; }
.cf-item:last-child { margin-bottom:0; }
.cf-item-name { font-size:13px; font-weight:600; color:#111827; margin-bottom:8px; display:flex; align-items:center; gap:6px; word-break:break-all; }
.cf-radio { display:flex; align-items:flex-start; gap:7px; padding:4px 0; cursor:pointer; font-size:12.5px; color:#374151; }
.cf-radio input[type="radio"] { margin-top:2px; accent-color:#1a73e8; flex-shrink:0; }
.cf-hint { color:#9ca3af; font-size:11px; margin-left:2px; }
/* ── Inline conflict section in upload modal ── */
.um-conflict-banner { display:flex; align-items:flex-start; gap:10px; background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:10px 12px; margin-bottom:12px; }
.um-conflict-ttl { font-size:13px; font-weight:700; color:#92400e; margin-bottom:2px; }
.um-conflict-desc { font-size:12px; color:#78350f; }
.um-conflict-list { max-height:240px; overflow-y:auto; }
.upload-modal-box { width:480px; max-width:95vw; }

/* ── 사이드바 구분선 ── */
/* ── 정적 nav (st-nav) ── */
.st-nav { padding: 8px 0 4px; display: flex; flex-direction: column; gap: 2px; }
.st-nav-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 0.12s, color 0.12s;
}
.st-nav-item:hover { background: #f1f3f6; color: #111; }
.st-nav-item.active { background: var(--nav-active-bg); color: #1a73e8; font-weight: 600; }
.st-nav-item svg { flex-shrink: 0; }
.st-nav-divider { height:1px; background:#e5e7eb; margin:6px 12px; }
.st-nav-row-wrap { display:flex; align-items:center; gap:2px; padding:0 4px 0 0; }
.st-nav-row-wrap .st-nav-item { flex:1; min-width:0; padding-right:4px; }
.st-empty-trash-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border:1px solid transparent; border-radius:5px; background:none; cursor:pointer; transition:background .12s,border-color .12s; padding:0; }
.st-empty-trash-btn:hover { background:#fef2f2; border-color:#fca5a5; }
.st-empty-trash-btn:hover svg line[stroke="#ef4444"] { stroke:#dc2626; }


/* ── 사이드바 구분선 ── (중복 제거됨) ── */

/* ── Preview Panel (PP) ── */
.pp { width:280px; min-width:200px; max-width:600px; background:#fff; border-left:1px solid #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(26,115,232,.25); }
.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-head { padding:14px 16px 10px; border-bottom:1px solid #e5e7eb; text-align:center; position:relative; min-height:60px; }
.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:80px; }
.pp-thumb { max-width:100%; max-height:160px; object-fit:contain; border-radius:6px; }
.pp-ico { width:52px; height:52px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:#f3f4f6; border:1px solid #e5e7eb; margin:0 auto 10px; }
.pp-name { font-size:13px; font-weight:600; color:#111827; word-break:break-all; line-height:1.4; margin-top:4px; }
.pp-sec { padding:8px 0 4px; }
.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:#1a73e8; border-radius:9999px; flex-shrink:0; }
.pp-row { padding:4px 16px; }
.pp-k { font-size:10.5px; color:#9ca3af; margin-bottom:1px; }
.pp-v { font-size:12px; color:#374151; word-break:break-all; line-height:1.4; }
.pp-divider { height:1px; background:#e5e7eb; margin:4px 0; }
.pp-actions { padding:10px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.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:#1a73e8; color:#fff; border-color:#1a73e8; }
.pp-btn.primary:hover { background:#1557b0; border-color:#1557b0; }
.pp-btn.danger { color:#dc2626; border-color:#fecaca; }
.pp-btn.danger:hover { background:#fff5f5; }
.pp-slides { border-bottom:1px solid #e5e7eb; }
.pp-fdr-title { font-size:10px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
.pp-fdr-bar { height:3px; background:linear-gradient(90deg,#f59e0b,#fbbf24); border-radius:2px; margin-bottom:14px; }
.pp-fdr-id { display:flex; align-items:center; gap:12px; margin-top:2px; }
.pp-fdr-ico { width:52px; height:52px; background:#fff7ed; border:1.5px solid #fed7aa; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pp-fdr-name { font-size:14px; font-weight:700; color:#111827; word-break:break-all; line-height:1.35; }
.pp-fdr-type { font-size:11px; color:#f59e0b; font-weight:600; margin-top:3px; }
.pp-irow { display:flex; align-items:flex-start; gap:10px; padding:6px 16px; }
.pp-irow-ico { width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#9ca3af; margin-top:1px; }
.pp-irow-body .pp-k { font-size:10px; color:#9ca3af; margin-bottom:1px; }
.pp-irow-body .pp-v { font-size:12px; color:#374151; word-break:break-all; line-height:1.4; }
.pp-slide-canvas-wrap { padding:10px 12px; min-height:60px; display:flex; align-items:center; justify-content:center; background:#f9fafb; }
.pp-slide-canvas-wrap canvas { border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.15); display:block; }
.pp-slide-nav { display:flex; align-items:center; justify-content:center; gap:10px; padding:7px 12px 10px; border-top:1px solid #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, border-color .12s, color .12s; font-family:inherit; }
.pp-slide-btn:hover:not(:disabled) { background:#f3f4f6; border-color:#d1d5db; color:#1a73e8; }
.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 v2 (패널 재설계) ── */
.pp2-head { padding:10px 16px; border-bottom:1px solid #e5e7eb; }
.pp2-preview-wrap { display:flex; align-items:center; justify-content:center; min-height:80px; margin-bottom:10px; }
.pp2-name-row { padding:0 2px; }
.pp2-name { font-size:13px; font-weight:700; color:#111827; word-break:break-all; line-height:1.4; border:1.5px solid transparent; border-radius:5px; padding:3px 5px; cursor:text; outline:none; display:block; transition:border-color .15s,background .15s; }
.pp2-name:hover { background:#f9fafb; }
.pp2-name[contenteditable="true"] { border-color:#1a73e8; background:#fff; box-shadow:0 0 0 2px rgba(26,115,232,.1); }
.pp2-type-lbl { font-size:11px; color:#9ca3af; padding:3px 5px 0; }
.pp2-sec { border-bottom:1px solid #f3f4f6; padding:10px 0 6px; }
.pp2-sec:last-child { border-bottom:none; }
.pp2-sec-ttl { font-size:10px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.7px; padding:0 16px 6px; display:flex; align-items:center; gap:5px; }
.pp2-sec-ttl::before { content:''; width:3px; height:10px; background:#1a73e8; border-radius:9999px; flex-shrink:0; }
.pp2-sec-hdr { display:flex; align-items:center; justify-content:space-between; padding:0 16px 6px; }
.pp2-sec-hdr .pp2-sec-ttl { padding:0; }
.pp2-sec-body { }
.pp2-info-row { display:flex; align-items:flex-start; padding:3px 16px; gap:8px; }
.pp2-info-row-2col { display:grid; grid-template-columns:52px 1fr 52px 1fr; gap:4px 6px; padding:3px 16px; }
.pp2-info-row-2col .pp2-info-v { flex:none; }
.pp2-info-k { font-size:10.5px; color:#9ca3af; width:52px; flex-shrink:0; padding-top:1px; }
.pp2-info-k2 { width:auto; }
.pp2-info-v { font-size:12px; color:#374151; word-break:break-all; line-height:1.45; flex:1; min-width:0; }
.pp2-add-btn { display:inline-flex; align-items:center; gap:3px; padding:3px 8px; background:none; border:1.5px solid #e5e7eb; border-radius:5px; font-size:11px; font-weight:600; color:#374151; cursor:pointer; font-family:inherit; transition:background .12s,border-color .12s; }
.pp2-add-btn:hover { background:#f3f4f6; border-color:#d1d5db; }
.pp2-share-row { display:flex; align-items:center; gap:8px; padding:5px 16px; transition:background .1s; }
.pp2-share-row:hover { background:#f9fafb; }
.pp2-share-av { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
.pp2-share-name { flex:1; min-width:0; font-size:12px; color:#374151; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp2-share-perm { font-size:11px; color:#9ca3af; flex-shrink:0; }
.pp2-share-sel { font-size:11px; border:1px solid #d1d5db; border-radius:4px; padding:2px 4px; background:#fff; color:#374151; cursor:pointer; font-family:inherit; }
.pp2-share-del { background:none; border:none; cursor:pointer; color:#d1d5db; padding:2px; border-radius:3px; line-height:1; transition:color .1s; flex-shrink:0; }
.pp2-share-del:hover { color:#ef4444; }
.pp2-share-empty { font-size:12px; color:#9ca3af; padding:6px 16px; }
.pp2-footer { padding:10px 14px; display:flex; flex-wrap:nowrap; gap:6px; border-top:1px solid #e5e7eb; position:sticky; bottom:0; background:#fff; z-index:3; }
.pp-ico-folder { background:#fff7ed !important; border-color:#fed7aa !important; }

/* ── PP 이미지 미리보기 ── */
.pp-img-preview-wrap { padding:8px 14px; }
.pp-img-preview { display:block; width:100%; max-width:100%; height:auto; border-radius:6px; object-fit:contain; box-shadow:0 1px 6px rgba(0,0,0,.1); }

/* ── PP 버전 기록 ── */
.pp2-ver-row { padding:6px 16px; border-bottom:1px solid #f9fafb; cursor:pointer; border-left:3px solid transparent; transition:background .1s,border-color .1s; }
.pp2-ver-row:last-child { border-bottom:none; }
.pp2-ver-row:hover { background:#f8fafc; }
.pp2-ver-row.pp2-ver-active { background:#eff6ff; border-left-color:#2563eb; }
.pp2-ver-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pp2-ver-num { font-size:12px; font-weight:600; color:#374151; display:flex; align-items:center; gap:4px; }
.pp2-ver-cur { display:inline-block; background:#dcfce7; color:#166534; font-size:10px; font-weight:700; padding:1px 5px; border-radius:10px; }
.pp2-ver-date { font-size:11px; color:#9ca3af; }
.pp2-ver-bot { display:flex; align-items:center; gap:8px; margin-top:3px; }
.pp2-ver-size { font-size:11px; color:#6b7280; }
.pp2-ver-who { font-size:11px; color:#6b7280; }
.pp2-ver-dl { font-size:11px; color:#1a73e8; text-decoration:none; margin-left:auto; padding:2px 6px; border:1px solid #bfdbfe; border-radius:4px; background:#eff6ff; transition:background .12s; }
.pp2-ver-dl:hover { background:#dbeafe; }
.pp2-ver-restore { font-size:11px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:4px; padding:2px 6px; cursor:pointer; font-family:inherit; transition:background .12s; }
.pp2-ver-restore:hover { background:#fef3c7; }
.pp2-ver-restore:disabled { opacity:.5; cursor:not-allowed; }
.pp2-ver-loading { font-size:12px; color:#9ca3af; padding:8px 16px; }

/* ── Preview Overlay ── */
.pv-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:950; display:none; flex-direction:column; }
.pv-overlay.show { display:flex; }
.pv-top { height:54px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; padding:0 20px; gap:12px; flex-shrink:0; }
.pv-top-title { font-size:13px; font-weight:600; color:#fff; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-close { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.8); font-size:14px; font-weight:600; cursor:pointer; padding:5px 14px; border-radius:6px; font-family:inherit; transition:background .15s; }
.pv-close:hover { background:rgba(255,255,255,.18); color:#fff; }
.pv-body { flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.pv-img { max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:3px; }
.pv-video { max-width:92%; max-height:calc(100% - 20px); display:block; outline:none; border-radius:3px; }
.pv-pdf-wrap { width:100%; height:100%; overflow-y:auto; padding:24px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.pv-pdf-wrap canvas { box-shadow:0 6px 30px rgba(0,0,0,.8); border-radius:2px; display:block; }
.pv-spin { color:rgba(255,255,255,.7); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.spin { width:28px; height:28px; border:2.5px solid rgba(255,255,255,.15); border-top-color:rgba(255,255,255,.8); border-radius:50%; animation:ppSpin .7s linear infinite; }
@keyframes ppSpin { to { transform:rotate(360deg); } }

/* ── Topbar 검색창 ── */
.tsearch-wrap{position:relative;width:100%;max-width:440px}
.tsearch-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none;flex-shrink:0}
.tsearch-input{width:100%;height:34px;padding:0 12px 0 34px;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;color:#111;background:#f8f9fa;outline:none;transition:border-color .15s,background .15s,box-shadow .15s;box-sizing:border-box}
.tsearch-input:focus{border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.10)}
.tsearch-input::placeholder{color:#adb5bd}
.tsearch-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.10);z-index:9999;overflow:hidden;max-height:360px;overflow-y:auto}
.tsearch-section{padding:5px 12px 3px;font-size:10px;font-weight:700;color:#9ca3af;letter-spacing:.5px;text-transform:uppercase;border-top:1px solid #f3f4f6}
.tsearch-section:first-child{border-top:none}
.tsearch-item{display:flex;align-items:center;gap:9px;padding:8px 14px;text-decoration:none;color:#111;font-size:13px;transition:background .1s;cursor:pointer;border:none;background:none;width:100%;text-align:left}
.tsearch-item:hover{background:#f5f7fa}
.tsearch-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsearch-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:4px;flex-shrink:0}
.tsearch-badge.folder{background:#eff6ff;color:#2563eb}
.tsearch-badge.file{background:#f0fdf4;color:#16a34a}
.tsearch-empty{padding:16px;font-size:13px;color:#9ca3af;text-align:center}
.tsearch-more{display:block;padding:9px 14px;font-size:12px;color:#2563eb;text-decoration:none;text-align:center;border-top:1px solid #f3f4f6;background:#f9fafb;transition:background .1s}
.tsearch-more:hover{background:#eff6ff}

/* ══════════════════════════════════════════
   Daypicker  (.dp-*)
   webmail.smartertools.co.kr 캘린더 디자인 기반
   ══════════════════════════════════════════ */
.dp-wrap{position:relative;display:inline-block}
/* 표시 버튼 */
.dp-input{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px 7px 10px;
  border:1px solid #ddd;border-radius:7px;
  font-size:13px;color:#333;background:#fff;
  cursor:pointer;min-width:150px;user-select:none;
  transition:border-color .15s;white-space:nowrap;
  box-sizing:border-box;
}
.dp-input:hover{border-color:#aaa}
.dp-input:focus,.dp-input.open{border-color:#1a73e8;outline:none}
.dp-input-placeholder{color:#b0b7c3}
.dp-input-icon{color:#9ca3af;flex-shrink:0;margin-left:auto}
/* 패널 */
.dp-panel{
  display:none;position:absolute;top:calc(100% + 5px);left:0;
  z-index:9999;background:#fff;
  border:1px solid #ddd;border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.13);
  padding:14px 12px 10px;width:232px;user-select:none;
}
.dp-panel.open{display:block}
/* 헤더 (월 이동) — webmail .cal-nav-btn 동일 */
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-nav-btn{
  width:28px;height:28px;
  border:1px solid #ddd;border-radius:4px;
  background:#fff;cursor:pointer;
  font-size:14px;color:#555;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;padding:0;
}
.dp-nav-btn:hover{background:#f0f0f0}
.dp-title{font-size:13px;font-weight:600;color:#333}
/* 요일 헤더 — webmail .cal-day-name 동일 */
.dp-grid-head{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:3px}
.dp-dname{text-align:center;padding:4px 0;font-size:11px;color:#555}
.dp-dname.sun{color:#e05050}
.dp-dname.sat{color:#4a90e2}
/* 날짜 그리드 */
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.dp-cell{display:flex;align-items:center;justify-content:center;padding:2px 0}
/* 날짜 셀 — webmail .cal-date 동일 */
.dp-date{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:12px;color:#333;
  cursor:pointer;transition:background .1s;
}
.dp-date:hover:not(.today):not(.selected){background:#f0f0f0}
.dp-cell.sun .dp-date{color:#e05050}
.dp-cell.sat .dp-date{color:#4a90e2}
.dp-date.other-month{color:#ccc;cursor:default}
.dp-date.other-month:hover{background:none}
/* 오늘 — webmail .cal-cell.today .cal-date 동일 */
.dp-date.today{background:#1a73e8;color:#fff !important}
/* 선택됨 */
.dp-date.selected{background:#1a73e8;color:#fff !important;font-weight:600}
.dp-date.today.selected{background:#1557b0}
/* 지우기 */
.dp-footer{margin-top:8px;text-align:right}
.dp-clear-btn{
  font-size:11px;color:#9ca3af;background:none;border:none;
  cursor:pointer;padding:2px 4px;
}
.dp-clear-btn:hover{color:#dc2626}

/* ── Sub-sidebar tree styles (used by storage, template, notes pages) ── */
.st-subtree { display: none; padding-left: 20px; }
.st-subtree.open { display: block; }
.st-subtree-item { padding: 5px 10px 5px 12px; font-size: 13px; color: #374151; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.st-tree-hidden { display: none !important; }
.st-subtree-item:hover { background: #f1f3f6; }
.st-subtree-item.active { background: var(--nav-active-bg); color: #1a73e8; }
.st-subtree-owner { padding: 4px 10px 2px 12px; font-size: 11px; color: #9ca3af; }
.st-nav-caret { transition: transform 0.2s; flex-shrink: 0; }
.st-nav-caret.open { transform: rotate(90deg); }

/* ── File list share column ── */
.sl-share { width: 60px; text-align: center; font-size: 12px; color: #9ca3af; }

/* ── 문서 템플릿 (template.ejs) ── */
.tpl-header-right { display:flex; align-items:center; gap:10px; }
.tpl-search { padding:6px 12px; border:1px solid #e5e7eb; border-radius:7px; font-size:13px; outline:none; width:220px; font-family:inherit; }
.tpl-search:focus { border-color:#1a73e8; }
.tpl-add-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; background:#1a73e8; color:#fff; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .12s; }
.tpl-add-btn:hover { background:#1557b0; }
.tpl-tabs-bar { display:flex; gap:0; border-bottom:2px solid #e5e7eb; padding:0 24px; background:#fff; flex-shrink:0; }
.tpl-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border:none; border-bottom:2px solid transparent; background:none; font-size:13px; font-weight:600; color:#6b7280; cursor:pointer; font-family:inherit; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.tpl-tab:hover { color:#374151; }
.tpl-tab.active { color:#1a73e8; border-bottom-color:#1a73e8; }
.tpl-tab-icon { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:4px; font-size:11px; font-weight:800; }
.tpl-wrap { padding:24px; }
.tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(279px,1fr)); gap:16px; }
.tpl-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; cursor:default; transition:border-color .15s, box-shadow .15s, transform .1s; }
.tpl-card:hover { border-color:#1a73e8; box-shadow:0 4px 16px rgba(26,115,232,.13); transform:translateY(-2px); }
.tpl-card-thumb { display:flex; justify-content:center; }
.tpl-card-thumb img { width:250px; object-fit:cover; }
.tpl-card-letter { width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; }
.tpl-card-body { padding:12px 12px 10px; }
.tpl-card-name { font-size:13px; font-weight:600; color:#111827; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpl-card-desc { font-size:11.5px; color:#9ca3af; margin-bottom:10px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tpl-card-actions { display:flex; gap:5px; align-items:center; }
.tpl-use-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:5px 0; background:#f3f4f6; border:none; border-radius:6px; font-size:11.5px; font-weight:600; color:#374151; cursor:pointer; font-family:inherit; transition:background .12s, color .12s; }
.tpl-use-btn:hover { background:#1a73e8; color:#fff; }
.tpl-icon-btn { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e5e7eb; background:#fff; border-radius:6px; cursor:pointer; color:#6b7280; transition:background .12s, color .12s, border-color .12s; padding:0; }
.tpl-icon-btn:hover { background:#f3f4f6; color:#111827; border-color:#d1d5db; }
.tpl-icon-btn.danger:hover { background:#fef2f2; color:#ef4444; border-color:#fca5a5; }
.tpl-empty { padding:64px 0; text-align:center; color:#9ca3af; font-size:13px; }
.tpl-empty svg { display:block; margin:0 auto 12px; opacity:.4; }
.ic-word  { background:var(--nav-active-bg); color:#1a73e8; }
.ic-excel { background:#e6f4ea; color:#1e8e3e; }
.ic-ppt   { background:#fce8e6; color:#d93025; }
.tpl-form-row { margin-bottom:16px; }
.tpl-form-label { display:block; font-size:12.5px; font-weight:600; color:#374151; margin-bottom:5px; }
.tpl-form-input { width:100%; padding:8px 10px; border:1.5px solid #e5e7eb; border-radius:7px; font-size:13px; font-family:inherit; outline:none; box-sizing:border-box; }
.tpl-form-input:focus { border-color:#1a73e8; }
.tpl-form-select { width:100%; padding:8px 10px; border:1.5px solid #e5e7eb; border-radius:7px; font-size:13px; font-family:inherit; outline:none; background:#fff; }
.tpl-thumb-upload-area { border:2px dashed #e5e7eb; border-radius:10px; min-height:100px; display:flex; align-items:center; justify-content:center; cursor:pointer; overflow:hidden; position:relative; background:#fafafa; transition:border-color .15s; }
.tpl-thumb-upload-area:hover { border-color:#1a73e8; }
.tpl-thumb-upload-area img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tpl-thumb-placeholder { display:flex; flex-direction:column; align-items:center; gap:6px; color:#9ca3af; pointer-events:none; }
.tpl-thumb-placeholder span { font-size:12px; }
.tpl-file-upload-area { border:2px dashed #e5e7eb; border-radius:8px; min-height:60px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:#fafafa; transition:border-color .15s; padding:12px; }
.tpl-file-upload-area:hover { border-color:#1a73e8; }
.tpl-file-placeholder { display:flex; align-items:center; gap:8px; color:#9ca3af; pointer-events:none; }
.tpl-file-placeholder span { font-size:12px; }
.tpl-file-selected { display:flex; align-items:center; gap:6px; color:#16a34a; font-size:12.5px; pointer-events:none; }
.tpl-file-selected button { pointer-events:auto; }
.tpl-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
.tpl-btn-cancel { padding:7px 16px; background:#f3f4f6; border:none; border-radius:7px; font-size:13px; font-weight:600; color:#374151; cursor:pointer; font-family:inherit; }
.tpl-btn-cancel:hover { background:#e5e7eb; }
.tpl-btn-save { padding:7px 18px; background:#1a73e8; border:none; border-radius:7px; font-size:13px; font-weight:600; color:#fff; cursor:pointer; font-family:inherit; }
.tpl-btn-save:hover { background:#1557b0; }
.tpl-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:#323232; color:#fff; font-size:13px; padding:10px 20px; border-radius:8px; z-index:9999; opacity:0; transition:opacity .25s; pointer-events:none; }
.tpl-toast.show { opacity:1; }

/* ── 메모 (notes.ejs) ── */
.notes-layout { display:flex; gap:0; height:100%; overflow:hidden; }
.notes-list-panel { width:280px; min-width:220px; flex-shrink:0; border-right:1px solid #e5e7eb; display:flex; flex-direction:column; overflow:hidden; background:#fafafa; }
.notes-list-header { padding:14px 14px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e5e7eb; flex-shrink:0; }
.notes-list-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:background .12s; padding:0; }
.new-btn:hover { background:#1557b0; }
.notes-search { padding:8px 10px; border-bottom:1px solid #f3f4f6; flex-shrink:0; }
.notes-search-input { width:100%; padding:6px 10px 6px 30px; border:1px solid #e5e7eb; border-radius:6px; font-size:12px; 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='%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; outline:none; box-sizing:border-box; font-family:inherit; }
.notes-search-input:focus { border-color:#1a73e8; }
.notes-list { flex:1; overflow-y:auto; padding:4px 0; }
.notes-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid #f3f4f6; transition:background .1s; position:relative; }
.notes-item:hover { background:#f3f4f6; }
.notes-item.active { background:#eff6ff; border-left:3px solid #1a73e8; padding-left:11px; }
.notes-item-title { font-size:12.5px; font-weight:600; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.notes-item.active .notes-item-title { color:#1a73e8; }
.notes-item-preview { font-size:11px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.notes-item-meta { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.notes-item-date { font-size:10.5px; color:#d1d5db; }
.notes-item-tags { display:flex; gap:3px; flex-wrap:wrap; }
.notes-tag { display:inline-block; padding:1px 5px; background:#e0e7ff; color:#3730a3; border-radius:8px; font-size:10px; font-weight:500; }
.notes-empty { padding:40px 20px; text-align:center; color:#9ca3af; font-size:12.5px; }
.notes-editor-panel { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.notes-editor-toolbar { padding:10px 16px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:8px; flex-shrink:0; background:#fff; }
.notes-editor-title-input { flex:1; border:none; outline:none; font-size:16px; font-weight:700; color:#111827; font-family:inherit; background:transparent; }
.notes-editor-title-input::placeholder { color:#d1d5db; }
.notes-toolbar-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.notes-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:7px; border:1px solid transparent; background:none; cursor:pointer; transition:background .12s,border-color .12s,color .12s; flex-shrink:0; padding:0; }
.notes-save-btn { color:#1a73e8; }
.notes-save-btn:hover { background:#eff6ff; border-color:#bfdbfe; }
.notes-save-btn:disabled { opacity:.4; cursor:default; }
.notes-del-btn { color:#9ca3af; }
.notes-del-btn:hover { background:#fef2f2; border-color:#fca5a5; color:#ef4444; }
.notes-print-btn { color:#6b7280; }
.notes-print-btn:hover { background:#f3f4f6; border-color:#e5e7eb; color:#374151; }
.notes-tags-bar { padding:6px 16px 8px; border-bottom:1px solid #f3f4f6; display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex-shrink:0; }
.notes-tag-pill { display:inline-flex; align-items:center; gap:3px; padding:2px 8px; background:#e0e7ff; color:#3730a3; border-radius:10px; font-size:11px; font-weight:500; }
.notes-tag-pill-del { background:none; border:none; cursor:pointer; color:#6366f1; font-size:13px; line-height:1; padding:0; }
.notes-tag-add-inp { border:1px dashed #c7d2fe; border-radius:10px; padding:2px 8px; font-size:11px; outline:none; font-family:inherit; width:80px; color:#3730a3; background:#fafaff; }
.notes-tag-add-inp:focus { border-color:#6366f1; }
.notes-editor-body { flex:1; overflow:hidden; padding:0; display:flex; flex-direction:column; }
.notes-editor-body .tox.tox-tinymce { flex:1; border:none !important; border-top:1px solid #f3f4f6 !important; border-radius:0 !important; }
.notes-editor-body .tox .tox-toolbar__primary { background:#fafafa !important; border-bottom:1px solid #f3f4f6 !important; }
.notes-editor-body .tox .tox-toolbar-overlord { background:#fafafa !important; }
.notes-editor-body .tox .tox-edit-area__iframe { background:#fff; }
.notes-placeholder-panel { flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:#d1d5db; }
.notes-placeholder-panel svg { opacity:.3; }
.notes-placeholder-panel p { font-size:13px; margin:0; }
.notes-status { font-size:11px; color:#9ca3af; padding:0 6px; }
.notes-status.saved { color:#16a34a; }
.notes-status.unsaved { color:#d97706; }
.notes-attach-bar { flex-shrink:0; border-top:1px solid #e5e7eb; background:#fafafa; }
.notes-attach-header { display:flex; align-items:center; gap:8px; padding:6px 14px; }
.notes-attach-title { font-size:11px; font-weight:600; color:#6b7280; flex:1; }
.notes-attach-upload-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; background:#fff; border:1px solid #d1d5db; border-radius:5px; font-size:11px; font-weight:500; color:#374151; cursor:pointer; font-family:inherit; transition:background .1s,border-color .1s; }
.notes-attach-upload-btn:hover { background:#f3f4f6; border-color:#9ca3af; }
.notes-attach-list { display:flex; flex-wrap:wrap; gap:5px; padding:0 14px 8px; min-height:0; }
.notes-attach-item { display:inline-flex; align-items:center; gap:5px; padding:3px 8px 3px 6px; background:#fff; border:1px solid #e5e7eb; border-radius:5px; font-size:11px; max-width:220px; transition:border-color .1s; }
.notes-attach-item:hover { border-color:#c7d2fe; }
.notes-attach-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#1a73e8; cursor:pointer; }
.notes-attach-name:hover { text-decoration:underline; }
.notes-attach-size { color:#9ca3af; font-size:10px; white-space:nowrap; flex-shrink:0; }
.notes-attach-del { background:none; border:none; cursor:pointer; color:#d1d5db; padding:0 0 0 2px; line-height:1; font-size:14px; flex-shrink:0; transition:color .1s; }
.notes-attach-del:hover { color:#ef4444; }


/* ── Notes 다중선택 + 컨텍스트 메뉴 ── */
.notes-item.selected { background:#eff6ff; border-left:3px solid #93c5fd; padding-left:11px; }
.notes-item.selected .notes-item-title { color:#1d4ed8; }
.notes-item.active.selected { background:#dbeafe; border-left-color:#1a73e8; }

.notes-ctx-menu {
  position:fixed; z-index:9999;
  background:#fff; border:1px solid #e5e7eb; border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.13); padding:4px 0; min-width:150px;
  user-select:none;
}
.notes-ctx-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; font-size:12.5px; color:#374151;
  cursor:pointer; transition:background .1s;
}
.notes-ctx-item:hover { background:#f3f4f6; }
.notes-ctx-item.danger { color:#ef4444; }
.notes-ctx-item.danger:hover { background:#fef2f2; }
.notes-ctx-item.disabled { color:#d1d5db !important; cursor:not-allowed; }
.notes-ctx-item.disabled:hover { background:none; }

/* ── 파일 이름 변경 모달 ── */
#fileRenameOverlay .modal-box { width:420px; max-width:95vw; }
.file-rename-label { font-size:13px; color:#374151; display:block; margin-bottom:6px; }
.file-rename-wrap {
  display:flex; align-items:center;
  border:1px solid #d1d5db; border-radius:7px;
  overflow:hidden; background:#fff;
  transition:border-color .15s;
}
.file-rename-wrap input {
  flex:1; border:none; outline:none;
  padding:8px 10px; font-size:13px;
  background:transparent; min-width:0;
}
.file-rename-ext {
  padding:10px 10px;
  background:#f9fafb; color:#6b7280;
  font-size:13px; white-space:nowrap;
  border-left:1px solid #e5e7eb;
  align-self:stretch; display:flex; align-items:center;
}
.file-rename-err { color:#dc2626; font-size:12px; margin-top:6px; display:none; }
#fileRenameOverlay .modal-footer { margin-top:22px; }
.notes-ctx-divider { border-top:1px solid #f3f4f6; margin:3px 0; }


/* ══════════════════════════════════════════
   activity.ejs
══════════════════════════════════════════ */
.act-row {
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;border-bottom:1px solid #f1f5f9;
  font-size:13px;
}
.act-row:last-child { border-bottom:none; }
.act-row:hover { background:#f8fafc; }
.act-icon {
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.act-main { flex:1;min-width:0 }
.act-name { color:#1e293b;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.act-sub  { color:#9ca3af;font-size:11px;margin-top:2px }
.act-time { color:#94a3b8;font-size:11px;flex-shrink:0;text-align:right;white-space:nowrap }

/* ══════════════════════════════════════════
   domains_systeminfo.ejs
══════════════════════════════════════════ */
/* ── 시스템 정보 페이지 ── */
.si-section { margin-bottom: 32px; }
.si-section-title {
  font-size: 14px; font-weight: 700; color: #1f2937;
  border-bottom: 2px solid #e5e7eb; padding-bottom: 8px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.si-section-title svg { color: #1a73e8; }

/* 스택 카드 그리드 */
.si-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.si-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.si-card-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 4px;
}
.si-card-label { font-size: 11px; color: #9ca3af; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.si-card-value { font-size: 15px; font-weight: 700; color: #111827; }
.si-card-desc  { font-size: 12px; color: #6b7280; line-height: 1.5; }

/* 구성도 SVG 컨테이너 */
.si-diagram {
  background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 28px 20px; overflow-x: auto;
}
.si-diagram svg { display: block; margin: 0 auto; max-width: 100%; }

/* 기술 테이블 */
.si-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.si-table th {
  text-align: left; padding: 9px 14px;
  border-bottom: 1px solid #e2e8f0;
}
.si-table td { padding: 9px 14px; border-bottom: 1px solid #f0f0f0; color: #374151; vertical-align: top; }
.si-table tr:last-child td { border-bottom: none; }
.si-table tr:hover td { background: #f8fafc; }
.si-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
}
.si-badge.green  { background: #dcfce7; color: #15803d; }
.si-badge.blue   { background: #dbeafe; color: #1d4ed8; }
.si-badge.orange { background: #ffedd5; color: #c2410c; }
.si-badge.gray   { background: #f3f4f6; color: #374151; }
.si-badge.purple { background: #ede9fe; color: #6d28d9; }
.si-badge.red    { background: #fee2e2; color: #b91c1c; }
.si-badge.teal   { background: #ccfbf1; color: #0f766e; }

/* ══════════════════════════════════════════
   domains_systemsetting.ejs
══════════════════════════════════════════ */
.ss-section {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  margin-bottom:24px; overflow:hidden;
}
.ss-section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid #f3f4f6;
  background:#f9fafb;
}
.ss-section-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700; color:#1f2937;
}
.ss-section-title svg { color:#2563eb; }
.ss-body { padding:20px; }
.ss-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.ss-row { display:flex; flex-direction:column; gap:4px; }
.ss-label {
  font-size:11px; font-weight:600; color:#6b7280;
  text-transform:uppercase; letter-spacing:.5px;
}
.ss-input {
  height:36px; padding:0 10px; border:1px solid #e2e5ea; border-radius:7px;
  font-size:13px; color:#1a202c; outline:none; transition:border .15s; background:#fff;
}
.ss-input:focus { border-color:#2563eb; }
.ss-input.pw { letter-spacing:.1em; }
.ss-select { 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='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; cursor:pointer; }
.ss-toggle { display:flex; align-items:center; gap:8px; margin-top:4px; }
.ss-toggle input[type=checkbox] { width:16px; height:16px; cursor:pointer; accent-color:#2563eb; }
.ss-toggle label { font-size:13px; color:#374151; cursor:pointer; }
.test-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:500; padding:5px 12px; border-radius:6px;
  border:1px solid #d1d5db; background:#fff; color:#374151;
  cursor:pointer; transition:background .1s; white-space:nowrap;
}
.test-btn:hover { background:#f3f4f6; }
.test-btn.danger { border-color:#fca5a5; color:#dc2626; }
.test-btn.danger:hover { background:#fee2e2; }
.test-result {
  font-size:12px; padding:4px 10px; border-radius:5px;
  display:none; margin-left:8px;
}
.test-result.ok  { background:#dcfce7; color:#166534; display:inline-block; }
.test-result.err { background:#fee2e2; color:#991b1b; display:inline-block; }
.restart-banner {
  display:none; align-items:center; gap:10px;
  background:#fefce8; border:1px solid #fde68a; border-radius:10px;
  padding:12px 18px; margin-bottom:20px; font-size:13px; color:#713f12;
}
.restart-banner.visible { display:flex; }
.ss-save-bar {
  position:sticky; bottom:0; background:#fff; border-top:1px solid #e5e7eb;
  padding:14px 24px; display:flex; align-items:center; gap:12px;
  margin: 0 -24px; z-index:10;
}
.ss-save-msg { font-size:13px; color:#16a34a; display:none; }
.ss-save-msg.visible { display:block; }
.ss-save-msg.err { color:#dc2626; }

/* ══════════════════════════════════════════
   domains_theme.ejs
══════════════════════════════════════════ */
/* ── 탭 ── */
.theme-tabs { display:flex; gap:0; border-bottom:1px solid #e5e7eb; margin-bottom:24px; }
.theme-tab  { padding:10px 20px; font-size:13px; font-weight:500; color:#6b7280; cursor:pointer;
              border-bottom:2px solid transparent; transition:all .15s; user-select:none; }
.theme-tab:hover  { color:#374151; }
.theme-tab.active { color:#1a73e8; border-bottom-color:#1a73e8; }
.theme-panel      { display:none; }
.theme-panel.active { display:block; }

/* ── 공통 폼 ── */
.tr-section { margin-bottom:28px; }
.tr-section-title { font-size:12px; font-weight:600; color:#9ca3af; text-transform:uppercase;
                    letter-spacing:.05em; margin-bottom:12px; }
.tr-row     { display:flex; align-items:center; gap:16px; padding:10px 0;
              border-bottom:1px solid #f3f4f6; }
.tr-row:last-child { border-bottom:none; }
.tr-label   { width:160px; flex-shrink:0; font-size:13px; color:#374151; font-weight:500; }
.tr-desc    { font-size:11px; color:#9ca3af; margin-top:2px; }
.tr-control { flex:1; }

.tr-input   { width:100%; max-width:280px; height:34px; padding:0 10px; border:1px solid #d1d5db;
              border-radius:6px; font-size:13px; color:#111827; outline:none; }
.tr-input:focus { border-color:#1a73e8; box-shadow:0 0 0 2px rgba(26,115,232,.15); }
.tr-input-sm { max-width:100px; }
.tr-color   { width:40px; height:34px; padding:2px; border:1px solid #d1d5db; border-radius:6px;
              cursor:pointer; background:#fff; }
.tr-color-wrap { display:flex; align-items:center; gap:8px; }
.tr-color-hex  { width:90px; height:34px; padding:0 8px; border:1px solid #d1d5db;
                 border-radius:6px; font-size:13px; font-family:monospace; outline:none; }
.tr-color-hex:focus { border-color:#1a73e8; }

/* ── 업로드 영역 ── */
.tr-upload  { display:flex; align-items:center; gap:16px; }
.tr-preview { width:80px; height:50px; border:1px solid #e5e7eb; border-radius:8px;
              background:#f9fafb; object-fit:contain; display:flex; align-items:center;
              justify-content:center; overflow:hidden; flex-shrink:0; }
.tr-preview img  { max-width:100%; max-height:100%; object-fit:contain; }
.tr-preview-fav  { width:40px; height:40px; border-radius:6px; }
.tr-preview-empty { color:#d1d5db; }
.tr-upload-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
                 border:1px solid #d1d5db; border-radius:6px; font-size:12px; font-weight:500;
                 color:#374151; background:#fff; cursor:pointer; transition:all .15s; }
.tr-upload-btn:hover { border-color:#1a73e8; color:#1a73e8; }
.tr-upload-info { font-size:11px; color:#9ca3af; margin-top:4px; }

/* ── 라디오 그룹 ── */
.tr-radio-group { display:flex; gap:8px; flex-wrap:wrap; }
.tr-radio-opt   { display:flex; align-items:center; gap:6px; padding:6px 14px;
                  border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-size:13px;
                  color:#374151; transition:all .15s; user-select:none; }
.tr-radio-opt:has(input:checked) { border-color:#1a73e8; color:#1a73e8; background:rgba(26,115,232,.05); }
.tr-radio-opt input { display:none; }

/* ── 토글 ── */
.tr-toggle  { position:relative; width:40px; height:22px; }
.tr-toggle input { opacity:0; width:0; height:0; }
.tr-toggle-slider { position:absolute; inset:0; background:#d1d5db; border-radius:11px;
                    cursor:pointer; transition:background .2s; }
.tr-toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
                             background:#fff; border-radius:50%; transition:transform .2s; }
.tr-toggle input:checked + .tr-toggle-slider { background:#1a73e8; }
.tr-toggle input:checked + .tr-toggle-slider::before { transform:translateX(18px); }

/* ── 슬라이더 ── */
.tr-range    { width:200px; accent-color:#1a73e8; }
.tr-range-wrap { display:flex; align-items:center; gap:10px; }
.tr-range-val  { width:44px; text-align:center; font-size:13px; color:#374151; font-weight:500; }

/* ── 버튼 프리뷰 ── */
.tr-btn-preview { margin-top:20px; padding:16px 20px; background:#f9fafb; border:1px solid #e5e7eb;
                  border-radius:8px; display:flex; flex-direction:column; gap:10px; }
.tr-btn-preview-label { font-size:12px; font-weight:600; color:#6b7280; }
.tr-btn-preview-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tr-btn-preview-tag { font-size:11px; color:#9ca3af; min-width:68px; flex-shrink:0; }

/* ── 저장 버튼 ── */
.tr-save-wrap { margin-top:28px; padding-top:20px; border-top:1px solid #e5e7eb; display:flex; gap:10px; align-items:center; }
.tr-save-msg  { font-size:13px; }
.tr-save-msg.ok  { color:#16a34a; }
.tr-save-msg.err { color:#dc2626; }

/* ── 홈구성 카드 그리드 ── */
.home-page-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; }
.home-page-card { display:flex; flex-direction:column; align-items:center; gap:6px;
                  padding:18px 12px; border:2px solid #e5e7eb; border-radius:10px;
                  cursor:pointer; transition:all .15s; text-align:center; user-select:none;
                  background:#fff; }
.home-page-card:hover { border-color:#93c5fd; background:#eff6ff; }
.home-page-card.selected { border-color:#1a73e8; background:rgba(26,115,232,.06); }
.home-page-icon { width:44px; height:44px; border-radius:10px; background:#f1f5f9;
                  display:flex; align-items:center; justify-content:center; color:#64748b;
                  transition:all .15s; }
.home-page-card.selected .home-page-icon { background:#dbeafe; color:#1a73e8; }
.home-page-label { font-size:13px; font-weight:600; color:#1e293b; }
.home-page-desc  { font-size:11px; color:#94a3b8; line-height:1.4; }

/* ══════════════════════════════════════════
   editor.ejs
══════════════════════════════════════════ */
body.page-editor { height: 100%; overflow: hidden; background: #2c2c2c; }
#onlyoffice-editor { width: 100%; height: 100%; position: absolute; inset: 0; }
#oo-loading {
  position: fixed; inset: 0; background: #1e293b;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  z-index: 999; transition: opacity .35s;
}
#oo-loading-spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #60a5fa;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
#oo-loading-text { color: #94a3b8; font: 13px/1 'Malgun Gothic', sans-serif; }
#oo-error {
  display: none; flex-direction: column; align-items: center; gap: 12px;
  position: fixed; inset: 0; background: #1e293b;
  justify-content: center; z-index: 998;
}
#oo-error-icon { color: #f87171; font-size: 36px; }
#oo-error-msg  { color: #f1f5f9; font: 14px/1.5 'Malgun Gothic', sans-serif; text-align: center; max-width: 400px; }
#oo-error-sub  { color: #64748b; font: 12px/1.5 sans-serif; text-align: center; max-width: 400px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════
   mail_compose.ejs
══════════════════════════════════════════ */
body.page-compose { height:100%; }

/* ── 전체 레이아웃 ── */
body.page-compose #main {
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
.compose-wrap {
  display:flex; flex-direction:column; flex:1; min-height:0; background:#fff; overflow:hidden;
}

/* ── 헤더 툴바 ── */
.compose-toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-bottom:1px solid #e8eaed; flex-shrink:0; background:#fafafa;
}
.compose-toolbar-sep { width:1px; height:20px; background:#e2e5ea; margin:0 2px; }

/* ── 발신 계정 선택 ── */
.compose-from-bar {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; border-bottom:1px solid #f0f0f0; flex-shrink:0; background:#fff;
}
.compose-from-label { font-size:12px; font-weight:600; color:#6b7280; white-space:nowrap; min-width:60px; }
.compose-from-select {
  flex:1; max-width:420px; padding:5px 10px; border:1px solid #e2e5ea; border-radius:6px;
  font-size:13px; color:#111; outline:none; background:#fff; cursor:pointer;
}
.compose-from-select:focus { border-color:#1a73e8; }
.compose-no-account { font-size:13px; color:#dc2626; display:flex; align-items:center; gap:6px; }

/* ── 수신자 필드 ── */
.compose-fields { flex-shrink:0; }
.compose-field-row {
  display:flex; align-items:flex-start; min-height:38px;
  border-bottom:1px solid #f0f0f0; padding:0 16px;
}
.compose-field-lbl {
  font-size:12px; font-weight:600; color:#6b7280; white-space:nowrap;
  min-width:60px; padding-top:10px; line-height:1.4;
}
.compose-field-row-btns {
  display:flex; align-items:center; gap:4px; padding-top:7px; padding-left:6px; flex-shrink:0;
}
.compose-cc-toggle {
  font-size:11px; padding:2px 8px; border:1px solid #e2e5ea; border-radius:4px;
  background:#f9fafb; color:#6b7280; cursor:pointer; transition:all .12s;
}
.compose-cc-toggle:hover { background:#eff6ff; border-color:#1a73e8; color:#1a73e8; }

/* 수신자 태그 입력 */
.recipient-field {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  flex:1; padding:6px 0; min-height:36px; cursor:text;
}
.recipient-tag {
  display:inline-flex; align-items:center; gap:4px;
  background:var(--nav-active-bg); color:#1a56db; border-radius:4px;
  padding:2px 6px; font-size:12px; font-weight:500; max-width:260px;
}
.recipient-tag.invalid { background:#fee2e2; color:#dc2626; }
.recipient-tag-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recipient-tag-remove {
  background:none; border:none; cursor:pointer; padding:0 2px;
  color:inherit; opacity:.6; line-height:1; font-size:14px;
}
.recipient-tag-remove:hover { opacity:1; }
.recipient-input {
  border:none; outline:none; font-size:13px; color:#111; flex:1; min-width:180px;
  padding:2px 0; background:transparent;
}
.recipient-input::placeholder { color:#ccc; }
.recipient-dropdown {
  display:none; position:absolute; background:#fff; border:1px solid #e2e5ea;
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.12);
  z-index:200; min-width:280px; max-height:240px; overflow-y:auto;
}
.recipient-dropdown-item {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; cursor:pointer; transition:background .1s;
}
.recipient-dropdown-item:hover { background:#f5f8ff; }
.recipient-dropdown-av {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#fff;
}
.recipient-dropdown-name { font-size:13px; color:#111; font-weight:500; }
.recipient-dropdown-email { font-size:11px; color:#888; }

/* ── 제목 ── */
.compose-subject-input {
  border:none; outline:none; font-size:14px; font-weight:500; color:#111;
  flex:1; padding:10px 0; background:transparent;
}
.compose-subject-input::placeholder { color:#ccc; font-weight:400; }

/* ── 에디터 ── */
.compose-editor-wrap { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.compose-editor-wrap .tox-tinymce { flex:1; border:none !important; box-shadow:none !important; border-radius:0 !important; }

/* ── 첨부 ── */
.compose-attachments { flex-shrink:0; padding:8px 16px; border-top:1px solid #f0f0f0; display:none; }
.compose-attach-list { display:flex; flex-wrap:wrap; gap:8px; }
.compose-attach-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:#f3f4f6; border:1px solid #e5e7eb; border-radius:6px;
  padding:4px 8px; font-size:12px; color:#374151; max-width:220px;
}
.compose-attach-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.compose-attach-chip-size { font-size:11px; color:#9ca3af; flex-shrink:0; }
.compose-attach-del {
  background:none; border:none; cursor:pointer; color:#9ca3af;
  padding:0 2px; font-size:14px; line-height:1; flex-shrink:0;
}
.compose-attach-del:hover { color:#dc2626; }

/* ── 토스트 ── */
.compose-toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#323232; color:#fff; font-size:13px; padding:10px 22px;
  border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.2);
  z-index:9999; pointer-events:none; opacity:0; transition:opacity .25s;
}
.compose-toast.show { opacity:1; }

/* ── 버튼 ── */
.cmp-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; padding:6px 14px; border-radius:6px;
  cursor:pointer; font-weight:500; border:none; transition:all .12s; white-space:nowrap;
}
.cmp-btn-primary { background:#1a73e8; color:#fff; }
.cmp-btn-primary:hover { background:#1558b0; }
.cmp-btn-primary:disabled { opacity:.55; cursor:not-allowed; }
.cmp-btn-secondary { background:#f3f4f6; color:#374151; border:1px solid #e2e5ea; }
.cmp-btn-secondary:hover { background:#e5e7eb; }
.cmp-btn-ghost { background:none; color:#374151; border:1px solid #e2e5ea; }
.cmp-btn-ghost:hover { background:#f9fafb; }

/* ══════════════════════════════════════════
   mail_dashboard.ejs
══════════════════════════════════════════ */
/* ── 레이아웃 ── */
.mail-layout { display:flex; gap:0; height:100%; overflow:hidden; }

/* ── 왼쪽: 전송 목록 패널 ── */
.mail-list-panel {
  width:300px; min-width:240px; flex-shrink:0;
  border-right:1px solid #e5e7eb;
  display:flex; flex-direction:column; overflow:hidden; background:#fafafa;
}
.mail-list-header {
  padding:14px 14px 10px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
.mail-list-title { font-size:13px; font-weight:700; color:#111827; }
.mail-list-title span { font-weight:400; color:#9ca3af; font-size:12px; margin-left:4px; }


/* 검색 */
.mail-search-wrap {
  padding:8px 10px; border-bottom:1px solid #e5e7eb; flex-shrink:0; background:#fafafa;
}
.mail-search-input {
  width:100%; padding:6px 10px; border:1px solid #e2e5ea; border-radius:6px;
  font-size:12px; color:#374151; outline:none; background:#fff;
  font-family:inherit; box-sizing:border-box;
}
.mail-search-input:focus { border-color:#1a73e8; }

/* 목록 */
.mail-sent-list { flex:1; overflow-y:auto; }
.mail-sent-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 14px; border-bottom:1px solid #f0f2f5;
  cursor:pointer; transition:background .1s;
}
.mail-sent-item:hover { background:#f3f4f6; }
.mail-sent-item.active { background:#eff6ff; }
.mail-sent-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
}
.mail-sent-body { flex:1; min-width:0; }
.mail-sent-to {
  font-size:12px; font-weight:600; color:#374151;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mail-sent-subject {
  font-size:12.5px; color:#111827; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.mail-sent-preview {
  font-size:11.5px; color:#9ca3af;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;
}
.mail-sent-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.mail-sent-date { font-size:11px; color:#9ca3af; white-space:nowrap; }
.mail-attach-icon { color:#9ca3af; }

/* 빈 상태 */
.mail-sent-empty {
  padding:60px 20px; text-align:center; color:#9ca3af;
}
.mail-sent-empty svg { display:block; margin:0 auto 12px; opacity:.35; }
.mail-sent-empty p { font-size:13px; margin:0; }

/* ── 오른쪽: 뷰어 패널 ── */
.mail-viewer-panel {
  flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; background:#fff;
}

/* placeholder */
.mail-placeholder {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; color:#9ca3af;
}
.mail-placeholder svg { opacity:.3; }
.mail-placeholder p { font-size:13px; margin:0; }

/* 뷰어 */
.mail-viewer-wrap { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.mail-viewer-header {
  padding:18px 24px 14px; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
.mail-viewer-subject { font-size:17px; font-weight:700; color:#111827; margin:0 0 12px; }
.mail-viewer-meta-grid {
  display:flex; flex-direction:column; gap:4px;
}
.mail-viewer-meta-row {
  display:flex; align-items:baseline; gap:8px; font-size:12px;
}
.mail-viewer-meta-lbl { color:#9ca3af; font-weight:600; min-width:56px; flex-shrink:0; }
.mail-viewer-meta-val { color:#374151; }
.mail-viewer-body {
  flex:1; overflow:hidden; display:flex; flex-direction:column;
}
.mail-viewer-body iframe {
  flex:1; border:none; width:100%; display:block;
}

/* ══════════════════════════════════════════
   roles.ejs
══════════════════════════════════════════ */
/* ── 폼 ── */
.um-row { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
.um-label { font-size:11px; font-weight:600; color:#555; text-transform:uppercase; letter-spacing:0.4px; }
.um-input {
  height:36px; padding:0 10px; border:1px solid #e2e5ea; border-radius:7px;
  font-size:13px; color:#1a202c; outline:none; font-family:inherit; transition:border 0.15s;
}
.um-input:focus { border-color:#2563eb; }
.um-input:disabled { background:#f8f9fb; color:#aaa; cursor:not-allowed; }
.um-textarea {
  padding:8px 10px; border:1px solid #e2e5ea; border-radius:7px;
  font-size:13px; color:#1a202c; outline:none; font-family:inherit; resize:vertical;
  min-height:60px; transition:border 0.15s;
}
.um-textarea:focus { border-color:#2563eb; }
.um-select { 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='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:28px; cursor:pointer; }
.um-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* ── 테이블 정렬 ── */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table th.sortable:hover { color: #374151; background: #f9fafb; }
.data-table th .sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.data-table th.sortable:hover .sort-icon { opacity: 0.6; }
.data-table th.sort-asc  .sort-icon,
.data-table th.sort-desc .sort-icon { opacity: 1; }
.sort-icon .arr-up,
.sort-icon .arr-dn {
  display: block; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.sort-icon .arr-up { border-bottom: 5px solid #9ca3af; }
.sort-icon .arr-dn { border-top:    5px solid #9ca3af; }
.data-table th.sort-asc  .sort-icon .arr-up { border-bottom-color: #2563eb; }
.data-table th.sort-desc .sort-icon .arr-dn { border-top-color:    #2563eb; }
.role-name-link { display:inline-flex; align-items:center; gap:6px; color:#1a73e8; text-decoration:none; transition:color .12s; }
.role-name-link:hover { color:#1557b0; text-decoration:underline; }
.role-name-link svg { color:#6b7280; flex-shrink:0; }
.role-perm-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid #e5e7eb; border-radius:6px; font-size:11.5px; color:#374151; text-decoration:none; background:#fafafa; transition:background .12s,border-color .12s; white-space:nowrap; }
.role-perm-btn:hover { background:#eff6ff; border-color:#bfdbfe; color:#1a73e8; }

/* ══════════════════════════════════════════
   roles_detail.ejs
══════════════════════════════════════════ */
.rd-back { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#6b7280; text-decoration:none; margin-bottom:16px; transition:color .12s; }
.rd-back:hover { color:#1a73e8; }

.rd-meta-card { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:18px 20px; margin-bottom:18px; display:flex; align-items:flex-start; gap:16px; }
.rd-role-icon { width:42px; height:42px; border-radius:10px; background:#eff6ff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rd-meta-info { flex:1; min-width:0; }
.rd-meta-name { font-size:16px; font-weight:700; color:#111827; margin-bottom:2px; }
.rd-meta-desc { font-size:12px; color:#9ca3af; }
.rd-meta-edit-btn { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border:1px solid #e5e7eb; border-radius:7px; font-size:12px; color:#374151; background:#fff; cursor:pointer; font-family:inherit; transition:background .12s; }
.rd-meta-edit-btn:hover { background:#f3f4f6; }

.rd-section { background:#fff; border:1px solid #e5e7eb; border-radius:10px; margin-bottom:14px; overflow:hidden; }
.rd-section-hdr { display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid #f3f4f6; background:#fafafa; }
.rd-section-ttl { font-size:12px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.5px; }
.rd-section-cnt { font-size:11px; color:#9ca3af; background:#f3f4f6; padding:1px 7px; border-radius:10px; }
.rd-perm-grid { padding:6px 0; }
.rd-perm-row { display:flex; align-items:center; justify-content:space-between; padding:9px 18px; border-bottom:1px solid #f9fafb; transition:background .1s; }
.rd-perm-row:last-child { border-bottom:none; }
.rd-perm-row:hover { background:#fafafa; }
.rd-perm-label { display:flex; flex-direction:column; gap:2px; }
.rd-perm-name { font-size:13px; color:#111827; font-weight:500; }
.rd-perm-key  { font-size:10.5px; color:#d1d5db; font-family:monospace; }

/* toggle switch */
.rd-toggle { position:relative; width:40px; height:22px; flex-shrink:0; }
.rd-toggle input { opacity:0; width:0; height:0; position:absolute; }
.rd-toggle-slider { position:absolute; inset:0; background:#e5e7eb; border-radius:11px; cursor:pointer; transition:background .2s; }
.rd-toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.rd-toggle input:checked + .rd-toggle-slider { background:#1a73e8; }
.rd-toggle input:checked + .rd-toggle-slider::before { transform:translateX(18px); }

.rd-footer { position:sticky; bottom:0; background:#fff; border-top:1px solid #e5e7eb; padding:12px 0 0; margin-top:4px; display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.rd-save-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 20px; background:#1a73e8; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s; }
.rd-save-btn:hover { background:#1557b0; }
.rd-save-btn:disabled { opacity:.5; cursor:default; }
.rd-cancel-btn { padding:8px 16px; background:none; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; color:#374151; cursor:pointer; font-family:inherit; transition:background .12s; }
.rd-cancel-btn:hover { background:#f3f4f6; }
.rd-status { font-size:12px; color:#16a34a; display:none; }
.rd-status.err { color:#dc2626; }

/* inline edit (중복 제거됨 — roles.ejs 폼은 위 공통 .um-* 규칙 사용) */

/* ══════════════════════════════════════════
   search.ejs
══════════════════════════════════════════ */
/* ── Search Page Layout ── */
.sr-page { margin:0; padding:20px 24px 48px; }

/* Search bar */
.sr-bar-wrap { margin-bottom:20px; }
.sr-bar { display:flex; align-items:center; gap:10px; background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:10px 16px; box-shadow:0 1px 6px rgba(0,0,0,.06); transition:border-color .15s, box-shadow .15s; }
.sr-bar:focus-within { border-color:#1a73e8; box-shadow:0 0 0 3px rgba(26,115,232,.10); }
.sr-bar svg { color:#9ca3af; flex-shrink:0; }
.sr-bar-input { flex:1; border:none; outline:none; font-size:15px; color:#111827; background:none; font-family:inherit; }
.sr-bar-input::placeholder { color:#c4c9d4; }
.sr-bar-btn { padding:7px 18px; background:#1a73e8; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .12s; }
.sr-bar-btn:hover { background:#1557b0; }

/* Stats */
.sr-stats { font-size:13px; color:#6b7280; margin-bottom:16px; }
.sr-stats strong { color:#111827; font-weight:700; }

/* Category tabs */
.sr-tabs { display:flex; gap:6px; margin-bottom:24px; flex-wrap:wrap; }
.sr-tab { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px solid #e5e7eb; border-radius:20px; font-size:12.5px; font-weight:500; color:#374151; cursor:pointer; background:#fff; text-decoration:none; transition:background .12s, border-color .12s, color .12s; }
.sr-tab:hover { background:#f3f4f6; border-color:#d1d5db; }
.sr-tab.active { background:#eff6ff; border-color:#1a73e8; color:#1a73e8; font-weight:600; }
.sr-tab-cnt { display:inline-flex; align-items:center; justify-content:center; min-width:20px; padding:0 5px; height:18px; background:#e5e7eb; color:#374151; border-radius:9px; font-size:11px; font-weight:600; }
.sr-tab.active .sr-tab-cnt { background:#dbeafe; color:#1d4ed8; }

/* Section header */
.sr-section-hd { display:flex; align-items:center; justify-content:space-between; margin:28px 0 12px; }
.sr-section-hd:first-child { margin-top:0; }
.sr-section-title { font-size:13px; font-weight:700; color:#374151; display:flex; align-items:center; gap:7px; }
.sr-section-title svg { color:#1a73e8; }
.sr-section-more { font-size:12px; color:#1a73e8; text-decoration:none; font-weight:500; white-space:nowrap; }
.sr-section-more:hover { text-decoration:underline; }

/* Result cards */
.sr-list { display:flex; flex-direction:column; gap:6px; }
.sr-card { display:flex; align-items:center; gap:14px; padding:12px 16px; background:#fff; border:1.5px solid #f3f4f6; border-radius:12px; text-decoration:none; color:inherit; transition:background .12s, border-color .12s, box-shadow .12s; cursor:pointer; }
.sr-card:hover { background:#fafbff; border-color:#dbeafe; box-shadow:0 2px 8px rgba(26,115,232,.08); }
.sr-card-ico { width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:10px; background:#f9fafb; }
.sr-card-ico img { width:32px; height:32px; object-fit:contain; }
.sr-card-ico.note-ico { background:#ede9fe; }
.sr-card-body { flex:1; min-width:0; }
.sr-card-name { font-size:13.5px; font-weight:600; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.sr-card-name mark { background:#fef9c3; color:#854d0e; border-radius:2px; padding:0 2px; font-style:normal; }
.sr-card-snippet { font-size:12px; color:#6b7280; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; margin-bottom:4px; }
.sr-card-snippet mark { background:#fef9c3; color:#854d0e; border-radius:2px; padding:0 2px; font-style:normal; }
.sr-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sr-card-meta-item { font-size:11px; color:#9ca3af; display:flex; align-items:center; gap:3px; }
.sr-card-tags { display:flex; gap:4px; flex-wrap:wrap; }
.sr-tag { display:inline-block; padding:1px 7px; background:#ede9fe; color:#5b21b6; border-radius:8px; font-size:10.5px; font-weight:500; }
.sr-card-right { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.sr-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:10px; font-size:11px; font-weight:600; }
.sr-badge.file   { background:#eff6ff; color:#1d4ed8; }
.sr-badge.folder { background:#fef3c7; color:#92400e; }
.sr-badge.note   { background:#ede9fe; color:#5b21b6; }
.sr-date { font-size:11px; color:#d1d5db; }

/* Empty / initial state */
.sr-empty { text-align:center; padding:24px 16px; color:#aaa; font-size:13px; }
.sr-empty svg { display:block; margin:0 auto 16px; opacity:.35; }
.sr-empty-title { font-size:15px; font-weight:600; color:#374151; margin-bottom:6px; }
.sr-empty-sub { font-size:13px; }

/* Pagination */
.sr-pager { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:28px; }
.sr-pager-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:13px; font-weight:500; color:#374151; cursor:pointer; background:#fff; text-decoration:none; transition:background .12s, border-color .12s; }
.sr-pager-btn:hover { background:#f3f4f6; border-color:#d1d5db; }
.sr-pager-btn.active { background:#1a73e8; border-color:#1a73e8; color:#fff; }
.sr-pager-btn.disabled { opacity:.35; pointer-events:none; }

/* No results sub-section */
.sr-subsection-empty { padding:20px 16px; background:#f9fafb; border:1.5px dashed #e5e7eb; border-radius:10px; text-align:center; color:#9ca3af; font-size:12.5px; }

/* ══════════════════════════════════════════
   settings_auto_reply.ejs
══════════════════════════════════════════ */
.ar-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:22px 24px;margin-bottom:20px}
.ar-section-title{font-size:14px;font-weight:600;color:#111;margin-bottom:14px;display:flex;align-items:center;gap:8px}
/* 토글 */
.ar-toggle{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer;flex-shrink:0}
.ar-toggle input{opacity:0;width:0;height:0}
.ar-toggle-track{position:absolute;inset:0;border-radius:11px;background:#d1d5db;transition:background .2s}
.ar-toggle input:checked+.ar-toggle-track{background:#1a73e8}
.ar-toggle-thumb{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ar-toggle input:checked~.ar-toggle-thumb{left:21px}
/* 행 레이아웃 */
.ar-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #f3f4f6}
.ar-row:last-child{border-bottom:none;padding-bottom:0}
.ar-row:first-child{padding-top:0}
.ar-row-label{font-size:13px;font-weight:500;color:#374151}
.ar-row-desc{font-size:11px;color:#9ca3af;margin-top:2px}
.ar-row-ctrl{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* 입력 */
.ar-input,.ar-select{padding:8px 12px;border:1px solid #e2e5ea;border-radius:7px;font-size:13px;color:#111;outline:none;background:#fff}
.ar-input:focus,.ar-select:focus{border-color:#1a73e8}
.ar-input-wide{min-width:280px}
.ar-input-date{min-width:150px}
/* 체크박스 */
.ar-check-label{display:flex;align-items:center;gap:7px;font-size:13px;color:#374151;cursor:pointer;padding:6px 12px;border:1px solid #e5e7eb;border-radius:7px}
.ar-check-label:has(input:checked){border-color:#1a73e8;background:#eff6ff;color:#1a73e8}
.ar-check-label input{accent-color:#1a73e8}
/* 발송 제한 라디오 */
.ar-limit-group{display:flex;gap:10px;flex-wrap:wrap}
.ar-limit-card{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;font-size:13px;color:#374151;transition:all .15s}
.ar-limit-card:has(input:checked){border-color:#1a73e8;background:#eff6ff;color:#1a73e8;font-weight:500}
.ar-limit-card input{accent-color:#1a73e8}
/* 통계 카드 */
.ar-stat-wrap{display:flex;gap:12px;margin-bottom:4px}
.ar-stat-card{flex:1;background:#f9fafb;border:1px solid #f0f0f0;border-radius:8px;padding:14px 18px;text-align:center}
.ar-stat-num{font-size:22px;font-weight:700;color:#1a73e8}
.ar-stat-label{font-size:11px;color:#9ca3af;margin-top:3px}
/* 상태 배너 */
.ar-banner{display:flex;align-items:center;gap:8px;border-radius:8px;padding:10px 16px;margin-bottom:18px;font-size:13px}
.ar-banner--ok {background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.ar-banner--err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.ar-banner--active{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
/* 활성 상태 뱃지 */
.ar-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:12px}
.ar-status-badge--on {background:#dcfce7;color:#166534}
.ar-status-badge--off{background:#f3f4f6;color:#9ca3af}

/* ══════════════════════════════════════════
   settings_calendar_personal.ejs
══════════════════════════════════════════ */
/* ── 업무시간 테이블 ── */
.wh-table {
  width: 100%;
  border-collapse: collapse;
}
.wh-table th {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-align: left;
  padding: 8px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}
.wh-table th:not(:first-child) { text-align: center; }
.wh-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.wh-table td:not(:first-child) { text-align: center; }
.wh-table tr:last-child td { border-bottom: none; }
.wh-table tr.wh-weekend td:first-child { color: #dc2626; }
.wh-table tr.wh-sun td:first-child { color: #dc2626; }
.wh-table tr.wh-sat td:first-child { color: #2563eb; }
.wh-day-name {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wh-time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wh-time-cell .settings-select {
  min-width: 90px;
  padding: 6px 28px 6px 10px;
  font-size: 12px;
}
.wh-row-disabled .wh-time-cell .settings-select {
  opacity: 0.35;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   settings_external.ejs
══════════════════════════════════════════ */
.ext-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:22px 24px;margin-bottom:20px}
.ext-section-title{font-size:14px;font-weight:600;color:#111;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.ext-section-desc{font-size:12px;color:#9ca3af;margin-bottom:18px}
/* 계정 카드 */
.ext-card-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ext-card{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb}
.ext-card-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ext-card-info{flex:1;min-width:0}
.ext-card-label{font-size:13px;font-weight:500;color:#1a202c}
.ext-card-sub{font-size:11px;color:#9ca3af;margin-top:1px}
.ext-card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ext-toggle{position:relative;display:inline-block;width:34px;height:18px;cursor:pointer}
.ext-toggle input{opacity:0;width:0;height:0}
.ext-toggle-track{position:absolute;inset:0;border-radius:9px;background:#d1d5db;transition:background .2s}
.ext-toggle input:checked+.ext-toggle-track{background:#1a73e8}
.ext-toggle-thumb{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.ext-toggle input:checked~.ext-toggle-thumb{left:18px}
.ext-btn-icon{background:none;border:none;cursor:pointer;padding:5px;border-radius:6px;color:#6b7280;display:flex;align-items:center}
.ext-btn-icon:hover{background:#f3f4f6;color:#111}
.ext-btn-icon.del:hover{background:#fee2e2;color:#dc2626}
.ext-empty{font-size:12px;color:#b0b7c3;text-align:center;padding:14px;background:#f9fafb;border-radius:7px;border:1px dashed #e5e7eb;margin-bottom:14px}
/* 폼 */
.ext-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.ext-form-grid.single{grid-template-columns:1fr}
.ext-field-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.ext-input,.ext-select{width:100%;padding:8px 12px;border:1px solid #e2e5ea;border-radius:7px;font-size:13px;color:#111;outline:none;background:#fff;box-sizing:border-box}
.ext-input:focus,.ext-select:focus{border-color:#1a73e8}
.ext-input-row{display:flex;gap:8px;align-items:flex-end}
.ext-input-row .ext-input{flex:1}
.ext-port-input{width:90px!important;flex-shrink:0}
.ext-ssl-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#374151;cursor:pointer;white-space:nowrap}
.ext-ssl-label input{accent-color:#1a73e8}
.ext-save-bar{display:flex;justify-content:flex-end;margin-top:14px}
/* AI 제공자 카드 */
.ext-provider-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.ext-provider-card{border:1.5px solid #e5e7eb;border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.ext-provider-card:has(input:checked){border-color:#1a73e8;background:#eff6ff}
.ext-provider-card input{display:none}
.ext-provider-card .ext-provider-logo{font-size:22px;margin-bottom:4px}
.ext-provider-card .ext-provider-name{font-size:12px;font-weight:500;color:#374151}
.ext-provider-card:has(input:checked) .ext-provider-name{color:#1a73e8}
/* 스토리지 */
.ext-storage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ext-storage-card{border:1.5px solid #e5e7eb;border-radius:8px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s}
.ext-storage-card:hover{border-color:#1a73e8;background:#f8fbff}
.ext-storage-card.connected{border-color:#15803d;background:#f0fdf4}
.ext-storage-card .ext-storage-logo{font-size:26px;margin-bottom:6px}
.ext-storage-card .ext-storage-name{font-size:12px;font-weight:500;color:#374151}
.ext-storage-card.connected .ext-storage-name{color:#15803d}
.ext-storage-card .ext-storage-status{font-size:11px;color:#9ca3af;margin-top:3px}
.ext-storage-card.connected .ext-storage-status{color:#15803d}
.ext-badge-on{display:inline-block;font-size:10px;padding:1px 6px;border-radius:8px;background:#dcfce7;color:#15803d;font-weight:600}
/* 스피너 */
@keyframes spin { to { transform: rotate(360deg); } }
/* API 키 마스킹 */
.ext-key-wrap{position:relative}
.ext-key-wrap .ext-input{padding-right:36px}
.ext-key-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#9ca3af;padding:2px}
.ext-key-toggle:hover{color:#374151}

/* ══════════════════════════════════════════
   settings_reminder.ejs
══════════════════════════════════════════ */
.rem-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rem-empty{padding:40px;text-align:center;color:#9ca3af;font-size:13px;background:#f9fafb;border-radius:8px;border:1px solid #f0f0f0}
.rem-toggle{position:relative;display:inline-block;width:34px;height:18px;cursor:pointer}
.rem-toggle input{opacity:0;width:0;height:0}
.rem-toggle-track{position:absolute;inset:0;border-radius:9px;background:#d1d5db;transition:background .2s}
.rem-toggle input:checked+.rem-toggle-track{background:#1a73e8}
.rem-toggle-thumb{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rem-toggle input:checked~.rem-toggle-thumb{left:18px}
.rem-badge{display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500}
.rem-badge--email{background:#eff6ff;color:#1d4ed8}
.rem-badge--browser{background:#f0fdf4;color:#15803d}
.rem-badge--both{background:#faf5ff;color:#7e22ce}
.rem-count-badge{display:inline-block;font-size:11px;padding:1px 6px;border-radius:10px;background:#f3f4f6;color:#6b7280;font-weight:500}
.rem-action-btn{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:5px;color:#6b7280;display:inline-flex;align-items:center;transition:background .12s,color .12s}
.rem-action-btn:hover{background:#f3f4f6;color:#111}
.rem-action-btn.del:hover{background:#fee2e2;color:#dc2626}
.rem-time-main{font-size:13px;color:#1a202c}
/* 모달 */
.rem-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:flex-start;justify-content:center;padding:20px 0;overflow-y:auto}
.rem-overlay.open{display:flex}
.rem-box{background:#fff;border-radius:12px;width:600px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,.18);display:flex;flex-direction:column;margin:auto}
.rem-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 14px;border-bottom:1px solid #f0f0f0;position:sticky;top:0;background:#fff;z-index:1;border-radius:12px 12px 0 0}
.rem-modal-title{font-size:15px;font-weight:600;color:#111}
.rem-modal-close{background:none;border:none;cursor:pointer;font-size:20px;color:#aaa;line-height:1;padding:0 4px}
.rem-modal-close:hover{color:#333}
.rem-modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.rem-field-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:5px}
.rem-input,.rem-select{width:100%;padding:8px 12px;border:1px solid #e2e5ea;border-radius:7px;font-size:13px;color:#111;outline:none;background:#fff;box-sizing:border-box}
.rem-input:focus,.rem-select:focus{border-color:#1a73e8}
.rem-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rem-modal-footer{padding:14px 24px;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:#fff;border-radius:0 0 12px 12px}
.rem-hint{font-size:11px;color:#9ca3af;margin-top:4px}
/* 조건/실행 섹션 */
.rem-section-label{font-size:13px;font-weight:600;color:#374151;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rem-add-row-btn{font-size:12px;padding:3px 10px;border:1px solid #1a73e8;color:#1a73e8;background:#fff;border-radius:5px;cursor:pointer;transition:background .12s}
.rem-add-row-btn:hover{background:#eff6ff}
.rem-cond-row,.rem-act-row{display:flex;align-items:flex-start;gap:6px;margin-bottom:6px;background:#f9fafb;padding:8px 10px;border-radius:7px;border:1px solid #f0f0f0}
.rem-cond-row select,.rem-act-row select{flex:none}
.rem-cond-val{flex:1;min-width:0}
.rem-cond-del,.rem-act-del{background:none;border:none;cursor:pointer;color:#9ca3af;padding:2px 4px;border-radius:4px;margin-top:2px;flex-shrink:0}
.rem-cond-del:hover,.rem-act-del:hover{background:#fee2e2;color:#dc2626}
.rem-match-radio{display:flex;gap:16px;font-size:13px;color:#374151}
.rem-match-radio label{display:flex;align-items:center;gap:6px;cursor:pointer}
.rem-empty-cond{font-size:12px;color:#9ca3af;text-align:center;padding:10px;background:#f9fafb;border-radius:6px;border:1px dashed #e2e5ea}
/* 요일 체크박스 */
.rem-weekday-wrap{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.rem-weekday-wrap label{display:flex;align-items:center;gap:4px;font-size:12px;color:#374151;cursor:pointer;padding:3px 8px;border:1px solid #e2e5ea;border-radius:5px;background:#fff}
.rem-weekday-wrap input:checked+span{color:#1a73e8}
.rem-weekday-wrap label:has(input:checked){border-color:#1a73e8;background:#eff6ff}
/* 범위 슬라이더 */
.rem-range-wrap{display:flex;align-items:center;gap:8px}
.rem-range-wrap input[type=range]{flex:1}
.rem-range-val{font-size:12px;color:#374151;font-weight:600;min-width:20px;text-align:center}
/* send_mail 복합 입력 */
.rem-mail-fields{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}

/* ══════════════════════════════════════════
   settings_rules.ejs
══════════════════════════════════════════ */
/* ── 규칙 목록 ── */
.rules-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.rules-empty { padding:40px; text-align:center; color:#9ca3af; font-size:13px; background:#f9fafb; border-radius:8px; border:1px solid #f0f0f0; }
.rule-toggle { position:relative; display:inline-block; width:34px; height:18px; cursor:pointer; }
.rule-toggle input { opacity:0; width:0; height:0; }
.rule-toggle-track {
  position:absolute; inset:0; border-radius:9px; background:#d1d5db; transition:background 0.2s;
}
.rule-toggle input:checked + .rule-toggle-track { background:#1a73e8; }
.rule-toggle-thumb {
  position:absolute; width:14px; height:14px; border-radius:50%; background:#fff;
  top:2px; left:2px; transition:left 0.2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.rule-toggle input:checked ~ .rule-toggle-thumb { left:18px; }
.rule-badge { display:inline-block; font-size:11px; padding:1px 7px; border-radius:20px; font-weight:500; }
.rule-badge--all { background:#eff6ff; color:#1d4ed8; }
.rule-badge--any { background:#faf5ff; color:#7e22ce; }
.rules-action-btn {
  background:none; border:none; cursor:pointer; padding:4px 6px; border-radius:5px;
  color:#6b7280; display:inline-flex; align-items:center; transition:background 0.12s,color 0.12s;
}
.rules-action-btn:hover { background:#f3f4f6; color:#111; }
.rules-action-btn.del:hover { background:#fee2e2; color:#dc2626; }

/* ── 마법사 모달 ── */
.wizard-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
  align-items:center; justify-content:center;
}
.wizard-overlay.open { display:flex; }
.wizard-box {
  background:#fff; border-radius:12px; width:680px; max-width:95vw;
  max-height:90vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.wizard-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px 0; border-bottom:1px solid #f0f0f0; padding-bottom:14px;
}
.wizard-title { font-size:15px; font-weight:600; color:#111; }
.wizard-close {
  background:none; border:none; cursor:pointer; font-size:20px; color:#aaa; line-height:1; padding:0 4px;
}
.wizard-close:hover { color:#333; }
.wizard-body { flex:1; overflow-y:auto; padding:20px 24px; }
.wizard-section { margin-bottom:22px; }
.wizard-section-title {
  font-size:12px; font-weight:600; color:#6b7280; text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.wizard-section-title::after { content:''; flex:1; height:1px; background:#f0f0f0; }
.wiz-row { display:flex; gap:8px; align-items:flex-start; margin-bottom:6px; }
.wiz-input {
  flex:1; padding:7px 10px; border:1px solid #e2e5ea; border-radius:6px;
  font-size:13px; outline:none; background:#fff; color:#111;
}
.wiz-input:focus { border-color:#1a73e8; }
.wiz-select {
  padding:7px 10px; border:1px solid #e2e5ea; border-radius:6px;
  font-size:13px; outline:none; background:#fff; color:#111; cursor:pointer;
}
.wiz-select:focus { border-color:#1a73e8; }
.wiz-del-btn {
  padding:7px 8px; background:none; border:1px solid #e2e5ea; border-radius:6px;
  cursor:pointer; color:#9ca3af; display:inline-flex; align-items:center; flex-shrink:0;
  transition:all 0.12s;
}
.wiz-del-btn:hover { background:#fee2e2; border-color:#fca5a5; color:#dc2626; }
.wiz-add-btn {
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; padding:5px 12px; border-radius:6px;
  background:#f3f4f6; border:1px dashed #d1d5db; cursor:pointer;
  color:#374151; margin-top:4px; transition:all 0.12s;
}
.wiz-add-btn:hover { background:#e5e7eb; border-color:#9ca3af; }
.match-type-row { display:flex; gap:16px; align-items:center; }
.match-radio { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#374151; }
.match-radio input { accent-color:#1a73e8; width:14px; height:14px; cursor:pointer; }
.cond-value-wrap { display:flex; flex:1; gap:6px; }
.wizard-footer {
  padding:14px 24px; border-top:1px solid #f0f0f0;
  display:flex; justify-content:flex-end; gap:10px;
}
.no-value-note { font-size:12px; color:#9ca3af; padding:7px 4px; flex:1; }

/* ══════════════════════════════════════════
   settings_sharing.ejs
══════════════════════════════════════════ */
.sharing-section-title {
  font-size: 12px; font-weight: 600; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 22px 0 10px;
}
.sharing-section-title:first-child { margin-top: 0; }
.sharing-empty {
  padding: 28px; text-align: center; color: #9ca3af;
  font-size: 13px; background: #f9fafb; border-radius: 8px; border: 1px solid #f0f0f0;
}
.sharing-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500;
}
.sharing-badge--read   { background: #eff6ff; color: #1d4ed8; }
.sharing-badge--write  { background: #f0fdf4; color: #15803d; }
.sharing-badge--admin  { background: #fefce8; color: #a16207; }
.sharing-badge--user   { background: #f3f4f6; color: #374151; }
.sharing-badge--dept   { background: #faf5ff; color: #7e22ce; }
.sharing-targets { display: flex; flex-wrap: wrap; gap: 5px; }
.sharing-target-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f3f4f6; border-radius: 4px;
  padding: 3px 4px 3px 8px; font-size: 12px; color: #374151;
}
.sharing-target-chip svg { opacity: 0.5; }
.chip-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 3px;
  background: none; border: none; cursor: pointer;
  color: #9ca3af; font-size: 14px; line-height: 1; padding: 0;
  transition: background 0.12s, color 0.12s;
}
.chip-del:hover { background: #fee2e2; color: #dc2626; }
.row-del-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 4px 10px; border-radius: 5px;
  background: none; border: 1px solid #e5e7eb;
  color: #6b7280; cursor: pointer; transition: all 0.12s;
  white-space: nowrap;
}
.row-del-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
.row-del-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dept-note { font-size: 11px; color: #9ca3af; }

/* ══════════════════════════════════════════
   settings_signature.ejs
══════════════════════════════════════════ */
/* ── 서명 카드 ── */
.sig-list { display: flex; flex-direction: column; gap: 12px; }

.sig-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.sig-card:focus-within { box-shadow: 0 0 0 2px #3b82f640; }

.sig-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex-wrap: wrap;
}
.sig-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.sig-name-input {
  min-width: 0;
  flex: 1;
  max-width: 260px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  background-image: none !important;
}
.sig-badge-default {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}
.sig-card-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sig-position-select {
  font-size: 12px;
  padding: 5px 28px 5px 9px;
  min-width: 130px;
}
.sig-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, border-color 0.1s;
}
.sig-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.sig-btn--primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.sig-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.sig-btn--primary:disabled { background: #93c5fd; border-color: #93c5fd; cursor: not-allowed; }
.sig-btn--danger { color: #dc2626; }
.sig-btn--danger:hover { background: #fef2f2; border-color: #fca5a5; }
.sig-btn--default-set { color: #1d4ed8; }
.sig-btn--default-set:hover { background: #eff6ff; border-color: #93c3fd; }

.sig-card-body { padding: 16px; }

/* ── 추가 버튼 ── */
.sig-add-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}
.sig-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  background: #eff6ff;
  border: 1.5px dashed #93c5fd;
  border-radius: 8px;
  padding: 9px 24px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  width: 100%;
  justify-content: center;
}
.sig-add-btn:hover { background: #dbeafe; border-color: #60a5fa; }

/* ── 알림 ── */
#sigAlert {
  display: none;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}
#sigAlert.ok { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }
#sigAlert.err { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }

/* ── 빈 상태 ── */
.sig-empty {
  text-align: center;
  padding: 48px 0;
  color: #9ca3af;
  font-size: 13px;
}
.sig-empty svg { margin-bottom: 8px; opacity: 0.4; }

/* ══════════════════════════════════════════
   settings_spam.ejs
══════════════════════════════════════════ */
.sp-section{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:22px 24px;margin-bottom:20px}
.sp-section-title{font-size:14px;font-weight:600;color:#111;margin-bottom:4px}
.sp-section-desc{font-size:12px;color:#9ca3af;margin-bottom:16px}
/* 입력 바 */
.sp-input-bar{display:flex;gap:8px;align-items:center}
.sp-type-sel{padding:8px 10px;border:1px solid #e2e5ea;border-radius:7px;font-size:13px;color:#374151;background:#fff;outline:none;flex-shrink:0}
.sp-type-sel:focus{border-color:#1a73e8}
.sp-text-input{flex:1;padding:8px 14px;border:1px solid #e2e5ea;border-radius:7px;font-size:13px;color:#111;outline:none;background:#fff}
.sp-text-input:focus{border-color:#1a73e8}
.sp-text-input::placeholder{color:#b0b7c3}
/* 목록 */
.sp-list{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.sp-item{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#f9fafb;border:1px solid #f0f0f0;border-radius:7px}
.sp-item-type{font-size:11px;font-weight:500;padding:2px 7px;border-radius:10px;flex-shrink:0}
.sp-item-type--email {background:#eff6ff;color:#1d4ed8}
.sp-item-type--domain{background:#f0fdf4;color:#15803d}
.sp-item-val{flex:1;font-size:13px;color:#1a202c;word-break:break-all}
.sp-item-action{font-size:11px;padding:2px 8px;border-radius:10px;flex-shrink:0}
.sp-item-action--spam  {background:#fff7ed;color:#c2410c}
.sp-item-action--trash {background:#fef2f2;color:#991b1b}
.sp-item-action--delete{background:#4b5563;color:#fff}
.sp-del-btn{background:none;border:none;cursor:pointer;color:#9ca3af;padding:3px 5px;border-radius:4px;flex-shrink:0;display:flex;align-items:center}
.sp-del-btn:hover{background:#fee2e2;color:#dc2626}
.sp-empty{font-size:12px;color:#b0b7c3;text-align:center;padding:14px;background:#f9fafb;border-radius:7px;border:1px dashed #e5e7eb}
/* 처리방식 라디오 */
.sp-action-group{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.sp-action-item{display:flex;align-items:center;gap:8px;padding:10px 16px;border:1.5px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s;font-size:13px;color:#374151}
.sp-action-item:has(input:checked){border-color:#1a73e8;background:#eff6ff;color:#1a73e8;font-weight:500}
.sp-action-item input{accent-color:#1a73e8}
/* 스팸레벨 슬라이더 */
.sp-level-wrap{display:flex;align-items:center;gap:12px;margin-top:8px}
.sp-level-wrap input[type=range]{flex:1;accent-color:#1a73e8}
.sp-level-val{font-size:13px;font-weight:600;color:#1a73e8;min-width:20px;text-align:center}
.sp-level-labels{display:flex;justify-content:space-between;font-size:11px;color:#9ca3af;margin-top:2px}
/* 개별 처리방식 select */
.sp-action-sel{padding:5px 8px;border:1px solid #e2e5ea;border-radius:6px;font-size:12px;color:#374151;background:#fff;outline:none;flex-shrink:0}
.sp-action-sel:focus{border-color:#1a73e8}
/* 저장 버튼 영역 */
.sp-save-bar{display:flex;justify-content:flex-end;margin-top:6px}

/* ══════════════════════════════════════════
   storage.ejs
══════════════════════════════════════════ */
/* 업로드 모달 추가 스타일 */
.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;
}
.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: var(--nav-active-bg); 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; }
/* ── 로컬 검색 모드 배너 ── */
#ms-search-bar {
  display:flex; align-items:center; gap:8px;
  padding:6px 16px; background:#eff6ff; border-bottom:1px solid #bfdbfe;
  font-size:12.5px; color:#1d4ed8; flex-shrink:0;
}
#ms-search-exit {
  margin-left:auto; background:none; border:1px solid #bfdbfe; cursor:pointer;
  font-size:12px; color:#1d4ed8; padding:2px 10px; border-radius:4px;
  font-family:inherit;
}
#ms-search-exit:hover { background:#dbeafe; }
/* ── 검색 결과 패널 ── */
#search-results-panel {
  position: absolute; top: 50px; left: 0; right: 0; z-index: 200;
  background: #fff; border-bottom: 1px solid #e8eaed;
  max-height: 420px; overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
#search-results-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid #f0f0f0;
  font-size: 12px; font-weight: 600; color: #444; position: sticky; top: 0; background: #fff; z-index:1;
}
#search-results-count { color: #888; font-weight: 400; margin-left: 4px; }
#search-results-close {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 18px; color: #aaa; line-height: 1; padding: 0 4px;
}
#search-results-close:hover { color: #333; }
#search-results-list { padding: 6px 0; }
.sr-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer; transition: background 0.12s;
}
.sr-item:hover { background: #f5f8ff; }
.sr-item-icon { flex-shrink: 0; color: #94a3b8; }
.sr-item-body { flex: 1; min-width: 0; }
.sr-item-name { font-size: 13px; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item-name mark { background: #fef08a; color: inherit; padding: 0 1px; border-radius: 2px; }
.sr-item-snippet { font-size: 11px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sr-item-snippet mark { background: #fef08a; color: inherit; }
.sr-item-meta { font-size: 11px; color: #aaa; flex-shrink: 0; text-align: right; }
#search-results-footer { padding: 8px 16px; border-top: 1px solid #f0f0f0; text-align: center; }
#search-results-more {
  background: none; border: 1px solid #ddd; border-radius: 6px;
  padding: 6px 18px; font-size: 12px; color: #555; cursor: pointer;
}
#search-results-more:hover { background: #f5f5f5; }
/* 태그 배지 */
.tag-badge {
  display: inline-block; background: #e0e7ff; color: #3730a3;
  font-size: 10px; padding: 1px 7px; border-radius: 10px; margin: 1px 2px;
}
/* 태그 에디터 */
.tag-editor { display:flex; flex-wrap:wrap; gap:4px; align-items:center; padding: 8px 12px; border: 1px solid #e2e5ea; border-radius: 8px; min-height: 38px; cursor: text; }
.tag-editor .te-tag { display:flex; align-items:center; gap:3px; background:#e0e7ff; color:#3730a3; font-size:11px; padding:2px 8px; border-radius:10px; }
.tag-editor .te-tag-del { background:none; border:none; cursor:pointer; color:#6366f1; font-size:13px; line-height:1; padding:0; }
.tag-editor input { border:none; outline:none; font-size:12px; min-width:80px; flex:1; }
/* ── Sub-sidebar 정적 네비게이션 ── */
    #storage-toolbar { position: relative; }
    /* ── 미리보기 패널 ── */
    #sub-main { min-width: 0; }
    .cal-preview-panel {
      position: relative; width: 0; flex-shrink: 0;
      background: #fff; border-left: 1px solid transparent;
      display: flex; flex-direction: column; overflow: hidden;
      transition: width 0.22s ease, border-color 0.22s;
    }
    .cal-preview-panel.open { width: 300px; border-left-color: #e8eaed; }
    .cal-preview-panel.resizing { transition: none; user-select: none; }
    #preview-resize-handle {
      position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
      cursor: col-resize; z-index: 20;
    }
    #preview-resize-handle:hover,
    .cal-preview-panel.resizing #preview-resize-handle { background: rgba(26,115,232,.18); }
    .cpp-head {
      display: flex; align-items: center;
      padding: 14px 16px 12px; border-bottom: 1px solid #eee;
      flex-shrink: 0; gap: 8px;
    }
    .cpp-head-title { flex: 1; font-size: 13px; font-weight: 700; color: #333; }
    .cpp-close {
      width: 26px; height: 26px; border: none; background: none; cursor: pointer;
      border-radius: 5px; color: #aaa; font-size: 17px;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.1s, color 0.1s;
    }
    .cpp-close:hover { background: #f0f0f0; color: #555; }
    .cpp-body { flex: 1; overflow-y: auto; padding: 16px; }
    .cpp-color-bar { height: 4px; border-radius: 2px; margin-bottom: 14px; }
    .cpp-row {
      display: flex; align-items: flex-start; gap: 10px;
      margin-bottom: 13px; font-size: 13px; color: #333;
    }
    .cpp-row-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: #aaa; }
    .cpp-row-content { flex: 1; min-width: 0; line-height: 1.55; }
    .cpp-row-label {
      font-size: 10px; font-weight: 700; color: #bbb;
      text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 3px;
    }
    .cpp-divider { height: 1px; background: #f0f0f0; margin: 4px 0 14px; }
    .cpp-foot {
      display: flex; gap: 8px; padding: 12px 16px;
      border-top: 1px solid #eee; flex-shrink: 0; flex-wrap: wrap;
    }
    .cpp-foot .basic-btn-basic,
    .cpp-foot .basic-btn-danger,
    .cpp-foot .basic-btn-secondary {
      display: flex; align-items: center; gap: 5px;
      flex: 1; justify-content: center;
    }
    #cpp-file-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    #cpp-file-icon {
      width: 44px; height: 44px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    #cpp-file-meta { flex: 1; min-width: 0; }
    #cpp-file-title {
      font-size: 15px; font-weight: 700; color: #111;
      word-break: break-all; line-height: 1.35;
    }
    #cpp-file-type-label { font-size: 11px; font-weight: 600; margin-top: 3px; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .sl-row.file.pp-active { background: #eff6ff !important; }
    .sg-card.file.pp-active { outline: 2px solid #1a73e8; outline-offset: -2px; background: #eff6ff; }
  /* ── 즐겨찾기 별 버튼 (main-header) ── */
  .fav-star-btn {
    background: none; border: none; cursor: pointer; padding: 4px 6px;
    border-radius: 6px; color: #94a3b8; transition: color 0.15s, background 0.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; }
  /* ── 헤더 아이콘 버튼 (되돌리기 등) ── */
  .hdr-icon-btn {
    background: none; border: none; cursor: pointer; padding: 5px 7px;
    border-radius: 6px; color: #6b7280; display: flex; align-items: center;
    transition: color 0.15s, background 0.15s;
  }
  .hdr-icon-btn:not(:disabled):hover { background: #f1f3f6; color: #1a73e8; }
  .hdr-icon-btn:disabled { opacity: .32; cursor: not-allowed; }
  /* ── 즐겨찾기 뷰 ── */
  .fav-empty { text-align:center; padding:40px 16px; color:#9ca3af; }
  /* ── 폴더 이동 모달 ── */
  .fav-modal-tree { max-height:300px; overflow-y:auto; border:1px solid #e5e7eb; border-radius:8px; margin-top:10px; padding:6px 0; }
  .fav-tree-item { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; font-size:13px; color:#374151; transition:background 0.1s; }
  .fav-tree-item:hover { background:#f3f4f6; }
  .fav-tree-item.selected { background:var(--nav-active-bg); color:#1a73e8; font-weight:600; }
  .fav-tree-indent { padding-left:20px; }

  @keyframes pgSpin { to { transform: rotate(360deg); } }

  /* trash move tree */
  .tmv-item { display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:#374151;user-select:none;transition:background .12s; }
  .tmv-item:hover { background:#f1f5f9; }
  .tmv-item.selected { background:var(--nav-active-bg); color:#1a73e8; }
  .tmv-item.selected svg { stroke:#1a73e8; }
  .tmv-name { flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .tmv-children { display:block; }

/* ── 다중 선택 ── */
.ms-cb-td{width:36px;padding:0 8px;text-align:center;cursor:default}
.ms-cb{cursor:pointer;width:15px;height:15px;accent-color:#2563eb}
.sl-row.ms-selected>td,.sg-card.ms-selected{background:rgba(37,99,235,.10)}
.sl-row.ms-selected>td:first-child{border-left:3px solid #2563eb}
/* ── 드래그앤드롭 ── */
.sl-row.drag-src,.sg-card.drag-src{opacity:.45}
.sl-row.drag-over-target>td,.sg-card.drag-over-target{background:rgba(37,99,235,.20)!important;outline:2px dashed #2563eb}
#navTrash.drag-over{background:rgba(239,68,68,.18)!important;outline:2px dashed #ef4444;border-radius:6px}
/* ── 선택 액션 바 ── */
#ms-sel-bar{display:none;flex-direction:row;align-items:center;justify-content:space-between;
  padding:6px 16px;background:#eff6ff;border-bottom:1px solid #bfdbfe;
  font-size:12.5px;color:#1d4ed8;flex-shrink:0;gap:8px}
#ms-left{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0;flex:1}
#ms-right{display:flex;align-items:center;gap:4px;flex-shrink:0}
.ms-bar-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border:none;background:none;
  border-radius:6px;font-size:12px;color:#374151;cursor:pointer;white-space:nowrap;font-weight:500;
  transition:background .12s;line-height:1}
.ms-bar-btn:hover{background:#f3f4f6}
.ms-bar-btn.danger{color:#dc2626}
.ms-bar-btn.danger:hover{background:#fee2e2}
.ms-count-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border:1px solid #e5e7eb;border-radius:16px;font-size:12px;font-weight:600;
  background:#f9fafb;color:#374151;cursor:pointer;white-space:nowrap;transition:background .12s}
.ms-count-btn:hover{background:#f3f4f6}
.ms-bar-sep{width:1px;height:14px;background:#e5e7eb;margin:0 3px;flex-shrink:0}
/* sg-card 즐겨찾기 버튼 */
.sg-fav-btn{position:absolute;top:5px;right:5px;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:50%;cursor:pointer;
  opacity:0;transition:opacity .15s,background .12s;z-index:3;padding:0}
.sg-card:hover .sg-fav-btn,.sg-fav-btn.active{opacity:1}
.sg-fav-btn:hover{background:rgba(0,0,0,.08)}
.sg-fav-btn.active svg{fill:#fbbf24;stroke:#f59e0b}
/* 목록뷰 즐겨찾기 버튼 */
.sl-fav-btn{opacity:0;pointer-events:none;transition:opacity .12s,color .12s}
.sl-row:hover .sl-fav-btn,.sl-fav-btn.active{opacity:1;pointer-events:auto}
.sl-fav-btn:hover{color:#f59e0b!important}
.sl-fav-btn.active{color:#f59e0b!important}
.sl-fav-btn.active svg{fill:#fbbf24;stroke:#f59e0b}
.share-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 6px;border-radius:10px;line-height:1.6;white-space:nowrap}
.share-badge.shared{background:#eff6ff;color:#1a73e8;border:1px solid #bfdbfe}
.share-badge.private{color:#9ca3af;font-size:11px}


.sg-cb{position:absolute;top:6px;left:6px;z-index:2;cursor:pointer;width:15px;height:15px;accent-color:#2563eb}


/* ── File Type Icons ── */
.ftype-icon { object-fit: contain; display: inline-block; }
.ftype-icon-pp { object-fit: contain; display: block; margin: 0 auto; }
.sl-name-icon img.ftype-icon { display: inline-block; }
.sg-card .ftype-icon { display: block; }

/* ── Storage File View ── */
#storage-file-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Storage Dashboard ── */
#storage-dashboard {
  padding: 32px 36px;
  overflow-y: auto;
  flex: 1;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sdash-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 14px;
}
.sdash-app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sdash-app-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
  text-align: left;
  width: 100%;
}
.sdash-app-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.09);
  border-color: #c7d2fe;
}
.sdash-app-icon {
  width: 42px; height: 42px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: #fff;
  flex-shrink: 0;
  font-family: 'Segoe UI', sans-serif;
  letter-spacing: -1px;
}
.sdash-word    { background: linear-gradient(140deg, #185ABD 0%, #2B7CD3 100%); }
.sdash-ppt     { background: linear-gradient(140deg, #C43E1C 0%, #E05B2B 100%); }
.sdash-excel   { background: linear-gradient(140deg, #107C41 0%, #21A366 100%); }
.sdash-onenote { background: linear-gradient(140deg, #7719AA 0%, #9B32CC 100%); }
.sdash-app-info { min-width: 0; }
.sdash-app-info strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 3px;
  white-space: nowrap;
}
.sdash-app-info span {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.3;
  display: block;
}
.sdash-file-list {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
}
.sdash-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.12s;
}
.sdash-file-item:last-child { border-bottom: none; }
.sdash-file-item:hover { background: #f8faff; }
.sdash-file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sdash-file-meta { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.sdash-empty, .sdash-loading {
  padding: 24px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
@media (max-width: 860px) {
  .sdash-app-grid { grid-template-columns: repeat(2, 1fr); }
  #storage-dashboard { padding: 20px 16px; }
}

/* ══════════════════════════════════════════
   users.ejs
══════════════════════════════════════════ */
/* 검색 */
.user-search-wrap {
  display:flex; align-items:center; gap:6px;
  border:1px solid #e2e5ea; border-radius:7px;
  padding:0 10px; background:#fff; height:32px; min-width:240px;
}
.user-search-wrap svg { flex-shrink:0; color:#9ca3af; }
.user-search-wrap input { border:none; outline:none; font-size:13px; color:#374151; background:transparent; width:100%; }
.user-search-wrap input::placeholder { color:#b0b7c3; }
.user-search-clear { background:none; border:none; cursor:pointer; color:#b0b7c3; font-size:17px; line-height:1; padding:0 0 0 2px; display:none; }
.user-search-clear.visible { display:block; }
.user-search-clear:hover { color:#6b7280; }
/* 관리 버튼 */
.user-btn {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:500; padding:4px 10px; white-space:nowrap;
  border-radius:5px; border:1px solid #d1d5db; background:#fff;
  color:#374151; cursor:pointer; transition:background 0.1s;
}
.user-btn:hover { background:#f3f4f6; }
.user-btn--danger { color:#dc2626; }
.user-btn--danger:hover { background:#fef2f2; border-color:#fca5a5; }
.user-actions { display:flex; gap:5px; white-space:nowrap; }
/* 검색 없음 */
#userNoResult { display:none; }
/* 모달 폼 (중복 제거됨 — users.ejs 폼은 위 공통 .um-* 규칙 사용) */
/* 삭제 경고 */
.del-warn-box {
  display:flex; gap:12px; align-items:flex-start;
  background:#fff7ed; border:1px solid #fed7aa; border-radius:10px;
  padding:14px 16px; margin:16px 0 4px;
}
.del-warn-icon { flex-shrink:0; color:#ea580c; margin-top:1px; }
.del-warn-text { font-size:13px; line-height:1.6; color:#7c2d12; }
.del-warn-text strong { display:block; font-size:14px; color:#9a3412; margin-bottom:4px; }
/* 모달 사용자명 강조 */
.modal-target-name { font-weight:700; color:#1a202c; }
/* ── 부서 자동완성 ── */
.dept-tag-list {
  display: flex; flex-wrap: wrap; gap: 5px;
  min-height: 28px; margin-bottom: 6px;
}
.dept-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #e0e7ff; color: #3730a3;
  font-size: 11px; font-weight: 500;
  padding: 3px 8px 3px 10px; border-radius: 20px;
  line-height: 1.4;
}
.dept-tag-parent { color: #6366f1; font-size: 10px; margin-right: 2px; }
.dept-tag-del {
  background: none; border: none; cursor: pointer;
  color: #818cf8; font-size: 14px; line-height: 1; padding: 0; margin-left: 1px;
}
.dept-tag-del:hover { color: #4f46e5; }
.dept-ac-wrap { position: relative; }
.dept-ac-input {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid #e2e5ea; border-radius: 7px;
  font-size: 13px; color: #374151; outline: none;
  transition: border 0.15s;
}
.dept-ac-input:focus { border-color: #2563eb; }
.dept-ac-input::placeholder { color: #b0b7c3; }
.dept-ac-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid #e2e5ea; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 999; max-height: 200px; overflow-y: auto; display: none;
}
.dept-ac-drop.open { display: block; }
.dept-ac-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.1s;
}
.dept-ac-item:hover { background: #f5f8ff; }
.dept-ac-item-name { color: #1a202c; }
.dept-ac-item-parent { font-size: 11px; color: #9ca3af; }
.dept-ac-empty { padding: 10px 12px; font-size: 12px; color: #9ca3af; text-align: center; }
.dept-ac-loading { padding: 10px 12px; font-size: 12px; color: #9ca3af; text-align: center; }
/* ── 테이블 정렬 ── */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table th.sortable:hover { color: #374151; background: #f9fafb; }
.data-table th .sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.data-table th.sortable:hover .sort-icon { opacity: 0.6; }
.data-table th.sort-asc  .sort-icon,
.data-table th.sort-desc .sort-icon { opacity: 1; }
.sort-icon .arr-up,
.sort-icon .arr-dn {
  display: block; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.sort-icon .arr-up { border-bottom: 5px solid #9ca3af; }
.sort-icon .arr-dn { border-top:    5px solid #9ca3af; }
.data-table th.sort-asc  .sort-icon .arr-up { border-bottom-color: #2563eb; }
.data-table th.sort-desc .sort-icon .arr-dn { border-top-color:    #2563eb; }

/* ══════════════════════════════════════════
   users_department.ejs
══════════════════════════════════════════ */
.dept-actions { display:flex; gap:6px; white-space:nowrap; }
.dept-btn {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:500; padding:4px 12px;
  border-radius:5px; border:1px solid #d1d5db; background:#fff;
  color:#374151; cursor:pointer; transition:background 0.1s; white-space:nowrap;
}
.dept-btn:hover { background:#f3f4f6; }
.dept-btn--primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.dept-btn--primary:hover { background:#1d4ed8; }
.dept-btn--danger { color:#dc2626; }
.dept-btn--danger:hover { background:#fef2f2; border-color:#fca5a5; }
.dept-indent { display:inline-block; width:20px; }
/* 검색 */
.dept-search-wrap {
  display:flex; align-items:center; gap:6px;
  border:1px solid #e2e5ea; border-radius:7px;
  padding:0 10px; background:#fff; height:32px; min-width:220px;
}
.dept-search-wrap svg { flex-shrink:0; color:#9ca3af; }
.dept-search-wrap input {
  border:none; outline:none; font-size:13px; color:#374151;
  background:transparent; width:100%; min-width:0;
}
.dept-search-wrap input::placeholder { color:#b0b7c3; }
.dept-search-clear {
  background:none; border:none; cursor:pointer;
  color:#b0b7c3; font-size:16px; line-height:1; padding:0 0 0 2px;
  display:none;
}
.dept-search-clear.visible { display:block; }
.dept-search-clear:hover { color:#6b7280; }
/* 비활성 select */
select:disabled { background:#f8f9fb !important; color:#aaa !important; cursor:not-allowed; }
/* ── 테이블 정렬 ── */
.data-table th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table th.sortable:hover { color: #374151; background: #f9fafb; }
.data-table th .sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  vertical-align: middle;
  margin-left: 4px;
  opacity: 0.35;
  transition: opacity 0.15s;
}
.data-table th.sortable:hover .sort-icon { opacity: 0.6; }
.data-table th.sort-asc  .sort-icon,
.data-table th.sort-desc .sort-icon { opacity: 1; }
.sort-icon .arr-up,
.sort-icon .arr-dn {
  display: block; width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.sort-icon .arr-up { border-bottom: 5px solid #9ca3af; }
.sort-icon .arr-dn { border-top:    5px solid #9ca3af; }
.data-table th.sort-asc  .sort-icon .arr-up { border-bottom-color: #2563eb; }
.data-table th.sort-desc .sort-icon .arr-dn { border-top-color:    #2563eb; }

/* ══════════════════════════════════════════
   users_organization.ejs
══════════════════════════════════════════ */
#org-wrap {
  display: flex;
  height: calc(100vh - 112px);
  overflow: hidden;
  user-select: none;
}

/* ── 왼쪽 트리 패널 ── */
#org-left {
  width: 280px; min-width: 160px; max-width: 520px;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto; overflow-x: hidden;
  background: #fff; flex-shrink: 0;
  display: flex; flex-direction: column;
}
.tree-search-wrap {
  padding: 10px 10px 6px; border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
}
.tree-search-box {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 6px;
}
.tree-search-box input { border:none; outline:none; font-size:12px; width:100%; background:transparent; color:#374151; }
#tree-root { padding: 8px 0 16px; }

/* ── 리사이저 ── */
#org-resizer {
  width: 5px; flex-shrink: 0; cursor: col-resize;
  background: transparent; position: relative; z-index: 1;
  transition: background .15s;
}
#org-resizer:hover, #org-resizer.active { background: #bfdbfe; }
#org-resizer::after {
  content: ''; position: absolute;
  left: 2px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 40px;
  background: #d1d5db; border-radius: 1px;
}

/* ── 트리 행 (중복 제거됨 — 위 공통 .t-* 규칙 사용) ── */

/* ── 컨텍스트 메뉴 ── */
#ctx-menu {
  display: none; position: fixed; z-index: 9990;
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 4px 0; min-width: 160px;
}
.ctx-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 13px; color: #374151;
  cursor: pointer; transition: background .1s;
}
.ctx-item:hover { background: #f3f4f6; }
.ctx-item.ctx-danger { color: #dc2626; }
.ctx-item.ctx-danger:hover { background: #fef2f2; }
.ctx-sep { height: 1px; background: #f3f4f6; margin: 3px 0; }

/* ── 부서 모달 ── */
#dept-modal .modal-box { width: 400px; }
#dept-modal-parent-row { padding: 8px 0; border-bottom: 1px solid #f3f4f6; font-size: 12px; color: #9ca3af; }

/* ── 오른쪽 패널 ── */
#org-right { flex:1; overflow-y:auto; padding:24px; background:#fafafa; }
#org-right-header {
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px; padding-bottom:14px; border-bottom:1px solid #e5e7eb;
}
.org-dept-icon { width:36px; height:36px; border-radius:8px; background:#eff6ff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#org-dept-name   { font-size:15px; font-weight:600; color:#111827; }
#org-dept-manager { font-size:11px; color:#9ca3af; margin-top:1px; }
#org-dept-count  { margin-left:auto; font-size:12px; color:#2563eb; background:#dbeafe; padding:2px 10px; border-radius:10px; display:none; }

#member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.member-card { display:flex; flex-direction:column; align-items:center; padding:20px 12px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; transition:box-shadow .15s; }
.member-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.07); border-color:#d1d5db; }
.member-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; margin-bottom:10px; }
.member-avatar-init { width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,#2563eb,#60a5fa); color:#fff; font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.member-name     { font-size:13px; font-weight:600; color:#111827; margin-bottom:2px; text-align:center; }
.member-username { font-size:11px; color:#9ca3af; margin-bottom:8px; }
.member-info     { font-size:11px; color:#6b7280; text-align:center; line-height:1.7; }
#org-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:280px; gap:8px; }
#org-empty svg { opacity:.35; }
#org-empty p { font-size:13px; color:#9ca3af; text-align:center; line-height:1.7; }
#org-loading { display:none; align-items:center; justify-content:center; height:200px; color:#9ca3af; font-size:13px; gap:8px; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:18px; height:18px; border:2px solid #e5e7eb; border-top-color:#2563eb; border-radius:50%; animation:spin .7s linear infinite; }