/* HALVORIA — REALEVATE 모작. 수치는 refs/interaction-logs 실측(1440×900, 배율 k = min(1, 100svh/950)). */
:root {
  --k: .947;
  --v: calc(1vw * var(--k));
  --navy: #1F2B5E;
  --muted: #626C95;
  --white: #fff;
  --sel-bg: #E3E5EB;
  --cat: #1F2B5E;
  --cat-muted: #626C95;
  --pad: calc(4.5 * var(--v));
  --gap: calc(2.601 * var(--v));
  --col: calc((100vw - 2 * var(--pad) - 11 * var(--gap)) / 12);
  --sans: 'Google Sans', Arial, Helvetica, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ext: 'Syncopate', Arial, sans-serif;
  --e-reveal: cubic-bezier(.16, 1, .3, 1);
  --e-cta: cubic-bezier(.7, .6, 0, 1);
  --e-hover: cubic-bezier(.18, .13, 0, .99);
  --e-stage: cubic-bezier(.76, 0, .24, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--sans); font-weight: 500; font-size: calc(1.2 * var(--v)); letter-spacing: -.01em; line-height: 1.35;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; font-weight: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- 줄 등장 (원본 split-line: translateY(100%) skew(-1deg) + clip inset(0 0 100%)) ---------- */
.line { display: block; }
.line-in {
  display: inline-block; transform: translateY(100%) skewY(-1deg); clip-path: inset(0 0 100% 0);
  transition: transform 1.1s var(--e-reveal), clip-path 1.1s var(--e-reveal);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
.is-in .line-in, .is-loaded .site-nav .line-in, .is-loaded .hero-bottom .line-in, .is-loaded .site-footer .line-in, .is-loaded .c-channels .line-in {
  transform: none; clip-path: inset(-20% -10% -30% -10%);
}
.is-loaded .hero-bottom { --d: 120ms; }

/* ---------- 밑줄 링크 ---------- */
.u-link { position: relative; display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; cursor: pointer; background: none; border: 0; padding: 0; }
.u-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; border-bottom: 1px solid; transform: scaleX(1); transform-origin: 0 50%; transition: transform .65s var(--e-cta); }
.u-link:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }
.u-link .arrow { width: .8em; height: auto; transition: transform .65s var(--e-cta); }
.u-link:hover .arrow { transform: translateX(.2em); }
.site-nav .u-link::after { transform: scaleX(0); }
.site-nav .u-link:hover::after, .site-nav .u-link:focus-visible::after, .site-nav .u-link.is-current::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- 머리 ---------- */
.site-nav { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 0; font-size: calc(1.25 * var(--v)); }
.logo { position: absolute; left: 50%; top: calc(4.69 * var(--v)); transform: translateX(-50%); line-height: 0; }
.wordmark { position: relative; display: inline-block; font-family: var(--ext); font-weight: 400; font-size: calc(1.505 * var(--v)); letter-spacing: .3em; margin-right: -.3em; line-height: 1; white-space: nowrap; }
.wm-bar { position: absolute; left: -.42em; top: 50%; width: .62em; height: max(2px, .1em); margin-top: -.05em; background: currentColor; }
.nav-about, .nav-contact { position: absolute; top: calc(4.5 * var(--v)); line-height: 1.4; }
.nav-about { left: var(--pad); }
.nav-contact { right: var(--pad); }
.logo { opacity: 0; transition: opacity .9s ease .2s; }
.is-loaded .logo { opacity: 1; }

