/**
 * AI 활용 첫 화면(/ai/) — page-ai-hub.php · inc/ai-hub.php · js/ai-hub.js
 *
 * 2026-10-09 운영자 채용 R2 = Recraft 「Projects」 화면을 통째로 따른다(시안 페이지 claude.ai 아티팩트 88n9…).
 * 크기는 Recraft 실제 화면을 ×0.75(Mobbin 1920 = CSS 1440)로 옮긴 시안 값 그대로, 한글 12px 이하만 1px 올렸다. 글꼴은 사이트 글꼴.
 *
 * ⚠️ 사이트 규칙과 다른 점 — 운영자가 시안에서 보고 고른 모양이라 이 파일 안에서만 예외로 둔다(공개 전 검수에서 정한다):
 *   - 소식 띠 주황 #FF5A1F 면(사이트 팔레트에 없는 색 · 넓은 색 면) 과 탭의 「NEW」 주황 꼬리표
 *   - 기울인 굵은 「NEW」 꼬리표(검은 바탕) 3px 모서리 — 배지 6px 규칙과 다르다
 *   - 업무 프롬프트 썸네일(Asana형, 10/9 채용): 분류마다 옅은 색 면 8가지 · 창 둘레 색 그림자 · 그림 안 알약 단추·칩
 *     (색은 inc/ai-hub.php oppadu_aih_th_cats() 에 분류별 리터럴로 — 다른 색과 한 벌인 구분색이라 브랜드 토큰에 잇지 않는다)
 *   - 휴대폰 칩 줄의 「지금」 칸 검은 채움 — 채운 칩은 --brand-action 이 규칙이다
 * 회색 글자·선·바탕은 정본 회색 사다리에 이었다(시안 값과 눈으로 구별되지 않는 차이). !important·그라디언트 없음.
 *
 * 같은 날 「여유판」 채용(시안 3 — css/calm.css 머리 주석): 머리글까지 회색 한 면 · 카드 이름은 보통 굵기.
 * 슬라이드 갤러리·브랜드 룩북도 이 틀 안에 넣는다(시안 2 「AI 활용 틀로 넣기」) — 맨 아래 .aihx 절.
 */

