.portfolio-page { background: #fff; }
.inner-header { position: fixed; background: rgba(255, 255, 255, .98); }
.inner-header .brand, .inner-header .main-nav { color: #111; }
.inner-header .menu-toggle span { background: #111; }
.portfolio-hero { padding: 190px 0 105px; background: #f4f1ec; border-bottom: 1px solid #e3ded6; }
.portfolio-hero h1 { margin: 0; font-size: clamp(48px, 6.5vw, 88px); line-height: 1.08; letter-spacing: -.065em; font-weight: 500; }
.portfolio-hero h1 strong { font-weight: 900; }
.portfolio-hero > .container > p:last-child { margin: 30px 0 0; color: #696969; font-size: 17px; }
.portfolio-archive { padding-top: 90px; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 2px solid #171717; }
.archive-toolbar p { margin: 0; font: 800 12px Montserrat, sans-serif; letter-spacing: .16em; }
.archive-toolbar span { color: #777; font-size: 12px; }
.archive-list { display: grid; gap: 100px; padding-top: 56px; }
.archive-project { display: grid; gap: 28px; }
.archive-project-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.archive-project-head small { display: block; margin-bottom: 9px; color: #d84640; font: 800 10px Montserrat, sans-serif; letter-spacing: .14em; }
.archive-project-head h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.archive-project-head span { color: #888; font-size: 12px; }
.archive-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.archive-image { position: relative; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; border: 0; background: #eee; cursor: zoom-in; }
.archive-image:first-child { grid-column: span 2; grid-row: span 2; }
.archive-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.archive-image:hover img { transform: scale(1.045); }
.archive-image.featured:after { content: "대표사진"; position: absolute; top: 14px; left: 14px; padding: 6px 9px; color: #fff; background: #d84640; font-size: 10px; font-weight: 800; }
.archive-status { padding: 70px 0; color: #888; text-align: center; }
.archive-contact { padding: 90px 0; color: #fff; background: #1a1a1a; }
.archive-contact .container { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.archive-contact p { margin: 0 0 12px; color: #d66b66; font-size: 12px; font-weight: 800; }
.archive-contact h2 { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.25; letter-spacing: -.05em; }
.archive-contact a { display: inline-flex; align-items: center; gap: 28px; padding: 18px 22px; border: 1px solid #555; font-size: 14px; font-weight: 800; white-space: nowrap; }
.archive-contact a span { color: #e0645e; font-size: 22px; }
.gallery-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 55px 100px; background: rgba(0, 0, 0, .94); }
.gallery-modal.open { display: flex; }
.gallery-modal figure { width: min(1180px, 100%); margin: 0; color: #fff; }
.gallery-modal figure img { display: block; width: 100%; max-height: 78vh; object-fit: contain; }
.gallery-modal figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; font-size: 13px; }
.gallery-modal figcaption span { color: #888; }
.gallery-close, .gallery-nav { position: absolute; border: 0; color: #fff; background: transparent; cursor: pointer; }
.gallery-close { top: 20px; right: 28px; font-size: 42px; }
.gallery-nav { top: 50%; transform: translateY(-50%); font-size: 58px; }
.gallery-prev { left: 28px; }
.gallery-next { right: 28px; }

@media (max-width: 900px) {
  .portfolio-hero { padding: 150px 0 78px; }
  .archive-list { gap: 72px; }
  .archive-image-grid { grid-template-columns: repeat(2, 1fr); }
  .archive-contact .container { align-items: flex-start; flex-direction: column; }
  .gallery-modal { padding: 55px 60px; }
}

@media (max-width: 580px) {
  .portfolio-hero { padding: 125px 0 62px; }
  .portfolio-hero h1 { font-size: 45px; }
  .portfolio-archive { padding-top: 58px; }
  .archive-project-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .archive-image-grid { grid-template-columns: 1fr; }
  .archive-image:first-child { grid-column: auto; grid-row: auto; }
  .archive-image { aspect-ratio: 4 / 3; }
  .archive-contact { padding: 65px 0; }
  .gallery-modal { padding: 55px 16px 35px; }
  .gallery-nav { top: auto; bottom: 5px; font-size: 46px; }
  .gallery-prev { left: 25px; }
  .gallery-next { right: 25px; }
}