/* ===== 本文フォント：LINE Seed をこのページ用に絞ったもの =====
   もとは LINE Seed（© LY Corporation / SIL Open Font License 1.1）。
   OFL は改変と再配布を認めているので、このページに出る文字だけを残して作り直してある
   ── 元のままだと日本語2書体で約4MBあり、携帯回線では書体を待つあいだ紙面が組み上がらない。
   収録は 763字（日）／368字（韓）で、4本あわせて約370KB。

   ★ 名前を "Calendar Sans" に変えてあるのは決まりごと ★
   "LINE Seed JP / KR" は LY Corporation の登録商標で、そのことは元ファイルの
   name テーブル（ID 7）にも書かれている。OFL も改変版が元の名前を名乗ることを禁じている。
   そこで書体名だけを差し替え、著作権表示（© LY Corporation）とライセンス表示は
   ファイルの中にそのまま残した。フッターの出典表記も外さないこと。

   ★ 文字を足したら作り直すこと ★
   画面に出る文字を増やした（新しい祝日名・新しい文言など）ときは、
   収録していない字が端末の書体に落ちて、そこだけ別の書体で出る。
   scripts/subset-fonts.py が index.html から使用文字を拾い直して4本を作り直す
   （元ファイルは fonts-src/ に置いておく）。

   JP と KR の2つを重ねて使う ── JP にはハングルが、KR にはかなが入っていないので、
   足りないほうを相方が受ける。用意しているのは Regular(400) と Bold(700) の2ウェイトだけ。
   woff2 はこのページと同じ場所に置いてある（fonts/）── 外部 CDN から引くと
   埋め込み表示で読み込みが止められるうえ、閲覧者の情報が第三者に渡る */
