:root{
    --ink:        #080D14;
    --mist:       #F4F5F3;
    --brass:      #D4B15E;   /* 국제교류원 */
    --celadon:    #93B8A6;   /* 한국어교육원 */
    --line:       rgba(244,245,243,.20);
    --line-soft:  rgba(244,245,243,.10);
 
    --serif-ko: "Gowun Batang", serif;
    --serif-en: "Gowun Batang", Georgia, serif;
    --sans:     "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --world:    "Nanum Gothic", "Malgun Gothic", "Apple SD Gothic Neo",
                "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
                "Hiragino Sans", "Noto Sans", "Segoe UI", sans-serif;
 
    --pad: clamp(18px, 3.4vw, 52px);
    --beat: 2600ms;          /* 인사말 한 개가 머무는 시간 */
  }
 
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html,body{ height:100%; }
  body{
    background: var(--ink); color: var(--mist);
    font-family: var(--sans); -webkit-font-smoothing: antialiased;
    overflow: hidden;                       /* 스크롤 없는 한 화면 */
  }
  ul{ list-style:none; }
  a{ color:inherit; text-decoration:none; }
  .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
 
  .stage{
    position:relative; height:100dvh; min-height:560px;
    display:grid; grid-template-rows:auto auto 1fr auto;
    overflow:hidden;
  }
 
  /* ── 배경 ───────────────────────────────────────── */
  .bg{ position:absolute; inset:0; z-index:0; }
  .bg video{
    width:100%; height:100%; object-fit:cover;
    opacity:0; transform:scale(1.06);
    transition: opacity 1.6s ease, transform 9s ease-out;
  }
  .bg video.is-live{ opacity:.55; transform:scale(1); }
 
  .fallback{ position:absolute; inset:0; overflow:hidden; }
  .fallback::after{
    content:""; position:absolute; inset:-30%;
    background:
      radial-gradient(46% 40% at 22% 28%, rgba(212,177,94,.20), transparent 70%),
      radial-gradient(48% 42% at 78% 74%, rgba(147,184,166,.18), transparent 70%);
    animation: drift 28s ease-in-out infinite alternate;
  }
  @keyframes drift{ to{ transform: translate3d(4%,-3%,0) scale(1.12); } }
  .fallback svg{
    position:absolute; top:50%; left:50%;
    width:max(120vh,120vw); height:max(120vh,120vw);
    transform:translate(-50%,-50%); opacity:.28;
  }
  .globe{ transform-origin:400px 400px; animation: spin 90s linear infinite; }
  @keyframes spin{ to{ transform: rotate(360deg); } }
 
  .veil{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(8,13,20,.88) 0%, rgba(8,13,20,.46) 34%, rgba(8,13,20,.56) 62%, rgba(8,13,20,.94) 100%),
      radial-gradient(120% 90% at 50% 45%, transparent 26%, rgba(8,13,20,.76) 100%);
  }
  .grain{
    position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.15;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
 
  /* ── 상단: 언어 트랙 ────────────────────────────── */
  .top{
    position:relative; z-index:3; padding: clamp(14px,2vw,22px) var(--pad) 0;
    display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
    animation: rise .9s .05s both cubic-bezier(.2,.7,.3,1);
  }
  .track{
    display:flex; gap:clamp(9px,1.2vw,16px); flex-wrap:wrap;
    font-size:.6rem; font-weight:500; letter-spacing:.2em;
  }
  .track button{
    background:none; border:0; padding:2px 0; cursor:pointer; color:rgba(244,245,243,.28);
    font:inherit; letter-spacing:inherit; transition: color .35s ease;
  }
  .track button:hover{ color:rgba(244,245,243,.62); }
  .track button.on{ color:var(--brass); }
  .track button:focus-visible{ outline:1px solid var(--line); outline-offset:4px; }
 
  .toggle{
    display:inline-flex; align-items:center; gap:.7em; background:none; border:0; cursor:pointer;
    color:rgba(244,245,243,.46); font:inherit; font-size:.6rem; font-weight:500;
    letter-spacing:.24em; text-transform:uppercase; white-space:nowrap; transition:color .3s ease;
  }
  .toggle:hover{ color:rgba(244,245,243,.8); }
  .toggle:focus-visible{ outline:1px solid var(--line); outline-offset:5px; }
  .toggle .ico{ width:9px; height:10px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
  body.is-paused .toggle .ico{
    border:0; width:0; height:0;
    border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor;
  }
 
  /* ── 인사말 재생부 (시그니처) ───────────────────── */
  .hail{
    position:relative; z-index:3;
    padding: clamp(14px,2.4vw,30px) var(--pad) clamp(14px,2vw,24px);
    animation: rise 1s .2s both cubic-bezier(.2,.7,.3,1);
  }
  .word{
    display:block; font-family:var(--world); font-weight:700;
    font-size: clamp(2.1rem, 5.6vw, 4.2rem);
    line-height:1.15; letter-spacing:normal; min-height:1.2em;
  }
  .word.swap{ animation: swap 720ms cubic-bezier(.2,.7,.3,1); }
  @keyframes swap{
    0%{ opacity:0; transform:translateY(.16em); filter:blur(5px); }
    100%{ opacity:1; transform:none; filter:blur(0); }
  }
  .meta{
    display:flex; align-items:center; gap:.9em;
    margin-top: clamp(8px,1.2vw,14px);
    font-size:.62rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
    color:rgba(244,245,243,.46);
  }
  .meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--brass); }
  .meta .native{ font-family:var(--world); letter-spacing:.06em; text-transform:none; font-size:.8rem; color:rgba(244,245,243,.66); }
 
  .bar{ position:relative; height:1px; margin-top:clamp(10px,1.4vw,16px); background:var(--line-soft); overflow:hidden; }
  .bar i{
    display:block; height:100%; width:100%; background:var(--brass);
    transform-origin:left; transform:scaleX(0);
    animation: fill var(--beat) linear infinite;
  }
  body.is-paused .bar i{ animation-play-state: paused; }
  @keyframes fill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
 
  /* ── 두 관문 ────────────────────────────────────── */
  .split{ position:relative; z-index:3; display:flex; min-height:0; }
 
  .panel{
    position:relative; flex:1 1 0; min-width:0;
    display:flex; align-items:center;
    padding: clamp(16px,2.6vw,44px) var(--pad);
    transition: flex-grow .7s cubic-bezier(.2,.7,.3,1), background-color .5s ease;
    animation: rise 1s .45s both cubic-bezier(.2,.7,.3,1);
  }
  .panel--klc{ animation-delay:.6s; }
  .panel:hover, .panel:focus-within{ flex-grow:1.18; }
  .panel--intl{ --c: var(--brass); }
  .panel--klc { --c: var(--celadon); }
  .panel:hover{ background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 9%, transparent)); }
  .panel__inner{ width:100%; max-width:430px; margin:0 auto; }   /* 블록은 중앙, 문구는 좌측 정렬 */
 
  .rule{ width:clamp(24px,3vw,40px); height:1px; background:var(--c); margin-bottom:clamp(10px,1.4vw,18px);
         transition: width .7s cubic-bezier(.2,.7,.3,1); }
  .panel:hover .rule, .panel:focus-within .rule{ width:clamp(56px,7vw,104px); }
 
  .eyebrow{ display:flex; align-items:baseline; gap:.9em; flex-wrap:wrap; margin-bottom:.75em; }
  .eyebrow b{ font-size:1.15rem; font-weight:700; color:var(--c); letter-spacing:.01em; }
  .eyebrow em{ font-style:normal; font-size:.58rem; font-weight:500; letter-spacing:.24em;
               text-transform:uppercase; color:rgba(244,245,243,.38); }
 
  .panel h1{
    font-family:var(--serif-ko); font-weight:700;
    font-size:clamp(1.05rem,1.75vw,1.55rem); letter-spacing:-.01em; line-height:1.44;
  }
  .panel--intl h1{ font-family:var(--serif-en); font-weight:400; letter-spacing:0;
                   font-size:clamp(1.5rem,2.5vw,2.35rem); line-height:1.18; }
  .panel p{
    font-weight:300; line-height:1.8; font-size:clamp(.8rem,.95vw,.9rem);
    color:rgba(244,245,243,.70); max-width:34ch;
    margin: clamp(10px,1.4vw,16px) 0 clamp(14px,1.8vw,22px);
  }
 
  /* 주요 메뉴 — 버튼형 3개 */
  .menu{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:clamp(14px,1.8vw,22px); }
  .menu a{
    display:inline-block; padding:7px 14px; border:1px solid var(--line-soft); border-radius:999px;
    font-size:.72rem; font-weight:400; color:rgba(244,245,243,.62); white-space:nowrap;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
  }
  .menu a:hover, .menu a:focus-visible{
    color:var(--mist); border-color:var(--c);
    background: color-mix(in srgb, var(--c) 12%, transparent);
  }
 
  /* 기관 이동 버튼 */
  .go{
    display:inline-flex; align-items:center; gap:.9em;
    padding: .9em 1.6em;
    background:var(--c); color:var(--ink);
    font-size:.78rem; font-weight:700; letter-spacing:.1em;
    transition: filter .3s ease, transform .3s ease;
  }
  .go:hover, .go:focus-visible{ filter:brightness(1.12); }
  .go svg{ color:var(--ink); transition: transform .5s cubic-bezier(.2,.7,.3,1); }
  .go:hover svg, .go:focus-visible svg{ transform:translateX(7px); }
  .go:focus-visible{ outline:2px solid var(--mist); outline-offset:4px; }
 
  /* ── 자오선 + 중앙 로고 ─────────────────────────── */
  .meridian{
    position:relative; flex:0 0 clamp(92px,9.5vw,150px); align-self:stretch;
    display:flex; align-items:center; justify-content:center;
    animation: draw 1.1s .15s both cubic-bezier(.2,.7,.3,1);
  }
  .meridian::before{
    content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; margin-left:-.5px;
    background: linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
  }
  .meridian::after{
    content:""; position:absolute; top:12%; bottom:12%; left:50%; width:7px; margin-left:-3px;
    background: repeating-linear-gradient(180deg, var(--line-soft) 0 1px, transparent 1px 34px);
  }
  .crest{
    position:relative; z-index:2;
    width:clamp(86px,9vw,132px); aspect-ratio:1;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    background: radial-gradient(circle, var(--ink) 42%, rgba(8,13,20,0) 76%);
  }
  .crest::before{ content:""; position:absolute; inset:4%; border-radius:50%; border:1px solid var(--line-soft); }
  .crest img{ display:block; width:76%; height:auto; }
  @keyframes draw{ from{ opacity:0; } }
 
  /* ── 푸터 ───────────────────────────────────────── */
  .bottom{
    position:relative; z-index:3; margin:0 var(--pad); padding: clamp(12px,1.5vw,16px) 0 clamp(16px,2vw,26px);
    border-top:1px solid var(--line-soft);
    display:flex; justify-content:space-between; align-items:center; gap:14px 26px; flex-wrap:wrap;
    animation: rise 1s .8s both cubic-bezier(.2,.7,.3,1);
  }
  .bottom small{ font-size:.6rem; font-weight:500; letter-spacing:.2em; color:rgba(244,245,243,.38); }
  .bottom nav{ display:flex; align-items:center; gap:clamp(16px,2vw,28px); flex-wrap:wrap; }
  .bottom nav a{
    font-size:.74rem; color:rgba(244,245,243,.66);
    padding-bottom:3px; border-bottom:1px solid transparent;
    transition: color .3s ease, border-color .3s ease;
  }
  .bottom nav a:hover, .bottom nav a:focus-visible{ color:var(--mist); border-color:var(--mist); }
  .bottom nav a i{ font-style:normal; font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
                   color:rgba(244,245,243,.34); margin-left:.6em; }
 
  @keyframes rise{ from{ opacity:0; transform:translateY(14px); } }
 
  /* ── 반응형 ─────────────────────────────────────── */
  @media (max-width: 900px){
    body{ overflow:auto; }
    .stage{ height:auto; min-height:100dvh; }
    .split{ flex-direction:column; }
    .panel{ flex:1 1 0; padding:clamp(24px,5vw,40px) var(--pad); }
    .panel:hover, .panel:focus-within{ flex-grow:1; }
    .panel__inner{ max-width:560px; }
    .rule{ width:clamp(40px,12vw,72px); }
    .panel p{ max-width:40ch; line-height:1.7; }
    .meridian{
      flex:0 0 auto; padding:clamp(18px,4vw,28px) 0;
      animation-name: drawX;
    }
    .meridian::before{
      top:50%; bottom:auto; left:8%; right:8%; width:auto; height:1px; margin:0;
      background: linear-gradient(90deg, transparent, var(--line) 14%, var(--line) 86%, transparent);
    }
    .meridian::after{ display:none; }
    .crest{ width:118px; }
  }
  @keyframes drawX{ from{ opacity:0; } }
 
  @media (max-width: 560px){
    .top{ gap:10px; }
    .word{ font-size:clamp(1.9rem,9vw,2.9rem); }
    .bottom{ flex-direction:column; align-items:flex-start; gap:12px; }
    .menu a{ font-size:.7rem; padding:7px 12px; }
  }
  @media (min-width:901px) and (max-height: 760px){
    .word{ font-size:clamp(1.8rem,4.4vw,2.9rem); }
    .hail{ padding-block: 12px 12px; }
    .panel p{ margin-block:8px 12px; }
  }
 
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .bg video.is-live{ transform:none; }
    .bar{ display:none; }
  }