/* 하위 페이지 — Folios · Projects · Feeds · Honors · Contact */

/* ───────── 페이지 머리 ───────── */
.page-head {
  padding-top: clamp(4rem, 2rem + 6vw, 8rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}

.page-head__title {
  margin-top: var(--space-4);
}

.page-head__lead {
  margin-top: var(--space-5);
  max-width: 30em;
}

.list-section {
  padding-bottom: var(--section-gap);
}

.list-section__grid {
  margin-top: var(--space-7);
}

.empty {
  padding-block: var(--space-9);
  color: var(--color-text-muted);
}

/* ───────── Folios — 리브레토부터 세로로 쭉 ───────── */
.folio {
  scroll-margin-top: var(--header-height);
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-8) var(--section-gap);
}

.folio__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7) var(--space-8);
  align-items: start;
}

.folio__meta {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.folio__name {
  margin-top: var(--space-5);
}

.folio__summary {
  margin-top: var(--space-6);
  max-width: 22em;
}

.folio__media {
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
}

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

/* 짝수 번째는 설명을 왼쪽으로 */
.folio:nth-child(even) .folio__detail {
  order: -1;
}

.folio__ask {
  margin: var(--space-7) 0 0;
  max-width: 24em;
}

.folio__ask p + p {
  margin-top: var(--space-2);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
}

.folio__block {
  margin-top: var(--space-8);
}

.folio__block-title {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line-strong);
}

.folio__does {
  counter-reset: does;
}

.folio__does > li,
.folio__list > li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.folio__does > li {
  counter-increment: does;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
}

.folio__does > li::before {
  content: counter(does, decimal-leading-zero);
  grid-row: span 2;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.folio__does > li > span {
  grid-column: 2;
}

.folio__list > li {
  padding-left: 1.25rem;
  position: relative;
}

.folio__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-3) + 0.8em);
  width: 6px;
  height: 1px;
  background: currentColor;
}

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

.folio__vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.folio__vs > p {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.folio__vs-head {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}

@media (min-width: 961px) {
  .folio__text {
    position: sticky;
    top: calc(var(--header-height) + var(--space-7));
  }
}

@media (max-width: 960px) {
  .folio__inner { grid-template-columns: 1fr; }
  .folio:nth-child(even) .folio__detail { order: 0; }
  .folio__media { aspect-ratio: 4 / 3; }
}

/* ───────── 상세 (프로젝트 · 피드) 공통 ───────── */
.detail-head {
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: var(--space-7);
}

.detail-head__title {
  margin-top: var(--space-4);
  max-width: 18ch;
}

.detail-media {
  aspect-ratio: 21 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--color-placeholder);
}

.detail-media > img,
.detail-media > .placeholder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 960px) {
  .detail-media { aspect-ratio: 4 / 3; }
}

.detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-7) var(--space-8);
  padding-block: var(--space-8) var(--section-gap);
  align-items: start;
}

@media (max-width: 960px) {
  .detail-body { grid-template-columns: 1fr; }
}

/* 왼쪽 메타데이터 */
.meta-list {
  border-top: 1px solid var(--color-line-strong);
}

.meta-list__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-small);
}

.meta-list__row dt {
  color: var(--color-text-muted);
}

.meta-list__row dd {
  margin: 0;
}

