/**
 * 잠금 안내창(카드) — 슬라이드 갤러리 · 브랜드 룩북 · 모션 스타일이 같이 쓴다
 * (2026-10-19 운영자 「슬라이드 갤러리 · 브랜드 룩북도 모션 스타일 오른쪽 알림처럼 모던하고 세련된 안내창 · 팝업 말고 안내창」).
 * 마크업 = inc/ai-quota.php oppadu_aiq_lock_card()(guest · take · used 세 판) · 얹는 자리와 흐림은 도구마다
 *   (슬라이드 tools/_slide-styles-assets/js/app.js · 룩북 tools/design-systems-site/assets/app.js · 모션 tools/_motion-styles-assets/js/light.js).
 * 같은 날 2차 운영자: 아직 안 고른 칸도 이 카드(take — 사진 · 문구만 다른 「보시겠어요?」 · [보기]는 <button> 검은 단추) · 슬라이드도 오른쪽 칸 전체를 흐린 위에 이 카드.
 * 모양 = 10/14 모션 잠금 카드(시안 C Magnific)를 옮겨 왔다 — 그전엔 tools/_motion-styles-assets/css/light.css 의 .msl-lkc-* 였다.
 *   흰 카드 · 위 사진 칸 · 회색 꼬리표 · 아주 굵은 제목 두 줄 · 한 줄 · 점 목록 · 검은 단추 + 글자 단추.
 * ⚠️ 카드 16px · 회색 꼬리표 3px · 검은 채움 단추 8px 은 사이트 규칙의 예외(.claude/rules/css.md — 시안 C 를 고를 때 다른 점으로 보이고 고름).
 *    멤버십 잠금 카드(css/membership.css .msh-gate-*)도 같은 모양이다 — 값을 고칠 땐 두 곳을 같이.
 * 세 화면의 도구 CSS 가 a · p · ul · li · button 을 저마다 꾸미므로 .aql 을 앞에 붙여 직접 지운다.
 * 좁은 칸(슬라이드 상세 오른쪽 320~360px)에서는 카드 폭을 보고 여백 · 제목을 줄인다(container query). 슬라이드는 높이도 낮아 사진 띠를 더 줄인다(slide-styles.css .sls-v-lock).
 * (1차의 떠 있는 초록 [보기] 단추 .aql-takebox 는 2차에서 걷었다 — git 이력)
 */

