/* ============================================================================
품티켓 템플릿 — 디자인 토큰 (2026-09-21)
----------------------------------------------------------------------------
값의 정본은 이 파일이다. 문서와 어긋나면 이 파일이 맞다.
템플릿을 20개 만들어도 **이 토큰과 base/components 골격은 그대로 쓴다.**
템플릿마다 다른 것은 각 버전 폴더의 theme.css 뿐 —
주색 · 모서리 · 그림자 · 프레임(테두리/배경) · 좌우 배치 · 제목 강조 표현.
폭·여백 수치는 사장님 확정(2026-09-21):
콘텐츠 1180 · 거터 PC 50 / 태블릿 32 / 모바일 18 · 섹션 상하 PC 140 / 모바일 64
============================================================================ */
:root{
/* ── 색 ─────────────────────────────────────────────────────────────────
주색만 사이트별로 갈아 끼운다. 나머지 중립색은 20종 공통. */
--pt-primary: #e53f5a; /* 포인트(버튼·강조) — theme.css 에서 교체 */
--pt-on-primary: #ffffff; /* 주색 위 글자 */
--pt-ink: #191919; /* 기본 글자 */
--pt-ink2: #2e2e2e; /* 보조 글자 */
--pt-grey: #6b6b6b; /* 설명·서브타이틀 */
--pt-off: #f6f5f1; /* 섹션 교대 배경 */
--pt-line: #ececec; /* 옅은 경계선 */
--pt-white: #ffffff;
--pt-dark: #141b2e; /* 헤더·어두운 띠 */
--pt-dark-fg: #f2f2f2;
--pt-legal-bg: #0b1226; /* 법정고지 박스 */
--pt-legal-fg: #ececec;
--pt-overlay: rgba(0,0,0,.45); /* 인물 사진 위 — 검정 계열만 */
--pt-overlay-soft: rgba(0,0,0,.28);
/* ── 가로 : 폭은 .wrap 한 곳에서만 정한다 ────────────────────────────── */
--pt-content: 1180px; /* 콘텐츠 최대 폭 */
--pt-doc: 720px; /* 하위문서 본문 글줄 폭(읽기 편한 길이) */
--pt-gutter-pc: 50px; /* ≥1280 */
--pt-gutter-tb: 32px; /* 768~1279 */
--pt-gutter-mo: 18px; /* ≤767 */
--pt-gutter: var(--pt-gutter-pc); /* ★실제로 쓰는 값은 이 하나 — 미디어쿼리로 갈아 끼운다.
컨테이너마다 PC/모바일 규칙을 따로 쓰면 파일 안 순서로 승패가 갈린다 */
/* ── 세로 리듬 ───────────────────────────────────────────────────────── */
--pt-sec-y: 140px; /* 섹션 상하 여백(섹션 자신이 든다) */
--pt-block: 28px; /* 섹션 머리 → 본문 덩이 */
--pt-gap: 20px; /* 격자 칸 사이 */
--pt-card-pad: 30px; /* 카드 안쪽 여백(PC 28~32 범위) */
/* ── 모양 ───────────────────────────────────────────────────────────── */
--pt-radius: 14px;
--pt-radius-sm: 10px;
--pt-border: 1px solid var(--pt-line);
--pt-shadow: none; /* 기본은 선만. 그림자를 쓰는 템플릿이 theme.css 에서 켠다 */
/* ── 히어로 ─────────────────────────────────────────────────────────── */
--pt-hero-min: 520px; /* PC 글상자 최소 높이 */
--pt-hero-ratio: 1; /* 사진 상자 비율(1 = 정사각) */
--pt-hero-gap: 40px;
/* ── 카드뉴스(케러셀) ───────────────────────────────────────────────── */
--pt-deck-cols: 3; /* PC 3열 → 9장이면 3×3 */
--pt-card-ratio: 1; /* 문구가 든 카드는 자르지 않는다 */
/* ── 글자 ───────────────────────────────────────────────────────────── */
--pt-font:'Pretendard Variable', Pretendard, 'Malgun Gothic', -apple-system, sans-serif;
--pt-h1: 44px; --pt-h2: 32px; --pt-h3: 20px;
--pt-body: 16px; --pt-small: 13.5px;
--pt-lh-head: 1.32; --pt-lh-body: 1.8;
--pt-w-h1: 800; --pt-w-h2: 800; --pt-w-h3: 700;
}
/* 태블릿 768~1279 */
@media (max-width:1279px){
:root{
--pt-gutter: var(--pt-gutter-tb);
--pt-sec-y: 100px;
--pt-h1: 36px; --pt-h2: 28px;
}
}
/* 모바일 ≤767 */
@media (max-width:767px){
:root{
--pt-gutter: var(--pt-gutter-mo);
--pt-sec-y: 64px;
--pt-block: 20px;
--pt-gap: 12px;
--pt-card-pad: 18px; /* 모바일 18~20 */
--pt-deck-cols: 1; /* 카드뉴스는 세로 1열로 전부 펼친다 */
--pt-hero-min: 0px;
--pt-h1: 28px; --pt-h2: 22px; --pt-h3: 17px; --pt-body: 15px;
}
}
/* 글꼴은 각 페이지 에서 부른다(토큰 파일이 대신 로드하지 않는다) :
*/