/*
 * ch33s3.app の共通の見た目。2026-10-05 にアプリ名 cheese に合わせて全面的に作り直した（オーナー「全面的に改修して」）。
 * 色はアプリのアイコンとスプラッシュの黄 #FFD23F と、アイコンの字の黒 #141414（design/icon/cheese/cheese-705.svg）。
 * 地はその黄を薄めたクリーム。チーズのキャラ（cheese-chara.png）の穴の色 #F0AA22 は飾りだけに使い、字には使わない
 * （白地とのコントラストが 2 に届かない）。
 * それまで（2026-09-27〜10-05）はアプリのテーマ「サクラ」の桜色、その前は黒地に #FF3118 だった。
 * 書体はアプリの既定と同じ: 本文 Noto Sans JP、数字と名前 Archivo、お題の札 しっぽり明朝（各ページの head で読む）。
 * 利用規約・プライバシー・サポート・404・/c はこのファイルだけを読む。トップの飾りは home.css。
 */
:root {
  --yellow: #ffd23f;
  --bg: #fff7dc;
  --sheet: #ffffff;
  --ink: #141414;
  --ink-2: #5a5140;
  --ink-3: #958a70;
  --line: #f1e4bb;
  --hole: #f0aa22;
  --max: 720px;
  /* 本文と、お題の札の書体。言語ごとに site/build.mjs が各ページの head で上書きする（site/langs.mjs）。
     しっぽり明朝はハングル・タイ文字・アラビア文字などを持たないので、その言語ではその文字の Noto にする */
  --sans: "Noto Sans JP";
  --serif: "Shippori Mincho";
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans), "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
header.site {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* 名前の前の印はチーズのキャラ。名前は Archivo の太字（アイコンの字は Segoe UI Black を輪郭にした物で、許諾を確かめて
   いないのでサイトの字には使わない。design/icon/cheese の経緯を参照） */
.brand {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: "Archivo", sans-serif; font-weight: 900; letter-spacing: -0.03em; font-size: 24px; line-height: 1;
}
.brand .dot { width: 36px; height: 34px; background: url(/cheese-chara.png) center / contain no-repeat; }
nav.site { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; margin-inline-start: auto; }
nav.site a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 700; }
nav.site a:hover { color: var(--ink); }
main { max-width: var(--max); margin: 0 auto; padding: 40px 20px 80px; }
h1 { font-size: 30px; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 8px; font-weight: 900; }
h2 { font-size: 19px; margin: 40px 0 10px; letter-spacing: -0.01em; font-weight: 900; }
h3 { font-size: 16px; margin: 24px 0 6px; font-weight: 700; }
p { margin: 0 0 14px; }
.meta { color: var(--ink-2); font-size: 13px; margin-bottom: 28px; }
.lead { color: var(--ink-2); font-size: 17px; }
ul, ol { padding-inline-start: 1.4em; }
li { margin-bottom: 6px; }
.card { background: var(--sheet); border-radius: 22px; padding: 20px 22px; margin: 18px 0; border: 2px solid var(--line); }
.card h3 { margin-top: 0; }
.pill {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none; font-weight: 700;
  border-radius: 999px; padding: 12px 22px; font-size: 14px;
}
.pill.ghost { background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.pill + .pill { margin-left: 8px; }
.id { font-family: "Archivo", ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 800; letter-spacing: 0.08em; }
table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 10px 0 18px; background: var(--sheet); border-radius: 16px; overflow: hidden; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
th { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
/* 表が画面より広いとき、ページごと横に流れないよう表だけ横に送る */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
hr { border: 0; border-top: 2px solid var(--line); margin: 40px 0; }
footer.site {
  max-width: var(--max); margin: 0 auto; padding: 0 20px 48px; color: var(--ink-3); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--ink); }

/*
 * キャラ。アプリと同じく飾りで、読み上げない（alt=""）・押せない。どの子が出るかは chara.js が毎回選ぶ。
 * .peek は札の上の縁に立つ子（アプリの「見出しの子」と同じ型）: 一辺の 85% を縁より上に出し、足もとだけ札にかかる。
 */
img.chara { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.has-peek { position: relative; }
/* z-index: -1 で札の裏に回す（足もとが札に隠れる）。札の .has-peek は z-index を持たないので重なりの文脈を作らず、
   子はその外側（isolation: isolate を持つ入れ物か、ページ）の奥に描かれる。入れ物に地の色があるときは、その入れ物に
   isolation: isolate を付けないと、子が入れ物の地の裏に隠れて見えなくなる */
.peek { position: absolute; z-index: -1; inset-inline-end: 22px; top: calc(var(--peek, 56px) * -0.85); width: var(--peek, 56px); height: var(--peek, 56px); }

/* ---- 言語（2026-10-05、オーナー「色んな言語大量に用意して対応するようにして。」）----
   見出しの右の地球の丸から開く一覧（site/build.mjs が data-langmenu に入れる）と、いちばん下の一覧。
   一覧の行は ?lang= 付きのリンクで、Worker が選んだ言語を覚えてからきれいな URL へ送る */
header.site { position: relative; }
.langs { position: relative; flex: none; }
.langs summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px;
  border-radius: 18px; border: 2px solid var(--ink); background: var(--sheet); font-size: 13px; font-weight: 700; white-space: nowrap;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 18px; height: 18px; }
.langs ul {
  position: absolute; z-index: 100; top: 44px; inset-inline-end: 0; margin: 0; padding: 8px; list-style: none;
  width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; columns: 2; column-gap: 4px;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink);
}
.langs li { margin: 0; break-inside: avoid; }
.langs a { display: block; padding: 7px 10px; border-radius: 10px; text-decoration: none; font-size: 14px; }
.langs a:hover { background: var(--bg); }
.langs a[aria-current] { background: var(--yellow); font-weight: 700; }
.langfoot { max-width: 1040px; margin: 0 auto; padding: 0 20px 40px; }
.langlist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.langlist a { color: var(--ink-2); text-decoration: none; }
.langlist a[aria-current] { color: var(--ink); font-weight: 700; }
.langlist li { margin: 0; }
/* 規約・プライバシーの訳に付ける「日本語版が優先」 */
.tnote { background: var(--sheet); border: 2px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--ink-2); }

@media (max-width: 480px) {
  h1 { font-size: 27px; }
  /* 幅の狭いスマホでは地球の丸だけ（名前とメニューを一段に収める） */
  .langs summary span { display: none; }
  .langs summary { padding: 0 8px; }
  nav.site { gap: 2px 12px; }
  nav.site a { font-size: 13px; }
  .brand { font-size: 20px; gap: 6px; }
  .brand .dot { width: 30px; height: 28px; }
}
/* 幅 400 より狭いと、名前とメニュー三つが一段に入らず折り返した（2026-10-05、390 で二段）。
   トップの「できること」はページの中への飛び先なので、狭い時だけ外す */
@media (max-width: 400px) {
  nav.site a[href="#features"] { display: none; }
}