/**
 * 사진 배경 제거 — 도구 전용 스타일
 *
 * ⭐⚠️ 로드 순서 함정: shell.css 가 테마 CSS 보다 **먼저** 나간다(도장 도구와 같다). 테마가 요소 선택자에 거는
 *    규칙(button{padding:10px 20px}, ul{list-style}, h1·h2·h3 크기 등)이 나중에 와서 이기므로 모든 컴포넌트가
 *    padding·margin·border·background·font·list-style 을 **자기 클래스에 전부 적는다.**
 *    `!important` 대신 `body.bgr-page .bgr-*` 로 특이도를 올린다.
 * ⭐ 토큰은 `body.bgr-page` 범위에만 둔다(전역 :root 는 css/tokens.css 한 곳). 폴백은 정본 값과 같아야 한다.
 * ⭐ 투명 격자는 SVG 무늬(그라디언트 없이). 상태는 배지 대신 글자색. 카드는 그림자(테두리와 겹치지 않음).
 * ⭐ 마우스 올림(:hover)은 `@media (hover: hover)` 안에만 둔다 — 터치 기기는 누른 뒤에도 hover 가 그대로 남는다.
 *
 * 2026-10-04 두 번째 개편 — 운영자 「AI가 만든 화면 같다 · 사람이 디자인한 듯 깔끔하게 · 시안 3개」 → 시안 3(Clipdrop) 채용.
 *   첫 화면은 Clipdrop 배경 제거 첫 화면 하나를 가깝게 따른다(아홉 곳의 조각을 섞었던 첫 개편은 「AI 티」로 반려):
 *   셸 밴드 없이 위 줄 왼쪽 작은 제목(h1) + 아주 큰 한 문장, 오른쪽 끌어서 보는 전/후(테두리만 있는 작은 탭) ·
 *   아래 넓은 회색 칸 하나(굵은 점선, 칸 전체가 버튼) + 안내 세 줄 · 더 아래 「할 수 있는 일」 = Clipdrop 「Tools」 회색 카드 격자.
 *   v3 로 옮긴 것: Clipdrop 의 16px 칸·카드 → 8px, 세리프 제목 → 사이트 글꼴(Pretendard). 결과 격자·크게 보기 창은 첫 개편 그대로
 *   ([고르기]·묶음 막대는 10/4 운영자 「[x] 가 있으니 필요 없다」로 뺐다).
 *   운영자가 뺀 것(되살리지 말 것): 예시 사진 줄 · 맨 아래 출처 한 줄. 사진을 넣으면 큰 문장·예시·안내·「할 수 있는 일」이 숨는다.
 */

