/*
 * 브랜드 소개 — 승인된 밝은 키컬러 그라디언트 시안.
 * 페이지 안에서만 쓰는 토큰이며 다른 화면의 색·간격은 바꾸지 않는다.
 */
.bj-about {
  --about-surface: #f7f8f5;
  --about-ink: var(--color-gray-900);
  --about-muted: var(--color-gray-600);
  --about-line: var(--color-gray-200);
  --about-accent: #7a5d00;
  --about-photo-width: 64rem;
  --about-photo-height: 28rem;
  --about-hero-size: clamp(2.25rem, 5.8vw, 5.25rem);
  --about-heading-size: clamp(1.875rem, 3.5vw, 3rem);
  --about-section-space: clamp(5rem, 9vw, 8rem);
  --about-hero-top: clamp(4rem, 7vw, 6.5rem);
  --about-content-gap: clamp(2rem, 5vw, 5rem);
  --about-enter-duration: var(--motion-duration-base);
  --about-content-gutter: var(--container-gutter);
  position: relative;
  isolation: isolate;
  color: var(--about-ink);
  background: transparent;
  color-scheme: light;
  font-size: var(--font-size-17);
  line-height: var(--line-height-relaxed);
}

.bj-about section[id] { scroll-margin-top: calc(var(--header-height) + var(--space-6)); }
.bj-about > .bj-container {
  max-width: calc(var(--container-max-width) + 2 * var(--about-content-gutter));
  padding-inline: var(--about-content-gutter);
}
.bj-about a:focus-visible { outline: var(--border-width-2) solid var(--about-accent); outline-offset: var(--space-1); }

/* 첫 화면도 같은 전체 배경을 공유한다. 글자와 사진의 위치는 고정한다. */
.bj-about-hero { padding-top: var(--about-hero-top); }
.bj-about-hero__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bj-about-hero h1 {
  max-width: 100%;
  font-size: var(--about-hero-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-display);
  white-space: pre-line;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.bj-about-hero__lead { max-width: var(--article-max-width); margin-top: var(--space-8); color: var(--about-muted); font-size: var(--text-lead-size); white-space: pre-line; }
.bj-about-hero .bj-about-button { margin-top: var(--space-8); }
.bj-about-button {
  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-6);
  border-radius: var(--radius-full);
  font-size: var(--font-size-15);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  text-decoration: none;
  text-align: center;
  transition: background-color var(--motion-duration-base) var(--motion-easing-standard), color var(--motion-duration-base) var(--motion-easing-standard);
}
.bj-about-button--outline { border: var(--border-width-1) solid var(--about-muted); color: var(--about-ink); }
.bj-about-button--brand { background: var(--color-brand-primary); color: var(--about-ink); }
.bj-about-hero__photo { max-width: calc(var(--about-photo-width) + 2 * var(--container-gutter)); margin: var(--space-16) auto 0; padding-inline: var(--container-gutter); }
.bj-about-hero__photo img { width: 100%; height: var(--about-photo-height); object-fit: cover; object-position: center 48%; border-radius: var(--radius-box); }
.bj-about-hero__photo figcaption { margin-top: var(--space-3); color: var(--about-muted); font-size: var(--font-size-13); }

/* 제목과 본문: 1280px inner는 기존 bj-container 토큰을 따른다. */
.bj-about-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--about-content-gap); margin-bottom: var(--space-12); }
.bj-about-heading h2,
.bj-about-clinic h2 { font-size: var(--about-heading-size); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); white-space: pre-line; }
.bj-about-heading > p { max-width: var(--article-max-width); color: var(--about-muted); font-size: var(--font-size-16); white-space: pre-line; }
.bj-about-topics,
.bj-about-clinic,
.bj-about-doctors,
.bj-about-reading { margin-top: var(--about-section-space); }
.bj-about-topics__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
.bj-about-topics__list li { min-width: 0; }
.bj-about-topics__list a { display: block; height: 100%; padding-block: var(--space-8); border-top: var(--border-width-1) solid var(--about-line); text-decoration: none; }
.bj-about-topics__list h3 { font-size: var(--font-size-26); font-weight: var(--font-weight-medium); letter-spacing: var(--letter-spacing-tight); }
.bj-about-topics__list p { margin-top: var(--space-4); color: var(--about-muted); font-size: var(--font-size-16); white-space: pre-line; }
.bj-about-topics__more { display: inline-block; margin-top: var(--space-8); color: var(--about-accent); font-size: var(--font-size-14); }
.bj-about-clinic { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--about-content-gap); align-items: center; }
.bj-about-clinic--text { grid-template-columns: 1fr; }
.bj-about-clinic__photo,
.bj-about-clinic__text { min-width: 0; }
.bj-about-clinic__photo img { width: 100%; aspect-ratio: 1.15; object-fit: cover; border-radius: var(--radius-box); }
.bj-about-clinic__photo figcaption { margin-top: var(--space-3); color: var(--about-muted); font-size: var(--font-size-13); }
.bj-about-clinic__name { margin-bottom: var(--space-5); color: var(--about-accent); font-size: var(--font-size-15); }
.bj-about-clinic__body { margin-top: var(--space-6); color: var(--about-muted); font-size: inherit; }
.bj-about-clinic__body p { margin-block: 0 var(--space-5); }
.bj-about-text-link { display: inline-block; min-height: var(--touch-target-min); align-content: center; color: var(--about-ink); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: var(--border-width-1); font-size: var(--font-size-15); }
.bj-about-clinic .bj-about-text-link { margin-top: var(--space-2); }
.bj-about-clinic__note { margin-top: var(--space-3); color: var(--about-muted); font-size: var(--font-size-14); }

