/* ============================================
   서브페이지 공통 — 서브탑 (layout/subtop.php)
   Figma: Banner 1920x800 (헤더 100px 포함)
   ============================================ */

.sub-top {
  position: relative;
  width: 100%;
  padding-top: 100px; /* fixed header 높이 */
  background: var(--white);
  overflow: hidden;
}

.sub-top-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 87.5%;
  max-width: 1680px;
  margin: 0 auto;
  padding: min(1.77vw, 34px) 0 min(1.72vw, 33px);
}

/* ---------- 타이틀 ---------- */
.sub-top-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sub-top-subtitle {
  margin-bottom: -8px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.4px;
  color: var(--brand-100);
}

.sub-top-title {
  font-weight: 700;
  font-size: var(--font-60);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
}

/* ---------- 브레드크럼 ---------- */
.sub-top-breadcrumb {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  border: 1px solid var(--brand-300);
  border-radius: 12px;
  background: var(--brand-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.sub-top-breadcrumb-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sub-top-breadcrumb-home img {
  width: 100%;
  height: 100%;
}

.sub-top-breadcrumb-item {
  position: relative;
}

.sub-top-breadcrumb-toggle {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  white-space: nowrap;
}

.sub-top-breadcrumb-depth1 .sub-top-breadcrumb-toggle {
  color: var(--gray-mid-4);
}

.sub-top-breadcrumb-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sub-top-breadcrumb-toggle svg path {
  fill: var(--gray-mid-1);
}

.sub-top-breadcrumb-depth1 .sub-top-breadcrumb-toggle svg path {
  fill: var(--gray-mid-4);
}

.sub-top-breadcrumb-toggle span {
  transition: color 0.25s ease;
}

.sub-top-breadcrumb-toggle svg path {
  transition: fill 0.25s ease;
}

.sub-top-breadcrumb-item.is-open .sub-top-breadcrumb-toggle svg {
  transform: rotate(180deg);
}

/* 2뎁스 열림 상태: 카테고리명 · 화살표 · 탭메뉴 동시 제어 */
.sub-top-breadcrumb-depth2.is-open .sub-top-breadcrumb-toggle span {
  color: var(--brand-point-sky-blue);
}

.sub-top-breadcrumb-depth2.is-open .sub-top-breadcrumb-toggle svg {
  transform: rotate(180deg);
}

.sub-top-breadcrumb-depth2.is-open .sub-top-breadcrumb-toggle svg path {
  fill: var(--brand-point-sky-blue);
}

.sub-top-breadcrumb-depth2.is-open .sub-top-breadcrumb-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* 드롭다운 */
.sub-top-breadcrumb-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: calc(100% + 40px);
  padding: 12px 0;
  border: 1px solid var(--brand-300);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(7, 30, 46, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.sub-top-breadcrumb-item.is-open .sub-top-breadcrumb-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.sub-top-breadcrumb-menu-link {
  display: block;
  padding: 8px 20px;
  font-size: var(--font-16);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sub-top-breadcrumb-menu-link:hover {
  background: var(--brand-bg);
}

.sub-top-breadcrumb-menu-link.is-active {
  font-weight: 600;
  color: var(--brand-point-sky-blue);
}

/* ---------- 비주얼 ---------- */
.sub-top-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 460;
  overflow: hidden;
}

/* PC / 모바일 이미지 분기 — lib/menu.php 의 image / imageM (파일명 뒤 _m) */
.sub-top-visual-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sub-top-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 하단 중앙 흰색 봉우리 + 마우스 아이콘 (이미지가 페이지마다 바뀌므로 CSS로 처리) */
.sub-top-scroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 260px;
  height: 77px;
  padding-bottom: 17px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 77' preserveAspectRatio='none'%3E%3Cpath d='M0 77C45 77 80 0 130 0S215 77 260 77Z' fill='%23fff'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.sub-top-scroll-btn {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 8px 16px 0; /* 클릭 영역 확보 */
  border: 0;
  background: none;
  cursor: pointer;
}

.sub-top-scroll-icon {
  display: block;
  width: 24px;
  height: 40px;
  animation: sub-top-scroll-bounce 1.6s ease-in-out infinite;
  transition: opacity 0.2s ease;
}

.sub-top-scroll-btn:hover .sub-top-scroll-icon {
  opacity: 0.6;
}

@keyframes sub-top-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .sub-top-scroll-icon {
    animation: none;
  }
}

/* ---------- 모바일 (시안 없음 — PC 비율 축소) ---------- */
@media (max-width: 1024px) {
  .sub-top {
    padding-top: 80px;
  }

  .sub-top-inner {
    gap: 12px;
    width: 100%;
    padding: 24px 20px;
  }

  .sub-top-subtitle {
    margin-bottom: 0;
    font-size: 17px;
  }

  .sub-top-title {
    font-size: 28px;
  }

  .sub-top-breadcrumb {
    gap: 12px;
    max-width: 100%;
    padding: 8px 14px;
    border-radius: 8px;
  }

  /* 긴 메뉴명은 말줄임 (2뎁스 우선 줄임) */
  .sub-top-breadcrumb-item,
  .sub-top-breadcrumb-toggle {
    min-width: 0;
  }

  .sub-top-breadcrumb-toggle {
    max-width: 100%;
  }

  .sub-top-breadcrumb-depth1 {
    flex-shrink: 0;
  }

  .sub-top-breadcrumb-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub-top-breadcrumb-home {
    width: 16px;
    height: 16px;
  }

  .sub-top-breadcrumb-toggle {
    gap: 10px;
    font-size: 16px;
  }

  .sub-top-breadcrumb-toggle svg {
    width: 14px;
    height: 14px;
  }

  /* 모바일: 드롭다운을 브레드크럼 바 전체 폭으로 펼침 (긴 메뉴명 넘침 방지) */
  .sub-top-breadcrumb-item {
    position: static;
  }

  .sub-top-breadcrumb-menu {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 0;
    padding: 8px 0;
    border-radius: 8px;
    transform: translateY(-6px);
  }

  .sub-top-breadcrumb-item.is-open .sub-top-breadcrumb-menu {
    transform: translateY(0);
  }

  .sub-top-breadcrumb-menu-link {
    padding: 6px 14px;
    font-size: 13px;
    white-space: normal;
    word-break: keep-all;
  }

  .sub-top-visual {
    aspect-ratio: 360 / 240;
  }

  .sub-top-scroll {
    width: 140px;
    height: 44px;
    padding-bottom: 8px;
  }

  .sub-top-scroll-icon {
    width: 14px;
    height: 24px;
  }
}


/* ============================================
   영상 목록 — For Patients (pages/for-patients/surgery.php)
   Figma: Section 520:7055 (1920 기준, 콘텐츠 폭 1440)
   ============================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.video-list {
  background: var(--white);
  padding: min(6.25vw, 120px) 0;
}

.video-list-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

/* ---------- 섹션 헤드 (영상 목록·게시판 목록 공용) ---------- */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.sec-head-subtitle {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #555;
}

.sec-head-title {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
  word-break: keep-all;
}

.sec-head-desc {
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #555;
  word-break: keep-all;
}

/* ---------- 툴바: 정렬 ---------- */
.video-list-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.video-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.video-list-sort {
  display: flex;
  align-items: center;
}

.video-list-sort li {
  display: flex;
  align-items: center;
}

.video-list-sort li + li::before {
  content: "";
  display: block;
  width: 1px;
  height: 12px;
  margin: 0 20px;
  background: var(--gray-mid-4);
}

.video-list-sort-link {
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #666;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.video-list-sort-link:hover {
  color: var(--gray-mid-1);
}

.video-list-sort-link.is-active {
  font-weight: 700;
  color: var(--gray-mid-1);
}

/* ---------- 검색 폼 (layout/search.php, 게시판 공용) ---------- */
.board-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(19.79vw, 380px);
  min-width: 260px;
  height: 60px;
  padding: 0 20px;
  border-bottom: 2px solid var(--gray-mid);
  transition: border-color 0.2s ease;
}

.board-search:focus-within {
  border-bottom-color: var(--brand-point-sky-blue);
}

.board-search-input {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 500;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.board-search-input::placeholder {
  color: #555;
  opacity: 1;
}

.board-search-input::-webkit-search-cancel-button,
.board-search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.board-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.board-search-btn img {
  width: 100%;
  height: 100%;
}

/* ---------- 카드 그리드 ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: min(3.125vw, 60px);
  width: 100%;
}

.video-list-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  line-height: 1.6;
  text-align: center;
  color: #666;
}

.video-card-link {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
}

.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 467 / 262;
  border: 1px solid #d7dce5;
  border-radius: 11px;
  background: #cfcfcf;
  overflow: hidden;
}

.video-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* 호버: 어둡게 + 재생 아이콘 (시안 첫 카드 상태) */
.video-card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.video-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(5.2vw, 100px);
  height: min(5.2vw, 100px);
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.video-card-play img {
  width: 91%;
  height: auto;
  margin-left: 6%; /* 삼각형 시각 중심 보정 */
}

.video-card-link:hover .video-card-thumb::after,
.video-card-link:focus-visible .video-card-thumb::after {
  opacity: 1;
}

.video-card-link:hover .video-card-play,
.video-card-link:focus-visible .video-card-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.video-card-link:hover .video-card-thumb-img {
  transform: scale(1.04);
}

.video-card-duration {
  position: absolute;
  right: 11px;
  bottom: 11px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  white-space: nowrap;
}

.video-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.video-card-title {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: var(--font-24);
  line-height: 1.54;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.video-card-link:hover .video-card-title {
  color: var(--brand-point-sky-blue);
}

.video-card-channel {
  display: block;
  max-width: 100%;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card-date {
  display: block;
  font-size: var(--font-16);
  line-height: 1.25;
  color: #999;
}

/* ---------- 페이지네이션 (layout/paging.php, 게시판 공용) ---------- */
.board-paging {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.5vw, 45px);
}

.board-paging-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.board-paging-btn img {
  width: 100%;
  height: 100%;
}

.board-paging-btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.board-paging-list {
  display: flex;
  align-items: center;
  gap: min(0.5vw, 8px);
}

.board-paging-num,
.board-paging-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 37px;
  height: 27px;
  padding: 0 4px;
  border-bottom: 2px solid transparent;
  font-size: var(--font-18);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--black);
  transition: color 0.2s ease, border-color 0.2s ease;
}

a.board-paging-num:hover {
  color: var(--brand-point-sky-blue);
}

.board-paging-num.is-current {
  border-bottom-color: var(--black);
}

/* ---------- 모바일 (시안 없음 — PC 비율 축소) ---------- */
@media (max-width: 1024px) {
  .video-list {
    padding: 60px 0;
  }

  .video-list-inner {
    gap: 28px;
    width: 100%;
    padding: 0 20px;
  }

  .sec-head-subtitle {
    margin-bottom: 4px;
    font-size: 17px;
  }

  .sec-head-title {
    font-size: 28px;
  }

  .sec-head-desc {
    font-size: 17px;
  }

  .video-list-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .video-list-sort {
    justify-content: center;
  }

  .video-list-sort li + li::before {
    margin: 0 14px;
  }

  .video-list-sort-link {
    font-size: 15px;
  }

  .board-search {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 12px;
  }

  .board-search-input {
    font-size: 14px;
  }

  .video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
  }

  .video-card-link {
    gap: 12px;
  }

  .video-card-thumb {
    border-radius: 8px;
  }

  .video-card-play {
    width: 56px;
    height: 56px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .video-card-duration {
    right: 8px;
    bottom: 8px;
    padding: 3px 6px;
    font-size: 12px;
  }

  .video-card-body {
    gap: 4px;
  }

  .video-card-title {
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .video-card-channel {
    font-size: 13px;
  }

  .video-card-date {
    font-size: 12px;
  }

  .board-paging {
    gap: 12px;
  }

  .board-paging-list {
    gap: 2px;
  }

  .board-paging-num,
  .board-paging-ellipsis {
    min-width: 30px;
    font-size: 14px;
  }
}

@media (max-width: 640px) {
  .video-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }

  .board-paging-first,
  .board-paging-last {
    display: none;
  }
}


/* ============================================
   게시판 목록 — Media (pages/media/_list.php: 공지/보도/행사)
   Figma: 286:7846 (1920 기준, 콘텐츠 폭 1440, 3열 × 2행)
   섹션 헤드는 .sec-head-*, 검색은 .board-search-*, 페이징은 .board-paging-* 공용
   ============================================ */

.board-list {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.board-list-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

.board-list-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: min(4.17vw, 80px); /* 그리드 ↔ 페이지네이션 120px (inner gap 40 포함) */
}

/* ---------- 툴바: 건수 + 검색 ---------- */
.board-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  z-index: 5;
}

.board-list-toolbar-left {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.board-list-count {
  font-weight: 700;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #666;
  white-space: nowrap;
}

.board-list-count strong {
  font-weight: 700;
  color: var(--brand-100);
}

/* ---------- 목록 비동기 교체 껍데기 (공용) ----------
   필터·정렬·검색·페이지가 바뀌면 js/sub.js(initAjaxList)가 이 안만 갈아끼운다.
   display:contents 라 자식이 바깥 flex 컨테이너의 항목으로 그대로 남는다 —
   껍데기를 하나 더 두어도 세로 간격(gap)이 달라지지 않는다. */
.ajax-swap {
  display: contents;
}

/* 조각을 받아오는 동안 (display:contents 라 자기 자신에는 스타일이 안 먹는다 — 자식에 건다) */
.ajax-swap.is-loading > * {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.15s ease;
}


/* ---------- 목록 필터 칩 (미디어 보도 — Figma 286:8538) ----------
   고르기 전에는 "카테고리 ⌄" 드롭다운, 고르고 나면 "정보성 ✕" 선택 칩으로 바뀐다.
   메뉴 항목은 진짜 링크(?cat=…)라 JS 없이도 동작한다 — js/sub.js 는 펼침만 맡는다. */

.board-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-filter-item {
  position: relative;
}

/* 드롭다운 칩과 선택 칩이 같은 껍데기를 쓴다 (시안: 좌 20 / 우 12, 높이는 글줄 30 + 상하 4) */
.board-filter-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px 4px 20px;
  border: 1px solid var(--gray-mid);
  border-radius: 200px;
  background: var(--white);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.board-filter-toggle:hover,
.board-filter-item.is-open .board-filter-chip {
  border-color: var(--brand-100);
  color: var(--brand-100);
}

.board-filter-caret {
  flex: none;
  width: 24px;
  height: 24px;
}

.board-filter-caret path {
  fill: currentColor;
}

.board-filter-item.is-open .board-filter-caret {
  transform: rotate(180deg);
}

/* 선택된 필터 — 시안의 파란 칩. ✕ 를 누르면 그 조건만 빠진다. */
.board-filter-chip.is-selected {
  border-color: var(--brand-100);
  color: var(--brand-100);
}

.board-filter-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.board-filter-clear:hover {
  opacity: 0.6;
}

.board-filter-clear svg {
  width: 16px;
  height: 16px;
}

.board-filter-clear path {
  fill: currentColor;
}

/* ---------- 펼침 목록 ---------- */
.board-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  min-width: 100%;
  padding: 8px 0;
  border: 1px solid var(--gray-mid);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 8px 20px rgba(7, 30, 46, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.board-filter-item.is-open .board-filter-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.board-filter-menu-link {
  display: block;
  padding: 6px 20px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-500);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.board-filter-menu-link:hover {
  background: var(--brand-bg);
  color: var(--brand-deep-2);
}

/* ---------- 카드 그리드 ---------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: min(3.125vw, 60px);
  width: 100%;
}

.board-list-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  line-height: 1.6;
  text-align: center;
  color: #666;
}

.board-card-link {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 100%;
}

.board-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 467 / 329;
  border: 1px solid #d7dce5;
  border-radius: 11px;
  background: #cfcfcf;
  overflow: hidden;
}

.board-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.board-card-link:hover .board-card-thumb-img {
  transform: scale(1.04);
}

.board-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* 미디어 보도 카드의 카테고리 칩 (Figma 304:8587) */
.board-card-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--brand-sky-light);
  border-radius: 200px;
  background: var(--white);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
  white-space: nowrap;
}

.board-card-title {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: var(--font-24);
  line-height: 1.54;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.board-card-link:hover .board-card-title {
  color: var(--brand-point-sky-blue);
}

.board-card-place {
  display: block;
  max-width: 100%;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-card-desc {
  display: block;
  width: 100%;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-card-date {
  display: block;
  font-size: var(--font-16);
  line-height: 1.25;
  color: #999;
}

/* ---------- 모바일 (시안 없음 — PC 비율 축소) ---------- */
@media (max-width: 1024px) {
  .board-list {
    padding: 60px 0 80px;
  }

  .board-list-inner {
    gap: 28px;
    width: 100%;
    padding: 0 20px;
  }

  .board-list-body {
    margin-bottom: 12px;
  }

  .board-list-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .board-list-toolbar-left {
    gap: 12px;
  }

  /* 좁아지면 칩을 접어 내린다. overflow 로 가로 스크롤을 주면 안 된다 —
     스크롤 컨테이너가 되면서 absolute 로 띄운 펼침 목록까지 잘라 먹는다. */
  .board-filter {
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
  }

  .board-filter-chip {
    padding: 2px 8px 2px 14px;
    font-size: 14px;
    line-height: 26px;
  }

  .board-filter-caret,
  .board-filter-clear {
    width: 20px;
    height: 20px;
  }

  .board-filter-menu-link {
    padding: 6px 14px;
    font-size: 14px;
  }

  .board-list-count {
    font-size: 15px;
  }

  .board-card-chip {
    padding: 0 10px;
    font-size: 13px;
    line-height: 24px;
  }

  .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
  }

  .board-card-link {
    gap: 12px;
  }

  .board-card-thumb {
    border-radius: 8px;
  }

  .board-card-body {
    gap: 4px;
  }

  .board-card-title {
    font-size: 16px;
    line-height: 1.5;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .board-card-place {
    font-size: 13px;
  }

  .board-card-desc {
    font-size: 16px;
    color: #777;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .board-card-date {
    font-size: 12px;
  }
}

@media (max-width: 640px) {
  .board-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
  }
}


/* ============================================
   문서형 본문 공통 — .doc (PPP·교육자료 등 텍스트 콘텐츠 페이지 공용)
   제목 / 문단 / 목록 / 표 / 박스 / 그림 / 참고문헌 / 의사결정 트리
   ============================================ */

.doc {
  width: 100%;
  min-width: 0;
  color: var(--gray-mid-2);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 리드·설문·참고문헌·트리 박스는 본문 폭 그대로, 그 외 본문 요소는 12px 안쪽으로 */
.doc > :not(.doc-lead):not(.doc-survey):not(.doc-refs):not(.doc-dt-top):not(.doc-dt-arrow):not(.doc-dt-act):not(.doc-dt-grid) {
  margin-left: 12px;
  margin-right: 12px;
}

.doc > * + * {
  margin-top: 20px;
}

.doc > .doc-lead + * {
  margin-top: 40px;
}

.doc > * + .doc-h3 {
  margin-top: 50px;
}

.doc > * + .doc-h4 {
  margin-top: 40px;
}

/* 제목 바로 다음 요소는 제목의 margin-bottom 만큼만 띄운다 */
.doc > .doc-h3 + *,
.doc > .doc-h4 + *,
.doc > .doc-h5 + * {
  margin-top: 0;
}

.doc > * + .doc-survey,
.doc > * + .doc-refs {
  margin-top: 40px;
}

.doc > p + p,
.doc > p + .doc-list,
.doc > .doc-lead-in + .doc-list,
.doc > .doc-list + p {
  margin-top: 12px;
}

/* ---------- 제목 ---------- */
.doc-h3,
.doc-h4 {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--black);
  border-bottom: 2px solid var(--brand-sky-light);
}

.doc-h3 {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.doc-h4 {
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.doc-h5 {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

/* ---------- 문단 ---------- */
.doc p {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.doc p b,
.doc li b {
  font-weight: 600;
  color: var(--black);
}

.doc sup {
  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
}

.doc-lead-in {
  font-weight: 600;
  color: var(--black);
}

/* ---------- 목록 ---------- */
.doc-list {
  counter-reset: doc-num;
}

.doc-list > li {
  position: relative;
  padding-left: 20px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.doc-list > li::before {
  content: "";
  position: absolute;
  top: calc(0.8em - 2px);
  left: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-deep);
}

/* 번호 목록 1. 2. 3. */
.doc-list-num > li {
  padding-left: 28px;
  counter-increment: doc-num;
}

.doc-list-num > li::before {
  content: counter(doc-num) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  font-weight: 600;
  color: var(--brand-deep);
}

/* 원문자 목록 ① ② ③ */
.doc-list-circ > li {
  padding-left: 28px;
  counter-increment: doc-num;
}

.doc-list-circ > li::before {
  content: counter(doc-num);
  top: calc(0.8em - 9px);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--brand-deep);
  border-radius: 50%;
  background: none;
  font-size: 11px;
  line-height: 1;
  color: var(--brand-deep);
}

/* li 안 중첩 목록 */
.doc-list-sub {
  margin-top: 6px;
}

.doc-list-sub > li::before {
  top: 0.8em;
  left: 4px;
  width: 6px;
  height: 1px;
  border-radius: 0;
}

/* li 안 보조 문장: – / → */
.doc-dash,
.doc-arrow {
  display: block;
  position: relative;
  margin-top: 4px;
  padding-left: 18px;
  font-size: var(--font-16);
  line-height: 1.6;
}

.doc-dash::before,
.doc-arrow::before {
  position: absolute;
  left: 0;
}

.doc-dash::before {
  content: "–";
  color: var(--gray-mid-4);
}

.doc-arrow::before {
  content: "→";
  color: var(--brand-deep);
}

/* ---------- 박스 ---------- */
.doc-lead,
.doc-note {
  padding: 20px;
  border-radius: 10px;
  background: var(--brand-bg);
}

.doc .doc-lead-title {
  margin-bottom: 12px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.doc-lead > p + p {
  margin-top: 10px;
}

.doc-note p {
  font-weight: 600;
  color: var(--brand-navy);
}

.doc-note p + p {
  margin-top: 8px;
}

/* 설문 결과 */
.doc-survey {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--brand-deep);
  border-radius: 20px;
  background: var(--brand-bg);
}

.doc-survey-tag {
  align-self: flex-start;
  padding: 4px 20px;
  border-radius: 200px;
  background: var(--brand-deep-2);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--white);
}

.doc-survey p + p {
  margin-top: 4px;
}

/* 참고문헌 */
.doc-refs {
  padding-top: 12px;
  border-top: 1px solid var(--gray-mid);
}

.doc-refs p {
  padding-left: 1.4em;
  text-indent: -1.4em;
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
}

.doc-refs p + p {
  margin-top: 6px;
}

/* ---------- 표 ---------- */
.doc-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
}

.doc-table caption {
  caption-side: top;
  margin-bottom: 12px;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  color: var(--black);
}

.doc-table th,
.doc-table td {
  height: 60px;
  padding: 12px 32px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}

.doc-table th {
  border-top: 2px solid var(--brand-100);
  background: var(--brand-bg);
  font-weight: 600;
  color: var(--brand-deep);
}

/* 2단 헤더: 상위 칸 사이 세로선, 하위 칸 위 가로선 */
.doc-table thead tr + tr th {
  height: 40px;
  border-top: 1px solid var(--brand-100);
}

.doc-table th[rowspan] {
  border-right: 1px solid var(--brand-100);
}

.doc-table thead tr + tr th + th {
  border-left: 1px solid var(--brand-100);
}

.doc-table td {
  border-top: 1px solid var(--brand-sky-light);
  background: var(--white);
  color: var(--gray-mid-2);
}

.doc-table tbody tr:last-child td,
.doc-table td[rowspan] {
  border-bottom: 1px solid var(--brand-sky-light);
}

.doc-table td.is-key {
  font-weight: 600;
}

.doc-table td.is-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doc-table-grid td {
  font-weight: 500;
  color: var(--black);
}

/* ---------- 그림 ---------- */
.doc-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.doc-fig img {
  width: 100%;
  max-width: 889px;
  height: auto;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
}

.doc-fig figcaption {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-mid-4);
}

/* ---------- 항목 : 값 ---------- */
.doc-kv {
  border-top: 2px solid var(--brand-100);
}

.doc-kv > div {
  display: flex;
  gap: 20px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--brand-300);
}

.doc-kv dt {
  flex-shrink: 0;
  min-width: 200px;
  font-weight: 600;
  color: var(--black);
}

.doc-kv dd {
  color: var(--gray-mid-2);
}

/* ---------- 의사결정 트리 ---------- */
.doc-dt-top {
  padding: 20px;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--white);
  text-align: center;
}

