/*
 * 성모 다움 디자인 기준값: 색 · 글꼴 · 간격 · 크기
 *
 * 이 파일이 유일한 기준입니다.
 * - 다른 CSS 파일은 여기 있는 이름(var(--smc-...))만 씁니다.
 * - 화면 너비에 따라 달라지는 값과 "움직임 줄이기" 설정에 따른 값도 이 파일 아래쪽에서만 정합니다.
 * - 글쓰기 화면의 색 선택지(4색)도 이 파일의 값을 읽어 만듭니다. (inc/editor-palette.php)
 *   그래서 색 4개(primary, text, tint, white)는 "#" 으로 시작하는 6자리 값으로 적습니다.
 * - 홈 개편(시안 v2: C:\smcmh-theme\reference\smcmh-home-mockup-v2.html)의 글자 크기 · 간격 · 둥글기를 따릅니다.
 */

:root {
	/* ── 색 ───────────────────────────────────── */
	--smc-color-primary: #1F4E8C;   /* 주색: 로고, 큰 제목 강조 */
	--smc-color-button: #1F4E8C;    /* 버튼색: 버튼, 링크, 작은 글자 강조 */
	--smc-color-secondary: #5BA4CF; /* 보조색: 장식 도형 전용 */
	--smc-color-accent: #F4A261;    /* 포인트: 큰 도형·아이콘의 작은 강조, 주황 버튼 바탕 (글자색으로 쓰지 않음) */
	--smc-color-bg: #F8FAFC;        /* 페이지 바탕 */
	--smc-color-text: #1E293B;      /* 본문과 제목 */
	--smc-color-tint: #DEE5EF;      /* 연한 배경: 바탕 위에 주색 12%를 얹은 단색 (공지 창, 띠, 사진 자리) */
	--smc-color-white: #FFFFFF;     /* 흰색: 카드 바탕 */

	/* 시안 v2 에서 더한 색 */
	--smc-color-tint-sky: #DCEAF4;     /* 연한 하늘색: 여정 카드 2, 첫 화면 그림 뒤 언덕 */
	--smc-color-tint-orange: #F7E8DD;  /* 연한 주황색: 여정 카드 3 */
	--smc-color-primary-deep: #173B6B; /* 짙은 주색: 푸터 바탕 */
	--smc-color-sky-deep: #27709F;     /* 짙은 하늘색: 여정 카드 2 아이콘 원 */
	--smc-color-orange-deep: #A8570F;  /* 짙은 주황색: 여정 카드 3 아이콘 원 */
	--smc-color-on-dark-muted: #C9D8EC; /* 짙은 주색 위 보조 글자 (푸터) */

	--smc-color-text-muted: color-mix(in srgb, var(--smc-color-text) 75%, var(--smc-color-bg)); /* 보조 글자: 글자색 75% + 바탕 25% (새 색 아님) */
	--smc-color-on-button: var(--smc-color-white); /* 버튼 위 글자 */
	--smc-color-on-accent: var(--smc-color-text);  /* 주황 버튼 위 글자 */
	--smc-color-border: var(--smc-color-tint);     /* 카드 테두리 */
	--smc-color-focus: var(--smc-color-button);    /* 키보드 초점 표시 */
	--smc-color-header-bg: color-mix(in srgb, var(--smc-color-bg) 92%, transparent);    /* 머리글 · 하단 바 반투명 바탕 */
	--smc-color-band-card: color-mix(in srgb, var(--smc-color-white) 10%, transparent); /* 주색 띠 안의 단계 상자 */
	--smc-color-band-line: color-mix(in srgb, var(--smc-color-white) 28%, transparent); /* 주색 띠 안의 단계 상자 테두리 */
	--smc-color-footer-line: color-mix(in srgb, var(--smc-color-white) 20%, transparent); /* 푸터 저작권 줄 위 선 */

	/* ── 글꼴 ─────────────────────────────────── */
	/* Pretendard 파일이 없으면 다음 글꼴로 자동으로 넘어갑니다. (외부 서버에서 불러오지 않음) */
	--smc-font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

	--smc-weight-regular: 400;
	--smc-weight-medium: 500;
	--smc-weight-bold: 700;
	--smc-weight-heavy: 800;    /* 큰 제목 */

	/* 글자 크기 (rem: 사용자가 브라우저 글자 크기를 키우면 함께 커짐, 1rem = 16px) */
	--smc-text-sm: 0.9375rem;   /* 15px: 날짜, 배지 */
	--smc-text-base: 1.125rem;  /* 18px: 본문 */
	--smc-text-lg: 1.25rem;     /* 20px */
	--smc-text-lead: clamp(1.125rem, 2.4vw, 1.3125rem);  /* 18~21px: 첫 화면 소개 문장 */
	--smc-text-card-title: 1.625rem;                     /* 26px: 여정 카드 제목 */
	--smc-text-xl: clamp(1.625rem, 4.4vw, 2.25rem);      /* 26~36px: 구역 제목 */
	--smc-text-2xl: 1.875rem;   /* 30px: 페이지 제목 */
	--smc-text-hero: clamp(2.125rem, 7vw, 3.5rem);       /* 34~56px: 첫 화면 큰 제목 */

	--smc-leading-body: 1.75;   /* 본문 줄 간격 */
	--smc-leading-heading: 1.3;
	--smc-leading-hero: 1.22;
	--smc-tracking-tight: -0.03em;  /* 제목 글자 간격 */
	--smc-tracking-hero: -0.035em;  /* 큰 제목 글자 간격 */

	/* ── 간격 (8px 단위) ──────────────────────── */
	--smc-space-1: 0.5rem;  /* 8px */
	--smc-space-2: 1rem;    /* 16px */
	--smc-space-3: 1.5rem;  /* 24px */
	--smc-space-4: 2rem;    /* 32px */
	--smc-space-5: 2.5rem;  /* 40px */
	--smc-space-6: 3rem;    /* 48px */
	--smc-space-8: 4rem;    /* 64px */
	--smc-space-10: 5rem;   /* 80px */

	--smc-gutter: var(--smc-space-2);        /* 화면 양옆 여백 */
	--smc-section-space: 4.5rem;             /* 72px: 구역 사이 간격 */
	--smc-hero-space-top: var(--smc-space-5); /* 첫 화면 위 여백 */
	--smc-hero-gap: var(--smc-space-4);       /* 첫 화면 글과 그림 사이 */

	/* ── 크기 ─────────────────────────────────── */
	--smc-container-max: 72rem;  /* 내용 최대 너비 */
	--smc-content-max: 45rem;    /* 글 읽기 최대 너비 */
	--smc-lead-max: 30em;        /* 첫 화면 소개 문장 최대 너비 */
	--smc-sub-max: 34em;         /* 구역 소개 문장 최대 너비 */
	--smc-hero-art-max: 32.5rem; /* 첫 화면 그림 최대 너비 520px */
	--smc-header-height: 4rem;
	--smc-submenu-min: 14rem;
	--smc-submenu-max: 22rem;    /* 펼침 패널 최대 너비 352px (설명이 길면 줄바꿈, 지시서 32) */
	--smc-panel-duration: 0.15s; /* 펼침 패널 여는 움직임 (움직임 줄이기면 0) */
	--smc-panel-shift: -0.25rem; /* 펼침 패널이 4px 위에서 내려오며 나타남 (움직임 줄이기면 0) */
	--smc-footer-link-min: 10rem; /* 푸터 바로가기 링크 한 칸 최소 너비 160px (넓으면 두 줄로 나란히) */
	--smc-sitemap-col-min: 16rem; /* 사이트맵 묶음 한 칸 최소 너비 256px */
	--smc-tap-min: 2.75rem;      /* 누르는 영역 최소 44px */
	--smc-chip-min: 3rem;        /* 칩 · 하단 바 버튼 높이 48px */
	--smc-button-lg: 3.25rem;    /* 큰 버튼 높이 52px (첫 화면, 처음 오셨나요 띠) */
	--smc-event-label-width: 6rem; /* 일정 정보 상자의 항목 이름 칸 너비 */
	--smc-icon-size: 1.5rem;
	--smc-icon-small: 1.25rem;
	--smc-step-num: 2.5rem;      /* 처음 오셨나요 단계 번호 원 40px */

	/* 안전 영역 (아이폰 화면 위 · 아래 여백) */
	--smc-safe-top: env(safe-area-inset-top, 0px);
	--smc-safe-bottom: env(safe-area-inset-bottom, 0px);

	/*
	 * WordPress 관리 막대(로그인한 직원 화면에만 있음)
	 * - 높이: WordPress 가 폭에 따라 정함(약 32px, 783px 미만 약 46px). 방문자 화면에는 없으므로 0.
	 * - 600px 이하에서는 관리 막대가 쪽과 함께 올라가 사라지므로, 머리글은 화면 맨 위(0)에 붙음 (아래 @media)
	 */
	--smc-adminbar-height: var(--wp-admin--admin-bar--height, 0px);  /* 메뉴 시트 위쪽을 이만큼 띄워 닫기 버튼이 막대에 가리지 않게 */
	--smc-adminbar-sticky: var(--smc-adminbar-height);               /* 머리글이 붙는 위치 (600px 이하에서 0) */

	/* 머리글: 화면 위에 붙음 (로그인했을 때 넓은 화면에서는 관리 막대 아래) */
	--smc-sticky-top: var(--smc-adminbar-sticky);
	--smc-header-blur: 10px;
	--smc-scroll-offset: calc(var(--smc-header-height) + var(--smc-space-3)); /* 구역으로 이동할 때 머리글에 가리지 않게 */

	/* 좁은 화면 하단 "빠른 연결" 바 높이 (버튼 48px + 위아래 16px) */
	--smc-dock-height: calc(var(--smc-chip-min) + var(--smc-space-2) * 2);

	/* ── 모양 ─────────────────────────────────── */
	--smc-radius-sm: 0.5rem;
	--smc-radius-md: 0.75rem;   /* 12px: 작은 요소 */
	--smc-radius-lg: 1.25rem;   /* 20px: 카드 */
	--smc-radius-pill: 999px;
	--smc-radius-circle: 50%;
	--smc-border-width: 1px;
	--smc-border-strong: 2px;  /* 지금 보고 있는 칩 테두리, 큰 버튼 테두리 */
	--smc-focus-width: 3px;
	--smc-focus-offset: 2px;
	--smc-focus-inner: var(--smc-color-white); /* 두 겹 초점의 안쪽 테두리 (지시서 37) */
	--smc-focus-offset-inset: calc(var(--smc-focus-width) * -1); /* 초점 표시를 안쪽으로 그릴 때 (화면 끝에 붙은 칸) */
	--smc-underline-offset: 0.2em;
	--smc-underline-hover: 2px;
	--smc-rotate-flip: 180deg;  /* 펼침 버튼 화살표 뒤집기 */

	/* 움직임 (움직임 줄이기 설정이면 아래 @media 에서 0 으로) */
	--smc-lift: -4px;           /* 카드에 마우스를 올리면 떠오르는 높이 */
	--smc-lift-small: -2px;     /* 버튼 */
	--smc-transition: 0.2s ease;

	/* 장식 도형 */
	--smc-deco-large: 6rem;
	--smc-deco-small: 2.5rem;
	--smc-deco-dot: 1rem;
	--smc-deco-shift: 30%;
	--smc-journey-icon: 3.5rem;

	/* 사진 비율 */
	--smc-hero-ratio: 4 / 3;
	--smc-card-ratio: 16 / 10;

	/* 겹치는 순서 */
	--smc-z-below: -1;
	--smc-z-dropdown: 50;
	--smc-z-tabbar: 200;
	--smc-z-header: 250;   /* 머리글(안의 전체 화면 메뉴 포함)이 하단 바보다 위 */
	--smc-z-panel: 300;
	--smc-z-skip: 400;

	/* ── 화면 너비별 배치 (모바일 기준) ──────────── */
	--smc-desktop-only: none;   /* 넓은 화면에서만 보이는 것 (문의하기 등) */
	--smc-mobile-only: flex;    /* 좁은 화면에서만 보이는 것 (메뉴 버튼, 하단 빠른 연결 바) */
	--smc-mobile-bottom-space: calc(var(--smc-dock-height) + var(--smc-safe-bottom)); /* 본문 아래 여백 (하단 바에 가리지 않게) */
	--smc-hero-columns: 1fr;
	--smc-notice-columns: 1fr;
	--smc-question-columns: 1fr;
	--smc-journey-columns: 1fr;
	--smc-story-columns: 1fr;
	--smc-steps-columns: 1fr;
	--smc-day-columns: 1fr;
	--smc-footer-columns: 1fr;
	--smc-menu-card-columns: 1fr;  /* 부모 페이지 아래 하위 메뉴 카드 */
	--smc-nav-nojs-basis: 100%;    /* 자바스크립트가 꺼졌을 때 메뉴 목록 너비 */

	/*
	 * 머리글 전용 전환 (아래 "머리글 한 줄 폭" 64em 의 @media, 계산은 그 위 주석).
	 * - 64em(1024px) 미만: 머리글 "메뉴" 버튼 + 전체 화면 메뉴(맨 위에 검색 칸), 아이콘 버튼은 전화 · 로그인
	 * - 64em 이상: 머리글 안 가로 메뉴, 아이콘 버튼은 검색 · 전화 · 로그인
	 */
	--smc-header-max: 90rem;            /* 머리글만 내용 최대 너비 1440px (본문은 --smc-container-max) */
	--smc-header-wrap: wrap;            /* 휴대폰 폭에서는 머리글 줄바꿈 허용 (가로 스크롤 방지) */
	--smc-header-wide-only: none;       /* 머리글 가로 메뉴, 머리글 검색 아이콘 */
	--smc-header-narrow-only: flex;     /* 머리글 "메뉴" 버튼 */

	/* 머리글 로고 (지시서 31 · 53): 그림 비율 약 4.30:1. 높이는 64em 미만 25px, 64em 이상 24px(계산은 아래 "머리글 한 줄 폭"). 폭은 비율대로, 최대 폭까지 */
	--smc-logo-height: 1.5625rem;                       /* 25px (64em 이상에서 24px) */
	--smc-logo-max: 12rem;                              /* 로고 최대 폭 192px */
	--smc-logo-space: calc(var(--smc-logo-height) / 4); /* 로고 둘레 여백: 높이의 4분의 1 */
	--smc-header-actions-gap: var(--smc-space-1);       /* 아이콘 버튼 사이 8px */
	--smc-search-field-min: 12rem;                      /* 검색 입력 칸 최소 폭 192px (더 좁으면 버튼이 아래 줄로) */

	/* ── 글 틀 (patterns/post-01 ~ 13, main.css 의 "18. 글 틀") ── */
	--smc-pat-col-min: 12.5rem;      /* 사진 · 카드 · 단계가 한 줄에 놓일 때 한 칸의 최소 너비 200px (좁으면 자동으로 아래로) */
	--smc-pat-th-width: 8em;         /* 표 왼쪽 항목 이름 칸 너비 */
	--smc-pat-photo-ratio: 3 / 2;    /* 사진 모음 · 행사 사진 비율 */
	--smc-text-stat: 2.75rem;        /* 숫자 강조 44px */
	/* 강조 상자 그림 (장식, 모양만 쓰고 색은 글자색으로 칠함) */
	--smc-pat-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='11'/%3E%3Cpath d='M14 13v7M14 8.5v.5'/%3E%3C/svg%3E");
	--smc-pat-icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l11 19H3z'/%3E%3Cpath d='M14 11v6M14 20v.5'/%3E%3C/svg%3E");
	--smc-pat-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 21h8M11 25h6M14 3a7 7 0 0 0-4 12.7c.7.6 1 1.4 1 2.3h6c0-.9.3-1.7 1-2.3A7 7 0 0 0 14 3z'/%3E%3C/svg%3E");
	--smc-pat-icon-deadline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 14l6 6 12-12'/%3E%3C/svg%3E");

	/* ── 요소 · 알림 띠 (지시서 26, main.css 의 "19.") ── */
	--smc-el-slide-width: min(86%, 21.25rem);   /* 넘겨 보기 카드 한 장 너비 (340px, 좁은 화면은 86%) */
	--smc-el-dot: 0.875rem;                      /* 넘겨 보기 점 크기 14px (누르는 영역은 44px) */
	--smc-el-line: 0.25rem;                      /* 연혁 세로 선 굵기 4px */
	--smc-el-dialog-width: min(45rem, 92vw);     /* 사진 확대 대화상자 너비 */
	--smc-el-dialog-img-max: 70vh;               /* 사진 확대 때 사진 최대 높이 */
	--smc-video-ratio: 16 / 9;                   /* 영상 비율 */
	--smc-scroll-behavior: smooth;               /* 넘겨 보기 부드러운 이동 (움직임 줄이기면 auto) */
	--smc-color-backdrop: color-mix(in srgb, var(--smc-color-text) 72%, transparent); /* 사진 확대 뒤 어두운 바탕 */

	/* ── 아코디언 · 목차 · 체크 목록 · 일러스트 (지시서 33, main.css 의 "21.") ── */
	--smc-check-width: 0.375em;    /* 체크 모양 너비 */
	--smc-check-height: 0.75em;    /* 체크 모양 높이 */
	--smc-check-top: 0.35em;       /* 체크 모양 위치 (글자 첫 줄 가운데쯤) */
	--smc-check-rotate: 45deg;
	--smc-illust-max: 16rem;       /* 일러스트 최대 너비 256px */
	--smc-journey-art-max: 10rem;  /* 여정 카드 그림 최대 너비 160px */
	--smc-first-visit-head-columns: 1fr; /* 좁은 화면: 글 아래 그림 (48em 이상에서 오른쪽) */

	/* ── 보기 방식(웹페이지형 · 매거진형) · 관련 글 (지시서 34, main.css 의 "22.") ── */
	--smc-switch-width: 2.125rem;    /* 움직임 줄이기 스위치 34px */
	--smc-switch-height: 1.25rem;    /* 20px */
	--smc-switch-knob: 0.875rem;     /* 손잡이 14px (켜지면 이만큼 오른쪽으로) */
	--smc-switch-gap: 0.1875rem;     /* 손잡이 둘레 3px */
	--smc-view-transition: 0.35s;    /* 보기 방식 화면 전환 효과 (움직임 줄이기면 0) */
	--smc-cover-columns: 1fr;        /* 표지: 좁은 화면은 그림이 글 아래 (48em 이상 오른쪽) */
	--smc-cover-art-order: 1;
	--smc-cover-art-column: auto;
	--smc-cover-art-row: auto;
	--smc-mag-title: clamp(2.5rem, 10vw, 5rem);   /* 매거진형 표지 큰 제목 40~80px */
	--smc-mag-lead: clamp(1.125rem, 2.4vw, 1.5rem); /* 매거진형 표지 설명 18~24px */
	--smc-mag-rule: 0.5rem;          /* 매거진형 제목 2 · 인용 위쪽 굵은 선 8px */
	--smc-mag-dropcap: 3.5em;        /* 매거진형 첫 글자 크기 */
	--smc-mag-dropcap-leading: 0.85;
	--smc-mag-quote: clamp(1.5rem, 4vw, 2.5rem);  /* 매거진형 큰 인용 24~40px */
	--smc-strip-item: min(78vw, 18.75rem); /* 관련 글 카드 한 장 너비 (300px, 좁은 화면 78%) */
	--smc-disabled-opacity: 0.5;     /* 더 갈 곳이 없는 이전 · 다음 버튼 */

	/* ── 일정 달력 · 목록 (지시서 35, main.css 의 "23.") ── */
	--smc-sched-columns: 1fr;          /* 좁은 화면: 달력 위 · 목록 아래 (64em 이상 왼쪽 · 오른쪽) */
	--smc-sched-card-pad: var(--smc-space-2); /* 달력 · 목록 상자 안쪽 여백 (48em 이상 24px) */
	--smc-sched-gap: 2px;              /* 날 칸 사이 (390px 에서도 칸 너비 44px 이상) */
	--smc-sched-day: 3.25rem;          /* 날 칸 높이 52px */
	--smc-sched-day-pad: 0.3rem;       /* 날짜 숫자 위 여백 */
	--smc-sched-mark: 0.4375rem;       /* 점 · 네모 7px */
	--smc-sched-mark-gap: 0.1875rem;   /* 표시 사이 3px */
	--smc-sched-legend-ring: 0.875rem; /* 범례의 오늘 테두리 상자 14px */
	--smc-sched-badge: 4rem;           /* 목록 날짜 배지 64px */
	--smc-sched-mdate: 5.25rem;        /* 주요 일정 큰 날짜 배지 84px */
	--smc-sched-dt: 5.2rem;            /* 자세히 보기 칸 이름 너비 */
	--smc-sched-rotate-prev: 90deg;    /* 펼침 화살표를 왼쪽으로 */
	--smc-sched-rotate-next: -90deg;   /* 오른쪽으로 */
	--smc-sched-anim: 0.3s;            /* 목록 나타남 (움직임 줄이기면 0) */
	--smc-sched-stagger: 40ms;         /* 항목마다 늦추는 시간 */

	/* ── 후원 분류 (지시서 36, main.css 의 "24.") ── */
	--smc-donation-pill-icon: 0.875rem; /* 후원 알약 하트 14px */
	--smc-donation-pill-gap: 0.25rem;   /* 하트와 글자 사이 4px */

	/* 처음 오셨나요 단계 상자 안쪽 여백: 좁은 화면은 번호가 왼쪽, 넓은 화면은 번호가 위 */
	--smc-step-padding: var(--smc-space-3) var(--smc-space-3) var(--smc-space-3) calc(var(--smc-step-num) + var(--smc-space-3) * 2);

	/* ── 디자인 개편 2026-10 (지시서 79, 시안 reference/design-2026-10/DESIGN-NOTES.md 2번 표) ──
	 * 새 부품(main.css 의 "디자인 개편 2026-10: 기초 부품")만 씁니다. 위의 기존 색은 그대로 둡니다.
	 * 같은 값이 이미 있는 것은 새로 만들지 않고 기존 이름을 씁니다: 흰색(surface) --smc-color-white, 알약 --smc-radius-pill,
	 * 카드 둥글기 20px --smc-radius-lg, 버튼 높이 48px --smc-chip-min, 작은 버튼 44px --smc-tap-min, 이야기 읽기 폭 720px --smc-content-max,
	 * 글자 굵기 --smc-weight-*, 큰 제목 56px --smc-text-hero.
	 */
	/* 지시서 83(2026-10-18): 사용자가 확정한 파랑 방향으로 값만 바꿈. 이름(teal 등)은 그대로이고 "청록" = 주색(primary), "청록 틴트" = 연한 주색. 괄호 안은 옛 값 */
	--smc-color-paper: #F6F8FC;        /* 바탕 (본문색과 대비 약 14.9, 옛 #FAF8F3) */
	--smc-color-ink: #1B2330;          /* 본문 글자 (옛 #1D2B2E) */
	--smc-color-muted: #566074;        /* 보조 글자 (바탕과 약 5.9, 흰색과 약 6.3, 옛 #4F5F62) */
	--smc-color-body-soft: #3F4A5C;    /* 접는 칸 본문 (옛 #3D4E51) */
	--smc-color-teal: #2457D6;         /* 주색: 주요 버튼 · 고른 탭 · 강조 글자 (흰 글자와 약 6.2, 옛 #0F6B63) */
	--smc-color-teal-dark: #1A3FA3;    /* 진한 주색: 버튼 마우스 올림 · 진한 강조 글자 (흰 글자와 약 9.2, 옛 #0B544E) */
	--smc-color-teal-tint: #E6EDFB;    /* 연한 주색: 아이콘 원 · 칩 · 연한 띠 · 열린 접는 칸 (진한 주색 글자와 약 7.8, 옛 #E1F0ED) */
	--smc-color-amber: #FFB020;        /* 강조(노랑) 버튼 바탕: 후원 · 전화하기 (본문색 글자와 약 8.6, 옛 #F0A93B) */
	--smc-color-amber-hover: #F29C0B;  /* 강조 버튼 마우스 올림 (옛 #E39A25) */
	--smc-color-amber-tint: #FFF1D6;   /* 연한 강조: 후원 띠 · 연한 노랑 (옛 #FBEBD0) */
	--smc-color-amber-text: #B26A00;   /* 큰 숫자 전용(24px 이상 굵은 글자, 바탕과 3.99). 작은 글자에 쓰지 않음 */
	--smc-color-amber-icon: #8A5A00;   /* 노랑 틴트 위 아이콘 (5.05) */
	--smc-color-amber-ink: #6B4A12;    /* 노랑 틴트 위 글자 (6.85) */
	--smc-color-sand: #E8EDF5;         /* 보조 바탕: 사진 자리 바탕 (옛 #F1E9DA, 2026-10-18) */
	--smc-color-sand-alt: #E8EDF5;     /* 보조 바탕: 빈 사진 자리 (옛 #EFE7D6, 2026-10-18) */
	--smc-color-line: #D5DDEC;         /* 테두리 (아닌 탭 · 접는 칸 · 보조 테두리, 옛 #DAD3C4) */
	--smc-logo-yellow: #FCD205;      /* 로고 세 사람 머리 색(ci-logo.svg): 당사자 */
	--smc-logo-orange: #F68712;      /* 로고: 가족 */
	--smc-logo-green: #00A650;       /* 로고: 이웃 */
	--smc-color-card-line: #E1E7F2;    /* 카드 테두리 (옛 #E8E1D2) */
	--smc-color-footer: #14264F;       /* 바닥글 바탕 (지시서 83 새 변수, 흰 글자와 약 14.8. 전에는 진한 주색을 씀) */
	--smc-color-footer-text: #C9D4EE;  /* 바닥글 보조 글자 (바닥글 바탕과 약 10.0, 옛 #CFE3DF) */
	--smc-shadow-badge: 0 10px 30px color-mix(in srgb, var(--smc-color-ink) 14%, transparent); /* 사진 위 배지 한 곳에만 쓰는 그림자 */

	--smc-radius-xl: 1.5rem;     /* 24px: 사진 틀, 큰 틀 */
	--smc-radius-2xl: 2.25rem;   /* 36px: 안쪽 페이지 표지의 그림 틀 */
	--smc-wide-max: 75rem;       /* 새 디자인 본문 최대 폭 1200px (좌우 여백은 --smc-gutter) */
	--smc-chip-height: 2rem;     /* 칩 높이 32px */
	--smc-fold-min: 4rem;        /* 접는 칸 단추 높이 64px */
	--smc-text-btn: 1rem;        /* 버튼 · 탭 글자 16px */
	--smc-text-btn-sm: 0.9375rem; /* 작은 버튼 글자 15px */
	--smc-text-chip: 0.875rem;   /* 칩 글자 14px */
	--smc-text-sec-num: 3rem;    /* 번호 섹션 머리의 큰 숫자 48px (Pretendard 800) */
	--smc-text-sec-title: clamp(1.625rem, 4vw, 2rem);   /* 섹션 제목 26~32px */
	--smc-text-page-title: clamp(2rem, 6vw, 3rem);      /* 안쪽 페이지 표지 제목 32~48px */
	--smc-text-card-lg: clamp(1.25rem, 2.4vw, 1.5rem);  /* 카드 제목 20~24px */
	--smc-sec-head-wrap: wrap;   /* 번호 섹션 머리: 좁은 화면은 버튼이 아래 줄로 */
	--smc-page-hero-columns: 1fr;                       /* 안쪽 페이지 표지: 좁은 화면은 그림이 글 아래 (48em 이상 2열) */
	--smc-photo-empty-icon: 3rem;                       /* 빈 사진 자리 가운데 아이콘 48px */
	/* 사진 자리 비율 7종 (smcmh_photo 의 ratio) */
	--smc-ratio-4-5: 4 / 5;
	--smc-ratio-16-10: 16 / 10;
	--smc-ratio-3-2: 3 / 2;
	--smc-ratio-4-3: 4 / 3;
	--smc-ratio-1-1: 1 / 1;
	--smc-ratio-16-9: 16 / 9;
	--smc-ratio-16-7: 16 / 7;
	/* 접는 칸의 더하기 · 빼기 모양 (아이콘 한 벌과 같은 선, 모양만 쓰고 색은 글자색으로 칠함) */
	--smc-fold-icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	--smc-fold-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");

	/* ── 디자인 개편 2단계: 머리글 · 바닥글 · 홈 (지시서 80) ── */
	--smc-text-xs: 0.75rem;              /* 12px: 로고 옆 부제 */
	--smc-nav-font: var(--smc-text-btn-sm); /* 넓은 화면 메뉴 글자 15px (한 줄 계산은 아래 "머리글 한 줄 폭 (지시서 80)") */
	--smc-nav-pad: var(--smc-space-1);   /* 메뉴 알약 안쪽 좌우 8px */
	--smc-header-pad: var(--smc-space-2); /* 머리글 좌우 여백 16px (머리글만, 본문은 --smc-gutter) */
	--smc-header-gap: var(--smc-space-1); /* 로고 · 메뉴 · 버튼 묶음 사이 8px */
	--smc-header-sub-display: none;      /* 로고 옆 부제: 1100px 이하에서 숨김 (아래 @media 에서 1101px 이상 보임) */
	--smc-header-donate-text: none;      /* 머리글 후원하기 글자: 1100px 이하에서는 하트 아이콘만(이름은 aria-label) */
	--smc-header-donate-pad: 0;          /* 아이콘만일 때 둥근 44px */
	--smc-icon-circle: 3.75rem;          /* 홈 하는 일 카드 아이콘 원 60px */
	--smc-badge-icon: var(--smc-tap-min); /* 홈 표지 배지 아이콘 원 44px */
	--smc-radius-band: 2rem;             /* 홈 후원 띠 둥글기 32px */
	--smc-date-badge: 4.5rem;            /* 홈 소식 · 일정 날짜 칸 72px */
	--smc-text-story-lg: clamp(1.5rem, 3vw, 1.875rem); /* 홈 큰 이야기 제목 24~30px */
	--smc-text-story-sm: 1.25rem;        /* 홈 작은 이야기 제목 20px */
	--smc-home-card-min: 17.5rem;        /* 홈 하는 일 카드 한 칸 최소 280px (좁으면 아래로) */
	--smc-home-hero-columns: 1fr;        /* 홈 표지: 좁은 화면은 사진이 글 아래 (64em 이상 2열) */
	--smc-home-story-columns: 1fr;       /* 홈 이야기: 좁은 화면은 위아래 (64em 이상 큰 카드 2 : 작은 카드 1) */
	--smc-home-visit-columns: 1fr;       /* 홈 오시는 길: 좁은 화면은 위아래 (48em 이상 2열) */
	--smc-footer-grid: 1fr;              /* 바닥글 칸 (48em 이상 2열, 64em 이상 4열) */

	/* ── 디자인 개편 4단계: 이야기 · 일정 · 후원 · 처리방침 · 사이트맵 (지시서 82) ── */
	--smc-radius-day: 0.875rem;          /* 달력 날짜 버튼 · 일정 줄 · 날짜 배지 둥글기 14px */
	--smc-story-max: 68.75rem;           /* 이야기 글 화면 사진 · 본문 묶음 최대 폭 1100px */
	--smc-story-head-max: 56.25rem;      /* 이야기 글 제목 칸 최대 폭 900px */
	--smc-story-side-columns: minmax(0, 1fr); /* 이야기 글 본문 + 옆 칸: 좁은 화면은 위아래 (1101px 이상 2열) */

	/* ── 사이트 로고 · 모기관 CI (지시서 83) ──
	 * 사이트 로고(사용자 정의하기 > 사이트 아이덴티티 > 로고)는 높이 44px 이하 · 폭은 비율대로, 최대 폭은 아래 값.
	 * 머리글 한 줄 계산(아래 "머리글 한 줄 폭 (지시서 80)"과 같은 방식, 메뉴 583px · 버튼 묶음 · 사이 16px · 좌우 32px, 3% 여유):
	 *   390px(64em 미만): 로고 칸이 예전 CI 114px 를 넘지 않게 이미지 최대 108px
	 *   1024px(64em ~ 1100px, 두 줄 문구 숨김): 후원하기 하트 포함 200px → 로고 칸 994 - 831 = 163px 이하 → 이미지 최대 160px
	 *   1280px(1101px 이상): 후원하기 글자 포함 280px → 로고 칸 1242 - 911 = 331px 이하,
	 *     두 줄 문구 약 108px + 세로 선과 사이 17px = 125px → 이미지 최대 200px
	 *   (지시서의 "폭 240px 이하, 1100px 이하에서 180px 이하" 안에서 한 줄을 지키려고 더 작게 정함)
	 */
	--smc-site-logo-height: 2.75rem;     /* 사이트 로고 최대 높이 44px */
	--smc-site-logo-max: 6.75rem;        /* 사이트 로고 최대 폭: 64em 미만 108px (64em 이상 160px, 1101px 이상 200px) */

	/* ── 오시는 길 지도 [smc_map] (지시서 89) ── */
	--smc-map-min-height: 17.5rem;       /* 지도 틀 최소 높이 280px (좁은 화면에서도) */
}

