/*
 * 今日のカードと年間の見た目（MOB-16 Step4・2026-10-11〜）
 * 📌 Base.css は触らずにこちらへ足す＝Base.css は月の都道府県ページ（/moon/state/code）も読んでいる共有物。
 * 📌 規則は見本＝カード v7.81（docs/tasks/MOB-16/html/MOB-16_today-card-v7_2026-10-08.html）の `.p8` を `#today_card` に置き換えて移した。
 *    使っていない見本の規則（実験の残り）は持ち込まない。コメントの v7.xx は見本の版（なぜその値かは見本の注釈と step02 の赤入れ）。
 * 🔴 新しい名前だけを使う（R1）＝Base.css の `#hinode_hinoiri_time_wrap div`（子孫の div 全部に float）・`.month_row td` 等に巻き込まれない。
 * 🔴 `#inline_ad_block` には規則を書かない（R8＝広告なしの剥がし `#inline_ad_block{display:none}` に勝ってしまう）。
 */

/* ===== 今日のカード ===== */
/* R3＝PC の2列は画面幅ではなくカードの器の幅で決める（本文の幅は 768〜1245px の間で 373〜850px と動く） */
.tc_q {
  container: tcard / inline-size;
  margin: 0 0 16px;
}

#today_card {
  border: 1px solid #dde3ea;
  border-radius: 6px;
  padding: 10px 12px 8px;
  background: #f6f8fb;
  color: #1c2028;
  font-size: 14px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  --ink: #1c2028; --mute: #5a6270; --line: #c9d2dc; --dot: #9fb3c8; --rise: #d8701a; --set: #2c2a80; --sun: #f6b042; --rule: #dde3ea;
}
#today_card .mono { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", "Noto Sans Mono CJK JP", monospace; letter-spacing: 0; }
#today_card .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#today_card .hd .d { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; }
#today_card .hd .d .hm, #today_card .hd .d .s { font-size: inherit; font-weight: inherit; color: inherit; }
/* 地点の札＝ただの文字（2026-10-11 ユーザー判断＝判断21 のリンクをやめた。トップの地図に ?lat=&lng= の受け手が無く、作るとトップに入口が増えるため） */
#today_card .hd .pl { text-align: right; font-size: 11px; color: var(--mute); line-height: 1.4; display: inline-flex; align-items: center; gap: 3px; }
/* 決め（4-3b）＝札は折り返さない（white-space）。カードが狭い時（実機の 390px 幅でカード 340px）は日付＋時計と札が1行に入らない＝
   成り行きで折れると「JS が時計を入れた瞬間に高さが変わる」（CLS）。→ 狭いカードでは最初から2段（下の @container）。 */
#today_card .hd .pl { white-space: nowrap; }
#today_card .hd .pl .pi { width: 12px; height: 12px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* AD-08（2026-10-13）＝幅いっぱいに伸ばすのはうちの絵（data-g＝弧・地球・空）だけ。箱の中の svg 全部に当てると、AdSense が本文に差し込むリンクのアイコン
   （width="20px" を属性で持つだけ・CSS の width は持たない）まで箱いっぱいに伸びてページを壊した（スマホの本番・ユーザーが発見）。Google の物は隠さない・触らない */
#today_card svg[data-g] { width: 100%; height: auto; display: block; margin: 6px 0 0; overflow: visible; }
#today_card svg text { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", system-ui, sans-serif; }

