html {
  overflow-y: scroll;
}
/* ---------- 폰트 (가이드라인) ----------
   한글 기본: 펴진고딕 Bold / 자간 -10
   영문 제목: 페이퍼로지 9 Black
   ※ 기본 폰트가 Bold라서 굵기 지정이 어떻든 전부 Bold 파일로 나오게 함 */
@font-face {
    font-family: 'PyeojinGothic';
    src: url('../fonts/PyeojinGothic-Bold.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'PyeojinGothic Regular';
    src: url('../fonts/PyeojinGothic-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('../fonts/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('../fonts/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('../fonts/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('../fonts/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
  /* ── 글자 크기 기준 (사이트 전체) ──
     Display 29 · Lead 18 · Body 16 · Small 14 · Caption 11 */
  --fs-display: 29px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 11px;
  --font-kr: 'PyeojinGothic', sans-serif;               /* Bold (기본) */
  --font-kr-regular: 'PyeojinGothic Regular', sans-serif; /* 400 */
  --orange: #ef7425;  /* CMYK M65 Y97 (FOGRA39 변환값) – 주황은 전부 이거 */
  --bg: #f7fcfe;      /* CMYK C2 */
  --black: #414445;   /* CMYK C10 K90 (FOGRA39 변환값) – 검정은 전부 이거 */
  --font-en-title: 'Paperlogy', 'PyeojinGothic', sans-serif;
  --tracking: -0.01em; /* 자간 -10 = -10/1000em */
}

/* 영문 제목 (Fold to Dot) */
.title-en {
  font-family: var(--font-en-title);
  font-weight: 900;
  letter-spacing: var(--tracking);
}

/* ---------- 기본 리셋 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  font-family: var(--font-kr);
  font-weight: 700;
  letter-spacing: var(--tracking);
  color: var(--black);
  line-height: 1.6;
}

/* 버튼·입력창도 기본 폰트 따르게 */
button, input, textarea, select {
  font-family: inherit;
  letter-spacing: inherit;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: var(--font-kr);
  cursor: pointer;
  border: none;
  background: none;
}

/* ---------- 헤더 / 네비게이션 ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;

  width: 100%;
  height: 110px;

  background: var(--bg);
  z-index: 1000;

  padding: 20px 40px;
}

.logo-badge {
  position: absolute;

  left: 40px;

  top: 20px;
}

.logo-badge img {
  height: 70px;
  display: block;
}

.main-nav {

  position: absolute;

  top: 35px;

  right: 40px;

}

.main-nav ul {

  display: flex;

  width: 100%;

  align-items: center;

  list-style: none;

  font-size: 16px;
  gap: 45px;

}

/* 메뉴 각각의 자리를 고정 */
.main-nav li {
  height: 30px;
  width: 110px; /* 고정 너비 추가 */

  display: flex;
  justify-content: center;
  align-items: center;
}

/* 글자 */
.main-nav a {
  position: relative;
  display: block;

  text-align: center;

  padding: 2px 6px;

  font-family: var(--font-kr);
  font-weight: 400;

  white-space: nowrap;
}

/* 선택된 메뉴 – 아래 '메뉴 도형' 섹션에서 처리 */



/* ---------- 히어로 / 어바웃 비주얼 ---------- */
.hero-visual {
  width: 100%;
  background: var(--black);
}

/* =========================================
   ABOUT 포스터 Hover
   ========================================= */

.about-visual {
  width: 100%;
  height: 650px;

  margin-top: 110px;

  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg);

  overflow: hidden;
}


/* 포스터 전체 영역 */
.poster-hover {
  position: relative;

  max-width: 90%;
  max-height: 95%;

  cursor: none;
}


/* 포스터 */
.poster-hover img {
  display: block;

  max-width: 100%;
  max-height: 620px;

  object-fit: contain;

  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

/* =========================================
   ABOUT 포스터 Hover
   ========================================= */

.about-visual {
  width: 100%;
  height: 650px;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden;
}


/* 포스터 전체 */
.poster-hover {
  position: relative;

  max-width: 90%;
  max-height: 95%;

  overflow: hidden;
}


/* 포스터 이미지 */
.poster-hover img {
  display: block;

  max-width: 100%;
  max-height: 620px;

  object-fit: contain;

  transition: filter 0.4s ease;
}


/* =========================================
   포스터 위 정보
   ========================================= */

.poster-info {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 80%;

  transform: translate(-50%, -50%);

  text-align: center;

  background: var(--bg);

  opacity: 0;

  z-index: 2;

  transition: opacity 0.4s ease;
}

.poster-info h2 {
  margin: 0 0 18px;

  font-size: 24px;
  font-weight: 600;
}

.poster-info p {
  margin: 0;

  font-size: 15px;
  line-height: 1.7;
}

.poster-info .poster-date {
  margin-top: 20px;

  font-size: 13px;
}



/* ---------- 스크롤 인트로 (화면 꽉 채움) ---------- */
.scroll-intro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);

  padding: 80px 40px;
}

.scroll-intro-inner {
  max-width: 640px;
  text-align: center;
}


/* 단어 하나하나 */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.7s ease, transform 0.4s ease-out;
}

.scroll-intro-inner.in-view .word {
  opacity: 1;
  transform: translateY(0);
}

.scroll-intro-inner.in-view {
  opacity: 1;
  transform: translateY(0);
}

.scroll-intro-inner h1 {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 24px;
  letter-spacing: var(--tracking);
}

.scroll-intro-inner p {
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
}

.bold-text {
  font-weight: 700;
  color: var(--black);
}
/* ---------- 날짜/시간/장소 섹션 (화면 꽉 채움) ---------- */
.info-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);

  padding: 80px 40px;
}

.info-list {
  max-width: 700px;
}

.info-row {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
  font-size: 18px;
  color: var(--black);
  line-height: 1.8;
}

.info-label {
  flex-shrink: 0;
  width: 70px;
  font-weight: 700;
  font-size: 18px;
  color: var(--black);
}

.info-sub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-sub-row {
  display: flex;
  gap: 16px;
}

.info-sub-label {
  flex-shrink: 0;
  width: 100px;
  color: var(--black);
}

.committee-section {
  padding: 100px 40px;
  text-align: center;
}

.committee-title {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 40px;
}

.signature {
  display: none; /* committee-title로 대체하니 숨김, 안 쓰면 이 줄 지워도 됨 */
}

.committee {
  font-family: var(--font-kr);
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
  display: inline-block;
}

.committee-team {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 400;
  color: var(--black);
  line-height: 1.8;
}

.team-label {
  flex-shrink: 0;
  font-weight: 700;
  width: 70px;
  color: var(--black);
}

/* =========================================
   Project 페이지 - 2단 레이아웃
   ========================================= */

.project-layout {
  display: flex;
  gap: 60px;
  max-width: 95%;
  margin: 110px auto 0; /* 헤더 높이만큼 여백 */
  padding: 40px;
  align-items: flex-start;
  color: var(--black);
}

/* 왼쪽 고정 정보 박스 */
.project-info {
  width: 400px;
  flex-shrink: 0;
}


.project-info-panel.active {
  display: block;
}


/* 아코디언 전체 */
.project-accordion {
  list-style: none;
}

/* 카테고리명 버튼 */
.project-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #999;
  padding: 16px 0;
}

.project-item.active .project-tab {
  color: var(--black);
  font-weight: 700;
}

/* 선택된 항목의 테이프 배경 */
.project-item.active .project-tab {
  display: inline-block;
  width: auto;
  font-size: 18px;
  background: var(--orange);
  color: var(--black);
  padding: 8px 14px;
  transform: rotate(-2deg);
  margin: 16px 0 8px;
}

/* 설명 영역 - 평소엔 접혀있음 */
.project-detail {
  display: none;
  padding-bottom: 20px;
}

.project-item.active .project-detail {
  display: block;
}

.project-info-row {
  display: flex;
  gap: 50px;
  font-size: 13px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.project-info-row .info-label {
  font-weight: 700;
  width: 60px;
  font-size: 13px;
}

.project-info-desc {
  font-size: 13px;
  color: var(--black);
  line-height: 1.7;
  margin-bottom: 10px;
}

.project-info-row {
  display: flex;
  gap: 30px;
  font-size: 13px;
  margin-bottom: 20px;
}

.project-info-row .info-label {
  font-weight: 700;
  width: 70px;
}

.project-info-desc {
  font-size: 13px;
  color: var(--black);
  line-height: 1.7;
  margin-bottom: 10px;
}

/* 카테고리 전환 목록 (아래쪽 심플 텍스트 메뉴) */


.project-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #999;
  padding: 8px 0;
}

.project-tab.active {
  display: block; /* 이미 위쪽 패널에 표시 중이니 목록에선 숨김 */
  color: #ccc; /* 지금 선택된 건 흐리게 표시 */
  cursor: default;
}

/* 오른쪽 작품 그리드 */
.project-works {
  flex: 1;
}

.work-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.work-grid.active {
  display: grid;
}

.work-card {
  display: block;
}

.work-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  margin-bottom: 8px;
}

.work-title {
  font-size: 13px;
  font-weight: 600;
}

.work-designer {
  font-size: 12px;
  color: #888;
}

