/* 내 메모(memos.htm) 전용 스타일.
   원본 사이트와 무관한 PWA 자체 화면이라 사이트 CSS를 전혀 쓰지 않는다.
   구조는 offline-search.htm / diagnostics.htm 과 같은 결로 맞췄다. */

* { box-sizing: border-box; }

/* 브라우저의 '웹페이지 어둡게'(강제 다크 모드)를 끈다 - <head> 의 <meta name="color-scheme">
   와 짝이다(그 표는 계산값에 안 나타나서 검사가 못 잰다. 규칙은 나타난다). */
:root { color-scheme: only light; }

html, body {
  margin: 0;
  min-height: 100%;
  background: #f7f7fa;
  color: #1a1a2e;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  /* 최상위 문서이므로 당겨서 새로고침을 막는다 (목록을 길게 스크롤하다 위에서 더 당기면
     새로고침이 발동하는데, 얻는 것 없이 입력한 찾기말만 날아간다) */
  overscroll-behavior-y: contain;
}

.memos-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: #1a1a2e;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.memos-topbar h1 { margin: 0; font-size: 14px; font-weight: 600; }
.memos-topbar a { color: #e8b64a; text-decoration: none; font-size: 13px; }
#memos-count { font-size: 12px; color: #b9b9c6; min-width: 48px; text-align: right; }

.memos-box {
  padding: 12px;
  background: #fff;
  border-bottom: 1px solid #e4e4ea;
}

.memos-box input {
  width: 100%;
  padding: 12px 14px;
  /* 16px 미만이면 iOS 가 입력할 때 화면을 확대한다 */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* 홈페이지 / 성경 거르기. 한 갈래뿐이면 자리를 차지하지 않는다 (검색 화면과 같은 방식) */
.memos-kinds {
  display: none;
  gap: 6px;
  padding: 10px 12px 0;
}
.memos-kinds.show { display: flex; }

.memos-kinds button {
  flex: 1 1 0;
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 6px;
  border: 1px solid #dcdce4;
  border-radius: 999px;
  background: #fff;
  color: #6b6b7a;
  cursor: pointer;
}
.memos-kinds button.on {
  background: #1a1a2e;
  border-color: #1a1a2e;
  color: #fff;
  font-weight: bold;
}

/*
 * # 태그 줄 (사용자 요청 2026-08-31). 갈래 단추와 같은 모양이되 **폭을 안 나눈다** -
 * 갈래는 셋으로 고정이지만 태그는 몇 개가 될지 모른다. 넘치면 접히고(wrap), 태그가
 * 아주 많아지면 세 줄까지만 보이고 그 안에서 구른다 - 목록이 화면 밖으로 밀리면 안 된다.
 */
.memos-tags {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  max-height: 108px;
  overflow-y: auto;
}
.memos-tags.show { display: flex; }

.memos-tags button {
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 9px 11px;
  border: 1px solid #dcdce4;
  border-radius: 999px;
  background: #fff;
  color: #4a4a5a;
  cursor: pointer;
}
.memos-tags button.on {
  background: #3b5ca8;
  border-color: #3b5ca8;
  color: #fff;
  font-weight: bold;
}

/* 메모 글 안의 태그 - 누르면 그 태그만 모아 본다 */
.memo-tag {
  font-weight: bold;
  color: #3b5ca8;
  cursor: pointer;
}

.memos-status { padding: 8px 16px; font-size: 12px; color: #6b6b7a; }
.memos-list { padding: 4px 12px 8px; }

/* 페이지별 묶음 */
.memos-group { margin-bottom: 14px; }

.memos-group > h2 {
  margin: 0 0 6px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b7a;
}

.memo-item {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* 읽는 글자의 크기. memos.js 가 본문과 같은 값(bookApp:fontSize)에서 계산해 넣는다.
   못 넣었을 때를 위해 기본값을 둔다. */
:root { --memo-font: 16px; }

/* 메모가 붙어 있던 본문 구절.
   여러 절을 묶은 메모는 인용이 길다(3절이면 205자·126px). 접어두지 않으면 한 항목이
   화면의 1/4을 먹어서 목록을 훑기 어렵다. 전문은 눌러서 뜨는 작은 창에서 본다. */
.memo-quote {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #4b5563;
  font-size: calc(var(--memo-font) * 0.82);
  line-height: 1.5;
  border-left: 3px solid #3b82f6;
  padding-left: 8px;
  margin-bottom: 6px;
  text-decoration: none;
}
.memo-quote:active { background: #eef4ff; }

/* 사용자가 쓴 내용. 줄바꿈을 그대로 살리되 긴 단어는 접는다. */
.memo-note {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 8px;
  font-size: var(--memo-font);
  line-height: 1.55;
}

.memo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #9095a3;
}

/*
 * 본문에서 보이기/접기를 따로 정해 둔 메모의 표 (사용자 요청 2026-09-01).
 * '삭제' 앞에 오도록 밀어낸다 - 날짜는 왼쪽, 표와 단추는 오른쪽이다.
 */
.memo-vis {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #3b5ca8;
  white-space: nowrap;
}
.memo-vis.memo-vis-off {
  background: #f1f1f5;
  color: #6b7280;
}

.memo-foot button {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: #f1f1f5;
  color: #b91c1c;
  cursor: pointer;
}

/* 메모 안에 적어둔 성경 인용 ("참고: 롬 5:8") - 그 절로 바로 간다 */
.memo-ref {
  color: #1d4ed8;
  text-decoration: underline;
  font-weight: 600;
  /* 본문 글자 사이에 섞여 있어 손가락으로 누르기 어렵다. 위아래로 눌리는 면을 넓히되
     줄 간격은 건드리지 않도록 세로 여백 대신 padding 만 준다. */
  padding: 2px 1px;
}

/* 찾기 칸에 장·절을 적었을 때 목록 맨 위에 뜨는 바로 가기 */
.memos-ref {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: #f3f7ff;
  border: 1px solid #c7d7ff;
  border-radius: 10px;
  text-decoration: none;
  color: #1d4ed8;
}
.memos-ref strong { font-size: 15px; }
.memos-ref span { font-size: 12px; color: #6b7280; }

/* 성경 메모를 눌렀을 때 뜨는 작은 창. 목록에서 보던 자리를 잃지 않게 먼저 여기서 보여준다.
   자리는 **화면 한가운데**다 (사용자 요청 2026-08-26 - 메모 고치기 창·엿보기 창과 같은 규칙). */
.memos-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  /* 바깥 여백은 화면의 4%(12~40px) - 떠 있는 창 셋이 같은 규칙이다(memo.js 의 POP_GUTTER) */
  padding: clamp(12px, 4vw, 40px);
  box-sizing: border-box;
}

.memos-modal-box {
  width: 100%;
  box-sizing: border-box;
  /* 최대 폭은 글자 60자(작아도 760px) - 520px 로 묶어 두었더니 태블릿에서 좌우가 크게 비었다 */
  max-width: max(760px, calc(var(--memo-font) * 60));
  max-height: 80vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

/* 어느 장·절인지 적는 줄 - 본문의 90%(작아도 14px) · 굵게 (의견 보내기 2026-10-17 - 12px 라 너무 작았다).
   성경 엿보기 창의 머리 줄(bible-ref.js #bib-peek-head)과 같은 규칙이다 */
.memos-modal-head { font-size: max(14px, calc(var(--memo-font) * 0.9)); font-weight: 600; color: #6b6b7a; margin-bottom: 8px; }

.memos-modal-verse {
  display: block;
  color: #1a1a2e;
  font-size: var(--memo-font);
  border-left: 3px solid #3b82f6;
  padding: 2px 0 2px 10px;
  margin-bottom: 10px;
  text-decoration: none;
  line-height: 1.6;
}
.memos-modal-verse:active { background: #eef4ff; }

.memos-modal-note {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 12px;
  color: #333;
  font-size: var(--memo-font);
  line-height: 1.55;
}

.memos-modal-foot { display: flex; gap: 8px; }

.memos-modal-foot button,
.memos-modal-foot a {
  flex: 1 1 0;
  text-align: center;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.memos-modal-foot button { background: #f1f1f5; color: #374151; }
.memos-modal-foot a { background: #1a1a2e; color: #fff; }

/* "나란히 보기" 는 한 줄을 통째로 쓴다. 좁은 화면에서 단추 셋을 한 줄에 넣으면 글자가 접힌다. */
.memos-modal-foot-wide { margin-top: 8px; }
.memos-modal-foot-wide a,
.memos-modal-foot-wide button { background: #0f766e; color: #fff; }

/* 찾기말 강조 */
.memos-list mark { background: #ffe14d; color: #000; border-radius: 2px; padding: 0 1px; }

.memos-empty {
  margin: 24px 16px;
  padding: 18px 16px;
  background: #fff;
  border-radius: 10px;
  color: #6b6b7a;
  text-align: center;
}

/* 마지막 내보내기 안내. 목록 위에 있다 - 목록이 길면 아래 안내는 아무도 못 본다.
   메모가 있는데 잃을 것이 생겼으면(내보낸 뒤 새 메모) 눈에 띄게 바꾼다. */
.memos-backup {
  display: none;
  margin: 12px 12px 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: #eef1f6;
  color: #4b5563;
  font-size: 12px;
}
.memos-backup.show { display: block; }
.memos-backup.warn {
  background: #fff3d9;
  color: #6b4e00;
  border-left: 4px solid #f0b429;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
}
/* 배너 안의 즉석 내보내기 단추 - 아래까지 안 내려가도 그 자리에서 남길 수 있게 */
.memos-backup-go {
  display: block;
  margin: 10px 0 0;
  padding: 7px 16px;
  border: 0;
  border-radius: 6px;
  background: #f0b429;
  color: #442f00;
  font-size: 13px;
  font-weight: 700;
}

/* 내보낼 파일 이름. 기본값이 채워져 있어 그냥 눌러도 되고, 고쳐서 눌러도 된다. */
.memos-filename {
  margin: 10px 12px 0;
}

.memos-filename label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: #6b6b7a;
}

.memos-filename input {
  width: 100%;
  padding: 10px 12px;
  /* 16px 미만이면 iOS 가 입력할 때 화면을 확대한다 */
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

.memos-actions {
  display: flex;
  gap: 8px;
  margin: 8px 12px 0;
  /* 단추가 넷이 되면서(갓피플 가져오기) 360px 에서 한 줄에 안 들어간다 - 접히게 둔다.
     홈 버튼 줄에서 배운 대로, 좁은 폭은 눈으로 짐작하지 말고 재야 한다. */
  flex-wrap: wrap;
}

.memos-actions button {
  /* 최소 폭을 주어 "갓|피플|가져|오기" 로 잘게 쪼개지지 않게 한다 */
  flex: 1 1 132px;
  font-family: inherit;
  font-size: 14px;
  padding: 12px;
  border: 0;
  border-radius: 999px;
  background: #1a1a2e;
  color: #fff;
  cursor: pointer;
}

.memos-actions button#memos-export { background: #e8b64a; color: #1a1a2e; font-weight: bold; }

.memos-help { margin: 12px 16px 24px; font-size: 12px; color: #666; }

#memos-raw {
  display: none;
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  height: 200px;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px;
}
#memos-raw.show { display: block; }

/* 공유 결과/거부 이유. 단추 바로 아래라 눌렀을 때 눈이 가는 자리다. */
.memos-share-msg {
  white-space: pre-line;   /* 안내 한 줄 + 기술적인 내역 한 줄 */
  margin: 10px 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef1f6;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
}
.memos-share-msg.bad { background: #fdecec; color: #7a2020; border-left: 4px solid #e05a5a; }

/* ── 기기끼리 맞추기 (사용자 요청 2026-09-02) ─────────────────────────
   파일 단추 줄과 같은 결로 두되, **켜져 있는지 아닌지가 한눈에** 보여야 한다 -
   서버에 개인 기록이 올라가는 기능이라 "지금 켜져 있나" 를 헷갈리면 안 된다. */
.memos-sync {
  margin: 14px 0 4px;
  padding: 12px 14px;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  background: #f7f9fc;
}
.memos-sync-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.memos-sync-state {
  font-size: .85em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e5e9f0;
  color: #4b5563;
}
.memos-sync-state.on { background: #dcfce7; color: #166534; }
.memos-sync-why, .memos-sync-note { margin: 8px 0 0; line-height: 1.55; }
.memos-sync-note { font-size: .88em; color: #4b5563; }
.memos-sync-code {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0;
}
.memos-sync-label { font-size: .88em; color: #4b5563; }
/* 코드는 옮겨 적는 것이라 **큼직하고 사이가 벌어져야** 한다 - 헷갈리는 글자를 뺐지만
   그것만으로는 부족하다. 고르기 쉽게 user-select 도 열어 둔다. */
#memos-sync-value {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1.15em;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #cbd5e1;
  user-select: all;
  word-break: break-all;
}

/* '더 보기' - 목록을 나눠 그린다(docs/TODO.md 2절). 목록 맨 아래에 한 줄로 눕는다 */
.memos-more {
  display: block;
  width: 100%;
  margin: 14px 0 4px;
  padding: 12px;
  font: inherit;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #1f2430;
  cursor: pointer;
}
.memos-more:active { background: #eef2f8; }