/* 움직이는 이모지 (/tools/animated-emoji/)
 *
 * 자매 도구 「이모지 사전」(_emoji-assets/css/emoji.css)의 화면 문법을 물려받는다.
 * 디자인 규칙은 oppadu-design 스킬(v3) — 배지 radius 5~6px · 알약 금지 · 좌측 컬러바 금지 ·
 * 테두리와 그림자를 겹치지 않기 · 그라디언트·blur·!important 신규 금지.
 *
 * ⚠️ 라이브 테마의 `--radius-lg` 는 16px 이다(v3 는 8px) → 카드에 쓰지 않고 8px 을 직접 적는다.
 * ⚠️ 컨테이너는 도구 밴드의 `content`(1200 / 좌우 30px)와 **같은 값**이어야 한다.
 *    한쪽만 고치면 밴드 제목과 본문 왼쪽 끝이 어긋난다.
 */

.aem-app {
	/* 파일 스코프 별칭 — 테마 토큰에 잇되, 도구가 테마 밖에서 렌더될 때를 대비해 폴백을 둔다 */
	--aem-brand: var(--primary, #037450);
	--aem-action: var(--brand-action, #059669);
	--aem-action-hover: var(--brand-hover, #037450);
	--aem-line: var(--gray-200, #E4E4E4);
	--aem-line-strong: var(--gray-300, #D0D0D0);
	--aem-bg-soft: var(--gray-50, #F7F7F7);
	--aem-chip-bg: var(--gray-100, #F4F4F4);
	--aem-text: var(--text-primary, #343434);
	--aem-text-2: var(--text-secondary, #525252);
	--aem-muted: var(--text-muted, #727272);
	--aem-selected: var(--primary-50, #E4EFEA);

	/* ⭐ 칸 치수는 여기 한 곳에만 둔다 — 운영자가 보고 바로 조절할 수 있게.
	 *
	 * ⚠️ **그림 크기(--aem-art)와 칸 폭(--aem-tile)은 다른 값이다.**
	 *    칸 폭은 「그림 + 좌우 여백 + 이름이 앉을 자리」를 합친 것이고, 실제 칸은 남는 자리를
	 *    나눠 가지므로 이 값보다 넓어진다(minmax(tile, 1fr)).
	 *    여백을 넓히려면 --aem-gap 을, 이모지를 줄이려면 --aem-art 를 건드린다.
	 * ⚠️ --aem-tile-h 는 칸 **전체 높이**다(위 6 + 그림 + 사이 4 + 이름 + 아래 8 = 최소 110).
	 *    남는 24px 은 그림·이름 아래위 숨통이다 — 줄이면 줄 사이가 붙어 보인다.
	 *    JS 가 구역 높이를 미리 계산할 때 읽으므로 네 값을 같이 고친다. */
	--aem-tile: 92px;
	--aem-art: 64px;
	--aem-name-h: 28px;   /* 이름 두 줄 자리 — 한 줄짜리도 같은 높이를 지켜야 격자가 가지런하다 */
	--aem-tile-h: 124px;
	--aem-gap: 16px;
	--aem-panel-w: 360px;

	/* 화면 위에 붙는 것들이 시작하는 높이. 셸이 band 모드에서 --otl-bar-h 로 60px 을 얹는다. */
	--aem-bar-top: var(--otl-bar-h, 0px);

	max-width: 1200px;
	margin: 0 auto;
	padding: 0 30px 48px;
	color: var(--aem-text);
}

/* ⚠️⚠️ **이 줄이 없으면 컨테이너가 1200 이 아니라 1260 이 된다.**
 * 이 테마는 전역 `* { box-sizing: border-box }` 가 없다(실측 — `.otl-band` 만 자기가 걸어 둔다).
 * 그래서 `max-width: 1200px` 이 **안쪽 폭**으로 잡히고 좌우 padding 30px 이 그 위에 더 붙어
 * 밴드 제목(1140px 자리)과 본문 왼쪽 끝이 **30px 어긋났다**(2026-09-24 운영자 지적).
 * 1024px 아래에서는 max-width 에 안 닿아 우연히 맞아떨어져서 더 늦게 드러났다.
 * 자매 도구(emoji.css:36)도 같은 줄을 맨 앞에 두고 있다. */
.aem-app,
.aem-app *,
.aem-app *::before,
.aem-app *::after { box-sizing: border-box; }

/* ⚠️ 로그인하면 워드프레스 관리자 바(32px)가 사이트 내비를 그만큼 내린다
 * (custom-navigation.css 의 `.admin-bar .oppadu-nav { top: 32px }`).
 * 이 보정이 없으면 **운영자 눈에만** 검색줄 위쪽이 내비 뒤로 숨는다.
 * 자매 도구(emoji.css)와 같은 모양이다 — 782px 아래에서는 관리자 바가 안 붙으므로 되돌린다. */
body.admin-bar .aem-app { --aem-bar-top: calc(var(--otl-bar-h, 0px) + 32px); }

@media screen and (max-width: 782px) {
	body.admin-bar .aem-app { --aem-bar-top: var(--otl-bar-h, 0px); }
}

.aem-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.aem-notice {
	margin: 16px 0;
	padding: 12px 16px;
	background: var(--aem-bg-soft);
	border-radius: var(--radius-md, 5px);
	color: var(--aem-text-2);
	font-size: 14px;
}

/* ── 레이아웃 ─────────────────────────────────────────── */

.aem-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aem-panel-w);
	gap: 24px;
	align-items: start;
}

.aem-picker { min-width: 0; }

/* ── 고정 머리말 ──────────────────────────────────────── */

.aem-head {
	position: sticky;
	/* --aem-bar-top 은 「상단 고정 크롬의 높이」다(셸 60px + 로그인 시 관리자 바 32px). */
	top: var(--aem-bar-top, 0px);
	z-index: 5;
	background: #fff;
	padding: 16px 0 10px;
}

.aem-searchbar {
	position: relative;
	display: flex;
	align-items: center;
}

.aem-search-icon {
	position: absolute;
	left: 18px;
	display: flex;
	color: var(--aem-muted);
	pointer-events: none;
}

/* ⚠️ 테마가 input 의 padding 을 먼저 정해 둬서(실측 15px) 한 겹으로는 진다.
 * !important 를 새로 쓰지 않고 **특이도로** 이긴다 — .aem-app 을 앞에 붙인 규칙이 정본이다. */
.aem-app input[type="search"].aem-search {
	width: 100%;
	height: 60px;
	padding: 0 48px 0 52px;
	font-size: 17px;
	color: var(--aem-text);
	background: #fff;
	border: 1px solid var(--aem-line-strong);
	border-radius: var(--radius-md, 5px);
}

.aem-search::placeholder { color: var(--aem-muted); }

/* ⚠️ 브라우저가 type="search" 에 자기 × 를 하나 더 그린다 → 우리 × 와 **두 개**가 된다.
 * 사이트의 다른 검색창(이모지 사전·위키·검색 포털)도 전부 이렇게 끄고 있다. */
.aem-app .aem-search::-webkit-search-cancel-button { display: none; }

/* 포커스는 한 겹으로 끝낸다 — outline + border + ring 을 겹치지 않는다 */
.aem-search:focus {
	outline: 2px solid var(--aem-brand);
	outline-offset: -1px;
	border-color: transparent;
}

/* ⚠️⚠️ 아이콘만 든 단추는 **padding 을 반드시 0 으로 되돌린다.**
 * 테마가 모든 button 에 `padding: 10px 20px` 를 먹이는데, 32px 칸에 좌우 40px 이 들어가면
 * 내용 폭이 **0** 이 되어 아이콘이 그려지지 않는다(칸은 남아 눌리기는 한다 — 그래서 더 안 보인다).
 * 2026-09-24 실측: 이 × 는 도구를 연 날부터 한 번도 안 보이고 있었다. */
.aem-search-clear {
	position: absolute;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var(--aem-muted);
	background: none;
	border: 0;
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

.aem-search-clear:hover { background: var(--aem-chip-bg); }
.aem-search-clear[hidden] { display: none; }

.aem-headrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

/* ── 분류 막대 ────────────────────────────────────────── */

.aem-cats {
	display: flex;
	flex: 1;
	min-width: 0;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	/* ⚠️ center 만 쓰면 넘칠 때 앞쪽이 잘린다 → safe center 를 바로 뒤에 한 줄 더 적는다
	 * (모르는 브라우저는 앞 줄을 쓴다) */
	justify-content: center;
	justify-content: safe center;
}

.aem-cats::-webkit-scrollbar { display: none; }

.aem-cat {
	flex: none;
	padding: 6px 11px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aem-text-2);
	background: #fff;
	border: 1px solid var(--aem-line);
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
	white-space: nowrap;
}

.aem-cat:hover { background: var(--aem-bg-soft); }

.aem-cat[aria-selected="true"] {
	color: var(--aem-brand);
	background: var(--aem-selected);
	border-color: transparent;
}


/* ── 「모두 재생」 토글 ───────────────────────────────── */

/* 좌우로 넘기는 스위치(2026-09-24 운영자). 기본값은 **켜짐**이다.
 * ⚠️ 완전 원형은 「아바타·dot·스위치·스피너 전용」이라는 디자인 규칙의 **스위치**가 바로 이것이다.
 *    칩·배지·진행바에는 여전히 쓰지 않는다. */
.aem-allplay {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 2px 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aem-text-2);
	background: none;
	border: 0;
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

.aem-allplay:hover { color: var(--aem-text); }

.aem-allplay:focus-visible {
	outline: 2px solid var(--aem-brand);
	outline-offset: 2px;
}

.aem-sw {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	background: var(--aem-line-strong);
	border-radius: var(--radius-full, 9999px);
	transition: background .15s ease;
}

.aem-sw-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
}

.aem-allplay[aria-checked="true"] { color: var(--aem-text); }
.aem-allplay[aria-checked="true"] .aem-sw { background: var(--aem-action); }
.aem-allplay[aria-checked="true"] .aem-sw-knob { transform: translateX(16px); }

/* ── 구역·격자 ────────────────────────────────────────── */

.aem-sec {
	/* 화면 밖 구역은 렌더를 건너뛴다. 높이는 JS 가 실제 값으로 넣는다 —
	 * 정사각 격자라 행 수를 정확히 계산할 수 있어서, 자매 도구의 「구역 이동이 어긋나는」
	 * 문제를 추정 높이 단계에서 없앤다. */
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
	scroll-margin-top: calc(var(--aem-bar-top, 0px) + var(--aem-head-h, 120px) + 8px);
}

.aem-sec.is-measuring {
	content-visibility: visible;
}

.aem-sec-title {
	margin: 20px 0 10px;
	font-size: 15px;
	font-weight: 700;
	color: var(--aem-text);
}

.aem-sec-n {
	margin-left: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--aem-muted);
}

.aem-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--aem-tile), 1fr));
	gap: var(--aem-gap);
}

/* 칸 = 「그림 + 이름」 두 층. 높이를 못 박아 둬야 이름이 한 줄이든 두 줄이든 격자가 가지런하다. */
.aem-t {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 100%;
	height: var(--aem-tile-h);
	padding: 6px 2px 8px;
	background: none;
	border: 0;
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

/* 그림 자리 — 2겹(정지·움직임)이 여기 겹쳐 앉는다.
 * ① 크기를 이 상자가 정하므로 레이아웃이 밀릴 수가 없다
 * ② 두 층이 **서로 반대로** 흐려져 깜빡임 없이 바뀐다(아래 「⭐ 두 층은 맞바꾼다」)
 * ③ 재생이 끝난 노드를 걷어내 기억(메모리)을 돌려받을 수 있다 */
.aem-t-art {
	position: relative;
	flex: none;
	width: var(--aem-art);
	height: var(--aem-art);
}

.aem-t-art img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.aem-t-name {
	width: 100%;
	height: var(--aem-name-h);
	overflow: hidden;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--aem-muted);
	text-align: center;
	/* 두 줄까지 보이고 넘치면 … — 한글은 낱말 단위로 끊는다 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-break: keep-all;
}

/* ⛔ background 에 transition 을 걸지 않는다 — 수백 칸 위를 스크롤할 때 계속 다시 칠해져 끊긴다 */
.aem-t:hover { background: var(--aem-bg-soft); }

.aem-t:focus-visible {
	outline: 2px solid var(--aem-brand);
	outline-offset: -2px;
}

/* ⭐⭐ 두 층은 **맞바꾼다.** 정지 층을 깔아 둔 채 움직이는 층만 띄우면
 * 이모지 그림이 투명 배경이라 **두 장이 그대로 겹쳐 보인다**(2026-09-24 운영자 지적).
 * 🎉 는 정지 그림이 색종이가 다 터진 모습이고 애니메이션 첫 장면은 빈 고깔이라,
 * 재생 내내 「터진 색종이」가 고깔 둘레에 박제된 채로 남았다.
 * → 움직이는 층이 떠오르는 만큼 정지 층이 가라앉는다. 둘 다 같은 시간으로 흐려야
 *   가운데에서 한쪽이 비어 보이지 않는다. */
.aem-play { opacity: 0; }
.aem-t.is-playing .aem-still { opacity: 0; }
.aem-t.is-playing .aem-play { opacity: 1; }
.aem-still,
.aem-play { transition: opacity .09s linear; }

.aem-t[aria-current="true"] { background: var(--aem-selected); }
.aem-t[aria-current="true"] .aem-t-name { color: var(--aem-text); }

/* ── 오른쪽 상세 칸 ───────────────────────────────────── */

/* 상세 칸은 **카드가 아니다.** 자매 도구(emoji.css:280)와 같은 문법 —
 * 흰 면·테두리·둥근 모서리를 걷어내고 **왼쪽 실선 하나**로만 격자와 나눈다
 * (「테두리와 그림자를 겹치지 않는다 · 구획은 hairline」 규칙, 2026-09-24 운영자 「간소화」).
 * ⚠️ 좁은 화면에서는 아래 미디어 쿼리가 이 값을 전부 덮어 **하단 시트**로 바뀐다 —
 *    거기서는 격자 위에 떠 있으므로 흰 배경과 padding 을 다시 준다. */
.aem-panel {
	position: sticky;
	top: calc(var(--aem-bar-top, 0px) + 16px);
	max-height: calc(100vh - var(--aem-bar-top, 0px) - 32px);
	overflow-y: auto;
	padding: 8px 0 16px 32px;
	border-left: 1px solid var(--aem-line);
	scrollbar-width: thin;
}

/* 닫기 단추는 **하단 시트일 때만** 있다(넓은 화면의 상세 칸은 닫을 것이 없다).
 * ⚠️ display 를 정하는 클래스라 `[hidden]` 짝을 같이 적는다 — 특이도가 같아 뒤에 쓴 쪽이 이긴다. */
.aem-close,
.aem-close[hidden] { display: none; }

/* ⚠️ 가운데 맞춤을 쓰지 않는다 — 미리보기만 가운데고 형식·크기·받기는 왼쪽이라
 * 한 칸 안에서 기준선이 두 개가 됐다. 자매 도구처럼 **전부 왼쪽**으로 맞춘다. */
.aem-pv-big {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 176px;
	background: var(--aem-bg-soft);
	border-radius: 8px;
}

.aem-pv-big img { width: 160px; height: 160px; object-fit: contain; }

.aem-pv-name {
	margin: 10px 0 0;
	font-size: 17px;
	font-weight: 700;
}

.aem-pv-label {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--aem-muted);
}

/* ⚠️ 짧은 이름이 비어 있는 이모지는 이름·설명이 같은 글자가 된다(😃 「눈을 크게 뜨고 웃는 얼굴」).
 * JS 가 그때 이 줄을 감춘다 — display 를 정하는 규칙이라 [hidden] 짝을 같이 적는다. */
.aem-pv-label[hidden] { display: none; }

/* 피부톤 고르기 — 51종에만 나온다 */
.aem-tones {
	display: flex;
	gap: 4px;
	margin-top: 14px;
}

.aem-tones[hidden] { display: none; }

.aem-tone {
	width: 40px;
	height: 40px;
	padding: 2px;
	background: #fff;
	border: 1px solid var(--aem-line);
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

.aem-tone img { width: 100%; height: 100%; object-fit: contain; }

/* 선택은 색 면이 아니라 테두리로 */
.aem-tone[aria-checked="true"] {
	border-color: var(--aem-brand);
	border-width: 2px;
	padding: 1px;
}

.aem-tone-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.aem-tone-row + .aem-tone-row { margin-top: 4px; }

.aem-tone-side {
	width: 42px;
	font-size: 12px;
	color: var(--aem-muted);
	text-align: right;
}

/* ── 형식 고르기 ──────────────────────────────────────── */

/* ⛔ 「형식」 소제목을 두지 않는다 — 칩이 [GIF][WebP] 둘뿐이라 라벨이 말해 줄 게 없다
 * (자매 도구의 상세 칸에도 소제목이 없다). 2026-09-24 운영자 「간소화」. */
.aem-pick { margin-top: 16px; }

.aem-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.aem-chip {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--aem-text-2);
	background: #fff;
	border: 1px solid var(--aem-line);
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

.aem-chip:hover { background: var(--aem-bg-soft); }

.aem-chip[aria-checked="true"] {
	color: #fff;
	background: var(--aem-action);
	border-color: transparent;
}

.aem-chip[aria-checked="true"]:hover { background: var(--aem-action-hover); }

.aem-spec {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--aem-muted);
}

/* ── 버튼 ─────────────────────────────────────────────── */

/* 단추는 [받기] 하나다 — 「담기」와 바스켓은 2026-09-24 운영자 결정으로 뺐다 */
.aem-actions {
	display: grid;
	margin-top: 16px;
}

.aem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--aem-text);
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--aem-line-strong);
	border-radius: var(--radius-md, 5px);
	cursor: pointer;
}

