/* ============================================================
   pages — 사용자 사이트 화면별 스타일
   ============================================================ */

/* ============================================================
   메인 — 시안 `170:5`
   ============================================================ */

/* ---- 히어로 `170:6` ---- */
.hero { position: relative; overflow: hidden; padding-block-end: var(--sp-16); }
/* 헤더가 반투명으로 얹히므로 그만큼 위로 끌어올린다 */
.hero__inner { position: relative; padding-block-start: 116px; }

/* 장식원 — 이미지가 아니라 CSS 원이다 (시안 `170:7` `170:8` `170:9`) */
.hero__decor { position: absolute; inset: 0; pointer-events: none; }
.hero__circle { position: absolute; border-radius: 50%; }
.hero__circle--yellow { width: 230px; height: 230px; inset-inline-start: 406px; inset-block-start: -104px; background: var(--bg-yellow); }
.hero__circle--blue { width: 312px; height: 312px; inset-inline-start: 1256px; inset-block-start: -84px; background: var(--bg-blue); }
.hero__circle--orange { width: 248px; height: 248px; inset-inline-start: -174px; inset-block-start: 529px; background: var(--bg-orange); }

.hero__head { margin-block-end: var(--sp-8); }
/* 시안은 Primary/500 이지만 16px 로는 3.49:1 이라 한 단계 낮춘다 */
.hero__eyebrow {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--primary-700);
}
.hero__title { color: var(--gray-900); }

/* ---- 커버플로 캐러셀 `170:57` ----
   시안은 가운데 카드(362x486)를 키우고 좌우를 겹친다. 겹침을 음수 여백으로
   흉내내면 레이아웃이 불안정해지므로, 같은 폭으로 늘어놓고 활성 카드만 확대한다. */
.coverflow { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.coverflow::-webkit-scrollbar { display: none; }
.coverflow__track {
  display: flex;
  gap: var(--sp-6);
  padding-block: var(--sp-8);
  list-style: none;
}
.coverflow__item {
  flex: 0 0 318px;
  scroll-snap-align: center;
  transition: scale 0.25s ease;
}
.coverflow__item[aria-current="true"] { scale: 1.14; z-index: 1; position: relative; }
@media (prefers-reduced-motion: reduce) {
  .coverflow__item { transition: none; }
}

.coverflow__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-6); }
.coverflow__links { display: flex; gap: var(--sp-2); }

/* ---- 띠 배너 `170:113` ---- */
.strip { padding-block: var(--sp-16) 0; }
.strip__card {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 180px;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-xl);
  background: var(--gray-800);
  color: var(--gray-100);
}
.strip__body { flex: 1; text-align: center; }
.strip__title { font-size: var(--fs-h3); letter-spacing: var(--tracking); font-weight: var(--fw-extrabold); line-height: var(--lh-h3); }
.strip__desc { font-size: var(--fs-caption); letter-spacing: var(--tracking); line-height: var(--lh-caption); color: var(--gray-300); }

/* ---- 프로젝트 소개 `170:718` ---- */
.intro { position: relative; padding-block: var(--sp-20) 0; }
.intro__inner {
  display: grid;
  grid-template-columns: 432fr 774fr;
  gap: var(--sp-10);
  align-items: start;
  padding-block-end: 140px; /* 곡선(107px) 이 본문을 덮지 않게 */
}
.intro__col { display: flex; flex-direction: column; gap: 48px; }
.intro__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
/* 시안은 Primary/500 이지만 16px 로는 3.49:1 이라 한 단계 낮춘다 */
.intro__eyebrow { font-size: var(--fs-body);
  letter-spacing: var(--tracking); font-weight: var(--fw-bold); line-height: var(--lh-body); color: var(--primary-700); }
.intro__title { color: var(--gray-900); }
.intro__desc { font-size: var(--fs-body); letter-spacing: var(--tracking); line-height: var(--lh-body); color: var(--gray-700); }
.intro__cta { margin-block-start: var(--sp-3); }

/* 통계 카드 `170:730` — Grayscale/100 + 흰 테두리 2px + radius 10 + 그림자 */
.stats { display: flex; flex-direction: column; gap: 20px; }
.stats__list { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; }
.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 20px;
  background: var(--gray-100);
  border: 2px solid var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.stat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-bold);
  line-height: var(--lh-caption);
  color: var(--gray-600);
}
/* 라벨 앞 점 — 6px 원 (시안 `170:733`) */
.stat__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); flex-shrink: 0; }
.stat__value { display: flex; align-items: baseline; gap: var(--sp-1); }
.stat__value strong {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h1);
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.stat__unit { font-size: var(--fs-caption); letter-spacing: var(--tracking); font-weight: var(--fw-medium); line-height: var(--lh-caption); color: var(--gray-600); }
.stats__note { font-size: var(--fs-caption); letter-spacing: var(--tracking); line-height: var(--lh-caption); color: var(--gray-600); }

