/* 청비 만세력 설치 안내(/manse/install) — 나이 드신 상담사용: 본문 18px 이상, 버튼 높이 56px 이상, 한 화면에 한 기종만.
   색은 공개 사이트 톤(아이보리 바탕·남색 글자·코랄 강조). 공통 머리글·꼬리말은 site-chrome.css, 앱 모드 머리글·꼬리말은 manse-app.css. */
* { box-sizing: border-box; }
body.mi-body {
  margin: 0; background: #f7f1e7; color: #1f2a44;
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  font-size: 18px; line-height: 1.6;
}
.mi-main { max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
.mi-title { font-family: 'Noto Serif KR', 'Batang', serif; font-size: 26px; line-height: 1.35; font-weight: 600; margin: 4px 0 8px; word-break: keep-all; }
.mi-sub { margin: 0 0 20px; font-size: 18px; color: #4a4f5c; word-break: keep-all; }

/* 기종 탭 — 두 칸 같은 폭, 고른 탭은 남색 바탕 */
.mi-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.mi-tab {
  flex: 1 1 0; min-width: 0; min-height: 56px; padding: 0 8px; border-radius: 12px;
  border: 2px solid #1f2a44; background: #fff; color: #1f2a44; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.mi-tab.is-active { background: #1f2a44; color: #fff; }
.mi-panel[hidden] { display: none; }
.mi-panel-note { margin: 0 0 12px; font-size: 18px; color: #4a4f5c; }

/* 단계 카드 — 큰 번호 + 문장 + 그림 자리 */
.mi-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mi-step { background: #fff; border: 1px solid #e6e0d4; border-radius: 16px; padding: 16px; }
.mi-step-head { display: flex; align-items: flex-start; gap: 12px; }
.mi-num {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #F26B4E; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; line-height: 1;
}
.mi-step-text { font-size: 19px; font-weight: 600; line-height: 1.5; padding-top: 6px; word-break: keep-all; }
.mi-shot { margin: 12px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mi-fallback { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #f7f1e7; border-radius: 12px; width: 100%; }
.mi-fallback svg { max-width: 100%; height: auto; fill: #1f2a44; }
.mi-appicon { border-radius: 20px; box-shadow: 0 2px 8px rgba(31, 42, 68, .18); }
.mi-appicon-label { font-size: 18px; font-weight: 600; }
/* 실제 화면 사진 — 카드 폭에 맞춤(최대 100%), 둥근 모서리·얇은 테두리, 아래 한 줄 글(manse-install.js) */
.mi-shot-img { display: block; max-width: 100%; height: auto; max-height: 420px; border-radius: 12px; border: 1px solid #d9d2c4; }
.mi-shot-cap { font-size: 16px; color: #6b6b6b; text-align: center; word-break: keep-all; }
/* 대체 그림 없는 자리 — 사진이 있을 때만 / 설치됨 알림은 다른 사진보다 작게(카드의 80%) */
.mi-shot-opt:not(.has-photo) { display: none; }
.mi-shot-sm .mi-shot-img { max-width: 80%; }
.mi-inapp .mi-shot { margin: 10px 0 4px; }
.mi-inapp .mi-shot-cap { color: #4a4f5c; }

/* 큰 버튼 — 높이 56px 이상 */
.mi-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 16px; border-radius: 12px;
  font: inherit; font-size: 19px; font-weight: 700; text-decoration: none; cursor: pointer; border: 2px solid #1f2a44;
}
.mi-btn[hidden] { display: none; }
.mi-btn-install { margin-top: 12px; background: #1f2a44; color: #fff; }
.mi-btn-open { margin-top: 24px; background: #F26B4E; border-color: #F26B4E; color: #fff; }

/* 접이식 도움말 */
.mi-fold { margin-top: 14px; background: #fff; border: 1px solid #e6e0d4; border-radius: 14px; }
.mi-fold summary { min-height: 56px; display: flex; align-items: center; padding: 0 16px; font-size: 18px; font-weight: 700; cursor: pointer; }
.mi-fold-body { padding: 0 16px 8px; }
.mi-fold-body p { margin: 0 0 12px; word-break: keep-all; }
.mi-key { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #c9c3b6; border-radius: 8px; background: #faf8f3; }
.mi-key svg { fill: #1f2a44; }

/* 두 탭 공통 안내 — 눈에 띄게 */
.mi-notice { margin-top: 18px; padding: 16px; border-radius: 14px; background: #fff4d6; border: 2px solid #e0a800; }
.mi-notice p { margin: 0; font-size: 18px; word-break: keep-all; }

/* 앱 모드(아이콘으로 실행) — 단계 대신 「이미 설치」만 */
.mi-installed { display: none; padding: 20px 16px; border-radius: 16px; background: #fff; border: 1px solid #e6e0d4; text-align: center; }
.mi-installed-text { margin: 0; font-size: 22px; font-weight: 700; }
html.app-mode .mi-installed { display: block; }
html.app-mode .mi-guide { display: none; }
.mi-fold summary { list-style: none; justify-content: space-between; }
.mi-fold summary::-webkit-details-marker { display: none; }
.mi-fold summary::after { content: '▾'; font-size: 20px; }
.mi-fold[open] summary::after { content: '▴'; }

/* 1번 카드(안드로이드) — 설치 신호가 있으면(<html class="install-ready">, manse-app.js) 「버튼을 누르세요」 + 진짜 버튼 하나,
   없으면 크롬 ⋮ 메뉴 안내 글 + 「이미 설치했다면」 한 줄. 버튼 그림은 두지 않는다. */
.mi-s1-ready { display: none; }
html.install-ready .mi-s1-ready { display: inline; }
html.install-ready .mi-s1-menu, html.install-ready .mi-s1-installed { display: none; }
.mi-s1-installed { margin: 10px 0 0; font-size: 18px; color: #4a4f5c; word-break: keep-all; }
/* 단계 그림 아래 「그림 예시」 — 그림을 누르는 버튼으로 착각하지 않게(manse-install.js가 붙인다) */
.mi-fallback-cap { font-size: 16px; color: #6b6b6b; }

/* 앱 안 브라우저(카카오톡 등 — <html class="in-app-browser">) — 맨 위 안내 상자, 안내 문구를 「크롬으로 연 뒤」로 */
.mi-inapp { display: none; margin-bottom: 18px; padding: 16px; border-radius: 14px; background: #ffe9e3; border: 2px solid #F26B4E; }
html.in-app-browser .mi-inapp { display: block; }
.mi-inapp-title { margin: 0 0 10px; font-size: 19px; font-weight: 700; word-break: keep-all; }
.mi-inapp-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.mi-inapp-list li { font-size: 18px; word-break: keep-all; }
.mi-note-inapp { display: none; }
html.in-app-browser .mi-note-plain { display: none; }
html.in-app-browser .mi-note-inapp { display: inline; font-weight: 700; }