/* ══════════════════════════════════════════════════════════
   KIM DOHOON — ACTOR PORTFOLIO  |  style.css  v3
══════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────── */
:root {
  --bg:       #1a1714;
  --bg2:      #242019;
  --bg3:      #2e2a23;
  --bg4:      #3a352c;
  --border:   rgba(255,255,255,.12);
  --gold:     #d4a85c;
  --gold2:    #f0ca84;
  --gold-dim: rgba(212,168,92,.13);
  --white:    #f5f1ea;
  --gray:     #6e6860;
  --gray2:    #9e9488;
  --font-en:  'Cormorant Garamond', Georgia, serif;
  --font-kr:  'Noto Serif KR', serif;
  --font-ui:  'Inter', sans-serif;
  --ease:     cubic-bezier(.25,.46,.45,.94);
  --ease2:    cubic-bezier(.76,0,.24,1);
  --ease3:    cubic-bezier(.16,1,.3,1);
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:auto; overflow-x:hidden; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-ui);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  cursor:none;
}
body.loading { overflow:hidden; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { text-decoration:none; color:inherit; }
button { border:none; background:none; cursor:none; }
ul { list-style:none; }
::selection { background:var(--gold); color:var(--bg); }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width:2px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--bg4); }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ── NOISE TEXTURE ───────────────────────────────────── */
.noise {
  position:fixed; inset:0; z-index:9997;
  pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  mix-blend-mode:screen;
}

/* ── CURSOR ──────────────────────────────────────────── */
.c-dot {
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .08s, width .3s var(--ease2), height .3s var(--ease2);
}
.c-ring {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(200,164,90,.35);
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:width .4s var(--ease2), height .4s var(--ease2),
             border-color .3s, background .3s;
}
.c-ring.hover {
  width:52px; height:52px;
  border-color:var(--gold);
  background:rgba(200,164,90,.08);
}
.c-ring.click {
  width:24px; height:24px;
  background:var(--gold-dim);
}

/* ═══════════════════════════════════════════════════════
   LOADER — FILM COUNTDOWN + CURTAIN REVEAL
══════════════════════════════════════════════════════════ */
#loader {
  position:fixed; inset:0; z-index:9000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}

/* 커튼 패널 — 처음엔 숨김, 종료 애니메이션 때만 표시 */
.ld-curtain {
  position:absolute; left:0; right:0; z-index:3;
  background:var(--bg);
  opacity:0; pointer-events:none;
}
.ld-curtain.top { top:0; height:50%; transform-origin:top; }
.ld-curtain.bot { bottom:0; height:50%; transform-origin:bottom; }
.ld-curtain.active { opacity:1; }

/* 필름 카운트다운 프레임 */
.ld-film {
  position:relative; z-index:5;
  display:none;
}
.ld-hline {
  position:absolute; left:0; right:0; height:1px;
  background:rgba(255,255,255,.08);
}
.ld-hline.top { top:20px; }
.ld-hline.bot { bottom:20px; }
.ld-vline {
  position:absolute; top:0; bottom:0; width:1px;
  background:rgba(255,255,255,.08);
}
.ld-vline.left  { left:20px; }
.ld-vline.right { right:20px; }
.ld-corner {
  position:absolute; width:20px; height:20px;
  border-color:rgba(200,164,90,.5); border-style:solid;
}
.ld-corner.tl { top:10px; left:10px; border-width:1px 0 0 1px; }
.ld-corner.tr { top:10px; right:10px; border-width:1px 1px 0 0; }
.ld-corner.bl { bottom:10px; left:10px; border-width:0 0 1px 1px; }
.ld-corner.br { bottom:10px; right:10px; border-width:0 1px 1px 0; }

.ld-count {
  position:relative; width:160px; height:160px;
  display:flex; align-items:center; justify-content:center;
}
.ld-circle {
  position:absolute; inset:0; transform:rotate(-90deg);
}
.ld-circle circle {
  fill:none; stroke:rgba(255,255,255,.06); stroke-width:1;
  cx:60; cy:60; r:54;
}
.ld-arc {
  stroke:var(--gold) !important;
  stroke-dasharray:339.3;
  stroke-dashoffset:339.3;
  stroke-linecap:round;
  transition:stroke-dashoffset .85s var(--ease2);
}
.ld-num {
  font-family:var(--font-en); font-size:5rem; font-weight:300;
  color:var(--white); line-height:1;
  transition:opacity .2s, transform .2s var(--ease2);
}
.ld-num.flip { opacity:0; transform:translateY(-30px) scale(.8); }

/* 이름 wrap */
.ld-name-wrap {
  position:absolute; z-index:6;
  text-align:center;
  opacity:0; pointer-events:none;
}
.ld-name-kr {
  font-family:var(--font-kr); font-size:clamp(2.4rem,5vw,4rem);
  font-weight:200; letter-spacing:.6em;
  overflow:hidden; display:flex; justify-content:center; gap:.1em;
  margin-bottom:8px;
}
.ld-name-kr span {
  display:inline-block;
  transform:translateY(100%);
  transition:transform .6s var(--ease3);
}
.ld-scan {
  width:100%; height:2px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  transform:scaleX(0); transform-origin:left;
  margin:14px 0;
}
.ld-name-en {
  font-family:var(--font-en); font-size:clamp(.9rem,2vw,1.2rem);
  letter-spacing:.65em; color:var(--gold2);
  overflow:hidden; display:flex; justify-content:center;
}
.ld-name-en span {
  display:inline-block;
  transform:translateY(100%);
  transition:transform .5s var(--ease3);
}
.ld-name-en .ld-sp { width:.65em; }
.ld-sub-line {
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:20px;
  opacity:0; transform:translateY(8px);
  transition:all .5s var(--ease);
}
.ld-dash { width:40px; height:1px; background:rgba(200,164,90,.4); }
.ld-role { font-size:.65rem; letter-spacing:.35em; color:var(--gray2); text-transform:uppercase; }

