/* ================================================================
   INDELINE  ·  Cinema Portfolio
   Director: 김대현 KIM DAEHYUN
   ================================================================ */

/* ── 1. Design Tokens ─────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg:       #181818;
  --s1:       #242424;
  --s2:       #303030;
  --s3:       #3a3a3a;
  --s4:       #444444;
  --film-blk: #000000;
  --warm:     #ffffff;
  --warm-1:   #f5f5f5;
  --warm-2:   #ebebeb;

  /* Brand — #FFFFFF / #000000 / #B7D64A */
  --accent:       #B7D64A;
  --accent-hover: #9eba35;
  --accent-dim:   rgba(183,214,74,.13);
  --amber:        #B7D64A;
  --amber-dim:    rgba(183,214,74,.13);
  --teal:         #B7D64A;
  --teal-dim:     rgba(183,214,74,.13);
  --canvas:       #f0f0f0;

  /* Text */
  --fg:       #ffffff;
  --fg-2:     #c8c8c8;
  --fg-3:     #888888;
  --fg-4:     #555555;
  --on-warm:  #000000;
  --on-warm-2:#333333;

  /* Fonts */
  --font-kr: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Poppins', sans-serif;
  --serif:   var(--font-en);
  --sans:    var(--font-kr);

  /* Spacing */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;
  --s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;
  --s-20:80px;--s-24:96px;--s-32:128px;
  --sec:120px;

  /* Radius */
  --r-2:2px;--r-4:4px;--r-8:8px;--r-12:12px;--r-16:16px;--r-pill:9999px;

  /* Transitions */
  --ease:  cubic-bezier(.4,0,.2,1);
  --ease-o:cubic-bezier(0,0,.2,1);
  --ease-s:cubic-bezier(.34,1.56,.64,1);
  --t:     .28s var(--ease);
  --t-md:  .46s var(--ease);
  --t-lg:  .7s var(--ease);
}

/* ── 2. Reset ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body {
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

/* Film grain overlay */
body::after {
  content:'';
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  opacity:.018;
}

/* ── 3. Bilingual ─────────────────────────────────────────────── */
body:not(.lang-en) .t-en { display:none !important; }
body.lang-en .t-ko { display:none !important; }

