/* base.css — 리셋 · 타이포 기본 · 모든 화면이 함께 쓰는 조각 */

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:var(--w-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;          /* 한글이 단어 중간에서 끊기지 않게 */
}

a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
h1,h2,h3,h4{ font-family:var(--disp); font-weight:var(--w-disp); letter-spacing:-.02em; line-height:1.1 }

.meta{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.02em;
}

.spacer{ flex:1 }

/* ---------- 색면 ---------- */
/* 프로듀서 색은 여기 없습니다. .field-<id> 는 js/ui.js 가 producers.json 에서 만듭니다. */
.c-cream{ background:var(--cream) }
.c-ink  { background:var(--ink);      color:var(--cream) }
.c-lav  { background:var(--lavender); color:var(--cream) }

/* ---------- 로고 ---------- */
.logo{ display:flex; align-items:center; color:var(--ink) }
.logo i{ display:block }
/* 로고는 검정 + 액센트 점 하나. 액센트 점 색만 .dot-<id> 에서 오므로
   여기서 currentColor 를 덮어쓰지 않도록 half·full 에만 색을 준다. */
.logo .half, .logo .full{ background:currentColor }
.logo .half  { width:7px;  height:13px; border-radius:0 7px 7px 0; margin-right:11px }
.logo .full  { width:13px; height:13px; border-radius:50%;         margin-right:11px }
.logo .accent{ width:13px; height:13px; border-radius:50% }   /* 색은 .dot-<id> 가 준다 */

.wordmark{
  font-family:var(--disp);
  font-weight:var(--w-disp);
  letter-spacing:-.02em;
  line-height:1;
}
.wordmark-light{ font-weight:400 }

/* ---------- 상단 메뉴 (홈 말고 모든 페이지) ---------- */
/* 프로듀서 상세에서는 배경이 그 사람의 색으로 물든다 — background:inherit 유지. */
.bar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding:16px var(--pad);
  border-bottom:.5px solid var(--line-s);
  position:sticky; top:0; z-index:5;
  background:inherit;
}
.bar .wordmark{ font-size:15px }
.bar nav{ display:flex; gap:18px; font-family:var(--disp); font-size:14px; font-weight:var(--w-mid) }

/* 다섯 항목이 같은 규칙을 쓴다. 현재 페이지 표시(.here)와 마우스 표시(:hover)를
   서로 다른 수단으로 나눈다 — 활성은 글자가 진해지는 것으로, 마우스·키보드는 밑줄로.
   한쪽 스타일이 다른 쪽을 겸하면 어느 항목이 눌리는지가 아니라
   어느 항목이 현재 페이지인지를 알려주게 된다. */
.bar nav > *{
  opacity:.5;
  text-decoration:none;
  text-underline-offset:6px;
  text-decoration-thickness:.5px;
  transition:opacity .15s;
}
.bar nav .here{ opacity:1 }              /* 활성 — 진해지기만 한다 */

.bar nav a:hover,
.bar nav a:focus-visible{
  opacity:1;
  text-decoration:underline;             /* 다섯 항목 모두 같은 값 */
  text-decoration-thickness:.5px;
  text-underline-offset:6px;
}
/* 밑줄이 이미 눌 수 있음을 알리므로 테두리까지 겹쳐 그리지 않는다. */
.bar nav a:focus-visible{ outline:none }

/* 아직 만들지 않은 페이지로 가는 자리. 링크가 아니라 그냥 글자다. */
.inert{ cursor:default }

/* ---------- 햄버거 (모바일 전용) ---------- */
.burger{
  display:none;                 /* 데스크톱에서는 안 보인다 */
  width:44px; height:44px;      /* 손가락으로 누를 만한 크기 */
  align-items:center;
  justify-content:center;
  background:none; border:none; cursor:pointer;
  color:inherit;
  margin-right:-10px;
}
.burger-i,
.burger-i::before,
.burger-i::after{
  display:block;
  width:22px; height:1.5px;
  background:currentColor;
  content:'';
}
.burger-i{ position:relative }
.burger-i::before{ position:absolute; top:-7px }
.burger-i::after { position:absolute; top:7px }

