/* =====================================================================
 * mobile-fixes.css — P3 모바일 가독·탭타깃·입력확대 보정 (2026-06-26)
 * 원칙: @media(≤768) + 특정 셀렉터 한정. 레이아웃 불변, lang-lock/병기규칙 불간섭.
 *   - form-card 내부 .i18n-sub 는 건드리지 않음(🔒BI-LANG-LOCK이 inherit로 승격).
 *   - 데스크톱(≥769)에는 일절 적용 안 됨.
 * ===================================================================== */
@media (max-width:768px){

  /* 1) iOS 입력 자동확대 방지 — 폼 컨트롤 ≥16px */
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select { font-size:16px !important; }

  /* 2) 보조병기·마이크로라벨 최소 가독 (≥12px). form-card·GNB 메뉴는 제외(승격/잠금 규칙 보호) */
  .hero-title-sub .i18n-sub,
  .i18n-sub.i18n-blk,
  .ai-new-badge .i18n-sub,
  .ai-box-label .i18n-sub,
  .ai-hint .i18n-sub,
  .st-tag, .st-d, .st-t,
  .badge-soon,
  .hf-sub,
  .mc-bc .i18n-sub {
    font-size:12px !important;
    line-height:1.45 !important;
  }

  /* 3) 탭타깃 ≥44×44 — 명확한 인터랙티브 컨트롤 한정 */
  .hold-opt,
  .svc-has-sub,
  .akv3-chip, .akv3-cta, .akv3-opt,
  .ak-subnav a,
  .mc-nav-toggle,
  .nav-toggle {
    min-height:44px;
    display:inline-flex; align-items:center;
  }
  .akv3-chip { padding-top:8px; padding-bottom:8px; }

  /* 미디어 기사 행: 카드 전체가 탭 영역이 되도록 충분한 높이 확보 */
  .mlist .mrow2 .mrow-main,
  .mlist .mrow-main { min-height:44px; display:flex; flex-direction:column; justify-content:center; }

  /* 푸터 링크: 인라인 텍스트라 세로 패딩으로 히트 영역 확대(레이아웃 영향 최소) */
  .footer a, .footer-contacts a { padding-top:6px; padding-bottom:6px; display:inline-block; }
}

