/* 공공형 갤러리 이음 · brand home.
   Two source frames: 1160 wide above 760, 390 wide at 760 and below.
   Lengths are frame pixels times --u, so the page matches the frame at its own
   width and scales as one surface in between. --u resolves against the body's
   inline size (container units), so the scrollbar is never counted.
   With the project essay open on a wide screen, the work column narrows to 548
   frame px and follows the open-state frame. */

:root{
  --u:calc(100cqw / 1160);
  --ink:#111;
  --muted:#6e6e6e;
  --chip:#f1f1ef;
  --stage:#f7f7f5;
  --caption:#657064;
  --glyph:#062b1c;
  --paper:#fff;
  --serif:"Gowun Batang",serif;
  --sans:"Noto Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
@media (max-width:760px){
  :root{--u:calc(100cqw / 390)}
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--paper)}
body{
  container-type:inline-size;
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
}
img,video,svg{display:block}
h1,h2,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.page{padding:0 calc(24 * var(--u))}
br.d,br.p{display:none}

/* ---------- Header ---------- */
.head{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:calc(20 * var(--u));
  padding:calc(88 * var(--u)) 0 calc(56 * var(--u));
  max-width:calc(756 * var(--u));
  margin-bottom:calc(16 * var(--u));
}
.title{font-weight:500;font-size:calc(48 * var(--u));line-height:1}
.line{font-family:var(--serif);font-size:calc(18 * var(--u));line-height:calc(28 * var(--u))}
.tags{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u))}
.tags li{
  background:var(--chip);color:var(--muted);
  font-size:calc(13 * var(--u));line-height:calc(16 * var(--u));
  padding:calc(6 * var(--u)) calc(12 * var(--u));
  border-radius:999px;white-space:nowrap;
}

/* ---------- Project button (follows the scroll) ---------- */
.about-btn{
  position:fixed;z-index:10;
  top:calc(24 * var(--u));right:calc(23 * var(--u));
  display:flex;align-items:center;gap:calc(10 * var(--u));
  padding:calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(20 * var(--u));
  border-radius:999px;background:var(--chip);color:var(--ink);
  font-size:calc(14 * var(--u));font-weight:500;line-height:normal;white-space:nowrap;
  transition:background-color .3s ease,color .3s ease;
}
.about-icon{font-size:calc(18 * var(--u));font-weight:400;line-height:1;min-width:calc(10 * var(--u));text-align:center}
.about-btn[aria-expanded="true"]{background:var(--ink);color:#fff}

/* ---------- Work ---------- */
.work{display:flex;flex-direction:column;gap:calc(16 * var(--u));min-width:0}
.work>*{min-width:0}

.tile{position:relative;overflow:hidden;aspect-ratio:var(--ar);background:var(--paper)}
.tile img,.tile picture,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.contain img,.tile.contain video{object-fit:contain}
.tile video{opacity:0;transition:opacity .3s ease}
.tile video.on{opacity:1}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--u))}

/* Text between scenes: measure and side as in the wide frame. */
.quote{padding:calc(var(--pt) * var(--u)) 0 calc(var(--pb) * var(--u))}
.quote p{
  width:calc(var(--w) * var(--u));max-width:100%;
  font-family:var(--serif);font-size:calc(26 * var(--u));line-height:calc(42 * var(--u));
}
.quote p+p{margin-top:calc(42 * var(--u))}
.q-right p{margin-left:auto}
.quote p.note{margin-top:calc(24 * var(--u));font-size:calc(16 * var(--u));line-height:calc(26 * var(--u));color:#666}

/* Titled application sections */
.sect{padding-top:calc(48 * var(--u))}
.sect.s-first{padding-top:0}
.sect-t{font-size:calc(28 * var(--u));line-height:calc(40 * var(--u));font-weight:500;margin-bottom:calc(24 * var(--u))}
.s-reels .sect-t{margin-bottom:calc(32 * var(--u))}

/* Logo forms */
.forms{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16 * var(--u))}
.ftile{position:relative;aspect-ratio:266/300;background:var(--stage);overflow:hidden}
.ftile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.forms figcaption{margin-top:calc(16 * var(--u));color:var(--caption);font-size:calc(16 * var(--u));line-height:calc(24 * var(--u))}

