/* 자동 생성: node tools/build-preview.mjs. 수정은 아래에 표시된 원본 CSS에서 합니다. */

/* ===== assets/css/reset.css ===== */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== assets/vendor/animate.css/4.1.1/fadeIn.css ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}


/* ===== assets/vendor/animate.css/4.1.1/fadeOutUp.css ===== */
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  animation-name: fadeOutUp;
}


/* ===== assets/css/tokens.css ===== */
/*
 * 바로그 저널 한국어 테마 — 디자인 토큰
 *
 * 이 파일의 위쪽(1·2단)은 디자인 시스템 제안안을 2026-11-11에 그대로 복사한 것이다.
 *   원본: 디자인 연관\디자인 시스템\journal\preview\css\tokens.css (제안안 v0.4, 승인 전)
 *   제안안의 값이 바뀌면 위쪽을 새로 복사한다. 컴포넌트 CSS는 의미 토큰만 쓰므로 이 파일만 바꾸면 된다.
 * 맨 아래 "이 테마에서 추가한 토큰"은 제안안에 아직 없는 값이다. 위쪽을 새로 복사할 때 지우지 않는다.
 *
 * ---- 아래는 제안안 원문 ----
 * 바로그 피부과 저널 — 디자인 토큰 (제안안 v0.4, 승인 전)
 *
 * 1단: 기본 토큰(primitive) — 실제 값. 컴포넌트에서 직접 쓰지 않는다.
 * 2단: 의미 토큰(semantic) — 용도별 이름. 컴포넌트는 이것만 쓴다.
 *
 * 브레이크포인트 (미디어 쿼리에는 변수를 쓸 수 없어 주석으로 관리)
 *   기본        0 ~ 767px   모바일   저널 목록은 줄 목록(작은 썸네일 + 제목 + 요약)
 *   tablet    768px 이상    태블릿   저널 목록 카드 2열(요약 포함), 홈 큰 카드 3장
 *   desktop  1024px 이상    데스크톱 저널 목록 카드 3열(요약 포함), 홈 큰 카드 3장
 *            1280px 이상    카드 제목 20px (그 아래는 18px)
 *   wide     1360px 이상    넓은 화면 컨테이너 최대 폭 도달
 *
 * 배치와 모양은 스테이폴리오식이다 (v0.4)
 *   카테고리는 모든 폭에서 상단 가운데 글자 탭 (좌측 세로 목록 없음)
 *   헤더는 상단 고정, 카드는 테두리·그림자·구분선 없이 여백으로 구분
 */

