/* ==========================================================================
골만사 — 디자인 토큰 v1.0 (2026-08-14)
출처: 12주년 기념집 실측 + WCAG 대비 계산 검증
주의: 이 파일의 값을 컴포넌트에서 하드코딩으로 덮어쓰지 말 것
========================================================================== */
:root {
/* 브라우저 자동 다크 반전 차단 (카카오 인앱·Android Auto Dark 대응)
HTML 에도 필요 */
color-scheme: light;
/* ── 1. 브랜드 원색 (출처 고정값 — 로고·OG에만 직접 사용) ─────────── */
--brand-navy: #2E3192; /* 책자 표지 대각선 밴드 */
--brand-green: #3FA829; /* 로고 중앙 원 */
--brand-lime: #C8D63C; /* 로고 외곽 링 */
--brand-deep: #1B2A1A; /* 로고 도넛 */
/* ── 2. 네이비 램프 (Primary) ────────────────────────────────────── */
--navy-50: #EFF0F9;
--navy-100: #DCDEF2;
--navy-200: #B9BDE5; /* on navy-950 = 9.69:1 */
--navy-300: #8F95D3;
--navy-400: #6169BF;
--navy-500: #3F45A8; /* on white = 7.99:1 */
--navy-600: #2E3192; /* on white = 10.66:1 */
--navy-700: #262878; /* on white = 12.67:1 ← Primary */
--navy-800: #1C1E5A; /* on white = 15.19:1 */
--navy-900: #12143C; /* on white = 17.63:1 */
--navy-950: #0F172F; /* white on this = 17.74:1 */
/* ── 3. 그린 램프 (Secondary / 행동) ─────────────────────────────── */
--green-50: #EEF7EC;
--green-100: #D7EDD2;
--green-200: #AEDCA6;
--green-300: #82C878;
--green-400: #57B34C;
--green-500: #3FA829; /* 로고 전용. 텍스트·버튼 금지 (on white 3.07:1) */
--green-600: #1E7A2E; /* 양방향 5.41:1 ← CTA */
--green-700: #186524; /* 양방향 7.18:1 ← hover */
--green-800: #135019; /* 9.59:1 ← active */
--green-900: #0D3411;
/* ── 4. 라임 (Accent — 장식 전용, 흰 바탕 텍스트 금지) ───────────── */
--lime-100: #F2F5D6;
--lime-200: #E8EDB0;
--lime-400: #C8D63C; /* on white 1.60:1 / on navy-950 11.10:1 */
--lime-700: #5F6A0F; /* on white 5.91:1 — 흰 바탕 텍스트가 필요할 때만 */
/* ── 5. 중성 (미세하게 따뜻한 회색) ──────────────────────────────── */
--white: #FFFFFF;
--cream-50: #F7F5EF;
--cream-100: #F2EFE6;
--gray-100: #EDEBE6;
--gray-200: #E2E0DA;
--gray-300: #D6D3CB;
--gray-500: #8A8F98; /* 3.25:1 — 비텍스트 전용 */
--gray-600: #5C6472; /* 5.96:1 — 캡션 하한 */
--gray-700: #4E5665; /* 7.39:1 — 보조 텍스트 (AAA) */
--gray-800: #252B36; /* 14.21:1 — 본문 */
--gray-900: #161A22; /* 17.43:1 — 최강조 */
/* ── 6. 상태색 ───────────────────────────────────────────────────── */
--danger-600: #B3261E; /* 6.54:1 — 폼 오류 전용 */
--danger-50: #FDECEA;
/* ── 7. 의미 토큰 (컴포넌트는 이 아래만 참조할 것) ──────────────── */
--color-surface: var(--white);
--color-surface-alt: var(--cream-50);
--color-surface-card: var(--white);
--color-surface-sunken: var(--navy-50);
--color-surface-navy: var(--navy-950);
--color-text: var(--gray-800); /* 14.21:1 */
--color-text-strong: var(--gray-900); /* 17.43:1 */
--color-text-muted: var(--gray-700); /* 7.39:1 */
--color-text-caption: var(--gray-600); /* 5.96:1 */
--color-text-on-navy: var(--white); /* 17.74:1 */
--color-text-on-navy-sub: var(--navy-200); /* 9.69:1 */
--color-primary: var(--navy-700);
--color-primary-hover: var(--navy-800);
--color-link: var(--navy-600);
--color-link-visited: var(--navy-500);
--color-accent: var(--green-600); /* CTA */
--color-accent-hover: var(--green-700);
--color-accent-active: var(--green-800);
--color-on-accent: var(--white);
--color-highlight: var(--lime-400); /* 밑줄·pill 배경 */
--color-on-highlight: var(--navy-900); /* 11.03:1 */
--color-border: var(--gray-200);
--color-border-strong: var(--gray-300);
--color-divider: var(--gray-100);
--color-focus: var(--navy-900); /* 17.63:1 */
--color-focus-on-dark: var(--lime-400);
/* 히어로·OG 스크림 (사진 위 흰 글씨 확보) */
--scrim-hero: linear-gradient(180deg,
rgba(15,23,47,0) 0%,
rgba(15,23,47,.35) 45%,
rgba(15,23,47,.78) 100%);
--scrim-flat: rgba(15,23,47,.62);
/* ── 8. 타이포그래피 ─────────────────────────────────────────────── */
--font-sans: 'Pretendard', -apple-system, BlinkMacSystemFont,
'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
--fw-regular: 400;
--fw-bold: 700; /* 300 이하 사용 금지 */
--fs-caption: 0.9375rem; /* 15px — 하한 */
--fs-ui: 1rem; /* 16px — 입력 필드 하한(iOS 자동확대 방지) */
--fs-base: 1.125rem; /* 18px — 본문 */
--fs-lg: 1.375rem; /* 22px */
--fs-xl: 1.625rem; /* 26px — h3 */
--fs-2xl: 1.9375rem; /* 31px — h2 */
--fs-3xl: 2.3125rem; /* 37px — h1 */
--fs-display: clamp(2rem, 6.5vw, 2.8125rem); /* 32→45px — 히어로 */
/* 숫자 전용 스케일 — 이 사이트는 숫자가 주인공입니다 (11-2항) */
--fs-stat: clamp(2.5rem, 9vw, 4rem); /* 40→64px — 통계 값 */
--fs-stat-sm: clamp(1.75rem, 6vw, 2.375rem);/* 28→38px — 본문 중 인라인 통계 */
--fs-stat-unit: 0.5em; /* 값 대비 절반 (년/명/회/개) */
--fs-stat-label: var(--fs-ui); /* 16px — 항목명 */
--fs-stat-asof: 0.8125rem; /* 13px — 기준일 캡션 */
--ls-stat: -0.02em; /* 큰 숫자는 자간이 벌어져 보임 */
--lh-display: 1.25;
--lh-heading: 1.35;
--lh-body: 1.7;
--lh-loose: 1.75;
--ls-heading: -0.01em;
--ls-body: 0;
/* ── 9. 간격 (4px 기반) ──────────────────────────────────────────── */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
--section-y: 56px; /* 섹션 상하 패딩 — 모바일 */
--gutter: 20px; /* 좌우 여백 — 모바일 (24px 이상 금지) */
--container: 1120px; /* 최대 폭 */
--measure: 36rem; /* 576px ≈ 한글 32자 — 본문 단 폭 */
/* ── 10. 라운드 ──────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px; /* 이미지 */
--radius-md: 10px; /* 카드·버튼 — 기본값 */
--radius-lg: 14px; /* 모달 */
--radius-pill: 999px; /* 라벨·뱃지 한정. 버튼 금지 */
/* 사선 모티프 (책자 대각선 밴드 계승 — 최대 2곳, 11-5항) */
--diagonal-h: clamp(28px, 5vw, 72px); /* 높이를 vw에 연동 → 각도가 2.1~4.3° 안에서만 변동 */
/* ── 11. 그림자 (기본 사용 금지 — 지정 요소만) ───────────────────── */
--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(15,23,47,.06);
--shadow-md: 0 6px 20px rgba(15,23,47,.10); /* 모달 */
--shadow-bar: 0 -2px 12px rgba(15,23,47,.12); /* 하단 고정 CTA바 */
/* ── 12. 터치·모션·레이어 ────────────────────────────────────────── */
--tap-min: 48px;
--tap-gap: 8px;
--dur-fast: 120ms;
--dur: 180ms;
--ease: cubic-bezier(.2, 0, .2, 1);
--z-header: 100;
--z-bottombar: 200;
--z-modal: 300;
/* ── 13. 재설계 v2 (2026-08-14) ────────────────────────────────────
핵심 장치는 「스코어카드 괘선」. 골프 스코어카드의 조판 문법
(괘선 격자 · 라벨이 값 위 · 홀 번호 · 자릿수 정렬)을 사이트 뼈대로 쓴다.
사진 없이 성립하고, 대충 만든 스코어카드는 존재하지 않는다. */
--navy-975: #0A1224; /* white on this = 18.9:1 — 히어로·푸터 */
--paper: #FBFAF6; /* cream-50 보다 밝은 지면 */
--rule: rgba(38, 40, 120, .14); /* 밝은 면 괘선 */
--rule-strong: rgba(38, 40, 120, .28);
--rule-lime: rgba(200, 214, 60, .30); /* 짙은 면 괘선 */
--rule-on-navy: rgba(255, 255, 255, .12);
/* 400/700 두 단계뿐이라 강약이 흑백 스위치였다 */
--fw-medium: 500;
--fw-heavy: 800;
/* 균일 32px 리듬을 3단계로 */
--stack-tight: 12px;
--stack: 24px;
--stack-loose: 48px;
--gap-card: 20px;
--section-y: 72px;
}
@media (min-width: 768px) {
:root {
--section-y: 128px;
--gutter: 32px;
--gap-card: 28px;
}
}
/* 데스크톱: 여백만 키우고 글자 크기는 유지 */
@media (min-width: 768px) {
:root { --section-y: 96px; --gutter: 32px; }
}
/* 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce) {
:root { --dur-fast: 0ms; --dur: 0ms; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
기본 적용 (토큰이 실제로 지켜지게 하는 최소 베이스)
========================================================================== */
/* ── 0. 리셋 ─────────────────────────────────────────────────────────
이게 없어서 달력 ‹ › 오늘 / 목록·달력 토글 / 더보기 버튼이
Pretendard 가 아니라 브라우저 기본 UI 폰트로 렌더되고 있었다.
달력 요일 헤더가 어긋난 것도 .cal__dow(div)와 .cal__cell(button)의
폰트·기본 padding 이 달라서 생긴 일이다. */
*, *::before, *::after { box-sizing: border-box; }
/* hidden 속성이 붙은 요소는 무조건 감춘다 (외부 점검 2026-08-20, 🔴4).
UA 기본값 `[hidden]{display:none}` 은 우선순위가 가장 낮아서, 컴포넌트에 display 를
한 줄만 적어 두면 조용히 진다. 그래서 이
1056×20px 짜리 빈 네이비 띠로 렌더돼 홈 첫 화면 통계 밴드 밑에 각진 상자가 붙어 있었다
(오너가 2026-08-20 에 지적한 「위는 둥근데 아래는 각졌다」와 같은 도형).
.quotes-more__list[hidden] 도 같은 상태였다(높이 0 이라 눈에 안 띄었을 뿐).
⚠️ 이 한 줄이 있으면 앞으로 같은 실수가 생기지 않는다. 지우지 말 것. */
[hidden] { display: none !important; }
button, input, select, textarea {
font: inherit;
color: inherit;
letter-spacing: inherit;
}
button { background: none; border: 0; }
img, svg, video { max-width: 100%; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
word-break: keep-all; /* 한국어 단어 중간 줄바꿈 방지 — 필수 */
overflow-wrap: anywhere; /* 긴 URL만 예외 */
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
color: var(--color-primary);
font-weight: var(--fw-bold);
line-height: var(--lh-heading);
letter-spacing: var(--ls-heading);
margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-display); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
a {
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 3px; /* 밑줄 제거 금지 */
}
a:visited { color: var(--color-link-visited); }
/* 포커스 — 키보드·고령 사용자 모두에게 필요 */
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* 짙은 면 위에서는 라임 링을 쓴다 (외부 점검 2026-08-20, 🔴3).
이전에는 `.on-dark :focus-visible` 하나로만 걸려 있었는데 .on-dark 가 사이트 전체에서
index.html 명언 카드 한 곳에만 붙어 있어, 헤더·탭바·푸터·문의 카드의 포커스 링이
navy-900 on navy-975 = 1.06:1 로 사실상 보이지 않았다. 라임은 같은 면에서 11.68:1.
토큰(--color-focus-on-dark)은 이미 있었고 연결 고리만 빠져 있었다.
⚠️ 짙은 배경 블록을 새로 만들면 이 목록에도 추가할 것. */
.on-dark :focus-visible,
.header :focus-visible,
.tabbar :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.pagehead :focus-visible,
.join :focus-visible,
.trophy :focus-visible,
.origin :focus-visible,
.monthly :focus-visible,
.contactcard :focus-visible,
.today :focus-visible,
.stats :focus-visible,
.btn-primary:focus-visible { outline-color: var(--color-focus-on-dark); }
/* 레이아웃 */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--color-surface-alt); }
/* 섹션 제목 + 라임 밑줄 = 이 사이트의 유일한 장식 */
.section-title { position: relative; padding-bottom: var(--space-3); }
.section-title::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 32px; height: 3px; background: var(--color-highlight);
}
/* 버튼 */
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 52px; padding-inline: var(--space-6);
font-size: 1.1875rem; /* 19px — AAA 큰글씨 기준 충족 */
font-weight: var(--fw-bold);
border-radius: var(--radius-md);
border: 2px solid transparent;
text-decoration: none; cursor: pointer;
transition: background-color var(--dur) var(--ease);
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); } /* 5.41:1 */
.btn-primary:hover { background: var(--color-accent-hover); } /* 7.18:1 */
.btn-primary:active { background: var(--color-accent-active); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-primary);
border-color: var(--color-primary); /* 12.67:1 */
}
/* 카드 — 그림자 없이 테두리로 구획 */
.card {
background: var(--color-surface-card);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-none);
}
/* 라벨 pill (책자 연분홍 pill 대체) */
.pill {
display: inline-block;
background: var(--color-highlight);
color: var(--color-on-highlight); /* 11.03:1 */
font-size: var(--fs-caption); font-weight: var(--fw-bold);
padding: 4px 12px; border-radius: var(--radius-pill);
}
/* 표 (책자 코발트 헤더 대체) */
table { width: 100%; border-collapse: collapse; }
thead th {
background: var(--color-surface-sunken);
color: var(--color-primary); /* 11.17:1 */
font-weight: var(--fw-bold); text-align: left;
}
th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
/* 사진 — 필터 금지, 비율 통일 */
/* height: auto 가 반드시 있어야 한다.
![]()
의 width/height 속성은 CSS width/height 로 매핑되는데, 여기서 width 는 100% 가 덮지만
height 는 덮는 것이 없어 속성값(예: 600px)이 그대로 살아남는다. 그러면 aspect-ratio 가
무시되고 사진마다 높이가 제각각이 되어 격자에 큰 빈 칸이 생긴다. */
.photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }
/* 히어로 스크림 */
.hero { position: relative; }
.hero::after { content: ""; position: absolute; inset: 0; background: var(--scrim-hero); }
.hero__body { position: relative; z-index: 1; color: var(--color-text-on-navy); }
.hero__title { color: var(--color-text-on-navy); font-size: var(--fs-display); line-height: var(--lh-display); }
.hero__meta { color: var(--color-highlight); font-weight: var(--fw-bold); } /* 11.10:1 */
/* 푸터 */
.footer { background: var(--color-surface-navy); color: var(--color-text-on-navy); padding-block: var(--space-16); }
.footer a, .footer .muted { color: var(--color-text-on-navy-sub); } /* 9.69:1 */
/* 하단 고정 CTA바 */
.bottombar {
/* left/right 병기 — inset-inline 만 두면 폭이 콘텐츠 크기로 잡히는 브라우저가 있다 */
position: fixed; left: 0; right: 0; inset-inline: 0; bottom: 0;
width: 100%; z-index: var(--z-bottombar);
min-height: 60px; display: flex; align-items: center; gap: var(--tap-gap);
padding: var(--space-2) var(--gutter);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: var(--shadow-bar);
padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}
/* ── 통계 블록 — 이 사이트의 주인공 (11-2항) ───────────────────────── */
.stats {
/* minmax(0, 1fr) 이어야 한다. 그냥 1fr 이면 칸의 최소 폭이 '내용 크기'가 되어
큰 숫자(2,690회)가 칸을 밀어내고 그리드 전체가 화면 밖으로 넘친다. */
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 모바일 2×2 */
gap: 1px; background: var(--color-border); /* 1px 격자선 */
border: 1px solid var(--color-border); border-radius: var(--radius-md);
overflow: hidden;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { background: var(--color-surface); padding: var(--space-6) var(--space-4); text-align: center; }
.stat__value {
display: block;
font-size: var(--fs-stat);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: var(--ls-stat);
color: var(--color-primary); /* 12.67:1 */
font-variant-numeric: tabular-nums; /* 자릿수 흔들림 방지 */
}
.stat__unit { font-size: var(--fs-stat-unit); margin-left: .1em; color: var(--color-text-muted); } /* 7.39:1 */
.stat__label { display: block; margin-top: var(--space-2); font-size: var(--fs-stat-label); color: var(--color-text-muted); }
.stat__asof { display: block; margin-top: var(--space-4); font-size: var(--fs-stat-asof); color: var(--color-text-caption); text-align: center; }
/* 네이비 면 위에 놓을 때 */
.stats--on-navy .stat { background: var(--color-surface-navy); }
.stats--on-navy .stat__value { color: var(--color-text-on-navy); } /* 17.74:1 */
.stats--on-navy .stat__unit { color: var(--color-highlight); } /* 11.10:1 */
.stats--on-navy .stat__label { color: var(--color-text-on-navy-sub); } /* 9.69:1 */
/* ── 슬로건 — 책자의 초록·빨강 2색 강조를 대체 (11-3항) ────────────── */
.slogan { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--color-text); }
.slogan__brand { color: var(--color-accent); } /* 「골만사」 그린 5.41:1 — 로고 계승 */
.slogan__region { /* 「울산지역」 빨강 대체 */
color: var(--color-primary); /* 12.67:1 */
box-shadow: inset 0 -0.32em 0 var(--color-highlight); /* 라임 밑선 — 배경 아닌 밑선이라 글자를 가리지 않음 */
}
/* ── 사선 마감 모티프 — 최대 2곳 (11-5항) ─────────────────────────── */
/* ① 히어로 하단을 사선으로 마감. 책자와 같은 우상향(좌하단이 낮음) 방향 */
.hero--diagonal {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal-h)), 0 100%);
padding-bottom: calc(var(--section-y) + var(--diagonal-h)); /* 사선에 텍스트가 물리지 않게 */
}
/* 사선 위에는 어떤 텍스트도 얹지 않습니다 — 좌우 여백 계산이 깨집니다 */
.diagonal-stripes { /* 통계 블록 배경 스트라이프 1회 */
background-image: repeating-linear-gradient(
-45deg,
rgba(38, 40, 120, .04) 0 2px,
transparent 2px 14px);
}
/* ── 연혁 타임라인 — 13색을 단일 네이비로 (11-6항) ────────────────── */
.timeline { position: relative; padding-left: var(--space-6); border-left: 2px solid var(--color-border-strong); }
.timeline__item { position: relative; padding-bottom: var(--space-8); }
.timeline__item::before { /* 기본 마커 */
content: ""; position: absolute; left: calc(var(--space-6) * -1 - 5px); top: .55em;
width: 8px; height: 8px; border-radius: 50%;
background: var(--color-border-strong);
}
.timeline__item--milestone::before { /* 마일스톤만 라임 — 3~4개로 제한 */
background: var(--color-highlight);
width: 12px; height: 12px;
left: calc(var(--space-6) * -1 - 7px);
outline: 3px solid var(--color-surface);
}
.timeline__year { /* 위계는 색이 아니라 크기로 */
font-size: var(--fs-lg); font-weight: var(--fw-bold);
color: var(--color-primary); font-variant-numeric: tabular-nums;
}
/* ── 인쇄 대응 — 협찬 검토자가 뽑거나 PDF로 돌립니다 (11-7항) ─────── */
@media print {
.bottombar, .nav, .btn, .hero::after { display: none !important; }
body { color: #000; background: #fff; font-size: 11pt; }
h1, h2, h3, .stat__value, .timeline__year { color: #000; }
.card, .stats { border-color: #666; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
.section { padding-block: 12pt; }
}
/* 터치 타깃 하한 */
a.btn, button, .nav a, .bottombar a { min-height: var(--tap-min); }