/* 소개 영상 — 주황 오프셋 카드 위에 썸네일이 얹힌다 (시안 `170:749`) */
.intro__media { position: relative; }
.intro__media::before {
  content: "";
  position: absolute;
  inset-block-start: var(--sp-6);
  inset-inline: var(--sp-6) calc(var(--sp-6) * -1);
  block-size: 100%;
  border-radius: var(--radius-xl);
  background: var(--bg-orange);
}
.intro__video {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  aspect-ratio: 774 / 418;
  border-radius: var(--radius-xl);
  background: var(--gray-300);
  overflow: hidden;
}
.intro__play {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  background: transparent url("/assets/img/deco-play.svg") no-repeat center / contain;
}
.intro__play:disabled { cursor: not-allowed; }
.intro__video-note { font-size: var(--fs-caption); letter-spacing: var(--tracking); line-height: var(--lh-caption); color: var(--gray-700); }

/* 섹션 사이 곡선 `170:758` — 폭에 맞춰 늘어난다 */
.intro__wave {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 107px;
  background: url("/assets/img/deco-wave.svg") no-repeat center bottom / 100% 100%;
}

/* ---- 주황 CTA `170:157` ----
   띠 자체는 시안대로 #f45102 를 유지한다(장식 면). 28px ExtraBold 제목은
   큰 글씨라 흰색으로도 3:1 을 넘지만, 16px 작은 글씨는 3.49:1 로 미달이라
   대비표가 권장하는 조합(주황 배경 + 진한 글씨)을 쓴다. */
.recruit { padding-block: 0 var(--sp-20); background: var(--bg-orange); }
/* 시안은 주황 띠가 푸터에 바로 닿는다. 푸터의 기본 상단 여백을 이 화면에서만 없앤다. */
body:has(.recruit) .footer { margin-block-start: 0; }
.recruit__head { text-align: center; margin-block-end: var(--sp-10); }
.recruit__eyebrow { font-size: var(--fs-body); letter-spacing: var(--tracking); font-weight: var(--fw-bold); line-height: var(--lh-body); color: var(--gray-900); }
.recruit__title { color: var(--gray-100); margin-block: var(--sp-1); }
.recruit__sub { font-size: var(--fs-body); letter-spacing: var(--tracking); line-height: var(--lh-body); color: var(--gray-900); }

.recruit__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.recruit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 240px;
  padding: 33px 38px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.recruit-card__body { display: flex; flex-direction: column; gap: 14px; }
.recruit-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.recruit-card__title { font-size: var(--fs-h3); letter-spacing: var(--tracking); font-weight: var(--fw-extrabold); line-height: var(--lh-h3); }
.recruit-card__desc { font-size: var(--fs-body); letter-spacing: var(--tracking); line-height: var(--lh-body); }

.recruit-card--light { background: var(--gray-100); }
.recruit-card--light .recruit-card__title { color: var(--gray-900); }
.recruit-card--light .recruit-card__desc { color: var(--gray-700); }

/* 시안은 Primary/400(#fa6a1e)이지만 흰 16px 본문이 2.94:1 로 미달이다.
   글씨가 올라가는 채움면이라 Primary/700 으로 한 단계 낮췄다 (5.57:1). */
.recruit-card--filled { background: var(--primary-700); }
.recruit-card--filled .recruit-card__title { color: var(--gray-100); }
.recruit-card--filled .recruit-card__desc { color: var(--gray-200); }
.recruit-card .btn { align-self: flex-start; }

@media (max-width: 1024px) {
  .intro__inner { grid-template-columns: 1fr; }
  .intro__media::before { display: none; }
  .recruit__cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero__inner { padding-block-start: var(--sp-16); }
  .hero__circle--blue,
  .hero__circle--yellow { display: none; }
  /* 본문을 1행에 펼치고 화살표 2개를 2행에 나란히 놓는다 */
  .strip__card { display: grid; grid-template-columns: auto auto; justify-content: center; gap: var(--sp-4); }
  .strip__body { grid-column: 1 / -1; grid-row: 1; }
  .recruit-card { padding: var(--sp-6); }
}


