/* ==========================================================================
   KAIROS 홈페이지 스타일시트
   한국 감염병 임상연구 컨소시엄 (KAIROS)
   ========================================================================== */

:root {
  /* Color */
  /* 대표색: 로고색(#002591). 되돌릴 때는 이 한 줄만 이전 값(#0b4f8a)으로 바꾸면 됩니다.
     -dark/-light는 대표색에서 자동 계산되므로 따로 고칠 필요 없음 */
  --color-primary: #002591;
  --color-primary-dark: color-mix(in srgb, var(--color-primary) 78%, #000);
  --color-primary-light: color-mix(in srgb, var(--color-primary) 8%, #fff);
  --color-accent: #12a3a3;       /* 포인트 틸 (임상/연구) */
  --color-accent-light: #e6f7f7;
  --color-text: #222831;
  --color-text-sub: #5a6572;
  --color-border: #e3e7ec;
  --color-bg: #ffffff;
  --color-bg-soft: #f6f8fa;
  --color-danger: #d64545;

  /* 본문 표 (페이지 콘텐츠 .page-content-body 안의 table) — 고객 PRB 안내/조직도 이미지 색 기준.
     표 색을 바꿀 때는 여기만 수정 */
  --table-head-bg: #173b63;
  --table-head-text: #ffffff;
  --table-border: #d6e1ea;
  --table-first-col-bg: #eaf4fb;
  --table-first-col-text: #173b63;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f3f8fc;

  /* 메인 배너 글자 뒤 반투명 막 (밝은 배너 이미지에서도 흰 글자 대비 4.5:1 이상 유지) */
  --hero-shade-strong: rgba(0, 18, 64, 0.8);
  --hero-shade-soft: rgba(0, 18, 64, 0.35);
  --hero-shade-mobile: rgba(0, 18, 64, 0.7);

  /* 하단 관련사이트 로고 카드 */
  --related-card-border: #d6e1ea;

  /* Layout */
  --header-height: 84px;
  --container-width: 1200px;

  /* Type */
  --font-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic",
    "맑은 고딕", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  word-break: keep-all;
}

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

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.section-head h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.section-head .more {
  font-size: 13px;
  color: var(--color-text-sub);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 6px 16px;
}

.section-head .more:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* TBD 표시 배지: 고객 확인 전 임시 콘텐츠임을 명시 */
.tbd {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--color-danger);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Skip link (접근성)
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  height: var(--header-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo .mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}

.logo .logo-img {
  width: auto;
  height: 40px;
  max-width: 140px;
  border-radius: 6px;
  object-fit: contain;
}

.logo .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo .txt .en {
  font-size: 19px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}

.logo .txt .kr {
  font-size: 11px;
  color: var(--color-text-sub);
}

/* GNB */
.gnb {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  list-style: none; /* .gnb는 <nav>라서 전역 ul,ol 리셋이 적용되지 않아 별도로 지정 */
}

.gnb > li {
  position: relative;
}

.gnb > li > a {
  display: block;
  padding: 30px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.gnb > li:hover > a,
.gnb > li.active > a {
  color: var(--color-primary);
}

.gnb .submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 40, 70, 0.1);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: all 0.15s ease;
}

.gnb > li:hover .submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

.gnb .submenu li a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  color: var(--color-text-sub);
}

.gnb .submenu li a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.header-util {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gnb-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.gnb-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: 0.2s;
}

/* ==========================================================================
   Hero (메인 배너)
   ========================================================================== */
.hero {
  position: relative;
  /* 배너 이미지 비율 3:1(1920×640) 기준. 좁은 화면에서는 글자가 들어갈 최소 높이를 두고 이미지 양옆이 잘림 */
  height: clamp(360px, 33.334vw, 640px);
  background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary) 55%, var(--color-accent));
  overflow: hidden;
}

/* 배너 이미지(장식용 img alt="") — 이미지만 바뀌고 문구는 .hero-copy에 고정 */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* 휴대폰에서 잘려도 가운데가 남도록 */
}

/* 이미지가 있을 때만 글자 쪽(왼쪽)에 진한 남색 반투명 그라데이션을 깔아 밝은 이미지(크림색 등)에서도 글자 대비 확보.
   (이미지 없이 기본 그라데이션만 있을 때는 덧씌우지 않음)
   진한 구간은 글자 영역 오른쪽 끝(--hero-text-edge)까지 유지: 컨테이너 왼쪽 끝 + 안쪽 여백 88px + 제목 최대 너비 640px */