.doc-dt-top b {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  font-size: var(--font-20);
  color: var(--black);
}

.doc-dt-top div {
  color: var(--gray-mid-2);
}

.doc-dt-arrow {
  width: 1px;
  height: 24px;
  margin: 0 auto;
  background: var(--brand-200);
}

.doc > * + .doc-dt-arrow,
.doc > .doc-dt-arrow + * {
  margin-top: 0;
}

.doc-dt-act {
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--brand-bg);
  text-align: center;
}

.doc-dt-act span {
  display: block;
  font-weight: 600;
  color: var(--brand-navy);
}

.doc-dt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.doc-dt-col {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.doc-dt-head {
  padding: 12px 16px;
  background: var(--brand-deep);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
}

.doc-dt-body {
  padding: 12px 16px;
  border-bottom: 1px solid var(--brand-300);
  font-size: var(--font-16);
  color: var(--gray-mid-2);
}

.doc-dt-actions {
  padding: 12px 16px;
  font-size: var(--font-16);
  color: var(--gray-mid-2);
}

.doc-dt-actions span {
  display: block;
  position: relative;
  padding-left: 12px;
}

.doc-dt-actions span::before {
  content: "·";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--brand-deep);
}

/* ---------- 모바일 ---------- */
@media (max-width: 1024px) {
  .doc,
  .doc p,
  .doc-list > li,
  .doc-table th,
  .doc-table td,
  .doc-survey-tag,
  .doc-dt-top div,
  .doc-dt-head {
    font-size: 16px;
  }

  .doc > :not(.doc-lead):not(.doc-survey):not(.doc-refs):not(.doc-dt-top):not(.doc-dt-arrow):not(.doc-dt-act):not(.doc-dt-grid) {
    margin-left: 0;
    margin-right: 0;
  }

  .doc > .doc-lead + * {
    margin-top: 28px;
  }

  .doc > * + .doc-h3 {
    margin-top: 36px;
  }

  .doc > * + .doc-h4,
  .doc > * + .doc-survey,
  .doc > * + .doc-refs {
    margin-top: 28px;
  }

  .doc-h3,
  .doc-h4 {
    font-size: 20px;
  }

  .doc-h3 {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .doc-h5,
  .doc .doc-lead-title,
  .doc-dt-top b {
    font-size: 17px;
  }

  .doc-dash,
  .doc-arrow,
  .doc-refs p,
  .doc-fig figcaption,
  .doc-dt-body,
  .doc-dt-actions,
  .doc-table caption {
    font-size: 13px;
  }

  .doc-lead,
  .doc-note {
    padding: 20px 12px;
  }

  .doc-survey,
  .doc-dt-top {
    padding: 16px;
  }

  .doc-survey {
    border-radius: 12px;
  }

  .doc-survey-tag {
    padding: 2px 14px;
    line-height: 24px;
  }

  .doc-table {
    min-width: 560px;
  }

  .doc-table th,
  .doc-table td {
    height: 48px;
    padding: 10px 16px;
  }

  .doc-kv > div {
    flex-direction: column;
    gap: 4px;
  }

  .doc-kv dt {
    min-width: 0;
  }

  .doc-dt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .doc-dt-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================================
   PPP — For Doctors (pages/for-doctors/ppp.php)
   좌측 목차(검색 + INDEX) + 우측 본문(.doc)
   ============================================ */

.ppp {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.ppp-inner {
  display: flex;
  align-items: flex-start;
  gap: min(3.125vw, 60px);
  width: 87.5%;
  max-width: 1680px;
  margin: 0 auto;
}

/* ---------- 좌측 목차 ---------- */
.ppp-side {
  position: sticky;
  top: 120px; /* fixed header 100px + 여유 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
  width: min(19.79vw, 380px);
}

.ppp-side .board-search {
  width: 100%;
  min-width: 0;
}

.ppp-index-toggle,
.ppp-scrim {
  display: none;
}

.ppp-index {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 220px);
  padding-bottom: 12px;
  background: var(--brand-bg-light);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-200) transparent;
}

.ppp-index::-webkit-scrollbar {
  width: 3px;
}

.ppp-index::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: var(--brand-200);
}

.ppp-index-head {
  padding: 12px 20px;
  border-bottom: 2px solid var(--brand-point-sky-blue);
  background: var(--brand-300);
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.ppp-index-group {
  display: flex;
  flex-direction: column;
}

.ppp-index-group + .ppp-index-group::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 20px 12px;
  background: var(--gray-mid);
}

.ppp-index-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 20px;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
  transition: opacity 0.2s ease;
}

.ppp-index-title:hover {
  opacity: 0.7;
}

.ppp-index-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 40px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  transition: color 0.2s ease;
}

.ppp-index-num {
  flex-shrink: 0;
  width: 28px;
  color: var(--gray-mid);
  transition: color 0.2s ease;
}

.ppp-index-link:hover {
  color: var(--brand-100);
}

.ppp-index-link.is-active {
  font-weight: 600;
  color: var(--brand-100);
}

.ppp-index-link.is-active .ppp-index-num {
  color: var(--brand-100);
}

/* 목차 검색 필터 (js/sub.js initPppIndex) */
.ppp-index-link.is-hidden,
.ppp-index-group.is-hidden {
  display: none;
}

.ppp-index-empty {
  padding: 12px 20px;
  font-size: var(--font-16);
  color: var(--gray-mid-4);
}

/* ---------- 우측 본문 ---------- */
.ppp-main {
  flex: 1 1 0;
  min-width: 0;
}

/* 항목별 패널: 전부 렌더해 두고 활성 패널만 보인다 (js/sub.js initPppIndex) */
.ppp-panel {
  display: none;
}

.ppp-panel.is-active {
  display: block;
}

.ppp-head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 4px solid var(--brand-point-sky-blue);
}

.ppp-crumb {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-3);
}

.ppp-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ppp-eyebrow {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.ppp-title {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
}

/* ---------- 모바일: 서브탑 아래 현재 항목 바 + 펼침 목차 패널 ---------- */
@media (max-width: 1024px) {
  .ppp {
    position: relative;
    padding: 0 0 80px;
  }

  .ppp-inner {
    position: relative;
    flex-direction: column;
    align-items: stretch; /* flex-start 유지 시 본문이 표 min-width 만큼 넓어져 가로 스크롤 생김 */
    gap: 0;
    width: 100%;
    padding: 30px 20px 0;
  }

  /* 현재 항목 바 — 스크롤을 내리면 고정 헤더(80px) 바로 아래에 붙어 같이 따라온다.
     sticky 의 기준 블록은 .ppp 라서 PPP 섹션을 벗어나면 저절로 떨어진다.

     평소 z-index 는 본문(.ppp-inner) 위로만 올리고 헤더(999) 아래에 둔다 —
     모바일 메뉴(.mobile-nav)가 헤더 안에 들어 있어 헤더의 스태킹 컨텍스트에 갇히는 탓에,
     이 바가 상시로 999 를 넘으면 햄버거 메뉴를 열었을 때 그 위로 뚫고 올라온다.
     펼친 동안(.is-open)만 딤 위로 올리고, 햄버거를 누르면 js/sub.js 가 그 상태를 꺼서 되돌린다. */
  .ppp-index-toggle {
    position: sticky;
    top: 80px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    border-bottom: 1px solid var(--gray-mid);
    background: var(--white);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: var(--brand-100);
    cursor: pointer;
  }

  .ppp-index-toggle-no {
    flex-shrink: 0;
    margin-right: 2px;
  }

  .ppp-index-toggle-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ppp-index-toggle-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transform: rotate(-90deg);
    transition: transform 0.25s ease;
  }

  /* 펼친 동안에는 딤(1000) 위로 — 바가 밝게 남아 눌러서 그대로 닫을 수 있다.
     목차 패널(1001)과는 서로 겹치지 않는다 (패널이 바 아래에서 시작한다). */
  .ppp-index-toggle.is-open {
    z-index: 1001;
  }

  .ppp-index-toggle.is-open .ppp-index-toggle-icon {
    transform: rotate(90deg);
  }

  /* 목차 패널: 바 바로 아래에 본문을 덮고 펼쳐진다.
     바가 sticky 가 되면서 화면 위 y 좌표가 스크롤에 따라 달라지므로, 패널은 fixed 로 두고
     top 은 js/sub.js(placeSide)가 바의 현재 아래쪽 좌표로 맞춰 준다. */
  .ppp-side {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: none;
    width: 100%;
    gap: 0;
    background: var(--white);
    box-shadow: 0 12px 24px rgba(7, 30, 46, 0.12);
  }

  .ppp-side.is-open {
    display: flex;
  }

  .ppp-side .board-search {
    display: none;
  }

  /* 헤더(z-index 999)까지 덮는다 */
  .ppp-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
  }

  .ppp-scrim.is-open {
    display: block;
  }

  .ppp-index {
    gap: 14px;
    max-height: min(540px, 70vh);
    padding: 12px 0;
    background: var(--white);
  }

  .ppp-index-head {
    display: none;
  }

  .ppp-index-group {
    padding: 0 10px;
  }

  .ppp-index-group + .ppp-index-group::before {
    margin: 0 10px 14px;
  }

  .ppp-index-title {
    padding: 8px 20px;
    font-size: 20px;
  }

  .ppp-index-link {
    gap: 4px;
    padding: 8px 40px;
    font-size: 16px;
  }

  .ppp-index-empty {
    padding: 8px 20px;
  }

  /* 본문 */
  .ppp-head {
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
  }

  .ppp-crumb,
  .ppp-eyebrow {
    font-size: 13px;
    line-height: 1.6;
  }

  .ppp-eyebrow {
    font-weight: 400;
  }

  .ppp-title-wrap {
    gap: 4px;
  }

  .ppp-title {
    font-size: 28px;
    line-height: 1.4;
  }
}


/* ============================================
   필 탭 — 목록 상단 카테고리 전환 (공용)
   <nav class="tab-pills"><a class="tab-pill is-active">…</a><a class="tab-pill">…</a></nav>
   ============================================ */

.tab-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 32px;
  border: 1px solid var(--gray-mid);
  border-radius: 200px;
  background: var(--white);
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-mid-4);
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.tab-pill:hover {
  color: var(--brand-100);
  border-color: var(--brand-100);
}

.tab-pill.is-active {
  border-color: var(--brand-100);
  background: var(--brand-bg);
  font-weight: 600;
  color: var(--brand-100);
}

@media (max-width: 1024px) {
  .tab-pills {
    gap: 8px;
  }

  .tab-pill {
    padding: 8px 16px;
    font-size: 17px;
  }
}


/* ============================================
   ICL Education — For Doctors (pages/for-doctors/education.php)
   섹션 헤드(.sec-head) + 필 탭(.tab-pills) + 정렬(.video-list-sort)/검색(.board-search)
   + 카드 그리드(.board-grid / .board-card-*) + 페이지네이션(.board-paging)
   ============================================ */

.edu {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.edu-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

.edu-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  margin-bottom: min(4.17vw, 80px); /* 그리드 ↔ 페이지네이션 120px (inner gap 40 포함) */
}

.list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.edu-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  line-height: 1.6;
  text-align: center;
  color: var(--gray-mid-3);
}

/* ---------- 모바일 ---------- */
@media (max-width: 1024px) {
  .edu {
    padding: 80px 0;
  }

  .edu-inner {
    gap: 40px;
    width: 100%;
    padding: 0 20px;
  }

  .edu-inner .sec-head + .tab-pills {
    margin-top: -20px; /* 헤드 ↔ 탭 20px */
  }

  .edu-body {
    gap: 12px;
    margin-bottom: 40px; /* 그리드 ↔ 페이지네이션 80px (inner gap 40 포함) */
  }

  /* 검색창이 위, 정렬이 아래 */
  .list-toolbar {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 30px;
  }

  .list-toolbar .video-list-sort {
    justify-content: flex-start;
  }

  .list-toolbar .video-list-sort li + li::before {
    margin: 0 8px;
  }

  .list-toolbar .video-list-sort-link {
    font-size: 17px;
  }

  .list-toolbar .video-list-sort-link.is-active {
    font-weight: 600;
  }

  .list-toolbar .board-search {
    border-bottom-color: #eee;
  }

  .list-toolbar .board-search-input {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
  }

  .list-toolbar .board-search-input::placeholder {
    color: var(--gray-mid-3);
  }

  .edu .board-grid {
    row-gap: 40px;
  }

  .edu .board-card-link {
    gap: 16px;
  }

  .edu .board-card-title {
    font-size: 17px;
    line-height: 1.6;
    white-space: nowrap;
    display: block;
  }

  .edu .board-card-date {
    font-size: 16px;
    line-height: 1.6;
  }
}

@media (max-width: 640px) {
  .edu .board-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ============================================
   게시글 상세 — 공용 (pages/for-doctors/education-view.php 등)
   제목·날짜·조회수 행 + 웹에디터 본문 + 목록으로 돌아가기
   본문(.board-view-body)은 에디터 출력이므로 기본 글자값과 이미지 폭 제한만 둔다
   ============================================ */

.board-view {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.board-view-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

.board-view-article {
  width: 100%;
}

/* ---------- 제목 행 ---------- */
.board-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 40px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--gray-mid);
}

.board-view-title {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
}

.board-view-meta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  white-space: nowrap;
}

.board-view-meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  vertical-align: middle;
  background: var(--gray-mid);
}

/* ---------- 본문 (웹에디터) ---------- */
.board-view-body {
  padding: 50px 40px;
  border-bottom: 1px solid var(--gray-mid);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.board-view-body img,
.board-view-body video,
.board-view-body iframe {
  max-width: 100%;
  height: auto;
}

.board-view-body img {
  display: inline-block;
}

.board-view-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  line-height: 1.6;
  text-align: center;
  color: var(--gray-mid-3);
}

/* ---------- 목록으로 돌아가기 ---------- */
.board-view-foot {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 8px 8px 8px 28px;
  border: 1px solid #e6e6e6;
  border-radius: 230px;
  background: var(--white);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: nowrap;
  transition: border-color 0.2s ease;
}

.btn-arrow:hover {
  border-color: var(--black);
}

.btn-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--black);
}

.btn-arrow-icon img {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.btn-arrow:hover .btn-arrow-icon img {
  transform: rotate(90deg) translateY(-3px);
}

/* ---------- 모바일 ---------- */
@media (max-width: 1024px) {
  .board-view {
    padding: 120px 0;
  }

  .board-view-inner {
    gap: 20px;
    width: 100%;
    padding: 0 20px;
  }

  .board-view-head {
    gap: 12px;
    min-height: 44px;
    padding: 6px 12px;
  }

  .board-view-title {
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
  }

  .board-view-meta {
    font-size: 13px;
  }

  .board-view-body {
    padding: 48px 12px 40px;
    font-size: 16px;
  }

  .btn-arrow {
    gap: 12px;
    height: 60px;
    padding: 4px 6px 4px 20px;
    font-size: 17px;
  }
}

.btn-arrow-gray {
  border-color: var(--gray-mid);
}

.btn-arrow-gray:hover {
  border-color: var(--black);
}


/* ============================================
   리스트 게시판 표 — 공용 (pages/for-doctors/case.php 등)
   PC: 구분 / 제목 / 작성자 / 등록일 / 조회수 표
   MO: 행마다 태그 → 제목 → (작성자 · 날짜 | 조회수) 카드형으로 재배치
   ============================================ */

.board-table-wrap {
  width: 100%;
}

.board-table {
  width: 100%;
  border-top: 2px solid var(--gray-mid-1);
  border-collapse: collapse;
  table-layout: fixed;
}

.board-table .col-cat    { width: 178px; }
.board-table .col-author { width: 120px; }
.board-table .col-date   { width: 160px; }
.board-table .col-views  { width: 130px; }

.board-table th {
  height: 60px;
  padding: 12px 30px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--black);
  white-space: nowrap;
}

.board-table td {
  padding: 24px 30px;
  border-top: 1px solid #e6e6e6;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  vertical-align: middle;
  color: var(--gray-mid-1);
  white-space: nowrap;
}

.board-table tbody tr:last-child td {
  border-bottom: 1px solid #e6e6e6;
}

.board-table td.is-cat {
  padding: 24px 20px;
}

.board-table td.is-title {
  padding-left: 0;
  text-align: left;
  font-weight: 600;
  font-size: var(--font-20);
  color: var(--black);
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-table td.is-title a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.board-table td.is-title a:hover {
  color: var(--brand-point-sky-blue);
}

.board-table td.is-author {
  font-weight: 600;
}

.board-table td.is-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  color: var(--gray-mid-3);
}

/* 구분 태그 */
.board-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  padding: 4px 18px;
  border-radius: 8px;
  background: var(--brand-200);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-deep-2);
  white-space: nowrap;
}

/* ---------- 변형: 구분 태그가 제목 칸 안에 들어가는 표 ----------
   ICL Education › Academic Materials (Figma 315:10467)
   제목(구분 태그 + 제목) / 저자 / 발표연도 및 일자 3열 */

.board-table-edu .col-author { width: 160px; }
.board-table-edu .col-date   { width: 188px; }

.board-table-edu td.is-title {
  padding: 24px 20px;
}

.board-table-edu td.is-title a {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.board-table-edu .board-table-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 제목 앞 태그는 글자 폭에 맞춘다 (case 표처럼 138px 로 넓히지 않는다) */
.board-table-edu .board-tag {
  min-width: 0;
}

.board-table-edu td.is-author {
  font-weight: 400;
}

/* ---------- 모바일: 카드형 ---------- */
@media (max-width: 1024px) {
  .board-table {
    border-top-width: 1px;
  }

  .board-table colgroup,
  .board-table thead {
    display: none;
  }

  .board-table,
  .board-table tbody {
    display: block;
    width: 100%;
  }

  .board-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 24px 8px;
    border-bottom: 1px solid #e6e6e6;
  }

  .board-table td,
  .board-table tbody tr:last-child td {
    padding: 0;
    border: 0;
    font-size: 16px;
  }

  .board-table td.is-cat {
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
    text-align: left;
  }

  .board-table td.is-title {
    width: 100%;
    margin-bottom: 20px;
    font-size: 17px;
  }

  /* 작성자 · 날짜 | 조회수 */
  .board-table td.is-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    color: var(--gray-mid-2);
  }

  .board-table td.is-author::before {
    content: "";
    width: 24px;
    height: 24px;
    background: url("../img/icons/icon-user-round.svg") center / 24px no-repeat;
  }

  .board-table td.is-date,
  .board-table td.is-views {
    font-weight: 400;
    color: var(--gray-mid-4);
  }

  .board-table td.is-views::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 12px;
    vertical-align: middle;
    background: var(--gray-mid);
  }

  .board-table td.is-empty {
    width: 100%;
    padding: 60px 0;
    text-align: center;
  }

  .board-tag {
    min-width: 0;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 16px;
  }

  /* 태그가 제목 칸 안에 있는 표 — 태그 → 제목 순으로 쌓고, 저자 · 날짜를 한 줄에 */
  .board-table-edu td.is-title {
    padding: 0;
  }

  .board-table-edu td.is-title a {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .board-table-edu .board-table-title-text {
    white-space: normal;
    overflow: visible;
  }

  .board-table-edu td.is-date::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 12px;
    vertical-align: middle;
    background: var(--gray-mid);
  }
}


/* ============================================
   ICL Case & Complication Management — For Doctors (pages/for-doctors/case.php)
   섹션 헤드(.sec-head) + 툴바(.list-toolbar) + 표(.board-table) + 문의하기(.btn-arrow) + 페이지네이션
   ============================================ */

.case {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.case-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

.case-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-bottom: min(4.17vw, 80px); /* 버튼 ↔ 페이지네이션 120px (inner gap 40 포함) */
}

