/* 본문 글꼴을 Pretendard 로 (2026-09-02).
 *
 * 여태 본문이 Inter 였다. 그런데 Inter 에는 한글이 없어서, 이 화면의 글자
 * 대부분이 <시스템 글꼴>로 떨어지고 있었다 — 윈도우면 맑은 고딕이다. 한글이
 * 거의 전부인 화면인데 정작 한글은 아무도 고르지 않은 글꼴로 나오고 있었던 셈이다.
 *
 * 파일을 저장소에 두고 우리가 내준다. CDN 을 쓰려면 CSP 의 style-src·font-src
 * 를 넓혀야 하는데, 이 프로젝트는 계속 좁혀 온 쪽이다 — md.codelib.app 에서
 * ngl.js 를 <바깥에서 받지 않는다>고 정한 것과 같은 판단이다. font-src 'self'
 * 그대로 통과한다.
 *
 * 가변 글꼴 한 파일(약 2MB)로 굵기 전체를 덮는다. 굵기마다 따로 받으면 셋만
 * 써도 2.3MB 이고, 92조각으로 잘라 받는 길은 파일이 92개 늘어난다. 처음 한 번
 * 받으면 캐시되므로 한 파일이 낫다 — 첫 방문의 무게가 걸리면 그때 조각내면 된다.
 *
 * swap 이라 글꼴이 오기 전에도 글은 바로 보인다.
 *
 * SIL Open Font License 1.1. 사본은 fonts/OFL.txt 에 함께 둔다. */
@font-face{
  font-family:'Pretendard Variable';
  /* ?v= 는 글꼴 파일을 바꿀 때 올린다 — fonts/ 는 하루 캐시된다(MarketWebConfig). */
  src:url('/market/fonts/PretendardVariable.woff2?v=20260902') format('woff2-variations');
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  /* 기본 스크롤바·드롭다운 같은 브라우저가 그리는 것들도 같이 뒤집으라고
     알린다 (2026-09-19). 이 한 줄이 없으면 다크에서 <select> 의 펼친 목록만
     하얗게 뜬다. data-theme 이 늘 매겨지므로 light dark 가 아니라 한쪽씩
     못 박는다 — 기기가 다크여도 사용자가 라이트를 골랐으면 라이트다. */
  color-scheme:light;

  --paper:#F2F6FB;
  --surface:#FFFFFF;
  --ink:#141C2B;
  --muted:#5B6B84;
  --faint:#8A99B2;
  --line:#E4EAF2;
  --line-2:#EEF2F8;

  --up:#F5503C;    --up-soft:#FFEDEA;    --up-line:#FBC9C1;
  --down:#356CF0;  --down-soft:#E9F0FE;  --down-line:#C2D5FB;
  --flat:#0BAE7A;  --flat-soft:#E1F6EE;  --flat-line:#B3E6D3;

  /* 강조색 하나 (2026-09-03).
     이 화면은 색이 전부 <뜻>이었다 — 빨강은 올랐다, 파랑은 내렸다, 초록은
     보합. 그래서 화면에 <이 앱의 색>이라 할 것이 없었고, 고른 탭도 눌린 별도
     시세와 같은 말투로 말했다. 실제로 관심종목 별이 --up 이라, 담아둔 별이
     <올랐다>는 빨강으로 켜지고 있었다.

     그 색을 <먹빛>으로 둔다. 남색보라와 자주를 거쳐 여기로 왔다 — 사용자가
     골랐다(2026-09-03). 시세가 색을 셋이나 쥐고 있는 화면에서 넷째 색을
     들이면, 그 색이 아무 뜻도 없다는 것을 사람이 따로 배워야 한다. 뜻이 없는
     자리는 뜻이 없는 색으로 두는 편이 조용하고, 색은 시세에만 남는다.

     그래도 토큰은 남긴다. 값이 --ink 와 같을 뿐 <역할>은 다르기 때문이다 —
     여기 적힌 넷은 시세가 아니라 조작이다. 나중에 색을 주고 싶어지면 이
     한 줄만 고치면 되고, 그때 별과 초점 고리가 같이 따라온다.

     var(--ink) 라 어두운 테마의 --ink 로 저절로 뒤집힌다 — 따로 덮어쓸 것이
     없다. 쓰는 자리는 넷뿐이다 — 고른 탭, 켜진 별, 키보드 초점, 비중 막대. */
  --accent:var(--ink);
  --accent-ring:rgba(20,28,43,.22);

  --ma10:#E8A33D;  --ma20:#7B61FF;  --ma60:#0BAE7A;  --ma120:#C92A2A;
  /* 200일선은 파란색 — 사용자 지정 (2026-10-16). 20일선의 보라(#7B61FF)와
     갈리도록 붉은 기 없는 파랑으로. */
  --ma200:#1F6FEB;

  --bb:#8B93A1;    --bb-fill:#98A2B3;

  --ext-up:#12A150;    --ext-down:#3BA9E0;

  --cloud-up:#F5503C;  --cloud-down:#356CF0;

  --c-kr:#F5503C; --c-us:#356CF0; --c-jp:#0BAE7A;
  --c-eu:#E8A33D; --c-de:#7B61FF; --c-gb:#5B6B84;

  /* 모서리 반경을 셋으로 못 박는다 (2026-09-02).
     전에는 12·10·8·7·6·5·3px 일곱 가지가 섞여 있었다. 규칙이 없으면 눈이
     <정돈 안 됐다>고 읽는다. 카드·조작·작은 것 셋이면 족하다. */
  /* 곳곳에 같은 곡선을 쓰면 화면 전체가 한 사람 손에서 나온 것처럼 움직인다.
     supanova 지침의 서명 커브를 그대로 쓴다 — 끝에서 아주 강하게 감속해
     <튕겨 앉는> 느낌이 난다. 그 지침은 linear·ease-in-out·즉시 변화를 금한다. */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);

  --r-lg:14px;
  --r:10px;
  --r-sm:7px;

  /* 글자 크기를 여덟 단으로 못 박는다 (2026-09-03).
     반경에 한 일을 글자에도 한다. 세어 보니 서른 가지가 섞여 있었다 —
     .6 .62 .64 .66 .68 .7 .72 .74 .76 .78 .8 .82 .83 .84 .85 .86 .88 .9
     .95 .96 1 1.04 1.05 1.06 1.1 1.14 1.35 1.75 1.9 2.05.
     이 중 .82 .83 .84 .85 .86 다섯은 통틀어 0.6px 안에 몰려 있었다. 눈에
     보이는 차이가 아니라 그때그때 손이 간 값이다. 이런 것이 쌓이면 화면이
     <여러 사람이 조금씩 손댄 것>처럼 읽힌다.

     작은 쪽은 촘촘하고(1.09~1.16배) 큰 쪽은 성기다(1.23~1.30배). 표와 라벨이
     빽빽한 화면이라 11·12·13px 이 저마다 할 일이 있고, 제목 쪽은 벌어져야
     제목으로 보인다. 곧은 등비수열이 아닌 것은 그래서다.

     --t-sm 이 이 화면의 일꾼이다 — 실측했을 때 13px 짜리 글자가 929개로 제일
     많았고 그게 표 안 글씨였다. 그 값을 척도에 맞춰 반올림하지 않고 그대로
     한 단으로 앉혔다.

     이름과 콜론은 붙여 쓴다. 보기 좋으라고 --t-xs 처럼 공백을 넣어 세로줄을
     맞췄더니, 배포된 것을 확인하는 grep 이 여덟 단 중 셋만 찾아내고 나머지
     다섯을 <정의 없이 쓰는 것>이라고 답했다. CSS 로는 유효해 화면은 멀쩡했고,
     그래서 더 나빴다 — 검사가 제 서식에 속으면 그 검사는 아무것도 안 지킨다.

     ── 단의 값을 한 번 내렸다 (2026-09-03) ──
     처음에는 --t-md 를 .95, --t-lg 를 1.1, --t-2xs 를 .66 으로 잡았다. 그랬더니
     스물한 곳이 커졌는데 하필 <제일 먼저 보는 넷>이었다 — 탭 +1.12px, 타일 값
     +0.96px, 차트 값 +0.80px, 계좌 숫자 +0.64px. 사용자가 바로 <너무 커졌다>고
     했다. 척도를 세우는 일은 값을 고르게 하는 것이지 화면을 키우는 것이 아니다.

     세 단을 내려 그 넷을 원래 자리로 돌린다. 이제 커지는 곳은 셋뿐이고 모두
     +0.64px 이하다. 척도는 있던 화면 위에 얹는 것이라, 가운뎃값은 <보기 좋은
     수>가 아니라 <그 자리에 이미 있던 수>로 잡아야 한다. */
  --t-2xs:.64rem;  /* 10.2px — eyebrow · 배지 · 꼬리표 */
  --t-xs:.72rem;   /* 11.5px — 라벨 · 각주 · 단위 */
  --t-sm:.82rem;   /* 13.1px — 표 · 보조 본문 (제일 많이 쓰인다) */
  --t-md:.88rem;   /* 14.1px — 본문 · 탭 · 단추 */
  --t-lg:1.05rem;  /* 16.8px — 소제목 · 타일 값 · 계좌 숫자 */
  --t-xl:1.35rem;  /* 21.6px — 부-주인공 (손익 · 수익률) */
  --t-2xl:1.75rem; /* 28px   — 폰의 주인공 · 상세창 값 */
  --t-3xl:2.05rem; /* 32.8px — 주인공 (평가금액) */

  /* 아주 옅은 그림자 한 겹. 흰 카드가 흰 바닥 위에 <그려진> 것이 아니라
     <놓인> 것으로 보이게 하는 것이 이 한 줄이다. 진하면 촌스러워지므로
     테두리를 대신할 만큼만 준다. */
  /* 옆으로 밀리는 표의 가장자리 그늘. 그림자와 달리 바닥이 아니라 <잘린 자리>를
     말하는 것이라 따로 둔다. */
  --shade:rgba(20,28,43,.13);

  --shadow-1:0 1px 2px rgba(20,28,43,.04), 0 1px 3px rgba(20,28,43,.035);
  --shadow-2:0 2px 6px rgba(20,28,43,.06), 0 8px 20px rgba(20,28,43,.05);

  /* 제목은 영문·숫자를 Bricolage 로 쓰고 한글은 Pretendard 로 떨어진다 —
     Bricolage 에는 한글이 없다. 순서가 그 일을 한다. */
  --display:'Bricolage Grotesque','Pretendard Variable',system-ui,sans-serif;
  --body:'Pretendard Variable',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0E1420;
  --surface:#161E2E;
  --ink:#E7EDF7;
  --muted:#93A2BA;
  --faint:#6B7A93;
  --line:#24304A;
  --line-2:#1C2740;
  --up-soft:#2A1714;   --up-line:#5C2B22;
  --down-soft:#101F3D; --down-line:#22407A;

  --bb:#6E7789;    --bb-fill:#5A6478;
  --ext-up:#2DBE6C;    --ext-down:#5CC3F0;

  /* --accent 는 var(--ink) 라 위의 --ink 하나로 같이 뒤집힌다. 고리만 색이
     아니라 투명도라 여기서 다시 적는다 — 어두운 바닥에서는 검은 halo 가
     아무것도 안 그린다. */
  --accent-ring:rgba(231,237,247,.30);

  --ma120:#FF6B6B;
  --ma200:#5B9BFF;

  --shade:rgba(0,0,0,.5);

  /* 어두운 바닥에서는 옅은 그림자가 아무 일도 안 한다. 검정을 더 진하게. */
  --shadow-1:0 1px 2px rgba(0,0,0,.28), 0 1px 3px rgba(0,0,0,.22);
  --shadow-2:0 2px 6px rgba(0,0,0,.34), 0 8px 20px rgba(0,0,0,.3);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{
  min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;

  /* overscroll-behavior-y:contain 을 여기 뒀다가 걷어냈다 (2026-09-19 저녁).
     브라우저의 당겨서 새로고침을 끄려던 줄인데, 안드로이드 크롬에서 들어가자마자
     페이지가 위아래로 전혀 안 움직인다는 보고가 왔다(사용자 실측). PC 와
     390px 틀에서는 재현이 안 됐고, 같은 배포에서 전역으로 바뀐 것이 이 줄뿐이라
     먼저 뺀다. 그 결과 맨 위에서 당기면 브라우저 새로고침도 같이 걸렸다 —
     그것은 화면이 멎는 것보다 낫다. 2026-10-28 에 당겨서 새로고침 자체를
     걷어내고 상단 바 버튼으로 바꿨다. 이 줄은 다시 안 넣는다. */

  /* 한글은 낱말 안에서 끊으면 안 읽힌다 — "프로그램 매" / "매" 처럼 갈린다.
     여태 몇 군데에만 손으로 붙어 있었는데, 손으로 붙이는 것은 새 화면을
     만들 때마다 잊는다. 여기 한 번에 건다. 영문에는 아무 영향이 없다
     (keep-all 은 CJK 에만 듣는다). 긴 낱말이 좁은 칸을 넘칠 때를 위해
     break-word 를 짝으로 둔다. */
  word-break:keep-all;
  overflow-wrap:break-word;

  /* 폰에서 글자를 우리가 정한 크기로 내보낸다 (2026-09-03).
     Android 크롬은 <짧은 한 줄짜리 블록>을 본문이라 여겨 글자를 저 혼자 키운다
     (font boosting). 환전·실현손익 머리글이 10.2px 로 적혀 있는데 화면에는
     20px 쯤으로 나왔고, 수급 카드도 같이 부풀어 있었다. 글자가 많은 계좌 카드는
     안 건드리므로, 같은 화면 안에서 어떤 칸만 두 배가 된다.

     이걸 끄지 않으면 어떤 크기를 적어도 폰에서는 그 크기가 아니다 — 배수가
     기기와 폭에 따라 달라지니 척도를 세운 의미가 없어진다. PC 는 원래 이런
     일을 안 하므로 아무 영향이 없다. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.2rem}

.topbar{
  position:sticky; top:0; z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--line);

  padding-bottom:.75rem;
}


.topbar:has(> .key-banner:not([hidden])){padding-bottom:0}

.topbar-in{display:flex;align-items:center;gap:1rem;
  padding-top:1rem;padding-bottom:.6rem;flex-wrap:wrap}
.topbar h1{font-family:var(--display);font-size:var(--t-lg);white-space:nowrap}
.tabs{display:flex;gap:.15rem;margin-right:auto;flex-wrap:wrap}
.tabs button{
  border:0;background:none;color:var(--muted);
  font-family:var(--body);font-size:var(--t-md);font-weight:500;
  padding:.4rem .75rem;border-radius:var(--r);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease),
    transform .09s var(--ease);
}
.tabs button:hover{background:var(--line-2);color:var(--ink)}
/* 강조색을 크게 쓰는 자리는 여기 하나다. 글자색은 --surface 라 밝은 테마에선
   흰 글자, 어두운 테마에선 검은 글자로 저절로 뒤집힌다. */
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--surface);font-weight:600}
.ctl{display:flex;align-items:center;gap:.6rem}
#clock{color:var(--faint);font-size:var(--t-xs)}
/* 시계에 꼬리표를 붙인다 (2026-09-19). 숫자만 있으면 장 시각으로 읽힌다.
   .ctl 의 gap 이 .6rem 이라 그대로 두면 꼬리표가 달모양 단추와 시계 사이
   한가운데에 떠서 어느 쪽 것인지 모르게 된다 — 음수로 당겨 시계에 붙인다. */