/* 프로그레스 */
.ld-progress {
  position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
  width:200px; height:1px; background:rgba(255,255,255,.07);
  z-index:6; opacity:0;
  transition:opacity .3s;
}
.ld-bar {
  height:100%; width:0; background:var(--gold);
  transition:width 1s var(--ease2);
}

/* ── NAV ─────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 64px;
  transition:padding .5s var(--ease), background .5s, backdrop-filter .5s;
}
#nav.stuck {
  padding:18px 64px;
  background:rgba(22,19,15,.9);
  backdrop-filter:blur(28px);
  border-bottom:1px solid var(--border);
}
.nav-logo { display:flex; flex-direction:column; gap:3px; line-height:1; }
.nl-en { font-family:var(--font-en); font-size:1.05rem; letter-spacing:.3em; font-weight:400; }
.nl-kr { font-size:.58rem; letter-spacing:.28em; color:var(--gold); }
.nav-links { display:flex; gap:44px; }
.nav-links a {
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(240,237,231,.45);
  position:relative; padding-bottom:3px;
  transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:0; right:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color:var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }
.burger {
  display:none; flex-direction:column; gap:6px; padding:4px; z-index:201;
}
.burger span {
  display:block; width:26px; height:1px; background:var(--white);
  transition:transform .35s var(--ease2), opacity .25s;
}
.burger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ─────────────────────────────────────── */
.mob-menu {
  position:fixed; inset:0; z-index:199;
  background:var(--bg);
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s;
  display:flex; align-items:center; justify-content:center;
}
.mob-menu.open { opacity:1; visibility:visible; }
.mob-inner { text-align:center; width:100%; padding:0 40px; }
.mob-inner ul { display:flex; flex-direction:column; gap:8px; margin-bottom:60px; }
.mob-inner li a {
  display:flex; align-items:baseline; justify-content:center; gap:14px;
  font-family:var(--font-en); font-size:clamp(2.4rem,9vw,3.5rem);
  font-weight:300; letter-spacing:.06em;
  transition:color .3s; padding:8px 0;
  border-bottom:1px solid var(--border);
  color:var(--white);
}
.mob-inner li a em {
  font-family:var(--font-ui); font-size:.6rem;
  letter-spacing:.2em; color:var(--gold); font-style:normal;
}
.mob-inner li a:hover { color:var(--gold); }
.mob-foot { font-size:.75rem; color:var(--gray2); display:flex; flex-direction:column; gap:4px; }

/* ── SHARED LABELS ───────────────────────────────────── */
.sec-label {
  font-size:.62rem; letter-spacing:.45em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.sec-label.white { color:var(--gold2); }
.sec-title {
  font-family:var(--font-en); font-size:clamp(2.2rem,4vw,3.6rem);
  font-weight:300; line-height:1.05; margin-bottom:52px;
  position:relative;
}
.sec-title::after {
  content:''; position:absolute; bottom:-10px; left:0;
  width:0; height:1px; background:var(--gold);
  transition:width .9s var(--ease2);
}
.sec-title.revealed::after { width:48px; }
.sec-title em { font-style:italic; color:var(--gold); }
.sec-title.white { color:var(--white); }
.sec-title.white::after { background:var(--gold2); }

/* ── HERO ────────────────────────────────────────────── */
#hero {
  position:relative; height:100svh; min-height:700px;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-end;
  -webkit-mask-image: linear-gradient(to right, transparent 18%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.55) 48%, black 65%);
  mask-image: linear-gradient(to right, transparent 18%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.55) 48%, black 65%);
}
.hero-bg img {
  width:auto; height:100%;
  max-width:58%;
  object-fit:contain;
  object-position:right center;
  filter:brightness(.85) saturate(1.1);
  flex-shrink:0;
  transition:filter 1.5s;
}
#hero.loaded .hero-bg img { filter:brightness(.92) saturate(1.15); }
.hero-grad {
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(15,12,9,.55) 0%, transparent 35%),
    linear-gradient(to right, rgba(15,12,9,1) 28%, rgba(15,12,9,.7) 42%, rgba(15,12,9,.2) 58%, transparent 72%),
    linear-gradient(to left, rgba(15,12,9,.6) 0%, rgba(15,12,9,.25) 15%, transparent 32%);
}

/* 상단 바 */
.hero-topbar {
  position:absolute; top:0; left:0; right:0; z-index:2;
  display:flex; align-items:center; gap:20px;
  padding:120px 80px 0;
  opacity:0;
}
.htb-line { flex:1; height:1px; background:rgba(255,255,255,.1); }
.htb-txt { font-size:.6rem; letter-spacing:.3em; color:rgba(255,255,255,.3); white-space:nowrap; }

.hero-content {
  position:relative; z-index:2;
  padding:0 80px 110px;
  max-width:820px;
}
.hero-tag-row {
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
  opacity:0; transform:translateY(12px);
}
.hero-tag { font-size:.65rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); }
.htag-dot { color:rgba(200,164,90,.4); }

.hero-name {
  display:flex; flex-direction:column; gap:6px;
  line-height:1.05; margin-bottom:28px;
}
.hn-line {
  display:block; overflow:hidden;
  padding-bottom:0.12em; margin-bottom:-0.12em;
}
.hn-kr {
  display:block; font-family:var(--font-kr); font-size:clamp(3.2rem,7vw,6rem);
  font-weight:200; letter-spacing:.2em;
  transform:translateY(110%);
}
.hn-en {
  display:block; font-family:var(--font-en); font-size:clamp(2rem,4.5vw,4rem);
  font-weight:300; letter-spacing:.14em; font-style:italic; color:var(--gold);
  transform:translateY(110%);
}

.hero-divider {
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
  opacity:0;
}
.hero-divider span:not(.hd-text) { flex:1; max-width:60px; height:1px; background:rgba(200,164,90,.3); }
.hd-text { font-size:.58rem; letter-spacing:.35em; color:rgba(200,164,90,.6); }

