:root{
  --paper:#E9ECF0; --card:#FFFFFF;
  --ink:#0F1A24; --ink-2:#475765; --ink-3:#5F6B74;
  --rule:#BCC6D0; --rule-2:#DDE3E9;
  --up:#1B7F4B; --down:#C4362C;
  --up-rgb:27,127,75; --down-rgb:196,54,44;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cond:"IBM Plex Sans Condensed","Pretendard Variable",Pretendard,sans-serif;
  --body:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* ── 글자 크기 자 ────────────────────────────────────────────────
     **여섯 칸뿐입니다.** 전에는 9.5 / 10 / 10.5 / 11 / 12 / 13 / 15 / 20 이
     뒤섞여 있었고, 0.5px 차이는 눈에 안 보이면서 고칠 곳만 늘렸습니다.

     **아래쪽을 올렸습니다** (사용자 지적 — "어떤 글자 크기는 너무 작아").
     각주 13문단이 11px 고정폭이었는데, 읽는 글로는 작습니다. 널리 쓰는
     기준을 맞췄습니다 — 애플 HIG 는 **어떤 글자도 11pt 아래로 두지 말라**고
     하고, 머티리얼의 제일 작은 칸(label small)도 11sp 입니다. 그래서
     **11px 을 바닥**으로 잡고, 읽는 글은 13.5px 로 올렸습니다.

     **위쪽은 안 건드렸습니다** — 사용자가 "제목은 적당한 거 같다"고 했습니다.
     결과적으로 위아래 폭이 좁아져서 화면이 한 덩어리로 읽힙니다.

     자를 쓰는 곳은 이 파일 전체입니다. **새 글자를 넣을 때 px 를 직접 적지
     말고 이 여섯 중에서 고르세요** — 그래야 다음 투자자 화면도 같은 얼굴입니다. */
  --t-micro:11px;    /* 대문자 이름표 · 축 연도 · BUY/SELL  (was 9.5~10) */
  --t-label:11.5px;  /* 칸 머리글 · 캡션 · 버튼            (was 10~10.5) */
  --t-small:12.5px;  /* 섹터 · 순위 · 비중                 (was 10.5~11) */
  --t-text:13.5px;   /* 읽는 글 — 각주 · 요약 한 줄        (was 11)      */
  --t-num:14px;      /* 표의 숫자                          (was 12)      */
  --t-name:16px;     /* 종목 이름                          (was 15)      */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  background-image:linear-gradient(rgba(15,26,36,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(15,26,36,.028) 1px,transparent 1px);
  background-size:56px 56px;
  color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:900px;margin:0 auto;padding:36px 20px 72px}

/* ── 머리글 ─────────────────────────────────────────────── */
.masthead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  padding-bottom:14px;margin-bottom:22px;border-bottom:2px solid var(--ink)}
.eyebrow{margin:0 0 6px;font-family:var(--cond);font-weight:600;font-size:var(--t-label);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
/* 제목은 [이름표][이름 + 설명] 두 덩어리다. `flex-start` 인 이유는 제목이
   두세 줄로 접힐 때 이름표가 가운데로 떠오르면 안 되기 때문이다 —
   이름표는 첫 줄의 것이다. `min-width:0` 이 없으면 좁은 화면에서
   글자 덩어리가 안 줄어 가로로 넘친다. */
.masthead h1{margin:0;display:flex;align-items:flex-start;gap:11px;
  font-family:var(--cond);font-weight:700;font-size:30px;letter-spacing:-.01em;line-height:1.05}
.ttext{min-width:0;font-weight:600;color:var(--ink-3)}
.tname{font-weight:700;color:var(--ink)}
/* 로고 자리. 둥근 모서리는 없다(재료표 5번) — 종목 줄의 `.mk` 와 같은 네모다.
   다만 거기보다 한 단 진하다: 이건 이 화면 전체의 주인이다. */
.tmark{width:32px;height:32px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--ink);color:var(--card);
  font-family:var(--cond);font-weight:700;font-size:var(--t-small);letter-spacing:.02em;line-height:1}
.tmark.img{background:var(--card);border:1px solid var(--rule-2)}
.tmark img{width:100%;height:100%;object-fit:contain;display:block}
.mast-right{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.stamp{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-3);text-align:right}
.mobile-guide{display:none}
.trade-basis{margin:8px 0 0;font-family:var(--mono);font-size:var(--t-small);line-height:1.7;color:var(--ink-3)}
/* 자료에 구멍이 났을 때만 나오는 줄. 값이 아니라 경고이므로 --ink-2 로
   본문만큼 진하게 두되, 색은 새로 만들지 않습니다(상승·하락 색과 섞이면
   안 됩니다 — 재료표 13). hidden 이면 자리도 안 씁니다. */
.gapnote{margin:0 0 12px;font-family:var(--mono);font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
.gapnote[hidden]{display:none}

/* ── 언어 탭 ─────────────────────────────────────────────── */
.seg{display:inline-flex;border:1px solid var(--rule);background:var(--card)}
.seg button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--cond);font-weight:600;font-size:var(--t-label);letter-spacing:.06em;
  color:var(--ink-2);padding:5px 10px;line-height:1.2}
