/* マダミスDB — DESIGN2.md（monopo saigon / Liquid iridescence behind editorial silence）準拠の
   切り替え用レイヤー。styles.css の後に読み込み、html[data-design="editorial"] のときだけ効く。

   styles.css がほぼ完全にトークン化されているため、大半はトークンの差し替えで足りる。
   トークンで表現できないもの（字の太さ、枠線の太さ、装飾の形）だけを個別に上書きする。

   DESIGN2 の要点:
   - モノクロ厳守。彩度を持つ面はヒーローのイリデッセントなグラデーションだけ（メディア扱い）
   - 角丸は 0px か 75px のピルの二択。あいだの半端な丸みは作らない
   - 影・立体は使わない。1px のヘアラインと白黒の反転だけで階層を作る
   - 45px を超える文字に 600 以上のウェイトを当てない（300 で囁くか 400 で語る）
   - 動きは cubic-bezier(0.19, 1, 0.22, 1) で 0.8s。滑るように動かし、パチンと切り替えない */

html[data-design="editorial"] {
  /* ---- Colors（DESIGN2.md Tokens — Colors） ---- */
  /* 全面を液体の上に置くので、地は Obsidian 側に倒す。
     styles.css は「ink と pure-white が反転ペア」という形で書かれているので、
     その2つを入れ替えるだけで、塗りのボタン・押下状態・バッジが揃って反転する。 */
  --ground: #0a0a0a;               /* monopo.vn の地色（実測） */
  --color-basalt-canvas: rgba(255, 255, 255, 0.08); /* hover などの薄い面 */
  --color-ash-white: transparent;  /* 面の塗りをやめ、ヘアラインだけで区切る */
  --color-abyssal-ink: #ffffff;    /* ＝この面での ink */
  --color-pure-white: var(--ground); /* ink の反転先 */

  /* DESIGN2 には主操作の色がない（"No distinct primary action color was observed"）。
     オレンジの置き場所は白（＝この面での ink）に倒し、塗りのピルは反転面として扱う。 */
  --color-digital-orange: #ffffff;
  --color-pixel-glare: rgba(255, 255, 255, 0.18);
  --color-cyber-violet: #ffffff;

  --ink: #ffffff;
  /* 弱い文字の濃度。DESIGN2 の見本より一段ずつ濃い。
     見本は白地の記事ページでの値で、そのまま暗い面に移すと
     補足・メタ情報・プレースホルダが背景に沈んで読めなくなる。
     階層は保ったまま、下2段を上げる。 */
  --ink-dim: rgba(255, 255, 255, 0.76);
  --ink-faint: rgba(255, 255, 255, 0.58);
  /* DESIGN2 の暗い面での境界は rgba(255,255,255,0.3)。
     入力欄の枠がそれと分からない濃さだったので少しだけ上げる。 */
  --hairline: rgba(255, 255, 255, 0.34);

  /* ---- Typography ----
     Roobert は入手できないため DESIGN2.md の指定どおり Inter で代替する。
     ただし Inter は和文グリフを持たないので、既存の Zen Kaku Gothic New を後段に置く。
     日本語は Zen Kaku、数字とラテンは Inter が受ける。styles.css が DESIGN.md に対して
     同じ判断（Bebas Neue に和文を渡さない）をしているのと同じ理由。 */
  --font-head: "Inter", "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-num: "Inter", "Zen Kaku Gothic New", system-ui, sans-serif;
  --font-sans: "Inter", "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --track-head: 0;                 /* 見出しのレタースペーシングは normal */

  /* ---- Shapes ---- 0px かフルピルの二択 */
  --r-card: 0px;
  --r-input: 0px;
  --r-field: 0px;
  --r-btn: 75px;

  /* ---- Layout ---- */
  --page-max: 1078px;
  --section-gap: 46px;
  --card-pad: 34px;
  --gap: 14px;

  /* この design だけで使う値 */
  --ease-glide: cubic-bezier(0.19, 1, 0.22, 1);
  /* 往復し続ける背景用。折り返しが柔らかく、止まる時間が無い */
  --ease-loop: cubic-bezier(0.45, 0, 0.55, 1);
  --gradient-iridescent: linear-gradient(90deg, rgb(160, 224, 171), rgb(255, 172, 46) 50%, rgb(165, 45, 37));
}

