/* B-monograph : artist's book. 텍스트는 작게, 작품은 크게. */
:root{
  --paper:#f5f3ef;
  --ink:#161513;
  --mute:#85817a;
  --line:#d9d5ce;
  --gut:40px;           /* 페이지 좌우 여백 */
  --col:minmax(0,1fr);
  --sans:"Inter Tight","Pretendard Variable",Pretendard,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;letter-spacing:-.005em;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
ul{list-style:none}
.mute{color:var(--mute)}
.u{border-bottom:1px solid currentColor;padding-bottom:1px}
.u:hover{color:var(--mute)}

/* ---------- 12단 그리드 : 좌 3단 = 색인(running index), 우 9단 = 본문 ---------- */
.grid{display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;padding:0 var(--gut)}
.idx{grid-column:1/4}
.body{grid-column:4/13}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:20;background:var(--paper);display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;align-items:baseline;padding:18px var(--gut) 16px;font-size:13px}
.hd .logo{grid-column:1/4;font-weight:600;letter-spacing:.02em}
.gnb{grid-column:4/11;display:flex;gap:28px}
.gnb>li{position:relative}
.gnb>li>a{letter-spacing:.04em}
.gnb>li>a[aria-current]{border-bottom:1px solid var(--ink)}
.gnb .sub{position:absolute;left:0;top:100%;padding-top:10px;min-width:180px;display:none}
.gnb .sub ul{background:var(--paper);padding:4px 0}
.gnb .sub a{display:block;padding:3px 0;color:var(--mute)}
.gnb .sub a:hover{color:var(--ink)}
.gnb>li:hover .sub{display:block}
.util{grid-column:11/13;display:flex;gap:18px;justify-content:flex-end;color:var(--mute)}
.util a:hover{color:var(--ink)}
.burger{display:none;background:none;border:0;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);justify-self:end}

/* ---------- 메인 : 표지 ---------- */
.cover-name{padding:5vw var(--gut) 0;font-size:clamp(64px,19.2vw,360px);font-weight:500;line-height:.86;letter-spacing:-.045em;white-space:nowrap}
.cover-meta{display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;padding:28px var(--gut) 36px;font-size:15px}
.cover-meta p{grid-column:1/7}
.cover-meta .ctas{grid-column:7/13;display:flex;gap:28px;justify-content:flex-end}
.plate{height:calc(100vh - 60px);min-height:560px;max-height:1000px}
.plate-cap{display:flex;justify-content:space-between;gap:24px;padding:12px var(--gut) 0;font-size:12px}

