/*
 * 아이클리닉 테마 — 단 한 장의 CSS
 *
 * 원칙(기획서 6-2)
 *  1. 기본 효과를 먼저 만들고, 최신 기능은 @supports 안에 둔다.
 *  2. 호버 효과는 @media (hover:hover) 안에만 둔다.
 *  3. prefers-reduced-motion: reduce 이면 전부 끈다.
 *  4. 0.2~0.3초, 이징 하나. 사이트 전체가 같은 값을 쓴다.
 */

:root {
  --lg-dur: 0.25s;
  /* 대메뉴 띠가 내려오는 시간. 0.25초는 눈에 「켜졌다」로 보이고,
     0.6초를 넘으면 기다리는 느낌이 든다. */
  --lg-mega-dur: 0.5s;
  --lg-ease: cubic-bezier(.2, .7, .2, 1);
  --lg-bar-h: 64px;
}

/* ───────── 기본 ───────── */

html { scroll-behavior: smooth; }

body { -webkit-text-size-adjust: 100%; }

:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* 키보드 초점은 항상 보이게 — 접근성 AA */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 건너뛰기 링크 */
.lg-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--text);
  padding: .75rem 1rem; border-radius: 0 0 8px 0;
}
.lg-skip:focus { left: 0; }

/* ───────── 머리말 ───────── */

.lg-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 스크롤하면 얇아지는 머리말 — 스크롤 구동 애니메이션(향상 효과) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lg-header {
      animation: lg-shrink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
    @keyframes lg-shrink {
      to { padding-block: .35rem; box-shadow: 0 2px 12px rgb(0 0 0 / .06); }
    }
  }
}

/* ───────── 내비게이션 ───────── */

.lg-nav a {
  position: relative;
  padding: .6em .9em;
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

/* 대메뉴가 열 개다. 기본 글자·여백으로는 한 줄에 1,376px 이 필요해서
   1,400px 짜리 자리에 로고와 진료시간 배지까지 함께 앉힐 수가 없다.
   그래서 **모든 배치에서** 큰 화면의 대메뉴는 한 치수 작게 쓴다.
   작게 만드는 것이 아니라, 두 줄로 접히지 않게 하는 것이 목적이다.
   좁은 화면의 펼침 메뉴(overlay)는 손가락으로 누르는 곳이라 건드리지 않는다. */
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    padding: .5em .55em;
    font-size: var(--wp--preset--font-size--small);
  }
}

/* 1,280px 짜리 노트북에서는 그래도 31px 이 모자라 배지가 한 줄을 더 차지했다.
   항목 사이만 한 번 더 좁힌다 — 글자 크기는 그대로 두어야 읽힌다. */
@media (min-width: 900px) and (max-width: 1365px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    padding-inline: .34em;
  }
}

/* 1,024px(가로로 놓은 태블릿)에서는 자리가 976px 뿐인데 메뉴도 976px 이라
   딱 한 뼘이 모자라 접혔다. 항목 사이를 한 번 더 좁히고,
   머리말 좌우 여백도 같이 줄여 여유를 만든다. */
@media (min-width: 900px) and (max-width: 1100px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    padding-inline: .2em;
  }
  .lg-header > .wp-block-group { padding-inline: 0; }
  .lg-header { padding-inline: .5rem; }
}

/* 기본 효과 — 모든 브라우저에서 밑줄이 제자리에서 펼쳐진다 */
.lg-nav a::after {
  content: "";
  position: absolute; left: .9em; right: .9em; bottom: .3em; height: 2px;
  background: var(--wp--preset--color--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--lg-dur) var(--lg-ease);
}
@media (hover: hover) {
  .lg-nav a:hover::after,
  .lg-nav a[aria-current]::after { transform: scaleX(1); }
}

/* 위에서 항목 여백을 줄였으니 밑줄도 그만큼 당긴다.
   기본 ::after 선언보다 **뒤에** 와야 이긴다 — 같은 굵기의 규칙은 나중 것이 남는다. */
@media (min-width: 900px) {
  .lg-nav a::after { left: .55em; right: .55em; }
}
@media (min-width: 900px) and (max-width: 1365px) {
  .lg-nav a::after { left: .34em; right: .34em; }
}

/* 향상 효과 — 앵커 포지셔닝을 쓰면 밑줄 하나가 항목 사이를 미끄러진다 */
@supports (anchor-name: --x) {
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lg-nav a::after { display: none; }
    .lg-nav li:is(:hover, :has([aria-current])) { anchor-name: --lg-nav-active; }
    .lg-nav::before {
      content: "";
      position: absolute; position-anchor: --lg-nav-active;
      left: anchor(left); right: anchor(right); bottom: anchor(bottom);
      height: 2px; background: var(--wp--preset--color--primary);
      transition: left var(--lg-dur) var(--lg-ease), right var(--lg-dur) var(--lg-ease);
    }
  }
}

/* 하위 메뉴 — display:none 에서 부드럽게 나타남 */
.lg-nav .sub-menu,
.lg-nav .wp-block-navigation__submenu-container {
  display: none;
  opacity: 0;
  translate: 0 -6px;
  transition:
    opacity var(--lg-dur) var(--lg-ease),
    translate var(--lg-dur) var(--lg-ease),
    display var(--lg-dur) allow-discrete;
}
.lg-nav li:is(:hover, :focus-within, :has(> a[aria-expanded="true"])) > :is(.sub-menu, .wp-block-navigation__submenu-container) {
  display: block; opacity: 1; translate: 0 0;
  @starting-style { opacity: 0; translate: 0 -6px; }
}

/* ───────── 진료시간 배지 ───────── */

.lg-status {
  display: inline-flex; align-items: center; gap: .5em;
  margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 600;
  padding: .4em .8em; border-radius: 999px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
}
.lg-status__dot { width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.lg-status--open   { color: #176b3f; }
.lg-status--lunch  { color: #6b5417; }
.lg-status--closed { color: var(--wp--preset--color--text-soft); }

/* ───────── 카드 ───────── */

.lg-card {
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 14px;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base);
  transition:
    translate var(--lg-dur) var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease),
    background var(--lg-dur) var(--lg-ease);
}
@media (hover: hover) {
  .lg-card:hover {
    translate: 0 -4px;
    box-shadow: 0 10px 24px rgb(15 28 28 / .08);
    background: color-mix(in oklch, var(--wp--preset--color--primary) 5%, white);
  }
}
.lg-card h3 { margin-top: 0; }

/* 칸 폭에 맞춰 스스로 배치를 바꾸는 카드 — 컨테이너 쿼리 */
.lg-cards { container-type: inline-size; }
.lg-cards__grid {
  display: grid; gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
}
@container (min-width: 560px) { .lg-cards__grid { grid-template-columns: repeat(2, 1fr); } }
@container (min-width: 860px) { .lg-cards__grid { grid-template-columns: repeat(3, 1fr); } }

/* ───────── 표 ───────── */

.lg-table-wrap { overflow-x: auto; }
.lg-table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.lg-table th, .lg-table td { padding: .7rem .8rem; border: 1px solid var(--wp--preset--color--line); text-align: left; vertical-align: top; }
.lg-table th { background: var(--wp--preset--color--surface); font-weight: 700; }
/* 표 제목은 바로 위 h2 와 겹친다. 화면에서는 감추고, 화면을 읽어 주는
   기능에는 그대로 남긴다. */
.lg-table caption { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ───────── 모바일 하단 바 ───────── */

.lg-mobilebar { display: none; }

@media (max-width: 781px) {
  .lg-mobilebar {
    position: fixed; inset: auto 0 0 0; z-index: 90;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    background: var(--wp--preset--color--base);
    border-top: 1px solid var(--wp--preset--color--line);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 16px rgb(15 28 28 / .07);
  }
  .lg-mobilebar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15em;
    min-height: var(--lg-bar-h);
    text-decoration: none; color: var(--wp--preset--color--text);
    font-size: .8rem; font-weight: 600;
  }
  .lg-mobilebar__item + .lg-mobilebar__item { border-left: 1px solid var(--wp--preset--color--line); }
  .lg-mobilebar__ico { font-size: 1.15rem; line-height: 1; }
  /* 하단 바에 가려지지 않게 */
  body { padding-bottom: calc(var(--lg-bar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ───────── 히어로 ───────── */

.lg-hero { padding-block: var(--wp--preset--spacing--60); }
.lg-hero__title { margin: 0 0 .4em; }
.lg-hero__lead { color: var(--wp--preset--color--text-soft); font-size: var(--wp--preset--font-size--large); margin: 0 0 1.2em; }
.lg-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* 사진이 없는 병원을 위한 자리 — 일러스트 플레이스홀더 */
.lg-figure {
  /* 격자 칸 안에서도 폭을 다 쓰게 한다 — width 가 없으면 내용 크기로 쪼그라든다 */
  width: 100%; aspect-ratio: 3 / 2; max-width: 100%;
  border-radius: 16px; overflow: hidden;
  background: var(--wp--preset--color--surface);
  display: grid; place-items: center;
}
.lg-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ───────── 페이지 이동 ───────── */

@view-transition { navigation: auto; }
.lg-header { view-transition-name: lg-header; }

/* ───────── 움직임을 원치 않는 이용자 ───────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ───────── 다듬기 ───────── */

.wp-block-site-title a { text-decoration: none; color: inherit; }
.lg-footer-info { color: var(--wp--preset--color--text-soft); margin: 0; }

/* 카드 묶음은 본문보다 넓게 — 3열까지 펴진다.
   폭을 숫자로 못 박지 않는다. 바탕 폭(wide-size)을 바꿀 때마다 여기까지
   같이 고쳐야 하는데, 그러면 반드시 한 곳을 빠뜨린다. */
.lg-cards { width: min(var(--wp--style--global--wide-size), 100%); margin-inline: auto; }

/* 머리말의 진료시간 배지는 좁은 화면에서 감춘다(히어로에 이미 있다) */
/* 진료시간 배지는 머리말에서 150px 을 가져간다. 1,200px 아래에서는 그 150px
   때문에 대메뉴가 두 줄로 접힌다. 배지보다 메뉴 한 줄이 중요하다 —
   진료시간은 첫 화면과 맨 아래에 다시 나오므로 여기서 빠져도 잃는 것이 없다. */
@media (max-width: 1199px) { .lg-header .lg-status { display: none; } }

/* ═════════ 레이아웃 11종 ═════════
 * 바뀌는 것은 첫 화면뿐이다. 안쪽 페이지는 전부 같다.
 * 공통 규칙: 병원명·진료 상태·버튼 3개는 어느 레이아웃에서나 첫 화면에 있다.
 */

.lg-figure--hero { margin: var(--wp--preset--spacing--40) 0 0; }
.lg-figure__hint {
  color: var(--wp--preset--color--text-soft);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .02em;
}
.lg-figure--portrait { aspect-ratio: 1 / 1; width: min(260px, 60%); border-radius: 50%; }

/* L01 클래식 — 좌 텍스트, 우 사진 */
@media (min-width: 900px) {
  .lg-hero--classic { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--wp--preset--spacing--50); align-items: center; }
  /* 격자 자식은 기본 min-width 가 auto 라 줄어들지 못한다 — 넘침의 원인 */
  .lg-hero--classic > * { min-width: 0; }
  .lg-hero--classic > .lg-figure { grid-row: 1 / span 5; grid-column: 2; margin: 0; }
}

/* L02 진료시간 우선 — 표가 주인공 */
.lg-hero--hours .lg-table { font-size: var(--wp--preset--font-size--medium); }
.lg-hero--hours .lg-table th { width: 40%; }
.lg-hero--hours .lg-table-wrap { margin-block: var(--wp--preset--spacing--40); }

/* L03 의료진 중심 — 둥근 사진 위, 이름 아래 */
.lg-hero--doctor { text-align: center; }
.lg-hero--doctor .lg-figure--portrait { margin-inline: auto; }
.lg-hero--doctor .lg-hero__actions { justify-content: center; }

/* L04 과목 격자 — 과목 이름을 알약으로 */
.lg-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--wp--preset--spacing--40); }
.lg-chip {
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--surface);
  border-radius: 999px; padding: .45em 1em;
  font-size: var(--wp--preset--font-size--small); font-weight: 600;
}

/* L05 사진 전면 — 사진을 먼저, 넓게 */
.lg-hero--photo { padding-top: var(--wp--preset--spacing--40); }
.lg-hero--photo > .lg-figure { order: -1; aspect-ratio: 21 / 9; margin-bottom: var(--wp--preset--spacing--40); }
.lg-hero--photo { display: flex; flex-direction: column; }

/* L06 카드 스택 — 세 장 */
.lg-hero__cards { display: grid; gap: var(--wp--preset--spacing--30); margin-block: var(--wp--preset--spacing--40); }
@media (min-width: 720px) { .lg-hero__cards { grid-template-columns: repeat(3, 1fr); } }
.lg-hero__cards .lg-card h3 { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--text-soft); }
.lg-hero__cards .lg-card p { margin: .3em 0 0; font-weight: 600; }

/* L07 분할 — 반 색면, 반 사진 */
.lg-hero__panes { display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 16px; overflow: hidden; margin-bottom: var(--wp--preset--spacing--40); }
@media (min-width: 760px) { .lg-hero__panes { grid-template-columns: 1fr 1fr; } }
.lg-hero__pane { background: var(--wp--preset--color--primary); min-height: 180px; }
.lg-hero__panes .lg-figure { margin: 0; border-radius: 0; aspect-ratio: auto; min-height: 180px; }

/* L08 미니멀 — 여백이 주인공 */
.lg-hero--minimal { padding-block: var(--wp--preset--spacing--70); text-align: center; }
.lg-hero--minimal .lg-hero__title { font-size: var(--wp--preset--font-size--hero); }
.lg-hero--minimal .lg-hero__actions { justify-content: center; }

/* L09 공지 우선 — 히어로 아래 띠 */
.lg-notice-strip {
  display: flex; gap: .7em; align-items: baseline; flex-wrap: wrap;
  margin-top: var(--wp--preset--spacing--40);
  padding: .9em 1.2em; border-radius: 12px;
  background: var(--wp--preset--color--surface);
  border-left: 4px solid var(--wp--preset--color--primary);
  font-size: var(--wp--preset--font-size--small);
}
.lg-notice-strip strong { color: var(--wp--preset--color--accent); }

/* L10 소아·가족 — 둥근 곡선 */
.lg-hero--kids { border-radius: 28px; background: var(--wp--preset--color--surface); padding: var(--wp--preset--spacing--50); }
.lg-hero--kids .lg-figure { border-radius: 24px; }
.lg-hero--kids .lg-card { border-radius: 22px; }

/* L11 검사 장면 — 기본값. 넓은 화면에서 좌우로 */
@media (min-width: 900px) {
  .lg-hero--exam { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--50); align-items: center; }
  .lg-hero--exam > * { min-width: 0; }
  .lg-hero--exam > .lg-figure { grid-row: 1 / span 5; grid-column: 2; margin: 0; aspect-ratio: 4 / 3; }
}

/* ───────── 문의 폼 ───────── */

.lg-form { max-width: 560px; }
.lg-form__row { display: grid; gap: .4rem; margin-block: 0 var(--wp--preset--spacing--40); }
.lg-form__row label { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.lg-form input[type="text"],
.lg-form textarea {
  width: 100%; padding: .7em .9em;
  border: 1px solid var(--wp--preset--color--line); border-radius: 10px;
  background: var(--wp--preset--color--base); color: inherit;
  font: inherit; font-size: var(--wp--preset--font-size--medium);
}
.lg-form input[type="text"]:focus,
.lg-form textarea:focus { border-color: var(--wp--preset--color--primary); }
.lg-form__hint { color: var(--wp--preset--color--text-soft); font-size: var(--wp--preset--font-size--small); }

/* 동의 줄 — 체크박스와 글이 나란히 */
.lg-form__agree label { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-weight: 400; }
.lg-form__agree span { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }

/* 허니팟 — 화면에서 감추되 display:none 은 쓰지 않는다(일부 봇이 알아챈다) */
.lg-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lg-formnote {
  padding: .9em 1.1em; border-radius: 10px; margin-bottom: var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--small); font-weight: 600;
}
.lg-formnote--ok { background: #eaf6ef; color: #176b3f; }
.lg-formnote--no { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--text); }

/* ───────── 팝업 ───────── */

.lg-popup {
  border: none; border-radius: 18px; padding: 0;
  width: min(440px, calc(100vw - 2.5rem)); max-width: none;
  background: var(--wp--preset--color--base); color: var(--wp--preset--color--text);
  box-shadow: 0 18px 50px rgb(15 28 28 / .22);
}
.lg-popup::backdrop { background: rgb(15 28 28 / .45); }
.lg-popup__inner { padding: var(--wp--preset--spacing--50); }
.lg-popup__title { margin: 0 0 .6em; font-size: var(--wp--preset--font-size--large); }
.lg-popup__body p { margin: 0 0 .7em; }
.lg-popup__body p:last-child { margin-bottom: 0; }
.lg-popup__link { margin: var(--wp--preset--spacing--40) 0 0; }

.lg-popup__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--line);
}
.lg-popup__today {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-soft);
}
.lg-popup__close {
  border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface);
  color: inherit; font: inherit; font-weight: 600;
  padding: .5em 1.2em; border-radius: 9px; cursor: pointer;
}
.lg-popup__close:hover { background: var(--wp--preset--color--line); }

/* 나타날 때만 살짝 — 움직임을 원치 않으면 위의 reduce 규칙이 전부 끈다 */
@media (prefers-reduced-motion: no-preference) {
  .lg-popup[open] { animation: lg-pop var(--lg-dur) var(--lg-ease); }
  @keyframes lg-pop { from { opacity: 0; translate: 0 10px; } }
}

/* ───────── 진료과목 아이콘 타일 ───────── */

.lg-icon { width: 1.6em; height: 1.6em; display: block; }

.lg-tiles {
  display: grid; gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(2, 1fr);
  width: min(var(--wp--style--global--wide-size), 100%); margin-inline: auto;
}
@media (min-width: 560px)  { .lg-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .lg-tiles { grid-template-columns: repeat(6, 1fr); } }
/* 예전에 본문 폭이 1,160px 이던 시절의 흔적. 지금은 바탕 폭이 1,400px 이고
   타일에 `alignwide` 가 붙어 있으므로 워드프레스가 알아서 넓혀 준다.
   여기에 1,160px 을 못 박아 두면 1,024px 화면에서 타일이 화면 밖으로 나간다. */

.lg-tile {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: var(--wp--preset--spacing--40) .6rem;
  border-radius: 14px; text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 7%, white);
  border: 1px solid transparent;
  transition: background var(--lg-dur) var(--lg-ease), translate var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
.lg-tile__ico {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 16%, white);
  color: var(--wp--preset--color--primary);
}
.lg-tile__ico .lg-icon { width: 1.5rem; height: 1.5rem; }
.lg-tile__name { font-size: var(--wp--preset--font-size--small); font-weight: 600; text-align: center; line-height: 1.35; }
@media (hover: hover) {
  .lg-tile:hover { translate: 0 -3px; border-color: var(--wp--preset--color--primary); background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, white); }
}

