/* style.css — 설계서 §3 · §8(2026-10-13 글자·여백 기준) 시험 페이지(HOME, 작품 페이지)의 CSS를 하나로 합친 것 */
:root{--ink:#0E0F11;--wall-r:#131417;--paper:#F4F2EE;--graphite:#5B5E63;--hairline:#D8D5CF;--dark-mute:#9a9ca1;--dark-line:#2a2c30;--slit:#2A3DAE;
--serif:'Noto Serif KR','Cormorant Garamond',serif;--garamond:'Cormorant Garamond','Noto Serif KR',serif;--sans:system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{font-family:var(--serif);word-break:keep-all;overflow-wrap:break-word}
body.home{background:var(--ink);color:var(--paper);font-size:16px;line-height:1.8}
body.page{background:var(--paper);color:var(--ink);font-size:15px;line-height:1.8}
a{color:inherit;text-decoration:none}
img{max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* 메뉴 */
nav{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(14px + env(safe-area-inset-top,0px)) 7vw 0;mix-blend-mode:difference;color:#fff;pointer-events:none;transition:transform .35s ease}
nav.hide{transform:translateY(-120%)}
nav .row{display:flex;gap:2.2vw;justify-content:flex-end;pointer-events:auto}
nav a,nav button{font:12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:none;border:0;cursor:pointer;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .6s}
nav a:hover,nav a:focus-visible{background-size:100% 1px}
#mbtn{display:none;pointer-events:auto;padding:16px 32px 16px 0;margin-top:-16px}
#ov{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--paper);display:none;padding:calc(26px + env(safe-area-inset-top,0px)) 7vw 40px;flex-direction:column}
#ov.on{display:flex}
#ov button{align-self:flex-start;font:12px var(--sans);letter-spacing:.12em;color:var(--paper);background:none;border:0;margin-bottom:8vh;cursor:pointer}
#ov a{display:block;font:600 20px/2.5 var(--garamond);letter-spacing:.12em;text-transform:uppercase}
#ov a:nth-of-type(1){margin-left:18%;margin-bottom:26px}
#ov a:nth-of-type(2){margin-left:0}
#ov a:nth-of-type(3){margin-left:28%}
#ov a:nth-of-type(4){margin-left:8%}
#ov a:nth-of-type(5){margin-left:24%}
#ov a:nth-of-type(6){margin-left:2%}
#ov a:nth-of-type(7){margin-left:14%}
@media(max-width:760px){nav .row{display:none}#mbtn{display:block}}

/* ===== HOME ===== */
.label,.sub,.it .ty,#proj .c{font-family:var(--sans)}
.label{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
#open{position:relative;height:100svh;min-height:520px;background:var(--slit);overflow:hidden}
.wl,.wr{position:absolute;top:0;bottom:0;background-image:repeating-linear-gradient(180deg,transparent 0,transparent 21vh,rgba(244,242,238,.045) 21vh,rgba(244,242,238,.045) calc(21vh + 1px))}
.wl{left:0;width:calc(63.6% - max(.55%,2.5px));background-color:var(--ink)}
.wr{left:calc(63.6% + max(.55%,2.5px));right:0;background-color:var(--wall-r)}
.title{position:absolute;left:7vw;right:7vw;bottom:13vh;z-index:2}
.t1{font:600 clamp(17px,1.8vw,26px)/1 var(--garamond);letter-spacing:.22em;text-transform:uppercase;opacity:.85;margin-bottom:clamp(18px,1.8vw,26px)}
.t2{font:300 clamp(32px,3.6vw,52px)/1.2 var(--serif);letter-spacing:.06em}
.t3{font:300 clamp(20px,2.1vw,31px)/1.3 var(--serif);letter-spacing:.08em;margin-top:clamp(18px,1.8vw,26px)}
.t4{font:italic 400 clamp(14px,1.5vw,22px)/1.4 var(--garamond);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-top:18px}
@media(max-width:640px){.t1{letter-spacing:.14em}}
@media(min-width:769px){.title{bottom:16vh}}
#cue{position:absolute;right:7vw;bottom:0;width:1px;height:56px;background:rgba(244,242,238,.3);z-index:2;overflow:hidden;transition:opacity .4s}
#cue i{position:absolute;left:0;top:-45%;width:1px;height:45%;background:var(--paper);animation:cue 7s 3s infinite}
@keyframes cue{0%{top:-45%}30%,100%{top:100%}}
#cue.off{opacity:0;animation:none}
section.hs{padding:clamp(96px,14vh,200px) 7vw}
.grid{display:block}
.grid>h2{font-weight:400;color:var(--dark-mute);margin-bottom:28px}
.paper{background:var(--paper);color:var(--ink)}
.paper .grid>h2{color:var(--graphite)}
#up{background:var(--ink);padding-top:22px;padding-bottom:8vh}
.sub{margin:44px 0 6px;font-size:12px;letter-spacing:.12em;color:var(--dark-mute)}
.sub:first-child{margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 6vw}
.it{padding:16px 0;border-top:1px solid var(--dark-line)}
.it .m{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;min-height:25px}
.it .vn2{font-size:14px;color:var(--dark-mute)}
.two .uc .it .vn2{color:#c9c6c0}
.it .d{font:clamp(13px,1vw,14px) var(--mono);color:#c9c6c0}
.two .rc .it .d{color:#85878c}
.it .ty{font-size:11px;letter-spacing:.06em;color:var(--dark-mute)}
.it .vn2+.ty{margin-left:8px}
.it b{display:block;font-weight:400;font-size:16px;margin-top:2px}
.it em{display:block;font-style:normal;font-size:13px;color:var(--dark-mute)}
@media(max-width:1100px){.two{grid-template-columns:1fr}.two .rc{margin-top:44px}.two .uc+.rc{margin-top:44px}}
#about{padding-top:16vh;padding-bottom:0}
#about p{font:300 16px/1.8 var(--serif);max-width:30em}
#about a{display:inline-block;margin-top:28px;font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--hairline)}
#ls{max-width:38em}
.lrow{border-top:1px solid var(--hairline)}
.lhead{display:flex;align-items:center;gap:14px;padding:10px 0}
.play{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--graphite);background:none;color:var(--ink);cursor:pointer;font-size:11px}
.lhead a,.lhead .nolink{flex:1;font-size:16px}
.lhead span.y{font:13px var(--mono);color:var(--graphite);min-width:3em}
.vid{display:none;margin:0 0 14px}
.lrow.on .vid{display:block}
.vid small{display:block;margin-top:8px;font-size:12px;color:var(--graphite)}
.vid small a{border-bottom:1px solid var(--hairline)}
#proj .cols{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hairline)}
#proj .it{padding:18px 18px 28px;border-top:0;border-left:1px solid var(--hairline)}
#proj .it:first-child{padding-left:0;border-left:0}
#proj .y{font:13px var(--mono);color:var(--graphite)}
#proj h3{margin:12px 0;font:300 clamp(17px,1.5vw,21px)/1.4 var(--serif)}
#proj .c{font-size:11px;letter-spacing:.12em;color:var(--graphite)}
@media(max-width:640px){#proj .cols{grid-template-columns:1fr}#proj .it{padding:18px 0;border-left:0;border-top:1px solid var(--hairline)}#proj .it:first-child{border-top:0}}
footer{background:var(--paper);color:var(--ink);padding:0 7vw 56px}
footer .in{border-top:1px solid var(--hairline);padding-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 6vw;font-size:14px;color:var(--graphite)}
footer .in div{max-width:36em}

/* ===== 공통 재생 표지 ===== */
.cover{display:flex;align-items:center;justify-content:center;width:100%;max-width:640px;aspect-ratio:16/9;background:#111;color:#9a9ca1;font:13px var(--sans);border:0;cursor:pointer}
iframe{width:100%;max-width:640px;aspect-ratio:16/9;border:0;display:block}

/* ===== 작품 페이지 ===== */
main{padding:16vh 7vw 12vh}
h1{font:300 clamp(28px,3vw,40px)/1.2 var(--serif);padding-bottom:22px;border-bottom:1px solid #b9b8b4}
main .sub{margin:0;margin-top:18px;font:italic 400 clamp(16px,1.6vw,20px)/1.4 var(--garamond);color:var(--graphite);letter-spacing:0}
.meta{margin-top:26px;font:13px var(--mono);color:var(--graphite)}
.tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:4px 18px;font:italic 400 14px var(--garamond);letter-spacing:.06em;text-transform:uppercase;color:var(--graphite)}
.sec{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,44em);gap:3vw;margin-top:clamp(52px,8vh,92px)}
.sec>h2{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);padding-top:6px}
.note{font-size:15px}
.note p{margin-bottom:1.1em}
.note blockquote{margin:1.4em 0 1.4em 1.4em;font-style:italic}
.note cite{display:block;font:12px var(--sans);font-style:normal;color:var(--graphite);letter-spacing:.04em}
.note h3{font:400 12px var(--sans);letter-spacing:.12em;color:var(--graphite);margin:1.6em 0 .3em}
.note ul{list-style:none;margin-bottom:1em}
.byline{margin:10px 0 0;font:12px var(--sans);color:var(--graphite)}
.r{display:grid;grid-template-columns:7.5em 1fr;gap:4px 14px;padding:10px 0;border-top:1px solid var(--hairline);font-size:14px}
.r .d{font:13px var(--mono);color:var(--graphite)}
.r em{display:inline;margin-left:.8em;font-style:normal;font-size:13px;color:var(--graphite)}
.r b{font:12px var(--mono);font-weight:400;color:var(--graphite);margin-right:8px}
.li{padding:6px 0;font-size:15px}
.li.s{font-size:14px;line-height:1.65}
.li span.n{font:13px var(--mono);color:var(--graphite);margin-left:8px}
.li a{border-bottom:1px solid var(--hairline)}
.gh{margin-top:18px;padding-top:10px;border-top:1px solid var(--hairline);font:400 14px/1.5 var(--serif);color:var(--ink)}
.gh:first-child{border-top:0;margin-top:0;padding-top:0}
.ro{font:11.5px var(--sans);letter-spacing:.04em;color:var(--graphite);margin-right:.6em}
.pl{margin-top:10px}
.pl .li.s{padding:2px 0;color:var(--ink)}
.pl .gh{margin-top:12px;padding-top:8px}
.pl .gh:first-child{border-top:0;margin-top:0;padding-top:0}
.wn summary{cursor:pointer;font:14px var(--sans);color:var(--graphite);list-style:none}
.wn summary::-webkit-details-marker{display:none}
.wn .note{margin-top:16px}
.yl{display:block;margin-top:8px;font:12px var(--sans);color:var(--graphite)}
.yl a{border-bottom:1px solid var(--hairline)}
@media(max-width:768px){.sec{grid-template-columns:1fr;gap:18px}.note{font-size:14.5px;line-height:1.75}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== ABOUT (시험 ABOUT 페이지 기준. 본문 16px, 섹션 간격 clamp(64px,10vh,120px)) ===== */
body.about{font-size:16px}
body.about main{padding:16vh 7vw 20vh}
body.about h1{font:400 clamp(21px,2.1vw,27px)/1.3 var(--serif)}
.pcbr{display:inline}
@media(max-width:768px){.pcbr{display:none}}
.intro{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:0 6vw;align-items:start;margin-top:36px}
.intro .lead{margin:0;max-width:41em;font:300 16px/1.8 var(--serif)}
.rep img{display:block;width:100%;height:auto}
@media(max-width:768px){.intro{grid-template-columns:1fr;gap:28px}.rep{order:-1}}
body.about .sec{margin-top:clamp(64px,10vh,120px)}
body.about .sec p{margin-bottom:1.1em}
.en{color:var(--graphite);font-size:16px}
.sec.wide{grid-template-columns:minmax(130px,200px) minmax(0,1fr)}
body.about h3{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin:0 0 6px}
.tw{display:grid;grid-template-columns:1fr 1fr;gap:0 4vw}
.t{padding:8px 0;border-top:1px solid var(--hairline);line-height:1.5}
.t b{font-weight:400;display:block;font-size:14px}
.t span{display:block;font-size:13px;color:var(--graphite)}
.t i{font:12.5px var(--mono);font-style:normal;color:var(--graphite);margin-left:8px}
.ed{display:grid;grid-template-columns:6em 1fr;gap:0 12px;padding:10px 0;line-height:1.5}
.ed i{font:12.5px var(--mono);font-style:normal;color:var(--graphite);padding-top:2px}
.ed b{font-weight:400;display:block;font-size:14px}
.ed span{display:block;font-size:13px;color:var(--graphite)}
.aff{font:14px/2.3 var(--serif)}
.aff.mc{font-size:13px;line-height:1.9;margin-top:22px}
.aff .lab{font:12px var(--sans);letter-spacing:.12em;color:var(--graphite);display:block;margin-bottom:2px}
@media(max-width:768px){.tw{grid-template-columns:1fr}.tw>div+div{margin-top:28px}body.about .sec p{font-size:15.5px;line-height:1.75}body.about .sec p.aff{font-size:14px;line-height:2.3}body.about .sec p.aff.mc{font-size:13px;line-height:1.9}.sec.wide{grid-template-columns:1fr}}
/* 사진 줄: 높이 120px 통일, 휴대폰은 가로 스크롤 */
.gal{display:flex;gap:8px;margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gal .gl{flex:none;display:block}
.gal img{display:block;height:120px;width:auto}
/* 확대 */
#lb{position:fixed;inset:0;z-index:40;background:rgba(14,15,17,.94);display:none;align-items:center;justify-content:center}
#lb.on{display:flex}
#lb img{max-width:90vw;max-height:86vh;width:auto;height:auto;display:block}
#lb button{position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;font:12px var(--sans);letter-spacing:.12em}
#lb .lbx{top:calc(18px + env(safe-area-inset-top,0px));right:7vw;padding:12px}
#lb .lbp,#lb .lbn{top:50%;transform:translateY(-50%);font:300 36px/1 var(--serif);padding:16px}
#lb .lbp{left:1vw}#lb .lbn{right:1vw}

/* ===== WORKS 목록 ===== */
body.works{font-size:16px}
body.works main{padding:14vh 7vw 20vh}
body.works h1{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slit);margin-bottom:28px;padding:0;border:0}
#f{display:flex;flex-wrap:wrap;gap:0 18px;padding-bottom:12px;margin-bottom:8px}
#f[hidden]{display:none}
#f::-webkit-scrollbar{display:none}
#f button{font:12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);background:none;border:0;border-bottom:1px solid transparent;padding:8px 0;cursor:pointer}
#f button.on{color:var(--ink);border-bottom-color:var(--ink)}
#n{font:13px var(--mono);color:var(--graphite);margin:18px 0 6px}
.w{display:grid;grid-template-columns:7em minmax(0,1.3fr) minmax(0,1.6fr) 5.5em;gap:2px 18px;align-items:baseline;padding:11px 0;line-height:1.5;border-top:1px solid var(--hairline)}
.w[hidden]{display:none}
.w .y,.w .d{font:13px var(--mono);color:var(--graphite)}
.w .d{text-align:right}
.w .t{font-size:15px;padding:0;border:0}
.w .t a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s}
.w .t a:hover{background-size:100% 1px}
.w .i{font-size:13px;color:var(--graphite)}
@media(max-width:768px){.w{grid-template-columns:5.2em 1fr;padding:11px 0}.w .i,.w .d{grid-column:2;text-align:left}.w .d:empty,.w .i:empty{display:none}}

/* ===== PERFORMANCES ===== */
body.perf{font-size:15px}
body.perf main{padding:14vh 7vw 12vh}
body.perf h1{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slit);margin-bottom:12px;padding:0;border:0}
body.perf .h{font:400 12px var(--sans);letter-spacing:.12em;color:var(--graphite);margin:44px 0 6px}
.pe{padding:14px 0;border-top:1px solid var(--hairline);font-size:14px;max-width:860px}
.pe .m{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-bottom:2px;min-height:25px}
.pe .d{font:13px var(--mono);color:var(--graphite)}
.pe .ty{font:11px var(--sans);letter-spacing:.06em;color:var(--graphite)}
.pe .v+.ty{margin-left:8px}
.pe .v{font-size:14px;color:var(--graphite)}
.pe b{font-weight:400;display:block;font-size:15px}
.pe em{display:block;font-style:normal;font-size:13px;color:var(--graphite)}
.pe em i{font-style:normal;opacity:.85}
.pe a{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;background-image:linear-gradient(var(--hairline),var(--hairline))}
body.perf details{border-top:1px solid var(--hairline);max-width:860px}
body.perf summary{cursor:pointer;padding:13px 0;font:13px var(--mono);color:var(--graphite);list-style:none}
body.perf summary::-webkit-details-marker{display:none}
body.perf summary span{margin-left:10px}
body.perf details .pe:first-of-type{border-top:0}
@media(max-width:768px){body.perf{font-size:14.5px}}

/* ===== PROJECTS ===== */
body.projects{font-size:15px}
body.projects main{padding:14vh 7vw 12vh}
body.projects h1{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slit);margin-bottom:12px;padding:0;border:0}
.cat{font:400 12px var(--sans);letter-spacing:.12em;color:var(--graphite);margin:48px 0 6px}
details.pj{border-top:1px solid var(--hairline);scroll-margin-top:60px}
details.pj>summary{cursor:pointer;list-style:none;display:flex;gap:18px;align-items:baseline;padding:16px 0}
details.pj>summary::-webkit-details-marker{display:none}
details.pj .y{font:13px var(--mono);color:var(--graphite);min-width:3em}
details.pj .n{font:300 clamp(17px,1.4vw,20px)/1.4 var(--serif)}
.pj .in{padding:4px 0 28px 0}
.pj .k{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,44em);gap:3vw;margin-top:18px}
.pj .k h4{font:400 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);padding-top:6px}
.pj .k>div>div{font-size:15px;line-height:1.7;padding:2px 0}
.pj .k.sm>div>div,.pj .k.pf2>div>div{font-size:14px;line-height:1.6;padding:1px 0}
.pj .k.sm .gh{margin-top:16px;padding-top:10px;border-top:1px solid var(--hairline);font:400 14px/1.5 var(--serif);color:var(--ink)}
.pj .k.sm .gh:first-child{border-top:0;margin-top:0;padding-top:0}
.pj .k small{display:block;font-size:13px;color:var(--graphite)}
.pj .dt{font:13px var(--mono);color:var(--graphite);margin-right:10px}
.pj .nt p{font-size:15px;line-height:1.8;margin-bottom:1.1em}
.pj .nt small{margin-top:4px}
.pj .ed{display:block;grid-template-columns:none;gap:0;padding:10px 0;border-top:1px solid var(--hairline);line-height:1.5}
.pj .ed:first-child{border-top:0;padding-top:0}
.pj .ed b{display:inline;font-weight:400;font-size:15px}
.pj .ed span{display:inline;font:13px var(--mono);color:var(--graphite);margin-right:10px}
.pj .ed small{line-height:1.6}
.pj .note{margin:6px 0 0;font-size:15px;color:var(--graphite)}
.pj a{background-image:linear-gradient(var(--hairline),var(--hairline));background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:1px}
@media(max-width:768px){.pj .k{grid-template-columns:1fr;gap:6px}.pj .nt p,.pj .note{font-size:14.5px;line-height:1.75}details.pj>summary{gap:12px}}

/* ===== DISCOURSE ===== */
body.discourse main{padding:14vh 7vw 12vh}
body.discourse h1,body.contact h1{font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slit);margin-bottom:12px;padding:0;border:0}
#tabs{display:flex;gap:10px 26px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;margin-bottom:40px}
#tabs[hidden]{display:none}
#tabs::-webkit-scrollbar{display:none}
#tabs button{font:12px var(--sans);letter-spacing:.12em;color:var(--graphite);background:none;border:0;border-bottom:1px solid transparent;padding:8px 0;cursor:pointer}
#tabs button.on{color:var(--ink);border-bottom-color:var(--ink)}
#dis .tab{max-width:38em;margin-bottom:56px}
#dis .th{font:400 12px var(--sans);letter-spacing:.12em;color:var(--graphite);margin-bottom:6px}
#dis.js .th{display:none}
#dis.js .tab{display:none;margin-bottom:0}
#dis.js .tab.on{display:block}
#dis #talk{max-width:none}
.ri{display:block;padding:16px 0;border-top:1px solid var(--hairline)}
.ri b{display:block;font:400 15px/1.5 var(--serif)}
.ri span{display:block;font:13px/1.6 var(--sans);color:var(--graphite);margin-top:4px}
.ri summary{cursor:pointer;list-style:none}
.ri summary::-webkit-details-marker{display:none}
.ri em{display:block;font:14px/1.7 var(--serif);font-style:normal;color:var(--graphite);margin-top:8px}
.ri[open] summary em{display:none}
.ri.lk:hover b{text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:4px}
.bd{margin-top:18px}
.bd p{font:15px/1.85 var(--sans);margin-bottom:1em}
.bd.sf p{font:15px/1.85 var(--serif)}
.bd small{display:block;font:12px var(--sans);color:var(--graphite)}
.bd .srcn{margin-bottom:14px}
.bd p b{display:inline;font-weight:700}
.fm{border-collapse:collapse;margin:0 0 1.2em;font:14px/1.7 var(--sans)}
.fm th,.fm td{text-align:left;padding:4px 28px 4px 0;border-bottom:1px solid var(--hairline);font-weight:400}
.fm th{font-size:12px;letter-spacing:.12em;color:var(--graphite)}
#dis .e{padding:14px 0;border-top:1px solid var(--hairline);font-size:15px;max-width:860px}
#dis .e .m{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-bottom:2px;min-height:25px}
#dis .e .d{font:13px var(--mono);color:var(--graphite)}
#dis .e .ty{font:12px var(--sans);letter-spacing:.06em;color:var(--graphite)}
#dis .e .v{font-size:14px;color:var(--graphite)}
#dis .e .v+.ty{margin-left:8px}
#dis .e b{font-weight:400;font-size:15px}
#dis .e a{border-bottom:1px solid var(--hairline)}
#dis .xn{display:block;margin-top:6px;font:13px/1.7 var(--sans);color:var(--graphite)}
@media(max-width:768px){.bd.sf p,.bd p{font-size:14.5px}}

/* ===== 원문 글 페이지(/discourse/{slug}/) ===== */
body.essay{font-size:16px}
body.essay main{padding:16vh 7vw 20vh}
body.essay .back{font:12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
body.essay .kind{margin-top:28px;font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
body.essay h1{margin:10px 0 0;font:300 clamp(22px,2.2vw,30px)/1.35 var(--serif);padding-bottom:18px;border-bottom:1px solid #b9b8b4}
body.essay .sub{margin-top:12px;font:300 clamp(15px,1.2vw,17px)/1.6 var(--serif)}
body.essay .by{margin-top:6px;font:13px/1.6 var(--sans);color:var(--graphite)}
.art{max-width:36em;margin-top:clamp(40px,7vh,72px)}
.art p{font:16px/1.9 var(--serif);margin-bottom:1.1em}
.ep{margin:0 0 2.2em;padding-left:1.1em;border-left:1px solid var(--hairline);color:var(--graphite)}
.ep p{font-size:15.5px;line-height:1.85;margin-bottom:.2em}
.ep .who{margin-top:.6em;font:13px/1.6 var(--sans)}
.art h2{font:400 clamp(19px,1.8vw,22px)/1.5 var(--serif);margin:2.6em 0 1em}
.sep{text-align:center;letter-spacing:.6em;color:var(--graphite);margin:1.8em 0}
.art .bio{margin-top:3.4em;padding-top:1.4em;border-top:1px solid var(--hairline)}
.art .bio b{display:block;font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite);margin-bottom:.6em}
.art .bio p{font:14px/1.8 var(--sans);color:var(--graphite)}
@media(max-width:768px){.art p{font-size:15.5px;line-height:1.85}}

/* ===== CONTACT ===== */
body.contact main{padding:16vh 7vw 20vh}
body.contact h1{margin-bottom:36px}
.mail{display:inline-block;font:300 clamp(17px,1.5vw,20px)/1.4 var(--serif);border-bottom:1px solid #b9b8b4}
.ch{margin-top:clamp(64px,10vh,120px);max-width:38em}
.ch a{display:block;padding:14px 0;border-top:1px solid var(--hairline);font-size:16px}
.ch a:last-child{border-bottom:1px solid var(--hairline)}

/* 목록 페이지(WORKS·PERFORMANCES·PROJECTS) 본문 폭: 글자 960px. 좁은 화면에서는 화면 폭을 그대로 따른다 */
body.works main,body.perf main,body.projects main{max-width:calc(960px + 14vw)}
body.perf .pe,body.perf details{max-width:none}

/* 작품 페이지: 목록 페이지와 같은 격자(글자 960px)·같은 라벨(WORKS, 세션 틈 색, 목록으로 돌아가는 링크) */
body.work main{max-width:calc(960px + 14vw);padding-top:14vh}
body.work .lab{display:inline-block;font:400 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--slit);margin-bottom:28px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s}
body.work .lab:hover,body.work .lab:focus-visible{background-size:100% 1px}