/* 표표건축사사무소 — 공통 스타일 */
:root{
  --bg:#fff; --fg:#111; --muted:#8a8f95; --hair:#e6e8ea; --ph:#eceef0; --phl:#b4b9be;
  --sans:"IBM Plex Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(18px,4.5vw,64px);
  --gap:clamp(36px,5.5vw,88px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d0e10; --fg:#eceef0; --muted:#80868d; --hair:#212427; --ph:#17191c; --phl:#3c4247;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0d0e10; --fg:#eceef0; --muted:#80868d; --hair:#212427; --ph:#17191c; --phl:#3c4247;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
     font-weight:300;font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
.ph{background:var(--ph);display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--phl);text-align:center}

/* 머리 — 로고 왼쪽 위, 메뉴 오른쪽 */
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
     padding:26px var(--gut) 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand svg{display:block;height:26px;width:auto}
.bname{font-family:var(--mono);font-size:11px;letter-spacing:.2em;line-height:1.4;color:var(--muted)}
.nav{display:flex;gap:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;
     text-transform:uppercase;padding-top:5px}
.nav a{color:var(--muted)}
.nav a.on,.nav a:hover{color:var(--fg)}

main{padding:clamp(40px,7vw,86px) 0 0;min-height:60vh}
main.detail{padding-top:clamp(20px,3vw,34px)}

.ptitle{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
        padding:0 var(--gut) clamp(20px,3vw,34px)}
.ptitle h1{font-size:clamp(18px,2.2vw,23px);font-weight:400;margin:0}
.ptitle span{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em}

/* 작품 상세 */
.hero{margin:0}
.hero img{max-height:92vh;object-fit:cover}
.hero .ph{aspect-ratio:16/9}
.head{padding:clamp(34px,6vw,76px) var(--gut) 0;max-width:1240px}
.head h1{font-size:clamp(24px,3.2vw,38px);font-weight:400;margin:0;letter-spacing:-.01em;line-height:1.28}
.sub{color:var(--muted);margin-top:9px;font-size:clamp(14px,1.5vw,16px)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:0 26px;
      margin:34px 0 0;border-top:1px solid var(--hair)}
.meta div{padding:12px 0;border-bottom:1px solid var(--hair)}
.meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.meta dd{margin:5px 0 0;font-size:14px}
.lead{max-width:62ch;margin:clamp(32px,4.5vw,58px) 0 0;font-size:clamp(15px,1.6vw,16.5px);line-height:1.85}

.flow{padding:clamp(44px,7vw,100px) 0 0}
figure{margin:0}
.blk{margin:0 0 var(--gap)}
.blk figure+figure{margin-top:clamp(10px,1.5vw,20px)}
figcaption,.cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);margin-top:10px}

/* 전폭 */
.w-full .cap{padding-inline:var(--gut)}
.w-full .ph{aspect-ratio:16/9}
/* 본문폭 */
.w-text{padding-inline:var(--gut);max-width:calc(1240px + 2 * var(--gut));margin-inline:auto}
.w-text .ph{aspect-ratio:3/2}
/* 반폭 2열 */
.w-half{padding-inline:var(--gut);max-width:calc(1240px + 2 * var(--gut));margin-inline:auto}
.w-half .cap,.w-text .cap{padding-inline:0}
.w-half .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.5vw,20px);align-items:start}
.w-half .pair figure+figure{margin-top:0}
.w-half .ph{aspect-ratio:4/5}
@media (max-width:620px){.w-half .pair{grid-template-columns:1fr}}

