/* KAIIA Responsive — 메인페이지
   PC 는 스크롤 연동(sticky·모핑) 위주라 좁은 화면에서는 그 장치들을 풀고
   카카오 모바일처럼 "세로 1단 스택 + 풀블리드 + 넉넉한 여백" 으로 바꾼다.
   JS 가 inline transform/opacity 를 걸어두는 요소는 !important 로 눌러야 함. */

/* ===================== 태블릿 ===================== */
@media(max-width:1280px){
    .hero-title{font-size:48px}
    .biz-word{font-size:180px;letter-spacing:-4px}
    .partners-title,.sec-members h2,.notice-h,.grid-left h2{font-size:44px}
    .gc-about b{font-size:72px}
    .hero-info-l{left:60px}
    .hero-info-r{right:60px}
}
@media(max-width:1024px){
    .hero-title{font-size:40px}
    .biz-word{font-size:120px;letter-spacing:-3px}
    .partners-title,.sec-members h2,.notice-h,.grid-left h2{font-size:36px}
    .sec-grid .wrap{flex-direction:column;gap:32px}
    .grid-left{width:100%}
    .grid-right{grid-template-columns:repeat(3,1fr)}
    .gc-about{grid-row:auto;grid-column:1/4;min-height:180px}
    .gc-about b{font-size:56px}
    /* 좌우 70px 자리에서 그림자 여유(--ms-air)만큼 덜어낸다 — 카드 자리는 그대로다 */
    .ms-view{margin:calc(-1 * var(--ms-air)) calc(70px - var(--ms-air))}
    .hero-info-l,.hero-info-r{display:none}
}