/* ── 4. Layout ────────────────────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 64px; }
.section    { padding:var(--sec) 0; }
.section-sm { padding:80px 0; }
.section-dark     { background:#1a1a1a; }
.section-elevated { background:#f8f8f8; color:#111111; }

/* ── section-elevated 내부 텍스트/컴포넌트 밝은 배경 대응 ──────── */
.section-elevated .section-title        { color:#111111; }
.section-elevated .section-tag          { color:var(--accent); }
.section-elevated .section-tag::before  { background:var(--accent); }
.section-elevated .section-link         { color:var(--accent); }
.section-elevated .intro-body           { color:#555555; }
.section-elevated .bio-lead             { color:#111111; }
.section-elevated .bio-body             { color:#555555; }
/* Stat cards */
.section-elevated .stat-card            { background:#ffffff; border:1px solid rgba(0,0,0,.07); }
.section-elevated .stat-card:hover      { background:#f2f2f2; border-bottom-color:var(--accent); transform:translateY(-3px); }
.section-elevated .stat-num             { color:#111111; }
.section-elevated .stat-num.accent-text { color:var(--accent); }
.section-elevated .stat-label           { color:#666666; }
/* Education */
.section-elevated .edu-item             { background:#ffffff; border-bottom:1px solid rgba(0,0,0,.07); border-left-color:transparent; }
.section-elevated .edu-item:hover       { background:#f5f5f5; border-left-color:var(--accent); }
.section-elevated .edu-school           { color:#111111; }
.section-elevated .edu-dept             { color:#666666; }
/* Profile */
.section-elevated .profile-photo-placeholder { background:#e4e4e4; }
.section-elevated .profile-photo-fallback    { color:#aaaaaa; }
/* Festival cards — keep dark for contrast on light bg */
.section-elevated .festival-card        { background:#1a1a1a; }
.section-elevated .festival-card:hover  { background:#252525; transform:translateY(-4px); }
.section-elevated .festival-card h3     { color:#ffffff; }
.section-elevated .festival-card p      { color:#b0b0b0; }
.section-elevated .festival-period      { color:#777777; }
/* Contact */
.section-elevated .ci-label             { color:#888888; }
.section-elevated .ci-value             { color:#111111; }
.section-elevated a.ci-value:hover      { color:var(--accent); }
.section-elevated .topic-tag            { background:rgba(0,0,0,.05); color:#555555; border-color:rgba(0,0,0,.1); }
.section-elevated .topic-tag:hover      { background:var(--accent-dim); color:var(--accent); border-color:rgba(183,214,74,.25); }
.section-elevated .detail-label         { color:#888888; border-bottom-color:rgba(0,0,0,.1); }
.section-elevated .credit-role          { color:#666666; }
.section-elevated .credit-name          { color:#111111; }
.section-elevated .film-synopsis-text   { color:#333333; }
/* Form */
.section-elevated .form-label           { color:#666666; }
.section-elevated .form-input           { background:#ffffff; border-color:rgba(0,0,0,.15); color:#111111; }
.section-elevated .form-input::placeholder { color:#aaaaaa; }
.section-elevated .form-input:focus     { border-color:var(--accent); box-shadow:0 0 0 3px rgba(183,214,74,.14); }
.section-elevated .form-success         { background:#ffffff; border-color:rgba(0,0,0,.08); }
.section-elevated .form-success h3      { color:#111111; }
.section-elevated .form-success p       { color:#666666; }
.section-canvas   { background:#181818; color:#ffffff; }
.section-dark-1   { background:var(--s1); }
.section-dark-2   { background:var(--s2); }
.section-light    { background:var(--warm); color:var(--on-warm); }

/* ── 5. Film Strip ────────────────────────────────────────────── */
.film-strip {
  height:18px; background:var(--film-blk);
  position:relative; overflow:hidden; flex-shrink:0;
}
.film-strip::before {
  content:''; position:absolute; inset:3px 0;
  background-image:radial-gradient(circle at center, #1c1c1c 4px, transparent 4px);
  background-size:24px 12px; background-repeat:repeat-x;
  background-position:12px center;
}
/* Subtle lime shimmer on film strip */
.film-strip::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(183,214,74,.07) 50%, transparent 100%);
  background-size:200% 100%;
  animation:filmShimmer 5s ease infinite;
  pointer-events:none;
}
@keyframes filmShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}

/* ── 6. Navigation ────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:600; height:64px;
  background:rgba(0,0,0,.96);
  border-bottom:1px solid rgba(183,214,74,.15);
  transition:background var(--t-md), border-color var(--t-md);
}
.nav.scrolled {
  background:rgba(0,0,0,.98);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(183,214,74,.28);
}
.nav-inner {
  height:64px; display:flex; align-items:center;
  justify-content:space-between;
}
.nav-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-kr); font-size:15px;
  font-weight:700; letter-spacing:1px;
  color:var(--fg); transition:opacity var(--t);
  position:relative; z-index:1;
}
.nav-logo:hover { opacity:.6; }
.nav-logo-mark { color:var(--accent); flex-shrink:0; }
.nav-logo-text { letter-spacing:1px; }

/* Desktop nav links — hidden; navigation is overlay-only */
.nav-links { display:none !important; }

/* Actions: lang toggle + hamburger */
.nav-actions {
  display:flex; align-items:center; gap:14px;
  position:relative; z-index:1;
}

/* Language toggle */
.lang-toggle {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:var(--fg-3);
  font-family:var(--font-en); font-size:11px;
  font-weight:700; letter-spacing:1.5px;
  padding:6px 13px; border-radius:var(--r-pill);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.lang-toggle:hover { background:rgba(183,214,74,.1); color:var(--accent); border-color:rgba(183,214,74,.3); }

/* Hamburger */
.nav-hamburger {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; padding:8px; border-radius:var(--r-4);
}
.nav-hamburger span {
  display:block; width:24px; height:2px; background:#ffffff;
  transition:transform var(--t), opacity var(--t), width var(--t);
  transform-origin:center;
  border-radius:1px;
}
.nav-hamburger span:nth-child(2) { width:17px; }
.nav-hamburger.active span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); width:24px; }
.nav-hamburger.active span:nth-child(2) { opacity:0; }
.nav-hamburger.active span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); width:24px; }

/* ── 7. Full-Screen Overlay Nav ───────────────────────────────── */
.nav-overlay {
  position:fixed; inset:0; z-index:590;
  background:rgba(0,0,0,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  padding:0 10vw;
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);
}
.nav-overlay.open { opacity:1; pointer-events:all; }

.overlay-nav { display:flex; flex-direction:column; gap:0; }

.overlay-link {
  font-family:var(--font-en);
  font-size:clamp(44px,7.5vw,96px);
  font-weight:700;
  color:rgba(255,255,255,.35);
  letter-spacing:-2px; line-height:1.18;
  transition:color .3s ease, transform .5s var(--ease-o), opacity .4s ease;
  transform:translateY(30px);
  opacity:0; display:block;
}
.overlay-link:nth-child(1) { transition-delay:.08s; }
.overlay-link:nth-child(2) { transition-delay:.16s; }
.overlay-link:nth-child(3) { transition-delay:.24s; }
.overlay-link:nth-child(4) { transition-delay:.32s; }
.nav-overlay.open .overlay-link { transform:none; opacity:1; }
.overlay-link:hover { color:var(--accent); }
.overlay-link.is-active { color:var(--accent); }

.overlay-footer {
  margin-top:56px;
  display:flex; flex-direction:column; gap:6px;
  opacity:0; transform:translateY(16px);
  transition:opacity .4s ease .5s, transform .4s var(--ease-o) .5s;
}
.nav-overlay.open .overlay-footer { opacity:1; transform:none; }
.overlay-footer span {
  font-size:12px; color:var(--fg-3);
  letter-spacing:2px; text-transform:uppercase;
}
.overlay-footer a {
  font-size:14px; color:var(--fg-2);
  transition:color var(--t);
}
.overlay-footer a:hover { color:var(--accent); }

/* Overlay decorative line */
.overlay-line {
  position:absolute; left:10vw; bottom:10vh;
  width:1px; height:80px;
  background:linear-gradient(to bottom, transparent, rgba(183,214,74,.4));
  opacity:0;
  transition:opacity .5s ease .6s;
}
.nav-overlay.open .overlay-line { opacity:1; }

/* ── 8. Buttons ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; font-size:13px; font-weight:600;
  letter-spacing:.8px; border-radius:var(--r-4);
  border:1px solid transparent; cursor:pointer;
  font-family:var(--font-kr);
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t);
  line-height:1; white-space:nowrap;
}
.btn:hover { transform:translateY(-1px); }
/* Primary: lime bg, black text */
.btn-primary { background:var(--accent); color:#000000; }
.btn-primary:hover { background:var(--accent-hover); }
/* Secondary */
.btn-secondary {
  background:var(--s2); color:var(--fg);
  border-color:rgba(255,255,255,.09);
}
.btn-secondary:hover { border-color:rgba(255,255,255,.2); }
/* Outline */
.btn-outline {
  background:transparent; color:var(--fg);
  border-color:rgba(255,255,255,.22);
}
.btn-outline:hover { border-color:rgba(255,255,255,.55); }
/* White: white bg, black text (for use on lime/dark bg) */
.btn-white { background:var(--warm); color:var(--on-warm); }
.btn-white:hover { background:var(--warm-2); }
.btn-full { width:100%; justify-content:center; }

/* ── 9. Section Tag / Header ──────────────────────────────────── */
.section-tag {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:20px;
}
.section-tag::before {
  content:''; display:block; width:28px; height:1px; background:var(--accent);
  transform-origin:left;
  animation:lineReveal .7s var(--ease-o) .2s both;
}
@keyframes lineReveal {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
/* Dark variant (used on canvas/lime sections) */
.section-tag.dark { color:rgba(0,0,0,.65); }
.section-tag.dark::before { background:rgba(0,0,0,.5); }
/* Canvas section override — dark (#181818) bg */
.section-canvas .section-tag { color:var(--accent); }
.section-canvas .section-tag::before { background:var(--accent); }
.section-canvas .section-tag.dark { color:var(--fg-3); }
.section-canvas .section-tag.dark::before { background:var(--fg-4); }
.section-canvas .section-title.dark { color:#ffffff; }

.section-header {
  display:flex; flex-direction:column; margin-bottom:56px;
}
.section-title {
  font-family:var(--font-en);
  font-size:clamp(36px,4.5vw,62px);
  font-weight:700; letter-spacing:-1.5px;
  line-height:1.05; color:var(--fg);
}
.section-title.dark { color:var(--on-warm); }
.section-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:1px;
  color:var(--accent); margin-top:20px;
  transition:gap var(--t), opacity var(--t);
}
.section-link:hover { gap:14px; opacity:.8; }

/* ── 10. Hero Section — KEEP ORIGINAL ────────────────────────── */
.hero {
  min-height:100vh; background:#8c8c8c;
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
  padding-top:64px;
}

/* Filmography scroll columns */
.hero-filmography {
  position:absolute; inset:0; z-index:0;
  display:flex; gap:6px;
  overflow:hidden; pointer-events:none;
}
.hero-filmography::after {
  content:''; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(to right,
      #8c8c8c 0%,
      rgba(140,140,140,.92) 28%,
      rgba(140,140,140,.45) 55%,
      rgba(140,140,140,.15) 100%),
    linear-gradient(to bottom,
      rgba(140,140,140,.55) 0%,
      transparent 18%,
      transparent 78%,
      rgba(140,140,140,.8) 100%);
}
.hero-film-col {
  flex:1; overflow:hidden; min-width:0;
}
.hero-film-col-inner {
  display:flex; flex-direction:column; gap:6px;
}
.hero-film-col:nth-child(1) .hero-film-col-inner { animation:filmUp   30s linear infinite; }
.hero-film-col:nth-child(2) .hero-film-col-inner { animation:filmDown 38s linear infinite; }
.hero-film-col:nth-child(3) .hero-film-col-inner { animation:filmUp   24s linear infinite; }
.hero-film-col:nth-child(4) .hero-film-col-inner { animation:filmDown 44s linear infinite; }
.hero-film-col:nth-child(5) .hero-film-col-inner { animation:filmUp   32s linear infinite; }
@keyframes filmUp   { from{transform:translateY(0)} to{transform:translateY(-50%)} }
@keyframes filmDown { from{transform:translateY(-50%)} to{transform:translateY(0)} }

.hero-film-col-inner img {
  width:100%; display:block;
  aspect-ratio:2/3; object-fit:cover; object-position:center;
  opacity:.3; filter:grayscale(40%) sepia(8%);
  border-radius:3px; flex-shrink:0;
}

@media (max-width:1024px) {
  .hero-film-col:nth-child(n+4) { display:none; }
}
@media (max-width:640px) {
  .hero-film-col:nth-child(n+3) { display:none; }
}

/* Hero body grid */
.hero-body {
  flex:1; display:grid;
  grid-template-columns:1fr 320px;
  gap:60px; align-items:flex-end;
  padding:80px 64px 88px;
  position:relative; z-index:1;
}

/* Left */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-kr); font-size:11px;
  font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--fg-2);
  margin-bottom:36px;
}
.eyebrow-dot {
  display:block; width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  animation:pulse 2.6s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.35; transform:scale(.65); }
}

.hero-title { margin-bottom:0; }
.hero-name-kr {
  display:block;
  font-family:var(--font-kr);
  font-size:clamp(88px,13vw,190px);
  font-weight:800; letter-spacing:-5px;
  line-height:.88; color:var(--fg);
}

.hero-divider {
  width:100%; height:1px;
  background:rgba(255,255,255,.08);
  margin:32px 0 28px;
}

.hero-sub-row {
  display:flex; align-items:center; gap:24px;
}
.hero-sub-name {
  font-family:var(--font-en);
  font-size:13px; font-weight:600; letter-spacing:4.5px;
  text-transform:uppercase; color:var(--fg-2);
  white-space:nowrap;
}
.hero-sub-rule { flex:1; height:1px; background:rgba(255,255,255,.06); }
.hero-sub-role {
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:#ffffff;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
  white-space:nowrap;
}

/* Right info panel */
.hero-right {
  display:flex; flex-direction:column;
  justify-content:flex-end; gap:36px;
  padding-bottom:4px;
}
.hero-desc {
  font-family:var(--font-kr); font-size:24px; font-weight:300;
  color:#1e1e1e; line-height:1.5;
}
.hero-stats-col {
  display:flex; flex-direction:column; gap:20px;
}
.hero-stat-item {
  display:flex; align-items:baseline; gap:12px;
  border-left:2px solid rgba(0,0,0,.18);
  padding-left:16px;
}
.hero-stat-num {
  font-family:var(--font-en); font-size:44px;
  font-weight:700; color:#111111; letter-spacing:-2px; line-height:1;
}
.hero-stat-label {
  font-family:var(--font-kr); font-size:13px; color:#2a2a2a; font-weight:500;
}
.hero-cta-row {
  display:flex; flex-direction:column; gap:12px;
}

/* Hero light overrides */
.hero .hero-eyebrow          { color:#2a2a2a; }
.hero .hero-name-kr          { color:#111111; }
.hero .hero-divider          { background:rgba(0,0,0,.18); }
.hero .hero-sub-name         { color:#2a2a2a; }
.hero .hero-sub-rule         { background:rgba(0,0,0,.14); }
.hero .btn-primary           { box-shadow:0 6px 28px rgba(183,214,74,.45); letter-spacing:1px; }
.hero .btn-primary:hover     { box-shadow:0 10px 36px rgba(183,214,74,.65); transform:translateY(-2px); }
.hero .btn-outline           { color:#ffffff; border-color:rgba(255,255,255,.75); background:rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.hero .btn-outline:hover     { border-color:#ffffff; background:rgba(255,255,255,.26); transform:translateY(-2px); }

/* Ticker strip */
.hero-ticker {
  height:48px; overflow:hidden;
  background:var(--film-blk);
  border-top:1px solid rgba(183,214,74,.1);
  display:flex; align-items:center; flex-shrink:0;
  position:relative; z-index:1;
}
.hero-ticker-inner {
  display:flex; align-items:center;
  white-space:nowrap;
  animation:ticker 30s linear infinite;
}
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.hero-ticker-text {
  font-family:var(--font-en);
  font-size:10px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--fg-4);
  padding:0 40px;
}
.hero-ticker-sep {
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.5; flex-shrink:0;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center;
  gap:6px; z-index:999;
  animation:mouseFloat 2.8s ease-in-out infinite;
  pointer-events:none;
}
.scroll-mouse {
  width:24px; height:38px;
  border:2px solid rgba(255,255,255,.65);
  border-radius:12px;
  display:flex; justify-content:center; align-items:flex-start;
  padding-top:5px;
  box-shadow:0 0 16px rgba(0,0,0,.3);
}
.scroll-wheel {
  width:3px; height:7px;
  background:rgba(255,255,255,.9);
  border-radius:2px;
  animation:wheelScroll 2.8s ease-in-out infinite;
}
.scroll-label {
  font-family:var(--font-en);
  font-size:8px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
  text-shadow:0 1px 6px rgba(0,0,0,.4);
}
@keyframes mouseFloat {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%     { transform:translateX(-50%) translateY(-10px); }
}
@keyframes wheelScroll {
  0%,30% { opacity:1; transform:translateY(0); }
  80%    { opacity:0; transform:translateY(10px); }
  100%   { opacity:0; transform:translateY(0); }
}

/* ── 11. Film Cards ─────────────────────────────────────────────── */
.films-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
}

.film-card {
  display:block; position:relative;
  background:var(--s2); overflow:hidden;
  text-decoration:none; color:inherit;
}
.film-card::after {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.98) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.12) 100%
  );
  transition:opacity var(--t-md);
}
.film-card:hover::after {
  background:linear-gradient(
    to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.78) 55%,
    rgba(0,0,0,.28) 100%
  );
}

.film-card-poster {
  position:relative; aspect-ratio:3/4;
  background:var(--s2); overflow:hidden;
}
.film-card-poster img,
.film-card-poster-img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.9;
  transition:opacity var(--t-lg), transform var(--t-lg);
}
.film-card:hover .film-card-poster-img { opacity:1; transform:scale(1.05); }

/* Accent overlays — all lime */
.film-card-poster.accent-coral::before { background:radial-gradient(ellipse 80% 70% at 60% 30%, rgba(183,214,74,.16) 0%, transparent 70%); }
.film-card-poster.accent-amber::before { background:radial-gradient(ellipse 80% 70% at 60% 30%, rgba(183,214,74,.16) 0%, transparent 70%); }
.film-card-poster.accent-teal::before  { background:radial-gradient(ellipse 80% 70% at 60% 30%, rgba(183,214,74,.16) 0%, transparent 70%); }
.film-card-poster::before {
  content:''; position:absolute; inset:0;
  transition:opacity var(--t-md);
}

.film-card-badge {
  position:absolute; top:18px; right:18px;
  font-family:var(--font-en);
  font-size:10px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,.6);
  background:rgba(0,0,0,.6); padding:4px 12px;
  border-radius:2px; backdrop-filter:blur(8px);
  z-index:3; border:1px solid rgba(255,255,255,.08);
}
.film-card-num {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-en); font-size:140px;
  font-weight:700; color:rgba(255,255,255,.025);
  line-height:1; letter-spacing:-6px; user-select:none;
  z-index:0;
}
.film-card-perfs {
  position:absolute; left:0; top:0; bottom:0; width:16px;
  background:rgba(0,0,0,.7);
  display:flex; flex-direction:column;
  justify-content:space-evenly; align-items:center; z-index:2;
}
.film-card-perfs span {
  display:block; width:7px; height:7px;
  border-radius:1px; background:var(--s1);
}
.film-card-award-badge {
  position:absolute; top:18px; left:18px;
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; background:var(--accent);
  color:#000000; padding:4px 10px; border-radius:2px; z-index:3;
}

.film-card-body {
  position:absolute; bottom:0; left:0; right:0;
  padding:32px 28px 28px;
  z-index:2;
  transform:translateY(6px);
  transition:transform var(--t-md);
}
.film-card:hover .film-card-body { transform:translateY(0); }

.film-card-meta {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:rgba(255,255,255,.55);
  margin-bottom:10px;
}
.film-card-dot { opacity:.3; }

.film-card-title {
  font-family:var(--font-kr); font-size:26px;
  font-weight:700; letter-spacing:-.5px;
  color:var(--fg); line-height:1.15; margin-bottom:8px;
}
.film-card-title-en {
  font-family:var(--font-en);
  font-size:13px; color:var(--fg-3); font-style:italic;
  margin-bottom:8px;
}
.film-card-synopsis {
  font-size:14px; color:rgba(255,255,255,.75); line-height:1.65;
  margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--t-md), transform var(--t-md);
}
.film-card:hover .film-card-synopsis { opacity:1; transform:translateY(0); }

.film-card-cta {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent);
}
.cta-arrow { transition:transform var(--t); }
.film-card:hover .cta-arrow { transform:translateX(5px); }

/* ── 12. Page Hero (inner pages) ──────────────────────────────── */
.page-hero {
  padding-top:64px; background:var(--bg);
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(183,214,74,.07) 0%, transparent 65%);
}
.page-hero-inner {
  padding:88px 0 72px; position:relative; z-index:1;
  text-align:center;
}
.page-hero-tag {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent);
  margin-bottom:24px;
  animation:heroFadeUp .7s var(--ease-o) .1s both;
}
.page-hero-tag::before { content:''; width:28px; height:1px; background:var(--accent); }
.page-hero-title {
  font-family:var(--font-kr);
  font-size:clamp(56px,8.5vw,116px);
  font-weight:800; letter-spacing:-3px;
  color:var(--fg); line-height:.92; margin-bottom:24px;
  animation:heroFadeUp .9s var(--ease-o) .25s both;
}
.page-hero-sub {
  font-family:var(--font-kr);
  font-size:16px; color:var(--fg-3); letter-spacing:.3px;
  animation:heroFadeUp .7s var(--ease-o) .45s both;
}

/* ── 13. Director Intro (home) ────────────────────────────────── */
.director-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 64px;
  border-radius: var(--r-4);
  overflow: hidden;
}
.director-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.director-intro-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:96px; align-items:start;
}
.director-intro-text { padding-right:16px; }
.intro-body {
  font-size:17px; color:var(--fg-2);
  line-height:1.85; margin-bottom:20px;
}

.director-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.stat-card {
  background:var(--s3); padding:48px 36px;
  display:flex; flex-direction:column; gap:10px;
  transition:background var(--t), transform var(--t-md);
  border-bottom:2px solid transparent;
}
.stat-card:hover { background:var(--s4); transform:translateY(-3px); border-bottom-color:var(--accent); }
.stat-num {
  font-family:var(--font-en); font-size:72px;
  font-weight:700; line-height:.95; letter-spacing:-3px;
  color:var(--fg);
}
.stat-num sup { font-size:36px; vertical-align:super; letter-spacing:0; }
.stat-num.accent-text { color:var(--accent); }
.stat-label { font-size:14px; color:var(--fg-2); font-weight:500; }

/* ── 14. Achievements Grid (home) ─────────────────────────────── */
.achievements-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:2px; background:rgba(255,255,255,.06);
}
.achievement-item {
  background:#242424; padding:44px 36px;
  display:flex; flex-direction:column; gap:16px;
  transition:background var(--t), transform var(--t);
  position:relative; overflow:hidden;
}
.achievement-item::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-md);
}
.achievement-item:hover { background:#2e2e2e; }
.achievement-item:hover::after { transform:scaleX(1); }
.ach-year {
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent);
}
.ach-body h4 {
  font-family:var(--font-kr); font-size:22px;
  font-weight:700; color:#ffffff; margin-bottom:8px;
}
.ach-body p { font-size:15px; color:rgba(255,255,255,.6); line-height:1.75; }

/* ── 15. CTA Band ─────────────────────────────────────────────── */
.cta-band {
  background:#f8f8f8; padding:88px 0;
  position:relative; overflow:hidden;
}
.cta-band::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 110% at 50% 50%, rgba(183,214,74,.12) 0%, transparent 70%);
  pointer-events:none;
}
.cta-band-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:48px;
  position:relative; z-index:1;
}
.cta-band-title {
  font-family:var(--font-kr);
  font-size:clamp(28px,4vw,56px);
  font-weight:700; letter-spacing:-1.5px;
  color:#111111; line-height:1.05;
}
.cta-band-sub { font-size:16px; color:rgba(0,0,0,.5); margin-top:10px; }
/* CTA button: lime bg, black text on light band */
.cta-band .btn-white {
  background:var(--accent); color:#000000;
  box-shadow:0 4px 24px rgba(183,214,74,.4);
  animation:ctaAttention 4s var(--ease) 2s infinite;
}
.cta-band .btn-white:hover { background:var(--accent-hover); }
@keyframes ctaAttention {
  0%,100% { transform:none; box-shadow:0 4px 20px rgba(0,0,0,.2); }
  50%     { transform:translateY(-3px); box-shadow:0 10px 32px rgba(0,0,0,.25); }
}

/* ── 16. About: Profile ───────────────────────────────────────── */
.profile-grid {
  display:grid; grid-template-columns:340px 1fr;
  gap:88px; align-items:start;
}
.profile-photo-placeholder {
  aspect-ratio:3/4; background:var(--s2);
  border-radius:var(--r-4); overflow:hidden;
  position:relative; margin-bottom:20px;
}
.profile-photo-img {
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}
.profile-photo-fallback {
  display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:16px; color:var(--fg-3);
  position:absolute; inset:0;
}
.profile-photo-fallback svg { opacity:.2; }
.profile-photo-fallback span { font-size:16px; font-weight:500; }
.profile-photo-placeholder.no-photo .profile-photo-img { display:none; }
.profile-photo-placeholder.no-photo .profile-photo-fallback { display:flex; }

.profile-tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill {
  font-size:12px; font-weight:600; letter-spacing:.5px;
  background:var(--accent-dim); color:var(--accent);
  border:1px solid rgba(183,214,74,.22);
  padding:5px 14px; border-radius:var(--r-pill);
}

.profile-bio { padding-top:8px; }
.bio-lead {
  font-family:var(--font-kr); font-size:24px;
  font-weight:500; line-height:1.6;
  color:var(--fg); margin-bottom:28px; letter-spacing:-.3px;
}
.bio-body {
  font-size:17px; color:var(--fg-2); line-height:1.9;
  margin-bottom:20px;
}

/* ── 16b. About Page Videos ──────────────────────────────────── */
.about-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.about-video-wrap {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: var(--r-4);
  overflow: hidden;
}
.about-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width:768px) {
  .about-videos-grid { grid-template-columns: 1fr; }
}

/* ── 17. Education ────────────────────────────────────────────── */
.edu-list { display:flex; flex-direction:column; gap:2px; }
.edu-item {
  display:flex; align-items:center; gap:32px;
  padding:36px 48px; background:var(--s1);
  transition:background var(--t), border-left-color var(--t);
  border-bottom:1px solid rgba(255,255,255,.03);
  border-left:3px solid transparent;
}
.edu-item:hover { background:var(--s2); border-left-color:var(--accent); }
.edu-icon {
  width:56px; height:56px; border-radius:var(--r-4);
  background:var(--accent-dim); border:1px solid rgba(183,214,74,.18);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-kr); font-size:22px; color:var(--accent);
  flex-shrink:0;
}
.edu-school {
  font-family:var(--font-kr); font-size:22px;
  font-weight:700; color:var(--fg); margin-bottom:4px;
}
.edu-dept { font-size:15px; color:var(--fg-2); }

/* ── 18. Career Timeline ──────────────────────────────────────── */
.timeline { position:relative; }
.timeline::before {
  content:''; position:absolute;
  left:88px; top:0; bottom:0;
  width:1px; background:rgba(255,255,255,.06);
}
/* Canvas (#181818) sections — timeline overrides */
.section-canvas .timeline::before { background:rgba(255,255,255,.08); }
.section-canvas .tl-year { color:rgba(255,255,255,.4); }
.section-canvas .tl-dot { background:var(--s2); border-color:rgba(255,255,255,.12); }
.section-canvas .tl-dot.active {
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(183,214,74,.2);
}
.section-canvas .tl-body h4 { color:#ffffff; }
.section-canvas .tl-body p  { color:rgba(255,255,255,.6); }

.timeline-item {
  display:flex; align-items:flex-start; gap:0;
  margin-bottom:40px; position:relative;
}
.tl-year {
  width:72px; flex-shrink:0;
  font-family:var(--font-en);
  font-size:12px; font-weight:700; letter-spacing:1px;
  color:var(--fg-3); text-align:right; padding-top:4px;
}
.tl-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--s2); border:2px solid rgba(255,255,255,.1);
  margin:4px 20px 0; flex-shrink:0;
  position:relative; z-index:1;
  transition:background var(--t), border-color var(--t), box-shadow var(--t);
}
.tl-dot.active { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(183,214,74,.18); }
.tl-body h4 {
  font-family:var(--font-kr); font-size:20px;
  font-weight:700; color:var(--on-warm); margin-bottom:6px;
}
.tl-body p { font-size:15px; color:var(--on-warm-2); line-height:1.75; }

/* ── 19. Festival Cards ───────────────────────────────────────── */
.festival-cards {
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
}
.festival-card {
  padding:44px 40px; background:var(--s1);
  position:relative; overflow:hidden;
  transition:background var(--t), transform var(--t-md);
}
.festival-card:hover { background:var(--s2); transform:translateY(-4px); }
.festival-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--accent);
}
/* All accent variants unified to lime */
.festival-card.accent-coral::after,
.festival-card.accent-amber::after,
.festival-card.accent-teal::after  { background:var(--accent); }
.festival-card::before {
  content:''; position:absolute; inset:0; opacity:.04;
  background:var(--accent);
}
.festival-card.accent-coral::before,
.festival-card.accent-amber::before,
.festival-card.accent-teal::before { background:var(--accent); }

.festival-card-icon { font-size:18px; color:var(--accent); margin-bottom:20px; opacity:.8; }
.festival-card h3 {
  font-family:var(--font-kr); font-size:22px;
  font-weight:700; color:var(--fg); margin-bottom:8px;
}
.festival-role {
  display:block; font-family:var(--font-en);
  font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:3px;
}
.festival-period {
  display:block; font-family:var(--font-en);
  font-size:13px; color:var(--fg-3); margin-bottom:18px;
}
.festival-card p { font-size:15px; color:var(--fg-2); line-height:1.75; }

/* ── 19b. Publications & Awards ───────────────────────────────── */
.pub-award-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.pub-col-label {
  display:block; font-family:var(--font-en);
  font-size:10px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase;
  margin-bottom:28px;
}
/* Canvas pub — dark bg overrides */
.section-canvas .pub-col-label { color:rgba(255,255,255,.4); }
.pub-list { list-style:none; display:flex; flex-direction:column; gap:0; }
.pub-item {
  display:flex; gap:28px; align-items:flex-start;
  padding:22px 0; border-bottom:1px solid rgba(0,0,0,.1);
}
.pub-item:first-child { padding-top:0; }
.section-canvas .pub-item { border-bottom-color:rgba(255,255,255,.08); }
.pub-year {
  font-family:var(--font-en); font-size:13px; font-weight:700;
  color:var(--on-warm-2); min-width:40px; flex-shrink:0; padding-top:2px;
}
.section-canvas .pub-year { color:rgba(255,255,255,.45); }
.pub-body { display:flex; flex-direction:column; gap:4px; }
.pub-title {
  display:block; font-family:var(--font-kr);
  font-size:17px; font-weight:700; color:var(--on-warm);
}
.pub-authors {
  display:block; font-family:var(--font-kr);
  font-size:13px; color:var(--on-warm-2); line-height:1.6;
}
.section-canvas .pub-title  { color:#ffffff; }
.section-canvas .pub-authors { color:rgba(255,255,255,.5); }

/* ── 20a. Filmography — canvas (dark #181818) overrides ───────── */
.section-canvas .filmography-label      { color:rgba(255,255,255,.35); border-color:rgba(255,255,255,.06); }
.section-canvas .filmography-label-sub  { color:rgba(255,255,255,.35); border-color:rgba(255,255,255,.04); }
.section-canvas .filmography-list li    { border-color:rgba(255,255,255,.04); }
.section-canvas .fl-year               { color:rgba(255,255,255,.4); }
.section-canvas .fl-title              { color:#ffffff; }
.section-canvas .fl-meta               { color:rgba(255,255,255,.5); }
.section-canvas .fl-note               { color:var(--teal); }

/* ── 20. Filmography Split ────────────────────────────────────── */
.filmography-split { display:grid; grid-template-columns:1fr 1fr; gap:88px; }
.filmography-label {
  display:block; font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--fg-3);
  margin-bottom:24px; padding-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.filmography-list li { border-bottom:1px solid rgba(255,255,255,.04); }
.filmography-list li a {
  display:flex; align-items:center; gap:16px;
  padding:14px 0; transition:color var(--t);
}
.filmography-list li a:hover { color:var(--accent); }
.fl-year { font-family:var(--font-en); font-size:12px; color:var(--fg-2); width:40px; flex-shrink:0; }
.fl-title { flex:1; font-size:16px; font-weight:500; color:var(--fg); transition:color var(--t); }
.filmography-list li a:hover .fl-title { color:var(--accent); }
.fl-genre {
  font-size:11px; color:var(--fg-2); background:rgba(255,255,255,.06);
  padding:3px 10px; border-radius:var(--r-pill);
}
.filmography-list li .fl-static {
  display:flex; align-items:flex-start; flex-direction:column; gap:4px;
  padding:14px 0;
}
.filmography-list li .fl-row {
  display:flex; align-items:center; gap:16px; width:100%;
}
.fl-meta {
  font-size:12px; color:var(--fg-3);
  padding-left: 56px;
}
.fl-note {
  font-size:11px; color:var(--accent); font-style:italic;
  padding-left: 56px;
}
.filmography-label-sub {
  display:block; font-family:var(--font-en);
  font-size:10px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--fg-3);
  margin:32px 0 16px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.filmography-group + .filmography-group .filmography-label { margin-top:0; }

/* ── 21. Work Page Filter ─────────────────────────────────────── */
.filter-bar { background:var(--s1); border-bottom:1px solid rgba(255,255,255,.08); }
.filter-tabs { display:flex; gap:2px; padding:12px 0; flex-wrap:wrap; }
.filter-btn {
  padding:8px 20px; font-size:13px; font-weight:600; letter-spacing:.5px;
  color:var(--fg-2); background:transparent;
  border-radius:var(--r-4); cursor:pointer;
  font-family:var(--font-kr);
  transition:background var(--t), color var(--t);
  display:flex; align-items:center; gap:8px;
}
.filter-btn:hover { color:var(--fg); background:rgba(255,255,255,.07); }
.filter-btn.active { color:var(--fg); background:rgba(255,255,255,.12); }
.filter-count {
  font-family:var(--font-en);
  font-size:11px; background:rgba(255,255,255,.12); color:var(--fg-2);
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.filter-btn.active .filter-count { background:var(--accent); color:#000000; }

.work-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
}
.film-card-wrapper { }

/* Work-page card: text below image, not overlaid */
.film-card-work {
  display:flex; flex-direction:column;
}
.film-card-work::after { display:none; }
.film-card-work .film-card-poster {
  /* aspect-ratio:16/9; */ flex-shrink:0; position:relative;
}
.film-card-work .film-card-body {
  position:static;
  background:#1e1e1e;
  border-top:2px solid rgba(255,255,255,.06);
  padding:18px 22px 22px;
  transform:none;
  transition:none;
}
.film-card-work:hover .film-card-body { transform:none; }
.film-card-work .film-card-meta {
  color:rgba(255,255,255,.7);
  margin-bottom:8px;
}
.film-card-work .film-card-title {
  font-size:20px; color:#ffffff; margin-bottom:6px;
}
.film-card-work .film-card-title-en {
  color:rgba(255,255,255,.55);
}
.film-card-work .film-card-synopsis {
  opacity:1; transform:none;
  color:rgba(255,255,255,.72);
  font-size:13px; margin-bottom:14px;
  transition:none;
}
.film-card-work:hover .film-card-synopsis {
  opacity:1; transform:none;
}
.film-card-work .film-card-cta {
  color:var(--accent);
}

/* ── 22. Film Detail ──────────────────────────────────────────── */
.film-hero {
  padding-top:64px; min-height:78vh;
  position:relative; display:flex;
  flex-direction:column; background:var(--bg); overflow:hidden;
}
.film-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform 8s ease;
}
.film-hero:hover .film-hero-bg { transform:scale(1); }
.film-hero-video-bg { overflow:hidden; }
.film-hero-video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 8s ease;
}
.film-hero:hover .film-hero-video { transform:scale(1); }
.film-hero-no-img.accent-coral { background:radial-gradient(ellipse 80% 60% at 50% 35%, rgba(183,214,74,.14) 0%, var(--bg) 65%); }
.film-hero-no-img.accent-amber { background:radial-gradient(ellipse 80% 60% at 50% 35%, rgba(183,214,74,.14) 0%, var(--bg) 65%); }
.film-hero-no-img.accent-teal  { background:radial-gradient(ellipse 80% 60% at 50% 35%, rgba(183,214,74,.14) 0%, var(--bg) 65%); }
.film-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    var(--bg) 0%,
    rgba(0,0,0,.78) 55%,
    rgba(0,0,0,.3) 100%
  );
}
.film-hero-inner {
  flex:1; display:flex; flex-direction:column;
  justify-content:flex-end;
  padding-bottom:88px; padding-top:80px;
  position:relative; z-index:1;
}
.film-back-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-en);
  font-size:12px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:40px;
  transition:color var(--t);
}
.film-back-link:hover { color:var(--accent); }
.film-hero-type {
  display:inline-block; font-family:var(--font-en);
  font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.film-hero-title {
  font-family:var(--font-kr);
  font-size:clamp(52px,7.5vw,104px);
  font-weight:800; letter-spacing:-2.5px;
  color:var(--fg); margin-bottom:8px; line-height:.92;
}
.film-hero-title-en {
  font-family:var(--font-en);
  font-size:18px; color:var(--fg-3);
  font-style:italic; margin-bottom:22px;
}
.film-hero-meta {
  display:flex; align-items:center; gap:16px;
  font-size:15px; color:var(--fg-3);
}
.film-meta-sep { opacity:.3; }

.film-detail-layout {
  display:grid; grid-template-columns:1fr 300px;
  gap:88px; align-items:start;
}
.detail-block { margin-bottom:56px; }
.detail-label {
  display:block; font-family:var(--font-en);
  font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--fg-3); margin-bottom:20px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.05);
}
.film-synopsis-text {
  font-family:var(--font-kr); font-size:20px;
  font-weight:400; line-height:1.85;
  color:var(--fg-2); letter-spacing:-.1px;
}
.credits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.credit-item { display:flex; flex-direction:column; gap:4px; }
.credit-role { font-family:var(--font-en); font-size:11px; font-weight:700; color:var(--fg-3); letter-spacing:1.5px; text-transform:uppercase; }
.credit-name { font-size:17px; color:var(--fg); font-weight:500; }