/* 반응형: 좁아지면 세로로 쌓이게 */
@media (max-width: 900px) {
  .project-layout {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 30px;
  }
  .project-info {
    width: 100%;
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ---------- Designer 페이지 (자음 필터 + 그리드) ---------- */
.designer-filter {
  padding: 40px 40px 0;
  margin-top: 110px;
}

.filter-btn {
  font-size: 13px;
  padding: 6px 10px;
  color: #666;
}

.filter-btn.active {
  color: var(--black);
  font-weight: 600;
}

.consonant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 12px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 8px 0;
}

.designer-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  padding: 50px;
  row-gap: 50px;
  /* justify-items: center; ← 이 줄 삭제 */
}

.designer-photo {
  --fold-color: var(--orange); /* 접힌 뒷면 색 – 여기만 바꾸면 돼 */

  position: relative;
  width: 90%;
  aspect-ratio: 3 / 4;
  background: #d9d9d9;
  overflow: hidden;
  margin: 0 auto;
  container-type: inline-size;

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.4s cubic-bezier(0.25, 0.8, 0.3, 1);
}

/* 접힌 뒷면 */
.designer-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    var(--fold-color);

  clip-path: polygon(0 100%, 100% 100%, 100% 100%);
  transition: clip-path 0.4s cubic-bezier(0.25, 0.8, 0.3, 1);
}

.designer-card:hover .designer-photo {
  clip-path: polygon(0 0, 100% 0, 100% 78.75%, 0 100%);
}

.designer-card:hover .designer-photo::after {
  clip-path: polygon(0 100%, 100% 78.75%, 85.1% 60.7%);
}

.designer-tape {
  position: absolute;
  z-index: 1; /* 접힌 면 위로 올리기 */
  /* 접힌 쐐기의 중심축(왼쪽 아래 꼭짓점 → 반대편 변 가운데) 위에 놓음 */
  left: 62.9%;
  top: 79.4%;
  transform: translate(-50%, -50%) rotate(-23.6deg); /* 접힌 종이 기울기 */

  font-size: clamp(12px, 8cqw, 20px);
  font-weight: 700;
  line-height: 1;
  color: var(--black);
  white-space: nowrap;

  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.designer-card:hover .designer-tape {
  opacity: 1;
  transition: opacity 0.25s ease 0.2s; /* 접히는 중간쯤 지나서 나타남 */
}

/* =========================================
   방명록 보드
   ========================================= */

.board-section {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  margin-top: 110px;
  overflow: hidden;
}

.board {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 110px);
  transition: height 0.3s ease; /* 늘어날 때 부드럽게 */
}

/* 보드 위 메모 하나하나 */
.guest-note {
  position: absolute;
  width: 190px;
  aspect-ratio: 1 / 1; /* 정사각형 색종이 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--orange);
  color: var(--black);
  padding: 16px 18px;
  font-family: var(--font-kr);
  animation: dropIn 0.4s ease-out;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.guest-note.note-blue {
  background: var(--blue);
}

.guest-note .note-message {
  flex: 1;
  overflow: hidden;
}

.guest-note.dragging {
  z-index: 200;
  cursor: grabbing;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  transition: none; /* 드래그 중엔 애니메이션 끊기지 않게 */
}

.guest-note:hover {
  z-index: 100;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.guest-note .note-to {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.guest-note .note-message {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  margin-bottom: 10px;
}

.guest-note .note-from {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.guest-note .note-message {
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

@keyframes dropIn {
  from {
    opacity: 0;
    transform: translateY(-30px) rotate(var(--rot, 0deg)) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
  }
}

/* 플러스 버튼 */
.add-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;

  width: 64px;
  height: 64px;
  border-radius: 50%;

  background: var(--bg);
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  font-size: 30px;
  font-weight: 300;
  color: var(--black);
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 500;
  transition: transform 0.2s ease;
}

.add-btn:hover {
  transform: scale(1.08);
}

/* =========================================
   방명록 작성 모달
   ========================================= */

.guest-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

.guest-modal.open {
  display: flex;
}

.guest-modal-box {
  position: relative;
  background: var(--bg);
  width: 320px;
  max-width: 90%;
  padding: 32px 24px 24px;
}

.guest-modal-box h3 {
  font-size: 16px;
  margin-bottom: 20px;
}

.guest-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 20px;
  line-height: 1;
  color: #666;
  background: none;
  border: none;
  cursor: pointer;
}

.guest-modal-box input,
.guest-modal-box textarea {
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
}

.guest-modal-box textarea {
  height: 90px;
  resize: vertical;
}

.guest-submit {
  width: 100%;
  background: var(--orange);
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
}

/* ---------- 푸터 ---------- */
.site-footer {
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* ---------- 반응형 (모바일) ---------- */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .main-nav ul {
    gap: 16px;
    font-size: 13px;
  }

  .hero-visual,
  .about-visual {
    height: 320px;
  }

  .project-columns {
    grid-template-columns: 1fr;
  }

  .designer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



* {
  cursor: none !important;
}

.custom-cursor {
  width: 20px;
  height: 20px;
  background-color: #ffffff; /* 커서 색상 */
  border-radius: 50%;       /* 완전한 원으로 만들기 */
  position: fixed;          /* 뷰포트 기준으로 위치 고정 */
  top: 0;
  left: 0;
  pointer-events: none;     /* 커서가 클릭 이벤트를 방해하지 않도록 설정 */
  transform: translate(-50%, -50%); /* 중심점을 마우스 끝으로 맞춤 */
  transition: transform 0.1s ease-out; /* 부드러운 움직임을 원할 때 (생략 가능) */
  z-index: 2147483647;      /* 팝업·로딩 위에서도 항상 최상단 */
  /* 2. 테두리선(두께 스타일 색상) 설정 */
  border: 2px solid var(--black); 
}


/* =========================================
   디자이너 상세 팝업
   ========================================= */

.designer-modal {
  display: none !important;

  position: fixed !important;
  top: 0 !important;
  left: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background: rgba(0, 0, 0, 0.5) !important;

  z-index: 99999 !important;

  align-items: center;
  justify-content: center;
}

.designer-modal.open {
  display: flex !important;
}


/* =========================================
   흰색 팝업 박스
   ========================================= */

.designer-modal-box {
  position: relative;

  width: 650px;
  height: 390px;

  max-width: 90vw;
  max-height: 85vh;

  box-sizing: border-box;

  padding: 54px 52px 48px;

  display: flex;

  text-align: left;

  overflow: visible;

  font-family: var(--font-kr);
}


/* =========================================
   닫기 버튼
   ========================================= */

.designer-modal-close {
  position: absolute;

  top: 14px;
  right: 17px;

  width: 24px;
  height: 24px;

  padding: 0;

  border: none;
  background: none;

  font-size: 24px;
  font-weight: 300;
  line-height: 1;

  color: #ffffff;

  cursor: pointer;

  z-index: 10;
}



/* =========================================
   왼쪽 사진
   ========================================= */

.designer-modal-photo-wrap {
  position: relative;

  width: 230px;
  height: 300px;

  flex-shrink: 0;
}


.designer-modal-photo {
  position: relative;

  width: 230px;
  height: 300px;

  margin: 0;

  background: #d9d9d9;

  background-size: cover;
  background-position: center;

  overflow: visible;
}


/* =========================================
   주황색 테이프
   ========================================= */

.designer-modal-name {

  font-family: var(--font-kr);
  position: absolute;

  bottom: -22px;
  left: 50%;

  display: inline-block;

  font-size: 20px;
  font-weight: 700;

  color: var(--black);

  background: var(--orange);

  padding: 7px 12px;

  white-space: nowrap;

  transform: translateX(-50%) rotate(-8deg);

  z-index: 5;
  width: max-content;
  white-space: nowrap;

  
}


/* =========================================
   오른쪽 내용
   ========================================= */

.designer-modal-content {

  
  width: 100%;
  height: 300px;

  margin-left: 30px;

  display: flex;
  flex-direction: column;

  min-width: 0;

  flex: none;
}

/* =========================================
   이름 / 연락처
   ========================================= */

.designer-info {
  margin: 0;
}


.designer-modal-name-en {
  margin: 0 0 13px 0;

  font-size: 25px;
  font-weight: 700;

  line-height: 1.1;

  color: #ffffff;
}


.designer-info-row {
  display: flex;
  align-items: baseline;

  margin-bottom: 10px;

  font-size: 13px;
  line-height: 1.4;

  color: #ffffff;
}


.designer-info-label {
  width: 65px;

  font-weight: 700;
}


.designer-info-value {
  font-weight: 500;
}


/* =========================================
   프로젝트 1 / 2
   ========================================= */

.designer-projects {
  margin-top: auto;

  display: flex;
  gap: 18px;

  align-items: flex-end;
}

.designer-project {
  width: 125px;
}

.designer-project h3 {
  margin: 0 0 7px 0;

  font-size: 14px;
  font-weight: 600;

  line-height: 1.2;

  color: #ffffff;
}

.designer-project-image {
  width: 125px;
  height: 115px;

  background: #d9d9d9;

  background-size: cover;
  background-position: center;
}


/* 기존 intro는 사용하지 않음 */

.designer-modal-intro {
  display: none;
}

/* =========================================
   모바일 햄버거 메뉴
   ========================================= */

.menu-toggle {
  display: none; /* 데스크탑에선 숨김 */

  position: absolute;
  top: 20px;
  right: 40px;

  width: 32px;
  height: 24px;

  flex-direction: column;
  justify-content: space-between;

  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 열렸을 때 X 모양으로 변형 */
.menu-toggle.open span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

@media (max-width: 768px) {

  .menu-toggle {
    display: flex;
  }

  /* 기존 main-nav 위치 규칙 무시하고 드롭다운으로 */
  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;

    width: 100%;
    height: 100vh;

    background: var(--bg);

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(-100%);
    transition: transform 0.3s ease;

    z-index: 1000;
  }

  .main-nav.open {
    transform: translateY(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 32px;
  }

  .main-nav li {
    width: auto;
    height: auto;
  }

}

/* =========================================
   400(Regular) 적용: 전시설명 본문 / 졸준위 이름 / 전시 정보 내용
   (라벨은 Bold 유지)
   ========================================= */
.scroll-intro-inner .scroll-text,
.committee-team,
.info-row {
  font-family: var(--font-kr-regular);
  font-weight: 400;
}

.scroll-text .bold-text,
.committee-team .team-label,
.info-row .info-label {
  font-family: var(--font-kr);
  font-weight: 700;
}


/* =========================================
   로딩 화면 – 종이접기 4단계 반복
   ========================================= */
:root {
  --blue: #4dc3f1; /* CMYK C63 (FOGRA39 변환값) */
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.page-loader.done {
  opacity: 0;
  visibility: hidden;
}

/* 로딩 – 로고처럼 점 · 점선 · 점
   점선이 왼쪽 점 → 오른쪽 점으로 한 칸씩 또로롱 가는 걸 반복 */
.load-line {
  display: flex;
  align-items: center;
  color: var(--black);       /* 전체 약 168px = 기존의 2/3 */
}

.load-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--black);   /* 커서랑 같은 흰 점 + 검정 테두리 */
}
.load-dot-start { margin-right: 7px; }
.load-dot-end   { margin-left: 1px; }  /* 점선 마지막 빈칸 6px + 1px = 7px */

/* 점선 11칸: 칸 6px + 간격 6px = 12px × 11 = 132px (한 칸씩 정확히 끊김) */
.load-dash {
  flex-shrink: 0;
  width: 132px;
  height: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px);
  animation: dashRun 1s infinite;
}

/* 한 칸씩 채워지고(0~75%), 잠깐 다 이어진 채로 멈췄다가 다시 처음부터 */
@keyframes dashRun {
  0%   { clip-path: inset(0 100% 0 0); animation-timing-function: steps(11, end); }
  75%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}



/* =========================================
   커서 상태: 기본 흰색 → 클릭 가능한 곳 파랑 → 누르는 중 주황
   ========================================= */
.custom-cursor {
  border-color: var(--black);
  transition: transform 0.1s ease-out, background-color 0.15s ease;
}
.custom-cursor.is-hovering {
  background-color: var(--blue);
}
.custom-cursor.is-pressed {
  background-color: var(--orange);
}


/* =========================================
   드래그(선택) 색: 메인 주황 + 흰색(C2) 글씨
   ========================================= */
::selection {
  background: var(--orange);
  color: var(--bg);
}

/* =========================================
   디자이너 팝업 – 작품 이미지는 상세페이지 링크
   ========================================= */
a.designer-project-image {
  display: block;
  transition: opacity 0.2s ease;
}
a.designer-project-image:hover {
  opacity: 0.85;
}

/* =========================================
   작품 상세 페이지 (work.html)
   ========================================= */
.work-detail {
  display: flex;
  align-items: flex-start;
  margin-top: 110px; /* 헤더 높이 */
  min-height: calc(100vh - 110px);
}

/* 왼쪽 정보 – 스크롤해도 따라옴 */
.work-detail-info {
  position: sticky;
  top: 110px;
  width: 32%;
  flex-shrink: 0;
  padding: 0 40px 40px 70px;
}

.work-back {
  display: inline-flex;
  color: #999;
  margin-bottom: 30px;
  padding: 4px 4px 4px 0;
}

.work-detail-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
}

.work-detail-designer {
  font-size: 15px;
  margin-bottom: 26px;
}

.work-detail-desc {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.work-detail-desc-en {
  font-size: 13px;
  line-height: 1.8;
  color: #999;
}

/* 오른쪽 이미지 – 기본 비율 4:3 (가로가 더 김) */
.work-detail-images {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.work-detail-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;  /* 기본 비율 – 여기서 바꾸면 됨 */
  object-fit: cover;
  background: #d9d9d9;
}

@media (max-width: 900px) {
  .work-detail {
    flex-direction: column;
  }
  .work-detail-info {
    position: static;
    width: 100%;
    padding: 30px 20px;
  }
}


/* =========================================
   상단 로고 – Fold to · · · · · Dot.
   평소: 텍스트만 / 호버: to와 Dot 사이가 벌어지며 점 → 점선 → 점
   ========================================= */
.site-logo {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-family: var(--font-en-title);
  font-weight: 900;
  font-size: 38px;   /* 로고 크기 */
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--black);
  white-space: nowrap;
}

/* to와 Dot 사이 공간 – 평소엔 띄어쓰기 한 칸 */
.logo-link {
  position: relative;
  display: inline-block;
  width: 0.28em;
  height: 1em;
  transition: width 0.3s cubic-bezier(0.6, 0, 0.2, 1) 0.1s;
}

.logo-dot {
  position: absolute;
  top: 50%;
  width: 0.2em;
  height: 0.2em;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%) scale(0);
  transition: transform 0.18s ease;
}
.logo-dot-start { left: 0.32em; }
.logo-dot-end   { right: 0.32em; }