.hero-bio {
  font-family:var(--font-kr); font-size:clamp(.92rem,1.5vw,1.05rem);
  font-weight:300; color:rgba(240,237,231,.6); line-height:1.9;
  margin-bottom:44px; opacity:0; transform:translateY(10px);
}
.hero-btns { display:flex; align-items:center; gap:16px; opacity:0; transform:translateY(10px); }

.hero-cta {
  display:inline-flex; align-items:center; gap:0;
  border:1px solid rgba(200,164,90,.5);
  color:var(--white); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  transition:border-color .3s, background .3s;
  overflow:hidden;
}
.hero-cta span { padding:14px 22px; }
.hero-cta svg {
  width:42px; padding:0 12px; stroke:var(--gold); fill:none; stroke-width:1.5;
  border-left:1px solid rgba(200,164,90,.3);
  height:42px;
  transition:transform .3s var(--ease);
}
.hero-cta:hover { border-color:var(--gold); background:var(--gold-dim); }
.hero-cta:hover svg { transform:translateX(3px); }

.hero-cta-ghost {
  font-size:.68rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(240,237,231,.45); border-bottom:1px solid rgba(255,255,255,.15);
  padding-bottom:2px; transition:color .3s, border-color .3s;
}
.hero-cta-ghost:hover { color:var(--white); border-color:rgba(255,255,255,.5); }

/* 스탯 */
.hero-stats {
  position:absolute; bottom:110px; right:80px; z-index:2;
  display:flex; align-items:center; gap:0;
  opacity:0;
  background:rgba(10,8,5,.55);
  border:1px solid rgba(200,164,90,.25);
  backdrop-filter:blur(12px);
  padding:0 8px;
}
.hs-item { text-align:center; padding:22px 40px; }
.hs-num {
  display:block; font-family:var(--font-en); font-size:2.8rem;
  font-weight:400; color:var(--gold2); line-height:1;
  text-shadow:0 0 24px rgba(212,168,92,.4);
}
.hs-lbl { font-size:.6rem; letter-spacing:.22em; color:rgba(255,255,255,.65); margin-top:8px; }
.hs-divider { width:1px; height:44px; background:rgba(200,164,90,.2); }

/* 스크롤 인디케이터 */
.hero-scroll {
  position:absolute; bottom:42px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2; opacity:0;
}
.hs-wheel {
  width:22px; height:36px; border:1px solid rgba(255,255,255,.2); border-radius:12px;
  display:flex; align-items:flex-start; justify-content:center; padding-top:6px;
}
.hs-dot {
  width:3px; height:6px; background:var(--gold); border-radius:2px;
  animation:wheelScroll 2s ease infinite;
}
@keyframes wheelScroll {
  0% { transform:translateY(0); opacity:1; }
  80% { transform:translateY(10px); opacity:0; }
  100% { transform:translateY(0); opacity:0; }
}
.hero-scroll span { font-size:.58rem; letter-spacing:.3em; color:rgba(255,255,255,.3); }

/* 인스타 */
.hero-ig {
  position:absolute; bottom:42px; right:64px; z-index:2;
  font-size:.62rem; letter-spacing:.2em; color:rgba(255,255,255,.3);
  writing-mode:vertical-rl; opacity:0;
  transition:color .3s;
}
.hero-ig a:hover { color:var(--gold); }

/* ── MARQUEE ─────────────────────────────────────────── */
.marquee-wrap {
  overflow:hidden; background:var(--bg4);
  border-top:1px solid rgba(212,168,92,.15);
  border-bottom:1px solid rgba(212,168,92,.15);
  padding:14px 0;
}
.marquee-track {
  display:flex; align-items:center; gap:0;
  white-space:nowrap;
  animation:marquee 28s linear infinite;
  will-change:transform;
}
.marquee-track span {
  font-family:var(--font-en); font-size:.78rem;
  letter-spacing:.18em; color:rgba(158,148,136,.7);
  padding:0 28px;
}
.marquee-track .mx { color:var(--gold); padding:0 4px; font-size:.7rem; opacity:.8; }
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── ABOUT ───────────────────────────────────────────── */
#about { background:var(--bg2); padding:130px 0; }
.about-wrap {
  max-width:1280px; margin:0 auto; padding:0 80px;
  display:grid; grid-template-columns:1fr .95fr; gap:80px; align-items:start;
}
.ap-main {
  aspect-ratio:3/4; overflow:hidden; position:relative; background:var(--bg3);
}
.ap-main img { transition:transform .8s var(--ease); }
.ap-main:hover img { transform:scale(1.04); }
.ap-label {
  position:absolute; bottom:18px; right:18px;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.3);
  writing-mode:vertical-rl;
}
/* corner accent */
.ap-main::before {
  content:''; position:absolute;
  bottom:-10px; right:-10px; width:44%; height:44%;
  border:1px solid rgba(200,164,90,.2);
  pointer-events:none; z-index:2;
  transition:border-color .4s;
}
.ap-main:hover::before { border-color:rgba(200,164,90,.45); }
.ap-sub-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.ap-sub { aspect-ratio:3/4; overflow:hidden; background:var(--bg3); }
.ap-sub img { transition:transform .7s var(--ease), filter .4s; filter:grayscale(0%) brightness(1.0); }
.ap-sub:hover img { transform:scale(1.06); filter:grayscale(0%) brightness(1.05); }

