/* === 먹어도댕 공통 디자인 자산(index.html에서 추출·시각 일관) === */
@font-face{
font-family:'BM JUA OV';
/* [글씨체 회귀 원복 2026-06-16 프론트 검토·기획 직접 지적·web.dev "Avoid layout shifts from web fonts"]
직전 작업이 CLS를 잡으려 font-display:optional로 바꿨더니, 캐시 없는 첫 방문에서 주아체가 ~100ms 안에 미준비면
폴백 고딕(얇은 글씨)이 페이지 수명 내내 고정되어 헤드라인·판정 라벨·브랜드가 전부 얇아지는 회귀 발생.
→ font-display:swap로 원복(주아체 통통 글씨를 캐시 없는 첫 방문에서도 반드시 표시). "글씨 정상 표시"가 "CLS 0"보다 우선.
swap의 폴백↔주아체 교체 시 점프(CLS)는 아래 'BM JUA Fallback' size-adjust 폴백 + 헤드라인 min-height 예약으로 흡수(둘 다 양립). */
font-weight:normal;font-style:normal;font-display:swap;
src:url('https://cdn.jsdelivr.net/gh/fonts-archive/BMJUA/BMJUA.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/BMJUA/BMJUA.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/fonts-archive/BMJUA/BMJUA.ttf') format('truetype');
ascent-override:80%;descent-override:20%;line-gap-override:0%;
}
@font-face{
font-family:'BM JUA Fallback';
src:local('Apple SD Gothic Neo'),local('Pretendard'),local('Noto Sans CJK KR'),local('Noto Sans KR'),local('Arial');
font-weight:normal;font-style:normal;
size-adjust:93%;ascent-override:80%;descent-override:20%;line-gap-override:0%;
}
:root{
--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
/* ── 데스틸/바우하우스 키치 5색 팔레트 (이 외 색 절대 금지) ──
기획 첨부 5색: 빨강 · 파랑 #2A56A4 · 노랑 #F4C81D · 초록 #2E9E4F · 흰.
키치 = 흰 바탕(60%) 위에 빨·노·초·파 원색을 "다양하게" 면적 배분(단색 X·몬드리안식 원색 블록 균형).
박스(검은보더·하드섀도) 제거 → 색 자체로 강조.
[색 비중·레퍼런스 근거] 빨강(메인·brand) > 노랑(액센트 적극) > 초록(안전 신호) > 파랑(최저·응급만).
펫/원색 팝 브랜드는 따뜻한 메인색 1개 지배 + 보조 다색 액센트가 정석 → 빨강 지배·파랑은 거의 안 보이게 최소.
[색=역할 매핑·데스틸] 빨강(brand·코랄)=로고·검색·CTA(메인) / 노랑=인기칩·롤링키워드(키치 액센트)
/ 위험빨강=위험 신호 + 위험섹션 막대 / 초록=안전 신호 + 안전섹션 막대 / 파랑=응급안내 전용(최저).
→ 빨강 메인이되 단색 금지: 노랑·초록을 키치하게 곁들여 다색 팝. 파랑은 응급 진입 시에만 잠깐.
[위험색 구분] brand=코랄/따뜻한 빨강 #CC4033(주황기·흰텍스트 4.83 AA) / 위험신호=순수 경고 빨강 #DD3327(4.59 AA). 채도·색조 분리.
노랑면 위 텍스트는 잉크(검정·노랑 위 흰글자 가독 불가·WCAG).
[신호색 의미 유지] 위험=빨강 #DD3327 / 주의=노랑 #F4C81D / 안전=초록 #2E9E4F.
[중성] 잉크 #1A1A2E(텍스트) · 회색 톤(텍스트·보더 최소). 60-30-10(흰 다수·원색 액센트 다색). */
/* [키치 색감 재설계 2026-06-14 디자인 검토+프론트 검토·레퍼런스 근거]
[근거] Bauhaus/De Stijl·펫 팝브랜드·2025 컬러트렌드: "키치=색감"은 흰 92%가 아니라 60-30-10을
"배경 면적"에 적용 → 60% 따뜻한 중성 바탕 + 30% 보조색 wash 색면(섹션/카드/히어로) + 10% 고채도 액센트.
washed/tinted 배경(저채도 틴트)에 잉크 텍스트 = AA 4.5:1 유지하며 색면적↑(LoungeLizard·HueAtlas).
[핵심] --bg(60% 바탕)를 순백 대신 따뜻한 크림 틴트로 → 흰 면적 즉시↓, 카드(흰 paper)는 더 도드라짐. */
/* [접근성 AA 2026-06-15 프론트 검토] --faint(보조 캡션 텍스트)는 크림 바탕(#FFF7EE)에서 #9A9AAE=대비 2.60(WCAG 1.4.3 4.5:1 미달)이었음.
rnote(실검 부제)·acr .ak(자동완성 부연)·recent lbl·hb-label·disclaimer 등 다수 캡션이 이 토큰을 씀 → #6B6B80(크림 4.90·흰 5.86)로 진하게.
동일 muted gray-purple 색조 유지(키치 톤 보존). placeholder·dot border·아이콘 등 비텍스트 사용처도 약간 진해질 뿐 시각 톤 유지. */
--bg:#FFF7EE;--paper:#FFFFFF;--ink:#1A1A2E;--ink2:#3A3A52;--sub:#6A6A82;--faint:#6B6B80;
/* [QA v3 2026-09-09 · WCAG AA] --muted 는 :root 미정의로 var(--muted,#888) 폴백 #888(흰 3.54·크림 3.12)이 AA 4.5:1 미달이었음.
fp-foot·tr-meta·se-r·case-card 출처 등 캡션 다수가 사용 → --faint 와 동일 색조 #6B6B80(흰 5.86·크림 4.90)로 정의해 AA 충족. 색조 톤 보존. */
--muted:#6B6B80;
--line:#E2E2EC;--line2:#F0F0F5;
/* ── 데스틸/바우하우스 키치 = 흰 바탕 위 빨강·노랑·초록·파랑 원색을 다양하게 면적 배분(단색 X).
기획 첨부 5색 고정: 빨강 · 파랑 #2A56A4 · 노랑 #F4C81D · 초록 #2E9E4F · 흰. 그 외 색 0.
[브랜드 = 빨강·메인] 로고·검색 포커스·CTA·인터랙티브 = 코랄 빨강(#CC4033·흰텍스트 4.83 AA)으로 통일 →
빨강 지배. 단 brand 코랄 빨강은 위험 신호 순수 빨강(#DD3327)과 색조 분리(헷갈림 방지).
[신호색 의미 유지] 결과 판정 위험=빨강 / 주의=노랑 / 안전=초록 그대로. [파랑 최저] 응급 안내 전용. */
/* 브랜드 포인트 = 빨강(코랄·따뜻한 빨강). 로고·검색 포커스·CTA·중립 강조. 메인색.
[위험색과 톤 분리] brand=코랄/따뜻한 빨강(#CC4033·주황기). 위험신호=순수 경고 빨강(#DD3327).
채도·색조를 분리해 brand 포인트와 결과 위험 신호가 헷갈리지 않게 함. 흰 텍스트 AA(4.83) 실측. */
/* [세련된 키치 재조정 2026-06-14 디자인 검토+프론트 검토·기획 "세련된 키치"] 직전 "더 쨍하게"로 wash 색면을 큰 면에 쨍하게 깔았더니
tacky(어설픔·눈아픔)로 판정됨. 처방3(60-30-10): 쨍한 색은 "큰 면(wash)"이 아니라 "작은 점/아이콘/신호dot/CTA"에만.
→ wash 색면은 채도를 낮춰 "부드러운 틴트"로(세련). 신호 dot·brand/danger CTA(흰텍스트)는 고채도 유지(위험 진지함·1초 인지).
deep 텍스트는 부드러워진 wash 위에서 AA 4.5:1 실측 유지. brand/safe/warn/danger 원색(--brand/--safe 등)은 액센트용으로 채도 유지. */
/* [2026-09-06 디자인 멀티브랜드] 먹어도댕 개성색 = 신뢰 그린(#1F7A43).
근거: 급한 견주에게 필요한 정서=안심·신뢰·즉답. 초록=안전·건강·승인 보편 신호이며
판정 안전색(초록)과 개성색이 자연 통합. 헤더 워드마크만 코랄(#D8482F·먹댕 우산 형제 앵커).
판정 신호색(danger 빨강·warn 노랑·safe 초록)은 불변(생명 신호 불가침). */
/* [2026-09-09 Warm-Trust v1 · 기획 승인 "시안 100% 구현·대표색 코랄 전역"] --brand=코랄.
출처: ~/meogeodaeng-web/_index_warmtrust_v1.html(승인 시안 :root 토큰 그대로) / 조회일: 2026-09-09.
판정 신호색(safe/warn/danger)은 불변(생명 신호 불가침). */
--brand:#E86A4E;--brand-deep:#C24A30;--brand-wash:#FFF1EC;--brand-line:#F6CDBF;
--header-coral:#E86A4E;--header-coral-wash:#FFF1EC;
/* [순위 메달 전용 색 2026-06-15 프론트 검토·기획 "딱 좋다" 형태 복원] 1위=금·2위=은·3위=동. 순위 배지에만 사용(판정 신호색 safe/warn/danger와 완전 분리). 작은 24px 배지에만 적용(60-30-10 위배 0). 각 메달색 위 텍스트는 어두운 잉크(대비 충분). */
--medal-gold:#FFC93C;--medal-gold-ink:#4A3308;
--medal-silver:#DBE0E8;--medal-silver-ink:#2E333B;
--medal-bronze:#E2965A;--medal-bronze-ink:#3E2410;
/* 히어로 색면 전용: [2026-09-09 Warm-Trust v1] 코랄 워시(따뜻한 신뢰 톤·잉크 텍스트 AA 충분). */
--hero-wash:#FFF1EC;
/* 노랑 액센트(인기칩·키워드). 노랑 글자는 흰 위 가독불가 → 노랑 배경칩+잉크 글자만. 칩은 부드러운 머스타드 틴트. */
--point-mustard:#F4C81D;--point-mustard-wash:#FBEDB8;
/* [종이토큰 정리 2026-06-14] --lime*·--kitsch-*·--point-pink*·--retro-green*·--hair(var 사용 0)는
의미 토큰(--brand/--safe/--warn/--danger 패밀리)과 중복이라 제거. 정의=사용 일치(살아있는 토큰만). */
/* 헤드라인 폰트 토큰: 헤드라인·브랜드·판정 라벨에만. 본문은 Pretendard */
/* [글씨체 회귀 원복+CLS 양립 2026-06-16 프론트 검토] 'BM JUA OV'(swap·통통 주아체) 1순위 → 로드 즉시 주아체 표시.
폴백 자리에 'BM JUA Fallback'(size-adjust로 주아체 메트릭에 일치시킨 고딕)을 먼저 둬, 주아체 로드 전 잠깐 뜨는 동안에도
줄수·높이가 주아체와 같아 swap 교체 점프(CLS)를 흡수. 그 뒤 일반 폴백은 최후 안전망. */
--kitsch-font:'BM JUA OV','BM JUA Fallback','Apple SD Gothic Neo','Pretendard',sans-serif;
/* [2026-09-07 기획 확정 타이포 수술] 히어로 헤드라인·제목·음식명·판정 라벨은 Pretendard 800(프리미엄 고딕). 장난체(--kitsch-font)는 형제 브랜드명 워드마크 텍스트에만. */
--sans:'Pretendard','Apple SD Gothic Neo',-apple-system,system-ui,'Segoe UI',Roboto,sans-serif;
/* 신호색(판정 전용) = 원색 팔레트에 통합. 안전=초록 / 주의=노랑 / 위험=빨강. */
/* [세련된 키치 wash 채도↓ 2026-06-14] 섹션/카드/결과 wash를 큰 면에 쨍하게 깔지 않고 부드러운 틴트로(눈아픔·tacky 탈출).
신호색 자체(--safe/--warn/--danger)는 dot·게이지 등 작은 액센트에서 고채도 유지. line(보더)은 틴트와 조화되게 살짝 부드럽게. */
--safe:#2E9E4F;--safe-wash:#DCF1E2;--safe-line:#A8DDBA;--safe-deep:#176030;
/* [caution 칙칙함 시정 2026-06-18 프론트 검토·기획 "노랑이 칙칙하다"] --warn-deep를 올리브/카키(#695305·hue47deg·R-G22·녹색기)에서
따뜻한 앰버/골든(#9E5800·hue33deg·R-G70·녹색기 제거·채도↑)으로. 흰 배경 위 caution 텍스트/아이콘(공유카드 판정·삼각·이유, 결과 게이지·closure·마스코트)의 칙칙한 카키 탈피.
AA 4.5:1 실측: 흰카드 5.45 / warn-wash 4.67 / 크림bg(#FFF7EE) 5.14 / hero-wash 4.68 = 전 배경 통과(가독 유지). --warn(#F4C81D 생생 노랑·dot/게이지)은 불변. */
--warn:#F4C81D;--warn-wash:#FBEDC2;--warn-line:#EAD78A;--warn-deep:#9E5800;
--danger:#DD3327;--danger-wash:#FBDCD7;--danger-line:#F2ABA3;--danger-deep:#8C1B16;
/* [응급 연결 제거] 응급/병원 블록(파랑 --trust)은 제거됨. 5색은 빨강(brand)·노랑·초록·파랑·흰 유지하되 파랑 토큰은 미사용 정리. */
/* weight 위계: 본문 400 / 중간 강조 600 / 제목 700 / 판정·로고만 800 (과다 weight = AI티 → 4단 고정) */
--fw:400;--fw-md:600;--fw-bd:700;--fw-x:800;
--maxw:480px;
/* 타입 스케일 - [기획 지시: 음식명=주인공] 음식명(t-fname)을 판정(t-verdict)과 대등하게(동일~근접 큰 크기).
음식명이 먼저 크게 인지되고 → 판정이 그 결론으로 따라오는 시각 위계. 캡션이 가장 작음. */
/* [H1 px→rem 전환 2026-06-16 프론트 검토·WCAG 1.4.4 Resize text] 본문·헤드라인 타입 토큰을 px→rem(16px=1rem 기준)으로.
html에 고정 font-size가 없어 rem은 브라우저 글꼴 크기 설정(확대 200% 등)을 그대로 반영 → 저시력 사용자 가독성 확보.
값은 기존 px과 1:1 동일(29/16=1.8125 등) → 기본 100% 렌더 픽셀 변화 0(회귀 없음), 확대 시에만 커짐. 1px hairline·아이콘 px·간격(--s*)은 px 유지(레이아웃 안정). */
--h1:1.8125rem;--t-verdict:1.625rem;--t-fname:1.6875rem;--t-h2:1.1875rem;--t-body:0.96875rem;--t-cap:0.75rem;
/* 고급 그림자: 헤어라인(테두리 보강)+근접 그림자(접지감)+확산 그림자(부유감) 3겹.
색을 잉크(26,26,46)로 깔아 흰 바탕 위에서 깔끔한 접지·부유감(원색 시스템에 맞춘 중성 그림자) */
--sh:0 .5px 0 0 rgba(26,26,46,.04),0 1px 2px rgba(26,26,46,.06),0 6px 18px rgba(26,26,46,.07);
--sh-lg:0 .5px 0 0 rgba(26,26,46,.05),0 4px 11px rgba(26,26,46,.09),0 18px 44px rgba(26,26,46,.14);
}
@media (prefers-color-scheme: dark){
:root{
/* 다크: 5색(빨강 brand·노·초·파·흰) 기조 유지하되 어두운 배경(잉크 계열). 원색은 어두운 바탕에서 살짝 밝혀 가독 유지.
빨강(brand) + 신호 빨/노/초 + 파랑(응급 최저) + 흰 + 잉크/회색 중성만 사용. 그 외 색 0. */
/* [접근성 AA 2026-06-15 프론트 검토] 다크에서 --faint #70708A는 #14141F 바탕 대비 3.80(4.5:1 미달) → #9090A8(5.86)로 밝혀 AA 충족. 동일 색조 유지. */
--bg:#14141F;--paper:#1E1E2E;--ink:#F2F2F7;--ink2:#C8C8D6;--sub:#9A9AAE;--faint:#9090A8;
/* [QA v3 2026-09-09 · WCAG AA 다크] --muted 폴백 #888(#14141F 대비 4.55·#1E1E2E 대비 3.86)이 카드(paper) 위 AA 미달 → --faint 와 동일 #9090A8(paper 5.02·bg 5.86)로. */
--muted:#9090A8;
--line:#34344A;--line2:#26263A;
/* 다크 brand = 빨강(코랄). CTA 색면에 흰텍스트(#C2493D 위 4.87 AA)·brand-deep는 어두운 바탕 텍스트(밝은 코랄 #F0998F·AA OK). 위험 빨강(#EF5A50)과 색조 분리. */
/* [세련된 키치 다크 wash 채도↓ 2026-06-14] 라이트와 동일 원칙: wash 색면은 어두운 바탕에 은은히(쨍하지 않게), 신호 dot·CTA만 고채도. */
/* [2026-09-09 Warm-Trust v1 다크] 코랄 유지. 출처: _index_warmtrust_v1.html 다크 블록(wash/line) + 본 파일 기존 다크 코랄 관행(--header-coral·brand-deep 밝힌 코랄 AA) / 조회일: 2026-09-09. */
--brand:#E86B54;--brand-deep:#F0998F;--brand-wash:#2A1F19;--brand-line:#4A382D;
--header-coral:#E86B54;--header-coral-wash:#3A1611;
/* [순위 메달 다크 2026-06-15] 어두운 바탕에서도 금·은·동 식별되게 살짝 밝힌 메탈릭 톤. 배지 위 텍스트는 어두운 잉크(메달색이 밝아 대비 충분). */
--medal-gold:#FFCF52;--medal-gold-ink:#4A3306;
--medal-silver:#E2E7EF;--medal-silver-ink:#2A2E35;
--medal-bronze:#EDA269;--medal-bronze-ink:#3A220E;
/* 다크 히어로 색면: [2026-09-06] 은은한 그린 틴트. */
--hero-wash:#2A1F19;
--point-mustard:#F7D34A;--point-mustard-wash:#332A0C;
--safe:#56C277;--safe-wash:#15291C;--safe-line:#34634380;--safe-deep:#7FD89A;
--warn:#F7D34A;--warn-wash:#2E260C;--warn-line:#6A5C2680;--warn-deep:#F3DA7A;
--danger:#EF5A50;--danger-wash:#34140F;--danger-line:#7A3530;--danger-deep:#F7948C;
}
}
@media (min-width:700px){ :root{--maxw:640px;--h1:2.25rem;--t-verdict:1.8125rem;--t-fname:1.9375rem;--t-h2:1.3125rem;--t-body:1rem;} }
@media (min-width:1040px){ :root{--maxw:680px;--h1:2.625rem;--t-verdict:2rem;--t-fname:2.125rem;} }
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.65;letter-spacing:-.01em;font-weight:var(--fw);display:flex;flex-direction:column;align-items:center;min-height:100vh;font-variant-numeric:tabular-nums;font-feature-settings:'ss01','cv01';text-rendering:optimizeLegibility;position:relative;word-break:keep-all;}
a[href^="http"],.url,code{overflow-wrap:anywhere;}
.topbar{position:sticky;top:0;z-index:50;width:100%;align-self:stretch;background:var(--bg);border-bottom:1px solid transparent;transition:box-shadow .2s,border-color .2s;}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--s4);height:77px;}
@media (min-width:700px){ .topbar-inner{padding:0 var(--s6);} }
.brand{display:flex;align-items:center;gap:var(--s2);cursor:pointer;background:none;border:none;font-family:inherit;padding:4px 6px;margin:-4px -6px;min-height:44px;border-radius:10px;text-decoration:none;flex-shrink:0;}
.brand:hover{opacity:.85;} .brand:focus{outline:none;} .brand:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.brand .logo{width:40px;height:31px;flex-shrink:0;margin-top:0;}
.brand .name{font-family:var(--kitsch-font);font-size:23px;font-weight:400;letter-spacing:-.02em;color:var(--ink);line-height:1;transform:rotate(-1.5deg);transform-origin:left center;}
.wrap{width:100%;max-width:var(--maxw);padding:var(--s4) var(--s4) var(--s16);transition:max-width .2s;}
/* 법적 페이지 본문 - 기존 토큰만 사용(크림 배경·잉크 텍스트·라운드·hairline). */
.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--s4) var(--s16);}
.lp-h1{font-family:'Pretendard','Apple SD Gothic Neo',-apple-system,system-ui,sans-serif;font-weight:800;font-size:calc(var(--h1) - 2px);letter-spacing:-.02em;color:var(--ink);line-height:1.25;margin:var(--s4) 0 var(--s2);}
.lp-lead{color:var(--sub);font-size:var(--t-body);line-height:1.7;margin-bottom:var(--s6);}
.lp-updated{display:inline-block;font-size:var(--t-cap);color:var(--faint);margin-bottom:var(--s6);}
.lp-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:var(--s5) var(--s5);margin-bottom:var(--s4);}
.lp-h2{font-size:var(--t-h2);font-weight:var(--fw-bd);color:var(--ink);margin-bottom:var(--s3);letter-spacing:-.01em;}
.lp-card p,.lp-card li{font-size:var(--t-body);color:var(--ink2);line-height:1.75;}
.lp-card p+p{margin-top:var(--s3);}
.lp-card ul{margin:var(--s2) 0 0;padding-left:1.15em;}
.lp-card li{margin-top:6px;}
.lp-card li::marker{color:var(--brand);}
.lp-card b{color:var(--ink);font-weight:var(--fw-md);}
.lp-note{font-size:var(--t-cap);color:var(--faint);line-height:1.65;margin-top:var(--s6);padding-top:var(--s4);border-top:1px dashed var(--line);}
.lp-back{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:var(--fw-bd);text-decoration:none;font-size:.95rem;padding:var(--s3) 0;}
.lp-back:hover{opacity:.85;}
/* 법적 페이지 푸터 링크(홈/상호 페이지 이동) */
.lp-foot{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);font-size:var(--t-cap);color:var(--sub);line-height:1.85;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;}
.lp-foot a{color:var(--sub);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);}
.lp-foot a:hover{color:var(--ink2);text-decoration-color:var(--sub);}
.lp-foot .sep{color:var(--line);}