/* ⚠️⚠️ 받기 단추는 **`<a>` 다.** 테마의 `a:hover, a:focus, a:active { color: #1361A0 }`
 * (style.min.css)가 `.aem-btn`(특이도 0,1,0)보다 높아서(0,1,1) **마우스를 올리면 글자가
 * 파랑으로 바뀐다** — 초록 바탕 위 파랑이라 사실상 **안 보인다**
 * (2026-09-25 실측 rgb(19,97,160), 운영자 지적).
 * `!important` 를 새로 쓰지 않고 `.aem-app` 을 앞에 붙여 **특이도로 이긴다**(이 파일의 정본 방식).
 * ⚠️ 아래 두 덩어리는 **순서가 곧 규칙이다** — 특이도가 같으므로(0,2,0) 뒤에 쓴 primary 가 이긴다. */
.aem-app .aem-btn,
.aem-app .aem-btn:hover,
.aem-app .aem-btn:focus,
.aem-app .aem-btn:active {
	color: var(--aem-text);
	text-decoration: none;
}

.aem-app .aem-btn--primary,
.aem-app .aem-btn--primary:hover,
.aem-app .aem-btn--primary:focus,
.aem-app .aem-btn--primary:active { color: #fff; }

.aem-btn:hover { background: var(--aem-bg-soft); }

.aem-btn--primary {
	background: var(--aem-action);
	border-color: transparent;
}

.aem-btn--primary:hover { background: var(--aem-action-hover); }

/* ── 비회원 잠금 ──────────────────────────────────────
 *
 * 2026-09-25 운영자 결정으로 상세 칸이 두 겹이 됐다 —
 * 「**끌어다 놓기는 누구나**, 직접 받기는 회원만」.
 * 그래서 **미리보기는 또렷하게 두고**(끌어다 놓아야 하니까) 그 아래 이름·피부톤·형식·받기만
 * 흐리게 덮고, 그 위에 안내와 [로그인하기] 를 얹는다.
 *
 * ⚠️ `filter: blur` 는 디자인 규칙상 **새로 들이지 않는 것**이지만 운영자가 직접 지시한
 *    잠금 연출이다(2026-09-25). 장식이 아니라 「여기는 아직 못 쓴다」는 기능 표시다.
 * ⚠️ 흐린 층은 마크업에 `inert` 가 걸려 **키보드·낭독기에서 빠진다.** CSS 는 마우스만 막는다.
 * ⚠️ 닫기 단추(.aem-close)는 이 층 밖에 있다 — 안에 두면 좁은 화면 시트에 갇힌다. */

.aem-lock { position: relative; }

.aem-lock-veil {
	filter: blur(4px);
	opacity: .45;
	pointer-events: none;
	user-select: none;
}

/* ⚠️ 흰 막이 없으면 흐린 피부톤·칩 위에 글자가 얹혀 **안 읽힌다**(2026-09-25 화면으로 확인).
 * 막은 덮는 층 전체에 깔아 안내와 단추가 또렷한 바탕 위에 서게 한다. */
.aem-lock-over {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px;
	text-align: center;
	background: rgba(255, 255, 255, .66);
}

.aem-lock-msg {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--aem-text);
	word-break: keep-all;
}

