/* index: style layer 1. Cascade order is intentional. */

/* MOBILE-CRITICAL:start — 여기부터 :end 까지는 build-single.py 가 문서
   맨 앞으로 따로 떼어 낸다. 그림판이 문서를 다 받기 전에 제 모습으로
   서려면 이 규칙들이 그림판 markup 보다 먼저 와야 하기 때문이다. */
/* ── 그림판 위 알약 — 언어·호 ────────────────────────────────────────
   그림판은 그림 서른한 장을 세로로 이어 붙인 판이라 안에 손댈 데가 없다.
   그래서 버튼은 그림 위에 떠 있는 작은 알약으로 얹는다. 화면 위쪽에
   고정해 두면 표지 글자와 겹치므로, 스크롤을 따라 움직이지 않는
   position:fixed 로 오른쪽 위에 둔다(노치 안쪽으로 들어가지 않게
   safe-area 만큼 내린다). */
#mobile-bar[hidden] {
  display: none !important;
}
#mobile-bar {
  position: fixed;
  z-index: 2147483647;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: flex;
  gap: 8px;
  align-items: center;
  font-family:
    "Hyundai Sans Head Pro",
    Pretendard,
    -apple-system,
    sans-serif;
  transition:
    opacity 0.3s ease,
    visibility 0.3s;
}
/* 표지를 반 넘게 내리면 걷힌다(js 의 updateProgress) — 걷힌 동안은 눌리지 않는다 */
#mobile-bar.away {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* 언어 토글은 시안(Figma 131×40) 그대로(0928). 흰 1px 테두리는 안쪽 그림자로
   그려 안의 좌표가 시안과 같다 — 손잡이 3,3 · 60×34(KOR) → 67,3 · 61×34(ENG).
   어느 칸을 눌러도 뒤집힌다(js 의 changeMobileLanguage). */
#mobile-bar .m-lang {
  position: relative;
  display: block;
  width: 131px;
  height: 40px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px #fff;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}
#mobile-bar .m-lang::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 60px;
  height: 34px;
  border-radius: 17px;
  background: #0d253d;
  transition:
    transform 0.2s ease,
    width 0.2s ease;
}
#mobile-bar .m-lang.eng::before {
  width: 61px;
  transform: translateX(64px);
}
/* Vol.1 알약은 시안(Figma 89×40) 그대로 — 글자와 화살표는 시안의 윤곽선을
   인라인 SVG 로 옮겨 글꼴이 오기 전에도 같은 모양으로 선다(0928) */
#mobile-bar .m-vol {
  appearance: none;
  display: block;
  width: 89px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  cursor: pointer;
}
#mobile-bar .m-vol svg {
  display: block;
  fill: #0d253d;
}
#mobile-bar .m-lang button {
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
#mobile-bar .m-lang button + button {
  left: 65px;
}
#mobile-bar .m-lang svg {
  display: block;
  fill: #0d253d;
  opacity: 0.9;
  transition: fill 0.2s ease;
}
#mobile-bar .m-lang button.on svg {
  fill: #fff;
}
/* 영문판이 아직 없는 동안은 눌러도 바뀌지 않는다 — 그걸 눈으로 알린다 */
html:not(.m-en-ready) #mobile-bar .m-lang [data-mlang="eng"] {
  opacity: 0.38;
}

#mobile-shell[hidden] {
  display: none !important;
}
#mobile-shell {
  display: block;
  width: 100%;
  /* 폭을 좁게 묶지 않는다. 560 으로 묶었더니 그보다 넓은 폰에서 양옆에
     허연 띠가 생기고, 그 띠로 뒤쪽 그라디언트가 비쳤다. 그림판은 화면
     끝까지 채운다 — 글자는 살아 있는 <text> 라 늘려도 또렷하다.
     다만 **경계(760)까지만** 채운다. 어쩌다 넓은 창에서 그림판이 서면
     393 짜리 그림이 통째로 늘어나 모든 것이 우스꽝스럽게 커지는데,
     그 빗장이 여기 하나는 있어야 한다. 폰은 어차피 760 미만이라
     이 줄이 걸릴 일이 없다. */
  max-width: 760px;
  margin: 0 auto;
  background: #f7f7f3;
  /* 장과 장 사이에 한 줄도 비지 않게 — inline 이미지의 줄 간격을 없앤다 */
  font-size: 0;
  line-height: 0;
}
#mobile-shell .m-slice {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  vertical-align: top;
}
/* 화면 폭이 시안 폭의 정수배가 아니면 장마다 소수점 높이가 남아 사이에
   머리카락만 한 흰 줄이 보인다. 다음 장을 아주 살짝 끌어올려 덮는다. */
#mobile-shell .m-slice + .m-slice,
#mobile-shell .m-slice + .m-slot,
#mobile-shell .m-slot + .m-slice,
#mobile-shell .m-slot + .m-slot {
  margin-top: -1px;
}

/* 눈앞에 온 장은 js/00-mobile.js 가 SVG 를 문서 안에 그대로 세워 얹는다
   (손가락으로 벌려도 글씨가 또렷하게). <img> 는 아래에 그대로 두어 자리를
   잡고, 그 위에 같은 그림을 벡터로 덮는다. */
#mobile-shell .m-slot {
  position: relative;
  font-size: 0;
  line-height: 0;
}
#mobile-shell .m-slot > svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#mobile-shell .m-slot.on > img {
  visibility: hidden;
}
#mobile-shell .m-cover-title {
  position: absolute;
  left: 13.2%;
  top: 44.2%;
  width: 80%;
  z-index: 4;
  font-family:
    Pretendard,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.04em;
  color: #28415a;
  pointer-events: none;
}

/* ── 그림판 위 진행 막대 — 얼마나 남았는지 ───────────────────────────
   넓은 화면과 같은 띠를 화면 맨 위에 붙여 둔다. 그림판은 서른한 장이
   한 판으로 이어져 있어 어디쯤인지 가늠할 것이 없다 — 이 띠가 그 노릇을
   한다. 손가락 스크롤은 넓은 화면의 부드러운 활강과 달라 폭에 전이를
   주면 늘 한 박자 뒤처지므로, 전이 없이 그 자리에서 따라간다.
   ⚠ 이 규칙은 MOBILE-CRITICAL 안에 있어야 한다. 바깥의 `.progress` 는
     문서 뒤쪽에 있어, 그림판이 먼저 설 때에는 아직 오지 않았다. */
html.m-img #prog {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #5fc9a6, #9b83d6, #f09378);
  transition: none;
  z-index: 50; /* 언어·호 알약(40) 보다 위 */
  pointer-events: none;
  will-change: width;
}

/* 모바일 판이 선 동안에는 스크롤을 붙드는 장치가 하나도 없어야 한다 */
/* MOBILE-CRITICAL:end */