/* =====================================================================
   깔끔한 화면 (선 줄이기)
   - 테두리를 거의 없애고, 회색 배경 위 흰 면 + 여백으로 구분
   - 강조색은 '지금 할 일'에만 사용
   이 파일을 index.html 에서 빼면 예전 모양으로 돌아가요.
   ===================================================================== */
:root {
  --color-bg: #F2F4F6;
  --color-text: #191F28;
  --color-text-sub: #6B7684;
  --color-border: #E5E8EB;
  --color-fill: #F2F4F6;            /* 버튼·칩·입력창의 회색 면 */
  --radius-card: 20px;
  --radius-control: 14px;
  --font-title: 22px;
  --border: 1px solid var(--color-border);
  --shadow-bar: 0 -6px 20px rgba(25, 31, 40, .06);
}

/* 상단: 배경과 이어지게 (선 없음) */
.app-header { background: var(--color-bg); border-bottom: 0; }
.app-header .page-title { font-size: var(--font-title); letter-spacing: -0.02em; }
.page { gap: 12px; padding-top: 4px; }

/* 카드·목록: 테두리 없는 흰 면 */
.card, .menu-list { border: 0; }
.card { padding: 22px 20px; }
.card-title { font-size: 17px; letter-spacing: -0.01em; margin-bottom: 12px; }
.menu-list > li + li, .list > li + li { border-top: 1px solid var(--color-fill); }
.menu-item { min-height: 58px; }
.menu-item .chev { color: #B0B8C1; }
.section-title { font-size: 13px; color: var(--color-text-sub); margin: 12px 4px 0; }
.page > section > .card-title, .page > .form > .card-title, .section-head .card-title { margin-left: 4px; }

/* 버튼: 보조 버튼은 테두리 대신 연한 면 */
.btn { border-radius: var(--radius-control); letter-spacing: -0.01em; }
.btn-secondary { background: var(--color-fill); color: var(--color-text); border: 0; }
.btn-secondary:hover, .btn-secondary:active { background: var(--color-border); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-fill); color: #B0B8C1; }

/* 입력창: 회색 면, 누르면 흰 바탕 + 강조 테두리 */
.input, .select, .textarea { background-color: var(--color-fill); border-color: transparent; }
.input:focus, .select:focus, .textarea:focus { background-color: #fff; }

/* 태그: 테두리 없는 작은 면 */
.tag { border: 0; background: var(--color-fill); padding: 3px 10px; font-weight: var(--weight-medium); font-size: 13px; }
.tag.is-primary { background: var(--color-primary-soft); }
.tag.is-error { background: #FEECEC; }

/* 날짜·시간 칩: 회색 면, 고르면 강조색으로 채움 */
.chip { border: 0; background: var(--color-fill); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--color-primary); color: #fff; }
.chip[aria-pressed="true"] small, .chip[aria-checked="true"] small { color: rgba(255, 255, 255, .85); }
.chip:disabled { background: var(--color-fill); color: #C5CCD3; }

/* 안내 상자 */
.notice-box { border: 0; background: #fff; }
.notice-box.is-error { border: 0; background: #FEECEC; color: var(--color-text); }

/* 숫자 요약 */
.stats { gap: 0; }
.stat b { font-size: 24px; letter-spacing: -0.02em; }
.stat span { font-size: 13px; }
.stat + .stat { border-left: 1px solid var(--color-fill); }

/* 좌석 배치도: 바깥 테두리 없이, 좌석은 연한 선 */
.seatmap-viewport { border: 0; }
.seat { border-color: var(--color-border); border-radius: 1.6cqw; }
.seat.is-taken, .seat.is-blocked { background: var(--color-fill); border-color: var(--color-fill); color: #B0B8C1; }
.legend { color: var(--color-text-sub); font-size: 13px; }
.legend .swatch { border-color: var(--color-border); }
.legend .swatch.is-taken, .legend .swatch.is-blocked { background: var(--color-fill); border-color: var(--color-fill); color: #B0B8C1; }

/* 아래 메뉴·예약 바: 선 대신 옅은 그림자 */
.bottom-nav { border-top: 0; box-shadow: var(--shadow-bar); }
.bottom-nav a { font-size: 12px; }
.booking-bar { border-top: 0; box-shadow: var(--shadow-bar); }

/* 좌석 번호 배지 */
.seat-badge { border-radius: 12px; }

/* 확인창·시트 */
.dialog, .sheet { border-radius: 24px; }
.sheet { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* 로그인 화면 */
.login .card { padding: 24px 20px; }
.login-brand h1 { letter-spacing: -0.03em; }

/* 카드 안의 안내 상자는 회색 면으로 (흰 카드 위에서 구분되게) */
.card .notice-box, .sheet .notice-box { background: var(--color-fill); }
.card .notice-box.is-error, .sheet .notice-box.is-error { background: #FEECEC; }

/* 알림 종 */
.bell { position: relative; }
.bell-dot { position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--color-primary); color: #fff; font-size: 11px; font-weight: var(--weight-bold); display: grid; place-items: center; line-height: 1; }
.notif-item.is-unread .menu-label { font-weight: var(--weight-bold); }
.notif-item.is-unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex: none; }
.temp-pw { font-size: 28px; font-weight: var(--weight-bold); letter-spacing: .12em; text-align: center; padding: 16px; border-radius: var(--radius-control);
  background: var(--color-fill); font-family: ui-monospace, Menlo, Consolas, monospace; user-select: all; }