.seg button+button{border-left:1px solid var(--rule-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 차트 기간처럼 줄 안에 들어가는 버튼은 한 치수 작습니다. */
.seg.mini button{font-size:var(--t-micro);letter-spacing:.08em;padding:3px 8px}
/* **이력보다 긴 기간은 눌리지 않습니다.** 감추지 않고 흐리게 둡니다 — 줄마다
   버튼 개수가 달라지면 목록의 세로줄이 들쭉날쭉해집니다. */
.seg button[disabled]{color:var(--ink-3);opacity:.45;cursor:default}

/* ── 패널 ───────────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--rule);margin-bottom:20px;padding:20px}
.panel h2{margin:0 0 5px;font-family:var(--cond);font-weight:700;font-size:19px;letter-spacing:-.01em}
.cap{font-family:var(--cond);font-weight:600;font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.35;margin:0 0 13px}
#bookcut{margin-bottom:2px;color:var(--ink-2)}
#bookcut:empty{display:none}
#quarter h2{margin-bottom:14px}

/* ── 투자자 소개 ─────────────────────────────────────────────
   머리글 바로 아래. **왼쪽 그림 한 장 + 오른쪽 글**입니다.

   **글은 여기 없습니다 — 투자자의 index.html 에 글자로 박혀 있습니다.**
   사전(D)으로 옮기면 JS 가 그리게 되고, JS 를 안 돌리는 크롤러가 받는
   페이지에서 통째로 사라집니다(CLAUDE.md 6-2 의 `.about` 과 같은 이유).
   공통 파일인 여기는 **자리와 크기만** 잡습니다 — 다음 투자자는 자기
   파일에 자기 글과 자기 그림을 씁니다.

   **그림이 없으면 그림 칸이 통째로 빠집니다**(`.nofigure`). 파일을 아직
   안 넣었거나 못 받아도 글이 폭을 다 쓰고 깨진 그림이 안 남습니다 —
   `LIVE`·`MARKS` 와 같은 요령입니다. */
.bio{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
.bio.nofigure{grid-template-columns:minmax(0,1fr)}
/* 3:2 상자입니다 — 그림의 흰 여백을 잘라 낸 실제 비율이 거기였습니다.
   **테두리를 두르지 않습니다.** 그림 바탕이 카드와 같은 순백이라 테두리만
   네모로 떠서 없는 상자를 그려 놓은 꼴이 됩니다(실측으로 확인).
   `cover`·`50% 30%` 는 다른 비율을 가져와도 머리가 안 잘리게 하는 보험입니다. */
.bio-face{display:block;width:300px;height:200px;object-fit:cover;object-position:50% 30%;
  background:var(--card)}
/* **`gap` 이지 `margin` 이 아닙니다.** 두 언어를 다 넣어 두고 한쪽을
   `display:none` 으로 감추므로, `*+*` 로 여백을 주면 감춰진 형제 때문에
   **첫 줄에도 윗여백이 붙습니다.** `gap` 은 상자 없는 것을 안 셉니다. */
.bio-text{display:flex;flex-direction:column;gap:15px;min-width:0}
.bio-text p{margin:0;font-size:var(--t-text);line-height:1.75;color:var(--ink-2)}
/* 인용은 조용하게 — 큰 따옴표 그림 대신 왼쪽에 잉크 선 하나입니다.
   크기는 자에 있는 값(`--t-name`)을 그대로 씁니다. 새 치수를 만들지 않습니다. */
.bio-quote{margin:0;padding-left:13px;border-left:2px solid var(--ink)}
.bio-quote p{font-family:var(--cond);font-weight:600;font-size:var(--t-name);
  line-height:1.5;color:var(--ink)}
/* 출처 줄은 **고정폭이 아니라 `--cond`** 입니다. 작은 고정폭에 한글을 넣으면
   자간이 벌어져 "2008년  10월  16일" 처럼 띄어쓰기가 두 칸씩 보입니다 —
   본 사이트에서 면책 문구를 고정폭으로 뒀다가 되돌린 것과 같은 자리입니다. */
.bio-quote cite{display:block;margin-top:5px;font-style:normal;
  font-family:var(--cond);font-weight:600;font-size:var(--t-label);
  letter-spacing:.02em;color:var(--ink-3)}
/* 본 사이트의 `.about` 과 같은 규칙입니다 — 두 언어를 다 넣어 두고 CSS 가
   한쪽만 보여 줍니다. JS 를 안 돌리는 크롤러에게도 글이 그대로 보입니다. */
html[lang="ko"]       .bio [data-lang="en"]{display:none}
html:not([lang="ko"]) .bio [data-lang="ko"]{display:none}

/* ── 이번 분기 요약 ──────────────────────────────────────── */
.tally{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-2);margin-bottom:16px}
.tally div{flex:1 1 0;min-width:76px;padding:10px 12px;text-align:center}
.tally div+div{border-left:1px solid var(--rule-2)}
.tally .n{font-family:var(--mono);font-weight:500;font-size:23px;letter-spacing:-.02em;
  line-height:1.1;display:block;margin-bottom:3px}
.tally .k{font-family:var(--cond);font-weight:600;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.25}
.tally .up .n{color:var(--up)} .tally .down .n{color:var(--down)}

/* 최대 매수·최대 매도. **줄글이 아니라 세 칸입니다** — 바로 아래 사건 줄과
   같은 짜임(이름표 · 이름 · 값)이라 둘이 한 표로 읽힙니다. */
.says{margin:0 0 14px}
.says p{display:flex;align-items:baseline;gap:12px;margin:0 0 5px;
  font-family:var(--mono);font-size:var(--t-num);line-height:1.6;color:var(--ink)}
.says p:last-child{margin-bottom:0}
.says i{font-style:normal;font-family:var(--cond);font-weight:600;
  font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);flex:0 0 auto;min-width:64px}
.says span{flex:1 1 auto;min-width:0}
.says em{font-style:normal;color:var(--ink-3);flex:0 0 auto}
html:not([lang="ko"]) .says i{min-width:88px}

/* 사건(신규·재진입·전량매도)은 크기가 아니라 사건이라 접히지 않고 늘 위에 있다 */
/* **격자는 줄마다가 아니라 블록 하나가 쥡니다.** 줄마다 따로 두면 이름표 폭이
   달라서(`재진입` 48px vs `전량매도` 60px) **마크가 줄마다 다른 자리에서 시작**
   합니다 — 계측기·측량 도면이라는 이 화면의 언어가 거기서 무너집니다(실측).
   한 격자에 두면 네 칸이 두 줄에서 같은 자리에 섭니다. */
.events{border-top:1px solid var(--rule-2);padding-top:12px;
  display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;gap:7px 9px}
/* **`flex` 가 아니라 `grid` 입니다.** 회사 마크가 들어오면서 조각이 넷이 됐는데,
   `flex-wrap` 으로 두었더니 좁은 화면에서 **마크만 따로 한 줄에 떨어지고
   이름표와 섹터가 붙는** 뒤죽박죽이 됐습니다(320px 에서 실측). 격자는 칸이
   정해져 있어 좁아져도 순서가 안 흐트러집니다 — 목록 줄과 같은 판단입니다.

   `baseline` 도 아닙니다: 30px 짜리 그림을 기준선에 맞추면 글자 밑으로 처집니다.
   간격 9px·`center` 는 목록 줄(`.who`)에서 그대로 가져온 값입니다. */
.ev{display:contents;font-family:var(--mono);font-size:var(--t-num);
  line-height:1.9;color:var(--ink-2)}
.ev .tag{font-family:var(--cond);font-weight:600;font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;border:1px solid currentColor;padding:1px 5px;
  justify-self:start;white-space:nowrap}
.ev.in .tag{color:var(--up)} .ev.out .tag{color:var(--down)}
/* 이름과 섹터는 **한 덩어리**입니다 — 목록의 `.who` 와 같은 짜임이라
   좁은 화면에서 섹터가 이름 아래로 접히는 모양도 같습니다. */
.ev .evwho{display:flex;align-items:center;gap:4px 9px;min-width:0;flex-wrap:wrap}
.ev .nm{color:var(--ink);min-width:0}
.ev .sub{color:var(--ink-3);font-family:var(--mono);font-size:var(--t-num);
  justify-self:end;white-space:nowrap}
/* 두 사건 사이는 격자의 `row-gap` 이 띄웁니다 — `.ev` 는 상자가 없어
   `margin` 을 못 씁니다(`display:contents`). */

/* ── 접힘 ─────────────────────────────────────────────────
   **지우지 마세요.** 한 번 지웠다가 되살렸습니다 — 상위 10개만 남기고 나머지를
   통째로 없앤 것은 사용자가 뜻한 바가 아니었습니다("숨겨두기로 했는데 완전
   삭제했어"). 접어 두는 것과 없애는 것은 다릅니다. */
details.fold{border-top:1px solid var(--rule-2);margin-top:2px}
details.fold>summary{list-style:none;cursor:pointer;padding:11px 0 2px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-family:var(--cond);font-weight:700;font-size:var(--t-name);color:var(--ink-2)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"\25B8";color:var(--ink-3);font-size:var(--t-micro)}
details.fold[open]>summary::before{content:"\25BE"}
details.fold>summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
details.fold .rows{margin-top:4px}

/* ── 종목 줄 ─────────────────────────────────────────────── */
.rows{margin:0;padding:0;list-style:none}
.row{border-top:1px solid var(--rule-2)}
.row:first-child{border-top:0}
/* 줄을 누르면 그 종목의 일생이 펼쳐집니다. 여닫이는 `<details>` 가 쥐고 있고
   `<summary>` 가 줄 자체입니다 — **줄 여백(padding)이 `.row` 가 아니라 여기
   있어야 합니다.** `.row` 에 두면 펼친 차트 아래까지 여백이 붙고, 비중 막대의
   기준 상자(`position:relative`)도 차트 높이만큼 늘어나 줄이 기둥이 됩니다.
   기본 삼각형 표식은 지웁니다 — 우리 것은 `.caret` 입니다. */
.rowline{position:relative;display:block;padding:11px 0 12px;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent}
.rowline::-webkit-details-marker{display:none}
.rowline::marker{content:""}
.rowline:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* 여닫이 표식. '더 보기' 와 같은 글자를 씁니다 — 이 화면에서 무언가 열린다는
   말은 하나면 됩니다. 머리글에도 같은 상자를 빈 채로 둬서 열이 안 어긋납니다. */
.caret{flex:0 0 auto;width:9px;font-size:9px;line-height:1;color:var(--ink-3);
  font-weight:400;text-align:center}
.lf>.rowline>.rowin>.who>.caret::before{content:"\25B8"}
.lf[open]>.rowline>.rowin>.who>.caret::before{content:"\25BE"}
/* 비중 막대는 줄의 바탕이다. 제일 큰 종목이 100% 폭이 되게 맞춰 그린다. */
.bar{position:absolute;left:0;top:0;bottom:0;background:rgba(15,26,36,.055);z-index:0}
/* 한 줄은 **세 덩어리**입니다 (2026-09-15, 사용자가 그려 준 구조).

     {왼쪽}  로고 · 순위 · 이름 · 섹터
     {가운데} 보유 주식 수 · 이번 분기 ±주식수 · 추정 수익률
     {오른쪽} 보유 금액, 줄 바꿔 작은 글씨로 비중

   **칸마다 최소 폭을 줍니다.** 줄(`<li>`)마다 격자가 따로라서, 폭을 안 주면
   칸이 줄마다 제 내용만큼 넓어져 세로줄이 안 맞습니다. 이 화면의 언어가
   계측기·측량 도면이라 거기서 다 무너집니다. 값은 실측으로 정했습니다. */
.rowin{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;column-gap:18px;align-items:center}

/* ── 왼쪽: 누구인가 ──────────────────────────────────────── */
.who{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}
.rk{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-3);
  min-width:16px;text-align:right;flex:0 0 auto}
