/* 공통 디자인 — Material 스타일 + Pretendard */
/* 시선글램핑 하늘색 테마 */
:root {
  --primary: #0288d1;
  --primary-container: #d7eefb;
  --on-primary-container: #01405e;
  --bg: #f5f9fc;
  --surface: #ffffff;
  --text: #1a1c1e;
  --muted: #6b7680;
  --gray: #9aa4ad;
  --outline: #e0e9ef;
  --red: #ba1a1a;
  --blue: #1a73e8;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 6rem;
}
a { -webkit-tap-highlight-color: transparent; }

/* 상단 앱 바 + 탭 (같이 sticky) */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--outline);
}
header.app {
  padding: .8rem 1rem .55rem;
  display: flex; justify-content: space-between; align-items: center;
}
nav.tabs { display: flex; justify-content: center; }
nav.tabs a {
  padding: .5rem 1.3rem .45rem;
  font-size: .88rem; font-weight: 600; color: var(--muted);
  text-decoration: none; border-bottom: 2.5px solid transparent;
}
nav.tabs a.on { color: var(--primary); border-bottom-color: var(--primary); }
header.app .lead { display: flex; align-items: center; gap: .6rem; }
header.app .lead a { text-decoration: none; color: var(--text); font-size: 1.3rem; line-height: 1; }
header.app h1 { font-size: 1.15rem; margin: 0; font-weight: 700; }
header.app a.logout { color: var(--muted); font-size: .8rem; text-decoration: none; }

main { max-width: 1100px; margin: 0 auto; padding: .9rem .9rem 0; }