/* 600px 이하: WordPress 관리 막대가 쪽과 함께 올라가 사라지므로 머리글은 화면 맨 위에 붙음 (방문자 화면은 원래 0) */
@media (max-width: 37.5em) {
	:root {
		--smc-adminbar-sticky: 0px;
	}
}

/* 태블릿 (768px 이상) */
@media (min-width: 48em) {
	:root {
		--smc-gutter: var(--smc-space-3);
		--smc-notice-columns: repeat(2, 1fr);
		--smc-question-columns: repeat(3, 1fr);
		--smc-journey-columns: repeat(3, 1fr);
		--smc-story-columns: repeat(2, 1fr);
		--smc-steps-columns: repeat(2, 1fr);
		--smc-day-columns: repeat(3, 1fr);
		--smc-footer-columns: 1.4fr 1fr 1fr;
		--smc-menu-card-columns: repeat(2, 1fr);
		--smc-header-wrap: nowrap;
		--smc-first-visit-head-columns: minmax(0, 1fr) minmax(0, var(--smc-illust-max));
		--smc-cover-columns: minmax(0, 1fr) minmax(0, var(--smc-illust-max));
		--smc-sched-card-pad: var(--smc-space-3);
		--smc-cover-art-order: 0;
		--smc-cover-art-column: 2;
		--smc-cover-art-row: 1 / span 4;
		--smc-page-hero-columns: minmax(0, 1fr) minmax(0, 1fr); /* 안쪽 페이지 표지 2열 (지시서 79) */
		--smc-sec-head-wrap: nowrap;
		--smc-home-visit-columns: minmax(0, 1fr) minmax(0, 1fr); /* 지시서 80 */
		--smc-footer-grid: repeat(2, minmax(0, 1fr));
	}
}