/* ---------- 마퀴 ---------- */
.marquee { position: relative; width: 100%; overflow: hidden; pointer-events: none; }
.marquee-reveal { transform: translateY(140%) skewY(-1deg); clip-path: inset(0 0 100% 0); transition: transform 1.4s var(--e-reveal), clip-path 1.4s var(--e-reveal); }
.is-loaded .marquee--hero .marquee-reveal, .is-loaded .marquee--contact .marquee-reveal, .is-in .marquee-reveal, .marquee.is-in .marquee-reveal { transform: none; clip-path: inset(-10% 0 -20% 0); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-text { display: block; font-size: calc(16 * var(--v)); line-height: 1; letter-spacing: -.02em; padding-right: var(--gap); white-space: nowrap; font-weight: 500; }

/* ---------- 히어로 공통 (홈 · 카테고리) ---------- */
.hero-top { position: absolute; left: 0; right: 0; top: 27.22svh; }
.hero-visual { position: absolute; z-index: 2; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual--home { left: 50%; top: -1.34svh; width: calc(20 * var(--v)); height: calc(20 * var(--v)); transform: translateX(-50%); }
.hero-bottom { position: absolute; left: 0; right: 0; top: 73.3svh; text-align: center; z-index: 1; }
.hero-h1 { font-size: calc(1.736 * var(--v)); line-height: 1.35; letter-spacing: -.01em; }
.hero-price { display: inline-block; margin-top: calc(1.91 * var(--v)); border: 1px solid currentColor; font-family: var(--ext); font-size: max(12px, calc(.955 * var(--v))); line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; padding: .5em 1em .4em; opacity: 0; transition: opacity .9s ease .6s; }
.hero-price .line-in { transform: none; clip-path: none; }
.is-loaded .hero-price { opacity: 1; }
.site-footer { position: absolute; left: var(--pad); bottom: calc(4.5 * var(--v)); font-size: calc(1.25 * var(--v)); z-index: 1; }

/* 홈 */
.page-home { height: 100svh; }
.home { position: relative; height: 100svh; background: var(--white); color: var(--navy); }
.home .hero-visual img { transform: scale(1.5); clip-path: inset(50%); transition: transform 1.6s var(--e-reveal), clip-path 1.6s var(--e-reveal); }
.is-loaded .home .hero-visual img { transform: none; clip-path: inset(0); }

/* ---------- 프리로더 (홈) ---------- */
#preloader { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.pl-bg { position: absolute; inset: 0; background: var(--navy); clip-path: inset(0 0 0 0); transition: clip-path .8s var(--e-stage); }
.pl-frames { position: absolute; left: 50%; top: 25.89svh; width: calc(20 * var(--v)); height: calc(20 * var(--v)); transform: translateX(-50%); }
.pl-frame { position: absolute; inset: 0; overflow: hidden; clip-path: inset(50%); animation: plFrame 1.5s var(--e-reveal) forwards; animation-delay: calc(640ms + var(--i) * 500ms); }
.pl-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.5); animation: plImg 1.6s var(--e-reveal) forwards; animation-delay: calc(640ms + var(--i) * 500ms); }
@keyframes plFrame { to { clip-path: inset(0); } }
@keyframes plImg { to { transform: none; } }
.pl-counter { position: absolute; left: 50%; bottom: calc(4.5 * var(--v)); transform: translateX(-50%); overflow: hidden; color: var(--white); font-size: calc(1.25 * var(--v)); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pl-num { display: block; }
#preloader.is-out .pl-bg { clip-path: inset(0 0 100% 0); }
#preloader.is-out .pl-frames, #preloader.is-out .pl-counter { opacity: 0; transition: opacity .3s linear .5s; }
#preloader.is-gone { display: none; }

/* ---------- 카테고리 히어로 (스크롤 고정 + 사진 확대) ---------- */
.page-cat, .page-about, .page-contact { background: var(--white); }
.hero-stage { position: relative; height: calc(100svh + (110svh + 5.236 * var(--v)) * 2 + 5svh); color: var(--white); will-change: transform, opacity; }
.hero-stage::before, .ab-hero::before { content: ""; position: absolute; inset: 0; background: var(--cat); }
.cat-hero { position: relative; height: 100svh; z-index: 1; }
.hv-track { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hv-pin { position: sticky; top: 0; height: 100svh; }
.hero-visual--grow { left: 50%; top: 25.89svh; width: calc(20 * var(--v)); height: calc(20 * var(--v)); transform: translateX(-50%); }
.hero-visual--grow img { transform: scale(1.5); clip-path: inset(50%); transition: transform 1.6s var(--e-reveal), clip-path 1.6s var(--e-reveal); }
.is-loaded .hero-visual--grow img { transform: none; clip-path: inset(0); }

/* ---------- 공통 섹션 ---------- */
.gallery, .outro, .parallax, .cta, .next, .ab-intro, .ab-outro { position: relative; z-index: 3; }
.gallery, .outro { background: var(--white); color: var(--cat); }
.gallery { padding: calc(14 * var(--v)) 0 calc(8 * var(--v)); }
.v-line { display: block; width: 1px; height: calc(4.03 * var(--v)); margin: 0 auto calc(4.282 * var(--v)); background: currentColor; opacity: .35; }
.serif-h2 { font-family: var(--serif); font-weight: 300; font-size: calc(5.2 * var(--v)); line-height: .94; letter-spacing: -.03em; text-align: center; }
.g-intro { text-align: center; }
.g-text { width: calc(25.013 * var(--v)); margin: calc(4.282 * var(--v)) auto 0; color: var(--cat-muted); }

/* 슬라이더 — 원본: 52.083vw×33.738vw, 사선 배치(가로 739px 당 세로 −104px), 스크롤에 따라 흐름 */
.slider { margin-top: calc(3.45 * var(--v)); }
.slider-view { position: relative; height: calc(46.64 * var(--v)); overflow-x: clip; touch-action: pan-y; cursor: grab; user-select: none; }
.slider-view.is-drag { cursor: grabbing; }
.slider-track { position: absolute; inset: 0; }
.slide { position: absolute; left: 0; top: calc(12.9 * var(--v)); width: calc(52.083 * var(--v)); height: calc(33.738 * var(--v)); overflow: hidden; will-change: transform; }
.slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.slider-nav { display: flex; justify-content: flex-end; gap: calc(.5 * var(--v)); padding-right: calc(12.5 * var(--v)); margin-top: calc(6.23 * var(--v)); }
.slider-arrow { display: grid; place-items: center; width: calc(3.472 * var(--v)); height: calc(3.472 * var(--v)); border-radius: 50%; border: 1px solid currentColor; background: transparent; color: var(--cat); cursor: pointer; padding: 0; transition: opacity .25s ease; }
.slider-arrow svg { width: 32%; height: auto; }
.slider-arrow:hover { opacity: .65; }

/* 바깥 마퀴 + 인용 */
.outro { padding: calc(20.1 * var(--v)) 0 calc(14 * var(--v)); }
.marquee--outro .marquee-text { color: var(--cat); }
.quote { display: flex; flex-direction: column; align-items: center; margin-top: calc(13 * var(--v)); text-align: center; }
.q-fig { width: calc(12.674 * var(--v)); aspect-ratio: 1; overflow: hidden; }
.q-fig img { width: 100%; height: 100%; object-fit: cover; }
.q-text { width: calc(63 * var(--v)); margin-top: calc(4.282 * var(--v)); }
.q-attr { margin-top: calc(4.282 * var(--v)); }
.q-name { color: var(--cat); }
.q-src { color: var(--cat-muted); }

/* 패럴랙스 */
.parallax { height: calc(79.2 * var(--v)); overflow: hidden; background: var(--cat); }
.par-view { position: relative; height: 100%; overflow: hidden; }
.par-view img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); will-change: transform; }

