/* LangMap SNS 投稿管理ツール — ローカル専用 / 外部CDN不使用 */
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#1f2330; --sub:#6b7280; --line:#e4e7ec;
  --accent:#2f6df6; --accent2:#1f2330; --ok:#137a4b; --warn:#b45309; --bad:#b42318;
  --chip:#eef2ff; --shadow:0 1px 3px rgba(16,24,40,.08);
  --pill-un:#eef1f5; --pill-done:#dff3e6; --done-ink:#137a4b; --warn-ink:#b45309;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1220;--card:#171a2b;--ink:#e8eaf2;--sub:#9aa2b4;--line:#28304a;
    --chip:#22284a;--pill-un:#232842;--pill-done:#183a2a;--shadow:0 1px 3px rgba(0,0,0,.4);
    --done-ink:#4ade80;--warn-ink:#fbbf24;}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;font-size:15px;-webkit-text-size-adjust:100%;
  /* 横スクロールを出さない。clip はスクロールコンテナを作らないので sticky ヘッダーが生きる */
  overflow-x:clip}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}

/* ---- lock screen ---- */
#lock{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:50}
.lock-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:28px 26px;width:min(360px,92vw);text-align:center}
.lock-card h1{font-size:18px;margin:0 0 4px}
.lock-card p{color:var(--sub);font-size:12.5px;margin:0 0 18px}
#pw{width:150px;text-align:center;font-size:28px;letter-spacing:14px;padding:10px 6px 10px 20px;
  border:2px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);outline:none}
#pw:focus{border-color:var(--accent)}
.lock-err{color:var(--bad);font-size:12.5px;min-height:1.2em;margin-top:10px}
.lock-hint{color:var(--sub);font-size:11px;margin-top:14px}

/* ---- header ---- */
header{position:sticky;top:0;z-index:20;background:var(--card);border-bottom:1px solid var(--line);
  padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
header h1{font-size:16px;margin:0;white-space:nowrap}
header .grow{flex:1}
.hbtn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:9px;padding:7px 11px;font-size:13px}
.hbtn:hover{background:var(--chip)}
.hbtn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.counts{font-size:12px;color:var(--sub)}

main{max-width:1180px;margin:0 auto;padding:14px 16px 80px;min-width:0}

/* ---- toolbar ---- */
.toolbar{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px;box-shadow:var(--shadow)}
.toolbar input[type=search],.toolbar select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  background:transparent;color:var(--ink);font-size:13px;max-width:100%;min-width:0}
.toolbar input[type=search]{width:100%}
/* 絞り込みは項目名を常に見せる。選択後も何の項目か分かるようにするため、
   値をプレースホルダ代わりに使わない（「すべて」だけを並べる）。 */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;margin-top:12px}
/* 行内は詰め、グループ間は空ける。この差でひとまとまりに見せる */
.fields + .fields{margin-top:14px}
/* 広い画面では2行の列位置を揃え、絞り込み全体をひとつの表として読ませる
   （1行目が5項目なので5列に固定。2行目の4項目はその左4列に収まる） */
@media (min-width:820px){ .fields{grid-template-columns:repeat(5,minmax(0,1fr))} }
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field>span{font-size:11px;color:var(--sub);letter-spacing:.01em}
.field select{width:100%}
/* 並び替えは絞り込みとは別の操作なので、罫線で分ける */
.toolbar-foot{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.toolbar-foot .grow{flex:1}
.field.inline{flex:0 0 auto;width:132px}

/* ---- recommended / today ---- */
.reco{background:linear-gradient(180deg,var(--chip),transparent);border:1px solid var(--line);border-radius:12px;
  padding:12px;margin-bottom:14px}
.reco h2{font-size:13px;margin:0 0 8px;color:var(--sub);font-weight:700}
.reco-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:8px}
.reco-item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12.5px;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.reco-item:hover{border-color:var(--accent)}
.reco-item .t{font-weight:600;display:block;margin-bottom:3px}
.reco-item .m{color:var(--sub);font-size:11px}