/* ───────── 바로가기 세 줄 ───────── */

.lg-quicks {
  display: grid; gap: .7rem;
  width: min(var(--wp--style--global--wide-size), 100%); margin: var(--wp--preset--spacing--50) auto 0;
}

.lg-quick {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.05rem 1.3rem; border-radius: 12px; text-decoration: none;
  transition: translate var(--lg-dur) var(--lg-ease), filter var(--lg-dur) var(--lg-ease);
}
.lg-quick__ico { display: grid; place-items: center; }
.lg-quick__ico .lg-icon { width: 1.55rem; height: 1.55rem; }
.lg-quick__text strong { display: block; font-size: var(--wp--preset--font-size--medium); }
.lg-quick__text small { display: block; opacity: .78; font-size: var(--wp--preset--font-size--small); margin-top: .12em; }
.lg-quick__go { font-size: 1.6rem; line-height: 1; opacity: .7; }

.lg-quick--primary { background: var(--wp--preset--color--primary); color: #fff; }
.lg-quick--soft    { background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, white); color: var(--wp--preset--color--text); }
.lg-quick--dark    { background: var(--wp--preset--color--contrast); color: #fff; }

@media (hover: hover) { .lg-quick:hover { translate: 0 -2px; filter: brightness(1.06); } }

/* ───────── 교통·주차 ───────── */

.lg-access { display: grid; gap: .9rem; }
.lg-access__row {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start;
  padding: .9rem 1.1rem; border-radius: 12px;
  background: var(--wp--preset--color--surface);
}
.lg-access__row .lg-icon { width: 1.4rem; height: 1.4rem; color: var(--wp--preset--color--primary); margin-top: .15rem; }
.lg-access__row strong { display: block; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--text-soft); }
.lg-access__row p { margin: .2em 0 0; }
.lg-access__btn { margin: .3rem 0 0; }

/* ───────── 공지 목록 ───────── */

.lg-notices { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--line); }
.lg-notices li { border-bottom: 1px solid var(--wp--preset--color--line); }
.lg-notices a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .95rem .2rem; text-decoration: none; color: inherit;
}
.lg-notices__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-notices time { color: var(--wp--preset--color--text-soft); font-size: var(--wp--preset--font-size--small); flex: none; }
@media (hover: hover) { .lg-notices a:hover .lg-notices__title { text-decoration: underline; } }

/* ───────── 히어로 사진 ───────── */

.lg-figure figcaption,
.lg-figcaption {
  display: block; margin-top: .5em;
  font-size: .8rem; color: var(--wp--preset--color--text-soft); line-height: 1.4;
}

/* ───────── 넓게 쓰는 구역 ─────────
   본문 글줄은 760px 를 지킨다(한 줄이 너무 길면 읽기 어렵다). 그러나 첫 화면,
   과목 타일, 바로가기, 표처럼 「읽는 글」이 아니라 「보고 누르는 것」은
   좁은 칸에 갇히면 답답하고 버튼이 줄바꿈된다.
   폭을 넓히는 일은 워드프레스가 이미 쓰는 `alignwide` 로 한다. CSS 로 덮어쓰면
   워드프레스가 나중에 넣는 배치 규칙과 순서 싸움이 나서 조용히 되돌아간다. */


/* 인사말 — 글줄 폭은 760px 를 지키되 가운데로 밀지 않는다. 바로 위 제목과
   같은 선에서 시작해야 층이 어긋나 보이지 않는다. */
.lg-greeting { max-width: var(--wp--style--global--content-size); margin-inline: 0; }

/* ───────── 서브 상단 배너 ─────────
   사진은 여러 병원이 나눠 쓰고, 색은 병원마다 다르게 씌운다.
   층이 셋이다. 아래에서부터 —
     ① 사진      : 채도를 눌러 원래 색을 지운다
     ② 팔레트 막 : 병원 색을 덮는다. 여기서 병원마다 달라진다
     ③ 검은 막   : 왼쪽이 진하고 오른쪽으로 갈수록 옅다. 글자가 묻히지 않게 하는 안전장치
   ②③ 이 취향이 아니라 안전장치인 이유는 글자가 흰색이기 때문이다. 사진이 밝으면
   덮개 없이는 읽히지 않는다. */

.lg-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding-block: var(--wp--preset--spacing--40);
  /* 안쪽 여백을 `calc((100% - wide)/2)` 로 잡으면 안 된다. padding 의 100% 는
     제 너비가 아니라 **담고 있는 칸의 너비**로 풀리기 때문에, 전체 폭 배너에서
     엉뚱한 값이 나온다. 대신 안쪽 칸을 1160px 로 두고 가운데 정렬한다.
     그러면 글자가 본문 칸과 같은 선에서 시작한다. */
  padding-inline: var(--wp--style--root--padding-left, 16px);
  /* 높이는 **화면 폭을 따라가지 않는다.** `vw` 를 쓰면 창을 키울 때마다
     배너가 같이 늘어나 사진이 확대된다(실장님 지적).
     좁은 화면만 조금 줄이고, 그 위로는 못박는다. */
  min-height: 250px;
  color: #fff;
  background: var(--wp--preset--color--primary);
}

.lg-banner--high { min-height: 380px; }

.lg-banner::before,
.lg-banner::after { content: ""; position: absolute; inset: 0; }

/* ① 사진 */
.lg-banner::before {
  z-index: -2;
  background-image: var(--lg-banner-img, none);
  background-size: cover;
  background-position: center right;
  filter: saturate(var(--lg-banner-sat, .35));
}

/* ② 팔레트 막 + ③ 검은 막
   덮개를 배너 전체에 고르게 깔면 글자는 잘 읽히지만 **사진이 죽는다**.
   좋은 사진일수록 손해가 크다. 그래서 기본값은 「왼쪽만」이다 —
   글자가 앉는 왼쪽은 진하게 덮고, 인물이 있는 오른쪽 4분의 1은 건드리지 않는다.
   사진의 왼쪽이 비어 있게 찍혀 오므로(발주 규격) 이 방식이 맞는다. */
.lg-banner::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .50) 32%,
      rgba(0, 0, 0, .34) 52%, rgba(0, 0, 0, .11) 72%, rgba(0, 0, 0, 0) 88%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) var(--lg-banner-tint, 46%), transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--primary) var(--lg-banner-tint, 46%), transparent) 38%,
      transparent 82%);
}

/* 사진들의 결이 서로 안 맞을 때 — 전면에 고르게 덮어 한 벌로 묶는다.
   사진이 죽는 대신 통일감을 얻는 맞바꿈이다. */
.lg-banner--veil-full::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .38) 50%, rgba(0, 0, 0, .12) 100%),
    color-mix(in srgb, var(--wp--preset--color--primary) var(--lg-banner-tint, 46%), transparent);
}

/* 사진이 없는 병원 — 색만으로도 허전하지 않게 결을 준다 */
.lg-banner--plain::before {
  background-image:
    radial-gradient(100% 150% at 88% 15%, rgba(255, 255, 255, .22), transparent 62%),
    radial-gradient(70% 110% at 18% 105%, rgba(255, 255, 255, .10), transparent 55%),
    radial-gradient(120% 140% at 5% 0%, rgba(0, 0, 0, .30), transparent 60%);
  filter: none;
}

/* 배너 글자는 본문 글줄과 **같은 선**에서 시작해야 한다. 배너만 화면 폭에
   맞춰 놓으면 제목은 왼쪽 끝, 본문은 한참 안쪽에서 시작해 두 장을 겹쳐
   놓은 것처럼 보인다. 그래서 안쪽 칸을 본문 폭(content-size)에 맞춘다.
   첫 화면(L12)은 사진을 가득 쓰는 자리라 예외로 둔다. */
.lg-banner__inner {
  width: min(100%, var(--wp--style--global--content-size));
  margin-inline: auto;
}
.lg-hero--cover .lg-banner__inner,
.lg-hero--cover-bar .lg-banner__inner {
  width: min(100%, var(--wp--style--global--wide-size));
}

/* 글줄은 640px 까지만. 배너 폭이 넓다고 한 줄이 길어지면 읽기 어렵다. */
/* `width: fit-content` 를 함께 준다. 블록 요소는 글자가 짧아도 상자가 끝까지
   늘어나는데, 그러면 덮개가 충분한지 눈으로도 기계로도 재기 어렵다. */
.lg-banner__eyebrow,
.lg-banner__title { max-width: 720px; width: fit-content; }
.lg-banner--center { text-align: center; }
.lg-banner--center .lg-banner__inner { margin-inline: auto; }

.lg-banner__eyebrow {
  margin: 0 0 .5em;
  font-size: var(--wp--preset--font-size--small);
  /* 한글은 자간을 넓히면 「노 안 · 백 내 장」처럼 낱글자가 흩어져 보인다.
     라틴 문자에서 쓰는 .14em 을 그대로 쓰면 안 된다. */
  letter-spacing: .04em;
  opacity: .88;
}

.lg-banner__title {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

/* 출처 표기 — 사진 아래가 아니라 배너 구석에. 방송에서 쓰는 방식이다. */
/* 출처 표기는 배너 오른쪽 아래에 놓이는데, 그쪽은 덮개를 걷어 둔 자리라
   밝은 사진 위에 흰 글씨가 얹힌다. 읽히게 하려고 글자 뒤에만 얇은 어둠을 깐다.
   띠를 하나 더 그리면 사진을 또 가리므로 그림자로 푼다. */
.lg-banner__credit {
  position: absolute;
  /* 오른쪽 아래는 사진이 가장 밝은 자리다. 흰 글씨를 거기 두면 대비가
     1.7:1 밖에 안 나와 사실상 안 보인다(실측). 덮개가 진한 **왼쪽 아래**로
     옮긴다. 공영방송도 화면 구석 어두운 쪽에 표기한다. */
  left: 12px;
  bottom: 8px;
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .92);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 0 8px rgba(0, 0, 0, .45);
}

@media (max-width: 782px) {
  .lg-banner { min-height: 150px; text-align: left; }
  .lg-banner--center { text-align: center; }
  /* 모바일에서는 인물이 오른쪽 밖으로 잘려 나간다. 완전히 가운데로 당기면
     이번엔 글자와 겹치므로, 인물 쪽으로 조금만 당긴다.
     (모바일 전용 사진 780×460 이 들어오면 이 보정은 필요 없어진다.) */
  .lg-banner::before { background-position: 72% center; }

  /* 폭이 좁으면 글자와 인물을 좌우로 떼어 놓을 자리가 없다. 그래서 덮개를
     가로가 아니라 **세로**로 건다 — 아래로 갈수록 어둡게. 글자는 아래쪽에
     있으므로 읽히고, 인물의 얼굴이 있는 위쪽은 밝게 남는다. */
  .lg-banner::after,
  .lg-banner--veil-full::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .48) 52%, rgba(0, 0, 0, .74) 100%),
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .6), transparent);
  }
  .lg-banner__credit { font-size: 10px; left: 10px; }
}

/* ───────── L12 — 사진 전면 첫 화면 ─────────
   배너와 같은 틀(`.lg-banner`)을 그대로 쓴다. 다른 것은 높이와 글자 크기뿐이다.
   같은 CSS 를 두 벌 쓰지 않으려는 것이고, 덕분에 팔레트·덮개 설정이
   첫 화면과 안쪽 배너에 똑같이 적용된다. */

.lg-hero--cover {
  min-height: 560px;
  padding-block: var(--wp--preset--spacing--60);
}

/* (히어로를 본문 칸 바깥으로 옮겨서 100vw 로 빼내는 편법이 필요 없어졌다.) */

.lg-hero--cover .lg-hero__title {
  font-size: var(--wp--preset--font-size--hero);
  color: #fff;
  margin: 0 0 .35em;
}

.lg-hero--cover .lg-hero__lead {
  color: rgba(255, 255, 255, .92);
  margin: 0;
  max-width: 30ch;
}

/* 첫 화면 바로 아래 — 오늘 진료 여부와 버튼 3개.
   사진 위에 다 올리면 복잡해지므로 띠를 하나 내려 놓는다. */
.lg-hero--cover-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding-block: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--40);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* 워드프레스가 이 칸의 자식마다 `margin-left:auto !important` 를 걸어 가운데로
   민다. 띠 안에서는 왼쪽·오른쪽 끝에 붙어야 하므로 특이도를 한 단계 올려 되돌린다. */
body .wp-block-group.lg-hero--cover-bar > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none;
}

.lg-hero--cover-bar { justify-content: space-between; }
.lg-hero--cover-bar .lg-status { margin: 0; }
.lg-hero--cover-bar .lg-hero__actions { margin: 0; }

@media (max-width: 782px) {
  .lg-hero--cover { min-height: 300px; }
  .lg-hero--cover .lg-hero__lead { max-width: none; }
}

/* ───────── 배치 변형 ─────────
   템플릿을 여러 벌 만들지 않고 `<body>` 의 표시만 보고 배치를 바꾼다.
   고칠 곳이 한 군데로 남아 있어야 나중에 빠뜨리지 않는다. */

/* ① 로고 가운데 — 로고를 한 줄 차지하게 올리고 메뉴를 그 아래로 내린다 */
.lg-logo-center .lg-header > .wp-block-group.is-layout-flex {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}
.lg-logo-center .lg-header .wp-block-site-title { text-align: center; }
.lg-logo-center .lg-nav { justify-content: center; }

/* ② 대메뉴를 로고 아래로 (로고는 왼쪽에 그대로) */
.lg-menu-below:not(.lg-logo-center) .lg-header > .wp-block-group.is-layout-flex {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--20);
}
.lg-menu-below:not(.lg-logo-center) .lg-nav { justify-content: flex-start; }

/* 로고가 가운데인데 메뉴가 「옆」이면 가운데 정렬이 이긴다 — 둘은 같은 줄을 다툰다.
   이 경우 메뉴는 로고 아래 가운데로 간다(위 ①이 이미 그렇게 한다). */

/* ③ 서브메뉴 — 본문 왼쪽 세로 기둥 */
.lg-subnav { display: none; }   /* 기본은 그리지 않는다 */

.lg-subnav__title {
  margin: 0 0 .6em;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium);
}

.lg-subnav ul { list-style: none; margin: 0; padding: 0; }
.lg-subnav li + li { margin-top: .15em; }

.lg-subnav a {
  display: block;
  padding: .5em .7em;
  border-radius: 8px;
  text-decoration: none;
  color: var(--wp--preset--color--text-soft);
  transition: background var(--wp--custom--dur) var(--wp--custom--ease);
}

@media (hover: hover) {
  .lg-subnav a:hover { background: var(--wp--preset--color--surface); }
}

.lg-subnav a[aria-current="page"] {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary);
  font-weight: 700;
}

/* 좁은 화면에서는 기둥을 세울 자리가 없다. 가로로 눕혀 넘겨 보게 한다. */
@media (max-width: 899px) {
  .lg-subnav-side .lg-subnav {
    display: block;
    margin-bottom: var(--wp--preset--spacing--40);
  }
  .lg-subnav-side .lg-subnav ul {
    display: flex;
    gap: .4em;
    overflow-x: auto;
    padding-bottom: .3em;
    scrollbar-width: thin;
  }
  .lg-subnav-side .lg-subnav li + li { margin-top: 0; }
  .lg-subnav-side .lg-subnav a { white-space: nowrap; }
}

/* 넓은 화면 — 본문 왼쪽에 기둥을 세우고 글은 그 오른쪽으로 */
@media (min-width: 900px) {
  /* 기둥이 실제로 그려진 페이지에서만 2단으로 나눈다.
     홈처럼 서브메뉴가 없는 곳에서도 grid 를 걸면 본문이 220px 칸에 갇힌다
     — 마포안과 첫 화면에서 실제로 그렇게 됐다. */
  .lg-subnav-side main:has(> .lg-subnav) {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--wp--preset--spacing--60);
    align-items: start;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
  }
  .lg-subnav-side main:has(> .lg-subnav) > .lg-subnav { display: block; position: sticky; top: 88px; }
  /* 기둥이 폭을 가져가므로 글줄은 남은 칸을 그대로 쓴다 */
  .lg-subnav-side main:has(> .lg-subnav) > .entry-content { max-width: none; margin-inline: 0 !important; }
  .lg-subnav-side main:has(> .lg-subnav) > .entry-content > :where(:not(.alignwide):not(.alignfull)) {
    max-width: none;
    margin-inline: 0 !important;
  }
}

/* 대메뉴가 열 개라 기본 글자로는 로고와 한 줄에 못 들어간다(필요 1,350px / 자리 1,160px).
   「로고 옆 한 줄」에서는 세 가지를 함께 해야 겨우 앉는다 —
     ① 메뉴 글자와 여백을 줄이고
     ② 머리말만 본문 폭(1,160)이 아니라 화면 폭을 쓰고
     ③ 낱말이 쪼개지지 않게 막는다.
   그래도 좁으면 자리가 안 나온다. 실측으로 한 줄에 필요한 폭이 1,317px 이라
   여유를 두고 **1,360px 부터만** 한 줄로 편다. 그 아래에서는 억지로 밀어넣어
   메뉴를 잘라 먹지 말고 접어서 두 줄로 둔다. 안 보이는 메뉴보다 두 줄이 낫다. */
@media (min-width: 1300px) {
  .lg-menu-inline:not(.lg-logo-center) .lg-header > .wp-block-group.is-layout-flex {
    flex-wrap: nowrap;
    /* ★`max-width: none` 을 걷어냈다★
       한 줄로 펴려고 폭 제한을 풀어 두었는데, 4K 에서는 그 때문에 로고가
       화면 왼쪽 끝, 메뉴가 오른쪽 끝까지 날아갔다. 본문은 1,400px 로 묶여
       가운데 있는데 머리말만 3,840px 을 다 쓰니 화면이 따로 논다.
       1,400px 이면 로고(176) + 메뉴(약 1,170) 가 한 줄에 들어간다. */
    max-width: var(--wp--style--global--wide-size);
  }
}
/* (메뉴 글자·여백 줄이기는 이제 위쪽 「내비게이션」에서 모든 배치에 함께 건다.
   여기에 또 두면 화면 폭에 따라 달라지는 단계 조정을 이 규칙이 덮어 버린다.) */
/* nowrap 은 반드시 1,360px 이상에서만. 좁은 화면에 그대로 걸면 메뉴가
   화면 밖으로 흘러 나간다(768px 에서 12개가 잘려 나가는 것을 실측으로 확인). */
@media (min-width: 1300px) {
  .lg-menu-inline:not(.lg-logo-center) .wp-block-site-title { flex: 0 0 auto; }
  .lg-menu-inline:not(.lg-logo-center) .lg-nav,
  .lg-menu-inline:not(.lg-logo-center) .lg-nav .wp-block-navigation__container {
    flex-wrap: nowrap;
    min-width: 0;
  }
  /* 낱말이 「병원 / 소개」로 쪼개지면 메뉴가 아니라 고장으로 보인다. */
  .lg-menu-inline:not(.lg-logo-center) .lg-nav a { white-space: nowrap; }
}
.lg-menu-inline:not(.lg-logo-center) .lg-nav .wp-block-navigation {
  overflow-x: auto;
  scrollbar-width: none;
}
.lg-menu-inline:not(.lg-logo-center) .lg-nav .wp-block-navigation::-webkit-scrollbar { display: none; }

