/* ============================================================================
   밥게더 · 와이어프레임 개편 공용 디자인 시스템
   - 와이어프레임(wireframes/index.html)의 .phone 목업 → 실제 풀스크린 앱 셸로 변환
   - 홈 / 내 모임 / 모임 상세 / 새 약속 / 설정 + 결정 플로우 공용
   ============================================================================ */

:root{
  --ivory:#FBF6E9; --ivory-2:#F4ECD6;
  --yellow:#F7DC6F; --yellow-soft:#FCEFA1;
  --red:#E1493B; --red-deep:#B8362A;
  --green:#5BAE6E; --green-deep:#3F8C52;
  --ink:#2A1F12; --ink-soft:#5C4A33; --ink-mute:#A89072;
  --line:#1A140C;
  --border:rgba(42,31,18,.10);
  --border-2:rgba(42,31,18,.16);
  --shadow:0 6px 22px rgba(42,31,18,.10);
  --shadow-sm:0 1px 4px rgba(42,31,18,.07);
  --shadow-md:0 5px 18px rgba(42,31,18,.09);
  --maxw:480px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;
  background:
    radial-gradient(1400px 700px at 85% -10%, var(--yellow-soft) 0%, transparent 55%),
    radial-gradient(1000px 600px at -10% 110%, #FFD8B1 0%, transparent 50%),
    #EFE6CE;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}

/* ── 앱 셸 (풀스크린) ── */
.app{
  max-width:var(--maxw);
  margin:0 auto;
  min-height:100%;
  background:var(--ivory);
  display:flex; flex-direction:column;
  position:relative;
  box-shadow:0 0 0 1px var(--border);
}
@media(min-width:520px){
  body{ padding:0; }
  .app{ min-height:100vh; }
}

/* 상단 바 */
.topbar{
  flex-shrink:0; position:sticky; top:0; z-index:10;
  height:54px; padding:0 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:var(--ivory);
}
.logo{ display:flex; align-items:center; gap:8px; font-weight:900; font-size:17px; text-decoration:none; color:var(--ink); }
.logo .mark{ width:26px;height:26px; }
.login-pill{ font-size:11px;font-weight:900;border:1px solid var(--border);background:var(--yellow);border-radius:999px;padding:7px 13px;box-shadow:var(--shadow-sm);cursor:pointer; }
.avatar{ width:34px;height:34px;border-radius:50%;background:var(--yellow-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer; }
.avatar svg{ width:26px;height:26px;margin-top:2px; }
.back{ font-size:24px;font-weight:900;line-height:1;cursor:pointer;text-decoration:none;color:var(--ink); }
.topbar .ttl{ font-size:15px;font-weight:900; }

/* 스크롤 본문 */
.scroll{ flex:1; overflow-y:auto; padding:18px 16px 24px; position:relative; -webkit-overflow-scrolling:touch; }
.scroll.flowpad{ padding-bottom:90px; }   /* 하단 고정 CTA 있을 때 */

.h-title{ font-size:22px;font-weight:900;letter-spacing:-0.02em;margin:2px 0 4px; }
.h-sub{ font-size:13px;color:var(--ink-soft);font-weight:600;margin:0 0 18px; }

/* ── 폼 ── */
.field{ margin-bottom:16px; }
.field .flabel{ font-size:13px;font-weight:900;margin-bottom:8px; }
.field .flabel .req{ color:var(--red); }
.field .fhint{ font-size:11px;color:var(--ink-mute);font-weight:600;margin-top:6px;line-height:1.5; }
.fin{ width:100%;height:50px;border:1px solid var(--border);border-radius:12px;background:#fff;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:15px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm); }
input.fin,textarea.fin{ font-family:inherit;outline:none; }
input.fin::placeholder{ color:var(--ink-mute);font-weight:600; }
.fin svg{ width:17px;height:17px;flex-shrink:0;color:var(--ink-mute); }
.seg{ display:flex;gap:8px; }
.seg .opt{ flex:1;height:78px;border:1px solid var(--border);border-radius:14px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:800;box-shadow:var(--shadow-sm);gap:6px;cursor:pointer; }
.seg .opt svg{ width:34px;height:34px; }
.seg .opt.on{ background:var(--yellow-soft);border-color:var(--line);box-shadow:var(--shadow-sm),inset 0 0 0 2px var(--red); }
.stepper{ display:flex;align-items:center;justify-content:center;gap:18px; }
.stepper .sbtn{ width:46px;height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;font-size:24px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);line-height:1;cursor:pointer;user-select:none; }
.stepper .sbtn:active{ transform:translateY(1px); }
.stepper .snum{ font-size:24px;font-weight:900;min-width:60px;text-align:center; }
.stepper .snum .sunit{ font-size:16px;font-weight:800;color:var(--ink-soft);margin-left:1px; }

/* ── 모임(그룹) 카드 ── */
.group-card{ display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border-2);border-radius:16px;padding:15px 14px 13px;margin-bottom:11px;box-shadow:var(--shadow-md);position:relative;cursor:pointer; }
.group-card .gc-top{ display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding-right:18px; }
.group-card .gc-name{ font-size:16px;font-weight:900;letter-spacing:-0.01em; }
.group-card .gc-mem{ font-size:11px;font-weight:800;color:var(--ink-soft);background:var(--ivory);border-radius:999px;padding:4px 10px;flex-shrink:0; }
.group-card .gc-last{ font-size:12.5px;color:var(--ink-soft);font-weight:700;display:flex;align-items:center;gap:8px; }
.group-card .gc-last b{ color:var(--ink);font-weight:800; }
.group-card .gc-last .th{ width:28px;height:28px;border-radius:8px;background:#ECE3CF;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.group-card .gc-last .th svg{ width:15px;height:15px; }
.group-card .gc-cnt{ font-size:11px;color:var(--ink-mute);font-weight:700;margin-top:7px; }
.group-card .gc-empty{ font-size:12.5px;color:var(--ink-mute);font-weight:700; }
.group-card .chev{ position:absolute;right:13px;top:17px;color:var(--ink-mute);font-weight:900;font-size:16px; }

/* 멤버 칩 */
.sec-label{ font-size:11px;font-weight:900;color:var(--ink-soft);letter-spacing:.04em;margin:16px 0 9px; }
.member-chips{ display:flex;gap:6px;flex-wrap:wrap;align-items:center; }
.mchip{ font-size:12px;font-weight:800;background:var(--ivory-2);border:1px solid var(--border);border-radius:999px;padding:6px 11px; }
.mchip.me{ background:var(--red);color:#fff; }
.mem-add{ width:36px;height:36px;border-radius:999px;border:1.5px dashed var(--border-2);background:#fff;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-mute);cursor:pointer; }
.mem-add svg{ width:16px;height:16px; }

/* 약속 히스토리 아이템 */
.appt-item{ display:flex;gap:11px;align-items:center;background:#fff;border:1px solid var(--border-2);border-radius:13px;padding:11px 12px;margin-bottom:9px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;cursor:pointer; }
.appt-item .ai-thumb{ width:48px;height:48px;border-radius:10px;background:#ECE3CF;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;background-size:cover;background-position:center; }
.appt-item .ai-thumb svg{ width:20px;height:20px; }
.appt-item .ai-body{ flex:1;min-width:0; }
.appt-item .ai-place{ font-size:14.5px;font-weight:900;letter-spacing:-0.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.appt-item .ai-sub{ font-size:11.5px;color:var(--ink-soft);font-weight:700;margin-top:2px; }
.appt-item.live{ border-color:rgba(225,73,59,.35); }

/* 뱃지 */
.badge{ font-size:10px;font-weight:900;border:1px solid var(--border);border-radius:999px;padding:3px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;flex-shrink:0; }
.badge .dot{ width:7px;height:7px;border-radius:50%;border:1px solid var(--border); }
.badge.done{ background:var(--green);color:#fff; } .badge.done .dot{ background:#fff;border-color:#fff; }
.badge.live{ background:var(--yellow); } .badge.live .dot{ background:var(--red); }
.badge.gather{ background:#fff;color:var(--ink-soft); } .badge.gather .dot{ background:var(--ink-mute); }

/* CTA */
.cta{
  width:100%;height:52px;border:1px solid var(--border-2);border-radius:14px;
  font-size:15px;font-weight:900;box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;
  cursor:pointer;font-family:inherit;color:var(--ink);background:#fff;
}
.cta svg{ width:19px;height:19px;flex-shrink:0; }
.cta.primary{ background:var(--red);color:#fff;border-color:var(--red-deep); }
.cta.again{ background:var(--yellow);color:var(--ink); }
.cta.kakao{ background:#FEE500;color:#3A1D1D; }
.cta.ghost{ background:#fff;color:var(--ink);height:48px;font-size:14px; }
.cta:disabled{ opacity:.55;cursor:default; }
.cta-row{ display:flex;gap:8px;margin-top:12px; }
.cta-row .cta{ margin-top:0;font-size:13.5px; }

/* 광고 배너 */
.ad-banner{
  flex-shrink:0;margin:14px 0 4px;height:60px;
  border:1.5px dashed var(--border-2);border-radius:12px;
  background:repeating-linear-gradient(45deg,#FFFCF3,#FFFCF3 9px,var(--ivory-2) 9px,var(--ivory-2) 18px);
  display:flex;align-items:center;justify-content:center;position:relative;
  color:var(--ink-mute);font-size:12px;font-weight:800;
}
.ad-banner .adtag{ position:absolute;top:7px;left:8px;font-size:8.5px;font-weight:900;letter-spacing:.08em;background:var(--ink);color:#fff;border-radius:4px;padding:2px 5px; }

/* 하단 탭바 */
.tabbar{
  flex-shrink:0; position:sticky; bottom:0; z-index:9;
  height:64px;border-top:1px solid var(--border-2);background:#fff;
  display:flex;align-items:stretch;justify-content:space-around;padding:0 6px;
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:800;color:var(--ink-mute);position:relative;text-decoration:none;cursor:pointer; }
.tab svg{ width:24px;height:24px; }
.tab.on{ color:var(--ink); }
.tab.on::after{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:3px;background:var(--red);border-radius:0 0 3px 3px; }

/* 플로팅 새 모임/약속 버튼 */
.fab-round{ position:fixed;z-index:8;width:58px;height:58px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(225,73,59,.4);border:none;cursor:pointer;
  right:max(18px, calc(50% - var(--maxw)/2 + 18px)); bottom:84px; }
.fab-round svg{ width:27px;height:27px; }

/* 빈 상태 */
.empty-state{ text-align:center;padding:50px 20px;color:var(--ink-mute); }
.empty-state svg{ width:64px;height:64px;opacity:.6;margin-bottom:14px; }
.empty-state .es-t{ font-size:15px;font-weight:900;color:var(--ink-soft);margin-bottom:6px; }
.empty-state .es-s{ font-size:12.5px;font-weight:700;line-height:1.6; }

/* ── 로그인 바텀시트 ── */
.dim{ position:fixed;inset:0;background:rgba(26,20,12,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s; }
.dim.show{ opacity:1;pointer-events:auto; }
.sheet{
  position:fixed;left:50%;transform:translateX(-50%) translateY(110%);
  width:100%;max-width:var(--maxw);bottom:0;z-index:51;
  background:var(--ivory);border-top:1.5px solid var(--border-2);
  border-radius:24px 24px 0 0;padding:10px 22px 30px;
  box-shadow:0 -6px 30px rgba(26,20,12,.18);transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.sheet.show{ transform:translateX(-50%) translateY(0); }
.grip{ width:44px;height:5px;border-radius:999px;background:var(--ink-mute);margin:4px auto 16px;opacity:.5; }
.sheet .charwrap{ display:flex;justify-content:center;margin-bottom:8px; }
.sheet .charwrap svg{ width:70px;height:70px; }
.sheet h3{ font-size:19px;font-weight:900;text-align:center;margin:0 0 7px; }
.sheet p{ font-size:13px;color:var(--ink-soft);font-weight:600;text-align:center;margin:0 0 20px;line-height:1.6; }
.kakao-btn{ width:100%;height:54px;border:1px solid var(--border-2);border-radius:14px;background:#FEE500;color:#3A1D1D;font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:var(--shadow-md);cursor:pointer;font-family:inherit; }
.kakao-btn svg{ width:23px;height:23px; }
.sheet .later{ display:block;text-align:center;margin-top:16px;font-size:13px;font-weight:800;color:var(--ink-soft);text-decoration:underline;cursor:pointer; }

/* ── 설정 ── */
.set-profile{ display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:15px;box-shadow:var(--shadow-md);margin-bottom:14px; }
.set-profile .pa{ width:50px;height:50px;border-radius:50%;background:var(--yellow-soft);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0; }
.set-profile .pa svg{ width:38px;height:38px;margin-top:3px; }
.set-profile .pn{ font-size:16px;font-weight:900; }
.set-profile .pc{ font-size:11px;color:var(--ink-soft);font-weight:700;margin-top:2px; }
.set-row{ display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:15px;box-shadow:var(--shadow-md);margin-bottom:14px; }
.set-row .sl{ font-size:14px;font-weight:900;display:flex;align-items:center;gap:6px; }
.set-row .sl svg{ width:18px;height:18px; }
.set-row .ss{ font-size:11px;color:var(--ink-soft);font-weight:700;margin-top:3px;padding-left:24px; }
.applabel{ font-size:10px;font-weight:800;color:var(--ink-mute);margin-left:4px; }
.toggle{ width:52px;height:31px;border-radius:999px;border:1px solid var(--border-2);background:var(--green);position:relative;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer;transition:background .18s; }
.toggle::after{ content:"";position:absolute;top:2px;right:2px;width:23px;height:23px;border-radius:50%;background:#fff;border:1px solid var(--border);transition:all .18s; }
.toggle.off{ background:var(--ink-mute); }
.toggle.off::after{ right:auto;left:2px; }
.logout{ display:block;text-align:center;font-size:13px;font-weight:800;color:var(--red-deep);text-decoration:underline;margin-top:8px;cursor:pointer; }

/* ── 생성 완료 / 초대장 ── */
.done-wrap{ display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:18px;margin-bottom:20px; }
.done-ic{ width:74px;height:74px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow-md); }
.done-ic svg{ width:38px;height:38px; }
.invite-card{ background:#fff;border:1px solid var(--border-2);border-radius:18px;box-shadow:var(--shadow-md);padding:22px 20px 20px;text-align:center;position:relative; }
.invite-card .ivc-stamp{ display:inline-block;font-size:10px;font-weight:900;color:var(--red-deep);border:1.5px dashed var(--red);border-radius:6px;padding:3px 10px;letter-spacing:.08em;transform:rotate(-2deg);margin-bottom:13px; }
.invite-card .ivc-char{ display:flex;justify-content:center;margin-bottom:8px; }
.invite-card .ivc-char svg{ width:68px;height:68px; }
.invite-card .ivc-name{ font-size:25px;font-weight:900;letter-spacing:-0.02em; }
.invite-card .ivc-name .hl{ background:var(--yellow);padding:0 5px; }
.invite-card .ivc-tag{ font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:8px;line-height:1.5; }
.invite-card .ivc-div{ border-top:1.5px dashed var(--border-2);margin:16px -2px 13px; }
.invite-card .ivc-mem{ font-size:12.5px;font-weight:800;color:var(--ink); }
.invite-card .ivc-from{ font-size:11px;color:var(--ink-mute);font-weight:700;margin-top:8px; }
.home-link{ display:block;text-align:center;margin-top:16px;font-size:13px;font-weight:800;color:var(--ink-soft);text-decoration:underline;cursor:pointer; }

/* ── 결정 플로우 공용 ── */
.flow-foot{ flex-shrink:0;position:sticky;bottom:0;padding:12px 16px;border-top:1px solid var(--border);background:var(--ivory); }
.flow-foot .cta{ margin-top:0; }
.kick{ display:inline-block;background:var(--yellow);border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:11px;font-weight:900;box-shadow:var(--shadow-sm);margin-bottom:12px; }
.flowh{ font-size:23px;font-weight:900;letter-spacing:-0.02em;line-height:1.22;margin:0 0 5px; }
.flowh .ac{ color:var(--red); }
.flowsub{ font-size:12.5px;color:var(--ink-soft);font-weight:600;margin:0 0 18px;line-height:1.5; }

.toast{ position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:13px;font-weight:800;padding:11px 18px;border-radius:12px;box-shadow:var(--shadow-md);z-index:60;opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap; }
.toast.show{ opacity:1;transform:translateX(-50%) translateY(0); }

.spinner{ width:34px;height:34px;border:3px solid var(--border-2);border-top-color:var(--red);border-radius:50%;animation:bgspin .8s linear infinite;margin:40px auto; }
@keyframes bgspin{ to{ transform:rotate(360deg); } }