.about-info { padding-top:8px; }
.about-specs { margin-bottom:36px; }
.spec-row {
  display:flex; gap:20px;
  border-bottom:1px solid var(--border); padding:13px 0; font-size:.88rem;
}
.sk {
  min-width:68px; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.sv { font-family:var(--font-kr); color:rgba(240,237,231,.75); }
.sv.link { transition:color .3s; }
.sv.link:hover { color:var(--gold); }
.ig-link { display:inline-flex; align-items:center; gap:10px; }
.ig-badge {
  font-size:.6rem; letter-spacing:.08em;
  color:var(--gold);
  border:1px solid rgba(200,164,90,.35);
  padding:2px 8px;
  border-radius:20px;
  white-space:nowrap;
  transition:background .25s, border-color .25s;
}
.ig-link:hover .ig-badge {
  background:rgba(200,164,90,.12);
  border-color:var(--gold);
}

/* genre grid */
.about-genres {
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
  margin-bottom:44px;
}
.ag-item {
  background:var(--bg); padding:18px 12px;
  text-align:center;
  transition:background .3s;
}
.ag-item:hover { background:var(--bg3); }
.ag-num {
  display:block; font-family:var(--font-en); font-size:1.5rem;
  font-weight:300; color:var(--gold); line-height:1; margin-bottom:6px;
}
.ag-name { font-family:var(--font-kr); font-size:.7rem; color:var(--gray2); }

.cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold); color:var(--bg);
  padding:15px 36px; font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  transition:background .3s, transform .25s var(--ease3);
  position:relative; overflow:hidden;
}
.cta-btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.12); transform:translateX(-101%);
  transition:transform .4s var(--ease2);
}
.cta-btn:hover { background:var(--gold2); }
.cta-btn:hover::after { transform:translateX(0); }
.cta-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── WORKS ───────────────────────────────────────────── */
#works { background:var(--bg); padding:130px 0 0; }
.works-container { max-width:1380px; margin:0 auto; padding:0 64px 130px; }
.works-header { margin-bottom:0; }

.filter-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:44px; }
.fb {
  padding:8px 22px; font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; border:1px solid var(--border);
  color:var(--gray2); font-family:var(--font-ui);
  transition:all .25s; cursor:none; position:relative; overflow:hidden;
}
.fb::after {
  content:''; position:absolute; inset:0; background:var(--gold-dim);
  transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease2);
}
.fb:hover { border-color:rgba(200,164,90,.4); color:var(--gold2); }
.fb:hover::after { transform:scaleX(1); }
.fb.active { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

.works-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
/* 마지막 줄에 카드 1개 남을 때: JS가 .featured-last 클래스 부여 */
.works-grid .wcard.featured-last { grid-column:2/4; }
.works-grid .wcard.featured-last .wcard-img { aspect-ratio:16/9; }
/* 더 보기 버튼 */
.works-more-wrap { text-align:center; margin-top:32px; }
.wcard { cursor:none; }
.wcard.hidden { display:none; }
.wcard-inner {
  position:relative; overflow:hidden; background:var(--bg3);
}
.wcard-img { aspect-ratio:3/4; position:relative; overflow:hidden; }
.wcard-img img {
  transition:transform .7s var(--ease), filter .5s;
  filter:grayscale(10%) brightness(.95);
}
.wcard-empty {
  position:absolute; inset:0;
  background:linear-gradient(145deg, var(--bg3) 0%, var(--bg2) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.wcard-empty::before {
  content:'';
  display:block; width:36px; height:36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(200,164,90,0.3)' stroke-width='1.2'%3E%3Crect x='2' y='6' width='20' height='14' rx='1'/%3E%3Cpath d='M7 6V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3Cline x1='7' y1='6' x2='7' y2='10'/%3E%3Cline x1='12' y1='6' x2='12' y2='10'/%3E%3Cline x1='17' y1='6' x2='17' y2='10'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.5;
}
.wcard-empty::after {
  content:'COMING SOON';
  font-size:.48rem; letter-spacing:.25em; color:rgba(200,164,90,.25);
  font-family:var(--font-ui);
}
.wcard-dim {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,5,.92) 0%, rgba(10,8,5,.25) 45%, transparent 100%);
  transition:opacity .4s;
}
.wcard:hover .wcard-img img { transform:scale(1.08); filter:grayscale(0%) brightness(1); }

.wcard-info {
  position:absolute; bottom:0; left:0; right:0; padding:20px 16px 16px;
  transform:translateY(6px); transition:transform .4s var(--ease3);
}
.wcard:hover .wcard-info { transform:translateY(0); }

.wc-badge {
  display:inline-block; font-size:.55rem; letter-spacing:.18em;
  text-transform:uppercase; padding:3px 8px; border:1px solid; margin-bottom:8px;
}
.wc-badge.movie { border-color:rgba(255,120,60,.45); color:#ff8c50; }
.wc-badge.drama { border-color:rgba(90,150,255,.45); color:#7aabff; }
.wc-badge.web   { border-color:rgba(120,210,100,.45); color:#88d870; }
.wc-badge.short { border-color:rgba(200,164,90,.5);   color:var(--gold); }
.wc-badge.ad    { border-color:rgba(180,90,220,.45);  color:#c878ee; }

.wcard-info h3 {
  font-family:var(--font-kr); font-size:.95rem; font-weight:400; margin-bottom:4px;
}
.wc-role { font-size:.72rem; color:var(--gold); margin-bottom:2px; }
.wc-year { font-size:.6rem; color:var(--gray); font-family:var(--font-en); }

.wcard-play {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.7) rotate(-15deg);
  transition:opacity .35s, transform .35s var(--ease3), border-color .3s, background .3s;
  backdrop-filter:blur(8px);
}
.wcard-play svg { width:10px; height:10px; fill:var(--white); margin-left:2px; }
.wcard:hover .wcard-play { opacity:1; transform:scale(1) rotate(0deg); }
.wcard.active .wcard-play {
  opacity:1; transform:scale(1);
  border-color:var(--gold); background:var(--gold-dim);
}
.wcard.active .wcard-play svg { fill:var(--gold); }

/* 아코디언 비디오 패널 */
.video-panel {
  grid-column:1 / -1;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .65s var(--ease3), opacity .4s var(--ease), margin .4s;
}
.video-panel.open { max-height:620px; opacity:1; margin-top:2px; }
.vp-inner {
  background:var(--bg3); border:1px solid var(--border);
  display:grid; grid-template-columns:1.4fr 1fr;
}
.vp-left { background:var(--bg); }
.vp-frame { aspect-ratio:16/9; position:relative; background:var(--bg); overflow:hidden; }
.vp-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.vp-placeholder {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.vp-icon {
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
}
.vp-icon svg { width:16px; height:16px; fill:rgba(255,255,255,.2); margin-left:3px; }
.vp-placeholder p { font-size:.68rem; letter-spacing:.25em; color:var(--gray); text-transform:uppercase; }

.vp-right {
  padding:44px 44px; display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid var(--border);
}
.vp-badge {
  display:inline-block; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  padding:3px 10px; border:1px solid rgba(200,164,90,.35); color:var(--gold);
  margin-bottom:18px; align-self:flex-start;
}
.vp-title { font-family:var(--font-kr); font-size:1.6rem; font-weight:400; margin-bottom:10px; }
.vp-role  { font-size:.85rem; color:var(--gold); margin-bottom:5px; }
.vp-year  { font-family:var(--font-en); font-size:.72rem; color:var(--gray2); margin-bottom:20px; }
.vp-desc  { font-size:.82rem; color:var(--gray2); line-height:1.75; margin-bottom:32px; flex:1; }
.vp-close {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gray2); border:1px solid var(--border); padding:9px 18px;
  align-self:flex-start; transition:color .3s, border-color .3s; cursor:none;
}
.vp-close svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.vp-close:hover { color:var(--white); border-color:rgba(255,255,255,.3); }

/* ── GALLERY ─────────────────────────────────────────── */
#gallery { background:var(--bg2); padding:130px 0; overflow:hidden; }
.gallery-wrap { max-width:1380px; margin:0 auto; }

.gallery-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 80px; margin-bottom:48px;
}
.gallery-head .sec-title { margin-bottom:0; }

.gal-nav { display:flex; align-items:center; gap:20px; padding-bottom:10px; }
.gal-prev,.gal-next {
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, background .3s; cursor:none;
}
.gal-prev svg,.gal-next svg {
  width:14px; height:14px; stroke:var(--gray2); fill:none; stroke-width:1.5;
  transition:stroke .3s;
}
.gal-prev:hover,.gal-next:hover { border-color:var(--gold); background:var(--gold-dim); }
.gal-prev:hover svg,.gal-next:hover svg { stroke:var(--gold); }
.gal-counter { font-family:var(--font-en); font-size:.72rem; letter-spacing:.25em; color:var(--gray2); min-width:70px; text-align:center; }

.gal-swiper { padding:0 80px 0 !important; overflow:visible !important; touch-action:pan-y; }
.gal-swiper .swiper-slide {
  width:360px !important;
  opacity:.4; transform:scale(.94);
  transition:opacity .5s, transform .5s var(--ease);
}
.gal-swiper .swiper-slide-active,
.gal-swiper .swiper-slide-prev,
.gal-swiper .swiper-slide-next { opacity:1; transform:scale(1); }
.gs-img { aspect-ratio:3/4; overflow:hidden; position:relative; background:var(--bg3); }
.gs-img img {
  transition:transform .7s var(--ease), filter .5s;
  filter:grayscale(5%) brightness(1.0);
}
.gal-swiper .swiper-slide:hover .gs-img img { transform:scale(1.05); filter:grayscale(0%); }
.gs-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,8,5,.75) 0%, transparent 50%);
  opacity:0; transition:opacity .4s;
  display:flex; align-items:flex-end; padding:16px;
}
.gal-swiper .swiper-slide:hover .gs-overlay { opacity:1; }
.gs-overlay span {
  font-family:var(--font-en); font-size:.7rem; letter-spacing:.3em; color:rgba(255,255,255,.5);
}

