/**
 * 자료실·AI — /resources/(허브 홈) · /resources/forms/(엑셀 서식 목록) · /resources/tools/(무료 도구) · /resources/?q=(검색)
 * inc/resources-hub.php · js/resources-hub.js 와 한 벌. 틀(왼쪽 메뉴 · 휴대폰 칩 줄 · 구획 머리 · 그림 칸 · 검색 결과)은 css/ai-hub.css 를 그대로 쓰고
 * 여기엔 자료실 몫만 둔다 — 그 파일 뒤에 실린다(같은 명시도면 뒤가 이긴다).
 *
 * 2026-10-16 운영자 채용(시안 claude.ai 아티팩트 U731Z… 「이 시안대로 합친다」 · 이름 「자료실·AI」). 틀 = v3 13.3 허브 홈 · 13.4 목록.
 *   첫 줄 = 무료 강의 홈 첫 줄 값(32/700 · 설명 15 gray-800) + 통계 한 줄(13 gray-500)
 *   서식 카드(홈 첫 줄 · 검색) = 틀 없는 그림 카드(실무 위키 목록 그림 카드 값 — 제목 16/600 두 줄 · 곁 정보 13 gray-500 · 그림 8px).
 *     자료 그림은 1:1 에 제목이 박혀 있어 정사각 그대로 쓴다(잘라 쓰지 않는다).
 *   엑셀 서식 목록 = 두 열 목록 줄 · 무료 도구 = App Store 웹 「앱」 배치 — 같은 날 3차 시안(claude.ai 아티팩트 4LbyW…) 채용, 각 절 머리에 적음.
 *   거르기 칩 선택 · 지금 쪽 = 흑백(v3 4.5 — gray-200 면 + gray-900 글자).
 * 옛 자료실 화면(히어로·TOP5 행·도구 세로 카드 — css/page-resources-main.css)은 스위치가 꺼진 요청에만 실린다.
 * !important · 그라데이션 없음.
 */

/* ── 머리 판 — 허브 홈 머리(.rsai-hd)와 무료 도구 머리 넘김 칸(.rsai-slide)이 같은 판이다.
   멤버십 홈 머리 띠(css/membership.css .msh-hd)와 같은 짜임·값(2026-10-16 운영자 「자료실 홈에 멤버십처럼 헤더 · 무료 도구는 실제 앱스토어 화면처럼 위에 헤더」):
   짙은 둥근 판(--gray-900 · 12px · 안 여백 40/44) · 왼쪽 글(초록 머리말 14 · 제목 32 · 부제 · 숫자 줄·정보 줄 14) · 오른쪽 그림.
   그림 = scripts/resources-hub/hub-art.cjs 가 구운 webp — 왼쪽 끝이 판 바탕으로 구워져 있어 CSS 그라데이션 없이 이어진다(허브 홈 #181818 · 무료 도구 실사 사진은 아래 머리 절 --rsai-photo-bg).
   PC 에서만 받는다(폰은 판 + 글자 · 도구 칸은 폰 그림).
   ⚠️ 허브 홈은 모션 칸 영상(강조 구역)이 이미 있어 강조 구역이 둘이다(v3 13.7 — 운영자 요청으로 넣음) ── */
