/**
 * AI 질문 화면(/ask/ · /ask/mine/ · /ask/{번호}/ — templates/ask.php · assets/ask.js) — 2026-11-04 1단계.
 * /ask/ = 2026-11-04 운영자 색감 시안 「G3 엑셀 시트 바탕」 채용(claude.ai 아티팩트 ErExCdwskLmMwW71Akat2T · 그 앞 「Gemini형 배치」 CRekxq3xRX5SrWHh8agswf):
 *   옅은 엑셀 시트 칸 위 인사말 32/700 한 줄 + 흰 칸 하나(672 · 8 · 접힘 58) → 누르면 칸이 커지며 글 · 파일 · 쓰는 엑셀 · [보내기] 초록 6px · [엑셀 · 그림 올리기] [예시 질문 보기].
 *   ⚠️ 정본과 다른 점(시안 카드에 적어 보이고 고름 — .claude/rules/css.md 예외 줄): 시트 무늬 바탕 · 흰 칸에 테두리와 그림자를 같이. 이 화면 첫 화면에만.
 * 답 = 대화형(11/5 시안 B Claude형 — 왼쪽 내 질문 목록 280 + 대화 칸 · 정본과 다른 점은 6절 머리) · 같은 날 「새 질문 / 내 질문 탭을 지우고 좌측에 패널」 →
 *   「전체 엑셀 배경 위에 대화 내역이 좌측 스티키로 고정 · 2번(답) 화면에서도 전체 배경이 엑셀 시트」 → 「좌측 패널은 왼쪽 고정 · 기존 질문 영역은 100% width 기준 가운데」 →
 *   「패널 접고 펴기 · 채팅창 영역도 그에 따라 중앙 정렬 · 채팅 영역은 조금 더 넓게 · 광고는 가로 작은 배너로」 → 「패널 켠 경우 질문 영역도 남아있는 영역 중앙」: 하위 메뉴 줄 없이 PC 세 화면 모두 시트 바탕 가득 + 흰 칸
 *   (화면 왼쪽 끝 목록 — 붙어 따라옴 · 접기 단추 · 답 · 내 질문은 대화 종이 1,042 · 글 칸 960 — 6절 · 첫 화면 = 회원만 목록 — 3절) · 흰 칸 위쪽 = 메뉴 줄 아래 46(시트 열 머리 30 + 16). 폰 답 · 내 질문은 시트 없이 그대로.
 * 칸 · 입력 · 단추 · 고르기 단추 · 목록 = 7.14 앱 짜임 값(회색 100 면 · 칸 8 · 단추 42/14·600/6 · 고른 칸 = 흰 칸 + 그림자 · 줄 사이 선).
 *   ⚠️ 공용 css/pcf-ui.css 는 PC(1025 이상)에만 실린다 — 폰에서도 같은 모양이 나오게 이 파일이 같은 값을 갖는다(값을 바꿀 땐 정본 7.14 와 함께).
 * 채운 단추 = 화면마다 하나(--brand-action) · 성공 글자 = --color-success-text.
 * 색은 라이브 토큰(css/tokens.css)만 — :root 에 정본 이름을 다시 적지 않는다. ⛔ 그라디언트 · blur · !important · 좌측 컬러바 없음(시트 칸 선 = 그림 한 장).
 * 움직임 = 기다리는 동안 도는 표시 하나(기능 — 움직임 줄이기와 상관없이 돈다 · 멈추면 고장 난 화면처럼 보인다)
 *   + /ask/ 첫 화면이 처음 한 번 올라오며 나타남 · 칸 펼침 · 접힘 · 고르는 창 · 예시 질문 · 알림(11/4 운영자 「스르륵, 고급스럽게」 — 6-1절 · assets/ask.js · 움직임 줄이기면 모두 끈다).
 */

/* ════ 1. 자리 — 머리글과 같은 가운데 칸(정본 v4 13.2 「본문 여백 함정」 — /coupon/ 과 같다) ════ */
body.aq-page #page.grid-container {
	max-width: 100%;
}

body.aq-page main#main.site-main {
	padding-left: 0;
	padding-right: 0;
}

.aq {
	--aq-w: min(1260px, calc(100% - 48px));
	--aq-shift: 171px; /* 왼쪽 목록을 펴면 질문 칸 · 광고를 남은 폭 가운데로 — 목록 오른쪽 끝 342 의 반 · 접으면 0(6절) */
	--aq-cell: var(--gray-100);
	--aq-cell-hi: var(--gray-200);
	--aq-sep: var(--gray-200);
	--aq-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	color: var(--gray-900);
	font-size: 15px;
	line-height: 1.55;
	word-break: keep-all;
	overflow-wrap: anywhere;
	background: var(--surface-white);
}

.aq-w {
	box-sizing: border-box;
	width: var(--aq-w);
	margin-left: auto;
	margin-right: auto;
}

.aq a {
	color: inherit;
	text-decoration: none;
}

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

.aq svg {
	flex: none;
}

/* ════ 2. 단추 — 7.3 · 7.14(기본 = 회색 면 보조 · 주 단추만 초록) ════ */
.aq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 42px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 6px;
	background: var(--aq-cell);
	color: var(--gray-900);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.aq a.aq-btn {
	color: var(--gray-900);
}

.aq-btn:hover {
	background: var(--aq-cell-hi);
}

.aq-btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-btn--primary,
.aq a.aq-btn--primary {
	background: var(--brand-action);
	color: var(--surface-white);
}

.aq-btn--primary:hover,
.aq a.aq-btn--primary:hover {
	background: var(--brand-hover);
	color: var(--surface-white);
}

.aq-btn--ghost {
	background: transparent;
}

.aq-btn[disabled],
.aq-btn[aria-disabled="true"] {
	background: var(--gray-200);
	color: var(--gray-500);
	cursor: default;
}

/* ════ 3. /ask/ 첫 화면 — 엑셀 시트 바탕 위 인사말 + 흰 칸 하나(G3 · Gemini형 배치) ════ */
.aq-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: calc(100vh - 132px - var(--wp-admin--admin-bar--height, 0px)); /* 새 틀 머리글 76 + 메뉴 줄 56(하위 메뉴 줄은 11/5 에 뺐다) */
	padding: 48px 24px 24px;
}

/* 회원 — 시트 가득 위 화면 왼쪽 끝(행 번호 칸 46 + 16)에 내 질문 목록 흰 칸(답 · 내 질문 화면과 같은 자리 · 같은 모양 — 6절) ·
   인사말 · 질문 칸 · 광고 = 목록을 펴면 남은 폭 가운데 · 접으면 전체 폭 가운데(답 화면 대화 종이와 같은 규칙).
   2026-11-05 운영자 「새 질문 / 내 질문 탭을 지우고, 좌측에 패널 같이 띄워서 한 번에 관리」 → 「전체 엑셀 배경 위에 대화 내역이 좌측 스티키로 고정」 →
   「좌측 패널은 왼쪽 고정 · 기존 질문 영역은 100% width 기준 가운데 정렬」 → 「좌측 패널 켠 경우 질문 영역도 남아있는 영역 중앙 정렬」 · 손님은 목록 없이 그대로 */
.aq-stage--side .aq-side {
	position: absolute;
	top: 46px;
	left: 62px;
	z-index: 1;
	width: 280px;
	height: calc(100% - 70px); /* 넘기지 않는 화면 — 위 46 · 아래 24 빼고 무대 높이 가득(처음 자리 · 크기는 답 · 내 질문 화면과 같다 · 접을 때 높이가 움직이게 값으로) */
}

/* 인사말 · 질문 칸(672) — 좁은 폭에선 목록에 닿지 않게 줄어든다(100% = 무대 안쪽 폭) */
.aq-stage--side .aq-stage-in {
	left: var(--aq-shift);
	width: min(672px, calc(100% - 342px));
}

/* 시트 — 칸 선은 그림 한 장(가로 96 · 세로 30)을 깔고 열 머리 · 행 번호만 글자로(꾸밈 — 읽는 이에겐 숨김) */
.aq-sheet {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden; /* 넘침 자르기는 시트에만 — 무대에 두면 쓰는 엑셀 고르는 창이 잘린다 */
	opacity: .8;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30'%3E%3Cpath d='M95.5 0V30M0 29.5H96' fill='none' stroke='%23e7e7e7'/%3E%3C/svg%3E") 46px 30px;
}

.aq-sheet-corner,
.aq-sheet-cols span,
.aq-sheet-rows span {
	box-sizing: border-box;
	border-right: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	background: var(--gray-50);
	font-size: 12px;
	line-height: 29px;
	text-align: center;
	color: var(--gray-400);
}

.aq-sheet-corner {
	position: absolute;
	top: 0;
	left: 0;
	width: 46px;
	height: 30px;
}

.aq-sheet-cols {
	position: absolute;
	top: 0;
	right: 0;
	left: 46px;
	display: flex;
	height: 30px;
	overflow: hidden;
}

