/* ============================================================
   mobile.css — 업코어마케팅 모바일 공통 셸 최적화
   · 이 파일의 모든 규칙은 미디어쿼리 안에만 작성한다.
     예외는 아래 "허용된 전역"(① word-break / .mb-nowrap,
     ② picture/source 레이아웃 중립화) 뿐.
   · 인라인 <style> 뒤에 로드되어 동일 특이성에서 후순위 승리로 오버라이드한다.
   · 드로어 색·라운드·그림자는 페이지 :root 토큰(--ink/--body/--border-soft/
     --gray/--blue/--sh-3/--sh-blue/--nav-h …)을 그대로 재사용한다(신규 색 없음).
   ============================================================ */


/* ============================================================
   허용된 전역 ① — F항 한글 줄바꿈 (word-break:keep-all)
   데스크톱에도 동일 적용. 레이아웃 영향 없음, 가독성만 개선.
   ============================================================ */
.lg-body h3,
.lg-body th,
.lg-body td,
.lg-contact p{word-break:keep-all}

/* 전화번호 등 하이픈 포함 토큰이 중간에서 끊기지 않도록 (mobile.js가 감싼다) */
.mb-nowrap{white-space:nowrap}


/* ============================================================
   허용된 전역 ② — <picture> 래핑 레이아웃 중립화 (전 뷰포트 필수)
   WebP 전환으로 7개 페이지 전부에 <picture><source>가 들어갔다.
   · <picture> 는 기본값이 inline 이라 플렉스/그리드 아이템으로 잡혀
     래핑 전후 박스 구조가 달라진다 → display:contents 로 박스 자체를 제거한다.
   · <source> 도 UA 기본값이 inline 이라 display:contents 하위에서
     보이지 않는 빈 박스가 되어 플렉스 gap 슬롯을 차지한다(Chrome 실측:
     페르소나 ±56px, 전자책 표지 300→650px, 콘텐츠 1,167px 이동) → display:none.
   · 모바일 전용이 아니라 전 뷰포트에 필요하므로 반드시 미디어쿼리 밖에 둔다.
   · 7개 페이지 인라인 <style> 에 흩어 넣으면 드리프트가 생기므로
     공유 CSS 한 곳에서 보장한다(이미지 비중 높은 index/insights/case-studies 는
     인라인 사본을 중복 유지 — 동일 선언이라 충돌 없음).
   ============================================================ */
picture{display:contents}
picture>source{display:none}


/* ============================================================
   ≤820px — 모바일 공통 셸
   ============================================================ */