/* 진료시간 배지는 줄여도 안 되고 접혀도 안 된다. 「오늘은 휴진입 / 니다」로
   두 줄이 되면 안내가 아니라 사고처럼 보인다. */
@media (min-width: 1300px) {
  .lg-menu-inline:not(.lg-logo-center) .lg-nav .lg-status {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* 「로고 아래 한 줄」은 메뉴를 한 켜 내려 띠처럼 보이게 한다.
   선 하나가 있고 없고로 전혀 다른 집처럼 읽힌다. */
.lg-menu-below:not(.lg-logo-center) .lg-nav {
  width: 100%;
  padding-top: var(--wp--preset--spacing--20);
  border-top: 1px solid var(--wp--preset--color--line);
}

/* 대메뉴를 아래 줄로 내렸을 때, 진료시간 배지가 또 한 줄을 차지하면
   머리말이 세 켜가 되어 200px 을 넘는다. 배지를 그 줄의 오른쪽 끝에 앉힌다.

   단 **넉넉히 넓을 때만** 그렇게 한다. 메뉴(약 1,160px) + 배지(약 150px) +
   좌우 여백까지 1,400px 가까이 필요해서, 좁은 화면에 그대로 걸면 메뉴가
   화면 밖으로 밀려 나간다(1,024px 에서 17개가 잘려 나가는 것을 실측). */
@media (min-width: 1200px) {
  .lg-menu-below .lg-nav,
  .lg-logo-center .lg-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--wp--preset--spacing--20);
    width: 100%;
  }

  /* 메뉴는 줄이지 않는다. 줄이면 항목이 접혀 두 줄이 된다. */
  .lg-menu-below .lg-nav > .wp-block-navigation,
  .lg-logo-center .lg-nav > .wp-block-navigation { flex: 0 0 auto; }
  .lg-menu-below .lg-nav .wp-block-navigation__container,
  .lg-logo-center .lg-nav .wp-block-navigation__container { flex-wrap: nowrap; }
  .lg-menu-below .lg-nav > .lg-status,
  .lg-logo-center .lg-nav > .lg-status { flex: 0 0 auto; white-space: nowrap; }
}

/* 「로고 옆 한 줄」은 로고(140px)와 메뉴(1,080px)가 한 줄을 나눠 쓰기 때문에
   배지까지 끼면 1,300px 아래에서 세 켜가 된다(1,280px 에서 196px 을 실측).
   이 배치에서는 배지를 조금 더 일찍 내린다. */
@media (max-width: 1299px) {
  .lg-menu-inline:not(.lg-logo-center) .lg-header .lg-status { display: none; }
}

/* ───────── 태블릿 구간의 메뉴 ─────────
   워드프레스는 600px 부터 대메뉴를 펼친다. 그런데 우리 대메뉴는 열 개라
   768px 에서 세 켜(213px), 900px 에서 두 켜(194px)가 된다. 머리말이 화면의
   4분의 1을 잡아먹는 것이다.

   그래서 펼치는 시점을 1,024px 로 늦춘다. 그 아래에서는 휴대전화와 같은
   햄버거 단추로 연다. 열 개를 억지로 눕히는 것보다, 눌러서 여는 편이
   손으로 쓰기에도 낫다. */
@media (min-width: 600px) and (max-width: 1023px) {
  .lg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .lg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* ───────── 대메뉴의 아래 화살표 ─────────
   워드프레스는 하위 메뉴가 있는 항목에 ▾ 를 붙인다. 한국 병원 홈페이지는
   이 화살표를 거의 쓰지 않는다(밝은희망안과·천안김안과·스마일안과 모두 없다).
   화살표가 없어도 마우스를 올리면 하위 메뉴가 열리므로 기능은 그대로다.
   다만 좁은 화면의 펼침 메뉴에서는 눌러서 여는 단추 구실을 하므로 남긴다. */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation__submenu-icon { display: none; }
  .lg-nav .wp-block-navigation-item__content { padding-right: inherit; }
}

/* ───────── 글자 결 — 밝은희망안과 기준 ─────────
   참고 사이트 실측: 큰 제목 50px/70px, 굵기 200, 자간 -0.08em /
   중제목 26px/39px 굵기 400 / 본문 20px/30px 굵기 350, 글자색 #444.
   한국 병원 홈페이지의 「단정하다」는 인상은 대부분 **굵지 않은 큰 제목**과
   **좁은 자간**에서 온다. 굵게 키우면 광고지처럼 보인다. */
.lg-banner__title,
.lg-hero__title { font-weight: 300; letter-spacing: -.055em; }
.lg-banner__eyebrow { font-weight: 400; letter-spacing: -.03em; }
.lg-card h3,
.lg-tile,
.lg-quick strong { letter-spacing: -.04em; }

/* ═════════ 홈의 사진 배너들 ═════════
   안쪽 배너(.lg-banner)와 같은 3겹 구조를 쓴다 — ① 사진 ② 팔레트 막 ③ 검은 막.
   같은 뼈대를 쓰기 때문에 병원이 팔레트를 바꾸면 홈의 카드 색도 함께 따라온다. */

/* ── 진료과목 묶음 카드 ── */
.lg-gcards {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: 1fr;
  margin-top: var(--wp--preset--spacing--40);
}
@media (min-width: 620px)  { .lg-gcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .lg-gcards { grid-template-columns: repeat(3, 1fr); } }

.lg-gcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 210px;
  padding: var(--wp--preset--spacing--40);
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  background: var(--wp--preset--color--primary);
  transition: translate var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.lg-gcard::before,
.lg-gcard::after { content: ""; position: absolute; inset: 0; }
.lg-gcard::before {
  z-index: -2;
  background-image: var(--lg-banner-img, none);
  background-size: cover;
  background-position: center;
  filter: saturate(var(--lg-banner-sat, .8));
  transition: scale var(--lg-dur) var(--lg-ease);
}
/* 글자가 아래쪽에 앉으므로 덮개도 아래가 진하다. 위쪽(대개 얼굴이 있는 자리)은
   밝게 남겨 사진이 죽지 않는다. */
.lg-gcard::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.34) 52%, rgba(0,0,0,.72) 100%),
    color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .45), transparent);
}
.lg-gcard--plain::after {
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.34) 100%);
}
@media (hover: hover) {
  .lg-gcard:hover { translate: 0 -3px; box-shadow: 0 12px 28px rgb(15 28 28 / .16); }
  .lg-gcard:hover::before { scale: 1.04; }
}
.lg-gcard__body { display: block; }
.lg-gcard__name {
  display: block;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400;
  letter-spacing: -.05em;
  margin-bottom: .35em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.lg-gcard__list {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.03em;
  opacity: .92;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.lg-gcard__list i { font-style: normal; opacity: .55; margin: 0 .45em; }

/* ── 바로가기 사진 배너 ── */
.lg-qbanner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--wp--preset--spacing--40);
  border-radius: 14px;
  color: #fff;
  background: var(--wp--preset--color--primary);
  margin-block: var(--wp--preset--spacing--50);
  /* 폭은 정하지 않는다. `alignwide` 가 붙어 있으니 워드프레스가 알아서 맞춘다.
     여기에 `width: min(100%, …)` 을 적었더니 100% 가 담고 있는 칸이 아니라
     더 넓은 상자를 기준으로 풀려서, 390px 화면에서 배너가 24px 만큼 밖으로
     삐져나왔다(실측). 옆의 과목 카드·홍보 배너는 폭을 안 정해서 멀쩡했다. */
}
.lg-qbanner::before,
.lg-qbanner::after { content: ""; position: absolute; inset: 0; }
.lg-qbanner::before {
  z-index: -2;
  background-image: var(--lg-banner-img, none);
  background-size: cover;
  background-position: center 35%;
  filter: saturate(var(--lg-banner-sat, .8));
}
/* 세 칸이 가로로 나란히 앉으므로 덮개는 고르게 깐다. 왼쪽만 덮으면
   오른쪽 칸의 글자가 읽히지 않는다. */
.lg-qbanner::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.58) 100%),
    color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .7), transparent);
}
.lg-qbanner--plain::after { background: rgba(0,0,0,.12); }

.lg-qbanner__inner {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  /* `1fr` 이 아니라 `minmax(0, 1fr)` 이어야 한다. 격자 칸의 기본 최소 폭은
     「내용이 줄지 않고 들어가는 폭」이라, 안에 줄바꿈 금지(nowrap)인 긴 주소가
     있으면 칸이 화면 밖까지 늘어난다. 390px 에서 40px 이 삐져나왔다. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) {
  .lg-qbanner__inner { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
.lg-qbanner__item {
  display: flex; align-items: center; gap: .9rem;
  min-width: 0;
  padding: .9rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .22);
  transition: background var(--lg-dur) var(--lg-ease);
}
@media (hover: hover) { .lg-qbanner__item:hover { background: rgb(255 255 255 / .2); } }
.lg-qbanner__ico { flex: 0 0 auto; display: grid; place-items: center; }
.lg-qbanner__ico .lg-icon { width: 26px; height: 26px; }
.lg-qbanner__text { min-width: 0; }
.lg-qbanner__text strong { display: block; font-weight: 600; letter-spacing: -.04em; }
.lg-qbanner__text small {
  display: block; opacity: .88; font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.03em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── 홍보 배너 띠 ── */
.lg-promos {
  display: grid; gap: var(--wp--preset--spacing--30);
  grid-template-columns: 1fr;
  margin-top: var(--wp--preset--spacing--40);
}
@media (min-width: 760px) { .lg-promos { grid-template-columns: repeat(2, 1fr); } }

.lg-promo {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: 168px;
  padding: var(--wp--preset--spacing--40);
  border-radius: 14px;
  text-decoration: none; color: #fff;
  background: var(--wp--preset--color--primary);
}
.lg-promo::before,
.lg-promo::after { content: ""; position: absolute; inset: 0; }
.lg-promo::before {
  z-index: -2;
  background-image: var(--lg-banner-img, none);
  background-size: cover; background-position: center right;
  filter: saturate(var(--lg-banner-sat, .8));
}
/* 덮개는 **세로**로 건다.
   처음에는 안쪽 배너처럼 「왼쪽만」 덮었다. 그런데 홍보 배너는 2단으로 놓여
   카드 하나가 500~700px 밖에 안 되고, 글상자가 그 폭의 60~80% 를 차지한다.
   그래서 오른쪽 밝은 사진 위에 흰 글자가 얹혀 1,024px 에서 대비가 2.68:1 까지
   떨어졌다(기준 4.5:1). 세로로 덮으면 글자가 있는 아래쪽만 진해지고
   사진에서 보여 주고 싶은 위쪽은 밝게 남는다. */
.lg-promo::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.50) 44%, rgba(0,0,0,.82) 100%),
    color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .5), transparent);
}
.lg-promo { align-items: flex-end; }
.lg-promo--plain::after { background: linear-gradient(90deg, rgba(0,0,0,.18), transparent); }
.lg-promo__body { display: block; max-width: 22em; }
.lg-promo__body strong {
  display: block;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 400; letter-spacing: -.05em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.lg-promo__body small {
  display: block; margin-top: .4em; opacity: .92;
  font-size: var(--wp--preset--font-size--small); letter-spacing: -.03em; line-height: 1.6;
  text-shadow: 0 1px 3px rgb(0 0 0 / .5);
}
.lg-promo__go {
  display: inline-block; margin-top: .9em;
  font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: -.03em;
  border-bottom: 1px solid rgb(255 255 255 / .6); padding-bottom: 2px;
}

.lg-empty { color: var(--wp--preset--color--text-soft); }

/* ── 좁은 화면의 홈 배너 덮개 ──
   가로 배너의 「왼쪽만 덮기」는 넓을 때만 통한다. 폭이 줄면 글상자가 배너의
   거의 전부를 차지해서, 오른쪽 밝은 사진 위에 흰 글자가 얹힌다.
   실측으로 1,024px 에서 2.68:1, 390px 에서 2.29:1 까지 떨어졌다(기준 4.5:1).
   좁아지면 덮개를 세로로 바꾼다 — 글자가 있는 아래쪽이 진해진다. */
@media (max-width: 999px) {
  .lg-promo__body { max-width: none; }
}

/* 바로가기 배너는 칸이 가로로 나란히 앉아 사진 전체를 덮어야 한다.
   좁은 화면에서는 칸이 세로로 쌓여 배너가 길어지므로 더 진하게 깐다. */
@media (max-width: 759px) {
  .lg-qbanner::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.68) 100%),
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .8), transparent);
  }
}

/* 과목 카드 제목은 굵지 않은 큰 글자라 얇다. 아래쪽을 조금 더 눌러 준다. */
.lg-gcard::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.40) 52%, rgba(0,0,0,.78) 100%),
    color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .45), transparent);
}

/* ═════════ 서브메뉴 가로 띠 ═════════
   배너 바로 아래 한 줄. 광주안과(clickeye.co.kr)가 쓰는 모양이다.

   세로 기둥과 달리 **넓은 화면과 좁은 화면에서 자리가 같다.** 휴대전화에서
   2차 메뉴를 보려고 머리말 햄버거를 다시 열 필요가 없고, 항목이 많으면
   옆으로 밀어 넘기면 된다. 안과 홈페이지는 휴대전화 방문이 훨씬 많다. */

.lg-subbar {
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid var(--wp--preset--color--line);
  /* 머리말이 sticky 라 그 아래에 붙어 따라 내려온다. 긴 글에서 2차 메뉴가
     화면 밖으로 사라지지 않게 하려는 것이다. top 값은 머리말 높이(실측 75px). */
  position: sticky;
  top: 75px;
  z-index: 40;
}

.lg-subbar__inner {
  display: flex;
  align-items: stretch;
  gap: .6rem;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left, 16px);
}

.lg-subbar__home {
  flex: 0 0 auto;
  display: grid; place-items: center;
  padding-inline: .2rem .6rem;
  color: var(--wp--preset--color--text-soft);
  text-decoration: none;
}
.lg-subbar__home .lg-icon { width: 20px; height: 20px; }

.lg-subbar__list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
  /* 항목이 많으면 줄바꿈 대신 옆으로 넘긴다. 두 줄이 되면 띠가 아니라
     덩어리가 되어 본문을 밀어낸다. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* 넘길 것이 남아 있다는 신호로 오른쪽 끝을 흐린다.
   **넘길 것이 없으면 흐리면 안 된다** — 항목이 세 개뿐인데 마지막 글자가
   반쯤 지워져 보이면 고장으로 읽힌다. 그래서 그냥 마스크를 씌우지 않고,
   스크롤 구동 애니메이션을 쓴다. 넘칠 거리가 0이면 타임라인이 아예 돌지
   않아 흐림도 걸리지 않는다. 지원하지 않는 브라우저에서는 흐림이 없을 뿐
   목록은 똑같이 옆으로 넘어간다. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .lg-subbar__list {
      animation: lg-subbar-fade steps(1, end) both;
      animation-timeline: scroll(self inline);
      animation-range: 0 1px;
    }
    @keyframes lg-subbar-fade {
      from { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
      to   { mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%); }
    }
  }
}
.lg-subbar__list::-webkit-scrollbar { display: none; }

.lg-subbar__list a {
  display: flex; align-items: center;
  padding: 1.15rem .95rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--wp--preset--color--text-soft);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.04em;
  border-bottom: 3px solid transparent;
  transition: color var(--lg-dur) var(--lg-ease), border-color var(--lg-dur) var(--lg-ease);
}
@media (hover: hover) {
  .lg-subbar__list a:hover { color: var(--wp--preset--color--text); }
}
/* 지금 보고 있는 항목 — 색과 밑줄 둘 다로 표시한다.
   색만 쓰면 색을 구별하기 어려운 사람에게는 아무 표시가 없는 것과 같다. */
.lg-subbar__list a[aria-current="page"] {
  color: var(--wp--preset--color--primary);
  font-weight: 700;
  border-bottom-color: var(--wp--preset--color--primary);
}

.lg-subbar__cta {
  flex: 0 0 auto;
  align-self: center;
  margin-left: .4rem;
  padding: .6em 1.1em;
  border-radius: 8px;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
}
@media (hover: hover) {
  .lg-subbar__cta:hover { background: var(--wp--preset--color--accent); }
}

/* 좁은 화면 — 머리말이 낮아지므로 붙는 자리도 올린다. 전화 단추는 아래
   고정 바에 이미 있으므로 여기서는 뺀다(같은 것이 두 번 보이면 지저분하다). */
@media (max-width: 781px) {
  .lg-subbar { top: 68px; }
  .lg-subbar__inner { gap: 0; }
  .lg-subbar__cta { display: none; }
  .lg-subbar__list a { padding: .95rem .7rem; }
}

/* 안과정보 목록 상자 — 제목 줄과 「글 전체 보기」. 마포안과 옛 홈의 공지 목록과
   같은 구실을 한다. 제목만 보이면 무엇이 올라와 있는지 한눈에 들어오고,
   길이가 들쭉날쭉하지 않아 홈이 정돈돼 보인다. */
.lg-noticebox { margin-top: var(--wp--preset--spacing--30); }
.lg-notices__more {
  display: inline-block;
  margin-top: .9rem;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: -.03em;
  text-decoration: none;
  color: var(--wp--preset--color--primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════
   밝게 — 안과 홈페이지의 기본값

   실장님 지적: 「안과의 생명은 밝은 세상, 깨끗한 자연이다. 눈에 문제가 생기면
   어둡고 흐릿하고 침침한데, 홈페이지까지 어두우면 가고 싶지 않은 병원이다.」

   맞는 말이고, 원인은 분명하다. 홈 한 화면에 **어두운 사진 덩어리가 여덟 개**
   깔려 있었다 — 첫 화면 + 과목 카드 다섯 + 바로가기 띠 + 홍보 배너 둘.
   각각은 글자를 읽히게 하려고 검은 막을 덮은 것인데, 그것이 모이니 페이지
   전체가 어두워졌다.

   그래서 방향을 바꾼다. **사진 위에 흰 글자를 얹는 자리를 첫 화면과 배너로
   줄이고**, 본문 안의 카드들은 「흰 카드 + 위쪽에 사진 + 아래 흰 칸에 진한
   글자」로 간다. 사진은 그대로 다 보이면서 글자는 흰 바탕에서 읽히므로,
   검은 막 자체가 필요 없어진다.
   ═══════════════════════════════════════════════════════════ */

/* ── 대메뉴를 또렷하게 ──
   제목을 얇게 하면서 메뉴까지 흐려졌다. 메뉴는 글이 아니라 **표지판**이라
   얇을 이유가 없다. 참고한 밝은희망안과도 대메뉴는 굵기 700이다. */
.lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
  color: var(--wp--preset--color--text);
  font-weight: 600;
}
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    font-size: var(--wp--preset--font-size--medium);
    padding-block: .55em;
  }
}
.lg-nav a[aria-current] { color: var(--wp--preset--color--primary); }