/* ---------- 전체 찾기 ---------- */
/* 돋보기는 Contact 다음, 언어 토글 앞. 모바일에서도 상단 바에 남는다 —
   햄버거 안으로 넣으면 찾기까지 두 번 눌러야 한다. */
.sr-open{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:none; border:none; padding:0; cursor:pointer;
  color:inherit; opacity:.75;
}
.sr-open:hover{ opacity:1 }

/* 층. 배경을 누르면 닫히므로 판(.sr-panel)은 그 안에 따로 둔다. */
.sr-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgb(29 29 27 / .5);
  display:flex; justify-content:center;
  padding:0 var(--pad);
  overflow-y:auto;
}
.sr-panel{
  width:100%; max-width:720px;
  margin:clamp(24px, 9vh, 96px) 0 40px;
  height:max-content;
  background:var(--panel);
  color:var(--ink);
  --fg-rgb: 29 29 27;                     /* 어두운 층 위의 밝은 판 — 선도 되돌린다 */
  padding:20px 22px 26px;
}
.sr-head-row{ display:flex; align-items:center; gap:12px }
.sr-input{
  flex:1; min-width:0;
  background:none; border:none; outline:none;
  color:inherit;
  font-family:var(--disp);
  font-size:24px;
  font-weight:var(--w-disp);
  letter-spacing:-.02em;
  border-bottom:1px solid rgb(var(--fg-rgb) / .3);
  padding:6px 0;
}
.sr-input::placeholder{ opacity:.35; font-weight:var(--w-body) }
.sr-input::-webkit-search-cancel-button{ -webkit-appearance:none }
.sr-x{
  width:36px; height:36px; flex:none;
  background:none; border:none; cursor:pointer;
  color:inherit; font-size:18px; line-height:1; opacity:.6;
}
.sr-x:hover{ opacity:1 }

.sr-count{ margin:12px 0 0; opacity:.5 }
.sr-body{ margin-top:8px }
.sr-empty{ padding:28px 0; opacity:.55 }

.sr-group + .sr-group{ margin-top:22px }
.sr-gtitle{
  padding:14px 0 8px;
  opacity:.5;
  border-bottom:.5px solid rgb(var(--fg-rgb) / .22);
}
.sr-row{
  display:block;
  padding:12px 0;
  border-bottom:.5px solid rgb(var(--fg-rgb) / .14);
}
.sr-row:hover .sr-title{ text-decoration:underline; text-underline-offset:3px }
.sr-head{ display:flex; align-items:baseline; gap:10px }
.sr-title{ font-family:var(--disp); font-weight:var(--w-disp); font-size:16px; letter-spacing:-.02em }
.sr-where{ opacity:.45; flex:none }
.sr-ex{
  margin-top:4px;
  font-size:13px; line-height:1.6;
  opacity:.7;
}
/* 걸린 부분만 굵게. 형광펜처럼 칠하지 않는다 — 크림 바탕에 노란 면은 읽기 어렵다. */
.sr-ex mark{
  background:none;
  color:inherit;
  font-weight:var(--w-disp);
}

@media (max-width:640px){
  .sr-panel{ padding:16px 16px 22px }
  .sr-input{ font-size:19px }
}

/* ---------- 모바일 전체화면 메뉴 ---------- */
/* 라벤더는 구조색이라 메뉴에 쓴다. 프로듀서 네 색은 사람을 가리키므로 쓰지 않는다. */
.menu-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  background:var(--lavender);
  color:var(--cream);
  --fg-rgb: var(--cream-rgb);   /* 구분선도 함께 뒤집힌다 */
  display:flex;
  flex-direction:column;
  padding:14px var(--pad) 30px;
  overflow-y:auto;
}
body.menu-open{ overflow:hidden }   /* 열려 있는 동안 뒤쪽 스크롤 잠금 */

.menu-x{
  align-self:flex-start;
  width:48px; height:48px;
  margin-bottom:18px;
  font-size:24px; line-height:1;
  background:none; border:none; cursor:pointer;
  color:inherit;
}

/* 글씨를 줄인 만큼 목록이 짧아져 화면 위쪽에 몰린다. 그만큼 아래로 내린다.
   화면 높이에 따라 붙으므로 작은 기기에서는 16px 까지만 준다. */
