/* 매니아(본체·매니아N·오백) 사이트 모양 파일 — 색·글꼴·글자 크기·모서리·폭·여백 등 사이트 모양 값을 모두 여기에. 디자인 시험 사이트(design.massagemania.co.kr) 시험본.
 * 사장님 2026-11-14 "우리 사이트 모양에 관련된값은 여기에 다 적는거야.. 여기를 바꾸면 사이트 색상이 바꾸고 모양이 바뀌는 걸을 원해". 설명 문서 = /home/mania/design/mania/THEME.md
 * 사장님 2026-11-13 D-2296 "매니아도 발잡처럼 값 바꾸는 방식으로 하자" · "주색은 로고파일의 그 색상" · "1번 진한 주황 그대로".
 * 설계도 = /home/mania/design/mania/DESIGN.md. 값은 설계도 → 이 파일 한 방향으로만 옮긴다.
 *
 * ■ 세 영역 (사장님 2026-11-14 "brand primary secondary 으로 하자고" · "테마별 영역을 만들어서" · "너의 권고대로 3영역으로 진행해")
 *   ① 공통 영역      — 두 테마에서 반드시 같은 값만 (로고색·단계 계산·글꼴·글자 크기·모서리·촘촘함·폭·여백·제목 크기).
 *   ② 밝은 테마 영역 — :root:not(.dark) = 「dark 가 아닐 때」(사이트는 어두울 때만 <html class="dark"> 를 붙이고 light 클래스는 없음). 테마마다 달라야 하는 역할 값.
 *   ③ 어두운 테마 영역 — .dark. ②와 **이름이 똑같은 짝**으로 적는다. ②③ 은 서로 겹치지 않으므로(사장님 2026-11-14 "그래 3영역으로 진행해")
 *     한쪽에 빠뜨리면 그 테마에서 값이 아예 없어 화면이 확실히 깨진다 → 검사기가 짝을 확인. 두 테마가 같은 값은 ① 에만.
 *   고친 뒤 검사: python3 /home/mania/design/mania/tools/check_theme_areas.py
 * ■ 이름 세 개
 *   --brand     = 로고 주황 #FF5F0C. 로고·상호명·큰 글씨에만(흰 바탕 작은 글씨 3.0배라 약함).
 *   --primary   = 주요 버튼 — 본질 3가지(구인등록·구직등록·주문하기)에만. 주색 86% + 검정 자동 계산(#DB520A), 두 테마 같은 값. 2026-11-14 전 이름 --brand-strong.
 *   --secondary = 고른 상태(칩·구분 칸·현재 페이지) — 버튼 아님. 덜 중요한 버튼은 회색 테두리.
 * ■ 화면 파일(레이아웃)은 지금처럼 Tailwind 단계 이름(bg-blue-600·dark:text-blue-400)을 읽는다 — 단계 값은 ① 에서 --primary 로 계산.
 *   역할 값(②③)은 우리 CSS 부품·메뉴·팝업부터 var(--…) 로 읽고, 새로 고치는 화면부터 차츰 옮긴다.
 * Tailwind 의 파랑·남색·primary 값만 덮어씀. 클래스 재정의·새 클래스 없음. 빨강·초록 등 뜻이 있는 색은 그대로.
 * 500 단계는 흰 글씨 배지·어두운 테마 버튼에 쓰이므로 600 과 같은 진한 주황(로고 주황 위 흰 글씨 금지 규칙). */

