/*
 * 프로젝트 모달 스타일
 *
 * page-projects.css 안에 있던 모달 규칙을 글자 그대로 옮겨 담은 파일입니다.
 * 메인 페이지(/)는 page-projects.css 를 부르지 않기 때문에,
 * 메인에서도 같은 모달을 쓰려면 이 파일이 따로 필요합니다.
 *
 * 원본 page-projects.css 는 그대로 두었습니다.
 * 두 파일의 내용이 어긋나지 않는지는 테스트가 확인합니다.
 *
 * --r-modal 은 page-projects.css 의 :root 에만 있던 값이라 여기서 같은 값으로 정의합니다.
 * (메인의 page-index.css 에는 없기 때문입니다. 나머지 변수는 양쪽 모두에 있습니다.)
 */

:root {
  --r-modal: 24px;
}

.btn-round { width: 40px; height: 40px; border: 0.5px solid var(--c-line-strong); border-radius: var(--r-pill); background: transparent; color: var(--c-text); cursor: pointer; transition: background 180ms linear, color 180ms linear;
}

.btn-round:hover { background: var(--c-text); color: #FFFFFF;
}

.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 48px; background: rgba(15,15,14,0.76);
}

.modal[data-open="1"] { display: flex;
}

.modal__panel {
  position: relative; width: 1080px; max-width: 100%; max-height: 100%; overflow-y: auto;
  scrollbar-width: none; background: #FFFFFF; border-radius: var(--r-modal);
  display: grid; grid-template-columns: 520px 1fr;
}

.modal__panel::-webkit-scrollbar { width: 0; height: 0;
}

.modal__close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--c-text); cursor: pointer;
}

/*
 * 프로젝트 모달의 닫기 버튼은 스크롤해도 제자리에 머무릅니다.
 *
 * .modal__panel 이 스크롤 상자(overflow-y: auto)라, 그 안에서 absolute 로 두면
 * 내용과 함께 밀려 올라가 화면에서 사라집니다. 그래서 sticky 로 바꿉니다.
 *
 * sticky 는 흐름 안에 있어야 해서 버튼이 그리드 칸을 하나 차지합니다.
 * 그대로 두면 이미지·글 칸이 밀리므로 세 요소의 자리를 직접 지정하고,
 * 버튼은 글 영역과 같은 칸에 겹쳐 올립니다.
 * 오른쪽 글 영역(.modal__body)도 이미 같은 방식으로 붙어 있습니다 (site-content.css).
 *
 * 문의 결과 모달(#inquiryModal)은 한 칸짜리 작은 창이고 스크롤도 없어 건드리지 않습니다.
 */
#projectModal .modal__close {
  position: sticky; top: 16px; right: auto;
  grid-area: 1 / 2 / 2 / 3; justify-self: end; align-self: start; margin: 16px 16px 0 0;
}

#projectModal .modal__media { grid-area: 1 / 1 / 2 / 2;
}

#projectModal .modal__body { grid-area: 1 / 2 / 2 / 3;
}

/* 이제 버튼이 내용 위를 계속 지나가므로, 아래에 무엇이 오든 아이콘이 읽히도록 받침을 둡니다 */
#projectModal .modal__close { border-radius: var(--r-pill); background: rgba(255,255,255,0.82); backdrop-filter: blur(6px);
}

.modal__media { background: var(--c-fill-soft); padding: 56px 40px; display: flex; flex-direction: column; gap: var(--gap-m); min-width: 0;
}

.modal__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-s);
}

.modal__thumbs div { aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--c-fill);
}

.modal__body { padding: 56px 48px; display: flex; flex-direction: column; gap: 28px; min-width: 0;
}

.tag-pill { align-self: flex-start; border: 0.5px solid var(--c-line); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; color: var(--c-text-sub);
}

.modal__title { font-family: var(--font-head); font-weight: 500; font-size: 32px; line-height: 1.35; letter-spacing: -0.02em;
}

.modal__overview { font-size: 17px; line-height: 1.75; color: var(--c-text-sub); text-wrap: pretty;
}

.spec-list { display: flex; flex-direction: column;
}

.spec-list__row { display: grid; grid-template-columns: 88px 1fr; gap: var(--gap-s); border-top: 0.5px solid var(--c-line); padding: var(--gap-s) 0;
}

.spec-list__row:last-child { border-bottom: 0.5px solid var(--c-line);
}

.spec-list dt { font-size: var(--fs-caption); color: var(--c-text-mute);
}

.spec-list dd { font-size: 16px;
}

.block { display: flex; flex-direction: column; gap: 12px;
}

.block__label { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-mute);
}

.block p { font-size: 16px; line-height: 1.75; text-wrap: pretty;
}

.stack-chips { display: flex; flex-wrap: wrap; gap: 8px;
}

.stack-chips span { border: 0.5px solid var(--c-line); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; color: var(--c-text-sub);
}

.modal__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap-s); margin-top: 4px;
}

.modal__nav { display: flex; align-items: center; gap: 8px;
}

@media (max-width: 1024px) {
  .modal { padding: var(--gap-m);
  }

  .modal__panel { width: 640px; grid-template-columns: 1fr;
  }

  /* 한 칸으로 접히면 이미지와 글이 위아래로 쌓입니다.
     버튼은 두 칸 모두에 걸쳐 두어야 끝까지 내려도 붙어 있습니다. */
  #projectModal .modal__close { grid-area: 1 / 1 / 3 / 2;
  }

  #projectModal .modal__media { grid-area: 1 / 1 / 2 / 2;
  }

  #projectModal .modal__body { grid-area: 2 / 1 / 3 / 2;
  }

  .modal__media, .modal__body { padding: 40px 32px;
  }
}

@media (max-width: 680px) {
  .modal { padding: 12px;
  }

  .modal__panel { width: 100%;
  }

  .modal__media, .modal__body { padding: 24px 20px;
  }

  .spec-list__row { grid-template-columns: 1fr; gap: 6px;
  }
}