/* ==========================================================================
   동래성모안과 — 개별 페이지 전용 컴포넌트
   (허브 / 시술 상세 / 의료진 / 둘러보기 / 비급여 / 게시판)
   detail.css 와 함께 로드합니다.
   ========================================================================== */

/* --- 허브: 과목 카드 그리드 ------------------------------------------------ */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.hub-card .en {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-primary-deep);
}
.hub-card h3 { font-size: var(--fs-h3); font-weight: 700; }
.hub-card p  { margin-top: 10px; font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose); }
.hub-card .btn-text { margin-top: var(--sp-2); }
/* 질환 사진 위에 "환자가 보는 장면"이 겹쳐 있다가 마우스를 올리면 드러남.
   사진 영역은 상세 페이지 링크 (자세히 보기와 중복이라 탭 순서·낭독에서는 뺌) */
.hub-card .ratio > .hub-view { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.8s var(--ease); }
.hub-card:hover .ratio > .hub-view,
.hub-card:focus-within .ratio > .hub-view { opacity: 1; }
a.ratio { display: block; }

/* 카드가 2장뿐인 묶음 (진료예약: 전화 · 네이버) */
.hub-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: var(--container-text); margin-inline: auto; }
@media screen and (max-width: 1024px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px)  { .hub-grid { grid-template-columns: 1fr; } }

/* --- 시술: 한 줄 정의 + 원형 비주얼 ---------------------------------------- */
.define-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-7); align-items: center; }
.define-title {
  font-size: var(--fs-h1); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.define-text { margin-top: var(--sp-4); color: var(--color-text-sub); line-height: var(--lh-loose); }
.define-text p + p { margin-top: var(--sp-2); }
.define-figure {
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: var(--color-bg-alt); position: relative;
}
.define-figure img { width: 100%; height: 100%; object-fit: cover; }

@media screen and (max-width: 1024px) {
  .define-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .define-figure { max-width: 320px; }
}

/* --- 제목 아래 단면 일러스트 (고난이도 백내장 · 백내장 재수술 · 인공수정체 · 드림렌즈 공용)
   흰 배경 그림이라 테두리·배경 없음. 설명(.sec-desc)은 그림 아래에 둡니다 --- */
.complex-figure img { width: 100%; }   /* 그림 배경은 파일에서 순백(#FFF)으로 맞춰 둠 — 새 그림도 그렇게 넣을 것 */
.complex-figure + .sec-head-center .sec-desc { margin-top: var(--sp-5); }
/* 그림 속 확대 원 위에 겹치는 영상 (드림렌즈 Ortho-K) — 동작은 detail.js 맨 아래
   --zv-* 는 orthok-define.webp(1600×900) 의 초록 테두리 안쪽 원: 중심 (1216.5, 410.5), 안쪽 지름 689px.
   그림을 바꾸면 이 세 값을 다시 재야 합니다. top 은 그림 높이 기준 % 입니다. */
.orthok-figure, .icl-figure { position: relative; container-type: inline-size; }   /* cqw = 그림 폭의 1% */
.zoom-video {
  --zv-x: 54.34%;     /* (1216.5 - 347) / 1600 */
  --zv-y: 7.06%;      /* (410.5 - 347) / 900 */
  --zv-d: 43.375%;    /* 694 / 1600 — 테두리 안쪽(689)보다 살짝 크게 해 틈이 안 보이게 */
  --zv-zoom: 1.15;    /* 영상이 나올 때 원이 커지는 배율 */
  --zv-ring: 0.75cqw; /* 그림 속 초록 테두리 두께 12px / 1600 */
  position: absolute; left: var(--zv-x); top: var(--zv-y); width: var(--zv-d);
  aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 50%;
  overflow: hidden; background: transparent; cursor: pointer;
  box-shadow: 0 0 0 var(--zv-ring) transparent;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* 영상이 나오면 원이 앞으로 떠오르듯 커지고, 그림과 같은 초록 테두리 + 그림자를 두릅니다 */
.zoom-video.is-playing {
  z-index: 2;
  transform: scale(var(--zv-zoom));
  box-shadow: 0 0 0 var(--zv-ring) var(--color-illust-ring), var(--shadow-float);
}
.zoom-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.zoom-video.is-playing video { opacity: 1; }
.zoom-video-hint {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%);
  padding: 7px 16px; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-invert);
  background: rgba(var(--hero-scrim-rgb), 0.80); border-radius: var(--radius-pill);
  transition: opacity 0.3s var(--ease);
}
.zoom-video.is-playing .zoom-video-hint { opacity: 0; }
.zoom-video:focus-visible { outline: 3px solid var(--color-primary-deep); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .zoom-video, .zoom-video video, .zoom-video-hint { transition: none; }
}
/* ICL 렌즈삽입술 — icl-define.webp(1600×900) 의 청록 테두리 안쪽 원: 중심 (1189.5, 457), 안쪽 지름 가로 747 · 세로 732px.
   그림을 바꾸면 다시 재야 합니다. 테두리 색도 그림에 맞춰 청록으로 바꿉니다. */