/* ════════ ① 공통 영역 ════════ */
:root{
--brand:#FF5F0C;
--primary:color-mix(in srgb,var(--brand) 86%,black); /* 주요 버튼 #DB520A — 두 테마 같은 값. 사장님 2026-11-13 "여기서 조금 더 밝게"(80→86%, 흰 글씨 4.0배) · 2026-11-14 "다크테마에서 primary를 라이트 테마와 똑같이 해봐"(어두운 테마 채도 낮춘 #AE532F 시험 끝) */
--on-primary:#fff;
/* 단계 계산 — 화면의 bg-blue-600 등이 읽는 값. 50~400 흰색 섞음, 500·600 = --primary(테마별 ② ③), 700~950 검정 섞음 */
--color-blue-50:color-mix(in srgb,var(--brand) 7%,white);
--color-blue-100:color-mix(in srgb,var(--brand) 14%,white);
--color-blue-200:color-mix(in srgb,var(--brand) 26%,white);
--color-blue-300:color-mix(in srgb,var(--brand) 42%,white);
--color-blue-400:color-mix(in srgb,var(--brand) 64%,white);
--color-blue-500:var(--primary);
--color-blue-600:var(--primary);
--color-blue-700:color-mix(in srgb,var(--primary) 86%,black);
--color-blue-800:color-mix(in srgb,var(--primary) 72%,black);
--color-blue-900:color-mix(in srgb,var(--primary) 58%,black);
--color-blue-950:color-mix(in srgb,var(--primary) 42%,black);
--color-indigo-50:color-mix(in srgb,var(--brand) 7%,white);
--color-indigo-100:color-mix(in srgb,var(--brand) 14%,white);
--color-indigo-200:color-mix(in srgb,var(--brand) 26%,white);
--color-indigo-300:color-mix(in srgb,var(--brand) 42%,white);
--color-indigo-400:var(--color-blue-400);
--color-indigo-500:var(--primary);
--color-indigo-600:var(--primary);
--color-indigo-700:color-mix(in srgb,var(--primary) 86%,black);
--color-indigo-800:color-mix(in srgb,var(--primary) 72%,black);
--color-indigo-900:color-mix(in srgb,var(--primary) 58%,black);
--color-indigo-950:color-mix(in srgb,var(--primary) 42%,black);
/* 2026-11-14 main.css @theme 의 --color-primary-*(파랑 #2563eb, 결제금액·오류화면 버튼 등 12개 화면) 도 파랑 칸과 같은 값으로 — 사장님 "결제금액만 파랑" 지적(주문 화면 분석) 후 "추천대로". */
--color-primary-50:var(--color-blue-50);
--color-primary-100:var(--color-blue-100);
--color-primary-200:var(--color-blue-200);
--color-primary-300:var(--color-blue-300);
--color-primary-400:var(--color-blue-400);
--color-primary-500:var(--color-blue-500);
--color-primary-600:var(--color-blue-600);
--color-primary-700:var(--color-blue-700);
--color-primary-800:var(--color-blue-800);
--color-primary-900:var(--color-blue-900);
--color-primary-950:var(--color-blue-950);
/* 광고 그림(썸네일·홈배너·스크롤배너) 모서리 — 사장님 2026-11-13 "나 으로 통일"(구인 목록 썸네일 4.8px). 화면은 var(--radius-ad, 4.8px) */
--radius-ad:4.8px;
/* 화면 큰 제목 크기 — 사장님 2026-11-13 "구인광고 요금안내 크기는 하나의 변수값으로" · "타이틀 크기를 30으로 수정해봐"(PC 36 → 30, 휴대폰과 같음). 화면은 var(--page-title-size, 30px)·var(--page-title-line, 36px) */
--page-title-size:30px;
--page-title-line:36px;
/* 강조색(분홍) — 팝업 찜 하트·등록자 닉네임. 사장님 2026-11-13 "닉네임과 bottom 버튼의 스크랩 색상은 하나의 색으로 등록하고... 변수로" → "다시 분홍색으로"(pink-500) */
--accent:#f6339a;
/* 사이트 폭·끝 여백·본문 안쪽 여백 — 사장님 2026-11-13 "header등 사이트 전체 폭을 1120으로" · "구인,구직목록에 좌우 여백" → "제안 대로 해봐" · "헤더 1120 안에서 본문을 48px 더 안으로".
 * 휴대폰·태블릿(1023px 이하): 끝 여백 12px, 본문 안쪽 0 / PC(1024px 이상, 아래 @media): 끝 여백 48px, 본문 안쪽 48px → 헤더 1120(1280 화면 80px), 본문 1024(128px) */
--site-width:1120px;
--page-gutter:12px;
--content-inset:0px;
/* ── 모양 값 (사장님 2026-11-14 "우리 사이트 모양에 관련된값은 여기에 다 적는거야" · "폰트,포트크기 등등..." · "1-4 모두 작업하고") ──
 * 매니아는 지금 값 그대로(화면 변화 없음). 복제 사이트는 아래 값만 바꿔 생김새를 다르게. 글자 크기·촘촘함은 사이트 전체가 한꺼번에 움직이니 바꾼 뒤 주요 화면 사진 확인 필수. */
/* 글꼴 — 본문(main.css html,body)·얼굴 글꼴(.font-peace 상호명·엠콜·홈 큰 글씨). 다른 글꼴을 쓰면 그 글꼴 파일 @font-face 도 이 파일에 */
--font-body:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-display:'PyeongChang Peace',sans-serif;
/* 글자 크기 단계 — 화면의 text-xs·text-sm·text-base … 가 읽음 (뒤 --line-height 는 그 크기의 줄 높이 배율) */
--text-xs:.75rem;--text-xs--line-height:calc(1/.75);
--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);
--text-base:1rem;--text-base--line-height:1.5;
--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);
--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);
--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);
--text-3xl:1.875rem;--text-3xl--line-height:1.2;
--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);
/* 모서리 둥글기 — rounded(기본, 약 4,047곳)·rounded-sm·md·lg(약 2,158곳)·xl·2xl·3xl 이 읽음. 0 이면 각진 사이트. rounded-full(동그라미)은 그대로 */
--radius:.25rem;
--radius-sm:.25rem;
--radius-md:.375rem;
--radius-lg:.5rem;
--radius-xl:.75rem;
--radius-2xl:1rem;
--radius-3xl:1.5rem;
/* 글자 역할 — 화면은 tx-page-title·tx-page-subtitle·tx-card-title·tx-card-subtitle·tx-body·tx-price·tx-form-label·tx-form-input·tx-form-placeholder·tx-form-help·tx-form-error 이름만(main.css @utility).
 * 크기·굵기는 여기(① 공통), 색은 ② 밝은·③ 어두운 영역 --tx-*. 사장님 2026-11-14 "tx-page-title tx-page-sub-title tx-page-body 이런식이어야" · "form 의 항목명, 입력란의 플레이스홀드 글자등" → "그래 진행해" */
