/* =============================================================================
 * woosungjung.com — pages/about.css
 * 프로필 페이지 전용.
 * 공통 조각은 여기 다시 만들지 않는다 —
 *   .tl(연표·수상·글) · .box + .link(카드) · .todo · .need → components.css
 *   .head · .lead · section · .eyebrow            → layout.css
 *   .grid-half · .grid-cards                      → base.css
 * ========================================================================== */

.leadcite { font-size: 12px; color: var(--sub); letter-spacing: .06em; margin-top: 20px; }

/* ---------- 사진 + 이름 + 약력 ---------- */
.idblk {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
.idblk img {
  width: 100%;
  border-radius: 6px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.idblk h2 { font-family: var(--serif); font-weight: 300; font-size: 42px; line-height: 1; }
.idblk .sub { color: var(--sub); font-size: 14px; margin-top: 14px; }
.idblk .sub b { font-weight: 400; color: var(--hanji); }
.idblk p { font-size: 15px; color: var(--hanji); margin-top: 26px; }
/* 두 번째 단락부터는 한 단계 물러난 색 */
.idblk p + p { font-size: 14px; color: var(--sub); margin-top: 16px; }

.cred {
  margin-top: 26px;
  padding-left: 16px;
  border-left: 1px solid rgba(217, 96, 74, .5);
  font-size: 14px;
  color: var(--sub);
  line-height: 1.85;
}
.cred b { font-weight: 400; color: var(--hanji); display: block; }

/* ---------- 묶음 제목 (Wind / Percussion / 연표 단 제목) ---------- */
.colh {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cheong-lt);
  margin-bottom: 14px;
}

/* ---------- 악기 카드 ---------- */
.igrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 대금·단소는 크게 — 실제로 가장 많이 하는 악기 */
.igrid.hero { grid-template-columns: 1fr 1fr; margin-bottom: 16px; }
.igrid + .colh { margin-top: 44px; }

.icard {
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.icard .im {
  aspect-ratio: 3 / 2;
  background: #101012;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.icard .im img { width: 100%; height: 100%; object-fit: cover; }
/* 원본을 아직 못 받은 칸 (`.need` → components.css) — 카드가 작아 한 치수 줄인다 */
.icard .need {
  margin: 16px;
  padding: 16px 12px;
  font-size: 11.5px;
  line-height: 1.75;
  border-radius: 5px;
}
.icard .need i { margin-top: 7px; }

.icard .b { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.icard h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; }
.icard .ko { font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--cheong-lt); margin-top: 3px; }
.icard p { font-size: 12.5px; color: var(--sub); line-height: 1.8; margin-top: 12px; flex: 1; }

.igrid.hero .im { aspect-ratio: 3 / 2; }
.igrid.hero .b { padding: 26px 30px 30px; }
.igrid.hero h3 { font-size: 31px; }
.igrid.hero .ko { font-size: 12px; margin-top: 5px; }
.igrid.hero p { font-size: 13.5px; margin-top: 15px; }

/* ---------- 연표·수상·글 ----------
   연도가 `2019–2023` 같은 구간이라 공통 `.tl` 의 52px 로는 줄이 바뀐다 */
.tl-y .e span { flex: 0 0 74px; }

/* ---------- 공연장 목록 ---------- */
.venue .e {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.venue .e:first-child { border-top: 1px solid var(--line); }
.venue .e:last-child { border-bottom: none; }
.venue .h { font-family: var(--serif); font-size: 19px; flex: 0 0 210px; }
/* 공연장 이름 옆 칸이 남은 폭을 다 차지해야 한다.
   안 그러면 공연이 두 건일 때 사이를 가르는 점선이 글자 길이에서 끊긴다 */
.venue .e > div:not(.h) { flex: 1; min-width: 0; }
.venue .w { font-size: 13px; color: var(--sub); }
.venue .w small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--dimmer);
  margin-top: 3px;
}
/* 한 공연장에서 두 번 이상 선 경우 */
.venue .w + .w { margin-top: 12px; padding-top: 12px; border-top: 1px dotted #232323; }

/* ---------- 카드 — 공통 .box 를 조금 작게 ---------- */
.box.sm { padding: 26px 28px; }
.box.sm h3 { font-size: 21px; }
.box.sm p { line-height: 1.8; }
.box.sm .link { margin-top: 14px; }

/* 녹음 카드는 그리드 전체 폭을 쓰고 오른쪽에 트랙 목록을 둔다 */
.box.wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  padding: 32px 36px;
}
.box.wide h3 { font-size: 29px; margin-bottom: 13px; }

.trk .e {
  display: grid;
  grid-template-columns: 1fr 1.25fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid #26262A;
  color: inherit;
}
.trk .e:last-child { border-bottom: none; }
.trk .tn { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.trk .tn small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cheong-lt);
  margin-top: 4px;
}
.trk .td { font-size: 12.5px; color: var(--sub); line-height: 1.6; }
.trk .td small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--dimmer);
  margin-top: 5px;
  letter-spacing: .02em;
}
.trk .ty { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--dimmer); white-space: nowrap; }
.trk a.e:hover .tn,
.trk a.e:hover .ty { color: var(--dan-lt); }
/* 링크라는 것을 hover 에서만 조용히 알린다 */
.trk a.e .ty::after { content: ' \2197'; opacity: 0; transition: opacity .2s; }
.trk a.e:hover .ty::after { opacity: 1; }

