/* ===== IIFF — Incheon International Film Festival : Shared Design System =====
   Dark cinematic + awards gold. 다크네이비 고정. */

:root{
  --bg:#0A0E1A; --panel:#0E1426; --raised:#131B33; --raised2:#172041;
  --line:rgba(126,146,196,.14); --line-strong:rgba(126,146,196,.26);
  --navy:#1B2A4E; --navy-soft:#25356b;
  --gold:#C9A14A; --gold-light:#E3C77A; --gold-warm:#F2E2B4;
  --wine:#B43A4A;
  --t-high:#F4F5F8; --t-sub:#AEB6CC; --t-mute:#6E788F;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:76px}
body{
  margin:0; background:var(--bg); color:var(--t-high);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  word-break:keep-all; line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.container-x{max-width:1180px; margin-inline:auto; padding-inline:1.25rem}
@media(min-width:768px){.container-x{padding-inline:2.5rem}}

.display{font-family:'Noto Serif KR','Playfair Display',serif}
.editorial{font-family:'Playfair Display','Noto Serif KR',serif; font-style:italic}
.kicker{font-family:'Playfair Display',serif; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-light); font-size:.72rem; font-weight:600; min-width:0; overflow-wrap:break-word}
@media(max-width:560px){ .kicker{letter-spacing:.16em; font-size:.66rem} }
.kicker-ko{letter-spacing:.22em; text-transform:none}

/* ----- backgrounds & decoration ----- */
.bg-panel{background:var(--panel)}
.bg-raised{background:var(--raised)}
.grain{position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:radial-gradient(circle, #F2E2B4 .6px, transparent .6px); background-size:24px 24px}
.glow{position:absolute; border-radius:9999px; filter:blur(80px); pointer-events:none; opacity:.5}
.hairline{height:1px; background:linear-gradient(90deg,transparent,rgba(201,161,74,.55),transparent)}
.gold-bar::after{content:''; display:block; width:46px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-warm)); margin-top:16px}
.gold-bar.center::after{margin-inline:auto}

/* ----- buttons ----- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  height:52px; padding-inline:1.6rem; border-radius:9999px; font-weight:700; font-size:.95rem;
  transition:.3s cubic-bezier(.2,.7,.2,1); cursor:pointer; white-space:nowrap}
.btn-gold{background:linear-gradient(120deg,var(--gold),var(--gold-light)); color:#1a1405}
.btn-gold:hover{filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 18px 40px -18px rgba(201,161,74,.6)}
.btn-ghost{border:1px solid var(--line-strong); color:var(--t-high)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-warm); background:rgba(201,161,74,.06)}
.btn-sm{height:42px; font-size:.85rem; padding-inline:1.1rem}

/* ----- nav ----- */
.nav{position:fixed; top:0; inset-inline:0; z-index:60;
  background:rgba(10,14,26,.72); backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
.nav-logo{display:flex; align-items:center; gap:.65rem}
.nav-logo .mk{width:38px; height:38px; border-radius:9px; object-fit:cover; box-shadow:0 0 0 1px rgba(201,161,74,.4)}
.nav-logo b{font-size:.98rem; letter-spacing:.02em; line-height:1}
.nav-logo small{display:block; color:var(--t-mute); font-size:.62rem; letter-spacing:.24em; margin-top:3px}
.nav-menu{display:none; align-items:center; gap:1.55rem; font-size:.86rem; color:var(--t-sub)}
.nav-menu a{position:relative; padding:.3rem 0; transition:color .25s}
.nav-menu a:hover{color:var(--t-high)}
.nav-menu a.active{color:var(--gold-warm)}
.nav-menu a.active::after{content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-warm)); border-radius:2px}
.nav-cta{display:none}
.nav-burger{display:inline-flex; flex-direction:column; gap:5px; padding:8px; cursor:pointer; background:none; border:0}
.nav-burger span{width:22px; height:2px; background:var(--t-high); border-radius:2px; transition:.3s}
@media(min-width:1024px){
  .nav-menu{display:flex} .nav-cta{display:inline-flex} .nav-burger{display:none}
}
/* drawer */
.drawer{position:fixed; inset:0; z-index:70; visibility:hidden; opacity:0; transition:.3s}
.drawer.open{visibility:visible; opacity:1}
.drawer-bg{position:absolute; inset:0; background:rgba(5,7,14,.7); backdrop-filter:blur(4px)}
.drawer-panel{position:absolute; top:0; right:0; height:100%; width:min(82vw,330px);
  background:var(--panel); border-left:1px solid var(--line-strong); padding:84px 28px 28px;
  transform:translateX(100%); transition:.35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; gap:.4rem}
.drawer.open .drawer-panel{transform:none}
.drawer-panel a{padding:.85rem .25rem; font-size:1.02rem; border-bottom:1px solid var(--line); color:var(--t-sub)}
.drawer-panel a.active{color:var(--gold-warm)}
.drawer-close{position:absolute; top:22px; right:24px; background:none; border:0; color:var(--t-high); font-size:1.6rem; cursor:pointer}

/* ----- sections ----- */
section{position:relative}
.sec{padding-block:96px}
@media(min-width:768px){.sec{padding-block:128px}}
.eyebrow-row{display:flex; align-items:center; flex-wrap:wrap; gap:.8rem; margin-bottom:1.1rem; min-width:0}
.hero-grid > div{min-width:0}
.chip{flex-shrink:0}
h1,h2,h3{margin:0; font-weight:700}
.h-sec{font-size:clamp(1.7rem,4.4vw,2.7rem); line-height:1.28}
.lead{color:var(--t-sub); font-size:1.02rem; line-height:1.9}

