/* ==========================================================================
   리딩브레인 — 사진 중심 레이어 (시안 3 방향)
   redesign.css 뒤에 로드됩니다. HTML 은 건드리지 않고 CSS 로만 톤을 바꿉니다.
   되돌리려면 index.html 에서 이 파일의 <link> 한 줄만 제거하세요.
   ========================================================================== */

:root {
  --ph-radius: 0px;              /* 사진은 각지게 — 사진 면적이 더 커 보인다 */
  --ph-ease: cubic-bezier(.22,.61,.36,1);
}

/* ── 1. 히어로 — 사진을 가리지 않는다 ─────────────────────────
   기존에는 왼쪽에서 오른쪽으로 어둡게 덮어 사진 대부분이 묻혔다.
   위쪽은 거의 투명하게 두고 글이 놓이는 아래쪽만 진하게 만든다. */
.hero { align-items: flex-end; }
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(9,25,41,0.44) 0%,
    rgba(9,25,41,0.06) 26%,
    rgba(9,25,41,0.52) 60%,
    rgba(9,25,41,0.88) 100%
  );
}
.hero-content {
  padding-top: clamp(140px, 16vw, 220px);
  padding-bottom: clamp(56px, 7vw, 104px);
  text-shadow: 0 1px 16px rgba(9,25,41,0.45);
}
.hero-static-image,
.hero-video,
.hero-video-poster { object-position: center 42%; }

/* ── 2. 프로그램 카드 — 작은 배지를 큰 사진으로 ──────────────
   .program-header 가 좌우 배치라 사진이 썸네일 크기에 머물렀다. */
.program-card { overflow: hidden; }
.program-header {
  display: block !important;
  position: relative;
  margin: 0 0 18px;
}
.program-header > img.program-badge {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font-size: 0;
  background: var(--gray-100);
  transition: transform .8s var(--ph-ease);
}
.program-card:hover .program-header > img.program-badge { transform: scale(1.05); }
.program-header > div {
  padding: 0 24px;
}
.program-header h3 { margin-bottom: 4px; }

/* 카드 안쪽 사진 링크도 키운다 */
.program-media-link img.program-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── 3. 갤러리 — 격자에서 가로 스크롤 사진 스트립으로 ────────── */
.gallery-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: clamp(280px, 28vw, 420px);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
  /* 오른쪽에 더 있다는 신호 */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.gallery-grid::-webkit-scrollbar { height: 6px; }
.gallery-grid::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--ph-radius);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ph-ease);
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 44px 16px 16px;
  color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(180deg, transparent, rgba(9,25,41,0.86));
}
.gallery-caption small {
  display: block;
  margin-top: 4px;
  font-size: 12px; font-weight: 400;
  color: rgba(255,255,255,0.76);
  letter-spacing: 0;
}

/* ── 4. 교육철학 지그재그 — 사진 비중을 키운다 ──────────────── */
.us-zig__row { grid-template-columns: minmax(0, 6.4fr) minmax(0, 5.6fr); }
.us-zig__row:nth-child(2n) { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); }
.us-zig__media { aspect-ratio: 4 / 3; border-radius: var(--ph-radius); }

/* ── 5. 사진이 들어간 카드들 공통 — 라운드 줄이고 사진 키우기 ── */
.phil-card .phil-icon,
.test-card .review-photo,
.heidi-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--ph-radius);
}

/* ── 6. 반응형 ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .program-card > .program-header { padding: 18px 18px 0; }
  .program-card > .program-header > div { padding: 14px 0 0; }
  .program-card > p,
  .program-card .program-card-content { padding-left: 18px; padding-right: 18px; }
  .program-card .program-card-toggle { margin-left: 18px; margin-right: 18px; }
  .gallery-grid {
    grid-auto-columns: clamp(240px, 78vw, 330px);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .us-zig__row,
  .us-zig__row:nth-child(2n) { grid-template-columns: 1fr; }
}

/* 캡션이 기본 상태에서 숨겨져 있어(hover 시 translateY) 사진 설명이 안 보였다 */
.gallery-item .gallery-caption { transform: none; }

/* 스트립 왼쪽은 제목과 줄을 맞추고, 오른쪽만 화면 밖으로 흘려
   더 볼 사진이 있다는 것을 알린다. (양쪽을 다 흘리면 첫 사진이
   화면 끝에 붙어 제목과 어긋나 보인다) */
.gallery .gallery-grid {
  max-width: none;
  margin-right: calc(50% - 50vw);
  padding-right: clamp(24px, 6vw, 90px);
}

