/* ============================================================================
   Noah W. Jin — Portfolio (Mobile)
   ----------------------------------------------------------------------------
   이 파일은 index.html에서 <link ... media="(max-width: 767px)"> 로 연결되어
   있어서, 화면 폭이 767px 이하일 때만 적용됩니다 (그 이상은 css/style.css의
   데스크탑 레이아웃이 그대로 적용됩니다).

   데스크탑 시안과는 완전히 독립된 모바일 전용 레이아웃입니다 (데스크탑을
   그대로 축소하는 방식이 아니라, jeffkoons.com의 미니멀하고 여백이 넉넉한
   갤러리 사이트 느낌을 참고해 새로 설계했습니다):
     - 화면 위쪽엔 작은 로고 + "+" 메뉴 버튼(.mobile-topbar)이 한 번
       나오고, 이건 스크롤해도 따라오지 않는 일반 콘텐츠입니다(고정 아님).
       버튼을 누르면 Info/Contact 링크가 있는 전체화면 메뉴가 열립니다.
     - 화면 옆에 세로로 눕혀 있던 INFO/CONTACT 탭 대신 위 메뉴를 쓰고,
       데스크탑에서 화면 하단에 항상 떠 있던 거대한 "Noah W. Jin" 워드마크는
       모바일에서도 같은 element(.wordmark)를 그대로 재사용해 크기만 줄여서
       화면 하단에 고정합니다 — 스크롤을 아무리 내려도 항상 따라오다가,
       페이지 맨 끝에서만 검은 저작권 바에 덮입니다(데스크탑과 동일한 원리).
     - 홈 화면은 작품을 위에서 아래로 순서대로 한 줄씩 쌓아 보여주는
       단순한 세로 목록입니다.
     - 작품 상세 페이지는 2열 그리드 대신 세로로 한 장씩 쌓입니다.
     - INFO 페이지는 사진/글이 옆으로 나란히 있던 것을 위아래로 쌓고,
       사진은 (동일 사진 반복이라) 첫 장만 보여줍니다.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   공통: 데스크탑 전용 회전된 옆 탭만 숨김.
   .wordmark는 숨기지 않고 아래에서 모바일용으로 다시 스타일링합니다
   (같은 엘리먼트를 재사용 — 화면 하단 고정 + 저작권 바에 덮이는 동작이
    이미 js/main.js의 setupWordmarkHideEffect()에 구현되어 있어서 그대로
    이어받을 수 있습니다).
---------------------------------------------------------------------------- */
.side-tab {
  display: none !important;
}

/* 데스크탑에서 1210px짜리 고정 폭에 맞춰뒀던 워드마크를, 모바일에서는
   화면 폭 전체를 쓰는 작은(하지만 눈에 띄는) 가운데 정렬 버전으로 다시
   그립니다. */
.wordmark {
  left: 0;
  bottom: 0;
  margin-left: 0;
  width: 100%;
  padding: 0 12px;
  /* vw 기준으로 화면 폭에 비례해서 커지므로, 화면이 좁든 넓든 항상 같은
     비율로 "Noah W. Jin"이 한 줄에 다 들어갑니다 (줄바꿈 방지). 실제
     Inter Black 900 폭을 캔버스로 측정해서, 320~430px 폭 화면에서
     한 줄이 깨지지 않는 한도 내 최대치인 15vw로 잡았습니다. */
  font-size: clamp(40px, 15vw, 70px);
  line-height: 0.95;
  text-align: center;
  white-space: nowrap;
  z-index: 25;
}

.wordmark a {
  display: block !important;
  width: 100% !important;
  justify-content: center !important;
}

.wordmark span {
  margin-right: 0.14em !important;
  white-space: nowrap;
}

/* 화면 위쪽의 작은 로고. 고정하지 않고 페이지 맨 위에 한 번만 나오는
   일반 콘텐츠입니다 (스크롤해도 따라오지 않음). */
.mobile-topbar {
  display: flex;
  position: static;
  align-items: center;
  padding: 20px 20px 0 20px;
}

.mobile-logo {
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--color-black);
}

/* "+" 메뉴 버튼 (jeffkoons.com 스타일: 얇은 십자 아이콘).
   로고와 달리 화면에 고정해서, 스크롤을 아무리 내려도 항상 같은 자리에
   떠 있으면서 따라옵니다. */
.mobile-menu-btn {
  display: block;
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 90;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-black);
  padding: 4px 2px;
}

/* "+" 버튼이 화면 오른쪽 위에 고정되어 있으므로, 메뉴도 위에서 아래로
   펼쳐지도록 합니다. */
.mobile-menu-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--color-white);
  z-index: 200;
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}

.mobile-menu-overlay.is-open {
  transform: translateY(0);
}

.mobile-menu-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--color-black);
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  padding: 0 24px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.mobile-tab {
  font-weight: 700;
  font-size: 26px;
  color: var(--color-black);
}

.mobile-tab--active {
  color: var(--color-muted);
}