.hero-slides:has(img)::after {
  --hero-text-edge: max(740px, calc(50% + 170px));
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--hero-shade-strong) 0,
    var(--hero-shade-strong) var(--hero-text-edge),
    var(--hero-shade-soft) calc(var(--hero-text-edge) + 240px),
    transparent 100%
  );
}

.hero-copy {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding-bottom: 28px; /* 하단 점(페이지네이션)과 겹치지 않게 */
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* 좌우 ‹ › 버튼과 글자가 겹치지 않도록 안쪽 여백 확보 (버튼이 숨겨지는 640px 이하에서는 기본 여백) */
.hero-copy .container {
  padding: 0 88px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 18px;
  text-shadow: none;
}

/* 라벨이 비어 있으면 숨김 (display 지정 때문에 hidden 속성이 무시되지 않도록) */
.hero-eyebrow[hidden] {
  display: none;
}

.hero-copy h1 {
  font-size: 38px;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 14px;
  max-width: 640px;
  word-break: keep-all;
}

.hero-copy p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  word-break: keep-all;
}

/* 센터 한 줄 소개 띠 (메인 배너 바로 아래, 관리자 > 사이트 설정 siteIntro) */
.site-intro {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  padding: 22px 0;
  text-align: center;
}

.site-intro p {
  width: fit-content; /* 글자 폭만큼만 차지 -> 퀵메뉴 겹침 판단을 실제 글자 영역으로 (layout.js watchQuickAvoid) */
  margin: 0 auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--color-primary-dark);
  word-break: keep-all;
}

.hero-nav {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.hero-nav button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: 0.2s;
}

.hero-nav button.is-active {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hero-arrow.prev {
  left: 24px;
}

.hero-arrow.next {
  right: 24px;
}

/* ==========================================================================
   Search bar (임상연구 검색)
   ========================================================================== */
.search-bar {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.search-bar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
}

.search-bar .label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}

.search-bar .label .icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.search-bar-desc {
  flex: 1;
  min-width: 240px;
  font-size: 14px;
  color: var(--color-text-sub);
  line-height: 1.6;
}

.search-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 24px;
  background: var(--color-primary);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.search-bar-cta:hover {
  opacity: 0.9;
}

/* ==========================================================================
   공지사항 / 학술행사 2단 구성
   ========================================================================== */
.info-boxes {
  padding: 56px 0;
  background: var(--color-bg-soft);
}

.info-boxes .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.info-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid var(--color-border);
}

.info-card .info-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.info-card .info-card-head h3 {
  font-size: 18px;
  font-weight: 700;
}

.info-card .info-card-head a {
  font-size: 13px;
  color: var(--color-text-sub);
}

.notice-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
}

.notice-list li:last-child a {
  border-bottom: none;
}

.notice-list li a .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-list li a .date {
  flex-shrink: 0;
  color: var(--color-text-sub);
  font-size: 12px;
}

.event-item h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}

.event-meta {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
}

.event-meta div h5 {
  font-size: 12px;
  color: var(--color-text-sub);
  font-weight: 500;
  margin-bottom: 4px;
}

.event-meta div p {
  font-size: 14px;
  font-weight: 600;
}

.event-item .btn-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

/* ==========================================================================
   퀵 카드 (연구절차 / 자료 / 참여안내)
   ========================================================================== */
.quick-cards {
  padding: 56px 0;
}

.quick-cards .grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
}

.quick-cards .card {
  border-radius: 16px;
  padding: 26px;
  border: 1px solid var(--color-border);
  transition: 0.2s;
}

.quick-cards .card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(11, 79, 138, 0.08);
  translate: 0 -3px;
}

.quick-cards .card.highlight {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  border: none;
}

.quick-cards .card h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.quick-cards .card p {
  font-size: 13px;
  color: var(--color-text-sub);
}

.quick-cards .card.highlight p {
  color: rgba(255, 255, 255, 0.85);
}

.quick-cards .card .card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-accent-light);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 18px;
}

/* ==========================================================================
   Quick floating menu
   ========================================================================== */
.quick-float {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 푸터(관련사이트 배너 포함)가 보이는 동안 고정 퀵메뉴 숨김 — 모바일은 푸터 정보, 데스크톱은 푸터 링크를
   가리던 문제 방지. body 클래스는 layout.js의 watchFooter가 붙임
   + 메인 한 줄 소개 문장(data-quick-avoid)이 퀵메뉴 밑을 지나는 동안도 숨김 (layout.js watchQuickAvoid) */
body.footer-in-view .quick-float,
body.quick-avoid-in-view .quick-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quick-float ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 24px rgba(15, 40, 70, 0.12);
}