.case-action {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 1024px) {
  .case {
    padding: 80px 0;
  }

  .case-inner {
    gap: 40px;
    width: 100%;
    padding: 0 20px;
  }

  .case-body {
    gap: 12px;
    margin-bottom: 40px; /* 버튼 ↔ 페이지네이션 80px (inner gap 40 포함) */
  }

  .case-body .board-table-wrap {
    margin-bottom: 28px; /* 표 ↔ 문의하기 40px (body gap 12 포함) */
  }
}


/* ============================================
   게시글 작성 폼 — 공용 (pages/for-doctors/case-write.php 등)
   제목·카테고리 행 → 내용(웹에디터) → 첨부파일 → 게시하기
   ============================================ */

.board-write {
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.board-write-inner {
  width: 75%;
  max-width: 1440px;
  margin: 0 auto;
}

.board-form {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---------- 라벨 / 입력 ---------- */
.board-form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.board-form-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.board-form-label.is-required::after {
  content: "*";
  line-height: 1.3;
  color: var(--brand-100);
}

.board-form-input {
  width: 100%;
  padding: 20px;
  border: 1px solid #bababa;
  border-radius: 12px;
  background: var(--white);
  font-family: inherit;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.board-form-input::placeholder {
  color: var(--gray-mid-3);
  opacity: 1;
}

.board-form-input:focus {
  border: 2px solid var(--brand-100);
  padding: 19px;
  box-shadow: 0 0 6px 0 #a9d6ee;
}

/* 카테고리 선택 버튼 (radio) */
.board-form-choices {
  display: flex;
  gap: 12px;
  width: 100%;
}

.board-form-choice {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

.board-form-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.board-form-choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  border: 1px solid #bababa;
  border-radius: 12px;
  background: var(--white);
  font-size: var(--font-18);
  line-height: 1.6;
  color: #5c5c5c;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.board-form-choice input:checked + span {
  padding: 19px;
  border: 2px solid var(--brand-sky-light);
  color: var(--brand-deep-2);
}

.board-form-choice input:focus-visible + span {
  box-shadow: 0 0 6px 0 #a9d6ee;
}

/* ---------- 상단: 제목 + 카테고리 ---------- */
.board-form-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 40px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--gray-mid);
}

.board-form-field-title {
  flex: 1 1 0;
}

.board-form-field-type {
  flex-shrink: 0;
  width: min(22.9vw, 440px);
}

/* ---------- 내용 (웹에디터 영역) ---------- */
.board-form-body {
  padding: 50px 40px;
  border-bottom: 1px solid var(--gray-mid);
}

.board-form-editor {
  display: block;
  width: 100%;
  min-height: 320px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  resize: vertical;
  outline: none;
}

.board-form-editor::placeholder {
  color: var(--gray-mid-3);
  opacity: 1;
}

/* ---------- 첨부파일 ---------- */
.board-form-attach {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-mid);
}

.board-form-file {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 20px;
  border: 1px solid #bababa;
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.board-form-file:hover {
  border-color: var(--brand-100);
}

.board-form-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.board-form-file img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.board-form-file-text {
  min-width: 0;
  font-size: var(--font-18);
  line-height: 1.6;
  color: #5c5c5c;
  text-decoration: underline;
  text-underline-position: from-font;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-form-file-text.has-file {
  color: var(--black);
  text-decoration: none;
}

/* ---------- 게시하기 ---------- */
.board-form-foot {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* ---------- 모바일 ---------- */
@media (max-width: 1024px) {
  .board-write {
    padding: 80px 0;
  }

  .board-write-inner {
    width: 100%;
    padding: 0 20px;
  }

  .board-form-field {
    gap: 8px;
  }

  .board-form-label {
    font-size: 17px;
  }

  .board-form-label.is-required::after {
    font-size: 20px;
  }

  .board-form-input,
  .board-form-choice span,
  .board-form-file {
    height: 52px;
    padding: 0 20px;
    font-size: 16px;
  }

  .board-form-input:focus,
  .board-form-choice input:checked + span {
    padding: 0 19px;
  }

  .board-form-head {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 12px;
  }

  .board-form-field-type {
    width: 100%;
  }

  .board-form-body {
    padding: 48px 12px 40px;
  }

  .board-form-editor {
    min-height: 240px;
    font-size: 16px;
  }

  .board-form-attach {
    padding: 24px 12px;
  }

  .board-form-file {
    gap: 4px;
  }

  .board-form-file-text {
    font-size: 16px;
  }

  .board-form-foot {
    margin-top: 20px;
  }
}


/* ============================================
   게시글 상세(작성자형) + 답변 — 공용 (pages/for-doctors/case-view.php 등)
   .post-*    작성자 프로필 / 구분·제목·조회 행 / 첨부파일
   .answers-* 답변 섹션 (목록·대댓글·작성 폼)
   컨테이너·본문·돌아가기 버튼은 .board-view-* / .btn-arrow 를 그대로 쓴다
   ============================================ */

/* ---------- 작성자 프로필 (게시글·답변 공용) ---------- */
.post-author {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.post-author-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.post-author-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.post-author-name {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.post-author-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
}

.post-author-meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 12px;
  vertical-align: middle;
  background: var(--gray-mid);
}

.post-author-views {
  display: none; /* 모바일에서만 메타 줄에 조회수 표시 */
}

/* ---------- 게시글 머리: 작성자 + 구분/제목/조회 ---------- */
.post-head {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 40px;
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--gray-mid);
}

.post-title-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.post-title-row .board-tag {
  flex-shrink: 0;
  height: 36px;
}

.post-title {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
}

.post-views {
  flex-shrink: 0;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  white-space: nowrap;
}

/* ---------- 첨부파일 ---------- */
.post-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--gray-mid);
}

.post-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
  text-decoration: underline;
  text-underline-position: from-font;
}

.post-file img {
  width: 24px;
  height: 24px;
}

.post-file:hover {
  color: var(--brand-deep);
}

/* ---------- 답변 섹션 ---------- */
.answers {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 50px 40px;
  border-bottom: 1px solid var(--gray-mid);
}

.answers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.answers-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--black);
}

.btn-answer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 90px;
  background: #f7f7f7;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.btn-answer:hover,
.btn-answer[aria-expanded="true"] {
  background: var(--brand-300);
}

.btn-answer img {
  width: 21px;
  height: 21px;
}

.answers-empty {
  font-size: var(--font-18);
  line-height: 1.6;
  color: var(--gray-mid-4);
}

.answers-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.answers-list > .answer + .answer {
  padding-top: 40px;
  border-top: 1px solid var(--gray-mid);
}

/* 답변 한 건 */
.answer {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.answer-edit {
  flex-shrink: 0;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  text-decoration: underline;
  text-underline-position: from-font;
}

.answer-edit:hover {
  color: var(--black);
}

.answer-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.answer-content {
  width: 100%;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.answer-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
  transition: color 0.2s ease;
}

.answer-reply-btn:hover,
.answer-reply-btn[aria-expanded="true"] {
  color: var(--black);
}

.answer-reply-btn img {
  width: 24px;
  height: 24px;
}

/* 대댓글: 들여쓰기 + ㄴ 표시 */
.answer.is-reply {
  position: relative;
  gap: 20px;
  padding-left: 40px;
}

.answer.is-reply::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 11px;
  width: 13px;
  height: 17px;
  background: url("../img/icons/icon-reply-mark.svg") center / contain no-repeat;
}

/* 답변 작성 폼 */
.answer-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.answer-form[hidden] {
  display: none;
}

.answers-list .answer-form {
  gap: 20px;
  padding-left: 40px;
}

.answer-form-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 189px;
  padding: 20px;
  border-radius: 12px;
  background: #f7f7f7;
}

.answer-form-textarea {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 84px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  resize: vertical;
  outline: none;
}

.answer-form-textarea::placeholder {
  color: var(--black);
  opacity: 1;
}

/* .board-form-file 의 박스 스타일을 빼고 링크처럼 */
.answer-form-file.board-form-file {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.answer-form-file img {
  width: 9px;
  height: 16px;
}

.answer-form-file .board-form-file-text {
  color: var(--gray-mid-4);
}

.answer-form-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: -20px; /* 박스 ↔ 저장하기 12px */
}

/* 테두리형 알약 버튼 (저장하기) */
.btn-pill-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 20px;
  border: 1px solid var(--brand-deep);
  border-radius: 50px;
  background: var(--white);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-pill-line:hover {
  background: var(--brand-deep);
  color: var(--white);
}

/* ---------- 모바일 ---------- */
@media (max-width: 1024px) {
  .post-author {
    gap: 8px;
  }

  .post-author-avatar {
    width: 40px;
    height: 40px;
  }

  .post-author-name {
    font-size: 17px;
  }

  .post-author-meta {
    font-size: 13px;
  }

  .post-author-meta span + span::before {
    margin: 0 8px;
  }

  .post-author-views {
    display: inline;
  }

  .post-head {
    gap: 20px;
    padding: 12px;
  }

  .post-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .post-title-row .board-tag {
    height: auto;
  }

  .post-title {
    width: 100%;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.6;
  }

  .post-views {
    display: none;
  }

  .post-files {
    gap: 8px 16px;
    padding: 20px 12px;
  }

  .post-file {
    gap: 4px;
    font-size: 16px;
  }

  .answers {
    gap: 20px;
    padding: 48px 12px 40px;
  }

  .answers-title {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.6;
  }

  .btn-answer {
    font-size: 17px;
  }

  .answers-list {
    gap: 20px;
  }

  .answers-list > .answer + .answer {
    padding-top: 20px;
  }

  .answer {
    gap: 20px;
  }

  .answer-edit,
  .answer-content,
  .answer-reply-btn,
  .answers-empty,
  .answer-form-textarea,
  .answer-form-file .board-form-file-text {
    font-size: 16px;
  }

  .answer-body {
    gap: 8px;
  }

  .answer-reply-btn {
    gap: 4px;
  }

  .answer.is-reply::before {
    top: 12px;
  }

  .answer-form {
    gap: 20px;
  }

  .btn-pill-line {
    font-size: 17px;
  }
}

/* 답변 목록 ↔ 작성 폼 사이 구분선 (폼이 열렸을 때만) */
.answers-list + .answers-write:has(.answer-form:not([hidden])) {
  padding-top: 40px;
  border-top: 1px solid var(--gray-mid);
}

@media (max-width: 1024px) {
  .answers-list + .answers-write:has(.answer-form:not([hidden])) {
    padding-top: 20px;
  }
}


/* ============================================
   게시글 상세 하단 내비 — 이전글 / 목록으로 돌아가기 / 다음글 (pages/media/view.php 등)
   ============================================ */

.board-view-info {
  padding: 12px 40px 0;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.board-view-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  width: 100%;
}

.board-view-nav .board-view-foot {
  width: auto;
}

.board-view-nav-item {
  min-width: 0;
}

.board-view-nav-next {
  text-align: right;
}

.board-view-nav-link {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;
}

.board-view-nav-next .board-view-nav-link {
  align-items: flex-end;
}

.board-view-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: var(--font-22);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #1e1e1e;
  white-space: nowrap;
}

.board-view-nav-label img {
  width: 20px;
  height: 20px;
}

.board-view-nav-prev .board-view-nav-label img {
  transform: rotate(180deg);
}

.board-view-nav-title {
  display: block;
  max-width: 100%;
  font-weight: 500;
  font-size: var(--font-18);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #757575;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
}

.board-view-nav-link:hover .board-view-nav-title {
  color: var(--black);
}

/* ---------- 모바일 (시안 없음) : 이전/다음을 위아래로, 버튼은 아래 중앙 ---------- */
@media (max-width: 1024px) {
  .board-view-info {
    padding: 8px 12px 0;
    font-size: 15px;
  }

  .board-view-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .board-view-nav-item {
    order: 1;
    padding: 14px 12px;
    border-bottom: 1px solid var(--brand-300);
  }

  .board-view-nav-item.is-empty {
    display: none;
  }

  .board-view-nav-next {
    text-align: left;
  }

  .board-view-nav-next .board-view-nav-link {
    align-items: flex-start;
  }

  .board-view-nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .board-view-nav-label {
    flex-shrink: 0;
    gap: 6px;
    font-size: 15px;
  }

  .board-view-nav-label img {
    width: 16px;
    height: 16px;
  }

  .board-view-nav-title {
    flex: 1 1 0;
    font-size: 14px;
  }

  .board-view-nav .board-view-foot {
    order: 2;
    width: 100%;
    margin-top: 20px;
  }
}

/* ============================================================
   About › Forum Overview (pages/about/forum.php)
   ============================================================ */

/* ---------- 1. 설립배경 타임라인 — Figma 112:134 ----------
   시안 1920 기준 px 값을 --u(1px @1920, 뷰포트 비례 축소) 단위로 그대로 옮겼다.
   컨테이너 1680 = 좌우 120 여백. 항목(li)은 537u 높이 블록이 좌·우 번갈아 겹쳐 내려간다. */
.fo-bg {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(108 * var(--u)) 0;
}

.fo-bg-inner {
  position: relative;
  width: 87.5%;
  max-width: 1680px;
  margin: 0 auto;
}

/* 섹션 헤드 — 공용 .sec-head 를 좌정렬로 */
.fo-bg-head {
  align-items: flex-start;
  text-align: left;
}

.fo-bg-timeline {
  position: relative;
  margin-top: calc(-166 * var(--u));   /* 시안: 헤드(172u) 위에서 6u 내려온 지점부터 첫 이미지 시작 */
}

/* 중앙 라인: 트랙(회색) + fill(파랑, JS 가 scaleY 조절) */
.fo-bg-line {
  position: absolute;
  top: calc(269 * var(--u));           /* 1번 원 중심 */
  left: 50%;
  width: 1px;
  height: calc(965 * var(--u));        /* 1번 원 → 4번 원 중심 */
  background: #e6e6e6;
  pointer-events: none;
}

.fo-bg-line-fill {
  position: absolute;
  inset: 0;
  background: var(--brand-100);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.fo-bg-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.fo-bg-item {
  position: relative;
  width: 100%;
  height: calc(537 * var(--u));
}

/* 좌·우 번갈아 겹쳐 내려오는 오프셋 (시안 top: 0 / 328 / 637 / 965) */
.fo-bg-item:nth-child(2) { margin-top: calc(-209 * var(--u)); }
.fo-bg-item:nth-child(3) { margin-top: calc(-228 * var(--u)); }
.fo-bg-item:nth-child(4) { margin-top: calc(-209 * var(--u)); }

/* 알약 사진: 323×537 블록 안에 사진(285×499)과 연한 파란 알약(286×499)이 37.7u 어긋나 겹친다 */
.fo-bg-figure {
  --p: 1;                              /* 0 = 알약이 사진 위에 겹침 → 1 = 제자리. JS(ScrollTrigger scrub)가 굴린다 */
  position: absolute;
  top: 0;
  width: calc(323 * var(--u));
  height: calc(537 * var(--u));
  margin: 0;
}

.fo-bg-item.is-right .fo-bg-figure { right: 0; }
.fo-bg-item.is-left  .fo-bg-figure { left: 0; }

/* 연한 파란 알약: 사진과 같은 자리(--dx/--dy 만큼 이동한 곳)에서 시작해 --p 가 1 이 되면 제자리 */
.fo-bg-figure::before {
  content: "";
  position: absolute;
  top: 0;
  width: calc(286 * var(--u));
  height: calc(499.5 * var(--u));
  border-radius: 9999px;
  background: var(--brand-100);
  opacity: 0.1;
  transform: translate(calc(var(--dx) * (1 - var(--p))), calc(var(--dy) * (1 - var(--p))));
  will-change: transform;
}

.fo-bg-item.is-right .fo-bg-figure::before { left: 0;  --dx: calc(37.7 * var(--u)); --dy: calc(37.5 * var(--u)); }
.fo-bg-item.is-left  .fo-bg-figure::before { right: 0; --dx: calc(-37 * var(--u)); --dy: calc(37.5 * var(--u)); }

.fo-bg-figure-img {
  position: absolute;
  bottom: 0;
  width: calc(285.3 * var(--u));
  height: calc(499.5 * var(--u));
  border-radius: 9999px;
  object-fit: cover;
}

.fo-bg-item.is-right .fo-bg-figure-img { right: 0; }
.fo-bg-item.is-left  .fo-bg-figure-img { left: 0; }

/* 말풍선 앵커: 높이 0 인 박스를 원 중심 높이(269u)에 두고 그 안에서 말풍선을 세로 가운데 정렬
   (transform 을 안 써야 JS 가 offsetTop 으로 원 위치를 정확히 잰다) */
.fo-bg-text {
  position: absolute;
  top: calc(269 * var(--u));
  height: 0;
  display: flex;
  align-items: center;
}

.fo-bg-item.is-right .fo-bg-text { left: calc(50% + 49 * var(--u)); }
.fo-bg-item.is-left  .fo-bg-text { right: calc(50% + 45 * var(--u)); justify-content: flex-end; }

/* 원(dot): 중앙 라인 위, 말풍선 중심 높이 */
.fo-bg-dot {
  position: absolute;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cdcdcd;
  box-shadow: 0 0 0 0 rgba(66, 176, 219, 0);
  transition: background-color 0.3s, box-shadow 0.4s;
}

.fo-bg-item.is-right .fo-bg-dot { left: calc(-49 * var(--u) - 6px); }
.fo-bg-item.is-left  .fo-bg-dot { right: calc(-45 * var(--u) - 6px); }

/* 말풍선 + 라인까지 이어지는 점선 연결부 */
.fo-bg-bubble {
  position: relative;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  background: rgba(238, 238, 238, 0.05);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--gray-mid);
  white-space: nowrap;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.fo-bg-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50 * var(--u));
  border-top: 1px dashed #e6e6e6;
  transition: border-color 0.3s;
}

.fo-bg-item.is-right .fo-bg-bubble::before { right: 100%; }
.fo-bg-item.is-left  .fo-bg-bubble::before { left: 100%; }

/* 라인이 원을 지나면 (JS .is-on): 원 테두리 + 말풍선 활성 */
.fo-bg-item.is-on .fo-bg-dot {
  background: var(--brand-100);
  box-shadow: 0 0 0 8px rgba(66, 176, 219, 0.2);
}

.fo-bg-item.is-on .fo-bg-bubble {
  border-color: var(--brand-sky-light);
  background: rgba(116, 195, 230, 0.05);
  color: var(--brand-100);
}

.fo-bg-item.is-on .fo-bg-bubble::before {
  border-color: var(--brand-sky-light);
}

@media (prefers-reduced-motion: reduce) {
  .fo-bg-dot,
  .fo-bg-bubble,
  .fo-bg-bubble::before {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:4273 (393 기준) ----------
   헤드 중앙정렬 → 왼쪽 12px 컬럼에 라인, 오른쪽에 [말풍선 → 알약 사진] 을 가운데 정렬로 쌓는다.
   알약 사진은 PC 의 정확히 절반(--u 0.5). 점선 연결부는 .fo-bg-text::before 가 원 중심에서 말풍선까지 잇는다. */
@media (max-width: 1024px) {
  .fo-bg {
    --u: 0.7px;
    padding: 80px 0;
  }

  .fo-bg-inner {
    width: 90%;
  }

  .fo-bg-head {
    align-items: center;
    text-align: center;
  }

  .fo-bg-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .fo-bg-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .fo-bg-head .sec-head-desc {
    font-size: 17px;
  }

  .fo-bg-timeline {
    margin-top: 40px;
    padding-left: 24px;                /* 라인 컬럼 12 + 콘텐츠 좌측 여백 12 */
    padding-right: 4px;
  }

  .fo-bg-line {
    top: 0;
    left: 5.5px;                       /* 12px 라인 컬럼의 중앙 */
    height: 100%;
  }

  .fo-bg-list {
    gap: 40px;
  }

  .fo-bg-item,
  .fo-bg-item:nth-child(n) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    height: auto;
    margin-top: 0;
  }

  /* 말풍선(원) → 이미지 순서 */
  .fo-bg-item .fo-bg-text {
    order: -1;
  }

  /* 알약 사진: 모바일은 전부 우측형(연한 알약 좌상단, 사진 우하단) */
  .fo-bg-item.is-right .fo-bg-figure,
  .fo-bg-item.is-left  .fo-bg-figure {
    position: relative;
    left: auto;
    right: auto;
  }

  .fo-bg-item.is-left .fo-bg-figure::before {
    left: 0;
    right: auto;
    --dx: calc(37.7 * var(--u));
  }

  .fo-bg-item.is-left .fo-bg-figure-img {
    left: auto;
    right: 0;
  }

  .fo-bg-item.is-right .fo-bg-text,
  .fo-bg-item.is-left  .fo-bg-text {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: auto;
    justify-content: center;
  }

  /* 원 중심(라인) → 말풍선까지 점선. 말풍선 뒤로 지나가는 부분은 말풍선의 불투명 배경이 가린다 */
  .fo-bg-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -18px;
    right: 50%;
    border-top: 1px dashed #e6e6e6;
    transition: border-color 0.3s;
  }

  .fo-bg-item.is-on .fo-bg-text::before {
    border-color: var(--brand-sky-light);
  }

  .fo-bg-item.is-right .fo-bg-dot,
  .fo-bg-item.is-left  .fo-bg-dot {
    top: 50%;
    left: -24px;
    right: auto;
    margin-top: -6px;
  }

  .fo-bg-bubble {
    position: relative;
    z-index: 1;
    padding: 6px;
    border-radius: 6px;
    background: #fefefe;               /* rgba(238,238,238,.05) over white — 점선을 가리도록 불투명 */
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .fo-bg-item.is-on .fo-bg-bubble {
    background: #f8fcfe;               /* rgba(116,195,230,.05) over white */
  }

  .fo-bg-bubble::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .fo-bg {
    --u: 0.5px;
  }

  .fo-bg-inner {
    width: calc(100% - 32px);
  }
}

/* ---------- 2. 목적과 역할 (Mission & Roles) — Figma 112:291 / 펼침 112:457, 112:515 ----------
   컨테이너 1210 (= 63.02% @1920). 카드 2장은 기본 600/600, 호버한 카드 980 · 반대쪽 220 (js/sub.js initForumRoles).
   사진은 .fo-mr-card-visual 의 background-image(cover) 라 크기가 바뀌어도 비율이 안 깨진다.
   접힘: visual 이 카드 전체 + 하단 그라데이션 + 흰 라벨 / 펼침: visual 이 좌측 270×460 썸네일로 줄고 본문(.fo-mr-card-body) 등장 */
.fo-mr {
  --u: min(0.05208vw, 1px);
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.fo-mr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 63.02%;
  max-width: 1210px;
  margin: 0 auto;
}

.fo-mr-head {
  gap: 20px;
}

/* 칩: 임상 경험 축적 → 수술 표준화 → 의료진 교육 → 환자 안내 (마지막 빼고 오른쪽에 화살표) */
.fo-mr-chips {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  list-style: none;
}

.fo-mr-chip {
  position: relative;
  padding: 4px 20px;
  border: 1px solid var(--brand-100);
  border-radius: 200px;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--brand-100);
  white-space: nowrap;
}

