/* Design 03 — typography as architecture, objects in an open gallery. */
:root{--wordmark-size:clamp(68px,9vw,76.23px);--gutter:48px}
body{background:#fff;color:#000}
.topline{padding:34px var(--gutter) 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.wordmark{font-size:var(--wordmark-size);font-weight:700;letter-spacing:-.072em;line-height:.84;white-space:nowrap;display:inline-block;width:max-content}
.topline nav{min-width:300px;gap:25px;margin:0 0 5px;font-size:16px;justify-content:space-between}
.topline nav a,.topline nav button,.topline nav #quote{font-size:16px;color:#999;font-weight:400;min-width:0;padding:5px 0;transition:color .18s}
.topline nav .active,.topline nav button.active,.topline nav a:hover,.topline nav button:hover{color:#000;font-weight:700}
.play-page{height:100svh;overflow:hidden}
.play-page main{height:calc(100svh - var(--header-height,180px));min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 224px;grid-template-rows:minmax(0,1fr) 88px;column-gap:32px;padding:0 var(--gutter) 30px}
#stage{grid-column:1;grid-row:1;min-width:0;min-height:0;height:100%;background:#fff}
.stage-bottom{grid-column:1;grid-row:2;padding:0;min-height:0;align-self:end;align-items:center}
.arrangement-tools{gap:18px}
.selection-tools{gap:14px}
.selection-tools .icon-button{background:transparent}
.forms{grid-column:2;grid-row:1 / 3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;justify-items:center;gap:34px 14px;padding:34px 16px 44px 30px;border-top:0;border-left:1px solid #000;height:auto;min-height:0;overflow-x:hidden;overflow-y:auto;scroll-snap-type:none;overscroll-behavior:contain;--catalog-height:78px;--form-padding:0px;scrollbar-width:thin;scrollbar-color:#bbb #fff}
.forms::-webkit-scrollbar{display:block;width:3px}.forms::-webkit-scrollbar-thumb{background:#bbb}
.forms .form{width:100%;height:78px;padding:0;justify-content:center;align-items:center;scroll-snap-align:none;cursor:pointer}
.form img{height:78px;width:calc(78px*var(--form-ratio));max-width:100%;object-fit:contain;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.form:hover img,.form:focus-visible img{transform:translateY(-5px)}
.piece.selected{outline:1px solid #000;outline-offset:12px}
.alignment-guides line{stroke-dasharray:2 6;opacity:.35}
.editorial{max-width:none;padding:48px var(--gutter) 100px}
.about-grid{grid-template-columns:1.1fr .9fr;gap:10vw;align-items:start}
.about-copy h1{font-size:clamp(72px,9.2vw,146px);font-weight:700;line-height:.9;letter-spacing:-.075em;margin:0 0 65px}
.about-copy p{font-size:17px;line-height:1.9;max-width:400px;margin:22px 0}
.about-copy p:first-of-type{font-size:23px;line-height:1.4;letter-spacing:-.035em;margin:0 0 48px}
.about-grid figure{padding:45px 0 0}.about-grid img{max-height:720px;object-fit:contain;object-position:center top}
.material-index{margin-top:140px;padding-top:38px}
.material-index h2{font-size:clamp(48px,6vw,88px);font-weight:700;letter-spacing:-.07em;margin-bottom:65px}
.simple-materials .material-groups{grid-template-columns:1.1fr .9fr;gap:10vw}
.simple-materials h3{font-size:16px;margin-bottom:20px}
.simple-materials p{line-height:2;max-width:440px}
.archive-title{font-size:var(--wordmark-size);font-weight:700;letter-spacing:-.072em;line-height:.9;margin-bottom:64px}
.year-filter{gap:28px;margin:0 0 64px}.year-filter button{font-size:16px;color:#aaa}.year-filter .active{color:#000;font-weight:700}
.archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:110px 7vw;align-items:start}
.exhibition img,.no-photo{height:clamp(290px,32vw,500px);object-fit:cover}
.exhibition{margin:0;align-self:start}
.exhibition .year{font-size:14px;color:#777;margin:22px 0 12px}
.exhibition h2{font-size:clamp(26px,2.2vw,36px);font-weight:700;letter-spacing:-.05em;line-height:1.08;max-width:540px}
.exhibition p{font-size:14px;color:#777;line-height:1.7;margin-top:14px}
#quoteDialog{width:min(1240px,calc(100% - 64px));padding:40px;max-height:calc(100svh - 64px)}
#quoteDialog .contact-title{font-size:var(--wordmark-size);line-height:.84;letter-spacing:-.072em;margin:0 0 60px}
.contact-layout{grid-template-columns:1.3fr 1fr;gap:70px}.composition-preview{min-height:360px}.composition-preview img{max-height:500px}
#quoteSummary{gap:16px;margin-bottom:36px}#quoteSummary dt,#quoteSummary dd{font-size:16px}
#quoteForm input,#quoteForm textarea{border:0;border-bottom:1px solid #000;padding:12px 0}#quoteForm input:focus-visible,#quoteForm textarea:focus-visible{outline:none;border-bottom-width:2px}
#quoteForm .quote-actions{margin-top:38px;gap:18px}#quoteForm .quote-actions button{font-size:16px;min-height:50px}
.close{right:24px;top:18px}.toast{font-size:14px}
@media(max-width:1199px){:root{--gutter:32px;--wordmark-size:clamp(68px,9vw,76.23px)}.topline{grid-template-columns:1fr;gap:28px;padding-top:32px}.topline nav{justify-self:end;min-width:320px;margin:0}.play-page main{grid-template-columns:minmax(0,1fr) 194px;column-gap:24px;padding-bottom:22px}.forms{padding-left:24px;padding-right:12px;gap:30px 8px;--catalog-height:68px}.forms .form,.form img{height:68px}.form img{width:calc(68px*var(--form-ratio))}.about-grid{gap:7vw}.about-copy h1{font-size:10vw}.contact-layout{gap:36px}}
@media(max-width:700px){:root{--gutter:20px;--wordmark-size:clamp(58px,13.3vw,76.23px)}.topline{padding:25px var(--gutter) 24px;gap:24px}.topline nav{justify-self:stretch;min-width:0;gap:18px;font-size:14px}.topline nav a,.topline nav button,.topline nav #quote{font-size:14px;padding:4px 0}.play-page main{padding:0;display:flex;flex-direction:column;height:calc(100svh - var(--header-height,135px));min-height:0}#stage{flex:1;min-height:140px;width:100%}.stage-bottom{width:100%;flex-shrink:0;align-self:auto;padding:0 15px 7px;min-height:79px;gap:6px;flex-wrap:nowrap}.arrangement-tools{gap:6px}.arrangement-tools .icon-button{width:72px;height:72px}.selection-tools{gap:3px}.selection-tools .icon-button{width:38px;height:40px;padding:9px}.forms{display:flex;flex-shrink:0;height:118px;width:100%;border-left:0;border-top:1px solid #000;overflow-x:auto;overflow-y:hidden;padding:22px 20px 25px;gap:24px;--catalog-height:70px;--form-padding:0px}.forms .form{width:calc(70px*var(--form-ratio));height:70px;flex:0 0 auto}.form img{height:70px;width:calc(70px*var(--form-ratio));max-width:none}.forms::-webkit-scrollbar{height:2px}.editorial{padding:38px var(--gutter) 70px}.about-grid{grid-template-columns:1fr;gap:55px}.about-copy h1{font-size:clamp(75px,19vw,120px);margin-bottom:40px}.about-copy p:first-of-type{font-size:21px;margin-bottom:32px}.about-copy p{font-size:16px;max-width:460px}.about-grid figure{padding:0}.about-grid img{height:460px;max-height:65svh}.material-index{margin-top:80px;padding-top:28px}.material-index h2{font-size:54px;margin-bottom:40px}.simple-materials .material-groups{grid-template-columns:1fr;gap:35px}.archive-title{margin-bottom:42px}.year-filter{gap:12px 22px;margin-bottom:46px}.year-filter button{font-size:14px}.archive-grid{grid-template-columns:1fr;gap:65px}.exhibition img,.no-photo{height:105vw;max-height:520px}.exhibition h2{font-size:30px}.exhibition .year{margin:18px 0 9px}#quoteDialog{width:calc(100% - 24px);max-height:calc(100svh - 24px);padding:32px 20px}#quoteDialog .contact-title{font-size:var(--wordmark-size);margin-bottom:40px}.contact-layout{grid-template-columns:1fr;gap:32px}.composition-preview{min-height:0;height:230px}.composition-preview img{max-height:230px}.contact-fields{grid-template-columns:1fr 1fr}#quoteSummary{margin-bottom:24px}#quoteForm .quote-actions{gap:12px;margin-top:28px}.close{right:16px;top:13px}}
@media(max-width:380px){:root{--gutter:16px;--wordmark-size:54px}.stage-bottom{flex-wrap:wrap;padding:0 12px 8px}.arrangement-tools .icon-button{width:66px;height:66px}.selection-tools{gap:0}.contact-fields{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.topline nav a,.topline nav button,.form img{transition:none}}

/* Home is the working surface. Contact belongs to the composition. */
.topline nav{min-width:0;gap:36px;justify-content:flex-end}
.play-page main{grid-template-columns:minmax(0,1fr) 252px}
.composition-contact{position:absolute;right:8px;bottom:20px;z-index:4;background:#fff;color:#000;font:700 16px/1 Helvetica,"Apple SD Gothic Neo",sans-serif;letter-spacing:-.035em;padding:12px 0 9px;border-bottom:1px solid #000;cursor:pointer;touch-action:manipulation}
.composition-contact:hover{border-bottom-width:2px;padding-bottom:8px}.composition-contact[hidden]{display:none}
@media(max-width:1199px){:root{--wordmark-size:clamp(68px,9vw,76.23px)}.topline{grid-template-columns:minmax(0,1fr) auto;gap:24px}.topline nav{justify-self:end;min-width:0;gap:28px}.wordmark{font-size:var(--wordmark-size)}.play-page main{grid-template-columns:minmax(0,1fr) 210px}}
@media(max-width:700px){:root{--wordmark-size:clamp(58px,13.3vw,76.23px)}.topline{grid-template-columns:1fr;gap:22px}.wordmark{font-size:var(--wordmark-size)}.topline nav{justify-self:end;width:auto;gap:28px}.composition-contact{right:20px;bottom:13px;font-size:14px}}
@media(max-width:380px){:root{--wordmark-size:54px}}

/* Align visible letter edges, compensating for the large n side bearing. */
.topline .wordmark{position:relative;left:-.055em}
.topline{grid-template-columns:minmax(0,1fr);gap:28px}
.topline nav{justify-self:start;justify-content:flex-start;width:max-content;min-width:0;gap:36px;margin:0}
@media(max-width:700px){.topline{gap:20px}.topline nav{gap:28px}}

/* An object on a tilted plane describes the viewing angle. */
#perspective{color:#999;box-shadow:none}
#perspective.active,#perspective:hover{color:#000}
#perspective svg{width:24px;height:24px;stroke-width:1.5}
#perspective:hover svg,#perspective.active svg{stroke-width:1.75}
#perspective .view-plane{stroke-width:1.25}

.catalog{grid-column:2;grid-row:1 / 3;display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid #000}
.catalog .forms{grid-column:auto;grid-row:auto;flex:1;border-left:0;padding-top:34px}
#shuffle{position:absolute;top:8px;right:-2px;z-index:5;color:#999;background:transparent}
#shuffle:hover,#shuffle:focus-visible{color:#000}
@media(max-width:700px){.catalog{width:100%;height:118px;flex-shrink:0;border-left:0;border-top:1px solid #000}.catalog .forms{height:118px;border-top:0;padding-top:22px}#shuffle{right:12px;width:40px;height:40px;padding:8px}}

.selection-tools{margin-right:-2px}
#shuffle svg,#shuffle:hover svg{stroke-width:1.5}
@media(max-width:700px){.selection-tools{margin-right:0}}
@media(max-width:380px){.selection-tools{margin-right:3px}}

/* About: the title and description share the photograph's edges. */
.about-grid{align-items:stretch}
.about-copy{display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-width:0}
.about-copy h1{font-family:Helvetica,"Apple SD Gothic Neo",sans-serif;font-size:var(--wordmark-size);font-weight:700;line-height:.84;letter-spacing:-.072em;margin:0}
.about-copy .about-text p{font-size:17px;line-height:1.9;letter-spacing:normal;max-width:400px;margin:0}
.about-copy .about-text p+p{margin-top:22px}
.about-grid figure{padding:0;margin:0;align-self:start}
.about-grid img{width:100%;height:auto;max-height:none;object-fit:contain;display:block}
@media(max-width:1000px){.about-grid{grid-template-columns:1fr;gap:40px}.about-copy{display:contents}.about-copy h1{grid-row:1}.about-grid figure{grid-row:2;width:min(100%,560px)}.about-text{grid-row:3;max-width:560px}.about-copy .about-text p{max-width:560px}}
@media(max-width:700px){.about-grid{gap:32px}.about-copy .about-text p{font-size:16px;line-height:1.9}.about-copy .about-text p+p{margin-top:22px}}

/* Keep each material name readable as one unit. */
.simple-materials .material-name{white-space:nowrap}

/* A full-height side catalogue on wide screens; a lower strip on small screens. */
.play-page{--catalog-width:252px}
.forms.catalog-loop{scrollbar-width:none;scroll-snap-type:none;scroll-behavior:auto;user-select:none;-webkit-user-select:none;cursor:grab}
.forms.catalog-loop::-webkit-scrollbar{display:none}
.forms.catalog-loop .form{scroll-snap-align:none}
.forms.catalog-loop .form img{-webkit-user-drag:none}
.forms.catalog-loop[data-loop-axis="x"]{touch-action:pan-y}
.forms.catalog-loop[data-loop-axis="y"]{touch-action:pan-x}
@media(min-width:701px){
 .play-page .catalog{position:fixed;inset:0 0 0 auto;width:calc(var(--catalog-width) + var(--gutter));height:100svh;z-index:2;background:#fff}
 .play-page .catalog .forms{height:100%;width:100%;padding-bottom:34px;padding-right:calc(var(--gutter) + 16px)}
}
@media(min-width:701px) and (max-width:1199px){
 .play-page{--catalog-width:210px}
 .play-page .catalog .forms{padding-right:calc(var(--gutter) + 12px)}
}

/* Mobile motion stays on a composited strip, keeping fractional pixel positions. */
@media(max-width:700px){
 .forms.catalog-loop[data-loop-axis="x"]{overflow:hidden}
 .catalog-track{display:flex;flex:0 0 auto;width:max-content;align-items:center;gap:inherit;will-change:transform}
}

/* Korean copy first, with English directly beneath it. */
.translation{display:block;font-family:Helvetica,"Apple SD Gothic Neo",sans-serif;font-weight:400;font-size:.875em;line-height:1.5;margin-top:4px}
.about-copy .about-text p{line-height:1.6}
.about-copy .about-text p+p{margin-top:16px}
.about-copy .about-text .about-english{margin-top:24px}
.about-copy .about-text .about-english p{font-size:15px;line-height:1.55}
.about-copy .about-text .about-english p+p{margin-top:14px}
.simple-materials p{line-height:1.65}
.simple-materials p.material-english{font-size:14px;line-height:1.65;margin-top:18px}
.exhibition .exhibition-title-en{font-size:16px;margin-top:6px;line-height:1.4}
.exhibition .venue-en{font-size:13px;margin-top:3px}
.ex-detail .ex-title-en{font-size:21px;line-height:1.3;letter-spacing:-.02em;margin:8px 0 18px}
.ex-detail .translation{font-size:14px;line-height:1.6;margin:8px 0 20px}
.ex-detail small.translation{font-size:12px;margin-top:4px}
.ex-detail .sources .translation{font-size:12px;line-height:1.4;margin:4px 0 0}
#quoteForm label>.translation,#quoteSummary .translation{font-size:12px;line-height:1.4;margin-top:3px}
#quoteForm .quote-actions .translation{font-size:12px;line-height:1.2;margin-top:4px}
#quoteForm .quote-actions button{padding-top:11px;padding-bottom:11px}
.toast{white-space:pre-line}
@media(max-width:700px){.about-copy .about-text p{line-height:1.6}.about-copy .about-text .about-english p{font-size:14px;line-height:1.55}.about-copy .about-text p+p{margin-top:16px}}

/* Indicate image preparation while keeping shuffle available for the next click. */
#shuffle[aria-busy="true"] svg{animation:shuffle-loading .7s ease-in-out infinite}
@keyframes shuffle-loading{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#shuffle[aria-busy="true"] svg{animation:none}}

/* Monochrome exhibition previews open color photographs linked to their source. */
.ex-detail img{filter:none}
.ex-detail .ex-image-link,.ex-detail .ex-image-link img{display:block}

/* Perspective controls stay on the same baseline as the editing icons. */
#resetPerspective svg{width:24px;height:24px;stroke-width:1.5}
/* Reserve the left reset slot so perspective keeps its position in both views. */
#resetPerspective[hidden]{display:grid;visibility:hidden;pointer-events:none}
@media(min-width:381px) and (max-width:420px){.selection-tools{gap:0}.selection-tools .icon-button{width:36px}}
@media(min-width:701px) and (max-width:820px){.selection-tools{gap:4px}.selection-tools .icon-button{width:36px;padding:7px}.arrangement-tools{gap:8px}.arrangement-tools .icon-button{width:72px;height:72px}}