/* ---------- 面の区切り ----------
   Ash White が白に倒れてカードの塗りが消えるので、1px のヘアラインで受け直す。
   DESIGN2 は「影を使わず、色の反転と 1px の境界だけで面を分ける」。 */
html[data-design="editorial"] .gather,
html[data-design="editorial"] .finder,
html[data-design="editorial"] .panel {
  border: 1px solid var(--hairline);
  background: var(--color-ash-white);
}

/* ---------- 作品カード ----------
   【意図的にDESIGN2.mdから外している点】
   DESIGN2 は "No card chrome — the card is content, not a container" とし、
   角丸も「0px か 75px のピルの二択」と決めている。ここはその両方に反する。
   ユーザーの指示で、トレーディングカードのように
   「枠・面・内側の余白を持つ一枚のカード」として扱うことにした。
   一覧が作品の陳列であって記事の並びではない、という判断。 */
html[data-design="editorial"] .card {
  border: 1px solid var(--hairline);
  border-radius: 18px;            /* 0でも75pxピルでもない中間 */
  background: rgba(255, 255, 255, 0.05);  /* 背後の液体が薄く透ける程度 */
  padding: 12px;                  /* 画像とカードの縁のあいだ */
}

/* 高さを揃える仕組みは styles.css 側（両デザイン共通）。
   ここはカードが内側に余白を持つぶん、本文側の余白を削るだけ（二重に空けない）。 */
html[data-design="editorial"] .card-body {
  padding: 14px 8px 4px;
}

/* 画像もカードの角に合わせて丸める。カードより小さい半径にすると、
   内側に収まっているように見える（同じ半径だと縁に貼り付いて見える）。 */
html[data-design="editorial"] .shot-link {
  border-radius: 10px;
  overflow: hidden;
}

/* ---------- タイポグラフィ ----------
   45px を超えるところに 900 が残っていると DESIGN2 の禁則に触れる。
   ディスプレイは 300 で囁かせ、見出しは 400 に落とす。 */
html[data-design="editorial"] .wordmark {
  font-weight: 300;
  /* 帯（1078px から左右の余白を引いた幅）に収まるところまで。
     溢れると overflow:hidden で切れてしまう。 */
  /* 帯の切り取りをやめたので、DESIGN2 のディスプレイサイズまで戻す。
     ページの最大幅(1078px)に収まるところが上限。 */
  font-size: clamp(40px, 9.4vw, 118px);
  line-height: 0.9;
  overflow-wrap: anywhere;
}
html[data-design="editorial"] .purpose {
  font-size: 18px;
  color: var(--ink-dim);
}
html[data-design="editorial"] .seats-q {
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 39px);
  line-height: 1.19;
}
/* 45px以下の見出しは 500 で持たせる。
   DESIGN2 の禁則は「45pxを《超える》文字に600以上を当てない」であって、
   小さい見出しまで細くしろとは言っていない。作品名のような
   拾い読みする文字を 400 のままにすると、本文と区別がつかない。 */
html[data-design="editorial"] .work-title { font-weight: 400; line-height: 1.1; }
html[data-design="editorial"] .gather-event { font-weight: 500; font-size: 18px; }
html[data-design="editorial"] .card-title { font-weight: 500; font-size: 18px; }
html[data-design="editorial"] .sec-title { font-weight: 500; }

/* 小さなラベルは全角大文字級の扱い。DESIGN2 は 11px だが、
   和文が混ざるとその大きさでは字形がつぶれるので 12px で受ける。 */