.fo-mr-chip:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: calc(40 * var(--u));
  height: 8px;
  margin-top: -4px;
  background: url(../img/icons/icon-chip-arrow.svg) center / 100% 100% no-repeat;
}

/* ----- 카드 -----
   카드 = flex 행 [사진(남는 폭 전부) | 본문(폭 0 ↔ 690u)]. 호버 시 카드 flex-basis(600 → 980/220)·padding(0 → 10)·
   본문 폭(0 → 690u)만 transition 하면 사진은 남는 폭을 채우며 자연스럽게 줄어든다 (background cover 라 비율 유지).
   본문 안쪽은 고정폭 래퍼(.fo-mr-card-body-inner 660u)라 폭 전환 중 텍스트가 다시 줄바꿈되지 않는다. */
.fo-mr-cards {
  display: flex;
  gap: 10px;
  width: 100%;
}

.fo-mr-card {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 10px) / 2);
  height: calc(480 * var(--u));
  padding: 0;
  border-radius: 20px;
  background: var(--white);
  overflow: hidden;
  outline: none;
  transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fo-mr-card.is-open   { flex-basis: calc((100% - 10px) * 980 / 1200); padding: 10px; }
.fo-mr-card.is-shrink { flex-basis: calc((100% - 10px) * 220 / 1200); }

/* 사진: background-image cover, 남는 폭 전부 */
.fo-mr-card-visual {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border-radius: 20px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: border-radius 0.6s;
}
.fo-mr-card1 .fo-mr-card-visual {
  background-position: 30% 50%;
}
.fo-mr-card2 .fo-mr-card-visual {
  background-position: 62% 50%;
}
.fo-mr-card.is-open .fo-mr-card-visual {
  border-radius: 10px;
}

/* 하단 그라데이션 (접힘 상태에서만) */
.fo-mr-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 100%);
  transition: opacity 0.4s;
}

.fo-mr-card.is-open .fo-mr-card-visual::after {
  opacity: 0;
}

/* 접힘 라벨 (흰 글자, 좌하단) */
.fo-mr-card-label {
  position: absolute;
  z-index: 1;                          /* ::after 그라데이션(뒤에 그려짐) 위로 */
  left: 20px;
  bottom: calc(26 * var(--u));
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--white);
  white-space: nowrap;
  transition: opacity 0.3s;
}

.fo-mr-card.is-open .fo-mr-card-label {
  opacity: 0;
}

.fo-mr-card-eyebrow {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fo-mr-card-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* 펼침 본문: 폭 0 ↔ 690u (사진과의 간격 20 + 내용 660 + 우측 10) */
.fo-mr-card-body {
  position: relative;
  flex: 0 0 auto;
  width: 0;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.fo-mr-card.is-open .fo-mr-card-body {
  width: calc(690 * var(--u));
  opacity: 1;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s 0.2s;
}

/* 고정폭 내용 래퍼 — 시안 좌표: 소제목 top 30, 바로가기 top/right 20, 리스트 top 224 (카드 padding 10 기준으로 환산) */
.fo-mr-card-body-inner {
  position: relative;
  width: calc(660 * var(--u));
  height: 100%;
  margin-left: 20px;
  padding-top: 20px;
}

.fo-mr-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.fo-mr-card-head .fo-mr-card-eyebrow { color: var(--gray-mid-2); }
.fo-mr-card-head .fo-mr-card-title   { color: var(--brand-point-sky-blue); }

/* 바로가기 필 버튼 (우상단) */
.fo-mr-card-link {
  position: absolute;
  top: 10px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 8px 8px 28px;
  border: 1px solid #e6e6e6;
  border-radius: 230px;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: nowrap;
  transition: border-color 0.3s, background-color 0.3s;
}

.fo-mr-card-link:hover {
  border-color: var(--black);
}

.fo-mr-card-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--black);
}

.fo-mr-card-link-icon img {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);   /* 위 화살표 → 오른쪽 */
}

/* 01 / 02 항목 리스트 (카드 top 224 = 래퍼 top 214) */
.fo-mr-card-list {
  position: absolute;
  top: calc(214 * var(--u));
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
}

.fo-mr-card-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fo-mr-card-item + .fo-mr-card-item {
  padding-top: 15px;
  border-top: 1px solid var(--brand-200);
}

.fo-mr-card-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.fo-mr-card-item-num {
  font-size: var(--font-18);
  color: var(--gray-mid-2);
}

.fo-mr-card-item-title {
  font-size: var(--font-20);
  color: var(--black);
}

.fo-mr-card-item-desc {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
  word-break: keep-all;
}

