/* MO.1 Flipbook 뷰어 + 그리드 */

/* ── 그리드 (전후사진 페이지 · 기존 Elementor 배치 재현) ── */
.mo1fb-grid {
	box-sizing: border-box;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-items: center;
	gap: 80px 40px;                          /* 위아래 간격을 넓게(80), 좌우는 40 유지 */
}
@media (max-width: 767px) {
	.mo1fb-grid { grid-template-columns: 1fr; }
}

/* ── 표지 썸네일 ── */
.mo1fb-cover-btn {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: transform .25s ease, filter .25s ease;
}
.mo1fb-cover-btn:hover { transform: translateY(-4px); }
.mo1fb-cover-img {
	height: 315px;
	width: auto;
	max-width: 100%;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
	border-radius: 3px;
}
@media (max-width: 767px) {
	.mo1fb-cover-img { height: 250px; }
}

/* ── 표지 합성(템플릿) — 전면 그리드·포털 목록·편집 미리보기 공용 ──
 * assets/img/cover-template.png(1676×2096) 실측 좌표를 % 로 환산:
 *   투명 창    x59 y448 w1552 h1544 → left 3.52%  top 21.374%  w 92.601%  h 73.664%
 *   제목(검정) x100(살짝 안쪽 패딩), 사진 위 베이지 영역(y0~448) 세로 중간 y224 → top 10.687%
 *   문구(흰색) x179, 블록 하단 y1881(창 아래 110px 여백)     → left 10.68%  bottom 10.26%
 * 글자 크기는 컨테이너 폭 기준(cqw) — 몇 px 로 그려지든 실물 표지(1676px 기준 77px/75px)와
 * 같은 비율이 유지된다. viewer.js 의 canvas 합성(TPL 상수)과 반드시 같은 값을 쓸 것. */
.mo1fb-cover-tpl {
	position: relative;
	display: block;
	height: 315px;
	aspect-ratio: 1676 / 2096;
	container-type: inline-size;
	background: #fffaed;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
	overflow: hidden;
	line-height: 0;
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
/* 창 = 클리핑 래퍼. 사진의 실제 크기·위치는 JS(fitCoverPhotos)가 fit 값으로 계산해
 * canvas(flattenCover)와 동일한 크롭을 재현한다. JS 미동작 시 아래 기본값 = 중앙 크롭. */
.mo1fb-cover-tpl-photowrap {
	position: absolute;
	left: 3.52%; top: 21.374%;
	width: 92.601%; height: 73.664%;
	overflow: hidden;
}
.mo1fb-cover-tpl-photo {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
}
.mo1fb-cover-tpl-photo:not([src]) { visibility: hidden; }   /* 편집 미리보기: 사진 선택 전 */
.mo1fb-cover-tpl-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }   /* 편집 미리보기에서 사진 드래그가 통과되도록 */
.mo1fb-cover-tpl-title,
.mo1fb-cover-tpl-label { pointer-events: none; text-align: left; font-weight: 700; }
.mo1fb-cover-tpl-title {
	position: absolute;
	left: 5.967%;                            /* x100 — 창(x59)보다 살짝 안쪽 패딩 */
	top: 10.687%;                            /* 사진 위쪽 베이지 영역(y0~448)의 세로 중간 y224 */
	transform: translateY(-50%);
	color: #111;
	line-height: 1;
	white-space: nowrap;                     /* 한 줄 — 길면 JS(fitCoverTitles)가 폭에 맞게 축소 */
	font-size: 19px;                         /* cqw 미지원 구형 브라우저 폴백(그리드 252px 기준) */
	font-size: 7.637cqw;                     /* = 128px / 1676px */
}
.mo1fb-cover-tpl-label {
	position: absolute;
	left: 10.68%; bottom: 10.26%;
	color: #fff;
	line-height: 1.66;
	white-space: pre-line;                   /* 입력한 줄바꿈 그대로 */
	font-size: 14px;
	font-size: 5.609cqw;                     /* = 94px / 1676px */
}
/* 전면 그리드(/before-and-after/)에서는 책자를 큼직하게.
 * (기본 315px 는 큰 화면에서 너무 작았음. 포털 목록·편집 미리보기는 각자 크기 유지)
 * ⚠ 여기서 width:100% 는 못 쓴다 — 부모(버튼)가 내용 크기를 따르는 구조라 순환이 되어 0 으로 붕괴.
 *   뷰포트 기준(vw)으로 잡되 2열 열 폭을 넘지 않게 상한을 둔다. */
