/* 버튼, 작가 카드, 약력, 작품 격자, 라이트박스, 등장 모션 */

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s2) 0;min-height:44px;font-size:14px;letter-spacing:.06em;color:var(--ink);
  border-bottom:1px solid var(--line-firm);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{color:var(--clay-deep);border-bottom-color:var(--clay-deep)}
.btn-solid{color:var(--clay);border-bottom-color:var(--clay)}
.btn-arrow{transition:transform .3s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- 작가 ---------- */
.about{
  background:var(--paper);border:1px solid var(--line);
  padding:var(--s8);
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s8);
}
.about-bio{font-size:17px;line-height:2;max-width:44ch}
.about-lines{display:flex;flex-direction:column;gap:var(--s4);align-self:start}
.about-line{display:flex;flex-direction:column;gap:2px}
.about-line dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.about-line dd{margin:0;font-size:15px}

/* ---------- 약력 ---------- */
.cv{display:flex;flex-direction:column;gap:var(--s2)}
.cv-block{border-top:1px solid var(--line);padding-top:var(--s4)}
.cv-head{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s2) 0;min-height:44px;text-align:left;
}
.cv-head h3{font-size:20px}
.cv-mark{
  position:relative;width:14px;height:14px;color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.cv-mark::before,.cv-mark::after{
  content:"";position:absolute;top:50%;left:50%;background:currentColor;
}
.cv-mark::before{width:13px;height:1px;transform:translate(-50%,-50%)}
.cv-mark::after{
  width:1px;height:13px;transform:translate(-50%,-50%) scaleY(1);
  transition:transform .35s var(--ease);
}
.cv-head:hover .cv-mark{color:var(--clay)}
.cv-head[aria-expanded="true"] .cv-mark{color:var(--clay)}
.cv-head[aria-expanded="true"] .cv-mark::after{transform:translate(-50%,-50%) scaleY(0)}

.cv-list{
  display:grid;gap:var(--s1);
  padding-block:var(--s3) var(--s5);
  font-size:14.5px;
}
.cv-block[data-collapsed="true"] .cv-list,
.cv-block[data-collapsed="true"] .cv-tags{display:none}
.cv-row{
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,.85fr);
  gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid rgba(210,198,179,.5);
}
.cv-row:last-child{border-bottom:0}
.cv-row .yr{color:var(--clay);font-variant-numeric:tabular-nums;font-size:13px}
.cv-row .place{color:var(--ink-soft);font-size:13.5px}
.cv-row.is-plain{grid-template-columns:88px minmax(0,1fr)}
.cv-tags{display:flex;flex-wrap:wrap;gap:var(--s2);padding-block:var(--s3) var(--s5)}
.cv-tags li{
  border:1px solid var(--line);
  padding:5px var(--s3);font-size:13px;color:var(--ink-soft);background:var(--paper);
}