/* 데스크톱 (1024px 이상): 홈 표지 · 이야기 2열, 바닥글 4열 (지시서 80) */
@media (min-width: 64em) {
	:root {
		--smc-home-hero-columns: minmax(0, 11fr) minmax(0, 9fr);
		--smc-home-story-columns: minmax(0, 2fr) minmax(0, 1fr);
		--smc-site-logo-max: 10rem; /* 사이트 로고 최대 폭 160px (64em ~ 1100px, 지시서 83) */
		--smc-footer-grid: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
	}
}

/*
 * 머리글 한 줄 폭 (지시서 80, 새 디자인). 64em(1024px) 이상이 가로 메뉴인 것은 그대로(지시서 31).
 * 계산(메뉴 글자 15px, 한글 1자 ≈ 1em):
 *   메뉴 6개 글자 23자 × 15px = 345px + 알약 좌우 8px × 2 × 6 = 96px + 펼침 버튼 44px × 3 = 132px + 사이 2px × 5 = 10px → 583px
 *   버튼 묶음: 검색 · 전화 · 로그인 44px × 3 = 132px + 사이 8px × 3 = 24px + 후원하기(공개된 후원 안내가 있을 때만)
 *     1100px 이하: 후원하기는 하트만 44px → 200px
 *     1101px 이상: 후원하기 글자 포함 약 124px → 280px
 *   로고 24px × 4.30 ≈ 103px + 6px = 109px. 1101px 이상은 로고 아래 부제(12px × 17자 ≈ 212px)를 함께 써서 칸 폭 약 218px
 *   사이 8px × 2 = 16px, 좌우 여백 16px × 2 = 32px
 *   1024px: 109 + 583 + 200 + 16 + 32 = 940px, 3% 여유 968px ≤ 1024px
 *   1280px: 218 + 583 + 280 + 16 + 32 = 1129px, 3% 여유 1163px ≤ 1280px
 *   (후원 안내가 초안이면 후원하기가 없어 더 좁음. 윈도 브라우저의 세로 스크롤 막대 약 15px 는 위 여유 안에 들어감)
 */