@font-face{font-family:"Calendar Sans JP";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/calsans-jp-regular.de6d319e.woff2") format("woff2")}
@font-face{font-family:"Calendar Sans JP";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/calsans-jp-bold.aed04137.woff2") format("woff2")}
@font-face{font-family:"Calendar Sans KR";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/calsans-kr-regular.b27ae078.woff2") format("woff2")}
@font-face{font-family:"Calendar Sans KR";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/calsans-kr-bold.4b1effdb.woff2") format("woff2")}
/* タイ語は LINE Seed TH を絞ったもの（英語は LINE Seed JP のラテン文字で足りる）。
   ★ fonts/calsans-th-*.woff2 は scripts/subset-fonts.py で fonts-src/LINESeedTH-{Rg,Bd} から作る ★ */
@font-face{font-family:"Calendar Sans TH";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/calsans-th-regular.650bdef8.woff2") format("woff2")}
@font-face{font-family:"Calendar Sans TH";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/calsans-th-bold.8bdc71cc.woff2") format("woff2")}
/* 台湾語版（tw/）の本文書体（LINE Seed TW の絞り込み）。tw/ では --sans の先頭に来る（build_lang.py）。
   ★ fonts/calsans-tw-*.woff2 も scripts/subset-fonts.py で作る ★ */
@font-face{font-family:"Calendar Sans TW";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/calsans-tw-regular.dd72ac52.woff2") format("woff2")}
@font-face{font-family:"Calendar Sans TW";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/calsans-tw-bold.922eafd6.woff2") format("woff2")}

/* ===== トークン（ライト） ===== */
:root{
  /* 石灰岩のアイボリー・墨黒・真鍮。純白(#FFF)はまぶしいので使わない */
  --ground:#E9E4DA;
  --ground-veil:rgba(233,228,218,.72);   /* 磨りガラスのヘッダー用。--ground と同じ色の半透明（v190 で少し透かした） */
  /* 上端の移動タブ用。ヘッダーより薄く透かし、下を流れる本文の色と形がうっすら残る濃さにする */
  --glass:rgba(233,228,218,.58);
  --glass-2:rgba(248,244,237,.55);
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.55);
  --surface:#F8F4ED;
  --surface-2:#F1EBE1;
  --field:#FEFCF8;         /* 入力欄。カードより明るくして「書ける面」に見せる */
  --ink:#1E1A15;
  --ink-2:#5B5248;
  --ink-3:#6B6457;
  --line:#D9D1C4;
  --line-2:#E7E0D4;
  --kurenai:#A5364A;      /* 臙脂：日本の祝日・日曜 */
  --kurenai-soft:#F4E3E3;
  --ai:#3B5771;           /* 藍鼠：土曜 */
  --ai-soft:#E6EAEF;
  --kr:#7F6212;           /* 韓国の公休日：文字（濃い金）。淡い金の面(--kr-soft)の上で 4.5:1 を切らない濃さ */
  --kr-mark:#A98222;      /* 同：下線バー・枠・スイッチなど面で見せる部分。地との差 3:1 を保つため罫の真鍮(--gold)より一段濃い */
  --kr-soft:#F5ECD6;
  --gold:#B8912F;         /* 真鍮の罫（ヘッダー下の一本だけ） */
  --sakura:#E39BAA;       /* ロゴの桜の花びら（濃）。臙脂より明るく、地の象牙の上で花びらと読める */
  --sakura-2:#F2C4CE;     /* 同（淡） */
  --track-off:#D3CABB;
  --dot-off:#D3CABB;
  --thumb:#FFFFFF;
  --thumb-on:#1E1A15;
  --flash:#E3E6EE;
  --hover-veil:rgba(30,26,21,.055);
  --radius:10px;          /* カード・パネル・コントロールの面 */
  --radius-sm:6px;        /* 日付マス・チップなど面の中の小さな要素 */
  --card-shadow:0 1px 2px rgba(30,26,21,.07), 0 6px 16px rgba(30,26,21,.10);
  --card-shadow-hover:0 2px 4px rgba(30,26,21,.09), 0 12px 28px rgba(30,26,21,.15);
  /* 本文は LINE Seed を絞ったもの。JP→KR の順に重ね、無い字は端末の書体で受ける */
  --sans:"Calendar Sans JP","Calendar Sans KR","Calendar Sans TH","Calendar Sans TW","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  /* 見出しと大きな数字。書体は本文と同じ ── このページで使う書体は LINE Seed だけ、
     という方針にしたので、明朝（Zen Old Mincho）は外した。
     同じ書体でも役割の名前は残してある ── どこが「見出し・数字」なのかが選択子から読め、
     あとで表示用の書体を足すときもここ1行を差し替えるだけで済む。
     大小の差は字の形ではなく、大きさ・太さ・字間で付けている */
  --display:var(--sans);
}
/* ===== トークン（ダーク） ===== 既定はライト。ダークは選んだ人だけ（data-theme / body.force-dark） */
:root[data-theme="dark"], body.force-dark{
  --ground:#101011;
  --ground-veil:rgba(16,16,17,.7);
  --glass:rgba(16,16,17,.52);
  --glass-2:rgba(37,37,38,.5);
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.07);
  --surface:#191919;
  --surface-2:#212122;
  --field:#232324;
  --ink:#ECECEB;
  --ink-2:#A6A6A4;
  --ink-3:#8A8A86;
  --line:#2B2B2C;
  --line-2:#212122;
  --kurenai:#E28C93;
  --kurenai-soft:#2E1C20;
  --ai:#8FA9C2;
  --ai-soft:#1A222C;
  --kr:#D8B45C;
  --kr-mark:#D8B45C;
  --kr-soft:#2E2716;
  --gold:#967C38;
  --sakura:#C8808E;
  --sakura-2:#E4A6B2;
  --track-off:#3A3A3B;
  --dot-off:#5A5A5C;   /* 帯の点（未選択）。track-off だと地に沈んで見えない */
  --thumb:#ECECEB;
  --thumb-on:#101011;
  --flash:#2B2F3C;
  --hover-veil:rgba(236,236,235,.07);
  --card-shadow:0 1px 3px rgba(0,0,0,.44), 0 6px 18px rgba(0,0,0,.38);
  --card-shadow-hover:0 2px 6px rgba(0,0,0,.52), 0 14px 32px rgba(0,0,0,.46);
}
body.force-light{   /* 上の :root と同じ値を保つこと */
  --ground:#E9E4DA;
  --ground-veil:rgba(233,228,218,.72);   /* 磨りガラスのヘッダー用。--ground と同じ色の半透明 */
  --glass:rgba(233,228,218,.58);
  --glass-2:rgba(248,244,237,.55);
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.55);
  --surface:#F8F4ED;
  --surface-2:#F1EBE1;
  --field:#FEFCF8;         /* 入力欄。カードより明るくして「書ける面」に見せる */
  --ink:#1E1A15;
  --ink-2:#5B5248;
  --ink-3:#6B6457;
  --line:#D9D1C4;
  --line-2:#E7E0D4;
  --kurenai:#A5364A;
  --kurenai-soft:#F4E3E3;
  --ai:#3B5771;
  --ai-soft:#E6EAEF;
  --kr:#7F6212;
  --kr-mark:#A98222;
  --kr-soft:#F5ECD6;
  --gold:#B8912F;
  --sakura:#E39BAA;
  --sakura-2:#F2C4CE;
  --track-off:#D3CABB;
  --dot-off:#D3CABB;
  --thumb:#FFFFFF;
  --thumb-on:#1E1A15;
  --flash:#E3E6EE;
  --hover-veil:rgba(30,26,21,.055);
  --card-shadow:0 1px 2px rgba(30,26,21,.07), 0 6px 16px rgba(30,26,21,.10);
  --card-shadow-hover:0 2px 4px rgba(30,26,21,.09), 0 12px 28px rgba(30,26,21,.15);
}

*{box-sizing:border-box}
/* 埋め込み表示（アーティファクトの枠の中など）。枠の高さが中身に追いつかず、
   下まで辿り着けない表示環境があるので、そのときだけ文書を1画面に収めて
   中身を .shell の中でスクロールさせる。スクロール箱に body ではなく普通の要素を
   使うのは、body をスクロール箱にする書き方が端末によって効かないため。
   付け外しは初回描画前のスクリプト（iframe かどうかの判定）が行う */
.embedded, .embedded body{height:100%;overflow:hidden}
.embedded .shell{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
/* ===== スクロールの持ち方 =====
   ふだん（ページを直接開いたとき）は文書そのものをスクロールさせる。いちばん素直で、
   どのブラウザ・端末でも確実に動く ── ここは何も指定しない。
   ＊ html に overflow:hidden を掛けて body をスクロール箱にする書き方は、
     iOS でスクロールを止めるための手口そのもので、実機やデバイスエミュレーションで
     途中から動かなくなることがある。使わないこと。
   埋め込み（iframe）のときだけ、下の .embedded 側に切り替える */
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
/* 入力欄とボタンは、放っておくと書体を受け継がず端末の既定（Arial など）で出る。
   画面の字はすべて Calendar Sans（LINE Seed の抜き書き）で組む決まりなので、
   ここで一括して継がせる ── 年を送る ‹ › が明らかに別の書体で出ていた */
input,button,select,textarea{font-family:inherit}
/* 広告レールを左右に置く3カラム。幅が足りない画面ではレールを出さない（縮小表示は
   AdSense のポリシー違反になるため、出すか出さないかの二択にする） */
.shell{display:grid;grid-template-columns:minmax(0,1340px);justify-content:center}
/* 書体は .shell で当てる（body ではなく）── タイ語版・台湾語版は本文の大半がその言語なので、
   --sans の先頭をその書体にする。言語はディレクトリ（data-lang）で決まり、CSS は全言語で同じ一つのファイル */
.shell{font-family:var(--sans)}
.shell[data-lang="th"]{--sans:"Calendar Sans TH","Calendar Sans JP","Calendar Sans KR","Calendar Sans TW","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
.shell[data-lang="tw"]{--sans:"Calendar Sans TW","Calendar Sans JP","Calendar Sans KR","Calendar Sans TH","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}
.page{min-width:0;padding:0 clamp(16px,3vw,32px) 64px;container:main / inline-size}

.side{min-width:0;display:flex;flex-direction:column;gap:20px}
/* 日付計算スロットはカード2枚（期間の日数・加算と減算）を入れ替えるための箱。
   箱のままだと親（.side）の gap が箱の外側にしか効かず、中の2枚が余白なしで
   くっついてしまう。display:contents で2枚をそのまま親の並びに参加させ、
   レール表示でも本文下の1列でも他のカードと同じ間隔になるようにする */
#calcSlot{display:contents}
.ad-label{font-size:12px;letter-spacing:.26em;color:var(--ink-3)}

/* ===== サイドの情報パネル ===== */
.panel{
  container-type:inline-size;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow);
  padding:16px 15px 14px;
}

/* ===== カード面に共通のふるまい（ポインタが載ったとき） =====
   もとは月カードだけが持っていた反応を、本文の一覧・サイドの道具・広告まで同じにそろえた。
   上辺に真鍮の罫が差し、影が一段深くなる ── 面は動かさない（持ち上げると紙が浮いて見える）。
   ＊ これは「押せる」という合図ではない。月カードは前から押せないままこの反応をしている。
     押せるかどうかは cursor と、カードの中に置いた行き先の札・押したときの沈み込みが受け持つ。
   ＊ 罫は ::before で敷く。中に入力欄があるカードもあるので、必ず pointer-events:none にして
     クリックを吸わせないこと。
   ＊ ホバーのある環境だけに限る ── 触る画面ではホバーが貼り付いて戻らない */
.month,.panel,.section--card,.infeed-card{
  position:relative;
  transition:box-shadow .2s ease;
}
.month::before,.panel::before,.section--card::before,
.infeed-card::before{
  content:"";position:absolute;inset:0 0 auto;height:2px;pointer-events:none;
  background:var(--gold);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  opacity:0;transition:opacity .2s ease;
}
@media (hover:hover){
  .month:hover,.panel:hover,.section--card:hover,
  .infeed-card:hover{box-shadow:var(--card-shadow-hover)}
  .month:hover::before,.panel:hover::before,.section--card:hover::before,
  .infeed-card:hover::before{opacity:1}
}
.p-eyebrow{
  display:inline-block;font-size:12.5px;letter-spacing:.24em;color:var(--ink-3);
  border-bottom:1px solid var(--gold);padding-bottom:3px;margin-bottom:11px;
}
.panel h3{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.08em;margin:0 0 12px}
.p-sub{font-size:12.5px;letter-spacing:.16em;color:var(--ink-3);margin:14px 0 6px}
.p-sub:first-of-type{margin-top:0}
.p-note{margin:12px 0 0;font-size:13px;line-height:1.75;color:var(--ink-3)}

.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.plist li{display:flex;align-items:center;gap:6px;font-size:13.5px;flex-wrap:wrap}
.plist b{font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink-2)}
.plist--name li{align-items:baseline}
.pname{font-size:13px;color:var(--ink-3);flex:1 1 auto;min-width:0;line-height:1.5}
.pbadge{
  font-size:12.5px;letter-spacing:.06em;padding:1px 7px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
}
.pflag{
  font-style:normal;font-size:12.5px;width:18px;height:18px;flex:none;
  display:grid;place-items:center;border-radius:var(--radius-sm);
  background:var(--kurenai-soft);color:var(--kurenai);
}
/* 国旗バッジの色はカレンダーのマス・月チップと同じ ── 日本＝臙脂、韓国＝金。
   ここを揃えないと、同じ「韓」でもカードだけ赤く見えてしまう */
.pflag--kr{background:var(--kr-soft);color:var(--kr)}
.pempty{font-size:13px;color:var(--ink-3)}

/* ===== 今日カード =====
   押すと今月のマスへ飛ぶ。面の反応（影と真鍮の罫）は上のカード共通のふるまいに任せ、
   ここでは「押せる」ことに固有の手がかりだけを足す ──
   ホバーの無い触る画面には共通のふるまいが届かないので、肩の行の行き先表示が本体になる */
.panel--today{cursor:pointer}
/* 押した瞬間のわずかな沈み込み。触る画面ではこれが唯一の手ごたえになる
   （カレンダーのマスと同じ作法。面が大きいぶん縮み幅はずっと小さく） */
.panel--today{transition:box-shadow .2s ease,transform .08s ease}
.panel--today:active{transform:scale(.99)}
/* 肩の行：左に「今日」、右に行き先 */
/* カードの肩の行。左に肩の小見出し、右に添えもの（行き先・変動率など）を置く */
.p-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:11px}
.p-head .p-eyebrow{margin-bottom:0}
.t-go{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  font-size:12.5px;color:var(--ink-3);letter-spacing:.06em;white-space:nowrap;
  transition:color .15s;
}
.t-go i{font-style:normal;font-size:12px;line-height:1;transition:transform .2s ease}
@media (hover:hover){
  .panel--today:hover .t-go{color:var(--ink)}
  .panel--today:hover .t-go i{transform:translateX(2px)}
}
/* ===== 開いた直後の合図（毎回） =====
   やっているのは「ホバーしたときの反応」を2度なぞるだけ ── 面が浮き、上辺に真鍮の罫が差す
   （罫そのものは上のカード共通のふるまいが用意している）。
   新しい動きを覚えてもらうのではなく、この先どう反応する面なのかを先に見せる。
   ・点滅させない。静かな紙面でちかちかさせると、広告の差し込みに見える
   ・2回で止める。繰り返すものは急かしているように読める
   動きを減らす設定の人には出ない（下の prefers-reduced-motion がまとめて止める）ので、
   上の「行き先」表示のほうが本体で、こちらは添えという関係にしてある */
.panel--today.is-hinting{animation:todayHintCard 1.4s ease-in-out .7s 2}
.panel--today.is-hinting::before{animation:todayHintRule 1.4s ease-in-out .7s 2}
@keyframes todayHintCard{
  0%,100%{box-shadow:var(--card-shadow)}
  45%{box-shadow:var(--card-shadow-hover)}
}
@keyframes todayHintRule{
  0%,100%{opacity:0}
  45%{opacity:1}
}
/* 日付行はボタン。キーボードでも飛べるようにするため、見た目だけ元の <p> に戻す */
.t-date{
  font-family:var(--display);font-size:15px;color:var(--ink-2);margin:0 0 9px;
  display:block;width:100%;text-align:left;
  border:0;padding:0;background:transparent;cursor:pointer;
}
.t-date b{font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin:0 1px}
/* 曜日と年号は日付の添え。大きな数字より一段落として、同じ見た目でそろえる。
   年号は括弧ごと折り返す ── レール幅（200px）では「（令和 8」で切れてしまうため */
.t-date .t-dow,.t-date .t-era{font-family:var(--sans);font-size:13px;color:var(--ink-3);margin-left:8px;letter-spacing:.08em}
.t-date .t-era{white-space:nowrap}
.t-date.is-holiday b{color:var(--kurenai)}
.t-plain{margin:0;font-size:13.5px;color:var(--ink-2)}
/* カードが狭いうちは縦積み。横並びは下の「カードが広いとき」でまとめて切り替える */
.t-grid,.r-grid,.a-grid,.d-grid{display:flex;flex-direction:column;gap:13px}
.b-grid{display:flex;flex-direction:column;gap:14px}

/* 為替カード（サンプル表示） */
.r-main{margin:0 0 5px;font-family:var(--display);font-size:14px;color:var(--ink-2)}
.r-main b{font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:4px}
.r-sub{margin:0;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.r-delta{font-size:12.5px;padding:1px 7px;border-radius:var(--radius-sm)}
.r-delta.up{color:var(--kurenai);background:var(--kurenai-soft)}
.r-delta.down{color:var(--ai);background:var(--ai-soft)}
.r-note{margin:11px 0 0;font-size:13px;line-height:1.7;color:var(--ink-3)}

/* ===== 入力欄（為替換算） =====
   打てる欄だと見て分かるように、カードより一段沈んだ面＋内側の影にして、
   単位は枠の中に入れる。レール幅（168px）でも1行に収まる作りにしてある */
.r-conv{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
/* ===== 為替の推移グラフ =====
   目盛りの数字と日付は SVG の外（HTML）に置く ── 中に入れると、カードがレール幅
   (168px)のときと本文の下(500px超)のときで字の大きさが3倍変わってしまうため。
   折れ線と目盛り線だけを preserveAspectRatio="none" で横に伸ばし、営業日の点は
   HTML の丸を重ねて打つ（SVG の circle は横に伸ばすと楕円になる）。
   色は為替カードの変動率と同じ ── 上げ＝臙脂、下げ＝藍鼠 */
.tr-chart{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:8px}
/* 目盛りの幅は固定。値は3桁＋小数1桁（例 876.8）で桁が増えないので、これで足りる */
.tr-scale{position:relative;font-size:12px;line-height:1;text-align:right;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
/* 字の中心を目盛り線の高さに合わせる。top は JS が実データの位置から入れる */
.tr-scale span{position:absolute;right:0;transform:translateY(-50%)}
/* 左右を5pxずつ内側に寄せてある。点は中心を折れ線の位置に置く作りなので、
   両端の点（最終日は直径9px）が枠から半径ぶんはみ出す ── 見た目には
   カードの余白に隠れて分からないが、枠の内容が外へ出ている状態ではある。
   折れ線（svg）と点はどちらもこの枠を基準に置いているので、枠ごと寄せれば
   ずれずにそのまま収まる。5px は最終日の点の半径 4.5px より少しだけ大きい値 */
.tr-plot{position:relative;height:78px;margin:0 5px}
.tr-plot svg{display:block;width:100%;height:100%}
.tr-plot polyline{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round}
.tr-plot polygon{stroke:none}
/* 週の最高・最安を示す破線。実線にすると折れ線と見分けがつかない */
.tr-plot line{stroke:var(--line);stroke-width:1px;stroke-dasharray:2 4}
.tr-plot.up{color:var(--kurenai)}
.tr-plot.up polygon{fill:var(--kurenai-soft)}
.tr-plot.down{color:var(--ai)}
.tr-plot.down polygon{fill:var(--ai-soft)}
/* 1営業日＝1点。点があると「7日ぶんの折れ線」だと一目で分かる */
.tr-dot{position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 1.5px currentColor;
  transform:translate(-50%,-50%)}
.tr-dot--last{width:9px;height:9px;background:currentColor;box-shadow:0 0 0 2px var(--surface)}
/* 日付は両端の点の真下に来るよう、折れ線と同じだけ内側に寄せる */
.tr-axis{grid-column:2;display:flex;justify-content:space-between;margin:7px 5px 0;
  font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.panel--trend .plist b{font-family:var(--display);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.f-field + .f-field{margin-top:10px}
.f-row{
  display:flex;align-items:center;gap:8px;
  background:var(--field);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:0 11px;
  transition:border-color .15s,box-shadow .15s;
  cursor:text;
}
@media (hover:hover){ .f-row:hover{border-color:var(--ink-3)} }
.f-row:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px var(--hover-veil)}
.f-unit{flex:none;font-size:14px;color:var(--ink-3);letter-spacing:.06em}
.f-row input{
  flex:1 1 auto;min-width:0;width:100%;
  border:0;background:transparent;outline:none;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:10px 0;text-align:left;font-variant-numeric:tabular-nums;
}
/* 兆の桁まで入れるとレール幅(168px)では16pxだと収まらないので、長いときだけ字を詰める */
.f-row input.f-long{font-size:14px;letter-spacing:-.01em}
.f-row input::placeholder{color:var(--ink-3);opacity:.6}
/* 入力した額をそのまま持ち出せるコピーボタン。枠の中、単位の右に収める */
.f-copy{
  flex:none;width:24px;height:24px;display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--ink-3);cursor:pointer;
  transition:background .15s,color .15s;
}
@media (hover:hover){ .f-copy:hover{background:var(--surface-2);color:var(--ink)} }
/* 押した直後だけチェックに差し替える。色は墨 ── 金は「韓国」の意味で使っているので避ける */
.f-copy .ic-done{display:none}
.f-copy.is-copied{color:var(--ink)}
.f-copy.is-copied .ic-copy{display:none}
.f-copy.is-copied .ic-done{display:block}

/* ===== 日付の入力欄 =====
   「打つ欄」と「選ぶ欄」を分けた二段構え（v212）。
   ・数字で打つ：見えている欄（.f-date）は type="text" の自前の欄。数字を続けて打てば
     年4桁 → 月 → 日（→ 時 → 分）と区切りが自動で入る（JS の maskDigits）。
     以前は端末の日付欄（type="date"）にそのまま打たせていたが、
       ・Safari（Mac）は年の欄が4桁で止まらず、数字を続けて打つと全部が年に入った
       ・スマートフォンは欄を押すと必ずカレンダーが開き、数字で打つ道がなかった
     ので、打つほうを自前の欄に替えた。書式は言語によらず 年/月/日 に揃える
     （年から始まる並びなら、月と日の順を取り違えることがない）。
   ・カレンダーで選ぶ：右端の線画（.f-cal）の真上に、透明な端末の日付欄（.f-pick）を重ねてある。
     押すと端末がそのままカレンダーを開くので、埋め込み（別オリジンの枠）の中でも確実に開く
     （showPicker は別オリジンの枠では拒まれる）。選んだ値は JS が打つ欄へ写す。
     ★ .f-pick を display:none にしないこと ── 消すと押す先がなくなる
     ★ 線画はボタンにしないこと ── 飾り（pointer-events:none）として敷き、押されるのは真上の .f-pick
   ・Chrome 系は日付欄のうちアイコンの部分でしかカレンダーを開かないので、
     そのアイコン（::-webkit-calendar-picker-indicator）を .f-pick いっぱいに広げてある */
.f-row--date{position:relative;cursor:text}
.f-row input.f-date{min-width:0;padding-right:30px}
/* 日時（年月日＋時分）は字数が多い。レール幅（168px）に「2027/01/01 09:05」が収まるよう、
   字を二段小さく詰め、アイコンの逃げも 26px に縮める（14px では 13px ぶん はみ出した）。
   ただし触る画面では 16px を割らないこと ── iOS は 16px 未満の欄に焦点が入ると画面を拡大する。
   触る画面はレールの出ない幅なので、欄の幅には余裕がある */
.f-row input.f-date--dt{font-size:13px;letter-spacing:-.02em;padding-right:26px}
@media (pointer:coarse){ .f-row input.f-date--dt{font-size:16px;letter-spacing:0;padding-right:30px} }
.f-row input.f-pick{
  position:absolute;top:0;right:8px;width:30px;height:100%;min-width:0;
  margin:0;padding:0;border:0;opacity:0;cursor:pointer;
  font-size:16px;   /* 同じく iOS の拡大よけ */
}
.f-row input.f-pick::-webkit-calendar-picker-indicator{
  position:absolute;top:0;right:0;bottom:0;left:0;width:auto;height:auto;
  margin:0;padding:0;opacity:0;cursor:pointer;
}
.f-cal{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;display:grid;place-items:center;
  color:var(--ink-2);pointer-events:none;transition:color .15s;
}
.f-cal svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* ポインタは透明な .f-pick の上に載るので、反応は行（.f-row--date）側で受けて線画に伝える */
@media (hover:hover){ .f-row--date:hover .f-cal{color:var(--ink)} }


/* ===== 加算・減算の符号 =====
   言語切り替えと同じ帯（.seg）にして、＋と−の両方を出したまま選ばせる。
   「押すと切り替わる」1つのボタンだと、いま足しているのか引いているのかが読めない。
   寸法は .seg button より後ろ（ヘッダーの節）でまとめて指定している */
.dc-delta{display:flex;align-items:center;gap:8px}
.dc-delta .f-field{flex:1 1 auto;min-width:0}
.dc-delta .seg{flex:none}

/* ===== よく使う日数への近道 =====
   押せる面であることが要る場所なので、枠と地のあるボタンにする（年の ‹ › と同じ作り）。
   字は数字と符号だけに詰めて、レール幅（168px）で3つ並ぶようにしてある ──
   「今日から30日後」と書くと1行に1つしか置けず、6行ぶんの高さを使ってしまう。
   意味は上の小見出し（今日から）と、読み上げ用の名前が受け持つ */
/* 3つずつ2行。幅は等分にする ── 中身に合わせると「−120」だけ広くなって折り返しがずれ、
   レール幅では 3+2+1 の3行に割れてしまう。広いカードでも間延びしないよう頭打ちを置く */
.dc-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:220px}
.dc-quick button{
  height:28px;padding:0 4px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);
  font-family:var(--sans);font-size:13px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,transform .08s ease;
}
@media (hover:hover){ .dc-quick button:hover{border-color:var(--ink-3);color:var(--ink)} }
/* 押した瞬間の手ごたえ。触る画面ではこれが唯一の反応になる（カレンダーのマスと同じ） */
.dc-quick button:active{transform:scale(.94)}

/* ===== カウントダウン =====
   日・時間・分・秒を横一列に。日だけ桁が伸びる（最長で4桁）ので、そこだけ欄を広く取る
   ── 4等分にすると「120」がはみ出す。
   広いカードでも数字が散らばらないよう頭打ちを置く（近道ボタンと同じ考え方）。
   単位の字は12px ── 本文まわりの下限。これ以上は小さくしない */
.cd-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:0 4px;max-width:260px;text-align:center}
.cd-cell b{
  display:block;font-family:var(--display);font-size:24px;font-weight:700;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2;
}
.cd-cell span{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.04em;margin-top:1px}
.cd-grid--long .cd-cell b{font-size:18px}

/* ===== 期間の答え：日数と営業日を縦罫で分ける ===== */
/* 縦罫はちょうど真ん中。左右を1frずつで等分し、間の空きは gap ではなく
   それぞれの内側の余白で取る ── gap を使うと罫が半分ぶんだけ右へずれる */
.dc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:start}
.dc-split .p-sub{margin-top:0}
.dc-cell{padding-right:14px}
.dc-cell--biz{border-left:1px solid var(--line-2);padding-left:14px;padding-right:0}
/* 桁が増えると半分の幅（レールでは70px）に収まらなくなるので、長いときだけ字を詰める
   ── 為替の入力欄（.f-long）と同じ考え方。
   クラスを2つ重ねているのは、打ち消す相手（.a-main b, .dc-main b）が
   この下の「満年齢カード」の節にあり、同じ重みだと後ろのほうが勝ってしまうため */
.dc-main.dc-main--long b{font-size:18px;margin:0 1px}
/* 営業日は数字だけを並べる。単位は上の小見出し（営業日）が受け持つ */
.dc-cell--biz .plist b{font-variant-numeric:tabular-nums}
/* 設定のスイッチ（初日を含む）。韓国トグルと同じ部品だが、あちらの金は「韓国」を指す色。
   ここは国と関係ない入り切りなので、入のときは墨（＝現在の状態）にする。
   .toggle を二重に書いて重みを上げているのは、打ち消す相手（.toggle input:checked）が
   この下のヘッダーの節にあり、同じ重みだと後ろのほうが勝ってしまうため */
.toggle--plain{margin-top:13px}
.toggle.toggle--plain input:checked + .track{background:var(--ink)}
/* 墨の面に載るものは --surface ── 白（--thumb）で固定すると、ダークでは
   面も玉も明るい色になって玉が消える。セグメントの選択中や符号ボタンと同じ組み合わせ */
.toggle.toggle--plain input:checked + .track .thumb{background:var(--surface)}

/* 読みの補助。出たり消えたりで高さが跳ねないよう場所を先に確保する */
.f-hint{margin:4px 2px 0;min-height:1.25em;font-size:12.5px;color:var(--ink-3);text-align:left}
.r-note .tag{margin-right:5px;vertical-align:1px}
.r-grid .r-note{margin-top:0}   /* 段の間隔は .r-grid の gap に任せる */

/* ===== 満年齢カード =====
   数字の見せ方は「今日」カードの日付・為替の主レートとそろえる ── 単位は小さいまま、
   数だけ大きく。この行がカードの主役だと一目で分かるようにする */
.a-main,.dc-main{margin:12px 0 0;font-family:var(--display);font-size:14px;color:var(--ink-2)}
.a-main b,.dc-main b{font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin:0 3px}
/* 期間の日数は段の先頭に出る主役なので、前後の余白を外す */
.dc-main{margin:0}
/* 加算・減算の答え。「今日」カードの日付と同じ組み方（月日を大きく、添えは小さく）にそろえ、
   その上に年を小さく置く ── 基準日から動いた先は別の年になることがあるため */
.dc-year{display:block;font-size:13px;color:var(--ink-3);letter-spacing:.08em;margin-bottom:1px}
/* 表示範囲の外（カレンダーを開けない年）はただの表示になるので、押せる手ざわりを消す */
.t-date--static{cursor:default}
/* 数え年は行を分けず、満年齢のうしろに括弧で小さく添える。
   明朝で組んだ主役の数字と区別がつくよう、ここだけゴシックに落とす。
   括弧ごと折り返して数字だけが次の行に残らないよう nowrap にしておく */
.a-counted{font-family:var(--sans);font-size:13px;color:var(--ink-3);
  margin-left:5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== カードが広いとき：中身を横一列に並べて右の余白を埋める =====
   基準はカード自身の幅（container-type:inline-size）なので、置き場所が
   サイドレールでも本文下でも同じ規則で決まる。200〜300px のレールに入って
   いるあいだは下限に届かず、これまでどおり縦積みのまま。 */
@container (min-width:520px){
  /* 今日・為替・ビジネスは同じ2列組み。仕切りは「今日」カードの罫に合わせる */
  .t-grid,.r-grid,.b-grid,.a-grid,.d-grid{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:0 32px;align-items:start;
  }
  .t-grid > .t-col + .t-col,
  .r-grid > .r-col + .r-col,
  .b-grid > .b-col + .b-col,
  .a-grid > .a-col + .a-col,
  .d-grid > .d-col + .d-col{border-left:1px solid var(--line-2);padding-left:32px}

  /* 横に広がったぶん推移グラフも縦に伸ばして、起伏が潰れないようにする */
  .tr-plot{height:104px}
}

/* インフィード広告（ネイティブ）。本文の切れ目に挟む前提 */
.infeed{display:flex;flex-direction:column;gap:8px;margin:40px 0 0}
/* ===== 広告の場所をあらかじめ空けておく（CLS 対策） =====
   実際の広告は読み込みが終わってから高さが決まる。場所を空けずに置くと、
   届いた瞬間に下の本文がその高さぶん押し下げられる ── Core Web Vitals の CLS が悪化し、
   読んでいた行を見失わせる。そこで枠の下限だけ先に取っておく。
   値は AdSense の代表的なユニットの高さに合わせてある
   （横長バナー90px／携帯バナー100px／インフィード150px／アンカー50px）。
   いまの見本はどれもこれより背が高いので、見た目は変わらない。
   ★ 実ユニットに差し替えたら、その枠の実寸に合わせてここも直すこと ★
   下限を実寸より大きく取ると、広告が返ってこなかった日に空白が残る */
.infeed-card{
  min-height:150px;
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;
  padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--card-shadow);cursor:pointer;
  transition:box-shadow .2s ease;
}
/* ★ 広告の見本画像（.infeed-thumb の SVG）の中の字だけは、
   紙面の書体（Calendar Sans）を当てないこと ★
   広告は他所から来る絵なので、紙面の書体を貸すと自分の紙面の一部に見えてしまう。
   書体の見直しでこの1行をまとめて消さないように。
   指定を外すと「端末の既定」に戻るのではなく body から var(--sans) を受け継ぐので、
   外すのではなく、ここで総称ファミリーへ明示的に切り替える。
   sans-serif は書体の名前ではなく CSS の総称ファミリーなので、
   その名前の書体が入っていなくても必ず端末の既定のゴシックに解決される */
.infeed-thumb svg{font-family:sans-serif}
.infeed-thumb{width:100%;overflow:hidden;border-radius:var(--radius-sm)}
.infeed-thumb svg{width:100%;height:auto;display:block}
.infeed-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.infeed-body b{font-size:17px;font-weight:500;color:var(--ink);letter-spacing:.02em;line-height:1.45}
.infeed-body span{font-size:14px;color:var(--ink-2);line-height:1.6}
.infeed-body em{font-size:13px;font-style:normal;color:var(--ink-3);letter-spacing:.06em}
@media (max-width:540px){
  .infeed-card{grid-template-columns:86px minmax(0,1fr);gap:13px;padding:12px}
  .infeed-body b{font-size:16px}
  .infeed-body span{font-size:13.5px}
}
@container main (max-width:540px){
  .infeed-card{grid-template-columns:86px minmax(0,1fr);gap:13px;padding:12px}
  .infeed-body b{font-size:16px}
  .infeed-body span{font-size:13.5px}
}
.today-top{display:none}
.toolsnav{display:none}   /* 狭い画面だけ出す（下の @media で display:block） */
/* 幅が足りないうちは本文の下へ回す（広告と違い、隠してしまうと情報が失われるため） */
@media (max-width:1399px){
  /* ★justify-content:flex-start を必ず入れること★
     .shell の既定は grid で、そこに付いている justify-content:center は「横方向の中央」。
     ところがここで flex-direction:column に変えると、同じ指定が「縦方向の中央」に化ける。
     .shell の高さが決まる状況（枠に収めてスクロールさせるとき、埋め込み先が高さを
     決めてくるときなど）では、中身が上下へはみ出して上半分がスクロールで辿り着けなくなる。
     中身が長いほど（＝画面が狭いほど）届かない量が増える、という形で表面化する */
  .shell{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  /* ★ 縮ませないこと ★ 埋め込み表示（アーティファクトの枠）では .shell に height:100% が付き、縦のフレックスの
     中身が枠より長いと、縮められる子が縮む。overflow を持つ子（横に流す帯にしたレール）は最小の高さが 0 なので
     そこだけが潰れ、道具のカードが「上の数十px しか見えない」状態になった（開発者の報告 2026-09-18、v186 で修正） */
  .shell > *{flex-shrink:0}
  .page{order:1;width:100%}
  /* カードは幅がいくらあっても1枚ずつ横幅いっぱいに置く。横に並べると1枚が細くなり、
     下の @container の下限に届かず中身まで縦積みに戻ってしまうため、列は増やさない。
     align-items:start がないと背の高いカードに合わせて引き伸ばされる。
     幅と余白は .page と同じ指定にすること。max-width をここだけ付けると、
     1340px を超える画面で本文（連休など）より内側に寄って見える */
  .side{order:3;width:100%;padding:0 clamp(16px,3vw,32px);
        display:grid;grid-template-columns:minmax(0,1fr);
        gap:16px;align-items:start}
  /* 上のタブ（為替 → 日付計算）と同じ順に並べる。タブの行き先が画面の上下で
     前後していると、押すたびに行ったり来たりしているように見えるため。
     左レールの中身（日付計算）はここでは後ろに回る。
     2つは別々の aside なので .side の gap は両者のあいだに効かない ──
     同じ16pxをここで足さないと、上下のカードが影ごと重なって見える。
     下余白は最後に来るほうに付ける */
  .side--travel{order:4;margin-top:16px;padding-bottom:40px}
  /* order を付けないと、既定値0のフッターが先頭へ回り込む */
  .about{order:5}
  .footer{order:6;width:100%}
  /* ===== 道具の切り替え（狭い画面だけ） =====
     本文のあと、レールのカードの前に「年齢計算／為替計算／日付計算」の3択を置き、選んだ組のカードだけを出す。
     以前は上端に貼り付く移動タブで本文とレールを行き来させていたが、月カレンダーが横の帯になって
     縦の長さが縮んだので、行き来の帯を外してこちらに替えた（開発者の指示 2026-09-18）。
     年齢＝年齢計算、為替＝為替換算＋為替推移、日付＝日付・営業日計算＋加算減算＋カウントダウン。
     出さない側の aside は display:none にしてしまう ── 空の箱が余白だけ残すため。
     広告枠は触らない（display:none の中に置くと AdSense のポリシーに触れる） */
  .toolsnav{display:block;order:2;width:100%;padding:0 clamp(16px,3vw,32px);margin-top:8px}
  .toolsnav .seg{max-width:none}
  .tools-age .side--travel,.tools-rate .side--travel,.tools-date .side--biz{display:none}
  .tools-age .panel--rate,.tools-age .panel--trend,.tools-rate .panel--age{display:none}
  .tools-date .side--travel{margin-top:16px}
  /* 今日の情報は先に見せる。12か月ぶんスクロールした先にあっても意味がない */
  .today-top{display:block;margin:0 0 18px}
}
/* 両脇に置けるだけの幅があるとき。下限は「月グリッドが3列を保てる幅」で決めている
   ── レール200px＋間隔24pxを両側に置くと中央は W-448px になり、1393px を割ると
   中央が痩せて月グリッドが2列に落ちる。主役はカレンダーなので、2列にしてまで
   両脇には出さず、少し余裕をみた 1400px を境にした。
   MacBook は13インチ1440px・14インチ1512pxなので、ノートPCでは両脇に出る。
   これより狭い画面（iPad Pro 横向き1366px、iPad Air 横向き1180pxなど）でも
   カードは消えない ── 下の max-width 側で本文の下へ回り、幅いっぱい
   （@container 520px以上）の2段組みで出る。
   レールは200px＋間隔24px ── これ以下に狭めるとカードの中の行が2行に折れる */
@media (min-width:1400px){
  .shell{grid-template-columns:200px minmax(0,1340px) 200px;gap:0 24px}
  /* 列は文書の並び（本文 → 右 → 左）ではなく名指しで置く。
     自動配置に任せると本文が左端の列に入ってしまう */
  .side--travel{grid-column:1;grid-row:1}
  .page{grid-column:2;grid-row:1}
  .side--biz{grid-column:3;grid-row:1}
  .side{
    /* 見出し(h1)と同じ高さから始めて、画面の上を余らせない。
       30px は .masthead の padding-top と同じ値。
       ヘッダーの罫は中央カラムの幅しかないので、横に並んでもぶつからない */
    margin-top:30px;
    position:sticky;
    align-self:start;
    /* top は JS が入れる。画面に収まるときは 30px（＝その場で固定）、
       収まらないときは負の値にして「下端が見えるまで一緒にスクロールしてから止まる」。
       中でスクロールさせると、隠れている分があることに気づけないため */
    top:30px;
  }
}
/* レール表示のときは、フッターも本文と同じ中央カラムに置いて幅をそろえる */
@media (min-width:1400px){
  .about{grid-column:2;grid-row:2}
  .footer{grid-column:2}
}
@media (min-width:1900px){
  .shell{grid-template-columns:300px minmax(0,1340px) 300px;gap:0 34px}
}

/* ===== ヘッダー ===== */
.masthead{
  position:sticky;top:0;z-index:20;
  background:var(--ground);
  border-bottom:1px solid var(--gold);
  /* ===== 2列2段の格子 =====
       題字 ─────────── 言語
       説明文 ───────── 年の切り替え
     もとは横一列の並び（flex）で、入りきらなければ折り返す作りだった。
     折り返すかどうかが説明文の長さで決まるため、言語を切り替えただけでヘッダーの高さが
     50px 跳ねていた（日本語の説明文は韓国語より41px長い）。
     格子なら段の数が文章の長さで変わらないので、どの言語でも同じ形になる。
     左の列は 1fr ── 幅が足りないときは説明文の側が縮み、右の2つは動かない */
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:20px;row-gap:12px;
  padding:30px 0 18px;
  margin-bottom:26px;
}
/* 題字と説明文はひとかたまりのまま、左列で2段ぶんの高さを使う */
/* 題字は左列の上段、説明文はその下。狭い画面では説明文が全幅を使えるよう、
   ひとかたまりにせず別々の升に置いてある */
.masthead > .brand-title{grid-column:1;grid-row:1;align-self:end}
.masthead > .brand-tag{grid-column:1;grid-row:2}
/* 右上の道具（お問い合わせ・言語・テーマ）は題字と天を揃える。年の切り替えは下段の右端 */
.masthead > .hdr-tools{grid-column:2;grid-row:1;justify-self:end;align-self:start}
.masthead > .controls{grid-column:2;grid-row:2;justify-self:end;align-self:end}
/* 年の切り替え（512px）と説明文が横に並べない幅では、年だけ下の段へ送って全幅で使う。
   925px は実測値：年の切り替え(512px)＋間隔(20px)＋日本語の説明文(310px)＋左右余白(64px)。
   ★ 年チップの字の大きさ・本数や説明文を変えたら測り直すこと ★ */
@media (max-width:924px){
  /* 説明文は言語の下をくぐって全幅で流す。年の切り替えはさらに下の段へ */
  .masthead > .brand-tag{grid-column:1 / -1}
  /* stretch にしないと、年の切り替えが升の幅（360pxの端末で328px）ではなく
     中身の幅（357px）のまま置かれ、紙面が横に13pxはみ出す。
     幅を升に合わせておけば、年チップの帯（.years）が縮んで中で横スクロールする */
  .masthead > .controls{grid-column:1 / -1;grid-row:3;justify-self:stretch}
}
/* 磨りガラス（開発者の言い方では「リキッドグラス」）。下を流れる本文の色と形がうっすら残る程度に透かし、
   ぼかしと彩度を強めに掛ける。上端に髪の毛ほどの明るい縁（--glass-sheen）でガラスの厚みを出し、
   下端は真鍮の罫（border）と薄い影で紙面から浮かせる。
   ぼかしに対応しない環境では透かさない ── 透けるだけだと下の日付と重なって読めなくなるため */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .masthead{
    background:var(--ground-veil);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    backdrop-filter:blur(22px) saturate(180%);
    box-shadow:var(--glass-sheen), 0 6px 20px rgba(30,26,21,.08);
  }
}
/* ===== 狭い画面（1399px以下）でもヘッダーを固定する（開発者の指示 2026-09-18） =====
   sticky にできないのは、ヘッダーの親（.page）が狭い画面では本文の途中で終わる（そのあとに道具のレールが続く）ため
   ── 親を出た瞬間に貼り付きが外れる。そこで fixed にして、本文の頭に同じ高さの余白（--head-h、JS が実測）を取る。
   横の余白は .page と同じ値にして、中の格子（題字・道具・年）が本文と揃うようにする。
   高さは 390px で約 165px あるので、少しスクロールしたら説明文の行を畳んで縮める（.is-scrolled、924px以下） */
@media (max-width:1399px){
  .masthead{
    position:fixed;top:0;left:0;right:0;z-index:20;margin:0;
    padding:calc(18px + env(safe-area-inset-top,0px)) clamp(16px,3vw,32px) 14px;
    transition:padding .2s ease;
  }
  .page{padding-top:calc(var(--head-h, 170px) + 14px)}
}
@media (max-width:924px){
  .masthead > .brand-tag{transition:max-height .2s ease,opacity .15s ease;max-height:3em;overflow:hidden}
  .masthead.is-scrolled{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px;row-gap:8px}
  .masthead.is-scrolled > .brand-tag{max-height:0;opacity:0;margin:0}
}

.brand-title{margin:0;line-height:1}
/* ロゴの高さ。文字の 1em はロゴの高さの 0.7 倍（46/66）なので、34〜44px で以前の題字（26〜34px）と
   同じ大きさの字になる。幅は自動 ── 日本語と韓国語で文字の長さが違うぶん、viewBox ごと JS が入れ替える。
   花びらは枠の外へ少しはみ出すので overflow は見せる */
.brand-logo{display:block;height:clamp(34px,3.4vw,44px);width:auto;color:var(--ink);overflow:visible}
/* 桜の花びら：開いた直後だけ、左上からゆっくり落ちて回りながら定位置に収まる（6秒・1回）。
   3枚は位相をずらす。動きを減らす設定では最初から定位置 */
.brand-logo .pt{animation:sakuraFall 6s ease-in-out 1 both;transform-box:fill-box;transform-origin:center}
.brand-logo .pt:nth-of-type(2){animation-delay:.6s}
.brand-logo .pt:nth-of-type(3){animation-delay:1.2s}
@keyframes sakuraFall{0%{translate:-14px -18px;rotate:-40deg;opacity:0}20%{opacity:1}100%{translate:0 0;rotate:0deg;opacity:1}}
@media (prefers-reduced-motion: reduce){ .brand-logo .pt{animation:none} }
.brand-logo .wm{display:none}
/* 表示中の言語の組だけ出す。属性名を data-lang にしないこと ── 言語ボタンを拾う [data-lang] に
   ロゴまで引っかかり、ロゴを押すと言語が切り替わってしまう */
.brand-logo[data-wm="ja"] .wm--ja,.brand-logo[data-wm="ko"] .wm--ko{display:block}
/* 見えないが読み上げと検索には残す文字 */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* サイト名は押すと最初の状態（今年・ページ先頭）へ戻る入口。
   触れたときの下線は出さない ── ヘッダーの罫と二重に見えるため（開発者の指示） */
.brand-title a{display:inline-block;color:inherit;text-decoration:none}
/* 段の間は格子の row-gap が持つので、ここでは余白を足さない */
.brand-tag{margin:0;font-size:13.5px;color:var(--ink-3);letter-spacing:.07em}

.controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 13px;min-width:0}
.seg{display:flex;gap:2px;padding:3px;flex:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--card-shadow)}
.seg button{
  width:28px;height:24px;display:grid;place-items:center;
  border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink-3);cursor:pointer;
  transition:background .15s,color .15s;
}
.seg button:hover{background:var(--surface-2);color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
/* ===== 右上の道具：お問い合わせ（封筒）・言語（地球）・サイドのカード（両脇の柱）・テーマ（月／太陽） =====
   どれも 34px 角のアイコンボタン。作りは年送りの ‹ ›（.step）と同じ面にそろえる。
   ・封筒は別ページ（contact.html）へのリンク
   ・地球を押すと下に「日本語／한국어」の小さな一覧が開く。選ぶと同じページの相手側（ko/ ⇄ ../）へ移る
   ・月は押すとダークに、ダークのときは太陽に変わって押すとライトに戻る（既定はライト） */
.hdr-tools{display:flex;align-items:center;gap:8px;position:relative}   /* relative は案内の吹き出し（.coach）の基準 */
.tool{
  width:34px;height:34px;flex:none;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-2);box-shadow:var(--card-shadow);
  cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s;
}
.tool svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .tool:hover{border-color:var(--ink-3);color:var(--ink)} }
.tool[aria-expanded="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
/* テーマの絵：ライトのときは月（押すと暗くなる）、ダークのときは太陽（押すと明るくなる） */
.tool .ic-sun{display:none}
:root[data-theme="dark"] .tool .ic-moon,body.force-dark .tool .ic-moon{display:none}
:root[data-theme="dark"] .tool .ic-sun,body.force-dark .tool .ic-sun{display:block}
/* 言語の一覧。地球ボタンの真下、右端をそろえて浮かせる */
.tool-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:35;min-width:150px;
  padding:6px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow-hover);
}
.menu[hidden]{display:none}
.menu a{
  display:block;padding:9px 14px;border-radius:var(--radius-sm);
  color:var(--ink-2);text-decoration:none;font-size:15px;letter-spacing:.04em;white-space:nowrap;
}
@media (hover:hover){ .menu a:hover{background:var(--surface-2);color:var(--ink)} }
.menu a[aria-current="true"]{background:var(--ink);color:var(--surface);font-weight:700}
/* 360px 級では、ロゴ（約204px）と道具3つ（118px）が題字の行に並ばない。
   ロゴを一段小さくし、道具の間隔と大きさを詰めて 308px に収める（行の幅は 328px） */