/* Wayfinding signs */
.way{display:grid;grid-template-columns:repeat(3,1fr);column-gap:calc(23.66 * var(--u));row-gap:calc(38 * var(--u))}
.way img{width:100%;height:auto;aspect-ratio:355/531;object-fit:cover}

/* Letters to graphics */
.gfx{display:flex;flex-direction:column;gap:calc(64 * var(--u));padding:calc(32 * var(--u)) 0 calc(64 * var(--u))}
.gfx svg{fill:var(--glyph)}
.gfx span{font-weight:700;color:#000;line-height:1.2}
.gfx-shapes{display:grid;grid-template-columns:repeat(8,1fr);align-items:start}
.gfx-shapes li{display:flex;flex-direction:column;align-items:center;gap:calc(20 * var(--u));padding:calc(20 * var(--u)) 0}
.gfx-shapes svg{width:calc(var(--gw) * var(--u));height:calc(var(--gh) * var(--u))}
.gfx-shapes span,.gfx-icons span{font-size:calc(14 * var(--u));text-align:center}
.gfx-pats{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16 * var(--u))}
.gfx-pats img{width:100%;height:auto;aspect-ratio:1}
.gfx-pats span{display:block;margin-top:calc(20 * var(--u));font-size:calc(16 * var(--u))}
.gfx-icons{display:grid;grid-template-columns:repeat(6,1fr);row-gap:calc(28 * var(--u));padding:calc(24 * var(--u)) 0}
.gfx-icons li{display:flex;flex-direction:column;align-items:center;gap:calc(18 * var(--u));padding:calc(16 * var(--u)) 0}
.gfx-icons svg{width:calc(48 * var(--u));height:calc(48 * var(--u))}

/* Carousels */
.car{position:relative}
.track{
  display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:start}
.stage{position:relative;aspect-ratio:1112/696;background:var(--stage);overflow:hidden}
.stage img{position:absolute;object-fit:cover}
.slide figcaption{
  margin:calc(20 * var(--u)) 0 calc(20 * var(--u));text-align:center;
  font-size:calc(14 * var(--u));line-height:calc(24 * var(--u));font-weight:500;
}
.slide .sep{margin:0 .75em}
.arrow{
  position:absolute;z-index:1;
  top:calc((100% - 64 * var(--u)) / 2 - 24 * var(--u));
  width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;color:var(--ink);
  font-size:calc(24 * var(--u));font-weight:500;line-height:1;
  transition:opacity .2s ease;
}
.arrow.prev{left:calc(24 * var(--u))}
.arrow.next{right:calc(24 * var(--u))}
.arrow[aria-disabled="true"]{opacity:.35;cursor:default}

/* Instagram */
.insta{width:80.755%;margin:0 auto;display:grid;grid-template-columns:310fr 548fr;column-gap:4.454%;align-items:center}
.insta img{width:100%;height:auto}
.insta-p{aspect-ratio:310/1037}
.insta-m{aspect-ratio:548/822;object-fit:cover}

/* Reels */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(16 * var(--u))}
.reels figcaption{margin-top:calc(16 * var(--u));font-size:calc(16 * var(--u));line-height:calc(26 * var(--u));font-weight:500}

/* ---------- Essay ---------- */
.essay{display:none}
.essay-bar,.essay-title{display:none}
.essay-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.essay-text{max-width:calc(532 * var(--u));font-size:calc(16 * var(--u));line-height:calc(27 * var(--u))}
.essay-text p+p{margin-top:calc(27 * var(--u))}
.essay:focus{outline:none}