html[data-design="editorial"] .gather-label,
html[data-design="editorial"] .row-label {
  font-weight: 500;
  font-size: 12px;
  line-height: 1.36;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* ---------- ボタン ----------
   Ghost Pill Button: 透明地・1px・75px ピル・上下 11px / 左右 33px。 */
html[data-design="editorial"] .btn,
html[data-design="editorial"] .gather-form input,
html[data-design="editorial"] .seat-row button,
html[data-design="editorial"] .pills button {
  border-width: 1px;
  transition: border-color 0.3s var(--ease-glide), background 0.3s var(--ease-glide), color 0.3s var(--ease-glide);
}
html[data-design="editorial"] .btn {
  padding: 11px 33px;
  font-weight: 400;
  font-size: 16px;
}
html[data-design="editorial"] .btn-sm { padding: 8px 22px; font-size: 12px; }

/* 塗りのピルは Obsidian の反転面として扱う（CTA 色を発明しない）。 */
html[data-design="editorial"] .btn-main {
  background: var(--color-abyssal-ink);
  border-color: var(--color-abyssal-ink);
  color: var(--color-pure-white);
}
html[data-design="editorial"] .btn-main:hover {
  background: transparent;
  color: var(--color-abyssal-ink);
}

/* 人数ボタンは Bebas の 30px から Inter の 29px weight 400 へ。 */
html[data-design="editorial"] .seat-row button {
  font-family: var(--font-num);
  font-size: 29px;
  font-weight: 400;
}

/* ---------- ヒーローの背景 ----------
   DESIGN2.md「Iridescent Hero Backdrop」: 見出しの《背後》に敷く流体のテクスチャで、
   「never as a flat gradient」「exists only behind text, never as UI fill」。
   小さな平らな矩形を見出しの下に置くのは、位置も質感も仕様から外れていた。
   masthead-row を帯にして、その中を漂わせる。

   【意図的にDESIGN2.mdから外している点】
   色は仕様のイリデッセント（sage green → amber → oxblood）ではなく
   茶と灰に倒している。作品DBの地味な内容に対して原色の虹色が浮くため。
   モノクロ厳守・彩度はここだけ・UIには色を使わない、という規律のほうは守る。 */
html[data-design="editorial"] {
  --hero-brown: #8a6240;
  --hero-umber: #4a3526;
  --hero-ash: #9a9a9a;           /* Ash Mist。灰はUIと同じ系列から取る */
  --hero-mist: #c4bdb3;
}

html[data-design="editorial"] body {
  background: var(--ground);
  color: var(--ink);
}

/* ---- 液体の背景 ----
   画面に固定して全ページの背後に敷く。スクロールしても同じ光の上を進み続ける
   ＝「editorial gallery floating on a river of liquid light」。
   index の .hero-mark（caldera のピクセル図形）に間借りしていたが、
   作品ページにはその要素が無く背景が出なかったので、専用要素に分けた。 */
.liquid { display: none; }

html[data-design="editorial"] .liquid {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;          /* body の地色より手前、ページ本文より奥 */
  overflow: hidden;
  pointer-events: none;
}

/* caldera のピクセル図形はこの世界では出さない（色を持ち込まない） */
html[data-design="editorial"] .hero-mark { display: none; }

/* WebGL版（liquid-bg.js）。起動できたときだけ .is-webgl が付く。
   canvas は実解像度より小さく描いて引き伸ばしている（背景なので粗さは出ない）。 */
.liquid canvas { display: none; }
html[data-design="editorial"] .liquid canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* WebGLが動いたら、CSSだけの簡易版は引っ込める */
html[data-design="editorial"] .liquid.is-webgl span { display: none; }

html[data-design="editorial"] .liquid span {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* 輪郭を完全に溶かして「油膜」にする。境目が見えると図形に戻ってしまう。 */
  filter: blur(90px);
  will-change: transform;
}

/* 大きさと位置をばらし、周期も揃えない。
   同じ周期だと全体が同時に膨らんで「呼吸」に見え、流体にならない。

   【カーブについて】DESIGN2 の ease-glide = cubic-bezier(0.19,1,0.22,1) は
   《一度きりの遷移》用のカーブで、41秒のうち最初の12秒で移動の9割を終えて
   残り29秒はほぼ停止する。無限ループに当てると止まって見えるので、
   ここだけは緩やかな ease-in-out にして常に動かす。
   （ボタンやリンクの遷移は今まで通り ease-glide のまま） */
html[data-design="editorial"] .liquid span:nth-child(1) {
  left: -12%; top: -20%; width: 62%; height: 110%;
  background: radial-gradient(circle at 50% 50%, var(--hero-brown), transparent 68%);
  animation: hero-drift-a 26s var(--ease-loop) infinite alternate;
}
html[data-design="editorial"] .liquid span:nth-child(2) {
  left: 34%; top: -16%; width: 56%; height: 104%;
  background: radial-gradient(circle at 50% 50%, var(--hero-ash), transparent 66%);
  opacity: 0.62;
  animation: hero-drift-b 37s var(--ease-loop) infinite alternate;
}
html[data-design="editorial"] .liquid span:nth-child(3) {
  left: 58%; top: 6%; width: 50%; height: 96%;
  background: radial-gradient(circle at 50% 50%, var(--hero-umber), transparent 70%);
  animation: hero-drift-c 21s var(--ease-loop) infinite alternate;
}
/* いちばん薄い灰。手前を横切らせて、奥行きを1枚ぶん足す。 */
html[data-design="editorial"] .liquid span:nth-child(4) {
  left: 8%; top: 28%; width: 46%; height: 80%;
  background: radial-gradient(circle at 50% 50%, var(--hero-mist), transparent 64%);
  opacity: 0.36;
  animation: hero-drift-d 44s var(--ease-loop) infinite alternate;
}

/* 粒状のノイズ。monopo.vn は地の全面に細かいグレインが乗っていて、
   これが無いとグラデーションがCSSらしい平滑さに見えてしまう。 */
html[data-design="editorial"] .liquid::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.13;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 順序ディザ（Bayer 8x8）。
   暗い面の緩いグラデーションは階調が足りずバンディング（縞）が出る。
   規則的なしきい値パターンを薄く重ねると縞が視覚的に溶け、
   同時に「グラフィック」としての質感が出る。
   ランダムなグレインと違い、パターンが規則的なのでこちらが効く。
   image-rendering: pixelated で、8pxのまま補間させずにドットを保つ。 */
html[data-design="editorial"] .liquid::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAAU0lEQVR42gFIALf/AACBIKEIiSiqAMJA4mHKSOppADCyEJE4uhiZAPJx0lD6edpZAhocWl4KDEpMAM5M7m3GROZlADy+HJ00thSVAsO/wsDCv8LAFeMfVnK36RAAAAAASUVORK5CYII=");
  background-repeat: repeat;
  background-size: 8px 8px;
  image-rendering: pixelated;
}