.gal-dots {
  padding:28px 80px 0 !important; text-align:left !important;
}
.gal-dots .swiper-pagination-bullet { background:var(--bg4); opacity:1; }
.gal-dots .swiper-pagination-bullet-active { background:var(--gold); width:20px; border-radius:2px; }

/* ── CONTACT ─────────────────────────────────────────── */
#contact { background:var(--bg); padding:130px 0; }
.contact-wrap {
  max-width:1280px; margin:0 auto; padding:0 80px;
  display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:start;
}
.contact-wrap--single {
  grid-template-columns:1fr;
  max-width:720px;
}
.contact-copy {
  font-family:var(--font-kr); font-size:.92rem; color:rgba(240,237,231,.5);
  line-height:2; margin-top:-30px; margin-bottom:48px;
}
.contact-links { display:flex; flex-direction:column; gap:2px; }
.cl-item {
  display:flex; align-items:center; gap:18px; padding:18px 20px;
  border:1px solid var(--border);
  position:relative; overflow:hidden;
  transition:border-color .3s;
}
.cl-item::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--gold); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s var(--ease3);
}
.cl-item:hover { border-color:rgba(200,164,90,.3); }
.cl-item:hover::after { transform:scaleY(1); }
.cli-icon {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:border-color .3s, background .3s;
}
.cl-item:hover .cli-icon { border-color:var(--gold); background:var(--gold-dim); }
.cli-icon svg { width:15px; height:15px; stroke:var(--gold); fill:none; stroke-width:1.5; }
.cli-label { font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); margin-bottom:3px; }
.cli-val { font-family:var(--font-kr); font-size:.88rem; color:var(--white); }

