/* =====================================================================
   모바일 공통 기준 (768px 이하) — 마지막에 불러와 각 화면 CSS 를 덮어쓴다.
   PC·태블릿은 시안 값 그대로이고, 휴대폰 글자 크기는 아래 토큰 하나로 관리한다.
   크기를 바꾸려면 토큰 값만 고치면 해당 단계를 쓰는 모든 화면이 함께 바뀐다.
   ===================================================================== */
:root {
  --m-fs-page:     28px;   /* 페이지·섹션 큰 제목 */
  --m-fs-headline: 23px;   /* 강조 문구 */
  --m-fs-title:    19px;   /* 카드·항목 제목 */
  --m-fs-lead:     17px;   /* 굵은 리드 문장 */
  --m-fs-body:     15px;   /* 본문 */
  --m-fs-small:    14px;   /* 보조 글 */
  --m-fs-caption:  13px;   /* 날짜·캡션 */
  --m-fs-num:      44px;   /* 장식용 큰 숫자 */
  --m-fs-input:    16px;   /* 입력칸 — 16px 미만이면 아이폰이 입력 시 화면을 확대한다 */
}

@media (max-width: 768px) {
  /* ---------- 큰 제목 ---------- */
  .sec-title, body .section-title,
  .cp-page-title, .bz-intro__title, .sl-title, .rf-title, .sp-title, .pv-head__title,
  .hm-ref__title, .hm-cta__title { font-size: var(--m-fs-page); }
  .page-hero-title { font-size: var(--m-fs-page) !important; }   /* 상단 배너 제목 (시안 규칙이 !important) */

  /* ---------- 강조 문구 ---------- */
  .cp-vision__headline, .cp-partner-intro__headline,
  .bz-diff-head__title, .bz-eff__no,
  .sl-va-why__title, .sl-ps-row__title, .sl-role__metric-num,
  .rf-head__title, .sp-done h3,
  .bz-intro__catch, .bz-cta__title, .sl-owl-cta__title, .sl-band__title { font-size: var(--m-fs-headline); }

  /* ---------- 카드·항목 제목 ---------- */
  .vision-label > .txt, .eyebrow-rule > .txt,
  .hm-svc__title,
  .cp-fact__label, .cp-pillar__ko, .cp-step__label, .cp-partner-cta__title,
  .bz-sd__title, .bz-ps__title, .bz-dc__title, .bz-svc__title,
  .sl-strength__title, .sl-va-feat__title, .sl-part__name, .sl-step__ko, .sl-value__title,
  .sl-hub__name, .sl-ps-row__product, .sl-benefit__title,
  .rf-card__title, .rf-overview__title, .rf-list__label,
  .pv-title { font-size: var(--m-fs-title); }

  /* ---------- 굵은 리드 문장 · 검정 태그 ---------- */
  .cp-vision__text, .cp-partner-intro__lead, p.body-copy.cp-strong,
  .sol-lead.sl-intro-lead, .sl-intro-lead strong, .sl-ps__lead strong, .sl-vibe__head,
  .hm-cta__desc, body .section-sub, .sp-art__title,
  .cp-tag__ko, .biz-tag > .ko, .sol-tag > .ko, .cp-orb__text { font-size: var(--m-fs-lead); }

  /* ---------- 본문 ---------- */
  body .body-copy, body .biz-lead, .ref-lead, .sol-lead, .sol-sub,
  .hm-svc__desc, .hm-ref__desc, .hm-news__title,
  .cp-fact__lines > span, .cp-pillar__desc, .cp-partner-cta__body, .cp-dir-row__value, .cp-subway,
  .bz-sec-sub, .bz-svc__desc, .bz-eff__text, .bz-ps__desc, .bz-tgt__text, .bz-cta__sub, .bz-sd__desc, .bz-rec__list > li,
  .sl-role__name, .sl-va-why__sub, .sl-feature__desc, .sl-vibe-case__q, .sl-strength__desc,
  .sl-part__close-text, .sl-part__summary-text, .sl-owl-cta__contacts,
  .sl-arch-modes li, .sl-benefit__desc, .sl-ps-group__list li, .sl-tool__list li, .sl-va-feat__desc,
  .sl-owl-customers__note, .sl-band__contacts,
  .rf-overview__text p, .rf-tile__name, .rf-list li, .rf-head__meta dd, .rf-nav__title,
  .sp-card__name, .sp-done p, .sp-row__title, .sp-para, .sp-empty, .sp-nav__title,
  .pv-intro, .pv-text,
  .sp-cf__fieldset > legend, .sp-field > label, .sp-radio, .sp-check { font-size: var(--m-fs-body); }

  /* ---------- 보조 글 ---------- */
  .hm-svc__more, .bz-vc__cell, .bz-sd__chip,
  .sl-vibe-case__part, .sl-vibe-case__answer, .sl-vibe-case__arrow, .sl-ps-row__cat,
  .bz-dc__desc, .bz-ps__out-text, .sl-role__headline,
  .sp-cf__more { font-size: var(--m-fs-small); }

  /* ---------- 날짜·캡션 ---------- */
  .sp-row .news-date, .hm-news__date,
  .bz-vc__pill, .bz-ps__badge, .bz-ps__out-label,
  .sl-mon__cert, .sl-feature__note, .sl-va-feat__label, .sl-step__en, .sl-role__give, .sl-role__get,
  .rf-tile__more, .rf-card__tag { font-size: var(--m-fs-caption); }

  /* ---------- 장식용 큰 숫자 ---------- */
  .vision-label > .num, .eyebrow-rule > .num,
  .sl-benefit__no, .sl-va-feat__ghost { font-size: var(--m-fs-num); }
  .varam-b4 > div > span:nth-child(2) { font-size: var(--m-fs-num) !important; }

  /* ---------- 입력칸 ---------- */
  .sp-field input, .sp-field textarea, .sp-search select, .sp-search input { font-size: var(--m-fs-input); }
}

