/* SAMJIN C&I — dedicated mobile experience
   Loaded last on every public page. Phones are composed independently from
   desktop instead of inheriting a squeezed desktop canvas. */

html,body,main,section,header,footer,.container{min-width:0}
body{overflow-x:clip}
img,svg,video,canvas,iframe,table,pre{max-width:100%}
/* 폰 전용 요소는 '기본 숨김'이 원칙 — 미디어쿼리 안에서만 켠다.
   .mbar 는 641px 이상에서 푸터 안 일반 블록으로, .lnb__sel(카테고리 드롭다운)은
   PC 에서 LNB 칩 아래 목록이 통째로 펼쳐져 보였다(2026-08-12 '피시 페이지가 다 깨졌는데'). */
.mbar,.lnb__sel{display:none}

@media (max-width:900px){
  :root{--mobile-hit:44px}
  .site-header,.site-header.is-scrolled{height:var(--header-h)}
  /* ↑ 이 한 줄이 헤더의 스크롤 축소(76→62px)를 되돌린다. 그런데 sub.css 의
     html.is-scrolled .lnb{top:62px} 는 그 축소를 전제하고 있어, 축소가 없는 이
     구간(769~900px = 가로모드 폰)에서 LNB 가 헤더 뒤로 14px 파고들며 활성 칩의
     둥근 윗머리가 잘렸다(실측). 여기서는 실제 헤더 높이를 그대로 따라간다. */
  html.is-scrolled .lnb{top:var(--header-h)}
  .header__inner{grid-template-columns:auto 1fr;gap:12px}
  .nav{display:none}
  .header__actions{justify-self:end}
  .header__actions .hdr-drop{display:none}
  .nav-toggle{display:flex;width:var(--mobile-hit);height:var(--mobile-hit);margin-right:-8px;touch-action:manipulation}

  .mobile-nav{
    inset:var(--header-h) 0 0;max-block-size:none;
    padding:clamp(18px,4vh,32px) max(var(--gutter),env(safe-area-inset-right)) max(28px,calc(env(safe-area-inset-bottom) + 18px)) max(var(--gutter),env(safe-area-inset-left));
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch
  }
  .mobile-nav>nav{min-height:100%}
  .mobile-nav>nav>a{display:flex;align-items:center;min-height:54px;padding:13px 4px;font-size:clamp(1rem,4.2vw,1.15rem)}
  .mobile-nav>nav>a::after{content:"\2197";margin-left:auto;opacity:.44;font-size:.82em}

  /* ── 드로어 하위 메뉴(2026-08-12) ─────────────────────────────────
     대분류 줄 = 그 그룹 첫 페이지 링크 + 펼침 버튼. 현재 보고 있는 그룹은 열린 채로
     시작한다. 하위 항목은 44px 이상 히트로 놓아 스크롤 중 오탭을 줄인다. */
  .mnav-grp{border-bottom:1px solid rgba(235,192,140,.12)}
  .mnav-grp__head{display:flex;align-items:center;gap:8px}
  .mnav-grp__head>a{flex:1;display:flex;align-items:center;min-height:54px;padding:13px 4px;
    font-size:clamp(1rem,4.2vw,1.15rem);font-weight:700}
  .mnav-grp__tog{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;
    border-radius:10px;color:inherit;opacity:.6;touch-action:manipulation;transition:transform .22s var(--ease),opacity .2s}
  .mnav-grp__tog svg{width:20px;height:20px}
  .mnav-grp.is-open .mnav-grp__tog{transform:rotate(180deg);opacity:.95}
  /* 0fr → 1fr 전환은 자식이 '하나'여야 성립한다 — 링크들을 감싼 div 가 그 자식이다. */
  .mnav-grp__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s var(--ease)}
  .mnav-grp.is-open .mnav-grp__sub{grid-template-rows:1fr}
  .mnav-grp__sub,.mnav-grp__sub>div{overflow:hidden}
  .mnav-grp__sub a{display:flex;align-items:center;min-height:44px;padding:8px 4px 8px 14px;
    font-size:.97rem;opacity:.82;position:relative}
  .mnav-grp__sub a::before{content:"";position:absolute;left:2px;top:50%;width:5px;height:1px;
    background:currentColor;opacity:.45;transform:translateY(-50%)}
  .mnav-grp__sub a[aria-current="page"]{opacity:1;font-weight:700;color:#EBC08C}
  .mnav-grp__sub a:last-child{margin-bottom:6px}
  .mnav-grp--fam .mnav-grp__head>a::after{content:"\2197";margin-left:auto;opacity:.44;font-size:.82em}
  /* 패밀리 하위 항목은 로고를 함께 — 세 PNG 모두 배경 투명이라 판을 깔지 않는다. */
  .mnav-grp--fam .mnav-grp__sub a{gap:9px;padding-left:4px}
  .mnav-grp--fam .mnav-grp__sub a::before{content:none}
  .mnav-grp--fam .mnav-grp__sub img{width:auto;flex:none;opacity:.92;background:none}

  /* 드로어를 열면 헤더만 밝은 크림 띠로 남아 어두운 드로어 위에 흰 배경처럼 보였다
     — 열려 있는 동안에는 헤더를 투명으로 두어 한 판으로 읽히게 한다(닫기 버튼은 밝게). */
  /* 드로어와 같은 어두운 색으로 덮는다 — 투명으로 두면 그 틈으로 페이지 사진이 비쳐
     드로어 위에 창문이 난 것처럼 보인다(premium.css:881 .mobile-nav 와 같은 값). */
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled{background:rgba(16,11,7,.97) !important;box-shadow:none !important;
    border-bottom-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  /* premium.css:126 이 (0,3,1)+!important 로 잉크색을 못박는다 — 같은 무게로 이긴다. */
  body:not(.home).nav-open .site-header .nav-toggle,
  body.home.nav-open .site-header .nav-toggle{color:#F7F0E5 !important}
  .mobile-nav__lang{margin-top:auto;padding-top:20px}
  .mobile-nav__lang button{min-height:48px;touch-action:manipulation}
  body.nav-open{position:fixed;width:100%;overflow:hidden}

  /* ── 넓은 폰(폴드 펼침)·태블릿 세로: 드로어를 우측 패널로 ──────────────
     화면 전체를 덮으면 폴드를 펼쳤을 때 메뉴 6줄이 900px 폭에 늘어져 텅 비어 보인다
     (2026-08-12 사장님 지적 — 삼진 작업분은 우측 패널이라 꽉 차 보인다).
     삼진 .drawer 와 같은 어법: 오른쪽에서 나오는 min(86vw,420px) 패널 + 어두운 배경. */
  @media (min-width:561px){
    .mobile-nav{
      left:auto; right:0; width:min(86vw,420px);
      border-left:1px solid rgba(235,192,140,.16);
      box-shadow:-26px 0 60px -30px rgba(0,0,0,.75);
    }
    /* 패널 밖은 어둡게 덮어 본문과 분리한다(탭하면 main.js 가 닫는다). */
    body.nav-open::after{
      content:""; position:fixed; inset:var(--header-h) 0 0; z-index:90;
      background:rgba(8,5,3,.5); pointer-events:none;
    }
    .mobile-nav{z-index:100}
  }

  a,button,input,select,textarea{touch-action:manipulation}
  input,select,textarea{font-size:16px}
  .btn,.pills a,.dl-btn,.pager a,.acc__q,.lnb a,.pcard__link{min-height:var(--mobile-hit)}
  /* 푸터·게시판의 작은 링크 — 시각 변화 없이 히트영역만 넓힌다(실측 15~23px → 40px+) */
  .footer__legal a,.footer__family a,.footer__corp a{display:inline-block;padding-block:9px}
  .site-footer .copy-addr{padding-block:9px}
  .board td.b-title a{display:inline-block;padding-block:9px}
  /* ── 본문 활자(폰+태블릿 세로 공통) ─────────────────────────────────
     ≤560 에만 두었더니 폰 16px / 아이패드 미니(768px) 15.4px 로 큰 화면이 더 작은
     역전이 생겼다(실측). 같은 한글 본문은 같은 크기로 간다.
     ★ .eyebrow 는 <p> 라서 `.sub-section p` 에 걸려 12px 의도가 16px 로 커졌었다
       — :not() 으로 빼서 라벨/본문 위계를 되살린다. */
  .sub-section p:not(.eyebrow),.frow p,.icard p,.icard ul li,.esg-item li,
  .pcard__desc,.acc .acc__a,.acc .acc__a p,.wp-fig p,.pd-lead,.pd-spec dd,.pd-spec dt,
  .tl__item span,.qc span:not(.qc__ico),.legal p,.legal li,
  .legal .legal-tb th,.legal .legal-tb td,
  .lede-body .sign,.form-field label{font-size:1rem;line-height:1.72}
  .pcard__desc{line-height:1.62}
  /* 카드 제목 — 본문 16px 과 위계가 서도록 한 단 위로. */
  .icard h3,.pcard__name,.acc__q{font-size:1.06rem}
  /* 동의문은 87자짜리 법적 고지인데 13.8px 로 가장 작았다. 본문보다 한 단만 낮춘다. */
  .form-agree{font-size:.94rem;line-height:1.65}

  /* 본문형 화살표 링크(홈 '전체 보기'·상세 '제품 전체 보기'·FAQ 카드 링크·제품명 링크,
     실측 21~26px) — 히트박스만 ::after 오버레이로 44px급 확장.
     ★패딩+음수마진 방식을 쓰면 안 된다: margin-block 이 각 페이지 인라인의
     margin-top(홈 .rx-more 의 clamp 28~44px, FAQ .icard__go 의 16px)을 캐스케이드로
     덮어써 간격이 무너지고, 홈에서는 윗줄 링크를 8px 침범해 클릭까지 탈취했다(실측). */
  .rx-more,.pd-back,.icard__go,.pcard__more{position:relative}
  .rx-more::after,.pd-back::after,.icard__go::after,.pcard__more::after{content:"";position:absolute;top:-10px;bottom:-10px;left:0;right:0}

}

@media (max-width:768px){
  :root{--header-h:64px;--gutter:clamp(18px,5.2vw,28px);--card-pad:clamp(20px,5.5vw,26px)}
  .brand__logo{height:30px}
  .site-header.is-scrolled .brand__logo{height:28px}
  .section,.sub-section{padding-block:clamp(58px,15vw,82px)}
  .btn{min-height:48px;padding:13px 20px}
  .btn--lg{min-height:52px;padding:14px 22px}

  /* Home-only first viewport: readable copy, full-width actions, static art. */
  .home .hero{min-height:100svh}
  .home .stage{display:flex;flex-direction:column;perspective:none;overflow:hidden}
  .home .stage__pool,.home .stage__dust,.home .stage__metric,.home .hero__intelligence{display:none}
  .home .stage__copy{
    position:static;order:-1;display:flex;flex-direction:column;justify-content:center;
    min-height:100svh;padding-top:calc(var(--header-h) + max(26px,env(safe-area-inset-top)))!important;
    padding-right:max(var(--gutter),env(safe-area-inset-right))!important;
    padding-bottom:104px!important;padding-left:max(var(--gutter),env(safe-area-inset-left))!important
  }
  .home .hero__title{max-width:18ch;font-size:clamp(2rem,10vw,3.2rem)}
  .home .hero__desc{max-width:none;font-size:1rem}
  .home .hero__cta{display:flex;width:100%;gap:10px}
  .home .hero__cta .btn{flex:1 1 0}
  .home .hero__trust{gap:7px}
  .home .hero__trust li{padding:7px 10px;font-size:.68rem}

  /* Shared mobile content rhythm. */
  .lede-grid,.frow{grid-template-columns:1fr}
  .lede-grid>.lede-sticky{position:static}
  .frow{gap:24px}
  .frow--flip>.frow__media{order:0}
  .form-grid,.addr-grid,.qc-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;padding-block:40px 28px}
  .footer__bottom{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}

@media (max-width:560px){
  /* 68svh(520px)는 폰에서 글이 끝난 뒤에도 검은 사진이 164px 남았다(실측 412×870).
     사진의 존재감은 남기되 빈 꼬리는 걷는다 — 내용이 길면 min-height 라 알아서 늘어난다. */
  .subhero{min-height:min(56svh,430px);padding-top:calc(var(--header-h) + 36px);padding-bottom:34px}

  /* ── 모바일 활자 체계(2026-08-11) ────────────────────────────────────
     데스크톱 비율을 그대로 줄여 쓰다 보니 폰에서 제목은 과대, 본문은 과소였다.
     실측(390px): 서브히어로 제목 35.1px → 한 줄에 10~11자밖에 못 담아 제목이
     3~4줄로 쪼개졌고, 본문·카드 설명은 14.4~15.5px 로 한글 가독 하한을 밑돌았다.
     제목은 낮추고 본문은 16px 로 올린다 — 한 줄 13~16자(제목) / 25~30자(본문).
     ※ 폼 입력은 위 ≤900 블록에서 이미 16px(iOS 자동확대 방지). */
  .subhero__title{font-size:clamp(1.6rem,7.1vw,1.95rem);line-height:1.22}
  .subhero__lead{font-size:1rem;line-height:1.72}
  .home .hero__title{font-size:clamp(1.55rem,6.9vw,1.85rem) !important;line-height:1.14 !important}
  .home .hero__desc,.home .hero__lead{font-size:1rem !important;line-height:1.68 !important}
  /* .home .rx-title 는 premium.css:378 이 (0,2,0)+!important 라 짝을 같이 적어야 이긴다. */
  .section-title,.rx-title,.home .rx-title{font-size:clamp(1.42rem,6.1vw,1.62rem) !important;line-height:1.26 !important}
  .section-lead,.rx-lead{font-size:1rem;line-height:1.72}
  /* 본문 활자는 아래 ≤900 블록으로 옮겼다 — 폰(390px)만 16px 이고 태블릿(768px)이
     15.4px 이던 역전을 없애기 위해서다. 여기에는 폰 전용 제목·라벨만 남긴다. */
  .wp-fig figcaption{font-size:.97rem}
  /* 작은 라벨·칩은 11.2px 까지 내려가 있었다 — 12px 를 하한으로.
     ※ .eyebrow 류는 본문 규칙(.sub-section p)에 걸려 16px 로 커지던 것을
       :not() 으로 제외했다(아래 ≤900 블록). */
  .pcard__cat,.pd-cat,.eyebrow,.hero__eyebrow,.rx-eyebrow,.subhero__eyebrow,
  .chips--row span,.b-badge,.esg-name span{font-size:.75rem}
  .home .hero__trust li{font-size:.75rem}
  /* 홈 카드·타일·통계 설명이 13.1~14.4px 로 남아 서브페이지 본문(16px)과 어긋났다. */
  .rx-tile__cap span,.rx-stat span,.rx-sup span,.rx-famcell__desc,.rx-media__cta{font-size:.95rem;line-height:1.6}
  .footer__corp dl>div,.footer__bottom{font-size:.9rem;line-height:1.7}
  /* ★ 회사정보는 폰에서 라벨 폭이 제각각(25~86px)이라 값 시작점이 5군데로 흩어지고,
     팩스와 이메일이 한 줄에 섞여 읽기가 나빴다 — 한 줄에 한 항목, 라벨 폭 고정. */
  .footer__corp dl{display:grid;grid-template-columns:1fr;gap:8px}
  /* 104px = 가장 긴 라벨 '사업자등록번호'(7자 × 14.4px)가 한 줄에 들어가는 최소폭. */
  .footer__corp dl>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;align-items:start}
  .footer__corp dt{color:rgba(255,255,255,.5)}
  .lnb a{font-size:.95rem}
  /* ── 폰 카테고리: 칩 줄바꿈 대신 '한 줄 드롭다운' ────────────────────
     가로 스크롤은 손가락이 몇 px 만 밀려도 스크롤 제스처로 판정돼 링크가 안 열렸고
     (항목 5개인 회사소개·고객지원에서 76·127px 넘침), 줄바꿈으로 바꿨더니 이번엔
     LNB 2줄 + 페이지 내부 필터 2줄 = 알약 4줄이 됐다(2026-08-12 지적).
     이동은 드롭다운 한 줄, 선택(필터)은 아래 격자 알약으로 역할을 나눈다. */
  .lnb__inner{display:none}
  .lnb__sel{display:block;position:relative;padding:8px var(--gutter)}
  .lnb__sel summary{
    display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 14px;
    border:1px solid rgba(201,146,46,.34);border-radius:12px;
    background:rgba(201,146,46,.1);color:#8A5E12;
    font-size:.97rem;font-weight:700;letter-spacing:-.01em;
    list-style:none;cursor:pointer;touch-action:manipulation;
  }
  .lnb__sel summary::-webkit-details-marker{display:none}
  .lnb__sel summary svg{width:18px;height:18px;margin-left:auto;opacity:.8;transition:transform .2s var(--ease)}
  .lnb__sel[open] summary svg{transform:rotate(180deg)}
  .lnb__sel-list{
    position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 2px);z-index:60;
    display:grid;gap:2px;padding:6px;
    border:1px solid rgba(201,146,46,.28);border-radius:12px;
    background:#FBF8F3;box-shadow:0 18px 40px -18px rgba(20,14,6,.45);
  }
  .lnb__sel-list a{
    display:flex;align-items:center;min-height:46px;padding:8px 12px;border-radius:9px;
    font-size:.97rem;font-weight:600;color:var(--gray-600);
  }
  .lnb__sel-list a[aria-current="page"]{background:rgba(201,146,46,.12);color:#8A5E12;font-weight:800}
  /* 한 줄(62px)이면 고정해도 부담이 없다 — 형제 페이지로 바로 넘어갈 수 있게 붙여 둔다. */
  .lnb{position:sticky}
  /* SVG 도식 글자는 user unit 이라 뷰박스 축소배율(390px 화면에서 0.67)만큼 작아진다
     — 품질 4단계(IQC/PQC/OQC/REL)와 단계번호가 화면에서 6~10px 로 읽히지 않았다.
     배율을 역보정해 12px 급으로 올린다(장식이 아니라 공정을 설명하는 글자다). */
  .frow__media--stage svg text[font-size="10"]{font-size:15px}
  .frow__media--stage svg text[font-size="16"]{font-size:22px}
  /* ── 폰 카테고리·필터: 알약 대신 '세로 목차'(2026-08-12 시안 비교 후 채택) ─────
     알약은 라벨 길이가 제각각이라 어떻게 배치해도 어긋났다 — 줄바꿈하면 마지막 한 알만
     남고(제품 'Tracker'), 2열 격자로 묶으면 1줄짜리와 2줄짜리의 높이가 안 맞았다(실기기).
     한 줄에 하나씩 놓으면 길이에 상관없이 정돈되고, 탭 영역도 52px 로 넉넉해진다. */
  .pills{display:grid;grid-template-columns:1fr;gap:0;margin-inline:0;padding-inline:0;
    border-top:1px solid rgba(201,146,46,.22);border-bottom:1px solid rgba(201,146,46,.22)}
  .pills li{display:block}
  .pills li + li a{border-top:1px solid rgba(201,146,46,.14)}
  .pills a{display:flex;align-items:center;gap:10px;justify-content:flex-start;text-align:left;
    min-height:52px;padding:12px 12px;border:0;border-radius:0;background:none;
    font-size:.98rem;font-weight:600;color:var(--ink)}
  .pills a::after{content:"›";margin-left:auto;font-size:1.3rem;line-height:1;color:#C9922E;opacity:.85}
  /* 선택된 항목은 기존 어법(짙은 채움)을 그대로 쓰되 행 모양에 맞춘다. */
  .pills a.is-active{font-weight:800}
  .pills a.is-active::after{color:rgba(255,255,255,.75)}
  /* 폭이 넉넉한 폰(390px~)에서는 한 줄에 하나면 오른쪽이 텅 빈다("다 꽉 채워지는 것 같다").
     두 칸으로 나눠 채운다 — 칸 높이는 격자가 맞춰 주므로 라벨 길이가 달라도 어긋나지 않는다.
     ※ 2열이 되면 '윗선'의 기준이 달라진다: 2번째 항목은 첫 줄이므로 윗선이 없어야 하고,
       3번째부터 윗선이 붙는다. 세로 구분선은 짝수 칸 왼쪽에. */
  @media (min-width:390px){
    .pills{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pills li{display:flex}
    .pills a{flex:1;padding-inline:12px}
    .pills li + li a{border-top:0}
    .pills li:nth-child(n+3) a{border-top:1px solid rgba(201,146,46,.14)}
    .pills li:nth-child(2n) a{border-left:1px solid rgba(201,146,46,.14)}
    /* 홀수 개면 마지막 한 칸이 비므로 전폭으로 마감한다. */
    .pills li:nth-child(odd):last-child{grid-column:1 / -1}
  }
  /* ★ 페이지마다 목차가 달라 보이던 것을 한 어법으로 묶는다(2026-08-12 지적).
     원인 셋 — ① 제품 목록만 .pillbar(흰 띠) 안에 있어 LNB 와 붙어 보였고,
     ② 트래킹은 #find .pills a 로 흰 알약 배경을 따로 칠했으며,
     ③ 제품 목록만 아래 여백이 0 이었다. 폰에서는 세 가지를 모두 무력화한다. */
  #find .pills a,.pills a{background:none;border-color:transparent}
  #find .pills a{color:var(--ink)}
  .pillbar{background:none;border-bottom:0;padding-block:0}
  .pillbar .pills{margin:0 0 clamp(24px,3.4vw,32px)}
  .pills{margin-bottom:clamp(24px,3.4vw,32px)}
  .frow__media{min-height:240px}
  .icard-grid,.icard-grid--4,.icard-grid--2,.steps,.steps--3,.addr-grid,.qc-grid{grid-template-columns:1fr}
  .icard,.step,.addr-card{padding:22px 20px}
  .plogo-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-actions{display:grid;grid-template-columns:1fr}
  .form-actions .btn{width:100%}
  .footer__grid{grid-template-columns:1fr}

  /* Dense desktop tables become readable mobile records. */
  /* 자료실도 2026-08-13 부터 이 .board 규칙을 그대로 쓴다(.dlt 다운로드 표는 삭제됨). */
  .board thead{display:none}
  .board,.board tbody,.board tr,.board td{display:block;width:100%}
  .board tr{position:relative;padding:16px 0;border-bottom:1px solid var(--line)}
  .board td{border:0;padding:3px 4px}
  .board td.b-title{padding-right:4px;font-size:.98rem}
  .board td.b-date{width:auto;text-align:left;font-size:.78rem}
  .board .b-no,.board .b-views{display:none}

  .legal-tb,.legal-tb tbody,.legal-tb tr,.legal-tb th,.legal-tb td{display:block;width:100%}
  .legal-tb tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .legal-tb th{padding:0 0 5px;border:0}
  .legal-tb td{padding:5px 0 0;border:0}

  /* ── 모바일 특화 압축(2026-08-11) ─────────────────────────────────────
     1열로 쌓인 아이콘 카드(greeting·rnd·partnership·quality, 826~1,184px)는
     '아이콘+제목 한 줄, 설명 전폭' 가로형으로 눌러 절반 길이로 만든다.
     a.icard(인사말 사업영역 카드)는 0,1,1 특이도라 선택자에 같이 적는다. */
  .icard,a.icard{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:13px;row-gap:7px;padding:16px 18px}
  .icard__ico{width:42px;height:42px;border-radius:12px;margin:0;grid-row:1}
  .icard__ico svg{width:22px;height:22px}
  /* font-size 는 위 활자 블록(1.06rem)에 맡긴다 — 여기서 1.02rem 을 다시 박으면
     같은 파일 안에서 뒤 블록이 앞 블록을 덮어 카드 제목이 본문과 0.32px 차가 된다. */
  .icard h3{grid-column:2;margin:0}
  .icard p,.icard ul{grid-column:1 / -1;margin:0}
  .icard ul{margin-top:2px}
  .icard__more,.icard .icard__go{grid-column:1 / -1;margin-top:2px}
  /* 히어로의 1px 스크롤 큐는 폰에서 유령 탭 타깃일 뿐이다 — 터치 스크롤에 안내가 필요 없다. */
  .hero__scroll{display:none}

  /* 다크 통계 밴드: 1열 4단 스택 → 2×2. 숫자는 짧아서 반폭이면 충분하다. */
  .sband{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;padding:26px 22px}
  .sband__item strong{font-size:1.42rem}
  .sband__item span{font-size:.8rem}
  /* 항목이 홀수(tracking=3)면 마지막 칸이 비어 절름거린다 → 전폭으로 마감. */
  .sband__item:nth-child(odd):last-child{grid-column:1 / -1}
}

@media (max-width:480px){
  .home .hero__cta{flex-direction:column;align-items:stretch}
  .home .hero__cta .btn{width:100%;flex-basis:auto}
  .home .hero__trust{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .home .hero__trust li{min-width:0;text-align:center}
}

@media (max-width:340px){
  :root{--gutter:14px}
  .brand__logo{height:26px}
  .home .hero__title{font-size:clamp(1.65rem,10.5vw,2.1rem)}
  .home .hero__trust{grid-template-columns:1fr}
  .mobile-nav>nav>a{font-size:.98rem}
}

@media (max-height:620px) and (max-width:900px){
  .mobile-nav{padding-top:12px}
  .mobile-nav>nav>a{min-height:46px;padding-block:9px}
  .mobile-nav__lang{padding-top:12px}
  .home .stage__copy{justify-content:flex-start;padding-top:calc(var(--header-h) + 28px)!important}
  .hero__scroll{display:none}
}

@media (orientation:landscape) and (max-height:520px){
  /* 가로로 든 폰은 폭이 769~900px 이라 styles.css 의 '히어로 평탄화'(≤768px)를 못 받는다
     — 히어로 카피가 absolute 로 남아 박스 높이에 반응하지 않으니, 높이를 몇 px 로 잡든
     한쪽은 빈 사진 224px, 다른 쪽은 글자가 히어로 밖으로 6px 삐져나갔다(실측 ko/en).
     숫자로 맞추지 말고 세로모드와 같은 흐름 배치로 바꿔 내용이 높이를 정하게 한다. */
  .home .hero{display:flex;flex-direction:column;min-height:0}
  .home .stage{display:flex;flex-direction:column;overflow:hidden}
  .home .stage__copy{
    position:static;order:-1;min-height:0;
    transform:none !important;   /* premium.css 의 (min-width:769px) translateY(-50%) 무력화 */
    padding:calc(var(--header-h) + 24px) var(--gutter) 30px;
    /* premium.css ≤768 의 padding-bottom:104px 는 스크롤 큐 자리인데, 폰에서는 그 큐를
       숨기므로 가로모드에서 104px 가 그대로 빈 사진으로 남는다 — 여기서만 걷는다. */
    padding-bottom:30px !important;
  }
  /* 같은 이유로 서브히어로 430px 는 390px 화면보다 커서 첫 화면에 본문이 1px 도
     안 보였다. min-height 라 내용이 더 크면 알아서 늘어난다. */
  .subhero{min-height:320px;padding-top:calc(var(--header-h) + 28px);padding-bottom:28px}
}

/* ★ 폼 입력 16px 은 폭이 아니라 '입력 장치'로 걸어야 한다. ≤900 에만 두었더니
   아이패드 프로 세로(1024)·에어 가로(1180) 같은 실사용 태블릿이 15.04px 로 남아
   iOS 사파리가 탭할 때마다 화면을 확대했다(실측). 데스크톱 시각은 그대로 둔다. */
@media (hover:none) and (pointer:coarse){
  .form-field input,.form-field select,.form-field textarea{font-size:16px}
}

/* 태블릿 가로에서 어두운 서브히어로가 첫 화면의 59%를 먹어(고정 헤더+LNB 포함 76%)
   본문이 190px 만 남았다 — 위아래 여백만 줄여 43% 로 내린다. */
@media (orientation:landscape) and (min-height:521px) and (max-height:900px){
  .subhero{padding-top:calc(var(--header-h) + clamp(34px,5vh,52px));padding-bottom:clamp(28px,4vh,44px);min-height:0}
}

/* 561~900: 푸터 자식이 3개(브랜드/제품·솔루션/COMPANY)인데 2열이라 오른쪽 아래
   400×380px 이 통째로 비었다 — 브랜드 블록만 전폭으로 펴 두 내비 열이 짝을 이루게 한다. */
@media (min-width:561px) and (max-width:900px){
  .footer__grid > :first-child{grid-column:1 / -1;margin-bottom:12px}
}

/* 폰용 '전폭 반반 버튼' 어법이 768px 태블릿까지 새어 268px 짜리 버튼이 됐다. */
@media (min-width:701px) and (max-width:768px){
  .home .hero__cta{display:inline-flex;width:auto}
  .home .hero__cta .btn{flex:0 0 auto}
}

@supports not (overflow-x:clip){body{overflow-x:hidden}}

/* ── 폰 하단 바 — 삼진 작업분(.mquick)과 같은 어법 ─────────────────────────
   데스크톱에 없는 폰 전용 요소. [문의][오시는 길] 두 칸, 아이콘 위·라벨 아래.
   전화는 넣지 않는다(삼진도 동일 — 대표전화는 푸터 회사정보에 있다).
   아래로 스크롤하는 동안에는 내려가 본문을 가리지 않고, 위로 올리면 다시 나온다. */
@media (max-width: 640px){
  .mbar{
    display:grid;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
    background:linear-gradient(180deg, rgba(20,16,11,.90), rgba(14,11,7,.97));
    -webkit-backdrop-filter:blur(14px) saturate(1.6); backdrop-filter:blur(14px) saturate(1.6);
    border-top:1px solid rgba(235,192,140,.20);
    box-shadow:0 -10px 30px -18px rgba(0,0,0,.7);
    padding-bottom:env(safe-area-inset-bottom,0px);
    transition:transform .3s var(--ease);
  }
  .mbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; padding:8px 4px 7px;
    font-size:11.5px; font-weight:700; letter-spacing:-.01em; color:#F2EADD;
    touch-action:manipulation;
  }
  .mbar a svg{ width:21px; height:21px; color:#EBC08C; }
  .mbar a:active{ background:rgba(255,255,255,.06); }
  .mbar a + a{ border-left:1px solid rgba(235,192,140,.14); }
  .mbar.is-hide{ transform:translateY(110%); }
  body.nav-open .mbar{ transform:translateY(110%); }
  /* ★ 바 높이만큼의 여백은 body 가 아니라 '어두운 푸터 안쪽'에 준다.
     body 에 주면 그 64px 이 흰 배경(--bg)으로 드러나 페이지 맨 아래에 흰 띠가 생긴다
     (2026-08-12 사장님 "모바일 제일 하단에 하얀색 배경보임"). */
  .site-footer{ padding-bottom:64px; }
  /* 맨 위로 버튼은 바 위로 올린다. */
  .to-top{ bottom:calc(64px + max(12px,env(safe-area-inset-bottom))) !important; }
}