:root {
  /* ---------- 1. 기본 토큰 ---------- */

  /* 회색: 보조 컬러들과 어울리도록 살짝 따뜻한 회색 */
  --color-gray-0: #ffffff;
  --color-gray-50: #fafaf7;
  --color-gray-100: #f3f2ee;
  --color-gray-200: #e6e4de;
  --color-gray-300: #d2cfc7;
  --color-gray-400: #8f8b82;
  --color-gray-500: #726e66;
  --color-gray-600: #5c5953;
  --color-gray-700: #403e3a;
  --color-gray-800: #282724;
  --color-gray-900: #171614;

  /* 노랑(키 컬러): 바로그의원 키 컬러 #ffcc00. 상담하기 버튼에만 쓴다.
     흰 바탕에서 글자·선으로는 읽히지 않으므로(1.51:1) 채움으로만 쓰고 그 위 글자는 잉크색이다 */
  --color-yellow-500: #ffcc00;
  --color-yellow-600: #f2bf00;
  --color-yellow-700: #dba900;

  /* 틸: 링크·시술. 글자색으로 쓸 수 있는 색이라 링크를 맡는다 */
  --color-teal-50: #ecf6f6;
  --color-teal-100: #d5ecec;
  --color-teal-200: #a9d8d9;
  --color-teal-300: #72bec1;
  --color-teal-400: #38a1a5;
  --color-teal-500: #17898d;
  --color-teal-600: #0e787c;
  --color-teal-700: #08565c;
  --color-teal-800: #0a4348;
  --color-teal-900: #0b2f33;

  /* 보조 컬러 5계열 — 단계의 쓰임은 모두 같다
     50·100 연한 바탕 / 200 형광펜 / 500 선·아이콘 / 600 글자 가능 / 700 라벨 글자 */

  /* 클레이: 주의 */
  --color-clay-50: #fcf4ef;
  --color-clay-100: #f8e6db;
  --color-clay-200: #f0cdb9;
  --color-clay-500: #bc6c45;
  --color-clay-600: #a0552f;
  --color-clay-700: #824222;

  /* 인디고: 기기·안내 */
  --color-indigo-50: #eef1fa;
  --color-indigo-100: #dce3f5;
  --color-indigo-200: #bcc9ec;
  --color-indigo-500: #4c6bc4;
  --color-indigo-600: #3a56a8;
  --color-indigo-700: #2c4a8a;

  /* 모스: 관리·회복 */
  --color-moss-50: #f1f5ea;
  --color-moss-100: #e1e9d3;
  --color-moss-200: #c6d4ad;
  --color-moss-500: #6b8a3a;
  --color-moss-600: #557029;
  --color-moss-700: #3f5a1e;

  /* 플럼: 전문가 감수 */
  --color-plum-50: #f8f0f5;
  --color-plum-100: #efdde8;
  --color-plum-200: #dfbfd3;
  --color-plum-500: #a05f8a;
  --color-plum-600: #874872;
  --color-plum-700: #6b2f58;

  /* 오커: 핵심 */
  --color-ochre-50: #fdf6e3;
  --color-ochre-100: #faebc2;
  --color-ochre-200: #f3d98a;
  --color-ochre-500: #b0811a;
  --color-ochre-600: #93690c;
  --color-ochre-700: #755200;

  /* 레드: 오류 메시지에만 */
  --color-red-50: #fdecef;
  --color-red-100: #fad5db;
  --color-red-200: #f4b0bb;
  --color-red-500: #d93a55;
  --color-red-600: #c4122f;
  --color-red-700: #9c0e25;

  /* 폰트 */
  --font-family-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-22: 1.375rem;
  --font-size-24: 1.5rem;
  --font-size-26: 1.625rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-40: 2.5rem;
  --font-size-48: 3rem;
  --font-size-56: 3.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-display: 1.2;
  --line-height-tight: 1.3;
  --line-height-snug: 1.45;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-display: -0.03em;
  --letter-spacing-tight: -0.02em;
  --letter-spacing-snug: -0.01em;
  --letter-spacing-normal: 0;

  /* 간격: 4px 단위 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-4: 0.25rem;
  --radius-8: 0.5rem;
  --radius-12: 0.75rem;
  --radius-full: 999px;

  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  --duration-120: 120ms;
  --duration-200: 200ms;
  --duration-300: 300ms;
  --duration-320: 320ms;

  /* ---------- 2. 의미 토큰 ---------- */

  /* 글자색 */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-700);
  --color-text-tertiary: var(--color-gray-600);
  --color-text-placeholder: var(--color-gray-500);
  --color-text-inverse: var(--color-gray-0);
  --color-text-inverse-muted: var(--color-gray-300);
  --color-text-link: var(--color-teal-600);
  --color-text-link-hover: var(--color-teal-700);
  --color-text-on-brand: var(--color-gray-900);

  /* 배경색 — 넓은 면은 모두 무채색 */
  --color-bg-page: var(--color-gray-0);
  --color-bg-subtle: var(--color-gray-50);
  --color-bg-muted: var(--color-gray-100);
  --color-bg-inverse: var(--color-gray-900);
  --color-bg-link-hover: var(--color-teal-50);
  /* 사진 위에 흰 글자를 올릴 때 쓰는 어두운 막 두 겹. 둘 다 잉크색이다.
     veil 사진 전체를 덮는다(40%).
     text 글자 뒤에만 한 겹 더 깐다(36%). 두 겹이 겹친 곳은 61.6%가 되어,
          가장 밝은 사진(흰색) 위에서도 흰 글자가 4.98:1이다. 한 겹으로는 기준(4.5:1)에 못 미치니 글자는 반드시 text 위에 둔다 */
  --color-scrim-veil: rgb(23 22 20 / 0.4);
  --color-scrim-text: rgb(23 22 20 / 0.36);

  /* 테두리 */
  --color-border-subtle: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-strong: var(--color-gray-400);
  --color-border-inverse: var(--color-gray-700);

  /* 키 컬러(바로그 노랑) — 상담하기 버튼 전용 */
  --color-brand-primary: var(--color-yellow-500);
  --color-brand-primary-hover: var(--color-yellow-600);
  --color-brand-primary-pressed: var(--color-yellow-700);

  /* 짧은 답 상자 */
  --color-answer-bg: var(--color-teal-50);
  --color-answer-label: var(--color-teal-700);

  /* 동작 요소 — 색으로 채우는 것은 주 버튼(상담하기)뿐이다 */
  --color-action-primary-bg: var(--color-brand-primary);
  --color-action-primary-bg-hover: var(--color-brand-primary-hover);
  --color-action-primary-bg-pressed: var(--color-brand-primary-pressed);
  --color-action-primary-text: var(--color-text-on-brand);
  --color-action-secondary-bg: var(--color-gray-900);
  --color-action-secondary-bg-hover: var(--color-gray-700);
  --color-action-secondary-text: var(--color-gray-0);
  --color-action-outline-border: var(--color-gray-400);
  --color-action-outline-text: var(--color-gray-900);
  --color-action-outline-bg-hover: var(--color-gray-100);
  --color-action-disabled-bg: var(--color-gray-100);
  --color-action-disabled-text: var(--color-gray-500);
  --color-selected-bg: var(--color-gray-900);
  --color-selected-text: var(--color-gray-0);
  --color-focus-ring: var(--color-gray-900);
  --color-focus-ring-inverse: var(--color-gray-0);

  /* 내용의 성격(톤) — 바탕 50 / 선 500 / 라벨 글자 700 */
  --color-tone-treatment-bg: var(--color-teal-50);
  --color-tone-treatment-line: var(--color-teal-500);
  --color-tone-treatment-text: var(--color-teal-700);
  --color-tone-caution-bg: var(--color-clay-50);
  --color-tone-caution-line: var(--color-clay-500);
  --color-tone-caution-text: var(--color-clay-700);
  --color-tone-info-bg: var(--color-indigo-50);
  --color-tone-info-line: var(--color-indigo-500);
  --color-tone-info-text: var(--color-indigo-700);
  --color-tone-care-bg: var(--color-moss-50);
  --color-tone-care-line: var(--color-moss-500);
  --color-tone-care-text: var(--color-moss-700);
  --color-tone-expert-bg: var(--color-plum-50);
  --color-tone-expert-line: var(--color-plum-500);
  --color-tone-expert-text: var(--color-plum-700);
  --color-tone-key-bg: var(--color-ochre-50);
  --color-tone-key-line: var(--color-ochre-500);
  --color-tone-key-text: var(--color-ochre-700);
  --color-tone-key-mark: var(--color-ochre-200);
  --color-tone-error-bg: var(--color-red-50);
  --color-tone-error-line: var(--color-red-500);
  --color-tone-error-text: var(--color-red-700);

  /* 카테고리 뱃지 */
  --color-category-treatment: var(--color-tone-treatment-text);
  --color-category-treatment-bg: var(--color-tone-treatment-bg);
  --color-category-device: var(--color-tone-info-text);
  --color-category-device-bg: var(--color-tone-info-bg);
  --color-category-caution: var(--color-tone-caution-text);
  --color-category-caution-bg: var(--color-tone-caution-bg);

  /* 글자 모양 — 모바일 기준. 데스크톱 값은 아래 미디어 쿼리에서 바꾼다 */
  --font-family-base: var(--font-family-sans);

  /* 크기 — 역할마다 하나. 큰 제목과 본문의 차이를 크게 벌려 위계를 만든다
     (데스크톱 기준 56 · 48 · 36 · 32 → 20 → 16) */
  --text-hero-size: var(--font-size-32); /* 홈 메인 비주얼 제목 */
  --text-display-size: var(--font-size-28); /* 화면 제목: 목록·소개 화면의 h1 */
  --text-h1-size: var(--font-size-26); /* 글 제목, 대표 카드 제목 */
  --text-section-title-size: var(--font-size-22); /* 구역 제목 */
  --text-h2-size: var(--font-size-20); /* 본문 소제목 */
  --text-h3-size: var(--font-size-18);
  --text-lead-size: var(--font-size-17);
  /* 모바일에서도 읽는 글은 16px(브라우저 기본 크기)보다 작게 두지 않는다.
     보조 정보는 14px 이상, 그보다 작은 것은 뱃지(12px)뿐이다 */
  --text-article-size: var(--font-size-16);
  --text-body-size: var(--font-size-16);
  --text-card-title-size: var(--font-size-18);
  --text-card-compact-title-size: var(--font-size-16);
  --text-card-excerpt-size: var(--font-size-15); /* 제목 아래 두 줄 요약. 제목(16px · 600)보다 한 단 작게 */
  --text-tab-size: var(--font-size-16);
  --text-small-size: var(--font-size-14); /* 보조 정보 문단: 푸터의 운영 정보 */
  --text-meta-size: var(--font-size-14); /* 날짜 · 분류 · 사진 설명 · 면책 문구. 데스크톱은 13px */
  --text-badge-size: var(--font-size-12);
  --text-button-size: var(--font-size-15);
  --text-control-size: var(--font-size-16); /* 입력칸. 16px보다 작으면 아이폰에서 누를 때 화면이 확대된다 */

  /* 굵기 · 행간 · 자간 — 제목은 세 단으로 나눈다. 크기가 클수록 굵게, 행간과 자간은 좁게
     display  화면에서 가장 큰 글자: 메인 비주얼 제목, 화면 제목      700 / 1.2 / -0.03em
     title    글 제목, 구역 제목, 대표 카드 제목                      700 / 1.3 / -0.02em
     heading  본문 소제목, 카드 제목, 그 밖의 작은 제목 (h1~h6 기본값)  600 / 1.3 / -0.02em */
  --text-display-weight: var(--font-weight-bold);
  --text-display-line-height: var(--line-height-display);
  --text-display-letter-spacing: var(--letter-spacing-display);
  --text-title-weight: var(--font-weight-bold);
  --text-title-line-height: var(--line-height-tight);
  --text-title-letter-spacing: var(--letter-spacing-tight);
  --text-heading-weight: var(--font-weight-semibold);
  --text-heading-line-height: var(--line-height-tight);
  --text-heading-letter-spacing: var(--letter-spacing-tight);
  --text-card-title-weight: var(--font-weight-semibold);
  --text-card-title-line-height: var(--line-height-snug);
  --text-article-line-height: var(--line-height-relaxed);
  --text-body-line-height: var(--line-height-normal);
  --text-body-letter-spacing: var(--letter-spacing-snug);

  /* 줄 수 제한 */
  --line-clamp-card-title: 3; /* 모바일 줄 목록은 글 칸이 좁아 세 줄까지 둔다(질문형 제목이 잘리지 않게). 태블릿부터 두 줄 */
  --line-clamp-card-excerpt: 2;

  /* 배치 */
  --container-max-width: 80rem;
  --container-gutter: var(--space-5);
  --article-max-width: 45rem;
  --header-height: 3.5rem;
  --list-thumb-width: 7.5rem;
  --list-gap-row: var(--space-6);
  /* 카드 사이: 세로를 가로의 두 배로 둔다. 요약이 있는 카드는 글 덩어리가 길어서 줄 사이가 좁으면 위아래 카드가 섞여 보인다 */
  --grid-gap-column: var(--space-6);
  --grid-gap-row: var(--space-12);
  --section-gap: var(--space-16);
  --touch-target-min: 2.75rem;

  /* 모양 */
  --radius-badge: var(--radius-4);
  --radius-card: var(--radius-8);
  --radius-box: var(--radius-12);
  --radius-control: var(--radius-full);
  --border-width-default: var(--border-width-1);
  --border-width-focus: var(--border-width-2);
  --border-width-accent: var(--border-width-4);
  --focus-ring-offset: var(--border-width-2);

  --shadow-sticky: 0 1px 0 var(--color-border-subtle);
  --shadow-overlay: 0 8px 24px rgb(23 22 20 / 0.12);

  --ratio-thumbnail: 3 / 2;
  --ratio-hero: 16 / 9;

  /* 쌓임 순서 */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 300;
  --z-skip-link: 400;

  /* 모션 — CSS와 JS가 같은 값을 읽는다 */
  --motion-duration-fast: var(--duration-300);
  --motion-duration-base: var(--duration-300);
  --motion-duration-slow: var(--duration-320);
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-out: cubic-bezier(0, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --text-hero-size: var(--font-size-40);
    --text-display-size: var(--font-size-36);

    --line-clamp-card-title: 2;

    --container-gutter: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --text-hero-size: var(--font-size-56);
    --text-display-size: var(--font-size-48);
    --text-h1-size: var(--font-size-36);
    --text-section-title-size: var(--font-size-32);
    --text-h2-size: var(--font-size-24);
    --text-h3-size: var(--font-size-20);
    --text-lead-size: var(--font-size-18);
    --text-article-size: var(--font-size-17);
    --text-tab-size: var(--font-size-18);
    --text-meta-size: var(--font-size-13);

    --header-height: 4.75rem;
    --container-gutter: var(--space-10);
    --grid-gap-column: var(--space-8);
    --grid-gap-row: var(--space-16);
    --section-gap: var(--space-24);
  }
}

