/* =========================================================================
   admage v5 — 管理画面で足した部品（components.css にないもの）
   ========================================================================= */

/* 準備中のメニュー */
.nav-item--soon { opacity: .45; cursor: default; }
.nav-item--soon:hover { background: transparent; color: var(--text-secondary); }
.nav-item--soon .nav-item__count { font-size: 10px; }

/* パンくずのリンク */
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text); }

/* ラジオボタンを使った切り替え（絞り込み。JS がなくても動く） */
.seg-radio { position: relative; display: inline-flex; }
.seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.seg-radio > span { height: 26px; padding: 0 var(--space-2); border-radius: 4px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 一覧 */
.table tbody tr[data-href] { cursor: pointer; }
.table td.empty { text-align: center; color: var(--text-tertiary); height: 120px; white-space: normal; }
a.th-sort { color: inherit; }
#list.htmx-request { opacity: .55; transition: opacity var(--dur-base); }
.pager a.btn { text-decoration: none; }

/* フォームのエラーのまとめ */
.alert { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); }
.alert--danger { background: var(--danger-weak); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.alert--info { background: var(--info-weak); color: var(--text); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); }
.alert--warning { background: var(--warning-weak); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); margin-bottom: var(--space-4); }
.btn[aria-busy="true"] { opacity: .7; }

/* 画面の説明（右から出る枠） */
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: var(--overlay); animation: fade var(--dur-fast); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--surface-raised); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: drawer-in var(--dur-base) var(--ease-out); }
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: var(--topbar-h); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); }
.drawer__title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-6); }

/* 説明の本文（Markdown） */
.markdown { font-size: var(--text-sm); line-height: 1.75; color: var(--text); }
.markdown h1 { font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.markdown h2 { font-size: var(--text-md); margin: var(--space-6) 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--border); }
.markdown h3 { font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-1); }
.markdown p, .markdown ul, .markdown ol { margin: 0 0 var(--space-3); }
.markdown ul, .markdown ol { padding-left: 1.4em; }
.markdown code { font-family: var(--font-mono); font-size: .9em; background: var(--neutral-weak); padding: 1px 5px; border-radius: 4px; }
.markdown table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-3); font-size: var(--text-xs); }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 6px var(--space-2); text-align: left; vertical-align: top; }
.markdown th { background: var(--bg-subtle); font-weight: var(--weight-medium); }
.markdown a { color: var(--accent); text-decoration: underline; }

/* 幅を決めた入力欄も、画面が狭いときは枠からはみ出さない */
.field__control .input, .field__control .select { max-width: 100%; }

/* 入力欄のエラー（フォームの外で使うとき） */
.input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }

/* 一覧の中での名前の変更（ジャンルなど） */
.inline-edit > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: var(--weight-medium); }
.inline-edit > summary::-webkit-details-marker { display: none; }
.inline-edit > summary .icon { color: var(--text-tertiary); opacity: 0; transition: opacity var(--dur-fast); }
.inline-edit > summary:hover .icon, .inline-edit[open] > summary .icon { opacity: 1; }
.inline-edit[open] > summary .genre-name { display: none; }
.inline-edit__form { display: inline-flex; gap: var(--space-2); align-items: center; }
.inline-edit__form .input { width: 200px; }
tr.is-archived td { color: var(--text-tertiary); }
.genre-add { flex-wrap: wrap; }
.table .col-actions { text-align: right; white-space: nowrap; width: 1%; }

/* ポストバックの置き換え文字の一覧 */
.kv.macros { grid-template-columns: max-content 1fr; font-size: var(--text-xs); }
.kv.macros dd { text-align: left; color: var(--text-secondary); }
.input input.mono { font-family: var(--font-mono); font-size: var(--text-xs); }

/* 登録した直後の完了の帯 */
.done-banner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); border-radius: var(--radius-lg); background: var(--success-weak); animation: pop var(--dur-base) var(--ease-out); }
.done-banner__icon { width: 28px; height: 28px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--success); color: #fff; flex: none; }
.done-banner__icon .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.done-banner__text { flex: 1; min-width: 200px; font-size: var(--text-sm); }
.done-banner__text b { display: block; font-weight: var(--weight-semibold); }
.done-banner__text span { color: var(--text-secondary); font-size: var(--text-xs); }
.done-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 見出しの右のボタンが多いときは、見出しの下に回す（名前を縦に細く折り返さない） */
.page-head { flex-wrap: wrap; }
.page-head > .entity, .page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
/* 狭い画面では縦に並ぶので、320px が高さにならないように */
@media (max-width: 760px) { .page-head > .entity, .page-head > div:first-child { flex-basis: auto; } }

