/* home.css — 홈. 모자이크 · Now · 사진 3장
   그리드 위치는 전부 여기 클래스로만 준다. 인라인 style 금지(함정 3). */

/* ===========================================================
   모자이크 — 4열 × 4행, 모서리 각짐
   =========================================================== */

/* 홈의 간격(2026-08-29 시험). 값 셋 다 여기 있고, 되돌리려면 전부 0 으로 둔다.
   가장자리는 붙인 채로 둔다 — 모자이크에 바깥 여백을 주지 않으므로
   간격은 타일과 타일 사이에만 생기고, 그 틈으로 body 의 크림이 비친다.
   데스크톱과 모바일이 같은 값을 쓴다.

   상단 블록(색면 넷 · 메뉴 셋 · 세로 사진)은 붙인다 — 색면이 맞닿아야
   네 색이 한 덩어리로 읽힌다. 벌어지는 것은 사진이 걸린 자리뿐이다. */
:root{
  /* 0 에도 단위를 붙인다. calc() 는 길이에서 단위 없는 수를 뺄 수 없어
     calc(16px - 0) 처럼 되면 선언 전체가 무효가 되고 간격이 조용히 사라진다.
     아래 .m-photo2 의 margin-top 이 이 값들을 빼서 쓴다. */
  --home-gap-x: 0px;      /* 상단 블록의 가로 — 붙임 */
  --home-gap-y: 0px;      /* 상단 블록의 세로 — 붙임 */
  --home-gap-band: 16px;  /* 상단 블록 ↔ 파노라마 두 장 */
  --home-gap-photo: 16px; /* Now 아래 사진 셋 — 사이와 좌우 바깥 */
}

.mosaic{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:1fr 1fr 1fr 1.45fr;
  height:96vh;
  min-height:620px;
  column-gap:var(--home-gap-x);
  row-gap:var(--home-gap-y);
}

/* 그리드는 줄마다 간격을 달리 줄 수 없다. 파노라마 줄 위의 자리는 그 칸의
   margin 으로 만든다 — 이미 있는 세로 간격 위에 그 차이만큼만 얹는다.
   좌우는 화면 끝에 붙인 채로 둔다(Now 아래 사진과 달리 사방 여백이 아니다).
   파노라마 두 장끼리는 붙는다 — 모자이크의 가로 간격이 0 이라 따로 할 일이 없다. */
.m-photo2, .m-photo3{ margin-top:calc(var(--home-gap-band) - var(--home-gap-y)) }

.cell{
  position:relative;
  overflow:hidden;
  padding:20px var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  isolation:isolate;
  border-radius:0;
}
/* 비운 색면(2026-08-29 시험 2단계). 면은 크림, 글자는 잉크.
   다만 이름만은 그 사람의 진한 짝으로 칠한다 — 면이 빠져도 색이 남아야
   귀속 표시가 끊기지 않는다. 색은 ui.js 가 붙인 .text-<id> 가 준다.
   직접 걸린 규칙이 상속을 이기므로 .cell.blank 의 잉크를 덮는다.
   블롭은 면 색(currentColor)에서 파생되므로 크림 위에서는 보이지 않는다 — 지운다.
   어느 자리가 비는지는 매 방문마다 달라진다(js/home.js 의 blankAt). */
.cell.blank{ color:var(--ink) }
.cell.blank .blob{ display:none }

.cell h2{ font-size:clamp(20px,2.1vw,30px) }
.cell h3{ font-size:clamp(15px,1.35vw,19px); font-weight:var(--w-mid); letter-spacing:-.01em }
.cell .num{ opacity:.6 }
.cell .sub{
  font-family:var(--mono);
  font-size:11px;
  line-height:1.5;
  margin-top:6px;
  opacity:.72;
  display:block;
}
.cell .wordmark{ font-size:clamp(17px,1.7vw,25px) }

/* 자리 — 데스크톱
   r1 [ 로고 (2열) ][ 세로사진 (r1-3) ][ Works   ]
   r2 [ P1 ][ P2 ]                    [ Artists ]
   r3 [ P3 ][ P4 ]                    [ About   ]
   r4 [ 파노라마 (2열) ][ 파노라마 (2열) ]              */