/* ---------- 공통 배치 ---------- */
@media (max-width: 768px) {
  /* 섹션 태그 [검정 한글] ENGLISH ──── : 긴 영문이 화면 밖으로 넘치지 않게 줄바꿈 허용·간격 축소 */
  .cp-tag, .biz-tag, .sol-tag { gap: 8px 12px; flex-wrap: wrap; }
  .cp-tag__ko, .biz-tag > .ko, .sol-tag > .ko { padding: 9px 16px; }
  .cp-tag__en, .biz-tag > .en, .sol-tag > .en { white-space: normal; letter-spacing: 0.1em; line-height: 1.4; min-width: 0; }
  .cp-tag__rule, .biz-tag > .rule, .sol-tag > .rule { min-width: 16px; }

  /* 사업영역 서비스 카드: [아이콘 제목] 한 줄, 그 아래 설명은 카드 왼쪽 기준 전체 폭
     (PC 의 [아이콘 | 제목·설명] 그대로면 글 칸이 좁아 짧은 문장도 3줄이 됨) */
  .bz-svc { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center;
            gap: 12px 14px; padding: 22px 20px 24px; }
  .bz-svc__body { display: contents; }
  .bz-svc__icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; margin-top: 0; }
  .bz-svc__icon svg { width: 40px; height: 40px; }
  .bz-svc__title { grid-column: 2; grid-row: 1; }
  .bz-svc__desc { grid-column: 1 / -1; grid-row: 2; align-self: start; }

  /* OWLens·VARAM 하단 문의 띠: 메일·전화는 모바일 푸터 "영업 및 도입 문의" 와 겹치므로 숨기고 제목·문의하기 버튼만 */
  .sl-owl-cta__contacts, .sl-band__contacts { display: none; }

  /* 상세 화면 이전글·다음글 (구축사례·회사소식): 라벨을 위로, 제목은 전체 폭에 최대 2줄 (한 줄 말줄임이면 몇 글자밖에 안 보임) */
  .rf-nav__row, .sp-nav { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 4px; }
  .rf-nav__label, .sp-nav__label { width: auto; font-size: var(--m-fs-caption); }
  .sp-nav__post { width: 100%; align-items: flex-start; }
  .sp-nav__post .sp-tag { flex-shrink: 0; margin-top: 1px; }
  .rf-nav__title, .sp-nav__title { width: 100%; white-space: normal; line-height: 1.5; word-break: keep-all;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

  /* 전체 메뉴(햄버거) 아래 연락처: [대표전화 번호] 한 줄 (번호는 줄바꿈 금지), 메일은 다음 줄 전체 폭 */
  .sitemap-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline;
                     gap: 8px 12px; width: 100%; }
  .sitemap-contact__tel { white-space: nowrap; }
  .sitemap-contact__sep { display: none; }
  .sitemap-contact > span:last-child { grid-column: 1 / -1; font-size: var(--m-fs-small); word-break: break-all; }

  /* 구축사례 카드: 한 줄에 하나라 PC 처럼 높이를 맞출 필요가 없음 — 제목과 태그 사이 빈 공간 제거 */
  .rf-card { min-height: 0; padding: 24px 22px 22px; }
  .rf-card__body { margin-top: 22px; }
  .rf-card__foot { padding-top: 20px; }
}

/* 아주 좁은 폰(갤럭시 S 시리즈 350~360px 등): 오시는 길 지하철 안내가 한 줄에 들어가도록 보조 글 크기로 */
@media (max-width: 370px) {
  .cp-dir-row__value, .cp-subway { font-size: var(--m-fs-small); }
}