:root{
  --bg:#f6f6f5; --ink:#000000; --mute:#8a8a8a; --line:#e3e3e0; --accent:#2b3cff;
  --sans:"Helvetica Neue",Helvetica,Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;
  --fs:clamp(11px,.84vw,16px);--hh:clamp(34px,2.6vw,48px);--fp:clamp(9px,.78vw,14px);--mx:clamp(16px,5.2vw,120px);
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#121212;--ink:#f3f3f1;--mute:#8f8f8f;--line:#2a2a2a;--accent:#7f8bff;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#121212;--ink:#f3f3f1;--mute:#8f8f8f;--line:#2a2a2a;--accent:#7f8bff;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
#track{width:1px;position:relative}
.snap{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start}
html{scroll-snap-type:y proximity}

.glass{
  background:color-mix(in srgb,var(--bg) 42%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 65%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 4%,transparent),0 12px 34px rgba(0,0,0,.07);
  border-radius:16px;
}

.top{position:fixed;z-index:6;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + var(--hh));padding:env(safe-area-inset-top,0px) clamp(16px,2vw,28px) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:var(--bg);border-bottom:1px solid var(--ink)}
.logo{display:block;color:var(--ink);line-height:0}
.logo .mk{display:block;width:clamp(40px,3.6vw,64px);aspect-ratio:480/246;background:currentColor;-webkit-mask:url("images/logo.png") center/contain no-repeat;mask:url("images/logo.png") center/contain no-repeat}
.views{justify-self:end;display:flex;gap:.6em;font-size:var(--fs)}
.views button,.views span{color:var(--mute)}
.views button[aria-pressed="true"]{color:var(--ink)}
.gfoot{position:fixed;z-index:6;left:0;right:0;bottom:0;padding:var(--fp) 16px calc(env(safe-area-inset-bottom,0px) + var(--fp));display:flex;justify-content:center;gap:clamp(8px,.86vw,16px);background:var(--bg);border-top:1px solid var(--ink);font-size:var(--fs);line-height:1.2}
.gfoot a:hover,.ifoot a:hover{color:var(--mute)}
.is-index .gfoot,.is-index .now{display:none}
.now{position:fixed;z-index:5;left:0;top:0;padding-top:max(5px,.45vw);pointer-events:none;will-change:transform,opacity;opacity:0}
.now button{display:flex;justify-content:space-between;width:100%;gap:1em;font-size:var(--fs);line-height:1.2;pointer-events:auto;text-align:left}
.now button:hover{color:var(--mute)}
#nowMeta::before{content:"("}
#nowMeta::after{content:")"}
.hint{display:none}
.tip{position:fixed;z-index:6;left:0;top:0;padding:7px 12px;border-radius:12px;pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
.tip span{color:var(--mute);margin-left:8px}
.tip.on{opacity:1}

/* index sheet */
.sheet{position:fixed;z-index:4;left:14px;right:14px;top:calc(env(safe-area-inset-top,0px) + 74px);bottom:calc(env(safe-area-inset-bottom,0px) + 74px);overflow:auto;padding:8px 20px;border-radius:20px}
.sheet[hidden]{display:none}
.sheet.glass{inset:0;top:0;bottom:0;left:0;right:0;border-radius:0;border:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  padding:calc(env(safe-area-inset-top,0px) + var(--hh) + 2.5vw) var(--mx) 0}
.is-index .now,.is-index .hint{display:none}
.igrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(16px,1.64vw) max(6px,.6vw)}
@media (max-width:900px){.igrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.igrid{grid-template-columns:1fr}}
.icard{display:block;width:100%;text-align:left}
.iglass{position:relative;aspect-ratio:7/5;isolation:isolate}
.iglass canvas,.iglass img{position:absolute;inset:0;width:100%;height:100%;display:block}
.iglass img{display:none;object-fit:cover}
.noglass .iglass img{display:block}
.noglass .iglass canvas{display:none}
.icap{display:flex;justify-content:space-between;gap:12px;padding-top:max(5px,.45vw);font-size:var(--fs);line-height:1.2}
.icap span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icap span:last-child{white-space:nowrap}
.ifoot{display:flex;justify-content:center;gap:clamp(8px,.86vw,16px);margin:max(20px,2vw) calc(-1*var(--mx)) 0;padding:var(--fp) 16px calc(env(safe-area-inset-bottom,0px) + var(--fp));border-top:1px solid var(--ink);font-size:var(--fs);line-height:1.2}
.ifoot a:hover{color:var(--mute)}
.row{display:grid;grid-template-columns:72px 2fr 2fr 1fr 60px;gap:18px;align-items:center;width:100%;text-align:left;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
.row:last-child{border-bottom:0}
.row img{width:72px;height:54px;object-fit:cover;border-radius:6px;display:block}
.row span:not(:nth-child(2)){color:var(--mute)}
.row:hover span{color:var(--ink)}
@media (max-width:640px){.row{grid-template-columns:64px 1fr auto}.row span:nth-child(3),.row span:nth-child(4){display:none}}
.nogl .views{display:none}

/* dialogs */
dialog{border:0;padding:0;margin:auto;color:var(--ink);width:min(1120px,calc(100% - 28px));height:calc(100% - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));max-width:none;max-height:none;border-radius:22px;overflow:auto}
dialog::backdrop{background:color-mix(in srgb,var(--bg) 25%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dhead{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:16px 22px}
.dhead button{padding:9px 14px;border-radius:12px;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.dbody{padding:8px 22px 48px}
.ptitle{margin:24px 0 28px;font-size:clamp(44px,8vw,120px);font-weight:900;letter-spacing:-.05em;line-height:.9}
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-bottom:36px}
.pgrid dl{grid-column:span 4;margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.pgrid dt{color:var(--mute)}
.pgrid dd{margin:0}
.pgrid p{grid-column:span 8;margin:0;max-width:52ch;font-size:clamp(17px,1.6vw,21px);line-height:1.5}
@media (max-width:720px){.pgrid dl,.pgrid p{grid-column:1/-1}}
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.plates img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;aspect-ratio:4/5}
.plates img.full{grid-column:1/-1;aspect-ratio:16/9}
@media (max-width:560px){.plates{grid-template-columns:1fr}}

.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding:28px 0 56px;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.cols:first-child{border-top:0}
.cols h2{grid-column:span 3;margin:0;font-size:14px;font-weight:500}
.cols .body{grid-column:span 9}
.lead{font-size:clamp(24px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em;font-weight:500;margin:0 0 36px;max-width:24ch}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.facts h3{font-size:14px;font-weight:500;color:var(--mute);margin:0 0 8px}
.facts ul{list-style:none;margin:0;padding:0}
.facts li{padding:2px 0}
.ko{font-family:"Noto Sans KR",var(--sans);line-height:1.7}
.mail{display:inline-block;font-size:clamp(30px,5.5vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1;border-bottom:3px solid currentColor;padding-bottom:4px;margin-bottom:32px;word-break:break-all}
.mail:hover{color:var(--accent)}
@media (max-width:720px){.cols h2,.cols .body{grid-column:1/-1}.facts{grid-template-columns:1fr}}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav,.views,.now,.tip{box-shadow:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}