@media (max-width:400px){
  .brand-logo{height:30px}
  .hdr-tools{gap:6px}
  .tool{width:32px;height:32px}
}
/* 道具の切り替え（狭い画面の .toolsnav）。文字ラベルなのでアイコン用の正方形サイズを解き、
   3つで横幅を等分する ── 名前の長さがまちまちなので、中身に合わせると幅が不ぞろいになり、押し分けにくくなる */
.seg--tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--surface)}
.seg--tabs button{
  width:auto;height:32px;padding:0 6px;
  font-family:var(--sans);font-size:14px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 4つ並ぶと1つあたり90pxを切る。いちばん長い「カレンダー」が入る大きさまで詰める
   （本文まわりの下限12pxは割らない） */
@media (max-width:560px){ .seg--tabs button{font-size:13px;padding:0 3px;letter-spacing:0} }
/* 加算・減算の符号。記号1文字なので正方形のまま、入力欄（26px）と背を合わせる */
.seg--sign button{width:26px;height:26px;font-family:var(--sans);font-size:15px;line-height:1}
.toggle{display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.track{
  width:34px;height:20px;flex:none;border-radius:20px;
  background:var(--track-off);position:relative;transition:background .18s;
}
.thumb{
  position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--thumb);transition:transform .18s;
}
.toggle input:checked + .track{background:var(--kr-mark)}
.toggle input:checked + .track .thumb{transform:translateX(14px);background:var(--thumb-on)}
.toggle input:focus-visible + .track{outline:2px solid var(--ai);outline-offset:2px}
.tlabel{font-size:14px;color:var(--ink-2);white-space:nowrap;letter-spacing:.05em}

.yearnav{display:flex;align-items:center;gap:6px;min-width:0}
.step{
  /* 高さは隣の帯（言語・年）と同じ34px。ここがずれると横一列に段差が出る */
  width:34px;height:34px;flex:none;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-2);
  font-size:16px;line-height:1;cursor:pointer;box-shadow:var(--card-shadow);
  transition:border-color .15s,color .15s;
}
.step:hover:not(:disabled){border-color:var(--ink-3);color:var(--ink)}
.step:disabled{opacity:.35;cursor:default}
/* 「今年」ボタンは文字ラベルなので、アイコン用の正方形サイズを解く。
   頭の点は年チップの「今年」印（.years a.now::before）と同じ臙脂 ── 同じ印にしておくと、
   どの年へ戻るボタンなのかが説明なしで伝わる */