@media (prefers-reduced-motion: reduce) {
  .fo-mr-card,
  .fo-mr-card-visual,
  .fo-mr-card-visual::after,
  .fo-mr-card-label,
  .fo-mr-card-body {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:4607 (393 기준) ----------
   칩은 2행(1행 끝에 다음 행으로 꺾이는 화살표), 카드는 세로 스택.
   접힘 카드 = 353×280 사진 + 라벨, 펼침 카드(.is-open) = 흰 카드(padding 12) 안에 사진 210 + 본문 + 바로가기.
   호버가 없으니 탭으로 펼칠 카드를 바꾼다 — 첫 카드가 기본 펼침 (js/sub.js initForumRoles 모바일 모드).
   탭 전환 애니메이션: 카드 padding 0↔12, 사진 height 280↔210, 본문 height 0↔내용 높이(JS 가 scrollHeight 를 px 로) */
@media (max-width: 1024px) {
  .fo-mr {
    padding: 80px 0;
  }

  .fo-mr-inner {
    gap: 40px;
    width: 90%;
    max-width: none;
  }

  .fo-mr-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .fo-mr-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .fo-mr-head .sec-head-desc {
    font-size: 17px;
  }

  .fo-mr-chips {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
  }

  .fo-mr-chip {
    font-size: 16px;
    line-height: 1.6;
  }

  /* 화살표: 원본(41×7)의 오른쪽 끝(꺾임 부분)만 보이게 잘라 쓴다 */
  .fo-mr-chip:not(:last-child)::after {
    width: 20px;
    background: url(../img/icons/icon-chip-arrow.svg) right center / auto 100% no-repeat;
  }

  /* ----- 카드 ----- */
  .fo-mr-cards {
    flex-direction: column;
    gap: 10px;
  }

  .fo-mr-card,
  .fo-mr-card.is-open,
  .fo-mr-card.is-shrink {
    display: block;
    flex-basis: auto;
    height: auto;
    padding: 0;
    transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 사진: height 만 280 ↔ 210 으로 전환 */
  .fo-mr-card-visual {
    width: 100%;
    height: 280px;
    border-radius: 20px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fo-mr-card-visual::after {
    transition: none;
  }

  .fo-mr-card-label {
    bottom: 20px;
    gap: 0;
  }

  .fo-mr-card-eyebrow {
    margin-bottom: -4px;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
  }

  .fo-mr-card-title {
    font-size: 24px;
    line-height: 1.5;
  }

  /* 본문: 접힘 = height 0 (overflow hidden), 펼침 = 내용 높이 */
  .fo-mr-card-body,
  .fo-mr-card.is-open .fo-mr-card-body {
    width: auto;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
  }

  .fo-mr-card-body {
    height: 0;
    margin-top: 0;
  }

  .fo-mr-card-body-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  /* 펼침 (.is-open): 흰 카드 안에 사진 → 본문 → 바로가기 */
  .fo-mr-card.is-open {
    padding: 12px;
  }

  .fo-mr-card.is-open .fo-mr-card-visual {
    height: 210px;
    border-radius: 20px;
  }

  .fo-mr-card.is-open .fo-mr-card-visual::after {
    opacity: 1;
  }

  .fo-mr-card.is-open .fo-mr-card-body {
    height: auto;
    margin-top: 20px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s 0.2s;
  }

  .fo-mr-card.is-open .fo-mr-card-head {
    gap: 0;
  }

  .fo-mr-card-list {
    position: static;
    width: 100%;
  }

  .fo-mr-card-item-num   { font-size: 16px; }
  .fo-mr-card-item-title { font-size: 17px; }
  .fo-mr-card-item-desc  { font-size: 16px; }

  /* 바로가기: 본문 아래 (DOM 은 head → link → list 라 order 로 맨 뒤로) */
  .fo-mr-card-link {
    position: static;
    order: 3;
    align-self: flex-start;
    gap: 12px;
    height: 60px;
    margin-top: -20px;               /* inner gap 40 → 시안의 20 */
    padding: 4px 6px 4px 20px;
    background: var(--white);
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .fo-mr-inner {
    width: calc(100% - 40px);
  }

  /* 2행 배치 강제: 1행(임상 경험 축적 → 수술 표준화 ─┐) / 2행(의료진 교육 → 환자 안내) */
  .fo-mr-chips {
    max-width: 340px;
    padding-right: 20px;
  }

  .fo-mr-chip:nth-child(2)::after {
    width: 24px;
  }
}

/* ---------- 3. Vision 배너 — Figma 112:591 ----------
   1920×628, 사방 padding 120. 배경(#071e2e + 글로우 + "2026" 워터마크)은 vision_bg.jpg 한 장에 합성돼 있어
   background-image cover 로만 깐다 (inline style 로 경로 주입). */
.fo-vision {
  --u: min(0.05208vw, 1px);
  display: flex;
  align-items: center;
  min-height: calc(628 * var(--u));
  padding: calc(120 * var(--u));
  background: var(--brand-500) url(../img/sub/about/forum/vision_bg.jpg) center / cover no-repeat;
  color: var(--white);
}

.fo-vision-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.fo-vision-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;                 /* 시안 40 = head↔chips 40, chips↔body 12 */
}

.fo-vision-eyebrow {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.fo-vision-title {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.fo-vision-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
}

.fo-vision-chip {
  padding: 4px 20px;
  border: 1px solid var(--white);
  border-radius: 200px;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.fo-vision-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* ---------- 모바일 — Figma 737:4759 (393 기준, 배경 vision_bg_m.jpg 393×806) ----------
   전부 중앙정렬. 상하 padding 120, head↔chips 40, chips↔body 20 */
@media (max-width: 1024px) {
  .fo-vision {
    min-height: 0;
    padding: 120px 20px 255px;         /* 시안: 상단 120, 하단은 "2026" 워터마크 자리만큼 넓게 */
    background-image: url(../img/sub/about/forum/vision_bg_m.jpg);
    text-align: center;
  }

  .fo-vision-inner {
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .fo-vision-head {
    align-items: center;
    margin-bottom: 20px;
  }

  .fo-vision-eyebrow { font-size: 17px; }
  .fo-vision-title   { font-size: 28px; line-height: 1.4; }

  .fo-vision-chips {
    justify-content: center;
    gap: 8px;
  }

  .fo-vision-chip {
    padding: 4px 12px;
    font-size: 17px;
    line-height: 1.6;
  }

  .fo-vision-body {
    align-items: center;
    font-size: 17px;
  }
}

/* ---------- 4. 함께 살펴보세요 — Figma 112:646 ----------
   센터 헤드 + 카드 3장(306×388, 내용은 하단 정렬). 아이콘은 img/sub/about/forum/look_icon1~3, 우상단 화살표 원(40) */
.fo-look {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
}

.fo-look-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.fo-look-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  list-style: none;
}

.fo-look-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: calc(306 * var(--u));
  height: calc(388 * var(--u));
  padding: 20px;
  border: 1px solid var(--gray-mid);
  border-radius: 10px;
  background: var(--white);
  color: inherit;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.fo-look-card:hover {
  border-color: var(--brand-100);
  box-shadow: 0 12px 30px rgba(7, 30, 46, 0.08);
  transform: translateY(-4px);
}

/* 아이콘 영역 154×211 — 아이콘은 위쪽에 붙는다 */
.fo-look-card-icon {
  display: flex;
  align-items: flex-start;
  width: calc(154 * var(--u));
  height: calc(211 * var(--u));
}

.fo-look-card-icon img {
  width: 100%;
  height: auto;
}

/* look_icon2 만 그림 안 여백이 넓어 다른 카드보다 작아 보인다 — 이 파일만 조금 키운다.
   height:auto 라 비율은 그대로고, 아이콘 영역(154×211)이 세로로 남아 넘치지 않는다.
   max-width 해제 필수 — css/reset.css 의 전역 img { max-width:100% } 가 100% 로 도로 잘라낸다. */
.fo-look-card-icon img[src$="look_icon2.png"] {
  width: 112%;
  max-width: none;
}

.fo-look-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.fo-look-card-eyebrow {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.fo-look-card-title {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.fo-look-card-desc {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
  word-break: keep-all;
}

/* 우상단 화살표 원 */
.fo-look-card-arrow {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-300);
  transition: background-color 0.3s;
}

.fo-look-card-arrow img {
  width: 40px;
  height: 40px;
}

.fo-look-card:hover .fo-look-card-arrow {
  background: var(--brand-200);
}

@media (prefers-reduced-motion: reduce) {
  .fo-look-card,
  .fo-look-card-arrow {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:4919 (393 기준) ----------
   카드 306×280 세로 스택(gap 20), padding 12, 아이콘 영역 123×169 에 아이콘(111 폭)이 하단 정렬. 글자 13 / 20 / 16 */
@media (max-width: 1024px) {
  .fo-look {
    padding: 80px 0;
  }

  .fo-look-inner {
    gap: 40px;
    width: 90%;
  }

  .fo-look-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .fo-look-inner .sec-head-desc {
    font-size: 17px;
  }

  .fo-look-cards {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .fo-look-card {
    gap: 8px;
    width: 306px;
    max-width: 100%;
    height: 280px;
    padding: 12px;
  }

  .fo-look-card-icon {
    align-items: flex-end;
    width: 123px;
    height: 169px;
  }

  .fo-look-card-icon img {
    width: 111px;
  }

  .fo-look-card-icon img[src$="look_icon2.png"] {
    width: 124px;
    max-width: none;
  }

  .fo-look-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .fo-look-card-head {
    gap: 0;
  }

  .fo-look-card-eyebrow {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
  }

  .fo-look-card-title {
    font-size: 20px;
    line-height: 1.5;
  }

  .fo-look-card-desc {
    font-size: 16px;
  }

  .fo-look-card-arrow {
    top: 12px;
    right: 14px;
  }
}

@media (max-width: 640px) {
  .fo-look-inner {
    width: calc(100% - 40px);
  }
}


/* ============================================================
   About › Organization (pages/about/organization.php)
   ============================================================ */

/* ---------- 1. 운영위원회 조직도 — Figma 124:1018 ----------
   차트 1194×980 (--u 로 비례 축소). 회장 노드는 중앙에서 125.5u 오른쪽에 중심을 둔 [사진 401 | 20 | 텍스트 232],
   ㅗ자 연결선은 top 350 · 427×341.5, 하단 총무/사무국은 top 441 에 좌우 끝(462 폭, 사이 270).
   사진 png 는 타원 마스크·회색 타원이 합성된 상태라 박스(388u) 바닥에 붙이고 위로는 넘치게 둔다. */
.org-cm {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
}

.org-cm-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.org-cm-chart {
  position: relative;
  width: calc(1194 * var(--u));
  height: calc(980 * var(--u));
}

/* 연결선 */
.org-cm-line {
  position: absolute;
  top: calc(350 * var(--u));
  left: 50%;
  width: calc(427 * var(--u));
  height: calc(341.5 * var(--u));
  transform: translateX(-50%);
  overflow: visible;
}

.org-cm-line path {
  stroke: var(--brand-sky-light);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s linear;
}

/* 노드 공통 */
.org-cm-node {
  position: absolute;
  display: flex;
}

.org-cm-node-chair {
  top: 0;
  left: calc(50% + 125.5 * var(--u));
  align-items: center;
  gap: 20px;
  width: calc(653 * var(--u));
  height: calc(401 * var(--u));
  transform: translateX(-50%);
}

.org-cm-node-left,
.org-cm-node-right {
  top: calc(441 * var(--u));
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: calc(462 * var(--u));
}

.org-cm-node-left  { left: 0; }
.org-cm-node-right { right: 0; }

/* 사진 박스: 388u 높이, 사진은 바닥 정렬 (위로 넘침 허용) */
.org-cm-figure {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: calc(388 * var(--u));
}

.org-cm-node-chair .org-cm-figure {
  width: calc(401 * var(--u));
}

.org-cm-figure img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* 텍스트 */
.org-cm-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(232 * var(--u));
  min-width: 200px;
  white-space: nowrap;
}

.org-cm-node-left .org-cm-text,
.org-cm-node-right .org-cm-text {
  align-items: center;
  gap: 8px;
  text-align: center;
}

.org-cm-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.org-cm-node-left .org-cm-title,
.org-cm-node-right .org-cm-title {
  align-items: center;
}

.org-cm-role {
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-cm-chip {
  padding: 0 16px;
  border: 1px solid var(--brand-100);
  border-radius: 80px;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-100);
}

.org-cm-role-en {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.org-cm-name {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.org-cm-name span {
  color: var(--black);
}

.org-cm-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.org-cm-term {
  display: flex;
  gap: 12px;
}

.org-cm-term strong {
  font-weight: 600;
  color: var(--gray-mid-1);
}

/* ----- 등장 연출: 부모 .org-cm-chart 의 .aos-animate 하나로 순서 제어 -----
   회장 0s → 세로선 0.5s → 가로선(좌우 동시) 1.0s → 총무/사무국 1.5s */
.org-cm-node {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.org-cm-node-chair { transform: translate(-50%, 30px); }
.org-cm-node-left,
.org-cm-node-right { transform: translateY(30px); }

.org-cm-chart.aos-animate .org-cm-node-chair {
  opacity: 1;
  transform: translate(-50%, 0);
}

.org-cm-chart.aos-animate .org-cm-line-v {
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}

.org-cm-chart.aos-animate .org-cm-line-l,
.org-cm-chart.aos-animate .org-cm-line-r {
  stroke-dashoffset: 0;
  transition-delay: 1s;
}

.org-cm-chart.aos-animate .org-cm-node-left,
.org-cm-chart.aos-animate .org-cm-node-right {
  opacity: 1;
  transform: none;
  transition-delay: 1.5s;
}

@media (prefers-reduced-motion: reduce) {
  .org-cm-node,
  .org-cm-line path {
    transition: none;
  }
}

/* PC: 좌우 노드 래퍼는 레이아웃에 관여하지 않는다 (절대 위치 기준은 그대로 .org-cm-chart) */
.org-cm-row {
  display: contents;
}

/* ---------- 모바일 — Figma 737:5147 (393 기준) ----------
   회장(사진 196×190 → 텍스트 중앙) → 연결선(세로 80 + 가로 209) → 총무/사무국 2열.
   가로선이 아래 두 타원 뒤를 지나도록 행을 위로 100px 끌어올린다 (png 타원이 불투명이라 선이 가려진다). */
@media (max-width: 1024px) {
  .org-cm {
    padding: 80px 0;
  }

  .org-cm-inner {
    gap: 40px;
    width: 90%;
  }

  .org-cm-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .org-cm-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .org-cm-inner .sec-head-desc {
    font-size: 17px;
  }

  .org-cm-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 353px;
    height: auto;
    padding-top: 60px;
  }

  /* DOM 은 선 → 회장 → 행 순이라 order 로 회장을 먼저 */
  .org-cm-node-chair { order: 1; }
  .org-cm-line       { order: 2; }
  .org-cm-row        { order: 3; }

  .org-cm-line {
    position: static;
    width: 209px;
    height: 167px;
    margin: 40px 0 -95px;              /* 가로선이 하단 타원의 위쪽 1/3 지점을 지나도록 행을 끌어올린다 */
    transform: none;
  }

  .org-cm-line path {
    vector-effect: non-scaling-stroke;
  }

  .org-cm-row {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .org-cm-node,
  .org-cm-node-chair,
  .org-cm-node-left,
  .org-cm-node-right {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: auto;
    height: auto;
    transform: translateY(30px);
  }

  .org-cm-node-left,
  .org-cm-node-right {
    flex: 0 0 50%;
    gap: 40px;
  }

  .org-cm-chart.aos-animate .org-cm-node-chair,
  .org-cm-chart.aos-animate .org-cm-node-left,
  .org-cm-chart.aos-animate .org-cm-node-right {
    transform: none;
  }

  /* 사진: 회장 196×190 (사진 214 폭), 하단 179×150 (사진 174 폭) — 바닥 정렬 */
  .org-cm-node-chair .org-cm-figure {
    width: 196px;
    height: 190px;
  }

  .org-cm-node-left .org-cm-figure,
  .org-cm-node-right .org-cm-figure {
    width: 179px;
    max-width: 100%;
    height: 150px;
  }

  .org-cm-figure img {
    left: 50%;
    width: 214px;
    transform: translateX(-50%);
  }

  .org-cm-node-left .org-cm-figure img,
  .org-cm-node-right .org-cm-figure img {
    width: 174px;
  }

  /* 텍스트: 전부 중앙 정렬 */
  .org-cm-text,
  .org-cm-node-chair .org-cm-text {
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    text-align: center;
  }

  .org-cm-node-left .org-cm-text,
  .org-cm-node-right .org-cm-text {
    gap: 4px;
  }

  .org-cm-title {
    align-items: center;
    gap: 2px;
  }

  .org-cm-role {
    gap: 4px;
  }

  .org-cm-chip {
    padding: 0 8px;
    border-radius: 40px;
    font-size: 16px;
  }

  .org-cm-role-en {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
  }

  .org-cm-name {
    font-size: 20px;
    line-height: 1.5;
  }

  .org-cm-desc {
    align-items: center;
    gap: 4px;
    font-size: 16px;
  }

  .org-cm-desc > p:first-child {
    font-weight: 600;
  }

  .org-cm-term {
    justify-content: center;
    gap: 6px;
  }

  .org-cm-term span {
    font-weight: 400;
  }
}


/* ---------- 2. 포럼이 지금까지 쌓아온 기록 (By the Numbers) — Figma 134:1486 ----------
   1920×805, 사방 padding 120, 헤드(좌측) ↔ 숫자 4개(양끝 정렬) 사이 190. 배경은 numbers_bg.jpg (inline style 로 경로 주입).
   숫자 폰트 Gothic A1 (layout/_head.php 에서 Google Fonts 로 로드) */
.org-num {
  --u: min(0.05208vw, 1px);
  padding: calc(120 * var(--u));
  background: #f7f7f7 center bottom / cover no-repeat;
}

.org-num-inner {
  display: flex;
  flex-direction: column;
  gap: calc(190 * var(--u));
}

.org-num-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.org-num-eyebrow {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.org-num-title {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.org-num-desc {
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.org-num-list {
  display: flex;
  justify-content: space-between;
  width: 100%;
  list-style: none;
}

.org-num-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.org-num-label {
  margin-bottom: -10px;                /* item gap 20 → 시안 10 */
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
}

/* 숫자 100px + 단위 24px, 단위는 숫자 바닥에서 8px 위 */
.org-num-figure {
  display: flex;
  align-items: flex-end;
  height: calc(90 * var(--u));
  color: var(--brand-navy);
}

.org-num-value {  
  font-family: "Gothic A1", "Pretendard Variable", sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 5.2083vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.org-num-unit {
  padding-bottom: 8px;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.org-num-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  transition: color 0.3s;
}

.org-num-link img {
  width: 16px;
  height: 16px;
  margin: 3px;
  transform: rotate(135deg) scaleY(-1);   /* ← 화살표 원본을 ↗ 로 */
  transition: transform 0.3s;
}

.org-num-link:hover {
  color: var(--brand-deep);
}

.org-num-link:hover img {
  transform: rotate(135deg) scaleY(-1) translate(2px, 2px);
}

/* ---------- 모바일 — Figma 737:5563 (393 기준) ----------
   전부 중앙정렬 세로 스택. 상하 80, 헤드↔숫자 40, 숫자 항목 사이 40. 숫자 80px / 단위 20px / 라벨 17px */
@media (max-width: 1024px) {
  .org-num {
    padding: 80px 20px;
    background-position: center;
    text-align: center;
  }

  .org-num-inner {
    align-items: center;
    gap: 40px;
  }

  .org-num-head {
    align-items: center;
  }

  .org-num-eyebrow { font-size: 17px; }
  .org-num-title   { font-size: 28px; line-height: 1.4; }
  .org-num-desc    { font-size: 17px; }

  .org-num-list {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: auto;
  }

  .org-num-item {
    align-items: center;
  }

  .org-num-label {
    font-size: 17px;
  }

  .org-num-figure {
    height: 77px;
  }

  .org-num-value {
    font-size: 80px;
  }

  .org-num-unit {
    font-size: 20px;
  }

  .org-num-link {
    align-self: center;
  }
}


/* ---------- 3. 검토 네트워크 (Review Network) — Figma 134:1586 ----------
   bg #f7f7f7, padding 120, 카드 390×230 3×2 (gap 20). 카드: 흰 배경 radius 10, 아이콘(원본 px 1:1) → 18 → 제목 24px,
   우상단 ↗(16px, 22.6 박스). 아이콘은 width/height 속성으로 원본 크기를 지정하고 CSS 에선 --u 로만 비례 축소 */
.org-net {
  --u: min(0.05208vw, 1px);
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.org-net-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.org-net-cards {
  display: grid;
  grid-template-columns: repeat(3, calc(390 * var(--u)));
  gap: 20px;
  list-style: none;
}

.org-net-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: calc(230 * var(--u));
  padding: 20px;
  border-radius: 10px;
  background: var(--white);
  color: var(--brand-500);
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
}

.org-net-card:hover {
  box-shadow: 0 12px 30px rgba(7, 30, 46, 0.08);
  transform: translateY(-4px);
}

.org-net-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 원본 px(--w, img 의 inline style) × --u : 1920 에서 1:1, 작은 화면에서 비례 축소 */
.org-net-card-icon img {
  width: calc(var(--w) * var(--u));
  height: auto;
}

.org-net-card-title {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.org-net-card-arrow {
  position: absolute;
  top: 23px;
  right: 25px;
  width: 16px;
  height: 16px;
  transform: rotate(135deg) scaleY(-1);   /* ← 원본 → ↗ */
  transition: transform 0.3s;
}

.org-net-card:hover .org-net-card-arrow {
  transform: rotate(135deg) scaleY(-1) translate(2px, 2px);
}

@media (prefers-reduced-motion: reduce) {
  .org-net-card,
  .org-net-card-arrow {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:5668 (393 기준) ----------
   카드 2열(166.5×230, gap 20), padding 12, 좌정렬: 아이콘(0.7 배) 상단 → 제목 20px 하단. ↗ 은 top/right 10 */
@media (max-width: 1024px) {
  .org-net {
    padding: 80px 0;
  }

  .org-net-inner {
    gap: 40px;
    width: 90%;
  }

  .org-net-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .org-net-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .org-net-inner .sec-head-desc {
    font-size: 17px;
  }

  .org-net-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 353px;
  }

  .org-net-card {
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    height: 230px;
    padding: 12px;
  }

  .org-net-card-icon {
    align-items: flex-start;
    margin-top: 14px;
  }

  .org-net-card-icon img {
    width: calc(var(--w) * 0.7px);
  }

  .org-net-card-title {
    font-size: 20px;
    white-space: normal;
    word-break: keep-all;
  }

  .org-net-card-arrow {
    top: 13px;
    right: 13px;
  }
}

@media (max-width: 640px) {
  .org-net-inner {
    width: calc(100% - 40px);
  }
}


/* ---------- 4. 운영 규정 및 원칙 슬라이더 — Figma 134:2194 ----------
   Swiper creative 효과(js/sub.js initPrinciplesSwiper)가 옆 슬라이드의 위치·scale .8·opacity .6 을 처리한다.
   CSS 는 크기(활성 900×450, 컨테이너 좌우 padding 40 = 비침 공간)와 옆 슬라이드 바깥쪽 흰 그라데이션만 담당.
   슬라이드 안: 하단 어두운 그라데이션 + 제목 28 + 01/02 항목 2열(세로 구분선) */
.org-pr {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
}

.org-pr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.org-pr-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: calc(980 * var(--u));         /* 900 + 좌우 비침 40 */
  max-width: 100%;
}

.org-pr-swiper {
  width: 100%;
  padding: 0 calc(40 * var(--u));      /* 옆 슬라이드가 비치는 공간 */
  overflow: hidden;
}

.org-pr-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: calc(450 * var(--u));
  padding: calc(40 * var(--u));
  border-radius: 10px;
  background: var(--brand-bg) center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}

/* creative 효과는 옆 슬라이드가 반투명(opacity .6)이라 그 뒤에 겹쳐 둔 슬라이드까지 비친다
   → 활성·이전·다음 3장만 보이고 나머지는 visibility 로 숨김 (creative 가 쓰는 inline opacity/transform 과 충돌 없음) */
.org-pr-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
  visibility: hidden;
}

/* 하단 어두운 그라데이션 */
.org-pr-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.8) 100%);
}

/* 옆 슬라이드 바깥쪽 가장자리 흰 그라데이션 (이전 = 왼쪽, 다음 = 오른쪽) */
.org-pr-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s;
}

.org-pr-slide.swiper-slide-prev::after {
  opacity: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 7%);
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 93%, #fff 100%);
}

.org-pr-slide.swiper-slide-next::after {
  opacity: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 93%, #fff 100%);
}

.org-pr-slide-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.org-pr-slide-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.org-pr-slide-list {
  display: flex;
  align-items: center;
  gap: 40px;
  width: calc(660 * var(--u));
  max-width: 100%;
  list-style: none;
}

.org-pr-slide-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
}

.org-pr-slide-item + .org-pr-slide-item {
  padding-left: 40px;
  border-left: 1px solid #e6e6e6;
}

.org-pr-slide-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.org-pr-slide-item-head span {
  font-size: var(--font-18);
  color: #e6e6e6;
}

.org-pr-slide-item-head strong {
  font-size: var(--font-20);
  font-weight: 600;
}

.org-pr-slide-item-desc {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #e6e6e6;
}

/* 컨트롤: ← ● ● ● → */
.org-pr-ctrl {
  display: flex;
  align-items: center;
  gap: 30px;
}

.org-pr-nav {
  display: flex;
  width: 23px;
  height: 23px;
  transition: opacity 0.3s;
  flex-shrink: 0;
}

.org-pr-nav img {
  width: 100%;
  height: 100%;
}

.org-pr-nav-next img {
  transform: rotate(180deg);
}

.org-pr-nav:hover {
  opacity: 0.6;
}

.org-pr-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.org-pr-pagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0;
  border-radius: 13px;
  background: #e6e6e6;
  opacity: 1;
  transition: width 0.3s, background-color 0.3s;
}

.org-pr-pagination .swiper-pagination-bullet-active {
  width: 15px;
  background: var(--brand-point-sky-blue);
}

@media (prefers-reduced-motion: reduce) {
  .org-pr-slide::after {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:5914 (393 기준) ----------
   활성 320×400(radius 5, padding 20), 양옆 20px 씩 비침(컨테이너 360). 항목은 세로 스택(가로 구분선).
   옆 슬라이드 오프셋은 JS breakpoints (16.25% = 52/320) */
@media (max-width: 1024px) {
  .org-pr {
    padding: 80px 0;
  }

  .org-pr-inner {
    gap: 40px;
    width: 90%;
  }

  .org-pr-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .org-pr-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .org-pr-inner .sec-head-desc {
    font-size: 17px;
  }

  .org-pr-slider {
    width: 360px;
  }

  .org-pr-swiper {
    padding: 0 20px;
  }

  .org-pr-slide {
    gap: 12px;
    height: 400px;
    padding: 20px;
    border-radius: 5px;
  }

  .org-pr-slide-body {
    gap: 12px;
  }

  .org-pr-slide-title {
    font-size: 20px;
    line-height: 1.5;
  }

  .org-pr-slide-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .org-pr-slide-item {
    gap: 4px;
    white-space: normal;
    word-break: keep-all;
  }

  .org-pr-slide-item + .org-pr-slide-item {
    width: 100%;
    padding: 8px 0 0;
    border-left: 0;
    border-top: 1px solid #e6e6e6;
  }

  .org-pr-slide-item-head {
    gap: 4px;
  }

  .org-pr-slide-item-head span   { font-size: 17px; }
  .org-pr-slide-item-head strong { font-size: 17px; }
  .org-pr-slide-item-desc        { font-size: 16px; }
}


/* ---------- 5. 다크 문구 배너 — Figma 152:2453 (PC 1920×360) / 737:5344 (모바일 393×516) ----------
   배경 이미지에 글로우·라인 그래픽이 합성돼 있어 cover 로 깔고 문구만 중앙에 */
.org-start {
  --u: min(0.05208vw, 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(360 * var(--u));
  padding: calc(120 * var(--u)) 20px;
  background: var(--brand-500) url(../img/sub/about/organization/start_bg.png) center / cover no-repeat;
  text-align: center;
}

.org-start-text {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--white);
  word-break: keep-all;
}

.org-start-text strong {
  font-weight: 700;
  color: var(--brand-point-sky-blue);
}

@media (max-width: 1024px) {
  .org-start {
    min-height: 516px;
    padding: 120px 20px;
    background-image: url(../img/sub/about/organization/start_bg_m.jpg);
  }

  .org-start-text {
    font-size: 28px;
    line-height: 1.4;
  }
}


/* ============================================================
   About › History & Activities (pages/about/history.php)
   ============================================================ */

/* ---------- 1. 연혁 타임라인 — Figma 152:3226 ----------
   섹션 padding 120. 좌측 헤드(344) / 우측 타임라인(1066, 오른쪽 끝 정렬).
   행 = [연도 200 · 20 · 원 12] 55 [항목 777]. 세로선(2px)은 원 중심(x = 200+20+6) 에서 첫 원 → 마지막 원.
   연도는 Gothic A1 70px, 20% 투명. 항목: 월(20px 하늘색) 20 제목/설명(18px), 사진 252×171 은 월 폭만큼 들여쓰기 */
.hi-journey {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(120 * var(--u));
}

.hi-journey-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.hi-journey-head {
  flex: 0 0 auto;
  align-items: flex-start;
  text-align: left;
}

.hi-journey-timeline {
  position: relative;
  flex: 0 0 auto;
  width: calc(1066 * var(--u));
  padding-top: calc(28 * var(--u));
}

/* 세로선 */
.hi-journey-line {
  position: absolute;
  top: calc(28 * var(--u) + 16px);              /* 첫 원 중심 (행 높이 32 의 절반) */
  bottom: calc(80 * var(--u) + 16px);           /* 마지막 행 padding-bottom 80 위의 원 중심 근처 */
  left: calc(226 * var(--u) - 1px);
  width: 2px;
  background: #e6e6e6;
  pointer-events: none;
}

.hi-journey-line-fill {
  position: absolute;
  inset: 0;
  background: var(--brand-point-sky-blue);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

.hi-journey-row {
  display: flex;
  align-items: flex-start;
  gap: calc(55 * var(--u));
}

/* 연도 + 원 */
.hi-journey-year {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 32px;
  flex: 0 0 auto;
}

.hi-journey-year-num {
  width: calc(200 * var(--u));
  font-family: "Gothic A1", "Pretendard Variable", sans-serif;
  font-size: clamp(40px, 3.646vw, 70px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
  opacity: 0.2;
}

.hi-journey-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e6e6e6;
  transition: background-color 0.3s;
}

/* 현재 지점 링 (r 11, 두께 10 → 원 바깥 6~16px) */
.hi-journey-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(2, 179, 243, 0.3);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.3s;
}

.hi-journey-year.is-on .hi-journey-dot {
  background: var(--brand-point-sky-blue);
}

.hi-journey-year.is-current .hi-journey-dot::before {
  opacity: 1;
  transform: none;
}

/* 항목 */
.hi-journey-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: calc(777 * var(--u));
  padding-bottom: calc(80 * var(--u));
  list-style: none;
}

.hi-journey-row:last-child .hi-journey-list {
  padding-bottom: 0;
}

.hi-journey-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hi-journey-item-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.hi-journey-month {
  flex: 0 0 24px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.hi-journey-text {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.hi-journey-title {
  font-weight: 600;
}

.hi-journey-desc {
  font-weight: 400;
}

.hi-journey-photo {
  width: calc(252 * var(--u));
  margin-left: 44px;                             /* 월 24 + gap 20 */
  border-radius: 10px;
  overflow: hidden;
}

.hi-journey-photo img {
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .hi-journey-dot,
  .hi-journey-dot::before {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:6061 (393 기준) ----------
   헤드 중앙 → 타임라인 353 (padding-left 12). 행 = [원 12] 32 [연도 40px → 항목들]. 선은 원 중심(x 18)에서 첫 원 → 마지막 원.
   .hi-journey-year 를 display:contents 로 풀어 연도 숫자는 오른쪽 컬럼, 원은 왼쪽 컬럼에 놓는다 (is-on/is-current 셀렉터는 그대로 동작) */
@media (max-width: 1024px) {
  .hi-journey {
    padding: 80px 20px;
  }

  .hi-journey-inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .hi-journey-head {
    align-items: center;
    text-align: center;
  }

  .hi-journey-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hi-journey-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hi-journey-head .sec-head-desc {
    font-size: 17px;
  }

  .hi-journey-timeline {
    width: 100%;
    max-width: 353px;
    padding: 0 0 0 12px;
  }

  .hi-journey-line {
    left: 17px;                                    /* padding 12 + 원 반지름 6 - 1 */
  }

  .hi-journey-row {
    display: grid;
    grid-template-columns: 12px 1fr;
    column-gap: 32px;
    row-gap: 12px;
  }

  .hi-journey-year {
    display: contents;
  }

  .hi-journey-year-num {
    grid-column: 2;
    grid-row: 1;
    width: 90px;
    font-size: 40px;
  }

  .hi-journey-dot {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 10px;                              /* 32px 행 기준 중앙(16) - 반지름 6 */
  }

  .hi-journey-list {
    grid-column: 2;
    grid-row: 2;
    gap: 12px;
    width: 100%;
    padding-bottom: 40px;
  }

  .hi-journey-row:last-child .hi-journey-list {
    padding-bottom: 0;
  }

  .hi-journey-item-head {
    gap: 12px;
  }

  .hi-journey-month {
    font-size: 17px;
  }

  .hi-journey-text {
    font-size: 16px;
    word-break: keep-all;
  }

  .hi-journey-photo {
    width: 193px;
    margin-left: 36px;                             /* 월 24 + gap 12 */
  }
}


/* ---------- 2. 논의에서 실행까지 — Figma 152:3516 ----------
   bg #f7f7f7, padding 120, 컨테이너 1210 (헤드 ↔ 카드 ↔ 인용 사이 60).
   카드: 290×420 알약(흰 배경 + 20px 테두리: A #e6f2f8 → B #cfe8f5 → C #a9d6ee), 내용 중앙 gap 40
     [A 16px light 하늘 / 제목 28px bold #071e2e 2줄] [논의 18px #555 ↓ 달성 20px semibold 하늘]
   인용 박스: 흰 배경, 1px #cfe8f5, radius 12, padding 10 120, 양끝에 Prosto One 큰따옴표(#e6f2f8) */
.hi-review {
  --u: min(0.05208vw, 1px);
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.hi-review-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(60 * var(--u));
  width: 63.02%;
  max-width: 1210px;
  margin: 0 auto;
}

.hi-review-cards {
  display: flex;
  justify-content: center;
  gap: calc(60 * var(--u));
  list-style: none;
}

.hi-review-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  width: calc(290 * var(--u));
  height: calc(420 * var(--u));
  padding: 0 20px;
  border: 20px solid var(--brand-300);
  border-radius: 999px;
  background: var(--white);
  text-align: center;
}

.hi-review-card:nth-child(2) { border-color: var(--brand-200); }
.hi-review-card:nth-child(3) { border-color: #a9d6ee; }

.hi-review-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hi-review-card-letter {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.hi-review-card-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--brand-500);
  white-space: nowrap;
}

.hi-review-card-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.hi-review-card-from {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.hi-review-card-arrow {
  width: 24px;
  height: 8px;
  transform: rotate(90deg);            /* → 원본을 ↓ 로 */
  margin: 8px 0;
}

.hi-review-card-to {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

/* 인용 박스 */
.hi-review-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px calc(120 * var(--u));
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  background: var(--white);
  text-align: center;
}

.hi-review-quote-title {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-point-sky-blue);
}

.hi-review-quote-desc {
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
  word-break: keep-all;
}

/* 따옴표: Figma 글리프를 SVG 로 추출 (img/icons/icon-quote.svg, 37×26). 시안 위치: 좌상 (20, 14), 우하는 180° 회전 */
.hi-review-quote-mark {
  position: absolute;
  top: 14px;
  left: 20px;
  width: 37px;
  height: 26px;
  pointer-events: none;
}

.hi-review-quote-mark.is-end {
  top: auto;
  right: 20px;
  bottom: 14px;
  left: auto;
  transform: rotate(180deg);
}

/* ---------- 모바일 — Figma 737:7924 (393 기준) ----------
   카드 250×330 세로 스택(gap 60), 제목 24px, 날짜 16/17px. 인용 박스 353 (padding 40 20), 따옴표 80px */
@media (max-width: 1024px) {
  .hi-review {
    padding: 80px 20px;
  }

  .hi-review-inner {
    gap: 40px;
    width: 100%;
    max-width: 353px;
  }

  .hi-review-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hi-review-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hi-review-inner .sec-head-desc {
    font-size: 17px;
  }

  .hi-review-cards {
    flex-direction: column;
    align-items: center;
    gap: 60px;
  }

  .hi-review-card {
    gap: 20px;
    width: 250px;
    height: 330px;
  }

  .hi-review-card-title {
    font-size: 24px;
    line-height: 1.5;
  }

  .hi-review-card-from { font-size: 16px; }
  .hi-review-card-to   { font-size: 17px; }

  .hi-review-quote {
    width: 100%;
    padding: 40px 20px;
  }

  .hi-review-quote-title,
  .hi-review-quote-desc {
    font-size: 20px;
  }

  .hi-review-quote-desc {
    font-size: 17px;
  }

  .hi-review-quote-mark {
    top: 16px;
    left: 12px;
    width: 29px;
    height: 20px;
  }

  .hi-review-quote-mark.is-end {
    top: auto;
    right: 12px;
    bottom: 16px;
  }
}


/* ---------- 3. 주요 활동 아코디언 — Figma 152:3700 ----------
   bg #e6f2f8, padding 120, 헤드 ↔ 행 30. 행 = 항목 4개(gap 40), 각 항목 왼쪽 2px 선(#74c3e6) + padding 20 24.
   펼침(.is-open) 918: [사진 469×335 radius 10] 28 [번호 16 / 제목 28 · 60 · 회차 20 / 설명 18 / 버튼]
   접힘 180: 번호 + 제목 24px(줄바꿈). 폭·사진 폭·제목 크기·상세(grid-template-rows)만 transition */
.hi-act {
  --u: min(0.05208vw, 1px);
  background: var(--brand-300);
  padding: calc(120 * var(--u)) 0;
}

.hi-act-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(30 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.hi-act-list {
  display: flex;
  align-items: stretch;
  gap: calc(40 * var(--u));
  list-style: none;
}

.hi-act-item {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 calc(180 * var(--u));
  min-height: calc(375 * var(--u));
  padding: 20px 0 20px 24px;            /* 접힘 180 = 24 + 텍스트 156 (시안 텍스트 박스 147 + 여유) */
  border-left: 2px solid var(--brand-sky-light);
  overflow: hidden;
  outline: none;
  transition: flex-basis 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hi-act-item.is-open {
  flex-basis: calc(918 * var(--u));
}

/* 사진: 폭 0 ↔ 469u, 오른쪽 여백 28 */
.hi-act-visual {
  flex: 0 0 auto;
  width: 0;
  height: calc(335 * var(--u));
  margin-right: 0;
  border-radius: 10px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hi-act-item.is-open .hi-act-visual {
  width: calc(469 * var(--u));
  margin-right: 28px;
}

/* 텍스트 영역: 바깥(.hi-act-body)만 폭이 전환되고 안쪽(.hi-act-body-inner)은 max-content 로 고정 →
   폭이 바뀌는 동안 글자가 다시 줄바꿈되지 않고 잘려 보이기만 한다 */
.hi-act-body {
  align-self: flex-start;
  width: calc(156 * var(--u));
  min-width: 0;
  overflow: hidden;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hi-act-item.is-open .hi-act-body {
  align-self: center;
  width: calc(397 * var(--u));          /* 918 - 24 - 469 - 28 (남는 폭 전부) */
}

.hi-act-body-inner {
  display: flex;
  flex-direction: column;
  width: max-content;
}

.hi-act-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hi-act-no {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

/* 제목 크기는 clamp 폰트 변수 대신 --u 비례(24u / 28u): 텍스트 박스 폭(156u)과 같은 비율로 줄어야
   좁은 화면에서도 접힘 제목("INSTRUCTOR" 등)이 잘리지 않는다 */
.hi-act-title {
  font-weight: 700;
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
  word-break: keep-all;
  transition: font-size 0.4s;
}

.hi-act-item.is-open .hi-act-title {
  width: calc(397 * var(--u));          /* 펼침 본문 폭 안에서 줄바꿈 */
  font-size: calc(28 * var(--u));
  line-height: 1.4;
}

/* 긴 제목(.is-long, 예: ICL Expert INSTRUCTOR Meeting): 펼침 때 한 줄에 맞도록 조금 축소 + 자간 */
.hi-act-item.is-long.is-open .hi-act-title {
  font-size: calc(25 * var(--u));
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.hi-act-item.is-open .hi-act-title br {
  display: none;
}

/* 상세: grid-template-rows 0fr ↔ 1fr 로 높이 전환 + 페이드 */
.hi-act-detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

.hi-act-item.is-open .hi-act-detail {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s 0.25s;
}

.hi-act-detail-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-height: 0;
  overflow: hidden;
  white-space: nowrap;
}

.hi-act-item.is-open .hi-act-detail-inner {
  padding-top: calc(60 * var(--u));
}

.hi-act-round {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.hi-act-desc {
  margin-top: -12px;                    /* inner gap 20 → 시안 8 */
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
  width: calc(371 * var(--u));          /* max-content 래퍼 안에서 줄바꿈 기준이 되는 폭 = 펼침 본문 폭 */
  white-space: normal;                  /* 그 폭 안에서 자연 줄바꿈 (1번은 시안 br 유지) */
  word-break: keep-all;
}

/* 자세히 보기 필 버튼 (목적과 역할 카드 버튼과 동일) */
.hi-act-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 8px 8px 28px;
  border: 1px solid #e6e6e6;
  border-radius: 230px;
  background: var(--white);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
  transition: border-color 0.3s;
}

.hi-act-link:hover {
  border-color: var(--black);
}

.hi-act-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--black);
}

.hi-act-link-icon img {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .hi-act-item,
  .hi-act-visual,
  .hi-act-body,
  .hi-act-title,
  .hi-act-detail {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 737:6274 (393 기준) ----------
   세로 아코디언: 항목 353 (윗선 2px, padding 20 12, 사이 20). 펼침 = 사진(434:310) → 번호 13 / 제목 24 → 회차 17 / 설명 16 / 버튼 60.
   접힘 = 번호 + 제목 20. 탭으로 펼칠 항목 전환 (js/sub.js initActivities 모바일 모드) */
@media (max-width: 1024px) {
  .hi-act {
    padding: 80px 20px;
  }

  .hi-act-inner {
    gap: 40px;
    width: 100%;
    max-width: 353px;
  }

  .hi-act-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hi-act-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hi-act-inner .sec-head-desc {
    font-size: 17px;
  }

  .hi-act-list {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  .hi-act-item,
  .hi-act-item.is-open {
    flex-direction: column;
    align-items: stretch;
    flex-basis: auto;
    min-height: 0;
    padding: 20px 12px;
    border-left: 0;
    border-top: 2px solid var(--brand-sky-light);
    transition: none;
  }

  /* 사진: 접힘 높이 0 ↔ 펼침 434:310 (max-height 로 전환) */
  .hi-act-visual,
  .hi-act-item.is-open .hi-act-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 434 / 310;
    max-height: 0;
    margin: 0;
    border-radius: 6.5px;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hi-act-item.is-open .hi-act-visual {
    max-height: 260px;
    margin-bottom: 20px;
  }

  .hi-act-body,
  .hi-act-item.is-open .hi-act-body {
    align-self: stretch;
    width: 100%;
    overflow: visible;
    transition: none;
  }

  .hi-act-body-inner {
    width: auto;
  }

  .hi-act-no {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
  }

  .hi-act-title,
  .hi-act-item.is-open .hi-act-title {
    width: auto;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    white-space: normal;
  }

  .hi-act-item.is-open .hi-act-title {
    font-size: 24px;
  }

  .hi-act-title br {
    display: none;
  }

  .hi-act-item.is-open .hi-act-detail-inner {
    padding-top: 20px;
  }

  .hi-act-detail-inner {
    white-space: normal;
    word-break: keep-all;
  }

  .hi-act-round { font-size: 17px; }

  .hi-act-desc {
    width: auto;
    font-size: 16px;
  }

  .hi-act-link {
    gap: 12px;
    height: 60px;
    padding: 4px 6px 4px 20px;
  }
}


/* ============================================================
   ICL Overview › ICL이란? (pages/icl-overview/what-icl.php)
   ============================================================ */

/* ---------- 1. Definition · 안구 일러스트 — Figma 171:936 ----------
   figure 900×502 (--u 비례). 그림 프레임 597×582 는 left 262 · top -40 (위로 넘침), 라벨 컬럼은 left 41 · 폭 120 · 세로 중앙 · 간격 60.
   4장의 그림(eye_img1~4, 크기가 조금씩 다름)은 프레임 중앙 정렬로 겹쳐 두고 활성 것만 opacity 1 → 크로스페이드.
   라벨→부위 연결선은 각 라벨 안 절대 위치 SVG(Figma 좌표), currentColor 라 활성 색을 따라간다 */
.wi-def {
  --u: min(0.05208vw, 1px);
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
}

.wi-def-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.wi-def-sub {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--black);
}

.wi-def-sub span {
  margin-left: 0.25em;
  color: var(--brand-deep-2);
}

/* 일러스트 + 라벨 부모 */
.wi-def-figure {
  position: relative;
  width: calc(900 * var(--u));
  height: calc(502 * var(--u));
  margin-top: calc(40 * var(--u));      /* 그림이 위로 40u 넘치므로 그만큼 여유 */
}

.wi-def-eye {
  position: absolute;
  top: calc(-40 * var(--u));
  left: calc(262 * var(--u));
  width: calc(597 * var(--u));
  height: calc(582 * var(--u));
  overflow: hidden;
  pointer-events: none;
}

.wi-def-eye-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s;
}

.wi-def-eye-img.is-on {
  opacity: 1;
}

/* 라벨 */
.wi-def-labels {
  position: absolute;
  top: 50%;
  left: calc(41 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(60 * var(--u));
  width: calc(120 * var(--u));
  transform: translateY(-50%);
  list-style: none;
}

.wi-def-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(42 * var(--u));
  padding: 0 calc(26 * var(--u));
  border: 1px solid #e6e6e6;
  border-radius: 80px;
  background: var(--white);
  font-weight: 700;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

.wi-def-label-3 {
  width: 100%;
}

.wi-def-label.is-active {
  border-color: var(--brand-100);
  color: var(--brand-point-sky-blue);
}

/* 연결선: 라벨 기준 Figma 좌표. 3·4번은 위로 올라가는 선이라 세로 반전 */
.wi-def-line {
  position: absolute;
  color: #e6e6e6;
  pointer-events: none;
  transition: color 0.3s;
}

.wi-def-label.is-active .wi-def-line {
  color: var(--brand-100);
}

.wi-def-label-1 .wi-def-line { left: calc(86 * var(--u));  top: calc(20.5 * var(--u)); width: calc(177.67 * var(--u)); height: calc(60.67 * var(--u)); }
.wi-def-label-2 .wi-def-line { left: calc(86 * var(--u));  top: calc(20.5 * var(--u)); width: calc(189 * var(--u));    height: 1px; }
.wi-def-label-3 .wi-def-line { left: calc(118 * var(--u)); top: calc(-32.5 * var(--u)); width: calc(208.67 * var(--u)); height: calc(56.67 * var(--u)); transform: scaleY(-1); }
.wi-def-label-4 .wi-def-line { left: calc(103 * var(--u)); top: calc(-81 * var(--u));  width: calc(252.67 * var(--u)); height: calc(104.17 * var(--u)); transform: scaleY(-1); }

@media (prefers-reduced-motion: reduce) {
  .wi-def-eye-img,
  .wi-def-label,
  .wi-def-line {
    transition: none;
  }
}

/* 모바일 연결선 오버레이 (PC 에선 숨김) */
.wi-def-lines-mo {
  display: none;
}

/* ---------- 모바일 — Figma 737:8104 (393 기준) ----------
   칩 4개 가로 한 줄(42 높이, 간격 12, 17px) → 40 → 그림 353×294. 연결선은 칩 아래 중앙에서 내려와 부위로 꺾이는
   폴리라인을 JS 가 SVG 오버레이에 그린다 (칩 실제 위치 기준, 활성 칩 것만 하늘색) */
@media (max-width: 1024px) {
  .wi-def {
    padding: 80px 20px;
  }

  .wi-def-inner {
    gap: 40px;
    width: 100%;
    max-width: 353px;
  }

  .wi-def-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .wi-def-inner .sec-head-title {
    font-size: clamp(22px, 7.1vw, 28px);   /* "(Implantable Collamer Lens)" 한 줄 (393 에서 28px) */
    line-height: 1.4;
    white-space: nowrap;
  }

  .wi-def-inner .sec-head-desc {
    font-size: 17px;
  }

  .wi-def-sub {
    font-size: 20px;
  }

  .wi-def-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    height: auto;
    margin-top: 0;
  }

  .wi-def-labels {
    position: static;
    order: -1;                           /* DOM 은 그림 → 칩이지만 모바일은 칩이 위 */
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    width: 100%;
    transform: none;
  }

  .wi-def-label,
  .wi-def-label-3 {
    width: auto;
    height: 42px;
    padding: 0 20px;
    font-weight: 600;
    font-size: 17px;
  }

  .wi-def-line {
    display: none;
  }

  .wi-def-lines-mo {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .wi-def-lines-mo g {
    color: #e6e6e6;
    transition: color 0.3s;
  }

  .wi-def-lines-mo g.is-active {
    color: var(--brand-100);
  }

  .wi-def-eye {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    aspect-ratio: 353 / 294;
    height: auto;
  }
}


/* ---------- 2. Evolution · 1세대 / 2세대 카드 — Figma 198:5967 ----------
   bg #f7f7f7, padding 120, 헤드 ↔ 카드 40, 카드 ↔ 문구 20. 카드 간격 20, 세로 중앙 정렬.
   1세대 360×456 (1px #cdcdcd) — 위 텍스트, 아래 큰 숫자 1~2% (Gothic A1 100px, 자간 -8%)
   2세대 400×476 (2px 하늘색 테두리 + 그림자) — 위 텍스트, 아래 렌즈 사진 335×189 (multiply) */
.wi-evo {
  --u: min(0.05208vw, 1px);
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.wi-evo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  width: 87.5%;
  margin: 0 auto;
}

.wi-evo-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.wi-evo-cards {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wi-evo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--gray-mid);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}

.wi-evo-card-1 {
  width: calc(360 * var(--u));
  height: calc(456 * var(--u));
}

.wi-evo-card-2 {
  width: calc(400 * var(--u));
  height: calc(476 * var(--u));
  border: 2px solid var(--brand-point-sky-blue);
  box-shadow: 2px 4px 33px rgba(35, 62, 103, 0.25);
}

.wi-evo-card-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  white-space: nowrap;
}

.wi-evo-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wi-evo-card-eyebrow {
  font-weight: 300;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.wi-evo-card-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--brand-deep-2);
}

.wi-evo-card-2 .wi-evo-card-title {
  color: var(--brand-point-sky-blue);
}

.wi-evo-card-desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

.wi-evo-card-date {
  font-weight: 600;
  font-size: var(--font-20);
  color: var(--black);
}

.wi-evo-card-2 .wi-evo-card-date {
  color: var(--brand-deep-2);
}

/* 1세대 숫자 */
.wi-evo-stat {
  display: flex;
  flex-direction: column;
}

.wi-evo-stat-figure {
  display: flex;
  align-items: flex-end;
  height: calc(90 * var(--u));
  margin-bottom: -4px;
  color: var(--brand-navy);
}

.wi-evo-stat-num {
  font-family: "Gothic A1", "Pretendard Variable", sans-serif;
  font-size: clamp(56px, 5.2083vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.08em;
}

.wi-evo-stat-unit {
  padding-bottom: 8px;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.wi-evo-stat-label {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-deep);
}

/* 2세대 렌즈 사진 */
.wi-evo-lens {
  align-self: center;
  width: calc(335 * var(--u));
  height: auto;
  mix-blend-mode: multiply;
}

.wi-evo-note {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-deep-2);
}

/* ---------- 모바일 — Figma 737:8178 (393 기준) ----------
   카드 353×380 세로 스택(gap 20), padding 20 12. 글자 13 / 24 / 17 / 16, 숫자 80px / 20px, 렌즈 229 */
@media (max-width: 1024px) {
  .wi-evo {
    padding: 80px 20px;
  }

  .wi-evo-inner {
    gap: 40px;
    width: 100%;
    max-width: 353px;
  }

  .wi-evo-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .wi-evo-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .wi-evo-inner .sec-head-desc {
    font-size: 17px;
  }

  .wi-evo-body {
    width: 100%;
  }

  .wi-evo-cards {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .wi-evo-card,
  .wi-evo-card-1,
  .wi-evo-card-2 {
    width: 100%;
    height: 380px;
    padding: 20px 12px;
  }

  .wi-evo-card-text {
    gap: 12px;
  }

  .wi-evo-card-head {
    gap: 0;
  }

  .wi-evo-card-eyebrow {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
  }

  .wi-evo-card-title {
    font-size: 24px;
    line-height: 1.5;
  }

  .wi-evo-card-desc {
    font-size: 16px;
  }

  .wi-evo-card-date {
    font-size: 17px;
  }

  .wi-evo-stat-figure {
    height: 90px;
  }

  .wi-evo-stat-num {
    font-size: 80px;
  }

  .wi-evo-stat-unit {
    font-size: 20px;
  }

  .wi-evo-stat-label {
    font-size: 16px;
  }

  .wi-evo-lens {
    width: 229px;
  }

  .wi-evo-note {
    font-size: 16px;
  }
}


/* ---------- 3. Timeline · 가로 타임라인 — Figma 198:6076 ----------
   bg #e6f2f8, padding 120. 트랙 = 항목 6개(120 / 178 / 120…, 간격 130) + 좌우 126 여백 = 1680, 선은 트랙 전체 폭에 1px(양끝 점).
   항목: 연도 칩(18px, 1px #42b0db, 흰 배경) → 20 → 점(12px 흰/하늘 테두리) → 20 → 제목 20px(+보조 18px).
   현재(2013): 칩 채움 + 점 채움·링. 트랙 폭은 max-content 고정, 바깥 .wi-tl-scroll 이 overflow-x:auto → 좁은 화면에선 가로 스크롤 */
.wi-tl {
  --u: min(0.05208vw, 1px);
  background: var(--brand-300);
  padding: calc(120 * var(--u)) 0;
}

.wi-tl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}

.wi-tl-scroll {
  width: 100%;
  max-width: 1680px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.wi-tl-scroll::-webkit-scrollbar {
  display: none;
}

.wi-tl-track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(130 * var(--u));
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 0 calc(126 * var(--u));
  list-style: none;
}

/* 선: 칩(40) + 20 + 점 중심(6) = top 66 */
.wi-tl-line {
  position: absolute;
  top: calc(66 * var(--u) - 0.5px);
  right: 0;
  left: 0;
  height: 1px;
  background: var(--brand-100);
  pointer-events: none;
}

.wi-tl-line::before,
.wi-tl-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5.3px;
  height: 5.3px;
  border-radius: 50%;
  background: var(--brand-100);
  transform: translateY(-50%);
}

.wi-tl-line::before { left: 0; }
.wi-tl-line::after  { right: 0; }

.wi-tl-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  width: calc(120 * var(--u));
}

.wi-tl-item:nth-child(3) {           /* 1990 (보조 문구가 있어 넓다) — li 는 2번째부터 (1번째는 .wi-tl-line) */
  width: calc(178 * var(--u));
}

.wi-tl-year {
  padding: 4px 20px;
  border: 1px solid var(--brand-100);
  border-radius: 200px;
  background: var(--white);
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 30px;
  letter-spacing: -0.02em;
  color: var(--brand-100);
}

.wi-tl-dot {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid var(--brand-point-sky-blue);
  border-radius: 50%;
  background: var(--white);
}

.wi-tl-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}

.wi-tl-title {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.wi-tl-sub {
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-2);
}

/* 현재 지점 */
.wi-tl-item.is-current .wi-tl-year {
  border-color: var(--white);
  background: var(--brand-point-sky-blue);
  color: var(--white);
}

.wi-tl-item.is-current .wi-tl-dot {
  border-color: var(--brand-point-sky-blue);
  background: var(--brand-point-sky-blue);
  box-shadow: 0 0 0 10px rgba(2, 179, 243, 0.3);
}

/* ---------- 모바일 — Figma 737:8219 (393 기준) ----------
   같은 구조를 폭 1218(항목 간격 70, 좌우 45)로 두고 가로 스크롤. 칩 16px, 제목 17px, 보조 16px */
@media (max-width: 1024px) {
  .wi-tl {
    padding: 80px 0;
  }

  .wi-tl-inner {
    gap: 40px;
  }

  .wi-tl-inner .sec-head {
    padding: 0 20px;
  }

  .wi-tl-inner .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .wi-tl-inner .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .wi-tl-inner .sec-head-desc {
    font-size: 17px;
  }

  .wi-tl-scroll {
    padding: 0 20px;                  /* 선이 페이지 여백(20)에서 시작 */
  }

  .wi-tl-track {
    gap: 70px;
    padding: 0 45px;
  }

  .wi-tl-line {
    top: calc(66px - 0.5px);
  }

  .wi-tl-item {
    width: 120px;
  }

  .wi-tl-item:nth-child(3) {
    width: 178px;
  }

  .wi-tl-year {
    font-size: 16px;
  }

  .wi-tl-title { font-size: 17px; }
  .wi-tl-sub   { font-size: 16px; }
}


/* ---------- 4. Today · 다크 통계 배너 — Figma 198:6040 (1920×516) / 742:8438 (393×732) ----------
   배경 이미지에 글로우 링이 합성돼 있어 cover 로 깔고 텍스트만 중앙. 헤드 ↔ 숫자 40, 숫자 두 개 사이 160.
   숫자 100px Gothic A1 (#f2f8fb) + 단위 24px bold, 높이 90 바닥 정렬 */
.wi-today {
  --u: min(0.05208vw, 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(516 * var(--u));
  padding: calc(120 * var(--u)) 20px;
  background: var(--brand-500) url(../img/sub/icl-overview/what-icl/today_bg.jpg) center / cover no-repeat;
  color: var(--white);
  text-align: center;
}

.wi-today-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
}

.wi-today-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.wi-today-eyebrow {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.wi-today-title {
  font-weight: 700;
  font-size: var(--font-40);
  line-height: 1.5;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.wi-today-title strong {
  font-weight: 700;
  color: var(--brand-point-sky-blue);
}

.wi-today-stats {
  display: flex;
  gap: calc(160 * var(--u));
  list-style: none;
}

.wi-today-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}

.wi-today-stat-label {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
}

.wi-today-stat-figure {
  display: flex;
  align-items: flex-end;
  height: calc(90 * var(--u));
  color: var(--brand-bg);
}

.wi-today-stat-num {
  font-family: "Gothic A1", "Pretendard Variable", sans-serif;
  font-size: clamp(56px, 5.2083vw, 100px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.wi-today-stat-unit {
  margin-left: 8px;
  padding-bottom: 8px;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- 모바일 — Figma 742:8438 (393×732) ----------
   상하 120, 전부 중앙. 타이틀 28px 3줄, 숫자 세로 스택(gap 40): 라벨 20 bold → 숫자 80 + 단위 20 */
@media (max-width: 1024px) {
  .wi-today {
    min-height: 0;
    padding: 120px 20px;
    background-image: url(../img/sub/icl-overview/what-icl/today_bg_m.jpg);
  }

  .wi-today-inner {
    gap: 40px;
  }

  .wi-today-eyebrow {
    font-size: 17px;
  }

  .wi-today-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .wi-today-stats {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .wi-today-stat {
    align-items: center;
    gap: 8px;
    text-align: center;
  }

  .wi-today-stat-label {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.5;
  }

  .wi-today-stat-figure {
    height: 90px;
  }

  .wi-today-stat-num {
    font-size: 80px;
  }

  .wi-today-stat-unit {
    font-size: 20px;
  }
}


/* ============================================================
   ICL Overview › ICL의 특징 (pages/icl-overview/features.php) — Figma 171:558
   ============================================================ */

/* ---------- 1. Clear Vision · 카드 슬라이더 — Figma 226:940 ----------
   for-you.php 첫 섹션(Who is ICL for? 251:2378)도 이 클래스를 그대로 쓴다.
   섹션 헤드(공용 .sec-head, 설명문 993 폭 + 강조 navy) 아래에 카드 4장을 Swiper 로 가운데 정렬 무한 루프 (js/sub.js initFeaturesSwiper).
   카드 500 × 간격 28 → 슬라이드 폭 528u, 카드는 그 안에서 좌우 14u 여백 (spaceBetween 대신 CSS 로 간격을 --u 비례로) */
.ft-cv {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
  overflow: hidden;
}

.ft-cv-head {
  width: 87.5%;
}

.ft-cv-head .sec-head-desc {
  max-width: calc(993 * var(--u));
}

.ft-cv-head .sec-head-desc strong {
  font-weight: 600;
  color: var(--brand-deep-2);
}

.ft-cv-swiper {
  width: 100%;
}

.ft-cv-swiper .swiper-slide {
  width: calc(528 * var(--u));
  height: auto;
  padding: 0 calc(14 * var(--u));
}

/* for-you.php: 시안 카드 527 (이미지 503×329) — 슬라이드 555u, 모바일은 공통 */
.ft-cv--wide .ft-cv-swiper .swiper-slide {
  width: calc(555 * var(--u));
}

/* 설명은 시안처럼 nowrap + 명시 줄바꿈(br-pc) — 자연 줄바꿈이면 한 글자씩 밀린다 */
.ft-cv--wide .ft-cv-card-desc {
  white-space: nowrap;
}

/* limits.php 합병증: 시안 카드 424 (이미지 400×261, 제목만) — 슬라이드 452u, 모바일은 공통 */
.ft-cv--sm .ft-cv-swiper .swiper-slide {
  width: calc(452 * var(--u));
}

.ft-cv-card {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  height: 100%;
  padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(20 * var(--u));
  border-radius: 20px;
  background: var(--brand-bg);
}

.ft-cv-card-img {
  aspect-ratio: 476 / 311;
  border-radius: 12px;
  overflow: hidden;
}

.ft-cv-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ft-cv-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--black);
  letter-spacing: -0.02em;
}

/* 제목 앞 작은 점(12 폭 칸 안 5px 원) */
.ft-cv-card-title {
  position: relative;
  padding-left: 20px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
}

.ft-cv-card-title::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.8em;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--brand-point-sky-blue);
}

.ft-cv-card-desc {
  padding-left: 20px;
  font-size: var(--font-18);
  line-height: 1.6;
}

/* ---------- 모바일 — Figma 742:8548 (393 기준) ----------
   카드 333 × 간격 12 → 슬라이드 345, 헤드 17/28/17 */
@media (max-width: 1024px) {
  .ft-cv {
    gap: 40px;
    padding: 80px 0;
  }

  .ft-cv-head {
    width: 100%;
    padding: 0 20px;
  }

  .ft-cv-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .ft-cv-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .ft-cv-head .sec-head-desc {
    max-width: none;
    font-size: 17px;
  }

  .ft-cv-swiper .swiper-slide,
  .ft-cv--wide .ft-cv-swiper .swiper-slide,
  .ft-cv--sm .ft-cv-swiper .swiper-slide {   /* PC 폭 변형(specificity 3)보다 우선해야 한다 */
    width: 345px;
    padding: 0 6px;
  }

  .ft-cv-card {
    gap: 20px;
    padding: 12px 12px 20px;
  }

  .ft-cv-card-title {
    font-size: 17px;
  }

  .ft-cv-card-desc {
    font-size: 16px;
  }

  .ft-cv--wide .ft-cv-card-desc {
    white-space: normal;
  }
}


/* ---------- 2. ICL Advantages · 렌즈 도면 + Point 1~4 — Figma 228:3385 ----------
   도면 1680×409u. 렌즈(342×214u) 중앙 상단 52u. 좌측 Point 1·3 은 오른쪽 끝을 608.5u 에, 우측 Point 2·4 는 왼쪽 끝을 1071u 에 맞춰
   텍스트 길이가 달라도 칩(연결선 시작점)은 항상 같은 자리. 연결선은 칩 안에 절대 배치 — 점 중심이 칩 세로 중앙·바깥쪽 끝에 오도록.
   등장: .aos-animate → 렌즈(0s) → 선 그리기(0.4s, 0.8s) → 칩·텍스트(1.1s) */
.ft-adv {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.ft-adv-head {
  width: 87.5%;
}

.ft-adv-figure {
  position: relative;
  width: 87.5%;
  max-width: 1680px;
  height: calc(409 * var(--u));
}

/* PC 에서는 Swiper 를 만들지 않으므로 래퍼는 레이아웃에서 빠지고 Point 가 도면에 직접 절대 배치된다 */
.ft-adv-swiper,
.ft-adv-points {
  display: contents;
}

.ft-adv-pagination {
  display: none;
}

.ft-adv-lens {
  position: absolute;
  left: 50%;
  top: calc(52 * var(--u));
  width: calc(342 * var(--u));
  transform: translateX(-50%);
}

.ft-adv-lens img {
  display: block;
  width: 100%;
}

.ft-adv-point {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  width: auto;
  white-space: nowrap;
}

.ft-adv-point-1,
.ft-adv-point-3 {
  right: calc(1071.5 * var(--u));
  align-items: flex-end;
  text-align: right;
}

.ft-adv-point-2,
.ft-adv-point-4 {
  left: calc(1071 * var(--u));
  align-items: flex-start;
}

.ft-adv-point-1,
.ft-adv-point-2 { top: 0; }

.ft-adv-point-3,
.ft-adv-point-4 { top: calc(270 * var(--u)); }

.ft-adv-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid var(--brand-100);
  border-radius: 80px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-100);
}

/* 연결선: 점 중심(2.667)이 칩 바깥쪽 끝 · 세로 중앙에 오도록 */
.ft-adv-line {
  position: absolute;
  display: block;
  fill: var(--brand-100);
  stroke: var(--brand-100);
  stroke-width: 1;
  overflow: visible;
}

.ft-adv-line circle { stroke: none; }
.ft-adv-line path { fill: none; }

.ft-adv-point-1 .ft-adv-line,
.ft-adv-point-2 .ft-adv-line {
  width: calc(124.374 * var(--u));
  height: calc(70.374 * var(--u));
  top: calc(50% - 2.667 * var(--u));
}

.ft-adv-point-3 .ft-adv-line,
.ft-adv-point-4 .ft-adv-line {
  width: calc(104.361 * var(--u));
  height: calc(35.361 * var(--u));
  bottom: calc(50% - 2.667 * var(--u));
}

/* 좌측 칩은 오른쪽 끝에서 오른쪽으로, 우측 칩은 왼쪽 끝에서 왼쪽으로(좌우 반전) */
.ft-adv-point-1 .ft-adv-line,
.ft-adv-point-3 .ft-adv-line {
  left: calc(100% - 2.667 * var(--u));
}

.ft-adv-point-2 .ft-adv-line,
.ft-adv-point-4 .ft-adv-line {
  right: calc(100% - 2.667 * var(--u));
  transform: scaleX(-1);
}

.ft-adv-point-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: -0.02em;
}

.ft-adv-point-title {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  color: var(--black);
}

.ft-adv-point-desc {
  font-size: var(--font-18);
  line-height: 1.6;
  color: #555;
}

/* ----- 등장 연출: 부모 .ft-adv-figure 의 .aos-animate 하나로 순서 제어 ----- */
.ft-adv-lens {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.ft-adv-line path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease-out;
}

.ft-adv-line circle {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.ft-adv-chip,
.ft-adv-point-body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.ft-adv-figure.aos-animate .ft-adv-lens { opacity: 1; }

.ft-adv-figure.aos-animate .ft-adv-line circle {
  opacity: 1;
  transition-delay: 0.4s;
}

.ft-adv-figure.aos-animate .ft-adv-line path {
  stroke-dashoffset: 0;
  transition-delay: 0.5s;
}

.ft-adv-figure.aos-animate .ft-adv-chip,
.ft-adv-figure.aos-animate .ft-adv-point-body {
  opacity: 1;
  transform: none;
  transition-delay: 1s;
}

@media (prefers-reduced-motion: reduce) {
  .ft-adv-lens,
  .ft-adv-line path,
  .ft-adv-line circle,
  .ft-adv-chip,
  .ft-adv-point-body {
    transition: none;
  }
}

/* ---------- 모바일 — Figma 742:8580 (393 기준) ----------
   Point 4개 = Swiper(353 폭, 가운데 정렬 텍스트) + 점 페이지네이션(6px) → 그 아래 렌즈 265×166. 연결선 없음 */
@media (max-width: 1024px) {
  .ft-adv {
    gap: 40px;
    padding: 80px 0;
  }

  .ft-adv-head {
    width: 100%;
    padding: 0 20px;
  }

  .ft-adv-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .ft-adv-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .ft-adv-head .sec-head-desc {
    font-size: 17px;
  }

  .ft-adv-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 353px;
    height: auto;
    padding: 0 20px;
    box-sizing: content-box;
  }

  .ft-adv-swiper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .ft-adv-points {
    display: flex;
  }

  /* Swiper 기본 페이지네이션(absolute bottom/left, width 100%) 을 흐름 안 가운데로 */
  .ft-adv-swiper .ft-adv-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
  }

  .ft-adv-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: #e6e6e6;
    opacity: 1;
  }

  .ft-adv-pagination .swiper-pagination-bullet-active {
    background: var(--brand-point-sky-blue);
  }

  .ft-adv-lens {
    position: static;
    width: 265px;
    transform: none;
  }

  .ft-adv-point,
  .ft-adv-point-1,
  .ft-adv-point-2,
  .ft-adv-point-3,
  .ft-adv-point-4 {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    align-items: center;
    gap: 20px;
    width: 100%;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
  }

  .ft-adv-line {
    display: none;
  }

  .ft-adv-chip {
    font-size: 16px;
  }

  .ft-adv-point-title {
    font-size: 17px;
  }

  .ft-adv-point-desc {
    font-size: 16px;
  }
}


/* ---------- 3. What makes ICL different · 2열 비교표 — Figma 228:3611 ----------
   항목 444u(#333, 흰 글씨 18 semibold) + 설명 800u(흰 배경, 18 regular), 행 간격 7u, 셀 radius 10 · 상하 padding 14u.
   한 줄 행 57u · 두 줄 행 90u 는 min-height 로 (셀 높이는 행 flex stretch 로 좌우 동일) */
.ft-diff {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: var(--brand-300);
  padding: calc(120 * var(--u)) 0;
}

.ft-diff-head {
  width: 87.5%;
}

.ft-diff-scroll {
  width: 87.5%;
  max-width: 1256px;
}

.ft-diff-table {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  width: 100%;
}

.ft-diff-row {
  display: flex;
  align-items: stretch;
  gap: calc(12 * var(--u));
  min-height: calc(57 * var(--u));
}

.ft-diff-row.is-2 {
  min-height: calc(90 * var(--u));
}

.ft-diff-label,
.ft-diff-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(14 * var(--u)) 20px;
  border-radius: 10px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

.ft-diff-label {
  flex: 0 0 calc(444 * var(--u));
  background: var(--gray-mid-1);
  font-weight: 600;
  color: var(--white);
}

.ft-diff-desc {
  flex: 1 1 auto;
  background: var(--white);
  color: var(--black);
}

/* ---------- 모바일 — Figma 742:8616 (393 기준) ----------
   표 폭 264 + 12 + 730 을 유지하고 좌우 20 여백 안에서 가로 스크롤. 글자 17, 행 57/90 */
@media (max-width: 1024px) {
  .ft-diff {
    gap: 40px;
    padding: 80px 0;
  }

  .ft-diff-head {
    width: 100%;
    padding: 0 20px;
  }

  .ft-diff-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .ft-diff-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .ft-diff-head .sec-head-desc {
    font-size: 17px;
  }

  .ft-diff-scroll {
    width: 100%;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ft-diff-table {
    gap: 7px;
    width: max-content;
    min-width: 100%;
    padding: 0 20px;   /* 스크롤 끝에서도 오른쪽 여백이 남도록 padding 은 표 쪽에 */
    box-sizing: border-box;
  }

  .ft-diff-row {
    gap: 12px;
    min-height: 57px;
  }

  .ft-diff-row.is-2 {
    min-height: 90px;
  }

  .ft-diff-label,
  .ft-diff-desc {
    padding: 14px 20px;
    font-size: 17px;
  }

  .ft-diff-label {
    flex-basis: 264px;
  }

  .ft-diff-desc {
    flex: 0 0 730px;
  }
}


/* ============================================================
   ICL Overview › ICL 수술 과정 (pages/icl-overview/how-icl.php) — Figma 171:779
   ============================================================ */

/* ---------- 1. ICL Surgery Guide · 이미지 카드 2×2 — Figma 242:4396 ----------
   limits.php 4번 섹션(Postoperative Care 254:2966)도 이 클래스를 그대로 쓴다.
   카드 460×300u radius 20, 간격 10u. 하단 캡션 바: 검정 50% + blur 10, padding 11, 흰 글씨 18.
   PC 에서는 Swiper 를 만들지 않으므로 .swiper 래퍼는 display:contents, .swiper-wrapper 를 그리드로 쓴다 */
.hw-guide {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
  overflow: hidden;
}

.hw-guide-head {
  width: 87.5%;
}

.hw-guide-swiper {
  display: contents;
}

.hw-guide-cards {
  display: grid;
  grid-template-columns: repeat(2, calc(460 * var(--u)));
  gap: calc(10 * var(--u));
  width: auto;
}

.hw-guide-card {
  position: relative;
  width: auto;
  height: auto;
  aspect-ratio: 460 / 300;
  border-radius: 20px;
  overflow: hidden;
  background: var(--brand-bg);
}

.hw-guide-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hw-guide-card-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 11px 20px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--white);
  white-space: nowrap;
}

/* ---------- 모바일 — Figma 744:8927 (393 기준) ----------
   카드 340×222 · 간격 10 → 슬라이드 350, 가운데 정렬 루프 + 자동재생. 캡션 16 / padding 8 */
@media (max-width: 1024px) {
  .hw-guide {
    gap: 40px;
    padding: 80px 0;
  }

  .hw-guide-head {
    width: 100%;
    padding: 0 20px;
  }

  .hw-guide-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hw-guide-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hw-guide-head .sec-head-desc {
    font-size: 17px;
  }

  .hw-guide-swiper {
    display: block;
    width: 100%;
  }

  .hw-guide-cards {
    display: flex;
    gap: 0;
    width: 100%;
  }

  .hw-guide-card {
    width: 340px;
    height: 222px;
    margin: 0 5px;
    aspect-ratio: auto;
  }

  .hw-guide-card-caption {
    padding: 8px 20px;
    font-size: 16px;
  }
}

/* ---------- 2. How ICL works · STEP 1~3 — Figma 251:1949 ----------
   컨테이너 1200u, 열 410 / 410 / 386u. 열 = 왼쪽 2px 세로선 + padding 20u 위 · 24u 좌우(마지막 열은 왼쪽만),
   안쪽: STEP 칩(--brand-300 배경, 12 radius, 18px --brand-100) → 12u → 설명 20 semibold #555 → 28u → 이미지 360×243u radius 10.
   PC 는 Swiper 없이 .swiper 래퍼 display:contents + .swiper-wrapper 를 flex 행으로 */
.hw-step {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
  overflow: hidden;
}

.hw-step-head {
  width: 87.5%;
}

.hw-step-swiper {
  display: contents;
}

.hw-step-cols {
  display: flex;
  align-items: stretch;
  width: calc(1200 * var(--u));
}

.hw-step-col {
  flex: 0 0 calc(410 * var(--u));
  width: auto;
  height: auto;
  padding: calc(20 * var(--u)) calc(24 * var(--u)) 0;
  border-left: 2px solid var(--brand-sky-light);
}

.hw-step-col:last-child {
  flex-basis: calc(386 * var(--u));
  padding-right: 0;
}

.hw-step-col-inner {
  display: flex;
  flex-direction: column;
  gap: calc(28 * var(--u));
  width: calc(360 * var(--u));
}

.hw-step-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(12 * var(--u));
}

.hw-step-chip {
  display: inline-block;
  padding: 4px 20px;
  border-radius: 12px;
  background: var(--brand-300);
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-100);
}

.hw-step-desc {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #555;
  white-space: nowrap;
}

.hw-step-img {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 243;
  border-radius: 10px;
  object-fit: cover;
}

/* ---------- 모바일 — Figma 744:8983 (393 기준) ----------
   열 = 2 + 24 + 280 + 24 = 330 폭 슬라이드, 가운데 정렬 루프 + 자동재생. 칩 16 / 설명 17 / 이미지 280×189 */
@media (max-width: 1024px) {
  .hw-step {
    gap: 40px;
    padding: 80px 0;
  }

  .hw-step-head {
    width: 100%;
    padding: 0 20px;
  }

  .hw-step-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hw-step-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hw-step-swiper {
    display: block;
    width: 100%;
  }

  .hw-step-cols {
    width: 100%;
  }

  .hw-step-col,
  .hw-step-col:last-child {
    flex: 0 0 auto;
    width: 330px;
    margin: 0 8px;             /* 열 사이 16 — 옆 슬라이드는 세로선만 살짝 보이게 */
    padding: 20px 24px 0;
  }

  .hw-step-col-inner {
    gap: 28px;
    width: 280px;
  }

  .hw-step-text {
    gap: 12px;
  }

  .hw-step-chip {
    font-size: 16px;
  }

  .hw-step-desc {
    font-size: 17px;
  }
}


/* ---------- 3. ICL Recovery · 회복 과정 슬라이더 — Figma 251:2118 ----------
   컨테이너 1200u(overflow visible, 섹션이 자른다). 슬라이드 1060u = 이미지 600×400u(r24) + 60u + 텍스트 400u, 슬라이드 간격 280u(margin).
   활성 슬라이드가 왼쪽에 붙고 다음 슬라이드는 오른쪽 바깥에 opacity .3 으로. 텍스트: 카운터(← 01 · 04 →) 50u ↓ 칩 20u ↓ 제목 30 28u ↓ 설명 18 */
.hw-rc {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: var(--brand-300);
  padding: calc(120 * var(--u)) 0;
  overflow: hidden;
}

.hw-rc-head {
  width: 87.5%;
}

.hw-rc-swiper {
  width: calc(1200 * var(--u));
  overflow: visible;
}

.hw-rc-slide {
  display: flex;
  align-items: center;
  gap: calc(60 * var(--u));
  width: calc(1060 * var(--u));
  height: auto;
  margin-right: calc(280 * var(--u));
  opacity: 0.3;
  transition: opacity 0.5s;
}

.hw-rc-slide.swiper-slide-active {
  opacity: 1;
}

/* 이전 슬라이드는 왼쪽 여백에 글자 끝이 비치므로 숨김(이전으로 넘길 때 fade-in) */
.hw-rc-slide.swiper-slide-prev {
  opacity: 0;
}

.hw-rc-img {
  flex: 0 0 calc(600 * var(--u));
  aspect-ratio: 600 / 400;
  border-radius: 24px;
  overflow: hidden;
}

.hw-rc-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hw-rc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(50 * var(--u));
  width: calc(400 * var(--u));
  color: #262626;
  letter-spacing: -0.02em;
}

/* 카운터 + 화살표 (화살표 = prev/next 버튼) */
.hw-rc-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.4;
}

.hw-rc-nav-btn {
  display: block;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hw-rc-nav-btn img {
  display: block;
  width: 100%;
  height: 100%;
}

.hw-rc-nav-prev img {
  transform: scaleX(-1);
}

.hw-rc-nav-dot,
.hw-rc-nav-total {
  opacity: 0.3;
}

.hw-rc-nav-dot {
  font-size: 24px;
  line-height: 1;
}

.hw-rc-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(28 * var(--u));
  width: 100%;
}

.hw-rc-chip {
  display: inline-block;
  margin-bottom: calc(-8 * var(--u));      /* 칩 ↔ 제목 20u (text gap 28 - 8) */
  padding: 4px 20px;
  border-radius: 12px;
  background: #a9d6ee;
  font-size: var(--font-18);
  line-height: 1.6;
  color: var(--brand-navy);
}

.hw-rc-title {
  font-weight: 700;
  font-size: var(--font-30);
  line-height: 1.4;
}

.hw-rc-desc {
  font-size: var(--font-18);
  line-height: 1.6;
  color: #404040;
  white-space: nowrap;
}

/* ---------- 모바일 — Figma 744:9039 (393 기준) ----------
   컨테이너 353(좌우 20), 슬라이드 343 세로 스택: 이미지 343×229 ↓40 카운터 ↓20 칩 ↓20 제목 24 ↓28 설명 16. 슬라이드 간격 20 */
@media (max-width: 1024px) {
  .hw-rc {
    gap: 40px;
    padding: 80px 0;
  }

  .hw-rc-head {
    width: 100%;
    padding: 0 20px;
  }

  .hw-rc-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .hw-rc-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .hw-rc-head .sec-head-desc {
    font-size: 17px;
  }

  .hw-rc-swiper {
    width: calc(100% - 40px);
  }

  .hw-rc-slide {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 343px;
    margin-right: 20px;
  }

  .hw-rc-img {
    flex: none;
    width: 100%;
    aspect-ratio: 343 / 229;
  }

  .hw-rc-body {
    gap: 20px;
    width: 100%;
  }

  .hw-rc-nav {
    font-size: 17px;
    line-height: 1.6;
  }

  .hw-rc-text {
    gap: 28px;
  }

  .hw-rc-chip {
    margin-bottom: -8px;
    font-size: 16px;
  }

  .hw-rc-title {
    font-size: 24px;
    line-height: 1.5;
  }

  .hw-rc-desc {
    font-size: 16px;
    white-space: normal;
    word-break: keep-all;
  }
}


/* ============================================================
   ICL Overview › 이런 분들이 ICL을 고려할 수 있습니다 (pages/icl-overview/for-you.php) — Figma 171:831
   1번 섹션은 features.php 의 .ft-cv 를 그대로 쓴다
   ============================================================ */

/* ---------- 2. Detailed ICL · 정밀검사 이미지 카드 2장 — Figma 251:2581 ----------
   카드 600×480u r20, 간격 10u. 사진 위 그라데이션(40% 투명 → 검정 50%) + 흰 텍스트 좌하단 padding 20u (제목 28 bold / 설명 18) */
.fy-exam {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.fy-exam-head {
  width: 87.5%;
}

.fy-exam-cards {
  display: flex;
  gap: calc(10 * var(--u));
  width: 87.5%;
  max-width: 1210px;
}

.fy-exam-card {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 600 / 480;
  border-radius: 20px;
  overflow: hidden;
  background: var(--white);
}

.fy-exam-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fy-exam-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}

.fy-exam-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: calc(20 * var(--u));
  color: var(--white);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.fy-exam-card-title {
  font-weight: 700;
  font-size: var(--font-28);
  line-height: 1.4;
}

.fy-exam-card-desc {
  font-size: var(--font-18);
  line-height: 1.6;
}

/* ---------- 모바일 (393 기준, 시안 없음 — PC 값 축소) ----------
   카드 세로 스택(폭 100%, 같은 비율), 제목 22 / 설명 16 줄바꿈 허용 */
@media (max-width: 1024px) {
  .fy-exam {
    gap: 40px;
    padding: 80px 0;
  }

  .fy-exam-head {
    width: 100%;
    padding: 0 20px;
  }

  .fy-exam-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .fy-exam-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .fy-exam-head .sec-head-desc {
    font-size: 17px;
  }

  .fy-exam-cards {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: none;
    padding: 0 20px;
  }

  .fy-exam-card {
    flex: none;
  }

  /* 모바일은 사진이 작아 글자가 밝은 부분에 걸리므로 그라데이션을 더 진하게 */
  .fy-exam-card::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.65) 100%);
  }

  .fy-exam-card-body {
    padding: 20px;
    white-space: normal;
    word-break: keep-all;
  }

  .fy-exam-card-title {
    font-size: 22px;
  }

  .fy-exam-card-desc {
    font-size: 16px;
  }
}


