/**
 * IPO申込カレンダー
 *
 * 引き算型UI。スマホで最初に目に入るのは
 * 「締切」「申し込める証券会社」「必要資金」の3つだけ。
 *
 * ■ 文字色をこちらで決めない（2026-08-09 の不具合対応）
 *   最初の版は prefers-color-scheme: dark で文字色を明るくしていた。
 *   だが閲覧者の端末がダークモードでも、テーマ（SWELL）の背景は白のまま描画される。
 *   結果、白地に薄いグレーの文字という読めない状態になった。
 *
 *   プラグインは「どのテーマに載るか分からない」ので、本文の色は決め打ちせず
 *   テーマから継承する（color: inherit）。控えめに見せたい文字は
 *   色を指定するのではなく opacity を下げる。罫線や下地は
 *   明背景でも暗背景でも成立する中間色（rgba のグレー）を使う。
 *
 * 未保有のハイライトは色の面積を増やさず、左の縦線と小さなラベルで示す。
 * 赤や点滅など、焦らせる表現は使わない。
 */

.ipo-page {
  /* 明背景・暗背景のどちらに載っても破綻しない中間色だけを持つ */
  --ipo-line:     rgba(128, 128, 128, .28);
  --ipo-bg-soft:  rgba(128, 128, 128, .09);
  --ipo-accent:   #1d4ed8;
  --ipo-mark:     #b45309;   /* 未保有の印。警告色ではなく落ち着いた琥珀 */

  max-width: 640px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
  color: inherit;            /* ← テーマの本文色をそのまま使う */
  line-height: 1.7;
}

/* 控えめな文字は「色」ではなく「濃度」で表す。テーマが明でも暗でも成立する */
.ipo-note,
.ipo-label,
.ipo-group,
.ipo-deadline__date,
.ipo-capital__calc,
.ipo-broker__state,
.ipo-row__dates,
.ipo-row__counts,
.ipo-disclosure,
.ipo-table th { opacity: .68; }

/* ---------- 見出し ---------- */