--tx-page-title-size:var(--page-title-size); --tx-page-title-line:var(--page-title-line); --tx-page-title-weight:700;
--tx-page-subtitle-size:var(--text-sm); --tx-page-subtitle-line:var(--text-sm--line-height);
--tx-card-title-size:var(--text-lg); --tx-card-title-line:var(--text-lg--line-height); --tx-card-title-weight:700;
/* --tx-card-subtitle-size:; --tx-card-subtitle-line:; (아직 안 씀 — 비워 둠) */
--tx-body-size:var(--text-sm); --tx-body-line:var(--text-sm--line-height);
--tx-price-size:var(--text-xl); --tx-price-line:var(--text-xl--line-height); --tx-price-weight:700;
--tx-price-lg-size:var(--text-2xl); --tx-price-lg-line:var(--text-2xl--line-height); --tx-price-lg-size-pc:var(--text-3xl); --tx-price-lg-line-pc:var(--text-3xl--line-height); --tx-price-lg-weight:700; --tx-price-lg-tracking:-0.025em; /* 큰 금액(요금안내 「무료」「15만」) — 휴대폰 24px · PC(768px 이상) 30px. 사장님 2026-11-14 "tx-price-lg하나 만들어" */
--tx-job-list-title-size:var(--text-sm); --tx-job-list-title-line:var(--text-sm--line-height); --tx-job-list-title-size-pc:var(--text-base); --tx-job-list-title-line-pc:var(--text-base--line-height); --tx-job-list-title-weight:500; /* 구인·구직 목록 글 제목 — 휴대폰 14·PC(640px 이상) 16px. 사장님 2026-11-14 "구인구직은 지금 16px로 그대로 둬" · "tx-job-list-title" */
--tx-list-title-size:var(--text-sm); --tx-list-title-line:var(--text-sm--line-height); --tx-list-title-weight:500; /* 게시판 목록 글 제목 14px — "게시판은 그대로 tx-list-title" */
--tx-form-label-size:var(--text-sm); --tx-form-label-line:var(--text-sm--line-height);
--tx-form-input-size:var(--text-sm);
--tx-form-help-size:var(--text-xs); --tx-form-help-line:var(--text-xs--line-height);
--tx-form-error-size:var(--text-xs); --tx-form-error-line:var(--text-xs--line-height);
/* 버튼 크기 — 화면은 btn-xs·btn-sm·btn-md·btn-lg·btn-xl 이름만 적고(main.css @utility), 높이·좌우 여백·글자는 여기서. 사장님 2026-11-14 "btn-xs btn-sm btn-md btn-lg btn-xl 이렇게 정의하고 아직 사용하지 않는 클래스는 그냥 비워둬"
 *   sm = 선택 버튼·광고관리 카드 버튼·주소선택 / md(normal) = 이전·다음·상품·기간·수정 완료·광고 등록 / lg = 주문하기. xs·xl 은 아직 안 씀(값 비움 — 필요할 때 아래 주석을 풀어 넣기) */
