/* KAMAE 販促媒体診断 — UIスタイル（kamae-visual の世界観を適用）
   ダーク・モノクロ＋amber1点・線・余白。装飾過多にしない。
   ベーストークン/共通要素は kamae-kotei の styles.css に準拠。 */
:root {
  --bg: #1a1a1a;        /* 地 */
  --panel: #1f1f1f;     /* パネル面（僅かに明るい黒） */
  --panel-2: #242424;   /* 二次面 */
  --line: #ececec;      /* 主テキスト */
  --sub: #9a9a9a;       /* 補助 */
  --faint: #6a6a6a;     /* 最薄 */
  --frame: #363636;     /* 枠・罫 */
  --amber: #E8780A;     /* アクセント（1画面の主役だけ） */
  --amber-soft: rgba(232,120,10,.10);
  --radius: 14px;
  --serif: Georgia, "Times New Roman", serif;
  --gothic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--line);
  font-family: var(--gothic);
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; cursor: pointer; }

/* ───────── 共通要素 ───────── */
.kicker { font-family: var(--serif); color: var(--sub); letter-spacing: .12em; font-size: 13px; }
.muted { color: var(--sub); }
.faint { color: var(--faint); }

.btn {
  appearance: none; border: 1px solid var(--frame); background: var(--panel);
  color: var(--line); border-radius: 10px; padding: 11px 18px; font-size: 15px;
  transition: border-color .18s ease, background .18s ease, filter .18s ease;
}
.btn:hover { border-color: #4a4a4a; }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #1a1a1a; font-weight: 700; }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; }

.banner {
  font-size: 12px; color: var(--faint); border: 1px solid var(--frame); border-radius: 8px;
  padding: 6px 10px; display: inline-block;
}

/* ───────── シェル / 上部バー ───────── */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 10; background: rgba(26,26,26,.86);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--frame);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; padding-top: max(12px, env(safe-area-inset-top));
}
.topbar .left { display: flex; align-items: center; gap: 10px; }
.topbar .mark { font-family: var(--serif); letter-spacing: .2em; color: var(--sub); font-size: 13px; }
.topbar .bar { width: 22px; height: 2px; background: var(--amber); }
.whoami { font-size: 13px; color: var(--sub); }

.content { flex: 1; padding: 24px 18px 48px; max-width: 720px; width: 100%; margin: 0 auto; }

/* ───────── 見出し（Chapter → 主見出し → amber下線 → リード）───────── */
.section-head { margin-bottom: 18px; }
.section-head .ttl { font-size: 24px; font-weight: 700; margin: 4px 0 0; }
.section-head .amber-underline { width: 56px; height: 3px; background: var(--amber); border-radius: 2px; margin-top: 8px; }
.section-head .lead { margin: 12px 0 0; font-size: 15px; }

/* ───────── パネル / フォーム ───────── */
.card {
  background: var(--panel); border: 1px solid var(--frame); border-radius: var(--radius);
  padding: 20px 18px;
}
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--sub); }
.form input, .form select {
  appearance: none; background: var(--panel-2); color: var(--line);
  border: 1px solid var(--frame); border-radius: 10px; padding: 11px 12px; font-size: 15px; font-family: inherit;
}
.form input:focus, .form select:focus { outline: none; border-color: var(--amber); }
.form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; padding-right: 34px;
}

/* Q6 複数選択（チェックボックス群） */
.field-group { border: 0; margin: 0; padding: 0; }
.field-group legend { font-size: 13px; color: var(--sub); padding: 0; margin-bottom: 8px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.check {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--frame); border-radius: 10px;
  padding: 11px 12px; font-size: 14px; color: var(--line);
}
.check:hover { border-color: #4a4a4a; }
.check input { width: 16px; height: 16px; accent-color: var(--amber); flex: 0 0 auto; }
.check:has(input:checked) { border-color: #5a5a5a; }

/* 入力エラー */
.form-err { color: #c98379; font-size: 13px; min-height: 18px; }

/* ───────── 結果：媒体カード（優先度順）───────── */
.media-list { display: flex; flex-direction: column; gap: 12px; }
.media-card {
  background: var(--panel); border: 1px solid var(--frame); border-radius: var(--radius);
  padding: 16px 18px;
}
/* 最優先の1枚だけ amber で強調（amber1点ルール）*/
.media-card.top { border-color: var(--amber); background: var(--amber-soft); }

.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.mc-rank { font-family: var(--serif); color: var(--faint); font-size: 14px; letter-spacing: .08em; }
.mc-name { font-size: 18px; font-weight: 700; }
.media-card.top .mc-name { color: var(--amber); }
.media-card.top .mc-rank { color: var(--amber); }

.mc-toptag { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--amber); }

/* 優先度バッジ（高/中/低はグレー基調。色で煽らない）*/
.pri-badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  border: 1px solid var(--frame); color: var(--sub);
  border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600;
}
.pri-高 { color: var(--line); border-color: #5a5a5a; }
.pri-中 { color: var(--sub); }
.pri-低 { color: var(--faint); }

/* ───────── HP（土台）固定注記：控えめ・amberにしない ───────── */
.hp-note {
  margin-top: 16px; border: 1px solid var(--frame); border-left: 3px solid var(--sub);
  border-radius: var(--radius); padding: 14px 16px; background: var(--panel);
}
.hp-note-head { font-size: 13px; font-weight: 700; color: var(--sub); }
.hp-note-body { margin: 6px 0 0; font-size: 13.5px; color: var(--sub); line-height: 1.7; }

/* ───────── 後フェーズ用プレースホルダ枠 ───────── */
.placeholder-box {
  margin-top: 16px; border: 1px dashed var(--frame); border-radius: var(--radius);
  padding: 18px; background: var(--panel);
}
.placeholder-box .pb-head { font-size: 14px; font-weight: 700; color: var(--line); }
.placeholder-box .pb-body { margin-top: 6px; font-size: 13.5px; min-height: 20px; }

/* AIコメント（Phase 2）：サブ色ベースで控えめ。amberは使わない。 */
#aiCommentBox .pb-body { color: var(--sub); line-height: 1.85; }
#aiCommentBox .pb-body.faint { color: var(--faint); }
#aiCommentBox .pb-body.ai-loading { color: var(--faint); font-style: italic; }

/* ───────── Phase 3：集客ツール導線（amberは使わない。メインは枠線で軽く強調）───────── */
.tools-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.tool-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--panel-2); border: 1px solid var(--frame); border-radius: 12px;
  padding: 13px 15px; transition: border-color .18s ease, background .18s ease;
}
.tool-card.is-link { cursor: pointer; }
.tool-card.is-link:hover { border-color: #4a4a4a; background: #262626; }
.tool-card.is-soon { cursor: default; }
/* メインだけ軽く強調（amber禁止 → 明るいグレー枠＋左アクセント＋僅かに明るい面）*/
.tool-card.tool-main { border-color: #5a5a5a; border-left: 3px solid #8a8a8a; background: #232323; }

.tool-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tool-tier {
  font-size: 11px; color: var(--sub); border: 1px solid var(--frame);
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.tool-card.tool-main .tool-tier { color: var(--line); border-color: #5a5a5a; font-weight: 600; }
.tool-soon-tag { font-size: 11px; color: var(--faint); }
.tool-name { font-size: 15px; font-weight: 700; color: var(--line); }
.tool-card.is-soon .tool-name { color: var(--sub); }
.tool-desc { margin-top: 4px; font-size: 12.5px; color: var(--sub); line-height: 1.7; }

@media (max-width: 560px) {
  .content { padding: 18px 14px 40px; }
  .section-head .ttl { font-size: 21px; }
}