.nm{font-family:var(--cond);font-weight:700;font-size:var(--t-name);letter-spacing:.01em;
  line-height:1.25;min-width:0;overflow-wrap:anywhere}
/* 회사 마크. **로고와 글자 타일이 똑같은 상자를 쓰는 것이 핵심**이다 —
   상자가 제각각이면 몇 줄만 그림이 있는 목록이 '덜 만든 화면'처럼 보인다.
   17px 로 만들었다가 키웠다: 그 크기에서는 심벌(사과·G)만 읽히고 글자 로고
   (무디스·처브·크래프트하인즈)는 뭉개진다. 30px 부터 글자 로고가 살아난다.
   둥근 모서리는 없다(재료표 5번 — 이 화면에 동그라미는 ⓘ 와 표시등뿐). */
.mk{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--card);border:1px solid var(--rule-2);flex:0 0 auto}
.mk svg{width:19px;height:19px;display:block}
.mk.img img{width:100%;height:100%;object-fit:contain;display:block}
.mk.mono{background:var(--ink-2);border-color:var(--ink-2);color:#fff;
  font-family:var(--cond);font-weight:700;font-size:var(--t-small);letter-spacing:.02em;line-height:1}
.cls{font-family:var(--cond);font-weight:600;font-size:var(--t-micro);letter-spacing:.1em;
  color:var(--ink-3);border:1px solid var(--rule);padding:0 4px;margin-left:6px;
  white-space:nowrap;vertical-align:2px}