/* ── 진료과목 카드 — 흰 카드로 ──
   사진은 위쪽에 그대로 두고 글자는 아래 흰 칸으로 내린다. 사진을 덮지
   않으므로 원래 밝기가 살고, 글자는 흰 바탕 위 진한 글씨라 가장 잘 읽힌다. */
.lg-gcard {
  display: block;
  min-height: 0;
  padding: 0;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 1px 3px rgb(15 28 28 / .04);
}
/* 사진은 카드 위쪽 칸에. 가상 요소로 깔던 것을 그만두고 제자리를 준다. */
.lg-gcard::before {
  position: static;
  display: block;
  content: "";
  aspect-ratio: 16 / 10;
  background-image: var(--lg-banner-img, none);
  background-size: cover;
  background-position: center;
  filter: none;                    /* 채도를 죽이지 않는다 — 밝게 보여야 한다 */
  z-index: auto;
}
/* 검은 막은 아예 걷어 낸다. 사진 위에 글자가 없으니 필요가 없다. */
.lg-gcard::after { display: none; }
.lg-gcard--plain::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary) 14%, white),
    color-mix(in srgb, var(--wp--preset--color--primary) 4%, white));
}
.lg-gcard__body { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); }
.lg-gcard__name {
  color: var(--wp--preset--color--text);
  font-weight: 600;
  text-shadow: none;
}
.lg-gcard__list {
  color: var(--wp--preset--color--text-soft);
  opacity: 1;
  text-shadow: none;
}
@media (hover: hover) {
  .lg-gcard:hover { box-shadow: 0 12px 28px rgb(15 28 28 / .10); }
  .lg-gcard:hover::before { scale: 1; }
}

/* ── 바로가기 띠 — 흰 바탕으로 ──
   사진 한 장을 어둡게 덮고 그 위에 칸 세 개를 얹던 자리다. 홈 한가운데
   가로로 길게 누운 어두운 띠가 페이지를 가장 무겁게 만들고 있었다. */
.lg-qbanner {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--text);
}
.lg-qbanner::before,
.lg-qbanner::after { display: none; }
.lg-qbanner__item {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  color: var(--wp--preset--color--text);
}
@media (hover: hover) {
  .lg-qbanner__item:hover {
    background: var(--wp--preset--color--base);
    border-color: var(--wp--preset--color--primary);
  }
}
.lg-qbanner__ico { color: var(--wp--preset--color--primary); }
.lg-qbanner__text small { color: var(--wp--preset--color--text-soft); opacity: 1; }

/* ── 배너와 첫 화면 — 덮개를 얇게, 채도를 올려 ──
   여기는 사진 위 흰 글자가 맞다(한국 병원 홈페이지의 표준이다). 다만 지금은
   막이 두꺼워 사진이 잿빛이 됐다. 글자가 앉는 왼쪽만 남기고 나머지를 걷는다.
   대비는 실측으로 다시 확인한다. */
.lg-banner::before { filter: saturate(var(--lg-banner-sat, 1)); }
.lg-banner::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .42) 30%,
      rgba(0, 0, 0, .24) 50%, rgba(0, 0, 0, .06) 70%, rgba(0, 0, 0, 0) 84%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .62), transparent) 0%,
      transparent 74%);
}

/* ── 홍보 배너 — 사진을 살리고 글상자만 눌러 ──
   배너 전체를 아래로 갈수록 어둡게 덮던 것을, 글이 앉는 아래 절반에만
   건다. 위쪽 절반은 사진 그대로다. */
.lg-promo::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .10) 34%,
    rgba(0, 0, 0, .52) 66%, rgba(0, 0, 0, .78) 100%);
}
.lg-promo::before { filter: saturate(var(--lg-banner-sat, 1)); }

/* ── 바탕 ──
   면(surface) 색을 쓰던 자리들이 모여 페이지가 뿌예 보인다. 표와 안내 상자는
   흰 바탕에 선으로만 구분한다. */
.lg-table th { background: var(--wp--preset--color--surface); }
body { background: var(--wp--preset--color--base); }

/* ── 홍보 배너도 흰 카드로 ──
   사진 위 흰 글자로 두었더니 제목 대비가 1.82:1 까지 떨어졌다(실측). 글이 앉는
   아래쪽만 어둡게 덮으면 제목은 덮개가 시작되기 전 자리에 걸리고, 덮개를
   위로 끌어올리면 사진이 또 어두워진다. 두 가지를 다 잃지 않는 방법은 하나다 —
   **사진과 글자의 자리를 겹치지 않게 나누는 것.** 과목 카드와 같은 방식이다. */
.lg-promo {
  display: block;
  min-height: 0;
  padding: 0;
  color: var(--wp--preset--color--text);
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 1px 3px rgb(15 28 28 / .04);
  overflow: hidden;
}
.lg-promo::before {
  position: static;
  display: block;
  content: "";
  aspect-ratio: 21 / 9;
  background-image: var(--lg-banner-img, none);
  background-size: cover;
  background-position: center;
  filter: none;
  z-index: auto;
}
.lg-promo::after { display: none; }
.lg-promo--plain::before {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--primary) 14%, white),
    color-mix(in srgb, var(--wp--preset--color--primary) 4%, white));
}
.lg-promo__body {
  display: block;
  max-width: none;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
}
.lg-promo__body strong { color: var(--wp--preset--color--text); font-weight: 600; text-shadow: none; }
.lg-promo__body small  { color: var(--wp--preset--color--text-soft); opacity: 1; text-shadow: none; }
.lg-promo__go {
  color: var(--wp--preset--color--primary);
  border-bottom-color: currentColor;
}
@media (hover: hover) {
  .lg-promo:hover { box-shadow: 0 12px 28px rgb(15 28 28 / .10); }
}

/* ── 머리말 바탕 ──
   반투명이라 첫 화면 사진 위에 겹칠 때 메뉴 글자 대비가 4.29:1 까지 떨어졌다.
   흐림 효과는 남기되 바탕을 더 불투명하게. */
.lg-header { background: color-mix(in srgb, var(--wp--preset--color--base) 97%, transparent); }

/* ── 첫 화면 덮개 ──
   막을 얇게 했더니 390px 에서 제목 대비가 3.47:1 로 내려갔다. 큰 글자 기준
   3:1 은 넘지만 여유가 없다. 글자가 앉는 쪽만 조금 되돌린다. */
.lg-hero--cover::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .56) 0%, rgba(0, 0, 0, .48) 32%,
      rgba(0, 0, 0, .26) 52%, rgba(0, 0, 0, .06) 72%, rgba(0, 0, 0, 0) 86%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .7), transparent) 0%,
      transparent 76%);
}

/* ── 작은 글씨에 쓰는 주색 ──
   밝은 하늘색은 넓은 면을 칠할 때는 좋지만 **흰 바탕 위 작은 글씨**로 쓰면
   대비가 3.16:1 밖에 안 나온다(실측, 기준 4.5). 색을 어둡게 바꾸면 면도 같이
   칙칙해지므로, 글씨용으로 한 단계 진한 값을 따로 만들어 쓴다. */
:root, body { --lg-ink-primary: color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--text)); }

.lg-promo__go,
.lg-notices__more,
.lg-subbar__list a[aria-current="page"],
.lg-nav a[aria-current] { color: var(--lg-ink-primary); }
.lg-subbar__list a[aria-current="page"] { border-bottom-color: var(--lg-ink-primary); }
.entry-content a:not(.wp-element-button) { color: var(--lg-ink-primary); }

/* ── 게시판 세 칸 ──
   공지사항 · 진료상담 · 자유게시판. 옛 마포안과 홈과 같은 배치다.
   좁은 화면에서는 세로로 쌓는다 — 세 칸을 억지로 눕히면 제목이 잘린다. */
.lg-boards {
  display: grid;
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  grid-template-columns: 1fr;
  margin-top: var(--wp--preset--spacing--30);
}
@media (min-width: 700px)  { .lg-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lg-board { min-width: 0; }
.lg-board__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin: 0 0 .6em;
  padding-bottom: .5em;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  letter-spacing: -.05em;
  /* 제목 아래 굵은 선 하나. 한국 병원·관공서 게시판의 오래된 관습이고,
     세 칸의 시작점이 같은 높이라는 것을 눈으로 알려 준다. */
  border-bottom: 2px solid var(--wp--preset--color--text);
}
.lg-board__more {
  flex: 0 0 auto;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--wp--preset--color--text-soft);
}
@media (hover: hover) { .lg-board__more:hover { color: var(--lg-ink-primary); } }

.lg-board .lg-notices { border-top: 0; }
.lg-board__empty {
  padding: .9rem .1rem;
  color: var(--wp--preset--color--text-soft);
  font-size: var(--wp--preset--font-size--small);
  border-bottom: 1px solid var(--wp--preset--color--line);
}

/* ── 첫 화면을 더 밝게 ──
   막을 얇게 할수록 사진이 산다. 그런데 얇게만 하면 글자가 흐려진다.
   그래서 **막을 더 걷는 대신 글자 쪽에 그림자를 준다** — 방송 자막이 쓰는
   방법이고, 화면 전체를 어둡게 하지 않고 글자만 또렷하게 만든다. */
.lg-hero--cover::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, .46) 30%,
      rgba(0, 0, 0, .26) 52%, rgba(0, 0, 0, .06) 70%, rgba(0, 0, 0, 0) 84%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .5), transparent) 0%,
      transparent 70%);
}
.lg-hero--cover .lg-banner__inner :is(h1, h2, p) {
  text-shadow: 0 1px 2px rgb(0 0 0 / .55), 0 2px 14px rgb(0 0 0 / .38);
}
.lg-banner__title,
.lg-banner__eyebrow {
  text-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 2px 12px rgb(0 0 0 / .32);
}

/* 안쪽 배너도 같은 정도로 밝게. */
.lg-banner::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .54) 0%, rgba(0, 0, 0, .46) 30%,
      rgba(0, 0, 0, .26) 52%, rgba(0, 0, 0, .06) 70%, rgba(0, 0, 0, 0) 84%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .5), transparent) 0%,
      transparent 72%);
}


/* ── 좁은 화면의 배너 덮개(다시) ──
   위에서 배너 덮개를 손보면서 **가로 그라데이션이 모바일 규칙보다 뒤에 와
   모바일의 세로 덮개를 덮어 버렸다.** 390px 에서 제목 대비가 2.84:1 로
   떨어진 원인이다. 좁은 화면은 글자와 인물을 좌우로 떼어 놓을 자리가 없어
   반드시 세로로 덮어야 한다. 그래서 규칙을 맨 뒤에 다시 둔다. */
@media (max-width: 781px) {
  .lg-banner::after,
  .lg-hero--cover::after,
  .lg-banner--veil-full::after {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .46) 30%,
        rgba(0, 0, 0, .66) 60%, rgba(0, 0, 0, .82) 100%),
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .5), transparent);
  }
}


/* 배너 윗글(대메뉴 이름)은 흐리게 두던 것을 좁은 화면에서는 또렷하게.
   `opacity: .88` 이 대비를 그대로 깎아 3.6:1 까지 내려갔다 — 덮개를 아무리
   손봐도 글자 자체가 반투명이면 소용이 없다. */
@media (max-width: 781px) {
  .lg-banner__eyebrow { opacity: 1; }
}

/* ═════════ 첫 화면에 걸치는 안내 카드 네 장 ═════════
   상담 안내 · 이용 안내 · 비급여 수가 · 오시는 길.
   군자건항외과가 쓰는 배치다. 병원에 들어온 사람이 가장 먼저 알고 싶은 네
   가지를 첫 화면을 넘기기 전에 다 보여 준다. */

.lg-hcards {
  position: relative;
  z-index: 10;
  /* 사진 아래쪽에 걸친다. 카드 높이의 일부만 사진 위로 올라가면 되므로
     고정값이 아니라 화면 폭에 따라 달라지게 둔다. */
  margin-top: clamp(-140px, -9vw, -80px);
  padding-inline: var(--wp--style--root--padding-left, 16px);
}
.lg-hcards__inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  gap: var(--wp--preset--spacing--30);
  /* 좁으면 한 칸, 중간이면 두 칸, 넓으면 네 칸. 억지로 네 칸을 눕히면
     전화번호가 두 줄로 접힌다. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px)  { .lg-hcards__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lg-hcards__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lg-hcard {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
  padding: var(--wp--preset--spacing--40);
  border-radius: 12px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  box-shadow: 0 6px 20px rgb(15 28 28 / .08);
  text-decoration: none;
  color: var(--wp--preset--color--text);
  transition: translate var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
@media (hover: hover) {
  .lg-hcard:hover { translate: 0 -3px; box-shadow: 0 14px 30px rgb(15 28 28 / .14); }
}

/* 첫 장은 색을 채운다. 전화번호가 네 장 중에서 가장 먼저 눈에 들어와야 한다. */
.lg-hcard--fill {
  background: var(--wp--preset--color--primary);
  border-color: transparent;
  color: #fff;
}

.lg-hcard__title {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1.3;
}
.lg-hcard__sub {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.03em;
  color: var(--wp--preset--color--text-soft);
  margin-bottom: .5rem;
}
.lg-hcard--fill .lg-hcard__sub { color: rgb(255 255 255 / .82); }

.lg-hcard__big {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.04em;
  margin: .3rem 0 .6rem;
  white-space: nowrap;
}

.lg-hcard__rows { display: grid; gap: .18rem; margin-bottom: .5rem; }
.lg-hcard__row {
  display: flex; gap: .6rem;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.03em;
  line-height: 1.6;
}
.lg-hcard__row i {
  flex: 0 0 4.2em;
  font-style: normal;
  color: var(--wp--preset--color--text-soft);
}
.lg-hcard__row b { font-weight: 400; min-width: 0; }

/* 맨 아래 한 줄은 주색으로. 카드마다 「그래서 알아 둘 것」이 하나씩 있다. */
.lg-hcard__note {
  margin-top: auto;
  padding-top: .4rem;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: -.03em;
  line-height: 1.5;
  color: var(--lg-ink-primary);
}
.lg-hcard--fill .lg-hcard__note { color: rgb(255 255 255 / .9); }

/* 카드가 사진 위로 올라온 만큼 아래 본문과의 사이를 벌린다. */
.lg-hcards + * { margin-top: var(--wp--preset--spacing--50); }

/* 좁은 화면에서는 걸치지 않는다. 카드 넉 장이 세로로 쌓이므로 사진을
   통째로 덮어 버린다. */
@media (max-width: 639px) {
  .lg-hcards { margin-top: var(--wp--preset--spacing--40); }
}


/* ── 첫 화면 덮개(최종) ──
   실장님 지시: 「여자 사진에는 색을 입히지 마세요. 여자가 앉아 있는 의자부터
   색을 입히세요.」 맞는 말이다. 인물의 피부에 팔레트 색이 얹히면 얼굴이
   물들어 보이고, 그것이 화면을 어둡게 느끼게 하는 가장 큰 원인이다.

   그래서 **색 막은 왼쪽 3분의 1에서 끝낸다**(의자 언저리). 검은 막도 인물이
   시작되기 전에 다 사라지게 한다. 글자는 왼쪽에만 앉으므로 읽는 데 지장이 없다. */
.lg-hero--cover::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .50) 0%, rgba(0, 0, 0, .42) 18%,
      rgba(0, 0, 0, .22) 32%, rgba(0, 0, 0, .05) 44%, rgba(0, 0, 0, 0) 54%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * 1.15), transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--primary) calc(var(--lg-banner-tint, 46%) * .85), transparent) 22%,
      transparent 40%);
}
.lg-hero__eyebrow {
  margin: 0 0 .7em;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / .5);
}
.lg-hero__lead { margin-top: .8em; }


/* 첫 화면의 출처 표기는 카드 넉 장에 가린다. 카드가 걸치는 높이만큼 올린다
   (아래 `.lg-hcards` 의 margin-top 과 같은 값으로 맞춰 둔다). */
.lg-hero--cover .lg-banner__credit { bottom: clamp(92px, 9.6vw, 152px); }
@media (max-width: 639px) {
  .lg-hero--cover .lg-banner__credit { bottom: 8px; }
}

/* ═════════ 첫 화면 — 밝은 사진에 진한 글씨 ═════════
   흰 글자를 읽히게 하려면 사진을 어둡게 덮어야 하고, 어둡게 덮지 않으려면
   글자를 흰색으로 둘 수 없다. 둘 다 가지려고 애쓰다 대비가 1.5:1 까지
   떨어졌다(실측).

   참고로 주신 군자건항외과가 답을 보여 준다 — **밝은 사진 위에 진한 글씨**다.
   우리 배너 사진도 발주 규격상 왼쪽이 비어 있고 밝다(실측 RGB 215~221).
   그러니 첫 화면은 글자를 진하게 바꾸고, 덮개는 「어둡게」가 아니라
   「살짝 밝게 + 옅은 파랑」으로 간다. 사진은 그대로 살고 화면은 밝아진다. */

.lg-hero--cover::after {
  background:
    /* ① 왼쪽을 살짝 희게 눌러 글자가 놓일 자리를 고르게 만든다 */
    linear-gradient(90deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .58) 20%,
      rgba(255, 255, 255, .30) 34%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, 0) 56%),
    /* ② 그 위에 병원 색을 옅게. 의자 언저리(약 40%)에서 끝나므로
          인물에는 색이 닿지 않는다 — 실장님 지시 */
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent) 22%,
      transparent 40%);
}

.lg-hero--cover .lg-hero__eyebrow {
  color: var(--lg-ink-primary);
  text-shadow: none;
}
.lg-hero--cover .lg-hero__title,
.lg-hero--cover .lg-hero__lead {
  color: var(--wp--preset--color--text);
  text-shadow: 0 1px 0 rgb(255 255 255 / .55);
}
.lg-hero--cover .lg-banner__credit {
  color: var(--wp--preset--color--text);
  text-shadow: 0 1px 0 rgb(255 255 255 / .6);
}

/* 좁은 화면에서는 사진이 인물 위주로 잘려 왼쪽 여백이 사라진다.
   거기서는 아래쪽을 희게 눌러 그 위에 진한 글씨를 올린다. */
@media (max-width: 781px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 34%,
        rgba(255, 255, 255, .78) 66%, rgba(255, 255, 255, .92) 100%),
      linear-gradient(180deg, transparent 40%,
        color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) 100%);
  }
}

/* ── 색을 채운 카드 ──
   밝은 하늘색 위의 흰 글씨는 3.16:1 밖에 안 나온다(기준 4.5). 면을 칠할 때
   쓰는 밝은 색과, **흰 글씨를 얹을 수 있는 색**은 다르다. 글씨를 얹는
   면에는 한 단계 진한 값을 쓴다. */