/* ---------- End ---------- */
.end{margin-top:calc(16 * var(--u));padding:calc(176 * var(--u)) 0 calc(120 * var(--u))}
.end-rule{display:block;height:1px;background:var(--ink)}
.end-label{margin-top:calc(24 * var(--u));font-size:calc(14 * var(--u));font-weight:400;line-height:normal;color:var(--muted)}
.end-cards{margin-top:calc(40 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--u))}
.end-card{display:flex;flex-direction:column;align-items:flex-start;color:inherit;text-decoration:none}
.end-media{display:block;position:relative;width:100%;aspect-ratio:548/412;overflow:hidden}
.end-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.end-title{
  margin-top:calc(24 * var(--u));
  font-size:calc(40 * var(--u));font-weight:500;line-height:1;letter-spacing:-.01em;
  text-decoration:underline;text-decoration-color:transparent;
  text-decoration-thickness:1px;text-underline-offset:.14em;
  transition:text-decoration-color .3s ease;
}
.end-line{margin-top:calc(12 * var(--u));font-size:calc(17 * var(--u));line-height:1.45}
.end-card:hover .end-title,.end-card:focus-visible .end-title{text-decoration-color:currentColor}

.foot{margin-top:calc(16 * var(--u));padding-bottom:calc(40 * var(--u))}
.foot p{font-size:calc(13 * var(--u));line-height:normal;color:var(--muted)}

/* ---------- Wide frame, essay closed: the 1160 line breaks ---------- */
@media (min-width:761px){
  .page[data-about="closed"] br.d{display:inline}
}

/* ---------- Wide frame, essay open (frame 2873:2) ----------
   Work narrows to one 548 column, the essay takes the right 540. */
