@charset "utf-8";
/* =====================================================================
   사하구자원봉사센터 — 디자인 토큰
   색 · 글꼴 · 간격 · 모서리는 여기서만 정한다.
   다른 CSS 파일은 값을 직접 쓰지 않고 이 변수만 쓴다.

   불러오는 순서 (head.sub.php)
   tokens → base → layout → components → board → pages
   ===================================================================== */

:root {
    /* 기본색 — 특정 정당 색으로 읽히지 않도록 먹색·회색(무채색)만 쓴다.
       색은 로고 이미지에만 남긴다. */
    --c-primary: #333333;
    --c-primary-strong: #111111;
    --c-primary-soft: #f1f1f1;

    /* 보조 — 안내 · 링크 (역시 무채색) */
    --c-secondary: #555555;
    --c-secondary-soft: #f4f4f4;

    /* 강조 — 형광펜 대신 옅은 회색 밑줄 */
    --c-mark: #e2e2e2;

    /* 자원봉사 색 — 로고 하트색 (img/logo.png 에서 뽑음). 게시판 공지 표시에만 쓴다 (사용자 요청).
       흰 글자와 대비 5.0:1 */
    --c-brand: #dc0058;

    /* 글자 · 선 · 바탕 */
    --c-text: #1f1f1f;
    --c-text-sub: #474747;
    --c-text-muted: #6e6e6e;
    --c-line: #e6e6e6;
    --c-line-strong: #cccccc;
    --c-bg: #ffffff;
    --c-bg-soft: #f5f5f5;
    --c-bg-dark: #262626;

    /* 상태 — 조회 결과·오류 안내에만 쓰고 채도를 낮춘다 */
    --c-success: #2f6b4f;
    --c-success-soft: #edf3ef;
    --c-danger: #b3261e;
    --c-danger-soft: #f9eceb;
    --c-warning: #8a6d1f;

    /* 1365 자원봉사 로고 글자색 — 본문 강조에만 쓴다 (메뉴·틀은 무채색 그대로).
       밝은 색이라 막대·아이콘·띠에 쓰고, 글자에 칠할 때는 -strong 을 쓴다. */
    --c-1365-1: #51a344;          /* 1 초록 */
    --c-1365-3: #f17428;          /* 3 주황빨강 */
    --c-1365-6: #f59227;          /* 6 주황 */
    --c-1365-5: #f89f2b;          /* 5 귤색 */
    --c-1365-1-strong: #2f7d2a;
    --c-1365-3-strong: #c2551c;
    --c-1365-mark: #ffe2b8;       /* 형광펜 */

    /* 소개 페이지 시안 색 — 초록(1365의 1) · 주황(1365의 6) · 청록
       기본: 선·아이콘 / strong: 글자 / soft: 옅은 바탕 / line: 테두리 / fill: 흰 숫자를 올리는 동그라미 */
    --c-green: var(--c-1365-1);
    --c-green-strong: var(--c-1365-1-strong);
    --c-green-soft: #edf6eb;
    --c-green-line: #b9dcb3;
    --c-green-fill: #3f9142;
    --c-orange: var(--c-1365-6);
    --c-orange-strong: #b5560f;
    --c-orange-soft: #fff1e3;
    --c-orange-line: #f8cfa3;
    --c-orange-fill: #e0701f;
    --c-teal: #1f93a8;
    --c-teal-strong: #16768a;
    --c-teal-soft: #e6f4f6;
    --c-teal-line: #a9d6de;
    --c-teal-fill: #1f93a8;
    /* 글꼴 */
    --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --font-content: "NanumSquareNeo Web", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --fs-xs: 0.8125rem;   /* 13px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md: 1.125rem;    /* 18px */
    --fs-lg: 1.375rem;    /* 22px */
    --fs-xl: 1.75rem;     /* 28px */
    --fs-2xl: 2.25rem;    /* 36px */
    --lh-tight: 1.35;
    --lh-base: 1.7;

    /* 간격 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;

    /* 모양 */
    /* 모서리는 둥글게 하지 않는다 (사용자 요청, 모든 페이지). 동그라미 모양(50%)은 따로 둔다 */
    --radius-sm: 0;
    --radius: 0;
    --radius-lg: 0;
    --radius-pill: 0;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow: 0 4px 16px rgba(0, 0, 0, .08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .14);
    --focus-ring: 0 0 0 3px rgba(0, 0, 0, .28);
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* 틀 */
    --container: 1400px;
    --gutter: 20px;
    --header-h: 80px;
    --local-nav-h: 60px;   /* 하위 메뉴 줄(.local-nav) 높이 — 그 아래로 따라 내려오는 요소의 top 계산용 (실측 59.2px) */
}

@media (max-width: 1023px) {
    :root {
        --gutter: 16px;
        --header-h: 64px;
    }
}