body.bgr-page {
	--bgr-action: var(--brand-action, #059669); /* 채운 버튼 */
	--bgr-action-hover: var(--brand-hover, #037450);
	--bgr-primary: var(--primary, #037450); /* 링크·포커스·밑줄 탭 */
	--bgr-gray-50: var(--gray-50, #f7f7f7);
	--bgr-gray-100: var(--gray-100, #f4f4f4);
	--bgr-gray-200: var(--gray-200, #e7e7e7);
	--bgr-gray-300: var(--gray-300, #d5d5d5);
	--bgr-gray-400: var(--gray-400, #a2a2a2);
	--bgr-gray-500: var(--gray-500, #727272);
	--bgr-gray-600: var(--gray-600, #545454);
	--bgr-gray-700: var(--gray-700, #404040);
	--bgr-gray-900: var(--gray-900, #181818);
	--bgr-surface: var(--surface-white, #ffffff);
	--bgr-white: var(--text-white, #fff);
	--bgr-success-text: var(--color-success-text, #036546);
	--bgr-danger: var(--color-danger, #D14343);
	--bgr-danger-text: var(--color-danger-text, #A82F2F);
	--bgr-danger-bg: var(--color-danger-bg, #FBE6E6);
	--bgr-warn: var(--color-warning, #C5870F);
	--bgr-warn-text: var(--color-warning-text, #95650A);
	--bgr-warn-bg: var(--color-warning-bg, #FAF2E1);
	--bgr-info: var(--color-info, #3E6FD6);
	--bgr-info-bg: var(--color-info-bg, #eaf1f8);

	--bgr-radius-sm: 4px;
	--bgr-radius-md: 6px; /* 버튼·입력 */
	--bgr-radius-lg: 8px; /* 카드·칸 */
	--bgr-radius-xl: 12px; /* 크게 보기 창 — v3 dialog 값(페이지 안 그림·칸은 카드 값 8px) */
	--bgr-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06);
	/* v3 정본 그림자 값(라이브 --shadow-md·lg 는 이름만 같고 값이 다르다 — 자기 이름으로 둔다) */
	--bgr-shadow-md: 0 1px 3px rgba(17, 17, 16, .05), 0 6px 20px rgba(17, 17, 16, .06);
	--bgr-shadow-lg: 0 2px 8px rgba(17, 17, 16, .06), 0 18px 44px rgba(17, 17, 16, .09);
	--bgr-float: 0 1px 2px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .1); /* 그림 위에 뜨는 작은 단추 */
	/* 투명 격자 — 데이터 URI 라 var() 가 안 먹는다. 색은 --gray-200 #e7e7e7 */
	--bgr-checker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23e7e7e7' d='M0 0h8v8H0zM8 8h8v8H8z'/%3E%3C/svg%3E");
	--bgr-drop-bg: color-mix(in srgb, var(--bgr-gray-100) 50%, var(--bgr-gray-200)); /* 올리기 칸 바탕 #eeeeee — 회색 100·200 사이 */
	--bgr-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

	margin: 0;
	background: var(--bgr-surface);
	color: var(--bgr-gray-900);
	font-family: var(--bgr-font);
}

body.bgr-page *,
body.bgr-page *::before,
body.bgr-page *::after { box-sizing: border-box; }

/* 테마 요소 선택자 방어 — 도구 안(.bgr-app)에만 건다. body 전체에 걸면 같은 페이지의 사이트 내비·브리핑 보드 단추의
   글자색·굵기·여백까지 덮는다(브리핑 보드 ‹ › 화살표가 어두운 칩 위에서 검정이 됐다).
   ⚠️ :where() 로 특이도를 body.bgr-page 그대로(0,1,1) 둔다 — 테마 button(0,0,1)은 이기고 .bgr-btn 류(0,2,1)에는 진다.
      body.bgr-page .bgr-app button 으로 쓰면 (0,2,2)가 되어 주 버튼 흰 글자·작은 버튼 글자 크기가 사라진다 */
body.bgr-page :where(.bgr-app) :where(button, input) { font: inherit; color: inherit; }
body.bgr-page :where(.bgr-app) :where(ul, li) { margin: 0; padding: 0; list-style: none; }
body.bgr-page .bgr-app p,
body.bgr-page .bgr-app h2,
body.bgr-page .bgr-app h3 { margin: 0; }

/* ── 레이아웃 ──────────────────────────────────────────────────────────── */
/* ⭐ 폭·좌우 padding 은 도구 밴드 'content' 컨테이너와 같은 값(1200 / 30px — 도장 도구 .stmp-app 와 같은 계약) */
body.bgr-page .bgr-app {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 30px 40px;
	word-break: keep-all; /* 한글 낱말 가운데서 줄을 바꾸지 않는다(「와이파이 / 를」) */
	overflow-wrap: break-word;
}
/* 곁 글자(못 넣은 이유·오류 내용) — 안내 상자 바탕(주의·오류) 위에서도 4.5:1 을 넘게 600. 500 은 흰 바탕에서만 4.5:1 이다 */
body.bgr-page .bgr-muted { color: var(--bgr-gray-600); }
/* 화면 낭독기만 읽는 글(data-bgr-live·칸 이름) — display:none 이면 읽히지 않는다.
   absolute 라 자리를 차지하지 않고 .bgr-app 의 flex 틈(gap)도 만들지 않는다 */
body.bgr-page .bgr-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── 버튼 ──────────────────────────────────────────────────────────────── */
body.bgr-page .bgr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid var(--bgr-gray-300);
	border-radius: var(--bgr-radius-md);
	background: var(--bgr-surface);
	color: var(--bgr-gray-900);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 150ms ease, border-color 150ms ease;
}
body.bgr-page .bgr-btn:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; }
/* aria-disabled — 잠긴 모양만 낸다. disabled 와 달리 포커스가 남는다(누른 버튼에서 포커스가 body 로 빠지지 않게). 누름은 app.js 가 막는다 */
body.bgr-page .bgr-btn:disabled,
body.bgr-page .bgr-btn[aria-disabled="true"] { opacity: .5; cursor: default; }
body.bgr-page .bgr-btn--primary {
	border-color: transparent;
	background: var(--bgr-action);
	color: var(--bgr-white);
}
/* v3 Large — 첫 화면의 주 버튼 하나([사진 올리기]·[로그인하고 이용하기]) */
body.bgr-page .bgr-btn--lg { min-height: 52px; padding: 14px 28px; font-size: 16px; }
body.bgr-page .bgr-btn--sm { min-height: 32px; padding: 4px 10px; font-size: 13px; gap: 4px; }
body.bgr-page .bgr-btn--text { border-color: transparent; background: transparent; color: var(--bgr-gray-600); }
body.bgr-page .bgr-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
@media (hover: hover) {
	body.bgr-page .bgr-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bgr-gray-100); }
	body.bgr-page .bgr-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bgr-action-hover); }
	body.bgr-page .bgr-btn--text:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--bgr-gray-100); color: var(--bgr-gray-900); }
}

body.bgr-page .bgr-icon-btn {
	flex: none; /* 줄이 모자라도 32×32 를 지킨다 — 기본 shrink 면 [받기]·[복사] 옆에서 svg 폭 16px 까지 찌그러진다 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bgr-radius-md);
	background: transparent;
	color: var(--bgr-gray-500);
	cursor: pointer;
}
body.bgr-page .bgr-icon-btn:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 1px; }
body.bgr-page .bgr-icon-btn:disabled { opacity: .4; cursor: default; }
body.bgr-page .bgr-icon-btn svg { width: 16px; height: 16px; }
/* 테두리 아이콘 단추(보기 창 ‹ ›) — v3 아이콘 버튼 40×40 */
body.bgr-page .bgr-icon-btn--line { width: 40px; height: 40px; border: 1px solid var(--bgr-gray-300); color: var(--bgr-gray-900); }
body.bgr-page .bgr-icon-btn--line svg { width: 20px; height: 20px; }
@media (hover: hover) {
	body.bgr-page .bgr-icon-btn:hover:not(:disabled) { background: var(--bgr-gray-100); color: var(--bgr-gray-900); }
}

/* ── 안내 상자 — 좌측 막대 없이 면 + 아이콘 색 ─────────────────────────── */
body.bgr-page .bgr-notices { display: flex; flex-direction: column; gap: 8px; }
body.bgr-page .bgr-notices:empty { display: none; }
body.bgr-page .bgr-notice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 8px 12px 14px;
	border-radius: var(--bgr-radius-lg);
	background: var(--bgr-gray-50);
	color: var(--bgr-gray-900);
	font-size: 14px;
	line-height: 1.6;
}
body.bgr-page .bgr-notice--info { background: var(--bgr-info-bg); }
body.bgr-page .bgr-notice--warn { background: var(--bgr-warn-bg); }
body.bgr-page .bgr-notice--error { background: var(--bgr-danger-bg); }
body.bgr-page .bgr-notice__icon { flex: 0 0 auto; display: inline-flex; padding-top: 2px; }
body.bgr-page .bgr-notice__icon svg { width: 18px; height: 18px; }
body.bgr-page .bgr-notice--info .bgr-notice__icon { color: var(--bgr-info); }
body.bgr-page .bgr-notice--warn .bgr-notice__icon { color: var(--bgr-warn); }
body.bgr-page .bgr-notice--error .bgr-notice__icon { color: var(--bgr-danger); }
body.bgr-page .bgr-notice__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* 안내 속 링크(손님 「로그인」) — 브라우저 기본 파랑이 아니라 사이트 링크 색(v3 링크 = primary) */
body.bgr-page .bgr-notice__body a { color: var(--bgr-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
body.bgr-page .bgr-notice__body a:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; border-radius: 2px; }
/* 상자 안 버튼([다시 받기]·[새로고침])은 문장 아래 자기 줄에 — 글줄 끝에 끼면 그 줄만 높아져 아이콘과 문장이 어긋난다 */
body.bgr-page .bgr-notice__body .bgr-btn { display: flex; width: fit-content; margin: 8px 0 0; }
body.bgr-page .bgr-notice__close { flex: 0 0 auto; margin: -4px 0 -4px auto; }
body.bgr-page .bgr-notice__close.bgr-notice__close { /* 아이콘 버튼과 같은 모양 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--bgr-radius-md);
	background: transparent;
	color: var(--bgr-gray-500);
	cursor: pointer;
}
body.bgr-page .bgr-notice__close:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 1px; } /* 도구의 다른 버튼과 같은 고리 */
body.bgr-page .bgr-notice__close svg { width: 16px; height: 16px; }
@media (hover: hover) {
	body.bgr-page .bgr-notice__close:hover { color: var(--bgr-gray-900); }
}

/* ── 되돌아가기 — 셸 밴드를 쓰지 않아 「← 모든 도구」만 밴드 링크와 같은 모양으로(shell.css .otl-band-back) ── */
body.bgr-page .bgr-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bgr-gray-700);
	text-decoration: none;
	transition: color 150ms ease;
}
body.bgr-page .bgr-back svg { display: block; flex: none; width: 15px; height: 15px; stroke-width: 1.75; transition: transform 150ms ease; }
body.bgr-page .bgr-back:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; }
@media (hover: hover) {
	body.bgr-page .bgr-back:hover { color: var(--bgr-primary); }
	body.bgr-page .bgr-back:hover svg { transform: translateX(-2px); }
}
/* 폰 앱 상단 바(← 도구 목록 · 제목 · 공유)가 같은 일을 한다 — 두 겹이 되지 않게(mobile-chrome.css 의 밴드 링크 규칙과 같다) */
@media screen and (max-width: 1024px) {
	body.bgr-page.omc-on.omc-appbar-detail .bgr-back { display: none; }
}

/* ── 첫 화면(Clipdrop) — 위 줄: 왼쪽 작은 제목 + 아주 큰 한 문장 · 오른쪽 전/후 / 아래: 넓은 회색 칸 ── */
body.bgr-page .bgr-hero { display: flex; flex-direction: column; padding: 0 0 104px; }
body.bgr-page .bgr-hero__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
	gap: 48px;
	align-items: start;
	padding-top: 20px;
}
body.bgr-page .bgr-hero__intro { min-width: 0; padding-top: 8px; }
body.bgr-page .bgr-hero__eyebrow {
	margin: 0 0 18px;
	padding: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--bgr-gray-900);
}
body.bgr-page .bgr-hero__title {
	margin: 0;
	font-size: 66px;
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.04em;
	color: var(--bgr-gray-900);
}
/* 손님 로그인 안내 — 큰 문장 밑 한 줄(10/4 운영자 「로그인하면 한 번에 50장」). 링크는 브랜드 글자색 + 밑줄(v3 링크 = primary) */
body.bgr-page .bgr-hero__login { margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: var(--bgr-gray-700); }
body.bgr-page .bgr-hero__login-link {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-left: 4px;
	color: var(--bgr-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}
body.bgr-page .bgr-hero__login-link svg { flex: none; width: 16px; height: 16px; }
body.bgr-page .bgr-hero__login-link:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) {
	body.bgr-page .bgr-hero__login-link:hover { text-decoration-thickness: 2px; }
}
body.bgr-page .bgr-demo { min-width: 0; }
/* 사진이 들어오면(app.js is-working) — 큰 문장·예시·안내는 접고 작은 제목이 머리글이 된다. 칸은 한 줄로 목록 위에 */
body.bgr-page .bgr-hero.is-working { padding: 0; }
body.bgr-page .bgr-hero.is-working .bgr-hero__top { display: block; padding: 0; }
body.bgr-page .bgr-hero.is-working .bgr-hero__intro { padding: 0; text-align: left; }
body.bgr-page .bgr-hero.is-working .bgr-hero__title,
body.bgr-page .bgr-hero.is-working .bgr-demo,
body.bgr-page .bgr-hero.is-working .bgr-drop__facts { display: none; }
body.bgr-page .bgr-hero.is-working .bgr-hero__eyebrow { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
body.bgr-page .bgr-hero.is-working .bgr-hero__login { margin-top: 6px; font-size: 14px; }
body.bgr-page .bgr-hero.is-working .bgr-hero__login-link svg { width: 14px; height: 14px; }
body.bgr-page .bgr-hero.is-working .bgr-start { max-width: none; margin-top: 16px; }

/* 예시 탭 — Clipdrop 「Use cases」 처럼 테두리만 있는 작은 단추. 고른 것은 짙은 테두리·글자(색 면을 칠하지 않는다) */
body.bgr-page .bgr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
body.bgr-page .bgr-tab {
	margin: 0;
	padding: 5px 12px;
	border: 1px solid var(--bgr-gray-200);
	border-radius: var(--bgr-radius-md);
	background: transparent;
	color: var(--bgr-gray-600);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}
body.bgr-page .bgr-tab[aria-selected="true"] { border-color: var(--bgr-gray-900); color: var(--bgr-gray-900); font-weight: 600; }
body.bgr-page .bgr-tab:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; }
@media (hover: hover) {
	body.bgr-page .bgr-tab:hover:not([aria-selected="true"]) { border-color: var(--bgr-gray-400); color: var(--bgr-gray-900); }
}

/* ── 끌어서 보는 전/후 비교(compare.js) ─────────────────────────────────── */
/* 원본(위)은 왼쪽 --pos 만큼만 보이고 오른쪽엔 결과(격자 위 투명 PNG)가 보인다. 두 그림은 같은 비율이라 겹치면 맞는다 */
body.bgr-page .bgr-compare {
	--pos: 50%;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--bgr-radius-lg);
	background: var(--bgr-surface) var(--bgr-checker);
	box-shadow: var(--bgr-shadow-md);
	cursor: ew-resize;
	/* 폰: 위아래로 밀면 화면이 스크롤되고, 옆으로 밀면 손잡이가 움직인다. 두 손가락 확대는 그대로 둔다(가장자리를 자세히 보려는 그림이다) */
	touch-action: pan-y pinch-zoom;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
body.bgr-page .bgr-compare img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
	transition: opacity 150ms ease;
}
body.bgr-page .bgr-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
body.bgr-page .bgr-compare[aria-busy="true"] img { opacity: .6; } /* 탭을 바꾸고 그림을 받는 동안 */
/* 경계선 — 사진 쪽에서도 보이게 흰 2px */
body.bgr-page .bgr-compare::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pos);
	width: 2px;
	margin-left: -1px;
	background: var(--bgr-white);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
	pointer-events: none;
}
/* 손잡이 — 짙은 둥근 단추에 ‹ › (remove.bg). 스위치 손잡이와 같은 갈래라 완전 원형으로 둔다 */
body.bgr-page .bgr-compare__handle {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: var(--pos);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--bgr-white);
	border-radius: 50%;
	background: var(--bgr-gray-900);
	color: var(--bgr-white);
	box-shadow: var(--bgr-float);
	transform: translate(-50%, -50%);
	cursor: ew-resize;
}
body.bgr-page .bgr-compare__handle svg { width: 20px; height: 20px; }
body.bgr-page .bgr-compare__handle:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; }
/* 원본·결과 꼬리표 — 크게 보기 창(app.js)만 쓴다(첫 화면 예시는 Clipdrop 처럼 꼬리표 없음). 손잡이가 가까이 오면 그쪽 꼬리표를 숨긴다(is-near-*) */
body.bgr-page .bgr-compare__tag {
	position: absolute;
	z-index: 1;
	top: 12px;
	padding: 4px 8px;
	border-radius: var(--bgr-radius-md);
	background: rgba(24, 24, 24, .72);
	color: var(--bgr-white);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	pointer-events: none;
	transition: opacity 150ms ease;
}
body.bgr-page .bgr-compare__tag--before { left: 12px; }
body.bgr-page .bgr-compare__tag--after { right: 12px; }
body.bgr-page .bgr-compare.is-near-start .bgr-compare__tag--before,
body.bgr-page .bgr-compare.is-near-end .bgr-compare__tag--after { opacity: 0; }

/* 첫 화면 예시 — Clipdrop 처럼 가로로 조금 납작하게(3:2 · 두 그림 모두 cover 라 같이 잘린다) · 그림자 없음 · 손잡이는 작고 밝게 */
body.bgr-page .bgr-demo .bgr-compare { aspect-ratio: 3 / 2; box-shadow: none; }
body.bgr-page .bgr-demo .bgr-compare__handle { width: 36px; height: 36px; border: 0; background: var(--bgr-surface); color: var(--bgr-gray-900); }
body.bgr-page .bgr-demo .bgr-compare__handle svg { width: 18px; height: 18px; }

/* ── 아래 넓은 칸(Clipdrop) — 옅은 회색 면 + 굵은 점선 · 아이콘 + 글 한 줄 · 칸 전체가 [사진 올리기] ── */
body.bgr-page .bgr-start { display: flex; flex-direction: column; width: 100%; max-width: 768px; min-width: 0; margin: 56px auto 0; }
/* 손님 칸·「PC에서 열어 주세요」 칸도 같은 자리, 같은 모양 */
body.bgr-page .bgr-drop,
body.bgr-page .bgr-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 208px;
	margin: 0;
	padding: 32px 24px;
	border: 2px dashed var(--bgr-gray-900);
	border-radius: var(--bgr-radius-lg);
	background: var(--bgr-drop-bg);
	text-align: center;
}
body.bgr-page .bgr-drop { cursor: pointer; transition: border-color 150ms ease, background 150ms ease; }
/* 끌어 놓는 중(is-over)은 어느 기기나, 마우스 올림은 hover 되는 기기만 — 폰은 누른 뒤 강조가 남는다 */
body.bgr-page .bgr-drop.is-over { border-color: var(--bgr-action); background: var(--bgr-gray-50); }
@media (hover: hover) {
	body.bgr-page .bgr-drop:not(.is-locked):not(.is-over):hover { background: var(--bgr-gray-200); }
}
body.bgr-page .bgr-drop.is-locked { cursor: default; border-color: var(--bgr-gray-400); background: var(--bgr-gray-50); }
body.bgr-page .bgr-drop.is-locked .bgr-drop__icon,
body.bgr-page .bgr-drop.is-locked .bgr-drop__title { opacity: .55; }
/* 시각적으로만 숨긴다 — display:none 이면 일부 브라우저가 프로그램으로 여는 것(click())을 막는다 */
body.bgr-page .bgr-drop__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	opacity: 0;
}
body.bgr-page .bgr-drop__icon { display: inline-flex; color: var(--bgr-gray-900); }
body.bgr-page .bgr-drop__icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
body.bgr-page .bgr-drop__title { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--bgr-gray-900); }
/* 칸 글은 상태·기기마다 한 줄만 — 처음 「시작하세요」 / 사진이 든 뒤 「더 넣으세요」 × 마우스 「끌어 놓아」 / 폰 손가락 「눌러서」.
   폰(손가락 + 좁은 폭)은 끌어 놓기를 쓰지 않는다. 아이패드·안드로이드 태블릿은 사진 앱에서 끌어 놓을 수 있어 마우스 글 그대로 */
body.bgr-page .bgr-drop__say { display: none; }
body.bgr-page .bgr-drop:not(.is-compact) .bgr-drop__say--start,
body.bgr-page .bgr-drop.is-compact .bgr-drop__say--more { display: inline; }
@media (pointer: coarse) and (max-width: 767px) {
	body.bgr-page .bgr-drop:not(.is-compact) .bgr-drop__say--start,
	body.bgr-page .bgr-drop.is-compact .bgr-drop__say--more { display: none; }
	body.bgr-page .bgr-drop:not(.is-compact) .bgr-drop__say--start-touch,
	body.bgr-page .bgr-drop.is-compact .bgr-drop__say--more-touch { display: inline; }
}
/* 한도까지 넣었다(app.js is-full — 손님 5장 · 회원 50장) — 마우스·손가락 모두 같은 글. 위 두 규칙보다 뒤에 둬야 이긴다 */
body.bgr-page .bgr-drop.is-compact.is-full .bgr-drop__say--more,
body.bgr-page .bgr-drop.is-compact.is-full .bgr-drop__say--more-touch { display: none; }
body.bgr-page .bgr-drop.is-compact.is-full .bgr-drop__say--full { display: inline; }
body.bgr-page .bgr-drop.is-locked.is-full .bgr-drop__title { opacity: 1; }
/* 칸 전체를 덮는 [사진 올리기] — 보이는 글은 칸의 한 줄이 맡고, 누르기·키보드·낭독은 이 버튼으로 간다.
   .bgr-btn 을 붙이지 않는다(그 hover 면이 칸 글을 덮는다). 테마 button 규칙이 이기지 않게 모양을 전부 적는다. 포커스 고리는 점선 바깥에 한 겹 */
body.bgr-page .bgr-drop__cover {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: transparent;
	box-shadow: none;
	cursor: pointer;
}
body.bgr-page .bgr-drop__cover:hover,
body.bgr-page .bgr-drop__cover:focus,
body.bgr-page .bgr-drop__cover:active { background: transparent; color: transparent; box-shadow: none; }
body.bgr-page .bgr-drop__cover:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 4px; }
body.bgr-page .bgr-drop__cover:disabled { cursor: default; }
/* 안내 줄(폰 안내·처리 중·모델 준비)은 덮개 위에 그려지지만 누름은 덮개가 받는다 */
body.bgr-page .bgr-drop > :not(.bgr-drop__cover):not(.bgr-drop__input) { position: relative; z-index: 0; }
/* 칸 밑 한 줄 — 아이콘 + 글 세 가지(10/4 운영자 「군더더기 없이」) */
body.bgr-page .bgr-drop__facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-self: center;
	gap: 6px 22px;
	margin-top: 20px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--bgr-gray-600);
}
body.bgr-page .bgr-drop__facts li { display: flex; align-items: center; gap: 8px; }
body.bgr-page .bgr-drop__facts svg { flex: none; width: 16px; height: 16px; color: var(--bgr-gray-500); }
/* 이 기기에서 못 쓰면(「PC에서 열면」 칸이 보이면) 안내 세 줄도 숨긴다 — 넣을 수 없는 사진 안내가 남지 않게.
   막힘은 폰에서만 생기고(아이폰 사파리 15.4+·안드로이드 크롬 105+ 가 :has 를 읽는다), 못 읽으면 세 줄이 남을 뿐이다 */
