/* 빌리 홈페이지 — 모바일 가독성 덧씌우기 (mobile.css)
 *
 * 왜: 과장님 11/13 「한명 모바일 가독성 최적화 시키고 깃에서 제일 별 많이 받은 홈페이지 모바일로 가독성 최적화하는게
 *     있는지 봐서 그거 적용을하든 해서 암튼 해봐」(감독관 전달 · 기술지원부가 만듦).
 * 기준: Pico CSS(GitHub picocss/pico · 별 16,814 · 11/13 셈) — 별이 가장 많은 「글자 · 간격 기본값」 CSS다.
 *       (normalize.css 53,483 · bulma 50,032 가 더 많지만, 앞의 것은 브라우저 차이 맞추기, 뒤의 것은 화면 틀 전체라
 *        가독성 기준으로는 Pico 를 골랐다. normalize 에서는 글자 자동 확대 끄기 한 줄만 가져왔다.)
 *       Pico 모바일 값 = 글자 16px(100%) · 줄 간격 1.5 이상 · 좌우 여백 1rem(16px) · 단추 위아래 0.75rem
 *       (= 높이 약 48px). 터치 단추 44px 은 애플 · W3C 권고(WCAG 2.5.5) 값이다.
 * 지키는 것: 색 · 서체는 지금 사이트 것 그대로(이 파일은 크기 · 간격만 만진다). 600px 이하 화면에만 걸린다(PC 화면은 그대로).
 *   각 쪽 <style> 이 이 파일보다 뒤에 있어도 이기도록 !important 를 쓴다. 고친 칸은 375px 실측에서 걸린 것만이다.
 * 넣는 법: 모든 쪽 <head> 맨 끝에 한 줄 — 맨 위 쪽은 <link rel="stylesheet" href="mobile.css">,
 *         journal/ 아래 쪽은 <link rel="stylesheet" href="../mobile.css">.
 * 빼는 법: 그 한 줄을 지우면 전과 똑같다.
 */

/* 휴대폰을 가로로 돌릴 때 글자가 제멋대로 커지지 않게(normalize.css) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── 제품 사진 칸 — 화면 폭 상관없이(PC · 휴대폰 모두) ──
 * 왜: 과장님 11/13 「메인에서 신발사진 배경이 회색인데 회색 곁에 또 흰색이다보니 이게 좀 사진 그냥 갖다 붙인거같아서말이야
 *     투명이거나 아예 흰색으로 조화되게 해주면 좋겠다」(감독관 전달).
 * 잰 것: 본사 제품 사진 13장(121장 중 10장마다 하나) 바탕 = 245~249(아주 옅은 회색 · 13장 모두 같음). 칸 바탕은 --soft(#faf9f7 · 따뜻한 흰색).
 *   겹침(multiply)은 흰색만 지운다 — 칸을 흰색으로 바꿔도 249 회색 네모는 옅게 남는다.
 * 그래서: 칸 바탕 = 흰색 + 사진 밝기를 3.5% 올려 바탕 245~249 → 254~255(흰색)로 밀고 + 겹침으로 흰색을 칸에 녹인다.
 *   신발 색은 3.5% 밝아질 뿐이다(검정 20 → 21). 사진 원본은 고치지 않는다.
 * 대상: 첫 화면 · 제품 쪽 제품 카드(.card .imgbox) + 카드를 누르면 뜨는 상세 사진(.pdp-img) — 카드와 상세가 다르면 눌렀을 때 회색이 다시 보여서. */
.card .imgbox, .pdp-img { background: var(--bg, #fff) !important; }
.card .imgbox img, .pdp-img img { mix-blend-mode: multiply; filter: brightness(1.035); }

@media (max-width: 600px) {

  /* ── 1. 본문 글자 16px (375px 실측에서 14~15.5px 이던 칸) ── */
  .fa p,                    /* 첫 화면 자주 묻는 질문 답 15px */
  .val p,                   /* 첫 화면 「왜 빌리」 설명 14px */
  .fq details > p,          /* 자주 묻는 질문 쪽 답 15.5px */
  .fq-end .note,            /* 자주 묻는 질문 쪽 끝 안내 15px */
  .box ul, .box li,         /* 저널 글 「맞는 경우 · 안 맞는 경우」 상자 15px */
  .art .rel,                /* 저널 글 머리 아래 안내 15px */
  details p,                /* 저널 글 아래 묻고 답하기 15.5px */
  .links li,                /* 자료실 쪽 목록 14px */
  .iconcard p               /* 자료실 쪽 아이콘 설명 12.5px */
  { font-size: 16px !important; }

  /* 보조 글씨(캡션 · 출처 · 배지)는 12px 아래로 내려가지 않게 — 브랜드 자료실 기준 「보조 글씨만 12px까지」 */
  .disc, .dl, .soon { font-size: 12px !important; }

  /* ── 2. 머리 줄 — 로고 · 「문의하기」가 두 줄로 깨지지 않게, 저널 메뉴는 한 줄 옆으로 밀기 ── */
  /* 로고 = 「BILLY」 + <span> Footwear Korea</span> — 줄을 펴서 놓으면 span 앞 띄어쓰기가 사라져 붙으므로 간격을 gap 으로 고정 */
  header .logo { font-size: 20px !important; white-space: nowrap; display: inline-flex !important; align-items: baseline; gap: .28em !important; }
  header .logo small { display: none; }
  header .nav-ask { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px !important; }
  /* 저널 쪽: 원래 .nav{padding:12px 0} 이 좌우 여백까지 0 으로 지워 로고가 화면 끝에 붙었다 → 좌우 16px 되돌림 */
  /* 첫 화면 쪽 .nav{height:70px} 고정 높이 — 메뉴가 둘째 줄로 내려오면 아래 사진 칸 위로 겹쳤다(11/13 17:2x 실측) → 높이를 내용대로 */
  header .nav { flex-wrap: wrap; row-gap: 0; padding: 8px 16px !important; height: auto !important; min-height: 56px; }
  header .wrap.nav { padding: 8px 16px !important; }
  header .menu { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; gap: 0 !important; scrollbar-width: none; margin: 0 -8px; }
  header .menu::-webkit-scrollbar { display: none; }
  header .menu a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px !important; }

  /* ── 3. 터치 단추 44px (375px 실측에서 16~37px 이던 것) ── */
  .kr-bar button,           /* 「국내에 있는 모델 / 본사 전체 모델」 34px */
  .chips button,            /* 자주 묻는 질문 · 저널 갈래 단추 36px */
  .quick a,                 /* 자료실 쪽 바로가기 37px */
  a.back, a.logo            /* 자료실 쪽 머리 24 · 41px */
  { min-height: 44px !important; display: inline-flex; align-items: center; }

  /* 꼬리 · 목록의 글자 링크 16~24px → 줄 높이를 44px 로(글자 크기는 그대로) */
  .sns-row a, .sns a, footer a, .foot-in a, .links li a, p.lk a.go
  { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

  /* 묻고 답하기 질문 줄 28px → 위아래 8px 씩 더해 44px. 대신 바깥 여백을 그만큼 줄여 전체 길이는 거의 같게 */
  details > summary { padding-top: 8px; padding-bottom: 8px; }
  .body details, .fq details { padding-top: 8px !important; padding-bottom: 8px !important; }

  /* 밑줄 달린 「자세히 보기 →」 · 빵 부스러기 길 — 모양은 그대로 두고 눌리는 자리만 위아래로 넓힘 */
  .more, .crumb a { position: relative; }
  .more::after, .crumb a::after { content: ''; position: absolute; left: -4px; right: -4px; top: -10px; bottom: -10px; }
}