/*
 * 새일성가 한 장짜리 보기 (m/ns/s/songs.htm).
 *
 * 예전에는 곡마다 페이지가 하나씩이었다(s/S01.htm ~ S75.htm). 한 곡을 보다 다음 곡으로
 * 가려면 목록으로 돌아가 숫자를 다시 눌러야 했다. 지금은 75곡이 한 장에 이어져 있어서
 * 그냥 넘기면 된다.
 *
 * **악보와 무곡(가사만) 둘 다 문서에 들어 있고, 보이는 쪽만 고른다.**
 * 그림을 JS 로 붙이지 않는 이유는 도달성 분석이 글자를 훑기 때문이다 - JS 로 만들면 그림
 * 150장이 content.zip 에서 통째로 빠져서 설치한 사용자가 빈 화면을 본다.
 * 안 보이는 쪽은 display:none 이라 loading="lazy" 가 아예 받지 않는다(용량도 그대로다).
 */

/*
 * 배경은 **검은색**이다 (사용자 요청 2026-08-30 - "흰색은 눈 부시네").
 * 가로 보기가 생기면서(악보가 높이에 맞아 폭이 244px) 배경이 화면의 대부분이 됐는데,
 * 밝은 색이라 악보보다 배경이 눈을 쏘았다. 악보 그림 자체는 흰 종이 스캔이라 그대로다 -
 * 그림은 본문이고 배경만 우리 것이다.
 * (예전 색: #dde6f6 연파랑, .song 은 #fff - SPA 왼쪽 메뉴의 결을 따랐었다)
 */
html, body {
  margin: 0;
  padding: 0;
  background: #000;
}

#songs {
  /* 그림이 세로로 긴 것들이라(가로:세로 = 5:8) 넓은 화면에서는 폭을 묶어준다.
     안 묶으면 태블릿 가로에서 한 곡이 화면 세 배 높이가 된다. */
  max-width: 720px;
  margin: 0 auto;
  /*
   * 오른쪽 30px 은 **곡 슬라이더(#songs-rail)의 자리**다. 레일이 잡히는 폭은 44px 인데
   * 그중 30px 만 자기 자리로 갖고 나머지 14px 은 그림 위로 넘어온다 - 분할 보기 구분선이
   * 자리 24px + 겹침 11px 로 자리 잡은 것과 같은 비율이다(대부분은 자기 자리, 모자란
   * 만큼만 겹침). 처음에는 44px 을 통째로 비웠는데 악보가 눈에 띄게 좁아졌다.
   * 아래 96px 은 마지막 곡이 떠 있는 단추에 가리지 않게 하는 것이다.
   */
  padding: 0 30px 96px 0;
}

/* 넓은 화면에서는 #songs 가 가운데로 묶여서 오른쪽에 이미 빈 자리가 있다.
   거기까지 파먹으면 그림만 괜히 작아진다 (720 + 30*2 = 780). */
@media (min-width: 780px) {
  #songs { padding-right: 0; }
}

.song {
  margin: 0;
  padding: 0;
  /* 그림 여백도 검게 - 악보 그림(흰 종이)만 밝게 남는다 */
  background: #000;
  position: relative;
}

/*
 * **악보의 흰 종이에 옅은 색을 입힌다** (의견 보내기 2026-10-15 - "흰 바탕에 약간 색을. '불편한 점이나 바라는 점' 안내
 * 상자의 바탕색처럼" - 그 색이 #ecfdf5 다). 그림 파일은 본문이라 못 고친다 - 곡 위에 그 색을 **곱하기(multiply)** 로 얹는다:
 * 흰색은 그 색이 되고 검은 음표·가사는 그대로 검다. 검은 여백과 어두운 해설 카드도 거의 안 바뀐다.
 * 누르기는 밑으로 흘려보낸다(pointer-events:none). 색을 바꾸려면 이 한 줄이다.
 * **한 단계 덜 밝게** (의견 보내기 2026-10-16 - 같은 분이 "아직 조금 밝다". 관리자 결정) - #ecfdf5 에서 #dde9e2 로.
 */
