/* File: /theme/ecoSejong/html/css_js/fix.tablet.css
   Purpose: Tablet-only layout/font/icon fixes (ecoSejong)
   Note:
   - 태블릿 한정: 641–1024px 구간을 안전 범위로 보정
   - 텍스트 자동확대 OFF, 영문/국문 혼용 시 줄바꿈 과대 확대 방지
   - 히어로/타이틀/버튼/아이콘 정렬 및 라인하이트 보정
*/

/* 0) 공통: 텍스트 자동확대 방지(안드로이드/삼성브라우저/태블릿) */
html {
  -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
}

/* 1) 태블릿 범위 지정(필요 시 최대폭은 조정 가능) */
@media (min-width: 641px) and (max-width: 1024px) {

  /* 1-1) 히어로(메인/서브) 타이포 안정화 */
  /* 메인 슬라이더의 큰 제목/부제 — .lviewa / .sviewa */
  .lviewa {
    /* clamp(최소, 선형, 최대) — 태블릿에서 과대확대 방지 */
    font-size: clamp(26px, 3.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    word-break: keep-all;
  }
  .sviewa {
    font-size: clamp(16px, 2.2vw, 20px);
    line-height: 1.45;
    letter-spacing: -0.01em;
    word-break: keep-all;
  }

  /* 메인 히어로 버튼 */
  a.btn_view,
  a.btn_view2 {
    font-size: clamp(13px, 1.8vw, 15px);
    line-height: 1.2;
    padding: 12px 16px;
    border-width: 1px;
  }

  /* 1-2) 섹션 타이틀(공통) */
  .m_tit {
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .desc {
    font-size: clamp(13px, 1.9vw, 15px);
    line-height: 1.55;
  }

  /* 1-3) 회사소개(ABOUT) 블록 — 겹침 방지 */
  #company_txt strong {
    font-size: clamp(22px, 3.2vw, 32px);
    line-height: 1.25;
  }
  #company_txt .con_right p {
    font-size: clamp(14px, 2vw, 16px);
    line-height: 1.7;
  }

  /* 1-4) 리스트/배너 그리드(6칸 → 3×2 또는 2×3로 안정화) */
  /* 활동 갤러리 옆의 4개 배너(아이콘+텍스트) 겹침 방지 */
  #rolling_bnr ul {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  #rolling_bnr li .t1 { font-size: clamp(15px, 2.2vw, 17px); line-height: 1.3; }
  #rolling_bnr li .t2 { font-size: clamp(12px, 1.8vw, 14px); line-height: 1.5; }

  /* 1-5) 아이콘 겹침/위치보정(Font Awesome) */
  /* 아이콘이 텍스트와 겹치거나 위로 치우치는 증상 보정 */
  .fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-light, .fa-brands {
    display: inline-block;
    width: 1em;       /* 아이콘 폭 고정 → 줄바꿈 안정 */
    line-height: 1;   /* 폰트아이콘 수직 정렬 */
    vertical-align: -0.05em; /* 살짝 내려 정확히 중앙 */
  }
  /* 아이콘을 크게 쓰는 카드/배너에서 과대확대 방지 */
  .icons i,
  .qbnr6-ico {
    font-size: clamp(18px, 3vw, 24px);
  }

  /* 1-6) 헤더 높이/메뉴 줄맞춤(PC형 헤더가 노출되는 태블릿용) */
  header, .header, #hd, .hd_wrapper {
    min-height: 56px;
  }
  /* 메뉴 링크 텍스트가 커져 줄바꿈 되는 것을 방지 */
  nav, .gnb, .gnb ul, .gnb li, .gnb a {
    line-height: 1.2;
  }
  .gnb a { 
    font-size: clamp(14px, 2vw, 16px);
    white-space: nowrap;
  }

  /* 1-7) 서브 비주얼 배경 위 텍스트 여백 보정(겹침 방지) */
  #sub_visual .backgroundimg,
  #main_visual .backgroundimg {
    /* 글자가 배경 상단 가장자리와 겹치는 이슈 방지 */
    padding-top: 6px;
  }

  /* 1-8) 테블릿의 시스템 글자크기 확대(접근성) 영향 최소화 */
  body {
    /* 시스템 글자확대가 큰 경우에도 레이아웃 붕괴를 줄임 */
    font-size: clamp(14px, 1.9vw, 16px);
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
  }

  /* 1-9) 플로팅 퀵메뉴 아이콘 겹침 보정(있을 경우) */
  .q-menu nav a i {
    font-size: clamp(16px, 2.6vw, 20px);
    line-height: 1;
  }
  .q-menu nav a span {
    font-size: clamp(10px, 1.6vw, 12px);
    line-height: 1.1;
  }
}

/* 2) 초대형 태블릿(1025–1366px)에서도 과대확대 완화(옵션) */
@media (min-width: 1025px) and (max-width: 1366px) {
  .lviewa { font-size: clamp(28px, 3.1vw, 44px); }
  .sviewa { font-size: clamp(16px, 1.9vw, 20px); }
  .m_tit  { font-size: clamp(22px, 2.2vw, 30px); }
}