.icl-figure { --color-illust-ring: var(--color-illust-ring-teal); }
.icl-figure .zoom-video {
  --zv-x: 50.97%;     /* (1189.5 - 374) / 1600 */
  --zv-y: 9.22%;      /* (457 - 374) / 900 */
  --zv-d: 46.75%;     /* 748 / 1600 — 안쪽 지름보다 살짝 크게 해 틈이 안 보이게 */
  --zv-ring: 0.8cqw;  /* 그림 속 테두리 두께 약 13px / 1600 */
}

.complex-figure.is-photo { border-radius: var(--radius-lg); overflow: hidden; }   /* 일러스트가 아닌 사진 (인공수정체 How to Choose) */

/* --- 고난이도 백내장: 수술 전 확인 항목 (.exam-grid 에 덧입힘) ------------------
   그림이 흰 배경 일러스트라 옅은 테두리 + 그림자로 카드 경계를 잡고,
   목록(7개)이 그림보다 길어 PC 에서는 그림이 로컬탭 아래에 붙어 따라옵니다. */
.exam-visual.is-illust {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-card);
}
@media screen and (min-width: 1025px) {
  .exam-grid .exam-visual.is-illust {
    position: sticky;
    top: calc(var(--header-h) + var(--ticker-h) + var(--sp-7) + var(--sp-3));   /* 로컬탭 알약 아래 */
  }
}

/* 사전 검사 안내 — 목록 아래 가로 띠 (왼쪽 제목 · 오른쪽 설명) */
.complex-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-5); align-items: center;
  padding: var(--sp-4) var(--sp-5);
}
.complex-note .t { grid-column: 1; grid-row: 1; }
.complex-note .n { grid-column: 1; grid-row: 2; }
.complex-note p:last-child {
  grid-column: 2; grid-row: 1 / span 2; margin-top: 0;
  padding-left: var(--sp-5); border-left: 1px solid var(--color-primary);
}
@media screen and (max-width: 768px) {
  .complex-note { display: block; padding: var(--sp-4); }
  .complex-note p:last-child { margin-top: var(--sp-2); padding-left: 0; border-left: 0; }
}

/* --- 시술: 적합 대상 4포인트 ----------------------------------------------- */
.point-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.point-grid li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-base);
  line-height: var(--lh-base);
}
.point-grid .ic {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700; color: #fff;
  background: var(--color-primary-deep);
}
.point-grid strong { display: block; font-weight: 700; }
.point-grid span.sub { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--color-text-sub); }

@media screen and (max-width: 768px) { .point-grid { grid-template-columns: 1fr; } }

/* --- 시술 방식 비교표 ------------------------------------------------------ */
.method-table { min-width: 620px; }
.method-table th, .method-table td {
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--color-line);
  text-align: center; font-size: var(--fs-sm);
}
.method-table thead th {
  font-size: var(--fs-lg); font-weight: 700;
  border-bottom: 2px solid var(--color-line-mid);
}
.method-table thead th.is-key { color: var(--color-primary-deep); }
.method-table tbody th {
  width: 120px; text-align: left; font-weight: 600; color: var(--color-text);
  background: var(--color-bg-soft);
}
.method-table td { color: var(--color-text-sub); }
.method-table td.is-key { color: var(--color-text); font-weight: 600; background: var(--color-primary-light); }
.table-scroll { overflow-x: auto; }

/* --- 검사 항목 리스트 ------------------------------------------------------ */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); align-items: start; }
.check-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.check-list li::before {
  content: "✓"; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; color: #fff; background: var(--color-primary);
}
.check-aside {
  padding: var(--sp-4); border-radius: var(--radius-base);
  background: var(--color-primary-light); border: 1px solid var(--color-primary);
}
.check-aside .t { font-size: var(--fs-sm); color: var(--color-primary-deep); font-weight: 600; }
.check-aside .n { margin-top: 6px; font-size: var(--fs-h2); font-weight: 800; letter-spacing: var(--ls-tight); }
.check-aside p  { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose); }

@media screen and (max-width: 768px) { .check-grid { grid-template-columns: 1fr; } }

/* --- 주의사항 -------------------------------------------------------------- */
.caution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.caution-grid li {
  padding: var(--sp-4);
  border: 1px solid var(--color-line); border-radius: var(--radius-base);
  background: #fff;
}
.caution-grid .when {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.caution-grid p { font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose); }

@media screen and (max-width: 1024px) { .caution-grid { grid-template-columns: 1fr; } }

/* --- 의료진 프로필 --------------------------------------------------------- */
/* 히로 사진 — 세로 화면에서 잘릴 때 원장님(사진 오른쪽)이 남도록 */
.sub-hero-bg .sub-hero-img-doctor { object-position: 62% 35%; }
/* 마이사이트 — 아이 얼굴(가로 약 52%)이 세로 화면에서도 남도록 */
.sub-hero-bg .sub-hero-img-misight { object-position: 52% 35%; }
/* 녹내장 — 넓은 화면은 사진 아래쪽을 맞춰 원장님 눈이 제목 위로 올라가게, 세로 화면은 얼굴(가로 약 62%)이 남도록 */
.sub-hero-bg .sub-hero-img-glaucoma { object-position: 62% 100%; }