.song::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #dde9e2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/*
 * **곡과 곡 사이에 선을 긋지 않는다** (사용자 요청 2026-08-30 - 하늘색 막대를 걷어냈다).
 * 예전에는 "이어 붙여 놓으면 어디서 끝났는지 알기 어렵다" 는 이유로 6px 띠를 뒀는데,
 * 가로에서 한 곡이 화면을 꽉 채우게 된 뒤로는 곡 경계가 화면 경계와 같아져서 굳이
 * 필요 없어졌다. 배경이 검은색이라 악보(흰 종이)의 가장자리가 곧 경계이기도 하다.
 * (곡을 옮겨 다니는 것은 오른쪽 레일과 목록이 맡는다)
 */

.song img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * **가로로 눕히면 높이에 맞춘다** (사용자 요청 2026-08-29).
 *
 * 악보는 세로로 긴 그림이다(887x1420, 가로:세로 = 1:1.6). 폭을 꽉 채우면 세로에서는
 * 잘 맞지만, **가로로 누우면 한 화면에 위쪽 일부만 들어온다** - 악보를 보려면 계속
 * 스크롤해야 하고 "잘려 보인다".
 *
 * 그래서 가로에서는 **폭이 아니라 높이**를 기준으로 맞춘다 - 한 곡이 통째로 들어온다.
 * 홈 그림이 가로에서 폭에 걸려 무너지던 것을 화면 높이로 맞춰 고친 것과 같은 처방이다.
 *
 * **width 를 고정한 채 max-height 만 걸면 안 된다** - 그러면 그림이 눌려서 찌그러진다.
 * 폭·높이를 다 auto 로 두고 최대치만 정해야 비율이 산다.
 */
/*
 * **높이를 정해 주고 폭이 따라오게 한다** (실기 보고 2026-08-30).
 *
 * 처음에는 `width:auto; height:auto; max-height:100vh` 로 썼는데, 그러면 **두 축이 다
 * auto 라 그림이 뜨기 전에는 자리를 못 잡는다.** 브라우저가 width/height 속성으로 높이를
 * 미리 잡아주는 것(aspect-ratio)은 **한쪽이 정해져 있을 때만** 되기 때문이다. 세로에서는
 * `width:100%` 가 그 역할을 했는데 가로에서 그것을 없애 버린 것이다.
 *
 * 그래서 목록에서 37번을 처음 누르면 **1~3번으로 갔다**(실측: 점프 시점의 문서 높이가
 * 12,060px, 자리를 다 잡고 나면 54,540px - 아래쪽 lazy 그림들이 높이 0 이었다).
 * 두 번째부터 맞는 이유는 그때는 이미 자리가 잡혀 있어서다.
 *
 * `height:100vh` 로 **높이를 정해 주면** 폭은 속성의 비율로 따라오고, 그림이 뜨기 전에도
 * 자리가 정확히 잡힌다. 이 프로젝트가 "여러 장을 이어 붙일 때는 width/height 를 다 적어라"
 * 로 이미 겪은 그 함정을, CSS 로 다시 불러들였던 것이다.
 */