.m-logo   { grid-column:1/3; grid-row:1/2 }
.m-photo1 { grid-column:3/4; grid-row:1/4 }
.m-works  { grid-column:4/5; grid-row:1/2 }
.m-p1     { grid-column:1/2; grid-row:2/3 }
.m-p2     { grid-column:2/3; grid-row:2/3 }
.m-artists{ grid-column:4/5; grid-row:2/3 }
.m-p3     { grid-column:1/2; grid-row:3/4 }
.m-p4     { grid-column:2/3; grid-row:3/4 }
.m-about  { grid-column:4/5; grid-row:3/4 }
.m-photo2 { grid-column:1/3; grid-row:4/5 }
.m-photo3 { grid-column:3/5; grid-row:4/5 }

/* 블롭 — 크기·자리·색 모두 클래스로. 색은 currentColor 에서 파생시켜
   어떤 면 위에 올려도 따라온다. */
.blob{
  position:absolute;
  border-radius:50%;
  background:currentColor;
  z-index:-1;
  transition:transform .55s var(--ease);
}
.blob-tr{ width:66px; height:66px; right:-22px; top:-22px;    opacity:.18 }
.blob-br{ width:88px; height:88px; right:-30px; bottom:-30px; opacity:.07 }
.blob-ink{ color:var(--ink) }
/* 마우스에 반응하는 것은 블롭이 있는 칸뿐이다 — 메뉴 세 칸과 색면 네 칸.
   로고 칸에는 블롭이 없고 링크도 아니라 아무 일도 일어나지 않는다. */
.cell:hover .blob,
.cell:focus-visible .blob{ transform:scale(1.9) }

.cell:focus-visible{ outline:3px solid currentColor; outline-offset:-3px }

/* 메뉴 세 칸은 면 자체가 반응한다. 블롭이 없는 Artists·About 도 이 규칙으로 함께 움직인다.
   로고 칸은 여기 없다 — 홈에서 그 칸은 어디로도 가지 않는다. */
.m-works, .m-artists, .m-about{ transition:filter .2s }
.m-works:hover, .m-artists:hover, .m-about:hover,
.m-works:focus-within, .m-artists:focus-within, .m-about:focus-within{ filter:brightness(1.07) }

/* ---------- 로고 칸 ---------- */
/* 점 다섯 · 워드마크 · 연도가 한 덩어리로 위에 붙고, 'Producers' 라벨이 바닥에 남는다.
   라벨 바로 아래(2·3행)가 프로듀서 네 색면이다. */
.m-brand{
  display:flex;
  flex-direction:column;
  gap:16px;                 /* 점과 워드마크 사이 — 한 덩어리로 읽히도록 좁게 */
}
/* 언어 전환 — 칸의 오른쪽 위 모서리. 점 다섯과 같은 높이에 오도록
   칸 안쪽 여백(20px)에 맞춘다. 어느 화면에서든 스크롤 없이 보인다. */
/* 찾기와 언어 전환을 한 덩어리로 오른쪽 위에 붙인다.
   자리는 .m-top 이 잡고 .m-lang 은 글자 모양만 맡는다 —
   둘 다 절대 위치를 가지면 서로 겹친다. */
.m-top{
  position:absolute;
  top:14px;
  right:calc(var(--pad) - 6px);
  z-index:2;
  display:flex;
  align-items:center;
  gap:2px;
}
.m-top .sr-open{ color:var(--ink) }
.m-lang{ position:static }
.m-logo .wordmark{ font-size:clamp(14.5px,1.45vw,21px) }   /* 메뉴 제목의 0.85배 */
.m-logo .sub{ margin-top:5px }

/* 로고 블록은 위, 라벨은 칸 맨 아래. 사이가 크게 비는 것이 이 배치의 의도다 —
   Works 칸에서 제목이 아래에 놓이고 위가 비어 있는 것과 같은 구조.
   margin-top:auto 로 못 박는다. 칸에 다른 요소가 늘어도 라벨은 바닥에 남는다. */
.m-logo{ justify-content:flex-start }
.m-brand{ flex:none }
.m-plabel{ margin-top:auto; margin-bottom:0 }

/* 색면 네 칸 — 역할 라벨을 뺐으므로 이름을 아래로 붙인다. */
.cell.producer{ justify-content:flex-end }

/* Works 칸은 바깥이 링크가 아니다 — 제목과 두 개수가 각각 링크다. */
.h2-link{ display:block }

/* 메뉴 칸 세 개(Works · Artists · About)의 제목은 같은 밑줄을 쓴다.
   Works 만 안쪽 <a> 라 이 규칙이 그 칸에만 걸려 있었고, 그래서 Works 에만
   밑줄이 생겼다. 바깥이 링크인 칸(a.cell)도 함께 적는다 — 값은 한 곳에만 둔다. */