/* ----- cards ----- */
.card{background:linear-gradient(180deg,var(--raised),var(--panel)); border:1px solid var(--line);
  border-radius:18px; padding:30px; transition:.35s}
.card:hover{border-color:rgba(201,161,74,.42); transform:translateY(-4px);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.8)}
.card .idx{font-family:'Playfair Display',serif; color:var(--gold); font-size:1.1rem; letter-spacing:.1em}
.chip{display:inline-flex; align-items:center; gap:.4rem; height:34px; padding-inline:.9rem;
  border:1px solid var(--line-strong); border-radius:9999px; font-size:.78rem; color:var(--t-sub)}
.chip b{color:var(--gold-warm); font-weight:700}
.tag{display:inline-block; font-size:.72rem; letter-spacing:.06em; padding:.25rem .6rem; border-radius:6px;
  background:rgba(201,161,74,.12); color:var(--gold-warm); border:1px solid rgba(201,161,74,.25)}
.tag-wine{background:rgba(180,58,74,.14); color:#E9A6AF; border-color:rgba(180,58,74,.3)}

/* ----- team monogram ----- */
.team-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.team-grid{grid-template-columns:repeat(4,1fr)}}
.team-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.35s}
.team-card:hover{border-color:rgba(201,161,74,.4); transform:translateY(-3px)}
.team-photo{aspect-ratio:4/5; width:100%; object-fit:cover; filter:grayscale(.15) contrast(1.02)}
.team-mono{aspect-ratio:4/5; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 20%, #1a244a, #0c1124);
  font-family:'Playfair Display',serif; font-size:2.6rem; color:var(--gold-light);
  letter-spacing:.04em; border-bottom:1px solid var(--line)}
.team-meta{padding:14px 16px 18px}
.team-meta .role{color:var(--gold-warm); font-size:.72rem; letter-spacing:.04em}
.team-meta .name{font-size:1.06rem; font-weight:700; margin-top:3px}

/* ----- timeline ----- */
.timeline{position:relative; margin-top:10px}
.timeline::before{content:''; position:absolute; left:19px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,rgba(201,161,74,.6),rgba(201,161,74,.05))}
.tl-item{position:relative; padding:0 0 38px 58px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute; left:9px; top:4px; width:22px; height:22px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold); display:flex; align-items:center; justify-content:center}
.tl-dot::after{content:''; width:7px; height:7px; border-radius:50%; background:var(--gold)}

/* ----- forms ----- */
.field{margin-bottom:16px}
.field label{display:block; font-size:.82rem; color:var(--t-sub); margin-bottom:7px}
.field label .req{color:var(--gold)}
.input,.textarea,.select{width:100%; background:#0b1020; border:1px solid var(--line-strong); border-radius:11px;
  color:var(--t-high); padding:13px 15px; font-size:.95rem; font-family:inherit; min-height:50px; transition:.25s}
.textarea{min-height:130px; resize:vertical; line-height:1.7}
.input:focus,.textarea:focus,.select:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,161,74,.14)}
.input::placeholder,.textarea::placeholder{color:#54607a}
.consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--t-sub); margin:6px 0 18px}
.consent input{margin-top:4px; accent-color:var(--gold)}
.form-note{font-size:.78rem; color:var(--t-mute); margin-top:10px; text-align:center}
.form-status{display:none; margin-top:14px; padding:12px 16px; border-radius:11px; font-size:.88rem}
.form-status.ok{display:block; background:rgba(201,161,74,.12); border:1px solid rgba(201,161,74,.3); color:var(--gold-warm)}
.form-status.err{display:block; background:rgba(180,58,74,.12); border:1px solid rgba(180,58,74,.35); color:#E9A6AF}

/* ----- next-page CTA ----- */
.nextcard{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  background:linear-gradient(120deg,var(--raised2),var(--panel)); border:1px solid var(--line-strong);
  border-radius:20px; padding:32px 34px}
.nextcard:hover{border-color:rgba(201,161,74,.45)}

/* ----- footer ----- */
.footer{border-top:1px solid var(--line); background:#070A14; padding-block:54px 40px; margin-top:20px}
.footer .cols{display:grid; gap:34px; grid-template-columns:1fr}
@media(min-width:768px){.footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.footer h4{font-size:.78rem; letter-spacing:.16em; color:var(--gold-warm); text-transform:uppercase; margin:0 0 14px}
.footer a{color:var(--t-sub); font-size:.86rem; line-height:2}
.footer a:hover{color:var(--gold-warm)}
.footer .biz{color:var(--t-mute); font-size:.78rem; line-height:1.95}
.footer-bottom{border-top:1px solid var(--line); margin-top:36px; padding-top:22px;
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; justify-content:space-between;
  font-size:.78rem; color:var(--t-mute)}
.footer-bottom .made a{color:var(--gold-light); font-weight:600}

/* ----- reveal ----- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* mobile bottom CTA */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; gap:10px; padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:rgba(10,14,26,.92); backdrop-filter:blur(10px); border-top:1px solid var(--line)}
.mcta a{flex:1; height:48px}
@media(min-width:1024px){.mcta{display:none}}
.has-mcta{padding-bottom:78px}
@media(min-width:1024px){.has-mcta{padding-bottom:0}}