/* =========================================================
   Base
   ========================================================= */
html { scroll-behavior: smooth; }
body {
  background: #0D1218;
  color: #EAEEF3;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
  overflow-x: hidden;
}
::selection { background: rgba(59,167,245,0.35); color: #fff; }

img { filter: grayscale(100%) contrast(1.02); }
img.no-gray { filter: none; }

.kbd { font-variant-numeric: tabular-nums; }
.keep-all { word-break: keep-all; }

/* =========================================================
   Grain (reusable)
   ========================================================= */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =========================================================
   Cards (unified style across pages)
   - Vertical subtle gradient
   - Hairline top via inset shadow
   - Wide soft shadow, rounded 20px
   ========================================================= */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.014) 55%, rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: 20px;
  box-shadow:
    0 24px 48px -24px rgba(0,0,0,0.55),
    0 8px 24px -12px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.glass-strong {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.02) 55%, rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 20px;
  box-shadow:
    0 28px 56px -24px rgba(0,0,0,0.6),
    0 10px 26px -14px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
/* 강조 카드: 섹션당 최대 1개 · 파란 글로우 */
.glass-highlight {
  position: relative;
  background: linear-gradient(180deg, rgba(59,167,245,0.15) 0%, rgba(59,167,245,0.035) 55%, rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(59,167,245,0.35);
  border-radius: 20px;
  box-shadow:
    0 32px 70px -20px rgba(59,167,245,0.30),
    0 10px 24px -12px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

.card-hover {
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease,
    box-shadow .35s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(59,167,245,0.30);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,0.6),
    0 14px 32px -14px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* =========================================================
   Dark section background (푸른 기 도는 다크 + 상단 은은한 밝음)
   - Replaces flat #0B1017 sections
   - Top ~22% is a hair brighter, then settles into body base
   ========================================================= */
.bg-section-dark {
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(59,167,245,0.045), transparent 70%),
    linear-gradient(180deg, #131A24 0%, #0F151D 18%, #0D1218 40%);
}
.bg-section-dark-2 {
  background:
    linear-gradient(180deg, #10171F 0%, #0D1218 20%);
}

/* =========================================================
   PAPER (white) section — 정보·설명 구간용
   - Text 색상은 확실히 이기도록 section.section-paper 로 특정도 확보
   ========================================================= */
.section-paper {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F8FB 100%);
  color: #1F2731;
}
section.section-paper h1,
section.section-paper h2,
section.section-paper h3,
section.section-paper h4 { color: #0F141B; }
section.section-paper p           { color: #4A5361; }
section.section-paper .text-mute2 { color: #4A5361; }
section.section-paper .text-mute  { color: #6B7280; }
section.section-paper .text-white { color: #0F141B; }
section.section-paper .border-line,
section.section-paper .border-line2 { border-color: #E6EBF0; }
/* neutralize dark-card inner dividers when they appear on paper */
section.section-paper [class*="border-white/"] { border-color: #E6EBF0 !important; }
section.section-paper .card-dark [class*="border-white/"] { border-color: rgba(255,255,255,0.06) !important; }
section.section-paper .glass-highlight-eyebrow {
  background: rgba(59,167,245,0.10);
  color: #1E8CDB;
  border-color: rgba(59,167,245,0.25);
}

/* .glass 를 화이트 섹션에서 자동으로 라이트 카드로 전환 */
section.section-paper .glass {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  border: 1px solid #E6EBF0;
  box-shadow:
    0 2px 8px rgba(20,30,45,0.05),
    0 20px 44px -20px rgba(20,30,45,0.12);
}
section.section-paper .glass-strong {
  background: #FFFFFF;
  border: 1px solid #E1E7EE;
  box-shadow:
    0 4px 12px rgba(20,30,45,0.06),
    0 24px 52px -18px rgba(20,30,45,0.15);
}
section.section-paper .card-hover:hover {
  border-color: rgba(59,167,245,0.40);
  box-shadow:
    0 4px 12px rgba(20,30,45,0.06),
    0 28px 56px -22px rgba(20,30,45,0.16);
}

/* Dark card explicitly kept dark even on paper section */
.card-dark {
  position: relative;
  background: linear-gradient(180deg, #14191F 0%, #10141A 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  color: #EAEEF3;
  box-shadow:
    0 24px 48px -24px rgba(0,0,0,0.55),
    0 8px 24px -12px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
section.section-paper .card-dark,
section.section-paper .card-dark * { color: inherit; }
section.section-paper .card-dark { color: #EAEEF3; }
section.section-paper .card-dark h1,
section.section-paper .card-dark h2,
section.section-paper .card-dark h3,
section.section-paper .card-dark h4 { color: #FFFFFF; }
section.section-paper .card-dark p,
section.section-paper .card-dark .text-mute2 { color: #B6BFCB; }
section.section-paper .card-dark .text-mute  { color: #7C838F; }

/* Comparison table row divider on paper */
.compare-row + .compare-row { border-top: 1px solid #E6EBF0; }

/* =========================================================
   Grid pattern (non-hero decorative)
   ========================================================= */
.grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 35%, transparent 78%);
          mask-image: radial-gradient(ellipse at 60% 40%, black 35%, transparent 78%);
}

/* =========================================================
   Hero: dark storm-cloud CSS animation (temporary background
   until <video> is added). Swap <video> in without touching
   the layout below.
   ========================================================= */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #08111A;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 영상 원본 밝기를 살림. 필요 시 contrast만 아주 약하게. */
  filter: contrast(1.02) saturate(1.02);
  z-index: 1;
}
.hero-cloud-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 500px at 30% 20%, rgba(10,20,32,0.55), transparent 62%),
    radial-gradient(900px 600px at 75% 70%, rgba(8,14,24,0.68), transparent 65%),
    linear-gradient(180deg, #08111A 0%, #0B141F 45%, #0D1218 100%);
}
.hero-cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
.hero-cloud-1 {
  top: -10%; left: -8%;
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  background: radial-gradient(circle, rgba(59,167,245,0.55) 0%, rgba(59,167,245,0) 65%);
  animation: hero-drift-1 26s ease-in-out infinite alternate;
}
.hero-cloud-2 {
  top: 25%; right: -12%;
  width: 50vw; height: 50vw;
  max-width: 680px; max-height: 680px;
  background: radial-gradient(circle, rgba(59,167,245,0.45) 0%, rgba(59,167,245,0) 65%);
  animation: hero-drift-2 34s ease-in-out infinite alternate;
}
.hero-cloud-3 {
  bottom: -18%; left: 25%;
  width: 70vw; height: 45vw;
  max-width: 960px; max-height: 560px;
  background: radial-gradient(ellipse, rgba(59,167,245,0.38) 0%, rgba(59,167,245,0) 70%);
  animation: hero-drift-3 42s ease-in-out infinite alternate;
}
@keyframes hero-drift-1 {
  0%   { transform: translate(0,0) scale(1);    opacity: 0.32; }
  100% { transform: translate(12%, 8%) scale(1.15); opacity: 0.55; }
}
@keyframes hero-drift-2 {
  0%   { transform: translate(0,0) scale(1.1);  opacity: 0.26; }
  100% { transform: translate(-10%, -6%) scale(1); opacity: 0.50; }
}
@keyframes hero-drift-3 {
  0%   { transform: translate(0,0) scale(0.95); opacity: 0.20; }
  100% { transform: translate(-8%, -5%) scale(1.15); opacity: 0.40; }
}
.hero-grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =========================================================
   Timeline vertical rule
   ========================================================= */
.rule-v {
  background: linear-gradient(180deg, transparent, rgba(59,167,245,0.5) 20%, rgba(59,167,245,0.5) 80%, transparent);
}

/* =========================================================
   Accordion
   ========================================================= */
details.faq { overflow: hidden; transition: background .3s ease, border-color .3s ease; }
details.faq[open] { background: rgba(59,167,245,0.05); border-color: rgba(59,167,245,0.3); }
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq .chev { transition: transform .3s ease; }
details.faq[open] .chev { transform: rotate(45deg); }

/* =========================================================
   Carousel · hide default scrollbar, custom progress bar
   ========================================================= */
.carousel {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }

/* progress track */
.carousel-progress-track {
  height: 3px;
  width: 160px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.carousel-progress-fill {
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(59,167,245,0.7), rgba(59,167,245,1));
  border-radius: 999px;
  transition: transform .18s ease;
}

/* =========================================================
   Modal
   ========================================================= */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 9, 13, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s ease;
}
.modal-backdrop.open { display: flex; opacity: 1; }
.modal-content {
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform .3s ease;
  scrollbar-width: thin;
}
.modal-backdrop.open .modal-content { transform: translateY(0); }
body.modal-open { overflow: hidden; }

/* =========================================================
   Reveal on scroll · CONTENT-FIRST
   ---------------------------------------------------------
   - Default: everything is fully visible (no hidden state)
   - Hidden state only applies when JS is enabled AND the
     inline <script> in <head> adds .js to <html>
   - IntersectionObserver then adds .visible to reveal
   ---------------------------------------------------------
   If JS fails, external libs fail to load, or animation
   is disabled, ALL content remains visible.
   ========================================================= */
.reveal {
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.js .reveal:not(.visible) {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

/* Reduced motion: always visible, no transition */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-cloud { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   Team (about.html #team) — paper section
   ========================================================= */
.team-stage { position: relative; padding-top: clamp(28px, 5vw, 60px); }
.team-mark {
  position: absolute; top: 0; left: 0; right: 0; text-align: center;
  font-weight: 800; font-size: clamp(72px, 17vw, 210px); letter-spacing: .06em; line-height: 1;
  color: rgba(20,26,33,.07); user-select: none; pointer-events: none;
}
.team-panel {
  position: absolute; left: 3%; right: 3%; bottom: 0; height: 54%; border-radius: 24px;
  background: linear-gradient(135deg, #1B3A5C 0%, #0C1B2D 78%);
  box-shadow: 0 30px 60px -30px rgba(12,27,45,.55);
}
.team-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border-top: 1px solid rgba(255,255,255,.14);
}
.team-group { position: relative; display: block; width: 88%; margin: 0 auto; }

.team-grid {
  --team-gap: 18px; --team-cols: 5;
  display: flex; flex-direction: column; gap: var(--team-gap);
  margin-top: clamp(56px, 7vw, 88px);
}
/* Rows of 2·3·2 cards, centered; every card keeps the old 5-column width */
.team-row { display: flex; justify-content: center; gap: var(--team-gap); }
.team-row > .team-card { flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols)); }
.team-card {
  position: relative; aspect-ratio: 3 / 4.6; border: 1px solid #E6EBF0; border-radius: 18px;
  background: #F2F4F6; overflow: hidden; cursor: pointer; text-align: left; padding: 0;
  font: inherit; color: #0F141B;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.team-card-text { position: absolute; top: 22px; left: 22px; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.team-card-name { font-size: clamp(19px, 1.9vw, 22px); font-weight: 800; letter-spacing: -.02em; }
.team-card-meta { font-size: 13.5px; line-height: 1.5; color: #4A5361; }
.team-card-img {
  position: absolute; right: -8%; bottom: 0; height: 60%; width: auto; max-width: none;
  filter: grayscale(1) contrast(1.02);
  transition: filter .45s, transform .45s; transform-origin: bottom right;
}
.team-card:hover {
  background: #ECEFF2; border-color: rgba(59,167,245,0.40);
  box-shadow: 0 4px 12px rgba(20,30,45,0.06), 0 28px 56px -22px rgba(20,30,45,0.16);
}
.team-card:hover .team-card-img { filter: grayscale(.15); transform: scale(1.02); }
.team-card:focus-visible { outline: 2px solid #3BA7F5; outline-offset: 3px; }

/* Placeholder (협력 전문가) — same card, no click, no hover */
.team-card--placeholder { cursor: default; }
.team-card--placeholder:hover { background: #F2F4F6; border-color: #E6EBF0; box-shadow: none; }
.team-card-silhouette { position: absolute; right: 4%; bottom: 0; height: 64%; width: auto; color: #D9DEE4; }
.team-card-desc {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 22px 20px;
  font-size: 12.5px; line-height: 1.55; color: #4A5361; word-break: keep-all;
  background: linear-gradient(to top, rgba(242,244,246,.94) 48%, rgba(242,244,246,0));
}

/* Team modal — rendered outside the paper section, so light colors are set here */
.team-modal.glass { max-width: 880px; background: #FFFFFF; border: 0; color: #0F141B; }
.team-modal h3 { color: #0F141B; }
.team-modal-title { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #4A5361; margin-left: 8px; }
.team-modal-sec { margin-top: 26px; padding-top: 22px; border-top: 1px solid #E6EBF0; }
.team-modal-label { font-size: 14px; font-weight: 700; color: #1E8CDB; margin-bottom: 12px; }
.team-modal-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.team-modal-sec li { font-size: 15px; line-height: 1.55; color: #1F2731; word-break: keep-all; }

@media (max-width: 1024px) { .team-grid { --team-gap: 14px; --team-cols: 3; } }
@media (max-width: 640px) {
  .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .team-row { display: contents; }
  .team-card-desc { padding: 28px 16px 14px; font-size: 12px; }
  .team-card-text { top: 16px; left: 16px; gap: 6px; }
  .team-card-meta { font-size: 12.5px; }
  .team-panel { border-radius: 16px; left: 0; right: 0; }
  .team-group { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .team-card, .team-card-img { transition: none !important; }
}

/* =========================================================
   Mobile call bar — sm(640px) 미만에서 하단 고정
   ========================================================= */
.mobile-cta-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 639px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================
   3대 전문분야 — 전체 폭 3줄 목록 (index)
   ========================================================= */
.practice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E6EBF0; }
.practice-list > li { border-bottom: 1px solid #E6EBF0; }
.practice-row { display: block; color: #0F141B; transition: background-color .25s ease; }
.practice-row:hover,
.practice-row:focus-visible { background: rgba(59,167,245,0.06); }
.practice-row:focus-visible { outline: 2px solid #3BA7F5; outline-offset: -2px; }
.practice-row-inner {
  max-width: 1240px; margin: 0 auto; padding: 30px 24px;
  display: grid; grid-template-columns: minmax(200px, 300px) 1fr auto; align-items: center; gap: 32px;
}
.practice-row-title { font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.045em; color: #0F141B; }
.practice-row-desc { font-size: 16.5px; line-height: 1.6; color: #4A5361; word-break: keep-all; }
.practice-row-arrow { color: #1E8CDB; transition: transform .25s ease; }
.practice-row:hover .practice-row-arrow,
.practice-row:focus-visible .practice-row-arrow { transform: translateX(6px); }
@media (max-width: 767px) {
  .practice-row-inner { grid-template-columns: 1fr auto; gap: 6px 16px; padding: 22px 24px; }
  .practice-row-title { grid-column: 1; }
  .practice-row-desc { grid-column: 1; grid-row: 2; font-size: 15px; }
  .practice-row-arrow { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-row, .practice-row-arrow { transition: none !important; }
}

/* =========================================================
   오시는 길 — 지도 + 길찾기 버튼 (about #contact)
   ========================================================= */
.visit-map { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; background: #E7EAEE; }
@media (max-width: 639px) { .visit-map { aspect-ratio: 4 / 3; } }
.map-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 18px; border-radius: 999px; border: 1px solid #DCE3EA; background: #FFFFFF;
  color: #0F141B; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em;
  transition: border-color .2s, color .2s, background-color .2s;
}
.map-link-btn:hover { border-color: #3BA7F5; color: #1E8CDB; background: #F5FAFE; }
.map-link-btn:focus-visible { outline: 2px solid #3BA7F5; outline-offset: 2px; }
/* hidden 속성이 Tailwind의 display 유틸리티(inline-flex 등)에 지지 않도록 */
[hidden] { display: none !important; }

/* =========================================================
   Hero 가독성 (index) — 영상 밝기는 그대로, 텍스트 쪽만 보강
   ========================================================= */
/* 1) 네비 뒤 상단 그라데이션: 맨 위는 어둡게, 메뉴 글씨 아래로 투명.
      스크롤 후(site.js가 backdrop-blur-xl 추가) 반투명 다크 배경으로 넘어가며 사라짐 */
.nav-scrim::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6,9,13,0.78) 0%, rgba(6,9,13,0.5) 38%, rgba(6,9,13,0.18) 70%, rgba(6,9,13,0) 100%);
  transition: opacity .3s ease;
}
.nav-scrim.backdrop-blur-xl::before { opacity: 0; }

/* 3) 헤드라인·부제: 가까운 경계 섀도우 + 넓은 번짐 */
.hero-headline {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.70),
    0 2px 6px rgba(0,0,0,0.60),
    0 8px 28px rgba(0,0,0,0.70),
    0 0 48px rgba(0,0,0,0.42);
}
.hero-subtitle {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.70),
    0 2px 6px rgba(0,0,0,0.60),
    0 4px 18px rgba(0,0,0,0.62);
}
/* 4) 파란 강조: 미세한 어두운 외곽선 + 헤드라인 섀도우 유지 */
.hero-accent {
  text-shadow:
    0 0 1px rgba(4,18,31,0.95),
    0 0 2px rgba(4,18,31,0.75),
    0 1px 2px rgba(0,0,0,0.70),
    0 2px 6px rgba(0,0,0,0.60),
    0 8px 28px rgba(0,0,0,0.70),
    0 0 48px rgba(0,0,0,0.42);
}

/* =========================================================
   팀 프로필 모달 사진
   - 모바일: 사진을 자르지 않고 원본 비율 그대로 전체 표시 → 이름·약력이 이어지고
     모달 전체가 한 번에 스크롤 (.modal-content 하나만 스크롤)
   - PC(sm 이상): 좌 사진 / 우 약력, 사진은 위쪽 기준으로 채움
   ========================================================= */
.team-modal-photo {
  position: relative; overflow: hidden;
  /* 사진 로딩 전·여백이 보일 때 인물 사진 배경 회색 톤과 맞춤 */
  background: linear-gradient(180deg, #E3E8EC 0%, #C8D0D6 100%);
}
.team-modal-photo img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) {
  .team-modal-photo { min-height: 460px; }
  .team-modal-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 0%; }
}

/* 닫기 버튼: 높이 0인 sticky 줄에 얹어 스크롤해도 모달 우상단에 고정 */
.team-modal-close-wrap { position: sticky; top: 0; height: 0; z-index: 5; }
.team-modal-close { position: absolute; top: 16px; right: 16px; }
@media (max-width: 639px) {
  .team-modal .team-modal-close { top: 12px; right: 12px; background: rgba(255,255,255,0.92); color: #1F2731; box-shadow: 0 4px 14px rgba(15,20,27,0.18); }
  .team-modal .team-modal-close:hover { background: #FFFFFF; }
}
/* 모달 본문은 세로 스크롤 가능해야 함 (Tailwind가 site.css 뒤에 주입되므로 특정도를 높여 고정) */
.modal-content.team-modal { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* =========================================================
   헤더 로고 — PC: 심볼 + MEDICI + 센터명 한 줄 / 모바일(<640px): 심볼 + 두 줄
   ========================================================= */
.brand-lockup { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; }
.brand-lockup-symbol { height: 28px; width: auto; flex-shrink: 0; }
.brand-lockup-text { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-lockup-wordmark { height: 15px; width: auto; flex-shrink: 0; }
.brand-lockup-name { white-space: nowrap; color: #B6BFCB; font-weight: 500; letter-spacing: -0.025em; font-size: 13.5px; }
@media (max-width: 639px) {
  .brand-lockup { gap: 9px; }
  .brand-lockup-symbol { height: 32px; }
  .brand-lockup-text { flex-direction: column; align-items: flex-start; gap: 5px; }
  .brand-lockup-wordmark { height: 13px; }
  /* 320px에서도 한 줄 유지: 화면 폭에 따라 9.5~11.5px */
  .brand-lockup-name { font-size: clamp(9.5px, 2.95vw, 11.5px); line-height: 1; letter-spacing: -0.03em; }
}