/* ---- 그림책 상세 ---- */
.book-detail { display: grid; gap: var(--sp-10); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .book-detail { grid-template-columns: 1fr; } }
.book-detail__cover { aspect-ratio: 190 / 260; background: var(--gray-200); border-radius: var(--radius-xl); overflow: hidden; }
.book-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.book-detail__title { font-size: var(--fs-h1); letter-spacing: var(--tracking); margin-block-end: var(--sp-2); }
.book-detail__sub { color: var(--text-muted); margin-block-end: var(--sp-6); }
.book-detail__desc { white-space: pre-line; margin-block: var(--sp-6); }

/* ---- 그림책 뷰어 (지시서 4.7 · 5.2 — 동작은 pages/viewer.js) ---- */
/* 시안 `818:1168` 데스크톱 · `950:9361` 모바일 세로 · `1001:10282` 모바일 가로 · `1001:12129` 미리보기 끝 */
/* 헤더·푸터 없이 화면 전체를 쓴다. 페이지 자체는 스크롤되지 않고 확대한 책만 스크롤러 안에서 움직인다. */
.viewer-page { overflow: hidden; background: var(--nav); }
/* 열을 minmax(0, 1fr) 로 둬야 확대한 책이 열을 넓히지 않고 스크롤러 안에서 넘친다.
   공유 띠는 무대와 같은 칸에 겹쳐 머리말 바로 아래에 붙인다. */
.viewer {
  position: fixed; inset: 0;
  background: var(--nav); color: var(--gray-100);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
}
.viewer__bar {
  grid-row: 1; grid-column: 1; position: relative; z-index: 2;
  display: flex; align-items: center; gap: 30px;
  padding: 11px var(--gutter);
  background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header));
  border-block-end: 1px solid var(--gray-700);
}
.viewer__icon-btn {
  flex: none; display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0;
  color: var(--gray-100);
}
.viewer__icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.viewer__icon-btn:disabled { opacity: 0.35; }
.viewer__icon-btn[aria-expanded="true"] { background: rgba(252, 252, 252, 0.2); } /* 시안 `1001:10474` */
.viewer__heading { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
.viewer__title {
  font-size: var(--fs-body); letter-spacing: var(--tracking); font-weight: var(--fw-bold); line-height: 28px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.viewer__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-inline-size: 0;
  font-size: var(--fs-caption); letter-spacing: var(--tracking); font-weight: var(--fw-medium); line-height: 24px;
  color: var(--gray-500);
}
.viewer__meta > span:empty { display: none; }
.viewer__authors { color: var(--gray-200); }
.viewer__meta-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.viewer__meta > span:not(:empty) ~ .viewer__meta-item::before { content: ""; inline-size: 1px; block-size: 10px; background: var(--gray-600); }
.viewer__tools { display: flex; align-items: center; gap: 24px; margin-inline-start: auto; }
.viewer__zoom { display: flex; align-items: center; gap: 8px; }
.viewer__zoom-value {
  margin-inline-end: 8px; padding: 0; background: none; border: 0;
  color: var(--gray-500); font-size: var(--fs-caption); letter-spacing: var(--tracking); line-height: 24px;
  font-variant-numeric: tabular-nums;
}
.viewer__zoom-value:hover:not(:disabled) { color: var(--gray-100); }
.viewer__zoom-value:disabled { cursor: default; }
/* 가로로 보기 버튼 — 휴대폰에서만 보인다. 이 버튼으로 가로가 된 동안은 눌린 모양으로 '세로로 보기'가 된다 */
.viewer__rotate { display: none; }
.viewer__rotate[aria-pressed="true"] { background: rgba(252, 252, 252, 0.2); }
.viewer[data-rotate] .viewer__rotate { display: grid; } /* 휴대폰보다 큰 화면(태블릿)에서 돌렸을 때도 되돌릴 수 있게 */

/* 공유 띠 — 시안 `1001:10546` (머리말 아래 8px, 오른쪽 정렬) */
.viewer__share {
  grid-row: 2; grid-column: 1; z-index: 3; align-self: start; justify-self: end;
  display: flex; gap: var(--sp-2);
  margin: var(--sp-2) var(--gutter) 0; padding: var(--sp-2) var(--sp-5);
  background: rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius);
  backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header));
}
.viewer__share[hidden] { display: none; }
.viewer__share-btn { display: block; padding: 0; background: none; border: 0; border-radius: 50%; }
.viewer__share-btn img { display: block; }