@media (min-width: 1280px) {
  :root {
    --text-card-title-size: var(--font-size-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}

/* ==========================================================================
   이 테마에서 추가한 토큰
   디자인 시스템 제안안에 아직 없는 값이다. 위쪽을 새로 복사할 때 이 아래는 지우지 않는다.
   ========================================================================== */

:root {
  /* 헤더 (구성은 공통 문서 00_공통.md 3-1) */
  --header-max-width: 120rem; /* 헤더 내용 폭 최대 1920px. 본문(1280px)보다 넓다. 그보다 넓은 화면에서는 가운데에 둔다 */
  --header-shadow: var(--shadow-sticky), 0 4px 12px rgb(23 22 20 / 0.05); /* 헤더 아래쪽: 1px 선 + 옅은 그림자(잉크색 5%, 아래로 4px, 번짐 12px) */
  --logo-height: 1.75rem; /* 푸터 로고 높이 28px (모바일) */
  --header-logo-height: 1.5rem; /* 헤더 로고 높이 24px (모바일) */
  --header-logo-offset-y: -0.125rem; /* 원본의 그림 중심을 맞추는 위쪽 보정 2px. 클릭 영역은 그대로 */
  --flag-width: 1.75rem; /* 원형 SVG 국기 28×28. 테두리 안쪽 그림은 26×26 */
  --flag-height: 1.75rem;
  --flag-radius: var(--radius-full);
  --flag-target: 2.25rem; /* 국기 누르는 영역 36×36 */
  --color-flag-border: #000000; /* 원본 사이트와 같은 국기 테두리 */
  --flag-target-large: 3rem; /* 모바일 메뉴 안의 국기 누르는 영역 48×48 */
  --menu-button-size: 3rem; /* 메뉴 버튼 48×48 */
  --icon-size: 1.25rem;

  /* 한 줄짜리 버튼·라벨의 줄 간격 — 줄 상자를 글자 크기와 같게 잡는다.
     줄 간격이 소수점 높이(예: 15px × 1.45 = 21.75px)가 되면 브라우저가 글자를 가운데보다 1px 위에 그린다.
     높이는 min-height나 아래 뱃지 높이처럼 따로 정하고, 이 값은 글자를 그 가운데에 두는 데만 쓴다 */
  --text-control-line-height: 1;
  --badge-height: 1.5rem; /* 카테고리 뱃지 높이 24px. 줄 간격을 이 높이와 같게 써서 글자를 가운데에 둔다 */

  /* 작은 반응 — 시간·곡선은 기존 motion 토큰을 그대로 쓴다 */
  --card-image-hover-scale: 1.02;
  --control-pressed-scale: 0.98;

  /* 목록 화면 */
  --search-max-width: 22.5rem; /* 검색창 최대 폭 360px */
  --control-height: 3rem; /* 검색창 높이 48px */

  /* 푸터·상담 */
  --color-footer-bg: var(--color-bg-muted);
  --color-footer-text: var(--color-text-tertiary);
  --sticky-cta-padding: var(--space-3);

  /* 브랜드 소개 요약 띠 (랜딩의 마지막 구역). Contact 섹션을 빼면서 그 섹션의 값을 물려받았다 */
  --home-about-max-width: 40rem; /* 글 폭 640px */
  --home-about-padding-block: var(--space-24); /* 위아래 여백 96px (모바일). 태블릿부터 150px */

  /* SNS 버튼 (푸터) — 각 서비스가 정한 대표색이다. 바로그의 색 체계에 속하지 않으며, 글자색은 바탕과 4.5:1 이상이 되게 골랐다 */
  --color-sns-kakao-bg: #fee500; /* 카카오 노랑 */
  --color-sns-kakao-text: #191919;
  --gradient-sns-instagram: linear-gradient(45deg, #fa7e1e 0%, #d62976 30%, #962fbf 65%, #4f5bd5 100%); /* 인스타그램 그러데이션. 글자가 놓이는 30% 지점부터 흰 글자 대비 4.7:1 이상 */
  --color-sns-instagram-text: #ffffff;
  --color-sns-youtube-bg: #eb0000; /* 유튜브 빨강(#ff0000)을 흰 글자 대비 4.5:1이 넘도록 조금 어둡게 (4.6:1) */
  --color-sns-youtube-text: #ffffff;
  --sns-icon-size: 1.5rem; /* SNS 버튼 아이콘 24×24 */
  --sns-hover-brightness: 0.94; /* 마우스를 올리면 조금 어둡게 */

  /* 빠른 메뉴 (데스크톱 오른쪽 아래) */
  --quick-offset: var(--space-5); /* 화면 오른쪽·아래에서 20px */
  --quick-item-size: 4.5rem; /* 바로가기 한 칸 72×72 (아이콘 + 글자 한 줄) */
  --quick-top-size: 3.5rem; /* 맨 위로 버튼 56×56 */
  --quick-icon-size: 1.5rem; /* 아이콘 24×24 */

  /* 메인 비주얼 (랜딩의 소개 한 줄) */
  --home-visual-min-height: 22.5rem; /* 높이 360px 이상 (모바일) */
  --home-intro-title-size: var(--text-hero-size); /* 메인 비주얼 제목. 모바일 32px · 태블릿 40px은 hero 단 그대로, 데스크톱만 50px */
  --home-gallery-duration: 600ms; /* 사용자 지정: 메인 사진 퇴장만 0.6초 */
  --home-gallery-interval: 6000ms; /* 한 사진을 보여 주는 시간. 다른 UI의 300ms와 분리 */

  /* 대표 카드 (랜딩) */
  --text-feature-title-size: var(--text-h1-size);
  --line-clamp-feature-title: 3;
  --line-clamp-feature-excerpt: 3;

  /* 저널 상세·About */
  --table-min-width: 35rem; /* 표 최소 폭 560px. 이보다 좁으면 표만 가로 스크롤 */
  --reviewer-photo-size: 3.5rem; /* 감수자 사진 56px */
  --step-number-size: 2rem; /* 단계 번호 원 32px */
  --ratio-embed: 16 / 9; /* 영상 임베드 */
  --ratio-portrait: 1 / 1; /* 의료진 사진 */
}

@media (min-width: 768px) {
  :root {
    --home-visual-min-height: 26.25rem; /* 높이 420px 이상 (태블릿) */
    --home-about-padding-block: 9.375rem; /* 브랜드 소개 요약 띠의 위아래 여백 150px (2026-11-12 사용자 지정) */
  }
}

@media (min-width: 1024px) {
  :root {
    --logo-height: 2.25rem; /* 푸터 로고 높이 36px (데스크톱) */
    --header-logo-height: 2rem; /* 헤더 로고 높이 32px (데스크톱) */
    --header-logo-offset-y: -0.25rem; /* 검은 글자에 무게가 실린 원본의 시각적 중심을 메뉴와 맞춘다 */
    --home-visual-min-height: 31.25rem; /* 높이 500px 이상 (데스크톱). 내용 폭 1280px에서 가로 2.56 : 세로 1 */
    --home-intro-title-size: 3.125rem; /* 메인 비주얼 제목 50px (2026-11-12 사용자 지정). 디자인 시스템의 hero 단은 56px이다 */
  }
}


/* ===== assets/css/base.css ===== */
/*
 * 기본 스타일 — 사이트 전체에 깔리는 글자, 링크, 초점 표시
 *
 * reset.css가 지운 기본 모양 중 사이트 전체에 필요한 것을 토큰으로 다시 정한다.
 * 값은 tokens.css의 의미 토큰만 쓴다.
 * 숫자를 직접 쓰는 예외: 0, 1px, 100%, 1fr, em 단위의 밑줄 간격, 화면 밖으로 보내는 이동값.
 */

/*
 * 프리텐다드 폰트 파일 연결 — 한국어 기본 폰트
 *
 * 파일은 assets/fonts/pretendard 에 있다(공식 배포본 1.3.9의 웹용 서브셋, 수정 금지). 외부 CDN을 쓰지 않는다.
 * 쓰는 굵기 네 가지(400·500·600·700)만 넣었고, 브라우저는 화면에 실제로 쓰인 굵기만 내려받는다.
 * font-display: swap — 폰트가 늦게 도착해도 대체 폰트로 글자가 먼저 보인다.
 * 서브셋에 없는 드문 글자는 대체 폰트(시스템 폰트)로 보인다.
 * 화면에서 폰트를 지정하는 곳은 tokens.css의 폰트 토큰 하나뿐이다. 폰트를 바꿀 때는 그 토큰과 이 연결 부분만 고친다.
 */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Regular.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Medium.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-SemiBold.subset.woff2") format("woff2");
}

@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/pretendard/Pretendard-Bold.subset.woff2") format("woff2");
}

html {
  /* 고정 헤더가 페이지 안 이동 위치를 가리지 않게 한다 */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  /* 한국어: 낱말 단위로 줄을 바꾸고, 아주 긴 낱말만 중간에서 끊는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목의 기본은 heading 단이다. 더 큰 제목(display · title 단)은 각 요소에서 굵기 · 행간 · 자간을 바꾼다.
   여러 줄이 될 때 마지막 줄에 낱말 하나만 남지 않게 한다 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: var(--text-heading-weight);
  line-height: var(--text-heading-line-height);
  letter-spacing: var(--text-heading-letter-spacing);
  text-wrap: pretty;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote,
address {
  margin: 0;
}

/* 목록의 점·번호와 들여쓰기는 본문 영역에서만 되살린다 */
ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

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

/* 상태가 바뀌고 되돌아올 때 모두 같은 속도로 연결한다. 크기·위치와 키보드 outline은 즉시 반영한다. */
:where(a, button, summary) {
  transition:
    color var(--motion-duration-fast) var(--motion-easing-standard),
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard),
    text-decoration-color var(--motion-duration-fast) var(--motion-easing-standard),
    text-decoration-thickness var(--motion-duration-fast) var(--motion-easing-standard);
}

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

img,
svg {
  height: auto;
}

/* 키보드 초점 표시 — 모든 동작 요소 공통 */
:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* 본문으로 건너뛰기 — 키보드로 처음 Tab을 누르면 나타난다 */
.bj-skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip-link);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-button-size);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
}

.bj-skip-link:focus {
  transform: none;
}

.bj-skip-link:focus-visible {
  outline-color: var(--color-focus-ring-inverse);
  outline-offset: calc(var(--focus-ring-offset) * -2);
}

/* 화면에는 숨기고 화면 낭독기에는 읽히는 글자 */
.bj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}


/* ===== assets/css/layout.css ===== */
/*
 * 배치 — 컨테이너, 구역 사이 간격, 화면 머리
 *
 * 스테이폴리오식: 내용을 화면 가운데에 두고, 선이나 상자 대신 넉넉한 여백으로 구역을 나눈다.
 */

/* 컨테이너: --container-max-width는 내용 폭이다. 좌우 여백을 더해야 내용이 그 폭까지 넓어진다 */
.bj-container {
  max-width: calc(var(--container-max-width) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* 본문 영역: 구역(section)을 세로로 쌓고 구역 사이를 띄운다 */
.bj-main {
  display: block;
  padding-bottom: var(--section-gap);
}

.bj-main > * + * {
  margin-top: var(--section-gap);
}

/* 화면 머리: 화면 제목(h1) + 한 줄 설명 */
.bj-page-head {
  padding-top: var(--space-12);
}

.bj-page-head__title {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-line-height);
  letter-spacing: var(--text-display-letter-spacing);
}

.bj-page-head__desc {
  max-width: var(--article-max-width);
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-lead-size);
}

