:root { color: var(--ink, #1c1917); background: var(--page, #f4f7f5); font-family: "Segoe UI", sans-serif; }
body { margin: 0; padding-bottom: 5.2rem; }
a { color: #6d28d9; text-decoration: none; font-weight: 700; }
header { display: flex; align-items: center; height: 5rem; min-height: 5rem; max-height: 5rem; padding: 0 1rem; background: var(--header, #12382c); color: #f4f7f5; }
.club { margin: 0; max-width: 7.5rem; font-size: 0.85rem; font-weight: 700; line-height: 1.15; }
.app-name { margin: 0; flex: 1; text-align: center; font-size: 1.4rem; font-weight: 700; }
header button, main button { background: #111; color: white; border: 0; border-radius: 4px; padding: 0.8rem 1rem; font: inherit; font-weight: 700; }
header button { width: auto; padding: 0.45rem 0.7rem; }
main button { width: 100%; }
main { padding: 1rem; max-width: 40rem; margin: 0 auto; }
h1 { font-size: 1.6rem; }
label { display: grid; gap: 0.25rem; margin: 0.7rem 0; font-size: 1rem; }
input, select { font: inherit; font-size: 16px; padding: 0.7rem; border: 1px solid #d6d3d1; border-radius: 4px; width: 100%; box-sizing: border-box; }
section, .notice { background: white; border-radius: 8px; padding: 0.8rem 1rem; margin: 0.7rem 0; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; height: 4.4rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--header, #12382c); }
.dock a { color: #f4f7f5; text-align: center; padding: 1.1rem 0.2rem; font-weight: 700; text-decoration: none; }
.show { display: flex; align-items: center; gap: 0.4rem; }
.show input { width: auto; }
dialog.letter-pop { border: 0; border-radius: 8px; padding: 1.2rem; }
dialog.letter-pop::backdrop { background: rgba(0,0,0,0.45); }