@media (min-width: 68.8125em) {
	:root {
		--smc-header-sub-display: block;
		--smc-header-donate-text: inline;
		--smc-header-donate-pad: var(--smc-space-2);
		--smc-story-side-columns: minmax(0, var(--smc-content-max)) minmax(0, 21.25rem); /* 이야기 글: 본문 720px + 옆 칸 340px (지시서 82) */
		--smc-site-logo-max: 12.5rem; /* 사이트 로고 최대 폭 200px (지시서 83, 위 계산) */
	}
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 64em) {
	:root {
		--smc-text-2xl: 2.25rem;

		--smc-gutter: var(--smc-space-4);
		--smc-hero-space-top: var(--smc-space-8);
		--smc-hero-gap: var(--smc-space-6);

		--smc-desktop-only: flex;
		--smc-mobile-only: none;
		--smc-mobile-bottom-space: 0px;
		--smc-hero-columns: 11fr 9fr;
		--smc-story-columns: repeat(3, 1fr);
		--smc-steps-columns: repeat(4, 1fr);
		--smc-menu-card-columns: repeat(3, 1fr);
		--smc-step-padding: calc(var(--smc-step-num) + var(--smc-space-3) * 2) var(--smc-space-3) var(--smc-space-3);
		--smc-sched-columns: minmax(0, 1.6fr) minmax(0, 1fr); /* 지시서 82: 시안처럼 달력 넓게 · 선택한 날 일정 오른쪽 (이전 minmax(0, 28rem) minmax(0, 1fr)) */
	}
}