.quick-float a,
.quick-float button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 64px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--color-text-sub);
  text-align: center;
}

.quick-float a:hover,
.quick-float button:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.quick-float .icon {
  font-size: 18px;
}

.to-top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(11, 79, 138, 0.25);
}

/* ==========================================================================
   서브페이지 공통 (breadcrumb / page-hero / placeholder)
   ========================================================================== */
.page-hero {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0 32px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-sub);
  margin-bottom: 14px;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.page-hero h1 {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.page-body {
  padding: 56px 0 96px;
}

.placeholder-panel {
  border: 1px dashed var(--color-border);
  border-radius: 16px;
  padding: 64px 32px;
  text-align: center;
  background: var(--color-bg-soft);
}

.placeholder-panel .tbd {
  margin: 0 0 14px;
  font-size: 12px;
}

.placeholder-panel h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}

.placeholder-panel p {
  color: var(--color-text-sub);
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto;
}

.placeholder-panel p + p {
  margin-top: 8px;
}

/* ==========================================================================
   목록형 콘텐츠 상세 표시 (공지사항/학술행사/자료실 서브페이지 공용)
   ========================================================================== */
/* 분류 탭 (학술행사/교육안내, 자료마당 분류) — 링크 방식(?type=)이라 새로고침·공유해도 같은 분류가 열림 */
.sub-tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.sub-tabs a {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-sub);
}

.sub-tabs a[aria-current="page"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px 26px;
  background: #fff;
}

.post-card .post-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--color-text-sub);
  margin-bottom: 8px;
}

.post-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-text);
}

.post-card p {
  font-size: 14px;
  color: var(--color-text-sub);
  white-space: pre-wrap;
  line-height: 1.7;
}

.post-card .post-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.post-card .post-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

/* 관련사이트 카드: 로고는 자체 박스 안에, 기관명은 박스 바깥(아래)에 별도 표시
   높이는 고정하고 너비만 넉넉하게 잡아 로고가 옆으로 꽉 차게 표시되도록 함 */
.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px 16px;
}

.link-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  color: var(--color-text);
}

.link-list a .related-logo-box {
  width: 100%;
  max-width: 220px;
  height: 130px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.link-list a .related-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.link-list a .related-name {
  font-size: 16px;
  font-weight: 700;
}

.link-list a:hover .related-logo-box {
  border-color: var(--color-primary);
}

.link-list a:hover .related-name {
  color: var(--color-primary);
}

/* 고정 페이지 본문 (인사말·연혁·주요 사업·PRB 등) — 긴 글 가독성
   단어 중간에서 줄이 끊기지 않게(keep-all), 한 줄은 한글 40자 안팎(--content-measure)으로 제한.
   표·그림이 든 문단은 폭 제한에서 제외 (표·이미지 스타일은 아래 별도 규칙) */
.page-content-body {
  --content-measure: 40em;
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text);
  word-break: keep-all;
  overflow-wrap: break-word; /* 긴 URL 등은 줄바꿈 허용 */
}

.page-content-body p {
  margin-bottom: 1.3em;
  text-wrap: pretty; /* 마지막 줄에 단어 하나만 떨어지지 않게 (미지원 브라우저는 기존 줄바꿈) */
}

.page-content-body p:last-child {
  margin-bottom: 0;
}

.page-content-body ol,
.page-content-body ul {
  margin: 0 0 1.3em 1.4em;
  list-style: revert;
}

.page-content-body li + li {
  margin-top: 0.4em;
}

.page-content-body :is(p, ul, ol, h2, h3, h4, blockquote):not(:has(img, table, iframe)):not(:is(td, th) *) {
  max-width: var(--content-measure);
}

/* 문의 페이지 맨 위 안내 문장은 컴퓨터 화면에서 한 줄로 (한 줄 길이 제한 예외 — 이 문장만) */
.contact-body > p:first-of-type {
  max-width: none;
}

.page-content-body :is(h2, h3, h4) {
  margin: 1.8em 0 0.7em;
  line-height: 1.45;
  color: var(--color-primary-dark);
}

.page-content-body > :first-child,
.page-content-body .greeting-text > :first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   인사말 전용 구조 (운영 서버 인사말 본문을 아래 형식으로 감쌈 — PROJECT_NOTES "인사말 본문 HTML 형식")
   <div class="greeting"><div class="greeting-text">본문</div><figure class="greeting-photo"><img></figure></div>
   1024px 이상: 글 왼쪽 · 사진 오른쪽(280px, 스크롤 시 sticky) / 그 아래: 사진을 글 위 가운데에 작게
   -------------------------------------------------------------------------- */