/* 도면 — 회색 띠 위 흰 판. 사진과 같은 급 */
.k-drawing{padding:clamp(32px,5vw,74px) var(--gut);background:var(--ph)}
.k-drawing .board{background:#fff;padding:clamp(22px,3.5vw,50px);max-width:1240px;margin-inline:auto}
.k-drawing.w-full .board{max-width:none}
.k-drawing .ph{aspect-ratio:16/10;background:transparent;border:1px solid var(--hair)}
.k-drawing .cap{max-width:1240px;margin-inline:auto}
.k-drawing.w-half .pair{padding:0}

/* 글 */
.note{padding:0 var(--gut);max-width:calc(62ch + 2 * var(--gut));margin:0 0 var(--gap);line-height:1.85;font-size:clamp(15px,1.6vw,16.5px)}
.note p{margin:0 0 1em}

.next{border-top:1px solid var(--hair);margin-top:clamp(20px,4vw,40px);
      padding:clamp(34px,5vw,64px) var(--gut);display:flex;align-items:baseline;
      justify-content:space-between;gap:18px;flex-wrap:wrap}
.next small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--muted);
            text-transform:uppercase;display:block;margin-bottom:7px}
.next b{font-weight:400;font-size:clamp(18px,2.3vw,27px)}
.next a:hover b{text-decoration:underline;text-underline-offset:6px}

/* 관련 링크 */
.refs{padding:0 var(--gut);max-width:calc(1240px + 2 * var(--gut));margin:0 auto var(--gap)}
.refs h2{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.refs ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.refs li{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--hair);font-size:14px}
.refs a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.refs li span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* 글 페이지 (Office / News / Contact) */
.page{padding:0 var(--gut);max-width:calc(720px + 2 * var(--gut))}
.page h1{font-size:clamp(20px,2.4vw,26px);font-weight:400;margin:0 0 22px}
.page h2{font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.14em;
         text-transform:uppercase;color:var(--muted);margin:48px 0 10px}
.intro p{margin:0 0 1em;max-width:62ch}
.rows{border-top:1px solid var(--hair)}
.row{display:grid;grid-template-columns:86px 1fr;gap:16px;padding:14px 0;
     border-bottom:1px solid var(--hair);align-items:baseline}
.row>span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.row p{margin:0;font-size:14.5px}
.row .body{margin-top:6px;color:var(--muted);font-size:13.5px}
.row a{text-decoration:underline;text-underline-offset:3px}
.cv h1 .en{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted);margin-left:12px;font-weight:400}
.cv .row{grid-template-columns:104px 1fr}
.cv .row p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.row img{margin-top:10px;max-width:420px}

.draftbar{background:#fff3c4;color:#5a4a00;font-family:var(--mono);font-size:11px;
          letter-spacing:.06em;padding:8px var(--gut);text-align:center}

footer{padding:clamp(50px,7vw,90px) var(--gut) 40px;margin-top:clamp(40px,6vw,80px);
       border-top:1px solid var(--hair);display:flex;justify-content:space-between;
       gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;
       letter-spacing:.08em;color:var(--muted)}

/* ── 첫 화면: 시간순으로 쌓이는 사진 — 3열, 사진 비율 그대로, 줄마다 아래 선을 맞춤 */
main.home{padding-top:clamp(36px,5vw,80px)}
.stack{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;
       column-gap:clamp(24px,3.6vw,72px);row-gap:0;padding:0 var(--gut);
       max-width:calc(1280px + 2 * var(--gut));margin:0 auto}