.aq-sheet-cols span {
	flex: none;
	width: 96px;
	height: 30px;
}

.aq-sheet-rows {
	position: absolute;
	top: 30px;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 46px;
	overflow: hidden;
}

.aq-sheet-rows span {
	flex: none;
	height: 30px;
}

.aq-stage-in {
	position: relative;
	z-index: 2; /* 쓰는 엑셀 고르는 창이 아래 안내 칸 위로 */
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(672px, 100%);
	margin-top: auto; /* 남는 높이를 아래 안내 칸(.aq-note)과 나눠 — 인사말 · 질문 칸 · 광고가 그 위 가운데 */
}

/* 인사말 — 글자 뒤만 흰 면(시트 선이 글자를 지나지 않게) */
.aq-hi {
	margin: 0 0 30px;
	padding: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--gray-900);
}

.aq-hi span {
	padding: 2px 12px;
	background: var(--surface-white);
}

/* 흰 칸 — 8 · 테두리 + 그림자(G3 — 위 머리 주석의 「정본과 다른 점」) */
.aq-ask {
	width: 100%;
	margin: 0;
}

.aq-card {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

.aq-card:focus-within {
	border-color: var(--gray-400);
}

.aq-card.is-drag {
	background: var(--gray-50);
}

/* 접힌 한 줄 — [＋ · 안내](누르면 펼침) · [쓰는 엑셀 ⌄](누르면 고르는 창만) · 손님은 줄 전체가 로그인 링크 */
.aq-line {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	height: 58px;
	margin: 0;
	padding: 0 9px 0 0;
}

.aq-line-open {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 6px 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	text-align: left;
	cursor: text;
}

.aq-line-open:focus-visible,
a.aq-line--login:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq a.aq-line--login {
	gap: 6px;
	padding-left: 12px;
	cursor: pointer;
}

.aq-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	color: var(--gray-700);
}

.aq-ph {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 16px;
	color: var(--gray-500);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 쓰는 엑셀 — 단추 + 고르는 창(흰 칸 · 테두리 + 그림자 · 고른 칸 ✓ 검정) · 아래 자리가 모자라면 위로 연다(assets/ask.js) */
.aq-vp {
	position: relative;
	flex: none;
}

.aq-ver {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 36px;
	margin: 0;
	padding: 0 8px 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.aq-ver:hover,
.aq-ver[aria-expanded="true"] {
	background: var(--gray-100);
}

.aq-ver:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-ver svg {
	color: var(--gray-500);
	transition: transform .2s ease;
}

.aq-ver[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.aq-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	box-sizing: border-box;
	min-width: 212px;
	padding: 6px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
	text-align: left;
}

.aq-menu.is-up {
	top: auto;
	bottom: calc(100% + 6px);
}

.aq-menu-h {
	margin: 0;
	padding: 6px 10px 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--gray-500);
}

.aq-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-sizing: border-box;
	height: 38px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 14px;
	white-space: nowrap;
	color: var(--gray-900);
	cursor: pointer;
}

.aq-opt:hover {
	background: var(--gray-50);
}

.aq-opt:focus {
	outline: 0;
	background: var(--gray-100);
}

.aq-opt[aria-selected="true"] {
	font-weight: 600;
}

.aq-opt svg {
	visibility: hidden;
	color: var(--gray-900);
}

.aq-opt[aria-selected="true"] svg {
	visibility: visible;
}

/* 알림 — 첨부가 많거나 형식이 맞지 않을 때 화면 아래에 잠깐(assets/ask.js toast) */
.aq-toast {
	position: fixed;
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	z-index: 9990;
	box-sizing: border-box;
	max-width: min(440px, calc(100% - 32px));
	padding: 12px 18px;
	border-radius: 8px;
	background: var(--gray-900);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	font-size: 14px;
	line-height: 1.5;
	color: var(--surface-white);
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}

.aq-toast.is-on {
	opacity: 1;
	transform: translate(-50%, 0);
}

.aq .aq-line-go {
	flex: none;
	height: 40px;
}

.aq-ask.is-open .aq-line {
	display: none;
}

/* 펼친 칸 — 글 · [＋ 파일 칩 … 쓰는 엑셀 · 보내기] · [엑셀 · 그림 올리기] [예시 질문 보기] */
.aq-panel {
	padding: 18px 14px 12px 20px;
}

.aq-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 0;
}

.aq-plus--btn {
	position: relative;
	margin-left: -8px;
	cursor: pointer;
}

.aq-plus--btn:hover {
	background: var(--gray-100);
}

.aq-plus--btn:focus-within {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* Autopilot 스위치(11/7) — 이름 + 밀어 켜는 칸(켜짐 = 초록 · 입력 조작부) · 곁말 = 지금 상태 · 못 켜는 달(크레딧 모자람)은 흐리고 누르면 안내만(assets/ask.js makeAuto) */
.aq-auto-box {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.aq-auto,
.aq-auto:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.aq-auto:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-auto:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-auto-t {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: var(--radius-full);
	background: var(--gray-300);
	transition: background .2s ease;
}

.aq-auto-t::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-full);
	background: var(--surface-white);
	transition: transform .2s ease;
}

.aq-auto[aria-checked="true"] .aq-auto-t {
	background: var(--brand-action);
}

.aq-auto[aria-checked="true"] .aq-auto-t::after {
	transform: translateX(14px);
}

.aq-auto[aria-disabled="true"],
.aq-auto[aria-disabled="true"]:hover {
	background: transparent;
	color: var(--gray-400);
	cursor: default;
}

.aq-auto[aria-disabled="true"] .aq-auto-t {
	background: var(--gray-200);
}

.aq-auto-s {
	font-size: 13px;
	line-height: 1.4;
	color: var(--gray-500);
	white-space: nowrap;
}

.aq-sp {
	flex: 1 1 auto;
}

.aq .aq-send {
	height: 40px;
}

/* 보내는 중 — 단추는 막되 초록 그대로(「파일 올리는 중 N%」를 읽히게 — 숫자 폭 고정) */
.aq .aq-send.is-busy {
	background: var(--brand-action);
	color: var(--surface-white);
	font-variant-numeric: tabular-nums;
	cursor: progress;
}

.aq-btn2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 40px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	background: var(--surface-white);
	color: var(--gray-900);
	font: inherit;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.aq-btn2:hover {
	background: var(--gray-50);
}

.aq-btn2:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

/* 칸 아래 안내는 펼쳤을 때만(국외 이전 동의 칸은 11/9 뺐다 — includes/member.php) */
.aq-ask:not(.is-open) [data-aq-when-open] {
	display: none;
}

/* 닫힘 · 내 질문 링크 */
.aq-closed {
	padding: 18px 20px;
	text-align: center;
}

.aq-closed p {
	margin: 0;
	font-size: 15px;
	color: var(--gray-700);
}

.aq .aq-closed a,
.aq .aq-empty a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.aq-minelink {
	display: none; /* PC 는 왼쪽 내 질문 목록 — 폰만(7절) */
	margin: 18px 0 0;
	padding: 2px 8px;
	background: var(--surface-white);
	font-size: 14px;
}

.aq a.aq-minelink {
	color: var(--gray-500);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 큰 배너(970×250 · PC 만) — 질문 칸 아래 64(펼치면 같이 밀려 간격 그대로 · 고르는 창이 덮을 땐 위로 연다 — assets/ask.js) · 광고 칸은 움직이지 않는다 */
.aq-ad {
	position: relative;
	z-index: 1;
	max-width: 100%;
	margin: 64px 0 0;
}

/* 왼쪽 목록이 있으면 가로 배너(728)도 질문 칸과 같은 가운데 — 남은 폭에 안 들어가는 폭(1,118 이하)은 숨김
   (위키 칸 광고 .wk-colad 와 같은 방식 · 숨은 칸은 구글이 요청하지 않는다) */
.aq-stage--side .aq-ad {
	left: var(--aq-shift);
	max-width: none;
}

@media (max-width: 1118px) {
	.aq-stage--side .aq-ad {
		display: none;
	}
}

/* 안내 — 첫 화면 맨 아래(11/5 운영자 「푸터랑 하단 광고 뺍시다 · 대신 ai 입력 처음 시작할 때 하단에 고지를 띄우거나 새로운 기능 안내」 — Claude 첫 화면 아래 칸)
   새로운 기능 칸 셋(테두리만 — 질문 칸보다 조용하게) + AI 고지 한 줄 · 시트 선이 글자를 지나지 않게 글 뒤는 흰 면 · 질문 칸과 같은 가운데
   (사업자 정보 · 저작권 · 약관 링크 줄은 11/9 운영자 「이번엔 새로운 기능만 표시」로 뺐다 — 펼쳤을 때 오른쪽 스크롤 · AI 고지 한 줄은 이용약관 제15조의2 ① 때문에 남김) */
.aq-note {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(728px, 100%);
	margin: auto 0 0;
	padding-top: 32px;
}

.aq-stage--side .aq-note {
	left: var(--aq-shift);
	width: min(728px, calc(100% - 342px));
}

.aq .aq-note-h {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--gray-500);
}

