/* Meklio 管理画面 SPA — デザインシステム
   カラー/フォントは /brand/brand.css（ブランドボード準拠）のトークンを参照する。 */
@import url('/brand/brand.css');

:root{
  /* 面 */
  --bg:#f5f6f8; --panel:#fff; --sub-bg:#fafbfc; --sub-bg2:#fbfcfd; --field:#f3f4f7;
  /* サイドバー（ワードマークと同じ濃紺） */
  --nav:var(--mk-navy); --nav-label:rgba(255,255,255,.38); --nav-item:rgba(255,255,255,.72);
  /* ブランド（Meklio ブルー）。旧ティールから差し替え。 */
  --accent:var(--mk-main); --accent-hover:var(--mk-main-hover); --link:var(--mk-main-ink);
  --accent-br:var(--mk-sub);
  --accent-bd:var(--mk-border); --accent-tint:var(--mk-tint);
  /* 文字 */
  --ink:#1a2230; --sub:#6b7587; --muted:#9aa3b3; --faint:#aeb5c1; --faint2:#b3b8c2;
  /* 罫線 */
  --line:#e7e9ee; --line2:#eceef2; --line3:#f0f1f4; --line4:#f2f3f6;
  /* セマンティック */
  --danger:#e5484d; --danger-ink:#b3261e; --ok:#2f7d4f; --ok-bg:#e6f4ec;
  --warn:#9a6a12; --warn-bg:#fbf2dd; --warn-bd:#f0dfb0;
  --shadow:0 24px 56px -18px rgba(15,23,33,.4);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--mk-font);color:var(--ink);background:var(--bg);
  font-size:13.5px;line-height:1.55;letter-spacing:.01em;}
a{color:var(--link);text-decoration:none;}
button{font:inherit;cursor:pointer;}
.mono{font-family:var(--mk-font-mono);}
.hidden{display:none !important;}
.scr::-webkit-scrollbar{width:9px;height:9px;}
.scr::-webkit-scrollbar-thumb{background:rgba(120,130,150,.28);border-radius:6px;}
.sp{flex:1;}
.row{display:flex;gap:10px;align-items:center;}

/* ============ シェル ============ */
#app{height:100vh;display:grid;grid-template-columns:250px 1fr;grid-template-rows:64px 1fr;
  background:var(--bg);min-width:1280px;}

/* サイドバー */
.side{grid-row:1 / 3;background:var(--nav);color:#fff;display:flex;flex-direction:column;overflow:hidden;}
.side .brand{display:flex;align-items:center;gap:11px;padding:0 18px;height:64px;
  border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;}
/* ブランドマーク（SVG画像）。背景色はロゴ側のグラデーションを使うため付けない。 */
.side .brand .logo{width:30px;height:30px;border-radius:8px;flex-shrink:0;object-fit:contain;display:block;}
.side .brand .nm{font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.15;}
.side .brand .tag{font-size:8.5px;color:rgba(255,255,255,.42);letter-spacing:.14em;line-height:1.15;}
.side nav{flex:1;overflow:auto;padding:8px 12px 4px;}
.side .sec{font-size:9.5px;letter-spacing:.16em;color:var(--nav-label);padding:13px 10px 6px;text-transform:uppercase;}
.side a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;
  cursor:pointer;margin-bottom:2px;color:var(--nav-item);font-size:13.5px;}
.side a:hover{background:rgba(255,255,255,.07);color:#fff;}
.side a.on{background:rgba(255,255,255,.10);color:#fff;font-weight:700;}
.side a.on::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-br);}
.side a svg{flex-shrink:0;width:18px;height:18px;}
.side a .badge{margin-left:auto;font-size:9.5px;font-weight:700;border-radius:6px;padding:1px 6px;background:var(--accent);color:#fff;}
.side .usage{margin:8px 12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:14px;}
.side .usage .h{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.side .usage .h b{font-size:12px;font-weight:700;}
.side .usage .h .chip{font-size:8.5px;color:var(--accent-br);border:1px solid rgba(41,182,246,.5);border-radius:5px;padding:1px 6px;}
.side .usage .u{margin-bottom:9px;}
.side .usage .u .l{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.72);margin-bottom:4px;}
.side .usage .u .bar{height:5px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden;}
.side .usage .u .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-br));}