/* 구역 안에서 구역 머리와 내용 사이 */
.bj-section__body {
  margin-top: var(--space-6);
}

/* 구역 아래 가운데 정렬 버튼 줄 (예: 전체 글 보기) */
.bj-section__more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}


/* ===== assets/css/common/example-notice.css ===== */
/* 예시 안내 줄 — 예시 글이 공개돼 있는 동안 화면 맨 위(헤더 위)에 보인다.
   예시 글을 모두 지우면 이 줄도 나오지 않는다 (components/layout.html) */
.bj-example-notice {
  padding: var(--space-2) var(--container-gutter);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-meta-size);
  text-align: center;
}


/* ===== assets/css/common/footer.css ===== */
/*
 * 푸터 — 모든 화면 공통 (components/footer.html)
 *
 * 필수 내용: 운영 주체, 면책 문구, 개인정보 처리방침 링크, 공식 사이트 링크 (공통 문서 00_공통.md 3-13)
 * 모양은 스테이폴리오식: 본문보다 한 단계 어두운 연회색 바탕 + 회색 글자.
 * 색은 SNS 버튼에만 쓴다. Contact 섹션을 빼면서 그 버튼(각 서비스의 대표색)을 푸터로 옮겼다 (2026-11-12 사용자 지시).
 * 세 덩어리로 나눈다: 사이트 이름과 운영 주체(왼쪽) · 링크(오른쪽) · 면책 문구와 저작권(아래).
 * 사이트 이름만 크고 굵게 두어 눈이 먼저 닿는 곳을 만들고, 나머지는 크기 두 단(링크·운영 정보 / 면책·저작권)으로 정리한다.
 *
 * 모양을 바꿀 때는 아래 "조절 값"이나 tokens.css만 고친다.
 */

.bj-footer {
  /* 조절 값 */
  --footer-bg: var(--color-footer-bg);
  --footer-text: var(--color-footer-text);
  --footer-padding: var(--space-16);
  --footer-gap: var(--space-10); /* 덩어리 사이 */
  /* 모바일 하단 고정 상담 바가 푸터 글자를 가리지 않게 비워 두는 높이 */
  --footer-sticky-space: calc(var(--touch-target-min) + 2 * var(--sticky-cta-padding));

  padding-top: var(--footer-padding);
  padding-bottom: calc(var(--footer-padding) + var(--footer-sticky-space));
  background: var(--footer-bg);
  color: var(--footer-text);
  font-size: var(--text-small-size);
}

.bj-footer__inner {
  display: grid;
  gap: var(--footer-gap);
}

/* 로고 — 헤더와 같은 그림. 푸터 높이는 --logo-height로 정한다. 없으면 사이트 이름 글자가 대신 보인다 */
.bj-footer__logo img {
  width: auto;
  height: var(--logo-height);
}

.bj-footer__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-text-primary);
  font-size: var(--text-h3-size);
  font-weight: var(--text-title-weight);
  letter-spacing: var(--text-title-letter-spacing);
}

/* 운영 주체 */
.bj-footer__operator {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.bj-footer__operator-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* 링크 묶음: 푸터 메뉴와 그 아래 SNS 버튼. 메뉴는 목록 안의 링크라 밑줄 없이 두고, 올리면 밑줄을 보여 준다 */
.bj-footer__links {
  display: grid;
  gap: var(--space-5);
}

/* SNS 버튼 — 한 줄에 다 들어가지 않으면 다음 줄로 넘어간다. 버튼 모양은 components/button.css의 sns */
.bj-footer__sns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.bj-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.bj-footer__link:hover {
  color: var(--color-text-primary);
  text-decoration-color: currentColor;
}

/* 면책 문구와 저작권 — 가장 작은 글자 */
.bj-footer__legal {
  font-size: var(--text-meta-size);
}

.bj-footer__disclaimer {
  max-width: var(--article-max-width);
}

.bj-footer__copyright {
  margin-top: var(--space-2);
}

/* 태블릿 이상: 왼쪽에 사이트 이름과 운영 주체, 오른쪽에 푸터 메뉴(가로 한 줄)와 그 아래 SNS 버튼. 면책 문구는 아래 한 줄 전체 */
@media (min-width: 768px) {
  .bj-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .bj-footer__links {
    justify-items: end;
  }

  .bj-footer__menu {
    display: flex;
    gap: var(--space-6);
  }

  .bj-footer__sns {
    justify-content: flex-end;
  }

  .bj-footer__legal {
    grid-column: 1 / -1;
  }
}

/* 데스크톱에는 하단 고정 상담 바가 없으므로 여백을 되돌린다 */
@media (min-width: 1024px) {
  .bj-footer {
    --footer-sticky-space: 0px;
  }
}


/* ===== assets/css/common/header.css ===== */
/*
 * 헤더 — 모든 화면 공통 (components/header.html)
 *
 * 구성: 로고 + 메뉴 2개(저널 · 브랜드 소개) + 국기 6개.
 *   2026-11-12 사용자 지시로 "홈" 메뉴와 상담 버튼을 뺐다. 홈은 로고가 맡는다.
 *   공통 문서 00_공통.md 3-1은 메뉴 3개와 대표 상담 버튼까지 6개 언어 고정으로 적고 있어 그 문서와 다르다.
 * 배치는 스테이폴리오식: 로고는 맨 왼쪽, 메뉴와 국기는 오른쪽. 국기가 맨 끝이다. 스크롤해도 위에 고정된다.
 * 헤더는 본문(내용 폭 1280px)보다 넓게 잡아, 넓은 화면에서 로고와 국기가 화면 양 끝 가까이에 놓인다.
 * 모바일·태블릿에서는 메뉴와 국기가 메뉴 버튼 안의 펼침 패널로 들어간다.
 *
 * 모양을 바꿀 때는 아래 "조절 값"이나 tokens.css만 고친다.
 */

.bj-header {
  /* 조절 값 */
  --header-bg: var(--color-bg-page);
  --header-gap: var(--space-8); /* 메뉴와 국기 묶음 사이 */
  --header-nav-gap: var(--space-6); /* 메뉴 항목 사이 */
  --header-lang-gap: var(--space-1); /* 국기 중심 사이 간격은 기존 40px 유지 */
  --header-current-line: var(--color-text-primary); /* 현재 메뉴 밑줄 색 */

  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  /* 아래쪽 1px 선 + 옅은 그림자. 값은 tokens.css의 --header-shadow */
  box-shadow: var(--header-shadow);
}

/* 폭만 컨테이너(.bj-container)와 다르게 잡는다. 좌우 여백은 본문과 같아서,
   화면이 본문 폭보다 좁을 때는 로고와 본문의 왼쪽 선이 그대로 맞는다 */
.bj-header__inner {
  display: flex;
  align-items: center;
  gap: var(--header-gap);
  max-width: calc(var(--header-max-width) + 2 * var(--container-gutter));
  min-height: var(--header-height);
}

/* ① 로고 — 맨 왼쪽. 나머지를 오른쪽으로 민다 */
.bj-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  margin-right: auto;
}

.bj-header__logo img {
  width: auto;
  height: var(--header-logo-height);
  /* 전체 이미지 상자보다 실제 그림의 중심이 아래에 있어, 그림만 위로 보정한다 */
  translate: 0 var(--header-logo-offset-y);
}

/* 로고 파일을 받기 전의 임시 글자 로고 */
.bj-header__logo-text {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
}

/* 데스크톱용 메뉴와 국기 — 좁은 화면에서는 숨기고 메뉴 패널로 보여 준다 */
.bj-nav,
.bj-lang {
  display: none;
}

/* ② 메뉴: 저널 · 브랜드 소개 */
.bj-nav__list {
  display: flex;
  gap: var(--header-nav-gap);
}

.bj-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--touch-target-min);
  line-height: var(--text-control-line-height);
  box-shadow: inset 0 calc(var(--border-width-2) * -1) 0 transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* 현재 메뉴 표시는 그대로 두고, 나머지 메뉴에만 얇은 밑줄 반응 */
.bj-nav__link:not([aria-current="page"])::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--border-width-2);
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
}

@media (hover: hover) and (pointer: fine) {
  .bj-nav__link:not([aria-current="page"])::after {
    transition: transform var(--motion-duration-base) var(--motion-easing-out);
  }

  .bj-nav__link:hover::after {
    transform: scaleX(1);
  }
}

.bj-nav__link:focus-visible::after {
  transform: scaleX(1);
  transition: none;
}

.bj-nav__link:hover {
  color: var(--color-text-primary);
}

.bj-nav__link[aria-current="page"] {
  box-shadow: inset 0 calc(var(--border-width-2) * -1) 0 var(--header-current-line);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ③ 언어 바로가기 — 6개를 펼쳐서, 국기만 */
.bj-lang__list {
  display: flex;
  gap: var(--header-lang-gap);
}

.bj-lang__link {
  /* inline-flex의 글자 기준선 여백을 없애 실제 36px 상자를 중앙에 맞춘다 */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--flag-target);
  height: var(--flag-target);
}

.bj-lang__link--large {
  min-width: var(--flag-target-large);
  height: var(--flag-target-large);
}

/* 원형 SVG를 기존 디자인의 28×28로 표시한다. 직사각형을 자르거나 픽셀 확대 필터를 쓰지 않는다 */
.bj-lang__flag {
  display: block;
  box-sizing: border-box;
  width: var(--flag-width);
  height: var(--flag-height);
  border-radius: var(--flag-radius);
  border: var(--border-width-default) solid var(--color-flag-border);
  object-fit: contain;
}