.mo1fb-grid .mo1fb-cover-tpl,
.mo1fb-grid .mo1fb-cover-img {
	height: auto;
	width: min(378px, 38vw);            /* 420px 의 90% */
}
@media (max-width: 767px) {
	.mo1fb-grid .mo1fb-cover-tpl,
	.mo1fb-grid .mo1fb-cover-img { width: min(306px, 77vw); }   /* 340px 의 90% */
}

/* ── 라이트박스 ── */
.mo1fb-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(99, 99, 99, .26);       /* 기존 real3d lightbox 배경과 동일 */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mo1fb-stage {
	position: relative;
	width: min(92vw, 1100px);
	height: min(84vh, 700px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── 책 펼침 ── */
.mo1fb-spread {
	position: relative;
	/* 책 규격을 표지 템플릿 비율(1676×2096 두 장)로 '정확히' 고정.
	   이전(height:100% + max-width:100%)에는 무대가 좁으면 높이가 그대로 남아
	   페이지가 세로로 늘어나고, 표지 위아래로 흰 띠가 삐져나왔다
	   (모바일 무대 96vw×64vw 에서 특히 심함). 폭을 비율로 계산해 항상 꽉 맞춘다. */
	width: min(100%, calc(min(84vh, 700px) * 3352 / 2096));
	aspect-ratio: 3352 / 2096;
	transition: transform .5s ease;
}
@media (max-width: 767px) {
	/* 세로 폰에선 폭이 병목 → 사실상 98vw. 가로 폰에선 높이(78vh) 기준으로 잡힌다 */
	.mo1fb-spread { width: min(98%, calc(78vh * 3352 / 2096)); }
}
.mo1fb-page {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	touch-action: none;                      /* 모바일 드래그 넘김 */
	cursor: pointer;                         /* 클릭 = 페이지 넘김(기본 조작)임을 표시 */
}
.mo1fb-left  { left: 0; }
.mo1fb-right { right: 0; }
.mo1fb-img {
	width: 100%;
	height: 100%;
	/* 책 규격은 표지 템플릿 비율로 고정 — 페이지 사진은 비율이 달라도 잘리지 않고
	   흰 테두리 배경 안에 통째로 들어간다(contain + 흰 배경). */
	object-fit: contain;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
	background: #fff;
}
/* 모서리는 각지게(직각) — 접힘/넘김 자락이 폴리곤이라 각졌으므로 책 모서리도 각지게 맞춘다 */
.mo1fb-left  .mo1fb-img { box-shadow: 0 18px 44px rgba(0,0,0,.38); }
.mo1fb-right .mo1fb-img { box-shadow: 0 18px 44px rgba(0,0,0,.38); }

/* ── 시술 경과 문구 — 이미지에 굽지 않고 화면 언어별로 얹는다(4개국어 대응) ──
 * 자리·크기는 굽던 시절과 같은 규칙: 사진 좌하단(저장된 x·b 비율), 94px/2096(페이지 높이 대비).
 * 실제 px 는 JS(sizeMemos)가 --mo1fb-mfs 로 계산해 넣는다. 좌·우 페이지와 함께
 * 아래층(under)·자락 뒷면(fold-sheet)에도 붙어 넘김 중에도 문구가 끊기지 않는다. */
.mo1fb-memo {
	position: absolute;
	z-index: 2;
	display: none;
	color: #fff;
	font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
	font-weight: 700;
	font-size: var(--mo1fb-mfs, 16px);
	line-height: 1.15;
	white-space: nowrap;
	pointer-events: none;
	/* 그림자 없음 — 표지 문구(.mo1fb-cover-tpl-label)와 같은 맨 흰 글씨로 통일 */
	user-select: none;
}

/* 빈 페이지: 그림·명암만 숨기고 요소는 남겨 포인터 이벤트 유지 */
.mo1fb-page.mo1fb-empty .mo1fb-img { visibility: hidden; }
.mo1fb-left.mo1fb-empty::after, .mo1fb-right.mo1fb-empty::before { display: none; }

/* 책등 명암 */
.mo1fb-left::after, .mo1fb-right::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 7%;
	pointer-events: none;
}
.mo1fb-left::after  { right: 0; background: linear-gradient(to right, transparent, rgba(0,0,0,.13)); }
.mo1fb-right::before{ left: 0;  background: linear-gradient(to left,  transparent, rgba(0,0,0,.13)); }

/* 표지 상태: 오른쪽 단면을 중앙으로 */
.mo1fb-spread.mo1fb-cover-state { transform: translateX(-25%); }
.mo1fb-spread.mo1fb-cover-state .mo1fb-right::before { display: none; }

/* 끝 상태: 홀수 권의 마지막 펼침(왼쪽 한 장뿐)도 표지처럼 그 한 장을 중앙으로 */
.mo1fb-spread.mo1fb-end-state { transform: translateX(25%); }
.mo1fb-spread.mo1fb-end-state .mo1fb-left::after { display: none; }

/* ── 접힘(fold) — 포인터를 따라 사선으로 접히는 자락 ── */
.mo1fb-under {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.mo1fb-under-l { left: 0; }
.mo1fb-under-r { right: 0; }

.mo1fb-page { z-index: 2; }

.mo1fb-fold {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 6;
	pointer-events: none;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .34));
}
.mo1fb-fold-l { left: 0; }
.mo1fb-fold-r { right: 0; }
.mo1fb-fold-sheet {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	background: #fffaed;   /* 맨 종이(빈 뒷면)일 때 보이는 색 — 팝업 하단·표지 베이지와 동일 */
}
.mo1fb-fold-sheet .mo1fb-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.mo1fb-fold-shade {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ── 비로그인 잠금 판 — 책 '바깥'(stage)에 얹는 가우시안 블러 판 ──
 * .mo1fb-spread와 똑같은 사이징 규칙으로 책과 정확히 같은 상자를 만든 뒤,
 * clip-path로 왼쪽 절반만 남긴다. 3D 컨텍스트 밖이라 backdrop-filter가 정상 동작하고,
 * 넘어오는 낱장까지 위에서 함께 덮는다. 표시는 JS가 opacity로만 제어. */
.mo1fb-lock {
	position: absolute;                      /* 책의 자식 = 언제나 왼쪽 절반. 측정·동기화 없음 */
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	z-index: 40;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	background: rgba(255, 255, 255, .1);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
}
.mo1fb-lock-msg {
	margin-bottom: 20px;
	color: #fff;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
}
.mo1fb-login-btn {
	pointer-events: auto;
	font-size: 15px;
	font-weight: 600;
	padding: 13px 32px;
	border-radius: 30px;
	background: rgba(30, 30, 30, .5);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
	cursor: pointer;
	box-shadow: 0 8px 25px rgba(0, 0, 0, .2);
	transition: all .3s ease;
	font-family: inherit;
}
.mo1fb-login-btn:hover { background: rgba(0, 0, 0, .68); transform: translateY(-2px); }

/* ── 내비/닫기 ── */
.mo1fb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(20, 20, 20, .42);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	z-index: 20;
	transition: background .2s ease;
}
.mo1fb-nav { z-index: 50; }
.mo1fb-nav:hover { background: rgba(0, 0, 0, .65); }
.mo1fb-nav-prev { left: -8px; }
.mo1fb-nav-next { right: -8px; }
/* 좌우 넘김 화살표는 숨김 — 드래그·페이지 클릭·키보드(←/→)로 넘긴다 */
.mo1fb-nav-prev, .mo1fb-nav-next { display: none; }
.mo1fb-close {
	position: absolute;
	top: 18px; right: 22px;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(20, 20, 20, .42);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	z-index: 30;
}
.mo1fb-close:hover { background: rgba(0, 0, 0, .65); }