.aem-lock-over .aem-btn { padding: 0 20px; }

.aem-lock-sub {
	margin: 0;
	font-size: 12px;
	color: var(--aem-muted);
	word-break: keep-all;
}

/* ⚠️ 마우스가 없는 기기엔 **끌어다 놓을 데가 없다** — 안 되는 길을 안내하지 않는다.
 * 폭이 아니라 `hover` 로 가른다(마우스 달린 태블릿은 그대로 보여 준다). */
@media (hover: none) {
	.aem-lock-sub { display: none; }
}

/* ── 고지 ─────────────────────────────────────────────── */

.aem-credit {
	font-size: 13px;
	color: var(--aem-muted);
}

/* ⚠️ 위 단추와 같은 뿌리 — 테마 `a:hover` 의 **파랑(#1361A0)이 이 도구의 링크에도 샌다**
 * (2026-09-25 실측). 디자인 규칙은 「파랑 링크를 새로 만들지 않는다」이므로 특이도로 막는다.
 * 고지 줄은 한 단 짙어지고, 「이모지 사전에서 찾기」는 브랜드 초록 그대로 둔다. */
.aem-app .aem-credit a:hover,
.aem-app .aem-credit a:focus { color: var(--aem-text); }

.aem-app .aem-empty-cross a:hover,
.aem-app .aem-empty-cross a:focus { color: var(--aem-brand); }

