/* 名簿を作らずに案内を回す道具 — デザイントークン */

:root{
  --bg:#FAF9F7;--surface:#FFFFFF;--surface-2:#F1EEE9;
  --ink:#1E1B16;--ink-2:#66605A;--ink-3:#A39C93;
  --hairline:rgba(30,27,22,0.08);
  --accent:#C4622D;--accent-ink:#FFFFFF;--num-accent:#C4622D;
  --space-page:20px;--space-section:28px;--space-card:16px;
  --radius-card:20px;--radius-button:14px;--radius-input:12px;--radius-pill:999px;
  --tap-min:48px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17140F;--surface:#211D17;--surface-2:#2A251D;
    --ink:#F3EFE9;--ink-2:#B8AFA3;--ink-3:#7A7268;
    --hairline:rgba(255,255,255,0.08);
    --accent:#E08A54;--accent-ink:#1E1B16;--num-accent:#E08A54;
  }
}
:root[data-theme="dark"]{
  --bg:#17140F;--surface:#211D17;--surface-2:#2A251D;
  --ink:#F3EFE9;--ink-2:#B8AFA3;--ink-3:#7A7268;
  --hairline:rgba(255,255,255,0.08);
  --accent:#E08A54;--accent-ink:#1E1B16;--num-accent:#E08A54;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  font-size:15px;line-height:1.8;font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
}

.screen{
  max-width:480px;margin:0 auto;
  padding:var(--space-page) var(--space-page) 48px;
  min-height:100vh;display:flex;flex-direction:column;
}
.screen.wide{max-width:640px}

a{color:inherit}

/* タイプスケール。長い1語の入力 (欧文の名前・URLなど) でも横に溢れないよう折り返す */
.t-display{font-size:28px;font-weight:700;line-height:1.3;margin:0;overflow-wrap:anywhere}
.t-title{font-size:22px;font-weight:700;line-height:1.35;margin:0;overflow-wrap:anywhere}
.t-body{font-size:15px;font-weight:400;line-height:1.7;color:var(--ink);margin:0;overflow-wrap:anywhere}
.t-label{font-size:16px;font-weight:600}
.t-meta{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0;overflow-wrap:anywhere}
.t-num{font-family:"Roboto Mono",monospace;font-size:32px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--num-accent)}

.sec{margin-top:var(--space-section)}
.spacer{flex:1}

.card{background:var(--surface);border-radius:var(--radius-card);padding:var(--space-card)}

.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:var(--tap-min);border-radius:var(--radius-button);
  font-size:16px;font-weight:600;background:var(--accent);color:var(--accent-ink);
  border:0;width:100%;font-family:inherit;cursor:pointer;text-decoration:none;
}
.btn:disabled{opacity:.45;cursor:default}
.btn-quiet{
  background:none;color:var(--ink-2);font-size:14px;font-weight:500;
  min-height:var(--tap-min);display:flex;align-items:center;justify-content:center;
  text-decoration:underline;text-underline-offset:3px;border:0;width:100%;
  font-family:inherit;cursor:pointer;
}

/* 出欠 3 択。同一サイズ・同一形状・無彩色。選択時のみアクセントのリング */
.rsvp{display:flex;gap:8px}
.rsvp>button{
  flex:1;min-height:var(--tap-min);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--ink);border:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;
  box-shadow:inset 0 0 0 2px transparent;
}
.rsvp>button.on{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface)}

/* 入力欄。箱ではなく下線 1 本 */
.field{margin-top:18px}
.field .lb{font-size:13px;color:var(--ink-2);margin-bottom:2px}
.field input{
  width:100%;border:0;border-bottom:1.5px solid var(--hairline);
  padding:10px 0 8px;font-size:17px;color:var(--ink);font-weight:500;
  background:transparent;font-family:inherit;border-radius:0;
}
.field input::placeholder{color:var(--ink-3);font-weight:400}
.field input:focus{outline:0;border-bottom-color:var(--accent)}

.pill-mini{
  display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;
  border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-2);
}

/* 共有シート */
.sheet-backdrop{
  position:fixed;inset:0;background:rgba(20,17,12,.42);
  display:flex;align-items:flex-end;justify-content:center;z-index:20;
}
.sheet-backdrop[hidden]{display:none}
.share{
  background:var(--surface);border-radius:var(--radius-card) var(--radius-card) 0 0;
  padding:var(--space-card) var(--space-page) calc(var(--space-card) + 12px);
  width:100%;max-width:480px;
}
.share .top{
  display:flex;align-items:center;gap:10px;min-height:var(--tap-min);
  border-radius:var(--radius-input);background:var(--surface-2);padding:0 14px;
  font-size:15px;font-weight:600;border:0;width:100%;font-family:inherit;cursor:pointer;color:var(--ink);
}
.share .icons{display:flex;gap:10px;margin-top:12px}
.share .icons>button{
  flex:1;min-height:var(--tap-min);border-radius:var(--radius-input);
  background:var(--surface-2);border:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:11.5px;color:var(--ink-2);
  font-family:inherit;cursor:pointer;
}

/* 来る人の一覧。長い名前でも列の外に溢れないよう、縮んで折り返せるようにする */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px solid var(--hairline)}
.row:last-child{border-bottom:0}
.row .nm{font-size:16px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.row .sub{font-size:12.5px;color:var(--ink-3);min-width:0;overflow-wrap:anywhere;text-align:right}

.chain{
  background:var(--surface-2);border-radius:var(--radius-input);
  padding:12px 14px;margin-top:12px;font-size:13px;color:var(--ink-2);line-height:1.65;
  overflow-wrap:anywhere;
}
.chain b{color:var(--ink)}

.banner{
  background:var(--surface-2);border-radius:var(--radius-input);
  padding:12px 14px;margin-bottom:var(--space-section);font-size:14px;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;
}

.error-text{color:var(--accent);font-size:13.5px;margin-top:8px}

.center{text-align:center}