/* 수치 행 */
.values { padding: calc(14 * var(--v)) var(--pad); }
.v-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.v-row + .v-row { margin-top: calc(5 * var(--v)); }
.v-fig { grid-column: 2 / 5; aspect-ratio: 303 / 388; overflow: hidden; }
.v-fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.v-copy { grid-column: 5 / 8; align-self: start; color: var(--cat); }
.v-row--rev .v-copy { grid-column: 6 / 9; }
.v-row--rev .v-fig { grid-column: 9 / 12; }
.v-copy--mid { align-self: center; }
.v-copy--end { align-self: end; }
.v-index { font-size: max(12px, calc(.96 * var(--v))); margin-bottom: calc(3 * var(--v)); }
.v-stat { font-size: calc(3.646 * var(--v)); line-height: .92; letter-spacing: -.05em; }
.v-desc { margin-top: calc(2.42 * var(--v)); color: var(--cat-muted); }
.v-row--lead .v-copy--lead { grid-column: 2 / 7; align-self: center; text-align: center; }
.v-row--lead .v-fig { grid-column: 8 / 11; }
.lead-title { font-family: var(--serif); font-weight: 300; font-size: calc(5.2 * var(--v)); line-height: .94; letter-spacing: -.03em; }
.pull { margin-top: calc(13 * var(--v)); padding: 0 calc(var(--col) + var(--gap)); }
.pull-text { font-size: calc(3.646 * var(--v)); line-height: 1; letter-spacing: -.02em; color: var(--cat); }
.pull-text .line:first-child .line-in > span { position: absolute; transform: translateX(-100%); }
.pull .q-attr { margin-top: calc(4.282 * var(--v)); }

/* CTA */
.cta { background: var(--cat); color: var(--white); padding: 13.26vw 4.26vw; text-align: center; }
.cta-link { margin-top: calc(4.282 * var(--v)); font-size: calc(1.5 * var(--v)); }

