/* ==========================================================
   FIF 2026 — Digital Brochure
   본문: 명조체 (Bookk Myungjo, fallback Noto Serif KR)
   숫자/영문/버튼: sans-serif (Inter, system)
   다크 네이비 / 실버 / 아이스 블루 · 모바일 우선
   ========================================================== */

/* -----------------------------------------------------------
   부크크명조체 — 로컬 자산 폴더에 폰트 파일 배치 후 활성화.
   파일이 없을 경우 Noto Serif KR 로 자동 폴백됩니다.
   다운로드: https://www.bookk.co.kr/font  (개인/상업 무료)
   배치 경로: assets/fonts/BbookkMyungjo.woff2 (필요 시 .woff 동봉)
   ----------------------------------------------------------- */
@font-face {
  font-family: "Bbookk Myungjo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  /* placeholder — 파일을 assets/fonts 에 두면 즉시 적용됨 */
  src: local("BbookkMyungjo"),
       local("부크크명조체"),
       url("assets/fonts/BbookkMyungjo.woff2") format("woff2"),
       url("assets/fonts/BbookkMyungjo.woff")  format("woff");
}

:root{
  /* palette */
  --bg-0:#05070F;
  --bg-1:#0A1024;
  --bg-2:#0F1832;
  --bg-3:#141C36;
  --line:rgba(176,196,222,.16);
  --line-strong:rgba(176,196,222,.28);

  --ink-0:#F5F8FF;
  --ink-1:#E6ECF7;
  --ink-2:#AEB7CC;
  --ink-3:#7B8AA8;

  --silver:#C9D2E3;
  --ice:#9CC5FF;
  --ice-2:#6EA8FF;
  --accent:#7BD0FF;
  --accent-2:#4AAFE8;
  --china:#DE2910;        /* 중국 국기 레드 — 절제 사용 */
  --china-2:#FFDE00;      /* 노란 별 톤 */
  --china-soft:#FF8A8A;

  /* typography — 본문은 명조, 숫자/영문 보조는 sans */
  --font-serif: "Bbookk Myungjo", "Noto Serif KR",
                "Apple SD Gothic Neo", "Nanum Myeongjo",
                "Source Han Serif KR", "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial,
                "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-num:   "Inter", "SF Pro Text", -apple-system, system-ui, sans-serif;

  /* layout */
  --radius:14px;
  --radius-lg:20px;
  --maxw:1200px;
  --nav-h:60px;
}

/* ---- reset & base ---------------------------------------- */
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; max-width:100%; overflow-x:hidden; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-serif);
  background:var(--bg-0);
  color:var(--ink-1);
  line-height:1.85;          /* 명조체에 맞는 넉넉한 줄간격 */
  font-weight:400;
  letter-spacing:.005em;
  font-size:clamp(15px, 1.05vw + 12px, 17px);  /* 모바일 ~ PC */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  word-break:keep-all;       /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap:anywhere;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
.num{ font-family:var(--font-num); font-feature-settings:"tnum" 1; letter-spacing:0; }

.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(16px, 4vw, 24px);
}