.piece{display:grid;grid-row:span 2;grid-template-rows:subgrid;margin-bottom:clamp(44px,5.5vw,96px)}
.pimg{align-self:end;display:block}
.pimg img{width:100%;filter:grayscale(1);transition:filter .5s ease}
.piece:hover img{filter:none}
.pcap{display:block;margin-top:14px;line-height:1.45}
.pcap b{display:block;font-weight:500;font-size:15px;margin-bottom:4px}
.pcap span{display:block;font-size:12px;color:var(--muted)}
.stack.fx .piece{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.stack.fx .piece.in{opacity:1;transform:none}
@media (max-width:620px){.stack{grid-template-columns:repeat(2,1fr);column-gap:16px}
  .piece{margin-bottom:36px}.pcap b{font-size:13.5px}.pcap span{font-size:11px}}
@media (prefers-reduced-motion:reduce){.stack.fx .piece{opacity:1;transform:none;transition:none}}


/* ── 상세: 대표 사진은 본문 안에, 사진은 한 장씩 어긋나게 */
.detail .hero{padding:clamp(40px,6vw,84px) var(--gut) 0;max-width:calc(1240px + 2 * var(--gut))}
.detail .hero:empty{display:none}
.detail .hero img{max-height:84vh;width:auto;max-width:100%;object-fit:contain}
.detail .flow{padding-top:clamp(40px,6vw,90px)}
.loose{padding:0 var(--gut);max-width:calc(1240px + 2 * var(--gut));margin:0 auto var(--gap)}
.loose figure{width:var(--w);margin-left:var(--ml)}
.loose figure+figure{margin-top:clamp(36px,6vw,96px)}
@media (max-width:620px){.loose figure{width:100%;margin-left:0}}
.detail .meta{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.detail .next b{font-size:clamp(16px,1.8vw,20px)}

/* 머리글·바닥글을 사진 묶음과 같은 폭에 맞춘다 — 위아래 끝선이 하나로 */
.top,footer>*{max-width:1280px}
.top{box-sizing:content-box;margin:0 auto}
footer{max-width:1280px;box-sizing:content-box;margin-left:auto;margin-right:auto;border-top:0;position:relative}
footer::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;border-top:1px solid var(--hair)}

/* ── 상세: 모든 것을 첫 화면과 같은 1280 폭, 같은 3열 눈금 위에 */
.detail{--G:clamp(24px,3.6vw,72px);--c1:calc((100% - 2 * var(--G)) / 3);--c2:calc(var(--c1) * 2 + var(--G))}
main.detail{padding-top:clamp(36px,5vw,80px)}
.df{max-width:1280px;margin:0 auto;padding:0 var(--gut);box-sizing:content-box}
.detail .head{display:grid;grid-template-columns:var(--c1) var(--c2);column-gap:var(--G);padding:0;max-width:none;
              margin-bottom:clamp(48px,6vw,104px)}
.detail .head h1{font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.35;margin:0}
.detail .sub{margin-top:6px;font-size:13.5px}
.detail .meta{display:block;margin:28px 0 0;border:0}
.detail .meta div{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:3px 0;border:0}
.detail .meta dt{font-family:var(--sans);font-size:12px;letter-spacing:0;color:var(--muted);text-transform:none}
.detail .meta dd{margin:0;font-size:12.5px;line-height:1.55}
.detail .lead{margin:0;max-width:62ch;font-size:14.5px;line-height:1.9}
.detail .lead p{margin:0 0 1em}
/* 사진 — 폭 전체 또는 3분의 2, 높이는 화면을 넘지 않게 */
.detail .blk,.detail .blk.w-full,.detail .blk.w-text,.detail .blk.w-half{padding:0;max-width:none;margin:0 0 clamp(48px,6vw,110px)}
.detail .blk.w-text{width:var(--c2)}
.detail .blk.w-text.r{margin-left:auto}
.detail .blk figure+figure{margin-top:var(--G)}
.detail .blk img{width:auto;max-width:100%;max-height:86vh}
.detail .blk.w-text.r img{margin-left:auto}
.detail .w-half .pair{gap:var(--G)}
.detail .blk .cap,.detail .w-full .cap{padding:0;margin-top:10px;font-family:var(--sans);font-size:12px;letter-spacing:0}
/* 도면 — 회색 판, 폭 안에서 */
.detail .k-drawing{background:var(--ph);padding:clamp(20px,3vw,48px)}
.detail .k-drawing .board{max-width:none;padding:clamp(16px,2.4vw,40px)}
.detail .k-drawing .board img{max-height:none}
/* 글 — 둘째 열부터, 개요 글과 같은 자리 */
.detail .note{padding:0;margin:0 0 clamp(48px,6vw,110px) calc(var(--c1) + var(--G));max-width:min(62ch,var(--c2));font-size:14.5px;line-height:1.9}
.detail .refs{padding:0;max-width:none;margin:0 0 clamp(48px,6vw,110px)}
.detail .next{padding:clamp(28px,4vw,56px) 0 0;margin:0;border-top:1px solid var(--hair)}
.detail .next b{font-weight:400;font-size:15px}
.detail .next .nr{text-align:right}
@media (max-width:760px){
  .detail .head{grid-template-columns:1fr;row-gap:28px}
  .detail .blk.w-text{width:100%}
  .detail .note{margin-left:0}
}
.detail .w-half .pair{align-items:end}
.detail .w-half .pair figure+figure{margin-top:0}

/* ── 상세 = 작품집. 12칸 눈금, 면 사이 넉넉히 */
.book{--G12:clamp(12px,1.6vw,28px)}
.book .cover{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--G12);align-items:end;
             margin-bottom:clamp(110px,13vw,220px)}