body.bgr-page .bgr-start:has(> [data-bgr-blocked]:not([hidden])) > .bgr-drop__facts { display: none; }
/* 폰 안내 — 칸 안의 옅은 면 한 줄 */
body.bgr-page .bgr-drop__note {
	max-width: 400px;
	padding: 8px 14px;
	border-radius: var(--bgr-radius-md);
	background: var(--bgr-gray-50);
	font-size: 13px;
	line-height: 1.6;
	color: var(--bgr-gray-600);
}
body.bgr-page .bgr-drop__busy { font-size: 13px; font-weight: 600; color: var(--bgr-gray-700); }
/* 사진이 들어오면 한 줄로 줄인다 — 목록이 화면을 쓰게(아이콘 + 「더 넣으세요」 한 줄) */
body.bgr-page .bgr-drop.is-compact {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px 10px;
	min-height: 0;
	padding: 14px 20px;
	border-width: 1.5px;
}
body.bgr-page .bgr-drop.is-compact .bgr-drop__icon svg { width: 22px; height: 22px; }
body.bgr-page .bgr-drop.is-compact .bgr-drop__title { font-size: 15px; }
body.bgr-page .bgr-drop.is-compact .bgr-drop__note { display: none; }
body.bgr-page .bgr-drop.is-compact .bgr-drop__busy { flex-basis: 100%; }

