:root { --bg: #0d1f16; --card: #15301f; --line: #2b4d36; --fg: #eef6ee; --dim: #9fb9a5; --acc: #9be564; --red: #ff6b6b; --amber: #ffc857; --blue: #6bc6ff; }
* { box-sizing: border-box; }
html { font-size: calc(17px * var(--scale, 1)); }
html, body { margin: 0; background: var(--bg); color: var(--fg); -webkit-text-size-adjust: 100%; }
body { font: 1rem/1.55 -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif; }  /* html に font を書くと上の基準(17px×倍率)が16pxに戻る */
body { padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 16px); }
header { padding: 12px 16px 6px; }
.ttl { font-size: 1.35rem; font-weight: 800; }
.sub { color: var(--dim); font-size: 0.92rem; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; margin-left: 6px; vertical-align: 2px; }
.pill.draft { background: #444; } .pill.open { background: #2e7d32; } .pill.closed { background: #8d6e00; } .pill.revealed { background: #1565c0; }
nav { display: flex; gap: 6px; padding: 4px 16px 8px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
nav button { flex: 1; }
main { padding: 0 16px; max-width: 720px; margin: 0 auto; }
button { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; cursor: pointer; }
button.on { background: var(--acc); color: #10240f; border-color: var(--acc); font-weight: 800; }
button.pri { background: #2e7d32; border-color: #43a047; font-weight: 700; }
button.warn { background: #6d2020; border-color: #a33; }
button:disabled { opacity: .4; }
button.sm { padding: 5px 9px; font-size: 0.95rem; border-radius: 8px; }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.note { color: var(--dim); font-size: 0.95rem; margin: 8px 0; }
.err { color: var(--red); font-size: 0.95rem; margin: 8px 0; }
.banner { background: #1c3a52; border: 1px solid #2f6690; border-radius: 10px; padding: 8px 10px; font-size: 0.95rem; margin: 8px 0; }
.banner.red { background: #4a1c1c; border-color: #8a2f2f; }
h3 { font-size: 1.0rem; margin: 16px 0 6px; color: var(--acc); }
table.lb { width: 100%; border-collapse: collapse; font-size: 1.0rem; }
table.lb th { color: var(--dim); font-weight: 600; font-size: 0.9rem; text-align: center; padding: 4px 2px; border-bottom: 1px solid var(--line); }
table.lb td { text-align: center; padding: 8px 2px; border-bottom: 1px solid var(--line); }
table.lb td.nm { text-align: left; font-weight: 700; }
table.lb td.nm small { display: block; color: var(--dim); font-weight: 400; font-size: 0.9rem; }
table.lb tr.me td { background: rgba(155,229,100,.08); }
table.lb td.rk { width: 2.4em; font-weight: 800; }
.under { color: var(--red); } .over { color: var(--blue); }
.cf { color: var(--amber); font-size: 0.9rem; }
.cardx td { padding: 0 !important; }
.sc { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; margin: 6px 0 10px; font-size: 0.92rem; }
.sc div { text-align: center; background: rgba(0,0,0,.25); border-radius: 4px; padding: 2px 0; }
.sc .h { color: var(--dim); font-size: 0.9rem; }
.sc .hid { outline: 2px solid var(--amber); }
.sc .bd { background: #7a2020; } .sc .eg { background: #a33; } .sc .bg { background: #1d3f63; } .sc .db { background: #12335a; }
.holes { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 6px 0; }
.holes button { padding: 6px 0; font-size: 0.95rem; border-radius: 8px; }
.holes button.full { border-color: var(--acc); }
.holes button.cfh { border-color: var(--amber); color: var(--amber); }
.hhd { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; }
.hhd b { font-size: 1.5rem; } .hhd span { color: var(--dim); }
.pl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 6px 0; }
.pl.sel { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
.pl .n { font-weight: 800; } .pl .n small { color: var(--dim); font-weight: 400; margin-left: 4px; }
.pl .v { font-size: 1.75rem; font-weight: 800; min-width: 2.2em; text-align: right; }
.pl .x { grid-column: 1 / -1; font-size: 0.92rem; color: var(--dim); }
.pl .x.cf { color: var(--amber); }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.pad button { padding: 14px 0; font-size: 1.4rem; font-weight: 700; }
.who { display: grid; gap: 8px; margin: 12px 0; }
.who button { padding: 14px; font-size: 1.2rem; text-align: left; }
.form { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; }
input, select, textarea { font: inherit; color: var(--fg); background: #0b1912; border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; width: 100%; }
textarea { min-height: 90px; }
.pars { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; }
.pars button { padding: 6px 0; font-size: 0.95rem; }
.lk { word-break: break-all; font-size: 0.9rem; color: var(--dim); }
.box { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin: 8px 0; }
#toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); background: #000c; color: #fff; padding: 8px 14px; border-radius: 999px; font-size: 0.95rem; z-index: 20; max-width: 90vw; }
.prow { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 4px; margin: 6px 0; padding-top: 6px; border-top: 1px solid var(--line); }
.rrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; align-items: center; }
.rrow input { min-width: 0; padding: 6px; font-size: 1.0rem; }
.rrow .bm { grid-column: 1 / 3; }
.rrow .st { color: var(--dim); font-size: 0.92rem; white-space: nowrap; }
a.back { color: var(--acc); text-decoration: none; font-size: 1.0rem; padding: 4px 0; }
.prow .nm2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.prow .hcl { grid-column: 2 / 4; display: flex; align-items: center; gap: 4px; color: var(--dim); font-size: 0.92rem; }
.prow input, .prow select { padding: 6px; font-size: 1.0rem; }
a.box { display: block; color: inherit; text-decoration: none; } a.box b { color: var(--fg); }
/* iPhoneのSafariは年月・日付の欄に独自の最低幅があって、枠からはみ出して隣の字に被る(10-16)。見た目の決まりを外して枠に収める */
input[type="month"], input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
input[type="month"]::-webkit-date-and-time-value, input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.rrow > *, .prow > * { min-width: 0; }
.qr { margin: 10px auto 4px; width: 200px; max-width: 70%; } .qr svg { width: 100%; height: auto; display: block; border-radius: 6px; }

/* 文字の大きさ(10-16 大貴くん「老眼で見えん人がおるかも」): 一番小さい字でも基準の0.9倍(約15px)。上の A− A＋ で全体を大きく */
.fsz { position: absolute; right: 12px; top: 8px; display: flex; gap: 6px; }  /* 画面上の空きは body が取っとる(二重に足すとホーム画面のアプリで下にずれる) */
.fsz button { min-width: 3em; padding: 6px 8px; font-weight: 800; }
header { position: relative; padding-right: 8.5em; }
.install { line-height: 1.7; }
.install ol { margin: 6px 0 0 1.2em; padding: 0; }
.install b.ico { display: inline-block; border: 1px solid var(--fg); border-radius: 4px; padding: 0 5px; }

/* 入力画面(PETの配置、10-16 夜) */
.hstrip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hstrip::-webkit-scrollbar { display: none; }
.hstrip button { flex: 0 0 auto; min-width: 3.6em; padding: 6px 4px; display: grid; justify-items: center; line-height: 1.15; }
.hstrip button b { font-size: 1.3rem; } .hstrip button span { font-size: 0.9rem; color: var(--dim); }
.hstrip button.on { background: #2e5d24; border-color: var(--acc); color: var(--fg); }
.hstrip button.full:not(.on) { border-color: #4f8a3a; }
.hstrip button.cfh { border-color: var(--red); } .hstrip button.cfh span { color: var(--red); }
.hh2 { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 10px; }
.hh2 b { font-size: 1.75rem; } .hh2 .par { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px; font-weight: 800; font-size: 1.2rem; }
.cols { display: grid; gap: 8px; margin-bottom: 10px; }
.col { min-width: 0; text-align: center; }
.col .cn { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.col .cv { width: 100%; min-height: 4.6em; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: #0b1912; }
.col .cv b { font-size: 2.2rem; line-height: 1; } .col .cv small { font-size: 0.9rem; color: var(--dim); }
.col .cv.sel { border: 3px solid var(--amber); background: #22401d; }
.col .cv.cf { border-color: var(--red); } .col .cv.cf small { color: var(--red); }
.kp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 6px 0 10px; }
.kp button { padding: 0; height: 2.1em; font-size: 1.6rem; font-weight: 800; border-radius: 14px; background: #1f4a22; border-color: #3f7a34; }
.kp button.w2 { grid-column: span 2; font-size: 1.25rem; background: var(--bg); }
.kp button.w2.on { background: var(--acc); color: #10240f; }
.kp button:disabled { opacity: .35; }
.bnav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px); background: linear-gradient(transparent, var(--bg) 30%); z-index: 10; }
.bnav button { flex: 1; padding: 14px 6px; font-size: 1.15rem; font-weight: 800; border-radius: 14px; }
.bnav button.pri { flex: 1.4; }
body.hasnav main { padding-bottom: 6.5em; }
.cols.n1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.cols.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cols.n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* 画面の決まり(CSP)で HTML の中の style="" は効かんので、ここで同じ見た目を付ける */
#sub a, .err a { color: var(--acc); }
table.lb th:nth-child(2) { text-align: left; }
#rmid { flex: 2; } #rgrp { flex: 1; } #pb { flex: 1; }
input[data-gstart] { width: 7em; }