/* main.css — 메인 페이지 전용 (hero·모달·섹션·VOD·콘텐츠·반응형). 시안 원문 보존 */

/* QA(260807 5차 정정) — 하단 .hero::after 그라데이션(82px)이 뷰포트 안에서 이미 다음 섹션
   배경색으로 페이드되기 시작해, 100svh를 줘도 실제로는 그라데이션만큼 덜 차 보였다(클라
   피드백). 그라데이션 높이만큼 더해 순수 배경 영역이 100svh를 다 채우도록 보정. */
.hero {
  position: relative;
  min-height: calc(100svh + 82px);
  overflow: hidden;
  padding: 96px 0 96px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(3, 20, 38, 0.96) 0%, rgba(3, 20, 38, 0.84) 38%, rgba(3, 20, 38, 0.38) 72%, rgba(3, 20, 38, 0.12) 100%),
    linear-gradient(160deg, rgba(0, 117, 163, 0.28) 0%, rgba(0, 87, 184, 0.2) 44%, rgba(9, 38, 66, 0.42) 100%),
    url("/img/layout/busan-gwangandaegyo-hero.png") center right / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 82px;
  background: linear-gradient(180deg, rgba(247, 251, 253, 0), var(--bg));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: 68px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  color: #bdefff;
  font-size: 14px;
  font-weight: 700;
}

.eyebrow::before {
  content: "";
  width: 42px;
  height: 2px;
  background: currentColor;
}

.hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(52px, 6.4vw, 90px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: break-word;
}

.hero h1 span {
  display: block;
}

.hero-copy {
  max-width: 660px;
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 400;
  overflow-wrap: break-word;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 42px;
}

/* QA(260807 5차) — 클라 요청: 히어로 "수강 신청하기/강의 일정 보기" 버튼·텍스트를 기존의 1.5배
   크기로. font-size 를 base .button 의 암묵적 16px 기준 24px 로 올리고, min-height/padding 도
   커진 글자에 맞춰 비례 확대. base .button(전역 공통 클래스)은 건드리지 않고 이 히어로 전용
   선택자만 확대한다 — 다른 페이지 버튼에 영향 없음. */
.hero-actions .button {
  min-height: 68px;
  padding: 0 34px 2px;
  font-size: 24px;
}

/* QA(260807 5차) — 관리자 인라인 버튼(클래스 수정/+ 새 클래스)은 히어로 공개 버튼(수강
   신청하기/강의 일정 보기)과 같은 줄에 있으면 헷갈린다는 피드백 — 별도 래퍼(.hero-actions-admin)
   에 flex-basis:100% 를 줘서 통째로 다음 줄로 내려보내고, 래퍼 내부는 자체 flex 로 두 버튼을
   나란히 배치한다. .ia-btn 자체(inline-admin.css)는 사이트 전역 공통 클래스라 건드리지 않는다. */
.hero-actions-admin {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.status-panel {
  align-self: end;
  margin-bottom: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.93);
  color: var(--text);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.status-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: url("/img/layout/oceanclass-class-generated.png") center / cover no-repeat;
  transition: filter 220ms ease;
}

.status-panel:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 28px 80px rgba(9, 38, 66, 0.22);
}

.status-panel:hover .status-image {
  filter: saturate(1.08) contrast(1.04);
}

.status-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  color: #fff;
  background: var(--positive);
  font-size: 13px;
  font-weight: 700;
}

.status-body {
  padding: 24px;
}

.status-body h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}

.status-body p {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
}

.status-list {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.status-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.status-list b {
  color: var(--navy);
}

.status-panel .button {
  width: 100%;
  margin-top: 22px;
}

.hero-note {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  max-width: 680px;
  margin-top: 18px;
}

.notify-card,
.poster-link-card {
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(3, 23, 42, 0.42);
  backdrop-filter: blur(10px);
}

.notify-card strong,
.poster-link-card strong {
  display: block;
  margin-bottom: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.notify-card p,
.poster-link-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.56;
}

.notify-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 12px;
}

.notify-form input {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
  outline: none;
}

.notify-form input::placeholder {
  color: rgba(255, 255, 255, 0.56);
}

.notify-form button {
  min-height: 42px;
  color: var(--navy);
  background: #fff;
}

/* QA(260807 5차) — 기본 포스터가 작다는 클라 피드백. 기존 430px/640px → 각각 약 1.3배(560px/820px) */
.poster-panel {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 560px;
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  color: #fff;
  background: #07243f;
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.poster-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 82px rgba(9, 38, 66, 0.28);
}

/* B1(plan 024) — class.poster 는 관리자가 임의 비율로 업로드하므로 고정 aspect-ratio/cover 를
   쓰지 않는다. QA(260807 2차) — 고정 height:380px + object-fit:contain 조합은 실제 포스터가
   세로로 긴 전단지(2000x2778 등)일 때 폭 기준으로 레터박스가 생겨 이미지 양옆에 흰 여백이
   크게 남았다(width:100% 고정 + height 고정 두 축을 동시에 강제한 게 원인). width/height를
   둘 다 auto 로 두고 max-width/max-height 로만 상한을 걸면 원본 비율 그대로 폭을 꽉 채우고,
   극단적으로 긴 이미지에서만 max-height 가 자연스럽게 레터박스(세로 캡)를 건다. */
.poster-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 820px;
  object-fit: contain;
  background: #07243f;
  margin: 0 auto;
}