.aq-note-h span {
	padding: 1px 8px;
	background: var(--surface-white);
}

.aq-note-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-note-card {
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
}

.aq .aq-note-t {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gray-900);
}

.aq .aq-note-s {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gray-500);
}

.aq-legal {
	margin: 12px auto 0;
	width: fit-content;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--surface-white);
	font-size: 11px;
	line-height: 1.7;
	text-align: center;
	color: var(--gray-500);
}

.aq .aq-legal p {
	margin: 0;
	font-size: inherit; /* 폰 틀의 p 글자 크기를 받지 않게 */
	line-height: inherit;
}

/* ════ 4. 칸 안 부품 — 글 · 파일 칩 · 쓰는 엑셀 · 동의 · 안내 ════ */
.aq-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 96px;
	margin: 0;
	padding: 0 8px 0 0;
	border: 0;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	font-size: 16px;
	line-height: 1.65;
	resize: vertical;
}

.aq-text::placeholder {
	color: var(--gray-400);
}

.aq-text:focus {
	outline: 0;
}

/* 고른 파일 — 칸 면과 반대(회색 칸 위 흰 면 · 쓰는 동안 회색 면) — 정본 v4 13.6 댓글 칸과 같다 */
.aq-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	box-sizing: border-box;
	height: 34px;
	padding: 0 4px 0 10px;
	border: 1px solid var(--gray-200);
	border-radius: 6px;
	background: var(--surface-white);
	font-size: 13px;
	color: var(--gray-900);
}

.aq-chip svg {
	color: var(--gray-700);
}

.aq-chip-n {
	overflow: hidden;
	max-width: 240px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aq-chip-s {
	color: var(--gray-500);
}

.aq-chip button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
}

.aq-chip button:hover {
	background: var(--aq-cell-hi);
	color: var(--gray-900);
}

/* 붙인 그림 — 작은 그림 칸 64 · 8(그림)(누르면 크게 보기 — assets/ask.js openViewer) · 귀퉁이 × — 11/4 운영자 「이미지 넣은 경우 미리보기」
   고른 파일 줄은 글 칸 바로 아래(templates/ask.php) — 엑셀 이름 칩은 그림 칸 가운데 높이에 맞춘다 */
.aq-panel > .aq-chips {
	align-items: center;
	margin: 12px 0 0;
}

.aq-chip--img {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--gray-50);
}

.aq-chip--img .aq-chip-view {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	cursor: zoom-in;
}

.aq-chip--img .aq-chip-view:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-chip--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.aq .aq-chip--img .aq-chip-x {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 22px;
	height: 22px;
	background: rgba(24, 24, 24, .72);
	color: var(--surface-white);
}

.aq .aq-chip--img .aq-chip-x:hover {
	background: var(--gray-900);
	color: var(--surface-white);
}

.aq-chip--img .aq-chip-x svg {
	width: 14px;
	height: 14px;
	color: var(--surface-white); /* 위 .aq-chip svg(회색 700)가 어두운 바탕 위 × 를 지우지 않게 */
}

/* 그림 크게 보기 — 창 12 · 어두운 바탕(그림이 주인공) · 문서 맨 끝에 붙는 창이라 .aq 밖 — 공용 토큰만 */
.aq-viewer {
	box-sizing: border-box;
	max-width: min(1100px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: var(--surface-white);
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
	color: var(--gray-900);
}

.aq-viewer::backdrop {
	background: rgba(24, 24, 24, .72);
}

.aq-viewer-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 6px 0 16px;
	border-bottom: 1px solid var(--gray-200);
}

.aq-viewer-cap {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aq-viewer-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-700);
	cursor: pointer;
}

.aq-viewer-x:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-viewer-x:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-viewer-img {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gray-50);
}

.aq-viewer-img img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 81px); /* 위아래 16 + 머리 줄 49 */
}

.aq-hint {
	position: relative;
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: var(--gray-500);
}

.aq-hint > span {
	padding: 2px 8px;
	background: var(--surface-white);
}

.aq-hint b {
	font-weight: 600;
	color: var(--gray-900);
}

/* 크레딧 안내 — 숫자 옆 (i) 에 마우스를 올리거나 눌러 포커스가 가면 줄 위로 뜬다(11/6 대표 「우측에 (i) 로 호버링 시 설명 팝업」) · 떠 있는 칸 값은 고르는 창 .aq-menu 와 같다
   칸의 기준은 (i) 가 아니라 줄 가운데 — 폰에서 (i) 가 오른쪽으로 밀려도 화면 밖으로 나가지 않는다 */
.aq-tip-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -4px -6px -4px -2px;
	padding: 0;
	border: 0;
	background: none;
	vertical-align: middle;
	color: var(--gray-400);
	cursor: default;
}

.aq-tip:hover .aq-tip-i,
.aq-tip-i:focus-visible {
	color: var(--gray-900);
}

.aq-tip-b {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 30;
	display: grid;
	gap: 4px;
	box-sizing: border-box;
	width: max-content;
	min-width: 232px;
	max-width: calc(100vw - 32px);
	padding: 10px 12px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .04);
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	color: var(--gray-600);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
}

/* (i) 에서 칸으로 마우스를 옮기는 틈에 닫히지 않게 */
.aq-tip-b::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	height: 8px;
}

.aq-tip:hover .aq-tip-b,
.aq-tip-i:focus + .aq-tip-b {
	opacity: 1;
	visibility: visible;
}

.aq-tip-r {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.aq-home .aq-msg {
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--surface-white);
	text-align: center;
}

.aq-msg {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-danger-text);
}

.aq-msg.is-ok {
	color: var(--color-success-text);
}

/* ════ 5. 내 질문(/ask/mine/) — 시트 위 왼쪽 목록 + 흰 종이 안 그릇 없는 글 목록(7.14 · 답 화면과 같은 짜임 — 6절) ════ */
.aq-mine {
	box-sizing: border-box;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 32px;
}

.aq .aq-back--new {
	display: none; /* PC 는 왼쪽 목록 [새 질문] — 폰만(7절) */
	margin: 0 0 12px;
}

.aq-empty {
	margin: 16px 0 0;
	font-size: 15px;
	color: var(--gray-700);
}

.aq-h2 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.02em;
	color: var(--gray-900);
}

.aq-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-list > li {
	position: relative;
}

.aq-list > li + li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 20px;
	height: 1px;
	background: var(--aq-sep);
}

.aq-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 18px 20px 16px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.aq-row:hover {
	background: var(--gray-50);
}

.aq-row:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-row-t {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--gray-900);
}

.aq-row-m {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 13px;
	color: var(--gray-500);
}

/* 내 질문 줄의 […] 자리 · 그룹 머리 — 폰은 왼쪽 목록이 없어 그룹도 이 화면에서 본다 */
.aq-list > li > .aq-row {
	padding-right: 52px;
}

.aq .aq-list > li > .aq-more,
.aq .aq-mine-gh > .aq-more {
	width: 28px;
	height: 28px;
}

.aq .aq-list > li > .aq-more {
	top: 16px;
	right: 12px;
}

.aq-list > li > .aq-edit {
	width: calc(100% - 24px);
	margin: 14px 12px;
}

.aq-mine-g {
	margin-top: 20px;
}

.aq-mine-gh {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 32px;
	padding: 0 52px 0 20px;
}

.aq .aq-mine-gh > .aq-more {
	top: 2px;
	right: 12px;
}

.aq .aq-mine-gt {
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--gray-900);
}

.aq .aq-mine-gt--free {
	margin-top: 24px;
	padding: 0 20px;
}

.aq-mine-none {
	margin: 2px 0 0;
	padding: 0 20px;
	font-size: 13px;
	color: var(--gray-500);
}

.aq .aq-mine-later {
	display: inline-block;
	margin: 12px 20px 0;
	font-size: 14px;
	color: var(--gray-500);
}

.aq .aq-mine-later:hover {
	color: var(--gray-900);
}

.aq-st.is-done {
	font-weight: 600;
	color: var(--color-success-text);
}

.aq-st.is-busy {
	color: var(--gray-700);
}

.aq-st.is-fail {
	color: var(--color-danger-text);
}