.profile-grid { display: grid; grid-template-columns: 420px 1fr; gap: var(--sp-7); align-items: start; }
.profile-photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); }
.profile-name { font-size: var(--fs-h1); font-weight: 700; letter-spacing: var(--ls-tight); }
.profile-name span { margin-left: 10px; font-size: var(--fs-lg); font-weight: 500; color: var(--color-text-sub); }
.doctor-cert {
  display: inline-block; margin-top: var(--sp-2); padding: 6px 15px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.profile-desc + .profile-desc { margin-top: var(--sp-2); }
.profile-quote {
  margin-top: var(--sp-3); font-size: var(--fs-h3); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.profile-quote strong { color: var(--color-primary-deep); }
.profile-desc { margin-top: var(--sp-3); color: var(--color-text-sub); line-height: var(--lh-loose); }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-4); }

/* 진료 분야 칩 (메인 의료진 섹션에서 옮겨 온 것) */
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.profile-tags li {
  padding: 8px 16px; font-size: var(--fs-xs); font-weight: 600;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
}

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.stat-row li {
  padding: var(--sp-4) var(--sp-2); text-align: center;
  border: 1px solid var(--color-line); border-radius: var(--radius-base);
}
.stat-row .n { display: block; font-size: var(--fs-h3); font-weight: 800; color: var(--color-primary-deep); }
.stat-row .t { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--color-text-sub); }

@media screen and (max-width: 1024px) {
  .profile-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .profile-photo { max-width: 360px; }
}
@media screen and (max-width: 560px) { .stat-row { grid-template-columns: 1fr; } }

/* --- 약력 3단 (학력·경력 / 학회·활동 / 수술 경력) --------------------------
   세 단을 같은 카드 형태로 맞춥니다. 항목 수가 달라도 카드 높이는 같습니다.  */
.career-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); align-items: stretch;
}
.career-col {
  padding: var(--sp-5) var(--sp-4);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-base);
}
.career-en {
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-primary-deep);
}
.career-col h3 {
  margin-top: 6px;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-tight);
}
.career-col h3::after {
  content: ""; display: block; width: 36px; height: 3px;
  margin-top: var(--sp-3); border-radius: 2px; background: var(--color-primary);
}
.career-list { margin-top: var(--sp-3); }
/* 점은 flex 항목으로 둡니다. baseline 정렬이라 글자 크기가 바뀌어도 따라옵니다 */
.career-list li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  font-size: var(--fs-body); color: var(--color-text-sub); line-height: var(--lh-base);
}
.career-list li + li { border-top: 1px solid var(--color-line); }
.career-list li::before {
  content: ""; flex: 0 0 5px; height: 5px; border-radius: 50%;
  background: var(--color-primary); transform: translateY(-3px);
}
.career-list strong { color: var(--color-primary-deep); font-weight: 700; }

@media screen and (max-width: 1024px) { .career-col { padding: var(--sp-4) var(--sp-3); } }
@media screen and (max-width: 768px) { .career-grid { grid-template-columns: 1fr; } }

/* --- 둘러보기: 층별 ------------------------------------------------------- */
.floor-detail { display: grid; grid-template-columns: 460px 1fr; gap: var(--sp-6); align-items: center; }
.floor-detail + .floor-detail { margin-top: var(--sp-7); }
.floor-detail figure { border-radius: var(--radius-base); overflow: hidden; background: var(--color-bg-alt); }
.floor-detail h3 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--ls-tight); }
.floor-detail h3 .fl {
  display: inline-block; margin-right: 12px; padding: 4px 14px;
  font-size: var(--fs-sm); font-weight: 700; vertical-align: middle;
  color: #fff; background: var(--color-primary-deep); border-radius: var(--radius-pill);
}
.floor-detail .desc { margin-top: var(--sp-3); color: var(--color-text-sub); line-height: var(--lh-loose); }
.floor-detail .rooms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.floor-detail .rooms span {
  padding: 7px 15px; font-size: var(--fs-xs); font-weight: 600;
  background: var(--color-bg-alt); border-radius: var(--radius-pill);
}