/* トップバー */
.top{grid-column:2;display:flex;align-items:center;gap:14px;padding:0 24px;background:#fff;
  border-bottom:1px solid #e9ebf0;z-index:2;position:relative;}
.top .crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;}
.top .crumbs .c{color:var(--muted);} .top .crumbs .c.on{color:var(--ink);font-weight:700;}
.top .crumbs .sep{color:#c5cad3;}
.top .search{display:flex;align-items:center;gap:9px;width:280px;background:var(--field);
  border:1px solid #e7e9ee;border-radius:9px;padding:8px 12px;font-size:13px;color:var(--muted);}
.top .newbook{display:flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border-radius:9px;
  padding:9px 16px;font-size:13px;font-weight:700;border:0;}
.top .newbook:hover{background:var(--accent-hover);}
.top .icobtn{width:38px;height:38px;border-radius:9px;border:1px solid #e7e9ee;background:#fff;
  display:grid;place-items:center;position:relative;}
.top .icobtn:hover{background:#f6f7f9;}
.top .icobtn .dot{position:absolute;top:4px;right:5px;min-width:15px;height:15px;border-radius:8px;
  background:var(--danger);border:1.5px solid #fff;color:#fff;font-size:9px;font-weight:700;
  display:grid;place-items:center;padding:0 3px;}
.top .acct{display:flex;align-items:center;gap:9px;padding-left:4px;cursor:pointer;}
.top .acct .av{width:34px;height:34px;border-radius:9px;background:var(--nav);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:13px;}
.top .acct .nm{font-size:12.5px;font-weight:700;line-height:1.2;}
.top .acct .rl{font-size:10.5px;color:var(--muted);line-height:1.2;}

/* ドロップダウン（通知/アカウント） */
.pop{position:absolute;background:#fff;border:1px solid #e7e9ee;border-radius:14px;box-shadow:var(--shadow);
  z-index:50;overflow:hidden;}
.pop .item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;
  font-size:13px;color:var(--ink);}
.pop .item:hover{background:#f4f6f8;}
.pop .item.danger{color:var(--danger-ink);} .pop .item.danger:hover{background:#fcf0ef;}

/* コンテンツ（全画面に既定の余白。新旧どちらのビューも #view 直下に描画される） */
.content{grid-column:2;overflow:auto;background:var(--bg);min-width:0;}
#view{padding:24px 28px;}
.pad{}  /* 新ビューのラッパ。余白は #view が付与するため追加しない */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;}
h2.page{font-size:21px;font-weight:700;margin:0 0 3px;}
.lead{font-size:12.5px;color:var(--muted);margin:0;}
.crumb{font-size:13px;color:var(--link);cursor:pointer;font-weight:600;margin-bottom:14px;display:inline-block;}

/* ============ 共通コンポーネント ============ */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;color:var(--ink);}
.btn:hover{background:#f6f7f9;}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.pri:hover{background:var(--accent-hover);}
.btn.sec{background:#fff;color:var(--mk-main-ink);border-color:var(--accent-bd);}
.btn.sec:hover{background:var(--mk-tint);}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff;}
.btn.danger{background:#fff;border-color:var(--danger);color:var(--danger);}
.btn.sm{padding:5px 11px;font-size:12px;border-radius:8px;}
.btn:disabled{opacity:.5;cursor:default;}
.inp{border:1px solid #d8dce3;border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink);
  background:#fff;width:100%;outline:none;font-family:inherit;}
.inp:focus{border-color:var(--accent);}
select.inp{cursor:pointer;}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;border-radius:7px;
  padding:4px 9px;background:#eef0f3;color:var(--sub);width:fit-content;}
.tag .d{width:6px;height:6px;border-radius:50%;background:currentColor;}
.tag.ok{background:var(--ok-bg);color:var(--ok);}
.tag.warn{background:var(--warn-bg);color:var(--warn);}
.tag.muted{background:#eef0f3;color:var(--muted);}
.tag.lock{background:#fcecec;color:var(--danger);}
.tag.info{background:var(--accent-tint);color:var(--link);}

/* パネル/カード */
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:16px;}
.panel h3{font-size:15px;font-weight:700;margin:0 0 14px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:13px;}
.kpi.click{cursor:pointer;} .kpi.click:hover{border-color:var(--accent);}
.kpi .top{display:flex;align-items:center;justify-content:space-between;}
.kpi .k{font-size:13px;color:var(--sub);}
.kpi .ico{width:34px;height:34px;border-radius:9px;background:var(--accent-tint);color:var(--link);display:grid;place-items:center;}
.kpi .v{font-size:29px;font-weight:700;line-height:1;}
.kpi .delta{font-size:11.5px;font-weight:700;border-radius:6px;padding:2px 7px;}
.kpi .delta.up{background:var(--ok-bg);color:var(--ok);} .kpi .delta.dn{background:#fcecec;color:var(--danger);}
.kpi .delta.flat{background:#eef0f3;color:var(--muted);}
.kpi .sub{font-size:11.5px;color:var(--muted);}
.meter{height:7px;background:#eef1f4;border-radius:4px;overflow:hidden;}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-br));}

/* テーブル（grid 版・デザイン準拠） */
.tbl{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.tbl .th,.tbl .tr{display:grid;gap:14px;align-items:center;padding:12px 20px;}
.tbl .th{background:var(--sub-bg);border-bottom:1px solid var(--line2);font-size:11.5px;color:var(--muted);font-weight:700;}
.tbl .tr{border-bottom:1px solid var(--line4);cursor:pointer;}
.tbl .tr:hover{background:var(--sub-bg);}
.tbl .tr:last-child{border-bottom:0;}
.chip{font-size:12.5px;border-radius:8px;padding:7px 14px;cursor:pointer;background:#fff;color:var(--sub);border:1px solid var(--line);}
.chip.on{background:var(--accent-tint);color:var(--link);border-color:var(--accent-bd);font-weight:700;}
.rowmenu{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);}
.rowmenu:hover{background:#eef0f3;color:var(--sub);}
.covph{width:38px;height:50px;border-radius:5px;border:1px solid #e3e6ec;
  background:repeating-linear-gradient(45deg,#fbfcfd,#fbfcfd 5px,#eef1f4 5px,#eef1f4 10px);}

/* 旧 table.t（レガシー画面互換・再スキン） */
table.t{width:100%;border-collapse:collapse;font-size:12.5px;}
table.t th{text-align:left;color:var(--muted);font-weight:700;font-size:11.5px;border-bottom:1px solid var(--line);padding:9px 10px;}
table.t td{border-bottom:1px solid var(--line4);padding:10px;vertical-align:middle;}
table.t tr.click{cursor:pointer;} table.t tr.click:hover{background:var(--sub-bg);}
table.t tr.on{background:var(--accent-tint);}
.thumb{width:30px;height:40px;object-fit:cover;border:1px solid var(--line);border-radius:4px;background:#fff;}

/* タブ */
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:16px;gap:2px;}
.tabs button{border:0;background:transparent;padding:10px 16px;font-size:13px;color:var(--muted);}
.tabs button.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);font-weight:700;}

/* ダッシュボード固有 */
.trend{display:flex;align-items:flex-end;gap:10px;height:200px;padding-top:10px;}
.trend .b{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
.trend .b i{width:100%;background:#dbe7ea;border-radius:5px 5px 0 0;display:block;}
.trend .b.hot i{background:linear-gradient(180deg,var(--accent-br),var(--accent));}
.rankbar{flex:1;height:7px;background:#eef1f4;border-radius:4px;overflow:hidden;}
.rankbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-br));}

/* 空表示 / トースト / ローディング */
.empty{color:var(--muted);font-size:13px;padding:40px;text-align:center;}
.loading{color:var(--muted);font-size:13px;padding:40px;text-align:center;}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--nav);color:#fff;
  padding:10px 20px;border-radius:10px;font-size:13px;opacity:0;transition:opacity .25s;z-index:60;box-shadow:var(--shadow);}
.toast.show{opacity:1;}

/* ログイン */
.login{position:fixed;inset:0;background:#eef1f5;display:flex;align-items:center;justify-content:center;z-index:50;}
.login .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px 36px;width:384px;
  box-shadow:0 20px 60px -20px rgba(15,23,33,.25);}
.login .lg{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.login .lg .logo{width:38px;height:38px;border-radius:10px;background:var(--accent);display:grid;place-items:center;
  font-weight:900;font-size:19px;color:#fff;}
/* ブランドロゴ（メイン・ワードマーク＋タグライン入り） */
.login .lgfull{display:block;width:100%;height:auto;border-radius:12px;margin-bottom:10px;}
.login h2{margin:0;font-size:19px;font-weight:700;}
.login .subttl{color:var(--muted);font-size:11px;letter-spacing:.14em;}
.login p{color:var(--sub);font-size:12px;margin:0 0 16px;line-height:1.6;}
.login .inp{margin:8px 0;}
.login .err{color:var(--danger);font-size:12.5px;margin-top:10px;}

/* ============ レガシー画面用の追加（エディタ等・再スキン） ============ */
.review{display:grid;grid-template-columns:300px 1fr;gap:16px;}
.revlist{max-height:520px;overflow:auto;}
.revitem{border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin-bottom:7px;cursor:pointer;background:#fff;}
.revitem:hover{background:var(--sub-bg);} .revitem.on{border-color:var(--accent);background:var(--accent-tint);}
.revitem .m{font-weight:700;font-size:13px;} .revitem .meta{font-size:11px;color:var(--muted);}
.revpane{display:grid;grid-template-columns:230px 1fr;gap:16px;}
.revimg{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--bg);}
.conf{font-size:11px;} .conf.ok{color:var(--ok);} .conf.warn{color:var(--warn);}
.specrow td{padding:6px;border-bottom:1px solid var(--line4);} .specrow td.k{width:36%;color:var(--sub);}
.heat{display:flex;flex-wrap:wrap;gap:5px;}
.hp{width:42px;height:54px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  font-size:9px;padding-bottom:2px;border:1px solid var(--line4);position:relative;}
.hp .pn{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:8px;}
/* ページサムネ重畳ヒートマップ（F-503） */
.ht{position:relative;width:56px;height:72px;border-radius:5px;overflow:hidden;border:1px solid var(--line4);background:#eef0f3;flex-shrink:0;}
.ht img{width:100%;height:100%;object-fit:cover;display:block;}
.ht-ov{position:absolute;inset:0;mix-blend-mode:multiply;}
.ht-pn{position:absolute;top:2px;left:0;right:0;text-align:center;font-size:8px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);}
.ht-v{position:absolute;bottom:2px;right:3px;font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);}
.ed-wrap{display:grid;grid-template-columns:96px 1fr 268px;gap:12px;align-items:start;}
.ed-thumbs{max-height:600px;overflow-y:auto;padding-right:2px;}
.ed-thumb{position:relative;margin-bottom:6px;cursor:pointer;border:2px solid transparent;border-radius:5px;padding:2px;text-align:center;}
.ed-thumb.on{border-color:var(--accent);background:var(--accent-tint);}
.ed-thumb img{width:80px;border:1px solid var(--line);border-radius:2px;display:block;margin:0 auto;}
.ed-thumb .n{font-size:10px;color:var(--sub);}
.ed-thumb .c{position:absolute;top:3px;right:3px;background:var(--accent);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;line-height:15px;border-radius:8px;}
.ed-stage{background:#dfe3ec;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;max-height:640px;}
.ed-canvas{position:relative;display:inline-block;box-shadow:0 2px 16px rgba(20,30,60,.18);}
.ed-canvas img{display:block;user-select:none;-webkit-user-drag:none;}
.ed-canvas.drawing{cursor:crosshair;}
.edhs{position:absolute;border:2px solid var(--accent);background:rgba(30,94,255,.12);border-radius:3px;cursor:move;}
.edhs:hover{background:rgba(30,94,255,.2);}
.edhs.sel{border-color:#f0a020;background:rgba(240,160,32,.16);box-shadow:0 0 0 1px #fff,0 0 0 3px rgba(240,160,32,.4);z-index:4;}
.edhs .badge{position:absolute;top:-9px;left:-2px;background:var(--accent);color:#fff;font-size:10px;line-height:16px;
  height:16px;padding:0 6px;border-radius:8px;white-space:nowrap;pointer-events:none;}
.edhs.sel .badge{background:#f0a020;}
.edhs .hnd{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #f0a020;border-radius:2px;}
.edhs .hnd.nw{left:-6px;top:-6px;cursor:nwse-resize;} .edhs .hnd.ne{right:-6px;top:-6px;cursor:nesw-resize;}
.edhs .hnd.sw{left:-6px;bottom:-6px;cursor:nesw-resize;} .edhs .hnd.se{right:-6px;bottom:-6px;cursor:nwse-resize;}
.ed-ghost{position:absolute;border:2px dashed var(--accent);background:rgba(30,94,255,.1);z-index:6;pointer-events:none;}
.ed-tool{display:flex;flex-direction:column;gap:3px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;
  background:#fff;min-width:62px;align-items:center;font-size:11px;color:var(--sub);}
.ed-tool.on{border-color:var(--accent);background:var(--accent-tint);color:var(--accent);font-weight:700;}
.ed-tool b{font-size:16px;font-weight:400;}
.ed-zoom{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:2px 4px;}
.ed-zoom button{border:0;background:transparent;padding:2px 7px;font-size:14px;color:var(--sub);border-radius:4px;}
.ed-zoom button:hover{background:var(--bg);}
.ed-prop label{display:block;font-size:11px;color:var(--muted);margin:8px 0 2px;}
.ed-prop input,.ed-prop select{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;}
.ed-prop .seg{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;}
.ed-prop .seg button{flex:1;border:0;background:#fff;padding:5px;font-size:11px;color:var(--sub);}
.ed-prop .seg button.on{background:var(--accent);color:#fff;}
.ed-hslist{margin-top:6px;max-height:150px;overflow:auto;}
.ed-hsitem{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:5px;font-size:12px;cursor:pointer;}
.ed-hsitem:hover{background:var(--bg);} .ed-hsitem.on{background:var(--accent-tint);}