.poster-overlay {
  position: absolute;
  inset: 24% 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  box-shadow: 0 18px 46px rgba(6, 27, 48, 0.24);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.poster-panel:hover .poster-overlay,
.poster-panel:focus-within .poster-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* 수강 전 페이지: 포스터 이미지 없이 안내 카드만 노출 */
.poster-panel.no-image {
  background: transparent;
  box-shadow: none;
  overflow: visible;
  max-width: 430px;
  width: 100%;
}

.poster-panel.no-image:hover {
  transform: none;
  box-shadow: none;
}

.poster-overlay.shown {
  position: relative;
  inset: auto;
  opacity: 1;
  transform: none;
  padding: 28px;
}

/* QA(260807 5차) — 클라 요청: 히어로에 포스터 이미지만 남기고 정보 오버레이 카드는 숨긴다.
   단, 포스터 파일이 없는 경우(.no-image)는 이 카드가 유일한 안내 수단이므로 그대로 노출
   유지한다(B1 원래 취지 "모바일 안전 유지"는 no-image 케이스에서만 이어감). */
.poster-panel:not(.no-image) .poster-overlay.shown {
  display: none;
}

/* QA(260807 3차) — 위 B1 여백(16px)은 포스터가 레터박스로 폭을 다 못 채우던 시절엔 눈에 안
   띄었지만, 이미지가 폭을 꽉 채우도록 고친 뒤에는 이미지 각진 아래 모서리와 만나는 네이비
   여백이 "잘린 것처럼" 도드라져 보였다(클라 260807 3차 피드백). 여백을 없애고, 이미지 바로
   아래 붙는 정보카드의 위쪽 모서리도 이미지의 각진 모서리에 맞춰 평평하게 만들어 하나로
   이어진 패널처럼 보이게 한다(패널 전체 바깥 모서리는 .poster-panel 의 overflow:hidden +
   border-radius 가 그대로 둥글게 잘라낸다 — 위는 이미지 상단, 아래는 이 카드 하단). */
.poster-frame + .poster-overlay.shown {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* QA(260807) — 히어로 포스터 확대버튼(.cls-card-zoom, main.css 아래쪽)의 위치 기준.
   .poster-panel 자체가 이미 position:relative 이지만 overflow:hidden 이라 버튼을
   이미지 영역이 아니라 패널 전체(정보카드 포함) 우하단에 놓으면 어긋난다 — 이미지만 감싸는
   별도 컨테이너를 둬서 버튼이 정확히 이미지 우하단에 붙게 한다. */
.poster-frame {
  position: relative;
}

.poster-overlay .poster-coming,
.poster-coming {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  margin-bottom: 14px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: var(--positive);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.poster-overlay span {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.poster-overlay h2 {
  margin: 8px 0 10px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.poster-overlay p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.62;
}

.poster-info {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.poster-info li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.poster-info b {
  color: var(--navy);
  text-align: right;
}

.poster-overlay .poster-info,
.program-info {
  gap: 0;
  margin-top: 14px;
}

.poster-overlay .poster-info li,
.program-info li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.poster-overlay .info-icon,
.program-info .info-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: #edf6ff;
  border-radius: 9px;
}

.poster-overlay .info-icon svg,
.program-info .info-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.poster-overlay .info-label,
.program-info .info-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.poster-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(2, 16, 30, 0.78);
  backdrop-filter: blur(12px);
}

.poster-modal:target,
.poster-modal.is-open {
  display: flex;
}

.poster-modal.is-closed {
  display: none;
}

.poster-modal-card {
  position: relative;
  width: min(92vw, 520px);
  max-height: 90vh;
  overflow: auto;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
}

.poster-modal-card.wide {
  width: min(94vw, 900px);
}

.poster-modal-card img {
  width: 100%;
}

.modal-content {
  display: grid;
  gap: 28px;
  padding: 34px;
}

.poster-modal-layout {
  grid-template-columns: minmax(240px, 0.85fr) minmax(260px, 1fr);
  align-items: center;
}

.poster-modal-copy {
  align-self: center;
}

.poster-modal-image {
  overflow: hidden;
  border-radius: var(--radius);
  background: #eaf4fb;
  box-shadow: 0 14px 34px rgba(9, 38, 66, 0.12);
}

.modal-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.modal-content h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: 0;
}

.modal-content p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  line-height: 1.7;
}

.modal-content .button {
  margin-top: 24px;
}

.notify-modal-card {
  width: min(92vw, 560px);
}

.notify-modal-content {
  gap: 14px;
}

.notify-modal-content .notify-form {
  margin-top: 8px;
}

.notify-modal-content .notify-form input {
  color: var(--text);
  border-color: var(--border);
  background: #f7fbfd;
}

.notify-modal-content .notify-form input::placeholder {
  color: #8ca0b2;
}

.notify-modal-content .notify-form button {
  color: #fff;
  background: var(--navy);
}

.poster-modal-close {
  position: sticky;
  top: 14px;
  float: right;
  z-index: 1;
  width: 38px;
  height: 38px;
  margin: 14px 14px -52px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(6, 27, 48, 0.82);
  font-size: 22px;
  line-height: 1;
}

/* B4(plan 024) — 포스터 확대(원본 비율) 트리거 + 라이트박스. 원래 content.css 에만 있었는데
   QA(260807)에서 히어로 포스터(B1, 00_main)에도 같은 확대 기능을 붙이면서 main.css 로 옮겼다
   — main.css 는 전 페이지 로드라 content.css 를 안 불러오는 00_main 에서도 동작한다.
   .cls-card-poster-frame(share/inc/class_card.php)·.poster-frame(00_main 히어로) 둘 다
   position:relative 컨테이너 안에 이 버튼을 두면 그 컨테이너 우하단에 자리잡는다. */
.cls-card-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 38, 66, 0.72);
  cursor: pointer;
  transition: background 160ms ease;
}
.cls-card-zoom svg { width: 18px; height: 18px; }
.cls-card-zoom:hover,
.cls-card-zoom:focus-visible { background: var(--accent, #0057b8); }

.cls-card-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 16, 30, 0.78);
}
.cls-card-lightbox.is-open { display: flex; }
/* QA(260807 5차) — 확대(라이트박스) 이미지도 작다는 클라 피드백. 720px/90vh → 1080px/96vh */
.cls-card-lightbox-dialog {
  position: relative;
  max-width: min(96vw, 1080px);
  max-height: 96vh;
}
.cls-card-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 96vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32);
  object-fit: contain;
}
.cls-card-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: rgba(6, 27, 48, 0.82);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
html.cls-card-lightbox-scroll-lock,
body.cls-card-lightbox-scroll-lock {
  overflow: hidden;
}
@media (max-width: 600px) {
  .cls-card-lightbox { padding: 14px; }
  .cls-card-lightbox-close { top: 6px; right: 6px; background: rgba(6, 27, 48, 0.92); }
}