/* ---- list ---- */
.count-line{font-size:12.5px;color:var(--sub);margin:2px 2px 10px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:13px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
/* ゴミ箱の中身は破線で示す。薄くするのは現役のネタと混在する「すべて」表示のときだけ
   （ゴミ箱のみの表示で全部を薄くしても読みにくいだけで、区別の役に立たない） */
.card.trashed{border-style:dashed}
.cards.mixed .card.trashed{opacity:.6}
.cards.mixed .card.trashed:hover,.cards.mixed .card.trashed:focus-within{opacity:1}
.card>*{min-width:0;max-width:100%}
.card .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--ink);white-space:nowrap}
.badge.cat-豆知識{background:#fff3d6;color:#8a5a00}
.badge.cat-言語{background:#e3f0ff;color:#124a99}
.badge.cat-言語比較{background:#e7f7ec;color:#137a4b}
.badge.cat-名前{background:#f3e8ff;color:#6b21a8}
.badge.cat-ツール{background:#d7f5f0;color:#0f766e}
.badge.trash{background:var(--pill-un);color:var(--sub)}
/* 実績のある切り口。おすすめの優先対象なので、他のバッジより一段強く出す */
.badge.angle{background:var(--accent);color:#fff;font-weight:600}
/* ゴミ箱の出し入れは投稿操作とは別の性質なので、見出し行の端に控えめに置く */
.trashbtn{margin-left:auto;border:1px solid transparent;background:transparent;color:var(--sub);
  border-radius:8px;padding:3px 8px;font-size:11px;white-space:nowrap}
.trashbtn:hover{background:var(--chip);border-color:var(--line);color:var(--ink)}
.trashbtn.back{color:var(--accent);border-color:var(--line)}
.acts-trash{display:flex;justify-content:flex-end;margin-top:10px}
.card .id{font-size:11px;color:var(--sub)}
.card .title{font-weight:700;font-size:14.5px;margin:0;overflow-wrap:anywhere}
.card .hook{color:var(--ink);font-size:13px;overflow-wrap:anywhere}
.card .post{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:8px;
  padding:8px 9px;font-size:12.5px;max-height:150px;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere}
.card .url{font-size:11.5px;color:var(--accent);word-break:break-all}
.scores{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.sc{font-size:10.5px;color:var(--sub);display:inline-flex;flex-direction:column;align-items:center;min-width:30px}
.sc b{font-size:13px;color:var(--ink)}
.sc.total b{color:var(--accent)}
.bar{height:4px;border-radius:2px;background:var(--line);width:100%;margin-top:2px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent)}
.pills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.pill{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--pill-un);color:var(--sub);border:1px solid var(--line)}
.pill.fc-確認済み{background:#e7f7ec;color:var(--ok)}
.pill.fc-要確認{background:#fff3d6;color:var(--warn)}
.pill.fc-採用不可{background:#ffe4e2;color:var(--bad)}
/* 操作は2段構成。上段＝プラットフォームに依らない共通の操作、
   下段＝X / Threads / Instagram の3行×3列。同じ操作が必ず同じ列に来る。 */
.acts{display:flex;flex-direction:column;gap:8px}
.acts-common{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px}
.pf{display:grid;grid-template-columns:minmax(0,66px) 1fr 1fr minmax(0,72px);gap:6px;align-items:center;
  padding-top:8px;border-top:1px solid var(--line)}
.pf-name{font-size:11.5px;color:var(--sub);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abtn{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:6px 6px;font-size:12px;
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abtn:hover{background:var(--chip)}
.pf .abtn{font-size:11.5px;width:100%}
.abtn.warnlen{border-color:var(--warn-ink);color:var(--warn-ink)}
/* 投稿済みトグル。色は「緑＝投稿済み」の1系統だけに絞る */
.tbtn{border:1px solid var(--line);background:transparent;color:var(--sub);border-radius:8px;padding:6px 4px;
  font-size:11.5px;width:100%;min-width:0;white-space:nowrap}
.tbtn:hover{background:var(--chip)}
.tbtn.done{background:var(--pill-done);border-color:var(--done-ink);color:var(--done-ink);font-weight:700}
.modal-acts{margin-top:14px}
.modal-acts .pf{grid-template-columns:minmax(0,88px) 1fr 1fr minmax(0,116px)}
.modal-acts .pf .abtn,.modal-acts .tbtn,.modal-acts .pf-name{font-size:12px}
textarea.memo{width:100%;max-width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:12px;
  background:transparent;color:var(--ink);resize:vertical;min-height:34px}

/* ---- detail modal ---- */
#overlay{position:fixed;inset:0;background:rgba(10,12,20,.5);display:none;align-items:center;justify-content:center;z-index:40;padding:16px}
#overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--line);border-radius:14px;max-width:640px;width:100%;
  max-height:88vh;overflow-y:auto;overflow-x:hidden;padding:18px 20px}
.modal h2{margin:0 0 4px;font-size:17px}
.modal .close{float:right;border:0;background:transparent;font-size:20px;color:var(--sub);line-height:1}
.modal .block{margin:12px 0}
.modal .lbl{font-size:11px;color:var(--sub);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.modal .post{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px;overflow-wrap:anywhere}
.modal .len{font-size:11px;color:var(--sub);margin-top:3px}

/* ---- toast ---- */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;max-width:calc(100vw - 32px);
  background:var(--accent2);color:#fff;padding:9px 16px;border-radius:999px;font-size:13px;z-index:60;
  transition:.2s;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  header h1{font-size:14px} .cards{grid-template-columns:1fr}
  #pw{letter-spacing:10px;padding-left:14px;width:130px}
  header{padding:8px 10px;gap:8px}
  main{padding:12px 10px 80px}
  header h1{white-space:normal}
  .toolbar select{flex:1 1 auto}
  .modal{padding:16px 14px}
  #overlay{padding:10px}
}
@media (max-width:380px){
  .hbtn{padding:6px 8px;font-size:12px}
  .abtn{padding:5px 5px;font-size:11.5px}
  .pf{grid-template-columns:minmax(0,56px) 1fr 1fr minmax(0,64px);gap:5px}
  .pf .abtn,.tbtn,.pf-name{font-size:11px}
}