/* ----------------------------------------------------------------------------
   캔버스: 1440px 고정 폭 대신 화면 폭 그대로.
---------------------------------------------------------------------------- */
/* 데스크탑과 같은 원리: 창(뷰포트)보다 콘텐츠가 짧을 때(CONTACT 등)도
   검은 저작권 바가 화면 중간에 붕 뜨지 않고 항상 화면 맨 아래에 붙도록,
   캔버스 자체의 최소 높이를 화면 높이로 잡아 남는 공간을 콘텐츠 쪽으로
   흡수시킵니다. (홈 화면만 갤러리 자체 높이를 JS가 계산해 넣으므로
   auto로 둡니다.)
   100vh 대신 100dvh를 씁니다 — 모바일 사파리/크롬은 스크롤에 따라 주소창이
   접혔다 펴졌다 하는데, 100vh는 "주소창이 완전히 접혔을 때"의 가장 큰
   높이 기준으로 고정돼서, 실제 화면보다 캔버스가 더 크게(길게) 잡히는
   경우가 있었습니다. 그러면 콘텐츠가 짧은 CONTACT 페이지에서, 카피라이트
   바까지 다 본 뒤에도 그 "여유분"만큼 더 스크롤할 수 있게 되고, 그 구간을
   더 내리면 고정된 워드마크가 카피라이트 바 아래로 다시 드러나 보이는
   버그가 있었습니다. 100dvh는 지금 실제로 보이는 화면 높이를 그때그때
   반영해서 이 여유분 자체가 생기지 않습니다. (100dvh를 모르는 구형
   브라우저는 이 줄을 무시하고 바로 위 100vh를 그대로 씁니다.) */
.canvas {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.canvas--home {
  min-height: auto;
}

/* ----------------------------------------------------------------------------
   HOME — 데스크탑처럼 자유롭게 흩뿌린 배치이되, 썸네일을 훨씬 작게
   (js/main.js의 renderHome()에서 isMobile 분기로 좌표를 다시 계산합니다.
    left/top/width/height는 JS가 인라인 스타일로 그대로 넣어주므로, 여기서는
    데스크탑 기본 position:absolute를 건드리지 않고 살짝의 여백/스타일만
    조정합니다.)
---------------------------------------------------------------------------- */
.gallery {
  padding: 4px 0;
}

/* 터치 화면엔 hover가 없어 :hover로 나타나던 제목/연도 오버레이를 볼 수
   없으므로, 아예 숨겨서 작은 썸네일들이 사진만 조용히 흩어져 있는
   미니멀한 느낌을 유지합니다 (탭하면 상세 페이지에서 제목/연도를 볼 수
   있음). 블러/확대 효과도 함께 끕니다. */
.gallery-item:hover img {
  filter: none;
  transform: none;
}

.gallery-item .tile-overlay {
  display: none;
}

/* ----------------------------------------------------------------------------
   WORK DETAIL — 2열 그리드 대신 세로로 한 장씩
---------------------------------------------------------------------------- */
.work-canvas {
  padding-top: 28px;
}

.work-grid,
.work-grid--single {
  grid-template-columns: 1fr;
  width: 100%;
  padding: 0 18px;
  gap: 10px;
}

.work-labels {
  width: 100%;
  padding: 28px 18px 60px 18px;
}

.work-labels .label-name {
  font-size: 20px;
  margin: 0 0 6px 0;
}

.work-labels .label-year {
  font-size: 15px;
  margin: 0 0 32px 0;
}

.work-labels .label-material {
  font-size: 15px;
  margin: 0 0 6px 0;
}

.work-labels .label-size {
  font-size: 15px;
}

/* ----------------------------------------------------------------------------
   INFO / CV — 사진/글 좌우 배치 대신 위아래로 쌓음
---------------------------------------------------------------------------- */
.info-row {
  flex-direction: column;
  padding: 28px 18px 40px 18px;
  gap: 20px;
}

/* 왼쪽 사진들은 원래 같은 사진의 반복이라, 모바일에서는 공간을 아끼기
   위해 첫 장만 보여줍니다. */
.info-photo-col {
  width: 100%;
  flex: 0 0 auto;
}

.info-photo-col img {
  width: 110px;
  height: 110px;
}

.info-photo-col img:nth-child(n + 2) {
  display: none;
}

.info-content-col {
  width: 100%;
  padding-bottom: 0;
}

.info-name {
  font-size: 18px;
  margin: 0 0 14px 0;
}

.info-bio {
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 40px 0;
}

.info-section {
  margin-bottom: 48px;
}

/* 데스크탑에서는 이 구분선 위치를 옆 사진 하단에 맞추려고 JS가 margin-top을
   계산해 넣어주는데, 사진/글이 세로로 쌓이는 모바일에서는 필요 없는
   보정이라 0으로 되돌립니다. */
.info-divider {
  margin-top: 0 !important;
  margin-bottom: 16px;
}

.info-section-title {
  font-size: 16px;
  margin: 0 0 18px 0;
}

.info-section-body {
  font-size: 14px;
  line-height: 1.5;
}

.info-group {
  margin: 0 0 20px 0;
}

.info-group-year,
.info-group-name,
.info-group-detail {
  font-size: 14px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   CONTACT
---------------------------------------------------------------------------- */
.contact-page {
  padding: 100px 20px 120px 20px;
}

.contact-email {
  font-size: 20px;
  margin: 0 0 40px 0;
}

.contact-social-icon img {
  width: 32px;
  height: 32px;
}

/* ----------------------------------------------------------------------------
   FOOTER
---------------------------------------------------------------------------- */
.site-footer {
  height: 60px;
  padding-bottom: 12px;
}

.site-footer p {
  font-size: 11px;
}