/* 관리자 UI 스타일 */
:root{
  --ink:#1c1f26; --muted:#6b7280; --line:#e5e7eb; --bg:#f5f6f8;
  --brand:#6d28d9; --brand-dark:#4c1d95; --danger:#dc2626;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ── 로그인: 1열 브랜드 · 2열 폼 (k.rebeauty.co.kr/admin 과 같은 배치) ──
   Inter 는 라틴 글자에만 걸리고 한글은 시스템 폰트로 떨어진다(그쪽과 동일). */
.login-body{background:#fff;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased}
.login-grid{display:flex;min-height:100vh}

.login-brand{
  flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:3rem;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-dark) 0%,var(--brand) 55%,#9333ea 100%);
}
/* 단색 그라데이션만 두면 평평해 보인다 — 빛 두 점을 얹어 깊이를 준다 */
.login-brand::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(236,72,153,.30) 0%,transparent 50%),
             radial-gradient(circle at 70% 30%,rgba(244,114,182,.20) 0%,transparent 50%)}
.login-brand-inner,.login-copy{position:relative;z-index:1}
.login-brand-inner{margin:auto 0}
.login-brand-head{display:flex;align-items:center;gap:1rem}
/* 로고는 보라 글리프라 보라 패널 위에서 묻힌다 — 흰색으로 눌러 찍는다(k 쪽 SVG 와 같은 처리) */
.login-brand-mark{width:48px;height:48px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.15))}
.login-logo{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.login-brand-sub{margin-top:.25rem;font-size:.875rem;color:rgba(255,255,255,.8)}
.login-brand-tagline{margin:2rem 0 0;font-size:1rem;color:rgba(255,255,255,.9)}
.login-copy{font-size:.8rem;color:rgba(255,255,255,.6)}

.login-form-col{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:2rem}
.login-card{width:100%;max-width:420px}
.login-mark-circle{display:none;align-items:center;justify-content:center;
  width:4rem;height:4rem;margin:0 auto 1.5rem;border-radius:9999px;
  background:linear-gradient(135deg,rgba(109,40,217,.10),rgba(147,51,234,.10))}
.login-title{margin:0 0 .5rem;font-size:1.5rem;font-weight:800;text-align:center;letter-spacing:-.02em}
.login-sub{margin:0 0 2rem;color:var(--muted);font-size:.875rem;text-align:center;line-height:1.5}

.login-form{display:flex;flex-direction:column;gap:1rem}
/* 아이콘을 입력칸 안에 넣는다 — 라벨 없이도 무엇을 넣는 칸인지 보이게 */
.login-field{position:relative}
.login-field-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;color:var(--muted);pointer-events:none}
.login-form input{width:100%;min-height:2.75rem;padding:.75rem 1rem .75rem 2.75rem;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  font:inherit;font-size:.9375rem;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.login-form input::placeholder{color:var(--muted)}
.login-form input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.10)}
.login-form button{width:100%;min-height:2.75rem;padding:.75rem 1.5rem;border:0;border-radius:12px;
  background:var(--brand);color:#fff;font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
  transition:opacity .15s,box-shadow .15s}