/* ---- NAVIGATION ------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(5,7,15,.78);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(14px, 3vw, 24px);
  height:var(--nav-h);
  display:flex; align-items:center; gap:14px;
}
.nav__brand{ display:flex; align-items:center; gap:8px; }
.nav__logo{
  height:30px; width:auto; flex:none;
  filter:brightness(1.05);
}
.nav__brand-year{
  font-family:var(--font-num);
  font-size:11px; letter-spacing:.18em; font-weight:600;
  color:var(--ink-3);
  padding:3px 6px; border:1px solid var(--line);
  border-radius:4px;
}

.nav__links{
  margin-left:auto; display:flex; gap:18px;
}
.nav__links a{
  font-family:var(--font-sans);
  color:var(--ink-2); font-size:13px; letter-spacing:.02em;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.nav__links a:hover{ color:var(--ink-0); border-color:var(--ice); }

.nav__tools{ display:flex; align-items:center; gap:8px; flex:none; }
.lang-switch{
  display:inline-flex; padding:2px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:999px;
  flex:none; white-space:nowrap;
}
.lang-btn{
  font-family:var(--font-sans);
  padding:5px 10px; font-size:11.5px; font-weight:600;
  letter-spacing:.08em;
  color:var(--ink-2); border-radius:999px;
  transition:all .2s ease;
  min-height:28px;
}
.lang-btn.is-active{
  background:linear-gradient(180deg, var(--ice), var(--ice-2));
  color:#06122A; font-weight:700;
}

.nav__burger{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:4px;
}
.nav__burger span{ width:14px; height:1.5px; background:var(--ink-1); display:block; }

@media (max-width: 980px){
  .nav__links{
    position:fixed; left:0; right:0; top:var(--nav-h);
    background:rgba(5,7,15,.97);
    border-bottom:1px solid var(--line);
    flex-direction:column; gap:0;
    padding:6px 16px 16px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100vh - var(--nav-h));
    overflow-y:auto;
  }
  .nav__links a{
    padding:14px 0; border-bottom:1px solid var(--line);
    font-size:15px;
  }
  .nav__links.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav__burger{ display:inline-flex; }
  .nav__logo{ height:26px; }
}

/* ---- HERO ------------------------------------------------ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(880px, 100svh);
  padding:max(64px, 12vh) clamp(16px, 4vw, 40px) 80px;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(123,208,255,.16), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(70,120,200,.18), transparent 60%),
    linear-gradient(180deg, #060A1A 0%, #0A1024 60%, #050714 100%);
}
.grid-layer{
  position:absolute; inset:-2px;
  background:
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(176,196,222,.06) 100%),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(176,196,222,.06) 100%);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.orb{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.orb--1{ width:420px; height:420px; background:radial-gradient(circle, #4AAFE8, transparent 70%); top:-80px; right:-60px; }
.orb--2{ width:520px; height:520px; background:radial-gradient(circle, #2A4A88, transparent 70%); bottom:-160px; left:-120px; }
.scanline{
  position:absolute; left:0; right:0; height:1px; top:30%;
  background:linear-gradient(90deg, transparent, var(--ice), transparent);
  opacity:.35; animation:scan 9s linear infinite;
}
@keyframes scan{
  0%{ transform:translateY(-30vh); opacity:0; }
  10%{ opacity:.5; } 90%{ opacity:.5; }
  100%{ transform:translateY(80vh); opacity:0; }
}

.hero__content{ max-width:var(--maxw); margin:0 auto; width:100%; }
.hero__logo{
  width:auto; height:clamp(48px, 7vw, 72px);
  margin:0 0 28px; opacity:.96;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2);
}
.hero__eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}

.hero__title{
  margin:24px 0 12px; line-height:1.15; color:var(--ink-0);
  font-family:var(--font-serif);
  font-weight:400;
}
.hero__title-1{
  display:block;
  font-family:var(--font-sans);
  font-size:clamp(36px, 7.5vw, 84px);
  font-weight:700; letter-spacing:-.03em; line-height:1.05;
  background:linear-gradient(180deg, #F5F8FF 0%, #9CC5FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__title-2{
  display:block; margin-top:14px;
  font-size:clamp(22px, 4.4vw, 44px);
  font-weight:500; letter-spacing:-.01em;
  color:var(--ink-1); line-height:1.45;
}
.hero__subtitle{
  margin:18px 0 0; max-width:640px;
  color:var(--silver); font-size:clamp(15px, 1.6vw, 18px);
  line-height:1.8;
}

.hero__meta{
  margin:36px 0 32px; display:grid; gap:14px 36px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  max-width:820px;
}
.hero__meta div{ border-left:1px solid var(--line-strong); padding-left:14px; }
.hero__meta dt{
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3);
}
.hero__meta dd{
  margin:6px 0 0;
  font-size:clamp(15px, 1.6vw, 17px);
  color:var(--ink-0); font-weight:500;
  line-height:1.6;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-family:var(--font-sans);
  font-weight:500; font-size:15px; letter-spacing:.02em;
  transition:all .25s ease; border:1px solid transparent;
  min-height:44px;            /* 터치 영역 확보 */
}
.btn--primary{
  background:linear-gradient(135deg, var(--ice) 0%, var(--ice-2) 100%);
  color:#06122A; box-shadow:0 10px 24px rgba(110,168,255,.28);
}
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(110,168,255,.36); }
.btn--ghost{
  background:rgba(255,255,255,.04);
  color:var(--ink-0); border-color:var(--line-strong);
}
.btn--ghost:hover{ border-color:var(--ice); color:var(--ice); }

.hero__counter{
  position:absolute; left:0; right:0; bottom:18px;
  text-align:center; color:var(--ink-3);
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
}
.hero__counter strong{ color:var(--ice); font-weight:600; }

/* ---- SECTION SHELL --------------------------------------- */
.section{ padding:clamp(64px, 10vw, 96px) 0; position:relative; }
.section__head{ max-width:840px; margin:0 0 clamp(32px, 5vw, 48px); }
.section__kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}
.section__kicker::before{
  content:""; display:inline-block; width:24px; height:1px;
  background:var(--accent);
}
.section__kicker--china{ color:var(--china-soft); }
.section__kicker--china::before{ background:var(--china-soft); }
.cn-flag{ border-radius:1.5px; box-shadow:0 0 0 1px rgba(255,255,255,.18); }

.section__title{
  font-family:var(--font-serif);
  font-size:clamp(24px, 3.4vw, 40px);
  font-weight:600; letter-spacing:-.01em; line-height:1.35;
  color:var(--ink-0); margin:0 0 14px;
}
.section__title--white{ color:#fff; }
.section__sub{
  font-family:var(--font-serif);
  color:var(--ink-2);
  font-size:clamp(15px, 1.4vw, 17px);
  line-height:1.85;
  margin:0; max-width:680px;
}
.lede{
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--ink-1); max-width:780px;
  line-height:2.0;
}
.lede--white{ color:rgba(255,255,255,.86); }

