/* ==========================================================================
   JUNYEONG PARK — Portfolio
   Black & White + Point Blue #0100F9
   EN: Helvetica / KO: Pretendard / Glass UI
   ========================================================================== */

:root {
  --black: #0a0a0a;
  --ink: #111;
  --white: #ffffff;
  --paper: #f4f4f2;
  --grey: #8a8a8a;
  --line: rgba(255, 255, 255, 0.14);
  --line-dark: rgba(10, 10, 10, 0.14);
  --blue: #0100f9;

  --font: "Helvetica Neue", Helvetica, Arial, "Pretendard Variable", Pretendard, -apple-system, sans-serif;

  --gutter: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-light { background: var(--paper); color: var(--ink); }

/* 한글은 Pretendard, 영문은 Helvetica (font stack 순서로 처리) */
.ko, [lang="ko"] p { word-break: keep-all; } /* 영문 Helvetica → 한글 글리프는 font stack에서 Pretendard로 자동 대체 */

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, iframe { display: block; max-width: 100%; }
::selection { background: var(--blue); color: var(--white); }

.thin { font-weight: 300; }
.blue { color: var(--blue); }
.mono-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
}
.dim { color: var(--grey); }
.wrap { padding-inline: var(--gutter); }

/* ------------------------------------------------------------ PRELOADER */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--black);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gutter);
  transition: transform 1s var(--ease);
}
.preloader.is-done { transform: translateY(-100%); }
.preloader-top { display: flex; justify-content: space-between; }
.preloader-count {
  font-size: clamp(80px, 18vw, 280px); font-weight: 700; line-height: .8; letter-spacing: -0.03em;
  align-self: flex-end;
}
.preloader-bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--blue); width: 0; }

/* ------------------------------------------------------- PAGE TRANSITION */
.page-wipe {
  position: fixed; inset: 0; z-index: 9000; background: var(--blue);
  inset: 0 -40vw; transform: skewX(-18deg) translateX(100%); pointer-events: none;
}
/* 페이지가 열릴 때마다 블루 화면이 사선으로 쓸고 지나가며 등장 */
.page-wipe { animation: wipeOut .9s var(--ease) .05s both; }
@keyframes wipeOut { from { transform: skewX(-18deg) translateX(0); } to { transform: skewX(-18deg) translateX(100%); } }
@keyframes wipeIn { from { transform: skewX(-18deg) translateX(-100%); } to { transform: skewX(-18deg) translateX(0); } }
.page-wipe.is-in { animation: wipeIn .65s var(--ease) both; }

/* ---------------------------------------------------------- PROGRESS */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 600;
  background: var(--blue); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------------ HEADER */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 22px var(--gutter);
  mix-blend-mode: difference; color: var(--white);
  transition: transform .6s var(--ease);
}
.header.is-hidden { transform: translateY(-110%); }
.header-center { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 10px; }
.nav { justify-self: end; display: flex; gap: 32px; }
.nav > .nav-item > a { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.menu-btn { display: none; justify-self: end; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }

/* rolling text link */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.roll span { display: block; transition: transform .5s var(--ease); }
.roll span + span { position: absolute; top: 100%; left: 0; }
.roll:hover span { transform: translateY(-100%); }
.nav > .nav-item > a.is-active .roll span:first-child::before { content: "● "; font-size: 8px; vertical-align: middle; }

@media (max-width: 760px) {
  .header { grid-template-columns: 1fr auto; }
  .header-center, .nav { display: none; }
  .menu-btn { display: block; }
}

/* fullscreen menu */
.menu {
  position: fixed; inset: 0; z-index: 450; background: var(--blue); color: var(--white);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 100px var(--gutter) var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease);
}
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu a.menu-link { font-size: clamp(48px, 15vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -.025em; display: block; overflow: hidden; }
.menu a.menu-link span { display: block; transform: translateY(110%); transition: transform .8s var(--ease); }
.menu.is-open a.menu-link span { transform: none; }
.menu.is-open a.menu-link:nth-child(2) span { transition-delay: .06s; }
.menu.is-open a.menu-link:nth-child(3) span { transition-delay: .12s; }
.menu-foot { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 40px; font-size: 13px; }

/* ------------------------------------------------------- SPLIT TEXT */
.split .w { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.split .c { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i) * 28ms); }
.split.is-in .c { transform: none; }

[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

.line-grow { height: 1px; background: var(--line); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.line-grow.is-in { transform: scaleX(1); }

/* ------------------------------------------------------------- HERO */
.hero-glow {
  position: absolute; width: 60vw; height: 60vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(1,0,249,.55) 0%, rgba(1,0,249,0) 65%);
  filter: blur(40px); top: 0; left: 0; transform: translate(-50%, -50%); opacity: .8;
  will-change: transform;
}
.hero-top { position: absolute; top: 110px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 24px; }
.hero-top p { max-width: 320px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); }
.hero-role { font-size: clamp(16px, 1.6vw, 24px); font-weight: 500; }
.scroll-cue { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 48px; background: rgba(255,255,255,.3); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--white); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }
@media (max-width: 760px) {
  .hero-top p:last-child { display: none; }
}

/* ---------------------------------------------------------- VIDEO */
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--dummy {
  background:
    radial-gradient(120% 90% at var(--x, 30%) var(--y, 30%), rgba(1,0,249,.6), transparent 60%),
    linear-gradient(135deg, #141414, #050505);
  display: grid; place-items: center;
}
.video--dummy::before {
  content: ""; position: absolute; inset: 0; opacity: .25;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 48px 48px;
}
.video-dummy-inner { position: relative; text-align: center; display: grid; justify-items: center; gap: 10px; color: var(--white); }
.play {
  width: 72px; height: 72px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5);
  display: grid; place-items: center; transition: background .4s, transform .6s var(--ease-out);
}
.play svg { width: 18px; margin-left: 3px; fill: currentColor; }
.video--dummy:hover .play { background: var(--blue); border-color: var(--blue); transform: scale(1.1); }
.video-dummy-inner small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.video-dummy-inner b { font-size: 13px; letter-spacing: .08em; font-weight: 500; }

/* -------------------------------------------------------- STATEMENT */
.statement { background: var(--paper); color: var(--ink); padding: clamp(100px, 16vw, 220px) var(--gutter); }
.statement-head { display: flex; justify-content: space-between; margin-bottom: 48px; }
.words { font-size: clamp(28px, 4.4vw, 72px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 500; max-width: 1400px; }
.words .wd { opacity: .12; transition: opacity .25s linear; }
.words .wd.on { opacity: 1; }
.words .thin { font-weight: 400; }
.statement-ko { margin-top: 48px; max-width: 560px; font-size: 16px; line-height: 1.8; color: #555; margin-left: auto; }
.statement-ko .slash { --bw: .26em; width: .6em; margin: 0 .1em; }
.words .slash { --bw: .17em; margin: 0 .1em; }

/* ------------------------------------------------------------ SECTIONS */
.section { padding: clamp(80px, 12vw, 160px) var(--gutter); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(40px, 6vw, 80px); flex-wrap: wrap; }
.section-title { font-size: clamp(48px, 9vw, 160px); font-weight: 700; letter-spacing: -0.055em; line-height: .85; }
.section-title .thin { font-weight: 300; color: rgba(255,255,255,.45); }
.section-head .count { font-size: clamp(14px, 1.2vw, 18px); }
.section-head .count sup { font-size: .7em; }

/* --------------------------------------------------------- CATEGORY ROWS */
.cat-list { border-top: 1px solid var(--line); }
.cat-row {
  position: relative; display: grid; grid-template-columns: 80px 1fr auto 60px; align-items: center; gap: 24px;
  padding: clamp(20px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate;
}
.cat-row::before {
  content: ""; position: absolute; inset: 0; background: var(--blue); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
.cat-row:hover::before { transform: scaleY(1); }
.cat-row .no { font-size: 13px; padding-left: 8px; }
.cat-row .name { font-size: clamp(32px, 6.4vw, 110px); font-weight: 700; letter-spacing: -0.03em; line-height: .9; transition: transform .6s var(--ease); }
.cat-row:hover .name { transform: translateX(24px); }
.cat-row .ko { font-size: 14px; color: rgba(255,255,255,.6); text-align: right; }
.cat-row .n { font-size: 13px; text-align: right; padding-right: 8px; }
.cat-row .arrow { position: absolute; right: 8px; top: 50%; transform: translate(-40px, -50%) rotate(-45deg); opacity: 0; transition: .6s var(--ease); font-size: 28px; }
.cat-row:hover .arrow { opacity: 1; transform: translate(0, -50%) rotate(0); }
.cat-row:hover .n { opacity: 0; }
@media (max-width: 760px) { .cat-row { grid-template-columns: 36px 1fr 40px; } .cat-row .ko { display: none; } }

/* --------------------------------------------------------- THUMB PLACEHOLDER */
.ph {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; color: var(--white);
  background:
    radial-gradient(80% 80% at var(--x, 30%) var(--y, 40%), rgba(1,0,249,.85), rgba(1,0,249,0) 60%),
    linear-gradient(160deg, #1a1a1a, #050505);
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-no { position: absolute; right: 16px; bottom: 6px; font-size: clamp(64px, 8vw, 140px); font-weight: 700; letter-spacing: -.035em; line-height: 1; opacity: .9; }
.ph-client { position: absolute; left: 16px; top: 14px; font-size: 12px; letter-spacing: .12em; font-weight: 600; }
.ph-tag { position: absolute; left: 16px; bottom: 16px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }

/* ---------------------------------------------------------------- PAGE HEAD */
.page-head { padding: clamp(140px, 18vw, 240px) var(--gutter) clamp(40px, 6vw, 80px); }
.page-head .eyebrow { display: flex; gap: 16px; margin-bottom: 24px; }
.page-title { font-size: clamp(56px, 12vw, 220px); font-weight: 700; letter-spacing: -0.035em; line-height: .84; }
.page-title .thin { font-weight: 300; color: rgba(255,255,255,.45); }

/* ------------------------------------------------------- FILTER BAR */
.filter-bar {
  position: sticky; top: 0; z-index: 300; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 76px var(--gutter) 16px; background: linear-gradient(var(--black) 75%, rgba(10,10,10,0));
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  position: relative; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; overflow: hidden; isolation: isolate;
  transition: border-color .3s, color .3s;
}
.filter sup { font-size: 9px; margin-left: 4px; opacity: .6; }
.filter::before { content: ""; position: absolute; inset: 0; background: var(--white); z-index: -1; transform: translateY(101%); transition: transform .5s var(--ease); border-radius: inherit; }
.filter:hover { border-color: var(--white); }
.filter.is-active { color: var(--black); border-color: var(--white); }
.filter.is-active::before { transform: none; }
.view-toggle { display: flex; gap: 4px; }
.view-toggle button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: .3s; }
.view-toggle button.is-active { background: var(--blue); border-color: var(--blue); }
.view-toggle svg { width: 14px; fill: currentColor; }
@media (max-width: 760px) { .filter-bar { padding-top: 70px; } .view-toggle { display: none; } }

/* ------------------------------------------------------------ GRID */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 5vw, 80px) clamp(16px, 2.4vw, 36px); padding: 24px var(--gutter) 120px; }
.grid.is-list { grid-template-columns: 1fr; gap: 0; }
@media (max-width: 760px) { .grid { grid-template-columns: 1fr; } }

.card { display: block; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.card.is-hidden { display: none; }
.card .card-media { overflow: hidden; border-radius: 4px; }
.card .ph { transition: transform 1.2s var(--ease-out); }
.card:hover .ph { transform: scale(1.04); }
.card-media { position: relative; }
.card-media::after {
  content: ""; position: absolute; inset: 0; background: var(--blue); mix-blend-mode: multiply; opacity: 0; transition: opacity .5s;
}
.card:hover .card-media::after { opacity: .35; }
.card-info { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 18px; }
.card-client { font-size: clamp(20px, 2vw, 30px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.card-title { grid-column: 1; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.card-year { grid-row: 1; grid-column: 2; font-size: 12px; letter-spacing: .08em; padding-top: 6px; }
.card-tags { grid-column: 1 / -1; margin-top: 10px; }

/* list view variant */
.grid.is-list .card { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.grid.is-list .card.is-hidden { display: none; }
.grid.is-list .card-media { order: 2; }
.grid.is-list .card-info { margin-top: 0; }
.grid.is-list .card-client { font-size: clamp(28px, 4vw, 56px); }

/* ------------------------------------------------------------- TAGS */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 11px; letter-spacing: .04em;
  border: 1px solid var(--line); transition: background .3s, border-color .3s, color .3s; position: relative; z-index: 2;
}
.tag:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.tag.is-current { background: var(--white); color: var(--black); border-color: var(--white); }
.is-light .tag { border-color: var(--line-dark); }

/* ---------------------------------------------------------- PROJECT */
.p-hero { padding: clamp(140px, 16vw, 220px) var(--gutter) 48px; }
.p-eyebrow { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; flex-wrap: wrap; }
.p-eyebrow a:hover { color: var(--blue); }
.p-client { max-width: 18ch; font-size: clamp(40px, 6.6vw, 124px); font-weight: 700; letter-spacing: -0.035em; line-height: .86; }
.p-title { font-size: clamp(20px, 2.6vw, 44px); font-weight: 400; letter-spacing: -.02em; margin-top: 16px; color: rgba(255,255,255,.75); }
.p-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 32px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.p-meta dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); margin-bottom: 8px; }
.p-meta dd { font-size: 14px; line-height: 1.6; }
@media (max-width: 860px) { .p-meta { grid-template-columns: repeat(2, 1fr); } }
.p-video { padding: 48px var(--gutter); }
.p-body { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 120px); padding: clamp(60px, 8vw, 120px) var(--gutter); }
.p-body h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 500; position: sticky; top: 100px; }
.p-line { font-size: clamp(22px, 2.4vw, 36px); line-height: 1.4; letter-spacing: -.02em; font-weight: 600; }
.p-overview { margin-top: 32px; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.72); max-width: 720px; }
@media (max-width: 860px) { .p-body { grid-template-columns: 1fr; } .p-body h3 { position: static; } }

.part { border-top: 1px solid var(--line); padding: clamp(60px, 8vw, 120px) var(--gutter); }
.part-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(40px, 3.8vw, 88px); margin-bottom: 48px; }
.part-no { font-size: clamp(64px, 10vw, 160px); font-weight: 700; letter-spacing: -.035em; line-height: .8; color: var(--blue); }
.part-title { font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.part .p-line { font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; margin-top: 20px; color: rgba(255,255,255,.85); }
@media (max-width: 860px) { .part-head { grid-template-columns: 1fr; } }

.deliverables { margin-top: 48px; border-top: 1px solid var(--line); }
.deliverable { display: grid; grid-template-columns: 50px 1fr; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.deliverable span { font-size: 12px; color: var(--blue); font-weight: 700; padding-top: 3px; }
.deliverable h4 { font-size: 15px; letter-spacing: .02em; margin-bottom: 6px; }
.deliverable p { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }

.p-credits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.p-credits > div { background: var(--black); padding: 40px var(--gutter); }
.p-credits h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 500; margin-bottom: 20px; }
.p-credits li { list-style: none; font-size: 15px; padding: 6px 0; display: flex; justify-content: space-between; gap: 16px; }
.p-credits li small { color: var(--grey); font-size: 13px; }
.p-credits .link-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: color .3s, padding .4s var(--ease); }
.p-credits .link-list a:hover { color: var(--blue); padding-left: 8px; }
.p-credits.has-ai { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1200px) { .p-credits.has-ai { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .p-credits, .p-credits.has-ai { grid-template-columns: 1fr; } }

.p-tags { padding: 48px var(--gutter); display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 120px); }
.p-tags h4 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 500; }
.p-tags .tag { font-size: 13px; padding: 9px 16px; }
@media (max-width: 860px) { .p-tags { grid-template-columns: 1fr; } }

.next {
  display: block; position: relative; padding: clamp(56px, 7vw, 110px) var(--gutter); border-top: 1px solid var(--line);
  overflow: hidden; isolation: isolate;
}
.next::before { content: ""; position: absolute; inset: 0; background: var(--blue); z-index: -1; transform: translateY(-100%); transition: transform .8s var(--ease); }
.next:hover::before { transform: none; }
.next .mono-label { display: block; margin-bottom: 14px; }
.next-name { display: block; max-width: 16ch; font-size: clamp(28px, 4vw, 72px); font-weight: 700; letter-spacing: -.035em; line-height: .9; }
.next-name .thin { font-weight: 300; }

/* --------------------------------------------------------- ARCHIVE */
.tag-cloud { padding: 80px var(--gutter) 120px; border-top: 1px solid var(--line); }
.tag-cloud h3 { margin-bottom: 28px; }
.tag-cloud .tags { gap: 8px; }
.tag-cloud .tag { font-size: 14px; padding: 10px 18px; }
.tag-cloud .tag sup { font-size: 9px; margin-left: 4px; opacity: .6; }

.additional { padding: 0 var(--gutter) 120px; }
.additional h3 { margin-bottom: 20px; }
.add-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); align-items: center; }
.add-row:last-child { border-bottom: 1px solid var(--line); }
.add-row .client { font-weight: 700; font-size: 18px; }
.add-row .title { font-size: 15px; color: rgba(255,255,255,.8); }
@media (max-width: 860px) { .add-row { grid-template-columns: 1fr; gap: 8px; } }

.empty { padding: 80px var(--gutter); font-size: 18px; color: var(--grey); }

/* ------------------------------------------------------------- ABOUT */
.about-hero { padding: clamp(140px, 18vw, 240px) var(--gutter) clamp(60px, 8vw, 120px); }

.about-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 120px); padding: clamp(60px, 8vw, 120px) var(--gutter); border-top: 1px solid var(--line); }
.about-grid h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 500; }
.about-bio { font-size: clamp(20px, 2.2vw, 32px); line-height: 1.45; letter-spacing: -.02em; font-weight: 500; }
.about-bio-ko { margin-top: 28px; font-size: 16px; line-height: 1.9; color: rgba(255,255,255,.7); max-width: 640px; }
.note { display: inline-block; margin-top: 24px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border: 1px dashed rgba(255,255,255,.3); border-radius: 999px; color: var(--grey); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

.info-list { border-top: 1px solid var(--line); }
.info-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease); }
.info-row dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.info-row dd { font-size: clamp(16px, 1.6vw, 22px); font-weight: 500; }
.info-row .arr { transition: transform .5s var(--ease); }
a.info-row:hover { padding-left: 12px; color: var(--blue); }
a.info-row:hover .arr { transform: rotate(-45deg); }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap { background: var(--black); padding: 28px; min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; transition: background .5s var(--ease); }
.cap:hover { background: var(--blue); }
.cap span { font-size: 12px; opacity: .6; }
.cap b { font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.cap small { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: 13px; opacity: .7; }
@media (max-width: 760px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------------------------------------------------------------- FOOTER */
.footer { position: relative; background: var(--paper); color: var(--ink); padding: clamp(80px, 12vw, 160px) var(--gutter) 28px; overflow: hidden; }
.footer-cta { font-size: clamp(56px, 12vw, 220px); font-weight: 700; letter-spacing: -.035em; line-height: .84; }
.footer-mail {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 48px; padding: 22px 34px; border-radius: 999px;
  background: var(--ink); color: var(--white); font-size: clamp(16px, 2vw, 28px); font-weight: 500; position: relative; overflow: hidden; isolation: isolate;
}
.footer-mail::before { content: ""; position: absolute; inset: 0; background: var(--blue); z-index: -1; transform: translateY(101%); border-radius: inherit; transition: transform .6s var(--ease); }
.footer-mail:hover::before { transform: none; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(80px, 10vw, 140px); padding-top: 28px; border-top: 1px solid var(--line-dark); }
.footer-cols h5 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); font-weight: 500; margin-bottom: 14px; }
.footer-cols a, .footer-cols p { display: block; font-size: 14px; padding: 3px 0; }
.footer-cols a:hover { color: var(--blue); }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 60px; font-size: 12px; color: var(--grey); gap: 16px; flex-wrap: wrap; }
.to-top:hover { color: var(--blue); }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .split .c, [data-reveal] { transform: none; opacity: 1; }
}

/* ==========================================================================
   GLASS UI
   ========================================================================== */
:root {
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-tint: rgba(18, 18, 24, 0.5);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --glass-blur: blur(22px) saturate(170%);
  --radius: 18px;
}

.glass,
.p-meta, .p-credits > div, .cap, .info-list {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 유리 뒤에서 천천히 움직이는 블루 라이트 */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.ambient i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: 8vh; background: var(--blue); opacity: .5; animation: drift-a 26s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { width: 34vw; height: 34vw; right: -10vw; top: 48vh; background: #3b3bff; opacity: .35; animation: drift-b 32s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { width: 22vw; height: 22vw; left: 42vw; bottom: -8vh; background: #fff; opacity: .07; animation: drift-a 40s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate(30vw, 18vh) scale(1.2); } }
@keyframes drift-b { to { transform: translate(-26vw, -30vh) scale(.85); } }

/* header → floating glass pill */
.header {
  top: 14px; left: var(--gutter); right: var(--gutter);
  padding: 8px 8px 8px 22px; border-radius: 999px;
  mix-blend-mode: normal; background: var(--glass-tint);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), 0 12px 40px -12px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.header.is-hidden { transform: translateY(calc(-100% - 24px)); }
.nav { gap: 4px; }
.nav > .nav-item > a { padding: 9px 18px; border-radius: 999px; transition: background .3s; }
.nav > .nav-item > a:hover { background: rgba(255, 255, 255, 0.1); }
.nav > .nav-item > a.is-active { background: rgba(255, 255, 255, 0.16); }
.nav > .nav-item > a.is-active .roll span:first-child::before { content: none; }
.menu-btn { padding: 9px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); }

.menu { background: rgba(1, 0, 249, 0.55); -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%); }


/* hero glass card */

/* video placeholder */
.video-dummy-inner.glass { padding: 30px 44px; border-radius: var(--radius); }
.play { background: rgba(255, 255, 255, 0.08); }
.p-video .video, .part .video { border-radius: var(--radius); }

/* thumbnails & cards */
.ph-client.glass, .ph-tag.glass { padding: 7px 13px; border-radius: 999px; box-shadow: var(--glass-hi); }
.ph-tag.glass { opacity: 1; }
.card .card-media { display: block; border-radius: var(--radius); }
.card-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 45%, transparent 60%);
  transform: translateX(-100%); transition: transform 1.1s var(--ease-out);
}
.card:hover .card-media::before { transform: translateX(100%); }

.tag { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* work filter bar */
.filter-bar { background: none; padding-top: 84px; }
.filters, .view-toggle {
  padding: 5px; gap: 4px; border-radius: 26px; background: var(--glass-tint); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.filter, .view-toggle button { border-color: transparent; }
.filter:hover { border-color: transparent; background: rgba(255, 255, 255, 0.08); }
.filter.is-active { border-color: transparent; }

/* project detail */
.p-meta { margin: 0 var(--gutter); padding: 32px; border-radius: var(--radius); }
.p-credits { background: none; border: 0; gap: 16px; padding: 48px var(--gutter); }
.p-credits > div { padding: 32px; border-radius: var(--radius); }

/* about */
.cap-grid { background: none; border: 0; gap: 12px; }
.cap { border-radius: var(--radius); transition: background .5s var(--ease), transform .6s var(--ease-out); }
.cap:hover { background: rgba(1, 0, 249, 0.55); transform: translateY(-4px); }
.info-list { padding: 4px 28px; border-radius: var(--radius); }
.info-row:last-child { border-bottom: 0; }


/* ==========================================================================
   SELECTED PROJECTS — 한 작품씩 화면 가득 확장되는 쇼케이스
   ========================================================================== */
.showcase { padding-top: clamp(40px, 6vw, 80px); }
.sc-item { --p: 0; position: relative; height: 200vh; }
.sc-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.sc-card {
  position: relative; display: block; overflow: hidden;
  width: calc(36vw + 64vw * var(--p));
  height: calc(22.5vw + (100vh - 22.5vw) * var(--p));
  border-radius: calc(var(--radius) * (1 - var(--p)));
}
.sc-card .ph { height: 100%; aspect-ratio: auto; }
.sc-card .ph-no, .sc-card .ph-tag, .sc-card .ph-client { opacity: calc(1 - var(--p) * 2); }
.sc-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7)); opacity: var(--p);
}
.sc-side { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: calc(1 - var(--p) * 2.5); }
.sc-side--l { left: var(--gutter); font-size: clamp(28px, 5vw, 88px); font-weight: 700; letter-spacing: -.03em; }
.sc-side--r { right: var(--gutter); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.sc-label {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(32px, 7vh, 72px); pointer-events: none;
  opacity: calc((var(--p) - .55) * 3); transform: translateY(calc((1 - var(--p)) * 60px));
}
.sc-title { max-width: 16ch; font-size: clamp(32px, 5.4vw, 104px); font-weight: 700; letter-spacing: -.045em; line-height: .95; }
.sc-meta { display: flex; align-items: center; gap: 24px; margin-top: 24px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.sc-link {
  pointer-events: auto; margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--glass-border); box-shadow: var(--glass-hi);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: background .3s;
}
.sc-link:hover { background: var(--blue); }
.sc-count { position: absolute; top: 96px; right: var(--gutter); opacity: calc(var(--p) * 2); }
@media (max-width: 760px) {
  .sc-item { height: 170vh; }
  .sc-card { width: calc(84vw + 16vw * var(--p)); height: calc(52vw + (100vh - 52vw) * var(--p)); }
  .sc-side { display: none; }
  .sc-meta { flex-wrap: wrap; }
}

/* ==========================================================================
   CONTACT — 첫 화면 슬로건과 같은 인터랙션 (--b: 등장 진행도, JS가 스크롤로 설정)
   ========================================================================== */
.slogan-f {
  --b: 0; display: flex; flex-direction: column; white-space: nowrap; color: var(--ink);
  font-size: clamp(48px, 11vw, 200px); font-weight: 300; letter-spacing: -.04em; line-height: .96;
}
.slogan-f .slash { --bw: .2em; width: .5em; margin: 0 -.12em 0 -.1em; }
.slogan-f .slash::before, .slogan-f .slash::after { height: 1.3em; margin-top: -.62em; }

/* ==========================================================================
   SLASH — 사이트 전체 공통 블루 슬래시 (로고 GIF의 회전 바와 동일한 형태)
   두꺼운 바를 기울여서 "/" 로 사용. 아래쪽 끝은 모션 블러처럼 번짐.
   글리프 "/" 는 투명하게 남겨 텍스트 복사·접근성 유지
   --bw: 두께 / --rot: 기울기
   ========================================================================== */
:root { --slash-rot: 20deg; }
.slash {
  --bw: .2em; --rot: var(--slash-rot);
  position: relative; z-index: 5; display: inline-block; width: .52em; height: 1em;
  color: transparent; vertical-align: baseline; font-style: normal;
}
.slash::before, .slash::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: var(--bw); height: 1.4em;
  margin: -.7em 0 0 calc(var(--bw) / -2); background: var(--blue);
  transform: rotate(var(--rot)); transition: transform .55s var(--ease), background-color .3s;
}
/* 슬래시 전체에 블러: 본체(살짝 블러) + 넓게 번지는 글로우. 글자보다 항상 위 */
.slash::before { filter: blur(.022em); }
.slash::after { filter: blur(.1em); opacity: .55; }

/* 링크 hover: 슬래시가 더 눕는다 */
a:hover > .slash, a:hover .slash { --rot: 34deg; }
.cat-row:hover .slash::before, .cat-row:hover .slash::after,
.next:hover .slash::before, .next:hover .slash::after { background: var(--white); }

/* 크기별 굵기 */
.hero-title .slash, .section-title .slash, .page-title .slash, .ph-no .slash, .sc-side .slash, .part-no .slash,
.footer-cta .slash, .cat-row .slash, .slogan .slash { --bw: .17em; }
.mono-label .slash, h3 .slash, h4 .slash, .p-eyebrow .slash, .eyebrow .slash, .sc-count .slash, .deliverable .slash { --bw: .26em; width: .6em; margin: 0 .12em; }
.ph-no .slash { margin-right: .06em; }
.part-no { color: var(--white); }
.deliverable span { color: var(--white); }

/* 태그 앞 슬래시 */
.tag::before {
  content: ""; display: inline-block; width: 3px; height: 1.25em; margin-right: 9px; vertical-align: -.26em;
  background: var(--blue); transform: rotate(var(--slash-rot)); transition: transform .4s var(--ease);
}
.tag:hover::before { background: var(--white); transform: rotate(34deg); }
.tag.is-current::before { background: var(--blue); }
.archive-head .page-title { margin: .22em 0 .3em; }

/* ==========================================================================
   LOGO LOCKUP — GIF 모션 재현
   0) 수직 바  JUN/YEONG ▌ PARK
   1) .is-slash: 바가 회전하며 "/" 로 눕고, 글자 뒤로 겹침 + 아래쪽 모션 블러
   2) 오른쪽 문단이 블러에서 선명하게 떠오름
   ========================================================================== */
.lockup {
  --r: 0deg; --s: 0;
  position: relative; display: inline-grid; grid-template-columns: auto auto auto; column-gap: .1em;
  font-weight: 700; letter-spacing: -.045em; line-height: .78; white-space: nowrap; text-transform: uppercase;
}
.lk-left { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; row-gap: .08em; align-self: start;
  transform: translateX(calc(var(--s) * .07em)); transition: transform 1s var(--ease); }
.lk-right { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between;
  transform: translateX(calc(var(--s) * -.05em)); transition: transform 1s var(--ease); }
.lk-w { display: block; }
.lk-bar { position: relative; z-index: 6; width: .3em; height: 2.55em; }
.lk-bar i {
  position: absolute; inset: 0; background: var(--blue); transform-origin: 50% 50%;
  transform: rotate(var(--r)) scaleY(calc(1 + var(--s) * .1));
  transition: transform 1s var(--ease), filter 1s;
}
/* 바 전체 블러(본체 + 넓은 글로우). 바는 글자(z:2)보다 항상 위(z:6) */
.lk-bar i:nth-child(1) { filter: blur(.02em); }
.lk-bar i:nth-child(2) { filter: blur(.09em); opacity: .55; }
@keyframes lk-pulse { from { filter: blur(.02em); } 35% { filter: blur(.12em); } to { filter: blur(.02em); } }
.lockup.pulse .lk-bar i:nth-child(1) { animation: lk-pulse 1s var(--ease); }

.lockup.is-slash { --r: 20deg; --s: 1; }
.lockup.no-tr, .lockup.no-tr * { transition: none !important; }


.lockup--mini { font-size: 13px; }
.lockup--mini .lk-bar i { transition-duration: .55s; }
.lockup--mini, .lockup--mini * { cursor: pointer; }
.lockup--pre { font-size: clamp(22px, 2.6vw, 40px); }
.lockup--about { font-size: clamp(56px, 9vw, 170px); }
.about-ko-name { margin-top: 28px; font-size: clamp(20px, 2vw, 32px); font-weight: 600; }
.header .logo { justify-self: start; }

/* ==========================================================================
   HERO — 로고 → 스크롤하면 키 슬로건이 블러에서 겹쳐 등장
   --a: 로고가 물러나는 정도 / --b: 슬로건 등장 정도 (JS가 스크롤로 설정)
   ========================================================================== */
.hero { --a: 0; --b: 0; position: relative; height: 230vh; }
.hero-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; padding: 0 var(--gutter); }
.hero-glow { opacity: calc(.8 - var(--b) * .5); }
.lockup--hero {
  font-size: clamp(56px, 10.5vw, 200px);
  filter: blur(calc(var(--a) * 26px)); opacity: calc(1 - var(--a) * .92); transform: scale(calc(1 - var(--a) * .1));
}

/* 슬로건: 전부 흰색, 슬래시만 블루 */
.slogan {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); pointer-events: none;
  display: flex; flex-direction: column; white-space: nowrap; color: var(--white);
  font-size: clamp(44px, 9vw, 168px); font-weight: 300; letter-spacing: -.04em; line-height: .96;
}
.sl-line {
  --l: clamp(0, calc(var(--b) * 1.7 - var(--i) * .35), 1);
  display: block; opacity: var(--l); filter: blur(calc((1 - var(--l)) * 28px));
  transform: translateX(calc((1 - var(--l)) * (var(--i) - 1) * -1.2em));
}
.sl-blue { font-weight: 700; padding-left: .45em; }
.slogan .slash { margin-right: .02em; }
.hero-bottom {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; margin: 0;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; opacity: calc(1 - var(--a) * 1.6);
}
@media (max-width: 760px) { .lockup--hero { font-size: 14vw; } .slogan { font-size: 12.5vw; } .lk-note-wrap { display: none; } }

/* 보정: PARK는 항상 아래 정렬 (문단이 없을 때도), 슬래시가 글자와 겹치도록 이동량 확대 */
.lk-right .lk-w { margin-top: auto; }
.lk-left { transform: translateX(calc(var(--s) * .17em)); }
.lk-right { transform: translateX(calc(var(--s) * -.17em)); }
.slogan .slash::before, .slogan .slash::after { height: 1.08em; margin-top: -.54em; }
.slogan .slash { width: .46em; }
.slogan .slash { --bw: .2em; width: .5em; }
.slogan .slash::before, .slogan .slash::after { height: 1.3em; margin-top: -.62em; }

/* ==========================================================================
   보정 — 겹침 / 히어로 하단 레이아웃
   ========================================================================== */
/* 큰 슬래시는 양옆 글자와 겹치도록 (슬래시는 z-index로 항상 위) */
.section-title .slash, .page-title .slash, .cat-row .slash, .sc-side .slash, .footer-cta .slash { margin: 0 -.12em; }
.slogan .slash { margin: 0 -.12em 0 -.1em; }
.sl-blue { padding-left: .5em; }

/* 히어로 하단: 좌 직책 / 중앙 스크롤 / 우 소개 문단 (블러에서 선명하게) */
.hero-bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px;
}
.hero-bottom .hero-role { justify-self: start; }
.hero-bottom .scroll-cue { justify-self: center; }
@media (max-width: 860px) {
  .hero-bottom { grid-template-columns: 1fr auto; }
  .hero-note { display: none; }
}

/* 로고 반응 영역: 글자 단어만. 로고 박스·바·빈 공간은 마우스 이벤트를 받지 않음 */
.lockup--hero, .lockup--about, .lockup--pre { pointer-events: none; }
.lockup--hero .lk-w, .lockup--about .lk-w, .lockup--hero .lk-bar, .lockup--about .lk-bar { pointer-events: auto; cursor: default; }
.lockup--hero .lk-bar i, .lockup--about .lk-bar i { pointer-events: none; }

/* 로고 자석: 개별 translate 속성 사용 → 슬래시 모션(transform)과 충돌 없음 */
.lk-w, .lk-bar { translate: var(--px, 0px) var(--py, 0px); will-change: translate; }

/* 철자 단위 자석/회전 (translate·rotate 개별 속성 → 슬래시 모션 transform과 충돌 없음) */
.lk-w { translate: none; will-change: auto; }
.lk-c { display: inline-block; }

/* 문단: PARK 바로 위, PARK 왼쪽 끝 기준.
   기본은 슬래시 뒤에 숨어 있다가, 로고에 마우스를 올리면 슬래시 뒤에서 슬라이드인해 자리에 고정.
   빼면 다시 슬래시 뒤로 숨음. 슬래시(z:6)가 문단보다 항상 위 */
.lk-right { justify-content: flex-end; }
.lk-right .lk-w { margin-top: 0; }
.lk-note-wrap { align-self: flex-start; width: 100%; margin: 0 0 .1em; clip-path: inset(-.4em -80% -.4em 0); } /* 왼쪽 가장자리에서만 잘림 */
.lk-note.hero-note {
  display: block; font-size: clamp(11px, .095em, 16px); font-weight: 400; line-height: 1.7; letter-spacing: 0; text-transform: none;
  text-align: left; white-space: nowrap; color: rgba(255, 255, 255, .88);
  transform: translateX(calc(-100% - 1.5em));
  transition: transform .8s cubic-bezier(.55, 0, .35, 1);
}
/* 오버 즉시 출발. 부드럽게 가속해 천천히 자리에 안착 (지연 없음) */
.lockup.is-slash .lk-note.hero-note { transform: translateX(3.2em); transition: transform 1.5s cubic-bezier(.32, .08, .18, 1); }
@media (max-width: 860px) { .lk-note-wrap { display: none !important; } }

/* 반응 영역에 가운데 슬래시(바)도 포함 */
.lockup--hero .lk-bar i, .lockup--about .lk-bar i { pointer-events: auto; }

/* ==========================================================================
   HERO → ABOUT 전환: 슬래시 각도(20°) 사선으로 화이트가 오른쪽에서 쓸고 들어옴
   --c: 0 → 1 (JS가 스크롤로 설정). 덮인 영역의 슬로건은 잉크색 복제본이 보임
   ========================================================================== */
.hero { --c: 0; height: 320vh; }
.hero-wash {
  --x: calc(105% + 37vh - var(--c) * (105% + 37vh));   /* 와이프 경계의 위쪽 x */
  position: absolute; inset: 0; z-index: 4; background: var(--paper); pointer-events: none;
  clip-path: polygon(var(--x) 0, 100% 0, 100% 100%, calc(var(--x) - 37vh) 100%);
}
.slogan--ink { color: var(--ink); }
.hero-wipe-edge {
  position: absolute; z-index: 5; top: -10vh; height: 120vh; width: max(18px, 1.6vw); pointer-events: none;
  left: calc(105% + 37vh - var(--c) * (105% + 37vh) - 18.5vh);
  transform: translateX(-50%) rotate(var(--slash-rot)); background: var(--blue); filter: blur(3px);
  box-shadow: 0 0 40px 6px rgba(1, 0, 249, .45);
  opacity: min(calc(var(--c) * 30), calc((1 - var(--c)) * 30));  /* 전환 중에만 보임 */
}
.hero-bottom { z-index: 3; }

/* 앵커 즉시 이동 시: 페이지 전환 와이프·등장 애니메이션 없이 바로 표시 */
html.instant .page-wipe { animation: none; }
html.instant [data-reveal], html.instant .split .c, html.instant .line-grow { transition: none !important; }

/* 메인: 배경 순수 검정, 고정 블루 빛 제거. 그라데이션은 마우스 빛만 */
body[data-page="home"] .ambient { display: none; }
.hero-glow { transition: opacity .7s var(--ease); }
.hero-glow:not(.is-on) { opacity: 0; }

/* 마우스 빛: 더 크고 넓게 번지는 그라데이션 */
.hero-glow {
  width: 120vw; height: 120vw; filter: blur(70px);
  background: radial-gradient(circle,
    rgba(1, 0, 249, .62) 0%, rgba(1, 0, 249, .42) 14%, rgba(1, 0, 249, .24) 30%,
    rgba(1, 0, 249, .11) 46%, rgba(1, 0, 249, .04) 60%, rgba(1, 0, 249, 0) 72%);
}

/* ==========================================================================
   CAPABILITIES — 공중에 떠 있는 유리 조각
   ========================================================================== */
.cap-grid { perspective: 1100px; }
.cap {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; overflow: hidden;
  animation: cap-float 6s ease-in-out infinite;
}
.cap:nth-child(2) { animation-duration: 7s; animation-delay: -2.1s; }
.cap:nth-child(3) { animation-duration: 6.5s; animation-delay: -4.3s; }
.cap:nth-child(4) { animation-duration: 7.4s; animation-delay: -1.2s; }
.cap:nth-child(5) { animation-duration: 6.2s; animation-delay: -3.6s; }
.cap:nth-child(6) { animation-duration: 7.8s; animation-delay: -5.4s; }
@keyframes cap-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* 등장 후: 마우스 기울기 + 살짝 앞으로 떠오름 */
.cap.is-in {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform .6s var(--ease-out), opacity 1s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease);
}
.cap.is-in.is-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(30px) scale(1.02);
  transition: transform .18s ease-out, opacity 1s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: var(--glass-hi), 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 60px -20px rgba(1, 0, 249, .6);
}
/* 유리 표면 빛 반사 */
.cap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  opacity: 0; transition: opacity .4s;
}
.cap.is-tilt::after { opacity: 1; }
.cap > * { position: relative; z-index: 1; }

/* ==========================================================================
   ABOUT PROFILE — 한국어 메인 / 영어 보조. 휠 스크롤에 따라 어절이 밝아짐
   ========================================================================== */
.profile-ko {
  font-size: clamp(22px, 2.3vw, 36px); font-weight: 600; line-height: 1.6; letter-spacing: -.025em;
  color: var(--white); max-width: 30em;
}
.profile-ko .wd { opacity: .14; transition: opacity .35s linear; }
.profile-ko .wd.on { opacity: 1; }
.profile-en {
  margin-top: 32px; max-width: 46em; font-size: clamp(13px, 1vw, 16px); line-height: 1.7;
  color: rgba(255, 255, 255, .55); --d: .1s;
}

/* Capabilities 강화: 더 큰 부유감 + 강한 기울기/떠오름 + 내용물 시차 */
.cap-grid { perspective: 900px; }
@keyframes cap-float {
  0%, 100% { translate: 0 0; rotate: -0.8deg; }
  50% { translate: 0 -18px; rotate: 0.8deg; }
}
.cap.is-in { transition: transform .55s var(--ease-out), opacity 1s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease); }
.cap.is-in.is-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(80px) scale(1.06);
  transition: transform .14s ease-out, opacity 1s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease);
  box-shadow: var(--glass-hi), 0 60px 110px -30px rgba(0, 0, 0, .85), 0 0 90px -10px rgba(1, 0, 249, .75);
  border-color: rgba(255, 255, 255, .38); z-index: 2;
}
.cap::after { background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 35%, rgba(255, 255, 255, 0) 60%); }
.cap > * { translate: var(--cx, 0px) var(--cy, 0px); transition: translate .2s ease-out; }

/* Capabilities: 둥실둥실은 위아래 이동만(평면 회전 제거), 마우스 기울기는 Y축 회전만.
   카드마다 원근(perspective)을 줘서 문처럼 돌아가는 3D 느낌 */
@keyframes cap-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }
.cap.is-in { transform: perspective(700px) rotateY(var(--ry)); }
.cap.is-in.is-tilt { transform: perspective(700px) rotateY(var(--ry)) translateZ(60px); }

/* Capabilities 최종: 둥실둥실 제거. 마우스 따라 Y축 기울기만 + 오버한 카드만 Z축으로 크게 튀어나옴(옆 카드 덮어도 됨) */
.cap, .cap:nth-child(n) { animation: none; translate: none; rotate: none; }
.cap-grid { overflow: visible; }
.cap.is-in.is-tilt {
  transform: perspective(700px) rotateY(var(--ry)) translateZ(150px) scale(1.12);
  z-index: 10;
}
.cap.is-in.is-tilt { transform: perspective(700px) rotateY(var(--ry)) translateZ(95px) scale(1.04); }
/* 튀어나옴 1/3로 축소 */
.cap.is-in.is-tilt { transform: perspective(700px) rotateY(var(--ry)) translateZ(32px) scale(1.013); }

/* Software & Tools 태그: 카드와 같은 Y축 틸트. 크기가 작으니 원근은 강하게, 튀어나옴은 작게 */
.tilt-tags .tag {
  --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; overflow: hidden;
  transform: perspective(260px) rotateY(var(--ry));
  transition: transform .5s var(--ease-out), background .3s, border-color .3s, color .3s;
}
.tilt-tags .tag.is-tilt {
  transform: perspective(260px) rotateY(var(--ry)) translateZ(10px) scale(1.02);
  transition: transform .14s ease-out, background .3s, border-color .3s, color .3s;
  z-index: 10; border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(1, 0, 249, .7);
}
.tilt-tags .tag::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%);
  opacity: 0; transition: opacity .3s;
}
.tilt-tags .tag.is-tilt::after { opacity: 1; }

/* ==========================================================================
   ABOUT CONTACT — 휠에 따라 한 줄씩 펼쳐지는 유리 패널
   --l: 각 줄의 펼침 정도 (JS가 스크롤로 설정, 첫 줄 NAME은 항상 1)
   ========================================================================== */
.contact-unfold { min-height: 200vh; align-items: start; }
.contact-unfold > h3, .contact-unfold > .info-list { position: sticky; top: 120px; }
.contact-unfold .info-row {
  --l: 0; position: relative; overflow: hidden;
  padding-top: calc(var(--l) * 22px); padding-bottom: calc(var(--l) * 22px);
  max-height: calc(var(--l) * 120px);
  border-bottom-color: rgba(255, 255, 255, calc(var(--l) * .14));
}
.contact-unfold .info-row > * {
  opacity: var(--l); filter: blur(calc((1 - var(--l)) * 10px));
  transform: translateY(calc((1 - var(--l)) * -14px)) scale(calc(.97 + var(--l) * .03));
}
/* 줄이 끼워질 때 유리 표면을 스치는 빛 */
.contact-unfold .info-row::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .22) 45%, transparent 70%);
  transform: translateX(calc(-100% + var(--l) * 200%));
  opacity: calc(var(--l) * (1 - var(--l)) * 4);
}
.contact-unfold .info-row:first-child::before { display: none; }
@media (max-width: 860px) { .contact-unfold > h3 { position: static; } }

/* About 문장 속 단어 → 관련 아카이브 링크. 밑줄 없이 hover 시 색만 포인트 컬러 */
.words a.wlink { transition: color .3s; }
.words a.wlink:hover { color: var(--blue); }

/* 푸터: 직접 만든 사이트임을 담백하게 */
.made-by { color: var(--grey); }
.made-by .slash { --bw: .26em; width: .6em; margin: 0 .2em; }


/* 클릭 없는 툴 태그 */
span.tag { cursor: default; }

/* ==========================================================================
   HEADER GLASS — 글래스모피즘. 뒤의 배경·글자가 유리를 통해 비치도록 투명도를 높이고
   렌즈 같은 아주 약한 굴절 + 밝은 가장자리 반사를 더함
   (굴절은 Chromium 한정 / 그 외 브라우저는 블러+채도만)
   ========================================================================== */
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .05)),
    rgba(16, 16, 16, .16);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),            /* 윗면 반사 */
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 0 0 22px rgba(255, 255, 255, .05),            /* 유리 두께감 */
    0 14px 40px -14px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
  backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
  transition: transform .6s var(--ease), background .5s var(--ease), border-color .5s, color .4s, box-shadow .5s;
}
html.glass-refract .header {
  -webkit-backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
  backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
}
/* 유리 기둥의 곡면 음영: 위 하이라이트 → 투명한 코어 → 아래 반사광 */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .10) 24%, transparent 36%, transparent 66%, rgba(255, 255, 255, .05) 74%, transparent 84%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .09) 16%, rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, .10) 60%, rgba(255, 255, 255, .05) 84%, rgba(255, 255, 255, .20) 100%);
}
/* 두꺼운 가장자리: 양끝이 둥글게 말려 들어가는 림 라이트 + 안쪽 두께 */
.header::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 7px 9px -5px rgba(255, 255, 255, .55),
    inset 0 -9px 12px -6px rgba(255, 255, 255, .30),
    inset 14px 0 16px -12px rgba(255, 255, 255, .40),
    inset -14px 0 16px -12px rgba(255, 255, 255, .40),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.header .nav > .nav-item > a, .header-center, .header .logo { position: relative; z-index: 2; }

/* 밝은 배경 위: 밝은 유리 + 검정 글씨 (뒤 글자는 계속 비침) */
.header.on-light {
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .22)),
    rgba(255, 255, 255, .10);
  border-color: rgba(10, 10, 10, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 22px rgba(255, 255, 255, .35), 0 14px 40px -18px rgba(0, 0, 0, .25);
}
.header.on-light::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .2) 18%, rgba(255, 255, 255, 0) 36%, rgba(0, 0, 0, .06) 62%, rgba(255, 255, 255, .15) 86%, rgba(255, 255, 255, .5) 100%);
}
.header.on-light::after { box-shadow: inset 0 7px 9px -5px rgba(255, 255, 255, .95), inset 0 -9px 12px -6px rgba(255, 255, 255, .6), inset 14px 0 16px -12px rgba(255, 255, 255, .7), inset -14px 0 16px -12px rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(10, 10, 10, .06); }
.header.on-light .nav > .nav-item > a:hover { background: rgba(10, 10, 10, .06); }
.header.on-light .nav > .nav-item > a.is-active { background: rgba(10, 10, 10, .10); }
.header.on-light .menu-btn { background: rgba(10, 10, 10, .08); }

/* 클릭 없는 툴 태그 */
span.tag { cursor: default; }

/* 뒤 글자가 일그러져 비쳐도 메뉴 글씨는 또렷하게 */
.header.on-light { background:
  linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .20) 50%, rgba(255, 255, 255, .32)),
  rgba(255, 255, 255, .16); }
.header.on-light .nav > .nav-item > a, .header.on-light .header-center { text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 2px rgba(255, 255, 255, .9); }
.header:not(.on-light) .nav > .nav-item > a, .header:not(.on-light) .header-center { text-shadow: 0 0 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .55); }

/* 슬래시가 줄 끝에 혼자 남지 않도록 뒤 단어와 묶음 */
.nb { white-space: nowrap; }

/* 한글 문장 맨 앞 슬래시: 첫 글자 높이에 맞춰 문장 시작에 */
.statement-ko .slash { margin: 0 .35em 0 0; vertical-align: -.05em; }

/* 로고 스케일 팔로우: 철자 하나하나와 바가 각자 --sc 로 크기 변화 (기본 작게 → 마우스 근접/오버 시 완성 크기) */
[data-lockup="hero"] .lk-c, [data-lockup="hero"] .lk-bar { scale: var(--sc, .5); }
[data-lockup="hero"] .lk-c { transform-origin: 50% 100%; }   /* 바닥선 기준: 줄이 흐트러지지 않게 */
[data-lockup="hero"] .lk-bar { transform-origin: 50% 50%; }
/* 글자가 작아진 만큼 자간도 같이 줄어 간격이 벌어져 보이지 않게 (완성 크기에서는 0) */
[data-lockup="hero"] .lk-c { margin-inline: calc((var(--sc, .5) - 1) * .33em); }

/* ==========================================================================
   HOME 계층 구조 — 대제목(Work / Index, Selected / Projects) > 부제(회색·얇게)
   --sub: 부제 공통 색 (= Index 의 회색)
   ========================================================================== */
:root { --sub: rgba(255, 255, 255, .45); }

/* 대제목 줄: 목록의 첫 행처럼 괘선 + 호버 시 부제 줄과 같은 인터랙션 (블루가 차오름 / 글자 밀림 / 화살표) */
.sh-link {
  --t: 1; position: relative; isolation: isolate; overflow: hidden; align-items: center;
  margin-bottom: 0; padding: clamp(20px, 3vw, 40px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.showcase .sh-link { margin-inline: var(--gutter); }
.sh-link::before {
  content: ""; position: absolute; inset: 0; background: var(--blue); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
.sh-link:hover::before { transform: scaleY(1); }
.sh-link .section-title { transition: transform .6s var(--ease); }
.sh-link:hover .section-title { transform: translateX(24px); }
.sh-link .count { transition: opacity .3s; margin-right: 56px; }
.sh-link:hover .count { opacity: 0; }
.sh-arrow { position: absolute; right: 12px; top: 50%; transform: translate(-40px, -50%) rotate(-45deg); opacity: 0; transition: .6s var(--ease); font-size: 32px; }
.sh-link:hover .sh-arrow { opacity: 1; transform: translate(0, -50%) rotate(0); }

/* 대제목 휠 인터랙션: Work/Selected 는 왼쪽에서, Index/Projects 는 오른쪽에서 블러를 벗고 들어옴 */
.sh-link .st-a, .sh-link .st-b { display: inline-block; will-change: transform, filter; }
.sh-link .st-a { transform: translateX(calc((1 - var(--t)) * -9vw)); filter: blur(calc((1 - var(--t)) * 18px)); opacity: calc(.15 + var(--t) * .85); }
.sh-link .st-b { transform: translateX(calc((1 - var(--t)) * 9vw)); filter: blur(calc((1 - var(--t)) * 18px)); opacity: calc(.15 + var(--t) * .85);
  font-weight: 300; color: var(--sub); transition: color .4s; }
.sh-link:hover .st-b { color: var(--white); }
.sh-link .slash { --rot: calc(var(--slash-rot) * var(--t)); }
.sh-link .slash::before, .sh-link .slash::after { transition: background-color .3s; }
.sh-link:hover .slash::before, .sh-link:hover .slash::after { background: var(--white); }

/* 부제(카테고리명): Index 와 같은 회색 + 대제목보다 얇은 굵기, 슬래시도 회색 */
.cat-row .name { font-weight: 300; color: var(--sub); transition: transform .6s var(--ease), color .4s; }
.cat-row:hover .name { color: var(--white); }
.cat-row .slash::before, .cat-row .slash::after { background: var(--sub); }
.cat-row:hover .slash::before, .cat-row:hover .slash::after { background: var(--white); }

/* Selected Projects: 프로젝트 제목·번호도 같은 부제 스타일 (슬래시 회색, 제목은 얇게) */
.sc-title { font-weight: 300; color: rgba(255, 255, 255, .62); }
.sc-side--l { font-weight: 300; color: var(--sub); }
.sc-item .slash::before, .sc-item .slash::after { background: var(--sub); }
.sc-count { color: var(--sub); }

/* ==========================================================================
   섹션 대제목 최종: 링크 아님. 두 단어 모두 굵은 흰색.
   hover(1회) → 단어들이 슬래시 쪽으로 붙고 슬래시가 세로 → 사선으로 눕는다. 이후 유지
   ========================================================================== */
.sh-link::before, .sh-arrow { display: none; }
.sh-link:hover .section-title { transform: none; }
.sh-link:hover .count { opacity: 1; }
.sh-link .st-b, .sh-link:hover .st-b { font-weight: 700; color: var(--white); }
.sh-link .section-title { cursor: default; }

/* 슬래시: 평소 세로 / 스냅 시 사선 + 블러 펄스. 글자보다 위에 있어 살짝 덮음 */
.sh-link .slash { --rot: 0deg; }
.sh-link.is-snap .slash { --rot: var(--slash-rot); }
.sh-link .slash::before, .sh-link .slash::after { transition: transform 1s var(--ease), background-color .3s; }
.sh-link:hover .slash::before, .sh-link:hover .slash::after { background: var(--blue); }
@keyframes sh-pulse { 0% { filter: blur(.022em); } 35% { filter: blur(.14em); } 100% { filter: blur(.022em); } }
.sh-link.is-snap .slash::before { animation: sh-pulse 1s var(--ease); }

/* 단어가 슬래시 쪽으로 붙음 (스크롤 진입 transform 과 별개로 translate 사용) */
.sh-link .st-a, .sh-link .st-b { translate: 0 0; transition: translate 1s var(--ease), color .4s; }
.sh-link.is-snap .st-a { translate: .2em 0; }
.sh-link.is-snap .st-b { translate: -.2em 0; }

/* 행간 유지: 글자는 가운데 기준으로 작아지고, 줄 단위로 --ty 만큼 당김 */
[data-lockup="hero"] .lk-c { transform-origin: 50% 50%; }
[data-lockup="hero"] .lk-w { translate: 0 var(--ty, 0px); }



/* 메인 하단 검정 구간의 마우스 블루 블러 (첫 화면 .hero-glow 와 같은 모양) — 콘텐츠 뒤에 깔림 */
.bg-glow {
  position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none;
  width: 120vw; height: 120vw; border-radius: 50%; filter: blur(70px);
  background: radial-gradient(circle,
    rgba(1, 0, 249, .62) 0%, rgba(1, 0, 249, .42) 14%, rgba(1, 0, 249, .24) 30%,
    rgba(1, 0, 249, .11) 46%, rgba(1, 0, 249, .04) 60%, rgba(1, 0, 249, 0) 72%);
  opacity: 0; transition: opacity .7s var(--ease); will-change: transform;
}
.bg-glow.is-on { opacity: 1; }
/* 하단 구간 블러: 첫 화면보다 약하고 반경도 작게 */
.bg-glow { width: 85vw; height: 85vw; filter: blur(60px); }
.bg-glow.is-on { opacity: .6; }

/* 대제목 휠 인터랙션 변경: 좌우 슬라이드·블러 제거 → 철자가 하나씩 위에서 떨어짐 */
.sh-link .st-a, .sh-link .st-b { transform: none; filter: none; opacity: 1; }
.sh-link .dc {
  display: inline-block;
  transform: translateY(calc(var(--f, 0) * -1.1em));
  opacity: calc(1 - var(--f, 0));
  will-change: transform, opacity;
}

/* Work Index 하위 메뉴: 평소엔 작게, 마우스 오버 시 원래 크기로 (왼쪽 기준 확대 + 오른쪽 이동) */
.cat-row .name { display: inline-block; transform-origin: 0 55%; transform: scale(.62); transition: transform .6s var(--ease), color .4s; }
.cat-row:hover .name { transform: translateX(24px) scale(1); }

/* 하위 메뉴: 평소 크기는 덜 줄이고(80%), 오버 시 글자가 다 커진 뒤에 슬래시가 기울어짐 */
.cat-row .name { transform: scale(.8); }
.cat-row:hover .name { transform: translateX(24px) scale(1); }
.cat-row .slash::before, .cat-row .slash::after { transition: transform .5s var(--ease), background-color .3s; }
.cat-row:hover .slash::before, .cat-row:hover .slash::after { transition: transform .55s var(--ease) .5s, background-color .3s; }
/* 슬래시가 조금 더 빨리 따라붙도록: 대기 0.5s → 0.25s, 기울기 0.55s → 0.45s */
.cat-row:hover .slash::before, .cat-row:hover .slash::after { transition: transform .45s var(--ease) .25s, background-color .3s; }

/* 상단 홈 로고 반응 영역 확장: 보이는 위치는 그대로, 주변 여백까지 마우스 반응 */
.header .logo.lockup--mini { padding: 14px 22px; margin: -14px -22px; }
.header .logo.lockup--mini * { pointer-events: none; }

/* Selected Projects: 작품 번호(/01, 썸네일 /01, 01 / 13)의 슬래시는 블루로 통일 */
.sc-item .slash::before, .sc-item .slash::after { background: var(--blue); }
/* 썸네일 안 번호 슬래시: 기존(회색)으로 복귀 */
.sc-item .ph-no .slash::before, .sc-item .ph-no .slash::after { background: var(--sub); }



/* Selected Projects 번호 슬래시 (시간 기반 전환 — 빠른 스크롤에도 끝까지 재생)
   왼쪽 /01: 블루 → 흰색 / 썸네일 /01: 세로·블루 → 사선·흰색. 스크롤을 되돌리면 역재생 */
.sc-item .sc-side .slash::before, .sc-item .sc-side .slash::after,
.sc-item .ph-no .slash::before, .sc-item .ph-no .slash::after {
  background: var(--blue);
  transition: transform .7s var(--ease), background-color .7s var(--ease);
}
.sc-item .ph-no .slash { --rot: 0deg; }
.sc-item.is-go .ph-no .slash { --rot: var(--slash-rot); }
.sc-item.is-go .sc-side .slash::before, .sc-item.is-go .sc-side .slash::after,
.sc-item.is-go .ph-no .slash::before, .sc-item.is-go .ph-no .slash::after { background: var(--white); }

/* 번호들이 사라지는 시점을 늦춰 슬래시 전환이 보일 시간 확보 */
.sc-card .ph-no { opacity: calc(1 - max(0, var(--p) - .25) * 2.6); }
.sc-side { opacity: calc(1 - max(0, var(--p) - .25) * 3); }

/* Work 페이지 제목: "Works" 도 앞의 "Selected" 와 같은 굵기·색 */
.page-title .thin { font-weight: 700; color: var(--white); }

/* Work 페이지 카테고리 필터: 메인 Work Index 하위 메뉴처럼 오버 시 블루가 아래에서 차오르고 글자는 흰색.
   (선택된 항목은 기존처럼 흰 바탕 유지) */
.filter:hover { background: none; color: var(--white); }
.filter:not(.is-active)::before { background: var(--blue); }
.filter:not(.is-active):hover::before { transform: none; }

/* Work 리스트 보기: 작품 줄도 메인 Work Index 하위 메뉴처럼 오버 시 블루가 아래에서 차오름 + 오른쪽으로 살짝 밀림 */
.grid.is-list .card { position: relative; isolation: isolate; padding-inline: 16px; }
.grid.is-list .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue);
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
.grid.is-list .card:hover::before { transform: scaleY(1); }
.grid.is-list .card-info { transition: transform .6s var(--ease); }
.grid.is-list .card:hover .card-info { transform: translateX(24px); }
.grid.is-list .card:hover .card-title, .grid.is-list .card:hover .card-year { color: var(--white); }
.grid.is-list .card:hover .tag { border-color: rgba(255, 255, 255, .45); }
.grid.is-list .card:hover .tag::before { background: var(--white); }

/* 리스트 보기의 작은 썸네일: 라벨 숨기고 번호를 썸네일 크기에 맞게 */
.grid.is-list .ph-client, .grid.is-list .ph-tag { display: none; }
.grid.is-list .ph-no { font-size: 56px; right: 12px; bottom: 4px; }

/* 리스트 줄 블루: 슬래시 각도 사선 패널. 대기는 왼쪽 바깥 → 오버 시 왼쪽에서 오른쪽으로 쓸어 덮음 → 빠질 때 아래로 */
.grid.is-list .card { overflow: hidden; }
.grid.is-list .card::before {
  left: -25%; right: -25%; top: 0; bottom: 0; inset: 0 -25%;
  transform: skewX(-20deg) translateX(-110%); transform-origin: 50% 50%;
  transition: none;
}
.grid.is-list .card:hover::before { transform: skewX(-20deg) translateX(-110%); }
.grid.is-list .card.sw-in::before { transform: skewX(-20deg) translateX(0); transition: transform .65s var(--ease); }
.grid.is-list .card.sw-out::before { transform: skewX(-20deg) translate(0, 101%); transition: transform .6s var(--ease); }
.grid.is-list .card.sw-reset::before { transform: skewX(-20deg) translateX(-110%); transition: none; }
/* 글자 색 전환도 클래스 기준으로 */
.grid.is-list .card:hover .card-info { transform: none; }
.grid.is-list .card.sw-in .card-info { transform: translateX(24px); }
.grid.is-list .card:hover .card-title, .grid.is-list .card:hover .card-year { color: inherit; }
.grid.is-list .card.sw-in .card-title, .grid.is-list .card.sw-in .card-year { color: var(--white); }
/* 블루가 아래로 빠지는 동안에도 태그 슬래시·테두리가 블루에 묻히지 않게 */
.grid.is-list .card.sw-out .tag { border-color: rgba(255, 255, 255, .45); }
.grid.is-list .card.sw-out .tag::before { background: var(--white); }

/* 리스트 줄 블루: 들어올 때 더 천천히 + 부드러운 이즈인, 빠질 때는 위로 올라가며 사라짐 */
.grid.is-list .card.sw-in::before { transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.grid.is-list .card.sw-out::before { transform: skewX(-20deg) translate(0, -101%); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.grid.is-list .card.sw-in .card-info { transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }

/* Work 리스트 줄: 평소엔 내용이 조금 작게(85%), 오버되면 지금 크기로 (왼쪽 기준, 줄 높이는 그대로) */
.grid.is-list .card-info { transform-origin: 0 50%; transform: scale(.85); }
.grid.is-list .card.sw-in .card-info { transform: translateX(24px) scale(1); }
.grid.is-list .card.sw-out .card-info, .grid.is-list .card.sw-reset .card-info { transform: scale(.85); }

/* 추가 프로젝트 줄: 전체가 상세 페이지 링크 + 리스트 줄과 같은 블루 사선 쓸기 / 평소 85% → 오버 시 원래 크기 */
.add-row.sweep { position: relative; isolation: isolate; overflow: hidden; padding-inline: 16px; cursor: pointer; }
.add-row .add-link { position: absolute; inset: 0; z-index: 1; }
.add-row .tags { position: relative; z-index: 2; }
.add-row.sweep::before {
  content: ""; position: absolute; inset: 0 -25%; z-index: -1; background: var(--blue);
  transform: skewX(-20deg) translateX(-110%); transition: none;
}
.add-row.sweep.sw-in::before { transform: skewX(-20deg) translateX(0); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.add-row.sweep.sw-out::before { transform: skewX(-20deg) translate(0, -101%); transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.add-row.sweep.sw-reset::before { transform: skewX(-20deg) translateX(-110%); transition: none; }
.add-row.sweep .client { display: inline-block; transform-origin: 0 50%; transform: scale(.85); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.add-row.sweep.sw-in .client { transform: translateX(24px) scale(1); }
.add-row.sweep.sw-in .tag, .add-row.sweep.sw-out .tag { border-color: rgba(255, 255, 255, .45); }
.add-row.sweep.sw-in .tag::before, .add-row.sweep.sw-out .tag::before { background: var(--white); }

/* 작품명 구분선 ㅣ : 의뢰처와 프로젝트명 사이, 얇고 옅게 */
.sep { font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 200; opacity: .45; margin: 0 .12em; }
.sep { margin: 0 -.12em; }

/* 구분선 ㅣ : 평소엔 아이덴티티 블루, 마우스 오버 시에는 옅은 흰색(블루 배경 위에서도 보이게) */
.sep { color: var(--blue); opacity: 1; font-weight: 300; transition: color .4s, opacity .4s; }
.card:hover .sep, .card.sw-in .sep, .card.sw-out .sep,
.add-row.sw-in .sep, .add-row.sw-out .sep,
.next:hover .sep, .sc-item a:hover .sep { color: currentColor; opacity: .45; font-weight: 200; }
/* 구분선 ㅣ 조금 더 두껍게 (오버 시에도 같은 굵기) */
.sep, .card:hover .sep, .card.sw-in .sep, .card.sw-out .sep,
.add-row.sw-in .sep, .add-row.sw-out .sep, .next:hover .sep, .sc-item a:hover .sep { font-weight: 500; }
/* 오버 시 구분선 ㅣ 색 변화는 맨 마지막에 (블루 쓸기·글자 확대가 거의 끝난 뒤) */
.card:hover .sep, .card.sw-in .sep, .add-row.sw-in .sep, .next:hover .sep, .sc-item a:hover .sep {
  transition: color .4s .85s, opacity .4s .85s;
}
/* 구분선 색 변화: 오버 후 잠깐(0.35s) 있다가 */
.card:hover .sep, .card.sw-in .sep, .add-row.sw-in .sep, .next:hover .sep, .sc-item a:hover .sep {
  transition: color .35s .35s, opacity .35s .35s;
}

/* 스크롤 진행 표시: 상단 가로 → 화면 왼쪽 끝 세로 막대 (위에서 아래로 채워짐) */
.progress { top: 0; left: 0; bottom: 0; width: 3px; height: 100vh; transform-origin: top; transform: scaleY(0); }

/* ==========================================================================
   PROJECT MODULES — Behance 구성 미러링 (단일 컬럼: 영상 / 설명 / 섹션 배너 / 스타일프레임)
   ========================================================================== */
.p-modules { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 120px); }
.mod { margin-inline: auto; width: min(1150px, calc(100% - var(--gutter) * 2)); }
.mod-video { position: relative; overflow: hidden; background: #000; border-radius: 6px; margin-block: 24px; }
.mod-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mod-video.is-loop iframe { pointer-events: none; }
.mod-video.video--dummy { display: grid; place-items: center; }

.mod-text { width: min(820px, calc(100% - var(--gutter) * 2)); margin-block: clamp(32px, 4vw, 56px); }
.mod-text h3 { margin-bottom: 18px; }
.mod-ko { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.85; color: var(--white); }
.mod-en { margin-top: 16px; font-size: clamp(13px, .95vw, 15px); line-height: 1.75; color: rgba(255, 255, 255, .55); }

/* 섹션 배너: Behance 의 흐르는 제목 띠 → 블루 밴드 + 흰 굵은 대문자 + 슬래시 구분 */
.mod-banner {
  width: 100%; overflow: hidden; background: var(--blue); color: var(--white);
  margin-block: clamp(56px, 7vw, 100px) 0; padding: 18px 0; white-space: nowrap;
}
.mod-banner-track { display: inline-flex; align-items: center; animation: mod-marquee 26s linear infinite; }
.mod-banner-track span { font-size: clamp(22px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.02em; padding: 0 .55em; }
.mod-banner .slash { --bw: .2em; font-size: clamp(22px, 2.6vw, 40px); }
.mod-banner .slash::before, .mod-banner .slash::after { background: var(--white); }
@keyframes mod-marquee { to { transform: translateX(-50%); } }

.mod-label { margin-top: clamp(32px, 4vw, 56px); margin-bottom: 14px; }
.mod-images { display: grid; gap: 0; }
.mod-images img { display: block; width: 100%; object-fit: cover; }
.mod-img-ph {
  display: grid; place-items: center; border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: radial-gradient(70% 120% at 30% 50%, rgba(1, 0, 249, .35), transparent 60%), #111;
}
.mod-img-ph span { font-size: 11px; letter-spacing: .16em; color: rgba(255, 255, 255, .35); }

.mod-credits { display: grid; justify-items: end; text-align: right; gap: 20px; margin-block: clamp(56px, 7vw, 100px) 0; }
.mod-credits b { display: block; margin-bottom: 6px; color: var(--white); }
.mod-credits span { font-size: 14px; color: rgba(255, 255, 255, .7); }
@media (max-width: 760px) { .mod-credits { justify-items: start; text-align: left; } }

/* Selected Projects 미리보기 영상: 카드가 꽉 차면 썸네일 위로 페이드인, 5초 진행 바 */
.sc-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); }
.sc-card.is-playing .sc-video { opacity: 1; }
.sc-video { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; left: 50%; top: 50%; inset: auto; transform: translate(-50%, -50%); }
.sc-card::after { z-index: 2; }
.sc-timer { position: absolute; left: 0; bottom: 0; z-index: 3; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; opacity: 0; }
.sc-card.is-playing .sc-timer { opacity: 1; transform: scaleX(1); transition: transform 5s linear, opacity .3s; }
.sc-card.is-paused .sc-timer { opacity: 0; transition: opacity .6s; }
.sc-label { z-index: 4; }

/* Selected Projects 제목: 얇은 굵기에서 글자가 겹치지 않도록 자간을 넓힘 */
.sc-title { letter-spacing: -.005em; line-height: 1.02; }
.sc-title .sep { margin: 0 .2em; }

/* 썸네일 이미지가 있을 때: 이미지 위에 라벨·번호를 얹고, 가독성용 어두운 그라데이션 */
.ph img { z-index: 0; }
.ph.has-img::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55) 100%);
}
.ph-client, .ph-tag, .ph-no { z-index: 2; }

/* 미리보기 영상: 크기는 JS(fit)가 16:9 cover 로 계산, 여기선 가운데 정렬만 */
.sc-card .sc-video { inset: auto; left: 50%; top: 50%; min-width: 0; min-height: 0; transform: translate(-50%, -50%); }
/* 전역 iframe max-width:100% 때문에 cover 크기가 잘리던 문제 */
.sc-card .sc-video { max-width: none; }

/* 상세 페이지 큰 제목: 글자가 서로 겹치거나 단어 상자에 잘리지 않도록 자간 완화 + 좌우 여유 */
.p-client { letter-spacing: -.025em; line-height: .92; }
.p-client.split .w { padding: 0 .06em .08em; margin: 0 -.06em -.08em; }

/* 진행 바도 10초 */
.sc-card.is-playing .sc-timer { transition: transform 10s linear, opacity .3s; }
/* Selected Projects 제목: 영상을 가리지 않게 연도·카테고리 바로 위 한 줄, 기존의 약 1/3 크기 */
.sc-title { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(14px, 1.8vw, 34px); line-height: 1.2; }
.sc-meta { margin-top: 12px; }
/* Selected Projects 한 줄 제목: 조금 더 크고 굵게 */
.sc-title { font-size: clamp(18px, 2.4vw, 44px); font-weight: 500; color: rgba(255, 255, 255, .85); }

/* 미리보기는 시간 제한 없이 반복 재생 → 진행 바 사용 안 함 */
.sc-timer { display: none; }
/* Selected Projects 제목·연도·카테고리·View project: 슬래시가 흰색으로 바뀌기 시작하는 시점(p≈0.03)부터 등장, p≈0.3 에 완성 */
.sc-label {
  --lp: clamp(0, calc((var(--p) - .03) * 3.7), 1);
  opacity: var(--lp);
  transform: translateY(calc((1 - var(--lp)) * 40px));
}
/* 카드가 커지는 도중에도 영상이 보이므로, 카드 모서리 라운드에 맞춰 잘리도록 */
.sc-card { isolation: isolate; }

/* ==========================================================================
   FOOTER — 메일 / 전화 / Back(이전 화면) 버튼
   Back: 슬래시가 오버 시 왼쪽으로 눕으며(← 방향) 블루가 차오름
   ========================================================================== */
.footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 48px; }
.footer-actions .footer-mail { margin-top: 0; }
.footer-tel { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.footer-tel:hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--blue); }
.footer-back {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px;
  margin-left: auto; padding: 18px 30px 18px 26px; border-radius: 999px;
  background: var(--blue); color: var(--white); font-size: clamp(16px, 2vw, 28px); font-weight: 500; cursor: pointer;
}
.footer-back::before {
  content: ""; position: absolute; inset: 0 -20%; z-index: -1; background: var(--ink);
  transform: skewX(-20deg) translateX(-110%); transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
.footer-back:hover::before { transform: skewX(-20deg) translateX(0); }
.fb-slash { position: relative; width: .5em; height: 1.1em; }
.fb-slash::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: .18em; margin-left: -.09em; background: var(--white);
  transform: rotate(var(--slash-rot)); transition: transform .6s var(--ease); filter: blur(.02em);
}
.footer-back:hover .fb-slash::before { transform: rotate(calc(var(--slash-rot) * -1)) translateX(-.08em); }
.fb-sub { font-size: .55em; opacity: .7; font-weight: 400; }
@media (max-width: 760px) { .footer-back { margin-left: 0; } }

/* 순서: 전화번호(검정 채움) → 메일(테두리) */
.footer-tel { background: var(--ink); color: var(--white); box-shadow: none; }
.footer-tel:hover { box-shadow: none; }
.footer-actions .footer-mail:not(.footer-tel) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.footer-actions .footer-mail:not(.footer-tel):hover { color: var(--white); box-shadow: inset 0 0 0 1.5px var(--blue); }

/* 배경은 html 에 두고 body 는 투명하게: body 에 배경이 있으면 그 뒤(z-index:-1)에 깔린
   마우스 블루 블러(.bg-glow)와 배경 빛(.ambient)이 가려짐 */
html { background: var(--black); }
body { background: transparent; }

/* 블루로 덮인 리스트 줄 안의 태그: 마우스 오버 시 흰 배경 + 글자·슬래시 블루 (블루 위에서도 구분되게) */
.grid.is-list .card.sw-in .tag:hover, .add-row.sweep.sw-in .tag:hover {
  background: var(--white); border-color: var(--white); color: var(--blue);
}
.grid.is-list .card.sw-in .tag:hover::before, .add-row.sweep.sw-in .tag:hover::before { background: var(--blue); }

/* 태그 슬래시: 평소엔 거의 수직, 마우스 오버 시 크게 눕힘 (움직임이 확실히 보이도록) */
.tag::before { transform: rotate(4deg); transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), background-color .3s; }
.tag:hover::before { transform: rotate(48deg); }
/* 태그 슬래시: 평소엔 정확히 수직 */
.tag::before { transform: rotate(0deg); }
/* 태그 슬래시 오버 각도: 이전 값(34°)으로 */
.tag:hover::before { transform: rotate(34deg); }
/* 대제목: 마우스 오버 반응 없음 (휠로만 진행) */
.sh-link .section-title { cursor: auto; }

/* View project 클릭 유도: 블루가 차올랐다 빠지며 깜빡이고, 블루 빛이 번지며, 화살표가 오른쪽 위로 톡톡 */
.sc-link { position: relative; isolation: isolate; overflow: hidden; }
.sc-link::before {
  content: ""; position: absolute; inset: 0 -20%; z-index: -1; background: var(--blue);
  transform: skewX(-20deg) translateX(-115%);
}
.sc-item.is-cta .sc-link { animation: cta-glow 1.6s ease-in-out infinite; border-color: rgba(255, 255, 255, .5); }
.sc-item.is-cta .sc-link::before { animation: cta-sweep 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
.sc-item.is-cta .sc-link svg { animation: cta-arrow 1.6s ease-in-out infinite; }
@keyframes cta-sweep {
  0% { transform: skewX(-20deg) translateX(-115%); }
  40%, 60% { transform: skewX(-20deg) translateX(0); }
  100% { transform: skewX(-20deg) translateX(115%); }
}
@keyframes cta-glow {
  0%, 100% { box-shadow: var(--glass-hi), 0 0 0 0 rgba(1, 0, 249, 0); }
  50% { box-shadow: var(--glass-hi), 0 0 0 6px rgba(1, 0, 249, .35), 0 0 34px 6px rgba(1, 0, 249, .55); }
}
@keyframes cta-arrow { 0%, 100% { transform: none; } 50% { transform: translate(3px, -3px); } }

/* View project 마우스 오버: 깜빡임을 멈추고 블루가 사선으로 쓸고 들어와 꽉 채움 + 화살표가 → 로 돌며 전진 + 살짝 커짐 */
.sc-link { transition: transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .4s, border-color .3s, background .3s; }
.sc-link::before { transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.sc-link svg { transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.sc-item .sc-link:hover { background: transparent; transform: scale(1.06); border-color: var(--blue); animation: none;
  box-shadow: var(--glass-hi), 0 0 0 6px rgba(1, 0, 249, .3), 0 0 40px 8px rgba(1, 0, 249, .6); }
.sc-item .sc-link:hover::before { animation: none; transform: skewX(-20deg) translateX(0); }
.sc-item .sc-link:hover svg { animation: none; transform: rotate(45deg) translateX(4px); }

/* Works 필터 바 · 보기 전환 버튼: 상단 메뉴바와 동일한 유리 기둥 질감 */
.filters, .view-toggle {
  position: relative; isolation: isolate;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .05)),
    rgba(16, 16, 16, .16);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -1px 0 rgba(255, 255, 255, .06),
    inset 0 0 22px rgba(255, 255, 255, .05),
    0 14px 40px -14px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
  backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
}
html.glass-refract .filters, html.glass-refract .view-toggle {
  -webkit-backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
  backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
}
.filters::before, .view-toggle::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .10) 24%, transparent 36%, transparent 66%, rgba(255, 255, 255, .05) 74%, transparent 84%),
    linear-gradient(180deg,
      rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .09) 16%, rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, .10) 60%, rgba(255, 255, 255, .05) 84%, rgba(255, 255, 255, .20) 100%);
}
.filters::after, .view-toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 7px 9px -5px rgba(255, 255, 255, .55),
    inset 0 -9px 12px -6px rgba(255, 255, 255, .30),
    inset 14px 0 16px -12px rgba(255, 255, 255, .40),
    inset -14px 0 16px -12px rgba(255, 255, 255, .40),
    inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.filters > *, .view-toggle > * { position: relative; z-index: 1; }
.filters { border-radius: 999px; }
/* 필터 바 · 보기 전환: 흰 테두리·가장자리 빛을 줄임 */
.filters, .view-toggle { border-color: rgba(255, 255, 255, .08); }
.filters::after, .view-toggle::after {
  box-shadow:
    inset 0 6px 8px -6px rgba(255, 255, 255, .28),
    inset 0 -8px 10px -7px rgba(255, 255, 255, .14),
    inset 12px 0 14px -12px rgba(255, 255, 255, .18),
    inset -12px 0 14px -12px rgba(255, 255, 255, .18);
}
/* 선택된 필터에 마우스를 올려도 검정 글씨 유지 (흰 바탕 위 흰 글씨로 사라지던 문제) */
.filter.is-active, .filter.is-active:hover { color: var(--black); }

/* ==========================================================================
   MOBILE (≤ 760px) 레이아웃 보정
   ========================================================================== */
@media (max-width: 760px) {
  /* 상단 메뉴: 모서리 덜 둥글게, 높이 정리 */
  .header { border-radius: 16px; padding: 8px 8px 8px 16px; }
  .menu-btn { border-radius: 10px; }

  /* 필터 바: 여러 줄로 커지지 않게 한 줄 가로 스크롤, 모서리 덜 둥글게 */
  .filter-bar { padding-top: 78px; gap: 8px; }
  .filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    border-radius: 14px; max-width: 100%; padding: 4px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: none; white-space: nowrap; padding: 9px 14px; border-radius: 10px; font-size: 11px; }
  .filter::before { border-radius: 10px; }
  .view-toggle { display: none; }

  /* 카드: 한 열, 제목 크기 정리 */
  .grid { grid-template-columns: 1fr; gap: 44px; padding-top: 16px; }
  .card-client { font-size: 22px; }
  .card-info { grid-template-columns: 1fr; }
  .card-year { grid-row: auto; grid-column: 1; padding-top: 0; }

  /* 리스트 보기: 썸네일 위, 정보 아래 (좁은 화면에서 2열이 깨지던 문제) */
  .grid.is-list .card { grid-template-columns: 1fr; gap: 14px; padding: 18px 12px; }
  .grid.is-list .card-media { order: 0; }
  .grid.is-list .card-client { font-size: 22px; }
  .grid.is-list .card-info { transform: none !important; }

  /* Additional Projects 줄 */
  .add-row { grid-template-columns: 1fr; gap: 10px; padding: 18px 12px; }
  .add-row.sweep .client { transform: none !important; font-size: 16px; }

  /* 상세 페이지 정보 박스 */
  .p-meta { grid-template-columns: 1fr; padding: 22px; }
  .p-client { font-size: 34px; }
}
/* 모바일 필터: 가로 스크롤 대신 여러 줄로 감싸서 모든 항목이 보이게 */
@media (max-width: 760px) {
  .filters { flex-wrap: wrap; overflow: visible; justify-content: flex-start; row-gap: 4px; }
  .filter { padding: 8px 12px; }
}

/* Selected Projects: 제목과 첫 작품 카드 사이 빈 공간 제거.
   첫 작품 영역을 위로 당겨, 처음엔 카드가 제목 바로 아래 보이고, 스크롤하면 제목은 위로 밀려나며 카드가 커짐 */
.showcase .sh-link { position: relative; z-index: 0; }
.showcase .sc-item:first-child { margin-top: calc(-1 * (50vh - 11.25vw) + 48px); }
.sc-item .sc-sticky { z-index: 1; }
@media (max-width: 760px) {
  .showcase .sc-item:first-child { margin-top: calc(-1 * (50vh - 26vw) + 32px); }
}

/* ==========================================================================
   상단 메뉴 오버: 태그와 같은 스타일 — 흰 알약 + 블루 글씨 + 수직 → 34° 로 눕는 블루 슬래시
   ========================================================================== */
.nav > .nav-item > a { position: relative; display: inline-flex; align-items: center; gap: 0; border-radius: 999px;
  transition: background .3s, color .3s, padding .35s cubic-bezier(.34, 1.4, .64, 1); }
.nav > .nav-item > a::before {
  content: ""; display: inline-block; width: 0; height: 1.15em; margin-right: 0; vertical-align: -.2em;
  background: var(--blue); transform: rotate(0deg); opacity: 0;
  transition: width .3s, margin .3s, opacity .2s, transform .45s cubic-bezier(.34, 1.4, .64, 1);
}
.nav > .nav-item > a:hover { background: var(--white); color: var(--blue); }
.nav > .nav-item > a:hover::before { width: 3px; margin-right: 9px; opacity: 1; transform: rotate(34deg); }
.nav > .nav-item > a .roll span + span { display: none; }   /* 글자 롤링 효과는 끄고 태그 스타일로 */
.nav > .nav-item > a:hover .roll span { transform: none; }
.header.on-light .nav > .nav-item > a:hover { background: var(--ink); color: var(--white); }
.header.on-light .nav > .nav-item > a:hover::before { background: var(--white); }

/* 가운데 Creative Video Producer: 링크(About). 오버 시 슬래시가 등장하며 눕고, 글자는 블루로, 아래에 블루 밑줄이 그어짐 */
.hc-link { position: relative; display: inline-flex; align-items: center; gap: 0; padding: 8px 4px; cursor: pointer; transition: color .3s; }
.hc-slash { display: inline-block; width: 0; height: 1.25em; margin-right: 0; background: var(--blue); opacity: 0; transform: rotate(0deg);
  transition: width .3s, margin .3s, opacity .2s, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.hc-text { position: relative; }
.hc-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.hc-link:hover { color: var(--white); }
.hc-link:hover .hc-slash { width: 3px; margin-right: 10px; opacity: 1; transform: rotate(34deg); }
.hc-link:hover .hc-text::after { transform: scaleX(1); }
.header.on-light .hc-link:hover { color: var(--ink); }
.header .nav > .nav-item > a:hover, .header .hc-link:hover { text-shadow: none; }

/* 우측 메뉴: 평소에도 태그처럼 블루 슬래시가 수직으로 서 있고, 오버 시 34°로 눕음 */
.nav > .nav-item > a::before { width: 3px; margin-right: 9px; opacity: 1; transform: rotate(0deg); }
.nav > .nav-item > a:hover::before { transform: rotate(34deg); }

/* 가운데 Creative Video Producer: 블루가 사선으로 쓸고 들어와 배경이 됨 (슬래시·밑줄 대신) */
.hc-slash, .hc-text::after { display: none; }
.hc-link { overflow: hidden; isolation: isolate; padding: 8px 16px; border-radius: 999px; }
.hc-link::before {
  content: ""; position: absolute; inset: 0 -25%; z-index: -1; background: var(--blue);
  transform: skewX(-20deg) translateX(-110%); transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.hc-link:hover::before { transform: skewX(-20deg) translateX(0); }
.hc-link:hover, .header.on-light .hc-link:hover { color: var(--white); }

/* 현재 페이지 메뉴: 오버 상태와 같은 모습으로 고정 (흰 알약 + 블루 글씨 + 누운 슬래시) */
.nav > .nav-item > a.is-active { background: var(--white); color: var(--blue); text-shadow: none; }
.nav > .nav-item > a.is-active::before { transform: rotate(34deg); }
.header.on-light .nav > .nav-item > a.is-active { background: var(--ink); color: var(--white); }
.header.on-light .nav > .nav-item > a.is-active::before { background: var(--white); }
/* 현재 페이지 메뉴: 어두운 글자 그림자(글로우처럼 보임) 제거 — 오버 상태와 완전히 동일하게 */
.header:not(.on-light) .nav > .nav-item > a.is-active, .header .nav > .nav-item > a.is-active { text-shadow: none; }
/* 현재 페이지 메뉴: 배경 없이 흰 테두리 + 흰 글씨 + 누운 블루 슬래시 (오버 상태와 구분) */
.nav > .nav-item > a.is-active { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1.5px var(--white); }
.nav > .nav-item > a.is-active:hover { background: var(--white); color: var(--blue); }
.header.on-light .nav > .nav-item > a.is-active { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.header.on-light .nav > .nav-item > a.is-active::before { background: var(--blue); }
.header.on-light .nav > .nav-item > a.is-active:hover { background: var(--ink); color: var(--white); }
.header.on-light .nav > .nav-item > a.is-active:hover::before { background: var(--white); }
/* 현재 페이지 메뉴: 얇은 테두리 + 은은한 유리 질감 (위쪽 하이라이트, 살짝 비치는 흰 막) */
.nav > .nav-item > a.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -4px 8px -6px rgba(255, 255, 255, .25);
  -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%);
}
.header.on-light .nav > .nav-item > a.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .2) 55%, rgba(255, 255, 255, .35));
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .25), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Contact 전용 페이지: 슬로건 + 연락 버튼만 한 화면에 */
body[data-page="contact"] main { display: none; }
body[data-page="contact"] .footer {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-top: 120px; padding-bottom: 40px;
}
body[data-page="contact"] .footer-cols, body[data-page="contact"] .footer-bottom { display: none; }

/* 현재 페이지 메뉴: 균일한 테두리 대신 유리 가장자리처럼 — 위·아래 선만 밝고 양 끝(모서리)으로 갈수록 사라짐 */
.nav > .nav-item > a.is-active { box-shadow: none; }
.nav > .nav-item > a.is-active::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .7);
  border-left-color: transparent; border-right-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%, #000 72%, transparent 100%);
}
.nav > .nav-item > a.is-active::after { border-bottom-color: rgba(255, 255, 255, .28); }
.header.on-light .nav > .nav-item > a.is-active { box-shadow: none; }
.header.on-light .nav > .nav-item > a.is-active::after { border-top-color: rgba(10, 10, 10, .4); border-bottom-color: rgba(10, 10, 10, .18); }
.nav > .nav-item > a.is-active:hover::after { opacity: 0; }
/* 현재 페이지 메뉴: 테두리를 대각선 방향(좌상단·우하단)에만 — 유리 모서리에 빛이 맺힌 느낌 */
.nav > .nav-item > a.is-active::after {
  border: 1px solid rgba(255, 255, 255, .75);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 40%, transparent 60%, rgba(0, 0, 0, .6) 82%, #000 100%);
  mask-image: linear-gradient(135deg, #000 0%, rgba(0, 0, 0, .6) 18%, transparent 40%, transparent 60%, rgba(0, 0, 0, .6) 82%, #000 100%);
}
.header.on-light .nav > .nav-item > a.is-active::after { border-color: rgba(10, 10, 10, .45); }
.nav > .nav-item > a.is-active::after {
  -webkit-mask-image: radial-gradient(55% 140% at 0% 0%, #000 25%, transparent 75%), radial-gradient(55% 140% at 100% 100%, #000 25%, transparent 75%);
  mask-image: radial-gradient(55% 140% at 0% 0%, #000 25%, transparent 75%), radial-gradient(55% 140% at 100% 100%, #000 25%, transparent 75%);
}
/* 모바일: 가운데 Creative Video Producer 링크 숨김 (링크로 바꾸며 display 가 덮여 메뉴바가 두 줄로 깨지던 문제) */
@media (max-width: 760px) {
  .header .header-center, .header .hc-link { display: none !important; }
}

/* 세로 영상 미리보기: 영상 양옆은 흐리게 확대된 썸네일이 배경 */
.sc-card.is-portrait.is-playing .ph img { filter: blur(28px) brightness(.55); transform: scale(1.15); transition: filter .6s, transform .6s; }
/* 상세 페이지: 세로 영상은 너무 커지지 않게 폭 제한 */
.p-video .video[style*="aspect-ratio:0."], .part .video[style*="aspect-ratio:0."] { max-width: min(440px, 100%); margin-inline: auto; }
/* 리스트 보기 작은 썸네일: 번호를 더 작게, 우측 하단 모서리에 붙여 정렬 */
.grid.is-list .ph-no { font-size: 32px; right: 8px; bottom: 4px; line-height: 1; letter-spacing: -.04em; }
.grid.is-list .ph-no .slash { --bw: .14em; }
/* 썸네일 하단을 어둡게: 번호·카테고리가 잘 보이도록 아래에서 위로 어두운 그라데이션 */
.ph.has-img::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .82) 100%);
}

/* 작품 카드 썸네일: 평소엔 어두운 막을 한 겹 더 덮어 번호가 또렷하게,
   마우스 오버 순간 빛이 사선으로 쓸고 지나가며 막이 걷히고 원래 이미지가 드러남 */
.card .ph.has-img::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .7) 100%);
  transition: opacity .7s var(--ease) .1s;
}
.card:hover .ph.has-img::after, .card.sw-in .ph.has-img::after { opacity: 0; }
/* 빛 쓸기: 더 밝고 넓게, 오버할 때마다 확실히 보이도록 */
.card .card-media::before {
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, .45) 45%, rgba(255, 255, 255, .1) 55%, transparent 70%);
  z-index: 3; transition: transform .9s var(--ease-out);
}
.card.sw-in .card-media::before { transform: translateX(100%); }
/* 원래 이미지 그대로 보이게: 오버 시 블루 색 덧씌움은 이미지 썸네일에선 끔 */
.card:hover .card-media:has(.has-img)::after, .card.sw-in .card-media:has(.has-img)::after { opacity: 0; }

/* 작품 카드 썸네일 색 정리
   평소: 검정 + 포인트 블루가 섞인 그라데이션 막 (위는 깊은 네이비, 아래로 블루 기운 → 하단은 검정)
   오버: 막이 걷히고, 하단 번호 쪽만 옅은 검정 그라데이션 */
.card .ph.has-img::after {
  background:
    radial-gradient(120% 90% at 85% 110%, rgba(1, 0, 249, .45), rgba(1, 0, 249, 0) 60%),
    linear-gradient(180deg, rgba(4, 4, 30, .55) 0%, rgba(1, 0, 120, .45) 45%, rgba(0, 0, 0, .78) 100%);
}
.card .ph.has-img::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25) 75%, rgba(0, 0, 0, .6) 100%);
}

/* 상세 페이지 영상: 한 화면에 전체가 보이도록 높이를 화면 높이(상단 메뉴 제외)로 제한, 가운데 정렬 */
.p-video .video, .part .video, .mod-video {
  --vh-max: calc(100svh - 170px);
  width: min(100%, calc(var(--vh-max) * var(--r, 1.7778)));
  margin-inline: auto;
}
.mod-video { max-width: min(1150px, calc(100% - var(--gutter) * 2)); }

/* 아주 긴 세로 스타일프레임 영상은 스크롤로 보는 용도라 높이 제한 제외 */
.mod-video.is-tall { width: min(1150px, calc(100% - var(--gutter) * 2)); }

/* ==========================================================================
   가운데 Creative Video Producer 오버 (전면 수정)
   1) Creative 와 Video Producer 사이로 수직 블루 막대가 위에서 아래로 내려오며 생김
   2) 막대가 꺾여 눕고, Creative 는 왼쪽·Video Producer 는 오른쪽으로 벌어지며 간격 확보
   ========================================================================== */
.hc-link::before { display: none; }                 /* 이전 사선 블루 배경 제거 */
.hc-link, .hc-link:hover, .header.on-light .hc-link:hover { color: inherit; }
.hc-link { gap: .45em; padding: 8px 4px; overflow: visible; }
.hc-a, .hc-b { display: inline-block; transition: transform .5s cubic-bezier(.34, 1.4, .64, 1) .32s; }
.hc-bar {
  position: relative; display: inline-block; width: 3px; height: 1.35em; background: var(--blue);
  transform-origin: 50% 0; transform: scaleY(0) rotate(0deg);
  transition: transform .3s var(--ease) .32s;   /* 빠질 때: 먼저 세우고 접힘 */
}
.hc-link:hover .hc-bar {
  animation: hc-bar .8s forwards;
}
@keyframes hc-bar {
  0%   { transform: scaleY(0) rotate(0deg); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  40%  { transform: scaleY(1) rotate(0deg); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  100% { transform: scaleY(1) rotate(34deg); }
}
.hc-link:hover .hc-a { transform: translateX(-.55em); }
.hc-link:hover .hc-b { transform: translateX(.55em); }
.hc-link:not(:hover) .hc-a, .hc-link:not(:hover) .hc-b { transition-delay: 0s; }
/* 평소엔 일반 띄어쓰기 간격, 막대는 글자 높이보다 조금 길게 */
.hc-link { gap: .2em; }
.hc-bar { width: 2px; height: 1.9em; margin-block: -.3em; }
.hc-link:hover .hc-a { transform: translateX(-.7em); }
.hc-link:hover .hc-b { transform: translateX(.7em); }
/* 막대: 아래에서 위로 올라오며 생김 */
.hc-bar { transform-origin: 50% 100%; }
/* 단어는 벌어지지 않고, 로고처럼 막대 쪽으로 붙으며 막대가 글자에 살짝 겹침 */
.hc-link { gap: .25em; }
.hc-link:hover .hc-a { transform: translateX(.12em); }
.hc-link:hover .hc-b { transform: translateX(-.12em); }
.hc-bar { position: relative; z-index: 1; }
/* 막대: 굵기 3px(우측 메뉴와 동일), 꺾임 20°, 가운데 기준 회전으로 E·V 양쪽 간격 동일.
   올라오는 효과(아래→위)는 안쪽 막대(::before)가, 꺾임은 바깥 틀이 담당 */
.hc-bar { width: 3px; background: none; transform: none !important; animation: none !important; transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.hc-bar::before {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  transform-origin: 50% 100%; transform: scaleY(0); transition: transform .3s var(--ease) .15s;
}
.hc-link:hover .hc-bar::before { transform: scaleY(1); transition-delay: 0s; }
.hc-link:hover .hc-bar { transform: rotate(20deg) !important; transition-delay: .3s; }
.hc-link:not(:hover) .hc-bar { transition-delay: 0s; }
/* 막대가 올라올 때(0~0.3s) 단어가 순간 벌어졌다가, 꺾이는 타이밍(0.3s~)에 맞춰 다시 막대 쪽으로 붙음 */
.hc-link:hover .hc-a { animation: hc-a .75s forwards; }
.hc-link:hover .hc-b { animation: hc-b .75s forwards; }
@keyframes hc-a {
  0%   { transform: none; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  40%  { transform: translateX(-.45em); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  100% { transform: translateX(.12em); }
}
@keyframes hc-b {
  0%   { transform: none; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  40%  { transform: translateX(.45em); animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
  100% { transform: translateX(-.12em); }
}

.profile-en .slash { --bw: .26em; width: .6em; margin: 0 .15em; }

/* 휠 인터랙션 문장의 슬래시: 처음엔 글자와 같은 회색, 마지막 단어까지 밝아지면 블루로 */
[data-words] .slash::before, [data-words] .slash::after,
[data-words] + .profile-en .slash::before, [data-words] + .profile-en .slash::after { background: currentColor; transition: background-color .6s var(--ease); }
[data-words] .slash { color: rgba(255, 255, 255, .45); }
.statement [data-words] .slash { color: rgba(17, 17, 17, .4); }
[data-words] + .profile-en .slash { color: rgba(255, 255, 255, .55); }
[data-words].is-done .slash::before, [data-words].is-done .slash::after,
[data-words].is-done + .profile-en .slash::before, [data-words].is-done + .profile-en .slash::after { background: var(--blue); }

/* 폰: About Info(연락처) 펼침 인터랙션 끄고 전부 바로 표시
   (한 열 그리드에서는 고정 영역이 칸 높이에 갇혀 목록이 비어 보이던 문제) */
@media (max-width: 760px) {
  .contact-unfold { min-height: 0; }
  .contact-unfold > h3, .contact-unfold > .info-list { position: static; }
  /* (폰 펼침 유지 — 아래 블록에서 처리) */
  .contact-unfold .info-row::before { display: none; }
  .info-row { grid-template-columns: 90px 1fr auto; padding: 16px 0; }
  .info-list { padding: 4px 18px; }
}
@media (max-width: 760px) {
  .about-grid > * { min-width: 0; }
  .info-row dd { font-size: 15px; overflow-wrap: anywhere; }
}

/* 휠 인터랙션 문장 슬래시: 글자(/) 자체는 계속 투명하게 두고 막대 색만 변수로 (흰 잔상 제거) */
[data-words] .slash, [data-words] + .profile-en .slash, .statement .slash { color: transparent; }
[data-words] .slash { --sc: rgba(255, 255, 255, .45); }
.statement [data-words] .slash { --sc: rgba(17, 17, 17, .4); }
[data-words] + .profile-en .slash { --sc: rgba(255, 255, 255, .55); }
[data-words] .slash::before, [data-words] .slash::after,
[data-words] + .profile-en .slash::before, [data-words] + .profile-en .slash::after { background: var(--sc); }
[data-words].is-done .slash::before, [data-words].is-done .slash::after,
[data-words].is-done + .profile-en .slash::before, [data-words].is-done + .profile-en .slash::after { background: var(--blue); }

/* 본문 크기 슬래시 정렬: 글자 높이 가운데에 오도록 내리고, 앞뒤 단어와 같은 간격 */
.profile-en .slash, .statement-ko .slash { vertical-align: -.18em; height: 1em; }
.profile-en .slash::before, .profile-en .slash::after,
.statement-ko .slash::before, .statement-ko .slash::after { height: 1.05em; margin-top: -.525em; }
.profile-en .slash { margin: 0 .05em; }
.statement-ko .slash { margin: 0 .3em 0 0; }

/* 폰에서도 Info 펼침 휠 인터랙션 유지:
   그리드 대신 일반 블록으로 바꿔 고정(sticky) 영역이 섹션 전체 높이를 쓰도록 */
@media (max-width: 760px) {
  .contact-unfold { display: block; min-height: 180vh; }
  .contact-unfold > h3 { position: static; margin-bottom: 20px; }
  .contact-unfold > .info-list { position: sticky; top: 90px; }
  .contact-unfold .info-row { --l: 0; max-height: calc(var(--l) * 120px); }
  .contact-unfold .info-row:first-child { --l: 1; }
  .contact-unfold .info-row::before { display: block; }
}
@media (max-width: 760px) {
  .info-row { grid-template-columns: 82px 1fr auto; gap: 10px; }
  .info-row dt { font-size: 10px; }
  .info-row dd { font-size: 14px; overflow-wrap: normal; }
}
/* 메인 About 문장 슬래시: 숨겨둔 "/" 글자가 회색으로 비쳐 막대와 겹치던 문제 — 글자는 항상 투명 */
.statement [data-words] .slash, .statement .words .slash { color: transparent !important; }
/* 메인 About 한국어 문장 맨 앞 슬래시: 글자 높이 정가운데로, 휠이 끝나기 전엔 글자색(회색) → 끝나면 블루 */
.statement-ko .slash { vertical-align: -.38em; }
.statement-ko .slash::before, .statement-ko .slash::after { background: #555; transition: background-color .6s var(--ease); }
.statement .words.is-done ~ .statement-ko .slash::before, .statement .words.is-done ~ .statement-ko .slash::after { background: var(--blue); }
/* 첫 화면(슬로건)과 About 사이 간격 줄임 */
.statement { padding-top: clamp(40px, 5vw, 80px); }
/* 슬로건 아래 빈 공간까지 About 을 끌어올림 (첫 화면 고정 영역 하단의 여백과 겹치게) */
.statement { position: relative; z-index: 2; margin-top: -20vh; }
/* 슬로건 ~ About 간격 조금 넓힘 */
.statement { margin-top: -12vh; }
/* More / About me: 상단 가운데 문구와 같은 막대 오버 효과 (밝은 배경이라 글자는 검정 유지) */
.statement-head .hc-link { color: var(--ink); }
.statement-head { align-items: center; }
.statement-head .hc-link { padding: 0; }

/* ==========================================================================
   HERO 슬로건 — 슬래시 = 한 번의 터치
   .is-touched: 깨어난 상태 유지 / .is-tap: 터치 한 번의 동작(슬래시 낙하 → 파동 → 글자 깨움)
   .is-again: 마우스 오버·클릭으로 다시 터치할 때 (슬래시가 살짝 들렸다 다시 찍힘)
   ========================================================================== */
/* 터치 전: 슬래시 없음, something · moving. 은 멈춘 채 흐리게 */
.hero:not(.is-touched) .sl-blue .slash { opacity: 0; }
.slogan .ch { display: inline-block; transition: opacity .7s var(--ease-out) calc(.42s + var(--k) * .05s); }
.slogan .ci { display: inline-block; }
.hero:not(.is-touched) .slogan .ch { opacity: .22; transition-delay: 0s; }

/* 1) 터치: 슬래시가 자기 기울기 방향(위 오른쪽)에서 빠르게 내려와 톡 — 닿는 순간 살짝 눌렸다 복원 */
.sl-blue .slash { transform-origin: 50% 100%; }
.hero.is-tap .sl-blue .slash { animation: sl-drop .42s cubic-bezier(.55, 0, 1, .45) both, sl-squash .5s .42s var(--ease-out); }
.hero.is-tap.is-again .sl-blue .slash { animation: sl-retap .42s cubic-bezier(.45, 0, .55, 1) both, sl-squash .5s .42s var(--ease-out); }
@keyframes sl-drop { 0% { translate: .45em -1.2em; opacity: 0; } 35% { opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes sl-retap { 0%, 100% { translate: 0 0; } 45% { translate: .14em -.38em; } }
@keyframes sl-squash { 0% { scale: 1 .84; } 45% { scale: 1 1.04; } 100% { scale: 1 1; } }

/* 2) 파동: 닿은 자리(슬래시 아래 끝)에서 바닥에 퍼지는 타원 물결 두 겹 */
.sl-ripple { position: absolute; left: calc(50% - .2em); top: calc(50% + .56em); width: 0; height: 0; pointer-events: none; }
.sl-ripple::before, .sl-ripple::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3.6em; height: .9em; margin: -.45em 0 0 -1.8em;
  border-radius: 50%; border: .028em solid var(--blue); box-shadow: 0 0 .25em rgba(1, 0, 249, .55), inset 0 0 .2em rgba(1, 0, 249, .35);
  opacity: 0; transform: scale(.05);
}
.hero.is-tap .sl-ripple::before { animation: sl-ring 1.2s .42s var(--ease-out) both; }
.hero.is-tap .sl-ripple::after { animation: sl-ring 1.6s .56s var(--ease-out) both; }
@keyframes sl-ring { 0% { opacity: .95; transform: scale(.05); } 100% { opacity: 0; transform: scale(1); } }

/* 3) 깨움: 파동이 지나가는 순서대로 글자가 톡 튀어 올랐다 자리 잡음 */
.hero.is-tap .slogan .ch { animation: sl-wake .75s calc(.42s + var(--k) * .05s) cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes sl-wake { 0% { transform: none; } 35% { transform: translateY(-.11em) rotate(-4deg); } 100% { transform: none; } }

/* 4) 움직임: moving. 만 계속 숨 쉬듯 아주 미세하게 (글자마다 시차 → 잔잔한 물결) */
.hero.is-touched .sl-mv .ci { animation: sl-breathe 3.4s calc(1.7s + var(--k) * .14s) ease-in-out infinite both; }
@keyframes sl-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.045em; } }

/* 다시 터치 영역: 슬래시 주변을 넉넉하게 */
.sl-hit { position: absolute; inset: -.15em -.25em; }
.hero-sticky > .slogan .sl-hit { pointer-events: auto; cursor: pointer; }

/* 5) 한국어 부연: 슬로건 오른쪽 아래 (About 의 한국어 문장과 같은 구성) — 터치 후 차례로 */
.sl-copy {
  position: absolute; top: 100%; right: 0; margin-top: clamp(28px, 3.4vw, 60px);
  font-size: clamp(14px, 1.05vw, 17px); font-weight: 400; line-height: 1.8; letter-spacing: 0;
  color: rgba(255, 255, 255, .62); white-space: nowrap;
  opacity: clamp(0, calc((var(--b) - .9) * 10), 1);
}
.sl-copy > span {
  display: block; opacity: 0; transform: translateY(14px); filter: blur(8px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.hero.is-touched .sl-copy > span { opacity: 1; transform: none; filter: none; transition-delay: calc(1.5s + var(--j) * .14s); }
.slogan--ink .sl-copy { color: #555; }
.sl-copy .slash { --bw: .26em; width: .6em; height: 1em; margin: 0 .3em 0 0; vertical-align: -.38em; }
.sl-copy .slash::before, .sl-copy .slash::after { height: 1.05em; margin-top: -.525em; }

/* 6) 다음 씬으로: 작은 슬래시가 바닥을 톡톡 두드리는 큐 (클릭하면 About 으로) */
.hero-next {
  position: absolute; left: 50%; bottom: 30px; z-index: 3; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
  opacity: clamp(0, min(calc((var(--b) - .9) * 10), calc(1 - var(--c) * 4)), 1);
  pointer-events: none;
}
.hero-next > span { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.hero.is-touched .hero-next { pointer-events: auto; }
.hero.is-touched .hero-next > span { opacity: 1; transform: none; transition-delay: 2.2s; }
.hn-tap { position: relative; font-size: 30px; line-height: 1; height: 1.3em; display: grid; place-items: end center; }
.hn-tap .slash { --bw: .14em; transform-origin: 50% 100%; animation: hn-tap 2.4s cubic-bezier(.55, 0, 1, .45) infinite; }
.hn-ring { position: absolute; left: 50%; bottom: -.05em; width: 1.6em; height: .4em; margin-left: -.8em; border-radius: 50%; border: 1px solid var(--blue); box-shadow: 0 0 8px rgba(1, 0, 249, .6); animation: hn-ring 2.4s var(--ease-out) infinite; }
@keyframes hn-tap { 0% { translate: .25em -.8em; opacity: 0; } 18% { opacity: 1; } 36% { translate: 0 0; scale: 1 1; } 44% { scale: 1 .82; } 56% { scale: 1 1; } 80% { translate: 0 0; opacity: 1; } 100% { translate: 0 .1em; opacity: 0; } }
@keyframes hn-ring { 0%, 36% { transform: scale(.1); opacity: 0; } 38% { opacity: 1; } 85%, 100% { transform: scale(1.2); opacity: 0; } }
.hero-next:hover { color: var(--white); }

@media (max-width: 760px) {
  .sl-copy { left: 0; right: auto; white-space: normal; width: min(78vw, 360px); font-size: 13px; }
  .hero-next { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.is-tap .sl-blue .slash, .hero.is-tap .slogan .ch, .hero.is-touched .sl-mv .ci, .hn-tap .slash, .hn-ring { animation: none; }
}
/* 슬로건 아래 한국어 부연이 About 에 가려지지 않게: 겹침 없애고, 슬로건+부연 묶음을 화면 가운데로 살짝 올림 */
.statement { margin-top: 0; }
.slogan { transform: translate(-50%, calc(-50% - clamp(40px, 4.5vw, 70px))); }
.sl-copy { margin-top: clamp(36px, 4vw, 72px); }
@media (max-width: 760px) { .slogan { transform: translate(-50%, calc(-50% - 50px)); } }

/* ==========================================================================
   첫 화면 로고 — 막대를 누르면 파동 + 글자 꿀렁 (logoRipple)
   ========================================================================== */
.lockup--hero .lk-bar { cursor: pointer; }
.lockup--hero .lk-bar.is-tap { animation: lk-bar-tap .6s var(--ease-out); }
@keyframes lk-bar-tap { 0% { transform: scale(1.25, .82); } 40% { transform: scale(.92, 1.06); } 100% { transform: none; } }

/* 파동: 막대 자리에서 원형으로 두 겹 퍼지는 블루 링 + 은은한 빛 */
.lk-ripple { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.lk-ripple i {
  position: absolute; left: 0; top: 0; width: var(--rr); height: var(--rr); margin: calc(var(--rr) / -2) 0 0 calc(var(--rr) / -2);
  border-radius: 50%; border: 2px solid rgba(1, 0, 249, .9);
  box-shadow: 0 0 24px rgba(1, 0, 249, .55), inset 0 0 24px rgba(1, 0, 249, .35);
  opacity: 0; transform: scale(.02);
  animation: lk-ring 1.6s cubic-bezier(.2, .7, .3, 1) both;
}
.lk-ripple i:nth-child(2) { animation-delay: .16s; animation-duration: 1.9s; border-width: 1px; }
.lk-ripple i:nth-child(3) {
  border: 0; box-shadow: none; animation: lk-flash 1.2s var(--ease-out) both;
  background: radial-gradient(circle, rgba(1, 0, 249, .45) 0%, rgba(1, 0, 249, .12) 30%, rgba(1, 0, 249, 0) 60%);
}
@keyframes lk-ring { 0% { opacity: 1; transform: scale(.02); } 70% { opacity: .35; } 100% { opacity: 0; transform: scale(1); } }
@keyframes lk-flash { 0% { opacity: 0; transform: scale(.05); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }

/* 글자 꿀렁: 눌렸다(납작) → 늘어났다(길쭉) → 잦아드는 젤리 움직임. 기존 크기(scale) 위에 덧붙는 transform */
.lockup--hero .lk-c.is-jelly { animation: lk-jelly .9s var(--wd, 0s) cubic-bezier(.3, .7, .4, 1) both; }
@keyframes lk-jelly {
  0% { transform: none; }
  18% { transform: translateY(.04em) scale(1.18, .8); }
  38% { transform: translateY(-.1em) scale(.88, 1.14) rotate(-3deg); }
  58% { transform: translateY(.02em) scale(1.07, .94) rotate(1.5deg); }
  78% { transform: scale(.98, 1.03); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lockup--hero .lk-c.is-jelly { animation: none; } .lk-ripple { display: none; } }

/* About 로고(Hello, I'm)도 막대를 누르면 파동 + 글자 꿀렁 — 메인과 같은 효과. 파동이 섹션 밖으로 넘치지 않게 */
.about-hero { position: relative; overflow: hidden; }
.lockup--about .lk-bar { cursor: pointer; }
.lockup--about .lk-bar.is-tap { animation: lk-bar-tap .6s var(--ease-out); }
.lockup--about .lk-c.is-jelly { animation: lk-jelly .9s var(--wd, 0s) cubic-bezier(.3, .7, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .lockup--about .lk-c.is-jelly { animation: none; } }
/* About 로고 주변 문구 글자도 파동에 반응 */
.about-hero .rp-c { display: inline-block; }
.about-hero .rp-c.is-jelly { animation: lk-jelly .9s var(--wd, 0s) cubic-bezier(.3, .7, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .about-hero .rp-c.is-jelly { animation: none; } }
/* About 상단: 박준영 ↔ 직함 간격 좁힘, 직함은 휠과 무관하게 2초 뒤 자동 등장 */
.about-role { margin-top: 8px; opacity: 0; transform: translateY(16px); filter: blur(8px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
.about-role.is-in { opacity: 1; transform: none; filter: none; }

/* ==========================================================================
   CONTACT 영역 — 도넛 파동 캔버스(donutWave) 위에 내용
   ========================================================================== */
.dw-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer > :not(.dw-canvas) { position: relative; z-index: 1; }
.footer { cursor: pointer; }
body[data-page="contact"] .footer a, body[data-page="contact"] .footer button { cursor: pointer; }
.slogan-f .rp-c { display: inline-block; }
.slogan-f .rp-c.is-jelly { animation: lk-jelly .9s var(--wd, 0s) cubic-bezier(.3, .7, .4, 1) both; }
@media (prefers-reduced-motion: reduce) { .slogan-f .rp-c.is-jelly { animation: none; } }

/* ==========================================================================
   HEADER GLASS 톤다운 — 흰색(바탕·반사·림)을 줄여 더 투명한 유리로.
   굴절·블러(유리 질감)는 이전 그대로, 메뉴 글씨는 글자 그림자로 또렷하게
   ========================================================================== */
.header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .03)),
    rgba(18, 18, 20, .20);
  border-color: rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 18px rgba(255, 255, 255, .03),
    0 14px 40px -16px rgba(0, 0, 0, .5);
}
/* 굴절(렌즈) 표현은 이전 그대로 유지 — 블러를 키우면 유리가 아니라 뿌연 막처럼 보임 */
.header::before {
  background:
    linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .05) 24%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .08) 100%);
}
.header::after {
  box-shadow:
    inset 0 6px 8px -6px rgba(255, 255, 255, .28),
    inset 0 -8px 10px -8px rgba(255, 255, 255, .14),
    inset 12px 0 14px -12px rgba(255, 255, 255, .18),
    inset -12px 0 14px -12px rgba(255, 255, 255, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* 밝은 배경 위: 흰 판처럼 보이지 않게 — 아주 옅은 유리 + 얇은 윤곽, 글씨는 진하게 */
.header.on-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .10)),
    rgba(255, 255, 255, .06);
  border-color: rgba(10, 10, 10, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 32px -18px rgba(0, 0, 0, .22);
}
.header.on-light::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, .03) 64%, rgba(255, 255, 255, .14) 100%);
}
.header.on-light::after {
  box-shadow:
    inset 0 6px 8px -6px rgba(255, 255, 255, .55),
    inset 0 -8px 10px -8px rgba(255, 255, 255, .3),
    inset 12px 0 14px -12px rgba(255, 255, 255, .35),
    inset -12px 0 14px -12px rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(10, 10, 10, .05);
}
.header.on-light .nav > .nav-item > a, .header.on-light .header-center { text-shadow: 0 0 6px rgba(244, 244, 242, .8); }
/* 밝은 배경: 밝기 보정(1.08)이 미색 배경을 순백으로 날려 흰 판처럼 보이던 원인 → 밝은 배경에선 빼고
   아주 살짝 어둡게 해 유리 두께감만. 굴절(렌즈)은 그대로 */
.header.on-light {
  -webkit-backdrop-filter: blur(9px) saturate(150%) brightness(.97);
  backdrop-filter: blur(9px) saturate(150%) brightness(.97);
}
html.glass-refract .header.on-light {
  -webkit-backdrop-filter: url(#glass-lens) blur(3px) saturate(150%) brightness(.97);
  backdrop-filter: url(#glass-lens) blur(3px) saturate(150%) brightness(.97);
}

/* Works 리스트·추가 작품 행 블루 스윕: 느리게 출발하던 곡선(1.1s) → 바로 출발해 부드럽게 멈추는 곡선(.55s)
   글자 확대도 같은 속도. 큰 글자 확대가 끊겨 보이지 않게 미리 레이어로 */
.grid.is-list .card.sw-in::before, .add-row.sweep.sw-in::before { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.grid.is-list .card.sw-out::before, .add-row.sweep.sw-out::before { transition: transform .45s cubic-bezier(.5, 0, .75, 0); }
.grid.is-list .card .card-info, .add-row.sweep .client { will-change: transform; }
.grid.is-list .card.sw-in .card-info, .add-row.sweep.sw-in .client { transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
.grid.is-list .card.sw-out .card-info, .add-row.sweep.sw-out .client { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
/* 마우스가 빠지면 블루 면·글자 모두 즉시 원래대로 (빠지는 애니메이션 없음) */
.grid.is-list .card.sw-reset::before, .grid.is-list .card.sw-reset .card-info, .grid.is-list .card.sw-reset .card-title,
.grid.is-list .card.sw-reset .card-year, .grid.is-list .card.sw-reset .tag, .grid.is-list .card.sw-reset .tag::before,
.add-row.sweep.sw-reset::before, .add-row.sweep.sw-reset .client, .add-row.sweep.sw-reset *, .grid.is-list .card.sw-reset * { transition: none !important; }
/* 오버 시 구분선 ㅣ : 옅은 흰색 → 글자와 같은 흰색으로, 블루가 차오르는 것과 동시에 빠르게 */
.card:hover .sep, .card.sw-in .sep, .add-row.sw-in .sep, .next:hover .sep, .sc-item a:hover .sep {
  color: currentColor; opacity: 1;
  transition: color .2s, opacity .2s;
}
.card.sw-reset .sep, .add-row.sw-reset .sep { transition: none; }

/* ==========================================================================
   상세 페이지 첫 화면 배경 영상 (heroBg): 첫 화면 크기로 꽉 채워(cover) 연하게, 아래로 갈수록 사라짐
   ========================================================================== */
body[data-page="project"] #app { position: relative; z-index: 0; }
.p-hero-bg {
  position: absolute; left: 0; right: 0; top: 0; height: 100svh; z-index: -1; overflow: hidden; pointer-events: none;
  container-type: size; opacity: 0; transition: opacity 1.6s var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.p-hero-bg.is-on { opacity: .26; }
.p-hero-bg iframe {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 0;
  width: max(100cqw, calc(100cqh * var(--r))); height: max(100cqh, calc(100cqw / var(--r)));
}
.p-hero-bg iframe { max-width: none; max-height: none; }
/* 배경: 썸네일은 들어오자마자 바로(연하게), 영상은 실제 재생이 시작되면 그 위로 서서히 */
.p-hero-bg { opacity: .26; transition: none; }
.p-hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
  animation: p-poster-in .8s var(--ease-out) both;
}
@keyframes p-poster-in { from { opacity: 0; } to { opacity: 1; } }
.p-hero-bg iframe { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.p-hero-bg.is-playing iframe { opacity: 1; }
/* 카드 전체가 상세 페이지로 가는 버튼 */
.card { cursor: pointer; }
/* 배경 영상 더 연하게(블러 없이 진하기만 낮춤) → 뒤의 원래 그라데이션 색이 더 많이 묻어남 */
.p-hero-bg { opacity: .12; }

/* 상세 페이지 대제목: 1줄 = 의뢰처 + 막대, 2줄부터 = 제목 (길면 띄어쓰기 기준으로 고르게 → 전체 3줄 안에) */
.p-client { max-width: none; }
.p-client .pc-a, .p-client .pc-b { display: block; }
.p-client .pc-b { text-wrap: balance; max-width: 24ch; }
@media (max-width: 760px) { .p-client .pc-b { max-width: none; } }

/* ==========================================================================
   파트 세부 콘텐츠 (partItem): 소제목 / 영상 / Overview — 파트 머리(번호·설명)와 같은 2단 구성
   ========================================================================== */
.part-item { margin-top: clamp(56px, 7vw, 110px); }
.pi-label { display: block; margin-bottom: 20px; color: var(--white); font-size: 12px; }
.pi-text { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 120px); margin-top: 28px; }
.pi-text b { color: var(--grey); font-weight: 500; font-size: 10px; padding-top: .5em; }
.pi-text p { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .72); max-width: 720px; }
@media (max-width: 860px) { .pi-text { grid-template-columns: 1fr; gap: 10px; } }
.part-item figure { margin: 0; }
.part-item figcaption { margin-top: 10px; color: var(--grey); font-size: 10px; }
.part .video.is-loop iframe { pointer-events: none; }
.vg-single.is-tall { max-width: min(440px, 100%); margin-inline: auto; }

/* 규격이 다른 영상 여러 개: 높이를 맞춰 한 줄로 (폭은 각 비율만큼) */
.vgrid { display: flex; gap: 14px; align-items: flex-start; }
.vg-item { flex: var(--r) 1 0; min-width: 0; }
.part .vgrid .video { max-width: none; margin: 0; }
/* 폰: 가로 영상은 한 줄 전체, 세로 영상들은 다음 줄에 높이 맞춰 나란히 */
@media (max-width: 760px) {
  .vgrid { flex-wrap: wrap; gap: 10px; }
  .vg-item.is-wide { flex-basis: 100%; order: -1; }
}

/* 파트 세부 콘텐츠 레이아웃 v2: 설명을 영상 가까이, 좌우 번갈아 */
.part-item .pi-label { display: none; }
.pi-text { display: block; margin-top: 0; }
.pi-title { display: flex; align-items: center; gap: .1em; font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.02em; color: var(--white); margin-bottom: 14px; }
.pi-title .slash { --bw: .2em; width: .6em; }
.pi-text p { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72); max-width: 640px; }
/* 넓은 영상: 영상 아래 왼쪽에 바로 */
.pi--wide .pi-text { margin-top: 24px; max-width: 760px; }
/* 16:9·세로 영상: 나란히 (번갈아) */
.pi--split { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.pi--split.pi--rev { grid-template-columns: 1fr 1.55fr; }
.pi--split.pi--rev .pi-media { order: 2; }
.pi--split.is-tall { grid-template-columns: minmax(0, 360px) 1fr; }
.pi--split.is-tall.pi--rev { grid-template-columns: 1fr minmax(0, 360px); }
.pi--split .video { max-width: none !important; margin: 0 !important; }
@media (max-width: 860px) {
  .pi--split, .pi--split.pi--rev, .pi--split.is-tall, .pi--split.is-tall.pi--rev { grid-template-columns: 1fr; gap: 20px; }
  .pi--split.pi--rev .pi-media { order: 0; }
  .pi--split.is-tall .pi-media { max-width: 340px; }
}

/* 상세 하단 Platform / Links: 회색 → 흰색으로 통일 */
.p-credits .link-list a, .p-credits .plat { color: var(--white); }
.p-credits .plat { font-size: 15px; line-height: 1.7; }
/* 상세 페이지 맨 끝 저작권 표기: ⓒ 광고주. ALL RIGHTS RESERVED. */
.p-copyright { padding: 8px var(--gutter) clamp(48px, 6vw, 80px); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.p-copyright { text-align: right; }
/* 상세 페이지 휠 인터랙션 (projectScroll) — transform(등장 효과)과 겹치지 않게 scale/translate 속성 사용 */
.pi-media, .part > [data-reveal]:not(.part-head), .p-video { scale: var(--ps, 1); transform-origin: 50% 0; }
.part-no { translate: 0 var(--py, 0px); }
/* 세로 영상 + 글: 양 끝으로 벌어지지 않게 글 폭을 제한하고 둘을 가운데로 모음 */
@media (min-width: 861px) {
  .pi--split.is-tall { grid-template-columns: minmax(0, 360px) minmax(0, 560px); justify-content: center; gap: clamp(40px, 5vw, 80px); }
  .pi--split.is-tall.pi--rev { grid-template-columns: minmax(0, 560px) minmax(0, 360px); }
}
/* Project Description · Tags 라벨: 화면 왼쪽 끝이 아니라 본문 바로 위(본문 좌상단)에 붙여 배치 */
@media (min-width: 861px) {
  .p-body, .p-tags { row-gap: 0; }
  .p-body > h3, .p-tags > h4 { grid-column: 2; position: static; margin-bottom: 20px; }
  .p-body > div, .p-tags > .tags { grid-column: 2; }
}
.p-body > h3, .p-tags > h4 { margin-bottom: 20px; }
/* Project Description: 왼쪽 정렬 한 단으로, 문장은 폭이 되면 한 줄로. 다음 파트와의 간격 좁힘 */
.p-body { display: block; padding-bottom: clamp(32px, 4vw, 56px); }
.p-body > h3, .p-body > div { grid-column: auto; }
.p-body .p-line { max-width: none; }
.p-body .p-overview { max-width: 860px; }

/* 세로형 메인 영상 파트: 왼쪽 = 번호·제목·설명 / 오른쪽 = 세로 영상 (가운데로 모아 나란히) */
@media (min-width: 861px) {
  .part--tall { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 400px); justify-content: center; gap: clamp(48px, 6vw, 110px); align-items: center; }
  .part--tall .part-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 0; }
  .part--tall .part-no { font-size: clamp(56px, 7vw, 110px); }
}
.part--tall .video { max-width: none !important; margin: 0 !important; }
@media (max-width: 860px) { .part--tall .video { max-width: 360px !important; margin-inline: auto !important; } }
/* 세로 영상 파트: 번호가 제목 바로 위에 있어 휠 깊이감(번호 이동)과 슬래시가 제목을 가림 → 이동 끄고 간격 확보, 글자가 슬래시 위로 */
.part--tall .part-no { translate: none; margin-bottom: .25em; }
.part--tall .part-head > div:not(.part-no) { position: relative; z-index: 6; }
/* 세로 영상 파트가 이어질 때: 두 번째는 영상 왼쪽 · 설명 오른쪽 */
@media (min-width: 861px) {
  .part--tall.part--rev { grid-template-columns: minmax(0, 400px) minmax(0, 640px); }
  .part--tall.part--rev > .part-head { order: 2; }
}

/* About Info 연락처 줄: 오버하면 줄 배경이 흰색으로 채워지고 글자는 블루 */
a.info-row { transition: padding .4s var(--ease), background-color .3s var(--ease), color .3s, border-color .3s; }
a.info-row:hover { border-radius: 14px; background: var(--white); color: var(--blue); padding-left: 20px; padding-right: 20px; border-bottom-color: transparent; }
a.info-row:hover dt { color: rgba(1, 0, 249, .6); }
/* 푸터·Contact 슬로건: 더 스크롤할 수 없는 위치에서 덜 선명하게 남지 않도록 끝까지 완성 */
.slogan-f.is-full .sl-line { --l: 1; transition: opacity .9s var(--ease-out), filter .9s var(--ease-out), transform .9s var(--ease-out); }

/* ==========================================================================
   스타일프레임 (styleFrames): 본편에서 2~3초씩 잘라 반복 재생하는 콜라주
   무드보드처럼 크기·비율이 다른 칸들이 서로 붙고 살짝 겹치게 — 위치는 캔버스(가로 100 × 세로 --H) 좌표
   ========================================================================== */
.sf { margin-top: clamp(56px, 6vw, 96px); }
.sf-title { margin-bottom: clamp(20px, 2.4vw, 36px); }
.sf-grid { --H: 54; position: relative; aspect-ratio: 100 / var(--H); }
.sf-cell, .sf-dot { position: absolute; left: calc(var(--l) * 1%); top: calc(var(--t) / var(--H) * 100%); width: calc(var(--w) * 1%); }
.sf-cell { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; translate: 0 var(--sy, 0px); z-index: var(--z, 1); }
.sf-cell.is-empty { cursor: default; }
.sf-clip { position: relative; display: block; overflow: hidden; aspect-ratio: var(--cr); background: #111114; transition: opacity .6s var(--ease-out), filter .6s var(--ease-out); }
.sf-cell.is-empty .sf-clip { background: linear-gradient(135deg, #17171b, #0d0d10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* 16:9 원본을 칸 비율에 맞게 꽉 채워 자름 (--x: 가로 기준점) */
.sf-clip iframe { position: absolute; top: 50%; left: var(--x); width: calc(100% * max(1, 1.7778 / var(--cr))); height: calc(100% * max(1, var(--cr) / 1.7778)); max-width: none; border: 0; pointer-events: none; transform: translate(calc(-1 * var(--x)), -50%); scale: 1.04; opacity: 0; transition: opacity 1s var(--ease-out), scale 1.2s var(--ease-out); }
.sf-cell.is-playing iframe { opacity: 1; }
/* 포인트 블루 작은 사각형 (무드보드의 컬러 칩) */
.sf-dot { aspect-ratio: 1; background: var(--blue); pointer-events: none; }
@media (hover: hover) {
  .sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { opacity: .38; filter: grayscale(1); }
  .sf-cell:not(.is-empty):hover { --z: 5; }
  .sf-cell:hover iframe { scale: 1; }
}
.sf-cell:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
/* 배치 (l: 왼쪽, t: 위, w: 폭 — 높이는 비율 --cr로 정해짐) */
.sf-cell:nth-child(1) { --l: 6;  --t: 5;    --w: 34; --cr: 1.7778; }
.sf-cell:nth-child(2) { --l: 40; --t: 0;    --w: 17; --cr: .8; --z: 2; }
.sf-cell:nth-child(3) { --l: 22; --t: 24.1; --w: 40; --cr: 2.39; --z: 3; }
.sf-cell:nth-child(4) { --l: 57; --t: 7.5;  --w: 13; --cr: 1; }
.sf-cell:nth-child(5) { --l: 61; --t: 20.5; --w: 33; --cr: 1.7778; --z: 2; }
.sf-cell:nth-child(6) { --l: 8;  --t: 27;   --w: 14; --cr: 1.5; }
.sf-cell:nth-child(7) { --l: 44; --t: 40.8; --w: 18; --cr: 1.6; }
.sf-dot:nth-of-type(1) { --l: 3;    --t: 22.5; --w: 2.2; }
.sf-dot:nth-of-type(2) { --l: 71.5; --t: 3.5;  --w: 1.6; }
.sf-dot:nth-of-type(3) { --l: 64;   --t: 41.5; --w: 1.8; }
/* 폰: 세로로 긴 캔버스에 다시 배치 */
@media (max-width: 760px) {
  .sf-grid { --H: 142; }
  .sf-cell:nth-child(1) { --l: 0;  --t: 4;     --w: 66; }
  .sf-cell:nth-child(2) { --l: 66; --t: 0;     --w: 34; }
  .sf-cell:nth-child(3) { --l: 32; --t: 42.5;  --w: 68; }
  .sf-cell:nth-child(4) { --l: 6;  --t: 41.1;  --w: 26; }
  .sf-cell:nth-child(5) { --l: 18; --t: 71;    --w: 64; }
  .sf-cell:nth-child(6) { --l: 0;  --t: 107;   --w: 40; }
  .sf-cell:nth-child(7) { --l: 40; --t: 107;   --w: 54; }
  .sf-dot:nth-of-type(1) { --l: 86; --t: 73;  --w: 5; }
  .sf-dot:nth-of-type(2) { --l: 1;  --t: 70;  --w: 4; }
  .sf-dot:nth-of-type(3) { --l: 94; --t: 136; --w: 4; }
}

/* ==========================================================================
   기획 자료 블록 (planBlock): Concept · Color · Typography · Narration · Storyboard
   ========================================================================== */
.pb { margin-top: clamp(56px, 7vw, 110px); }
.pb .pi-title { margin-bottom: clamp(20px, 2.4vw, 32px); }
.pb dl, .pb dd { margin: 0; }

/* Concept: 파스텔 구체 위 유리판 */
.cc-glass { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(28px, 5vw, 72px); background: #0d0d14; isolation: isolate; }
.cc-orbs i { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .85; translate: calc(var(--mx, 0) * var(--k) * 1px) calc(var(--my, 0) * var(--k) * 1px); transition: translate 1.2s var(--ease-out); animation: ccFloat 14s ease-in-out infinite alternate; z-index: -1; }
.cc-orbs i:nth-child(1) { --k: 60; width: 34%; aspect-ratio: 1; left: -6%; top: -30%; background: radial-gradient(circle at 35% 35%, #8fb9ff, #4c91fa 55%, transparent 72%); }
.cc-orbs i:nth-child(2) { --k: -40; width: 24%; aspect-ratio: 1; left: 30%; top: 55%; background: radial-gradient(circle at 35% 35%, #ffc2df, #fe81bd 55%, transparent 72%); animation-delay: -4s; }
.cc-orbs i:nth-child(3) { --k: 80; width: 28%; aspect-ratio: 1; right: -4%; top: -14%; background: radial-gradient(circle at 35% 35%, #b3b1ff, #706df0 55%, transparent 72%); animation-delay: -8s; }
.cc-orbs i:nth-child(4) { --k: -70; width: 16%; aspect-ratio: 1; right: 18%; bottom: -12%; background: radial-gradient(circle at 35% 35%, #fff2ee, #ffe0d9 55%, transparent 72%); animation-delay: -2s; }
.cc-orbs i:nth-child(5) { --k: 30; width: 10%; aspect-ratio: 1; left: 12%; bottom: 8%; background: radial-gradient(circle at 35% 35%, #c9e0ff, #4c91fa 60%, transparent 75%); animation-delay: -6s; }
@keyframes ccFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(4%, 6%) scale(1.06); } }
.cc-panel { position: relative; border-radius: 16px; padding: clamp(24px, 3.6vw, 48px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 60px rgba(0, 0, 0, .25); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); }
.cc-text { font-size: clamp(16px, 1.35vw, 20px); line-height: 1.85; color: rgba(255, 255, 255, .9); max-width: 860px; }
.cc-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.cc-keys li { padding: 8px 14px; border-radius: 999px; font-size: 12px; letter-spacing: .04em; color: var(--white); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); }
.cc-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 14px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cc-specs > div { padding: 18px 20px; background: var(--black); }
.cc-specs dt { font-size: 10px; color: var(--grey); margin-bottom: 8px; }
.cc-specs dd { font-size: 14px; color: var(--white); }
@media (max-width: 860px) { .cc-specs { grid-template-columns: 1fr 1fr; } }

/* Color System: 칸이 아래에서 차오르며 등장, 호버하면 넓어지며 이름·용도 표시, 클릭하면 HEX 복사 */
.cs-row { display: flex; gap: 8px; height: clamp(200px, 22vw, 300px); }
.cs-sw { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: 14px; background: var(--c); color: #fff; cursor: pointer; overflow: hidden; text-align: left; transition: flex-grow .7s var(--ease-out), clip-path 1s var(--ease-out); transition-delay: 0s, calc(var(--n) * .07s); clip-path: inset(100% 0 0 0 round 14px); }
.cs-row.is-in .cs-sw { clip-path: inset(0 0 0 0 round 14px); }
.cs-sw.is-light { color: #21429f; }
.cs-hex { position: absolute; left: 16px; bottom: 14px; font: 500 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: lowercase; }
.cs-info { position: absolute; left: 16px; top: 16px; right: 16px; display: grid; gap: 6px; opacity: 0; translate: 0 8px; transition: opacity .5s, translate .6s var(--ease-out); }
.cs-info b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.cs-info small { font-size: 12px; opacity: .8; white-space: nowrap; }
.cs-copied { position: absolute; right: 14px; bottom: 14px; font-size: 10px; opacity: 0; transition: opacity .3s; }
.cs-sw.is-copied .cs-copied { opacity: 1; }
.cs-sw:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
@media (hover: hover) {
  .cs-sw:hover { flex-grow: 2.6; }
  .cs-sw:hover .cs-info { opacity: 1; translate: 0 0; }
}
@media (max-width: 760px) {
  .cs-row { display: grid; grid-template-columns: repeat(3, 1fr); height: auto; }
  .cs-sw { aspect-ratio: 1; }
  .cs-info { opacity: 1; translate: 0 0; }
  .cs-info small { display: none; }
  .cs-info b { font-size: 12px; white-space: normal; }
}

/* Typography: 커서 가까운 글자만 굵어지는 굵기 베리에이션 */
.ty-grid { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.ty-meta { display: grid; gap: 10px; align-content: start; }
.ty-font { font-size: clamp(22px, 2vw, 30px); font-weight: 700; color: var(--white); letter-spacing: -.02em; }
.ty-meta .mono-label { color: var(--grey); font-size: 10px; }
.ty-meta p { margin-top: 8px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .6); max-width: 34ch; }
.ty-spec { cursor: default; }
.ty-sample { font-family: "Pretendard Variable", Pretendard, sans-serif; font-size: clamp(34px, 5.2vw, 84px); line-height: 1.15; letter-spacing: -.035em; color: var(--white); white-space: nowrap; }
.ty-sample span { font-variation-settings: 'wght' 250; transition: font-variation-settings .35s var(--ease-out); }
.ty-light { font-weight: 250; color: rgba(255, 255, 255, .32); }
.ty-sub { display: block; margin-top: 14px; font-size: 11px; color: var(--grey); }
@media (max-width: 860px) { .ty-grid { grid-template-columns: 1fr; } .ty-sample { font-size: clamp(28px, 9vw, 48px); } }

/* Narration: 화면 가운데에 가까운 줄일수록 밝게 */
.ns-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 120px); }
.ns-side { position: sticky; top: 120px; align-self: start; display: grid; gap: 14px; justify-items: start; }
.ns-side .mono-label { font-size: 10px; color: var(--grey); }
.ns-voices { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-v { display: inline-flex; align-items: center; gap: 3px; padding: 7px 12px; border-radius: 999px; font-size: 11px; color: var(--white); border: 1px solid var(--line); }
.ns-v i { width: 2px; height: 8px; margin-right: 1px; background: var(--blue); border-radius: 1px; transform-origin: 50% 100%; scale: 1 .4; }
.ns-v i:nth-child(4) { margin-right: 6px; }
@media (hover: hover) { .ns-v:hover i { animation: nsEq .8s ease-in-out infinite alternate; } .ns-v:hover i:nth-child(2) { animation-delay: -.3s; } .ns-v:hover i:nth-child(3) { animation-delay: -.55s; } .ns-v:hover i:nth-child(4) { animation-delay: -.15s; } }
@keyframes nsEq { to { scale: 1 1.2; } }
.ns-g + .ns-g { margin-top: 34px; }
.ns-l { opacity: var(--o, .3); transition: opacity .25s linear; }
.ns-q { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.02em; color: var(--white); margin: 0 0 12px; }
.ns-body p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.8; color: var(--white); }
.ns-body p + p { margin-top: 4px; }
@media (max-width: 860px) { .ns-grid { grid-template-columns: 1fr; } .ns-side { position: static; } }

/* Storyboard → Screen: 왼쪽 화면 고정, 오른쪽 씬 설명을 스크롤하면 그 씬 구간이 재생 */
.sb-wrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.sb-stage { position: sticky; top: calc(50vh - min(24vw, 300px)); }
.sb-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #111114; }
.sb-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease-out); }
.sb-screen.is-playing iframe { opacity: 1; }
.sb-screen.is-cut iframe { opacity: .15; transition-duration: .2s; }
.sb-now { display: flex; gap: 6px; align-items: center; margin-top: 14px; font-size: 10px; color: var(--grey); }
.sb-idx { color: var(--white); }
.sb-scn { margin-left: auto; color: var(--white); }
.sb-list { list-style: none; margin: 0; padding: 18vh 0; }
.sb-item { min-height: 46vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0 24px 22px; border-left: 1px solid var(--line); opacity: .28; cursor: pointer; transition: opacity .5s var(--ease-out), border-color .5s; }
.sb-item.is-on { opacity: 1; border-left-color: var(--blue); }
.sb-no { font-size: 10px; color: var(--grey); }
.sb-item.is-on .sb-no { color: var(--white); }
.sb-item h5 { margin: 10px 0 12px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.02em; color: var(--white); }
.sb-motion { font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.sb-item dl { display: grid; gap: 8px; margin-top: 16px; }
.sb-item dl div { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; }
.sb-item dt { font-size: 10px; color: var(--grey); }
.sb-item dd { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
@media (max-width: 860px) {
  .sb-wrap { grid-template-columns: 1fr; gap: 0; }
  .sb-stage { top: 76px; z-index: 3; padding-bottom: 10px; background: rgba(10, 10, 12, .74); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
  .sb-list { padding: 4vh 0 10vh; }
  .sb-item { min-height: 0; padding: 26px 0 26px 16px; }
}
.ns-note { margin-top: 4px; font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, .55); max-width: 34ch; }
/* AI Voice 샘플 칩: 버튼 + 재생 중 표시 */
.ns-v { background: none; font-family: inherit; cursor: pointer; transition: border-color .3s, background .3s; }
.ns-v.is-playing { border-color: var(--blue); background: rgba(1, 0, 249, .18); }
.ns-v.is-playing i { animation: nsEq .42s ease-in-out infinite alternate; }
.ns-v.is-playing i:nth-child(2) { animation-delay: -.2s; animation-duration: .36s; }
.ns-v.is-playing i:nth-child(3) { animation-delay: -.33s; animation-duration: .5s; }
.ns-v.is-playing i:nth-child(4) { animation-delay: -.1s; animation-duration: .4s; }
.ns-v:focus-visible { outline: 1px solid var(--blue); outline-offset: 3px; }
/* Concept 카드: 영상과 같은 밝은 라벤더 배경 + 파스텔 구체 + 흰 유리판, 글자는 영상의 딥블루 */
.cc-glass { background: radial-gradient(120% 140% at 50% 0%, #f6f5fd 0%, #efeef9 55%, #e6e4f6 100%); }
.cc-orbs i { opacity: 1; filter: blur(6px); }
.cc-panel { background: rgba(255, 255, 255, .38); border-color: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 60px rgba(33, 66, 159, .14); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); }
.cc-text { color: #21429f; }
.cc-keys li { color: #21429f; background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .95); box-shadow: 0 4px 14px rgba(33, 66, 159, .08); }
/* Typography: 실제 210 옴니고딕 견본 이미지 (영상 배경색 카드 위) */
.ty-spec { margin: 0; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 16px; background: #efeef9; }
.ty-spec img { display: block; width: 100%; max-width: 590px; height: auto; }
/* Concept 스펙 줄: 위 카드와 같은 라벤더 톤으로 이어지게 */
.cc-specs { background: rgba(33, 66, 159, .14); border-color: rgba(255, 255, 255, .6); }
.cc-specs > div { background: #efeef9; }
.cc-specs dt { color: rgba(33, 66, 159, .55); }
.cc-specs dd { color: #21429f; }
/* Concept 스펙의 BGM 칸: 누르면 음악 재생 */
.cc-specs > div:has(.cc-play) { padding: 0; }
.cc-play { display: block; width: 100%; height: 100%; padding: 18px 20px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; transition: background .3s; }
.cc-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 10px; color: rgba(33, 66, 159, .55); }
.cc-v { display: block; font-size: 14px; color: #21429f; }
.cc-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; }
.cc-eq i { width: 2px; height: 9px; background: #4c91fa; border-radius: 1px; transform-origin: 50% 100%; scale: 1 .35; }
.cc-play.is-playing .cc-eq i { animation: nsEq .42s ease-in-out infinite alternate; }
.cc-play.is-playing .cc-eq i:nth-child(2) { animation-delay: -.2s; animation-duration: .36s; }
.cc-play.is-playing .cc-eq i:nth-child(3) { animation-delay: -.33s; animation-duration: .5s; }
.cc-play.is-playing .cc-eq i:nth-child(4) { animation-delay: -.1s; animation-duration: .4s; }
.cc-play.is-playing, .cc-play:hover { background: #e3e1f6; }
.cc-play:focus-visible { outline: 1px solid #21429f; outline-offset: -4px; }

/* ==========================================================================
   제안서 블록 (proposal): 표지 + 제안 방향 + 공간별 영상 계획 + 스펙
   ========================================================================== */
.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 3.4vw, 56px); align-items: stretch; }
.pp-cover { position: relative; aspect-ratio: 16 / 9; align-self: start; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 9%; color: #fff; transition: transform .8s var(--ease-out); }
.pp-cover--galaxy25 { background: radial-gradient(120% 140% at 100% 100%, #f2ffff 0%, #6ffcfc 38%, #4aa3ff 66%, #0a1bff 100%); }
.pp-cover--galaxy26 { background: #005be5; box-shadow: inset 0 0 0 clamp(8px, 1.2vw, 14px) #81ee00; }
.pp-name { font-size: clamp(20px, 2.4vw, 36px); font-weight: 500; letter-spacing: -.01em; line-height: 1.1; }
.pp-cover--galaxy26 .pp-name { font-weight: 700; }
.pp-name small { display: block; font-size: .8em; font-weight: 400; }
.pp-line { width: 1px; height: 18%; margin: 4% 0 3%; background: rgba(255, 255, 255, .85); }
.pp-date { font-size: clamp(11px, 1vw, 15px); line-height: 1.35; font-weight: 300; color: rgba(255, 255, 255, .95); }
@media (hover: hover) { .pp-grid:hover .pp-cover { transform: translateY(-4px); } }
.pp-text { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .78); }
.pp-plan { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pp-plan li { border-bottom: 1px solid var(--line); }
.pp-row { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.1fr) 18px; gap: 14px; align-items: baseline; width: 100%; padding: 16px 4px; border: 0; background: none; color: var(--white); font: inherit; text-align: left; cursor: pointer; overflow: hidden; isolation: isolate; }
.pp-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease-out); }
.pp-no { font-size: 10px; color: var(--grey); }
.pp-t { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.pp-t small { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--grey); }
.pp-note { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .7); }
.pp-arrow { align-self: center; opacity: .5; transition: opacity .3s, translate .4s var(--ease-out); }
@media (hover: hover) {
  .pp-row:hover::before { transform: scaleY(1); }
  .pp-row:hover, .pp-row:hover .pp-note, .pp-row:hover .pp-t small, .pp-row:hover .pp-no { color: #0a0a0a; }
  .pp-row:hover .pp-arrow { opacity: 1; translate: 2px -2px; }
}
.pp-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 28px 0 0; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pp-specs > div { padding: 16px 20px; background: var(--black); }
.pp-specs dt { font-size: 10px; color: var(--grey); margin-bottom: 8px; }
.pp-specs dd { margin: 0; font-size: 14px; color: var(--white); }
@media (max-width: 860px) {
  .pp-grid { grid-template-columns: 1fr; }
  .pp-row { grid-template-columns: 28px minmax(0, 1fr) 18px; }
  .pp-note { grid-column: 2; }
  .pp-arrow { grid-column: 3; grid-row: 1; }
  .pp-specs { grid-template-columns: 1fr 1fr; }
}
/* 컬러 칸: 밝은 칸 글자색을 블록마다 (기본은 우리펫상조 딥블루) */
.cs-sw.is-light { color: var(--cs-ink, #21429f); }

/* 스토리보드: 대형 LED처럼 아주 넓은 화면 비율 → 화면을 위에 넓게 고정, 씬 설명은 아래로 */
.sb-screen { aspect-ratio: var(--sr, 1.7778); }
.sb--wide .sb-wrap { grid-template-columns: 1fr; gap: 0; }
.sb--wide .sb-stage { top: 92px; z-index: 3; padding-bottom: 14px; background: rgba(10, 10, 12, .74); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
.sb--wide .sb-list { padding: 4vh 0 30vh; }
.sb--wide .sb-item { min-height: 0; padding: 28px 0 28px 22px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 48px); align-items: start; }
.sb--wide .sb-item .sb-no { grid-column: 1; }
.sb--wide .sb-item h5 { grid-column: 1; margin-bottom: 0; }
.sb--wide .sb-item .sb-motion { grid-column: 2; grid-row: 1 / span 2; }
.sb--wide .sb-item dl { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
@media (max-width: 860px) {
  .sb--wide .sb-stage { top: 76px; }
  .sb--wide .sb-item { display: flex; }
}

/* 제안서 뷰어: 표지 자리에서 화면 안 스크롤로 제안서를 넘겨 봄 (한 쪽씩 딱 맞게 멈춤) */
.pp-viewer { align-self: start; min-width: 0; }
.pp-deck { position: relative; aspect-ratio: 16 / 9; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; border-radius: 14px; background: #1a1a1a; scrollbar-width: none; }
.pp-deck::-webkit-scrollbar { display: none; }
.pp-deck:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }
.pp-page { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; scroll-snap-align: start; }
.pp-count { display: flex; gap: 6px; align-items: center; margin-top: 12px; font-size: 10px; color: var(--grey); }
.pp-cur { color: var(--white); }
.pp-hint { margin-left: auto; transition: opacity .5s; }
.pp-moved .pp-hint { opacity: 0; }
/* 계획 줄: 지금 보고 있는 쪽의 계획은 흰색으로 켜짐, 화살표는 결과물 영상으로 */
.pp-li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; }
.pp-row { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.1fr); }
.pp-li.is-on .pp-row::before { transform: scaleY(1); }
.pp-li.is-on .pp-row, .pp-li.is-on .pp-note, .pp-li.is-on .pp-t small, .pp-li.is-on .pp-no { color: #0a0a0a; }
.pp-go { display: grid; place-items: center; border: 0; background: none; color: var(--white); cursor: pointer; opacity: .55; transition: opacity .3s, translate .4s var(--ease-out); }
@media (hover: hover) { .pp-go:hover { opacity: 1; translate: 2px -2px; } }
@media (max-width: 860px) { .pp-row { grid-template-columns: 28px minmax(0, 1fr); } .pp-note { grid-column: 2; } }
/* 스펙 줄: 제안서 키 컬러 배경 */
.pb-proposal .pp-specs { background: rgba(255, 255, 255, .22); border-color: var(--pp-key, var(--line)); }
.pb-proposal .pp-specs > div { background: var(--pp-key, var(--black)); }
.pb-proposal .pp-specs dt { color: rgba(255, 255, 255, .7); }
/* 제안서 한 쪽 (스토리보드 등) */
.pp-slide { margin: 0; border-radius: 14px; overflow: hidden; }
.pp-slide img { display: block; width: 100%; height: auto; }
/* 스토리보드 씬 프레임: 제안서 쪽에서 화면 부분만 잘라 보여줌 (쪽 1600×900 기준 x111–920, y320–574) */
.sb-sketch { position: relative; display: block; overflow: hidden; aspect-ratio: 809 / 254; border-radius: 6px; background: #000; }
.sb-sketch img { position: absolute; left: 0; top: 0; width: calc(100% * 1600 / 809); max-width: none; height: auto; transform: translate(calc(-111 / 1600 * 100%), calc(-320 / 900 * 100%)); }
.sb-sketch i { position: absolute; left: 6px; bottom: 5px; padding: 3px 6px; border-radius: 3px; font-style: normal; font-size: 8px; color: #fff; background: rgba(0, 0, 0, .6); }
.sb--wide .sb-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.6fr); }
.sb--wide .sb-item .sb-sketch { grid-column: 1; grid-row: 1 / span 2; }
.sb--wide .sb-item .sb-no, .sb--wide .sb-item h5 { grid-column: 2; }
.sb--wide .sb-item .sb-motion { grid-column: 3; }
.sb--wide .sb-item dl { grid-column: 4; }
.sb-item:not(.is-on) .sb-sketch { filter: grayscale(.6); }
@media (max-width: 860px) { .sb-sketch { width: 100%; margin-bottom: 14px; } }
.pp-specs dd.is-swap { animation: ppSwap .55s var(--ease-out); }
@keyframes ppSwap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 파트 설명 바로 밑에 오는 기획 블록(컬러 시스템): 설명과 가깝게 */
.part-head + .pb { margin-top: clamp(8px, 1.6vw, 24px); }
/* 스타일프레임 스틸 컷 칸 */
.sf-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x) 50%; scale: 1.04; transition: scale 1.2s var(--ease-out); }
@media (hover: hover) { .sf-cell:hover .sf-clip img { scale: 1; } }

/* 공간형 스타일프레임 (8칸 이상): 깊이가 다른 칸들이 겹쳐 쌓이고, 그리드가 스크롤·마우스에 따라 살짝 기울어짐 */
.sf--many { perspective: 1700px; perspective-origin: 50% 40%; }
.sf-grid--many { margin-inline: 2%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 1.1s var(--ease-out); }
.sf-grid--many .sf-cell { translate: 0 var(--sy, 0px) calc(var(--d) * 90px); z-index: auto; transition: translate .9s var(--ease-out); }
.sf-grid--many .sf-clip { filter: brightness(calc(1 + var(--d) * .1)); box-shadow: 0 calc(18px + var(--d) * 14px) calc(50px + var(--d) * 20px) rgba(0, 0, 0, calc(.38 + var(--d) * .14)); border-radius: 4px; }
@media (hover: hover) {
  .sf-grid--many .sf-cell:not(.is-empty):hover { translate: 0 var(--sy, 0px) calc(var(--d) * 90px + 70px); }
}
@media (max-width: 760px) {
  .sf-grid--many { margin-inline: 0; aspect-ratio: 100 / var(--Hm); }
  .sf-grid--many .sf-cell { left: calc(var(--lm) * 1%); top: calc(var(--tm) / var(--Hm) * 100%); width: calc(var(--wm) * 1%); translate: 0 var(--sy, 0px) calc(var(--d) * 40px); }
  .sf-grid--many .sf-clip { aspect-ratio: var(--crm); }
}
/* 공간형: 뒤쪽 깊이 칸도 마우스가 닿도록(판이 아니라 칸만 반응), 호버 시 색 변화 없음 */
.sf-grid--many { pointer-events: none; }
.sf-grid--many .sf-cell { pointer-events: auto; }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { opacity: 1; filter: brightness(calc(1 + var(--d) * .1)); }
/* 포스터: 영상이 흐르기 전까지 그 장면 첫 프레임을 보여줌 */
.sf-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x) 50%; scale: 1.04; transition: scale 1.2s var(--ease-out); }
@media (hover: hover) { .sf-cell:hover .sf-poster { scale: 1; } }
/* 공간형 성능: 스크롤마다 값이 바뀌는 transform/translate에는 트랜지션을 걸지 않음(JS가 프레임마다 직접 갱신),
   영상 위 filter·큰 블러 그림자 대신 가벼운 그림자 + 어둡게 덮는 막으로 깊이 표현 */
.sf-grid--many { transition: none; will-change: transform; }
.sf-grid--many .sf-cell { transition: none; }
.sf-grid--many .sf-clip, .sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { filter: none; box-shadow: 0 12px 28px rgba(0, 0, 0, .4); transition: scale .6s var(--ease-out); }
.sf-grid--many .sf-clip::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: max(0, calc(var(--d) * -.22)); pointer-events: none; }
@media (hover: hover) {
  .sf-grid--many .sf-cell:not(.is-empty):hover { translate: 0 var(--sy, 0px) calc(var(--d) * 90px); }
  .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip { scale: 1.06; }
}

/* 스타일프레임 호버 (한국타이어·갤럭시 공통): 주변 칸은 검정으로 딤(색 변화 없이), 호버한 칸은 맨 위로 */
.sf-clip::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
.sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { opacity: 1; filter: none; }
.sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip::after { opacity: .62; }
.sf-cell:not(.is-empty):hover { z-index: 20; }
/* 공간형(갤럭시): 3D 안에서는 z-index가 아니라 깊이로 겹침이 정해짐 → 호버한 칸을 모든 칸보다 앞(150px)으로 끌어냄 */
.sf-grid--many .sf-cell { transform-style: preserve-3d; }
.sf-grid--many .sf-clip { transition: transform .55s var(--ease-out); }
@media (hover: hover) {
  .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip { scale: 1; transform: translateZ(calc((1 - var(--d)) * 90px + 60px)); }
  .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip::after { opacity: 0; }
}
/* 딤은 밝기 필터로 (3D 공간 안에서는 덮는 막이 영상 레이어 위에 그려지지 않음) */
.sf-clip::after, .sf-grid--many .sf-clip::after { display: none; }
.sf-clip, .sf-grid--many .sf-clip { transition: filter .45s var(--ease-out), transform .55s var(--ease-out), scale .6s var(--ease-out); }
.sf-grid--many .sf-clip { filter: brightness(calc(1 + var(--d) * .12)); }
.sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { opacity: 1; filter: brightness(.3); }
.sf-grid .sf-cell:not(.is-empty):hover .sf-clip { filter: brightness(1.04); }
/* 호버한 칸을 앞으로: 칸 안쪽에 3D를 이어 붙이면 딤 필터가 무시됨 → 칸 자체의 깊이에 --pop을 더함
   (--pop만 부드럽게 전환, 스크롤로 바뀌는 translate에는 트랜지션 없음) */
@property --pop { syntax: '<length>'; inherits: false; initial-value: 0px; }
.sf-grid--many .sf-cell { transform-style: flat; translate: 0 var(--sy, 0px) calc(var(--d) * 90px + var(--pop)); transition: --pop .55s var(--ease-out); }
@media (hover: hover) {
  .sf-grid--many .sf-cell:not(.is-empty):hover { --pop: calc((1 - var(--d)) * 90px + 60px); translate: 0 var(--sy, 0px) calc(var(--d) * 90px + var(--pop)); }
  .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip { transform: none; }
}
/* 공간형: 3D 안의 영상 레이어는 부모 필터가 약하게 먹을 때가 있어 영상에도 직접 딤 */
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { filter: brightness(.22); }
.sf-grid--many .sf-clip iframe { transition: opacity 1s var(--ease-out), scale 1.2s var(--ease-out), filter .45s var(--ease-out); }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip iframe { filter: brightness(.22); }
/* 공간형 최종: 딤·깊이 밝기를 칸 틀이 아니라 안의 사진·영상에 직접 (3D 안에서 틀의 필터는 레이어에 따라 무시됨) */
.sf-grid--many .sf-clip,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip,
.sf-grid .sf-grid--many .sf-cell:hover .sf-clip { filter: none; }
.sf-grid--many .sf-clip > img, .sf-grid--many .sf-clip > iframe { filter: brightness(calc(1 + var(--d) * .12)); transition: opacity 1s var(--ease-out), scale 1.2s var(--ease-out), filter .45s var(--ease-out); }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip > img,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip > iframe { filter: brightness(.22); }
.sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip > img, .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip > iframe { filter: brightness(1.04); }
/* 공간형 딤 (최종): 필터 대신, 호버 시 모든 칸 앞(깊이 120px)에 검은 막을 띄우고 호버한 칸만 그 앞(150px)으로 꺼냄 */
.sf-grid--many .sf-clip > img, .sf-grid--many .sf-clip > iframe,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip > img,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip > iframe,
.sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip > img, .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip > iframe { filter: none; }
.sf-grid--many::after { content: ""; position: absolute; inset: -25% -15%; background: rgba(0, 0, 0, .68); transform: translateZ(120px); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover)::after { opacity: 1; }
/* 공간형 구조 정리: 칸마다 3D 깊이를 주면 겹침 순서·딤 필터가 레이어별로 어긋남 →
   콜라주 전체를 한 장으로 기울이고(perspective), 칸의 깊이는 크기·겹침 순서·흐름 속도·밝기로 표현 */
.sf-grid--many { transform-style: flat; }
.sf-grid--many::after { display: none; }
.sf-grid--many .sf-cell { translate: 0 var(--sy, 0px); scale: calc(1 + var(--d) * .07); z-index: calc(var(--d) + 2); transition: scale .55s var(--ease-out); }
.sf-grid--many .sf-clip { filter: brightness(calc(1 + var(--d) * .1)); transform: none; }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { filter: brightness(.3); }
@media (hover: hover) {
  .sf-grid--many .sf-cell:not(.is-empty):hover { z-index: 20; translate: 0 var(--sy, 0px); scale: calc(1.06 + var(--d) * .07); }
  .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip { transform: none; filter: brightness(1.04); }
}
@media (max-width: 760px) { .sf-grid--many .sf-cell { translate: 0 var(--sy, 0px); } }
/* 공간형 딤: 필터는 영상 레이어가 섞이면 화면에 반영이 안 될 때가 있어 → 칸 자체의 투명도로(어두운 배경 위라 검게 가라앉음) */
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { filter: brightness(calc(1 + var(--d) * .1)); }
.sf-grid--many .sf-cell.is-in { transition: scale .55s var(--ease-out), opacity .45s var(--ease-out); }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) { opacity: .28; }
/* 공간형 딤 (확정): 영상(외부 플레이어 iframe)은 부모의 투명도·필터를 무시할 때가 있음 → 영상 위에 검은 막을 덮어 딤 */
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) { opacity: 1; }
.sf-grid--many .sf-clip::after { display: block; content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip::after { opacity: .7; }
/* 호버 딤 (확정, 한국타이어·갤럭시 공통): JS가 붙이는 .is-hov / .is-hot 기준
   주변 칸 위에 검은 막(영상 위에도 확실히 덮임), 호버한 칸은 맨 위로 + 살짝 확대 */
.sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip { filter: none; }
.sf-grid--many .sf-clip { filter: brightness(calc(1 + var(--d) * .1)); }
.sf-grid .sf-clip::after, .sf-grid--many .sf-clip::after { display: block; content: ""; position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-out); }
.sf-grid:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip::after,
.sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip::after { opacity: 0; }
.sf-grid.is-hov .sf-cell:not(.is-hot) .sf-clip::after { opacity: .72 !important; }
.sf-cell.is-hot { z-index: 30 !important; }
/* 공간형(갤럭시)은 칸 레이어 안쪽 막이 화면에 반영되지 않는 경우가 있어 칸 자체 투명도로 딤 (어두운 배경 위라 검게 가라앉음) */
.sf-grid--many.is-hov .sf-cell:not(.is-hot) { opacity: .3 !important; }
.sf-grid--many.is-hov .sf-cell:not(.is-hot) .sf-clip::after { opacity: 0 !important; }
.sf-grid--many .sf-cell.is-in { transition: scale .55s var(--ease-out), opacity .45s var(--ease-out); }
/* 공간형: 판 3D 기울기 제거(기울어진 판 안에서는 딤·호버 변화가 화면에 반영되지 않음) → 칸별 시차(--sx·--sy)로 공간감 */
.sf--many { perspective: none; }
.sf-grid--many { transform: none; will-change: auto; }
.sf-grid--many .sf-cell, .sf-grid--many .sf-cell:not(.is-empty):hover { translate: var(--sx, 0px) var(--sy, 0px); }
@media (max-width: 760px) { .sf-grid--many .sf-cell { translate: 0 var(--sy, 0px); } }
/* 판 기울기를 없앴으므로 갤럭시도 한국타이어와 같은 검은 막 딤으로 통일 */
.sf-grid--many.is-hov .sf-cell:not(.is-hot) { opacity: 1 !important; }
.sf-grid--many.is-hov .sf-cell:not(.is-hot) .sf-clip::after { opacity: .72 !important; }
/* 갤럭시 칸 틀의 밝기 필터가 안쪽 검은 막을 가림 → 필터 제거, 먼 칸의 어두움은 막의 기본 농도로 */
.sf-grid--many .sf-clip, .sf-grid--many:has(.sf-cell:not(.is-empty):hover) .sf-cell:not(:hover) .sf-clip, .sf-grid .sf-grid--many .sf-cell:hover .sf-clip, .sf-grid--many .sf-cell:not(.is-empty):hover .sf-clip { filter: none !important; }
.sf-grid--many .sf-clip::after { opacity: max(0, calc(var(--d) * -.2)) !important; }
.sf-grid--many.is-hov .sf-cell:not(.is-hot) .sf-clip::after { opacity: .72 !important; }
.sf-grid--many .sf-cell.is-hot .sf-clip::after { opacity: 0 !important; }

/* 같은 영상의 가로·세로 버전: 높이를 맞춰 나란히(폭은 각 비율만큼) + 좌상단 버전 라벨 */
.vpair { display: flex; gap: clamp(12px, 1.6vw, 24px); align-items: flex-start; }
.vp-item { position: relative; flex: var(--r) 1 0; min-width: 0; margin: 0; }
.vp-item .video { max-width: none !important; margin: 0 !important; aspect-ratio: var(--r); }
.vp-tag { position: absolute; left: 14px; top: 14px; z-index: 5; display: grid; gap: 3px; padding: 9px 13px 8px; border-radius: 10px; pointer-events: none;
  background: rgba(10, 10, 12, .38); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: opacity .5s var(--ease-out); }
.vp-tag b { display: flex; align-items: center; gap: .35em; font-size: clamp(13px, 1vw, 16px); font-weight: 700; letter-spacing: -.01em; color: var(--white); }
.vp-tag b::before { content: ""; width: .32em; height: .95em; background: var(--blue); transform: skewX(-18deg); }
.vp-tag small { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
/* 재생 조작 중엔 라벨이 방해되지 않게 흐리게 */
@media (hover: hover) { .vp-item:hover .vp-tag { opacity: .25; } }
@media (max-width: 760px) {
  .vpair { flex-wrap: wrap; }
  .vp-item:first-child { flex-basis: 100%; }
  .vp-item:last-child { flex: 0 0 72%; margin-inline: auto; }
  .vp-tag { left: 10px; top: 10px; padding: 7px 10px 6px; }
}
/* 포스터형 스타일프레임: 포스터는 항상 보이고, 호버해서 영상이 흐를 때만 영상이 위로 */
.sf--hover .sf-clip iframe { opacity: 0; }
.sf--hover .sf-cell.is-playing .sf-clip iframe { opacity: 1; }
/* Concept 키워드 칩 위 라벨 */
.cc-keys-label { display: block; margin-top: 28px; font-size: 10px; letter-spacing: .14em; color: rgba(33, 66, 159, .6); }
.cc-keys-label + .cc-keys { margin-top: 12px; }
/* 파트 머리 바로 아래 오는 기획 블록: 큰 번호(슬래시 포함)와 소제목이 붙어 보이지 않게 간격 확보 */
.part-head + .pb { margin-top: clamp(40px, 5vw, 80px); }
/* 스토리보드 화면: 씬 포스터를 깔고, 영상이 그 구간에서 흐를 때만 위에 보임(씬 전환 중엔 포스터로) */
.sb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-screen iframe { z-index: 1; }
.sb-screen.is-cut iframe { opacity: 0; transition-duration: .12s; }
/* Edit Concept 표지 (한국타이어): 카본 블랙 + 오렌지 슬래시 라인 */
.pp-cover--hk { background: radial-gradient(120% 130% at 100% 0%, #3a1a08 0%, #16100c 45%, #0b0b0d 100%); box-shadow: inset 0 0 0 1px rgba(242, 107, 33, .35); }
.pp-cover--hk::before { content: ""; position: absolute; right: 9%; top: -10%; width: 9%; height: 120%; background: #F26B21; transform: skewX(-18deg); opacity: .92; }
.pp-cover--hk .pp-name { position: relative; font-weight: 700; letter-spacing: -.02em; }
.pp-cover--hk .pp-line { background: #F26B21; }
.pp-cover--hk .pp-date { position: relative; }
/* 스펙 칸: 오렌지 배경일 때 라벨 가독성 */
.pb-proposal[style*="F26B21"] .pp-specs dt { color: rgba(255, 255, 255, .82); }
/* 상단 기획 블록(Color System 등) 바로 다음에 오는 영상 섹션과의 간격 */
.pb + .vm-wrap, .pb + .vpair, .pb + .sf, .pb + div[data-reveal] { margin-top: clamp(40px, 5vw, 80px); }

/* 컬러 시스템: 키컬러를 도출한 원본 아트 */
.cs-art { margin: 0 0 16px; padding: clamp(20px, 3vw, 40px); border-radius: 14px; background: #fff; display: grid; justify-items: center; gap: 14px; }
.cs-art img { display: block; width: 100%; max-width: 720px; height: auto; }
.cs-art figcaption { font-size: 13px; color: #555; text-align: center; }

/* ==========================================================================
   장면 진화 (process): AI 키 이미지 → 수없이 다시 생성한 결과들 → 확정 컷 → 완성 영상
   ========================================================================== */
.ev-lead { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .78); max-width: 880px; margin-bottom: clamp(28px, 3.4vw, 48px); }
.ev-head, .ev-row { display: grid; grid-template-columns: 200px minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(22px, 2.4vw, 40px); align-items: center; }
.ev-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 9px; color: var(--grey); }
.ev-head span:nth-child(4) { color: var(--white); }
.ev-list { list-style: none; margin: 0; padding: 0; }
.ev-row { position: relative; padding: 22px 0; border-bottom: 1px solid var(--line); }
/* 단계 사이 흐름 화살표 */
.ev-key, .ev-iter, .ev-card.is-final { position: relative; }
.ev-key::after, .ev-iter::after, .ev-row > .ev-card.is-final::after { content: ""; position: absolute; top: 50%; right: calc(-1 * clamp(22px, 2.4vw, 40px) + 4px); width: calc(clamp(22px, 2.4vw, 40px) - 8px); height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .55)); }
.ev-name { display: grid; gap: 6px; align-content: center; }
.ev-name b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--white); }
.ev-name small { font-size: 12px; line-height: 1.6; color: var(--grey); }
.ev-model { justify-self: start; padding: 3px 8px; border-radius: 999px; font-size: 9px; color: #fff; }
.ev-model--kling { background: #3d4cff; }
.ev-model--seedance { background: #2e9aa6; }
.ev-key { display: flex; align-items: center; gap: 6px; }
.ev-key img { flex: 1 1 0; min-width: 0; width: 0; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.ev-mini { flex: none; width: 8px; height: 1px; background: rgba(255, 255, 255, .5); }
/* 겹쳐 쌓인 생성 결과: 평소엔 카드 더미, 마우스를 올리면 부채꼴로 펼쳐지며 재생 */
.ev-iter { aspect-ratio: 16 / 9; cursor: pointer; outline: none; }
.ev-card { position: absolute; inset: 0; margin: 0; border-radius: 6px; overflow: hidden; background: #111; }
.ev-card video, .ev-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-iter .ev-card { translate: calc(var(--i) * -5px) calc(var(--i) * -5px); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14); transition: translate .55s var(--ease-out), rotate .55s var(--ease-out), filter .4s; }
.ev-iter .ev-card.is-ghost img { filter: grayscale(1) blur(3px) brightness(.45); }
.ev-iter .ev-card.is-try video { filter: grayscale(.7) brightness(.62); transition: filter .4s; }
.ev-iter.is-open .ev-card { translate: calc((var(--i) - 1.5) * 26%) calc(var(--i) * -6px); rotate: calc((var(--i) - 1.5) * 3deg); }
.ev-iter.is-open .ev-card.is-try video { filter: none; }
.ev-iter-tag { position: absolute; left: 8px; bottom: 7px; z-index: 9; padding: 3px 7px; border-radius: 3px; font-size: 8px; color: #fff; background: rgba(0, 0, 0, .65); transition: opacity .3s; }
.ev-iter-tag::before { content: "↻ "; }
.ev-iter.is-open .ev-iter-tag { opacity: 0; }
/* 확정 컷 */
.ev-row > .ev-card.is-final { position: relative; inset: auto; aspect-ratio: 16 / 9; overflow: visible; background: none; }
.ev-row > .ev-card.is-final video { border-radius: 6px; box-shadow: 0 0 0 2px var(--blue), 0 12px 32px rgba(1, 0, 249, .4); }
.ev-final-tag { position: absolute; left: 8px; bottom: 7px; z-index: 2; padding: 3px 7px; border-radius: 3px; font-size: 8px; color: #fff; background: var(--blue); }
.ev-film { position: relative; padding: 0; border: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; cursor: pointer; }
.ev-film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.ev-film span { position: absolute; right: 6px; bottom: 5px; padding: 2px 6px; border-radius: 3px; font-size: 8px; color: #fff; background: rgba(0, 0, 0, .6); }
@media (hover: hover) { .ev-film:hover img { scale: 1.06; } }
@media (max-width: 960px) {
  .ev-head { display: none; }
  .ev-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; grid-template-areas: "name name" "key iter" "final film"; }
  .ev-name { grid-area: name; } .ev-key { grid-area: key; } .ev-iter { grid-area: iter; } .ev-row > .ev-card.is-final { grid-area: final; } .ev-film { grid-area: film; }
  .ev-key::after, .ev-iter::after, .ev-row > .ev-card.is-final::after { display: none; }
  .ev-iter.is-open .ev-card { translate: calc((var(--i) - 1.5) * 12%) calc(var(--i) * -4px); }
}

/* ==========================================================================
   원테이크 타임라인 (timeline)
   ========================================================================== */
.tl-text { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72); max-width: 820px; margin-bottom: 26px; }
.tl-wrap { position: relative; padding-top: clamp(150px, 15vw, 210px); }
.tl-preview { position: absolute; top: 0; left: var(--x, 50%); width: clamp(230px, 24vw, 340px); aspect-ratio: 16 / 9; translate: -50% 0; border-radius: 10px; overflow: hidden; background: #111; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; scale: .94; transition: opacity .3s, scale .4s var(--ease-out), left .35s var(--ease-out); pointer-events: none; }
.tl-wrap.is-hover .tl-preview { opacity: 1; scale: 1; }
.tl-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tl-preview.is-empty video { opacity: 0; }
.tl-preview.is-empty { background: radial-gradient(circle at 50% 50%, #2a2f7a, #0a0e24); }
.tl-plabel { position: absolute; left: 8px; bottom: 7px; padding: 3px 7px; border-radius: 3px; font-size: 9px; color: #fff; background: rgba(0, 0, 0, .65); }
.tl-bar { position: relative; height: 56px; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.tl-seg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); padding: 0; border: 0; border-right: 2px solid var(--black); cursor: pointer; transition: filter .25s, transform .3s var(--ease-out); }
.tl-seg--kling { background: #3d4cff; }
.tl-seg--seedance { background: #2e9aa6; }
.tl-seg--edit { background: rgba(255, 255, 255, .22); }
@media (hover: hover) { .tl-bar:hover .tl-seg { filter: brightness(.55); } .tl-bar .tl-seg:hover { filter: brightness(1.25); } }
.tl-head { position: absolute; top: -6px; bottom: -6px; left: var(--x, -10px); width: 2px; background: #fff; pointer-events: none; opacity: 0; transition: opacity .3s, left .35s var(--ease-out); }
.tl-wrap.is-hover .tl-head { opacity: 1; }
.tl-ticks { position: relative; height: 18px; margin-top: 8px; font-size: 9px; color: var(--grey); }
.tl-ticks span { position: absolute; left: var(--l); translate: -50% 0; }
.tl-ticks span:first-child { translate: 0 0; } .tl-ticks span:last-child { translate: -100% 0; }
.tl-legend { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tl-legend li { display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; row-gap: 4px; align-items: center; }
.tl-sw { width: 14px; height: 14px; border-radius: 3px; }
.tl-legend b { font-size: 14px; color: var(--white); }
.tl-legend span { grid-column: 2; font-size: 12px; color: var(--grey); }
@media (max-width: 860px) { .tl-legend { grid-template-columns: 1fr; } .tl-bar { height: 44px; } }

/* 스토리보드 씬 설명: 라벨 칸이 긴 라벨(TRANSITION 등)에 맞게 늘어나 글자가 겹치지 않게 */
.sb-item dl div { grid-template-columns: minmax(52px, max-content) minmax(0, 1fr); column-gap: 14px; }
/* 펼침 폭을 자기 칸 안쪽으로, 타임라인/모델 색은 배경 블루와 구분되게 */
.ev-iter.is-open .ev-card { translate: calc((var(--i) - 1.5) * 11%) calc(var(--i) * -7px); rotate: calc((var(--i) - 1.5) * 2.5deg); }
.ev-iter.is-open { z-index: 3; }
.tl-seg--kling, .ev-model--kling, .tl-sw.tl-seg--kling { background: #8f9bff; }
.tl-seg--seedance, .ev-model--seedance, .tl-sw.tl-seg--seedance { background: #75ced6; }
.ev-model--kling, .ev-model--seedance { color: #0a0a0a; }
/* 블록 부제 (예: Production Process / Image → Motion → Final Cut) */
.pb .pi-title + .pb-sub { margin: calc(-1 * clamp(12px, 1.6vw, 22px)) 0 clamp(20px, 2.4vw, 32px); font-size: 11px; letter-spacing: .14em; color: var(--grey); }
.ev-none { font-size: 10px; color: var(--grey); }
/* In Film 미리보기: 칸 위에 겹쳐 그 장면을 재생 */
.pb-process { position: relative; }
.ev-pv { position: absolute; z-index: 6; border-radius: 6px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .25s; background: #000; }
.ev-pv.is-on.is-live { opacity: 1; }
.ev-pv iframe { width: 100%; height: 100%; border: 0; display: block; max-width: none; }
/* 타임라인: 설명과 도표 사이를 붙이고, 미리보기는 그 위(제목·설명을 덮어도 됨)에 띄움 */
.tl-text { margin-bottom: 18px; max-width: none; }
.tl-wrap { padding-top: 0; }
.tl-preview { top: auto; bottom: calc(100% + 12px); z-index: 8; }
.tl-vm { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.tl-vm iframe { width: 100%; height: 100%; border: 0; display: block; max-width: none; }
.tl-preview.is-film video { opacity: 0; }
.tl-preview.is-film { background: #0a0e24; }
.tl-preview.is-film .tl-vm.is-live { opacity: 1; }
/* 스토리보드: 소제목이 화면과 함께 고정 */
.sb-stage .pi-title { margin-bottom: clamp(14px, 1.6vw, 22px); }
.sb-stage { top: calc(50vh - min(24vw, 300px) - 40px); }
.sb--wide .sb-stage { top: 80px; padding-top: 12px; }
@media (max-width: 860px) {
  .sb-stage, .sb--wide .sb-stage { top: 70px; padding-top: 10px; }
  .sb-stage .pi-title { font-size: 18px; margin-bottom: 10px; }
}
/* Production Process: 스토리보드 씬 번호 (모델 배지 위) */
.ev-scn { font-size: 10px; letter-spacing: .14em; color: var(--white); }
.ev-name { grid-template-rows: auto auto; }
.ev-film span { font-variant-numeric: tabular-nums; }
/* Production Process 설명: 도표와 같은 폭으로 */
.ev-lead { max-width: none; }
/* NG Takes 라벨: ↻ 대신 원 안 X 마크 */
.ev-iter-tag { display: inline-flex; align-items: center; gap: 5px; }
.ev-iter-tag::before { content: ""; width: 9px; height: 9px; border: 1px solid #ff5a5a; border-radius: 50%; background: linear-gradient(45deg, transparent 45%, #ff5a5a 45%, #ff5a5a 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #ff5a5a 45%, #ff5a5a 55%, transparent 55%); }

/* 프로젝트 상세 페이지 맨 하단 Contact: 바로 위 Next Project 칸과 비례가 맞게 더 작게 (다른 페이지의 Contact는 그대로) */
body[data-page="project"] .footer { padding: clamp(48px, 6vw, 96px) var(--gutter) 28px; }
body[data-page="project"] .footer-cta { font-size: clamp(32px, 6vw, 110px); }
body[data-page="project"] .footer-mail { margin-top: 32px; padding: 16px 26px; font-size: clamp(14px, 1.6vw, 20px); }
body[data-page="project"] .footer-cols { margin-top: clamp(48px, 6vw, 80px); }

/* ==========================================================================
   캐릭터 소개 (characters): 가로형 카드 2장
   ========================================================================== */
.ch-row { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: clamp(24px, 3vw, 48px); }
.ch-card { margin: 0; }
.ch-img { display: block; width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(1, 0, 249, .45), #0c0c10 70%); }
.ch-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ch-card.is-empty .ch-img { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.ch-card figcaption { margin-top: 18px; display: grid; gap: 6px; text-align: left; }
.ch-en { font-size: 10px; letter-spacing: .16em; color: #6f6cff; }
.ch-card b { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.01em; color: var(--white); }
.ch-card span.ko { font-size: 14px; line-height: 1.7; color: var(--grey); }
@media (max-width: 760px) { .ch-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ch-card figcaption { margin-top: 12px; } .ch-card span.ko { font-size: 12.5px; } }

/* ==========================================================================
   전광판 목업 (mockup): 왼쪽 설명 / 오른쪽 야구장 전광판(UI 없이 소리 없이 반복)
   ========================================================================== */
.pb-mockup { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.lb-note { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.lb-stage { display: grid; gap: clamp(36px, 3vw, 44px); width: min(100%, 980px); justify-self: end; }
.pb-mockup.is-wide .lb-stage { padding-top: 18px; }
.lb-screen { position: relative; aspect-ratio: var(--r, 1); overflow: hidden; background: #000; }
.lb-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; pointer-events: none; }
/* 아주 미세한 LED 격자 + 화면 광택 */
.lb-screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .14;
  background: linear-gradient(90deg, #000 0 1px, transparent 1px) 0 0 / 2px 2px, linear-gradient(0deg, #000 0 1px, transparent 1px) 0 0 / 2px 2px; }
.lb-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), transparent 35%); box-shadow: inset 0 0 30px rgba(0, 0, 0, .45); }

/* 경기장 사진 목업 (1:1): 사진 속 전광판 화면(960×682 기준 x302~633, y35~361) 위에 영상을 얹음 */
.lb-photo { position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.lb-photo img { display: block; width: 100%; height: auto; }
.lb-photo .lb-screen { position: absolute; left: 31.7%; top: 5.6%; width: 34.25%; height: 47.3%; aspect-ratio: auto; }
.lb-photo .lb-screen { container-type: size; }
.lb-photo .lb-screen .lb-fit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;
  width: min(100cqw, calc(100cqh * var(--r))); height: min(100cqh, calc(100cqw / var(--r))); }
.lb-photo .lb-screen .lb-fit iframe { filter: brightness(.96) saturate(1.04); }
.lb-photo .lb-screen iframe.lb-blur { inset: auto; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--r))); height: max(100cqh, calc(100cqw / var(--r)));
  transform: translate(-50%, -50%) scale(1.35); filter: blur(16px) brightness(.7) saturate(1.1); }
/* 사진 톤에 맞게 화면 위 은은한 빛 반사 */
.lb-photo .lb-screen::after { background: linear-gradient(160deg, rgba(255, 255, 255, .08), transparent 40%); box-shadow: inset 0 0 18px rgba(0, 0, 0, .35); }

/* 경기장 사진 목업 (와이드): 1420×830 기준 화면 x213~1020, y209~465 — 설명 아래 2장 나란히 */
.lb-photo.is-wide { margin: 0; overflow: visible; box-shadow: none; }
.lb-photo.is-wide img { border-radius: 10px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.lb-photo.is-wide .lb-screen { left: 15%; top: 25.18%; width: 56.83%; height: 30.84%; }
.lb-photo.is-wide .lb-cap { display: block; margin-top: 12px; font-size: 10px; letter-spacing: .14em; color: var(--grey); }
.pb-mockup.is-wide { grid-template-columns: 1fr; gap: clamp(20px, 2.4vw, 32px); }
.pb-mockup.is-wide .lb-note { max-width: 820px; }
.pb-mockup.is-wide .lb-stage { width: 100%; padding-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
@media (max-width: 760px) { .pb-mockup.is-wide .lb-stage { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .pb-mockup { grid-template-columns: 1fr; gap: 24px; }
  .lb-stage { justify-self: stretch; width: 100%; }
}

/* ==========================================================================
   제작 과정 (flow): 생성 이미지(작은 키프레임)를 영상 사이 접점에 꽂고, 큰 영상 카드가 그 사이를 메우는 한 줄 → 최종 결과
   ========================================================================== */
.fl-lead { font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .78); max-width: 1100px; margin-bottom: clamp(28px, 3vw, 40px); }
.fl-wrap { --kh: 112px; --kg: 26px; --ah: 0px; display: grid; gap: clamp(30px, 3vw, 48px); }
.fl-seq { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: start; }
.fl-labs { display: grid; grid-template-rows: calc(var(--kh) + var(--kg)) auto; }
.fl-labs.has-ai { grid-template-rows: var(--ah) calc(var(--kh) + var(--kg)) auto; }
.fl-lane.has-ai { --ah: 130px; }
.fl-endrow .fl-labs, .fl-assets .fl-labs { grid-template-rows: auto; }
.fl-lab { display: grid; gap: 3px; align-content: start; }
.fl-sname { font-size: 10px; letter-spacing: .16em; color: #8583ff; }
.fl-tool { font-size: 12px; line-height: 1.5; color: var(--grey); }
.fl-lane { display: grid; gap: 10px; }
.fl-lname { font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .85); padding-left: calc(150px + 24px); }

/* 트랙: 이미지 칩은 위쪽(접점), 영상은 아래 한 줄 */
.fl-track { position: relative; container-type: inline-size; display: flex; align-items: flex-end; padding: calc(var(--ah) + var(--kh) + var(--kg)) 22px 0; }
.fl-track > * { --cw: min(250px, calc((100cqw - var(--fx)) / var(--n))); }
.fl-key { position: relative; flex: 0 0 34px; align-self: stretch; }
/* 키프레임 위에 붙는 AI 생성 소재 */
.fl-key > .fl-chip.is-ai { top: calc(-1 * (var(--ah) + var(--kh) + var(--kg))); outline: 1px dashed rgba(133, 131, 255, .9); outline-offset: 2px; box-shadow: none; }
.fl-key.has-ai > .fl-chip:not(.is-ai)::after { content: "+"; position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%); font-size: 14px; color: #a3a1ff; }
.fl-key::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--kg)); bottom: 12%; border-left: 1px dashed rgba(133, 131, 255, .7); }
.fl-key::after { content: ""; position: absolute; left: calc(50% - 3px); bottom: calc(12% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #8583ff; }
.fl-key > .fl-chip { position: absolute; top: calc(-1 * (var(--kh) + var(--kg))); left: calc(50% - var(--kh) * var(--r, 1) / 2); }
.fl-item { position: relative; flex: none; }
.fl-item + .fl-item { margin-left: 16px; }
.fl-above { position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--kh) + var(--kg)); display: flex; flex-direction: column; align-items: center; }
.fl-above::after { content: ""; flex: 1; border-left: 1px dashed rgba(133, 131, 255, .7); }

/* 소재 타일 공통 */
.fl-t { position: relative; margin: 0; aspect-ratio: var(--r, 1); overflow: hidden; border-radius: 8px; background: #111114; isolation: isolate;
  transition: opacity .35s, filter .35s, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.fl-t img, .fl-t video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.fl-t figcaption { position: absolute; left: 7px; top: 7px; z-index: 2; max-width: calc(100% - 14px); padding: 3px 7px; border-radius: 4px; font-size: 9px; letter-spacing: .06em; color: #fff; background: rgba(0, 0, 0, .62); white-space: nowrap; }
.fl-chip { flex: none; height: var(--kh); width: calc(var(--kh) * var(--r, 1)); border-radius: 6px; box-shadow: 0 0 0 1px rgba(133, 131, 255, .35); }
.fl-chip figcaption { left: 4px; top: 4px; padding: 2px 5px; font-size: 7.5px; }
.fl-vid { width: var(--cw); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }

/* 합성 박스 (여러 영상 → 하나) */
.fl-box { flex: none; display: grid; gap: 8px; padding: 8px; border-radius: 12px; border: 1px dashed rgba(133, 131, 255, .55); }
.fl-bparts { display: flex; align-items: center; gap: 6px; }
.fl-box.is-compose .fl-vid { width: calc(var(--cw) * .78); }
.fl-box.is-grid .fl-bparts { display: grid; grid-template-columns: repeat(2, auto); }
.fl-box.is-grid .fl-vid { width: calc(var(--cw) * .55); }
.fl-box.is-grid .fl-vid figcaption { font-size: 7.5px; }
.fl-plus { flex: none; font-style: normal; font-size: 14px; color: #8583ff; }
.fl-bnote { font-size: 8.5px; letter-spacing: .06em; color: #a3a1ff; }

/* 파이프라인 끝: 최종 결과 */
.fl-to { flex: 0 0 48px; align-self: center; position: relative; height: 1px; margin: 0 16px; background: rgba(255, 255, 255, .35); }
.fl-to::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid rgba(255, 255, 255, .6); border-right: 1px solid rgba(255, 255, 255, .6); transform: rotate(45deg); }
.fl-enditem .fl-final { width: calc(var(--cw) * 1.3 * var(--r, 1)); margin-left: 0; transform-origin: left center; }
.fl-enditem .fl-final:hover, .fl-wrap.is-dim .fl-enditem .fl-final.is-on { transform: scale(1.2); box-shadow: 0 0 0 2px var(--blue), 0 24px 50px rgba(1, 0, 249, .55); }
/* AI 생성 소재 / 최종 결과 */
.fl-assets { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 24px; align-items: center; }
.fl-achips { display: flex; gap: 8px; padding-left: 22px; }
.fl-chip.is-asset { outline: 1px dashed rgba(133, 131, 255, .85); outline-offset: 2px; box-shadow: none; }
.fl-final { width: min(100%, 470px); box-shadow: 0 0 0 2px var(--blue), 0 18px 40px rgba(1, 0, 249, .4); margin-left: 22px; }
.fl-final::before { display: none; }
.fl-wrap.is-wide .fl-final { width: min(calc(100% - 22px), 920px); }

/* 하위 섹션 (한 제작 과정 안의 여러 프레임) */
.fl-sub { margin-top: clamp(28px, 3vw, 44px); padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid rgba(133, 131, 255, .35); }
.fl-sub + .fl-sub { margin-top: clamp(56px, 6vw, 88px); }
.fl-subtitle { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; letter-spacing: -.01em; color: var(--white); }
.fl-subtitle .mono-label { font-size: 10px; letter-spacing: .14em; color: #8583ff; }

/* 호버: 연결된 소재만 밝게, 나머지는 딤 — 올린 이미지 칩은 크게 */
.fl-wrap.is-dim .fl-t { opacity: .22; filter: grayscale(.7); }
.fl-wrap.is-dim .fl-t.is-on { opacity: 1; filter: none; z-index: 3; box-shadow: 0 0 0 2px #8583ff, 0 18px 36px rgba(0, 0, 0, .6); }
.fl-vid:hover { transform: scale(1.45); z-index: 8 !important; box-shadow: 0 0 0 2px #8583ff, 0 30px 60px rgba(0, 0, 0, .65); }
.fl-box .fl-vid:hover { transform: scale(1.6); }
.fl-chip:hover { transform: scale(1.9); z-index: 6 !important; }
/* 연결 영상 호버 시 두 이미지 사이 화살표 */
.fl-link-arrow { position: absolute; z-index: 7; height: 2px; background: linear-gradient(90deg, rgba(133, 131, 255, .3), #8583ff); transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .2s; }
.fl-link-arrow::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border-top: 2px solid #8583ff; border-right: 2px solid #8583ff; transform: rotate(45deg); }
.fl-link-arrow.is-on { transform: scaleX(1); opacity: 1; }
.fl-wrap.is-dim .fl-final.is-on { box-shadow: 0 0 0 2px var(--blue), 0 18px 40px rgba(1, 0, 249, .5); }

@media (max-width: 900px) {
  .fl-wrap { --kh: 76px; --kg: 18px; }
  .fl-lane.has-ai { --ah: 92px; }
  .fl-labs.has-ai { grid-template-rows: auto; }
  .fl-vid:hover, .fl-box .fl-vid:hover, .fl-enditem .fl-final:hover { transform: none; }
  .fl-seq, .fl-assets { grid-template-columns: 1fr; row-gap: 10px; }
  .fl-labs { grid-template-rows: auto; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 28px; }
  .fl-lname { padding-left: 0; }
  .fl-track { overflow-x: auto; padding-left: 44px; padding-right: 30px; margin: 0 -16px; padding-bottom: 6px; scrollbar-width: none; }
  .fl-track > * { --cw: 150px; }
  .fl-achips, .fl-final { padding-left: 0; margin-left: 0; }
  .fl-final, .fl-wrap.is-wide .fl-final { width: 100%; max-width: 520px; }
  .fl-chip:hover { transform: none; }
  .fl-sub { padding-left: 12px; }
}

/* ==========================================================================
   섹션형 레이아웃 (p.layout = 'sections'): 가운데 정렬 섹션 제목 + 프레임별 챕터 밴드(목업 ↔ 설명 좌우 번갈아)
   ========================================================================== */
.part.is-sections > :is(.pb-colors, .pb-timeline, .pb-chars) > .pi-title { justify-content: center; text-align: center; }
.part.is-sections > .pb-timeline > .tl-text { margin-left: auto; margin-right: auto; text-align: center; }
.part.is-sections .ch-row { justify-content: center; }
.part.is-sections .ch-card figcaption { text-align: center; justify-items: center; }

/* 챕터: 목업 + 그 제작 과정을 한 밴드로 */
.pb-chapter { position: relative; margin-top: clamp(80px, 9vw, 140px); padding: clamp(56px, 5.5vw, 88px) clamp(20px, 3.4vw, 60px) clamp(40px, 4vw, 64px);
  border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ch-no { position: absolute; left: clamp(20px, 3.4vw, 60px); top: clamp(22px, 2.2vw, 32px); font-size: 10px; letter-spacing: .18em; color: #8583ff; }
.pb-chapter > .pb:first-of-type { margin-top: 0; }
.pb-chapter .pb-mockup { margin-top: 0; }
.pb-chapter.is-rev .pb-mockup:not(.is-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.pb-chapter.is-rev .pb-mockup:not(.is-wide) .lb-text { order: 2; }
.pb-chapter.is-rev .pb-mockup:not(.is-wide) .lb-stage { justify-self: start; }
.pb-chapter .pb-mockup.is-wide .lb-text { text-align: center; }
.pb-chapter .pb-mockup.is-wide .pi-title { justify-content: center; }
.pb-chapter .pb-mockup.is-wide .lb-note { margin: 0 auto; }
/* 챕터 안 제작 과정: 점선 구분 + 한 단계 작은 제목 */
.pb-chapter > .pb-flow { margin-top: clamp(56px, 5.5vw, 88px); padding-top: clamp(36px, 3.4vw, 52px); border-top: 1px dashed rgba(255, 255, 255, .12); }
.pb-chapter > .pb-flow > .pi-title { font-size: clamp(17px, 1.4vw, 21px); }
@media (max-width: 1000px) {
  .pb-chapter.is-rev .pb-mockup:not(.is-wide) { grid-template-columns: 1fr; }
  .pb-chapter.is-rev .pb-mockup:not(.is-wide) .lb-text { order: 0; }
}
@media (max-width: 760px) {
  .pb-chapter { margin-left: -8px; margin-right: -8px; padding: 52px 14px 32px; border-radius: 18px; }
  .ch-no { left: 14px; top: 20px; }
}
/* 섹션 제목 → 내용 간격 통일: 내레이션 스크립트 사이드는 grid gap(14px)이 더해지므로 그만큼 뺌 */
.ns-side > .pi-title { margin-bottom: calc(clamp(20px, 2.4vw, 32px) - 14px); }

/* ==========================================================================
   간격 통일: 섹션 제목 → (부제) → 설명 → 내용, 모두 같은 간격(--sg)
   ========================================================================== */
:root { --sg: clamp(20px, 2.4vw, 32px); }
.pi-title, .pb .pi-title, .sb-stage .pi-title { margin-bottom: var(--sg); }
.pb .pi-title + .pb-sub { margin: calc(-1 * var(--sg) + 10px) 0 var(--sg); }
.fl-lead, .tl-text, .lb-note, .ev-lead { margin-bottom: var(--sg); }
.lb-text > .lb-note { margin-bottom: 0; }
.pb-sub + .fl-sub { margin-top: 0; }
.fl-subtitle { margin-bottom: var(--sg); }
@media (max-width: 760px) { .sb-stage .pi-title { margin-bottom: var(--sg); } }
.ns-side > .pi-title { margin-bottom: calc(var(--sg) - 14px); } /* 사이드 grid gap(14px) 보정 */
.ev-lead + .ev-head { margin-top: 0; }
.fl-key + .fl-to { margin-left: 7px; } /* 앞이 키프레임(점선)이면 점선 중심 기준으로 좌우 여백을 같게 */
/* 같은 장면의 캐릭터 컷 두 장(또리 왼쪽 · 빅 오른쪽): 실선 박스로 묶어 점선 위 가운데에, 번호는 박스 좌상단에 */
.fl-kgroup { position: absolute; top: calc(-1 * (var(--kh) + var(--kg)) - 7px); left: calc(50% - var(--kh) - 10px); display: flex; gap: 6px; padding: 6px; border: 1px solid rgba(133, 131, 255, .85); border-radius: 12px; }
.fl-kgroup > .fl-chip { position: relative; top: auto; left: auto; }
.fl-kno { position: absolute; left: 10px; top: 0; transform: translateY(-50%); z-index: 3; padding: 2px 6px; border-radius: 4px; font-size: 8px; letter-spacing: .06em; color: #fff; background: #3a37d6; }
/* 정방형 프레임 최종 영상(파이프라인 끝): 호버 시 크게 — 오른쪽 기준으로 왼쪽으로 커짐 (가로형은 기존 크기 유지) */
.fl-enditem .fl-final { transform-origin: right center; }
.fl-enditem .fl-final:hover, .fl-wrap.is-dim .fl-enditem .fl-final.is-on { transform: scale(2.2); z-index: 9 !important; }
@media (max-width: 900px) { .fl-enditem .fl-final:hover { transform: none; } }
/* 정방형 최종 영상은 섹션(영상 개수)과 관계없이 같은 크기 — 호버 시에도 같은 크기로 */
.fl-enditem .fl-final { width: clamp(120px, 10.5vw, 150px); }
/* 영상 카드가 큰 줄(세로형 3:4 — Outsong)은 최종 영상도 옆 카드 폭에 맞추고, 호버 시 크기는 다른 섹션과 같게(약 330px) */
.fl-track:has(.fl-vid[style*="--r:0.75"]) .fl-enditem .fl-final { width: var(--cw); }
.fl-track:has(.fl-vid[style*="--r:0.75"]) .fl-enditem .fl-final:hover,
.fl-wrap.is-dim .fl-track:has(.fl-vid[style*="--r:0.75"]) .fl-enditem .fl-final.is-on { transform: scale(var(--hs, 1.32)); }
/* 최종 영상 앞 화살표: 좌우 같은 여백(24px). 키프레임 뒤에서는 점선 중심(키 폭 34px의 절반) 기준 */
.fl-to { margin: 0 24px; }
.fl-key + .fl-to { margin-left: 7px; }
/* Outsong(세로형 카드 줄): 최종 영상과 화살표를 댄스 영상 높이 기준 가운데로 */
.fl-track:has(.fl-vid[style*="--r:0.75"]) .fl-enditem { align-self: center; }
.fl-track:has(.fl-vid[style*="--r:0.75"]) .fl-enditem .fl-final { transform-origin: center; }
/* 첫 키프레임이 두 장 묶음이면 묶음이 왼쪽 라벨 칸을 침범하지 않게 그만큼 안쪽으로 */
.fl-key.has-pair:first-child { margin-left: calc(var(--kh) - 28px); }

/* ==========================================================================
   상단 메뉴 Works 드롭다운 — 상단바에서 흘러내린 한 몸처럼(U자)
   · .nav-drop: 위치·펼침(clip) 담당 래퍼 (body에 있음: 헤더 안이면 backdrop-filter가 뒤를 못 흐림)
   · .nd-body: 헤더와 같은 유리. 윗변은 상단바 아래 변 위로 9px 겹쳐 그 경계선을 블러로 지움(마스크로 서서히)
   · .nd-ear: 몸통과 상단바가 만나는 모서리를 오목하게 이어주는 필렛 — 상단바 아래 림이 곡선으로 몸통 옆선까지 이어짐
   · .on-light: 상단바가 밝은 배경용 유리로 바뀌면 같이 바뀜
   ========================================================================== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-drop {
  --R: 20px; --ov: 9px; --tint: rgba(18, 18, 20, .20); --hi: rgba(255, 255, 255, .06); --rim: rgba(255, 255, 255, .12);
  position: fixed; z-index: 501; top: 60px; left: 50%; transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  clip-path: inset(0 -40px 100% -40px);
  transition: opacity .35s var(--ease), clip-path .55s var(--ease);
}
.nav-drop.is-open { opacity: 1; pointer-events: auto; clip-path: inset(0 -40px -80px -40px); }
.nd-body, .nd-ear {
  -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
  backdrop-filter: blur(9px) saturate(185%) brightness(1.08);
}
html.glass-refract .nd-body {
  -webkit-backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
  backdrop-filter: url(#glass-lens) blur(3px) saturate(185%) brightness(1.08);
}
.nd-body {
  position: relative; isolation: isolate; display: grid; min-width: 220px; padding: calc(var(--ov) + 10px) 8px 14px;
  border: 1px solid var(--rim); border-top: 0; border-radius: 0 0 40px 40px;
  background: linear-gradient(180deg, var(--hi), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .03)), var(--tint);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .03), 0 24px 50px -18px rgba(0, 0, 0, .5);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ov)); mask-image: linear-gradient(180deg, transparent 0, #000 var(--ov));
}
.nd-body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .05) 24%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .08) 100%);
}
.nd-body::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .14), inset 12px 0 14px -12px rgba(255, 255, 255, .18), inset -12px 0 14px -12px rgba(255, 255, 255, .18);
}
/* 오목 필렛: 상단바 아래 변(겹친 9px 포함)에서 몸통 옆선으로 둥글게 이어짐. 곡선 위에 상단바와 같은 림 한 줄 */
.nd-ear {
  position: absolute; top: 0; width: var(--R); height: calc(var(--ov) + var(--R)); pointer-events: none;
  background: radial-gradient(circle at var(--cx) 100%, transparent var(--R), var(--rim) var(--R), var(--rim) calc(var(--R) + 1px), transparent calc(var(--R) + 1.5px)),
    linear-gradient(180deg, var(--hi), var(--hi)), var(--tint);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--ov)), radial-gradient(circle at var(--cx) 100%, transparent var(--R), #000 calc(var(--R) + .5px));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--ov)), radial-gradient(circle at var(--cx) 100%, transparent var(--R), #000 calc(var(--R) + .5px));
  mask-composite: intersect;
}
.nd-ear.l { --cx: 0%; right: calc(100% - 1px); }
.nd-ear.r { --cx: 100%; left: calc(100% - 1px); }

.nd-body a {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 16px;
  color: var(--white); text-shadow: 0 0 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .55);
  opacity: 0; transform: translateY(-8px);
  transition: opacity .4s var(--ease) var(--d, 0s), transform .4s var(--ease) var(--d, 0s), background .25s;
}
.nd-body a:last-child { border-radius: 16px 16px 32px 32px; }
.nav-drop.is-open .nd-body a { opacity: 1; transform: translateY(0); }
.nd-body a:hover { background: rgba(255, 255, 255, .1); }
.nd-body a b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.nd-body a .ko { font-size: 11px; color: rgba(255, 255, 255, .62); }
/* 카테고리 사이 구분선(양쪽 여백) — 호버한 칸 위아래 선은 숨김 */
.nd-body a + a::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: rgba(255, 255, 255, .14); pointer-events: none; transition: opacity .25s; }
.nd-body a:hover::before, .nd-body a:hover + a::before { opacity: 0; }

/* 밝은 배경 위: 상단바(.header.on-light)와 같은 밝은 유리 */
.nav-drop.on-light { --tint: rgba(255, 255, 255, .06); --hi: rgba(255, 255, 255, .16); --rim: rgba(10, 10, 10, .09); }
.nav-drop.on-light .nd-body, .nav-drop.on-light .nd-ear {
  -webkit-backdrop-filter: blur(9px) saturate(150%) brightness(.97); backdrop-filter: blur(9px) saturate(150%) brightness(.97);
}
html.glass-refract .nav-drop.on-light .nd-body {
  -webkit-backdrop-filter: url(#glass-lens) blur(3px) saturate(150%) brightness(.97); backdrop-filter: url(#glass-lens) blur(3px) saturate(150%) brightness(.97);
}
.nav-drop.on-light .nd-body { box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .22); }
.nav-drop.on-light .nd-body::after { box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .3), inset 12px 0 14px -12px rgba(255, 255, 255, .35), inset -12px 0 14px -12px rgba(255, 255, 255, .35); }
.nav-drop.on-light .nd-body a { color: var(--ink); text-shadow: 0 0 6px rgba(244, 244, 242, .8); }
.nav-drop.on-light .nd-body a .ko { color: rgba(10, 10, 10, .55); }
.nav-drop.on-light .nd-body a:hover { background: rgba(10, 10, 10, .06); }
.nav-drop.on-light .nd-body a + a::before { background: rgba(10, 10, 10, .12); }
@media (max-width: 760px) { .nav-drop { display: none; } }
/* U자: 아래 라운드를 크게(90px) — 마지막 칸이 곡선에 걸리지 않게 아래 여백·좌우 여백을 넉넉히 */
.nd-body { border-radius: 0 0 90px 90px; padding: calc(var(--ov) + 10px) 14px 44px; min-width: 240px; }
.nd-body a { text-align: center; align-items: center; }
.nd-body a:last-child { border-radius: 16px 16px 60px 60px; }
/* 옆·아래 림(테두리 + 안쪽 광택)은 필렛 곡선이 끝나는 지점부터 시작 → 곡선이 그대로 옆선으로 이어지고, 상단바 안으로 세로선이 올라가지 않게 */
.nd-body { border: 0; }
.nd-body::after {
  top: calc(var(--ov) + var(--R)); border: 1px solid var(--rim); border-top: 0;
  box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .14), inset 12px 0 14px -12px rgba(255, 255, 255, .18), inset -12px 0 14px -12px rgba(255, 255, 255, .18);
}
.nav-drop.on-light .nd-body::after { box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .3), inset 12px 0 14px -12px rgba(255, 255, 255, .35), inset -12px 0 14px -12px rgba(255, 255, 255, .35); }
.nd-ear.l { right: 100%; } .nd-ear.r { left: 100%; }
/* 옆 광택은 테두리와 분리해 위에서 서서히 생기게(곡선 아래 딱 끊기는 가로 경계 제거) */
.nd-body::after, .nav-drop.on-light .nd-body::after { box-shadow: none; }
.nd-body::before {
  box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .14), inset 12px 0 14px -12px rgba(255, 255, 255, .18), inset -12px 0 14px -12px rgba(255, 255, 255, .18);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--ov) + 4px), #000 calc(var(--ov) + var(--R) + 36px));
  mask-image: linear-gradient(180deg, transparent 0, transparent calc(var(--ov) + 4px), #000 calc(var(--ov) + var(--R) + 36px));
}
.nav-drop.on-light .nd-body::before { box-shadow: inset 0 -8px 10px -8px rgba(255, 255, 255, .3), inset 12px 0 14px -12px rgba(255, 255, 255, .35), inset -12px 0 14px -12px rgba(255, 255, 255, .35); }
/* 등장: 가려지며 펼쳐지는(마스크) 대신 패널 모양 그대로 위에서 아래로 부드럽게 슬라이드 + 페이드 */
.nav-drop, .nav-drop.is-open { clip-path: none; }
.nav-drop { transform: translate(-50%, -18px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.nav-drop.is-open { transform: translate(-50%, 0); }
/* 래퍼(.nav-drop)에 opacity·clip-path·mask가 걸리면 그 안의 backdrop-filter가 페이지를 못 흐림(유리가 사라지고 색이 달라짐)
   → 래퍼는 위치·슬라이드(transform)만, 페이드는 유리 조각(.nd-body, .nd-ear)에 직접 */
.nav-drop, .nav-drop.is-open { opacity: 1; clip-path: none; transition: transform .6s var(--ease); }
.nd-body, .nd-ear { opacity: 0; transition: opacity .45s var(--ease); }
.nav-drop.is-open .nd-body, .nav-drop.is-open .nd-ear { opacity: 1; }
/* 상단바를 위 레이어로: 드롭다운은 상단바 뒤(아래 레이어)에서 빠져나오듯 내려옴 */
.nav-drop { z-index: 499; }
/* 슬라이드 인: 처음엔 패널 전체가 상단바 뒤(위)에 접혀 있다가 자기 높이만큼 내려오며 빠져나옴.
   상단바 아래 변보다 위로 올라간 부분은 같은 속도로 잘라내서(clip) 상단바에서 미끄러져 나오는 것처럼 보임.
   (clip은 유리 조각 자신에게 — 래퍼에 걸면 블러가 사라짐) */
.nav-drop { --h: 320px; transform: translate(-50%, calc(-1 * var(--h))); transition: transform .65s var(--ease); }
.nav-drop.is-open { transform: translate(-50%, 0); }
.nd-body, .nd-ear, .nav-drop.is-open .nd-body, .nav-drop.is-open .nd-ear { opacity: 1; }
.nd-body, .nd-ear { clip-path: inset(var(--h) -80px -80px -80px); transition: clip-path .65s var(--ease); }
.nav-drop.is-open .nd-body, .nav-drop.is-open .nd-ear { clip-path: inset(0 -80px -80px -80px); }
/* 상단바 뒤로 겹쳐 들어가는 부분 없음: 겹침(--ov) 0 → 상단바 유리 뒤로 패널이 비쳐 보이지 않게 */
.nav-drop { --ov: 0px; }
.nd-body { padding-top: 14px; }
/* 슬라이드 인 v2: .nav-drop은 상단바 아래 변에 고정된 창(overflow로 잘라냄 — 블러는 유지됨),
   그 안의 .nd-slide가 자기 높이만큼 위(상단바 뒤)에서 내려옴 → 보이는 윗변이 항상 상단바 아래 변에 붙어 있음 */
.nav-drop, .nav-drop.is-open { transform: translateX(-50%); transition: none; overflow: hidden; padding: 0 var(--R) 80px; }
.nd-body, .nd-ear, .nav-drop.is-open .nd-body, .nav-drop.is-open .nd-ear { clip-path: none; transition: none; }
.nd-slide { position: relative; transform: translateY(calc(-100% - 2px)); transition: transform .65s var(--ease); }
.nav-drop.is-open .nd-slide { transform: translateY(0); }
.nav-drop, .nav-drop.is-open { pointer-events: none; }   /* 창의 투명 여백은 클릭을 막지 않게 — 패널만 받음 */
.nav-drop.is-open .nd-body { pointer-events: auto; }

/* ==========================================================================
   상단바 ↔ 드롭다운 일체감: 패널이 내려오는 동안 상단바 아래 변의 흰 라인(테두리·아래 광택·안쪽 림)이
   패널(+양쪽 곡선)이 붙는 구간에서만 서서히 사라짐 → 상단바 윤곽이 곡선을 타고 패널 옆선으로 이어지는 한 덩어리
   (상단바 테두리는 지울 수 있게 ::after 안쪽 선으로 옮김)
   ========================================================================== */
@property --cut { syntax: '<number>'; inherits: true; initial-value: 0; }
.header {
  --cut: 0; --gx: 0px; --gw: 0px;
  transition: transform .6s var(--ease), background .5s var(--ease), border-color .5s, color .4s, box-shadow .5s, --cut .55s var(--ease);
}
.header.drop-open { --cut: 1; }
.header, .header.on-light { border-color: transparent; }
.header::after {
  box-shadow:
    inset 0 6px 8px -6px rgba(255, 255, 255, .28),
    inset 0 -8px 10px -8px rgba(255, 255, 255, .14),
    inset 12px 0 14px -12px rgba(255, 255, 255, .18),
    inset -12px 0 14px -12px rgba(255, 255, 255, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.header.on-light::after {
  box-shadow:
    inset 0 6px 8px -6px rgba(255, 255, 255, .55),
    inset 0 -8px 10px -8px rgba(255, 255, 255, .3),
    inset 12px 0 14px -12px rgba(255, 255, 255, .35),
    inset -12px 0 14px -12px rgba(255, 255, 255, .35),
    inset 0 0 0 1px rgba(10, 10, 10, .1);
}
.header::before, .header::after {
  --a: calc(1 - var(--cut));
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 4px), rgba(0, 0, 0, var(--a)) var(--gx), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw)), #000 calc(var(--gx) + var(--gw) + 4px)) bottom / 100% 16px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 4px), rgba(0, 0, 0, var(--a)) var(--gx), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw)), #000 calc(var(--gx) + var(--gw) + 4px)) bottom / 100% 16px no-repeat;
}
/* 패널과 양쪽 곡선을 한 유리 조각으로(.nd-body가 곡선 폭 R까지 포함, U자는 JS path로 잘라냄) — 곡선 부분 굴절이 달라 보이던 것 제거.
   .nd-ear는 이제 곡선 윤곽선만 그림(유리 없음) */
.nav-drop, .nav-drop.is-open { padding: 0 0 80px; }
.nd-body { border-radius: 0; padding-left: calc(var(--R) + 14px); padding-right: calc(var(--R) + 14px); min-width: calc(240px + 2 * var(--R)); }
.nd-body::before { left: var(--R); right: var(--R); border-radius: 0 0 90px 90px; }
.nd-body::after { left: var(--R); right: var(--R); border-radius: 0 0 90px 90px; }
.nd-ear, .nav-drop.on-light .nd-ear {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: radial-gradient(circle at var(--cx) 100%, transparent var(--R), var(--rim) var(--R), var(--rim) calc(var(--R) + 1px), transparent calc(var(--R) + 1.5px));
  -webkit-mask-image: none; mask-image: none; z-index: 2;
}
.nd-ear.l { left: 0; right: auto; } .nd-ear.r { right: 0; left: auto; }
/* 페더: 패널 유리가 상단바 뒤 18px부터 서서히 나타나 상단바 굴절과 섞이며 이어짐(경계에서 굴절이 뚝 끊기지 않게) */
.nav-drop { --ov: 18px; }
.nd-body { padding-top: calc(var(--ov) + 14px); }
/* 곡선 윤곽선은 위쪽 끝에서 서서히 나타나고, 상단바 아래 라인은 곡선 쪽으로 길게 사라져 이음매가 부드럽게 */
.nd-ear, .nav-drop.on-light .nd-ear {
  -webkit-mask-image: linear-gradient(180deg, transparent var(--ov), #000 calc(var(--ov) + var(--R) * .9));
  mask-image: linear-gradient(180deg, transparent var(--ov), #000 calc(var(--ov) + var(--R) * .9));
}
.header::before, .header::after {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 6px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 16px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 16px), #000 calc(var(--gx) + var(--gw) + 6px)) bottom / 100% 16px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 6px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 16px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 16px), #000 calc(var(--gx) + var(--gw) + 6px)) bottom / 100% 16px no-repeat;
}
/* 상단바 아래 라인 → 곡선 → 패널 옆선이 끊기지 않는 하나의 윤곽선으로(스케치처럼):
   곡선을 크게(36px), 곡선 선은 끝까지 또렷하게, 상단바 라인은 곡선이 시작되는 지점까지 그대로 이어짐 */
.nav-drop { --R: 36px; --rim: rgba(255, 255, 255, .14); }
.nav-drop.on-light { --rim: rgba(10, 10, 10, .1); }
.nd-ear, .nav-drop.on-light .nd-ear { -webkit-mask-image: none; mask-image: none; }
.header::before, .header::after {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 3px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 3px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 16px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 3px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 3px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 16px no-repeat;
}
/* 곡선 끝과 옆선 사이 틈 제거: 곡선 선을 상자 안쪽으로 1px 당기고, 옆선은 곡선 끝보다 살짝 위에서 시작해 겹치게 */
.nd-ear, .nav-drop.on-light .nd-ear {
  background: radial-gradient(circle at var(--cx) 100%, transparent calc(var(--R) - 1.5px), var(--rim) calc(var(--R) - 1px), var(--rim) var(--R), transparent calc(var(--R) + .5px));
}
.nd-body::after { top: calc(var(--ov) + var(--R) - 6px); }
/* 상단바 뒤로 겹치는 부분 없음(--ov 0): 열릴 때·닫힐 때 모두 정확히 상단바 아래 변을 기준으로 나오고 들어감.
   대신 이음매가 딱딱하지 않게 패널 유리 윗부분 12px만 살짝 옅게 시작해 상단바 유리와 부드럽게 이어짐(겹침 없이 페더) */
.nav-drop { --ov: 0px; }
.nd-body {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, #000 12px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, #000 12px);
}
/* 윤곽선을 SVG 한 줄로 통일(곡선·옆선·바닥이 같은 굵기·밝기, 이음매 없음) — 기존 곡선 조각·옆 테두리는 숨김 */
.nd-ear { display: none; }
.nd-body::after { border: 0; }
.nd-line { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; fill: none; }
.nd-line .c { stroke: rgba(255, 255, 255, .26); stroke-width: 1; }
.nd-line .g { stroke: rgba(255, 255, 255, .07); stroke-width: 5; filter: blur(1.5px); }
.nav-drop.on-light .nd-line .c { stroke: rgba(10, 10, 10, .12); }
.nav-drop.on-light .nd-line .g { stroke: rgba(255, 255, 255, .5); }
/* 패널이 열려 있는 동안 상단바의 바깥 그림자는 끔 — 패널 윗부분을 가로로 어둡게 덮던 띠 제거 */
.header.drop-open { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 18px rgba(255, 255, 255, .03); }
.header.on-light.drop-open { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
/* 패널 윗부분 페더는 아주 약하게(띠처럼 보이지 않게) */
.nd-body { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75) 0, #000 10px); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .75) 0, #000 10px); }
/* 상단바 아래 라인은 곡선이 시작되는 지점까지 그대로 → 거기서부터 SVG 곡선이 이어받음 */
.header::before, .header::after {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 16px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 16px no-repeat;
}

/* ==========================================================================
   상단바 레이어 재구성 — 드롭다운 이음매용
   · 광택(유리 반사)은 상단바 배경으로 옮김: 어디도 지우지 않음 → 이음매 부분에 띠·잔상 없음
   · ::before = 윤곽 라인 1px만 — 패널 구간에서 곡선이 시작되는 지점까지 그대로, 거기서 SVG 곡선이 이어받음
   · ::after = 아래 빛 번짐 — 곡선 바깥쪽부터 길게 서서히 사라짐(딱 끊기지 않게)
   ========================================================================== */
.header {
  background:
    linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .05) 24%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .08) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .03)),
    rgba(18, 18, 20, .20);
}
.header.on-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, .03) 64%, rgba(255, 255, 255, .14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 50%, rgba(255, 255, 255, .10)),
    rgba(255, 255, 255, .06);
}
.header::before, .header.on-light::before { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.header.on-light::before { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, .1); }
.header::after {
  box-shadow: inset 0 6px 8px -6px rgba(255, 255, 255, .28), inset 0 -8px 10px -8px rgba(255, 255, 255, .14),
    inset 12px 0 14px -12px rgba(255, 255, 255, .18), inset -12px 0 14px -12px rgba(255, 255, 255, .18);
}
.header.on-light::after {
  box-shadow: inset 0 6px 8px -6px rgba(255, 255, 255, .55), inset 0 -8px 10px -8px rgba(255, 255, 255, .3),
    inset 12px 0 14px -12px rgba(255, 255, 255, .35), inset -12px 0 14px -12px rgba(255, 255, 255, .35);
}
.header::before {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 4px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 4px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 4px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 4px no-repeat;
}
.header::after {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 40px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 24px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 24px), #000 calc(var(--gx) + var(--gw) + 40px)) bottom / 100% 16px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 16px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - 40px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 24px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 24px), #000 calc(var(--gx) + var(--gw) + 40px)) bottom / 100% 16px no-repeat;
}
/* 패널: 상단바 아래 변에서 정확히 시작(창은 2px 위, 유리는 그 아래부터), 렌즈 굴절은 빼서 위쪽 모서리만 휘어 보이던 현상 제거 */
.nav-drop { --ov: 2px; }
.nd-body { -webkit-mask-image: none; mask-image: none; }
html.glass-refract .nd-body { -webkit-backdrop-filter: blur(9px) saturate(185%) brightness(1.08); backdrop-filter: blur(9px) saturate(185%) brightness(1.08); }
html.glass-refract .nav-drop.on-light .nd-body { -webkit-backdrop-filter: blur(9px) saturate(150%) brightness(.97); backdrop-filter: blur(9px) saturate(150%) brightness(.97); }
/* 패널 유리 윗변이 상단바와 반 픽셀 겹쳐 생기던 얇은 선 제거: 윗변 4px만 부드럽게 시작 */
.nd-body { -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--ov) + .5px), #000 calc(var(--ov) + 4px)); mask-image: linear-gradient(180deg, transparent calc(var(--ov) + .5px), #000 calc(var(--ov) + 4px)); }
/* 상단바 아래쪽 광택 띠는 지울 수 있는 ::after(아래 빛 번짐 층)로 — 패널 구간에선 길게 서서히 사라져 가로선이 남지 않게.
   배경엔 위쪽 광택만 */
.header {
  background:
    linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .05) 24%, transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 50%),
    rgba(18, 18, 20, .20);
}
.header::after { background: linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, .11) 100%); }
.header.on-light {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, .03) 64%, transparent 80%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 50%),
    rgba(255, 255, 255, .06);
}
.header.on-light::after { background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 255, .22) 100%); }
/* 상단바 아래 변 렌즈 굴절이 만드는 밝은 한 줄을 패널 구간에서만 걷어냄(상단바 자체의 아래 2px) — 그 자리는 패널 유리가 채움 */
.header { --a: calc(1 - var(--cut)); }
.header.drop-open {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 2px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 2px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 2px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) + 1px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + 2px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - 2px), #000 calc(var(--gx) + var(--gw) - 1px)) bottom / 100% 2px no-repeat;
}
.nd-body { -webkit-mask-image: none; mask-image: none; }

/* ==========================================================================
   Works 드롭다운 v3 — JS가 슬라이드·잘라내기를 매 프레임 같이 처리(상단바 뒤로 비치는 부분 없음)
   ========================================================================== */
.nav-drop, .nav-drop.is-open { overflow: visible; padding: 0; }
.nd-slide, .nav-drop.is-open .nd-slide { transform: none; transition: none; will-change: transform; }
.nav-drop { --ov: 12px; }
/* 패널 유리 = 상단바와 같은 유리(렌즈 굴곡 + 블러 + 채도/밝기), 가장자리 압착만 뺀 필터 */
html.glass-refract .nd-body { -webkit-backdrop-filter: url(#glass-lens-drop) blur(3px) saturate(185%) brightness(1.08); backdrop-filter: url(#glass-lens-drop) blur(3px) saturate(185%) brightness(1.08); }
html.glass-refract .nav-drop.on-light .nd-body { -webkit-backdrop-filter: url(#glass-lens-drop) blur(3px) saturate(150%) brightness(.97); backdrop-filter: url(#glass-lens-drop) blur(3px) saturate(150%) brightness(.97); }
/* 이음매: 패널이 다 나온 뒤(.seam)에만 합침 — 상단바 아래 라인·빛 번짐이 서서히 사라지고,
   상단바 아래 12px(--ov)는 패널 구간에서만 위→아래로 서서히 투명해져 그 아래 패널 유리와 자연스럽게 이어짐 */
.header { transition: transform .6s var(--ease), background .5s var(--ease), border-color .5s, color .4s, box-shadow .5s, --cut .38s var(--ease); }
.header.drop-open { --cut: 0; }
.header.drop-open.seam { --cut: 1; }
.header.drop-open {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat,
    linear-gradient(#000, #000) left bottom / max(0px, var(--gx)) 12px no-repeat,
    linear-gradient(#000, #000) right bottom / max(0px, calc(100% - var(--gx) - var(--gw))) 12px no-repeat,
    linear-gradient(180deg, #000, rgba(0, 0, 0, var(--a))) var(--gx) bottom / var(--gw) 12px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 12px) no-repeat,
    linear-gradient(#000, #000) left bottom / max(0px, var(--gx)) 12px no-repeat,
    linear-gradient(#000, #000) right bottom / max(0px, calc(100% - var(--gx) - var(--gw))) 12px no-repeat,
    linear-gradient(180deg, #000, rgba(0, 0, 0, var(--a))) var(--gx) bottom / var(--gw) 12px no-repeat;
}
.nd-body a { transition: opacity .4s var(--ease) calc(.3s + var(--d, 0s)), transform .4s var(--ease) calc(.3s + var(--d, 0s)), background .25s; }
/* 트랙매트: 패널은 상단바 아래 변 아래에서만 보임 — 상단바 영역엔 어떤 상태에서도 겹쳐 보이지 않음(유리 채움 없음) */
.nav-drop { --ov: 0px; }
.header.drop-open { -webkit-mask: none; mask: none; }
/* 패널이 나와 있는 동안(.seam): 상단바 아래 가장자리 압착 렌즈를 빼서 상단바 아래 변과 패널 유리가 통판처럼 이어짐 */
html.glass-refract .header.seam {
  -webkit-backdrop-filter: url(#glass-lens-open) blur(3px) saturate(185%) brightness(1.08);
  backdrop-filter: url(#glass-lens-open) blur(3px) saturate(185%) brightness(1.08);
}
html.glass-refract .header.on-light.seam {
  -webkit-backdrop-filter: url(#glass-lens-open) blur(3px) saturate(150%) brightness(.97);
  backdrop-filter: url(#glass-lens-open) blur(3px) saturate(150%) brightness(.97);
}
/* 패널 윗부분 색조를 상단바 아래쪽과 같게(위쪽 흰 반사 없이 시작) */
.nd-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .03)), var(--tint); }
.nd-body::before { background: linear-gradient(112deg, transparent 14%, rgba(255, 255, 255, .05) 24%, transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .08) 100%); }
/* 상단바 배경이 투명 테두리(1px) 밑까지 칠해져 아래 변에 밝은 한 줄이 생기던 것 — 열려 있는 동안은 테두리 안쪽만 칠함 */
.header.drop-open { background-clip: padding-box; }
/* 패널 유리 굴절 = 상단바와 같은 렌즈(가장자리 압착 + 유리 굴곡), 위쪽만 압착 없음 — 필터는 JS가 패널 크기에 맞춰 생성 */
html.glass-refract .nd-body { -webkit-backdrop-filter: url(#glass-lens-panel) blur(3px) saturate(185%) brightness(1.08); backdrop-filter: url(#glass-lens-panel) blur(3px) saturate(185%) brightness(1.08); }
html.glass-refract .nav-drop.on-light .nd-body { -webkit-backdrop-filter: url(#glass-lens-panel) blur(3px) saturate(150%) brightness(.97); backdrop-filter: url(#glass-lens-panel) blur(3px) saturate(150%) brightness(.97); }
/* 상단바 라인은 곡선 시작점 2px 앞에서 끝남 — 겹쳐서 밝은 점이 생기지 않게(곡선 시작부가 수평이라 그대로 이어짐) */
.header::before {
  -webkit-mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 4px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - .5px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + .5px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - .5px), #000 calc(var(--gx) + var(--gw) + .5px)) bottom / 100% 4px no-repeat;
  mask:
    linear-gradient(#000, #000) top / 100% calc(100% - 4px) no-repeat,
    linear-gradient(90deg, #000 calc(var(--gx) - .5px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + .5px), rgba(0, 0, 0, var(--a)) calc(var(--gx) + var(--gw) - .5px), #000 calc(var(--gx) + var(--gw) + .5px)) bottom / 100% 4px no-repeat;
}
/* 윤곽선 SVG는 body 직속 고정 레이어(상단바 위, z 502) — 패널이 닫혀 있을 땐 clip으로 전부 숨겨짐 */
.nd-line { position: fixed; left: 0; top: 0; z-index: 502; }
.nd-line.on-light .c { stroke: rgba(10, 10, 10, .12); }
.nd-line.on-light .g { stroke: rgba(255, 255, 255, .5); }
@media (max-width: 760px) { .nd-line { display: none; } }
.nd-line .c { stroke: rgba(255, 255, 255, .2); }

/* 제작 과정 통일(이벤트 프레임 방식): 최종 결과는 모든 프레임에서 아래 Final Cut 줄에 따로 — 정방형·세로형은 330px */
.fl-wrap:not(.is-wide) .fl-endrow .fl-final { width: 330px; }
@media (max-width: 900px) { .fl-wrap:not(.is-wide) .fl-endrow .fl-final { width: min(100%, 330px); } }

/* ==========================================================================
   제작 과정 — 크기·반응형 정리
   · 모든 폭에서 같은 구조(왼쪽 라벨 열 + 오른쪽 흐름), 라벨 열 폭만 줄어듦
   · 영상 폭(--cw)은 줄 안에 맞춰 최대 250px, 이미지(--kh)는 영상의 58%(최대 140px) — 항상 영상보다 작게
   · 모바일은 흐름 줄만 가로 스크롤(영상 170px)
   ========================================================================== */
@property --cw { syntax: '<length>'; inherits: true; initial-value: 250px; }
@property --kh { syntax: '<length>'; inherits: true; initial-value: 140px; }
.fl-wrap { --lc: 150px; --lg: 24px; position: relative; }
.fl-seq, .fl-assets { grid-template-columns: var(--lc) minmax(0, 1fr); column-gap: var(--lg); row-gap: 0; container-type: inline-size; }
.fl-seq > * { --cw: min(250px, calc((100cqw - var(--lc) - var(--lg) - var(--fx, 0px)) / var(--n, 1))); --kh: min(140px, calc(var(--cw) * .58)); }
.fl-lane.has-ai .fl-seq > * { --ah: calc(var(--kh) + 18px); }
.fl-track { container-type: normal; padding-left: 40px; }
.fl-track > * { --cw: inherit; }
.fl-labs { grid-template-rows: calc(var(--kh) + var(--kg)) auto; grid-template-columns: none; }
.fl-labs.has-ai { grid-template-rows: var(--ah) calc(var(--kh) + var(--kg)) auto; }
.fl-endrow .fl-labs { grid-template-rows: auto; }
.fl-lname { padding-left: calc(var(--lc) + var(--lg)); }
.fl-box.is-grid .fl-vid { width: calc(var(--cw) * .6); }
.fl-endrow > .fl-final { margin-left: 40px; }
.fl-wrap:not(.is-wide) .fl-endrow .fl-final { width: min(330px, calc(100% - 40px)); }
.fl-wrap.is-wide .fl-endrow .fl-final { width: min(920px, calc(100% - 40px)); max-width: none; }

/* 단계 사이 위→아래 화살표 (JS가 라벨 위치에 맞춰 그림) */
.fl-arr { position: absolute; z-index: 1; width: 9px; margin-left: -4px; pointer-events: none; }
.fl-arr::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 1px; border-left: 1px solid rgba(133, 131, 255, .55); }
.fl-arr::after { content: ""; position: absolute; left: 1px; bottom: 1px; width: 6px; height: 6px; border-right: 1px solid #8583ff; border-bottom: 1px solid #8583ff; transform: rotate(45deg); }

/* 호버 확대: 배율·기준점은 JS가 화면 안에 들어오게 계산 */
@media (min-width: 901px) and (hover: hover) {
  .fl-wrap .fl-seq .fl-t:hover, .fl-wrap .fl-endrow .fl-final:hover { transform: scale(var(--hs, 1.45)); transform-origin: var(--ox, 50%) var(--oy, 50%); z-index: 9 !important; }
}

@media (max-width: 1100px) {
  .fl-wrap { --lc: 112px; --lg: 16px; }
  .fl-tool { font-size: 11px; }
}
@media (max-width: 900px) {
  .fl-wrap { --lc: 112px; --lg: 16px; --kg: 18px; }
  .fl-seq, .fl-assets { grid-template-columns: var(--lc) minmax(0, 1fr); row-gap: 0; }
  .fl-seq > * { --cw: 190px; --kh: calc(var(--cw) * .58); }
  .fl-labs, .fl-labs.has-ai { grid-template-columns: none; column-gap: 0; justify-content: stretch; }
  .fl-labs { grid-template-rows: calc(var(--kh) + var(--kg)) auto; }
  .fl-labs.has-ai { grid-template-rows: var(--ah) calc(var(--kh) + var(--kg)) auto; }
  .fl-endrow .fl-labs { grid-template-rows: auto; }
  .fl-lname { padding-left: calc(var(--lc) + var(--lg)); }
  .fl-track { overflow-x: auto; margin: 0; padding: calc(var(--ah) + var(--kh) + var(--kg)) 24px 8px calc(var(--kh) / 2); scrollbar-width: none; }
  .fl-track::-webkit-scrollbar { display: none; }
  .fl-endrow > .fl-final { margin-left: 0; }
  .fl-wrap:not(.is-wide) .fl-endrow .fl-final { width: min(330px, 100%); }
  .fl-wrap.is-wide .fl-endrow .fl-final { width: 100%; }
}
@media (max-width: 600px) {
  .fl-wrap { --lc: 76px; --lg: 10px; }
  .fl-seq > * { --cw: 160px; }
  .fl-sname { font-size: 9px; letter-spacing: .12em; }
  .fl-tool { font-size: 10px; line-height: 1.45; }
  .fl-lname { font-size: 10px; }
}

/* 크기 통일: 섹션과 관계없이 영상(합성·레이어 조각 포함) 한 장 = --cw, 이미지 = --kh. 화면 폭에 따라서만 함께 줄어듦 */
.fl-wrap { --cw: clamp(140px, calc((100vw - 600px) / 3), 250px); }
.fl-seq > * { --cw: inherit; --kh: calc(var(--cw) * .56); }
.fl-box.is-compose .fl-vid, .fl-box.is-grid .fl-vid { width: var(--cw); }
.fl-box.is-grid .fl-vid figcaption { font-size: 9px; }
@media (max-width: 900px) { .fl-wrap { --cw: 190px; } .fl-seq > * { --cw: inherit; } }
@media (max-width: 600px) { .fl-wrap { --cw: 160px; } }
@media (min-width: 901px) and (max-width: 1100px) { .fl-wrap { --cw: clamp(140px, calc((100vw - 480px) / 3), 250px); } }

/* Next Project 칸 제목: 한 줄에 들어가면 한 줄, 아니면 '의뢰처 ㅣ' 뒤에서만 줄바꿈 (모든 작품 같은 형식) */
.next-name { max-width: none; }
.next-name .tl-a { display: inline-block; white-space: nowrap; }
.next-name .tl-b { display: inline-block; max-width: 100%; }

/* 카테고리 마지막 작품: Next Project 자리에 다섯 갈래(All + 4개 카테고리) 이동 칸 — 칸마다 Next처럼 블루가 위에서 차오름 */
.next-cats { display: block; padding: clamp(56px, 7vw, 110px) var(--gutter); border-top: 1px solid var(--line); }
.next-cats > .mono-label { display: block; margin-bottom: clamp(18px, 2vw, 28px); }
.nc-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.nc-item { position: relative; display: grid; align-content: space-between; gap: 28px; min-height: clamp(150px, 13vw, 220px); padding: clamp(18px, 1.8vw, 28px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.nc-item::before { content: ""; position: absolute; inset: 0; background: var(--blue); z-index: -1; transform: translateY(-100%); transition: transform .8s var(--ease); }
.nc-item:hover::before, .nc-item:focus-visible::before { transform: none; }
.nc-name { font-size: clamp(20px, 2vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.nc-name sup { margin-left: 4px; font-size: .36em; font-weight: 400; letter-spacing: .04em; vertical-align: top; opacity: .55; }
.nc-ko { font-size: 13px; color: var(--grey); transition: color .4s; }
.nc-item:hover .nc-ko { color: rgba(255, 255, 255, .8); }
.nc-item.is-current .nc-name::after { content: "Current"; display: block; margin-top: 10px; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8583ff; }
@media (max-width: 1000px) { .nc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nc-item:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .nc-item { min-height: 120px; gap: 18px; } }

/* Work 카테고리 대제목 위아래 여백 축소: 위(헤더↔라벨) 약 100px, 아래(제목↔필터) 약 64px
   필터 바는 스티키라 위쪽 패딩(헤더 아래 자리)은 유지하고 margin으로 끌어올림 */
body[data-page="work"] .page-head { padding-top: clamp(104px, 12vw, 172px); padding-bottom: 0; }
body[data-page="work"] .filter-bar { margin-top: -20px; }
@media (max-width: 760px) { body[data-page="work"] .filter-bar { margin-top: -36px; } }
/* 지금 보고 있는 카테고리 칸: 'Current' 표기 없이 회색 배경 + 흐린 글자로 '이미 여기' 느낌 — 호버 시 블루 채움·클릭은 다른 칸과 같음 */
.nc-item.is-current .nc-name::after { content: none; }
.nc-item.is-current { background: rgba(255, 255, 255, .07); }
.nc-item.is-current .nc-name, .nc-item.is-current .nc-ko { color: rgba(255, 255, 255, .4); transition: color .4s; }
.nc-item.is-current:hover .nc-name { color: var(--white); }
.nc-item.is-current:hover .nc-ko { color: rgba(255, 255, 255, .8); }

/* 푸터(Contact) 윗 여백 축소: 160px → 약 88px (1440 기준). Contact 전용 페이지는 화면 가운데 정렬이라 제외 */
body:not([data-page="contact"]):not([data-page="project"]) .footer { padding-top: clamp(48px, 6vw, 88px); }

/* 카테고리 이동 칸 — 메인 Work Index 느낌으로 (칸 크기·격자는 그대로)
   평소: 얇은 회색 이름(80%), 번호 · (개수) / 호버: 블루가 아래에서 차오름, 이름 흰색 + 원래 크기로 커지며 오른쪽으로, 슬래시는 뒤따라 기울어짐, 개수 → 화살표 */
.nc-item { align-content: stretch; grid-template-rows: auto 1fr auto; gap: 14px; }
.nc-item::before { transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.nc-item:hover::before, .nc-item:focus-visible::before { transform: scaleY(1); }
.nc-top, .nc-bot { position: relative; display: flex; justify-content: space-between; align-items: center; }
.nc-top .no, .nc-top .n { font-size: 13px; transition: opacity .4s; }
.nc-name { align-self: center; display: block; font-size: clamp(22px, 2.3vw, 38px); font-weight: 300; letter-spacing: -.03em; line-height: 1; color: var(--sub);
  transform-origin: 0 55%; transform: scale(.8); transition: transform .6s var(--ease), color .4s; }
.nc-name .slash { --bw: .17em; margin: 0 -.06em; }
.nc-name .slash::before, .nc-name .slash::after { background: var(--sub); transition: transform .45s var(--ease), background-color .3s; }
.nc-item:hover .nc-name { color: var(--white); transform: translateX(10px) scale(1); }
.nc-item:hover .nc-name .slash::before, .nc-item:hover .nc-name .slash::after { background: var(--white); transition: transform .45s var(--ease) .25s, background-color .3s; }
.nc-item:hover .nc-top .n { opacity: 0; }
.nc-bot .arrow { font-size: 24px; line-height: 1; opacity: 0; transform: translateX(-28px) rotate(-45deg); transition: .6s var(--ease); }
.nc-item:hover .nc-bot .arrow { opacity: 1; transform: none; }
.nc-name sup { display: none; }
/* 지금 카테고리: 회색 칸 + 더 흐리게 (호버 시엔 다른 칸과 같음) */
.nc-item.is-current .nc-name, .nc-item.is-current .nc-top, .nc-item.is-current .nc-ko { color: rgba(255, 255, 255, .3); }
.nc-item.is-current .nc-name .slash::before, .nc-item.is-current .nc-name .slash::after { background: rgba(255, 255, 255, .3); }
.nc-item.is-current:hover .nc-name, .nc-item.is-current:hover .nc-top { color: var(--white); }
.nc-item.is-current:hover .nc-name .slash::before, .nc-item.is-current:hover .nc-name .slash::after { background: var(--white); }
@media (hover: none) { .nc-name { transform: none; } }
.nc-item { gap: 10px; }
@media (min-width: 1001px) { .nc-name { white-space: nowrap; font-size: clamp(20px, 1.95vw, 34px); } }
@media (max-width: 480px) { .nc-item { height: 120px; min-height: 0; gap: 6px; } .nc-name { font-size: 18px; } .nc-top .no, .nc-top .n { font-size: 11px; } .nc-ko { font-size: 12px; } .nc-bot .arrow { font-size: 18px; } }

/* 작품 카드 제목 배열: 1) 한 줄 → 2) '의뢰처 ㅣ' / 제목 → 3) '의뢰처 ㅣ' / 첫 단어 / 나머지 (단계는 JS가 폭으로 판단) */
.card-client { display: block; }
.card-client.ct-measure { position: absolute; left: -9999px; top: 0; width: auto; white-space: nowrap; visibility: hidden; pointer-events: none; }
.card-client.ct-2 .ct-a, .card-client.ct-3 .ct-a { display: block; }
.card-client.ct-2 .ct-b { white-space: nowrap; }
.card-client.ct-3 .ct-w1 { display: block; }

/* 카테고리 이동 칸 머리: 메인 'Work / Index' 대제목과 같은 구성·휠 인터랙션 (철자 낙하 → 단어 붙고 슬래시 눕기) */
.next-cats .nc-head { margin: 0; padding: 0 0 clamp(20px, 2.4vw, 32px); border: 0; }
.next-cats .nc-head .count { margin-right: 0; }
/* 이름: 두 줄(첫 단어 / '/두번째 단어'), 크게 */
.nc-name { white-space: normal; font-size: clamp(24px, 2.9vw, 46px); line-height: .98; transform: scale(.9); }
.nc-name .nc-w { display: block; white-space: nowrap; }
.nc-name .slash { margin: 0 .04em 0 -.08em; }
@media (min-width: 1001px) { .nc-name { white-space: normal; font-size: clamp(24px, 2.9vw, 46px); } }
@media (max-width: 1000px) { .nc-name { font-size: clamp(22px, 4.6vw, 36px); } }
@media (max-width: 480px) { .nc-name { font-size: 21px; } }
@media (max-width: 480px) { .nc-item { height: auto; min-height: 120px; } }
/* 이동 칸 머리: 큰 대제목 대신 '카테고리 / End' 한 줄 (기존 라벨보다 조금 큰 크기) — 휠 인터랙션은 대제목과 동일 */
.next-cats .nc-head .section-title { font-size: clamp(20px, 2.1vw, 32px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
.next-cats .nc-head .section-title .slash { --bw: .2em; margin: 0 .05em; }
/* 이동 칸 머리 자간: 넓은 라벨 자간(.12em) → 좁게, 모든 카테고리 같은 값 */
.next-cats .nc-head .section-title { letter-spacing: -.01em; }
.next-cats .nc-head .section-title .slash { margin: 0 .12em; }

/* 사이트에 직접 올린 루프 영상 */
.video.is-loop > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 아주 긴 가로형 여러 개: 나란히 대신 위아래로 크게 */
.vgrid.is-stack { flex-direction: column; align-items: stretch; }
.vgrid.is-stack .vg-item { flex: none; width: 100%; }

/* 현장 사진: 영상 아래 가로로 넓게 */
.pi-photo { margin: 14px 0 0; }
.pi-photo img { display: block; width: 100%; aspect-ratio: 2.2; object-fit: cover; object-position: 50% 18%; border-radius: inherit; }
.pi-photo figcaption { margin-top: 10px; font-size: 10px; color: var(--grey); }
/* 설명 글 폭 제한 해제: 왼쪽 정렬로 길게, 한 줄에 들어가면 한 줄 (fullText 프로젝트) */
.part.is-fulltext .p-overview, .part.is-fulltext .pi--wide .pi-text, .part.is-fulltext .pi--wide .pi-text p { max-width: none; }
.pi-media .pi-photo { margin-top: 14px; }
.pi-media .pi-photo img { border-radius: var(--radius); }

/* 작품 위 제목 (fullText 프로젝트) */
.pi-top { margin-bottom: var(--sg); }
.pi--split > .pi-top { grid-column: 1 / -1; margin-bottom: 0; }
.pi--split:has(> .pi-top) { row-gap: var(--sg); }

/* 벤토 레이아웃 (variant: 'bento') — Stage & Event 포맷의 변주. 내용 구성은 같고 배치만 다름 (파트 머리는 전 프로젝트 공통이라 건드리지 않음) */
.part.is-bento { --ng: clamp(8px, .8vw, 12px); }
.is-bento .sf-grid--many { container-type: inline-size; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 5 * var(--ng)) / 6 * .8); grid-auto-flow: dense; gap: var(--ng); aspect-ratio: auto; margin-inline: 0; transform: none !important; transform-style: flat; pointer-events: auto; }
.is-bento .sf--many { perspective: none; }
.is-bento .sf-grid--many .sf-cell { position: relative; left: auto; top: auto; width: auto; height: 100%; translate: none; }
.is-bento .sf-grid--many .sf-clip { width: 100%; height: 100%; aspect-ratio: auto; filter: none; box-shadow: none; border-radius: 10px; }
.is-bento .sf-grid--many .sf-cell:nth-child(9n + 1) { grid-column: span 3; grid-row: span 2; }
.is-bento .sf-grid--many .sf-cell:nth-child(n) .sf-clip { --cr: 2.5; }
.is-bento .sf-grid--many .sf-cell:nth-child(1) .sf-clip { --cr: 1.875; }
@media (min-width: 761px) {
  /* 1~4: 3×2 · 1×2 · 2×1 · 2×1 / 5~9: 2×2 + 2×1 넷 / 10~13: 1×2 · 3×2 · 2×1 · 2×1 / 14~18: 2×1 둘 · 2×2 · 2×1 둘 */
  .is-bento .sf-grid--many .sf-cell { grid-column: span 2; }
  .is-bento .sf-grid--many .sf-cell:nth-child(1), .is-bento .sf-grid--many .sf-cell:nth-child(11) { grid-column: span 3; grid-row: span 2; }
  .is-bento .sf-grid--many .sf-cell:nth-child(2), .is-bento .sf-grid--many .sf-cell:nth-child(10) { grid-column: span 1; grid-row: span 2; }
  .is-bento .sf-grid--many .sf-cell:nth-child(5), .is-bento .sf-grid--many .sf-cell:nth-child(16) { grid-row: span 2; }
  .is-bento .sf-grid--many .sf-cell:nth-child(11) .sf-clip { --cr: 1.875; }
  .is-bento .sf-grid--many .sf-cell:nth-child(2) .sf-clip, .is-bento .sf-grid--many .sf-cell:nth-child(10) .sf-clip { --cr: .625; }
  .is-bento .sf-grid--many .sf-cell:nth-child(5) .sf-clip, .is-bento .sf-grid--many .sf-cell:nth-child(16) .sf-clip { --cr: 1.25; }
  .is-bento .sf-grid--many .sf-cell:nth-child(10) { grid-column: span 1; }
}
@media (max-width: 760px) {
  .is-bento .sf-grid--many { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--ng)) / 2 * .62); }
  .is-bento .sf-grid--many .sf-cell:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .is-bento .sf-grid--many .sf-cell:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .is-bento .sf-grid--many .sf-cell:nth-child(n) .sf-clip { --cr: 1.6; }
}
@media (min-width: 861px) {
  /* 스케치 필름: 제목(왼쪽) · 설명(오른쪽)을 위에 두고 영상은 전체 폭 */
  .is-bento .pi--split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--sg) clamp(32px, 4vw, 72px); align-items: start; }
  .is-bento .pi--split > .pi-top { grid-column: 1; grid-row: 1; }
  .is-bento .pi--split > .pi-text { grid-column: 2; grid-row: 1; }
  .is-bento .pi--split > .pi-media { grid-column: 1 / -1; grid-row: 2; }
}
/* 벤토: 콜라주용 깊이·시차·호버 튀어나옴 끔 (칸은 격자에 고정, 딤·클릭·재생은 그대로) */
.is-bento .sf-grid--many .sf-cell, .is-bento .sf-grid--many .sf-cell:not(.is-empty):hover { --d: 0 !important; --sx: 0px !important; --sy: 0px !important; --pop: 0px !important; translate: none !important; transform: none !important; }
.is-bento .sf-grid--many .sf-cell .sf-clip { translate: none !important; transform: none !important; scale: 1 !important; }
.is-bento .sf-title { margin-bottom: var(--sg); }
/* 롯데 벤토 스타일프레임: 화면을 꽉 채우지 않도록 양옆 여백 (폰은 기본 거터만) */
@media (min-width: 861px) { .is-bento .sf-grid--many { margin-inline: clamp(40px, 7vw, 140px); } }
@media (min-width: 861px) {
  /* 벤토 스케치 필름: 제목 → 전체 폭 영상 → 설명(왼쪽 정렬) */
  .is-bento .pi--split { grid-template-columns: minmax(0, 1fr); row-gap: var(--sg); }
  .is-bento .pi--split > .pi-top { grid-column: 1; grid-row: 1; }
  .is-bento .pi--split > .pi-media { grid-column: 1; grid-row: 2; }
  .is-bento .pi--split > .pi-text { grid-column: 1; grid-row: 3; max-width: none; }
  .is-bento .pi--split > .pi-text p { max-width: none; }
}
/* 벤토 칸의 영상: 칸 비율과 관계없이 16:9 영상이 항상 칸을 꽉 덮도록 (칸 크기 기준으로 계산) */
.is-bento .sf-grid--many .sf-clip { container-type: size; }
.is-bento .sf-grid--many .sf-clip iframe { width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); }

/* 다른 비율 영상을 쓰는 스타일프레임 칸: 영상이 칸을 항상 꽉 덮도록 */
.sf-cell.is-wide-src .sf-clip { container-type: size; }
.sf-cell.is-wide-src .sf-clip iframe { width: max(100cqw, calc(100cqh * var(--vr))); height: max(100cqh, calc(100cqw / var(--vr))); }

/* 팀 소개: 6팀 모두 토글. 대표 두 팀(open)은 처음부터 펼쳐져 있음 */
.pi-text--top { margin: 0 0 var(--sg); max-width: none; }
.pi-text--top p { max-width: none; }
.tm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.tm-list { align-items: start; gap: 0 clamp(10px, 1.2vw, 16px); border-top: 1px solid var(--line); }
.tm-item { border-bottom: 1px solid var(--line); }
.tm-row { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: clamp(16px, 1.6vw, 24px) 8px; overflow: hidden; isolation: isolate; color: var(--sub); font-size: clamp(18px, 1.7vw, 26px); font-weight: 300; letter-spacing: -.02em; text-align: left; transition: color .4s; }
.tm-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.tm-row:hover, .tm-row[aria-expanded="true"] { color: var(--white); }
.tm-row:hover::before { transform: scaleY(1); }
.tm-row span { transition: transform .6s var(--ease); }
.tm-row:hover span { transform: translateX(10px); }
.tm-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.tm-item.is-open .tm-panel { grid-template-rows: 1fr; }
.tm-panel-in { min-height: 0; overflow: hidden; }
.tm-panel .video { margin-bottom: 12px; }
@media (max-width: 760px) { .tm-list { grid-template-columns: 1fr; } }
/* 스케치가 없는 스토리보드: 왼쪽 칸에 그 씬의 실제 장면 */
.sb-sketch.is-frame img { position: static; width: 100%; height: 100%; object-fit: cover; transform: none; }

/* 팀 토글 화살표: 닫힘 → / 열림 ↓ (Work Index와 같은 화살표) */
.tm-row i { flex: none; margin-right: 6px; font-size: clamp(20px, 1.9vw, 28px); font-style: normal; line-height: 1; transition: transform .5s var(--ease); }
.tm-row:hover i { transform: translateX(-6px); }
.tm-row[aria-expanded="true"] i { transform: rotate(90deg); }
/* 팀 토글: 위 두 영상과 같은 2열 — 영상은 그 팀 칸 아래로 펼쳐져 두 영상과 같은 폭으로 정렬 */
.tm-panel .video { margin: 0 0 clamp(10px, 1.2vw, 16px); }
/* 팀 토글: 팀명 작게 (18–26px → 14–17px), 줄 높이도 함께 */
.tm-row { padding-block: clamp(11px, 1.05vw, 15px); font-size: clamp(14px, 1.15vw, 17px); letter-spacing: -.01em; }
.tm-row i { font-size: clamp(16px, 1.3vw, 19px); }

/* Concept 카드 GiGA Eyes: 네이비 화면 + 검색창 + 해시태그 타일 (영상 Scene 3~4의 화면 언어) */
.cc--giga .cc-glass { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; background: #161d46; }
.cc--giga .cc-panel { order: -1; position: relative; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc--giga .cc-text { color: rgba(255, 255, 255, .86); }
.cc--giga .cc-keys-label { color: #6fd5d6; }
.cc--giga .cc-keys li { color: #fff; background: rgba(12, 164, 165, .16); border: 1px solid rgba(12, 164, 165, .7); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc-search { position: relative; display: flex; align-items: center; height: 54px; margin-bottom: clamp(20px, 2.2vw, 30px); padding: 0 66px 0 26px; border-radius: 999px; font-size: clamp(14px, 1.15vw, 16px); color: #161d46; background: #f7f7f7; box-shadow: 0 14px 30px rgba(0, 0, 0, .3); }
.cc-typed { white-space: nowrap; overflow: hidden; }
.cc-caret { flex: none; width: 1px; height: 1.2em; margin-left: 3px; background: #161d46; animation: cc-blink 1s steps(2) infinite; }
.cc-glass.is-found .cc-caret { display: none; }
@keyframes cc-blink { 50% { opacity: 0; } }
.cc-find { position: absolute; right: -2px; top: 50%; width: 62px; height: 62px; border-radius: 50%; background: #0ca4a5; transform: translateY(-50%); box-shadow: 0 8px 20px rgba(12, 164, 165, .45); transition: scale .35s var(--ease-out); }
.cc-find::before { content: ""; position: absolute; left: 20px; top: 19px; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; }
.cc-find::after { content: ""; position: absolute; left: 35px; top: 37px; width: 9px; height: 2px; background: #fff; transform: rotate(45deg); transform-origin: left; }
.cc-glass.is-found .cc-find { animation: cc-press .5s var(--ease-out); }
@keyframes cc-press { 40% { scale: .88; } }
.cc-tags { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .7vw, 10px); }
.cc-tag { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22%; font-size: clamp(11px, 1vw, 15px); color: rgba(255, 255, 255, .34); background: rgba(127, 124, 175, .16); transition: color .35s, background-color .35s, scale .45s var(--ease-out), box-shadow .35s; }
.cc-tag.is-on, .cc-tag:hover { color: #161d46; font-weight: 600; background: #f7f7f7; scale: 1.05; box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }
.cc-tag.is-on { color: #0ca4a5; }
.cc--giga .cc-specs { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .14); }
.cc--giga .cc-specs > div { background: #161d46; }
.cc--giga .cc-play:hover { background: rgba(12, 164, 165, .18); }
.cc--giga .cc-specs dt, .cc--giga .cc-specs .cc-k { color: #6fd5d6; }
.cc--giga .cc-specs dd, .cc--giga .cc-specs .cc-v { color: #fff; }
.cc--giga .cc-eq i { background: #6fd5d6; }
@media (max-width: 860px) { .cc--giga .cc-glass { grid-template-columns: 1fr; } .cc--giga .cc-tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* 스토리보드 씬 프레임 (GiGA Eyes 문서: 쪽 1600×900 기준 x110–921, y219–674) */
.sb-sketch.is-ge { aspect-ratio: 811 / 455; }
.sb-sketch.is-ge img { width: calc(100% * 1600 / 811); transform: translate(calc(-110 / 1600 * 100%), calc(-219 / 900 * 100%)); }
.ty-spec:has(img[src*="ge-font"]) { background: #f7f7f7; }

/* 사장이지: 숏폼 4편 나란히, 폰은 2열 */
@media (max-width: 860px) { .vgrid--eps .vg-item { flex: 0 0 calc(50% - 5px); } }
.vgrid--eps figcaption { margin-top: 10px; font-size: 10px; line-height: 1.6; }

/* 사장이지 Concept: 흰 카드 + 스케치 → 촬영 → UI 매치컷 (--sj: 브랜드 포인트 컬러) */
.cc--sj { --sj: #ff4e60; --sjs: #fff2f4; --sjl: rgba(255, 78, 96, .35); }
.cc--ax { --sj: #7b67c4; --sjs: #f1effa; --sjl: rgba(123, 103, 196, .35); }
:is(.cc--sj, .cc--ax) .cc-glass { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; background: #fff; }
:is(.cc--sj, .cc--ax) .cc-panel { order: -1; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc-say { min-height: 2.4em; margin: 0 0 22px; font-size: clamp(24px, 2.7vw, 38px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; color: #222; }
.cc-say.is-a { color: var(--sj); }
:is(.cc--sj, .cc--ax) .cc-text { color: #333; }
:is(.cc--sj, .cc--ax) .cc-keys-label { color: #888; }
:is(.cc--sj, .cc--ax) .cc-keys li { color: var(--sj); background: var(--sjs); border: 1px solid var(--sjl); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.cc-mc { width: 100%; max-width: 340px; justify-self: center; }
.mc-eps { display: flex; gap: 4px; margin-bottom: 12px; }
.mc-ep { flex: 1; padding: 9px 0; border: 0; border-radius: 6px; font-size: 10px; color: #777; background: #f4f5f7; cursor: pointer; transition: color .3s, background-color .3s; }
.mc-ep.is-on { color: #fff; background: var(--sj); }
@media (hover: hover) { .mc-ep:not(.is-on):hover { color: #222; background: var(--sjs, #fff2f4); } }
.mc-stage { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: #f4f5f7; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.mc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-bar { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 2; width: 14%; background: var(--sj); }
.mc-steps { display: flex; justify-content: space-between; margin-top: 12px; font-size: 10px; color: #aaa; }
.mc-steps .is-on { color: var(--sj); }
:is(.cc--sj, .cc--ax) .cc-specs { background: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1); }
:is(.cc--sj, .cc--ax) .cc-specs > div { background: #fff; }
:is(.cc--sj, .cc--ax) .cc-specs dt, :is(.cc--sj, .cc--ax) .cc-k { color: #888; }
:is(.cc--sj, .cc--ax) .cc-specs dd, :is(.cc--sj, .cc--ax) .cc-v { color: #222; }
:is(.cc--sj, .cc--ax) .cc-eq i { background: var(--sj); }
@media (max-width: 860px) { :is(.cc--sj, .cc--ax) .cc-glass { grid-template-columns: 1fr; } :is(.cc--sj, .cc--ax) .cc-panel { order: 0; } .cc-mc { max-width: 260px; } }

/* 기획 전환: 1차 기획안 → 피드백 → V2 */
.pv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .34fr) minmax(0, 1fr); gap: 14px clamp(16px, 2vw, 28px); }
.pv-doc { display: contents; }
.pv-doc figcaption { display: grid; gap: 6px; align-content: start; }
.is-from .pv-art { grid-area: 1 / 1; }
.is-to .pv-art { grid-area: 1 / 3; }
.pv-note { grid-area: 1 / 2; align-self: center; }
.is-from figcaption { grid-area: 2 / 1; }
.is-to figcaption { grid-area: 2 / 3; }
.pv-doc figcaption > .mono-label { font-size: 10px; color: var(--grey); }
.pv-doc figcaption b { font-size: 16px; font-weight: 600; color: var(--white); }
.pv-doc figcaption p { margin: 6px 0 0; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .72); }
.pv-doc figcaption > .pv-spec { margin-top: 6px; color: var(--white); }
.pv-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pv-jump button { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; color: var(--white); background: none; cursor: pointer; transition: color .3s, background-color .3s, border-color .3s; }
@media (hover: hover) { .pv-jump button:hover { color: #fff; border-color: #ff4e60; background: #ff4e60; } }
.pv-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #f5f5f5; }
.pv-deck { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.pv-deck::-webkit-scrollbar { display: none; }
.pv-deck:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px #ff4e60; }
.pv-page { display: block; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.pv-cover { display: flex; gap: 4px; }
.pv-cv { position: relative; flex: 1; min-width: 0; height: 100%; }
.pv-cv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-from .pv-cover img { filter: grayscale(1); transition: filter .45s; }
.pv-cc { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
@media (hover: hover) {
  .is-from .pv-art:hover .pv-cover img { filter: none; }
  .is-to .pv-art:hover .pv-cc { opacity: 1; }
}
.pv-count { position: absolute; right: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; font-size: 10px; color: #fff; background: rgba(0, 0, 0, .62); pointer-events: none; }
.pv-hint::after { content: "Scroll"; }
.pv-num { display: none; }
.pv-art.is-moved .pv-hint { display: none; }
.pv-art.is-moved .pv-num { display: inline; }
@media (hover: none) {
  .pv-deck { display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; }
  .pv-page { flex: 0 0 100%; }
  .pv-hint::after { content: "Swipe"; }
}
.pv-note { display: grid; justify-items: center; gap: 10px; text-align: center; }
.pv-note .mono-label { font-size: 10px; color: var(--grey); }
.pv-note p { margin: 0; font-size: clamp(16px, 1.5vw, 21px); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; color: #ff4e60; }
.pv-note i { width: 18px; color: var(--white); font-style: normal; }
.pv-note svg { display: block; width: 100%; height: auto; rotate: 45deg; }
.pv-rows { margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pv-row { --pvg: clamp(16px, 3vw, 40px); position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: var(--pvg); align-items: center; padding: 18px 8px; border-bottom: 1px solid var(--line); isolation: isolate; }
.pv-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--white); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease-out); }
.pv-k { font-size: 10px; color: var(--grey); }
.pv-row p { margin: 0; font-size: 15px; line-height: 1.65; }
.pv-a { color: var(--grey); }
.pv-a { display: flex; align-items: center; }
.pv-tx { min-width: 0; }
.pv-st { background: linear-gradient(currentColor, currentColor) 0 56% / 0 1px no-repeat; transition: background-size .55s var(--ease-out); }
.pv-b { color: var(--white); font-weight: 500; }
.pv-gap { display: none; }
@media (hover: hover) {
  .pv-b { color: var(--grey); font-weight: 400; transition: color .35s; }
  .pv-gap { flex: 1 0 0; display: flex; justify-content: center; align-items: center; margin-right: calc(-1 * var(--pvg)); }
  .pv-arrow { position: relative; display: block; flex: 0 0 var(--pvl, 40px); height: 2px; background: #ff4e60; clip-path: inset(-8px 100% -8px 0); transition: clip-path .6s var(--ease-out); }
  .pv-arrow::after { content: ""; position: absolute; right: 1px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #ff4e60; border-right: 2px solid #ff4e60; transform: translateY(-50%) rotate(45deg); }
  .pv-row:hover::before { transform: scaleY(1); }
  .pv-row:hover .pv-b { color: #ff4e60; font-weight: 500; }
  .pv-row:hover .pv-arrow { clip-path: inset(-8px -4px -8px 0); }
  .pv-row:hover .pv-a, .pv-row:hover .pv-k { color: #777; }
  .pv-row:hover .pv-st { background-size: 100% 1px; }
}
.pv-kept { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); margin: 22px 0 0; padding: 0 8px; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, .78); }
.pv-kept .mono-label { font-size: 10px; line-height: 2.4; color: #ff4e60; }
@media (max-width: 860px) {
  .pv-top { grid-template-columns: 1fr; }
  .is-from .pv-art { grid-area: 1 / 1; }
  .is-from figcaption { grid-area: 2 / 1; }
  .pv-note { grid-area: 3 / 1; margin: 18px 0; }
  .is-to .pv-art { grid-area: 4 / 1; }
  .is-to figcaption { grid-area: 5 / 1; }
  .pv-note i { rotate: 90deg; }
  .pv-row { grid-template-columns: 1fr; gap: 6px; }
  .pv-kept { grid-template-columns: 1fr; gap: 4px; }
}

/* 세로 숏폼 스토리보드: 에피소드 탭 + 스케치와 완성 영상을 나란히 */
.sbt-bar { position: sticky; top: 72px; z-index: 6; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sbt-tab { display: grid; gap: 4px; padding: 12px 14px; border: 0; text-align: left; color: var(--grey); background: var(--black); cursor: pointer; transition: color .3s, background-color .3s; }
.sbt-tab .mono-label { font-size: 10px; }
.sbt-tab b { font-size: 14px; font-weight: 600; }
.sbt-tab.is-on { color: #fff; background: var(--bk, #ff4e60); }
@media (hover: hover) { .sbt-tab:not(.is-on):hover { color: var(--white); background: #16161a; } }
.pb-boards .pb-board { margin-top: 0; }
.sb--tall { --sh: min(calc(100vh - 262px), 640px); }
.sb--tall .sb-wrap { grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }
.sb--tall .sb-stage { top: 158px; padding-top: 28px; }
.sb-duo { display: flex; gap: 12px; }
.sb-duo figure { margin: 0; }
.sb-duo figcaption { margin-top: 8px; font-size: 10px; color: var(--grey); }
.sb-draw img { display: block; height: var(--sh); aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: #fff; }
.sb--tall .sb-screen { height: var(--sh); aspect-ratio: 9 / 16; }
.sb--tall .sb-now { margin-top: 8px; }
.sb--tall .sb-list { padding: 8vh 0 14vh; }
.sb--tall .sb-item { min-height: 38vh; }
.sb--tall .sb-item.is-on { border-left-color: var(--bk, #ff4e60); }
@media (max-width: 1180px) and (min-width: 861px) { .sb--tall { --sh: min(calc(100vh - 262px), 46vw); } }
@media (max-width: 860px) {
  .sbt-bar { top: 64px; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
  .sbt-tab { padding: 10px 8px; text-align: center; justify-items: center; }
  .sbt-tab b { display: none; }
  .sb--tall { --sh: 38vh; }
  .sb--tall .sb-wrap { grid-template-columns: 1fr; gap: 0; }
  .sb--tall .sb-stage { top: 106px; padding-top: 10px; }
  .sb-duo { justify-content: center; }
  .sb--tall .sb-item { min-height: 0; }
}

/* 사장이지: 매치컷 단계 단어 (호버로 넘김), 피드백 보조 문구 */
.mc-steps { margin-top: 8px; }
.mc-step { flex: 1; padding: 8px 4px; border: 0; background: none; font-size: 10px; color: #aaa; cursor: pointer; transition: color .3s; }
.mc-step:first-child { text-align: left; }
.mc-step:last-child { text-align: right; }
.mc-step.is-on { color: var(--sj); }
@media (hover: hover) { .mc-step:hover { color: var(--sj); } }
.pv-note small { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .7); }

/* 스토리보드 구간에서만 보이는 다음 섹션 이동 버튼 */
.sbt-skip { position: fixed; right: var(--gutter); bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: 999px; font-size: 11px; color: #fff; background: var(--bk, #ff4e60); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .35s, translate .45s var(--ease-out), background-color .3s, color .3s; }
.sbt-skip.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
.sbt-skip i { display: block; width: 12px; }
.sbt-skip svg { display: block; width: 100%; height: auto; rotate: 135deg; }
@media (hover: hover) { .sbt-skip:hover { color: #0a0a0a; background: #fff; } }
@media (max-width: 860px) { .sbt-skip { bottom: 16px; padding: 10px 14px; } }

/* 비교표(폰): 위아래로 쌓이므로 화살표도 위에서 아래로, 전체 가운데 정렬 */
@media (max-width: 860px) {
  .pv-row { justify-items: center; text-align: center; }
  .pv-a { flex-direction: column; gap: 8px; }
  .pv-gap { flex: none; display: flex; justify-content: center; margin: 0; }
  .pv-arrow { position: relative; display: block; flex: none; width: 2px; height: 24px; background: #ff4e60; clip-path: none; }
  .pv-arrow::after { content: ""; position: absolute; left: 50%; right: auto; top: auto; bottom: 1px; width: 10px; height: 10px; border-top: 2px solid #ff4e60; border-right: 2px solid #ff4e60; transform: translateX(-50%) rotate(135deg); }
}

/* 나란히 반복 재생되는 장면 (loops): 챕터 카드 등 */
.lp-text { max-width: 820px; margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.lp-row { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px) clamp(12px, 1.4vw, 20px); max-width: 1080px; margin-inline: auto; }
.lp-row .sf-cell.lp-cell { position: relative; left: auto; top: auto; width: 100%; translate: none; z-index: auto; cursor: default; }
.lp-card { margin: 0; }
.lp-cell { display: block; }
.lp-cell .sf-clip { border-radius: 14px; }
.lp-card figcaption { display: grid; gap: 6px; margin-top: 14px; }
.lp-card figcaption .mono-label { font-size: 10px; color: var(--grey); }
.lp-card figcaption b { font-size: 15px; font-weight: 600; color: var(--white); line-height: 1.5; }
@media (max-width: 860px) { .lp-row { grid-template-columns: repeat(min(var(--c, 3), 2), minmax(0, 1fr)); gap: 16px 8px; } .lp-card figcaption { margin-top: 8px; } .lp-card figcaption b { font-size: 12px; } }
.lp-still img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; }
.pb-loops .lp-row + .lp-row { margin-top: clamp(28px, 3vw, 44px); }
.lp-inline { display: flex; gap: clamp(24px, 3.4vw, 56px); max-width: 1180px; margin-inline: auto; }
.lp-inline .lp-row { flex: var(--c) 1 0; margin: 0; max-width: none; }
@media (max-width: 860px) { .lp-inline { flex-direction: column; } .lp-inline .lp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-loops .lp-inline .lp-row + .lp-row { margin-top: 0; }
@media (max-width: 860px) { .pb-loops .lp-inline .lp-row + .lp-row { margin-top: 12px; } }

/* 리본 LED (ribbon) */
.rb-strip { --tw: calc(var(--zh) * var(--r)); display: grid; gap: 10px; }
.rb-strip + .rb-strip { margin-top: clamp(28px, 3vw, 44px); }
.rb-name { font-size: 10px; color: var(--grey); }
.rb-map, .rb-zoom { position: relative; overflow: hidden; background: #000; }
.rb-map { aspect-ratio: var(--r); border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.rb-map img, .rb-map iframe, .rb-track img, .rb-track iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.rb-map iframe, .rb-track iframe { opacity: 0; transition: opacity .6s; pointer-events: none; }
.rb-map iframe.is-on, .rb-track iframe.is-on { opacity: 1; }
.rb-lens { position: absolute; top: 0; bottom: 0; left: 0; width: var(--lw, 10%); box-shadow: 0 0 0 2px #fff, 0 0 0 9999px rgba(0, 0, 0, .55); animation: rbLens 20s linear infinite alternate; }
.rb-zoom { container-type: inline-size; height: var(--zh); border-radius: 10px; }
.rb-track { position: absolute; top: 0; left: 0; height: 100%; width: var(--tw); animation: rbPan 20s linear infinite alternate; }
@keyframes rbPan { to { transform: translateX(calc(100cqw - var(--tw))); } }
@keyframes rbLens { to { left: calc(100% - var(--lw, 10%)); } }
@media (max-width: 860px) { .rb-strip { --tw: calc(var(--zh) * .7 * var(--r)); } .rb-zoom { height: calc(var(--zh) * .7); } }
/* 가로로 긴 정지 장면 (stills) */
.st-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin: 0; }
.st-row + .st-row { margin-top: 14px; }
.st-row figcaption { display: grid; gap: 6px; }
.st-row figcaption .mono-label { font-size: 10px; color: var(--grey); }
.st-row figcaption b { font-size: 15px; font-weight: 600; color: var(--white); }
.st-row img { display: block; width: 100%; border-radius: 6px; }
@media (max-width: 860px) { .st-row { grid-template-columns: 1fr; gap: 8px; } .st-row + .st-row { margin-top: 22px; } }

/* 하나의 띠 목업 (ribbon-mock): 정면 띠 길이 1000 기준, 좌·우 띠는 같은 높이로 비율대로 */
.rbm { --W: 1000px; --h: calc(var(--W) / var(--fr)); --D: calc(var(--h) * var(--sr)); position: relative; height: clamp(320px, 34vw, 480px); overflow: hidden; border-radius: 16px; perspective: 900px; perspective-origin: 50% 10%; background: radial-gradient(120% 70% at 50% 0%, #2a3150 0%, #0d1020 45%, #05060b 100%); }
.rbm-glow { position: absolute; inset: 0; background: radial-gradient(40% 30% at 25% 0%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(40% 30% at 75% 0%, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; }
.rbm-stage { position: absolute; left: 50%; top: 34%; width: var(--W); height: var(--D); margin-left: calc(var(--W) / -2); transform-style: preserve-3d; transform: scale(var(--k, 1.12)) rotateX(70deg); transform-origin: 50% 0; }
.rbm-stand { position: absolute; left: -6%; right: -6%; top: 0; height: 150px; transform-origin: 50% 100%; transform: translateY(calc(-150px - var(--h))) translateZ(0) rotateX(-90deg) translateZ(-1px); background: linear-gradient(180deg, #0b0e1c 0%, #161c35 60%, #0b0e1c 100%); }
.rbm-stand::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 9px), repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 10px); }
.rbm-field { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #2f6f37 0 8%, #2a6532 8% 16%); box-shadow: 0 0 120px rgba(80, 160, 90, .25); }
.rbm-field::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid rgba(255, 255, 255, .55); }
.rbm-field::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; translate: -50% -50%; border: 2px solid rgba(255, 255, 255, .55); border-radius: 50%; }
.rbm-p { position: absolute; height: var(--h); background: none; transform-origin: 0 100%; overflow: hidden; }
.rbm-p--f { left: 0; top: calc(-1 * var(--h)); width: var(--W); transform: rotateX(-90deg); }
.rbm-p--l { left: 0; top: calc(var(--D) - var(--h)); width: var(--D); transform: rotateZ(-90deg) rotateX(-90deg); } /* 관중석 쪽에서 코너로 */
.rbm-p--r { left: var(--W); top: calc(-1 * var(--h)); width: var(--D); transform: rotateZ(90deg) rotateX(-90deg); } /* 코너에서 관중석 쪽으로 */
.rbm-p img, .rbm-p iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.rbm-p iframe { opacity: 0; transition: opacity .6s; pointer-events: none; }
.rbm-p iframe.is-on { opacity: 1; }
/* 기기 목업 (devices) */
.dv-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
.dv { margin: 0; }
.dv .pi-title { margin-bottom: clamp(16px, 1.8vw, 24px); }
.dv-body { position: relative; }
.dv-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.dv-screen img, .dv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.dv-screen iframe { opacity: 0; transition: opacity .6s; pointer-events: none; }
.dv-screen iframe.is-on { opacity: 1; }
.dv--tv .dv-screen { border: 6px solid #0b0b0d; border-radius: 6px; box-shadow: 0 0 0 1px #2c2c30, 0 24px 50px rgba(0, 0, 0, .55); }
.dv-neck { display: block; width: 6%; height: 22px; margin: 0 auto; background: linear-gradient(90deg, #1b1b1f, #2a2a2f, #1b1b1f); }
.dv-base { display: block; width: 30%; height: 6px; margin: 0 auto; border-radius: 6px 6px 2px 2px; background: linear-gradient(#2a2a2f, #121214); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
.dv--phone .dv-body { margin-top: 4%; }
.dv--phone .dv-screen { border: 9px solid #0b0b0d; border-radius: 26px; box-shadow: 0 0 0 1.5px #34343a, 0 24px 50px rgba(0, 0, 0, .55); }
.dv-cam { position: absolute; left: 18px; top: 50%; width: 7px; height: 22px; margin-top: -11px; border-radius: 4px; background: #000; box-shadow: 0 0 0 1px #1f1f23; z-index: 2; }
.dv-btn { position: absolute; top: -3px; right: 22%; width: 12%; height: 3px; border-radius: 2px 2px 0 0; background: #34343a; }
@media (max-width: 860px) { .dv-row { grid-template-columns: 1fr; } .rbm { height: 220px; perspective: 380px; perspective-origin: 50% 0%; } }

.rbm-flow { position: absolute; left: 16px; bottom: 14px; padding: 6px 10px; border-radius: 999px; font-size: 9px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rb-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 16px 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--line); }
.rb-specs div { padding: 14px 16px; background: var(--black); }
.rb-specs dt { font-size: 9px; color: var(--grey); }
.rb-specs dd { margin: 6px 0 0; font-size: 14px; color: var(--white); }
@media (max-width: 860px) { .rb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-row figcaption .st-time { font-size: 11px; color: var(--white); }

/* 기존 광고판 → 개선안 (renewal) */
.rn-note { display: grid; gap: 8px; margin-bottom: clamp(24px, 2.6vw, 36px); }
.rn-note .mono-label { font-size: 10px; color: var(--grey); }
.rn-note p { font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; color: #ff3c82; }
.rn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px clamp(16px, 2vw, 28px); }
.rn-h { font-size: 10px; color: var(--grey); }
.rn-h.is-to { color: #ff3c82; }
.rn-grid img { display: block; width: 100%; border-radius: 4px; }
.rn-a { filter: grayscale(1); opacity: .75; }
.pb-renewal .pv-rows { margin-top: clamp(28px, 3vw, 44px); }
.rn-col { display: grid; gap: 10px; align-content: start; }
@media (max-width: 860px) { .rn-grid { grid-template-columns: 1fr; gap: 24px; } .rn-col { gap: 6px; } }

/* On Air: 현장 영상(폰)을 크게, 중계 화면(TV)은 작게 옆에 */
.dv-row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); align-items: end; }
.dv--tv .pi-title { font-size: clamp(14px, 1.2vw, 17px); }
@media (max-width: 860px) { .dv-row { grid-template-columns: 1fr; } .dv--tv { width: 70%; } }

/* 기존 광고판 → 개선안 영상 비교 */
.rn-cmp { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.rn-hd, .rn-pair { display: grid; grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); align-items: center; }
.rn-hd span { font-size: 10px; color: var(--grey); }
.rn-hd .is-to { color: #ff3c82; }
.rn-cap { display: grid; gap: 6px; }
.rn-cap .mono-label { font-size: 10px; color: var(--grey); }
.rn-cap b { font-size: 14px; font-weight: 600; color: var(--white); }
.rn-cell { display: block; position: relative; aspect-ratio: var(--cr); overflow: hidden; border-radius: 6px; background: #000; }
.rn-cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); }
.rn-pair .sf-cell.rn-cell { left: auto; top: auto; width: 100%; translate: none; cursor: default; }
.rn-pair .sf-clip { height: 100%; border-radius: 6px; }
@media (max-width: 860px) { .rn-hd { display: none; } .rn-pair { grid-template-columns: 1fr 1fr; } .rn-cap { grid-column: 1 / -1; } }
/* On Air 목업: 두 기기 제목을 같은 줄에 맞추고 위아래 여백 정리 */
.dv-row { align-items: start; }
.dv--phone .dv-body { margin-top: 0; }
.dv-base { margin-bottom: 0; }

/* 접은 띠 (wrapStrip) */
.ws { display: grid; gap: 3px; }
.ws-row { position: relative; display: block; aspect-ratio: calc(var(--r) / var(--n)); overflow: hidden; background: none; border-radius: 3px; }
.ws-row iframe { position: absolute; top: 0; left: calc(var(--k) * -100%); width: calc(var(--n) * 100%); max-width: none; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.ws.is-on .ws-row iframe { opacity: 1; }
.rb-part + .rb-part { margin-top: clamp(28px, 3vw, 44px); }
.rb-ph { display: flex; justify-content: space-between; margin-bottom: 10px; }
.rb-ph .mono-label { font-size: 10px; color: var(--grey); }
.rb-ph .rb-size { color: rgba(255, 255, 255, .4); }
/* Before · After: 줄마다 Before 위 · After 아래 */
.rn-pair { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px clamp(16px, 2vw, 28px); align-items: start; }
.rn-pair + .rn-pair { margin-top: clamp(32px, 3.4vw, 48px); }
.rn-pair .rn-cap { grid-row: span 2; }
.rn-side { display: grid; gap: 8px; }
.rn-side video { display: block; width: 100%; aspect-ratio: 4000 / 40; object-fit: cover; background: none; border-radius: 3px; }
.rn-h { font-size: 10px; color: var(--grey); }
@media (max-width: 860px) { .rn-pair { grid-template-columns: 1fr; } .rn-pair .rn-cap { grid-row: auto; } }
.st-row .st-cell { position: relative; left: auto; top: auto; width: 100%; translate: none; cursor: default; }
.st-row .sf-clip { border-radius: 6px; }
.ws-row img { position: absolute; top: 0; left: calc(var(--k) * -100%); width: calc(var(--n) * 100%); max-width: none; height: 100%; object-fit: fill; }
.st-row .ws { width: 100%; }
.st-row > img { aspect-ratio: 4000 / 75; object-fit: cover; border-radius: 3px; background: none; }
.ws-row img { transition: opacity .4s; }
.ws.is-on .ws-row img { opacity: 0; } /* 영상이 뜨면 밑에 깔린 포스터는 숨김 */
.rbm-p img { transition: opacity .4s; }
.rbm-p:has(iframe.is-on) img { opacity: 0; }
/* Next · Previous 칸 높이 줄임 */
.next { padding-block: clamp(36px, 4.4vw, 68px); }
/* On Air 목업: 화면 안에 검은 여백이 생기지 않게 영상을 살짝 키워 꽉 채움 */
.dv-screen iframe { inset: auto; left: 50%; top: 50%; width: 106%; height: 106%; translate: -50% -50%; }
.dv-btn { display: none; }
/* On Air: 작은 TV는 큰 폰 화면의 세로 가운데에 맞춰 위아래 여백을 고르게 */
@media (min-width: 861px) { .dv--tv { align-self: center; margin-top: clamp(32px, 3vw, 48px); } }
/* 반복 재생 칸: 영상이 뜨면 밑에 깔린 포스터를 숨기고, 영상을 살짝 키워 가장자리 1px 틈이 안 보이게 */
.lp-cell .sf-clip { background: none; }
.lp-cell.is-playing .sf-poster { opacity: 0; transition: opacity .3s; }
.lp-cell .sf-clip iframe { scale: 1.06; }

/* 영상 묶음 안의 전광판 목업 + 실시간 자막 바 */
.vg-board { border-radius: 10px; }
.tt-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; justify-content: center; min-height: 15%; padding: 2% 4%; background: rgba(0, 0, 0, .82); }
.tt-text { font-size: clamp(9px, 7cqw, 22px); font-weight: 700; line-height: 1.3; color: #fff; text-align: center; letter-spacing: -.02em; }
.tt-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; background: #fff; animation: ttBlink .8s steps(1) infinite; }
@keyframes ttBlink { 50% { opacity: 0; } }

/* 정면 전광판 사진 목업 (위즈파크 외야 전광판) */
.lb-photo.is-front .lb-screen { left: 38.9%; top: 27.9%; width: 23.45%; height: 26.7%; }
.pb-mockup:has(.is-front) .lb-stage { width: min(100%, 720px); }
/* 설명과 전광판을 붙여 배치 (K-intelligence) */
@media (min-width: 861px) { .pb-mockup.is-tight { grid-template-columns: minmax(0, 360px) minmax(0, 860px); gap: clamp(28px, 3vw, 48px); justify-content: center; } .pb-mockup.is-tight .lb-stage { justify-self: start; } }
.pi-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(16px, 2vw, 28px); }
.pi-photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.pi-photos-cap { margin-top: 10px; font-size: 10px; color: var(--grey); }
/* 정사각 스토리보드(워터페스티벌): 고정된 영상이 한 화면 안에 다 들어오게 높이 기준으로 크기 제한 */
@media (min-width: 861px) {
  .pb-board[style="--sr:1"] .sb-stage { top: 96px; }
  .pb-board[style="--sr:1"] .sb-screen { width: min(100%, calc(100vh - 230px)); }
}
/* 정사각 스토리보드: 오른쪽 씬 썸네일도 정사각 그대로 */
.pb-board[style="--sr:1"] .sb-sketch.is-frame { width: min(100%, 320px); aspect-ratio: 1; height: auto; }
.pb-board[style="--sr:1"] .sb-sketch.is-frame img { width: 100%; height: 100%; object-fit: cover; }
.lp-name { display: block; margin-top: 8px; font-size: 12px; color: rgba(255, 255, 255, .72); }
/* 제목이 위에 붙은 영상: 화면 높이에 맞춰 줄어들어도 제목 바로 아래 왼쪽에서 시작 */
.pi--wide:has(> .pi-top) .pi-media .video { margin-left: 0; }
/* 반복 재생 묶음: 제목·설명과 같은 왼쪽 선에서 시작해 폭 전체를 사용 */
.pb-loops .lp-row, .pb-loops .lp-inline { max-width: none; margin-inline: 0; }

/* 호버 재생 영상 */
.vh-hover { cursor: pointer; }
.vh-hover iframe { pointer-events: none; }
.vh-hint { position: absolute; left: 14px; bottom: 14px; z-index: 2; padding: 6px 10px; border-radius: 999px; font-size: 9px; color: #fff; background: rgba(0, 0, 0, .55); transition: opacity .3s; }
.vh-hover.is-on .vh-hint { opacity: 0; }
.vh-hover video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vgrid.is-capped { max-width: 820px; }

/* 직접 만든 재생 버튼 (좌하단) */
.cp-box { cursor: pointer; }
.cp-box iframe { pointer-events: none; }
.cp-btn { position: absolute; left: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; transition: opacity .12s, transform .12s; }
.cp-btn i { position: absolute; left: 50%; top: 50%; translate: -38% -50%; width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.cp-box.is-playing .cp-btn { opacity: 0; transform: scale(.85); pointer-events: none; }
@media (hover: hover) { .cp-box:not(.is-playing):hover .cp-btn { background: var(--cp, #0100F9); } }

/* 직접 만든 타임라인: 재생을 시작하면 하단에 얇게, 마우스를 올리면 두껍게 */
.cp-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 18px; display: flex; align-items: flex-end; cursor: pointer; opacity: 0; transition: opacity .2s; touch-action: none; }
.cp-bar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .28); transition: height .15s; }
.cp-fill { position: relative; display: block; width: 0; height: 3px; background: var(--cp, #0100F9); transition: height .15s; }
.cp-time { position: absolute; right: 10px; bottom: 10px; font-size: 9px; color: #fff; opacity: 0; transition: opacity .15s; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cp-box:hover .cp-bar { opacity: 1; } /* 평소엔 숨기고 마우스를 올리면 표시 */
@media (hover: none) { .cp-box.is-started .cp-bar { opacity: 1; } } /* 터치 기기는 재생 후 계속 표시 */
.cp-box:hover .cp-bar::before, .cp-box:hover .cp-fill { height: 6px; }
.cp-box:hover .cp-time { opacity: 1; }
.cp-box .cp-btn { bottom: 22px; }
/* 타임라인 끝 원형 손잡이: 호버 시에만 */
.cp-fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .45); translate: 0 -50%; scale: 0; transition: scale .15s; }
.cp-box:hover .cp-fill::after { scale: 1; }
.cp-bar:active .cp-fill::after { scale: 1.2; }

/* 재생 버튼: 사이트 디자인 큐인 사선(슬래시) 사각형, 프로젝트 키컬러 */
.cp-box .cp-btn { width: 40px; height: 34px; border-radius: 3px; background: var(--cp, #0100F9); transform: skewX(-18deg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cp-box .cp-btn i { translate: -38% -50%; transform: skewX(18deg); border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
.cp-box.is-playing .cp-btn { opacity: 0; transform: skewX(-18deg) scale(.85); }
@media (hover: hover) { .cp-box:not(.is-playing):hover .cp-btn { background: var(--cp, #0100F9); } }
/* 전체 화면 · 화질: 오른쪽 아래 작게, 호버 시에만 */
.cp-tools { position: absolute; right: 10px; bottom: 26px; z-index: 3; display: flex; gap: 6px; align-items: center; opacity: 0; transition: opacity .2s; }
.cp-box:hover .cp-tools { opacity: 1; }
.cp-tools button { height: 24px; padding: 0 8px; border: 0; border-radius: 3px; color: #fff; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer; }
.cp-q { font-size: 9px; }
.cp-fs { position: relative; width: 24px; padding: 0 !important; }
.cp-fs i { position: absolute; inset: 7px; border: 1.5px solid #fff; border-radius: 1px; clip-path: polygon(0 0, 35% 0, 35% 15%, 15% 15%, 15% 35%, 0 35%, 0 65%, 15% 65%, 15% 85%, 35% 85%, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 35%, 85% 35%, 85% 15%, 65% 15%, 65% 0, 100% 65%, 100% 100%, 65% 100%, 65% 85%, 85% 85%, 85% 65%); }
.cp-tools button:hover { background: var(--cp, #0100F9); }
.cp-time { right: auto; left: 10px; }
/* 사이트 디자인 언어: 둥근 모서리 없이 직선으로만 */
.cp-box .cp-btn, .cp-tools button, .vh-hint, .dv-tag { border-radius: 0; }
/* 소리 켜기·끄기: 스피커 + 음파(켜짐) / 사선(꺼짐), 직선만 */
.cp-vol { position: relative; width: 24px; padding: 0 !important; }
.cp-vol i { position: absolute; left: 5px; top: 8px; width: 4px; height: 8px; background: #fff; }
.cp-vol i::before { content: ""; position: absolute; left: 3px; top: -3px; border-right: 6px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.cp-vol i::after { content: ""; position: absolute; left: 11px; top: -1px; width: 3px; height: 10px; border-right: 1.5px solid #fff; transform: skewX(-18deg); }
.cp-vol.is-muted i::after { left: 9px; top: -3px; width: 0; height: 14px; border-right-width: 2px; transform: rotate(45deg); }
/* 타임라인 손잡이가 영상 밖으로 튀어나와도 잘리지 않게: 상자는 넘침 허용, 영상만 모서리 둥글게 자름 */
.video.cp-box { overflow: visible; }
.video.cp-box > iframe { border-radius: inherit; overflow: hidden; clip-path: inset(0 round var(--radius, 0px)); }
.cp-box .cp-bar { bottom: -8px; height: 26px; }
.cp-box .cp-bar::before, .cp-box .cp-fill { margin-bottom: 8px; }
.cp-box:hover .cp-fill::after { scale: 1.15; }
.cp-box .cp-fill { border-radius: 0; }
.cp-btn:hover { filter: brightness(1.12); }
.mod-video .cp-box { aspect-ratio: auto; }
/* 재생 버튼: 정사각에 가깝지 않게, 얇은 슬래시 형태 (좌우 여백만 줄이고 아이콘 주변 여백은 유지) */
.cp-box .cp-btn { width: 30px; height: 42px; transform: skewX(-20deg); }
.cp-box .cp-btn i { transform: skewX(20deg); border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; translate: -40% -50%; }
.cp-box.is-playing .cp-btn { transform: skewX(-20deg) scale(.85); }
/* 타임라인 손잡이: 원형 대신 두께감 있는 흰색 슬래시 */
.cp-fill::after { right: -3px; width: 5px; height: 18px; border-radius: 0; transform: skewX(-20deg); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.cp-box .cp-time { bottom: 22px; }
.cp-box.is-scrub .cp-btn { opacity: 0; pointer-events: none; }
/* 세로 영상 반복 묶음: 칸이 너무 커지지 않게 칸당 폭 제한 (왼쪽 정렬 유지) */
.pb-loops .lp-row.is-tall { max-width: calc(var(--c) * 210px + (var(--c) - 1) * 20px); }
@media (max-width: 860px) { .pb-loops .lp-row.is-tall { max-width: none; } }

/* 사장이지 에피소드 4편: 화면을 꽉 채우지 않도록 묶음 폭을 줄여 가운데 정렬 (한 편 ≈ 275px, 사이 여백 24px) */
@media (min-width: 861px) { .vgrid--eps { max-width: 1180px; margin-inline: auto; gap: 24px; } .vgrid--eps .vg-item { flex: 1 1 0; } }

/* ==========================================================================
   ABOUT — 숫자 요약 · 경력 · 학력 (직선, 라운드 없음)
   ========================================================================== */
.figures { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--line); }
.figures > div { padding: 22px 0 0; }
.figures > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.figures dd { font-size: clamp(22px, 2.4vw, 36px); font-weight: 700; letter-spacing: -.03em; font-family: "Pretendard Variable", Pretendard, var(--font); }
.figures dt { margin-top: 8px; font-size: 10px; color: var(--grey); }
.about-grid h3 .h3-sub { display: block; margin-top: 12px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--white); font-family: "Pretendard Variable", Pretendard, sans-serif; }

.xp { border-top: 1px solid var(--line); }
.xp-item { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.xp-period { font-size: 11px; line-height: 1.7; color: var(--grey); }
.xp-period span { color: var(--white); opacity: .7; }
.xp-body h4 { font-size: clamp(18px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.xp-body h4 b { font-weight: 700; }
.xp-body h4 b + .ko { margin-left: 6px; font-size: .62em; font-weight: 500; color: var(--grey); }
.xp-role { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.xp-text { margin-top: 18px; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .85); max-width: 42em; }
.xp-points { margin-top: 18px; list-style: none; display: grid; gap: 8px; }
.xp-points li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .85); }
.xp-points li::before { content: ''; position: absolute; left: 3px; top: .45em; width: 2px; height: .9em; background: var(--blue); transform: skewX(-20deg); }
.xp-works { margin-top: 22px; list-style: none; border-top: 1px solid var(--line); }
.xp-works li > a, .xp-works.is-plain li { display: grid; grid-template-columns: 44px minmax(0, 150px) 1fr auto; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.xp-works.is-plain li { grid-template-columns: 44px 1fr; color: rgba(255, 255, 255, .72); }
.xp-works .mono-label { font-size: 10px; color: var(--grey); }
.xp-works b { font-weight: 600; font-size: 11px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-works i { font-style: normal; transition: transform .5s var(--ease); }
.xp-works a { transition: padding .4s var(--ease), color .3s; }
.xp-works a:hover { padding-left: 10px; color: var(--blue); }
.xp-works a:hover i { transform: rotate(-45deg); }
.xp-works.is-plain { margin-top: 18px; }
.xp-works + .xp-works.is-plain { margin-top: 0; border-top: 0; }
.xp-note { margin-top: 18px; font-size: 12px; line-height: 1.7; color: var(--grey); }
@media (max-width: 600px) {
  .xp-item { grid-template-columns: 1fr; gap: 10px; }
  .xp-works li > a { grid-template-columns: 40px 1fr auto; }
  .xp-works li > a b { display: none; }
  .figures > div + div { padding-left: 14px; }
}

/* About 경력 작품: 같은 연도끼리 한 줄에 묶음 — 연도 | 작품들(줄바꿈) */
.xp-works.is-years li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--line); }
.xp-works.is-years li > div { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.xp-works.is-years a { display: inline-flex; align-items: baseline; gap: 7px; font-size: 13px; padding: 0; }
.xp-works.is-years a b { font-size: 10px; color: var(--grey); white-space: nowrap; overflow: visible; }
.xp-works.is-years a .ko { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.xp-works.is-years a:hover { padding-left: 0; color: var(--white); }
.xp-works.is-years a:hover .ko { color: var(--blue); border-bottom-color: var(--blue); }
@media (max-width: 600px) { .xp-works.is-years a b { display: inline; } }

/* About 학력: 한 줄짜리 작은 섹션 / 개인 학습 */
.about-grid.is-compact { padding-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(36px, 4vw, 56px); }
.edu-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.edu-row .mono-label { font-size: 11px; color: var(--grey); min-width: 150px; }
.edu-row b { font-weight: 600; }
.edu-row b + .ko { color: rgba(255, 255, 255, .6); font-size: 14px; }
.xp-via { margin-top: 14px; font-size: 10px; color: var(--grey); }
.edu-text { padding: 16px 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.edu-row:has(+ .edu-text) { border-bottom: 0; padding-bottom: 0; }
.xp-type { display: inline-block; margin-top: 10px; padding: 3px 8px; border: 1px solid var(--line); font-size: 11px; color: rgba(255, 255, 255, .7); }

/* ==========================================================================
   ABOUT 재구성 — 양옆 여백 + 가운데 정렬, 촘촘한 섹션 간격, 섹션 진입 인터랙션, 오른쪽 세로 앵커
   ========================================================================== */
.about-page { --ab-w: min(1200px, calc(100% - 2 * clamp(20px, 7vw, 150px))); }
.about-page > .about-hero, .about-page > .about-grid, .about-page > .ab-works { width: var(--ab-w); margin-inline: auto; padding-inline: 0; }
.about-page .about-grid { position: relative; border-top: 0; padding-block: clamp(48px, 5.5vw, 84px); grid-template-columns: minmax(160px, 1fr) 2.2fr; }
.about-page .contact-unfold { min-height: 160vh; }
.about-page .about-hero { padding-bottom: clamp(48px, 6vw, 88px); }

/* 섹션 진입: 윗선이 왼쪽부터 그어지고, 선을 따라 블루 슬래시가 한 번 지나감. 제목은 슬래시가 일어서며 들어옴 */
.about-page .about-grid::before, .about-page .ab-works::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.about-page .about-grid::after, .about-page .ab-works::after { content: ""; position: absolute; top: -2px; left: 0; width: 64px; height: 5px; background: var(--blue); filter: blur(3px); opacity: 0; pointer-events: none; }
.about-page .ab-in::before { transform: none; }
.about-page .ab-in::after { animation: abScan 1.3s var(--ease) forwards; }
@keyframes abScan { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 100% { left: calc(100% - 64px); opacity: 0; } }
.about-page .about-grid > h3 { position: sticky; top: 112px; align-self: start; opacity: 0; transform: translateX(-14px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.about-page .about-grid > h3 .slash { display: inline-block; transform: rotate(-60deg) scale(.6); transition: transform .9s var(--ease-out) .15s; }
.about-page .ab-in > h3 { opacity: 1; transform: none; }
.about-page .ab-in > h3 .slash { transform: none; }
.about-page .ab-works { position: relative; }
.about-page .ab-works .next-cats { padding-inline: 0; border-top: 0; }
.instant .about-page .about-grid::before, .instant .about-page .about-grid > h3, .instant .about-page .about-grid > h3 .slash { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .about-page .about-grid::before, .about-page .ab-works::before { transform: none; transition: none; }
  .about-page .about-grid > h3, .about-page .about-grid > h3 .slash { opacity: 1; transform: none; transition: none; }
  .about-page .ab-in::after { animation: none; }
}
@media (max-width: 860px) {
  .about-page .about-grid { grid-template-columns: 1fr; }
  .about-page .about-grid > h3 { position: static; }
}

/* 첫 화면: 이름 옆 생년월일, 프로필 사진 칸(사진이 있을 때만) */
.ab-born { margin-left: 12px; font-size: .55em; font-weight: 400; letter-spacing: .02em; color: var(--grey); }
.about-hero.has-photo { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 340px); align-items: end; gap: clamp(24px, 4vw, 64px); }
.ah-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); filter: grayscale(.15); }
@media (max-width: 860px) { .about-hero.has-photo { grid-template-columns: 1fr; } .ah-photo { width: min(260px, 70%); } }

/* Who I Am 역량 수치: 얇은 큰 숫자 + 블러 블루 슬래시 + 얇은/굵은 섞인 제목 (메인 슬로건과 같은 언어) */
.vals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid var(--line); }
.val { padding: 26px 28px 30px 0; border-bottom: 1px solid var(--line); }
.val:nth-child(even) { padding: 26px 0 30px 28px; border-left: 1px solid var(--line); }
.val-n { display: flex; align-items: baseline; font-size: clamp(56px, 6vw, 100px); font-weight: 200; letter-spacing: -.05em; line-height: .9; }
.val-n small { margin: 0 .22em 0 .05em; font-size: .3em; font-weight: 400; letter-spacing: 0; color: var(--grey); }
.val-slash { display: inline-block; align-self: center; width: .08em; height: .78em; margin-left: .16em; background: var(--blue); transform: skewX(-22deg); filter: blur(2.5px); }
.val-h { margin-top: 18px; font-size: clamp(18px, 1.7vw, 24px); letter-spacing: -.02em; line-height: 1.2; }
.val-h .thin { font-weight: 300; }
.val-h b { font-weight: 700; }
.val-en { margin-top: 10px; font-size: 12px; letter-spacing: .03em; color: rgba(255, 255, 255, .72); }
.val-ko { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--grey); }
@media (max-width: 600px) { .vals { grid-template-columns: 1fr; } .val:nth-child(even) { padding-left: 0; border-left: 0; } }

/* What I Do 안의 Tools */
.ab-sub { margin: 40px 0 16px; font-size: 11px; color: var(--grey); }

/* 오른쪽 세로 앵커: 번호 + 짧은 선, 현재 섹션은 블루 슬래시. 이름은 레일에 마우스를 올리면 */
.ab-rail { position: fixed; right: clamp(12px, 1.8vw, 28px); top: 50%; transform: translateY(-50%); z-index: 500; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--white); transition: color .4s; }
.ab-dot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.ab-dot .ab-no { font-size: 9px; opacity: .35; transition: opacity .3s; }
.ab-dot .ab-name { font-size: 10px; opacity: 0; transform: translateX(8px); transition: opacity .35s, transform .45s var(--ease-out); white-space: nowrap; }
.ab-dot i { display: block; width: 14px; height: 2px; background: currentColor; opacity: .35; transition: width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s, transform .45s var(--ease-out), background .3s; }
.ab-dot.is-on .ab-no { opacity: 1; }
.ab-dot.is-on i { width: 4px; height: 18px; opacity: 1; background: var(--blue); transform: skewX(-20deg); }
.ab-rail:hover .ab-name, .ab-dot:focus-visible .ab-name { opacity: .55; transform: none; }
.ab-rail:hover .ab-dot:hover .ab-name, .ab-rail:hover .ab-dot.is-on .ab-name { opacity: 1; }
.ab-dot:hover i { opacity: .8; }
.ab-rail.is-light { color: #111; }
@media (max-width: 860px) { .ab-rail { display: none; } }
.ab-dot { position: relative; }
.ab-dot .ab-name { position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%; }
.ab-dot .ab-no { min-width: 14px; text-align: right; }

/* About Info: 빈 공간을 미리 잡지 않고, 줄이 열리는 만큼 패널과 섹션이 함께 커짐 */
.about-page .contact-unfold { min-height: 0; }
.about-page .contact-unfold > .info-list { position: static; }
@media (max-width: 760px) { .about-page .contact-unfold { min-height: 0; } .about-page .contact-unfold > .info-list { position: static; } }

/* 오른쪽 앵커: 섹션 이름(영문 + 한글)을 항상 표시 — 레일 자리만큼 본문 양옆 여백을 넓힘 */
@media (min-width: 1281px) { .about-page { --ab-w: min(1200px, calc(100% - 2 * clamp(150px, 12vw, 220px))); } }
.ab-rail { gap: 6px; }
.ab-dot .ab-name { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; opacity: .42; transform: none; line-height: 1.15; }
.ab-dot .ab-name .mono-label { font-size: 9px; letter-spacing: .12em; }
.ab-dot .ab-name .ko { font-size: 11px; letter-spacing: 0; }
.ab-dot:hover .ab-name, .ab-rail:hover .ab-dot:hover .ab-name { opacity: .85; }
.ab-dot.is-on .ab-name, .ab-rail:hover .ab-dot.is-on .ab-name { opacity: 1; }
.ab-rail:hover .ab-name { opacity: .42; }
/* 레일 자리가 좁은 화면: 이름은 레일에 마우스를 올렸을 때만 */
@media (max-width: 1280px) {
  .ab-dot .ab-name { opacity: 0; transform: translateX(8px); }
  .ab-rail:hover .ab-name { opacity: .6; transform: none; }
  .ab-rail:hover .ab-dot.is-on .ab-name, .ab-rail:hover .ab-dot:hover .ab-name { opacity: 1; }
}

/* ==========================================================================
   ABOUT — 섹션 제목을 본문 안 좌상단으로 (Hello, I'm 처럼), 섹션은 가운데 정렬된 한 덩어리
   ========================================================================== */
.about-page .about-grid { display: block; }
.about-page .about-grid > h3 { position: static; margin-bottom: clamp(28px, 3vw, 44px); }
.ab-h { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 10px; }
.ab-h > .mono-label { flex-basis: 100%; font-size: 11px; color: var(--grey); }
.ab-h > b.ko { font-size: clamp(26px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.03em; color: var(--white); text-transform: none; line-height: 1.1; }
.ab-h > .h3-sub { display: inline; margin-top: 0; font-size: 14px; color: var(--grey); }

/* 작업 가치관 숫자: 슬롯머신 릴 */
.val-n { align-items: flex-end; line-height: 1; }
.val-n small { padding-bottom: .12em; }
.slot { display: inline-block; height: 1em; overflow: hidden; line-height: 1; }
.slot-reel { display: flex; flex-direction: column; transform: translateY(0); will-change: transform; }
.slot-reel > span { display: block; height: 1em; line-height: 1; }
.is-rolling .slot-reel { transform: translateY(calc(-1em * (20 + var(--d)))); transition: transform 1.6s cubic-bezier(.16, .74, .14, 1) calc(var(--k, 0) * .14s); }
.is-rolling .slot + .slot .slot-reel { transition-duration: 1.9s; }
.is-rolling .slot + .slot + .slot .slot-reel { transition-duration: 2.2s; }
@media (prefers-reduced-motion: reduce) { .slot-reel, .is-rolling .slot-reel { transform: translateY(calc(-1em * (20 + var(--d)))); transition: none; } }

/* 프로필 사진 자리 미리보기 — 이름 오른쪽, 슬래시로 잘린 4:5 세로 프레임 */
.ah-ph { position: relative; aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  background: repeating-linear-gradient(-70deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px), linear-gradient(160deg, rgba(1, 0, 249, .28), rgba(255, 255, 255, .04)); }
.ah-ph .mono-label { font-size: 10px; color: rgba(255, 255, 255, .8); }
.ah-ph .ko { font-size: 12px; color: var(--grey); }
/* 사진 칸이 있으면 큰 로고를 조금 줄여 사진과 겹치지 않게 */
.about-hero.has-photo .lockup--about { font-size: clamp(48px, 7vw, 128px); }
.about-hero.has-photo .ah-photo { align-self: center; }

/* 섹션 제목: 영문 라벨만 (한글 큰 제목 없음) */
.about-page .about-grid > h3 { font-size: 11px; }
/* 작업 가치관 카드: 한글 제목을 주인공으로, 영문은 한 줄 보조 */
.val-t { margin-top: 20px; font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; letter-spacing: -.03em; line-height: 1.3; color: var(--white); }
.val .val-h { margin-top: 10px; font-size: 14px; letter-spacing: -.01em; color: rgba(255, 255, 255, .8); }
.val .val-h .val-en { margin-top: 0; font-size: 12px; color: rgba(255, 255, 255, .5); }
.val .val-ko { margin-top: 10px; }
/* About Info: 카드 두 장 높이의 여백을 미리 두고, 카드가 열려 내려오는 만큼 그 여백을 채움 */
.about-page .contact-unfold { padding-bottom: calc(clamp(48px, 5.5vw, 84px) + (1 - var(--up, 0)) * 108px); }

/* 섹션 제목을 진입 라인의 왼쪽 끝에: "/ TITLE ———" 제목 바로 오른쪽에서 라인이 그어지고 블루 빛이 라인을 따라 지나감 */
.about-page .about-grid::before, .about-page .about-grid::after { display: none; }
.about-page .about-grid { padding-top: clamp(40px, 4.5vw, 64px); }
.about-page .about-grid > h3 { display: flex; align-items: center; gap: 14px; }
.about-page .about-grid > h3::after { content: ""; flex: 1; height: 5px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .1s;
  background: linear-gradient(90deg, transparent, var(--blue) 45%, #6f6dff 50%, var(--blue) 55%, transparent) -120px 50% / 120px 3px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.about-page .ab-in > h3::after { transform: none; animation: abLineScan 1.5s var(--ease) .25s forwards; }
@keyframes abLineScan { from { background-position: -120px 50%, 0 50%; } to { background-position: calc(100% + 120px) 50%, 0 50%; } }
.about-page .about-grid > h3 .h3-sub { display: inline; margin: 0; flex: none; }
.instant .about-page .about-grid > h3::after { transition: none; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .about-page .about-grid > h3::after { transform: none; transition: none; animation: none; } }
/* 제목 라인 바로 아래 목록의 윗선은 겹치므로 생략 */
.about-page .xp { border-top: 0; }

/* Hello 첫 화면도 다른 섹션과 같은 제목 라인 ("/ HELLO, I'M ———") — 페이지가 열리면 바로 그어짐 */
.about-page .ab-hline { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); font-size: 11px; color: var(--grey); }
.about-page .ab-hline::after { content: ""; flex: 1; height: 5px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .3s;
  background: linear-gradient(90deg, transparent, var(--blue) 45%, #6f6dff 50%, var(--blue) 55%, transparent) -120px 50% / 120px 3px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.about-page .ab-hline .slash { display: inline-block; transform: rotate(-60deg) scale(.6); transition: transform .9s var(--ease-out) .2s; }
.about-page .ab-in > .ab-hline::after { transform: none; animation: abLineScan 1.5s var(--ease) .45s forwards; }
.about-page .ab-in > .ab-hline .slash { transform: none; }
.about-hero.has-photo { align-items: center; }
@media (prefers-reduced-motion: reduce) { .about-page .ab-hline::after { transform: none; transition: none; animation: none; } }

/* Hello 라벨: 글자 단위 분리와 무관하게 한 덩어리 */
.about-page .ab-hline .ab-hl-t { display: inline-block; }

/* About Info: 펼치는 동안 제목·패널 고정 — 섹션 높이 = 화면 + 펼침 거리(카드당 200px) */
.about-page .contact-unfold { min-height: calc(100vh + var(--unfold-d, 1600px)); padding-bottom: clamp(48px, 5.5vw, 84px); }
.about-page .contact-unfold > h3 { position: sticky; top: 96px; z-index: 1; }
.about-page .contact-unfold > .info-list { position: sticky; top: 150px; }
@media (max-width: 760px) { .about-page .contact-unfold { min-height: calc(100vh + var(--unfold-d, 1600px)); } .about-page .contact-unfold > .info-list { position: sticky; top: 140px; } }
/* 제목과 패널을 한 덩어리로 고정 (따로 고정하면 제목만 남아 겹침) */
.about-page .contact-unfold > .unf-pin { position: sticky; top: 96px; }
.about-page .contact-unfold .unf-pin > h3 { position: static; margin-bottom: clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: 14px; opacity: 0; transform: translateX(-14px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.about-page .contact-unfold .unf-pin > .info-list { position: static; }
.about-page .contact-unfold .unf-pin > h3 .slash { display: inline-block; transform: rotate(-60deg) scale(.6); transition: transform .9s var(--ease-out) .15s; }
.about-page .contact-unfold .unf-pin > h3::after { content: ""; flex: 1; height: 5px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .1s;
  background: linear-gradient(90deg, transparent, var(--blue) 45%, #6f6dff 50%, var(--blue) 55%, transparent) -120px 50% / 120px 3px no-repeat, linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat; }
.about-page .contact-unfold.ab-in .unf-pin > h3 { opacity: 1; transform: none; }
.about-page .contact-unfold.ab-in .unf-pin > h3 .slash { transform: none; }
.about-page .contact-unfold.ab-in .unf-pin > h3::after { transform: none; animation: abLineScan 1.5s var(--ease) .25s forwards; }
@media (max-width: 760px) { .about-page .contact-unfold > .unf-pin { top: 84px; } .about-page .contact-unfold .unf-pin > .info-list { position: static; } }
/* Hello 라인 위 여백 축소 (헤더 바로 아래에서 시작) */
.about-page .about-hero { padding-top: clamp(104px, 9vw, 140px); }

/* About Info (휠 제어): 고정·긴 섹션 없이 제자리. 아래 여백 = 기본 + 카드 두 장(열리는 만큼 줄어듦) */
.about-page .contact-unfold { min-height: 0; padding-bottom: calc(clamp(48px, 5.5vw, 84px) + (1 - var(--up, 0)) * 108px); }
.about-page .contact-unfold > .unf-pin { position: static; }
@media (max-width: 760px) { .about-page .contact-unfold { min-height: 0; } .about-page .contact-unfold > .unf-pin { position: static; } }
/* 펼치는 동안 다음 섹션이 보이지 않도록 아래 여백을 화면 30% 만큼 미리 — 카드가 열리는 만큼 줄어듦 */
.about-page .contact-unfold { padding-bottom: calc(clamp(48px, 5.5vw, 84px) + (1 - var(--up, 0)) * 30vh); }
.contact-unfold.no-tr .info-row, .contact-unfold.no-tr .info-row > * { transition: none !important; }

/* ==========================================================================
   ABOUT 작업 가치관 v2 — 굵은 숫자, 핵심 키워드 강조(블루 바가 밑으로 그어짐), 도구 카운터
   ========================================================================== */
.val-n { font-weight: 700; letter-spacing: -.035em; }
.slot { letter-spacing: 0; margin-right: -.02em; }
.slot-reel > span { letter-spacing: 0; }
.val-n small { font-weight: 400; color: rgba(255, 255, 255, .42); }
.val-t { font-weight: 400; color: rgba(255, 255, 255, .62); }
.val .kw { font-weight: 800; color: var(--white); background: linear-gradient(var(--blue), var(--blue)) 0 96% / 0% .16em no-repeat; transition: background-size 1.1s var(--ease) .5s; padding-bottom: .04em; }
.val.is-in .kw { background-size: 100% .16em; }
.val .val-h .kw { font-weight: 700; background-size: 0% .12em; }
.val.is-in .val-h .kw { background-size: 100% .12em; transition-delay: .8s; }
/* 도구 카운터: 두 자리 릴(10 미만이면 십의 자리 접힘) + 괄호 안 분야 이름 릴 */
.cnt { display: inline-flex; }
.cnt .slot { width: .6em; transition: width .6s var(--ease-out); }
.cnt .slot.is-off { width: 0; }
.cnt .slot-reel { transition: transform .9s cubic-bezier(.16, .74, .14, 1); }
.val-tools { white-space: nowrap; }
.val-tools .word { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: bottom; }
.val-tools .word-reel { display: flex; flex-direction: column; transition: transform .8s cubic-bezier(.16, .74, .14, 1); }
.val-tools .word-reel > span { display: block; height: 1.25em; line-height: 1.25em; text-align: center; color: rgba(255, 255, 255, .75); }

/* ==========================================================================
   ABOUT What I Do — 마우스 기울기(3D) 대신 가볍고 매끄러운 직선 호버: 사선 블루 면이 밀려 들어오고 살짝 떠오름
   유리 블러(backdrop-filter)·떠다니는 애니메이션 제거로 끊김 해소, 모서리는 직선
   ========================================================================== */
.about-page .cap { animation: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .045); translate: 0 0; transition: translate .45s var(--ease-out), border-color .35s, opacity 1s var(--ease-out); }
.about-page .cap::after { display: none; }
.about-page .cap::before { content: ""; position: absolute; top: 0; bottom: 0; left: -25%; width: 150%; background: var(--blue); transform: translateX(-102%) skewX(-20deg); transition: transform .6s var(--ease); z-index: 0; pointer-events: none; }
.about-page .cap:hover { background: rgba(255, 255, 255, .045); translate: 0 -4px; border-color: rgba(255, 255, 255, .3); }
.about-page .cap:hover::before { transform: translateX(0) skewX(-20deg); }
.about-page .cap > * { translate: none; transition: none; }
.about-page .tilt-tags .tag { transform: none; border-radius: 0; translate: 0 0; transition: translate .35s var(--ease-out), background .3s, border-color .3s, color .3s; }
.about-page .tilt-tags .tag::after { display: none; }
.about-page .tilt-tags .tag:hover { translate: 0 -2px; background: var(--blue); border-color: var(--blue); color: var(--white); }

/* What I Do 기울기(JS가 매 프레임 부드럽게 갱신) — CSS 전환은 끄고, 떠오름도 JS의 Z축으로 */
.about-page .cap-grid, .about-page .tilt-tags { transform-style: preserve-3d; }
.about-page .cap, .about-page .tilt-tags .tag { will-change: transform; transition-property: border-color, background, color, opacity; }
.about-page .cap:hover, .about-page .tilt-tags .tag:hover { translate: none; }
.about-page .cap.is-over { z-index: 2; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 50px -18px rgba(1, 0, 249, .7); }
.about-page .tilt-tags .tag { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 고라이브 작품: Behance 프로젝트 카드 모달 (직선, 블루 슬래시 톤) */
.be-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(5, 5, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s var(--ease-out); }
.be-modal.is-open { opacity: 1; }
.be-card { width: min(606px, 100%); background: #0f0f16; border: 1px solid var(--line); padding: 18px; transform: translateY(14px); transition: transform .45s var(--ease-out); }
.be-modal.is-open .be-card { transform: none; }
.be-title { margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.be-card iframe { display: block; width: 100%; aspect-ratio: 404 / 316; border: 0; background: #fff; }
.be-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.be-foot a, .be-close { font-size: 10px; color: var(--grey); background: none; border: 0; cursor: pointer; transition: color .3s; }
.be-foot a:hover, .be-close:hover { color: var(--white); }
/* Behance 임베드는 404×316 고정 카드 → 원래 크기 그대로 1.4배 확대 */
.be-card { width: auto; }
.be-card iframe { width: 404px; height: 316px; aspect-ratio: auto; zoom: 1.4; background: transparent; }
@media (max-width: 640px) { .be-card iframe { zoom: .82; } }
/* 카드 오른쪽의 흰 여백(임베드 문서 배경)은 잘라냄: 카드 실제 폭 390px 기준 */
.be-frame { width: calc(390px * 1.4); overflow: hidden; }
@media (max-width: 640px) { .be-frame { width: calc(390px * .82); } }
.be-frame { width: calc(375px * 1.4); }
@media (max-width: 640px) { .be-frame { width: calc(375px * .82); } }

/* 경력 작품 링크 호버: 상단 메뉴 버튼처럼 — 흰 직사각형 배경 + 블루 글자 + 앞에 블루 슬래시가 일어섬 */
.xp-works.is-years a { position: relative; align-items: center; padding: 5px 8px; margin: -5px -8px; transition: background .3s, color .3s; }
.xp-works.is-years a::before { content: ""; display: inline-block; flex: none; width: 0; height: 1.05em; margin-right: -7px; background: var(--blue); opacity: 0; transform: rotate(0deg);
  transition: width .3s, margin .3s, opacity .2s, transform .45s cubic-bezier(.34, 1.4, .64, 1); }
.xp-works.is-years a:hover { background: var(--white); color: var(--blue); padding-left: 8px; }
.xp-works.is-years a:hover::before { width: 3px; margin-right: 2px; opacity: 1; transform: rotate(34deg); }
.xp-works.is-years a:hover b, .xp-works.is-years a:hover .ko { color: var(--blue); border-bottom-color: transparent; }
.be-frame { width: auto; overflow: visible; }

/* 툴 카드도 큰 카드와 같은 호버: 사선 블루 면이 밀려 들어오고, 커서가 올라간 카드는 앞으로 떠오름 */
.about-page .tilt-tags .tag { overflow: hidden; }
.about-page .tilt-tags .tag::after { display: block; content: ""; position: absolute; inset: auto; top: 0; bottom: 0; left: -30%; width: 160%; opacity: 1; border-radius: 0; background: var(--blue); transform: translateX(-102%) skewX(-20deg); transition: transform .5s var(--ease); z-index: -1; pointer-events: none; }
.about-page .tilt-tags .tag { isolation: isolate; }
.about-page .tilt-tags .tag:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .3); }
.about-page .tilt-tags .tag:hover::after { transform: translateX(0) skewX(-20deg); }
.about-page .tilt-tags .tag:hover::before { background: var(--white); }
.about-page .tilt-tags .tag.is-over { z-index: 3; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .8), 0 0 24px -6px rgba(1, 0, 249, .7); }

/* 괄호 안 분야 릴: 왼쪽 정렬 + 폭이 지금 단어에 맞춰 바뀜, 전환은 더 빠르게 */
.val-tools .word { width: auto; transition: width .45s var(--ease-out); vertical-align: bottom; }
.val-tools .word-reel { transition-duration: .55s; }
.val-tools .word-reel > span { text-align: left; white-space: nowrap; width: max-content; }

/* 핵심 키워드: 밑줄 대신 빛 스윕 — 흐린 글자 위로 블루 빛줄기가 지나가며 흰색으로 밝아짐. 카드에 마우스를 올리면 한 번 더 */
.val .kw, .val.is-in .kw, .val .val-h .kw, .val.is-in .val-h .kw {
  color: transparent; -webkit-background-clip: text; background-clip: text; padding-bottom: 0;
  background-image: linear-gradient(100deg, #fff 0%, #fff 36%, #6f6dff 44%, #c9c8ff 50%, #6f6dff 56%, rgba(255, 255, 255, .26) 64%, rgba(255, 255, 255, .26) 100%);
  background-size: 280% 100%; background-repeat: no-repeat; background-position: 100% 0;
  transition: background-position 1.7s var(--ease) .45s;
}
.val.is-in .kw { background-position: 0 0; }
.val.is-in .val-h .kw { transition-delay: .75s; }
.val:hover .kw { animation: kwSweep 1.4s var(--ease); }
@keyframes kwSweep { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.val-tools .word-reel > span { padding: 0 .12em; }
.val.is-in .val-h .kw { background-position: 0 0; }

/* 작업 가치관 숫자·단위도 호버 때 키워드와 같은 빛 스윕 — 블루 빛줄기가 숫자 위를 지나감 (곱하기 합성이라 글자에만 물듦) */
.val-n { position: relative; isolation: isolate; }
.val-n::after { content: ""; position: absolute; inset: -.08em -.15em; pointer-events: none; mix-blend-mode: multiply; opacity: 0;
  background: linear-gradient(100deg, transparent 0%, transparent 38%, #6f6dff 45%, #c9c8ff 50%, #6f6dff 55%, transparent 62%, transparent 100%) 100% 0 / 280% 100% no-repeat; }
.val:hover .val-n::after { opacity: 1; animation: kwSweep 1.4s var(--ease) forwards; }
.val-n { isolation: auto; }
.val-n::after { display: none; }
/* 숫자·단위 빛 스윕 (호버 중에만): 글자 색(--c) 위로 블루 빛줄기 */
.val-n .slot-reel > span, .val-n .val-c { --c: #fff; }
.val-n small { --c: rgba(255, 255, 255, .42); }
.val-n .word-reel > span { --c: rgba(255, 255, 255, .75); }
.val.is-sweep .val-n :is(.slot-reel > span, small, .val-c, .word-reel > span) {
  background: linear-gradient(100deg, transparent, #6f6dff 32%, #d4d3ff 50%, #6f6dff 68%, transparent) calc(var(--bx, -999px) - var(--ox, 0px)) 0 / 260px 100% no-repeat, linear-gradient(var(--c), var(--c));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 작업 가치관 카드: 윗 문단이 다 밝아진 뒤(.is-go)에 차례로 등장 — 그 전엔 숨김, 키워드도 흐린 상태 유지 */
.vals .val { transition: opacity .9s var(--ease-out) var(--d, 0s), translate .9s var(--ease-out) var(--d, 0s); }
.vals:not(.is-go) .val { opacity: 0; translate: 0 28px; }
.vals:not(.is-go) .val .kw, .vals:not(.is-go) .val .val-h .kw { background-position: 100% 0; transition: none; }
.instant .vals .val { transition: none; }

/* ==========================================================================
   폰·태블릿(html.is-touch): 무거운 그래픽을 가볍게 + 마우스 호버 효과를 스크롤·터치로
   ========================================================================== */
/* 배경 빛 번짐: 큰 블러 필터 + 계속 움직이는 애니메이션 대신, 같은 색의 고정 그라데이션 (GPU 부담 큼) */
.is-touch .ambient i { filter: none; animation: none; will-change: auto; }
.is-touch .ambient i:nth-child(1) { background: radial-gradient(circle, rgba(1, 0, 249, .9), rgba(1, 0, 249, 0) 68%); }
.is-touch .ambient i:nth-child(2) { background: radial-gradient(circle, rgba(59, 59, 255, .8), rgba(59, 59, 255, 0) 68%); }
.is-touch .ambient i:nth-child(3) { background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 68%); }
/* 유리 효과(배경 흐림): 상단 메뉴바만 남기고 끔 — 스크롤할 때마다 뒤를 다시 흐려야 해서 폰에서 가장 무거움 */
.is-touch :is(.glass, .info-list, .p-meta, .p-credits > div, .cap, .tag, .cc-panel, .cc-keys li, .cp-btn, .cp-tools button, .nd-body, .nd-ear, .rbm-flow, .sb-stage, .sc-link, .vp-tag, .be-modal) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* About: 호버 대신 스크롤로 켜지는 상태 */
.is-touch .about-page .cap.is-over::before, .is-touch .about-page .tilt-tags .tag.is-over::after { transform: translateX(0) skewX(-20deg); }
.is-touch .about-page .cap.is-over { border-color: rgba(255, 255, 255, .3); }
.is-touch .about-page .tilt-tags .tag.is-over::before { background: var(--white); }
.is-touch .about-page .cap, .is-touch .about-page .tilt-tags .tag { will-change: transform; }
.val.is-hot .kw { animation: kwSweep 1.4s var(--ease); }
/* 폰 화면 비율에 맞춰 빛 크기를 키움 (블러가 퍼지던 범위만큼) */
.is-touch .ambient i:nth-child(1) { width: 150vw; height: 150vw; left: -70vw; top: -5vh; }
.is-touch .ambient i:nth-child(2) { width: 120vw; height: 120vw; right: -60vw; top: 40vh; }
.is-touch .ambient i:nth-child(3) { width: 90vw; height: 90vw; left: 20vw; bottom: -30vh; }
.is-touch .hero-glow { filter: none; width: 120vw; height: 120vw; }

/* ==========================================================================
   폰(메인 외 페이지, html.is-calm): 인터랙션 없이 정적 — 모든 내용이 처음부터 보이고, 움직이는 연출·호버 효과 없음
   ========================================================================== */
.is-calm [data-reveal], .is-calm [data-split], .is-calm .line-grow, .is-calm .vals .val {
  opacity: 1 !important; transform: none !important; translate: none !important; filter: none !important; clip-path: none !important; transition: none !important;
}
.is-calm .about-page *, .is-calm .about-page *::before, .is-calm .about-page *::after { transition: none !important; animation: none !important; }
.is-calm .about-page .cap, .is-calm .about-page .tilt-tags .tag { transform: none !important; will-change: auto; }
.is-calm .profile-ko .wd { opacity: 1; }
.is-calm .sb-item { opacity: 1; }
.is-calm .sf-cell iframe { display: none; }

/* 작업 가치관 호버 빛 v2 — 휠 등장 때 키워드 빛과 같은 그라데이션(흐림 → 블루 띠 → 원래 색)·같은 시간(1.4s)
   키워드: :hover 대신 JS가 매번 다시 붙이는 .is-hot 으로 (호버마다 처음부터 재생) */
.val:hover .kw { animation: none; }
.val.is-hot .kw, .val.is-hot .val-h .kw { animation: kwSweep 1.4s var(--ease); }
.val-n .slot-reel > span, .val-n .val-c { --c: #fff; --cd: rgba(255, 255, 255, .26); }
.val-n small { --c: rgba(255, 255, 255, .42); --cd: rgba(255, 255, 255, .14); }
.val-n .word-reel > span { --c: rgba(255, 255, 255, .75); --cd: rgba(255, 255, 255, .2); }
.val.is-sweep .val-n :is(.slot-reel > span, small, .val-c, .word-reel > span) {
  background: linear-gradient(100deg, var(--c) 0%, var(--c) 36%, #6f6dff 44%, #c9c8ff 50%, #6f6dff 56%, var(--cd) 64%, var(--cd) 100%) calc(var(--bx, 0px) - var(--ox, 0px)) 0 / var(--bs, 280%) 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 반복 영상 포스터: 영상이 재생되기 전엔 대표 이미지, 재생되면 영상이 그 위로 서서히 */
.has-vp { background-color: #000; background-position: center; background-size: cover; background-repeat: no-repeat; }
.has-vp > iframe { opacity: 0; transition: opacity .6s var(--ease-out); }
.has-vp > iframe.is-on { opacity: 1; }
/* 경력·학력·개인 학습 제목: 회색 보조(소속·학교·기관)가 좁은 화면에서 다음 줄로 넘어가도 왼쪽 끝이 맞게 */
.xp-body h4 { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; }
.xp-body h4 b + .ko { margin-left: 0; }
/* 폰: Works 카테고리 바·보기 전환은 화면 위에 고정되어 내용이 비쳐 지나가므로 유리 효과 유지 (굴절 렌즈 대신 단순 블러로 가볍게) */
.is-touch :is(.filters, .view-toggle) { -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(1.06) !important; backdrop-filter: blur(16px) saturate(170%) brightness(1.06) !important; }