/* 무대 — 좌우 화살표 사이에 유리판(책 테두리)을 두고 그 안에 책을 맞춘다 */
.viewer__stage {
  grid-row: 2; grid-column: 1; position: relative; min-block-size: 0;
  display: flex; align-items: center; gap: clamp(var(--sp-4), 12.5vw, 180px); /* 1440 에서 180 */
  padding: 30px var(--gutter) var(--sp-4);
}
.viewer__nav {
  flex: none; display: grid; place-items: center;
  inline-size: 48px; block-size: 48px;
  background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0;
}
.viewer__nav--prev img { transform: scaleX(-1); }
.viewer__nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.viewer__nav:disabled { opacity: 0.3; }
/* 슬롯은 남은 자리를 다 차지하고 크기 기준이 된다. 유리판은 책에 딱 맞게 감싼다 */
.viewer__frame-slot { flex: 1; align-self: stretch; min-inline-size: 0; display: grid; place-items: center; touch-action: none; /* 책 둘레에서 밀어도 넘긴다 */ }
.viewer__frame {
  padding: 20px 50px;
  background: rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius);
  backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header));
}
.viewer__scroller {
  position: relative; /* 책의 offsetLeft 기준 — 확대 기준점 보정에 쓴다 */
  display: flex;
  inline-size: var(--fit-w, 0); block-size: var(--fit-h, 0);
  overflow: auto;
  overscroll-behavior: contain;
  /* 맞춤 상태에서는 밀기·두 손가락 확대를 viewer.js 가 모두 받는다. 확대 중에는 한 손가락 이동을 브라우저에 맡긴다 */
  touch-action: none;
}
/* 맞춤 상태에서는 넘김 중 기울어진 장이 잠깐 스크롤바를 띄우지 않게 자른다 */
.viewer__scroller:not([data-zoomed]) { overflow: hidden; }
.viewer__scroller[data-zoomed] { cursor: grab; touch-action: pan-x pan-y; }
.viewer__scroller[data-panning] { cursor: grabbing; user-select: none; }
/* margin: auto 는 넘칠 때 왼쪽이 잘리지 않는 가운데 정렬이다 (place-items: center 는 잘린다) */
.viewer__book {
  position: relative; flex: none; display: flex; margin: auto;
  perspective: calc(var(--page-w, 500px) * 5);
  user-select: none; -webkit-user-select: none; /* 마우스로 밀 때 글자·캔버스가 선택되지 않게 */
}
.viewer__slot { position: relative; inline-size: var(--page-w, 0); block-size: var(--page-h, 0); }
.viewer__slot[hidden] { display: none; }
.viewer__page { position: absolute; inset: 0; }
.viewer__page canvas { display: block; inline-size: 100%; block-size: 100%; }
.viewer__page--paper { background: var(--white); }
/* 첫 펼침 왼편 로고 면 — 시안 `818:3482` (394×540 면에 380×37 로고, 왼쪽 붙여 세로 가운데) */
.viewer__page--brand { background: var(--gray-100); }
.viewer__brand-logo {
  position: absolute; inset-inline-start: 0; inset-block-start: 50%;
  inline-size: calc(380 / 394 * 100%); block-size: auto;
  translate: 0 -50%;
}

/* 책등 쪽 그늘 — 펼침 2쪽일 때만. 폭 4% · 진하기 11% (처음 8% · 22% 에서 절반으로 줄였다).
   넘어가는 장의 면에도 같은 그늘을 그려 넘김 중에 사라졌다 생기지 않게 한다.
   다음 넘김 장은 앞면이 오른쪽 면, 뒷면이 왼쪽 면이고 이전 넘김 장은 그 반대다 */
.viewer__book[data-mode="spread"] :is(.viewer__slot, .viewer__leaf-face) .viewer__page:not(.viewer__page--empty, .viewer__page--brand)::after {
  content: ""; position: absolute; inset-block: 0; inline-size: 4%; pointer-events: none;
}
.viewer__book[data-mode="spread"] :is(
  .viewer__slot[data-slot="0"], .viewer__leaf--next .viewer__leaf-face--back, .viewer__leaf--prev .viewer__leaf-face--front
) .viewer__page::after {
  inset-inline-end: 0;
  background: linear-gradient(to left, color-mix(in srgb, var(--gray-900) 11%, transparent), transparent);
}
.viewer__book[data-mode="spread"] :is(
  .viewer__slot[data-slot="1"], .viewer__leaf--next .viewer__leaf-face--front, .viewer__leaf--prev .viewer__leaf-face--back
) .viewer__page::after {
  inset-inline-start: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--gray-900) 11%, transparent), transparent);
}