/* 국기 그림이 없는 언어의 자리 표시 (언어 코드 글자). 국기와 같은 크기의 원이다 */
.bj-lang__flag--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  color: var(--color-text-tertiary);
  font-size: var(--text-badge-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--text-control-line-height);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
}

/* 모바일·태블릿 메뉴 — <details>라서 JS 없이도 열리고 닫힌다 */
.bj-mobile-menu__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-button-size);
  height: var(--menu-button-size);
  margin-right: calc(var(--space-3) * -1);
  border-radius: var(--radius-control);
  list-style: none;
  cursor: pointer;
}

/* 사파리는 list-style만으로 삼각형 표시가 사라지지 않는다 */
.bj-mobile-menu__button::-webkit-details-marker {
  display: none;
}

.bj-mobile-menu__button:hover {
  background: var(--color-bg-muted);
}

.bj-mobile-menu__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.bj-mobile-menu__icon--close,
.bj-mobile-menu[open] .bj-mobile-menu__icon--open {
  display: none;
}

.bj-mobile-menu[open] .bj-mobile-menu__icon--close {
  display: block;
}

.bj-mobile-menu__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  padding: var(--space-2) var(--container-gutter) var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--header-bg);
  box-shadow: var(--shadow-overlay);
  transition: opacity var(--motion-duration-base) var(--motion-easing-out);
}

/* native details는 그대로 두고, JS가 준비한 최초 표시 상태만 연결한다 */
.bj-mobile-menu__panel[data-menu-entering] {
  opacity: 0;
  transition: none;
}

/* 키보드로 연 메뉴와 동작 줄이기 설정에서는 기다리지 않고 표시한다 */
.bj-mobile-menu:has(.bj-mobile-menu__button:focus-visible) .bj-mobile-menu__panel {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .bj-mobile-menu__panel,
  .bj-nav__link::after {
    transition: none;
  }
}

.bj-mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: var(--menu-button-size);
  padding-left: var(--space-4);
  box-shadow: inset var(--border-width-2) 0 0 transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-17);
  font-weight: var(--font-weight-medium);
  /* 한 줄짜리 메뉴 이름. 줄 간격 1.6이면 줄 높이가 27.2px이 되어 글자가 1px 위로 치우친다 */
  line-height: var(--text-control-line-height);
}

.bj-mobile-menu__link[aria-current="page"] {
  box-shadow: inset var(--border-width-2) 0 0 var(--header-current-line);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.bj-mobile-menu__label {
  margin-top: var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-mobile-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* 데스크톱: 메뉴와 국기를 헤더에 펼치고, 메뉴 버튼은 숨긴다 */
@media (min-width: 1024px) {
  .bj-nav,
  .bj-lang {
    display: block;
  }

  /* 국기가 헤더의 맨 끝이다. 누르는 영역이 그림보다 넓어 생기는 빈틈만큼 당겨서, 마지막 국기의 가장자리를 본문의 오른쪽 선에 맞춘다 */
  .bj-lang {
    margin-right: calc((var(--flag-target) - var(--flag-width)) / -2);
  }

  .bj-mobile-menu {
    display: none;
  }
}


/* ===== assets/css/common/quick-menu.css ===== */
/*
 * 빠른 메뉴 — 데스크톱의 모든 화면 오른쪽 아래 (components/quick-menu.html)
 *
 * 상담·SNS 바로가기를 흰 알약 상자에 세로로 쌓고, 그 아래에 맨 위로 버튼을 둔다 (2026-11-12 사용자 지시).
 * 모바일·태블릿에는 두지 않는다. 그 폭에서는 하단 고정 상담 바가 같은 자리를 쓴다.
 * 바로가기는 모두 같은 모양이다(흰 바탕). 상담 항목만 키컬러로 채우던 것은 그 칸만 강조돼 보여 뺐다 (2026-11-12 사용자 지시).
 * 맨 위로 버튼은 잉크색이다.
 *
 * 떠 있는 방식: 본문과 푸터 사이에 높이 0인 기준선을 두고 화면 아래에 붙인다(position: sticky).
 * 스크롤하는 동안에는 화면 오른쪽 아래에 있고, 끝까지 내리면 푸터 위에서 멈춘다. 그래서 푸터의 링크를 가리지 않는다.
 * Contact 섹션이나 푸터가 화면에 보이는 동안에는 JS가 data-at-end를 붙여 바로가기 상자를 숨기고 맨 위로 버튼만 남긴다
 * (같은 상담 버튼·SNS 링크가 두 번 보이지 않게, 멈춘 상자가 마지막 줄의 글을 가리지 않게).
 */

.bj-quick {
  display: none;
}

@media (min-width: 1024px) {
  .bj-quick {
    /* 조절 값 */
    --quick-bg: var(--color-bg-page);
    --quick-line: var(--color-border-subtle);
    --quick-gap: var(--space-3);

    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    display: block;
    height: 0;
  }

  .bj-quick__inner {
    position: absolute;
    right: var(--quick-offset);
    bottom: var(--quick-offset);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--quick-gap);
    /* 상자와 버튼 사이의 빈 곳, 숨긴 상자의 자리는 아래 본문이 그대로 눌리게 한다 */
    pointer-events: none;
  }

  .bj-quick__panel,
  .bj-quick__top {
    pointer-events: auto;
  }

  .bj-quick__panel {
    padding: var(--space-2);
    border: var(--border-width-default) solid var(--quick-line);
    border-radius: var(--radius-full);
    background: var(--quick-bg);
    box-shadow: var(--shadow-overlay);
    transition:
      opacity var(--motion-duration-base) var(--motion-easing-standard),
      visibility var(--motion-duration-base);
  }

  /* 숨겨도 자리는 그대로 둔다. 맨 위로 버튼이 움직이지 않는다 */
  .bj-quick[data-at-end] .bj-quick__panel {
    visibility: hidden;
    opacity: 0;
  }

  .bj-quick__list {
    display: grid;
    gap: var(--space-1);
  }

  /* 바로가기 한 칸: 아이콘 위, 글자 아래 */
  .bj-quick__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: var(--quick-item-size);
    height: var(--quick-item-size);
    padding-inline: var(--space-2);
    border-radius: var(--radius-full);
    color: var(--color-text-primary);
    font-size: var(--text-badge-size);
    font-weight: var(--font-weight-medium);
    /* 글자 줄의 위아래 빈 곳을 없애, 아이콘 + 글자 묶음이 원의 가운데에 놓이게 한다 */
    line-height: var(--text-control-line-height);
    white-space: nowrap;
    transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
  }

  .bj-quick__link:hover {
    background: var(--color-action-outline-bg-hover);
  }

  .bj-quick__icon {
    flex: none;
    width: var(--quick-icon-size);
    height: var(--quick-icon-size);
  }

  /* 글자가 길면 원 밖으로 나가지 않게 말줄임표로 자른다 (한글 5자까지 그대로 보인다) */
  /* 가로만 자른다. 세로는 자르지 않아야 줄 상자 밖으로 나가는 g·y 같은 글자의 아래 획이 잘리지 않는다 */
  .bj-quick__label {
    max-width: 100%;
    overflow-x: clip;
    text-overflow: ellipsis;
  }

  .bj-quick__top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--quick-top-size);
    height: var(--quick-top-size);
    border-radius: var(--radius-full);
    background: var(--color-action-secondary-bg);
    box-shadow: var(--shadow-overlay);
    color: var(--color-action-secondary-text);
    transition: background-color var(--motion-duration-fast) var(--motion-easing-standard);
  }

  .bj-quick__top:hover {
    background: var(--color-action-secondary-bg-hover);
  }

  /* 사진 위에 떠 있어도 초점 표시가 보이게, 잉크색 테두리 안쪽에 흰 띠를 한 겹 둔다 */
  .bj-quick__top:focus-visible {
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--quick-bg), var(--shadow-overlay);
  }
}


/* ===== assets/css/common/sticky-cta.css ===== */
/*
 * 하단 고정 상담 바 — 모바일·태블릿의 모든 화면 (components/sticky-cta.html)
 *
 * 상담 버튼이 늘 보이게 하는 것이 목적이다 (공통 문서 00_공통.md 3-5).
 * 데스크톱에는 두지 않는다(공통 문서 3-5). 헤더의 상담 버튼은 2026-11-12에 뺐고,
 * 데스크톱에서 늘 보이는 상담 버튼은 오른쪽 아래 빠른 메뉴의 상담 항목이 맡는다(common/quick-menu.css).
 * 푸터의 SNS 버튼이 화면에 보이는 동안에는 JS가 hidden 속성을 붙여 숨긴다(같은 버튼이 두 번 보이지 않게).
 */

.bj-sticky-cta {
  /* 조절 값 */
  --sticky-cta-bg: var(--color-bg-page);
  --sticky-cta-line: var(--color-border-subtle);

  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-sticky);
  padding: var(--sticky-cta-padding) var(--container-gutter);
  /* 아이폰 하단 영역만큼 더 띄운다 */
  padding-bottom: calc(var(--sticky-cta-padding) + env(safe-area-inset-bottom, 0px));
  background: var(--sticky-cta-bg);
  box-shadow: 0 -1px 0 var(--sticky-cta-line);
}

.bj-sticky-cta__button {
  width: 100%;
}

@media (min-width: 1024px) {
  .bj-sticky-cta {
    display: none;
  }
}