@media (min-width: 961px) {
  .detail-body__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

/* 오른쪽 설명 */
.detail-body__main {
  max-width: 44em;
}

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

.detail-sub {
  padding-top: var(--space-6);
}

.item-list {
  border-top: 1px solid var(--color-line);
}

.item-list > li {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

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

/* 다음 글로 */
.detail-next {
  border-top: 1px solid var(--color-line);
  padding-block: var(--space-8);
}

.detail-next a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
}

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

.detail-next a:hover .detail-next__title {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* 서식 있는 본문 (앱 bodyLines) */
.rich-text p {
  min-height: 1.7em;
}

.rich-text p + p {
  margin-top: var(--space-2);
}

.rich-text .align-center { text-align: center; }
.rich-text .align-right { text-align: right; }
.rich-text .size-S { font-size: var(--text-small); }
.rich-text .size-L { font-size: var(--text-h3); line-height: var(--leading-snug); }
.rich-text .weight-light { font-weight: 300; }
.rich-text .weight-bold { font-weight: var(--weight-bold); }
.rich-text .color-gray { color: var(--color-text-muted); }

/* ───────── Feeds — 최근 1건을 크게 ───────── */
.feed-top {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6) var(--space-8);
  align-items: end;
  margin-top: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}

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

.feed-top__media > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.feed-top:hover .feed-top__media > * {
  transform: scale(1.03);
}

.feed-top__title {
  margin-top: var(--space-4);
}

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

.feed-top .btn {
  margin-top: var(--space-6);
}

.feed-top:hover .btn {
  background: var(--color-text);
  color: var(--color-bg);
}

@media (max-width: 960px) {
  .feed-top { grid-template-columns: 1fr; }
}

/* ───────── Honors — 연도별 행 나열 ───────── */
.honors {
  padding-bottom: var(--section-gap);
}

.honor-year + .honor-year {
  margin-top: var(--space-9);
}

.honor-year__title {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line-strong);
}

.honor-head,
.honor-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 8rem 5rem;
  gap: var(--space-5);
  align-items: center;
}

.honor-head {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-muted);
}

.honor-row {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.honor-row:hover {
  background: #fafafa;
}

.honor-row__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.honor-row__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.honor-row__admission {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}

.honor-row__count,
.honor-row__year {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
  .honor-head { display: none; }

  .honor-row {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--space-4);
  }

  .honor-row__year { display: none; }
}

/* ───────── Contact — 지점 카드 반복 ───────── */
.branches {
  padding-bottom: var(--section-gap);
}

.branch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6) var(--space-8);
  padding-block: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.branch__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.branch__name {
  margin-bottom: var(--space-6);
}

.branch__map {
  margin-top: var(--space-6);
  aspect-ratio: 16 / 10;
  width: 100%;
  border: 0;
  background: var(--color-placeholder);
}

.branch__map-links {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

/* 사진 자리도 칸을 꽉 채운다 */
.folio__media > .placeholder-photo,
.honor-row__media > .placeholder-photo,
.branch__photo > .placeholder-photo {
  width: 100%;
  height: 100%;
}

/* ───────── 법적 페이지 (개인정보처리방침 · 이용약관) ───────── */
.legal {
  padding-bottom: var(--section-gap);
}

.legal > * {
  max-width: 48rem;  /* 읽기 좋은 폭 — 제목과 같은 왼쪽 선에 맞춘다 */
}

.legal h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
  font-size: 1.25rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

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

.legal ul,
.legal ol {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: var(--space-1);
}

.legal table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
  font-size: var(--text-small);
}

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

.legal th {
  border-bottom-color: var(--color-line-strong);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.legal-table-wrap {
  overflow-x: auto;
}

.legal .blank {
  padding: 0 0.25em;
  background: #f1f1f1;
  color: var(--color-text-muted);
}

/* 초안 표시 — 법률 검토가 끝나면 이 상자를 지운다 */
.draft-note {
  margin-bottom: var(--space-7);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line-strong);
  font-size: var(--text-small);
}

/* 준비 중 페이지 */
.coming-soon {
  padding-bottom: var(--section-gap);
}

/* 위치 표시(Folios · …) 링크도 손가락으로 누르기 쉽게 */
.page-head .label a,
.detail-head .label a {
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}

/* 설명서 바로 아래 첫 Folio 는 위 줄 없이 이어진다 */
.folio:first-child {
  border-top: 0;
}

/* 같은 대상, 다른 질문 — 좁은 두 칸 표라 양쪽 맞춤이면 띄어쓰기가 벌어진다 */
.folio__vs p {
  text-align: start;
}