.aem-credit a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ⛔ 받기 단추 아래의 CC BY 한 줄은 2026-09-25 운영자 지시로 **뺐다** —
 * 상세 칸이 짧아 맨 끝 고지와 두 줄로 겹쳐 보였다. 고지는 문서 맨 끝 한 곳이 정본이고,
 * `_shared-assets/licenses/` 의 원문 사본이 함께 남는다. */
.aem-credit--foot {
	margin: 32px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--aem-line);
}

/* ── 토스트 ───────────────────────────────────────────── */

.aem-toast {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	max-width: min(92vw, 420px);
	padding: 10px 16px;
	font-size: 14px;
	color: #fff;
	background: var(--gray-900, #181818);
	border-radius: var(--radius-md, 5px);
}

.aem-toast[hidden] { display: none; }

/* ── 결과 없음 ────────────────────────────────────────── */

.aem-empty {
	padding: 40px 0 8px;
	text-align: center;
}

.aem-empty-h { margin: 0; font-size: 16px; font-weight: 700; }
.aem-empty-sub { margin: 6px 0 16px; font-size: 14px; color: var(--aem-muted); }

.aem-empty-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

/* ⭐ 881개는 이모지 사전 1,652개의 부분집합이라 「없음」이 자주 난다(✔️ 📌 📄 …).
 * 빈손으로 돌려보내지 않고 자매 도구로 넘긴다. */
.aem-empty-cross {
	margin: 20px 0 0;
	font-size: 13px;
	color: var(--aem-muted);
}

.aem-empty-cross a { color: var(--aem-brand); }

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 64rem) {
	.aem-app {
		padding: 0 24px 40px;
		--aem-tile: 84px;
		--aem-art: 56px;
		--aem-tile-h: 116px;
		--aem-gap: 12px;
	}

	.aem-layout { grid-template-columns: minmax(0, 1fr); }

	/* 상세는 하단 시트로. ⚠️ JS 의 matchMedia 문자열이 이 줄과 글자까지 같아야 한다.
	 * ⚠️ 넓은 화면 쪽은 「왼쪽 실선만 있는 칸」이라 흰 면도 padding 도 없다 —
	 *    여기서는 격자 **위에 떠 있으므로** 둘 다 다시 줘야 한다. */
	.aem-panel {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 30;
		max-height: 82vh;
		overflow-y: auto;
		padding: 20px;
		background: #fff;
		border: 0;
		border-top: 1px solid var(--aem-line);
		border-radius: 12px 12px 0 0;
		transform: translateY(100%);
		transition: transform .18s ease-out;
	}

	.aem-panel.is-open { transform: translateY(0); }
	.aem-panel[hidden] { display: none; }

	.aem-close {
		display: flex;
		align-items: center;
		justify-content: center;
		position: sticky;
		top: 0;
		z-index: 1;
		margin: -6px -6px 2px auto;
		width: 40px;
		height: 40px;
		padding: 0;   /* ⚠️ 테마의 button padding 10px 20px 를 되돌린다 — 안 하면 아이콘 폭이 0 이 된다 */
		color: var(--aem-muted);
		background: #fff;
		border: 0;
		border-radius: var(--radius-md, 5px);
		cursor: pointer;
	}

	.aem-close:hover { background: var(--aem-bg-soft); }
	.aem-close[hidden] { display: none; }
}