/* ---- MESSAGE / PILLARS ----------------------------------- */
.section--message{ background:linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
.pillars{
  list-style:none; padding:0; margin:48px 0 0;
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.pillars li{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px; position:relative;
  transition:transform .35s ease, border-color .35s ease, background .35s ease;
}
.pillars li:hover{
  transform:translateY(-3px);
  border-color:var(--ice);
  background:linear-gradient(180deg, rgba(123,208,255,.08), rgba(255,255,255,.02));
}
.pillars__num{
  font-family:var(--font-sans); font-size:12px; letter-spacing:.2em;
  color:var(--accent); font-weight:600;
}
.pillars h3{
  font-family:var(--font-serif);
  font-size:17px; margin:8px 0 6px; color:var(--ink-0); font-weight:600;
}
.pillars p{
  font-size:14.5px; color:var(--ink-2); line-height:1.85; margin:0;
}

/* ---- JOURNEY --------------------------------------------- */
.section--journey{ background:var(--bg-1); }
.journey{
  list-style:none; padding:0; margin:0;
  display:flex; align-items:stretch; gap:18px; justify-content:center;
  flex-wrap:wrap;
}
.journey__step{
  flex:1 1 240px; max-width:340px; min-width:240px;
  padding:28px 24px; border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  position:relative;
  transition:all .4s ease;
}
.journey__step.is-current{
  background:radial-gradient(120% 80% at 50% 0%, rgba(123,208,255,.16), transparent 60%), rgba(255,255,255,.03);
  border-color:var(--ice);
  box-shadow:0 12px 40px rgba(123,208,255,.12);
}
.journey__year{
  font-family:var(--font-num);
  font-size:36px; font-weight:300; color:var(--ice); letter-spacing:.04em;
}
.journey__role{
  font-family:var(--font-sans);
  font-size:24px; font-weight:600; margin:6px 0 8px; color:var(--ink-0);
}
.journey__step.is-current .journey__role{ color:var(--ice); }
.journey__desc{ font-size:14.5px; color:var(--ink-1); margin:0 0 10px; line-height:1.85; }
.journey__tags{
  font-family:var(--font-sans);
  font-size:11.5px; color:var(--ink-3); letter-spacing:.06em; margin:0;
}
.journey__arrow{
  display:flex; align-items:center; color:var(--ink-3);
  font-size:24px; padding:0 6px;
}
@media (max-width: 720px){ .journey__arrow{ transform:rotate(90deg); } }

/* ---- PROGRAM TIMELINE ------------------------------------ */
.section--program{ background:linear-gradient(180deg, var(--bg-1), var(--bg-0)); }
.timeline{
  list-style:none; padding:0; margin:0;
  position:relative;
}
.timeline::before{
  content:""; position:absolute; left:18px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(180deg, transparent, var(--line-strong), transparent);
}
.tl{
  display:grid; grid-template-columns:160px 1fr; gap:24px;
  padding:14px 0; position:relative;
  padding-left:48px;
}
.tl::before{
  content:""; position:absolute; left:13px; top:30px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg-0); border:2px solid var(--ice);
}
.tl--keynote::before{ background:var(--ice); box-shadow:0 0 0 4px rgba(123,208,255,.18); }
.tl--break::before, .tl--lunch::before, .tl--end::before{ border-color:var(--ink-3); }
.tl--china::before{ border-color:var(--china); background:rgba(222,41,16,.18); }
.tl--parallel-head::before{ background:var(--ice-2); border-color:var(--ice-2); }
.tl--closing::before{ background:var(--accent); border-color:var(--accent); }

.tl__time{
  font-family:var(--font-num);
  font-size:13px; letter-spacing:.04em; color:var(--ice);
  padding-top:6px; font-weight:500;
}
.tl__body{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
  border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
  transition:border-color .3s ease, background .3s ease;
}
.tl__body:hover{
  border-color:var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.tl--break .tl__body, .tl--lunch .tl__body, .tl--end .tl__body{
  background:transparent; border-style:dashed; padding:10px 16px;
}
.tl--break h3, .tl--lunch h3, .tl--end h3{
  font-family:var(--font-serif);
  color:var(--ink-2); font-size:14.5px; font-weight:400; margin:0;
}
.tl--keynote .tl__body{ border-color:rgba(123,208,255,.32); }
.tl--china .tl__body{ border-color:rgba(222,41,16,.32); }
.tl--parallel-head .tl__body{
  background:linear-gradient(180deg, rgba(110,168,255,.10), rgba(110,168,255,.02));
  border-color:rgba(110,168,255,.24);
}

.tl__tag{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  padding:4px 10px; border-radius:999px;
  background:rgba(123,208,255,.08); border:1px solid rgba(123,208,255,.22);
  margin-bottom:8px;
}
.tl__tag--alt{ color:var(--ice); background:rgba(110,168,255,.10); border-color:rgba(110,168,255,.32); }
.tl__tag--china{ color:#FFB3B3; background:rgba(222,41,16,.10); border-color:rgba(222,41,16,.30); }

.tl__body h3{
  font-family:var(--font-serif);
  font-weight:600; font-size:clamp(16px, 1.7vw, 19px);
  color:var(--ink-0); margin:0 0 6px; line-height:1.5;
}
.tl__body p{
  font-size:14.5px; color:var(--ink-2); margin:6px 0 0;
  line-height:1.85;
}
.tl__meta{
  font-family:var(--font-sans);
  font-size:13px; color:var(--ink-3); margin-top:10px !important;
  line-height:1.7; word-break:keep-all; overflow-wrap:anywhere;
}
.tl__meta strong{ color:var(--ink-1); font-weight:600; }

.tl__cta{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  font-family:var(--font-sans);
  font-size:12.5px; letter-spacing:.08em;
  color:var(--accent);
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(123,208,255,.30);
  transition:all .25s ease;
  min-height:36px;
}
.tl__cta:hover{ background:rgba(123,208,255,.12); color:var(--ice); border-color:var(--ice); }

@media (max-width: 720px){
  .timeline::before{ left:14px; }
  .tl{ grid-template-columns:1fr; gap:8px; padding-left:36px; }
  .tl::before{ left:9px; top:8px; }
  .tl__time{ padding-top:0; font-size:12.5px; }
}

/* ---- SPEAKERS — accordion 방식 (모바일 zoom 방지) -------- */
.section--speakers{ background:var(--bg-0); }
.speakers{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
.speaker{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all .35s ease;
  display:flex; flex-direction:column;
  position:relative;
}
.speaker:hover{
  transform:translateY(-3px);
  border-color:var(--ice);
  box-shadow:0 14px 40px rgba(123,208,255,.12),
             0 0 0 1px rgba(123,208,255,.18) inset;
}
.speaker--china{ border-color:rgba(222,41,16,.20); }
.speaker--china:hover{
  border-color:var(--china);
  box-shadow:0 14px 40px rgba(222,41,16,.10),
             0 0 0 1px rgba(222,41,16,.20) inset;
}
.speaker.is-open{
  grid-column:1 / -1;       /* 펼쳤을 때 카드가 한 줄을 차지 */
}

.speaker__photo{
  aspect-ratio:1/1; overflow:hidden; position:relative; background:#0a0e1f;
}
.speaker__photo img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.18) contrast(1.02);
  transition:transform .5s ease, filter .5s ease;
}
.speaker:hover .speaker__photo img{
  transform:scale(1.04); filter:grayscale(0) contrast(1.05);
}
.speaker__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(5,7,15,.72));
  pointer-events:none;
}