/* ---------- 섹션 공통 ---------- */
.sec{padding-top:160px}
.label{font-size:12px;color:var(--mute)}
.label b{font-weight:500;display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
.sec-foot{display:flex;justify-content:flex-end;padding:40px var(--gut) 0;font-size:13px}

/* 캡션 : 국문/영문 2줄 */
.cap{padding-top:12px;font-size:13px;line-height:1.5}
.cap .en{color:var(--mute)}

/* ---------- Now ---------- */
.now{display:grid;grid-template-columns:repeat(9,var(--col));column-gap:24px;align-items:end}
.now .ph{grid-column:1/6;aspect-ratio:4/5}
.now .tx{grid-column:6/10;padding-bottom:4px}
.now h3{font-size:30px;font-weight:500;line-height:1.2;letter-spacing:-.02em;margin-bottom:14px}
.now p{color:var(--mute);margin-bottom:28px}

/* ---------- Selected Works : 한 점씩 크게, 편집 리듬 ---------- */
.sw-index{position:sticky;top:80px;align-self:start}
.sw-index ol{list-style:none;margin-top:28px;font-size:13px;counter-reset:n}
.sw-index li{display:grid;grid-template-columns:28px 1fr auto;padding:5px 0;border-top:1px solid var(--line)}
.sw-index li:last-child{border-bottom:1px solid var(--line)}
.sw-index li span:first-child{color:var(--mute)}
.sw-index li span:last-child{color:var(--mute)}
.sw-index a:hover{color:var(--mute)}
.works{display:grid;grid-template-columns:repeat(9,var(--col));column-gap:24px;row-gap:140px}
.w{scroll-margin-top:90px}
.w .ph{background:#e9e6e0}
.w.full{grid-column:1/10}.w.full .ph{aspect-ratio:16/10}
.w.l{grid-column:1/7}.w.l .ph{aspect-ratio:4/5}
.w.r{grid-column:4/10}.w.r .ph{aspect-ratio:5/4}
.w.s1{grid-column:1/5}.w.s1 .ph{aspect-ratio:3/4}
.w.s2{grid-column:6/10;align-self:end}.w.s2 .ph{aspect-ratio:1/1}
.w.c{grid-column:3/8}.w.c .ph{aspect-ratio:4/5}

/* ---------- 카드 (Project · Shop) ---------- */
.cards{display:grid;column-gap:24px;row-gap:56px}
.cards.c3{grid-template-columns:repeat(3,var(--col))}
.cards.c4{grid-template-columns:repeat(4,var(--col))}
.card .ph{aspect-ratio:4/5;background:#e9e6e0;overflow:hidden}
.card .ph img{transition:opacity .3s}
.card:hover .ph img{opacity:.88}
.card .meta{padding-top:12px;font-size:12px;color:var(--mute);letter-spacing:.02em}
.card .meta+.ttl{padding-top:2px}
.card .ttl{padding-top:12px;font-size:13px}
.card .price{font-size:13px;color:var(--mute)}
.card .price.so{text-decoration:line-through}

/* ---------- Contact ---------- */
.contact{padding-top:200px}
.contact h2{font-size:clamp(34px,4.4vw,64px);font-weight:500;line-height:1.12;letter-spacing:-.03em;margin-bottom:40px}
.contact .ctas{display:flex;gap:32px;font-size:15px}

/* ---------- 버튼 (텍스트형) ---------- */
.btn{display:inline-block;border:1px solid var(--ink);padding:11px 22px;font-size:13px;letter-spacing:.02em}
.btn:hover{background:var(--ink);color:var(--paper)}

/* ---------- 푸터 ---------- */
.ft{margin-top:200px;border-top:1px solid var(--ink);padding:24px var(--gut) 40px;display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;font-size:12px;color:var(--mute)}
.ft div:nth-child(1){grid-column:1/4;color:var(--ink)}
.ft div:nth-child(2){grid-column:4/7}
.ft div:nth-child(3){grid-column:7/11}
.ft div:nth-child(4){grid-column:11/13;text-align:right}

/* ---------- 하위 페이지 머리 (Work · Shop) ---------- */
.pagehd{padding:96px var(--gut) 0;display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;align-items:end}
.pagehd h1{grid-column:1/8;font-size:clamp(64px,9vw,140px);font-weight:500;line-height:.86;letter-spacing:-.045em}
.pagehd p{grid-column:8/13;font-size:13px;color:var(--mute);text-align:right;padding-bottom:8px}
.bar{margin:48px var(--gut) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;padding:12px 0;font-size:13px}
.tabs{display:flex;gap:24px;flex-wrap:wrap}
.tabs a{color:var(--mute)}
.tabs a[aria-current],.tabs a:hover{color:var(--ink)}
.tabs a[aria-current]{border-bottom:1px solid var(--ink)}
.view{display:flex;gap:16px;color:var(--mute);white-space:nowrap}
.view a[aria-current]{color:var(--ink)}

/* Work : 연도 색인 + 3열 */
.yr-index{position:sticky;top:80px;align-self:start;font-size:13px}
.yr-index li{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line)}
.yr-index li:last-child{border-bottom:1px solid var(--line)}
.yr-index li a[aria-current]{font-weight:600}
.yr-index .count{color:var(--mute)}
.yr{padding-top:64px}
.yr-hd{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:28px;scroll-margin-top:80px}
.yr-hd h2{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1}
.yr-hd span{font-size:12px;color:var(--mute)}
.wgrid{display:grid;grid-template-columns:repeat(3,var(--col));column-gap:24px;row-gap:48px}
.wgrid .ph{aspect-ratio:4/5;background:#e9e6e0}
.wgrid .card:nth-child(3n+2) .ph{aspect-ratio:4/5}
.more{display:flex;justify-content:center;padding-top:80px}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  :root{--gut:16px}
  .grid,.hd,.cover-meta,.ft,.pagehd{grid-template-columns:1fr;column-gap:0}
  .idx,.body,.hd .logo,.cover-meta p,.cover-meta .ctas,.pagehd h1,.pagehd p{grid-column:1/-1}
  .hd{grid-template-columns:1fr auto;padding:14px var(--gut)}
  .burger{display:block;grid-row:1;grid-column:2}
  .hd .logo{grid-column:1}
  .gnb,.util{display:none}
  .hd.open .gnb,.hd.open .util{display:flex;grid-column:1/-1;flex-direction:column;gap:12px;padding-top:24px}
  .hd.open .util{flex-direction:row;padding-top:20px;padding-bottom:8px;justify-content:flex-start}
  .hd.open .gnb{font-size:22px}
  .gnb .sub{display:none!important}
  .cover-name{font-size:21vw;padding-top:40px;white-space:normal}
  .cover-meta{row-gap:16px;padding:20px var(--gut) 24px}
  .cover-meta .ctas{justify-content:flex-start}
  .plate{height:70vh;min-height:0}
  .plate-cap{flex-direction:column;gap:2px}
  .sec{padding-top:96px}
  .idx{margin-bottom:28px}
  .sw-index{position:static}
  .sw-index ol{display:none}
  .now{grid-template-columns:1fr;row-gap:20px}
  .now .ph,.now .tx{grid-column:1/-1}
  .works{grid-template-columns:1fr;row-gap:64px}
  .w.full,.w.l,.w.r,.w.s1,.w.s2,.w.c{grid-column:1/-1}
  .cards.c3{grid-template-columns:1fr}
  .cards.c4,.wgrid{grid-template-columns:repeat(2,var(--col));column-gap:12px;row-gap:32px}
  .contact{padding-top:120px}
  .contact h2{font-size:30px}
  .ft{row-gap:12px;margin-top:120px}
  .ft div:nth-child(n){grid-column:1/-1;text-align:left}
  .pagehd{padding-top:48px;row-gap:12px}
  .pagehd p{text-align:left}
  .bar{flex-direction:column;align-items:flex-start;gap:12px}
  .tabs{gap:8px 16px}
  .yr-index{position:static}
  .yr-index ul{display:flex;gap:16px;flex-wrap:wrap}
  .yr-index li,.yr-index li:last-child{border:0;padding:0;gap:6px}
  .yr{padding-top:40px}
}

/* =========================================================
   2단계 확장 : 상세 · 보드 · 타임라인 · 폼
   ========================================================= */
a.ph{display:block}
.ph{overflow:hidden}
.btn{background:none;font-family:inherit;cursor:pointer;color:inherit}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.ctas{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.lede{font-size:clamp(20px,2vw,28px);line-height:1.5;letter-spacing:-.015em;max-width:30em;margin-bottom:40px}
.lede.sm{font-size:17px;margin-bottom:0}

/* 상세 : 큰 작품 + 고정 정보 칸 */
.detail{display:grid;grid-template-columns:repeat(12,var(--col));column-gap:24px;padding:40px var(--gut) 0;align-items:start}
.detail-media{grid-column:1/9}
.detail-media .ph{aspect-ratio:4/5;background:#e9e6e0}
.detail-info{grid-column:9/13;position:sticky;top:90px;padding-top:4px}
.detail.rev .detail-info{grid-column:1/5;grid-row:1}
.detail.rev .detail-media{grid-column:5/13;grid-row:1}
.detail.rev .detail-media .ph{aspect-ratio:4/3}
.d-ttl{font-size:40px;font-weight:500;line-height:1.15;letter-spacing:-.03em;margin:28px 0 32px}
.d-ttl span{display:block;font-size:17px;font-weight:400;letter-spacing:0;color:var(--mute);margin-top:8px}
.kv{font-size:13px;border-top:1px solid var(--ink)}
.kv div{display:grid;grid-template-columns:minmax(96px,40%) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.kv dt{color:var(--mute)}
.buy{display:flex;gap:10px;margin-top:28px}
.buy .btn{flex:1;text-align:center;padding:14px 10px}
.sel{font:inherit;font-size:13px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:4px 0;width:100%;color:var(--ink);border-radius:0}
.qty{display:inline-flex;border:1px solid var(--line)}
.qty button{width:32px;height:32px;border:0;background:none;font:inherit;cursor:pointer;color:var(--ink)}
.qty input{width:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font:inherit;background:none;color:var(--ink)}

.trio{display:grid;grid-template-columns:repeat(3,var(--col));column-gap:24px}
.trio .ph{aspect-ratio:3/4;background:#e9e6e0}
.stack{display:grid;row-gap:24px}
.stack .ph{aspect-ratio:16/10}
.prevnext{display:grid;grid-template-columns:1fr 1fr;margin:160px var(--gut) 0;border-top:1px solid var(--ink)}
.prevnext a{display:flex;flex-direction:column;gap:6px;padding:28px 0;font-size:13px}
.prevnext a+a{border-left:1px solid var(--line);padding-left:24px;text-align:right;align-items:flex-end}
.prevnext b{font-size:28px;font-weight:500;letter-spacing:-.02em}
.prevnext a:hover b{color:var(--mute)}
.tx-l{grid-column:1/5!important;align-self:start}
.now>.tx-l+.ph{grid-column:5/10;aspect-ratio:4/5}
.ph-fill{height:100%}
.h-mid{font-size:clamp(48px,6vw,96px)!important}

/* 연도 타임라인 (전시 아카이브 · CV) */
.tl{border-top:1px solid var(--ink)}
.tl-yr{display:grid;grid-template-columns:160px 1fr;column-gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.tl-yr h3{font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1}
.tl-yr li a{display:flex;justify-content:space-between;gap:24px;padding:6px 0;font-size:15px}
.tl-yr li a:hover span:first-child{color:var(--mute)}

.cards.c2{grid-template-columns:repeat(2,var(--col));row-gap:72px}
.cards.c2 .ph{aspect-ratio:4/3}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);list-style:none}
.steps li{padding:20px 24px 20px 0;font-size:20px;letter-spacing:-.01em}
.steps li+li{border-left:1px solid var(--line);padding-left:24px}
.steps span{display:block;font-size:12px;color:var(--mute);margin-bottom:28px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;border-top:1px solid var(--ink)}
.tbl th,.tbl td{text-align:left;padding:16px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{width:30%;font-weight:400;color:var(--mute)}
.wwrow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.ww{padding:20px 20px 64px 0;display:flex;flex-direction:column;gap:40px}
.ww+.ww{border-left:1px solid var(--line);padding-left:20px}
.ww b{font-size:22px;font-weight:500;letter-spacing:-.02em}
.cv-name{font-size:36px;font-weight:500;letter-spacing:-.03em;margin-bottom:32px}
.cv-name span{font-size:20px;font-weight:400}

/* 보드 */
.board-hint{padding:16px var(--gut) 0;font-size:12px;color:var(--mute)}
.board{margin:16px var(--gut) 0;height:78vh;min-height:520px;overflow:auto;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);cursor:grab;scrollbar-width:thin}
.board.drag{cursor:grabbing}
.board-canvas{position:relative;width:2440px;height:2100px}
.bp{position:absolute;display:block;user-select:none}
.bp img{height:auto;aspect-ratio:auto;pointer-events:none}
.bp span{display:block;font-size:11px;color:var(--mute);padding-top:6px}
.bp:hover span{color:var(--ink)}

/* 폼 */
.form{display:block}
.frow{display:grid;grid-template-columns:200px 1fr;column-gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.frow:first-child{border-top:1px solid var(--ink)}
.frow:last-child{border-bottom:0}
.flbl{font-size:13px;padding-top:8px}
.flbl i{font-style:normal;color:var(--mute)}
.in{width:100%;font:inherit;font-size:15px;background:transparent;border:0;border-bottom:1px solid var(--ink);padding:8px 0;color:var(--ink);border-radius:0;resize:vertical}
.in::placeholder{color:#a9a49c}
.in:focus{outline:none;border-bottom-width:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input,.file input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;border:1px solid var(--line);padding:8px 16px;font-size:13px;cursor:pointer}
.chip input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.chip input:focus-visible+span,.file input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.file{display:inline-flex;gap:16px;align-items:center;cursor:pointer;position:relative}
.file span{border:1px solid var(--ink);padding:8px 16px;font-size:13px}
.file em{font-style:normal;font-size:12px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;padding-top:6px;cursor:pointer}
.agree input{margin-top:4px;accent-color:var(--ink)}
.sent{margin-top:12px;font-size:13px}

@media (max-width:900px){
  .detail{grid-template-columns:1fr;row-gap:28px;padding-top:24px}
  .detail-media,.detail-info,.detail.rev .detail-info,.detail.rev .detail-media{grid-column:1/-1;position:static}
  .detail.rev .detail-media{grid-row:2}
  .d-ttl{font-size:30px;margin:16px 0 24px}
  .trio{grid-template-columns:1fr 1fr;row-gap:12px;column-gap:12px}
  .trio .ph:last-child{grid-column:1/-1;aspect-ratio:4/3}
  .prevnext{margin-top:96px}
  .prevnext b{font-size:20px}
  .tx-l,.now>.tx-l+.ph{grid-column:1/-1!important}
  .tl-yr{grid-template-columns:1fr;row-gap:12px}
  .tl-yr li a{flex-direction:column;gap:0;font-size:14px}
  .cards.c2{grid-template-columns:1fr;row-gap:40px}
  .steps{grid-template-columns:1fr}
  .steps li+li{border-left:0;border-top:1px solid var(--line);padding-left:0}
  .steps span{margin-bottom:8px}
  .wwrow{grid-template-columns:1fr 1fr}
  .ww{padding-bottom:28px;gap:20px}
  .ww:nth-child(3){border-left:0;padding-left:0}
  .ww:nth-child(n+3){border-top:1px solid var(--line)}
  .board{height:70vh;min-height:0}
  .frow{grid-template-columns:1fr;row-gap:8px}
  .flbl{padding-top:0}
  .lede{font-size:19px}
  .cv-name{font-size:26px}
  .bar .view:empty{display:none}
}