.sidebar-info-card {
  background:var(--s1); border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-4); padding:24px; margin-bottom:24px;
}
.sidebar-info-item {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.sidebar-info-item:last-child { border-bottom:none; }
.si-label { font-family:var(--font-en); font-size:12px; color:var(--fg-3); font-weight:600; letter-spacing:.5px; }
.si-value { font-size:15px; color:var(--fg); font-weight:500; }

.sidebar-awards, .sidebar-festivals { margin-bottom:24px; }
.awards-list, .festivals-list { display:flex; flex-direction:column; gap:12px; }
.awards-list li {
  display:flex; align-items:flex-start; gap:12px;
  font-size:14px; color:var(--fg-2); line-height:1.55;
}
.festivals-list li {
  font-size:14px; color:var(--fg-2);
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.festivals-list li:last-child { border-bottom:none; }

.film-video-section { padding-top:48px; padding-bottom:48px; }

.video-slider-header {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.video-slider-header .detail-label { margin-bottom:0; border-bottom:none; padding-bottom:0; }
.video-slider-nav {
  display:flex; align-items:center; gap:12px;
}
.vslide-btn {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#fff; width:36px; height:36px; border-radius:50%;
  font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.vslide-btn:hover { background:rgba(255,255,255,.18); }
.vslide-indicator { font-family:var(--font-en); font-size:12px; color:var(--fg-3); letter-spacing:1px; }

.video-slider-track-wrap {
  overflow:hidden;
  border-radius:2px;
  width:100%;
}
.video-slider-track {
  display:flex;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.video-slide {
  flex-shrink:0;
  aspect-ratio:16/9;
  background:#000;
}
.film-video-player { width:100%; height:100%; display:block; }

/* Embed video (Vimeo / YouTube) */
.embed-header {
  display:flex; align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
.embed-header .detail-label { margin-bottom:0; border-bottom:none; padding-bottom:0; }
.embed-nav-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.embed-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.embed-tab-btn {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.6); font-family:var(--font-en); font-size:12px;
  padding:6px 16px; border-radius:20px; cursor:pointer;
  transition:background .2s, color .2s;
}
.embed-tab-btn:hover  { background:rgba(255,255,255,.15); color:#fff; }
.embed-tab-btn.active { background:var(--accent); border-color:var(--accent); color:#111; }
.embed-video-wrap {
  position:relative; width:100%; padding-bottom:56.25%;
  background:#000; border-radius:2px; overflow:hidden;
}
.embed-video-wrap iframe {
  position:absolute; inset:0; width:100%; height:100%; border:none;
}
.embed-hidden { display:none; }

.film-card-poster video.film-card-poster-img { object-fit:cover; }

.film-nav-bar { padding:40px 0; }
.film-nav-inner { display:flex; align-items:center; justify-content:space-between; }

/* ── 23. Contact ──────────────────────────────────────────────── */
.contact-layout {
  display:grid; grid-template-columns:1fr 1.5fr;
  gap:88px; align-items:start;
}
.contact-info-items { margin:32px 0; display:flex; flex-direction:column; gap:28px; }
.contact-info-item { display:flex; align-items:flex-start; gap:18px; }
.ci-icon {
  width:44px; height:44px; border-radius:var(--r-4);
  background:var(--accent-dim); border:1px solid rgba(183,214,74,.18);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex-shrink:0;
}
.ci-body { display:flex; flex-direction:column; gap:4px; }
.ci-label { font-family:var(--font-en); font-size:10px; font-weight:700; letter-spacing:2.5px; color:var(--fg-3); text-transform:uppercase; }
.ci-value { font-size:17px; color:var(--fg); transition:color var(--t); }
a.ci-value:hover { color:var(--accent); }

.contact-topics { margin-top:32px; }
.topic-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.topic-tag {
  font-size:12px; font-weight:600; letter-spacing:.5px;
  background:rgba(255,255,255,.04); color:var(--fg-3);
  border:1px solid rgba(255,255,255,.07);
  padding:6px 14px; border-radius:var(--r-pill);
  transition:background var(--t), color var(--t), border-color var(--t);
}
.topic-tag:hover { background:var(--accent-dim); color:var(--accent); border-color:rgba(183,214,74,.25); }

.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-label { font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:1px; color:var(--fg-3); text-transform:uppercase; }
.required { color:var(--accent); }
.form-input {
  background:var(--s1); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-4); color:var(--fg); font-size:16px;
  padding:13px 16px; transition:border-color var(--t), box-shadow var(--t);
  -webkit-appearance:none;
}
.form-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(183,214,74,.12);
}
.form-input::placeholder { color:var(--fg-4); }
.form-select { cursor:pointer; }
.form-textarea { resize:vertical; min-height:140px; line-height:1.65; }

.form-success {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  padding:88px 40px; background:var(--s1);
  border:1px solid rgba(255,255,255,.05); border-radius:var(--r-4);
}
.success-icon { margin-bottom:24px; }
.form-success h3 {
  font-family:var(--font-kr); font-size:32px;
  font-weight:700; color:var(--fg); margin-bottom:12px;
}
.form-success p { font-size:16px; color:var(--fg-3); line-height:1.75; }

/* ── 24. Footer ───────────────────────────────────────────────── */
.footer { background:var(--bg); border-top:1px solid rgba(255,255,255,.05); }
.footer-inner {
  display:grid; grid-template-columns:1fr auto;
  gap:80px; align-items:start; padding:80px 0;
}
.footer-logo {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-kr); font-size:15px; font-weight:700; letter-spacing:1px;
  color:var(--fg); margin-bottom:16px; transition:opacity var(--t);
}
.footer-logo:hover { opacity:.55; }
.nav-logo-mark { color:var(--accent); }
.footer-tagline { font-size:14px; color:var(--fg-3); margin-bottom:8px; }
.footer-copy { font-family:var(--font-en); font-size:12px; color:var(--fg-3); }

.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.footer-nav-label {
  display:block; font-family:var(--font-en);
  font-size:10px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
}
.footer-nav-col ul { display:flex; flex-direction:column; gap:10px; }
.footer-nav-col li a { font-size:14px; color:var(--fg-2); transition:color var(--t); }
.footer-nav-col li a:hover { color:var(--fg); }

/* ── 25. Scroll-Reveal & Entrance Animations ──────────────────── */
.fade-in-target {
  opacity:0; transform:translateY(28px);
  transition:opacity .75s var(--ease-o), transform .75s var(--ease-o);
}
.fade-in-target.visible { opacity:1; transform:none; }

/* Stat cards: pop-in with scale */
.stat-card.fade-in-target { opacity:0; transform:scale(.94) translateY(20px); }
.stat-card.fade-in-target.visible { opacity:1; transform:none; }

/* Festival cards: lift-in */
.festival-card.fade-in-target { opacity:0; transform:translateY(24px) scale(.97); }
.festival-card.fade-in-target.visible { opacity:1; transform:none; }

/* Timeline items: slide from left */
.timeline-item.fade-in-target { opacity:0; transform:translateX(-24px); }
.timeline-item.fade-in-target.visible { opacity:1; transform:none; }

/* Section tags: slide from left */
.section-tag.tag-anim {
  opacity:0; transform:translateX(-16px);
  transition:opacity .55s var(--ease-o), transform .55s var(--ease-o);
}
.section-tag.tag-anim.visible { opacity:1; transform:none; }

/* Hero entrance */
@keyframes heroFadeUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
.hero-eyebrow  { animation:heroFadeUp .8s var(--ease-o) .1s both; }
.hero-name-kr  { animation:heroFadeUp 1s var(--ease-o) .2s both; }
.hero-divider  { animation:heroFadeUp .6s var(--ease-o) .45s both; }
.hero-sub-row  { animation:heroFadeUp .6s var(--ease-o) .55s both; }
.hero-right    { animation:heroFadeUp .7s var(--ease-o) .35s both; }

/* ── 26. Responsive ───────────────────────────────────────────── */
@media (max-width:1200px) {
  .container { padding:0 48px; }
  .hero-body  { padding:64px 48px 80px; grid-template-columns:1fr 280px; }
  .films-grid { grid-template-columns:repeat(2,1fr); }
  .work-grid  { grid-template-columns:repeat(2,1fr); }
  .achievements-grid { grid-template-columns:repeat(2,1fr); }
  .profile-grid { grid-template-columns:280px 1fr; gap:64px; }
  .hero-name-kr { font-size:clamp(72px,11vw,150px); }
}

@media (max-width:1024px) {
  .hero-body { grid-template-columns:1fr; gap:40px; }
  .hero-right {
    flex-direction:row; align-items:center; flex-wrap:wrap; gap:24px;
    padding-top:32px; border-top:1px solid rgba(255,255,255,.06);
  }
  .hero-stats-col { flex-direction:row; gap:32px; }
  .hero-stat-item { border-left:none; padding-left:0; }
  .hero-cta-row { flex-direction:row; }
  .hero-scroll-indicator { bottom:36px; }
  .director-intro-grid { grid-template-columns:1fr; gap:56px; }
  .director-intro-text { padding-right:0; }
  .film-detail-layout { grid-template-columns:1fr; }
  .film-detail-sidebar { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .sidebar-info-card,.sidebar-awards,.sidebar-festivals { margin-bottom:0; }
  .filmography-split { gap:56px; }
}

/* ── Community Screenings — index strip ───────────────────────── */
.comm-strip-outer { overflow:hidden; position:relative; display:block; }
.comm-strip-outer::before,
.comm-strip-outer::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.comm-strip-outer::before { left:0;  background:linear-gradient(to right, var(--s1), transparent); }
.comm-strip-outer::after  { right:0; background:linear-gradient(to left,  var(--s1), transparent); }
.comm-strip-track {
  display:flex; gap:14px; width:max-content;
  animation: commScroll 55s linear infinite;
}
.comm-strip-outer:hover .comm-strip-track { animation-play-state:paused; }
.comm-img-card {
  flex-shrink:0; height:230px; width:320px;
  overflow:hidden; border-radius:var(--r-4);
  background:var(--s2); display:block;
}
.comm-img-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.comm-strip-outer:hover .comm-img-card img { transform:scale(1.05); }
@keyframes commScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── Community Screenings — dedicated page ────────────────────── */
.comm-main-img-wrap {
  width:100%; border-radius:var(--r-8); margin-bottom:20px; overflow:hidden;
}
.comm-main-img {
  width:100%; height:auto; display:block;
}

.comm-intro {
  max-width:none; font-size:17px; color:#111111;
  line-height:1.75; margin:0 0 60px;
}
.comm-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.comm-card {
  position:relative; overflow:hidden; border-radius:var(--r-8);
  aspect-ratio:4/3; background:var(--s2); display:block;
}
.comm-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s ease; display:block;
}
.comm-card:hover img { transform:scale(1.06); }

@media (max-width:768px) {
  :root { --sec:80px; }
  .container { padding:0 24px; }
  .hero-body { padding:48px 24px 56px; gap:32px; }
  .hero-name-kr { font-size:clamp(64px,17vw,100px); letter-spacing:-4px; }
  .hero-stat-num { font-size:36px; }
  .hero-desc { font-size:20px; }
  .hero-scroll-indicator { bottom:36px; }
  .hero-right { flex-direction:column; align-items:flex-start; }
  .hero-stats-col { flex-direction:row; gap:24px; flex-wrap:wrap; }
  .hero-cta-row { flex-direction:row; }
  .films-grid { grid-template-columns:1fr; }
  .work-grid  { grid-template-columns:1fr; }
  .achievements-grid { grid-template-columns:1fr; }
  .director-stats { grid-template-columns:repeat(2,1fr); }
  .festival-cards { grid-template-columns:1fr; }
  .pub-award-grid { grid-template-columns:1fr; gap:48px; }
  .filmography-split { grid-template-columns:1fr; gap:40px; }
  .contact-layout { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:40px; }
  .footer-nav { grid-template-columns:repeat(2,1fr); gap:28px; }
  .profile-grid { grid-template-columns:1fr; }
  .cta-band-inner { flex-direction:column; text-align:center; }
  .film-detail-layout { grid-template-columns:1fr; }
  .film-detail-sidebar { display:flex; flex-direction:column; }
  .credits-grid { grid-template-columns:1fr; }
  .page-hero-title { font-size:clamp(40px,12vw,72px); }
  .hero-name-kr { letter-spacing:-3px; }
  .overlay-link { font-size:clamp(36px,10vw,64px); }
  .festival-cards { grid-template-columns:1fr; }
  .comm-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .comm-img-card { height:160px; width:220px; }
}