/* ─── 리셋 & 기본 ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f0f0f0;
  color: #333333;
  font-family:
    'Neue Haas Grotesk Display Pro',
    'NeueHaasGroteskDisplayPro',
    'Helvetica Neue',
    Helvetica,
    'Pretendard Variable',
    sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── 헤더 ─── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f0f0f0;
  padding: 6px 6px 6px 6px;
}

.header-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 20px;
}

.logo {
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  cursor: pointer;
}

.logo:hover {
  text-decoration: line-through;
}

/* 카테고리 버튼 그룹 */
.cat-group {
  display: flex;
  gap: 4px;
  margin-left: 80px;
  align-items: center;
  flex-shrink: 0;
}

.cat-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  padding: 0;
  letter-spacing: 0.04em;
}

.cat-btn:hover,
.cat-btn.active {
  text-decoration: line-through;
}

/* INFO 버튼 */
.nav-info {
  position: absolute;
  left: 50%;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.nav-info:hover,
.nav-info.active {
  text-decoration: line-through;
}

/* INSTAGRAM 버튼 */
.nav-instagram {
  margin-left: auto;
  text-decoration: none;
  color: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.nav-instagram:hover {
  text-decoration: line-through;
}

/* ─── 포트폴리오 그리드 ─── */
#page-portfolio {
  padding: 0px 4px 40px 4px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.project-card {
  cursor: pointer;
}

.project-card:hover .project-thumb {
  opacity: 0.6;
}

.project-thumb {
  width: 100%;
  height: auto;
  display: block;
  background-color: #d9d9d9;
}

.project-meta {
  padding: 3px 0 0 0;
  line-height: 1.4;
}

.project-title-row {
  display: flex;
  align-items: baseline;
}

.project-title {
  width: 70%;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.project-date {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.project-client   { font-size: 16px; color: #333; font-weight: 600; }
.project-category { font-size: 16px; color: #333; font-weight: 600; }




/* ─── INFO 페이지 ─── */
#page-info {
  display: none;
  padding: 30px 4px 60px 50%;
}

.info-content {
  max-width: 800px;
}

.info-content p {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 2;
  margin-bottom: 2.5em;
}

.info-content p:last-child {
  margin-bottom: 0;
}

.info-content a {
  color: inherit;
  text-decoration: none;
}

.info-content a:hover {
  text-decoration: line-through;
}

/* INFO 페이지 배경색 */
body.info-mode {
  background-color: #B3FF9D;
}
body.info-mode header {
  background-color: #B3FF9D;
}

/* 클라이언트 */
.clients {
  padding: 120px 0px 60px 0px;
}

.clients-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 230px);
  gap: 24px 0px;
}

.clients-grid img {
  width: 180px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* ─── INFO 모드 전환 ─── */
body.info-mode #page-portfolio { display: none; }
body.info-mode #page-info      { display: block; }

/* ─── 프로젝트 세부 페이지 ─── */
#page-detail {
  display: none;
}

.detail-info {
  display: flex;
  align-items: flex-start;
  padding: 30px 6px 40px 6px;
}

.detail-title {
  width: 50%;
  font-weight: 600;
  color: #333;
}

.detail-meta {
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.detail-images {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 40px 4px;
}

.detail-images img,
.detail-images video {
  width: 100%;
  height: auto;
  display: block;
}

body.detail-mode #page-portfolio { display: none; }
body.detail-mode #page-detail    { display: block; }






@media (max-width: 1600px) {
  body { font-size: 13px; }
  .logo, .cat-btn, .nav-info, .nav-instagram,
  .project-title, .project-client, .project-category, .project-date,
  .info-content p, .clients-label { font-size: 13px; line-height: 1.2; font-weight: 600;}
  .project-title { width: 90%; }
}

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

.info-mobile { display: none; }

@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(1, 1fr); }
  #page-info { padding-left: 6px; }
  .info-desktop { display: none; }
  .info-mobile  { display: block; }

  .header-row {
    flex-wrap: wrap;
    height: auto;
  }

  .logo {
    flex: 0 0 auto;
  }

  .cat-group {
    order: 3;
    width: 100%;
    margin-left: 0;
    margin-top: 4px;
    gap: 8px;
  }

  .nav-info {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 32px; /* ← 숫자로 INFO와 INSTAGRAM 사이 간격 조절 */
  }

  .nav-instagram {
    margin-left: 0;
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .clients-grid img {
    width: 100%;
  }
}

::selection {
  background-color: #333333; /* 선택 배경색 */
  color: #f0f0f0;            /* 선택된 텍스트 색 */
}