/* ============================================================
   Docpod Admin — design system
   ============================================================ */
:root {
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --border: #E6E8EE;
  --border-strong: #D5D9E2;
  --text: #191B1F;
  --text-2: #5B616E;
  --text-3: #8A90A0;
  --primary: #346DDB;
  --primary-hover: #2A5BC0;
  --primary-soft: #EEF4FF;
  --primary-soft-2: #E3EDFF;
  --danger: #DC2626;
  --danger-soft: #FEF1F1;
  --success: #16A34A;
  --success-soft: #EFFAF3;
  --warning: #D97706;
  --app-max: 1280px;      /* 제품 전체 공통 최대 폭 — 14" 맥북(1512pt)에서도 좌우 여백이 남는 값 */
  --app-pad: 32px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 16px rgba(16,24,40,.08);
  --shadow-lg: 0 20px 60px rgba(16,24,40,.18);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
/* body 를 height:100% 로 고정하면 sticky 헤더의 컨테이닝 블록이 첫 화면 높이로 잘려
   한 화면 이상 스크롤 시 GNB 가 밀려 올라간다 — min-height 로만 채운다 */
html { height: 100%; }
body { min-height: 100%; }
body.adm {
  margin: 0; font-family: var(--font); font-size: 16px; color: var(--text);
  background: var(--bg); word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
svg.ic { width: 16px; height: 16px; flex-shrink: 0; }

/* custom scrollbars everywhere in admin */
body.adm { scrollbar-width: thin; scrollbar-color: #C9CDD6 transparent; }
body.adm ::-webkit-scrollbar { width: 8px; height: 8px; }
body.adm ::-webkit-scrollbar-track { background: transparent; }
body.adm ::-webkit-scrollbar-thumb {
  background: #C9CDD6; border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
body.adm ::-webkit-scrollbar-thumb:hover { background: #A7ADBA; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- topbar ---------- */
.adm-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.adm-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16.5px; letter-spacing: -0.01em; }
.adm-logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #4A82EC, #2A5BC0);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; box-shadow: var(--shadow-sm);
}
.adm-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.adm-user-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 999px; font-size: 14px; color: var(--text-2);
}
.adm-user-chip:hover { background: var(--bg); color: var(--text); }
.adm-avatar {
  width: 24px; height: 24px; border-radius: 999px; background: var(--primary-soft-2);
  color: var(--primary); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- context switcher ---------- */
.ctx-switch { position: relative; }
/* 스위처 시작선을 본문 h1 시작선(레일 232px + 본문 패딩 40px)에 맞춘다.
   로고 셀 208px = 232 − topbar 좌측 패딩 24 → 셀 끝 = 레일 경계.
   margin 18px = 40 − flex gap 16 − ctx-btn 안쪽 여백 6 → 아이콘이 정확히 272px 에서 시작. */
.adm-logo { width: 208px; flex-shrink: 0; }
.ctx-switch { margin-left: 18px; }
@media (max-width: 900px) {
  .adm-logo { width: auto; }
  .ctx-switch { margin-left: 0; }
}
.ctx-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px 0 6px;
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; letter-spacing: -0.01em;
  transition: background .12s ease, border-color .12s ease;
}
.ctx-btn:hover { background: var(--bg); border-color: var(--border); }
.ctx-avatar {
  width: 24px; height: 24px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800; background: var(--primary-soft-2); color: var(--primary);
}
.ctx-avatar.team { background: #EEE9FD; color: #6D4AE0; }
.ctx-caret { color: var(--text-3); width: 13px; height: 13px; }
.ctx-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000005; min-width: 230px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; display: none;
}
.ctx-menu.open { display: block; animation: ctxIn .12s ease; }
@keyframes ctxIn { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.ctx-menu-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--text-3); padding: 7px 10px 3px; }
.ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--text);
  border: 0; background: transparent; cursor: pointer; text-align: left;
}
.ctx-item:hover { background: var(--bg); }
.ctx-item.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ctx-item .ctx-check { margin-left: auto; color: var(--primary); width: 14px; height: 14px; }
.ctx-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---------- shell with left rail ---------- */
.adm-topbar-in {
  max-width: var(--app-max); margin: 0 auto; width: 100%; height: 56px;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.adm-shell { display: flex; min-height: calc(100vh - 56px); max-width: var(--app-max); margin: 0 auto; width: 100%; }
.adm-rail {
  width: 232px; flex-shrink: 0; padding: 20px 12px 24px;
  border-right: 1px solid var(--border); background: transparent;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
}
.adm-rail-site {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 16px; background: var(--surface);
}
.adm-rail-site img, .adm-rail-site .adm-site-mark { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.adm-site-mark {
  background: var(--primary-soft-2); color: var(--primary); font-weight: 800; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.adm-rail-site > span { min-width: 0; overflow: hidden; }
.adm-rail-site-name { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rail-site-sub { display: block; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rail-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; margin: 18px 10px 6px; }
.adm-nav { display: flex; flex-direction: column; gap: 2px; }
.adm-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border-radius: 8px; font-size: 15.5px; font-weight: 500; color: var(--text-2);
}
.adm-nav a .ic { color: var(--text-3); }
.adm-nav a:hover { background: var(--bg); color: var(--text); }
.adm-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.adm-nav a.active .ic { color: var(--primary); }
.adm-rail-foot { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }

/* ---------- main content ---------- */
.adm-main { flex: 1; min-width: 0; padding: 34px 40px 84px; }
.adm-container { max-width: 1080px; margin: 0 auto; width: 100%; }
.adm-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.adm-page-head h1 { font-size: 25px; letter-spacing: -0.01em; margin: 0; }
.adm-page-sub { color: var(--text-2); font-size: 15.5px; margin: 0 0 24px; }

/* ---------- cards ---------- */
.adm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 22px; margin-bottom: 18px;
}
.adm-card h2 { font-size: 17.5px; margin: 0 0 14px; }
.adm-card .adm-card-sub { margin: -10px 0 16px; }
.adm-card form > .btn { margin-top: 4px; }
.adm-card-sub { font-size: 15px; color: var(--text-2); margin: 0 0 16px; }
.adm-card.danger { border-color: #F6CACA; }

/* ---------- buttons — crafted, tactile ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid #DCE0E8; background: var(--surface); color: #2A2E37;
  cursor: pointer; white-space: nowrap; user-select: none;
  box-shadow: 0 1px 1px rgba(16,24,40,.04);
  transition: background .13s ease, border-color .13s ease, box-shadow .13s ease, color .13s ease;
}
.btn .ic { width: 14px; height: 14px; color: #6B7280; transition: color .13s ease; }
.btn:hover { background: #F7F8FA; border-color: #C7CDD8; }
.btn:hover .ic { color: #2A2E37; }
.btn:active { background: #F0F2F5; box-shadow: inset 0 1px 2px rgba(16,24,40,.06); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }

.btn.primary {
  color: #fff; border-color: #2A5BC0;
  background: linear-gradient(180deg, #3D74E0 0%, #2E62CC 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 1px 2px rgba(30,58,138,.28);
}
.btn.primary .ic { color: rgba(255,255,255,.85); }
.btn.primary:hover {
  background: linear-gradient(180deg, #4780EA 0%, #356BD6 100%);
  border-color: #2A5BC0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(30,58,138,.32);
}
.btn.primary:hover .ic { color: #fff; }
.btn.primary:active {
  background: linear-gradient(180deg, #2E5FC6 0%, #2A58BB 100%);
  box-shadow: inset 0 1.5px 3px rgba(15,30,80,.32);
}

.btn.danger-ghost { color: #C6303C; border-color: #EDCBCE; box-shadow: 0 1px 1px rgba(16,24,40,.03); }
.btn.danger-ghost .ic { color: #D2626B; }
.btn.danger-ghost:hover { background: #FDF3F4; border-color: #E0A9AE; }
.btn.danger-ghost:hover .ic { color: #C6303C; }
.btn.danger {
  color: #fff; border-color: #B02531;
  background: linear-gradient(180deg, #E04350 0%, #C92E3B 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 2px rgba(150,30,40,.3);
}
.btn.danger:hover { background: linear-gradient(180deg, #E85360 0%, #D43642 100%); }
.btn.danger:active { box-shadow: inset 0 1.5px 3px rgba(90,15,22,.35); }

.btn.ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: #F0F2F5; color: var(--text); border-color: transparent; }

.btn.sm { height: 31px; padding: 0 11px; font-size: 14.5px; border-radius: 8px; gap: 5px; }
.btn.sm .ic { width: 13px; height: 13px; }
.btn.lg { height: 46px; padding: 0 22px; font-size: 15.5px; border-radius: 11px; }
/* 버튼이 나란히 놓이는 줄 — <a> 와 <button> 이 섞이면 inline-flex 의 baseline 정렬 때문에 높이가 1~2px 어긋나고 간격도 공백 글자에 맡겨진다 */
.btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn.block { width: 100%; }

.icbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 7px; border: 0; background: transparent;
  color: #9AA1AE; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.icbtn:hover { background: #EEF0F4; color: #2A2E37; }
.icbtn:active { background: #E4E7ED; }
.icbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.icbtn.danger:hover { background: #FDF3F4; color: #C6303C; }
.icbtn .ic { width: 14px; height: 14px; }

/* ---------- forms ---------- */
.fld { margin-bottom: 16px; }
.fld > label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 7px; }
.fld small { display: block; font-weight: 400; color: var(--text-3); font-size: 13px; margin-top: 5px; }
.inp, textarea.inp, select.inp {
  width: 100%; height: 40px; padding: 0 13px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  transition: border-color .12s, box-shadow .12s; outline: none;
}
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.inp:hover { border-color: var(--border-strong); }
.inp:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.inp::placeholder { color: var(--text-3); }
.inp-group { display: flex; align-items: center; }
.inp-group .inp { border-radius: 0 9px 9px 0; }
.inp-prefix {
  display: inline-flex; align-items: center; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-right: 0; border-radius: 9px 0 0 9px;
  background: var(--bg); color: var(--text-3); font-size: 14px;
}
.fld-row { display: flex; gap: 14px; }
.fld-row .fld { flex: 1; }

/* color swatches */
.swatches { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 0 10px; }
.swatch {
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer; border: 2px solid transparent;
  outline: 2px solid transparent; transition: transform .08s, outline-color .1s; padding: 0;
}
.swatch:hover { transform: scale(1.12); }
.swatch.sel { outline-color: var(--text); border-color: #fff; }
.swatch-custom {
  position: relative; width: 30px; height: 30px; border-radius: 999px;
  border: 1px dashed var(--border-strong); padding: 0; background: var(--surface);
  cursor: pointer; overflow: hidden;
}
.swatch-custom::before {
  content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px;
  border-radius: 999px; pointer-events: none;
  background: conic-gradient(#E66A6A, #E6C86A, #7BC98A, #6AA8E6, #A98AE0, #E66A6A);
}
.swatch-custom:hover { border-color: var(--primary); }
.swatch-custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ---------- layout option cards (디자인 화면) ---------- */
/* 썸네일은 카드 폭(최대 190px)에 맞춰 축소 — 컨테이너 전체 폭을 먹지 않게 */
.ly-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); gap: 14px; padding: 2px 0 2px; }
.ly-opt { display: block; cursor: pointer; min-width: 0; }
.ly-opt > input { position: absolute; width: 0; height: 0; opacity: 0; }
.ly-card {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color .12s, box-shadow .12s;
}
.ly-thumb { display: block; width: 100%; height: auto; }
.ly-opt:hover .ly-card { border-color: var(--border-strong); }
.ly-opt > input:checked ~ .ly-card { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.ly-opt > input:focus-visible ~ .ly-card { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.ly-check {
  position: absolute; bottom: 7px; right: 7px; width: 17px; height: 17px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-strong); background: rgba(255,255,255,.92); color: #fff;
  transition: background .12s, border-color .12s;
}
.ly-check svg { width: 11px; height: 11px; opacity: 0; transition: opacity .12s; }
.ly-opt > input:checked ~ .ly-card .ly-check { background: var(--primary); border-color: var(--primary); }
.ly-opt > input:checked ~ .ly-card .ly-check svg { opacity: 1; }
.ly-opt > b { display: block; font-size: 14.5px; font-weight: 600; margin-top: 9px; }
.ly-desc { display: block; font-size: 13px; color: var(--text-3); line-height: 1.5; margin-top: 2px; }
@media (max-width: 620px) { .ly-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* 저장 직후 확인 배너 — 토스트와 달리 사라지지 않아 링크를 누를 여유가 있다 */
.saved-bar {
  display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 26%, transparent);
}
.saved-bar > .ic { width: 18px; height: 18px; color: var(--success); }
.saved-bar > div { flex: 1; min-width: 0; }
.saved-bar b { display: block; font-size: 15px; }
.saved-bar span { font-size: 14px; color: var(--text-2); }
.saved-bar .btn { flex-shrink: 0; background: var(--surface); }
.save-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- file dropzone ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius);
  padding: 26px 16px; text-align: center; cursor: pointer; background: var(--surface);
  transition: border-color .12s, background .12s;
}
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone .ic { width: 22px; height: 22px; color: var(--text-3); }
.dropzone.drag .ic, .dropzone:hover .ic { color: var(--primary); }
.dropzone-title { font-size: 14.5px; font-weight: 600; }
.dropzone-sub { font-size: 13px; color: var(--text-3); }
.dropzone input[type=file] { display: none; }
.dropzone-preview { display: flex; align-items: center; gap: 12px; }
.dropzone-preview img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }

/* ---------- site cards (dashboard) ---------- */
.site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.site-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 20px; display: flex; flex-direction: column; gap: 14px;
  transition: box-shadow .15s, border-color .15s, transform .1s;
}
.site-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); transform: translateY(-1px); }
.site-card-top { display: flex; align-items: center; gap: 12px; }
.site-card-top img, .site-card-top .adm-site-mark { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.site-card-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16.5px; font-weight: 700; }
/* 제목을 눌러 바로 이름 바꾸기 — 연필은 카드에 마우스를 올릴 때만 */
.rename-box {
  display: flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%;
  border-radius: 7px; padding: 1px 5px; margin-left: -5px; cursor: text;
  transition: background .12s, box-shadow .12s;
}
.rename-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rename-box > .ic { width: 13px; height: 13px; flex-shrink: 0; color: var(--text-3); opacity: 0; transition: opacity .12s; }
.site-card:hover .rename-box { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); }
.site-card:hover .rename-box > .ic { opacity: 1; }
.rename-box:hover, .rename-box:focus-visible { background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); outline: none; }
.rename-box:hover > .ic { color: var(--primary); }
/* 고치는 중 — 원래 제목과 연필은 감추고 입력칸만 */
.rename-box.editing { flex: 1; background: none; box-shadow: none; padding: 0; margin-left: 0; }
.rename-box.editing > .rename-text, .rename-box.editing > .ic { display: none; }
.rename-inp {
  width: 100%; height: 32px; padding: 0 8px; font-size: 16.5px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--primary); border-radius: 7px; background: var(--surface); color: var(--text);
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.site-card-url { font-size: 13.5px; color: var(--primary); }
.site-card-stats { display: flex; gap: 16px; font-size: 13.5px; color: var(--text-2); }
.site-card-stats b { color: var(--text); font-weight: 700; }
.site-card-actions { display: flex; gap: 8px; margin-top: auto; }
.site-card.new {
  border-style: dashed; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-2); cursor: pointer; min-height: 168px; box-shadow: none;
}
.site-card.new:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); transform: none; }
a.site-card.new { text-decoration: none; font-size: inherit; }
.site-card.new .ic { width: 22px; height: 22px; }