@media screen and (max-width: 1024px) { .floor-detail { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* --- 둘러보기: 갤러리 ------------------------------------------------------ */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.gallery-grid figure { position: relative; border-radius: var(--radius-base); overflow: hidden; }
.gallery-grid figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 6px 14px; font-size: var(--fs-xs); font-weight: 700; color: #fff;
  background: rgba(28, 43, 44, 0.78); border-radius: var(--radius-pill);
}

/* 사진에 마우스를 올리면 사진 칸이 통째로 커지며 앞으로 나옴 (층별 사진 · 갤러리 · 외관) */
.floor-detail figure, .gallery-grid figure, .tour-exterior {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
@media (hover: hover) {
  .floor-detail figure:hover, .gallery-grid figure:hover, .tour-exterior:hover,
  .js .tour-exterior.is-in:hover {   /* 외관은 .reveal 이라 .js .reveal.is-in 의 transform: none 을 이겨야 함 */
    position: relative; z-index: 2;
    transform: scale(var(--tour-hover-scale));
    box-shadow: var(--shadow-card);
  }
}
@media (prefers-reduced-motion: reduce) {
  .floor-detail figure, .gallery-grid figure, .tour-exterior { transition: none; }
}

@media screen and (max-width: 1024px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 560px)  { .gallery-grid { grid-template-columns: 1fr; } }

/* --- 첨단보유장비: 제품별 소개 ------------------------------------------------
   한 장비 = 한 줄. 왼쪽 사진 · 오른쪽 설명이고, 짝수 번째(.is-reverse)는 좌우가 바뀝니다.
   사진은 배경을 지운 투명 WebP(eq-cut-*.webp)입니다. 원(::before)보다 크게 두어
   위아래로 원 밖까지 나오고, 아래 그림자로 원 앞에 서 있는 것처럼 보입니다.
   배경이 있는 사진(.is-photo — 베리온)만 원 모양으로 잘라 씁니다. */
.eq-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); margin-top: var(--sp-5); }
.eq-nav a {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 48px; padding: 0 var(--sp-3);
  border: 1px solid var(--color-line-mid); border-radius: var(--radius-pill);
  font-weight: 600;
  transition: border-color var(--transition), color var(--transition);
}
.eq-nav a:hover { border-color: var(--color-primary-deep); color: var(--color-primary-deep); }
.eq-nav-n { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary-deep); }

.eq-group { scroll-margin-top: calc(var(--ticker-h) + var(--header-h)); }
.eq-group .sec-head { margin-bottom: 0; }

.eq-item {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-7);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--color-line);
  /* 메인에서 #eq-* 로 들어올 때 헤더와 떠 있는 로컬탭에 가리지 않게 */
  scroll-margin-top: calc(var(--ticker-h) + var(--header-h) + var(--sp-6));
}
.eq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.eq-item.is-reverse .eq-media { order: 2; }

.eq-media { position: relative; margin: 0; aspect-ratio: 1 / 1; }
.eq-media::before {
  content: ""; position: absolute; inset: 9%;
  border-radius: 50%; background: var(--color-eq-stage);
}
.eq-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(var(--shadow-eq-product));
}
.eq-media.is-photo img {
  inset: 9%; width: 82%; height: 82%;
  object-fit: cover; border-radius: 50%; filter: none;
}

.eq-cat  { font-size: var(--fs-lg); font-weight: 600; color: var(--color-primary-deep); }
.eq-name {
  margin-top: var(--sp-1);
  font-size: var(--fs-eq-name); font-weight: 800; line-height: 1.05;
  letter-spacing: var(--ls-tight); word-break: keep-all;
}
.eq-name-m { color: var(--color-primary-deep); }
.eq-sub { margin-top: var(--sp-2); font-size: var(--fs-lg); }
.eq-maker { margin-left: var(--sp-1); padding-left: var(--sp-1); border-left: 1px solid var(--color-line-mid); font-size: var(--fs-body); color: var(--color-text-sub); }
.eq-model { margin-top: 4px; font-size: var(--fs-sm); color: var(--color-text-sub); }
.eq-desc  { margin-top: var(--sp-3); max-width: 36em; line-height: var(--lh-loose); color: var(--color-text-sub); }

.eq-feats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) 0;
  margin-top: var(--sp-5);
}
.eq-feats li { padding-right: var(--sp-3); }
.eq-feats li:nth-child(even) { padding: 0 0 0 var(--sp-3); border-left: 1px solid var(--color-line-mid); }
.eq-pill {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 var(--sp-2);
  border: 1px solid var(--color-primary); border-radius: var(--radius-pill);
  font-weight: 600; color: var(--color-primary-deep);
}
.eq-feats p { margin-top: 10px; line-height: var(--lh-base); color: var(--color-text-sub); }

.eq-rel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-5); }
.eq-rel > span { font-size: var(--fs-sm); color: var(--color-text-sub); }

@media screen and (max-width: 1024px) {
  .eq-item { gap: var(--sp-5); padding: var(--sp-6) 0; }
}
@media screen and (max-width: 768px) {
  .eq-item { grid-template-columns: 1fr; }
  .eq-item.is-reverse .eq-media { order: 0; }
  .eq-media { width: min(100%, 420px); margin: 0 auto; }
}
@media screen and (max-width: 560px) {
  .eq-feats { grid-template-columns: 1fr; }
  .eq-feats li,
  .eq-feats li:nth-child(even) { padding: 0; border-left: 0; }
}

/* --- 비급여 진료비용 표 ----------------------------------------------------
   분류마다 표 하나(.price-group). 위쪽 알약 링크(.eq-nav 모양 재사용)로 건너뜁니다.
   금액표(.price-list)의 열은 [항목 | 코드 | 비고 | 비용]. 640px 이하에서는 줄마다 두 단으로 접어
   가로 스크롤 없이 [항목 ··· 비용] / [코드 · 비고] 로 보이게 합니다.
   제증명 수수료 표는 /support/pricing/ 과 /support/records/ 두 곳에 같은 내용이 있습니다. */
.price-nav ul { margin: var(--sp-5) 0 0; }