:root, body { --lg-fill-primary: color-mix(in srgb, var(--wp--preset--color--primary) 72%, var(--wp--preset--color--text)); }
.lg-hcard--fill { background: var(--lg-fill-primary); }
.lg-hcard--fill .lg-hcard__note { color: #fff; }

.lg-hcard--fill .lg-hcard__sub { color: rgb(255 255 255 / .92); }

/* ── 첫 화면 글귀가 인물 위로 넘어가지 않게 ──
   900px 에서 「마포안과는 여러분과 함께합니다」가 인물의 머리 위까지 뻗어
   글자가 묻혔다. 밝은 덮개는 왼쪽 40% 에만 있으니, 글귀도 그 안에 머물러야 한다.

   그런데 폭이 좁아지면 사진이 인물 위주로 잘려 왼쪽 여백 자체가 없어진다.
   그때는 좌우로 나누는 것을 포기하고 **아래쪽을 희게 눌러** 그 위에 글을 얹는다. */
@media (min-width: 1100px) {
  .lg-hero--cover .lg-banner__inner { max-width: min(44%, 620px); }
}
@media (min-width: 782px) and (max-width: 1099px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .30) 38%,
        rgba(255, 255, 255, .76) 70%, rgba(255, 255, 255, .92) 100%),
      linear-gradient(180deg, transparent 44%,
        color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) 100%);
  }
  .lg-hero--cover { display: flex; align-items: flex-end; }
}

/* ── 글자 뒤를 확실히 밝게 ──
   사진에 기대면 안 된다. 왼쪽이 비어 있게 찍혀 와도 의자처럼 어두운 것이
   글자 끝자락에 걸리고, 거기서 대비가 1.1:1 까지 떨어진다(실측).
   **사진이 어떻든 글자 뒤는 밝다**가 보장되도록 흰 막을 확실히 깐다.
   인물이 시작되는 자리(약 50%) 전에 다 사라지므로 얼굴에는 닿지 않는다. */
@media (min-width: 1100px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .88) 24%,
        rgba(255, 255, 255, .66) 38%, rgba(255, 255, 255, .30) 48%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent) 0%,
        color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) 26%,
        transparent 44%);
  }
}
@media (min-width: 782px) and (max-width: 1099px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 34%,
        rgba(255, 255, 255, .86) 62%, rgba(255, 255, 255, .95) 100%),
      linear-gradient(180deg, transparent 40%,
        color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 100%);
  }
}
@media (max-width: 781px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .40) 30%,
        rgba(255, 255, 255, .88) 58%, rgba(255, 255, 255, .96) 100%),
      linear-gradient(180deg, transparent 36%,
        color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 100%);
  }
  .lg-hero--cover { display: flex; align-items: flex-end; }
}

/* 글상자를 글자 너비에 맞춘다. 블록 요소는 글이 짧아도 상자가 끝까지 늘어나서,
   빈 상자 오른쪽이 인물 위에 걸친다. 눈에는 안 보이지만 글줄이 한 자만 길어져도
   바로 인물 위로 넘어가므로 미리 막는다. */
.lg-hero--cover .lg-banner__inner :is(h1, h2, p) {
  width: fit-content;
  max-width: 100%;
}

/* ── 글상자 폭과 흰 막의 폭을 맞춘다 ──
   `width: fit-content` 는 글이 한 줄로 들어가지 못하면 **쓸 수 있는 폭 전체**가
   된다. 그래서 두 줄로 접히는 제목의 상자는 끝까지 늘어나고, 그 오른쪽 끝이
   어두운 의자 위에 걸쳐 대비가 1.3:1 이 됐다.

   글상자를 더 좁히고, 흰 막이 그 상자를 **끝까지 덮도록** 폭을 맞춘다.
   병원 색(파랑)은 44% 에서 끝내 인물에 닿지 않게 그대로 둔다 — 흰 막은
   색을 입히는 것이 아니라 밝게 하는 것이므로 조금 더 나가도 된다. */
@media (min-width: 1100px) {
  .lg-hero--cover .lg-banner__inner { max-width: min(42%, 560px); }
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .90) 30%,
        rgba(255, 255, 255, .82) 42%, rgba(255, 255, 255, .52) 52%,
        rgba(255, 255, 255, .18) 60%, rgba(255, 255, 255, 0) 68%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent) 0%,
        color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent) 26%,
        transparent 44%);
  }
}

/* ── 첫 화면 글상자는 **왼쪽에 붙어야** 한다 ──
   안쪽 칸(.lg-banner__inner)은 `margin-inline: auto` 로 가운데 정렬돼 있다.
   거기에 max-width 를 걸었더니 칸 전체가 화면 한가운데로 밀려가(x=440)
   글자가 인물 위에 올라앉았다. 칸은 그대로 두고 **글줄만** 좁힌다. */
@media (min-width: 1100px) {
  .lg-hero--cover .lg-banner__inner { max-width: min(100%, var(--wp--style--global--wide-size)); }
  .lg-hero--cover .lg-banner__inner :is(h1, h2, p) { max-width: min(42%, 560px); }
}

/* ── 좁은 화면(아래쪽을 희게 누르는 방식)의 마무리 ──
   실측에서 부제가 3.10:1, 영문 이름이 2.2:1 까지 내려갔다. 글이 앉는 아래
   절반을 확실히 눌러야 한다. 사진에서 보여 줄 것은 위쪽 인물이므로,
   아래를 더 눌러도 잃는 것이 없다. */
@media (max-width: 1099px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 30%,
        rgba(255, 255, 255, .80) 50%, rgba(255, 255, 255, .95) 66%, rgba(255, 255, 255, .98) 100%),
      linear-gradient(180deg, transparent 38%,
        color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 100%);
  }
  .lg-hero--cover { display: flex; align-items: flex-end; }
}

/* ── 진한 글씨에는 진한 그림자를 쓰면 안 된다 ──
   흰 글자이던 시절의 그림자(검정)가 그대로 남아 있었다. 진한 글씨 뒤에 검은
   그림자를 깔면 글자가 뭉개져 오히려 흐려 보인다. 밝은 바탕에 진한 글씨이므로
   **흰 테두리**를 옅게 주는 것이 맞다. */
.lg-hero--cover .lg-banner__inner :is(h1, h2, p),
.lg-hero--cover .lg-hero__title,
.lg-hero--cover .lg-hero__lead,
.lg-hero--cover .lg-hero__eyebrow {
  text-shadow: 0 1px 0 rgb(255 255 255 / .7), 0 0 10px rgb(255 255 255 / .55);
}

/* 영문 이름은 제목보다 위에 있어 아래쪽 흰 막이 덜 닿는다.
   좁은 화면에서는 막을 조금 더 위에서부터 건다. */
@media (max-width: 781px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .44) 26%,
        rgba(255, 255, 255, .88) 46%, rgba(255, 255, 255, .96) 64%, rgba(255, 255, 255, .98) 100%),
      linear-gradient(180deg, transparent 34%,
        color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 100%);
  }
}

/* ── 카드가 두 줄일 때는 걸치지 않는다 ──
   1,100px 아래에서는 카드가 두 줄(2×2)로 놓여 덩어리가 두 배로 두꺼워진다.
   그대로 걸치면 사진뿐 아니라 **사진 위의 글귀까지 덮는다** — 실측에서
   부제가 카드에 가려 대비 3.1:1 로 나왔다(글자가 아니라 카드에 가린 것). */
@media (max-width: 1099px) {
  .lg-hcards { margin-top: var(--wp--preset--spacing--40); }
  .lg-hero--cover .lg-banner__credit { bottom: 8px; }
}

/* 360px(가장 작은 휴대전화)에서는 영문 이름이 흰 막이 덜 닿는 높이에 걸린다.
   이 폭에서만 진한 글자색으로 바꾼다 — 3.90:1 → 기준 통과. */
@media (max-width: 400px) {
  .lg-hero--cover .lg-hero__eyebrow { color: var(--wp--preset--color--text); }
}

/* ═══════════════════════════════════════════════════════════
   첫 화면 — 사람은 절대 흐려지지 않는다

   실장님 지적: 「사람 모습은 절대 흐릿하게 보여지면 안 됩니다. 모바일 보면
   여자 얼굴까지 흐릿해집니다.」 맞는 말이고, 내가 방법을 잘못 골랐다.

   지금까지는 글자를 키워 놓고 그 글자가 읽히도록 사진을 덮었다. 글자가 길면
   덮개도 넓어지고, 결국 인물까지 덮였다. 순서가 거꾸로였다.

   바꾼 원칙 — **덮개를 글자에 맞추는 것이 아니라, 글자를 빈자리에 맞춘다.**
     · 영문 이름은 글자 수가 적으니 크게 (실장님 지시)
     · 한글 두 줄은 **같은 크기로, 작게** — 길어서 키우면 얼굴을 침범한다
     · 덮개는 의자 앞(38%)에서 끝난다. 인물에는 한 점도 닿지 않는다
     · 좁은 화면은 사진을 아예 건드리지 않고 **글을 사진 아래**로 내린다
   ═══════════════════════════════════════════════════════════ */

/* ── 덮개: 의자 앞에서 끝난다 ── */
@media (min-width: 1000px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--wp--preset--color--primary) 82%, white) 0%,
        color-mix(in srgb, var(--wp--preset--color--primary) 62%, white) 16%,
        color-mix(in srgb, var(--wp--preset--color--primary) 30%, white) 27%,
        rgba(255, 255, 255, .40) 34%,
        rgba(255, 255, 255, 0) 40%);
  }
  /* 글줄은 덮개 안(34%)에서 끝나야 한다. 한 자라도 넘으면 사진 위로 올라탄다. */
  .lg-hero--cover .lg-banner__inner :is(h1, h2, p) { max-width: min(32%, 430px); }
  .lg-hero--cover .lg-banner__inner { max-width: min(100%, var(--wp--style--global--wide-size)); }
}

/* ── 글자 크기: 영문만 크게, 한글 두 줄은 같은 크기 ── */
.lg-hero--cover .lg-hero__eyebrow {
  margin: 0 0 .5em;
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--lg-ink-primary);
  text-shadow: none;
}
.lg-hero--cover .lg-hero__title,
.lg-hero--cover .lg-hero__lead {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--text);
  text-shadow: none;
}
.lg-hero--cover .lg-hero__lead { margin-top: .1em; }

/* ── 사진은 손대지 않는다 ── */
.lg-hero--cover::before { filter: none; }

/* ── 좁은 화면: 글을 사진 아래로 ──
   390px 에서는 사진에 인물이 가득 차서 글자를 얹을 빈자리가 없다.
   사진 위에 얹으려 하면 반드시 얼굴을 덮게 된다. 그러니 얹지 않는다. */
@media (max-width: 999px) {
  .lg-hero--cover {
    display: block;
    min-height: 0;
    padding: 0;
  }
  .lg-hero--cover::before {
    position: static;
    display: block;
    content: "";
    aspect-ratio: 3 / 2;
    background-image: var(--lg-banner-img, none);
    background-size: cover;
    background-position: 62% center;
    z-index: auto;
  }
  .lg-hero--cover::after { display: none; }   /* 덮개 없음 — 사진 그대로 */
  .lg-hero--cover .lg-banner__inner {
    /* `width: 100%` 에 좌우 여백을 더하면 그만큼 밖으로 나간다.
       상자 계산을 테두리 기준으로 못 박고 max-width 로 잡는다. */
    box-sizing: border-box;
    width: auto;
    max-width: var(--wp--style--global--wide-size);
    margin-inline: auto;
    padding: var(--wp--preset--spacing--40) var(--wp--style--root--padding-left, 16px)
             var(--wp--preset--spacing--30);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 10%, white),
      var(--wp--preset--color--base));
  }
  .lg-hero--cover .lg-banner__credit {
    position: static;
    margin: 0;
    padding: 4px var(--wp--style--root--padding-left, 16px);
    text-align: right;
    color: var(--wp--preset--color--text-soft);
    text-shadow: none;
  }
}

/* 사진을 제자리에 놓으면(`position: static`) 배너 자체의 바탕색이 남은 자리에
   드러난다. 좁은 화면에서 출처 표기 뒤에 파란 띠가 생긴 원인이다. */
@media (max-width: 999px) {
  .lg-hero--cover { background: var(--wp--preset--color--base); }
}

/* 데스크톱 — 덮개를 의자까지 살짝 더 (실장님: 「뒤에 의자부터 흐리게」) */
@media (min-width: 1000px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--wp--preset--color--primary) 82%, white) 0%,
        color-mix(in srgb, var(--wp--preset--color--primary) 62%, white) 17%,
        color-mix(in srgb, var(--wp--preset--color--primary) 32%, white) 29%,
        rgba(255, 255, 255, .46) 37%,
        rgba(255, 255, 255, 0) 44%);
  }
  /* 출처 표기가 파란 덮개 위에 놓인다 — 흰 글씨라야 읽힌다. */
  .lg-hero--cover .lg-banner__credit { color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
}

/* ── 왼쪽 덮개는 「진한 파랑」이 아니라 「밝은 하늘빛」 ──
   진한 파랑을 깔았더니 그 위의 파란 영문 글씨가 2.5:1 이 됐다(실측).
   글씨를 흰색으로 바꾸면 되지만, 그러면 왼쪽이 다시 어두워진다 —
   「안과는 밝은 세상」이라는 기준에 어긋난다.
   그래서 반대로 간다: **덮개를 아주 옅게** 깔고 글씨는 진하게 둔다.
   푸른 기운은 그대로 남으면서 화면은 밝고 글씨는 또렷하다. */
@media (min-width: 1000px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--wp--preset--color--primary) 26%, white) 0%,
        color-mix(in srgb, var(--wp--preset--color--primary) 20%, white) 18%,
        color-mix(in srgb, var(--wp--preset--color--primary) 12%, white) 29%,
        rgba(255, 255, 255, .46) 37%,
        rgba(255, 255, 255, 0) 44%);
  }
  .lg-hero--cover .lg-banner__credit {
    color: var(--wp--preset--color--text-soft);
    text-shadow: none;
  }
}

/* 출처 표기도 본문 글자색으로 — 보조 글자색은 옅은 하늘빛 위에서 4.19:1 이었다. */
@media (min-width: 1000px) {
  .lg-hero--cover .lg-banner__credit { color: var(--wp--preset--color--text); }
}

/* ── 로고 ──
   로고 그림을 올리면 그림만, 안 올리면 병원 이름이 글자로 나온다.
   둘 다 나오면 같은 이름이 두 번 보이므로 하나를 감춘다. */
.lg-brand { align-items: center; gap: .7rem; }
.lg-brand .wp-block-site-logo img { display: block; height: auto; max-height: 64px; width: auto; }
.lg-brand:has(.wp-block-site-logo img) .wp-block-site-title { display: none; }
@media (max-width: 781px) {
  .lg-brand .wp-block-site-logo img { max-height: 48px; }
}
/* 로고가 가운데인 머리말에서는 로고 줄을 통째로 가운데로 */
.lg-logo-center .lg-brand { justify-content: center; }

/* ── 대메뉴 글자 크기 ──
   라식가이드 본문이 17px 이고, 실장님 지시가 「메뉴는 그보다 1포인트 작게」다.
   1pt ≈ 1.33px 이므로 16px 으로 둔다. 글꼴·자간은 라식가이드와 같다. */
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -.02em;
  }
}

/* ── 안내 카드 색 ──
   배치와 글귀는 표준으로 고정하고 색만 고르게 한다. 값은 진한 쪽으로 골라
   흰 글씨가 4.5:1 을 넘도록 했다 — 밝은 색은 흰 글씨를 얹을 수 없다. */