/* ============================================================
   ICL Overview › 한계와 주의점 (pages/icl-overview/limits.php) — Figma 171:883
   ============================================================ */

/* ---------- 1. Before ICL Surgery · 헤드 + 와이드 이미지 — Figma 251:2671 ----------
   헤드는 공용 .sec-head 에 강조 문장(.lm-intro-lead, 20 semibold navy) 한 줄 추가. 이미지 1200×435u r12 */
.lm-intro {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: var(--white);
  padding: calc(120 * var(--u)) 0;
}

.lm-intro-head {
  width: 87.5%;
}

.lm-intro-lead {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--brand-deep-2);
}

.lm-intro-figure {
  width: 87.5%;
  max-width: 1200px;
  aspect-ratio: 1200 / 435;
  border-radius: 12px;
  overflow: hidden;
}

.lm-intro-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 모바일 — Figma 744:9500 (393 기준) ----------
   헤드 17/28/17, 이미지 353×238 (cover) */
@media (max-width: 1024px) {
  .lm-intro {
    gap: 40px;
    padding: 80px 0;
  }

  .lm-intro-head {
    width: 100%;
    padding: 0 20px;
  }

  .lm-intro-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .lm-intro-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .lm-intro-lead {
    font-size: 17px;
  }

  /* 마지막 줄(27자)이 353 폭에 딱 걸려서 시안처럼 한 줄로 — 좁은 기기는 글자를 살짝 줄인다 */
  .lm-intro-head .sec-head-desc {
    font-size: clamp(14px, 4.33vw, 17px);
    white-space: nowrap;
  }

  .lm-intro-figure {
    position: relative;
    width: calc(100% - 40px);
    max-width: none;
    aspect-ratio: 353 / 238;
    border-radius: 8px;
  }

  /* intro_img.jpg 는 1200×435 (렌즈가 왼쪽 8~58%) — cover 로 잘릴 때 렌즈가 다 보이도록 왼쪽 기준 */
  .lm-intro-figure img {
    object-position: 10% 50%;
  }
}