@media (orientation: landscape) {
  .song img {
    width: auto;
    /* **얼려둔 높이**를 쓴다(songs.js 의 applySongHeight) - 100vh 로 두면 SPA 탭 줄이
       접힐 때마다 75곡이 통째로 커졌다 작아졌다 한다(사용자 보고 2026-08-30).
       셸이 아직 안 붙었으면 100vh 로 시작한다 - 첫 그림이 깜빡이지 않게. */
    height: var(--song-h, 100vh);
    max-width: 100%;
    /* 새로 그린 악보(2026-10-17)는 곡마다 비율이 다르다 - 3장은 1680x1476 로 거의 정사각이다.
       높이를 정한 채 max-width 에 걸리면 그림이 눌리므로, 상자 안에서 비율을 지키게 한다. */
    object-fit: contain;
    margin: 0 auto;
  }
  /*
   * 나란히 볼 때도 같다. **선택자에 img 를 더해 특이도로 이긴다** -
   * 아래의 `html.songs-both .song .sheet { width: 50% }` 와 특이도가 같으면
   * **나중에 나온 그쪽이 이겨서** 폭은 50% 로 굳고 높이만 깎인다 = 그림이 찌그러진다
   * (실측: 악보가 422x390, 비율 1.08 - 원본 0.625). **미디어 쿼리는 특이도를 올려주지
   * 않는다** - 이 프로젝트가 분할 방향에서 이미 겪은 함정이다.
   */
  /*
   * **가운데에서 딱 붙인다** (사용자 요청 2026-08-30). 위의 `.song img { margin: 0 auto }` 를
   * 그대로 두면 **두 장 사이가 벌어진다** - flex 아이템의 auto 여백은 남는 자리를 빨아들이고,
   * 가로에서는 높이에 맞추느라 두 장이 50% 보다 좁아져서 그 남는 자리가 실제로 생긴다
   * (실측: 두 장 사이 178px, 양옆 89px씩). 여백을 0 으로 돌리고 자리 배분은 부모의 justify-content 에 맡긴다.
   */
  html.songs-both .song img.sheet,
  html.songs-both .song img.lyric {
    width: auto;
    /* **높이를 여기서도 다시 적는다.** 아래의 `html.songs-both .song .lyric{height:auto}`
       가 특이도(0,3,0)로 위의 `.song img{height:100vh}`(0,1,1)를 이겨서, 두 축이 다 auto 가
       되고 무곡이 **높이 0** 이 됐다(실측: 비율 null, 한 화면 판정 실패).
       미디어 쿼리는 특이도를 안 올린다는 그 함정이 같은 파일 안에서 또 나왔다. */
    height: var(--song-h, 100vh);
    max-width: 50%;
    object-fit: contain;
    margin: 0;
  }
}

/*
 * 보기 방식. <html> 에 붙은 클래스로 고른다.
 *
 * songs.js 가 저장된 값을 읽어 **글이 그려지기 전에** 붙인다. 여기서 기본값을 정해두는 이유는
 * 스크립트가 늦게 떠도 악보가 잠깐 보였다 사라지는 깜빡임이 없게 하려는 것이다.
 */
/*
 * **특이도를 .song img 보다 높여야 한다.** 위의 .song img { display:block } 이 (0,1,1) 이라
 * .lyric { display:none } (0,1,0) 을 이겨버린다 - 실측으로 악보와 무곡이 **둘 다** 보였고
 * 문서 높이가 94,178px 이 됐다(한 벌만 보이면 47,352px). 이 프로젝트가 본문 인용 링크와
 * 분할 방향에서 이미 두 번 겪은 함정이다.
 */
.song .lyric { display: none; }
html.songs-lyric .song .sheet { display: none; }
html.songs-lyric .song .lyric { display: block; }

/*
 * 곡 해설 (사용자 요청 - 교회 게시판의 곡별 글을 그림 아래에 붙였다).
 * 악보와 섞이지 않게 흰 바탕 위에 위쪽 구분선을 두고, 읽는 글이라 줄 간격을 넉넉히 준다.
 * 게시판에 해설이 없는 곡(62~66장)은 이 자리 자체가 없다.
 */
/* 기본은 **감춤**이다(사용자 결정) - '설명' 단추를 눌러야 나온다.
   글이 길어서(최대 3,169자) 늘 펼쳐 두면 악보를 넘겨 보는 흐름이 끊긴다. */
.song-note { display: none; }
html.songs-notes .song-note { display: block; }