/* 다음 */
.next { height: calc(33 * var(--v)); overflow: hidden; color: var(--white); background: var(--cat); }
.next-view { position: absolute; inset: 0; overflow: hidden; }
.next-wrap { height: 100%; transition: transform .8s var(--e-hover); }
.next-par { height: 100%; transform: translateY(-6%) scale(1.16); will-change: transform; }
.next-par img { width: 100%; height: 100%; object-fit: cover; }
.next-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .36); transition: background-color .8s var(--e-hover); }
.next-content { position: absolute; inset: 0; padding: var(--pad); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.next-label { border: 1px solid currentColor; border-radius: 999px; padding: calc(.363 * var(--v)) calc(.8 * var(--v)); font-size: max(12px, calc(1.1 * var(--v))); font-weight: 400; line-height: 1; }
.next-title { margin-top: calc(1.638 * var(--v)); font-size: calc(5.787 * var(--v)); line-height: 1.1; letter-spacing: -.02em; }
.next-desc { margin-top: calc(1.2 * var(--v)); font-size: calc(1.447 * var(--v)); font-weight: 400; line-height: 1.4; }
.next:hover .next-wrap { transform: scale(1.1); }
.next:hover .next-overlay { background: rgba(0, 0, 0, .26); }
.next.is-leaving .next-title, .next.is-leaving .next-desc, .next.is-leaving .next-label { transform: translateY(-60%); opacity: 0; transition: transform .7s var(--e-stage), opacity .5s ease; }

/* ---------- 오른쪽 아래 버튼 ---------- */
.actions { --fill: var(--cat); --hover-text: var(--white); position: fixed; z-index: 60; right: var(--pad); bottom: calc(4.5 * var(--v)); display: inline-flex; align-items: center; gap: .45em; font-size: calc(1.25 * var(--v)); opacity: 0; transform: translateY(16%) scale(.92); transition: opacity .8s ease, transform .9s var(--e-reveal); }
.is-loaded .actions { opacity: 1; transform: none; }
.actions.is-dark { --fill: var(--white); --hover-text: var(--cat); }
.sel-btn { display: inline-flex; align-items: center; justify-content: center; gap: .8em; height: calc(3.356 * var(--v)); padding: 0 1.5em; cursor: pointer; line-height: 1; white-space: nowrap; color: var(--fill); border: 1px solid var(--fill); background-color: transparent; background-image: linear-gradient(90deg, var(--fill) 50%, transparent 50%); background-size: 200% 100%; background-position: 100% 0; transition: background-position .75s var(--e-cta), color .75s var(--e-cta), border-color .75s var(--e-cta); }
.sel-btn:hover, .sel-btn[aria-expanded="true"] { background-position: 0 0; color: var(--hover-text); }
.sel-btn svg { width: .75em; height: .75em; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: calc(3.762 * var(--v)); height: calc(3.356 * var(--v)); border: 0; padding: 0; background: var(--fill); color: var(--hover-text); cursor: pointer; transition: background-color .75s var(--e-cta), color .75s var(--e-cta); }
.menu-btn svg, .menu-close svg { width: calc(3.762 * var(--v) * 23 / 65); height: auto; }

/* ---------- Our Selection ---------- */
#selection { position: fixed; inset: 0; z-index: 1; background: var(--sel-bg); }
#selection[hidden] { display: none; }
.sel-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); height: calc(68.18svh + var(--pad)); padding: var(--pad) var(--pad) 0; }
.sel-card { position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; color: var(--white); transform: translateY(110%); opacity: 0; transition: transform .9s var(--e-reveal), opacity .5s ease, filter .8s var(--e-hover); transition-delay: calc(var(--n, 0) * 46ms + 120ms); }
.sel-panel { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; padding: calc(1.85 * var(--v)); background: var(--card); }
.card-symbol { grid-area: 1 / 1; width: calc(2.66 * var(--v)); height: auto; }
.sel-title { grid-area: 1 / 2 / -1; place-self: end; writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(3.24 * var(--v)); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.sel-desc { grid-area: 3 / 1; align-self: end; max-width: calc(12.5 * var(--v)); font-size: max(12px, calc(.9 * var(--v))); line-height: 1.35; }
.card-symbol, .sel-desc { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .8s var(--e-reveal); transition-delay: calc(var(--n, 0) * 46ms + 420ms); }
.sel-title { opacity: 0; translate: 20px 0; transition: opacity .6s ease, translate .8s var(--e-reveal); transition-delay: calc(var(--n, 0) * 46ms + 480ms); }
.sel-cover { position: relative; flex: 0 0 auto; height: 20svh; overflow: hidden; }
.sel-cover::after { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .32), rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: soft-light; transition: opacity .8s var(--e-hover); }
.sel-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-hover), filter .8s var(--e-hover); }
.sel-card:hover { filter: brightness(1.08); }
.sel-card:hover .sel-cover img { transform: scale(1.045); filter: brightness(1.14) saturate(1.12); }
.sel-card:hover .sel-cover::after { opacity: 1; }
.sel-card--home { color: var(--navy); }
.sel-card--home:hover { filter: brightness(.96); }
.is-selection .sel-card { transform: none; opacity: 1; }
.is-selection .card-symbol, .is-selection .sel-desc { opacity: 1; transform: none; }
.is-selection .sel-desc { opacity: .8; }
.is-selection .sel-title { opacity: 1; translate: 0 0; }
.sel-card.is-expanding { z-index: 10; }

#stage { position: relative; z-index: 2; background: var(--white); transform-origin: 50% 100%; transition: transform 1s var(--e-stage); }
#stage.is-frozen { position: fixed; inset: 0; height: 100svh; overflow: hidden; }
.is-selection #stage { transform: translateY(23.45svh) scale(.445); cursor: pointer; }
.is-selection #stage .stage-inner { cursor: pointer; }

