:root { --地: #fff8ec; --字: #3a2a12; --淡: #7a6346; --主: #e8890c; --枠: #ead9bd; }
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; background: var(--地); color: var(--字);
       min-height: 100vh; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
main { max-width: 420px; margin: 0 auto; padding: 40px 0; }
h1 { font-size: 26px; text-align: center; margin: 0 0 24px; }
h2 { font-size: 18px; margin: 0 0 12px; }
p { line-height: 1.7; margin: 0 0 12px; }
.小 { color: var(--淡); font-size: 14px; text-align: center; }
label { display: block; font-size: 14px; color: var(--淡); margin: 0 0 6px; }
input { width: 100%; font-size: 18px; padding: 14px; border: 1px solid var(--枠); border-radius: 12px; background: #fff; color: var(--字); }
input.数字 { font-size: 28px; letter-spacing: 6px; text-align: center; }
button { width: 100%; font-size: 17px; font-weight: bold; padding: 15px; margin-top: 14px; border: 0; border-radius: 12px;
         background: var(--主); color: #fff; }
button:disabled { opacity: .5; }
button.控え { background: transparent; color: var(--淡); font-weight: normal; font-size: 15px; }
.札 { background: #fff; border: 1px solid var(--枠); border-radius: 16px; padding: 20px; }
.知らせ { background: #fff1d6; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 16px; line-height: 1.6; }
.誤り { color: #b3261e; font-size: 14px; margin-top: 10px; min-height: 1em; }
textarea { width: 100%; font-size: 16px; padding: 12px; border: 1px solid var(--枠); border-radius: 12px; font-family: inherit; color: var(--字); }
.札 label { margin-top: 16px; }
.並び { display: flex; gap: 8px; }
.並び .選ぶ { flex: 1; margin: 0; padding: 12px 4px; font-size: 15px; background: #fff; color: var(--字); border: 1px solid var(--枠); font-weight: normal; }
.並び .選ぶ.選んだ { background: var(--主); color: #fff; border-color: var(--主); font-weight: bold; }
.並び.五 .選ぶ { font-size: 18px; }
.返事 { text-align: center; }
.大 { font-size: 19px; line-height: 1.8; margin: 16px 0; }
.暦 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 12px 0; }
.升 { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.升.出た { background: #e8890c; } .升.止めた { background: #4c9a2a; } .升.出なかった { background: #3b7dd8; }
.升.なし { background: #d9cdb8; } .升.先 { background: transparent; border: 1px dashed var(--枠); color: var(--淡); }
.升.今日 { outline: 2px solid var(--字); }
.凡例 .升 { display: inline-block; width: 12px; height: 12px; vertical-align: middle; margin: 0 2px 0 8px; }
.知らせ .控え { margin-top: 4px; padding: 6px; }
.周 { text-align: left; }