/* 準備中のタブ */
.tab--soon { opacity: .45; cursor: default; }

/* 折りたためるセクション（広告の「詳細設定」など） */
.section--fold > summary { list-style: none; cursor: pointer; }
.section--fold > summary::-webkit-details-marker { display: none; }
.section--fold > summary .section__num::before { content: "▸ "; }
.section--fold[open] > summary .section__num::before { content: "▾ "; }
.section--fold:not([open]) > summary { border-bottom: 0; }

/* フォームの中のラジオの切り替え（報酬の種類など） */
.seg-radios { align-self: flex-start; }

/* 変更履歴 */
.history { padding: var(--space-2) var(--space-5); }
/* 成果の金額を直す：変えた行 */
tr.is-changed td { background: var(--surface-selected); }
/* 操作履歴の一覧：内容は 1 行だけ（全部は詳細で） */
.audit-sum { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
/* 操作履歴の詳細：項目ごとに、前 → 後 を縦に並べる（狭い画面でも長い値が読めるように） */
.history__changes.audit-info th { width: 7em; }
.audit-change { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.audit-change:last-child { border-bottom: 0; }
.audit-change__field { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-1); }
.audit-change__before, .audit-change__after { white-space: pre-wrap; word-break: break-all; font-size: var(--text-sm); padding: var(--space-2); border-radius: var(--radius-sm); }
.audit-change__before { background: var(--surface-hover); color: var(--text-tertiary); text-decoration: line-through; }
.audit-change__arrow { color: var(--text-tertiary); font-size: var(--text-xs); padding: 2px var(--space-2); }
.history__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.history__item:last-child { border-bottom: 0; }
.history__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.history__changes { margin-top: var(--space-2); }
.history__changes th { width: 180px; text-align: left; font-weight: var(--weight-medium); color: var(--text-secondary); vertical-align: top; }
.history__changes td { text-align: left !important; white-space: pre-wrap; word-break: break-all; vertical-align: top; }
.history__before { color: var(--text-tertiary); text-decoration: line-through; }
.history__arrow { width: 24px; color: var(--text-tertiary); }

/* 提携メディアのタブ */
.visibility-note { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); font-size: var(--text-sm); color: var(--text-secondary); }
.seg-link { height: 26px; padding: 0 var(--space-2); border-radius: 4px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: 6px; }
.seg-link[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.add-media, .reason-op { position: relative; display: inline-block; }
.add-media > summary, .reason-op > summary { list-style: none; }
.add-media > summary::-webkit-details-marker, .reason-op > summary::-webkit-details-marker { display: none; }
.add-media__pop { right: 0; top: calc(100% + 4px); width: min(380px, calc(100vw - 16px)); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); overflow: hidden; z-index: 60; }
.add-media__pop .input { width: 100%; }
.add-media__list { max-height: 280px; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.add-media__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.reason-op__pop { right: 0; top: calc(100% + 4px); width: min(300px, calc(100vw - 16px)); padding: var(--space-3); text-align: left; white-space: normal; overflow-y: auto; z-index: 60; }
.inline-edit--price > summary { justify-content: flex-end; }
.inline-edit--price[open] > summary { display: none; }
.inline-edit--price .inline-edit__form { justify-content: flex-end; }
.inline-edit--price .inline-edit__form .input { width: 110px; }
.inline-edit--price .hint { display: block; text-align: right; }

/* クリエイティブ形式：一覧の項目の印 */
.field-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 240px; }
.field-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: var(--text-xs); background: var(--surface); }