.clock-lbl{color:var(--faint);font-size:var(--t-xs);margin-right:-.3rem;
  white-space:nowrap}

section{margin-bottom:1.75rem}
.sec-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.sec-head h2{font-family:var(--display);font-size:var(--t-lg);font-weight:700;
  letter-spacing:-.01em;line-height:1.35}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-2xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);
}
.sr-count{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);margin-left:auto}
/* 카드 높낮이 셋 (2026-09-03).
   재보니 화면의 카드 마흔한 장이 전부 똑같은 한 모양이었다. 다 같은 높이로
   놓이면 <무엇이 주고 무엇이 거드는지>를 종이가 말해 주지 못해, 읽는 사람이
   글자를 다 읽고 스스로 정해야 한다.

   .raised  — 그 화면의 주인공 한 장. 그림자를 키워 바닥에서 띄운다.
   .card    — 보통.
   .quiet   — 곁들이는 것. 그림자를 걷고 테두리를 옅게 해 바닥에 눕힌다.

   한 화면에 .raised 는 하나뿐이어야 한다. 둘이면 둘 다 주인공이 아니다. */
.card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.card.raised{box-shadow:var(--shadow-2)}
.card.quiet{box-shadow:none;border-color:var(--line-2)}
.card-pad{padding:1rem}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.up-t{color:var(--up)}
.down-t{color:var(--down)}
.cols{display:grid;grid-template-columns:1fr;gap:1rem}  /* 한 칸 — 아래 <PC 도 폰 구성으로> */

/* 짝지은 카드의 높이를 맞춘다 (2026-09-13, 사용자 실측: 크립토 4줄
 * 151px · 환율 6줄 210px, 59px 어긋남).
 *
 * 그리드 칸(section)은 기본값(align-items:stretch)으로 이미 짝의 키
 * 만큼 늘어나 있었다 — 안 늘어난 것은 그 안의 .card 였다. section 을
 * 세로 flex 로 두고 .card 를 flex:1 로 주면, section 이 이미 받은
 * 여분의 높이가 .card 로 그대로 내려간다. .chart-cols(차트+표)는 안
 * 건드린다 — 거기는 높이가 안 맞는다는 말이 나온 적이 없다. */
.cols > section{display:flex;flex-direction:column}
.cols > section > .card{flex:1}

/* ── PC 도 폰 구성으로 (2026-09-19, 사용자 — 「모바일과 동일한 구성으로
 * 창 비율만 맞춰서 바꿔줘」) ──────────────────────────────────
 *
 * 여태 이 파일에는 <폭이 넓으면 옆으로 벌리는> 규칙이 여섯 있었다 —
 * 두 칸 격자(.cols·.chart-cols·.yield-cols), 요약 스물한 칸의 7×3 벽,
 * 계좌 요약 여섯 칸 한 줄, 빈 칸에 남는 폭을 몰아 주는 .tbl-fit, 주문
 * 폼의 두 칸 한 줄. 전부 걷고 폰의 배치를 폭과 상관없이 쓴다: 카드는 한
 * 줄에 하나씩 세로로, 요약은 옆으로 미는 한 줄, 폼은 칸마다 한 줄.
 *
 * <비율>만 창을 따른다 — .wrap 의 1200px, 글자 여덟 단, 줄 높이, 카드
 * 여백은 PC 값 그대로다. 폰(560px 아래)의 <작게> 규칙(여백 .8rem · 글자
 * 한 단 아래 · nowrap)은 아래 @media 에 그대로 남아 있다. 배치는 같고
 * 크기만 다르다.
 *
 * 폭 경계에 남긴 것은 셋뿐이고 전부 <칸이 물리적으로 좁을 때>의 것이다 —
 * td.bar-pct 의 막대(900px), 기업 개요 4열(720px), 경제 달력의 꼬리표
 * (700px). 종목을 누르면 덮개(#detail)로 여는 쪽은 app.js 의 DETAIL_MQ 가
 * 같은 날 <항상>으로 못 박았다. */
.chart-cols{display:grid;grid-template-columns:1fr;gap:1rem}

/* 옵션 만기 목록은 추이 차트 아래 (2026-09-17 폰 규칙을 09-19 부터 늘 쓴다).
 *
 * 09-13 에 #chain-table 을 .chart-cols 로 행사가 차트 옆에 묶고
 * .tbl-narrow(width:fit-content)를 붙였다. 그런데 .chart-cols 가 한 칸이면
 * <옆>이 사라지고 표만 차트와 추이 차트 사이에 끼어 남는다. 거기에
 * fit-content 까지 겹쳐, 실측 408px 폰에서 카드 안쪽 339.8px 중 표가
 * 236.1px 만 쓰고 103.7px(30.5%)이 빈 채로 세로 스크롤 상자만 서 있었다.
 *
 * 표를 카드 폭까지 돌려주고, 자리도 추이 차트 아래(09-13 이전 자리,
 * margin-top:.7rem)로 둔다. .chart-cols 를 display:contents 로 지워
 * 카드의 세로 flex 에 네 덩이를 직접 세우고 order 로 차례를 준다. */
#sec-chain > .card{display:flex;flex-direction:column}
#sec-chain .chart-cols{display:contents}
#sec-chain > .card > .chart-head:first-child{order:0}
#sec-chain #chain-strike{order:1}
#sec-chain > .card > .chart-head:not(:first-child){order:2}
#sec-chain #cs-svg{order:3}
#sec-chain #chain-table{order:4;width:auto;max-width:100%;margin-top:.7rem}
/* .tbl 만 넓히고 그 안의 table 을 auto 로 두면 상자만 카드 폭이고 줄은
 * 여전히 221px 에서 끊긴다 — 빈 자리가 상자 밖에서 안으로 옮겨올 뿐이다.
 * .tbl-narrow 를 붙이기 전(09-13 이전)처럼 100% 로 되돌린다. */
#sec-chain #chain-table table{width:100%}

.badge{display:inline-block;padding:.1rem .4rem;border-radius:var(--r-sm);
  font-family:var(--mono);font-size:var(--t-2xs)}
.badge.stale{background:var(--up-soft);color:var(--up)}
.badge.na{background:var(--line-2);color:var(--faint)}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{
  border:0;background:var(--surface);color:var(--muted);
  font-family:var(--mono);font-size:var(--t-xs);padding:.28rem .55rem;cursor:pointer;
}
.seg button + button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--line-2);color:var(--ink);font-weight:700}
.seg button:hover{color:var(--ink)}

