:root { --bg:#f5f6f8; --card:#fff; --ink:#1a1d21; --sub:#6b7280; --brand:#2f6bff;
  --ok:#1a9e6a; --wait:#b8860b; --rev:#d64545; --line:#e5e7eb; }
* { box-sizing:border-box; } html,body { margin:0; }
body { background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif; line-height:1.55; }
.wrap { max-width:880px; margin:0 auto; padding:0 20px; }
header { background:linear-gradient(135deg,#2f6bff,#5b8cff); color:#fff; padding:28px 0; }
header h1 { margin:6px 0 0; font-size:1.5rem; } header .sub { margin:6px 0 0; opacity:.9; }
.back { color:#fff; text-decoration:none; opacity:.9; font-size:.9rem; } .back:hover { opacity:1; }
main { padding:28px 0 60px; }
h2 { font-size:1.15rem; } h3 { margin:0 0 6px; }
.steps ol { padding-left:20px; } .steps li { margin:6px 0; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:18px 0; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; color:inherit; transition:.15s; display:block; }
.card:hover { border-color:var(--brand); box-shadow:0 4px 16px rgba(47,107,255,.12); transform:translateY(-2px); }
.card .ico { font-size:2rem; } .card p { color:var(--sub); font-size:.92rem; margin:6px 0 0; }
.card.muted { opacity:.85; } .card.btn, .btn { display:inline-block; background:var(--brand); color:#fff; padding:10px 18px; border-radius:10px; text-decoration:none; margin-top:10px; }
.scenario { text-align:center; } .qr { display:flex; justify-content:center; margin:24px 0; min-height:240px; align-items:center; }
.qr img { border:8px solid #fff; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.status { font-size:1.05rem; } .hint { color:var(--sub); font-size:.9rem; }
.result { margin:20px 0; min-height:40px; }
.ok { background:#eaf7f0; color:var(--ok); padding:20px; border-radius:14px; font-size:1.2rem; }
.door { font-size:3rem; } .door .open { color:var(--ok); font-size:1.2rem; font-weight:700; margin:8px 0; }
.muted { color:var(--sub); font-size:.9rem; }
.explain { background:#eef2ff; border-left:4px solid var(--brand); text-align:left; padding:14px 18px; border-radius:10px; margin:28px 0 0; }
.explain p { margin:6px 0 0; font-size:.92rem; color:#374151; }
.mt { margin-top:28px; text-align:left; }
.attendees { list-style:none; padding:0; text-align:left; max-width:360px; margin:0 auto; }
.attendees li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:6px 0; }
.tbl { width:100%; border-collapse:collapse; background:var(--card); border-radius:12px; overflow:hidden; font-size:.92rem; }
.tbl th,.tbl td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.tbl th { background:#f0f2f5; font-weight:600; }
.badge { padding:3px 10px; border-radius:20px; font-size:.82rem; font-weight:600; }
.badge.ok { background:#eaf7f0; color:var(--ok); } .badge.wait { background:#fdf6e3; color:var(--wait); } .badge.rev { background:#fdeaea; color:var(--rev); }
footer { border-top:1px solid var(--line); padding:20px 0; color:var(--sub); font-size:.85rem; }
.form { display:flex; flex-direction:column; gap:14px; max-width:420px; margin:20px 0; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:.92rem; color:#374151; }
.form input { padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:1rem; }
.form input:focus { outline:none; border-color:var(--brand); }