.menu-list{ display:flex; flex-direction:column; margin-top:clamp(16px, 6vh, 56px) }
.menu-item{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;              /* 손가락으로 누르기 좋은 높이 — 44px 아래로 내리지 말 것 */
  padding:8px 0;
  font-family:var(--disp);
  font-size:19px;               /* 본문(16px)보다 조금 큰 정도. 28px 은 데스크톱 메뉴의 두 배였다 */
  font-weight:var(--w-disp);
  letter-spacing:-.02em;        /* 19px 에서는 -.03em 이 과하게 조인다 */
  border-bottom:.5px solid rgb(var(--fg-rgb) / .4);
}
.menu-item.inert{ opacity:.5 }

.menu-social{
  display:flex;
  gap:24px;
  align-items:center;
  padding:26px 0 0;
}
.menu-social .sico{ opacity:.85 }
.menu-social .sico svg{ width:22px; height:22px }

.menu-mail{
  margin-top:auto;
  padding-top:28px;
  font-size:15px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:.5px;
}

@media (max-width:900px){
  .burger{ display:flex }
  .bar nav{ display:none }          /* 메뉴는 햄버거 안으로 들어간다 */
  .bar .langswitch{ display:none }
}

/* ---------- 매스트헤드 ----------
   제목만. 빵부스러기 링크는 넣지 않는다 — 상단 메뉴와 중복이다.
   Works · Artists · About 이 같은 것을 쓴다. */
.masthead{ padding:52px var(--pad) 34px }
.masthead h1{
  font-size:clamp(38px,5.6vw,76px);
  letter-spacing:-.045em;
  line-height:.93;
}
@media (max-width:700px){
  .masthead{ padding:30px var(--pad) 22px }
}

/* ---------- 카테고리 배지 ----------
   일의 종류를 나타낸다. 잉크색 테두리 + 잉크 글씨, 배경 없음.
   프로듀서 네 색은 여기 절대 쓰지 않는다 — 색은 사람을 가리키는 표시다. */
.cat{
  display:inline-block;
  padding:1px 6px;
  border:.5px solid currentColor;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.03em;
  white-space:nowrap;
}

/* 확인이 필요한 항목 표시. 눈에 걸리되 화면을 어지럽히지 않을 만큼만. */
.note-flag{
  display:inline-block;
  padding:2px 7px;
  border:.5px dashed var(--line-s);
  opacity:.7;
  flex:none;
}

/* ---------- 색점 ---------- */
.who{ display:flex; gap:5px; align-items:center }
.who i{ width:9px; height:9px; border-radius:50%; display:block; flex:none }
/* 색점은 언제나 면이 채워져 있다. 여기 기본값을 두어, 색 주입이 늦거나
   실패해도 빈 원이 남지 않게 한다. 사람 색은 .dot-<id> 가 덮어쓴다
   (같은 명시도이고 주입된 규칙이 뒤에 오므로 그쪽이 이긴다).
   ※ .dots .dot 처럼 명시도가 더 높은 선택자에는 background 를 쓰면 안 된다 —
     .dot-<id> 를 이겨버려 모든 점이 같은 색이 된다. */
.dot{ background:var(--lavender); box-shadow:inset 0 0 0 .5px var(--dot-edge) }

/* 테두리만 있는 원은 '담당 프로듀서가 정해지지 않았을 때'에만 쓴다.
   지금은 그마저도 라벤더 면으로 채운다 — 네 개의 채워진 점 사이에서 혼자 비어 보였다. */
.who i.none{ background:var(--lavender) }

/* ---------- 특수문자 SVG ---------- */
.glyph-hex{
  width:.72em; height:.79em;
  display:inline-block;
  vertical-align:-.04em;
  margin-right:.02em;
}