.rsai-hd { position: relative; margin: 30px 0 0; padding: 40px 40px 44px; overflow: hidden; border-radius: 12px; background: var(--gray-900); color: var(--surface-white); }
.aih .rsai-hd-bg,
.aih .rsai-slide-bg { position: absolute; top: 0; right: 0; width: min(66%, calc(100% - 354px)); height: 100%; object-fit: cover; object-position: 0% 50%; }
.rsai-hd-in { position: relative; max-width: 600px; word-break: keep-all; }
.aih .rsai-hd-eye,
.aih .rsai-slide-eye { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; color: color-mix(in srgb, var(--brand-bright) 60%, var(--surface-white)); }
.aih .rsai-hd-t,
.aih .rsai-slide-t { margin: 16px 0 0; padding: 0; border: 0; font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: var(--surface-white); }
.aih .rsai-hd-sub { margin: 12px 0 0; font-size: 19px; line-height: 1.4; color: var(--surface-white); }
.aih .rsai-hd-n { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--gray-300); }
.rsai-hd-n span + span::before { content: "·"; margin: 0 10px; color: var(--gray-500); }
.rsai-hd-n b { font-weight: 700; color: var(--surface-white); font-variant-numeric: tabular-nums; }
.aih .rsai-hd-info { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 18px; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--surface-white); }
.rsai-hd-info span { display: inline-flex; align-items: center; gap: 7px; }
.rsai-hd-info svg { flex: none; width: 16px; height: 16px; }
/* 단추 — 멤버십 머리 띠 단추 값(34px · 6px · 13px) · 주 행동 하나만 채운 초록 */
.aih .rsai-hd-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.aih .rsai-hd-btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--surface-white) 40%, transparent); font-size: 13px; font-weight: 600; line-height: 1; color: var(--surface-white); white-space: nowrap; transition: background-color .15s ease; }
.aih .rsai-hd-btn:hover { background: color-mix(in srgb, var(--surface-white) 10%, transparent); box-shadow: inset 0 0 0 1px var(--surface-white); color: var(--surface-white); }
.aih .rsai-hd-btn.is-main { background: var(--brand-action); box-shadow: none; }
.aih .rsai-hd-btn.is-main:hover { background: var(--brand-hover); }
.aih .rsai-hd-btn:focus-visible { outline: 2px solid var(--surface-white); outline-offset: 2px; }
.rsai-hd + .aihc { padding-top: 40px; }
/* 옛 주소 끝 #top5 · #tools · #all 로 오면 머리글(60) 밑에 멈춘다 */
.rsai .aihc-sec,
.rsai-list { scroll-margin-top: 76px; }

/* ── 서식 카드(홈 첫 줄 · 검색 결과) — 홈 첫 줄의 AI 카드(.rsai-c-ai)도 같은 짜임 ──
   display 는 클래스 하나로만 준다 — 줄에 못 들어가는 칸 숨김(nth-child)이 이겨야 한다 */
.rsai-c { display: block; min-width: 0; }
.aih .rsai-c { color: var(--gray-900); }
.rsai-c-m { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--aih-tile); } /* relative = 모션 카드 영상(.aihc-v)이 그림 위에 깔린다 */
.aih .rsai-c-m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aih .rsai-c-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--gray-900); word-break: keep-all; }
.aih .rsai-c-s { display: block; margin-top: 5px; font-size: 13px; line-height: 1.4; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
	.aih .rsai-c:hover .rsai-c-t { text-decoration: underline; text-underline-offset: 3px; }
}
.aih .rsai-c:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 3px; border-radius: 8px; }

/* ── 엑셀 서식 목록 한 줄 — 두 열 목록(2026-10-16 운영자 3차 시안 「다 · Webflow 마켓플레이스」 채용)
   그림 120(가는 테두리 · 8px) · 제목 16/600 두 줄 · 「무료 · 다운로드 · ★」 14 · 한 줄 설명 14 두 줄 — 시안 값을 사이트 회색 사다리로 ── */
.rsai-fr { display: flex; align-items: flex-start; gap: 24px; min-width: 0; }
.aih .rsai-fr { color: var(--gray-900); }
.rsai-fr-m { display: block; flex: none; width: 120px; height: 120px; overflow: hidden; border-radius: 8px; background: var(--aih-tile); box-shadow: 0 0 0 1px var(--gray-200); }
.aih .rsai-fr-m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rsai-fr-x { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding-top: 2px; }
.aih .rsai-fr-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; color: var(--gray-900); word-break: keep-all; }
.aih .rsai-fr-s { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--gray-600); font-variant-numeric: tabular-nums; }
.aih .rsai-fr-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--gray-600); word-break: keep-all; }
@media (hover: hover) {
	.aih .rsai-fr:hover .rsai-fr-t { text-decoration: underline; text-underline-offset: 3px; }
}
.aih .rsai-fr:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 3px; border-radius: 8px; }