/* B2(plan 024) — 히어로 "강의 일정 보기" 모달의 회차별 상세 표. content.css 는 main 페이지에
   로드되지 않으므로(header.php `$main==='main'` 분기) 같은 시각 언어를 main.css 에 별도 이름으로 둔다. */
.schedule-modal-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.schedule-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}

.schedule-modal-table th,
.schedule-modal-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.schedule-modal-table th {
  background: var(--surface-soft);
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.schedule-modal-table td.c,
.schedule-modal-table th.c {
  text-align: center;
  white-space: nowrap;
}

/* QA(260807 6차) — "일시" 컬럼(2번째)이 좁은 화면에서 "9월 15일 (화)"처럼 줄바꿈되는 문제.
   .c(주차)처럼 nowrap 처리. 표는 이미 .schedule-modal-table-wrap 에서 overflow-x:auto 라
   가로 스크롤로 흡수된다. */
.schedule-modal-table td:nth-child(2),
.schedule-modal-table th:nth-child(2) {
  white-space: nowrap;
}

.schedule-modal-table tr.is-hidden-row {
  opacity: .45;
}

@media (max-width: 768px) {
  .schedule-modal-table { font-size: 13px; }
  .schedule-modal-table th,
  .schedule-modal-table td { padding: 10px; }
}

.section {
  position: relative;
  padding: 86px 0;
}

.section.compact {
  padding: 98px 0 44px;
  margin-top: 0;
  z-index: 2;
}

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

.section-head {
  display: block;
  margin-bottom: 34px;
}

.section-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.section-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: 0;
}

#quick-title,
#ocean-title,
#notice-title,
#program-title,
#video-title,
#archive-title,
#contents-title {
  scroll-margin-top: 96px;
}

.section-desc {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.68;
}

.quick-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 16px;
}

.quick-card {
  min-height: 188px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(9, 38, 66, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.icon-badge {
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  color: var(--accent);
  background: rgba(0, 87, 184, 0.08);
  transition: transform 220ms ease, color 220ms ease, background-color 220ms ease;
}

.icon-badge svg {
  width: 27px;
  height: 27px;
  stroke-width: 1.9;
}

.quick-card.feature {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0, 87, 184, 0.9), rgba(0, 160, 184, 0.78)),
    url("/img/layout/ocean-shore.jpg") center / cover no-repeat;
}

.quick-card.feature .icon-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.quick-card h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
}

.quick-card p {
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
}

.quick-card.feature p {
  color: rgba(255, 255, 255, 0.84);
}

.quick-card .button {
  margin-top: 26px;
}

.quick-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 87, 184, 0.28);
  box-shadow: 0 22px 54px rgba(9, 38, 66, 0.12);
}

.quick-card:hover .icon-badge {
  transform: translateY(-2px);
  color: #fff;
  background: var(--accent);
}

.quick-card.feature:hover {
  box-shadow: 0 26px 64px rgba(0, 87, 184, 0.24);
}

.ocean-showcase {
  padding: 24px 0 68px;
}

.ocean-showcase-grid {
  display: block;
}

.ocean-visual {
  position: relative;
  height: 300px;
  min-height: 0;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 18px 54px rgba(9, 38, 66, 0.1);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.ocean-showcase + .section {
  padding-top: 0;
}

.ocean-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.ocean-visual:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 66px rgba(9, 38, 66, 0.14);
}

.ocean-visual:hover img {
  transform: scale(1.035);
}

.ocean-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 38, 66, 0), rgba(9, 38, 66, 0.6));
  pointer-events: none;
}

.ocean-caption {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 50%;
  width: min(100% - 48px, 760px);
  transform: translate(-50%, 50%);
  z-index: 1;
  color: #fff;
  text-align: center;
}

.ocean-caption span {
  display: block;
  margin-bottom: 8px;
  color: #bdefff;
  font-size: 13px;
  font-weight: 700;
}

.ocean-caption h3 {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: 0;
}

.ocean-caption p {
  max-width: 680px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  line-height: 1.68;
}

.notice-layout {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 42px;
  align-items: stretch;
}