/* form */
.contact-right { padding-top:76px; }
.fg { position:relative; margin-bottom:26px; }
.fg input,.fg textarea {
  width:100%; background:transparent; border:none;
  padding:18px 0 10px; color:var(--white);
  font-family:var(--font-kr); font-size:.9rem; outline:none; resize:none;
}
.fg-line {
  height:1px; background:var(--border); position:relative;
  transition:background .3s;
}
.fg-line::after {
  content:''; position:absolute; inset:0;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease3);
}
.fg input:focus ~ .fg-line::after,
.fg textarea:focus ~ .fg-line::after { transform:scaleX(1); }
.fg label {
  position:absolute; top:18px; left:0; font-size:.82rem; color:var(--gray);
  pointer-events:none; transition:all .25s var(--ease);
}
.fg input:focus ~ label,
.fg input:not(:placeholder-shown) ~ label,
.fg textarea:focus ~ label,
.fg textarea:not(:placeholder-shown) ~ label {
  top:3px; font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold);
}
.full-btn { width:100%; justify-content:center; margin-top:12px; }
.form-ok { font-family:var(--font-kr); font-size:.85rem; color:var(--gold); padding-top:14px; display:none; }
.form-ok.show { display:block; }

/* ── FOOTER ──────────────────────────────────────────── */
#footer {
  background:var(--bg2); border-top:1px solid var(--border); padding:36px 80px;
}
.footer-wrap { display:flex; align-items:center; justify-content:space-between; }
.fw-name { font-family:var(--font-en); font-size:.82rem; letter-spacing:.38em; color:var(--gray); }
.fw-sub  { font-size:.56rem; letter-spacing:.22em; color:var(--gray); margin-top:3px; }
.fw-copy { font-size:.62rem; color:var(--gray); letter-spacing:.05em; }
.fw-ig {
  display:flex; align-items:center; gap:8px;
  font-size:.65rem; letter-spacing:.14em; color:var(--gray);
  transition:color .3s;
}
.fw-ig svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; }
.fw-ig:hover { color:var(--gold); }
.fw-nav { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.fw-nav-link { font-family:var(--font-en); font-size:.6rem; letter-spacing:.22em; color:var(--gray); text-transform:uppercase; text-decoration:none; transition:color .25s; }
.fw-nav-link:hover { color:var(--gold); }

/* ── SCROLL PROGRESS ─────────────────────────────────── */
#scrollProgress {
  position:fixed; top:0; left:0; z-index:9999;
  height:2px; width:0%;
  background:linear-gradient(to right, var(--gold), var(--gold2));
  transition:width .1s linear;
  pointer-events:none;
}

/* ── FLOAT INSTAGRAM ─────────────────────────────────── */
.float-ig {
  position:fixed; bottom:84px; right:32px; z-index:50;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(200,164,90,.35);
  background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  transition:border-color .3s, background .3s, transform .3s var(--ease3);
}
.float-ig svg { width:18px; height:18px; }
.float-ig:hover {
  border-color:var(--gold);
  background:var(--gold-dim);
  transform:scale(1.1);
}

/* ── SECTION DIVIDER ─────────────────────────────────── */
.sec-divider {
  display:flex; align-items:center; gap:20px;
  margin-bottom:60px;
}
.sec-divider-line { flex:1; height:1px; background:var(--border); }
.sec-divider-dot  { width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.6; }

/* ── ABOUT 개선 ───────────────────────────────────────── */
.about-info .sec-title { font-size:clamp(2rem,3.5vw,3rem); }
.spec-row { padding:15px 0; }
.sk { font-size:.58rem; color:var(--gold); opacity:.85; }
.sv { font-size:.92rem; }

/* ── WORKS 개선 ───────────────────────────────────────── */
.works-header { padding-bottom:36px; border-bottom:1px solid var(--border); margin-bottom:44px; }
.works-header .sec-title { margin-bottom:0; }
.wcard-inner { border-radius:2px; overflow:hidden; }
.wcard-info h3 { font-size:.92rem; letter-spacing:.02em; }

/* ── GALLERY 개선 ─────────────────────────────────────── */
.gs-img { border-radius:2px; overflow:hidden; }

/* ── CONTACT 개선 ─────────────────────────────────────── */
.contact-wrap--single { max-width:760px; }
.contact-wrap--split {
  grid-template-columns: 1fr 1fr;
  max-width:1280px;
  align-items:center;
}
.cl-item { border-radius:2px; padding:20px 24px; }
.cli-val { font-size:.92rem; font-weight:400; }