.book .ct{grid-column:1/5;padding-bottom:4px}
.book .ct h1{font-size:clamp(22px,2.2vw,30px);font-weight:500;line-height:1.3;margin:0}
.book .cy{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px}
.book .ct .sub{margin-top:18px;font-size:12.5px;color:var(--muted);max-width:24em;line-height:1.6}
.book .cimg{grid-column:6/13;margin:0}
.book img{width:100%;height:auto;max-height:70vh;object-fit:contain;object-position:left bottom}
.book .sp{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--G12);align-items:end;
          margin-bottom:clamp(110px,13vw,220px)}
.book .sp figure{margin:0;position:relative}
.book .sp.top{align-items:start}
.book .cap-sideL img{object-position:right bottom}
.book figcaption{display:flex;gap:10px;font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.book figcaption span{font-family:var(--mono);font-size:10px;color:var(--fg)}
/* 캡션을 사진 옆 여백으로 — 인쇄물처럼 */
@media (min-width:761px){
  .book .cap-side figure{display:grid;grid-template-columns:1fr}
  .book .cap-side figcaption{position:absolute;left:calc(100% + var(--G12) * 2);bottom:0;width:13em;flex-direction:column;gap:4px;margin:0}
  .book .cap-sideL figcaption{position:absolute;right:calc(100% + var(--G12) * 2);bottom:0;width:13em;flex-direction:column;gap:4px;margin:0;text-align:right;align-items:flex-end}
}
.book .dw{background:var(--ph);padding:clamp(14px,2vw,32px)}
.book .colophon{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--G12);
                border-top:1px solid var(--hair);padding-top:clamp(28px,3.5vw,48px);margin-bottom:clamp(60px,8vw,120px)}
.book .cl{grid-column:1/5}
.book .cr{grid-column:5/11;font-size:14px;line-height:1.9}
.book .cr p{margin:0 0 1em}
.book .meta{display:block;margin:0;border:0}
.book .meta div{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:3px 0;border:0}
.book .meta dt{font-size:12px;color:var(--muted)}
.book .meta dd{margin:0;font-size:12.5px;line-height:1.55}
.book .lk{list-style:none;padding:0;margin:1.6em 0 0;font-size:12.5px}
.book .lk a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.book .lk span{color:var(--muted)}
.book .next{padding:clamp(24px,3vw,40px) 0 0;margin:0;border-top:1px solid var(--hair);display:flex;justify-content:space-between}
.book .next b{font-weight:400;font-size:15px}
.book .next .nr{text-align:right}
@media (max-width:760px){
  .book .cover,.book .sp,.book .colophon{grid-template-columns:1fr;row-gap:28px;margin-bottom:72px}
  .book .ct,.book .cimg,.book .sp figure,.book .cl,.book .cr{grid-column:1/-1!important}
  .book .cover{display:flex;flex-direction:column-reverse;align-items:stretch}
}

/* 면: 모두 왼쪽 정렬, 캡션은 사진 아래. 세 장(세로+가로 둘)은 두 줄로 */
.book .sp{align-items:end;row-gap:var(--G12)}
.book .sp.stack3{align-items:start}
.book .sp figcaption{position:static!important;width:auto!important;flex-direction:row!important;text-align:left!important;align-items:baseline!important;margin-top:10px!important}
.book .sp img{object-position:left bottom!important}
.book .sp.stack3 img{object-position:left top!important}
/* 표지도 왼쪽 정렬: 제목 위, 대표 사진 아래 왼쪽 */
.book .cover{display:block}
.book .cover .ct{margin-bottom:clamp(28px,3vw,44px)}
.book .cover .cimg{width:calc((100% - 11 * var(--G12)) / 12 * 7 + 6 * var(--G12))}
@media (max-width:760px){.book .cover .cimg{width:100%}}