.notice-panel {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(9, 38, 66, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.notice-panel .icon-badge {
  margin-bottom: 20px;
  color: var(--positive);
  background: rgba(18, 134, 111, 0.09);
}

.notice-panel strong {
  display: block;
  margin-bottom: 12px;
  color: var(--positive);
  font-size: 14px;
  font-weight: 700;
}

.notice-panel h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: 0;
}

.notice-panel p {
  margin: 14px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.68;
}

.notice-panel .button {
  margin-top: 24px;
}

.notice-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 134, 111, 0.22);
  box-shadow: 0 22px 58px rgba(9, 38, 66, 0.1);
}

.notice-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--navy);
  display: flex;
  flex-direction: column;
}

.notice-list li {
  display: grid;
  grid-template-columns: 82px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  flex: 1;
  min-height: 92px;
  transition: background-color 180ms ease, border-color 180ms ease, padding-left 180ms ease, padding-right 180ms ease;
}

.notice-list li:hover {
  padding-left: 14px;
  padding-right: 14px;
  background: rgba(0, 87, 184, 0.04);
  border-color: rgba(0, 87, 184, 0.22);
}

.notice-date {
  text-align: center;
  color: var(--navy);
  font-weight: 700;
}

.notice-date span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

.notice-title {
  min-width: 0;
  font-weight: 600;
  transition: color 180ms ease;
}

.notice-list li:hover .notice-title {
  color: var(--accent);
}

.notice-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--accent);
  background: rgba(0, 87, 184, 0.08);
  font-size: 12px;
  font-weight: 700;
  transition: color 180ms ease, background-color 180ms ease;
}

.notice-list li:hover .notice-tag {
  color: #fff;
  background: var(--accent);
}

.program-band {
  color: #fff;
  background:
    linear-gradient(115deg, rgba(9, 38, 66, 0.96), rgba(0, 87, 184, 0.86)),
    url("/img/layout/ocean-water.jpg") center / cover no-repeat;
}

.program-band .section-kicker,
.program-band .section-desc {
  color: rgba(255, 255, 255, 0.72);
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.program-card {
  min-height: 232px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(12px);
  transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

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

.program-icon {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.92);
  transition: transform 220ms ease, color 220ms ease, background-color 220ms ease;
}

.program-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.85;
}

.program-step {
  color: rgba(255, 255, 255, 0.54);
  font-size: 28px;
  font-weight: 700;
}

.program-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.34;
  font-weight: 600;
  letter-spacing: 0;
}

.program-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-weight: 400;
}

.program-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.16);
}

.program-card:hover .program-icon {
  transform: translateY(-2px) scale(1.04);
  color: #fff;
  background: var(--accent);
}

.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.archive-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(9, 38, 66, 0.07);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.archive-thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--surface-strong), #fff);
  display: flex;
  align-items: end;
  padding: 22px;
  color: var(--navy);
  font-size: 32px;
  font-weight: 700;
  transform-origin: center;
  transition: transform 360ms ease, filter 220ms ease;
}

.archive-card.featured .archive-thumb {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(9, 38, 66, 0.1), rgba(9, 38, 66, 0.8)),
    url("/img/layout/oceanclass-class-generated.png") center / cover no-repeat;
}

.archive-card.calm .archive-thumb {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(9, 38, 66, 0.06), rgba(9, 38, 66, 0.72)),
    url("/img/layout/ocean-calm.jpg") center / cover no-repeat;
}

.archive-card.shore .archive-thumb {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(9, 38, 66, 0.06), rgba(9, 38, 66, 0.7)),
    url("/img/layout/ocean-shore.jpg") center / cover no-repeat;
}

.archive-body {
  padding: 22px;
}

.archive-body h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
}

.archive-body p {
  margin: 10px 0 0;
  color: var(--text-secondary);
  font-weight: 400;
  line-height: 1.68;
}

.archive-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 87, 184, 0.24);
  box-shadow: 0 24px 58px rgba(9, 38, 66, 0.13);
}

.archive-card:hover .archive-thumb {
  transform: scale(1.035);
  filter: saturate(1.08);
}

.vod-section {
  background: #fff;
}

.vod-section .section-head {
  margin-bottom: 24px;
}

.vod-year {
  margin-top: 30px;
}

.vod-year:first-of-type {
  margin-top: 0;
}

.vod-year h3 {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
}

.slider-shell {
  position: relative;
}

.slider-controls {
  position: absolute;
  top: 72px;
  right: -16px;
  left: -16px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.slider-button {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 56, 89, 0.1);
  border-radius: 50%;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(9, 38, 66, 0.16);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.slider-button:hover {
  transform: translateY(-2px);
  color: #fff;
  background: var(--accent);
  box-shadow: 0 16px 34px rgba(0, 87, 184, 0.26);
}

.slider-button svg {
  width: 22px;
  min-width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
}

.vod-list {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 18px;
  scrollbar-width: none;
}

.vod-list::-webkit-scrollbar {
  display: none;
}

.vod-card {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  color: var(--text);
  scroll-snap-align: start;
}

/* 카드가 .ia-card-wrap(vod-card-outer)로 감싸지면 flex 아이템은 래퍼 — 사이징을 래퍼로 이전 */
.vod-list > .vod-card-outer {
  flex: 0 0 calc((100% - 48px) / 4);
  min-width: 0;
  scroll-snap-align: start;
}
.vod-card-outer > .vod-card {
  display: block;
  width: 100%;
}

.vod-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(9, 38, 66, 0.06), rgba(9, 38, 66, 0.4)),
    var(--thumb-image) center / cover no-repeat;
  box-shadow: 0 10px 28px rgba(9, 38, 66, 0.12);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.vod-card:hover .vod-thumb {
  transform: translateY(-4px);
  filter: saturate(1.08);
  box-shadow: 0 18px 42px rgba(9, 38, 66, 0.18);
}