/* 오른쪽 장식 패널 */
.contact-deco {
  overflow:hidden;
  border-radius:2px;
  min-height:480px;
}
.cd-photo {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.cd-inner {
  text-align:center;
  border:1px solid rgba(200,164,90,.15);
  padding:60px 48px;
  position:relative;
  background:rgba(200,164,90,.03);
  width:100%; max-width:380px;
}
.cd-inner::before, .cd-inner::after {
  content:''; position:absolute;
  width:24px; height:24px;
  border-color:rgba(200,164,90,.3); border-style:solid;
}
.cd-inner::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.cd-inner::after  { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.cd-num {
  display:block; font-family:var(--font-en); font-size:5.5rem;
  font-weight:200; color:var(--gold); line-height:1;
  letter-spacing:-.02em; opacity:.8;
}
.cd-label {
  display:block; font-size:.6rem; letter-spacing:.45em;
  text-transform:uppercase; color:var(--gray2); margin-bottom:32px;
}
.cd-divider {
  width:32px; height:1px; background:rgba(200,164,90,.3);
  margin:0 auto 28px;
}
.cd-quote {
  font-family:var(--font-kr); font-size:.95rem; font-weight:300;
  color:rgba(240,237,231,.4); line-height:2; font-style:italic;
  margin-bottom:36px;
}
.cd-film {
  display:flex; justify-content:center; gap:4px;
}
.cd-film span {
  width:10px; height:14px;
  border:1px solid rgba(200,164,90,.2);
  background:rgba(200,164,90,.04);
}

/* ── FOOTER 개선 ─────────────────────────────────────── */
#footer { padding:44px 80px; }
.fw-name { letter-spacing:.45em; color:var(--gray2); white-space:nowrap; }

/* ── BACK TOP ────────────────────────────────────────── */
.back-top {
  position:fixed; bottom:32px; right:32px; z-index:50;
  width:42px; height:42px; border:1px solid var(--border);
  background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:all .4s var(--ease3); cursor:none;
}
.back-top.on { opacity:1; visibility:visible; transform:translateY(0); }
.back-top:hover { border-color:var(--gold); background:var(--gold-dim); }
.back-top svg { width:13px; height:13px; stroke:var(--white); fill:none; stroke-width:2; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width:1100px) {
  .works-grid { grid-template-columns:repeat(3,1fr); }
  .works-grid .wcard.featured-last { grid-column:2/3; }
  .works-grid .wcard.featured-last .wcard-img { aspect-ratio:3/4; }
  .about-wrap { padding:0 48px; }
  .works-container { padding:0 48px 100px; }
  .gallery-head,.gal-swiper,.gal-dots { padding-left:48px !important; padding-right:48px !important; }
  .contact-wrap { padding:0 48px; }
  #nav,.footer-wrap,#footer { padding-left:48px; padding-right:48px; }
  .hero-content { padding:0 56px 100px; }
  .hero-stats { right:56px; }
  .hero-ig { right:48px; }
}

@media (max-width:900px) {
  .works-grid { grid-template-columns:repeat(2,1fr); }
  .works-grid .wcard.featured-last { grid-column:auto; }
  .works-grid .wcard.featured-last .wcard-img { aspect-ratio:3/4; }
  .vp-inner { grid-template-columns:1fr; }
  .vp-right { border-left:none; border-top:1px solid var(--border); }
  .contact-wrap { grid-template-columns:1fr; gap:56px; }
  .contact-right { padding-top:0; }
  .about-wrap { grid-template-columns:1fr; gap:48px; }
  .gallery-head { flex-direction:column; align-items:flex-start; gap:20px; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE (≤768px) — 전면 최적화
══════════════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* ── 기본 ── */
  body { cursor:auto; }
  button { cursor:pointer; }
  .c-dot,.c-ring { display:none; }

  /* ── NAV ── */
  .nav-links { display:none; }
  .burger { display:flex; }
  #nav { padding:20px 20px !important; }
  #nav.stuck { padding:14px 20px !important; }
  .nl-en { font-size:.9rem; letter-spacing:.22em; }

  /* ── HERO ── */
  #hero { min-height:calc(var(--vh,1svh)*100); height:calc(var(--vh,1svh)*100); align-items:flex-end; }

  /* 모바일: 이미지를 전체 배경으로, 하단 페이드 강화 */
  .hero-bg {
    -webkit-mask-image: linear-gradient(to right, black 20%, black 100%);
    mask-image: linear-gradient(to right, black 20%, black 100%);
    justify-content:center;
  }
  .hero-bg img {
    width:100%; height:100%;
    max-width:100%;
    object-fit:cover;
    object-position:center top;
  }
  .hero-grad {
    background:
      linear-gradient(to top, rgba(15,12,9,.88) 0%, rgba(15,12,9,.45) 45%, transparent 75%),
      linear-gradient(to right, rgba(15,12,9,.65) 0%, transparent 60%);
  }

  /* 콘텐츠 */
  .hero-content { padding:0 22px 56px !important; max-width:100%; }
  .hero-stats,.hero-ig,.hero-topbar { display:none; }
  /* 모바일: 바이오·divider 숨겨서 얼굴 가림 최소화 */
  .hero-bio { display:none !important; }
  .hero-divider { display:none !important; }
  .hero-tag-row { margin-bottom:10px; }
  .hero-tag { font-size:.6rem; }

  .hn-kr { font-size:clamp(2.6rem,13vw,3.8rem); letter-spacing:.15em; }
  .hn-en { font-size:clamp(1.6rem,8vw,2.4rem); letter-spacing:.1em; }
  .hero-name { gap:4px; margin-bottom:20px; }

  .hero-divider { margin-bottom:14px; }
  .hd-text { font-size:.52rem; }

  .hero-bio { font-size:.9rem; margin-bottom:28px; line-height:1.8; color:rgba(240,237,231,.85); text-shadow:0 1px 8px rgba(0,0,0,.6); }
  .hn-kr { text-shadow:0 2px 16px rgba(0,0,0,.7); }
  .hn-en { text-shadow:0 1px 10px rgba(0,0,0,.5); }

  .hero-btns { flex-direction:row; gap:12px; flex-wrap:wrap; }
  .hero-cta span { padding:12px 18px; font-size:.65rem; }
  .hero-cta svg { width:36px; height:36px; }
  .hero-cta-ghost { font-size:.62rem; padding:12px 0; }

  .hero-scroll {
    bottom:18px;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  /* ── MARQUEE ── */
  .marquee-track span { font-size:.7rem; padding:0 18px; }

  /* ── SECTION 공통 ── */
  section { padding:72px 0; }
  .sec-label { font-size:.58rem; letter-spacing:.38em; }
  .sec-title { font-size:clamp(1.9rem,7.5vw,2.6rem); margin-bottom:36px; }

  /* ── ABOUT ── */
  #about { padding:72px 0; }
  .about-wrap {
    grid-template-columns:1fr !important;
    gap:40px;
    padding:0 20px !important;
  }

  /* 프로필 사진 — 메인만 보이고 서브는 가로로 */
  .ap-main { aspect-ratio:4/5; }
  .ap-sub-grid { grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
  .ap-sub { aspect-ratio:4/5; }
  .ap-main::before { display:none; }

  .about-info { padding-top:0; }
  .about-info .sec-title { font-size:clamp(1.8rem,7vw,2.4rem); margin-bottom:24px; }

  .about-specs { margin-bottom:28px; }
  .spec-row { padding:12px 0; gap:14px; }
  .sk { font-size:.56rem; min-width:56px; }
  .sv { font-size:.86rem; }

  /* 장르 그리드: 3열로, 마지막 아이템이 홀수 위치면 2칸 차지 */
  .about-genres { grid-template-columns:repeat(3,1fr); }
  .about-genres .ag-item:last-child:nth-child(3n+2) { grid-column:span 2; }
  .ag-item { padding:14px 8px; }
  .ag-num { font-size:1.25rem; }
  .ag-name { font-size:.65rem; }

  /* ── WORKS ── */
  #works { padding:72px 0 0; }
  .works-container { padding:0 20px 72px !important; }
  .works-header { padding-bottom:28px; margin-bottom:32px; }

  /* 필터 바 — 가로 스크롤 */
  .filter-bar {
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:6px;
    padding-bottom:4px;
    margin-bottom:28px;
  }
  .filter-bar::-webkit-scrollbar { display:none; }
  .fb {
    flex-shrink:0;
    padding:8px 16px;
    font-size:.6rem;
    cursor:pointer;
  }

  .works-grid { grid-template-columns:repeat(2,1fr); gap:10px; }

  /* 카드 정보 항상 표시 (hover 없음) */
  .wcard-info {
    transform:translateY(0) !important;
    padding:14px 12px 12px;
  }
  .wcard-play { display:none; }
  .wcard-dim {
    background:linear-gradient(to top, rgba(10,8,5,.95) 0%, rgba(10,8,5,.3) 50%, transparent 100%);
  }
  .wcard-info h3 { font-size:.92rem; }
  .wc-role { font-size:.65rem; }
  .wc-year { font-size:.55rem; }
  .wc-badge { font-size:.5rem; padding:2px 6px; margin-bottom:5px; }

  /* 더보기 버튼 */
  .wcard.mob-hidden { display:none; }
  .works-more-wrap { text-align:center; margin-top:20px; }
  .works-more-btn {
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--border); color:var(--gray2);
    font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
    padding:12px 28px; background:transparent;
    transition:border-color .3s, color .3s; cursor:pointer;
  }
  .works-more-btn:hover,
  .works-more-btn:active { border-color:var(--gold); color:var(--gold); }
  .works-more-btn svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .3s; }
  .works-more-btn.open svg { transform:rotate(180deg); }

  /* 비디오 패널 */
  .vp-right { padding:24px 20px; }
  .vp-title { font-size:1.3rem; }
  .vp-desc { font-size:.78rem; margin-bottom:20px; }

  /* ── GALLERY ── */
  #gallery { padding:72px 0; }
  .gallery-head { padding:0 20px !important; margin-bottom:32px; }
  .gal-swiper { padding:0 20px 0 !important; }
  .gal-swiper .swiper-slide { width:72vw !important; max-width:280px; }
  .gal-nav { display:none; }
  .gal-dots { padding:20px 20px 0 !important; }

  /* ── CONTACT ── */
  #contact { padding:72px 0; }
  .contact-wrap {
    grid-template-columns:1fr !important;
    gap:40px;
    padding:0 20px !important;
  }
  .contact-deco { display:none; }
  .contact-copy { font-size:.86rem; margin-top:0; margin-bottom:32px; }
  .cl-item { padding:16px 18px; }
  .cli-icon { width:36px; height:36px; }
  .cli-icon svg { width:13px; height:13px; }
  .cli-val { font-size:.84rem; }

  /* ── FOOTER ── */
  #footer { padding:28px 20px !important; }
  .footer-wrap {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .fw-name { font-size:.76rem; }
  .fw-copy { font-size:.58rem; }

  /* ── FLOAT BUTTONS ── */
  .float-ig { bottom:76px; right:16px; width:40px; height:40px; }
  .back-top { bottom:24px; right:16px; width:40px; height:40px; cursor:pointer; }

  /* ── AOS 오프셋 최소화 ── */
  [data-aos] { transition-duration:400ms !important; }
  [data-aos][data-aos-offset] { --aos-offset:40px; }
}

/* ── 키보드 포커스 스타일 ─────────────────────────── */
:focus { outline:none; }
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ── 모션 감소 설정 지원 ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track { animation:none !important; }
  [data-aos] { opacity:1 !important; transform:none !important; }
}

/* ══════════════════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════════════════ */
.lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(12, 10, 7, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.lb-overlay.open {
  opacity: 1;
  visibility: visible;
}
.lb-wrap {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(.95);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.lb-overlay.open .lb-wrap {
  transform: scale(1);
}
.lb-wrap picture,
.lb-wrap img {
  display: block;
  max-width: 90vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(200,164,90,.2);
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
}
.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(200,164,90,.3);
  border-radius: 50%;
  color: rgba(200,164,90,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  z-index: 1;
}
.lb-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.lb-close:hover {
  background: rgba(200,164,90,.12);
  border-color: rgba(200,164,90,.7);
}
.lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: none;
  border: 1px solid rgba(200,164,90,.3);
  border-radius: 50%;
  color: rgba(200,164,90,.8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  z-index: 1;
}
.lb-arrow svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}
.lb-arrow:hover {
  background: rgba(200,164,90,.12);
  border-color: rgba(200,164,90,.7);
}
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  letter-spacing: .2em;
  color: rgba(200,164,90,.6);
  font-family: 'Inter', sans-serif;
}
@media (max-width: 600px) {
  .lb-arrow { display: none; }
  .lb-wrap { max-width: 96vw; max-height: 80vh; }
  .lb-wrap picture, .lb-wrap img { max-width: 96vw; max-height: 80vh; }
}

/* gallery page footer */
.footer-back {
  font-family: 'Inter', sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  color: rgba(200,164,90,.5);
  text-decoration: none;
  text-transform: uppercase;
  transition: color .2s;
}
.footer-back:hover { color: rgba(200,164,90,.9); }
.nav-active { color: rgba(200,164,90,.9) !important; }