.speaker__body{ padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.speaker__name{
  font-family:var(--font-serif);
  font-size:21px; font-weight:600; margin:0; color:var(--ink-0);
  line-height:1.4;
}
.speaker__title{
  font-family:var(--font-sans);
  font-size:13px; color:var(--ink-3); margin:2px 0 12px;
}
.speaker__topic{
  font-family:var(--font-serif);
  font-size:14.5px; color:var(--ice); margin:0 0 10px; font-weight:500;
}
.speaker__q{
  font-size:14.5px; color:var(--ink-2); line-height:1.85;
  border-left:2px solid var(--line-strong); padding-left:12px;
  margin:0 0 16px; font-style:normal;
}
.speaker--china .speaker__topic{ color:#FFB3B3; }
.speaker__more{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-sans);
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 16px;
  min-height:40px;          /* 터치 영역 */
  border-radius:999px;
  border:1px solid var(--line-strong); color:var(--ink-1);
  transition:all .25s ease;
}
.speaker__more:hover{ border-color:var(--ice); color:var(--ice); }
.speaker__chev{ transition:transform .3s ease; }
.speaker.is-open .speaker__chev{ transform:rotate(180deg); }

.speaker__detail{
  padding:0 20px 24px;
  border-top:1px solid var(--line);
  margin-top:0;
  font-size:14.5px; line-height:1.95;
  color:var(--ink-1);
  /* iOS Safari 16px 이상 보장 (zoom 방지) */
  -webkit-text-size-adjust:none;
}
.speaker__detail h4{
  font-family:var(--font-sans);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin:18px 0 6px;
}
.speaker__detail p{ margin:0 0 6px; }
.speaker__detail ul{ padding-left:20px; margin:0; }
.speaker__detail li{ margin:4px 0; }
.speaker__detail .speaker__role{
  font-family:var(--font-sans);
  color:var(--ice); font-size:13.5px; margin:14px 0 0;
}

/* ---- CHINA INSIGHT FORUM HIGHLIGHT ----------------------- */
.section--china{
  background:
    radial-gradient(70% 80% at 100% 50%, rgba(222,41,16,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-0), #0C0815 60%, var(--bg-0));
  position:relative;
}
.section--china::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(222,41,16,.4), transparent);
}
.china{
  display:grid; gap:48px;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
}
@media (max-width: 880px){ .china{ grid-template-columns:1fr; gap:32px; } }
.china__bullets{
  list-style:none; padding:0; margin:24px 0 0;
  display:grid; gap:12px;
}
.china__bullets li{
  font-size:15px; color:var(--ink-1); line-height:1.85;
  padding-left:24px; position:relative;
}
.china__bullets li::before{
  content:""; position:absolute; left:0; top:14px;
  width:14px; height:1px; background:var(--china);
}
.china__cta{
  margin-top:24px;
  border-color:rgba(222,41,16,.45);
  color:#FFB3B3;
}
.china__cta:hover{
  border-color:var(--china);
  color:#fff;
  background:rgba(222,41,16,.10);
}

.china__visual{
  position:relative; aspect-ratio:1/1; max-width:380px; margin:0 auto;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(222,41,16,.18), transparent 60%);
}
.china__grid{
  position:absolute; inset:10%; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, transparent 0deg 8deg, rgba(222,41,16,.10) 8deg 8.4deg),
    radial-gradient(circle, transparent 60%, rgba(222,41,16,.10) 100%);
  border:1px solid rgba(222,41,16,.30);
  animation:rotate 60s linear infinite;
}
@keyframes rotate{ to{ transform:rotate(360deg); } }
.china__char{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:"Noto Serif SC","Noto Serif KR",serif;
  font-size:clamp(110px, 22vw, 200px); font-weight:300;
  color:rgba(255,255,255,.07);
}
.china__pulse{
  position:absolute; left:50%; top:50%; width:14px; height:14px;
  margin:-7px 0 0 -7px; border-radius:50%; background:var(--china);
  box-shadow:0 0 0 0 rgba(222,41,16,.6);
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(222,41,16,.5); }
  70%{ box-shadow:0 0 0 60px rgba(222,41,16,0); }
  100%{ box-shadow:0 0 0 0 rgba(222,41,16,0); }
}

