/*
 * 月の都道府県ページ（/moon/state/code）の見た目（FEAT-05 Step4・2026-10-17〜）
 * 見本＝asuka-hinode の docs/tasks/FEAT-05/html/FEAT-05_2026-10-13.html（#mock）。決めのログ＝steps/step02-blueprint.md（赤1〜72）。
 * 📌 Base.css は日の出ページと共有＝触らずこちらへ足す（計画書 E1）。日の出の Card.css は読まない・触らない。
 * 📌 MOB-18（2026-10-17）＝日付の部品の頭は日の出ページと共有（DatePart.css・このファイルより前に読む）。
 * 🔴 新しい名前だけを使う（日の出ページの R1）＝Base.css の古い規則（#hinode_hinoiri_time_wrap div に float 等）に巻き込まれない。
 * 🔴 #inline_ad_block には規則を書かない（広告なしの剥がし #inline_ad_block{display:none} に勝ってしまう）。
 * 🔴 svg の大きさの規則は目印（data-g・クラス）の付いた物だけ（AD-08＝箱の中の svg 全部に当てると AdSense の差し込みアイコンが箱いっぱいに伸びた）。
 */

/* ===== 今日のカード（見本＝日の出ページの #today_card に月の部品を足した物） ===== */
.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; --dash: #aab4c0;
}
#today_card .mono, .dpart .mono, .mpart .mono, .sec .mono { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", "Noto Sans Mono CJK JP", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
/* 赤67＝カードの頭は場所の札だけ（日付と時刻は日付の部品へ） */
#today_card .hd { display: flex; justify-content: flex-end; }
#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; 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; }
#today_card svg[data-g] { width: 100%; height: auto; display: block; margin: 6px 0 0; overflow: visible; }
#today_card svg text, .orbit svg text, #year .chart svg text { font-family: Consolas, "SF Mono", Menlo, "Roboto Mono", system-ui, sans-serif; }

/* 月の出・月の入りの箱（赤1）＝今の月のページの灰（月の出 #ddd／月の入り #ccc・窓 #fafafa）＝「月のページは灰の箱」が常連の目印 */
#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: #dddddd; }
#today_card .box.set { background: #cccccc; }
#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 .bv { background: #fafafa; border-radius: 2px; text-align: center; font-size: 26px; font-weight: 600; color: #1c2028; padding: 6px 0; line-height: 1.15; }
/* 判断8＝その日に無い時（字は「この日はありません」・窓の高さは同じ） */
#today_card .box .bv.none { font-size: 13px; font-weight: 600; color: #5a6270; padding: 12px 0 11px; }
#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 .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; }
#today_card .box .ba svg.az.no { visibility: hidden; }

/* 月の絵の行（判断4・赤3）＝今の「現在の月の情報」の色（紺 #222867・中の面 #313775・月の黄 #ffff54・影 #373737・白い字） */
#today_card .moonrow { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 14px; align-items: center; margin: 10px 0 2px; padding: 10px 12px; background: #222867; border: 1px solid #222867; border-radius: 4px; color: #fff; }
#today_card .moonrow .mw { align-self: stretch; display: flex; flex-direction: column; }
#today_card .moonrow .mt { display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; color: #c9cce6; font-variant-numeric: tabular-nums; }
#today_card .moonrow .mt span + span { font-size: 13px; font-weight: 600; color: #fff; }
#today_card .moonrow svg.bigmoon { display: block; width: 84px; height: 84px; margin: auto 0; overflow: visible; }
#today_card .moonrow .mf { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: baseline; font-size: 12px; background: #313775; border-radius: 4px; padding: 8px 10px; }
#today_card .moonrow .mf > .mr { display: grid; grid-column: 1 / -1; grid-template-columns: 4.5em minmax(0, 1fr); grid-template-columns: subgrid; align-items: baseline; padding: 4px 0; border-bottom: 1px dashed rgba(201,204,230,.3); }
#today_card .moonrow .mf > .mr:last-child { border-bottom: 0; }
#today_card .moonrow .mf .k { color: #c9cce6; white-space: nowrap; padding-right: 12px; }
#today_card .moonrow .mf .v { font-weight: 600; white-space: nowrap; color: #fff; }
#today_card .moonrow .mf .v.big { font-size: 22px; line-height: 1.15; }
#today_card .moonrow .mf .v.big small { font-size: 12px; color: #c9cce6; margin-left: 2px; }
#today_card .moonrow .mf .v.mph { white-space: normal; line-height: 1.35; }
#today_card .moonrow .mf .v.mph small { display: block; font-size: 11px; font-weight: 500; color: #c9cce6; white-space: nowrap; }
#today_card .moonrow .mf .v small.mn { font-family: inherit; font-size: 11px; font-weight: 500; color: #c9cce6; margin-left: 4px; }
#today_card .moonrow .mf svg.az { width: 11px; height: 11px; display: inline-block; margin: 0 0 0 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* 4-h（2026-10-17）＝320px の画面（カード 270px）では月の欄が 122px しか無く「満ちていく月」が折れ、方位角の「南東」がはみ出した＝狭いカードだけ月の絵を 64px に */
@container tcard (max-width: 299px) {
  #today_card .moonrow { grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; padding: 8px; }
  #today_card .moonrow svg.bigmoon { width: 64px; height: 64px; }
  #today_card .moonrow .mf { padding: 6px 8px; }
  #today_card .moonrow .mf .k { padding-right: 8px; }
}