/* ════ 6. 답 — 대화형(2026-11-05 운영자 시안 B 「Claude형」 채용 · claude.ai 아티팩트 AXNyGrbXAtv6mW6yUDFh9m · 메모 「상단 제목은 빼고 · [공개 허락] 대신 Q&A에 공유하기」) ════
   PC = 엑셀 시트 바탕 가득(첫 화면과 같은 시트 — 같은 날 「전체 엑셀 배경 위에 대화 내역이 좌측 스티키로 고정 · 2번 화면에서도 전체 배경이 엑셀 시트」) 위에
   흰 칸 둘 — 화면 왼쪽 끝 내 질문 목록 280(붙어 따라옴 · 접을 수 있음 · 「좌측 패널은 왼쪽 고정」) + 대화 종이 1,042(글 칸 960 · 목록을 펴면 남는 폭 가운데 · 접으면 전체 폭 가운데).
   시트 선이 글자를 지나지 않게 대화는 종이 위에. 폰 = 시트 · 목록 없이 한 칸(7절).
   내 질문 = 오른쪽 회색 말풍선 · 답 = 왼쪽 그대로 + 아래 아이콘 줄 · 턴 사이 광고 · 대화 칸 끝에 붙는 입력칸.
   ⚠️ 정본과 다른 점(시안 카드에 적어 보이고 고름 — .claude/rules/css.md 예외 줄): 시트 바탕 · 목록 · 종이 = 흰 칸 테두리 + 그림자(첫 화면 질문 칸과 같은 값) · 왼쪽 목록(새 틀 기본은 없음 · 지금 칸 = 회색 면 · [+] 원) ·
   글 칸 960(읽기 720) · 말풍선 · 붙인 그림 모서리 12 · 입력칸 모서리 16 + 테두리와 그림자 겹침. 단추(보내기 · [+])는 정본 6 · 보내기는 정본대로 두 글자부터 초록. */
/* 바닥글이 없어(11/5 「푸터랑 하단 광고 뺍시다」) 화면을 끝까지 채운다 — 대화 종이가 페이지 끝까지 이어져 맨 아래로 넘겨도 입력칸이 제자리 */
.aq-one,
.aq-minepage {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: calc(100vh - 132px - var(--wp-admin--admin-bar--height, 0px));
	padding: 46px 0 0; /* 시트 열 머리 30 + 16 — 흰 칸 위쪽이 세 화면 모두 메뉴 줄 아래 46 */
}

/* 목록 = 화면 왼쪽 끝(시트 행 번호 칸 46 + 16 — 11/5 「좌측 패널은 왼쪽 고정」) · 대화 종이 = 남은 폭 가운데(.aq-main) */
.aq-shell {
	position: relative;
	z-index: 1;
	flex: 1 0 auto;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	align-items: start;
	width: 100%;
	margin: 0;
	padding-left: 62px;
}

/* 링크로 공유된 대화를 읽는 회원(11/8 — templates/ask.php $aq_guest) — 왼쪽 목록이 없으니 대화 종이 = 전체 폭 가운데(시트 행 번호 칸 62 를 오른쪽에도) ·
   목록을 접어 둔 브라우저(html.aq-side-off — 3절 끝)여도 같은 자리 · 폰은 원래 한 칸(11절) */
@media (min-width: 1025px) {
	.aq-shell.aq-shell--guest,
	html.aq-side-off .aq-shell.aq-shell--guest {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 62px;
	}
}

/* 왼쪽 내 질문 목록 = 시트 위 흰 칸 — 넘기면 붙는 메뉴 줄(56) 아래 46 에 붙어 따라온다(처음 자리와 같은 거리) · 목록이 길면 칸 안에서 넘긴다.
   높이 = 아래 끝이 늘 화면 아래 24(11/5 「스크롤을 내리면 여기가 빕니다」 — 머리글 윗줄이 넘어가면 칸 위쪽이 올라가니 assets/ask.js 가 --aq-side-h 로 · 기본값 = 처음 화면에 꼭 맞게 132 + 46 + 24) */
.aq-side {
	position: sticky;
	top: calc(102px + var(--wp-admin--admin-bar--height, 0px));
	box-sizing: border-box;
	height: var(--aq-side-h, calc(100vh - 202px - var(--wp-admin--admin-bar--height, 0px)));
	padding: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

/* 목록 접기 · 펴기 — 11/5 운영자 「좌측 패널 열고/접을 때마다 부드럽게 접혔다 펴치고, 채팅창 영역도 그에 따라 중앙 정렬로 이동」
   html.aq-side-off(이 브라우저에 기억 — 첫 그림 전에 templates/ask.php 가 머리에서 읽는다 · 단추 = assets/ask.js) → 목록이 왼쪽 위 작은 칸 58 × 94([펴기] · [+])로 줄고 대화 종이는 전체 폭 가운데로.
   속 칸은 폭을 고정해 줄어드는 동안 글이 다시 흐르지 않고 잘린다 · 움직임 = 6-1절(움직임 줄이기면 바로) · 폰은 목록이 없어 PC 만 */
.aq-side-tog {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 36px;
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
}

.aq-side-tog:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-side-tog:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-side-tog-i {
	display: inline-flex;
}

.aq-side-tog-i--open {
	display: none;
}

.aq-side-body {
	width: 262px;
}

@media (min-width: 1025px) {
	html.aq-side-off .aq {
		--aq-shift: 0px;
	}

	html.aq-side-off .aq-stage--side .aq-stage-in {
		width: min(672px, 100%);
	}

	html.aq-side-off .aq-stage--side .aq-note {
		width: min(728px, 100%);
	}

	html.aq-side-off .aq-shell {
		grid-template-columns: 58px minmax(0, 1fr);
		padding-right: 120px; /* 왼쪽 끝 62 + 58 과 같게 — 대화 종이 = 전체 폭 가운데 */
	}

	html.aq-side-off .aq-side {
		height: 94px;
		overflow: hidden;
	}

	html.aq-side-off .aq-stage--side .aq-side {
		width: 58px;
		height: 94px;
	}

	html.aq-side-off .aq .aq-side-new {
		width: 40px;
	}

	html.aq-side-off .aq-side-new-t,
	html.aq-side-off .aq-side-body {
		visibility: hidden;
		opacity: 0;
	}

	html.aq-side-off .aq-side-tog-i--close {
		display: none;
	}

	html.aq-side-off .aq-side-tog-i--open {
		display: inline-flex;
	}
}

.aq .aq-side-new {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 262px;
	height: 36px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray-900);
}

.aq-side-new-t {
	white-space: nowrap;
}

.aq-side-new-i {
	display: inline-grid;
	flex: none; /* 접을 때 칸이 줄어도 원은 그대로 */
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: var(--gray-200);
	color: var(--gray-900);
}

.aq-side-h {
	margin: 22px 8px 6px;
	font-size: 12px;
	color: var(--gray-500);
}

.aq-side-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 끌어서 옮기기 — 끄는 줄은 흐리게 · 놓을 곳은 연한 초록 면(assets/ask.js) */
.aq [data-aq-q].is-moving {
	opacity: .45;
}

.aq [data-aq-gdrop].is-drop {
	border-radius: 8px;
	background: var(--primary-50);
}

.aq .aq-side-item {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 8px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--gray-800);
}

.aq .aq-side-new:hover,
.aq .aq-side-item:hover {
	background: var(--gray-100);
}

.aq .aq-side-new.is-on,
.aq .aq-side-item.is-on {
	background: var(--gray-100);
	color: var(--gray-900);
	font-weight: 500;
}

.aq-side-empty {
	margin: 22px 8px 0;
	font-size: 13px;
	color: var(--gray-500);
}

.aq-side-new:focus-visible,
.aq-side-item:focus-visible,
.aq-side-all:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-side-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aq-side-s {
	flex: none;
	font-size: 12px;
	font-weight: 400;
	color: var(--gray-500);
}

.aq .aq-side-all {
	display: inline-block;
	margin: 8px 8px 0;
	font-size: 13px;
	color: var(--gray-500);
}

.aq .aq-side-all:hover {
	color: var(--gray-900);
}

/* 줄 메뉴 · 그룹(11/7 대표 「클로드처럼 호버링 시 우측 … 표시」 · 「패널에 그룹 기능도」 — 메뉴 = assets/ask.js 「줄 메뉴 · 그룹」)
   왼쪽 목록은 마우스를 올린 줄만 […] · 터치 화면은 늘 보인다 · 내 질문 화면도 같은 단추(폰은 왼쪽 목록이 없다) */
.aq-side-li {
	position: relative;
}

.aq .aq-side-li:hover > .aq-side-item,
.aq .aq-side-li.is-open > .aq-side-item {
	background: var(--gray-100);
}

.aq .aq-side-li:hover > .aq-side-item,
.aq .aq-side-li:focus-within > .aq-side-item,
.aq .aq-side-li.is-open > .aq-side-item {
	padding-right: 34px;
}

.aq .aq-more {
	position: absolute;
	top: 4px;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
	opacity: 0;
}

.aq .aq-side-li:hover > .aq-more,
.aq .aq-side-li:focus-within > .aq-more,
.aq .is-open > .aq-more,
.aq .aq-list > li:hover > .aq-more,
.aq .aq-list > li:focus-within > .aq-more,
.aq .aq-mine-gh:hover > .aq-more,
.aq .aq-mine-gh:focus-within > .aq-more {
	opacity: 1;
}

.aq .aq-more:hover,
.aq .aq-more[aria-expanded="true"] {
	background: var(--gray-200);
	color: var(--gray-900);
}

.aq .aq-more:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	opacity: 1;
}

/* 고칠 때 줄 안 것을 감추고 칸만 — 칸은 줄과 같은 높이 */
.aq .is-edit > :not(.aq-edit) {
	display: none;
}

