/* 여기 있던 토큰 18개를 지웠다(2026-09-04). * * 전부 뒤에 실리는 `tokens.css`가 덮고 있어서 **한 줄도 화면에 닿지 않았다**. * 코드를 바꾸지는 않았지만 읽는 사람을 속였다 — 옛 액센트 #42a5ff와 옛 muted * #929ba3가 여기 적혀 있어서, 이 파일만 본 사람은 그 값이 산다고 믿었다. * 토큰의 진실은 언제나 `tokens.css`다. `color-scheme`만 남긴다. */ :root { /* Android 인앱 WebView 중 일부는 body 배경을 루트 캔버스로 전파하지 않고 앱의 기본 흰 면을 드러낸다. 토큰 시트가 오기 전부터 불투명한 바닥을 두고, 지원하는 엔진에는 자동 색상 변환을 금지한다. 첫 선언은 `only`를 모르는 옛 WebView의 폴백이다. */ color-scheme: dark; color-scheme: only dark; background-color: #070b12; } /* 다크 고정(2026-08-19): 라이트 팔레트 제거. 페이지 정체성은 다크 단일이다. */ * { box-sizing: border-box; } [hidden] { display: none !important; } /* scroll-padding-top은 스크롤포트에 두지 않는다 — 앵커뿐 아니라 **포커스** 이동에도 걸려서, sticky 검색칸을 누르면 화면이 위로 끌려간다(tokens.css의 `main [id]` 규칙과 그 주석 참고). 여백은 앵커 대상이 갖는다. */ html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(circle at 7% -5%, rgba(66,165,255,.08), transparent 24rem), radial-gradient(circle at 94% 4%, rgba(45,212,163,.055), transparent 26rem), var(--bg); color: var(--ink); font-family: var(--sans); /* `tokens.css:148`이 뒤에서 `--fs-md`(15)로 덮고 있었다. 본문 크기가 두 파일에 다른 값으로 적혀 있으면 다음 사람이 14를 믿고 em 계산을 한다. 살아 있는 값으로 맞춘다 — 렌더는 안 바뀐다. */ font-size: var(--fs-md); line-height: 1.55; -webkit-font-smoothing: antialiased; } button, select { font: inherit; } a { color: inherit; } button, a, select { -webkit-tap-highlight-color: transparent; } /* `summary`가 빠져 있었다 — 콘솔의 주요 인터랙션("이 가격은 어떻게 계산한 값인가요?")이 접힘이라 키보드 사용자에게는 브라우저 기본 링만 떴다. */ button:focus-visible, a:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); } .skip-link:focus { top: 12px; } .masthead { position: sticky; top: 0; z-index: 100; display: flex; align-items: center;} .brand { display: inline-flex; align-items: center; text-decoration: none;} .brand-mark { display: block; color: var(--ink);} .brand strong { display: block;} .brand small { margin-top: 1px; color: var(--faint); font: 9px/1.25 var(--num); font-variant-numeric: tabular-nums; letter-spacing: .09em;} .mast-nav { display: flex; gap: 5px; } /* --- 화면 전환 탭 ----------------------------------------------------------- 두 화면 사이를 오가는 길이 잘 보이지 않았다. 어느 화면에 있는지와 다른 화면으로 가는 길이 함께 보여야 한다. 두 페이지가 같은 모양을 쓴다. */ .view-switch { display: inline-flex;} .view-tab { text-decoration: none; white-space: nowrap; transition: background .15s, color .15s;} @media (max-width: 640px) { .view-tab { padding: var(--sp-1h) 11px; font-size: 12px; } } .nav-chip, .icon-button, .refresh-button { border: 1px solid var(--line); color: var(--muted); background: transparent; text-decoration: none; border-radius: var(--r-sm); transition: border-color .15s, color .15s, background .15s; } .nav-chip { padding: var(--sp-1h) 10px; font-size: 11px; font-weight: 700; } .nav-chip:hover, .nav-chip.active { color: var(--ink); background: var(--panel-2); border-color: var(--line-strong); } .nav-chip.active { box-shadow: inset 0 -2px var(--accent); } .mast-actions { margin-left: auto; display: flex; align-items: center;} .connection-badge { display: inline-flex; align-items: center; gap: 7px; margin-right: 5px; color: var(--muted); font: 10px/1 var(--num); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .06em; } .connection-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 12%, transparent); } .connection-badge.ok i { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 12%, transparent); } .connection-badge.stale i { background: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 12%, transparent); } .connection-badge.error i { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent); } .icon-button { min-width: 38px; padding: 0 9px; cursor: pointer; font: 700 11px/1 var(--num); font-variant-numeric: tabular-nums;} .icon-button:hover, .refresh-button:hover { color: var(--ink); border-color: var(--line-strong); background: var(--panel-2); } /* 청산 집계 — 거래소별 합계와, 답하지 않은 거래소를 함께 보여 준다. */ .cliq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; } .cliq-card { padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel-2); } .cliq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } /* 12px 내용을 이끄는 카드 제목이다 — `.kro-card h3`(15가 12를 이끈다)와 같은 단. */ .cliq-head a { color: inherit; font: 700 var(--fs-md)/1.2 var(--sans); text-decoration: none; } .cliq-head a:hover { color: var(--accent); } .cliq-head .oi { color: var(--muted); font: 650 10.5px/1.2 var(--num); font-variant-numeric: tabular-nums; } .cliq-total { margin: 11px 0 3px; font: 700 22px/1 var(--num); font-variant-numeric: tabular-nums; } .cliq-split { display: flex; height: 7px; margin: 9px 0 7px; border-radius: var(--r-sm); overflow: hidden; background: var(--line); } .cliq-split i { display: block; height: 100%; } .cliq-split .long { background: var(--up); } .cliq-split .short { background: var(--down); } .cliq-legend { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 650 10.5px/1.4 var(--num); font-variant-numeric: tabular-nums; } .cliq-legend .long { color: var(--up); } .cliq-legend .short { color: var(--down); } .cliq-venues { margin: 11px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line); color: var(--faint); font: 650 10px/1.6 var(--num); font-variant-numeric: tabular-nums; } .cliq-venues b { color: var(--muted); font-weight: 650; } .cliq-silent { color: var(--faint); } /* 통합 검색 — 마스트헤드 한 칸에서 코인·국내·미국을 함께 찾는다. * * 2026-09-07 다시 짰다. 운영자 둘: "검색창 디자인이 너무 올드해", 그리고 * "클릭했을때 순간적으로 늘어나는 애니메이션이 별로야 — 조금 더 살아있고 * 동적인 애니메이션이면 좋겠어". * * 낡아 보이던 것의 정체는 **그림이 없다는 것**이었다. 테두리 하나짜리 빈 * 상자에 문장 하나뿐이라, 이 제품에서 검색이라고 말하는 그림을 달지 않은 * 유일한 검색 자리였다 — 하단 탭의 `검색`은 돋보기를 단다. 같은 뜻에 두 * 생김새를 두면 둘 다 약해진다. * * 튀던 것은 전이를 안 걸어서다. 옛 주석에 이유가 적혀 있었다 — 폭을 * 전이시키면 마스트헤드가 매 프레임 다시 풀린다. 맞는 걱정이었지만 답은 * 전이를 포기하는 것이 아니라 **자리를 미리 잡는 것**이었다. `.site-search` * 가 열린 폭을 늘 차지하고 알약은 그 안에서 오른쪽에 붙어 산다. 여는 동안 * 바뀌는 것은 알약의 폭뿐이고, 부모의 폭은 고정이라 위쪽 플렉스 줄은 다시 * 풀리지 않는다. 쉬는 상태의 생김새는 그대로다 — 왼쪽에 생기는 빈자리는 * 아무것도 그리지 않는다. * * 여는 방향은 **왼쪽**이다. 오른쪽 끝은 EN 단추 옆에 고정이라 움직일 수 * 없고, 무엇보다 검색이 향하는 곳은 왼쪽의 내용이다. 돋보기가 그 열리는 * 모서리에 앉아 함께 간다 — 상자가 늘어나는 것이 아니라 그림이 나아가는 * 것으로 눈이 읽는다. 이 화면의 authored moment는 그 한 번이다. */ .site-search { position: relative; display: flex; align-items: center; --search-rest: 186px; --search-open: 258px; /* 열린 폭을 미리 잡는다. `contain`은 쓰지 않는다 — 이 상자가 절대 위치의 기준이 되면 좁은 화면에서 자동완성 목록을 마스트헤드에 맞춰 둔 규칙이 깨진다(tests/frontend/test_search_panel_mobile.py). 폭이 고정인 것만으로 위쪽 줄은 다시 풀리지 않는다. */ flex: 0 0 auto; width: var(--search-open); } /* 여백은 **안내 문장이 들어가고 남을 만큼**이어야 한다. 운영자 제보 2026-09-07: "종목·코인 검색에서 색 자가 잘려서 보기 안 좋아". 내 자로는 들어갔다(글자 73.4 · 자리 75.0). 그 1.6px이 문제였다 — 폰트를 그리는 쪽이 기기마다 조금씩 다르고, 여유가 한 픽셀대면 그 차이가 그대로 잘림이 된다. **'딱 들어간다'는 들어간 것이 아니다.** 아이콘 옆 간격과 좌우 여백을 각각 2px씩 줄여 자리를 6px 벌리고, 쉬는 폭도 한 단 올린다. */ .site-search-field { position: relative; display: flex; align-items: center; gap: var(--sp-1h); box-sizing: border-box; width: var(--search-rest); margin-left: auto; height: 32px; padding: 0 10px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-pill); /* 닫히는 것이 여는 것보다 빠르다 — 기본값이 닫힌 상태의 값이다. */ transition: width .2s cubic-bezier(.16, 1, .3, 1), border-color .18s, background .18s; } .site-search:focus-within .site-search-field { /* 레인 폭을 **길이로** 적는다. `100%`는 플렉스 항목의 퍼센트 해석에 걸려 실측에서 아예 안 먹었다(`!important`를 붙여도 124px 그대로). 값이 하나뿐인 레인이므로 같은 변수를 그대로 부르는 편이 읽기에도 정확하다. */ width: var(--search-open); border-color: var(--accent); background: var(--panel-2); transition-duration: .32s, .18s, .18s; } .site-search-ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ink-3); transition: color .18s; } /* 초점이 간 칸은 지금 할 일이 있는 자리다 — 이 세계에서 그 뜻의 색은 액센트다. 테두리와 그림이 같은 순간에 같은 색으로 간다. */ .site-search:focus-within .site-search-ico { color: var(--accent); } .site-search-input { flex: 1 1 auto; min-width: 0; width: 100%; height: 100%; padding: 0; color: var(--ink); background: none; border: 0; font: 500 var(--fs-sm)/1 var(--sans); } .site-search-input:focus { outline: none; } .site-search-input::placeholder { color: var(--faint); } .site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* 초점이 **멀리서** 넘어왔을 때 눈이 따라오게 한다. * * 홈의 "+ 종목 추가"를 누르면 초점이 여기로 오는데, 두 자리가 286px 떨어져 * 있고 마스트헤드는 sticky라 칸은 움직이지도 않는다. 게다가 프로그램으로 준 * 초점은 `:focus-visible`을 켜지 않아서(실측) 이 세계의 액센트 초점 링이 아예 * 안 뜬다. 알약이 열리고 테두리가 액센트로 가는 것만으로는, 화면 한가운데를 * 보고 있던 눈이 위를 볼 이유가 없다. * * 링이 칸에 **내려앉는** 한 박자를 준다. 그림자가 아니라 `outline`이다 — * The No-Shadow Rule은 그림자를 점등과 소등 테두리 두 자리에만 허용한다. * 색은 액센트(동작)다: 여기가 지금 할 일이 있는 자리라는 뜻이 정확히 맞는다. * 청록(`--seg-live`)은 "값이 도착했다"는 뜻이라 여기서는 거짓말이 된다. * * 한 번만 돈다. JS가 붙이고 `animationend`에서 뗀다. */ @keyframes search-handoff { from { outline-color: var(--accent); outline-offset: 7px; } to { outline-color: transparent; outline-offset: 2px; } } .site-search-field.is-handoff { outline: 2px solid transparent; animation: search-handoff .42s cubic-bezier(.16, 1, .3, 1) 1; } @media (prefers-reduced-motion: reduce) { /* 움직임만 지운다. 알약은 여전히 열리고 테두리도 액센트로 가되, 그 변화가 **즉시** 일어난다 — 상태 변화를 지우는 것이 아니라 이동을 지우는 것이다. 내려앉는 링은 이동 그 자체라 통째로 뺀다. */ .site-search-field, .site-search:focus-within .site-search-field { transition-duration: .01ms, .01ms, .01ms; } .site-search-field.is-handoff { animation: none; outline: none; } } /* **뒤를 가린다.** * * 패널이 본문 위에 떠 있는데 아무것도 안 가려서, 결과 줄 사이로 아래 문장이 * 그대로 비쳤다 — 실측 `/` 390px에서 패널 바로 아래 "아직 고정한 종목이 * 없습니다…"가 같은 밝기로 읽혔다(운영자 2026-09-08 "가독성이 0에 가까워"). * 목록을 읽는 동안 배경은 배경이어야 한다. * * 가림막은 패널의 형제가 아니라 **문서 바닥**에 깐다 — 마스트헤드가 * `backdrop-filter`를 갖고 있어 그 안의 고정 요소는 머리 안에 갇힌다 * (`--mast-h` 아래로 못 내려간다). `body`에 클래스를 걸어 켠다. */ body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 62%, transparent); opacity: 0; pointer-events: none; transition: opacity .18s ease; } body.search-open::after { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { body::after { transition: none; } } /* **드롭다운은 자기 입력창에 맞춘다.** * * 342px 고정이었다. 마스트헤드의 검색창은 258px이라 패널이 왼쪽으로 84px * 튀어나왔고, 결과가 한 건일 때 그 84px이 통째로 빈 자리로 읽혔다 * (운영자 2026-09-08 "네비우스 옆에 박스가 왜이리 많이남아"). * * 열림의 주인은 입력창이므로 폭도 입력창이 정한다. 다만 하한은 **재서** * 정한다 — 300px으로 줄였더니 "Nebius Group N.V."가 잘렸다. 방금 주인공으로 * 올린 이름을 자르면 줄인 보람이 없다. * * 실측(15px w650 캔버스): 이름 최장 128px("Nebius Group N.V.", 한국어는 * "에이치엘비생명과학" 117), 등락 44, 표식 칸 84, 간격 20, 판 여백 12 * → **288 필요**. 이름 칸이 124px이라 **4px 모자라서** 잘렸다. 하한을 312로 * 두면 이름 칸이 152px이 되어 24px 여유가 남는다. */ .site-search-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; /* **내용이 폭을 정하고 입력창이 하한을 준다.** 고정 폭이면 남는 자리가 이름과 등락 사이에 고인다(`1fr`이 이름 칸을 늘려 등락을 오른쪽 끝까지 민다). `max-content`면 그 고임이 없다. */ width: max-content; min-width: min(100%, calc(100vw - 24px)); /* 상한이 없으면 이름이 긴 결과에서 506px까지 벌어진다(실측 "bit"). 열림의 주인이 258px인데 그 두 배가 되면, 빈 자리는 없어도 딸린 것처럼 안 읽힌다. 420 위로는 이름을 줄임표로 자른다 — 목록에서는 그게 정상이다. */ max-width: min(420px, calc(100vw - 24px)); max-height: 62vh; overflow-y: auto; padding: var(--sp-1h); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); } /* **9.5px은 우리 규칙 밖이다.** `tokens.css` 첫 줄이 "8~10px 텍스트를 없앤다, 최소 12px, 이보다 작게 쓰지 않는다"인데 이 패널에만 남아 있었다. */ .site-search-group { margin: 10px 0 4px; padding: 0 8px; color: var(--faint); font: 650 var(--fs-xs)/1.4 var(--num); font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; } .site-search-hit { /* 첫 칸을 84px로 묶는다. 로고가 붙은 표식과 글자만 있는 표식이 섞이면 이름 시작 x가 흔들려, 훑을 때 눈이 줄마다 왼쪽 모서리를 다시 찾는다. 실측(412px, 2026-08-31): 핀 없을 때 93~115px, 76px 핀에서도 로고 칩이 81px이라 112/117로 갈렸다. 배포본에서 가장 넓은 칩이 81px이다. 이건 subgrid를 못 쓰는 브라우저의 **바닥**이다. 아래 블록이 같은 보장을 더 좁게 해 준다 — 84는 국내 6자리 코드에서 나온 값이라 `NBIS` 같은 미국 티커에서는 30px이 칩과 이름 사이에 그대로 벌어졌다(운영자 2026-09-08). */ display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; /* 심벌이 테두리 있는 표식(`.ticker-mark`)이 된 뒤로 baseline 정렬은 상자를 한 칸 들어 올려 이름과 어긋나 보인다. 가운데로 맞춘다. */ align-items: center; gap: 10px; /* 손가락이 짚는 줄이다 — 44px을 확보한다(2.5.5). 7px 여백일 때 34px이었다. */ min-height: 44px; padding: 8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; transition: background-color .14s ease, transform .12s cubic-bezier(.2, .8, .3, 1); } /* **열을 패널이 갖고 줄들이 나눠 쓴다.** * * 84px 고정이 지키던 것은 "줄마다 이름 시작 x가 같다"였고, 그건 지켜야 한다. * 다만 그 값이 국내 6자리 코드에서 나온 상수라 미국 티커에서는 30px이 남았다. * subgrid면 칸 폭을 **이 패널에서 가장 넓은 표식**이 정하므로 둘 다 얻는다 — * 미국 결과만 있으면 좁게, 국내가 섞이면 그만큼. */ @supports (grid-template-columns: subgrid) { .site-search-panel { display: grid; align-content: start; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; } .site-search-panel > .site-search-group, .site-search-panel > .site-search-note { grid-column: 1 / -1; } .site-search-hit { grid-column: 1 / -1; grid-template-columns: subgrid; } } .site-search-hit:hover, .site-search-hit.is-active { background: var(--accent-soft); } .site-search-hit.is-pressed { transform: scale(.985); } .site-search-hit .hit-symbol { font: 700 12px/1.3 var(--num); font-variant-numeric: tabular-nums; } /* **이름이 주인공이다.** 코드가 굵고 이름이 안 굵어서 위계가 뒤집혀 있었다 — 사람은 코드를 외워 오지 않는다. 코드는 같은 이름이 여럿일 때 가르는 표식이고, 그 일은 12px 표식으로 충분하다. */ .site-search-hit .hit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-md); font-weight: 650; letter-spacing: -.01em; } /* 10px이었다. 하필 **색으로 오르내림을 말하는 자리**가 화면에서 가장 작았다 — 색은 크기를 못 대신한다. */ .site-search-hit .hit-meta { display: flex; align-items: baseline; gap: 5px; justify-content: flex-end; color: var(--muted); font: 700 var(--fs-sm)/1.3 var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; } /* **날짜는 값이 아니라 값에 붙은 이름표다.** 등락색은 퍼센트에만 든다 — `.hit-meta` 통째로 물들이면 "9.7"까지 초록이 되어 그것도 값으로 읽힌다. */ .site-search-hit .hit-when { font-style: normal; font-weight: 600; color: var(--faint); } .site-search-hit .hit-meta.up, .site-search-hit .hit-pct.up { color: var(--up); } .site-search-hit .hit-meta.down, .site-search-hit .hit-pct.down { color: var(--down); } .site-search-note { margin: 0; padding: 12px 9px; color: var(--muted); font-size: 12px; } .shell { margin: 0 auto;} .hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .5fr); align-items: end; gap: 40px; padding: 22px 0 42px; border-bottom: 1px solid var(--line); } .kicker, .eyebrow { margin: 0 0 8px; color: var(--accent); font: 700 10px/1.4 var(--num); font-variant-numeric: tabular-nums; letter-spacing: .14em; text-transform: uppercase; } .hero h1 { margin: 0; max-width: 900px; word-break: keep-all; overflow-wrap: break-word; font-size: clamp(38px, 6.2vw, 84px); line-height: .96; letter-spacing: -.065em; font-weight: 760; } .hero-copy { max-width: 720px; margin: 22px 0 0; color: var(--muted); font-size: 15px; } .hero-meta { justify-self: end; min-width: 220px; padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11px; } .hero-meta > span, .hero-meta > strong { display: block; } .hero-meta strong { margin: 4px 0 12px; color: var(--ink); font: 650 13px/1.3 var(--num); font-variant-numeric: tabular-nums; } .refresh-button { min-height: 34px; cursor: pointer; font-weight: 700;} .refresh-button[aria-busy="true"] span:first-child { display: inline-block; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .overview { padding: 44px 0 24px; } .section-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 15px; } .section-heading.compact { margin-bottom: 22px; } .section-index { width: 30px; height: 24px; flex: 0 0 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--line); color: var(--faint); font: 650 10px/1 var(--num); font-variant-numeric: tabular-nums; } /* 구역 제목은 어느 코드가 그렸든 같은 단이다. * * `/us` 실측: 위 열 구역은 `

`로 22px, 15175px 아래부터는 이 규칙이 * 그린 17px이었다. 스크롤하면 구역 제목이 이유 없이 작아진다 — 읽는 사람은 * 어느 코드 경로가 그렸는지 모른다. 눈썹이 위에 붙는다고 표제가 내려갈 * 이유도 없다. `tokens.css`의 `h2`(22)와 맞춘다. */ .section-heading h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.025em; } .section-heading .eyebrow { margin-bottom: 3px; } .source-pill { margin-left: auto; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--faint); font: 9px/1 var(--num); font-variant-numeric: tabular-nums; text-transform: uppercase; } .overview-groups { display: grid; gap: 22px; } /* 무리 표제 — 커질 수 없는 자리에서는 괘선이 표제임을 말한다. * * 넷 다 12px에서 12px 글을 이끌고 있었다(실측 계단 1.00 · `.ixr-sub`는 굵기 * 650 하나가 유일한 차이였다). 12px에서 굵기 50은 표제로 안 읽힌다. 크기를 * 올리지 않는 이유는 밀도가 이 제품의 성격이고 12px이 `tokens.css`에 적어 둔 * 라벨 하한선이기 때문이다. `.overview-group h3`가 이미 갖고 있던 처리 — * 제목 뒤로 줄 끝까지 뻗는 1px 괘선 — 를 이름 붙여 나머지 셋에 준다. */ .overview-group h3, .ixr-sub, .kridx-group, .cvol-card h3, .cboard-card h3 { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 650 var(--fs-xs)/1.2 var(--sans, system-ui); letter-spacing: .04em; } .overview-group h3::after, .ixr-sub::after, .kridx-group::after, .cvol-card h3::after, .cboard-card h3::after { content: ""; flex: 1; height: 1px; background: var(--line); } .overview-group h3 { margin: 0 0 9px; } .summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } /* 카드 바닥의 출처 줄은 **흐름 안에서** 바닥에 붙는다. * * `position: absolute; bottom: 11px`이었다. 그러면 위쪽 내용이 길어져도 * 자리를 비켜 주지 않는다 — 실측(2026-08-30, /monitor 412px): 변화율 줄이 * 723~740, 출처 줄이 733~761로 **7px 겹쳤다.** 세 카드가 그랬다. 값이 조금만 * 더 길어지면 겹침도 그만큼 커진다. * * 세로 flex로 두고 `margin-top: auto`로 밀면 같은 자리에 서면서 위쪽 내용의 * 높이를 존중한다. 격자 안 카드 높이도 그대로 맞는다. */ .summary-card { position: relative; min-height: 128px; padding: 15px 16px 13px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(145deg, var(--panel), var(--panel-2)); } .summary-card::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--card-accent, var(--accent)); opacity: .8; } .summary-card.stale { border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); } .summary-card.unavailable { background: repeating-linear-gradient(-45deg, var(--panel), var(--panel) 9px, var(--panel-2) 9px, var(--panel-2) 10px); } .summary-label { color: var(--card-accent, var(--accent)); font: 680 10px/1.25 var(--num); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .05em; } .summary-value { margin-top: 13px; font: 760 clamp(20px, 2vw, 27px)/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .summary-change { min-height: 17px; margin-top: 7px; color: var(--muted); font: 650 10px/1.3 var(--num); font-variant-numeric: tabular-nums; } .summary-change.up { color: var(--up); } .summary-change.down { color: var(--down); } .summary-meta { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); color: var(--faint); font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jump-nav { position: sticky; top: 62px; z-index: 50; display: flex; gap: var(--sp-1h); margin: 16px 0 44px; padding: 9px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); } .weekend-pulse { margin: 8px 0 36px; padding: 22px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .risk-strip { display: flex; flex-wrap: wrap;} .weekend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* 요약 카드는 한 줄을 통째로 쓴다. * * 카드가 일곱이면 3열에서 3+3+1이라 마지막 줄에 한 장만 남는다(운영자 지적 * 2026-08-31). **순서를 바꾸는 것으로는 안 고쳐진다** — 혼자 남는 카드가 * 바뀔 뿐이다. 요약을 한 줄로 펼치면 남는 여섯이 3+3(3열)·2+2+2(2열)로 * 정확히 떨어지고, 요약이 개별 값보다 먼저 읽힌다. * * 개별 카드가 여섯이 아니게 되면 이 규칙만으로는 다시 남는다 — 그때는 * 개수를 6의 배수로 맞춘다(`/crypto` 카드·김프와 같은 규칙). */ .weekend-card.summary { grid-column: 1 / -1; } .weekend-card { min-height: 150px; padding: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); } .weekend-card.proxy { border-color: color-mix(in srgb, var(--violet) 28%, var(--line)); } .weekend-card.unavailable { background: repeating-linear-gradient(-45deg, var(--panel), var(--panel) 9px, var(--panel-2) 9px, var(--panel-2) 10px); } .weekend-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 7px; } .weekend-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; } .weekend-card h3 { margin: 0; font-size: 12px; } .weekend-symbol { color: var(--faint); font: 8.5px/1 var(--num); font-variant-numeric: tabular-nums; } .weekend-value { margin: 18px 0 7px; font: 750 22px/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .weekend-change { color: var(--muted); font: 700 10px/1.2 var(--num); font-variant-numeric: tabular-nums; } .weekend-change.up { color: var(--up); } .weekend-change.down { color: var(--down); } .weekend-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--faint); font: 8.5px/1.35 var(--num); font-variant-numeric: tabular-nums; } .weekend-meta strong { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; } .weekend-disclaimer { margin: 11px 0 0 42px;} .jump-nav::-webkit-scrollbar { display: none; } .jump-nav a { flex: 0 0 auto; padding: var(--sp-1h) 9px; border-radius: var(--r-sm); text-decoration: none; color: var(--muted); font: 650 10px/1 var(--num); font-variant-numeric: tabular-nums; } .jump-nav a:hover { color: var(--ink); background: var(--panel-2); } .dashboard-section { margin: 0 0 52px; scroll-margin-top: 118px; } /* 상한이 **자식 결합자 아래**에 있었다. 같은 클래스가 같은 페이지에서 780px로 서기도 하고 1288px(144ch)로 서기도 했다 — `/us`에서 열은 갇히고 여덟은 풀려 있었다. 상한은 클래스 자신에게 주고, 들여쓰기만 옛 래퍼 아래에 남긴다. */ .section-copy { max-width: none; } .dashboard-section > .section-copy { margin: calc(-1 * var(--sp-1h)) 0 15px 42px; color: var(--muted); font-size: 12px; } .panel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow); } .metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } /* 홀수로 끝나면 마지막 칸 옆에 **631.5 × 473.9px**(격자 폭의 49%) 빈자리가 남는다(실측 1440px: `#macro-regime` 7장, `#funding` 3장, `/kr` 3장). 고아를 한 줄 전체로 늘려 그 구멍을 없앤다 — 운영자가 두 번 지적한 그 문제다. */ .metric-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } .metric-grid.one { grid-template-columns: 1fr; } .metric-card { min-width: 0; min-height: 360px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow); } .metric-card > header { display: flex; justify-content: space-between; gap: 16px; min-height: 42px; } /* 이 줄은 시리즈 식별자를 담아 자주 두 줄이 된다("RIFLGFCY10_N.B - …"). 12px 바닥으로 올라간 뒤에도 행간은 1.2 그대로라 두 줄이 붙었다. */ .metric-kicker { margin: 0 0 4px; color: var(--faint); font: 9px/1.45 var(--num); font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase; } .metric-card h3 { margin: 0; font-size: 15px; line-height: 1.25; letter-spacing: -.02em; } .badge-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: 4px; } .status-badge { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums;} .status-badge.fresh { border-color: color-mix(in srgb, var(--green) 38%, var(--line));} .status-badge.stale, .status-badge.warn { border-color: color-mix(in srgb, var(--amber) 38%, var(--line));} .status-badge.error { border-color: color-mix(in srgb, var(--red) 38%, var(--line));} .status-badge.info { border-color: color-mix(in srgb, var(--accent) 38%, var(--line));} .metric-primary { display: flex; align-items: baseline; gap: var(--sp-1h); margin-top: 18px; } .metric-primary strong { font: 780 clamp(28px, 3.2vw, 44px)/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .metric-unit { color: var(--faint); font: 10px/1 var(--num); font-variant-numeric: tabular-nums; } .metric-change { min-height: 20px; margin-top: 8px; color: var(--muted); font: 650 10px/1.4 var(--num); font-variant-numeric: tabular-nums; } .metric-change.up { color: var(--up); } .metric-change.down { color: var(--down); } .chart-slot { width: 100%; height: 145px; margin: 15px 0 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .chart-slot svg { display: block; width: 100%; height: 100%; overflow: visible; } .chart-slot .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .chart-slot .zero { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .chart-slot .area { fill: var(--chart-fill); } .chart-slot .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .chart-slot .dot { fill: var(--chart); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; } .chart-slot .chart-empty { display: grid; height: 100%; place-items: center; color: var(--faint); font-size: 11px; } .metric-description { min-height: 38px; margin: 0; color: var(--muted); font-size: var(--fs-sm); } /* 우리가 계산한 한 줄 — 원 수치와 같은 카드에 있으므로 출처가 갈린다는 것을 문구 자체가 말한다(EIA API 약관). 12px 아래로 내리면 typography 바닥에 걸린다. */ .metric-note { margin: var(--sp-1h) 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; } /* **칩 하나가 줄 하나다.** `flex-wrap: wrap`이던 때는 문장 길이가 줄 수를 정했고, 같은 줄 두 카드에서 둘째 칩이 한쪽만 아래로 밀렸다(자 실측 2026-09-08, `/us` 1440px: 칩1이 329px인 카드는 둘째가 2행, 286px인 카드는 1행 — 36.8px). 알약 폭은 그대로다(`justify-self: start`). */ .metric-hints { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1h); min-height: 24px; margin-top: 10px; } .metric-hints > .hint-chip { justify-self: start; } /* 좌우 7px은 이 칩의 글자(12px)에 대해 좁다 — `/us` 라이브 스캔에서 같은 칩이 37번 걸렸다. 8px은 눈금 위의 값이고 세로 5px과도 비가 맞는다. */ .hint-chip { padding: 5px var(--sp-2); border: 1px solid transparent; border-radius: var(--r-sm); background: var(--panel-2); color: var(--muted); font: 9px/1.35 var(--num); font-variant-numeric: tabular-nums; } .metric-card > footer { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 27px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font: 9px/1.4 var(--num); font-variant-numeric: tabular-nums; } .metric-card > footer a { color: var(--accent); text-decoration: none; } .metric-card.unavailable { background: repeating-linear-gradient(-45deg, var(--panel), var(--panel) 9px, var(--panel-2) 9px, var(--panel-2) 10px); } .metric-card.unavailable .metric-primary strong { color: var(--faint); } /* ── 같은 줄의 카드는 같은 자리에서 같은 높이로 선다 ────────────────────── * * 실측 1440px `/us`: 같은 줄 카드의 머리가 44↔49, 설명이 38↔88, 힌트가 24↔68, * 바닥이 31↔37이었다. 머리의 5px이 아래 여섯 조각을 통째로 밀고, 설명의 50px이 * 바닥을 81px까지 어긋나게 했다 — 큰 숫자 두 개가 서로 다른 높이에 서 있으면 * 그것만으로 화면이 고장난 것처럼 보인다(운영자 2026-09-07: "한쪽은 올라가있고"). * * 조각마다 `min-height`를 박아 두었지만(42·38·24·27) 내용이 그 바닥을 넘는 * 순간 소용이 없다. **어느 값이 올지 모르므로 바닥으로는 못 고친다.** * * subgrid는 같은 줄의 카드가 부모의 줄 트랙을 함께 쓰게 한다. 트랙 높이는 그 * 줄에서 가장 큰 것이 정하고 나머지가 따라간다 — 길이를 미리 알 필요가 없다. * * 자리를 **이름으로** 못 박는다. `p.metric-note`는 어떤 카드에만 있는데, * 자동 배치에 맡기면 그 카드만 아래가 한 칸씩 밀린다. 없는 카드는 그 트랙을 * 비워 두는 편이 맞다. * * `row-gap: 0`이 필요한 이유: subgrid는 부모의 `gap: 9px`를 트랙마다 물려받아 * 카드 하나가 63px 자란다. 조각 사이의 숨은 원래대로 각 조각의 `margin`이 만든다. * * subgrid를 모르는 브라우저는 이 블록을 통째로 건너뛰고 지금처럼 블록으로 * 쌓인다 — 못 맞추는 것이지 깨지는 것이 아니다. */ @supports (grid-template-rows: subgrid) { .metric-card { display: grid; grid-template-rows: subgrid; /* 8 → 10. 힌트 상자가 한 줄이 아니라 **세 줄**을 쓴다(아래 참조). */ grid-row: span 10; row-gap: 0; } .metric-card > header { grid-row: 1; } .metric-card > .metric-primary { grid-row: 2; } .metric-card > .metric-change { grid-row: 3; } .metric-card > .chart-slot { grid-row: 4; } .metric-card > .metric-description { grid-row: 5; } .metric-card > .metric-note { grid-row: 6; } .metric-card > .metric-hints { grid-row: 7 / span 3; } .metric-card > footer { grid-row: 10; } /* ── 힌트 상자도 줄을 나눠 쓴다 ──────────────────────────────────────── * * 카드 밖은 이미 맞아 있었다 — 상자끼리는 같은 y에 선다. 어긋나는 것은 * **그 안**이었다. 상자를 subgrid로 만들면 칩 i가 그 줄 트랙 i에 앉으므로, * 앞 칩이 몇 줄로 접히든 뒤 칩의 y가 안 흔들린다. * * 셋인 이유는 데이터가 최대 셋이기 때문이다(1개:12 · 2개:19 · 3개:3). * 자리는 **번호로 못 박는다** — 자동 배치에 맡기면 칩이 하나뿐인 카드에서 * 다음 조각이 위로 올라와 다시 어긋난다(오늘 `.usm-note`가 그랬다). */ .metric-card > .metric-hints { grid-template-rows: subgrid; } .metric-hints > .hint-chip:nth-child(1) { grid-row: 1; } .metric-hints > .hint-chip:nth-child(2) { grid-row: 2; } .metric-hints > .hint-chip:nth-child(3) { grid-row: 3; } /* 한 줄짜리 격자(`.metric-grid.one`)와 홀수 고아는 견줄 상대가 없다. 트랙을 나눠 쓸 이유가 없고, 나눠 쓰면 빈 `metric-note` 트랙만 남는다. */ .metric-grid.one > .metric-card, .metric-grid > :last-child:nth-child(odd) { grid-row: auto / span 10; } } .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .comparison-card { padding: 18px; min-height: 250px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); } .comparison-card h3 { margin: 0; font-size: var(--fs-md); } .comparison-card p { margin: 5px 0 14px; color: var(--muted); font-size: 11px; } .comparison-chart { height: 150px; } .comparison-chart svg { width: 100%; height: 100%; } .comparison-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; color: var(--muted); font: 9px/1 var(--num); font-variant-numeric: tabular-nums; } .comparison-legend i { display: inline-block; width: 12px; height: 2px; margin-right: 5px; vertical-align: middle; background: var(--accent); } .comparison-legend span:nth-child(2) i { background: var(--violet); } /* 기간·정렬 토글 — 띠를 걷고 밑줄로 (2026-09-07). * * 운영자가 두 번 짚었다: 표 위의 이 바가 "성의 없어 보인다"(09-07 오전), * 그리고 히트맵의 1D·1W·1M·1Y가 "디자인도 너무 올드해"(09-07 저녁). 같은 * 부품이라 한 번에 고친다. * * 낡아 보이던 것의 정체는 셋이다. * ① 크롬이 두 겹이었다 — 1px 테두리 **와** 채운 면(`--panel-2`)이 같이 있고, * 그 안에 또 칸마다 면이 든다. * ② 선택된 칸이 **꽉 찬 파란 사각형**이다. 폰에서 이 바는 전폭 52px 블록이라 * 화면의 4분의 1이 통째로 파랗게 칠해진다(실측 390px: 86×44px). 이 세계에서 * 파랑은 "동작"이지 "지금 보고 있는 것"이 아니고, 저 크기의 채움은 iOS 6· * Material 2의 세그먼티드 컨트롤 그대로다. * ③ 그래서 값보다 컨트롤이 무겁다. 이 바 아래에 오는 것은 표이고, 표가 주인공이다. * * 답은 이미 이 제품 안에 있었다 — 데스크톱 페이지 탭(`.view-tab.active`)이 * 쓰는 **밑줄**이다. 띠도 채움도 없이 지금 자리를 말한다. 같은 문법을 쓰면 * 화면에서 "고르는 것"의 생김새가 하나로 모인다. * * 굵기는 상태에 따라 **바꾸지 않는다.** 토스는 선택된 칸을 굵게 하지만, 그러면 * 글자 폭이 늘어 옆 칸들이 밀리고 밑줄이 튄다 — 네 칸짜리 줄에서는 누를 때마다 * 줄이 흔들린다. 색(`--ink-3` → `--ink`)과 2px 밑줄이면 충분하다. */ .segmented { margin-left: auto; display: inline-flex; align-items: stretch; gap: var(--sp-4); padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; } .segmented button { position: relative; min-width: 0; min-height: 29px; padding: 0 2px 7px; cursor: pointer; color: var(--ink-3); border: 0; border-radius: 0; background: transparent; font: 650 var(--fs-sm)/1.2 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; transition: color .15s; } /* 밑줄은 칸의 아래끝이 아니라 **띠 위**에 앉는다(`bottom: -1px`) — 1px 선을 덮어야 두 줄로 보이지 않는다. 늘 자리를 잡아 두고 색만 켠다: 나중에 만들면 켜지는 순간 칸 높이가 1px 움직인다. */ .segmented button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; } .segmented button:hover { color: var(--ink); } .segmented button.active { color: var(--ink); } .segmented button.active::after { background: var(--accent); } .sector-panel { padding: 18px; } .sector-bars { display: grid; gap: 9px; min-height: 310px; padding: 15px 5px; } .sector-row { display: grid; grid-template-columns: minmax(120px, .55fr) minmax(240px, 2fr) 70px; align-items: center; gap: 12px; } .sector-name { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sector-name code { margin-left: 5px; color: var(--faint); font: 9px/1 var(--num); font-variant-numeric: tabular-nums; } .bar-track { position: relative; height: 18px; } .bar-track::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-strong); } .bar-fill { position: absolute; top: 2px; height: 14px; min-width: 1px; border-radius: var(--r-sm); } .bar-fill.up { left: 50%; background: var(--up); } .bar-fill.down { right: 50%; background: var(--down); } .sector-value { text-align: right; font: 700 10px/1 var(--num); font-variant-numeric: tabular-nums; } .sector-value.up { color: var(--up); } .sector-value.down { color: var(--down); } /* 값이 없을 때 서는 자리. 셋을 구별해서 말한다 — 아직 안 왔다 · 실패했다 · 꺼져 있다. 테두리를 여기서 준다: `.disabled`가 `border-color`만 바꾸는데 테두리가 없는 블록에서는 그 줄이 아무 일도 하지 않았다(실측 2026-08-30, /us `#stress-state` `border-width: 0`). 그래서 같은 상태가 어떤 자리에선 상자로, 어떤 자리에선 맨 글자로 보였다. */ .state-block { min-height: 132px; display: grid; place-items: center; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--faint); text-align: center; font-size: var(--fs-xs); } /* 빠른 응답에서는 "불러오는 중"을 아예 보여 주지 않는다. * * 탭을 옮길 때마다 0.1초쯤 떴다 사라지는 것이 거슬린다는 지적(운영자 2026-09-02). * API가 대개 0.03~0.3초에 오므로 글자가 뜨자마자 지워지고, 그 깜빡임이 느리다는 * 인상을 준다 — 실제로는 빠른데도. * * 그래서 **0.4초 동안 투명하게** 둔다. 그 안에 값이 오면 아무것도 안 보이고, * 정말 오래 걸릴 때만 나타난다. 자리는 계속 차지하므로 값이 들어와도 화면이 * 튀지 않는다. `role="status"`는 그대로라 스크린리더에는 바로 읽힌다. */ .state-block { opacity: 0; animation: state-block-in 140ms 400ms forwards; } @keyframes state-block-in { to { opacity: 1; } } /* 움직임을 줄이기로 한 사람에게는 지연만 남기고 페이드를 없앤다. */ @media (prefers-reduced-motion: reduce) { .state-block { animation-duration: 0s; } } /* 잠긴 lane 안내처럼 **계속 있을 글**은 기다리게 할 이유가 없다. */ .state-block.disabled { opacity: 1; animation: none; } .state-block.disabled { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 35%, var(--line)); background: color-mix(in srgb, var(--amber) 5%, var(--panel)); } /* 기호는 글자와 같은 줄에 선다. 색은 `currentColor`라 상태 색을 그대로 따른다. */ .state-block { gap: var(--sp-2); } .state-block .ico { width: 18px; height: 18px; opacity: .85; } .state-block[data-state="failed"] { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--line)); } /* 기다리는 중에는 기호가 돈다 — 값이 오는 중이라는 말을 글자보다 먼저 한다. 움직임을 끈 사람에게는 돌지 않는다(그래도 기호는 남는다). */ .state-block[data-state="waiting"] .ico { animation: ico-spin 1.6s linear infinite; } @keyframes ico-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .state-block[data-state="waiting"] .ico { animation: none; } } /* 기호의 기본 — 글자 크기를 따라가고 색을 물려받는다(DESIGN.md §3). * 아이콘에 색을 박으면 다크 테마의 상태 색과 어긋난다. */ .ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; color: inherit; } .state-block.loading::after { content: ""; width: 22px; height: 2px; margin-left: 8px; background: var(--accent); animation: pulse 1s ease-in-out infinite alternate; } @keyframes pulse { to { width: 72px; opacity: .3; } } .panel-footer { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; min-height: 38px; padding: 10px 0 0; border-top: 1px solid var(--line); color: var(--faint); font: 9px/1.45 var(--num); font-variant-numeric: tabular-nums; } .panel-footer a { color: var(--accent); text-decoration: none; } .interpretation-note { margin: 10px 0 0; padding: 10px 12px; border-left: 2px solid var(--accent); background: var(--panel-2); color: var(--muted); font-size: 10.5px; } /* 넓은 표는 가로로 흐른다. 그런데 흐른다는 표시가 전혀 없어서, 폰에서는 * 마지막 열이 "낮을수록 스트"처럼 말 중간에 잘린 채 서 있었다 — 스크롤바는 * 손대는 동안에만 나타나므로 읽는 사람에게는 그냥 깨진 글자다 * (실측 2026-08-30, /us 412px 스트레스·심리 표). * * 오른쪽 가장자리에 잔금과 옅은 빛으로 말한다. 두 겹이다: 표시는 컨테이너에 * 붙어 있고(scroll), 덮개는 내용과 함께 움직인다(local). 끝까지 밀면 덮개가 * 표시 위에 와서 스스로 꺼지고, 넘칠 것이 없는 표에서는 처음부터 덮여 있다 — * 켜고 끄는 자바스크립트가 필요 없다. * * 빛으로 긋는다. 처음엔 검은 그늘을 썼는데 패널이 이미 거의 검어서 화면에서 * 아무것도 안 보였다(실측). 어두운 바탕에서 읽히는 건 그늘이 아니라 빛이다. * * 왼쪽은 이미 첫 열이 sticky로 붙어 있어 그 자체가 표시다. * `--scroll-ground`는 이 표가 앉은 바닥색이다. 패널 밖에 두는 표가 생기면 * 그 자리에서 덮개 색을 다시 준다 — 안 맞추면 그늘이 안 꺼진다. */ .table-scroll { --scroll-ground: var(--panel); /* **상자가 표를 감싼다** (운영자 제보 2026-09-06, 데스크톱). * * `width: 100%`만 두면 좁은 표가 넓은 상자 안에 떠 있는다 — 실측 * `/stock/005930` 1690px 화면에서 상자 1,288px에 표는 **463px·427px**(36%)였다. * 남은 800px은 빈 자리가 아니라 **오른쪽 스크롤 표시가 서는 자리**여서, * 표에서 한참 떨어진 곳에 선과 그늘이 떠 "표가 잘려 이어진다"로 읽혔다. * * `min(100%, max-content)`이면 좁은 표는 제 폭을 갖고 넓은 표는 그대로 흐른다. * 폰에서 표가 상자보다 넓은 경우(620 대 368)는 아무것도 안 바뀐다. */ width: 100%; max-width: max-content; overflow-x: auto; background: linear-gradient(270deg, var(--scroll-ground) 55%, transparent) right center / 26px 100% no-repeat local, linear-gradient(270deg, var(--line-strong) 0 1px, transparent 1px) right center / 100% 100% no-repeat scroll, linear-gradient(270deg, rgba(255, 255, 255, .1), transparent) right center / 24px 100% no-repeat scroll; } /* 위 주석이 예고한 사고가 실제로 났다 — "패널 밖에 두는 표가 생기면 그 자리에서 덮개 색을 다시 준다. 안 맞추면 그늘이 안 꺼진다." 종목 페이지의 표 셋은 `.panel` 안이 아니라 `.stock-section`에 맨몸으로 선다. 그런데 덮개는 `--panel`(#0d1420)을 칠하고 실제 지면은 `--bg`(#070b12)라, 가리기는커녕 오른쪽 끝에 **지면보다 밝은 26px 블록**을 그렸다(실측 2026-09-06). 패널 밖의 표는 지면색으로 덮는다. */ /* **`:not(.panel) >`는 쓰면 안 됐다** (2026-09-06, 내가 만든 회귀를 되돌린다). 그 선택자는 직계 부모만 본다. 그런데 표는 대개 패널 안 한 겹 더 들어간 자리에 선다 — `/kr`의 `#kridx-body > .table-scroll`이 그렇다. 패널 안인데도 걸려서 덮개가 지면색(`--bg`, 더 어두움)을 패널 위에 칠했고, 운영자가 본 "거래대금 오른쪽의 검은 그림자"가 그것이다. CSS로 "패널 안이 아님"은 조상 검사라 표현할 수 없다. 표현할 수 없는 것을 선택자로 흉내 내는 대신, 실제로 패널 밖인 자리만 이름으로 적는다. */ .stock-section .table-scroll { --scroll-ground: var(--bg); } /* 표가 판의 둥근 모서리를 **뚫고 나오던 것** (운영자 제보 2026-09-07: "테이블 오른쪽 왼쪽 상단이 사각형 꼭짓점이 뚫고나와서 뾰족한 느낌이야"). 머리 칸(`th`)은 세로로 붙어 다녀야 해서 `position: sticky`에 **불투명한 면**을 깔고 있다(실측 라이브 `/kr`: `background: rgb(13,20,32)` · `z-index: 1`). 그 면은 사각형인데 판은 `border-radius: 16px`에 `overflow: visible`이라, 머리 칸이 판의 곡선 위를 덮어 모서리가 각지게 보인다. 판을 `overflow: hidden`으로 막으면 안 된다 — 그 순간 판이 스크롤 컨테이너가 되어 머리 칸이 페이지가 아니라 판에 들러붙고, 판은 표만큼만 높아서 **붙는 기능 자체가 사라진다.** 자르는 일은 이미 자르고 있는 쪽에 맡긴다. `.table-scroll`은 `overflow-x: auto`라 두 축을 모두 자르는 상자다 — 위 두 모서리만 둥글게 하면 머리 칸이 그 곡선에 맞춰 잘린다. 아래 두 모서리는 각진 채로 둔다: 그 아래는 푸터가 덮고 있어 둥글게 하면 마지막 줄만 깎인다. `- 1px`은 판의 테두리다. 표는 그 안쪽에서 시작하므로 곡선도 한 겹 안쪽이다. */ .panel > .table-scroll:first-child, /* **숨은 상태 칸 뒤도 처음이다.** `:first-child`는 DOM 순서를 보는데, 상태 칸은 값이 오면 `hidden`이 될 뿐 사라지지 않는다. 그래서 표 앞에 상태 칸을 둔 판만 이 규칙에서 빠져 각진 꼭짓점이 남아 있었다(자 실측: `/crypto` `#cderiv-wrap`). `+`는 바로 뒤 하나만 잡으므로, 판 중간의 다른 표까지 깎지 않는다. */ .panel > .state-block[hidden] + .table-scroll { border-top-left-radius: calc(var(--r-md) - 1px); border-top-right-radius: calc(var(--r-md) - 1px); } /* 상태 칸이 처음 설 때도 판 모서리에 닿는다. 자기 반경(`--r-md`)을 그대로 쓰면 판의 안쪽 곡선(`--r-md - 1px`)보다 작아서 꼭짓점이 곡선 밖으로 나온다 — 실측 `/us` `#dcc-state`: 판 안쪽 15 · 자식 10. 네 모서리를 다 준다. 값이 오면 이 칸은 숨으므로, 아래 모서리가 보이는 때는 "이것만 서 있는" 순간뿐이고 그때는 아래도 판의 모서리다. */ .panel > .state-block:first-child { border-radius: calc(var(--r-md) - 1px); } /* ===== FOMC 점도표 ========================================================= * 점 하나가 위원 한 사람이다. 같은 금리에 여러 명이면 가로로 흩어 놓는다 — * 겹쳐 찍으면 8명과 1명이 같아 보이고, 그 수가 이 그림의 전부다. */ /* viewBox 폭(520)을 min-width와 같게 잡는 것이 요점이다. SVG 안의 글자는 * user unit이라 그림이 줄면 같이 줄어드는데, 폰에서 12px 라벨이 7px로 * 렌더되면 typography 테스트는 통과하면서 화면에서만 안 읽힌다. 좁으면 * 줄이지 말고 `.table-scroll` 안에서 가로로 흐르게 둔다(넓은 표와 같은 방식). * 위로도 660에서 멈춘다 — 안 막으면 데스크톱에서 높이가 650px을 넘는다. */ .dotplot { width: 100%; min-width: 520px; max-width: 660px; height: auto; display: block; margin: 0 auto; } .dotplot .dp-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; } .dotplot .dp-dot { fill: var(--accent); fill-opacity: .85; } .dotplot .dp-median { stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; } .dotplot .dp-axis { fill: var(--faint); font: 600 var(--fs-xs)/1 var(--num); font-variant-numeric: tabular-nums; } .dotplot .dp-year { fill: var(--muted); font: 650 var(--fs-xs)/1 var(--num); font-variant-numeric: tabular-nums; } .dp-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; color: var(--faint); font-size: var(--fs-xs); } .dp-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 5px; } .dp-legend b { display: inline-block; width: 10px; height: 2px; background: var(--ink); margin-right: 5px; vertical-align: middle; } .dots-summary, .rx-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 14px; margin: 0 0 var(--sp-4); padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); } .dots-summary span, .rx-summary span { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; } .dots-summary strong, .rx-summary strong { color: var(--ink); font: 750 21px/1.1 var(--num); font-variant-numeric: tabular-nums; } .dots-summary small, .rx-summary small { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; } /* ===== 시장 금리 기대 ======================================================= * 막대 하나가 목표범위 한 칸이고, 길이가 그 칸에 실린 확률이다. 점도표가 점의 * 개수로 말한다면 이쪽은 길이로 말한다 — 같은 화면에 두 문법을 두는 것이 * 의도다. 하나는 위원 전망이고 하나는 시장 쪽 답이라 섞이면 안 된다. * * 색은 가장 높은 칸에만 준다. 열 칸을 같은 채도로 칠하면 "어디가 유력한가"가 * 사라지는데, 이 카드를 여는 이유가 그 한 칸이다. */ .rx-horizon + .rx-horizon { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .rx-head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-2); color: var(--ink); font: 650 var(--fs-sm)/1.3 var(--sans); } .rx-n { margin-left: auto; color: var(--faint); font: 600 var(--fs-xs)/1 var(--num); font-variant-numeric: tabular-nums; } .rx-dist { display: grid; gap: var(--sp-1h); margin: 0; padding: 0; list-style: none; } /* 라벨과 값은 글자폭만큼만 먹고 나머지를 막대가 가진다. 360px에서 라벨 * "3.50–3.75%"(약 62px)와 값(약 26px)을 빼도 막대에 200px 넘게 남는다. */ .rx-row { display: grid; grid-template-columns: minmax(0, auto) 1fr minmax(0, auto); align-items: center; gap: var(--sp-2); } .rx-range, .rx-pct { color: var(--muted); font: 600 var(--fs-xs)/1.2 var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; } .rx-pct { min-width: 4ch; text-align: right; } .rx-track { height: 10px; background: var(--line); border-radius: 2px; overflow: hidden; } .rx-track i { display: block; height: 100%; background: var(--accent); opacity: .4; } .rx-top .rx-track i { opacity: 1; } .rx-top .rx-range, .rx-top .rx-pct { color: var(--ink); font-weight: 700; } /* 각주는 flex다. 이 고지는 한 줄을 통째로 갖는다 — 앞의 두 조각(날짜·출처 * 링크)과 같은 줄에 서면 길이가 제각각이라 줄이 삐뚤어 보인다(운영자 지적 * 2026-09-06, 데스크톱 실측: 날짜 332.8 · 링크 118 · 이 문장 456.5가 한 줄). */ .rx-derived { flex-basis: 100%; margin: 0; color: var(--faint); font-size: var(--fs-xs); } /* `.panel`은 테두리만 주고 여백은 안 준다 — 표를 담는 섹션은 셀 패딩이 * 대신해 왔지만, 맨 텍스트를 담는 이 넷은 글자가 테두리에 붙는다. */ #fed-digest .panel, #fomc-statement .panel, #fomc-dots .panel, #rate-expectations .panel { padding: var(--sp-4); } /* 그리고 그 넷은 각주 여백을 **빼야** 한다. * * `.panel .panel-footer`는 판이 여백을 안 주는 것을 전제로 `--panel-inset`을 * 스스로 얹는다(console.css). 위 네 섹션은 판이 이미 여백을 갖고 있어서 각주만 * 두 번 먹었다 — 실측(2026-09-06, 1464px): 본문 104 · 각주 121로 17px 어긋나고, * 각주 위 구분선도 본문보다 짧게 시작했다. 네 섹션 모두 같은 증상이라 같이 편다. */ #fed-digest .panel > .panel-footer, #fomc-statement .panel > .panel-footer, #fomc-dots .panel > .panel-footer, #rate-expectations .panel > .panel-footer { padding-left: 0; padding-right: 0; } /* ===== 의장 발언 요약 ====================================================== * 요약 한 줄 밑에 근거가 된 원문 문장이 붙는다. 인용을 접거나 숨기지 않는다 — * 대조할 수 없는 요약은 우리가 내놓지 않기로 한 것이라서, 근거는 요약과 같은 * 화면에 있어야 한다. */ .digest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .digest-list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; } .digest-list .bullet { color: var(--accent); font: 650 13px/1.6 var(--num); font-variant-numeric: tabular-nums; text-align: center; } .digest-ko { margin: 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.65; } .digest-quote { margin: var(--sp-1h) 0 0; padding: var(--sp-1h) 0 var(--sp-1h) 12px; border-left: 2px solid var(--line-strong); color: var(--faint); font-size: var(--fs-xs); line-height: 1.6; } /* 영어 모드의 위계 뒤집기. 클래스를 언어가 아니라 **역할**로 나눈다 — 앞에 오는 * 줄이 크고, 뒤따르는 줄이 작다. 인용 표시(왼쪽 선)는 원문이 앞에 와도 유지한다. * 그것이 우리가 쓴 문장이 아니라 문서의 문장이라는 표시이기 때문이다. */ .digest-quote.is-lead { color: var(--ink); font-size: var(--fs-sm); line-height: 1.65; } .digest-ko.is-aside { margin-top: var(--sp-1h); color: var(--faint); font-size: var(--fs-xs); line-height: 1.6; } .digest-head { margin: 0 0 var(--sp-1h); color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; } /* "이게 최신이다" 한 줄. 제목 줄 바로 아래에 작게 — 값이 아니라 **날짜에 대한 주석**이라 값과 같은 크기로 서면 안 된다. */ /* 줄의 몸 — 기호 옆 한 칸. 한국어와 원문이 이 안에서 위아래로 선다. */ .fomc-line { min-width: 0; flex: 1 1 auto; } /* FOMC 성명의 한국어 — 원문 위에 선다. 의장 발언 요약과 같은 위계다: 한국어가 뜻을 지고, 바로 아래 영어가 근거로 남는다. 영어 화면에는 안 선다. */ .fomc-ko { margin: 0 0 4px; color: var(--ink); font-size: var(--fs-sm); line-height: 1.6; } .digest-latest { margin: 0 0 14px; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.5; } .digest-tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs); font-weight: 650; } .digest-head a { color: var(--ink); text-decoration: none; font-weight: 550; } .digest-head a:hover { color: var(--accent); text-decoration: underline; } .digest-machine { margin: 0 0 14px; padding: 8px 12px; border-left: 2px solid var(--accent); background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; } /* ===== FOMC 성명 변경점 ===================================================== * 뺀 문장과 더한 문장을 나란히 둔다. 색만으로 구분하지 않는다(−/+ 기호를 * 함께 쓴다) — 색을 못 보는 사람에게도 어느 쪽이 새 문장인지 보여야 한다. */ .fomc-head { display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline; margin: 0 0 12px; } .fomc-figure { display: flex; flex-direction: column; gap: 2px; } .fomc-figure span { color: var(--faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; } .fomc-figure strong { color: var(--ink); font: 650 17px/1.2 var(--num); font-variant-numeric: tabular-nums; } .fomc-figure em { color: var(--faint); font-style: normal; font-size: var(--fs-xs); } .fomc-reading { margin: 16px 0; padding: 14px 0; border-block: 1px solid var(--line); } .fomc-reading-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1h) 12px; } .fomc-reading-head strong { color: var(--ink); font-size: var(--fs-sm); } .fomc-reading-head span { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 750; } .fomc-reading p { margin: 8px 0 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.65; } .fomc-reading small { display: block; margin-top: var(--sp-1h); color: var(--faint); font-size: var(--fs-xs); line-height: 1.5; } .fomc-dissent { margin: 0 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; } .fomc-changes-title { margin: 18px 0 10px; color: var(--ink); font-size: var(--fs-sm); } .fomc-context { margin: var(--sp-2) 0 var(--sp-3); color: var(--faint); font-size: var(--fs-xs); line-height: 1.55; } .fomc-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .fomc-changes li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: var(--fs-sm); line-height: 1.65; } .fomc-changes .mark { font: 650 13px/1.5 var(--num); font-variant-numeric: tabular-nums; text-align: center; } .fomc-changes .removed .mark { color: var(--red); } .fomc-changes .added .mark { color: var(--green); } .fomc-changes .removed p { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; margin: 0; } .fomc-changes .added p { color: var(--ink); margin: 0; } /* 바뀐 낱말. 배경 블록 대신 색+굵기를 쓴다 — 낱말 뒤 공백이 조각에 딸려 * 오는데, 배경을 깔면 그 공백까지 칠해져서 경계가 한 칸씩 밀려 보인다. */ .fomc-changes .chg { font-weight: 700; } .fomc-changes .removed .chg { color: var(--red); } .fomc-changes .added .chg { color: var(--green); } .fomc-same { margin: 12px 0 0; color: var(--faint); font-size: var(--fs-xs); } #us-ipo .panel { overflow: hidden; border-radius: 16px; } .usipo-summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); } .usipo-summary strong { color: var(--ink); font-size: var(--fs-sm); } .usipo-summary span { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; } .usipo-table tbody tr { transition: background-color 140ms ease; } .usipo-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .usipo-stage { display: inline-flex; padding: 4px 9px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--muted); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; } .usipo-stage.is-listing-near { background: var(--accent-soft); color: var(--accent-text); } @media (max-width: 620px) { .dots-summary, .rx-summary { grid-template-columns: 1fr auto; } .dots-summary small, .rx-summary small { grid-column: 1 / -1; } .usipo-summary { align-items: flex-start; flex-direction: column; } } .accessible-table { border-collapse: collapse; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;} .accessible-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .accessible-table th, .accessible-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } .accessible-table th:first-child, .accessible-table td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--panel); } /* 표 머리는 줄바꿈이 일어나는 자리다("예상 연율 HL · Binance · Bybit"). `/1`이면 두 줄이 서로 붙어 읽히지 않는다 — 한 줄 보장 라벨에만 쓸 값이다. */ .accessible-table th { color: var(--faint); font: 650 9px/1.35 var(--num); font-variant-numeric: tabular-nums; text-transform: uppercase; } .sector-panel .table-scroll { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .notice-line { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; } .tradingview-host { min-height: 620px; height: 620px; } .tradingview-host .tradingview-widget-container, .tradingview-host .tradingview-widget-container__widget { width: 100%; height: 620px; } /* 위젯 바닥과 각주 사이에 숨 쉴 자리를 준다. * `margin-top`이 0이라 각주의 윗선이 iframe 바닥에 **딱 붙어** 있었다 * (실측 2026-08-31: 간격 0px, 412·1280px 모두). 히트맵은 제 바닥에 색 눈금 * 띠를 그리므로, 붙어 있으면 `TradingView` 링크가 그 띠에 얹힌 것처럼 읽힌다. */ .tv-panel > .panel-footer, .correlation-panel > .panel-footer { margin: var(--sp-3) 16px 0; padding-bottom: 11px; } .tv-panel > .panel-footer { margin-inline: 0; } .correlation-panel { padding: 16px; } .corr-table th, .corr-table td { position: static !important; min-width: 74px; text-align: center !important; background: transparent !important; } .corr-cell { color: var(--ink); font: 700 10px/1 var(--num); font-variant-numeric: tabular-nums; } .select-label { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 10px; } .select-label select { min-height: 32px; padding: 4px 24px 4px 8px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); } .methodology { padding: 30px 0 0;} .methodology h2 { margin: 0 0 18px;} .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .method-grid article { min-height: 120px; padding: 20px; background: var(--panel); } .method-grid article + article { border-left: 1px solid var(--line); } .method-grid strong { font-size: 12px; } .method-grid p { margin: 8px 0 0; color: var(--muted); font-size: var(--fs-sm); } /* 왼쪽 3px 색 띠를 걷었다 — 생성 UI의 가장 흔한 표식이고, 이 블록은 장식이 필요한 자리가 아니다. 구획은 헤어라인 전체 테두리가 만든다. **내용은 한 글자도 건드리지 않는다** — FRED 서면 승인(인용문+접근일)과 KRX 전제조건이 이 블록 안에 산다. */ .attribution { margin-top: var(--sp-4); padding: var(--sp-3) var(--panel-inset); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--muted); font: 10.5px/1.6 var(--num); font-variant-numeric: tabular-nums;} /* 출처 한 줄과 그 약관 링크는 **한 짝**이다. 예전에는 짝 안쪽이 8px, 짝 사이가 3px이라 근접성이 거꾸로였다 — 링크가 제 출처가 아니라 **아래** 출처에 붙어 보였다(2026-08-30 운영자 지적, /us 1280px 실측). 안쪽을 붙이고 짝과 짝 사이를 벌린다. */ .attribution p { margin: 0; color: var(--ink); } /* 링크 없이 글만 잇따르는 자리(FRED의 두 번째 고지, 링크가 없는 출처)는 따로 떼어 준다 — 안 그러면 서로 다른 출처가 0px으로 붙는다. */ .attribution p + p { margin-top: var(--sp-3); } .attribution a { display: inline-block; margin: 0 var(--sp-2) var(--sp-3) 0; color: var(--accent);} .attribution a:last-child { margin-right: 0; } .attribution ul { margin: var(--sp-1h) 0 0; padding-left: 18px; } .attribution li + li { margin-top: 5px; } @media (max-width: 1050px) { .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mast-nav { display: flex; margin-left: auto; } .mast-nav .nav-chip:not(.mobile-essential) { display: none; } .mast-actions { margin-left: 0; } .site-search { --search-rest: 132px; --search-open: 208px; } .hero h1 { font-size: clamp(42px, 8vw, 72px); } .weekend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .masthead { min-height: 56px; padding: 9px 12px; } .brand { min-width: 0; } .brand small, .connection-badge span { display: none; } .connection-badge { margin-right: 2px; } .shell { padding: 30px 12px 64px; } .hero { grid-template-columns: 1fr; gap: 25px; padding-bottom: 30px; } .hero-meta { justify-self: stretch; padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--line); } .hero-copy { font-size: 13px; } .overview { padding-top: 34px; } .jump-nav { top: 56px; margin-bottom: 35px; } .risk-strip, .weekend-disclaimer { margin-left: 0; } .weekend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-grid, .comparison-grid { grid-template-columns: 1fr; } .metric-card { min-height: 340px; padding: 16px; } .dashboard-section { margin-bottom: 42px; scroll-margin-top: 105px; } /* 번호 칩을 접는다. 안 접으면 제목만 칩 폭(30px)+간격(12px)만큼 밀리고 부제는 위 규칙으로 0에 붙어, 제목이 제 설명글보다 42px 오른쪽에서 시작한다 (≤430px에서는 칩이 27px이라 39px). 실측 2026-08-30 /us 8곳·/kr 1곳에서 −39px. 폰에서 번호는 길잡이가 아니라 장식이고, 그 장식 때문에 본문이 밀리는 편이 손해다. */ .dashboard-section > .section-copy { margin-left: 0; } .section-heading > .section-index { display: none; } .section-heading { align-items: flex-start; flex-wrap: wrap; } /* **칩을 숨겼으면 칩 자리도 없어야 한다.** 바로 위에서 번호 칩을 접어 * 놓고 여기 둘만 칩 폭(42px)만큼 들여쓰기를 그대로 갖고 있었다. 위 주석이 * `.section-copy`에 대해 내린 판정과 같은 것을 이 둘이 못 받은 것이다. * * `width: 100%`와 겹치면 그 들여쓴 만큼이 그대로 화면 밖으로 나간다. * 실측(라이브 `/kr`, 2026-09-07): `#krl-board`가 폭 351px에 왼쪽 여백 * 39px이라 오른끝 402 — 문서가 **412·390·360·320px 전부에서 12px씩 * 가로로 밀렸다.** 운영자 제보: 로고와 제목 첫 글자가 잘려 보였다. */ /* 아래 여백 0이라 바로 다음 표/판에 **그대로 얹혀** 있었다(운영자 지적 * 2026-09-07: "거래대금 시가총액 있는 바가 너무 테이블에 딱붙어있고"). * 폰에서 이 바는 전폭 52px짜리 블록이므로 제 뒤를 스스로 띄워야 한다. */ /* 폰에서는 진짜 탭 줄이 된다 — 칸이 넷으로 갈리고 밑줄이 그 칸을 통째로 긋는다. 사이 여백은 0이어야 칸 경계와 밑줄 경계가 같은 선에 선다. (글자 크기는 tokens.css가 정한다 — 그쪽이 뒤에 실려 이긴다.) */ .segmented { order: 3; width: 100%; margin-left: 0; margin-bottom: var(--sp-3); gap: 0; } .segmented button { flex: 1; padding: 0 var(--sp-1) 9px; } .select-label { margin-left: 0; } .sector-row { grid-template-columns: minmax(96px, .5fr) minmax(120px, 1.4fr) 56px; gap: 7px; } .tradingview-host, .tradingview-host .tradingview-widget-container, .tradingview-host .tradingview-widget-container__widget { min-height: 500px; height: 500px; } .method-grid { grid-template-columns: 1fr; } .method-grid article + article { border-left: 0; border-top: 1px solid var(--line); } } @media (max-width: 560px) { /* 폰에서는 블러를 끄고 불투명면으로 간다 — 모바일 GPU에서 가장 비싼 효과이고, 1순위 사용자의 기기가 거기다. 보이는 결과는 거의 같다. */ .jump-nav { background: var(--bg); backdrop-filter: none; } /* 손가락이 닿는 크기 (2026-09-04 감사). 높이의 주인은 이제 알약 하나다 — `min-height`로 클램프하던 옛 규칙은 `.site-search-input`에 높이를 다시 거는 규칙이 아래에 또 있어서 필요했던 것이고, 그 규칙과 함께 사라졌다. */ /* 알약의 손가락 높이는 셸 절(이 파일 아래쪽)에서 정한다 — 거기 760px 블록이 뒤에 서므로 여기서 44를 적으면 그쪽 38에 진다. */ /* 마스트헤드: 뷰 탭 4개가 390px에서 넘친다 — 탭바만 가로 스크롤로 흡수하고 API 칩은 내린다. 로고·언어·테마 버튼은 항상 보인다. */ .masthead { gap: 10px; } .mast-nav { display: none; } .mast-actions { flex-shrink: 0; } /* 쉬는 폭은 "종목·코인 검색"이 **들어가는** 폭이다. 옛 판은 34px로 접었다가 플렉스가 늘려 96px에서 멎었고, 좁은 기기에서는 70px이라 안내 문장이 21.4px 잘려 있었다(실측 360·320px). 접는 것이 목적이 아니라 열리는 것이 목적이므로, 쉬는 상태부터 문장이 온전히 서게 둔다. 열린 폭은 화면을 넘지 않는 선에서 가장 넓게. `45vw` 상한이 좁은 기기를 스스로 따라 내려온다 — 320px에서 열린 폭 144, 그때 줄의 합은 로고 90 + 알약 144 + EN 44 + 여백 24 = 302… 가 아니라 쉬는 폭 124로 서 있다가 열릴 때만 144가 되고, 그 순간 남는 자리는 296 - 274 = 22px이다. */ /* 폭도 마찬가지로 셸 절에서 한 벌만 정한다. */ /* 검색 중에 탭바를 접던 규칙은 걷었다(2026-09-07). 그것은 펼쳐진 검색칸이 같은 플렉스 줄에서 자리를 빼앗아 로고가 눌리던 때의 보상이었는데, 이제 열린 폭을 레인이 미리 잡으므로 빼앗을 자리가 없다. 게다가 그 사이 `.view-switch`는 머리말이 아니라 **화면 바닥의 알약**이 되었다 — 접으면 자리를 내주는 것이 아니라 검색하는 동안 이동 수단이 사라진다. */ /* 자동완성 목록은 검색창이 아니라 **마스트헤드**에 맞춘다. * * 목록은 `.site-search`(position: relative)에 `right: 0`으로 붙어 있었고 폭은 * `min(342px, 100vw - 24px)`였다. 좁은 화면에서 검색창은 화면 가운데쯤 있는데 * 거기서 342px을 왼쪽으로 뻗으니 화면 밖으로 나갔다 — 375px 실측에서 패널 * 왼쪽이 -136px, 종목명 칸이 -62px이라 "제이알글로벌리츠"가 "로벌리츠"로 * 잘려 보였다(운영자 실기기 제보 2026-08-27). * * `.site-search`의 position을 풀면 절대 위치의 기준이 `.masthead`가 된다 * (sticky + backdrop-filter라 이미 컨테이닝 블록이다). 그러면 좌우를 화면에 * 맞출 수 있고, `top: 100%`도 검색창이 아니라 마스트헤드 아래가 되어 목록이 * 헤더에 걸치지 않는다. */ .site-search { position: static; } .site-search-panel { left: 12px; right: 12px; width: auto; } .view-switch { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .view-switch::-webkit-scrollbar { display: none; } .view-tab { padding: var(--sp-1h) 9px; font-size: 11.5px; } .kro-price { font-size: 24px; } /* 컬럼 많은 표는 셀을 찌그러뜨리는 대신 컨테이너 안에서 가로 스크롤한다. */ #ptr-body table, #krp-body table, #kre-body table, #kridx-body table, #ev-body table, #krev-body table { min-width: 620px; } /* 첫 열은 sticky라 스크롤하면 숫자 열이 그 밑으로 미끄러져 들어간다. 배경이 같고 경계가 없으면 "6,742.74"의 왼쪽이 먹혀 "2.74"만 남은 것처럼 보인다 — 스크롤이 아니라 데이터가 깨진 것으로 읽혔다(안드로이드 실측 2026-08-26). 오른쪽 모서리에 선과 그림자를 줘 "고정 열 아래로 지나간다"로 읽히게 한다. collapse에서는 셀 box-shadow가 그려지지 않아(크롬 실측) 좁은 화면에서만 separate로 바꾼다 — 셀은 아래 테두리뿐이라 spacing 0이면 그림이 같다. 스크롤이 생기지 않는 넓은 화면에는 이 블록 자체가 없다. */ .accessible-table { border-collapse: separate; border-spacing: 0; } .accessible-table th:first-child, .accessible-table td:first-child { border-right: 1px solid var(--line-strong); box-shadow: 10px 0 12px -4px rgba(0, 0, 0, .7); } } @media (max-width: 430px) { .hero h1 { font-size: clamp(30px, 9.5vw, 42px); } .summary-grid { grid-template-columns: 1fr 1fr; } .summary-card { min-height: 118px; padding: 13px 12px; } .summary-value { font-size: 19px; } .summary-meta { left: 12px; } /* `.section-index`는 760px 아래에서 접히므로 여기서 폭을 줄일 것이 없고, 제목은 --fs-lg 하나로 간다(16px은 스케일 밖이었다). */ /* ≤430px에서 칩이 27px이라 39px로 다시 잡던 줄이었다. 칩이 접힌 마당에 들여쓸 것이 없으므로 0으로 통일한다(위 760px 블록과 같은 이유). */ .segmented, .select-label { margin-left: 0; } .sector-name code { display: none; } .connection-badge { display: none; } .weekend-grid { grid-template-columns: 1fr; } } @media (max-width: 360px) { .masthead { gap: 7px; } .brand { flex: 0 0 auto; } .nav-chip { padding-inline: 7px; font-size: 10px; } } /* 전역 `.01ms` 킬을 걷었다(2026-09-04). * * 이 저장소에는 컴포넌트별 reduced-motion 블록이 **15개** 있고 전부 사려 깊다 — * 테이프는 멈추되 손으로 밀 수 있게 열어 두고, 게이지·틱·도넛을 각각 다룬다. * 그런데 `*` + `!important` 한 줄이 그 위를 덮어 **값이 바뀌었다는 신호까지** * 죽이고 있었다. 움직임을 줄여 달라는 요청은 "정보를 없애 달라"가 아니다. * 스크롤 점프만 남기고 나머지는 15개 블록에 맡긴다. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } } /* --- 법적 고지 링크 -------------------------------------------------------- */ .site-footer { padding: 22px 0 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;} .site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; } .site-footer a { color: var(--muted); font-size: var(--fs-sm); text-decoration: none; } /* 손가락 자리 — 24px이 바닥이다. * * 390px 실측: `/us` 112곳 · `/kr` 43 · 홈 12의 링크가 19~21px로 서 있었다. * 전부 flex 항목이라 글자 높이가 곧 상자 높이였다. WCAG 2.2 AA(2.5.8)의 * 24x24를 바닥으로 잡는다 — 44는 AAA이고, 이 밀도에서 44는 목록을 두 배로 * 늘린다. 문장 속 인라인 링크는 2.5.8이 스스로 예외로 두므로 건드리지 않는다. * * `min-height`나 `display: flex`가 아니라 **대칭 안쪽 여백**을 쓴다. flex로 * 바꾸면 긴 꼬리말 링크가 한 줄에 갇혀 줄바꿈이 사라지고, `min-height`만으로는 * 글자가 상자 위쪽에 붙는다. 여백은 둘 다 피하고 기준선 정렬도 지킨다. * * 부모를 재 보니 대부분 공짜다 — 꼬리말 줄은 이미 31~418px이고 `.ev-who`는 * 23px이라 1px 자란다. 값을 치르는 곳은 `.ev-meta` 한 줄뿐이다(19 → 25). */ .ev-who a, .ev-meta a, .site-footer a, .panel-footer a, .metric-card footer a, .cliq-head a, .attribution a, /* 종목 페이지 표의 원문 링크. 실측(2026-09-06, 운영 /stock/…): **21×15px**로 공시 줄마다 서 있었다 — 005930에 12개, NVDA에 21개. 이 저장소가 정한 바닥은 24×24(WCAG 2.2 AA 2.5.8)이고, 홈은 위반이 0인데 이 페이지만 뚫려 있었다. `.doc-link`는 페이지 안 `