/* 돌아가는 동그라미(스피너) — 완전 원형 허용 자리. 기능적 움직임이라 움직임 줄이기에서도 돈다 */
body.bgr-page .bgr-spin {
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	border: 2px solid var(--bgr-gray-200);
	border-top-color: var(--bgr-action);
	border-radius: 50%;
	animation: bgr-spin 800ms linear infinite;
}
/* 모델 준비 — 진행 막대 대신 스피너 + 「모델 준비 중… 23%」(10/4 운영자). 다 받으면 끝났다는 글 없이 거둔다 */
body.bgr-page .bgr-model { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--bgr-gray-600); }
body.bgr-page .bgr-model__text,
body.bgr-page .bgr-run__text { flex: 0 1 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 줄인 칸에서는 늘 제 줄 가운데에 둔다 — 버튼 옆 같은 줄에 두면 글 길이가 바뀌거나 줄이 빠질 때 [사진 올리기]가 옆으로 움직인다.
   다 받으면 자리만 남긴다(is-done) — 줄이 빠지면 아래 버튼·목록이 올라가 누르려던 것이 움직인다(화면이 바뀔 때 app.js 가 거둔다) */
body.bgr-page .bgr-drop.is-compact .bgr-model { flex: 0 0 100%; }
body.bgr-page .bgr-model.is-done { visibility: hidden; }

/* 처리 진행 막대 — v3 Progress: 높이 8px · 반경 2px · gray-200 길. 높이의 절반을 반경으로 쓰면 금지된 캡슐 모양이 된다.
   [배경 지우기]를 모델보다 먼저 눌러 모델을 기다리는 동안(is-waiting)은 막대 대신 스피너 + 백분율(위 모델 줄과 같은 모양) */
body.bgr-page .bgr-run { display: flex; align-items: center; gap: 10px; width: 100%; font-size: 13px; color: var(--bgr-gray-600); }
body.bgr-page .bgr-run__spin { display: none; }
body.bgr-page .bgr-run.is-waiting { gap: 8px; }
body.bgr-page .bgr-run.is-waiting .bgr-run__spin { display: inline-block; }
body.bgr-page .bgr-run.is-waiting .bgr-meter { display: none; }
body.bgr-page .bgr-meter { flex: 1 1 auto; height: 8px; border-radius: 2px; background: var(--bgr-gray-200); overflow: hidden; }
body.bgr-page .bgr-meter__fill { display: block; width: 0; height: 100%; background: var(--bgr-action); transition: width 200ms linear; }

/* ── 손님 안내 · 이 기기에서는 못 씀 — 올리기 칸 자리에 같은 회색 칸(모양은 위 .bgr-drop 과 같은 규칙) ── */
body.bgr-page .bgr-panel { gap: 16px; }
/* 제목은 줄 길이를 고르게 — 폰에서 「…할 수 / 없어요」처럼 낱말 하나만 떨어지지 않게(지원 안 하는 브라우저는 지금과 같다).
   ⚠️ 설명(.bgr-panel__desc)에는 걸지 않는다 — 웹킷이 괄호 안(「가속( / WebGPU)」)을 끊는다 */
body.bgr-page .bgr-panel__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--bgr-gray-900); text-wrap: balance; }
body.bgr-page .bgr-panel__desc { font-size: 14px; line-height: 1.7; color: var(--bgr-gray-700); }
body.bgr-page .bgr-panel .bgr-btn { margin-top: 2px; }

