/**
 * ISMRI Core — 컴포넌트 스타일
 *
 * DESIGN.md 준수:
 *   - 팔레트 22색 밖의 값을 쓰지 않는다
 *   - 그림자로 위계를 만들지 않는다 (1px 보더 + 배경 톤만)
 *   - 반경은 0 / 4 / 8 / 16 / full 스케일 안에서만 고른다
 *   - S3 반전 면(blue-800) 위에는 흰 글자만 올린다
 *   - 카드 hover 시 보더 색만 바뀐다 (이동·확대·그림자 없음)
 */

:root {
	--ismri-blue-800: #1A3557;
	--ismri-blue-700: #254874;
	--ismri-green-900: #152D1E;
	--ismri-green-800: #2E6040;
	--ismri-char-800: #2D2D2D;
	--ismri-char-500: #666666;
	--ismri-char-100: #D4D4D4;
	--ismri-white: #FFFFFF;

	--ismri-space-sm: 8px;
	--ismri-space-md: 16px;
	--ismri-space-lg: 24px;
	--ismri-space-xl: 40px;
	--ismri-space-2xl: 64px;

	--ismri-prose-max: 720px;
}

/* ── 상담 CTA — S3 반전 면 ───────────────────────────── */

.ismri-auto-cta {
	margin-top: var(--ismri-space-2xl);
	padding: var(--ismri-space-2xl) var(--ismri-space-lg);
	background: var(--ismri-blue-800);
	text-align: center;
}

.ismri-auto-cta__eyebrow {
	display: block;
	margin: 0 0 var(--ismri-space-md);
	font-family: "Pretendard", sans-serif;
	font-weight: 600;
	font-size: 0.7rem;
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: var(--ismri-white);
}

.ismri-auto-cta__title {
	margin: 0 0 var(--ismri-space-md);
	font-family: "Paperlogy", "Pretendard", sans-serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 2.4vw, 1.875rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ismri-white);
}

.ismri-auto-cta__lead {
	max-width: var(--ismri-prose-max);
	margin: 0 auto var(--ismri-space-lg);
	font-family: "Pretendard", sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ismri-white);
}

.ismri-auto-cta__btn {
	display: inline-block;
	padding: var(--ismri-space-md) var(--ismri-space-xl);
	background: var(--ismri-green-800);
	color: var(--ismri-white);
	font-family: "Pretendard", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	border-radius: 4px;
	text-decoration: none;
}

.ismri-auto-cta__btn:hover,
.ismri-auto-cta__btn:focus-visible {
	background: var(--ismri-green-900);
	color: var(--ismri-white);
}

.ismri-auto-cta__btn:focus-visible {
	outline: 2px solid var(--ismri-white);
	outline-offset: 2px;
}

/* ── FAQ 아코디언 — 카드 규격 ─────────────────────────── */

.ismri-faq {
	background: var(--ismri-white);
	border: 1px solid var(--ismri-char-100);
	border-radius: 8px;
	margin: 0 0 var(--ismri-space-sm);
}

.ismri-faq:hover,
.ismri-faq[open] {
	border-color: var(--ismri-green-800);
}

.ismri-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: var(--ismri-space-md);
	padding: var(--ismri-space-md) var(--ismri-space-lg);
	font-family: "Paperlogy", "Pretendard", sans-serif;
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--ismri-char-800);
}

.ismri-faq__q::-webkit-details-marker {
	display: none;
}

.ismri-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin: 6px 0 0 auto;
	border-right: 2px solid var(--ismri-char-500);
	border-bottom: 2px solid var(--ismri-char-500);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.ismri-faq[open] .ismri-faq__q::after {
	transform: rotate(225deg);
	border-color: var(--ismri-green-800);
}

.ismri-faq__q:focus-visible {
	outline: 2px solid var(--ismri-green-800);
	outline-offset: 2px;
}

.ismri-faq__a {
	padding: 0 var(--ismri-space-lg) 20px;
	font-family: "Pretendard", sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ismri-char-800);
}

.ismri-faq__a p {
	margin: 0 0 var(--ismri-space-sm);
}

.ismri-faq__a p:last-child {
	margin-bottom: 0;
}