@media (min-width:761px){
  .page[data-about="open"] .body{
    display:grid;grid-template-columns:calc(548 * var(--u)) calc(540 * var(--u));
    column-gap:calc(24 * var(--u));align-items:start;
  }
  .page[data-about="open"] .pair,
  .page[data-about="open"] .reels{gap:calc(8 * var(--u))}
  .page[data-about="open"] .quote{padding:calc(56 * var(--u)) calc(16 * var(--u))}
  .page[data-about="open"] .quote p{width:auto;font-size:calc(20 * var(--u));line-height:calc(32 * var(--u))}
  .page[data-about="open"] .quote p+p{margin-top:calc(32 * var(--u))}
  .page[data-about="open"] .quote p.note{margin-top:calc(16 * var(--u));font-size:calc(14 * var(--u));line-height:calc(22 * var(--u))}
  .page[data-about="open"] .sect{padding-top:calc(24 * var(--u))}
  .page[data-about="open"] .sect.s-first{padding-top:0}
  .page[data-about="open"] .sect-t{font-size:calc(22 * var(--u));line-height:calc(32 * var(--u));margin-bottom:calc(12 * var(--u))}
  .page[data-about="open"] .s-reels .sect-t{margin-bottom:calc(16 * var(--u))}
  .page[data-about="open"] .forms{gap:calc(8 * var(--u))}
  .page[data-about="open"] .forms figcaption{margin-top:calc(10 * var(--u));font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
  .page[data-about="open"] .way{column-gap:calc(12 * var(--u));row-gap:calc(14 * var(--u))}
  .page[data-about="open"] .gfx{gap:calc(32 * var(--u));padding:calc(16 * var(--u)) 0 calc(32 * var(--u))}
  .page[data-about="open"] .gfx-shapes{grid-template-columns:repeat(4,1fr);row-gap:calc(16 * var(--u))}
  .page[data-about="open"] .gfx-shapes li{gap:calc(12 * var(--u));padding:calc(12 * var(--u)) 0}
  .page[data-about="open"] .gfx-shapes svg{width:calc(var(--gw) * .75 * var(--u));height:calc(var(--gh) * .75 * var(--u))}
  .page[data-about="open"] .gfx-shapes span,
  .page[data-about="open"] .gfx-icons span{font-size:calc(12 * var(--u))}
  .page[data-about="open"] .gfx-pats{gap:calc(8 * var(--u))}
  .page[data-about="open"] .gfx-pats span{margin-top:calc(10 * var(--u));font-size:calc(13 * var(--u))}
  .page[data-about="open"] .gfx-icons{grid-template-columns:repeat(4,1fr);row-gap:calc(16 * var(--u));padding:calc(12 * var(--u)) 0}
  .page[data-about="open"] .gfx-icons li{gap:calc(10 * var(--u));padding:calc(10 * var(--u)) 0}
  .page[data-about="open"] .gfx-icons svg{width:calc(32 * var(--u));height:calc(32 * var(--u))}
  .page[data-about="open"] .slide figcaption{margin:calc(10 * var(--u)) 0 calc(23 * var(--u));font-size:calc(12 * var(--u));line-height:calc(20 * var(--u))}
  .page[data-about="open"] .arrow{
    width:calc(36 * var(--u));height:calc(36 * var(--u));font-size:calc(18 * var(--u));
    top:calc((100% - 53 * var(--u)) / 2 - 18 * var(--u));
  }
  .page[data-about="open"] .arrow.prev{left:calc(12 * var(--u))}
  .page[data-about="open"] .arrow.next{right:calc(12 * var(--u))}
  .page[data-about="open"] .reels figcaption{margin-top:calc(8 * var(--u));font-size:calc(12 * var(--u));line-height:calc(20 * var(--u))}
  .page[data-about="open"] .essay{display:block;position:sticky;top:calc(86 * var(--u))}
}

/* ---------- Phone frame (390) ---------- */
@media (max-width:760px){
  .page{padding:0 calc(16 * var(--u))}
  br.p{display:inline}
  .head{gap:calc(14 * var(--u));padding:calc(80 * var(--u)) 0 calc(32 * var(--u));max-width:none;margin-bottom:calc(12 * var(--u))}
  .title{font-size:calc(32 * var(--u));line-height:calc(42 * var(--u));letter-spacing:-.01em}
  .line{font-size:calc(16 * var(--u));line-height:calc(26 * var(--u))}

  .about-btn{
    top:calc(16 * var(--u));right:calc(15 * var(--u));
    padding:calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(16 * var(--u));
    font-size:calc(13 * var(--u));
  }

  .work{gap:calc(12 * var(--u))}
  .pair{gap:calc(6 * var(--u))}
  .quote{padding:calc(40 * var(--u)) calc(8 * var(--u))}
  .quote p{width:auto;font-size:calc(18 * var(--u));line-height:calc(29 * var(--u))}
  .quote p+p{margin-top:calc(29 * var(--u))}
  .quote p.note{margin-top:calc(14 * var(--u));font-size:calc(13 * var(--u));line-height:calc(21 * var(--u))}

  .sect{padding-top:calc(15 * var(--u))}
  .sect-t{font-size:calc(20 * var(--u));line-height:calc(30 * var(--u));margin-bottom:calc(8 * var(--u))}
  .s-reels .sect-t{margin-bottom:calc(10 * var(--u))}

  .forms{grid-template-columns:1fr 1fr;gap:calc(16 * var(--u))}
  .forms figcaption{margin-top:calc(10 * var(--u));font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}

  .way{column-gap:calc(8 * var(--u));row-gap:calc(10 * var(--u))}

  .gfx{gap:calc(21 * var(--u));padding:calc(10 * var(--u)) 0 calc(21 * var(--u))}
  .gfx-shapes{grid-template-columns:repeat(4,1fr);column-gap:calc(16 * var(--u));row-gap:calc(16 * var(--u))}
  .gfx-shapes li{gap:calc(10 * var(--u));padding:calc(11 * var(--u)) 0}
  .gfx-shapes svg{width:calc(var(--gw) * .558 * var(--u));height:calc(var(--gh) * .558 * var(--u))}
  .gfx-shapes span,.gfx-icons span{font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
  .gfx-pats{gap:calc(5.2 * var(--u))}
  .gfx-pats span{margin-top:calc(10 * var(--u));font-size:calc(12 * var(--u));line-height:calc(18 * var(--u))}
  .gfx-icons{grid-template-columns:repeat(3,1fr);column-gap:calc(16 * var(--u));row-gap:calc(16 * var(--u));padding:calc(8 * var(--u)) 0}
  .gfx-icons li{gap:calc(10 * var(--u));padding:calc(9.4 * var(--u)) 0}
  .gfx-icons svg{width:calc(28.1 * var(--u));height:calc(28.1 * var(--u))}

  .slide figcaption{margin:calc(6.4 * var(--u)) 0 calc(19.5 * var(--u));font-size:calc(12 * var(--u));line-height:calc(20 * var(--u))}
  .arrow{
    width:calc(36 * var(--u));height:calc(36 * var(--u));border-radius:calc(7.73 * var(--u));
    font-size:calc(18 * var(--u));
    top:calc((100% - 45.9 * var(--u)) / 2 - 18 * var(--u));
  }
  .arrow.prev{left:calc(8 * var(--u))}
  .arrow.next{right:calc(8 * var(--u))}

  .reels{
    display:flex;gap:calc(16 * var(--u));overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
  }
  .reels::-webkit-scrollbar{display:none}
  .reels li{flex:0 0 calc(280 * var(--u));scroll-snap-align:start}
  .reels figcaption{margin-top:calc(12.4 * var(--u));font-size:calc(12 * var(--u));line-height:calc(20 * var(--u))}

  /* Project essay covers the whole screen */
  .page[data-about="open"] .essay{
    display:block;position:fixed;inset:0;z-index:20;
    overflow-y:auto;overscroll-behavior:contain;background:var(--paper);
    padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(56 * var(--u));
  }
  .essay-bar{display:flex;align-items:center;justify-content:space-between;min-height:calc(36 * var(--u))}
  .essay-label{
    position:static;width:auto;height:auto;overflow:visible;clip-path:none;
    font-size:calc(14 * var(--u));font-weight:500;line-height:normal;
  }
  .essay-close{
    display:flex;align-items:center;justify-content:center;
    padding:calc(6 * var(--u)) calc(12 * var(--u)) calc(8 * var(--u));
    border-radius:999px;background:var(--ink);color:#fff;
    font-size:calc(22 * var(--u));line-height:1;
  }
  .essay-title{
    display:block;margin-top:calc(40 * var(--u));
    font-size:calc(28 * var(--u));line-height:calc(38 * var(--u));font-weight:500;letter-spacing:-.01em;
  }
  .essay-text{margin-top:calc(24 * var(--u))}

  .end{margin-top:calc(12 * var(--u));padding:calc(112 * var(--u)) 0 calc(64 * var(--u))}
  .end-label{margin-top:calc(20 * var(--u));font-size:calc(13 * var(--u))}
  .end-cards{margin-top:calc(28 * var(--u));grid-template-columns:1fr;gap:calc(48 * var(--u))}
  .end-media{aspect-ratio:358/269}
  .end-title{margin-top:calc(16 * var(--u));font-size:calc(32 * var(--u))}
  .end-line{margin-top:calc(10 * var(--u));font-size:calc(15 * var(--u))}
  .foot{margin-top:calc(12 * var(--u));padding-bottom:calc(32 * var(--u))}
  .foot p{font-size:calc(12 * var(--u))}
}

html.lock,html.lock body{overflow:hidden}

/* ---------- Opening and closing ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}
@keyframes essay-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-in{from{opacity:0;transform:translateY(calc(16 * var(--u)))}to{opacity:1;transform:none}}
.page.animate[data-about="open"] .essay{animation:essay-in .3s ease both}
@media (max-width:760px){
  .page.animate[data-about="open"] .essay{animation-name:sheet-in}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
}