.step--now{
  width:auto;padding:0 10px;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;
}
.step--now::before{
  content:"";flex:none;width:4px;height:4px;border-radius:50%;background:var(--kurenai);
}
/* ===== 年の帯 =====
   2015〜2050 の全部を1本の列に並べ、横に流して選ぶ。以前は選択年の前後2年（5本）だけを
   出して ‹ › で窓をずらしていたが、それでは ‹ › を押す以外に年を動かす手がなかった。
   ・指・トラックパッドの横スクロール、マウスの縦ホイール（下の JS が横に流す）で流せる
   ・止まったところで数字が半分に切れないよう、チップの中央で吸着させる（scroll-snap）
   ・帯の両端は透かして「先がある」ことを見せる。端まで来た側は透かさない（.at-start / .at-end）
   ・面（枡・罫・影）は外側の .years-wrap が持つ ── 中の列に透かしを掛けても面が欠けないように
   ・Tab で36本を辿らせない。Tab が止まるのは選択中の1本だけで、← → で年を送る（JS の roving tabindex） */
.years-wrap{
  /* 幅の上限は 366px。年の操作全体（‹ 帯 › 今年）が 512px に収まる値で、
     ヘッダーの折り返し（924px）はこの 512px を前提に測ってある。ここを変えたら測り直すこと */
  padding:3px;min-width:0;max-width:366px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--card-shadow);
}
.years{
  --fade-l:22px;--fade-r:22px;
  position:relative;
  display:flex;gap:2px;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
  mask-image:linear-gradient(to right,transparent,#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent);
}
.years.at-start{--fade-l:0px}
.years.at-end{--fade-r:0px}
.years::-webkit-scrollbar{display:none}
/* 焦点の輪は列の外にはみ出すと切れる（overflow）ので、内側に描く */
.years a:focus-visible{outline-offset:-2px}
.years a{
  scroll-snap-align:center;
  border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--ink-2);text-decoration:none;
  font-family:var(--display);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
  flex:0 0 auto;
  /* 明朝の行送りに任せると帯が42pxまで伸びて、隣の ‹ › と高さが合わなくなる。
     言語切り替えのボタン（26px）と同じ高さに固定して、中身を天地中央に置く */
  display:flex;align-items:center;height:26px;
  padding:0 12px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s;
}
.years a:hover{background:var(--surface-2);color:var(--ink)}
/* 触る画面（ポインタが粗い＝指）では押しどころを高くする。26px は指には小さい（目安 32px 以上）。
   隣の ‹ › は 34px なので、同じ高さにそろえる */