/* ── 무료 도구 — App Store 웹 「앱」 배치(2026-10-16 운영자 3차 시안 C2 채용 — 메모 「바탕은 흰색으로 맞추고 앱 구분 잘 되게 그림자 또는 옅은 테두리」)
   경로 → 머리 넘김 → 제목·설명 → 분류 칩 → 많이 쓰는 도구(순위 카드) → 분류 선반(아이콘 64 · 이름 · 한 줄 · 「열기」). 선반 제목 17/700 + 설명 15 = App Store 값.
   카드·아이콘 = 같은 날 4차 시안 「1 · 아이콘만 띄우기」(운영자 「앱 목록이 다닥다닥 · 테두리 별로 → 테두리 대신 앱스토어 모서리처럼 더 둥글게(정본 규칙 벗어나도 됨)
   + 튀어나온 베젤 + 그림자」 — 시안 claude.ai 아티팩트 Xr22KVLRkd9amkyeUyKeno): 테두리 없음 · 순위 카드 22px · 아이콘 23% · 「열기」·분류 칩 10px(.claude/rules/css.md 예외 줄)
   · 그림자 + 안쪽 아래 두께 3px(베벨) · 선반 줄은 틀 없이 사이만 넓게(줄 34 · 칸 56 · 아이콘 68).
   App Store 고유의 파란 알약 「보기」는 사이트 단추(회색 면)로 — 회원이 날마다 쓰는 서비스의 표지는 따르지 않는다(10/9 운영자) ── */
.rsai-tchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.aih .rsai-tchips a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border-radius: 10px; background: var(--surface-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .06); font-size: 13px; font-weight: 600; line-height: 1; color: var(--gray-900); white-space: nowrap; transition: box-shadow .15s ease; }
.aih .rsai-tchips a:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 14px rgba(0, 0, 0, .10); }
.aih .rsai-tchips img { width: 18px; height: 18px; border-radius: 25%; object-fit: cover; }
.aih .rsai-tchips a:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 2px; }
.rsai-shelf { margin-top: 40px; scroll-margin-top: 76px; }
.aih .rsai-sh { margin: 0; font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: -0.01em; color: var(--gray-900); }
.aih .rsai-ss { margin: 3px 0 0; font-size: 15px; line-height: 22px; color: var(--gray-500); }
/* 아이콘 — 앱 아이콘 곡률 23% · 테두리 대신 그림자로 뜨고, 그림 위에 얹은 ::after 가 안쪽 위 흰 테 · 아래 그늘(베벨)을 그린다 */
.rsai-ti { position: relative; display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 23%; background: var(--surface-white); box-shadow: 0 1px 1.5px rgba(0, 0, 0, .10), 0 4px 10px -1px rgba(0, 0, 0, .16); }
.rsai-ti::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .8), inset 0 -2px 2px rgba(0, 0, 0, .10); pointer-events: none; }
.aih .rsai-ti img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aih .rsai-ti svg { width: 28px; height: 28px; margin: 18px; color: var(--gray-700); }
.aih .rsai-tn { display: block; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 20px; color: var(--gray-900); white-space: nowrap; text-overflow: ellipsis; }
.aih .rsai-ts { display: block; overflow: hidden; margin-top: 2px; font-size: 12px; line-height: 15px; color: var(--gray-500); white-space: nowrap; text-overflow: ellipsis; }
/* 「열기」 — 줄·카드 전체가 링크라 모양만 단추(회색 면 · 6px) */
.aih .rsai-get { flex: none; padding: 7px 16px; border-radius: 10px; background: var(--gray-100); font-size: 13px; font-weight: 700; line-height: 18px; color: var(--gray-900); transition: background-color .15s ease; }
/* 분류 선반 — 줄 3개(넓으면 4개) · 틀 없이 사이만 넓게 */
.rsai-trows { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 34px 56px; margin-top: 22px; }
.rsai-tr { display: flex; align-items: center; gap: 18px; min-width: 0; }
.rsai-tr .rsai-ti { width: 68px; height: 68px; }
.aih .rsai-tr { color: var(--gray-900); }
.rsai-tx { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.aih .rsai-tr.is-soon .rsai-tn { color: var(--gray-500); }
/* 많이 쓰는 도구 — 순위 카드(흰 카드 · 22px · 그림자 + 안쪽 아래 두께). 허브 홈 「무료 도구」 선반도 같은 카드(숫자 없이) */
.rsai-rank { display: grid; grid-template-columns: repeat(5, minmax(0, 201px)); gap: 24px; margin-top: 18px; }
.rsai-rc { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 24px 12px 16px; border-radius: 22px; background: var(--surface-white); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px -6px rgba(0, 0, 0, .15), inset 0 -3px 0 rgba(0, 0, 0, .055); text-align: center; transition: box-shadow .15s ease; }
.rsai-rc.has-n { padding-top: 40px; } /* 순위 숫자 자리 */
.aih .rsai-rc { color: var(--gray-900); }
.rsai-rn { position: absolute; top: 12px; left: 14px; font-size: 22px; font-weight: 600; line-height: 26px; color: color-mix(in srgb, var(--gray-400) 50%, var(--gray-500)); font-variant-numeric: tabular-nums; }
.rsai-rc .rsai-ti { width: 60px; height: 60px; }
.aih .rsai-rc .rsai-tn { max-width: 100%; margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 18px; }
.aih .rsai-rc .rsai-ts { max-width: 100%; }
.aih .rsai-rc .rsai-get { margin-top: 14px; }
@media (hover: hover) {
	.aih a.rsai-tr:hover .rsai-get,
	.aih .rsai-rc:hover .rsai-get { background: var(--gray-200); }
	.aih a.rsai-tr:hover .rsai-tn,
	.aih .rsai-rc:hover .rsai-tn { text-decoration: underline; text-underline-offset: 3px; }
	.aih .rsai-rc:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 14px 32px -8px rgba(0, 0, 0, .20), inset 0 -3px 0 rgba(0, 0, 0, .055); }
}
.aih a.rsai-tr:focus-visible,
.aih .rsai-rc:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 3px; border-radius: 22px; }