/* ＋ 플로팅 버튼 */
.fab {
  position: fixed; right: 1.1rem; bottom: 1.3rem; z-index: 10;
  width: 3.5rem; height: 3.5rem; border-radius: 1.1rem;
  background: var(--primary); color: #fff;
  font-size: 1.7rem; font-weight: 400; line-height: 3.5rem; text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* 상단: 달력 + 통계 (컴퓨터에선 나란히) */
.top-grid { max-width: 560px; margin: 0 auto 1.4rem; }
@media (min-width: 900px) {
  .top-grid {
    max-width: none;
    display: grid; grid-template-columns: minmax(0, 560px) minmax(280px, 1fr);
    gap: 1rem; align-items: stretch;
  }
}

.cal-card {
  background: var(--surface); border-radius: 16px; padding: .5rem .5rem .3rem;
  border: 1px solid var(--outline);
  margin-bottom: 1rem;
}
@media (min-width: 900px) { .cal-card { margin-bottom: 0; } }

/* 통계 카드 */
.stats-card {
  background: var(--surface); border-radius: 16px; padding: 1rem 1.1rem;
  border: 1px solid var(--outline);
}
.stats-card h3 { margin: 0 0 .8rem; font-size: .95rem; font-weight: 700; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.kpi {
  background: var(--primary-container); border-radius: 12px; padding: .7rem .8rem;
}
.kpi .v { display: block; font-size: 1.05rem; font-weight: 800; color: var(--on-primary-container); }
.kpi .l { display: block; margin-top: .15rem; font-size: .72rem; color: var(--muted); }
.plat-stats { margin-top: .9rem; display: grid; gap: .45rem; }
.plat-stats .row { display: flex; align-items: center; justify-content: space-between; }
.plat-stats .n { font-size: .9rem; font-weight: 700; }
/* 최근 변동 로그 (통계 카드 하단) */
.changelog-wrap { margin-top: 1rem; border-top: 1px solid var(--outline); padding-top: .75rem; }
.changelog-wrap h4 { margin: 0 0 .55rem; font-size: .82rem; font-weight: 700; color: var(--muted); }
ul.changelog {
  list-style: none; margin: 0; padding: 0;
  max-height: 16rem; overflow-y: auto;
  display: grid; gap: .5rem;
}
ul.changelog li { display: flex; align-items: center; gap: .38rem; font-size: .8rem; min-width: 0; }
ul.changelog .mark { font-size: .62rem; flex-shrink: 0; }
ul.changelog .k { font-weight: 700; flex-shrink: 0; }
ul.changelog .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.changelog .when { color: var(--muted); font-size: .72rem; flex-shrink: 0; }
.changelog-empty { margin: 0; font-size: .8rem; color: var(--muted); }
.month-nav { display: flex; justify-content: space-between; align-items: center; padding: .3rem .4rem .4rem; }
.month-nav h2 { font-size: 1.05rem; margin: 0; font-weight: 700; }
.month-nav a.chev {
  text-decoration: none; font-size: 1.25rem; color: var(--muted);
  width: 2.3rem; height: 2.3rem; line-height: 2.2rem; text-align: center;
  border-radius: 99px;
}
.month-nav a.chev:active { background: var(--bg); }
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.cal th { font-size: .72rem; color: var(--muted); padding: .35rem 0; font-weight: 500; }
table.cal th.sun, table.cal td.sun .num { color: var(--red); }
table.cal th.sat, table.cal td.sat .num { color: var(--blue); }
table.cal td { height: 4.4rem; vertical-align: top; text-align: center; }
table.cal td a { display: block; height: 100%; text-decoration: none; color: inherit; padding-top: .25rem; }
table.cal .num { font-size: .82rem; line-height: 1.6rem; }
table.cal td.today .num {
  background: var(--primary); color: #fff; border-radius: 99px;
  display: inline-block; min-width: 1.6rem;
}
table.cal .cnt {
  display: block; margin: .1rem auto 0; width: 2.5rem;
  font-size: .76rem; font-weight: 700;
  color: var(--on-primary-container); background: var(--primary-container);
  border-radius: 99px; padding: .12rem 0;
}
/* 달력 칸 플랫폼별 팀수 (색 점 + 숫자) */
table.cal .pcnts {
  display: flex; justify-content: center; gap: .3rem; flex-wrap: wrap;
  margin-top: .18rem; line-height: 1;
}
table.cal .pcnt {
  display: inline-flex; align-items: center; gap: .12rem;
  font-size: .68rem; font-weight: 700; color: var(--text);
}
table.cal .pcnt .dot { width: .48rem; height: .48rem; border-radius: 99px; }
/* 플랫폼 색 (점 공용) */
.dot.naver { background: #03c75a; }
.dot.yeogi { background: #e0234e; }
.dot.nol { background: #7b2ff2; }
.dot.onda { background: #1976d2; }
.dot.direct { background: #4a4f55; }
/* 범례 */
.legend {
  display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap;
  padding: .5rem 0 .4rem; font-size: .7rem; color: var(--muted);
}
.legend span { display: flex; align-items: center; gap: .28rem; }
.legend .dot { width: .55rem; height: .55rem; border-radius: 99px; display: inline-block; }
/* 오늘: 칸 전체 강조 */
table.cal td.today { background: var(--primary-container); border-radius: 12px; }
/* 지난 날짜: 회색 */
table.cal td.past .num { color: var(--gray) !important; }
table.cal td.past .cnt { background: #ececec; color: var(--gray); }
table.cal td.past .pcnt { color: var(--gray); }
table.cal td.past .pcnt .dot { background: #c9d2d8; }

/* 표 위 도구줄 */
.list-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 .2rem .5rem;
}
.list-bar h3 { margin: 0; font-size: .95rem; font-weight: 700; }
/* 새로고침(재수집) 버튼 */
.refresh-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: .95rem; padding: .1rem .3rem; border-radius: 99px;
  vertical-align: middle;
}
.refresh-btn:disabled { cursor: default; }
.refresh-btn.spinning { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.list-bar .toggle {
  display: flex; align-items: center; gap: .35rem;
  font-size: .82rem; color: var(--muted); cursor: pointer; user-select: none;
}
.list-bar input[type=checkbox] { accent-color: var(--primary); width: 1rem; height: 1rem; }

/* 예약 표 (엑셀형) */
.table-wrap {
  overflow-x: auto;
  background: var(--surface); border: 1px solid var(--outline); border-radius: 12px;
}
table.res { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 780px; }
table.res th {
  text-align: left; font-size: .74rem; font-weight: 600; color: var(--muted);
  padding: .55rem .6rem; border-bottom: 1px solid var(--outline);
  white-space: nowrap; background: var(--surface);
}
table.res td {
  padding: 0 .6rem; border-bottom: 1px solid var(--outline);
  vertical-align: middle; height: 2.6rem; line-height: 2.6rem;
  overflow: hidden;
}
table.res tbody tr:last-child td { border-bottom: 0; }
table.res .nowrap { white-space: nowrap; }
table.res .name { font-weight: 700; }
table.res td a { color: var(--primary); text-decoration: none; font-weight: 600; }
table.res .num-cell { text-align: right; }
table.res .ellip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 커스텀 툴팁 — 호버 즉시 표시 */
.tip {
  display: none; position: fixed; z-index: 50;
  max-width: 340px; padding: .55rem .75rem;
  background: #2b3136; color: #fff;
  font-size: .84rem; line-height: 1.5; white-space: pre-wrap;
  border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
}

/* 요청사항 — 있을 때만 💬 버튼, 클릭해서 보기 */
table.res .msg-cell { text-align: center; }
.msg-btn { border: 0; background: transparent; font-size: .95rem; cursor: pointer; padding: 0; }
.msg-body { margin: .4rem 0 .2rem; font-size: .92rem; line-height: 1.5; white-space: pre-wrap; }

/* 비고 칸 — 클릭해서 쓰기, 빨간 글씨, 전체 표시 */
table.res .memo-cell { cursor: pointer; white-space: nowrap; color: var(--red); max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
table.res .memo-cell:hover { background: var(--bg); }
table.res .memo-cell .memo-add { opacity: .35; font-size: .8rem; }
table.res .memo-col { color: var(--red); }
table.res .empty { text-align: center; color: var(--muted); padding: 1.4rem; }
table.res tr.today td { background-color: #e3f3fd; }
/* 날짜 소제목 행 (지메일식 subheader) */
table.res tr.subhead td {
  height: 2.1rem; line-height: 2.1rem;
  background: #eef5fa; font-size: .78rem; font-weight: 700; color: var(--muted);
}
table.res tr.subhead.today td { background: var(--primary-container); color: var(--on-primary-container); }
table.res tr.subhead.past td { background: #f2f4f6; color: var(--gray); }
/* 지난 예약: 회색 */
table.res tr.past td, table.res tr.past .name { color: var(--gray); }
table.res tr.past td a { color: var(--gray); }
table.res tr.past .badge, table.res tr.past .edit-btn,
table.res tr.past .gdot { opacity: .45; }

/* 단체 점 — 같은 예약(2동 이상)끼리 같은 색 */
.gdot { display: inline-block; width: .7rem; height: .7rem; border-radius: 99px; vertical-align: middle; }
.gdot.g0 { background: #e91e63; }
.gdot.g1 { background: #ff9800; }
.gdot.g2 { background: #009688; }
.gdot.g3 { background: #3f51b5; }
.gdot.g4 { background: #795548; }
.gdot.g5 { background: #00bcd4; }
.gdot.g6 { background: #8bc34a; }
.gdot.g7 { background: #9c27b0; }

/* 플랫폼 배지 */
.badge {
  font-size: .68rem; font-weight: 700; padding: .18rem .5rem;
  border-radius: 99px; color: #fff; white-space: nowrap;
  display: inline-block; vertical-align: middle; line-height: 1.4;
}
.badge.naver { background: #03c75a; }
.badge.yeogi { background: #e0234e; }
.badge.nol { background: #7b2ff2; }
.badge.onda { background: #1976d2; }
.badge.direct { background: #4a4f55; }

/* 폼 */
form.res {
  background: var(--surface); border-radius: 16px; padding: 1.1rem 1rem;
  border: 1px solid var(--outline);
  max-width: 640px; margin: 0 auto;
}
form.res label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin: .95rem 0 .3rem; }
form.res label:first-child { margin-top: 0; }
form.res input, form.res textarea, form.res select {
  width: 100%; font-size: 16px; padding: .65rem .75rem;
  font-family: inherit; color: var(--text);
  border: 1px solid #c4cdc8; border-radius: 10px; background: #fff;
}
form.res input:focus, form.res textarea:focus, form.res select:focus {
  outline: 2px solid var(--primary); border-color: var(--primary);
}
form.res select { appearance: none; -webkit-appearance: none; height: 2.9rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.grid2 > div { min-width: 0; }  /* date input 고유폭이 칸을 밀어내는 것 방지 */
.grid2 label { margin-top: .95rem; }
form.res input { min-width: 0; }

/* 직접예약·비고 팝업 — dialog 자체가 흰 카드 (취소 버튼까지 안에 담김) */
dialog#res-modal, dialog#memo-modal, dialog#msg-modal {
  border: 0; border-radius: 16px; padding: 1.1rem 1rem;
  background: var(--surface);
  width: min(94vw, 540px); max-height: 90dvh;
  margin: auto; overflow-y: auto;
}
dialog#res-modal::backdrop, dialog#memo-modal::backdrop, dialog#msg-modal::backdrop { background: rgba(0, 0, 0, .45); }
dialog#res-modal form.res, dialog#memo-modal form.res {
  max-width: none; border: 0; border-radius: 0; padding: 0; background: transparent;
}
dialog#memo-modal, dialog#msg-modal { width: min(94vw, 420px); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.modal-head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.modal-close {
  border: 0; background: transparent; font-size: 1rem; color: var(--muted);
  width: 2.2rem; height: 2.2rem; border-radius: 99px; cursor: pointer;
}
.modal-close:active { background: var(--bg); }
dialog#res-modal .cancel-wrap { margin-top: .5rem; }
.edit-btn { border: 0; background: transparent; font-size: .9rem; cursor: pointer; padding: 0; }

/* 홈 (임시) */
.home-empty { text-align: center; color: var(--muted); padding: 3rem 0; }

/* 직접예약관리: 취소된 예약 */
table.res tr.cancelled td, table.res tr.cancelled .name { color: var(--gray); }
table.res tr.cancelled .name, table.res tr.cancelled td.nowrap { text-decoration: line-through; }
table.res tr.cancelled .badge { opacity: .45; }
.cancel-tag { font-size: .72rem; color: var(--red); }

/* 오류 토스트 */
.toast {
  max-width: 640px; margin: 0 auto .9rem; padding: .7rem .9rem;
  background: #fdecec; color: var(--red); border: 1px solid #f5c6c6;
  border-radius: 12px; font-size: .88rem;
}
button.save {
  width: 100%; margin-top: 1.3rem; padding: .85rem; font-size: 1rem; font-weight: 700;
  font-family: inherit;
  border: 0; border-radius: 99px; background: var(--primary); color: #fff;
}
/* 팝업 저장·취소 나란히 */
.modal-actions { display: flex; gap: .6rem; }
.modal-actions button.save { flex: 1.4; }
.modal-actions button.cancel-btn {
  flex: 1; margin-top: 1.3rem; padding: .85rem; font-size: 1rem; font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--outline); border-radius: 99px; background: transparent; color: var(--muted);
}
form.cancel-wrap { max-width: 640px; margin: .4rem auto 0; }
button.cancel-res {
  width: 100%; margin-top: .6rem; padding: .7rem; font-size: .92rem; font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--red); border-radius: 99px; background: transparent; color: var(--red);
}
.err { color: var(--red); font-size: .9rem; margin-top: .8rem; }

/* 로그인 */
body.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding-bottom: 0; }
form.login {
  background: var(--surface); padding: 2rem 1.6rem; border-radius: 20px;
  border: 1px solid var(--outline); width: min(88vw, 330px);
}
form.login h1 { font-size: 1.2rem; margin: 0 0 .3rem; color: var(--primary); }
form.login p.sub { font-size: .82rem; color: var(--muted); margin: 0 0 1.1rem; }
form.login input[type=password] {
  width: 100%; font-size: 16px; padding: .7rem .75rem; font-family: inherit;
  border: 1px solid #c4cdc8; border-radius: 10px;
}
form.login input[type=password]:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
form.login button {
  width: 100%; margin-top: .9rem; padding: .8rem; font-size: 1rem; font-weight: 700;
  font-family: inherit;
  border: 0; border-radius: 99px; background: var(--primary); color: #fff;
}