/* 의료진: 4열 → 2열. 약력은 직함 아래 가는 선 밑에 늘 보인다(접고 펴는 버튼은 2026-11-13 사용자 지시로 뺐다). */
.bj-about-doctors__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.bj-about-doctors__list > li,
.bj-about-doctor { min-width: 0; }
.bj-about-doctor__portrait { overflow: hidden; border-radius: var(--radius-box); background: var(--about-surface); }
.bj-about-doctor__portrait img { width: 100%; aspect-ratio: var(--ratio-portrait); object-fit: cover; }
.bj-about-doctor h3 { margin-top: var(--space-5); font-size: var(--font-size-24); font-weight: var(--font-weight-semibold); }
.bj-about-doctor__role { margin-top: var(--space-1); color: var(--about-muted); font-size: var(--font-size-14); }
.bj-about-doctor__bio { margin-top: var(--space-4); padding-block: var(--space-4) var(--space-5); border-top: var(--border-width-1) solid var(--about-line); color: var(--about-muted); font-size: var(--font-size-14); white-space: pre-line; overflow-wrap: anywhere; }

/* 최신 저널: 실제 공개 글 3개, 모바일에서는 1열. */
.bj-about-reading__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.bj-about-reading__list > li { min-width: 0; }
.bj-about-read { display: block; text-decoration: none; }
.bj-about-read__image { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-box); background: var(--about-surface); }
.bj-about-read__image img { width: 100%; height: 100%; object-fit: cover; }
.bj-about-read__category { margin-top: var(--space-5); color: var(--about-accent); font-size: var(--font-size-13); }
.bj-about-read h3 { margin-top: var(--space-2); font-size: var(--font-size-22); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
.bj-about-read__excerpt { margin-top: var(--space-3); color: var(--about-muted); font-size: var(--font-size-15); }
.bj-about-read__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); color: var(--about-muted); font-size: var(--font-size-13); }
.bj-about-reading__action { margin-top: var(--space-12); text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .bj-about-button--outline:hover { background: var(--about-ink); color: var(--about-bg); }
  .bj-about-button--brand:hover { background: var(--color-yellow-600); }
  .bj-about-text-link:hover { color: var(--about-accent); }
  .bj-about-topics__list a:hover h3,
  .bj-about-read:hover h3 { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: var(--border-width-1); }
}
@media (min-width: 1024px) {
  /* 오른쪽 빠른 메뉴의 90px 상자 + 20px 위치 + 16px 간격. 본문은 가운데를 유지한다. */
  .bj-about {
    --about-content-gutter: calc(var(--quick-offset) + var(--quick-item-size) + 2 * var(--space-2) + 2 * var(--border-width-default) + var(--space-4));
  }
}
@media (max-width: 1023px) {
  .bj-about-heading { flex-direction: column; align-items: start; gap: var(--space-6); }
  .bj-about-clinic { gap: var(--space-8); }
  .bj-about-doctors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-10) var(--space-6); }
  .bj-about-topics__list { gap: var(--space-6); }
}
@media (max-width: 767px) {
  .bj-about { --about-photo-height: 15rem; font-size: var(--font-size-16); }
  .bj-about-hero__lead { margin-top: var(--space-6); font-size: var(--font-size-15); }
  .bj-about-hero .bj-about-button { margin-top: var(--space-6); }
  .bj-about-hero__photo { margin-top: var(--space-10); }
  .bj-about-hero__photo figcaption { font-size: var(--font-size-12); }
  .bj-about-heading { margin-bottom: var(--space-8); }
  .bj-about-heading > p { font-size: var(--font-size-15); }
  .bj-about-topics__list { grid-template-columns: 1fr; gap: 0; }
  .bj-about-topics__list a { padding-block: var(--space-6); }
  .bj-about-topics__list h3 { font-size: var(--font-size-24); }
  .bj-about-topics__list p { margin-top: var(--space-3); font-size: var(--font-size-15); }
  .bj-about-topics__more { margin-top: var(--space-4); }
  .bj-about-clinic { grid-template-columns: 1fr; gap: var(--space-8); }
  .bj-about-clinic__photo img { aspect-ratio: 1.35; }
  .bj-about-clinic__name { margin-bottom: var(--space-4); }
  .bj-about-clinic__body { margin-top: var(--space-5); }
  .bj-about-doctors__list { gap: var(--space-8) var(--space-4); }
  .bj-about-doctor h3 { margin-top: var(--space-4); font-size: var(--font-size-20); }
  .bj-about-doctor__role { font-size: var(--font-size-13); }
  .bj-about-reading__list { grid-template-columns: 1fr; gap: var(--space-10); }
  .bj-about-read h3 { font-size: var(--font-size-20); }
  .bj-about-read__category { margin-top: var(--space-4); }
  .bj-about-reading__action { margin-top: var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
  .bj-about *,
  .bj-about *::before,
  .bj-about *::after { animation: none; transition-property: none; }
}