/* == 프로젝트 공통: GNB 햄버거 토글 (자체 추가 — 전 페이지 공통 규칙) == */
.nav-toggle{display:none;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:#0A2A5E;padding:4px 8px;}
@media (max-width:1024px){
  .nav-toggle{display:flex;margin-left:auto;order:2;}
  .nav{flex-wrap:wrap;}
  .nav.open .menu,.nav.open .nav-right{display:flex;flex-direction:column;flex-basis:100%;width:100%;}
}

/* == 프로젝트 공통: GNB 로고 축소 방지 (flex 수축 시 한글 세로 개행 방지) == */
.nav .logo, .mc-gnb .logo{flex-shrink:0;}
.nav .logo-ko, .mc-gnb .logo-ko{white-space:nowrap;}

/* == 프로젝트 공통: mc-gnb 중간 폭 보정 (1025~1380px)
   .menu 가 justify-content:center 로 수축 시 양측 스필되어 로고를 덮는 문제 방지 == */
@media (min-width:1025px) and (max-width:1380px){
  .mc-gnb{ padding:12px 28px; }
  .mc-gnb .menu{ gap:16px; min-width:0; flex-wrap:wrap; row-gap:2px; }
  .mc-gnb .menu .menu-item{ font-size:13.5px; }
  .mc-gnb .contact-btn{ padding:8px 12px; font-size:12px; }
}

/* == 프로젝트 공통: 가로 스크롤 가드 (닫힌 absolute 플라이아웃/메가메뉴 스필 방지) == */
html, body{ overflow-x:hidden; }

/* == 프로젝트 공통: plain .nav 중간 폭 스필 보정 (center/review 등 프리렌더 GNB) == */
@media (min-width:1025px) and (max-width:1380px){
  .nav .menu{ min-width:0; flex-wrap:wrap; row-gap:2px; }
}

/* ============================================================
   프로젝트 공통: 모바일 햄버거 메뉴 정돈 (≤1024px)
   1뎁스(메뉴 행) → 2뎁스(서브메뉴 카드) → 3뎁스(플라이아웃 그룹)
   계층을 세로 스택 + 배경/들여쓰기로 시각화
   ============================================================ */
@media (max-width:1024px){
  /* 패널: 뷰포트 높이 내 스크롤 */
  .nav.open{max-height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}

  /* 1뎁스: 라벨 행 + 아래로 펼침 (기존 flex row → wrap) */
  .nav .menu-item{display:flex !important;flex-wrap:wrap;align-items:center;
    padding:14px 6px !important;min-height:48px;}
  .nav .menu-item > .caret{margin-left:auto;font-size:12px;opacity:.55;transition:transform .2s;}
  .nav .menu-item.mobile-open > .caret{transform:rotate(180deg);}

  /* 데스크톱 호버 규칙 무효화 — hover 시 translateX(-50%) 가 static 서브메뉴를
     화면 왼쪽으로 밀어내는 문제 방지 (모바일 에뮬레이션·터치 모두) */
  .nav .menu-item .submenu,
  .nav .menu-item:hover .submenu{transform:none !important;left:auto !important;top:auto !important;}
  .nav .submenu-link .flyout,
  .nav .submenu-link.has-flyout:hover > .flyout{transform:none !important;left:auto !important;right:auto !important;top:auto !important;}

  /* 2뎁스: 서브메뉴 카드 — 전체 폭, 연한 배경으로 계층 구분 */
  .nav .menu-item .submenu{flex-basis:100%;width:100% !important;margin:10px 0 2px;
    background:#f6f8fc !important;border:1px solid #e8edf5;border-radius:12px;
    padding:6px 10px !important;}
  .nav .menu-item .submenu .submenu-link.has-flyout,
  .nav .menu-item .submenu .submenu-link,
  .nav .submenu-link{display:flex !important;flex-wrap:wrap;align-items:center;width:100%;
    padding:13px 8px !important;min-height:48px;border-radius:0;
    border-bottom:1px solid #e8edf5;}
  .nav .submenu > .submenu-link:last-child,
  .nav .submenu > a:last-child{border-bottom:none;}
  .nav .submenu-link .lbl{display:flex;align-items:center;gap:8px;flex:1 1 0% !important;width:auto !important;min-width:0;order:0;}
  .nav .submenu-link > .caret{flex:0 0 auto;}
  .nav .submenu-link > .caret{margin-left:auto;font-size:11px;opacity:.5;
    transition:transform .2s;order:1;}
  .nav .submenu-link .flyout{order:2;}
  .nav .submenu-link.has-flyout::after{order:1;margin-left:auto;transition:transform .2s;}
  .nav .submenu-link.has-flyout.open::after{transform:rotate(90deg);}
  .nav .submenu-link.open > .caret{transform:rotate(90deg);}

  /* 3뎁스: 플라이아웃 그룹 — 흰 배경 + 좌측 포인트 라인 */
  .nav .submenu-link .flyout{flex-basis:100%;background:#fff !important;
    border-left:3px solid #cfdcf2 !important;border-radius:0 10px 10px 0;
    margin:8px 0 6px !important;padding:4px 6px 4px 12px !important;}
  .nav .flyout-link{display:flex;align-items:center;gap:8px;
    padding:12px 8px !important;min-height:46px;border-bottom:1px solid #f2f5fa;
    font-size:14px !important;}
  .nav .flyout > .flyout-link:last-child{border-bottom:none;}

  /* 메가 패널류: 열림 상태에서만 단일 컬럼 스택 (닫힘 display:none 유지) */
  .nav .submenu-link.open > .flyout.mega,
  .nav .submenu-link.open > .flyout.mega-nations,
  .nav .submenu-link.open > .flyout.mega-purpose{
    display:block !important;width:100% !important;}
  .nav .submenu-link:not(.open) > .flyout{display:none !important;}
  .nav .mega-col{margin-bottom:10px;}
  .nav .mega-h{padding:10px 4px 8px;font-size:13.5px;}
  .nav .mega-top{display:flex;gap:8px;padding:2px 4px 8px;}
  .nav .mega-top a{flex:1;text-align:center;padding:10px 8px;background:#eef3fb;
    border-radius:8px;font-weight:700;}

  /* 국가 그리드: 2열 + 내부 스크롤 */
  .nav .nations-grid{grid-template-columns:repeat(2,1fr) !important;gap:4px !important;
    max-height:300px !important;overflow-y:auto !important;}
  .nav .nation-item{min-height:44px;padding:8px 10px;}
  .nav .nations-search{width:100% !important;min-height:44px;}
  .nav .nations-caption{font-size:12px;padding:8px 4px;}

  /* 용도별 테마 칩: 풀폭 스택 */
  .nav .theme-grid{display:grid !important;grid-template-columns:1fr !important;gap:8px !important;}
  .nav .theme-chip{min-height:52px;padding:12px 14px !important;}

  /* nav-right: 아이콘 행 + 풀폭 CTA, 사용자 드롭다운 평탄화(터치 대응) */
  .nav.open .nav-right{flex-direction:row !important;flex-wrap:wrap;gap:10px !important;
    padding:14px 4px 18px;border-top:1px solid #eef1f6;margin-top:12px;align-items:center;}
  .nav.open .nav-right .contact-btn{order:9;flex-basis:100%;text-align:center;
    padding:14px 16px !important;font-size:14px !important;}
  .nav.open .user-menu .user-dropdown,
  .nav.open .user-menu .ak-dd{position:static !important;opacity:1 !important;
    visibility:visible !important;transform:none !important;display:block;
    box-shadow:none !important;border:none;padding:0 0 0 10px;min-width:0;}
  .nav.open .user-menu{display:flex;align-items:center;gap:6px;flex:1;min-width:0;}

  /* mc-gnb(서브페이지) 열림 메뉴도 동일 행 규격 */
  .mc-gnb.mc-open .menu .menu-item{min-height:48px;padding:13px 8px !important;}
}

/* 모바일 열림 메뉴: 사용자 드롭다운 링크 좌측 정렬 행 규격 */
@media (max-width:1024px){
  .nav.open .user-dropdown a, .nav.open .user-menu .ak-dd a{
    display:flex;align-items:center;gap:8px;justify-content:flex-start;
    text-align:left;padding:11px 8px;min-height:44px;}
}

/* ============================================================
   프로젝트 공통: 데스크톱 GNB 호버 인텐트 개선 (>1024px)
   원본은 JS(hover intent)로 처리하던 것을 CSS 로 근사:
   ① 간극 브리지 — 2뎁스↔3뎁스 사이 12px, 메뉴바↔2뎁스 사이 14px 를
      투명 호버 영역으로 채워 마우스 경로 이탈로 인한 닫힘 방지
   ② 닫힘 유예 — 포인터가 벗어나도 0.28s 유예 후 닫혀 대각선 이동 허용
   ============================================================ */
@media (min-width:1025px){
  .nav .submenu-link .flyout::before,
  .mc-gnb .submenu-link .flyout::before{
    content:'';position:absolute;top:0;bottom:0;left:-16px;width:16px;}
  .nav .menu-item .submenu::before,
  .mc-gnb .menu-item .submenu::before{
    content:'';position:absolute;left:-10px;right:-10px;top:-18px;height:18px;}

  /* 닫힘 지연: 기본(닫힘 방향) 트랜지션에 delay, 호버(열림)는 즉시 */
  .nav .menu-item .submenu{
    transition:opacity .15s ease .28s,visibility .15s ease .28s,transform .15s ease .28s;}
  .nav .menu-item:hover .submenu{transition-delay:0s,0s,0s;}
  .nav .submenu-link .flyout{
    transition:opacity .15s ease .3s,visibility .15s ease .3s,transform .15s ease .3s;}
  .nav .submenu-link.has-flyout:hover > .flyout{transition-delay:.06s,.06s,.06s;}
}

/* == 프로젝트 공통: 모바일 미디어 요소 가드 == */
@media (max-width:768px){
  img, svg, video, iframe{ max-width:100%; height:auto; }
  .hint, .fct-mail, .mdom{ overflow-wrap:anywhere; word-break:keep-all; }
}

/* == 비활성 기능 UI 숨김: 장바구니 드로어 (결제 기능 미구현 — TODO(api) 대상) == */
.fcart-drawer, .fcart-mask, #fcartMask{ display:none !important; }

/* == countries.html 지역 네비: 모바일에서 가로 스크롤 처리 == */
@media (max-width:768px){
  .regnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
}

/* == 프로젝트 공통: 콘텐츠 그리드/행 모바일 붕괴 처리 == */
@media (max-width:560px){
  /* 카드형 그리드 단일 컬럼 — minmax(0,1fr): 내부 nowrap 콘텐츠의
     min-content 가 트랙을 뷰포트 밖으로 벌리는 것 방지 */
  .cards, .doc-grid, .chk-grid, .crime-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .cards > *, .doc-grid > *, .chk-grid > *, .crime-grid > *, .card{ min-width:0; }
  .cn, .dn-ko, .hint, .card-h, .s-lbl, .empty{ white-space:normal !important; }
  /* 체크아웃 2컬럼(.grid)·센터 타일(.type-grid) 모바일 붕괴 */
  .grid{ grid-template-columns:minmax(0,1fr) !important; }
  .type-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .type-grid .type, .grid > *{ min-width:0; }
  /* 센터 타일 헤드: 뱃지 줄바꿈 허용 */
  .type-head{ flex-wrap:wrap; }
  .type-head .ct{ margin-left:0 !important; white-space:normal !important; }
  /* 체크아웃 안내 배너 */
  .chubb-t, .chubb-d{ min-width:0; white-space:normal !important; }
  /* 트렌딩 카버플로우: 스테이지 밖 카드 클립 (3D 스프레드 구조) */
  .trending-board{ overflow:hidden; }
  /* 주문 진행 스텝(mypage): 가로 스크롤 트랙으로 */
  .stepper{ overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start !important; }
  .stepper .step{ min-width:72px; }
  /* 배지·카운트 라벨 줄바꿈 허용 */
  .ct, .dn-ko{ white-space:normal !important; }
}
@media (max-width:768px){
  /* order 페이지 등 데스크톱 비대칭 패딩 wrap 정상화 */
  .wrap{ padding-left:16px !important; padding-right:16px !important; }
}