/* 무료 도구 머리 — 추천 도구 넘김(apps.apple.com 「앱」 맨 위 큰 그림 · 판은 위 머리 판). 칸 하나 = 판 하나, 옆으로 밀어 넘긴다(scroll-snap) · 점 단추 = 아래 가운데.
   앱 줄(아이콘 · 이름 · 한 줄 · 「열기」)은 App Store 큰 그림 아래 줄 자리 — 판 전체가 이 링크(::after) · 「열기」는 이 판의 주 행동이라 채운 초록.
   그림 = 실사 정물 사진(2026-10-16 운영자 4차 시안 「C 실사 사진」 — GPT Image 2.5 · scripts/resources-hub/hub-art.cjs photos).
   판 바탕 --rsai-photo-bg = 사진의 거의 검은 바탕 — 그림 왼쪽을 이 색으로 구웠다(hub-art.cjs PHOTO_BG). ⛔ 한쪽만 바꾸면 그림 왼쪽 끝에 이음매가 보인다 */
.rsai-hero { --rsai-photo-bg: #0a0b0d; position: relative; margin-top: 14px; }
.aih .rsai-hero + .rsai-lh h1 { margin-top: 32px; } /* 머리가 경로 바로 밑, 제목은 그 아래(2026-10-16 운영자 「헤더를 제목 위로」) */
.rsai-hero-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; border-radius: 12px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rsai-hero-track::-webkit-scrollbar { display: none; }
/* 그림은 판 안 맨 아래 층(z -1 · 판이 isolation 으로 쌓임 맥락) — 글 칸을 position 없이 둬야 앱 줄 링크 덮개(::after)가 판 전체에 걸린다 */
.rsai-slide { position: relative; display: flex; flex: 0 0 100%; flex-direction: column; min-height: 400px; overflow: hidden; isolation: isolate; background: var(--rsai-photo-bg); color: var(--surface-white); scroll-snap-align: start; }
/* 넓은 화면에서 그림이 과하게 커지지 않게 900 까지 · 오른쪽에 맞춘다 — 사진 주제가 가운데 오른쪽이라 좁은 PC(1280)에서는 빈 왼쪽만 잘린다 */
.aih .rsai-slide-bg { z-index: -1; max-width: 900px; object-position: 100% 50%; }
.aih .rsai-slide-m { display: none; }
.rsai-slide-in { display: flex; flex: 1 1 auto; flex-direction: column; max-width: 560px; padding: 40px 40px 34px; word-break: keep-all; }
.aih .rsai-slide-sub { margin: 12px 0 28px; font-size: 17px; line-height: 1.5; color: var(--gray-300); }
.rsai-slide-app { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--surface-white) 14%, transparent); }
.aih .rsai-slide-app { color: var(--surface-white); }
.aih .rsai-slide-app::after { content: ""; position: absolute; inset: 0; }
.rsai-slide-app .rsai-ti { width: 56px; height: 56px; box-shadow: none; }
.aih .rsai-slide-app .rsai-tn { color: var(--surface-white); }
.aih .rsai-slide-app .rsai-ts { color: var(--gray-400); }
.aih .rsai-slide-app .rsai-get { margin-left: 8px; background: var(--brand-action); color: var(--surface-white); }
@media (hover: hover) {
	.aih .rsai-slide-app:hover .rsai-get { background: var(--brand-hover); }
}
.aih .rsai-slide-app:focus-visible { outline: 0; }
.aih .rsai-slide-app:focus-visible::after { outline: 2px solid var(--surface-white); outline-offset: -4px; border-radius: 12px; }
.rsai-hero-dots { position: absolute; left: 50%; bottom: 12px; display: flex; gap: 2px; transform: translateX(-50%); }
.aih .rsai-hero-dot { width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.rsai-hero-dot::before { content: ""; display: block; width: 8px; height: 8px; margin: 8px; border-radius: 50%; background: color-mix(in srgb, var(--surface-white) 35%, transparent); transition: background-color .15s ease; }
.rsai-hero-dot[aria-current="true"]::before { background: var(--surface-white); }
.aih .rsai-hero-dot:focus-visible { outline: 2px solid var(--surface-white); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
	.rsai-hd-btn,
	.rsai-rc,
	.rsai-hero-dot::before { transition: none; }
}
/* 좁은 PC(1025~1199)는 순위 카드 다섯을 칸 폭에 맞춰 줄인다(마우스로는 옆 넘김이 어렵다) */
@media (min-width: 1025px) and (max-width: 1199px) {
	.rsai-rank { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
	.rsai-rc { padding-right: 8px; padding-left: 8px; }
}

/* ── 홈 첫 줄 반반(2026-10-16 운영자 5차 시안 B — 「자료만 강조된다 · AI 항목도 같이」 · 시안 claude.ai 아티팩트 Pn14RCo8TC1ajWSNMeRDJq):
   왼쪽 「지금 뜨는 엑셀 서식」 셋 | 오른쪽 「AI 스타일」 셋(모션 · 슬라이드 · 룩북 하나씩 — 서식 카드와 같은 정사각 카드, 모션 카드는 카드 영상이 늘 돈다).
   반 둘은 .aihc-sec 이지만 나란히 서므로 구획 사이 위 여백(.aihc-sec + .aihc-sec 56)을 지우고 뒤 구획에 준다.
   좁은 PC(1025~1199)는 반마다 둘(칸 폭 170 안팎) — 남는 카드는 숨긴다(높이 0 으로 자르면 Tab 이 안 보이는 카드에 들어간다). 1024 이하는 위아래로 쌓고 옆으로 넘긴다. ── */
.rsai-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.rsai-split > .aihc-sec { min-width: 0; margin-top: 0; }
.rsai-split + .aihc-sec { margin-top: 56px; }
.rsai-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.aih .rsai-c-ai.is-top .rsai-c-m img { object-position: 50% 0; } /* 룩북 카드 — 브랜드 머리(위쪽)가 보이게 */
.aih .rsai-c-ai.is-slide .rsai-c-m img { object-fit: contain; } /* 슬라이드 카드 — 16:9 를 통째로(위아래는 칸 바탕 회색) · 정사각으로 자르면 제목 글자가 잘린다 */
@media (min-width: 1025px) and (max-width: 1199px) {
	.rsai-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rsai-row3 > :nth-child(n+3) { display: none; }
}

/* ── 목록(엑셀 서식 · 바로 쓰는 도구) — 머리 → 거르기 한 줄 → 그림 카드 격자 → 쪽 번호 ──
   머리는 AI 갤러리 머리와 한 벌(2026-10-16 운영자 「AI 탭 기준으로 맞춘다」): 경로 .aihx-crumb(ai-hub.css 그대로) · 제목 24/600 · 설명 13 회색 —
   값 정본 = css/ai-hub.css .aihx .otl-band-title · .otl-band-desc. 그 값을 고치면 여기도 */
.rsai-list { padding-top: 0; }
.rsai .aihx-crumb a { color: var(--aih-sub); }
.rsai .aihx-crumb a:hover { color: var(--aih-text); }
.aih .rsai-lh h1 { margin: 10px 0 0; font-size: 24px; font-weight: 600; line-height: 1.24; letter-spacing: -0.02em; color: var(--aih-text); word-break: keep-all; }
.aih .rsai-lh p { max-width: 760px; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--aih-sub); word-break: keep-all; }
.aih .rsai-lh p a { margin-left: 8px; font-weight: 600; color: var(--aih-sub); text-decoration: underline; text-underline-offset: 3px; }
.aih .rsai-lh p a:hover { color: var(--aih-text); }
.rsai-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.rsai-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.aih .rsai-chips button { height: 34px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: var(--gray-600); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.aih .rsai-chips button:hover { background: var(--gray-100); color: var(--gray-900); }
.aih .rsai-chips button[aria-pressed="true"] { background: var(--gray-200); color: var(--gray-900); font-weight: 600; }
.aih .rsai-chips button:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 1px; }
/* 정렬 — 글자 단추 + 아래로 펼치는 작은 메뉴(옛 자료실 .rs-sort 와 같은 동작) */
.rsai-sort { position: relative; flex: none; }
.aih .rsai-sort-btn { display: inline-flex; align-items: center; gap: 4px; height: 34px; margin: 0; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; color: var(--gray-700); cursor: pointer; }
.aih .rsai-sort-btn:hover,
.aih .rsai-sort-btn[aria-expanded="true"] { background: var(--gray-100); color: var(--gray-900); }
.aih .rsai-sort-btn:focus-visible { outline: 2px solid var(--chrome-focus, var(--gray-900)); outline-offset: 1px; }
.rsai-sort-btn svg { width: 16px; height: 16px; }
.rsai-sort-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 132px; padding: 4px; border-radius: 8px; background: var(--surface-white); box-shadow: var(--shadow-md); }
.rsai-sort.is-open .rsai-sort-menu { display: block; }
.aih .rsai-sort-menu button { display: block; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; text-align: left; color: var(--gray-700); cursor: pointer; }
.aih .rsai-sort-menu button:hover { background: var(--gray-100); color: var(--gray-900); }
.aih .rsai-sort-menu button[aria-current="true"] { color: var(--gray-900); font-weight: 700; }