.vod-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vod-duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  color: #fff;
  background: rgba(0, 0, 0, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.vod-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  background: rgba(0, 87, 184, 0.22);
  transition: opacity 180ms ease;
}

.vod-play svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
}

.vod-card:hover .vod-play {
  opacity: 1;
}

.vod-card h4 {
  margin: 10px 0 4px;
  font-size: 16px;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: 0;
}

.vod-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.48;
}

.vod-card .kebab {
  float: right;
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
}

.thumb-poster {
  --thumb-image: url("/img/layout/2025_poster.jpg");
}

.thumb-class {
  --thumb-image: url("/img/layout/oceanclass-class-generated.png");
}

.thumb-calm {
  --thumb-image: url("/img/layout/ocean-calm.jpg");
}

.thumb-wave {
  --thumb-image: url("/img/layout/ocean-wave.jpg");
}

.thumb-shore {
  --thumb-image: url("/img/layout/ocean-shore.jpg");
}

.ocean-contents {
  background: #fff;
  padding-top: 44px;
}

.video-band {
  background: #eef4f7;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.video-card {
  position: relative;
  min-height: 242px;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background: var(--navy);
  box-shadow: 0 18px 48px rgba(9, 38, 66, 0.14);
  isolation: isolate;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.video-card::before,
.video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.video-card::before {
  background: var(--video-image) center / cover no-repeat;
  transform: scale(1.02);
  transition: transform 520ms ease, filter 220ms ease;
}

.video-card::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.88) 0 34%, rgba(0, 0, 0, 0.28) 54%, rgba(0, 0, 0, 0.72) 100%);
  transition: opacity 220ms ease;
}

.video-card:nth-child(1) {
  --video-image: url("/img/layout/ocean-shore.jpg");
}

.video-card:nth-child(2) {
  --video-image: url("/img/layout/oceanclass-class-generated.png");
}

.video-card:nth-child(3) {
  --video-image: url("/img/layout/ocean-wave.jpg");
}

.video-card-head {
  padding: 22px 22px 0;
}

.video-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 600;
}

.video-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.video-number {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
}

.video-card h3 {
  margin: 12px 0 0;
  font-size: 20px;
  line-height: 1.42;
  font-weight: 600;
  letter-spacing: 0;
}

.video-play {
  position: absolute;
  right: 20px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
  transition: color 180ms ease, transform 180ms ease;
}

.video-play svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  transition: transform 180ms ease;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 72px rgba(9, 38, 66, 0.2);
}

.video-card:hover::before {
  transform: scale(1.08);
  filter: saturate(1.08) contrast(1.06);
}

.video-card:hover .video-play {
  color: #fff;
  transform: translateX(2px);
}

.video-card:hover .video-play svg {
  transform: translateX(4px);
}

.footer-cta {
  padding: 104px 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(9, 38, 66, 0.96), rgba(9, 38, 66, 0.68)),
    url("/img/layout/ocean-calm.jpg") center / cover no-repeat;
}

.footer-cta .container {
  max-width: 900px;
  text-align: center;
}

.footer-cta h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: 0;
}

.footer-cta p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}

.footer-cta .button {
  margin-top: 32px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 176px;
  }

  .hero-inner,
  .notice-layout {
    grid-template-columns: 1fr;
  }

  /* 모바일: hero 텍스트 컬럼·버튼 가운데 정렬 (포스터 패널은 aside 라 영향 없음) */
  .hero-inner > div { text-align: center; }
  .hero-actions { justify-content: center; }

  .hero-note {
    grid-template-columns: 1fr;
  }

  .poster-panel {
    justify-self: start;
    max-width: 420px;
  }

  .status-panel {
    margin-bottom: 0;
  }

  .quick-grid,
  .program-grid,
  .video-grid,
  .archive-grid {
    grid-template-columns: 1fr;
  }

  .vod-card,
  .vod-list > .vod-card-outer {
    flex-basis: calc((100% - 16px) / 2.1);
  }

  .slider-controls {
    top: 64px;
    right: -6px;
    left: -6px;
  }

  .poster-modal-layout {
    grid-template-columns: 1fr;
  }

  .footer-cta .container,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .footer-cta .container {
    display: block;
  }
}