/* ── 목록 ──────────────────────────────────────────────────────────────── */
body.bgr-page .bgr-list { display: flex; flex-direction: column; gap: 12px; }
body.bgr-page .bgr-list__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body.bgr-page .bgr-list__count { font-size: 15px; color: var(--bgr-gray-900); }
body.bgr-page .bgr-list__count strong { font-weight: 700; }
body.bgr-page .bgr-list__count span { font-size: 13px; color: var(--bgr-gray-500); }
body.bgr-page .bgr-list__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 미리보기 배경 — 세그먼트(도장 도구와 같은 모양) */
body.bgr-page .bgr-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--bgr-radius-md); background: var(--bgr-gray-100); }
body.bgr-page .bgr-seg button {
	min-height: 30px;
	margin: 0;
	padding: 4px 12px;
	border: 0;
	border-radius: var(--bgr-radius-sm);
	background: transparent;
	color: var(--bgr-gray-600);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
@media (hover: hover) {
	body.bgr-page .bgr-seg button:hover:not([aria-pressed="true"]) { background: var(--bgr-gray-200); }
}
body.bgr-page .bgr-seg button[aria-pressed="true"] { background: var(--bgr-surface); color: var(--bgr-gray-900); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
body.bgr-page .bgr-seg button:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 1px; }

body.bgr-page .bgr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.bgr-page .bgr-status { min-height: 1.5em; font-size: 13px; line-height: 1.6; color: var(--bgr-gray-600); }
body.bgr-page .bgr-status:empty { display: none; }

/* ── 결과 격자 — 그림만(Magnific). 이름은 크게 보기·낭독기·마우스 올림 글로 ── */
body.bgr-page .bgr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 12px;
}
body.bgr-page .bgr-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.bgr-page .bgr-tile__view {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	min-height: 0; /* ⚠️ aspect-ratio 상자는 내용이 크면 늘어난다(자동 최소 높이) — 세로 사진이 칸을 키우지 않게 */
	padding: 8px;
	border-radius: var(--bgr-radius-lg);
	overflow: hidden;
	background: var(--bgr-surface) var(--bgr-checker);
	box-shadow: var(--bgr-shadow);
}
/* 배경을 찾기 전(원본 그대로)엔 격자 대신 옅은 회색 — 격자는 「투명」이라는 뜻이라 지우기 전부터 깔면 헷갈린다 */
body.bgr-page .bgr-grid[data-bg="checker"] .bgr-tile:not(.is-cut) .bgr-tile__view { background: var(--bgr-gray-100); }
body.bgr-page .bgr-grid[data-bg="white"] .bgr-tile__view { background: var(--bgr-surface); }
body.bgr-page .bgr-grid[data-bg="black"] .bgr-tile__view { background: var(--bgr-gray-900); }
/* 원본 썸네일이 곧 미리보기 — 배경을 찾으면 마스크(320×320 PNG)를 CSS mask 로 씌운다.
   ⚠️ 마스크는 요소 상자에 맞춰 늘어난다 → 상자가 사진 비율 그대로여야 한다(object-fit 을 쓰지 않는다) */