.lg-hcards--deep  .lg-hcard--fill { background: #17406B; }
.lg-hcards--teal  .lg-hcard--fill { background: #17605C; }
.lg-hcards--gray  .lg-hcard--fill { background: #37414B; }
.lg-hcards--plain .lg-hcard--fill {
  background: var(--wp--preset--color--base);
  border-color: var(--wp--preset--color--line);
  color: var(--wp--preset--color--text);
}
.lg-hcards--plain .lg-hcard--fill .lg-hcard__sub { color: var(--wp--preset--color--text-soft); }
.lg-hcards--plain .lg-hcard--fill .lg-hcard__big { color: var(--lg-ink-primary); }
.lg-hcards--plain .lg-hcard--fill .lg-hcard__note { color: var(--lg-ink-primary); }

/* 로고가 가운데인 머리말은 메뉴도 가운데로 펴진다(밝은희망안과 방식).
   앞쪽에서 진료시간 배지를 오른쪽 끝에 붙이려고 `space-between` 을 걸어 둔
   규칙이 있는데, 배지가 없는 홈에서는 메뉴가 왼쪽에 몰려 보인다. */
@media (min-width: 1200px) {
  .lg-logo-center .lg-nav { justify-content: center; }
}
.lg-logo-center .lg-nav .wp-block-navigation__container { justify-content: center; }

/* ═════════ 대메뉴 펼침 — 밝은희망안과 방식 ═════════
   실장님이 짚어 주신 hopeeye.co.kr 의 메뉴를 뜯어 보니 **자바스크립트가 한 줄도
   없었다.** 규칙은 딱 두 줄이다.

     .lnb_p .dep1 > li > div { display: none }
     .lnb_p:hover .dep1 > li > div { display: block }

   핵심은 마우스를 올리는 대상이 **항목(li)이 아니라 메뉴 띠 전체(.lnb_p)**라는
   점이다. 그래서 어느 항목에 올려도 하위 메뉴가 **한꺼번에** 열리고, 여러 칸이
   나란히 놓여 흰 커튼 한 장처럼 보인다. 항목마다 따로 여는 방식보다
   ① 마우스가 항목 사이를 지날 때 깜빡이지 않고
   ② 옆 항목에 무엇이 있는지 한눈에 보이고
   ③ 규칙이 두 줄이라 고장 날 데가 없다.

   우리도 같은 방식으로 간다. 다른 점은 띠의 배경을 그리는 방법뿐이다 —
   저쪽은 머리말이 absolute 라 저절로 늘어나지만, 우리 머리말은 sticky 라
   늘어나면 본문이 밀린다. 그래서 배경만 가짜로 한 장 깔고 하위 메뉴는
   그 위에 띄운다. 그 배경의 높이는 `--lg-mega-h` 로 PHP 가 알려 준다
   (가장 긴 하위 메뉴의 항목 수 × 40px + 32px). */

@media (min-width: 1024px) and (hover: hover) {
  /* ① 흰 띠 — 메뉴에 마우스가 올라가 있을 때만 */
  .lg-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: var(--lg-mega-h, 232px);
    background: var(--wp--preset--color--base);
    border-bottom: 1px solid var(--wp--preset--color--line);
    box-shadow: 0 12px 24px rgb(15 28 28 / .08);
    /* ★띠가 「내려오게」 한다★
       전에는 그 자리에서 나타나기만 해서(opacity) 너무 빨리 켜진 것처럼
       보였다. 높이를 0에서 제 높이까지 늘리면 위에서 아래로 펼쳐진다.
       닫을 때는 빠르게(.18초) — 커서를 뺐는데 천천히 접히면 답답하다. */
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition:
      height .18s var(--lg-ease),
      opacity .18s var(--lg-ease),
      visibility .18s;
    z-index: -1;
  }
  .lg-header:has(.lg-nav:hover)::after,
  .lg-header:has(.lg-nav:focus-within)::after {
    height: var(--lg-mega-h, 232px);
    opacity: 1;
    visibility: visible;
    /* 열 때는 천천히 — 0.42초에 걸쳐 내려온다. */
    /* 이징은 테마 기본(--lg-ease)을 쓰지 않는다. 그 곡선은 앞이 매우 빨라
       60ms 만에 42% 가 내려와, 시간을 늘려도 「켜졌다」로 보인다.
       밑줄 애니메이션에서 같은 함정을 겪고 찾은 곡선을 쓴다. */
    transition:
      height var(--lg-mega-dur) cubic-bezier(.22, .61, .36, 1),
      opacity .2s var(--lg-ease),
      visibility 0s;
  }

  /* ② 하위 메뉴 — 띠에 마우스가 올라가면 전부 함께.
     글자는 띠보다 **조금 늦게** 들어온다(0.1초). 띠가 내려오는 중에 글자가
     먼저 떠 있으면 글자가 허공에 뜬 것처럼 보인다. */
  .lg-nav:hover .wp-block-navigation__submenu-container,
  .lg-nav:focus-within .wp-block-navigation__submenu-container {
    display: block;
    opacity: 1;
    translate: 0 0;
    transition:
      opacity .28s var(--lg-ease) .1s,
      translate .28s var(--lg-ease) .1s,
      display .28s allow-discrete;
  }
  .lg-nav .wp-block-navigation__submenu-container {
    top: 100%;
    left: 0;
    /* ★폭을 **자기 칸에 맞춘다** ★
       예전에는 11em(약 187px)으로 못박아 두었다. 그런데 대메뉴 한 칸은
       95px 남짓이라, 여섯 칸이 한꺼번에 열리는 이 방식에서는 옆 칸의
       하위 메뉴와 통째로 겹쳤다 — 「사시 클리닉」과 「안질환 정보」가
       같은 자리에 포개져 글자가 뭉개졌다.
       `min-width: 100%` 는 자기 칸만큼, `max-content` 는 글자만큼.
       둘을 합치면 **자기 칸보다 좁아지지도, 글자를 자르지도 않는다.** */
    /* ★폭은 **자기 칸에 딱 맞춘다** ★
       11em(약 187px)으로 못박아 두었더니, 대메뉴 한 칸이 95px 남짓이라
       여섯 칸이 한꺼번에 열리는 이 방식에서는 옆 칸의 하위 메뉴와 통째로
       겹쳤다 — 「사시 클리닉」과 「안질환 정보」가 같은 자리에 포개졌다.
       `max-content` 로 바꿔도 긴 항목이 옆 칸을 90px 씩 침범했다.
       **칸 폭에 맞추고 긴 항목은 두 줄로 접는 것**만이 겹치지 않는다. */
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 1rem .2rem .6rem;
    border: 0;
    background: transparent;   /* 배경은 위의 띠 한 장이 맡는다 */
    box-shadow: none;
  }
  .lg-nav .wp-block-navigation__submenu-container a {
    padding: .42em .95em;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -.02em;
    color: var(--wp--preset--color--text-soft);
    white-space: nowrap;
  }
  .lg-nav .wp-block-navigation__submenu-container a:hover {
    color: var(--lg-ink-primary);
  }
  /* 마우스가 올라간 대메뉴 항목만 색이 바뀐다 — 어느 칸을 보고 있는지 표시 */
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a {
    color: var(--lg-ink-primary);
  }
}

/* 마우스가 없는 기기(터치)에서는 눌러서 여는 기본 동작을 그대로 둔다.
   한꺼번에 펼치는 방식은 마우스가 있어야 쓸모가 있다. */

/* ★ 펼침 메뉴가 안 보이던 진짜 이유 ★
   `.lg-nav .wp-block-navigation { overflow: auto }` 가 걸려 있었다. 메뉴가 두
   줄로 접히던 시절에 옆으로 밀어 볼 수 있게 넣어 둔 규칙인데, overflow 가
   visible 이 아니면 **그 안에서 절대 위치로 떠 있는 하위 메뉴가 잘려 나간다.**
   지금은 메뉴가 한 줄에 다 들어가므로 그 규칙 자체가 필요 없다. */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation { overflow: visible; }
}

/* 하위 메뉴의 바탕과 글자색은 워드프레스가 제 값으로 칠해 둔다.
   띠 한 장으로 보이게 하려면 여기서 다시 덮어야 한다(굵기를 올려 이긴다). */
@media (min-width: 1024px) and (hover: hover) {
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container {
    background-color: transparent;
    color: inherit;
  }
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a {
    color: var(--wp--preset--color--text-soft);
    background: transparent;
  }
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a:hover {
    color: var(--lg-ink-primary);
  }
}

/* ★ 워드프레스는 하위 메뉴를 `display` 로만 감추지 않는다 ★
   기본값이 `height:0; width:0; overflow:hidden; visibility:hidden` 이고,
   제 규칙(`.has-child:hover > …`)에서 이 넷을 되돌린다. 그래서 `display:block`
   하나만 켜 봐야 높이 0에 보이지 않는 상자가 열릴 뿐이다.
   — 실측에서 열린 칸이 「28px(여백만)」으로 나온 이유가 이것이었다. */
@media (min-width: 1024px) and (hover: hover) {
  .lg-nav .wp-block-navigation:hover .wp-block-navigation__submenu-container,
  .lg-nav .wp-block-navigation:focus-within .wp-block-navigation__submenu-container {
    display: block;
    height: auto;
    width: 100%;
    min-width: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    translate: 0 0;
  }
}

/* overflow 되돌리기 — 앞의 규칙이 `.lg-menu-inline:not(.lg-logo-center) .lg-nav
   .wp-block-navigation` (클래스 4개)로 쓰여 있어서, 클래스 2개짜리 규칙으로는
   이길 수 없었다. 같은 굵기로 다시 쓴다. 메뉴가 한 줄에 들어가는 지금은
   옆으로 미는 기능 자체가 필요 없다. */
@media (min-width: 1024px) {
  .lg-menu-inline:not(.lg-logo-center) .lg-nav .wp-block-navigation,
  .lg-logo-center .lg-nav .wp-block-navigation,
  .lg-menu-below .lg-nav .wp-block-navigation {
    overflow: visible;
    overflow-x: visible;
  }
}

/* 칸마다 테두리가 그려져 있으면 「흰 커튼 한 장」이 아니라 「상자 여섯 개」가
   된다. 워드프레스 코어가 `border: 1px solid rgba(0,0,0,.15)` 를 넣는데,
   코어 CSS 가 테마보다 나중에 실려서 같은 굵기로는 이길 수 없다 —
   클래스 하나를 더 얹어 이긴다. */
@media (min-width: 1024px) and (hover: hover) {
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container {
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
}

/* 진료시간 배지 — 글꼴을 Noto Sans KR 로 바꾸면서 메뉴가 조금 넓어졌다.
   로고(176) + 메뉴(997) + 배지(163) + 사이 여백이면 1,400px 짜리 줄을 꽉 채워서
   1,366px 화면에서 배지가 33px 밖으로 나갔다(실측). 「로고 왼쪽」 배치에서는
   1,450px 부터만 배지를 같은 줄에 둔다. 진료시간은 첫 화면과 안내 카드에
   이미 있으므로 여기서 빠져도 잃는 것이 없다. */
@media (max-width: 1449px) {
  .lg-menu-inline:not(.lg-logo-center) .lg-header .lg-status { display: none; }
}

/* ═════════ 첫 화면 — 시안 그대로 ═════════
   실장님이 보내 주신 시안의 글자색을 그림에서 그대로 뽑아 썼다.
     1~2줄  #202020   (거의 검정)
     강조줄 #18564A   (진한 녹색 — 「마포안과의 약속」)
     설명줄 #5D6A74   (푸른 기 도는 회색)
   색을 눈으로 맞추면 늘 조금씩 빗나간다. 시안 파일에서 픽셀을 세어 뽑았다. */

.lg-hero--cover .lg-hero__title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.045em;
  color: #202020;
  text-shadow: none;
  margin: 0;
}
.lg-hero--cover .lg-hero__accent {
  color: #18564A;
  font-weight: 700;
}
.lg-hero--cover .lg-hero__lead {
  margin-top: 1.1em;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -.03em;
  /* 시안에서 픽셀을 세어 뽑은 값은 #5D6A74 였는데, 민트 벽(실측 가장 어두운 점
     RGB 212,235,228) 위에서 4.45:1 로 기준(4.5)에 아주 조금 못 미쳤다.
     같은 회청색 계열에서 두 단계만 내려 5.02:1 로 넘긴다 — 눈으로는 같은 색으로
     보이고 색조도 시안 그대로다. */
  color: #55626C;
  text-shadow: none;
}

/* ── 창쪽(왼쪽)을 민트로 ──
   실장님 지시: 「뒤에 창쪽은 민트색으로 그라데이션 해서 글씨가 잘 보이도록」.
   사진의 벽이 이미 민트색이라(실측 RGB 230,242,240) 그 색을 그대로 이어
   왼쪽 끝까지 채운다. 창문 쪽이 희고 밝아 글자가 묻히던 자리가 고르게 된다.
   인물이 시작되는 자리(약 46%) 전에 투명해지므로 얼굴에는 닿지 않는다. */
@media (min-width: 1000px) {
  .lg-hero--cover::after {
    background:
      linear-gradient(90deg,
        rgba(214, 240, 234, .96) 0%,
        rgba(219, 242, 236, .92) 20%,
        rgba(224, 243, 238, .72) 32%,
        rgba(228, 244, 240, .34) 40%,
        rgba(232, 245, 241, 0) 48%);
  }
}
@media (max-width: 999px) {
  .lg-hero--cover .lg-banner__inner {
    background: linear-gradient(180deg, rgba(214, 240, 234, .55), var(--wp--preset--color--base) 70%);
  }
}

/* ── 머리말 아래 선 없애기 ──
   첫 화면 사진이 머리말 바로 아래에 붙으므로, 그 사이 가는 선 한 줄이
   사진을 잘라 놓은 것처럼 보인다. 선을 지우고, 스크롤해서 본문 위에
   머리말이 떠 있을 때만 그림자로 경계를 준다. */
.lg-header { border-bottom: 0; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lg-shrink {
      to { padding-block: .35rem; box-shadow: 0 2px 12px rgb(0 0 0 / .08); }
    }
  }
}

/* 펼침 메뉴가 열렸을 때만 띠 아래에 선을 둔다(메뉴와 본문의 경계). */

/* ═════════ 메뉴 글씨 굵기와 민트 ═════════
   실장님 지시: 대메뉴·서브메뉴를 조금 더 진하게, 마우스를 올리면 민트색으로.

   민트색은 로고에서 그대로 뽑았다 — rgb(0,127,127) = #007F7F.
   흰 바탕에서 4.84:1 로 기준(4.5)을 넘는다. 더 밝은 민트(#2BB3A3)는
   2.6:1 밖에 안 나와 **글자색으로는 쓸 수 없다.** 넓은 면을 칠할 때 쓰는
   민트와 글씨에 쓰는 민트는 다른 값이어야 한다. */
:root, body { --lg-mint: #007F7F; }

@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    font-weight: 600;
  }
}

/* 대메뉴 — 마우스를 올리면 민트 */
@media (min-width: 1024px) and (hover: hover) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > a {
    color: var(--lg-mint);
  }
  /* 서브메뉴 — 조금 더 진하게, 올리면 민트 */
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a {
    color: var(--wp--preset--color--text);
    font-weight: 500;
    /* 칸 폭에 맞췄으니 긴 항목은 접혀야 한다. 안 접으면 다시 옆으로 삐져나간다. */
    white-space: normal;
    word-break: keep-all;
    line-height: 1.35;
  }
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a:hover,
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a:focus-visible {
    color: var(--lg-mint);
  }
}

/* 서브 이미지 아래 가로 띠도 같은 결로 */
.lg-subbar__list a { font-weight: 500; }
@media (hover: hover) {
  .lg-subbar__list a:hover { color: var(--lg-mint); }
}

/* ═════════ 밑줄이 가운데에서 양옆으로 ═════════
   실장님 지적: 「밝은희망안과는 메뉴에 마우스를 대면 중앙에서 양옆으로
   라인이 펼쳐집니다. 우리는 한 번에 라인 전체가 이동합니다.」

   그쪽 규칙을 뜯어 보니 비결은 **`margin: auto` 한 줄**이었다.

     left: 0; right: 0;   → 양쪽 끝을 다 잡아 두고
     width: 0;            → 폭은 0
     margin: auto;        → 남는 자리를 좌우로 똑같이 나눈다 = 가운데

   그 상태에서 폭만 100% 로 늘리면 가운데 선이 양옆으로 동시에 벌어진다.
   우리는 `border-bottom` 을 통째로 켜고 있어서 한 번에 나타났다.

   (테마에는 원래 `transform: scaleX()` 로 왼쪽에서 오른쪽으로 펴는 밑줄과,
   앵커 포지셔닝으로 항목 사이를 미끄러지는 밑줄이 있었다. 셋이 겹치면
   무엇이 이길지 알 수 없으므로 대메뉴에서는 앞의 둘을 끈다.) */
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a {
    position: relative;
    border-bottom: 0;
  }

  /* 옛 밑줄 둘을 끈다 */
  .lg-nav::before { display: none; }
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    top: auto;
    width: 0;
    height: 3px;
    margin: auto;
    background: var(--lg-mint);
    transform: none;          /* scaleX 로 펴던 것을 끈다 */
    display: block;
    transition: width .3s var(--lg-ease);
  }

  /* ★`width: 100%` 는 **좌우 여백을 빼 주지 않는다** ★
     `left`·`right` 를 여백만큼 들여놨는데 폭을 100% 로 주면, 그 폭이
     항목 전체 폭으로 잡혀 오른쪽으로 여백만큼 삐져나간다.
     (실측 1440px — 항목 143px, 밑줄 143px, 시작점 22px → 22px 초과)
     들여놓은 만큼을 빼 준다. */
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a::after,
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > a::after,
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a[aria-current]::after {
    width: calc(100% - var(--lg-nav-pad, 0px) * 2);
  }
}

/* ═════════ 형광 민트 ═════════
   실장님 지시: 「좀 더 밝은 민트, 형광 민트색으로」.

   민트를 **두 값**으로 나눈다. 하나로 통일할 수가 없다.

     --lg-mint-line : 형광 민트 #00D9A8. 밑줄 같은 **도형**에 쓴다.
                      흰 바탕 대비 1.83:1 — 글자였다면 못 쓸 값이지만
                      4px 두께의 선은 색 덩어리라 충분히 눈에 들어온다.
     --lg-mint-ink  : 글자에 쓰는 민트 #00827A. 흰 바탕 대비 4.69:1.

   형광 민트를 글자에 쓰면 1.8:1 이라 사실상 안 보인다. 안과 홈페이지는
   눈이 불편해서 찾아오는 분이 보는 화면이라 특히 물러설 수 없는 선이다.
   더 밝아 보이게 하려면 색을 흐리게 하지 말고 **선을 굵게** 하거나
   **옅은 민트 바탕**을 까는 쪽으로 간다. */
:root, body {
  --lg-mint-line: #00D9A8;
  --lg-mint-ink:  #00827A;
  --lg-mint:      #00827A;
}

@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    height: 4px;
    background: var(--lg-mint-line);
  }
}
@media (min-width: 1024px) and (hover: hover) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > a,
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within > a {
    color: var(--lg-mint-ink);
  }
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a:hover,
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a:focus-visible {
    color: var(--lg-mint-ink);
  }
}

/* 서브 이미지 아래 가로 띠도 같은 짝으로 — 글자는 진한 민트, 밑줄은 형광 민트 */
.lg-subbar__list a[aria-current="page"] {
  color: var(--lg-mint-ink);
  border-bottom-color: var(--lg-mint-line);
  border-bottom-width: 4px;
}
@media (hover: hover) {
  .lg-subbar__list a:hover { color: var(--lg-mint-ink); }
}

/* ── 밑줄이 펼쳐지는 속도 곡선 ──
   가운데에서 양옆으로 벌어지긴 하는데 눈에는 「그냥 켜진다」로 보였다.
   원인은 폭이 아니라 **이징**이었다. 테마가 쓰던 `cubic-bezier(.2,.7,.2,1)` 은
   앞이 아주 빠른 곡선이라 실측하니 **첫 45밀리초에 이미 80%** 가 펴져 있었다.
   밝은희망안과는 `.3s ease` 를 쓴다 — 고르게 퍼지는 곡선이라야 펼쳐지는 것이
   보인다. 조금 더 여유를 두어 .35s. */
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    transition: width .35s ease;
  }
}

/* 우리 메뉴 항목은 밝은희망안과(155px)보다 좁다(101px). 퍼지는 거리가 짧을수록
   시간을 조금 더 줘야 「움직인다」로 읽힌다. .35s → .45s, 곡선도 끝이 부드러운
   것으로. */
@media (min-width: 900px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
  }
}

/* ── 움직임 끄기 설정 ──
   `*` 는 **가상 요소를 고르지 못한다.** 메뉴 밑줄은 `::after` 로 그리기 때문에
   흔히 쓰는 `* { transition: none }` 한 줄로는 멈추지 않는다.
   윈도우에서 「애니메이션 효과」를 끈 분에게는 움직임이 없어야 한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ═════════ 민트 한 값으로 ═════════
   실장님 지시: 「글씨는 좀 밝은 민트, 밑에 움직이는 선은 좀 어둡게 해서
   같은 색으로」. 두 값을 가운데에서 만나게 했다.

     전에 — 글자 #00827A (4.69:1) / 선 #00D9A8 (1.83:1)
     지금 — 글자와 선 모두 #0B866E (4.52:1)

   **여기가 한계선이다.** 글자 대비 기준이 4.5:1 인데 이 색이 4.52:1 이다.
   한 단계만 더 밝게 하면 기준 아래로 떨어진다. 앞서 쓰던 청록보다
   초록 쪽(색상 168°)으로 옮겨서, 대비는 지키면서 눈에는 더 밝은 민트로
   읽히게 했다. */
:root, body {
  --lg-mint:      #0B866E;
  --lg-mint-line: var(--lg-mint);
  --lg-mint-ink:  var(--lg-mint);
}

/* ═════════ 밝은 민트 그린으로 내린 뒤의 뒷정리 ═════════
   실장님: 「녹색이 너무 진하다」. 주색을 #0E7C6B 에서 **#15A492** 로 한 단계
   밝게 올렸다. 그런데 주색은 **바탕으로도** 쓰인다 — 단추가 그렇다.
   밝은 주색 위 흰 글씨는 3.33:1 밖에 안 된다(기준 4.5:1).

   그래서 **역할을 갈랐다.**
     · 보여 주는 색(테두리·아이콘·장식)  → 주색 그대로, 밝게
     · 흰 글씨를 얹는 바탕(단추·채운 카드) → `--lg-fill-primary` (4.69:1)
     · 글자로 쓰는 색(링크·현재 항목)      → `--lg-ink-primary`  (6.17:1)

   이렇게 두면 화면은 밝아지고 글자는 그대로 읽힌다. 팔레트를 더 밝게
   바꾸더라도 이 세 갈래는 그대로 따라간다. */