#opt-exp{border:0;border-radius:0;overflow:visible;gap:.35rem;flex-wrap:wrap}
#opt-exp button{
  border:1px solid var(--line);border-radius:var(--r);padding:.34rem .62rem;
  font-size:var(--t-xs);
}
#opt-exp button + button{border-left:1px solid var(--line)}
#opt-exp button[aria-pressed="true"]{border-color:var(--faint);background:var(--line-2);color:var(--ink)}
#opt-exp button:hover{border-color:var(--faint)}

.icon-btn{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:var(--r);width:30px;height:26px;cursor:pointer;font-size:var(--t-sm);
}
/* 새로고침 버튼이 받아 오는 동안 — 안의 화살표만 돌고 다시 못 누른다
   (2026-10-28). 버튼째 돌리면 테두리까지 돌아서 화살표만 돌린다. 화살표는
   SVG 라 축이 그림 한가운데(transform-origin 50%)에 정확히 놓인다 — 글자였을
   땐 중심이 흔들렸다. 버튼을 flex 로 두어 그림이 버튼 가운데에 앉는다. */
/* 버튼 자체는 다른 .icon-btn 과 똑같이 둔다(사용자: 모양은 전과 동일하게).
   크기를 여기서 못 박는다 — 아래 전역 svg{width:100%} 가 이 그림도 버튼 폭까지
   키워 26px 버튼 밖으로 삐져나왔다(28px, 실측). 12px 는 전에 쓰던 글자 ↻
   (13.1px 글꼴)가 눈에 보이던 크기와 비슷하다. */
#refresh-btn .rf-ico{display:block;margin:0 auto;width:12px;height:12px;transform-origin:50% 50%}
#refresh-btn[aria-busy="true"]{cursor:progress;color:var(--faint)}
#refresh-btn[aria-busy="true"] .rf-ico{animation:rf-spin 1s linear infinite}
@keyframes rf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ #refresh-btn[aria-busy="true"] .rf-ico{animation:none} }
.ind-bar{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--surface);color:var(--faint);
  border-radius:20px;padding:.22rem .6rem;font-size:var(--t-xs);cursor:pointer;
  font-family:var(--body);
}
.chip[aria-pressed="true"]{border-color:var(--faint);background:var(--line-2);color:var(--ink);
  font-weight:600}

/* 관심종목은 표가 아니라 <목록>이다 (2026-09-02).
 *
 * 한 줄에 별 하나와 이름 하나뿐인데 표가 폭을 다 먹어, 여섯 줄이 첫 화면의
 * 3분의 1을 빈 자리로 썼다(실측: 이름 칸이 1124px). 화면을 열자마자 보이는
 * 것이 텅 빈 흰 판이면 그 아래 있는 것들이 다 묻힌다.
 *
 * app.js 는 그대로 <tr><td> 를 그리고, 여기서 눕히기만 한다. 머리글은 원래
 * 빈 칸 둘이라 감춰도 잃을 것이 없다. */
#sec-watch table{display:block}
#sec-watch thead{display:none}
#sec-watch tbody{display:grid;gap:.3rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
#sec-watch tbody tr{display:flex;align-items:center;gap:.55rem;
  padding:.42rem .55rem;border-radius:var(--r);min-width:0;
  transition:background .12s ease}
#sec-watch tbody td{border:0;padding:0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-watch tbody td:first-child{flex:none}

/* 요약줄은 격자 하나다 — 스물한 칸을 일곱씩 세 줄로 (2026-09-05).

   묶음으로 나눴던 것을 되돌렸다(까닭은 app.js 의 stripRow 주석에). 이제
   묶음도 이름줄도 없으므로 .strip 이 곧 격자다.

   ── 벽에서 한 줄로 (2026-09-19, <PC 도 폰 구성으로>) ──
   1120px 위에서 7×3 벽으로 못 박던 규칙을 걷고, 폰이 쓰던 <옆으로 미는
   한 줄>을 폭과 상관없이 쓴다. 칸 폭은 PC 벽의 최소값(150px)을 그대로
   두고, 560px 아래는 아래 @media 가 128px 로 줄인다.

   PC 는 마우스 휠이 가로로 안 구르므로 스크롤바를 가늘게 남긴다 — 폰은
   손가락으로 밀어서 감춘다(아래 @media). 스물한 칸 중 화면에 드는 것은
   1200px 에서 일곱쯤이고 나머지는 밀어서 본다 — 폰과 같은 손버릇이다. */
.strip{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.6rem;min-width:0;
  overflow-x:auto;scrollbar-width:thin;padding-bottom:.25rem;
  -webkit-overflow-scrolling:touch}
.strip .tile{flex:0 0 150px}

/* 오른쪽 끝이 잘렸다는 표시 (2026-09-19, 폰 실측 뒤).
   폰에서는 셋째 칸이 반쯤 잘려 보이는데, 잘린 것이 <더 있다>인지 <여기까지다>
   인지 구별이 안 됐다. 스크롤바가 없어서다(아래 @media 가 감춘다) — 감춘
   대신 다른 신호를 줘야 한다.

   흐림은 .strip 이 아니라 감싼 칸에 건다. .strip 은 스크롤 상자라 거기에
   ::after 를 두면 흐림이 내용과 함께 옆으로 밀려 나간다.

   bottom 을 --sb-h 만큼 띄우는 것은 PC 때문이다. 그 폭에서는 가는 스크롤바가
   띠 아래에 남는데, 흐림이 그 위를 덮으면 잡을 수 있는 것을 못 잡는 것으로
   보인다. 높이는 CSS 가 모르므로 app.js 의 syncStripFade 가 재서 넣는다.
   폰에서는 스크롤바가 없어 0 이 되고, 그러면 이 줄은 아무 일도 안 한다.

   transparent → var(--paper) 는 요즘 브라우저가 알파를 미리 곱해 섞으므로
   중간이 회색으로 뜨지 않는다. 다크에서도 --paper 하나만 갈리면 되므로
   색을 두 벌로 적지 않는다. */
.strip-wrap{position:relative}
.strip-wrap::after{content:"";position:absolute;top:0;right:0;
  bottom:var(--sb-h,0px);width:24px;pointer-events:none;
  background:linear-gradient(to right,transparent,var(--paper));
  transition:opacity .18s var(--ease)}
/* 끝까지 밀었으면 더 볼 것이 없다 — 흐림이 남아 있으면 계속 밀게 된다. */
.strip-wrap.at-end::after{opacity:0}

/* ── PC 는 다시 벽으로 (2026-09-24 밤, 사용자 「PC에서는 전처럼 시장 요약을
   3열로 다 나오게 만들어줘」) ──
   09-19 에 걷었던 09-05 의 벽을 PC 폭에만 되살린다. 그때는 스물한 칸이라
   7×3 이었고, 스물두 칸일 때는 한 줄 여덟(8·8·6), 같은 밤 삼성전자 선물을
   빼서 다시 7×3 이다(사용자 「삼전 선물을 빼고 7*3 형태로」). 열 수는 app.js 가
   칸 수에서 셈해 --strip-cols 로 넣는다 — STRIP 을 늘리고 줄여도 세 줄이
   유지된다. 1120px 아래 PC 폭에서 여덟 칸을 박으면 칸이 90px 까지 좁아져
   값이 잘리므로, 거기서는 09-05 처럼 150px 씩 채워 줄이 느는 벽이다 —
   그래도 옆으로 밀 일은 없다.
   경계 701px 는 app.js 의 stripMedia(max-width:700px)와 짝이다. 그 아래는
   폰 칸 목록을 쓰고 옆으로 미는 한 줄 그대로다.
   오른쪽 흐림(<더 있다>)은 벽에서는 뜻이 없으니 CSS 에서 끈다. bindStripFade 가
   밀 자리 0 을 보고 at-end 를 붙이긴 하지만, 그 스크립트가 늦거나 멎으면 여덟째
   줄의 오른쪽 24px 이 흐려진 채 남는다(09-24 밤 시험 쪽에서 실측). */
@media (min-width:701px){
  .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    overflow-x:visible;padding-bottom:0}
  .strip-wrap::after{display:none}
}
@media (min-width:1120px){
  .strip{grid-template-columns:repeat(var(--strip-cols,8),minmax(0,1fr))}
}