.logo-dash {
  position: absolute;
  top: 50%;
  left: 0.62em;
  right: 0.62em;
  height: 0.055em;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, currentColor 0 0.12em, transparent 0.12em 0.24em);
  clip-path: inset(0 100% 0 0); /* 왼쪽부터 그려짐 */
  transition: clip-path 0.15s ease;
}

/* 호버 */
.site-logo:hover .logo-link {
  width: 3.8em;
  transition-delay: 0s;
}
.site-logo:hover .logo-dot-start {
  transform: translateY(-50%) scale(1);
  transition-delay: 0.12s;
}
.site-logo:hover .logo-dash {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.2s linear 0.17s;
}
.site-logo:hover .logo-dot-end {
  transform: translateY(-50%) scale(1);
  transition-delay: 0.37s;
}

@media (max-width: 768px) {
  .site-logo {
    font-size: 26px;
    left: 20px;
  }
  .site-logo:hover .logo-link {
    width: 2.6em;
  }
}

/* =========================================
   메뉴 – 텍스트 옆 동그라미, 현재 페이지는 주황
   ========================================= */
.main-nav {
  top: 50%;
  transform: translateY(-50%);
}

.main-nav ul {
  gap: 40px;
}

.main-nav li {
  width: auto;
  height: auto;
}

.main-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  font-size: 16px;
  color: var(--black);
}

.nav-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: #fff;            /* 커서랑 같은 흰 동그라미 */
  transition: background-color 0.2s ease;
}

.main-nav a.active .nav-dot,
.main-nav a:active .nav-dot {
  background: var(--orange);
}

@media (max-width: 768px) {
  .main-nav {
    transform: translateY(-100%);
    top: 0;
  }
  .main-nav.open {
    transform: translateY(0);
  }
  .main-nav ul {
    gap: 32px;
  }
  .main-nav a {
    font-size: 20px;
  }
  .nav-dot {
    width: 18px;
    height: 18px;
  }
}


/* =========================================
   Projects 커리큘럼 탭 – 테이프/기울기 대신 메뉴처럼 동그라미
   (위쪽의 예전 .project-tab 규칙들을 덮어씀)
   ========================================= */
.project-tab,
.project-item.active .project-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  background: none;
  transform: none;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  color: #999;
}

.project-item.active .project-tab {
  color: var(--black);
}

.project-item.active .project-tab .nav-dot {
  background: var(--orange);
}

.project-item.active .project-detail {
  padding-left: 24px; /* 동그라미 오른쪽 글자 라인에 맞춤 */
}


/* =========================================
   메인 – 접을 수 있는 A4 종이
   ========================================= */
.fold-stage {
  position: relative;
  margin-top: 110px;
  height: calc(100vh - 110px);
  min-height: 480px;
  overflow: hidden;
  touch-action: none;   /* 폰에서 접을 때 화면 안 밀리게 */
  user-select: none;
}

.fold-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 처음 들어올 때 종이가 '빡' 하고 뜸 */
.fold-svg .fold-paper-group {
  transform-box: fill-box;
  transform-origin: center;
  animation: paperPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-play-state: paused;   /* 로딩 끝나면 시작 */
}
body.is-loaded .fold-svg .fold-paper-group {
  animation-play-state: running;
}

