/* about.css — 도트 소개 · 프로듀서 4인 · 둥지230 · 연결 */

/* ---------- 소개문 3단 ---------- */
.about-cols{
  columns:3;
  column-gap:34px;
  padding:0 var(--pad);
  font-size:14.5px;
  line-height:1.75;
}
.about-cols p{
  margin:0 0 14px;
  break-inside:avoid;      /* 문단이 단 사이에서 잘리지 않게 */
}

/* ---------- 소제목 ---------- */
.sec{
  padding:52px var(--pad) 0;
  font-size:clamp(22px,2.4vw,32px);
  letter-spacing:-.03em;
}

/* ---------- 프로듀서 네 칸 ---------- */
.people{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;                   /* 색면끼리는 붙인다 */
  margin-top:22px;
}
.person{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  /* 원이 132px 로 커지면 아래 끝이 20+132=152px 이다.
     이름 두 줄이 그 아래에서 시작하도록 칸 높이를 잡는다. */
  min-height:236px;
  padding:20px var(--pad);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:filter .2s;
}
/* 칸 전체가 링크다. 이메일은 맨 아래 Contact 블록에만 있다. */
a.person:hover{ filter:brightness(1.06) }
a.person:hover h3{ text-decoration:underline; text-underline-offset:4px }

/* 모서리에 반쯤 걸치는 원. 안에 얼굴 사진이 흑백으로 들어간다.
   마우스를 올리면 원이 커지면서 색면을 덮고 컬러로 바뀐다.
   크기를 transform 이 아니라 width/height 로 키운다 — transform 으로 확대하면
   사진이 같이 늘어나 뭉개진다. */
.person .pblob{
  --blob:104px;
  position:absolute;
  width:var(--blob); height:var(--blob);
  right:20px; top:20px;             /* 모서리에서 안으로 20px */
  border-radius:50%;
  overflow:hidden;
  z-index:-1;                       /* 글자는 늘 사진 위에 남는다 */
  transition:width .35s var(--ease), height .35s var(--ease);
}
.person .pblob .cover{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.04);
  transition:filter .35s;
}
/* 얼굴을 알아볼 만큼만 커진다. 색면을 덮지 않는다. */
.person:hover .pblob{ --blob:132px }
.person:hover .pblob .cover{ filter:none }

/* 사진이 아직 없는 사람은 빈 원만. 커지지도 않는다. */
.person .pblob.no-photo{ background:currentColor; opacity:.2 }
.person:hover .pblob.no-photo{ --blob:104px }
.person .meta{ opacity:.75 }
.person h3{
  font-size:clamp(15px,1.5vw,19px);
  letter-spacing:-.01em;
}
.person .sub{ font-size:13px; opacity:.8; display:block; margin-top:3px }

/* ---------- 둥지230 ---------- */
/* 페이지에서 유일한 어두운 면. 작게 만들지 않는다. */
.doongji{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  margin-top:44px;
  padding:64px var(--pad);
  background:var(--ink);
  color:var(--cream);
}
.dj-dot{
  position:absolute;
  right:-90px; top:-90px;
  width:340px; height:340px;
  border-radius:50%;
  background:var(--lavender);
  opacity:.9;
  z-index:-1;
}
.dj-in{ position:relative; max-width:52ch }
.dj-in .meta{ opacity:.7 }
.doongji h2{
  font-size:clamp(34px,4.6vw,62px);
  letter-spacing:-.04em;
  line-height:1;
  margin:10px 0 16px;
}
.doongji p{ font-size:16px; line-height:1.65; opacity:.85 }
/* 주소는 본문보다 한 단 작고 옅게. 어두운 면 위라 opacity 로만 눌러도 읽힌다.
   `.doongji p` 와 `.meta` 를 둘 다 이겨야 해서 선택자를 한 단 올린다 — !important 는 쓰지 않는다. */
.doongji .dj-addr{
  margin-top:14px;
  font-size:13px;
  line-height:1.6;
  letter-spacing:.01em;
  opacity:.62;
}
.dj-btn{
  display:inline-block;
  margin-top:22px;
  padding:11px 20px;
  border:.5px solid var(--cream);
  font-size:14px;
  transition:background .2s, color .2s;
}
.dj-btn:hover{ background:var(--cream); color:var(--ink) }

/* ---------- '함께' 가로 띠 ---------- */
/* 제목도 캡션도 없다. 사진만 가로로 놓이고 나머지는 옆으로 밀려 있다.
   높이를 정하고 비율(3:2)이 폭을 정하게 둔다 — 220px 높이면 한 장이 330px 이라
   1440px 화면에서 네 장이 보인다. */
.together{ padding:44px 0 0 }
.together-strip{
  display:flex;
  gap:12px;
  padding:0 var(--pad);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;

  /* 스크롤바는 숨긴다. 사진 띠 아래 회색 막대가 보이면 지저분하다. */
  scrollbar-width:none;             /* Firefox */
  -ms-overflow-style:none;          /* 예전 Edge */
}
.together-strip::-webkit-scrollbar{ display:none }   /* Safari · Chrome */

.together-item{
  flex:0 0 auto;
  height:220px;
  aspect-ratio:3/2;                 /* 높이가 정해져 있으니 폭은 여기서 나온다 */
  overflow:hidden;
  scroll-snap-align:start;
}
.together-item .cover{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
/* 사진이 한 장도 없으면 빈 자리만 남으므로 통째로 감춘다. */
.together:has(.together-strip:empty){ display:none }

/* ---------- Contact (페이지 맨 아래 블록) ---------- */
.contact{ padding:44px var(--pad) 0; scroll-margin-top:80px }
.contact h2{
  font-size:14px;
  letter-spacing:.02em;
  padding-bottom:9px;
  border-bottom:.5px solid var(--line-s);
}
.clist{ list-style:none; margin-top:14px }
.clist li{ padding:7px 0 }
.clist .cname{ opacity:.55; margin-right:6px }
.clist a{
  font-size:15px;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:.5px;
}
.clist a:hover{ text-decoration-thickness:1.5px }

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  .about-cols{ columns:1 }
  .people{ grid-template-columns:repeat(2,1fr) }

  /* 방식은 같고 높이만 낮춘다. */
  .together-item{ height:160px }
  /* 모바일은 칸이 좁으므로 원도 조금 작게. 호버가 없는 화면이라 커지지도 않는다. */
  .person{ min-height:196px }
  .person .pblob{ --blob:88px; right:16px; top:16px }
  .person:hover .pblob{ --blob:88px }
  .sec{ padding-top:36px }
  .doongji{ margin-top:32px; padding:38px var(--pad) }
  .dj-dot{ width:190px; height:190px; right:-70px; top:-70px }
  .contact{ padding-top:34px }
}
@media (max-width:520px){
  .people{ grid-template-columns:1fr }
}