/* 넘어가는 한 장. 앞면은 지금 쪽, 뒷면은 넘긴 뒤 반대편에 놓일 쪽 */
.viewer__leaf {
  position: absolute; inset-block: 0; z-index: 1;
  inline-size: var(--page-w);
  transform-style: preserve-3d;
  pointer-events: none;
}
.viewer__leaf--next { inset-inline-start: calc(100% - var(--page-w)); transform-origin: left center; }
.viewer__leaf--prev { inset-inline-start: 0; transform-origin: right center; }
.viewer__leaf--single { inset-inline-start: 0; transform-origin: left center; }
.viewer__leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.viewer__leaf-face--back { transform: rotateY(180deg); }
.viewer__leaf .viewer__page { box-shadow: var(--shadow-lg); }
.viewer__leaf-shade {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--gray-900) 45%, transparent));
}
/* 그늘은 책등 쪽이 밝다. 이전 넘김은 책등이 반대편이라 뒤집는다 */
.viewer__leaf--prev .viewer__leaf-shade { transform: scaleX(-1); }

.viewer__loading {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; justify-items: center; gap: var(--sp-3);
  background: var(--nav);
  color: var(--gray-400); font-size: var(--fs-caption); letter-spacing: var(--tracking);
}
.viewer__loading[hidden] { display: none; }
.viewer__load-track { inline-size: 200px; block-size: 4px; background: var(--gray-700); border-radius: var(--radius-pill); overflow: hidden; }
.viewer__load-bar { block-size: 100%; inline-size: 0; background: var(--gray-500); transition: inline-size 0.2s ease; }

/* 발판 — 데스크톱은 쪽 표시 알약 아래 슬라이더, 모바일은 슬라이더 오른쪽에 쪽 표시 */
.viewer__foot {
  grid-row: 3; grid-column: 1; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 25px;
  padding: 0 var(--gutter) 26px;
}
.viewer__count {
  padding: 6px 22px;
  background: rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius);
  color: var(--gray-300); font-size: var(--fs-caption); letter-spacing: var(--tracking); font-weight: var(--fw-medium); line-height: 24px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.viewer__count-total { color: var(--gray-500); }
/* 쪽 이동 슬라이더 — 채운 길이는 viewer.js 가 --fill 로 넘긴다 */
.viewer__slider {
  --track-h: 6px; --thumb: 24px;
  -webkit-appearance: none; appearance: none;
  inline-size: 100%; block-size: var(--thumb); margin: 0; padding: 0;
  background: transparent; cursor: pointer;
}
.viewer__slider:disabled { cursor: default; }
.viewer__slider::-webkit-slider-runnable-track {
  block-size: var(--track-h); border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--gray-500) var(--fill, 0%), var(--gray-700) var(--fill, 0%));
}
.viewer__slider::-moz-range-track { block-size: var(--track-h); border-radius: var(--radius-pill); background: var(--gray-700); }
.viewer__slider::-moz-range-progress { block-size: var(--track-h); border-radius: var(--radius-pill); background: var(--gray-500); }
.viewer__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  inline-size: var(--thumb); block-size: var(--thumb); margin-block-start: calc((var(--track-h) - var(--thumb)) / 2);
  border: 0; border-radius: 50%; background: var(--gray-200); box-shadow: var(--shadow);
}
.viewer__slider::-moz-range-thumb {
  inline-size: var(--thumb); block-size: var(--thumb);
  border: 0; border-radius: 50%; background: var(--gray-200); box-shadow: var(--shadow);
}
.viewer__slider:focus-visible { outline: 2px solid var(--gray-100); outline-offset: 4px; }

/* 모바일 공통 — 버튼 32px, 머리말 글씨 12px, 화살표·유리판 없이 책만, 발판은 한 줄 */
@media (max-width: 768px) and (orientation: portrait), (orientation: landscape) and (max-height: 500px) {
  .viewer__bar { gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
  .viewer__icon-btn { inline-size: 32px; block-size: 32px; }
  .viewer__tools { gap: var(--sp-4); }
  .viewer__meta { font-size: var(--fs-small); letter-spacing: var(--tracking-small); line-height: 20px; }
  .viewer__share { margin-inline: var(--sp-5); }
  /* 책을 화면 전체에 맞추고 머리말·발판을 위에 겹친다. 그래야 가운데를 눌러 숨겼을 때 빈 줄이 남지 않는다 */
  .viewer__stage { grid-row: 1 / -1; gap: 0; padding: 0; }
  .viewer__nav { display: none; }
  .viewer__rotate { display: grid; }
  .viewer__frame { padding: 0; background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .viewer__foot {
    flex-direction: row-reverse; gap: var(--sp-6);
    padding: var(--sp-4) var(--sp-5) 30px;
    background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header));
  }
  .viewer__count { padding: 0; background: none; border: 0; border-radius: 0; }
  .viewer__slider { --track-h: 4px; --thumb: 16px; flex: 1; min-inline-size: 0; }
}
/* 모바일 세로 — 한 쪽씩. 확대 버튼은 빼고(두 손가락 확대는 된다) 아동명은 한 줄을 다 쓴다 */
@media (max-width: 768px) and (orientation: portrait) {
  .viewer__heading { gap: var(--sp-1); }
  .viewer__zoom { display: none; }
  .viewer__meta { row-gap: 2px; }
  .viewer__authors { flex-basis: 100%; }
  .viewer__authors + .viewer__meta-item::before { display: none; }
}
/* 돌려 그리기 — 전체 화면·방향 고정이 막힌 기기(아이폰 사파리)에서 뷰어를 90° 돌려 가로로 보인다.
   브라우저는 여전히 세로라 위의 세로 규칙이 걸린다. 세로 전용 규칙은 되돌리고 가로 규칙을 얹는다.
   좌표 변환은 viewer.js 의 toLocal() 과 짝이다 — 둘 중 하나를 바꾸면 함께 고친다 */
