/*
 * projects.html 전용 규칙입니다. 원본 <style> 에서 그대로 옮겼습니다.
 * 공통 규칙은 site.css 에 있으며, 이 파일이 나중에 로드되어 우선합니다.
 */

:root {
  --c-bg: #FFFFFF; --c-text: #2B2B2B; --c-text-sub: #4A4A4A; --c-text-mute: #6B6B6B; --c-text-faint: #5A5A5A;
  --c-dark-bg: #0F0F0E; --c-dark-text: #F1F1F1; --c-dark-sub: #C6C6C6;
  --c-line: #E0E0E0; --c-line-strong: #D6D6D6; --c-line-dark: #2F2F2D;
  --c-fill: #ECECE9; --c-fill-soft: #F6F6F4;
  --c-brand: #0016D5; --c-brand-hover: #0011A8;
  --font-head: 'Paperlogy', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --fs-h1: 56px; --fs-h2: 24px; --fs-body: 18px; --fs-caption: 14px;
  --pad-x: 120px; --pad-top: 200px; --pad-bottom: 200px;
  --gap-s: 16px; --gap-m: 24px; --gap-l: 40px; --gap-xl: 64px;
  --r-card: 6px; --r-pill: 999px; --r-modal: 24px; --header-h: 88px;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
}

h1, h2, p, dl, dd { margin: 0; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; }

/* header */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  display: flex; align-items: center; padding: 0 var(--pad-x);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(12px);
}

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; width: 100%; }

.brand-logo { display: flex; align-items: center; gap: 14px; }

.site-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; white-space: nowrap; }

.site-nav a[aria-current="page"] { font-weight: 500; }

.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.nav-overlay {
  position: fixed; inset: 0; height: 100vh; z-index: 49; background: var(--c-dark-bg); color: var(--c-dark-text);
  display: none; flex-direction: column; justify-content: center; gap: 32px; padding: 0 var(--gap-m);
}

.nav-overlay__meta { margin-top: var(--gap-m); font-size: var(--fs-caption); color: #8A8A84; }

/* page head */

.page-head { padding: var(--pad-top) var(--pad-x) 0; }

.page-head__inner { display: flex; flex-direction: column; gap: var(--gap-l); }

.back-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--c-text-sub); }

.page-label { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-sub); }

.page-title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h1); line-height: 1.35; letter-spacing: -0.02em; }

.page-title .accent { color: var(--c-brand); }

.page-sub { font-size: var(--fs-body); line-height: 1.7; color: var(--c-text-sub); }

/* list */

.project-list { padding: 72px var(--pad-x) var(--pad-bottom); }

.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 0.5px solid var(--c-line); padding-bottom: 20px; }

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

.filter-chip {
  border: 0.5px solid var(--c-line); border-radius: var(--r-pill); background: transparent; color: var(--c-text);
  padding: 10px 20px; font-size: 15px; cursor: pointer;
  transition: background 180ms linear, color 180ms linear, border-color 180ms linear;
}

.filter-chip.is-active { background: var(--c-text); color: #FFFFFF; border-color: var(--c-text); }

.filter-count { font-size: var(--fs-caption); color: var(--c-text-mute); white-space: nowrap; }

.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-xl) 48px; margin-top: var(--gap-xl); }

.project-card { display: flex; flex-direction: column; gap: 20px; cursor: pointer; }

.project-card__thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); background: var(--c-fill); transition: transform 320ms var(--ease-std); }

.project-card:hover .project-card__thumb { transform: translateY(-6px); }

.project-card__tag { font-size: var(--fs-caption); color: var(--c-text-mute); }

.project-card__title { font-family: var(--font-head); font-weight: 500; font-size: var(--fs-h2); line-height: 1.35; letter-spacing: -0.02em; }

.project-card__desc { font-size: 16px; line-height: 1.7; color: var(--c-text-sub); text-wrap: pretty; }

.project-card__meta { margin-top: auto; text-align: right; font-size: var(--fs-caption); color: var(--c-text-mute); }

.list-cta { display: flex; justify-content: center; margin-top: 96px; }

.btn-primary { border: 0; border-radius: var(--r-pill); background: var(--c-brand); color: #FFFFFF; padding: 16px 32px; font-size: 16px; cursor: pointer; transition: background 200ms linear; white-space: nowrap; }

.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 */

.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 는 흐름 안에 있어야 해서 버튼이 그리드 칸을 하나 차지하므로,
 * 세 요소의 자리를 직접 지정하고 버튼은 글 영역과 같은 칸에 겹쳐 올립니다.
 *
 * 문의 결과 모달(#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; border-radius: var(--r-pill); background: rgba(255,255,255,0.82); backdrop-filter: blur(6px); }

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

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

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

.device-phone { width: 260px; height: 520px; margin: 0 auto; border-radius: 28px; background: var(--c-fill); box-shadow: 0 18px 40px rgba(15,15,14,0.10); }

.device-browser { border-radius: 8px; overflow: hidden; background: #FFFFFF; box-shadow: 0 18px 40px rgba(15,15,14,0.10); }

.device-browser__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-bottom: 0.5px solid #E8E8E8; }

.device-browser__bar span { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-strong); }

.device-browser__screen { width: 100%; aspect-ratio: 16 / 10; background: var(--c-fill); }

.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; }

/* footer */

.site-footer nav { display: flex; flex-wrap: wrap; gap: 32px; font-size: var(--fs-caption); }

.site-footer__meta { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-caption); line-height: 1.8; color: var(--c-dark-sub); }

@media (max-width: 1024px) {
  :root { --pad-x: 48px; --pad-top: 160px; --pad-bottom: 120px; --fs-h1: 40px; }
  .site-nav { display: none; }
  .nav-burger { display: flex; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .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; }
  .device-phone { width: 220px; height: 440px; }
}

@media (max-width: 680px) {
  :root { --pad-x: 20px; --pad-top: 120px; --pad-bottom: 80px; --fs-h1: 28px; --fs-h2: 20px; --fs-body: 16px; }
  .brand-logo__wordmark { display: none; }
  .project-grid { grid-template-columns: 1fr; }
  .modal { padding: 12px; }
  .modal__panel { width: 100%; }
  .modal__media, .modal__body { padding: 24px 20px; }
  .device-phone { width: 180px; height: 360px; }
  .spec-list__row { grid-template-columns: 1fr; gap: 6px; }
}