/* DESIGN2 のヒーローは全画面（"The headline is the hero"）だが、
   それはスタジオサイトの作法。ここは検索が主役なので、
   画面ひとつぶん使うと人数ボタンが折り返しの外に落ちる。
   見出しの存在感は残しつつ、検索が見える高さまで詰める。 */
html[data-design="editorial"] .masthead-row {
  position: relative;
  align-items: flex-end;
  /* 帯の高さ。下揃えなので、中身（タイトル＋説明文＝実測146px）より
     大きくしたぶんがそのまま頭上の空白になる。
     42vh/360px では182pxが空き、「余白」ではなく「穴」に見えていた。
     帯としての存在感は残しつつ、空きを80px程度に収める。 */
  min-height: min(26vh, 210px);
  padding: 0 0 32px;
}

/* 動きはDESIGN2の「patient」に合わせ、数十秒かけて滑らせる。
   位置ではなく transform だけを動かす（"Transforms dominate over positional animation"）。 */
@keyframes hero-drift-a {
  from { transform: translate3d(-6%, -4%, 0) scale(0.95); }
  to   { transform: translate3d(38%, 16%, 0) scale(1.35); }
}
@keyframes hero-drift-b {
  from { transform: translate3d(8%, 10%, 0) scale(1.2); }
  to   { transform: translate3d(-40%, -18%, 0) scale(0.8); }
}
@keyframes hero-drift-c {
  from { transform: translate3d(6%, -8%, 0) scale(0.85); }
  to   { transform: translate3d(-32%, 24%, 0) scale(1.4); }
}
@keyframes hero-drift-d {
  from { transform: translate3d(-10%, 6%, 0) scale(1.25); }
  to   { transform: translate3d(46%, -20%, 0) scale(0.75); }
}

/* 見出しは暗い面の上に乗るので白へ。
   DESIGN2:「Roobert 225px weight 400, #ffffff over iridescent dark media」。 */
html[data-design="editorial"] .brand { position: relative; z-index: 1; }
html[data-design="editorial"] .masthead-row .wordmark { color: #ffffff; }
/* ここだけは面を敷かず液体の上に直に乗るので、ページ内でいちばん濃くする。
   背後が明るく流れてくる瞬間があり、弱めるとその瞬間に読めなくなる。 */
html[data-design="editorial"] .masthead-row .purpose { color: rgba(255, 255, 255, 0.88); }

/* ---------- 動き ----------
   0.12s の ease をやめ、滑走に置き換える。
   ただし 0.8s は《一度きりの遷移》の尺で、押した・選んだの返事には長すぎた。
   人数ボタンを続けて押すと、どれが選ばれているのか目で追えなくなる。
   カーブ（滑り出しの柔らかさ）は DESIGN2 のまま、尺だけ詰める。 */
html[data-design="editorial"] .seat-row button,
html[data-design="editorial"] .pills button,
html[data-design="editorial"] .reset,
html[data-design="editorial"] a,
html[data-design="editorial"] .linklike {
  transition: background 0.3s var(--ease-glide), color 0.3s var(--ease-glide), border-color 0.3s var(--ease-glide);
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="editorial"] * { transition: none !important; }
  /* 背景の漂いも止める。止めても油膜の重なりは残るので、絵としては成立する。 */
  html[data-design="editorial"] .liquid span { animation: none !important; }
}