.price-group {
  margin-top: var(--sp-7);
  /* 건너뛰었을 때 헤더 밑에 붙은 로컬탭 알약에 제목이 가리지 않게 */
  scroll-margin-top: calc(var(--ticker-h) + var(--header-h) + var(--local-tabs-overlap) + var(--sp-3));
}
#records-fee { scroll-margin-top: calc(var(--ticker-h) + var(--header-h) + var(--local-tabs-overlap)); }
.price-group-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--color-text);
}
.price-group-head h2 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); word-break: keep-all; }
.price-date { font-size: var(--fs-sm); color: var(--color-text-sub); }
.price-group-desc {
  margin: var(--sp-2) 0 var(--sp-3);
  font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text-sub); word-break: keep-all;
}
.price-group-desc .btn-text { margin-left: var(--sp-1); }

.price-table { width: 100%; min-width: 620px; }
.price-table th, .price-table td {
  padding: var(--sp-2);
  border-bottom: 1px solid var(--color-line); font-size: var(--fs-body); vertical-align: middle;
}
.price-table thead th {
  background: var(--color-bg-alt); font-size: var(--fs-sm); font-weight: 700; text-align: left;
  border-bottom: 1px solid var(--color-line-mid);
}
.price-table thead th.amount { text-align: right; }
.price-table tbody th { font-weight: 600; text-align: left; word-break: keep-all; }
.price-table td { color: var(--color-text-sub); }
.price-table td.code { font-size: var(--fs-sm); white-space: nowrap; }
.price-table td.code:empty::before { content: "–"; color: var(--color-text-weak); }
.price-table td.note { font-size: var(--fs-sm); }
.price-table td.amount { text-align: right; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.price-table tr.price-sub th {
  padding-top: var(--sp-3);
  background: var(--color-primary-light); color: var(--color-primary-deep);
  font-size: var(--fs-sm); font-weight: 700;
}
.price-caption { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--color-text-weak); line-height: var(--lh-loose); }

@media screen and (max-width: 640px) {
  .price-list { min-width: 0; }
  .price-list thead { display: none; }
  .price-list, .price-list tbody { display: block; }
  .price-list tr {
    display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--sp-1);
    padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-line);
  }
  .price-list th, .price-list td { padding: 0; border-bottom: 0; }
  .price-list tbody th { grid-column: 1 / 3; grid-row: 1; }
  .price-list td.amount { grid-column: 3; grid-row: 1; }
  .price-list td.code { grid-column: 1; grid-row: 2; margin-top: calc(var(--sp-1) / 2); }
  .price-list td.code:empty { display: none; }
  .price-list td.note { grid-column: 2 / 4; grid-row: 2; margin-top: calc(var(--sp-1) / 2); }
  .price-list td.code:empty + td.note { grid-column: 1 / 4; }
  .price-list tr.price-sub { display: block; padding: 0; border-bottom: 0; }
  .price-list tr.price-sub th { display: block; padding: var(--sp-1) var(--sp-2); margin-top: var(--sp-2); }
}

/* --- 병원소개: 진료철학 3단 --------------------------------------------------
   [원] — [연결선] — [설명] 을 한 줄로 놓고, 줄끼리 세로로 조금 겹칩니다.
   겹침은 li + li 의 음수 마진이며, 뒤 항목이 자연히 위로 올라옵니다(문서 순서).

   원 안은 흰 글자입니다. --color-primary(#4AB6B9)를 바탕으로 쓰면
   대비가 2.42:1 로 WCAG AA 에 못 미치므로, 아래 세 단계 모두
   흰 글자가 안전한 어두운 색만 씁니다 (ink → darker → deep, 5.29:1 이상). */
.principle {
  max-width: 900px; margin: 0 auto;
  padding: var(--sp-7) var(--sp-6);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.principle li {
  position: relative;
  display: grid; grid-template-columns: 170px 44px minmax(0, 1fr);
  align-items: center;
}
.principle li + li { margin-top: -30px; }   /* 원이 위 항목에 겹치는 양 */

.ph-mark {
  width: 170px; height: 170px; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  color: var(--color-text-invert);
}
.ph-mark .no {
  display: block; margin-bottom: 4px;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); opacity: 0.65;
}
.ph-mark strong {
  display: block;
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-tight);
}
.ph-line { height: 1px; background: var(--color-line-mid); }

.ph-body h3 {
  font-size: var(--fs-lg); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.ph-body p {
  margin-top: 10px;
  font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose);
}

.principle li:nth-child(1) .ph-mark { background: var(--color-ink); }
.principle li:nth-child(2) .ph-mark { background: var(--color-primary-darker); }
.principle li:nth-child(3) .ph-mark { background: var(--color-primary-deep); }
.principle li:nth-child(1) .ph-body h3 { color: var(--color-ink); }
.principle li:nth-child(2) .ph-body h3 { color: var(--color-primary-darker); }
.principle li:nth-child(3) .ph-body h3 { color: var(--color-primary-deep); }

.principle-note {
  margin-top: var(--sp-4); text-align: center;
  font-size: var(--fs-xs); color: var(--color-text-weak);
}

