@font-face{font-family:Manrope;src:url("/fonts/Manrope-Variable.ttf") format("truetype");font-display:swap;font-weight:200 800}
@font-face{font-family:Instrument;src:url("/fonts/InstrumentSerif-Italic.ttf") format("truetype");font-display:swap;font-style:italic}
@font-face{font-family:Pretendard;src:url("/fonts/PretendardVariable-subset.woff2") format("woff2");font-display:swap;font-weight:100 900}

:root{--ink:#f7f4ec;--muted:rgba(247,244,236,.78);--dim:rgba(247,244,236,.48);--cyan:#a7e5e2;--paper:#f1dfb8;--night:#111413;--settle:cubic-bezier(.16,.86,.22,1);color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--night)}
body{font-family:Pretendard,"Apple SD Gothic Neo",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,a{color:inherit;font:inherit}
button{border:0;background:none}
::selection{background:var(--cyan);color:#111413}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:10px 13px;background:var(--ink);color:var(--night);text-decoration:none;transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:none}
:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* 조판도 같은 법칙을 따른다: 흩어진 조각이 제자리를 찾는다 */
.settles{opacity:0;transform:translate3d(var(--ox,0),var(--oy,10px),0) rotate(var(--or,0deg));transition:opacity .55s ease var(--od,0s),transform 1.05s var(--settle) var(--od,0s)}
.is-frame .masthead .settles,.is-copy .hero-copy .settles{opacity:1;transform:none}

.hero{position:relative;width:100%;height:100dvh;min-height:520px;overflow:hidden;isolation:isolate;background:var(--night)}
.hero__fallback,#field-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__fallback{z-index:0;object-fit:cover;object-position:50% 50%;filter:brightness(.2) saturate(.8);transform:scale(1.02);transition:opacity .3s linear}
#field-canvas{z-index:1;opacity:0;transition:opacity .25s linear}
.is-lit #field-canvas{opacity:1}
.is-lit .hero__fallback{opacity:0}
.no-webgl #field-canvas{display:none}
.no-webgl .hero__fallback{opacity:1!important;filter:brightness(.72) saturate(.9);transform:none}

.hero::after{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,10,9,.42) 0,rgba(7,10,9,.16) 30%,transparent 54%);opacity:.82}

.masthead{position:absolute;z-index:10;top:0;left:0;width:100%;height:66px;padding:0 clamp(18px,2.4vw,36px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-bottom:1px solid rgba(247,244,236,.11)}
.masthead .settles{--oy:-14px}
.masthead__edition{--od:.08s}
.access-button{--od:.16s;--ox:14px}
.brand{display:inline-flex;align-items:center;gap:10px;width:max-content;text-decoration:none;font-family:Manrope,sans-serif}
.brand__mark{position:relative;display:block;width:20px;height:20px;border:1px solid currentColor;border-radius:50%}
.brand__mark i{position:absolute;top:7px;width:2px;height:2px;border-radius:50%;background:currentColor}.brand__mark i:first-child{left:5px}.brand__mark i:nth-child(2){right:5px}.brand__mark b{position:absolute;left:6px;bottom:4px;width:6px;height:3px;border-bottom:1px solid currentColor;border-radius:0 0 6px 6px}
.brand__name{font:580 14px/1 Manrope,sans-serif;letter-spacing:-.035em}
.masthead__edition{margin:0;color:var(--dim);font:600 8px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.access-button{justify-self:end;padding:9px 14px;border:1px solid rgba(247,244,236,.46);border-radius:999px;cursor:pointer;font:600 10px/1 Manrope,sans-serif;letter-spacing:.02em;text-decoration:none}
.access-button:hover,.access-button:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--night)}

.hero-copy{position:absolute;z-index:8;left:clamp(34px,6.2vw,96px);top:50%;width:min(346px,36vw);transform:translate3d(0,-50%,0);outline:none}
.hero-copy__eyebrow{--ox:-26px;--oy:0;display:flex;align-items:center;gap:8px;margin:0 0 22px;color:var(--cyan);font:650 8px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.hero-copy__eyebrow span{display:block;width:18px;height:1px;background:currentColor}
.hero-copy h1{margin:0;color:var(--ink);font:650 clamp(48px,5.2vw,76px)/.73 Manrope,sans-serif;letter-spacing:-.075em;text-shadow:0 2px 28px rgba(0,0,0,.28)}
.hero-copy h1 span,.hero-copy h1 em{display:block}
.hero-copy h1 em{color:var(--paper);font:400 1.08em/.78 Instrument,Georgia,serif;letter-spacing:-.045em}
.hero-copy h1 span:first-child{--ox:-34px;--oy:-16px;--or:-3.2deg;--od:.05s}
.hero-copy h1 em{--ox:26px;--oy:14px;--or:2.4deg;--od:.13s}
.hero-copy h1 span:last-child{--ox:-20px;--oy:22px;--or:1.6deg;--od:.21s}
.hero-copy__lead{--oy:16px;--od:.3s;margin:34px 0 23px;color:rgba(247,244,236,.9);font-size:14px;line-height:1.58;letter-spacing:-.025em;word-break:keep-all;overflow-wrap:break-word}

.pipeline{list-style:none;margin:0;padding:11px 0;border-top:1px solid rgba(247,244,236,.22);border-bottom:1px solid rgba(247,244,236,.22)}
.pipeline li{--oy:12px}
.pipeline li:nth-child(1){--od:.36s}.pipeline li:nth-child(2){--od:.42s}.pipeline li:nth-child(3){--od:.48s}.pipeline li:nth-child(4){--od:.54s}.pipeline li:nth-child(5){--od:.6s}
.pipeline button{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;width:100%;min-height:26px;padding:0;cursor:pointer;text-align:left;font-family:Manrope,sans-serif;transition:color .25s,padding-left .35s var(--settle)}
.pipeline button::before{content:"";position:absolute;left:-13px;top:50%;width:5px;height:1px;background:var(--cyan);transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .35s var(--settle)}
.pipeline li.is-active button{color:var(--cyan);padding-left:9px}
.pipeline li.is-active button::before{transform:translateY(-50%) scaleX(1)}
.pipeline li.is-active b{color:var(--cyan)}
.pipeline span{font-size:14px;font-weight:620;letter-spacing:-.04em}
.pipeline b{color:var(--dim);font-size:8px;font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums;transition:color .25s}
.pipeline-hint{--oy:10px;--od:.68s;margin:11px 0 0;color:rgba(247,244,236,.62);font:500 10px/1.4 Pretendard,sans-serif;letter-spacing:-.01em}

.scene-note{position:absolute;z-index:8;right:clamp(18px,2.4vw,36px);bottom:20px;margin:0;color:var(--dim);font:600 7px/1 Manrope,sans-serif;letter-spacing:.18em;opacity:0;transition:opacity .7s ease}
.is-copy .scene-note{opacity:1}

.access-dialog{width:min(440px,calc(100vw - 32px));padding:30px;border:1px solid rgba(247,244,236,.24);border-radius:2px;background:rgba(17,20,19,.96);color:var(--ink);box-shadow:0 30px 120px rgba(0,0,0,.55)}
.access-dialog::backdrop{background:rgba(4,7,6,.62);backdrop-filter:blur(8px)}
.access-dialog__close{position:absolute;top:12px;right:14px;padding:5px;cursor:pointer;color:var(--muted);font-size:24px;line-height:1}
.access-dialog__eyebrow{margin:0 0 25px;color:var(--cyan);font:650 8px/1 Manrope,sans-serif;letter-spacing:.18em}
.access-dialog h2{max-width:330px;margin:0 0 18px;font:600 30px/1.08 Pretendard,sans-serif;letter-spacing:-.05em;word-break:keep-all}
.access-dialog>p:not(.access-dialog__eyebrow){margin:0;color:var(--muted);font-size:14px;line-height:1.65;word-break:keep-all}
.access-dialog__confirm{margin-top:28px;padding:9px 14px;border:1px solid rgba(247,244,236,.4);border-radius:999px;cursor:pointer;font:600 10px/1 Manrope,sans-serif}
.access-dialog__confirm:hover,.access-dialog__confirm:focus-visible{background:var(--ink);color:var(--night)}

@media(max-width:760px){
  .hero__fallback{object-position:48% 46%}
  .hero::after{background:linear-gradient(180deg,rgba(7,10,9,.34),transparent 26%,rgba(7,10,9,.66) 62%,rgba(7,10,9,.94))}
  .masthead{height:56px;padding:0 14px;grid-template-columns:1fr auto}.masthead__edition{display:none}.access-button{padding:8px 10px;font-size:9px}
  .hero-copy{left:16px;right:16px;top:auto;bottom:calc(18px + env(safe-area-inset-bottom));width:auto;transform:none}
  .hero-copy__eyebrow{margin-bottom:13px}
  .hero-copy h1{width:220px;font-size:clamp(42px,13.4vw,58px)}
  .hero-copy h1 span,.hero-copy h1 em{display:inline}
  .hero-copy h1 span:first-child{display:block}
  .hero-copy h1 em{margin-right:.12em}
  .hero-copy__lead{margin:16px 0 13px;font-size:12px;line-height:1.5}
  .pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px 0}
  .pipeline button{display:block;min-height:38px;text-align:left}
  .pipeline button::before{left:0;top:auto;bottom:-2px;width:100%;height:1px;transform:scaleX(0)}
  .pipeline li.is-active button{padding-left:0}
  .pipeline li.is-active button::before{transform:scaleX(1)}
  .pipeline b{display:block;margin-bottom:5px;font-size:7px}
  .pipeline span{display:block;font-size:9.5px;letter-spacing:-.045em}
  .pipeline-hint{margin-top:9px;font-size:9px}
  .scene-note{left:16px;right:auto;bottom:calc(6px + env(safe-area-inset-bottom));display:none}
}
@media(max-height:660px) and (min-width:761px){
  .masthead{height:52px}.hero-copy{width:310px}.hero-copy__eyebrow{margin-bottom:14px}.hero-copy h1{font-size:48px}
  .hero-copy__lead{margin:20px 0 14px;font-size:12px}.pipeline{padding:7px 0}.pipeline button{min-height:22px}.pipeline span{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .hero__fallback{filter:brightness(.72) saturate(.9);transform:none}
  .settles{opacity:1;transform:none}
  .scene-note{opacity:1}
}