[data-viewer-rotated] .viewer {
  inset: 0 auto auto 0;
  inline-size: 100vh; inline-size: 100dvh;
  block-size: 100vw; block-size: 100dvw;
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}
[data-viewer-rotated] .viewer__heading { gap: 2px; }
[data-viewer-rotated] .viewer__zoom { display: flex; }
[data-viewer-rotated] .viewer__authors { flex-basis: auto; }
[data-viewer-rotated] .viewer__authors + .viewer__meta-item::before { display: block; }
[data-viewer-rotated] .viewer__stage { grid-row: 1 / -1; }
[data-viewer-rotated] .toast-area {
  inset: var(--sp-6) auto auto var(--sp-6);
  transform-origin: top left; transform: rotate(90deg) translateY(-100%);
}

/* 휴대폰 몰입 — 가운데를 누르면 머리말·발판을 숨기고 책만 보인다 (시안 `1001:9951`, 세로에도 같게) */
.viewer__bar, .viewer__foot, .viewer__share { transition: opacity 0.2s ease, visibility 0s; }
.viewer[data-immersive] :is(.viewer__bar, .viewer__foot, .viewer__share) {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}

/* 미리보기 끝 바텀시트 — 시안 `1001:12129` */
.viewer-sheet {
  position: fixed; inset: auto 0 0; margin: 0 auto;
  inline-size: 100%; max-inline-size: 480px; max-block-size: 100dvh;
  padding: var(--sp-6) var(--sp-5) 30px;
  border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--gray-100); color: var(--text);
  box-shadow: 0 -12px 20px rgba(0, 0, 0, 0.12);
  overflow: auto;
}
.viewer-sheet[open] { display: flex; flex-direction: column; animation: viewer-sheet-up 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.viewer-sheet::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(var(--blur-header)); -webkit-backdrop-filter: blur(var(--blur-header)); }
@keyframes viewer-sheet-up { from { translate: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .viewer-sheet[open] { animation: none; } }
.viewer-sheet__handle {
  position: absolute; inset-block-start: var(--sp-4); left: 50%; translate: -50% 0;
  inline-size: 50px; block-size: 8px; border-radius: var(--radius-pill); background: var(--gray-400);
}
.viewer-sheet__close {
  align-self: flex-end; display: grid; place-items: center;
  inline-size: 32px; block-size: 32px; margin: -8px -8px 0;
  padding: 0; background: none; border: 0;
}
.viewer-sheet__title {
  font-size: 1.25rem; /* mobile/Headline2 — 데스크톱에서도 시트는 모바일 크기 */
  letter-spacing: var(--tracking); font-weight: var(--fw-extrabold); line-height: 32px; color: var(--gray-900);
}
.viewer-sheet__title:focus { outline: none; }
.viewer-sheet__desc { margin-block-start: var(--sp-2); font-size: var(--fs-caption); letter-spacing: var(--tracking); line-height: 24px; color: var(--gray-700); }
.viewer-sheet__illust { display: grid; place-items: center; block-size: 226px; margin-block-start: var(--sp-6); }
.viewer-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-block-start: var(--sp-10); }
.viewer-sheet__btn { padding: 10px; border-radius: 0; line-height: 28px; }
.viewer-sheet__btn.btn--ghost { border-color: var(--gray-500); }
/* 가로 화면은 높이가 390 남짓이라 일러스트를 빼야 시트가 들어간다 */
@media (max-height: 500px) {
  .viewer-sheet__illust { display: none; }
  .viewer-sheet__actions { margin-block-start: var(--sp-6); }
}
/* 돌려 그리는 중에는 시트도 같이 돌려 가로 화면의 아래쪽 가운데에 붙인다 */
[data-viewer-rotated] .viewer-sheet {
  inset: 0 auto auto 0; margin: 0;
  inline-size: min(480px, 100vh); inline-size: min(480px, 100dvh);
  max-block-size: 100vw; max-block-size: 100dvw;
  transform-origin: top left;
  transform: rotate(90deg) translate(calc((100dvh - 100%) / 2), -100%);
  animation: none;
}
[data-viewer-rotated] .viewer-sheet__illust { display: none; }
[data-viewer-rotated] .viewer-sheet__actions { margin-block-start: var(--sp-6); }