.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.65rem .75rem;cursor:pointer;
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease),
    transform .09s var(--ease);
}
.tile:hover{border-color:var(--faint);box-shadow:var(--shadow-2)}
.tile .t-nm{font-size:var(--t-xs);color:var(--faint);margin-bottom:.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-px{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;
  letter-spacing:-.015em}
.tile .t-ch{font-family:var(--mono);font-size:var(--t-xs)}

/* 자리는 값이 오기 전에도 잡아둔다. 선이 뒤늦게 들어오며 칸을 밀어 올리면
   그 순간 손가락이 딴 종목을 누른다. */
.tile .t-spark{position:relative;height:28px;margin-top:.45rem;
  opacity:0;transition:opacity .4s var(--ease)}
.tile .t-spark.on{opacity:1}

/* 선의 색은 타일이 정한다 (2026-09-04).

   전에는 선이 <이 창 동안 올랐나>로 스스로 칠했다. 그러면 오늘 +1.64% 인
   코스피에 파란 선이 붙는다 — 한 달로는 -0.05% 라서다. 한 칸 안에서 숫자와
   선이 서로 다른 말을 하면 보는 사람은 <틀렸다>고 읽는다.

   이제 paintStrip 이 타일에 up/down 을 붙이고 선은 그것을 물려받는다. 선·면·
   점이 전부 currentColor 라 색 하나만 정하면 셋이 같이 따라온다. 시세가
   10초마다, 선이 10분마다 갱신돼도 색이 어긋날 자리가 없다.

   방향이 없을 때(값이 없거나 보합)는 아무 색도 주지 않는다 — 물려받은
   글자색으로 조용히 그려진다. */
.tile.up .t-spark{color:var(--up)}
.tile.down .t-spark{color:var(--down)}
.tile .t-spark svg{display:block;width:100%;height:100%;overflow:visible}
.tile .t-line{fill:none;stroke:currentColor;stroke-width:1.4;
  vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.tile .t-fill{fill:currentColor;opacity:.1;stroke:none}
.tile .t-dot{position:absolute;left:100%;width:5px;height:5px;border-radius:50%;
  background:currentColor;transform:translate(-60%,-50%);
  box-shadow:0 0 0 2px var(--surface)}

.acc-sum{display:grid;grid-template-columns:repeat(2, minmax(0, max-content));
  gap:.95rem 2.2rem;justify-content:start}

/* 901px 위에서 여섯 칸 한 줄로 벌리던 규칙(2026-09-13)은 걷었다
 * (2026-09-19, <PC 도 폰 구성으로>). 폰과 같은 두 칸이다 — 평가금액이
 * 제 줄을 혼자 쓰고, 나머지 다섯이 둘씩 세 줄로 선다. */
.acc-sum div{display:flex;flex-direction:column;gap:.15rem}
.acc-sum .acc-wide{grid-column:1/-1}
.acc-sum dt{font-size:var(--t-xs);color:var(--muted)}
.acc-sum dd{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;
  letter-spacing:-.015em}

/* 여섯 칸이 다 같은 크기면 눈이 어디부터 볼지 못 정해 여섯을 다 읽고 나서야
   얼마인지 알게 된다. 평가금액 하나를 크게, 손익·수익률을 그 다음으로 —
   글자 크기가 곧 <먼저 볼 것>의 차례다 (2026-09-02). */
.acc-sum .acc-hero{grid-column:1/-1;margin-bottom:.1rem}
.acc-sum .acc-hero dd{font-size:var(--t-3xl);line-height:1.06;font-weight:760;
  letter-spacing:-.035em}
.acc-sum .acc-key dd{font-size:var(--t-xl);letter-spacing:-.025em}

/* 매도대금(정산 전) 줄 (2026-10-28) — 여섯 칸보다 한 단 작게, 시장 이름은
   본문 글꼴로. 큰 숫자 글꼴로 여러 묶음을 한 줄에 적으면 평가금액과 겨룬다. */
.acc-sum .acc-mkts dd{font-size:var(--t-sm);font-weight:600;letter-spacing:0;
  display:flex;flex-wrap:wrap;gap:.1rem 0}
.acc-sum .acc-mkts .mkt b{font-family:var(--body);font-weight:600;color:var(--muted)}
.acc-sum .acc-mkts .mkt small{font-size:var(--t-xs);font-weight:500;color:var(--muted)}
.acc-sum .acc-mkts .mkt-sep{color:var(--faint)}

/* 칸 안의 막대 — 이 종목이 계좌에서 차지하는 몫 (2026-09-03).
   보유종목 표에서 <무엇이 내 계좌를 채우고 있나>는 평가금액 여덟 자리를
   여섯 줄 눈으로 견줘야 알 수 있었다. 자릿수가 비슷하면 사실상 못 읽는다.

   따로 요소를 만들지 않고 가상 요소로 그린다 — 줄이 10초마다 다시 그려지는
   자리라 노드가 늘면 그만큼 매번 만들고 버린다. 너비는 --w 하나로 들어온다.
   숫자가 오른쪽에 붙는 칸이라 막대도 오른쪽에서 자란다. 색은 방향이 아니라
   크기를 말하므로 오르내림 색을 쓰지 않고 강조색을 옅게 깐다. */
td.bar{position:relative}
td.bar::after{content:'';position:absolute;right:0;bottom:2px;
  width:var(--w,0);height:3px;border-radius:2px;
  background:var(--accent);opacity:.4}

/* 변동률처럼 <방향이 있는> 값의 막대 (2026-09-13). td.bar 는 방향이
 * 없는 값(계좌 비중)이라 크기만 말하고 색은 늘 강조색 하나다. 변동률은
 * 오르내림이 뜻이라 그 규칙을 그대로 못 쓴다 — 가운데(0%)에 선을 긋고
 * 오르면 오른쪽·내리면 왼쪽으로 자라며, 색도 오르내림(up/down)을 쓴다.
 * (금속·원자재 표에 막대 카드를 합치며 addChangeBars() 가 붙인다.) */
td.bar-pct{position:relative}
td.bar-pct::before{content:'';position:absolute;left:50%;top:3px;bottom:3px;
  width:1px;background:var(--line)}
/* 칸 바닥에 얇게 (2026-09-13, 사용자 실측: 양수 막대가 오른쪽 정렬
 * 숫자를 덮었다). td.bar 가 이미 같은 문제를 bottom:2px·height:3px 로
 * 풀어 뒀다 — 글자와 같은 줄이 아니라 그 아래에 붙이면, 좌우 어느
 * 쪽으로 자라든 숫자를 안 덮는다. 가운데(0%)에서 좌우로·오르내림 색은
 * 그대로 둔다. */
td.bar-pct::after{content:'';position:absolute;bottom:2px;height:3px;
  width:var(--w,0);border-radius:2px}
td.bar-pct.up::after{left:50%;background:var(--up)}
td.bar-pct.down::after{right:50%;background:var(--down)}

/* 폰에서는 이 칸이 좁아 막대가 글자와 카드 끝에 닿는다 (2026-09-17,
 * 사용자가 기타자산 화면의 변동 칸을 짚었다 — 「기타 자산은 UI 최적화만
 * 진행해서 사용하고」).
 *
 * 실측 408px 에서 변동 칸은 84.7~94.4px 뿐이다. 0% 선(::before)은 칸
 * 높이를 통째로 가로지르므로 오른쪽 정렬된 숫자 한가운데를 지난다 —
 * 잰 세 표(크립토·환율·금속·원자재)의 <모든> 줄에서 그랬다. 그리고
 * 제일 큰 막대는 --w 가 50%(addChangeBars) 라 칸의 오른쪽 끝, 곧 카드
 * 안쪽 테두리에 딱 붙는다(여백 0px).
 *
 * 선을 막대 띠 안으로 내려 눈금처럼 만들고, 막대는 숫자가 끝나는 자리
 * 까지만 자라게 0.88 을 곱한다(50% → 44%, 실측 막대 끝 379.2 → 373.5 로
 * 숫자 끝 373.8 과 나란해지고 카드까지 5.7px 남는다). 칸이 넓은 PC
 * (901px 위)는 겹칠 일이 없어 안 건드린다. */
@media (max-width:900px){
  td.bar-pct::before{top:auto;bottom:1px;height:5px}
  td.bar-pct::after{width:calc(var(--w, 0%) * .88)}
}

.kw-quote{display:flex;gap:1rem;flex-wrap:wrap;align-items:baseline;
  padding:.55rem .7rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);margin-bottom:.2rem}
.kw-quote .q-nm{font-size:var(--t-sm);color:var(--muted)}
.kw-quote .q-px{font-family:var(--mono);font-size:var(--t-lg);font-weight:700}
.kw-quote .q-lim{font-family:var(--mono);font-size:var(--t-xs);color:var(--faint)}
.kw-quote button{border:1px solid var(--line);background:var(--surface);
  color:var(--muted);border-radius:var(--r-sm);padding:.12rem .4rem;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-2xs)}
.kw-quote button:hover{color:var(--ink);border-color:var(--faint)}

.frm{display:flex;flex-direction:column;gap:.5rem}
.frm label{display:flex;flex-direction:column;gap:.2rem;
  font-size:var(--t-xs);color:var(--muted)}

.frm label[hidden],.frm [hidden]{display:none}
.frm input,.frm select{
  padding:.46rem .6rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:var(--t-sm)}
.frm input:focus,.frm select:focus{outline:none;border-color:var(--faint);
  box-shadow:0 0 0 3px var(--line-2)}
.frm-row{display:flex;gap:.5rem;align-items:flex-end}
.frm-note{font-size:var(--t-xs);color:var(--faint);line-height:1.45}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r);padding:.44rem .95rem;cursor:pointer;
  transition:background .12s var(--ease),border-color .12s var(--ease),
    transform .09s var(--ease);
  font-family:var(--body);font-size:var(--t-sm);font-weight:600}
.btn:hover{border-color:var(--faint);background:var(--line-2);transform:scale(1.02)}
.btn.ghost{color:var(--muted);font-weight:500}

/* 표 안에 들어가는 작은 단추 (2026-09-10). 보유 줄의 <팔기>가 쓴다 —
 * 줄 높이를 늘리지 않아야 옆 계좌 표와 눈높이가 맞는다. */
.btn.tiny{padding:.12rem .45rem;font-size:var(--t-xs);border-radius:calc(var(--r) - 2px)}
.btn.tiny:disabled{opacity:.4;cursor:not-allowed;transform:none}

.btn.danger{border-color:var(--up-line);background:var(--up-soft);color:var(--up);
  font-weight:700}
.btn.danger:hover{background:var(--up);color:#fff}

/* 못 누르는 단추는 못 누르게 보여야 한다 (2026-09-19).
 *
 * 여태 공통 규칙이 없어 .btn.tiny 만 흐려졌다. 그래서 주문이 잠기면 문구는
 * <주문 잠김>이라고 말하는데 <주문 내기> 단추는 멀쩡한 붉은색 그대로였다 —
 * 글씨와 단추가 서로 다른 말을 했다.
 *
 * :hover 와 :active 는 disabled 에도 그대로 붙는다(이벤트만 안 갈 뿐이다).
 * 그래서 커지고(.btn:hover 의 scale(1.02)), 눌린 척하고(.btn:active 의
 * scale(.98) — 이쪽은 파일 뒤에 있어 특정도를 한 칸 올려야 이긴다),
 * 빨갛게 덧칠된다(.btn.danger:hover). 셋 다 여기서 되돌린다.
 *
 * 색은 흐리기만 한다 — 변종의 제 색은 남겨 둔다. .btn.tiny:disabled 의
 * opacity:.4 가 더 진하고 특정도도 높아 그대로 이긴다. */
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn:disabled:hover,.btn:disabled:active{transform:none;box-shadow:none;
  border-color:var(--line);background:var(--surface)}
.btn.danger:disabled:hover{border-color:var(--up-line);background:var(--up-soft);
  color:var(--up)}

/* 키보드로 다니면 지금까지 아무 표시가 없었다 (2026-09-03).
   단추와 탭이 테두리를 지워 둔 터라 브라우저가 그리던 기본 고리까지 같이
   사라졌고, 그래서 탭 키로는 <지금 어디에 있는지>를 알 수 없었다.

   :focus-visible 이라 마우스로 누를 때는 안 나온다 — 손으로 짚어 누른 자리에
   고리를 그리면 지저분하기만 하다. 키보드로 왔을 때만 브라우저가 켜 준다.
   테두리를 밀어내지 않게 outline 대신 box-shadow 로 얹는다.

   outline 은 요소가 가진 모서리 반경을 저절로 따라간다 — 여기서 반경을 다시
   적으면 초점이 갈 때마다 모양이 바뀐다. */
.tabs button:focus-visible,.btn:focus-visible,.chip:focus-visible,
.seg button:focus-visible,.mini:focus-visible,.icon-btn:focus-visible,
.star:focus-visible,.dt-star:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
.frm input:focus-visible,.frm select:focus-visible,.search:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* 값이 바뀌면 깜빡인다. 그런데 <바뀌었다>만 말하고 <어느 쪽으로>는 말하지
   않았다 — 방향 클래스가 같은 칸에 이미 붙어 있으므로 색만 나눠 주면 된다.
   눈이 숫자를 읽기 전에 색이 먼저 도착한다. */
@keyframes fresh{from{background:var(--line);}to{background:transparent;}}
@keyframes fresh-up{from{background:var(--up-soft);}to{background:transparent;}}
@keyframes fresh-down{from{background:var(--down-soft);}to{background:transparent;}}
.fresh{animation:fresh .5s var(--ease);border-radius:var(--r-sm)}
.fresh.up-t{animation-name:fresh-up}
.fresh.down-t{animation-name:fresh-down}
@media (prefers-reduced-motion:reduce){.fresh{animation:none}}

.chart-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.6rem;flex-wrap:wrap}
.chart-head .seg{margin-left:auto}