/* 자동 슬라이드 중에는 스냅이 방해가 되므로 해제하고, 스크롤바도 감춘다 */
.gallery-grid {
  scroll-snap-type: none;
  scrollbar-width: none;
}
.gallery-grid::-webkit-scrollbar { display: none; }

/* ── 7. 커리큘럼 카드를 진단 카드와 같은 정렬로 ────────────────
   문제: 사진은 카드 가장자리까지 꽉 차고(여백 0), 제목은 28px,
   본문은 24px, 상세는 28px 라 시작선이 제각각이었다.
   게다가 제목 영역에 회색 띠가 깔려 사진·제목·본문이 따로 놀았다.
   진단 카드(.diag-card padding 32px 24px + 이미지 -8px 인셋)와
   같은 규칙으로 맞춘다. */
.program-card > .program-header {
  background: transparent;
  padding: 24px 24px 0;
}
.program-card > .program-header > img.program-badge {
  aspect-ratio: 16 / 10;              /* 진단 카드와 동일 비율 */
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  /* 진단 카드처럼 사진만 좌우로 8px 더 넓게 — 액자처럼 보인다 */
  width: calc(100% + 16px);
  max-width: none;
  margin: 0 -8px;
}
.program-card > .program-header > div {
  padding: 18px 0 0;                  /* 좌우는 헤더의 24px 를 그대로 따른다 */
  gap: 6px;
}

/* 본문·상세·버튼도 같은 24px 선에 맞춘다 */
.program-card > p { padding-left: 24px; padding-right: 24px; }
.program-card .program-card-content { padding-left: 24px; padding-right: 24px; }
.program-card .program-card-toggle { margin-left: 24px; margin-right: 24px; width: auto; }

/* ── 8. 우측 섹션 도트 내비게이션 ──────────────────────────────
   페이지가 매우 길어 현재 위치를 알기 어렵다.
   평소엔 점만 보이고, 올리면 섹션 이름이 나온다. */
.dotnav {
  position: fixed;
  right: clamp(14px, 1.8vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 105;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ph-ease), visibility .35s;
}
.dotnav.is-visible { opacity: 1; visibility: visible; }

.dotnav__dot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 5px 2px;
  text-decoration: none;
  cursor: pointer;
}
.dotnav__dot i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(12, 53, 77, 0.28);
  flex: 0 0 auto;
  transition: background-color .25s var(--ph-ease), transform .25s var(--ph-ease);
}
.dotnav__dot span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-navy);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(12, 53, 77, 0.10);
  border-radius: 50px;
  padding: 5px 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .25s var(--ph-ease), transform .25s var(--ph-ease);
  box-shadow: 0 4px 14px rgba(12, 53, 77, 0.10);
}
.dotnav__dot:hover span,
.dotnav__dot:focus-visible span { opacity: 1; transform: translateX(0); }
.dotnav__dot:hover i { background: var(--brand-gold); transform: scale(1.25); }

/* 현재 위치 */
.dotnav__dot.is-on i {
  background: var(--brand-gold);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(139, 48, 56, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .dotnav, .dotnav__dot i, .dotnav__dot span { transition: none; }
}
/* 좁은 화면에서는 본문을 가리므로 숨긴다 */
@media (max-width: 1100px) { .dotnav { display: none; } }

/* ══════════════════════════════════════════════════════════════
   9. 카드 스타일 통일
   진단/커리큘럼 카드와 같은 규칙(사진 16:10 + 액자 인셋 + 여백 24px)을
   같은 세로형 카드에만 적용한다.
   9단계 카드(.heidi-flow-card)는 가로형으로 따로 설계돼 있어 제외한다.
   ══════════════════════════════════════════════════════════════ */
.motivation-card {
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.motivation-card img {
  display: block;
  width: calc(100% + 16px);
  max-width: none;
  margin: -8px -8px 16px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
}

/* ══════════════════════════════════════════════════════════════
   10. 섹션 정리 — 성격이 겹치는 4곳을 감춘다
   삭제가 아니라 표시만 끈다. 이 블록을 지우면 그대로 되돌아온다.
     · #conversion        히어로와 같은 메시지("원서로 사고력을…")
     · #curious           FAQ 와 질문 성격이 겹침
     · .target-students   #local-answer 의 '대상' 설명과 겹침
     · .achievements      .hall 의 성과 수치와 겹침
   ══════════════════════════════════════════════════════════════ */
#conversion,
#curious,
.target-students,
.achievements { display: none; }