/* 엑셀 서식 목록 — 한 열 · 넓은 화면(1200~ — 본문 884px 이상)은 두 열 */
.rsai-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 48px; margin-top: 28px; }
@media (min-width: 1200px) {
	.rsai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
}
.rsai-grid[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .15s ease; }
.aih .rsai-empty { grid-column: 1 / -1; padding: 56px 0; text-align: center; font-size: 14px; color: var(--gray-500); }

/* 쪽 번호 — 옛 자료실 함수(oppadu_rs_pagination_html)의 마크업 그대로 · 지금 쪽은 흑백(시안) */
.rsai-pagerwrap { padding-top: 40px; }
.rsai .rs-pager { display: flex; justify-content: center; align-items: center; gap: 4px; }
.aih .rs-pager-n,
.aih .rs-pager-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 6px; font-size: 14px; font-weight: 500; color: var(--gray-600); font-variant-numeric: tabular-nums; transition: background-color .15s ease, color .15s ease; }
.aih a.rs-pager-n:hover,
.aih a.rs-pager-arrow:hover { background: var(--gray-100); color: var(--gray-900); }
.aih .rs-pager-n.is-on { background: var(--gray-200); color: var(--gray-900); font-weight: 600; }
.aih .rs-pager-arrow.is-off { color: var(--gray-300); pointer-events: none; }
.rsai .rs-pager-gap { min-width: 20px; text-align: center; font-size: 13px; color: var(--gray-500); }
/* 휴대폰 전용 「더 보기」 — 같은 주소를 쓰되 스크립트가 가로채 아래에 이어 붙인다 */
.aih .rs-more { display: none; align-items: center; justify-content: center; max-width: 320px; min-height: 44px; margin: 14px auto 0; padding: 0 24px; border-radius: 6px; background: var(--gray-100); font-size: 14px; font-weight: 600; color: var(--gray-900); }
.aih .rs-more:hover { background: var(--gray-200); color: var(--gray-900); }