body.bgr-page .bgr-tile__img,
body.bgr-page .bgr-viewer .bgr-compare__after {
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
body.bgr-page .bgr-tile__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
body.bgr-page .bgr-tile__img:not([src]) { visibility: hidden; }
body.bgr-page .bgr-tile[data-status="reading"] .bgr-tile__img,
body.bgr-page .bgr-tile[data-status="busy"] .bgr-tile__img { opacity: .55; }
/* 스피너 — 완전 원형 허용 자리. 기능적 움직임이라 움직임 줄이기에서도 돈다 */
body.bgr-page .bgr-tile__spin {
	position: absolute;
	top: 50%;
	left: 50%;
	display: none;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 3px solid var(--bgr-gray-200);
	border-top-color: var(--bgr-action);
	border-radius: 50%;
	animation: bgr-spin 800ms linear infinite;
}
body.bgr-page .bgr-tile[data-status="reading"] .bgr-tile__spin,
body.bgr-page .bgr-tile[data-status="busy"] .bgr-tile__spin,
body.bgr-page .bgr-tile[data-status="saving"] .bgr-tile__spin { display: block; }
@keyframes bgr-spin { to { transform: rotate(360deg); } }

/* 칸 단추 자리(app.js 가 채운다) — 그림을 덮는 층. 층 자체는 누름을 그 아래(끌 그림)로 흘리고 단추만 받는다 */
body.bgr-page .bgr-tile__ctl { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body.bgr-page .bgr-tile__ctl button { pointer-events: auto; }
/* 끌 그림(app.js prepDrag — PC 크롬 계열, 마우스를 올리면 생긴다) = 배경을 지운 PNG. 보이지 않게 칸 그림 위에 깔아 이것을 끌어
   PPT·엑셀에 놓는다(잡는 손 모양만 보인다). 그림을 눌러 여는 창은 없다 — 크게 보기는 돋보기 단추 */
body.bgr-page .bgr-tile__drag {
	position: absolute;
	inset: 8px;
	z-index: 1;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	object-fit: contain;
	opacity: 0;
	cursor: grab;
}
body.bgr-page .bgr-tile__drag:active { cursor: grabbing; }
/* 그림 위 작은 단추 — 흰 면 + 그림자(어떤 사진 위에서도 보이게). 아래 왼쪽 [받기]·[크게 보기], 위 오른쪽 [빼기] */
body.bgr-page .bgr-tile__acts { position: absolute; z-index: 2; left: 8px; bottom: 8px; display: flex; gap: 6px; }
body.bgr-page .bgr-tile__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--bgr-radius-md);
	background: var(--bgr-surface);
	color: var(--bgr-gray-900);
	box-shadow: var(--bgr-float);
	cursor: pointer;
}
body.bgr-page .bgr-tile__btn svg { width: 16px; height: 16px; }
body.bgr-page .bgr-tile__btn:focus-visible { outline: 2px solid var(--bgr-primary); outline-offset: 2px; }
body.bgr-page .bgr-tile__btn[aria-disabled="true"] { opacity: .5; cursor: default; }
body.bgr-page .bgr-tile__btn--remove { position: absolute; z-index: 2; top: 8px; right: 8px; color: var(--bgr-gray-600); }
@media (hover: hover) {
	body.bgr-page .bgr-tile__btn:hover:not([aria-disabled="true"]) { background: var(--bgr-gray-100); color: var(--bgr-gray-900); }
	/* 칸 단추는 마우스를 올린 칸에만(10/4 운영자) — 평소엔 사진만 보인다. 키보드로 칸 안에 들어와도 보인다.
	   마우스가 없는 기기(폰·태블릿)는 이 묶음 밖이라 늘 보인다. display 로 숨기지 않는다(탭 순서·낭독에서 빠지지 않게) */
	body.bgr-page .bgr-tile__ctl button { opacity: 0; transition: opacity .12s ease; }
	body.bgr-page .bgr-tile:hover .bgr-tile__ctl button,
	body.bgr-page .bgr-tile:focus-within .bgr-tile__ctl button { opacity: 1; }
}
/* 멈춤·실패만 글로 — 실패는 이름을 함께(원본을 잃은 사진은 「같은 사진을 다시 넣어」야 해서 이름이 필요하다) */
body.bgr-page .bgr-tile__note { font-size: 12px; line-height: 1.5; color: var(--bgr-gray-600); overflow-wrap: anywhere; }
body.bgr-page .bgr-tile__note:empty { display: none; }
body.bgr-page .bgr-tile[data-status="fail"] .bgr-tile__note { color: var(--bgr-danger-text); }

