/* 会場運営便利ツールパック 共通スタイル（DESIGN.md） */
:root {
  --bg: #f6f3ee;
  --surface: #ffffff;
  --ink: #1d2125;
  --ink-2: #4a5159;
  --line: #ddd6ca;
  --brand: #0e6a6a;
  --brand-ink: #ffffff;
  --brand-soft: #e3f0ef;
  --accent: #824600;
  --accent-soft: #fbeedd;
  --danger: #b42318;
  --ok: #1e7a3c;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15181b;
    --surface: #1f2428;
    --ink: #eef0f2;
    --ink-2: #b7bec6;
    --line: #353c43;
    --brand: #4fb3ad;
    --brand-ink: #0b1514;
    --brand-soft: #1d3332;
    --accent: #f0a04b;
    --accent-soft: #3a2c1b;
    --danger: #ff8a7a;
    --ok: #6fd28f;
    --shadow: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
.tp-wrap { max-width: 880px; margin: 0 auto; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
a { color: var(--brand); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.35; margin: 0; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.08rem; }
p { margin: .4em 0; }
.tp-muted { color: var(--ink-2); font-size: .94rem; }
.tp-hidden, [hidden] { display: none !important; }

/* ヘッダー */
.tp-header { padding: 20px 0 8px; }
.tp-header .tp-kicker { color: var(--ink-2); font-size: .9rem; letter-spacing: .04em; }
.tp-venue { font-size: 1.6rem; font-weight: 800; }
.tp-event { margin-top: 2px; font-size: 1.05rem; font-weight: 600; }
.tp-event .tp-date { color: var(--ink-2); font-weight: 500; margin-left: .5em; }

/* 場面の見出し */
.tp-scene { margin: 26px 0 10px; display: flex; align-items: center; gap: 10px; scroll-margin-top: 12px; }
.tp-scene h2 { display: flex; align-items: center; gap: 10px; }
.tp-scene h2::before { content: ""; width: 6px; height: 1.2em; border-radius: 3px; background: var(--brand); }
.tp-now {
  display: inline-block; font-size: .8rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 10px;
}

/* カード */
.tp-cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .tp-cards { grid-template-columns: 1fr 1fr; } }
.tp-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  min-height: 72px; padding: 14px 16px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; font: inherit; cursor: pointer; width: 100%;
}
.tp-card:hover { border-color: var(--brand); }
.tp-card:active { transform: translateY(1px); }
.tp-card-title { font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-card-title::after { content: "›"; margin-left: auto; color: var(--ink-2); font-size: 1.3rem; line-height: 1; }
.tp-card-desc { color: var(--ink-2); font-size: .95rem; }
.tp-lock, .tp-badge-ok, .tp-badge {
  font-size: 16px; font-weight: 700; border-radius: 999px; padding: 0 9px; line-height: 1.7; white-space: nowrap;
}
.tp-lock { color: var(--accent); border: 1px solid var(--accent); }
.tp-badge-ok { color: var(--ok); border: 1px solid var(--ok); }
.tp-badge { color: var(--ink-2); border: 1px solid var(--line); }

/* 面・表 */
.tp-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.tp-panel + .tp-panel { margin-top: 12px; }
.tp-table { width: 100%; border-collapse: collapse; }
.tp-table th, .tp-table td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.tp-table th { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--brand); width: 5.5em; }
.tp-table tr.is-now { background: var(--accent-soft); }
.tp-dl { display: grid; grid-template-columns: 6em 1fr; gap: 6px 12px; margin: 0; }
.tp-dl dt { color: var(--ink-2); }
.tp-dl dd { margin: 0; overflow-wrap: anywhere; }

/* ボタン・入力 */
.tp-btn, .tp-btn-sub, .tp-btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border-radius: 12px;
  font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; border: 2px solid transparent;
}
.tp-btn { background: var(--brand); color: var(--brand-ink); }
.tp-btn-sub { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.tp-btn-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.tp-btn[disabled], .tp-btn-sub[disabled], .tp-btn-danger[disabled] { opacity: .5; cursor: not-allowed; }
.tp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tp-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.tp-field label { font-weight: 700; }
.tp-field input, .tp-field textarea, .tp-field select {
  font: inherit; font-size: 18px; min-height: 48px; padding: 10px 12px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); width: 100%;
}
.tp-field input:focus, .tp-field textarea:focus { border-color: var(--brand); outline: none; }
.tp-error { color: var(--danger); font-weight: 600; }

/* 注意・広告 */
.tp-note { border-left: 5px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.tp-ad { position: relative; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px 16px 14px; }
.tp-ad::before { content: "広告"; position: absolute; top: 6px; left: 12px; font-size: .75rem; color: var(--ink-2); }
.tp-ad img { max-width: 100%; height: auto; border-radius: 8px; }

/* フッター */
.tp-footer { margin-top: 40px; padding: 20px 0 8px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tp-qr {
  width: 150px; height: 150px; flex: none; display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--line); border-radius: 10px; color: var(--ink-2); font-size: 16px; font-weight: 700; line-height: 1.35; padding: 6px;
}
.tp-credit { color: var(--ink-2); font-size: .95rem; }

/* 通知 */
.tp-toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-weight: 600; z-index: 50;
  max-width: calc(100% - 32px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media print {
  .tp-footer .tp-qr, .tp-btn, .tp-btn-sub { display: none; }
}

.tp-logout{margin-top:32px}.tp-quick{margin-top:20px}.tp-quick h2{margin-bottom:12px}#login .tp-btn{width:100%}#login{scroll-margin-top:16px}
.tp-next-qr svg{display:block;width:240px;max-width:100%;height:auto;background:#fff;margin:16px 0}
#detail{overflow-wrap:anywhere}#memo-follow{width:24px;height:48px}#detail article{margin-top:12px}#detail article button{margin:4px}

.memo-follow{display:inline-block;background:#fff0ba;color:#634100;border:2px solid #9a6700;border-radius:6px;padding:6px 12px;font-weight:700}.memo-talk{border:1px solid #b8b0a7;padding:12px;white-space:pre-wrap}.memo-copy{white-space:pre-wrap;overflow-wrap:anywhere}#login form{padding:14px}#login form .tp-field{margin-bottom:8px}

#login .member-login{display:flex;flex-wrap:wrap;gap:8px;align-items:end}#login .member-login>p{flex-basis:100%;margin:0}#login .member-login .tp-field{flex:1;min-width:160px;margin:0}#login .member-login>.tp-btn{width:auto}#login .member-login>.tp-error:empty{display:none}

/* 自前の相談QR。余白はQR内の4セルで確保。 */
.tp-qr{border:0;border-radius:0;padding:0;background:white}
.tp-qr>a{display:block;width:100%;height:100%}