/* ---- 풀폭(GP 컨테이너 해제) — 위키 body.wk-page 와 같은 방식 ---- */
body.aih-page { overflow-x: clip; background: var(--gray-50, #f7f7f7); } /* 폴백 = 정적 룩북(테마 토큰이 body 에 안 닿는다) */
/* 머리글까지 본문과 같은 회색 한 면(Recraft 는 위쪽 막대가 없다) — 머리글 아래 선도 걷는다 */
body.aih-page .oppadu-nav { background: var(--gray-50); border-bottom-color: transparent; }
body.aih-page #page.grid-container { max-width: none; }
body.aih-page #page,
body.aih-page .site-content { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
body.aih-page .site-main { max-width: none; padding: 0; margin: 0; }
body.aih-page .site-content .aih {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}

.aih {
	--aih-bg: var(--gray-50);
	--aih-text: var(--gray-900);
	--aih-sub: var(--gray-500);
	--aih-nav: color-mix(in srgb, var(--gray-500) 85%, var(--gray-600));
	--aih-line: var(--gray-200);
	--aih-tab: var(--gray-100);
	--aih-tile: color-mix(in srgb, var(--gray-100) 60%, var(--gray-200));
	--aih-orange: #FF5A1F;   /* 예외 — 머리 주석 */
	--aih-ink: #111111;      /* 예외 — 「NEW」 꼬리표·휴대폰 지금 칸 */
	--aih-top: 60px;         /* 새 머리글(nav2) 높이 = 한 줄 59 + 아래 선 1(css/nav2.css) */

	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	background: var(--aih-bg);
	color: var(--aih-text);
	font-size: 13.5px;
	line-height: 1.45;
	letter-spacing: -0.005em;
}
/* 기본 정리 — 틀에 넣은 도구 본문(.otl 안)은 빼고 도구 자기 규칙에 맡긴다. :where() 라 명시도는 예전(.aih a 등)과 같다 */
.aih *:where(:not(.otl *)),
.aih *:where(:not(.otl *))::before,
.aih *:where(:not(.otl *))::after { box-sizing: border-box; }
.aih a:where(:not(.otl *)) { color: inherit; text-decoration: none; }
:where(.aih) :where(h1, h2, h3, p):where(:not(.otl *)) { margin: 0; padding: 0; }
.aih svg:where(:not(.otl *)) { flex: none; display: block; }
.aih img:where(:not(.otl *)) { display: block; max-width: none; }
.aih button:where(:not(.otl *)) { font: inherit; }
.aih-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 왼쪽 메뉴 — Recraft: 바탕 없이 아이콘 + 회색 글자, 지금 칸만 진하게 ── */
.aih-side-in { position: sticky; top: var(--aih-top); padding: 22px 15px 0; }
body.admin-bar .aih-side-in { top: calc(var(--aih-top) + 32px); }
.aih-nav { display: flex; flex-direction: column; }
.aih-nav a { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 8px; border-radius: var(--radius-md); font-size: 13.5px; color: var(--aih-nav); }
.aih-nav a svg { width: 18px; height: 18px; stroke-width: 1.6; color: color-mix(in srgb, var(--gray-500) 60%, var(--gray-400)); }
.aih-nav a:hover { color: var(--aih-text); }
.aih-nav a.is-on { color: var(--aih-text); font-weight: 600; }
.aih-nav a.is-on svg,
.aih-nav a:hover svg { color: var(--aih-text); }
.aih-nav a:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: -2px; }
.aih-nav-sep { height: 1px; background: var(--aih-line); margin: 10px 8px; }
/* 준비중 칸 — 링크 없이 흐린 글자 + 오른쪽 작은 「준비중」(Recraft 메뉴 오른쪽 회색 숫자 자리) */
.aih-nav-soon { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 8px; font-size: 13.5px; color: var(--gray-400); cursor: default; }
.aih-nav-soon svg { width: 18px; height: 18px; stroke-width: 1.6; color: var(--gray-300); }
.aih-nav-soon em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--gray-400); }

/* ── 본문 ── */
.aih-main { min-width: 0; padding: 0 30px 72px 24px; }
.aih-mnav { display: none; }