/* ── 크게 보기 창 — 결과 칸을 누르면 같은 손잡이로 전/후(v3 Modal: 12px · 그림자 lg · 흐림 없음) ── */
body.bgr-page .bgr-viewer {
	width: min(calc(100vw - 32px), 760px);
	max-width: none;
	max-height: min(92vh, 900px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--bgr-radius-xl);
	background: var(--bgr-surface);
	color: var(--bgr-gray-900);
	box-shadow: var(--bgr-shadow-lg);
	overflow: hidden;
}
body.bgr-page .bgr-viewer[open] { display: flex; flex-direction: column; }
body.bgr-page .bgr-viewer::backdrop { background: rgba(17, 20, 18, .42); }
body.bgr-page .bgr-viewer__head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 20px; }
body.bgr-page .bgr-viewer__name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; color: var(--bgr-gray-900); }
body.bgr-page .bgr-viewer__pos { flex: none; font-size: 13px; color: var(--bgr-gray-500); font-variant-numeric: tabular-nums; }
body.bgr-page .bgr-viewer__close.bgr-icon-btn { width: 40px; height: 40px; color: var(--bgr-gray-700); }
body.bgr-page .bgr-viewer__close svg { width: 20px; height: 20px; }
body.bgr-page .bgr-viewer__stage { display: flex; justify-content: center; min-height: 0; padding: 0 20px; }
/* 사진 비율(--ar) 그대로, 창 높이를 넘지 않게 폭을 줄인다 */
body.bgr-page .bgr-viewer .bgr-compare {
	aspect-ratio: var(--ar, 1);
	width: min(100%, calc((min(92vh, 900px) - 150px) * var(--ar, 1)));
	border-radius: var(--bgr-radius-lg);
	box-shadow: none;
}
body.bgr-page .bgr-viewer[data-bg="white"] .bgr-compare { background: var(--bgr-surface); box-shadow: inset 0 0 0 1px var(--bgr-gray-200); }
body.bgr-page .bgr-viewer[data-bg="black"] .bgr-compare { background: var(--bgr-gray-900); }
body.bgr-page .bgr-viewer__foot { display: flex; align-items: center; gap: 8px; padding: 16px 20px 20px; }
body.bgr-page .bgr-viewer__gap { flex: 1 1 auto; }
/* 창이 열린 동안 뒤 페이지가 스크롤되지 않게 — 스크롤 막대 자리는 남겨 둔다(빠지면 페이지가 옆으로 7~8px 움직인다) */
html.bgr-lock { overflow: hidden; scrollbar-gutter: stable; }

/* ── 할 수 있는 일 — Clipdrop 「Tools」: 가운데 큰 제목 + 회색 카드 격자(그림 · 이름 · 한 줄). 기능이 늘면 카드를 더한다 ── */
body.bgr-page .bgr-features { display: flex; flex-direction: column; gap: 40px; padding-bottom: 40px; }
body.bgr-page .bgr-features__title {
	font-size: 44px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.035em;
	color: var(--bgr-gray-900);
	text-align: center;
}
body.bgr-page .bgr-features__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.bgr-page .bgr-feature {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--bgr-radius-lg);
	background: var(--bgr-gray-50);
	overflow: hidden;
}
/* 끌 수 없게 — 크롬은 그림을 끌면 파일로도 실어 보내 올리기 칸에 놓으면 사진으로 들어간다(마크업 draggable=false 와 같은 일, 사파리 길잡이) */
body.bgr-page .bgr-feature__img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 10;
	background: var(--bgr-gray-50);
	-webkit-user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}