/* ---------- 사진 아카이브 ----------
   세로·가로가 섞여 있어 masonry(columns)로 흘린다. 그리드로 자르면 인물이 잘린다. */
.gal { columns: 4; column-gap: 10px; }
.gal img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 4px;
  filter: saturate(.8) brightness(.9);
  transition: filter .25s;
  break-inside: avoid;
}
.gal img:hover { filter: none; }

/* ---------- 기술 요구사항 ---------- */
.req { border-top: 1px solid var(--line); }
.req .e {
  display: flex;
  gap: 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.req .e:last-child { border-bottom: none; }
.req .f { font-size: 14px; flex: 0 0 250px; }
.req .f small {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--cheong-lt);
  margin-top: 2px;
}
.req .v { font-size: 13px; color: var(--sub); line-height: 1.8; flex: 1; min-width: 0; }
.reqnote {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--dimmer);
  margin-top: 18px;
  letter-spacing: .03em;
}

/* ---------- 기획자용 자료 ----------
   카드 몸통은 공통 .box.sm 을 쓰고, 여기서는 자리 배치와 속 내용만 정한다.
   `.full` 은 한 줄을 다 쓰고(약력·사진), `.third` 는 3단 중 한 칸(표기법·기술·문의).
   위 녹음 카드의 `.wide` 와 이름을 나눈 이유 — 그쪽은 속을 2단으로 가르지만 여기는 아니다. */
.pres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pres .full { grid-column: 1 / -1; }
.pres .third { align-self: stretch; }
.pres .box.sm .k { letter-spacing: .19em; margin-bottom: 14px; }
/* 카드 안 설명글은 .box p 를 그대로 쓴다 — 이 한 줄은 그 뒤에 붙는 주석 */
.note { font-size: 12px; color: var(--faint); line-height: 1.75; margin-top: 14px; }

/* 약력 — 짧은 것 둘을 나란히, 한 페이지짜리는 그 아래 접어서 */
.bios { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 16px; }
.bio { border-top: 1px solid var(--line); padding-top: 14px; }
.bio p { font-size: 13px; color: var(--sub); line-height: 1.85; }
.bio p + p { margin-top: 11px; }
.bio.long { margin-top: 34px; }
.fold { display: none; }
.fold.on { display: block; }

.bh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bh b {
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6E6E74;
}
/* 단추가 둘인 줄(펼치기 + 복사)에서도 오른쪽에 붙어 있게 */
.bh .cp:first-of-type { margin-left: auto; }
.bh .cp + .cp { margin-left: 7px; }

