/* AboutFishing Design System — Core Tokens * Source: Figma /METADATA.md, /page/style-guide, /external-shared/TypeBlackEnabledTrue2 etc. * Primary font: Pretendard. Base viewport: 393px (iPhone 14 Pro / Figma canvas width). */ /* Brand font — user-uploaded variable file. * One woff2-variations file serves the whole 45–920 weight range; * we alias it to both the Variable and static family names so any * existing font-family: "Pretendard" reference still resolves. */ /* 폰트 스왑 시 줄바꿈이 밀리지 않게(CLS 0) — 시스템 폰트를 Pretendard 메트릭에 맞춰 보정 */ @font-face { font-family: 'Pretendard fallback'; src: local('Apple SD Gothic Neo'), local('Malgun Gothic'), local('Noto Sans KR'), local('sans-serif'); ascent-override: 95.2%; descent-override: 24.1%; line-gap-override: 0.0%; size-adjust: 100%; } /* Pretendard — unicode-range 청크 분할. 2MB 단일 파일을 21개로 쪼개서, 브라우저가 화면에 실제로 쓰인 글자 범위만 내려받게 한다. (한글 완성형 전체를 한 파일로 받으면 첫 로드에 2MB를 통째로 끌어와 LCP·대역폭을 잡아먹음) */ @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-lat.woff2') format('woff2-variations');unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2015,U+2018-201D,U+2022,U+2026,U+00B7,U+20A9,U+3000-303F,U+1100-11FF,U+3130-318F,U+FF01-FF5E,U+2190-2193,U+2605,U+2606,U+2661,U+2665,U+2039,U+203A,U+00D7,U+2713,U+2714,U+25B6,U+25C0} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k00.woff2') format('woff2-variations');unicode-range:U+AC00-AE2E} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k01.woff2') format('woff2-variations');unicode-range:U+AE2F-B05D} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k02.woff2') format('woff2-variations');unicode-range:U+B05E-B28C} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k03.woff2') format('woff2-variations');unicode-range:U+B28D-B4BB} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k04.woff2') format('woff2-variations');unicode-range:U+B4BC-B6EA} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k05.woff2') format('woff2-variations');unicode-range:U+B6EB-B919} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k06.woff2') format('woff2-variations');unicode-range:U+B91A-BB48} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k07.woff2') format('woff2-variations');unicode-range:U+BB49-BD77} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k08.woff2') format('woff2-variations');unicode-range:U+BD78-BFA6} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k09.woff2') format('woff2-variations');unicode-range:U+BFA7-C1D5} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k10.woff2') format('woff2-variations');unicode-range:U+C1D6-C404} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k11.woff2') format('woff2-variations');unicode-range:U+C405-C633} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k12.woff2') format('woff2-variations');unicode-range:U+C634-C862} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k13.woff2') format('woff2-variations');unicode-range:U+C863-CA91} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k14.woff2') format('woff2-variations');unicode-range:U+CA92-CCC0} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k15.woff2') format('woff2-variations');unicode-range:U+CCC1-CEEF} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k16.woff2') format('woff2-variations');unicode-range:U+CEF0-D11E} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k17.woff2') format('woff2-variations');unicode-range:U+D11F-D34D} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k18.woff2') format('woff2-variations');unicode-range:U+D34E-D57C} @font-face{font-family:'Pretendard Variable';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k19.woff2') format('woff2-variations');unicode-range:U+D57D-D7A3} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-lat.woff2') format('woff2-variations');unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2015,U+2018-201D,U+2022,U+2026,U+00B7,U+20A9,U+3000-303F,U+1100-11FF,U+3130-318F,U+FF01-FF5E,U+2190-2193,U+2605,U+2606,U+2661,U+2665,U+2039,U+203A,U+00D7,U+2713,U+2714,U+25B6,U+25C0} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k00.woff2') format('woff2-variations');unicode-range:U+AC00-AE2E} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k01.woff2') format('woff2-variations');unicode-range:U+AE2F-B05D} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k02.woff2') format('woff2-variations');unicode-range:U+B05E-B28C} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k03.woff2') format('woff2-variations');unicode-range:U+B28D-B4BB} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k04.woff2') format('woff2-variations');unicode-range:U+B4BC-B6EA} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k05.woff2') format('woff2-variations');unicode-range:U+B6EB-B919} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k06.woff2') format('woff2-variations');unicode-range:U+B91A-BB48} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k07.woff2') format('woff2-variations');unicode-range:U+BB49-BD77} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k08.woff2') format('woff2-variations');unicode-range:U+BD78-BFA6} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k09.woff2') format('woff2-variations');unicode-range:U+BFA7-C1D5} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k10.woff2') format('woff2-variations');unicode-range:U+C1D6-C404} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k11.woff2') format('woff2-variations');unicode-range:U+C405-C633} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k12.woff2') format('woff2-variations');unicode-range:U+C634-C862} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k13.woff2') format('woff2-variations');unicode-range:U+C863-CA91} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k14.woff2') format('woff2-variations');unicode-range:U+CA92-CCC0} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k15.woff2') format('woff2-variations');unicode-range:U+CCC1-CEEF} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k16.woff2') format('woff2-variations');unicode-range:U+CEF0-D11E} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k17.woff2') format('woff2-variations');unicode-range:U+D11F-D34D} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k18.woff2') format('woff2-variations');unicode-range:U+D34E-D57C} @font-face{font-family:'Pretendard';font-style:normal;font-weight:45 920;font-display:swap;src:url('fonts/pd-k19.woff2') format('woff2-variations');unicode-range:U+D57D-D7A3} :root { /* ── Brand — primary CTA blue (from Figma: rgb(0,65,255) — 2551 uses) */ --af-blue: #32008C; --af-blue-press: #25006A; --af-blue-bg: #F9F7FF; /* badge bg for blue category tag */ --af-blue-bg-2: #F2F5FA; /* soft chat bubble */ /* ── Foreground / neutrals (from METADATA top colors) */ --fg-1: #191919; /* strongest text, primary labels (25,25,25) */ --fg-2: #363636; /* default body text (54,54,54) — dominant */ --fg-3: #767676; /* secondary text (118,118,118) */ --fg-4: #999999; /* tertiary / placeholder (153,153,153) */ --fg-5: #AAAAAA; /* muted (170,170,170) */ --fg-disabled: #CCCCCC; /* disabled labels (204,204,204) */ /* ── Background / surfaces */ --bg: #FFFFFF; --surface-1: #F8F8F8; /* card alt (248,248,248) */ --surface-2: #F3F3F3; /* image placeholder (243,243,243) */ --surface-3: #EEEEEE; /* divider/outline fill (238,238,238) */ --surface-cool: #F5F7FA; /* (245,247,250) */ --surface-cool-2: #F2F5FA; /* outgoing chat bubble */ /* ── Border */ --border-1: #EEEEEE; /* hairline (238,238,238) */ --border-2: #E0E0E0; /* control border (224,224,224) */ --border-3: #E1E8F1; /* cool border (225,232,241) */ /* ── Semantic */ --red: #EE0005; /* error / alert (238,0,5) */ --red-2: #FF0000; /* emphasis red */ --red-3: #FF3C3A; /* warning text */ --orange: #FF4C14; /* highlight orange / badge fill (255,76,20) */ --orange-soft: #FFA77B; /* decorative orange */ --yellow: #FFD91E; /* accent yellow */ --green: #245C45; /* dark teal from palette */ --green-lime: #B9E100; /* 실명인증 verify badge */ --purple: #6433DF; /* AI 인증가 tag bg */ /* ── Corner-ribbon palette (top-left 45° tag on cards) */ --ribbon-purple: #6433DF; /* 대회 / 챔피언십 */ --ribbon-yellow: #FFD91E; /* new / sale on 쇼핑 */ --ribbon-lime: #B9E100; /* 최저가 */ --ribbon-sky: #3B9CFF; /* 보유 on 중고장터 */ --ribbon-cyan: #0AD2FF; /* 실시간 on 예약 */ /* ── Money (어바웃피싱 머니) */ --money-coin: #FFC700; /* yellow M coin */ --money-num: #0041FF; /* money numerals always blue */ /* ── Illustration card tints (3D-character hero cards) */ --tint-blue: #EAF0FF; --tint-lavender:#F5EDFF; --tint-mint: #E8FBEE; --tint-peach: #FFF1E8; /* ── Radius (from Figma tokens) */ --radius-xs: 4px; /* small badges */ --radius-sm: 5px; /* style-guide frames */ --radius-md: 8px; /* inputs, small buttons */ --radius-lg: 12px; /* cards */ --radius-xl: 18px; /* chat bubbles, large cards */ --radius-2xl: 22px; /* modal popups */ --radius-pill: 1000px; /* pill buttons */ /* ── Spacing (mobile 393 column) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --gutter: 18px; /* default horizontal gutter on 393px canvas */ /* ── Elevation */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(25,25,25,0.12); --shadow-modal: 0 20px 60px rgba(0,0,0,0.35); /* ── Type */ --font-sans: "Pretendard Variable", "Pretendard", "Pretendard fallback", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Spoqa Han Sans Neo", sans-serif; --letter-tight: -0.4px; /* default Korean tracking in file */ } /* ── Semantic type scale * Mobile (393px) — derived from Figma frequency: * body 15px Medium (top usage), 14/13px secondary, 11.5px micro * heading 28px/22-23px ExtraBold for modal titles and section heads */ html, body { font-family: var(--font-sans); color: var(--fg-2); } .af-display-l { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: var(--letter-tight); color: var(--fg-2); } .af-display-m { font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: var(--letter-tight); color: var(--fg-2); } .af-display-s { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: var(--letter-tight); color: var(--fg-2); } .af-h1 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--fg-2); letter-spacing: var(--letter-tight); } .af-h2 { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--fg-2); letter-spacing: var(--letter-tight); } .af-h3 { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--fg-2); letter-spacing: var(--letter-tight); } .af-body-l { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--fg-2); } .af-body { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--fg-2); } /* dominant */ .af-body-sm { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--fg-3); } .af-caption { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--fg-3); } .af-micro { font-size: 11.5px; font-weight: 500; line-height: 15px; color: var(--fg-3); } .af-tag { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: var(--letter-tight); } .af-tag-xs { font-size: 10px; font-weight: 700; line-height: 11px; } a, button { font-family: inherit; }