body.bgr-page .bgr-feature__title { padding: 16px 18px 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--bgr-gray-900); }
body.bgr-page .bgr-feature__desc { padding: 4px 18px 20px; font-size: 14px; line-height: 1.65; color: var(--bgr-gray-600); }

body.bgr-page .bgr-notice-fatal { padding: 24px; border-radius: var(--bgr-radius-lg); background: var(--bgr-gray-50); text-align: center; color: var(--bgr-gray-700); }
body.bgr-page .bgr-notice-fatal p + p { margin-top: 6px; font-size: 12px; color: var(--bgr-gray-500); }

/* ── 폭 ────────────────────────────────────────────────────────────────── */
/* ⚠️ 좌우 여백은 셸 'content' 계약(1200 / 30 · ≤1024 24 · ≤768 20)과 같다 — 다른 도구의 밴드 왼쪽 끝과 같은 줄 */
@media (max-width: 1024px) {
	body.bgr-page .bgr-app { padding: 20px 24px 32px; }
	body.bgr-page .bgr-hero__top { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; }
	body.bgr-page .bgr-hero__title { font-size: 54px; }
}
@media (max-width: 768px) {
	/* 위아래로 — 큰 문장 → 예시 → 칸(Clipdrop 폰과 같은 순서) */
	body.bgr-page .bgr-app { padding: 16px 20px 32px; gap: 12px; }
	body.bgr-page .bgr-hero { padding-bottom: 64px; }
	body.bgr-page .bgr-hero__top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 8px; }
	body.bgr-page .bgr-hero__intro { padding: 0; text-align: center; }
	body.bgr-page .bgr-hero__eyebrow { margin-bottom: 10px; font-size: 14px; }
	body.bgr-page .bgr-hero__title { font-size: 38px; }
	body.bgr-page .bgr-hero__login { margin-top: 14px; font-size: 15px; }
	body.bgr-page .bgr-tabs { justify-content: center; }
	body.bgr-page .bgr-start { margin-top: 32px; }
	body.bgr-page .bgr-drop,
	body.bgr-page .bgr-panel { min-height: 160px; padding: 28px 16px; }
	body.bgr-page .bgr-drop.is-compact { min-height: 0; padding: 14px 16px; }
	body.bgr-page .bgr-drop__facts { flex-direction: column; align-items: flex-start; }
	body.bgr-page .bgr-features { gap: 24px; }
	body.bgr-page .bgr-features__title { font-size: 30px; }
	body.bgr-page .bgr-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
	body.bgr-page .bgr-btn { min-height: 44px; } /* 터치 타깃 */
	body.bgr-page .bgr-btn--lg { min-height: 52px; }
	body.bgr-page .bgr-btn--sm { min-height: 36px; }
	body.bgr-page .bgr-actions .bgr-btn { flex: 1 1 auto; }
	body.bgr-page .bgr-viewer__head { padding-left: 16px; }
	body.bgr-page .bgr-viewer__stage { padding: 0 12px; }
	body.bgr-page .bgr-viewer__foot { padding: 12px 12px 16px; }
}
@media (max-width: 640px) {
	body.bgr-page .bgr-features__list { grid-template-columns: minmax(0, 1fr); }
}
/* 터치 기기(app.js 의 TOUCH 와 같은 기준) — 손가락으로 누르는 칸은 40px 이상(v3 아이콘 버튼 40×40) */
@media (pointer: coarse) {
	body.bgr-page .bgr-icon-btn,
	body.bgr-page .bgr-tile__btn,
	body.bgr-page .bgr-notice__close.bgr-notice__close { width: 40px; height: 40px; }
	body.bgr-page .bgr-notice__close { margin: -10px -4px -10px auto; } /* 커진 만큼 바깥 여백으로 덜어 안내 상자 높이는 그대로 */
	body.bgr-page .bgr-tile__acts { left: 6px; bottom: 6px; }
	body.bgr-page .bgr-tile__btn--remove { top: 6px; right: 6px; }
	body.bgr-page .bgr-seg button { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	body.bgr-page .bgr-back,
	body.bgr-page .bgr-back svg,
	body.bgr-page .bgr-btn,
	body.bgr-page .bgr-drop,
	body.bgr-page .bgr-compare img,
	body.bgr-page .bgr-compare__tag,
	body.bgr-page .bgr-tile__ctl button,
	body.bgr-page .bgr-meter__fill { transition: none; }
	body.bgr-page .bgr-back:hover svg { transform: none; }
}

/* 고대비(강제 색) 모드 — 바탕 면·그림자가 시스템 색으로 지워진다. 평소 화면은 그대로 */
@media (forced-colors: active) {
	/* 고른 미리보기 배경은 밑줄로, 고른 탭은 테두리 색으로 — outline 을 쓰면 같은 단추의 포커스 고리를 덮는다 */
	body.bgr-page .bgr-seg button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
	body.bgr-page .bgr-tab[aria-selected="true"] { border-color: Highlight; }
	/* 미리보기 바탕은 색 자체가 기능이다(격자·흰색·검정) — 시스템 색으로 바꾸지 않는다 */
	body.bgr-page .bgr-tile__view,
	body.bgr-page .bgr-compare { forced-color-adjust: none; }
	/* 진행 막대 — 테두리와 시스템 강조색으로 다시 그린다 */
	body.bgr-page .bgr-meter { border: 1px solid CanvasText; }
	body.bgr-page .bgr-meter__fill { forced-color-adjust: none; background: Highlight; }
	/* 스피너 — 테두리 두 색이 같은 시스템 색이 되면 도는 게 안 보인다 */
	body.bgr-page .bgr-spin { forced-color-adjust: none; border-color: GrayText; border-top-color: Highlight; }
}

/* ⚠️ 맨 끝에 둔다 — 같은 특이도의 display 규칙(.bgr-btn{display:inline-flex} 등)이 [hidden] 을 이기지 않게 */
body.bgr-page .bgr-app [hidden] { display: none; }