/* ===== assets/css/components/badge.css ===== */
/*
 * 카테고리 뱃지 — 카드 썸네일 위 왼쪽에 올라가는 작은 라벨
 *
 * 사진 위에 올라가므로 바탕을 불투명하게 둔다.
 * 색만으로 구분하지 않고 항상 카테고리 이름을 함께 적는다.
 * 카테고리가 늘면 tokens.css에 --color-category-{슬러그} 쌍을 추가하고 여기에 한 줄 더한다.
 */

.bj-badge {
  display: inline-block;
  /* 위아래 여백 대신 줄 간격을 뱃지 높이와 같게 써서 글자를 가운데에 둔다.
     여백 + 줄 간격 1.45로 높이를 만들면 줄 높이가 17.4px이 되어 글자가 1px 위로 치우친다 */
  padding: 0 var(--space-2);
  border-radius: var(--radius-badge);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--text-badge-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--badge-height);
  white-space: nowrap;
}

.bj-badge--treatment {
  background: var(--color-category-treatment-bg);
  color: var(--color-category-treatment);
}

.bj-badge--device {
  background: var(--color-category-device-bg);
  color: var(--color-category-device);
}

.bj-badge--caution {
  background: var(--color-category-caution-bg);
  color: var(--color-category-caution);
}


/* ===== assets/css/components/button.css ===== */
/*
 * 버튼
 *
 * primary   상담하기. 키컬러(바로그 노랑)로 채우는 유일한 요소. 한 화면 영역에 1개만 쓴다
 * secondary 더보기, 전체 글 보기. 잉크색 바탕
 * outline   그 밖의 보조 동작. 흰 바탕 + 테두리
 * sns       푸터의 SNS 버튼. 아이콘 + 서비스 이름, 바탕은 그 서비스의 대표색 (2026-11-12 사용자 지시. 처음에는 Contact 섹션에 있었다)
 *
 * 모든 버튼은 기본·마우스 올림·초점·누름·비활성 상태를 갖는다. 초점 표시는 base.css 공통.
 */

.bj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width-default) solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--text-button-size);
  font-weight: var(--font-weight-semibold);
  /* 한 줄짜리 라벨이라 줄 상자를 글자 크기와 같게 둔다. 높이는 min-height가 정하고 글자는 그 가운데에 놓인다.
     줄 간격을 1.45로 두면 줄 높이가 21.75px이 되어 글자가 1px 위로 치우친다 */
  line-height: var(--text-control-line-height);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-out);
}

/* display 지정이 hidden의 기본 숨김 상태를 덮어쓰지 않게 한다 */
.bj-btn[hidden] {
  display: none;
}

/* 누르는 순간만 반응한다. 키보드 조작에서는 위치를 움직이지 않는다 */
@media (prefers-reduced-motion: no-preference) {
  .bj-btn:active:not(:focus-visible):not(:disabled):not([aria-disabled="true"]) {
    transform: scale(var(--control-pressed-scale));
  }
}

.bj-btn--primary {
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}

.bj-btn--primary:hover {
  background: var(--color-action-primary-bg-hover);
}

.bj-btn--primary:active {
  background: var(--color-action-primary-bg-pressed);
}

.bj-btn--secondary {
  background: var(--color-action-secondary-bg);
  color: var(--color-action-secondary-text);
}

.bj-btn--secondary:hover {
  background: var(--color-action-secondary-bg-hover);
}

.bj-btn--outline {
  border-color: var(--color-action-outline-border);
  background: var(--color-bg-page);
  color: var(--color-action-outline-text);
}

.bj-btn--outline:hover {
  background: var(--color-action-outline-bg-hover);
}

/*
 * SNS 버튼 — 아이콘 + 서비스 이름. 한 단계 큰 알약 모양이다.
 * 색과 아이콘은 화면 값의 id에 맞춰 아래에서 정한다: kakao · instagram · youtube.
 * 모르는 id가 오면 아이콘 없이 흰 바탕 + 테두리 버튼으로 보인다.
 */
.bj-btn--sns {
  min-height: var(--control-height);
  padding-inline: var(--space-6);
  border-color: var(--color-action-outline-border);
  /* 그러데이션 바탕이 테두리 자리까지 한 장으로 이어지게 한다 */
  background-origin: border-box;
  background-color: var(--color-bg-page);
  color: var(--color-action-outline-text);
  transition:
    filter var(--motion-duration-fast) var(--motion-easing-standard),
    transform var(--motion-duration-fast) var(--motion-easing-out);
}

.bj-btn--sns:hover {
  filter: brightness(var(--sns-hover-brightness));
}

/* 아이콘은 그림 파일의 모양만 빌려 글자색으로 칠한다. 그래서 바탕에 맞춰 검정이나 흰색으로 보인다.
   모양 빌리기(mask)를 못 하는 브라우저에서는 아이콘 없이 이름만 보인다 */
.bj-btn__icon {
  display: none;
  flex: none;
  width: var(--sns-icon-size);
  height: var(--sns-icon-size);
  background-color: currentColor;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
  .bj-btn--kakao .bj-btn__icon,
  .bj-btn--instagram .bj-btn__icon,
  .bj-btn--youtube .bj-btn__icon {
    display: block;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .bj-btn--kakao .bj-btn__icon {
    -webkit-mask-image: url("../icons/sns-kakaotalk.svg");
    mask-image: url("../icons/sns-kakaotalk.svg");
  }

  .bj-btn--instagram .bj-btn__icon {
    -webkit-mask-image: url("../icons/sns-instagram.svg");
    mask-image: url("../icons/sns-instagram.svg");
  }

  .bj-btn--youtube .bj-btn__icon {
    -webkit-mask-image: url("../icons/sns-youtube.svg");
    mask-image: url("../icons/sns-youtube.svg");
  }
}

.bj-btn--kakao {
  border-color: transparent;
  background-color: var(--color-sns-kakao-bg);
  color: var(--color-sns-kakao-text);
}

.bj-btn--instagram {
  border-color: transparent;
  background-image: var(--gradient-sns-instagram);
  color: var(--color-sns-instagram-text);
}

.bj-btn--youtube {
  border-color: transparent;
  background-color: var(--color-sns-youtube-bg);
  color: var(--color-sns-youtube-text);
}

.bj-btn:disabled,
.bj-btn[aria-disabled="true"] {
  border-color: transparent;
  background: var(--color-action-disabled-bg);
  color: var(--color-action-disabled-text);
  cursor: not-allowed;
}


/* ===== assets/css/components/card-journal.css ===== */
/*
 * 저널 카드 (components/card-journal.html)
 *
 * 조각 하나에 모양이 네 가지다. HTML은 같고 클래스로 모양만 바꾼다.
 *   줄 목록     모바일의 모든 카드 — 왼쪽 작은 썸네일 + 오른쪽 제목 · 요약 · 카테고리 · 날짜
 *   큰 카드     태블릿 이상의 랜딩 구역, 상세의 다른 글 (.bj-cards--feature), 저널 목록 (.bj-cards--list)
 *   작은 카드   요약 없는 모양 (.bj-card--compact). 지금은 쓰는 화면이 없다
 *   대표 카드   랜딩 맨 위 1개 — 모든 폭에서 크게 (.bj-card--lead)
 *
 * 스테이폴리오식: 테두리·그림자·구분선 없이 여백으로 나누고, 이미지 모서리만 둥글다.
 * 저널 목록은 요약이 보이는 카드다: 모바일 줄 목록 → 태블릿 2열 → 데스크톱 3열.
 * 요약이 읽히려면 카드 폭이 280px은 되어야 해서 태블릿은 2열로 둔다.
 */

/* 카드 묶음 — 모바일: 줄 목록 */
.bj-cards {
  display: grid;
  gap: var(--list-gap-row);
}

.bj-card {
  position: relative;
  display: grid;
  grid-template-columns: var(--list-thumb-width) 1fr;
  gap: var(--space-4);
  /* 요약이 들어가면 글 덩어리가 썸네일보다 길어진다. 위쪽에 맞춘다 */
  align-items: start;
}

.bj-card__thumb {
  position: relative;
  aspect-ratio: var(--ratio-thumbnail);
  overflow: hidden;
  border-radius: var(--radius-card);
  /* 이미지가 없거나 아직 내려받는 중일 때 보이는 바탕 */
  background: var(--color-bg-muted);
}

.bj-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 늦게 도착한 사진만 한 번 표시한다. fadeIn은 Animate.css 4.1.1 원본.
   기본 opacity는 1이므로 JS가 없거나 사진이 이미 로드되어도 내용이 숨지 않는다 */
.bj-card__image[data-image-reveal] {
  animation: fadeIn var(--motion-duration-base) var(--motion-easing-out);
}

@media (prefers-reduced-motion: reduce) {
  .bj-card__image[data-image-reveal] {
    animation: none;
  }
}

/* 뱃지는 이미지 위 왼쪽. 줄 목록에서는 숨기고 카테고리를 글자로 적는다 */
.bj-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: none;
}

/* 좁은 칸 안에서도 글자가 넘치지 않게 한다 */
.bj-card__body {
  min-width: 0;
}

.bj-card__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-card-compact-title-size);
  font-weight: var(--text-card-title-weight);
  line-height: var(--text-card-title-line-height);
  letter-spacing: var(--text-body-letter-spacing);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp-card-title);
  line-clamp: var(--line-clamp-card-title);
}

/* 링크는 제목에 하나만 두고, 누르는 영역을 카드 전체로 넓힌다 */
.bj-card__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.bj-card__link::after {
  position: absolute;
  inset: 0;
  content: "";
}