/* クリエイティブ形式：項目の編集欄 */
.field-errors { list-style: none; margin: var(--space-3) 0 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--danger-weak); color: var(--danger); font-size: var(--text-xs); display: grid; gap: 4px; }
.field-errors li { display: flex; align-items: center; gap: 6px; }
.fdef { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.fdef__row { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); }
.fdef__row[data-locked="true"] { border-style: dashed; }
.fdef__order { display: flex; flex-direction: column; gap: 2px; }
.fdef__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fdef__line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); }
.fdef__cell { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.fdef__cell[hidden] { display: none; }
.fdef__cap { color: var(--text-tertiary); font-size: var(--text-2xs); }
.fdef__cell--label { flex: 1 1 160px; }
.fdef__cell--key { flex: 0 1 150px; }
.fdef__cell--type .select { min-width: 140px; }
.fdef__cell--req { flex-direction: row; align-items: center; gap: 6px; height: 32px; color: var(--text-secondary); }
.fdef__cell--grow { flex: 1 1 220px; }
.fdef__wh { display: inline-flex; align-items: center; gap: 4px; color: var(--text-tertiary); }
.fdef input[readonly] { color: var(--text-tertiary); }

/* クリエイティブ形式：入力欄の見え方 */
.fdef-preview { display: flex; flex-direction: column; gap: var(--space-3); }
.pv-label { font-size: var(--text-xs); font-weight: var(--weight-medium); margin-bottom: 4px; }
.pv-label .req { color: var(--danger); font-size: var(--text-2xs); margin-left: 2px; }
.pv-box { display: block; height: 28px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-xs); color: var(--text-tertiary); }
.pv-box--tall { height: 56px; }
.pv-drop { display: grid; place-items: center; text-align: center; height: 64px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-tertiary); }
.pv-switch { display: block; width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--border-strong); }

/* ---------- クリエイティブ ---------- */
.creative-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.creative-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg, 8px); background: var(--surface); overflow: hidden; color: inherit; text-decoration: none; }
.creative-card:hover { border-color: var(--accent); }
.creative-card.is-paused { opacity: .6; }
.creative-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-sunken, var(--bg)); display: grid; place-items: center; overflow: hidden; }
.creative-card__media img, .creative-card__media video { width: 100%; height: 100%; object-fit: contain; }
.creative-card__play { position: absolute; color: #fff; font-size: 24px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.creative-card__text { padding: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.creative-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.creative-card__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creative-card__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--text-xs); }
.format-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.format-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md, 6px); color: inherit; text-decoration: none; font-size: var(--text-sm); }
.format-card:hover { border-color: var(--accent); }
.upload { display: flex; flex-direction: column; gap: var(--space-2); }
.upload__current { display: flex; gap: var(--space-3); align-items: flex-start; }
.upload__current img, .upload__current video { max-width: 200px; max-height: 140px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-sunken, var(--bg)); }
.upload__info { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); min-width: 0; }
.upload__url { font-size: var(--text-xs); color: var(--text-tertiary); word-break: break-all; }
.upload__remove { font-size: var(--text-xs); display: inline-flex; gap: 4px; align-items: center; }
.upload__drop { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px dashed var(--border-strong, var(--border)); border-radius: 6px; cursor: pointer; font-size: var(--text-sm); }
.upload__drop:hover { border-color: var(--accent); }
.upload__drop input[type=file] { font-size: var(--text-xs); }

/* 成果の通知の URL */
.cv-url { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: 6px; background: var(--surface-sunken, var(--bg)); }
.cv-url code { flex: 1; min-width: 0; font-size: var(--text-xs); word-break: break-all; }

/* 一覧で選んでまとめて操作する帯（.bulkbar は components.css） */
.bulkbar__reject { display: inline-flex; gap: var(--space-2); align-items: center; }
.bulkbar__count, .bulkbar .btn { white-space: nowrap; flex-shrink: 0; }
.bulkbar__reject .input { width: 14em; }
.col-check { width: 36px; text-align: center; }
.check-inline { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); white-space: nowrap; }