.song-note {
  padding: 14px 16px 18px;
  /* 배경이 검어지면서 해설도 어두운 카드다 - 흰 카드는 배경을 검게 한 뜻을 무른다 */
  background: #14161c;
  border-top: 1px solid #2a2f3c;
  color: #d5dae6;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  /*
   * **px 가 아니라 em 이다** (사용자 요청 2026-08-26 - 해설도 글자 크기를 조절하게).
   * 이 앱의 조절기(font-pinch.js)는 그릇(#guljasize, 이 페이지에서는 <body>)에 pt 를
   * 인라인으로 얹는다. 여기에 px 로 박아두면 그릇이 커져도 이 글만 그대로 남는다 -
   * quiz/verse_quiz.html 에서 이미 한 번 겪은 함정이다.
   * 0.9375em = 15px (그릇 기본값 12pt = 16px 기준). 예전 크기를 그대로 두려고 고른 값이다.
   * 그림은 width 가 % 라 여기에 딸려 커지지 않는다(사용자 요청: 이미지 크기는 그대로).
   */
  font-size: 0.9375em;
  line-height: 1.65;
  text-align: left;
  word-break: keep-all;
}

/* 악보+무곡 나란히 (사용자 요청). 그림에 width/height 속성이 있어서 반반이 되어도
   비율대로 자리를 미리 잡는다 - 늦게 뜨는 그림이 아래를 밀지 않는다.
   해설은 두 그림 아래로 내려야 하므로 줄을 바꾸게 둔다(wrap). */
/* justify-content: center 는 **가로에서만 뜻이 있다** - 세로에서는 두 장이 50%+50% 로
   자리를 꽉 채워 남는 것이 없다. 가로에서는 높이에 맞추느라 좁아진 만큼이 남는데, 그것을
   양쪽 바깥으로 몰아야 두 장이 가운데에서 맞붙는다(사용자 요청 2026-08-30). */
html.songs-both .song { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
html.songs-notes.songs-both .song-note { display: block; flex: 1 0 100%; }
html.songs-both .song .sheet { display: block; width: 50%; height: auto; }
html.songs-both .song .lyric { display: block; width: 50%; height: auto; }
/* 나란히일 때는 두 장이 한 곡 폭을 나눠 쓰므로 묶어둔 폭(720px)을 두 배로 푼다 -
   태블릿 가로에서 제 크기가 나온다. 좁은 화면에서 작아지는 것은 이 보기의 본성이다. */
html.songs-both #songs { max-width: 1440px; }

/* '설명' 단추. 보기(악보/무곡) 단추 왼쪽에 나란히 선다 - 360px 에서 '목록'(왼쪽 아래)과
   겹치지 않는 자리다(실측: 목록 12~84, 이 단추 206~270, 보기 274~360). */
#songs-note-btn {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* 켜져 있으면 진하게 - 지금 무엇이 켜졌는지 단추만 보고 알 수 있어야 한다 */
#songs-note-btn[aria-pressed="true"] { background: rgba(44, 67, 128, 0.92); font-weight: bold; }

/*
 * 보기 방식을 바꾸는 떠 있는 단추.
 *
 * **분할 보기의 구분선에서 겪은 것과는 사정이 다르다.** 여기 아래에는 iframe 이 없고
 * 그림뿐이라 터치를 뺏길 상대가 없다. 다만 크기는 넉넉히 준다(지침 44px).
 */
/*
 * 떠 있는 단추 셋('목록'·'설명'·보기)은 **같은 모양**이다(사용자 요청).
 * 오른쪽 둘은 한 상자에 담아 나란히 세운다 - 좌표를 따로 주면 글자가 길어질 때 겹친다
 * (실기 보고: '악보+무곡' 위에 '설명' 이 올라탔다).
 * 배경은 옅게 둔다 - 가린 악보 글씨가 비쳐야 한다는 요청이라, 흰 글자가 읽히는 선에서
 * 62% 로 맞추고 글자에 옅은 그림자를 줘 밝은 악보 위에서도 버티게 했다.
 */
#songs-btns {
  position: fixed;
  right: 12px;
  bottom: 18px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 8px;
}
#songs-toggle {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#songs-back, #songs-note-btn, #songs-toggle {
  padding: 11px 15px;
  border-radius: 999px;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  background: rgba(59, 92, 168, 0.62);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

/* 목록으로 돌아가기 - 왼쪽 아래(사용자 요청). 방문 기록 단추(#nav-trail-open, 왼쪽 아래
   8/10px)와 같은 자리를 노리므로, 기록 단추가 떠 있으면(html.nav-trail-on) 그만큼 비킨다 -
   화면 아래 자리다툼의 규칙 그대로. */
#songs-back {
  position: fixed;
  left: 12px;
  bottom: 18px;
  z-index: 9997;
  -webkit-tap-highlight-color: transparent;
}
html.nav-trail-on #songs-back { bottom: 64px; }