.login-form button:hover{opacity:.9;box-shadow:0 2px 8px rgba(109,40,217,.30)}
.login-error{margin-bottom:1rem;padding:.65rem .8rem;border-radius:12px;
  background:#fef2f2;color:var(--danger);font-size:.87rem}

@media (max-width:768px){
  .login-brand{display:none}                 /* 좁은 화면에선 폼만 남긴다 */
  .login-form-col{padding:1.5rem 1rem}
  .login-mark-circle{display:flex}
  .login-title{font-size:1.25rem}
}

/* ── 헤더 / 사이드 / 컨텐츠 ────────────────────────── */
.ad-header{position:fixed;top:0;left:0;right:0;height:56px;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.25rem;background:var(--brand-dark);color:#fff}
/* 타이틀은 왼쪽 끝에, 사이드메뉴 접기 버튼은 그 옆에 붙인다 */
.ad-header-left{display:flex;align-items:center;gap:.75rem;min-width:0}
.ad-logo{font-weight:700;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.ad-user{display:flex;align-items:center;gap:1rem;font-size:.87rem;color:rgba(255,255,255,.85)}
.ad-user a:hover{color:#fff;text-decoration:underline}
.ad-logout{padding:.3rem .7rem;border:1px solid rgba(255,255,255,.35);border-radius:6px}

.ad-layout{display:flex;align-items:flex-start;padding-top:56px;min-height:100vh}
.ad-side{flex:0 0 220px;width:220px;position:sticky;top:56px;
  height:calc(100vh - 56px);background:#fff;border-right:1px solid var(--line);padding:1rem 0}
.ad-side nav a{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.25rem;
  font-size:.92rem;color:#374151;border-left:3px solid transparent;white-space:nowrap}
.ad-side nav a:hover{background:#f9fafb}
.ad-side nav a.active{background:#f3effd;color:var(--brand);border-left-color:var(--brand);font-weight:600}
.ad-ico{flex:0 0 1.1rem;text-align:center;font-size:.95rem;color:#9ca3af}
.ad-side nav a.active .ad-ico{color:var(--brand)}

/* 1차 = 블로그, 2차 = 섹션 */
.ad-group + .ad-group{margin-top:.35rem;border-top:1px solid var(--line);padding-top:.35rem}
.ad-group-head{font-weight:700;font-size:.88rem !important;color:#111827 !important;letter-spacing:-.01em}
.ad-group-head .ad-ico{
  display:grid;place-items:center;width:1.35rem;height:1.35rem;flex:0 0 1.35rem;
  border-radius:6px;background:#eef0f4;color:#6b7280;font-size:.72rem;font-weight:700;
}
.ad-group.is-current .ad-group-head{color:var(--brand) !important}
.ad-group.is-current .ad-group-head .ad-ico{background:var(--brand);color:#fff}
/* 현재 블로그의 하위 항목만 펼친다 */
.ad-group-body{display:none}
.ad-group.is-current .ad-group-body{display:block}
.ad-group-body a{padding-left:2.55rem;font-size:.88rem;color:#4b5563}

/* 접었을 때는 아이콘만 — 현재 블로그의 하위 항목은 그대로 쓸 수 있어야 한다 */
.side-collapsed .ad-group-body a{padding-left:0}
.side-collapsed .ad-group-head{justify-content:center;padding-left:0;padding-right:0;gap:0}

/* 사이드메뉴 접기 — 헤더의 ☰ 로 토글, 폭만 줄이고 아이콘은 남긴다 */
.ad-toggle{padding:.25rem .5rem;border:1px solid rgba(255,255,255,.3);
  border-radius:6px;background:transparent;color:#fff;font-size:1rem;line-height:1;cursor:pointer}
.ad-toggle:hover{background:rgba(255,255,255,.12)}
.side-collapsed .ad-side{flex-basis:58px;width:58px}
.side-collapsed .ad-side nav a{justify-content:center;padding-left:0;padding-right:0;gap:0}
.side-collapsed .ad-lbl{display:none}

/* 컨텐츠는 남은 폭 전체 — max-width 제한 없음 */
.ad-content{flex:1 1 auto;width:100%;min-width:0;padding:1.75rem}
.ad-title{margin:0 0 1.25rem;font-size:1.4rem}

/* 폼도 아래 목록 카드와 같은 전폭을 쓴다. 한 줄 입력칸이 넓은 화면에서 길어지지만,
   글감 URL 은 원래 길고 폼과 목록의 오른쪽 끝이 맞아 화면이 정돈돼 보인다.
   대신 셀렉트가 늘어선 .ad-field-row 가 전폭에서 지나치게 벌어지지 않도록
   한 칸의 최대 폭만 잡아 둔다(아래 .ad-field-row 규칙). */
.ad-field > .ad-input,
.ad-field > .select2-container,
.ad-field > .ad-hint,
.ad-field-row{max-width:100%}
/* 입력칸이 더 이상 줄 전체를 채우지 않으므로, 그냥 두면 제출 버튼이 입력칸 옆에
   따라붙는다. 원래대로 줄을 끊어 아래에 세운다. */
.ad-field > .ad-btn{display:block;margin-top:1rem}

@media (max-width:900px){
  .ad-layout{display:block}

  /* 사이드바를 상단 2줄 내비로 바꾼다.
     1줄 = 블로그 칩(네이버/아메바), 2줄 = 현재 블로그의 섹션(가로 스크롤).
     .ad-group 을 display:contents 로 없애야 머리글과 본문이 nav 의 flex 자식이 되어
     "칩 줄 / 섹션 줄" 로 갈라진다. 세로 사이드바를 그대로 눕히면 9개 링크가
     한 덩어리로 쌓여 화면 절반을 먹는다. */
  .ad-side{position:static;width:100%;height:auto;padding:0;
    border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .ad-side nav{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;padding:.55rem .75rem}
  .ad-group{display:contents}
  .ad-group + .ad-group{margin-top:0;border-top:0;padding-top:0}
  .ad-side nav a{padding:.45rem .8rem;border-left:0;white-space:nowrap}

  .ad-group-head{order:0;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;font-size:.85rem !important}
  .ad-group.is-current .ad-group-head{border-color:var(--brand);background:#f3effd}

  /* order 로 섹션 줄을 칩보다 뒤로 보낸다. DOM 순서(네이버칩·네이버섹션·아메바칩)를
     그대로 두면 펼쳐진 섹션 줄이 두 칩 사이에 끼어 아메바 칩이 3번째 줄로 밀린다. */
  .ad-group-body{order:1;flex:1 0 100%}
  .ad-group.is-current .ad-group-body{
    display:flex;gap:.15rem;margin-top:.45rem;padding-top:.45rem;
    border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
  .ad-group.is-current .ad-group-body::-webkit-scrollbar{display:none}
  .ad-group-body a{flex:0 0 auto;padding-left:.8rem;border-bottom:2px solid transparent}
  .ad-group-body a.active{background:transparent;border-left:0;border-bottom-color:var(--brand)}

  .ad-content{padding:1.25rem 1rem}
  /* 좁은 화면에서는 가로 메뉴라 접기를 쓰지 않는다 */
  .ad-toggle{display:none}
  .side-collapsed .ad-side{flex-basis:auto;width:100%}
  .side-collapsed .ad-lbl{display:inline}

  /* .ad-card 가 overflow:hidden 이라 넓은 표는 그냥 두면 잘려서 볼 방법이 없다.
     카드를 가로 스크롤 상자로 만든다. 표에 display:block 을 주는 흔한 수법은
     표가 화면 폭으로 눌려 제목이 글자당 한 줄로 쪼개지므로 쓰지 않는다.
     대신 셀을 한 줄로 묶고 폭을 제한해, 표는 자연스러운 넓이를 유지한 채 밀린다. */
  .ad-card{overflow-x:auto}
  .ad-table th,.ad-table td{white-space:nowrap;max-width:15rem;overflow:hidden;text-overflow:ellipsis}
  .ad-toolbar,.ad-worker{flex-wrap:wrap}
}

/* ── 공통 컴포넌트 ─────────────────────────────────── */
.ad-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.ad-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.25rem}
/* 전체 대시보드는 같은 타일을 블로그별 카드 안에 넣는다 — 카드 안이라 패딩이 필요하다 */
.ad-ovstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.75rem;padding:1rem}
.ad-ovstats .ad-stat{padding:.85rem 1rem}
.ad-ovstats .ad-stat strong{font-size:1.5rem}
.ad-stat-label{display:block;font-size:.83rem;color:var(--muted)}
.ad-stat strong{display:block;margin-top:.35rem;font-size:1.9rem;font-weight:700}

.ad-card{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:1.5rem;overflow:hidden}
.ad-card-head{padding:.9rem 1.25rem;border-bottom:1px solid var(--line);font-weight:600;font-size:.95rem}

.ad-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ad-table th,.ad-table td{padding:.7rem 1.25rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.ad-table th{background:#fafafa;font-size:.82rem;color:var(--muted);font-weight:600}
.ad-table tr:last-child td{border-bottom:0}
.ad-table td a:hover{color:var(--brand);text-decoration:underline}
.ad-url{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.83rem}
.ad-empty{padding:2.5rem 1.25rem;text-align:center;color:var(--muted)}

.ad-search{display:flex;gap:.5rem;margin-bottom:1.25rem}
.ad-search input{flex:1 1 auto;max-width:24rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:8px}
.ad-search button{padding:.55rem 1.1rem;border:0;border-radius:8px;background:var(--brand);color:#fff;cursor:pointer}

.ad-btn{padding:.6rem 1.4rem;border:0;border-radius:8px;background:var(--brand);color:#fff;font-size:.92rem;cursor:pointer}
.ad-btn-ghost{display:inline-block;padding:.5rem 1rem;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.88rem}
.ad-btn-danger{padding:.35rem .75rem;border:1px solid #fecaca;border-radius:6px;
  background:#fff;color:var(--danger);font-size:.82rem;cursor:pointer}
.ad-btn-danger:hover{background:#fef2f2}

.ad-toolbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.ad-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-top:1.5rem}
.ad-pager a,.ad-pager span{padding:.4rem .75rem;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:.87rem;min-width:2.4rem;text-align:center}
.ad-pager a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.ad-pager a:hover{border-color:var(--brand);color:var(--brand)}
.ad-pager span.is-disabled{color:#d1d5db;cursor:default}

.ad-meta{display:grid;grid-template-columns:120px 1fr;gap:.6rem 1rem;margin:0;padding:1.25rem;font-size:.9rem}
.ad-meta dt{color:var(--muted)}
.ad-meta dd{margin:0;word-break:break-all}
.ad-body{padding:1.25rem;line-height:1.85}
.ad-body img{margin:1rem 0;border-radius:8px}

.ad-imggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:1.25rem}
.ad-imggrid figure{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.ad-imggrid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ad-imggrid figcaption{padding:.55rem .7rem;font-size:.78rem;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 글쓰기 폼 */
.ad-alert{margin-bottom:1.25rem;padding:.8rem 1rem;border:1px solid #fecaca;border-radius:8px;
  background:#fef2f2;color:#991b1b;font-size:.88rem}
.ad-lang-badge{margin-left:.5rem;padding:.1rem .5rem;border-radius:999px;
  background:#f3effd;color:var(--brand);font-size:.74rem;font-weight:600}
.ad-label{display:block;margin-bottom:.4rem;font-size:.85rem;font-weight:600}
/* line-height 를 명시해야 select2 로 바뀐 칸과 높이가 어긋나지 않는다
   (select2 쪽은 AdminController::select2Assets 에서 같은 값을 준다) */
.ad-input{width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;
  font-size:.92rem;line-height:1.3;background:#fff;color:inherit}
.ad-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.14)}
/* auto-fit 은 빈 트랙을 접어 남은 칸을 늘리므로, 전폭에서 셀렉트 두 개가 800px 씩 벌어진다.
   auto-fill 로 두면 빈 트랙이 남아 칸 하나의 폭이 화면과 무관하게 일정하다. */
.ad-field-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.25rem 0}

.ad-field{padding:1.25rem}
.ad-hint{margin:0 0 .7rem;font-size:.85rem;color:var(--muted)}
.ad-field textarea{width:100%;padding:.8rem;border:1px solid var(--line);border-radius:8px;
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical}
.ad-field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(109,40,217,.14)}
.ad-notice{margin-bottom:1.25rem;padding:.7rem 1rem;border-radius:8px;
  background:#ecfdf5;color:#065f46;font-size:.88rem}

.ad-prompts{margin:0;padding:1rem 1.25rem 1.25rem 2.6rem;font-size:.85rem;color:#4b5563;line-height:1.7}
.ad-prompts li{margin-bottom:.4rem}

/* ── 글 상세 ───────────────────────────────────────── */
/* 비교 2열에 화면을 최대한 내주려고, 메타는 헤더바 한 줄로 압축한다. */
.ad-detail{--cmp-h:calc(100vh - 238px)}

.ad-detail-bar{
  position:sticky;top:56px;z-index:10;
  display:flex;align-items:flex-start;gap:1rem;
  /* .ad-content 의 패딩을 상쇄해 화면 폭을 꽉 채운다 */
  margin:-1.75rem -1.75rem 1.25rem;padding:1rem 1.75rem;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.ad-back{
  flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;margin-top:.1rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);font-size:1rem;
}
.ad-back:hover{border-color:var(--brand);color:var(--brand)}

.ad-detail-main{flex:1 1 auto;min-width:0}
.ad-detail-title{margin:0 0 .5rem;font-size:1.22rem;line-height:1.35;font-weight:700}
/* 태그가 많아도 한 줄로 — 바 높이가 흔들리면 아래 비교 열 높이가 어긋난다 */
.ad-detail-meta{display:flex;flex-wrap:nowrap;align-items:center;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.ad-detail-meta::-webkit-scrollbar{display:none}
.ad-detail-meta > *{flex:0 0 auto}
.ad-chip{
  display:inline-block;padding:.16rem .55rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:.76rem;color:#4b5563;line-height:1.6;
  max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ad-chip-id{border-color:#ddd0f7;background:#f7f3ff;color:var(--brand);font-weight:600}
.ad-chip-pf{border-color:#c7d2fe;background:#eef2ff;color:#4338ca;font-weight:600}
.ad-chip-tag{background:#f9fafb;color:var(--muted)}
.ad-chip-plain{border-color:transparent;background:transparent;color:#9ca3af}
.ad-chip-src:hover{border-color:var(--brand);color:var(--brand)}

.ad-detail-actions{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;margin-top:.1rem}
.ad-switch{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);cursor:pointer;user-select:none}
.ad-switch input{accent-color:var(--brand);margin:0}

/* 이미지·프롬프트는 평소 접어두고 필요할 때만 편다 */
.ad-panel{background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:1.5rem}
.ad-panel summary{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;
  font-size:.92rem;font-weight:600;cursor:pointer;list-style:none;
}
.ad-panel summary::-webkit-details-marker{display:none}
.ad-panel summary::before{content:"▸";color:var(--muted);font-size:.8rem;transition:transform .15s}
.ad-panel[open] summary::before{transform:rotate(90deg)}
.ad-panel[open] summary{border-bottom:1px solid var(--line)}
.ad-panel-count{
  padding:.05rem .5rem;border-radius:999px;background:#f3effd;
  color:var(--brand);font-size:.75rem;font-weight:600;
}

.ad-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;padding:1.25rem}
.ad-shot{margin:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.ad-shot img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#f3f4f6}
.ad-shot figcaption{padding:.6rem .7rem}
.ad-shot-slot{
  display:inline-block;min-width:1.4rem;padding:.05rem .35rem;border-radius:5px;
  background:#f3effd;color:var(--brand);font-size:.72rem;font-weight:700;text-align:center;
}
.ad-shot-prompt{
  margin:.4rem 0 .5rem;font-size:.78rem;line-height:1.6;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.ad-copy{
  width:100%;padding:.3rem;border:1px solid var(--line);border-radius:6px;
  background:#fff;color:#4b5563;font-size:.75rem;cursor:pointer;
}
.ad-copy:hover{background:#f3f4f6;border-color:#d1d5db}

/* API 키 — 표 안에서는 값이 길어 고정폭 글꼴로 두고, 복사 버튼도 칸 크기에 맞춘다
   (.ad-copy 의 width:100% 는 이미지 프롬프트 카드용이다) */
.ad-key{
  padding:.15rem .4rem;border-radius:5px;background:#f3f4f6;color:#111827;
  font-size:.8rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.ad-table .ad-copy{width:auto;margin-left:.4rem;padding:.2rem .5rem}

@media (max-width:900px){
  .ad-detail{--cmp-h:none}
  .ad-detail-meta{flex-wrap:wrap;overflow-x:visible}
  .ad-detail-bar{
    position:static;flex-wrap:wrap;
    margin:-1.25rem -1rem 1rem;padding:.9rem 1rem;backdrop-filter:none;background:#fff;
  }
  .ad-detail-main{flex:1 1 0;min-width:0}
  /* 1열로 쌓이므로 동기화할 상대가 없다 */
  .ad-switch{display:none}
  .ad-detail-actions{flex:0 0 auto}
  .ad-detail-title{font-size:1.08rem}
}

/* 발행 계정 칩 — 상세 헤더에서 다른 메타와 구분되게 */
.ad-chip-acct{border-color:#bbf7d0;background:#f0fdf4;color:#15803d;font-weight:600}
/* 계정 목록의 관리 칸은 링크와 삭제 폼이 나란히 서야 한다 */
.ad-table .ad-toolbar{align-items:center}

/* 표 안의 행 단위 버튼 묶음 — .ad-toolbar 는 아래 여백이 있어 셀 안에서는 쓰지 않는다 */
.ad-rowacts{display:flex;align-items:center;gap:.4rem}
.ad-rowacts > *{flex:0 0 auto}
.ad-rowacts .ad-btn-ghost,.ad-rowacts .ad-btn-danger{white-space:nowrap}

/* ── 발행 도우미 ───────────────────────────────────── */
.ad-pub-hint{padding:.9rem 1.25rem 0;margin:0}
.ad-pubtable{margin-top:.6rem}
.ad-pubtable td{vertical-align:top}
.ad-pub-memo{font-size:.78rem;color:var(--muted)}
.ad-pub-url{max-width:22rem;padding:.35rem .6rem;font-size:.82rem}
.ad-pub-link{display:inline-block;margin-top:.35rem;font-size:.8rem;color:var(--brand)}
.ad-pub-link:hover{text-decoration:underline}
.ad-chip-done{border-color:#a7f3d0;background:#ecfdf5;color:#047857;font-weight:600}
.ad-pub-go{padding:.4rem .8rem;font-size:.82rem;white-space:nowrap}

/* 목록의 발행 현황 — 다 올렸으면 초록, 일부면 보라 */
.ad-pub-count{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ad-pub-count.is-part{color:var(--brand);font-weight:600}
.ad-pub-count.is-full{color:#047857;font-weight:600}

/* ── 워커 상태 배지 ─────────────────────────────────── */
/* cron 이 죽으면 큐만 쌓이고 아무도 모른다. 대시보드와 큐 화면 맨 위에 상시 노출한다. */
.ad-worker{display:flex;align-items:center;gap:.55rem;margin-bottom:1.25rem;
  padding:.7rem 1rem;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:.87rem}
.ad-worker-dot{flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:#9ca3af}
.ad-worker.is-ok .ad-worker-dot{background:#10b981}
.ad-worker.is-bad{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.ad-worker.is-bad .ad-worker-dot{background:var(--danger)}
/* 관리자가 일부러 끈 상태 — 고장(is-bad)이 아니므로 붉게 칠하지 않는다 */
.ad-worker.is-off{border-color:#e5e7eb;background:#f9fafb;color:#4b5563}
.ad-worker.is-off .ad-worker-dot{background:#9ca3af}
.ad-worker-msg{min-width:0}
/* 자동 글쓰기 켜기/끄기 — 배너 오른쪽 끝, 링크(a)와 같은 자리 */
.ad-worker-act{margin-left:auto}
.ad-worker-act .ad-btn-ghost{padding:.35rem .85rem;font-size:.82rem;cursor:pointer}
.ad-worker-act .ad-btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.ad-worker a{margin-left:auto;color:var(--brand);font-weight:600}
.ad-worker a:hover{text-decoration:underline}
.ad-worker code{padding:.1rem .3rem;border-radius:4px;background:rgba(0,0,0,.06);font-size:.82em}

/* ── 상태 탭 ────────────────────────────────────────── */
.ad-tabs{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.25rem}
.ad-tabs a{display:flex;align-items:center;gap:.4rem;padding:.45rem .9rem;
  border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.87rem}
.ad-tabs a:hover{background:#f9fafb}
.ad-tabs a.active{background:var(--brand);border-color:var(--brand);color:#fff}
.ad-tab-n{font-size:.78rem;opacity:.75;font-variant-numeric:tabular-nums}

/* ── 큐 작업 상태 칩 ────────────────────────────────── */
.ad-job-queued{border-color:#e5e7eb;background:#f9fafb;color:#6b7280}
.ad-job-processing{border-color:#ddd6fe;background:#f5f3ff;color:#6d28d9;font-weight:600}
.ad-job-done{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.ad-job-error{border-color:#fecaca;background:#fef2f2;color:#b91c1c;font-weight:600}

/* ── 의료광고 규정 점검 ─────────────────────────────── */
.ad-cmpl{border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.25rem;
  background:#fff;font-size:.88rem;line-height:1.6}
.ad-cmpl.is-clean{border-color:#a7d8c4;background:#f2fbf7;color:#0f5132}
.ad-cmpl.is-warn{border-color:#f0d9a8;background:#fffaf0}
.ad-cmpl.is-bad{border-color:#f0b4b4;background:#fdf5f5}
.ad-cmpl-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.6rem}
.ad-cmpl-badge{padding:.1rem .5rem;border-radius:999px;font-size:.76rem;font-weight:600}
.ad-cmpl-badge.is-bad{background:#c0392b;color:#fff}
.ad-cmpl-badge.is-warn{background:#b8860b;color:#fff}
.ad-cmpl-scope{margin-left:auto;font-size:.78rem;color:var(--muted)}
.ad-cmpl-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ad-cmpl-item{padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:#fff}
.ad-cmpl-title{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-weight:600}
.ad-cmpl-dot{width:.5rem;height:.5rem;border-radius:50%;flex:none}
.ad-cmpl-dot.is-bad{background:#c0392b}
.ad-cmpl-dot.is-warn{background:#b8860b}
.ad-cmpl-law{font-size:.76rem;font-weight:400;color:var(--muted)}
.ad-cmpl-hits{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0}
.ad-cmpl-hits code{padding:.05rem .35rem;border-radius:4px;background:#f1e4e4;color:#8b2f2f;
  font:inherit;font-size:.82rem}
.ad-cmpl-more{font-size:.78rem;color:var(--muted)}
.ad-cmpl-why{margin:.2rem 0 0;font-size:.83rem;color:var(--muted)}
.ad-cmpl-alt{margin:.15rem 0 0;font-size:.83rem;color:var(--brand)}
.ad-cmpl-foot{margin:.7rem 0 0;font-size:.78rem;color:var(--muted)}
/* 목록에서 위반 글을 바로 알아보게 하는 배지 */
.ad-cmplflag{display:inline-block;padding:.05rem .35rem;border-radius:4px;font-size:.72rem;font-weight:600}
.ad-cmplflag.is-bad{background:#fdecea;color:#c0392b;border:1px solid #f0b4b4}
.ad-cmplflag.is-warn{background:#fdf6e3;color:#8a6d1f;border:1px solid #f0d9a8}

/* ── 목록 썸네일 · 이미지 진행도 ────────────────────── */
.ad-thumb{width:96px;height:96px;object-fit:cover;border-radius:6px;background:#f3f4f6}
.ad-thumb.is-empty{display:block;border:1px dashed var(--line)}
.ad-imgprog{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ad-imgprog.is-part{color:var(--brand);font-weight:600}
.ad-imgprog.is-full{color:#047857;font-weight:600}
.ad-imgprog.is-bad{color:#b91c1c;font-weight:600}
.ad-imgprog-x{font-size:.75rem;font-weight:400}
.ad-dim{color:var(--muted);font-size:.83rem}

/* 통계 타일이 링크가 되면 눌리는 느낌을 준다 */
a.ad-stat{display:block;transition:border-color .12s,transform .12s}
a.ad-stat:hover{border-color:var(--brand);transform:translateY(-1px)}
.ad-stat strong.is-warn{color:#b45309}
.ad-stat strong.is-bad{color:#b91c1c}
.ad-card-more{float:right;font-size:.82rem;font-weight:400;color:var(--brand)}
.ad-card-more:hover{text-decoration:underline}
.ad-panel-bad{margin-left:.4rem;color:#b91c1c;font-style:normal;font-weight:600}

/* 일괄 버튼은 고른 게 없으면 흐리게 */
[data-needs-pick]:disabled{opacity:.45;cursor:not-allowed}

/* ── 목록 필터 줄 ───────────────────────────────────── */
.ad-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:1rem}
.ad-filters .ad-input{width:auto;padding:.5rem .7rem;font-size:.87rem}
.ad-filter-q{flex:1 1 16rem;min-width:12rem}

/* ── 이미지 가이드 편집 ─────────────────────────────── */
.ad-guide-intro{padding:1rem 1.25rem;margin:0;line-height:1.7}
.ad-shot-card.is-off{opacity:.55}
.ad-shot-head{display:flex;align-items:center;gap:.75rem}
.ad-shot-head .ad-switch{font-size:.95rem;color:var(--ink);font-weight:600}
.ad-shot-key{margin-left:auto;font-size:.76rem;color:var(--muted);
  padding:.15rem .45rem;border-radius:4px;background:#f3f4f6}
.ad-textarea{width:100%;font-family:inherit;line-height:1.6;resize:vertical}
.ad-recipe{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}
.ad-guide-actions{position:sticky;bottom:0;padding:.9rem 0;background:var(--bg)}
.ad-shot-actions{padding:.9rem 1.25rem 0;margin-bottom:0}
.ad-shot-actions form{display:inline}
.ad-shot-kind{display:inline-block;margin-left:.35rem;padding:.1rem .4rem;border-radius:4px;
  background:#f3f4f6;color:var(--muted);font-size:.72rem}

/* ── 글 형식의 법적 위험 안내 ───────────────────────── */
.ad-riskbox{margin:1rem 0 0;padding:.85rem 1rem;border-radius:8px;font-size:.87rem;line-height:1.7}
.ad-riskbox.is-danger{border:1px solid #fecaca;background:#fef2f2;color:#991b1b}
.ad-riskbox.is-caution{border:1px solid #fde68a;background:#fffbeb;color:#92400e}
.ad-riskbox strong{display:block;margin-bottom:.25rem}

/* select2 오버라이드는 select2.min.css 뒤에 로드돼야 이겨서, admin.css 가 아니라
   AdminController::select2Assets() 의 인라인 <style> 로 옮겼다. 여기 두면 로드 순서에 밀린다.
   드롭다운 자체(라이브러리 로드 순서와 무관)만 남긴다. */
.select2-dropdown{border-color:var(--line);border-radius:8px;overflow:hidden}
.select2-search--dropdown .select2-search__field{border-radius:6px;border-color:var(--line)}

/* ── 수집관리 ───────────────────────────────────────── */
.ad-ref-badge{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.78rem;font-weight:600}
.ad-ref-badge.is-zero{background:#f3effd;color:var(--brand)}
.ad-ref-badge.is-some{background:#f3f4f6;color:var(--muted)}

/* ── 자동 글쓰기 실행 상태 ──────────────────────────── */
.ad-run-ok{border-color:#a7f3d0;background:#ecfdf5;color:#047857}
.ad-run-skip{border-color:#e5e7eb;background:#f9fafb;color:#6b7280}
.ad-run-error{border-color:#fecaca;background:#fef2f2;color:#b91c1c;font-weight:600}

/* ── 인스타 카드뉴스 ────────────────────────────────── */
/* 목록: 세트 카드 그리드(커버 썸네일) */
.ad-cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;padding:1.25rem}
.ad-cardset{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:border-color .12s,transform .12s}
.ad-cardset:hover{border-color:var(--brand);transform:translateY(-2px)}
.ad-cardset-thumb{position:relative;aspect-ratio:3/4;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.ad-cardset-thumb img{width:100%;height:100%;object-fit:cover}
.ad-cardset-empty{color:var(--muted);font-size:.85rem}
.ad-cardset-count{position:absolute;right:.4rem;bottom:.4rem;padding:.15rem .5rem;border-radius:999px;
  background:rgba(0,0,0,.6);color:#fff;font-size:.75rem;font-variant-numeric:tabular-nums}
.ad-cardset-title{padding:.6rem .7rem .2rem;font-size:.88rem;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-cardset-meta{padding:0 .7rem .7rem;font-size:.76rem;color:var(--muted)}
/* 세트를 만든 조합(구성·비주얼·어조) 배지. 목록에서 한눈에 비교하려고 둔다. */
.ad-cardset-combo{display:flex;flex-wrap:wrap;gap:.25rem;padding:.15rem .7rem .4rem}
.ad-tag{display:inline-block;padding:.1rem .4rem;border:1px solid var(--line);border-radius:4px;
  font-size:.7rem;line-height:1.5;color:var(--muted);white-space:nowrap}

/* 상세: 6장 가로 스트립 */
.ad-cards-hint{margin:0 0 1rem}
.ad-cards-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem}
@media (max-width:1100px){.ad-cards-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ad-cards-strip{grid-template-columns:repeat(2,1fr)}}
.ad-card-slot{margin:0}
.ad-card-slot-n{font-size:.75rem;color:var(--muted);margin-bottom:.3rem;text-align:center}
.ad-card-slot img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#f3f4f6}
.ad-card-slot-pending{aspect-ratio:3/4;border:1px dashed var(--line);border-radius:8px;display:flex;
  align-items:center;justify-content:center;color:var(--muted);font-size:.82rem;background:#fafafa}
.ad-card-slot-pending.is-bad{border-color:#fecaca;color:#b91c1c;background:#fef2f2}

/* SEO/GEO 발행 안내 */
.ad-seo-hint{border-top:1px dashed var(--line);padding-top:.7rem;margin-top:.2rem}

/* ── 모바일 마무리 ──────────────────────────────────── */
/* 이 블록은 파일 끝에 있어야 한다. 미디어 쿼리는 특정도를 올리지 않으므로
   위쪽에 두면 아래에 있는 같은 특정도의 기본 규칙에 그대로 덮인다. */
@media (max-width:600px){
  .ad-header{padding:0 .75rem}
  .ad-logo{font-size:.95rem}
  .ad-user{gap:.55rem;font-size:.8rem}
  .ad-user > span{display:none}   /* 사용자명은 좁은 폭에서 접는다 */
  .ad-logout{padding:.25rem .55rem}

  .ad-content{padding:1rem .75rem}
  .ad-title{margin-bottom:1rem;font-size:1.2rem}
  .ad-card-head{padding:.8rem 1rem}
  .ad-field{padding:1rem}
  .ad-body{padding:1rem}
  .ad-meta{grid-template-columns:5.5rem 1fr;gap:.5rem .75rem;padding:1rem}

  .ad-stats{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .ad-stat{padding:.85rem .9rem}
  .ad-stat strong{font-size:1.5rem}

  /* 한 칸 최소폭(180~210px)을 그대로 두면 좁은 화면에서 1열이 되어 카드가 거대해진다 */
  .ad-cardgrid,.ad-imggrid,.ad-shots{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:1rem}

  .ad-table th,.ad-table td{padding:.6rem .75rem}
  .ad-filters{gap:.4rem}
  .ad-filters .ad-input{flex:1 1 8rem;min-width:0}
  .ad-filter-q{flex:1 1 100%}
}

/* ── 병원 관리 ──────────────────────────────────────── */
/* 문체 체크박스는 12종이라 그냥 쌓으면 화면 절반을 먹는다 — 칩처럼 흘려 배치한다. */
.ad-tonepick{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.7rem;
  padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;background:#fafafa}
.ad-tonepick .ad-switch{font-size:.85rem;color:var(--ink)}
.ad-assign-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.ad-assign-bar{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.85rem;color:var(--muted)}
.ad-assign-bar .ad-input{width:12rem;padding:.4rem .6rem;font-size:.85rem}