/* ==========================================================================
   admin.css — 운영 콘솔
   ========================================================================== */
*{box-sizing:border-box}
:root{
  --a-bg:#0f1013; --a-panel:#17181d; --a-panel2:#1d1f25; --a-line:#282a32;
  --a-text:#e9e9ee; --a-muted:#8e8f9a; --a-accent:#ff5a1f; --a-accent2:#4b7bff;
  --a-ok:#3ecf8e; --a-warn:#f5b544; --a-danger:#f4685e;
}
html,body{margin:0;padding:0}
body{background:var(--a-bg);color:var(--a-text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Malgun Gothic','맑은 고딕',sans-serif;
  font-size:14px;line-height:1.6;letter-spacing:-.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img,video{max-width:100%;display:block}

.adm{display:grid;grid-template-columns:250px 1fr;min-height:100vh}

/* ---------- 사이드바 ---------- */
.adm-side{background:#0b0c0e;border-right:1px solid var(--a-line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.adm-brand{padding:20px 20px 16px;border-bottom:1px solid var(--a-line);display:flex;align-items:center;gap:10px}
.adm-brand .mark{width:32px;height:32px;border-radius:9px;background:var(--a-accent);display:grid;place-items:center;
  font-weight:900;color:#fff;font-size:14px;flex:none}
.adm-brand b{font-size:15px;letter-spacing:-.03em;display:block;line-height:1.2}
.adm-brand span{font-size:11px;color:var(--a-muted)}
.adm-nav{padding:12px 10px 26px;flex:1}
.adm-nav .grp{font-size:10.5px;font-weight:800;color:#5f6069;letter-spacing:.08em;padding:14px 12px 6px;text-transform:uppercase}
.adm-nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:700;
  color:#b8b9c2;transition:.13s}
.adm-nav a:hover{background:#16171b;color:#fff}
.adm-nav a.on{background:var(--a-accent);color:#fff}
.adm-nav a .ico{width:18px;text-align:center;opacity:.85;font-size:13px;flex:none}
.adm-nav a .badge{margin-left:auto;background:var(--a-danger);color:#fff;font-size:10.5px;font-weight:800;
  border-radius:999px;padding:1px 7px;min-width:19px;text-align:center}
.adm-nav a.on .badge{background:rgba(0,0,0,.35)}
.adm-side-foot{padding:14px 16px;border-top:1px solid var(--a-line);font-size:12px;color:var(--a-muted)}
.adm-side-foot a{display:block;padding:5px 0;color:#b8b9c2}
.adm-side-foot a:hover{color:var(--a-accent)}

/* ---------- 본문 ---------- */
.adm-main{min-width:0;display:flex;flex-direction:column}
.adm-top{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:1px solid var(--a-line);
  background:#101115;position:sticky;top:0;z-index:30;flex-wrap:wrap}
.adm-top h1{margin:0;font-size:19px;letter-spacing:-.035em;font-weight:850}
.adm-top .spacer{flex:1}
.adm-top .who{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--a-muted)}
.adm-top .who b{color:var(--a-text)}
.adm-body{padding:26px 28px 70px;flex:1;min-width:0;max-width:100%;overflow-x:hidden}
.adm-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--a-line);padding-bottom:0}
.adm-tabs a{padding:9px 14px;font-size:13px;font-weight:750;border-radius:8px 8px 0 0;color:var(--a-muted);
  border-bottom:2px solid transparent}
.adm-tabs a:hover{color:#fff}
.adm-tabs a.on{color:var(--a-accent);border-bottom-color:var(--a-accent);background:#16171b}

/* ---------- 카드 · 통계 ---------- */
.card{background:var(--a-panel);border:1px solid var(--a-line);border-radius:14px;padding:20px 22px;margin-bottom:16px;min-width:0}
.card>h2{margin:0 0 14px;font-size:15px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.card>h2 .sub{font-size:12px;color:var(--a-muted);font-weight:600}
.grid{display:grid;gap:16px}
.grid > *{min-width:0}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:13px;margin-bottom:20px}
.kpi{background:var(--a-panel);border:1px solid var(--a-line);border-radius:13px;padding:17px 19px}
.kpi b{display:block;font-size:27px;letter-spacing:-.05em;line-height:1.1;margin-bottom:5px}
.kpi span{font-size:12px;color:var(--a-muted);font-weight:700}
.kpi small{display:block;font-size:11.5px;margin-top:5px;color:var(--a-muted)}
.kpi small.up{color:var(--a-ok)} .kpi small.down{color:var(--a-danger)}

/* ---------- 테이블 ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--a-line);border-radius:13px;background:var(--a-panel)}
table.t{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.t th{text-align:left;font-size:11.5px;font-weight:800;color:var(--a-muted);padding:11px 13px;
  border-bottom:1px solid var(--a-line);white-space:nowrap;background:#131418}
table.t td{padding:11px 13px;border-bottom:1px solid var(--a-line);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:#1a1b20}
table.t .num{text-align:right;font-variant-numeric:tabular-nums}
table.t .nowrap{white-space:nowrap}
table.t a.lnk{color:var(--a-accent2);text-decoration:underline;text-underline-offset:2px}
.empty-row{text-align:center;color:var(--a-muted);padding:40px 20px !important;font-size:13.5px}

/* ---------- 폼 ---------- */
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.f label{font-size:12px;font-weight:800;color:var(--a-muted)}
.f input[type=text],.f input[type=email],.f input[type=number],.f input[type=password],.f input[type=date],
.f input[type=url],.f select,.f textarea{
  background:#101116;border:1px solid var(--a-line);border-radius:10px;padding:10px 12px;font-size:13.5px;outline:none;width:100%}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--a-accent)}
.f textarea{min-height:90px;resize:vertical;line-height:1.6}
.f .hint{font-size:11.5px;color:var(--a-muted);line-height:1.5}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.frow.c3{grid-template-columns:repeat(3,1fr)}
.frow.c4{grid-template-columns:repeat(4,1fr)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:9px;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--a-accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--a-line);
  background:#1e2027;color:var(--a-text);border-radius:10px;padding:10px 16px;font-size:13px;font-weight:800;cursor:pointer;
  white-space:nowrap;transition:.13s}
.btn:hover{border-color:#3a3d47}
.btn.p{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.btn.p:hover{filter:brightness(1.08)}
.btn.d{background:transparent;border-color:#5a2b28;color:var(--a-danger)}
.btn.d:hover{background:rgba(244,104,94,.12)}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.45;pointer-events:none}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.bar .spacer{flex:1}
.bar input[type=text],.bar select{background:#101116;border:1px solid var(--a-line);border-radius:9px;padding:8px 12px;font-size:13px;outline:none}

/* ---------- 배지 ---------- */
.b{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;
  background:#25272e;color:var(--a-muted);white-space:nowrap}
.b.ok{background:rgba(62,207,142,.14);color:var(--a-ok)}
.b.warn{background:rgba(245,181,68,.14);color:var(--a-warn)}
.b.dang{background:rgba(244,104,94,.14);color:var(--a-danger)}
.b.info{background:rgba(75,123,255,.16);color:#8fb0ff}
.b.mock{background:rgba(255,90,31,.15);color:#ff9a5c}
.b.pf-youtube{background:rgba(255,0,51,.16);color:#ff5b78}
.b.pf-instagram{background:rgba(214,41,118,.16);color:#ff7ab0}
.b.pf-tiktok{background:rgba(37,244,238,.13);color:#4ce6e0}
.b.pf-naver{background:rgba(3,199,90,.14);color:#4bd98a}

/* ---------- 진행바 · 차트 ---------- */
.pbar{height:7px;border-radius:999px;background:#24262d;overflow:hidden;min-width:80px}
.pbar i{display:block;height:100%;background:var(--a-accent);border-radius:999px}
.spark{display:flex;align-items:flex-end;gap:2px;height:46px}
.spark i{flex:1;background:var(--a-accent2);border-radius:2px 2px 0 0;min-height:2px;opacity:.75}
.spark i:last-child{background:var(--a-accent);opacity:1}
.hbar{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:12.5px}
.hbar .lb{width:120px;color:var(--a-muted);flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar .tr{flex:1;height:9px;background:#24262d;border-radius:999px;overflow:hidden}
.hbar .tr i{display:block;height:100%;background:linear-gradient(90deg,var(--a-accent2),var(--a-accent));border-radius:999px}
.hbar .vl{width:70px;text-align:right;font-variant-numeric:tabular-nums;flex:none}

/* ---------- 페이지네이션 ---------- */
.pg{display:flex;gap:5px;justify-content:center;margin:22px 0 4px;flex-wrap:wrap}
.pg a,.pg span{min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--a-line);
  border-radius:8px;font-size:12.5px;font-weight:800;padding:0 9px;background:var(--a-panel)}
.pg .on{background:var(--a-accent);border-color:var(--a-accent);color:#fff}

/* ---------- 알림 ---------- */
.msg{border-radius:11px;padding:12px 16px;font-size:13.5px;font-weight:700;margin-bottom:15px;line-height:1.55;
  border:1px solid var(--a-line);background:var(--a-panel)}
.msg.ok{border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.1);color:var(--a-ok)}
.msg.err{border-color:rgba(244,104,94,.35);background:rgba(244,104,94,.1);color:var(--a-danger)}
.msg.info{border-color:rgba(75,123,255,.3);background:rgba(75,123,255,.09);color:#9ab6ff}
.msg.warn{border-color:rgba(245,181,68,.3);background:rgba(245,181,68,.09);color:var(--a-warn)}
.notice-box{border:1px dashed var(--a-line);border-radius:12px;padding:16px 18px;font-size:13px;color:var(--a-muted);
  line-height:1.7;background:#131419}
.notice-box b{color:var(--a-text)}
.notice-box code{background:#1e2027;padding:2px 6px;border-radius:5px;font-size:12px;color:#ffb08a}

/* ---------- pSEO 서브내비 ---------- */
.pseo-nav{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:20px;padding:9px;background:var(--a-panel);
  border:1px solid var(--a-line);border-radius:12px}
.pseo-nav a{display:flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;font-size:12.5px;font-weight:750;
  color:var(--a-muted)}
.pseo-nav a:hover{background:#1e2026;color:#fff}
.pseo-nav a.on{background:var(--a-accent);color:#fff}
.combo-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin:16px 0}
.combo-box div{background:#131419;border:1px solid var(--a-line);border-radius:11px;padding:14px 16px;text-align:center}
.combo-box b{display:block;font-size:22px;letter-spacing:-.04em}
.combo-box span{font-size:11.5px;color:var(--a-muted)}
.preview-list{display:flex;flex-direction:column;gap:9px}
.preview-item{border:1px solid var(--a-line);border-radius:11px;padding:14px 16px;background:#131419}
.preview-item .u{font-size:11.5px;color:var(--a-accent2);font-family:ui-monospace,Menlo,monospace;margin-bottom:6px;word-break:break-all}
.preview-item .t{font-size:14px;font-weight:800;margin-bottom:4px;line-height:1.4}
.preview-item .m{font-size:12.5px;color:var(--a-muted);line-height:1.6}
.region-note{font-size:12.5px;color:var(--a-muted);line-height:1.65;max-width:520px}
.scroll-y{max-height:520px;overflow-y:auto}

/* ---------- 반응형 ---------- */
@media(max-width:1100px){ .grid.c4{grid-template-columns:1fr 1fr} .grid.c3{grid-template-columns:1fr 1fr} }
@media(max-width:900px){
  .adm{grid-template-columns:1fr}
  .adm-side{position:static;height:auto;flex-direction:column}
  .adm-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px;padding:10px}
  .adm-nav .grp{grid-column:1/-1;padding:10px 12px 4px}
  .adm-body{padding:20px 16px 60px}
  .adm-top{padding:14px 16px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .frow,.frow.c3,.frow.c4{grid-template-columns:1fr}
}
:focus-visible{outline:2px solid var(--a-accent);outline-offset:2px;border-radius:4px}

/* ── pSEO 생성 개요 (preflight) ─────────────────────────────────────────── */
.sum-rows{border:1px solid var(--a-line);border-radius:12px;overflow:hidden}
.sr{display:block;padding:13px 16px;border-bottom:1px solid var(--a-line);background:#141519}
.sr:last-child{border-bottom:0}
.sr > i{display:inline-block;min-width:88px;font-style:normal;font-size:12px;font-weight:800;
        color:var(--a-muted);letter-spacing:-.01em;vertical-align:top}
.sr > b{display:inline-block;font-size:14.5px;font-weight:800;letter-spacing:-.02em;
        font-variant-numeric:tabular-nums;max-width:calc(100% - 100px)}
.sr > em{display:block;margin-left:88px;margin-top:4px;font-style:normal;font-size:12px;
         color:var(--a-muted);line-height:1.55}
.warn-box{margin-top:14px;border:1px solid #5a4520;background:rgba(245,181,68,.07);border-radius:12px;padding:14px 16px}
.warn-box .wh{font-size:13px;font-weight:800;color:var(--a-warn);margin-bottom:8px}
.warn-box ul{margin:0;padding-left:18px}
.warn-box li{font-size:12.8px;line-height:1.75;color:#d9d3c4}
.warn-box li b{color:#fff}
.warn-box code{background:#26241c;padding:1px 5px;border-radius:5px;font-size:11.5px}
.confirm-chk{border:1px solid var(--a-line);border-radius:10px;padding:12px 14px;background:#141519}
.confirm-chk span{font-size:13.5px;font-weight:700}
.btn:disabled{opacity:.42;cursor:not-allowed}
@media(max-width:700px){
  .sr > i{display:block;min-width:0;margin-bottom:3px}
  .sr > b{max-width:100%}
  .sr > em{margin-left:0}
}
table.t code{word-break:break-all;white-space:normal;display:inline-block;max-width:100%}
table.t td,table.t th{overflow-wrap:anywhere}

/* ── 플랫폼 공식 로고 마크 (관리자) ────────────────────────────────── */
.pf-ico{display:inline-block;vertical-align:middle;flex:0 0 auto}
.pf-ico + .pf-ico{margin-left:8px}
.pf-ico-mono{color:var(--a-text,#fff)}  /* 관리자 콘솔은 어두운 화면이라 단색 마크는 흰색입니다 */
.pf-cell{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pf-cell b{font-weight:800}