@media (max-width: 640px) {
  .nav {
    width: calc(100% - 28px);
    height: 64px;
  }

  .brand-logo {
    width: 206px;
  }

  .hero {
    padding: 156px 0 42px;
    background:
      linear-gradient(180deg, rgba(4, 25, 46, 0.96) 0%, rgba(4, 25, 46, 0.86) 58%, rgba(4, 25, 46, 0.52) 100%),
      url("/img/layout/busan-gwangandaegyo-hero.png") center right / cover no-repeat;
  }

  .hero-inner,
  .container,
  .footer-inner {
    width: calc(100% - 28px);
  }

  .hero-inner {
    gap: 34px;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 42px);
  }

  .hero-copy {
    font-size: 16px;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .button {
    width: 100%;
    max-width: 100%;
  }

  .hero-actions .button,
  .status-panel {
    width: 320px;
    max-width: 100%;
  }

  /* B1(plan 024) — 여기서 .poster-panel 을 320px 로 좁히지 않는다: 기본 width:100%(위 base
     규칙)를 그대로 유지해 no-image 카드와 동일한 모바일 폭을 보장한다(포스터 있음/없음 공통). */

  .poster-overlay {
    inset: auto 12px 12px;
    padding: 16px;
  }

  /* 모바일에서도 포스터 안내(모집기간·강의일정 등) 노출 — 과거 이미지 포스터 시절 잔재 display:none 제거 (D-2) */

  .vod-card,
  .vod-list > .vod-card-outer {
    flex-basis: 82%;
  }

  .slider-button {
    width: 42px;
    height: 42px;
  }

  .modal-content {
    padding: 26px 22px;
  }

  .notify-form {
    grid-template-columns: 1fr;
  }

  .status-body,
  .quick-card,
  .notice-panel,
  .program-card,
  .video-card-head,
  .archive-body {
    padding: 22px;
  }

  .section {
    padding: 62px 0;
  }

  .section.compact {
    padding: 72px 0 32px;
  }

  .ocean-showcase {
    padding: 20px 0 52px;
  }

  .ocean-visual {
    height: 220px;
    min-height: 0;
  }

  .ocean-caption {
    width: calc(100% - 36px);
  }

  .section-head {
    margin-bottom: 22px;
  }

  .floating-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .footer-inner {
    gap: 28px;
  }

  .notice-list li {
    grid-template-columns: 58px 1fr;
  }

  .notice-tag {
    grid-column: 2;
    justify-self: start;
  }

  .footer-cta {
    padding: 76px 0;
  }
}

/* VOD 팝업 플레이어 (script.js video-modal) — 카드 클릭 시 dim 배경 + 사이트 내 재생 */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(9, 38, 66, 0.82);
}

.video-modal-box {
  position: relative;
  width: min(960px, 100%);
}

.video-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  min-height: 38px;
}

.video-modal-title {
  margin: 0;
  flex: 1;
  align-self: center;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.video-modal-frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.video-modal-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.34);
}

@media (max-width: 600px) {
  .video-modal { padding: 14px; }
}

/* ── 공통 본인확인 팝업 (수강신청·강의입장 공용) — 전 페이지 로드(main.css) ── */
.oc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9, 38, 66, 0.55);
}

.oc-modal.open { display: flex; }

.oc-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 30px 28px;
  background: #fff;
  border-radius: var(--radius, 8px);
  box-shadow: 0 20px 60px rgba(9, 38, 66, 0.25);
}

.oc-modal__card h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy, #092642);
}

.oc-modal__card > p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-secondary, #587184);
}

.oc-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-secondary, #587184);
  cursor: pointer;
}

.oc-modal__error {
  margin: 0 0 14px;
  color: #b3261e;
  font-weight: 600;
  font-size: 14px;
}

.oc-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.oc-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.oc-modal__field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #092642);
}

.oc-modal__field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border, rgba(15, 55, 84, 0.14));
  border-radius: var(--radius, 8px);
  font-size: 15px;
  background: #fff;
}