/* 섹터. **테두리를 두르지 않습니다** — 테두리 상자는 주식 종류(A+C)의 것이고,
   한 줄에 똑같이 생긴 상자가 둘이면 무엇이 무엇인지 흐려집니다. 섹터는
   이름에 딸린 설명이라 글자만 작고 흐리게 둡니다. */
.sec{font-family:var(--cond);font-weight:600;font-size:var(--t-small);letter-spacing:.06em;
  color:var(--ink-3);white-space:nowrap;flex:0 0 auto}

/* ── 가운데: 얼마나 들고, 이번에 얼마나 움직였고, 얼마가 됐나 ─────
   셋 다 가운데 맞춤입니다. 색은 수익률에만 씁니다 — 사고판 것은 이득이
   아니라 행동이라 중립색입니다(재료표 13). */
.mid{display:flex;align-items:flex-start;gap:12px;justify-content:center}
/* 줄 높이를 세 칸에 똑같이 못박습니다 — `.act` 만 다른 값을 쓰면 글자 상자가
   달라져 숫자가 3px 어긋납니다(실측으로 잡았습니다). */
.mid>span{font-family:var(--mono);font-size:var(--t-num);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:center;line-height:1.25}
.hold{color:var(--ink-2);min-width:82px}
/* 이번 분기 칸 — **숫자 한 줄뿐입니다.** 예전에는 위에 `BUY`/`SELL` 이름표를
   달았는데, 글자를 14px 로 올리자 그 스티커가 줄마다 튀어 보였습니다
   (사용자: "글자가 커지니까 별로 뵈기가 싫으네"). 지금은 **숫자 자체를**
   매수는 `--up`, 매도는 `--down` 으로 칠합니다 — 부호(+/−)와 색이 같은 말을
   하므로 이름표가 없어도 방향이 읽힙니다. `--up`/`--down` 이라 언어를 따라
   함께 뒤집힙니다(한국어 빨강 매수 · 영어 초록 매수).

   **이름표가 없어지면서 세 칸의 빈 줄 자리도 같이 지웠습니다** — 그 14px 은
   이 칸이 두 줄이던 시절에 이웃 칸의 숫자를 같은 높이에 맞추려던 것입니다.
   한 칸만 남기면 이번엔 반대로 어긋납니다(7번의 "지운 블록의 CSS 가 남아
   화면을 밀어낸다"와 같은 자리). */
.act{color:var(--ink-2);min-width:96px}
.act.up{color:var(--up)} .act.down{color:var(--down)}
.ret{font-weight:500;min-width:72px}   /* .note 와 같은 폭이어야 합니다 ↓ */
.ret.up{color:var(--up)} .ret.down{color:var(--down)}
/* **`.ret` 와 `.note` 는 폭이 같아야 합니다.** 가운데 세 칸은 `justify-content:
   center` 라, 셋째 칸만 넓은 줄(`집계 전`)이 섞이면 **덩어리 전체가 옆으로
   밀려** 세로줄이 어긋납니다(영어에서 18px 씩 흔들렸습니다). */