.aq .aq-edit {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid var(--gray-300);
	border-radius: 8px;
	background: var(--surface-white);
	font-size: 14px;
	color: var(--gray-900);
}

.aq .aq-edit:focus {
	border-color: var(--gray-300); /* 사이트 공용 input:focus 가 글자 · 테두리 색을 바꾼다 */
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	color: var(--gray-900);
}

.aq-side-hrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 22px 0 2px;
}

.aq-side-hrow .aq-side-h {
	margin: 0 8px;
}

.aq .aq-side-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-right: 4px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
}

.aq .aq-side-add:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq .aq-side-add:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq .aq-g-tog,
.aq .aq-g-tog:focus {
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--gray-800);
	font-family: inherit;
	font-weight: 400;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.aq .aq-g-tog svg {
	flex: none;
	color: var(--gray-500);
}

.aq .aq-g-tog {
	gap: 6px;
	padding-left: 4px;
}

.aq-g-chev {
	display: inline-flex;
	flex: none;
	transition: transform .2s ease;
}

.aq-g-tog[aria-expanded="true"] .aq-g-chev {
	transform: rotate(90deg);
}

.aq .aq-g-list .aq-side-item {
	padding-left: 28px;
}

.aq-g-none {
	padding: 4px 8px 6px 28px;
	font-size: 13px;
	color: var(--gray-500);
}

[data-aq-gdrop="0"] .aq-g-none {
	padding-left: 8px;
}

/* 메뉴 — body 에 뜬다(.aq 밖이라 사이트 단추 모양을 여기서 걷는다) · 모양 · 여는 움직임은 .aq-menu 그대로 */
.aq-pop.aq-menu {
	position: fixed;
	top: 0;
	right: auto;
	left: 0;
	z-index: 1000;
	min-width: 176px;
	max-width: 260px;
	max-height: min(320px, calc(100vh - 16px));
	overflow-y: auto;
}

.aq-pop .aq-pop-i {
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--gray-900);
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.aq-pop .aq-pop-i:hover,
.aq-pop .aq-pop-i:focus,
.aq-pop .aq-pop-i[aria-expanded="true"] {
	outline: 0;
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-pop .aq-pop-i svg {
	flex: none;
	color: var(--gray-500);
}

.aq-pop .aq-pop-i.is-danger,
.aq-pop .aq-pop-i.is-danger:hover,
.aq-pop .aq-pop-i.is-danger:focus,
.aq-pop .aq-pop-i.is-danger svg {
	color: var(--color-danger-text);
}

.aq-pop-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aq-pop .aq-pop-in {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--gray-300);
	border-radius: 6px;
	background: var(--surface-white);
	font-family: inherit;
	font-size: 14px;
	color: var(--gray-900);
}

.aq-pop .aq-pop-in:focus {
	border-color: var(--gray-300);
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	color: var(--gray-900);
}

/* 터치 화면 — 마우스를 올릴 수 없어 […]가 늘 보인다 · 글자 칸이 16 아래면 아이폰이 누를 때 화면을 키운다 */
@media (hover: none) {
	.aq .aq-more {
		opacity: 1;
	}

	.aq .aq-side-item {
		padding-right: 34px;
	}

	.aq .aq-edit,
	.aq-pop .aq-pop-in {
		font-size: 16px;
	}
}

/* 대화 종이(답 · 내 질문) — 시트 위 흰 칸(목록과 같은 모양) · 글 칸 960(11/5 운영자 「채팅 영역은 조금 더 넓게」 — 그 전 768) + 양옆 40 + 테두리 ·
   목록을 펴면 목록 오른쪽 남은 폭 가운데 · 접으면 전체 폭 가운데(.aq-shell 칸 폭이 움직이며 따라간다) · 페이지 끝까지 이어져 아래 테두리 · 둥근 모서리 없음 */
.aq-main {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	justify-self: center;
	box-sizing: border-box;
	width: min(1042px, calc(100% - 40px));
	min-width: 0;
	margin: 0;
	padding: 16px 40px 0;
	border: 1px solid var(--gray-200);
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: var(--surface-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}

/* 위 줄 — 폰은 「‹ 내 질문」 · PC 는 관리자가 남의 대화를 볼 때만(「관리자로 보는 중」 — 자기 대화면 .aq-top--ph 로 PC 에서 숨김) · [Q&A에 공유하기]는 11/7 철회 */
.aq-top {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 40px;
	margin: 0 auto 8px;
}

.aq-top .aq-back {
	display: none;
}

.aq-top-note {
	font-size: 13px;
	color: var(--gray-500);
}

.aq-top--ph {
	display: none;
}

.aq-read {
	box-sizing: border-box;
	width: 100%; /* 종이 안쪽 960(6절 .aq-main) */
	margin: 0 auto;
}

.aq-read:last-child {
	padding-bottom: 32px; /* 입력칸이 없는 대화 — 글이 페이지 끝에 닿지 않게 */
}

/* 내 질문 = 오른쪽 회색 말풍선(12) · 붙인 그림은 위 · 쓰는 엑셀은 아래 작은 글자 · 긴 질문은 접는다(assets/ask.js) */
.aq-u {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.aq-u .aq-files {
	justify-content: flex-end;
	margin: 0 0 8px;
}

.aq-u .aq-thumb {
	border-radius: 12px;
}

.aq-bub {
	position: relative;
	box-sizing: border-box;
	max-width: 75%;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--aq-cell);
	font-size: 16px;
	line-height: 1.6;
	color: var(--gray-900);
}

.aq-bub.is-folded {
	max-height: 196px;
	overflow: hidden;
}

/* 접힌 글 끝 — 흐림 대신 한 줄을 가리는 말풍선 색 띠(그라디언트 없이) */
.aq-bub.is-folded::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 28px;
	background: var(--aq-cell);
}

.aq-u-m {
	margin: 6px 4px 0 0;
	font-size: 12px;
	color: var(--gray-500);
}

.aq-back {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--gray-700);
}

.aq .aq-back:hover {
	color: var(--gray-900);
}

.aq-back:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-qmore {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gray-500);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.aq-qmore:hover {
	color: var(--gray-900);
}

.aq-files {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.aq-file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	height: 34px;
	padding: 0 12px 0 10px;
	border-radius: 6px;
	background: var(--aq-cell);
	font-size: 14px;
	color: var(--gray-900);
}

.aq-file svg {
	color: var(--gray-700);
}

.aq-file a,
.aq-file > span:first-of-type {
	overflow: hidden;
	max-width: 280px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aq .aq-file a:hover {
	text-decoration: underline;
}

.aq-file.is-gone {
	color: var(--gray-500);
}

.aq-file-note {
	font-size: 12px;
	color: var(--gray-500);
}

/* 질문에 붙인 그림 — 작은 그림 120 × 90 · 8(누르면 크게 보기 — 질문 칸과 같은 창) */
.aq-files {
	align-items: center;
}

.aq-file--img {
	height: auto;
	padding: 0;
	background: none;
}

.aq-thumb {
	display: block;
	width: 120px;
	height: 90px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--gray-50);
	cursor: zoom-in;
}

.aq-thumb:hover {
	border-color: var(--gray-400);
}

.aq-thumb:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 기다리는 칸 · 못 푼 칸 — 회색 50 칸 하나 */
.aq-wait,
.aq-fail {
	margin: 32px 0 0;
	padding: 20px;
	border-radius: 8px;
	background: var(--gray-50);
}

/* 기다리는 칸 — 머리(답을 준비하고 있어요 · 지난 시간) + 안내 + 단계 목록(11/4 운영자 「차례를 기다리는 중으로만 나오지 말고 현재 진행 상황을 같이」)
   단계 = 끝낸 ✓(회색 700) · 지금 = 도는 표시(초록 — 진행 점) + 굵게 · 남은 = 점 · 건너뜀 = – · 아이콘 셋은 늘 그려 두고 상태마다 하나만 보인다(assets/ask.js 는 data-state 만 바꾼다) */
.aq-wait-h {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.aq-wait-time {
	flex: none;
	font-size: 13px;
	color: var(--gray-500);
	font-variant-numeric: tabular-nums;
}

.aq-steps {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.aq-step {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.aq-step + .aq-step {
	margin-top: 10px;
}

.aq-step-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 20px;
	height: 22px;
	color: var(--gray-700);
}

.aq-step-i svg {
	display: none;
}

.aq-step[data-state="done"] .ol-icon--check,
.aq-step[data-state="now"] .ol-icon--loader-circle,
.aq-step[data-state="skip"] .ol-icon--minus {
	display: block;
}

.aq-step[data-state="now"] .aq-step-i {
	color: var(--brand-action);
}

.aq-step[data-state="now"] .ol-icon--loader-circle {
	animation: aq-spin 1s linear infinite;
}

.aq-step[data-state="skip"] .aq-step-i {
	color: var(--gray-400);
}

.aq-step[data-state="todo"] .aq-step-i::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gray-300);
}