@media (pointer:coarse){
  .years a{height:34px;padding:0 13px}
  .step--now{height:34px}
  .foot-links a{padding:6px 0;display:inline-block}
  .years{--fade-l:32px;--fade-r:32px}   /* 端で切れる数字は、はっきり薄くして「続きがある」印に */
}
.years a[aria-current="page"]{background:var(--ink);color:var(--surface);font-weight:700}
.years a.now::before{
  content:"";flex:none;
  width:4px;height:4px;border-radius:50%;background:var(--kurenai);margin-right:5px;
}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}

/* ===== 要約ストリップ ===== */
.statbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;
  padding:0 2px 18px;margin:0;
}
/* 和暦は凡例と同じ行の左端。年をまたぐ改元の年は「平成 31年 / 令和 元年」と2つ並ぶ。
   年号は小さく字間を広く、数字だけ大きく ── 同じ行の凡例より一段強く出して、
   いまどの年を見ているのかがカレンダーの手前で目に入るようにする */
.era{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.2em;
  color:var(--ink-3)}
.era b{font-size:21px;font-weight:700;letter-spacing:.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* 干支は年号の添え。髪の毛ほどの罫で区切り、年号より一段控えめに置く */
.era-eto{font-style:normal;margin-left:.85em;padding-left:.85em;
  border-left:1px solid var(--line);color:var(--ink-3);letter-spacing:.14em}
/* 十二支の動物と誕生日のクラッカー。自前の線画（.shell 先頭のスプライト）を <use> で出す。
   線は文字より一段濃い --ink-2 ── 1.7px の細い線を --ink-3 で引くと、字より薄く見えて負ける。
   以前は絵文字だったが、端末ごとに絵柄が違って紙面の線と合わなかった */
.eto-icon{
  display:inline-block;width:20px;height:20px;vertical-align:-.32em;margin-right:.35em;
  color:var(--ink-2);stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.a-popper{margin-right:.4em}
/* 印の版（いまは未使用。zodiacOf のメモ参照）。色は中立にしてある
   ── 臙脂＝日本／金＝韓国という色の役割と紛れないように */
.eto-seal{
  font-style:normal;display:inline-grid;place-items:center;
  width:1.7em;height:1.7em;margin-right:.5em;
  border:1px solid var(--line);border-radius:50%;
  font-family:var(--display);font-weight:700;letter-spacing:0;
  color:var(--ink-2);vertical-align:-.28em;
}
/* ===== 節どうしの行き来 =====
   カレンダーと連休は縦に遠い（狭い画面では画面7つぶん）。互いへの入口を置いて、
   スクロールで探させない。見た目は年チップ・「今年」ボタンと同じ帯にそろえ、
   新しい部品を増やさない。矢印は向きだけを示す ── 下＝先へ、上＝戻る */
.jump{
  display:inline-flex;align-items:center;gap:5px;flex:none;
  height:26px;padding:0;
  border:0;background:transparent;color:var(--ink-3);
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  cursor:pointer;white-space:nowrap;
  transition:color .15s;
}
@media (pointer:coarse){ .jump{height:32px} }   /* 触る画面では押しどころを高く（.jump の後ろに置くこと） */
/* ボタンの面を持たせない ── 元号や凡例と同じ「添えの行」に居るのに、枠と影が付くと
   そこだけ操作盤のように浮いて、主役のカレンダーより先に目に入ってしまう。
   触れたときだけ真鍮の下線を出す（サイト名の見出しと同じ作法） */
@media (hover:hover){
  .jump:hover{color:var(--ink);text-decoration:underline;
    text-decoration-color:var(--gold);text-decoration-thickness:1px;text-underline-offset:5px}
}
.jump i{font-style:normal;font-size:12.5px;line-height:1;color:var(--ink-3)}
/* 見出しに置くほうは右端へ。見出しは baseline そろえなので、ここだけ天地中央に戻す */
.section-head .jump{margin-left:auto;align-self:center}
/* 要約の帯に置いていた「連休を見る ↓」「計算ツール ↓」のチップは外してある。
   狭い画面では月カレンダーが横の帯になって縦の長さが縮んだので、遠くへの入口は要らない。
   .jump が残っているのは連休の見出しの「↑ カレンダーへ」だけ */
.legend{display:flex;gap:16px;margin-left:auto;font-size:13.5px;color:var(--ink-3);align-items:center}
/* 韓国の公休日スイッチは凡例の一員として並ぶ ── 見本（金の四角）とスイッチが
   ひと続きになり、「この色の表示を入り切りするもの」だと説明なしで伝わる。
   字の大きさと濃さは隣の日本側の凡例にそろえ、ここだけ強く出ないようにする */
.legend .toggle{gap:7px}
.legend .tlabel{font-size:13.5px;color:var(--ink-3);letter-spacing:0;display:inline-flex;align-items:center}
/* 並びは「見本 → 名前 → スイッチ」。日本側の凡例と頭がそろい、
   そのうしろに入り切りが付く形になる。
   ＊ 入れ替えは order で行うこと ── HTML の並びを変えると、入っているかどうかを
     見ているのが「input のすぐ次の .track」という書き方（.toggle input:checked + .track）
     なので、スイッチが色を変えなくなる */
.legend .toggle .tlabel{order:1}
.legend .toggle .track{order:2}
/* 幅が足りず2段に折り返す画面では、凡例も左へそろえる。
   和暦が左・凡例が右のままだと、段違いになって落ち着かないため */
@media (max-width:540px){.legend{margin-left:0}}
@container main (max-width:540px){.legend{margin-left:0}}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:7px}
.legend i.jp{background:var(--kurenai-soft);box-shadow:inset 0 0 0 1px var(--kurenai)}
.legend i.kr{background:var(--kr-soft);box-shadow:inset 0 -2px 0 var(--kr-mark),inset 0 0 0 1px var(--kr-mark)}

/* ===== 月グリッド ===== */
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* コンテナクエリ非対応ブラウザ向けのフォールバック */
@media (max-width:1180px){.months{grid-template-columns:repeat(3,1fr)}}
@media (max-width:880px){.months{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.months{grid-template-columns:1fr}}
@container main (max-width:1180px){.months{grid-template-columns:repeat(3,1fr)}}
@container main (max-width:880px){.months{grid-template-columns:repeat(2,1fr)}}
@container main (max-width:540px){.months{grid-template-columns:1fr}}

.month{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:18px 16px 15px;
  display:flex;flex-direction:column;gap:12px;
  transition:box-shadow .2s ease;
}
/* 上辺の罫（真鍮）と影の反応は、上の「カード面に共通のふるまい」が持っている。
   ここは当月だけの印 ── 墨の罫を常時点灯し、少し太くしてホバーの真鍮と区別する。
   ホバー時も background は上書きしないので、当月は墨のまま影だけ深くなる（濃さは --ink-2） */
.month.now::before{height:3px;background:var(--ink-2);opacity:1}
.month-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.month-head b{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1}
.month-head b span{font-size:.55em;font-weight:400;margin-left:3px;color:var(--ink-2)}
.chips{display:flex;gap:4px}
.count{font-size:12.5px;line-height:19px;padding:2px 7px;border-radius:var(--radius-sm);font-weight:500;letter-spacing:.08em}
.count.jp{color:var(--kurenai);background:var(--kurenai-soft)}
.count.kr{color:var(--kr);background:var(--kr-soft)}

.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.wd{
  text-align:center;font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:.1em;
  padding-bottom:5px;border-bottom:1px solid var(--line-2);margin-bottom:3px;
}
.wd.sun{color:var(--kurenai)}
.wd.sat{color:var(--ai)}
.d{
  display:flex;align-items:center;justify-content:center;
  height:36px;border-radius:var(--radius-sm);
  font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-2);
  font-family:inherit;border:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;
}
.d.sun{color:var(--kurenai)}
.d.sat{color:var(--ai)}
/* ===== 押せるマスであることを、触る画面でも分かるようにする =====
   休日のマスは押すと一覧の該当行へ飛ぶ（jump）。ところが面に色を敷いただけでは
   「強調されている」としか読めず、押せることが伝わらない。ホバーのない端末では
   なおさら手がかりがない。そこで髪の毛ほどの枠を常時出して「面」を「ボタン」にする。
   枠の色はその日の色と同じ ── 凡例のスワッチ（.legend i）と同じ作りになるので、
   凡例とカレンダーが同じものに見える（これまで凡例にだけ枠があってずれていた） */
.d.hol{background:var(--kurenai-soft);color:var(--kurenai);font-weight:700;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--kurenai)}
/* 韓国の公休日は下辺のバーで示す。日本の祝日と重なった日は「赤い面＋金の下線」になる */
.d.kr{box-shadow:inset 0 -2px 0 var(--kr-mark),inset 0 0 0 1px var(--kr-mark);cursor:pointer}
.d.kr:not(.hol){background:var(--kr-soft);color:var(--kr);font-weight:700}
/* ===== 両国が重なる日 ===== （v211）
   これまでは「日本の赤い面＋韓国の金の下線」で、面が丸ごと日本の色だったため
   韓国も休みであることが飾りにしか見えなかった（読者からの指摘）。
   面と枠を斜めに割り、左上を日本（臙脂）、右下を韓国（金）にする。
   ・斜めにするのは、真ん中の数字を断ち切らないため。上下や左右に割ると
     切れ目が数字のちょうど中心線を通り、字がまっぷたつに見える。斜めなら
     切れ目は字を横切るだけで、どの高さでも字の大半は片側に残る。
   ・左上が日本なのは、凡例も件数のチップも一覧も「日本 → 韓国」の順だから。
   ・面は淡い色、枠は濃い色で割る。暗い画面では淡い色どうしの差が出にくいので、
     そのときは濃い枠が二色を伝える ── 明暗どちらでも二色に見える。
   ・数字は墨。どちらかの国の色にすると、その国だけの休日に見えてしまう。
   ・padding-box と border-box に別の層を敷くと、角の丸みを保ったまま枠だけ別の色にできる
     （border-image は border-radius に従わないので使わない）。 */