/* **이 칸만 두 줄입니다** (2026-09-21, 사용자 지정: `집계 전부터` / `보유`).
   끊는 자리는 사전의 `\n` 이 정하고 여기서 `pre-line` 으로 살립니다 —
   폭에 맡기면 언어·화면마다 다른 데서 끊깁니다.
   **크기를 이름표(11.5px)로 한 칸 내렸습니다** — 14px 두 줄이면 그 줄만
   17px 더 커집니다. `.mid` 가 `flex-start` 라 첫 줄은 옆 숫자와 나란하고
   둘째 줄만 아래로 늘어집니다. */
/* **선택자를 `.mid>.note` 로 씁니다.** `.note` 만 쓰면 바로 위
   `.mid>span{white-space:nowrap;font-size:…}` 이 이겨서 두 줄이 안 됩니다
   (실측: `white-space` 가 `nowrap`, 크기가 14px 그대로였습니다). */
.mid>.note{color:var(--ink-3);min-width:72px;font-size:var(--t-label);
  line-height:1.15;white-space:pre-line}
/* **한글만 줄 사이를 벌립니다** (2026-09-22, 사용자 지적: "한글 기준으로 줄간이
   너무 붙어 있어"). 잰 잉크 간격은 두 언어가 똑같이 3.21px 인데 **보이는 것이
   다릅니다** — 한글은 네모 칸을 꽉 채우는 글자라 두 줄이 맞붙은 덩어리로
   읽히고, 영문 소문자는 글자 속이 비어 있어 같은 간격이 넓어 보입니다.
   1.4 로 올리면 간격이 6.1px 이 되고 칸만 5.8px 아래로 자랍니다
   (`.mid` 가 `flex-start` 라 첫 줄은 그대로 옆 숫자와 나란합니다). */
html[lang="ko"] .mid>.note{line-height:1.4}
html:not([lang="ko"]) .hold{min-width:82px}
/* 값은 실측입니다 — 글자를 14px 로 올린 뒤 각 칸의 제일 긴 내용을 재서
   잡았습니다. 안 맞추면 줄마다 칸 폭이 달라져 세로줄이 어긋납니다 —
   실제로 영어에서 23px 씩 흔들렸습니다. */
html:not([lang="ko"]) .act{min-width:100px}
html:not([lang="ko"]) .ret,
html:not([lang="ko"]) .note{min-width:96px}

/* ── 목록 머리글 ─────────────────────────────────────────────
   열 이름은 **안 변하는 말**이라 머리에 한 번만 적습니다. 줄마다 바뀌는
   `BUY`/`SELL` 만 줄 안에 둡니다 — 변하는 것은 줄에, 안 변하는 것은 머리에. */
.head{padding:0 0 8px;border-bottom:1px solid var(--rule);align-items:end}
.head .mid>span,.head .amt span{font-family:var(--cond);font-weight:600;
  font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-3);white-space:nowrap;
  text-transform:uppercase;line-height:1.2}
.head .amt span{text-align:right}
.head .hold::before,.head .ret::before{content:none}

/* ── 오른쪽: 금액이 주인공, 비중은 그 밑에 작게 ──────────────────
   비중은 막대가 이미 그림으로 말하고 있으므로 숫자는 작게 적습니다. */
.amt{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:78px}
.val{font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:-.02em;
  line-height:1.15;white-space:nowrap}
.wt{font-family:var(--mono);font-size:var(--t-small);color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;line-height:1}

/* ── 한 종목의 일생 (줄을 펼치면 나옵니다) ───────────────────
   **위 칸 가격선 · 아래 칸 매매 막대, 가로축을 함께 씁니다.** 성적표가 이미
   쓰는 어휘입니다. 색은 매매에만 씁니다 — 가격선은 방향이 아니라 사실이라
   중립색(재료표 4번의 `보조 가격선 --ink-2 1.6px`)입니다.

   선택한 기간 전체를 화면 폭에 맞춥니다. 가격선과 막대는 같은 가로축입니다. */
.life{margin:2px 0 13px;padding:0}
/* **캡션 줄은 없앴습니다** (사용자 판단, 2026-09-17) — `위 칸 — 분기말 가격 ·
   아래 칸 — 그 분기에 사고판 주식수` 는 그림을 보고도 무슨 말인지 모르겠다는
   지적을 받았습니다. 두 칸이 무엇인지는 값(달러 · 주식수)과 말풍선이 말합니다. */
/* 짚은 자리에 뜨는 값. **그림 안(SVG)이 아니라 위에 얹는 HTML** 이라 바탕을
   깔 수 있고 그림 밖으로 잘리지 않습니다. 기준 상자는 `.lifescroll` 이라
   옆으로 끌면 같이 따라갑니다. 마우스를 안 가로채게 `pointer-events:none`. */
