:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #dbdbdb;
  --border-soft: #efefef;
  --text: #262626;
  --muted: #71767b;
  --pink: #1d9bf0;
  --pink-dark: #1a8cd8;
  --pink-soft: #eef7ff;
  --pink-tint: #f2f2f2;
  --accent-pink: #db6a9c;
  --accent-pink-bg: #fdeaf2;
  --rose-line: #e0201b;
  --rose-bar: rgba(173, 216, 230, 0.9);
  --sidebar-w: 250px;
  --feed-w: 720px;
  --header-h: 66px;
  --header-bg: #f2a6c2;
  --header-bg-dark: #ec8fb2;
  /* dodai.daido-life.co.jp と同じ: 欧文=Montserrat / 和文=Noto Sans JP */
  --font-body: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-head: "Montserrat", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }

/* ===================== header ===================== */
.app-header {
  position: fixed;
  gap: 8px;
  inset: 0 0 auto 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: var(--header-bg);
  z-index: 30;
}
/* サイドバー右上の開閉ハンドル（固定配置。閉じても画面端に残る） */
/* サイドバーを前面に出したときの背景。PCでは常に無効のまま */
.sidebar-backdrop {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 39;
  background: rgba(0, 0, 0, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.sidebar-toggle {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: calc(var(--sidebar-w) - 14px);
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
  transition: left .22s ease;
}
.sidebar-toggle:hover { color: var(--accent-pink); border-color: var(--accent-pink); }
.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .22s ease;
}
body.sidebar-collapsed .sidebar-toggle { left: 10px; }
body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.app-title {
  color: #fff;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-support {
  white-space: nowrap;
  color: #fff;
  background: none;
  border: 0;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 4px;
  cursor: pointer;
  opacity: .92;
}
.header-support:hover { opacity: 1; text-decoration: underline; }
.header-login {
  white-space: nowrap;
  color: #fff;
  background: none;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
}
.header-login:hover { background: rgba(255, 255, 255, .18); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; }
code { background: var(--pink-soft); border-radius: 3px; padding: 1px 4px; font-size: 12px; }

.app { display: flex; padding-top: var(--header-h); }

/* ===================== sidebar ===================== */
.sidebar {
  position: fixed;
  top: var(--header-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  padding: 20px 16px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  transition: transform .22s ease;
}

/* サイドバーの開閉（デフォルトは開） */
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .feed { margin-left: 0; }
.side-section { display: flex; flex-direction: column; gap: 4px; }
.side-heading {
  margin: 0 0 4px 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
}
.side-note {
  margin: 6px 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.market-nav, .type-nav { display: flex; flex-direction: column; gap: 2px; }
.market-item, .type-item {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  padding: 11px 10px 11px 18px;
  border-radius: 12px;
}
.market-item:hover, .type-item:hover { background: var(--pink-tint); }
.market-item.is-active { font-weight: 700; color: var(--accent-pink); }
.type-item.is-active { font-weight: 700; color: var(--accent-pink); }
.type-item.is-active .tlabel { box-shadow: 0 0 0 2px var(--accent-pink); }

.sort-select {
  width: 100%;
  padding: 10px 36px 10px 16px;   /* 右は矢印ぶんの余白 */
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--text);
  font-size: 13px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371767b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
/* フッターは直前の要素に続けて置く。
   広告ありのときは .sidebar-ad の flex:1 が余白を吸うので結果的に下寄せになり、
   広告なし（プレミアム）のときは空白を作らずそのまま上に詰まる。 */
.side-foot { display: flex; flex-direction: column; gap: 10px; }

/* ---- auth box ---- */
.auth-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-box .ab-plan { margin: 0; line-height: 1.5; }
/* プラン名とメールは一組として見せたいので、間だけ詰める */
.auth-box .ab-email { margin-top: -8px; color: var(--muted); word-break: break-all; }
.auth-box form { display: flex; flex-direction: column; gap: 10px; }
.auth-box input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 12px;
}
.auth-box button {
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  background: #eef2f5;
  color: var(--text);
}
.auth-box .ab-btn.ab-cta, .auth-box form button {
  background: var(--header-bg);
  color: #fff;
}
.auth-box .ab-btn.ab-cta:hover { background: var(--header-bg-dark); }
.auth-box .ab-link {
  background: none;
  color: var(--muted);
  font-weight: 400;
  padding: 4px 2px;
  text-decoration: underline;
}
.auth-box .ab-msg { margin: 0; color: var(--muted); }
.side-meta { margin: 0 4px; font-size: 11px; color: var(--muted); line-height: 1.7; white-space: pre-line; }

/* ===================== feed ===================== */
.feed {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 28px 64px;
  transition: margin-left .22s ease;
}
.feed > * { width: 100%; max-width: var(--feed-w); }

/* 更新タイミングの案内。フィード先頭に控えめに置く。
   絵文字を入れると行頭が他の行とずれるので文字だけにする。 */
.update-schedule {
  margin: 0 4px 14px;
  font-size: 12px;
  color: var(--muted);
}
.update-schedule-label { margin: 0; font-weight: 700; }
.update-schedule-value { margin: 2px 0 0; }

.feed-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
#feed-market { font-family: var(--font-head); font-size: 19px; font-weight: 700; }
.search-wrap {
  position: relative;
  flex: 1;
  max-width: 260px;
  display: flex;
}
/* 標準のクリアボタンはブラウザごとに出たり出なかったりするので隠し、
   自前のボタンに一本化する */
#search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--muted);
  font-size: 21px;   /* 円は26pxのまま、記号だけ大きくする */
  line-height: 1;
  cursor: pointer;
  padding: 0 0 2px;  /* × の字面が上寄りに見えるので下に微調整 */
}
.search-clear:hover { background: rgba(0, 0, 0, .12); color: var(--text); }

#search-input {
  flex: 1;
  width: 100%;
  padding: 9px 36px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13px;
}
#search-input:focus { outline: none; border-color: var(--pink); }
.sample-banner {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 12px;
  color: #7a5b00;
  margin-bottom: 14px;
}
.results-line { margin: 0 4px 16px; font-size: 13px; color: var(--muted); }
.feed-list { display: flex; flex-direction: column; gap: 22px; }