.d.hol.kr{
  --split-fill:linear-gradient(135deg,var(--kurenai-soft) 0 calc(50% - .5px),var(--kr-soft) calc(50% + .5px) 100%);
  --split-ring:linear-gradient(135deg,var(--kurenai) 0 calc(50% - .5px),var(--kr-mark) calc(50% + .5px) 100%);
  border:1px solid transparent;
  background:var(--split-fill) padding-box,var(--split-ring) border-box;
}
.d.hol.kr{box-shadow:none;color:var(--ink)}
/* 押せるマスだけを反応させる。平日のマスは押せない <div> なので、ここを .d 全体に
   かけると「押せそうなのに何も起きない」という逆の誤解を招く */
@media (hover:hover){
  button.d:hover{background-image:linear-gradient(var(--hover-veil),var(--hover-veil))}
  /* 重なる日は背景が層で出来ているので、膜だけを上に足す（background-image を丸ごと
     置き換えると斜めの二色が消える） */
  button.d.hol.kr:hover{background:
    linear-gradient(var(--hover-veil),var(--hover-veil)) padding-box,
    var(--split-fill) padding-box,var(--split-ring) border-box}
}
/* 押した瞬間だけわずかに縮める。ホバーのない触る画面では、これが唯一の手ごたえになる */
button.d{transition:transform .08s ease}
button.d:active{transform:scale(.92)}
.d.today{outline:1px solid var(--ink);outline-offset:-1px;font-weight:700;color:var(--ink)}
.d.today.hol{outline-color:var(--kurenai);color:var(--kurenai)}
.d.today.kr:not(.hol){outline-color:var(--kr);color:var(--kr)}
/* 今日が重なる日だったとき。囲みは墨（どちらの国にも寄らせない）。
   ほかの日と違って内側へ1つ分ずらすのは、二色に割れた枠を隠さないため ──
   ここだけは枠そのものが「両国」を伝えているので、上から塗りつぶしてはいけない */
.d.today.hol.kr{outline-color:var(--ink);outline-offset:-2px;color:var(--ink)}
.d.pad{visibility:hidden}

/* ===== 一覧 ===== */
.section{margin-top:64px}
/* ===== その年の解説 =====
   読む文章なので行長を 72字前後で止め、カードには載せない（面が増えると散漫）。見出しは年を含む h2 ── 検索の見出しになる。
   本文は一段落とした墨、出典の行はさらに落とす */
/* ===== このページの案内（フッターの直前、4枚のカード） =====
   できること・確認できる情報・使い方・データの出どころ。年ごとの解説文の代わりに置いた（開発者の指示 2026-09-18）。
   広い画面では4列、1180px以下で2列、1024px以下は他のカードと同じ横に流す帯（JS が .strip を付ける）。
   高さは一番高いカードにそろえる（grid の stretch） */
.about{min-width:0;width:100%;padding:0 clamp(16px,3vw,32px)}
.about .section-head{margin-bottom:18px}
.about-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1180px){ .about-cards{grid-template-columns:repeat(2,1fr)} }
.about-cards.strip{margin-top:-2px}   /* 帯は上下に 20px 食い込むので、見出しとの間 18px を保つ */
.panel--about ul{margin:0;padding:0;list-style:none}
.panel--about li{position:relative;padding-left:14px;font-size:15px;line-height:1.75;color:var(--ink-2)}
.panel--about li + li{margin-top:7px}
.panel--about li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.panel--about a{color:inherit;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
/* 読みものへのリンク（カードの下の1行）。帯（.strip）の点の列の後ろに来る */
.about-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:22px}
.about-links .al-label{font-size:12.5px;letter-spacing:.24em;color:var(--ink-3);margin-right:4px}
.about-links a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--card-shadow);text-decoration:none;font-size:15px;color:var(--ink-2);transition:border-color .15s,color .15s}
@media (hover:hover){ .about-links a:hover{border-color:var(--ink-3);color:var(--ink)} }

/* ===== 一覧の帯（日本・韓国の2枚） =====
   幅を問わず横に流す帯（.strip は JS が常に付ける）。見える枚数は2枚、540px 以下で1枚。
   カードの上下の余白は帯が持つので、カード自身の margin は外す。
   カードは自分の幅を基準（container）にして、狭いカード（880px 未満）では一覧・連休を1列に戻す ──
   2枚並びの 500px のカードで2列に割ると、名前と添えの訳が折れて読みにくい */
.lists.strip{--n:2;margin-top:44px}                 /* 元の 64px から、帯の上の余白 20px を引いた値 */
.lists--runs.strip{margin-top:0}                    /* 一覧の帯の点の列（14px）＋帯の余白（20px）で、上との間は 34px */
.lists .section--card{margin:0;container-type:inline-size;min-width:0}
@container (max-width:880px){ .lists .list,.lists .runs{grid-template-columns:1fr} }
/* 一覧と連休は、これまで地の上に文字だけが並んでいた。カレンダーの月・サイドの道具が
   どれも面（カード）に載っているので、ここだけ地のままだと同じページの部品に見えない。
   行そのものをカードに割るのではなく、節ごと1枚の面に載せる ── 行は日付・曜日・名前が
   縦にそろってこそ拾い読みできるので、1件ずつ枠で囲むと逆に読みにくくなる
   （連休を横流しのカードからいまの行組みに直したときと同じ理由） */
.section--card{
  margin-top:28px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--card-shadow);
  padding:18px 20px 14px;
}
.section--card .section-head{margin-bottom:12px}
/* 連休カードの見出し（h3）。一覧の見出し（h2）より一段小さく、頭の印は同じ色で仲間だと分かるようにする */
.section-head h3{font-family:var(--display);font-size:19px;font-weight:700;margin:0;letter-spacing:.1em}
.section-head h3::before{
  content:"";display:inline-block;width:3px;height:13px;
  margin-right:10px;vertical-align:-1px;
}
.section-head.jp h3::before{background:var(--kurenai)}
.section-head.kr h3::before{background:var(--kr-mark)}
@media (max-width:540px){
  .section--card{padding:16px 13px 12px}
}
@container main (max-width:540px){
  .section--card{padding:16px 13px 12px}
}
.section-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:14px;
}
.section-head h2{font-family:var(--display);font-size:23px;font-weight:700;margin:0;letter-spacing:.1em}
/* 件数は見出しの添え。丸括弧の途中で行が切れて「일)」だけ残るのを防ぐため
   ひと塊で折り返させ、大きさと濃さも一段落として主題と区別する */
.section-head h2 .h2-count{
  display:inline-block;white-space:nowrap;
  font-size:16px;font-weight:400;color:var(--ink-3);letter-spacing:.04em;
}
.section-head h2::before{
  content:"";display:inline-block;width:3px;height:15px;
  margin-right:12px;vertical-align:-2px;
}
.section-head.jp h2::before{background:var(--kurenai)}
.section-head.kr h2::before{background:var(--kr-mark)}

.list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
@media (max-width:880px){.list{grid-template-columns:1fr}}
@container main (max-width:880px){.list{grid-template-columns:1fr}}
/* 行は押すとカレンダーのその日へ飛ぶボタン。キーボードでも辿れるように button にし、
   見た目だけ元の1行に戻している（「今日」カードの .t-date と同じやり方） */