/*
 * 머리글 한 줄 폭 (지시서 31): 64em (1024px)
 * 계산 (글자 1개 ≈ 1em, 본문 18px 기준, 지시서 20과 같은 방식):
 *   로고(지시서 53에서 다시 계산): CI 파일 높이 24px × 비율 4.30 ≈ 103px + 오른쪽 여백 6px = 109px (글자 로고면 약 90px)
 *     (목표 32px 이면 138px + 8px = 146px → 합계 1032px, 3% 여유 1063px 로 1024px 를 넘어 24px 로 낮춤)
 *   메뉴(가장 긴 경우): 만나요 · 계획해요 · 성장해요 · 함께해요 · 이야기 · 소식·일정 6개, 글자 23자 × 18px = 414px
 *     + 항목 좌우 여백 16px × 6 = 96px + 하위 항목이 있는 항목 3개의 펼침 버튼 44px × 3 = 132px → 642px
 *     (일정 · 게시판이 따로 있는 7개 경우: 23자 414px + 여백 112px + 펼침 버튼 2개 88px = 614px, 더 작음)
 *   아이콘 버튼 3개: 44px × 3 = 132px + 버튼 사이 8px × 2 = 16px → 148px
 *   요소 사이 간격(로고 · 메뉴 · 아이콘 묶음) 16px × 2 = 32px, 화면 양옆 여백 32px × 2 = 64px
 *   합계 = 109 + 642 + 148 + 32 + 64 = 995px, 3% 여유를 더해 약 1025px (1024px 와 1px 차이, 경계값. 지시서 53)
 *   (지시서 31 당시: 로고 44px × 2.01 + 11px = 99px → 985px, 3% 여유 1015px)
 * 좁은 화면(390px) 한 줄: 검색 아이콘을 빼고 메뉴 시트 맨 위의 검색 칸을 씀(지시서 31).
 *   지시서 53: 로고 25px × 4.30 ≈ 108px + 여백 6px = 114px, "메뉴" 버튼 약 102px, 아이콘 2개 88px + 사이 8px = 96px,
 *   요소 사이 간격 16px × 2 = 32px, 양옆 16px × 2 = 32px → 114 + 102 + 96 + 32 + 32 = 376px, 3% 여유 387px ≤ 390px.
 *   (목표 26px 이면 112 + 7 = 119px → 381px, 3% 여유 392px 로 390px 를 넘어 25px 로 낮춤)
 */