/* ---------- 작품 격자 (연도 상세) ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:var(--s6) var(--s5);
  align-items:start;
}
/* min-width:0 이 없으면 안쪽 이미지가 넓을 때 격자 칸이 통째로 부풀어 오른다 */
.piece{display:flex;flex-direction:column;gap:var(--s3);margin:0;min-width:0}
.piece[data-span="2"]{grid-column:span 2}
.piece[data-span="full"]{grid-column:1/-1}
@media (max-width:560px){
  /* minmax(0,1fr) 이어야 파노라마가 칸을 밀어내지 않는다 */
  .gallery{grid-template-columns:minmax(0,1fr)}
  .piece[data-span="2"]{grid-column:span 1}
  /* 가로로 아주 긴 작품은 좁은 화면에서 실낱처럼 눌린다. 높이를 지키고 옆으로 밀어 본다. */
  .piece[data-span="full"] .piece-plate{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .piece[data-span="full"] img{height:190px;width:auto;max-width:none}
}
.piece-plate{
  display:block;width:100%;padding:0;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .35s var(--ease);
}
.piece-plate img{width:100%;height:auto;transition:transform .9s var(--ease)}
.piece-plate:hover{border-color:var(--line-firm)}
.piece-plate:hover img{transform:scale(1.02)}
.piece-cap{display:flex;flex-direction:column;gap:2px}
.piece-title{
  font-family:var(--font-display);font-size:16px;line-height:1.4;
  /* 작품 제목은 한 줄로. 칸보다 긴 제목은 말줄임하고 전체 제목은 마우스를 올리면 뜬다 */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.piece-meta{font-size:12.5px;color:var(--ink-soft)}

/* ---------- 연도 상세 머리 ---------- */
.chapter-hero{padding-block:var(--s9) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.contact-links{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s8)}

/* 눌러서 복사되는 연락처 줄 */
.copy-line{
  position:relative;
  display:inline-flex;align-items:flex-start;
  padding:var(--s2) 0;text-align:left;color:var(--ink);
  border-bottom:1px solid var(--line-firm);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.copy-line:hover{color:var(--clay-deep);border-bottom-color:var(--clay-deep)}
/* 복사가 막힌 환경에서 손으로 긁어 복사할 수 있어야 한다 */
.copy-value{font-size:16px;letter-spacing:.02em;user-select:text}
/* 복사한 순간에만 뜬다. 자리를 차지하지 않아야 줄이 밀리지 않는다. */
.copy-note{
  position:absolute;top:100%;left:0;margin-top:var(--s2);white-space:nowrap;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--clay);
  opacity:0;transition:opacity .25s var(--ease);
}
.copy-line.is-shown .copy-note{opacity:1}
.copy-line.is-done{color:var(--clay);border-bottom-color:var(--clay)}
.load-error{color:var(--ink-soft)}
.chapter-hero h1{font-size:clamp(38px,6vw,68px);line-height:1;font-variant-numeric:tabular-nums}
.chapter-hero p{color:var(--ink-soft);max-width:46ch}
.chapter-tools{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s3)}
.backlink{align-self:flex-start;font-size:13px;letter-spacing:.06em;color:var(--ink-soft)}
.backlink:hover{color:var(--clay)}

/* ---------- 라이트박스 ---------- */
.viewer{
  position:fixed;inset:0;z-index:60;display:none;
  background:rgba(46,40,32,.965);
  backdrop-filter:blur(3px);
  padding:var(--s5);
}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s4)}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);color:var(--paper)}
.viewer-count{font-size:12.5px;letter-spacing:.14em;color:rgba(242,236,225,.65);font-variant-numeric:tabular-nums}
.viewer-close{
  width:44px;height:44px;color:var(--paper);
  border:1px solid rgba(242,236,225,.28);display:grid;place-items:center;font-size:16px;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.viewer-close:hover{background:rgba(242,236,225,.12);border-color:rgba(242,236,225,.55)}
/* grid 로 두면 안쪽 행이 이미지 원래 높이만큼 늘어나서 max-height:100% 가 무력해진다.
   flex 로 두어야 100% 의 기준이 실제로 남은 높이가 된다. */
.viewer-stage{display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.viewer-stage img{max-width:100%;max-height:100%;object-fit:contain}
.viewer-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5);
  color:var(--paper);
}
.viewer-info{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.viewer-title{font-family:var(--font-display);font-size:21px;line-height:1.35}
.viewer-meta{font-size:13px;color:rgba(242,236,225,.72)}
.viewer-desc{font-size:13.5px;color:rgba(242,236,225,.82);max-width:52ch;line-height:1.8}
.viewer-steps{display:flex;gap:var(--s2);flex-shrink:0}
.viewer-step{
  width:44px;height:44px;color:var(--paper);
  border:1px solid rgba(242,236,225,.28);display:grid;place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.viewer-step:hover{background:rgba(242,236,225,.12);border-color:rgba(242,236,225,.55)}
@media (max-width:640px){
  .viewer{padding:var(--s4)}
  .viewer-foot{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .viewer-steps{justify-content:center}
  .viewer-desc{display:none}
}
body.is-locked{overflow:hidden}

/* ---------- 등장 모션 ---------- */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ---------- 좁은 화면 ---------- */
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:var(--s6);padding:var(--s6)}
  .cv-row{grid-template-columns:72px minmax(0,1fr);gap:var(--s3)}
  .cv-row .place{grid-column:2;font-size:13px}
}