/* 利用規約・プライバシーポリシー共用のスタイル。色のトークンは本文ページ（index.html）と同じ値。
   言語はページ（/ と ko/）で決まり、切り替えは右上の地球の一覧から相手側の同じページへ移る。
   本文の書体は端末のゴシック ── このページの文章は本文ページのサブセット書体（Calendar Sans）に
   収録していない字が大半で、当てると字ごとに書体が混ざる。サブセットをこの2ページも含めて
   作り直したら、.doc の font-family を var(--sans) に戻すこと */
: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);
}
: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);
}
@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")}
@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")}
@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{--doc-sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Apple SD Gothic Neo","Malgun Gothic","Noto Sans JP","Noto Sans KR","Noto Sans Thai",system-ui,sans-serif}
/* タイ語ページ：見出し・道具の字は LINE Seed TH を先に */
.shell[data-th]{--sans:"Calendar Sans TH","Calendar Sans JP","Calendar Sans KR","Noto Sans Thai",system-ui,sans-serif}
.shell[data-tw]{--sans:"Calendar Sans TW","Calendar Sans JP","Calendar Sans KR","PingFang TC","Microsoft JhengHei",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
input,button{font-family:inherit}
.shell{max-width:820px;margin:0 auto;padding:0 clamp(16px,3vw,32px) 48px}
.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}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--ai);outline-offset:2px}
/* 見出し：ロゴと言語切り替え。本文ページの1行目と同じ並び */
/* ヘッダーは本文ページと同じく常に固定（狭い画面も）。ここは .shell が紙面の全部を包むので sticky で足りる。
   磨りガラスは本文ページと同じ調子（--ground-veil ＋ ぼかし）。ぼかしに対応しない環境では透かさない */
.masthead{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:calc(30px + env(safe-area-inset-top,0px)) 0 18px;border-bottom:1px solid var(--gold);margin-bottom:32px;background:var(--ground)}
@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)}
}
@media (max-width:540px){ .masthead{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-bottom:12px;margin-bottom:24px} }
.brand{display:inline-block;color:inherit;text-decoration:none}   /* 触れても下線は出さない（見出しの罫と二重に見えるため） */
.brand-logo{display:block;height:clamp(34px,3.4vw,44px);width:auto;color:var(--ink);overflow:visible}
.brand-logo .wm{display:none}
.brand-logo[data-wm="ja"] .wm--ja,.brand-logo[data-wm="ko"] .wm--ko{display:block}
/* 右上の道具（本文ページと同じ作り） */
.hdr-tools{display:flex;align-items:center;gap:8px}
.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}
@media (max-width:400px){ .brand-logo{height:30px} .hdr-tools{gap:6px} .tool{width:32px;height:32px} }
/* 本文：1枚のカードに載せる（本文ページの一覧カードと同じ面） */
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--card-shadow);padding:clamp(22px,4vw,40px) clamp(18px,4vw,44px) clamp(26px,4vw,40px);font-family:var(--sans);line-height:1.9}
.doc h1{font-size:clamp(22px,2.4vw,28px);letter-spacing:.06em;margin:0 0 8px;line-height:1.4}
.doc-meta{margin:0 0 20px;font-size:13px;color:var(--ink-3);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.doc-lead{margin:0 0 28px;padding-bottom:22px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.doc section + section{margin-top:26px}
.doc h2{font-size:17px;letter-spacing:.04em;margin:0 0 10px;padding-left:12px;border-left:3px solid var(--kurenai);line-height:1.5}
.doc p,.doc li{margin:0;font-size:15px;color:var(--ink-2)}
.doc ol,.doc ul{margin:0;padding-left:1.6em}
.doc li + li{margin-top:6px}
.doc a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
@media (hover:hover){ .doc a:hover{text-decoration-color:var(--ink)} }
/* お問い合わせのフォームへの入り口は大きめの釦で1行 */
/* .doc p より後ろで、かつ同じ重み以上にする（.doc p が margin:0 を持つため） */
.doc .doc-form{margin:0 0 28px}
.doc .doc-form a{display:inline-block;padding:12px 22px;border:1px solid var(--ink);border-radius:var(--radius-sm);
  background:var(--ink);color:var(--surface);text-decoration:none;font-size:16px;font-weight:700;letter-spacing:.04em}
@media (hover:hover){ .doc .doc-form a:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--surface)} }
/* 読みもの（ガイド）のページ：段落の間、末尾の関連リンク（gen_guides.py が出す） */
.doc p + p,.doc p + ul,.doc ul + p{margin-top:10px}
.doc-nav{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.doc-nav p{font-size:12.5px;letter-spacing:.24em;color:var(--ink-3);margin:0 0 10px}
.doc-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.doc-nav li + li{margin-top:0}
.doc-nav a{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);text-decoration:none;font-size:14px;color:var(--ink-2)}
@media (hover:hover){ .doc-nav a:hover{border-color:var(--ink-3);color:var(--ink)} }
/* フッター：本文ページと同じ組み */
.footer{padding-top:30px}
.foot-row{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:14px 24px}
.foot-text{flex:1 1 320px;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}
.foot-links a[aria-current="page"]{color:var(--ink);pointer-events:none}
@media (hover:hover){ .foot-links a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
@media print{ .skip,.hdr-tools{display:none!important} .doc{box-shadow:none} .masthead{position:static;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} }