@media (min-width: 64em) {
	:root {
		--smc-header-wide-only: flex;
		--smc-header-narrow-only: none;
		--smc-logo-height: 1.5rem; /* 24px (지시서 53, 위 계산) */
		--smc-nav-nojs-basis: auto;
	}
}

/* 움직임 줄이기 설정: 떠오르기와 전환 효과를 끔 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--smc-lift: 0px;
		--smc-lift-small: 0px;
		--smc-transition: 0s;
		--smc-scroll-behavior: auto;
		--smc-panel-duration: 0s;
		--smc-panel-shift: 0px;
		--smc-view-transition: 0s;
		--smc-sched-anim: 0s;
		--smc-sched-stagger: 0s;
	}
}

/* 보기 설정 막대의 "움직임 줄이기" 스위치를 켰을 때 (assets/js/program.js 가 html 에 smc-reduce 를 붙임, 지시서 34) */
:root.smc-reduce {
	--smc-lift: 0px;
	--smc-lift-small: 0px;
	--smc-transition: 0s;
	--smc-scroll-behavior: auto;
	--smc-panel-duration: 0s;
	--smc-panel-shift: 0px;
	--smc-view-transition: 0s;
	--smc-sched-anim: 0s;
	--smc-sched-stagger: 0s;
}

/* ── 색 테마와 세 가지 톤 (2026-10-19, 사용자 결정) ─────────────────────────
 * 사이트 색은 두 묶음 중 하나: 원래 색감(기본) · 파스텔(외모 > 사용자 정의하기 > 사이트 색).
 * 파스텔은 <html data-smc-theme="pastel"> 일 때 아래 두 번째 블록이 위의 값을 덮어씀.
 * --smc-on-teal : 주색(teal) 바탕 위 글자색. 원래 색감은 흰색, 파스텔은 본문색(파스텔 위에 흰 글자는 읽기 어려움).
 * --smc-on-teal-dark : 진한 주색(마우스 올림) 위 글자색, 두 테마 모두 흰색.
 * 톤 3가지(--smc-tone1~3): 배움 파랑 · 나눔 노랑(주황) · 이룸 하늘(분홍). 카드 · 단계 · 인재상 카드가 같은 짝으로 씀.
 */