/* ---- 지부별 모집 상태 (지시서 6.1) ---- */
.branch-status { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.branch-status__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.branch-status__item[data-status="CLOSED"] { background: var(--gray-200); color: var(--text-muted); }
.branch-status__name { font-weight: var(--fw-bold); }

/* ---- 신청 완료 ---- */
.done { text-align: center; padding-block: var(--sp-16); }
.done__mark { font-size: 3rem; line-height: 1; margin-block-end: var(--sp-5); }

/* ---- 목록 (공지 · 홍보자료) ---- */
.post-list { border-block-start: 1px solid var(--border); }
.post-list__item { display: flex; gap: var(--sp-4); align-items: baseline; padding: var(--sp-5) var(--sp-2); border-block-end: 1px solid var(--border); }
.post-list__title { flex: 1; font-weight: var(--fw-bold); color: var(--text); text-decoration: none; }
.post-list__title:hover { color: var(--primary-700); text-decoration: underline; }
.post-list__date { font-size: var(--fs-caption); letter-spacing: var(--tracking); color: var(--text-muted); white-space: nowrap; }

/* ---- 본문 (소개 · 약관 · 상세) ---- */
.prose { max-width: 70ch; }
.prose h2 { margin-block: var(--sp-10) var(--sp-4); }
.prose h3 { margin-block: var(--sp-8) var(--sp-3); }
.prose p { margin-block-end: var(--sp-4); }
.prose ul { list-style: disc; padding-inline-start: var(--sp-6); margin-block-end: var(--sp-4); }
.prose li { margin-block-end: var(--sp-2); }

/* ---- 우수작 영상 (지시서 7 — 포맷·편수 미확정) ---- */

/* ---- 오류 화면 ---- */
.error-page { text-align: center; padding-block: var(--sp-20); }
.error-page__code { font-size: var(--fs-h1); letter-spacing: var(--tracking); font-weight: var(--fw-bold); color: var(--primary-500); }

/* ============================================================
   그림책 아카이브 — 시안 `173:419`
   ============================================================ */

/* ---- 빵부스러기 `173:465` ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--gray-700);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { font-weight: var(--fw-bold); color: var(--gray-900); }
/* 구분 화살표 — 항목 사이에만 넣는다 */
.breadcrumb > * + *::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-inline-end: var(--sp-2);
  vertical-align: -1px;
  background: var(--gray-500);
  -webkit-mask: url("/assets/img/icon-chevron.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-chevron.svg") no-repeat center / contain;
  rotate: 180deg;
}
.breadcrumb__home { display: inline-grid; place-items: center; width: 20px; height: 20px; }
.breadcrumb__home-icon {
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-home.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-home.svg") no-repeat center / contain;
}

/* ---- 우수작 `173:475` — 774 / 318 / 204, 간격 24 ---- */
.featured { margin-block-end: var(--sp-10); }
.featured__body {
  display: grid;
  grid-template-columns: 774fr 318fr 204fr;
  gap: var(--sp-6);
  align-items: stretch;
}
.featured__card { display: flex; flex-direction: column; gap: var(--sp-3); }
.featured__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.featured__award {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h3);
  color: var(--primary-700);
}
.featured__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h3);
  color: var(--gray-900);
}
/* 제목 앞 구분 막대 — 시안의 "우수작 | 너의 집은 어디야?" */
.featured__title::before { content: "|"; margin-inline-end: var(--sp-2); color: var(--gray-400); font-weight: var(--fw-medium); }
.featured__meta { font-size: var(--fs-caption); letter-spacing: var(--tracking); font-weight: var(--fw-bold); line-height: var(--lh-caption); color: var(--gray-800); }
.featured__desc { font-size: var(--fs-body); letter-spacing: var(--tracking); line-height: var(--lh-body); color: var(--gray-700); }
.featured__nav { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-block-start: auto; }