.oc-modal__field input:focus {
  outline: none;
  border-color: var(--accent, #0057b8);
}

.oc-modal__submit {
  margin-top: 6px;
  width: 100%;
}

/* .oc-modal__card > p (설명문) 보다 specificity 우선 — 안 그러면 margin-top 이 0 으로 덮임 */
.oc-modal__card > .oc-modal__help {
  margin: 22px 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--text-secondary, #587184);
}

.oc-modal__help a {
  color: var(--navy, #092642);
  font-weight: 600;
}

@media (max-width: 520px) {
  .oc-modal { padding: 12px; }
  .oc-modal__card { padding: 26px 20px; }
}

/* 메인 전용 다중 이미지 팝업 */
html.site-popup-scroll-lock,
body.site-popup-scroll-lock {
  overflow: hidden;
}

.site-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(2, 16, 30, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.site-popup-layer[hidden] {
  display: none;
}

.site-popup-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.site-popup-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(1200px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  min-width: 0;
  transform: translateY(8px);
  transition: transform 160ms ease;
}

.site-popup-layer.is-open .site-popup-board {
  transform: translateY(0);
}

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

/* QA(260807) — 열 수는 site-popup.js renderPage() 가 실제 보이는 카드 개수로
   --site-popup-columns 를 매번 계산해 넣는다(1024/600 breakpoint 상한은 JS getPageSize()
   가 이미 반영). 고정 3열이면 카드가 1~2개뿐일 때 빈 열이 남아 왼쪽으로 쏠려 보였다. */
/* QA(260807 5차 4차 정정) — align-items 기본값(stretch)이면 카드 2장 높이가 다를 때 짧은 쪽
   카드가 긴 쪽 행 높이까지 강제로 늘어나(카드 흰 배경만 남는 빈 공간) 이미지가 "덜 찬" 것처럼
   보인다. 3차 정정에서 `start`로 바꿨더니 이번엔 카드 높이가 서로 다를 때 전부 위쪽에 붙어
   짧은 카드 아래가 허전해 보인다는 클라 피드백 — `center`로 세로 중앙 정렬한다(가로 중앙은
   이미 .site-popup-item 의 align-items:center 가 담당). */
.site-popup-list {
  display: grid;
  grid-template-columns: repeat(var(--site-popup-columns, 3), minmax(0, 1fr));
  align-items: center;
  flex: 1 1 auto;
  gap: 16px;
  min-height: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* QA(260807 4차) — 카드가 정확히 1개일 때(site-popup.js가 켜는 클래스) `1fr` 트랙은 항상 보드
   전체 폭(최대 1200px)을 강제로 채운다. 이미지 실측 비율이 그 폭보다 좁으면(landscape 2:1
   이미지가 확정 높이에서 계산한 폭이 972px인데 보드는 1200px) 카드가 여전히 넓게 늘어난
   채로 이미지만 가운데 뜨고 좌우로 카드 흰 배경이 여백처럼 보였다. 트랙을 `max-content`로
   바꾸고 그리드를 가운데 정렬하면 카드 자체가 이미지(내용) 크기에 맞춰 줄어든다. */
.site-popup-list.site-popup-list--single-card {
  grid-template-columns: max-content;
  justify-content: center;
}

.site-popup-list:focus-visible {
  outline: 3px solid var(--accent, #0057b8);
  outline-offset: 4px;
}

/* QA(260807 7차) — "오늘 하루 보지 않기"는 이미지 위가 아니라 이미지 아래, 카드 바깥(어두운
   배경) 간격에 둔다. 카드(흰 배경)와 그 아래 액션을 세로로 쌓기 위해 아이템 자체를 flex
   column으로 바꾼다.
   QA(260807 5차 3차 정정) — align-items 기본값(stretch)이면 카드(.site-popup-card)가 그리드
   칸 폭까지 늘어나, 이미지가 그 폭보다 좁을 때 카드의 흰 배경·테두리·그림자가 이미지보다 크게
   남아 "여백"처럼 보인다. `center`로 바꾸면 카드가 이미지 실제 크기로 줄어들고 칸 안에서
   가운데 정렬되며, 남는 공간은 카드 배경이 아니라 팝업 레이어의 어두운 배경이 그대로 비친다
   (클라 요청 — 여백 배경·그림자 없애기). 아래 액션(체크박스)도 같은 원리로 칸 가운데 정렬된다. */
.site-popup-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.site-popup-item[hidden] {
  display: none;
}

.site-popup-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.site-popup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border, rgba(15, 55, 84, 0.14));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28);
}

/* QA(260807 5차 3차 정정) — 클라 재신고: "여백(레터박스)이 여전히 보인다. 없애는 게 원래
   요청이었다." 카드가 2장 이상일 때 이미지 영역을 카드 폭 100%로 강제 고정(직전 정정)했던
   게 원인 — 폭은 통일됐지만 이미지 실제 비율과 안 맞으면 그 차이만큼 중립 배경이 그대로
   드러났다. designs/008의 "카드는 같은 폭" 조항보다 "자르거나 늘리지 않고, 여백 없이 보이게"
   쪽을 우선하기로 함(클라 명시 확인) — 카드 폭을 강제로 맞추는 대신 이미지 실제 렌더 크기에
   박스가 완전히 밀착되게(width/height 둘 다 fit-content) 되돌린다. 카드가 여러 장이면 이미지
   비율에 따라 카드 크기가 서로 달라질 수 있다(의도됨 — 균일한 폭보다 "여백 없음"이 우선).
   max-height는 이미지의 상한(강제 고정값이 아님)이라 이미지가 상한보다 작으면 그만큼만
   차지한다. */
.site-popup-media {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-muted, #f5f5f5);
}

.site-popup-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  /* B3(plan 024) — designs/008 확정값 clamp(280px, 54vh, 560px) 회귀 교정(배포본 160px 오기).
     이제 이 값은 .site-popup-media가 아니라 이미지 자체의 상한이라, 이미지가 이보다 작으면
     박스가 그만큼만 차지해(여백 없음) 아래 max-height 값이 "이미지 우선 축소" 상한 역할도
     겸한다. */
  max-height: clamp(280px, 54vh, 560px);
  max-height: clamp(280px, 54dvh, 560px);
  max-height: min(clamp(280px, 54vh, 560px), calc(100vh - 190px));
  max-height: min(clamp(280px, 54dvh, 560px), calc(100dvh - 190px));
  object-fit: contain;
}

/* QA(260807 7차) — "오늘 하루 보지 않기" 아래 흰 바(테두리·배경 박스)가 팝업을 답답해 보이게
   한다는 피드백으로 박스를 없앴다. 이미지 "위"(오버레이)가 아니라 이미지 "아래", 흰 카드 밖
   여백(팝업 레이어의 어두운 반투명 배경이 비치는 자리)에 간격을 두고 놓는다 — 그래서 흰 글씨가
   필요했던 것. `.site-popup-item`이 flex column이라 카드 다음에 자연스럽게 흐름을 따라 놓인다. */
/* QA(260807 5차 3차 정정) — 클라 요청: "오늘 하루 보지 않기"를 항상 각 팝업(카드) 가운데로.
   카드 폭이 이제 이미지 크기에 맞춰 제각각(위 .site-popup-media 참조)이라, 그리드 칸 폭
   기준으로 왼쪽 정렬돼 있으면 좁은 카드의 체크박스가 카드 중심에서 벗어나 보인다. */
.site-popup-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.site-popup-close-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(9, 38, 66, 0.86);
  color: #fff;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 4px 16px rgba(2, 16, 30, 0.24);
}

/* QA(260807 5차) — 클릭 즉시 팝업이 닫히던 "오늘 하루 보지 않기" 버튼을 흔히 쓰는 체크박스
   패턴으로 교체(사용자 요청) — 이제 팝업 액션(닫기 종류)이 아니라 옵션이라 버튼처럼 보일
   필요가 없다. 왼쪽 정렬 + 네이티브 체크박스 + 라벨 텍스트, 44px 터치 영역은 유지한다.
   QA(260807 6차) — 아래 흰 바(박스)를 없애고 이미지 위에 얹는 오버레이가 됐다. 이미지가
   임의 사진/일러스트라 배경색을 예측할 수 없으므로 흰 글씨 + text-shadow로 밝은/어두운
   배경 모두에서 읽히게 한다. */