/* ── 곡 슬라이더 (오른쪽 세로 레일) ──────────────────────────
 *
 * 늘 떠 있고 한 번의 끌기로 곡을 옮긴다. 번호판은 "단추 -> 창 -> 숫자" 셋을 거쳐서
 * 부르는 도중에 쓰기에는 성가셨다(사용자 지적).
 *
 * **보이는 폭과 잡히는 폭을 따로 정한다.** 눈에 보이는 것(트랙)은 30px 이고, 손가락이
 * 잡는 레일은 44px 이다(지침). 차이 14px 은 그림 위로 넘어온다 - 분할 보기 구분선이
 * "자리 24px + 겹침 11px" 로 자리 잡은 것과 같은 비율이다. 겹치기만으로 메우면 실기에서
 * 지지만(그때 헤드리스로는 통과했다), 대부분을 자기 자리로 갖고 모자란 만큼만 겹치는 것은
 * 이 프로젝트에서 이미 통한 방법이다. 통째로 44px 을 비웠더니 악보가 눈에 띄게 좁았다.
 *
 * **touch-action: none 이 핵심이다.** 세로 끌기는 이 페이지의 스크롤과 같은 손짓이라,
 * 좌표로 걸러내려 들면 반은 틀린다(방문 기록에서 배운 것). 대신 레일이 자기 자리의
 * 손짓을 통째로 가져간다 - 거르는 것이 아니라 소유하는 것이다.
 *
 * 아래는 72px 에서 멈춘다. 그 밑은 '악보/무곡' 단추(bottom 18 + 44 = 62)의 자리다.
 */
#songs-rail {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 72px;
  width: 44px;          /* 잡는 폭 - 보이는 폭은 아래 트랙의 left 로 정한다 */
  z-index: 9997;
  touch-action: none;
  cursor: ns-resize;
  -webkit-tap-highlight-color: transparent;
}

#songs-rail .songs-rail-track {
  position: absolute;
  left: 14px;           /* 보이는 폭 30px. 왼쪽 14px 은 잡히기만 하는 여유다 */
  right: 0;
  /* 손잡이(28px)가 양 끝에서 반쯤 잘려 나가지 않게 안쪽으로 들인다 */
  top: 17px;
  bottom: 17px;
  /* 검은 배경에서는 어두운 파랑이 안 보인다 - 밝은 쪽으로 뒤집는다 */
  background: rgba(255, 255, 255, 0.07);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

/* 열 곡마다 겨눌 곳. 눈금이 없으면 끌어놓고 다시 고치게 된다. */
#songs-rail .songs-rail-tick {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 10px;
  line-height: 1;
  color: rgba(196, 208, 236, 0.75);
  pointer-events: none;
}

#songs-rail .songs-rail-knob {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  min-width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #3b5ca8;
  color: #fff;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/*
 * 끄는 동안에는 손가락이 손잡이를 덮는다. 그래서 숫자를 왼쪽에 따로 크게 띄운다 -
 * 안 그러면 어디로 가는지 모르는 채로 놓게 된다.
 */
#songs-rail .songs-rail-bubble {
  display: none;
  position: absolute;
  right: 40px;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(53, 82, 154, 0.95);
  color: #fff;
  font-family: -apple-system, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  font-size: 17px;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#songs-rail.songs-rail-on .songs-rail-bubble { display: block; }

#songs-rail.songs-rail-on .songs-rail-track {
  background: rgba(255, 255, 255, 0.14);
}