/* ---- GREAT QUESTIONS ------------------------------------- */
.section--questions{ background:linear-gradient(180deg, var(--bg-0), var(--bg-1)); }
.questions{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-top:8px;
}
.question{
  background:linear-gradient(180deg, rgba(123,208,255,.06), transparent 60%), rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 26px; position:relative;
  transition:all .4s ease;
}
.question:hover{
  border-color:var(--ice);
  background:linear-gradient(180deg, rgba(123,208,255,.12), transparent 60%), rgba(255,255,255,.03);
  transform:translateY(-2px);
}
.question__num{
  font-family:var(--font-num);
  font-size:42px; font-weight:200; letter-spacing:-.02em;
  color:var(--ice); display:block; line-height:1;
}
.question__scope{
  display:inline-block; margin:14px 0 16px;
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent);
  padding:4px 10px; border:1px solid rgba(123,208,255,.30); border-radius:999px;
}
.question__body{
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.6vw, 17px); line-height:1.85; color:var(--ink-0);
  font-weight:400; margin:0;
}
.questions__cta{ margin-top:32px; text-align:center; }

/* ---- VENUE — Mabuk Campus, real photos ------------------ */
.section--venue{
  background:var(--bg-1);
  position:relative; isolation:isolate;
}
.venue-bg{
  position:absolute; inset:0; z-index:-1;
  overflow:hidden; opacity:.18; pointer-events:none;
}
.venue-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.7) blur(2px) brightness(.6);
}
.section--venue::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,16,36,.85) 0%, rgba(10,16,36,.96) 100%);
}

/* 공간 사진 카드 3개 */
.venue-cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom:36px;
}
.venue-card{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:all .35s ease;
  display:flex; flex-direction:column;
}
.venue-card:hover{
  transform:translateY(-3px);
  border-color:var(--ice);
  box-shadow:0 14px 32px rgba(123,208,255,.12);
}
.venue-card__photo{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0a0e1f;
}
.venue-card__photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.venue-card:hover .venue-card__photo img{ transform:scale(1.06); }
.venue-card__photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(5,7,15,.55));
  pointer-events:none;
}
.venue-card__floor{
  position:absolute; left:14px; top:12px; z-index:2;
  font-family:var(--font-num);
  font-size:11px; letter-spacing:.16em; font-weight:600;
  padding:4px 10px; border-radius:6px;
  background:rgba(5,7,15,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(156,197,255,.40);
  color:var(--ice);
}
.venue-card__floor--china{
  border-color:rgba(222,41,16,.45);
  color:#FFB3B3;
}
.venue-card__body{ padding:16px 18px 18px; }
.venue-card__name{
  font-family:var(--font-serif);
  font-size:clamp(17px, 1.9vw, 20px);
  font-weight:600; color:var(--ink-0); margin:0;
  line-height:1.4;
}
.venue-card__sub{
  font-family:var(--font-sans);
  font-size:12.5px; color:var(--ink-3); margin:4px 0 0;
  line-height:1.6; letter-spacing:.02em;
}
.floors{
  display:grid; gap:20px;
  align-items:stretch;       /* 두 카드 높이 균형 */
}
@media (min-width: 980px){ .floors{ grid-template-columns:1fr 1fr; } }

.floor{
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  transition:all .35s ease;
  display:flex; flex-direction:column;
  min-height:100%;
}
.floor:hover{ border-color:var(--ice); background:rgba(123,208,255,.04); }

.floor__head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:16px; min-height:48px;
}
.floor__badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg, var(--ice), var(--ice-2));
  color:#06122A;
  font-family:var(--font-num);
  font-weight:700; font-size:14px; letter-spacing:.06em;
  flex:none;
}
.floor__title{
  font-family:var(--font-serif);
  font-size:clamp(16px, 1.8vw, 19px);
  margin:0; color:var(--ink-0); font-weight:600; line-height:1.45;
  word-break:keep-all;
}

/* 평면도 이미지 기반 floor map */
.floor__map{
  position:relative;
  background:linear-gradient(180deg, #0d1428, #0a1024);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  overflow:hidden;
}
.floor__map img{
  width:100%; max-width:100%; display:block;
}
/* 실제 평면도 슬라이드 (밝은 배경) — 다크 모드에 맞춰 반전 */
.floor__map--plan{
  padding:14px;
  background:linear-gradient(180deg, #f5f8ff, #e8eef9);
}
.floor__map--plan img{
  width:100%; height:auto; display:block;
}

.pin{
  position:absolute;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans);
  font-size:11.5px; letter-spacing:.04em; font-weight:500;
  color:var(--ink-0);
  padding:4px 10px; border-radius:999px;
  background:rgba(5,7,15,.82);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid var(--line-strong);
  pointer-events:none;
  white-space:nowrap;
  z-index:2;
}
.pin__dot{
  width:8px; height:8px; border-radius:50%; background:var(--ice);
  box-shadow:0 0 0 3px rgba(156,197,255,.22);
  animation:pulseDot 2.4s ease-out infinite;
}
.pin__dot--accent{ background:var(--accent); box-shadow:0 0 0 3px rgba(123,208,255,.28); }
.pin__dot--china {
  background:var(--china);
  box-shadow:0 0 0 3px rgba(222,41,16,.30);
}
.pin__dot--gold{
  background:#FFD166;
  box-shadow:0 0 0 3px rgba(255,209,102,.28);
}
@keyframes pulseDot{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.18); }
}

/* === 2F 평면도 위 핀 위치 === */
/* 좌측 라운드 = 카페테리아, 우측 끝 = 대강당 */
.pin--2f-cafeteria{ left:18%; top:46%; }
.pin--2f-grand    { right:6%;  top:35%; }