/* ── 안쪽 기준선(4번째 칸) + 왼쪽 여백(1~3칸)에 번호·캡션 */
.book .cover{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--G12);row-gap:clamp(28px,3vw,44px);align-items:end}
.book .cover .cm{grid-column:1/4;grid-row:1;font-family:var(--mono);font-size:11px;color:var(--muted);padding-bottom:6px}
.book .cover .ct{grid-column:4/13;grid-row:1;margin:0}
.book .cover .ct .sub{margin-top:10px}
.book .cover .cimg{grid-column:4/11;grid-row:2;width:auto}
.book .sp .mg{grid-column:1/4;grid-row:1;align-self:end;list-style:none;margin:0;padding:0;font-size:11.5px;color:var(--muted);line-height:1.6}
.book .sp.stack3 .mg{align-self:end}
.book .sp .mg li{display:flex;gap:10px}
.book .sp .mg span{font-family:var(--mono);font-size:10px;color:var(--fg)}
.book .colophon .cl{grid-column:1/4}
.book .colophon .cr{grid-column:4/10}
@media (max-width:760px){
  .book .cover{display:flex;flex-direction:column;align-items:stretch;row-gap:14px}
  .book .cover .cm{order:2;padding:0}.book .cover .ct{order:1}.book .cover .cimg{order:3;margin-top:14px}
  .book .sp{display:flex;flex-direction:column;gap:14px}
  .book .sp .mg{order:9;display:flex;flex-wrap:wrap;gap:4px 16px}
}