/* ---------- 목록 행 ---------- */
.group{ padding:0 var(--pad) }
.row{
  display:flex; align-items:center; gap:16px;
  padding:13px 0;
  border-bottom:.5px solid var(--line);
}
.row .who{ width:44px; flex:none }
.row .t{ flex:1; font-size:15px }
.row:hover .t{ text-decoration:underline; text-underline-offset:3px }
.row .when { font-family:var(--mono); font-size:11px; width:150px; flex:none; opacity:.75 }
.row .where{
  font-family:var(--mono); font-size:11px; width:220px; flex:none; opacity:.5;
  /* 영문 장소 이름은 국문의 두세 배다(Daehakro Arts Theatre, Small Hall).
     그대로 두면 220px 칸 안에서 두세 줄로 접혀 목록의 줄 높이가 들쭉날쭉해진다.
     넘치면 …로 줄이고 전체 이름은 title 속성(마우스를 올리면 뜬다)에 남긴다. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 상세 페이지 사이드바 ----------
   프로듀서 상세와 예술가 상세가 같은 것을 쓴다. */
.pside{ display:flex; flex-direction:column; gap:34px }
.sblock h2{
  font-size:14px;
  letter-spacing:.02em;
  padding-bottom:9px;
  margin-bottom:12px;
  border-bottom:.5px solid var(--line-s);
}
.sblock ul{ list-style:none }
.sblock .empty{ opacity:.6 }

/* 작업 목록 */
.wlist li{ border-bottom:.5px solid var(--line) }
.wrow{ display:flex; align-items:baseline; gap:11px; padding:9px 0 }
.wrow .yr{ width:62px; flex:none; opacity:.6; font-variant-numeric:tabular-nums }
.wrow .wt{ flex:1; font-size:14.5px }
.wrow .cat{ align-self:center }
a.wrow:hover .wt{ text-decoration:underline; text-underline-offset:3px }

/* 링크 목록 */
.llist li{ padding:6px 0 }
.llist a{
  font-size:14px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:.5px;
}
.llist a:hover{ text-decoration-thickness:1.5px }

/* 사람 목록 */
.plist li{ border-bottom:.5px solid var(--line) }
.prow{ display:flex; align-items:center; gap:10px; padding:10px 0; font-size:14.5px }
.prow .dot{ width:11px; height:11px; border-radius:50%; display:block; flex:none }
.prow .roman-s{ margin-left:auto; opacity:.55 }
a.prow:hover{ text-decoration:underline; text-underline-offset:3px }

/* ---------- 푸터 ---------- */
footer{
  margin-top:26px;
  padding:26px var(--pad) 36px;
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  border-top:.5px solid var(--line-s);
}
/* 왼쪽 Contact · Archive  /  오른쪽 유튜브 · 인스타그램 · 페이스북 */
.foot-l{ display:flex; align-items:center; gap:10px }
.foot-l a{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:.5px }
.foot-l a:hover{ text-decoration-thickness:1.5px }
.foot-dot{ opacity:.4 }
.foot-r{ display:flex; align-items:center; gap:18px }
.sico{ display:inline-flex; align-items:center; opacity:.55; transition:opacity .2s }
.sico:hover{ opacity:1 }
/* ---------- KO / EN 토글 ---------- */
/* 메뉴 오른쪽 끝. 메뉴 항목보다 조금 작고 옅게, 앞에 세로 구분선 하나 —
   길을 고르는 메뉴가 아니라 화면의 설정이라는 것이 보이게. */
.langswitch{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px }
.bar .langswitch{
  padding-left:16px;
  margin-left:2px;
  border-left:.5px solid var(--line);
  opacity:.85;
}
.langswitch .lang{
  background:none; border:none; padding:0;
  font:inherit; color:inherit;
  opacity:.42;
  cursor:pointer;
  transition:opacity .15s;
}
.langswitch .lang.on{ opacity:1 }          /* 지금 언어 — 진하게. 누르는 것은 둘 다 된다 */
.langswitch .lang:hover,
.langswitch .lang:focus-visible{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:.5px;
  outline:none;
}
.langswitch .lang-sep{ opacity:.28 }

/* 모바일 전체화면 메뉴에서는 맨 위, 닫기 버튼 다음. */
.menu-lang{ margin:0 0 20px; font-size:14px; opacity:1 }

.load-error{ padding:40px var(--pad); font-family:var(--mono); font-size:12px }

/* ---------- 포커스 ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

@media (max-width:900px){
  .row{ gap:12px; flex-wrap:wrap }
  .row .when, .row .where{ width:auto }
  .row .where{ flex:1 }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}