@media screen and (max-width: 768px) {
  /* 좁은 화면에서는 설명이 원보다 길어져 겹침이 글자를 먹습니다. 세로로 풉니다. */
  .principle { padding: var(--sp-5) var(--sp-3); }
  .principle li { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .principle li + li { margin-top: var(--sp-5); }
  .ph-line { display: none; }
  .ph-mark { width: 132px; height: 132px; }
  .ph-body { margin-top: var(--sp-3); }
}

/* --- 병원소개: 위에서 빛이 들어오는 다크 구간 --------------------------------
   흰 배경 섹션 다음에 놓습니다. .section-ink 가 바탕을 깔고,
   .glow-ink::before 가 위쪽에 민트 돔을 얹습니다.

   빛의 최대 세기는 섹션 맨 위(라벨 자리)에 둡니다. 헤드라인 높이에서는
   이미 옅어져 있어야 흰 글자 대비가 유지됩니다.
   아래 0.46 을 키우면 헤드라인 배경이 밝아져 글자가 읽히지 않습니다.

   빛의 세기는 common.js 가 스크롤에 맞춰 --glow(0~1)로 넘깁니다.
   스크립트가 없으면 기본값 1 이라 그냥 켜진 상태로 보입니다 (연출만 빠집니다). */
.glow-ink { position: relative; overflow: hidden; --glow: 1; }
.js .glow-ink { --glow: 0; }
.glow-ink::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 0;
  width: min(1500px, 150%); height: 128%;
  transform-origin: 50% 0%;
  transform: translateX(-50%) scale(calc(0.84 + var(--glow) * 0.16));
  opacity: var(--glow);
  will-change: opacity, transform;
  border-radius: 50%;
  background:
    /* 돔 꼭대기에서 쏟아지는 빛 */
    radial-gradient(72% 48% at 50% 4%,
      rgba(74, 182, 185, 0.46)  0%,
      rgba(74, 182, 185, 0.20) 46%,
      rgba(74, 182, 185, 0.04) 74%,
      rgba(74, 182, 185, 0)   100%),
    /* 돔 테두리를 은은하게 살리는 층 */
    radial-gradient(closest-side,
      rgba(74, 182, 185, 0.05) 70%,
      rgba(74, 182, 185, 0.16) 93%,
      rgba(74, 182, 185, 0)   100%);
  pointer-events: none;
}
.glow-inner { position: relative; z-index: 1; }

.glow-ink .numbers { margin-top: var(--sp-7); }
.numbers-note { margin-top: var(--sp-4); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); }

/* 경험이 무엇을 바꾸는지 — 3단 */
.exp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  margin-top: var(--sp-7);
}
.exp-grid li {
  padding: var(--sp-5) var(--sp-4);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-lg);
}
.exp-grid .no {
  display: block; margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); color: var(--color-primary);
}
.exp-grid h3 {
  font-size: var(--fs-lg); font-weight: 700;
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
.exp-grid p {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-loose);
  color: var(--color-on-dark-sub);
}

/* 확인된 자격만 나열 */
.exp-creds {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: var(--sp-6);
}
.exp-creds li {
  padding: 8px 16px;
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-on-dark-sub);
  border: 1px solid var(--color-on-dark-line);
  border-radius: var(--radius-pill);
}

@media screen and (max-width: 1024px) {
  .exp-grid { grid-template-columns: 1fr; }
  .glow-ink::before { height: 88%; }
}

/* --- 게시판 리스트 --------------------------------------------------------- */
.board-tabs { display: flex; gap: 8px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.board-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-sub);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
}
.board-tabs a[aria-current="page"] { background: var(--color-primary-deep); color: #fff; border-color: var(--color-primary-deep); }

.board-list li { border-bottom: 1px solid var(--color-line); }
.board-list a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 8px;
  transition: color var(--transition);
}
.board-list a:hover { color: var(--color-primary-deep); }
.board-list .cat {
  flex-shrink: 0; min-width: 76px; padding: 5px 12px; text-align: center;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.board-list .ttl { font-weight: 600; }
/* 본문을 그 자리에서 펼치는 공지 (details) — 줄 모양은 링크 공지와 같습니다 */
.board-list summary {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-1); cursor: pointer; list-style: none;
}
.board-list summary::-webkit-details-marker { display: none; }
.board-list summary:hover { color: var(--color-primary-deep); }
.board-body { padding: 0 var(--sp-1) var(--sp-4); color: var(--color-text-sub); line-height: var(--lh-loose); }
.board-body p + p { margin-top: var(--sp-2); }
/* 본문 안 링크는 위 .board-list a(줄 전체 링크) 규칙을 되돌립니다 */
.board-body a { display: inline; padding: 0; color: var(--color-primary-deep); text-decoration: underline; }
.board-list time { margin-left: auto; flex-shrink: 0; font-size: var(--fs-xs); color: var(--color-text-weak); }

@media screen and (max-width: 640px) {
  .board-list a, .board-list summary { flex-wrap: wrap; gap: 10px; }
  .board-list time { margin-left: 0; }
}