.site-popup-today {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.site-popup-today input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  accent-color: var(--accent, #0057b8);
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.site-popup-navigation {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border, rgba(15, 55, 84, 0.14));
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow, 0 22px 70px rgba(9, 38, 66, 0.16));
}

.site-popup-pagination {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.site-popup-pagination[hidden] {
  display: none;
}

/* QA(260807 2차) — 팝업이 1개뿐이라 pagination이 숨으면 .site-popup-navigation(플레이트)만
   .site-popup-board(flex column, 기본 align-items:stretch)의 전체 폭으로 늘어나 "모두 닫기"
   버튼이 불필요하게 넓은 흰 판 위에 놓인 것처럼 보였다. pagination이 없을 때는 플레이트 자체를
   버튼 크기에 맞춰 줄이고 가운데 정렬한다(테두리·그림자도 제거해 버튼과 판이 겹쳐 보이지 않게).
   600px 미만(모바일)은 아래 미디어쿼리가 close-all 을 의도적으로 width:100% 풀폭 탭타깃으로
   유지하므로 이 축소는 그와 겹치지 않게 600px 이상에서만 적용한다. */
@media (min-width: 600px) {
  .site-popup-navigation:has(.site-popup-pagination[hidden]) {
    align-self: center;
    width: fit-content;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
}

.site-popup-page-button,
.site-popup-close-all,
.site-popup-dot {
  min-height: 44px;
  border: 1px solid var(--border, rgba(15, 55, 84, 0.14));
  border-radius: var(--radius, 8px);
  background: #fff;
  color: var(--navy, #092642);
}

.site-popup-page-button {
  flex: 0 0 auto;
  padding: 0 14px;
  white-space: nowrap;
}

.site-popup-page-button:disabled {
  cursor: default;
  opacity: 0.42;
}

.site-popup-close-all {
  padding: 0 18px;
  background: var(--navy, #092642);
  color: #fff;
}

.site-popup-status {
  min-width: 72px;
  margin: 0;
  color: var(--text-secondary, #587184);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.site-popup-dots {
  display: flex;
  max-width: min(36vw, 440px);
  min-width: 0;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-popup-dots::-webkit-scrollbar {
  display: none;
}

.site-popup-dot {
  flex: 0 0 44px;
  width: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.site-popup-dot span {
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--text-secondary, #587184);
}

.site-popup-dot[aria-current="true"] span {
  background: var(--accent, #0057b8);
}

.site-popup-close-icon:hover,
.site-popup-close-icon:focus-visible {
  background: var(--accent, #0057b8);
}

.site-popup-today:hover {
  opacity: 0.85;
}

.site-popup-today:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.site-popup-page-button:not(:disabled):hover,
.site-popup-page-button:focus-visible,
.site-popup-dot:hover,
.site-popup-dot:focus-visible {
  border-color: var(--accent, #0057b8);
  color: var(--accent, #0057b8);
}

.site-popup-close-all:hover,
.site-popup-close-all:focus-visible {
  background: var(--accent, #0057b8);
}

/* 구 단일 마크업: 새 다중 자산이 먼저 교체되어도 기존 카드 계약을 유지한다. */
.site-popup-layer > .site-popup-card {
  width: min(560px, calc(100vw - 56px));
  height: auto;
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  border-radius: var(--radius, 8px);
  transform: scale(0.98);
  transition: transform 160ms ease;
}

.site-popup-layer.is-open > .site-popup-card {
  transform: scale(1);
}

.site-popup-layer > .site-popup-card .site-popup-media {
  height: auto;
  max-height: none;
  background: #fff;
}

.site-popup-layer > .site-popup-card .site-popup-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}

.site-popup-layer > .site-popup-card .site-popup-actions {
  display: flex;
  gap: 8px;
  padding: 16px;
}

.site-popup-layer > .site-popup-card .site-popup-actions button {
  min-height: 46px;
  border-radius: var(--radius, 8px);
}

.site-popup-layer > .site-popup-card .site-popup-today {
  flex: 1 1 auto;
  width: auto;
}

.site-popup-close {
  flex: 0 0 112px;
  background: var(--navy, #092642);
  color: #fff;
}

.site-popup-close:hover,
.site-popup-close:focus-visible {
  background: var(--accent, #0057b8);
}

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

@media (max-width: 599px) {
  .site-popup-layer {
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .site-popup-board {
    width: 100%;
    max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .site-popup-navigation {
    flex-direction: column;
  }

  .site-popup-pagination,
  .site-popup-close-all {
    width: 100%;
  }

  .site-popup-dots {
    flex: 1 1 auto;
    max-width: none;
  }

  .site-popup-dot {
    flex-basis: 32px;
    width: 32px;
  }

  .site-popup-layer > .site-popup-card {
    width: calc(100vw - 24px);
    max-width: 100%;
    max-height: 100%;
  }

  .site-popup-layer > .site-popup-card .site-popup-image {
    max-height: calc(100vh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}

@media (max-width: 340px) {
  .site-popup-layer > .site-popup-card .site-popup-actions {
    flex-direction: column;
  }

  .site-popup-layer > .site-popup-card .site-popup-close {
    flex-basis: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-popup-layer,
  .site-popup-board,
  .site-popup-item,
  .site-popup-layer > .site-popup-card,
  .site-popup-layer button {
    transition: none;
  }
}