@media (max-width:820px){

  /* ---------- G. 앵커 점프 오프셋 (.nav 64px + 여유 12px) ----------
     ※ 모바일 전용. 데스크톱은 원본 그대로(scroll-padding-top 미지정 = auto).
     ※ index.html 전용 72/116px(#uBar 44 + .nav 64) 오버라이드는
        index 인라인 <style>(mobile.css 뒤 로드)이 담당. */
  html{scroll-padding-top:76px}


  /* ---------- A. 내비게이션 : 가로 메뉴 숨김 + 햄버거 노출 ---------- */
  .nav{padding:0 16px}
  .nav .links{display:none}

  /* 로고 링크 탭 타깃 44px — .nav-in{align-items:center} 안에서 세로 중앙 유지.
     .nav 바 높이(64px)·로고 이미지 높이(22px)는 그대로, 히트영역만 확장한다. */
  .nav a.brand{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 6px;margin-left:-6px;
    -webkit-tap-highlight-color:transparent}

  .mb-burger{
    flex:none;width:44px;height:44px;padding:0;margin-right:-6px;
    display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:10px;background:transparent;color:var(--ink,#191f28);
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:background .18s}
  .mb-burger:active{background:rgba(20,24,35,.06)}
  .mb-burger .mb-burger-bars{display:block;width:20px;height:14px;position:relative}
  .mb-burger .mb-burger-bars i{
    position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
    transition:transform .22s var(--spring,cubic-bezier(.16,1,.3,1)),opacity .18s}
  .mb-burger .mb-burger-bars i:nth-child(1){top:0}
  .mb-burger .mb-burger-bars i:nth-child(2){top:6px}
  .mb-burger .mb-burger-bars i:nth-child(3){top:12px}
  .mb-burger[aria-expanded="true"] .mb-burger-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mb-burger[aria-expanded="true"] .mb-burger-bars i:nth-child(2){opacity:0}
  .mb-burger[aria-expanded="true"] .mb-burger-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* 딤 (배경) — 모달(z:200)보다 아래, 채팅위젯(z:120)보다 위 */
  .mb-scrim{
    position:fixed;inset:0;z-index:150;
    background:rgba(20,24,35,.5);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .24s ease}
  .mb-scrim.on{opacity:1;pointer-events:auto}

  /* 드로어 패널 — 흰 카드(헤더+목록) 위에 회색 존, 바닥에 CTA 고정 */
  .mb-drawer{
    position:fixed;top:0;right:0;bottom:0;z-index:151;
    width:min(320px,86vw);max-width:100%;
    display:flex;flex-direction:column;
    background:var(--gray,#f6f7f9);border-left:1px solid var(--border,#e6e8ec);
    box-shadow:var(--sh-3,0 4px 12px rgba(20,24,35,.07),0 30px 60px -22px rgba(20,24,35,.24));
    font-family:var(--kr,system-ui,-apple-system,sans-serif);
    transform:translateX(100%);visibility:hidden;
    transition:transform .28s var(--spring,cubic-bezier(.16,1,.3,1)),visibility .28s}
  .mb-drawer.on{transform:none;visibility:visible}

  /* --- 헤더 : .nav 와 동일한 64px, 좌 브랜드 · 우 닫기 --- */
  .mb-drawer .mb-drawer-head{
    flex:none;height:var(--nav-h,64px);padding:0 10px 0 20px;
    display:flex;align-items:center;gap:10px;
    background:var(--white,#fff);
    border-bottom:1px solid var(--border-soft,#eef0f3)}
  .mb-drawer .mb-brand{
    flex:none;display:inline-flex;align-items:center;
    min-height:44px;margin-left:-6px;padding:0 6px;border-radius:10px;
    color:var(--ink,#191f28);text-decoration:none;line-height:1;
    font-family:var(--mont,var(--kr,system-ui));font-weight:800;font-size:19px;letter-spacing:.05em;
    -webkit-tap-highlight-color:transparent;transition:background .16s}
  .mb-drawer .mb-brand:active{background:var(--gray,#f6f7f9)}
  .mb-drawer .mb-brand img{height:22px;width:auto;display:block}
  .mb-drawer .mb-close{
    flex:none;margin-left:auto;
    width:44px;height:44px;padding:0;border:0;border-radius:10px;
    background:transparent;color:var(--sub,#6b7079);cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    -webkit-tap-highlight-color:transparent;transition:background .18s,color .18s}
  .mb-drawer .mb-close:active{background:var(--gray,#f6f7f9);color:var(--ink,#191f28)}
  .mb-drawer .mb-close svg{width:20px;height:20px;display:block}

  /* --- 목록 : hairline 구분선 + 56px 리듬 --- */
  .mb-drawer .mb-drawer-nav{
    flex:0 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    display:block;padding:6px 20px 14px;
    background:var(--white,#fff);
    border-bottom:1px solid var(--border,#e6e8ec)}
  .mb-drawer .mb-drawer-nav a{
    position:relative;box-sizing:border-box;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    min-height:56px;margin:0 -20px;padding:0 20px;
    font-size:16px;font-weight:600;line-height:1.4;letter-spacing:-.01em;
    color:var(--ink,#191f28);text-decoration:none;word-break:keep-all;
    -webkit-tap-highlight-color:transparent;transition:background .16s,color .16s}
  .mb-drawer .mb-drawer-nav a::after{
    content:"";position:absolute;left:20px;right:20px;bottom:0;height:1px;
    background:var(--border-soft,#eef0f3)}
  .mb-drawer .mb-drawer-nav a:last-child::after{display:none}
  .mb-drawer .mb-drawer-nav a:active{background:var(--gray,#f6f7f9)}
  .mb-drawer .mb-chev{flex:none;display:block;color:var(--ghost,#b0b8c1)}
  .mb-drawer .mb-chev svg{width:16px;height:16px;display:block}

  /* 현재 페이지 — 좌측 3px 액센트 + 블루 텍스트 (미세 표시) */
  .mb-drawer .mb-drawer-nav a[aria-current="page"]{color:var(--blue,#2d64fa);font-weight:700}
  .mb-drawer .mb-drawer-nav a[aria-current="page"] .mb-chev{color:var(--blue-light,#5b8bff)}
  .mb-drawer .mb-drawer-nav a[aria-current="page"]::before{
    content:"";position:absolute;left:0;top:50%;margin-top:-10px;
    width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--blue,#2d64fa)}

  /* --- 하단 CTA : 목록과 분리해 패널 바닥에 고정 --- */
  .mb-drawer .mb-drawer-foot{
    flex:none;margin-top:auto;
    padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px))}
  .mb-drawer .mb-cta{
    display:flex;align-items:center;justify-content:center;
    min-height:54px;border-radius:14px;
    background:var(--blue,#2d64fa);color:#fff;text-decoration:none;
    font-size:16px;font-weight:800;line-height:1.2;letter-spacing:-.01em;word-break:keep-all;
    box-shadow:var(--sh-blue,0 8px 22px -8px rgba(45,100,250,.45));
    -webkit-tap-highlight-color:transparent;transition:background .18s}
  .mb-drawer .mb-cta:active{background:var(--blue-dark,#1c4fd6);color:#fff}

  /* 드로어 열림 중 배경 스크롤 잠금 */
  body.mb-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}


  /* ---------- B. 모달 세로 스크롤 ---------- */
  .modal-back{
    overflow-y:auto;
    align-items:flex-start;
    padding:24px 16px 40px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain}
  .modal{max-height:none;margin:0 auto}


  /* ---------- C. 폼 입력 16px (iOS 자동 확대 방지) ---------- */
  .ct-f input,.ct-f select,.ct-f textarea,
  .field input,.field select,.field textarea{font-size:16px}


  /* ---------- D. 탭 타깃 44×44 확보 ---------- */
  .ft-nav a{display:flex;align-items:center;min-height:44px}

  .mclose{width:44px;height:44px;top:10px;right:10px}

  /* 브레드크럼 "홈" : 44×44 확보. 세로·가로 모두 "패딩 + 같은 크기의 음수 마진"으로
     히트영역만 키우고 레이아웃 폭(아우터 박스)은 그대로 둔다.
     글자 폭 11.25px + 좌 27 + 우 8 = 46.25px(≥44) / 높이 44px.
     아우터 폭 = 46.25 - 27 = 19.25px 로 변경 전과 동일 → 뒤따르는 "›" 좌표 불변. */
  .jx-crumb a{display:flex;align-items:center;min-height:44px;
    padding:0 8px 0 27px;margin:-12px 0 -12px -27px}

  .nf-links{gap:0 16px}
  .nf-links a{display:flex;align-items:center;min-height:44px;padding:0 6px}


  /* ---------- E. 모바일 타이포 스케일 (실콘텐츠 전용) ----------
     역할별 단계를 고정한다. 같은 역할이면 페이지가 달라도 같은 값을 쓴다.

       T1 본문 / 카드 설명 / 리스트 ........ 14px 이상 (페이지 고유값 유지 · 여기서 미조정)
       T2 라벨 (폼 라벨) ................... 13.5px
       T3 보조 (메타·날짜·캡션·푸터·브레드크럼) 13px
       T4 마이크로 (뱃지·태그·단위·필수표시·출처) 12.5px  ← 실콘텐츠 하한선

     ※ 12.5px 미만은 "목업 내부"에서만 허용한다.
        (#upcore-dash · #upcore-rep · #reference · .rpt-* · .pvcard · .wf-card ·
         .svc-funnel .fn-l · svg text)
     ※ 페이지별 오버라이드 <style>가 mobile.css 뒤에 로드되므로,
        여기 값과 다른 값을 그 블록에서 다시 지정하면 그쪽이 이긴다. */

  /* --- T2. 라벨 (폼) --- */
  .ct-f label{font-size:13.5px}
  .field label{font-size:13.5px}

  /* --- T3. 보조 텍스트 --- */
  .ft-biz .row{font-size:13px}
  .ft-copy{font-size:13px}
  .ct-note{font-size:13px}
  .lg-body .upd{font-size:13px}
  .jx-crumb{font-size:13px}

  /* --- T4. 마이크로 라벨 · 뱃지 (하한 12.5px) --- */
  .ct-f label em{font-size:12.5px}
  .m-eyebrow{font-size:12.5px}
  .m-note{font-size:12.5px}
  .modal .field label .req,
  .modal .field label .opt{font-size:12.5px}
  .nf-foot{font-size:12.5px}

  /* T4 승격 — 하한(12.5px) 미달이던 실콘텐츠.
     특이성은 인라인 원본과 동일하게 맞추고(후순위 승리), 값만 12.5px 로 통일한다.
       .svc-badge            10   → 12.5  (뱃지  = .lockbadge / .badge / .tag 와 동일 tier)
       .stat-src             11   → 12.5  (출처 캡션)
       .stat-card .stat-sub  11.5 → 12.5  (수치 부연 캡션)
       #contact .cd-dday     11   → 12.5  (카운트다운 칩 = .ubar-cd 12.5 와 동일 tier)
       #contact .cdbig-lab   11.5 → 12.5  (데스크톱 원본값 12.5 복원)
       #contact .cdu em      12   → 12.5  (단위 라벨 = .stat-n em 12.5 와 동일 tier) */
  .svc-badge{font-size:12.5px}
  .stat-src{font-size:12.5px}
  .stat-card .stat-sub{font-size:12.5px}
  #contact .cd-dday{font-size:12.5px}
  #contact .cdbig-lab{font-size:12.5px}
  #contact .cdu em{font-size:12.5px}


  /* ---------- F 보조. 표 가로 넘침 방지 (헤더 nowrap 해제 + 셀 여백 축소) ---------- */
  .lg-body th{white-space:normal}
  .lg-body th,.lg-body td{padding:9px 8px}


  /* ---------- H. 채팅 위젯 겹침 — 푸터 하단 여백 확보 ---------- */
  /* ※ 인라인 CSS 의 footer#contact{padding:0 0 44px} 보다 특이성이 높아야 하므로
        id 를 포함한 셀렉터를 함께 나열한다 */
  body.mb-haschat footer,
  body.mb-haschat footer#contact{padding-bottom:104px}

}


/* ============================================================
   ≥821px — 데스크톱 : 주입 요소 완전 비노출 (레이아웃 무변경 보장)
   ※ .on 상태까지 포함해 특이성을 맞춰 !important 없이 차단
   ============================================================ */
@media (min-width:821px){
  .mb-burger,
  .mb-scrim,.mb-scrim.on,
  .mb-drawer,.mb-drawer.on{display:none}
  body.mb-lock{position:static}
}