/* ---------- 2. ICL Restrictions · 번호 리스트 — Figma 251:2749 ----------
   행 1200u × (padding 32u + 원 48u) 완전 라운드 흰 배경, 간격 16u. 원 48u 스카이블루 + 흰 숫자 24 bold, 제목 24 bold #333 */
.lm-limit {
  --u: min(0.05208vw, 1px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(40 * var(--u));
  background: #f7f7f7;
  padding: calc(120 * var(--u)) 0;
}

.lm-limit-head {
  width: 87.5%;
}

.lm-limit-list {
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  width: 87.5%;
  max-width: 1200px;
}

.lm-limit-item {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(32 * var(--u));
  border-radius: 9999px;
  background: var(--white);
}

.lm-limit-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  border-radius: 50%;
  background: var(--brand-point-sky-blue);
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1;
  color: var(--white);
}

.lm-limit-text {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--gray-mid-1);
  word-break: keep-all;
}

/* ---------- 모바일 — Figma 744:9526 (393 기준) ----------
   행 353 폭 padding 20, 원 36 + 숫자 20, 제목 20, 간격 12. 헤드 제목 ↔ 설명 20 */
@media (max-width: 1024px) {
  .lm-limit {
    gap: 40px;
    padding: 80px 0;
  }

  .lm-limit-head {
    width: 100%;
    padding: 0 20px;
  }

  .lm-limit-head .sec-head-subtitle {
    margin-bottom: 8px;
    font-size: 17px;
  }

  .lm-limit-head .sec-head-title {
    font-size: 28px;
    line-height: 1.4;
  }

  .lm-limit-head .sec-head-desc {
    margin-top: 16px;
    font-size: 17px;
  }

  .lm-limit-list {
    gap: 16px;
    width: 100%;
    max-width: none;
    padding: 0 20px;
  }

  .lm-limit-item {
    gap: 12px;
    padding: 20px;
  }

  .lm-limit-num {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .lm-limit-text {
    font-size: 20px;
  }
}



/* ============================================
   Media › 학술 행사 일정 — 월 달력 (pages/media/event.php)
   Figma 315:12022 — 섹션 헤드 + 월 이동 + 7×6 달력 + "다음 예정 행사" 박스 + 목록
   격자 선은 컨테이너가 위/왼쪽, 칸이 오른쪽/아래를 그려 1px 로 겹치지 않게 한다
   ============================================ */

.cal {
  position: relative;
  background: var(--white);
  padding: min(6.25vw, 120px) 0 min(10.42vw, 200px);
}

.cal-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(2.083vw, 40px);
  /* 시안 그대로 1200 고정 (뷰포트가 좁으면 좌우 20 씩 띄우고 줄인다) */
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.cal-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  transition: opacity 0.15s ease;
}