/* 표지 일러스트 — 발주처 확정 파일 대기 (지시서 13-7) */
.featured__art { border-radius: var(--radius-xl); background: var(--gray-200); min-height: 300px; }
.featured__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-6);
  border-radius: var(--radius-xl);
  background: var(--bg-orange);
  color: var(--gray-100);
  text-align: center;
}
/* 28px ExtraBold 이상은 큰 글씨라 주황 위 흰 글씨가 3:1 기준을 통과한다 */
.featured__panel-label { font-size: var(--fs-h4);
  letter-spacing: var(--tracking); font-weight: var(--fw-bold); line-height: var(--lh-h4); }
.featured__panel-count { font-size: var(--fs-h2); letter-spacing: var(--tracking); font-weight: var(--fw-extrabold); line-height: var(--lh-h2); }
.featured__panel-count span { color: rgba(255, 255, 255, 0.7); }

/* ---- 검색 · 필터 `173:909` ---- */
.archive-filters { display: grid; gap: var(--sp-4); margin-block-end: var(--sp-6); }
.searchbar__clear {
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-x.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-x.svg") no-repeat center / contain;
}
.searchbar__submit {
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-search.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-search.svg") no-repeat center / contain;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding: 18px 30px;
  background: var(--gray-200);
  border-radius: var(--radius-lg);
}
.filter-bar__group,
.filter-bar__sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
/* 세로 구분선은 시안이 벡터로 내보내지만 CSS 로 그린다 (논리 속성 유지) */
.filter-bar__group > * + *,
.filter-bar__sort > * + * { padding-inline-start: var(--sp-6); border-inline-start: 1px solid var(--gray-400); }

.filter-bar__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--gray-800);
}
.filter-bar__reset-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("/assets/img/icon-reset.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-reset.svg") no-repeat center / contain;
}

.filter-bar__field { position: relative; width: 200px; }
/* 셰브론 — background-image 는 회전할 수 없어 GNB 와 같이 의사 요소 + mask 로 그린다 */
.filter-bar__field::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: var(--gray-600);
  -webkit-mask: url("/assets/img/icon-chevron.svg") no-repeat center / contain;
  mask: url("/assets/img/icon-chevron.svg") no-repeat center / contain;
  rotate: -90deg;
}
.filter-bar__field:has(:disabled)::after { background: var(--gray-500); }
/* 시안은 테두리 없는 텍스트 + 셰브론이다. 네이티브 select 의 화살표를 끄고
   배경 이미지로 셰브론을 그린다. 색은 시안의 Grayscale/500 이 2.4:1 이라
   보조 텍스트 하한선인 --gray-600 으로 올렸다. */
.filter-bar__select {
  width: 100%;
  padding: 0;
  padding-inline-end: var(--sp-5);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--gray-600);
  appearance: none;
  color: var(--gray-800);
  font-weight: var(--fw-bold);
}
/* 아직 아무것도 고르지 않았으면 안내문처럼 연하게 */
/* 채움이 --gray-200 이라 gray-600 은 4.43:1 로 미달이다 */
.filter-bar__select:has(option[value=""]:checked) { color: var(--gray-700); font-weight: var(--fw-medium); }
.filter-bar__select:disabled { color: var(--gray-500); font-weight: var(--fw-medium); cursor: not-allowed; }

.filter-bar__sort-btn {
  padding: 0;
  background: none;
  border: 0;
  font-size: var(--fs-body);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body);
  color: var(--gray-700);
}
.filter-bar__sort-btn[aria-pressed="true"] { color: var(--gray-800); }
.filter-bar__sort-btn:disabled { color: var(--gray-500); cursor: not-allowed; }

/* ---- 목록 ---- */
.archive-count {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking);
  font-weight: var(--fw-medium);
  line-height: var(--lh-caption);
  color: var(--gray-700);
}
.archive-more { display: flex; justify-content: center; margin-block-start: var(--sp-10); }
.archive-more__btn { padding: 5px 18px; border: 0; font-size: var(--fs-body); letter-spacing: var(--tracking); line-height: var(--lh-body); }

@media (max-width: 1024px) {
  .featured__body { grid-template-columns: 1fr 204fr; }
  .featured__art { display: none; }
}
@media (max-width: 768px) {
  .featured__body { grid-template-columns: 1fr; }
  .filter-bar { padding: var(--sp-4); }
  .filter-bar__group > * + *,
  .filter-bar__sort > * + * { padding-inline-start: 0; border-inline-start: 0; }
  .filter-bar__group,
  .filter-bar__sort { gap: var(--sp-3); }
  .filter-bar__field { width: 100%; }
}