.lifetip{position:absolute;pointer-events:none;z-index:3;white-space:normal;width:max-content;max-width:calc(100% - 8px);box-sizing:border-box;
  background:var(--card);border:1px solid var(--rule);padding:4px 7px;
  font-family:var(--mono);font-size:var(--t-num);font-weight:500;line-height:1.45;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.lifetip em{font-style:normal;color:var(--ink-3);margin-right:7px}
.lifetip i{font-style:normal;font-family:var(--cond);font-weight:700;font-size:var(--t-micro);
  letter-spacing:.12em;margin-right:4px}
.lifetip i.up{color:var(--up)} .lifetip i.down{color:var(--down)}

/* 기간 버튼 줄. **한 줄로 두고 좁으면 옆으로 흐릅니다** — 4번의 "2줄은 디자인이
   너무 조잡해질 것 같다"가 여기도 그대로 걸립니다. */
.lifeseg{margin:0 0 7px;max-width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch}
.lifeseg button{flex:0 0 auto}
.lifescroll{position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;
  -webkit-overflow-scrolling:touch}
.lifescroll svg{display:block}
.lifenote{font-family:var(--mono);font-size:var(--t-text);line-height:1.7;
  color:var(--ink-3);margin:5px 0 0}
.lifenote{margin:0 0 13px}

/* ── 분기별 보유 변화 (펼친 줄 안, 차트 바로 밑) ────────────────────
   **캡션이 아니라 단추로 보여야 합니다** (2026-09-22, 사용자 지적 — "클릭하면
   뭐가 나올지 알 수가 없게끔 만들어져 있네"). 처음에는 11.5px 대문자 회색
   글자였는데, 그건 이 화면에서 **캡션의 생김새**라 눌러도 되는 줄 알 수가
   없었습니다. 문제는 색이 아니라 **모양**이었습니다.

   **바로 위 기간 버튼(`.seg`)과 같은 옷을 입힙니다** — 테두리 1px · 종이 대신
   카드 바탕 · `--cond` 600 · `--ink-2`. 펼친 줄 안에 이미 단추가 있으니
   **새 어휘를 하나도 안 만들고** "이건 누르는 것"이 읽힙니다.

   **색은 안 씁니다.** 이 화면에서 빨강·초록·파랑은 이미 상승·하락의 뜻이고
   **언어를 따라 뒤집힙니다**(6번) — 바로 아래 표의 `변화` 칸이 그 색을 씁니다.
   단추까지 칠하면 한국어에서는 '매수', 영어에서는 '매도'로 읽히는 단추가 되고,
   재료표 13 의 *"색을 늘리지 마세요"* 에도 걸립니다. */
details.rec{margin:0 0 13px}
details.rec>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;flex-wrap:wrap;gap:6px 9px;padding:0;
  -webkit-tap-highlight-color:transparent}
details.rec>summary::-webkit-details-marker{display:none}
details.rec>summary::marker{content:""}
.recbtn{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--rule);background:var(--card);padding:5px 10px;
  font-family:var(--cond);font-weight:600;font-size:var(--t-label);
  letter-spacing:.06em;color:var(--ink-2);line-height:1.2}
/* 캐럿은 목록의 '더 보기' 와 같은 글자입니다 — 이 화면에서 무언가 열린다는
   표시는 ▸/▾ 하나뿐이어야 합니다. */
.recbtn::before{content:"\25B8";font-size:var(--t-micro);letter-spacing:0;
  color:var(--ink-3)}
details.rec[open] .recbtn::before{content:"\25BE"}
/* **여닫이에 따라 둘 중 하나만 보입니다.** 글자를 JS 로 갈아 끼우지 않는 이유는
   건수가 안 바뀌기 때문입니다 — 바뀌는 것이 말뿐이면 CSS 가 더 싸고, 다시
   그릴 일이 없어 키보드 초점도 안 잃습니다. */
.recbtn.open{display:none}
details.rec[open] .recbtn{display:none}
details.rec[open] .recbtn.open{display:inline-flex}
details.rec>summary:hover .recbtn{border-color:var(--ink-3);color:var(--ink)}
/* 초점 테두리는 단추에 둡니다 — `summary` 는 건수까지 감싸고 있어서 거기에
   두르면 네모가 글자보다 넓게 떠 보입니다. */
details.rec>summary:focus-visible{outline:none}
details.rec>summary:focus-visible .recbtn{outline:2px solid var(--ink);
  outline-offset:2px}
/* 건수는 **단추 밖**입니다. 누르기 전에 얼마나 긴지 알려 주는 값이지 단추의
   이름이 아닙니다(숫자라 고정폭으로 둡니다). */
.reccnt{font-family:var(--mono);font-weight:400;font-size:var(--t-micro);
  color:var(--ink-3)}
/* 줄이 많으면 표만 세로로 흐릅니다 — 애플이 26줄이라 다 펴면 카드가 길어집니다.
   `max-height` 를 넘을 때만 스크롤이 생기므로 짧은 표(중앙값 6줄)는 그대로입니다. */
.recwrap{margin-top:6px;max-height:340px;overflow:auto;-webkit-overflow-scrolling:touch}
.rectbl{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:var(--t-small);font-variant-numeric:tabular-nums}
/* 머리글은 표와 함께 위에 붙어 있어야 합니다 — 스크롤되면 어느 칸인지 잊습니다. */
.rectbl th{position:sticky;top:0;z-index:1;background:var(--card);
  font-family:var(--cond);font-weight:600;font-size:var(--t-micro);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:right;white-space:nowrap;
  padding:0 0 5px;border-bottom:1px solid var(--rule)}
.rectbl td{padding:4px 0;border-bottom:1px solid var(--rule-2);text-align:right;
  white-space:nowrap;color:var(--ink-2)}
.rectbl tr:last-child td{border-bottom:0}
/* 날짜만 왼쪽 맞춤입니다 — 나머지는 숫자라 오른쪽으로 맞춰야 자릿수가 섭니다
   (4번 성적표의 "숫자 칸은 오른쪽 맞춤"과 같은 규칙). */
.rectbl .rcq{text-align:left;color:var(--ink-3)}
.rectbl th+th,.rectbl td+td{padding-left:12px}
/* 색은 **변화 칸에만** 씁니다. 가격·금액까지 칠하면 한 줄에 색깔 숫자가 셋이 되어
   어느 것이 행동이고 어느 것이 돈인지 흐려집니다(재료표 13 — 색을 늘리지 마세요). */