.chart-head .seg + .seg{margin-left:0}
.chart-title{font-weight:600}
.chart-px{font-size:var(--t-lg)}
svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.5rem;font-size:var(--t-xs)}

#svg-candle, #optc-svg, #futc-svg, #bndc-svg{touch-action:pan-y}

.kv{display:grid;grid-template-columns:auto 1fr;gap:.32rem .8rem;font-size:var(--t-sm)}
.kv dt{color:var(--faint)}
.kv dd{font-family:var(--mono);text-align:right}
.kv-sep{grid-column:1/-1;border-top:1px solid var(--line-2);margin:.3rem 0}

/* 옆으로 밀리는 표에는 밀린다고 말해 준다 (2026-09-03).
 *
 * 폰에서 보유종목 표는 평균단가에서 잘리고 손익·수익률이 화면 밖에 있다.
 * overflow-x:auto 라 밀리기는 하는데, 잘린 자리에 아무 표시가 없어서 <여기서
 * 끝>인지 <더 있는지>를 알 수가 없었다. 실제로 사용자가 올린 화면에서도 열
 * 셋이 잘려 있었다.
 *
 * 겹으로 깐다. local 두 장은 내용과 함께 움직이는 <덮개>고, scroll 두 장은
 * 가장자리에 붙박인 <그늘>이다. 끝까지 밀면 덮개가 그늘을 가려 사라지고,
 * 가운데로 오면 양쪽에 그늘이 선다 — 자바스크립트 없이 스크롤 위치를 그린다.
 * 맨 아래 var(--surface) 한 겹이 없으면 카드 바탕이 통째로 사라진다
 * (#acc-holdings 는 .card 와 .tbl 이 같은 요소다). */
.tbl{
  overflow-x:auto;
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) 0 0/28px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 40%, transparent) 100% 0/28px 100% no-repeat local,
    linear-gradient(to right, var(--shade), transparent) 0 0/14px 100% no-repeat scroll,
    linear-gradient(to left,  var(--shade), transparent) 100% 0/14px 100% no-repeat scroll,
    var(--surface);
}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}

/* 칸이 적은 표는 카드 폭(최대 1200px, .wrap)까지 늘리지 않는다
 * (2026-09-13).
 *
 * table{width:100%} 은 칸이 몇 개든 카드 폭까지 억지로 벌린다. 칸이
 * 넷뿐인 표(옵션 만기 목록 등)에서는 그 벌어진 사이를 눈이 가로로 건너야
 * 해서 한 줄을 읽기 어렵다. 칸이 많은 표(계좌 보유 등)는 100%가 맞다 —
 * 그런 표에는 이 클래스를 안 붙인다.
 *
 * .tbl 자체도 표 폭에 맞춰 줄인다. 안 그러면 <더 볼 것이 있다>는 뜻으로
 * 가장자리에 까는 그늘(위 background)이 이제는 아무것도 없는 빈 자리에
 * 걸린 채 남는다. */
.tbl-narrow{width:fit-content;max-width:100%}
.tbl-narrow table{width:auto}

/* 마지막 빈 칸이 남는 폭을 다 먹게 한다 (2026-09-13, 사용자가 화면에서
 * 직접 걸어 보고 잰 값).
 *
 * 빈 칸을 뒤에 두는 것만으로는 모자랐다 — table-layout:auto 는 남는
 * 폭을 칸마다 비율로 나눠서, 오른쪽 정렬 숫자 칸들이 빈 칸과 함께 조금씩
 * 더 벌어졌다(사용자 실측: 재기 전 452·759·1031·1130px, 다 흩어짐).
 *
 * 마지막 칸만 100%, 나머지는 1px+nowrap 로 못 박는다 — <내용만큼만
 * 쓰고 더 안 늘어난다>는 뜻이라, 남는 폭이 전부 마지막 칸으로 간다
 * (실측: 144·214·275·1130px, 숫자가 왼쪽에 모임).
 *
 * .tbl 전체에 걸지 않고 이 클래스를 따로 둔다 — 계좌 보유·미체결처럼
 * 이미 잘 나오는 표까지 같이 바뀌면 안 된다.
 *
 * 09-17 에는 PC 에서만 걸었다(사용자 — 「pc는 그대로 두고 … 나머지는 pc
 * UI패치 전으로 돌려줘」). 폰에서 걸면 거꾸로 빈 칸 하나가 화면을 먹어서다
 * — 실측 408px 에서 기초자산 표는 340px 중 127.6px(37.5%), 선물 표는
 * 71px(20.9%)이 빈 칸이었다.
 *
 * 09-19 부터는 PC 도 폰 구성이라 그 규칙을 통째로 걷고, 폰 쪽(빈 칸을
 * 감추고 칸 셋·넷이 table{width:100%} 로 카드를 채운다)을 폭과 상관없이
 * 쓴다. 1200px 카드에서 <평균 IV>·<만기>가 오른쪽 끝으로 가는 것은 폰과
 * 같은 모양이다 — 사용자가 고른 것이 그 모양이다. 위 주석의 실측값은
 * 되돌릴 때를 위해 남긴다. */
.tbl-fit th:last-child, .tbl-fit td:last-child{display:none}

/* .card-narrow 는 걷었다 (2026-09-13).
 *
 * 검색창+표 카드를 400px 로 좁혔더니 <주식> 목록과 다른 모양이 됐고,
 * 실적 캘린더는 그 폭에서 가로 스크롤바까지 생겼다(사용자 실측). <주식>
 * 목록을 보니 카드는 넓게 두고 표만(.tbl-narrow) 왼쪽에 붙여 안 늘리는
 * 쪽이었다 — 칸이 왼쪽 정렬(#·종목)이라 표가 늘어나도 티가 안 났다.
 * 검색창은 카드 폭(width:100%)을 그대로 채우고, 표는 그 안에서 제 폭만
 * 쓴다. 세 카드(기초자산·선물·실적) 모두 .tbl-narrow 로 되돌렸다. */

/* 머리글을 한 단 올린다. 부풀리기를 끄기 전에는 폰에서 저 혼자 커져 있어서
   10.2px 인 줄 몰랐다 — 끄고 나니 열 이름이 값보다 한참 작아 안 읽힌다. */
thead th{
  text-align:left;font-weight:500;color:var(--faint);font-size:var(--t-xs);
  letter-spacing:.03em;
  padding:.55rem .7rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);
}
thead th + th, tbody td + td{text-align:right}
tbody td{padding:.52rem .7rem;border-bottom:1px solid var(--line-2)}

/* PC 에서만 줄을 낮춘다 (2026-09-13). 한 화면에 13줄뿐이라 표를 훑으려면
 * 스크롤이 잦았다.
 *
 * 세로 padding 을 위 기본 규칙에서 바로 줄이지 않는다 — 아래
 * @media(max-width:560px) 는 가로 padding 만 따로 줄이고 세로는 그대로
 * 물려받게 짜여 있어서, 기본 규칙의 세로 값을 바로 고치면 폰 줄 높이도
 * 같이 낮아진다. 폰에서는 줄이 낮아지면 손가락으로 못 짚는다. 그래서
 * 561px 이상에서만 세로 값을 따로 준다 — 가로(.7rem)는 안 건드린다. */
@media (min-width:561px){
  tbody td{padding-top:.34rem;padding-bottom:.34rem}
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--line-2)}
tbody tr.sel{background:var(--down-soft)}
tbody td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
tbody td:first-child{text-align:left}

tbody td:has(.nm){text-align:left}
thead th.nm-h{text-align:left}

/* 이름 열이 표를 읽는 기준이다 (2026-09-03).
 *
 * 여태 .nm 은 <이 칸이 이름 칸이다>를 알리는 표시로만 쓰였고 생김새는 없었다.
 * 그래서 표의 모든 칸이 같은 무게였고, "무엇을 들고 있나"를 훑을 때 눈이
 * 내려앉을 자리가 없었다 — 국내·해외·수량·단가가 종목 이름과 똑같이 말했다.
 *
 * 무게만 준다. 색이나 크기를 건드리면 시세의 오르내림 색과 척도를 침범한다.
 * .nm 을 이미 쓰던 표 여섯이 이 한 줄로 같이 따라온다.
 *
 * 종목코드는 이름 옆에 늘 붙어 다니지만 훑을 때 읽는 것은 이름이다.
 * 옅게, 한 단 작게, 고정폭으로 떨어뜨려 이름이 먼저 오게 한다. */
.nm{font-weight:600}
.code{color:var(--faint);font-weight:400;font-family:var(--mono);font-size:var(--t-xs)}

/* 이름 열은 머리글과 같은 쪽에 붙인다 (2026-09-02).
 *
 * 머리글은 nm-h 로 왼쪽인데 데이터는 <td + td> 규칙에 걸려 오른쪽으로 붙어
 * 있었다 — "종목" 은 왼쪽 끝에, "삼성전자 (005930)" 은 오른쪽 끝에. 어느 열의
 * 값인지 눈이 한 번 더 짚어야 한다.
 *
 * 값 칸에 .nm 을 넣은 표는 위 줄이 이미 잡아 주지만, 이름을 글자로만 넣는
 * 표(계좌 보유·프로그램 매매)는 안 잡혔다. 머리글이 몇 번째냐를 보고 같은
 * 번째 칸을 왼쪽으로 돌린다 — 표마다 1·2·3번째에 있다. */
table:has(thead th.nm-h:nth-child(2)) tbody td:nth-child(2),
table:has(thead th.nm-h:nth-child(3)) tbody td:nth-child(3){text-align:left}

/* 알고리즘 카드 (2026-09-06).
 *
 * 알고리즘마다 제 돈과 제 장부라, 카드 하나가 <하나의 계좌>다. 켜져 있으면
 * 왼쪽에 띠를 세워 한눈에 가른다 — 표의 색으로 가르면 오르내림 색과 섞인다. */
.algo-card{margin-top:.7rem;border-left:3px solid transparent}
.algo-card[data-on="true"]{border-left-color:var(--ink)}
.algo-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.algo-head b{font-family:var(--display);font-size:var(--t-lg);font-weight:700}
.algo-what{font-size:var(--t-xs);color:var(--muted);margin:.25rem 0 .7rem;line-height:1.5}

/* 운용 자산 넣는 칸 (2026-09-06 다듬음).
 *
 * 전에는 <라벨 위 · 넓은 빈 칸 아래 · 단추 옆>이었다. 폰에서 그 빈 칸이 화면
 * 절반을 먹는데 정작 넣는 것은 숫자 예닐곱 자다. 게다가 카드마다 <운용 자산>
 * 이라는 말이 두 번 나왔다 — 위 숫자에 한 번, 넣는 칸에 또 한 번.
 *
 * 지금은 한 줄이다. 넣는 칸과 단추가 붙어 있고, 무엇을 넣는지는 칸 안의
 * 흐린 글씨가 말한다. 숫자는 오른쪽으로 붙여 자릿수를 눈으로 세게 한다. */
.algo-cap{display:flex;gap:.4rem;align-items:center;margin-top:.8rem}
.algo-cap input{
  flex:1;min-width:0;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:var(--t-sm);
  font-variant-numeric:tabular-nums;text-align:right;
}
.algo-cap input:focus{outline:none;border-color:var(--faint);
  box-shadow:0 0 0 3px var(--line-2)}