/* ---------- 메뉴 ---------- */
#nav-menu { --menu-bg: var(--navy); --menu-text: var(--white); position: fixed; inset: 0; z-index: 100; }
.page-cat #nav-menu, .page-about #nav-menu { --menu-bg: var(--white); --menu-text: var(--cat); }
#nav-menu[hidden] { display: none; }
.menu-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--cat) 30%, transparent); opacity: 0; transition: opacity .6s ease; }
.menu-panel { position: fixed; right: var(--pad); bottom: calc(4.5 * var(--v)); width: calc(23 * var(--v)); min-height: calc(23.9 * var(--v)); display: flex; flex-direction: column; justify-content: space-between; padding: calc(3 * var(--v)); background: var(--menu-bg); color: var(--menu-text); clip-path: inset(calc(100% - 3.356 * var(--v)) 0 0 calc(100% - 3.762 * var(--v))); transition: clip-path .85s var(--e-stage); }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; padding-top: calc(5 * var(--v)); }
.roll { position: relative; display: block; height: 1.08em; overflow: hidden; font-family: var(--serif); font-size: calc(2.816 * var(--v)); line-height: 1.08; font-weight: 300; letter-spacing: -.01em; transform: translateY(110%); transition: transform .9s var(--e-reveal); transition-delay: calc(var(--n) * 60ms + 200ms); }
.roll-a, .roll-b { display: block; white-space: nowrap; }
.rl { display: inline-block; transition: transform .55s var(--e-reveal); transition-delay: calc(var(--i) * 22ms); }
.roll:hover .rl, .roll:focus-visible .rl { transform: translateY(-100%); }
.menu-contact { display: flex; justify-content: space-between; gap: 1.5em; margin-top: calc(2.6 * var(--v)); font-size: max(12px, calc(1 * var(--v))); line-height: 1; opacity: 0; transition: opacity .6s ease .45s; }
.menu-contact a { display: inline-flex; align-items: center; gap: .55em; }
.mc-icon { display: block; width: .95em; height: .95em; overflow: hidden; }
.mc-track { display: flex; flex-direction: column; gap: .5em; transition: transform .68s var(--e-reveal); }
.mc-track svg { width: .95em; height: .95em; flex: 0 0 auto; }
.menu-contact a:hover .mc-track { transform: translateY(calc(-50% - .25em)); }
.menu-close { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; width: calc(3.762 * var(--v)); height: calc(3.356 * var(--v)); border: 0; padding: 0; background: transparent; color: var(--menu-text); cursor: pointer; }
.menu-close .b-top { opacity: 0; }
.is-menu .menu-overlay { opacity: 1; }
.is-menu .menu-panel { clip-path: inset(0); }
.is-menu .roll { transform: none; }
.is-menu .menu-contact { opacity: 1; }

/* ---------- 스크롤바 · 커서 링 ---------- */
.scrollbar { position: fixed; top: 0; right: 0; bottom: 0; width: 11px; z-index: 90; opacity: 0; transition: opacity .35s; pointer-events: none; }
.scrollbar.is-on { opacity: 1; pointer-events: auto; }
.scrollbar-thumb { position: absolute; left: 1px; right: 1px; top: 0; min-height: 40px; border-radius: 5px; background: color-mix(in srgb, var(--cat-muted) 72%, transparent); cursor: grab; transition: background .15s; }
.scrollbar-thumb:hover { background: color-mix(in srgb, var(--cat-muted) 85%, transparent); }
.page-home .scrollbar, .page-contact .scrollbar { display: none; }
.cursor-ring { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; transform: translate3d(var(--cx, -300px), var(--cy, -300px), 0); }
.cr-ring { position: absolute; left: 0; top: 0; width: clamp(9rem, 15vw, 12.5rem); aspect-ratio: 1; border-radius: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0); transition: opacity .5s ease, transform .5s cubic-bezier(.15, .32, .2, .99); mix-blend-mode: difference; }
.cr-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .28); }
.cr-fill { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from -90deg, #fff var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); }
.cr-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; letter-spacing: .01em; }
.cursor-ring.is-on .cr-ring { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-ring.is-out .cr-ring { opacity: 0; transform: translate(-50%, -50%) scale(0); transition-duration: .75s; }

/* ---------- About ---------- */
.ab-hero { position: relative; height: 100vw; color: var(--white); }
.ab-media { position: absolute; inset: 0; overflow: hidden; }
.ab-media img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; transform: scale(1.12); transition: transform 1.8s var(--e-reveal); }
.is-loaded .ab-media img { transform: none; }
.ab-shade { position: absolute; inset: 0; background: #0b1024; opacity: .18; }
.ab-hero-fg { position: relative; height: 100svh; }
.ab-intro { background: var(--white); padding-top: calc(14 * var(--v)); }
.ab-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--pad); }
.ab-label { grid-column: 1 / 3; padding-top: .3em; }
.ab-title { grid-column: 3 / 13; font-size: calc(3.907 * var(--v)); line-height: 1.1; letter-spacing: -.035em; }
.ab-title .line:first-child { padding-left: calc(21.27 * var(--v)); }
.ab-video-slot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--pad); margin-top: calc(5.28 * var(--v)); }
.ab-video { grid-column: 9 / 13; position: relative; display: block; width: 100%; aspect-ratio: 415 / 283; padding: 0; border: 0; overflow: hidden; background: var(--navy); cursor: pointer; transform-origin: 0 0; will-change: transform; }
.ab-vframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease; }
.ab-vframe.is-swap { opacity: .35; }
.ab-video.is-playing .ab-vframe { animation: kb 2.6s linear infinite; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.ab-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: calc(3.2 * var(--v)); height: calc(3.2 * var(--v)); margin: calc(-1.6 * var(--v)) 0 0 calc(-1.6 * var(--v)); border-radius: 50%; background: var(--white); color: var(--navy); transition: opacity .3s ease; }
.ab-play svg { width: 34%; height: auto; margin-left: 8%; }
.ab-video.is-playing .ab-play { opacity: 0; }
.ab-expand-space { height: calc(93 * var(--v)); }
.ab-outro { padding-top: 0; }
.ab-outro .quote { margin-top: calc(14 * var(--v)); }
.marquee--about { margin-top: calc(14 * var(--v)); }
.ab-grid--2 { margin-top: calc(11.4 * var(--v)); }
.ab-values { padding-top: calc(27 * var(--v)); padding-bottom: 0; }
.ab-grid--3 { margin-top: calc(18.3 * var(--v)); }
.video-cursor { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: grid; place-items: center; width: calc(6 * var(--v)); height: calc(6 * var(--v)); margin: calc(-3 * var(--v)) 0 0 calc(-3 * var(--v)); border-radius: 50%; background: var(--navy); color: var(--white); font-size: max(12px, calc(1 * var(--v))); transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform .5s cubic-bezier(.15, .32, .2, .99); }
.video-cursor.is-on { transform: translate3d(var(--x), var(--y), 0) scale(1); }