/* --- 약관 / 방침 본문 ------------------------------------------------------ */
.legal h2 {
  margin-top: var(--sp-6); margin-bottom: var(--sp-2);
  font-size: var(--fs-h3); font-weight: 700;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--color-text-sub); line-height: var(--lh-loose); }
.legal p + p { margin-top: var(--sp-2); }
.legal ul { margin-top: var(--sp-2); }
.legal ul li { position: relative; padding-left: 15px; }
.legal ul li::before { content: "·"; position: absolute; left: 4px; }
.legal .updated { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--color-text-weak); }

/* --- 의학칼럼 (column/ — scripts/build-columns.js 가 만드는 페이지) ---------------
   목록: 분류 버튼 + 카드 3열. 본문: .prose 한 칸 + 안내 문구 + 이전/다음 글.
   분류 버튼은 common.js 가 켭니다. 스크립트가 없으면 버튼 없이 전체 목록이 보입니다. */
.column-filter ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1); margin-bottom: var(--sp-5); }
.column-filter button {
  min-height: 48px; padding: 0 var(--sp-3);
  border: 1px solid var(--color-line-mid); border-radius: var(--radius-pill);
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.column-filter button:hover { border-color: var(--color-primary-deep); color: var(--color-primary-deep); }
.column-filter button[aria-pressed="true"] {
  background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-text-invert);
}

.column-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.column-item[hidden] { display: none; }
.column-card { display: flex; flex-direction: column; height: 100%; }
.column-card .card-body { display: flex; flex-direction: column; flex: 1; }
.column-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary-deep); }
.column-card h3 { margin-top: var(--sp-1); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); word-break: keep-all; }
.column-card p {
  margin-top: var(--sp-1); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--color-text-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.column-card time { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-xs); color: var(--color-text-sub); }

/* 대표 이미지가 없을 때 — 분류 이름을 크게 */
.column-thumb-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-eq-stage);
}
.column-thumb-empty span { font-size: var(--fs-h3); font-weight: 700; color: var(--color-primary-deep); letter-spacing: var(--ls-tight); }

.column-draft {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  border: 1px solid currentColor; border-radius: var(--radius-pill);
  font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--color-text-sub);
}
.column-empty { padding: var(--sp-7) 0; text-align: center; color: var(--color-text-sub); }
.column-empty[hidden] { display: none; }

/* 본문 */
.sub-hero-column { min-height: max(460px, 62svh); }
.sub-hero-column h1 { max-width: 20em; margin: 0 auto; font-size: var(--fs-h1); word-break: keep-all; }
.sub-hero-column .lead { max-width: 36em; margin-left: auto; margin-right: auto; }

.column-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2);
  padding-bottom: var(--sp-3); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-sm); color: var(--color-text-sub);
}
.column-meta .column-draft { margin-left: 0; }
.column-meta span + time::before { content: "·"; margin-right: var(--sp-2); }

.prose { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--color-text); word-break: keep-all; }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); }
.prose h3 { margin-top: var(--sp-5); font-size: var(--fs-lg); font-weight: 700; }
.prose h2 + *, .prose h3 + * { margin-top: var(--sp-2); }
.prose > :first-child { margin-top: 0; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--color-primary-deep); }
.prose strong { font-weight: 700; }
.prose a { color: var(--color-primary-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose img { width: 100%; height: auto; border-radius: var(--radius-base); }
.prose blockquote {
  padding: var(--sp-2) var(--sp-3);
  border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius-base) var(--radius-base) 0;
  background: var(--color-primary-light);
}
.prose hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--sp-6) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--color-line); text-align: left; }
.prose th { background: var(--color-bg-alt); }

.column-note {
  margin-top: var(--sp-6); padding: var(--sp-3);
  border-radius: var(--radius-base); background: var(--color-bg-alt);
  font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--color-text-sub);
}
.column-rel { margin-top: var(--sp-4); text-align: center; }

.column-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--color-line);
}
.column-pn { display: block; min-width: 0; }
.column-pn span { display: block; font-size: var(--fs-xs); color: var(--color-text-sub); }
.column-pn strong {
  display: block; margin-top: 4px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--transition);
}
a.column-pn:hover strong { color: var(--color-primary-deep); }
.column-nav > :last-child { text-align: right; }

@media screen and (max-width: 1024px) { .column-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 560px) {
  .column-grid { grid-template-columns: 1fr; }
  .column-nav { grid-template-columns: 1fr; }
  .column-nav > :last-child { text-align: left; }
  .column-nav .btn { order: 3; }
  .column-pn.is-empty { display: none; }
}

/* --- 백내장 재수술: 재수술을 권하지 않는 경우 -------------------------------
   왼쪽 사진(4:3) · 오른쪽 제목 + 번호 붙은 이유 카드. 1024px 이하는 사진이 위로 */
.honest-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-7); align-items: center;
}
.honest-photo { border-radius: var(--radius-lg); }
.honest-body .sec-title { margin-top: var(--sp-1); }
.honest-lead { margin-top: var(--sp-2); color: var(--color-text-sub); line-height: var(--lh-loose); }