:root {
	--smc-on-teal: var(--smc-color-white);
	--smc-on-teal-dark: var(--smc-color-white);

	--smc-tone1: var(--smc-color-teal);
	--smc-tone1-soft: var(--smc-color-teal-tint);
	--smc-tone1-deep: var(--smc-color-teal-dark);
	--smc-tone1-on: var(--smc-on-teal);

	--smc-tone2: var(--smc-color-amber);
	--smc-tone2-soft: var(--smc-color-amber-tint);
	--smc-tone2-deep: var(--smc-color-amber-icon);
	--smc-tone2-on: var(--smc-color-ink);

	--smc-tone3: #5BA4CF;
	--smc-tone3-soft: #E3F1F9;
	--smc-tone3-deep: #1F6A93;
	--smc-tone3-on: var(--smc-color-ink);

	--smc-tone4: #B9C4DB;       /* 보조(지향 가치 원 등): 회색 파랑 */
	--smc-tone4-soft: #E8EDF5;
	--smc-tone4-deep: #3F4A5C;
	--smc-tone4-on: var(--smc-color-ink);
}

:root[data-smc-theme="pastel"] {
	/* 파스텔: 바탕은 미색, 부품(버튼 · 칩 · 아이콘 · 카드)만 인재상 3색. 나머지 색(링크 · 제목 · 머리글 · 바닥글)은 그대로 */
	--smc-color-paper: #FBFAF7;
	--smc-color-bg: #FBFAF7;
	--smc-color-line: #E7E2D9;
	--smc-color-card-line: #EFEAE0;

	--smc-tone1: #8DB3E2;
	--smc-tone1-soft: #E4EEFA;
	--smc-tone1-deep: #2D5A96;
	--smc-tone1-on: var(--smc-color-ink);

	--smc-tone2: #F6B26B;
	--smc-tone2-soft: #FDEDD8;
	--smc-tone2-deep: #93500F;
	--smc-tone2-on: var(--smc-color-ink);

	--smc-tone3: #D5A6BD;
	--smc-tone3-soft: #F7E8F0;
	--smc-tone3-deep: #7B3C5A;
	--smc-tone3-on: var(--smc-color-ink);
}