@keyframes paperPop {
  from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.fold-layer.front { fill: var(--orange); }
.fold-layer.back  { fill: var(--blue); }

.fold-ui {
  position: absolute;
  left: 0;
  right: 0;
  /* top은 JS가 종이 바로 아래로 맞춰줌 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.fold-hint {
  position: absolute;
  left: 0;
  right: 0;
  /* top은 JS가 종이 바로 위로 맞춰줌 */
  text-align: center;
  font-family: var(--font-en-title);  /* 페이퍼로지 500 */
  font-weight: 500;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: var(--tracking);
  color: var(--black);
  padding: 0 20px;
  pointer-events: none;
}

.fold-ui {
  flex-direction: column;
  gap: 12px;
}

.fold-hint {
  transition: opacity 0.3s ease;
}

.fold-buttons {
  display: flex;
  gap: 20px;
  pointer-events: auto;
}

.fold-btn {
  font-size: 14px;
  color: var(--black);
  padding: 4px 2px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* 밑줄 대신 마우스 올리면 주황 글씨 */
.fold-btn:hover:not(:disabled) {
  color: var(--orange);
}

.fold-btn:disabled {
  opacity: 0.3;
}

/* 완료 상태: 더 이상 접히지 않음 */
.fold-stage.is-done .fold-svg {
  pointer-events: none;
}

/* 같은 색 면이 겹쳐도 접힌 경계가 보이도록 아주 옅은 선 */
.fold-layer {
  stroke: rgba(65, 68, 69, 0.18);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}


/* 소개글 단어 애니메이션이 끝나면 일반 글자로 되돌림
   → 드래그(선택) 색이 띄어쓰기에서만 길쭉해지지 않게 */
.scroll-intro-inner.settled .word {
  display: inline;
  transform: none;
  transition: none;
}



/* 접기 시작하면 멘트 사라짐 */
.fold-stage.is-touched .fold-hint {
  opacity: 0;
}

/* =========================================
   완료 팝업 – 완료 멘트 + 내가 접은 종이 + 저장/공유
   ========================================= */
.fold-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.fold-modal.open {
  opacity: 1;
  visibility: visible;
}

.fold-modal-box {
  position: relative;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 58px 32px 34px;   /* X와 멘트 사이 여유 + 전체 덩어리 살짝 아래로 */
  background: var(--bg);
  text-align: center;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}

.fold-modal.open .fold-modal-box {
  transform: none;
}

.fold-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 22px;
  line-height: 1;
  color: var(--black);
}

.fold-modal-title {
  font-family: var(--font-en-title);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: var(--tracking);
}

.fold-modal-sub {
  margin-top: 6px;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: 13px;
  color: #999;
}


.fold-modal .fold-buttons {
  justify-content: center;
}

.fold-modal-toast {
  min-height: 18px;
  margin-top: 10px;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: 12px;
  color: var(--orange);
}


/* =========================================
   완료 카드 – 3:4, 배경 4색 중 선택
   글자는 카드 위 입력칸에 바로 (점선 밑줄 = 적을 수 있는 자리)
   ========================================= */
.fold-card {
  --card-bg: var(--blue);
  --card-ink: var(--black);
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  margin: 20px auto 16px;
  border: 1px solid rgba(65, 68, 69, 0.25);   /* 팝업과 구분용 (저장 이미지엔 안 들어감) */
  border-radius: 10px;                           /* 살짝 둥글게 */
  background: var(--card-bg);
  color: var(--card-ink);
  container-type: inline-size;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.fold-card[data-bg="orange"] { --card-bg: var(--orange); }
.fold-card[data-bg="blue"]   { --card-bg: var(--blue); }
.fold-card[data-bg="white"]  { --card-bg: var(--bg); }
.fold-card[data-bg="black"]  { --card-bg: var(--black); --card-ink: var(--bg); }

.fold-card-title {
  position: absolute;
  top: 6.5%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-en-title);
  font-weight: 800;
  font-size: 10cqw;
  line-height: 1.1;
  letter-spacing: var(--tracking);
}

.fold-card-input {
  display: block;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-bottom: 1px dashed rgba(65, 68, 69, 0.22);   /* 적을 수 있는 자리 – 아주 연하게 (저장엔 안 들어감) */
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: center;
  outline: none;
}

/* 글자를 쓰면 점선 사라짐 */
.fold-card-input:not(:placeholder-shown) {
  border-bottom-color: transparent;
}
.fold-card-input::placeholder {
  color: currentColor;
  opacity: 0.35;
}
.fold-card[data-bg="black"] .fold-card-input {
  border-bottom-color: rgba(247, 252, 254, 0.25);
}
.fold-card-input:focus {
  border-bottom-style: solid;
}

.fold-card-word {
  width: 82%;
}

.fold-card-paper {
  position: absolute;
  top: 26.5%;
  left: 14.5%;
  width: 71%;
  height: 47%;
  object-fit: contain;
  pointer-events: none;
}

.fold-card-name {
  position: absolute;
  top: 78.5%;
  left: 20%;
  width: 60%;
  font-family: var(--font-en-title);
  font-weight: 800;
  font-size: 7.5cqw;
  line-height: 1.2;
  letter-spacing: var(--tracking);
}

.fold-card-footer {
  position: absolute;
  bottom: 3.5%;
  left: 0;
  right: 0;
  font-size: 2.5cqw;
  text-align: center;
  letter-spacing: var(--tracking);
}

.fold-swatches {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.fold-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--black);
  transition: box-shadow 0.2s ease;
}
.fold-swatch[data-bg="orange"] { background: var(--orange); }
.fold-swatch[data-bg="blue"]   { background: var(--blue); }
.fold-swatch[data-bg="white"]  { background: var(--bg); }
.fold-swatch[data-bg="black"]  { background: var(--black); }
.fold-swatch.is-active {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--orange);
}

.fold-save-rows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fold-save-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fold-save-label {
  width: 44px;
  text-align: right;
  font-size: 12px;
  color: #999;
}


/* =========================================
   광장 – 모두가 보낸 종이 (index 안에서 화면만 전환)
   ========================================= */