/* 달 이동(ajax) 로 조각을 받아오는 동안 */
.cal-board.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- 월 이동 ---------- */

.cal-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.cal-nav-btn:hover {
  opacity: 0.6;
}

/* 월 타이틀은 버튼이다 — 누르면 날짜 선택 팝업(#cal-picker)이 열린다 */
.cal-nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s ease;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--black);
  white-space: nowrap;
}

.cal-nav-title:hover {
  opacity: 0.6;
}

.cal-nav-icon {
  width: 30px;
  height: 30px;
}

/* ---------- 달력 격자 ----------
   진짜 <table>. table-layout:fixed 라야 7열이 정확히 1/7(=171.43) 로 고정된다 —
   div+grid(1fr) 로 짜면 칸 안의 긴 행사 제목이 열을 밀어내 폭이 들쭉날쭉해진다.
   border-collapse:collapse 라 칸끼리 선을 나눠 써 어디서나 1px 로 보인다. */

.cal-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.cal-head-cell {
  height: 45px;
  border: 1px solid var(--gray-mid);
  background: var(--brand-bg);
  font-weight: 500;
  font-size: var(--font-18);
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-navy);
}

.cal-head-cell.is-sun {
  color: #ff0000;
}

/* 아래 여백만 20 → 12. 시안 수치(날짜 23.4 + gap 10 + 행사 2건 44 + 상하 여백 40)를 그대로 쓰면
   행 높이가 113.33 을 4px 넘겨 본문이 680 을 넘는다. 행사 아래 여백은 눈에 띄지 않는 값이라 여기서 줄인다.
   td 의 height 는 최소 높이로 동작한다 — 행사가 3건 이상인 날만 그만큼 늘어난다 (시안 본문 680 / 6행). */
.cal-cell {
  height: 113.333px;
  padding: 20px 0 12px;
  border: 1px solid var(--gray-mid);
  vertical-align: top;
}

.cal-day {
  font-weight: 500;
  font-size: var(--font-18);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--black);
}

.cal-day.is-sun {
  color: #ff0000;
}

/* 지난달·다음달에서 넘어온 칸 */
.cal-cell.is-outside .cal-day,
.cal-cell.is-outside .cal-day.is-sun {
  color: #e6e6e6;
}

.cal-day.is-today {
  width: 32px;
  height: 32px;
  margin: -4px auto;     /* 원이 커진 만큼 행 높이를 밀지 않게 */
  border-radius: 50%;
  background: var(--brand-point-sky-blue);
  line-height: 32px;
  color: var(--white);
}

/* ---------- 칸 안의 행사 ---------- */

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
}

/* margin 8 + padding 4 = 시안의 좌우 12. 호버 배경은 padding 안쪽에만 깔린다 */
.cal-event {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 16px);
  min-width: 0;
  height: 20px;
  margin: 0 8px;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 4px;
  text-align: left;
  transition: background 0.2s ease;
}

.cal-event:hover,
.cal-event.is-active {
  background: var(--brand-bg);
}

.cal-event-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* flex 항목은 min-width:0 이 없으면 글자 길이만큼 버텨 칸 밖으로 넘친다.
   칸 폭이 차면 여기서 말줄임(…)으로 끊는다 */
.cal-event-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-16);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--black);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 행사 팝오버 (달력 칸의 행사 클릭) ---------- */

/* PC 는 칸 옆에 붙는 팝오버라 껍데기가 곧 카드 크기다 (위치는 js 가 left/top 으로 잡는다).
   모바일에서는 껍데기가 화면 전체를 덮는 모달이 되고 딤이 보인다 — 아래 모바일 블록 참고. */
.cal-popover {
  position: absolute;
  z-index: 20;
  width: 343px;
}

.cal-popover[hidden] {
  display: none;
}

.cal-popover-dim {
  display: none;
}

.cal-popover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 20px;
  border-radius: 20px;
  background: var(--brand-bg);
  box-shadow: 0 4px 7px rgba(20, 96, 138, 0.3);
}

.cal-popover-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.cal-popover-close img {
  width: 100%;
  height: 100%;
}

.cal-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cal-detail-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.cal-detail-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding-right: 24px;   /* 닫기 버튼 자리 */
}

.cal-detail-title {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.cal-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
}

/* 구분 칩 — 배경·글자색은 event_types() 값이 인라인으로 들어온다 */
.cal-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 4px 18px;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ---------- 날짜 선택 팝업 (월 타이틀 클릭) ----------
   딤 깔린 화면 중앙 모달. 본문 격자(.cal-picker-grid)는 js/sub.js 가 뷰별로 그린다.
   일별 7열 / 월별·년도 4열 — 어느 뷰로 바꿔도 카드 폭이 흔들리지 않게 카드는 폭 고정. */

.cal-picker {
  position: fixed;
  inset: 0;
  z-index: 1100;              /* 헤더(999) 위 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cal-picker[hidden] {
  display: none;
}

.cal-picker-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.cal-picker-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 400px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 4px 7px rgba(20, 96, 138, 0.3);
}

.cal-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cal-picker-heading {
  font-weight: 700;
  font-size: var(--font-20);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
}

.cal-picker-close {
  flex: none;
  width: 24px;
  height: 24px;
}

.cal-picker-close img {
  width: 100%;
  height: 100%;
}

/* ---------- 뷰 스위처 (년도 / 월별 / 일별) ---------- */

.cal-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: var(--brand-bg);
}

.cal-picker-tab {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-16);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--gray-mid-3);
  transition: background 0.2s ease, color 0.2s ease;
}

.cal-picker-tab:hover {
  color: var(--brand-deep-2);
}

.cal-picker-tab.is-active {
  background: var(--brand-point-sky-blue);
  color: var(--white);
}

/* ---------- 뷰 안 이동 (일별=±1달 · 월별=±1년 · 년도=±12년) ---------- */

.cal-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cal-picker-nav-btn {
  flex: none;
  width: 24px;
  height: 24px;
  transition: opacity 0.2s ease;
}

.cal-picker-nav-btn:hover {
  opacity: 0.6;
}

.cal-picker-nav-btn img {
  width: 100%;
  height: 100%;
}

/* 제목을 누르면 한 단계 위로 (일 → 월 → 년). 년도 뷰에서는 더 올라갈 데가 없어 disabled */
.cal-picker-nav-title {
  flex: 1;
  font-weight: 700;
  font-size: var(--font-20);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--black);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.cal-picker-nav-title:not(:disabled):hover {
  color: var(--brand-point-sky-blue);
}

.cal-picker-nav-title:disabled {
  cursor: default;
}

/* ---------- 격자 ---------- */

.cal-picker-grid {
  display: grid;
  gap: 2px;
}

.cal-picker-grid.is-day {
  grid-template-columns: repeat(7, 1fr);
}

.cal-picker-grid.is-month,
.cal-picker-grid.is-year {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.cal-picker-dow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-weight: 600;
  font-size: var(--font-14);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
}

.cal-picker-dow.is-sun {
  color: #ff0000;
}

.cal-picker-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--font-16);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--black);
  transition: background 0.15s ease, color 0.15s ease;
}

.cal-picker-grid.is-month .cal-picker-cell,
.cal-picker-grid.is-year .cal-picker-cell {
  height: 48px;
}

.cal-picker-cell:hover {
  background: var(--brand-300);
}

.cal-picker-cell.is-sun {
  color: #ff0000;
}

/* 앞뒤 달 넘침 칸 — 눌러도 되지만 흐리게 */
.cal-picker-cell.is-outside {
  color: var(--gray-mid);
}

/* 달력이 지금 보고 있는 연/월 */
.cal-picker-cell.is-current {
  background: var(--brand-200);
  font-weight: 700;
  color: var(--brand-deep-2);
}

/* 오늘 — 달력 본체(.cal-day.is-today)와 같은 하늘색 */
.cal-picker-cell.is-today {
  background: var(--brand-point-sky-blue);
  font-weight: 700;
  color: var(--white);
}

.cal-picker-cell.is-today:hover {
  background: var(--brand-100);
}

/* ---------- 바닥 ---------- */

.cal-picker-foot {
  display: flex;
  justify-content: center;
}

.cal-picker-today {
  padding: 10px 24px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  font-weight: 600;
  font-size: var(--font-16);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--brand-deep-2);
  transition: background 0.2s ease, color 0.2s ease;
}

.cal-picker-today:hover {
  background: var(--brand-100);
  color: var(--white);
}

/* 팝업에서 날짜를 고르면 그 칸을 짚어 준다 (모바일 날짜 패널도 같은 클래스를 쓴다) */
.cal-cell.is-selected {
  background: var(--brand-bg);
}


/* ---------- 다음 예정 행사 (강조 박스) ---------- */

.cal-next {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 20px;
  border: 2px solid var(--brand-100);
  border-radius: 20px;
  background: var(--brand-bg);
}

.cal-next-title {
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-500);
}

.cal-next-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 시안: 항목 32 → 구분선 → 32 */
.cal-next-list > li + li {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-mid);
}

/* ---------- 행사 한 줄 (박스 안 · 아래 목록 공용) ---------- */

.cal-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  width: 100%;
  padding-left: 8px;
}

.cal-item-date {
  flex: none;
  width: 148px;
  padding: 0 8px;
  font-weight: 700;
  font-size: var(--font-24);
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--brand-deep-2);
  white-space: nowrap;
}

.cal-item-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-right: 220px;   /* 오른쪽 "자세히 보기" 자리 */
}

.cal-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cal-item-title {
  font-weight: 600;
  font-size: var(--font-20);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--black);
}

.cal-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 60px;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-4);
}

.cal-item-more {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* ---------- 아래 목록 (선만 있는 형태) ---------- */

.cal-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cal-item-plain {
  padding: 32px 8px;
  border-bottom: 1px solid var(--gray-mid-4);
}

.cal-item-plain .cal-item-date {
  color: var(--brand-500);
}

/* 목록 쪽 "자세히 보기" 는 원형 버튼 없이 텍스트 + 화살표 */
.cal-item-more-plain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  right: 44px;
  padding: 8px 0;
  font-weight: 600;
  font-size: var(--font-18);
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: var(--gray-mid-3);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.cal-item-more-plain:hover {
  color: var(--black);
}

.cal-item-more-icon {
  display: flex;
  flex: none;
  width: 24px;
  height: 24px;
}

.cal-item-more-icon img {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.cal-item-more-plain:hover .cal-item-more-icon img {
  transform: rotate(90deg) translateY(-3px);
}

.cal-empty {
  padding: min(6.25vw, 120px) 0;
  font-size: var(--font-20);
  line-height: 1.6;
  text-align: center;
  color: var(--gray-mid-3);
}

/* 팝오버 내용의 원본 (화면에 안 보인다) */
.cal-details {
  display: none;
}


/* ---------- 모바일 (Figma 683:5807 목록 · 683:4927 팝업) ----------
   달력 폭 353. 칸이 좁아 제목이 안 들어가므로 구분 색 점만 찍고,
   날짜를 누르면 그 날 행사를 딤 깔린 화면 중앙 모달로 띄운다.
   "다음 예정 행사"·목록은 세로로 쌓이고 시안에 "자세히 보기" 버튼이 없다(제목을 눌러 상세로 간다). */
@media (max-width: 1024px) {
  .cal {
    padding: 80px 0;
  }

  .cal-inner {
    gap: 40px;
    width: 100%;
    padding: 0 20px;
  }

  .cal-board {
    gap: 26.667px;   /* 시안: 월 이동 ↔ 달력 */
  }

  /* ---------- 월 이동 ---------- */

  .cal-nav {
    gap: 17.778px;
  }

  .cal-nav-btn {
    width: 21.333px;
    height: 21.333px;
  }

  .cal-nav-title {
    gap: 7.111px;
    font-size: 20px;
  }

  .cal-nav-icon {
    width: 24px;
    height: 24px;
  }

  /* ---------- 격자 (시안: 헤더 40 · 본문 432 = 6행 × 72) ---------- */

  .cal-head-cell {
    height: 40px;
    font-size: 16px;
  }

  .cal-cell {
    height: 72px;
    padding: 17.778px 0;
    cursor: pointer;
  }

  .cal-day {
    font-size: 16px;
  }

  .cal-day.is-today {
    width: 28.444px;
    height: 28.444px;
    margin: -3px auto;
    line-height: 28.444px;
  }

  /* 제목은 숨기고 점만 왼쪽부터 가로로 (시안: 6px 점, 간격 2, 좌우 여백 10) */
  .cal-events {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-start;
    margin-top: 8.889px;
    padding: 0 10px;
    pointer-events: none;   /* 칸 전체가 버튼 역할 */
  }

  .cal-event {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }

  .cal-event-dot {
    width: 6px;
    height: 6px;
  }

  .cal-event-title {
    display: none;
  }

  .cal-event:hover,
  .cal-event.is-active {
    background: none;
  }

  /* ---------- 팝업: 딤 깔린 화면 중앙 모달 ---------- */

  .cal-popover {
    position: fixed;
    inset: 0;
    z-index: 1100;          /* 헤더(999) 위 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 20px;
  }

  .cal-popover-dim {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(0, 0, 0, 0.6);
  }

  .cal-popover-card {
    position: relative;
    z-index: 1;
    width: 353px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  /* 같은 날 행사가 여럿이면 카드 안에 쌓인다 */
  .cal-popover-body .cal-detail + .cal-detail {
    padding-top: 20px;
    border-top: 1px solid var(--gray-mid);
  }

  .cal-popover-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .cal-detail-title {
    font-size: 17px;
  }

  .cal-detail-meta,
  .cal-chip {
    font-size: 16px;
  }

  /* 팝업 안 "자세히 보기" — 시안: 높이 60, 좌 20 / 우 6 */
  .cal-detail-more {
    height: 60px;
    padding: 4px 6px 4px 20px;
    gap: 12.727px;
    font-size: 17px;
  }

  /* ---------- 날짜 선택 팝업 ---------- */

  .cal-picker-card {
    width: 353px;
    gap: 16px;
    padding: 20px;
  }

  .cal-picker-heading,
  .cal-picker-nav-title {
    font-size: 17px;
  }

  .cal-picker-tab {
    font-size: 14px;
  }

  .cal-picker-cell {
    height: 38px;
    font-size: 15px;
  }

  .cal-picker-grid.is-month .cal-picker-cell,
  .cal-picker-grid.is-year .cal-picker-cell {
    height: 44px;
  }

  .cal-picker-today {
    font-size: 15px;
  }

  /* ---------- 다음 예정 행사 · 목록 ---------- */

  .cal-next {
    gap: 12px;
    padding: 20px 12px;
  }

  .cal-next-title {
    font-size: 20px;
  }

  /* 날짜 → (칩 + 제목) → 메타 순으로 쌓는다 */
  .cal-item {
    flex-direction: column;
    gap: 20px;
    padding-left: 0;
  }

  .cal-item-date {
    width: auto;
    padding: 0;
    font-size: 20px;
    text-align: left;
  }

  .cal-item-body {
    gap: 8px;
    width: 100%;
    padding-right: 0;
  }

  .cal-item-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cal-item-title {
    font-size: 17px;
  }

  .cal-item-meta {
    gap: 4px 12px;
    font-size: 16px;
  }

  /* 시안에는 목록·박스에 "자세히 보기" 버튼이 없다 (제목 줄이 상세로 가는 링크) */
  .cal-item-more {
    display: none;
  }

  .cal-next-list > li + li {
    margin-top: 32px;
    padding-top: 32px;
  }

  .cal-item-plain {
    padding: 20px 0 20px 8px;
  }
}