/* ===== 경계주의 졸업전시 사이트 공통 스타일 ===== */
/* 본문: 프리텐다드 / 영문·메뉴: 명조(세리프) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&display=swap');

@font-face{font-family:'Pretendard';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Pretendard-Regular.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Pretendard-Bold.woff2') format('woff2');}

:root{
  --bg:#0a0a0a;
  --fg:#e5e5e5;
  --dim:#9a9a9a;
  --serif:'Noto Serif KR','Times New Roman',serif;
  --sans:'Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);min-height:100vh;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* ===== 상단바 ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:22px 48px 18px;
  background:linear-gradient(to bottom,rgba(10,10,10,.92),rgba(10,10,10,.6) 70%,transparent);
}
.topbar .brand{display:flex;align-items:flex-start;gap:14px;}
.topbar .brand img{height:34px;width:auto;}
.topbar .brand .sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--dim);
  padding-top: 2px;
}
.gnb{display:flex;gap:46px;padding-top:8px;}
.gnb a{
  font-family:var(--serif);font-size:15px;letter-spacing:.04em;
  color:#6f6f6f;transition:color .25s;
}
.gnb a:hover{color:#fff;}
.gnb a.active{color:#fff;}

/* ===== 공통 레이아웃 ===== */
.page{padding-top:110px;}
.container{max-width:1200px;margin:0 auto;padding:0 40px;}

/* ===== 홈 ===== */
.home-hero{position:relative;width:100%;height:100vh;overflow:hidden;background:#000;}
.home-hero video,
.home-hero img.hero-fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}