/* 日の出・日の入りの箱＝今のサイトの黄色／紺＋白い窓を、帯を細くして引き継ぐ（常連の目印） */
#today_card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 2px; }
#today_card .box { border-radius: 4px; padding: 8px; }
#today_card .box.rise { background: #f0e62a; }
#today_card .box.set { background: #2c2a80; }
#today_card .box .bl { font-size: 16px; font-weight: 700; text-align: center; padding: 2px 0 8px; color: #222; letter-spacing: 0; }
#today_card .box.set .bl { color: #fff; }
#today_card .box .bv { background: #fff; border-radius: 2px; text-align: center; font-size: 26px; font-weight: 600; color: #1c2028; padding: 6px 0; line-height: 1.15; }
/* v7.40＝方位角は窓の下に小さく・薄く。v7.76＝横に小さな矢印（北が上・地図と同じ向き） */
#today_card .box .ba { font-size: 10.5px; text-align: center; padding: 10px 0 0; color: rgba(0,0,0,.62); letter-spacing: .02em; line-height: 1.2; }
#today_card .box.set .ba { color: rgba(255,255,255,.78); }
#today_card .box .ba svg.az { width: 11px; height: 11px; display: inline-block; margin: 0 0 0 4px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* カウントダウン（v7.65＝薄い灰の面・v7.27＝役割を固定した3行・v7.69＝「開始まで／中　終了まで」） */
#today_card .cdn { display: block; margin: 6px 0 10px; background: #edf1f6; border-radius: 4px; padding: 5px 10px 6px; }
#today_card .cdn .c { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0 2px; border-bottom: 1px dashed var(--rule); }
#today_card .cdn .c:last-child { border-bottom: none; }
#today_card .cdn .l { font-size: 12px; color: var(--mute); line-height: 1.3; }
#today_card .cdn .n { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.15; }
#today_card .cdn .n small { font-size: 12px; font-weight: 600; color: var(--mute); margin: 0 1px; }
/* v7.33＝「〜中」の行＝薄い色の帯・v7.34＝キラッ（3秒周期・動きを減らす設定では止める） */
#today_card .cdn .c.on { margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 4px; border-bottom-color: transparent; position: relative; overflow: hidden; }
#today_card .cdn .c.on .l { color: var(--ink); font-weight: 600; }
#today_card .cdn .c.on.gold { background: #fff1cc; }
#today_card .cdn .c.on.blue { background: #e2ecff; }
/* MOB-17（2026-10-13）＝光の帯は transform で動かす（left を動かすと Chrome が layout shift として数え続けた＝夕方の測定で 0.003 前後・main も同じ） */
#today_card .cdn .c.on::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 75%);
  animation: tcshine 3s linear infinite; }