/* レポート */
.kpis { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); overflow: hidden; }
.kpi { flex: 1 1 150px; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
.kpi__label { font-size: var(--text-xs); color: var(--text-secondary); }
.kpi__value { font-size: 22px; font-weight: 600; margin-top: 2px; }
.kpi__sub { font-size: var(--text-xs); margin-top: 2px; }
.is-negative { color: var(--danger); }
.presets { display: inline-flex; gap: 2px; flex-wrap: wrap; }
.presets .is-active { background: var(--surface-sunken, var(--bg)); color: var(--text); }
.report-table tfoot th { font-weight: 600; border-top: 2px solid var(--border); background: var(--surface-sunken, var(--bg)); }

/* レポートの推移のグラフ（report_trend.js。.chart・.tooltip・.legend は components.css） */
.trend { padding: var(--space-3) var(--space-4) var(--space-2); border-bottom: 1px solid var(--border); }
.trend__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.trend__title { font-weight: 600; font-size: var(--text-sm); margin: 0; }
.trend .legend { flex: 1; }
.chart .line.is-prev { stroke-dasharray: 4 3; }
.kpi__delta { font-size: 11px; margin-left: 4px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.kpi__delta.is-up { color: var(--success); }
.kpi__delta.is-down { color: var(--danger); }
/* 「← 〇〇の一覧」（layout.html。一覧の条件は admin.js が付ける） */
.backlink { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none; }
.backlink:hover { color: var(--accent); }

/* 編集画面の下の「削除」の欄（parts.html の "delete"） */
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding: var(--space-4) var(--space-5); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
.danger-zone__text { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }

/* システム設定（項目ごとのフォーム） */
.settings { max-width: 960px; display: flex; flex-direction: column; gap: var(--space-4); }
.setting.is-saved { background: color-mix(in srgb, var(--success) 6%, transparent); }

/* メール形式 */
.mf-vars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-xs); }
.mf-vars li { display: flex; flex-direction: column; gap: 2px; }
.mf-var { align-self: flex-start; border: 1px solid var(--border); background: var(--surface-sunken, var(--bg)); border-radius: 4px; padding: 1px 6px; cursor: pointer; color: var(--text); }
.mf-var:hover { border-color: var(--accent); color: var(--accent); }
.mf-preview { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mf-preview > .hint { padding: var(--space-2) var(--space-3) 0; margin: 0; }
.mf-preview__subject { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--text-sm); }
.mf-preview__body { margin: 0; padding: var(--space-3); white-space: pre-wrap; word-break: break-all; font-size: 13px; line-height: 1.7; font-family: var(--font-sans); background: var(--surface); }

