/* KAIIA Theme – Figma 시안 정확 구현 */

:root{
    --sans:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    /* 실제 폰트명은 'Kakao Big Sans'(띄어쓰기 포함) — 제공 굵기는 400·700·800 뿐 */
    --display:'Kakao Big Sans','Pretendard Variable',sans-serif;
    /* ── 크기의 기준 단위 ──
       시안(1920) 의 1px. 화면 폭의 1/1920 이므로, 화면이 넓어지면 함께 커진다.
       시안 값을 그대로 적어 쓴다:
           font-size: calc(80 * var(--u));   ← 시안에서 80px 인 글자

       모든 크기를 이 하나의 기준에 묶어 두면, 화면 폭이 얼마든 브라우저 배율이
       얼마든 화면에 보이는 모습이 시안과 똑같다.
       ※ 상한(clamp)을 두면 안 된다 — 브라우저는 '줌 축소'와 '큰 모니터'를 구분하지
         못하므로, 상한에 걸리는 순간부터 화면 비율과 어긋나 레이아웃이 틀어진다.
       ※ 좁은 화면(1024 이하)은 이 비례를 끊고 미디어쿼리에서 고정값을 준다.
         계속 비례로 줄이면 글자가 읽기 힘들 만큼 작아진다.                      */
    --u:0.05208vw;

    --hh:calc(72 * var(--u));   /* 공통 네비(.hero-nav) 높이와 동일하게 유지 */

    /* 콘텐츠 폭 — 시안 기준선. 화면 대비 비율이 항상 같다.
         --content : 서브페이지 (시안 1460 → 화면의 76%)
         --wrap    : 메인      (시안 1613 → 화면의 84%) */
    --content:calc(1460 * var(--u));
    /* ─────────────────────────────────────────────
   [공통 규격] 비슷한 요소는 같은 값을 쓴다. 새로 만들 때 아래를 먼저 본다.

   상자      안쪽 여백 40u · 모서리 20u
             .jn-box(가입안내) .rg-box(회원가입) .lk-box(접수) .ma-card(로그인) .nw-group(글쓰기 묶음)
   큰 단추   높이 52u · 모서리 26u · 글자 17u
             .nv-btn(목록) .nw-btn(글쓰기 저장) .lk-btn(확인하기·접수하기)
   폼 제출   높이 74u · 모서리 10u — 칸이 많은 폼의 맨 아래 단추
             .rg-btns(회원가입) .ma-btns(로그인)
   눈에 띄는 단추  높이 47u · 모서리 24u · 글자 17u
             .ev-apply(접수하기) .ev-map-go(길 찾기) .lk-contact(연락처)
   작은 알약 높이 36u · 모서리 18u · 글자 14u
             .nb-admin-btn .mbl-admin-btn .nd-admin a
             (표 안에서는 32u — .apl-btn)

   [색과 호버] 단추는 두 갈래뿐이다. 색은 아래 --btn-* 로 못 박아 두었으니
               새 단추를 만들 때도 색을 직접 적지 말고 이 변수를 쓴다.

     주요 행동   var(--btn) 채우고 흰 글자 → 호버 var(--btn-on)
                 저장 · 확인하기 · 접수하기 · 회원가입 · 로그인 · 승인 · 목록
     곁들이는 것 var(--btn-sub) 바탕에 var(--btn-line) 테두리 + 진한 글자
                 → 호버에 테두리와 글자만 var(--btn)
                 취소 · 수정 · 삭제 · 게시판 설정 · 길 찾기 · 연락처 · 내려받기

     ※ 일하는 화면(글쓰기 · 접수 · 회원가입 …)에서는 검정 단추를 두지 않는다.
       검정과 파랑이 섞이면 어느 쪽이 주된 행동인지 읽히지 않는다.
       파랑으로 채운 단추가 곧 '지금 할 일'이다.
     ※ 다만 .btn-join('협회 가입하기' — 메인 · 설립목적)은 검정을 쓰고 호버도 두지 않는다.
       큰 제목과 짝을 이루는 브랜딩 자리라 무엇을 고를지 견주는 단추가 아니다.
   ───────────────────────────────────────────── */

/* [공통] 덩어리(섹션) 사이 간격 — 60u / 좁은 화면 28px.
   쓰는 곳 : .jn-sec(가입안내) · .rg-sec(회원가입) · .mbl-sec(회원사 현황) · .lk-sec(접수 조회)
   한 곳을 바꾸면 나머지도 같이 바꿔 규격을 지킨다.

   [공통] 서브페이지 세로 여백 — 칩(메뉴) 아래 ~ 본문 시작 / 본문 끝 ~ 화면 아래.
       페이지마다 시안 값이 달라 들쭉날쭉했던 것을 한 값으로 묶었다.
       쓰는 곳 : .org · .ci · .lc · .jn · .mbl · .nb · .rg */
    --sub-top:calc(80 * var(--u));
    --sub-bottom:calc(180 * var(--u));
    --wrap:calc(1613 * var(--u));

    /* ── 단추 색 (위 [색과 호버] 참고) ──
       색을 여기 한 곳에 모아 둔다. 예전에는 파일마다 #0069b4 · #222 · #000 이
       흩어져 있어 화면마다 단추 색이 달랐다. */
    --btn:#0069b4;                    /* 주요 행동 — 채우는 색 */
    --btn-on:#005694;                 /* 주요 행동 호버 — 한 단계 진하게 */
    --btn-sub:#f9fbfc;                /* 곁들이는 단추 바탕 */
    --btn-line:rgba(36,36,36,.1);     /* 곁들이는 단추 테두리 */
    --btn-text:#222;                  /* 곁들이는 단추 글자 */
    --btn-warn:#e02020;               /* 지우기처럼 되돌릴 수 없는 것 */
}

/* 태블릿·모바일 — 비례를 끊고 시안 px 을 그대로 쓴다.
   계속 화면 폭에 비례시키면 390px 화면에서 헤더가 15px, 글자가 3px 까지 작아진다.
   --u 하나만 1px 로 되돌리면 calc(72 * var(--u)) 같은 값이 전부 시안 px 이 된다. */