.page-content-body .greeting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 56px;
  align-items: start;
}

.page-content-body .greeting-photo {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  margin: 0;
}

.page-content-body .greeting-photo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 40, 70, 0.1);
}

@media (max-width: 1023px) {
  .page-content-body .greeting {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .page-content-body .greeting-photo {
    order: -1; /* 사진을 글 위로 */
    position: static;
    width: 200px;
    align-self: center;
  }
}

.page-content-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1em 0;
}

.page-content-body a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   본문 표 — 페이지 콘텐츠 영역 안의 표에만 적용 (메뉴·푸터·관리자 화면 영향 없음)
   .table-scroll 래퍼는 layout.js renderRichText가 표마다 씌움: 모서리 둥글게 + 넓은 표만 가로 스크롤
   -------------------------------------------------------------------------- */
.page-content-body .table-scroll {
  margin: 1.2em 0;
  border: 1px solid var(--table-border);
  border-radius: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.page-content-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: break-word;
  background: var(--table-row-bg);
}

/* 래퍼 안에서는 바깥 테두리를 래퍼가 그리므로 표 자체의 바깥선은 숨김 */
.page-content-body .table-scroll table {
  border-style: hidden;
}

/* 래퍼가 없는 경우(스크립트 미실행 등)에도 최소한 칸 경계는 보이도록 */
.page-content-body table:not(.table-scroll table) {
  margin: 1.2em 0;
  border: 1px solid var(--table-border);
}

.page-content-body th,
.page-content-body td {
  padding: 12px 16px;
  border: 1px solid var(--table-border);
  vertical-align: middle;
  text-align: left;
}

.page-content-body th p,
.page-content-body td p {
  margin: 0;
}

/* 머리행 */
.page-content-body th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* 본문 행 줄무늬 (thead가 있는 표 / 첫 줄이 머리행인 표 모두 데이터 첫 줄이 흰색이 되도록) */
.page-content-body tbody tr > td {
  background: var(--table-row-bg);
}

.page-content-body thead ~ tbody tr:nth-child(even) > td,
.page-content-body table:not(:has(thead)) tbody tr:nth-child(odd):not(:first-child) > td {
  background: var(--table-row-alt-bg);
}

/* 첫 번째 열(단계·연월·구분 등 항목명). 행 머리로 쓴 th도 같은 모양 */
.page-content-body tbody tr > td:first-child,
.page-content-body tbody tr > th:first-child:has(~ td) {
  background: var(--table-first-col-bg);
  color: var(--table-first-col-text);
  font-weight: 700;
  text-align: left;
  white-space: normal;
}

.sitemap-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 32px;
}

.sitemap-section h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.sitemap-section h3 a {
  color: var(--color-primary-dark);
}

.sitemap-section ul li {
  margin-bottom: 8px;
}

.sitemap-section ul li a {
  font-size: 14px;
  color: var(--color-text-sub);
}

.sitemap-section ul li a:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
}

.footer-main {
  padding: 48px 0 32px;
}

/* 푸터 바로 위 관련사이트 배너 줄 (모든 페이지 공통, layout.js buildRelatedBanner) */
.related-banner {
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.related-banner .container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.related-banner-title {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-sub);
}

/* 로고 카드 줄: 카드가 화면 안에 다 들어가면 가운데 정렬,
   넘치면 layout.js가 목록을 한 번 더 이어 붙이고 .is-moving을 붙여 왼쪽으로 끊김 없이 흐르게 함
   (마우스 올림/키보드 초점 시 멈춤, '동작 줄이기' 설정이면 .is-scroll = 가로 스크롤) */
.related-marquee {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.related-track {
  display: flex;
  width: max-content;
}

.related-banner-list {
  list-style: none;
  display: flex;
  gap: 12px;
}

.related-marquee.is-moving {
  justify-content: flex-start;
}

/* 이어 붙인 두 목록의 간격을 카드 간격과 같게 -> translateX(-50%)에서 이음매 없이 반복 */
.related-marquee.is-moving .related-banner-list {
  padding-right: 12px;
}

.related-marquee.is-moving .related-track {
  animation: related-marquee var(--marquee-duration, 40s) linear infinite;
}

.related-marquee.is-moving:hover .related-track,
.related-marquee.is-moving:focus-within .related-track {
  animation-play-state: paused;
}

.related-marquee.is-scroll {
  justify-content: flex-start;
  overflow-x: auto;
  padding-bottom: 6px; /* 스크롤바와 카드 테두리 간격 */
}

@keyframes related-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .related-marquee.is-moving .related-track {
    animation: none;
  }
}

