/* ==========================================================
   바렌의 서랍 — 스타일 안내
   ==========================================================
   선택자 { 속성: 값; } 형태로 작성합니다.
   .이름 = HTML의 class, #이름 = HTML의 id

   자주 수정하는 곳 (Ctrl+F로 이름을 검색하세요)
   .wrap                 : 배너와 페이지의 최대 너비
   .header h1            : 상단 사이트 제목
   .projects             : 작품 목록 영역의 전체 너비
   .project-list         : 작품의 열 개수와 카드 사이 간격
   .project              : 작품 카드 하나의 너비
   .project .thumbnail   : 썸네일 비율과 빈칸 색상
   .project h3           : 작품 제목 글자 크기
   .project-info > p     : 작품 설명 글자 크기
   .footer-links         : 직접 추가한 하단 링크 묶음

   margin  = 요소 바깥 여백
   padding = 요소 안쪽 여백
   gap     = 나란히 놓인 요소 사이의 간격
   px      = 픽셀 단위

   파일 마지막의 @media는 작은 화면에서만 적용하는 설정입니다.
   같은 속성을 다시 적으면 보통 아래쪽 규칙이 우선합니다.
   ========================================================== */


/* 1. 글꼴 불러오기 ------------------------------------------ */

/* 제목과 메뉴에 쓰는 글꼴 */
@font-face {
  font-family: Orbit;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2310@1.0/Orbit-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 작품 설명에 쓰는 글꼴 */
@font-face {
  font-family: D2Coding;
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* 2. 페이지 공통 설정 --------------------------------------- */

/* 색상에 이름을 붙여 두는 곳. var(--이름)으로 사용합니다. */
:root {
  --paper: #ffffff;
  --ink: #171717;
  --muted: #626262;
  --line: #d6d6d6;
}

* {
  box-sizing: border-box;
}

html {
  /* 메뉴로 이동했을 때 고정 제목바에 내용이 가려지지 않도록 */
  scroll-padding-top: 112px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Orbit, "Malgun Gothic", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
}

h1,
h2,
h3,
p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

p {
  margin: 0;
  color: var(--muted);
}

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

a:hover {
  text-decoration: underline;
}

/* 키보드 Tab으로 링크를 선택했을 때 보이는 테두리 */
a:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 5px;
}

/* 페이지를 가운데 놓고, 최대 너비를 제한합니다. */
.wrap {
  width: min(1120px, calc(100% - 80px));
  margin: auto;
}


/* 3. 상단 흰 제목바 ----------------------------------------- */

.header {
  position: sticky;             /* 스크롤해도 위에 남도록 */
  top: 0;
  z-index: 100;                  /* 다른 내용보다 앞에 표시 */
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: #ffffff;
}

/* 제목바의 흰 배경만 화면 양끝까지 넓힙니다. */
.header::before {
  content: "";
  position: absolute;
  inset: 0 calc((100% - 100vw) / 2);
  z-index: -1;
  background: #ffffff;
  border-bottom: 1px solid #eeeeee;
  pointer-events: none;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0;
}

.header nav {
  position: absolute;
  right: 0;
  display: flex;
  gap: 20px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}


/* 4. 고양이 배너 -------------------------------------------- */

.photo-banner {
  position: relative; /* 출처 글씨를 배너 안에 배치 */
  margin: 0;
  background: #dddddd;
  overflow: hidden;
}

.photo-banner img {
  display: block;
  width: 100%;
  height: auto;                  /* 원본 이미지 비율을 유지 */
  aspect-ratio: auto;
  object-fit: contain;
}


/* 5. 작품 목록 전체 ----------------------------------------- */

.projects {
  max-width: 620px;
  margin-inline: auto;           /* 왼쪽과 오른쪽 여백을 같게 */
  padding-top: 48px;
}

.section-heading {
  margin: 0 0 26px;
}

/* '작품 (1)' 제목 */
.section-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(2, 273px); /* 273px 카드 2열 */
  column-gap: 40px;              /* 열 사이 최소 간격 */
  row-gap: 40px;                 /* 위아래 카드 간격 */
  justify-content: space-between; /* 남은 너비를 열 사이에 배분 */
  margin-inline: auto;
  padding-top: 0;
}


/* 6. 작품 카드 하나 ----------------------------------------- */

.project {
  display: block;
  width: 100%;
  max-width: 273px;
  min-width: 0;
  justify-self: start;
  padding: 0;
  border: 0;
}

.project .thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;          /* 썸네일 가로 : 세로 비율 */
  background: #000000;           /* 이미지 밖에 남는 빈칸 색 */
  overflow: hidden;
  filter: none;                 /* 원본 컬러 그대로 표시 */
}

.project .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;           /* 자르지 않고 이미지 전체 표시 */
  mix-blend-mode: normal;
  image-rendering: pixelated; /* crisp-edges 미지원 브라우저의 대체 설정 */
  image-rendering: crisp-edges; /* 축소할 때 도트 경계의 색이 섞이는 것을 줄입니다. */
}

.project-info {
  padding-top: 12px;             /* 썸네일과 제목 사이 간격 */
}