/* === 1F 평면도 위 핀 위치 === */
/* 좌측 = 비전홀, 중앙 = 등록부스, 우측 = 대강당 */
.pin--1f-vision      { left:8%;  top:46%; }
.pin--1f-registration{ left:50%; top:54%; transform:translateX(-50%); }
.pin--1f-grand       { right:18%; top:46%; }

@media (max-width: 640px){
  .pin{ font-size:10.5px; padding:3px 8px; gap:5px; }
  .pin__dot{ width:7px; height:7px; }
  .pin--2f-cafeteria{ left:14%; top:42%; }
  .pin--2f-grand    { right:4%; top:30%; }
  .pin--1f-vision      { left:4%; top:48%; }
  .pin--1f-registration{ top:60%; }
  .pin--1f-grand       { right:10%; top:48%; }
}

/* 라벨/legend */
.floor__legend{
  list-style:none; padding:0; margin:14px 0 0;
  display:grid; gap:8px;
}
.floor__legend li{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; color:var(--ink-2); line-height:1.7;
  word-break:keep-all;
}
.floor__legend .dot{
  width:10px; height:10px; border-radius:50%; flex:none;
}
.dot--cafeteria{ background:var(--ice); }
.dot--grand{ background:var(--accent); box-shadow:0 0 0 2px rgba(123,208,255,.18); }
.dot--vision{ background:var(--china); }
.dot--registration{ background:#FFD166; box-shadow:0 0 0 2px rgba(255,209,102,.20); }

/* ---- ARCHIVE (HMG경영연구원 + HMG Prime) ----------------- */
.section--archive{ background:linear-gradient(180deg, var(--bg-1), #050714); }
.archives{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:stretch;       /* 두 카드 상단 정렬 */
}
.arc-card{
  position:relative;
  padding:28px 26px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:all .35s ease;
  display:flex; flex-direction:column;
}
.arc-card:hover{
  transform:translateY(-3px);
  border-color:var(--ice);
  box-shadow:0 14px 40px rgba(123,208,255,.10);
}
.arc-card--gbic{ border-color:rgba(123,208,255,.22); }
.arc-card--prime{ border-color:rgba(255,255,255,.10); }
.arc-card__sigil{
  display:inline-block;
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.32em; font-weight:700;
  color:var(--accent);
  padding:4px 10px; border:1px solid rgba(123,208,255,.30);
  border-radius:6px;
  margin-bottom:14px;
}
.arc-card--prime .arc-card__sigil{ color:var(--ice); border-color:rgba(156,197,255,.40); }

/* HMG Prime 로고 — 흰색 PNG 사용 (assets/hmg-prime-logo-white.png) */
.arc-card__logo{
  height:36px; width:auto; max-width:220px;
  display:block; margin:0 0 14px;
}
.arc-card__title{
  font-family:var(--font-serif);
  font-size:clamp(19px, 2.2vw, 24px);
  font-weight:600; margin:0; color:var(--ink-0); line-height:1.45;
}
.arc-card__sub{
  font-family:var(--font-sans);
  font-size:12.5px; color:var(--ink-3); margin:6px 0 16px;
  letter-spacing:.04em;
}
.arc-card--prime .arc-card__head{
  margin-bottom:18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.arc-card--prime .arc-card__sub{ margin:0 0 4px; }
.arc-card__body{
  font-size:14.5px; line-height:1.95; color:var(--ink-1);
  margin:0 0 16px; flex:1;
}
.arc-card__bullets{
  list-style:none; padding:0; margin:0 0 20px;
  display:grid; gap:8px;
}
.arc-card__bullets li{
  font-size:13.5px; color:var(--ink-2); line-height:1.75;
  padding-left:18px; position:relative;
}
.arc-card__bullets li::before{
  content:""; position:absolute; left:0; top:11px;
  width:10px; height:1px; background:var(--accent);
}

/* h4 sub-heading inside arc-card */
.arc-card__h4{
  font-family:var(--font-sans);
  font-size:11.5px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--accent);
  margin:6px 0 10px;
  padding-top:14px;
  border-top:1px dashed var(--line);
}

/* FIF 관련 보고서 리스트 */
.reports{
  list-style:none; padding:0; margin:0 0 22px;
  display:flex; flex-direction:column; gap:8px;
}
.reports__item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  border-radius:8px;
  transition:all .25s ease;
}
.reports__item:hover{
  background:rgba(123,208,255,.06);
  border-color:var(--line-strong);
  border-left-color:var(--ice);
}
.reports__tag{
  flex:none;
  font-family:var(--font-sans);
  font-size:10.5px; letter-spacing:.10em;
  color:var(--accent); font-weight:600;
  padding:3px 8px; border-radius:4px;
  background:rgba(123,208,255,.10);
  margin-top:2px;
  white-space:nowrap;
}
.reports__link{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
}
.reports__name{
  font-family:var(--font-serif);
  font-size:13.5px; color:var(--ink-1); line-height:1.6;
  word-break:keep-all;
}
.reports__date{
  font-family:var(--font-num);
  font-size:11.5px; color:var(--ink-3); letter-spacing:.04em;
}
@media (max-width: 480px){
  .reports__item{ flex-direction:column; gap:6px; }
  .reports__tag{ align-self:flex-start; }
}
.arc-card__cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; min-height:42px;
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:13px; font-weight:500; letter-spacing:.04em;
  background:linear-gradient(135deg, var(--ice), var(--ice-2));
  color:#06122A;
  transition:all .25s ease;
  box-shadow:0 8px 20px rgba(110,168,255,.20);
}
.arc-card__cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(110,168,255,.30); }