@media (max-width:1024px){
    :root{--u:1px;--content:100%;--wrap:100%;--sub-top:40px;--sub-bottom:80px}
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);font-size:calc(16 * var(--u));color:#000;background:#fff;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
.sound_only,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wrap{width:var(--wrap);margin:0 auto}

/* ===================== HEADER ===================== */
.kaiia-header{position:fixed;top:0;left:0;width:100%;height:var(--hh);z-index:1000;transition:background .3s}
/* 메인페이지에서는 기본 헤더 숨김 (hero-nav 사용) */
body.index-page .kaiia-header{display:none}
body.index-page .kaiia-header{background:transparent}
body.index-page .kaiia-header .gnb-link,
body.index-page .kaiia-header .btn-header-register,
body.index-page .kaiia-header .btn-header-login,
body.index-page .kaiia-header .btn-util{color:#fff}
body.index-page .kaiia-header .logo-img{filter:brightness(0) invert(1)}
.kaiia-header.scrolled,body:not(.index-page) .kaiia-header{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.kaiia-header.scrolled .gnb-link,.kaiia-header.scrolled .btn-header-register,.kaiia-header.scrolled .btn-header-login,.kaiia-header.scrolled .btn-util,
body:not(.index-page) .kaiia-header .gnb-link,body:not(.index-page) .kaiia-header .btn-header-register,body:not(.index-page) .kaiia-header .btn-header-login,body:not(.index-page) .kaiia-header .btn-util{color:#000}
.kaiia-header.scrolled .logo-img,body:not(.index-page) .kaiia-header .logo-img{filter:none}

.header-inner{width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:100%}
.header-logo a{display:flex;align-items:center}
.logo-img{height:calc(28 * var(--u))}
.header-nav{display:flex;align-items:center}
.gnb-list{display:flex}
.gnb-item{position:relative}
.gnb-link{display:block;padding:0 calc(24 * var(--u));line-height:var(--hh);font-size:calc(17 * var(--u));font-weight:400;white-space:nowrap}
.gnb-link.active{font-weight:600}
.gnb-dropdown{position:absolute;top:100%;left:0;min-width:calc(180 * var(--u));background:#fff;border:1px solid #eee;border-radius:0 0 calc(8 * var(--u)) calc(8 * var(--u));padding:calc(8 * var(--u)) 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .2s;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.gnb-item:hover .gnb-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.gnb-sub-list li a{display:block;padding:calc(10 * var(--u)) calc(24 * var(--u));font-size:calc(14 * var(--u));color:#666}
.gnb-sub-list li a:hover{color:#000;background:#f5f5f5}
.header-utils{display:flex;align-items:center;gap:calc(8 * var(--u))}
.btn-util{font-size:calc(14 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u))}
.btn-header-register{font-size:calc(16 * var(--u));padding:calc(8 * var(--u)) calc(20 * var(--u));border:1px solid currentColor;border-radius:999px}
.btn-header-register i{margin-right:calc(4 * var(--u))}
.btn-header-login{font-size:calc(16 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u))}
.btn-header-login i{margin-right:calc(4 * var(--u))}
.mobile-menu-btn{display:none;flex-direction:column;gap:calc(5 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));background:none;border:none;cursor:pointer}
.mobile-menu-btn span{display:block;width:100%;height:2px;background:currentColor;border-radius:2px}

/* ===================== 1. HERO (풀스크린 다크 → 흰색+중앙이미지 모핑) ===================== */
.sec-hero{
    position:relative;width:100%;
    height:300vh;
}
.hero-stage{
    position:sticky;top:0;
    width:100%;
    height:100vh;          /* 예전 브라우저용 */
    height:100svh;         /* 폰 — 주소창이 접혀도 높이가 흔들리지 않는다 */
    overflow:hidden;
    background:#0a0e1a;
}

/* [KAIIA] 메인 첫 화면 관리 버튼 — 최고관리자에게만.
   어두운 첫 화면·흰 화면 양쪽에서 보이도록 반투명 흰 알약으로 둔다.
   모핑 요소가 아니라 사라지지 않는다. */
.hero-adm{
    position:absolute;z-index:30;
    top:calc(100 * var(--u));right:calc(48 * var(--u));
    display:inline-flex;align-items:center;
    height:calc(36 * var(--u));padding:0 calc(16 * var(--u));
    background:rgba(255,255,255,.85);border:1px solid rgba(36,36,36,.18);
    border-radius:calc(18 * var(--u));
    font-size:calc(14 * var(--u));font-weight:600;color:#222;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hero-adm:hover{background:#fff;border-color:#0069b4;color:#0069b4}
@media (max-width:1024px){
    .hero-adm{top:70px;right:16px;height:32px;padding:0 12px;font-size:12px}
}

/* 흰색 배경 (opacity로 전환) */
.hero-bg-white{
    position:absolute;inset:0;
    background:#fff;z-index:0;
    opacity:0;
}

/* 이미지: 풀스크린 → 중앙 박스 모핑 */
.hero-morph-img{
    position:absolute;
    top:0;left:0;width:100%;height:100%;
    z-index:1;overflow:hidden;
}
.hero-morph-img img{
    width:100%;height:100%;object-fit:cover;
}

/* 다크 오버레이 */
.hero-overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,.42);z-index:2;
}

/* 네비게이션 — 항상 상단 고정, 스크롤 시 blur 추가 */
.hero-nav{
    position:fixed;top:0;left:0;width:100%;
    z-index:100;height:var(--hh);
}
/* scrolled 클래스는 더 이상 별도 스타일 없음 — on-hero 여부로만 전환 */
.hero-nav .wrap{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;height:var(--hh);
}
.hn-logo{height:calc(25 * var(--u));transition:filter .3s}
.hn-gnb{display:flex;gap:calc(40 * var(--u));justify-self:center}
.hn-item{position:relative}

/* ---------- 메뉴 아래로 펼쳐지는 하위 메뉴 ----------
   서브페이지의 칩(.sub-chip)과 같은 결로 맞춘다 —
   글자는 읽히는 회색, 지금 자리는 파랑, 가리키면 연한 파랑 바탕. */
.hn-drop{
    position:absolute;top:calc(100% + 14 * var(--u));left:50%;
    transform:translateX(-50%) translateY(calc(-6 * var(--u)));
    min-width:calc(168 * var(--u));padding:calc(8 * var(--u)) 0;
    background:#fff;border:1px solid rgba(36,36,36,.12);border-radius:calc(4 * var(--u));
    box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.08);
    opacity:0;visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
/* 메뉴와 상자 사이 틈에서 닫히지 않도록 보이지 않는 다리를 놓는다 (위 간격과 같은 높이) */
.hn-drop::before{content:'';position:absolute;left:0;right:0;top:calc(-14 * var(--u));height:calc(14 * var(--u))}
.hn-item:hover .hn-drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.hn-drop a{display:block;position:relative;padding:calc(11 * var(--u)) calc(20 * var(--u));
    font-size:calc(15 * var(--u));font-weight:400 !important;color:#555 !important;
    white-space:nowrap;transition:background .18s,color .18s}
.hn-drop a:hover{background:#f6f8fa;color:#0069b4 !important}
/* 지금 보고 있는 자리는 따로 표시하지 않는다 — 서브페이지의 칩이 이미 알려 준다 */
.hn-gnb a{font-size:calc(16 * var(--u));font-weight:300;transition:color .3s,opacity .2s}
.hn-gnb a.on{font-weight:500}
.hn-gnb a:hover{opacity:.7}
.hn-btns{display:flex;gap:calc(12 * var(--u));justify-self:end}
.hn-reg{font-size:calc(15 * var(--u));padding:calc(7 * var(--u)) calc(22 * var(--u));border:1px solid;border-radius:999px;transition:all .3s}
.hn-reg:hover{opacity:.7}
.hn-reg i,.hn-log i{margin-right:calc(5 * var(--u))}
.hn-log{font-size:calc(15 * var(--u));padding:calc(7 * var(--u)) calc(14 * var(--u));transition:color .3s}

/* 히어로 위: 흰색 */
.hero-nav.on-hero .hn-logo{filter:brightness(0) invert(1)}
.hero-nav.on-hero .hn-gnb a{color:#fff}
.hero-nav.on-hero .hn-reg{color:#fff;border-color:rgba(255,255,255,.6)}
.hero-nav.on-hero .hn-log{color:#fff}

/* 히어로 밖: 검정 + 흰 배경 */
.hero-nav:not(.on-hero) .hn-logo{filter:none}
.hero-nav:not(.on-hero) .hn-gnb a{color:#000}
.hero-nav:not(.on-hero) .hn-reg{color:#000;border-color:#000}
.hero-nav:not(.on-hero) .hn-log{color:#000}
.hero-nav:not(.on-hero){background:#fff}

/* ===================== 모바일 GNB (햄버거 + 우측 서랍) ===================== */
.hn-burger{display:none;position:relative;width:calc(26 * var(--u));height:calc(20 * var(--u));padding:0;border:0;background:none;cursor:pointer}
.hn-burger span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:#000;transition:background .3s}
.hn-burger span:nth-child(1){top:0}
.hn-burger span:nth-child(2){top:calc(9 * var(--u))}
.hn-burger span:nth-child(3){top:calc(18 * var(--u))}
.hero-nav.on-hero .hn-burger span{background:#fff}

/* 서랍 — 우측에서 밀려 들어옴 */
.mnav-dim{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mnav-dim.is-open{opacity:1;visibility:visible}

.mnav{position:fixed;top:0;right:0;z-index:1101;width:min(82vw,calc(340 * var(--u)));height:100%;background:#fff;
    display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
    box-shadow:-8px 0 24px rgba(0,0,0,.12)}
.mnav.is-open{transform:translateX(0)}

.mnav-top{flex:none;display:flex;align-items:center;justify-content:space-between;
    height:var(--hh);padding:0 calc(24 * var(--u));border-bottom:1px solid #eee}
.mnav-logo{height:calc(22 * var(--u))}
.mnav-close{position:relative;width:calc(24 * var(--u));height:calc(24 * var(--u));padding:0;border:0;background:none;cursor:pointer}
.mnav-close span{position:absolute;left:1px;top:calc(11 * var(--u));width:calc(22 * var(--u));height:2px;border-radius:2px;background:#000}
.mnav-close span:nth-child(1){transform:rotate(45deg)}
.mnav-close span:nth-child(2){transform:rotate(-45deg)}

.mnav-list{flex:1;padding:calc(8 * var(--u)) 0}
.mnav-item{border-bottom:1px solid #f2f2f2}
.mnav-link{display:flex;align-items:center;justify-content:space-between;width:100%;
    padding:calc(18 * var(--u)) calc(24 * var(--u));border:0;background:none;cursor:pointer;text-align:left;
    font-family:var(--display);font-size:calc(17 * var(--u));font-weight:700;color:#000}
.mnav-link.on{color:#0b57d0}
/* 상단 닫기(×)와 같은 24px 박스로 잡아야 세로 축이 맞음 — 좌우 여백이 같아도 박스 크기가 다르면 어긋남 */
.mnav-arrow{position:relative;flex:none;width:calc(24 * var(--u));height:calc(24 * var(--u))}
.mnav-arrow::before{content:'';position:absolute;left:50%;top:50%;width:calc(8 * var(--u));height:calc(8 * var(--u));
    border-right:2px solid #bbb;border-bottom:2px solid #bbb;
    transform:translate(-50%,-70%) rotate(45deg);transition:transform .3s}
.mnav-link[aria-expanded="true"] .mnav-arrow::before{transform:translate(-50%,-30%) rotate(-135deg)}

/* 0fr → 1fr 로 자동 높이를 부드럽게 펼침 */
.mnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.mnav-item.is-open .mnav-sub{grid-template-rows:1fr}
.mnav-sub-inner{overflow:hidden;background:#fafafa}
.mnav-sub a{display:block;padding:calc(12 * var(--u)) calc(24 * var(--u));font-size:calc(15 * var(--u));color:#777}
.mnav-sub a:first-child{padding-top:calc(16 * var(--u))}
.mnav-sub a:last-child{padding-bottom:calc(18 * var(--u))}

.mnav-btns{flex:none;display:flex;gap:calc(8 * var(--u));padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(28 * var(--u))}
.mnav-btn{flex:1;padding:calc(12 * var(--u)) 0;border-radius:999px;text-align:center;font-size:calc(15 * var(--u));background:var(--btn);color:#fff}
.mnav-btn-line{background:var(--btn-sub);color:var(--btn-text);border:1px solid var(--btn-line)}
.mnav-btn i{margin-right:calc(5 * var(--u))}

body.nav-open{overflow:hidden}

/* 좁아지면 PC 메뉴를 감추고 햄버거로 전환 */
@media (max-width:1024px){
    .hero-nav .wrap{display:flex;align-items:center;justify-content:space-between}
    .hn-gnb,.hn-btns{display:none}
    .hn-burger{display:block}
}

/* 모바일 — 메뉴가 햄버거로 접히므로 헤더를 낮춰 본문에 자리를 내준다.
   --hh 만 바꾸면 헤더 높이와 서브페이지 sticky 기준이 함께 따라온다. */
@media (max-width:768px){
    :root{--hh:56px}
    .hn-logo{height:20px}
    .hn-burger{width:24px;height:17px}
    .hn-burger span:nth-child(2){top:7.5px}
    .hn-burger span:nth-child(3){top:15px}
}

/* ---- 중앙 콘텐츠: 제목 + 설명 + 버튼 을 하나의 블록으로 관리 ---- */
.hero-title{
    position:absolute;z-index:5;
    top:45%;left:50%;transform:translate(-50%,-50%);
    font-size:calc(60 * var(--u));font-weight:800;color:#fff;
    text-align:center;white-space:nowrap;
}
/* 스크롤 시 사라지는 요소들 */
.hero-fade{transition:opacity .3s ease}
/* 세로 간격도 글자와 같은 기준을 써야 한다. px 로 고정하면 배율이 커질수록
   글자만 커지고 간격은 그대로여서 제목과 겹친다. */
.hero-desc{
    position:absolute;top:calc(45% + 50 * var(--u));left:50%;transform:translateX(-50%);
    font-family:var(--display);font-size:calc(18 * var(--u));font-weight:700;
    color:#fff;opacity:.7;text-align:center;line-height:1.42;
    width:90%;max-width:calc(600 * var(--u));z-index:5;
}
a.hero-more,a.hero-more:link,a.hero-more:visited,a.hero-more:active,a.hero-more:focus{
    position:absolute;top:calc(45% + 130 * var(--u));left:50%;transform:translateX(-50%);
    display:inline-block;padding:calc(14 * var(--u)) calc(44 * var(--u));font-size:calc(18 * var(--u));font-weight:700;
    color:#fff !important;background:rgba(255,255,255,.15);
    border:none !important;outline:none !important;border-radius:999px;z-index:5;
    -webkit-appearance:none;box-shadow:none !important;
    text-decoration:none !important;
}
a.hero-more:hover{background:rgba(255,255,255,.25)}

/* ---- 화살표: 세로 정중앙 ---- */
.hero-arr{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    width:calc(55 * var(--u));height:calc(55 * var(--u));
    background:none;border:0;outline:0;cursor:pointer;padding:0;
    -webkit-appearance:none;
}
.hero-arr img{width:calc(55 * var(--u));height:calc(55 * var(--u));display:block}
.hero-arr:hover{opacity:.8}
.hero-arr-l{left:calc(60 * var(--u))}
.hero-arr-r{right:calc(60 * var(--u))}

/* ---- 사이드 텍스트: 화살표 옆, 세로 정중앙, opacity 50% ---- */
.hero-info-l,.hero-info-r{
    position:absolute;top:50%;transform:translateY(-50%);z-index:5;
    font-family:var(--display);font-size:calc(18 * var(--u));font-weight:700;
    color:#fff;opacity:.5;line-height:1.42;
}
/* 좌우 여백을 헤더·본문과 같은 기준선(--wrap)에 맞춘다.
   따로 130px 을 주면 로고·메뉴와 세로선이 어긋나 화면 끝에 붙은 것처럼 보인다.
   폭을 제한해 두지 않으면 슬라이드 문구가 길 때 가운데까지 밀고 들어온다. */
.hero-info-l,.hero-info-r{max-width:calc(300 * var(--u))}
.hero-info-l{left:calc((100% - var(--wrap)) / 2)}
.hero-info-r{right:calc((100% - var(--wrap)) / 2);text-align:right}

/* 라이트 전용 설명 (페이드인, 이미지 바로 아래) */
.hero-light-desc{
    position:absolute;z-index:5;
    top:68%;left:50%;transform:translateX(-50%);
    font-family:var(--display);font-size:calc(18 * var(--u));font-weight:700;
    color:#666;text-align:center;line-height:1.42;
    width:90%;max-width:calc(900 * var(--u));
    opacity:0;
}

/* 슬라이드 */
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s;z-index:0}
.hero-slide.active{opacity:1}

/* 흰색 레이어 내부 스타일 */
.hw-nav{border-bottom:1px solid #e8e8e8}
.hw-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:calc(72 * var(--u))}
.hw-logo{height:calc(28 * var(--u))}
.hw-gnb{display:flex;gap:calc(36 * var(--u))}
.hw-gnb a{font-size:calc(17 * var(--u));font-weight:400;color:#000}
.hw-gnb a.on{font-weight:600}
.hw-btns{display:flex;gap:calc(8 * var(--u))}
.hw-reg{font-size:calc(16 * var(--u));padding:calc(8 * var(--u)) calc(20 * var(--u));border:1px solid #000;border-radius:999px;color:#000}
.hw-reg i,.hw-log i{margin-right:calc(4 * var(--u))}
.hw-log{font-size:calc(16 * var(--u));padding:calc(8 * var(--u)) calc(16 * var(--u));color:#000}

.hw-body{text-align:center;padding:calc(80 * var(--u)) calc(40 * var(--u)) calc(100 * var(--u))}
.hw-body h2{font-size:calc(60 * var(--u));font-weight:800;line-height:1.2;margin-bottom:calc(80 * var(--u))}
.hw-img{max-width:calc(1000 * var(--u));margin:0 auto calc(20 * var(--u));overflow:hidden}
.hw-img img{width:100%;height:calc(220 * var(--u));object-fit:cover}
.hw-body p{font-family:var(--display);font-size:calc(18 * var(--u));font-weight:700;color:#666;line-height:1.42}

/* 히어로 다음 섹션 스냅 */
.sec-hero + .sec-partners{
    scroll-snap-align:start;
}

/* ===================== 3. 협력사 ===================== */
.sec-partners{background:#fff;height:100vh;height:100svh;
    overflow:hidden;display:flex;flex-direction:column}
.partners-head{width:var(--wrap);margin:0 auto;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(20 * var(--u))}
.partners-title{font-size:calc(60 * var(--u));font-weight:700;line-height:1.2;padding:calc(120 * var(--u)) 0 calc(60 * var(--u));
    text-align:left}
/* 협력사 관리 버튼 — 최고관리자에게만 (일반 방문자에겐 안 보임) */
.partners-adm{flex:none;margin-bottom:calc(66 * var(--u));display:inline-flex;align-items:center;
    height:calc(38 * var(--u));padding:0 calc(18 * var(--u));
    background:#f4f6f8;border:1px solid rgba(36,36,36,.12);border-radius:calc(19 * var(--u));
    font-size:calc(14 * var(--u));font-weight:600;color:#333;text-decoration:none}
.partners-adm:hover{border-color:#0069b4;color:#0069b4}
.partners-row{display:flex;width:100%;flex:1}
.p-card{position:relative;flex:1;display:block;background-size:cover;background-position:center;overflow:visible;min-width:0;transition:flex .5s cubic-bezier(.16,1,.3,1)}
.p-card-big{flex:5}
.p-dim{position:absolute;inset:0;background:rgba(0,0,0,.3);transition:background .5s}
.p-card-big .p-dim{background:rgba(0,0,0,.1)}
.p-card .p-name{position:relative;z-index:1;display:block;padding:calc(40 * var(--u)) calc(36 * var(--u));font-size:calc(20 * var(--u));font-weight:700;color:#fff}
.p-txt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:calc(60 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)) calc(30 * var(--u))}
.p-card:first-child .p-txt{padding-left:calc(154 * var(--u))}
.p-txt .p-name{padding:0;font-size:calc(20 * var(--u));font-weight:700;margin-bottom:calc(12 * var(--u))}
.p-txt strong{font-size:calc(30 * var(--u));font-weight:600;color:#fff;opacity:0;transition:opacity .4s;white-space:nowrap;overflow:hidden}
.p-txt p{font-size:calc(18 * var(--u));font-weight:500;color:#fff;line-height:1.42;max-width:calc(403 * var(--u));margin-top:calc(40 * var(--u));opacity:0;transition:opacity .4s}

/* 펼쳐진 카드만 상세 텍스트 보임 */
.p-card-big .p-txt strong,
.p-card-big .p-txt p{opacity:1}

/* ===================== 4~8. BUSINESS 전체 ===================== */
.sec-biz-area{background:#fff;height:500vh}

/* sticky 무대 — 뷰포트에 고정, 카드+글자 모두 이 안 */
.biz-stage{
    position:sticky;top:0;
    height:100vh;
    height:100svh;         /* 폰에서 무대 높이가 출렁이지 않게 */
    overflow:hidden;background:#fff;
}

/* 중앙 큰 글자 — 이미지 겹침 시 색상반전 */
.biz-word{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--display);font-size:calc(310 * var(--u));font-weight:600;
    color:#fff;letter-spacing:calc(-7.5 * var(--u));white-space:nowrap;
    opacity:0;
    z-index:3;pointer-events:none;
    mix-blend-mode:difference;
}

/* 카드 — 글자 뒤로 지나감 */
.biz-item{
    position:absolute;top:0;left:0;width:100%;height:100%;
    z-index:1;will-change:transform;
}

.biz-meta{position:absolute;top:12vh;z-index:2}
.biz-meta strong{display:block;font-family:var(--display);font-size:calc(26 * var(--u));font-weight:700;margin-bottom:calc(6 * var(--u))}
.biz-meta span{display:block;font-family:var(--display);font-size:calc(15 * var(--u));font-weight:500;color:#999;line-height:1.4}
/* 글자는 항상 이미지의 왼쪽 가장자리에 정렬 */
.biz-meta-r{left:calc(92% - 31vw);text-align:left}
.biz-meta-l{left:8%;text-align:left}

.biz-photo{position:absolute;top:21vh;z-index:1;width:31vw;height:calc(31vw * 1.19)}
.biz-photo img{width:100%;height:100%;object-fit:cover}
.biz-photo-r{right:8%}
.biz-photo-l{left:8%}

/* ===================== 9. 회원사 ===================== */
.sec-members{padding:calc(200 * var(--u)) 8%;margin:0 auto;position:relative}
.sec-members h2{font-size:calc(60 * var(--u));font-weight:700;text-align:center;margin-bottom:calc(16 * var(--u))}
.members-sub{font-size:calc(18 * var(--u));color:#666;text-align:center;margin-bottom:calc(60 * var(--u))}
/* --ms-air 는 카드 그림자가 놓일 여유다.
   슬라이더는 옆 쪽을 잘라내야 해서 overflow 를 hidden 으로 둘 수밖에 없는데,
   그대로 두면 카드 그림자가 네 변에서 잘려 카드가 잘린 것처럼 보인다.
   여유를 안쪽에 만들고 같은 크기의 음수 margin 으로 되돌려,
   카드가 놓이는 자리와 차지하는 높이는 그대로 두면서 그림자 자리만 얻는다. */
.members-slider{position:relative;--ms-air:calc(26 * var(--u))}
/* 위아래 여유는 .ms-view 의 padding 이 맡는다 */
.ms-view{overflow:hidden;padding:var(--ms-air) 0;
    margin:calc(-1 * var(--ms-air)) calc(130 * var(--u) - var(--ms-air))}
/* 쪽을 옆으로 밀어 보여 준다 — 한 쪽이 통째로 보이고 나머지는 옆에 대기한다 */
.ms-track{display:flex;transition:transform .45s ease}
.ms-page{flex:0 0 100%;min-width:100%}
/* 넘길 것이 없으면 화살표 자리를 비워 가운데로 모은다 */
.members-slider.is-single .ms-view{margin:calc(-1 * var(--ms-air))}
/* 좌우 여유는 .ms-grid 가 맡는다 — .ms-view 에 좌우 padding 을 주면
   잘라내는 경계가 그만큼 밀려 다음 쪽의 첫 카드가 삐져나와 보인다 */
.ms-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16 * var(--u));
    padding:0 var(--ms-air)}
.ms-logo{background:#fff;border:none;border-radius:calc(12 * var(--u));height:calc(90 * var(--u));display:flex;align-items:center;justify-content:center;padding:calc(14 * var(--u));box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ms-logo img{width:100%;height:100%;object-fit:contain}
/* 로고를 아직 안 올린 회원사는 회사명을 대신 넣는다 (회원사 현황 카드와 같은 방식) */
/* 로고를 아직 안 올린 회원사는 회사명이 대신 나온다.
   예전 색(#b5b8bb)은 흰 바탕에서 대비가 2.2:1 밖에 안 되어 폰에서 거의 읽히지 않았다.
   회사명은 로고를 대신하는 자리라 오히려 또렷해야 한다. */
.ms-name{font-size:calc(16 * var(--u));font-weight:700;color:#6b7075;text-align:center;
    word-break:keep-all;line-height:1.4}
.ms-logo{transition:box-shadow .2s,transform .2s}
.ms-logo:hover{box-shadow:0 calc(6 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.12);
    transform:translateY(calc(-2 * var(--u)))}
.ms-arr{position:absolute;top:50%;transform:translateY(-50%);width:calc(55 * var(--u));height:calc(55 * var(--u));background:none;border:0;outline:0;cursor:pointer;padding:0;-webkit-appearance:none;z-index:2}
.ms-arr-l{left:0}
.ms-arr-r{right:0}
.ms-arr img{width:calc(55 * var(--u));height:calc(55 * var(--u));display:block;filter:brightness(0);opacity:.2}
.ms-arr:hover img{opacity:.45}
.ms-dots{display:flex;justify-content:center;gap:calc(8 * var(--u));margin-top:calc(80 * var(--u))}
.ms-dots span,
.ms-dots button{width:calc(10 * var(--u));height:calc(10 * var(--u));padding:0;border:0;
    border-radius:calc(5 * var(--u));background:#ddd;cursor:pointer;transition:all .3s}
.ms-dots span.active,
.ms-dots button.active{width:calc(28 * var(--u));background:#222}

/* ===================== 10. KAIIA GRID ===================== */
.sec-grid{padding:calc(260 * var(--u)) 0 calc(120 * var(--u));background:#fff}
.sec-grid .wrap{display:flex;gap:8%;align-items:flex-start}
/* '인공지능 생태계를 선도하는' 이 한 줄에 들어갈 만큼은 준다.
   41.4% 였을 때 딱 1px 이 모자라 '선도하 / 는' 으로 갈렸다. */
.grid-left{flex-shrink:0;width:46%;padding-top:0}
/* 한국어는 그냥 두면 어절 한가운데서도 줄이 갈린다('선도하 / 는').
   낱말 단위로만 넘기도록 keep-all 을 준다. */
.grid-left h2{font-family:var(--display);font-size:calc(60 * var(--u));font-weight:800;line-height:calc(80 * var(--u));margin-bottom:0;word-break:keep-all}
/* '협회 가입하기'(메인 · 설립목적)는 검정을 그대로 두고 호버도 두지 않는다.
   큰 제목과 짝을 이루는 브랜딩 자리라, 색이 변하면 제목과 따로 놀고 힘이 빠진다.
   화면 안에서 무엇을 고를지 견주는 단추가 아니므로 반응이 없어도 된다. */
.btn-join{display:inline-flex;align-items:center;gap:calc(10 * var(--u));padding:calc(14 * var(--u)) calc(24 * var(--u));font-size:calc(16 * var(--u));font-weight:600;color:#fff;background:#000;border-radius:999px;margin-top:calc(63 * var(--u))}
.btn-join-icon{width:calc(16 * var(--u));height:calc(16 * var(--u))}

.grid-right{flex:1;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:calc(16 * var(--u))}
/* 색이 서서히 바뀌도록 background-color 를 전환 목록에 넣는다.
   빠져 있으면 호버에 색만 툭 바뀌어 다른 칸들과 결이 달라 보인다. */
.gc{position:relative;background:#f5f5f5;border-radius:calc(20 * var(--u));padding:calc(22 * var(--u));overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:background-color .25s ease,transform .25s,box-shadow .25s}
.gc:hover{background-color:#ebebeb}
.gc-about:hover{background-color:#f0f0f0}
.gc b{font-family:var(--display);font-weight:800;color:#000;display:block;margin-bottom:calc(4 * var(--u))}
.gc span{font-size:calc(18 * var(--u));font-weight:700;color:#7b7b7b}
.gc-bg{position:absolute;pointer-events:none;opacity:.35}
.gc-about .gc-bg{width:108%;bottom:-27%;right:-22%}
.gc-biz .gc-bg{width:44%;top:26%;right:-1%;bottom:auto}
.gc-mem .gc-bg{width:48%;bottom:-22%;right:3%}
.gc-join .gc-bg{width:57%;bottom:-30%;right:-11%}

.gc-about{grid-row:1/3;grid-column:1/3;border-radius:calc(10 * var(--u));background-color:#fff;background-image:radial-gradient(circle,#c8c8c8 1.2px,transparent 1.2px);background-size:16px 16px}
.gc-about b{font-size:calc(110 * var(--u));line-height:1}
.gc-about span{margin-top:calc(28 * var(--u))}
.gc-biz{grid-row:1;grid-column:3/5}
.gc-biz b{font-size:calc(50 * var(--u));line-height:calc(74 * var(--u))}
.gc-news{grid-row:2;grid-column:3;aspect-ratio:1}
.gc-news b{font-size:calc(50 * var(--u));line-height:calc(74 * var(--u))}
.gc-news-photo{grid-row:2;grid-column:4;position:relative;border-radius:calc(20 * var(--u));overflow:hidden;padding:0;aspect-ratio:1}
.gc-news-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진 칸은 그림이 배경을 덮어 옆 칸들의 배경색 호버가 보이지 않는다.
   대신 덮개가 옅어지며 사진이 또렷해지게 해서 같은 결로 반응시킨다. */
.gc-news-overlay{position:absolute;inset:0;background:rgba(0,0,0,.40);display:flex;flex-direction:column;justify-content:space-between;padding:calc(22 * var(--u));color:#fff;transition:background-color .25s ease}
.gc-news-photo:hover .gc-news-overlay{background-color:rgba(0,0,0,.28)}
.gc-news-overlay p{font-size:calc(18 * var(--u));font-weight:500;line-height:1.42}
.gc-news-overlay i{align-self:flex-end;font-size:calc(14 * var(--u))}
/* 관리자에게만 보이는 카드 수정 단추 (메인 News 카드) */
.gc-news-edit{position:absolute;top:calc(14 * var(--u));left:calc(14 * var(--u));z-index:2;
    display:inline-flex;align-items:center;height:calc(28 * var(--u));padding:0 calc(12 * var(--u));
    background:rgba(255,255,255,.9);border-radius:999px;
    font-size:calc(13 * var(--u));font-weight:600;color:#0069b4;cursor:pointer;opacity:.85;transition:opacity .2s}
.gc-news-photo:hover .gc-news-edit{opacity:1}
.gc-mem{grid-row:3;grid-column:1/3}
.gc-mem b{font-size:calc(50 * var(--u));line-height:calc(74 * var(--u))}
.gc-join{grid-row:3;grid-column:3/5}
.gc-join b{font-size:calc(50 * var(--u));line-height:calc(74 * var(--u))}

/* ===================== 11. NOTICE ===================== */
.sec-notice{padding:calc(100 * var(--u)) 0 calc(120 * var(--u));background:#f3f3f3}
.notice-h{font-size:calc(60 * var(--u));font-weight:700;text-align:center;margin-bottom:calc(80 * var(--u))}
.notice-sub{font-family:var(--display);font-size:calc(30 * var(--u));font-weight:700;margin-bottom:calc(32 * var(--u))}

.n-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(21 * var(--u))}
.n-card{background:#fff;border-radius:calc(20 * var(--u));padding:calc(29 * var(--u)) calc(31 * var(--u));display:flex;flex-direction:column;min-height:calc(291 * var(--u));
    border:1px solid rgba(36,36,36,.08);
    transition:border-color .25s}
/* 테두리에만 색이 들어온다 — 카드를 띄우거나 그림자를 앉히지 않는다 */
.n-card:hover{border-color:#0069b4}
.n-card em{font-style:normal;font-size:calc(14 * var(--u));font-weight:500;color:#666;margin-bottom:calc(24 * var(--u));display:block;line-height:calc(25.6 * var(--u))}
.n-card h4{font-size:calc(30 * var(--u));font-weight:700;line-height:calc(36 * var(--u));flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.n-card a{font-size:calc(16 * var(--u));font-weight:500;color:#666;margin-top:calc(20 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u))}
.n-card-arrow{width:calc(25 * var(--u));height:calc(25 * var(--u))}

.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(21 * var(--u))}
/* 글 카드는 어디서나 테두리에만 색이 들어온다 (.n-card · .nw-card · .mbl-card 와 같은 규칙) */
.ai-card{border-radius:calc(20 * var(--u));overflow:hidden;background:#fff;
    display:flex;flex-direction:column;
    border:1px solid rgba(36,36,36,.08);
    transition:border-color .25s}
.ai-card:hover{border-color:#0069b4}
.ai-top{background:#fff;padding:calc(29 * var(--u)) calc(31 * var(--u))}
.ai-top em{font-style:normal;font-size:calc(14 * var(--u));font-weight:500;color:#666;display:block;margin-bottom:calc(32 * var(--u));line-height:calc(25.6 * var(--u))}
/* 제목 자리를 늘 두 줄로 잡는다 —
   줄 수에 따라 위 칸 높이가 달라지면 옆 카드끼리 사진 시작 높이가 어긋난다.
   두 줄이 넘는 제목은 잘라 낸다. */
.ai-top h4{font-size:calc(30 * var(--u));font-weight:700;line-height:calc(36 * var(--u));margin-bottom:calc(32 * var(--u));
    min-height:calc(72 * var(--u));
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ai-top span{font-size:calc(16 * var(--u));font-weight:500;color:#666}
/* 사진이 남은 자리를 채워 카드 아래에 흰 여백이 남지 않게 한다 */
.ai-img{flex:1;min-height:calc(366 * var(--u));overflow:hidden}
.ai-img img{width:100%;height:100%;object-fit:cover}

/* ===================== FOOTER ===================== */

.kaiia-footer{background:#f7f8f9;border-top:1px solid #e0e0e0}
/* 전 페이지 공통 푸터 — 좌우 여백을 본문(12%)과 같은 비율로 맞춤 */
.footer-inner{margin:0 auto;padding:calc(100 * var(--u)) 11.98%}
/* 위 칸 — 여러 줄인 주소·연락처와 로고가 마주 본다.
   로고는 글 덩어리 한가운데에 맞춘다 (위나 아래에 붙이면 한쪽이 떠 보인다) */
.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:calc(56 * var(--u));border-bottom:1px solid #ddd}
.footer-links{display:flex;gap:calc(40 * var(--u))}
.footer-link{font-size:calc(15 * var(--u));color:#000}
.footer-link.privacy{font-weight:400}
.footer-logo img{height:calc(28 * var(--u))}
/* 아래 칸 — 둘 다 한 줄이라 가운데로 맞춘다 */
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:calc(56 * var(--u))}
.footer-address,.footer-contact{font-size:calc(15 * var(--u));line-height:calc(30 * var(--u));color:rgba(0,0,0,.6)}
/* 메일 주소 링크 — 옆 글과 같은 색으로 두고, 누를 수 있다는 것만 밑줄로 알린다 */
.footer-contact a{color:inherit;text-decoration:underline;text-underline-offset:calc(3 * var(--u))}
.footer-contact a:hover{color:var(--btn)}
.footer-copy{font-size:calc(13 * var(--u));font-weight:300;color:rgba(0,0,0,.4)}

/* ===================== MISC ===================== */
#container_title{padding:calc(var(--hh) + 40px) 0 30px;text-align:center;font-size:calc(28 * var(--u));font-weight:800}
#wrapper{padding-top:var(--hh);min-height:calc(100vh - 200px)}
body.index-page #wrapper{padding-top:0}

#hd_pop{position:fixed;top:var(--hh);left:0;width:100%;z-index:999;pointer-events:none}
#hd_pop>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
#hd_pop .hd_pops{pointer-events:auto}

/* Login */
.kaiia-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f3f3f3;padding:calc(var(--hh) + 40px) 20px 40px}
.kaiia-login-box{width:100%;max-width:calc(420 * var(--u));background:#fff;border-radius:calc(16 * var(--u));padding:calc(48 * var(--u)) calc(40 * var(--u));box-shadow:0 4px 24px rgba(0,0,0,.06);text-align:center}
.kaiia-login-logo{margin-bottom:calc(36 * var(--u))}
.kaiia-login-logo .logo-symbol{font-family:var(--display);font-size:calc(32 * var(--u));font-weight:900;color:#000;letter-spacing:calc(3 * var(--u));display:block;margin-bottom:calc(4 * var(--u))}
.kaiia-login-logo .logo-text{font-size:calc(13 * var(--u));color:#7b7b7b}
.kaiia-login-box .login-input{width:100%;padding:calc(14 * var(--u)) calc(16 * var(--u));font-size:calc(14 * var(--u));border:1px solid #e8e8e8;border-radius:calc(8 * var(--u));margin-bottom:calc(12 * var(--u));outline:none;font-family:var(--sans)}
.kaiia-login-box .login-input:focus{border-color:#000}
.kaiia-login-box .login-btn{width:100%;padding:calc(14 * var(--u));font-size:calc(15 * var(--u));font-weight:700;color:#fff;background:var(--btn);border:none;border-radius:calc(8 * var(--u));cursor:pointer;margin-top:calc(8 * var(--u));font-family:var(--sans);transition:background .2s}
.kaiia-login-box .login-btn:hover{background:var(--btn-on)}
.kaiia-login-links{margin-top:calc(20 * var(--u));display:flex;justify-content:center;gap:calc(16 * var(--u));font-size:calc(13 * var(--u));color:#666}
.kaiia-login-links a{color:#666}
.kaiia-login-links .link-register{color:#000;font-weight:600}

/* 메인 아래쪽 — 아직 올라온 글이 없을 때 */
.n-empty{grid-column:1 / -1;padding:calc(60 * var(--u)) 0;
    text-align:center;font-size:calc(17 * var(--u));color:#888}
@media (max-width:1024px){ .n-empty{padding:36px 0;font-size:14px} }

/* 첫 화면 슬라이드 — 배경 사진을 겹쳐 두고 지금 것만 보여 준다 */
.hero-morph-img .hero-slide{position:absolute;left:0;top:0;width:100%;height:100%;
    object-fit:cover;opacity:0;transition:opacity .7s ease}
.hero-morph-img .hero-slide.active{opacity:1}
/* 좌우 문구에 링크가 있으면 눌러 들어갈 수 있게 */
.hero-info-l a,
.hero-info-r a{color:inherit;text-decoration:none}
.hero-info-l a:hover,
.hero-info-r a:hover{text-decoration:underline;text-underline-offset:calc(4 * var(--u))}

/* ─────────────────────────────────────────────
   [스크롤 인터랙션] 폰에서 뚝뚝 끊기지 않게

   스크롤에 맞춰 움직이는 요소는 그림을 매 프레임 다시 그린다.
   아래처럼 알려 두면 브라우저가 그 요소만 따로 떼어 그래픽 장치에 맡기므로
   손으로 밀 때도 부드럽게 따라온다. (마우스 휠은 원래 덜 티가 난다)

   will-change 는 메모리를 쓰므로 '실제로 움직이는 것'에만 붙인다.
   ───────────────────────────────────────────── */
.hero-morph-img,
.hero-title,
.hero-fade,
.hero-light-desc,
.hero-overlay,
.hero-bg-white,
.biz-item,
.biz-word,
.biz-photo,
.biz-meta,
[data-reveal],
[data-stagger] > *{
    will-change:transform, opacity;
    backface-visibility:hidden;      /* 글자 떨림 방지 */
}

/* 설립목적 — 스크롤에 맞춰 움직이는 것들 */
.fd-band,
.fd-copylayer,
.fd-slogan,
.fd-card,
.fd-deco-orb,
.fd-strategy-head,
.fd-acc-wrap,
.fd-vision-img{
    will-change:transform, opacity;
    backface-visibility:hidden;
}

/* 손으로 밀 때 관성이 자연스럽게 이어지도록 */
body{-webkit-overflow-scrolling:touch}

/* 움직임을 줄여 달라고 설정해 둔 분에게는 애니메이션을 끈다 (접근성) */
@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}