/*
 * Barog Journal — base.css (1/5)
 * 기본 · 레이아웃 틀 · 버튼 · 헤더 · 언어 국기 · 모바일 메뉴 · 푸터
 * 공통 파일: EN·VI·TH 모두 글자 하나까지 같게 유지 (언어별 차이는 tokens.css · lang.css에만). 배포 때 main.css 하나로 합쳐짐
 * 컴포넌트 CSS는 의미 토큰·컴포넌트 토큰만 씁니다 (00_공통.md 2장).
 */

/* ── 기본 ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font: var(--fw-regular) var(--fs-base) / var(--lh-body) var(--font-body);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--fw-heading, 500); line-height: var(--lh-heading); margin: 0 0 var(--space-4); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-4); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bj-skip { position: absolute; left: -9999px; }
.bj-skip:focus { left: var(--space-4); top: var(--space-4); z-index: 999; background: var(--color-bg); padding: var(--space-2) var(--space-4); }

.bj-container { width: 100%; max-width: calc(var(--container-max) + var(--container-pad) * 2); margin-inline: auto; padding-inline: var(--container-pad); }
.bj-container--content { max-width: calc(var(--content-max) + var(--container-pad) * 2); }
.bj-section { padding-block: var(--space-section) 0; }
.bj-section__title { margin-bottom: var(--space-5); }
.bj-section__lead, .bj-lead { color: var(--color-text-muted); }
.bj-main { padding-bottom: var(--space-section); }
.single .bj-main { padding-bottom: 0; } /* 상세: 출처 블록 아래 32 뒤 바로 푸터 (Figma) */

.bj-label {
	margin: 0 0 var(--space-2);
	font-size: var(--fs-xs); font-weight: var(--fw-semibold);
	color: var(--color-accent);
	text-transform: var(--label-transform); letter-spacing: var(--label-spacing);
}
/* Text Link (Figma): link 600 + 밑줄, 위아래 12 포함 터치 48 */
.bj-text-link { display: inline-block; padding-block: var(--space-3); color: var(--color-link); font-size: var(--fs-base); line-height: 1.6; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.bj-more { margin: var(--space-7) 0 0; }

/* ── 버튼 ───────────────────────────────────── */
.bj-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	min-height: 48px; padding: var(--space-3) var(--space-5);
	border-radius: var(--button-radius);
	font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 1.3; text-decoration: none;
	transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}