/* 큰 소식 띠 — Recraft Projects 맨 위 주황 띠(왼쪽 글, 오른쪽 그림, 오른쪽 위 닫기) */
.aih-news {
	position: relative;
	display: grid; grid-template-columns: 1fr 1fr;
	height: 248px; margin-top: 22px;
	border-radius: 8px; overflow: hidden;
	background: var(--aih-orange);
}
.aih-news[hidden] { display: none; }
.aih-news-body { display: flex; flex-direction: column; padding: 15px 16px; color: #fff; }
.aih-news-tag {
	align-self: flex-start; display: inline-block;
	padding: 1px 6px 2px; border-radius: 3px;
	background: var(--aih-ink); color: #fff;
	font-size: 12px; font-weight: 800; font-style: italic; letter-spacing: .02em;
}
.aih-news h2 { margin-top: 12px; font-size: 30px; line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.aih-news p { margin-top: 10px; max-width: 520px; font-size: 13.5px; line-height: 1.45; color: #fff; }
.aih .aih-news-btn {
	align-self: flex-start; display: inline-flex; align-items: center;
	height: 38px; margin-top: auto; margin-bottom: 15px; padding: 0 13px;
	border-radius: var(--radius-md); background: #fff; color: var(--aih-ink);
	font-size: 13.5px; font-weight: 500;
}
.aih .aih-news-btn:hover { background: var(--gray-50); color: var(--aih-ink); }
.aih-news-img { position: relative; overflow: hidden; }
.aih-news-img img { width: 100%; height: 100%; object-fit: cover; }
.aih .aih-news-x {
	position: absolute; top: 9px; right: 10px;
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-md);
	background: transparent; color: #fff; cursor: pointer;
}
.aih .aih-news-x:hover,
.aih .aih-news-x:focus { background: rgba(0, 0, 0, .18); color: #fff; }
.aih-news-x svg { width: 16px; height: 16px; stroke-width: 2; }

/* 회색 칸 안의 흰 탭 */
.aih-tabs {
	display: inline-flex; gap: 2px;
	margin: 24px 0 26px; padding: 3px;
	border-radius: 6px; background: var(--aih-tab);
}
.aih .aih-tabs button {
	flex: none; display: inline-flex; align-items: center; gap: 0;
	height: 26px; padding: 0 11px; border: 0; border-radius: 4px;
	background: transparent; color: var(--text-primary);
	font-size: 12.5px; font-weight: 400; line-height: 1; white-space: nowrap; cursor: pointer;
}
.aih .aih-tabs button:hover { background: transparent; color: var(--aih-text); }
.aih .aih-tabs button.is-on { background: #fff; box-shadow: 0 0 0 1px var(--gray-300); color: var(--aih-text); }
.aih .aih-tabs button:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 1px; }
.aih-new {
	display: inline-block; margin-left: 5px; padding: 0 4px;
	border-radius: 3px; background: var(--aih-orange); color: #fff;
	font-size: 9.5px; font-weight: 800; font-style: italic; line-height: 14px; letter-spacing: .02em;
}

/* 4열 모음 카드 */
.aih-panel[hidden] { display: none; }
.aih-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 11px; }
.aih-card { display: block; min-width: 0; }
.aih-card-img { position: relative; aspect-ratio: 372 / 210; border-radius: var(--radius-md); overflow: hidden; background: var(--aih-tile); }
.aih-card-img > img { width: 100%; height: 100%; object-fit: cover; }
.aih-card > b { display: flex; align-items: center; margin-top: 10px; font-size: 15px; font-weight: 400; color: var(--aih-text); }
.aih-card > b > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aih-card > b .aih-new { flex: none; }
.aih-card-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--aih-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
	.aih-card:hover > b > span { text-decoration: underline; text-underline-offset: 3px; }
}
.aih-card:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 3px; border-radius: var(--radius-md); }
.aih-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.aih-split img { width: 100%; height: 100%; object-fit: cover; }
.aih-split img:first-child { object-position: 82% 50%; }

/* 업무 프롬프트 썸네일 — A · Asana 워크플로 갤러리형(10/9 채용, inc/ai-hub.php oppadu_aih_thumb).
   분류마다 옅은 색 면 + 흰 작은 창(머리 = 분류 아이콘 칸 + 제목) + 분류별 결과물 그림. 카드 폭(cqw)에 맞춰 같이 커지고 작아진다. */
.aih-card-img { container-type: inline-size; }
.th { position: absolute; inset: 0; overflow: hidden; }
.th-a { background: var(--th-tint); box-shadow: inset 0 0 0 1px var(--th-line); }
.th-a-win { position: absolute; left: 9%; right: 9%; top: 11%; bottom: -14%; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 6px 22px var(--th-glow), 0 1px 2px rgba(0, 0, 0, .05); }
.th-a-head { display: flex; align-items: center; gap: 3cqw; padding: 3.1cqw 4cqw; border-bottom: 1px solid #F0F0F0; }
.th-a-ic { flex: none; display: grid; place-items: center; width: 7.4cqw; height: 7.4cqw; border-radius: 1.7cqw; background: var(--th-acc); color: #fff; }
.aih .th-a-ic svg { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.2; }
.th-a-head b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 4.3cqw; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: #1E1F21; word-break: keep-all; }
.th-a-body { padding: 2.2cqw 2.6cqw 0; }
.aih .th-a-body svg { width: 100%; height: auto; }

/* 모음 탭 끝 「모두 보기」 — Recraft Get started 의 「Explore」 글자 링크 */
.aih .aih-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 26px; font-size: 12.5px; color: var(--aih-sub); }
.aih .aih-more:hover { color: var(--aih-text); }
.aih-more svg { width: 13px; height: 13px; stroke-width: 2; }

/* ── 태블릿·휴대폰(휴대폰 틀이 켜지는 1024 이하) — 왼쪽 메뉴는 위 칩 줄로 ── */
@media (max-width: 1024px) {
	.aih { display: block; }
	.aih-side { display: none; }
	.aih-mnav { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px 2px; scrollbar-width: none; }
	.aih-mnav::-webkit-scrollbar { display: none; }
	.aih-mnav a { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--gray-200); font-size: 13px; color: var(--text-primary); }
	.aih .aih-mnav a.is-on { background: var(--aih-ink); color: #fff; box-shadow: none; }
	.aih-mnav-soon { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 6px; box-shadow: 0 0 0 1px var(--gray-200); font-size: 13px; color: var(--gray-400); }
	.aih-mnav-soon em { font-style: normal; font-size: 11.5px; }
	.aih-main { padding: 0 0 48px; }
	.aih-news { margin: 14px 16px 0; }
	.aih-tabs { display: flex; width: max-content; max-width: calc(100% - 32px); overflow-x: auto; margin: 18px 16px 16px; scrollbar-width: none; }
	.aih-tabs::-webkit-scrollbar { display: none; }
	.aih-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 16px; }
	.aih .aih-more { margin: 20px 16px 0; }
}