@keyframes tcshine { 25% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { #today_card .cdn .c.on::after { animation: none; display: none; } }

/* 表3群（昼の長さ・撮影の目安・薄明）＝v7.23 1行1範囲・v7.28 群の見出し */
#today_card .info2 { display: block; margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 6px; }
#today_card .info2 .grp { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); padding: 4px 0 3px; margin: 0; }
#today_card .info2 .grp .gi { width: 15px; height: 15px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#today_card .info2 .grp2 { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
#today_card .info2 .cell { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
#today_card .info2 .cell:last-child, #today_card .info2 .cell.nb { border-bottom: 0; }
#today_card .info2 .cell .k { color: var(--mute); white-space: nowrap; }
#today_card .info2 .cell .v { color: var(--ink); font-weight: 600; white-space: nowrap; }
#today_card .info2 .cell .v.r { font-size: 12px; font-weight: 500; }
#today_card .info2 .cell .v.r.on { font-weight: 700; }
#today_card .info2 .cell.on .k { color: var(--ink); }

/* 弧と擬似3D（v7.24・v7.42＝白い箱・薄い枠線・同じ幅） */
#today_card .globe { border: 1px solid var(--rule); border-radius: 4px; background: #fff; padding: 4px 6px; margin-top: 6px; display: flex; align-items: center; }
#today_card .globe svg[data-g] { margin: 0; width: 100%; height: auto; display: block; overflow: visible; }
#today_card .arcbox { margin-top: 14px; }
#today_card .globe.arcbox { padding: 2px 6px 8px; }
#today_card .globe:not(.arcbox) { padding: 12px 6px 8px; flex-direction: column; align-items: stretch; position: relative; }
/* v7.53＝図の下の状態の文・v7.79＝右端は回すボタン（↻｜↺・15° 刻み・判断20） */
#today_card .gnote { font-size: 11px; color: var(--mute); padding: 6px 2px 0; display: flex; justify-content: flex-start; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
#today_card .gnote .gst { color: var(--ink); font-weight: 600; }
#today_card .grot { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#today_card .grot button { width: 34px; height: 26px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--mute); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font: inherit; }
#today_card .grot button:first-child { border-left: 0; }
#today_card .grot button:active { background: #eef2f7; }
#today_card .grot button svg { width: 14px; height: 14px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#today_card .grot.on { border-color: var(--ink); }
#today_card .grot.on button { color: var(--ink); }

/* 空の色の帯 */
#today_card .sky { margin-top: 10px; }
#today_card .sky svg { margin: 0; }

/* 日付の切替（v7.72＝箱2つ＝左「‹｜今日｜›」・右「カレンダー」） */
#today_card .dnav { display: flex; gap: 8px; margin: 8px 0 0; align-items: stretch; }
#today_card .dseg { flex: none; display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#today_card .dseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; border: 0; border-left: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 4px; white-space: nowrap; }
#today_card .dseg button:first-child { border-left: 0; }
#today_card .dseg button:active { background: #eef2f7; }
#today_card .dseg button svg { width: 14px; height: 14px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 2026-10-12 iPhone の実機で「今日」と › が見切れた＝Safari（WebKit）は中身に合わせて縮む器（.dseg の flex: none）の幅を flex-basis でなく中身の幅で数える → overflow: hidden で切れた。width も書いて器の幅を決める */
#today_card .dseg button[data-k="-1"], #today_card .dseg button[data-k="1"] { flex: 0 0 48px; width: 48px; }
#today_card .dseg button[data-k="0"] { flex: 0 0 78px; width: 78px; }
#today_card .dcal { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#today_card .dcal:active { background: #eef2f7; }
#today_card .dcal svg { width: 14px; height: 14px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#today_card .dcal[aria-expanded="true"] { background: var(--ink); color: #fff; }

/* カレンダー（自作・v7.70＝今日＝墨の塗り・見ている日＝墨の輪・v7.71＝出しっぱなし） */
#today_card .cal { margin-top: 6px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 6px 8px; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#today_card .cal[hidden] { display: none; }
#today_card .cal .ch { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink); }
#today_card .cal .ch button { border: 0; background: none; width: 36px; height: 34px; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font: inherit; padding: 0; }
#today_card .cal .ch button:active { background: #eef2f7; }
#today_card .cal .ch button:disabled { color: #c3c9d1; cursor: default; }
#today_card .cal .ch button svg { width: 16px; height: 16px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#today_card .cal .cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 2px; }
#today_card .cal .cw { font-size: 10.5px; color: var(--mute); text-align: center; padding: 3px 0 2px; }
#today_card .cal .cd { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); height: 34px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
#today_card .cal .cw.su, #today_card .cal .cd.su { color: #d8261c; }
#today_card .cal .cw.sa, #today_card .cal .cd.sa { color: #2c6fd6; }
#today_card .cal .cd:active { background: #eef2f7; }
#today_card .cal .cd.sel { box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; }
#today_card .cal .cd.td { background: var(--ink); color: #fff; box-shadow: none; }

/* 条件3（2026-10-11 実測）＝JS が埋める字は、埋まるまで見せない（.ready は Card.js が付ける）。
   右寄せ・中央寄せの「--」が「8分」に替わると字の左端が動き、レイアウトシフトに数えられた（CLS 0.0078・カウントダウンの数字）。
   見えない物の移動は数えられない＝骨組みの高さはそのままで、字だけ後から出す。 */
/* 🎯 FEAT-04 Step4（2026-10-12）＝日付・時刻・方位角（data-f）と矢印（.ba）は HTML に最初から書く＝隠さない（JS 無しでも見える・ミサトの🔴2 案A）。
   Card.js は同じ字で上書きする＝動かない。隠すのは「いま」で動く物だけ＝カウントダウン（data-c）と時計（.hm .s）。
   時計は HTML に仮の字（00:00 :00）を入れて幅を取ってある＝JS が入れても日付の行は動かない（前は時計が入ると 2px 上へ＝CLS 0.0044）。 */
#today_card:not(.ready) [data-c], #today_card:not(.ready) .hd .d .hm, #today_card:not(.ready) .hd .d .s { visibility: hidden; }

/* 畳む・開く（2026-10-11 ユーザー判断）＝カレンダー。高さ・余白・不透明度を 0.2 秒（Card.js の fold が値を入れる） */
#today_card .folding { overflow: hidden; box-sizing: border-box; transition: height .2s ease, padding .2s ease, margin .2s ease, opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { #today_card .folding { transition: none; } }

/* 今日以外の日＝「いま」で動く部品を隠す（v7.70）。
   🔴 時計・状態の文・回すボタンは visibility で隠して高さを残す（ミサトの注意③）。
   🔴 カウントダウンの面は隠さない＝札は今日のまま・数字は「—」（Card.js）・面ごと薄くする（2026-10-11 ユーザー判断＝日付を替えても何も動かない・止まっている部品の印）。 */
#today_card.other .cdn .c { opacity: .45; }
#today_card.other .cdn .n { color: var(--mute); }
/*
      図の中の物（太陽・▼・いまの高度と方位角）は display:none（SVG の中なので高さに効かない） */
#today_card.other .hd .d .hm, #today_card.other .hd .d .s, #today_card.other .gnote { visibility: hidden; }
#today_card.other .sun, #today_card.other .prog, #today_card.other .gsun, #today_card.other .gaz, #today_card.other .gray, #today_card.other .gfoot,
#today_card.other .gdrop, #today_card.other .garc, #today_card.other .galt, #today_card.other .gazt, #today_card.other .gtitle, #today_card.other .mk { display: none; }

/* 決め（4-3b）＝カードが 360px 未満なら見出しの行は2段（日付と時計／右寄せの地点の札）＝JS の前後で高さが同じ */
@container tcard (max-width: 359px) {
  /* 2026-10-11 ユーザー判断＝2段の時は窮屈に見えた＝日付↔地点の札 2px→6px・札↔日付の切替 8px→12px（CSS で決まる高さ＝CLS は出ない） */
  #today_card .hd { flex-direction: column; align-items: flex-end; gap: 6px; }
  #today_card .hd .d { align-self: flex-start; }
  #today_card .dnav { margin-top: 12px; }
}

/* 判断11＝PC（器が 760px 以上）は2列＝左「いま」（日付の切替・箱・カウントダウン・弧・擬似3D・帯）／右「表3群」。HTML は同じ・grid-area で並べ替えるだけ */
@container tcard (min-width: 760px) {
  #today_card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: start;
    grid-template-areas: "hd hd" "dseg info2" "cal info2" "row2 info2" "cdn info2" "arc info2" "globe info2" "sky info2"; }
  #today_card > .hd { grid-area: hd; }
  #today_card > .dnav { grid-area: dseg; }
  #today_card > .cal { grid-area: cal; }
  #today_card > .row2 { grid-area: row2; }
  #today_card > .cdn { grid-area: cdn; }
  #today_card > .info2 { grid-area: info2; margin-top: 8px; border-top: 0; padding-top: 0; }
  #today_card > .arcbox { grid-area: arc; margin-top: 6px; }
  #today_card > .globe:not(.arcbox) { grid-area: globe; }
  #today_card > .sky { grid-area: sky; }
}

/* ===== 節の見出し（MOB-16 Step4-4〜・判断8＝h2 は太字＋下の細い線・帯としずくは使わない） =====
   🔴 .h2_wrap の外の自前の節（R2）＝共有のレイアウト CSS の「.h2_wrap > h2」（水色の帯）は子にしか当たらない＝ここには当たらない。
   余白は6段の目盛り（判断13）＝節と節 32px・見出しと中身 12px・注意書き 8px。 */
.sec { margin: 0; font-size: 14px; color: #1c2028; }
.sec > h2 { font-size: 15px; line-height: 1.4; margin: 32px 0 12px; padding: 0 0 8px; border-bottom: 1px solid #c9d2dc; font-weight: 700; display: flex; align-items: center; gap: 7px; color: #1c2028; }
/* 2026-10-12＝スマホで見出しが「ゴールデン｜アワー）」で折れた＝かっこの中は1かたまりで折る（h2 は flex＝字は1つの span に入れてから） */
.sec > h2 .nw { display: inline-block; }
.sec > h2 .hi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sec .note { font-size: 12px; color: #5a6270; margin: 8px 0; }
.sec .more { margin-top: 12px; }

/* 案内の行（MOB-16 Step4-5・判断7・v2.19〜2.24）＝別のページへ行く物は全部この顔。薄い水色（ブランドの水色 #29aaf5 の血筋）＝「色付き＝ここから出る／白＝ここで開く」・右端は線画の →
   📌 a.rowlink＝共有の `a { color }` より強い（字は墨色）。 */
a.rowlink { display: flex; align-items: center; gap: 8px; border: 1px solid #cfe3f3; background: #eef7fd; padding: 11px 12px; font-weight: 600; font-size: 14px; line-height: 1.4; color: #1c2028; text-decoration: none; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
a.rowlink:active { background: #ddeefb; }
/* MOB-17 メモ2（2026-10-13 ユーザー判断）＝PC では本文の幅いっぱい（830px）に伸びて間延びした＝案内の行は全部同じ最大幅（同じ顔のまま）。スマホ（310〜340px）には効かない */
a.rowlink { max-width: 440px; margin-inline: auto; }  /* 2026-10-13 ユーザー判断＝PC では左右中央（凡例の中央寄せとそろえる） */
a.rowlink .hi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
a.rowlink .ar { margin-left: auto; width: 20px; height: 20px; fill: none; stroke: #1c2028; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* 月の案内（同じ顔で2か所）＝上下 16px＝別の物だと分かる間・節ほどは離さない */
.moonslot { margin: 16px 0; }

/* 投稿写真の節（R11）＝partial の見出し <p> はこの節の中でだけ隠す（h2 と二重になる）。月のページは無変化。器の余白は節の端に揃える */
#photos #recent_posts_wrap > p { display: none; }
#photos #recent_posts_wrap { padding: 0; margin: 0; }
/* MOB-17 メモ1（2026-10-13 ユーザー判断）＝「もっと見る」は1つだけ＝写真の並びの下・真ん中のボタン（白＝押せる・判断17）。
   JS（月のページと共有）が並びの最後に足す小さい「もっと見る」はこの節でだけ隠す（灰色の仮の箱には a が無い＝写真が届く前は当たらない）。 */
#photos #recent_posts_wrap li:has(> a[href="/user"]) { display: none; }
#photos .photomore { margin-top: 12px; text-align: center; }
#photos .photomore a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; box-sizing: border-box; padding: 0 16px; border: 1px solid #c9d2dc; border-radius: 4px; background: #fff; color: #1c2028; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#photos .photomore a:active { background: #eef2f7; }
#photos .photomore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sec .mono { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", "Noto Sans Mono CJK JP", monospace; font-variant-numeric: tabular-nums; }

/* ===== 年間（MOB-16 Step4-4・見本＝設計図 v2.41 の .year を #year に置き換えて移した） ===== */
/* R3 と同じ＝PC の表（字の余白・範囲を1行）は画面幅でなく節の幅で決める */
#year { container: yr / inline-size; }
#year .chart { border: 1px solid #dde3ea; border-radius: 4px; padding: 6px 6px 2px; background: #fff; }
/* AD-08（2026-10-13）＝幅いっぱいはグラフ（#year_chart）だけ（その日のバーの svg は下で自分の規則を持つ）。.chart の svg 全部に当てると Google の差し込みリンクのアイコンが 600px 角になった */
#year #year_chart { width: 100%; height: auto; display: block; overflow: visible; }
/* Step4-8c＝グラフをなぞる（マウス）・タップ／横になぞる（指）。縦のスクロールと拡大はそのまま */
#year #year_chart { cursor: crosshair; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#year .chart svg text { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", system-ui, sans-serif; }
/* MOB-17 Step6（2026-10-13 ユーザー判断・Fable の見本の案A）＝凡例は「明るさの帯」。暗い→明るいの5つを1本の帯（グラフの縞と同じ順）＋下に名前／
   重ねて描く2つ（ゴールデンアワー・南中時刻）は2行目。字は 11px の1種類・行の数は幅で変わらない。かっこ書きは外した（撮影の目安の説明とその日のバーにある）。
   🔴 svg は使わない（AD-08＝Google の差し込みと規則がぶつかる）＝帯は <i> の塗り */
#year .legend { padding: 8px 4px 6px; font-size: 11px; line-height: 1.4; color: #1c2028; }
#year .legend .lg-ends { display: flex; justify-content: space-between; font-size: 10px; color: #5a6270; margin: 0 0 3px; }
#year .legend .lg-bar { display: grid; grid-template-columns: repeat(5, 1fr); height: 10px; border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,.12); }
#year .legend .lg-bar i { display: block; }
#year .legend .lg-names { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; margin: 3px 0 0; }
#year .legend .lg-over { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 7px 0 0; }
#year .legend .lg-over span { display: inline-flex; align-items: center; gap: 5px; }
#year .legend .lg-over i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
#year .legend .lg-over i.ln { width: 14px; height: 2px; border: 0; border-radius: 0; }
/* PC（#year が 600px 以上）＝帯は 520px（箱いっぱいだと間延びした）。凡例の塊は箱の中央（左寄せは右半分が空いて重心が偏った＝10-13 ユーザー・Fable の見本の案P2）。
   重ねる2つはスマホと同じく帯の下の行（右に並べる形は「変」＝ユーザー） */
@container yr (min-width: 600px) {
  #year .legend { display: flex; flex-direction: column; align-items: center; }
  #year .legend .lg-ends, #year .legend .lg-bar, #year .legend .lg-names { width: 520px; max-width: 100%; box-sizing: border-box; }
}
/* 📐 MOB-16 Step4-8（2026-10-11 ユーザー判断）＝その日のバー（グラフの箱の中・凡例の下）。色はグラフと同じ（Year.js の COL） */
#year .yday { border-top: 1px solid #eef1f4; margin: 2px -6px 0; padding: 8px 10px 6px; color: #1c2028; }
#year .yday .yh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 8px; }
#year .yday .yh b { font-size: 13px; font-weight: 600; }
/* 2026-10-12 ユーザー判断＝なぞる案内はグラフの真上（.yhint）・右寄せ（同日・ユーザー）。
   赤14（ユーザー）＝固定の演出＝案内の字を入れ替え（.pinned は Year.js が付ける）・グラフの線は太く両端に丸。
   🔴 2つの字は grid の同じマスに重ね、切替は visibility＝枠の高さは長い方で決まる＝押した時にグラフが動かない（display で切り替えると行の数が変わる） */
#year .yhint { display: grid; margin: 0 0 4px; padding: 0 2px; font-size: 10.5px; line-height: 1.5; color: #5a6270; text-align: right; }
#year .yhint small { grid-area: 1 / 1; font-size: inherit; }
#year .yhint.pinned .hn { visibility: hidden; }
/* MOB-17 メモ3（2026-10-13 ユーザー判断）＝固定中は案内の代わりに「固定を外す」。同じマスに重ねて visibility で出し入れ＝行の高さは変わらない（スマホは案内の2行 32px に収める）。白＝押せる（判断17） */
#year .yhint .yunpin { grid-area: 1 / 1; justify-self: end; align-self: center; visibility: hidden; min-height: 26px; padding: 0 12px; border: 1px solid #c9d2dc; border-radius: 4px; background: #fff; color: #1c2028; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#year .yhint .yunpin:active { background: #eef2f7; }
#year .yhint.pinned .yunpin { visibility: visible; }
#year #year_chart .ycur line { stroke: #d8701a; stroke-width: 1.6; }
#year #year_chart .ycur circle { display: none; fill: #d8701a; stroke: #fff; stroke-width: 1.5; }
#year #year_chart .ycur.pinned line { stroke-width: 2.4; }
#year #year_chart .ycur.pinned circle { display: block; }
#year .yday .ybar { position: relative; height: 18px; margin: 6px 0 0; border-radius: 3px; overflow: hidden; background: #2a3350; }
/* 🔴 viewBox 1440×1 を箱いっぱいに伸ばす（AD-08 で #year .chart svg は #year_chart だけに絞った＝この規則が自分で全部持つ） */
#year .yday .ybar svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
#year .yday .ybar .yn { position: absolute; top: 0; bottom: 0; width: 2px; height: auto; margin-left: -1px; background: #d8261c; border: 0; border-radius: 0; }
#year .yday .ybar .yn[hidden] { display: none; }
#year .yday .yhr { position: relative; height: 15px; font-size: 10px; color: #5a6270; margin-top: 2px; }
#year .yday .yhr span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
#year .yday .yhr span:first-child { left: 0; transform: none; }
#year .yday .yhr span:last-child { right: 0; transform: none; }
/* 赤10（2026-10-11 ユーザー判断・Fable）＝スマホ＝種類ごとの格子「名前｜（余白）｜始まり｜～｜終わり」。
   名前は左・時刻と「合計 …」はバーの右端に右寄せ（始まり・終わりは 5 文字ぶんの最小幅＝種類をまたいで桁が縦に揃う）。種類の間は細い線。 */
#year .yday .yrows { margin-top: 2px; font-size: 12px; line-height: 1.5; }
#year .yday .yr { display: grid; grid-template-columns: max-content 1fr max-content max-content max-content; align-items: baseline; padding: 7px 0 6px; }
#year .yday .yr + .yr { border-top: 1px solid #dde3ea; } /* 種類の区切り＝箱の枠と同じ濃さ（2026-10-11 ユーザー＝薄すぎた #eef1f4 から） */
#year .yday .yk { grid-column: 1; grid-row: 1; white-space: nowrap; font-weight: 600; }
#year .yday .yk i { vertical-align: -1px; margin-right: 6px; }
#year .yday .yk i.ln { vertical-align: 3px; }
/* 赤11（ユーザー）＝時刻は合計より大きく（13px／11.5px） */
#year .yday .ys, #year .yday .ye { text-align: right; min-width: 5ch; font-size: 13px; }
#year .yday .yt { padding: 0 1px; font-size: 13px; }
#year .yday .am { grid-row: 1; }
#year .yday .pm { grid-row: 2; }
#year .yday .ys { grid-column: 3; }
#year .yday .yt { grid-column: 4; }
#year .yday .ye { grid-column: 5; }
/* 合計は余白の列（2＝1fr）から跨ぐ＝字が広くても時刻の列を押し広げない（跨ぐ物の余りは伸びる列が吸う）。
   赤11（ユーザー）＝合計の上に線＝全幅でなく時刻の幅ぶん（justify-self:end で中身の幅に縮め、min-width で時刻の塊の幅 86px に合わせる（実測＝13px の等幅で「18:36～24:00」）＝足し算の線） */
#year .yday .yd { grid-row: 3; grid-column: 2 / span 4; justify-self: end; min-width: 86px; box-sizing: border-box; text-align: right; font-size: 11.5px; color: #444b58; border-top: 1px solid #c9d2dc; margin-top: 3px; padding-top: 3px; }
#year .yday .yd::before { content: "合計"; font-family: inherit; font-size: 11px; color: #5a6270; margin-right: 6px; }
#year .yday .one .yd { grid-row: 2; }
#year .yday .mono { white-space: nowrap; }
#year .yday i { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); }
#year .yday .yrows i.ln { height: 2px; border: 0; border-radius: 0; }

/* 赤13（2026-10-12 ユーザー判断＝見やすさ最優先）＝幅で2段に切り替える（#year の幅＝container yr）。
   ・〜559px＝1列の縦積み（スマホ）
   ・560px〜＝ユーザー案の2列の格子「夜｜天文薄明／航海薄明｜市民薄明／昼｜ゴールデンアワー／南中」＝中身はスマホの塊のまま。
     1080px のウィンドウ（#year 665px）も 1280px（830px）もこれ。札を横一列（赤10〜11）は 830px でもきつく見えたので退役。 */
@container yr (min-width: 560px) {
  #year .yday .yrows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  #year .yday .yr + .yr { border-top: 0; }
  #year .yday .yr:nth-child(n+3) { border-top: 1px solid #dde3ea; }
}

/* 切替4つ（判断14）＝追従の2階建ての1階（v2.16＝切替 38 → 月の行 36 → 見出し 30／60）。R9＝追従はこの節の中だけ */
#year .seg { display: flex; border: 1px solid #c9d2dc; border-radius: 4px; overflow: hidden; margin: 12px 0 0; background: #fff; position: sticky; top: 0; z-index: 5; box-shadow: 0 -2px 0 #fff, 0 2px 0 #fff; }
#year .seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 38px; border: 0; border-left: 1px solid #c9d2dc; background: #fff; color: #1c2028; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0 4px; white-space: nowrap; }
#year .seg button:first-child { border-left: 0; }
#year .seg button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#year .seg button[aria-pressed="true"] { background: #1c2028; color: #fff; }
#year .cap { display: none; font-size: 11px; color: #5a6270; margin: 8px 0 0; line-height: 1.5; }
#year.v-time .cap.c-time, #year.v-shoot .cap.c-shoot, #year.v-twi .cap.c-twi, #year.v-az .cap.c-az { display: block; }

/* 月ごとの details（判断5・v2.15＝閉じた行は「月＋右端の＋」・v2.18＝押せる物は浮く・v2.25＝開いた行は薄い灰） */
#year #year_tables { margin-top: 12px; }
#year details { border: 1px solid #dde3ea; border-radius: 4px; margin: 8px 0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
#year details summary { position: sticky; top: 38px; z-index: 3; background: #fff; height: 36px; box-sizing: border-box; padding: 0 10px; cursor: pointer; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -2px 0 #fff; list-style: none; }
#year details summary::-webkit-details-marker { display: none; }
/* 2026-10-12 ユーザー判断＝月の開け閉めは 0.35 秒（カレンダーの 0.2 秒では縦に長い表には速すぎた＝同日ユーザー・Year.js の foldMonth が動いている間だけ .folding を付ける）
   🔴 overflow は clip（hidden だと箱がスクロールの器になり、中の追従の見出し th の top: 74px が箱の中で効いて、動いている間だけ 74px 下に居て最後に跳ねた＝ユーザーが iPhone で発見）。clip を知らない古い端末は hidden のまま */
#year details .tw.folding { overflow: hidden; overflow: clip; box-sizing: border-box; transition: height .35s ease, opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { #year details .tw.folding { transition: none; } }
#year details summary:active { background: #eef2f7; }
#year details[open] summary { background: #eef2f7; }
#year summary .pm { font-weight: 600; font-size: 16px; line-height: 1; color: #5a6270; width: 14px; text-align: center; }
#year summary .pm::before { content: "＋"; }
#year details[open] summary .pm::before { content: "－"; }

/* 表（v2.7＝collapse だと追従の見出しに枠線が付いてこず隙間から下の行が透ける＝separate・v2.14＝日付の列は同じ幅・残りは均等） */
#year table { display: none; border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; table-layout: fixed; }
#year.v-time table.t-time, #year.v-shoot table.t-shoot, #year.v-twi table.t-twi, #year.v-az table.t-az { display: table; }
#year th, #year td { border-top: 1px solid #eef1f4; padding: 6px 3px; text-align: center; white-space: nowrap; }
/* 判断17＝押せない見出しは平ら（白地・墨の字・下に墨の罫）。追従の2段目（top 74／2行目 104） */
#year th { background: #fff; font-weight: 600; font-size: 11.5px; color: #1c2028; position: sticky; top: 74px; z-index: 2; height: 30px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; box-shadow: inset 0 -1.5px 0 #1c2028, 0 -1px 0 #fff; }
#year th.g { box-shadow: inset 0 -1px 0 #e3e8ee, 0 -1px 0 #fff; text-align: center; color: #1c2028; }
#year tr:nth-child(2) th { top: 104px; box-shadow: inset 0 -1.5px 0 #1c2028, 0 -1px 0 #e3e8ee; }
#year th:first-child { z-index: 4; }
#year th:first-child, #year td:first-child { text-align: left; padding-left: 10px; width: 100px; }
#year td.sat { color: #2c6fd6; }
#year td.sun { color: #d8261c; }
#year tr.today td { background: #fff1cc; font-weight: 700; }
#year tr.today td:first-child { box-shadow: inset 4px 0 0 #d8701a; }
#year td .dt { display: inline-flex; flex-direction: column; align-items: center; }
#year td .tgs { display: flex; gap: 3px; margin-top: 3px; }
#year td .tg { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 3px; color: #fff; letter-spacing: .02em; }
#year td .tg.su { background: #e8702a; }
#year td .tg.wi { background: #2f6fd6; }
#year td .tg.sp { background: #3aa36b; }
#year td .tg.au { background: #b07a2a; }
#year td .tg.ec { background: #6b3fa0; }
#year td .tg.td { background: #1c2028; }
#year td svg.az, #year td svg.al { fill: none; stroke: #1c2028; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin-left: 5px; }
#year td svg.az { width: 12px; height: 12px; }
#year td svg.al { width: 16px; height: 14px; vertical-align: -3px; }
#year tr.today td svg.az, #year tr.today td svg.al { stroke-width: 1.8; }
#year table.t-shoot td.mono, #year table.t-twi td.mono { font-size: 12px; padding-left: 3px; padding-right: 3px; }
/* スマホ＝範囲は2行（「16:40」の下に「～17:30」）。1行だと4本で 418px＝390 に入らない（設計図の実測） */
#year .ra, #year .rb { display: block; line-height: 1.25; }

@container yr (min-width: 600px) {
  #year th, #year td { padding: 7px 10px; }
  #year th { padding-top: 0; padding-bottom: 0; }
  #year th:first-child, #year td:first-child { width: 150px; }
  #year .ra, #year .rb { display: inline; }
}

/* MOB-17 メモ4（2026-10-13）＝幅 600 未満は日付の列を詰めて、時刻の列に回す（「ゴールデン」が 390 以下の幅で見切れていた）。
   日付の字は最大 76px（12px・太字の今日の行・「10/10（土）」）＝列 86px（左 6・右 2 の余白込み）。札2つ（例「冬至」＋「今日」）も 71px で入る。
   360〜412 の幅で4枚の表とも見出し・中身の溢れゼロ（実測）。320 は前から溢れる幅＝対象外（MOB-16 の判断）。 */
@container yr (max-width: 599.98px) {
  #year th:first-child, #year td:first-child { width: 86px; padding-left: 6px; padding-right: 2px; }
  #year td:first-child { font-size: 12px; }
  #year table.t-shoot th { font-size: 10.5px; letter-spacing: -.02em; }
}