/* ============================================================
   申込・マイページ・当日受付（Next.js 側のページ）だけで使う追加スタイル。
   基本の見た目は静的サイトの css/style.css（tools/build.py のサイトと共通）。
   このファイルは web/public/css/ にだけ置く（サイトの同期で消されない）。
   ============================================================ */

.wrap.narrow { max-width: calc(640px + var(--pad) * 2); }

/* 金額 */
.yen { font-family: var(--f-en); font-size: 1.25rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.yen--l { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }

/* 参加費・お支払い */
.pay-table th { width: 9em; }
.pay-table td .note { display: block; margin-top: 4px; }
.pay-total th { background: var(--blue); }
.pay-total td { background: var(--yellow); }
.choice-sub { display: block; margin-top: 4px; font-size: .82rem; font-weight: 500; color: var(--gray); line-height: 1.6; }
.choice--big > span { align-items: flex-start; }
.choice--big > span::before { margin-top: 3px; }
.choice--big > span > span, .choice--big .choice-sub { flex: 1; }
.choices--col .choice, .choices--col .choice > span { width: 100%; }

.coupon-row { display: flex; gap: 10px; flex-wrap: wrap; }
.coupon-row input {
  flex: 1 1 12em; min-width: 0; padding: 9px 12px; font: inherit; font-family: var(--f-mono); font-size: 1rem; letter-spacing: .06em;
  border: 3px solid var(--black); border-radius: 0; background: var(--white);
}
.coupon-row input:focus { outline: 4px solid var(--blue); outline-offset: 0; background: #fffbe0; }
.btn--s { padding: 8px 16px; font-size: .9rem; box-shadow: 4px 4px 0 var(--black); }
.btn--s:hover { transform: translate(4px, 4px); }
.linkish { font: inherit; font-size: .85rem; font-weight: 900; color: var(--blue); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 連絡事項（複数行） */
.field textarea {
  display: block; width: 100%; padding: 11px 13px; font: inherit; font-size: 1rem; color: var(--black); line-height: 1.7;
  background: var(--white); border: 3px solid var(--black); border-radius: 0; resize: vertical;
}
.field textarea:focus { outline: 4px solid var(--blue); outline-offset: 0; background-color: #fffbe0; }

/* マイページ */
.mp-status { display: flex; align-items: stretch; width: fit-content; max-width: 100%; border: var(--bw) solid var(--black); box-shadow: var(--shadow); }
.mp-status span { display: grid; place-items: center; padding: 8px 16px; background: var(--black); color: var(--white); font-weight: 900; font-size: .9rem; }
.mp-status b { padding: 8px 22px; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); font-weight: 900; }
.mp-status--paid b { background: var(--blue); color: var(--white); }
.mp-status--pending b { background: var(--yellow); }
.mp-status--off b { background: #e9e9e6; color: var(--gray); }
.mp-pay { padding: clamp(20px, 3vw, 32px); }
.mp-alt { margin-top: 20px; border-top: 2px solid var(--black); padding-top: 14px; }
.mp-alt summary { cursor: pointer; font-weight: 900; }
.mp-alt p { margin-top: 10px; font-size: .92rem; }
.mp-qr { display: grid; justify-items: center; align-content: start; gap: 14px; padding: clamp(20px, 3vw, 28px); text-align: center; }
.mp-qr .h3 { justify-self: stretch; }
.mp-qr img { width: 200px; height: 200px; border: 3px solid var(--black); background: var(--white); image-rendering: pixelated; }
.mp-code span { display: block; font-size: .78rem; font-weight: 900; color: var(--gray); }
.mp-code b { font-family: var(--f-mono); font-size: 1.8rem; letter-spacing: .2em; }