/* KADODE。色は brand/tokens.css と同じ値（白地、金と臙脂）。外の字体・計測は読まない。 */
:root {
  --paper: #ffffff; --paper-2: #f7f6f3; --gold: #b8822c; --gold-soft: #f6ecd6;
  --maroon: #4a0a16; --maroon-2: #6b1424; --ink: #2b1a1e; --soft: #6a5a5e; --line: #e6dccf;
  --ok: #1d6b3a; --ok-soft: #e4f2e8; --warn: #8a5a00; --warn-soft: #fbf0d9; --bad: #9b1c1c;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #17110f; --paper-2: #211917; --gold: #e8c272; --gold-soft: #33281a; --maroon: #f0d9a8; --maroon-2: #e8c272; --ink: #f1e9e4; --soft: #b9aaa6; --line: #3a2e2a; --ok: #7ed29b; --ok-soft: #1c2b20; --warn: #f2c46b; --warn-soft: #2e2414; --bad: #ff9a9a; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* 組み方は統合サイト（hub/site/style.css）に合わせる。文節で折る（Chrome）。Safari は auto-phrase に対応しないので、
   固有の語と「数＋単位」は .nw で包む（tools/guard.py と worker.js の guardText）。<wbr> は使わない（COSMOS で二重描画の原因になった）。 */
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.85 "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; letter-spacing: .02em; word-break: auto-phrase; overflow-wrap: anywhere; line-break: strict; -webkit-font-smoothing: antialiased; }
html[lang="en"] body { line-height: 1.7; letter-spacing: 0; word-break: normal; overflow-wrap: break-word; }
h1, h2, h3, h4 { font-feature-settings: "palt"; text-wrap: balance; }
p, li, td, .lead { text-wrap: pretty; }
a { color: var(--maroon-2); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nw { white-space: nowrap; }

/* 頭と足 */
.bar { border-bottom: 1px solid var(--line); }
.bar-in { max-width: 46rem; margin: 0 auto; padding: .5rem 1rem; display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: .08em; color: var(--maroon); text-decoration: none; min-height: 2.75rem; }
.brand img { border-radius: 50%; }
.bar nav { display: flex; gap: .2rem 1rem; flex-wrap: wrap; margin-left: auto; font-size: .9rem; }
.bar nav a { color: var(--ink); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.bar nav a[aria-current="page"] { color: var(--maroon); font-weight: 700; }
footer.foot { max-width: 46rem; margin: 3.5rem auto 0; padding: 1.4rem 1rem 2.5rem; border-top: 1px solid var(--line); color: var(--soft); font-size: .82rem; }
footer.foot nav { display: flex; gap: 0 1.4rem; flex-wrap: wrap; margin-bottom: .4rem; }
footer.foot nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
footer.foot p { margin: .3rem 0; }

main { max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
h1 { font-size: clamp(1.35rem, 5.4vw, 1.95rem); line-height: 1.45; margin: 1.6rem 0 .8rem; color: var(--maroon); }
h2 { font-size: 1.15rem; line-height: 1.5; margin: 2.4rem 0 .7rem; padding-bottom: .35rem; border-bottom: 1px solid var(--line); color: var(--maroon); }
h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; color: var(--maroon); }
p, li { margin: .5rem 0; }
ul, ol { padding-left: 1.4rem; }
.lead { color: var(--soft); margin: 0 0 1rem; }
.note, .meta { color: var(--soft); font-size: .9rem; }

/* 手引きの頁 */
.crumbs { font-size: .85rem; color: var(--soft); margin: 1rem 0 0; }
.crumbs a { color: var(--soft); }
.updated { font-size: .85rem; color: var(--soft); margin: 0 0 1rem; }
.answer { background: var(--paper-2); border-left: 4px solid var(--gold); border-radius: 0 .8rem .8rem 0; padding: .9rem 1rem; margin: 1rem 0 1.4rem; }
.answer p:first-child { margin-top: 0; } .answer p:last-child { margin-bottom: 0; }
blockquote { margin: .8rem 0; padding: .4rem 1rem; border-left: 3px solid var(--line); color: var(--soft); font-size: .93rem; }
blockquote p { margin: .3rem 0; }
.unknown { background: var(--warn-soft); border-radius: .8rem; padding: .8rem 1rem; margin: 1rem 0; font-size: .95rem; }
.unknown strong { color: var(--warn); }
table { border-collapse: collapse; width: 100%; margin: .8rem 0; font-size: .92rem; }
th, td { border-bottom: 1px solid var(--line); padding: .5rem .4rem; text-align: left; vertical-align: top; }
th { color: var(--maroon); font-weight: 700; }
th:last-child, td:last-child { min-width: 2.6em; }
th.k, td.k { white-space: nowrap; }
.tablewrap { overflow-x: auto; }
.sources { font-size: .85rem; color: var(--soft); }
.sources ol { padding-left: 1.2rem; }
.related { list-style: none; padding: 0; }
.related li { margin: 0; border-top: 1px solid var(--line); }
.related a { display: block; padding: .7rem 0; text-decoration: none; }
.related a span { display: block; color: var(--soft); font-size: .88rem; }

/* 札と押し手 */
.cards { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 1rem 0; }
.card { display: block; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; text-decoration: none; color: var(--ink); background: var(--paper); }
.card:hover { border-color: var(--gold); }
.card b { display: block; color: var(--maroon); font-size: 1.05rem; margin-bottom: .2rem; }
.card span { color: var(--soft); font-size: .9rem; }
.promise { background: var(--paper-2); border-radius: 1rem; padding: 1rem 1.2rem; }
.promise ul { margin: .4rem 0 0; }
.btn, button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--maroon); border-radius: 999px; padding: .5rem 1.2rem; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; gap: .4rem; }
.btn.primary, button.primary { background: var(--maroon); border-color: var(--maroon); color: var(--paper); font-weight: 700; padding: .65rem 1.8rem; }
button:disabled { opacity: .5; cursor: default; }
button.link { border: 0; background: none; padding: .3rem 0; color: var(--soft); text-decoration: underline; text-underline-offset: .2em; font-size: .88rem; border-radius: .3rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .8rem 0; }

/* 欄 */
form.fields { display: grid; gap: 1rem; margin: 1rem 0; }
/* 欄の名前は普通の流れで組む（grid にすると、折り返しの守りの span が別の行になって名前が途中で折れる） */
label { display: block; font-size: .9rem; font-weight: 700; color: var(--maroon); }
label small { display: block; font-weight: 400; color: var(--soft); margin-top: .15rem; }
label > input, label > select, label > textarea { display: block; margin-top: .3rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: .7rem; padding: .65rem .8rem; width: 100%; min-height: 2.9rem; }
textarea { min-height: 5rem; resize: vertical; }
.msg { margin: .4rem 0 0; color: var(--bad); font-size: .9rem; }
.msg:empty { display: none; }
.msg.ok { color: var(--ok); }
.box { background: var(--paper-2); border-radius: 1rem; padding: 1rem 1.1rem; margin: 1rem 0; }
.box > :first-child { margin-top: 0; } .box > :last-child { margin-bottom: 0; }
.urlbox { display: flex; gap: .5rem; flex-wrap: wrap; }
.urlbox input { flex: 1 1 14rem; font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .92em; background: var(--paper-2); border-radius: .3rem; padding: .05rem .3rem; }

/* 参加手順の頁 */
.steps { list-style: none; padding: 0; counter-reset: s; margin: 1rem 0; }
.steps > li { counter-increment: s; position: relative; padding: .2rem 0 1rem 3rem; margin: 0; }
.steps > li::before { content: counter(s); position: absolute; left: 0; top: .1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--maroon); color: var(--paper); display: grid; place-items: center; font-weight: 700; }
.steps > li b { display: block; color: var(--maroon); font-size: 1.05rem; }
.steps .btn { margin-top: .4rem; }
.device { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; margin: 1rem 0; }
.device a { text-align: center; }
.callout { border: 1px solid var(--gold); border-radius: 1rem; padding: .9rem 1rem; margin: 1rem 0; }