.related-banner-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 72px;
  padding: 12px 16px;
  border: 1px solid var(--related-card-border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--color-text);
  word-break: keep-all;
  transition: border-color 0.2s;
}

.related-banner-list a img {
  max-height: 40px;
  max-width: 100%;
  object-fit: contain;
}

.related-banner-list .related-card-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-banner-list a:hover,
.related-banner-list a:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.related-banner-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  font-size: 13px;
  color: var(--color-text-sub);
}

.footer-links a:hover {
  color: var(--color-primary);
}

.footer-body {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
}

.footer-info dt {
  color: var(--color-text-sub);
  font-weight: 600;
}

.footer-info dd a {
  color: var(--color-text);
}

.footer-org {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.footer-info .copy {
  margin-top: 16px;
  font-size: 12px;
  color: var(--color-text-sub);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .quick-cards .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 960px) {
  /* 태블릿·휴대폰은 글자가 화면 폭 대부분을 쓰므로 막을 전체에 고르게 깔아줌 */
  .hero-slides:has(img)::after {
    background: var(--hero-shade-mobile);
  }

  .gnb {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    flex-direction: column;
    padding: 12px;
    overflow-y: auto;
    translate: 0 -110%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    justify-content: flex-start;
  }

  .gnb.is-open {
    translate: 0 0;
    opacity: 1;
    visibility: visible;
  }

  .gnb > li > a {
    padding: 16px 12px;
    border-bottom: 1px solid var(--color-border);
  }

  .gnb .submenu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    translate: none;
    display: none;
    background: var(--color-bg-soft);
  }

  .gnb > li.is-open .submenu {
    display: block;
  }

  .gnb-toggle {
    display: flex;
  }

  .info-boxes .container {
    grid-template-columns: 1fr;
  }

  .quick-cards .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 휴대폰(767px 이하): 고정 퀵메뉴를 '맨 위로' 원형 버튼 하나로 줄임
   - 임상연구 검색·학술행사 항목은 숨김 (학술행사는 상단 메뉴 알림 > 학술행사, CRIS는 메인 검색 띠에서 이동 가능)
   - 페이지를 조금(300px) 내린 상태에서 위로 올리는 중일 때만 표시(body.to-top-ready, main.js initToTop),
     글을 읽으며 내리는 동안은 숨겨서 본문 글자를 가리지 않음. 오른쪽 아래에 작게
   - 푸터가 보이면 숨김(footer-in-view)은 768px 이상과 동일 */
@media (max-width: 767px) {
  .quick-float {
    right: 12px;
    bottom: 16px;
  }

  .quick-float ul {
    display: none;
  }

  .quick-float .to-top {
    width: 40px;
    height: 40px;
    font-size: 16px;
    opacity: 0.92;
    box-shadow: 0 6px 16px rgba(11, 79, 138, 0.25);
  }

  body:not(.to-top-ready) .quick-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 640px) {
  /* 좁은 화면: 긴 국문 기관명 때문에 메뉴 버튼이 화면 밖으로 밀리지 않도록 로고 영역을 줄임 */
  .header-inner {
    padding: 0 16px;
    gap: 12px;
  }

  .logo {
    flex-shrink: 1;
    min-width: 0;
  }

  .logo .txt {
    min-width: 0;
  }

  .logo .txt .kr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    height: 380px;
  }

  .hero-copy .container {
    padding: 0 24px;
  }

  .hero-copy h1 {
    font-size: 26px;
  }

  .hero-copy p {
    font-size: 15px;
  }

  .site-intro {
    padding: 16px 0;
  }

  .site-intro p {
    font-size: 14px;
  }

  .hero-arrow {
    display: none;
  }

  .quick-cards .grid {
    grid-template-columns: 1fr;
  }

  .footer-body {
    flex-direction: column;
  }

  .related-banner .container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .related-banner-list a {
    width: 140px;
    height: 60px;
    padding: 10px 12px;
    font-size: 12px;
  }

  .related-banner-list a img {
    max-height: 32px;
  }


  .page-content-body {
    font-size: 16px;
  }

  .page-content-body table {
    font-size: 13px;
  }

  .page-content-body th,
  .page-content-body td {
    padding: 9px 10px;
  }
}