.honest-list { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); }
.honest-list li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-primary-light); border-radius: var(--radius-base);
}
.honest-list .no {
  flex: none; min-width: 1.6em;   /* 01·02 폭이 달라 제목 시작점이 어긋나지 않게 */
  font-family: var(--font-display); font-size: var(--fs-lg);
  line-height: 1.4; color: var(--color-primary-deep);
}
.honest-list strong { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }
.honest-list p {
  margin-top: 6px; font-size: var(--fs-sm);
  color: var(--color-text-sub); line-height: var(--lh-loose);
}

@media screen and (max-width: 1024px) {
  .honest-split { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media screen and (max-width: 560px) {
  .honest-list li { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
}

/* --- 인공수정체: 렌즈 종류 비교 (3종 카드) -----------------------------------
   표 대신 렌즈마다 카드 한 장. 항목 5개가 같은 순서·같은 높이라 옆 카드와 줄이 맞습니다.
   1024px 이하는 한 줄에 하나 — 표처럼 가로 스크롤이 생기지 않습니다. */
.iol-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.iol-card { display: flex; flex-direction: column; overflow: hidden; }
.iol-card .card-body { display: flex; flex-direction: column; flex: 1; }
.iol-card .en {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-primary-deep);
}
.iol-card h3 { font-size: var(--fs-h3); font-weight: 700; }
.iol-sum { margin-top: 8px; font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-base); }

.iol-spec { margin-top: var(--sp-3); border-top: 1px solid var(--color-line); flex: 1; display: flex; flex-direction: column; }
.iol-spec > div {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  min-height: 52px; padding: 10px 0;
  border-bottom: 1px solid var(--color-line);
}
.iol-spec dt { flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-weak); }
.iol-spec dd { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); text-align: right; line-height: var(--lh-base); }
.iol-spec > .is-cost { margin-top: auto; border-bottom: 0; padding-top: var(--sp-2); }
.iol-tag {
  display: inline-block; padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}

.iol-note { margin-top: var(--sp-3); text-align: center; font-size: var(--fs-xs); color: var(--color-text-weak); }

@media screen and (max-width: 1024px) {
  .iol-compare { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}

/* --- 인공수정체: 건강보험 적용 여부 (급여 / 비급여 두 칸 + 실손보험 띠) ---------- */
.ins-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.ins-col {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--sp-5) var(--sp-4);
  background: var(--color-bg); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.ins-col.is-covered { border-top: 4px solid var(--color-primary-deep); }
.ins-col:not(.is-covered) { border-top: 4px solid var(--color-line-mid); }
.ins-tag {
  display: inline-block; padding: 5px 14px;
  font-size: var(--fs-xs); font-weight: 700; border-radius: var(--radius-pill);
  color: var(--color-text-sub); background: var(--color-bg-alt);
}
.is-covered .ins-tag { color: var(--color-text-invert); background: var(--color-primary-deep); }
.ins-head { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-weak); }
.ins-list { margin-top: var(--sp-2); width: 100%; }
.ins-list li {
  position: relative; padding: 14px 0 14px 28px;
  font-size: var(--fs-lg); font-weight: 700;
  border-bottom: 1px solid var(--color-line);
}
.ins-list li:last-child { border-bottom: 0; }
.ins-list li::before {                        /* 급여 = 채운 점, 비급여 = 빈 점 */
  content: ""; position: absolute; left: 4px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  border: 2px solid var(--color-line-mid);
}
.is-covered .ins-list li::before { background: var(--color-primary-deep); border-color: var(--color-primary-deep); }
.ins-col .btn-text { margin-top: auto; padding-top: var(--sp-3); }

.ins-note {
  display: flex; gap: var(--sp-3); align-items: baseline;
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--color-primary-light); border-radius: var(--radius-base);
}
.ins-note strong { flex: none; font-size: var(--fs-sm); color: var(--color-primary-deep); }
.ins-note p { font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose); }

@media screen and (max-width: 640px) {
  .ins-split { grid-template-columns: 1fr; }
  .ins-col { padding: var(--sp-4) var(--sp-3); }
  .ins-note { flex-direction: column; gap: 6px; }
}

/* --- 드림렌즈 · 마이사이트: 사용 시 주의사항 (사진 카드 3장) ------------------
   .caution-grid 는 다른 페이지가 쓰므로 따로 둡니다. "이상 시" 카드만 경고색. */
.care-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.care-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-bg); border-radius: var(--radius-lg);
  border-top: 4px solid var(--color-primary-deep);
  box-shadow: var(--shadow-card);
}
.care-card-body { padding: var(--sp-4); }
.care-card .when {
  display: inline-block; padding: 4px 12px;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--color-primary-deep); background: var(--color-primary-light);
  border-radius: var(--radius-pill);
}
.care-card h3 { margin-top: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; }
.care-card p  { margin-top: 8px; font-size: var(--fs-sm); color: var(--color-text-sub); line-height: var(--lh-loose); }

.care-card.is-alert { border-top-color: var(--color-alert); }
.care-card.is-alert .when { color: var(--color-text-invert); background: var(--color-alert); }
.care-card.is-alert h3 { color: var(--color-alert); }

@media screen and (max-width: 1024px) {
  .care-cards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
}