.h2-link:hover h2,
.h2-link:focus-visible h2,
a.cell:hover h2,
a.cell:focus-visible h2{
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* Works 칸의 공연/프로젝트 두 줄 */
.sub.split{ display:inline-flex; gap:16px }
.split b{ font-weight:400 }
.split a:hover{ text-decoration:underline; text-underline-offset:3px }

/* ---------- 사진 칸 (사진이 아직 없으면 색면) ---------- */
.cell.photo{
  padding:0;
  justify-content:flex-end;
}
.cell.photo .cover{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  z-index:-1;
  transition:transform .8s var(--ease);
}
.cell.photo:hover .cover{ transform:scale(1.045) }

.cell.photo .pending{
  position:absolute; left:var(--pad); top:20px;
  opacity:.55;
}
.cell.photo .cap{
  padding:20px var(--pad);
}
/* 사진이 들어오면 캡션 뒤에 그라데이션이 필요하다. 색면일 때는 필요 없다. */
.cell.photo:has(.cover) .cap{
  color:var(--cream-hi);
  background:linear-gradient(to top, rgb(29 29 27 / .72), rgb(29 29 27 / 0));
}
.cap-t{
  display:block;
  font-size:15px;
  font-weight:var(--w-mid);
  margin-top:3px;
}

/* ===========================================================
   Now
   =========================================================== */

.nowhead{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:44px var(--pad) 18px;
}
.nowhead h2{ font-size:clamp(28px,3.4vw,46px); letter-spacing:-.035em }
.nowhead .all{ opacity:.6 }
.nowhead .all:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px }
/* 화살표는 라벨 밖에 있다. 국문은 글자에 바짝, 영문은 낱말과 떨어뜨린다. */
.nowhead .all .arrow{ margin-left:.4em }
.nowhead .all:hover .arrow{ text-decoration:none }

/* 열을 고정폭으로 잡아 줄이 흐트러지지 않게 한다.
   [유형 64] [제목 flex] [날짜 190] [장소 260] [색점 56] */
#now-list .row{
  display:flex;
  align-items:center;
  gap:18px;
  height:46px;              /* 모든 줄 높이를 같게 — 한 줄만 높아지면 눈에 걸린다 */
  padding:0;
  border-bottom:.5px solid var(--line);
}
/* 지난 것은 제목은 그대로 두고 날짜·장소·색점만 흐리게 한다.
   줄 전체에 opacity 를 걸면 제목까지 흐려지고, 자식에서 되돌릴 수 없다. */

#now-list .kind{
  width:64px; flex:none;
  font-family:var(--mono); font-size:11px;
  opacity:.55;
}

#now-list .t{
  flex:1;
  min-width:0;              /* 없으면 flex 항목이 줄어들지 않아 말줄임이 안 걸린다 */
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  overflow:hidden;
}
/* 제목 자체는 한 줄 안에서만 흐른다. 육각형 SVG 도 글자 사이에 그대로 놓인다. */
#now-list .t-title{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#now-list .when{
  width:190px; flex:none;
  text-align:right;
  font-family:var(--mono); font-size:11px;
  font-variant-numeric:tabular-nums;   /* 숫자 폭을 맞춰 세로로 떨어지게 */
  opacity:.75;
}
#now-list .where{
  width:260px; flex:none;
  font-family:var(--mono); font-size:11px;
  opacity:.5;
  white-space:nowrap;       /* 길어도 두 줄로 넘기지 않는다 */
  overflow:hidden;
  text-overflow:ellipsis;
}
#now-list .who{
  width:56px; flex:none;
  justify-content:flex-end;
}
#now-list .note-flag{ flex:none }

#now-list .empty{ padding:18px 0; opacity:.55 }

/* 모바일 — 제목과 날짜만 첫 줄에 두고 장소는 아래로 내린다. */
@media (max-width:900px){
  #now-list .row{
    height:auto;
    flex-wrap:wrap;
    align-items:baseline;
    gap:10px;
    padding:12px 0;
  }
  #now-list .kind{ display:none }   /* 좁은 화면에서는 유형까지 넣을 자리가 없다 */
  #now-list .when{ width:auto; text-align:left }
  #now-list .who{ width:auto; margin-left:auto }
  #now-list .where{ flex:1 0 100%; width:auto }
}

/* ===========================================================
   Now 아래 사진 3장
   =========================================================== */

/* Now 아래 사진 세 장만 크림 여백에 둘러싸인다. 사이도 좌우 바깥도 같은 값이라
   세 장이 하나의 묶음으로 뜬다 — 모자이크는 반대로 화면 끝까지 붙어 있다.
   위쪽은 Now 목록과의 사이라 다른 값(30px)을 그대로 둔다. */
