.section-main { flex: 1; padding: 62px 0 88px; }
.section-kicker { color: #a9bbdf; font-size: 11px; letter-spacing: .16em; }
.section-title { margin: 17px 0 0; font-size: clamp(60px, 8vw, 118px); font-weight: 300; letter-spacing: -.06em; line-height: .92; }
.section-lead { color: #b2bfd6; font-size: 14px; line-height: 1.7; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 66px; }
.section-head .section-lead { margin: 0 0 4px; }
.section-rule { height: 1px; background: rgba(185, 213, 255, .28); }

/* PROJECTS: 주제 왼쪽, 파생 작업 오른쪽 */
.project-group { margin-top: 48px; }
.group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 20px; }
.group-title { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .16em; }
.group-count { color: #91a3c2; font-size: 11px; letter-spacing: .1em; }
.project-lane { display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 1fr); gap: 0; min-height: 184px; border-top: 1px solid rgba(185, 213, 255, .27); }
.project-lane:last-child { border-bottom: 1px solid rgba(185, 213, 255, .27); }
.project-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; min-width: 0; padding: 20px 28px 20px 0; transition: transform .85s var(--ease-menu); }
.project-card:hover, .project-card:focus-visible { transform: translateX(8px); }
.project-thumb { position: relative; display: grid; place-items: center; width: 220px; aspect-ratio: 1.55; overflow: hidden; background: #101c2b; border: 1px solid rgba(185, 213, 255, .22); }
.project-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-menu); }
.project-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-card:hover .project-thumb img, .project-card:focus-visible .project-thumb img { transform: scale(1.06); }
.project-thumb.song img { object-position: center 38%; }
.project-thumb.art img { object-position: 77% center; }
.project-thumb.sampler img { object-position: 53% center; }
.project-thumb:has(img)::before { display: none; }
.project-thumb::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.16); }
.project-thumb strong { position: relative; font-size: 25px; font-weight: 300; letter-spacing: -.08em; }
.project-thumb.harmony { background: #1c2544; }
.project-thumb.song { background: #18334a; }
.project-thumb.art { background: #28314d; }
.project-thumb.sampler { background: #172d3c; }
.project-thumb.program { background: #132840; }
.project-thumb.program strong { font-size: 29px; letter-spacing: -.07em; }
.project-meta { display: block; color: #9eb4d5; font-size: 11px; letter-spacing: .14em; }
.project-name { display: block; margin-top: 13px; font-size: clamp(19px, 2vw, 28px); font-weight: 400; letter-spacing: -.045em; line-height: 1.25; }
.project-state { display: block; margin-top: 12px; color: #b2bfd6; font-size: 12px; }
.program-group { margin-top: 72px; }
.program-group .project-lane { min-height: 146px; }
.program-group .project-card { grid-template-columns: 110px minmax(0, 1fr); }
.program-group .project-thumb { width: 110px; aspect-ratio: 1; }
.program-group .project-name { font-size: clamp(17px, 1.8vw, 24px); }

/* 개별 프로젝트: 공개 자료가 아직 없어도 들어갈 수 있는 페이지 */
.detail-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 420px); gap: 8vw; align-items: start; }
.detail-title { margin: 20px 0 24px; font-size: clamp(42px, 6vw, 86px); font-weight: 300; letter-spacing: -.065em; line-height: 1.07; }
.detail-state { color: #b2bfd6; font-size: 14px; }
.detail-art { aspect-ratio: 1.12; display: grid; place-items: center; background: #14263e; border: 1px solid rgba(185,213,255,.2); }
.detail-art span { font-size: clamp(70px, 10vw, 150px); font-weight: 200; letter-spacing: -.1em; }
.detail-shelf { margin-top: 82px; border-top: 1px solid rgba(185,213,255,.33); padding-top: 18px; display: grid; grid-template-columns: 1fr 2fr; gap: 30px; }
.detail-shelf h2 { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: .14em; }
.detail-shelf p { margin: 0; color: #a9bbd7; font-size: 14px; }
.back-link { display: inline-block; margin-top: 55px; color: #b2bfd6; font-size: 12px; border-bottom: 1px solid rgba(185,213,255,.4); padding-bottom: 7px; }
.back-link:hover { color: #fff; }

/* EDUCATION: 비어 있는 자료실을 정직하게 표시 */
.education-preview { margin-top: 48px; display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr); min-height: 410px; border-top: 1px solid rgba(185,213,255,.3); border-bottom: 1px solid rgba(185,213,255,.3); overflow: hidden; }
.education-preview-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 28px 30px 28px 0; }
.education-preview-copy span { color: #a9bbdf; font-size: 11px; letter-spacing: .13em; }
.education-preview-copy strong { margin-top: auto; font-size: clamp(28px, 3.8vw, 58px); font-weight: 300; letter-spacing: -.05em; }
.education-preview-copy small { margin-top: 16px; color: #b2bfd6; font-size: 12px; }
.education-preview img { width: 100%; height: 410px; object-fit: cover; object-position: center top; border-left: 1px solid rgba(185,213,255,.18); }

/* ABOUT: 짧은 선언과 세 작업 영역 */
.about-statement { max-width: 1100px; margin: 0; font-size: clamp(42px, 6.6vw, 94px); font-weight: 300; line-height: 1.18; letter-spacing: -.065em; }
.about-statement em { font-style: normal; color: #b8c9eb; }
.about-title { margin: 60px 0 0; font-size: clamp(38px, 6vw, 86px); font-weight: 300; letter-spacing: -.065em; line-height: 1.12; }
.about-label { display: block; margin: 82px 0 28px; color: #a9bbdf; font-size: 11px; letter-spacing: .15em; }
.about-fields { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(185,213,255,.32); }
.about-field { min-height: 170px; padding: 26px 24px 22px 0; border-bottom: 1px solid rgba(185,213,255,.22); }
.about-field + .about-field { padding-left: 24px; border-left: 1px solid rgba(185,213,255,.16); }
.about-field span { display: block; color: #a9bbdf; font-size: 11px; }
.about-field strong { display: block; margin-top: 38px; font-size: clamp(20px, 2.2vw, 30px); font-weight: 300; letter-spacing: -.04em; }
.about-field small { display: block; margin-top: 11px; color: #b2bfd6; font-size: 12px; }

@media (max-width: 850px) {
  .section-head { align-items: start; flex-direction: column; margin-bottom: 48px; }
  .project-lane { grid-template-columns: minmax(0, 1fr); }
  .project-card { padding-right: 0; }
  .project-lane { grid-template-columns: minmax(0, 1fr); }
  .detail-top { grid-template-columns: 1fr; }
  .detail-art { width: min(100%, 420px); }
}
@media (max-width: 600px) {
  .section-main { padding: 45px 0 65px; }
  .section-head { margin-bottom: 38px; }
  .project-card { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; }
  .project-thumb { width: 128px; }
  .project-thumb strong { font-size: 20px; }
  .project-name { margin-top: 8px; }
  .program-group .project-card { grid-template-columns: 82px minmax(0, 1fr); }
  .program-group .project-thumb { width: 82px; }
  .education-preview { grid-template-columns: 1fr; }
  .education-preview-copy { min-height: 180px; }
  .education-preview img { height: 300px; border-left: 0; border-top: 1px solid rgba(185,213,255,.18); }
  .about-label { margin-top: 60px; }
  .about-fields { grid-template-columns: 1fr; }
  .about-field { min-height: 130px; }
  .about-field + .about-field { padding-left: 0; border-left: 0; }
  .about-field strong { margin-top: 22px; }
}