@keyframes aq-spin {
	to {
		transform: rotate(360deg);
	}
}

.aq-step-b {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.aq-step-t {
	font-size: 15px;
	line-height: 22px;
	color: var(--gray-700);
}

.aq-step[data-state="now"] .aq-step-t {
	font-weight: 600;
	color: var(--gray-900);
}

.aq-step[data-state="todo"] .aq-step-t,
.aq-step[data-state="skip"] .aq-step-t {
	color: var(--gray-500);
}

.aq-step-n {
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-500);
}

.aq-step-n:empty {
	display: none;
}

/* 지금 단계 시간 — 지금 칸에만(assets/ask.js) */
.aq-step-s {
	flex: none;
	margin-left: auto;
	font-size: 13px;
	line-height: 22px;
	color: var(--gray-500);
	font-variant-numeric: tabular-nums;
}

.aq-step-s:empty {
	display: none;
}

/* 지금 하는 일 — 단계 아래 작업기가 실제로 한 일(11/6 대표 「5단계는 너무 똑같은 보기로 대기하는게 길어서」) · 끝낸 일 ✓ 회색 · 하는 중 = 진한 글자 · 여섯 줄까지 · 단계 글자 줄에 맞춘다 */
.aq-live {
	margin: 14px 0 0 30px;
	padding: 12px 0 0;
	border-top: 1px solid var(--gray-200);
	list-style: none;
}

.aq-live-l {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-size: 13px;
	line-height: 20px;
	color: var(--gray-500);
}

.aq-live-l + .aq-live-l {
	margin-top: 4px;
}

.aq-live-l svg {
	flex: none;
	margin-top: 3px;
	color: var(--gray-400);
}

.aq-live-l span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aq-live-l.is-now {
	padding-left: 20px;
	color: var(--gray-900);
}

.aq-wait-f {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
}

/* 브라우저 알림 — 안내 아래 단추 하나 · 켜면 한 줄(11/6 대표 「홈페이지 알림 + 브라우저 알림」) · 쓸 수 없는 브라우저엔 칸째 안 보인다(assets/ask.js) */
.aq-bell {
	margin: 12px 0 0;
}

.aq-bell [hidden] {
	display: none; /* 단추 · 켜짐 줄의 display: flex 가 hidden 을 이긴다 */
}

.aq-bell-ok {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--gray-600);
}

.aq-bell-ok svg {
	flex: none;
	color: var(--color-success);
}

.aq-bell-off {
	margin: 0 0 0 2px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gray-500);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.aq-bell-off:hover {
	color: var(--gray-900);
}

.aq-bell-off:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-wait-t,
.aq-fail-t {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--gray-900);
}

.aq-fail-t svg {
	color: var(--color-danger);
}

.aq-wait-s,
.aq-fail-s {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-600);
}

.aq-staff {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--gray-500);
}

/* 답 — 말풍선 아래 줄 없이 */
.aq-ans {
	margin: 32px 0 0;
}

.aq-at {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--gray-900);
}

.aq-sum {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--gray-900);
}

.aq-result {
	margin: 24px 0 0;
}

.aq-shot {
	margin: 0 0 14px;
	border-radius: 8px;
	background: var(--gray-50);
	overflow: hidden;
}

.aq-shot img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: contain;
}

/* 손님 파일 그림 — 작은 범위는 늘려 키우지 않는다 · 누르면 크게(그림 크게 보기 창) */
.aq-shot--own {
	border-radius: 0;
	background: none;
	overflow: visible;
}

.aq-shot-open {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	vertical-align: top;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
	cursor: zoom-in;
}

.aq-shot-open:hover {
	border-color: var(--gray-400);
}

.aq-shot-open:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-shot--own img {
	width: auto;
	height: auto;
	max-width: 100%;
}

.aq-shot--own figcaption {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-500);
}

.aq-result-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.aq-ok,
.aq-pending {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 1.45;
}

.aq-ok {
	font-weight: 600;
	color: var(--color-success-text);
}

.aq-ok svg {
	color: var(--color-success);
}

.aq-pending {
	color: var(--gray-600);
}

.aq-focus {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--gray-600);
}

.aq-focus b {
	font-weight: 600;
	color: var(--gray-900);
}

/* 답 본문 — view.php 가 그린 꼴(h3 · h4 · p · ol · ul · 표 · 코드 · 수식) */
.aq-body {
	margin: 28px 0 0;
	font-size: 16px;
	line-height: 1.75;
	color: var(--gray-800);
}

/* 본문 소제목 = 「주의할 점」 · 「함께 보면 좋은 자료」(.aq-sh)와 같은 18 — 굵은 글씨 단을 늘리지 않게(정본 v4 13.9) */
.aq-body h3 {
	margin: 32px 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
	color: var(--gray-900);
}

.aq-body h4 {
	margin: 24px 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--gray-900);
}

.aq-body > :first-child {
	margin-top: 0;
}

.aq-body p {
	margin: 0 0 12px;
}

.aq-body ol,
.aq-body ul {
	margin: 0 0 14px;
	padding-left: 22px;
}

.aq-body li {
	margin: 6px 0;
}

.aq-body li::marker {
	color: var(--gray-400);
}

.aq-body ol > li::marker {
	color: var(--gray-500);
	font-weight: 600;
}

.aq-body strong {
	font-weight: 700;
	color: var(--gray-900);
}

.aq-body code {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--aq-cell);
	color: var(--gray-900);
	font-family: var(--aq-mono);
	font-size: 0.875em;
}

/* 수식 — 작은 칸 하나로(긴 수식이 글줄 안에서 꺾여 회색 띠가 끊기지 않게) · 누르면 복사(assets/ask.js) */
.aq-body code.aq-f {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 4px 0;
	padding: 6px 10px;
	border-radius: 6px;
	line-height: 1.55;
	vertical-align: middle;
	white-space: pre-wrap;
	word-break: break-all;
	cursor: copy;
}

.aq-body code.aq-f:hover {
	background: var(--aq-cell-hi);
}

.aq-body code.aq-f.is-copied {
	background: var(--color-success-bg);
	color: var(--color-success-text);
}

.aq-codewrap {
	position: relative;
	margin: 0 0 16px;
}

.aq-body pre.aq-code {
	overflow: auto;
	max-height: 420px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: var(--gray-50);
	font-family: var(--aq-mono);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--gray-900);
	white-space: pre;
}

.aq-body pre.aq-code code {
	padding: 0;
	background: transparent;
	font-size: inherit;
}

.aq-copy {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 30px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: var(--surface-white);
	color: var(--gray-700);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

.aq-copy:hover {
	color: var(--gray-900);
}

.aq-body .aq-table {
	overflow-x: auto;
	margin: 0 0 16px;
}

.aq-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.55;
}

.aq-body th,
.aq-body td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--aq-sep);
	text-align: left;
	vertical-align: top;
}

.aq-body th {
	background: var(--gray-50);
	font-weight: 600;
	color: var(--gray-900);
}

.aq-sh {
	margin: 32px 0 10px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--gray-900);
}

.aq-notes {
	margin: 0;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--gray-700);
}

.aq-notes li::marker {
	color: var(--gray-400);
}

.aq-follow {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 20px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--gray-50);
	font-size: 14px;
	line-height: 1.6;
	color: var(--gray-700);
}

.aq-follow svg {
	margin-top: 3px;
	color: var(--gray-500);
}

.aq-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-links > li {
	position: relative;
}

.aq-links > li + li::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 12px;
	height: 1px;
	background: var(--aq-sep);
}

.aq-links a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px;
	border-radius: 8px;
}

.aq .aq-links a:hover {
	background: var(--gray-50);
}

.aq-links a:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-link-t {
	flex: none;
	width: 116px;
	font-size: 13px;
	color: var(--gray-500);
}

.aq-link-n {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-900);
}

.aq-links svg {
	color: var(--gray-400);
}

/* 답 아래 아이콘 줄(시안 B) — 복사 · 도움이 됐어요 · 아쉬워요(마지막 답) · 다시 풀기 · 커뮤니티에 물어보기 · 아이콘 18 회색 500(누른 엄지는 900) · 단추 32 · 6 */
.aq-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 16px 0 40px -8px;
}

.aq-used {
	margin-left: auto;
	font-size: 12px;
	color: var(--gray-500);
	font-variant-numeric: tabular-nums;
}

.aq-ib {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-500);
	cursor: pointer;
}