@media (max-width: 48rem) {
	.aem-app {
		padding: 0 20px 32px;
		--aem-tile: 76px;
		--aem-art: 48px;
		--aem-name-h: 26px;
		--aem-tile-h: 106px;
		--aem-gap: 10px;
	}

	.aem-search { height: 52px; font-size: 16px; }
	.aem-t-name { font-size: 10px; }

	/* ⚠️ 예전엔 좁은 화면에서 `.aem-allplay span` 을 통째로 숨겼다. 스위치도 span 이라 같이
	 * 사라지고, 낭독기가 읽을 이름도 없어졌다 → **라벨만** 지목해 줄인다. */
	.aem-allplay { gap: 6px; font-size: 12px; }
}

/* ── 움직임을 줄여 달라고 한 사람 ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
	/* ⚠️ 「모두 재생」 스위치 자체는 그대로 쓸 수 있다 — 이 설정은 금지가 아니라 기본값이다.
	 * 다른 사람에겐 켜진 채로 시작하지만, 여기서는 **꺼진 채로** 시작하고 hover 자동 재생도 끈다.
	 * 두 층은 전환 없이 **한 번에** 맞바뀐다 — 겹쳐 보이는 순간이 아예 없다. */
	.aem-still,
	.aem-play,
	.aem-sw,
	.aem-sw-knob,
	.aem-panel {
		transition: none;
	}
}

/* 고대비 모드 — 선택·활성 표시를 outline 으로 다시 그린다(색 면이 무시되므로) */
@media (forced-colors: active) {
	.aem-cat[aria-selected="true"],
	.aem-chip[aria-checked="true"],
	.aem-allplay[aria-checked="true"],
	.aem-t[aria-current="true"] {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}
}