:root {
  --bg: #F6F2EA;
  --bg-raised: #FFFFFF;
  --ink: #2B2621;
  --ink-soft: #6B6259;
  --line: #E4DCCC;
  --accent: #B8442C;
  --accent-soft: #F1DCCF;
  --pine: #33473F;
  --pine-soft: #DCE6E0;
  --gold: #C99A3C;
  --gold-deep: #93691C;
  --orange: #C76A1F;
  --danger: #B0413E;
  --shadow: 0 1px 2px rgba(43,38,33,0.06), 0 8px 24px rgba(43,38,33,0.08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #201C18;
    --bg-raised: #2B2621;
    --ink: #F3ECE2;
    --ink-soft: #B8AC9C;
    --line: #453D34;
    --accent: #E3805F;
    --accent-soft: #4A342A;
    --pine: #7FB09B;
    --pine-soft: #2A3833;
    --gold: #D9AE5C;
    --gold-deep: #E3B563;
    --orange: #E0955A;
    --danger: #E38884;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
}
button, input, textarea { font-family: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-inline: 16px;
  padding-block: max(16px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
}

.brand-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.brand { font-family: "Jua", "Noto Sans KR", sans-serif; font-weight: 400; font-size: 1.3rem; color: var(--pine); }
.tagline { font-size: 0.68rem; font-weight: 600; color: var(--ink-soft); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 6px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.room-title {
  margin: 0; min-width: 0;
  font-size: 1.08rem; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.role-badge {
  font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap;
}
.me-name {
  font-size: 0.8rem; font-weight: 700; color: var(--ink); white-space: nowrap;
  max-width: 72px; overflow: hidden; text-overflow: ellipsis;
}
.icon-btn {
  background: none; border: none; line-height: 1; cursor: pointer;
  padding: 4px; color: var(--ink); display: inline-flex;
}

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around;
  max-width: 480px; margin: 0 auto;
  background: var(--bg-raised); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 15;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; background: none; border: none; cursor: pointer;
  color: var(--ink-soft); font-size: 0.66rem; font-weight: 700;
}
.nav-item .nav-icon { display: flex; }
.nav-item .nav-icon svg { display: block; }
.nav-item.on { color: var(--pine); }
.room-name {
  display: flex;
  justify-content: center;
  margin: 2px 0 18px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pine-soft);
  color: var(--pine);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 16px;
  border-radius: 100px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.day-toggle {
  display: flex;
  background: var(--pine-soft);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.day-toggle button {
  border: none;
  background: transparent;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pine);
  cursor: pointer;
}
.day-toggle button.on { background: var(--pine); color: #F3ECE2; }

.best-banner {
  background: var(--pine-soft);
  color: var(--pine);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
}
.best-banner .label { font-weight: 700; font-size: 0.78rem; }
.best-banner .menu { font-weight: 800; font-size: 0.96rem; }
.best-banner .stat { font-size: 0.68rem; opacity: 0.85; }

.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.install-banner .text { flex: 1; font-size: 0.8rem; line-height: 1.4; color: var(--ink); }
.install-banner .btn { flex: 0 0 auto; white-space: nowrap; }
.install-close {
  flex: 0 0 auto;
  background: none; border: none; cursor: pointer;
  font-size: 0.9rem; color: var(--ink-soft); padding: 4px;
}

.meal-section { margin-bottom: 20px; }
.meal-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--pine);
  margin-bottom: 8px;
}
.meal-head .count { font-size: 0.7rem; font-weight: 600; color: var(--ink-soft); }
.meal-empty { font-size: 0.78rem; color: var(--ink-soft); padding: 4px 2px; }

.meal-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.meal-card:hover { border-color: var(--gold); }
.meal-card .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.meal-card .who { font-weight: 700; font-size: 0.74rem; color: var(--orange); letter-spacing: 0.01em; }
.meal-card .menu { font-size: 0.94rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.meal-card .foot { font-size: 0.7rem; color: var(--ink-soft); display: flex; gap: 8px; align-items: center; }
.meal-card .emoji { font-size: 0.95rem; }
.thumb { object-fit: cover; border-radius: 8px; display: block; }
.meal-card .thumb { width: 44px; height: 44px; flex: 0 0 auto; }

.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: #fff;
  border: 2px solid var(--bg-raised);
  flex: 0 0 auto;
}
/* 참여자 아바타 모자이크: 한 줄에 2명씩, 그 이상은 다음 줄로 — 좌우/위아래로 살짝만 겹치게 (이니셜은 가리지 않을 정도) */
.avatar-mosaic { display: flex; flex-direction: column; flex: 0 0 auto; }
.avatar-mosaic .avatar-row { display: flex; }
.avatar-mosaic .avatar-row:not(:first-child) { margin-top: -6px; }
.avatar-mosaic .avatar-row .avatar:not(:first-child) { margin-left: -6px; }

.fab {
  position: fixed;
  right: max(20px, calc(50vw - 240px + 20px));
  /* 하단 메뉴바(대략 60px) 위에 여유를 두고 뜨도록 */
  bottom: calc(60px + max(16px, env(safe-area-inset-bottom, 0px) + 16px));
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: none; font-size: 1.6rem; font-weight: 700;
  box-shadow: var(--shadow); cursor: pointer;
  z-index: 16;
}

.sheet-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(20,16,12,0.4);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 20;
}
.sheet {
  background: var(--bg); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 18px 18px max(18px, env(safe-area-inset-bottom, 0px));
  max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.sheet h2 { margin: 0; font-size: 1.05rem; }
.sheet-close { align-self: flex-end; background: none; border: none; font-size: 1.1rem; color: var(--ink-soft); cursor: pointer; }

.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail-head .detail-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.detail-head .detail-people { font-size: 0.78rem; font-weight: 700; }
.detail-head .detail-people .detail-slot { color: var(--pine); }
.detail-head .detail-people .detail-eaters { color: var(--orange); }
.detail-head .detail-meta { flex: 0 0 auto; text-align: right; font-size: 0.68rem; color: var(--ink-soft); white-space: nowrap; }

.field-label {
  font-size: 0.68rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.chip-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.chip-row input[type="text"] { flex: 1; width: auto; min-width: 0; }
.chip-row > .btn { flex: 0 0 auto; }
.chip-row > .btn.block { flex: 1 1 0; width: auto; min-width: 0; }
.chip {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: 10px;
  border: 1.4px solid var(--line); background: var(--bg-raised);
  font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.chip.on { background: var(--pine); border-color: var(--pine); color: #F3ECE2; }

textarea, input[type="text"], input[type="email"], select {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  font-size: 0.9rem; color: var(--ink); background: var(--bg-raised); width: 100%;
}
textarea { min-height: 64px; resize: vertical; }
select { width: auto; }

.people-row { display: flex; gap: 10px; flex-wrap: wrap; }
.person-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 10px; border: 1.4px solid transparent;
  background: none; cursor: pointer; width: 52px;
}
.person-opt .avatar { width: 34px; height: 34px; font-size: 0.8rem; position: relative; }
.person-opt .label { font-size: 0.66rem; font-weight: 600; color: var(--ink-soft); }
.person-opt.on { border-color: var(--gold); background: var(--accent-soft); }
.person-opt.on .label { color: var(--ink); font-weight: 700; }
.person-opt.on .avatar::after {
  content: "✓"; position: absolute; right: -3px; bottom: -3px;
  width: 15px; height: 15px; border-radius: 50%; background: var(--gold); color: #fff;
  font-size: 0.6rem; font-weight: 900; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bg-raised);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 0.88rem;
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.08s ease, opacity 0.08s ease;
}
.btn:active { transform: scale(0.96); opacity: 0.88; }
.btn.primary { background: var(--accent); color: #FFF6F1; }
.btn.primary:disabled { opacity: 0.5; cursor: default; }
.btn.ghost { background: transparent; color: var(--pine); border: 1.4px solid var(--pine-soft); }
.btn.block { width: 100%; }
.btn.success { background: var(--pine) !important; color: #F3ECE2 !important; border-color: var(--pine) !important; }
.member-flash { animation: memberFlash 1.2s ease; border-radius: 10px; }
@keyframes memberFlash {
  0% { background: var(--accent-soft); }
  100% { background: transparent; }
}

.emoji-rate { display: flex; gap: 6px; justify-content: space-between; }
.emoji-opt {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 10px;
  border: 1.4px solid var(--line); background: var(--bg-raised);
  font-size: 1.3rem; cursor: pointer;
}
.emoji-opt.on { border-color: var(--gold); background: var(--accent-soft); }

.rate-summary { font-size: 0.75rem; color: var(--ink-soft); text-align: center; }

.comment-list { display: flex; flex-direction: column; gap: 8px; }
.comment { display: flex; gap: 8px; align-items: flex-start; }
.bubble {
  background: var(--pine-soft); border-radius: 10px 10px 10px 2px;
  padding: 7px 10px; font-size: 0.8rem; flex: 1;
}
.bubble .who { font-weight: 700; font-size: 0.68rem; color: var(--orange); display: block; margin-bottom: 2px; }
.comment-delete {
  display: block; margin-top: 4px; border: none; background: none; padding: 0;
  font-size: 0.66rem; font-weight: 700; color: var(--danger); cursor: pointer;
}
input[type="file"] {
  border: 1.4px dashed var(--line); border-radius: 10px; padding: 10px; background: var(--bg-raised);
  font-size: 0.78rem; color: var(--ink-soft); width: 100%;
}
.comment-form { display: flex; gap: 8px; align-items: flex-end; }
.comment-form textarea { min-height: 40px; }

.center-screen {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 16px; text-align: center;
}
.link-box {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--pine-soft); color: var(--pine); border-radius: 10px;
  padding: 10px; font-weight: 700; font-size: 0.82rem; word-break: break-all;
}
.hint { font-size: 0.78rem; color: var(--ink-soft); }
.error-text { font-size: 0.8rem; color: var(--danger); min-height: 1.2em; }
.form-stack { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.card { background: var(--bg-raised); border-radius: 14px; padding: 14px 16px; }
.sheet-divider { border: none; border-top: 1px solid var(--line); margin: 2px 0; }

/* ============ 랜딩 페이지(index.html) 전용 ============ */
.landing {
  max-width: 640px;
  margin: 0 auto;
  padding-inline: 20px;
  padding-block: max(18px, env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-bottom, 0px));
}
.landing-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 4px 0; }
.landing-nav .btn { padding: 9px 16px; font-size: 0.82rem; }

.hero { text-align: center; padding-block: 40px 4px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero .eyebrow {
  font-size: 0.72rem; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  padding: 5px 13px; border-radius: 100px;
}
.hero h1 { font-size: clamp(1.55rem, 6vw, 2.15rem); line-height: 1.38; margin: 0; font-weight: 800; color: var(--ink); text-wrap: balance; }
.hero .hero-sub { font-size: 0.92rem; line-height: 1.65; color: var(--ink-soft); max-width: 46ch; margin: 0; }
.hero .hero-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; width: 100%; }
.hero .hero-cta .btn { width: 100%; max-width: 320px; padding: 15px; font-size: 0.98rem; }
.hero-note { font-size: 0.72rem; color: var(--ink-soft); }

.hero-preview {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow);
  padding: 14px 16px; margin-top: 28px; max-width: 340px; width: 100%; text-align: left;
}
.hero-preview .hp-topbar { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.hero-preview .hp-brand { font-family: "Jua", "Noto Sans KR", sans-serif; font-weight: 400; font-size: 1.02rem; color: var(--pine); }
.hero-preview .hp-badge {
  display: inline-flex; align-items: center; gap: 4px; background: var(--pine-soft); color: var(--pine);
  font-weight: 700; font-size: 0.68rem; padding: 4px 10px; border-radius: 100px; margin-bottom: 10px;
}
.hero-preview .hp-best {
  background: linear-gradient(160deg, var(--pine), #24352E); color: #F3ECE2; border-radius: 12px;
  padding: 8px 10px; font-size: 0.68rem; margin-bottom: 10px; display: flex; flex-direction: column; gap: 1px;
}
.hero-preview .hp-best b { font-size: 0.78rem; }
.hero-preview .hp-meal-head { font-size: 0.68rem; font-weight: 700; color: var(--pine); margin: 8px 0 5px; }
.hero-preview .hp-card {
  display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 9px; margin-bottom: 6px;
}
.hero-preview .hp-card .hp-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 700; color: #fff;
}
.hero-preview .hp-card .hp-who { font-size: 0.62rem; font-weight: 700; color: var(--orange); }
.hero-preview .hp-card .hp-menu { font-size: 0.78rem; font-weight: 600; color: var(--ink); }

.landing-section { padding-block: 40px 0; }
.section-title { font-size: 1.15rem; font-weight: 800; color: var(--ink); text-align: center; margin: 0 0 18px; }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.feature-card .f-icon { font-size: 1.4rem; }
.feature-card .f-title { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.feature-card .f-desc { font-size: 0.81rem; color: var(--ink-soft); line-height: 1.55; }

.steps { display: flex; flex-direction: column; gap: 16px; max-width: 440px; margin: 0 auto; }
.step-item { display: flex; gap: 12px; align-items: flex-start; }
.step-num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--pine); color: #F3ECE2;
  font-weight: 800; font-size: 0.82rem; display: flex; align-items: center; justify-content: center;
}
.step-body .step-title { font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 2px; }
.step-body .step-desc { font-size: 0.81rem; color: var(--ink-soft); line-height: 1.55; }

.recent-card {
  display: flex; flex-direction: column; gap: 8px; background: var(--pine-soft); border-radius: 14px;
  padding: 14px 16px; margin-top: 18px; text-align: left;
}
.recent-card .rc-label { font-size: 0.7rem; font-weight: 700; color: var(--pine); }

.final-cta { text-align: center; padding-block: 44px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.final-cta h2 { font-size: 1.2rem; font-weight: 800; color: var(--ink); margin: 0; }
.final-cta .btn { width: 100%; max-width: 320px; padding: 15px; font-size: 0.98rem; }

.landing-footer { text-align: center; padding-block: 30px 4px; font-size: 0.72rem; color: var(--ink-soft); }