.row{
  display:grid;grid-template-columns:80px 20px 1fr auto;align-items:baseline;gap:10px;
  padding:11px 8px;border:0;border-bottom:1px solid var(--line-2);border-radius:var(--radius-sm);
  transition:background .4s;
  width:100%;background:transparent;font:inherit;color:inherit;text-align:left;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
@media (hover:hover){ .row:hover{background:var(--hover-veil)} }
.row.flash{background:var(--flash)}
/* 日付は折り返さない。欄（80px）は「12월 25일」が収まる幅にしてある */
.row .date{font-variant-numeric:tabular-nums;font-size:15.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.row .wdc{
  font-size:13px;text-align:center;border-radius:var(--radius-sm);color:var(--ink-3);
  align-self:center;padding:1px 0;
}
/* 曜日は色だけで示す。面を敷くと、日曜の1文字だけが札のように浮いて、
   平日の裸の文字とちぐはぐに見える（カレンダーのマスと違い、ここは押せる要素でもない） */
.row .wdc.sun{color:var(--kurenai)}
.row .wdc.sat{color:var(--ai)}
.row .name{font-size:16px}
.row .gloss{font-size:13.5px;color:var(--ink-3);margin-left:7px}
.tag{
  font-size:12.5px;letter-spacing:.1em;padding:2px 9px;border-radius:var(--radius-sm);
  border:1px solid var(--line);color:var(--ink-3);white-space:nowrap;
}
.tag.temp{border-style:dashed;border-color:var(--kr);color:var(--kr)}
.note{margin:0;font-size:15px;color:var(--ink-3)}

/* ===== 連休 =====
   連休も「日付のならび」なので、すぐ上の一覧（.row）と同じ行組みにそろえる。
   以前はカードを横へ流していたが、狭い画面では1枚ずつ幅が違うまま縦に積まれ、
   右端がぎざぎざになって、ひとつづきの表に見えなかった。
   同じ性質の情報に組み方を2つ持たないほうが、目で追う手数も減る */
.runs{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px}
@media (max-width:880px){.runs{grid-template-columns:1fr}}
@container main (max-width:880px){.runs{grid-template-columns:1fr}}
/* 連休がない年の断り書きは、列に割らず全幅で置く */
.runs .note{grid-column:1/-1;padding:11px 8px}
.run{
  /* 期間の欄は固定。行ごとに変えると日数の札が縦にそろわない。
     いちばん長い「10/10〜10/12」で106px、余裕をみて116px にしてある */
  display:grid;grid-template-columns:116px auto 1fr;align-items:baseline;gap:10px;
  padding:11px 8px;border:0;border-bottom:1px solid var(--line-2);border-radius:var(--radius-sm);
  width:100%;background:transparent;font:inherit;color:inherit;text-align:left;
  cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background .4s;
}
@media (hover:hover){ .run:hover{background:var(--hover-veil)} }
/* 連休カードから飛んだときに、その期間のマスを一瞬強調する */
.d.flash{outline:2px solid var(--ink);outline-offset:-2px}
.run b{font-family:var(--display);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 日数は墨のベタ塗りだったが、行が8本並ぶと黒い粒ばかりが目に刺さる。
   一覧の札（.tag）や情報カードの札（.pbadge）と同じ軽さにそろえる */
.run .len{
  font-size:12.5px;letter-spacing:.06em;padding:1px 7px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
}
.run .nick{font-size:13.5px;color:var(--kurenai);letter-spacing:.06em}
.runs--kr .nick{color:var(--kr)}

/* ===== 本文の情報カード（混み合う時期・取引が止まる時期・営業日数） =====
   もとは左右のレールに置いていたが、いずれも「その年の祝日から導いた話」で、
   カレンダーと一覧を読んだあとに続けて読むもの。レールは道具（日付計算・為替・年齢）に
   明け渡し、こちらは本文の終わりにまとめた。
   v179 で1枚に合わせたが、開発者の指示（2026-09-17）で3枚のカードに戻した。
   同じとき足した「年の帯」（1〜12月の横一列に期間を置く図）も外している ── 一覧で足りる。
   列の折り返しは月グリッドと同じ幅で切り替える ── 同じ本文の中で境目が2種類あると、
   画面を狭めていったときに折り返しがちぐはぐに起きる */
.infocards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}   /* 高さは一番高いカードにそろえる（align-items の既定 stretch） */
/* 2列に落ちると3枚目（営業日数）が1枚だけ残って右半分が空くので、そこは横いっぱいに使う。
   年間合計とストリップが横に並ぶカードなので、広げても間延びしない */
@media (max-width:1180px){
  .infocards{grid-template-columns:repeat(2,1fr)}
  .infocards .panel--bizdays{grid-column:1/-1}
}
@media (max-width:880px){.infocards{grid-template-columns:1fr}}
@container main (max-width:1180px){
  .infocards{grid-template-columns:repeat(2,1fr)}
  .infocards .panel--bizdays{grid-column:1/-1}
}
@container main (max-width:880px){.infocards{grid-template-columns:1fr}}
/* ---- 営業日数：左に年間合計の大きな数字、右に12か月のストリップ ----
   数字の見せ方は「今日」カードの日付・為替の主レートと同じ（数だけ大きく、単位は小さく）。
   ストリップは月ごとに 1マス。面の色はその行（国）の色を、その年の最少〜最多で薄→濃に振る
   （順序尺度の色は一色で明暗だけ）。数字は必ず墨で置き、色は添えにとどめる。
   棒グラフにしないのは、営業日数が 18〜23 の狭い幅に収まっていて、0 から立てると差が消え、
   途中から立てると差が誇張されるため */
.bd-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.bd-total{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:14px;color:var(--ink-2)}
.bd-total + .bd-total{margin-top:6px}
.bd-total b{font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
/* 半年ずつの2つのストリップ。狭いカードでは縦に積み、広いカード（520px以上）では横に並べる */
.bd-halves{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bd-strip{display:grid;grid-template-columns:18px repeat(6,minmax(0,1fr));gap:3px 2px;align-items:center}
.bd-strip .pflag{margin:0}
.bd-cell{text-align:center;font-size:13px;line-height:1;padding:7px 0;border-radius:var(--radius-sm);
  color:var(--ink-2);font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;white-space:nowrap}
.bd-cell--head{font-size:12px;color:var(--ink-3);padding:0 0 3px;letter-spacing:0}
.bd-cell--empty{color:var(--ink-3)}
@container (min-width:520px){
  .bd-grid{grid-template-columns:auto minmax(0,1fr);gap:0 28px}
  .bd-totals{border-right:1px solid var(--line-2);padding-right:28px;align-self:start}
  .bd-halves{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
}

/* ===== サイドレールの折りたたみ（レールが両脇に出る 1400px 以上だけ） =====
   デスクトップでは一度に見える情報が多すぎて散漫、という指摘（開発者経由）への答え。
   ただし勝手には畳まない（v182）── どのカードを畳むかは読む人が決め、その選択を localStorage（rails）に
   カード単位で残す。全部開く／全部畳む／いくつかだけ畳む、のどれでも次に開いたとき同じ形になる。
   ・カードの肩（名前の行）を押すと畳む・開く。畳んだカードはポインタを載せるだけでも一時的に開く
   ・右上の道具（.tool--rails）は「全部開く／全部名前だけにする」の一括操作
   ・「今日」カードだけは常に開いたまま（開発者の指示）
   ＊ 畳むのは中身（.pbody）だけ。カードの枠・影・肩の小見出しは残すので、何のカードかは見える。
   ＊ 高さは JS が測って max-height に入れる（v186）。以前は grid の 1fr → 0fr で動かしていたが、
     高さの決まっていない箱の 1fr 行が WebKit で 0 に潰れ、カードが「名前だけ」になる報告があった。
     開いているときは max-height を外す（none）ので、中身が増減しても切れない。
     箱は overflow:hidden なので、入力欄の焦点の輪が切れないよう中の塊に 3px の余白を持たせる */
.tool--rails{display:none}   /* 1400px 以上だけ出す（下の @media で display:grid） */
.tool--print{display:none}   /* 541px 以上だけ出す（狭い画面で紙に刷ることはまれで、題字の行に収まらない） */
@media (min-width:541px){ .tool--print{display:grid} }
/* ===== 案内の吹き出し（coach）と鈴の揺れ =====
   絵だけの道具は何をするものか分からないので、初めての人に一言添える（開発者の指示 2026-09-18）。
   吹き出しは墨の面に紙の字（どちらのテーマでも反転して読める）。道具の列の左横に置く（真下だと年の切り替えに重なる。題字と道具のあいだは空いている）。
   レールの絵は列の右端なので、吹き出しの文頭に同じ絵（.coach-ic）を添えてどの絵の話か示す。
   揺れは絵の上端を軸にした鈴の動き ── 2回で止め、点滅させない（「今日」カードの合図と同じ考え）。
   動きを減らす設定では揺らさず、吹き出しだけ出す */
.coach{
  position:absolute;right:calc(100% + 14px);top:50%;z-index:34;
  width:max-content;max-width:min(300px,calc(100vw - 32px));padding:9px 13px;
  background:var(--ink);color:var(--ground);border-radius:var(--radius);box-shadow:var(--card-shadow-hover);
  font-size:13.5px;line-height:1.55;letter-spacing:.02em;white-space:normal;text-align:left;
  opacity:0;translate:8px -50%;transition:opacity .25s ease,translate .25s ease;pointer-events:none;
}
.coach::before{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--ink);rotate:45deg;border-radius:2px}
.coach[hidden]{display:none}
.coach.is-on{opacity:1;translate:0 -50%}
.coach-ic{width:15px;height:15px;vertical-align:-3px;margin-right:7px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tool.is-ringing{animation:bell 1.7s ease-in-out 2;transform-origin:50% 0}
@keyframes bell{0%,55%,100%{rotate:0deg}8%{rotate:-14deg}16%{rotate:12deg}24%{rotate:-9deg}32%{rotate:6deg}40%{rotate:-3deg}48%{rotate:1deg}}
@media (prefers-reduced-motion: reduce){ .tool.is-ringing{animation:none} .coach{transition:none} }
@media (min-width:1400px){
  .side .panel:not(.panel--today) .pbody{overflow:hidden;transition:max-height .32s ease,opacity .22s ease,margin-top .32s ease}
  .side .panel:not(.panel--today) .pbody-in{padding:3px;margin:-3px}
  /* 畳んであるカードは面ごと押せる（開いているあいだは中の欄の cursor に任せ、肩だけ押せる印にする） */
  .side .panel.is-closed{cursor:pointer}
  .side .panel:not(.panel--today) > .p-eyebrow,.side .panel:not(.panel--today) > .p-head{cursor:pointer}
  /* 開閉できることの合図：右端に小さな山形。開いているときは上向き、畳んであるときは下向き */
  .side .panel:not(.panel--today)::after{
    content:"";position:absolute;right:16px;top:19px;width:7px;height:7px;
    border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
    transform:translateY(4px) rotate(-135deg);transition:transform .25s ease;pointer-events:none;
  }
  .side .panel.is-closed::after{transform:rotate(45deg)}
  .side .panel.is-closed.is-peek::after{transform:translateY(4px) rotate(-135deg)}   /* 一時的に開いているあいだは上向き */
  .tool--rails{display:grid}
}
/* 道具の絵：全部開いているとき（aria-pressed=true）は両脇の柱が立った絵、畳んだカードがあるときは柱を細くした絵 */
.tool--rails .ic-rails-on{display:none}
.tool--rails[aria-pressed="true"] .ic-rails-off{display:none}
.tool--rails[aria-pressed="true"] .ic-rails-on{display:block}
@media (prefers-reduced-motion: reduce){ .pbody{transition:none!important} }

/* ===== フッター ===== */
.footer{
  min-width:0;
  /* 下の余白にアンカー広告の高さを足す。--anchor-h は JS が実測して入れ、
     広告を閉じると 0 に戻るので、そのときは元の 44px だけになる */
  padding:30px clamp(16px,3vw,32px) calc(44px + var(--anchor-h));
}
.footer > div{border-top:1px solid var(--line);padding-top:18px}
/* 著作権表記と注記を左、テーマ切り替えを右に。幅が足りなければ縦に積む */
.foot-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.foot-text{flex:1 1 420px;min-width:0}
.footer p{margin:0;font-size:13px;line-height:1.8;color:var(--ink-3);letter-spacing:.04em}
.footer p + p{margin-top:7px}
.foot-copy{font-variant-numeric:tabular-nums}
/* 規約・ポリシーへのリンク。注記と同じ濃さで並べ、触れたときだけ真鍮の下線 */
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-links a{color:var(--ink-3);text-decoration:none}
@media (hover:hover){ .foot-links a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px} }

/* ===== 固定アンカー広告（画面下端に1枠だけ） =====
   AdSense のアンカー広告はページにつき1つまで。上端はヘッダー（position:sticky）が
   すでに使っているので下端に置く ── 上下に1つずつ出すとポリシーに触れるうえ、
   狭い画面では固定物だけで画面の3分の1が埋まってしまう。
   閉じるボタンは必ず添える。閉じたら高さを0に戻し、フッターの余白も元に戻す。
   高さは実際の広告ユニットによって変わるので、JS が実測して --anchor-h に入れる ──
   その分をフッターの下に足しておかないと、最後の行が帯の裏に隠れる */
:root{--anchor-h:0px}
.anchor{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;align-items:center;gap:clamp(10px,2vw,16px);
  padding:6px clamp(12px,3vw,20px);
  padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(30,26,21,.10);
}
.anchor .ad-label{flex:none}
/* 中身はインフィード広告と同じ組み方（画像・見出し・説明・出稿元）を横一列にしたもの */
.anchor-card{flex:1 1 auto;min-width:0;min-height:50px;display:flex;align-items:center;gap:12px;cursor:pointer}
.anchor-thumb{flex:none;width:40px;height:40px;overflow:hidden;border-radius:var(--radius-sm)}
.anchor-thumb svg{display:block;width:100%;height:100%}
.anchor-body{display:flex;align-items:baseline;gap:10px;min-width:0}
.anchor-body b{flex:none;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:.02em;white-space:nowrap}
.anchor-body span{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anchor-body em{flex:none;font-size:12.5px;font-style:normal;color:var(--ink-3);letter-spacing:.06em;white-space:nowrap}
/* 閉じるボタンはアイコン。触れる面はフッターのテーマ切り替え（36x30）と同じ大きさにそろえる */
.anchor-close{
  flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;
  border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--ink-3);cursor:pointer;transition:background .15s,color .15s;
}
@media (hover:hover){ .anchor-close:hover{background:var(--surface-2);color:var(--ink)} }
/* 幅が足りないときは説明・出稿元の順に落とす。見出しと「広告」の札は最後まで残す */
@media (max-width:720px){ .anchor-body span{display:none} }
@media (max-width:460px){ .anchor-body em{display:none} }

/* 動きを減らす設定のときは、スクロールの演出（年チップの横送りを含む）も止める */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== 広告の表示スイッチ：いまは表示（サンプルクリエイティブ） =====
   実広告ではなく、配置とレイアウト影響を確かめるための見本。
   非表示に戻すときは、下の3行のコメントを外すだけでよい。
.infeed,.anchor{display:none!important}
*/
/* ===== 本文へ飛ぶリンク（キーボード操作のときだけ見える） =====
   見出しの行には言語・年送りなど10個ほどの押せるものが並ぶ。Tab で辿る人が毎回そこを
   通らずに済むよう、文書の先頭に「本文へ」を置く。焦点が入ったときだけ画面に降りてくる。
   本文（main）に焦点を移すための tabindex="-1" は、外枠に焦点の輪を出さないようにしてある */
.skip{position:absolute;left:clamp(16px,3vw,32px);top:-100px;z-index:40;
  padding:8px 14px;border-radius:var(--radius);
  background:var(--ink);color:var(--surface);text-decoration:none;
  font-size:14px;letter-spacing:.06em;box-shadow:var(--card-shadow-hover)}
.skip:focus-visible{top:12px}
main:focus{outline:none}
/* 年チップ：360px級の端末では3本が帯（約180px）に入らず、右端の年が「20」と途中で切れていた。
   字の大きさは変えず、チップの左右余白・字間と ‹ › との間隔だけを縮めて3本を収める
   （実測：3本で 173px ＋ 帯の内側余白 10px ＝ 183px ＜ 帯 186px） */
@media (max-width:400px){ .years a{padding:0 6px;letter-spacing:0} .yearnav{gap:4px} }
/* ===== 印刷 =====
   広告・道具・移動タブは紙には要らない。カレンダーと一覧だけを刷る。
   明暗は beforeprint で JS がライトに戻す（ダークのまま刷ると地の色が落ちて明るい字が消える） */
/* ===== 横に流す帯（月カレンダーと情報カード、1024px 以下） =====
   狭い画面で12か月を縦に積むと、道具や一覧まで画面7つぶんスクロールすることになる（開発者の指摘）。
   そこで 1024px 以下では月カードを1列に並べ、横に流して選ぶ帯にする。情報カード3枚も同じ帯。
   ・見える枚数は幅で決まる（--n：1024px以下=3、880px以下=2、540px以下=1）
   ・右端に次のカードの縁（--peek）を見せて、横に流せることを見た目で伝える。下に点の列（.strip-dots）も置く
   ・帯は紙面の左右余白いっぱいまで広げ（負の margin）、中身は本文と同じ位置に揃える（padding と scroll-padding）
   ・止まる位置はカードの左端（scroll-snap）。開いたときは今月（今年以外は1月）を左端に置く（JS）
   ・上下の余白は影のぶん（overflow を切ると影まで切れるため）。負の margin で元の位置に戻す
   1025px 以上はこれまでどおりの格子（4列／3列）。印刷でも格子に戻す（下の @media print） */
.strip-dots{display:none}   /* 帯（.strip）の直後にあるときだけ出す（下の .strip + .strip-dots） */
/* .strip は JS が幅を見て付ける ── 月カレンダー・情報カードは 1024px 以下、道具のレールは 1399px 以下で
   選んだ組のカードが2枚以上のとき（1枚なら普通に置く）。CSS はここで形だけを持つ */
.strip{
  --n:3;--peek:28px;--gap:16px;--gut:clamp(16px,3vw,32px);
  display:grid;grid-template-columns:none;grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--peek) - (var(--n) - 1) * var(--gap)) / var(--n));
  gap:var(--gap);align-items:stretch;   /* 高さは一番高いカードにそろえる ── 情報カード・道具の天地を合わせる */
  margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
  padding:20px var(--gut);margin-top:-20px;margin-bottom:-20px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.strip::-webkit-scrollbar{display:none}
.strip > *,.strip > #calcSlot > *{scroll-snap-align:start;min-width:0}
.infocards.strip{margin-top:20px}                 /* 元の 40px から、上に食い込ませた 20px を引いた値 */
.infocards.strip .panel--bizdays{grid-column:auto}
/* 道具のレールが帯になるとき。レールは width:100% で自分の余白（padding）を持っているので、
   負の margin は使わず、上下の余白だけ影のぶん取る。帯の終わり（フッターの前）は 40px */
.side.strip{margin:0;padding:12px var(--gut) 24px}
.side--travel.strip{margin-top:16px;padding-bottom:40px}
.side--biz.strip{--n:2}                           /* 為替の組は2枚なので、3列に割らない（年齢1枚のときは JS が --n:1 にする） */
/* 点の列。帯の直後に置き、いま左端にあるカードの点だけ墨の長い印にする（帯の中の位置が読める）。
   帯でないとき（広い画面）と、全部が一度に見えているとき（JS が hidden を付ける）は出さない */
.strip + .strip-dots{display:flex;justify-content:center;gap:7px;margin:14px 0 0;width:100%}
.strip-dots button{
  width:8px;height:8px;padding:0;border:0;border-radius:4px;
  background:var(--dot-off);cursor:pointer;transition:width .2s ease,background .2s ease;
}
.strip-dots button[aria-current="true"]{width:20px;background:var(--ink)}
@media (max-width:880px){ .strip{--n:2} }
@media (max-width:540px){ .strip{--n:1} .side--biz.strip{--n:1} .lists.strip{--n:1} }
@media (prefers-reduced-motion: reduce){ .strip{scroll-behavior:auto} }

/* ===== 年の切り替えの見え方（View Transitions） ===== 
   既定の全面クロスフェードを少し短く。ヘッダーは変わらないので別の層にして、揺れないようにする */
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
.masthead{view-transition-name:masthead}
::view-transition-old(masthead),::view-transition-new(masthead){animation:none}
@media (prefers-reduced-motion: reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} }

@media print{
  /* 紙は白い ── ダークで見ていても印刷はライトの色で（トークンをライトの値に戻す） */
  :root[data-theme="dark"],body.force-dark{
  /* 石灰岩のアイボリー・墨黒・真鍮。純白(#FFF)はまぶしいので使わない */
  --ground:#E9E4DA;
  --ground-veil:rgba(233,228,218,.72);   /* 磨りガラスのヘッダー用。--ground と同じ色の半透明（v190 で少し透かした） */
  /* 上端の移動タブ用。ヘッダーより薄く透かし、下を流れる本文の色と形がうっすら残る濃さにする */
  --glass:rgba(233,228,218,.58);
  --glass-2:rgba(248,244,237,.55);
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.55);
  --surface:#F8F4ED;
  --surface-2:#F1EBE1;
  --field:#FEFCF8;         /* 入力欄。カードより明るくして「書ける面」に見せる */
  --ink:#1E1A15;
  --ink-2:#5B5248;
  --ink-3:#6B6457;
  --line:#D9D1C4;
  --line-2:#E7E0D4;
  --kurenai:#A5364A;      /* 臙脂：日本の祝日・日曜 */
  --kurenai-soft:#F4E3E3;
  --ai:#3B5771;           /* 藍鼠：土曜 */
  --ai-soft:#E6EAEF;
  --kr:#7F6212;           /* 韓国の公休日：文字（濃い金）。淡い金の面(--kr-soft)の上で 4.5:1 を切らない濃さ */
  --kr-mark:#A98222;      /* 同：下線バー・枠・スイッチなど面で見せる部分。地との差 3:1 を保つため罫の真鍮(--gold)より一段濃い */
  --kr-soft:#F5ECD6;
  --gold:#B8912F;         /* 真鍮の罫（ヘッダー下の一本だけ） */
  --sakura:#E39BAA;       /* ロゴの桜の花びら（濃）。臙脂より明るく、地の象牙の上で花びらと読める */
  --sakura-2:#F2C4CE;     /* 同（淡） */
  --track-off:#D3CABB;
  --dot-off:#D3CABB;
  --thumb:#FFFFFF;
  --thumb-on:#1E1A15;
  --flash:#E3E6EE;
  --hover-veil:rgba(30,26,21,.055);
  --radius:10px;          /* カード・パネル・コントロールの面 */
  --radius-sm:6px;        /* 日付マス・チップなど面の中の小さな要素 */
  --card-shadow:0 1px 2px rgba(30,26,21,.07), 0 6px 16px rgba(30,26,21,.10);
  --card-shadow-hover:0 2px 4px rgba(30,26,21,.09), 0 12px 28px rgba(30,26,21,.15);
  /* 本文は LINE Seed を絞ったもの。JP→KR の順に重ね、無い字は端末の書体で受ける */
  /* 見出しと大きな数字。書体は本文と同じ ── このページで使う書体は LINE Seed だけ、
     という方針にしたので、明朝（Zen Old Mincho）は外した。
     同じ書体でも役割の名前は残してある ── どこが「見出し・数字」なのかが選択子から読め、
     あとで表示用の書体を足すときもここ1行を差し替えるだけで済む。
     大小の差は字の形ではなく、大きさ・太さ・字間で付けている */
  --display:var(--sans);
  }
  @page{margin:12mm}
  html,body,.embedded,.embedded body{height:auto!important;max-height:none!important;overflow:visible!important}
  /* ===== 印刷は「ヘッダー＋6か月」を1枚として2枚（開発者の指示 2026-09-18） =====
     画面の本体（.shell）は刷らない。印刷の直前（beforeprint）に JS が #printSheets を組む：
       1枚目 … ロゴ・説明・元号と凡例・年の題 ＋ 1〜6月    2枚目 … 同じヘッダー ＋ 7〜12月
     著作権表記は position:fixed で置き、どのページの下端にも刷られる（固定配置は紙ごとに繰り返される） */
  .shell,.coach{display:none!important}
  #printSheets{display:block}
  /* 1枚＝紙1ページ。高さを紙面（余白の内側＝100vh）に合わせ、著作権を下端に置く。はみ出しは切る（余白しか失わない） */
  .psheet{display:flex;flex-direction:column;height:calc(100vh - 1mm);overflow:hidden;break-after:page;page-break-after:always;break-inside:avoid}
  .psheet:last-of-type{break-after:auto;page-break-after:auto}
  .phead{display:flex;flex-direction:column;gap:6px;padding:0 0 10px;margin:0 0 10px;border-bottom:1px solid var(--gold)}
  .phead .brand-title{margin:0;line-height:0}
  .phead .brand-logo{display:block;height:34px;width:auto;color:var(--ink)}
  .phead .brand-logo .pt{animation:none!important}   /* 複製したロゴで花びらの動きが最初から始まると、途中の位置で刷られる */
  .phead .brand-tag{margin:0;font-size:13.5px;color:var(--ink-2);letter-spacing:.04em}
  .pstat{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 10px;padding-right:6px}   /* 右端の「韓国の公休日」が切れないよう少し内側に */
  .pstat .toggle .track{display:none!important}   /* スイッチの玉は刷らず、「韓国の公休日」の見本と文字は残す */
  .pstat .toggle{pointer-events:none}
  .ptitle{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.06em;margin:0 0 12px;text-wrap:balance}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .pgrid .month{break-inside:avoid;box-shadow:none;border:1px solid #CFC7B8;padding:10px 12px 8px}
  .pgrid .month-head b{font-size:22px}
  .pgrid .d{height:28px;font-size:13.5px}
  /* その半年の連休（日本・韓国の連休カードの行を写す）。月の格子の下に2列 */
  .pruns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
  .pruns > div{background:var(--surface);border:1px solid #CFC7B8;border-radius:var(--radius);padding:10px 14px 8px}
  .pruns.one{grid-template-columns:1fr}
  .pruns h3{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.1em;margin:0 0 6px;padding-bottom:4px;border-bottom:1px solid var(--line)}
  .pruns h3::before{content:"";display:inline-block;width:3px;height:11px;margin-right:8px;vertical-align:-1px}
  .pruns .jp h3::before{background:var(--kurenai)} .pruns .kr h3::before{background:var(--kr-mark)}
  /* 行は1列・1行に「期間 ・ 日数 ・ 通称」。画面の格子（欄の幅が固定）だと狭い紙で通称が縦に割れる */
  .pruns .runs{display:block}
  .pruns .run{display:flex!important;align-items:baseline;gap:8px;width:100%;padding:3px 0;min-height:0;font-size:12.5px;border-bottom:1px solid var(--line-2);grid-template-columns:none}
  .pruns .run b{font-size:12.5px;flex:none} .pruns .run .len{flex:none;font-size:11.5px}
  .pruns .run .nick{font-size:11.5px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;writing-mode:horizontal-tb}
  .pruns .note{font-size:12.5px;color:var(--ink-3);margin:0}
  .pfoot{margin:auto 0 0;padding-top:8px;text-align:center;font-size:12px;letter-spacing:.06em;color:var(--ink-3);font-variant-numeric:tabular-nums}
  a{color:inherit;text-decoration:none}
  /* 祝日の色付き面は刷る側で消されがちなので、色の再現を強制する */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media screen{ #printSheets{display:none} }   /* 画面では出さない（印刷のあいだだけ body の末尾に居る）。@media print の後ろにあるので screen に限る */