.band{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--home-gap-photo);
  padding:0 var(--home-gap-photo) var(--home-gap-photo);
  margin-top:30px;
}
.band figure{ position:relative; overflow:hidden; aspect-ratio:4/3 }
.band .band-a{ position:absolute; inset:0; display:block }
.band .cover{ width:100%; height:100%; object-fit:cover; object-position:50% 50% }
/* 포스터처럼 위쪽에 제목이 있는 사진은 위를 남긴다. 값은 js/ui.js 의 coverPosition 이 정한다. */
.band figure[data-pos='top'] .cover{ object-position:50% 0 }
.band figure[data-pos='bottom'] .cover{ object-position:50% 100% }
.band .pending{ position:absolute; left:18px; top:16px; opacity:.55 }
.band figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 18px;
  pointer-events:none;
}
.band figure:has(.cover) figcaption{
  color:var(--cream-hi);
  background:linear-gradient(to top, rgb(29 29 27 / .7), rgb(29 29 27 / 0));
}
.band figcaption .cap-t{ font-size:14px }

/* ===========================================================
   모바일 — 위에서 아래로
   로고 / 메뉴 3등분 / 세로사진 / 프로듀서 2×2 / 파노라마 2장 / Now
   =========================================================== */

@media (max-width:900px){
  /* 6열로 잡는다 — 메뉴 3등분(2칸씩)과 프로듀서 2×2(3칸씩)를 한 격자에서 낸다.
     행 높이는 칸마다 정하므로 auto. */
  .mosaic{
    grid-template-columns:repeat(6,1fr);
    grid-template-rows:repeat(7,auto);
    height:auto;
    min-height:0;
  }
  .cell{ min-height:0; padding:14px var(--pad) }

  /* 1 로고 (전체폭, 낮게) */
  .m-logo   { grid-column:1/7; grid-row:1/2; min-height:92px }
  .m-brand{ gap:12px }
  /* 모바일에서는 색면 네 칸이 이 칸 바로 아래가 아니다(메뉴·사진이 사이에 온다).
     자리가 떨어진 라벨은 무엇을 가리키는지 알 수 없으므로 감춘다. */
  .m-plabel{ display:none }

  /* 2 Works · Artists · About — 한 줄에 3등분, 높이 같게 */
  .m-works  { grid-column:1/3; grid-row:2/3 }
  .m-artists{ grid-column:3/5; grid-row:2/3 }
  .m-about  { grid-column:5/7; grid-row:2/3 }
  .m-works, .m-artists, .m-about{
    min-height:96px;
    justify-content:flex-end;
  }
  /* 좁은 3등분 칸에는 부제가 들어갈 자리가 없다.
     (예술가 이름 나열도 여기에 들어 있다 — 데스크톱에서는 그대로 나온다.) */
  .m-works .sub, .m-artists .sub, .m-about .sub{ display:none }
  .m-works > span:first-of-type,
  .m-artists > span:first-of-type,
  .m-about > span:first-of-type{ display:none }   /* 위쪽을 밀던 빈 칸 */

  /* 3 세로 사진 한 장 (전체폭) */
  .m-photo1 { grid-column:1/7; grid-row:3/4; aspect-ratio:3/4 }

  /* 4 프로듀서 4칸 (2×2) */
  .m-p1     { grid-column:1/4; grid-row:4/5 }
  .m-p2     { grid-column:4/7; grid-row:4/5 }
  .m-p3     { grid-column:1/4; grid-row:5/6 }
  .m-p4     { grid-column:4/7; grid-row:5/6 }
  .m-p1, .m-p2, .m-p3, .m-p4{ min-height:118px }

  /* 5 파노라마 두 장 (전체폭, 위아래로) */
  .m-photo2 { grid-column:1/7; grid-row:6/7 }
  .m-photo3 { grid-column:1/7; grid-row:7/8 }
  /* 여기서는 두 장이 위아래로 쌓인다. 띠 간격은 상단 블록 바로 아래인
     첫 장에만 붙고, 두 장 사이는 붙인다. */
  .m-photo3{ margin-top:0 }
  .m-photo2, .m-photo3{ aspect-ratio:5/2 }

  /* 파노라마는 5:2 로 미리 잘라둔 파일을 쓴다. 칸 비율도 5:2 라 사진이 그대로 들어간다. */

  .cell h2{ font-size:20px }
  .cell h3{ font-size:15px }

  .band{ grid-template-columns:1fr }
}