@charset "utf-8";
/**
 * ink 레이아웃 - PC 에서 모바일 화면을 가운데 고정 폭 틀로 (body.ink_pcframe)
 *  --ink-frame-w : 틀 폭 (레이아웃 설정, 기본 480px)
 *  --ink-frame-side : 틀 바깥 한쪽 여백 (pcframe.js 가 스크롤바를 뺀 실제 폭으로 계산, 없으면 100vw 기준)
 *  화면 전체 폭에 붙던 고정(fixed) 요소들을 틀 안으로 맞춘다
 */
:root {
	--ink-frame-w: 480px;
	--ink-frame-bg: #e9ebef;
	--ink-frame-cw: min(100vw, var(--ink-frame-w));
	--ink-frame-side: max(0px, calc((100vw - var(--ink-frame-w)) / 2));
}
html { background-color: var(--ink-frame-bg) !important; }
body.ink_pcframe {
	position: relative;
	max-width: var(--ink-frame-w);
	min-height: 100%;
	margin: 0 auto !important;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 10px 40px rgba(15, 23, 42, .12);
	overflow-x: hidden;
}
body.ink_pcframe:not(.ink_pcframe_dark) { background-color: #fff; }

/* 화면 전체를 덮던 고정 요소 → 틀만 덮기 */
body.ink_pcframe .ink_message.active,
body.ink_pcframe .blur_dummy,
body.ink_pcframe .ink_dummy,
body.ink_pcframe .preview_dummy { left: var(--ink-frame-side) !important; right: auto !important; width: var(--ink-frame-cw) !important; }

/* 알림 메시지 (위쪽 여백 15px) */
body.ink_pcframe .xe_message { left: calc(var(--ink-frame-side) + 15px) !important; width: calc(var(--ink-frame-cw) - 30px) !important; }

/* 오른쪽 아래 버튼 (맨 위로 등) */
body.ink_pcframe .layout_buttons { right: calc(var(--ink-frame-side) + 15px) !important; }

/* 옆 메뉴: 틀 왼쪽에서 열림, 닫혔을 때 틀 밖으로 비치지 않게 */
body.ink_pcframe .ink_sidebar { left: var(--ink-frame-side) !important; overflow: hidden; }
body.ink_pcframe .ink_sidebar.active { width: var(--ink-frame-cw) !important; }
body.ink_pcframe .ink_sidebar .inner { max-width: calc(var(--ink-frame-cw) - 40px); }

/* 가운데 표시 (불러오는 중 · 완료) */
body.ink_pcframe .ink_loading,
body.ink_pcframe .ink_done { left: calc(var(--ink-frame-side) + var(--ink-frame-cw) / 2) !important; }

/* 이미지 · 표 · 동영상이 틀을 넘지 않게 */
body.ink_pcframe img,
body.ink_pcframe video,
body.ink_pcframe iframe { max-width: 100%; }

/* 스크롤바는 화면 오른쪽 끝 그대로 (틀 안에서 가로 스크롤 없음) */
body.ink_pcframe .ink_wrap { overflow-x: hidden; }

/* ===== 휴대폰 크기 (body.ink_pcframe_device): 화면 가운데 휴대폰 모양 틀, 틀 안에서 스크롤 =====
 *  body 를 틀로 (transform → 안쪽 fixed 요소는 틀 기준), 내용은 #ink_frame_scroll 이 스크롤 (pcframe.js 가 감쌈)
 */
:root { --ink-frame-hmax: 860px; --ink-frame-h: min(var(--ink-frame-hmax), calc(100vh - 32px)); }
html:has(body.ink_pcframe_device) { height: 100%; overflow: hidden; }
body.ink_pcframe_device {
	height: var(--ink-frame-h) !important;
	min-height: 0 !important;
	margin: max(16px, calc((100vh - var(--ink-frame-h)) / 2)) auto 0 !important;
	border-radius: 28px;
	overflow: hidden !important;
	transform: translateZ(0);
	box-shadow: 0 0 0 10px #1f2937, 0 0 0 11px #374151, 0 24px 60px rgba(15, 23, 42, .35);
}
body.ink_pcframe_device #ink_frame_scroll {
	position: relative;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
body.ink_pcframe_device #ink_frame_scroll::-webkit-scrollbar { width: 6px; }
body.ink_pcframe_device #ink_frame_scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 3px; }
body.ink_pcframe_device .ink_wrap { min-height: 100%; }