/* Chairman quote block — HMG PRIME 카드 안에서 격식 있게 */
.quote{
  position:relative;
  margin:0 0 22px;
  padding:22px 30px 18px 36px;
  background:linear-gradient(180deg, rgba(123,208,255,.07), rgba(255,255,255,.01));
  border-left:2px solid var(--ice);
  border-radius:0 var(--radius) var(--radius) 0;
}
.quote__mark{
  position:absolute;
  font-family:"Noto Serif KR","Times New Roman",serif;
  font-size:46px; line-height:1;
  color:var(--ice); opacity:.55;
}
.quote__mark--open  { left:10px;  top:6px; }
.quote__mark--close { right:12px; bottom:42px; }
.quote__body{
  margin:0;
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.6vw, 17px);
  font-weight:500; color:var(--ink-0);
  line-height:1.85;
  letter-spacing:.005em;
}
.quote__cite{
  margin-top:12px;
  display:flex; flex-wrap:wrap; gap:6px 14px;
  align-items:baseline;
}
.quote__by{
  font-family:var(--font-sans);
  font-size:12.5px; letter-spacing:.06em;
  color:var(--ice); font-weight:600;
}
.quote__src{
  font-family:var(--font-sans);
  font-size:11.5px; color:var(--ink-3); letter-spacing:.04em;
}