.rectbl .rcm{color:var(--ink)}
.rectbl .rcm.up{color:var(--up)} .rectbl .rcm.down{color:var(--down)}
/* **좁은 화면에서는 다섯 칸이 안 섭니다** — 실측으로 320px 에서 쓸 수 있는 폭이
   262px 인데 표가 한국어 408 · 영어 533px 을 씁니다. 셋을 손봅니다.

   1. `평가 금액` 을 감춥니다 — 보유 주식수 × 분기말 가격이라 **바로 옆 두 칸에서
      나오는 값**이고, 지금 금액은 줄이 이미 적고 있습니다. 다섯 중 제일 덜 말합니다.
   2. 머리글이 줄을 바꿉니다(`Quarter-end price` 가 한 줄이면 145px 입니다).
   3. 그래도 넘치면 옆으로 끄는데, **날짜 칸을 왼쪽에 붙여 둡니다** — 안 붙이면
      끌었을 때 지금 보는 줄이 어느 분기인지 알 수 없습니다.

   **세로 높이 제한은 풉니다.** 손가락이 상자 안에 닿으면 페이지가 안 넘어갑니다 —
   좁은 화면에서는 페이지를 그냥 내리는 편이 낫습니다(머리글 고정도 같이 풉니다). */
@media (max-width:640px){
  .recwrap{max-height:none}
  .rectbl th{white-space:normal}
  /* 변화 칸의 **말로 된 이름표**만 줄을 바꿉니다(`Held before records` 가 한 줄이면
     155px 입니다). 숫자에는 띄어쓰기가 없어서 어차피 안 쪼개집니다. */
  .rectbl td.rcm{white-space:normal}
  .rectbl .rcv{display:none}
  .rectbl th.rcq,.rectbl td.rcq{position:sticky;left:0;top:auto;
    background:var(--card);z-index:2}
}
.pLine{fill:none;stroke:var(--ink-2);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.pDot{fill:var(--ink-2)}
.pLab{font-family:var(--mono);font-size:var(--t-small);fill:var(--ink-2)}
/* 0 기준선. 재료표의 `0% 기준선 1.3px` 그대로입니다. */
.zero{stroke:var(--ink-3);stroke-width:1.3}
.bUp{fill:var(--up)}
.bDn{fill:var(--down)}
.bLab{font-family:var(--mono);font-size:var(--t-micro);font-weight:500}
.bLab.up{fill:var(--up)}
.bLab.down{fill:var(--down)}
/* 십자선. 재료표의 눈금 어휘 그대로 — 가는 실선 하나와 점 하나입니다.

   **`hidden` 속성으로 감추지 않습니다.** SVG 안에서는 그게 안 먹혀서, 자리를
   안 정한 십자선이 `x=0` 에 그대로 그려졌습니다 — 모든 차트 왼쪽 위에 세로줄
   하나와 점 반쪽이 붙어 있었습니다. 속성만 보고 "숨었다"고 시험해서 못 잡았고,
   화면을 찍어 보고 나서야 나왔습니다. 지금은 **클래스로** 켜고 끕니다. */
.cross{display:none}
.cross.on{display:inline}
.cross .cx{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:.75}
.cross .cdot{fill:var(--ink)}
/* 들어온 자리·나간 자리. **속을 채우지 않습니다** — 가격선과 같은 중립색의
   테두리만 둡니다. 채우면 점이 무거워져 선보다 먼저 읽히고, 매매 막대가 이미
   색을 쓰고 있어 여기까지 칠하면 한 그림에 색이 셋이 됩니다(재료표 13). */
.mkIn,.mkOut{fill:var(--card);stroke:var(--ink-2);stroke-width:1.6}
.mkOut{stroke-dasharray:2.6 2.2}   /* 나간 자리는 점선 — 여기서 끊겼다는 뜻 */
/* 창보다 앞에 있었던 거래를 알리는 카드. **반투명입니다** — 그림 위에 얹히지만
   가리는 것이 아니라 비치는 것이라, 아래 선이 지나가도 둘 다 읽힙니다.
   말풍선과 달리 **늘 같은 자리**(왼쪽 위)라 선과 다툴 일이 거의 없습니다. */
/* **반투명은 바탕만입니다.** 요소째로 `opacity` 를 내리면 글자까지 옅어져
   대비가 떨어집니다 — 카드는 비쳐야 하지만 글자는 또렷해야 합니다. */
.lifeprior{position:absolute;left:10px;top:20px;pointer-events:none;z-index:2;
  white-space:nowrap;font-family:var(--mono);font-size:var(--t-micro);font-weight:400;
  letter-spacing:0;color:var(--ink-3);background:rgba(255,255,255,.86);
  border:1px solid var(--rule-2);padding:3px 7px;line-height:1.4}
.lifeprior span{display:block}
.lifeprior em{font-style:normal;font-weight:500}
.lifeprior .up{color:var(--up)} .lifeprior .down{color:var(--down)}
.bUp,.bDn{opacity:.72}
.ax{stroke:var(--rule);stroke-width:1}
/* **맞춤을 CSS 에 두지 않습니다** — CSS 가 SVG 속성을 이겨서 맨 왼쪽 연도의
   `text-anchor="start"` 가 먹히지 않습니다(7번의 `fill` 과 같은 자리). */
.axL{font-family:var(--mono);font-size:var(--t-micro);fill:var(--ink-3)}

/* ── 범례·각주 ───────────────────────────────────────────── */
/* 각주는 **읽는 글이 아니라 확인하는 글**입니다. 2026-09-17 에 11 → 13.5px
   로 올렸었는데, 문단이 14개나 되자 사용자가 "너무 커, 이걸 누가 읽겠어"
   라고 했습니다. 문단을 9개로 줄이면서 크기도 한 칸 내렸습니다 —
   **11px 바닥은 안 건드립니다**(--t-small 12.5px). */
.foot{font-family:var(--mono);font-size:var(--t-small);line-height:1.8;color:var(--ink-3);margin:26px 0 0}
.foot h2{font-family:var(--cond);font-weight:600;font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.foot p{margin:0 0 7px}
.foot a{color:inherit}
.back{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:var(--t-text);color:var(--ink-3)}

/* ── 애니메이션 — 최초 1회만 ─────────────────────────────── */
.fade{animation:fade .5s ease-out both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
body.settled .fade{animation:none}
@media (prefers-reduced-motion:reduce){ .fade{animation:none} }

/* ── 줄이 접히는 구간 ─────────────────────────────────────
   **810px 미만에서는 세 덩어리가 한 줄에 못 섭니다.**

   `집계 전부터 보유` 를 두 줄로 끊으면서 셋째 칸이 118/164 → 72/96px 로
   도로 좁아졌습니다. 그래서 **문턱을 640px 로 되돌려 봤는데, 되돌리면
   안 됩니다** — 641px 에서 영어 종목 이름이 **10줄** 밀립니다(700px 3줄).
   그것은 칸을 넓히기 전부터 있던 것이고, 810px 문턱이 지금 그걸 없애 주고
   있습니다(641~809px 에서 이름 밀림 0). 실측한 값이라 그대로 둡니다.

   **아래 640px 블록과 따로 둡니다** — 거기에는 여백·제목 크기처럼 정말
   좁은 화면에만 맞는 것들이 들어 있고, 태블릿까지 같이 줄일 이유가 없습니다. */
@media (max-width:809px){
  /* 왼쪽은 그대로 두고 가운데·오른쪽만 아래로 내립니다 — 로고와 이름이 먼저
     읽히는 순서는 지키면서, 숫자 세 칸이 제 너비를 갖습니다. 최소 폭도 풉니다. */
  .rowin{grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:7px}
  .who{grid-column:1/3}
  .mid{grid-column:1;justify-content:flex-start;flex-wrap:wrap;gap:5px 10px}
  .amt{grid-column:2;min-width:0}
  .mid>span,html:not([lang="ko"]) .mid>span{min-width:0;text-align:left;flex:0 0 auto}
  .act{align-items:flex-start}
  /* 세 칸이 한 줄에 안 서므로 머리글이 가리키는 자리가 사라집니다.
     자리를 못 가리키는 이름표는 없느니만 못합니다. 대신 한 번만 안내합니다. */
  .head{display:none}
  .mobile-guide{display:block;margin:0 0 12px;font-family:var(--mono);font-size:var(--t-small);line-height:1.7;color:var(--ink-2)}
}

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width:640px){
  .wrap{padding:24px 14px 56px}
  .panel{padding:14px}
  .masthead{flex-direction:column;align-items:flex-start;gap:12px}
  .mast-right{align-items:flex-start}
  .stamp{text-align:left}
  .masthead h1{font-size:24px;gap:9px}
  .tmark{width:26px;height:26px;font-size:var(--t-micro)}
  .panel h2{font-size:16px}
  .says i{min-width:0}
  html:not([lang="ko"]) .says i{min-width:0}
  .nm{font-size:15px}
  /* **사건 줄의 금액을 둘째 줄로 내립니다.** 320px 에서 이름표·마크·금액이
     먼저 자리를 가져가 이름에 44px 밖에 안 남습니다 — 그러면 회사 이름이
     세로로 쪼개집니다(실측). 금액을 이름 칸(셋째) 아래로 내리면 왼쪽
     두 칸은 그대로 있고 이름이 제 너비를 갖습니다. */
  .events{grid-template-columns:auto auto minmax(0,1fr);align-items:start}
  .ev .sub{grid-column:3;justify-self:start;white-space:normal}
  /* 이름표와 마크는 **첫 줄에 맞춥니다.** 가운데 맞춤으로 두면 이름이 석 줄로
     접힌 줄에서 둘이 그 덩어리의 한가운데까지 내려가 허공에 뜹니다. */
  .ev .evwho{align-items:start}
  /* 좁은 화면에서는 위아래로 쌓습니다. 240px 짜리를 옆에 두면 글 칸이
     138px 밖에 안 남아 한 줄에 열 글자가 못 들어갑니다(실측). */
  .bio{grid-template-columns:minmax(0,1fr);gap:15px}
  .bio-face{width:100%;max-width:260px;height:auto;aspect-ratio:3/2}
  .val{font-size:18px}
  .mk{width:26px;height:26px}
  .mk svg{width:16px;height:16px}
  .mk.mono{font-size:var(--t-micro)}
  /* 다섯 칸이 한 줄에 들어가게 최소 폭을 내린다. 4+1 로 접히면 마지막 칸
     하나가 줄 전체를 차지해 계기판이 아니라 빈칸처럼 보인다. */
  .tally div{min-width:50px;padding:9px 4px}
  .tally .n{font-size:19px}
  .tally .k{font-size:var(--t-micro);letter-spacing:.06em}
  /* 영어 대문자 캡션은 한국어보다 훨씬 길다 — 좁은 화면에서 줄을 바꾸게 둔다 */
  .tally .k{white-space:normal}
}