/* --btn-xs-h:; --btn-xs-px:; --btn-xs-text:; */
--btn-sm-h:34px; --btn-sm-px:12px; --btn-sm-text:var(--text-sm);
--btn-md-h:38px; --btn-md-px:16px; --btn-md-text:var(--text-sm);
--btn-lg-h:44px; --btn-lg-px:24px; --btn-lg-text:var(--text-base); /* 글자 16px — 사장님 "large44 사이즈는 그대로 글자만 16px로 키워봐" */
/* --btn-xl-h:; --btn-xl-px:; --btn-xl-text:; */
/* 촘촘함 — 안쪽 여백·간격·높이(p-4·gap-2·h-9 …)의 한 칸. .25rem = 4px. 키우면 사이트 전체가 넓게, 줄이면 촘촘하게 */
--spacing:.25rem;
}
@media (min-width:64rem){:root{--page-gutter:48px;--content-inset:48px}} /* ① 공통 — PC 여백 */
/* ════════ ② 밝은 테마 영역 ════════ */
:root:not(.dark){
--tx-strong:var(--color-gray-900,#101828);  /* 제목·금액 글씨 */
--tx-body:var(--color-gray-900,#101828);    /* 본문·입력란 글씨 */
--tx-label:var(--color-gray-600,#4a5565);   /* 항목명·부제 — 2026-11-14 광고주문 「이름 글씨 한 단계 연하게」와 같은 값 */
--tx-help:var(--color-gray-500,#6a7282);    /* 설명·도움말 */
--tx-placeholder:var(--color-gray-400,#99a1af); /* 입력란 흐린 안내 */
--tx-list:var(--color-gray-700,#364153);   /* 게시판 목록 글 제목 */
--primary-text:var(--primary);   /* 주색 글씨·링크. 흰 바탕 4.0배 — 후보 #BC4709(5.2배)는 사진 비교 후 사장님 결정 */
--secondary:#1D293D;             /* 고른 상태 바탕 — 진한 남색. 사장님 2026-11-14 #3B4C6D(채도 낮춘 남색) 시험 뒤 "이제 라이트 테마에서 secondary를 이전의 진한남색으로 바꿔봐". 흰 글씨 14.6배 */
--on-secondary:#fff;
--surface:#fff;                  /* 카드 바탕 */
--on-surface:var(--color-gray-900,#101828); /* 본문 글씨 17.8배 */
--outline:var(--color-gray-300,#d1d5dc);    /* 칸 테두리 1.5배(구분용) */
--error:var(--color-red-600,#e7000b);       /* 4.8배 */
}
/* ════════ ③ 어두운 테마 영역 — ②와 같은 이름 짝 ════════ */
.dark{
--tx-strong:#fff;                          /* 제목·금액 글씨(지금 dark:text-white) */
--tx-body:var(--color-gray-100,#f3f4f6);
--tx-label:var(--color-gray-400,#99a1af);
--tx-help:var(--color-gray-400,#99a1af);
--tx-placeholder:var(--color-gray-500,#6a7282);
--tx-list:var(--color-gray-300,#d1d5dc);
--primary-text:var(--color-blue-400); /* 연한 주황 #FF9963, 진회색 바탕 7.0배 */
--secondary:#E5E7EB;             /* 고른 상태 바탕 — 흰색에 가까운 회색. 사장님 2026-11-14 연한 남색 #AFBACF "좀 흐리멍텅해..." → "그냥 약간 흰색에 가까운 회색으로할까?" → 사진 비교 "2번 으로 하고". 검은 글씨 14.3배 */
--on-secondary:#101828;          /* 14.3배 */
--surface:var(--color-gray-800,#1e2939);
--on-surface:var(--color-gray-100,#f3f4f6); /* 13.3배 */
--outline:var(--color-gray-600,#4a5565);    /* 1.9배(구분용) */
--error:var(--color-red-400,#ff6467);       /* 5.1배 */
}
/* 손가락 커서 규칙은 D-2305(2026-11-15) 기능 스테이징 반영 때 main.css(@layer base)로 옮김 */