.fold-svg,
.fold-stage .fold-hint,
.fold-ui,
.plaza {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.plaza {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.fold-stage.is-plaza .fold-svg,
.fold-stage.is-plaza .fold-hint,
.fold-stage.is-plaza .fold-ui {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.fold-stage.is-plaza .plaza {
  opacity: 1;
  visibility: visible;
}

.plaza-head {
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

/* 로고 크기(38px)의 3/4 */
.plaza-title {
  font-family: var(--font-en-title);
  font-weight: 900;
  font-size: 28.5px;
  line-height: 1.2;
  letter-spacing: var(--tracking);
  color: var(--black);
}

.plaza-word {
  display: inline-block;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.plaza-word.is-out {
  opacity: 0;
  transform: translateY(-0.35em);
}
.plaza-word.is-in {
  opacity: 0;
  transform: translateY(0.35em);
  transition: none;
}

.plaza-sub {
  margin-top: 6px;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: 13px;
  color: #999;
}

.plaza-board {
  position: absolute;
  top: 120px;
  left: 40px;
  right: 40px;
  bottom: 90px;
}

.plaza-empty {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: 13px;
  color: #999;
}

.plaza-paper {
  position: absolute;
  width: 92px;
  height: 92px;
  padding: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: transform 0.25s ease;
}

.plaza-paper svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.plaza-paper:hover {
  z-index: 50;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.15);
}

.plaza-paper .front { fill: var(--orange); }
.plaza-paper .back  { fill: var(--blue); }
.plaza-paper polygon {
  stroke: rgba(65, 68, 69, 0.18);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* 방금 보낸 종이 – 톡 떨어지듯 */
.plaza-paper.is-new {
  z-index: 40;
  animation: plazaDrop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes plazaDrop {
  from { opacity: 0; transform: translate(-50%, -90%) rotate(var(--rot, 0deg)) scale(1.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1); }
}

/* 하단 전환 버튼 */
.stage-switch {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--black);
  z-index: 5;
  transition: color 0.2s ease;
}
.stage-switch:hover {
  color: var(--orange);
}
.fold-stage.is-plaza .stage-switch .nav-dot {
  background: var(--orange);
}

/* 완료 팝업 – 광장에 보내기 */
.plaza-send {
  display: block;
  margin: 18px auto 0;
  padding: 9px 22px;
  border: 1px solid var(--black);
  border-radius: 999px;
  font-size: 14px;
  color: var(--black);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.plaza-send:hover:not(:disabled) {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
}
.plaza-send:disabled {
  opacity: 0.4;
}

/* 광장 카드 팝업 – 흰 상자 없이 카드만, X는 카드 바깥 */
.plaza-modal-box {
  position: relative;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.fold-modal.open .plaza-modal-box {
  transform: none;
}
.plaza-card-img {
  display: block;
  width: 320px;
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}
.plaza-modal-close {
  position: absolute;
  top: -6px;
  right: -38px;
  font-size: 28px;
  line-height: 1;
  color: var(--bg);
}
@media (max-width: 480px) {
  .plaza-modal-close { right: 0; top: -40px; }
}

.fold-save-buttons {
  justify-content: center;
  align-items: baseline;
  gap: 18px;
}
.fold-save-buttons .fold-save-label {
  width: auto;
  font-size: 14px;
  color: #999;
}

/* =========================================
   ABOUT – 첫 화면: 포스터 (화면 한 장 크기)
   ========================================= */
.about-visual {
  height: 100vh;
  min-height: 560px;
  margin-top: 0;
  padding: 140px 40px 40px;   /* 상단바 높이 + 여유 */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-visual .poster-hover {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  overflow: visible;
}

.about-visual .poster-hover img {
  height: 100%;
  max-height: none;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .about-visual {
    height: auto;
    min-height: 0;
    padding: 130px 24px 40px;
  }
  .about-visual .poster-hover,
  .about-visual .poster-hover img {
    height: auto;
    width: 100%;
  }
}


/* =========================================
   ABOUT – 스크롤 연출
   포스터 구간이 화면에 고정된 채 스크롤하면
   포스터는 왼쪽으로, 오른쪽에 제목·설명이 나타남 (위치는 JS가 계산)
   ========================================= */
.about-hero {
  position: relative;
  height: 230vh;           /* 고정된 채로 스크롤되는 길이 */
}

.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.about-poster {
  position: absolute;
  top: 140px;              /* 상단바 + 여유 */
  bottom: 40px;
  left: 50%;
  aspect-ratio: 1684 / 2384;
  transform: translateX(calc(-50% + var(--poster-x, 0px)));
  will-change: transform;
}

.about-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid rgba(65, 68, 69, 0.15);   /* 배경과 분리되는 얇은 선 */
}

.about-intro {
  position: absolute;
  top: 50%;
  left: var(--intro-left, 55%);
  width: var(--intro-w, 520px);
  max-width: none;
  padding-top: 50px;       /* 상단바만큼 아래로 보정 */
  text-align: left;
  opacity: var(--intro-o, 0);
  transform: translate(var(--intro-shift, 30px), -50%);
  pointer-events: var(--intro-pe, none);
}

.about-intro h1 {
  font-size: 22px;
  margin-bottom: 22px;
}

.about-intro .scroll-text {
  font-size: 15px;
  line-height: 1.85;
}

/* 좁은 화면: 연출 없이 포스터 → 설명 순서로 쌓기 */
@media (max-width: 960px) {
  .about-hero { height: auto; }
  .about-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 130px 24px 40px;
  }
  .about-poster {
    position: static;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    transform: none;
  }
  .about-poster img { height: auto; }
  .about-intro {
    position: static;
    width: auto;
    max-width: 560px;
    margin: 60px auto 0;
    padding-top: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* 예전 .scroll-intro-inner(.in-view) 규칙이 위치를 덮어쓰지 않게 */
.about-sticky .about-intro.scroll-intro-inner {
  max-width: none;
  text-align: left;
  opacity: var(--intro-o, 0);
  transform: translate(var(--intro-shift, 30px), -50%);
}
@media (max-width: 960px) {
  .about-sticky .about-intro.scroll-intro-inner {
    opacity: 1;
    transform: none;
  }
}


/* =========================================
   ABOUT 스크롤 연출 v2
   - 무빙 포스터(영상), 오른쪽 글은 포스터 윗선에 맞춤
   - 포스터는 로고 F 왼쪽 선(40px)까지 밀림
   - 전시 정보는 소개글 아래에 (라벨 위 / 내용 아래)
   ========================================= */
.about-poster .about-poster-img,
.about-poster .about-poster-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid rgba(65, 68, 69, 0.15);
}

/* 옆으로 밀리는 만큼 이미지 → 영상으로 바뀜 (JS가 --video-o 조절) */
.about-poster .about-poster-video {
  opacity: var(--video-o, 0);
}

.about-sticky .about-intro.scroll-intro-inner {
  top: var(--intro-top, 140px);
  padding-top: 0;
  transform: translateX(var(--intro-shift, 30px));
}

.about-intro h1 {
  margin-top: -0.25em;      /* 글자 윗선을 포스터 윗선에 맞춤 */
  margin-bottom: 18px;
}

.about-intro .scroll-text {
  font-size: 14px;
  line-height: 1.8;
}

.about-info {
  margin-top: 34px;
  font-size: 14px;
  line-height: 1.7;
}

.about-info dt {
  font-family: var(--font-kr);
  font-weight: 700;
  margin-top: 18px;
}
.about-info dt:first-child {
  margin-top: 0;
}

.about-info dd {
  margin: 4px 0 0;
  font-family: var(--font-kr-regular);
  font-weight: 400;
}

.about-info-sub {
  display: inline-block;
  min-width: 84px;
}

@media (max-width: 960px) {
  .about-sticky .about-intro.scroll-intro-inner {
    transform: none;
  }
  .about-poster { position: relative; aspect-ratio: 1684 / 2384; }
  .about-poster .about-poster-video { opacity: 1; }
}


/* about 소개글: 문장(마침표) 단위로만 줄바꿈, 단어 중간에서 안 끊기게 + 글자 키움 */
.about-intro .scroll-text {
  font-size: var(--intro-fs, 16px);   /* 화면에 맞춰 JS가 최대 16px까지 */
  line-height: 1.8;
  word-break: keep-all;               /* 혹시 줄이 넘쳐도 단어 중간에선 안 끊김 */
}

.about-info {
  font-size: var(--intro-fs, 16px);
}
.about-info dt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.about-info dt .nav-dot {
  width: 13px;
  height: 13px;
  border-width: 2px;
}
.about-info dd {
  padding-left: 21px;      /* 동그라미 옆 글자 라인에 맞춤 */
}
.about-info-sub {
  min-width: 96px;
}


/* 전시 정보 | 졸준위 명단 나란히 (글자 크기는 전시 정보 본문과 같게) */
.about-details {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  margin-top: 34px;
}
.about-details .about-info {
  margin-top: 0;
  flex-shrink: 0;
}

.about-committee {
  font-size: var(--intro-fs, 16px);
  line-height: 1.7;
  font-family: var(--font-kr-regular);
  font-weight: 400;              /* 이름: Regular */
}
.about-committee-title {
  font-family: var(--font-kr);
  font-weight: 700;              /* 졸업전시준비위원회: Bold */
  margin-bottom: 4px;
}
.about-committee p + p {
  margin-top: 4px;
}
.about-committee b {
  font-family: var(--font-kr);
  font-weight: 700;              /* 직책: Bold */
  margin-right: 0.35em;
}
.about-committee b:not(:first-child) {
  margin-left: 1em;              /* 직책 묶음 사이 간격 */
}

@media (max-width: 960px) {
  .about-details {
    flex-direction: column;
    gap: 40px;
  }
}
/* 예전 '.scroll-intro-inner p { 18px }' 규칙이 명단에 걸리지 않게 */
.about-intro .about-committee p {
  font-size: inherit;
  color: inherit;
}


/* 졸준위 v2: 날짜 덩어리와 간격 넓힘, 동그라미 제목, 직책도 본문 굵기, 이름 세로 정렬 */
.about-details {
  gap: 72px;
}

.about-committee-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.about-committee-title .nav-dot {
  width: 13px;
  height: 13px;
  border-width: 2px;
}

.committee-grid {
  display: grid;
  grid-template-columns: repeat(6, max-content);
  column-gap: 0.9em;               /* 직책 ↔ 이름 간격 */
  row-gap: 4px;
  padding-left: 21px;             /* 동그라미 옆 글자 라인에 맞춤 (날짜 덩어리와 같은 방식) */
  font-family: var(--font-kr-regular);
  font-weight: 400;               /* 직책·이름 모두 본문과 같은 굵기 */
}
.committee-grid > span:nth-child(odd) {
  color: inherit;
}
/* 이름 칸 뒤 여유 → 다음 직책과 구분 */
.committee-grid > span:nth-child(2),
.committee-grid > span:nth-child(4),
.committee-grid > span:nth-child(10) {
  margin-right: 0.7em;
}
.committee-grid .span-rest   { grid-column: 2 / -1; }
.committee-grid .span-rest-3 { grid-column: 3 / -1; }   /* 디자인팀 이름 칸이 2열 폭을 정함 → 부위원장·도록팀은 그 오른쪽부터 */
.committee-grid .span-rest-2 { grid-column: 4 / -1; }


/* 소개글이 다 뜬 뒤에 날짜·졸준위 덩어리가 스르륵 */
.about-intro .about-details {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-intro.details-in .about-details {
  opacity: 1;
  transform: none;
}


/* 졸준위 v3 – 직책 Bold, 직책↔이름 간격 넓게, 두 번째 묶음은 디자인팀 이름에서 더 떨어지게 */
.committee-grid {
  column-gap: 1.2em;              /* 직책 ↔ 이름 */
}
.committee-grid > span { margin: 0; }
.committee-grid .r {
  font-family: var(--font-kr);
  font-weight: 700;
}
.committee-grid .first { grid-column: 1; }
.committee-grid .pair  { margin-left: 2em; }   /* 묶음 사이 간격 */
.committee-grid .wide  { grid-column: span 3; }

/* 시간 안의 Opening / 12일 / 13일 — 16일 Bold */
.about-info-sub {
  font-family: var(--font-kr);
  font-weight: 700;
}

/* 완료 팝업: 둥근 모서리, 아래 여백 줄임 */
.fold-modal-box {
  border-radius: 16px;
  padding-bottom: 22px;
}
.fold-modal-toast {
  min-height: 0;
  margin-top: 8px;
}
.fold-modal-toast:empty {
  margin-top: 0;
}

/* 카드 하단 문구 살짝 위로 */
.fold-card-footer {
  bottom: 6%;
}

/* 화면이 좁아 한 줄에 안 들어갈 때만: 글자 대신 간격을 줄임 */
.about-intro.is-compact .about-details { gap: 44px; }
.about-intro.is-compact .committee-grid { column-gap: 0.9em; }
.about-intro.is-compact .committee-grid .pair { margin-left: 1.4em; }
.about-intro.is-stacked .about-details { flex-wrap: wrap; row-gap: 26px; }

/* =========================================
   디자이너 카드 v2
   - 이름 각도 = 접힌 면의 위쪽 선(왼쪽 아래 꼭짓점 → 위 꼭짓점) 각도 -31.6°
     (사진 3:4 기준: 꼭짓점 (0,100%) → (85.1%, 60.7%))
   - 마우스를 떼면 글자가 먼저 바로 사라지고, 그다음 종이가 펴짐
   ========================================= */
.designer-tape {
  /* 위쪽 선을 따라 60% 지점, 선에서 살짝 안쪽(접힌 면 쪽)으로 */
  /* 오른쪽 끝 기준: 글자 끝이 접힌 모서리 쪽 한 점에 고정 → 이름이 길면 왼쪽으로 늘어남 */
  left: 75%;
  top: 74.6%;
  transform-origin: 100% 50%;
  transform: translate(-100%, -50%) rotate(-31.6deg);
  transition: opacity 0.08s ease;          /* 뗄 때: 즉시 사라짐 */
}

.designer-card:hover .designer-tape {
  transition: opacity 0.25s ease 0.22s;    /* 올릴 때: 다 접힐 즈음 나타남 */
}

/* 뗄 때: 글자가 사라진 뒤(0.08s) 종이가 펴지기 시작 */
.designer-photo,
.designer-photo::after {
  transition: clip-path 0.35s cubic-bezier(0.25, 0.8, 0.3, 1) 0.08s;
}
.designer-card:hover .designer-photo,
.designer-card:hover .designer-photo::after {
  transition: clip-path 0.4s cubic-bezier(0.25, 0.8, 0.3, 1) 0s;
}


/* =========================================
   메뉴 5번째: FOLD TO ___ (빈칸은 점선)
   ========================================= */
.nav-blank {
  display: inline-block;
  width: 2.4em;
  height: 0.9em;
  margin-left: 0.15em;
  border-bottom: 1.5px dashed currentColor;
  vertical-align: baseline;
}
@media (max-width: 1240px) {
  .main-nav ul { gap: 26px; }
}

/* =========================================
   HOME – 종이가 D 모양으로 접히는 4단계가
   한 줄로 이어져 오른쪽 → 왼쪽으로 천천히 계속 흘러감
   ========================================= */
.home {
  height: 100vh;
  min-height: 520px;
  padding-top: 110px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.home-steps {
  width: 100%;
  overflow: hidden;
}

.home-track {
  --step-h: min(56vh, 480px);           /* 그래픽 크기 */
  --step-gap: calc(var(--step-h) * 0.32);
  display: flex;
  gap: var(--step-gap);
  width: max-content;
  padding-left: var(--step-gap);
  animation: homeFlow 18s linear infinite;
  animation-play-state: paused;          /* 로딩 끝나면 시작 */
  will-change: transform;
}
body.is-loaded .home-track { animation-play-state: running; }

.home-step {
  display: block;
  flex: none;
  height: var(--step-h);
  width: auto;
  aspect-ratio: 1 / 1;      /* 정사각형 색종이 */
  overflow: visible;
}
.home-step .o { fill: var(--orange); }
.home-step .b { fill: var(--blue); }

/* 3세트 중 1세트만큼 이동하면 처음과 똑같은 모습 → 이음매 없이 반복 */
@keyframes homeFlow {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / 3)); }
}

@media (max-width: 768px) {
  .home-track { --step-h: min(30vh, 220px); animation-duration: 12s; }
}

@media (prefers-reduced-motion: reduce) {
  .home-track { animation: none; }
}


/* =========================================
   왼쪽 아래 고정: FOLD TO ___ 동그라미 버튼(위) + 학교 로고(아래)
   둘 다 같은 크기의 원
   ========================================= */
.side-fab {
  --fab: 46px;
  position: fixed;
  left: 40px;
  bottom: 32px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.side-logo {
  display: block;
  width: var(--fab);
  height: var(--fab);
}

.fold-fab {
  pointer-events: auto;
  width: var(--fab);
  height: var(--fab);
  border-radius: 50%;
  border: 1.5px solid var(--black);
  background: var(--bg);
  color: var(--black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: var(--font-en-title);
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  letter-spacing: var(--tracking);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 빈칸: 평소엔 점선, 마우스 올리면 단어가 번갈아 들어감 */
.fold-fab-blank {
  display: block;
  width: 26px;
  height: 10px;
  border-bottom: 1.5px dashed currentColor;
  text-align: center;
  overflow: visible;
}
.fold-fab-word {
  display: inline-block;
  font-size: 8px;
  line-height: 9px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.fold-fab:hover .fold-fab-word,
.fold-fab.is-active .fold-fab-word { opacity: 1; }
.fold-fab:hover .fold-fab-blank,
.fold-fab.is-active .fold-fab-blank { border-bottom-color: transparent; }

.fold-fab:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bg);
}

/* 종이접기 페이지에 있을 때 */
.fold-fab.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--bg);
}

@media (max-width: 768px) {
  .side-fab { --fab: 42px; left: 16px; bottom: 16px; gap: 8px; }
  .fold-fab { font-size: 7.5px; }
  .fold-fab-blank { width: 24px; height: 9px; }
  .fold-fab-word { font-size: 7.5px; line-height: 8px; }
}

/* =========================================
   ABOUT 모바일 / 태블릿 (960px 이하)
   PC용 위치값(left 50%, top 140px, 이동)을 초기화해서
   포스터 → 소개글 → 전시 정보 → 졸준위 순서로 쌓기
   ========================================= */
@media (max-width: 960px) {
  .about-hero { height: auto; }

  .about-sticky {
    position: static;
    height: auto;
    overflow: visible;
    padding: 120px 20px 48px;
  }

  .about-poster {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
    aspect-ratio: 1684 / 2384;
    transform: none;
  }

  .about-sticky .about-intro.scroll-intro-inner {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    max-width: 560px;
    margin: 44px auto 0;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    text-align: left;
  }

  .about-intro h1 { font-size: 19px; margin-top: 0; }

  .about-intro .scroll-text,
  .about-info,
  .about-committee {
    font-size: 14.5px;
  }
  .about-intro .scroll-text { line-height: 1.85; }
  .about-intro .scroll-text br { display: inline; }   /* 문장 끝에서 줄바꿈은 유지 */

  /* 날짜 · 졸준위: 위아래로 */
  .about-details,
  .about-intro.is-stacked .about-details,
  .about-intro.is-compact .about-details {
    flex-direction: column;
    gap: 34px;
  }

  /* 졸준위 명단: 직책 | 이름 두 칸으로 */
  .committee-grid {
    grid-template-columns: max-content 1fr;
    column-gap: 1em;
  }
  .committee-grid .first,
  .committee-grid .pair { grid-column: 1; margin-left: 0; }
  .committee-grid .n,
  .committee-grid .wide { grid-column: 2; }
}
@media (max-width: 960px) {
  .about-intro h1 { word-break: keep-all; font-size: 18px; }
}

/* =========================================
   디자이너 카드 v3 – 밑변의 오른쪽 3/4만 접힘 (모서리째 접혀 올라옴)
   접힘선: 밑변 25% 지점 ↔ 오른쪽 변 65% 지점 / 접힌 끝: (58.1%, 49.5%)
   면적은 이전보다 약 1.2배
   이름은 접힌 면의 위쪽 선(끝 → 오른쪽 접힘점, +26.2°)을 따라 오른쪽 끝 기준
   ========================================= */
.designer-photo {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%);
}
.designer-card:hover .designer-photo {
  clip-path: polygon(0 0, 100% 0, 100% 65%, 25% 100%, 0 100%);
}

.designer-photo::after {
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%);   /* 모서리 한 점에 접혀 있음 */
}
.designer-card:hover .designer-photo::after {
  clip-path: polygon(25% 100%, 100% 65%, 58.1% 49.5%);
}

.designer-tape {
  left: 85%;
  top: 67.4%;
  transform-origin: 100% 50%;
  transform: translate(-100%, -50%) rotate(26.2deg);
}
/* 5글자 이상 이름은 살짝 작게 (접힌 면 안에 들어가게) */
.designer-tape.is-long { font-size: clamp(8px, 6.4cqw, 16px); }

/* 디자이너 카드 v4 – 오른쪽 변은 25%만 접힘 (덜 접힘) */
.designer-card:hover .designer-photo {
  clip-path: polygon(0 0, 100% 0, 100% 75%, 25% 100%, 0 100%);
}
.designer-card:hover .designer-photo::after {
  clip-path: polygon(25% 100%, 100% 75%, 75.3% 58.2%);
}
.designer-tape {
  left: 92.4%;
  top: 75%;
  transform: translate(-100%, -50%) rotate(42.1deg);   /* 접힌 면 위쪽 선 각도 */
  font-size: clamp(9px, 6.5cqw, 15px);
}
.designer-tape.is-long { font-size: clamp(7px, 5.2cqw, 12px); }


/* =========================================
   작품 상세 – 왼쪽 아래 디자이너 정보 + 다른 프로젝트
   ========================================= */
.work-detail-info {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  padding-bottom: 32px;
}
.work-detail-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.work-detail-cat {
  font-size: 12px;
  color: #999;
  margin-bottom: 6px;
}

.work-designer-box {
  margin-top: 24px;
  font-size: 12px;
  line-height: 1.6;
}
.work-designer-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 6px;
}
.work-designer-label .nav-dot { width: 10px; height: 10px; border-width: 1.5px; }
.work-designer-name { font-size: 14px; font-weight: 700; }
.work-designer-en,
.work-designer-contact {
  font-family: var(--font-kr-regular);
  font-weight: 400;
  color: #777;
}
.work-designer-contact a:hover { color: var(--orange); }

.work-designer-others { margin-top: 14px; }
.work-designer-label-sm {
  font-size: 11px;
  color: #999;
  margin-bottom: 6px;
}
.work-designer-other-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.work-other {
  display: flex;
  align-items: center;
  gap: 10px;
}
.work-other .work-thumb {
  width: 44px;
  height: 44px;
  margin: 0;
  flex: none;
  object-fit: cover;
}
.work-other b { display: block; font-size: 12px; }
.work-other small {
  display: block;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: 11px;
  color: #999;
}
.work-other:hover b { color: var(--orange); }

img.work-thumb { display: block; object-fit: cover; }

@media (max-width: 900px) {
  .work-detail-info { height: auto; }
  .work-detail-main { overflow: visible; }
}

/* 홈: 학교 로고만 오른쪽 아래 */
.side-fab {
  left: auto;
  right: 40px;
}
@media (max-width: 768px) {
  .side-fab { right: 16px; left: auto; }
}


/* 디자이너 정보 v2 – 프로필 사진 왼쪽, 글은 오른쪽 */
.work-designer-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.work-designer-photo {
  flex: none;
  width: 64px;
  aspect-ratio: 3 / 4;
  background: #d9d9d9;
  overflow: hidden;
}
.work-designer-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-designer-text { min-width: 0; }
.work-designer-names {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 8px;
}

/* 디자이너 정보 v3 – 사진을 키우고, 글·다른 작품이 사진 높이 안에 맞춰 들어가게 */
.work-designer-box {
  --photo-w: 112px;
  align-items: stretch;
  gap: 16px;
}
.work-designer-photo {
  width: var(--photo-w);
  height: calc(var(--photo-w) * 4 / 3);
}
.work-designer-text {
  height: calc(var(--photo-w) * 4 / 3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* 이름은 사진 윗선, 다른 작품은 사진 아랫선에 맞춤 */
}
.work-designer-others { margin-top: 0; }
.work-designer-other-list .work-other:not(:first-child) { display: none; }  /* 한 칸에 하나만 */


/* =========================================
   ABOUT v3 (PC)
   1) 포스터 왼쪽으로 + 소개글 (포스터 높이만큼 채움)
   2) 더 내리면 오른쪽 칸이 위로 흘러가며 날짜·졸준위가 나란히 등장
   ========================================= */
.about-hero { height: 330vh; }

.about-sticky .about-intro.scroll-intro-inner {
  height: var(--col-h, auto);          /* 포스터 높이만큼만 보이는 창 */
  overflow: hidden;
}
.about-col {
  transform: translateY(var(--col-y, 0px));
  will-change: transform;
}
.about-intro-block {
  min-height: var(--col-h, 0px);
  display: flex;
  flex-direction: column;
}
.about-intro h1 {
  font-size: var(--title-fs, 26px);
  line-height: 1.35;
}
.about-intro .scroll-text {
  font-size: var(--intro-fs, 16px);
  line-height: var(--intro-lh, 1.8);
}

/* 날짜 · 졸준위 덩어리 */
.about-intro .about-details,
.about-intro.details-in .about-details {
  margin-top: 72px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.about-intro.details-in .about-details {
  opacity: 1;
  transform: none;
}
.about-details .about-info,
.about-details .about-committee {
  font-size: var(--details-fs, 16px);
}
.about-info dt .nav-dot,
.about-committee-title .nav-dot { width: 0.85em; height: 0.85em; }

/* 영상: 다시 보기 가능하다는 표시 */
.about-poster.is-replayable { cursor: pointer; }

@media (max-width: 960px) {
  .about-hero { height: auto; }
  .about-sticky .about-intro.scroll-intro-inner { height: auto; overflow: visible; }
  .about-col { transform: none; }
  .about-intro-block { min-height: 0; }
  .about-intro h1 { font-size: 20px; }
  .about-intro .scroll-text { font-size: 15.5px; line-height: 1.85; }
  .about-intro .about-details { margin-top: 44px; }
  .about-details .about-info,
  .about-details .about-committee { font-size: 15.5px; }
}

/* 소개글: 문장마다 새 줄에서 시작 + 긴 문장은 단어 단위로 이어서 줄바꿈, 문장 사이 살짝 띄움 */
/* 소개글 줄바꿈은 문구에 넣은 위치에서만 (긴 줄은 단어 단위로 넘어감) */

/* 졸준위: 직책 | 이름 두 칸 목록 – 날짜 덩어리 옆에 나란히, 큰 글씨로 */
@media (min-width: 961px) {
  .about-details .committee-grid { grid-template-columns: max-content max-content; column-gap: 1.1em; row-gap: 0.25em; }
  .about-details .committee-grid .first,
  .about-details .committee-grid .pair { grid-column: 1; margin-left: 0; }
  .about-details .committee-grid .n,
  .about-details .committee-grid .wide { grid-column: 2; }
  .about-details,
  .about-intro.is-compact .about-details { gap: 80px; }
  .about-details .about-info dd { margin-top: 0.2em; }
  .about-details .about-info dt { margin-top: 1em; }
  .about-details .about-info dt:first-child { margin-top: 0; }

  /* 오른쪽 칸이 흘러갈 때 위쪽 가장자리를 부드럽게 */
  .about-intro.is-flowing {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
            mask-image: linear-gradient(to bottom, transparent 0, #000 56px);
  }
}
.about-details .about-info-sub { min-width: 5.6em; }


/* ABOUT v4 – 날짜 덩어리 위, 졸준위 아래 (상하) */
@media (min-width: 961px) {
  .about-details,
  .about-intro.is-compact .about-details,
  .about-intro.is-stacked .about-details {
    flex-direction: column;
    gap: 2.2em;
  }
  .about-details .about-info,
  .about-details .about-committee { font-size: var(--details-fs, 16px); }
}


/* =========================================
   글자 크기 기준 적용 (맨 위 :root 의 --fs-* 값만 바꾸면 사이트 전체가 같이 바뀜)
   ========================================= */
@media (max-width: 768px) {
  :root {
    --fs-display: 22px;
    --fs-lead: 16px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-caption: 11px;
  }
}

/* Display – 페이지 큰 제목 */
.about-intro h1,
.work-detail-title,
.plaza-title { font-size: var(--fs-display); }

/* Lead – 읽히는 본문 */
.about-intro .scroll-text,
.about-details .about-info,
.about-details .about-committee,
.fold-stage .fold-hint,
.fold-modal-title { font-size: var(--fs-lead); }

/* Body – 메뉴 · 탭 · 버튼 · 설명 */
.main-nav a,
.project-tab,
.project-item.active .project-tab,
.fold-btn,
.plaza-send,
.stage-switch,
.fold-save-buttons .fold-save-label,
.work-detail-designer,
.work-detail-desc,
.work-designer-name,
.guest-modal-box h3,
.guest-modal-box textarea,
.guest-modal-box input,
.guest-submit { font-size: var(--fs-body); }

/* Small – 캡션 · 보조 설명 */
.project-info-row,
.project-info-row .info-label,
.project-info-desc,
.work-title,
.work-designer,
.work-detail-desc-en,
.work-designer-en,
.work-designer-contact,
.work-other b,
.fold-modal-sub,
.plaza-sub,
.plaza-empty,
.guest-note .note-to,
.guest-note .note-message,
.guest-note .note-from { font-size: var(--fs-small); }

/* Caption – 아주 작은 라벨 */
.work-detail-cat,
.work-designer-label-sm,
.work-other small,
.fold-modal-toast { font-size: var(--fs-caption); }

/* 사진 높이 안에 맞게 – 디자이너 정보 줄 간격 */
.work-designer-box { line-height: 1.5; }


/* 글자 크기 기준 조정
   - 날짜·졸준위: Body
   - 작품 상세 소개글: 한글·영어 모두 Small
   - 프로젝트 커리큘럼 소개: Body (한 단계 위) */
.about-details .about-info,
.about-details .about-committee { font-size: var(--fs-body); }
@media (min-width: 961px) {
  .about-details,
  .about-intro.is-compact .about-details,
  .about-intro.is-stacked .about-details { gap: 72px; }   /* 날짜 ↔ 졸준위 간격 */
}
.work-detail-desc,
.work-detail-desc-en { font-size: var(--fs-small); }
.project-info-row,
.project-info-row .info-label,
.project-info-desc { font-size: var(--fs-body); }


/* 소개글 · 날짜 · 졸준위 = 모두 Lead / 커리큘럼 제목 = Lead, 커리큘럼 소개 = Small */
.about-details .about-info,
.about-details .about-committee { font-size: var(--fs-lead); }
.project-tab,
.project-item.active .project-tab { font-size: var(--fs-lead); }
.project-info-row,
.project-info-row .info-label,
.project-info-desc { font-size: var(--fs-small); }

/* about: 날짜·시간·장소 사이 간격 (졸준위와의 간격 72px보다는 좁게) */
@media (min-width: 961px) {
  .about-details .about-info dt { margin-top: 36px; }
  .about-details .about-info dt:first-child { margin-top: 0; }
}

/* 홈: 종이마다 기울기 다르게 + 전체를 조금 위로 */
.home-steps { transform: translateY(-7vh); }
.home-step:nth-child(odd)  { transform: rotate(5deg); }
.home-step:nth-child(even) { transform: rotate(-5deg); }


/* 홈 오른쪽 아래: 학교 로고 밑에 두 번째 로고 */
.side-fab { align-items: center; gap: 10px; }
.side-logo-sub {
  display: block;
  width: 52px;     /* 학교 로고와 비슷한 폭 */
  height: auto;
}
@media (max-width: 768px) {
  .side-logo-sub { width: 46px; }
}


/* =========================================
   방명록 작성창 – 색종이 한 장
   ========================================= */
.guest-sheet {
  --sheet: var(--orange);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 40px);
  aspect-ratio: 5 / 6;
  padding: 26px 24px 22px;
  background: var(--sheet);
  color: var(--bg);
  transform: translateY(10px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.2, 1.2, 0.4, 1), background-color 0.25s ease;
}
.guest-sheet[data-color="blue"] { --sheet: var(--blue); }
.guest-modal.open .guest-sheet { transform: none; }

/* 색 고르기 */
.guest-colors {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}
.guest-color {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--bg);
  transition: box-shadow 0.2s ease;
}
.guest-color[data-color="orange"] { background: var(--orange); }
.guest-color[data-color="blue"]   { background: var(--blue); }
.guest-color.is-active { box-shadow: 0 0 0 3px var(--sheet), 0 0 0 4.5px var(--bg); }

/* 입력칸 – 테두리 없이 종이 위에 바로 */
.guest-field {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--bg);
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: var(--tracking);
  outline: none;
  resize: none;
}
.guest-field::placeholder {
  color: var(--bg);
  opacity: 0.45;
}
.guest-field-msg {
  flex: 1;
  min-height: 0;
}

.guest-line {
  margin: 14px 0 12px;
  border: none;
  border-top: 1.5px dashed var(--black);
}

.guest-send {
  align-self: center;
  margin-top: 10px;
  padding: 4px 14px;
  color: var(--bg);
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--tracking);
  transition: color 0.2s ease;
}
.guest-send:hover { color: var(--black); }

/* 빈 칸 알림 */
.guest-field.is-empty { animation: guestShake 0.35s ease; }
@keyframes guestShake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 붙는 메모도 같은 모양 */
.guest-note .note-from {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--bg);
}
.guest-note .note-line {
  margin: 8px 0;
  border-top: 1px dashed var(--black);
}
.guest-note .note-message {
  font-size: var(--fs-small);
  color: var(--bg);
  word-break: keep-all;
}

@media (max-width: 768px) {
  .guest-field, .guest-send { font-size: 20px; }
}
.guest-field-msg { word-break: keep-all; overflow-wrap: break-word; }
.guest-note .note-from { text-align: left; margin: 0; }


/* 방명록 작성창 v2 – 흰 종이, 글자 수 표시 */
.guest-sheet {
  --sheet: #fff;
  color: var(--black);
  padding-top: 30px;
}
.guest-sheet .guest-field { color: var(--black); }
.guest-sheet .guest-field::placeholder { color: var(--black); opacity: 0.3; }
.guest-sheet .guest-send { color: var(--black); }
.guest-sheet .guest-send:hover { color: var(--orange); }

.guest-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.guest-row .guest-field { flex: 1; min-width: 0; }
.guest-row-msg { flex: 1; min-height: 0; }
.guest-row-msg .guest-field-msg { height: 100%; }

.guest-count {
  flex: none;
  padding-top: 0.6em;
  font-family: var(--font-kr-regular);
  font-weight: 400;
  font-size: var(--fs-caption);
  color: #999;
  font-variant-numeric: tabular-nums;
}
.guest-count.is-full { color: var(--orange); }


/* =========================================
   방명록 작성창 v3 – 오른쪽 아래가 접힌 흰 종이, 접힌 면 = 전송
   접힘선: 밑변 70% ↔ 오른쪽 변 50%  /  접힌 끝: (52%, 80%)  → 길쭉한 직각삼각형
   ========================================= */
.guest-sheet {
  --sheet: #fff;
  width: 380px;
  aspect-ratio: 5 / 6;
  padding: 34px 30px 26px;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 70% 100%, 0 100%);
  transform: translateY(10px) rotate(-3deg) scale(0.97);
}
.guest-modal.open .guest-sheet { transform: rotate(-3deg); }