/* ---- DOWNLOADS ------------------------------------------- */
.section--downloads{ background:linear-gradient(180deg, #050714, var(--bg-0)); }
.downloads{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}
.dl-card{
  display:flex; gap:18px; align-items:flex-start;
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  transition:all .3s ease;
}
.dl-card:hover{
  border-color:var(--ice);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(123,208,255,.10);
}
.dl-card__icon{
  width:54px; height:54px; flex:none; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(123,208,255,.10); border:1px solid rgba(123,208,255,.24);
  color:var(--ice);
}
.dl-card__body{ min-width:0; }
.dl-card__body strong{
  font-family:var(--font-serif);
  display:block; font-size:17px; color:var(--ink-0); line-height:1.5;
}
.dl-card__body p{
  font-size:14px; color:var(--ink-2); margin:6px 0 12px;
  line-height:1.85;
}
.dl-card__cta{
  font-family:var(--font-sans);
  font-size:13px; color:var(--ice); letter-spacing:.04em; font-weight:500;
}

/* ---- DOWNLOADS — accordion cards (GQ + OST) ---- */
.reveal-cards{
  display:grid; gap:18px;
}
@media (min-width: 980px){ .reveal-cards{ grid-template-columns:1fr 1fr; align-items:start; } }

.reveal-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.reveal-card:hover{
  border-color:var(--line-strong);
}
.reveal-card[open]{
  border-color:var(--ice);
  box-shadow:0 12px 32px rgba(123,208,255,.10);
}
.reveal-card__head{
  display:flex; align-items:center; gap:14px;
  padding:20px 22px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .25s ease;
}
.reveal-card__head::-webkit-details-marker{ display:none; }
.reveal-card__head:hover{ background:rgba(123,208,255,.04); }
.reveal-card__icon{
  width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px;
  background:rgba(123,208,255,.10);
  border:1px solid rgba(123,208,255,.24);
  color:var(--ice);
}
.reveal-card--ost .reveal-card__icon{
  background:rgba(156,197,255,.10);
  border-color:rgba(156,197,255,.32);
}
.reveal-card__title{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.reveal-card__kicker{
  font-family:var(--font-sans);
  font-size:10.5px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
}
.reveal-card__title strong{
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.7vw, 18px);
  font-weight:600; color:var(--ink-0); line-height:1.4;
}
.reveal-card__chev{
  flex:none; color:var(--ink-3);
  transition:transform .3s ease, color .25s ease;
}
.reveal-card[open] .reveal-card__chev{
  transform:rotate(180deg);
  color:var(--ice);
}
.reveal-card__body{
  padding:0 22px 24px;
  border-top:1px solid var(--line);
  margin-top:4px;
  animation:revealOpen .35s ease;
}
@keyframes revealOpen{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}
.reveal-card__lead{
  font-family:var(--font-serif);
  font-size:14.5px; color:var(--ink-2); line-height:1.85;
  margin:18px 0 18px;
}
.reveal-card__cta{
  margin-top:20px; display:flex; flex-wrap:wrap; gap:10px;
}
.reveal-card__note{
  margin:14px 0 0;
  padding:10px 14px;
  font-family:var(--font-sans);
  font-size:12px; color:var(--ink-3); line-height:1.65;
  background:rgba(255,255,255,.02);
  border:1px dashed var(--line);
  border-radius:8px;
}

/* opening 카드 — 영상 행 */
.reveal-card--opening .reveal-card__icon{
  background:rgba(255,196,116,.10);
  border-color:rgba(255,196,116,.32);
  color:#FFC474;
}
.film{
  display:flex; flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.film__row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:10px;
  transition:all .25s ease;
}
.film__row:hover{
  background:rgba(123,208,255,.06);
  border-color:rgba(123,208,255,.32);
}
.film__row--future{
  background:rgba(255,255,255,.015);
  border-style:dashed;
}
.film__year{
  font-family:var(--font-num);
  font-size:14px; font-weight:700;
  color:var(--ice); letter-spacing:.04em;
}
.film__row--future .film__year{ color:var(--ink-3); }
.film__name{
  font-family:var(--font-serif);
  font-size:14.5px; color:var(--ink-1);
  line-height:1.4;
}
.film__row--future .film__name{ color:var(--ink-2); }
.film__cta{
  flex:none;
  font-size:13px;
  padding:10px 16px;
  min-height:38px;
}
.film__cta.is-locked{
  cursor:not-allowed;
  opacity:.6;
  pointer-events:none;
}
@media (max-width: 520px){
  .film__row{ grid-template-columns:auto 1fr; }
  .film__cta{ grid-column:1 / -1; justify-content:center; }
}

/* GQ 카드 안의 questions 그리드 */
.reveal-card .questions{
  margin:18px 0 8px;
  grid-template-columns:1fr;
}
@media (min-width: 720px){
  .reveal-card .questions{ grid-template-columns:1fr 1fr 1fr; }
}
.reveal-card .question{
  padding:18px 18px;
}

/* OST 12 트랙 플레이리스트 — fancy player UI */
.playlist{
  margin-top:36px;
  padding:28px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(123,208,255,.12), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(78,143,229,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
}
.playlist__head{
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.playlist__title{
  font-family:var(--font-sans);
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:600;
  margin:0 0 8px;
}
.playlist__sub{
  font-family:var(--font-serif);
  font-size:clamp(15px, 1.5vw, 17px);
  color:var(--ink-1); margin:0;
  line-height:1.85;
}
.tracks{
  list-style:none; padding:0; margin:0;
  display:grid; gap:8px;
}
@media (min-width: 720px){
  .tracks{ grid-template-columns:1fr 1fr; gap:8px 16px; }
}
.track{
  display:grid;
  grid-template-columns:34px 1fr auto;
  gap:14px; align-items:center;
  padding:12px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:10px;
  transition:all .25s ease;
}
.track:hover{
  background:rgba(123,208,255,.06);
  border-color:rgba(123,208,255,.32);
  transform:translateX(2px);
}
.track__num{
  font-family:var(--font-num);
  font-size:13px; color:var(--ink-3); font-weight:500;
  letter-spacing:.04em;
}
.track__meta{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.track__title{
  font-family:var(--font-serif);
  font-size:14.5px; color:var(--ink-0); font-weight:500;
  line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__tag{
  font-family:var(--font-sans);
  font-size:11px; color:var(--ink-3); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__play{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  min-height:36px;
  border-radius:999px;
  background:rgba(123,208,255,.12);
  border:1px solid rgba(123,208,255,.32);
  color:var(--ice);
  font-family:var(--font-sans);
  font-size:12px; font-weight:600; letter-spacing:.06em;
  transition:all .2s ease;
  flex:none;
}
.track__play:hover{
  background:linear-gradient(135deg, var(--ice), var(--ice-2));
  color:#06122A;
  border-color:transparent;
  transform:scale(1.04);
}
.track__play:active{ transform:scale(.98); }
.track__play svg{ flex:none; }

.playlist__note{
  margin:18px 0 0;
  padding:12px 14px;
  font-family:var(--font-sans);
  font-size:12px; color:var(--ink-3);
  background:rgba(255,255,255,.02);
  border:1px dashed var(--line);
  border-radius:8px;
  line-height:1.65;
}
@media (max-width: 480px){
  .playlist{ padding:20px 16px; }
  .track{ grid-template-columns:28px 1fr auto; gap:10px; padding:10px 12px; }
  .track__num{ font-size:12px; }
  .track__title{ font-size:13.5px; }
  .track__play span{ display:none; }
  .track__play{ padding:8px 10px; }
}

/* ---- CONTACT --------------------------------------------- */
.section--contact{ background:var(--bg-0); padding-bottom:48px; }
.contact__org{
  font-family:var(--font-sans);
  letter-spacing:.06em; color:var(--ice); font-weight:500;
}
.contact{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.contact__card{
  padding:22px 22px 20px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; flex-direction:column; gap:6px;
  transition:all .3s ease;
}
.contact__card:hover{ border-color:var(--ice); background:rgba(123,208,255,.04); }
.contact__team{
  font-family:var(--font-sans);
  font-size:11px; letter-spacing:.20em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
}
.contact__name{
  font-family:var(--font-serif);
  font-size:22px; font-weight:600; color:var(--ink-0); line-height:1.4;
}
.contact__phone{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; min-height:42px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:15px; color:var(--ink-1); letter-spacing:.02em;
  transition:all .25s ease;
}
.contact__phone:hover{ color:var(--ice); border-color:var(--ice); background:rgba(123,208,255,.06); }

/* ---- FOOTER ---------------------------------------------- */
.footer{
  border-top:1px solid var(--line);
  background:#03060E; padding:28px 0;
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__logo{ height:26px; width:auto; opacity:.9; }
.footer__tag{
  font-family:var(--font-sans);
  letter-spacing:.06em; color:var(--ink-3); font-size:12.5px;
}
.footer__legal{
  font-family:var(--font-sans);
  color:var(--ink-3); font-size:12px; margin:0;
}

/* ---- SCROLL REVEAL --------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-revealed{ opacity:1; transform:translateY(0); }

/* center-focused emphasis */
.focus-zone{
  transition:transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.focus-zone.is-focus{
  transform:scale(1.015);
}

/* ---- iOS / 모바일 zoom 방지 보강 ------------------------- */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari: 인풋류 16px 이상 보장하여 자동 줌 방지 */
  input, select, textarea, button { font-size:max(16px, 1em); }
}