@media (max-width: 600px) {
	.aih-news { grid-template-columns: 1fr; height: auto; }
	.aih-news-img { order: -1; height: 150px; }
	.aih-news h2 { font-size: 24px; }
	.aih .aih-news-btn { margin-top: 14px; }
	/* scroll-padding 이 없으면 끌어 맞추기가 첫 카드를 줄 왼쪽 끝(여백 밖)에 붙인다 */
	.aih-grid { display: flex; overflow-x: auto; gap: 10px; padding: 0 16px 4px; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.aih-grid::-webkit-scrollbar { display: none; }
	.aih-grid .aih-card { flex: 0 0 78%; scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.aih-grid { scroll-snap-type: none; }
}

/* ════════════════════════════════════════════════════════════════════
 * 도구 페이지를 AI 활용 틀에(.aihx) — 슬라이드 갤러리(10/9 운영자 채용 「AI 활용 틀로 넣기」, 시안 2)
 * Recraft Styles 화면을 따른다: 왼쪽 메뉴 그대로 · 회색 바탕 · 작은 경로 + 제목 · 회색 칸 탭 · 5열.
 * inc/ai-hub.php oppadu_aih_wrap_open()/close() 가 도구 셸(.otl)을 감싼다 — 새 머리글이 켜진 요청에만(공개 전엔 미리보기).
 * 도구 CSS(slide-styles.css) 뒤에 실린다(oppadu_aih_tool_enqueue 의 deps).
 * 시안의 숫자 회색(#ECECEC·#333·#111·#DADADA·#9A9A9A)은 사다리 칸에 이었다. 굵기는 여유판(제목 하나만 굵게).
 * ════════════════════════════════════════════════════════════════════ */
.aihx { --aihx-seg: color-mix(in srgb, var(--gray-100) 40%, var(--gray-200)); } /* 회색 칸(탭·정렬 단추) — 회색 바탕 위에서 보이는 한 칸 진한 회색 */
.aihx-crumb { display: flex; align-items: center; gap: 6px; padding-top: 22px; font-size: 12.5px; line-height: 1.4; color: var(--aih-sub); }
.aihx .aihx-crumb a { color: var(--aih-sub); }
.aihx .aihx-crumb a:hover { color: var(--aih-text); }

/* 도구 셸 — 흰 띠·선을 걷고 회색 한 면 위에 제목만 */
.aihx .otl { display: block; min-height: 0; background: transparent; }
.aihx .otl-band { padding: 0; background: transparent; border: 0; }
.aihx .otl-band-title { margin-top: 10px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--aih-text); }
.aihx .otl-band-titlerow .otl-band-title { margin-top: 0; }
.aihx .otl-band-titlerow { margin-top: 10px; }
.aihx .otl-band-desc { margin-top: 4px; max-width: 760px; font-size: 13px; line-height: 1.5; color: var(--aih-sub); white-space: normal; }
.aihx .otl-body { margin: 0; padding: 0; max-width: none; background: transparent; }

/* 슬라이드 갤러리 — 거르기 막대는 새 머리글(붙은 높이 60px) 바로 밑에 붙는다 */
.aihx .sls-app { --sls-top: var(--aih-top); --sls-gutter: 16px; max-width: none; margin: 0; padding: 0 0 48px; }
body.admin-bar .aihx .sls-app { --sls-top: calc(var(--aih-top) + 32px); }
.aihx .sls-bar { margin: 18px 0 20px; padding: 10px 0; border: 0; background: var(--aih-bg); gap: 10px 16px; }
.aihx .sls-chips { display: inline-flex; flex-wrap: nowrap; gap: 2px; max-width: 100%; padding: 3px; border-radius: 6px; background: var(--aihx-seg); overflow-x: auto; scrollbar-width: none; }
.aihx .sls-chips::-webkit-scrollbar { display: none; }
.aihx .sls-app .sls-chip { align-items: center; height: 26px; padding: 0 11px; border-radius: 4px; background: transparent; color: var(--text-primary); font-size: 12.5px; font-weight: 400; line-height: 1; }
.aihx .sls-app .sls-chip:hover { background: transparent; color: var(--aih-text); }
.aihx .sls-app .sls-chip[aria-pressed="true"] { background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-300); color: var(--aih-text); font-weight: 500; }
.aihx .sls-app .sls-chip-n { font-size: 11px; color: var(--gray-400); }
.aihx .sls-app .sls-sort-btn { min-height: 32px; padding: 0 11px; border-radius: 6px; background: var(--aihx-seg); font-size: 12.5px; font-weight: 500; }
.aihx .sls-app .sls-sort-btn:hover,
.aihx .sls-app .sls-sort-btn[aria-expanded="true"] { background: var(--gray-200); }
.aihx .sls-app .sls-seg { padding: 3px; border: 0; border-radius: 6px; background: var(--aihx-seg); }
.aihx .sls-app .sls-seg-btn { min-height: 26px; padding: 0 11px; border-radius: 4px; color: var(--text-primary); font-size: 12.5px; font-weight: 400; line-height: 1; }
.aihx .sls-app .sls-seg-btn:hover { background: transparent; color: var(--aih-text); }
.aihx .sls-app .sls-seg-btn[aria-pressed="true"],
.aihx .sls-app .sls-seg-btn[aria-pressed="true"]:hover { background: var(--surface-white); box-shadow: 0 0 0 1px var(--gray-300); color: var(--aih-text); font-weight: 500; }
.aihx .sls-app .sls-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px 11px; }
.aihx .sls-app .sls-shot { border-radius: 5px; box-shadow: none; }
.aihx .sls-app .sls-meta { margin-top: 9px; gap: 6px; }
.aihx .sls-app .sls-no { font-size: 12px; font-weight: 400; color: var(--gray-300); }
.aihx .sls-app .sls-name { font-size: 13px; font-weight: 400; color: var(--aih-text); }
.aihx .sls-app .sls-use { font-size: 12px; color: var(--aih-sub); }
/* 회원 카드의 [복사] — 테두리 상자 대신 회색 칸(정렬 단추와 한 벌) */
.aihx .sls-app .sls-copy { min-height: 26px; padding: 0 8px; border: 0; border-radius: 4px; background: var(--aihx-seg); font-size: 12px; }
@media (max-width: 1280px) {
	.aihx .sls-app .sls-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	/* 경로는 숨긴다 — 위 칩 줄의 「지금」 칸과 머리글 제목이 이미 같은 말을 한다 */
	.aihx-crumb { display: none; }
	.aihx .otl { padding: 0 16px; }
	.aihx .otl-band-title { margin-top: 18px; }
	.aihx .sls-app { --sls-top: 60px; }
	body.admin-bar .aihx .sls-app { --sls-top: calc(60px + 32px); }
	.aihx .sls-app .sls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; }
}
@media screen and (max-width: 782px) {
	body.admin-bar .aihx .sls-app { --sls-top: 60px; }
}
@media (max-width: 600px) {
	/* 도구 CSS 는 칩 줄을 화면 끝까지 늘인다 — 회색 칸 안에서 옆으로 넘기게 거터 안에 둔다 */
	.aihx .sls-chips { width: auto; margin: 0; }
}