@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
 /* 글꼴 — 라틴/숫자는 모노, 한글은 Pretendard 가 받는다(스택 순서가 규칙이다) */
 --mono:"IBM Plex Mono","Pretendard Variable",Pretendard,ui-monospace,Menlo,monospace;
 --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
 /* 바탕·패널 */
 --bg:#080705; --pnl:#100e0b; --hd:#0e0c08; --edge:#3d2f10;
 --ln:#2a2419; --ln2:#1c1a15; --grid:#141210; --row:#100e0b;
 /* 글자 6계조 */
 --t1:#f2e9d8; --t2:#d8cfbc; --t3:#8f8878; --t4:#6e6858; --t5:#4f4a3d; --t6:#3a342a;
 /* 앰버 5계조 — 순서 인코딩(스테이지·막대·미터)에 쓴다. 본문 글자에는 쓰지 않는다. */
 --am:#ffb400; --amHi:#ffd24d; --amMid:#8a6100; --amDim:#5a4410; --amDeep:#241b06;
 --sel:#171307; --hov:#11100c;
 /* 상태 */
 --up:#22c55e; --dn:#ff4747; --warn:#f29300; --ma:#4f8fd8; --maLn:#2a5f8a;

 /* ── 치수 ── 언락 기준으로 통일(2026-08-23 지시). 세 데스크가 이 값을 쓴다.
    ⚠ 여기 숫자를 바꾸면 세 화면이 같이 움직인다 — 그게 이 파일의 존재 이유다.
      한 화면만 다르게 하고 싶으면 그 페이지에서 덮되, 왜 다른지 주석을 남길 것. */
 /* 앱바 — 2026-09-15 지시: "포트폴리오처럼 다 통일해놔 · 30% 정도 위아래로 크게".
    36px(포트폴리오) × 1.3 = 46.8 → 47px. 언락·펀딩·차익은 32px 였다.
    ⚠ 치수뿐 아니라 **여백·간격·배지·제목까지** 포트폴리오 쪽으로 맞춘다 — 그게 '통일' 이다.
    ⚠⚠ web/desk.css 는 **이 상수의 생성물**이다. 거기를 고치면 다음 빌드가 덮는다
      (2026-09-15 에 내가 그렇게 한 번 헛수고했다). 값은 여기서만 바꾼다. */
 --dk-bar:47px;      /* 앱바 */
 --dk-barpad:16px;   /* 앱바 좌우 여백(포트폴리오 기준 · 나머지는 9px 였다) */
 --dk-bargap:10px;   /* 앱바 요소 간격(포트폴리오 기준 · 나머지는 8px 였다) */
 --dk-stat:26px;     /* 상태바·푸터 */
 --dk-sec:30px;      /* 우 레일 섹션 헤더 */
 --dk-srch:31px;     /* 검색칸(파이어차트 .fkb-cmd 에서 온 치수) */
 --dk-lhd:36px;      /* 좌 레일 헤더 */
 --dk-row:51px;      /* 좌 레일 행 */
 --dk-th:30px;       /* 중앙 표 헤더 */
 --dk-tr:38px;       /* 중앙 표 행 */
 --dk-cap:22px;      /* 좌 레일 각주 */
 --dk-padx:10px;     /* 레일 가로 패딩 */
 --dk-padt:14px;     /* 표 가로 패딩 */
 /* 좌·우 레일 폭 — 언락 기준(256/500 · ≥2200 360/560 · ≤1699 220/400). 세 데스크의 그리드가
    이 값을 읽는다(2026-09-24 지시: 상단·좌 레일 규격을 언락으로 통일). 포트폴리오는 지시서
    수치 400 을 따로 박고 있었다 — 그 자리가 곧 '한쪽만 자라는' 통로였다. */
 --dk-rail:256px;    /* 좌 레일 폭 */
 --dk-rail2:500px;   /* 우 레일 폭 */
 /* 상단 칩(세그먼트·기간·분기·더보기 · 언락 차트 머리의 돌아가기/파이어차트 버튼) — 파이어차트 상단 버튼
    (FIRE_HTML `.fkbar .fkb-b` · 🔥 스캐너)과 **같은 크기**다(2026-09-24 지시: "상단의 작은 박스는 파이어차트
    스캐너와 같은 사이즈"). 값은 여기 하나고 `tests/desk_chip_twin_test.py` 가 FIRE_HTML 쪽과 맞댄다. */
 --dk-chip:26px;              /* 칩 높이 */
 --dk-chippad:0 9px;          /* 칩 좌우 여백 */
 --dk-chipfont:600 11.5px/1 var(--mono);
 --dk-chipsp:-.2px;           /* 칩 자간 */
 --dk-chipgap:6px;            /* 칩 안 아이콘·글자 간격 */
}
/* 레일 폭 사다리 — 미디어쿼리 값도 여기 하나다. 페이지 CSS 에 숫자를 다시 적지 말 것. */
@media (min-width:2200px){ :root{ --dk-rail:360px; --dk-rail2:560px; } }
@media (max-width:1699px){ :root{ --dk-rail:220px; --dk-rail2:400px; } }