.bj-btn:active { transform: scale(.98); }
.bj-btn--primary { background: var(--color-cta-bg); color: var(--color-cta-text); }
.bj-btn--secondary { border: 0; color: var(--color-text); background: var(--color-btn2-bg); box-shadow: var(--btn2-shadow); } /* 11/13: 흰 바탕 · 테두리 없음 */
@media (hover: hover) {
	.bj-btn--primary:hover { background: var(--color-cta-hover); }
	.bj-btn--secondary:hover { background: var(--color-btn2-hover); }
}
/* 채널 아이콘: SVG를 모양(mask)으로 쓰고 색은 background — 고유색은 아이콘에만 (00_공통.md 2-1) */
.bj-btn__icon { width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.bj-btn__icon--whatsapp  { --icon: url("../icons/whatsapp.svg"); background: #25D366; }
.bj-btn__icon--instagram { --icon: url("../icons/instagram.svg"); }
.bj-btn__icon--line      { --icon: url("../icons/line.svg"); background: #06C755; }
.bj-btn__icon--zalo      { --icon: url("../icons/zalo.svg"); background: #0068FF; }
.bj-btn__icon--messenger { --icon: url("../icons/messenger.svg"); background: #0866FF; }
.bj-btn__icon--kakao     { --icon: url("../icons/kakaotalk.svg"); }
.bj-btn__icon--official  { display: none; }
.bj-channels { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 600px) { .bj-channels { flex-direction: row; flex-wrap: wrap; } }

/* ── 헤더 ───────────────────────────────────── */
.bj-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border); }
.bj-header__inner { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }
.bj-header__logo { display: flex; align-items: center; text-decoration: none; }
.bj-header__logo-img { height: 28px; width: auto; }
.bj-header__logo-text { font-family: var(--font-heading); font-size: var(--fs-lg); }
.bj-nav { display: none; margin-inline: auto; }
.bj-nav__list { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.bj-nav__list a { text-decoration: none; font-size: var(--fs-sm); }
/* Nav Item (Figma): body-sm, 위 8 · 아래 6, 현재 = 600 + 키컬러 2px 밑줄(데스크톱) / 왼쪽 3px 막대(모바일 메뉴) */
.bj-nav__list a { display: block; padding: 8px 0 6px; font-size: var(--fs-sm); line-height: 1.5; border-bottom: 2px solid transparent; }
.bj-nav__list a[aria-current="page"], .bj-nav__list .current-menu-item > a { font-weight: var(--fw-semibold); border-bottom-color: var(--color-cta-bg); }
.bj-header__actions { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.bj-header__actions > .bj-lang, .bj-header__cta { display: none; }
/* 메뉴 버튼 48×48, 막대 20×2 세 줄 간격 6 (Figma Menu Button) — 헤더 오른쪽 여백 8 */
.bj-header__inner:has(.bj-menu-btn) { padding-right: 8px; }
.bj-menu-btn { width: 48px; height: 48px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.bj-menu-btn__bar, .bj-menu-btn__bar::before, .bj-menu-btn__bar::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--color-text); position: relative; content: ""; }
.bj-menu-btn__bar::before { position: absolute; top: -6px; }
.bj-menu-btn__bar::after { position: absolute; top: 6px; }
@media (min-width: 960px) { .bj-header__inner:has(.bj-menu-btn) { padding-right: var(--container-pad); } }
.bj-mobile-menu { padding: var(--space-5) var(--container-pad) var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.bj-mobile-menu .bj-nav__list { flex-direction: column; gap: 0; }
.bj-mobile-menu .bj-nav__list a { display: block; padding: var(--space-3) 0 var(--space-3) var(--space-4); font-size: var(--fs-lg); border-bottom: 0; border-left: 3px solid transparent; }
.bj-mobile-menu .bj-nav__list a[aria-current="page"], .bj-mobile-menu .bj-nav__list .current-menu-item > a { border-left-color: var(--color-cta-bg); }
.bj-mobile-menu__label { margin: var(--space-5) 0 var(--space-2); font-size: var(--fs-xs); letter-spacing: var(--label-spacing); color: var(--color-text-muted); }
@media (min-width: 960px) {
	/* 데스크톱 헤더: 76, [로고 36 + 메뉴(사이 32)] 왼쪽 묶음 | 오른쪽 [국기 + 상담 버튼(사이 24)] — 11/12 메뉴를 로고 옆으로 이동 */
	.bj-header__logo-img { height: 36px; }
	.bj-nav, .bj-header__actions > .bj-lang, .bj-header__cta { display: flex; }
	.bj-nav { margin: 0 0 0 var(--space-7); } /* 로고–메뉴 48 */
	.bj-header__actions { margin-left: auto; gap: var(--space-5); }
	.bj-menu-btn, .bj-mobile-menu { display: none !important; }
}

/* 언어 국기 */
.bj-lang { display: flex; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
/* Lang Item (Figma): 28×28, 사이 8, 현재 언어 = 키컬러 2px 밑줄 */
.bj-lang { gap: var(--space-2); }
.bj-lang__link { display: grid; place-items: center; width: 28px; height: 28px; text-decoration: none; border-bottom: 2px solid transparent; }
.bj-lang__link[aria-current="true"] { border-bottom-color: var(--color-cta-bg); }
.bj-lang--mobile .bj-lang__link { width: 48px; height: 48px; }
.bj-lang__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }
.bj-lang--mobile .bj-lang__flag { width: 28px; height: 20px; }
.bj-lang__flag--missing { font-size: 10px; font-weight: var(--fw-semibold); }

/* ── 푸터 ───────────────────────────────────── */
/* Figma Footer: notice 배경, 위아래 32, 사이 8 */
.bj-footer { padding-block: var(--space-6); background: var(--color-notice-bg); }
@media (min-width: 960px) { .bj-footer { padding-block: var(--space-7); } } /* 데스크톱 위아래 48 */
.bj-footer .bj-container { display: flex; flex-direction: column; gap: var(--space-2); }
.bj-footer p { margin: 0; }
.bj-footer__operator { font-size: var(--fs-base); line-height: 1.3; font-weight: var(--fw-semibold); }
.bj-footer__disclaimer, .bj-footer__meta { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }

/* ── 모바일 메뉴 = 겹쳐 뜨는 패널 (11/12) ──
   헤더 바로 아래에 본문 위로 띄움 → 본문이 밀려 내려가지 않음. 뒤는 어둡게(누르면 닫힘), 열린 동안 페이지 스크롤 잠금 */
.bj-mobile-menu {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 2;
	background: var(--color-bg); border-bottom: var(--border-width) solid var(--color-border);
	box-shadow: 0 12px 24px rgb(0 0 0 / .08);
	max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
	animation: bj-menu-in var(--duration-fast) var(--ease);
}
@keyframes bj-menu-in { from { opacity: 0; transform: translateY(-8px); } }
.bj-header.is-menu-open::after {
	content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 100vh; z-index: 1; /* 헤더 바로 아래부터 (관리자 바·헤더 높이와 무관) */
	background: rgb(0 0 0 / .32); animation: bj-fade-in var(--duration-fast) var(--ease);
}
@keyframes bj-fade-in { from { opacity: 0; } }
html.is-menu-open { overflow: hidden; }
html.is-menu-open .bj-sticky-cta { transform: translateY(110%); } /* 메뉴 열린 동안 하단 고정 버튼 숨김 */
@media (min-width: 960px) { .bj-header.is-menu-open::after { display: none; } html.is-menu-open { overflow: visible; } }

/* 푸터 주소 + 지도 링크 */
.bj-footer__address { line-height: 1.6; }
.bj-footer__map { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (hover: hover) { .bj-footer__map:hover { color: var(--color-accent); } }

/*
 * Barog Journal — components.css (2/5)
 * 그리드 · 카드 · 감수자 · 의료진 · Contact · 하단 고정 버튼 · 목록 도구(검색·칩·페이지 번호) · 병원 위치
 * 공통 파일: EN·VI·TH 모두 글자 하나까지 같게 유지 (언어별 차이는 tokens.css · lang.css에만). 배포 때 main.css 하나로 합쳐짐
 * 컴포넌트 CSS는 의미 토큰·컴포넌트 토큰만 씁니다 (00_공통.md 2장).
 */

/* ── 그리드 ─────────────────────────────────── */
.bj-grid { display: grid; gap: var(--space-7) var(--space-5); } /* 모바일 카드 사이 48 (Figma) */
.bj-grid--compact { gap: 0 var(--space-5); }
.bj-grid--doctors { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-4); } /* 모바일 2열, 열 사이 16 */ /* 의료진 카드 모바일 2열 (00_공통.md 3-17) */
@media (min-width: 600px) { .bj-grid--cards, .bj-grid--compact, .bj-grid--doctors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) {
	.bj-grid--cards, .bj-grid--doctors { grid-template-columns: repeat(3, 1fr); }
	.bj-grid--cards { column-gap: var(--space-7); } /* 데스크톱 카드 3열 사이 48 (Figma 랜딩·목록·관련 글 공통) */
}

/* ── 카드 ───────────────────────────────────── */
.bj-card { container-type: inline-size; }
.bj-card__link { display: block; text-decoration: none; border-radius: var(--card-radius); }
.bj-card__link:focus-visible { outline-offset: 6px; }
/* Journal Card (Figma): 썸네일 3:2 → 16 → 본문(사이 8) */
.bj-card { display: flex; flex-direction: column; gap: var(--space-2); }
.bj-card__link { display: flex; flex-direction: column; gap: var(--space-2); }
.bj-card__link > * { margin: 0; }
.bj-card__media { aspect-ratio: var(--card-image-ratio); background: var(--color-surface); border-radius: var(--card-radius); overflow: hidden; margin-bottom: var(--space-2); } /* 8 + gap 8 = 16 */
.bj-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease); }
.bj-card .bj-label { line-height: 1.4; }

/* 글자 표지 (Figma Journal Card Type=No Image): 3:2 연노랑, 안쪽 24, 위 금색 막대 32×3, 아래 질문(card-title 세리프) */
.bj-card__media--text { background: var(--color-answer-bg); padding: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; }
.bj-card__cover-bar { width: 32px; height: 3px; background: var(--color-accent); }
.bj-card__cover-q { font: 500 var(--fs-lg) / 1.25 var(--font-heading); color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.bj-card__title { font-size: var(--fs-lg); line-height: 1.25; }
.bj-card__excerpt { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bj-card .bj-reviewer--compact { margin-top: 0; }
.bj-reviewer__reading { flex: none; color: var(--color-text-muted); white-space: nowrap; }
@media (hover: hover) {
	.bj-card__link:hover .bj-card__media img { transform: scale(1.03); }
	.bj-card__link:hover .bj-card__title { text-decoration: underline; text-underline-offset: 4px; }
}

/* Compact Card (Figma): 위아래 16, 썸네일 80 1:1, 사이 16, 라벨–제목 4, 아래 구분선 */
.bj-card-compact { display: flex; gap: var(--space-4); align-items: center; text-decoration: none; padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }
.bj-card-compact__media { flex: 0 0 80px; width: 80px; aspect-ratio: 1; background: var(--color-surface); overflow: hidden; border-radius: var(--card-radius); }
.bj-card-compact__media img { width: 100%; height: 100%; object-fit: cover; }
.bj-card-compact__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bj-card-compact__text .bj-label { margin: 0; line-height: 1.4; }
.bj-card-compact__title { font-family: var(--font-heading); font-weight: var(--fw-heading, 500); font-size: var(--fs-lg); line-height: 1.25; }
@media (hover: hover) { .bj-card-compact:hover .bj-card-compact__title { text-decoration: underline; text-underline-offset: 4px; } }

/* 감수자 (Figma Reviewer Badge) */
.bj-reviewer p { margin: 0; }
.bj-reviewer__photo { border-radius: 50%; background: var(--color-surface); object-fit: cover; flex: none; }
/* compact: [아바타 · 감수자 · 수정일 (줄바꿈 가능)] [읽는 시간 오른쪽] — Figma Meta 행 */
.bj-reviewer--compact { display: flex; align-items: center; gap: var(--space-1) var(--space-3); margin-top: var(--space-3); font-size: var(--fs-xs); line-height: 1.4; }
.bj-reviewer__who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); }
.bj-reviewer--compact .bj-reviewer__photo { width: 24px; height: 24px; }
.bj-reviewer__date { color: var(--color-text-muted); }
/* 카드: 폭이 좁아 "· Updated"가 줄 맨 앞에 떨어짐 → 이름 / 날짜 두 줄로, 가운데 점 없이 */
.bj-card .bj-reviewer__who { flex-direction: column; align-items: flex-start; }
.bj-card .bj-reviewer__sep { display: none; }
.bj-reviewer--full { display: flex; gap: var(--space-4); align-items: flex-start; }
.bj-reviewer--full .bj-reviewer__photo { width: 48px; height: 48px; }
.bj-reviewer__info { display: flex; flex-direction: column; gap: 2px; }
.bj-reviewer__kicker { font-size: var(--fs-xs); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: var(--label-transform); letter-spacing: var(--label-spacing); }
.bj-reviewer__name { font-size: var(--fs-base); line-height: 1.3; font-weight: var(--fw-semibold); color: var(--color-text); }
.bj-reviewer__name a { text-decoration: none; }
.bj-reviewer__meta { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-reviewer--full .bj-reviewer__date { font-size: var(--fs-xs); line-height: 1.4; }

/* 의료진 (Figma Doctor Card): 사진 1:1 → 사이 12 → 이름 · 직함 · 전문 분야 */
.bj-doctor { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bj-doctor > * { margin: 0; }
.bj-doctor__photo { aspect-ratio: 1; background: var(--color-surface); border-radius: var(--card-radius); overflow: hidden; }
.bj-doctor__photo img { width: 100%; height: 100%; object-fit: cover; }
.bj-doctor__name { font-size: var(--fs-lg); line-height: 1.25; }
.bj-doctor__meta { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-doctor__spec { font-size: var(--fs-sm); line-height: 1.5; }
/* 의료진 경력: 점 목록 (전부 표시) */
.bj-doctor__creds { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-doctor__creds > li { position: relative; padding-left: var(--space-4); }
.bj-doctor__creds > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }

/* ── Contact · 하단 고정 ───────────────────── */
/* Contact (Figma): surface, 위아래 32 · 좌우 24, 사이 16, 버튼 전체 폭 세로 */
.bj-contact { margin-top: var(--space-6); padding-block: var(--space-6); background: var(--color-surface); }
.bj-contact__inner { display: flex; flex-direction: column; gap: var(--space-4); padding-inline: var(--space-5); }
.bj-contact__inner > div:first-child { display: flex; flex-direction: column; gap: var(--space-4); }
.bj-contact__inner p, .bj-contact__inner h2 { margin: 0; }
.bj-contact__title { font-size: var(--fs-2xl); line-height: 1.2; }
.bj-contact__lead { color: var(--color-text-muted); }
.bj-contact .bj-channels { gap: var(--space-4); }
.bj-contact .bj-channels .bj-btn { width: 100%; }
@media (min-width: 600px) { .bj-contact__inner { padding-inline: var(--container-pad); } .bj-contact .bj-channels .bj-btn { width: auto; } }
/* 데스크톱 Contact (Figma): 위아래 96, 왼쪽 제목·설명(사이 12) / 오른쪽 버튼 가로(사이 12) */
@media (min-width: 960px) {
	.bj-contact { padding-block: var(--space-section); }
	.bj-contact__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-6); }
	.bj-contact__inner > div:first-child { gap: var(--space-3); }
	.bj-contact .bj-channels { gap: var(--space-3); flex-wrap: nowrap; }
	.bj-contact .bj-channels .bj-btn { white-space: nowrap; }
}
/* 글 끝 상담 블록 (Figma Article End CTA) */
.bj-contact--compact { margin-top: 0; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-3); }
.bj-contact--compact > * { margin: 0; }
.bj-contact--compact .bj-contact__title { font: var(--fw-semibold) var(--fs-base) / 1.3 var(--font-body); }
.bj-contact--compact .bj-btn { width: 100%; }
.bj-contact--compact .bj-text-link { font-size: var(--fs-sm); line-height: 1.5; font-weight: var(--fw-regular); text-decoration: none; }

.bj-sticky-cta {
	position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky-cta);
	padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
	background: var(--color-bg); border-top: var(--border-width) solid var(--color-border);
	transition: transform var(--duration-fast) var(--ease);
}
.bj-sticky-cta__btn { width: 100%; }
.bj-sticky-cta.is-hidden { transform: translateY(110%); }
/* 하단 바 자리 여백: JS가 없어 하단 바가 숨지 못할 때만. JS가 있으면 Contact·푸터가 보일 때 하단 바가 내려가므로 여백 불필요 (있으면 푸터 아래 흰 공간이 남음, 11/13) */
html:not(.js) body { padding-bottom: 80px; }
@media (min-width: 960px) { .bj-sticky-cta { display: none; } html:not(.js) body { padding-bottom: 0; } }

/* 도구: 검색 → 칩 → 글 개수, 사이 16 */
.bj-toolbar { display: flex; flex-direction: column; gap: var(--space-4); }
.bj-toolbar > * { margin: 0; }

/* Search Field: 알약형 48, 테두리 text-muted(대비 3:1↑), 돋보기 20 + 8 */
.bj-search { position: relative; width: 100%; }
.bj-search__icon { position: absolute; left: var(--space-4); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: url("../icons/search.svg") no-repeat center / 20px 20px; pointer-events: none; }
.bj-search__input {
	width: 100%; height: 48px; padding: 0 var(--space-4) 0 calc(var(--space-4) + 20px + var(--space-2));
	border: var(--border-width) solid var(--color-text-muted); border-radius: var(--button-radius);
	background: var(--color-bg); color: var(--color-text); font: var(--fw-regular) var(--fs-base) / 1.6 var(--font-body);
	-webkit-appearance: none; appearance: none;
}
.bj-search__input::placeholder { color: var(--color-text-muted); opacity: 1; }

/* Filter Chip: 높이 40, 좌우 16, 사이 8, 선택 = text 면 + bg 글자 600. 모바일 가로 스크롤 */
.bj-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad); padding-block: 4px; } /* 위아래 4 = 터치 48 */
.bj-chips::-webkit-scrollbar { display: none; }
.bj-chip { flex: none; height: 40px; padding: 0 var(--space-4); display: inline-flex; align-items: center; border: var(--border-width) solid var(--color-border); border-radius: var(--button-radius); font-size: var(--fs-sm); line-height: 1.5; text-decoration: none; color: var(--color-text); }
.bj-chip[aria-current="page"] { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); font-weight: var(--fw-semibold); }
@media (hover: hover) { .bj-chip:not([aria-current]):hover { background: var(--color-surface); } }
.bj-toolbar__count { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }

/* Pagination: 왼쪽 정렬, 사이 4, 칸 40, 현재 = text 면 */
.bj-pagination ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.bj-pagination a, .bj-pagination span { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 var(--space-3); text-decoration: none; border-radius: var(--button-radius); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text); }
.bj-pagination .current { background: var(--color-text); color: var(--color-bg); font-weight: var(--fw-semibold); }
@media (hover: hover) { .bj-pagination a:hover { background: var(--color-surface); } }

@media (min-width: 960px) {
	.bj-toolbar { display: grid; grid-template-columns: 1fr 360px; align-items: center; column-gap: var(--space-5); }
	.bj-toolbar .bj-search { grid-column: 2; grid-row: 1; }
	.bj-toolbar .bj-chips { grid-column: 1; grid-row: 1; margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
	.bj-toolbar__count { grid-column: 1 / -1; }
	.bj-pagination ul { justify-content: center; }
}

/* ── 병원 위치 (About "Visit us", 11/12) ─────────
   카드: 테두리 + 모서리 16, 안쪽 24, [핀 원 48 연노랑] [이름 · 주소 · 2호선 안내] / 아래(데스크톱 오른쪽) 구글 지도 버튼 */
.bj-location__card { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5); background: #fff; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
.bj-location__pin { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--color-answer-bg); color: var(--color-accent); }
.bj-location__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bj-location__text > * { margin: 0; }
.bj-location__name { font: 500 var(--fs-lg) / 1.25 var(--font-heading); }
.bj-location__address { font-style: normal; font-size: var(--fs-sm); line-height: 1.5; }
.bj-location__access { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-location__line { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #00A84D; color: #fff; font-size: 12px; font-weight: var(--fw-semibold); line-height: 1; } /* 서울 지하철 2호선 색 */
.bj-location__btn { grid-column: 1 / -1; width: 100%; }
.bj-location__btn-icon { flex: none; }
.bj-location__ext { transition: transform var(--duration-fast) var(--ease); }
@media (hover: hover) {
	.bj-location__card:hover { border-color: var(--color-text-muted); box-shadow: 0 8px 24px rgb(0 0 0 / .06); }
	.bj-location__btn:hover .bj-location__ext { transform: translate(2px, -2px); }
}
@media (min-width: 960px) {
	.bj-location__card { grid-template-columns: 48px 1fr auto; align-items: center; padding: var(--space-6); column-gap: var(--space-5); }
	.bj-location__btn { grid-column: auto; width: auto; white-space: nowrap; }
}

/* 의료진 모바일 2열: 이름이 "Bae Geun-/woo"처럼 끊기지 않게 한 단계 작게 */
@media (max-width: 599px) { .bj-grid--doctors:not(.bj-doctors-home) .bj-doctor__name { font-size: var(--fs-base); } }
/* 위치 카드는 바탕이 흰색이라 흰 버튼이 묻힘 → 회색 면 버튼, hover는 한 단계 어둡게 (11/13) */
.bj-location .bj-btn--secondary { background: var(--color-surface); box-shadow: none; }
@media (hover: hover) { .bj-location .bj-btn--secondary:hover { background: #E8E8E5; } }
.bj-location .bj-btn--secondary:active { background: #E8E8E5; }

/*
 * Barog Journal — pages.css (3/5)
 * 화면별 배치: 랜딩(메인 의료진 띠 포함) · 목록 · 상세(본문·FAQ·출처·사이드) · About
 * 공통 파일: EN·VI·TH 모두 글자 하나까지 같게 유지 (언어별 차이는 tokens.css · lang.css에만). 배포 때 main.css 하나로 합쳐짐
 * 컴포넌트 CSS는 의미 토큰·컴포넌트 토큰만 씁니다 (00_공통.md 2장).
 */

/* ── 랜딩 (Figma EN / Main) ─────────────────── */
/* 랜딩 소개 줄 "The Journal": Figma 모바일·데스크톱 모두 없음 (11/12) → 화면에서만 숨김, h1은 검색엔진·화면 낭독기용으로 유지 */
.bj-intro { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; margin: 0; }

/* Cover Story: 모바일 사진 4:3 전체 폭 + 아래 글(위 20 · 좌우 20 · 아래 8, 사이 12) */
.bj-cover { position: relative; }
.bj-cover__media { background: var(--color-surface); aspect-ratio: 4 / 3; overflow: hidden; }
.bj-cover__media img { width: 100%; height: 100%; object-fit: cover; }
.bj-cover__box { padding: 20px var(--container-pad) var(--space-2); background: var(--color-bg); display: flex; flex-direction: column; gap: var(--space-3); }
.bj-cover__box > * { margin: 0; }
.bj-cover__box .bj-label { line-height: 1.4; }
.bj-cover__box .bj-reviewer--compact { margin-top: 0; }
.bj-cover__title { font-size: var(--fs-2xl); line-height: 1.2; }
.bj-cover__title a { text-decoration: none; }
.bj-cover__excerpt { color: var(--color-text-muted); }

/* 카드 이후 블록: 위 48 · 블록 사이 48 (데스크톱은 섹션 간격) */
.bj-landing { padding-block: var(--space-7) 0; display: flex; flex-direction: column; gap: var(--space-7); }
.bj-landing__block > * { margin: 0; }
.bj-landing__block > .bj-more { margin-top: var(--space-7); } /* 마지막 카드–View all 48 */
.bj-landing h2 { line-height: 1.2; }
.bj-start-here, .bj-about-summary { display: flex; flex-direction: column; gap: var(--space-3); }
.bj-start-here .bj-section__lead { font-size: var(--fs-sm); line-height: 1.5; }
.bj-about-summary .bj-text-link { margin: 0; }
.home .bj-main { padding-bottom: 0; }
/* 데스크톱 랜딩 (Figma): 카드 위 72, 카드–View all 64, 블록 사이 96, Start here 2열 사이 32, About 폭 720 */
@media (min-width: 960px) {
	.bj-landing { padding-block: 72px var(--space-section); gap: var(--space-section); }
	.bj-landing__block > .bj-more { margin-top: var(--space-8); }
	.bj-landing .bj-grid--cards { column-gap: var(--space-7); }
	.bj-landing .bj-grid--compact { column-gap: var(--space-6); }
	.bj-about-summary { max-width: var(--content-max); }
	.home .bj-contact { margin-top: 0; }
}
/* 데스크톱 Cover Story (Figma): 사진 1440×620 + 왼쪽 아래 흰 상자 600 (안쪽 40, 아래에서 56) */
@media (min-width: 960px) {
	.bj-cover__media { aspect-ratio: auto; height: 620px; }
	.bj-cover__box { position: absolute; left: max(var(--container-pad), calc((100% - var(--container-max)) / 2)); bottom: 56px; width: 600px; padding: 40px; background: #fff; gap: var(--space-4); }
	.bj-cover__title { font-size: var(--fs-3xl); line-height: 1.15; }
}

/* 순서 주의: 아래 메인 의료진 띠는 위 .bj-landing__block > * { margin: 0 } 보다 뒤에 있어야 가로 넘기기 여백이 살아남 */
/* 메인 의료진 (의사 3명 기준): 모바일 = 가로로 넘겨 보기(한 장 반 보임), 600~ = 3열. 경력 목록은 About에서만 */
.bj-doctors-home .bj-doctor__creds { display: none; }
.bj-doctors-home + p { margin-top: var(--space-5); }
@media (max-width: 599px) {
	.bj-doctors-home {
		display: grid; grid-auto-flow: column; grid-auto-columns: 62%; grid-template-columns: none;
		overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-pad);
		margin-inline: calc(var(--container-pad) * -1); padding-inline: var(--container-pad);
		scrollbar-width: none; overscroll-behavior-x: contain;
	}
	.bj-doctors-home::-webkit-scrollbar { display: none; }
	.bj-doctors-home > .bj-doctor { scroll-snap-align: start; }
}
@media (min-width: 600px) {
	.bj-doctors-home { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	.bj-doctors-home { column-gap: var(--space-7); }
}

/* ── 목록 (Figma EN / List) ─────────────────
   위아래 32, 블록(소개·도구·카드·페이지 번호) 사이 48 */
.bj-list { padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-7); }
.bj-list > * { margin: 0; min-width: 0; }
.bj-list__intro { display: flex; flex-direction: column; gap: var(--space-2); }
.bj-list__intro > * { margin: 0; }
.bj-list__title { line-height: 1.15; }
.bj-list__lead { color: var(--color-text-muted); }
.bj-list__empty > * + * { margin-top: var(--space-5); }
.blog .bj-main, .category .bj-main, .search .bj-main, .error404 .bj-main { padding-bottom: 0; }
.bj-list + .bj-contact { margin-top: 0; }

/* ── 상세 (Figma EN / Article) ───────────────
   블록 사이 32 · 글 머리 안 12 · 섹션(h2 단위) 안 24 */
.bj-article-layout { padding-block: var(--space-6); }
.bj-article { max-width: var(--content-max); min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.bj-article > *, .bj-prose > * { margin: 0; min-width: 0; } /* 표 최소 폭 560이 화면을 밀어내지 않게 (가로 스크롤은 표 안에서만) */
.bj-article-header { display: flex; flex-direction: column; gap: var(--space-3); }
.bj-article-header > * { margin: 0; }
.bj-article-header .bj-label { line-height: 1.4; }
.bj-article-header__title { font-size: var(--fs-3xl); line-height: 1.15; }
.bj-article-header .bj-reviewer--compact { margin-top: 0; }
.bj-medical-note { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }

/* 짧은 답 (Figma Answer Box) */
.bj-answer { padding: var(--space-5); background: var(--color-answer-bg); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); }
.bj-answer > * { margin: 0; }
.bj-answer__kicker { font-size: var(--fs-xs); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--color-accent); text-transform: var(--label-transform); letter-spacing: var(--label-spacing); }
.bj-answer__question { font-family: var(--font-heading); font-weight: var(--fw-heading, 500); font-size: var(--fs-lg); line-height: 1.25; }

/* 이미지 (Figma Article Image) */
.bj-figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bj-figure img { width: 100%; border-radius: var(--card-radius); background: var(--color-surface); }
.bj-figure--hero img { aspect-ratio: var(--card-image-ratio); object-fit: cover; }
.bj-figure figcaption, .bj-prose figcaption { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); margin-top: var(--space-2); }

/* 본문 — 섹션 안 요소 사이 24, 새 h2 앞은 블록 간격 32 */
.bj-prose > * { margin: 0; }
.bj-prose > * + * { margin-top: var(--space-5); }
.bj-prose > h2 { margin-top: var(--space-6); line-height: 1.2; }
.bj-prose > h2:first-child { margin-top: 0; }
.bj-prose > h3 { line-height: 1.25; }
.bj-prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.bj-prose strong { font-weight: var(--fw-semibold); }
.bj-prose sup { color: var(--color-accent); font-size: .7em; line-height: 0; vertical-align: super; } /* 출처 번호 ¹ */

/* 목록 (Figma List Item: 마커 accent 점, 마커–글 12, 항목 사이 8) */
.bj-prose ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bj-prose ul > li { display: flex; gap: var(--space-3); }
.bj-prose ul > li::before { content: ""; flex: none; width: 20px; height: 27px; background: url("../img/list-marker.svg") no-repeat center / 20px 27px; }
.bj-prose ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.bj-prose ol > li::marker { color: var(--color-accent); font-weight: var(--fw-semibold); }

/* 인용 = 원장 코멘트 (Figma Quote) */
.bj-prose blockquote { margin-inline: 0; padding-left: var(--space-4); border-left: 3px solid var(--color-cta-bg); display: flex; flex-direction: column; gap: var(--space-2); }
.bj-prose blockquote p { margin: 0; font-family: var(--font-heading); font-weight: var(--fw-heading, 500); font-size: var(--fs-lg); line-height: 1.25; }
.bj-prose blockquote cite { font-style: normal; font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }

/* 표 (Figma Table: 캡션 위, 최소 폭 560, 칸 12/16, 머리 surface) */
.bj-table-scroll { overflow-x: auto; }
.bj-prose figure.wp-block-table { margin-inline: 0; display: flex; flex-direction: column; }
.bj-prose table { min-width: 560px; width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.bj-prose table caption, .bj-prose .wp-block-table figcaption { caption-side: top; order: -1; text-align: left; margin: 0 0 var(--space-2); font-size: var(--fs-sm); line-height: 1.5; font-weight: var(--fw-semibold); color: var(--color-text); }
.bj-prose th, .bj-prose td { padding: var(--space-3) var(--space-4); border: 0; border-bottom: var(--border-width) solid var(--color-border); text-align: left; vertical-align: top; }
.bj-prose thead th, .bj-prose thead td { background: var(--color-surface); font-weight: var(--fw-semibold); }
.bj-prose .wp-block-table thead { border-bottom: 0; } /* 워드프레스 기본 3px 굵은 선 제거 */

/* FAQ (Figma FAQ Item: 본문의 h2 + Details 블록) */
.bj-prose details { border-bottom: var(--border-width) solid var(--color-border); padding-block: var(--space-4); }
.bj-prose > h2 + details { margin-top: var(--space-2); } /* FAQ 제목–첫 항목 8 */
.bj-prose > details + details { margin-top: 0; }
.bj-prose summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); font-size: var(--fs-base); line-height: 1.3; font-weight: var(--fw-semibold); }
.bj-prose summary::-webkit-details-marker { display: none; }
.bj-prose summary::after { content: "+"; flex: none; font: 500 var(--fs-xl) / 1.25 var(--font-heading); color: var(--color-text-muted); }
.bj-prose details[open] summary::after { content: "−"; }
.bj-prose details > :not(summary) { margin: var(--space-2) 0 0; color: var(--color-text-muted); }
@media (hover: hover) { .bj-prose summary:hover { color: var(--color-accent); } }

/* 출처·검토 방식·감수자 (Figma Source) */
.bj-source { display: flex; flex-direction: column; gap: var(--space-3); }
.bj-source > * { margin: 0; }
.bj-source__title { font: var(--fw-semibold) var(--fs-xs) / 1.4 var(--font-body); color: var(--color-text-muted); text-transform: var(--label-transform); letter-spacing: var(--label-spacing); }
.bj-source__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: src; font-size: var(--fs-xs); line-height: 1.4; }
.bj-source__list li { counter-increment: src; display: flex; gap: var(--space-2); }
.bj-source__list li::before { content: counter(src) "."; flex: none; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.bj-source__review { font-size: var(--fs-xs); line-height: 1.4; color: var(--color-text-muted); }
.bj-source__review a { color: inherit; text-decoration: none; }
.bj-source__review strong { font-weight: var(--fw-semibold); }

/* 사이드 상담 박스 (Figma Aside 320): surface, 모서리 16, 안쪽 24, 사이 12 */
.bj-aside { display: none; }
.bj-aside__box { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: var(--space-3); }
.bj-aside__box > * { margin: 0; }
.bj-aside__title { font: 500 var(--fs-xl) / 1.25 var(--font-heading); }
.bj-aside__desc { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-aside .bj-channels { flex-direction: column; gap: var(--space-3); }
.bj-aside .bj-btn { width: 100%; padding-inline: var(--space-4); white-space: nowrap; } /* 폭 272에 "Message us on Instagram" 한 줄 */
.bj-aside__link { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-link); text-decoration: none; }
@media (hover: hover) { .bj-aside__link:hover { text-decoration: underline; } }

/* 데스크톱 상세 (Figma EN / Desktop / Article): 본문 720 + 64 + 사이드 320 = 1104 가운데, 위아래 64, 블록 사이 48 */
@media (min-width: 960px) {
	.bj-article-layout { display: grid; grid-template-columns: minmax(0, var(--content-max)) var(--aside-w); justify-content: center; align-items: start; column-gap: var(--space-8); padding-block: var(--space-8); }
	.bj-article { gap: var(--space-7); }
	.bj-prose > h2 { margin-top: var(--space-7); }
	.bj-aside { display: block; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
	.bj-article .bj-contact--compact { display: none; } /* 데스크톱은 사이드 박스가 대신 */
}

/* More from the Journal (Figma Related): notice 면, 위 64, 제목–카드 32, 3열 사이 48 */
.bj-related { padding-block: var(--space-8); background: var(--color-notice-bg); }
.bj-related .bj-section__title { line-height: 1.2; margin: 0 0 var(--space-6); }
@media (min-width: 960px) { .bj-related .bj-grid--cards { column-gap: var(--space-7); } }

/* ── About (Figma EN / About) ────────────────
   위 32 · 아래 48, 블록 사이 48, 블록 안 16 */
.bj-about { padding-block: var(--space-6) var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.bj-about__block { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.bj-about__block > *, .bj-about__clinic-text > * { margin: 0; }
.bj-about__hero h1 { line-height: 1.15; }
.bj-about__hero .bj-label { line-height: 1.4; }
.bj-about h2 { line-height: 1.2; }
.bj-about h3 { font-size: var(--fs-xl); line-height: 1.25; }
.bj-about__clinic-text { display: flex; flex-direction: column; gap: var(--space-4); }
.bj-about__sub { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
.bj-about__official { gap: var(--space-1); }
body:has(.bj-about) .bj-main { padding-bottom: 0; } /* About: 아래 48 뒤 바로 푸터 (Figma) */
@media (min-width: 960px) {
	.bj-about { padding-block: var(--space-section); gap: var(--space-section); }
	.bj-about__clinic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: start; }
}

/* Step Item: 번호 원 32 + 16 + 본문(제목–설명 4), 항목 사이 24 */
.bj-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.bj-steps__item { display: flex; gap: var(--space-4); align-items: flex-start; }
.bj-steps__num { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--button-radius); background: var(--color-answer-bg); color: var(--color-accent); font-size: var(--fs-sm); line-height: 1.5; font-weight: var(--fw-semibold); }
.bj-steps__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.bj-steps__body > * { margin: 0; }
.bj-steps__title { font-family: var(--font-heading); font-weight: var(--fw-heading, 500); font-size: var(--fs-lg); line-height: 1.25; }
.bj-steps__text { font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
/* 데스크톱: 두 단계 목록 모두 가로 (Figma EN / Desktop / About) */
@media (min-width: 960px) {
	.bj-surface-box .bj-steps { flex-direction: row; gap: var(--space-6); }
	.bj-surface-box .bj-steps__item { flex: 1; gap: var(--space-3); }
	.bj-about__clinic { align-items: center; }
	.bj-about .bj-surface-box { padding: var(--space-7); }
}

/* 점 목록 (Figma List Item, 본문 목록과 같은 마커) */
.bj-dots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bj-dots > li { display: flex; gap: var(--space-3); }
.bj-dots > li::before { content: ""; flex: none; width: 20px; height: 27px; background: url("../img/list-marker.svg") no-repeat center / 20px 27px; }

/* 상담 방법 상자: surface, 24, 사이 16, 버튼 세로 사이 12 전체 폭 */
.bj-surface-box { padding: var(--space-5); background: var(--color-surface); border-radius: var(--card-radius); }
.bj-surface-box .bj-channels { gap: var(--space-3); flex-direction: column; }
.bj-surface-box .bj-btn { width: 100%; }
@media (min-width: 960px) { .bj-surface-box .bj-channels { flex-direction: row; } .bj-surface-box .bj-btn { width: auto; } }

/* 랜딩 병원 사진 (11/12): About 요약 아래, 본문 폭(좌우 여백 유지) 전체, 모서리 card-radius
   Learn more 링크 바로 아래 (링크 아래 여백 12 + 8 = 20) → 아래 Contact까지 48 / 데스크톱 64 */
.bj-about-photo-wrap { margin-top: var(--space-2); }
.bj-landing:has(+ .bj-about-photo-wrap) { padding-bottom: 0; }
.bj-about-photo { margin: 0; aspect-ratio: var(--card-image-ratio); overflow: hidden; border-radius: var(--card-radius); background: var(--color-surface); }
.bj-about-photo img { width: 100%; height: 100%; object-fit: cover; }
.bj-about-photo-wrap + .bj-contact { margin-top: var(--space-7); }
.bj-about-photo--empty { display: grid; place-items: center; padding: var(--space-5); border: 1px dashed var(--color-text-muted); text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-text-muted); }
@media (min-width: 960px) {
	.bj-about-photo { aspect-ratio: auto; height: 560px; }
	.bj-about-photo-wrap + .bj-contact { margin-top: var(--space-8); }
}

/* ── 검토 반영 (11/12) ───────────────────── */
/* 긴 URL(출처·본문 링크)이 좁은 화면에서 가로 스크롤을 만들지 않게 */
.bj-prose, .bj-source__list li, .bj-source__review { overflow-wrap: anywhere; }
.bj-source__list li > * , .bj-source__list li { min-width: 0; }

/*
 * Barog Journal — motion.css (4/5)
 * 등장 효과 · 상호작용 상태(hover·누를 때·선택) · 애니메이션 · 인쇄
 * 공통 파일: EN·VI·TH 모두 글자 하나까지 같게 유지 (언어별 차이는 tokens.css · lang.css에만). 배포 때 main.css 하나로 합쳐짐
 * 컴포넌트 CSS는 의미 토큰·컴포넌트 토큰만 씁니다 (00_공통.md 2장).
 */

/* ── 등장 효과 (main.js가 .is-visible 추가) ── */
.js .bj-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease); }
.js .bj-reveal.is-visible { opacity: 1; transform: none; }

/* ── 상호작용 상태 (Hover · 누를 때 · 선택) ─────────
   원칙: 색은 기존 토큰만 · hover는 마우스 기기에서만 · 누를 때는 살짝 눌림(.98) · 선택 = 키컬러 밑줄/막대 또는 text 면
   움직임 줄이기 설정이면 tokens.css에서 시간이 0 → 효과도 즉시 */
a, button, summary { -webkit-tap-highlight-color: transparent; } /* 모바일 파란 번쩍임 대신 아래 :active 효과 */

/* 링크 공통: 색·밑줄 부드럽게 */
.bj-text-link, .bj-prose a, .bj-aside__link, .bj-source__review a, .bj-reviewer__name a, .bj-cover__title a {
	transition: color var(--duration-fast) var(--ease), text-decoration-color var(--duration-fast) var(--ease);
}
@media (hover: hover) {
	.bj-text-link:hover, .bj-prose a:hover { color: var(--color-text); text-decoration-thickness: 2px; }
	.bj-reviewer__name a:hover, .bj-source__review a:hover { text-decoration: underline; text-underline-offset: 3px; }
	.bj-header__logo:hover { opacity: .75; }
}
.bj-header__logo { transition: opacity var(--duration-fast) var(--ease); }

/* 헤더 메뉴: hover = 회색 밑줄 → 선택(현재 페이지) = 키컬러 밑줄 */
.bj-nav__list a { transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
@media (hover: hover) {
	.bj-nav__list a:not([aria-current]):hover { border-bottom-color: var(--color-border); }
	.bj-mobile-menu .bj-nav__list a:not([aria-current]):hover { border-left-color: var(--color-border); background: var(--color-surface); }
}
.bj-mobile-menu .bj-nav__list a:active { background: var(--color-surface); }

/* 메뉴 버튼: hover/누를 때 surface 원, 열리면 ≡ → × */
.bj-menu-btn { border-radius: var(--button-radius); transition: background var(--duration-fast) var(--ease); }
@media (hover: hover) { .bj-menu-btn:hover { background: var(--color-surface); } }
.bj-menu-btn:active { background: var(--color-surface); }
.bj-menu-btn__bar, .bj-menu-btn__bar::before, .bj-menu-btn__bar::after { transition: transform var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.bj-menu-btn[aria-expanded="true"] .bj-menu-btn__bar { background: transparent; }
.bj-menu-btn[aria-expanded="true"] .bj-menu-btn__bar::before { transform: translateY(6px) rotate(45deg); }
.bj-menu-btn[aria-expanded="true"] .bj-menu-btn__bar::after { transform: translateY(-6px) rotate(-45deg); }

/* 언어 국기: hover = 회색 밑줄 + 국기 살짝 위로, 선택 = 키컬러 밑줄 */
.bj-lang__link { transition: border-color var(--duration-fast) var(--ease); }
.bj-lang__flag { transition: transform var(--duration-fast) var(--ease); }
@media (hover: hover) {
	.bj-lang__link:not([aria-current]):hover { border-bottom-color: var(--color-border); }
	.bj-lang__link:hover .bj-lang__flag { transform: translateY(-2px); }
}
.bj-lang__link:active .bj-lang__flag { transform: scale(.92); }

/* 버튼: 누를 때 색도 한 단계 진하게 */
.bj-btn--primary:active { background: var(--color-cta-hover); }
.bj-btn--secondary:active { background: var(--color-btn2-hover); }
.bj-btn__icon { transition: transform var(--duration-fast) var(--ease); }
@media (hover: hover) { .bj-btn:hover .bj-btn__icon { transform: scale(1.1); } }

/* 저널 카드: hover = 사진 확대(기존) / 글자 표지는 금색 막대가 늘어남 + 제목 밑줄(기존), 누를 때 썸네일 살짝 눌림 */
.bj-card__media { transition: transform var(--duration-fast) var(--ease); }
.bj-card__cover-bar { transition: width var(--duration-slow) var(--ease); }
@media (hover: hover) { .bj-card__link:hover .bj-card__cover-bar { width: 64px; } }
.bj-card__link:active .bj-card__media { transform: scale(.98); }

/* Cover Story: 상자 전체를 누를 수 있게(제목 링크를 덮어씌움) + hover 사진 확대·제목 밑줄 */
.bj-cover__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bj-cover__media img { transition: transform var(--duration-slow) var(--ease); }
@media (hover: hover) {
	.bj-cover:hover .bj-cover__media img { transform: scale(1.02); }
	.bj-cover:hover .bj-cover__title a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
}
.bj-cover:active .bj-cover__box { background: var(--color-surface); }

/* Start here 작은 카드: hover = 썸네일 확대 + 제목 밑줄(기존), 누를 때 surface 면 */
.bj-card-compact { transition: background var(--duration-fast) var(--ease); }
.bj-card-compact__media img { transition: transform var(--duration-slow) var(--ease); }
@media (hover: hover) { .bj-card-compact:hover .bj-card-compact__media img { transform: scale(1.06); } }
.bj-card-compact:active { background: var(--color-surface); }

/* 칩·페이지 번호: 부드러운 전환 + 누를 때 눌림, 선택 = text 면(기존) */
.bj-chip, .bj-pagination a { transition: background var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease); }
@media (hover: hover) { .bj-chip:not([aria-current]):hover { border-color: var(--color-text-muted); } }
.bj-chip:active, .bj-pagination a:active { transform: scale(.96); }

/* 검색창: hover = 테두리 진하게, 입력 중 = text 테두리 + 키컬러 바깥 링 */
.bj-search__input { transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease); }
@media (hover: hover) { .bj-search__input:hover { border-color: var(--color-text); } }
/* 입력 중 = 테두리 text + 안쪽 1px 더해 2px처럼 (바깥 링 없음, 크기 그대로) */
.bj-search__input:focus { outline: none; border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
/* 지우기 x: 브라우저 기본(파란 원) 대신 얇은 선 x 20 — text-muted, hover text */
.bj-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-left: var(--space-2); cursor: pointer;
	background: var(--color-text-muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5 5l10 10M15 5L5 15%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 20px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3E%3Cpath d=%27M5 5l10 10M15 5L5 15%27 stroke=%27black%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / 20px no-repeat;
}
@media (hover: hover) { .bj-search__input::-webkit-search-cancel-button:hover { background: var(--color-text); } }

/* FAQ: hover 색(기존) + 열림 = 질문 accent, + → − 회전 */
.bj-prose summary { transition: color var(--duration-fast) var(--ease); }
.bj-prose summary::after { transition: transform var(--duration-fast) var(--ease); }
.bj-prose details[open] summary { color: var(--color-accent); }
.bj-prose details[open] summary::after { transform: rotate(180deg); }

/* 의료진: 감수자 이름을 눌러 도착하면 해당 카드 잠깐 강조 (선택 표시) */
.bj-doctor { border-radius: var(--card-radius); }
.bj-doctor:target { animation: bj-target 1.6s var(--ease); }
@keyframes bj-target { 0%, 40% { box-shadow: 0 0 0 8px var(--color-answer-bg); background: var(--color-answer-bg); } 100% { box-shadow: 0 0 0 8px transparent; background: transparent; } }
.bj-cover .bj-reviewer a { position: relative; z-index: 2; } /* 덮개 위에서 감수자 링크는 따로 눌림 */
@media (prefers-reduced-motion: reduce) { .bj-doctor:target { animation: none; background: var(--color-answer-bg); } }

/* ── 애니메이션 (11/12) ─────────────────────
   1) 스크롤 등장: main.js가 블록·카드에 .bj-reveal 부여 → 화면에 들어오면 .is-visible (같은 줄 카드는 80ms씩 차례로)
   2) 첫 화면 Cover Story: 사진은 살짝 줌아웃, 글 상자는 아래에서 올라옴
   3) 헤더: 스크롤하면 그림자
   4) FAQ 열릴 때 답이 부드럽게, 짧은 답 박스 금색 막대
   모두 tokens.css 시간 변수 사용 → '움직임 줄이기' 설정이면 0초(효과 없음) */
.js .bj-reveal { transition-delay: var(--reveal-delay, 0ms); }
.bj-cover__media img { animation: bj-cover-zoom 1.4s var(--ease) backwards; /* backwards: 끝난 뒤 hover 확대와 충돌 없게 */ }
.bj-cover__box { animation: bj-rise var(--duration-slow) var(--ease) .15s backwards; }
@keyframes bj-cover-zoom { from { transform: scale(1.06); } }
@keyframes bj-rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .bj-cover__media img, .bj-cover__box { animation: none; } }

.bj-header { transition: box-shadow var(--duration-fast) var(--ease); }
.bj-header.is-scrolled { box-shadow: 0 4px 16px rgb(0 0 0 / .06); }

.bj-prose details[open] > :not(summary) { animation: bj-fade-down var(--duration-fast) var(--ease); }
@keyframes bj-fade-down { from { opacity: 0; transform: translateY(-4px); } }

/* 인쇄: 아직 화면에 안 들어와 숨겨진 블록도 보이게 */
@media print { .bj-reveal { opacity: 1 !important; transform: none !important; } .bj-sticky-cta, .bj-header__cta { display: none !important; } }

/*
 * Barog Journal EN — lang.css (5/5)
 * 영어 사이트에만 있는 규칙. 공통 4개 파일(base · components · pages · motion)은 건드리지 않고 여기에만 추가
 * 지금은 없음 (Cover Story 등 EN 화면 규칙도 공통 파일에 있어 다른 언어에서는 쓰이지 않을 뿐)
 */