/* =========================================================
   ai_beta_responsive.css
   - PC(>1400) 디자인 유지
   - 1400px 이하 + 모바일 대응
   - 모션/등장 효과는 .js-motion-ready 일 때만
========================================================= */

/* ---- 모션(PC 디자인 변경 X) : 기본은 아무 효과 없음 ---- */
body.js-motion-ready .js-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
body.js-motion-ready .js-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 미디어 hover/클릭 “재생” 체감 개선(PC 디자인 유지) */
body.js-motion-ready .info_ul > li.media_li .cover-img {
  transition: opacity .85s ease;
}
body.js-motion-ready .info_ul > li.media_li.is-playing .cover-img {
  opacity: 0;
}

/* 버튼/카드 “딱딱함” 완화 (PC에서 눈에 띄는 디자인 변경은 없음) */
@media (prefers-reduced-motion: reduce) {
  body.js-motion-ready .js-reveal { transition: none !important; transform: none !important; }
}

/* =========================================================
   1400px 이하(노트북/작은 모니터)
   - 1920 고정폭 해제
   - 전체는 가운데 유지 + 여백만 안정화
========================================================= */
@media (max-width: 1400px) {

  /* 공통 컨테이너: 100%로 풀고 max-width로 제어 */
  .group_content .inner{
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* HERO(1920 고정 해제) */
  .group_content .top{
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* HERO 텍스트박스 너무 우측 밀림 방지 */
  .group_content .top .text_box{
    right: 20px;
    width: 560px;
    max-width: calc(100% - 40px);
  }

  /* HERO 비디오가 잘려 보이는 경우 최소 완화(위치만 살짝 안전하게) */
  .hero-video{
    right: 60px;
    width: 460px;
    max-width: 40vw;
  }

  /* INFO 영역: 기존 1180 유지하되 화면 좁으면 100% */
  .info_ul{
    width: 100% !important;
    max-width: 1180px;
  }
  .info_ul .text_li{ width: auto; }
  .info_ai{ width: auto; padding-left: 40px; }

  /* 제작 그리드(1500 고정 해제) */
  .ai_make_grid{
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* 하단 추가 박스들(1460/1500 고정 해제) */
  .ai_fact_box{
    width: 100% !important;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  .ai_usecase_inner{
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .ai_usecase_grid{
    width: 100% !important;
    max-width: 1400px;
  }

  /* 업로드 섹션 내부 폭(780 고정 유지하되 작은 화면 대응) */
  .ai_upload_section .inner{
    width: 100% !important;
    max-width: 780px;
    padding: 0 20px;
    box-sizing: border-box;
  }
}

/* =========================================================
   태블릿/모바일 (1024 이하)
========================================================= */
@media (max-width: 1024px) {

  /* HERO 높이: 고정 높이가 투박하게 느껴질 수 있어 자동으로 */
  .group_content .top{
    height: auto !important;
    padding-bottom: 24px;
  }

  .group_content .top .inner{
    min-height: 520px;
  }

  /* 텍스트 박스: absolute 유지하되, 모바일에서 겹침 방지 */
  .group_content .top .text_box{
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 0 16px;
    text-align: left;
  }

  /* HERO 비디오: 아래로 내려서 중앙 정렬 */
  .hero-video{
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto 18px;
    border-radius: 10px;
  }

  /* INFO: 2개를 세로 스택 */
  .info_ul{
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    width: 100% !important;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .info_ul > li.media_li{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/10;
  }
  .info_ul .text_li{
    width: 100% !important;
  }
  .info_ai{
    width: 100% !important;
    padding-left: 0 !important;
  }

  /* 제작 그리드 1열 */
  .ai_make_grid{
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100%;
    padding: 0px;
    box-sizing: border-box;
  }

  /* 팩트/유즈케이스 1열 */
  .ai_fact_box{
    width: 100% !important;
    max-width: 720px;
    padding: 20px;
    box-sizing: border-box;
  }
  .ai_fact_grid{
    grid-template-columns: 1fr !important;
  }
  .ai_fact_text{ height: auto !important; }

  .ai_usecase_inner{
    max-width: 720px;
    padding: 0 20px;
  }
  .ai_usecase_grid{
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  /* 업로드 박스 높이 축소 */
  .upload_editor_box{
    height: 420px !important;
  }

  /* 샘플 그리드도 모바일에서 보기 쉽게 */
  .sample_grid{
    max-width: 720px !important;
  }
}

/* =========================================================
   모바일 (768 이하)
========================================================= */
@media (max-width: 768px) {

  .h2_1{
    margin: 70px 0 !important;
    padding: 0 18px;
    box-sizing: border-box;
    font-size: 20px !important;
    line-height: 28px;
  }
  .h1_1{
    font-size: 20px !important;
  }

  .group_content .inner{
    padding: 0 10px !important;
  }

  .group_content .top .text_box h2{
    font-size: 26px !important;
  }
  .group_content .top .text_box p{
    font-size: 16px !important;
  }
  .group_content .top .text_box .desc{
    line-height: 26px !important;
    font-size: 13px !important;
  }

  .ai_make{
    padding-top: 50px !important;
  }
  .ai_make_head{
    margin: 50px 0 !important;
    padding: 0 16px !important;
  }
  .ai_make_head h2{
    font-size: 20px !important;
    line-height: 28px;
  }

  .ai_card{
    padding: 2px !important;
  }

  .ai_upload_section{
    padding: 38px 0 !important;
    border-bottom: 0px;
  }
  .ai_upload_section .inner{
    padding: 0 16px !important;
  }
  .ai_upload_title{
    font-size: 18px !important;
    margin-bottom: 22px !important;
  }

  .upload_editor_box{
    height: 360px !important;
    border-radius: 16px !important;
  }
  .btn_select_file{
    padding: 11px 22px !important;
    font-size: 15px !important;
  }
  .btn_submit_ai{
    padding: 16px 36px !important;
    font-size: 18px !important;
  }

  .queue_box{
    grid-template-columns: 1fr !important;
  }

  .sample_grid{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    padding: 10px;
  }
}

/* =========================================================
   초소형 (480 이하)
========================================================= */
@media (max-width: 480px) {
  .group_content .top .text_box{
    padding-top: 40px !important;
  }

  .upload_editor_box{
    height: 320px !important;
  }

  .history_item{ flex: 0 0 64px; }
  .history_thumb{ width: 64px; height: 64px; }
}
/* =========================================================
   1500px 이하: HERO(top) 완전 교체
   - 상단: 배경이미지(왼쪽 원본 느낌) + 텍스트 오버레이
   - 하단: hero-video를 박스 형태로 바로 아래에 재생
   - PC(>1500)는 기존 ai_beta.css 그대로 유지
========================================================= */
@media (max-width: 1500px){

  /* 컨테이너 폭: 1500 이하에서는 안전하게 100% */
  .group_content .inner{
    width: 100% !important;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* HERO 박스: 고정폭/고정높이 해제, 배경사진을 메인으로 */
  .group_content .top{
    width: 100% !important;
    height: auto !important;
    max-width: 1500px;
    margin: 0 auto;

    /* 기존 배경 유지하되, ‘사진이 주인공’ 되게 */
    background: #303030;
    background-image: url('/img/ai_back1.png') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center; /* ✅ 왼쪽 원본 느낌 */

    position: relative;
    overflow: hidden;

    /* 아래 비디오 박스 들어갈 공간 확보(텍스트+사진 영역) */
    padding-bottom: 26px;
  }

  /* 배경 위에 글씨 올릴 거라, 가독성용 딤(오버레이) */
  .group_content .top::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
      90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.40) 45%,
      rgba(0,0,0,.25) 100%
    );
    z-index: 1;
    pointer-events:none;
  }

  .group_content .top .inner{
    position: relative;
    z-index: 2; /* 오버레이 위 */
    height: auto !important;
    min-height: 520px; /* ✅ 상단 사진 영역 높이(원하면 조절) */
    padding-top: 64px;
    padding-bottom: 14px;
    box-sizing: border-box;
  }

  /* 텍스트: 이제 사진 위에 올림(absolute 유지) */
  .group_content .top .text_box{
    position: absolute;
    left: 40px;
    right: auto;
    top: 80px;
    width: 560px;
    max-width: calc(100% - 80px);
    z-index: 3;
  }

  /* ✅ 여기 핵심: hero-video를 ‘아래 박스’로 내리기 */
  .hero-video{
    position: relative !important; /* absolute 해제 */
    right: auto !important;
    bottom: auto !important;

    display: block;
    width: 100% !important;
    max-width: 900px; /* ✅ 1500 이하에서 영상 박스 폭(원하면 1000/1100로) */
    height: auto;

    margin: 0 auto;     /* 가운데 */
    margin-top: 360px;  /* ✅ 텍스트 영역 아래로 내리기(원하면 조절) */

    border-radius: 14px;
    z-index: 3;
    box-shadow: 0 18px 40px rgba(0,0,0,.30);
  }

  /* 너무 작은 화면에서 margin-top을 조금 줄여주기 */
  @media (max-width: 1100px){
    .hero-video{ margin-top: 330px; max-width: 820px; }
    .group_content .top .text_box{ left: 24px; top: 70px; width: 520px; max-width: calc(100% - 48px); }
  }

  /* 모바일급으로 내려가면 텍스트/영상 더 자연스럽게 */
  @media (max-width: 768px){
    .group_content .top .inner{ min-height: 480px; padding-top: 44px; }
    .group_content .top .text_box{
      position: relative; /* 모바일에서는 흐름으로 */
      left: auto;
      top: auto;
      width: 100%;
      max-width: 100%;
      margin: 0;
    }
    .hero-video{
      margin-top: 16px;
      max-width: 100%;
    }
  }
}
/* =========================================================
   모바일 한글 “자간 벌어짐” (사실상 줄맞춤/줄바꿈 문제) 해결
   - 모바일에서만 적용
========================================================= */
@media (max-width: 768px){
  .ai_card h3{
    margin-top: 30px;
}
  .q_item .v{display: block;
    font-size: 16px;
    color: #2f2f2f;
    font-family: 'Noto_m';}
  .ai_usecase_notice_text b{text-align: left;}
  .ai_usecase_head h2{
    font-size: 19px;
}
  .ai_usecase_card h3{
    text-align: left;
}
  .ai_usecase_notice_text span{text-align: left !important;}
  .ai_fact_text b{
    text-align: left;
}
  .queue_box{padding:10px;}
  .q_item{}
  .preset_grid{padding: 10px;}
  /* 모바일에서는 '양쪽정렬(justify)' 절대 금지 */
  .group_content p,
  .group_content .desc,
  .group_content .info_ai p,
  .group_content .ai_card p,
  .group_content .photo_tip,
  .group_content .ai_fact_head p,
  .group_content .ai_fact_text span,
  .group_content .ai_usecase_card p,
  .group_content .ai_usecase_notice_text span{
    /* text-align: center !important; */

    /* 한글 줄바꿈 안정화 */
    word-break: keep-all !important;  /* 단어 중간 쪼개지 않기 */
    line-break: strict !important;    /* 한글 줄바꿈 규칙 엄격 */
    overflow-wrap: break-word !important; /* 너무 긴 토큰만 예외적으로 줄바꿈 */

    /* 자간 강제 정상화 */
    letter-spacing: normal !important;
    word-spacing: normal !important;

    /* 줄 간격 조금만 안정화(가독성) */
    line-height: 1.7 !important;
  }

  /* 혹시 상위에서 text-align-last가 잡혀있으면 같이 죽임 */
  .group_content p{
    text-align-last: auto !important;
    font-size: 13px;
  }

  /* 너무 얇은 폰트에서 벌어져 보이는 착시 완화(선택) */
  .group_content .info_ai p,
  .group_content .ai_usecase_card p,
  .group_content .ai_fact_text span{
    font-weight: 400; /* Noto_L이 너무 얇으면 400이 안정적 */
    text-align: left !important;
  }

  /* 긴 URL/영문 토큰(혹시 있을 경우)만 깨끗하게 줄바꿈 */
  .group_content a,
  .group_content .finalPromptPreview,
  #finalPromptPreview{
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}