/* ⚠ portfolio(13F)는 `--f-*` 이름으로 200곳 넘게 쓰고 있다. 이름을 일괄 치환하면 그 페이지만
   통째로 위험해진다 — **별칭으로 잇는다.** 값의 출처는 위 한 곳뿐이고, 이름만 둘이다.
   새 코드에서는 `--f-*` 를 쓰지 말 것(여기 별칭은 기존 코드 때문에 남는다). */
:root{
 --f-mono:var(--mono); --f-sans:var(--sans);
 --f-bg:var(--bg); --f-hd:var(--hd); --f-bd:var(--edge); --f-bin:var(--ln);
 --f-gap:var(--ln2); --f-grid:var(--grid); --f-row:var(--row);
 --f-sel:var(--sel); --f-hov:var(--hov);
 --f-t1:var(--t1); --f-t2:var(--t2); --f-t3:var(--t3);
 --f-t4:var(--t4); --f-t5:var(--t5); --f-t6:var(--t6);
 --f-am:var(--am); --f-am-d:var(--amMid); --f-am-dd:var(--amDim);
 --f-up:var(--up); --f-dn:var(--dn);
}

/* 데스크 공통 골격 — 세 페이지가 같은 뼈대를 쓴다. */
.dk-shell{display:flex;flex-direction:column;height:100vh;min-height:0;overflow:hidden;}
.dk-bar{height:var(--dk-bar);flex:0 0 var(--dk-bar);display:flex;align-items:center;
 gap:var(--dk-bargap);padding:0 var(--dk-barpad);
 background:var(--hd);border-bottom:1px solid var(--ln);}
/* 앱바 안의 배지·제목 — 네 데스크가 같은 값을 쓴다(2026-09-15 통일).
   ⚠ 이 클래스를 마크업에 달지는 않았다. 각 페이지가 자기 이름(.usBadge·.frBadge·
     .abBadge·.f-badge)을 여러 곳에서 쓰고 있어 일괄 치환이 더 위험하다. 대신
     **각 페이지 규칙이 이 값을 var 로 읽는다** — 값의 출처는 여기 하나다. */
:root{ --dk-badge:700 12px/20px var(--mono); --dk-badgepad:0 7px;
       --dk-ttl:700 15px/1.35 var(--sans); --dk-ttlsp:.1em; }
.dk-stat{height:var(--dk-stat);flex:0 0 var(--dk-stat);display:flex;align-items:center;gap:14px;
 padding:0 var(--dk-padx);background:var(--hd);border-top:1px solid var(--ln);}
.dk-col{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;}
.dk-sep{background:var(--ln);}

/* ⚠ 여기서 **크기도 모양(반경)도 정하지 않는다.** 호출부 클래스가 정한다 —
     사이트에 원형 칩(.s-logo·.ct-coin·.av)과 각진 칩(차익거래 .acIco, 핸드오프 지시)이
     같이 있고, 둘 다 맞다. 공용이 한쪽을 강제하면 다른 쪽이 !important 로 되받고
     그게 다음 사고가 된다(BAR_CSS 주석의 그 규칙). */
.ntico{position:relative;display:inline-flex;align-items:center;justify-content:center;
 overflow:hidden;flex:none;vertical-align:middle;line-height:1;
 font:800 9px/1 var(--mono,ui-monospace,monospace);}
.ntico>i{font-style:normal;font:inherit;letter-spacing:-.04em;}
/* 이미지는 글자 **위**를 덮되, **뜬 뒤에야** 보인다(.on 은 onload 가 단다).
   ⚠ 이 순서가 규칙 R4 의 전부다. 처음엔 img 에 배경색을 깔아 글자를 덮게 했는데,
     `loading=lazy` 라 화면 밖 아이콘은 요청조차 안 나가고 그 img 가 배경만 칠한 채
     글자를 가렸다 — 스크롤 전까지 **색 네모**만 보인다.
   ⚠ 실패하면 img 가 통째로 사라진다(fail). DOM 을 바꾸지 않으므로 칸이 안 비고
     레이아웃도 안 흔들린다. */
.ntico>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
 opacity:0;}
.ntico.on>img{opacity:1;background:inherit;}
.ntico.on>i{visibility:hidden;}