/* ---------- content tree ---------- */
.tree-sec {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-bottom: 14px; overflow: hidden;
}
.tree-sec-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  border-bottom: 1px solid var(--border); background: #FBFCFE;
}
.tree-sec-title { font-weight: 700; font-size: 14.5px; }
.tree-sec-slug { font-size: 13px; color: var(--text-3); font-weight: 500; }
.tree-sec-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.tree-body { padding: 8px 8px 12px; }
.tree-group {
  display: flex; align-items: center; gap: 8px; margin: 12px 8px 2px; padding: 0 4px;
  font-size: 13px; font-weight: 700; color: var(--text-2); letter-spacing: .02em;
}
.tree-group .tree-sec-actions { opacity: 0; transition: opacity .12s; }
.tree-group:hover .tree-sec-actions { opacity: 1; }
.tree-page {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  font-size: 14.5px; cursor: grab; border: 1px solid transparent;
}
.tree-page:hover { background: var(--bg); }
.tree-page.dragging { opacity: .45; }
.tree-page.drop-above { box-shadow: 0 -2px 0 0 var(--primary); }
.tree-page.drop-below { box-shadow: 0 2px 0 0 var(--primary); }
.tree-page .grip { color: var(--text-3); opacity: 0; transition: opacity .12s; cursor: grab; display: inline-flex; }
.tree-page:hover .grip { opacity: 1; }
.tree-page-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.tree-page-title:hover { color: var(--primary); }
.tree-page-meta { font-size: 12.5px; color: var(--text-3); }
.tree-page-actions { display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.tree-page:hover .tree-page-actions { opacity: 1; }
.tree-addrow { display: flex; gap: 8px; margin: 10px 8px 0; }
.tree-addrow .inp { height: 32px; font-size: 14px; border-radius: 8px; }
.tree-empty { padding: 14px; color: var(--text-3); font-size: 14px; text-align: center; }

/* ---------- stats ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat-tile-label { font-size: 13.5px; color: var(--text-2); margin-bottom: 6px; }
.stat-tile-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.stat-tile-value small { font-size: 14px; font-weight: 500; color: var(--text-3); }
.chart30 { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 8px; }
.chart30 .bar { flex: 1; background: var(--primary-soft-2); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; transition: background .1s; }
.chart30 .bar:hover { background: var(--primary); }
.chart30 .bar:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 5;
}
.chart30-x { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-top: 6px; }
.toplist { display: flex; flex-direction: column; }
.toplist-row { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); font-size: 14.5px; }
.toplist-row:first-child { border-top: 0; }
.toplist-rank { width: 22px; text-align: center; color: var(--text-3); font-weight: 700; font-size: 13px; }
.toplist-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toplist-bar-wrap { width: 160px; height: 6px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.toplist-bar { height: 100%; background: var(--primary); border-radius: 999px; }
.toplist-count { width: 64px; text-align: right; font-weight: 600; font-size: 13.5px; color: var(--text-2); }

/* ---------- nav links editor ---------- */
.navlink-rows { display: flex; flex-direction: column; gap: 8px; }
.navlink-row { display: flex; gap: 8px; align-items: center; }
.navlink-row .inp.t { flex: 0 0 180px; }
.navlink-row .inp.u { flex: 1; }

/* ---------- badges / status ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 4px 10px; }
.badge.ok { background: var(--success-soft); color: var(--success); }
.badge.wait { background: #FFF8EB; color: var(--warning); }
.badge.off { background: var(--bg); color: var(--text-3); }
.dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- modal ---------- */
.mdl-backdrop {
  position: fixed; inset: 0; z-index: 1000020; background: rgba(20,23,31,.44);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .16s; display: flex;
  align-items: flex-start; justify-content: center; padding: 13vh 20px 20px;
}
.mdl-backdrop.show { opacity: 1; }
.mdl {
  width: min(460px, 100%); background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-lg); transform: translateY(10px) scale(.98); opacity: 0;
  transition: transform .18s cubic-bezier(.2,.9,.3,1.2), opacity .16s;
}
.mdl-backdrop.show .mdl { transform: none; opacity: 1; }
.mdl-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 0; }
.mdl-title { font-size: 16px; font-weight: 700; margin: 0; }
.mdl-x { margin-left: auto; }
.mdl-body { padding: 14px 20px 4px; font-size: 14.5px; color: var(--text-2); line-height: 1.65; }
.mdl-body .fld > label { color: var(--text); }
.mdl-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 18px; }
.mdl-icon-danger {
  width: 34px; height: 34px; border-radius: 999px; background: var(--danger-soft); color: var(--danger);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- toast ---------- */
.toast-wrap { position: fixed; top: 68px; right: 16px; z-index: 1000030; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 360px;
  background: var(--text); color: #fff; font-size: 14.5px; font-weight: 500;
  border-radius: 12px; padding: 12px 16px; box-shadow: var(--shadow-lg);
  transform: translateX(16px); opacity: 0; transition: transform .2s, opacity .2s;
}
.toast.show { transform: none; opacity: 1; }
.toast .ic { width: 16px; height: 16px; }
.toast.ok .ic { color: #4ADE80; }
.toast.err .ic { color: #F87171; }

/* ---------- dashboard groups / misc ---------- */
.adm-group-label {
  display: flex; align-items: center; gap: 11px;
  font-size: 14.5px; font-weight: 700; color: var(--text-2); margin: 6px 0 16px;
}
.adm-group-label .adm-group-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
}
.adm-group-label .ic { width: 14px; height: 14px; }
.adm-group-link { margin-left: 6px; font-size: 13.5px; font-weight: 600; color: var(--primary); }
.site-grid { margin-bottom: 40px; }
.site-grid:last-child { margin-bottom: 0; }
.adm-code {
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 9px; font-size: 13.5px; font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.ed-presence {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  background: #FFF8EB; color: #92600A; border: 1px solid #F5E0B8;
  border-radius: 10px; padding: 9px 13px; font-size: 14px; font-weight: 500;
}
.ed-presence .ic { width: 15px; height: 15px; }

/* ---------- first-run onboarding (dashboard) ---------- */
.onb-head { text-align: center; margin: 52px 0 24px; }
.onb-head h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -0.01em; }
.onb-head p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.75; }
.onb-help { margin-top: 10px !important; }
.onb-help a { color: var(--primary); font-weight: 600; font-size: 14.5px; }
.onb-help a:hover { text-decoration: underline; }
.adm-page-sub a { color: var(--primary); }
.onb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; }
.onb-grid.two { max-width: 700px; }
.onb-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.onb-card.featured { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-sm); }
.onb-badge { position: absolute; top: 16px; right: 16px; }
.onb-ic {
  width: 40px; height: 40px; border-radius: 10px; background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.onb-ic .ic { width: 20px; height: 20px; }
.onb-card h3 { margin: 4px 0 0; font-size: 16px; }
.onb-card p { margin: 0; color: var(--text-2); font-size: 14.5px; line-height: 1.7; flex: 1; }
.onb-card form { margin: 0; }
.onb-card > .btn, .onb-card form .btn { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- next-step hint ---------- */
.next-hint {
  display: flex; gap: 10px; align-items: flex-start; background: var(--primary-soft);
  border: 1px solid var(--primary-soft-2); border-radius: var(--radius-lg);
  padding: 14px 16px; margin-bottom: 16px; font-size: 14.5px; line-height: 1.7; color: var(--text);
}
.next-hint > .ic { color: var(--primary); margin-top: 3px; }
.next-hint a { color: var(--primary); font-weight: 600; }
.next-hint a.nowrap { white-space: nowrap; }

/* ---------- empty state ---------- */
.empty {
  text-align: center; padding: 48px 20px; color: var(--text-2);
}
.empty > .ic { width: 34px; height: 34px; color: var(--text-3); margin-bottom: 10px; }
.empty h3 { margin: 0 0 6px; font-size: 15.5px; color: var(--text); }
.empty p { margin: 0 0 16px; font-size: 14px; }

/* ---------- auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.auth-card {
  width: 400px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow-md); padding: 36px 34px 30px;
}
.auth-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin-bottom: 22px; }
.auth-card h1 { font-size: 21px; margin: 0 0 6px; letter-spacing: -0.01em; }
.auth-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 22px; }
.auth-switch { text-align: center; font-size: 14px; color: var(--text-2); margin-top: 18px; }
.auth-switch a { color: var(--primary); font-weight: 600; }
.auth-note { background: #EEF3FF; border: 1px solid #D4E0FB; color: #27418A; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.auth-error { background: var(--danger-soft); color: #B91C1C; border-radius: 10px; padding: 11px 13px; font-size: 14px; margin-bottom: 14px; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; font-size: 15px; font-weight: 600; background: var(--surface); }
.btn.google svg { flex: 0 0 auto; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 13.5px; margin: 16px 0 14px; word-break: keep-all; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- editor page ---------- */
.ed-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ed-title {
  flex: 1; min-width: 0; font-size: 19px; font-weight: 700; font-family: inherit; color: var(--text);
  border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; background: transparent; outline: none;
}
.ed-title:hover { border-color: var(--border); background: var(--surface); }
.ed-title:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(52,109,219,.14); }
.ed-slug {
  display: inline-flex; align-items: center; gap: 6px; height: 31px;
  font-size: 13.5px; color: var(--text-3); font-family: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 12px;
  cursor: pointer; white-space: nowrap; margin-right: 10px;
}
.ed-slug .ic { width: 13px; height: 13px; }
.ed-slug:hover { color: var(--text); border-color: var(--border-strong); }
.ed-status { font-size: 13.5px; color: var(--text-3); margin-left: auto; padding-right: 4px; white-space: nowrap; }
.ed-desc {
  width: 100%; font-size: 14.5px; font-family: inherit; color: var(--text-2);
  border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; margin-bottom: 10px;
  background: transparent; outline: none;
}
.ed-desc:hover { border-color: var(--border); background: var(--surface); }
.ed-desc:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px rgba(52,109,219,.14); }
.ed-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ed-tools .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.ed-editor-card { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-sm); }
.ed-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.ed-foot .spacer { flex: 1; }
/* Toast UI skin */
.toastui-editor-defaultUI { border: 1px solid var(--border) !important; border-radius: 14px !important; overflow: hidden; font-family: var(--font) !important; }
.toastui-editor-defaultUI-toolbar { background: #FBFCFE !important; border-bottom: 1px solid var(--border) !important; border-radius: 14px 14px 0 0 !important; }
.toastui-editor-defaultUI .ProseMirror, .toastui-editor-contents, .toastui-editor-md-preview .toastui-editor-contents p {
  font-family: var(--font) !important; word-break: keep-all; overflow-wrap: break-word;
}
.toastui-editor-mode-switch { background: #FBFCFE !important; border-top: 1px solid var(--border) !important; }

@media (max-width: 900px) {
  .adm-rail { display: none; }
  .adm-main { padding: 20px 16px 60px; }
}

/* ---------- Vditor skin ---------- */
#editor.vditor {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  font-family: var(--font);
}
.vditor-toolbar {
  background: #FBFCFE !important; border-bottom: 1px solid var(--border) !important;
  padding: 4px 10px !important;
}
.vditor-toolbar__item button { color: var(--text-2); }
.vditor-reset {
  font-family: var(--font) !important; font-size: 15px !important; color: var(--text) !important;
  word-break: keep-all; overflow-wrap: break-word; line-height: 1.75 !important;
}
.vditor-ir { background: var(--surface); }
.vditor-ir pre.vditor-reset { padding: 28px 44px 80px !important; max-width: 860px; margin: 0 auto; }
.vditor-reset h1 { font-size: 30px; } .vditor-reset h2 { font-size: 24px; }
.vditor-reset img { border-radius: 8px; border: 1px solid var(--border); }
.vditor-ir__node--expand .vditor-ir__marker { color: var(--primary) !important; }
.ed-presence[hidden] { display: none; }

/* ---------- custom select ---------- */
.dpsel { position: relative; display: inline-flex; min-width: 0; }
.dpsel select { display: none !important; }
.dpsel-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 170px; max-width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
  font-size: 15px; font-weight: 500; font-family: inherit; color: var(--text);
  cursor: pointer; box-shadow: 0 1px 1px rgba(16,24,40,.04);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.dpsel-btn:hover { border-color: #C7CDD8; background: #FBFCFD; }
.dpsel-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
.dpsel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpsel-caret { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.dpsel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000005;
  min-width: 100%; max-width: 340px; max-height: 300px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 5px; display: none;
}
.dpsel-menu.open { display: block; animation: ctxIn .12s ease; }
.dpsel-menu .ctx-item { white-space: nowrap; width: 100%; }
.dpsel-item-label { overflow: hidden; text-overflow: ellipsis; }
/* selects stretched to full width inside forms keep their layout */
.fld .dpsel { display: block; }
.fld .dpsel .dpsel-btn { width: 100%; }

/* ---------- editor shell with page tree ---------- */
.ed-shell { display: flex; min-height: calc(100vh - 56px); max-width: var(--app-max); margin: 0 auto; width: 100%; }
.ed-side {
  width: 268px; flex-shrink: 0; padding: 18px 12px 24px;
  border-right: 1px solid var(--border); background: transparent;
  position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto;
}
.ed-side-back {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 9px; font-size: 14px; font-weight: 600;
  color: var(--text-2); box-shadow: 0 1px 1px rgba(16,24,40,.04);
}
.ed-side-back:hover { background: var(--bg); color: var(--text); }
.ed-side-back .ic { width: 14px; height: 14px; }
.ed-side-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--text-3); margin: 14px 10px 6px; text-transform: uppercase; }
.edt-sec { margin: 4px 0 10px; }
.edt-sec-title {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
  font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; list-style: none; user-select: none;
  background: var(--bg); border: 1px solid var(--border);
}
.edt-sec-title::-webkit-details-marker { display: none; }
.edt-sec-title:hover { background: var(--bg); }
.edt-chev { width: 13px; height: 13px; color: var(--text-3); transition: transform .12s ease; }
.edt-sec[open] > .edt-sec-title .edt-chev { transform: rotate(90deg); }
.edt-group { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--text-2); margin: 12px 0 2px; padding: 5px 8px 5px 10px; border-radius: 6px; }
.edt-group > .ic { width: 13px; height: 13px; color: var(--text-3); flex-shrink: 0; }
/* 깃북식 트리 — 행 hover 액션·사이사이 삽입·메뉴·인라인 이름변경 */
.edt-sec-title { position: relative; }
.edt-sec-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edt-acts { display: inline-flex; visibility: hidden; align-items: center; gap: 2px; margin-left: auto; flex-shrink: 0; }
.edt-sec-title:hover .edt-acts, .edt-row:hover .edt-acts, .edt-group:hover .edt-acts { visibility: visible; }
.edt-act {
  border: 0; background: none; cursor: pointer; color: var(--text-3);
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.edt-act:hover { background: var(--border); color: var(--text); }
.edt-act .ic { width: 13px; height: 13px; }
.edt-row { position: relative; display: flex; align-items: center; gap: 2px; padding-right: 4px; border-radius: 8px; }
.edt-row:hover { background: var(--bg); }
.edt-row.on { background: var(--primary-soft); }
.edt-row .edt-page { flex: 1; min-width: 0; background: none !important; display: flex; align-items: center; gap: 6px; }
.edt-row.is-hidden .edt-page-name { color: var(--text-3); }
.edt-page-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edt-hidden-badge {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--text-3);
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 0 5px;
}
.edt-insert {
  position: absolute; left: 6px; right: 6px; bottom: -5px; height: 10px; z-index: 3;
  display: flex; align-items: center; gap: 4px; border: 0; background: none; padding: 0;
  cursor: pointer; opacity: 0;
}
.edt-insert:hover { opacity: 1; }
.edt-insert b {
  width: 15px; height: 15px; border-radius: 999px; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.edt-insert b svg { width: 9px; height: 9px; display: block; }
.edt-insert i { flex: 1; height: 2px; background: var(--primary); border-radius: 2px; }
.edt-group { display: flex; align-items: center; gap: 7px; padding-right: 4px; border-radius: 6px; }
.edt-group-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edt-group:hover { background: var(--bg); }
.edt-add {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 0; background: none; cursor: pointer; color: var(--text-3);
  font: inherit; font-size: 14px; padding: 6px 10px; border-radius: 8px; margin-top: 1px;
}
.edt-add:hover { background: var(--bg); color: var(--primary); }
.edt-add .ic { width: 13px; height: 13px; }
.edt-add-sec { margin-top: 10px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 10px; }
.edt-menu {
  position: absolute; z-index: 1000; min-width: 176px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 8px 30px rgba(0,0,0,.12)); padding: 5px;
}
.edt-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14.5px; color: var(--text); padding: 7px 10px; border-radius: 7px;
}
.edt-menu button:hover { background: var(--bg); }
.edt-menu button.danger { color: var(--danger, #D64545); }
.edt-menu hr { border: 0; border-top: 1px solid var(--border); margin: 5px 4px; }
.edt-rename {
  flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--text);
  border: 1px solid var(--primary); border-radius: 6px; padding: 3px 7px; background: var(--surface);
}
/* 그룹 소속 페이지 — 왼쪽 레일로 귀속 표시 */
.edt-row.in-group, .edt-add.in-group { margin-left: 16px; border-left: 2px solid var(--border); border-radius: 0 8px 8px 0; }
.edt-row.in-group { padding-left: 4px; }
.edt-add.in-group { padding-left: 12px; }
/* 하단 추가 버튼 — 목록과 분리 */
.edt-add { margin-top: 4px; }
.edt-sec > .edt-add:first-of-type, .edt > .edt-add:first-of-type { margin-top: 10px; }
/* 빈 본문 placeholder — 캐럿과 같은 줄에 끼지 않게 절대 배치 (수평 어긋남 수리) */
.vditor-wysiwyg pre.vditor-reset:empty { position: relative; }
.vditor-wysiwyg pre.vditor-reset:empty::before {
  position: absolute; left: 48px; right: 48px; top: 30px; line-height: inherit;
}
/* 안내·확인·주의·경고 툴바 아이콘 색 */
.hintbtn .ic { width: 14px; height: 14px; }
.hintbtn.h-info .ic { color: #3B82F6; }
.hintbtn.h-success .ic { color: #16A34A; }
.hintbtn.h-warning .ic { color: #D97706; }
.hintbtn.h-danger .ic { color: #DC2626; }
.edt-page {
  display: block; padding: 7px 8px 7px 24px; border-radius: 8px;
  font-size: 15px; color: var(--text-2); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edt-page:hover { background: var(--bg); color: var(--text); }
.edt-page.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.ed-wrap { flex: 1; min-width: 0; margin: 0 auto; padding: 20px 32px 64px; }
/* hide wysiwyg mode-switch footer */
.vditor-wysiwyg .vditor-reset { padding: 30px 48px 96px !important; max-width: 980px; margin: 0 auto; font-size: 16.5px !important; }
/* hide block-type gutter labels (H2, </> …) — pure WYSIWYG look */
.vditor-wysiwyg > .vditor-reset > h1:before, .vditor-wysiwyg > .vditor-reset > h2:before,
.vditor-wysiwyg > .vditor-reset > h3:before, .vditor-wysiwyg > .vditor-reset > h4:before,
.vditor-wysiwyg > .vditor-reset > h5:before, .vditor-wysiwyg > .vditor-reset > h6:before,
.vditor-wysiwyg > .vditor-reset > div[data-type="html-block"]:before,
.vditor-wysiwyg > .vditor-reset > div[data-type="code-block"]:before,
.vditor-wysiwyg > .vditor-reset > div[data-type="yaml-front-matter"]:before,
.vditor-wysiwyg > .vditor-reset > div[data-type="math-block"]:before {
  content: none !important; display: none !important;
}
/* hide Vditor's built-in block popover entirely (ID input, duplicate table controls)
   — we provide our own Korean table toolbar instead */
.vditor-wysiwyg__popover, .vditor-panel, .vditor-panel--none { display: none !important; }
.vditor-tooltipped::before, .vditor-tooltipped::after { display: none !important; }
/* HTML blocks: always show the rendered preview, never the source
   (HTML 블록의 원문 <pre> 에는 클래스가 없어서 위 선택자가 놓쳤다 — 커서가 블록에 들어오면 <figure>… 원문이 펼쳐지던 원인) */
.vditor-wysiwyg .vditor-wysiwyg__block > pre.vditor-wysiwyg__pre { display: none !important; }
.vditor-wysiwyg:not(.dp-src-open) .vditor-wysiwyg__block[data-type="html-block"] > pre:not(.vditor-wysiwyg__preview) { display: none !important; }
/* 「고급: 원문 보기」를 켜면 모든 HTML 블록의 원문을 보여 준다(고급 사용자용) */
.vditor-wysiwyg.dp-src-open .vditor-wysiwyg__block[data-type="html-block"] > pre:not(.vditor-wysiwyg__preview) { display: block !important; margin-bottom: 6px; }
.vditor-wysiwyg__block[data-type="html-block"][data-dp-locked] { cursor: default; }
/* 인라인 HTML 칩 — 서식 태그는 숨기고 <br> 는 실제 줄바꿈으로(「고급: 원문 보기」를 켜면 칩이 그대로 보임) */
.vditor-wysiwyg:not(.dp-src-open) code[data-type="html-inline"].dp-tag-hidden { display: none !important; }
.vditor-wysiwyg:not(.dp-src-open) code[data-type="html-inline"].dp-br { display: block !important; height: 0; width: 0; overflow: hidden; padding: 0; margin: 0; border: 0; font-size: 0; line-height: 0; }
.dp-srcbtn { margin-left: auto; font-size: 12.5px; color: var(--text-2, #6a6e77); }
.dp-srcbtn[aria-pressed="true"] { background: var(--primary-3, #e9f3ff); color: var(--primary, #346ddb); }
.vditor-wysiwyg .vditor-wysiwyg__block > .vditor-wysiwyg__preview { display: block !important; cursor: default; }
.vditor-wysiwyg .vditor-wysiwyg__preview iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px; }
.vditor-wysiwyg .vditor-wysiwyg__preview img { max-width: 100%; border-radius: 8px; }
.vditor-wysiwyg .vditor-wysiwyg__preview table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vditor-wysiwyg .vditor-wysiwyg__preview th, .vditor-wysiwyg .vditor-wysiwyg__preview td { border: 1px solid var(--border); padding: 8px 12px; vertical-align: top; }
.vditor-wysiwyg .vditor-wysiwyg__preview thead th { background: #FBFCFE; font-weight: 600; text-align: left; }

/* ---------- slash palette ---------- */
.slash-menu {
  position: fixed; z-index: 1000010; width: 300px; max-height: 340px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); padding: 6px; animation: ctxIn .12s ease;
}
.slash-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-3); padding: 6px 10px 4px; }
.slash-head span { font-weight: 500; }
.slash-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left;
}
.slash-item.sel { background: var(--primary-soft); } /* 호버 하이라이트는 JS 가 slashSel 로 통일 — :hover 를 두면 파란 줄이 두 개 뜬다 */
.slash-item-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.slash-item b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.slash-item small { font-size: 12.5px; color: var(--text-3); }
.pl-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.pl-item {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  border: 0; background: transparent; border-radius: 8px; cursor: pointer;
  font-size: 14.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-item:hover { background: var(--primary-soft); }
.pl-empty { font-size: 14px; color: var(--text-3); padding: 8px 10px; }
.slash-item kbd {
  font-family: inherit; font-size: 12px; color: var(--text-3);
  background: var(--bg); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
}
.slash-empty { padding: 16px; text-align: center; color: var(--text-3); font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
[hidden] { display: none !important; }

/* ---------- editor block decorations (hint · tab) ---------- */
.vditor-wysiwyg blockquote.dp-hint {
  border-left: 0; border-radius: 10px; padding: 12px 16px; margin: 18px 0;
}
.vditor-wysiwyg blockquote.dp-hint > p { margin: 4px 0; }
.vditor-wysiwyg blockquote.dp-hint-info    { background: #F0F6FF; }
.vditor-wysiwyg blockquote.dp-hint-success { background: #EFFAF3; }
.vditor-wysiwyg blockquote.dp-hint-warning { background: #FFF8EB; }
.vditor-wysiwyg blockquote.dp-hint-danger  { background: #FEF1F1; }
.vditor-wysiwyg blockquote.dp-tab {
  border-left: 0; background: transparent; padding: 0; margin: 20px 0 6px;
}
.vditor-wysiwyg blockquote.dp-tab > p {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  background: var(--primary-soft); color: var(--primary);
  border-radius: 8px 8px 0 0; padding: 7px 14px; font-size: 14.5px; font-weight: 700;
  border-bottom: 2px solid var(--primary);
}
.vditor-wysiwyg blockquote.dp-tab-end > p { background: var(--bg); color: var(--text-3); border-bottom-color: var(--border); border-radius: 8px; }
/* 탭 구간을 한 컴포넌트로 보이게 — 패널은 왼쪽 레일로 마커에 귀속, 첫 마커에 안내 캡션 */
.vditor-wysiwyg .dp-tab-panel {
  margin-left: 10px; padding-left: 16px;
  border-left: 2px solid var(--primary-soft-2);
}
.vditor-wysiwyg blockquote.dp-tab-first::after {
  content: '발행된 사이트에서는 가로 탭으로 보여요'; display: inline-block; margin-left: 10px;
  font-size: 13px; color: var(--text-3); font-weight: 400;
}

/* 알 수 없는 GitBook 블록 태그 줄 — 작은 칩 */
.vditor-wysiwyg .dp-liquid { display: inline-block; margin: 6px 0; padding: 5px 12px; background: #f0f2f6; border-radius: 8px; color: #6a6e77; font-size: 13px; font-weight: 600; }

/* 접기(<details>) — 제목 마커 + 본문 레일 + 끝 마커 */
.vditor-wysiwyg blockquote.dp-fold { border-left: 0; background: transparent; padding: 0; margin: 20px 0 6px; }
.vditor-wysiwyg blockquote.dp-fold > p {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; background: #f0f2f6; color: #3b3f47;
  border-radius: 8px; padding: 7px 14px; font-size: 14.5px; font-weight: 700;
}
.vditor-wysiwyg blockquote.dp-fold-end > p { background: var(--bg); color: var(--text-3); font-weight: 600; }
.vditor-wysiwyg .dp-fold-panel { margin-left: 10px; padding-left: 16px; border-left: 2px solid #d9dde5; }
.vditor-wysiwyg blockquote.dp-fold:not(.dp-fold-end)::after {
  content: '발행된 사이트에서는 눌러서 펼쳐요'; display: inline-block; margin-left: 10px;
  font-size: 13px; color: var(--text-3); font-weight: 400;
}

/* ---------- editor view / edit modes ---------- */
.ed-view {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 30px 44px 44px; box-shadow: var(--shadow-sm);
}
.ed-view .gb-content { font-size: 16.5px; line-height: 1.78; color: var(--text); max-width: 980px; }
.ed-view .gb-content img { max-width: 100%; border-radius: 8px; }
.ed-view .gb-content h1 { font-size: 27px; } .ed-view .gb-content h2 { font-size: 22px; }
.ed-view .gb-content h3 { font-size: 18px; }
.ed-view-empty { color: var(--text-3); font-size: 15px; }
.ed-title[readonly], .ed-desc[readonly] { cursor: default; }
.ed-title[readonly]:hover, .ed-desc[readonly]:hover { border-color: transparent; background: transparent; }
/* 편집 모드가 아닐 때(읽기 전용)는 클릭해도 파란 포커스 링을 띄우지 않는다 — 고칠 수 있는 것처럼 보이면 혼란스럽다 */
.ed-title[readonly]:focus, .ed-desc[readonly]:focus { border-color: transparent; background: transparent; box-shadow: none; outline: none; caret-color: transparent; }
.ed-histrow { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); font-size: 14.5px; }
.ed-histrow:first-child { border-top: 0; }
.ed-histrow .who { flex: 1; min-width: 0; color: var(--text-2); }
.ed-histrow .when { color: var(--text-3); font-size: 13.5px; }

/* ---------- table toolbar ---------- */
.tbl-bar {
  position: fixed; z-index: 1000015; display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 4px;
  max-width: calc(100vw - 24px); flex-wrap: wrap;   /* 좁은 화면에서는 줄바꿈 */
}
.tbl-bar button {
  border: 0; background: transparent; border-radius: 7px; padding: 5px 9px;
  font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.tbl-bar button:hover { background: var(--primary-soft); color: var(--primary); }
.tbl-bar button.del { color: #C6303C; }
.tbl-bar button.del:hover { background: #FDF3F4; color: #C6303C; }
.tbl-label { font-size: 12.5px; font-weight: 700; color: var(--text-3); padding: 0 4px 0 6px; }
/* target row / column highlight */
.vditor-wysiwyg td.dp-cell-row, .vditor-wysiwyg th.dp-cell-row { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.vditor-wysiwyg td.dp-cell-col, .vditor-wysiwyg th.dp-cell-col { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.vditor-wysiwyg td.dp-cell-row.dp-cell-col, .vditor-wysiwyg th.dp-cell-row.dp-cell-col { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.tbl-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
/* editable tables look like the site */
.vditor-wysiwyg table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 20px 0; }
.vditor-wysiwyg th, .vditor-wysiwyg td { border: 1px solid var(--border); padding: 9px 12px; vertical-align: top; }
.vditor-wysiwyg thead th { background: #FBFCFE; font-weight: 600; text-align: left; }
.vditor-wysiwyg td:focus, .vditor-wysiwyg th:focus { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: -2px; }
.vditor-wysiwyg pre.vditor-reset { overflow-x: auto; }
.vditor-wysiwyg table { table-layout: auto; min-width: 100%; }
.ed-view .gb-content table { display: block; overflow-x: auto; }

/* ---------- custom toolbar tooltips ---------- */
.dp-tip {
  position: fixed; z-index: 1000040; background: var(--text); color: #fff;
  font-size: 13px; font-weight: 500; padding: 5px 9px; border-radius: 7px;
  pointer-events: none; white-space: nowrap; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(2px); transition: opacity .1s, transform .1s;
}
.dp-tip.show { opacity: 1; transform: none; }
.dp-tip kbd { font-family: inherit; opacity: .65; margin-left: 5px; }
/* blocks panel button */
.ed-tools .blockbtn { font-weight: 700; }

/* ---------- import modal (가져오기) ---------- */
.imp { min-width: 0; }
.imp-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
.imp-tab {
  flex: 1; border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); padding: 7px 0;
}
.imp-tab.on { background: var(--surface, #fff); color: var(--text); box-shadow: 0 1px 3px rgba(15,20,30,.08); }
.imp-sub { font-size: 14.5px; color: var(--text-2); line-height: 1.7; margin: 0 0 12px; word-break: keep-all; overflow-wrap: break-word; }
.imp-drop { margin-bottom: 10px; }
.imp-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.imp-file {
  display: flex; align-items: center; gap: 8px; font-size: 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px 6px 12px;
}
.imp-file-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.imp-file-size { color: var(--text-3); font-size: 13px; flex: none; }
.imp-target { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.imp-progress { display: flex; align-items: center; gap: 14px; padding: 18px 6px; }
.imp-progress b { font-size: 15px; }
.imp-progress p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.imp-spin {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 3px solid var(--primary-soft); border-top-color: var(--primary);
  animation: impspin .8s linear infinite;
}
@keyframes impspin { to { transform: rotate(360deg); } }
.imp-done { font-size: 15px; font-weight: 600; margin: 4px 0 10px; }
.imp-pages { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.imp-pages a {
  display: block; font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imp-pages a:hover { border-color: var(--primary); color: var(--primary); }
.imp-more { font-size: 14px; color: var(--text-3); margin: 8px 2px 0; }
.imp-warn { font-size: 14.5px; color: var(--warning, #B45309); margin: 10px 2px 0; line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- AI 연결 페이지 ---------- */
.ai-url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.ai-url-row .adm-code { font-size: 13.5px; padding: 8px 12px; word-break: break-all; }
.ai-guide { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ai-guide > div { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.ai-guide b { flex: none; width: 88px; }
.ai-guide span { color: var(--text-2); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }
.ai-embed-stat { font-size: 14.5px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: inline-block; }
.ai-embed-stat b { color: var(--primary); }

/* ---------- 마법사 ---------- */
.wz-wrap { max-width: 620px; margin: 0 auto; padding: 12px 0 60px; }
.wz-steps { display: flex; align-items: center; gap: 8px; margin: 8px 0 34px; }
.wz-step { font-size: 13.5px; font-weight: 700; color: var(--text-3); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; white-space: nowrap; }
.wz-step.on { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.wz-steps i { flex: 1; height: 1px; background: var(--border); }
/* 폰 폭: 단계 알약 3개+연결선이 390px 를 넘치던 것 — 연결선을 접고 줄바꿈 허용 */
@media (max-width: 480px) {
  .wz-steps { flex-wrap: wrap; gap: 6px; }
  .wz-steps i { display: none; }
}
.wz-pane h1 { font-size: 26px; letter-spacing: -.03em; margin: 0 0 8px; }
.wz-sub { color: var(--text-2); font-size: 14.5px; line-height: 1.7; margin: 0 0 24px; word-break: keep-all; overflow-wrap: break-word; }
.wz-radio { display: flex; gap: 8px; align-items: baseline; font-size: 14.5px; padding: 8px 0 0; color: var(--text-2); cursor: pointer; }
.wz-radio b { color: var(--text); }
.wz-drop { min-height: 120px; }
.wz-or { font-size: 14px; color: var(--text-3); margin: 16px 0 6px; }
.wz-actions { display: flex; gap: 8px; margin-top: 26px; }
.wz-choice {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 12px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .12s, background .12s;
}
.wz-choice:hover { border-color: var(--primary); background: var(--primary-soft); }
.wz-choice .onb-ic { flex-shrink: 0; }
.wz-choice-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wz-choice-tx b { font-size: 15.5px; }
.wz-choice-tx span { color: var(--text-2); font-size: 14.5px; line-height: 1.65; word-break: keep-all; overflow-wrap: break-word; }
.wz-progress { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.wz-task { display: grid; grid-template-columns: 26px 130px 1fr; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.wz-task b { font-size: 15px; }
.wz-task p { margin: 0; font-size: 14.5px; color: var(--text-2); }
.wz-task.dim { opacity: .45; }
.wz-task.dim .imp-spin { animation: none; border-color: var(--border); }
.wz-task.done .imp-spin { animation: none; border: 0; border-radius: 0; }
.wz-task.done .imp-spin::after { content: '✓'; font-size: 17px; font-weight: 800; color: #16A34A; }

/* ---------- 팀 정책 카드 ---------- */
.pol-form { display: flex; flex-direction: column; gap: 18px; }
.pol-group h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: .05em; color: var(--text-3); }
.pol-row { display: grid; grid-template-columns: 20px auto 1fr; gap: 10px; align-items: start; padding: 7px 0; cursor: pointer; }
/* 체크박스는 baseline 이 없어 어긋남 — 첫 줄(22px) 중앙에 오도록 상단 여백으로 광학 정렬 */
.pol-row input { width: 16px; height: 16px; accent-color: var(--primary); margin: 3px 0 0; }
.pol-row b, .pol-row span { align-self: baseline; }
.pol-row b { font-size: 15px; white-space: nowrap; }
.pol-row span { font-size: 14.5px; color: var(--text-3); line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- 감사 로그 표 ---------- */
.aud-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.aud-table th { text-align: left; font-size: 13px; color: var(--text-3); font-weight: 700; padding: 12px 16px; background: var(--bg); border-bottom: 1px solid var(--border); white-space: nowrap; }
.aud-table td { padding: 11px 16px; border-bottom: 1px solid #F1F3F7; vertical-align: top; }
.aud-time { white-space: nowrap; color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.aud-act { display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.aud-detail { color: var(--text-2); word-break: break-all; max-width: 420px; }
.aud-dlp { font-size: 13px; color: var(--warning, #B45309); }
.aud-why { color: var(--text-3); font-size: 12px; line-height: 1.5; }

/* ---------- 아이콘-레이블 수직 정렬 보정 ---------- */
svg.ic { vertical-align: -3px; }
.adm-card h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.adm-nav a .ic, .adm-rail-foot .ic { margin-top: -1px; }
.btn .ic { vertical-align: -2px; }

/* 로고 드롭존: 32px짜리 로고에 맞는 컴팩트 가로형 */
#logoDrop { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 14px 18px; min-height: 0; max-width: 480px; }
#logoDrop .dropzone-title { font-size: 14px; }
#logoDrop .dropzone-sub { font-size: 13px; }

/* 도메인 안내 3단계 */
.dom-steps { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.dom-step { display: grid; grid-template-columns: 26px 1fr; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.dom-step i { font-style: normal; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--primary-soft); color: var(--primary); }
.dom-step b { font-size: 14.5px; display: block; margin-bottom: 3px; }
.dom-step p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }

/* ---------- 가져오기 진행 배너 + 진행바 ---------- */
.impbn { display: flex; align-items: center; gap: 14px; background: #F6F9FF; border: 1px solid #DCE7FB; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px; }
.impbn-body { flex: 1; min-width: 0; }
.impbn-body b { font-size: 15px; }
.impbn-body p { margin: 3px 0 8px; font-size: 14.5px; color: var(--text-2); }
.impbn-note { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.impbn.done { background: #F2FBF5; border-color: #C9EBD4; }
.impbn.err { background: #FDF6F6; border-color: #F3D3D7; }
.prog { height: 8px; border-radius: 999px; background: #E6ECF7; overflow: hidden; }
.prog i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4A82EC, #2A5BC0); transition: width .6s ease; min-width: 6%; }
.prog i.pulse { animation: progpulse 1.6s ease-in-out infinite; }
@keyframes progpulse { 50% { opacity: .55; } }
.imp-async-note { margin: 10px 0 0; font-size: 14.5px; color: var(--text-3); line-height: 1.7; word-break: keep-all; overflow-wrap: break-word; }

/* 원본 브랜드 락업 (심벌+워드마크 이미지) */
.brand-lockup { height: 30px; width: auto; display: block; }

/* ---------- 챗봇 설정 ---------- */
.cb-grid { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start; }
/* 미리보기는 흘려보내고 「홈페이지에 붙이기」 카드만 고정한다.
   (컬럼 전체 고정+max-height 는 낮은 화면에서 복사 버튼이 컬럼 경계에 잘림 —
   미리보기는 테마를 고르는 화면 상단에서만 필요하니 같이 스크롤돼도 된다)
   stretch 는 sticky 카드가 움직일 공간(왼쪽 컬럼만큼의 높이)을 주기 위한 것 */
.cb-side { align-self: stretch; }
.cb-pin { position: sticky; top: 72px; }
.thm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.thm { display: block; cursor: pointer; border: 2px solid var(--border); border-radius: 12px; padding: 8px; text-align: center; transition: border-color .12s; }
.thm.sel { border-color: var(--primary); }
.thm input { display: none; }
.thm-prev { display: block; height: 62px; border: 1px solid var(--border); position: relative; overflow: hidden; margin-bottom: 7px; }
.thm-bar { position: absolute; inset: 0 0 auto 0; height: 16px; }
.thm-b1 { position: absolute; left: 8px; top: 26px; width: 60%; height: 12px; border-radius: 6px; }
.thm-b2 { position: absolute; right: 8px; top: 44px; width: 42%; height: 12px; border-radius: 6px; }
.thm-name { font-size: 13px; font-weight: 600; color: var(--text-2); }
.cb-preview { --cb-accent: #2A5BC0; --cb-bg: #fff; --cb-ink: #14181F; --cb-bubble: #EAF1FF; --cb-radius: 16px;
  position: relative; background: #EEF1F6; border-radius: 14px; padding: 18px; min-height: 430px; }
.cb-preview.left .cbp-panel, .cb-preview.left .cbp-fab { margin-left: 0; margin-right: auto; }
.cbp-panel { background: var(--cb-bg); color: var(--cb-ink); border-radius: var(--cb-radius); overflow: hidden;
  box-shadow: 0 14px 36px rgba(15,23,42,.2); margin-left: auto; width: 292px; }
.cbp-hd { background: var(--cb-accent); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
.cbp-hd b { flex: 1; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbp-hd span { opacity: .8; }
.cbp-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cbp-msg { max-width: 88%; font-size: 13.5px; line-height: 1.65; padding: 8px 11px; border-radius: 12px; }
.cbp-msg.bot { align-self: flex-start; background: var(--cb-bubble); }
.cbp-msg.me { align-self: flex-end; background: var(--cb-accent); color: #fff; }
.cbp-sug { display: flex; flex-wrap: wrap; gap: 5px; }
.cbp-sug span { font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 9px; color: var(--cb-ink); opacity: .8; }
.cbp-src span { font-size: 10.5px; color: var(--cb-accent); border: 1px solid var(--cb-accent); border-radius: 999px; padding: 2px 8px; opacity: .8; }
.cbp-ft { border-top: 1px solid rgba(15,23,42,.08); padding: 9px 12px; display: flex; align-items: center; gap: 8px; }
.cbp-ft span { flex: 1; font-size: 13px; color: #9AA1AD; }
.cbp-ft i { font-style: normal; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--cb-accent); border-radius: 8px; padding: 5px 10px; }
.cb-preview.dark .cbp-ft { border-top-color: rgba(255,255,255,.12); }
.cbp-fab { width: 46px; height: 46px; border-radius: 999px; background: var(--cb-accent); color: #fff;
  display: grid; place-items: center; margin: 12px 0 0 auto; box-shadow: 0 8px 22px rgba(15,23,42,.25); }
.cb-code { background: #0F172A; color: #7EE3A1; border-radius: 10px; padding: 13px 14px; font-size: 13px;
  line-height: 1.6; overflow-x: auto; margin: 0 0 12px; white-space: pre-wrap; word-break: break-all; }
.cb-how { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.cb-how p { margin: 6px 0; font-size: 14.5px; color: var(--text-2); line-height: 1.7; word-break: keep-all; }
@media (max-width: 1100px) { .cb-grid { grid-template-columns: 1fr; } .cb-side { align-self: auto; } .cb-pin { position: static; } }

/* 임베딩 서빙 위치 배지 */
.emb-host { display: flex; gap: 12px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; margin: 0 0 14px; }
.emb-host.self { background: #F2FBF5; border-color: #C9EBD4; }
.emb-flag { font-size: 20px; line-height: 1.2; }
.emb-host b { font-size: 14.5px; display: block; margin-bottom: 3px; }
.emb-host p { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.7; word-break: keep-all; }

/* 사이드바 드래그 정렬 */
.edt-row.dragging { opacity: .45; }
.edt-row.drop-above { box-shadow: 0 -2px 0 var(--primary); border-radius: 0; }
.edt-row.drop-below { box-shadow: 0 2px 0 var(--primary); border-radius: 0; }
.edt-group.drop-into { background: var(--primary-soft); }


/* 에디터 사이드바 — 가져오기 버튼 (v63 콘텐츠 화면 일원화) */
.ed-side-import {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 1px dashed var(--border-strong); background: var(--surface); cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2);
  border-radius: 10px; padding: 9px 12px; margin: 8px 0 14px;
}
.ed-side-import:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.ed-side-import .ic { width: 14px; height: 14px; }

/* 인풋(40px) 행에 나란히 서는 버튼 — 같은 높이·수직 중앙 (전수조사 v64) */
.btn.inp-h { height: 40px; margin-top: 0 !important; }
/* AI 연결·마법사의 code 칩(≈35px) 옆 복사 버튼 — 칩과 같은 높이 */
.ai-url-row .btn.sm { height: 33px; border-radius: 9px; }

/* 레일 첫 라벨 — 개인·팀 시작점 통일 */
.adm-rail > .adm-rail-label:first-child { margin-top: 2px; }

/* 브랜드 자산 — 탭 아이콘(파비콘)·공유 이미지(OG) */
.brand-row { display: flex; align-items: flex-start; gap: 16px; }
.brand-row-body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.brand-row-body small { flex-basis: 100%; font-size: 13.5px; color: var(--text-3); }
.brand-up { display: inline-flex; margin: 0; }
.brand-up .btn { cursor: pointer; }
.fav-preview {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}
.fav-preview img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
.og-preview {
  max-width: 480px; aspect-ratio: 1200 / 630; border-radius: 12px; overflow: hidden;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border);
}
.og-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 좁은 폰에서 상단바가 56px 넘치던 결함 — 이름은 숨기고 아바타·로그아웃만 */
@media (max-width: 480px) {
  .adm-topbar-in { gap: 6px; }
  .adm-user-chip { font-size: 0; gap: 0; padding: 4px; }
  .adm-user-chip .adm-avatar { font-size: 13px; }
  .adm-topbar-right .btn.sm { padding-left: 8px; padding-right: 8px; }
}

/* 운영자 모드 배너 — 슈퍼어드민이 구성원 아닌 브레인을 열었을 때만 그려진다 */
.ghost-bar { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 14px; line-height: 1.5; }
.ghost-bar .ic { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.ghost-bar b { font-weight: 700; }
.ed-wrap .ghost-bar.ed-ghost { margin: 12px 0 0; }
/* 실패 기록(슈퍼어드민) */
.fail-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.fail-filters .inp, .fail-filters select.inp { width: auto; min-width: 120px; }
.fail-kind { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--tint-3, #eef1f5); color: var(--text-2, #333); white-space: nowrap; }
.fail-kind.exception, .fail-kind.billing { background: #fee2e2; color: #991b1b; }
.fail-kind.client, .fail-kind.mcp { background: #ede9fe; color: #5b21b6; }
.fail-kind.import, .fail-kind.github, .fail-kind.embed { background: #e0f2fe; color: #075985; }
.fail-kind.chat, .fail-kind.search { background: #fef3c7; color: #92400e; }
.fail-kind.auth, .fail-kind.flash, .fail-kind.http { background: #f1f5f9; color: #334155; }
.fail-msg { max-width: 520px; word-break: break-word; }
.fail-action { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-3, #555); word-break: break-all; }
.fail-detail summary { cursor: pointer; color: var(--text-3, #555); font-size: 13px; }
.fail-detail pre { margin: 6px 0 0; max-width: 640px; max-height: 260px; overflow: auto; font-size: 12.5px; line-height: 1.45; background: var(--tint-2, #f6f7f9); border: 1px solid var(--tint-5, #e3e6ea); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-all; }
.fail-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.fail-kinds a { text-decoration: none; }
.fail-kinds a.on .fail-kind { outline: 2px solid var(--primary, #346DDB); }
tr.fail-resolved td { opacity: .55; }

/* ============================================================
   수정 제안(검토 후 반영) · 승인자
   ============================================================ */
.badge.warn { background: #FFF8EB; color: var(--warning); }
.badge.bad { background: var(--danger-soft); color: var(--danger); }
.badge.info { background: var(--primary-soft); color: var(--primary); }
.cr-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.cr-role-help { color: var(--text-2); font-size: 13.5px; margin: 6px 0 14px; }
.cr-role-help a { color: var(--primary); }

/* 목록 */
.cr-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); margin: 18px 0 14px; flex-wrap: wrap; }
.cr-tab { padding: 9px 14px; font-size: 14.5px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 7px; }
.cr-tab b { font-size: 12px; background: var(--bg); color: var(--text-3); border-radius: 999px; padding: 1px 7px; }
.cr-tab.on { color: var(--primary); border-bottom-color: var(--primary); }
.cr-tab:hover { color: var(--text); }
.cr-viewtoggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cr-viewtoggle a { padding: 5px 11px; font-size: 13px; color: var(--text-2); }
.cr-viewtoggle a.on { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.cr-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cr-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cr-row:last-child { border-bottom: 0; }
.cr-row:hover { background: var(--bg); }
.cr-num { color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 600; }
.cr-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-row-main b { font-size: 15.5px; }
.cr-row-main small { color: var(--text-3); font-size: 13px; }
.cr-setup-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cr-setup-form .gh-opt small { display: block; color: var(--text-3); font-weight: 400; margin-top: 2px; }

/* 상세 */
.cr-head-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cr-head-acts form { margin: 0; }
.cr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .cr-grid { grid-template-columns: 1fr; } }
.cr-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.cr-meta .inp { width: 100%; }
.cr-desc { margin: 0; white-space: pre-wrap; color: var(--text-2); }
.cr-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cr-page:last-of-type { border-bottom: 0; }
.cr-page-main { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-page-acts { display: flex; align-items: center; gap: 6px; }
.cr-page-acts form { margin: 0; }
.cr-addpage { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.cr-tag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--bg); color: var(--text-2); }
.cr-tag.delete { background: var(--danger-soft); color: var(--danger); }
.cr-tag.add { background: var(--success-soft); color: var(--success); }
.cr-note { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius); padding: 11px 14px; margin: 10px 0; font-size: 14.5px; border: 1px solid var(--border); background: var(--surface); }
.cr-note .ic { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.cr-note.ok { background: var(--success-soft); border-color: #BDE7CC; color: #12663A; }
.cr-note.bad { background: var(--danger-soft); border-color: #F6C9C9; color: #A31B1B; }
.cr-note.warn { background: #FFF8EB; border-color: #F3DDB0; color: #8A4B00; }
.cr-review textarea { width: 100%; margin-bottom: 10px; }
.cr-review-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cr-warn { color: var(--text-3); font-size: 13px; margin: 10px 0 0; }
.cr-timeline { display: flex; flex-direction: column; gap: 14px; }
.cr-tl { display: flex; gap: 10px; font-size: 14px; }
.cr-tl small { display: block; color: var(--text-3); font-size: 12px; }
.cr-tl-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--border-strong); margin-top: 6px; flex: none; }
.cr-tl.merged .cr-tl-dot, .cr-tl.approve .cr-tl-dot { background: var(--success); }
.cr-tl.changes .cr-tl-dot { background: var(--danger); }
.cr-tl.submitted .cr-tl-dot { background: var(--warning); }
.cr-tl-body { background: var(--bg); border-radius: 8px; padding: 8px 10px; margin-top: 6px; white-space: pre-wrap; }

/* 변경 내용(diff) */
.cr-changes { display: flex; flex-direction: column; gap: 18px; }
.cr-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cr-card > header { padding: 11px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #FAFBFC; }
.cr-titlechange { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.cr-state-note { margin: 0; padding: 9px 16px; font-size: 13.5px; display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--border); }
.cr-state-note .ic { width: 15px; height: 15px; }
.cr-state-note.info { background: var(--primary-soft); color: var(--primary); }
.cr-state-note.bad { background: var(--danger-soft); color: var(--danger); }
.cr-nodiff { padding: 16px; color: var(--text-3); margin: 0; }
.cr-diff { overflow-x: auto; }
.cr-diff table { width: 100%; border-collapse: collapse; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; table-layout: fixed; }
.cr-diff.inline table { table-layout: auto; }
.cr-diff th { background: #FAFBFC; font-family: var(--font); font-size: 12.5px; color: var(--text-2); text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.cr-diff td.n { width: 44px; color: var(--text-3); text-align: right; padding: 0 8px; user-select: none; vertical-align: top; border-right: 1px solid var(--border); background: #FCFCFD; }
.cr-diff td.c { padding: 0 10px; vertical-align: top; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }
.cr-diff td.c.del { background: #FEEEEE; }
.cr-diff td.c.add { background: #EAF8EF; }
.cr-diff td.c.empty { background: #F6F7F9; }
.cr-diff tr.gap td { background: #F4F6FA; color: var(--text-3); font-family: var(--font); text-align: center; padding: 4px; font-size: 12px; }

/* 충돌 정리 */
.cr-resolve { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cr-choice { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.cr-choice small { display: block; color: var(--text-3); margin-top: 2px; }
.cr-manual { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }

/* 편집기: 수정 제안 안에서 편집 중 배너 · 검토 모드에서 구조 편집 잠금 */
.cr-banner { display: flex; align-items: center; gap: 12px; background: #FFF8EB; border: 1px solid #F3DDB0; color: #6B3E00; border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-size: 14px; }
.cr-banner .ic { width: 18px; height: 18px; flex: none; }
.cr-banner-body { flex: 1; min-width: 0; }
.ed-review-lock .edt-acts, .ed-review-lock .edt-insert, .ed-review-lock .edt-add, .ed-review-lock .ed-side-import, .ed-review-lock .ed-slug, .ed-review-lock #historyBtn { display: none !important; }
.ed-review-lock .edt-row { cursor: default; }


/* ============================================================
   UI 다듬기 — 수정 제안 설정 카드 · 팀 구성원 행 · 브레인 카드 제목
   ============================================================ */
/* 스위치 옵션(.gh-opt) — GitHub 연동 화면에 인라인으로만 있던 규칙을 공용으로 */
.gh-opt { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; margin: 0 0 10px; transition: border-color .15s, background .15s, box-shadow .15s; }
.gh-opt:hover { border-color: var(--border-strong); }
.gh-opt:has(input:checked) { border-color: var(--primary-soft-2); background: var(--primary-soft); }
.gh-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.gh-sw { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; transition: background .15s; margin-top: 1px; }
.gh-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.gh-opt input:checked + .gh-sw { background: var(--primary); }
.gh-opt input:checked + .gh-sw::after { transform: translateX(16px); }
.gh-opt input:focus-visible + .gh-sw { outline: 2px solid var(--primary); outline-offset: 2px; }
.badge.off { background: var(--bg); color: var(--text-3); }

/* 수정 제안 — 「검토 후 반영」 카드: 항목마다 숨 쉴 자리 */
.cr-setup { padding: 26px 28px 24px; margin-bottom: 8px; }
.cr-setup h2 { margin-bottom: 8px; }
.adm-card.cr-setup .adm-card-sub { margin: 0 0 22px; line-height: 1.65; }
.cr-setup-form { align-items: stretch; gap: 12px; }
.cr-setup-form .gh-opt { margin: 0; padding: 16px 18px; gap: 16px; align-items: center; }
.cr-setup-form .gh-opt b { display: block; font-size: 15.5px; line-height: 1.35; margin-bottom: 3px; }
.cr-setup-form .gh-opt small { margin-top: 0; font-size: 13.5px; line-height: 1.55; }
.cr-setup-form > .btn { align-self: flex-start; margin-top: 8px; }
.adm-card .cr-role-help { margin: 20px 0 0; padding: 14px 16px; border-radius: 10px; background: var(--bg); color: var(--text-2); font-size: 13.5px; line-height: 1.7; }
.adm-card .adm-card-sub + .cr-role-help { margin-top: 4px; margin-bottom: 20px; }
.cr-setup + .cr-tabs { margin-top: 30px; }
.adm-page-head + .adm-page-sub { margin-top: 8px; }
.adm-page-sub .badge { margin-left: 8px; vertical-align: 1px; }

/* 팀 구성원 행 — 역할 드롭다운·버튼·삭제 단추 높이 통일 */
.toplist-row { gap: 14px; padding: 12px 4px; }
.toplist-row form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.toplist-row .dpsel-btn { height: 36px; min-width: 132px; padding: 0 12px; font-size: 14.5px; border-radius: 8px; }
.toplist-row .btn.sm { height: 36px; padding: 0 14px; border-radius: 8px; }
.toplist-row .icbtn { width: 36px; height: 36px; }

/* 브레인 카드 — 제목이 카드 폭을 끝까지 쓰고, 정말 넘칠 때만 줄임 */
.site-card-top > div { flex: 1 1 0; min-width: 0; }
.site-card-url { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }

/* ============================================================
   워크스페이스 · 게스트 · 엑셀 일괄 초대
   ============================================================ */
.badge.guest { background: #FFF1E3; color: #B45309; }
.badge.sm { font-size: 12px; padding: 2px 8px; }
.ctx-avatar.guest, .adm-avatar.guest { background: #FFF1E3; color: #B45309; }
.ctx-item .badge.guest { margin-left: 6px; }
.ctx-two { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ctx-two small { color: var(--text-3); font-size: 11.5px; font-weight: 500; }
.adm-rail-note { display: flex; gap: 8px; margin: 16px 10px; padding: 10px 12px; border-radius: 10px; background: #FFF8EB; color: #8A5A00; font-size: 12.5px; line-height: 1.6; }
.adm-rail-note .ic { flex: none; width: 15px; height: 15px; margin-top: 3px; }

.ws-strip { margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.ws-strip.guest { background: #FFFBF5; border-color: #F7DFC0; }
.ws-strip-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.ws-strip-head h2 { font-size: 15px; margin: 0; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ws-cards.big { gap: 14px; }
.ws-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color .15s, box-shadow .15s; min-width: 0; }
.ws-card:hover { border-color: var(--primary); box-shadow: 0 2px 10px rgba(52,109,219,.10); }
.ws-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.ws-mark.lg { width: 40px; height: 40px; font-size: 18px; margin-right: 12px; vertical-align: middle; }
.ws-card-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-card-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-card-sub { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-card-badges { margin-left: auto; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
.ws-group { margin: 0 0 26px; }
.ws-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.ws-group-head .ic { width: 17px; height: 17px; color: var(--text-3); }
.ws-group-head a:hover { color: var(--primary); }
.ws-group-n { font-weight: 500; color: var(--text-3); font-size: 12.5px; margin-left: 6px; }
.ws-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 12px; font-weight: 600; }
.ws-chip .ic { width: 12px; height: 12px; }
.ws-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-head h1 { display: flex; align-items: center; }
.ws-head-badges { display: flex; gap: 6px; }
.ws-desc { color: var(--text-2); margin: -4px 0 16px; line-height: 1.7; }
.next-hint.guest { background: #FFF8EB; border-color: #F7DFC0; color: #8A5A00; }
.next-hint.guest > .ic { color: #B45309; }
.ws-addform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }

.bulk-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.bulk-up { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bulk-up input[type=file] { width: auto; max-width: 320px; padding: 6px 10px; height: auto; }
.bulk-sum { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bulk-done { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--success-soft); color: #166534; margin-bottom: 10px; line-height: 1.7; }
.bulk-done .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.bulk-table-wrap { overflow: auto; max-height: 540px; border: 1px solid var(--border); border-radius: 10px; }
.bulk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bulk-table th { position: sticky; top: 0; background: var(--bg); text-align: left; font-weight: 700; color: var(--text-2); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bulk-table td { padding: 7px 10px; border-top: 1px solid var(--border); vertical-align: top; word-break: break-all; }
.bulk-table td.num { color: var(--text-3); width: 44px; }
.bulk-table td.msg { color: var(--text-2); word-break: keep-all; }
.bulk-row.error { background: #FFF6F6; }
.bulk-row.skip td { color: var(--text-3); }
@media (max-width: 720px) { .ws-cards { grid-template-columns: 1fr; } .ws-card-badges { flex-direction: row; } }

/* ---------- API 토큰 ---------- */
.tok-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tok-prefix { font: 12px/1 ui-monospace, Menlo, monospace; color: var(--text-3); margin-left: 6px; }
.tok-meta { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.tok-code { background: #0F172A; color: #E2E8F0; padding: 12px 14px; border-radius: 10px; overflow: auto; font: 13px/1.6 ui-monospace, Menlo, monospace; margin: 10px 0 0; }
.tok-copy { margin: 0 0 12px; }
.tok-copy-h { font-size: 12.5px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.tok-copy-b { display: flex; gap: 8px; align-items: center; background: #0F172A; border-radius: 10px; padding: 8px 8px 8px 14px; }
.tok-copy-b code { flex: 1; min-width: 0; color: #7EE3A1; font: 12.5px/1.6 ui-monospace, Menlo, monospace; word-break: break-all; background: none; }

/* ============================================================
   브레인 옮기기 — 드래그앤드롭 · 이동 독 · 확인창
   ============================================================ */
.site-card.movable { cursor: grab; }
.site-card.movable:active { cursor: grabbing; }
.site-card.dragging { opacity: .42; transform: scale(.985); box-shadow: none; }
.site-card .mv-btn { margin-left: auto; color: var(--primary); font-weight: 600; }
.site-card .mv-btn:hover { background: var(--primary-soft); }
.mv-tip { display: flex; align-items: center; gap: 7px; margin: -4px 0 18px; color: var(--text-3); font-size: 13.5px; }
.mv-tip .ic { width: 15px; height: 15px; flex: none; }
.site-card .mv-btn .ic { width: 14px; height: 14px; margin-right: 4px; }
[data-drop].mv-over { outline: 2px dashed var(--primary); outline-offset: 0; background: var(--primary-soft); }
/* 놓는 자리(그룹 영역·카드 목록)는 안쪽 여백을 줘서 강조 테두리가 글자·카드에 붙지 않게 한다 — 가로는 음수 여백으로 본문 정렬은 그대로 */
.ws-group[data-drop], .site-grid[data-drop] { padding: 16px 18px; margin: 0 -18px; border-radius: 16px; transition: background .12s, outline-color .12s; }
.ws-group[data-drop] { margin-bottom: 0; }
.ws-group[data-drop] .ws-group-head { margin-top: 0; }
.mv-empty-hint { display: none; align-items: center; justify-content: center; min-height: 84px; margin-top: 4px; border: 1.5px dashed var(--border-strong); border-radius: 12px; background: var(--surface); color: var(--text-3); font-size: 14px; font-weight: 600; }
body.mv-dragging .mv-empty-hint { display: flex; }
body.mv-dragging .ws-group[data-drop], body.mv-dragging .site-grid[data-drop], body.mv-dragging .adm-card[data-drop] { outline: 1.5px dashed var(--border-strong); outline-offset: 0; }
body.mv-dragging .ws-group[data-drop].mv-over, body.mv-dragging .site-grid[data-drop].mv-over, body.mv-dragging .adm-card[data-drop].mv-over { outline: 2px dashed var(--primary); outline-offset: 0; }
body.mv-dragging .ws-group[data-drop].mv-over .mv-empty-hint { border-color: var(--primary); color: var(--primary); background: #fff; }

/* 이동 독 — 끌기 시작하면 왼쪽 레일 자리에 세로 목록으로 뜬다(항상 화면 안·본문을 가리지 않음). 레일이 없는 좁은 창은 오른쪽에 붙는다 */
.mv-dock { position: fixed; top: 56px; left: 0; width: 232px; bottom: 0; z-index: 1000010; padding: 16px 12px 20px; background: var(--surface); border-right: 1px solid var(--border-strong); box-shadow: 10px 0 30px rgba(16,24,40,.10); overflow-y: auto; opacity: 0; transform: translateX(-14px); pointer-events: none; transition: transform .16s ease, opacity .16s ease; }
.mv-dock.show { opacity: 1; transform: none; pointer-events: auto; }
.mv-dock-h { font-size: 12.5px; font-weight: 700; color: var(--primary); margin: 2px 8px 12px; }
.mv-dock-groups { display: flex; flex-direction: column; gap: 16px; }
.mv-dock-gn { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; margin: 0 8px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-dock-items { display: flex; flex-direction: column; gap: 6px; }
.mv-chip { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; min-width: 0; }
.mv-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-chip .ic { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.mv-chip.mv-over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); outline: none; box-shadow: 0 4px 14px rgba(52,109,219,.22); transform: translateX(3px); }
.mv-chip.mv-over .ic { color: var(--primary); }
.mv-chip.current { opacity: .45; cursor: not-allowed; background: var(--bg); }

.mv-route { font-weight: 700; color: var(--text); }
.mv-aud { margin: 2px 0 10px; color: var(--text-2); }
.mv-warn { background: #FEF1F1; color: #B42318; border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.mv-note { color: var(--text-3); font-size: 13px; }
.mdl-body.mv-pick { max-height: 56vh; overflow: auto; }
.mv-pick-g { margin-bottom: 12px; }
.mv-pick-i { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 12px; margin: 0 0 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; cursor: pointer; color: var(--text); }
.mv-pick-i:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); }
.mv-pick-i .ic { width: 16px; height: 16px; color: var(--text-3); }
.mv-pick-i em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-3); font-weight: 500; }
.mv-pick-i:disabled { opacity: .5; cursor: not-allowed; }
.toast.mv-toast { display: flex; align-items: center; gap: 14px; }
.toast .mv-undo { margin-left: auto; background: none; border: 0; color: #9CC1FF; font: inherit; font-weight: 700; cursor: pointer; padding: 2px 4px; }
.toast .mv-undo:hover { color: #fff; }
@media (max-width: 720px) { .mv-dock { display: none; } }

/* ---- 워크스페이스 MCP · 스페이스 공용 브레인 ---- */
.ws-mcp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ws-mcp-url {
  flex: 1 1 320px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-mcp-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; color: var(--text-3); }
.ws-mcp-note .ic { width: 14px; height: 14px; flex: none; }
.ws-brain-sec { margin-top: 18px; }
.ws-brain-sec:first-of-type { margin-top: 8px; }
.ws-sec-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.ws-sec-h .ic { width: 17px; height: 17px; color: var(--text-3); }
.ws-empty { margin: 10px 0 0; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 12px; color: var(--text-2); font-size: 14px; }
.ws-empty a { color: var(--primary); font-weight: 600; }
.ws-brain-sec .site-grid { margin-top: 12px; margin-bottom: 0; }
.site-card.mcp-off { background: #FAFAFB; }
.site-card.mcp-off .site-card-top, .site-card.mcp-off .site-card-stats { opacity: .62; }
.mcp-tog { display: flex; align-items: center; gap: 10px; margin: 0; }
.mcp-switch {
  position: relative; flex: none; width: 40px; height: 24px; border: 0; border-radius: 999px; background: #C9CEDA; cursor: pointer; padding: 0; transition: background .15s;
}
.mcp-switch .knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.25); transition: transform .15s; }
.mcp-switch.on { background: var(--success); }
.mcp-switch.on .knob { transform: translateX(16px); }
.mcp-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mcp-tog-label { font-size: 13.5px; font-weight: 600; color: var(--text-3); }
.mcp-tog-label.on { color: #166534; }
.mcp-dot { width: 9px; height: 9px; border-radius: 50%; background: #C9CEDA; flex: none; }
.mcp-dot.on { background: var(--success); }
/* 조직 공용 브레인 — 「모든 팀 MCP에 포함」 토글(소유자만 조작) · 조직 MCP 화면 · 워크스페이스 화면의 읽기 전용 카드 */
.orgc-lab { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orgc-sub { font-size: 12.5px; color: var(--text-3); }
.orgc-sub[hidden] { display: none; }
.orgc-note { font-size: 12.5px; color: var(--text-3); }
.org-tog.ro .mcp-switch { cursor: not-allowed; opacity: .55; }
.ws-group.org-common { padding: 14px 16px 6px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.adm-card .orgmcp-mykey { margin: 12px 0 0; }   /* .adm-card .adm-card-sub 의 음수 윗여백(-10px)보다 특이도가 같고 뒤라서 이긴다 — 안 그러면 위 안내 문구와 겹친다 */
.orgmcp-guide { margin-top: 16px; }
.orgmcp-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.orgc-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.orgc-card-top { display: flex; align-items: center; gap: 12px; }
.orgc-card-name { font-weight: 700; font-size: 15.5px; }
.orgc-card-desc, .site-card-desc { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-3); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.orgc-card-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.orgc-ro { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #EEF2FF; color: #3730A3; font-size: 12.5px; font-weight: 600; }
.site-grid.orgc-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* 조직 공용 카드의 워크스페이스 스위치 — 꺼져도 카드·보기는 남고(흐리게), 관리자가 아니면 스위치가 비활성이다 */
.orgc-card.mcp-off { background: #FAFAFB; }
.orgc-card.mcp-off .orgc-card-top { opacity: .62; }
.orgc-card-toggle { display: flex; flex-direction: column; gap: 4px; }
.orgc-tog.ro .mcp-switch, .mcp-switch[disabled] { cursor: not-allowed; opacity: .55; }
.orgc-admin-only { margin: 0; font-size: 12.5px; color: var(--text-3); }
.org-owner-row { background: #F7F9FF; }
.card-menu { position: relative; margin-left: auto; }
.card-menu > summary { list-style: none; cursor: pointer; letter-spacing: 1px; font-weight: 700; }
.card-menu > summary::-webkit-details-marker { display: none; }
.card-menu-pop {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; min-width: 170px; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-md);
}
.card-menu-pop button { width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.card-menu-pop button:hover { background: var(--bg); }
.site-card:has(.card-menu[open]) { position: relative; z-index: 6; }
.ws-sec-h + .adm-card-sub { margin-top: 6px; }
.aud-filter { display: flex; gap: 6px; margin: 0 0 12px; }