/* ---------- Contact ---------- */
.contact { position: relative; min-height: 100svh; background: var(--white); color: var(--navy); }
.c-marquee-rotate { position: absolute; top: 0; left: calc(28.5 * var(--v)); width: 100svh; transform-origin: 0 0; transform: rotate(90deg); }
.marquee--contact .marquee-text { color: var(--navy); }
.c-channels { position: absolute; left: calc(41.8 * var(--v)); top: 55.44svh; width: calc(22.2 * var(--v)); }
.c-heading { font-size: calc(1.736 * var(--v)); font-weight: 400; line-height: 1.3; }
.c-channel { margin-top: calc(5 * var(--v)); }
.c-heading + .c-channel { margin-top: calc(5 * var(--v)); }
.c-channel + .c-channel { margin-top: calc(4.1 * var(--v)); }
.c-label { font-size: calc(1.168 * var(--v)); line-height: 1.2; }
.c-value { margin-top: calc(.44 * var(--v)); font-size: max(12px, calc(.99 * var(--v))); font-weight: 400; color: var(--muted); }
.c-value::after { transform: scaleX(0); }
.c-value:hover::after, .c-value:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }
.c-copy { position: relative; }
.c-copy-done { position: absolute; left: 0; top: 50%; display: inline-flex; align-items: center; gap: .45em; padding: .3em .6em; background: var(--navy); color: var(--white); white-space: nowrap; transform: translateY(-50%); opacity: 0; transition: opacity .3s ease; }
.c-copy.is-copied .c-copy-done { opacity: 1; }
.c-aside { position: absolute; top: 26.9svh; right: var(--pad); width: calc(30.43 * var(--v)); }
.c-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.c-tabs::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, var(--navy) 18%, transparent); }
.c-tab { position: relative; padding: calc(.82 * var(--v)) calc(.47 * var(--v)) calc(.99 * var(--v)); border: 0; background: none; color: var(--muted); font-size: calc(1.168 * var(--v)); line-height: 1.2; cursor: pointer; transition: color .3s ease; }
.c-tab::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); transform: scaleX(0); opacity: 0; transition: transform .5s var(--e-reveal), opacity .3s ease; }
.c-tab:hover { color: var(--navy); }
.c-tab:not(.is-active):hover::after { transform: scaleX(.35); opacity: .45; }
.c-tab.is-active { color: var(--navy); }
.c-tab.is-active::after { transform: scaleX(1); opacity: 1; }
.c-form { margin-top: calc(2.7 * var(--v)); display: flex; flex-direction: column; gap: calc(.45 * var(--v)); }
.c-form[hidden] { display: none; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(.45 * var(--v)) calc(1.17 * var(--v)); }
.f-field { position: relative; }
.c-form input:not([type=checkbox]), .c-form select, .c-form textarea { display: block; width: 100%; padding: calc(1.08 * var(--v)) 0; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--navy) 30%, transparent); border-radius: 0; background: transparent; color: var(--navy); font: 400 max(13px, calc(.99 * var(--v))) / 1.45 var(--sans); outline: none; transition: border-color .3s ease; }
.c-form select { appearance: none; padding-right: calc(1.78 * var(--v)); color: var(--muted); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%231F2B5E'/%3E%3C/svg%3E") right .2em center / 8px 5px no-repeat; cursor: pointer; }
.c-form select:valid { color: var(--navy); }
.c-form textarea { min-height: calc(6.4 * var(--v)); resize: vertical; }
.c-form ::placeholder { color: var(--muted); opacity: 1; }
.c-form input:focus, .c-form select:focus, .c-form textarea:focus { border-bottom-color: var(--navy); }
.c-form input:focus-visible, .c-form select:focus-visible, .c-form textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.c-form [aria-invalid="true"] { border-bottom-color: #B3261E !important; }
.f-err { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: .6em; background: var(--white); color: #B3261E; font-size: 12px; font-weight: 500; line-height: 1.3; pointer-events: none; }
.f-err:empty { display: none; }
.f-consent { display: grid; grid-template-columns: auto 1fr; column-gap: calc(.7 * var(--v)); margin-top: calc(1.2 * var(--v)); font-size: max(12px, calc(.855 * var(--v))); line-height: 1.45; color: var(--muted); }
.f-consent input { width: 15px; height: 15px; margin: .15em 0 0; accent-color: var(--navy); }
.f-consent { position: relative; }
.f-consent .f-err { top: auto; bottom: -1.6em; left: calc(15px + .7 * var(--v)); right: auto; transform: none; padding: 0; }
.policy-open { display: inline; color: var(--navy); font-size: inherit; }
.policy-open::after { bottom: 0; }
.f-submit { margin-top: calc(1.5 * var(--v)); }
.send-btn { height: calc(3.23 * var(--v)); padding: 0 calc(1.58 * var(--v)); border: 1px solid var(--navy); color: var(--white); background-color: var(--white); background-image: linear-gradient(90deg, var(--white) 50%, var(--navy) 50%); background-size: 200% 100%; background-position: 100% 0; font-size: max(13px, calc(.99 * var(--v))); cursor: pointer; transition: background-position .75s var(--e-cta), color .75s var(--e-cta); }
.send-btn:hover { background-position: 0 0; color: var(--navy); }
.f-status { font-size: max(12px, calc(.99 * var(--v))); color: var(--navy); }
.f-status:empty { display: none; }

/* 정책 오버레이 */
.side-overlay { position: fixed; inset: 0; z-index: 200; }
.side-overlay[hidden] { display: none; }
.so-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--navy) 40%, transparent); opacity: 0; transition: opacity .8s ease; }
.so-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 49vw; overflow-y: auto; padding: calc(3.6 * var(--v)); background: var(--white); color: var(--navy); transform: translateX(calc(18 * var(--v))); opacity: 0; transition: transform .8s var(--e-reveal), opacity .8s ease; overscroll-behavior: contain; }
.side-overlay.is-open .so-backdrop { opacity: 1; }
.side-overlay.is-open .so-panel { transform: none; opacity: 1; }
.so-close { position: absolute; top: calc(2.25 * var(--v)); right: calc(2.25 * var(--v)); width: calc(2.7 * var(--v)); height: calc(2.7 * var(--v)); border: 0; background: var(--white); color: var(--navy); font-size: calc(2.25 * var(--v)); line-height: 1; cursor: pointer; transition: opacity .25s ease; }
.so-close:hover { opacity: .55; }
.so-panel h2 { font-size: calc(1.98 * var(--v)); line-height: 1.2; padding-right: calc(4 * var(--v)); }
.so-body { margin-top: calc(1.6 * var(--v)); font-size: 14px; font-weight: 400; line-height: 1.55; }
.so-body p { margin-top: .7em; font-size: 14px; line-height: 1.55; }
.so-updated { color: var(--muted); }
.so-body h3 { margin-top: 1.4em; font-size: 16px; line-height: 1.4; font-weight: 500; }
.so-body h4 { margin-top: 1.4em; font-size: 15px; line-height: 1.4; font-weight: 500; }
.so-body strong { font-weight: 500; }