/* 터치에는 hover 상태가 남지 않게, 마우스·트랙패드에만 적용한다 */
@media (hover: hover) and (pointer: fine) {
  .bj-card:hover .bj-card__link {
    text-decoration-color: currentColor;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bj-card__image {
    transition: transform var(--motion-duration-base) var(--motion-easing-out);
  }

  .bj-card:hover .bj-card__image {
    transform: scale(var(--card-image-hover-scale));
  }
}

/* 초점 표시는 제목이 아니라 카드 전체에 */
.bj-card__link:focus-visible {
  outline: none;
}

.bj-card__link:focus-visible::after {
  border-radius: var(--radius-card);
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.bj-card__excerpt {
  display: -webkit-box;
  margin-top: var(--space-1);
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-card-excerpt-size);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--line-clamp-card-excerpt);
  line-clamp: var(--line-clamp-card-excerpt);
}

.bj-card--compact .bj-card__excerpt {
  display: none;
}

.bj-card__meta {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-card__category::after,
.bj-card__source::after {
  margin-inline: var(--space-1);
  content: "·";
}

/* 출처 — 네이버 블로그·SNS 게시물로 나가는 글에만 있다. 자체 글은 출처 글자가 없다 */
.bj-card__source {
  color: var(--color-text-secondary);
}

/* 대표 카드 — 랜딩 맨 위 1개. 모바일에서도 줄 목록이 아니라 크게 보여 준다 */
.bj-card--lead {
  display: block;
}

.bj-card--lead .bj-card__thumb {
  aspect-ratio: var(--ratio-hero);
}

.bj-card--lead .bj-card__body {
  margin-top: var(--space-4);
}

.bj-card--lead .bj-card__badge {
  display: inline-block;
}

.bj-card--lead .bj-card__category {
  display: none;
}

/* 대표 카드의 제목은 글 제목과 같은 단(title)이다. 다른 카드보다 한 줄 더 보여 준다 */
.bj-card--lead .bj-card__title {
  font-size: var(--text-feature-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line-height);
  letter-spacing: var(--text-title-letter-spacing);
  -webkit-line-clamp: var(--line-clamp-feature-title);
  line-clamp: var(--line-clamp-feature-title);
}

.bj-card--lead .bj-card__excerpt {
  margin-top: var(--space-2);
  font-size: var(--text-lead-size);
  -webkit-line-clamp: var(--line-clamp-feature-excerpt);
  line-clamp: var(--line-clamp-feature-excerpt);
}

.bj-card--lead .bj-card__meta {
  margin-top: var(--space-3);
}

/* 태블릿 이상: 줄 목록 → 카드 */
@media (min-width: 768px) {
  .bj-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap-row) var(--grid-gap-column);
  }

  /* 저널 목록: 태블릿은 2열 */
  .bj-cards--list {
    grid-template-columns: repeat(2, 1fr);
  }

  .bj-card {
    display: block;
  }

  .bj-card__body {
    margin-top: var(--space-4);
  }

  .bj-card__badge {
    display: inline-block;
  }

  .bj-card__category {
    display: none;
  }

  .bj-card__title {
    font-size: var(--text-card-title-size);
  }

  .bj-card--compact .bj-card__title {
    font-size: var(--text-card-compact-title-size);
  }

  /* 카드 안: 사진 → 16 → 제목 → 8 → 요약 → 12 → 날짜 */
  .bj-card__excerpt {
    margin-top: var(--space-2);
  }

  .bj-card__meta {
    margin-top: var(--space-3);
  }

  /* 대표 카드: 이미지와 글을 좌우로 나란히 */
  .bj-card--lead {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-8);
    align-items: center;
  }

  .bj-card--lead .bj-card__body {
    margin-top: 0;
  }
}

/* 데스크톱: 저널 목록은 3열 */
@media (min-width: 1024px) {
  .bj-cards--list {
    grid-template-columns: repeat(3, 1fr);
  }

  .bj-card--lead {
    gap: var(--space-12);
  }
}


/* ===== assets/css/components/category-nav.css ===== */
/*
 * 카테고리 탭 (components/category-nav.html)
 *
 * 각 탭은 카테고리 주소로 가는 링크다. JS 없이 동작한다.
 * 공통 문서의 "필터 칩"(.bj-chip)에 해당하며, 모양은 스테이폴리오식 글자 탭으로 만든다.
 *   현재 탭: 진한 글자 + 굵게 + 아래 밑줄 (색만으로 구분하지 않는다)
 *   나머지: 회색 글자
 * 모든 화면 폭에서 콘텐츠 상단에 둔다. 한 줄에 다 들어가지 않으면 탭 줄만 가로로 스크롤된다.
 */

.bj-chips {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
}

/* 자리가 남으면 가운데로 모이고, 넘치면 왼쪽부터 가로 스크롤된다 */
.bj-chips > li:first-child {
  margin-left: auto;
}

.bj-chips > li:last-child {
  margin-right: auto;
}

.bj-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding-inline: var(--space-1);
  box-shadow: inset 0 calc(var(--border-width-2) * -1) 0 transparent;
  color: var(--color-text-tertiary);
  font-size: var(--text-tab-size);
  white-space: nowrap;
}

.bj-chip:hover {
  color: var(--color-text-primary);
}

.bj-chip[aria-current="page"] {
  box-shadow: inset 0 calc(var(--border-width-2) * -1) 0 var(--color-text-primary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* 탭 줄에 초점이 가면 초점 표시가 잘리지 않게 안쪽으로 그린다 */
.bj-chip:focus-visible {
  outline-offset: calc(var(--focus-ring-offset) * -1);
}


/* ===== assets/css/components/contact-compact.css ===== */
/*
 * 글 끝 상담 블록 (components/contact-compact.html)
 *
 * 저널 상세에서 본문·FAQ 다음, 출처·면책 블록 앞에 둔다 (공통 문서 00_공통.md 3-11).
 * 구성: 짧은 문구 + 채널 버튼 1~2개 + 같은 주제의 공식 사이트 글 링크(있을 때만).
 */

.bj-contact-compact {
  padding: var(--space-6);
  border-radius: var(--radius-box);
  background: var(--color-bg-subtle);
  text-align: center;
}

.bj-contact-compact__title {
  font-size: var(--text-lead-size);
  font-weight: var(--font-weight-semibold);
}

.bj-contact-compact__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.bj-contact-compact__link {
  margin-top: var(--space-4);
  font-size: var(--text-meta-size);
}

.bj-contact-compact__link a {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bj-contact-compact__link a:hover {
  color: var(--color-text-primary);
}


/* ===== assets/css/components/doctor-card.css ===== */
/*
 * 의료진 카드 (components/doctor-card.html) — About에서 쓴다
 *
 * 구성: 사진(1:1) + 이름 + 직함·소속 + 소개. 소개에 줄바꿈이 있으면 줄마다 한 줄로 보인다(약력).
 * 사진은 실제 사진만 쓴다(사람 얼굴 AI 이미지 금지). 사진이 없으면 이름과 직함만 보여 준다.
 * 모바일 2열, 데스크톱 3열. 딱 네 명일 때만 데스크톱 4열이다(세 칸이면 한 명만 아랫줄에 남는다).
 */

/* 칸의 최소 폭을 0으로 둔다. 띄어쓰기 없는 긴 낱말(학회 이름 등)이 칸을 밀어 화면 밖으로 넘치지 않게 한다 */
.bj-doctors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--grid-gap-column);
}

.bj-doctor__photo {
  width: 100%;
  aspect-ratio: var(--ratio-portrait);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-card);
  object-fit: cover;
  background: var(--color-bg-muted);
}

.bj-doctor__name {
  font-size: var(--text-card-title-size);
}

.bj-doctor__title {
  margin-top: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--text-card-excerpt-size);
}

.bj-doctor__bio {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--text-card-excerpt-size);
  /* 값에 들어 있는 줄바꿈을 그대로 살린다. 약력을 한 줄에 하나씩 적을 수 있다 */
  white-space: pre-line;
}

@media (min-width: 1024px) {
  .bj-doctors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bj-doctors:has(> li:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ===== assets/css/components/entry-content.css ===== */
/*
 * 본문 글 (.bj-prose) — 블록 에디터로 쓴 본문에 일괄 적용한다
 *
 * reset.css와 base.css가 지운 기본 모양(목록의 점·번호, 여백)을 본문 안에서만 되살린다.
 * 글마다 모양이 달라지지 않도록, 편집기에서 색·크기를 직접 바꾸는 기능은 theme.json에서 끈다.
 * 글 본문 크기와 행간은 긴 글을 읽기 편한 값으로 따로 정한 것이다(tokens.css의 --text-article-*).
 */

.bj-prose {
  font-size: var(--text-article-size);
  line-height: var(--text-article-line-height);
}

/* 요소 사이 간격을 한 가지로 통일한다 */
.bj-prose > * + * {
  margin-top: var(--space-6);
}

/* 소제목: 앞 단락과는 넓게, 뒤 문단과는 좁게 */
.bj-prose > h2 {
  margin-top: var(--space-12);
  font-size: var(--text-h2-size);
}

.bj-prose > h3 {
  margin-top: var(--space-8);
  font-size: var(--text-h3-size);
}

.bj-prose > h2 + * {
  margin-top: var(--space-4);
}

.bj-prose > h3 + * {
  margin-top: var(--space-3);
}

.bj-prose a {
  color: var(--color-text-link);
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition:
    background-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard);
}

.bj-prose a:hover {
  background: var(--color-bg-link-hover);
  color: var(--color-text-link-hover);
}

.bj-prose strong {
  font-weight: var(--font-weight-semibold);
}

/* 형광펜: 꼭 기억할 문장 */
.bj-prose mark {
  background: var(--color-tone-key-mark);
  color: inherit;
}

/* 목록: 점과 번호를 되살린다 */
.bj-prose ul,
.bj-prose ol {
  padding-left: var(--space-5);
}

.bj-prose ul {
  list-style: disc;
}

.bj-prose ol {
  list-style: decimal;
}

.bj-prose li + li {
  margin-top: var(--space-2);
}

/* 인용 — 원장 코멘트처럼 직접 들은 말에 쓴다 */
.bj-prose blockquote {
  padding-left: var(--space-5);
  border-left: var(--border-width-accent) solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: var(--text-lead-size);
}

.bj-prose blockquote cite {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
  font-style: normal;
}

/* 본문 이미지: 본문 폭을 넘지 않고, 아래에 설명과 출처를 적는다 */
.bj-prose img {
  border-radius: var(--radius-card);
  background: var(--color-bg-muted);
}

.bj-prose figcaption {
  margin-top: var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
  line-height: var(--text-body-line-height);
}

/* 표: 화면이 좁으면 표만 가로로 스크롤된다. 표 제목(캡션)은 표 위에 둔다 */
.bj-prose .wp-block-table {
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.bj-prose .wp-block-table figcaption {
  order: -1;
  margin-top: 0;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
}

.bj-prose table {
  width: 100%;
  min-width: var(--table-min-width);
  border-collapse: collapse;
  font-size: var(--text-body-size);
  line-height: var(--text-body-line-height);
}

.bj-prose th,
.bj-prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-default) solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.bj-prose thead th {
  background: var(--color-bg-muted);
  font-weight: var(--font-weight-semibold);
}

/* 영상 임베드: 화면 폭을 넘지 않는다 */
.bj-prose iframe,
.bj-prose video {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio-embed);
  border: 0;
  border-radius: var(--radius-card);
}