.algo-cap .btn{flex:0 0 auto}

/* 달러로 넣은 미국 자리의 환산 안내 (2026-09-07). 실제로 저장되는 것은
   원이라, 그 사실을 숨기지 않는다. */
.algo-conv{margin-top:.4rem}

/* 고르기 표의 자금 칸 (2026-09-07).
 *
 * 최소 자금 하나만 적는다. 필요 자금은 무리에 따라 수천만원까지 올라가
 * <고를 수 있는 것이 없다>처럼 보였다 — 그 숫자는 켠 뒤 카드에서 본다. */
.tbl td.need{white-space:nowrap}

/* 카드 안의 보유 표 (2026-09-07).
 *
 * 카드 안에 또 카드를 그리지 않는다 — 겹이 두 벌이 된다. 위아래로 선 하나씩만
 * 두고, 글자는 카드의 다른 줄보다 한 단 작게 해서 <카드에 딸린 것>으로 읽히게
 * 한다. */
.algo-hold{margin-top:.8rem;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;background:none}
.algo-hold table{font-size:var(--t-xs)}
.algo-hold th{padding-top:.6rem}

/* 합계 줄 (2026-09-09). 이 저장소에서 tfoot 을 쓰는 표는 실현손익 하나뿐이라
   여기에만 건다 — 전역에 걸면 나중에 tfoot 을 쓰는 표가 이 생김새를 물려받고,
   그때 왜 그런지 아무도 모른다. tbody 규칙은 tfoot 에 안 걸리므로 여백과 선을
   여기서 다시 준다(오른쪽 붙임은 td + td 가 이미 잡는다). */
.algo-hold tfoot td{padding:.52rem .7rem;border-top:1px solid var(--line);
  font-weight:600}
.algo-hold tfoot td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 누른 줄이 <가고 있다>고 말한다 (2026-09-09).
   그 종목의 시세를 한 번 받아 오는 동안 화면이 아무 말도 안 하면, 사람은
   안 눌렸다고 여기고 또 누른다. 색을 새로 만들지 않고 흐리게만 한다 —
   이 표에서 색은 오르내림의 것이다. */
.algo-hold tbody tr.busy{opacity:.5}

/* 접힌 줄에 붙는 수익률 (2026-09-09). 사용자가 이 자리를 짚었다 — 펴 보지
   않고 지나가는 줄이라, 이 한 값이 상자의 요약이다.

   제목보다 한 단 낮춘다(무게 400, 한 단 작게). 같은 무게로 두면 <실현 손익>
   과 수익률이 둘 다 제목처럼 읽혀 어느 쪽이 이름인지 흐려진다. 색은 안 준다 —
   오르내림 색은 pctText 가 span 에 붙인다.

   여기서 margin-left 를 주지 않는다. summary 가 flex + gap:.5rem 이라 간격은
   이미 있고, 「열기」는 ::after 의 margin-left:auto 로 오른쪽 끝에 붙는다. */
.algo-rr{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:400;font-size:var(--t-xs)}

/* 알고리즘 카드 안의 규칙 접이식. 카드 안이라 테두리를 지우고 선 하나로만
   가른다 — 카드 안에 또 카드를 그리면 겹이 두 벌이 된다. */
.algo-card details.collapse{
  margin-top:.8rem;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;background:none;
}
.algo-card details.collapse summary{padding:.6rem 0}
.algo-card details.collapse .card-pad{border-top:0;padding:.2rem 0 .4rem}
.algo-rules{display:flex;flex-direction:column;gap:.5rem}
.algo-rules > div{display:flex;gap:.6rem;align-items:baseline}
.algo-rules dt{flex:0 0 5.6rem;font-size:var(--t-xs);color:var(--muted)}
.algo-rules dd{margin:0;font-size:var(--t-sm);line-height:1.5;min-width:0;
  overflow-wrap:break-word;word-break:keep-all}

/* 까닭 칸만 줄바꿈을 허용한다 (2026-09-06).
 *
 * 프로그램 매매의 <지금 하는 판단>은 마지막 칸이 문장이다("아직 안 눌렸다 —
 * z=-0.41 (필요 ≤ -1.0)"). .tbl 은 좁은 화면에서 모든 칸을 nowrap 으로 두는데
 * 그 규칙이 이 칸에 걸리면 표가 옆으로 한없이 길어져, 정작 먼저 봐야 할
 * <판단> 칸이 화면 밖으로 밀린다.
 *
 * 클래스가 둘(.tbl + td.why)이라 아래 미디어 쿼리의 .tbl td 보다 세다 —
 * 순서와 무관하게 이긴다. */
.tbl td.why{text-align:left;white-space:normal;min-width:11rem;
  font-family:var(--body);font-size:var(--t-xs);color:var(--muted)}

.search{
  width:100%;padding:.55rem .75rem;margin-bottom:.6rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--t-sm);
}
.search:focus{outline:none;border-color:var(--faint);box-shadow:0 0 0 3px var(--line-2)}
.sr-box{max-height:340px;overflow-y:auto}
.sr-empty{color:var(--faint);text-align:center;padding:1rem}

.star{border:0;background:none;cursor:pointer;padding:0;
  color:var(--line);font-size:var(--t-md);line-height:1}
.star:hover{color:var(--faint)}
/* 담아둔 별이 --up 이라 <올랐다>는 빨강으로 켜지고 있었다. 별은 값이 아니라
   내가 표시해 둔 것이라, 시세가 쓰는 색을 빌려 쓰면 안 된다. */
.star.on{color:var(--accent)}
/* 손님에게는 별(관심종목 담기)이 없다 (2026-11-01). 관심종목은 주인만 쓴다 —
   눌러도 서버가 302/403 으로 막지만, 안 되는 단추를 보여 주지 않는다.
   body[data-owner] 는 app.js setOwner 가 붙인다. 정해지기 전(없음)에는 보인다. */
body[data-owner="0"] .star,
body[data-owner="0"] #dt-star{display:none}

.scrub-row{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.scrub{
  flex:1; appearance:none; height:4px; border-radius:2px;
  background:var(--line); cursor:pointer;
}
.scrub::-webkit-slider-thumb{
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--down); border:2px solid var(--surface); cursor:grab;
}
.scrub::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--down); border:2px solid var(--surface); cursor:grab;
}
.mini{
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:var(--r-sm); width:26px; height:22px; cursor:pointer; font-size:var(--t-sm);
  line-height:1;
}
.mini:hover{color:var(--ink);border-color:var(--faint)}

.chart-note{margin-top:.5rem;font-size:var(--t-xs);color:var(--faint);line-height:1.45}
.chart-note[hidden]{display:none}

.gb{font-size:var(--t-2xs);padding:.05rem .3rem;border-radius:3px;border:1px solid var(--line-2);color:var(--faint);vertical-align:middle}
.gb.on{color:var(--mtx,var(--up));border-color:currentColor}

#ix-sel{flex-wrap:wrap}

/* 901px 위에서 수익률 곡선 옆에 340px 표를 세우던 .yield-cols 규칙은
 * 걷었다 (2026-09-19, <PC 도 폰 구성으로>). .chart-cols 의 한 칸을 그대로
 * 물려받아 표가 곡선 아래로 간다. */

details.collapse{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-1);
  align-self:start}
details.collapse summary{list-style:none;cursor:pointer;padding:.7rem 1rem;
  font-family:var(--body);font-weight:600;font-size:var(--t-sm);
  display:flex;align-items:center;gap:.5rem}
details.collapse summary::-webkit-details-marker{display:none}
details.collapse summary::after{content:"열기";margin-left:auto;font-size:var(--t-xs);
  font-weight:500;color:var(--faint);font-family:var(--mono)}
details.collapse[open] summary::after{content:"접기"}
details.collapse .card-pad{border-top:1px solid var(--line)}

/* 알고리즘 카드를 접을 수 있게 (2026-09-08).
 *
 * 카드 자체가 details 다. 안쪽의 <매수 예정>·<알고리즘> 접이식과 겹치지 않게
 * 자식 선택자(>)로만 건다 — 그러지 않으면 안쪽 summary 에도 이 표시가 붙는다. */
details.algo-fold > summary{list-style:none;cursor:pointer}
details.algo-fold > summary::-webkit-details-marker{display:none}
details.algo-fold > summary::after{content:"열기";margin-left:auto;
  font-size:var(--t-xs);font-weight:500;color:var(--faint);font-family:var(--mono)}
details.algo-fold[open] > summary::after{content:"접기"}

@media (max-width:560px){

  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{white-space:nowrap}
  .topbar-in > .tabs{min-width:0}

  /* 요약 한 줄은 이제 위(.strip)가 폭과 상관없이 옆으로 미는 줄이다
     (2026-09-19). 폰에서는 손가락으로 미니 스크롤바를 감추고, 칸을 128px
     로 줄인다 — 배치는 같고 크기만 다르다. */
  .strip{scrollbar-width:none;padding-bottom:0}
  .strip::-webkit-scrollbar{display:none}
  .strip .tile{flex:0 0 128px}

  #range-sel{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;width:100%;max-width:100%;min-width:0}
  #range-sel::-webkit-scrollbar{display:none}
  #range-sel button{white-space:nowrap;padding:.28rem .34rem;font-size:var(--t-2xs);
    flex:1 1 auto}
  .ind-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ind-bar::-webkit-scrollbar{display:none}
  .ind-bar .seg,.ind-bar .chip{flex:0 0 auto;white-space:nowrap}

  #ix-sel{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #ix-sel::-webkit-scrollbar{display:none}
  #ix-sel button{white-space:nowrap;flex:0 0 auto}

  .chart-cols > .card{min-width:0}

  html,body{overflow-x:hidden;max-width:100%}

  .wrap{padding-left:.8rem;padding-right:.8rem}
  .card-pad{padding:.8rem}

  .acc-sum{grid-template-columns:repeat(2, minmax(0, 1fr));gap:.8rem 1rem}
  .acc-sum > div{min-width:0}
  .acc-sum dd{font-size:var(--t-md)}
  .acc-sum .acc-hero dd{font-size:var(--t-2xl)}
  .acc-sum .acc-key dd{font-size:var(--t-lg)}

  .sec-head{min-width:0}
  .sec-head h2{min-width:0}

  #mkt-flow > .card{max-width:100%}
  .kv{min-width:0}

  .acc-sum dd,.kv dd,.sec-head h2{overflow-wrap:break-word;word-break:keep-all}

  .tbl td,.tbl th{white-space:nowrap}

  .tbl td,.tbl th{padding-left:.34rem;padding-right:.34rem}

  .chart-head{row-gap:.4rem}

  #sec-trade .frm,#fx-fold .frm{gap:.38rem}
  #sec-trade .frm-row,#fx-fold .frm-row{gap:.38rem}
  #sec-trade .card-pad{padding:.8rem}
}