.aq-ib:hover,
.aq-ib[aria-pressed="true"] {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-ib:disabled {
	cursor: progress;
}

.aq .aq-tb {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	margin: 0 0 0 6px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--gray-600);
	font: inherit;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.aq .aq-tb:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

/* [커뮤니티에 물어보기] — 11/7 대표 「버튼 더 잘보이게」 · 채운 단추는 화면에 하나뿐이라(머리 주석) 줄에서 하나만 테두리 + 진한 글자로 세운다 */
.aq .aq-people {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	height: 36px;
	margin: 0 0 0 8px;
	padding: 0 14px 0 12px;
	border: 1px solid var(--gray-400);
	border-radius: 6px;
	background: var(--surface-white);
	color: var(--gray-900);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.aq .aq-people:hover {
	border-color: var(--gray-900);
	background: var(--gray-50);
	color: var(--gray-900);
}

.aq-ib:focus-visible,
.aq-tb:focus-visible,
.aq .aq-people:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 0;
}

/* 링크로 공유 중 · [공유 끄기](11/8 — 주인의 마지막 답 줄 [커뮤니티에 물어보기] 곁 · assets/ask.js) — 회색 13 글자 + 테두리 없는 글자 단추(채운 단추는 화면에 하나) */
.aq-shared {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 0 12px;
	font-size: 13px;
	color: var(--gray-500);
	white-space: nowrap;
}

.aq-shared .aq-shared-off {
	height: 28px;
	margin: 0;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--gray-700);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.aq-shared .aq-shared-off:hover {
	background: var(--gray-100);
	color: var(--gray-900);
}

.aq-shared .aq-shared-off:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 0;
}

.aq-shared .aq-shared-off:disabled {
	opacity: .5;
	cursor: default;
}

/* 공유받은 회원의 위 줄 — 「링크로 공유된 대화예요 · 읽기만 할 수 있어요」(PC 에도 보인다 — .aq-top--ph 아님) */
.aq-top-note--shared {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gray-700);
}

.aq-vote-done {
	flex-basis: 100%;
	margin: 6px 0 0 8px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--gray-500);
}

/* 턴 사이 광고(ask_turn · 본문형) — 대화 칸 폭 · 위에 「광고」 글자 · 앞 단추 줄 · 다음 말풍선과 넉넉히 떨어지게(templates/ask.php) */
.aq-adturn {
	margin: 8px 0 56px;
}

.aq-adturn-l {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--gray-500);
}

/* 구글이 못 채우면 칸째 접음 — 답 화면은 본인만 보는 주소라 못 채울 때가 있고, 그러면 「광고」 글자만 남는다(첫 화면 .aq-ad 는 접지 않는다 — 접으면 질문 칸이 뒤늦게 움직인다) */
.aq-adturn:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

.aq-fine {
	margin: 16px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-500);
}

/* 입력칸이 있는 PC 는 입력칸 아래 한 줄(.aq-fu-fine)이 같은 고지를 한다 — 폰은 그 줄을 숨기므로 이 줄이 고지다 */
@media (min-width: 1025px) {
	.aq-fine--dock {
		display: none;
	}
}

/* 대화 — 이어서 물은 턴은 줄 없이 말풍선부터(앞 단추 줄 아래 40) · 주소 #t{번호}로 오면 붙는 메뉴 줄 아래에 */
.aq-turn {
	scroll-margin-top: calc(80px + var(--wp-admin--admin-bar--height, 0px));
}

/* 이어서 묻기 = 대화 칸 끝에 붙는 입력칸(시안 B) — 넘겨 내려가는 동안 화면 아래에 남고 · 대화가 끝나면 제자리(뒤로 아래 광고 · 바닥글)
   한 줄 칸(모서리 16 · 테두리 + 옅은 그림자) 안에 글 + 네모 [보내기](두 글자부터 초록 · 비면 회색) · 칸 아래 [+] · 안내 · 남은 수 · 붙인 파일은 칸 안 위쪽 */
.aq-dock {
	position: sticky;
	bottom: 0;
	z-index: 20;
	box-sizing: border-box;
	width: 100%;
	margin: auto auto 0; /* 짧은 대화도 입력칸은 맨 아래 */
	padding: 12px 0 16px;
	background: var(--surface-white);
}

.aq-fu-box {
	box-sizing: border-box;
	padding: 9px 9px 9px 16px;
	border: 1px solid var(--gray-200);
	border-radius: 16px;
	background: var(--surface-white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

.aq-fu-box:focus-within {
	border-color: var(--gray-300);
}

.aq-fu-box.is-drag {
	border-color: var(--gray-400);
	background: var(--gray-50);
}

.aq-fu .aq-chips {
	align-items: center;
	margin: 0 0 8px;
}

.aq-fu-line {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}

.aq-fu .aq-text {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 32px;
	max-height: 240px;
	padding: 4px 0;
	line-height: 24px;
	overflow-y: auto;
	resize: none;
}

.aq-dock .aq-send {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin: 0 0 1px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--brand-action);
	color: var(--surface-white);
	cursor: pointer;
}

.aq-dock .aq-send:hover {
	background: var(--brand-hover);
}

.aq-dock .aq-send:disabled {
	background: var(--gray-300);
	cursor: default;
}

.aq-dock .aq-send.is-busy:disabled {
	background: var(--brand-action);
	cursor: progress;
}

.aq-dock .aq-send:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-fu-under {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 0;
}

.aq-dock .aq-plus--btn {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	margin: 0;
	border: 1px solid var(--gray-200);
	background: var(--surface-white);
	color: var(--gray-700);
}

.aq-dock .aq-plus--btn:hover {
	background: var(--gray-50);
}

.aq-dock .aq-auto,
.aq-dock .aq-auto:focus {
	height: 32px;
}

.aq-fu-fine {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--gray-500);
	text-align: center;
}

.aq-fu-left {
	flex: none;
	margin: 0;
	font-size: 12px;
	color: var(--gray-500);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.aq-fu-left.is-busy {
	color: var(--gray-900);
	font-weight: 600;
}

.aq-fu .aq-msg {
	margin: 8px 0 0;
}

.aq-fu-note {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gray-600);
}

.aq .aq-fu-note a {
	color: var(--gray-900);
	text-decoration: underline;
}

/* 되묻기(11/8 대표 「클로드처럼 여러 질문을 보기와 함께 또는 주관식으로 아래에 띄우고」 · includes/clarify.php · assets/ask.js 되묻기 절)
   질문 말풍선 다음 = AI 한 줄(답 요약과 같은 글) · 답한 뒤 = 내 말풍선에 문답(물음은 작게 · 답은 본문 크기)
   카드 = 이어서 묻기 칸 자리 · 같은 그릇(모서리 16 · 테두리 + 옅은 그림자) — 물음 + 「1 / 3」 ‹ › + × · 번호 보기(줄 선으로 나눔 · 고른 것 = 회색 면) · 직접 적기 칸 + [건너뛰기] */
.aq-clar-ai {
	margin: 32px 0 0;
}

.aq-clar-say {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
	color: var(--gray-900);
}

.aq-clar-hint {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--gray-500);
}

.aq-clar-list {
	margin: 8px 0 0;
	padding: 0 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gray-900);
}

.aq-clar-list-o {
	display: block;
	font-size: 13px;
	color: var(--gray-500);
}

.aq-u--clar {
	margin: 16px 0 0;
}

.aq-bub--clar {
	display: grid;
	gap: 10px;
}

.aq-clar-qa {
	display: grid;
	gap: 2px;
	margin: 0;
}

.aq-clar-q {
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-600);
}

.aq-clar-a {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gray-900);
}

.aq-clar-a.is-skip {
	color: var(--gray-500);
}

.aq-clar {
	box-sizing: border-box;
	padding: 6px 8px 10px;
	border: 1px solid var(--gray-200);
	border-radius: 16px;
	background: var(--surface-white);
	box-shadow: 0 4px 20px rgba(0, 0, 0, .04);
}

.aq-clar-h {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 0 6px 12px;
}

.aq-clar-t {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--gray-900);
}