/* カウントダウン（判断7＝3行固定） */
#today_card .cdn { display: block; margin: 8px 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(--dash); }
#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; white-space: nowrap; }
#today_card .cdn .n small { font-size: 12px; font-weight: 600; color: var(--mute); margin: 0 1px; }
/* 赤15＝月が出ている間・満月の日の行＝月の黄を薄めたレモン色（日の出ページの琥珀 #fff1cc と区別）＋キラッ（transform で動かす＝MOB-17 の CLS の教え） */
#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; background: #faf5a0; }
#today_card .cdn .c.on .l { color: var(--ink); font-weight: 600; }
#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: mcshine 3s linear infinite; }
@keyframes mcshine { 25% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { #today_card .cdn .c.on::after { animation: none; display: none; } }

/* 表3群（判断9）＝今日の月／次の月相／太陽との関係 */
#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(--dash); }
#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; }
/* 赤60＝呼び名が無い日の「なし（次は 10/23 十三夜）」は長い＝狭いカードでは折り返してよい（右寄せのまま） */
#today_card .info2 .cell .v.wm { white-space: normal; text-align: right; }
/* 赤18＝次の月相の日時は3つの枠に割って桁を縦に揃える */
#today_card .info2 .cell .v.qv { display: inline-flex; align-items: baseline; }
#today_card .info2 .cell .v.qv .qd { min-width: 5ch; text-align: right; }
#today_card .info2 .cell .v.qv .qt { min-width: 5ch; text-align: right; }
/* 赤53＝次の月相の4行に月相の絵（年間の表の札と同じ黒い地） */
#today_card .info2 .cell .k.qk { display: inline-flex; align-items: center; gap: 6px; }
#today_card .info2 .qph { display: inline-flex; width: 18px; height: 18px; padding: 2px; box-sizing: border-box; border-radius: 3px; background: #15171d; flex: none; }
#today_card .info2 .qph svg { display: block; width: 14px; height: 14px; margin: 0; }
#today_card .info2 .qph svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
/* 赤31＝距離の目盛り（その年の一番近い月〜一番遠い月の間のどこか）・赤53＝内部リンクで距離の節へ */
#today_card .info2 .cell.dgc { border-bottom: 0; padding-bottom: 4px; }
#today_card .dg { padding: 4px 0 12px; border-bottom: 1px dashed var(--dash); }
#today_card .dg .dgt { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--mute); line-height: 1; }
#today_card .dg .dgb { position: relative; flex: 1; height: 4px; margin: 0 5px; border-radius: 2px; background: linear-gradient(to right, #f3df4a, #c9d2dc 45%, #7a8599); }
#today_card .dg .dgb::before, #today_card .dg .dgb::after { content: ""; position: absolute; top: -3px; width: 1px; height: 10px; background: #7a8599; }
#today_card .dg .dgb::before { left: 0; }
#today_card .dg .dgb::after { right: 0; }
#today_card .dg .dgm { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%; background: #f7e921; border: 1px solid #1c2028; box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); }
#today_card .dg .dglk { display: flex; justify-content: flex-end; align-items: center; gap: 3px; margin: 6px 0 0; font-size: 11px; color: #1f6fb2; text-decoration: none; }
#today_card .dg .dglk:hover { text-decoration: underline; }
#today_card .dg .dglk svg { width: 12px; height: 12px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 弧と擬似3D（白い箱）・空の色の帯 */
#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; }
#today_card .arcbox { margin-top: 8px; }
#today_card .globe.arcbox { padding: 2px 6px 8px; }
/* MOB-18 Step2-8（2026-10-17）＝弧の固定（年間のグラフの .yhint と同じ作り）＝案内の行と「固定を外す」を同じマスに重ね、visibility で出し入れ（行の高さは変わらない）。
   止めている間は縦の線を太く・両端に丸（年間のグラフの .ycur.pinned と同じ印） */
#today_card .globe.arcbox { flex-direction: column; align-items: stretch; }
#today_card .ahint { display: grid; align-items: center; min-height: 28px; margin: 2px 0 0; padding: 0 2px; font-size: 10.5px; line-height: 1.5; color: #5a6270; text-align: right; }
#today_card .ahint small { grid-area: 1 / 1; font-size: inherit; }
#today_card .ahint .aunpin { grid-area: 1 / 1; justify-self: end; 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); }
#today_card .ahint .aunpin:active { background: #eef2f7; }
#today_card .ahint.pinned small { visibility: hidden; }
#today_card .ahint.pinned .aunpin { visibility: visible; }
#today_card svg[data-g="arc"] .hvl circle { display: none; }
#today_card svg[data-g="arc"] .hvl.pinned line { stroke-width: 2.4; stroke-dasharray: none; }
#today_card svg[data-g="arc"] .hvl.pinned circle { display: block; }
/* 赤24＝弧はなぞる（マウス）・横にドラッグ（指）でその時刻に。縦のスクロールは邪魔しない */
#today_card svg[data-g="arc"] { cursor: crosshair; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#today_card .globe:not(.arcbox) { padding: 12px 6px 8px; flex-direction: column; align-items: stretch; position: relative; }
#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[data-g] { margin: 0; }

/* 今日以外の日＝カウントダウンは薄く（札は今日のまま・数字は「—」）。弧・擬似3D・帯の▼は「この日の正午」で止める */
#today_card.other .cdn .c { opacity: .45; }
#today_card.other .cdn .n { color: var(--mute); }

/* PC＝2列（判断16）＝左「いま」・右「表3群」。HTML は同じ・grid-area だけ。赤49＝列の間 32px */
@container tcard (min-width: 760px) {
  #today_card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start;
    grid-template-areas: "hd hd" "dpart info2" "row2 info2" "moon info2" "cdn info2" "dpart2 info2" "mpart2 info2" "arc info2" "globe info2" "sky info2"; }
  #today_card > .hd { grid-area: hd; }
  #today_card > .dpart { grid-area: dpart; }
  #today_card > .dpart[data-at="arc"] { grid-area: dpart2; }
  #today_card > .mpart { grid-area: mpart2; }
  #today_card > .row2 { grid-area: row2; }
  #today_card > .moonrow { grid-area: moon; }
  #today_card > .cdn { grid-area: cdn; }
  #today_card > .info2 { grid-area: info2; margin-top: 8px; border-top: 0; padding-top: 0; }
  /* 赤50・51＝表3群の中身だけ 8px 内側・群の区切りの実線は消す */
  #today_card .info2 .cell, #today_card .info2 .dg { margin-left: 8px; margin-right: 8px; }
  #today_card .info2 .grp2 { border-top: 0; }
  #today_card > .arcbox { grid-area: arc; }
  #today_card > .globe:not(.arcbox) { grid-area: globe; }
  #today_card > .sky { grid-area: sky; }
  #today_card .dpart .dcal { margin-left: 0; }
}
/* 赤68・69＝弧の図の頭の日付の部品＋月相の部品 */
#today_card .dpart[data-at="arc"] { margin-top: 14px; }

/* ===== 日付の部品（赤67）＝カード・方角の地図・しくみの図に同じ物。どこで押しても1つの日付が替わる =====
   MOB-18 Step2-5（2026-10-17）＝部品の頭（日付と時刻・‹ 今日 ›・カレンダーのボタン）は日の出ページと共有＝content/css/state/code/DatePart.css へ移した。ここはカレンダーの色と中身だけ */

/* カレンダー（判断5・赤13〜14・赤8）＝黒いカレンダー＋各日の月相の絵（月相の暦を兼ねる） */
.dpart .cal { margin-top: 6px; border: 1px solid #15171d; border-radius: 4px; background: #15171d; color: #eef1f6; padding: 6px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.dpart .cal .ch { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; color: #fff; }
.dpart .cal .ch button { border: 0; background: none; width: 36px; height: 34px; cursor: pointer; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font: inherit; padding: 0; }
.dpart .cal .ch button:active { background: #2a2e38; }
.dpart .cal .ch button:disabled { color: #4a4f5c; cursor: default; }
.dpart .cal .ch button svg { width: 16px; height: 16px; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dpart .cal .cgh { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 2px; }
.dpart .cal .cg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #2e323d; border: 1px solid #2e323d; border-radius: 3px; overflow: hidden; }
.dpart .cal .cg .ce { background: #15171d; }
.dpart .cal .cw { font-size: 10.5px; color: #9aa1b0; text-align: center; padding: 3px 0 2px; }
.dpart .cal .cd { border: 0; background: #15171d; font: inherit; font-size: 13px; font-weight: 500; color: #eef1f6; height: 44px; border-radius: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.dpart .cal .cd svg { display: block; width: 18px; height: 18px; margin: 0; }
.dpart .cal .cw.su, .dpart .cal .cd.su { color: #ff7a70; }
.dpart .cal .cw.sa, .dpart .cal .cd.sa { color: #7fb0ff; }
.dpart .cal .cd:active { background: #2a2e38; }
.dpart .cal .cd:disabled { color: #4a4f5c; cursor: default; }
.dpart .cal .cd.sel { box-shadow: inset 0 0 0 2px #fff; font-weight: 700; }
.dpart .cal .cd.td { box-shadow: inset 0 0 0 2px #f7e921; font-weight: 700; }
.dpart .cal .cd.td.sel { background: #2a2e38; }
.dpart .cal .cd svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
.dpart .cal .cl { display: flex; gap: 10px; font-size: 10.5px; color: #9aa1b0; padding: 6px 2px 2px; flex-wrap: wrap; }
.dpart .cal .cl span { display: inline-flex; align-items: center; gap: 3px; }
.dpart .cal .cl i.rg { display: inline-block; width: 11px; height: 11px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #f7e921; }
.dpart .cal .cl i.rw { display: inline-block; width: 11px; height: 11px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px #fff; }
/* 赤8＝節目の日は絵の代わりに字（白・満月だけ月の黄） */
.dpart .cal .cd .ql { display: none; font-size: 10px; font-weight: 700; line-height: 1; color: #eef1f6; height: 18px; align-items: center; }
.dpart .cal .cd.q svg { display: none; }
.dpart .cal .cd.q .ql { display: flex; }
.dpart .cal .cd.q2 .ql { color: #f7e921; }

/* 月相の部品（赤69）＝地球から見た形（40px）＋「月相」「月齢」の2行 */
.mpart { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; line-height: 1.35; color: #1c2028; }
.mpart svg.mview { display: block; width: 40px; height: 40px; flex: none; overflow: visible; }
.mpart .opt { display: grid; gap: 2px; white-space: nowrap; }
.mpart .k { color: #5a6270; margin-right: 6px; }
.mpart b { font-weight: 600; }
/* 赤63・64＝月相の欄の幅を一番長い名前に合わせて固定（見えない高さ0の行・本物の字の前に置く） */
.mpart [data-p="ph"] { display: inline-block; }
.mpart [data-p="ph"]::before { content: "満ちていく月\A欠けていく月"; white-space: pre; display: block; height: 0; overflow: hidden; visibility: hidden; }
#today_card .dpart[data-at="arc"] + .mpart + .arcbox { margin-top: 8px; }

/* JS が埋める字は埋まるまで見せない（日の出ページの条件3＝CLS）。骨組みの高さはそのまま・字だけ後から出す。
   🎯 日付・時刻・方位角・表3群（data-f）は HTML に最初から書く＝隠さない（JS 無しでも読める）。隠すのは「いま」で動く物だけ */
#today_card:not(.ready) [data-c], #today_card:not(.ready) .moonrow .mf .v, #today_card:not(.ready) .moonrow .mt span + span,
.mpart:not(.ready) .opt b, #moon_orbit:not(.ready) .onote b { visibility: hidden; }

/* ===== 節の見出し・案内の行（日の出ページと同じ顔） ===== */
.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; }
.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; }
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); max-width: 440px; margin-inline: auto; }
a.rowlink:active { background: #ddeefb; }
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; }
.sunslot { margin: 16px 0; }
/* MOB-18（2026-10-17）＝タイトルとカードの間の日の出の案内（日の出ページの .xslot と同じ）。カードとは 12px */
.xslot { margin: 0 0 12px; }

/* 方角の地図の節＝部品の外側の余白をカードの箱の内側（枠1＋余白12）とそろえる・PC はカードの左の列と同じ幅（赤70） */
#moon_map { container: mmap / inline-size; }
#moon_map .dpart, #moon_map .mpart { margin-left: 13px; margin-right: 13px; }
#moon_map .mpart { margin-bottom: 10px; }
@container mmap (min-width: 760px) {
  #moon_map .dpart, #moon_map .mpart { width: calc((100cqw - 58px) / 2); }
  #moon_map .dpart .dcal { margin-left: 0; }
}

/* 月の満ち欠けのしくみ（3D1・判断10）＝白い箱に模式図。太陽は箱の縁で切る（傷b） */
.orbit { container: obox / inline-size; border: 1px solid #dde3ea; border-radius: 4px; background: #fff; padding: 8px 6px 6px; overflow: hidden; }
.orbit svg[data-g="orbit"] { width: 100%; max-width: 480px; height: auto; display: block; overflow: visible; margin: 0 auto; }
.orbit .ocap { text-align: center; font-size: 11px; color: #5a6270; margin: 2px 0 0; line-height: 1.5; }
.orbit .onote { font-size: 11px; color: #5a6270; padding: 6px 2px 0; margin: 0; line-height: 1.5; }
.orbit .onote b { color: #1c2028; }
.orbit .dpart, .orbit .mpart { margin-left: 6px; margin-right: 6px; }
.orbit .dpart { margin-top: 2px; }
.orbit .mpart { margin-bottom: 6px; }
@container obox (min-width: 746px) {
  .orbit .dpart, .orbit .mpart { width: calc((100cqw - 44px) / 2); }
  .orbit .dpart .dcal { margin-left: 0; }
}

/* 投稿写真の節＝partial の見出し <p> はこの節の中でだけ隠す（h2 と二重）・JS が並びの最後に足す小さい「もっと見る」も隠す（下の案内の行が1つだけ） */
#photos #recent_posts_wrap > p { display: none; }
#photos #recent_posts_wrap { padding: 0; margin: 0; }
#photos #recent_posts_wrap li:has(> a[href="/user"]) { display: none; }

/* ===== 年間（判断12〜14）＝月の図・距離の図・年間の表 ===== */
#year { container: yr / inline-size; }
#year .chart { border: 1px solid #dde3ea; border-radius: 4px; padding: 6px 6px 2px; background: #fff; }
#year #year_chart, #year #dist_chart { width: 100%; height: auto; display: block; overflow: visible; }
/* 4-h（2026-10-17）＝PC（図の幅 520px より上）では Year.js が viewBox を「幅 × 250（距離の図は 300）」に描き直す＝HTML の仮の viewBox（360×250）のままだと
   描く前の高さが 575px ほどあり、描いた瞬間に下が 300px 以上縮んだ＝PC の高さを先に決めておく（スマホは viewBox 360 のまま＝縦横比で決まる） */
@container yr (min-width: 535px) {
  #year #year_chart { height: 250px; }
  #year #dist_chart { height: 300px; }
}
#year #year_chart { cursor: crosshair; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#year .legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 4px 6px; font-size: 11px; color: #1c2028; }
#year .legend span { display: inline-flex; align-items: center; gap: 5px; }
#year .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); box-sizing: border-box; }
#year .legend i.ln { width: 14px; height: 2px; border: 0; border-radius: 0; }
#year .legend i.dot { border-radius: 50%; width: 10px; height: 10px; }
#year .legend i.ring { border-radius: 50%; width: 10px; height: 10px; background: #1c2240; border: 2px solid #7fb0ff; }
#year .legend small { color: #5a6270; }
/* MOB-18 Step2-9（2026-10-17 ユーザー）＝「固定を外す」（日の出ページの MOB-17 メモ3 と同じ作り）＝案内とボタンを同じマスに重ね、固定中だけボタン（visibility＝行の高さは変わらない） */
#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; }
#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; }
/* 赤39＝1か月の図・月の切替 ‹ 10月 ›／年送り＝「‹ 2027年 › 今年」 */
#year .ymn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 6px; }
#year .ymn b { min-width: 7em; text-align: center; font-size: 14px; }
#year .ymn button { width: 34px; height: 30px; border: 1px solid #c9d2dc; border-radius: 4px; background: #fff; color: #1c2028; font-size: 16px; line-height: 1; cursor: pointer; }
#year .ymn button:disabled { opacity: .35; cursor: default; }
#year .ymn.yy { margin: 0 0 8px; }
#year .ymn button.y0 { width: auto; padding: 0 10px; font-size: 12px; }
#year .chart, #year .ytw { position: relative; }
#year .ycalc { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 5px 14px; border-radius: 14px; background: #15171d; color: #fff; font-size: 12px; white-space: nowrap; z-index: 2; }
#year .ytw .ycalc { top: 8px; transform: translateX(-50%); }
#year .busy .ycalc { display: block; }
#year .busy #year_chart, #year .busy #dist_chart, #year .busy .yday, #year .busy .dls, #year .busy #year_tables { opacity: .3; pointer-events: none; }
#year .busy .ytw { min-height: 44px; }
/* その日のバー（赤40＝左に月相の絵） */
#year .yday { border-top: 1px solid #eef1f4; margin: 2px -6px 0; padding: 8px 10px 6px; color: #1c2028; }
#year .yday .yh b { font-size: 13px; font-weight: 600; }
#year .yday .ybw { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
#year .yday .yphd { flex: none; width: 26px; height: 26px; padding: 3px; box-sizing: border-box; border-radius: 4px; background: #15171d; }
#year .yday .yphd svg { display: block; width: 20px; height: 20px; margin: 0; }
#year .yday .ybar { position: relative; flex: 1; height: 18px; margin: 0; border-radius: 3px; overflow: hidden; background: #2a3350; }
#year .yday .ybar svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
#year .yday .yhr { position: relative; height: 15px; font-size: 10px; color: #5a6270; margin: 2px 0 0 34px; }
#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; }
#year .yday .yrows { margin-top: 2px; font-size: 12px; line-height: 1.5; }
#year .yday .yr { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0 5px; border-bottom: 1px solid #dde3ea; }
#year .yday .yr:last-child { border-bottom: 0; }
#year .yday .yk { white-space: nowrap; font-weight: 600; }
#year .yday .yk i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.12); vertical-align: -1px; margin-right: 6px; }
#year .yday .yv { font-size: 13px; white-space: nowrap; }
#year .yday svg.yph circle[fill="#333"], #year .yphd svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
@container yr (min-width: 560px) {
  #year .yday .yrows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
#year svg.yph circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }

/* 赤44・54＝月と地球の距離の変化と満月（1年）＝4行（満月の2つ → 線 → 月の2つ）・行に触るとグラフのその点からレーダーの輪 */
#year_dist .dls { margin: 10px 0 2px; min-height: 190px; } /* 4-h＝4行＋線の高さ（実測 190.5px）を先に取っておく＝計算が終わって行が入っても下が動かない */
#year_dist .dls .r { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 4px; font-size: 12px; line-height: 1.45; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#year_dist .dls .r:hover, #year_dist .dls .r.on { background: #eef2f7; }
#year_dist .dls .sep { border: 0; border-top: 1px solid #dde3ea; margin: 4px 8px; }
#year_dist .dls .dtxt { display: flex; flex-direction: column; }
#year_dist .dls .dtxt span { display: block; white-space: nowrap; }
#year_dist .dls .dph { flex: none; width: 26px; height: 26px; padding: 3px; box-sizing: border-box; border-radius: 4px; background: #15171d; }
#year_dist .dls .dph svg { display: block; width: 20px; height: 20px; margin: 0; }
#year_dist .dls .dph svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
#year_dist .dls b { font-weight: 600; }
#year_dist .dls .mute { color: #5a6270; }
#dist_chart .dpl circle { transform-box: fill-box; transform-origin: center; opacity: 0; vector-effect: non-scaling-stroke; }
#dist_chart .dpl.on circle { animation: dpulse 1.2s ease-out infinite; }
#dist_chart .dpl.on3 circle { animation: dpulse 1.2s ease-out 3; }
#dist_chart .dpl circle + circle { animation-delay: .6s !important; }
/* MOB-18 Step2-10（2026-10-17）＝選んでいる行の点の「止まった輪」（開いた時のスーパームーン）＝輪1つを置くだけ（動きを減らす設定の形と同じ） */
#dist_chart .dpl.sel circle:first-child { opacity: 1; transform: scale(1.8); }
@keyframes dpulse { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(4.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #dist_chart .dpl.on circle:first-child, #dist_chart .dpl.on3 circle:first-child { animation: none; opacity: 1; transform: scale(1.8); } #dist_chart .dpl circle + circle { display: none; } }
#year_dist .dcap { display: block; font-size: 11px; color: #5a6270; margin: 8px 0 0; line-height: 1.5; }

/* 年間の表（判断12＝切替4つ・追従の2階建て＝切替 38 → 月の行 36 → 見出し 30／60） */
#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-phase .cap.c-phase, #year.v-az .cap.c-az, #year.v-dist .cap.c-dist { display: block; }
#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; }
#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: "－"; }
#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-phase table.t-phase, #year.v-az table.t-az, #year.v-dist table.t-dist { display: table; }
#year th, #year td { border-top: 1px solid #eef1f4; padding: 6px 3px; text-align: center; white-space: nowrap; }
#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; }
#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: flex-start; }
/* 赤43＝札は縦に積む */
#year td .tgs { display: flex; flex-direction: column; align-items: flex-start; 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; }
/* 赤41＝月相の札は黒い地＋白い字 */
#year td .tg.q { background: #15171d; color: #eef1f6; border: 1px solid #15171d; padding: 2px 6px 2px 3px; display: inline-flex; align-items: center; gap: 4px; }
#year td .tg.q svg { display: block; width: 13px; height: 13px; }
#year td .tg.q svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
#year td .tg.ms { background: #b07a2a; }
#year td .tg.ec { background: #6b3fa0; }
#year td .tg.bm { background: #2f6fd6; }
#year td .tg.mx { background: #d8701a; }
#year td .tg.mn { background: #6b7892; }
#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; }
/* 赤42＝月齢の表の月相＝黒い地の上に絵だけ */
#year td .tph { display: inline-block; width: 26px; height: 26px; padding: 3px; box-sizing: border-box; border-radius: 4px; background: #15171d; vertical-align: middle; }
#year td .tph svg { display: block; width: 20px; height: 20px; margin: 0; }
#year td .tph svg circle[fill="#333"] { stroke: #8a93a6; stroke-width: 1.2; }
@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; }
}
@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; }
}