/* ============================================================
   Sarang Academy
   따뜻한 크림 + 마스코트에서 뽑은 로즈/코코아 팔레트.
   색은 전부 light-dark() 한 줄로 라이트/다크를 겸한다 — 다크모드용
   블록을 따로 두지 않는다.
   레이아웃은 논리 속성으로만 작성되어 dir="rtl" 에서 통째로 반전된다.
   ============================================================ */

@layer reset, base, layout, components, motion, i18n;

/* ============================================================ */
@layer reset {

  *,*::before,*::after{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; }
  body{ margin:0; }
  img{ max-width:100%; height:auto; display:block; }
  a{ color:inherit; }
  button{ font:inherit; color:inherit; }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
  }
}

/* ============================================================ */
@layer base {

  :root{
    color-scheme: light dark;

    /* 종이 / 잉크 — 잉크는 마스코트 외곽선의 갈색을 그대로 쓴다 */
    --paper:    light-dark(#fdf6ec, #1b1310);
    --paper-2:  light-dark(#f8ecdd, #241a15);
    --card:     light-dark(#fffbf5, #2a1e18);
    --ink:      light-dark(#3a2a22, #f3e7da);
    --ink-2:    light-dark(#6d5749, #c8b3a3);
    /* 캡션·라벨용. 더 밝게 하면 크림 배경에서 AA(4.5:1) 아래로 떨어진다
       — 현재 라이트 4.98:1 / 다크 5.44:1 */
    --ink-3:    light-dark(#7d6555, #a08a77);

    /* 마스코트 분홍에서 뽑되, 본문에 쓸 수 있게 채도를 낮춘 로즈 */
    --rose:     light-dark(#d1506d, #ff96ad);
    --rose-2:   light-dark(#fae0e6, #3d2028);
    --amber:    light-dark(#bd743c, #e0a166);

    /* 짙은 섹션은 라이트/다크 양쪽에서 어둡다 → 위에 얹는 색은 고정값 */
    --deep:      light-dark(#46281f, #2c1e17);
    --on-deep:   #f7e8da;
    --on-deep-2: #cbb2a0;
    --deep-line: rgb(247 232 218 / .18);

    --line:   light-dark(rgb(58 42 34 / .15), rgb(243 231 218 / .17));
    --line-2: light-dark(rgb(58 42 34 / .07), rgb(243 231 218 / .08));
    --glow:   light-dark(#fbdae3, #3f232c);
    --shadow: light-dark(rgb(122 74 45 / .16), rgb(0 0 0 / .55));

    --serif:  "Fraunces", "Gowun Batang", Georgia, serif;
    --ko:     "Gowun Batang", "Pretendard Variable", serif;
    --ar:     "Amiri", "Fraunces", serif;
    --sans:   "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --gut: clamp(20px, 5vw, 64px);
    --head-h: 72px;
    --r: 20px;   /* 카드 모서리 — 둥글수록 따뜻하다 */

    /* height:auto 를 애니메이션 가능하게 만든다 (모바일 메뉴) */
    interpolate-size: allow-keywords;
  }

  :root[data-theme="light"]{ color-scheme: light; }
  :root[data-theme="dark"]{  color-scheme: dark; }

  html{ font-size:17px; }
  @media (min-width:1100px){ html{ font-size:18px; } }
  @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-size:1rem;
    line-height:1.72;
    font-weight:390;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }

  ::selection{ background:var(--rose); color:var(--paper); }
  :focus-visible{ outline:2.5px solid var(--rose); outline-offset:3px; border-radius:4px; }

  h1,h2,h3{ margin:0; font-weight:400; text-wrap:balance; }

  h1,h2{
    font-family:var(--serif);
    /* SOFT 는 글자 끝을 둥글게, WONK 는 이탤릭에 손글씨 같은 변형을 준다 */
    font-variation-settings:"opsz" 132, "SOFT" 72, "WONK" 1, "wght" 460;
    letter-spacing:-.022em;
  }
  h1{ font-size:clamp(2.9rem, 7.4vw, 5.6rem); line-height:1.02; }
  h2{ font-size:clamp(2.2rem, 4.6vw, 3.5rem); line-height:1.08; }
  h1 em, h2 em{ font-style:italic; color:var(--rose); }

  h3{ font-family:var(--sans); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; }

  p{ margin:0 0 1.15em; text-wrap:pretty; }

  .eyebrow{
    font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-3); font-weight:500; margin:0 0 1.7rem;
  }

  .num{
    font-variant-numeric:tabular-nums;
    font-size:.76rem; letter-spacing:.1em; color:var(--rose); font-weight:600;
  }

  .rom{ font-family:var(--serif); font-style:italic; color:var(--ink-3); }

  .lead{
    font-size:clamp(1.12rem, 1.5vw, 1.28rem);
    line-height:1.62; color:var(--ink-2);
    max-width:50ch; margin-top:1.9rem;
  }

  .skip{
    position:fixed; top:10px; inset-inline-start:10px; z-index:200;
    transform:translateY(-180%);
    background:var(--ink); color:var(--paper);
    padding:11px 18px; border-radius:100px; font-size:.9rem; text-decoration:none;
  }
  .skip:focus{ transform:none; }

  /* 종이 질감.
     light-dark() 는 <color> 전용이라 opacity/mix-blend-mode 에는 쓸 수 없다.
     이 둘만 미디어쿼리 + data-theme 으로 따로 뒤집는다. */
  .grain{
    position:fixed; inset:0; z-index:100; pointer-events:none;
    opacity:.42; mix-blend-mode:multiply;
    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='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  }
  :root[data-theme="dark"] .grain{ opacity:.28; mix-blend-mode:overlay; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .grain{ opacity:.28; mix-blend-mode:overlay; }
  }
}

/* ============================================================ */
@layer layout {

  .wrap{ width:min(1260px, 100% - var(--gut)*2); margin-inline:auto; }

  .sec{
    padding:clamp(76px, 11vw, 156px) 0;
    border-top:1px solid var(--line-2);
    scroll-margin-top:var(--head-h);
  }
  .sec--alt{ background:var(--paper-2); }
  .sec--deep{ background:var(--deep); color:var(--on-deep); border-top:0; }
  .sec--deep .num{ color:#ffa8bd; }
  .sec--deep .mark{ color:var(--on-deep-2); border-color:var(--deep-line); }

  .mark{
    display:flex; align-items:baseline; gap:.9rem;
    font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-3); margin:0 0 2.8rem;
    padding-bottom:1rem; border-bottom:1px solid var(--line);
  }

  .sec__title{ max-width:16ch; margin-bottom:3.4rem; }

  .aside{
    margin-top:3.2rem; padding-top:1.5rem; border-top:1px solid var(--line);
    font-size:1rem; color:var(--ink-2); max-width:62ch;
  }
  .aside b{ font-weight:600; color:var(--ink); }

  .split{ display:grid; gap:clamp(32px, 4vw, 68px); grid-template-columns:1fr; }
  @media (min-width:900px){ .split{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
  .split__lead h2{ position:sticky; top:calc(var(--head-h) + 34px); }
  .split__body p{ font-size:1.06rem; color:var(--ink-2); max-width:58ch; }
}

/* ============================================================ */
@layer components {

  /* ── 헤더 ─────────────────────────────────────────────── */
  .head{
    position:sticky; top:0; z-index:60;
    background:color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter:saturate(1.5) blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .3s;
  }
  .head.is-stuck{ border-bottom-color:var(--line); }

  .head__in{
    width:min(1260px, 100% - var(--gut)*2); margin-inline:auto;
    height:var(--head-h);
    display:flex; align-items:center; gap:1.2rem;
  }

  .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; flex-shrink:0; }
  .brand__mark{ width:40px; height:auto; }
  .brand__name{ display:flex; align-items:baseline; gap:.5rem; }
  .brand__name b{ font-family:var(--ko); font-weight:700; font-size:1.4rem; letter-spacing:-.02em; }
  .brand__name > span{
    display:flex; flex-direction:column; line-height:1;
    font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  }
  .brand__name i{
    font-style:normal; font-size:.58rem; color:var(--ink-3);
    letter-spacing:.24em; margin-top:.3em;
  }

  .nav{ display:flex; align-items:center; gap:1.9rem; margin-inline-start:auto; }
  .nav a{
    position:relative; text-decoration:none; font-size:.95rem; color:var(--ink-2);
    transition:color .2s;
  }
  .nav a:hover, .nav a.is-active{ color:var(--ink); }
  .nav a.is-active::after{
    content:""; position:absolute; inset-inline:0; bottom:-7px;
    height:2px; border-radius:2px; background:var(--rose);
  }
  .nav__cta{
    border:1.5px solid var(--rose); border-radius:100px; padding:.45em 1.15em;
    color:var(--rose) !important;
  }
  .nav__cta:hover{ background:var(--rose); color:var(--paper) !important; }
  .nav__cta.is-active::after{ display:none; }

  .tools{ display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

  .lang{ display:flex; align-items:center; }
  .lang button{
    appearance:none; background:none; border:0; cursor:pointer;
    font-size:.72rem; font-weight:500; letter-spacing:.1em;
    color:var(--ink-3); padding:.4em .6em; line-height:1;
    transition:color .2s;
  }
  /* 「تونسي」 는 아랍어라 자간·대문자 변환을 걷어낸다 */
  .lang button[lang|="ar"]{ font-family:"IBM Plex Sans Arabic", var(--sans); font-size:.82rem; letter-spacing:normal; }
  .lang button + button{ border-inline-start:1px solid var(--line); }
  .lang button:hover{ color:var(--ink); }
  .lang button[aria-pressed="true"]{ color:var(--rose); }

  .tbtn{
    display:grid; place-items:center; width:36px; height:36px;
    background:none; border:1px solid var(--line); border-radius:50%;
    color:var(--ink-2); cursor:pointer;
    transition:color .2s, border-color .2s, rotate .4s;
  }
  .tbtn:hover{ color:var(--rose); border-color:var(--rose); rotate:-25deg; }

  .burger{
    display:none; width:40px; height:40px;
    background:none; border:0; cursor:pointer; padding:0;
    flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
  }
  .burger span{
    display:block; width:22px; height:2px; border-radius:2px; background:var(--ink);
    transition:transform .3s;
  }
  .burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

  /* ── 버튼 ─────────────────────────────────────────────── */
  .actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.6rem; }

  .btn{
    display:inline-flex; align-items:center; gap:.5em;
    padding:.95em 1.85em; border-radius:100px;
    background:var(--rose); color:light-dark(#fff, #2a1016);
    font-size:.98rem; font-weight:600; text-decoration:none;
    border:1.5px solid var(--rose);
    box-shadow:0 10px 24px -14px var(--rose);
    transition:transform .25s, box-shadow .25s;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -14px var(--rose); }

  .btn--ghost{
    background:none; color:var(--ink); border-color:var(--line);
    box-shadow:none;
  }
  .btn--ghost:hover{ border-color:var(--ink); }

  /* ── 히어로 ───────────────────────────────────────────── */
  .hero{ padding-top:clamp(40px, 6vw, 76px); padding-bottom:clamp(48px, 6vw, 76px); }

  .hero__grid{
    display:grid; grid-template-columns:1fr; gap:clamp(24px, 4vw, 60px);
    align-items:center;
  }
  @media (min-width:900px){
    .hero__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  }

  .hero__mascot{ position:relative; display:grid; place-items:center; isolation:isolate; }
  .hero__mascot::before{
    content:""; position:absolute; inset:-10% -6%; z-index:-1;
    background:radial-gradient(58% 54% at 50% 46%, var(--glow), transparent 70%);
  }
  .hero__mascot img{ width:min(100%, 460px); }

  .stats{
    list-style:none; margin:clamp(52px, 7vw, 92px) 0 0; padding:1.8rem 0 0;
    border-top:1px solid var(--line);
    display:grid; gap:1.8rem; grid-template-columns:repeat(2, 1fr);
  }
  @media (min-width:760px){ .stats{ grid-template-columns:repeat(4, 1fr); } }
  .stats b{
    display:block; font-family:var(--serif); font-weight:400;
    font-variation-settings:"opsz" 90, "SOFT" 70, "wght" 500;
    font-size:clamp(1.75rem, 2.6vw, 2.3rem); line-height:1.1;
  }
  .stats span{ display:block; margin-top:.5rem; font-size:.86rem; color:var(--ink-3); }

  /* ── 티커 — 장식이라 RTL 에서도 LTR 로 고정 ──────────── */
  .ticker{
    overflow:hidden; border-block:1px solid var(--line);
    padding:.95rem 0; background:var(--paper-2);
    user-select:none; direction:ltr;
  }
  .ticker__row{ display:flex; width:max-content; animation:slide 48s linear infinite; }
  .ticker__set{
    display:flex; align-items:baseline; gap:.75rem; padding-inline-end:.75rem;
    font-size:.95rem; color:var(--ink-3); white-space:nowrap;
  }
  .ticker__set b{ font-family:var(--ko); font-weight:700; font-size:1.14rem; color:var(--ink); }
  .ticker__set i{ font-style:normal; color:var(--rose); padding-inline:.5rem; }

  /* ── 01 학교 ──────────────────────────────────────────── */
  .points{ list-style:none; margin:3.2rem 0 0; padding:0; display:grid; }
  .points li{ padding:1.6rem 0; border-top:1px solid var(--line); display:grid; gap:.35rem; }
  .points li:last-child{ border-bottom:1px solid var(--line); }
  .points h3{ margin:0; }
  .points p{ margin:0; font-size:.98rem; color:var(--ink-2); max-width:52ch; }

  /* ── 02 수업 ──────────────────────────────────────────── */
  .cards{ display:grid; gap:clamp(20px, 2.5vw, 32px); grid-template-columns:1fr; }
  @media (min-width:880px){ .cards{ grid-template-columns:1fr 1fr; } }

  .card{
    background:var(--card); border:1px solid var(--line-2);
    border-radius:var(--r);
    padding:clamp(28px, 3.4vw, 50px);
    display:flex; flex-direction:column;
    box-shadow:0 2px 3px -2px var(--shadow), 0 22px 44px -34px var(--shadow);
  }
  .card__no{
    font-family:var(--serif); font-size:1.6rem; color:var(--rose);
    margin:0 0 2.4rem;
  }
  .card h3{
    font-family:var(--serif); font-weight:400;
    font-variation-settings:"opsz" 100, "SOFT" 72, "wght" 480;
    font-size:clamp(1.75rem,2.4vw,2.25rem); letter-spacing:-.02em;
  }
  .card__desc{ margin-top:1rem; color:var(--ink-2); font-size:1.01rem; max-width:44ch; }

  .card--accent{ background:var(--deep); border-color:var(--deep); color:var(--on-deep); }
  .card--accent .card__no{ color:#ffa8bd; }
  .card--accent .card__desc{ color:var(--on-deep-2); }
  .card--accent .levels li{ border-color:var(--deep-line); }
  .card--accent .levels span{ color:var(--on-deep-2); }

  .levels{ list-style:none; margin:2rem 0 0; padding:0; }
  .levels li{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem 1rem;
    padding:.85rem 0; border-top:1px solid var(--line);
  }
  .levels b{ font-weight:600; font-size:.96rem; min-width:11ch; }
  .levels span{ font-size:.92rem; color:var(--ink-3); }

  .card__note{
    margin:2.2rem 0 0; padding-top:1.5rem; border-top:1px solid var(--deep-line);
    font-family:var(--serif); font-style:italic;
    font-variation-settings:"opsz" 60, "SOFT" 80, "WONK" 1;
    font-size:1.16rem; line-height:1.5; color:var(--on-deep);
  }

  /* ── 03 선생님 ────────────────────────────────────────── */
  .team{ display:grid; gap:clamp(28px, 3vw, 40px); grid-template-columns:1fr; }
  @media (min-width:700px){ .team{ grid-template-columns:repeat(3, 1fr); } }

  /* 사진이 들어오기 전까지 쓰는 자리표시 — 성(姓) 한 글자를 크게 */
  .ph{
    position:relative; aspect-ratio:4/5; overflow:hidden;
    border-radius:var(--r); background:var(--rose-2);
  }
  .ph::before{
    content:attr(data-glyph);
    position:absolute; inset:0; display:grid; place-items:center;
    font-family:var(--ko); font-weight:700;
    color:color-mix(in srgb, var(--rose) 32%, transparent);
    font-size:clamp(5rem, 13vw, 8rem); line-height:1;
  }

  .person h3{ margin:1.4rem 0 0; font-size:1.16rem; }
  .person h3 span{ font-family:var(--ko); font-weight:400; color:var(--ink-3); font-size:.96rem; margin-inline-start:.35em; }
  .person__role{ margin:.45rem 0 0; font-size:.88rem; color:var(--rose); font-weight:500; }
  .person__bio{ margin:.9rem 0 0; font-size:.98rem; color:var(--ink-2); }

  .tag{
    display:inline-block; margin:.3rem 0 0;
    font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
    border-radius:100px; padding:.35em 1em;
    background:var(--rose-2); color:var(--rose); font-weight:600;
  }

  /* ── 04 시간표 ────────────────────────────────────────── */
  .tablewrap{ overflow-x:auto; }
  .grid{ width:100%; min-width:640px; border-collapse:collapse; text-align:start; }
  .grid th, .grid td{
    padding-block:1.25rem; padding-inline:0 1.2rem;
    border-bottom:1px solid var(--line); vertical-align:baseline;
  }
  .grid thead th{
    font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-3); font-weight:500; border-bottom-color:var(--ink-2);
    padding-bottom:.85rem;
  }
  .grid tbody th{ font-weight:600; font-size:1.04rem; }
  .grid td{ font-size:.98rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
  .grid tbody tr{ transition:background .2s; }
  .grid tbody tr:hover{ background:var(--rose-2); }
  .grid .is-accent th{ color:var(--rose); }

  /* ── 05 연락처 ────────────────────────────────────────── */
  .contact{ display:grid; gap:clamp(36px, 5vw, 72px); grid-template-columns:1fr; }
  @media (min-width:900px){ .contact{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
  .contact__lead p{ margin-top:1.7rem; color:var(--on-deep-2); max-width:38ch; font-size:1.06rem; }

  .contact__list{ list-style:none; margin:0; padding:0; }
  .contact__list li{
    display:grid; gap:.35rem; padding:1.35rem 0;
    border-top:1px solid var(--deep-line);
  }
  .contact__list li:last-child{ border-bottom:1px solid var(--deep-line); color:var(--on-deep-2); }
  .contact__list > li > span:first-child{
    font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--on-deep-2);
  }
  .contact__list a{
    font-family:var(--serif); font-variation-settings:"opsz" 72, "SOFT" 70, "wght" 450;
    font-size:clamp(1.3rem, 2.2vw, 1.8rem);
    text-decoration:none; color:var(--on-deep);
    border-bottom:1px solid var(--deep-line); padding-bottom:.08em; width:fit-content;
    transition:color .25s, border-color .25s;
  }
  .contact__list a:hover{ color:#ffa8bd; border-color:#ffa8bd; }

  /* ── 푸터 ─────────────────────────────────────────────── */
  .foot{ background:var(--deep); color:var(--on-deep-2); padding:0 0 clamp(36px,5vw,58px); }
  .foot__in{
    display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem;
    padding-top:clamp(32px,4vw,46px); border-top:1px solid var(--deep-line);
  }
  .brand--foot{ color:var(--on-deep); }
  .brand--foot .brand__name i{ color:var(--on-deep-2); }
  .foot__nav{ display:flex; flex-wrap:wrap; gap:1.5rem; margin-inline-start:auto; }
  .foot__nav a{ font-size:.9rem; text-decoration:none; color:var(--on-deep-2); transition:color .2s; }
  .foot__nav a:hover{ color:#ffa8bd; }
  .foot__note{ width:100%; margin:0; font-size:.8rem; }

  /* ── 배경음악 플레이어 ────────────────────────────────── */
  /* 헤더가 아니라 화면 모서리에 띄운다 — 헤더를 비우고, 방해도 덜하다.
     논리 속성이라 RTL 에서는 반대쪽 모서리로 간다. */
  .player{
    position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:70;
    display:flex; flex-direction:column-reverse; align-items:flex-start; gap:.6rem;
  }
  .player__btn{
    display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
    background:var(--card); border:1px solid var(--line);
    color:var(--ink-2); cursor:pointer;
    box-shadow:0 3px 6px -3px var(--shadow), 0 14px 28px -18px var(--shadow);
    transition:color .2s, border-color .2s, transform .2s;
  }
  .player__btn:hover{ color:var(--rose); border-color:var(--rose); transform:translateY(-2px); }
  .player.is-playing .player__btn{ color:var(--rose); border-color:var(--rose); }
  /* 자동재생이 막혀 사용자의 탭을 기다리는 상태 */
  .player.needs-tap .player__btn{
    color:var(--rose); border-color:var(--rose);
    animation:nudge 2.6s ease-in-out infinite;
  }
  .player.is-playing .player__btn > svg{ display:none; }

  /* 재생 중에는 음표 대신 이퀄라이저 막대 */
  .player__eq{ display:none; align-items:flex-end; gap:3px; height:15px; }
  .player.is-playing .player__eq{ display:flex; }
  .player__eq i{
    width:3px; border-radius:2px; background:currentColor;
    transform-origin:bottom; animation:eq .9s ease-in-out infinite;
  }
  .player__eq i:nth-child(1){ height:60%;  animation-delay:-.2s; }
  .player__eq i:nth-child(2){ height:100%; animation-delay:-.5s; }
  .player__eq i:nth-child(3){ height:75%; }

  .player__menu{
    display:flex; flex-direction:column; min-width:215px;
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:.35rem;
    box-shadow:0 4px 8px -4px var(--shadow), 0 22px 44px -26px var(--shadow);
  }
  .player__menu[hidden]{ display:none; }
  .player__menu button{
    appearance:none; background:none; border:0; cursor:pointer;
    text-align:start; padding:.62rem .85rem; border-radius:10px;
    font-size:.9rem; color:var(--ink-2);
    transition:background .18s, color .18s;
  }
  .player__menu button:hover{ background:var(--rose-2); color:var(--ink); }
  .player__menu button[aria-pressed="true"]{ color:var(--rose); font-weight:600; }

  /* 네이티브 range — accent-color 한 줄로 라이트/다크 양쪽이 맞는다.
     키보드 조작과 스크린리더 지원도 브라우저가 이미 해준다. */
  .player__vol{
    display:flex; align-items:center; gap:.6rem;
    padding:.75rem .85rem .55rem;
    margin-top:.3rem; border-top:1px solid var(--line-2);
    color:var(--ink-3);
  }
  .player__vol input{ flex:1; min-width:0; accent-color:var(--rose); cursor:pointer; }

  /* ── 모바일 ───────────────────────────────────────────── */
  @media (max-width:920px){
    .player{ inset-block-end:14px; inset-inline-start:14px; }
    .burger{ display:flex; }
    .head__in{ gap:.5rem; }
    .brand__name > span{ display:none; }
    .lang button{ padding:.4em .42em; letter-spacing:.06em; }

    .nav{
      position:fixed; inset:var(--head-h) 0 auto 0;
      flex-direction:column; align-items:stretch; gap:0;
      margin-inline-start:0;
      background:var(--paper); border-bottom:1px solid var(--line);
      padding-inline:var(--gut);
      /* interpolate-size 덕에 height:auto 로도 전환이 부드럽다.
         미지원 브라우저에서는 애니메이션 없이 즉시 열린다. */
      height:0; overflow:hidden;
      transition:height .34s cubic-bezier(.22,.61,.36,1);
    }
    .nav.is-open{ height:auto; }
    .nav a{ padding:1.05rem 0; border-bottom:1px solid var(--line-2); font-size:1.1rem; }
    .nav a:last-child{ border-bottom:0; }
    .nav a.is-active::after{ display:none; }
    .nav__cta{ border:0; border-radius:0; padding:1.05rem 0; width:fit-content; }
    .nav__cta:hover{ background:none; color:var(--rose) !important; }

    .split__lead h2{ position:static; }
  }
}

/* ============================================================ */
@layer motion {

  @keyframes slide{ to{ transform:translateX(-50%); } }
  @keyframes reveal-in{ from{ opacity:0; transform:translateY(16px); } }
  @keyframes float{ 50%{ transform:translateY(-12px); } }
  @keyframes eq{ 50%{ transform:scaleY(.3); } }
  @keyframes nudge{
    0%, 100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--rose) 50%, transparent); }
    60%     { box-shadow:0 0 0 9px color-mix(in srgb, var(--rose) 0%, transparent); }
  }

  @media (prefers-reduced-motion: no-preference){

    /* 스크롤 연동 애니메이션. 미지원 브라우저에서는 규칙 자체가 적용되지
       않아 요소가 그냥 보인다 — JS 옵저버가 필요 없다. */
    @supports (animation-timeline: view()){
      .reveal{
        animation:reveal-in linear both;
        animation-timeline:view();
        animation-range:entry 4% cover 24%;
      }
    }

    .hero__mascot img{ animation:float 6s ease-in-out infinite; }

    ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.4s; }
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
  }
}

/* ============================================================
   언어별 조판
   ============================================================ */
@layer i18n {

  /* 아랍어: 제목은 Amiri, 본문은 Plex Arabic.
     아랍어에 자간을 주면 글자 연결이 끊어지므로 전부 걷어낸다. */
  :root[lang|="ar"] body{
    font-family:"IBM Plex Sans Arabic", var(--sans);
    font-size:1.06rem; line-height:1.95;
  }
  :root[lang|="ar"] h1,
  :root[lang|="ar"] h2,
  :root[lang|="ar"] .card h3,
  :root[lang|="ar"] .card__no,
  :root[lang|="ar"] .stats b,
  :root[lang|="ar"] .card__note,
  :root[lang|="ar"] .contact__list a{ font-family:var(--ar); font-variation-settings:normal; }

  :root[lang|="ar"] h1{ line-height:1.3; letter-spacing:normal; }
  :root[lang|="ar"] h2{ line-height:1.34; letter-spacing:normal; }
  :root[lang|="ar"] h3{ letter-spacing:normal; }
  :root[lang|="ar"] h1 em,
  :root[lang|="ar"] .card__note{ font-style:normal; }
  :root[lang|="ar"] .sec__title{ max-width:20ch; }

  :root[lang|="ar"] .eyebrow,
  :root[lang|="ar"] .mark,
  :root[lang|="ar"] .brand__name i,
  :root[lang|="ar"] .stats span,
  :root[lang|="ar"] .contact__list > li > span:first-child,
  :root[lang|="ar"] .grid thead th,
  :root[lang|="ar"] .tag,
  :root[lang|="ar"] .person__role,
  :root[lang|="ar"] .foot__note{ letter-spacing:normal; }

  /* 한국어: 단어 중간에서 줄바꿈하지 않는다. 가짜 이탤릭도 쓰지 않는다. */
  :root[lang|="ko"]{ word-break:keep-all; }
  :root[lang|="ko"] body{ line-height:1.82; }
  :root[lang|="ko"] h1{ line-height:1.24; letter-spacing:-.03em; }
  :root[lang|="ko"] h2{ line-height:1.3; }
  :root[lang|="ko"] h1 em{ font-style:normal; }
  :root[lang|="ko"] .sec__title{ max-width:18ch; }
}