/* 주문·환전 폼은 칸마다 한 줄 (2026-09-19, <PC 도 폰 구성으로>). 560px
 * 아래에서만 세로로 세우던 것을 폭과 상관없이 세운다. 환전의 단추 줄
 * (.fx-btns)만 폰에서도 가로였으니 그대로 가로다 — 주문 쪽은 단가 추적
 * 줄과 주문 내기·비상 정지 줄까지 폰과 똑같이 세로다. 사이 여백은 PC 값
 * (.5rem)이고 폰은 위 @media 가 .38rem 으로 줄인다. */
#sec-trade .frm-row,#fx-fold .frm-row{flex-direction:column;align-items:stretch}
#fx-fold .fx-btns{flex-direction:row;align-items:center}

/* 당겨서 새로고침 표시(.ptr)가 여기 있었다(09-19). 몸짓과 함께 걷어냈다
   (2026-10-28) — 상단 바의 새로고침 버튼이 그 자리다. */

.detail{position:fixed;inset:0;background:var(--paper);z-index:50;
  overflow-y:auto;animation:dt-in .18s var(--ease)}
@keyframes dt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .detail{animation:none} }

.dt-bar{position:sticky;top:0;background:var(--surface);
  border-bottom:1px solid var(--line);z-index:2}
.dt-bar-in{max-width:1200px;margin:0 auto;padding:.6rem 1.2rem;
  display:flex;align-items:center;gap:.8rem}
.dt-back{border:0;background:transparent;color:var(--muted);font-size:var(--t-lg);
  cursor:pointer;padding:.2rem .45rem;border-radius:var(--r);line-height:1}
.dt-back:hover{background:var(--line-2);color:var(--ink)}
/* 이 줄만 한 단 위로 옮겼다. 원래 1rem 이라 값으로만 보면 본문 단(--t-md)에
   떨어지는데, 하는 일이 <상세창의 제목>이라 그러면 2px 작아지며 제목 노릇을
   못 한다. 척도로 옮길 때 값만 보고 통에 넣으면 이런 자리가 조용히 상한다. */
.dt-title{font-family:var(--display);font-size:var(--t-lg);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-code{color:var(--faint);font-size:var(--t-xs);font-family:var(--mono);margin-left:.35rem}

/* 머리에 값이 들어오면서 이름과 값이 한 줄을 나눠 쓴다 (2026-09-19).
   줄어드는 쪽은 이름이다 — 이름은 잘려도 <TSMC(타이완반도체…> 로 짐작이
   되지만 값은 잘리면 다른 값이 된다. 그래서 이름만 flex 로 줄이고 값에는
   nowrap 과 flex:none 을 건다. */
.dt-titlewrap{flex:1 1 auto;min-width:0}
.dt-hq{flex:none;display:flex;align-items:baseline;gap:.3rem;white-space:nowrap}
.dt-hq[hidden]{display:none}
#dt-hpx{font-size:var(--t-md);font-weight:700;letter-spacing:-.01em}
#dt-hchg{font-size:var(--t-xs);font-weight:600}

.dt-star{border:0;background:transparent;font-size:var(--t-lg);cursor:pointer;
  color:var(--faint);padding:.2rem;margin-left:auto}
.dt-star.on{color:var(--accent)}   /* 위 .star.on 과 같은 까닭 */

@keyframes dt-in-fwd{from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}}
@keyframes dt-in-back{from{opacity:0;transform:translateX(-16px)}
  to{opacity:1;transform:none}}
#dt-body.anim-fwd{animation:dt-in-fwd .22s var(--ease)}
#dt-body.anim-back{animation:dt-in-back .22s var(--ease)}

@media (prefers-reduced-motion:reduce){
  #dt-body.anim-fwd,#dt-body.anim-back{animation:none}
}

/* <이 값이 언제 것인가> 꼬리표 (2026-09-19). 카드마다 모양이 달라 매번 다시
   읽어야 했다 — 한 가지로 못 박는다. 값보다 작고 흐려야 한다: 이것은 값이
   아니라 값에 붙는 단서다. 좁은 화면에서 줄이 갈라지면 어느 카드 것인지
   헷갈리므로 안 접는다. */
.stamp{color:var(--faint);font-size:var(--t-xs);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.stamp[hidden]{display:none}

/* 꼬리표 안의 날짜 (2026-09-19). 투자자 줄만 <09-18 · 오후 6:51 기준> 으로
   길어 그 카드가 유난히 말이 많아 보였다. 날짜를 없애면 어제 값이라는 뜻이
   같이 사라지므로, 한 단계 더 흐리게 해서 눈이 시각부터 잡게 둔다.
   색을 새로 정하지 않고 opacity 를 쓰는 것은 라이트·다크 두 벌을 또 만들지
   않으려는 것이다 — --faint 가 갈리면 이쪽도 같이 갈린다. */
.stamp-date{opacity:.65}

/* 값이 아직 안 온 자리 (2026-09-19).
   :empty 에 건다 — 값을 쓰는 자리가 넷이라 <채웠으면 이 표시도 꺼라>를 네 곳에
   적어 두면 다섯째 자리가 생기는 날 조용히 깨진다. textContent 가 들어오는
   순간 :empty 가 풀려 저절로 꺼진다.
   --skel-w 로 칸마다 너비를 다르게 준다. 다 같으면 <읽는 중>이 아니라
   <망가짐>으로 보인다. */
.skel:empty{display:inline-block;width:var(--skel-w,6ch);height:1em;
  vertical-align:-.15em;border-radius:4px;background:var(--line);
  animation:skel-pulse 1.3s ease-in-out infinite}
.skel-r{fill:var(--line);animation:skel-pulse 1.3s ease-in-out infinite}
@keyframes skel-pulse{0%,100%{opacity:.45}50%{opacity:.9}}

@media (prefers-reduced-motion:reduce){
  .skel:empty,.skel-r{animation:none;opacity:.6}
  /* 흐림이 켜지고 꺼지는 것 자체는 남긴다 — 그것이 정보다. 부드럽게
     넘어가는 0.18초만 없앤다. */
  .strip-wrap::after{transition:none}
}

.dt-px{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:.9rem 0 .2rem}

.dt-px[hidden]{display:none}
.dt-meta[hidden]{display:none}

#dt-mount > *:first-child .sec-head h2{display:none}
.dt-px .big{font-size:var(--t-2xl);font-weight:700;letter-spacing:-.02em}
.dt-px .chg{font-size:var(--t-md);font-weight:600}
.dt-meta{color:var(--faint);font-size:var(--t-xs);display:flex;gap:.45rem;flex-wrap:wrap}

#dt-mount .sec-head h2{font-size:var(--t-md)}
#dt-mount .sec-head{margin-bottom:.4rem}
#dt-mount > section{margin-top:1rem}
#dt-mount > section:first-child{margin-top:0}


.key-panel{border-top:1px solid var(--line);background:var(--paper)}
.key-panel[hidden]{display:none}
.key-panel-in{padding-top:.7rem;padding-bottom:.7rem}
.key-panel .frm-row{align-items:flex-end}
@media (max-width:700px){ .key-panel .frm-row{flex-wrap:wrap} }

.dt-star[hidden]{display:none}

.kv dt.kv-ma{display:flex;align-items:center;gap:.4rem}
.kv dt.kv-ma::before{content:"";width:14px;height:3px;border-radius:2px;
  background:var(--sw);flex:none}

#pl-period button:last-child{border-right:1px solid var(--line)}
.kv-fold[hidden]{display:none}

/* 환전·실현손익처럼 접어 둔 칸의 머리 (2026-09-03).
   부풀리기를 끄고 나면 .eyebrow 그대로는 10.2px 인데, 이건 <읽는 라벨>이
   아니라 <눌러서 여는 자리>라 그 크기로는 손가락이 겨눌 곳이 안 보인다.
   한 단 올려 13.1px 로 두고, 대신 접혀 있을 때는 위아래 여백을 줄여 칸 자체를
   낮춘다 — 커 보이던 까닭의 절반은 글자가 아니라 그 여백이었다.
   .8rem 씩 두면 누르는 자리는 44px 언저리라 손가락에는 그대로 넉넉하다. */
.kv-fold > summary{font-size:var(--t-sm);letter-spacing:.02em}
.kv-fold:not([open]).card-pad{padding:.8rem 1rem}

.kv-fold summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.kv-fold summary::-webkit-details-marker{display:none}
/* 「열기」는 옆의 details.collapse 와 같은 단으로 맞춘다. 같은 일을 하는 글자가
   한쪽은 10.2px, 다른 쪽은 11.5px 로 갈려 있었다. */
.kv-fold summary::after{content:"열기";margin-left:auto;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--faint);letter-spacing:0}
.kv-fold[open] summary::after{content:"접기"}
.kv-fold[open] summary{margin-bottom:.7rem}

.co-top{display:flex;align-items:flex-start;gap:.5rem}
.co-name{margin:0;font-size:var(--t-lg);line-height:1.3;
  overflow-wrap:break-word;word-break:keep-all}
.co-sub{font-size:var(--t-xs);color:var(--faint);margin-top:.15rem;
  overflow-wrap:break-word;word-break:keep-all}
.co-desc{margin:.9rem 0 0;font-size:var(--t-sm);line-height:1.7;color:var(--muted);
  overflow-wrap:break-word;word-break:keep-all}
#co-profile{margin-top:.9rem}
/* "전일 종가" 가 두 줄로 접히지 않게. 가장 긴 이름도 한 줄에 든다. */
#co-profile dt{white-space:nowrap}
#co-quarters{flex-wrap:wrap;max-width:100%}
#co-quarters button{font-family:var(--mono);white-space:nowrap}
#earn-co[hidden],#earn-list[hidden]{display:none}
.co-up{color:var(--up)}
.co-down{color:var(--down)}

@media (min-width:720px){
  #co-profile{grid-template-columns:auto 1fr auto 1fr}
}

.eco-bar{display:flex;align-items:center;justify-content:center;gap:.6rem}
.eco-month{font-family:var(--mono);font-size:var(--t-md);min-width:6.5rem;text-align:center}
.eco-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;margin-top:.6rem}
.eco-dow{margin-top:.8rem;font-size:var(--t-xs);color:var(--faint);text-align:center;gap:.25rem}

/* 폭이 좁으면 이름은 "잭슨…" 으로 잘려 아무것도 알려주지 못한다. 점으로 세고,
   자리가 나는 화면에서만 이름을 건다. */
.eco-cell{min-height:2.8rem;border:1px solid var(--line-2);border-radius:var(--r-sm);
  padding:.24rem .28rem;background:var(--surface);text-align:left;font:inherit;
  display:flex;flex-direction:column;gap:.18rem;overflow:hidden;cursor:pointer}
.eco-cell:disabled{cursor:default;background:none;border-color:transparent}
.eco-cell .d{font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);line-height:1}
.eco-cell.sun .d{color:var(--up)}
.eco-cell.hot{background:var(--up-soft);border-color:var(--up-line)}
.eco-cell.hot .d{color:var(--up);font-weight:700}
.eco-cell.today{border-color:var(--down);border-width:2px;
  padding:calc(.24rem - 1px) calc(.28rem - 1px)}