.cp {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--sub);
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 10px;
  cursor: pointer;
}
.cp:hover { color: var(--hanji); border-color: #4A4A50; }
.cp.ok { color: var(--cheong-lt); border-color: rgba(90, 165, 149, .5); }

/* 표기법 — 포스터에 그대로 옮겨 적는 값이라 이름/값을 위아래로 둔다 */
.kv > div { padding: 9px 0; border-bottom: 1px solid #232326; }
.kv > div:last-child { border-bottom: none; }
.kv > div > span {
  display: block;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.kv em { display: block; font-style: normal; font-size: 13px; color: var(--hanji); line-height: 1.65; }

.mail {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--hanji);
  word-break: break-all;
}
.mail:hover { color: var(--dan-lt); }

/* 보도사진 — 받아가는 사진이라 크기를 적어 둔다 */
.pintro { font-size: 13px; color: var(--sub); line-height: 1.85; margin-bottom: 20px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.pi {
  display: block;
  background: #101012;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color .15s;
}
.pi:hover { border-color: #4A4A50; }
.pi img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: brightness(.88);
  transition: filter .2s;
}
.pi:hover img { filter: none; }
.pi .m { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 10px 9px; }
.pi .m b { font-weight: 400; font-size: 11.5px; color: var(--hanji); }
.pi .m i { font-style: normal; font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--faint); }

/* 인쇄용 원본으로 나가는 문. 사이트에 걸린 여덟 장은 웹용이고,
   20MB 짜리 원본은 앨범이 낸다 (Controllers\About::pressKit 주석) */
.pfoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.album {
  font-size: 13px;
  color: var(--dan-lt);
  border: 1px solid rgba(217, 96, 74, .4);
  border-radius: 4px;
  padding: 11px 26px;
  transition: background .2s, color .2s;
}
.album:hover { color: #fff; background: rgba(217, 96, 74, .16); }

/* 눌러도 되는지 미리 알려준다 — 남의 사이트로 나가지만 로그인은 없다 */
.anote { font-size: 11.5px; font-weight: 400; color: var(--sub); }

/* ---------- 보도사진 확대 ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(6, 6, 8, .9);
  backdrop-filter: blur(8px);
}
.lb[hidden] { display: none; }
.lbin { display: flex; flex-direction: column; gap: 16px; max-width: min(1000px, 100%); max-height: 100%; }
.lbin img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 6px;
}
.lbb { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lbb .t { font-size: 14px; color: var(--hanji); }
.lbb .t i {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--dimmer);
  margin-top: 4px;
}
.lbb .a { display: flex; gap: 18px; align-items: baseline; }
.lbb a { font-size: 13px; color: var(--dan-lt); border-bottom: 1px solid rgba(217, 96, 74, .45); padding-bottom: 2px; }

.lbnav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(14, 14, 16, .6);
  color: var(--hanji);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.lbnav:hover { border-color: #4A4A50; }
.lbnav.p { left: 22px; }
.lbnav.n { right: 22px; }
.lbx {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  color: var(--sub);
  font-size: 17px;
  cursor: pointer;
}
.lbx:hover { color: var(--hanji); border-color: #4A4A50; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .gal { columns: 3; }
  .igrid { grid-template-columns: 1fr 1fr; }
  .idblk { grid-template-columns: 300px 1fr; gap: 40px; }
  /* 3단이 2단이 되면 `.third` 셋 중 마지막(문의)만 짝을 잃는다 → 한 줄을 다 쓴다 */
  .pres { grid-template-columns: 1fr 1fr; }
  .pres .third + .third + .third { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .bios { grid-template-columns: 1fr; gap: 20px; }
  .bio.long { margin-top: 20px; }
}
@media (max-width: 780px) {
  .idblk { grid-template-columns: 1fr; gap: 30px; }
  /* 세로로 쌓이면 300px 사진이 왼쪽에 치우쳐 보인다 → 단 너비를 다 쓴다 */
  .idblk img { max-width: none; aspect-ratio: 3 / 4; }
  .idblk h2 { font-size: 34px; }
  .venue .e,
  .req .e { flex-direction: column; gap: 4px; }
  .venue .h,
  .req .f { flex: none; }
  /* 세로로 쌓이면 연도 칸의 고정폭을 다시 풀어준다 (components.css 와 같은 처리) */
  .tl-y .e span { flex: none; }
  .gal { columns: 2; }
  .box.wide { grid-template-columns: 1fr; gap: 30px; padding: 26px 24px; }
  .trk .e { grid-template-columns: 1fr; gap: 5px; }
  .trk .ty { margin-top: 4px; }
}
@media (max-width: 620px) {
  .igrid,
  .igrid.hero { grid-template-columns: 1fr; }
  .pres { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lb { padding: 0; }
  .lbnav { display: none; }
  .lbin { gap: 12px; }
  .lbb { padding: 0 16px 18px; }
}