@media (max-width: 720px) {
  /* デスクトップ側より高くならないように。ここだけ大きいと逆転する */
  html[data-design="editorial"] .masthead-row { min-height: min(28vh, 200px); padding-bottom: 24px; }
  /* 画面が小さいぶんぼかしも詰める。同じ半径だと全部が混ざって単色になる */
  html[data-design="editorial"] .liquid span { filter: blur(56px); }
}

/* ---------- 暗い面に置き直すもの ----------
   トークンの反転で大半は追従するが、明るい地を前提に色を直書きしている
   ところだけは個別に置き直す。 */

/* 投票バー。反転で白い面になってしまうので、DESIGN2 のクッキーバナーと
   同じ半透明スレート（rgba(55,55,55,0.78)）に合わせる。 */
html[data-design="editorial"] .pollbar {
  background: rgba(55, 55, 55, 0.78);
  border: 1px solid var(--hairline);
  color: #ffffff;
  backdrop-filter: blur(14px);
}
html[data-design="editorial"] .pollbar .linklike,
html[data-design="editorial"] .pollbar-q,
html[data-design="editorial"] .pollbar-hours { color: #ffffff; }
html[data-design="editorial"] .pollbar .linklike:hover { color: rgba(255, 255, 255, 0.7); }
html[data-design="editorial"] .pollbar .btn-main {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--ground);
}
html[data-design="editorial"] .pollbar .btn-main:hover {
  background: transparent;
  color: #ffffff;
}
/* ---------- ドロップダウンの一覧 ----------
   閉じているセレクトとは別に、開いたときの一覧にも色指定が要る。
   この面のセレクトは background: transparent なので、一覧はブラウザ既定の
   白地で描かれ、そこに --ink（＝白）の文字が乗って読めなくなる。
   フォーカスを当てたときだけ見えるのはこのため。
   投票バーだけ個別に黒文字で当てていたが、作品の編集フォームで同じ問題が
   再発したので、この面のセレクト全体に一度で効かせる。 */
html[data-design="editorial"] select option,
html[data-design="editorial"] select optgroup {
  background-color: #1c1916;
  color: #ffffff;
}

/* サムネイルの下地。画像が透けると作品の絵が濁る。 */
html[data-design="editorial"] .shot { background: rgba(255, 255, 255, 0.06); }

/* 面を持たず、液体の上に直に乗る文字。
   背後が明るく流れてくると消えるので、ここでは薄い側の濃度を使わない。 */
html[data-design="editorial"] .design-switch-label,
html[data-design="editorial"] .colophon { color: var(--ink-dim); }

/* 日程表。最有力の行は塗りで示すが、白文字が乗るので薄い面にとどめる。 */
html[data-design="editorial"] .sched th,
html[data-design="editorial"] .sched td { border-color: var(--hairline); }

/* 表だけは地を敷く。
   この面は「面の塗りをやめてヘアラインだけで区切る」方針で、他はそれで読めるが、
   表は 8px 間隔の記号が7列ならぶので、背後の液体が流れるたびに
   ◯と×の見え方が入れ替わってしまう。ここだけ静止した地の上に置く。
   （カードや検索の面は方針どおり透明のまま）

   左右に貼りつく列（候補日・◯の数）は、下を通る列を隠しきる必要があるので
   半透明にできない。表の地と貼りつく列は同じ不透明色で揃える。 */