.wp-element-button,
.wp-block-button__link {
  background-color: var(--lg-fill-primary);
}
@media (hover: hover) {
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    background-color: var(--lg-ink-primary);
  }
}

/* ═════════ 맨 끝 칸의 하위 메뉴만 오른쪽에 맞춘다 ═════════
   하위 메뉴는 자기 칸의 왼쪽 끝에 맞춰 열린다. 맨 오른쪽 칸만은 남은 자리가
   모자라 화면 밖으로 나가므로 오른쪽으로 뒤집는다.

   ★처음에 **마지막 두 칸**을 뒤집었더니 그게 겹침의 원인이 되었다★ —
   뒤에서 두 번째 칸의 하위 메뉴가 왼쪽으로 밀려 앞 칸 위에 포개졌다.
   폭을 자기 칸에 맞추도록 고친 지금은 마지막 한 칸이면 충분하다. */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
  }
}

/* ═════════ 주요 진료과목 여섯 장 ═════════
   **사진 위 · 글 아래** 매거진 배치다(실장님 지시).

   앞서는 사진 위에 흰 글씨를 얹고 아래를 어둡게 덮었다. 그 방식은
   ①사진의 절반이 덮개에 묻히고 ②사진마다 밝기가 달라 대비를 매번 다시
   재야 하고 ③여섯 장의 인상이 제각각이 된다.
   사진과 글을 위아래로 나누면 사진은 사진대로 온전히 보이고, 글은 흰
   바탕 위 진한 글씨라 대비 걱정이 없다. 가로로 긴 사진이라 줄지어 놓으면
   잡지 지면처럼 읽힌다.

   왜 여섯 장인가 — 짝수여야 어느 폭에서도 마지막 줄이 꽉 찬다.
     1024px↑ 3×2  ·  640~1023px 2×3  ·  그 아래 1×6 */
.lg-dcards {
  display: grid;
  gap: var(--wp--preset--spacing--40);
  grid-template-columns: 1fr;
  margin-top: var(--wp--preset--spacing--30);
}
@media (min-width: 640px)  { .lg-dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg-dcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lg-dcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--line);
  text-decoration: none;
  box-shadow: 0 6px 20px rgb(15 28 28 / .07);
  transition:
    translate var(--lg-dur) var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease);
}
/* 사진 칸 — 원본이 가로로 길어(약 2.7:1) 그 비율을 그대로 쓴다.
   높이를 고정하지 않아야 여섯 장의 사진 높이가 저절로 같아진다. */
.lg-dcard__pic {
  display: block;
  aspect-ratio: 21 / 9;
  max-width: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--surface);
  transition: scale .5s var(--lg-ease);
}
.lg-dcard__body {
  display: block;
  padding: var(--wp--preset--spacing--40);
}
@media (hover: hover) {
  .lg-dcard:hover { translate: 0 -3px; box-shadow: 0 14px 30px rgb(15 28 28 / .13); }
  /* 사진만 아주 조금 당긴다. 칸이 `overflow: hidden` 이라 넘치지 않는다. */
  .lg-dcard:hover .lg-dcard__pic { scale: 1.04; }
}
/* 아직 문안이 없어 링크가 아닌 카드 — 손 모양 커서가 뜨면 안 된다. */
.lg-dcard--soon { cursor: default; }

/* 제목이 민트, 대표 항목이 먹색 — 두 색을 맞바꿨다(실장님 지시).
   제목 쪽에 색이 있으면 여섯 장을 훑을 때 이름이 먼저 잡히고,
   대표 항목은 읽어야 할 글에 가까워 먹색이 편하다. */
.lg-dcard__name {
  display: block;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--lg-ink-primary);
}
.lg-dcard__sub {
  display: block;
  margin-top: .35em;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--text);
}
.lg-dcard__desc {
  display: block;
  margin-top: .7em;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  line-height: 1.65;
  color: var(--wp--preset--color--text-soft);
}

/* ★본문 링크 색이 카드 제목을 먹는다★
   `.entry-content a:not(.wp-element-button)` 는 클래스 둘 + 요소 하나라
   `.lg-dcard` 하나짜리로는 못 이긴다. 카드 안의 글자색은 여기서 다시
   못박아야 한다. 같은 함정을 대메뉴에서도 겪었다. */
.entry-content a.lg-dcard,
.entry-content a.lg-dcard:hover { color: var(--wp--preset--color--text); }
.entry-content a.lg-dcard .lg-dcard__name { color: var(--lg-ink-primary); }

/* ═════════ 게시판을 둘씩 놓을 때 ═════════
   넷을 한 줄에 늘어놓으면 한 칸이 300px 남짓이라 제목이 접힌다.
   `[lg_boards only="…"]` 로 둘씩 나눠 놓고, 두 칸 배치를 여기서 못박는다. */
@media (min-width: 700px) {
  .lg-boards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg-boards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ★워드프레스 코어가 하위 메뉴에 `min-width: 200px` 을 건다★
   `.has-child:not(.open-on-click):hover > …` 라 클래스 넷짜리고, 코어 CSS 는
   테마보다 **나중에** 실린다. 우리 규칙이 세 개짜리라 졌고, 그래서 폭을
   칸에 맞춰 놓아도 200px 로 되돌아가 옆 칸을 침범했다.
   클래스를 다섯 개로 올려 되찾는다(같은 이름을 두 번 쓰는 흔한 수법). */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    width: 100%;
    min-width: 0;
    max-width: none;
    /* 코어가 `left: -1px` 로 1px 왼쪽으로 당겨 둔다(테두리 두께를 겹치려고).
       테두리를 쓰지 않는 우리 방식에서는 그 1px 이 글자 어긋남으로 보인다. */
    left: 0;
  }
}

/* ═════════ 넓은 화면에서는 대메뉴 칸을 넓힌다 ═════════
   하위 메뉴 폭을 대메뉴 칸에 맞춘 뒤로, 칸이 좁으면 「라식·라섹」처럼
   짧은 항목까지 두 줄로 접혔다. 로고와 메뉴 사이에 빈자리가 많으니
   넓은 화면에서만 칸을 넓혀 준다 — 그러면 대부분 한 줄에 들어간다.
   좁은 화면은 건드리지 않는다(거기서는 두 줄로 접히는 게 정상이다). */
@media (min-width: 1280px) {
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a { padding-inline: 1.05em; }
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after { left: 1.05em; right: 1.05em; }
}
/* ★1,600px 단계는 없앴다★
   넓어질 때마다 메뉴 여백이 또 한 번 바뀌면, 창을 키우는 동안 대메뉴와
   하위 메뉴가 제자리에서 조금씩 움직인다. 머리말은 1,400px 에서 이미
   멈추므로 그 위에서는 **아무것도 달라지지 않아야** 한다. */
/* 하위 메뉴는 칸을 꽉 쓰게 — 좌우 여백을 남기면 그만큼 글자가 더 접힌다. */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation__submenu-container { padding-inline: 0; }
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a { padding-inline: .25em; }
}

/* ═════════ 안쪽 페이지 배너도 「밝은 사진 + 진한 글씨」로 ═════════
   첫 화면에서 배운 것을 안쪽에도 적용한다.

   흰 글씨를 읽히게 하려면 사진을 어둡게 덮어야 하고, 안 덮으면 대비가
   무너진다 — 둘 다 가질 수는 없다. 그래서 첫 화면에서 **흰 글씨를 포기**하고
   「살짝 희게 + 옅은 민트」 덮개에 진한 글씨로 갔다. 안쪽 배너만 어두운 채로
   남겨 두면, 홈은 밝은데 한 번 눌러 들어간 순간 어두워진다.
   「안과의 생명은 밝은 세상」이라는 기준에 안쪽도 같이 맞춘다.

   사진 채도는 손대지 않는다(`saturate(1)`). 낮추면 그것부터 칙칙해진다. */
.lg-banner:not(.lg-hero--cover)::before {
  filter: none;
}
.lg-banner:not(.lg-hero--cover)::after {
  background:
    /* ① 왼쪽을 하얗게 — 색을 입히는 게 아니라 밝게 하는 것이라 진하게 가도 된다 */
    linear-gradient(90deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .95) 38%,
      rgba(255, 255, 255, .74) 56%,
      rgba(255, 255, 255, .24) 76%,
      rgba(255, 255, 255, 0) 90%),
    /* ② 그 위에 옅은 민트 한 겹. 병원 색은 남기되 사진에 닿기 전에 끝낸다 */
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent) 38%,
      transparent 70%);
}
.lg-banner:not(.lg-hero--cover) .lg-banner__eyebrow { color: var(--lg-ink-primary); opacity: 1; }
.lg-banner:not(.lg-hero--cover) .lg-banner__title   { color: var(--wp--preset--color--text); }

/* 좁은 화면은 사진에 인물이 가득 차 글을 얹을 빈자리가 없다.
   위에서 아래로 밝게 덮고 글은 아래쪽에 앉힌다. */
@media (max-width: 860px) {
  .lg-banner:not(.lg-hero--cover)::after {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, .62) 0%,
        rgba(255, 255, 255, .88) 44%,
        rgba(255, 255, 255, .98) 100%),
      color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
  }
  /* 좁은 화면에서는 작은 글씨(대메뉴 이름)를 민트로 두지 않는다.
     글자가 작을수록 대비가 더 있어야 읽힌다 — 실측 3.29:1 이 나왔다. */
  .lg-banner:not(.lg-hero--cover) .lg-banner__eyebrow {
    /* 보조 글자색(#566663)으로도 4.21:1 이라 기준(4.5) 아래였다.
       작은 글씨라 더 진해야 한다 — 본문 글자색으로 올린다. */
    color: var(--wp--preset--color--text);
    opacity: 1;
  }
}

/* ═════════ 배너 제목 아래 두 줄 — 왼쪽에 세로줄 ═════════
   제목과 설명을 세로줄 하나로 묶으면 둘이 한 덩어리로 읽힌다.
   광주안과가 쓰는 모양이고, 실장님이 짚어 주신 배치다. */
.lg-banner__lead {
  position: relative;
  overflow: hidden;      /* 글이 세로줄 뒤에서 밀려 나오게 하려면 잘라야 한다 */
  margin: 1.1em 0 0;
  padding-left: .85em;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.65;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--text);
  max-width: 30em;
}

/* ═════════ 진료상담 배너 — 덮개 없음 규칙은 폐기 (2026-09-14) ═════════
   3권에서 「그라데이션 넣지 말고 그 이미지 그대로에 글씨만」 지시로 덮개를 뺐고,
   그때는 왼쪽이 흰 벽인 줄 알고 8.97:1 로 재서 통과시켰다. 다시 재니 사진 왼쪽이
   푸른 회색 책상·가운이라 제목 1.9:1 · 설명 1.1:1 이었다.
   → 실장님이 비교 화면을 보시고 **55% 짜리 짧은 덮개**로 결정. 파일 맨 아래
   `--lg-veil-end: 55%` 한 줄이 그 일을 한다. 여기서는 규칙을 지운다.

   ★교훈: 「이 사진은 왼쪽이 밝으니 덮개가 필요 없다」는 판단은 사진이 바뀌면
   무너진다. 자리마다 덮개를 끄지 말고 끝점만 조절할 것. */
/* ★안쪽 배너의 기본 글자색 규칙이 이 규칙을 이긴다★
   `.lg-banner:not(.lg-hero--cover) .lg-banner__title` 은 클래스 셋인데
   `.lg-banner--slot-consult .lg-banner__title` 은 둘이라, 제목이 먹색으로
   남고 세로줄만 민트였다. 같은 꼴로 맞춰 되찾는다. */
.lg-banner:not(.lg-hero--cover).lg-banner--slot-consult .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-cataract .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-child .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-lens .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-vision .lg-banner__title {
  color: var(--lg-ink-primary);
  /* 얇은 제목은 사진 위에서 흐릿해 보인다. 「메뉴 글씨도 흐릿하다」는 지적을
     받은 것과 같은 이유다 — 사진 위 글자는 굵어야 또렷하게 읽힌다. */
  font-weight: 700;
  letter-spacing: -.035em;
}

/* ═════════ 안쪽 배너 글자 그림자 걷어내기 ═════════
   흰 글씨를 쓰던 시절에 넣은 검은 그림자가 남아 있었다.
   글씨를 진한 색으로 바꾼 지금은 **같은 색 위에 같은 색이 번지는 꼴**이라
   글자가 뭉개져 보인다. 첫 화면에서 한 번 겪고 고친 것과 같은 함정이다.
   흰 글씨가 그대로인 첫 화면(`.lg-hero--cover`)은 건드리지 않는다. */
.lg-banner:not(.lg-hero--cover) .lg-banner__title,
.lg-banner:not(.lg-hero--cover) .lg-banner__eyebrow,
.lg-banner:not(.lg-hero--cover) .lg-banner__lead {
  text-shadow: none;
}

/* ═════════ 안쪽 배너의 글은 아래쪽에 앉힌다 ═════════
   가운데 정렬이던 것을 아래로 내린다(실장님 지시, 광주안과 참조).

   가운데에 두면 사진의 한가운데를 글이 가로지른다. 아래쪽에 앉히면
   ①사진에서 보여 주려는 부분(대개 위쪽)이 살고 ②바로 밑에 붙는 서브 띠와
   이어져 「제목 → 설명 → 하위 메뉴」가 한 덩어리로 읽힌다.
   첫 화면(`.lg-hero--cover`)은 글 자리를 따로 잡아 두었으므로 건드리지 않는다. */
.lg-banner:not(.lg-hero--cover) {
  align-items: end;
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
}

/* ═════════ 아주 넓은 화면(4K 등)에서 가운데를 지킨다 ═════════

   ① 머리말 — 로고와 메뉴가 화면 양 끝으로 날아가던 문제
   블록 테마의 「constrained」 배치가 머리말 안쪽 칸에 걸리지 않아, 3840px
   에서 로고가 x=24, 메뉴가 x=3816 까지 벌어졌다. 본문은 1,400px 로 묶여
   가운데 있는데 머리말만 끝까지 퍼지니 화면이 따로 논다.
   여기서 한 번 더 못박는다. */
.lg-header > .wp-block-group {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

/* ② 첫 화면 사진 — 넓어질수록 사람이 오른쪽 끝으로 밀려나던 문제
   `cover` 는 칸이 넓어지면 사진을 그만큼 키운다. 4K 에서는 인물이 화면
   오른쪽 끝에 거대하게 붙고 왼쪽은 벽만 남는다.
   그래서 **사진이 놓이는 폭을 묶고**, 남는 자리는 사진 속 벽과 같은
   민트색으로 채운다. 오른쪽 이음매는 120px 에 걸쳐 서서히 사라지게 해서
   자른 자국이 보이지 않게 한다. */
@media (min-width: 1600px) {
  .lg-hero--cover {
    /* 사진 속 벽에서 뽑은 색(실측 RGB 230,242,240) */
    background-color: #E6F2F0;
  }
  .lg-hero--cover::before {
    inset: 0 auto 0 50%;
    width: min(100%, 1600px);
    translate: -50% 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0 92%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0 92%, transparent 100%);
  }
}

/* 안쪽 배너도 같은 이유로 묶는다. 여기는 사진 양쪽이 다 잘리는 자리라
   남는 폭은 면 색으로 채운다. */
@media (min-width: 1600px) {
  .lg-banner:not(.lg-hero--cover) { background-color: var(--wp--preset--color--surface); }
  .lg-banner:not(.lg-hero--cover)::before {
    inset: 0 auto 0 50%;
    width: min(100%, 1600px);
    translate: -50% 0;
    /* 양쪽 이음매를 60px 에 걸쳐 지운다. 안 하면 사진을 자른 자국이
       세로줄로 보인다 — 4K 에서 특히 눈에 띈다. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  .lg-banner:not(.lg-hero--cover)::after {
    inset: 0 auto 0 50%;
    width: min(100%, 1600px);
    translate: -50% 0;
  }
}

/* ═════════ 배너 높이 — 좁은 화면만 줄인다 ═════════
   위에서 높이를 못박았으니, 작은 화면에서 배너가 화면을 다 잡아먹지 않게
   여기서만 낮춘다. 폭이 늘어날 때 커지는 규칙은 두지 않는다. */
@media (max-width: 860px) {
  .lg-banner { min-height: 190px; }
  .lg-banner--high { min-height: 260px; }
  .lg-hero--cover { min-height: 0; }
}

/* ═════════ 사진이 늘어나는 상한을 1,600px 로 ═════════
   앞서 1,700px 부터 묶었는데, 실장님 지적대로 **기본값에서 조금이라도
   늘어나는 구간**이 남아 있으면 창을 키울 때 사진이 커지는 게 보인다.
   1,600px 에서 멈추고, 그 바깥은 벽 색으로 채운다. */
@media (min-width: 1600px) {
  .lg-hero--cover::before,
  .lg-banner:not(.lg-hero--cover)::before,
  .lg-banner:not(.lg-hero--cover)::after {
    width: min(100%, 1600px);
  }
}

/* ═════════ 대메뉴와 하위 메뉴의 글자 시작점을 맞춘다 ═════════
   하위 메뉴가 대메뉴보다 한 글자쯤 왼쪽으로 나와 있었다(실장님 지적).
   대메뉴 항목은 좌우 여백이 1.05em 인데 하위 메뉴 항목은 .25em 이라,
   그 차이(약 13px)만큼 어긋나 보인 것이다.

   여백 값을 **변수 하나로 모아** 두 곳이 같은 값을 쓰게 한다.
   앞으로 여백을 고칠 때도 한 곳만 고치면 된다. */
/* 값은 **px 로 둔다.** `em` 으로 두면 대메뉴(15px)와 하위 메뉴(14px)의
   글자 크기가 달라 같은 1.45em 도 1.5px 쯤 어긋난다. */
@media (min-width: 900px) { .lg-nav { --lg-nav-pad: 8px; } }
@media (min-width: 900px) and (max-width: 1365px) { .lg-nav { --lg-nav-pad: 5px; } }
@media (min-width: 900px) and (max-width: 1100px) { .lg-nav { --lg-nav-pad: 3px; } }
@media (min-width: 1280px) { .lg-nav { --lg-nav-pad: 16px; } }

/* 칸을 한 뼘 더 넓힌다. 시작점을 맞추면 하위 메뉴의 글자 자리가 그만큼
   줄어 「백내장 수술」 같은 항목이 두 줄로 접히기 때문이다.
   1,400px 칸에 로고(176) + 메뉴가 들어가고도 자리가 남는다. */
@media (min-width: 1400px) {
  .lg-nav { --lg-nav-pad: 22px; }
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a { padding-inline: var(--lg-nav-pad); }
  .lg-nav .wp-block-navigation__container > .wp-block-navigation-item > a::after {
    left: var(--lg-nav-pad); right: var(--lg-nav-pad);
  }
}

@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation .wp-block-navigation__submenu-container > li > a {
    padding-left: var(--lg-nav-pad, .25em);
    padding-right: .2em;
  }
}

/* ═════════ 안쪽 배너가 펼쳐지는 모양 ═════════
   광주안과(clickeye.co.kr)가 쓰는 방식을 뜯어 보고 같은 뼈대로 짰다.
   네 가지가 차례로 겹친다.

     ① 사진   — 살짝 확대된 상태에서 제자리로 줄며 떠오른다 (1.6초)
     ② 제목   — 글자 하나씩 아래에서 올라온다 (0.06초씩 시차)
     ③ 세로줄 — 위에서 아래로 그어진다 (0.5초, 0.2초 뒤)
     ④ 작은 글 — 그 줄 **뒤에서** 오른쪽으로 밀려 나온다 (1.2초, 0.55초 뒤)

   ④가 이 효과의 핵심이다. 글이 그냥 나타나는 게 아니라 세로줄에 가려 있다가
   풀려 나오기 때문에 「펼쳐진다」로 읽힌다. 그래서 바깥 상자를
   `overflow: hidden` 으로 잘라 둔다.

   **쉬는 상태는 「다 보이는 상태」다.** 애니메이션은 「움직임 줄이기」를
   켜지 않은 분에게만 건다. 그래야 효과가 안 돌아도 글이 사라지지 않는다. */
.lg-banner__char { font-style: normal; display: inline-block; }
.lg-banner__lead::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 100%;
  background: var(--lg-ink-primary);
  transform-origin: left top;
}

