/* 청비 만세력(/manse) — 관리자 만세력(admin-manse.html) 인라인 스타일을 그대로 옮겨 왔다(값 변경 없음).
   다른 점: 공통 헤더·푸터가 화면 폭 전체를 쓰도록 폭 제한(480px)을 body 대신 본문(.manse-main)에 두고,
   저장 사주 목록 창 스타일은 뺐다. 원국 표·대운/세운/월운 행·일진 달력은 공용 부품 CSS(manse-wonguk·manse-un·manse-iljin). */
:root {
  --el-mok: #d7edd0; --el-hwa: #fbdfe4; --el-to: #faf0c8; --el-geum: #FAFAF7; --el-su: #B8BCC4;
  --cur-border: #3b6fd6; --sel-border: #e08a1e;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f5f5f7; font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; color: #1d1d1f; }
.manse-main { max-width: 480px; margin: 0 auto; padding: 8px 8px 32px; }

/* 제목 줄 — 「청비 만세력」 + 작은 「아카데미 →」 링크 */
.manse-title-row { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.manse-title-row h1 { font-size: 18px; margin: 0; }
.manse-academy-link { font-size: 13px; color: #555; text-decoration: none; }
.manse-academy-link:hover { text-decoration: underline; }
/* 제목 줄 바로 아래 작은 회색 한 줄(소개 문구) — 브라우저·앱 모드 모두 */
.manse-tagline { margin: -4px 0 8px; font-size: 12px; line-height: 1.4; color: #777; }

/* ── 페이지 레벨 툴바(일진 달력·인원 추가·전체 초기화·컬러/흑백) ── */
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.page-toolbar-row { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.page-toolbar-row button { flex: 1; padding: 8px 2px; font-size: 12px; white-space: nowrap; }
.mode-toggle { display: flex; border: 1px solid #888; border-radius: 4px; overflow: hidden; flex: 0 0 auto; }
.mode-toggle button { border: none; background: #fff; font-size: 11px; padding: 5px 10px; cursor: pointer; color: #444; }
.mode-toggle button + button { border-left: 1px solid #888; }
.mode-toggle button.active { background: #333; color: #fff; }

/* ── 카드(사람 1명) ── */
.person-card { margin-bottom: 4px; }
.person-card + .person-card { margin-top: 14px; }
/* 카드 머리줄(.card-title-row·.card-remove-btn)은 공용 부품 /manse-wonguk.css — 「저장」은 「닫기 ×」와 같은 높이·모양으로 그 왼쪽에 둔다 */
.card-title-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.card-save-btn { background: none; border: 1px solid #fff; color: #fff; border-radius: 4px; min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.card-save-btn.done { background: #fff; color: #333; }

/* 입력 폼: 공용 .row/.field(가로 배치)를 이 화면에서만 세로 한 줄씩으로 재정의 */
.card-input-panel { background: #fff; padding: 4px 10px 10px; }
.card-input-panel summary { padding: 8px 2px; font-weight: 700; cursor: pointer; }
.card-input-panel .row { flex-direction: column; align-items: stretch; gap: 8px; }
.card-input-panel .row.inline2 { flex-direction: row; align-items: center; }
.card-input-panel input, .card-input-panel select { width: 100% !important; font-size: 15px; padding: 8px; }
.card-input-panel .checkbox-field { flex-direction: row; align-items: center; gap: 6px; }
.card-input-panel .checkbox-field input { width: auto !important; margin: 0; flex: 0 0 auto; }
.card-input-panel .region-manual-input[readonly] { background: #f5f5f7; color: #555; }
.card-input-panel .actions { flex-direction: column; }
.card-input-panel .actions button { width: 100%; }
.card-form-error { margin-top: 6px; }

/* ── 원광 밀도: 카드 여백·둥근 테두리 없이 표가 위아래로 바로 붙는 한 덩어리 ── */
.manse-block { background: #fff; border: 1px solid #bbb; margin-bottom: 10px; }
.manse-header { padding: 3px 6px; font-size: 11px; line-height: 1.6; border-bottom: 1px solid #bbb; }

.oheng-row { display: flex; border-bottom: 1px solid #bbb; }
.oheng-row span { flex: 1; text-align: center; padding: 3px 0; font-size: 12px; font-weight: 600; border-right: 1px solid #ccc; }
.oheng-row span:last-child { border-right: none; }

/* ── 오행 파스텔 배경 (컬러 모드 전용) ── */
body.color-mode .el-mok { background: var(--el-mok); }
body.color-mode .el-hwa { background: var(--el-hwa); }
body.color-mode .el-to  { background: var(--el-to); }
body.color-mode .el-geum{ background: var(--el-geum); }
body.color-mode .el-su  { background: var(--el-su); }

/* ── 흑백 모드: 유채색 0, 강조는 테두리·굵기·선 스타일로만 ── */
body.color-mode .oheng-row span.el-geum { box-shadow: inset 0 0 0 1px #cfd0d4; }
body.mono-mode .oheng-row span { background: none !important; }

/* 일진 달력·날짜 상세(바닥 시트)는 공용 부품 그대로 — 공통 헤더(z-index 300)보다 위에 뜨게만 올린다. */
.modal-overlay { z-index: 400; }
#dayDetailOverlay { z-index: 410; }

/* ── 임시 저장 복원 띠 — 관리자 만세력 복원 띠와 같은 코랄. ── */
.draft-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; padding: 8px 10px; background: #c94a2f; border: 1px solid #c94a2f; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.45; }
.draft-band[hidden] { display: none; }
.draft-band-btns { display: flex; gap: 6px; }
.draft-band-btns button { padding: 5px 12px; font-size: 12px; border-radius: 6px; cursor: pointer; }
#manseDraftRestoreBtn { background: #fff; border: 1px solid #fff; color: #c94a2f; font-weight: 700; }
#manseDraftClearBtn { background: transparent; border: 1px solid #fff; color: #fff; }

/* ── 저장 목록(이 기기에만 저장) — 도구줄 아래로 펼쳐지는 패널. 목록만 안에서 스크롤, 안내·검색·내보내기/가져오기는 항상 보인다. ── */
.saved-panel { background: #fff; border: 1px solid #bbb; padding: 8px; margin-bottom: 10px; }
.saved-panel[hidden] { display: none; }
.saved-note { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: #555; }
.saved-search { width: 100%; font-size: 15px; padding: 8px; margin-bottom: 6px; }
.saved-list { list-style: none; margin: 0; padding: 0; max-height: 48vh; overflow-y: auto; border-top: 1px solid #ddd; }
.saved-item { padding: 8px 2px; border-bottom: 1px solid #ddd; }
.saved-main { font-size: 14px; line-height: 1.45; word-break: keep-all; }
.saved-main .saved-sub { color: #555; font-size: 12px; }
.saved-memo { margin-top: 2px; font-size: 12px; color: #6a4a00; word-break: break-all; }
.saved-btns { display: flex; gap: 6px; margin-top: 6px; }
.saved-btns button { flex: 1; min-height: 36px; padding: 0 6px; font-size: 13px; }
.saved-memo-edit { display: flex; gap: 6px; margin-top: 6px; }
.saved-memo-edit input { flex: 1; min-width: 0; font-size: 15px; padding: 6px 8px; }
.saved-memo-edit button { min-height: 36px; padding: 0 10px; font-size: 13px; }
.saved-empty { padding: 14px 4px; font-size: 13px; color: #777; text-align: center; border-bottom: 1px solid #ddd; }
.saved-foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.saved-count { flex: 1; font-size: 12px; color: #555; }
.saved-foot button { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* 토스트 — 화면 아래 가운데에 잠깐 뜬다(공통 헤더·오버레이보다 위). */
.manse-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 600; max-width: calc(100vw - 32px); background: rgba(30, 30, 30, 0.92); color: #fff; font-size: 14px; line-height: 1.45; padding: 10px 16px; border-radius: 8px; text-align: center; pointer-events: none; }
.manse-toast[hidden] { display: none; }

/* ── 「📲 홈 화면에 설치」/「📲 홈 화면에 설치하는 법」(manse-app.js — 설치 신호가 오면 바로 설치, 아니면 /manse/install 안내로, 앱 모드에선 숨김) ── */
.manse-install-btn { display: block; width: 100%; min-height: 40px; margin-bottom: 10px; font-size: 14px; font-weight: 700; }
.manse-install-btn[hidden] { display: none; }