:root { --bg:#f4f5f7; --card:#ffffff; --line:#e2e5ea; --fg:#1c1f26; --mut:#6b7280; --field:#f1f3f6;
  --acc:#16a34a; --acc-d:#15803d; --danger:#e23b3f; --violet:#6d28d9; --gold:#c98a00;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; }
body { background:var(--bg); color:var(--fg); font-size:16px; line-height:1.45;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif; -webkit-text-size-adjust:100%; }
.hide { display:none !important; }
.app { max-width:640px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }

.hd { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px; background:var(--card);
  border-bottom:1px solid var(--line); padding:calc(10px + var(--safe-t)) 14px 10px; }
.logo { font-weight:900; font-size:17px; color:var(--acc-d); text-decoration:none; letter-spacing:-.02em; }
.ttl { flex:1; min-width:0; font-weight:800; font-size:15px; display:flex; align-items:center; gap:6px; }
.beta { font-size:10.5px; font-weight:800; color:var(--violet); background:#f3e8ff; border-radius:999px; padding:2px 7px; }
.quota { flex:none; font-size:12px; font-weight:800; border-radius:999px; padding:3px 9px; background:#eaf6ee; color:var(--acc-d); }
.quota.low { background:#fdeccf; color:#9a6a12; } .quota.out { background:#fde0e0; color:#b23b3b; }
.hbtn { flex:none; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:var(--card);
  color:var(--mut); font-size:12px; font-weight:700; cursor:pointer; }
.hbtn:active { background:var(--field); }

.main { flex:1; padding:12px 14px calc(130px + var(--safe-b)); }
.intro { font-size:12.5px; color:var(--mut); line-height:1.55; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin-bottom:6px; }
.intro b { color:var(--acc-d); }

.msg { margin:8px 0; display:flex; flex-wrap:wrap; }
.msg.me { justify-content:flex-end; }
.bub { max-width:88%; padding:9px 12px; border-radius:13px; font-size:15px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.msg.me .bub { background:var(--acc); color:#fff; border-bottom-right-radius:4px; }
.msg.ai .bub { background:var(--card); border:1px solid var(--line); color:var(--fg); border-bottom-left-radius:4px; }
.msg.wait .bub { color:var(--mut); }
.bub a { color:var(--acc-d); word-break:break-all; }
.rep { flex:0 0 100%; text-align:left; margin:3px 0 0; background:transparent; border:0; padding:2px 0 2px 2px;
  font-size:11.5px; color:var(--mut); text-decoration:underline; cursor:pointer; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px; }
.chip { background:transparent; border:1px solid var(--acc); color:var(--acc-d); border-radius:999px; padding:7px 13px;
  font-size:13px; font-weight:600; cursor:pointer; line-height:1.2; }
.chip:active { background:#eaf6ee; }

.card { margin-top:12px; background:#f5f3ff; border:1px solid #ddd6fe; border-radius:12px; padding:13px; }
.card h4 { margin:0 0 6px; font-size:14.5px; color:var(--violet); }
.card .row { font-size:13px; margin:3px 0; line-height:1.5; word-break:keep-all; }
.card .row.url { word-break:break-all; color:var(--mut); font-size:12px; }
.card .warn { font-size:11.5px; color:var(--mut); margin-top:7px; line-height:1.5; }
.card .kv { display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:13px; margin:6px 0; }
.card .kv dt { color:var(--mut); } .card .kv dd { margin:0; font-weight:600; word-break:break-word; }
.card .state { display:inline-block; border-radius:6px; padding:1px 7px; font-size:12px; font-weight:800; }
.card .state.on { background:#dcfce7; color:#166534; } .card .state.off { background:#fee2e2; color:#991b1b; }
.card .field { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; }
.card .field input, .card .field select { height:38px; border:1px solid var(--line); border-radius:9px; padding:0 10px;
  font-size:14px; background:var(--card); color:var(--fg); }
.card .field input { flex:1; min-width:0; }
.card .btns { display:flex; gap:8px; margin-top:11px; }
.btn { height:42px; border-radius:9px; font-weight:800; font-size:14px; cursor:pointer; border:0; }
.btn.ghost { flex:1; background:transparent; border:1px solid var(--line); color:var(--mut); }
.btn.acc { flex:2; background:var(--acc); color:#fff; }
.btn.warnc { flex:2; background:#c2410c; color:#fff; }
.btn:disabled { opacity:.5; cursor:default; }
.card.rm { background:#fff7ed; border-color:#fed7aa; } .card.rm h4 { color:#c2410c; }
.card.list { background:var(--card); border-color:var(--line); } .card.list h4 { color:var(--fg); }
.witem { border-top:1px solid var(--line); padding:9px 0; font-size:13px; }
.witem:first-of-type { border-top:0; }
.witem .nm { font-weight:800; }
.witem .sub { color:var(--mut); font-size:12px; margin-top:2px; word-break:break-all; }
.witem .err { color:var(--danger); font-size:12px; }
.witem .act { display:flex; gap:6px; margin-top:6px; }
.witem .act button { height:30px; padding:0 10px; border-radius:7px; border:1px solid var(--line); background:var(--card);
  font-size:12px; font-weight:700; cursor:pointer; color:var(--fg); }
.witem .act button.del { color:#c2410c; border-color:#fed7aa; }

.in { position:fixed; left:0; right:0; bottom:0; z-index:5; background:var(--card); border-top:1px solid var(--line);
  padding:10px 14px calc(10px + var(--safe-b)); }
.in-row { max-width:612px; margin:0 auto; display:flex; gap:8px; }
.in-row input { flex:1; min-width:0; height:46px; border:1px solid var(--line); border-radius:12px; padding:0 14px;
  font-size:15px; background:var(--field); color:var(--fg); }
.in-row input:focus { outline:none; border-color:var(--acc-d); background:var(--card); }
.send { flex:none; height:46px; padding:0 18px; border:0; border-radius:12px; background:var(--acc); color:#fff; font-weight:800; font-size:14px; cursor:pointer; }
.send:disabled { opacity:.5; cursor:default; }
.in-note { max-width:612px; margin:6px auto 0; font-size:11px; color:var(--mut); text-align:center; }
.in-note a { color:var(--mut); }

.gate { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:20px; }
.gate-card { background:var(--card); border-radius:16px; padding:22px 20px; width:100%; max-width:360px; text-align:center; box-shadow:0 12px 32px rgba(0,0,0,.18); }
.gate-ttl { font-size:17px; font-weight:800; margin-bottom:6px; }
.gate-sub { font-size:13px; color:var(--mut); line-height:1.5; margin-bottom:16px; }
.kakao { display:block; height:48px; line-height:48px; border-radius:12px; background:#fee500; color:#191919; font-weight:800; font-size:15px; text-decoration:none; }
.gate-home { display:block; margin-top:10px; font-size:13px; color:var(--mut); }

.toast { position:fixed; left:50%; bottom:calc(90px + var(--safe-b)); transform:translateX(-50%) translateY(8px); background:#1c1f26; color:#fff;
  padding:10px 16px; border-radius:10px; font-size:13.5px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:30; max-width:92vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--danger); }
@media (min-width:700px){ .bub { max-width:78%; } }

/* 자리요 수집 분야 카드 — 회차 칩(방탈출), 항공·골프 색 */
.card.open { background:#edfbf2; border-color:#9ad9b3; } .card.open h4 { color:var(--acc-d); }
.card.air { background:#eff6ff; border-color:#bfdbfe; } .card.air h4 { color:#1d4ed8; }
.card.golf { background:#ecfdf5; border-color:#a7f3d0; } .card.golf h4 { color:#047857; }
.slotwrap { max-height:220px; overflow-y:auto; margin-top:8px; padding:8px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.slotwrap.old { background:#fffbf5; }
.dayblk { margin-bottom:8px; } .dayblk:last-child { margin-bottom:0; }
.day-h { font-size:12px; font-weight:700; color:var(--mut); margin-bottom:5px; }
.wd-sat { color:#2f74d0; } .wd-sun { color:var(--danger); }
.slots { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.slot { height:38px; border-radius:9px; border:1px solid var(--line); background:var(--field); color:var(--mut); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:inherit; text-decoration:line-through; }
.slot.on { border-color:var(--gold); background:#fffaf0; color:var(--fg); text-decoration:none; }
.slot.old { border-color:#fdba74; background:#fffbf5; color:#9a3412; cursor:default; text-decoration:none; }
.slot.open { border-color:#9ad9b3; background:#edfbf2; color:var(--acc-d); text-decoration:none; }
.date-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.date-chip { height:38px; padding:0 12px; border-radius:10px; border:1px solid var(--gold); background:#fffaf0; color:var(--fg); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.date-chip:not(.on) { border-color:var(--line); background:var(--field); color:var(--mut); text-decoration:line-through; }
.date-chip.old { border-color:#fdba74; background:#fffbf5; color:#9a3412; cursor:default; text-decoration:none; }