/* ポータル（広告主用・メディアオーナー用）：サイドバーの会社名と、代理ログインの帯 */
.portal-badge { margin: 0 var(--space-3) var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 8px; background: var(--accent-weak); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portal-badge__kind { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: .04em; }
.portal-badge__name { font-size: var(--text-sm); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-portal] .brand-mark { background: var(--accent); }
.proxy-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--accent); color: #fff; font-size: var(--text-sm); position: sticky; top: 0; z-index: 30; }
.proxy-bar .btn { background: #fff; color: var(--accent-strong); border-color: transparent; }

/* 権限が閲覧のみのとき、admin.js が隠したもの */
html[data-readonly] [hidden] { display: none !important; }
html[data-readonly] .col-check { display: none; } /* 一括操作の選択（閲覧のみは操作できない） */

/* 配信タグ（parts.html の tag-ad） */
.tag-ad { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.tag-ad:first-child { border-top: 0; }
.tag-ad__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.tag-ad__name { font-weight: var(--weight-semibold); color: var(--text); }
.tag-copy { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-xs); }
.tag-copy__label { color: var(--text-secondary); white-space: nowrap; }
.tag-copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface-2, var(--bg)); padding: 2px 6px; border-radius: 4px; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.tag-card { border: 1px solid var(--border); border-radius: var(--radius, 8px); overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.tag-card__preview { width: 100%; height: 150px; border: 0; background: #fff; display: block; border-bottom: 1px solid var(--border); }
.tag-card__body { padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.tag-card__name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.tag-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

/* 配信タグを取得（広告の詳細のダイアログ） */
.tag-dialog { width: min(1100px, calc(100vw - 32px)); height: min(720px, calc(100vh - 48px)); padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,.25)); }
.tag-dialog[open] { display: flex; flex-direction: column; }
.tag-dialog::backdrop { background: rgba(0,0,0,.35); }
.tag-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.tag-dialog__head h2 { margin: 0; font-size: var(--text-md, 15px); }
.tag-dialog__body { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px 1fr; }
.tag-dialog__pick { border-right: 1px solid var(--border); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
.tag-dialog__pick .input { width: 100%; }
.tag-dialog__list { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.tag-dialog__result { overflow: auto; padding: var(--space-4); min-width: 0; }
.tag-pick { text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--space-2); border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.tag-pick:hover { background: var(--surface-2, var(--bg)); }
.tag-pick[aria-current="true"] { background: var(--accent-soft, rgba(80,120,255,.12)); }
.tag-pick__name { font-weight: var(--weight-medium); }
.tag-result__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
@media (max-width: 720px) { .tag-dialog__body { grid-template-columns: 1fr; } .tag-dialog__pick { border-right: 0; border-bottom: 1px solid var(--border); max-height: 40%; } }

/* 成果タグ（parts.html の cv-tags） */
.code-copy { display: flex; align-items: flex-start; gap: var(--space-2); }
.code-copy pre { flex: 1; min-width: 0; margin: 0; padding: var(--space-2) var(--space-3); background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 6px; font-size: var(--text-xs); white-space: pre-wrap; word-break: break-all; }
.cv-point { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.cv-point:first-child { border-top: 0; padding-top: 0; }
.cv-point__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.table tr.is-error td { background: var(--danger-weak); }
.picker input { min-width: 12em; }
.sql-trace-on { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.sql-trace-on .status-dot { color: var(--danger); }
.sql-text { margin: 0; font-variant-ligatures: none; white-space: pre-wrap; word-break: break-all; font-family: var(--font-mono, monospace); font-size: var(--text-xs); }
.brand-logo { display: block; height: 24px; max-width: 168px; object-fit: contain; object-position: left center; }
/* 暗いテーマ：入れたロゴが暗い色でも読めるよう、白い台にのせる */
html[data-theme="dark"] .brand-logo { background: #fff; padding: 2px 6px; border-radius: 6px; height: 28px; }
@media (prefers-color-scheme: dark) { html[data-theme="system"] .brand-logo { background: #fff; padding: 2px 6px; border-radius: 6px; height: 28px; } }
/* お知らせの上部の帯（閉じたものは、その端末では出さない。admin.js） */
.notice-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--warning-weak); color: var(--text); border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); font-size: var(--text-sm); }
.notice-bar[hidden] { display: none; }
.notice-bar > .icon { color: var(--warning); flex: none; }
.notice-bar a { color: inherit; font-weight: var(--weight-medium); text-decoration: underline; text-underline-offset: 2px; }
.notice-bar [data-notice-close] { margin-left: auto; }
.notice-body { font-size: var(--text-md, 15px); line-height: 1.8; white-space: normal; word-break: break-word; }
.notice-to { padding: var(--space-2) 0; border-bottom: 1px dashed var(--border); }
.notice-to:last-child { border-bottom: 0; }
.notice-to__body { display: grid; gap: var(--space-2); padding: var(--space-2) 0 0 var(--space-5); }
.notice-to__body[hidden], [data-scope-for][hidden], #mail-section[hidden] { display: none; }
.pick-list { display: grid; gap: var(--space-2); }
.pick-list__items { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); display: grid; gap: 2px; }
.pick-list__item[hidden] { display: none; }
[data-locked] input, [data-locked] label { pointer-events: none; opacity: .7; }
.home-notices__list { list-style: none; margin: 0; padding: 0 var(--space-4) var(--space-3); display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.home-notices__list li { display: flex; gap: var(--space-3); align-items: baseline; }
/* 長い説明つきのチェックボックス：折り返す（チェックは 1 行目にそろえる） */
.check-wrap { display: flex; align-items: flex-start; gap: 6px; font-size: var(--text-sm); white-space: normal; line-height: 1.6; }
.check-wrap > input { flex: none; margin-top: 0.3em; }
a.seg-radio { text-decoration: none; }
a.seg-radio[aria-current="true"] > span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warning); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }

/* クリエイティブのカードのプレビュー（押すとカードのリンクが効くよう、中は触れない） */
.creative-card__preview { width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; }

/* クリエイティブの編集画面のプレビュー */
.creative-preview { display: block; width: 100%; height: 220px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; resize: vertical; }

/* サーバーの画面 */
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); align-items: start; }
.server-card .kv dd { min-width: 0; overflow-wrap: anywhere; }
.meter { height: 6px; margin-top: 4px; border-radius: 3px; background: var(--bg-subtle); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }

/* 「はじめに」 */
.getting-started { max-width: 860px; margin: 0 auto; padding: var(--space-6) var(--space-8); }
.getting-started h1 { margin-top: 0; }
.getting-started h3 { margin-top: var(--space-6); }
.getting-started a { color: var(--accent); }
@media (max-width: 640px) { .getting-started { padding: var(--space-4); } }