/* イーロジス CMS プロトタイプ — サイト本体のブランドカラーに合わせている */
:root {
  --green: #4fb233;
  --green-d: #3f9027;
  --green-l: #eaf6e2;
  --ink: #1c1f1a;
  --muted: #6b7280;
  --placeholder: #8b9199;   /* 入力欄の見本テキスト。白背景で3.2:1（既定の4.6:1より薄く、読める範囲） */
  --line: #e3e6e1;
  --bg: #f7f8f6;
  --white: #fff;
  --danger: #c0392b;
  --radius: 8px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  /* Windows では Yu Gothic が当たる。標準の太さだと細くて読みにくいので
     500（Yu Gothic Medium）を指定する。字形は変わらないので違和感が出ない */
  font-weight: 500;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
}
a { color: var(--green-d); }

/* ===== 全体レイアウト（上部バー ＋ 左メニュー ＋ 右本体） ===== */
:root { --topbar-h: 52px; --sidebar-w: 220px; }

/* 上部の細いバー */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; background: var(--white); border-bottom: 1px solid var(--line);
}
.topbar .brand-area { display: flex; align-items: center; gap: 12px; }
.topbar .brand { font-size: 15px; font-weight: 700; letter-spacing: .02em; }

/* メニューの開閉ボタン */
.nav-toggle {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--white); cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.nav-toggle:hover { border-color: #c8cdc4; background: #f4f6f2; }
.nav-toggle span { display: block; width: 15px; height: 1.5px; background: #5b635c; border-radius: 1px; }
.topbar .brand em { font-style: normal; color: var(--green); }
.topbar .account { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.topbar .account .who::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 6px; vertical-align: 1px;
}
.link-btn {
  border: 1px solid var(--line); background: var(--white); border-radius: 6px;
  padding: 5px 12px; font-size: 12px; font-family: inherit; color: var(--muted); cursor: pointer;
}
.link-btn:hover { color: var(--ink); border-color: #c8cdc4; }

/* 左右2カラム */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: var(--sidebar-w); flex: none; align-self: stretch;
  background: var(--white); border-right: 1px solid var(--line);
  padding: 22px 12px; position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
}
.nav-label {
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .08em; padding: 0 12px; margin: 0 0 8px;
}
.nav-group + .nav-group { margin-top: 26px; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: var(--ink); text-decoration: none; margin-bottom: 2px;
}
a.nav-item:hover { background: #f1f3ef; }
.nav-item.is-active { background: var(--green-l); color: var(--green-d); font-weight: 700; }
.nav-item.is-disabled { color: #b3b8b1; cursor: default; }
.nav-item em { font-style: normal; font-size: 10px; color: #b3b8b1; font-weight: 400; }

/* 右側の本体 */
.main { flex: 1; min-width: 0; padding: 30px 28px 72px; }
.main-inner { max-width: none; }
.main-inner.form { max-width: none; }

/* 左メニューを畳んだ状態 */
.nav-closed .sidebar { display: none; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: static; border-right: none;
    border-bottom: 1px solid var(--line); padding: 12px;
    display: flex; gap: 6px; overflow-x: auto;
  }
  .nav-label { display: none; }
  .nav-group { display: flex; gap: 6px; }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-item { white-space: nowrap; margin-bottom: 0; }
  .main { padding: 22px 18px 56px; }
}

/* 見出し行 */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.page-head h2 { font-size: 22px; margin: 0; }
.count { color: var(--muted); font-size: 13px; margin-left: 10px; font-weight: 400; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--white); color: var(--ink); font-size: 14px; font-weight: 700;
  cursor: pointer; text-decoration: none; line-height: 1.4; font-family: inherit;
}
.btn:hover { border-color: #c8cdc4; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); border-color: var(--green-d); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--ink); background: #eceee9; }
.btn-danger { color: var(--danger); border-color: #f0d5d1; }
.btn-danger:hover { background: #fdf3f2; border-color: var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* テーブル */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { background: #fafbf9; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fbfcfa; }
/* タイトルは編集画面へのリンク。黒いままだとリンクだと気づけないので、
   下線を常時出して「押せる」ことを示す */
td.title a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
td.title a:hover { color: var(--green-d); text-decoration: underline; }
td.actions { text-align: right; white-space: nowrap; }
.date { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* バッジ */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge-published { background: var(--green-l); color: var(--green-d); }
.badge-draft { background: #eceef0; color: #6b7280; }
.badge-cat { background: #f2f4f0; color: #55605b; font-weight: 400; }

/* フォーム */
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field .hint { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 8px; }
input[type=text], input[type=date], input[type=time], input[type=month], input[type=password], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; font-family: inherit; background: var(--white); color: var(--ink);
}
input:focus, select:focus, .editor:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.row.row-3 { grid-template-columns: 1.2fr .8fr 1.4fr; }

/* エディタ */
.toolbar { display: flex; gap: 4px; padding: 7px; background: #fafbf9; border: 1px solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; }
.toolbar button {
  border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 5px 11px;
  font-size: 13px; cursor: pointer; color: #4b5563; font-family: inherit;
}
.toolbar button:hover { background: #eceee9; color: var(--ink); }
.toolbar .sep { width: 1px; background: var(--line); margin: 4px 4px; }
.toolbar select#closer-select {
  height: 30px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--muted); font-size: 12px; padding: 0 8px;
  max-width: 180px;
}
.toolbar select#closer-select:hover { color: var(--ink); border-color: var(--muted); }

.editor {
  min-height: 320px; padding: 16px; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  background: var(--white); font-size: 15px; overflow-y: auto;
}
.editor:empty::before { content: attr(data-placeholder); color: var(--placeholder); }
.editor h3 { font-size: 18px; margin: 1.2em 0 .5em; }
.editor ul, .editor ol { padding-left: 1.5em; }
.editor a { color: var(--green-d); }

/* 通知 */
.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 20px; font-size: 14px; }
.alert-error { background: #fdf3f2; border: 1px solid #f0d5d1; color: var(--danger); }
.alert-error ul { margin: 6px 0 0; padding-left: 18px; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: var(--radius);
  font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; z-index: 100;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ログイン */
.login-wrap { max-width: 380px; margin: 12vh auto; padding: 0 24px; }
.login-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 36px 32px; }
.login-card h1 { font-size: 20px; margin: 0 0 4px; }
.login-card h1 span { color: var(--green); }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 8px; }

.empty { padding: 56px 20px; text-align: center; color: var(--muted); font-size: 14px; }
/* 保存ボタンは画面下に貼り付ける。
   本文が長くなるほど下へ逃げてしまい、「どこで保存するのか分からない」状態になるため */
.footer-actions {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  position: sticky; bottom: 0; z-index: 5;
  margin: 28px -28px -28px; padding: 14px 28px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.footer-actions .right { display: flex; gap: 10px; }
@media (max-width: 640px) {
  .footer-actions { margin: 20px -16px -16px; padding: 12px 16px; flex-wrap: wrap; }
  .footer-actions .right { flex: 1; justify-content: flex-end; }
}

.editor img { max-width: 100%; height: auto; border-radius: 4px; margin: 10px 0; display: block; }

/* 一覧：タイトル下に出力先ファイル名を薄く添える */
.url-hint { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
td.actions .btn { padding: 6px 10px; font-size: 13px; }
td.actions .btn + .btn { margin-left: 2px; }

/* 一覧：記事ページを開くアイコン */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius);
  color: var(--muted); vertical-align: middle;
}
.icon-btn svg { width: 19px; height: 19px; fill: currentColor; }
.icon-btn:hover { color: var(--green-d); background: var(--green-l); }

/* 一覧：公開状態のドロップダウン（バッジの見た目を保ったまま選べるようにする） */
.status-select {
  -webkit-appearance: none; appearance: none;
  border: 1px solid transparent; border-radius: 999px;
  padding: 4px 25px 4px 12px; font-size: 12px; font-weight: 700;
  font-family: inherit; line-height: 18px; cursor: pointer;
  background-repeat: no-repeat; background-position: right 9px center; background-size: 9px;
  transition: border-color .15s ease, filter .15s ease;
  min-width: 96px; /* 「公開中」が切れないように */
  text-overflow: ellipsis;
}
.status-select:hover { border-color: currentColor; filter: brightness(.97); }
.status-select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.status-select:disabled { opacity: .5; cursor: wait; }
.status-select.is-published {
  background-color: var(--green-l); color: var(--green-d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%233f9027' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.status-select.is-draft {
  background-color: #eceef0; color: #6b7280;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.status-select.is-category {
  min-width: 142px; /* 「プレスリリース」が切れないように */
  background-color: #f2f4f0; color: #55605b; font-weight: 400;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%2355605b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.status-select option { background: #fff; color: var(--ink); font-weight: 400; }

/* ===== タグ選択（ブログ） ===== */
.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-size: 13px; cursor: pointer; user-select: none;
}
.tag-check:hover { border-color: #c8cdc4; }
.tag-check input { accent-color: var(--green); margin: 0; }
.tag-check:has(input:checked) { background: var(--green-l); border-color: var(--green); color: var(--green-d); font-weight: 700; }

/* ===== サムネイル設定 ===== */
.thumb-picker { display: flex; align-items: center; gap: 16px; }
.thumb-preview {
  width: 160px; height: 100px; border: 1px dashed var(--line); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; background: #fafbf9;
  background-size: cover; background-position: center;
}
.thumb-preview.has-image { border-style: solid; }
.thumb-actions { display: flex; flex-direction: column; gap: 8px; }

/* ===== メディア一覧 ===== */
.lead-note { color: var(--muted); font-size: 13px; margin: -6px 0 18px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.media-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.media-thumb {
  display: block; aspect-ratio: 16 / 10;
  background-color: #f0f2ee; border-bottom: 1px solid var(--line);
}
/* 画面外の画像を読み込まないよう <img loading="lazy"> にしている */
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb:hover { opacity: .88; }
.media-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.media-name { font-size: 12px; font-weight: 700; word-break: break-all; line-height: 1.5; }
.media-meta { font-size: 12px; color: var(--muted); }
.media-used { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.used-link { font-size: 12px; color: var(--green-d); text-decoration: none; line-height: 1.5; }
.used-link:hover { text-decoration: underline; }
.media-actions { display: flex; justify-content: flex-end; }

/* ===== 繰り返し項目（関連リンク・募集条件） ===== */
.repeat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.repeat-row { display: flex; gap: 8px; align-items: center; }
.repeat-row input, .repeat-row select { flex: 1; min-width: 0; }
.repeat-row select { flex: 0 0 130px; }
.repeat-row .r-remove { flex: none; padding: 8px 12px; color: var(--muted); }
.repeat-row .r-remove:hover { color: var(--danger); background: #fdf3f2; }

textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 15px; font-family: inherit; line-height: 1.7; background: var(--white); color: var(--ink);
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: transparent; }

/* ===== 設定画面 ===== */
.settings-card { padding: 26px 28px 28px; margin-bottom: 20px; }
.settings-title { font-size: 16px; margin: 0 0 6px; }
.settings-card .lead-note { margin: 0 0 20px; }
.alert-ok { background: var(--green-l); border: 1px solid #bfe3ac; color: var(--green-d); }
.todo-list { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 2; }

/* 詳細ページを持たない種別では公開日時の列を出さない */
table.no-date th#th-date, table.no-date td.date { display: none; }

.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===== AIによる作成補助 ===== */
.ai-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fbfcfa; padding: 16px 18px; margin-bottom: 22px;
}
/* 警告は常時表示。消せないようにする */
.ai-warn {
  background: #fff8e6; border: 1px solid #f0dda8; border-radius: 6px;
  padding: 10px 14px; font-size: 13px; line-height: 1.7; color: #7a5b12; margin-bottom: 14px;
}
.ai-warn strong { color: #8a5a00; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ai-model { font-size: 12px; color: var(--muted); margin-left: auto; }
.ai-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ai-form .field:last-of-type { margin-bottom: 14px; }
.ai-form-actions { display: flex; gap: 10px; }

.ai-titles { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-titles-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.ai-title-item {
  display: block; width: 100%; text-align: left; background: var(--white);
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
  font-size: 14px; font-family: inherit; cursor: pointer; margin-bottom: 6px; line-height: 1.6;
}
.ai-title-item:hover { border-color: var(--green); background: var(--green-l); color: var(--green-d); }

/* 本文の下に出す注意書き */
.ai-used-note {
  background: #fff8e6; border: 1px solid #f0dda8; border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 9px 14px; font-size: 12px; color: #7a5b12; line-height: 1.6;
}

/* APIキー未登録のときの案内 */
.ai-setup {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: #fbfcfa; padding: 16px 18px; margin-bottom: 22px;
}
.ai-setup__icon {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  background: var(--green-l); color: var(--green-d);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.ai-setup strong { font-size: 14px; }
.ai-setup p { margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.8; }
.ai-setup a { color: var(--green-d); font-weight: 700; }

/* ===== 受付フォーム ===== */
.nav-badge {
  background: #d64545; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.form-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.form-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); font-size: 14px; font-family: inherit; cursor: pointer; color: var(--ink);
}
.form-tab:hover { border-color: #c8cdc4; }
.form-tab.is-active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.tab-total { font-size: 12px; opacity: .7; }
.tab-badge {
  background: #d64545; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.privacy-note {
  font-size: 12px; color: #7a5b12; background: #fff8e6; border: 1px solid #f0dda8;
  border-radius: 6px; padding: 9px 14px; margin: 0 0 16px; line-height: 1.7;
}
tr.is-unread td { background: #fbfff8; }
tr.is-unread td.title a { font-weight: 700; }
td.summary { color: var(--muted); font-size: 13px; }
.status-select.is-todo { background-color: #ffeaea; color: #b23c3c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23b23c3c' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.detail-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.detail-table th {
  width: 180px; text-align: left; vertical-align: top; padding: 11px 14px 11px 0;
  color: var(--muted); font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--line);
}
.detail-table td { padding: 11px 0; border-bottom: 1px solid var(--line); white-space: pre-wrap; line-height: 1.8; }

/* ===== スマホ：表をカード型に切り替える ===== */
@media (max-width: 700px) {
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }

  tbody tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  tbody tr:last-child { border-bottom: none; }
  tbody tr:hover { background: transparent; }

  td {
    padding: 5px 0;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* 項目名は data-label から出す（見出し行を隠すため） */
  td::before {
    content: attr(data-label);
    flex: none;
    width: 72px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
  }
  td.title { display: block; padding-bottom: 8px; }
  td.title::before { display: none; }
  td.title a { font-size: 15px; }
  td.summary { display: block; }
  td.summary::before { display: block; margin-bottom: 2px; width: auto; }
  td.actions { justify-content: flex-end; padding-top: 10px; }
  td.actions::before { display: none; }

  /* 詳細ページを持たない種別では公開日時の列を出さない（PC時と同じ） */
  table.no-date td.date { display: none; }

  .page-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-head .btn { justify-content: center; }
  .footer-actions { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .footer-actions .right { flex-direction: column; }
  .footer-actions .btn { justify-content: center; }
  .row, .row.row-3 { grid-template-columns: 1fr; }
  .detail-table th { width: 110px; font-size: 12px; }
  .thumb-picker { flex-direction: column; align-items: flex-start; }
  .repeat-row { flex-wrap: wrap; }
  .repeat-row select { flex: 1 1 100%; }
  .settings-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* スマホ：上部バーを詰める */
@media (max-width: 700px) {
  .topbar { padding: 0 12px; }
  .topbar .brand { font-size: 13px; white-space: nowrap; }
  .topbar .brand-area { gap: 9px; }
  .topbar .account { gap: 8px; }
  .who-suffix { display: none; }
  .link-btn { white-space: nowrap; padding: 5px 10px; }
  .sidebar::-webkit-scrollbar { height: 3px; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
  .form-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .form-tab { white-space: nowrap; }
}

/* ===== スマホ：☰ で全メニューを開く ===== */
@media (max-width: 700px) {
  /* 普段は隠しておき、本体に画面幅を使う */
  .sidebar { display: none; }

  /* 開いたときは画面全体を覆うモーダルにする */
  .nav-open .sidebar {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 60;
    background: var(--white);
    border: none;
    padding: 0 16px 48px;
    overflow-y: auto;
  }
  .nav-open .sidebar .nav-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--topbar-h);
    margin: 0 -16px 18px;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    font-size: 15px; font-weight: 700;
    position: sticky; top: 0; background: var(--white); z-index: 1;
  }
  .nav-open .sidebar .nav-close {
    width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--white); font-size: 15px; color: var(--muted);
    cursor: pointer; font-family: inherit; line-height: 1;
  }
  .nav-open .sidebar .nav-close:hover { color: var(--ink); border-color: #c8cdc4; }
  .nav-open .sidebar .nav-group { display: block; }
  .nav-open .sidebar .nav-group + .nav-group {
    margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .nav-open .nav-label { display: block; margin-bottom: 10px; }
  .nav-open .nav-item {
    margin-bottom: 4px;
    padding: 14px 14px;
    font-size: 15px;
    white-space: normal;
  }
  /* 開いている間は背面をスクロールさせない */
  .nav-open body { overflow: hidden; }

}

/* モーダルの見出しはPCでは出さない */
.nav-modal-head { display: none; }

/* 分類を持たない種別では、その列を出さない */
table.no-taxonomy th#th-taxonomy, table.no-taxonomy td.taxonomy { display: none; }
@media (max-width: 700px) {
  table.no-taxonomy td.taxonomy { display: none; }
}

/* ヘッダーの「サイトを見る」。公開中のサイトを別タブで開く */
.link-btn.view-site { text-decoration: none; display: inline-flex; align-items: center; }
.link-btn.view-site:hover { color: var(--green); border-color: var(--green); }
@media (max-width: 560px) { .link-btn.view-site span { display: none; } }

/* 通知の宛先（1行1アドレス） */
.addr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.addr-row { display: flex; gap: 8px; align-items: center; }
.addr-row input { flex: 1; min-width: 0; }
.addr-del {
  flex: none; border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 6px; padding: 7px 12px; font-size: 12px; cursor: pointer;
}
.addr-del:hover { color: #b3261e; border-color: #b3261e; }
.btn-add { font-size: 12px; padding: 6px 14px; }

/* 送信サーバーの設定（普段は閉じておく） */
.settings-advanced { margin: 24px 0 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.settings-advanced > summary {
  cursor: pointer; font-weight: 700; font-size: 13px; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.settings-advanced[open] > summary::before { content: "▾"; }
.settings-advanced > summary .hint { font-weight: 400; }

/* 必須バッジ */
.req {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  background: #fdf3f2; border: 1px solid #f0d5d1; color: var(--danger);
  font-size: 10px; font-weight: 700; vertical-align: 1px; letter-spacing: .04em;
}
.alert-warn { background: #fff8e6; border: 1px solid #f0e0b0; color: #8a6100; }

/* 自動で送られる2通の説明 */
.mail-flow {
  margin: 0 0 12px; padding: 12px 16px 12px 34px;
  background: var(--bg); border-radius: var(--radius);
  font-size: 13px; color: var(--text); line-height: 1.9;
}
.mail-flow li { margin: 0; }
.mail-flow b { font-weight: 700; }

/* プレビューはアイコンだけだと伝わらないので文字を添える。
   元の .icon-btn は 34px 角の固定なので、文字が入るぶん横に伸ばす */
.icon-btn { width: 34px; padding: 0; text-decoration: none; }
.icon-btn-label { font-size: 13px; }
td.actions .icon-btn + .btn { margin-left: 6px; }

/* メディアの検索・絞り込み。
   共通スタイルで select が width:100% になっているので、ここだけ横並び用に上書きする */
.media-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.media-tools input[type="search"] {
  flex: 0 1 260px; min-width: 160px; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; background: var(--white); color: var(--ink);
}
.media-tools select { width: auto; flex: none; padding: 9px 12px; font-size: 14px; }
.media-hit { font-size: 12px; color: var(--muted); }

/* アップロード済みの画像から選ぶダイアログ */
.picker {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(24, 28, 22, .45); padding: 24px;
}
.picker[hidden] { display: none; }
.picker-panel {
  background: var(--white); border-radius: var(--radius); width: min(880px, 100%);
  max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}
.picker-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.picker-head strong { font-size: 14px; flex: none; }
.picker-head input[type="search"] {
  flex: 1; min-width: 0; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; background: var(--white); color: var(--ink);
}
.picker-body {
  overflow-y: auto; padding: 16px 18px; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.picker-item {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  padding: 0; cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
  font-family: inherit; text-align: left;
}
.picker-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #f0f2ee; }
.picker-item span {
  padding: 7px 9px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-item:hover { border-color: var(--green); }
.picker-item:hover span { color: var(--ink); }
.picker-item:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.picker-empty { padding: 32px 18px; text-align: center; color: var(--muted); font-size: 14px; }

/* PDFはサムネイルを描けないので、種類が分かる面にする */
.media-thumb.is-pdf {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9ece7 0%, #dfe3dc 100%);
}
.media-thumb.is-pdf span {
  font-family: "Oswald", sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: .16em; color: #7c8579;
}

/* 資料PDFの選択 */
.doc-picker { display: flex; gap: 10px; align-items: center; }
.doc-picker input { flex: 1; min-width: 0; }
.doc-picker .btn { flex: none; }
.doc-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.picker-list { display: block; }
.picker-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); cursor: pointer; font-family: inherit; text-align: left;
  margin-bottom: 8px;
}
.picker-row:hover { border-color: var(--green); }
.picker-row-name { font-size: 13px; font-weight: 700; word-break: break-all; }
.picker-row-meta { font-size: 12px; color: var(--muted); flex: none; }

/* 資料の表紙（PDFの1ページ目から作る） */
.doc-cover {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 16px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.doc-cover-thumb {
  flex: none; width: 92px; min-height: 130px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 3px; background: #f6f8f5; overflow: hidden;
}
.doc-cover-thumb img { display: block; width: 100%; height: auto; }
.doc-cover-empty { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; padding: 8px; }
.doc-cover-body { flex: 1; min-width: 0; }
.doc-cover-title { margin: 2px 0 6px; font-size: 13px; font-weight: 700; }
.doc-cover-note { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.doc-cover-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-cover.is-busy { opacity: .6; pointer-events: none; }

/* 自動返信の文面 */
.settings-advanced textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 14px; font-family: inherit; line-height: 1.7; background: var(--white); color: var(--ink);
  resize: vertical;
}

/* 受付番号。通知メールに載る番号と同じもの */
.rec-no { font-family: "Oswald", sans-serif; color: var(--muted); font-size: 13px; }

/* カテゴリ・タグの編集 */
.tax-block { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.tax-block > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.tax-block > summary::-webkit-details-marker { display: none; }
.tax-block > summary::before { content: "▸"; color: var(--muted); font-size: 11px; }
.tax-block[open] > summary::before { content: "▾"; }
.tax-block[open] > summary { border-bottom: 1px solid var(--line); }
.tax-block > summary .hint { font-weight: 400; margin-left: auto; }

.tax-rows { padding: 14px 16px 4px; display: flex; flex-direction: column; gap: 8px; }
.tax-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tax-row input[type="text"] {
  padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; background: var(--white); color: var(--ink); min-width: 0;
}
.tax-row .tax-label { flex: 1 1 150px; }
.tax-row .tax-key { flex: 0 1 120px; }
.tax-row .tax-en { flex: 0 1 110px; }
.tax-row .tax-icon { flex: 0 1 150px; }
.tax-row input[type="color"] {
  flex: none; width: 34px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--white); cursor: pointer;
}
.tax-count { flex: none; font-size: 12px; color: var(--muted); min-width: 30px; }
.tax-move, .tax-del {
  flex: none; border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: 6px; padding: 6px 9px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.tax-move:hover, .tax-del:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.tax-del:hover:not(:disabled) { color: #b3261e; border-color: #b3261e; }
.tax-del:disabled { opacity: .35; cursor: not-allowed; }
.tax-actions { display: flex; gap: 8px; padding: 10px 16px 16px; flex-wrap: wrap; }

/* ユーザー設定 */
.user-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.user-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
}
.user-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.user-me {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: var(--green-l); color: var(--green-d); letter-spacing: .04em;
}
.user-date { font-size: 12px; color: var(--muted); margin-left: auto; }

/* 一覧の「編集」ボタン。他の操作と並べて、どれが本命か分かるようにする */
.btn-edit { text-decoration: none; display: inline-flex; align-items: center; }
td.actions .btn-edit { margin-right: 6px; }

/* 一覧の検索・絞り込み。件数が多い用語集・ブログで効く */
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.list-tools input[type="search"] {
  flex: 0 1 260px; min-width: 160px; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; background: var(--white); color: var(--ink);
}
.list-tools select { width: auto; flex: none; padding: 9px 12px; font-size: 14px; }
.list-hit { font-size: 12px; color: var(--muted); }
.list-empty { text-align: center; color: var(--muted); padding: 32px 16px; }

/* タグのアイコン選択 */
.ms {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.tax-icon-wrap { display: inline-flex; align-items: center; flex: none; }
.tax-icon-btn {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius); cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.tax-icon-btn:hover { border-color: var(--green); color: var(--green-d); }

.icon-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer; font-family: inherit; color: var(--ink);
}
.icon-cell:hover { border-color: var(--green); background: var(--green-l); }
.icon-cell .ms { font-size: 26px; }
.icon-cell-label { font-size: 12px; color: var(--muted); }

/* タグの色。選ぶのは明るいほうだけで、濃いほうは自動で作る */
.tax-color-wrap { display: inline-flex; align-items: center; flex: none; }
.tax-color-wrap .tax-from {
  width: 34px; height: 34px; padding: 2px; border: 1px solid var(--line);
  border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--white); cursor: pointer;
}
.tax-to-preview {
  width: 22px; height: 34px; border: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0; background: #6b786b;
}

/* タグ編集の欄の見出し。どれが何なのか分かるように */
.tax-head {
  display: flex; gap: 6px; align-items: center; padding: 12px 16px 0;
  font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .02em;
}
/* 行と同じ幅にする。行には件数・並び替え・削除も並ぶので、
   見出し側にも同じ幅の余白を置いて位置を合わせる */
.tax-head .th-label { flex: 1 1 150px; }
.tax-head .th-en { flex: 0 1 110px; }
.tax-head .th-color { flex: none; width: 56px; }
.tax-head .th-icon { flex: none; width: 34px; }
.tax-head::after { content: ''; flex: none; width: 156px; }
@media (max-width: 900px) { .tax-head { display: none; } }

/* サムネイル未設定のときの見本。サイトの .thumb.no-image と同じ描き方にする */
.thumb-preview.auto-visual {
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.thumb-preview.auto-visual::before {
  content: attr(data-icon);
  font-family: "Material Symbols Outlined"; font-size: 44px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
  color: rgba(255, 255, 255, .9); line-height: 1;
}
.thumb-preview.auto-visual::after {
  content: attr(data-label); position: absolute; bottom: 8px; right: 12px;
  font-family: "Oswald", sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}

/* タグの選択。選んだものはチップになり、並び順に意味がある
   （一番左のタグの色とアイコンがサムネイルになる） */
.tag-chips {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  min-height: 46px; padding: 8px 10px; margin-bottom: 10px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--bg);
}
.tag-empty { font-size: 13px; color: var(--muted); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 6px 6px 10px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; cursor: grab; user-select: none;
}
.tag-chip.is-main { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.tag-chip.is-dragging { opacity: .4; }
.tag-chip-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--chip, #9aa79a);
}
.tag-chip-x {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 2px 5px; border-radius: 50%; font-family: inherit;
}
.tag-chip-x:hover { color: #b3261e; background: #fdf3f2; }

.tag-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-add {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--white);
  font-size: 13px; color: var(--muted); cursor: pointer; font-family: inherit;
}
.tag-add:hover { border-color: var(--green); color: var(--ink); }

/* 受付の詳細に置いた対応状況。共通の select が width:100% なので、
   表のセル内で不自然に伸びないよう幅を戻す */
#detail-status { width: auto; min-width: 120px; }
/* 選択欄を入れた行だけ高くならないよう、上下の余白を詰める */
.status-row th, .status-row td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }

/* 一覧のタイトルは主役。操作ボタンが増えても狭くならないよう、残り幅を全部使う */
td.title, th#th-title { width: auto; min-width: 220px; }
td.actions { white-space: nowrap; }

/* 受付の「未読」バッジ。対応状況（未対応／対応中／完了）とは別のもの。
   開けば消えるが、未対応であることは対応状況の欄で分かる */
.unread-badge {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  background: #ffeaea; color: #b23c3c; border: 1px solid #f3cfcf;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; vertical-align: 1px;
}

/* 受付の対応状況。未対応=赤／対応中=緑／完了=グレー。
   記事一覧の is-published / is-draft とは別物なので、受付用の名前で持つ */
.status-select.is-doing {
  background-color: var(--green-l); color: var(--green-d);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%233f9027' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
.status-select.is-done {
  background-color: #eceef0; color: #6b7280;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%236b7280' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 予約中＝公開中だが、まだ公開日時が来ていない状態。
   サイトには出ていないので、公開中とは区別して見せる */
.status-select.is-scheduled {
  background-color: #fff4e0; color: #a1670a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%23a1670a' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 入力欄の見本テキスト（placeholder）。
   ブラウザ既定は rgb(117,117,117) で、補足文字より濃く「入力済み」に見えてしまう。
   実際の文字・補足文字より薄い色にして、空欄だと一目で分かるようにする */
::placeholder { color: var(--placeholder); opacity: 1; }
:-ms-input-placeholder { color: var(--placeholder); }

/* 一覧の見出しで並べ替え。管理画面での見え方だけが変わり、サイトの並び順は変わらない */
.th-sort {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.th-sort:hover { color: var(--ink); }
.th-sort.is-active { color: var(--green-d); }
.th-arrow { font-size: 11px; line-height: 1; }

/* 一覧をドラッグで並び替える（会社概要・拠点情報・沿革）。
   並び順の番号は画面に出さず、掴んで動かした結果をそのまま順番にする */
.th-grip { width: 34px; padding: 0 !important; }
td.grip {
  width: 34px; padding: 0 !important; text-align: center; vertical-align: middle;
  cursor: grab; color: #b9bfc6;
}
td.grip { touch-action: none; }
td.grip svg { width: 18px; height: 18px; fill: currentColor; display: inline-block; vertical-align: middle; }
tr[data-drag="1"]:hover td.grip { color: var(--green); }
tr:not([data-drag="1"]) td.grip { cursor: default; opacity: .35; }
tr.dragging { opacity: .4; background: #f3f9f1; }
tr.dragging td { border-color: var(--green); }
/* 並び替え中は文字を選択させない（掴んだまま動かすと選択されてしまうため） */
body.dragging-rows { user-select: none; cursor: grabbing; }
body.dragging-rows td.grip { cursor: grabbing; }

/* 通知の宛先が重なっているとき。保存を押す前に気づけるよう、その行に印を付ける */
.addr-row input.is-dup { border-color: var(--danger); background: #fff6f6; }
.addr-dup { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: var(--danger); }

/* 自動返信の文面を、フォームの種類ごとに区切って見せる小見出し */
.mail-text-group {
  margin: 20px 0 -4px; font-size: 12px; font-weight: 700;
  color: var(--green-d); letter-spacing: .04em;
}
.mail-text-group:first-of-type { margin-top: 14px; }

/* メール設定の節見出し。「通知メール（担当者あて）」のように、
   どちらのメールの設定なのかを1行で示す */
.mail-section {
  margin: 30px 0 6px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 700; color: var(--ink);
}
.mail-section:first-of-type { margin-top: 22px; }
.mail-section span {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--bg); font-size: 11px; font-weight: 700; color: var(--muted);
  vertical-align: 2px;
}
.mail-section-note { margin: 0 0 16px; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.mail-section-note b { color: var(--text); }

/* お客様に表示される差出人。「通知の宛先」と役割が逆なので、見た目でも区別する */
.from-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0 0 18px; padding: 10px 14px;
  background: var(--bg); border-radius: var(--radius);
}
.from-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.from-value { font-size: 13px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.from-value.is-empty { font-weight: 400; color: var(--muted); }

/* メール設定の3枚のカード。どちらのメールの設定かを見出しの脇に添える */
.title-tag {
  margin-left: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg); font-size: 11px; font-weight: 700; color: var(--muted);
  vertical-align: 2px;
}
/* 埋まっているかどうか。残りが一目で分かるようにする */
.card-state {
  float: right; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700;
}
.card-state.is-done { background: #eaf5e6; color: var(--green-d); }
.card-state.is-todo { background: #fdecec; color: var(--danger); }
/* 3枚のカードの下にまとめて置く操作の帯 */
.settings-bar { margin: -6px 0 20px; }
.settings-bar .settings-actions { margin-top: 0; }