/* =====================================================================
 * mobile-fixes.css — P3 모바일 가독·탭타깃·입력확대 보정 (2026-06-26)
 * 원칙: @media(≤768) + 특정 셀렉터 한정. 레이아웃 불변, lang-lock/병기규칙 불간섭.
 *   - form-card 내부 .i18n-sub 는 건드리지 않음(🔒BI-LANG-LOCK이 inherit로 승격).
 *   - 데스크톱(≥769)에는 일절 적용 안 됨.
 * ===================================================================== */
/* 1) iOS 입력 자동확대 방지 — 폼 컨트롤 ≥16px. (2026-10-01 T11, T09 요청) 768 → 1024: iPad 세로(820·834)에서도 확대되지 않게 */
@media (max-width:1024px){
  input:not([type="checkbox"]):not([type="radio"]),
  textarea, select { font-size:16px !important; }
}
@media (max-width:768px){

  /* 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,
  .mc-nav-toggle,
  .nav-toggle {
    min-height:44px;
    display:inline-flex; align-items:center;
  }
  .akv3-chip { padding-top:8px; padding-bottom:8px; }
  /* 하위 메뉴(영/한 두 줄)는 높이만 — inline-flex 를 주면 두 줄이 한 줄로 붙고 왼쪽으로 쏠렸다 (2026-10-01 T11, T10 요청) */
  .ak-subnav a { min-height:44px; }

  /* 미디어 기사 행: 카드 전체가 탭 영역이 되도록 충분한 높이 확보 */
  .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;}
  /* ☰ 39×44 → 44×44 터치 칸 (2026-10-02 T31) — 옆 계정 버튼(44×44)과 같은 칸 */
  .nav .nav-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;box-sizing:border-box;}
  .nav{flex-wrap:wrap;}
  .nav .nav-drawer .menu,.nav .nav-drawer .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; }
/* 모바일 상단 고정 (2026-10-01): overflow-x:hidden 은 body 를 스크롤 컨테이너로 만들어 헤더 sticky 가 풀렸다
   (스크롤하면 헤더가 화면 밖으로 사라짐). clip 은 가로 넘침은 똑같이 자르되 스크롤 컨테이너를 만들지 않는다.
   site.css 의 body{overflow-x:hidden} 보다 우선하도록 html body 로 건다. 데스크톱은 종전 그대로. */
@media (max-width:1024px){ @supports (overflow-x:clip){ html, html body{ overflow-x:clip; } } }

/* == 프로젝트 공통: 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-drawer, site-gnb.css)이 맡는다 — 2026-10-01 */

  /* 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-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열 + 내부 스크롤 (2026-10-01 국가별은 중간 단계 없는 `.submenu.flat.nations-submenu` —
     패널 열림은 site-gnb.css `.nations-submenu` 규칙이 맡는다) */
  .nav .nations-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:2px 6px !important;
    max-height:min(62vh,560px) !important;overflow-y:auto !important;overscroll-behavior:contain;}
  .nav .nation-item{min-height:52px;padding:8px 8px;font-size:15px;gap:10px;}
  .nav .nations-grid .nidx-g{font-size:14px;padding:9px 8px 6px;}
  /* 이동 버튼 36 → 44px(터치 하한, 2026-10-02 T31). 칸은 그리드 auto-fill 로 — 390(내용 350px)·360(320px) 모두 한 줄 7칸이라
     ㄱ~ㅎ 2줄·A–Z 4줄 그대로(줄 수 불변), 남는 폭은 칸이 나눠 갖는다. */
  .nav .nidx{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px 2px;}
  .nav .nidx button{width:auto;min-width:44px;height:44px;font-size:14px;}
  .nav .nations-search{width:100% !important;min-height:44px;font-size:16px;}
  .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 .nav-drawer .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 .nav-drawer .nav-right .contact-btn{order:9;flex-basis:100%;text-align:center;
    padding:14px 16px !important;font-size:14px !important;}
  .nav .nav-drawer .user-menu .user-dropdown,
  .nav .nav-drawer .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 .nav-drawer .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 .nav-drawer .user-dropdown a, .nav .nav-drawer .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; }
  /* (2026-10-01 T11, T08 요청) 센터 타일 `.type-grid{repeat(2) !important}` 는 걷었다 — 상황 카드 제목이 한 단어씩 접혔고,
     쓰는 곳은 center 4개 페이지뿐이라 각 페이지가 자기 열 수를 정한다.
     예전 체크아웃 2컬럼용 `.grid{1fr !important}` 는 걷었다 — 지금 체크아웃·주문서·마이페이지에는 `.grid` 가 없고
     (전수 grep: about-whomi/services/clients·category/consent·countries 만 사용, 각자 ≤720/≤900 에서 스스로 1열),
     전역 `.grid` 에 걸려 countries 국가 카드 등 다른 그리드까지 1열로 눌렀다. 체크아웃 범위로 좁힐 대상이 없어 규칙만 뺀다. */
  .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; }
}

/* ============================================================
   모바일 햄버거 메뉴 정리 (2026-10-01 사용자 요청 「UX·UI 좋게」) — 마크업은 그대로, 배치·모양만 바꾼다.
   전: 장바구니 칩·라벨 없는 아이콘(회사 소개)·떠 있는 로그인/회원가입·CTA·언어 버튼이 제각각 흩어졌고,
       메뉴가 화면 높이보다 짧으면 아래로 페이지가 비쳐 보였다. 솔루션·고객센터는 회색이라 비활성처럼 보였다.
   후: ① 메뉴는 우측에서 밀려 나오는 서랍(site-gnb.css .nav-drawer) ② 1뎁스 글자색 통일 ③ 아래 영역 순서 =
       회사 소개 목록 → 로그인|회원가입(나란히) → 상담 CTA → 장바구니 → 언어(한 번에 고르는 칩).
   ============================================================ */
