/*
 * 나노마케팅 광고 Q&A · 서비스 안내 화면 디자인 값
 *
 * 1층 brand: 사이트 공통 머리글 · 바닥 · 상담줄과 같은 값. 이 화면들에서 바꾸지 않는다.
 *            글꼴도 사이트 공통 지정과 같다.
 * 2층 page:  목록 · 상세 · 서비스 화면의 본문 값.
 */
:root {
  /* 1층 brand */
  --nm-red: #CE2A1E;
  --nm-red-deep: #AC1417;
  --nm-ink: #151515;
  --nm-text: #343535;
  --nm-ground: #FFFFFF;
  --nm-ground-soft: #FAFAFA;
  --nm-footer: #0A0A0A;
  --nm-footer-text: #E3E3E3;
  --nm-header-dark: rgba(0, 0, 0, .9);
  --nm-font: 'Noto Sans KR', sans-serif;
  --nm-header-h-active: 100px;    /* 스크롤 뒤 모양 머리글(PC) */
  --nm-header-h-mo-active: 65px;  /* 768 이하 */
  --nm-quickbar-h: 70px;
  --nm-quickbar-h-mo: 65px;
  --nm-wrap: 1280px;
  --nm-gutter: 20px;
  --nm-tel-radius: 10px;

  /* 2층 page — 색 */
  --nq-ink: #151515;              /* 제목 */
  --nq-text: #343535;             /* 본문 */
  --nq-strong: #222222;           /* 첫 답변 */
  --nq-muted: #6B6B6B;            /* 경로 · 요약 · 목차 */
  --nq-line: #E6E6E6;             /* 표 · 휴대폰 분류 줄 아래 */
  --nq-panel: #F7F7F7;            /* 첫 답변 · 도식 · 카드 · 질문 */
  --nq-panel-strong: #EFEFEF;     /* 판 위의 칸 · 눌렀을 때 */
  --nq-accent: var(--nm-red);
  --nq-accent-tint: rgba(206, 42, 30, .08);   /* 지금 보는 분류 */
  --nq-cta-bg: #151515;           /* 글 끝 상담 판 */
  --nq-cta-text: #D9D9D9;
  --nq-focus: #CE2A1E;

  /* 2층 page — 틀 */
  --nq-side-w: 240px;             /* 왼쪽 분류 · 목차 */
  --nq-col-gap: 64px;
  --nq-text-max: 860px;           /* 본문 칸 */
  --nq-top: calc(var(--nm-header-h-active) + 56px);  /* 머리글 아래 첫 줄까지 */
  --nq-bottom: 120px;
  --nq-sticky-top: calc(var(--nm-header-h-active) + 32px);
  --nq-anchor: calc(var(--nm-header-h-active) + 32px);       /* 목차 · 앵커가 멈추는 자리 */

  /* 2층 page — 글자 (PC) */
  --nq-h1: 44px;  --nq-h1-lh: 1.36;
  --nq-h2: 28px;  --nq-h2-lh: 1.43;
  --nq-h3: 21px;  --nq-h3-lh: 1.5;
  --nq-body: 17px; --nq-body-lh: 1.8;
  --nq-answer: 19px; --nq-answer-lh: 1.75;
  --nq-card-title: 20px;
  --nq-feature-title: 28px;
  --nq-small: 14px;
  --nq-track-tight: -0.02em;

  /* 2층 page — 간격 · 모양 */
  --nq-h2-gap: 64px;              /* 소제목 위 */
  --nq-h3-gap: 32px;
  --nq-p-gap: 16px;
  --nq-radius-s: 8px;             /* 분류 항목 */
  --nq-radius-m: 12px;            /* 카드 · 단계 칸 · 질문 */
  --nq-radius-l: 16px;            /* 첫 답변 · 도식 판 */
  --nq-radius-xl: 20px;           /* 상담 판 · 서비스 상황 칸 */
  --nq-btn-h: 52px;
  --nq-btn-radius: var(--nm-tel-radius);
  --nq-tap: 44px;                 /* 휴대폰 누르는 자리 최소 */
}

@media (max-width: 1023px) {
  :root {
    --nq-top: calc(var(--height-100-65, 82px) + 52px + 28px);
    --nq-sticky-top: var(--height-100-65, 82px);
    --nq-anchor: calc(var(--height-100-65, 82px) + 52px + 20px);   /* 머리글 + 분류 줄 + 여유 */
    --nq-bottom: 96px;
  }
}

@media (max-width: 768px) {
  :root {
    --nq-top: calc(var(--nm-header-h-mo-active) + 52px + 24px);
    --nq-sticky-top: var(--nm-header-h-mo-active);
    --nq-anchor: calc(var(--nm-header-h-mo-active) + 48px + 20px);
    --nq-h1: 27px;  --nq-h1-lh: 1.42;
    --nq-h2: 23px;  --nq-h2-lh: 1.45;
    --nq-h3: 19px;
    --nq-body: 17px; --nq-body-lh: 1.75;
    --nq-answer: 17.5px;
    --nq-card-title: 19px;
    --nq-feature-title: 22px;
    --nq-h2-gap: 48px;
    --nq-h3-gap: 28px;
    --nq-bottom: 88px;
  }
}