/**
 * popup.css — B2B 팝업 모달 + 교과서 hot-link 카드
 *
 * 모바일도 모달 유지(풀스크린 시트 아님) — 좁은 화면에서 폭만 넓힌다.
 * z-index 10000: 테마 최상단(9999) 위, AI 위젯(99999) 아래 — 위젯이 fullscreen 이면
 * popup.js 가 모달을 닫으므로 겹칠 일이 없다.
 *
 * 계획: docs/plans/bsmnt/b2b-popup-plan.md §5.1
 */

.b2b-popup[hidden] { display: none; }

/* 모달 열림 중 배경 스크롤 잠금 (popup.js 가 body 에 붙인다). */
body.b2b-popup-open { overflow: hidden; }

.b2b-popup {
	position: fixed;
	inset: 0;
	z-index: 10000;
}

.b2b-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
}

.b2b-popup-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 540px;
	max-height: calc(100vh - var(--s-8));
	background: var(--c-bg);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-lg);
	overflow: hidden;
}

.b2b-popup-modal:focus { outline: none; }

/* ── 표현 1) 모달 — 헤더 트리거로 열 때. 중앙 + 오버레이 ──
 * :not([hidden]) 로 특이도를 올려 위 [hidden] 규칙과의 순서 의존을 없앤다. */
.b2b-popup.is-modal:not([hidden]) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-4);
}

/* ── 표현 2) 타일 — 첫 화면 자동 노출. 왼쪽부터 나란히 ──
 * 오버레이 없이 페이지 위에 떠 있고, 컨테이너는 클릭을 통과시켜 뒤쪽 페이지를
 * 그대로 조작할 수 있다. 위치(left/top)는 popup.js 가 넣는다. */
.b2b-popup.is-tiled { pointer-events: none; }

.b2b-popup.is-tiled .b2b-popup-overlay { display: none; }

.b2b-popup.is-tiled .b2b-popup-modal {
	position: fixed;
	width: min(540px, calc(100vw - 2 * var(--s-3)));
	max-height: calc(100vh - 110px);
	pointer-events: auto;
}

/* ── 제목 밴드 ─────────────────────────────────────────── */
.b2b-popup-head {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4);
	background: var(--c-primary);
	color: #fff;
}

.b2b-popup-head h2 {
	flex: 1;
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	color: #fff;
}

.b2b-popup-x {
	flex: none;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
}

.b2b-popup-x:hover { background: rgba(255, 255, 255, .18); }

/* ── 본문 ──────────────────────────────────────────────── */
.b2b-popup-body {
	flex: 1;
	padding: var(--s-4);
	overflow-y: auto;
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-fg-2);
}

.b2b-popup-body > :first-child { margin-top: 0; }
.b2b-popup-body > :last-child { margin-bottom: 0; }

/* ── 하단 "보이지 않음" ────────────────────────────────── */
.b2b-popup-foot {
	display: flex;
	justify-content: flex-end;
	padding: var(--s-2) var(--s-4);
	background: var(--c-surface-alt);
	border-top: 1px solid var(--c-border);
}

.b2b-popup-dismiss {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	font-size: 12px;
	color: var(--c-fg-3);
	cursor: pointer;
}

/* ── 교과서 hot-link 카드 ([b2b_textbook_hotlinks]) ────── */
.b2b-hotlinks {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.b2b-hotlink-card {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) var(--s-3);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
}

.b2b-hotlink-pub {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 92px;
}

.b2b-hotlink-pub img {
	max-width: 100%;
	max-height: 32px;
	height: auto;
	object-fit: contain;
}

.b2b-hotlink-pub-name {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--c-fg-1);
}

.b2b-hotlink-note {
	font-size: 11px;
	color: var(--c-fg-3);
}

/* 2열 — 2학기만 링크하므로 출판사당 버튼이 최대 4개. 폭이 남으니 크게 쓴다. */
.b2b-hotlink-grades {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-2);
}

/* 2줄 구성 — 위: "3학년 2학기", 아래: "클릭!" 알약(버튼 폭을 다 쓴다). */
.b2b-hotlink-grades a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 64px;
	padding: var(--s-1) var(--s-2);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.1;
	color: var(--pub-fg, #fff);
	text-decoration: none;
	background: var(--pub-color, var(--c-primary));
	border-radius: var(--r-md);
}

/* 초등공통처럼 통합 링크 1개뿐인 카드 — 버튼이 폭을 다 쓴다. */
.b2b-hotlink-grades a:only-child { grid-column: 1 / -1; }

/* "클릭!" — 흰 알약. 버튼 폭을 다 쓰고 글자는 카드 색으로 찍어 확실히 도드라진다. */
.b2b-hotlink-grades a span {
	display: block;
	width: 100%;
	padding: 3px 0;
	font-size: 15px;
	font-weight: 900;
	font-style: italic;
	letter-spacing: .04em;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
	color: var(--pub-ink, var(--pub-color, var(--c-primary)));
	background: #fff;
	border-radius: var(--r-xs);
}

.b2b-hotlink-grades a:hover {
	filter: brightness(1.12);
	color: var(--pub-fg, #fff);
}

/* ── 트리거 버튼 ───────────────────────────────────────
 * 테마가 고정 배치하는 트리거는 없다. 관리자가 본문(사용자 정의 HTML 블록)에
 * <button class="b2b-popup-trigger" data-b2b-popup="{ID}">…</button> 로 넣을 때 쓰는 스타일. */
.b2b-popup-trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	padding: 0 var(--s-3);
	height: 40px;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
	color: var(--c-fg-1);
	background: var(--c-warning);
	border: 0;
	border-radius: var(--r-sm);
	cursor: pointer;
	white-space: nowrap;
}

.b2b-popup-trigger:hover { filter: brightness(1.06); }
.b2b-popup-trigger i { width: 16px; height: 16px; }

/* 세로가 짧은 화면(노트북 768p 등) — 버튼을 조금 낮춰 더 많은 출판사가 한눈에 들어오게.
 * 넉넉한 화면에서는 위의 큰 크기를 그대로 쓴다. */
@media (max-height: 900px) {
	.b2b-hotlink-card { padding: var(--s-1) var(--s-3); }
	.b2b-hotlink-grades { gap: var(--s-1); }
	.b2b-hotlink-grades a { min-height: 54px; font-size: 16px; gap: 3px; }
	.b2b-hotlink-grades a span { font-size: 13px; padding: 2px 0; }
}

/* 좁은 화면 — 모달 유지, 폭만 넓힌다. */
@media (max-width: 480px) {
	.b2b-popup.is-modal:not([hidden]) { padding: var(--s-2); }
	.b2b-popup.is-modal .b2b-popup-modal { max-height: calc(100vh - var(--s-4)); }
	.b2b-popup-head h2 { font-size: 16px; }
	.b2b-hotlink-pub { width: 76px; }
}