/* ===== 하단 바닥 푸터 ===== */
.footer{margin-top:120px;position:relative;}
.footer .footer-info{
  text-align:center;padding:0 24px 60px;position:relative;z-index:2;
}
.footer .footer-line{
  width:min(1000px,88%);margin:0 auto 54px;border:none;border-top:1px solid #555;
}
.footer .f-date{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:.02em;color:#fff;}
.footer .f-place{margin-top:18px;font-size:clamp(14px,1.6vw,19px);font-weight:700;color:#eee;}
.footer .f-desc{margin-top:14px;font-size:clamp(11px,1.2vw,14px);color:#cfcfcf;}
.footer .footer-bg{width:100%;}
.footer .footer-bg img{width:100%;height:auto;}

/* ===== ABOUT ===== */
.about-head{text-align:center;margin-top:70px;}
.about-head h2{font-size:clamp(18px,2.2vw,26px);font-weight:700;}
.about-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,30px);margin-top:18px;}
.about-head .meta{margin-top:30px;font-size:clamp(13px,1.4vw,16px);line-height:1.9;color:#ddd;}
.about-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;
  max-width:1060px;margin:90px auto 0;
}
.about-cols p{font-size:14px;line-height:2;color:#d6d6d6;margin-bottom:34px;}
.about-cols p.sign{color:#9a9a9a;}
.divider{width:min(1100px,86%);margin:110px auto;border:none;border-top:1px solid #4a4a4a;}
.poster-sec{text-align:center;}
.poster-sec h3{font-size:18px;font-weight:700;}
.poster-sec .en{font-family:var(--serif);color:#bdbdbd;margin-top:6px;font-size:15px;}
.poster-sec .poster-img{width:min(390px,78%);margin:46px auto 0;}
.poster-caption{max-width:980px;margin:70px auto 0;text-align:center;font-size:13.5px;line-height:2.3;color:#d9d9d9;}
.committee{text-align:center;margin-top:40px;}
.committee h3{font-size:19px;font-weight:700;margin-bottom:60px;}
.committee .chairs{display:flex;justify-content:center;gap:64px;margin-bottom:70px;}
.committee .chairs .c b{display:block;font-size:14px;margin-bottom:12px;}
.committee .chairs .c span{font-size:14px;color:#ddd;}
.committee .heads{display:flex;justify-content:center;flex-wrap:wrap;gap:56px;}
.committee .heads .c b{display:block;font-size:14px;margin-bottom:12px;}
.committee .heads .c span{font-size:14px;color:#ddd;}
.dept-list{
  width: 100%;
  max-width: 1000px;
  margin: 120px auto 0;
  display: flex;
  flex-direction: column;
  gap: 64px;  position: relative;
  left: 60px;
}

.dept{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.dept .d-desc b{display:block;font-size:14px;margin-bottom:14px;}
.dept .d-desc p{font-size:13px;line-height:1.95;color:#cfcfcf;}
.dept .d-members p{font-size:13px;line-height:1.9;color:#d9d9d9;margin-bottom:10px;}
.thanks{text-align:center;margin-top:300px;}
.thanks h3{font-size:19px;font-weight:700;margin-bottom:66px;}
.thanks .t-grid{max-width:880px;margin:0 auto;display:grid;grid-template-columns:180px 1fr;gap:26px 40px;text-align:left;}
.thanks .t-grid .k{font-size:13.5px;color:#eee;}
.thanks .t-grid .v{font-size:13.5px;line-height:2;color:#d9d9d9;}
.map-sec{text-align:center;margin-top:300px;}
.map-sec h3{font-size:19px;font-weight:700;margin-bottom:20px;}
.map-sec img{width:min(900px,90%);margin:0 auto;}

/* 스크롤 리빌 (About: 글자 스르륵 나타남) */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s ease,transform 1.1s ease;}
.reveal.show{opacity:1;transform:none;}

/* ===== PROJECT 공통 ===== */
.proj-title{width:min(1080px,80%);margin:70px auto 0;}
.proj-title img{width:100%;margin-top:-6%;margin-bottom:-8%;} /* ← 과목명 이미지 아래 빈 여백 잘라내기 (숫자가 클수록 더 가까워짐) */
.proj-intro{max-width:860px;margin:24px auto 0;text-align:center;font-size:13.5px;line-height:2.1;color:#d6d6d6;padding:0 24px;}
.proj-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:54px;}
.proj-tabs a{
  min-width:150px;text-align:center;padding:13px 22px;
  border:1px solid #777;font-size:13px;color:#ddd;background:transparent;
  transition:background .2s,color .2s;
}
.proj-tabs a.on{background:#fff;color:#111;border-color:#fff;font-weight:600;}
.proj-tabs a:hover{background:#fff;color:#111;}
.works{
  max-width:1200px;margin:90px auto 0;padding:0 36px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:48px 22px;
}
.work-card .thumb{aspect-ratio:173/221;overflow:hidden;background:#161616;}
.work-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.work-card:hover .thumb img{transform:scale(1.04);}
.work-card .cap{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px;}
.work-card .cap .t b{display:block;font-size:12.5px;font-weight:600;color:#fff;}
.work-card .cap .t span{display:block;font-size:11px;color:#bdbdbd;margin-top:4px;}
.work-card .cap .face{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;}
.work-card .cap .face img{width:100%;height:100%;object-fit:cover;}

/* ===== 작품 상세 (1,2,3,4) ===== */
.detail-designer{
  max-width:1100px;margin:110px auto 0;padding:0 36px;
  display:grid;grid-template-columns:minmax(260px,390px) 1fr;gap:70px;align-items:center;
}
.detail-designer .dface{width:100%;}
.detail-designer h3{font-family:var(--serif);font-size:26px;font-weight:500;letter-spacing:.04em;}
.detail-designer .dname{margin-top:34px;font-size:21px;font-weight:700;}
.detail-designer .dname .en{font-size:16px;font-weight:400;color:#bdbdbd;margin-left:12px;}
.detail-designer .dinsta{margin-top:14px;font-size:17px;color:#cfcfcf;}
.detail-proj{max-width:1100px;margin:120px auto 0;padding:0 36px;}
.detail-proj h3{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:.04em;}
.detail-proj .pdesc{margin-top:26px;font-size:17px;color:#eee;}
.detail-proj .pimg{margin-top:60px;}

/* ===== ALUMNI ===== */
.alumni-title{width:min(1400px,94%);margin:90px auto 0;}
.alumni-sec{text-align:center;margin-top:120px;}
.alumni-sec .en-head{font-family:var(--serif);font-size:clamp(18px,2.2vw,26px);}
.alumni-sec .invite{font-family:var(--serif);font-size:clamp(22px,3vw,34px);line-height:1.8;margin-top:70px;}
.alumni-body{max-width:760px;margin:90px auto 0;text-align:center;font-size:14px;line-height:2.1;color:#ddd;padding:0 24px;}
.alumni-body p{margin-bottom:30px;}
.alumni-sign{text-align:center;margin-top:70px;color:#bdbdbd;font-size:13.5px;}
.alumni-info{max-width:980px;margin:130px auto 0;padding:0 36px;display:flex;flex-direction:column;gap:70px;}
.alumni-row{display:grid;grid-template-columns:300px 1fr;gap:40px;}
.alumni-row .k{font-family:var(--serif);font-size:18px;font-weight:600;}
.alumni-row .k.sans{font-family:var(--sans);font-weight:700;font-size:17px;}
.alumni-row .v{font-size:14px;line-height:1.9;color:#ddd;}
.alumni-row .v b{display:block;font-family:var(--serif);font-size:16px;margin-bottom:12px;color:#fff;}
.alumni-row .v ul{list-style:none;}
.alumni-row .v ul li{font-size:13.5px;line-height:2;color:#d6d6d6;}
.alumni-row .v ul li::before{content:'▪ ';font-size:10px;}
.alumni-map{width:min(560px,90%);margin:40px auto 0;}
.alumni-part{margin-bottom:46px;}

/* ===== DESIGNER (학생 프로필) ===== */
.designer-title{width:min(1300px,100%);margin:70px auto 0;}
.designer-title img{width:100%;margin-top:-6%;margin-bottom:-8%;} /* ← 학생프로필 이미지 위·아래 빈 여백 잘라내기 (프로젝트 페이지와 같은 방식) */
.designer-sub{text-align:center;font-family:var(--serif);font-size:18px;margin-top:34px;color:#eee;}
.profiles{
  max-width:1160px;margin:90px auto 0;padding:0 36px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:70px 44px;
}
.profile .pface{overflow:hidden;aspect-ratio:217/219;background:#161616;}
.profile .pface img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
/* hover: 얼굴 살짝 커짐 */
.profile:hover .pface img{transform:scale(1.07);}
.profile .pname{margin-top:20px;font-size:15px;font-weight:700;}
.profile .pname .en{font-size:12.5px;font-weight:400;color:#bdbdbd;margin-left:8px;}
.profile .pcontact{margin-top:10px;font-size:14px;color:#9a9a9a;transition:color .25s;}
/* hover: 인스타/이메일 흰색 */
.profile:hover .pcontact{color:#fff;}

/* ===== 반응형 ===== */
@media (max-width:1100px){
  .works{grid-template-columns:repeat(4,1fr);}
  .profiles{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .topbar{padding:16px 22px;}
  .gnb{gap:22px;}
  .gnb a{font-size:12px;}
  .topbar .brand .sub{display:none;}
  .about-cols{grid-template-columns:1fr;gap:0;}
  .dept{grid-template-columns:1fr;gap:20px;}
  .works{grid-template-columns:repeat(3,1fr);gap:34px 16px;}
  .profiles{grid-template-columns:repeat(2,1fr);gap:50px 26px;}
  .detail-designer{grid-template-columns:1fr;gap:40px;}
  .alumni-row{grid-template-columns:1fr;gap:16px;}
  .thanks .t-grid{grid-template-columns:120px 1fr;}
}
@media (max-width:520px){
  .works{grid-template-columns:repeat(2,1fr);}
  .profiles{grid-template-columns:repeat(2,1fr);}
}

/* ABOUT: 본문을 페이지 중앙에 정렬 */
.about-cols { justify-content:center; text-align:center; }
.about-cols > div { min-width:0; }
.about-cols p { text-align:center; }

/* ABOUT screenshot-aligned layout: centered sections, left-aligned body columns */
.about-head{margin-top:70px;text-align:center;}
.about-cols{width:min(1120px,88%);max-width:1120px;margin:105px auto 0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:110px;text-align:left;}
.about-cols p,.about-cols p.sign{text-align:left;}
.committee{max-width:1000px;margin:70px auto 0;text-align:center;}
.committee .chairs{gap:28px;margin-bottom:45px;}
.committee .heads{gap:48px;}
.dept-list{max-width:900px;margin:145px auto 0;gap:58px;}
.dept{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:85px;align-items:start;}
.dept .d-members{align-self:center;}
.thanks .t-grid {
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 150px max-content;
  column-gap: 35px;
  row-gap: 30px;
  align-items: start;
  text-align: left;
}

.thanks .t-grid .k,
.thanks .t-grid .v {
  margin: 0;
  padding: 0;
  line-height: 1.8;
  align-self: start;
}
@media(max-width:760px){.about-cols{width:90%;grid-template-columns:1fr;gap:0;margin-top:65px}.dept-list{width:90%;gap:48px}.dept{grid-template-columns:1fr;gap:14px}.dept .d-members{align-self:start}.committee .heads{gap:24px}.thanks .t-grid{width:90%;grid-template-columns:1fr;gap:8px}}

/* 2026-10-19: 요청한 영역만 위치 정렬 (글자 정렬/기존 줄바꿈 유지) */
.work-card .cap .face{display:none;}
.detail-proj{max-width:856px;} /* 작품 784px + 좌우 여백 36px씩 */
.detail-proj .pimg img{margin-inline:auto;}
@media (min-width:821px){
  .detail-designer{
    width:fit-content;
    max-width:100%;
    grid-template-columns:390px max-content;
    margin-inline:auto;
  }
  .alumni-info{
    width:max-content;
    max-width:100%;
    margin-inline:auto;
  }
  .alumni-row{grid-template-columns:300px max-content;}
}

/* 제공된 브랜드·커뮤니케이션·영상 시안의 작품 목록 */
.project-reference .work-card .cap{justify-content:center;text-align:center;}
.project-reference .work-card .cap .t{width:100%;}
.project-reference .caption-reference{width:100%;max-width:245px;margin-inline:auto;mix-blend-mode:screen;}
@media(min-width:821px){
  .project-reference .works{column-gap:52px;}
}

/* 작품 상세페이지: 공동 제작자 각각의 프로필을 표시 (단독 제작자 레이아웃은 유지) */
.detail-designer.has-multiple-designers {
  width: fit-content; /* 2인 프로필 묶음 전체를 가운데 정렬 */
  max-width: 1100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.detail-designers-heading {
  margin-bottom: 35px;
}
.detail-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 390px)); /* 칸 너비 = 사진 너비 */
  gap: 48px;
}
.detail-person .dface {
  max-width: 390px;
}
.detail-person .dname {
  margin-top: 20px;
}
.detail-person .dinsta {
  margin-top: 8px;
  overflow-wrap: anywhere;
}
.detail-designer .photo-not-available {
  background: #191919;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  color: #aaa;
}
@media (max-width: 600px) {
  .detail-people { grid-template-columns: 1fr; gap: 36px; }
}

/* 썸네일·상세 이미지 파일이 아직 없을 때 표시 */
.work-card .thumb.is-empty,.detail-proj .pimg.is-empty{display:flex;align-items:center;justify-content:center;background:#181818;color:#909090;font-size:12px;letter-spacing:-.2px;}
.work-card .thumb.is-empty::after,.detail-proj .pimg.is-empty::after{content:'이미지 준비 중';}
.detail-proj .pimg.is-empty{aspect-ratio:4/3;}

/* ABOUT 상단 배경 이미지 (images/about-top.png) */
.about-head { position: relative; z-index: 0; margin-top: 110px; } /* 글자 전체를 아래로 (원래 70px) */
.about-top-bg {
  position: absolute; z-index: -1;
  top: -220px;              /* 화면 맨 위까지 올림 (.page 위 여백 110px + .about-head 위 여백 110px) */
  height: 400px;            /* 그래픽 세로 길이 (ALUMNI·DESIGNER와 같은 값) */
  left: 0; right: 0;        /* 화면 가로 전체 */
  pointer-events: none;
}
.about-top-bg img { width: 100%; height: 100%; object-fit: cover; }

/* ALUMNI·DESIGNER 상단 배경 이미지 (ABOUT과 같은 images/about-top.png) */
.page.has-top-bg { position: relative; z-index: 0; }
.page-top-bg {
  position: absolute; z-index: -1;
  top: 0; left: 0; right: 0;   /* 화면 맨 위, 가로 전체 */
  height: 400px;               /* 그래픽 세로 길이 (ABOUT과 같은 높이) */
  pointer-events: none;
}
.page-top-bg img { width: 100%; height: 100%; object-fit: cover; }