/* 현재 위치 — 화면 아래 가운데. 무대가 아니라 덮개에 붙여 책 위에 절대 겹치지 않는다. */
.mo1fb-pageind {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	padding: 5px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(20, 20, 20, .42);
	color: #fff;
	font-size: 12.5px;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	pointer-events: none;
	z-index: 30;
}

@media (max-width: 767px) {
	/* 펼침이 화면 폭에 거의 꽉 차게 — 좁은 세로 화면에선 폭이 결정 요인이라
	   무대를 전체 폭으로 넓히고, 세로는 핀치 확대 여유로 남긴다 */
	.mo1fb-stage { width: 100vw; height: 78vh; }
	.mo1fb-nav-prev { left: 2px; }
	.mo1fb-nav-next { right: 2px; }
	.mo1fb-lock-msg { font-size: 12px; margin-bottom: 10px; }
	.mo1fb-login-btn { font-size: 12px; padding: 9px 18px; }
}

/* 핀치 줌: 제스처를 브라우저(페이지 확대)에 뺏기지 않는다 */
.mo1fb-stage { touch-action: none; }
/* 손을 뗐을 때 원배율 근처면 제자리로 스르륵 (핀치 도중엔 전환 없음 — 손을 그대로 따라감) */
.mo1fb-stage.mo1fb-zoomsnap { transition: transform .18s ease; }