/* ══ A 의 «따로 쓰는» 토큰 — 이름 앞에 ria- 를 붙인다 ══════════════ 🚨 2026-09-24 사고. 처음엔 --ri- 로 지었다가 «테마 tokens.css 의 79개와 4개가 겹쳤다». --ri-line 테마 #E3E3DF → 내 #dfe5ee (utmb.css 가 var() 를 1,389번 쓴다) --ri-danger 테마 #B91C1C → 내 #cf3f18 ⇒ 라이브에서 «선 색과 경고색이 온 지면에서 조용히 바뀌어» 있었다. 에러는 하나도 안 났다. 그래서 내 것은 전부 --ria- 로 옮겼다. 테마 변수를 덮는 것은 --ri-font «한 줄»뿐이다. ※ 팔레트의 «정본»은 테마 tokens.css 다(B 님 파일, 79개 · 2,835곳이 따라온다). 색을 바꿀 일이 생기면 여기가 아니라 거기서 바꾸는 것이 맞다 — B 님과 그렇게 맞췄다. */ :root{ /* 글꼴 — 숫자·기록은 Oxanium 을 그대로 씁니다(런닝인사이드 고유) */ --ria-ff:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; --ria-ff-num:'Oxanium',var(--ria-ff); /* 브랜드 */ --ria-navy:#000000; /* 제목 · 푸터 */ --ria-navy-2:#000000; --ria-blue:#0b3aa0; /* 링크 · 강조 */ --ria-blue-2:#000000; --ria-blue-soft:#f4f4f4; /* 접수중 딱지 바탕 */ /* 글자 — 순검정은 쓰지 않는다 */ --ria-ink:#000000; --ria-ink-2:#333333; --ria-ink-3:#333333; --ria-on-dark:#ffffff; --ria-on-dark-2:rgba(255,255,255,.74); /* 바탕 · 선 */ --ria-bg:#ffffff; --ria-bg-2:#f4f7fb; --ria-line:#111111; --ria-line-2:#eef2f7; /* 소량 강조 — 기록 · 「신규」 따위에만 */ --ria-gold:#000000; --ria-danger:#000000; --ria-ok:#000000; /* 모서리 — 번역 사이트처럼 «각지게». 알약은 알약대로 둔다 */ --ria-r:6px; --ria-r-pill:999px; /* 그림자 — «0 0 0 1px» 같은 가짜 테두리는 쓰지 않는다. 깊이로만 */ --ria-sh-1:0 10px 24px -12px rgba(11,42,110,.28); --ria-sh-2:0 26px 56px -28px rgba(11,42,110,.40); --ria-wrap:1200px; } /* ══ 글꼴 깔기 — «변수 하나»만 다시 정한다 ═══════════════════════════ 테마(B 님)가 이미 이렇게 짜 두었다 : tokens.css --ri-font : -apple-system, … , 'Pretendard Variable', … ← Pretendard 가 뒤에 있었다 tokens.css --ri-font-num : Oxanium, … ← 숫자·기록 서체 app.css body{font-family:var(--ri-font)} utmb.css 의 40곳이 var(--ri-font-num) ⇒ 그러니 --ri-font «한 줄»만 다시 정하면 온 지면이 Pretendard 로 바뀌고, 숫자 서체 40곳은 손도 안 댄 채 그대로 남는다. 🚨 처음엔 p·li·a·span·div 를 통째로 덮었다가 «숫자 서체가 27곳 → 1곳»으로 죽었다(실측). 남의 변수 짜임을 보기 전에 덮어쓰면 이렇게 된다. 변수를 먼저 찾을 것. */ :root{ --ri-font:var(--ria-ff); /* ← 테마 변수를 «일부러» 덮는 유일한 줄 */ } /* 테마 변수를 안 쓰는 몇 곳만 따로 — 입력칸은 브라우저 기본 글꼴로 떨어진다 */ button,input,select,textarea{font-family:var(--ria-ff)} /* ══ 가짜 테두리 걷기 ═══════════════════════════════════════════════ 실측 : box-shadow 로 «0 0 0 1px» 테두리를 그린 것이 28개 있었다. 테두리는 테두리로, 그림자는 깊이로 — 섞으면 선이 두 겹으로 보인다. */ #ri-main [style*="0 0 0 1px"], #ri-main .ri-a-tc,#ri-main .ri-m-card,#ri-main .ri-m-pc{box-shadow:none} #ri-main .ri-m-card:hover,#ri-main .ri-m-pc:hover,#ri-main .ri-a-tc:hover{box-shadow:var(--ria-sh-1)} /* ══ 글자 «바닥값» — 11.5px 을 없앤다 ══════════════════════════════ 실측(홈 · 1440px) : 12.5px 미만으로 그려진 칸이 322개였다. 11.5px 213 · 12px 101 · 11px 8 이룸·번역은 본문이 16px 한 종류다. 우리는 11.5px 이 213곳이었다 — 폰 야외에서 안 읽힌다. 🚨 여기서는 «내 것»만 올린다. 테마(.bk-item 따위)는 B 님 구역이라 손대지 않고 판에 적었다. 🚨 크기를 올리면 줄이 늘어날 수 있다. 줄간격(1.4)을 같이 준다 — 실측으로 문서 높이를 확인하고 넘어간다. ── 📌 2026-09-28 A · 값을 12.5px → 12px 로 «내렸다». 왜 그랬는지 남긴다 ── B 님이 「이 덮개를 걷어내면 밑에 깔린 내 11px 이 살아 규격이 된다」고 넘기셨다. 재 보니 맞는 말이었다 — 규칙을 끄면 225칸이 11px 로 돌아간다(B 님은 150곳으로 보셨다). 🔴 그런데 걷으면 «225칸이 12.5 → 11px 로 작아진다». 이 덮개를 씌운 까닭이 바로 위에 적혀 있다 — 11.5px 이 213곳이라 폰 야외에서 안 읽혀서였다. B 님이 A 사다리를 반대하신 이유(「7,860자를 작아지게 한다」)와 똑같은 일이 된다. ✅ 사장님 눈금에는 11 «과» 12 가 둘 다 있다 → 12px 로 간다. · 눈금 안으로 들어온다 (12.5 는 눈금 밖이었다) · 11px 로 내려가지 않는다 — 읽기가 나빠지지 않는다 · 12.5 → 12 는 0.5px 차이라 줄 수가 안 늘어난다 (실측 : 가로 샘 0 · 문서폭 1265/1280) 실측(홈 1280px) : 덮개 225칸 + 같이 쓰는 셋 63칸 = «288칸이 한 번에 12px». 🚨 다음 사람에게 — 아래 한 덩어리는 «셀렉터 아홉 개»가 중괄호를 같이 쓴다. .ri-a-tc .info 쪽만 떼어내려다 .ri-m-row__d em · .ri-m-pic__c · .ri-a-ld__chiptx small 까지 같이 날리기 쉽다. 값만 바꾸면 셋 다 안전하게 따라온다 — 그래서 셀렉터는 안 건드리고 값만 바꿨다. 🔵 되돌리려면 : design.php.bak-20260928-A.txt (이 수정 직전 원본). */ #ri-main li.ri-a-tc .info td.ev, #ri-main li.ri-a-tc .info .tag, #ri-main li.ri-a-tc .info .tag span, #ri-main li.ri-a-tc .info .tag em, #ri-main li.ri-a-tc .info .cr, #ri-main li.ri-a-tc .info .more, #ri-main .ri-m-row__d em, #ri-main .ri-m-pic__c, #ri-main .ri-a-ld__chiptx small{font-size:12px;line-height:1.4} /* 1.5 → 1.4 · v1.3 눈금 · 259곳 */ /* ══ 가로 스크롤 막기 — 인스타그램 임베드 ══════════════════════════ 2026-09-24 실측 : /crew/ 에서 가로로 «691px» 밀려 있었다. 범인은 iframe.instagram-media 두 개(각 1,200px). 인스타 임베드 스크립트가 인라인으로 폭을 박아 넣어 창보다 넓어진다. 내 장식층과는 무관하다 — 장식층을 걷어내고 재도 691px 그대로였다(대조군 확인). 🚨 인라인 스타일이라 !important 로만 이긴다. 대상이 «그 iframe 하나»뿐이라 좁게 쓴다. */ iframe.instagram-media, .sbi_item iframe,.sb_instagram_header iframe{max-width:100% !important;min-width:0 !important;width:100% !important} /* 🚨 그런데 그것만으로는 «2초짜리 가로 스크롤»이 남는다. 인스타 스크립트가 붙기 «전»에는 iframe 이 1,200px 로 깔려 칸이 옆으로 삐져나가고, 약 2초 뒤에 389px 로 줄면서 저절로 없어진다(실측 : 1.6초엔 1,200px · 2.0초엔 389px). 그 2초 동안 방문자는 가로로 밀리는 화면을 본다. 칸에서 잘라 그 2초도 없앤다. overflow-x:clip 은 «스크롤 막대를 만들지 않고» 넘치는 것만 자른다(hidden 과 달리 스크롤 상자가 안 된다). */ .runin-ig-grid{overflow-x:clip} .runin-ig-grid>*{min-width:0;max-width:100%} /* 칸에서만 자르면 «칸 자체»가 아직 1,200px 이던 순간이 남는다(실측 : 1.5초 시점). 그래서 그 구역에서 한 번 더 자른다. 두 겹으로 막아야 그 순간까지 없어진다. */ .ri-insta,section.ri-insta{overflow-x:clip} /* ══ 대회 줄에 «뜻을 가진» 아이콘 ══════════════════════════════════ 사장님 지적 : 「넘 아이콘이 없어」 (참고한 ahotu 는 162개 · 우리 홈은 21개였다) 대회 줄이 57개다. 줄마다 «날짜»와 «어디»를 아이콘으로 표시하면 114개가 는다. 🚨 뜻 없는 장식은 안 붙인다. 날짜 = 달력 · 국내 = 핀 · 해외 = 지구본. 국내/해외는 마크업의 data-scope(dom/int)로 이미 갈려 있어 CSS 만으로 가른다. 🚨 마스크가 «없는» 경우에는 ::before 를 만들지 않는다 — 만들면 13px 단색 네모가 찍힌다(2026-09-24 배지에서 24개 겪었다). */ #ri-main .ri-m-row__d::before, #ri-main .ri-m-row__s::before{content:"";display:inline-block;width:12px;height:12px; margin-right:4px;vertical-align:-1.5px;flex:0 0 12px; background-color:currentColor;opacity:.5; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; -webkit-mask-position:center;mask-position:center; -webkit-mask-size:contain;mask-size:contain} /* 날짜 — 달력 */ #ri-main .ri-m-row__d::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")} /* 국내 — 지도 핀 */ #ri-main li[data-scope="dom"] .ri-m-row__s::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")} /* 해외 — 지구본 */ #ri-main li[data-scope="int"] .ri-m-row__s::before{-webkit-mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.8 2.6 15.2 0 18-2.6-2.8-2.6-15.2 0-18z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.8 2.6 15.2 0 18-2.6-2.8-2.6-15.2 0-18z'/%3E%3C/svg%3E")} /* ══ 아이콘 — 번역 사이트 규칙 ══════════════════════════════════════ 「아이콘 배경 없애고, 그만큼 아이콘 크게」 · 동그란/네모 배경 배지를 걷되 «자리(가로·세로)는 그대로» 둔다 — 줄 맞춤이 흔들리지 않게 · 올리면 배경이 차는 대신 «아이콘만 짙어지고 살짝 떠오른다» */ #ri-main .ri-a-ld__chip>svg,#ri-main .ri-a-nav__b>svg,#ri-main .ri-m-stat>svg{ background:none;box-shadow:none;transition:transform .16s ease,color .16s ease} #ri-main a:hover>svg,#ri-main button:hover>svg{transform:translateY(-3px) scale(1.06)} @media (prefers-reduced-motion:reduce){ #ri-main a:hover>svg,#ri-main button:hover>svg{transform:none} }