/* ── 상세 = 핀업 벽 */
.pinpage{}
.phead{margin-bottom:clamp(28px,3.5vw,52px)}
.phead h1{font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.3;margin:0}
.pmeta{margin-top:8px;font-size:12.5px;color:var(--muted)}
.pmeta i{font-style:normal;margin:0 8px;opacity:.6}
/* 핀업 벽 — 옅은 벽 위에 출력물을 위쪽 선에 맞춰 꽂은 것처럼 */
.wall{display:flex;flex-wrap:wrap;align-items:flex-start;background:var(--wallc,#efeeeb);
      padding:clamp(28px,4vw,64px) clamp(20px,3.5vw,56px) clamp(10px,2vw,30px)}
.pin{display:block;width:min(var(--w),100%);margin:var(--mt) var(--mr) clamp(36px,4.5vw,64px) 0;cursor:zoom-in;
     background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 18px rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s}
.pin img{display:block;width:100%;height:auto;max-height:none}
.pin:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.14),0 14px 26px rgba(0,0,0,.09)}
.pin.dw{padding:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wall{--wallc:#1a1b1d}}
@media (max-width:760px){.wall{padding:22px 14px 4px}.pin{width:min(calc(var(--w) * .55),100%);margin:calc(var(--mt) * .5) 14px 24px 0}}
.pinpage .colophon{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(12px,1.6vw,28px);
  border-top:1px solid var(--hair);padding-top:clamp(28px,3.5vw,48px);margin:clamp(56px,7vw,110px) 0 clamp(60px,8vw,120px)}
.pinpage .cl{grid-column:1/4}.pinpage .cr{grid-column:4/10;font-size:14px;line-height:1.9}
.pinpage .cr p{margin:0 0 1em}
.pinpage .meta{display:block;margin:0;border:0}
.pinpage .meta div{display:grid;grid-template-columns:62px 1fr;gap:10px;padding:3px 0;border:0}
.pinpage .meta dt{font-size:12px;color:var(--muted);font-family:var(--sans);letter-spacing:0;text-transform:none}
.pinpage .meta dd{margin:0;font-size:12.5px;line-height:1.55}
.pinpage .lk{list-style:none;padding:0;margin:1.6em 0 0;font-size:12.5px}
.pinpage .lk a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pinpage .lk span{color:var(--muted)}
.pinpage .next{padding:clamp(24px,3vw,40px) 0 0;margin:0;border-top:1px solid var(--hair);display:flex;justify-content:space-between}
.pinpage .next b{font-weight:400;font-size:15px}.pinpage .next .nr{text-align:right}
@media (max-width:760px){
  .pinpage .colophon{grid-template-columns:1fr;row-gap:24px}.pinpage .cl,.pinpage .cr{grid-column:1/-1}}
/* 크게 보기 — 벽 앞에서 한 장을 들여다보듯. 뒤의 벽은 흐리게 남는다 */
.lb{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;cursor:zoom-out;
    background:rgba(255,255,255,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background .38s ease,backdrop-filter .38s ease}
.lb.on{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lb.on{background:rgba(13,14,16,.82)}}
.lb[hidden]{display:none}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:flex-start;width:min-content;max-width:92vw}
.lb img{max-width:76vw;max-height:76vh;width:auto;height:auto;transform-origin:center;transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.lb figcaption{margin-top:12px;font-size:12px;color:var(--muted);display:flex;gap:14px;opacity:0;transition:opacity .25s}
.lb.on figcaption{opacity:1;transition-delay:.2s}
.lb .lbn{font-family:var(--mono);font-size:10.5px;color:var(--fg);white-space:nowrap;flex:none}
.lb figcaption{width:100%}
@media (max-width:760px){.lb img{max-width:92vw;max-height:70vh}}
/* 벽 가득 꽂기 — 4열, 사진마다 폭·자리·간격만 조금씩 다르게 */
.wall.scatter{display:block;column-count:4;column-gap:clamp(18px,2.4vw,40px);padding:clamp(28px,3.5vw,56px)}
.wall.scatter .pin{break-inside:avoid;display:block;width:var(--cw);margin:var(--cy) 0 clamp(26px,3vw,48px) calc((100% - var(--cw)) * var(--cx) / 100);
}
@media (max-width:760px){.wall.scatter{column-count:2;column-gap:14px;padding:18px}.wall.scatter .pin{margin-bottom:18px}}
/* MMAL 정도로 — 회색 벽·그림자 없이 흰 바탕에 그대로 */
.wall.scatter{background:none;padding:0;column-count:4;column-gap:clamp(24px,3vw,56px)}
.wall.scatter .pin{box-shadow:none;background:none;margin-bottom:clamp(36px,4.5vw,80px)}
.wall.scatter .pin:hover{transform:none;box-shadow:none}
.wall.scatter .pin:hover img{opacity:.85}
@media (max-width:760px){.wall.scatter{column-count:2;column-gap:16px;padding:0}.wall.scatter .pin{margin-bottom:22px}}

/* MMAL 참고 — 열 폭 그대로, 아래 간격만 사진마다 다르게 */
.wall.scatter .pin{width:100%;margin:0 0 var(--gap) 0}
@media (max-width:760px){.wall.scatter .pin{margin-bottom:calc(var(--gap) * .45)}}
/* 핀업 벽 — 1280 폭 안에서 4열 (로고·메뉴가 잡는 틀 안에) */
.wall.scatter{column-count:4}
@media (max-width:760px){.wall.scatter{column-count:2}}

/* 글 페이지(Projects·CV·News·Contact)도 1280 폭에 맞춘다 — 로고·메뉴와 같은 양끝선 */
.page{max-width:1280px;margin:0 auto;box-sizing:content-box;padding:0 var(--gut)}

/* 머리글 키움 — 위 여백 넓게, 로고·이름 크게, 메뉴는 로고 가운데 높이에 */
.top{padding-top:clamp(36px,4.2vw,64px);align-items:center}
.brand{gap:16px}
.brand svg{height:clamp(30px,2.6vw,40px)}
.bname{font-size:clamp(11px,.85vw,13px);letter-spacing:.22em;line-height:1.45}
.nav{font-size:clamp(11.5px,.8vw,12.5px);padding-top:0}

/* 한글은 낱말 중간에서 줄이 꺾이지 않게 */
body{word-break:keep-all;overflow-wrap:break-word}
/* 휴대폰: 작품 정보는 한 줄에 하나씩 */
@media (max-width:760px){
  .pmeta span{display:block}
  .pmeta i{display:none}
  .pmeta span+span{margin-top:2px}
}

/* 핀업 벽: 가로 순서 배치(스크립트) — 열을 나란히 세우고 각 열 안에서 위에서 아래로 */
.wall.scatter.masonry{column-count:auto;display:flex;align-items:flex-start;gap:clamp(24px,3vw,56px)}
.wall.scatter.masonry .mcol{flex:1 1 0;min-width:0}
@media (max-width:760px){.wall.scatter.masonry{gap:16px}}

/* 크게 보기를 열고 닫을 때 스크롤바가 사라졌다 생기며 화면이 옆으로 밀리지 않게 — 스크롤바 자리를 늘 비워 둔다 */
html{scrollbar-gutter:stable}

/* 자른 사진: 틀(pfr) 안에서 원본의 일부만 보인다 */
.pin .pfr{position:relative;display:block;overflow:hidden}
.pin .pfr img{position:absolute;display:block;max-width:none;height:auto}
.wall.scatter .pin:hover .pfr img{opacity:.85}

/* 개요표: 영어 항목 이름이 길어도 한 줄로, 내용 칸 시작선은 모든 줄에서 같게 */
.pinpage .meta,.detail .meta,.book .meta{display:grid;grid-template-columns:max-content 1fr;column-gap:18px;row-gap:6px}
.pinpage .meta div,.detail .meta div,.book .meta div{display:contents}
.pinpage .meta dt,.detail .meta dt,.book .meta dt{white-space:nowrap;line-height:1.55}

/* 핀업 벽: 위아래 간격 = 칸 사이 간격 (모두 같게). 변화는 사진 크기·비율로만 */
.wall.scatter .pin{margin:0 0 clamp(24px,3vw,56px) 0}
@media (max-width:760px){.wall.scatter .pin{margin-bottom:16px}}

/* 사진 저장 막기: 휴대폰에서 길게 눌러 저장, 끌기 */
img{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

/* 핀업 벽 12칸 그리드 (사진 크기는 관리페이지에서 1/4·1/3·1/2·2/3·전체) */
.wall.scatter.grid12{display:block;column-count:auto;position:relative}
.wall.scatter.grid12 .pin{position:absolute;margin:0;display:block}

/* CV — 촘촘하게: 줄 사이 선 없이, 묶음 제목은 왼쪽 칸에 */
.cv .rows{border-top:0}
.cv .row{grid-template-columns:96px 1fr;gap:12px;padding:3px 0;border-bottom:0}
@media (max-width:600px){.cv .row{grid-template-columns:78px 1fr;gap:10px}}
.cv .row p{font-size:13.5px;line-height:1.55}
.cv .row>span{font-size:10px}
.cv h2{margin:30px 0 8px}
@media (min-width:900px){
  .page.cv{display:grid;grid-template-columns:180px 1fr;column-gap:24px}
  .page.cv>h1,.page.cv>.intro{grid-column:1 / -1}
  .page.cv>h2{grid-column:1;margin:30px 0 0;padding-top:5px;border-top:1px solid var(--hair)}
  .page.cv>.rows{grid-column:2;margin-top:30px;padding-top:2px;border-top:1px solid var(--hair)}
}
.plist h2 small{display:block;margin-top:4px;font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--muted)}

/* News — 촘촘하게 */
.news .rows{border-top:1px solid var(--hair);padding-top:6px}
.news .row{grid-template-columns:96px 1fr;gap:12px;padding:5px 0;border-bottom:0}
.news .row p{font-size:13.5px;line-height:1.55}
.news .row>span{font-size:10px}
.news .row .body{margin-top:1px;font-size:12.5px;line-height:1.5}
.news .row .body p{font-size:12.5px;margin:0}
.news .row img{max-width:240px;margin-top:6px}
@media (max-width:600px){.news .row{grid-template-columns:64px 1fr;gap:10px}}