/* 업데이트 소식 — 목록 아래 접이식 한 줄(이미 받은 파일의 새 판을 확인하러 다시 온 사람용). 구획은 가는 선 둘 */
.rsai-upd { margin-top: 48px; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.rsai-upd > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 4px; list-style: none; font-size: 14px; font-weight: 600; color: var(--gray-700); cursor: pointer; }
.rsai-upd > summary::-webkit-details-marker { display: none; }
.rsai-upd > summary:hover { color: var(--gray-900); }
.rsai-upd-n { margin-left: 4px; font-weight: 600; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.rsai-upd-chev { flex: none; color: var(--gray-500); transition: transform .15s ease; }
.rsai-upd[open] .rsai-upd-chev { transform: rotate(180deg); }
.rsai-upd-scroll { max-height: 300px; overflow-y: auto; border-top: 1px solid var(--gray-200); }
.rsai .rs-up-row { display: grid; grid-template-columns: 104px minmax(0, 1.4fr) 74px minmax(0, 2fr); gap: 16px; align-items: baseline; padding: 12px 4px; font-size: 13px; line-height: 1.5; }
.rsai .rs-up-row + .rs-up-row { border-top: 1px solid var(--gray-200); }
.rsai .rs-up-date,
.rsai .rs-up-ver { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.aih .rs-up-title a { font-weight: 600; color: var(--gray-900); }
.aih .rs-up-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.rsai .rs-up-detail { color: var(--gray-700); }

/* 광고 줄(멀티플렉스 — 옛 자료실 「바로 쓰는 도구」와 「전체 자료 목록」 사이 자리) */
.rsai-list .rsai-ad { margin-top: 48px; }

@media (prefers-reduced-motion: reduce) {
	.rsai-upd-chev { transition: none; }
}

/* ── 태블릿·휴대폰(1024 이하) — 왼쪽 메뉴가 위 칩 줄이 되는 폭. 거터 16 ── */
@media (max-width: 1024px) {
	/* 머리 판 — 그림 없이 판 + 글자(멤버십 머리 띠 폰과 같은 값) · 도구 칸은 위에 폰 그림 */
	.rsai-hd { margin: 18px 16px 0; padding: 24px 20px 22px; }
	.aih .rsai-hd-bg,
	.aih .rsai-slide-bg { display: none; }
	.aih .rsai-hd-t,
	.aih .rsai-slide-t { margin-top: 10px; font-size: 24px; }
	.aih .rsai-hd-sub { margin-top: 8px; font-size: 16px; }
	.aih .rsai-hd-n { column-gap: 14px; }
	.rsai-hd-n span + span::before { content: none; } /* 줄이 바뀌면 가운뎃점이 줄 맨 앞에 남는다 — 간격으로만 */
	.aih .rsai-hd-info { display: flex; flex-wrap: wrap; }
	.rsai-hd + .aihc { padding-top: 28px; }
	.rsai-hero { margin-top: 16px; }
	.aih .rsai-hero + .rsai-lh h1 { margin-top: 24px; }
	.rsai-slide { min-height: 0; }
	.aih .rsai-slide-m { display: block; width: 100%; height: auto; aspect-ratio: 780 / 440; object-fit: cover; }
	.rsai-slide-in { max-width: none; padding: 6px 20px 46px; }
	.aih .rsai-slide-sub { margin-bottom: 20px; font-size: 14px; }
	.rsai-slide-app { padding-top: 16px; }
	.rsai-slide-app .rsai-ti { width: 48px; height: 48px; }
	/* 첫 줄 반반 — 위아래로 쌓고 반마다 AI 그림 칸 줄(.aihc-tiles)과 같은 옆 넘김 */
	.rsai-split { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.rsai-split + .aihc-sec { margin-top: 40px; }
	.rsai-row3 { display: flex; gap: 10px; margin-top: 16px; padding: 0 16px 4px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.rsai-row3::-webkit-scrollbar { display: none; }
	.rsai-row3 .rsai-c { flex: 0 0 168px; scroll-snap-align: start; }
	.aih .rsai-c-t { font-size: 15px; }
	/* 무료 도구 — 순위 카드는 옆으로 넘기고(허브 홈 선반 · 도구 목록 같은 모양) · 분류 선반은 한 줄에 하나 */
	/* 옆 넘김 줄은 넘친 곳을 잘라 그림자도 잘린다 → 그림자 자리만큼 아래 여백(뒤는 음수 마진으로 되돌림) */
	.rsai-rank { display: flex; gap: 14px; margin: 10px 0 -14px; padding: 6px 16px 24px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.rsai-rank::-webkit-scrollbar { display: none; }
	.rsai-rank .rsai-rc { flex: 0 0 156px; scroll-snap-align: start; }
	.rsai-list .rsai-rank,
	.rsai-list .rsai-tchips { margin-inline: -16px; }
	.rsai-tchips { flex-wrap: nowrap; overflow-x: auto; margin-top: 14px; margin-bottom: -8px; padding: 2px 16px 10px; scrollbar-width: none; }
	.rsai-tchips::-webkit-scrollbar { display: none; }
	.aih .rsai-tchips a { flex: none; }
	.rsai-shelf { margin-top: 32px; }
	.aih .rsai-ss { font-size: 14px; }
	.rsai-trows { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.rsai-tr .rsai-ti { width: 60px; height: 60px; }
	.aihc-sec .rsai-trows { padding: 0 16px; } /* 검색 결과 묶음(구획 안은 거터가 없다) */
	/* 엑셀 서식 목록 줄 — 그림 88 */
	.rsai-grid { gap: 20px; margin-top: 16px; }
	.rsai-fr { gap: 14px; }
	.rsai-fr-m { width: 88px; height: 88px; }
	.aih .rsai-fr-t { font-size: 15px; }
	.aih .rsai-fr-s,
	.aih .rsai-fr-d { font-size: 13px; }
	/* 경로는 숨는다(ai-hub.css — 위 칩 줄이 같은 말을 한다) · 제목은 AI 갤러리 폰 화면처럼 위 18 */
	.rsai-list { padding: 0 16px; }
	.aih .rsai-lh h1 { margin-top: 18px; }
	.rsai-bar { gap: 8px; margin-top: 14px; }
	.rsai-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.rsai-chips::-webkit-scrollbar { display: none; }
	.aih .rsai-chips button { flex: none; }
	.rsai .aihc > .rsai-ad { padding: 0 16px; }
	.rsai .rs-up-row { grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; }
	.rsai .rs-up-ver { display: none; }
	.rsai .rs-up-detail { grid-column: 2; color: var(--gray-500); }
}
/* 쪽 번호 → 「더 보기」(옛 자료실과 같은 폭) */
@media (max-width: 768px) {
	.rsai-pagerwrap { padding-top: 22px; }
	.rsai .rs-pager { display: none; }
	.aih .rs-more { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
	.rsai-row3,
	.rsai-rank { scroll-snap-type: none; }
}