/* 페이지 내용 부품 — 장(sec) · 카드 · 단계 · 표 · 사진 · 질문 · 상담 띠
   상세 페이지는 차분하고 단정하게 (2026-10-28 원장님) — 고정(sticky) · 확대 효과 · 굵은 글씨를 쓰지 않는다.
   화려한 움직임은 첫 화면(index.html)에만 둔다. */

/* 페이지 머리 */
.page-head {
  padding-block: var(--space-9) var(--space-7);
}

.page-head .label {
  color: var(--color-text-muted);
}

.page-head h1 {
  margin-top: var(--space-3);
}

.page-head .lead {
  margin-top: var(--space-5);
  max-width: 46em;
  word-break: keep-all;
}

/* 페이지 맨 위 넓은 사진 */
.page-photo {
  aspect-ratio: 21 / 8;
  overflow: hidden;
  background: var(--color-placeholder);
}

.page-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .page-photo { aspect-ratio: 4 / 3; }
}

/* 장 — 왼쪽 제목 · 오른쪽 내용 */
.sec {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-6) var(--space-8);
  padding-block: var(--space-9);
  border-top: 1px solid var(--color-line);
}

.sec[id] {
  scroll-margin-top: var(--header-height);
}

.sec:first-of-type {
  border-top: 0;
}

.sec__head {
  align-self: start;
}

.sec__num {
  color: var(--color-text-muted);
}

.sec__title {
  margin-top: var(--space-3);
}

.sec__desc {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.sec__body > * + * {
  margin-top: var(--space-6);
}

/* 장 안의 작은 제목 (예: 학습 관리 › 맞춤 관리) */
.sec__body > .sub-title {
  margin-top: var(--space-8);
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
}

.sec__body > .sub-title + * {
  margin-top: var(--space-4);
}

@media (max-width: 960px) {
  .sec { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); }
}

/* 항목 목록 — 이름 · 설명 */
.items {
  border-top: 1px solid var(--color-line-strong);
}

.items > li {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.items strong {
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  text-align: start;
}

.items p {
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .items > li { grid-template-columns: 1fr; }
}

/* 카드 (사진 + 제목 + 설명) */
.tiles {
  display: grid;
  grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

.tile__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-placeholder);
}

.tile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile__num {
  display: block;
  margin-top: var(--space-4);
  color: var(--color-text-muted);
}

.tile h3 {
  margin-top: var(--space-2);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}

.tile p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
}

.tile__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  border-bottom: 1px solid currentColor;
}

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .tiles { grid-template-columns: 1fr; }
}

/* 사진 두 장 나란히 */
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.pair img,
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--color-placeholder);
}