.aq-clar-pg {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 2px;
	font-size: 13px;
	color: var(--gray-500);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.aq-clar .aq-ib:disabled {
	background: transparent;
	color: var(--gray-300);
	cursor: default;
}

.aq-clar .aq-ib:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.aq-clar-x {
	flex: none;
}

.aq-clar-os {
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-clar-os li + li {
	border-top: 1px solid var(--gray-100);
}

.aq-clar-o {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.aq-clar-o:hover {
	background: var(--gray-50);
}

.aq-clar-o[aria-pressed="true"] {
	background: var(--gray-200);
}

.aq-clar-o:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
}

.aq-clar-o:disabled {
	cursor: default;
}

.aq-clar-n {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: var(--gray-100);
	font-size: 13px;
	font-weight: 600;
	color: var(--gray-700);
	font-variant-numeric: tabular-nums;
}

.aq-clar-o[aria-pressed="true"] .aq-clar-n {
	background: var(--gray-900);
	color: var(--surface-white);
}

.aq-clar-own {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
}

.aq-clar-field {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	gap: 8px;
	box-sizing: border-box;
	min-width: 0;
	height: 44px;
	padding: 0 5px 0 12px;
	border: 1px solid var(--gray-200);
	border-radius: 8px;
	background: var(--surface-white);
}

.aq-clar-field:focus-within {
	border-color: var(--gray-400);
}

.aq-clar-pen {
	display: inline-grid;
	flex: none;
	color: var(--gray-400);
}

.aq .aq-clar-in {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--gray-900);
	font: inherit;
	font-size: 15px;
	outline: 0;
}

.aq .aq-clar-in::placeholder {
	color: var(--gray-500);
}

.aq-clar .aq-clar-ok {
	margin: 0;
}

.aq-clar .aq-clar-skip {
	flex: none;
	height: 44px;
	padding: 0 14px;
}

.aq-clar .aq-clar-skip:disabled {
	color: var(--gray-400);
	cursor: default;
}

.aq-clar.is-busy .aq-clar-p {
	opacity: .55;
}

.aq-clar-busy {
	margin: 8px 12px 0;
	font-size: 14px;
	color: var(--gray-600);
}

.aq-clar .aq-msg {
	margin: 8px 12px 0;
}

.aq-st.is-ask,
.aq-side-s--ask {
	font-weight: 600;
	color: var(--gray-900);
}

/* ════ 6-1. 움직임 — 처음 한 번 올라오며 나타남 · 고르는 창 열림(펼침 · 접힘 · 예시 질문은 assets/ask.js) · 움직임 줄이기면 모두 끈다 ════
   11/4 운영자 「최초 입력창 나올 때 스르륵 등장, 고급스럽게」 · 「스르륵, 고급스럽게 펼치고 접히도록」 — .claude/rules/css.md 움직임 예외 줄 */
@media (prefers-reduced-motion: no-preference) {
	.aq-home .aq-sheet {
		animation: aq-fade 1.1s ease both;
	}

	.aq-home .aq-hi {
		animation: aq-rise .8s cubic-bezier(.22, .8, .24, 1) .05s both;
	}

	.aq-home .aq-ask,
	.aq-home .aq-line--login,
	.aq-home .aq-closed {
		animation: aq-rise .9s cubic-bezier(.22, .8, .24, 1) .18s both;
	}

	.aq-home .aq-minelink {
		animation: aq-fade .6s ease .55s both;
	}

	/* 왼쪽 목록 접기 · 펴기 — 목록 · 대화 종이 · 질문 칸 · 안내 칸이 같은 시간에 함께(6절) · html.aq-side-anim = 단추를 누른 동안만(assets/ask.js — 넘길 때 목록 높이가 늦게 따라오지 않게) */
	html.aq-side-anim .aq-side {
		transition: width .3s cubic-bezier(.22, .8, .24, 1), height .3s cubic-bezier(.22, .8, .24, 1);
	}

	html.aq-side-anim .aq .aq-side-new {
		transition: width .3s cubic-bezier(.22, .8, .24, 1);
	}

	html.aq-side-anim .aq-shell {
		transition: grid-template-columns .3s cubic-bezier(.22, .8, .24, 1), padding-right .3s cubic-bezier(.22, .8, .24, 1);
	}

	html.aq-side-anim .aq-stage--side .aq-stage-in,
	html.aq-side-anim .aq-stage--side .aq-note {
		transition: left .3s cubic-bezier(.22, .8, .24, 1), width .3s cubic-bezier(.22, .8, .24, 1);
	}

	html.aq-side-anim .aq-stage--side .aq-ad {
		transition: left .3s cubic-bezier(.22, .8, .24, 1);
	}

	html.aq-side-anim .aq-side-new-t,
	html.aq-side-anim .aq-side-body {
		transition: opacity .2s ease, visibility .2s;
	}

	.aq-menu:not([hidden]) {
		animation: aq-menu-in .18s cubic-bezier(.22, .8, .24, 1) both;
	}

	.aq-tip-b {
		transition: opacity .15s ease, visibility .15s;
	}

	.aq-menu.is-up:not([hidden]) {
		animation-name: aq-menu-up;
	}
}

@keyframes aq-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@keyframes aq-fade {
	from {
		opacity: 0;
	}
}

@keyframes aq-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@keyframes aq-menu-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aq-toast,
	.aq-ver svg,
	.aq-auto-t,
	.aq-auto-t::after,
	.aq-g-chev {
		transition: none;
	}
}

/* ════ 7. 폰 · 태블릿(1024 이하 — 앱 틀 omc 머리글 아래) ════ */
@media (max-width: 1024px) {
	.aq-toast {
		bottom: calc(76px + env(safe-area-inset-bottom, 0px)); /* 아래 탭 줄 56 위 */
	}

	.aq-ad {
		display: none; /* 폰 · 태블릿은 칸 아래가 곧 키보드 자리 — 숨은 칸은 구글이 요청하지 않는다(바닥글 위 배너와 같은 방식) */
	}

	.aq {
		--aq-w: calc(100% - 32px);
	}

	/* 첫 화면 — 앱 틀 머리글 61 + 아래 탭 줄 56 · 시트 칸 64 × 28 */
	.aq-stage {
		min-height: calc(100vh - 117px - var(--wp-admin--admin-bar--height, 0px));
		padding: 28px 16px 24px;
	}

	.aq-note-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.aq-stage--side .aq-note {
		left: 0;
		width: min(728px, 100%);
	}

	.aq-sheet {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='28'%3E%3Cpath d='M63.5 0V28M0 27.5H64' fill='none' stroke='%23e7e7e7'/%3E%3C/svg%3E") 34px 28px;
	}

	.aq-sheet-corner,
	.aq-sheet-cols span,
	.aq-sheet-rows span {
		line-height: 27px;
	}

	.aq-sheet-corner {
		width: 34px;
		height: 28px;
	}

	.aq-sheet-cols {
		left: 34px;
		height: 28px;
	}

	.aq-sheet-cols span {
		width: 64px;
		height: 28px;
	}

	.aq-sheet-rows {
		top: 28px;
		width: 34px;
	}

	.aq-sheet-rows span {
		height: 28px;
	}

	.aq-hi {
		margin-bottom: 22px;
		font-size: 26px;
	}

	.aq-line {
		height: 56px;
	}

	.aq-ph,
	.aq-text {
		font-size: 15px;
	}

	.aq-panel {
		padding: 16px 12px 10px 16px;
	}

	.aq-minelink {
		display: inline-block;
	}

	/* 머리글 120 + 아래 탭 줄(본문 아래 여백 --omc-stack-b)을 뺀 높이를 채운다 — 짧은 대화도 입력칸은 아래 */
	.aq-one,
	.aq-minepage {
		min-height: calc(100vh - 120px - var(--omc-stack-b, 56px) - var(--wp-admin--admin-bar--height, 0px));
	}

	.aq-minepage {
		padding: 20px 0 0;
	}

	.aq .aq-back--new {
		display: inline-flex;
	}

	/* 답 — 왼쪽 목록 없이 한 칸 · 위 줄 「‹ 내 질문」 · 입력칸은 아래 탭 줄 위(키보드가 뜨면 탭 줄이 내려가니 맨 아래) · 칸 아래 안내 글은 빼고 남은 수만 */
	.aq-one {
		padding: 8px 0 0;
	}

	.aq-shell {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding-left: 0;
	}

	.aq-stage--side .aq-stage-in {
		left: 0; /* 왼쪽 목록이 없으니 PC 의 비켜 서기도 없음(3절) */
		width: min(672px, 100%);
	}

	.aq-side {
		display: none;
	}

	/* 답 · 내 질문 — 시트 · 종이 없이 흰 바탕 한 칸(위 여백은 .aq-one · .aq-minepage) */
	.aq-one > .aq-sheet,
	.aq-minepage > .aq-sheet {
		display: none;
	}

	.aq-main {
		flex: 1 0 auto;
		justify-self: auto; /* 크롬은 블록 칸에도 먹어 내용 폭으로 줄어든다 */
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	.aq-top,
	.aq-read,
	.aq-dock,
	.aq-mine {
		width: calc(100% - 32px);
	}

	.aq-top--ph {
		display: flex;
	}

	.aq-top .aq-back {
		display: inline-flex;
	}

	.aq-bub {
		max-width: 85%;
	}

	.aq-dock {
		bottom: var(--omc-stack-b, 0px);
		padding: 8px 0 10px;
	}

	html.omc-kb .aq-dock {
		bottom: 0;
	}

	.aq-fu-fine,
	.aq-fu-under .aq-auto-s {
		display: none;
	}

	.aq-fu-left {
		margin-left: auto;
	}

	.aq-adturn {
		margin: 0 0 40px;
	}

	.aq-link-t {
		width: 88px;
	}
}

/* 첫 화면 — 도구 줄에 다 안 들어가면 Autopilot 은 아랫줄로(곁말까지) */
@media (max-width: 720px) {
	.aq-tools .aq-auto-box {
		order: 1;
		flex: 1 0 100%;
	}

	.aq-tools .aq-auto {
		margin-left: -8px;
	}
}

@media (max-width: 600px) {
	.aq-link-t {
		display: none;
	}
}

/* 입력칸 아래 — 작은 폰은 스위치 자리를 내주고 남은 크레딧만 */
@media (max-width: 440px) {
	.aq-fu-left-n {
		display: none;
	}
}