/* FAQ: 접는 블록(details). JS 없이 열리고 닫힌다 */
.bj-prose details {
  border-bottom: var(--border-width-default) solid var(--color-border-subtle);
}

.bj-prose > :not(details) + details {
  border-top: var(--border-width-default) solid var(--color-border-subtle);
}

.bj-prose details + details {
  margin-top: 0;
}

.bj-prose summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-target-min);
  padding-block: var(--space-4);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  cursor: pointer;
}

/* 사파리는 list-style만으로 삼각형 표시가 사라지지 않는다 */
.bj-prose summary::-webkit-details-marker {
  display: none;
}

.bj-prose summary::after {
  flex-shrink: 0;
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-regular);
  content: "+";
}

.bj-prose details[open] > summary::after {
  content: "−";
}

.bj-prose details > :not(summary) {
  padding-bottom: var(--space-4);
  color: var(--color-text-secondary);
}


/* ===== assets/css/components/pagination.css ===== */
/*
 * 페이지 번호 (components/pagination.html)
 *
 * 번호 방식이다. "더 보기" 버튼보다 검색엔진이 모든 글을 따라가기 쉽다.
 * 현재 번호는 잉크색 바탕 + 흰 글자, aria-current="page".
 */

.bj-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
}

.bj-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
  font-size: var(--text-button-size);
}

a.bj-pagination__item:hover {
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
}

.bj-pagination__item[aria-current="page"] {
  background: var(--color-selected-bg);
  color: var(--color-selected-text);
  font-weight: var(--font-weight-semibold);
}

/* 번호 사이의 생략 표시(…) */
.bj-pagination__gap {
  color: var(--color-text-tertiary);
}


/* ===== assets/css/components/reviewer.css ===== */
/*
 * 감수자 표시 (components/reviewer.html)
 *
 * 글 끝 출처·면책 블록 안에 자세히 보여 준다: 사진 + 이름 + 직함·소속 + 소개 한 줄.
 * 사진은 실제 사진만 쓴다. 사진이 없으면 이름과 직함만 보여 준다.
 * 이름은 About의 의료진 구역으로 연결한다.
 */

.bj-reviewer {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.bj-reviewer__photo {
  flex-shrink: 0;
  width: var(--reviewer-photo-size);
  height: var(--reviewer-photo-size);
  border-radius: var(--radius-control);
  object-fit: cover;
  background: var(--color-bg-muted);
}

.bj-reviewer__role {
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-reviewer__name {
  color: var(--color-text-primary);
  font-size: var(--text-body-size);
  font-weight: var(--font-weight-semibold);
}

.bj-reviewer__title,
.bj-reviewer__bio {
  margin-top: var(--space-1);
}


/* ===== assets/css/components/search.css ===== */
/*
 * 검색창 (components/search.html)
 *
 * 저널 목록 화면의 도구 줄에 둔다. 헤더에는 두지 않는다(헤더 구성은 6개 언어 고정).
 * 워드프레스 기본 검색(?s=)으로 보내는 폼이라 JS 없이 동작한다.
 */

.bj-search {
  position: relative;
  width: 100%;
  max-width: var(--search-max-width);
}

.bj-search__input {
  width: 100%;
  height: var(--control-height);
  padding: 0 var(--space-12) 0 var(--space-5);
  border: var(--border-width-default) solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: var(--text-control-size);
  transition:
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}

.bj-search__input::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .bj-search__input:hover {
    border-color: var(--color-text-secondary);
  }
}

.bj-search__input:focus {
  border-color: var(--color-text-primary);
  box-shadow: 0 0 0 var(--space-1) var(--color-bg-muted);
}

/* 돋보기 버튼 — 입력창 오른쪽 안에 놓인다 */
.bj-search__submit {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-control);
  color: var(--color-text-secondary);
}

.bj-search__submit:hover {
  color: var(--color-text-primary);
}

.bj-search__icon {
  width: var(--icon-size);
  height: var(--icon-size);
}


/* ===== assets/css/components/section-head.css ===== */
/*
 * 구역 머리 (components/section-head.html)
 *
 * 스테이폴리오식: 큰 제목 + 한 줄 설명(회색) + 오른쪽 끝 "더보기" 링크.
 * 랜딩의 최신 글, 카테고리별 미리보기, 상세의 다른 글 구역이 이 모양을 쓴다.
 */

.bj-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.bj-section-head__title {
  font-size: var(--text-section-title-size);
  font-weight: var(--text-title-weight);
  line-height: var(--text-title-line-height);
  letter-spacing: var(--text-title-letter-spacing);
}

.bj-section-head__desc {
  margin-top: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--text-card-excerpt-size);
}

.bj-section-head__more {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target-min);
  color: var(--color-text-secondary);
  font-size: var(--text-meta-size);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

.bj-section-head__more:hover {
  color: var(--color-text-primary);
  text-decoration-color: currentColor;
}


/* ===== assets/css/components/short-answer.css ===== */
/*
 * 질문 → 짧은 답 상자 (components/short-answer.html)
 *
 * 저널 상세에서 제목 바로 다음, 대표 이미지보다 앞에 둔다(6개 언어 고정).
 * 모바일 첫 화면에서 답이 먼저 보여야 검색과 AI 검색에 인용되기 쉽다.
 */

.bj-answer {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-box);
  background: var(--color-answer-bg);
}

.bj-answer__label {
  color: var(--color-answer-label);
  font-size: var(--text-meta-size);
  font-weight: var(--font-weight-bold);
}

.bj-answer__question {
  margin-top: var(--space-2);
  font-size: var(--text-lead-size);
  font-weight: var(--font-weight-semibold);
}

.bj-answer__text {
  margin-top: var(--space-2);
  font-size: var(--text-lead-size);
}


/* ===== assets/css/components/site-notice.css ===== */
/*
 * 면책 문구와 운영 주체 표기 (components/site-notice.html)
 *
 * 글 끝 출처·면책 블록 안에 둔다. 운영 주체 표기는 6개 언어 사이트 모두 필수다.
 * 문구는 관리자에서 입력한 값만 쓴다. HTML에 직접 적지 않는다.
 */

.bj-site-notice {
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-site-notice > * + * {
  margin-top: var(--space-2);
}

.bj-site-notice__operator strong {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}


/* ===== assets/css/components/sns-links.css ===== */
/*
 * SNS 영역 (components/sns-links.html) — 이 테마에서 추가한 요소
 *
 * 글의 원본 SNS 링크와 링크 복사 버튼을 보여 준다.
 * 링크 복사 버튼은 JS가 있어야 동작하므로, JS가 켜졌을 때만 나타난다(hidden 속성을 JS가 푼다).
 */

.bj-sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}

.bj-sns__label {
  color: var(--color-text-tertiary);
  font-size: var(--text-meta-size);
}

.bj-sns__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.bj-sns__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  color: var(--color-text-secondary);
  font-size: var(--text-body-size);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bj-sns__link:hover {
  color: var(--color-text-primary);
}

.bj-sns__copy {
  margin-left: auto;
}


/* ===== assets/css/components/steps.css ===== */
/*
 * 단계 목록 (.bj-steps) — About의 "글을 만드는 방식", "상담 방법"에서 쓴다
 *
 * 번호 원 + 제목 + 설명. 모바일은 세로, 데스크톱은 가로로 나란히.
 * 순서가 있는 내용이므로 <ol>로 쓴다. 번호는 장식이라 화면 낭독기에는 목록 순서로 읽힌다.
 */

.bj-steps {
  display: grid;
  gap: var(--space-5);
}

.bj-steps__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.bj-steps__number {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--step-number-size);
  height: var(--step-number-size);
  border-radius: var(--radius-control);
  background: var(--color-bg-muted);
  color: var(--color-text-primary);
  font-size: var(--text-meta-size);
  font-weight: var(--font-weight-semibold);
}

.bj-steps__title {
  font-size: var(--text-card-compact-title-size);
  line-height: var(--text-card-title-line-height);
}

.bj-steps__text {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--text-card-excerpt-size);
}

@media (min-width: 1024px) {
  .bj-steps {
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--grid-gap-column);
  }

  .bj-steps__item {
    flex-direction: column;
  }
}