/* 手帳 */
.clock { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; margin: .6rem 0; }
.clock span { height: 1.4rem; border-radius: .25rem; background: var(--line); }
.clock span.on { background: var(--gold); }
.big { font-size: 2rem; font-weight: 700; color: var(--maroon); line-height: 1.2; }
.stat { display: flex; gap: 1.6rem; flex-wrap: wrap; margin: .6rem 0; }
.stat div { display: flex; flex-direction: column; font-size: .85rem; color: var(--soft); }
.flag { border-radius: .8rem; padding: .7rem .9rem; margin: .6rem 0; font-size: .93rem; }
.flag.ok { background: var(--ok-soft); color: var(--ok); }
.flag.warn { background: var(--warn-soft); color: var(--warn); }
.log { list-style: none; padding: 0; margin: .4rem 0; }
.log li { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--line); padding: .5rem 0; margin: 0; font-size: .93rem; }
.log li span { flex: 1; }
.log li time { color: var(--soft); white-space: nowrap; font-size: .85rem; }
details.sec { border: 1px solid var(--line); border-radius: 1rem; margin: .8rem 0; }
details.sec > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 700; color: var(--maroon); min-height: 2.75rem; }
details.sec > div { padding: 0 1rem 1rem; }
.q { border-top: 1px solid var(--line); padding: .6rem 0; }
.q b { color: var(--maroon); }

.mk { display: inline-block; width: 1.2em; text-align: center; font-weight: 700; }
.mk-f { color: var(--ok); }
.mk-r { color: var(--maroon-2); }
.mk-g { color: var(--warn); }
h4 { font-size: .95rem; margin: 1.2rem 0 .3rem; color: var(--maroon); }
label.chk { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; color: var(--soft); font-size: .85rem; min-height: 2.75rem; }
label.chk input { width: 1.2rem; min-height: 0; height: 1.2rem; }
ul.note { padding-left: 1.2rem; margin: .6rem 0 0; }
small.nofile { color: var(--warn); font-weight: 700; font-size: .85rem; }

@media (max-width: 30rem) {
  .bar-in { padding-bottom: 0; }
  .bar nav { margin-left: 0; width: 100%; justify-content: space-between; gap: 0 .5rem; font-size: .85rem; border-top: 1px solid var(--line); }
}
@media (max-width: 30rem) { .device { grid-template-columns: 1fr; } }
@media print { .bar, footer.foot, button, .noprint { display: none !important; } details.sec { border: 0; } details.sec > div { display: block; } }
footer.foot p.sis { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: center; }
footer.foot p.sis > span { color: var(--soft); margin-right: .2rem; }
footer.foot p.sis a { min-height: 2.75rem; display: inline-flex; align-items: center; }