/* 협회 홈 메인 히어로(기차 창밖 구성)의 스타일 — 객차 실내·창밖 풍경·덜컹거림·스크롤 접근·마우스 물결 */
  /* 협회 홈페이지 메인 히어로(기차 창밖) — 객차 실내(고정) + 창밖 풍경(이동) + 덜컹거림 + 스크롤 접근 효과 */
  .hmt-hero-track{
    --wood:#15100b; --ink:#f6f3ec; --ink-sub:#e4dfd3; --mint:#8fdcb3; --edu:#b85a14; --brand:#0a3d25; --paper:#f4f1ea;
    --win-l:36.6%; --win-t:9.4%; --win-w:55.7%; --win-h:59.4%;   /* 창 구멍보다 조금 크게 잡은 풍경 상자 */
    --ox:64.4%; --oy:39%;                                        /* 창 중심(확대 기준점) */
  }

  .hmt-hero-track{height:160vh;position:relative}
  .hmt-hero{position:sticky;top:0;height:100vh;min-height:520px;overflow:hidden;background:#1a120c}

  /* 16:9 실내 이미지를 화면에 꽉 채우는 무대 */
  /* 세로 위치 — 창 구멍의 위쪽 끝(무대 높이의 10.2%)이 상단 메뉴(--hdr) 아래에 오도록 무대를 내린다. 단 화면 아래가 비지 않게 한다.
     무대 높이 --sh = 무대 폭 / 1.791. 위에 빈틈이 생기면 객차 천장과 같은 색(히어로 배경)으로 채워진다. */
  .hmt-stage{--sh:max(55.83vw,100vh);--hdr:104px;position:absolute;left:50%;top:max(calc(var(--hdr) - var(--sh) * .102),calc(100% - var(--sh)));width:max(100vw,179.1vh);aspect-ratio:1920/1072;transform:translateX(-50%)}
  .hmt-zoom{position:absolute;inset:0;transform-origin:var(--ox) var(--oy);will-change:transform}

  .hmt-scenery{position:absolute;left:var(--win-l);top:var(--win-t);width:var(--win-w);height:var(--win-h);overflow:hidden;background:#0b0f0d;border-radius:4%}
  .hmt-scenery-inner{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
  .hmt-scene{position:absolute;top:-15%;left:calc(var(--clipw) * -0.12);height:130%;width:auto;max-width:none;opacity:0;animation:hmt-pan 39s linear infinite;will-change:transform,opacity}
  .hmt-scene.hmt-s2{animation-delay:-26s}
  .hmt-scene.hmt-s3{animation-delay:-13s}
  @keyframes hmt-pan{
    0%{transform:translateX(0);opacity:0}
    1.6%{opacity:1}
    31.6%{opacity:1}
    33.33%{transform:translateX(calc(-100% + var(--clipw) * 1.24));opacity:0}
    100%{transform:translateX(calc(-100% + var(--clipw) * 1.24));opacity:0}
  }
  /* 터널 — 구간이 바뀔 때마다 잠깐 어두워지며 조명이 스친다 */
  .hmt-tunnel{position:absolute;inset:0;background:#07090a;opacity:0;animation:hmt-tunnel 13s linear infinite}
  @keyframes hmt-tunnel{0%{opacity:1}5%{opacity:1}9%{opacity:0}93%{opacity:0}97%{opacity:1}100%{opacity:1}}
  .hmt-tunnel::after{content:"";position:absolute;top:18%;height:5%;width:30%;left:100%;background:linear-gradient(90deg,transparent,#f3d9a0,transparent);filter:blur(6px);animation:hmt-lamp 0.55s linear infinite}
  @keyframes hmt-lamp{to{left:-40%}}
  /* 전철주 — 가까운 것이 빠르게 스쳐 지나가 속도감을 준다 */
  .hmt-pole{position:absolute;top:-5%;bottom:-5%;width:1.6%;left:105%;background:linear-gradient(90deg,transparent,rgba(24,28,26,.78) 40%,rgba(24,28,26,.78) 60%,transparent);filter:blur(3px);animation:hmt-pole 3.1s linear infinite}
  .hmt-pole.hmt-p2{animation-delay:-1.55s;width:1.1%;opacity:.8}
  @keyframes hmt-pole{0%{left:105%}14%{left:-8%}100%{left:-8%}}
  /* 마우스 물결 — WebGL이 켜지면 영상은 텍스처 원본으로만 쓰고 화면에는 캔버스를 보여 준다 */
  canvas.hmt-gl{position:absolute;left:-12%;top:-15%;width:124%;height:130%;display:block;max-width:none}
  .hmt-gl-on video.hmt-scene{visibility:hidden}
  .hmt-glass{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);pointer-events:none}

  /* 객차 — 잔 떨림(rattle) + 이음매를 지날 때의 큰 덜컹(jolt) */
  .hmt-cabin{position:absolute;inset:-1%;animation:hmt-jolt 4.6s cubic-bezier(.3,.6,.3,1) infinite}
  .hmt-cabin-in{position:absolute;inset:0;animation:hmt-rattle .62s linear infinite}
  .hmt-cabin img.hmt-interior{position:absolute;inset:0;width:100%;height:100%;display:block}
  @keyframes hmt-rattle{
    0%{transform:translate(0,0) rotate(0)}
    17%{transform:translate(.4px,-1.1px) rotate(.02deg)}
    31%{transform:translate(-.3px,.8px) rotate(-.015deg)}
    48%{transform:translate(.2px,-.6px) rotate(.01deg)}
    63%{transform:translate(-.4px,1px) rotate(-.02deg)}
    82%{transform:translate(.3px,-.5px) rotate(.012deg)}
    100%{transform:translate(0,0) rotate(0)}
  }
  @keyframes hmt-jolt{
    0%,100%{transform:translateY(0)}
    2%{transform:translateY(-3.2px)}
    5%{transform:translateY(2.4px)}
    8%{transform:translateY(-1.2px)}
    11%{transform:translateY(0)}
    13%{transform:translateY(-2.6px)}
    16%{transform:translateY(1.8px)}
    20%{transform:translateY(0)}
  }
  /* 테이블 위 물건(카메라) — 기본은 객차와 한 몸으로 움직인다(객차의 떨림을 그대로 물려받는다).
     이음매를 지나는 큰 덜컹에서만 아주 조금 늦게 들썩인다.
     접지 그림자·테이블 반사는 별도 레이어로 테이블에 붙여 두어 카메라만 살짝 뜨는 것처럼 보이게 한다(그림자까지 같이 튀면 오려 붙인 티가 난다).
     두 레이어는 같은 크기의 캔버스라 위치 값이 같다. */
  .hmt-obj{position:absolute;transform-origin:50% 100%;filter:brightness(.7) saturate(.86) contrast(1.04)}
  .hmt-obj img,.hmt-obj-ground img{display:block;width:100%;height:auto}
  .hmt-obj-ground{position:absolute}
  .hmt-camera-ground,.hmt-camera{left:65%;width:8.96%;bottom:16.23%}
  .hmt-camera{animation:hmt-hop 4.6s ease-out infinite;animation-delay:.07s}
  @keyframes hmt-hop{
    0%,100%{transform:translateY(0)}
    2.5%{transform:translateY(-1.8px)}
    6%{transform:translateY(0)}
    13.5%{transform:translateY(-1.2px)}
    17%{transform:translateY(0)}
  }

  /* 문구 — 흔들지 않는다 */
  .hmt-copy{position:absolute;left:clamp(20px,7.5vw,144px);bottom:clamp(36px,11vh,120px);width:min(28.5vw,430px);z-index:5;will-change:opacity,transform}
  .hmt-eyebrow{font-size:clamp(13px,1.05vw,17px);font-weight:700;letter-spacing:.04em;color:var(--ink-sub);margin:0 0 14px}
  .hmt-hero h1{font-size:clamp(27px,2.65vw,44px);line-height:1.28;font-weight:800;margin:0 0 16px;letter-spacing:-.01em;text-wrap:balance}
  .hmt-hero h1 em{font-style:normal;color:var(--mint)}
  .hmt-sub{font-size:clamp(15px,1.15vw,18px);color:var(--ink);margin:0 0 26px;max-width:26em}
  .hmt-btns{display:flex;flex-wrap:wrap;gap:10px}
  .hmt-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent}
  .hmt-btn.hmt-edu{background:var(--edu);color:#fff}
  .hmt-btn.hmt-ghost{border-color:rgba(255,255,255,.7);color:#fff}
  .hmt-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
  /* 맨 앞 그라데이션은 상단 메뉴의 흰 글씨가 천장 조명 띠 위에서도 읽히게 메뉴 뒤를 어둡게 한다 */
  .hmt-vign{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,7,4,.8) 0,rgba(10,7,4,.52) 84px,rgba(10,7,4,0) 156px),linear-gradient(90deg,rgba(8,6,4,.72) 0%,rgba(8,6,4,.35) 30%,rgba(8,6,4,0) 46%),radial-gradient(130% 100% at 60% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.5) 100%)}


  /* 모바일 — 창을 화면 위쪽 가운데에 두고 문구는 아래 어두운 면에 */
  @media (max-width:767px),(max-aspect-ratio:1/1){
    .hmt-hero{min-height:620px}
    .hmt-stage{--sh:89.34vw;--hdr:72px;width:160vw;left:calc(50% - 23.04vw);top:calc(var(--hdr) - var(--sh) * .102);transform:translateX(-50%)}
    .hmt-copy{left:20px;right:20px;width:auto;bottom:64px}
    .hmt-vign{background:linear-gradient(180deg,rgba(10,7,4,.8) 0,rgba(10,7,4,.5) 60px,rgba(10,7,4,0) 104px),linear-gradient(180deg,rgba(8,6,4,0) 0%,rgba(8,6,4,0) 33%,rgba(8,6,4,.92) 41.5%,rgba(8,6,4,.96) 100%)}
  }
  /* 좁은 휴대폰 — 두 버튼이 한 줄에 나란히 들어가도록 글자·여백을 화면 폭에 맞춰 줄인다(높이 48px로 터치 영역 44px 유지) */
  @media (max-width:480px){
    .hmt-btns{flex-wrap:nowrap;gap:8px}
    .hmt-btn{flex:0 0 auto;min-height:48px;padding:0 clamp(10px,3.4vw,14px);font-size:clamp(12px,3.75vw,14px);white-space:nowrap}
  }
  @media (prefers-reduced-motion:reduce){
    .hmt-scene,.hmt-tunnel,.hmt-tunnel::after,.hmt-pole,.hmt-cabin,.hmt-cabin-in,.hmt-obj{animation:none!important}
    .hmt-scene.hmt-s3{opacity:1;transform:translateX(-18%)}
    .hmt-hero-track{height:auto}
    .hmt-hero{position:relative}
  }

  /* ── 사이트 적용용 보정 ── */
  .hmt-hero-track,.hmt-hero-track *{box-sizing:border-box}
  .hmt-hero-track{color:var(--ink);font-family:inherit;line-height:1.6;margin-top:0!important;margin-bottom:0!important;max-width:none!important;width:100vw;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
  .hmt-hero{height:100vh;height:100svh}
  .hmt-hero h1{color:var(--ink)!important}
  .hmt-hero p{margin-top:0}
  .hmt-copy{word-break:keep-all;overflow-wrap:break-word}
  .hmt-hero a.hmt-btn{text-decoration:none!important}
  .hmt-hero a.hmt-btn.hmt-edu,.hmt-hero a.hmt-btn.hmt-ghost{color:#fff!important}
  .hmt-hero a.hmt-btn.hmt-edu:hover{filter:brightness(1.08)}
  .hmt-hero a.hmt-btn.hmt-ghost:hover{background:rgba(255,255,255,.12)}
  .hmt-hero img,.hmt-hero video{max-width:none}
  .hmt-hero .hmt-obj img,.hmt-hero .hmt-obj-ground img{max-width:100%}
  /* 데스크톱 문구 위치 — 유리 왼쪽 끝 --winl = 50vw - 무대폭×0.127. 문구는 유리를 넘지 않는다.
     로고 왼쪽 선(콘텐츠 폭 1152px)에 맞추되, 그러면 유리와 겹치는 화면에서는 어두운 벽 쪽으로 옮긴다(글자 크기는 줄이지 않는다). */
  @media (min-width:768px) and (min-aspect-ratio:1001/1000){
    .hmt-hero{--sw:max(100vw,179.1vh);--winl:calc(50vw - var(--sw) * .127);--cpw:min(430px,calc(var(--winl) - 48px))}
    .hmt-copy{width:var(--cpw);left:max(24px,min(calc((100vw - 1152px) / 2),calc(var(--winl) - 24px - var(--cpw))))}
  }
  @media (max-width:767px),(max-aspect-ratio:1/1){ .hmt-copy{bottom:96px} }   /* 모바일 하단 탭바 높이만큼 위로 */