/* 사진 모음 */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 표 */
.tbl-wrap {
  overflow-x: auto;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.tbl caption {
  caption-side: top;
  text-align: start;
  padding-bottom: var(--space-3);
  font-weight: var(--weight-bold);
  font-size: 1rem;
}

.tbl th,
.tbl td {
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: start;
  vertical-align: top;
}

.tbl thead th {
  border-bottom: 1px solid var(--color-line-strong);
  border-top: 1px solid var(--color-line-strong);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tbl .num {
  text-align: end;
  white-space: nowrap;
}

.tbl tr.is-soft td {
  background: #f6f6f6;
}

.tbl-note {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* 큰 비율 표시 (장학) */
.rate {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
}

/* 점 목록 */
.dots > li {
  position: relative;
  padding-left: 1.1em;
}

.dots > li + li {
  margin-top: var(--space-2);
}

.dots > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.75em;
  width: 4px;
  height: 4px;
  background: currentColor;
}

/* 단계 (사진 + 번호) */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

@media (max-width: 760px) {
  .flow-steps { grid-template-columns: 1fr; }
}

/* 포인트 사다리 (HYPER PASS) */
.ladder {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.ladder > li {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(6rem + var(--h, 0) * 1rem);
  padding: var(--space-4);
  background: #f2f2f2;
}

.ladder > li:last-child {
  background: var(--color-text);
  color: var(--color-bg);
}

.ladder strong {
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  text-align: start;
}

.ladder span {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  text-align: start;
}

@media (max-width: 760px) {
  .ladder { grid-template-columns: 1fr; }
  .ladder > li { min-height: 0; }
}

/* 하루 일과 띠 */
.day {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  border-top: 1px solid var(--color-line-strong);
}

.day > li {
  padding: var(--space-4) var(--space-4) var(--space-5) 0;
  text-align: start;
}

.day > li + li {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-line);
}

.day time {
  display: block;
  font-size: 1.5rem;
  font-weight: var(--weight-medium);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.day span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day > li, .day > li + li { padding: var(--space-4) var(--space-3) var(--space-4) 0; border-left: 0; border-bottom: 1px solid var(--color-line); }
}

/* 자주 묻는 질문 */
.faq {
  border-top: 1px solid var(--color-line-strong);
}

.faq details {
  border-bottom: 1px solid var(--color-line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-size: 1.125rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details > p {
  padding-bottom: var(--space-5);
  color: var(--color-text-muted);
  max-width: 44em;
}

/* 후기 */
.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background: #f6f6f6;
}

.quote footer {
  margin-top: auto;
  font-size: var(--text-small);
}

.quote footer strong {
  display: block;
  font-size: 1rem;
}

@media (max-width: 760px) {
  .quotes { grid-template-columns: 1fr; }
}

/* 지점 */
.branch-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.branch-card {
  padding: var(--space-6);
  border: 1px solid var(--color-line-strong);
}

.branch-card h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

.branch-card dl {
  margin: var(--space-5) 0 0;
  font-size: var(--text-small);
}

.branch-card dl > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  padding-block: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.branch-card dt {
  color: var(--color-text-muted);
}

.branch-card dd {
  margin: 0;
}

.branch-card__phone {
  margin-top: var(--space-3);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.branch-card .btn-row {
  margin-top: var(--space-5);
}

@media (max-width: 760px) {
  .branch-cards { grid-template-columns: 1fr; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* 빈 목록 */
.empty {
  padding: var(--space-8) var(--space-5);
  border-top: 1px solid var(--color-line-strong);
  border-bottom: 1px solid var(--color-line);
  text-align: center;
  color: var(--color-text-muted);
}

/* 원장님 확인이 필요한 자리 — 확정되면 지운다 */
.draft-note {
  padding: var(--space-3) var(--space-4);
  background: #fff6d6;
  font-size: var(--text-small);
  color: #6b5300;
}

/* 상담 띠 (페이지 맨 아래) */
.cta-band {
  padding-block: var(--space-9);
  background: var(--color-text);
  color: var(--color-bg);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
}

.cta-band__phones {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  opacity: 0.75;
}

/* 법정 문서 */
.doc {
  max-width: 48em;
  padding-bottom: var(--section-gap);
}

.doc h2 {
  margin-top: var(--space-7);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
}

.doc h2 + * {
  margin-top: var(--space-3);
}

.doc p + p,
.doc p + ul,
.doc ul + p {
  margin-top: var(--space-3);
}

.doc .dots {
  color: var(--color-text-muted);
}

/* 갤러리 줄 이름 (시설안내 — 지점별 줄) */
.gallery-row + .gallery-row {
  margin-top: var(--space-6);
}

.gallery-row__name {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

/* 시설안내 상세 — 사진이 주인공인 갤러리 (지점별) */
.photo-sec {
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.photo-sec:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.photo-sec__title {
  margin-bottom: var(--space-5);
  font-weight: var(--weight-medium);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
}

.photo-grid figure {
  margin: 0;
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--color-placeholder);
}

/* 첫 사진은 크게 */
.photo-grid figure:first-child {
  position: relative;
  grid-column: span 2;
  grid-row: span 2;
}

/* 큰 사진은 오른쪽 두 장 높이에 맞춘다 (사진 비율이 칸 높이를 바꾸지 않게) */
.photo-grid figure:first-child img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

.photo-grid figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (max-width: 760px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-grid figure:first-child { grid-row: auto; }
  .photo-grid figure:first-child img { position: static; height: auto; aspect-ratio: 3 / 2; }
}

/* 시설안내 상세 — 사진에 올리면 같은 지점의 다른 사진은 어두워지고, 올린 사진 아래에 이름 (2026-10-31 원장님, 지점 · 시설 안내와 같은 동작) */
.photo-grid--named figure {
  position: relative;
  overflow: hidden;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.photo-grid--named img {
  transition: transform 0.5s ease;
}

.photo-grid--named:hover figure:not(:hover) {
  opacity: 0.35;
  filter: grayscale(0.4);
}

.photo-grid--named figure:hover img {
  transform: scale(1.04);
}

.photo-grid--named figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: var(--space-6) var(--space-4) var(--space-3);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: #fff;
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  text-align: start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.photo-grid--named figure:hover figcaption {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .photo-grid--named figcaption { opacity: 1; transform: none; }
}