body.is-locked { overflow: hidden; }

/* ---------- 태블릿 · 모바일 ---------- */
@media (max-width: 1023px) {
  :root { --k: 1.35; }
  .page-home .hero-bottom { top: 66svh; }
  .c-marquee-rotate { left: calc(22 * var(--v)); }
  .c-channels { left: calc(26 * var(--v)); top: auto; bottom: calc(6 * var(--v)); }
  .c-aside { top: calc(12 * var(--v)); width: calc(38 * var(--v)); }
  .v-fig, .v-row--lead .v-fig { grid-column: 1 / 6; }
  .v-copy, .v-row--lead .v-copy--lead { grid-column: 7 / 13; }
  .v-row--rev .v-copy { grid-column: 1 / 7; }
  .v-row--rev .v-fig { grid-column: 8 / 13; }
}
@media (max-width: 767px) {
  :root { --k: 2.25; --pad: 5vw; --gap: 3vw; }
  .logo { top: 8vw; }
  .wordmark { font-size: 4.6vw; }
  .nav-about, .nav-contact { top: 7.5vw; font-size: 3.6vw; }
  .site-nav { font-size: 3.6vw; }
  .hero-top { top: 28svh; }
  .marquee-text { font-size: 30vw; }
  .hero-visual--home { top: -2vw; width: 34vw; height: 34vw; }
  .pl-frames { top: calc(28svh - 2vw); width: 34vw; height: 34vw; }
  .hero-visual--grow { width: 34vw; height: 34vw; top: calc(28svh - 2vw); }
  .hero-bottom, .page-home .hero-bottom { top: auto; bottom: 34vw; padding: 0 var(--pad); }
  .hero-h1 { font-size: clamp(15px, 4.6vw, 20px); }
  .hero-price { font-size: 2.6vw; }
  .site-footer { font-size: 3.4vw; bottom: 5vw; }
  .page-home .site-footer { left: 50%; transform: translateX(-50%); bottom: 6vw; }
  .page-cat .site-footer, .page-about .site-footer { display: none; }
  .actions { right: 50%; transform: translateX(50%); bottom: 16vw; font-size: 4vw; }
  .is-loaded .actions { transform: translateX(50%); }
  .sel-btn { height: 11.5vw; }
  .menu-btn { width: 12.8vw; height: 11.5vw; }
  .menu-btn svg, .menu-close svg { width: 4.6vw; }
  body { font-size: 3.8vw; }
  .serif-h2, .lead-title { font-size: 10vw; }
  .g-text, .q-text { width: auto; padding: 0 var(--pad); }
  .slide { width: 78vw; height: 52vw; top: 20vw; }
  .slider-view { height: 90vw; }
  .slider-nav { padding-right: var(--pad); }
  .slider-arrow { width: 11vw; height: 11vw; }
  .q-fig { width: 32vw; }
  .parallax { height: 110vw; }
  .v-row, .ab-grid, .ab-video-slot { grid-template-columns: 1fr; row-gap: 5vw; }
  .v-fig, .v-copy, .v-row--rev .v-copy, .v-row--rev .v-fig, .v-row--lead .v-copy--lead, .v-row--lead .v-fig, .ab-label, .ab-title, .ab-video { grid-column: 1 / -1; }
  .v-row--rev .v-fig { order: -1; }
  .v-fig { width: 70%; }
  .v-stat { font-size: 9vw; }
  .v-index { font-size: 3.4vw; }
  .pull { padding: 0; }
  .pull-text { font-size: 7vw; }
  .ab-title { font-size: 7.4vw; }
  .ab-title .line:first-child { padding-left: 0; }
  .ab-expand-space { height: 20vw; }
  .cta-link { font-size: 4.6vw; }
  .next { height: 90vw; }
  .next-title { font-size: 11vw; }
  .next-desc, .next-label { font-size: 3.6vw; padding-inline: 2.4vw; }
  .sel-cards { grid-template-columns: 1fr; grid-auto-rows: 17svh; height: auto; gap: 2vw; padding: var(--pad); }
  .sel-card { flex-direction: row; }
  .sel-panel { flex: 1.6 1 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4vw; }
  .card-symbol { display: none; }
  .sel-title { writing-mode: horizontal-tb; transform: none; font-size: 6vw; place-self: auto; }
  .sel-desc { font-size: 3.2vw; max-width: none; }
  .sel-cover { flex: 1 1 0; height: auto; }
  .is-selection #stage { transform: translateY(40svh) scale(.3); }
  .menu-panel { left: var(--pad); right: var(--pad); width: auto; bottom: 16vw; min-height: 80vw; padding: 8vw; clip-path: inset(100% 0 0 0); }
  .menu-links { padding-top: 0; }
  .roll { font-size: 12vw; }
  .menu-contact { font-size: 4vw; }
  .menu-close { display: none; }
  .contact { min-height: auto; padding: 32vw var(--pad) 40vw; }
  .c-marquee-rotate { position: relative; left: auto; width: auto; transform: none; margin: 0 calc(-1 * var(--pad)); }
  .c-channels, .c-aside { position: static; width: auto; margin-top: 10vw; }
  .c-heading { font-size: 6vw; }
  .c-label { font-size: 4vw; }
  .c-value, .c-tab, .c-form input:not([type=checkbox]), .c-form select, .c-form textarea, .send-btn { font-size: 4vw; }
  .send-btn { height: 12vw; padding: 0 6vw; }
  .f-row { grid-template-columns: 1fr; }
  .f-consent { font-size: 3.4vw; }
  .so-panel { width: 100vw; padding: 8vw; }
  .so-panel h2 { font-size: 6vw; }
  .so-close { width: 9vw; height: 9vw; font-size: 8vw; }
  .ab-hero { height: 150svh; }
  .video-cursor { display: none; }
  .scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; transition-delay: 0ms !important; }
}
.is-selection .actions { opacity: 0; pointer-events: none; }
.page-contact .actions { display: none; }
@media (max-width: 767px) { .page-contact .actions { display: inline-flex; } }
.f-field select ~ .f-err { right: 1.6em; }
/* 원본: 로드 시 Our Selection 점 아이콘이 0 → 1 로 커짐, 카테고리 히어로에서는 버튼이 72px 위, 본문에 들어서면 61px (bottom 400ms ease) */
.sel-btn svg { transform: scale(0); transition: transform .9s var(--e-reveal) .35s; }
.is-loaded .sel-btn svg { transform: none; }
.page-cat .actions { transition: opacity .8s ease, transform .9s var(--e-reveal), bottom .4s ease; }
.page-cat .actions.is-high { bottom: calc(5.28 * var(--v)); }