.aql {
	container-type: inline-size;
	flex: 1 1 auto; /* 가로 flex 덮개(모션 .msl-lock · 룩북 .dsv-lock) 안에서도 폭을 다 쓴다 */
	min-width: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 36px 16px 24px;
	text-align: left;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.aql *,
.aql *::before,
.aql *::after {
	box-sizing: border-box;
}

.aql-card {
	width: min(100%, 440px);
	overflow: hidden;
	border-radius: 16px; /* 예외 — 시안 C(모션 잠금 카드) */
	background: var(--surface-white, #ffffff);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
	color: var(--gray-900, #181818);
}

.aql-fig {
	position: relative;
	height: 150px;
	overflow: hidden;
	background: var(--gray-100, #f4f4f4);
}

.aql .aql-fig img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: 50% 45%;
}

.aql-body {
	display: flex;
	flex-direction: column;
	padding: 26px 30px;
}

.aql .aql-tag {
	align-self: flex-start;
	margin: 0;
	padding: 4px 8px;
	border-radius: var(--radius-sm, 3px); /* 예외 — 배지 6px 규칙(시안 C) */
	background: color-mix(in srgb, var(--gray-100, #f4f4f4) 50%, var(--gray-200, #e7e7e7));
	color: var(--gray-800, #282828);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

.aql .aql-h {
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	color: var(--gray-900, #181818);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.18;
	letter-spacing: -0.04em;
}

.aql .aql-d {
	margin: 10px 0 0;
	color: var(--gray-700, #404040);
	font-size: 15px;
	line-height: 1.6;
}

.aql .aql-d2,
.aql .aql-pick {
	margin: 4px 0 0;
	color: var(--gray-500, #727272);
	font-size: 13.5px;
	line-height: 1.6;
}

.aql .aql-pick {
	margin-top: 8px;
}

.aql .aql-pick[hidden] {
	display: none;
}

.aql .aql-lh {
	margin: 18px 0 0;
	color: var(--gray-900, #181818);
	font-size: 14px;
	line-height: 1.6;
}

.aql .aql-ul {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.aql .aql-ul li {
	position: relative;
	margin: 0;
	padding: 0 0 0 17px;
	color: var(--gray-900, #181818);
	font-size: 14px;
	line-height: 1.75;
	list-style: none;
}

.aql-ul li::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.aql-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.aql .aql-form {
	display: flex;
	flex: 1 1 auto;
	margin: 0;
}

.aql .aql-go,
.aql .aql-alt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	margin: 0;
	border: 0;
	border-radius: 8px; /* 예외 — 시안 C */
	box-shadow: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

.aql .aql-go,
.aql .aql-go:visited,
.aql .aql-go:focus,
.aql .aql-go:active {
	padding: 0 24px;
	background: var(--gray-900, #181818);
	color: var(--surface-white, #ffffff);
	text-decoration: none;
}

.aql .aql-alt,
.aql .aql-alt:visited,
.aql .aql-alt:focus,
.aql .aql-alt:active {
	flex: 1 1 auto;
	gap: 6px;
	padding: 0 12px;
	background: transparent;
	color: var(--gray-900, #181818);
	text-decoration: none;
}

@media (hover: hover) {
	.aql .aql-go:hover {
		background: var(--gray-800, #282828);
		color: var(--surface-white, #ffffff);
	}

	.aql .aql-alt:hover {
		background: var(--gray-50, #f7f7f7);
		color: var(--gray-900, #181818);
	}
}

.aql .aql-go svg,
.aql .aql-alt svg {
	flex: none;
}

/* [보기](take — 그날의 1개를 쓰는 <button>) — 누른 뒤 답을 기다리는 동안 · 룩북 위 [복사]를 먼저 누르면 이 단추를 잠깐 짚어 준다(app.js nudge) */
.aql .aql-go:disabled {
	opacity: 0.7;
	cursor: progress;
}

.aql .aql-go.is-nudge {
	outline: 3px solid var(--brand-focus, #037450);
	outline-offset: 3px;
}

.aql .aql-more,
.aql .aql-more:visited {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 2px;
	margin-top: 14px;
	color: var(--gray-600, #545454);
	font-size: 13px;
	line-height: 1.5;
	text-decoration: none;
}

@media (hover: hover) {
	.aql .aql-more:hover {
		color: var(--gray-900, #181818);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* 단추 아래 한 줄(글자만) — 연동 전 「쓴 뒤」 카드: 「아직 멤버가 아니라면 연동한 뒤 바로 가입할 수 있어요.」
 * (2026-10-20 운영자 「연동부터 · 가입 단추는 연동 뒤에」 — 3차의 설명 줄 안 연동 링크 .aql-d2 a 는 [유튜브 채널 연동하기] 단추가 되어 걷었다) */
.aql .aql-note {
	margin: 12px 0 0;
	color: var(--gray-500, #727272);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: balance; /* 슬라이드 오른쪽 칸(본문 272px)에선 두 줄 — 끝 낱말 하나만 넘어가지 않게 고르게 */
}

/* 맨 아래 작은 줄 — 연동했는데 아직 멤버가 아닌 사람: 「이미 가입했다면 다시 확인 ›」(폼 단추) · 「연동 상태 보기 ›」 */
.aql-mores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin-top: 14px;
}

.aql .aql-mores .aql-more {
	margin-top: 0;
}

.aql .aql-form--more {
	flex: none;
}

.aql button.aql-more,
.aql button.aql-more:focus,
.aql button.aql-more:active {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-family: inherit;
	cursor: pointer;
}

.aql :focus-visible {
	outline: 2px solid var(--brand-focus, #037450);
	outline-offset: 2px;
}

/* 좁은 칸 — 슬라이드 상세 오른쪽(320~360px) · 폰 */
@container (max-width: 400px) {
	.aql-fig {
		height: 120px;
	}

	.aql-body {
		padding: 22px 20px;
	}

	.aql .aql-h {
		font-size: 24px;
	}

	.aql .aql-go,
	.aql .aql-go:visited,
	.aql .aql-go:focus,
	.aql .aql-go:active {
		padding: 0 18px;
	}
}

@media (max-width: 760px) {
	.aql-fig {
		height: 128px;
	}

	.aql-body {
		padding: 22px;
	}

	.aql .aql-h {
		font-size: 25px;
	}
}