/* ── 반응형 · 접근성 ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ismri-faq__q::after {
		transition: none;
	}
}

@media (max-width: 600px) {
	.ismri-auto-cta {
		margin-top: var(--ismri-space-xl);
		padding: var(--ismri-space-xl) var(--ismri-space-md);
	}

	.ismri-faq__q {
		padding: var(--ismri-space-md);
	}

	.ismri-faq__a {
		padding: 0 var(--ismri-space-md) var(--ismri-space-md);
	}
}

/* ── 헤더 로고 (site_logo 미설정 시 SVG 마스터로 대체) ─────────────
 *
 * 크기는 높이가 아니라 '폭'으로 지정한다. 스니펫 #106 이 스크롤 축소를
 * 폭(width) 기준으로 구현하고 있으므로 기준을 맞춰야 서로 싸우지 않는다.
 * 로고 비율은 1672:266 = 6.29:1 이므로 폭 240px → 높이 38px.
 *
 * !important 를 쓰지 않는다. #106 이 !important 로 같은 값을 지정하므로
 * 그쪽이 우선하고, #106 이 ismri-core 로 이관되거나 사라지면 이 규칙이
 * 그대로 이어받는다. 어느 경우에도 로고 크기가 비지 않는다.
 *
 * 경계값 860px 은 #106 의 미디어쿼리와 같은 값이다. 함께 바꿀 것.
 */
.ismri-core-logo{display:flex;align-items:center;line-height:0}
.ismri-core-logo .custom-logo-link{display:inline-flex;align-items:center}
.ismri-core-logo img.custom-logo{
  width:240px;height:auto;max-width:none;display:block;
  transition:width .25s ease
}
.ismri-header.is-scrolled .ismri-core-logo img.custom-logo{width:176px}

@media (max-width:860px){
  .ismri-core-logo img.custom-logo{width:150px}
  .ismri-header.is-scrolled .ismri-core-logo img.custom-logo{width:120px}
}

/* 모션 최소화 설정에서는 크기가 급변해도 애니메이션을 넣지 않는다. */
@media (prefers-reduced-motion: reduce){
  .ismri-core-logo img.custom-logo{transition:none}
}

/* ── 카드 전체를 클릭 영역으로 (stretched link) ─────────────────────
 *
 * 문제 (2026-08-17 실측): 카드 종류에 따라 클릭 영역이 달랐다.
 *
 *   ismri-gma-region-card (12개)  카드 전체가 <a>          — 정상
 *   ismri-gma-cert-item   (4개)   카드 전체가 <a>          — 정상
 *   ismri-svc-card        (홈 10개)          <div> 안의 링크만
 *   ismri-hub-card        (카테고리 하단 9개) <div> 안의 링크만
 *   ismri-case-card       (홈 3 · /cases/ 4) <div> 안의 링크만
 *
 * 특히 카테고리 페이지 하단의 연관 카드(hub-card)가 여기 해당한다.
 * hover 는 이미 걸려 있어 눌리는 것처럼 보이는데 실제로는 글자만 링크였다.
 *
 * 마크업은 그대로 두고 카드 안 링크의 ::after 를 카드 전체로 늘린다.
 * case-card 는 링크 3개(이미지·제목·자세히보기)가 전부 같은 URL 이므로
 * 겹쳐도 무해하다. 실제 <a> 를 쓰므로 키보드 포커스, 새 탭으로 열기,
 * 링크 주소 복사가 모두 그대로 동작한다. (JS 클릭 핸들러는 이것이 안 된다)
 */
.ismri-svc-card,
.ismri-hub-card,
.ismri-case-card{position:relative;cursor:pointer}

.ismri-svc-card a,
.ismri-hub-card a,
.ismri-case-card a{position:static}

.ismri-svc-card a::after,
.ismri-hub-card a::after,
.ismri-case-card a::after{
  content:"";position:absolute;inset:0;z-index:1
}

/* hover 는 DESIGN.md 규칙을 따른다 — "카드 hover 시 보더 색만 바뀐다 (이동·확대·그림자 없음)".
 * 그래서 배경 톤만 바꾼다. 팔레트 blue-50 안에서 고른 값이다.
 *
 * 주의: 기존 .ismri-hub-card:hover 는 translateY(-3px) + box-shadow 를 쓰고 있어
 * DESIGN.md 를 위반한다. 여기서 따라가지 않았다. 그쪽을 고칠지는 별도 판단 사항이다.
 */
.ismri-svc-card,
.ismri-case-card{
  transition:background-color .15s ease
}
.ismri-svc-card:hover,
.ismri-case-card:hover{
  background-color:#E9EDF1
}
@media (prefers-reduced-motion: reduce){
  .ismri-svc-card,.ismri-case-card{transition:none}
}

/* 키보드 사용자에게도 카드 단위로 초점이 보이게 한다. */
.ismri-svc-card:has(a:focus-visible),
.ismri-hub-card:has(a:focus-visible),
.ismri-case-card:has(a:focus-visible){
  outline:2px solid #1A3557;outline-offset:3px
}