html[data-design="editorial"] .sched-scroll { background: #14100e; }
html[data-design="editorial"] .sched th:first-child,
html[data-design="editorial"] .sched .cnt { background: #14100e; }

/* 見出し行は貼りつく（position: sticky）ので、透けると
   スクロールしてきた候補日と重なって二重に見える。ここだけは完全に塗る。
   共通CSSは 900 を指定しているが、この面の見出しフォント（Inter）は
   300/400/500 しか読み込んでいない。ラテンのニックネームだけが
   ブラウザの合成ボールドになって輪郭がつぶれるので、実在する太さに直す。 */
html[data-design="editorial"] .sched thead th {
  background: #14100e;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
}

/* ---- 出欠の記号 ----
   表の中身そのもの。共通CSSは太さと濃さの差だけで3種を分けているが、
   暗い面だと ◯ も △ も × も「同じ大きさの灰色の粒」に見えてしまい、
   どの日が埋まっているのかを目で追えない（ここが読みにくさの主因）。
   モノクロのまま、大きさ・太さ・濃さの3つを揃って動かして差を作る。 */
html[data-design="editorial"] .sched td { font-size: 16px; line-height: 1.2; }
html[data-design="editorial"] .sched .m-yes   { color: #ffffff; font-weight: 700; font-size: 18px; }
html[data-design="editorial"] .sched .m-maybe { color: rgba(255, 255, 255, 0.72); font-weight: 400; }
html[data-design="editorial"] .sched .m-no    { color: rgba(255, 255, 255, 0.52); font-weight: 400; }
/* 未回答は「まだ答えていない」。×（答えた上での不参加）より一段引く。 */
html[data-design="editorial"] .sched .m-none  { color: rgba(255, 255, 255, 0.3); }

/* 候補日と◯の数。拾い読みする列なので本文と同じ濃さで置く。 */
html[data-design="editorial"] .sched tbody th { font-size: 15px; }
html[data-design="editorial"] .sched .cnt { color: var(--ink); font-weight: 500; font-size: 15px; }
html[data-design="editorial"] .sched thead th.cnt { font-weight: 500; }

/* 凡例は記号の意味を引くところ。薄すぎると引けない。 */
html[data-design="editorial"] .sched-legend { color: var(--ink-dim); }

/* 過ぎた日。畳んであるものを開いて見ているので、
   「終わった」と分かればよく、読めなくなるところまで落とす必要はない。 */
html[data-design="editorial"] .gather-table.show-past tr.is-past { opacity: 0.6; }

/* ---- 行の塗り分け ----
   最有力と「あと1人」を、行として一目で拾えるところまで上げる。
   白を18%足す程度では、暗い面のうえでは塗ったことに気づけなかった。
   2段の差を付けて、濃いほうが最有力だと分かるようにする。

   【半透明で書かないこと】
   左右に貼りつく列は、下を通る列を隠しきる必要がある。
   行の色を rgba(255,255,255,…) で書くと、貼りついた列ごしに
   後ろの記号が透けて、候補日に◯が重なって見える。
   地（#14100e）に白を重ねた結果の色を、不透明のまま直に置く。 */
html[data-design="editorial"] .sched tr.is-best th,
html[data-design="editorial"] .sched tr.is-best td,
html[data-design="editorial"] .sched tr.is-best:hover th,
html[data-design="editorial"] .sched tr.is-best:hover td {
  background: #4c4948;   /* 地 + 白24% */
}

/* 「あと1人」の行。共通CSSは地色を混ぜて薄い黄を作るが、
   この面の地色は暗色なので、混ぜると逆に沈む。直に指定する。 */
html[data-design="editorial"] .sched tr.is-near th,
html[data-design="editorial"] .sched tr.is-near td,
html[data-design="editorial"] .sched tr.is-near:hover th,
html[data-design="editorial"] .sched tr.is-near:hover td {
  background: #2e2a29;   /* 地 + 白11% */
}

/* hover も同じ理由で不透明にする */
html[data-design="editorial"] .sched tbody tr:hover th,
html[data-design="editorial"] .sched tbody tr:hover td {
  background: #272321;   /* 地 + 白8% */
}

/* 会話ログの面も、液体が透ける薄い面に。 */
html[data-design="editorial"] .ses-log { background: rgba(255, 255, 255, 0.06); }


/* ---------- デザイン切り替えスイッチ ----------
   スイッチ自体はトークンで書く。どちらのデザインでもその世界の見た目になる。 */
.design-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
}
.design-switch-label {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}
.design-switch-options {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
}
.design-switch button {
  padding: 5px 14px;
  border: 0;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}
.design-switch button:hover { color: var(--ink); }
.design-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--color-pure-white);
}
.design-switch button:focus-visible {
  outline: 2px solid var(--color-digital-orange);
  outline-offset: 2px;
}
html[data-design="editorial"] .design-switch button { font-weight: 400; }

@media (max-width: 560px) {
  .design-switch-label { display: none; }
}