.ipo-head { margin-bottom: 2rem; }
.ipo-title { font-size: 1.5rem; line-height: 1.4; margin: .25rem 0 .5rem; }
.ipo-sub { margin: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.ipo-chip {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid var(--ipo-line);
  border-radius: 999px;
  font-size: .8rem;
  opacity: .8;
}
.ipo-chip--muted { opacity: .55; }

.ipo-status {
  display: inline-block;
  margin: 0;
  padding: .15rem .6rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 700;
  background: var(--ipo-bg-soft);
}
/* 受付中だけは塗る。白文字を載せるので背景色も固定する */
.ipo-status--bb_open,
.ipo-status--applying { background: var(--ipo-accent); color: #fff; }
.ipo-status--closed { opacity: .55; }

/* ---------- ブロック ---------- */

.ipo-block { margin: 0 0 2.25rem; }
.ipo-label {
  font-size: .85rem;
  font-weight: 700;
  margin: 0 0 .4rem;
  letter-spacing: .04em;
}
.ipo-note { font-size: .8rem; }

/* ---------- 締切 ---------- */

.ipo-countdown { margin: 0; }
.ipo-countdown__value {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ipo-countdown.is-soon .ipo-countdown__value { color: var(--ipo-mark); }
.ipo-countdown.is-over .ipo-countdown__value { opacity: .5; }
.ipo-deadline__date { margin: .1rem 0 0; font-size: .85rem; }

/* ---------- 証券会社 ---------- */

.ipo-group { font-size: .8rem; font-weight: 700; margin: 1rem 0 .3rem; }

.ipo-broker-list { list-style: none; margin: 0; padding: 0; }

.ipo-broker {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .25rem .5rem .75rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--ipo-line);
}

.ipo-broker__mark {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
  opacity: .35;
  flex: none;
}
.ipo-broker__name { font-weight: 600; }
a.ipo-broker__name { color: var(--ipo-accent); }

.ipo-broker__state { margin-left: auto; font-size: .75rem; }

/* 未保有：左の線と印だけで区別する。背景を塗らない */
.ipo-broker.is-unheld { border-left-color: var(--ipo-mark); }
.ipo-broker.is-unheld .ipo-broker__mark { background: var(--ipo-mark); opacity: 1; }
.ipo-broker.is-unheld .ipo-broker__state { color: var(--ipo-mark); font-weight: 700; opacity: 1; }

.ipo-broker.is-held { opacity: .6; }

.ipo-delegated { margin: .25rem 0 0; }
.ipo-broker-edit { margin: .75rem 0 0; }

/* ---------- 必要資金 ---------- */

.ipo-capital__value {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ipo-capital__calc { margin: .1rem 0 0; font-size: .85rem; }

/* ---------- 詳細 ---------- */

.ipo-details { border-top: 1px solid var(--ipo-line); padding-top: 1rem; }
.ipo-details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ipo-accent);
  list-style: none;
}
.ipo-details > summary::after { content: ' ▾'; }
.ipo-details[open] > summary::after { content: ' ▴'; }

.ipo-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.ipo-table th, .ipo-table td {
  text-align: left; padding: .5rem .25rem;
  border-bottom: 1px solid var(--ipo-line);
  vertical-align: top;
}
.ipo-table th { width: 40%; font-weight: 600; }

.ipo-source { font-size: .8rem; margin: .5rem 0 0; }
.ipo-disclosure {
  margin: 2rem 0 0;
  font-size: .75rem;
  border-top: 1px solid var(--ipo-line);
  padding-top: .75rem;
}

/* ---------- 設定 ---------- */

.ipo-broker-setup {
  background: var(--ipo-bg-soft);
  border: 1px solid var(--ipo-line);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin: 0 0 1.5rem;
  font-size: .9rem;
}
.ipo-broker-setup p { margin: 0 0 .6rem; }

.ipo-btn {
  background: var(--ipo-accent);
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: .5rem 1rem;
  font-size: .9rem;
  cursor: pointer;
}
.ipo-link-btn {
  background: none; border: 0; padding: 0;
  color: var(--ipo-accent);
  font-size: .85rem;
  cursor: pointer;
  text-decoration: underline;
}

/* モーダルはテーマの外に浮くので、ここだけは色を自前で完結させる */
.ipo-modal {
  border: 0; border-radius: 10px;
  padding: 1.25rem;
  max-width: 420px; width: 92%;
  background: #ffffff;
  color: #1a1a1a;
}
.ipo-modal::backdrop { background: rgba(0, 0, 0, .45); }
.ipo-modal h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.ipo-modal .ipo-note { opacity: .7; }
.ipo-modal__list { max-height: 45vh; overflow-y: auto; margin: .75rem 0; }
.ipo-modal menu {
  display: flex; gap: 1rem; align-items: center;
  justify-content: flex-end; margin: 0; padding: 0;
}

.ipo-check { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }

/* ---------- 一覧 ---------- */

.ipo-archive { max-width: 760px; }
.ipo-archive__head h1 { margin-bottom: .25rem; }
.ipo-archive__section { margin: 2rem 0; }
.ipo-archive__section h2 { font-size: 1.1rem; margin-bottom: .25rem; }
.ipo-archive__section--closed { opacity: .75; }

.ipo-rows { list-style: none; margin: .75rem 0 0; padding: 0; }
.ipo-row { border-bottom: 1px solid var(--ipo-line); }
.ipo-row__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .75rem;
  padding: .75rem .25rem;
  text-decoration: none;
  color: inherit;
}
.ipo-row__status { grid-row: span 3; align-self: start; }
.ipo-row__name { font-weight: 600; }
.ipo-row__dates, .ipo-row__counts { font-size: .8rem; }
.ipo-row__counts { display: flex; gap: .75rem; }
[data-ipo-row-count].is-none { color: var(--ipo-mark); font-weight: 700; opacity: 1; }

.ipo-backlink { margin: 2rem 0 0; font-size: .9rem; }

/* ---------- 記事本文のショートコード ---------- */
/* .ipo-page の外（通常の投稿）でも使うので、変数に依存しない指定にする */

.ipo-inline-broker { font-weight: 600; }
a.ipo-inline-broker { color: #1d4ed8; }

p.ipo-disclosure {
  margin-top: 2rem;
  font-size: .8rem;
  opacity: .7;
  border-top: 1px solid rgba(128, 128, 128, .28);
  padding-top: .75rem;
}

@media (max-width: 480px) {
  .ipo-title { font-size: 1.3rem; }
  .ipo-countdown__value { font-size: 1.7rem; }
}