.eco-cell.today .d{font-weight:700}
.eco-cell[aria-pressed="true"]{outline:2px solid var(--down);outline-offset:-2px}

.eco-dots{display:flex;flex-wrap:wrap;gap:.16rem;margin-top:auto;align-content:flex-end}
.eco-dot{width:.32rem;height:.32rem;border-radius:50%;background:var(--line);flex:none}
.eco-dot.r3{background:var(--up)}
.eco-dot.r2{background:var(--muted)}
.eco-tags{display:none;flex-direction:column;gap:.1rem;min-width:0}
.eco-tag{font-size:var(--t-2xs);line-height:1.25;border-radius:3px;padding:.05rem .16rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eco-tag.r3{background:var(--up-soft);color:var(--up);font-weight:700}
.eco-tag.r2{background:var(--line-2);color:var(--ink)}
.eco-more{font-size:var(--t-2xs);color:var(--faint)}

/* 이름과 숫자를 한 줄에 밀어 넣으면 "일본 / 금리 / 결정" 으로 쪼개진다.
   숫자는 이름 아래 제 줄에 둔다. */
.eco-row{display:grid;grid-template-columns:auto auto minmax(0,1fr);
  gap:.1rem .5rem;align-items:baseline;font-size:var(--t-sm)}
.eco-row .t{grid-column:1;font-family:var(--mono);font-size:var(--t-xs);color:var(--faint)}
.eco-row .c{grid-column:2;font-size:var(--t-xs);color:var(--muted)}
.eco-row .n{grid-column:3;min-width:0;overflow-wrap:break-word;word-break:keep-all}
.eco-row .v{grid-column:3;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted);
  overflow-wrap:break-word;word-break:keep-all}
.eco-row.r3 .n{font-weight:700}
.eco-row.r3 .c{color:var(--up)}

.eco-today,.eco-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem}
.eco-none{font-size:var(--t-sm);color:var(--faint)}

@media (min-width:700px){
  .eco-cell{min-height:3.6rem}
  .eco-tags{display:flex}
  .eco-dots{display:none}
}

/* 덮개 머리글이 이미 뒤로 버튼과 종목명을 들고 있다. 패널 제 것은 그때만 뺀다. */
#detail .co-top{display:none}

.co-op{margin-top:.2rem}
.co-op .t{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.35rem;flex-wrap:wrap}
.co-op .t .seg{margin-left:auto;align-self:center}
.co-op .t .seg button{padding:.2rem .5rem;font-size:var(--t-xs)}
.co-op .t b{font-size:var(--t-sm)}
.co-op .t span{font-size:var(--t-xs);color:var(--faint)}
.co-op svg{width:100%;height:auto;display:block;overflow:visible}

.warm-banner{display:block;width:100%;padding:.5rem .9rem;font-size:var(--t-sm);
  color:var(--muted);background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center}
.warm-banner[hidden]{display:none}

.fatal-banner{display:block;width:100%;padding:.6rem .9rem;font-size:var(--t-sm);
  font-family:var(--mono);color:#fff;background:#b4232a;word-break:break-all}

/* 눌렀는데 안 된 이유. 폰에는 콘솔이 없으니 이것이 유일한 통로다.
   손가락이 닿는 아래쪽에 띄운다 — 위쪽은 스크롤 중이면 못 본다. */
.notice-toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom));z-index:9999;
  max-width:min(32rem,calc(100vw - 2rem));padding:.7rem 1rem;
  border-radius:.5rem;font-size:var(--t-sm);line-height:1.45;
  color:#fff;background:#333a45;box-shadow:0 .4rem 1.2rem rgba(0,0,0,.28)}
.notice-toast[hidden]{display:none}

/* 키가 없다는 경고. 원래는 통째로 누르는 띠였는데, 시세만 보는 사람에게는
   늘 걸려 있는 붉은 줄이라 접기 단추를 달았다(2026-08-26). */
.key-banner{display:flex;align-items:stretch;width:100%;margin-top:.6rem;
  background:var(--up-soft);color:var(--up)}
.key-banner[hidden]{display:none}
.key-banner-msg{flex:1;border:0;background:none;cursor:pointer;color:inherit;
  font-family:var(--body);font-size:var(--t-sm);font-weight:600;
  padding:.5rem .6rem .5rem 1.2rem;text-align:center;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:break-word}
.key-banner-msg:hover{filter:brightness(.97)}
.key-banner-x{border:0;background:none;cursor:pointer;color:inherit;opacity:.65;
  padding:0 .9rem;font-size:var(--t-lg);line-height:1}
.key-banner-x:hover{opacity:1}

/* 비상 정지가 걸린 것은 눈에 확 들어와야 한다 — 모르고 주문을 누르다
   왜 안 나가는지 헤매면 그 자체로 사고다. */
.stop-banner{display:flex;align-items:center;gap:10px;margin-top:10px;
  padding:11px 13px;border-radius:var(--r);
  background:var(--up-soft);border:1px solid var(--up-line);color:var(--up);
  font-weight:700}
.stop-banner .btn{margin-left:auto;font-weight:600}

/* 알림 채널이 죽어 가는 것은 비상 정지만큼 붉을 필요는 없다. 다만 눈에는
   띄어야 한다 — 조용히 죽는 것을 막으려고 만든 띠니까. */
.stop-banner.warn{background:var(--line-2);border-color:var(--line);color:var(--ink)}

/* ── 움직임 (2026-09-02) ─────────────────────────────────────
 *
 * 규칙 셋을 두고 붙였다.
 *
 * 하나. <뜻이 있을 때만> 움직인다. 예뻐 보이려고 넣은 움직임은 두 번째부터
 * 방해가 된다. 여기 있는 것은 전부 <무엇이 일어났는지> 또는 <내가 눌렀는지>를
 * 말한다.
 *
 * 둘. <숫자는 움직이지 않는다>. 값이 미끄러져 들어오면 읽을 수가 없다. 이 화면은
 * 몇 초마다 값이 바뀌므로 특히 그렇다. 움직이는 것은 바탕·판·테두리뿐이다.
 *
 * 셋. <짧게>. 조작에 대한 답은 120~200ms 다. 그보다 길면 기다리게 된다.
 *
 * 그리고 이 아래 전부는 <움직임을 줄여 달라>는 설정 앞에서 꺼진다 — 맨 끝의
 * 담요 한 장이 그 일을 한다.
 */

@keyframes rise-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* 탭을 바꾸면 판이 갈린다. hidden 이 풀리는 순간 다시 그려지므로 바뀔 때만
   돈다 — 데이터가 새로 와도 다시 돌지 않는다.

   여기서는 <옮기지 않는다>(2026-09-02 고침). 처음에는 7px 띄웠는데, 판이
   587px 이라 1.2% 다 — 움직임으로 읽기엔 작고 안 움직였다고 하기엔 보여서
   화면이 덜컥거리는 것처럼 느껴졌다. 큰 덩어리는 자리를 옮기면 그 아래가
   전부 따라 흔들린다. 바뀌었다는 것만 말하면 충분하다. */
.panel:not([hidden]){animation:fade-in .2s var(--ease)}

/* 접었다 폈을 때. 높이는 안 건드린다 — 높이를 움직이면 아래 것들이 다 같이
   출렁여서 읽던 자리를 잃는다. */
details.collapse[open] > *:not(summary),
.kv-fold[open] > *:not(summary){animation:fade-in .18s var(--ease)}

/* 갑자기 나타나는 것들. 특히 토스트는 <방금 무슨 일이 있었다>는 신호라
   미끄러져 올라오는 편이 눈에 걸린다. */
/* 이쪽은 띠 자체가 작아서 7px 이 제 몫을 한다 — 같은 7px 이라도 587px 짜리
   판에서는 떨림이고 40px 짜리 띠에서는 <올라옴>이다. 움직임의 크기는 늘
   움직이는 것의 크기에 견주어 정해야 한다. */
.notice-toast:not([hidden]){animation:rise-in .2s var(--ease)}
.stop-banner:not([hidden]),
.key-banner:not([hidden]),
.warm-banner:not([hidden]){animation:rise-in .22s var(--ease)}

/* 눌렸다는 답. 손가락이나 마우스가 닿은 그 순간에만 아주 살짝 눌린다. */
.btn:active,.chip:active,.seg button:active,.icon-btn:active,.mini:active{
  transform:scale(.98)}
.tile:active{transform:scale(.985)}
.tabs button:active{transform:scale(.98)}

/* 표에서 줄을 훑을 때 바탕이 툭 바뀌면 거칠다. */
tbody tr{transition:background .12s var(--ease)}
/* 눌러서 넘어가는 줄. 손이 닿기 전에 눌린다는 것을 알려 준다. */
tbody tr.clickable{cursor:pointer}
.star{transition:color .12s var(--ease),transform .12s var(--ease)}
.star:hover{transform:scale(1.15)}

/* 움직임을 줄여 달라고 해 둔 사람에게는 전부 끈다. 개별 규칙마다 챙기면
   언젠가 한 곳을 빠뜨린다 — 담요 한 장으로 덮는다. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}

/* AI 판단 (2026-09-10).
 *
 * 좁은 화면에서 <이름 | 고른 것 | 까닭>을 한 줄에 세 칸으로 두면 까닭 칸이
 * 손가락 두 개 너비가 되어 글자가 세로로 흐른다. 실제로 그렇게 나왔다.
 * 그래서 폰에서는 <이름·고른 것>을 윗줄에, 까닭을 아랫줄에 둔다. */
.algo-ai-ask{margin:.55rem 0;padding:.35rem 0 .35rem .55rem;
  border-left:3px solid var(--line)}
.algo-ai-head{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
.algo-ai-when{font-size:var(--t-xs);flex:0 0 auto;font-family:var(--mono)}
.algo-ai-what{font-weight:600;min-width:0;overflow-wrap:anywhere}
.algo-ai-badge{margin-left:auto;font-size:var(--t-xs);white-space:nowrap}
.algo-ai-line{display:grid;grid-template-columns:9.5rem 5.5rem 1fr;gap:.4rem;
  font-size:var(--t-xs);margin-top:.25rem;align-items:baseline}
.algo-ai-key{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.algo-ai-call{white-space:nowrap;font-family:var(--mono)}
.algo-ai-val{min-width:0;line-height:1.5;overflow-wrap:break-word;word-break:keep-all}
.algo-ai-did{margin-top:.25rem}

@media (max-width:620px){
  /* 까닭을 아랫줄로 내린다. 위 두 칸은 그대로 나란히. */
  .algo-ai-line{grid-template-columns:auto auto;justify-content:start;
    row-gap:.1rem;column-gap:.5rem}
  .algo-ai-val{grid-column:1 / -1}
  .algo-ai-key{max-width:11rem}
}

/* 원금은 <지금 굴리는 돈> 옆에 작게 (2026-09-10). 같은 크기로 두면 어느
 * 쪽이 진짜 굴리는 돈인지 한눈에 안 갈린다. */
.algo-cap-base{font-size:var(--t-xs);white-space:nowrap}