/* ===================== 모바일 ===================== */
@media(max-width:768px){
    .wrap{padding:0 20px}

    /* ---- 1. 히어로 : 모핑 대신 풀블리드 세로 슬라이드 ----
       scroll-animation.js 가 모바일에서는 모핑을 건너뛰므로 인라인 스타일이 없다.
       헤더는 흰색으로 고정하고 히어로를 그 아래에서 시작시킴. */
    .hero-nav.on-hero{background:#fff}
    .hero-nav.on-hero .hn-logo{filter:none}
    .hero-nav.on-hero .hn-burger span{background:#000}

    .sec-hero{height:auto}
    .hero-stage{position:static;height:calc(100vh - var(--hh));margin-top:var(--hh);background:#0a0e1a}
    .hero-bg-white{display:none}
    .hero-morph-img img{width:100%;height:100%;object-fit:cover}
    .hero-overlay{background:rgba(0,0,0,.34)}

    /* [첫 화면 글 위계]
       카카오 모바일(kakaocorp.com/page)의 배너와 같은 층으로 맞춘다.
           제목 26px / 700 / 줄높이 1.31
           설명 16px / 400 / 줄높이 1.75
           단추 14px / 400
       예전에는 22 / 13 / 13 이라 제목과 설명 차이가 뚜렷하지 않았다.

       글자를 키우면 줄 수가 달라지므로 좌표(top)로 배치할 수 없다.
       그래서 제목·설명·단추를 세로로 흐르게 두고 무대 위쪽에 한 덩어리로 놓는다.
       (좌표로 두면 제목이 두 줄이 되는 순간 설명 위로 겹친다) */
    /* flex 로 두면 안 된다 — flex 상자 안에서는 절대배치 자식의 '흐름상 자리'가
       무조건 상자 맨 위로 잡혀, 아래 화살표가 단추 줄이 아니라 꼭대기에 붙는다.
       평범한 블록 흐름으로 두어야 화살표가 단추 다음 자리를 기준으로 삼는다. */
    .hero-stage{display:block;position:relative;padding:26px 20px 0}
    .hero-morph-img,.hero-overlay,.hero-bg-white{position:absolute;inset:0}
    .hero-title,.hero-desc,
    a.hero-more,a.hero-more:link,a.hero-more:visited{
        position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;z-index:2}

    .hero-title{width:auto;max-width:100%;text-align:left;white-space:normal;
        font-size:26px;font-weight:700;line-height:1.31;color:#fff;word-break:keep-all}
    .hero-desc{margin-top:14px;width:auto;max-width:100%;
        text-align:left;font-size:16px;font-weight:400;line-height:1.75;opacity:.88;
        word-break:keep-all}
    .hero-desc br{display:none}
    /* PC 규칙이 a.hero-more:link 까지 묶여 있어 같은 특이도로 맞춰야 이김.
       높이를 42px 로 못 박아 두는 것은 아래 화살표 위치 계산의 기준이 되기 때문이다. */
    a.hero-more,a.hero-more:link,a.hero-more:visited{
        display:inline-flex;align-items:center;height:42px;
        margin-top:22px;padding:0 22px;font-size:14px;font-weight:400}

    /* 슬라이드 화살표 — 단추와 같은 줄 오른쪽 끝.
       단추가 흐름 안으로 들어오면서 그 아래 y 좌표를 미리 알 수 없게 됐다.
       그래서 좌표를 적지 않고(top:auto) '흐름상 있었을 자리'를 그대로 쓴 뒤,
       단추 한 줄만큼 끌어올려 나란히 놓는다.
           끌어올릴 값 = 단추높이(42) - (단추높이 - 화살표높이)/2 = 42 - 4 = 38 */
    .hero-arr{display:flex;align-items:center;justify-content:center;
        position:absolute;top:auto;bottom:auto;transform:none;width:34px;height:34px;
        margin-top:-38px;background:rgba(255,255,255,.18);border-radius:50%;z-index:3}
    .hero-arr img{width:15px;height:15px}
    .hero-arr-l{left:auto;right:64px}
    .hero-arr-r{right:20px}
    .hero-light-desc{display:none}

    /* ---- 2. 협력사 : 접혀 있다가 스크롤에 따라 한 칸씩 펼쳐짐 ----
       PC 는 hover 로 넓어지지만 모바일엔 hover 가 없어 스크롤로 대체.
       접힘/펼침 높이를 고정해 두어 섹션 전체 높이는 변하지 않는다. */
    /* 섹션을 화면에 붙여둔 채 배너가 차례로 커지고, 다 지나가면 스크롤이 이어진다.
       섹션 높이(420vh)가 그 "제자리 스크롤" 구간을 만들어 줌 */
    .sec-partners{height:420vh;overflow:visible}
    .partners-title{width:auto;margin:0 20px;padding:56px 0 20px;font-size:28px;line-height:1.34}
    /* 카드 묶음을 화면 한가운데 놓는다.
       예전에는 화면 높이를 카드 넷이 남김없이 나눠 가지게 해서,
       펼쳐진 칸이 화면이 큰 폰일수록 끝없이 커졌다(852 짜리 폰에서 484px).
       사진 한 장이 화면을 다 덮으니 다음 칸이 있는 줄도 몰랐다.
       그래서 높이를 화면에 묶지 않고 고정값으로 두고, 남는 자리는 위아래로 나눈다. */
    /* 카드가 화면을 다 채우지 않게 되면서 위아래에 빈 자리가 생겼다.
       그 자리로 위에 있는 제목('KAIIA의 협력사 바로가기')이 스크롤되며 비쳐 보이므로
       바탕을 깔아 가린다 (섹션과 같은 흰색). */
    .partners-row{position:sticky;top:var(--hh);flex-direction:column;flex:none;
        justify-content:center;background:#fff;
        height:calc(100vh - var(--hh));height:calc(100svh - var(--hh))}
    /* 접힘 96 × 3 + 펼침 300 = 588px. 화면이 커도 이 크기를 지킨다. */
    .p-card{flex:0 0 96px !important;min-height:0;height:auto;
        transition:flex-basis .55s cubic-bezier(.16,1,.3,1)}
    .p-card.is-open{flex-basis:300px !important}
    .p-dim,.p-card-big .p-dim{background:rgba(0,0,0,.5)}
    .p-card.is-open .p-dim{background:rgba(0,0,0,.38)}
    .p-txt{height:100%;padding:26px 20px !important;justify-content:flex-start}
    .p-txt .p-name{font-size:14px;margin-bottom:4px}
    .p-txt strong{font-size:20px;white-space:normal;opacity:1}
    .p-txt p{margin-top:14px;font-size:14px;line-height:1.5;max-width:none;
        opacity:0;transition:opacity .4s}
    /* PC 는 첫 카드(.p-card-big)만 항상 펼쳐 보여주지만,
       모바일은 스크롤로 열린 카드 하나만 보여야 하므로 그 예외를 없앤다 */
    .p-card-big .p-txt p{opacity:0}
    .p-card.is-open .p-txt p{opacity:1}

    /* ---- 3. Business : PC 와 같은 sticky 스크롤 효과 유지, 크기만 축소 ----
       구간이 길면 카드 사이 빈 화면이 늘어지므로 500vh → 320vh 로 줄임 */
    .sec-biz-area{height:320vh}
    .biz-word{font-size:64px;font-weight:800;letter-spacing:-1.5px}
    /* 제목 · 설명 · 사진을 하나로 쌓아 간격을 똑같이 준다(절대배치로는 줄 수가 달라 어긋남).
       좌/우 배치는 margin 으로 뒤집음. */
    /* 사진 중앙을 카드 중앙에 고정 → 마지막에 멈췄을 때 사진과 큰 글자가 화면 중앙에서 딱 맞음.
       설명 글 줄 수가 달라도 사진 위치가 흔들리지 않는다(설명은 사진 위로 붙여 올림). */
    .biz-meta,.biz-photo{position:absolute;width:50vw}
    .biz-photo{top:50%;margin-top:-29.75vw;height:calc(50vw * 1.19)}   /* -높이의 절반 */
    .biz-meta{top:50%;margin-top:calc(-29.75vw - 10px);transform:translateY(-100%)}
    .biz-meta-l,.biz-photo-l{left:8%;right:auto}
    /* PC 규칙의 left 를 풀어 줘야 right 가 먹는다 (둘 다 있으면 left 가 이긴다) */
    .biz-meta-r,.biz-photo-r{right:8%;left:auto}
    .biz-meta strong{font-size:18px;margin-bottom:10px}
    .biz-meta span{font-size:12px;line-height:1.45;word-break:keep-all}  /* 단어 단위로 줄바꿈 */

    /* ---- 4. 회원사 ---- */
    .sec-members{padding:72px 20px}
    .sec-members h2{font-size:28px;margin-bottom:10px}
    .members-sub{font-size:15px;margin-bottom:32px}
    /* 좌우에 남은 자리가 20px 뿐이라 그림자 여유를 10px 로 줄인다 */
    .members-slider{--ms-air:10px}
    .ms-view{margin:calc(-1 * var(--ms-air))}
    .ms-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .ms-logo{height:76px;padding:12px}
    .ms-arr{display:none}
    .ms-dots{margin-top:32px}

    /* ---- 5. 그리드 ---- */
    .sec-grid{padding:64px 0 72px}
    .sec-grid .wrap{gap:28px}
    .grid-left h2{font-size:28px;line-height:1.34}
    /* 협회 가입 버튼은 우측 정렬 */
    .grid-left{display:flex;flex-direction:column;align-items:flex-start}
    .btn-join{align-self:flex-end;margin-top:24px;padding:12px 20px;font-size:15px}
    .grid-right{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:12px}
    .gc{padding:18px;border-radius:14px}
    .gc span{font-size:14px}
    .gc-about,.gc-biz,.gc-news,.gc-news-photo,.gc-mem,.gc-join{grid-row:auto;grid-column:auto}
    .gc-about{grid-column:1/3;min-height:150px;border-radius:14px}
    .gc-about b{font-size:44px}
    .gc-about span{margin-top:12px}
    /* 2열이면 마지막 줄에 Join 이 혼자 남아 짝이 안 맞음 → 가로로 채워 마무리 */
    .gc-join{grid-column:1/3;min-height:104px}
    .gc-biz,.gc-news,.gc-mem,.gc-news-photo{min-height:150px}
    .gc-news,.gc-news-photo{aspect-ratio:auto}
    .gc-biz b,.gc-news b,.gc-mem b,.gc-join b{font-size:26px;line-height:1.3}
    .gc-news-photo{border-radius:14px;padding:0}   /* 사진은 카드를 꽉 채워야 함 */
    .gc-bg{opacity:.22}                            /* 작은 칸에서 배경 아이콘이 과해 보임 */
    .gc-news-overlay{padding:16px}
    .gc-news-overlay p{font-size:14px}

    /* ---- 6. Notice ---- */
    .sec-notice{padding:64px 0 72px}
    .notice-h{font-size:30px;margin-bottom:36px}
    .notice-sub{font-size:20px;margin-bottom:18px}
    .notice-sub + .n-grid ~ .notice-sub,
    .sec-notice .notice-sub[style]{margin-top:56px !important}   /* 인라인 150px 를 눌러줌 */
    /* 공지사항 · AI news 는 2줄(2열) 배치 */
    .n-grid,.ai-grid{grid-template-columns:1fr 1fr;gap:10px}
    .n-card{min-height:auto;padding:16px 14px;border-radius:12px}
    .n-card em{font-size:12px;line-height:1.4;margin-bottom:8px}
    .n-card h4{font-size:15px;line-height:1.42}
    .n-card a{margin-top:12px;font-size:13px;gap:4px}
    .n-card-arrow{width:18px;height:18px}
    .ai-card{border-radius:12px}
    .ai-top{padding:16px 14px}
    .ai-top em{font-size:12px;line-height:1.4;margin-bottom:10px}
    /* 제목 두 줄 자리 — 글자 크기가 바뀌어도 따라오도록 em 으로 잡는다 (1.42 × 2줄) */
    .ai-top h4{font-size:15px;line-height:1.42;margin-bottom:10px;min-height:2.84em}
    .ai-top span{font-size:12px}
    .ai-img{height:auto;min-height:0;aspect-ratio:4/3}   /* 이미지 영역 가로4 : 세로3 */

    /* 터치 기기에서는 hover 잔상이 남아 눌린 것처럼 보임 → 각자 원래 색으로 되돌린다.
       (About 칸만 기본이 흰색이라 따로 적어 준다 — 회색으로 되돌리면 눌린 자국이 남는다) */
    .gc:hover{background-color:#f5f5f5}
    .gc-about:hover{background-color:#fff}
    .gc-news-photo:hover .gc-news-overlay{background-color:rgba(0,0,0,.40)}
    .n-card:hover,.ai-card:hover{border-color:rgba(36,36,36,.08)}

    /* ---- 7. 푸터 ---- */
    /* 모바일 순서 : 로고 → 주소·연락처 → 저작권 → 약관 링크(맨 아래).
       order 는 형제끼리만 통하므로, .footer-top 을 display:contents 로 풀어
       그 안의 로고·정보를 .footer-inner 의 직계 자식처럼 만든다. */
    .footer-inner{display:flex;flex-direction:column;padding:56px 20px}
    .footer-top{display:contents}
    .footer-logo{order:1}
    .footer-logo img{height:26px}
    /* 로고 → 정보 28 */
    .footer-info{order:2;padding-top:28px}
    /* 아래 칸 안에서는 저작권이 먼저, 약관 링크가 맨 뒤 */
    .footer-bottom{order:3;flex-direction:column;gap:0;align-items:flex-start;
        padding-top:20px;border-top:0}
    .footer-copy{order:1}
    .footer-links{order:2;gap:22px;margin-top:24px;
        padding-top:22px;border-top:1px solid #e2e4e6;align-self:stretch}

    /* 강조 위계 : 주소·연락처(본문) > 약관(보조 링크) > 저작권(가장 옅게) */
    .footer-address,.footer-contact{font-size:14px;line-height:1.7;color:rgba(0,0,0,.62)}
    .footer-address{margin-bottom:2px}
    .footer-copy{font-size:12px;font-weight:400;color:rgba(0,0,0,.38)}
    /* .footer-link.privacy 가 클래스 2개라 특이도가 높다 — 함께 지정해야 굵기가 먹는다 */
    .footer-link,.footer-link.privacy{font-size:14px;font-weight:500;color:rgba(0,0,0,.7)}
}

/* ===================== 소형 ===================== */
@media(max-width:480px){
    /* 첫 화면 — 위(768 블록)에서 좌표 배치를 걷어내고 흐름 배치로 바꿨으므로
       여기서도 top 을 다시 주면 안 된다. 주면 그만큼 아래로 밀려 사이가 벌어진다.
       크기만 한 단계씩 줄인다 (카카오 위계 26/16/14 → 좁은 화면 24/15/13). */
    .hero-title{font-size:24px}
    .hero-desc{font-size:15px}
    a.hero-more,a.hero-more:link,a.hero-more:visited{font-size:13px}
    .partners-title,.sec-members h2,.grid-left h2{font-size:25px}
    .biz-word{font-size:52px}
    .notice-h{font-size:27px}
    .p-card{flex-basis:88px !important}
    .p-card.is-open{flex-basis:270px !important}
    .n-card h4,.ai-top h4{font-size:14px}
    .ms-grid{gap:10px}
    .ms-logo{height:66px;padding:10px}
    .gc-about b{font-size:36px}
    .gc-biz b,.gc-news b,.gc-mem b,.gc-join b{font-size:22px}
    /* 높이를 고정하면 aspect-ratio 가 폭을 역산해 카드 밖으로 넘쳐 잘린다 → auto 유지 */
}