@media (max-width:1024px){
  .nav .nav-drawer .menu .nav-sec .nav-en{color:#1a2e4a;}
  .nav .nav-drawer .menu .nav-sec .nav-ko{color:#4a6a99;}

  /* 아래 영역: 한 열로 쌓고 순서를 정한다 */
  .nav .nav-drawer .nav-right{display:flex !important;flex-direction:column !important;flex-wrap:nowrap;align-items:stretch !important;
    gap:12px !important;padding:14px 4px 28px;border-top:0 !important;margin-top:0;}
  .nav .nav-drawer .nav-right > *{margin:0 !important;}

  /* ① 회사 소개(아이콘 메뉴): 아이콘 대신 목록을 바로 보인다 */
  .nav .nav-drawer .nav-right .about-icon{order:1;display:block !important;width:100%;padding:0 !important;min-height:0;border:0;}
  .nav .nav-drawer .nav-right .about-icon > .icon-btn{display:none;}
  .nav .nav-drawer .nav-right .about-icon > .submenu{display:block !important;position:static;opacity:1;visibility:visible;
    margin:0 !important;background:#f6f8fc !important;}
  .nav .nav-drawer .nav-right .about-icon .submenu-link.has-flyout::after,
  .nav .nav-drawer .menu .submenu-link.has-flyout::after{content:"\203A";font-size:24px;line-height:1;font-weight:700;opacity:1;color:#5b6b82;}
  .nav .nav-drawer .nav-right .about-icon .flyout{left:auto !important;right:auto !important;}

  /* ② 계정: 비회원 = 로그인|회원가입 두 버튼, 회원 = 목록 */
  .nav .nav-drawer .nav-right .user-menu{order:2;display:block !important;flex:none;width:100%;}
  .nav .nav-drawer .nav-right .user-menu > .user-btn{display:none;}
  .nav .nav-drawer .nav-right .user-menu .user-dropdown{padding:0 !important;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="guest"]{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="guest"][hidden],
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"][hidden]{display:none;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="guest"] a{justify-content:center;flex-direction:column;gap:2px;min-height:52px;
    border:1.5px solid #c9d6ea;border-radius:12px;background:#fff;font-weight:800;color:#0A2A5E;text-align:center;line-height:1.2;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="guest"] a + a{background:#eef4fb;border-color:#eef4fb;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="guest"] .kosub{margin:0;font-size:12px;opacity:.75;}
  /* 회원: 인사말 → 마이페이지(주 버튼, 전체 폭) → 정보수정|로그아웃(나란히) */
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"]:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .ud-greet,
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary{grid-column:1/-1;margin:0;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary{justify-content:center;min-height:52px;border-radius:12px;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] a:not(.my-primary),
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:52px;padding:8px !important;border:1.5px solid #c9d6ea;border-radius:12px;background:#fff;font-weight:800;color:#0A2A5E;text-align:center;line-height:1.2;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .kosub{margin:0;font-size:12px;opacity:.75;}

  /* ③ 상담 CTA ④ 장바구니 — 같은 폭, CTA 가 주 버튼 */
  .nav .nav-drawer .nav-right .contact-btn{order:3;flex-basis:auto !important;width:100%;box-sizing:border-box;border-radius:12px;padding:13px 16px !important;}
  .nav .nav-drawer .nav-right .cart-pill,
  .nav .nav-drawer .nav-right .cart-pill[data-cart-pill]{order:4;width:100%;min-height:48px;border-radius:12px;box-sizing:border-box;
    background:#fff;border:1.5px solid #c9d6ea;color:#0A2A5E;box-shadow:none;}

  /* ⑤ 언어: 드롭다운을 펼친 칩으로 — 한 번에 고른다 */
  .nav .nav-drawer .nav-right .lang-menu{order:5;width:100%;}
  .nav .nav-drawer .nav-right .lang-menu > .lang-btn{display:none;}
  .nav .nav-drawer .nav-right .lang-dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0;min-width:0;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;background:transparent;}
  .nav .nav-drawer .nav-right .lang-dropdown::before{display:none;}
  .nav .nav-drawer .nav-right .lang-dropdown a{justify-content:center;padding:6px 6px;min-height:44px;border:1px solid #dfe6f1;border-radius:10px;
    font-size:12.5px;background:#fff;gap:4px;transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .nav .nav-drawer .nav-right .lang-dropdown a:first-child{grid-column:1/-1;}
  .nav .nav-drawer .nav-right .lang-dropdown a .flag-em{font-size:13px;}
  .nav .nav-drawer .nav-right .lang-dropdown a[hidden]{display:none;}
  .nav .nav-drawer .nav-right .lang-dropdown a[aria-current],
  .nav .nav-drawer .nav-right .lang-dropdown a.active,
  .nav .nav-drawer .nav-right .lang-dropdown a.on{border-color:#0A2A5E;background:#0A2A5E;color:#fff;}
}

/* ============================================================
   떠 있는 요소 공통 규칙 (2026-10-01 모바일·태블릿 개편 T11) — ≤1024 에서만. 데스크톱은 종전 그대로.
   전: 카테고리 계열 떠 있는 장바구니(#fcartBtn, 「🛒 0EA」)가 오른쪽 아래에서 카테고리 탭·행의 「옵션」 버튼을 덮었고
       (390·768·1024 모두), 서랍(z620)보다 위(z1000)에 떠서 열린 메뉴까지 가렸다. 후기 「작성」 버튼도 본문을 덮었다.
   규칙: ① 장바구니는 떠 있지 않는다 — auth.js 가 헤더 막대(계정 버튼 앞)로 옮기고 `.is-docked` 를 붙인다(2026-10-02 T12: 전 페이지 헤더 장바구니로 통일).
         ② 나머지 떠 있는 버튼(.write-cta·.media-back-top)은 오른쪽 아래 16px + 안전영역, 아래로 읽는 동안 숨김
            (html.ak-fab-hide — auth.js), 멈춘 자리에서 버튼 아래에 글자·버튼이 깔리면 비켜 둠(html.ak-fab-blocked — auth.js),
            서랍이 열리면 숨김, 페이지 끝에서는 푸터가 그만큼 아래 여백을 비워 마지막 글자를 덮지 않는다.
         ③ 하단 고정 막대(.pp-mobile 등)는 페이지가 자기 하단 여백을 둔다(상품 상세 product-purchase.css 가 이미 둔다).
   ============================================================ */
@media (max-width:1024px){
  /* 상단 바 장바구니 (2026-10-02 T12) — 헤더 장바구니(.ak-header-cart) 또는 그것이 없는 화면의 #fcartBtn 을 auth.js 가 옮겨
     `.is-docked` 를 붙인다. 계정 버튼과 같은 44×44 칸 · 아이콘 + 개수 배지(0 이면 배지 숨김, 개수·금액은 aria-label 에 그대로). */
  .nav > .is-docked[data-cart-pill], .nav > #fcartBtn.is-docked{position:relative;order:2;display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto;margin:0 0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;box-sizing:border-box;
    border:1px solid #d5deea;border-radius:12px;background:#f4f7fc;color:#0A2A5E;box-shadow:none;transform:none;opacity:1;
    text-decoration:none;z-index:auto;font:800 12px/1 "Malgun Gothic","Apple SD Gothic Neo",sans-serif;}
  .nav > .is-docked[data-cart-pill]:hover, .nav > #fcartBtn.is-docked:hover{transform:none;box-shadow:none;background:#e9eff8;}
  .nav > .is-docked[data-cart-pill] .ak-cart-icon, .nav > #fcartBtn.is-docked .ak-cart-icon{font-size:20px;line-height:1;}
  .nav > .is-docked[data-cart-pill] .cp-ct, .nav > #fcartBtn.is-docked .fcart-ct{position:absolute;top:-7px;right:-7px;display:inline-flex !important;align-items:center;justify-content:center;
    min-width:20px;height:20px;margin:0;padding:0 5px;box-sizing:border-box;border-radius:999px;border:2px solid #fff;
    background:#FFD56B;color:#3d2a03;font-size:11.5px;font-weight:800;line-height:1;}
  html[dir="rtl"] .nav > .is-docked[data-cart-pill] .cp-ct, html[dir="rtl"] .nav > #fcartBtn.is-docked .fcart-ct{right:auto;left:-7px;}
  .nav > .is-docked[data-cart-pill]:not(.has) .cp-ct, .nav > #fcartBtn.is-docked:not(.has) .fcart-ct{display:none !important;}
  .nav > .is-docked[data-cart-pill] .ak-cart-label, .nav > .is-docked[data-cart-pill] .ak-cart-separator, .nav > .is-docked[data-cart-pill] .ak-cart-total,
  .nav > #fcartBtn.is-docked .ak-cart-label, .nav > #fcartBtn.is-docked .fcart-amt{display:none !important;}
  .nav > .is-docked[data-cart-pill]:focus-visible, .nav > #fcartBtn.is-docked:focus-visible{outline:3px solid #1E5BBA;outline-offset:2px;}
  .nav > .is-docked + .nav-account-toggle{margin-left:8px;margin-right:0;}
  html[dir="rtl"] .nav > .is-docked[data-cart-pill], html[dir="rtl"] .nav > #fcartBtn.is-docked{margin:0 auto 0 0;}
  html[dir="rtl"] .nav > .is-docked + .nav-account-toggle{margin-left:0;margin-right:8px;}
  /* 헤더 장바구니가 올라온 화면의 떠 있는 장바구니는 숨겨 하나만 남긴다 */
  #fcartBtn.is-replaced{display:none !important;}

  /* ② 떠 있는 버튼 */
  .write-cta, .media-back-top{bottom:calc(16px + env(safe-area-inset-bottom)) !important;right:16px !important;left:auto !important;
    transition:transform .22s ease,opacity .2s ease,visibility 0s;}
  html[dir="rtl"] .write-cta, html[dir="rtl"] .media-back-top{right:auto !important;left:16px !important;}
  /* 맨 위로: 화면 오른쪽 끝에 붙은 44×44 탭(왼쪽만 둥글게) — 카드 오른쪽 끝 날짜·「Read more」 와 겹치지 않게 (T10 요청) */
  .media-back-top{right:0 !important;width:44px !important;height:44px !important;border-radius:12px 0 0 12px !important;border-right:0 !important;}
  html[dir="rtl"] .media-back-top{right:auto !important;left:0 !important;border-radius:0 12px 12px 0 !important;border-right:1px solid #dce1e8 !important;border-left:0 !important;}
  html.ak-fab-hide .write-cta, html.ak-fab-hide .media-back-top,
  html.ak-fab-blocked .write-cta, html.ak-fab-blocked .media-back-top{transform:translateY(calc(100% + 40px)) !important;opacity:0;pointer-events:none;}
  /* auth.js 가 「멈춘 자리에서 아래에 글자·버튼이 깔리는지」 잴 때만 잠깐 제자리로 — 같은 작업 안에서 되돌려 화면에는 그려지지 않는다 */
  html.ak-fab-measure .write-cta, html.ak-fab-measure .media-back-top{transform:none !important;transition:none !important;}
  html:has(nav.nav.open) .write-cta, html:has(nav.nav.open) .media-back-top{visibility:hidden;}
  body:has(.write-cta) .site-footer, body:has(.media-back-top:not([hidden])) .site-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
}
@media (max-width:1024px){
  /* 휴대폰·태블릿: 후기 작성은 52px 원형 아이콘 — 글자는 화면에서만 숨기고 읽어 주기에는 남긴다 */
  .write-cta{width:52px;height:52px;padding:0 !important;justify-content:center;border-radius:50% !important;font-size:22px;gap:0 !important;box-sizing:border-box;}
  .write-cta span, .write-cta .wr-ko{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;
    overflow:hidden !important;clip:rect(0 0 0 0) !important;white-space:nowrap !important;border:0 !important;display:block !important;}
}
@media (prefers-reduced-motion:reduce){ .write-cta, .media-back-top{transition:none;} }

/* ============================================================
   ☰ 서랍 1뎁스 통일 (2026-10-02 T12, 사용자 지적 「비슷한 기능인데 모양이 달라 이질감」) — ≤1024 만, 데스크톱 아이콘 드롭다운은 그대로.
   전: 국가별·문서별·솔루션·고객센터 = 테두리 없는 1뎁스 줄(17px 굵게·국문 12.5px·▼), 그 아래 회사 소개·미디어 센터·오시는 길 =
       회색 카드 안 아이콘 + 14px 줄, 연파랑 머리 배경, › 화살표, 3뎁스는 왼쪽 세로선 흰 카드.
   후: 회사 소개·미디어 센터·오시는 길도 같은 1뎁스 줄(아이콘 숨김·같은 글자·높이·구분선·▼, 펼치면 ▲ + 파란 글자),
       펼친 하위는 고객센터 펼침 카드와 같은 카드(#f6f8fc·테두리·아이콘 + 영/국 두 줄). 오시는 길(하위 없는 바로가기)은 화살표 없음.
   여는 방식은 기존 auth.js 아코디언 그대로(탭으로 펼치기/접기, 여러 개 동시에 열림 — 위 4개와 같은 규칙).
   ============================================================ */
@media (max-width:1024px){
  /* 바깥 회색 카드·간격 제거 — 위 목록에 바로 이어진다 */
  .nav[data-drawer="menu"] .nav-drawer .nav-right{padding:0 0 28px !important;gap:0 !important;}
  .nav .nav-drawer .nav-right .about-icon > .submenu{background:transparent !important;border:0 !important;border-radius:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;}
  /* 1뎁스 줄 */
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link{display:flex !important;flex-wrap:wrap;align-items:center;width:100%;box-sizing:border-box;
    min-height:48px;padding:14px 6px !important;margin:0;gap:4px 0 !important;border-radius:0;background:transparent !important;color:#1a2e4a;
    border-bottom:1px solid #e1e7f0 !important;font-size:15px;line-height:1.7;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link:last-child{border-bottom:1px solid #e1e7f0 !important;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link .ico{display:none !important;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .lbl{display:flex !important;flex-direction:column;align-items:flex-start;gap:4px;flex:1 1 0% !important;min-width:0;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > a.submenu-link{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;justify-content:center;text-decoration:none;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .lbl > .ak-en,
  .nav .nav-drawer .nav-right .about-icon > .submenu > a.submenu-link > .ak-en{font-size:17px;font-weight:700;line-height:1.15;color:#1a2e4a;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .lbl > .kosub,
  .nav .nav-drawer .nav-right .about-icon > .submenu > a.submenu-link > .kosub{display:block;margin:0;font-size:12.5px;font-weight:600;line-height:1.15;color:#4a6a99 !important;opacity:1 !important;}
  /* ▼ / 펼치면 ▲ + 파란 글자 (고객센터 펼침과 같게) */
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout::after{content:"\25BC" !important;order:1;margin-left:auto;font-size:13px !important;line-height:1 !important;
    font-weight:600 !important;color:#5b6b82 !important;opacity:1 !important;transform:none;transition:transform .2s;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout.open::after{transform:rotate(180deg) !important;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout.open > .lbl > .ak-en{color:#1E5BBA;}
  html[dir="rtl"] .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout::after{margin-left:0;margin-right:auto;}
  /* 펼친 하위 = 고객센터 하위 카드와 같은 모양 */
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .flyout{order:2;flex-basis:100%;width:100% !important;box-sizing:border-box;
    margin:6px 0 2px !important;padding:6px 10px !important;background:#f6f8fc !important;border:1px solid #d9e1ec !important;border-radius:12px !important;box-shadow:none !important;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .flyout > .flyout-link{display:grid !important;grid-template-columns:22px minmax(0,1fr);gap:0 10px !important;align-items:center;
    min-height:54px;padding:13px 8px !important;border-bottom:1px solid #e8edf5;font-size:15px !important;line-height:1;color:#1a2e4a;text-decoration:none;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .flyout > .flyout-link:last-child{border-bottom:0;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .flyout > .flyout-link > .ak-en{grid-column:2;font-size:14px;font-weight:600;line-height:1.18;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link > .flyout > .flyout-link > .kosub{grid-column:2;display:block;margin:0;font-size:12px;line-height:1.2;}
}
@media (max-width:1024px){
  /* RTL: 1뎁스 화살표가 `margin-left:auto` 라 글자 바로 옆에 붙어 있었다 → 반대쪽 끝으로(LTR 의 오른쪽 끝과 대칭) — 아래 회사 소개 줄과 같은 자리 */
  html[dir="rtl"] .nav .nav-drawer .menu > .menu-item > .caret,
  html[dir="rtl"] .nav .nav-drawer .menu > .menu-item > button > .caret{margin-left:0 !important;margin-right:auto !important;}
}

/* ============================================================
   서랍 전환·2단 drill-down (2026-10-02 T15, 사용자 요청) — ≤1024 만. 데스크톱 그대로.
   ① 「좌우로 날아가는 느낌」 → 두 서랍 모두 오른쪽(RTL 은 왼쪽)에서, 제자리 24px 앞 + 투명 → 제자리 + 불투명.
      열기 .18s ease-out, 닫기 .14s 역방향. 태블릿 막은 페이드만. reduced-motion 이면 즉시.
   ② 1뎁스를 누르면 아래로 펼치지 않고 서랍 위에 같은 크기의 하위 패널(.nav-subpanel, auth.js)이 같은 전환으로 겹친다.
      머리줄 [제목][✕ = 한 단계 뒤로(T30)], 내용 = 기존 하위 DOM(국가 패널·문서 메가·솔루션 그룹·링크 목록)을 옮겨 온 것.
   ============================================================ */
.nav-subpanel{display:none;}
@media (max-width:1024px){
  .nav .nav-drawer,
  .nav[data-drawer] .nav-drawer,
  .nav:not([data-drawer]) .nav-drawer{left:auto !important;right:0 !important;transform:translateY(-8px) !important;opacity:0;
    transition:transform .14s ease-in,opacity .14s ease-in,visibility 0s linear .14s !important;}
  html[dir="rtl"] .nav .nav-drawer,
  html[dir="rtl"] .nav[data-drawer] .nav-drawer,
  html[dir="rtl"] .nav:not([data-drawer]) .nav-drawer{right:auto !important;left:0 !important;transform:translateY(-8px) !important;}
  /* 닫힌 서랍을 옆(24px)이 아니라 위(8px)로 비켜 둔다 — 화면 오른쪽 밖에 걸친 고정 요소 때문에 아이폰에서 페이지가 좌우로 끌렸다(2026-10-12 사용자) */
  .nav.open .nav-drawer,
  html[dir="rtl"] .nav.open .nav-drawer{transform:none !important;opacity:1;visibility:visible;
    transition:transform .18s ease-out,opacity .18s ease-out,visibility 0s !important;}
  .nav .nav-backdrop{transition:opacity .14s ease-in,visibility 0s linear .14s;}
  .nav.open .nav-backdrop{transition:opacity .18s ease-out,visibility 0s;}

  /* 1뎁스 화살표: 펼침(▼) 대신 drill-down(›). 오시는 길은 화살표 없음 그대로 */
  .nav .nav-drawer .menu > .menu-item > .caret,
  .nav .nav-drawer .menu > .menu-item > button > .caret{font-size:0 !important;line-height:0 !important;transform:none !important;opacity:1 !important;}
  .nav .nav-drawer .menu > .menu-item > .caret::after,
  .nav .nav-drawer .menu > .menu-item > button > .caret::after{content:"\203A";display:inline-block;font-size:24px;line-height:1;font-weight:700;color:#5b6b82;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout::after{content:"\203A" !important;font-size:24px !important;font-weight:700 !important;transform:none !important;}
  html[dir="rtl"] .nav .nav-drawer .menu > .menu-item > .caret::after,
  html[dir="rtl"] .nav .nav-drawer .menu > .menu-item > button > .caret::after{transform:scaleX(-1);}
  html[dir="rtl"] .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link.has-flyout::after{transform:scaleX(-1) !important;}

  /* 하위 패널 */
  .nav .nav-drawer.is-drilled{overflow:hidden !important;}
  .nav .nav-drawer > .nav-subpanel{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;background:#fff;
    opacity:0;transform:translateX(24px);transition:transform .14s ease-in,opacity .14s ease-in;}
  html[dir="rtl"] .nav .nav-drawer > .nav-subpanel{transform:translateX(-24px);}
  .nav .nav-drawer > .nav-subpanel[hidden]{display:none;}
  .nav .nav-drawer > .nav-subpanel.is-open,
  html[dir="rtl"] .nav .nav-drawer > .nav-subpanel.is-open{opacity:1;transform:none;transition:transform .18s ease-out,opacity .18s ease-out;}
  .nav .nav-drawer .nav-subpanel-head{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:10px;
    min-height:68px;padding:10px 16px;padding-inline-start:20px;box-sizing:border-box;background:#fff;border-bottom:1px solid #eef1f6;}
  .nav .nav-drawer .nav-subpanel-head .nav-drawer-close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    border:1px solid #d5deea;border-radius:12px;background:#f4f7fc;color:#0A2A5E;font-size:20px;line-height:1;cursor:pointer;}
  .nav .nav-drawer .nav-subpanel-head button:focus-visible{outline:3px solid #1E5BBA;outline-offset:2px;}
  .nav .nav-drawer .nav-subpanel-title{min-width:0;overflow:hidden;}
  .nav .nav-drawer .nav-subpanel-title > *{display:flex !important;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;}
  .nav .nav-drawer .nav-subpanel-title .nav-en,
  .nav .nav-drawer .nav-subpanel-title .ak-en,
  .nav .nav-drawer .nav-subpanel-title .bi-col > span:first-child{font-size:17px;font-weight:800;line-height:1.2;color:#0f2340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .nav .nav-drawer .nav-subpanel-title .nav-ko,
  .nav .nav-drawer .nav-subpanel-title .kosub,
  .nav .nav-drawer .nav-subpanel-title .i18n-sub{display:block;margin:0;font-size:12.5px;font-weight:600;line-height:1.2;color:#4a6a99 !important;opacity:1 !important;}
  html[dir="rtl"] .nav .nav-drawer .nav-subpanel-title > *{align-items:flex-end;}
  .nav .nav-drawer .nav-subpanel-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 20px 28px;box-sizing:border-box;}

  /* 옮겨 온 하위 내용: 접힘·떠 있는 드롭다운 규칙을 풀고 제자리 목록으로 */
  .nav .nav-drawer .nav-subpanel-body > .submenu,
  .nav .nav-drawer .nav-subpanel-body > .flyout,
  .nav .nav-drawer .nav-subpanel-body .flyout{display:block !important;position:static !important;opacity:1 !important;visibility:visible !important;transform:none !important;
    left:auto !important;right:auto !important;top:auto !important;width:auto !important;min-width:0 !important;max-width:none !important;max-height:none !important;
    margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;overflow:visible !important;}
  .nav .nav-drawer .nav-subpanel-body .flyout::before{display:none !important;}
  .nav .nav-drawer .nav-subpanel-body .flyout-link{display:grid !important;grid-template-columns:22px minmax(0,1fr);gap:0 10px !important;align-items:center;
    min-height:54px;padding:12px 6px !important;border-bottom:1px solid #e8edf5;font-size:16px !important;line-height:1.2;color:#1a2e4a;text-decoration:none;box-sizing:border-box;}
  .nav .nav-drawer .nav-subpanel-body .flyout-link > .ak-en,
  .nav .nav-drawer .nav-subpanel-body .flyout-link > .bi-col,
  .nav .nav-drawer .nav-subpanel-body .flyout-link > .kosub{grid-column:2;}
  .nav .nav-drawer .nav-subpanel-body .flyout-link > .ak-en,
  .nav .nav-drawer .nav-subpanel-body .flyout-link .bi-col > span:first-child{font-size:15px;font-weight:600;line-height:1.25;}
  .nav .nav-drawer .nav-subpanel-body .flyout-link > .kosub,
  .nav .nav-drawer .nav-subpanel-body .flyout-link .i18n-sub{display:block;margin:0;font-size:12px;line-height:1.3;color:#4f5f78 !important;opacity:1 !important;}
  .nav .nav-drawer .nav-subpanel-body > .submenu > .submenu-link:not(.has-flyout){min-height:54px;padding:12px 6px !important;}
  /* 솔루션 3뎁스: 또 한 단계 들어가지 않고 그룹 머리 + 목록으로 평탄화 */
  .nav .nav-drawer .nav-subpanel-body .submenu-link.has-flyout{display:block !important;padding:0 !important;margin:0 0 6px !important;border:0 !important;min-height:0 !important;background:transparent !important;}
  .nav .nav-drawer .nav-subpanel-body .submenu-link.has-flyout::after{display:none !important;content:none !important;}
  .nav .nav-drawer .nav-subpanel-body .submenu-link.has-flyout > .lbl{display:flex !important;align-items:center;gap:8px;padding:16px 4px 8px;border-bottom:2px solid #d9e1ec;
    font-size:15px;font-weight:800;color:#0A3A8C;}
  .nav .nav-drawer .nav-subpanel-body .submenu-link.has-flyout > .lbl .i18n-sub{color:#4a6a99 !important;}

  /* 국가별: 패널 높이를 다 쓰고 목록(그리드)이 남은 높이를 채운다 — 이동 버튼은 그리드 스크롤 기준 그대로 */
  .nav .nav-drawer .nav-subpanel-body.is-nations{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;}
  .nav .nav-drawer .nav-subpanel-body.is-nations > .nations-submenu{display:flex !important;flex-direction:column;flex:1 1 auto;min-height:0;}
  .nav .nav-drawer .nav-subpanel-body.is-nations > .nations-submenu > .flyout{display:flex !important;flex-direction:column;flex:1 1 auto;min-height:0;}
  .nav .nav-drawer .nav-subpanel-body.is-nations .nations-search,
  .nav .nav-drawer .nav-subpanel-body.is-nations .nidx,
  .nav .nav-drawer .nav-subpanel-body.is-nations .nations-caption{flex:0 0 auto;}
  .nav .nav-drawer .nav-subpanel-body.is-nations .nations-grid{flex:1 1 auto;min-height:0;max-height:none !important;overflow-y:auto !important;
    /* 그리드가 남은 높이를 채우면 기본 align-content:stretch 가 몇 줄 안 되는 검색 결과의 줄 높이를 늘려
       「베트」 결과가 컨트롤 아래 약 270~400px 공백 밑에 묻혔다(2026-10-02 T31) → 줄은 내용 높이로 위에서부터. */
    align-content:start;grid-auto-rows:min-content;}
  .nav .nav-drawer .nav-subpanel-body.is-nations .nations-empty{flex:0 0 auto;}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .nav .nav-drawer, .nav.open .nav-drawer, .nav .nav-drawer > .nav-subpanel, .nav .nav-drawer > .nav-subpanel.is-open,
  .nav .nav-backdrop, .nav.open .nav-backdrop{transition:none !important;}
}
@media (max-width:1024px){
  /* 하위 패널 안 영/국 두 줄 — 페이지마다 다른 `.bi-col`(카테고리 화면은 block + nowrap 이라 오른쪽으로 넘쳤다)을 패널 안에서는 한 규칙으로 */
  .nav .nav-drawer .nav-subpanel-body .bi-col{display:flex !important;flex-direction:column;align-items:flex-start;min-width:0;white-space:normal !important;}
  .nav .nav-drawer .nav-subpanel-body .bi-col > span,
  .nav .nav-drawer .nav-subpanel-body .flyout-link > span{white-space:normal !important;overflow-wrap:anywhere;min-width:0;}
}
@media (max-width:1024px){
  /* 서랍 1뎁스 7줄 높이 통일 (2026-10-02 T15 재작업) — 버튼형(국가별·문서별)은 `min-height:62px;padding:13px`,
     나머지는 `padding:14px` + 내용 높이라 줄마다 49~67px 로 달랐다. 7줄 모두 위아래 패딩 0 + 높이 60px + 세로 가운데. */
  .nav .nav-drawer > .menu > .menu-item,
  .nav .nav-drawer > .menu > .menu-item[data-gnb-menu]{padding:0 !important;min-height:60px !important;box-sizing:border-box;align-items:center;}
  .nav .nav-drawer > .menu > .menu-item.nav-sec{padding:0 6px !important;}
  .nav .nav-drawer > .menu > .menu-item[data-gnb-menu] > button{min-height:59px !important;height:59px;padding:0 6px !important;width:100%;box-sizing:border-box;
    display:flex !important;align-items:center;line-height:1.7;margin:0;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > .submenu-link{min-height:60px !important;padding:0 6px !important;box-sizing:border-box;}
  .nav .nav-drawer .nav-right .about-icon > .submenu > a.submenu-link{justify-content:center;}
}

/* 국가 패널(모바일 서랍) — 2026-10-02 사용자 지적: 「초성 라벨(ㄱ·ㄴ…) 필요 없어 보임, 구분선만 이쁘게」·「상하 간격이 너무 넓음」.
   - 그룹 머리글 .nidx-g 는 이동 버튼의 스크롤 목표라 요소는 남기고 글자만 숨겨 1px 구분선으로(맨 앞 그룹은 선 없음).
   - 국가 줄 52px+2px → 44px(터치 하한)+0. ≤1024 서랍 안에서만, 데스크톱 패널은 그대로. */
@media (max-width:1024px){
  html body .nav .nav-drawer .nations-grid{row-gap:0 !important;}
  html body .nav .nav-drawer .nations-grid .nation-item{min-height:44px;padding:4px 8px;}
  html body .nav .nav-drawer .nations-grid .nidx-g{position:static;height:1px;min-height:0;margin:6px 4px;padding:0;
    font-size:0;line-height:0;color:transparent;background:#dfe6f0;border:0;border-radius:0;overflow:hidden;}
  html body .nav .nav-drawer .nations-grid .nidx-g:first-of-type{height:0;margin:0;}
}

/* 서랍 하위 패널의 「전체 / Best / 전체 보기」(.mega-top) — 2026-10-02 사용자 지적: 색이 채워진 두 칸이 나란히 있어 고르는 탭처럼
   보이지만 실제로는 페이지 이동 링크다 → 아래 항목들과 같은 링크 줄(아이콘+글자, 다른 줄처럼 화살표 없음)로. 색 채움(파랑·초록·노랑)을 걷는다.
   ≤1024 서랍 안에서만, 데스크톱 메가메뉴는 그대로. */
@media (max-width:1024px){
  html body .nav .nav-drawer .nav-subpanel-body .mega-top{display:block;padding:0;margin:0 0 2px;gap:0;}
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a,
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a[class]{display:flex;align-items:center;justify-content:space-between;gap:10px;
    flex:none;width:auto;min-height:50px;margin:0;padding:6px 8px;box-sizing:border-box;text-align:start;
    background:transparent;border:0;border-bottom:1px solid #eef1f6;border-radius:0;box-shadow:none;
    color:#0f2340;font-size:15px;font-weight:700;line-height:1.35;text-decoration:none;}
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a:hover,
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a:focus-visible{background:#f3f6fb;color:#0A3A8C;}
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a[aria-disabled="true"]{color:#8a94a6;pointer-events:none;}
}

/* 서랍 안 누름 반응을 「누른 줄 하나」로 (2026-10-02 사용자 지적: 오시는 길을 누르면 회사 소개까지 같이 눌리는 느낌).
   원인: 회사 소개·미디어 센터·오시는 길이 한 덩어리(.about-icon = .menu-item) 안에 있어 데스크톱용
   `.menu-item:hover{color:#1E5BBA}` 와 휴대폰 기본 탭 강조가 덩어리 전체에 걸렸다.
   → ≤1024 서랍에서는 덩어리 hover 색을 끄고 기본 탭 강조를 없앤 뒤, 줄마다 자체 눌림 배경만 준다. */
@media (max-width:1024px){
  html body .nav .nav-drawer,
  html body .nav .nav-drawer *{-webkit-tap-highlight-color:transparent;}
  html body .nav .nav-drawer .menu-item:hover,
  html body .nav .nav-drawer .menu-item.has-sub:hover{color:inherit;}
  html body .nav .nav-drawer .menu-item:hover .nav-bi .nav-ko{color:inherit;}
  html body .nav .nav-drawer :is(.submenu-link,.flyout-link,.nav-nations-toggle,.nav-documents-toggle,.mega-top a,.nation-item,
    .menu-item > .nav-bi,.submenu-link > .lbl):active{background:#eef3fb;}
}

/* ============================================================
   정책 링크를 ☰ 서랍으로 (2026-10-02 T20, 사용자 요청) — ≤1024 만, 데스크톱 푸터·헤더 그대로.
   서랍(menu 모드) 맨 아래 보조 목록 `.nav-legal`(auth.js 가 첫 `.site-footer .footer-utility` 링크를 복제):
   14px/600 회색(#4f5f78, 흰 바탕 대비 약 6.6:1), 줄 높이 44px, 위 얇은 구분선, 한 줄에 하나.
   푸터의 정책 링크 줄은 ≤1024 에서 통째로 숨긴다(규칙은 site-footer.css, 2026-10-07 사용자 결정 — 개인정보처리방침도 서랍에서 연다).
   ============================================================ */
.nav-legal{display:none;}
}
@media (max-width:1024px){
  .nav[data-drawer="menu"] .nav-drawer > .nav-legal{display:block;margin:4px 0 0;padding:8px 0 32px;border-top:1px solid #e1e7f0;}
  .nav .nav-drawer > .nav-legal .nav-legal-link{display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;min-height:44px;padding:4px 6px;box-sizing:border-box;
    font-size:14px;font-weight:600;line-height:1.35;color:#4f5f78;text-decoration:none;}
  .nav .nav-drawer > .nav-legal .nav-legal-link .kosub{display:inline;margin:0;font-size:12px;font-weight:600;color:#56667d !important;opacity:1 !important;}
  .nav .nav-drawer > .nav-legal .nav-legal-link:active{background:#eef3fb;}
  .nav .nav-drawer > .nav-legal .nav-legal-link:focus-visible{outline:3px solid #1E5BBA;outline-offset:-3px;}
  /* 메뉴 서랍 아래 여백은 정책 목록이 맡는다 */
  .nav[data-drawer="menu"] .nav-drawer:has(> .nav-legal) .nav-right{padding-bottom:0 !important;}
}
@media (max-width:1024px){
  /* 서랍은 `.menu`·`.nav-right` 가 order:3(site-gnb.css) 이라 정책 목록이 위로 올라갔다 → 맨 아래로 */
  .nav .nav-drawer > .nav-legal{order:4;}
}
@media (max-width:1024px){
  /* 닫힌 서랍은 눌리지 않고 보이지 않는다 (2026-10-02 T21 긴급) — 닫는 순간부터 서랍·자손 모두 pointer-events:none,
     닫힘 전환이 끝나면(auth.js `.is-closed`) 자손까지 visibility:hidden. 자손의 visibility:visible(데스크톱 hover 규칙 등)이 되살아나지 않게 !important. */
  .nav:not(.open) .nav-drawer,
  .nav:not(.open) .nav-drawer *{pointer-events:none !important;}
  .nav .nav-drawer.is-closed,
  .nav .nav-drawer.is-closed *{visibility:hidden !important;}
  .nav:not(.open) .nav-backdrop{pointer-events:none !important;}
}

/* 서랍 맨 아래 정책 링크 재정리 (2026-10-02 사용자 지적: 「모바일 모양이 이상한데」).
   위 줄 밑선과 목록 윗선이 겹쳐 선이 두 줄로 보였고, 링크가 메뉴처럼 세로로 띄엄띄엄 늘어서 1뎁스 메뉴로 오해됐다.
   → 윗선 제거, 서랍 바닥에 붙는 옅은 회색 묶음 안에서 작은 링크들이 한 줄로 이어지고 넘치면 줄바꿈(터치 높이 44 유지). */
@media (max-width:1024px){
  html body .nav[data-drawer="menu"] .nav-drawer > .nav-legal{display:flex;flex-wrap:wrap;align-content:flex-start;gap:0 2px;
    margin:auto 0 0;padding:10px 8px calc(14px + env(safe-area-inset-bottom));border-top:0;
    background:#f6f8fc;border-radius:12px 12px 0 0;}
  html body .nav[data-drawer="menu"] .nav-drawer > .nav-right{margin-bottom:24px !important;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link{display:inline-flex;flex:0 0 auto;min-height:44px;padding:0 10px;
    font-size:13px;font-weight:600;color:#56667d;border-radius:8px;white-space:nowrap;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link[href$="privacy"]{font-weight:800;color:#3d4d66;}
}

/* 서랍 정책 링크 — 사용자 선택(2026-10-02): 상자 없이 「가운데 작은 회색 글자 + · 구분」, 위 얇은 선, 아래 저작권 한 줄.
   글자는 작아도 터치 칸은 44px(위아래 여백). 위 블록(회색 묶음)을 덮는다. */
@media (max-width:1024px){
  html body .nav[data-drawer="menu"] .nav-drawer > .nav-legal{justify-content:center;gap:0;
    margin:auto 6px 0;padding:14px 0 calc(16px + env(safe-area-inset-bottom));
    background:transparent;border-radius:0;border-top:1px solid #e6ebf2;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link{min-height:44px;padding:0 4px;font-size:12.5px;font-weight:500;color:#6b7a90;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link[href$="privacy"]{font-weight:700;color:#4a5a72;}
  /* 구분점은 링크 「뒤」에 — 줄이 바뀔 때 점이 줄 맨 앞에 혼자 남지 않게(마지막 링크는 점 없음) */
  html body .nav .nav-drawer > .nav-legal .nav-legal-link:not(.is-eol)::after{content:"\00B7";margin-inline-start:8px;color:#b4bfcd;font-weight:700;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link:active{background:transparent;color:#1E5BBA;}
  html body .nav .nav-drawer > .nav-legal .nav-legal-copy{flex:0 0 100%;margin:6px 0 0;text-align:center;font-size:12px;line-height:1.5;color:#6f7d92;}
}

/* ============================================================
   모바일 2차 QA 정리 (2026-10-06 T40) — ≤1024 서랍 안에서만. 데스크톱 메가메뉴·국가 패널은 그대로.
   ============================================================ */
/* L4 국가명 말줄임 → 두 줄까지. 2열 칸(390 폭 169px, 320 폭 134px)에서 「영국령버진아일…」「British Virgin Isl…」처럼 잘렸다.
   글자는 줄바꿈(긴 한 단어는 칸 안에서 끊음)하고 세 줄째부터만 감춘다. 줄 높이는 내용만큼(최소 44px 유지). */
@media (max-width:1024px){
  html body .nav .nav-drawer .nations-grid .nation-item{white-space:normal;}
  html body .nav .nav-drawer .nations-grid .nation-item .nat-col{white-space:normal;}
  html body .nav .nav-drawer .nations-grid .nation-item > span:not(.nat-col),
  html body .nav .nav-drawer .nations-grid .nation-item .nat-col > span{white-space:normal;text-overflow:clip;overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-height:1.25;overflow-wrap:break-word;hyphens:auto;}
}
/* 좁은 폰(≤374, 칸 134px)은 「British Virgin Islands」「United Arab Emirates」 등 넷이 두 줄에 안 들어가 잘렸다 → 세 줄까지 */
@media (max-width:374px){
  html body .nav .nav-drawer .nations-grid .nation-item > span:not(.nat-col),
  html body .nav .nav-drawer .nations-grid .nation-item .nat-col > span{-webkit-line-clamp:3;line-clamp:3;}
}
/* L7 서랍 하위 패널의 군더더기 숨김 (데스크톱 메가메뉴는 그대로 — 마크업 정본은 web/index.html GNB, sync_gnb_header.py 로 퍼짐)
   ① (숨기지 않음) 문서별 「개인·가족」 묶음 제목 아래 같은 이름의 줄은 중복이 아니라 별도 카테고리(category/personal-family)
      링크라 남긴다 — 숨기면 모바일에서 그 카테고리로 바로 갈 길이 없어진다(상위 검토, 2026-10-06). 이름 겹침은 정본 라벨 문제.
   ② 솔루션 「수출·입 지원센터」처럼 이동할 곳(a[href])이 하나도 없는 묶음(「전체 보기」 aria-disabled + 「준비중」뿐) 통째로. */
@media (max-width:1024px){
  html body .nav .nav-drawer .nav-subpanel-body .mega-col:not(:has(a[href])){display:none !important;}
  /* 링크가 있는 묶음 안의 「준비중」 줄(예: 세무 법무법인) — 배지가 22px 아이콘 칸으로 들어가 글자가 세로로 쌓였다 → 이름 아래 글자 칸에 */
  html body .nav .nav-drawer .nav-subpanel-body .flyout-link > .badge-soon{grid-column:2;justify-self:start;white-space:nowrap;margin:3px 0 0;}
}
/* L8 손가락 자리의 :hover 가 남는 문제 — 하위 패널이 열리면 누른 자리 아래 항목이 hover 배경을 단 채 남았다.
   터치 기기(hover:none)의 서랍에서는 hover 를 바탕값으로 되돌린다(누르는 동안의 :active 반응은 그대로).
   마우스가 있는 좁은 창(hover:hover)은 종전 hover 그대로. */
@media (max-width:1024px) and (hover:none){
  html body .nav .nav-drawer :is(.nation-item,.flyout-link,.submenu-link,.mega-top a):hover:not(:active){
    background-color:transparent;}
  html body .nav .nav-drawer .nav-subpanel-body .mega-top a:hover:not(:active){color:#0f2340;}
  html body .nav .nav-drawer .submenu-link:hover:not(:active){color:#1a2e4a;}
  html body .nav .nav-drawer .nidx button:not(.on):not(:disabled):hover{background:#fff;}
  html body .nav .nav-drawer .contact-btn:hover{transform:none;box-shadow:0 4px 12px rgba(10,58,140,.3);}
}
/* 서랍 언어 선택(auth.js .nav-lang-toggle, 2026-10-06) — ✕ 옆 🌐 버튼 → 하위 패널(오른쪽에서 겹침)에 언어 목록 */
.nav-lang-toggle,.nav-akai-toggle{display:none;}
@media (max-width:1024px){
  .nav .nav-drawer-head .nav-lang-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-inline-start:auto;margin-inline-end:8px;padding:0;
    border:1px solid #d5deea;border-radius:12px;background:#f4f7fc;color:#0A2A5E;font-size:20px;line-height:1;cursor:pointer;}
  .nav .nav-drawer-head .nav-lang-toggle:focus-visible{outline:3px solid #1E5BBA;outline-offset:2px;}
  /* 서랍 AI 상담 버튼(akai-launcher.mjs .nav-akai-toggle, 2026-10-07) — 🌐 왼쪽, 같은 크기, 아이콘(.akai-fab)과 같은 ✦ 표식.
     모든 페이지의 서랍에 처음부터 보여야 해서 여기(전 페이지 공통)에 둔다 — 상자 스타일은 akai.css(누를 때 싣는다). */
  .nav .nav-drawer-head .nav-akai-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-inline-start:auto;margin-inline-end:8px;padding:0;
    border:1px solid #d5deea;border-radius:12px;background:#f4f7fc;cursor:pointer;}
  .nav .nav-drawer-head .nav-akai-toggle:focus-visible{outline:3px solid #1E5BBA;outline-offset:2px;}
  .nav .nav-drawer-head .nav-akai-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#ffbe45,#ff4e75);color:#fff;font-size:15px;line-height:1;}
  .nav .nav-drawer-head .nav-akai-toggle + .nav-lang-toggle{margin-inline-start:0;}
  .nav .nav-drawer-head .nav-akai-toggle[aria-busy="true"]{cursor:progress;opacity:.6;}
  /* AI 상담을 불러오지 못했을 때 잠깐 띄우는 안내(akai-launcher.mjs) — 서랍(z 720) 위 */
  .akai-launch-note{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 76px);transform:translateX(-50%);z-index:10070;box-sizing:border-box;width:max-content;max-width:calc(100vw - 32px);
    padding:12px 16px;border:1px solid #ffd4cf;border-radius:12px;background:#fff1f0;color:#b02a1a;box-shadow:0 12px 30px rgba(26,46,74,.18);font-size:14px;font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere;}
  .nav.has-lang-toggle .nav-drawer .nav-right .lang-menu{display:none !important;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown{display:flex !important;flex-direction:column;gap:0;position:static !important;opacity:1 !important;visibility:visible !important;
    transform:none !important;box-shadow:none !important;border:0 !important;background:none !important;padding:0 !important;margin:0 !important;min-width:0 !important;width:auto !important;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown::before{display:none !important;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown a{display:flex !important;align-items:center;justify-content:flex-start !important;gap:12px;min-height:52px;padding:0 4px !important;
    border:0 !important;border-bottom:1px solid #eef1f6 !important;border-radius:0 !important;background:none !important;font-size:16px !important;font-weight:700;color:#0f2340 !important;text-decoration:none;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown a .flag-em{flex:none;display:inline-block;width:30px;text-align:center;font-size:20px !important;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown a[aria-current="true"]{color:#1d58b3 !important;}
  .nav .nav-drawer .nav-subpanel-body > .lang-dropdown a[aria-current="true"]::after{content:"\2713";margin-inline-start:auto;font-size:18px;font-weight:900;color:#1d58b3;}
}
/* 서랍 계정 영역(회원) — 「안녕하세요, ○○님」 한 줄 + 큰 파란 그라데이션 「마이페이지」 버튼이 아래 정보수정·로그아웃과 결이 달라
   뜬금없어 보였다(2026-10-07 사용자 지적) → 인사말과 마이페이지를 한 장의 프로필 카드로 묶는다. ≤1024 서랍만, 데스크톱 드롭다운 불변. */
@media (max-width:1024px){
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .ud-greet{display:block;position:relative;min-height:40px;line-height:1.45;margin:0;padding-block:14px;padding-inline:68px 16px;
    border:1.5px solid #d5deea;border-bottom:0;border-radius:14px 14px 0 0;background:#f4f7fc;text-align:start;font-size:13.5px;font-weight:600;color:#5b6e8c;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .ud-greet::before{content:'';position:absolute;inset-inline-start:16px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;
    background:#dfe8f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2A5E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4.2 3.6-6.5 8-6.5s8 2.3 8 6.5'/%3E%3C/svg%3E") center/22px no-repeat;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .ud-greet [data-auth-name]{font-size:16.5px;font-weight:800;color:#0A2A5E;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary{display:flex;align-items:center;margin-top:-10px;justify-content:space-between;min-height:50px;padding:0 16px !important;
    border:1.5px solid #d5deea;border-top:1px solid #e4ebf5;border-radius:0 0 14px 14px;background:#fff;box-shadow:none;transform:none;color:#0A2A5E;font-size:15px;font-weight:800;}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary::after{content:'›';font-size:22px;line-height:1;color:#7c8fae;}
  html[dir="rtl"] .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary::after{content:'‹';}
  .nav .nav-drawer .nav-right .user-dropdown [data-auth="member"] .my-primary:hover{background:#f7f9fd;color:#0A2A5E;}
  .nav .nav-drawer .user-dropdown [data-auth] .my-primary .kosub{color:#5b6e8c !important;}
}
/* 휴대폰 하단 내비게이션 바·홈 표시줄·노치 대응(2026-10-07) — auth.js fitViewportToDevice 가 viewport-fit=cover 를 붙여
   env(safe-area-inset-*) 가 실제 값이 된 뒤의 보정. 이미 env 를 쓰던 곳(AI 아이콘·입력창, 국가 선택 시트, 미디어 시트, 글쓰기·맨 위로,
   장바구니·구매 하단 바)은 그대로 살아나고, 빠져 있던 곳만 더한다. */
@supports (padding:env(safe-area-inset-bottom)){
  /* 가로 모드 노치: 본문이 노치 아래로 들어가지 않게(세로 모드는 0) */
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  @media (max-width:1024px){
    /* 서랍 맨 아래(정책 링크·저작권)가 홈 표시줄·내비 바에 가리지 않게 */
    .nav .nav-drawer{padding-bottom:env(safe-area-inset-bottom);}
    .nav .nav-drawer .nav-subpanel{padding-bottom:env(safe-area-inset-bottom);}
    /* AI 전체 화면: 가로 모드 노치 좌우 */
    .akai.is-docked{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
  }
}

/* 「이런 분께 추천」(.aud-fold, who·center·industry 생성물 270쪽) — 늘 펼쳐 보인다(2026-10-07 사용자 지적 「셀렉트 박스로 왜 되어 있지」).
   접힘 상자(▾·max-height:0)로 그려져 있었지만 펼치는 스크립트가 어디에도 없어, 눌러도 안 열리고 추천 대상 칩 4개가 PC·모바일 모두 보이지 않았다.
   생성물 HTML 은 손대지 않고 여기서 덮는다 — 화살표를 감추고, 머리는 그냥 제목 줄, 본문은 늘 보인다. 모든 폭 공통. */
.aud-fold-head{cursor:default !important;padding-bottom:10px !important;min-height:0 !important;}
.aud-fold .aud-chev{display:none !important;}
.aud-fold .aud-fold-body{max-height:none !important;overflow:visible !important;}
.aud-fold:hover{box-shadow:none;}
/* 휴대폰은 칩을 한 줄에 하나씩 쌓으면 상자만 330px 남짓 → 두 칸으로 줄인다(아이콘은 글자 위). */
@media (max-width:640px){
  .aud-fold .aud-fold-inner{grid-template-columns:1fr 1fr !important;gap:8px !important;padding:2px 14px 14px !important;}
  .aud-fold .aud-chip{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;}
  .aud-fold .aud-chip span{font-size:20px;line-height:1;}
}
/* ── 아이폰(WebKit) 호환 (2026-10-07 T05) — 화면 폭과 무관하게 「기능 미지원 브라우저」에만 걸리는 폴백.
   카테고리·FAQ·공지 페이지(생성물) 인라인 .chip 규칙을 덮는다. 원본 인라인은 손대지 않는다.
   1) color-mix 미지원(iOS<16.2): 선택 칩 배경(::before)의 linear-gradient 선언이 통째로 무시돼
      흰 글자(.chip.on .lb)가 흰 바탕에 묻혔다 → 같은 선택자에 color-mix 없는 그라디언트를 준다.
   2) 반투명 칩의 backdrop-filter 는 Safari 가 -webkit- 접두어만 읽는 버전이 있다. */
:is(#chips,#nchips) .chip{-webkit-backdrop-filter:blur(6px);}
@supports not (color: color-mix(in srgb, red, blue)){
  :is(#chips,#nchips) .chip::before{background:linear-gradient(135deg,var(--cc,#1E5BBA),#0A2A5E);}
  :is(#chips,#nchips) .chip:not(.on) .ct{background:#fff;border-color:currentColor;}
}

/* 사이트맵 휴대폰(2026-10-13 사용자 「펼친 채로, 쓸데없는 문구 지우고 간격 촘촘하게」) — PC 는 그대로.
   설명 줄·빵부스러기 숨김, 카드·제목·링크 여백을 줄이고 모든 링크를 같은 2열 칩(40px)으로. */
@media (max-width:1024px){
  .lg-bc,.lg-meta{display:none!important}
  .lg-wrap{padding:12px 12px 32px!important}
  .lg-wrap h1{font-size:20px!important;margin:0 0 10px!important}
  .sm-grid{grid-template-columns:1fr!important;gap:8px!important}
  .sm-card{padding:12px 12px 12px!important;border-radius:12px!important}
  .sm-card h2{display:flex;align-items:baseline;gap:6px;font-size:15.5px!important;line-height:1.3!important;margin:0 0 8px!important;padding:0 0 7px!important;border-bottom-width:2px!important}
  .sm-card h2 .no{margin:0!important;font-size:12px!important}
  .sm-card h2 .i18n-sub{font-size:11.5px;font-weight:600;color:#7a879c}
  .sm-card>a,.sm-card .sub a{display:flex!important;align-items:center;min-height:40px!important;margin:0!important;padding:8px 10px!important;border:1px solid #e8eef6!important;border-radius:8px!important;background:#f9fbfe!important;font-size:14px!important;font-weight:600!important;line-height:1.3!important;color:#28344c!important;text-decoration:none!important}
  .sm-card>a[hidden]{display:none!important}
  .sm-card .sub a::before{display:none!important}
  .sm-card a .i18n-sub{display:none}
  .sm-card{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
  .sm-card>h2,.sm-card>.sm-mid,.sm-card>.sub{grid-column:1/-1}
  .sm-card .sub{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important}
  .sm-mid{margin:4px 0 0!important;font-size:12.5px!important;font-weight:800!important;color:#5b6b84!important}
  .sm-card .sm-mid:first-of-type{margin-top:0!important}
}

/* 서랍 아래 약관 영역 다시(2026-10-13 사용자 「하단 이 부분 정리 잘해줘」) — 사이트맵은 메뉴로 올라갔고 남은 4개를
   2×2 칸(밑줄·구분점 없음, 가운데, 44px)으로 반듯하게, 저작권은 그 아래 한 줄. 오른쪽 아래 떠 있는 버튼(AI 상담·즐겨찾기)에 가리지 않게 오른쪽 여백. */
@media (max-width:1024px){
  html body .nav .nav-drawer > .nav-legal{display:grid!important;grid-template-columns:1fr 1fr;gap:0 8px!important;align-items:center;
    margin:auto 16px 0!important;padding:10px 64px calc(14px + env(safe-area-inset-bottom)) 0!important;border-top:1px solid #e6ebf2!important}
  html[dir="rtl"] body .nav .nav-drawer > .nav-legal{padding:10px 0 calc(14px + env(safe-area-inset-bottom)) 64px!important}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link{display:flex!important;align-items:center;justify-content:flex-start;min-height:40px;padding:0 4px!important;
    font-size:13px!important;font-weight:500;color:#6b7a90!important;text-decoration:none!important;white-space:nowrap}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link::after{content:none!important}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link[href$="privacy"]{font-weight:700!important;color:#41546f!important}
  html body .nav .nav-drawer > .nav-legal .nav-legal-copy{grid-column:1/-1;margin:8px 0 0!important;padding:0 4px;text-align:start!important;font-size:11.5px!important;color:#8a97ab!important}
}
@media (max-width:1024px){
  html body .nav .nav-drawer > .nav-legal .nav-legal-link[href$="sitemap"]{display:none!important}  /* 메뉴 줄로 올라감 */
}
/* 사이트맵 휴대폰: 구역 번호(01·02…) 빼기 · 소제목(개인(가족) 등)을 「글자 + 옅은 선」 구분줄로(2026-10-13 사용자 「중간 소제목 이질감」) */
@media (max-width:1024px){
  .sm-card h2 .no{display:none!important}
  .sm-card .sm-mid{display:flex!important;align-items:center;gap:8px;margin:6px 0 0!important;padding:0 2px!important;background:none!important;border:0!important;
    font-size:12.5px!important;font-weight:700!important;color:#1E5BBA!important;letter-spacing:0}
  .sm-card .sm-mid::after{content:"";flex:1;height:1px;background:#e3e9f2}
  .sm-card .sm-mid .i18n-sub{font-size:11px;font-weight:600;color:#7a879c}
}

/* ── 서랍 공용 줄 병기(2026-10-20 T02) — 영어 + 바로 아래 줄 작은 한국어. 정책 링크·로그아웃·상담 CTA 가 옆으로 붙던 것 정리 ── */
@media (max-width:1024px){
  html body .nav .nav-drawer > .nav-legal .nav-legal-link{display:flex!important;flex-wrap:wrap;align-content:center;min-height:44px;height:auto;padding-block:6px!important;line-height:1.25}
  html body .nav .nav-drawer > .nav-legal .nav-legal-link .kosub{display:block!important;flex:0 0 100%;margin:1px 0 0!important;font-size:11px!important;font-weight:600;line-height:1.2}
  html body .nav .nav-drawer .user-dropdown [data-auth] button[data-action="logout"]{flex-wrap:wrap!important;align-content:center;justify-content:center!important;height:auto!important;min-height:48px;padding-block:6px!important;row-gap:0!important;line-height:1.25}
  html body .nav .nav-drawer .user-dropdown [data-auth] button[data-action="logout"] .kosub{display:block!important;flex:0 0 100%;order:5;margin:1px 0 0!important;text-align:center;font-size:11px!important;line-height:1.2}
  html body .nav .nav-drawer .contact-btn.bi-btn{flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;line-height:1.2}
  html body .nav .nav-drawer .contact-btn.bi-btn .nav-ko{display:block!important;flex:none!important;margin:0!important;font-size:11.5px!important;text-align:center}
}
/* 계정 서랍의 「My Page」「Get a Quote」 줄 — 아이콘 | 영어 + 아래 줄 한국어 | › (T02) */
@media (max-width:1024px){
  html body .nav[data-drawer="account"] .nav-drawer .user-dropdown [data-auth="member"] a.my-primary,
  html body .nav[data-drawer="account"] .nav-drawer .nav-right a.contact-btn.bi-btn{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:0;align-items:center!important;justify-items:start!important;justify-content:stretch!important;height:auto!important;min-height:56px!important;padding-block:6px!important;text-align:start!important}
  html body .nav[data-drawer="account"] .nav-drawer .user-dropdown [data-auth="member"] a.my-primary::before,
  html body .nav[data-drawer="account"] .nav-drawer .nav-right a.contact-btn.bi-btn::before{grid-column:1;grid-row:1 / 3}
  html body .nav[data-drawer="account"] .nav-drawer .user-dropdown [data-auth="member"] a.my-primary::after,
  html body .nav[data-drawer="account"] .nav-drawer .nav-right a.contact-btn.bi-btn::after{grid-column:3;grid-row:1 / 3}
  html body .nav[data-drawer="account"] .nav-drawer .user-dropdown [data-auth="member"] a.my-primary .kosub,
  html body .nav[data-drawer="account"] .nav-drawer .nav-right a.contact-btn.bi-btn .nav-ko{display:block!important;grid-column:2;grid-row:2;margin:0!important;font-size:11.5px!important;font-weight:600;line-height:1.2;text-align:start!important;flex:none!important}
  html body .nav[data-drawer="account"] .nav-drawer .nav-right a.contact-btn.bi-btn .nav-en{grid-column:2;grid-row:1;flex:none!important;text-align:start!important}
}