/* ---- 広告枠（無料会員のみ） ---- */
.ad-slot {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}
.ad-label {
  position: absolute;
  top: 7px;
  left: 12px;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--muted);
}
.ad-ph {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 22px 12px;
}
.sidebar-ad {
  display: flex;
  flex: 1 1 0;             /* サイドバーの余白いっぱいまで広げる */
  min-height: 320px;
  margin: 8px 0;
}
.sidebar-ad .ad-slot {
  flex: 1;
  border-radius: 12px;
}
.benefits {
  /* 箇条書きの頭は揃えたいので text-align は left のまま。
     ブロック幅を中身にフィットさせることで、全体が中央に来る。 */
  text-align: left;
  width: fit-content;
  max-width: 100%;
  margin: 26px auto 10px;
  padding-left: 20px;
}
.benefits li {
  margin: 10px 0;
  font-size: 14px;
  color: #6b9bd2;          /* 薄い青 */
}
.ab-hint { margin: 0; font-size: 11px; color: var(--muted); }

/* ---- gate (未ログイン / 未課金) ---- */
.gate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}
.gate h2 { margin: 0 0 8px; font-family: var(--font-head); font-size: 18px; font-weight: 700; }
.gate p { margin: 6px 0; color: var(--muted); font-size: 14px; }
.gate form { margin: 16px auto 4px; display: flex; gap: 8px; max-width: 360px; }
.gate input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.gate form button, .gate .gate-cta {
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  background: var(--header-bg);
  color: #fff;
  cursor: pointer;
}
.gate form button:hover, .gate .gate-cta:hover { background: var(--header-bg-dark); }
.gate .gate-cta { margin-top: 26px; min-width: 240px; padding-left: 32px; padding-right: 32px; }
.gate .gate-note {
  min-height: 1em;
  /* ボタンとの間隔を広げる */
  margin: 28px auto 0;
  /* 1行に収めたいので幅は広めに取り、入り切らない画面では素直に折り返す */
  max-width: 100%;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

/* ===================== ログイン / 新規登録 モーダル ===================== */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.auth-close {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.auth-card h2 {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
}
.auth-field {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.auth-field input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text);
}
.auth-field input:focus { outline: none; border-color: var(--accent-pink); }
.auth-primary {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  padding: 11px;
  font-weight: 700;
  font-size: 14px;
  background: var(--header-bg);
  color: #fff;
  cursor: pointer;
}
.auth-primary:hover { background: var(--header-bg-dark); }
.auth-secondary {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px;
  background: #fff;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}
.auth-secondary:hover { background: #f7f7f7; }
.auth-danger {
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 10px;
  padding: 11px;
  font-weight: 700;
  font-size: 14px;
  background: #d64545;
  color: #fff;
  cursor: pointer;
}
.auth-danger:hover { background: #c23a3a; }
.auth-danger[disabled] { opacity: .6; cursor: progress; }
.auth-danger-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  border: 0;
  background: none;
  color: #c23a3a;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.auth-switch { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.auth-switch button {
  border: 0;
  background: none;
  color: var(--accent-pink);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.auth-note { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.auth-plan-row { margin: 0 0 14px; font-size: 14px; }
.auth-plan-row .auth-email { color: var(--muted); word-break: break-all; }
.auth-msg {
  margin: 12px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--muted);
}
.auth-msg.err { color: #c2410c; }

/* ===================== post card ===================== */
.post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px 24px 22px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.post-head { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background: #0a0a0a;
  flex: none;
  border: 2px solid var(--pink-soft);
}
.post-id { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 16px; }
/* bot名を出さなくなったので、ハンドル名が見出しの位置に来る */
.handle { font-weight: 700; color: var(--text); }

.post-menu {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
}
.post-menu:hover { color: var(--pink-dark); background: var(--pink-tint); }

.post-text {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.pt-name { font-weight: 400; }
.pt-name .name-val { font-weight: 700; }

.pt-type { margin: 4px 0 8px; }

/* ---- タイプのラベル ---- */
.tlabel {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
}
.tl-oshime { background: #e2f1f4; color: #0b6b78; }   /* 押し目買い = 青緑 */
.tl-trend  { background: #e6f4ea; color: #1c7a3e; }   /* トレンド追随 = 緑 */
.tl-mix    { background: #f1e8f9; color: #7a3ea8; }   /* 複合 = 紫 */

/* ---- 用語ヘルプ ---- */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  position: relative;
  cursor: help;
}
.help:hover, .help.open { border-color: var(--accent-pink); color: var(--accent-pink); }
.help-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  width: max-content;
  max-width: min(280px, 74vw);
  padding: 8px 11px;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  white-space: normal;
  display: none;
}
.help:hover .help-tip,
.help:focus .help-tip,
.help.open .help-tip { display: block; }

/* ---- 用語集 ---- */
.glossary { margin-bottom: 12px; font-size: 13px; }
.glossary summary {
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  list-style: none;
}
.glossary summary::-webkit-details-marker { display: none; }
.glossary summary::before { content: "▸ "; }
.glossary[open] summary::before { content: "▾ "; }
.glossary summary:hover { color: var(--accent-pink); }
.glossary dl {
  margin: 8px 0 0;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dt:first-child { margin-top: 0; }
.glossary dd { margin: 2px 0 0; color: var(--muted); line-height: 1.65; }
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.badge-new { background: #e11d63; color: #fff; }
.badge-cont { background: #eef2f5; color: var(--muted); }
.pt-levels { margin-top: 3px; color: #0b7285; font-size: 14px; }
.pt-meta { margin-top: 2px; color: var(--muted); font-size: 13px; }
.pt-reason { margin-top: 3px; }
.reason-list { margin: 3px 0 0; padding-left: 1.4em; }
.reason-list li { line-height: 1.7; }
.pt-caution { color: #c2410c; margin-top: 6px; }
.pt-warn { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; }

.post-chart {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px 10px;
  background: #fff;
  aspect-ratio: 10 / 5.9;
}
.post-chart canvas { width: 100% !important; height: 100% !important; }

.empty {
  text-align: center;
  color: var(--muted);
  padding: 54px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.feed-disclaimer { margin-top: 28px; font-size: 11px; color: var(--muted); text-align: center; }

/* ===================== responsive ===================== */
@media (max-width: 960px) {
  /* モバイルではサイドバーを「前面に重なる引き出し」にする。
     横バーに畳むと項目が増えた今は縦に長くなり、本文まで遠くなるため。
     既定は閉じた状態（JS 側で初期化時に強制する）。 */
  .sidebar {
    width: min(280px, 82vw);
    z-index: 40;
    box-shadow: 8px 0 32px rgba(0, 0, 0, .18);
  }
  /* 本文はサイドバーに押し出されない（重ねて表示する） */
  .feed, body.sidebar-collapsed .feed { margin-left: 0; }

  /* 開いている間だけ背景を敷き、外側タップで閉じられるようにする */
  body:not(.sidebar-collapsed) .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* 開閉ボタンは画面左端に固定する（PCのように枠線上には置けない） */
  .sidebar-toggle { left: 10px; }
  body:not(.sidebar-collapsed) .sidebar-toggle { left: calc(min(280px, 82vw) - 14px); }
  body:not(.sidebar-collapsed) .sidebar-toggle svg { transform: none; }
  body.sidebar-collapsed .sidebar-toggle svg { transform: rotate(180deg); }

  .sidebar-ad { display: none; }   /* 引き出し内に広告は出さない（フィード内は表示） */
  .feed { padding: 18px 14px 52px; }

  /* 市場名と検索欄を縦に積む（横に並べると検索欄が潰れる） */
  .feed-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .search-wrap { max-width: 100%; }
  /* 開閉ボタン（左上に固定・右端38px）と重なるので、フィードの先頭に
     来る要素だけその分だけ字下げする。案内文が表示されているときは
     それが先頭なので市場名側には付けない（付けると検索欄と左端がずれる）。 */
  .update-schedule { padding-left: 34px; }
  #update-schedule[hidden] + .feed-topbar #feed-market { padding-left: 34px; }
}

@media (max-width: 600px) {
  .feed > * { max-width: 100%; }
  /* カードは四辺とも枠線を出す。左右を消して画面端まで伸ばすと、
     白い面が切れているように見えてしまうため。 */
  .post { border-radius: 14px; padding: 16px; }
  .feed { padding-left: 10px; padding-right: 10px; }
  /* カード内の文字（左右10px＋カード余白16px＝26px）と行頭を揃える */
  .feed-topbar, .sample-banner, .results-line, .feed-disclaimer,
  .glossary, .update-schedule { padding-left: 16px; padding-right: 16px; }
  /* 案内文はフィードの最上段に来るので、左上に固定した開閉ボタン
     （右端38px）を避ける分だけ余計に字下げする。
     上の共通指定より後に置かないと詳細度が同じで打ち消される。 */
  .update-schedule { padding-left: 50px; }
  .post-text { font-size: 15px; }
  /* 横長のままだと縦が潰れて値動きが読めないので、ほぼ正方形にして
     枠の余白も詰め、描画領域そのものを広く取る */
  .post-chart {
    aspect-ratio: 1 / 1;
    padding: 10px 8px 8px;
    border-radius: 14px;
  }
  .app-header { padding: 0 12px; }
  .app-title { font-size: 15px; letter-spacing: .02em; }

  /* ヘッダーは横幅が足りず折り返して2行になりやすい。折り返しを禁止して詰める */
  .header-actions { gap: 10px; }
  .header-support { font-size: 11px; padding: 6px 2px; white-space: nowrap; }
  .header-login { padding: 5px 10px; font-size: 11px; white-space: nowrap; }

  /* モーダルは画面中央に置き、内容が長いときはカード内でスクロールさせる */
  .auth-modal { padding: 12px; align-items: center; }
  .auth-card {
    max-width: 100%;
    padding: 22px 18px 18px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 16px 16px 12px 12px;
  }
  .auth-card h2 { font-size: 18px; }

  .support-item { padding: 16px; }
  .benefits li { font-size: 13px; }
  .gate { padding: 24px 16px; }

  /* 狭い幅だと字が詰まって読みにくいので、少し小さくして字間を空ける */
  .gate h2 {
    font-size: 16px;
    letter-spacing: .04em;
    line-height: 1.6;
  }
  .gate p {
    font-size: 13px;
    letter-spacing: .03em;
    line-height: 1.9;
  }
}

/* 特に狭い端末（iPhone SE 等）ではヘッダーの副題を落として本題を優先する */
@media (max-width: 380px) {
  .app-title { font-size: 14px; }
  .header-support { font-size: 10px; }
}

/* ===================== お問い合わせモーダル ===================== */
.support-lead { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.support-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.support-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.support-item:hover { background: rgba(0, 0, 0, .04); }
.support-item:disabled { opacity: .6; cursor: default; }
.support-item-title { display: block; font-size: 14px; font-weight: 700; }
.support-item-desc { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }
.support-msg { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.support-msg.err { color: #c0392b; }
.support-field {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.support-field input,
.support-field textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  box-sizing: border-box;
}
.support-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.support-count { margin: -8px 0 14px; text-align: right; font-size: 11px; color: var(--muted); }
.support-submit {
  display: block;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--header-bg);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.support-submit:hover { background: var(--header-bg-dark); }
.support-submit:disabled { opacity: .6; cursor: default; }
.support-back {
  display: block;
  margin: 10px auto 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

/* ===================== モバイルの最終上書き =====================
   .support-* はこのファイルの後方で定義しているため、上のメディアクエリ内に
   書くと詳細度が同じで後勝ちに負ける。末尾にまとめて置く。 */
@media (max-width: 600px) {
  /* フォーム入力が16px未満だと iOS Safari が勝手にズームするので下限を16pxにする */
  .auth-field input,
  .auth-field textarea,
  .support-field input,
  .support-field textarea,
  #search-input { font-size: 16px; }
}

/* ===================== 法務ページ（規約・ポリシー・特商法）===================== */
/* app-header は position:fixed。法務ページには .app の padding-top が無いので
   ここで同じだけ本文を下げないと、見出しがヘッダーに潜り込む。 */
.legal-body { background: var(--bg); padding-top: var(--header-h); }
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 72px;
  line-height: 1.9;
  font-size: 14px;
}
.legal h1 {
  font-family: var(--font-head);
  font-size: 22px;
  margin: 0 0 6px;
}
.legal h2 {
  font-family: var(--font-head);
  font-size: 16px;
  margin: 32px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.legal p { margin: 10px 0; }
.legal ul, .legal ol { margin: 10px 0; padding-left: 24px; }
.legal li { margin: 6px 0; }
.legal a { color: var(--accent-pink); }

.legal-updated { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
.legal-note { color: var(--muted); font-size: 12px; }
.legal-back { margin-top: 40px; }

/* 投資情報サービスとしての位置づけは目立たせる */
.legal-warn {
  background: #fff8e1;
  border: 1px solid #ffe08a;
  border-radius: 10px;
  padding: 14px 16px;
  color: #7a5b00;
}

.legal-dl {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  margin: 16px 0;
  border-top: 1px solid var(--border);
}
.legal-dl dt, .legal-dl dd {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.legal-dl dt { font-weight: 700; background: var(--surface); }
/* 未設定の項目は公開前に気づけるようにする */
.legal-missing { color: #c0392b; font-weight: 700; }

.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.legal-table th, .legal-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.legal-table th { background: var(--surface); font-weight: 700; }

/* サービス本体のフッターに置くリンク */
.site-footer {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 12px;
  color: var(--muted);
}
.site-footer a { color: var(--muted); text-decoration: underline; }
.site-footer a:hover { color: var(--accent-pink); }

@media (max-width: 600px) {
  .legal { padding-left: 16px; padding-right: 16px; }
  .legal-dl { grid-template-columns: 1fr; }
  .legal-dl dt { border-bottom: 0; padding-bottom: 4px; }
  .legal-table { display: block; overflow-x: auto; }
}