.project h3 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 8px;
  font-family: Orbit, "Malgun Gothic", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
}

/* > p는 project-info 바로 안에 있는 설명 문단을 뜻합니다. */
.project-info > p {
  font-family: D2Coding, "Malgun Gothic", monospace;
  font-size: 15px;
  line-height: 24px;
  color: #555555;
}

/* PC 지원, 모바일 지원 같은 태그 */
.project .platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;                 /* 세로 간격, 가로 간격 */
  margin-top: 10px;
  font-family: Orbit, "Malgun Gothic", sans-serif;
  font-size: 11px;
  line-height: 20px;
  color: #666666;
}


/* 아이콘과 글자를 나란히 놓습니다. */
.platform-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 원본 16×16 크기 유지: 도트를 부드럽게 뭉개지 않습니다. */
.platform-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  image-rendering: pixelated;
}

/* 7. 하단 링크와 저작권 ------------------------------------- */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;                   /* 위의 배너와 같은 너비 */
  max-width: none;
  margin: 52px auto 0;
  padding: 24px 0 32px;          /* 위, 좌우, 아래 여백 */
  border-top: 1px solid #eeeeee;
  font-size: 12px;
  color: var(--muted);
}

/* 직접 추가한 링크 묶음: 기존 설정을 그대로 유지했습니다. */
.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;                    /* 바렌의 방 ↗와 후원 링크 사이 */
  flex-wrap: wrap;
}


/* 8. 키보드 사용자를 위한 바로가기 -------------------------- */

.skip {
  position: absolute;
  top: -60px;
  left: 10px;
  z-index: 5;
  padding: 10px;
  background: #ffffff;
}

.skip:focus {
  top: 10px;
}


/* 9. 작은 화면에서 달라지는 부분 ----------------------------
   @media 안의 규칙은 조건에 맞는 화면에서만 적용됩니다.
   아래에 없는 속성은 위의 공통 설정을 그대로 사용합니다.
   ---------------------------------------------------------- */

/* 화면 너비가 900px 이하일 때 */
@media (max-width: 900px) {
  .wrap {
    width: calc(100% - 48px);
  }
}

/* 601~800px: 2열은 유지하면서 카드가 조금 줄어들 수 있게 */
@media (max-width: 800px) and (min-width: 601px) {
  .project-list {
    grid-template-columns: repeat(2, minmax(0, 273px));
    column-gap: 28px;
  }
}

/* 600px 이하: 휴대폰처럼 좁은 화면 */
@media (max-width: 600px) {
  html {
    scroll-padding-top: 132px;
  }

  .wrap {
    width: calc(100% - 36px);
  }

  .header {
    height: auto;
    min-height: 96px;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
  }

  .header h1 {
    font-size: 22px;
  }

  .header nav {
    position: static;
  }

  .projects {
    max-width: 273px;
    padding-top: 32px;
  }

  .section-heading {
    margin-bottom: 22px;
  }

  .project-list {
    grid-template-columns: minmax(0, 273px); /* 모바일은 1열 */
    row-gap: 32px;
    justify-content: center;
  }

  footer {
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 36px;
  }

  footer > div {
    width: 100%;                 /* 링크 묶음이 한 줄을 차지 */
  }
}

/* 제목 옆 손그림 배지: 비율을 유지하고 GIF를 그대로 표시합니다. */
.project .status-badge {
  display: block;
  width: 50px;
  height: 30px;
  flex: 0 0 50px;
  margin-left: auto; /* 배지를 카드 오른쪽 끝에 정렬 */
  object-fit: contain;
  image-rendering: auto;
}
.project h3 > a {
  min-width: 0;
  overflow-wrap: anywhere; /* 긴 제목은 배지 앞에서 줄바꿈 */
}

/* 10. 언어 선택: 왼쪽 언어 / 가운데 제목 / 오른쪽 메뉴 */
.language-switch {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.language-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #777777;
  font: inherit;
  cursor: pointer;
}

.language-switch button[aria-pressed="true"] {
  color: #171717;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.language-switch button:focus-visible {
  outline: 2px solid #111111;
  outline-offset: 2px;
}

/* 영어 제목과 메뉴가 겹치지 않도록 좁은 화면에서는 줄을 나눕니다. */
@media (max-width: 1000px) {
  .header {
    height: auto;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
  }

  .language-switch,
  .header nav {
    position: static;
  }

  html {
    scroll-padding-top: 160px;
  }
}
/* 티스토리 스킨과 같은 배너 사진 출처 표기 */
.photo-banner .cover-photo-credit {
  position: absolute;
  right: 14px;
  bottom: 10px;
  z-index: 30;
  max-width: calc(100% - 28px);
  font-size: 10px;
  line-height: 1.4;
  text-align: right;
  color: rgba(255, 255, 255, 0.58);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.cover-photo-credit a,
.cover-photo-credit span {
  display: inline;
  background: none;
  color: inherit;
  vertical-align: baseline;
}

.cover-photo-credit a {
  text-decoration: none;
}

.cover-photo-credit a:hover,
.cover-photo-credit a:focus-visible {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}