/* 예배 노트 임베드 페이지 전용 스타일.
   이 도구는 Flutter 웹 앱을 iframe 없이 #wn-app-host에 직접 붙이는 구조라(template.html
   참고), 다른 도구처럼 카드형 프레임에 담지 않고 화면 대부분을 앱이 그대로 채운다
   (사용자 요청: "아이프레임처럼 일부 공간만 활용하지 말고 전체화면으로").
   뒤로가기는 앱 위에 겹치는 오버레이가 아니라 얇은 상단 바(--wn-topbar-h) 안에 둔다 —
   오버레이 방식은 노트 편집 화면의 자체 뒤로가기 버튼과 같은 좌상단에 겹쳐서 앱
   내비게이션을 막아버리는 문제가 실사용 중 발견됐다.
   앱 자체가 무채색(검정/흰색/회색) 톤이라(claude_worship_note 프로젝트 참고) 이 페이지의
   배경도 앱과 톤을 맞춘 다크 배경으로 둔다. */

:root {
  --wn-muted: rgba(255, 255, 255, 0.75);
  --wn-border: rgba(255, 255, 255, 0.16);
  --wn-app-bg: #1c1c1a; /* 앱 다크 배경(my_theme.dart의 _darkBg)과 동일 — 로딩 중 흰 화면 깜빡임 방지 */
  --wn-topbar-h: 34px;
}

* { box-sizing: border-box; }

/* note: 처음엔 top-bar/wn-app-frame을 둘 다 position:fixed로 화면에 못박아뒀는데,
   모바일 브라우저에서 가상 키보드가 뜰 때 fixed 요소는 "레이아웃 뷰포트" 기준으로
   고정돼서 키보드가 뜨고 줄어드는 "시각적 뷰포트"를 반영하지 못한다 — 그 결과
   작성 중인 내용이 키보드 뒤에 가려지거나, 심하면 가상 키보드 자체가 안 뜨는
   문제로 이어졌다(실사용 중 발견). Flutter가 원래 기대하는 방식대로 body를
   일반 흐름(flex) 안에 두고 100dvh(가상 키보드가 뜨면 같이 줄어드는 동적
   뷰포트 단위)로 크기를 주면, 브라우저의 리사이즈 신호가 앱에 정상적으로
   전달된다. */
/* note: 100dvh 자체가 처음 로드될 때 주소창이 아직 안 접힌 "큰 뷰포트" 기준으로
   한 번 계산되고 그 뒤로 안 따라와서, 첫 접속 때만 하단이 살짝 비어 보이고
   새로고침하면 멀쩡해지는 문제가 실사용 중 발견됐다(카카오톡/크롬 인앱 브라우저).
   dvh 자체를 못 믿고, JS로 실제 보이는 높이(visualViewport.height 우선)를 재서
   --wn-vh 변수를 직접 갱신하는 좀 더 확실한 방식으로 대체한다(모바일 웹의 흔한
   "100vh 버그" 표준 해결법과 같은 패턴, template.html 참고). --wn-vh가 아직
   없을 때(JS 실행 전 첫 페인트)만 100dvh를 대체값으로 쓴다.
*/
html, body {
  margin: 0;
  height: var(--wn-vh, 100dvh);
  overflow: hidden; /* 페이지 자체는 스크롤 없이 앱이 나머지 공간을 꽉 채운다 */
  background: var(--wn-app-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

.top-bar {
  flex: 0 0 auto;
  height: calc(var(--wn-topbar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--wn-border);
  background: var(--wn-app-bg);
}

.back-link {
  display: inline-block;
  margin-left: 10px;
  color: var(--wn-muted);
  text-decoration: none;
  font-size: 0.78rem;
}
.back-link:hover { color: #ffffff; }

/* 검색엔진·스크린리더에는 남기되 화면엔 안 보이게 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wn-app-frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0; /* flex 자식이 내용 크기만큼 안 늘어나고 실제로 줄어들 수 있게 */
  background: var(--wn-app-bg);
}

.wn-app-host {
  width: 100%;
  height: 100%;
}

.wn-embed-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wn-app-bg);
}

.wn-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ececec;
  animation: wn-spin 0.8s linear infinite;
}

@keyframes wn-spin {
  to { transform: rotate(360deg); }
}