@media (prefers-reduced-motion: no-preference) {
  .lg-banner:not(.lg-hero--cover)::before {
    /* ★사진이 「천천히」 나타나게 — 광주안과 RGP 페이지 방식★
       저쪽은 검은 덮개가 2초 동안 100%→50% 로 옅어지며 사진이 드러난다.
       우리는 밝은 바탕이라 반대로 — 바탕색(surface) 위로 사진이 2초 동안
       서서히 떠오른다. 검은 덮개를 쓰면 화면이 다시 어두워진다.

       ★이징 함정 네 번째★ — 전에 쓰던 cubic-bezier(.19,1,.22,1) 은
       0.4초 안에 85% 가 끝나 1.6초를 줘도 「툭」 나타났다. 앞뒤가 고른
       곡선으로 바꿔야 2초 내내 드러나는 것이 보인다. */
    animation: lg-sv-photo 2s cubic-bezier(.3, .3, .3, 1) both;
  }
  .lg-banner:not(.lg-hero--cover) .lg-banner__char {
    /* 0.7초는 「툭」 올라온다. 1.1초에 부드러운 곡선을 쓰면 천천히 떠오른다.
       글자 사이 시차도 0.06 → 0.09초로 늘렸다(PHP `chars()`). */
    animation: lg-sv-up 1.1s cubic-bezier(.19, 1, .22, 1) both;
  }
  .lg-banner:not(.lg-hero--cover) .lg-banner__eyebrow {
    animation: lg-sv-up 1.2s cubic-bezier(.19, 1, .22, 1) both;
  }
  .lg-banner:not(.lg-hero--cover) .lg-banner__lead::before {
    /* 세로줄도 조금 천천히. 글이 그 뒤에서 나오므로 줄이 먼저 다 그어져
       있어야 한다 — 줄보다 글이 앞서면 가려지는 느낌이 사라진다. */
    /* 줄도 천천히 내려온다. 시작을 앞당겨(0.15초) 글보다 먼저 그어지기
       시작하고, 내려오는 동안은 글과 나란히 움직인다.
       이징은 여기서도 앞뒤가 고른 곡선 — 앞이 빠른 곡선은 「그어졌다」로
       보이고 「내려온다」로는 안 보인다. */
    animation: lg-sv-line 1.1s cubic-bezier(.25, .4, .35, 1) .15s both;
  }
  .lg-banner:not(.lg-hero--cover) .lg-banner__lead-in {
    display: block;
    /* 1.2초는 제목을 읽기도 전에 다 나와 버린다. 제목이 올라오는 것을
       보고 난 뒤 천천히 풀려 나오도록 시작을 늦추고 시간을 늘렸다. */
    /* ★이징을 `ease` 로 바꿨다★
       `cubic-bezier(.19,1,.22,1)` 은 앞이 극단적으로 빨라, 2초를 줘도
       실제 움직임은 0.6초 안에 끝나고 나머지는 눈에 안 보이는 꼬리였다.
       밑줄·메뉴 띠에 이어 **세 번째로 같은 함정**이다. 시간을 늘리기 전에
       이징부터 볼 것. */
    /* 시작은 빠르게(0.55초), 나오는 동안은 느리게.
       이징은 앞뒤가 고른 곡선을 쓴다 — 마스크 뒤에서 밀려 나오는 글은
       속도가 고를수록 「한 글자씩 나온다」로 읽힌다. `ease` 조차 앞이
       빨라서 앞쪽 글자가 한꺼번에 튀어나왔다. */
    animation: lg-sv-slide 2s cubic-bezier(.25, .4, .35, 1) .4s both;
  }
}

@keyframes lg-sv-photo { from { opacity: 0; scale: 1.05; } to { opacity: 1; scale: 1; } }
@keyframes lg-sv-up    { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes lg-sv-line  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lg-sv-slide { from { translate: -100% 0; } to { translate: 0 0; } }



/* ═════════ 서브 배너 제목 — 자리별로 민트·굵게 (4권) ═════════
   진료상담에서 시작한 규칙을 사진·문구가 들어온 자리 전부에 같이 건다.
   ★반드시 `:not(.lg-hero--cover)` 를 붙인 같은 꼴로★ — 따로 쓰면 안쪽 배너
   기본 규칙(클래스 셋)에 특이도로 진다. 이 함정에 네 번 걸렸다.
   general·guide(A벌 사진, 문구 없음)는 먹색 그대로 둔다. */
.lg-banner:not(.lg-hero--cover).lg-banner--slot-consult  .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-about    .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-vision   .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-lens     .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-cataract .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-child    .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-plasty   .lg-banner__title,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-common   .lg-banner__title {
  color: var(--lg-ink-primary);
  font-weight: 700;
  letter-spacing: -.035em;
}

/* ═════════ 덮개 끝점을 자리마다 다르게 (4권) ═════════
   실장님: 「그라데이션이 너무 오른쪽까지 되어 있어 인물 일부가 흐리다.」
   한 값으로는 안 된다는 것이 실측으로 나왔다 — 중앙(50%)에서 끊으면
   라식·라섹만 설명 대비 1.68:1 로 무너진다(설명 두 줄이 폭 52% 까지 뻗는데
   그 자리에 장비 몸체가 있다). 반대로 왼쪽이 빈 사진(렌즈·쌍꺼풀·병원소개)은
   55% 에서도 10:1 이 넘는다.

   끝점만 변수로 두고 **중간 마디는 비례로 따라간다**(.42/.62/.84).
   마디를 따로 적으면 자리 하나 더할 때마다 네 군데를 고쳐야 한다.
   측정표(라식·라섹 설명) — 50%:1.68 / 60%:3.29 / 65%:4.94 / 70%:6.40 / 90%(옛값):10.99 */
.lg-banner:not(.lg-hero--cover) { --lg-veil-end: 65%; }
.lg-banner:not(.lg-hero--cover).lg-banner--slot-about,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-lens,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-plasty   { --lg-veil-end: 55%; }
.lg-banner:not(.lg-hero--cover).lg-banner--slot-cataract,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-child,
.lg-banner:not(.lg-hero--cover).lg-banner--slot-common   { --lg-veil-end: 62%; }
.lg-banner:not(.lg-hero--cover).lg-banner--slot-vision   { --lg-veil-end: 72%; }

.lg-banner:not(.lg-hero--cover)::after {
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, .97) 0%,
      rgba(255, 255, 255, .95) calc(var(--lg-veil-end) * .42),
      rgba(255, 255, 255, .74) calc(var(--lg-veil-end) * .62),
      rgba(255, 255, 255, .24) calc(var(--lg-veil-end) * .84),
      rgba(255, 255, 255, 0)   var(--lg-veil-end)),
    linear-gradient(90deg,
      color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent) 0%,
      color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent) calc(var(--lg-veil-end) * .42),
      transparent calc(var(--lg-veil-end) * .78));
}
/* ★좁은 화면 덮개는 반드시 이 뒤에★ — 가로 덮개 규칙을 파일 끝에 붙일 때마다
   860px 세로 덮개를 덮어 버려 768·390px 대비가 1.0:1 까지 떨어졌다(세 번째). */
@media (max-width: 860px) {
  .lg-banner:not(.lg-hero--cover)::after {
    background:
      linear-gradient(180deg,
        rgba(255, 255, 255, .62) 0%,
        rgba(255, 255, 255, .88) 44%,
        rgba(255, 255, 255, .98) 100%),
      color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
  }
}
/* ★진료상담 — 55% 짜리 짧은 덮개 (2026-09-14, 실장님 결정)★
   3권에서 「그냥 그 이미지 그대로에 글씨만」 지시로 덮개를 뺐는데, 이 사진은 왼쪽이
   흰 벽이 아니라 푸른 회색 책상·가운이라 실측 제목 1.9:1 · 설명 1.1:1 로 글씨가 묻혔다.
   비교 화면을 보시고 **짧은 덮개를 넣기로 결정**. 끝점을 55% 로 두어 오른쪽의
   의사·클립보드에는 닿지 않는다(다른 자리와 같은 `--lg-veil-end` 방식).

   (기록) 옛 규칙 `.lg-banner--slot-consult::after`(클래스 1)는 `--lg-veil-end`
   규칙(`:not()` 안까지 세어 클래스 2)에 져서 한동안 조용히 덮여 있었다 —
   특이도 함정 다섯 번째. 자리별 규칙은 선택자 모양을 똑같이 맞출 것. */
.lg-banner:not(.lg-hero--cover).lg-banner--slot-consult { --lg-veil-end: 55%; }

/* ═════════ 기본 레이아웃 격자 — 생성기 기본값 (4권) ═════════
   실장님: 「기본적인 이런 사항은 홈페이지 자동생성에서 기본으로 설정되어
   있어야 합니다.」 사이트마다 손으로 CSS 를 고쳐 넣는 일이 생기면 그건
   기본값이 빠져 있다는 뜻이다. 패치 CSS 로 넘기지 않는다.

   한 값(--lg-grid)이 본문 칸 · 그 안 블록 · 서브 배너 글 칸 · 푸터 네 자리를
   함께 움직인다. --lg-measure 는 글줄 폭(none = 제한 없음 / 880px = 읽기 폭).
   관리 화면 「본문 폭」·「글줄 폭」이 body 의 이 두 값을 바꾼다.

   ★변수 정의 자리 함정★ — `--wp--style--global--wide-size` 는 :root 가 아니라
   **body 에** 정의돼 있다. :root 에서 참조하면 값이 무효가 되어 전 쪽이
   무너진다. body 에 쓰고 폴백(1400px)도 함께 둔다. */
body { --lg-grid: var(--wp--style--global--wide-size, 1400px); --lg-measure: none; }

@media (min-width: 861px) {
  /* ① 본문 칸 — 첫 화면(홈)은 이미 1400 이라 안쪽 페이지만 달라진다 */
  main.is-layout-constrained > .entry-content { max-width: var(--lg-grid); }
  /* ② 본문 안 블록 — 코어의 :where 규칙이 content-size(880)로 묶어 둔 것을 격자 폭으로 */
  .entry-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--lg-measure, none); }
  .entry-content.is-layout-constrained > :where(.alignwide, .lg-cards, .lg-boards, .lg-dcards, .lg-gcards, .lg-access, .wp-block-group, .wp-block-columns, .lg-table-wrap) { max-width: var(--lg-grid); }
  /* ③ 서브 배너 글 칸 — 원래 규칙이 width(content-size) 라 max-width 로는 못 덮는다 */
  .lg-banner:not(.lg-hero--cover):not(.lg-hero--cover-bar) .lg-banner__inner { width: min(100%, var(--lg-grid)); }
  /* ④ 푸터 한 줄 */
  footer.is-layout-constrained > .lg-footer-info { max-width: var(--lg-grid); }
}

/* 병원소개 한 페이지형 — 진료과목 링크 목록 */
.lg-modlist { columns: 2; column-gap: 2rem; padding-left: 1.2em; }
@media (min-width: 861px) { .lg-modlist { columns: 3; } }

/* ═════════ 하위 메뉴 두 줄 접힘 고침 (2026-09-14, 실장님 지시) ═════════

   그동안은 하위 메뉴 폭을 대메뉴 칸 폭에 **딱 맞춰** 두고, 넘치는 항목은
   두 줄로 접었다. 옆 칸 하위 메뉴와 겹치지 않게 하려던 것이다
   (예전에 11em 고정폭·max-content 로 했다가 ~90px 씩 겹친 이력이 있다).

   실측해 보니 사정이 달랐다(1,280px 기준) —
     · 칸 사이 간격이 **어느 칸이든 정확히 24px** 로 비어 있다.
     · 하위 항목 글자 양옆에 **15px 씩, 합쳐서 30px** 의 여백이 붙어 있었다.
       필요 폭의 4분의 1이 글자가 아니라 여백이었던 셈이다.

   그래서 두 가지만 바꾼다 —
     ① 하위 메뉴가 제 내용만큼 넓어지되(max-content), **칸 폭 + 22px** 까지만.
        24px 간격에서 2px 를 남겨 두므로 옆 칸을 절대 침범하지 않는다.
     ② 좌우 여백 15px → 10px. 글자는 그대로인데 필요 폭이 10px 줄어든다.

   실측 결과 — 두 줄로 접히던 항목이
     1,920px: 6개 → **0개**
     1,280px: 10개 → **1개**(「시력교정술 선택」만 남음)
   겹침은 두 폭 모두 **0px**.

   ★남은 한 개는 CSS 로 더 밀어붙이지 않는다★ — 여백을 8px 까지 줄여도
   그 항목은 여전히 접혔다(폭이 모자란 게 아니라 이름이 긴 것이다).
   글자를 더 조이면 나머지 항목들이 답답해 보인다. 이름을 줄이는 편이 맞다. */
@media (min-width: 1024px) {
  .lg-nav .wp-block-navigation .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    width: max-content;
    min-width: 100%;
    max-width: calc(100% + 22px);
  }
  /* ★여백만은 `!important` 를 쓴다★ — 코어가 하위 메뉴 링크에 `padding: .5em 1em`
     (=15px) 을 건다. 클래스 3개로도, 위 폭 규칙과 같은 5개로도 졌다. 실측으로
     확인한 것 — 규칙이 파일에도 있고 브라우저가 읽기까지 했는데 계산값은 15px 그대로였고,
     CSSOM 을 뒤져도 이기고 있는 코어 규칙이 잡히지 않았다(코어가 어디에 숨겨 뒀는지
     끝내 못 찾음). 특이도 싸움을 더 하느니 이 한 줄만 못을 박는다 —
     하위 메뉴 링크의 좌우 여백 하나뿐이라 부작용이 없다. */
  .lg-nav .wp-block-navigation .wp-block-navigation-item.has-child
    > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container > li > a {
    padding-inline: 10px !important;
  }
}

/* ═════════ 머리말 바로 아래 24px 흰 줄 없애기 (2026-09-14, 실장님 지적) ═════════

   「메뉴하고 로고가 메인 이미지 위 하얀 여백 중앙에 위치하지 않습니다. 약간 올라가 있어요」

   실측(1,440px) — 머리말 자체는 위아래 16px 로 **정확히 가운데**였다. 그런데
   흰 띠 전체는 102.8px 인데 로고·메뉴의 중심이 39.4px 에 있었다. 진짜 가운데인
   51.4px 보다 **12px 위**. 머리말(78.8px) 아래에 24px 빈칸이 하나 더 붙어 있어서
   흰 띠만 24px 길어졌고, 그 절반인 12px 만큼 위로 치우쳐 보였던 것이다.

   그 24px 의 정체는 워드프레스 기본 블록 간격(`--wp--style--block-gap`)이다.
   최상위 블록 사이에 자동으로 들어가는 여백인데, **화면 가득 차는 사진 배너에는
   있을 이유가 없다** — 머리말에 딱 붙는 것이 원래 의도한 모양이다.

   지우면 흰 띠 = 머리말이 되어 로고·메뉴가 저절로 한가운데에 온다(실측 어긋남 0px).
   홈의 첫 화면과 안쪽 페이지 배너가 같은 문제였으므로 둘 다 걸리게 `.lg-banner` 로 쓴다.
   코어 규칙이 `:where()` 라 특이도가 0 이어서 `!important` 없이 이긴다(실측 확인). */
.wp-site-blocks > .lg-banner { margin-block-start: 0; }

/* ═════════ 머리말이 따라오지 않던 것 고침 (2026-09-15) ═════════
   실장님: 「스크롤 내리면 서브메뉴 띠만 멈춰 있고 로고·메뉴는 올라가 버린다」.

   원인 — `.lg-header` 에 sticky 를 걸어 두었지만, 블록 테마가 이 그룹을
   `<header class="wp-block-template-part">` 로 한 번 더 감싼다. 그 감싸개의
   높이가 머리말과 똑같아서 sticky 가 붙어 있을 자리가 없었다(sticky 는 부모
   안에서만 붙는다). 그래서 머리말은 그냥 올라가고, 형제인 `.lg-subbar` 만
   `top:75px` 자리에 남아 위에 빈 띠 75px 을 달고 떠 있었다.

   고침 — sticky 를 **감싸개**에 건다. 안쪽 `.lg-header` 는 relative 로 남겨
   메가 메뉴 흰 띠(::after) 의 기준을 그대로 유지한다.

   높이 — 머리말 높이를 변수 하나로 못박는다. 전에는 로고 크기에 따라
   높이가 달라져(마포안과 79px) 서브 띠의 top 값(75px)과 어긋났다. 병원마다
   로고 비율이 다르니 값을 재서 맞추는 방식은 다음 병원에서 또 깨진다.
   높이를 고정하고 로고·메뉴를 그 안에서 가운데 정렬하면 어떤 로고든 같다.
   서브 띠는 같은 변수를 top 으로 써서 어긋날 수가 없다.

   스크롤하면 얇아지는 효과(lg-shrink)는 뺀다 — 머리말이 얇아지면 서브 띠
   top 과 다시 어긋난다. 그림자만 남긴다(높이 변화 없음).
   자바스크립트 0줄 — 서버·브라우저 부하 없음(실장님 당부). */
:root { --lg-header-h: 80px; }
@media (max-width: 781px) { :root { --lg-header-h: 68px; } }

.wp-site-blocks > header.wp-block-template-part:has(> .lg-header) {
  position: sticky; top: 0; z-index: 50;
}
.lg-header {
  position: relative;
  height: var(--lg-header-h);
  padding-block: 0 !important;
  display: grid; align-content: center;
  animation: none !important;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wp-site-blocks > header.wp-block-template-part:has(> .lg-header) {
      animation: lg-shadow linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
    @keyframes lg-shadow { to { box-shadow: 0 2px 12px rgb(0 0 0 / .06); } }
  }
}
.lg-subbar { top: var(--lg-header-h); }
@media (max-width: 781px) { .lg-subbar { top: var(--lg-header-h); } }