/* ============================================================
   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: 15.5px; 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: 14px; 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: 13px; 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: 12px; 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: 13.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: 11.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: 11px; 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: 13.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: 14px;
  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: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rail-site-sub { display: block; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-rail-label { font-size: 11px; 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: 14.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: 14.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: 16.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: 14px; 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: 14px; 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: 13.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; }
.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: 14px; font-weight: 600; margin-bottom: 6px; }
.fld small { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; 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: 13px;
}
.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: 13.5px; font-weight: 600; margin-top: 9px; }
.ly-desc { display: block; font-size: 12px; 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: 14px; }
.saved-bar span { font-size: 13px; 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: 13.5px; font-weight: 600; }
.dropzone-sub { font-size: 12px; 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: 12.5px; color: var(--primary); }
.site-card-stats { display: flex; gap: 16px; font-size: 12.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: 12px; 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: 12px; 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: 11.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: 13px; border-radius: 8px; }
.tree-empty { padding: 14px; color: var(--text-3); font-size: 13px; 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: 12.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: 13px; 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: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 5;
}
.chart30-x { display: flex; justify-content: space-between; font-size: 11px; 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: 13.5px; }
.toplist-row:first-child { border-top: 0; }
.toplist-rank { width: 22px; text-align: center; color: var(--text-3); font-weight: 700; font-size: 12px; }
.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: 12.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: 12px; 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: 13.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: 13.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: 13.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: 12.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: 12.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: 13px; 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: 14px; line-height: 1.75; }
.onb-help { margin-top: 10px !important; }
.onb-help a { color: var(--primary); font-weight: 600; font-size: 13.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: 13.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: 13.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: 13px; }

/* ---------- 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: 13.5px; margin: 0 0 22px; }
.auth-switch { text-align: center; font-size: 13px; color: var(--text-2); margin-top: 18px; }
.auth-switch a { color: var(--primary); font-weight: 600; }
.auth-error { background: var(--danger-soft); color: #B91C1C; border-radius: 10px; padding: 11px 13px; font-size: 13px; margin-bottom: 14px; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 9px; height: 44px; font-size: 14px; 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: 12.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: 12.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: 12.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: 14px; 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: 13px; 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: 11px; 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: 13.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: 12.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: 13px; 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: 13.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: 13.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: 14px; 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 */
.vditor-wysiwyg .vditor-wysiwyg__block > pre.vditor-wysiwyg__pre { display: none !important; }
.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: 14px; }
.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: 11.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: 13.5px; font-weight: 600; color: var(--text); }
.slash-item small { font-size: 11.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: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-item:hover { background: var(--primary-soft); }
.pl-empty { font-size: 13px; color: var(--text-3); padding: 8px 10px; }
.slash-item kbd {
  font-family: inherit; font-size: 11px; 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: 13px; }
.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: 13.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: 12px; 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: 14px; }
.ed-title[readonly], .ed-desc[readonly] { cursor: default; }
.ed-title[readonly]:hover, .ed-desc[readonly]:hover { border-color: transparent; background: transparent; }
.ed-histrow { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-top: 1px solid var(--border); font-size: 13.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: 12.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;
}
.tbl-bar button {
  border: 0; background: transparent; border-radius: 7px; padding: 5px 9px;
  font-size: 12.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: 11.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: 12px; 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: 13px; 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: 13.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: 13px;
  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: 12px; 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: 14px; }
.imp-progress p { margin: 3px 0 0; font-size: 12.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: 14px; 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: 13px; 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: 13px; color: var(--text-3); margin: 8px 2px 0; }
.imp-warn { font-size: 13.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: 12.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: 13px; }
.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: 13.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: 12.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: 13.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: 13px; 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: 13.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: 14px; }
.wz-task p { margin: 0; font-size: 13.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: 13px; 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: 14px; white-space: nowrap; }
.pol-row span { font-size: 13.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: 13.5px; }
.aud-table th { text-align: left; font-size: 12px; 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: 12.5px; font-variant-numeric: tabular-nums; }
.aud-act { display: inline-block; font-size: 12px; 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: 12px; color: var(--warning, #B45309); }

/* ---------- 아이콘-레이블 수직 정렬 보정 ---------- */
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: 13px; }
#logoDrop .dropzone-sub { font-size: 12px; }

/* 도메인 안내 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: 12px; 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: 13.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: 14px; }
.impbn-body p { margin: 3px 0 8px; font-size: 13.5px; color: var(--text-2); }
.impbn-note { font-size: 12px; 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: 13.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: 12px; 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: 13.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: 12.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: 11px; 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: 12px; color: #9AA1AD; }
.cbp-ft i { font-style: normal; font-size: 11.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: 12px;
  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: 13.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: 13.5px; display: block; margin-bottom: 3px; }
.emb-host p { margin: 0; font-size: 13.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: 13px; 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: 12.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: 12px; }
  .adm-topbar-right .btn.sm { padding-left: 8px; padding-right: 8px; }
}