.guest-sheet .guest-field {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: var(--fs-lead);
  line-height: 1.5;
}
.guest-sheet .guest-field::placeholder { font-family: inherit; }

/* 메시지: 위쪽 (접힌 모서리 위까지만) */
.guest-sheet .guest-row-msg {
  flex: none;
  height: 44%;
}

/* 보내는 사람: 아래쪽, 접힌 면 왼쪽까지만 */
.guest-bottom {
  margin-top: auto;
  width: 50%;
}
.guest-sheet .guest-line { margin: 0 0 10px; }

/* 접힌 면 = 전송 버튼 */
.guest-sheet .guest-send {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  background: var(--blue);
  clip-path: polygon(70% 100%, 100% 50%, 52% 80%);
  color: #fff;
  font-size: var(--fs-lead);
  transition: background-color 0.2s ease;
}
.guest-sheet .guest-send span {
  position: absolute;
  left: 74%;
  top: 76.5%;
  transform: translate(-50%, -50%) rotate(-3deg);
  white-space: nowrap;
}
.guest-sheet .guest-send:hover { background: var(--orange); color: #fff; }

/* 붙는 메모: 메시지 위, 보내는 사람 아래 */
.guest-note .note-message { flex: 1; }
.guest-note .note-line { margin: 8px 0 6px; }
.guest-sheet .guest-send { top: 0; left: 0; width: 100%; height: 100%; }


/* =========================================
   방명록 작성창 v4 – 기울기 없음, 작게 접힌 모서리, 색종이 색(주황/파랑 랜덤)
   접힘선: 밑변 80% ↔ 오른쪽 변 70%  /  접힌 끝 (69.4%, 85.8%)
   접힌 면은 색종이 뒷면처럼 흰색, '보내기'는 접힌 면의 긴 변 방향(-31.9°)
   ========================================= */
.guest-sheet {
  --sheet: var(--orange);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
  transform: translateY(10px) scale(0.97);
}
.guest-sheet[data-color="blue"] { --sheet: var(--blue); }
.guest-modal.open .guest-sheet { transform: none; }

.guest-sheet .guest-field { color: #fff; }
.guest-sheet .guest-field::placeholder { color: #fff; opacity: 0.55; }
.guest-sheet .guest-line { border-top-color: #fff; }
.guest-sheet .guest-count { color: rgba(255, 255, 255, 0.75); }
.guest-sheet .guest-count.is-full { color: #fff; font-weight: 700; }
.guest-bottom { width: 58%; }

.guest-sheet .guest-send {
  background: #fff;
  color: var(--sheet);
  clip-path: polygon(80% 100%, 100% 70%, 69.4% 85.8%);
}
.guest-sheet .guest-send span {
  left: 84%;
  top: 84%;
  transform: translate(-50%, -50%) rotate(-31.9deg);
  font-size: var(--fs-body);
}
.guest-sheet .guest-send:hover { background: var(--black); color: #fff; }

/* 붙는 메모: 점선 흰색, 드래그 없음 */
.guest-note .note-line { border-top-color: #fff; }
.guest-note { cursor: default; touch-action: auto; user-select: text; }

/* 방명록 작성창 v5 – 종이는 흰색, 접힌 '보내기' 면이 주황/파랑 (랜덤, 이 색으로 붙음) */
.guest-sheet {
  --sheet: #fff;
  --flap: var(--orange);
  background: #fff;
  color: var(--black);
}
.guest-sheet[data-color="blue"] { --sheet: #fff; --flap: var(--blue); }
.guest-sheet .guest-field { color: var(--black); }
.guest-sheet .guest-field::placeholder { color: var(--black); opacity: 0.3; }
.guest-sheet .guest-line { border-top-color: var(--black); }
.guest-sheet .guest-count { color: #999; }
.guest-sheet .guest-count.is-full { color: var(--flap); }

.guest-sheet .guest-send {
  background: var(--flap);
  color: #fff;
}
.guest-sheet .guest-send span {
  left: 79.5%;          /* 접힌 면의 뾰족한 모서리 쪽으로 */
  top: 85%;
}
.guest-sheet .guest-send:hover { background: var(--black); color: #fff; }

/* 방명록 메모: 마우스 올려도 그림자/들림 없음 */
.guest-note,
.guest-note:hover,
.guest-note.dragging {
  box-shadow: none;
}
.guest-note:hover { transform: rotate(var(--rot, 0deg)); }

/* + 버튼: 테두리 있는 동그라미 (메뉴 동그라미와 같은 선) */
.add-btn {
  border: 1.5px solid var(--black);
  box-shadow: none;
  background: var(--bg);
  color: var(--black);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.add-btn:hover {
  transform: none;
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.guest-error {
  position: absolute;
  left: 30px;
  bottom: 8px;
  font-size: var(--fs-caption);
  color: var(--orange);
}

/* =========================================================
   오픈 전 커밍순 화면 (js/gate.js)
   ========================================================= */
.soon-gate {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--black);
  text-align: center;
}
.soon-inner { display: flex; flex-direction: column; align-items: center; }
.soon-mark { width: 120px; height: 120px; margin-bottom: 34px; animation: soonFloat 3.2s ease-in-out infinite; }
.soon-mark svg { width: 100%; height: 100%; display: block; }
@keyframes soonFloat { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg) translateY(-6px); } }
.soon-kr { font-family: var(--font-kr); font-size: var(--fs-small); }
.soon-title { margin: 8px 0 26px; font-size: 56px; line-height: 1; }
.soon-open {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-en-title); font-weight: 700; font-size: var(--fs-lead);
}
.soon-open .nav-dot { background: var(--orange); width: 13px; height: 13px; }
.soon-count {
  margin-top: 10px;
  font-family: var(--font-en-title); font-weight: 500; font-size: var(--fs-body);
  font-variant-numeric: tabular-nums; white-space: pre;
}
.soon-label { margin-top: 30px; font-size: var(--fs-display); color: var(--orange); }
.soon-invite {
  margin-top: 30px;
  padding: 12px 26px;
  border: 1.5px solid var(--black);
  border-radius: 999px;
  color: var(--black);
  text-decoration: none;
  font-family: var(--font-kr);
  font-size: var(--fs-small);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.soon-invite:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 768px) {
  .soon-title { font-size: 40px; }
  .soon-mark { width: 96px; height: 96px; }
}